/* ════════════════════════════════════════════════════════════════════
   thesis.trade — marketing site
   Built 2026-08-05 from design_handoff_marketing_site/design/site-v3.css.

   TOKENS ARE NOT REDEFINED HERE. This file consumes the app's own
   dashboard/static/css/system/tokens.css — the handoff ships an identical
   copy (77 shared names, zero new, verified 2026-08-05), and shipping a
   second token file would be two sources of truth for colour, which is
   §36.19's defect class.

   Additions beyond the prototype, required by the README:
     · [hidden] guards on every toggled element (a class selector outranks
       the UA [hidden] rule — this exact bug shipped on the confirm sheet)
     · :focus-visible rings on every interactive element
     · a real mobile menu (the prototype just hides the links under 1000px)
     · reduced-motion end state for the hero
   ════════════════════════════════════════════════════════════════════ */
/* thesis.trade marketing site — shared styles (v3) */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink-1);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--accent-on-light);text-decoration:none}
a:hover{color:var(--blue-500)}
.wrap{max-width:1140px;margin:0 auto;padding:0 40px}
.kick{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mark{font-size:19px;font-weight:700;letter-spacing:-0.025em;color:var(--ink-1)}
.mark .dot{color:var(--brand-dot)}
.demo-flag{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border:1px dashed var(--border-2);border-radius:4px;padding:2px 6px}

/* ── nav ─────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-in{max-width:1140px;margin:0 auto;padding:0 40px;height:64px;display:flex;align-items:center;gap:36px}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink-2)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink-1)}
.nav-cta{display:flex;align-items:center;gap:16px;margin-left:auto}
.login-link{font-size:14px;font-weight:600;color:var(--ink-1)}
.login-link:hover{color:var(--blue-600)}

/* ── buttons ─────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;gap:8px;height:40px;padding:0 20px;border-radius:var(--r-pill);font-size:14px;font-weight:600;letter-spacing:-0.005em;border:1px solid transparent;cursor:pointer;transition:all .16s ease;font-family:inherit}
.btn-dark{background:var(--ink-1);color:#fff}
.btn-dark:hover{background:var(--blue-700);color:#fff}
.btn-ghost{background:transparent;color:var(--ink-1);border-color:var(--border-2)}
.btn-ghost:hover{border-color:var(--ink-1);color:var(--ink-1)}
.btn-lg{height:48px;padding:0 26px;font-size:15px}

/* ── page furniture ──────────────────── */
section{padding:64px 0;border-bottom:1px solid var(--border)}
.sec-head{max-width:62ch}
.sec-head h2{font-size:38px;line-height:1.14;letter-spacing:-0.028em;font-weight:700;margin:14px 0 0}
.sec-head p{font-size:17px;line-height:1.6;color:var(--ink-2);margin:16px 0 0}
.page-head{padding:64px 0 52px;border-bottom:1px solid var(--border)}
.page-head h1{font-size:52px;line-height:1.06;letter-spacing:-0.034em;font-weight:700;margin:18px 0 0;max-width:22ch}
.page-head p{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:54ch;margin:22px 0 0}
.u{position:relative;white-space:nowrap}
.u::after{content:'';position:absolute;left:0;right:0;bottom:.055em;height:5px;background:var(--blue-300);border-radius:3px}

/* ── beta pill ───────────────────────── */
.beta{display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 14px 0 12px;border-radius:var(--r-pill);background:var(--blue-50);border:1px solid var(--blue-100);color:var(--blue-700);font-size:12.5px;font-weight:600}
.beta .d{width:6px;height:6px;border-radius:50%;background:var(--brand-dot)}

/* ── navy band ───────────────────────── */
.band{background:var(--blue-700);color:#fff;border:0}
.band .kick{color:var(--blue-300)}
.band h2,.band h1{color:#fff}
.band p{color:#c3cbe6}
.band .accent{color:var(--accent-on-navy)}
.band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:36px;border-radius:var(--r-card);overflow:hidden}
.band-grid.four{grid-template-columns:repeat(4,1fr)}
.band-cell{background:rgba(255,255,255,.055);padding:28px 26px}
.band-cell h4{margin:0;font-size:16px;font-weight:600;letter-spacing:-0.01em;color:#fff}
.band-cell p{margin:9px 0 0;font-size:14px;line-height:1.6;color:#a9b3d1}

/* ── steps ───────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:38px}
.step{border-top:2px solid var(--ink-1);padding-top:20px}
.step .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3)}
.step h3{font-size:20px;letter-spacing:-0.018em;margin:12px 0 0;font-weight:600}
.step p{font-size:14.5px;line-height:1.62;color:var(--ink-2);margin:10px 0 0}

/* ── feature rows ────────────────────── */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:38px}
.feat.flip .feat-copy{order:2}
.feat h3{font-size:27px;letter-spacing:-0.024em;margin:14px 0 0;font-weight:700}
.feat p{font-size:16px;line-height:1.62;color:var(--ink-2);margin:14px 0 0}
.feat ul{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.feat li{font-size:14.5px;color:var(--ink-2);padding-left:20px;position:relative;line-height:1.55}
.feat li::before{content:'';position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;background:var(--blue-300)}

/* ── real-mock crop frame ────────────── */
.crop{position:relative;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-elevated)}
.crop-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);position:relative;z-index:2}
.crop-view{position:relative;overflow:hidden;background:var(--surface)}
.crop-view iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;pointer-events:none}
.crop-fade{position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none}
.crop-cap{font-size:13px;color:var(--ink-3);margin-top:12px;line-height:1.5}

/* ── library rows ────────────────────── */
.lib-row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px 0;border-bottom:1px solid var(--border);align-items:baseline}
.lib-row:last-child{border-bottom:0}
.lib-claim{font-size:14.5px;font-weight:600;letter-spacing:-0.012em;line-height:1.4}
.lib-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-top:6px;display:flex;gap:10px}
.lib-move{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:500;font-size:15px;white-space:nowrap}
.shot{border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-card);overflow:hidden}
.shot-top{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.shot-body{padding:18px}

/* ── refuse grid ─────────────────────── */
.refuse{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;margin-top:32px}
.refuse-item{padding:22px 0;border-top:1px solid var(--border)}
.refuse-item h4{margin:0;font-size:16px;font-weight:600;letter-spacing:-0.012em}
.refuse-item p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* ── prose (about) ───────────────────── */
.prose{max-width:66ch}
.prose p{font-size:17px;line-height:1.7;color:var(--ink-2);margin:20px 0 0}
.prose p.first{font-size:19px;color:var(--ink-1)}
.prose h3{font-size:22px;letter-spacing:-0.02em;margin:44px 0 0;font-weight:700;color:var(--ink-1)}
.prose strong{color:var(--ink-1);font-weight:600}

/* ── pricing ─────────────────────────── */
.toggle{display:inline-flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px;margin-top:36px}
.toggle button{appearance:none;border:0;background:transparent;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);height:32px;padding:0 18px;border-radius:var(--r-pill);cursor:pointer;transition:all .16s ease;display:inline-flex;align-items:center;gap:8px}
.toggle button[aria-pressed="true"]{background:var(--surface);color:var(--ink-1);box-shadow:var(--shadow-card)}
.toggle .save{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--pos-600);background:var(--pos-50);border-radius:4px;padding:2px 5px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.plan{border:1px solid var(--border);border-radius:var(--r-card);padding:28px 26px 30px;display:flex;flex-direction:column;position:relative}
.plan.mid{border-color:var(--ink-1);box-shadow:var(--shadow-card)}
.plan .tag{position:absolute;top:-9px;left:26px;background:var(--ink-1);color:#fff;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:4px}
.plan h3{font-size:18px;font-weight:600;letter-spacing:-0.015em;margin:0}
.plan .who{font-size:13.5px;color:var(--ink-3);margin:6px 0 0;min-height:2.6em;line-height:1.4}
.plan .price{margin:20px 0 0;display:flex;align-items:baseline;gap:6px}
.plan .price .cur{font-family:var(--font-num);font-size:20px;color:var(--ink-3);font-weight:500}
.plan .price .amt{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:42px;font-weight:500;letter-spacing:-0.028em;line-height:1}
.plan .price .per{font-size:13px;color:var(--ink-3)}
.plan .billed{font-size:12.5px;color:var(--ink-3);margin-top:8px;min-height:1.4em}
/* ALIGNING THE LOCK RULE ACROSS THE THREE CARDS. Operator: the grey line
   at the bottom of each tier was 'jumping all over the place'.

   It floated because the feature list is the only variable-height block
   above it and nothing absorbed the difference — `margin-top:auto` on the
   BUTTON took up the slack at the very bottom, which aligned the buttons
   and left everything between them free to drift.

   So the list absorbs it instead: flex:1 makes the ul stretch to fill,
   which lands the rule on the same line in all three. The lock text then
   gets a min-height sized to its tallest instance (three lines), so the
   buttons stay aligned too rather than trading one problem for the other.
   Both only matter above 1000px; below that the grid is one column. */
.plan ul{margin:20px 0 24px;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;flex:1 1 auto}
/* Bullet rule: the dash sat at .46em, which is above the optical centre of
   a 1.55 line, and 19px out — so it read as detached from its line rather
   than attached to it, and the drift showed most on the wrapped bullets.
   Nudged onto the x-height and pulled in. QA 2026-08-05. */
.plan li{font-size:14px;color:var(--ink-2);line-height:1.55;padding-left:16px;position:relative}
.plan li::before{content:'';position:absolute;left:0;top:.68em;width:8px;height:2px;background:var(--ink-4);border-radius:1px}
.plan .btn{margin-top:auto;width:100%}
.ptable{margin-top:48px;width:100%;border-collapse:collapse}
.ptable th,.ptable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--border);font-size:14px}
.ptable thead th{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.ptable tbody th{font-weight:500;color:var(--ink-2)}
.ptable td{text-align:center;color:var(--ink-2);width:150px}
.ptable td.yes{color:var(--pos-600);font-weight:600}
.ptable td.no{color:var(--ink-4)}

/* ── faq ─────────────────────────────── */
/* QA 2026-08-05: was max-width:76ch = 832px, directly under a 1060px
   comparison table, so the rules and the +/- markers stopped 228px short
   of everything else in the section and read as misaligned. The markers
   were never off — the whole block was narrower than the page. Rows now
   match the container; `details p{max-width:68ch}` still keeps the ANSWER
   at a readable measure, which is the part that needed constraining. */
.faq{margin-top:30px}
details{border-top:1px solid var(--border);padding:17px 0}
details:last-of-type{border-bottom:1px solid var(--border)}
summary{cursor:pointer;font-size:16.5px;font-weight:600;letter-spacing:-0.014em;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font-family:var(--font-mono);color:var(--ink-3);font-weight:400;font-size:17px}
details[open] summary::after{content:'–'}
details p{font-size:15px;line-height:1.65;color:var(--ink-2);margin:13px 0 0;max-width:68ch}

/* ── close + footer ──────────────────── */
.close{padding:76px 0;text-align:center;border-bottom:1px solid var(--border)}
.close h2{font-size:44px;letter-spacing:-0.032em;line-height:1.1;font-weight:700;margin:0 auto;max-width:22ch}
.close p{font-size:17px;color:var(--ink-2);margin:20px auto 0;max-width:48ch;line-height:1.6}
.cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.close .cta-row{justify-content:center;margin-top:32px}
.fine{font-size:13px;color:var(--ink-3)}
footer{padding:44px 0 52px;background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot-col h5{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.foot-col a{display:block;font-size:14px;color:var(--ink-2);margin-bottom:10px}
.foot-col a:hover{color:var(--ink-1)}
.legal{margin-top:44px;padding-top:26px;border-top:1px solid var(--border-2);font-size:12.5px;line-height:1.65;color:var(--ink-3);max-width:88ch}
.legal b{color:var(--ink-2);font-weight:600}
.pending{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border:1px dashed var(--border-2);border-radius:5px;padding:6px 10px}

@media (max-width:1000px){
  .feat,.hero-grid{grid-template-columns:1fr;gap:44px}
  .feat.flip .feat-copy{order:0}
  .steps,.band-grid,.band-grid.four,.plans,.refuse{grid-template-columns:1fr}
  .band-grid{gap:1px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .page-head h1{font-size:38px}
  .nav-links{display:none}
  .wrap,.nav-in{padding:0 24px}
  .ptable{display:none}
}

/* ══ THE NAV BAR AT A PHONE WIDTH ═══════════════════════════════════
   A rendered inspection at 390px found the navigation partly off-screen.
   The cause, measured from source: `.nav-in` is one nowrap flex row of
   unshrinkable content —

     24px padding + wordmark + 36px gap + [Log in + 16px + a
     `white-space:nowrap` "Join the waitlist" button] + 36px gap +
     burger + 24px padding

   — which is ~450-470px of content in a 390px viewport, and flex children
   default to `min-width:auto`, so the row simply runs past the right edge.
   `html,body{overflow-x:hidden}` further down then CLIPS the overflow
   instead of scrolling it, and the burger is the LAST item in the row: the
   only control that reaches the nav links on a phone was rendered outside
   the viewport and could not be tapped. It is worth naming that the
   overflow rule did not cause this — it converted a visible symptom
   (sideways scroll) into an invisible one (a missing control).

   THE FIX IS THE CONTENT, NOT A SCROLL RULE. `Log in` already exists
   inside `.mobile-menu` below, so it comes out of the bar. Above 600px the
   full cluster is kept, so tablets and desktop are untouched.

   FIRST ATTEMPT, 2026-08-25 — WRONG, AND WORTH KEEPING ON THE RECORD.
   It bought the burger's 36px by shrinking the primary CTA from 40px to
   36px (`height:36px;padding:0 14px;font-size:13px`). That measured as a
   pass — burger inside the viewport at 375/390/412, zero page overflow —
   and it was still a defect: it paid for one required control by taking a
   second one below the 44px touch minimum. A row where everything fits
   because one of the controls is too small to hit is not a fixed row. The
   measurement said "inside the viewport"; nobody had asked "and still
   tappable?". That is §36.20's shape — the working state and the broken
   state were identical in the thing being measured.

   The trade was never necessary, and the reason it looked necessary is that
   the budget was never actually computed. Estimates ("~450-470px of
   content") drove the first fix. The real numbers, measured against live
   markup at 375px rather than estimated:

     usable row = 375 − (16px padding × 2) ................ 343px
     wordmark "thesis.trade", natural, unclipped ..........  107
     gap ..................................................   12
     "Join the waitlist" at the BASE .btn padding (0 20px)   147
     gap ..................................................   12
     Menu, grown to a 44 × 44 box .........................   44
                                                            ----
     content total ........................................  322
     spare ................................................   21px

   So nothing has to be traded at 375px: the CTA goes 40 → 44 (UP, and at
   its full width — no padding or font-size cut), the burger goes 36 × 38 →
   44 × 44, the wordmark keeps its natural width, and 21px is left over.
   The alternatives that were on the table — a tighter gap, an icon-only CTA
   below some width, further wordmark truncation — are all unnecessary at
   this width and none of them is taken.

   Below ~354px (322px of content + 32px of padding) the row does run out,
   and that is what the last two rules are for. They are the guarantee, and
   they matter more than the arithmetic above: the wordmark is the ONLY
   shrinkable item in the row while the CTA and the burger are pinned
   `flex:0 0 auto`. At 320px the wordmark truncates to ~73px ("thesis.tr…")
   and BOTH controls stay onscreen at full size. The failure mode is bounded
   rather than assumed away, and it degrades the one item that can survive
   being degraded.

   Placed after the 1000px block on purpose: `.wrap,.nav-in{padding:0 24px}`
   there has equal specificity, so this has to be later to win, and the
   file's own convention is to keep an override next to the rule it
   overrides rather than moving the original. The burger's hit area obeys
   the same convention at a different address — see the second <600px block,
   beside `.nav-burger` further down, which is the only place it can win. */
@media (max-width: 599px){
  .nav-in{gap:12px;padding:0 16px}
  .login-link{display:none}           /* still in .mobile-menu — proven, not assumed */
  .nav-cta{gap:10px;min-width:0}
  .nav-cta .btn{height:44px}          /* 40 → 44. It was 36 for one round; see above. */
  .mark{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-cta,.nav-burger{flex:0 0 auto}
}


/* ── v3: two doors ───────────────────── */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:36px;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.door{padding:34px 32px 36px}
.door+.door{border-left:1px solid var(--border)}
.door h3{font-size:25px;letter-spacing:-0.024em;font-weight:700;margin:14px 0 0}
.door p{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:14px 0 0}
.door .go{display:inline-flex;margin-top:22px;font-size:14px;font-weight:600}

/* ── v3: four blocks ─────────────────── */
.blocks{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;margin-top:32px}
.blk{padding:26px 0;border-top:1px solid var(--border)}
.blk h4{margin:0;font-size:17px;font-weight:600;letter-spacing:-0.014em}
.blk p{margin:9px 0 0;font-size:15px;line-height:1.62;color:var(--ink-2)}

/* ── v3: won't-do flat list ──────────── */
.wont{margin-top:32px;display:flex;flex-direction:column}
.wont li{list-style:none;font-size:27px;line-height:1.28;letter-spacing:-0.024em;font-weight:600;color:var(--ink-1);padding:22px 0;border-top:1px solid var(--border)}
.wont li:last-child{border-bottom:1px solid var(--border)}
.wont{padding:0;margin-left:0}
#wont{padding-bottom:0;border-bottom:0}

/* ── v3: brokerages ──────────────────── */
.brokers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px}
.bk{border:1px solid var(--border);border-radius:var(--r-inner);height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:var(--surface);font-size:16px;font-weight:600;letter-spacing:-0.018em;color:var(--ink-1);text-align:center;padding:14px 18px;position:relative}
.bk img{display:block;max-width:74%;width:auto;object-fit:contain;filter:saturate(.92)}
.bk img.h-sm{height:20px}.bk img.h-reg{height:26px}.bk img.h-md{height:30px}.bk img.h-lg{height:48px}
.bk.paper{border-style:dashed;background:transparent}
.bk.paper span{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-top:9px;font-weight:400}
.bk-note{margin-top:26px;font-size:13.5px;line-height:1.6;color:var(--ink-3);max-width:70ch}
.logo-pending{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);border:1px dashed var(--border-2);border-radius:4px;padding:3px 7px;display:inline-block;margin-top:18px}

/* ── v3: founder pricing extras ──────── */
.plan.founder{border-color:var(--ink-1);box-shadow:var(--shadow-elevated)}
/* .plan .seats removed 2026-08-05 — the seat-count chip is gone; the
   card's presence is the promise now, not a number on it. */
.lock{font-size:13px;line-height:1.55;color:var(--ink-2);margin-top:12px;border-top:1px solid var(--border);padding-top:12px;min-height:74px}
.lock b{color:var(--ink-1);font-weight:600}
@media (max-width:1000px){.doors,.blocks{grid-template-columns:1fr}.door+.door{border-left:0;border-top:1px solid var(--border)}.brokers{grid-template-columns:1fr 1fr}.wont li{font-size:21px}.pos-say p{font-size:19px}}

/* ── v3: what you can do ─────────────── */
.cando{display:grid;grid-template-columns:repeat(3,1fr);margin-top:32px;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.cd{padding:30px 28px 32px}
.cd+.cd{border-left:1px solid var(--border)}
.cd-n{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--ink-3)}
.cd h3{font-size:22px;letter-spacing:-0.022em;font-weight:700;margin:12px 0 0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cd p{font-size:15px;line-height:1.62;color:var(--ink-2);margin:12px 0 0}
.soon{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--border-strong,var(--border));border-radius:4px;padding:3px 6px;font-weight:500;white-space:nowrap}
@media (max-width:1000px){.cando{grid-template-columns:1fr}.cd+.cd{border-left:0;border-top:1px solid var(--border)}}

/* ── Additions (2026-08-05) ────────────────────────────────────── */

/* [hidden] must beat any display rule. Same failure as .recap-row on the
   confirm sheet: a class selector outranks the UA stylesheet. */
[hidden] { display: none !important; }

/* Focus rings — the prototype is decorative here; production must not be. */
/* `border-radius: 4px` REMOVED 2026-08-25. At (0,1,1) — a type plus a
   pseudo-class — it outranked `.btn{border-radius:var(--r-pill)}` (0,1,0),
   so every pill button on this site squared off to a 4px box for as long
   as it held focus: a focus ring that changes the shape of the control it
   is meant to point at. It was also never needed — an outline follows its
   element's own border-radius in every current engine. */
a:focus-visible, button:focus-visible, summary:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent-on-light);
  outline-offset: 3px;
}
.band a:focus-visible, .band button:focus-visible {
  outline-color: var(--accent-on-navy);
}

/* Active nav link — aria-current is the signal, this is the reinforcement. */
.nav-links a[aria-current="page"] { color: var(--ink-1); font-weight: 600; }

/* Mobile menu. The prototype drops the middle links under 1000px with no
   replacement; the app brief is mobile-first and the site must not be worse. */
.nav-burger { display: none; background: none; border: 0; padding: 8px;
  cursor: pointer; color: var(--ink-1); }
.nav-burger span { display: block; width: 20px; height: 2px; margin: 4px 0;
  background: currentColor; border-radius: 2px; }
.mobile-menu { display: none; }
@media (max-width: 1000px) {
  .nav-burger { display: block; }
  .mobile-menu { display: block; position: fixed; inset: 64px 0 auto 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 18px 24px 26px; z-index: 60; }
  .mobile-menu a { display: block; padding: 13px 0; font-size: 16px;
    font-weight: 500; color: var(--ink-1); border-bottom: 1px solid var(--border); }
  .mobile-menu .m-cta { display: flex; gap: 10px; margin-top: 18px; }
  .mobile-menu .m-cta .btn { flex: 1; justify-content: center; }
}

/* The Menu control's 44 × 44 hit area — the other half of the <600px nav
   block far above, and it has to live down HERE. `.nav-burger{padding:8px}`
   four rules up has equal specificity (0,1,0) and is LATER in the file than
   that block, so the same declaration written up there loses the cascade and
   silently does nothing. Media queries add no specificity; only order breaks
   the tie. Same convention the nav block cites — an override sits beside the
   rule it overrides — pointed at the other rule it has to beat.

   11px/12px is arithmetic, not taste. The icon is 20px wide, and its three
   2px bars with their 4px margins collapsing between them are 22px tall:
   20 + 12 + 12 = 44 and 22 + 11 + 11 = 44, exactly. THE ICON DOES NOT
   CHANGE — only the box around it. Measured 36 × 38 → 44 × 44.

   Scoped to phones deliberately, and the exclusion is stated rather than
   left to be discovered: between 600 and 1000px the burger still renders at
   36 × 38, which is under the 44px touch minimum on a width that is very
   often a touch screen. It is out of this lane's scope — the brief, the
   measurements and the rejection were all at phone widths, and 768px is the
   control that proves this fix did not leak — so widening it there is a
   separate deliberate change with its own before/after, not a silent
   ride-along.

   THE SECOND RULE IS THE DESTINATION OF THE PATH THE FIRST ONE OPENS, and
   it was found by testing the whole navigation task rather than the bar.
   The <600px block far above takes `Log in` OUT of the nav bar on the
   grounds that it "still exists in .mobile-menu". It does — but at 40px,
   because `.btn{height:40px}` is the site-wide button height and the menu's
   two CTAs inherit it. So the correction was on its way to repeating its own
   mistake one surface later: raise the bar's controls to the 44px touch
   minimum and route phone users to a 40px control instead. Measured, with
   the menu open: "How it works" and "About" are 48px and fine; `Log in` and
   `Join the waitlist` were 40 × 158.5. Now 44.

   Deliberately NOT a change to `.btn`. The 40px button is this site's scale
   everywhere — hero, pricing, footer, every band — and moving it is a design
   decision with a much wider blast radius than a nav fix has any business
   taking. This is scoped to the two buttons inside the phone menu, which are
   the ones a finger has to hit. Measured cost: the menu grows 199 → 203px,
   overflow stays 0 at 375/390/412, and at 600 and 768 both buttons are still
   40px — the same no-leak control the burger rule uses. */
@media (max-width: 599px) {
  .nav-burger { padding: 11px 12px; }
  .mobile-menu .m-cta .btn { height: 44px; }   /* 40 → 44; see above */
}

/* Reduced motion — render the end state, never the sequence. */
@media (prefers-reduced-motion: reduce) {
  .demo .read, .demo .row, .demo .foot { opacity: 1 !important;
    transform: none !important; }
  .demo .caret { display: none; }
  .replay { display: none; }
}

/* Non-color-only signals in the comparison table (README a11y item). */
.ptable .yes::before { content: "✓ "; }
.ptable .no::before  { content: "— "; }

/* ══════════════════════════════════════════════════════════════════
   HERO + the thesis-to-setups moment
   ------------------------------------------------------------------
   Ported 2026-08-05 from `site/Home v3.html`, where Design ships these
   as a page-level <style> block rather than in site-v3.css. The first
   port took the markup and not the block, so the entire hero rendered
   as unstyled text while the rest of the page looked correct: 30 of the
   page's classes had no rule at all.

   Values kept verbatim. Every colour is a token read from
   system/tokens.css; nothing here defines one (site.css consumes tokens,
   it never redefines them, and a test pins that).
   ══════════════════════════════════════════════════════════════════ */

.hero{padding:62px 0 58px;border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:56px;align-items:center}
.hero h1{font-size:58px;line-height:1.04;letter-spacing:-0.035em;font-weight:700;margin:0}
.hero p.lede{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:50ch;margin:26px 0 0}
.hero .sub{font-size:20px;font-weight:600;letter-spacing:-0.018em;color:var(--ink-1);margin:20px 0 0}
.hero .cta-row{margin-top:34px}

/* `mo-` = the animated thesis -> setups moment in the hero. */
.mo{margin-top:0}
.mo-plane{background:var(--plane);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-elevated);overflow:hidden}
.mo-top{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.mo-mark{font-size:14px;font-weight:700;letter-spacing:-0.02em}
.mo-mark .dot{color:var(--brand-dot)}
.mo-steps{display:flex;gap:12px;margin-left:auto}
.mo-steps i{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--ink-4);transition:color .3s ease}
.mo-steps i.on{color:var(--ink-1)}
.mo-body{padding:24px 24px 22px}
.mo-prompt{font-size:17px;font-weight:600;letter-spacing:-0.022em;color:var(--ink-1)}
.mo-field{position:relative;margin-top:14px;border:1px solid var(--field-border);border-radius:14px;box-shadow:var(--field-shadow);padding:14px 52px 14px 15px;min-height:50px;font-size:14.5px;line-height:1.5;color:var(--ink-1);background:var(--surface);transition:border-color .25s ease,box-shadow .25s ease}
.mo-field.hot{border-color:var(--blue-500);box-shadow:var(--field-focus-ring),var(--field-shadow)}
.mo-ph{position:absolute;left:15px;top:14px;color:var(--ink-3);font-size:14.5px;transition:opacity .2s ease}
.mo-ph.gone{opacity:0}
.mo-caret{display:inline-block;width:2px;height:1.05em;background:var(--ink-1);vertical-align:-2px;opacity:0}
.mo-caret.blink{opacity:1}
.mo-send{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;border:0;background:var(--ink-4);color:#fff;display:grid;place-items:center;cursor:default;transition:background .3s ease,transform .18s ease}
.mo-send svg{width:16px;height:16px}
.mo-send.live{background:var(--ink-1)}
.mo-send.fire{transform:scale(.88)}
.mo-read{display:flex;gap:10px;margin-top:16px;opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.mo-read.in{opacity:1;transform:none}
.mo-av{width:auto;height:22px;padding:0 7px;border-radius:6px;background:var(--blue-700);color:#fff;display:inline-flex;align-items:center;font-size:9.5px;font-weight:700;flex:0 0 auto;letter-spacing:-0.01em;white-space:nowrap;line-height:1}
.mo-av .dot{color:var(--brand-dot)}
.mo-read-txt{font-size:13.5px;line-height:1.55;color:var(--ink-1);max-width:64ch}
.mo-read-txt b{font-weight:600}
.mo-out{margin-top:16px;border:1px solid var(--border);border-radius:var(--r-inner);overflow:hidden}
.mo-setups{display:grid;grid-template-columns:52px 1fr 1fr 1fr}
.mo-setups > div{border-bottom:1px solid var(--border);padding:9px 10px;min-width:0}
.mo-setups > div:not(:nth-child(4n+1)){border-left:1px solid var(--border)}
.mo-setups .rl{font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);background:var(--surface-2);display:flex;align-items:flex-start}
.mo-setups .lead{background:var(--blue-50,#f4f6ff)}
.mo-card{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.mo-card.in{opacity:1;transform:none}
.mo-tk{display:flex;align-items:center;gap:6px}
.mo-setups .chip:not(.label){background:var(--ink-1);color:#fff;border-color:var(--ink-1)}
.mo-tk b{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:-0.01em}
.mo-rank{font-family:var(--font-mono);font-size:8.5px;color:var(--ink-4);margin-left:auto}
.mo-strike{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-2);margin-top:4px}
.mo-co{font-size:10.5px;color:var(--ink-3);margin-top:2px}
.mo-rw{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:19px;font-weight:600;letter-spacing:-0.02em;color:var(--pos,#177a4c)}
.mo-rw i{font-style:normal;font-size:11px;font-weight:500;color:var(--ink-3);margin-left:5px}
.mo-if{font-size:10px;color:var(--ink-3);line-height:1.4;margin-top:4px}
.mo-risk{font-size:10px;color:var(--ink-2);line-height:1.4;margin-top:5px}
.mo-risk b{font-family:var(--font-mono);font-weight:600;color:var(--ink-1)}
.mo-caveat{font-family:var(--font-mono);font-size:7.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);margin-top:6px}
.mo-act .btn{width:100%;justify-content:center;font-size:11px;height:30px;padding:0 8px}
.mo-foot{margin-top:16px;font-size:11.5px;color:var(--ink-3);line-height:1.5;opacity:0;transition:opacity .5s ease}
.mo-foot.in{opacity:1}
.mo-under{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.mo-replay{appearance:none;border:1px solid var(--border-2);background:var(--surface);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);height:30px;padding:0 13px;border-radius:8px;cursor:pointer;transition:all .15s ease}
.mo-replay:hover{border-color:var(--ink-1);color:var(--ink-1)}

/* Base `.chip`. Design's site-v3.css has none: the prototype inherits the
   app's chip, which the marketing site does not load, so the demo grid
   rendered its LEAD / CALL / ALTERNATIVE labels as bare text. Defined here;
   the `.mo-setups .chip:not(.label)` override above still wins for LEAD. */
.chip{display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:4px;border:1px solid var(--border-2);background:var(--surface-2);font-family:var(--font-mono);font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}

/* ══ MOBILE, and the bug this block caused ═══════════════════════════
   `.hero-grid` is declared unconditionally above, and this whole block
   sits AFTER the site-wide `@media (max-width:1000px)` rule that collapses
   it. Same specificity, later wins — so the two-column hero survived to
   390px, the demo panel ran off the right edge, and the PAGE scrolled
   sideways. The operator found it on a phone; nothing in the suite looks
   at layout at width.

   Re-collapsing here rather than moving the block: this file is appended
   to, so "later wins" will keep happening, and a media query that lives
   next to the rule it overrides is the one a future edit will notice.

   The setups grid is the second half. Design's own mobile rule targets
   `.mo-out`, which is not the grid — `.mo-setups` is — so four columns
   stayed four columns at any width. It is a TABLE (row label + three
   ranked setups) and stacking it loses the comparison that is the whole
   point of the demo. So it scrolls INSIDE its own card instead, which is
   the honest fix: the panel scrolls, the page does not. */
/* THE CONTAINMENT CHAIN — the actual cause of the sideways scroll.
   Grid and flex children default to `min-width:auto`, which means a wide
   child (the 560px setups table) pushes every ancestor track wider than the
   viewport no matter what the scroll container says. `overflow-x:hidden` on
   body hides the scrollbar and iOS still expands the layout, which is why the
   copy was clipped mid-sentence rather than merely scrollable.
   `min-width:0` is what actually lets a grid item be narrower than its
   content. It has to be set on EVERY link in the chain — one omission and the
   whole chain fails open. */
.hero-grid > *{min-width:0}
.mo,.mo-plane,.mo-body,.mo-out{min-width:0}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .mo-body{padding:20px 18px}
  .hero h1{font-size:40px}
  .hero{padding:56px 0 52px}
}

/* ══ THE DEMO, RESTRUCTURED FOR A PHONE ══════════════════════════════
   Operator: "do we need to actually change the visual of the trade
   construction moment for mobile-specific use?" Yes — and horizontal
   scroll inside the card was the wrong answer.

   On desktop this is a TABLE: a label column and three ranked setups read
   across, so you compare GLW against LRCX against COHR at a glance. That
   comparison is the whole point of the moment. At 390px the same grid is
   either four unreadable columns or a scroll region where the first
   impression is a cut-off table — and a marketing hero has one shot.

   So on a phone it stops being a table and becomes three cards, each
   carrying one setup's row-slices together: the contract, then its reward,
   then its action. Same content, same order, no markup change — `order`
   regroups a column-major grid into a row-major stack, so the desktop
   layout is untouched.

   Source order is: rl, c1, c2, c3, rl, c4, c5, c6, rl, c7, c8, c9 —
   children 1-12. Setup cards are 2,3,4; reward 6,7,8; action 10,11,12. So
   GLW is 2/6/10, LRCX 3/7/11, COHR 4/8/12.

   The row labels go: "Setup / Reward / Action" are headers for a table that
   no longer exists, and repeating them three times would be noise. */
@media (max-width:760px){
  .mo-setups{display:flex;flex-direction:column;min-width:0}
  .mo-setups > .rl{display:none}
  .mo-setups > div{border-left:0 !important;border-bottom:0;padding:10px 12px}

  .mo-setups > *:nth-child(2){order:1;padding-top:12px}
  .mo-setups > *:nth-child(6){order:2}
  .mo-setups > *:nth-child(10){order:3;padding-bottom:14px;
    border-bottom:1px solid var(--border)}

  .mo-setups > *:nth-child(3){order:4;padding-top:12px}
  .mo-setups > *:nth-child(7){order:5}
  .mo-setups > *:nth-child(11){order:6;padding-bottom:14px;
    border-bottom:1px solid var(--border)}

  .mo-setups > *:nth-child(4){order:7;padding-top:12px}
  .mo-setups > *:nth-child(8){order:8}
  .mo-setups > *:nth-child(12){order:9;padding-bottom:12px}

  /* The lead tint reads as a highlight across a row; down a stack it becomes
     a block of colour behind a third of the card. The rank chip already says
     which one leads. */
  .mo-setups .lead{background:transparent}
  .mo-rw{font-size:17px}
  .mo-act .btn{height:34px;font-size:12px}
}
@media (max-width:640px){
  .hero h1{font-size:34px}
  .hero p.lede{font-size:17px}
  .hero .sub{font-size:18px}
  .mo-body{padding:16px 14px}
  .mo-under{flex-wrap:wrap;gap:8px}
}
/* Nothing on this site may scroll the page sideways. A wide child gets its
   own scroll container (see .mo-out) rather than pushing the document out —
   the "unsteady left/right scroll" the operator hit is what that looks like
   when it is the body doing the scrolling.

   THIS RULE IS A NET, NOT A FIX, and it should never be cited as one
   (2026-08-25). It cannot make content fit; it only stops the document
   scrolling and CLIPS whatever still overflows — which is strictly worse
   when the clipped thing is a control. That is exactly what happened to the
   nav burger at 390px: the row was ~70px too wide, this rule hid the
   evidence, and the only way into the navigation on a phone was rendered
   outside the viewport with no scrollbar to reveal it. The real causes are
   fixed at their source and each carries its own note: the hero's
   containment chain (`min-width:0`, above) and the nav row (the <600px
   block after the 1000px one). If a new overflow appears, find the wide
   element — do not lean on this line. */
html,body{max-width:100%;overflow-x:hidden}

/* ── whiteboard moment: outer plane only (inner chrome = whiteboard.css) ── */
.wbframe{border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-elevated)}
.wbframe-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.wbframe-body{padding:20px 18px 18px}
.wbframe .wb-convo{max-width:none}
.wbframe .wb-turn:last-child{margin-bottom:0}
.wbframe .av.engine{width:auto;padding:0 9px;border-radius:var(--r-pill);font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:-0.01em;background:var(--ink-1)}
.wbframe .av.engine i{font-style:normal;color:var(--brand-dot)}
.wbframe .wb-foot .src b{display:none}
.wbframe .wb-foot .src{margin-right:auto}

/* ══════════════════════════════════════════════════════════════════
   Rules the pages use and nothing defined — found 2026-08-05 by
   checking every class in the rendered markup against the served CSS,
   across all four pages rather than one.
   ══════════════════════════════════════════════════════════════════ */

/* Skip link. Present on all four pages, styled on none, so "Skip to
   content" rendered as a visible blue link above the wordmark on every
   page of the site. There was a test asserting `class="skip"` was
   PRESENT — which passed the whole time, because presence was all it
   checked (§36.18).

   Off-screen until focused, then a real, visible target. Not
   display:none: that removes it from the tab order and defeats the
   point of having it. */
.skip{position:absolute;left:-9999px;top:0;z-index:100}
.skip:focus{
  left:12px;top:12px;
  display:inline-flex;align-items:center;height:40px;padding:0 18px;
  background:var(--ink-1);color:#fff;border-radius:var(--r-pill);
  font-size:14px;font-weight:600;text-decoration:none;
  box-shadow:var(--shadow-elevated);
}

/* Footer blurb. Design carries these declarations as a style attribute
   on the div; extracting it to a class and then not writing the rule is
   how it ended up unstyled. Values are Design's, verbatim. */
.foot-blurb{font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:32ch}

/* Crop placeholder — the deliberate stand-in where Design's prototype
   embeds an <iframe> of an app screen. We do not ship those embeds (the
   README forbids putting the running product on a public page), so the
   slot has to read as an intentional empty state rather than a hole.
   Replaced by a real static export when Design supplies one. */
.crop-placeholder{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(var(--surface-2),var(--surface-2)) padding-box,
    repeating-linear-gradient(45deg,transparent 0 9px,var(--border) 9px 10px);
  color:var(--ink-3);
}

/* ── whiteboard conversation drop-in ─────────────────────────────────
   From Design's `site/whiteboard.css`, section "Drop-in conversation
   (the signature beat)".

   Why these live here and not in the app's whiteboard.css, which the page
   already loads: that file covers the CHART chrome (wb-chart / wb-head /
   wb-foot / wb-plot) and the in-app ask form (wb-ask / wb-form / wb-input).
   It has never had the conversation shell — the app's research surface
   renders its own turns with its own classes. So this is not a second copy
   of an existing definition (§36.19); it is a definition the app does not
   have, kept next to the only markup that uses it.

   Found 2026-08-05 by the all-pages styled check: the home page linked
   whiteboard.css, every URL resolved, and `.wb-bubble` and `.av.user` still
   had no rule anywhere — a 200 proving only that a file came back.
   ────────────────────────────────────────────────────────────────────── */
.wb-convo{max-width:680px;margin:0 auto}
.wb-turn{display:flex;gap:12px;margin-bottom:16px}
.wb-turn .av{width:28px;height:28px;border-radius:8px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:700}
.wb-turn .av.engine{background:var(--blue-700);color:#fff}
.wb-turn .av.user{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
.wb-turn .body{flex:1;min-width:0}
.wb-bubble{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 15px;font-size:13.5px;color:var(--ink-1);line-height:1.5}
.wb-bubble.user{background:var(--surface-2)}
.wb-bubble .tok{font-family:var(--font-mono);font-size:12.5px;font-weight:500}
.wb-role{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}

/* ══════════════════════════════════════════════════════════════════
   Stylized platform mocks — How it works, steps 01 and 03.
   Ported 2026-08-05 from Design's site-v3.css.

   These replace the two <iframe> crops the prototype used. Design built
   them as MARKUP rather than embedding a screen, which is the right call
   for a public page: no running product in an iframe, no screenshot to
   re-export every time the app moves, and they inherit the site's tokens
   so they cannot drift from the brand.

   They can still drift from the APP — they are a hand-made likeness of a
   real screen, not the screen. Kept deliberately small for that reason.
   ══════════════════════════════════════════════════════════════════ */

.mock{border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-elevated)}
.mock-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.mock-body{padding:22px 22px 20px}
.mk-kick{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ── step 01: the research read ──────────────────────────────────── */
.mk-readhead{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.mk-readhead .when{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.mk-read{font-size:16.5px;line-height:1.66;color:var(--ink-1);letter-spacing:-0.006em;text-wrap:pretty}
.mk-read p{margin:0}
.mk-read .sig{color:var(--accent-on-light);border-bottom:1.5px dotted color-mix(in srgb,var(--accent-on-light) 55%,transparent);font-weight:500}
.mk-read .reg-word{color:var(--accent-on-light);background:color-mix(in srgb,var(--accent-on-light) 9%,transparent);border-radius:4px;padding:1px 4px;font-weight:500}
.mk-hm{margin-top:22px}
.mk-hm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.mk-hm .heat{display:grid;grid-template-columns:repeat(24,1fr);gap:3px}
.mk-hm .heat i{aspect-ratio:1;border-radius:2px;background:var(--flat-bg)}
.mk-hm .heat i.pd{background:var(--p-deep-bg)}.mk-hm .heat i.pm{background:var(--p-mid-bg)}.mk-hm .heat i.ps{background:var(--p-soft-bg)}
.mk-hm .heat i.ns{background:var(--n-soft-bg)}.mk-hm .heat i.nm{background:var(--n-mid-bg)}.mk-hm .heat i.nd{background:var(--n-deep-bg)}
.mk-hm-scale{display:flex;align-items:center;gap:9px;justify-content:flex-end;margin-top:10px;font-family:var(--font-mono);font-size:9.5px;color:var(--ink-3);letter-spacing:.06em}
.mk-hm-scale .ramp{display:flex;gap:2px}
.mk-hm-scale .ramp i{width:15px;height:8px;border-radius:2px}
.mk-drawer{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:11px 14px;border:1px solid var(--border);border-radius:var(--r-inner);background:var(--surface-2);font-size:13px;color:var(--ink-2)}
.mk-drawer b{color:var(--ink-1);font-weight:600}
.mk-drawer .car{font-family:var(--font-mono);color:var(--ink-3);font-size:12px}

/* the ask bar (mirrors .field/.go in system/app-shell.css) */
.mk-ask{margin-top:16px}
.mk-field{background:var(--surface);border:1px solid var(--field-border);border-radius:9px;padding:15px 16px 12px;box-shadow:var(--field-shadow)}
.mk-ph{display:block;font-size:15px;line-height:1.55;color:var(--ink-3);margin-bottom:10px}
.mk-foot{display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);padding-top:11px}
.mk-hint{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3)}
.mk-go{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:7px;background:var(--blue-700);color:#fff;border:none;font-family:var(--font-sans);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.mk-go svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2}
@media(prefers-reduced-motion:no-preference){
  .mk-read.writing p::after{content:'';display:inline-block;width:2px;height:1em;background:var(--ink-1);vertical-align:-.13em;margin-left:2px;animation:mkcar 1s steps(1) infinite}
  @keyframes mkcar{50%{opacity:0}}
}

/* ── step 03: the stage card (mirrors research/Stage a Trade.html) ── */
.stg{border:1px solid var(--border-2);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:0 4px 16px rgba(15,23,41,.07)}
.stg-head{padding:15px 18px 13px;border-bottom:1px solid var(--border)}
.stg-label{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.stg-label .pi{color:var(--warn-ink)}
.stg-thesis{font-size:15px;font-weight:650;letter-spacing:-0.01em;color:var(--ink-1);margin-top:7px;text-wrap:pretty}
.stg-trade{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 18px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.stg-trade .st-tk{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--ink-1)}
.stg-trade .st-chip{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.stg-trade .st-chip.put{background:var(--red-50);color:var(--red-600);border:1px solid #f3d4d4}
.stg-trade .st-leg{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--ink-2)}
.stg-trade .st-leg b{color:var(--ink-1);font-weight:600}
.stg-trade .st-edit{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--accent-on-light)}
.stg-chart{padding:16px 18px 4px}
.stg-actions{display:flex;align-items:center;gap:12px;padding:14px 18px 16px}
.btn-stage{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;background:var(--ink-1);color:#fff;border:none;border-radius:11px;font-family:var(--font-sans);font-size:14.5px;font-weight:600}
.btn-adjust{height:46px;padding:0 18px;background:var(--surface);color:var(--ink-1);border:1px solid var(--border-2);border-radius:11px;font-family:var(--font-sans);font-size:14px;font-weight:600}
.stg-foot{padding:0 18px 16px;font-size:12px;color:var(--ink-3);text-wrap:pretty}
.stg-foot b{color:var(--ink-2);font-weight:600}

/* ── VERTICAL RHYTHM, tightened 2026-08-05 ───────────────────────────
   Operator: "a little too much spacing here between sections ... let's
   tighten this a bit ... don't want it to feel crowded, obviously."

   A DELIBERATE DIVERGENCE FROM DESIGN'S NUMBERS, recorded so nobody
   later reads it as drift. Roughly 25-30% off the big vertical gaps and
   nothing off the horizontal measure or the type scale:

     section       88 -> 64      page-head   88/72 -> 64/52
     hero       82/76 -> 62/58   close         100 -> 76
     footer     56/64 -> 44/52   feat row gap   64 -> 56

   plus the same proportion off each block's margin-top (steps, cando,
   band grid, doors, brokers, wont, faq, plans, ptable) so the sections
   tighten evenly rather than the outer padding shrinking while the
   insides stay loose — which is what makes a page feel cramped instead
   of tight.

   Untouched on purpose: line-height, .sec-head measure, card padding.
   The complaint was space BETWEEN things, not inside them. */

/* ── the learning loop ───────────────────────────────────────────────
   Imported 2026-08-10 from the MTA design project, site/site-v3.css.

   TWO DEPARTURES FROM THE DESIGN, both to hold decisions made in the
   waitlist build rather than to second-guess Design:
     * .ll-gate no longer carries a price and no longer points at
       /pricing. Pricing left the nav on 2026-08-10 because we cannot
       take money until the market-data licensing is settled, and a
       "$99" on this section would be quoting one anyway.
     * .ll-limits is styled here but has no markup in Home v3.html.
       Kept so a future import diffs cleanly, and because a panel
       stating what the record cannot yet tell you is the strongest
       thing available on this section — see the learning-loop brief.
------------------------------------------------------------------- */
#loop{background:var(--bg)}
.ll-lede{font-size:19px;line-height:1.6;color:var(--ink-2);margin:18px 0 0;max-width:62ch}
.ll-track{position:relative;margin-top:56px}
.ll-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:2}
.ll-st{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:22px 22px 24px;position:relative;opacity:0;transform:translateY(10px)}
.ll-track.on .ll-st{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.ll-track.on .ll-st:nth-child(2){transition-delay:.13s}
.ll-track.on .ll-st:nth-child(3){transition-delay:.26s}
.ll-track.on .ll-st:nth-child(4){transition-delay:.39s}
.ll-n{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-4)}
.ll-st h4{margin:10px 0 0;font-size:16.5px;font-weight:700;letter-spacing:-0.015em;color:var(--ink-1)}
.ll-st p{margin:9px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.ll-live{position:absolute;top:20px;right:20px;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;color:var(--pos-600)}
.ll-rail{position:absolute;left:0;right:0;top:44px;height:2px;background:var(--border);z-index:1}
.ll-rail i{position:absolute;inset:0 100% 0 0;background:var(--ink-1);transition:right 1.5s cubic-bezier(.4,0,.2,1) .2s}
.ll-track.on .ll-rail i{right:0}
.ll-close{margin-top:18px;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;border:1px dashed var(--border-2);border-radius:var(--r-card);padding:22px 24px;background:transparent;opacity:0;transform:translateY(10px)}
.ll-track.on .ll-close{opacity:1;transform:none;transition:opacity .5s ease .6s,transform .5s ease .6s}
.ll-close .ll-n{color:var(--ink-3)}
.ll-soon{display:block;margin-top:8px;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;color:var(--ink-3);white-space:nowrap}
.ll-close h4{margin:8px 0 0;font-size:16.5px;font-weight:700;letter-spacing:-0.015em;color:var(--ink-1)}
.ll-close p{margin:7px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2);max-width:74ch}
.ll-gate{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-1);border:1px solid var(--ink-1);border-radius:var(--r-pill);padding:7px 13px;white-space:nowrap;text-decoration:none;display:inline-block}
.ll-gate:hover{background:var(--ink-1);color:#fff}
.ll-back{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;color:var(--ink-4);margin-top:14px}
.ll-back .ln{flex:1;height:1px;background:repeating-linear-gradient(to right,var(--border-2) 0 5px,transparent 5px 10px)}
.ll-learn{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-top:72px;padding-top:56px;border-top:1px solid var(--border)}
.ll-learn h3{font-size:27px;letter-spacing:-0.024em;margin:14px 0 0;font-weight:700}
.ll-learn>div>p{font-size:16px;line-height:1.62;color:var(--ink-2);margin:14px 0 0}
.ll-q{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ll-q li{padding:16px 0;border-top:1px solid var(--border);font-size:15.5px;line-height:1.5;color:var(--ink-1);letter-spacing:-0.012em}
.ll-q li:first-child{border-top:0;padding-top:0}
.ll-q li b{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-bottom:6px}
.ll-limits{margin-top:56px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);padding:28px 30px 30px}
.ll-limits h4{margin:10px 0 0;font-size:19px;font-weight:700;letter-spacing:-0.018em}
.ll-limits ul{margin:16px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}
.ll-limits li{font-size:14px;line-height:1.6;color:var(--ink-2);padding-left:18px;position:relative}
.ll-limits li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--ink-4)}
@media(prefers-reduced-motion:reduce){
  .ll-st,.ll-close{opacity:1;transform:none}
  .ll-rail i{right:0;transition:none}
}
@media(max-width:1000px){
  .ll-stages{grid-template-columns:1fr}
  .ll-rail{display:none}
  .ll-close{grid-template-columns:1fr;gap:14px}
  .ll-learn{grid-template-columns:1fr;gap:32px}
  .ll-limits ul{grid-template-columns:1fr}
}

/* ── the waitlist page ───────────────────────────────────────────────
   Imported 2026-08-10 from the MTA design project, site/Waitlist v3.html.

   LINKED, NOT INLINE, on purpose. Design ships these as a page-level
   <style> block and the first port of the HOME hero did the same — which
   is how that page shipped with 30 unstyled classes while every test
   passed, because test_every_page_markup_is_actually_styled only reads
   CSS it can FETCH. Keeping this in the served stylesheet is what puts
   the waitlist page under that test rather than beside it.
------------------------------------------------------------------- */
.wl{padding:88px 0 96px;border-bottom:1px solid var(--border)}
.wl-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:start}
.wl h1{font-size:46px;line-height:1.06;letter-spacing:-0.034em;font-weight:700;margin:16px 0 0;max-width:15ch}
.wl-why{margin:26px 0 0;font-size:18px;line-height:1.6;color:var(--ink-1);max-width:46ch;font-weight:500}

.wl-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-elevated);padding:34px 34px 32px;position:sticky;top:96px}
.wl-card h2{font-size:21px;font-weight:700;letter-spacing:-0.02em;margin:0}
.wl-card .lead{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.wl-form{margin-top:24px}
.wl-label{display:block;font-size:13px;font-weight:600;color:var(--ink-1);margin-bottom:7px}
.wl-input{width:100%;height:48px;padding:0 15px;font-family:var(--font-sans);font-size:15.5px;color:var(--ink-1);background:var(--surface);border:1px solid var(--field-border,var(--border-2));border-radius:var(--r-inner);outline:0;transition:border-color .15s ease,box-shadow .15s ease}
.wl-input::placeholder{color:var(--ink-4)}
.wl-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(68,86,209,.13)}
.wl-input[aria-invalid="true"]{border-color:var(--red-600)}
.wl-input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(201,57,57,.16)}
.wl-err{display:none;margin-top:8px;font-size:13px;line-height:1.5;color:var(--red-600)}
.wl-err.on{display:block}
.wl-consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px}
.wl-consent input{margin:2px 0 0;width:16px;height:16px;flex:0 0 auto;accent-color:var(--ink-1)}
.wl-consent label{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.wl-consent a{color:var(--accent-on-light)}
.wl-submit{width:100%;height:48px;margin-top:16px;font-family:var(--font-sans);font-size:15px;font-weight:600;color:#fff;background:var(--ink-1);border:0;border-radius:var(--r-pill);cursor:pointer;transition:background .16s ease,opacity .16s ease;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.wl-submit:hover{background:var(--blue-700)}
.wl-submit:disabled{opacity:.62;cursor:default}
.wl-spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.34);border-top-color:#fff;border-radius:50%;display:none}
.wl-submit.busy .wl-spin{display:block}
@media(prefers-reduced-motion:no-preference){.wl-submit.busy .wl-spin{animation:wlspin .7s linear infinite}}
@keyframes wlspin{to{transform:rotate(360deg)}}
.wl-fine{margin:16px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.wl-fine a{color:var(--accent-on-light)}

/* honeypot — present for a bot, absent for everyone else */
.wl-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.wl-res{display:none}
.wl-res.on{display:block}
.wl-badge{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:17px;font-weight:700}
.wl-badge.ok{background:var(--pos-50);color:var(--pos-600)}
.wl-badge.note{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
.wl-badge.bad{background:var(--red-50);color:var(--red-600);border:1px solid #f3d4d4}
.wl-res h3{margin:16px 0 0;font-size:20px;font-weight:700;letter-spacing:-0.018em}
.wl-res p{margin:9px 0 0;font-size:14.5px;line-height:1.62;color:var(--ink-2)}
.wl-res .who{margin-top:14px;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);word-break:break-all}
.wl-retry{margin-top:20px}

@media(max-width:1000px){
  .wl{padding:56px 0 64px}
  .wl-grid{grid-template-columns:1fr;gap:38px}
  .wl h1{font-size:34px;max-width:none}
  .wl-why{max-width:none}
  .wl-card{position:static;padding:26px 22px 24px}
}
@media(max-width:420px){
  .wl h1{font-size:30px}
  .wl-card{padding:22px 18px 22px}
}