/* Academy — "The Stack".
   Direction selected by the Founder 2026-08-18 from the Design FPM v2 trial
   (run academy-index-2026-08-18). Amber treatment B applied the same day:
   the field eased from #F6C564, ink warmed off pure black, display weight
   lightened on amber — near-black on a fully saturated amber read as harsh.

   THE SYSTEM IN ONE LINE: one continuous coral ground, and the page is a
   stack of chapter cards resting on it. Colour is wayfinding, not decoration:
     amber  = the material you already have
     forest = what stays yours
     coral  = the act, and nothing else
     sand/paper = ground to rest on between them
   Rules carried from the parity review: exactly ONE thing to act on per
   coloured screen, and no chapter leaves a dead column. */

:root{
  --coral:#D3431A;        /* the ground, and the act */
  --coral-ink:#FFFFFF;    /* MEASURED 4.58:1 on the coral above. The hue was
                             #D8451B and measured 4.39:1 — under AA for small
                             regular-weight text, though this file claimed
                             4.83:1. Eased two value steps: same hue (13.3deg),
                             same saturation (.875), value .847 -> .827, so
                             small text clears 4.5 without the colour reading
                             as a different colour. Text on the coral ground
                             stays pure white with no alpha spent, and nav and
                             footer stay at 650. */
  --amber:#F6C564;        /* Eased twice. #E8A317 -> #F0B440 (2026-08-18), then
                             -> #F6C564 on the Founder's 2026-08-19 note, "I
                             thought we reduced the intensity of the Yellow/
                             Orange." Same hue (40deg) both times; saturation
                             .901 -> .733 -> .593, value lifted to match. It is
                             still a screen colour rather than a muted print
                             one (R81) — the reduction is in saturation, not in
                             brightness. Espresso ink on it now measures
                             10.33:1. Large amber FIELDS are what read hot, not
                             the swatch, which is why this had to come down
                             again after the swatch already looked fine. */
  --on-amber:#2A1C06;     /* espresso — ink on amber, never pure black. 8.92:1 */
  --forest:#244A36;
  --on-forest:#FBF7EF;    /* 10.6:1 */
  --sand:#F2E4C6;
  --paper:#FBF7EF;
  --ink:#171A16;
  --ink-2:#58604F;        /* 6.14:1 on paper */
  --on-forest-2:rgba(251,247,239,.80);
  --on-amber-2:rgba(42,28,6,.76);
  /* Apple HIG text styles in pt, as Option C set them, then eased down one
     step on the Founder's order of 2026-08-19: "way too much text... reduce the
     sizes of the fonts, WITHOUT changing the layout, which gives a bit more
     space."

     READ THIS BEFORE "FIXING" IT BACK. Earlier the same day this scale was
     RESTORED, because an unauthorised px conversion had shrunk it ~25% while
     leaving every column at its old width — long measures and small headings.
     This reduction is the opposite act and is deliberate: it is ~12%, it is his
     instruction, and the layout is held exactly (sheet 1000, card 952, column
     840, heading measure 20ch, two grids). The character caps below are
     unchanged, so smaller type means physically narrower text blocks — which is
     where the extra space comes from. Shrinking type is only a regression when
     the measures do not move with it. */
  --largeTitle:30pt; --title1:24pt; --title2:19pt; --title3:18pt;
  --headline:16pt; --body:15pt; --callout:15pt; --subhead:14pt; --footnote:12pt;
  --radius:26px;
  --shadow:0 10px 30px rgba(23,26,22,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--coral); color:var(--ink);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:var(--body); line-height:1.5; letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
.sheet{max-width:1000px;margin:0 auto;padding:0 24px 88px}
a{color:inherit}
.skip{position:absolute;left:-9999px;top:0;background:var(--forest);color:var(--paper);padding:12px 20px;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}

/* ── type: HIG named styles at real sizes ───────────────────────────── */
h1{font-size:var(--largeTitle);line-height:1.08;letter-spacing:-0.03em;font-weight:700;text-wrap:balance}
h2{font-size:var(--title1);line-height:1.08;letter-spacing:-0.03em;font-weight:700;text-wrap:balance}
/* Every chapter heading is the same size and stops at the same measure.
   Hierarchy is carried by colour — that is the direction's own system — and a
   heading that runs the full column is what broke the alignment. */
.chapter h2{font-size:clamp(21pt,2.6vw,30pt);max-width:20ch}
h3{font-size:var(--headline);line-height:1.2;letter-spacing:-0.02em;font-weight:700}
h4{font-size:var(--subhead);line-height:1.3;letter-spacing:-0.015em;font-weight:700}
p{font-size:var(--body);line-height:1.5;letter-spacing:-0.005em;max-width:62ch}
.lede{font-size:var(--title3);line-height:1.35;letter-spacing:-0.02em;font-weight:400;max-width:56ch}
.small{font-size:var(--subhead);line-height:1.45}
.sub{color:var(--ink-2)}

/* On amber the display weight eases — 700 on a bright field reads heavier
   than the same weight on paper (Founder, 2026-08-18). */
.chapter.amber h1,.chapter.amber h2,.chapter.amber h3,.chapter.amber h4{font-weight:620}
.chapter.amber{color:var(--on-amber)}
.chapter.amber .sub{color:var(--on-amber-2)}
.chapter.forest{color:var(--on-forest)}
.chapter.forest .sub{color:var(--on-forest-2)}

/* ── nav on the coral ground ─────────────────────────────────────────── */
nav{position:relative;z-index:5}
.nav-in{max-width:1000px;margin:0 auto;padding:22px 24px;display:flex;align-items:center;gap:24px}
.wordmark{font-size:var(--title3);font-weight:700;letter-spacing:-0.03em;color:#fff;text-decoration:none}
.nav-links{display:flex;gap:24px;margin-left:auto;align-items:center;flex-wrap:wrap;font-size:var(--subhead)}
.nav-links a{color:#fff;text-decoration:none;font-weight:650}
.nav-links a:hover{color:#fff}
.nav-links a.btn{color:var(--coral)}
.nav-links a.btn:hover{color:var(--coral)}

/* ── the act: coral on white, white on coral. Never anything else. ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;
  padding:0 30px;border-radius:999px;text-decoration:none;font-weight:650;font-size:var(--callout);
  letter-spacing:-0.01em;background:#fff;color:var(--coral);border:0;cursor:pointer}
.btn-sm{min-height:42px;padding:0 20px;font-size:var(--subhead)}
.btn-solid{background:var(--coral);color:#fff}     /* on paper/amber chapters */
.btn-ink{background:var(--ink);color:var(--paper)}
.link-plain{text-decoration:underline;text-underline-offset:5px;font-size:var(--callout)}

/* ── the opening, directly on the ground ─────────────────────────────── */
.top{padding:104px 0 92px;color:#fff}
.top .split{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
/* Three lines, not four. The words are Founder-locked, so the measure moves,
   not the copy: at 15ch this wrapped to four lines and his eye landed on the
   last one instead of the first. */
.top h1{font-size:clamp(28pt,4.2vw,44pt);max-width:23ch;margin:0 auto}
.top .lede{margin-top:22px;color:#fff;max-width:48ch}
/* a block narrower than its parent does not centre itself just because the
   text inside it is centred — this line was sitting 182px left of the page. */
.top .cta-lead{margin:26px auto 0;max-width:none;font-weight:650;font-size:var(--callout)}
.acts,.top .cta-row{display:flex;gap:18px;align-items:center;margin-top:26px;flex-wrap:wrap}
.top.solo .cta-row{justify-content:center}
.top .link-plain{color:#fff}
.top img{width:100%;height:auto;display:block}
/* a hero with no image centres instead of leaving a dead column */
.top.solo{text-align:center}
.top.solo h1{margin:0 auto}
.top.solo .lede{margin-left:auto;margin-right:auto}
.top.solo .acts{justify-content:center}

/* ── consent banner: decline and accept carry equal weight ───────────── */
#cc{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:flex;gap:14px;
  align-items:center;flex-wrap:wrap;justify-content:center;background:var(--paper);
  color:var(--ink);border-radius:16px;padding:16px 20px;box-shadow:0 14px 40px rgba(0,0,0,.28);
  max-width:760px;margin:0 auto}
/* #cc is an id, so its display:flex outranks the UA's [hidden]{display:none}:
   the script set hidden=true on Accept/Decline and the banner stayed on screen.
   Verified broken and verified fixed by driving the button in a browser. */
#cc[hidden]{display:none}
#cc p{font-size:15px;margin:0;max-width:46ch}
#cc button{min-height:42px;padding:0 20px;border-radius:999px;border:0;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:650;letter-spacing:-0.01em}
#cc-no{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(23,26,22,.34)}
#cc-yes{background:var(--coral);color:#fff}

/* ── RICH BLUE: the companies page ────────────────────────────────────────
   Founder, 2026-08-20: the companies page is "the exact same but with the
   language focus and value focus on what companies are after... also let's
   make it Rich Blue instead of the Rich Orange."
   One override, not a second stylesheet. --coral is the ground, the act and
   the accent mark throughout this file, so redefining it for the page re-aims
   every one of those at once and nothing can drift out of step later.
   MEASURED, the same way the coral was: #1F4FA8 against pure white is 7.66:1,
   against the amber accent 4.77:1, against paper 7.17:1. All clear AA, and
   white text on it needs no alpha spent. */
.theme-blue{
  --coral:#1F4FA8;
  --coral-ink:#FFFFFF;
}

/* ── chapters: the stack itself ──────────────────────────────────────── */
.chapter{background:var(--paper);border-radius:var(--radius);padding:56px;margin-top:22px}
.chapter.amber{background:var(--amber)}
.chapter.forest{background:var(--forest)}
.chapter.sand{background:var(--sand)}
/* NO RULE BEFORE A LABEL. EVER. Founder, 2026-08-19, now permanent law:
   "I never want to see it in any fucking design, fucking ever." A decorative
   dash ahead of an eyebrow is exactly the kind of ornament that gets added
   because a section "needs something" — it carries no information and it is
   the first thing he sees. This session added one the round before and it was
   the top item on his list. The scanning cue is a SYMBOL that means something
   (see .tag-sym below), never a line.
   Checked before every delivery. */
.tag{display:flex;align-items:center;gap:9px;font-size:var(--footnote);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;opacity:.68;margin-bottom:18px}
/* A small drawn mark that says what the section is about — the 37signals
   habit: warm, plain, a little hand-made, and never a grid of generic icons.
   Sized to the label, inherits its colour, hidden from screen readers because
   the label beside it already says the same thing. */
.tag-sym{width:19px;height:19px;flex:0 0 auto;opacity:.9;transform:translateY(-1px)}
.tag-sym path,.tag-sym circle,.tag-sym rect,.tag-sym line,.tag-sym polyline{
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.chapter .lede{margin-top:20px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:38px}
.big{display:grid;gap:30px;margin-top:38px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.mt{margin-top:26px}
/* the product surface sits between the heading and the prose it proves */
.uiwrap{margin:28px 0 6px;max-width:620px}
/* The flow is a three-across sequence and needs the full column. Done with an
   explicit class, not :has() — this run's Foundation assessment declared no
   :has() dependency, and a rule may not quietly break its own declaration. */
.uiwrap.flowwrap{max-width:none}
.flow{margin-top:0}
.chapter.forest .uiwrap,.chapter.amber .uiwrap{max-width:620px}
.chapter h2 + p, .chapter h2 + .lede{margin-top:16px}
.chapter .split > div > .btn{margin-top:22px}
ul.checks{list-style:none;display:grid;gap:14px;margin-top:38px}
/* the closing line and the act inside a chapter, on the same rhythm as .big */
.chapter .cta-lead{margin-top:30px;font-weight:650;font-size:var(--callout)}
.chapter .cta-lead + div{margin-top:18px}
ul.checks li{padding-left:30px;position:relative;max-width:62ch;font-size:var(--body);line-height:1.5}
ul.checks li:before{content:"";position:absolute;left:0;top:9px;width:13px;height:13px;
  border-radius:4px;background:var(--forest)}
.chapter.forest ul.checks li:before{background:var(--amber)}
/* ── questions: closed, and they open ─────────────────────────────────────
   Founder, 2026-08-19: "The Questions need to be closed and then they open
   with the answers." A wall of answered questions is the densest block on the
   page and almost none of it is being read; closed, the same block becomes a
   scannable list of the things people actually ask. */
/* FAQ. Founder: call it FAQ, no eyebrow construction, no line under it —
   "a spacious space where people can feel understood and welcomed", not
   cornered. So: the heading sits alone, the first question has no rule above
   it, and the rows breathe. */
.faq{margin-top:34px}
.faq details{padding:0;border-top:1px solid rgba(23,26,22,.14)}
.faq details:first-child{border-top:0}
.chapter.forest .faq details{border-top-color:rgba(251,247,239,.22)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px;
  padding:22px 0;font-size:var(--headline);font-weight:700;letter-spacing:-0.02em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";flex:0 0 auto;margin-left:auto;width:13px;height:13px;
  border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(45deg) translateY(-3px);opacity:.55;transition:transform .18s ease}
.faq details[open] summary:after{transform:rotate(-135deg) translateY(-3px);opacity:.9}
.faq details p{padding:0 30px 22px 0;max-width:58ch}
@media (prefers-reduced-motion:reduce){.faq summary:after{transition:none}}

/* the ONE action surface per coloured chapter */
.actstrip{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  background:var(--coral);color:#fff;border-radius:20px;padding:32px 34px;margin-top:40px}
.actstrip p{font-size:var(--title3);letter-spacing:-0.02em;max-width:34ch;color:#fff}

/* Founder, 2026-08-20 on the plans: "I do not like 'You keep x% of what you
   charge' because it focuses the attention on this element of the plan instead
   of what they get." So the meter and the per-card share line are gone, and
   each card now says what is in it. The share is still true and still stated,
   once, under the rail, where it belongs. */
.price-list{list-style:none;margin-top:18px;display:grid;gap:10px}
.price-list li{position:relative;padding-left:26px;font-size:var(--subhead);
  line-height:1.45;color:var(--ink-2)}
.price-list li:before{content:"";position:absolute;left:2px;top:6px;width:11px;height:6px;
  border-left:2px solid var(--coral);border-bottom:2px solid var(--coral);
  transform:rotate(-45deg)}
.price-card.on .price-list li{color:var(--on-forest-2)}
.price-card.on .price-list li:before{border-color:var(--amber)}

/* Founder, 2026-08-20: the recognition list is check marks, not small squares,
   and it is written as if the reader wrote it about themselves. */
ul.checks.ticks li:before{content:"";background:none;border-radius:0;
  left:1px;top:7px;width:13px;height:7px;
  border-left:2.5px solid var(--coral);border-bottom:2.5px solid var(--coral);
  transform:rotate(-45deg)}
.chapter.forest ul.checks.ticks li:before{background:none;border-color:var(--amber)}

/* Founder, 2026-08-20: "place this sentence on one line: Your intelligence is
   timeless." The break moved off the first sentence and onto the join, so the
   first line never wraps and the second sits under it. */
.endline{max-width:none}
.endline .endline-1,.endline .endline-2{display:block;white-space:nowrap}
@media (max-width:560px){
  .endline .endline-1,.endline .endline-2{white-space:normal}
}

/* ── the bento ────────────────────────────────────────────────────────────
   Founder, 2026-08-20: replace the titled capability panel with "a bento box
   without a title and without a frame, just a summary of what's on the page
   so far... everything there is about the different elements of value they
   get, and it's also an opportunity to share some colour and provide some
   variety."
   So there is no chapter panel around it and no heading above it. The tiles
   ARE the section: each one is a thing the reader gets, and the colour
   changes tile to tile instead of one flat field. It sits directly on the
   page ground, which is what "without a frame" means here — the surrounding
   sections are inset panels and this one deliberately is not.
   Nothing reaches the page edge: the grid inherits .sheet's measure. */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.bx{border-radius:var(--radius);padding:28px 28px 30px;display:flex;
  flex-direction:column;justify-content:flex-end;min-height:212px}
.bx b{display:block;font-size:var(--title3);letter-spacing:-.025em;line-height:1.2}
.bx p{font-size:var(--subhead);line-height:1.5;margin-top:10px;max-width:48ch}
.bx-fig{font-size:clamp(34pt,4.4vw,52pt);font-weight:700;letter-spacing:-.04em;
  line-height:.86;display:block;margin-bottom:12px}
/* Placed explicitly rather than auto-flowed. Left to flow, the tall tile opened
   a hole in the first row that read as a missing card, which is the same class
   of defect as the 716px panel holding one card. */
.bx-1{grid-column:1;grid-row:1/span 2}
.bx-2{grid-column:2;grid-row:1}
.bx-3{grid-column:3;grid-row:1}
.bx-4{grid-column:4;grid-row:1}
.bx-5{grid-column:2/span 2;grid-row:2}
.bx-6{grid-column:4;grid-row:2}
.bx-7{grid-column:1/span 2;grid-row:3}
.bx-8{grid-column:3/span 2;grid-row:3}
.bx-forest{background:var(--forest);color:var(--on-forest)}
.bx-forest .bx-fig{color:var(--amber)}
.bx-forest p{color:var(--on-forest-2)}
.bx-amber{background:var(--amber);color:var(--on-amber)}
.bx-amber p{color:var(--on-amber-2)}
.bx-sand{background:var(--sand);color:var(--ink)}
.bx-sand p{color:var(--ink-2)}
/* Deliberately NOT coral: the page ground is coral, so a coral tile has no
   edge and disappears. Caught by looking at it. */
.bx-ink{background:var(--ink);color:var(--paper)}
.bx-ink p{color:rgba(251,247,239,.82)}
.bx-paper{background:var(--paper);color:var(--ink)}
.bx-paper p{color:var(--ink-2)}
@media (max-width:1000px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bx-1,.bx-2,.bx-3,.bx-4,.bx-5,.bx-6,.bx-7,.bx-8{grid-column:auto;grid-row:auto}
  .bx-5,.bx-7,.bx-8{grid-column:span 2}
}
@media (max-width:620px){
  .bento{grid-template-columns:1fr}
  .bx-5,.bx-7,.bx-8{grid-column:auto}
  .bx{min-height:0;padding:26px}
}

/* ── the endcap ──────────────────────────────────────────────────────── */
.endcap{text-align:center;padding:72px 0 0;color:#fff}
.endcap h2{font-size:clamp(23pt,3vw,33pt);max-width:18ch;margin:0 auto}
.endcap .lede{max-width:48ch;margin:20px auto 0;color:#fff}
/* No image at the close (Founder, 2026-08-19): two lines, then the act. */
.endcap .uiwrap{display:none}
.endcap .btn{margin-top:30px;background:#fff;color:var(--coral)}
/* A real footer. Founder, 2026-08-19: links, copyright, and Powered by Next
   Intelligence — the one-line signature it had is not a footer. */
/* The footer is contained like every other section (R88). It sits outside
   .sheet in the markup, so it carries the same measure and the same 24px
   gutters itself — otherwise its text runs to the raw viewport edge, which is
   exactly what it was doing. */
footer{color:#fff;font-size:var(--subhead);padding:0 24px 40px}
.foot-in{max-width:1000px;margin:0 auto;padding:38px 0 0;
  border-top:1px solid rgba(255,255,255,.28);
  display:flex;gap:44px;flex-wrap:wrap;align-items:flex-start}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col b{font-size:var(--footnote);letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;opacity:.72;margin-bottom:3px}
.foot-col a{color:#fff;text-decoration:none;font-weight:650;opacity:.94}
.foot-col a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-end{margin-left:auto;text-align:right;max-width:34ch}
.foot-end .powered{font-weight:700;display:block}
.foot-end .copy{font-size:var(--footnote);opacity:.80;margin-top:8px;display:block;font-weight:600}
@media (max-width:900px){.foot-in{gap:26px}.foot-end{margin-left:0;text-align:left}}

/* ── product surfaces: the page shows the product, never only claims it ─ */
.ui{background:#FFFDF9;border-radius:16px;box-shadow:var(--shadow);overflow:hidden;
  font-size:13px;line-height:1.42;color:var(--ink);text-align:left}
.ui-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#EFEADF;
  border-bottom:1px solid rgba(23,26,22,.10)}
.ui-dot{width:9px;height:9px;border-radius:50%;background:#CFC7B6}
.ui-tab{margin-left:10px;font-size:11px;font-weight:600;color:var(--ink-2)}
.ui-body{padding:18px}
.ui-h{font-weight:700;font-size:15px;letter-spacing:-.02em;margin-bottom:3px}
.ui-sub{color:var(--ink-2);font-size:12px;margin-bottom:14px}
.ui-row{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;
  background:#F6F2E9;margin-bottom:7px}
.ui-row.on{background:var(--amber);color:var(--on-amber)}
.ui-n{width:20px;height:20px;border-radius:50%;background:rgba(23,26,22,.13);display:flex;
  align-items:center;justify-content:center;font-size:10px;font-weight:700;flex:0 0 auto}
.ui-t{flex:1;font-weight:600;font-size:12.5px}
.ui-meta,.ui-lock{font-size:11px;color:var(--ink-2)}
.ui-search{display:flex;align-items:center;gap:8px;background:#F1ECE1;border-radius:9px;
  padding:9px 12px;margin-bottom:12px;font-size:12px;color:var(--ink-2)}
.ui-chip{display:inline-block;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:600;
  background:rgba(23,26,22,.07);color:var(--ink-2);margin:0 5px 5px 0}
.ui-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.ui-stat div{background:#F6F2E9;border-radius:9px;padding:9px 10px}
.ui-stat b{display:block;font-size:19px;letter-spacing:-.03em}
.ui-stat span{font-size:10.5px;color:var(--ink-2)}
.ui-ok{display:flex;gap:7px;font-size:11.5px;font-weight:600;color:var(--forest);
  background:rgba(36,74,54,.12);border-radius:8px;padding:9px 11px;margin-top:4px}
.ui-hl{background:var(--amber);border-radius:3px;padding:0 3px}
/* This site's CSP is style-src 'self': an inline style attribute is refused
   outright, so spacing lives in a class or it does not happen at all. */
.ui-chips{margin-top:12px}
.ui p{font-size:12.5px;line-height:1.45;margin-bottom:9px}

@media (max-width:900px){
  .pair,.split{grid-template-columns:1fr;gap:26px}
  .chapter{padding:32px 24px;border-radius:20px}
  .top{padding:44px 0 40px}
  .nav-links a:not(.btn){display:none}
  .actstrip{padding:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── the application form: the signup path, on its own paper chapter ──── */
.top .form-col{background:var(--paper);color:var(--ink);border-radius:var(--radius);
  padding:48px;max-width:660px;margin:0 auto;text-align:left}
.h-apply{font-size:clamp(25pt,3.2vw,34pt);line-height:1.06;letter-spacing:-0.032em}
.top .form-col .lede{color:var(--ink-2);margin-top:16px;
  font-size:var(--callout);line-height:1.45;max-width:none}
.apply-note{font-size:14.5px;color:var(--ink-2);margin-top:14px}
.apply-form{display:grid;gap:16px;margin-top:28px}
.field{display:grid;gap:7px}
.field label{font-size:14px;font-weight:650;letter-spacing:-0.01em}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:16px;line-height:1.4;color:var(--ink);
  background:#fff;border:1.5px solid rgba(23,26,22,.22);border-radius:11px;
  padding:12px 14px;min-height:48px;width:100%}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--coral);outline:none;box-shadow:0 0 0 3px rgba(216,69,27,.18)}
.apply-error{color:#B42318;font-size:14.5px;font-weight:600}
.apply-form .cta-row{margin-top:6px}
.apply-form button.btn{background:var(--coral);color:#fff;width:100%}
.apply-done{background:var(--paper);border-radius:var(--radius);padding:48px;
  max-width:620px;margin:0 auto;color:var(--ink);text-align:left}
.apply-done .lede{color:var(--ink-2)}
@media (max-width:900px){.top .form-col,.apply-done{padding:28px 22px}}

/* ── THE FLOW, stepped ────────────────────────────────────────────────────
   Founder, 2026-08-19: "each screen show up on its own with the text related
   to it and then the other screen in its place... allow the visitor to move
   between them, which will stop the automation and allow the visitor to
   replay or play."

   It used to be three cards side by side on a 9s loop. Three at once is three
   times the text on screen, which is the density he objected to, and a loop
   decides the pace for the reader. Now: ONE stage at a time with only its own
   sentence, and the reader moves. No autoplay, nothing to wait for, and it
   works with JavaScript off — every stage is in the markup and the first one
   is visible, so the worst case is a static card rather than an empty box. */
.flow{display:block;margin:24px 0 4px}
.flow-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.fdot{display:inline-flex;align-items:center;gap:9px;font-family:inherit;cursor:pointer;
  font-size:var(--footnote);font-weight:650;letter-spacing:-.01em;padding:8px 14px 8px 8px;
  border-radius:999px;border:0;background:rgba(42,28,6,.09);color:inherit;
  transition:background .15s ease}
.fdot span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;background:rgba(42,28,6,.14);flex:0 0 auto}
.fdot.on{background:var(--on-amber);color:var(--amber)}
.fdot.on span{background:rgba(246,197,100,.28);color:var(--amber)}
.flow-stage[hidden]{display:none}
.flow-card{background:#FFFDF9;border-radius:14px;padding:18px;box-shadow:var(--shadow);
  color:var(--ink);min-height:132px}
.flow-say{margin-top:14px;font-size:var(--callout);font-weight:650;max-width:52ch}
.flow-controls{display:flex;align-items:center;gap:12px;margin-top:18px}
.fbtn{font-family:inherit;font-size:var(--subhead);font-weight:650;letter-spacing:-.01em;
  min-height:44px;padding:0 22px;border-radius:999px;cursor:pointer;border:0;
  background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px rgba(42,28,6,.30)}
.fbtn-solid{background:var(--coral);color:#fff;box-shadow:none}
.fbtn[disabled]{opacity:.38;cursor:default}
.flow-count{margin-left:auto;font-size:var(--footnote);opacity:.7;font-variant-numeric:tabular-nums}
.flow-count b{font-weight:700}
.chip{display:inline-block;background:var(--amber);color:var(--on-amber);border-radius:999px;
  padding:5px 11px;font-size:var(--footnote);font-weight:650;margin:0 5px 5px 0;
  box-shadow:inset 0 0 0 1.5px rgba(42,28,6,.20)}
.chip.q{background:rgba(23,26,22,.07);color:var(--ink-2);box-shadow:none}
.fs-t{font-size:var(--subhead);line-height:1.45}
.seal{display:flex;align-items:center;gap:7px;background:rgba(36,74,54,.12);color:var(--forest);
  border-radius:8px;padding:8px 10px;font-size:var(--footnote);font-weight:650;margin-top:10px}
.lrow{display:flex;align-items:center;gap:9px;background:#F6F2E9;border-radius:8px;
  padding:9px 11px;margin-bottom:6px;font-size:var(--footnote);font-weight:650;color:var(--ink)}
.lrow.on{background:var(--amber);color:var(--on-amber)}
.lrow span{width:17px;height:17px;border-radius:50%;background:rgba(23,26,22,.14);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.flow-arrow{display:none}
@media (prefers-reduced-motion:reduce){.fdot{transition:none}}

/* ── The scroll strip ─────────────────────────────────────────────────────
   Founder, 2026-08-19: "a scrollable strip of text+symbols so visitors get
   much more without the page drowning in text." Depth without height: eight
   cards in the space of two, and the reader takes as many as they want.
   Scrolls horizontally with the keyboard and with a trackpad; snaps so a card
   never sits half off the edge. */
.strip-wrap{margin-top:34px}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,258px);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 14px;
  scrollbar-width:thin}
.strip-card{background:#FFFDF9;border-radius:16px;padding:20px;scroll-snap-align:start;
  box-shadow:var(--shadow);color:var(--ink);display:flex;flex-direction:column;gap:9px}
.chapter.forest .strip-card,.chapter.amber .strip-card{color:var(--ink)}
.strip-card svg{width:24px;height:24px;flex:0 0 auto;color:var(--coral)}
.strip-card svg path,.strip-card svg circle,.strip-card svg rect,.strip-card svg line,
.strip-card svg polyline{fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.strip-card b{font-size:var(--headline);letter-spacing:-.02em;line-height:1.22}
.strip-card p{font-size:var(--subhead);line-height:1.45;color:var(--ink-2);max-width:none}
.strip-hint{font-size:var(--footnote);opacity:.66;margin-top:2px;font-weight:650}

/* ── The scrolling sequence ───────────────────────────────────────────────
   Founder, 2026-08-19: "scrollable image sequence with a text overlay that
   changes with each image, to explain how things work." The screen is pinned
   while the reader scrolls; each step swaps the picture AND its words together,
   so a screen is never sitting next to the wrong sentence — which is the exact
   fault he caught on how-it-works.
   No JS needed to read it: without the script every step renders in sequence
   down the page, picture and words paired. */
.seq{margin-top:34px}
.seq-stage{position:sticky;top:24px;background:#FFFDF9;border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;color:var(--ink)}
.seq-shot{padding:20px 20px 0}
.seq-cap{padding:18px 22px 22px;border-top:1px solid rgba(23,26,22,.10);margin-top:18px;
  display:flex;gap:13px;align-items:flex-start}
.seq-cap svg{width:22px;height:22px;flex:0 0 auto;color:var(--coral);margin-top:2px}
.seq-cap svg path,.seq-cap svg circle,.seq-cap svg rect,.seq-cap svg polyline{fill:none;
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.seq-cap b{display:block;font-size:var(--headline);letter-spacing:-.02em;margin-bottom:4px}
.seq-cap p{font-size:var(--subhead);line-height:1.45;color:var(--ink-2);max-width:56ch}
.seq-step{min-height:74vh}
.seq-step .seq-body{opacity:0;transition:opacity .3s ease}
.seq-step.on .seq-body{opacity:1}
@media (prefers-reduced-motion:reduce){.seq-step .seq-body{transition:none}}
/* Script off: unpin, and show every step in order rather than one empty box. */
.no-js .seq-pin{position:static}
.no-js .seq-step{min-height:0}
.no-js .seq-step .seq-body{opacity:1}
@media (max-width:900px){
  .seq-pin{position:static}
  .seq-step{min-height:0;margin-bottom:16px}
  .seq-step .seq-body{opacity:1}
  .strip{grid-auto-columns:minmax(206px,80%)}
}

/* ── THE STAGE SEQUENCE, TRANSPLANTED VERBATIM ────────────────────────────
   Founder, twice: "must work exactly like the page link I've given you."
   The first time I adapted it and the second time I adapted it again — smaller
   screens, the caption moved inside the pinned card, different timing, a
   different sticky offset. Each change was defensible on its own and together
   they made a different component.
   This block is now a byte-for-byte copy of the rule set from the retired
   how-it-works page (recovered from commit 3c22384), with nothing edited. The
   only thing that differs is what goes INSIDE the frames, because the content
   is the homepage's. Where the page said .appmock, this says .mock, and the
   .mock rule below reproduces the appmock's edge-to-edge behaviour and height.
   Exactness is the instruction, so the mechanism is not mine to improve. */
/* ── The stage sequence ───────────────────────────────────────────────────
   Founder, 2026-08-19: "each screen show up on its own with the text related
   to it... you kept all the fucking text, how will the visitor understand
   which screen is for which fucking text?!" He is right and I did not do it
   last round — I convinced myself six stacked stages already satisfied it.
   They did not: six screens and six blocks of prose all on screen at once
   means nothing is paired with anything.
   Now the screen is pinned while you scroll, and the picture and its words
   change TOGETHER, so a screen is never beside the wrong sentence. */
.seq{position:relative;margin-top:0}
/* Founder, 2026-08-20, with a screenshot of where it should stop: "as we
   scroll down the screen should stop at this location, with the edge of the
   section and title visible." So the thing that pins is no longer the screen
   alone — the label, the title and the screen pin together as one block, and
   the section's top edge stays in view above them. The mechanism underneath
   is untouched: one index still drives the screen and its caption. */
.seq-pin{position:sticky;top:28px;z-index:1}
.seq-head{margin-bottom:18px}
.seq-head h2{margin-bottom:0}
.seq-stage{position:static;background:#FFFDF9;border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;color:var(--ink)}
.seq-shot{padding:0}
.seq-shot[hidden]{display:none}
/* Founder: "Graphics fill the width." The app screen is the content here, so
   it goes edge to edge inside its card instead of sitting in a margin. */
.seq-shot .appmock{margin:0;border-radius:0;box-shadow:none}
.seq-rail{display:flex;gap:6px;flex-wrap:wrap;padding:14px 16px;
  border-top:1px solid rgba(23,26,22,.10);background:#F6F2E9}
.seq-dot{display:inline-flex;align-items:center;gap:8px;font-family:inherit;cursor:pointer;
  font-size:var(--footnote);font-weight:650;padding:7px 13px 7px 7px;border-radius:999px;
  border:0;background:transparent;color:var(--ink-2)}
.seq-dot span{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;background:rgba(23,26,22,.10);flex:0 0 auto}
.seq-dot.on{background:var(--ink);color:var(--paper)}
.seq-dot.on span{background:var(--coral);color:#fff}
/* The caption travels WITH the screen. Named change, Founder 2026-08-20.
   His instruction was that the pinned block stops lower, with the section's
   label and title still visible. That made the block taller and left the
   caption — which used to scroll through the space beneath it — with nowhere
   to be: at two of the four stages the screen showed with no words at all,
   and at the end of the section the last caption was clipped in half behind
   the card as the pin released. Three separate attempts to tune the spacing
   each failed at a different scroll position, because the real fault is that
   a shrinking band cannot reliably hold a scrolling element.
   So the words now sit directly under the screen inside the same pinned
   block, driven by the same single index. This is NOT the caption moved
   inside the screen card, which he rejected on 2026-08-19 — it is its own
   card beneath it, and the screen is still never beside the wrong sentence.
   The .seq-step blocks remain as the scroll length that drives the index. */
.seq-step{min-height:34vh}
.seq-caps{margin-top:14px}
.seq-cap[hidden]{display:none}
.seq-step.on .seq-body{opacity:1}
.seq-cap{display:flex;gap:14px;align-items:flex-start;background:var(--paper);
  border-radius:16px;padding:22px 24px;box-shadow:var(--shadow)}
.chapter.amber .seq-cap{background:#FFFDF9}
.seq-cap > svg{width:24px;height:24px;flex:0 0 auto;color:var(--coral);margin-top:3px}
.seq-cap > svg path,.seq-cap > svg circle,.seq-cap > svg polyline{fill:none;
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.seq-cap b{display:block;font-size:var(--title3);letter-spacing:-.025em;margin-bottom:8px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seq-cap p{font-size:var(--subhead);line-height:1.5;color:var(--ink);margin:0;max-width:60ch}
.seq-cap .honest{margin-top:12px}
@media (prefers-reduced-motion:reduce){.seq-body{transition:none}}
/* No script: unpin, show every screen and every caption in order. */
.no-js .seq-pin{position:static}
.no-js .seq-shot[hidden]{display:block}
.no-js .seq-cap[hidden]{display:block}
.no-js .seq-caps{display:grid;gap:12px}
.no-js .seq-step{min-height:0;margin-bottom:14px}
.no-js .seq-body{opacity:1}
.no-js .seq-rail{display:none}
@media (max-width:900px){
  /* No pinning on a phone: every screen and its own words render in order
     down the page. The screens and the captions live in two containers now,
     so left alone they would stack as four screens and then four paragraphs,
     with nothing beside anything. display:contents dissolves both containers
     into the same column and `order` interleaves them back into pairs, which
     is the whole point of the component. The card styling moves onto the
     shots, since their wrapper no longer draws a box. */
  .seq-pin{position:static;display:flex;flex-direction:column;gap:14px}
  .seq-stage,.seq-caps{display:contents}
  .seq-head{order:0}
  .seq-shot[hidden],.seq-cap[hidden]{display:block}
  .seq-shot{background:#FFFDF9;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
  .seq-shot[data-shot="0"]{order:1} .seq-cap[data-cap="0"]{order:2}
  .seq-shot[data-shot="1"]{order:3} .seq-cap[data-cap="1"]{order:4}
  .seq-shot[data-shot="2"]{order:5} .seq-cap[data-cap="2"]{order:6}
  .seq-shot[data-shot="3"]{order:7} .seq-cap[data-cap="3"]{order:8}
  .seq-step{display:none}
  .seq-body{opacity:1}
  .seq-rail{display:none}
  /* Uniform on a narrow column: the mark sits above the words in every
     caption rather than beside it in some and above it in others. */
  .seq-cap{flex-direction:column;gap:10px}
}



/* the drawn scan-marks in the recognition section: a soft highlight under one
   phrase per item, so the four points can be taken at a glance */
.mk{background:linear-gradient(transparent 62%,rgba(246,197,100,.85) 62%);
  padding:0 2px;border-radius:2px}
.chapter.amber .mk{background:linear-gradient(transparent 62%,rgba(255,255,255,.62) 62%)}

/* the payoff at the end of the build */
.seq-payoff{margin-top:34px}
.seq-line{font-size:var(--title3);line-height:1.35;letter-spacing:-.02em;font-weight:650;
  max-width:40ch}
.seq-acts{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:22px}

/* ── the platform deck: one at a time, with arrows ─────────────────────── */
.deck{margin-top:34px}
/* Equal frame heights so the eye does not jump when a shorter platform comes
   round — the Founder called the jump bad design and he is right: a control
   that moves the thing you are reading is a control you stop trusting. Every
   slide occupies the same box; the shortest one simply has room to spare. */
.deck-view{position:relative;display:grid}
.deck-slide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;
  align-items:center;grid-area:1/1;min-height:296px}
.deck-slide[hidden]{visibility:hidden;pointer-events:none}
.deck-pic{background:#FFFDF9;border-radius:16px;box-shadow:var(--shadow);overflow:hidden;
  color:var(--ink)}
.dp-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#EFEADF;
  border-bottom:1px solid rgba(23,26,22,.10)}
.dp-bar span{width:9px;height:9px;border-radius:50%;background:#CFC7B6}
.dp-bar b{margin-left:8px;font-size:var(--footnote);color:var(--ink-2)}
.dp-body{padding:16px}
.dp-row{display:flex;align-items:center;gap:10px;font-size:var(--footnote);font-weight:650;
  padding:10px 11px;background:#F6F2E9;border-radius:9px;margin-bottom:7px}
.dp-i{flex:0 0 auto;opacity:.65}
.dp-m{margin-left:auto;color:var(--ink-2);font-weight:600}
.dp-join{margin-top:12px;padding:11px 12px;border-radius:9px;background:rgba(36,74,54,.12);
  color:var(--forest);font-size:var(--footnote);font-weight:650}
.deck-say b{display:block;font-size:var(--title3);letter-spacing:-.025em;margin-bottom:9px}
.deck-say p{font-size:var(--subhead);line-height:1.5;max-width:44ch}
/* Arrows next to each other, not one at each end. The section already has a
   heading saying what it is, so the named pips were saying it twice. */
.deck-ctl{display:flex;align-items:center;gap:10px;margin-top:24px;flex-wrap:wrap}
.deck-where{font-size:var(--footnote);font-weight:650;opacity:.7;margin-left:6px;
  font-variant-numeric:tabular-nums}
.deck-arrow{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;font-family:inherit;
  font-size:17px;background:var(--coral);color:#fff;flex:0 0 auto;line-height:1}
.deck-arrow[disabled]{opacity:.34;cursor:default}
/* ── the product, shown, with labels pointing at it ────────────────────── */
.callout-wrap{margin-top:32px}
.callout-stage{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:38px;align-items:center;padding:26px 30px}
.shot{background:#FFFDF9;border-radius:18px;box-shadow:0 26px 60px rgba(23,26,22,.24);
  overflow:hidden;color:var(--ink);width:min(620px,100%);margin:0 auto}
.shot-bar{display:flex;align-items:center;gap:7px;padding:12px 15px;background:#EFEADF;
  border-bottom:1px solid rgba(23,26,22,.10)}
.shot-bar span{width:9px;height:9px;border-radius:50%;background:#CFC7B6}
.shot-bar b{margin-left:9px;font-size:var(--footnote);color:var(--ink-2)}
.shot-body{padding:20px}
.shot-h{font-weight:700;font-size:var(--headline);letter-spacing:-.02em}
.shot-sub{color:var(--ink-2);font-size:var(--footnote);margin-bottom:14px}
.shot-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;
  background:#F6F2E9;margin-bottom:7px;font-size:var(--footnote);font-weight:650}
.shot-row.on{background:var(--amber);color:var(--on-amber)}
.shot-n{width:20px;height:20px;border-radius:50%;background:rgba(23,26,22,.13);flex:0 0 auto;
  display:grid;place-items:center;font-size:10px;font-weight:700}
.shot-row.on .shot-n{background:rgba(42,28,6,.22)}
.shot-m{margin-left:auto;color:var(--ink-2);font-weight:600}
.shot-row.on .shot-m{color:rgba(42,28,6,.70)}
.shot-foot{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.shot-pill{font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;
  background:rgba(36,74,54,.13);color:var(--forest)}
.shot-pill.q{background:rgba(23,26,22,.07);color:var(--ink-2)}
/* The labels sit either side of the screen in their own columns rather than
   absolutely positioned over it — absolute positioning clipped them the moment
   the text wrapped. The screen still breaks out past the reading column, which
   is the one place the Founder asked for the container to be broken. */
.cal-col{display:flex;flex-direction:column;justify-content:space-around;gap:42px;min-width:0;
  padding:26px 0}
.cal{display:flex;align-items:center;gap:12px;font-size:var(--subhead);font-weight:700;
  line-height:1.35;color:var(--on-amber)}
.cal span{max-width:21ch}
.cal i{flex:1 0 30px;height:10px;opacity:.62;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M1 6.2C9 3.4 20 7.4 39 4.2' fill='none' stroke='%232A1C06' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
.cal-col.left .cal{text-align:right;justify-content:flex-end}

/* the vertical grid that replaced the sideways strip (no sideways scrolling
   inside a vertical page — Founder, 2026-08-19) */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px;margin-top:40px}
.grid3 h3{margin-bottom:7px}
.grid3 p{font-size:var(--subhead);line-height:1.5}

@media (max-width:900px){
  .deck-slide{grid-template-columns:1fr;gap:18px}
  .cap-grid{grid-template-columns:1fr;gap:12px}
  .callout-stage{grid-template-columns:1fr;gap:14px}
  .cal-col{flex-direction:column;gap:10px}
  .cal-col.left{order:2}
  .cal-col.right{order:3}
  .cal,.cal-col.left .cal{text-align:left;justify-content:flex-start}
  .cal i{display:none}
  .cal span{max-width:none}
  .cal:before{content:"\2192";margin-right:4px;opacity:.6}
}
@media (min-width:1180px){
  /* the screen breaks out of the reading column, and the labels fill the space
     it gains — but the stage keeps 30px of its own padding so no label ever
     touches an edge (R88, and his repeated complaint). */
  .callout-wrap{width:calc(100% + 84px);margin-left:-42px}
}

/* the product surfaces inside the sequence */
/* All four screens share a height so the pinned stage never changes size and
   never sits mostly empty — the fault that broke this section twice. */
/* matches .seq-shot .appmock on the reference page: edge to edge, no radius,
   no shadow of its own, and the same ~370px presence so the pinned card is
   never mostly empty */
.mock{background:#FFFDF9;overflow:hidden;color:var(--ink);margin:0;border-radius:0;
  box-shadow:none;min-height:370px;display:flex;flex-direction:column}
.mock-body{flex:1;padding:22px}
.mock-bar{display:flex;align-items:center;gap:7px;padding:12px 15px;background:#EFEADF;
  border-bottom:1px solid rgba(23,26,22,.10)}
.mock-bar span{width:9px;height:9px;border-radius:50%;background:#CFC7B6}
.mock-bar b{margin-left:9px;font-size:var(--footnote);color:var(--ink-2)}
.mock-body{padding:20px}
.mock-chips{display:flex;flex-wrap:wrap;gap:7px}
.mock-chip{background:var(--amber);color:var(--on-amber);border-radius:999px;padding:6px 12px;
  font-size:var(--footnote);font-weight:650;box-shadow:inset 0 0 0 1.5px rgba(42,28,6,.20)}
.mock-chip.q{background:rgba(23,26,22,.07);color:var(--ink-2);box-shadow:none}
.mock-row{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;
  background:#F6F2E9;margin-bottom:7px;font-size:var(--footnote);font-weight:650}
.mock-row.on{background:var(--amber);color:var(--on-amber)}
.mock-n{width:21px;height:21px;border-radius:50%;background:rgba(23,26,22,.13);flex:0 0 auto;
  display:grid;place-items:center;font-size:10.5px;font-weight:700}
.mock-row.on .mock-n{background:rgba(42,28,6,.22)}
.mock-m{margin-left:auto;color:var(--ink-2);font-weight:600}
.mock-row.on .mock-m{color:rgba(42,28,6,.70)}
.mock-note{margin-top:12px;font-size:var(--footnote);color:var(--ink-2);font-weight:600}
.mock-live{margin-top:12px;padding:11px 13px;border-radius:9px;background:rgba(36,74,54,.13);
  color:var(--forest);font-size:var(--footnote);font-weight:700}
.mock-bar-fill{height:7px;border-radius:4px;background:rgba(23,26,22,.10);overflow:hidden;
  margin-top:11px}
.mock-bar-fill i{display:block;height:100%;width:100%;background:var(--forest);border-radius:4px}
.seq-line{font-size:var(--title3);line-height:1.35;letter-spacing:-.02em;font-weight:650;max-width:40ch}
.seq-acts{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:20px}
.shot-extra{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.shot-mini{background:#F1ECE1;border-radius:9px;padding:10px 12px}
.shot-mini b{display:block;font-size:var(--footnote);letter-spacing:-.01em}
.shot-mini span{font-size:11px;color:var(--ink-2);line-height:1.35;display:block;margin-top:2px}

/* ── PRICING ──────────────────────────────────────────────────────────────
   Founder, 2026-08-19: a pricing section on the homepage, before the dark one,
   and "very different than what's on /how-it-works" — that page listed three
   boxes of specs. This shows the ONE thing a person actually weighs: how much of
   their own money they keep. The meter is the argument; the words
   are the detail underneath it. */
.price-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:38px}
.price-card{background:#FFFDF9;border-radius:16px;padding:22px;display:flex;
  flex-direction:column;gap:12px;box-shadow:0 10px 26px rgba(23,26,22,.08)}
.price-card.on{background:var(--forest);color:var(--on-forest);
  box-shadow:0 18px 40px rgba(23,26,22,.20)}
.price-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-top b{font-size:var(--headline);letter-spacing:-.02em}
.price-fig{margin-left:auto;font-size:var(--title2);font-weight:700;letter-spacing:-.035em}
.price-fig em{font-style:normal;font-size:var(--footnote);font-weight:650;opacity:.62}
.price-line{font-size:var(--subhead);line-height:1.45;color:var(--ink-2);margin:0}
.price-card.on .price-line{color:var(--on-forest-2)}
.price-meter{height:9px;border-radius:5px;background:rgba(23,26,22,.10);overflow:hidden;
  margin-top:auto}
.price-card.on .price-meter{background:rgba(251,247,239,.20)}
.price-meter i{display:block;height:100%;border-radius:5px;background:var(--amber)}
/* The meter shows what you KEEP, not what you pay. Drawn the other way round
   it grew as the fee fell, which read as the opposite of the argument. */
.price-meter .f88{width:88%}.price-meter .f94{width:94%}.price-meter .f97{width:97%}
.price-foot{font-size:var(--footnote);font-weight:700;letter-spacing:.02em}
.price-note{font-size:var(--subhead);color:var(--ink-2);margin-top:22px}

/* ── THE DARK SECTION, redesigned ─────────────────────────────────────────
   His verdict on what was here: "it's just text and color and I'm not seeing
   how it highlights the value." So the value is now a NUMBER you can see at a
   glance, sitting in a mosaic rather than six identical boxes: the eye lands
   on 41, then 67, then 3, and the argument is made before a sentence is read.
   The drawn amber mark carries the one phrase that has to land. */
.cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px}
.cap{background:rgba(251,247,239,.09);border-radius:16px;padding:22px;
  box-shadow:inset 0 0 0 1px rgba(251,247,239,.18)}
.cap.big{grid-column:span 1;grid-row:span 2;background:rgba(251,247,239,.14);
  display:flex;flex-direction:column;justify-content:center}
.cap.wide{grid-column:span 2}
.cap-fig{display:block;font-size:clamp(38pt,5.6vw,62pt);line-height:.92;font-weight:700;
  letter-spacing:-.045em;color:var(--amber);margin-bottom:12px}
.cap b{display:block;font-size:var(--headline);letter-spacing:-.02em;line-height:1.25;
  margin-bottom:7px}
.cap p{font-size:var(--subhead);line-height:1.48;color:var(--on-forest-2)}
.mkw{background:linear-gradient(transparent 60%,rgba(246,197,100,.9) 60%);
  padding:0 3px;border-radius:2px;color:var(--on-amber)}

/* 6 · the closing line, on one line */
/* his order: "Your intelligence is timeless." sits on ONE line */
.endline{max-width:none}

@media (max-width:900px){
  .price-rail{grid-template-columns:1fr}
  .cap.big,.cap.wide{grid-column:span 1;grid-row:auto}
  .endline{max-width:16ch}
}

/* ═══ LANDING REWRITE, Founder feedback 2026-08-22 ═══════════════════════════
   His read of the page top to bottom. Copy changes live in index.html; these
   are the structures that copy needed and the one real bug he spotted. */

/* THE CENTRING BUG HE CAUGHT: "why is your intelligence is timeless leaning
   towards the right and starting at a completely wrong place". A note dated
   2026-08-20 set `.endline{max-width:none}` to fix exactly this and it never
   applied: `.endcap h2` (0-1-1) beats `.endline` (0-1-0), so the box stayed at
   18ch / 462px while the two lines are `white-space:nowrap` and run to about
   1090px. The text overflowed its own centred box, which is why it read as
   off-axis rather than merely wide. Specificity, not the value, was wrong. */
.endcap h2.endline{max-width:none}

/* the nav gets a second act: sign in beside start free (his change) */
.nav-signin{font-weight:600}
.btn.btn-amber{background:var(--amber);color:var(--on-amber);border-color:var(--amber)}
.btn.btn-amber:hover{filter:brightness(1.04)}

/* the closing line of the problem section, which now asks three questions
   and then names what they add up to */
.prob-close{max-width:62ch;margin:34px 0 0;font-size:clamp(13.5pt,1.5vw,16pt);
  line-height:1.5;font-weight:500}

/* "There is a better way" — four elements, and the six features below it.
   Both are plain two-column reading grids: the bento this replaces was
   doing shape instead of saying anything. */
.quad,.feat{display:grid;gap:26px 40px;margin-top:38px}
.quad{grid-template-columns:repeat(2,minmax(0,1fr))}
.feat{grid-template-columns:repeat(3,minmax(0,1fr))}
.qd b,.ft b{display:block;font-size:clamp(13pt,1.5vw,16pt);letter-spacing:-.02em;
  margin-bottom:9px}
.qd p,.ft p{margin:0;max-width:52ch;line-height:1.55;color:inherit;opacity:.88}
.feat .ft b{font-size:clamp(12.5pt,1.3vw,14.5pt)}
@media (max-width:900px){
  .quad,.feat{grid-template-columns:1fr;gap:24px}
}

/* The problem section carries THREE questions, and `.pair` is a two-column
   grid, so the third dropped to a second row and left a hole beside it. Three
   columns at desktop, and the lede stays wide enough that "minutes." does not
   orphan onto a line of its own. */
.chapter .pair:has(> div:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
@media (max-width:980px){
  .chapter .pair:has(> div:nth-child(3)){grid-template-columns:1fr;gap:26px}
}
.top .lede{max-width:44ch}

/* HOW IT WORKS, screen 1. His note: the material screen was a LIST of titles,
   so a reader has to stop and read four made-up episode names to learn one
   thing. "It shows the different file types" — so it shows the kinds of file
   a person actually has, as stacks, with how many of each. A stack reads as
   "lots of these" without anyone reading a word. */
.ftypes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:4px}
.ftype{background:var(--paper);border-radius:12px;padding:14px 12px;display:grid;
  justify-items:center;text-align:center;gap:8px}
.ftype b{font-size:13.5px;letter-spacing:-.01em;line-height:1.25}
.ftype .fcount{font-size:12px;color:var(--ink-2)}
.fstack{position:relative;display:block;width:40px;height:32px}
.fstack i{position:absolute;inset:0;border-radius:4px;
  border:1.5px solid rgba(23,26,22,.28);background:#fff}
.fstack i:nth-child(1){transform:translate(-5px,-3px) rotate(-7deg);opacity:.45}
.fstack i:nth-child(2){transform:translate(2px,-1px) rotate(4deg);opacity:.7}
.fstack i:nth-child(3){border-color:var(--coral)}
/* the top sheet carries the mark that says what kind of file this is */
.fstack.fplay i:nth-child(3):after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-35%,-50%);border-left:10px solid var(--coral);
  border-top:6.5px solid transparent;border-bottom:6.5px solid transparent}
.fstack.fdoc i:nth-child(3):after,.fstack.ftxt i:nth-child(3):after{content:"";
  position:absolute;left:7px;right:7px;top:8px;height:2px;background:var(--coral);
  box-shadow:0 5px 0 var(--coral),0 10px 0 var(--coral)}
.fstack.ftxt i:nth-child(3):after{right:15px}
@media (max-width:560px){ .ftypes{grid-template-columns:1fr} }

/* Step 3 shows the wrap being assembled around the lessons, which his read
   asked for by name: foundations, glossary, exercises. */
.wrapmini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.wmi{background:var(--paper);border-radius:9px;padding:9px 10px;display:grid;gap:2px}
.wmi b{font-size:12.5px;letter-spacing:-.01em}
.wmi span{font-size:11px;color:var(--ink-2)}