/* founding.css — /founding/ only.
 *
 * Loaded AFTER site.css and aesthetics.css, and it adds nothing those two
 * already carry. Three jobs, all of them spacing and rhythm rather than new
 * colour: give this page more air than any other route on the site, mark
 * every section break with the ONE gold hairline BRAND.md §0 allows, and
 * give the four steps a numeral column so the eye has something to walk down.
 *
 * No new palette entry. Gold is #CDA05E from the locked v2 system and appears
 * here only as a rule, never as text, which is the same constraint BRAND.md
 * puts on it.
 *
 * Nothing in here is required for the page to READ. If this sheet 404s the
 * page still renders as ordinary site.css sections, which is the reason the
 * copy carries the meaning and this file only carries the pace.
 */

:root {
  --gold: #cda05e;
  --gold-rule: rgba(205, 160, 94, 0.42);
}

/* ─── Pace ──────────────────────────────────────────────────────────────
   site.css sets section padding to --sp-7 (96px). This page runs at 160px
   desktop / 104px phone: it is a page with four short sections, so the space
   between them is doing the work that copy does elsewhere. */
.founding main section { padding: 160px 0; }

/* The divider. site.css draws a white hairline between adjacent sections;
   here it is gold and wider, so a break reads as a deliberate rest rather
   than a seam. */
.founding main section + section::before {
  width: min(880px, calc(100% - var(--sp-4)));
  background: linear-gradient(90deg,
    transparent,
    var(--gold-rule) 18%,
    var(--gold-rule) 82%,
    transparent);
}

/* Section label + heading pair. The label is set small and wide, the heading
   is one line wherever the words allow it. */
.founding .eyebrow { margin-bottom: var(--sp-3); }
.founding .f-h {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-6);
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: none;
  max-width: 22ch;
}

/* ─── The four steps ────────────────────────────────────────────────────
   A numeral column, a bold first clause, one sentence under it. The row
   border is the only structure; no cards, no boxes. */
.f-steps { list-style: none; margin: 0; padding: 0; }
.f-steps li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--hairline);
}
.f-steps li:last-child { border-bottom: 1px solid var(--hairline); }
.f-steps .n {
  font-family: var(--mono);
  font-size: var(--fs-5);
  line-height: 1.1;
  color: var(--gold);
  opacity: 0.75;
  letter-spacing: 0.06em;
}
.f-steps strong {
  display: block;
  font-weight: 400;
  font-size: var(--fs-4);
  color: var(--fg);
  margin-bottom: 6px;
}
.f-steps span.d {
  display: block;
  font-size: var(--fs-3);
  line-height: 1.7;
  color: var(--muted);
  max-width: 52ch;
}

/* ─── Price ─────────────────────────────────────────────────────────────
   The one display-type moment outside the hero. A number this size is the
   opposite of a discount badge: it is stated once, plainly, and not sold. */
.f-price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
}
.f-price .amt {
  font-family: var(--display);
  font-size: clamp(44px, 7vw, 76px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.f-price .per {
  font-family: var(--mono);
  font-size: var(--fs-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ─── What membership carries ───────────────────────────────────────────
   Label left, plain-language value right. Same ledger grammar as the hero. */
.f-terms { list-style: none; margin: 0; padding: 0; }
.f-terms li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--hairline);
}
.f-terms li:first-child { border-top: 1px solid var(--hairline); }
.f-terms .k {
  font-family: var(--mono);
  font-size: var(--fs-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.f-terms .v { font-size: var(--fs-3); line-height: 1.7; color: var(--muted); }
.f-terms .v strong { color: var(--fg); font-weight: 400; }

/* ─── Short declarative lines, one per row ──────────────────────────────
   Used by "what is true today". Each line gets its own baseline so nothing
   turns into a paragraph. */
.f-lines { margin: 0; padding: 0; list-style: none; }
.f-lines li {
  font-size: var(--fs-4);
  line-height: 1.6;
  color: var(--muted);
  padding: var(--sp-2) 0;
  max-width: 54ch;
}
.f-lines li strong { color: var(--fg); font-weight: 400; }

/* ─── Form block breathing room ─────────────────────────────────────────── */
.founding .waitlist-form { margin-top: var(--sp-4); }
.founding .form-aside,
.founding .form-legal { max-width: 460px; margin-left: auto; margin-right: auto; }

/* ─── The one app shot ──────────────────────────────────────────────────
 * experience.css crops the First Read card out of the DESKTOP capture at a
 * 40/9 letterbox tuned for the homepage. Reused here unchanged it sliced the
 * card and, at phone width, shrank the one sentence the section exists to
 * show into a grey smear.
 *
 * Solved against the real files rather than eyeballed. Desktop capture is
 * 1600x1298 and the First Read card sits at x 0.19..0.97, y 0.108..0.231. At
 * 170% the sentence renders near 14px inside a 712px column, and the box ends
 * below the card's own hedge lines instead of halfway into the next card.
 *
 * Phone swaps to the PORTRAIT capture (780x1688, card at x 0.22..0.95,
 * y 0.272..0.669). Cropping a landscape screenshot down to 390px cannot keep
 * type that small legible; using the right source can. */
.founding .xp-crop--read { --xp-ar: 40 / 9; --xp-zoom: 170%; --xp-x: 46%; --xp-y: 10.7%; }

@media (max-width: 720px) {
  .founding .xp-crop--read {
    background-image: url('/product/command-hub-phone.webp');
    --xp-ar: 3 / 4;
    --xp-zoom: 130%;
    --xp-x: 86%;
    --xp-y: 47%;
  }
}

/* ─── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .founding main section { padding: 104px 0; }
  .founding .f-h { font-size: var(--fs-5); margin-bottom: var(--sp-4); }
  .f-steps li { grid-template-columns: 44px 1fr; gap: var(--sp-2); padding: var(--sp-3) 0; }
  .f-terms li { grid-template-columns: 1fr; gap: 6px; padding: var(--sp-2) 0; }
  .f-price { margin-bottom: var(--sp-4); }
}