/* ============================================================
   BUILD YOUR NEXT 3.0 — DESIGN SYSTEM ("Ember")
   Single shared stylesheet. Canonical source: design-handoff
   (warm paper neutrals + one ember accent; Bricolage Grotesque /
   Instrument Sans / IBM Plex Mono).

   Contents
   1.  Tokens (light + dark) — new palette + legacy var aliases
   2.  Base & typography
   3.  Header chrome (ink bar, wordmark, nav) + skip link
   4.  Buttons & links (.btn/.btn-w/.btn-ghost + legacy .cta/.cta2)
   5.  Section scaffolding (section.sec, kicker, folio, deck)
   6.  Home components (statchips, hiw steps, fcard editions,
       tools, quotes, methods, pricing, faq)
   7.  Figure card, gauge, bars
   8.  Subscribe band, article cards
   9.  Footer
   10. Forms & states
   11. Accessibility
   12. Responsive (820 / 640 / 400)
   13. Onboarding overlay + cohort retuning

   Class-API note: legacy component classes (folio, kicker, deck,
   byline, cta, cta2, fig, gauge, bar/track/fill, band, arts/art,
   fork-grid/fcard, field, state) are KEPT and restyled — inner
   pages and their JS depend on them. Legacy color vars (--paper,
   --ink, --red, --mut, --faint, --hair, --hair2, --rule, --track,
   --fig-bg, --fig-tx, --data2, --shadow) are aliased to the new
   palette so per-page CSS keeps working.
   Ember budget: accent is for kickers, links, one data series,
   and primary actions — not floods (hero + footer excepted).
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Base ramps — light (default) */
  --paper-0:#FBFAF8; --paper-1:#F4F1EC; --paper-2:#ECE8E1;
  --ink-1:#1A1815;   --ink-2:#57524A;   --ink-3:#8A847A;
  --line-1:#E5E1D9;  --line-2:#D3CEC4;
  --ember-700:#A83411; --ember-600:#C43D14; --ember-500:#D9481C;
  --ember-100:#F9E5DC; --ember-50:#FCF1EC;
  --green-600:#2E7D4F; --green-100:#E1F0E7;
  --amber-600:#A96B1F; --amber-100:#F7ECD9;
  --red-600:#BF3B2E;   --red-100:#F9E4E1;

  /* Semantic */
  --surface-page:var(--paper-0);
  --surface-card:#FFFFFF;
  --surface-sunken:var(--paper-1);
  --surface-inverse:var(--ink-1);
  --text-body:var(--ink-1);
  --text-secondary:var(--ink-2);
  --text-muted:var(--ink-3);
  --text-on-accent:#FFFFFF;
  --text-inverse:var(--paper-0);
  --border-default:var(--line-1);
  --border-strong:var(--line-2);
  --accent:var(--ember-600);
  --accent-hover:var(--ember-700);
  --accent-tint:var(--ember-50);
  --accent-tint-strong:var(--ember-100);
  --success:var(--green-600);   --success-tint:var(--green-100);
  --warning:var(--amber-600);   --warning-tint:var(--amber-100);
  --danger:var(--red-600);      --danger-tint:var(--red-100);
  --focus-ring:var(--ember-500);

  /* Chrome (header bar + footer) — stays dark in BOTH themes */
  --chrome-bg:#1A1815;
  --chrome-tx:#FBFAF8;
  --chrome-mut:rgba(251,250,248,0.75);
  --chrome-faint:rgba(251,250,248,0.5);
  --chrome-hair:rgba(251,250,248,0.15);
  --chrome-accent:#D9481C; /* ember-500 reads best on ink */

  /* Type */
  --font-display:"Bricolage Grotesque","Helvetica Neue",sans-serif;
  --font-body:"Instrument Sans","Helvetica Neue",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --tracking-display:-0.02em;
  --tracking-label:0.08em;

  /* Radius & shadow */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
  --shadow-raised:0 8px 24px rgba(26,24,21,0.08);

  /* Legacy aliases (broadsheet var names used by per-page CSS) */
  --paper:var(--paper-0); --paper2:var(--paper-1);
  --ink:var(--ink-1); --ink2:var(--ink-2);
  --mut:var(--ink-3); --faint:#A8A296;
  --hair:var(--line-1); --hair2:#EFEBE4;
  --rule:var(--line-2);
  --red:var(--accent);
  --track:#EEEAE2;
  --fig-bg:var(--ink-1); --fig-tx:#FBFAF8;
  --shadow:rgba(26,24,21,0.10);
  --data2:var(--warning);
  --mast-bg:var(--paper-1);
}

[data-theme="dark"] {
  --paper-0:#171512; --paper-1:#201D19; --paper-2:#2A2620;
  --ink-1:#F0EDE7;   --ink-2:#B3ACA0;   --ink-3:#837D72;
  --line-1:#332F28;  --line-2:#453F36;

  --surface-page:var(--paper-0);
  --surface-card:var(--paper-1);
  --surface-sunken:#121009;
  --surface-inverse:var(--ink-1);
  --text-inverse:#171512;
  --accent:#E8582A;
  --accent-hover:#F06D42;
  --accent-tint:#2E1B12;
  --accent-tint-strong:#40220F;
  --success:#4CA372;  --success-tint:#16291E;
  --warning:#C98A3B;  --warning-tint:#2C2214;
  --danger:#D95A4C;   --danger-tint:#2E1815;
  --focus-ring:#E8582A;

  --chrome-bg:#121009;
  --chrome-accent:#E8582A;

  /* Legacy aliases — dark */
  --faint:#6B655A;
  --hair2:#2A2620;
  --track:#2A2620;
  --fig-bg:#201D19; --fig-tx:#F0EDE7;
  --shadow:rgba(0,0,0,0.5);
}

/* ---------- 2. BASE & TYPOGRAPHY ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
[hidden] { display:none !important; }
body { background:var(--surface-page); color:var(--text-body); font-family:var(--font-body); font-size:16px; line-height:1.55; transition:background .25s,color .25s; }
.wrap { max-width:1160px; margin:0 auto; padding:0 32px; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); font-weight:700; letter-spacing:var(--tracking-display); line-height:1.1; }
.fr { font-family:var(--font-body); }
.mono { font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-label); text-transform:uppercase; }
.kicker { font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.deck { font-size:18px; color:var(--text-secondary); line-height:1.55; margin-top:18px; max-width:680px; }
.byline { font-family:var(--font-mono); font-size:10.5px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-muted); margin-top:18px; }
.lede { font-size:16px; color:var(--text-secondary); margin-top:14px; max-width:560px; }

/* ---------- 3. HEADER CHROME (ink bar + wordmark + nav) ---------- */
.skip-link { position:absolute; left:-9999px; top:0; background:var(--ink-1); color:var(--paper-0); padding:10px 18px; font-family:var(--font-body); font-weight:600; font-size:13px; z-index:100; }
.skip-link:focus { left:0; }

.nav-bar { background:var(--chrome-bg); }
.nav-bar .nav { display:flex; align-items:center; gap:26px; height:56px; }
.nav-bar .logo { margin-right:auto; }
.nav-bar .logo { font-family:var(--font-display); font-size:18px; color:var(--chrome-tx); font-weight:400; letter-spacing:-0.01em; text-decoration:none; white-space:nowrap; }
.nav-bar .logo b { font-weight:800; letter-spacing:-0.03em; color:var(--chrome-accent); }
.nav-bar .logo .caret { font-family:var(--font-mono); font-weight:400; color:var(--chrome-accent); }
.nav-bar .logo .tld { font-family:var(--font-mono); font-weight:400; color:rgba(251,250,248,0.6); }
.nav-bar nav { display:flex; gap:22px; align-items:center; }
.nav-bar nav a { font-size:14px; font-weight:500; color:var(--chrome-mut); text-decoration:none; padding:4px 0; }
.nav-bar nav a:hover { color:#fff; }
.nav-bar nav a.active, .nav-bar nav a[aria-current="page"] { color:#fff; font-weight:600; border-bottom:2px solid var(--chrome-accent); }
.nav-bar nav a.btn { color:#fff; border-bottom:none; }

/* caret blink (steady, inner pages) */
@media (prefers-reduced-motion: no-preference) {
  .nav-bar .caret { animation:wmblink 1.1s steps(2,start) infinite; }
  @keyframes wmblink { to { visibility:hidden; } }
  /* softer eased pulse (home wordmark) */
  .nav-bar .caret.caret-soft { animation:wmpulse 1.6s ease-in-out infinite; }
  @keyframes wmpulse { 0%,45% { opacity:1; } 60%,85% { opacity:0; } 100% { opacity:1; } }
}

/* sticky shrinking header (home only: .nav-bar.sticky) */
.nav-bar.sticky { position:sticky; top:0; z-index:50; }
.nav-bar.sticky .nav { height:120px; transition:height .35s ease; }
.nav-bar.sticky .logo { font-size:42px; transition:font-size .35s ease; }
.nav-bar.sticky.shrunk .nav { height:56px; }
.nav-bar.sticky.shrunk .logo { font-size:18px; }

/* utility strip inside header (theme toggle + account) */
.nav-bar .nav-utils { display:flex; gap:14px; align-items:center; }
.toggle { cursor:pointer; border:1px solid var(--chrome-hair); background:none; color:var(--chrome-mut); font-family:var(--font-mono); font-size:10.5px; letter-spacing:var(--tracking-label); text-transform:uppercase; padding:6px 12px; border-radius:var(--radius-sm); transition:.2s; }
.toggle:hover { border-color:var(--chrome-tx); color:var(--chrome-tx); }
.nav-account { font-family:var(--font-mono); font-size:10.5px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--chrome-mut); }
.nav-account:hover { color:#fff; }

/* mobile menu */
.nav-menu-btn { display:none; background:none; border:1px solid var(--chrome-hair); border-radius:var(--radius-sm); color:var(--chrome-tx); font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-label); text-transform:uppercase; padding:7px 12px; cursor:pointer; }
.nav-menu-btn:hover { border-color:var(--chrome-tx); }
.nav-mobile { display:none; background:var(--chrome-bg); border-top:1px solid var(--chrome-hair); padding:8px 0 16px; }
.nav-mobile.open { display:block; }
.nav-mobile a { display:block; padding:11px 32px; font-size:15px; font-weight:500; color:var(--chrome-mut); }
.nav-mobile a:hover { color:#fff; }
.nav-mobile a.active, .nav-mobile a[aria-current="page"] { color:#fff; box-shadow:inset 3px 0 0 var(--chrome-accent); }
.nav-mobile .nav-mobile-utils { display:flex; gap:14px; padding:12px 32px 0; align-items:center; }

/* ---------- 4. BUTTONS & LINKS ---------- */
.btn { display:inline-block; background:var(--accent); color:var(--text-on-accent); font-family:var(--font-body); font-weight:500; font-size:14px; padding:11px 20px; border-radius:var(--radius-sm); border:none; cursor:pointer; text-decoration:none; transition:background .2s; }
.btn:hover { background:var(--accent-hover); color:var(--text-on-accent); }
.btn-w { display:inline-block; background:#fff; color:var(--ember-700); font-family:var(--font-body); font-weight:600; font-size:15px; padding:13px 24px; border-radius:var(--radius-sm); border:none; cursor:pointer; text-decoration:none; }
.btn-w:hover { background:var(--paper-1); color:var(--ember-700); }
.btn-ghost { display:inline-block; background:transparent; color:var(--text-body); font-family:var(--font-body); font-weight:500; font-size:14px; padding:10px 19px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); cursor:pointer; text-decoration:none; }
.btn-ghost:hover { border-color:var(--text-body); color:var(--text-body); }

/* legacy button classes (inner pages + JS) — restyled to ember */
.cta { background:var(--accent); color:var(--text-on-accent); font-family:var(--font-body); font-weight:600; padding:14px 28px; font-size:14px; border-radius:var(--radius-sm); transition:.2s; display:inline-block; border:none; cursor:pointer; }
.cta:hover { background:var(--accent-hover); color:var(--text-on-accent); }
.cta[disabled] { background:var(--text-muted); cursor:not-allowed; }
.cta2 { font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--text-body); border-bottom:2px solid var(--accent); padding-bottom:3px; background:none; border-top:none; border-left:none; border-right:none; cursor:pointer; }
.cta2:hover { color:var(--accent); }
.ctarow { margin-top:30px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }

/* ---------- 5. SECTION SCAFFOLDING ---------- */
section.sec { padding:80px 0; }
.sec-sunken { background:var(--surface-sunken); border-top:1px solid var(--border-default); border-bottom:1px solid var(--border-default); }
section.sec h2 { font-size:44px; margin:12px 0 0; }

/* folio — legacy section header used across inner pages, resoftened */
.folio { display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--border-strong); padding-top:12px; margin-top:64px; }
.folio .sec { font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.folio .sec span { color:var(--accent); margin-right:10px; }
.folio .pg { font-family:var(--font-mono); font-size:10.5px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-muted); }
.folio--tight { margin-top:36px; }
.folio-lite { font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-muted); border-top:1px solid var(--border-default); padding-top:10px; margin-top:28px; }
.fig-cta { margin-top:18px; }

/* ---------- 6. HOME COMPONENTS ---------- */
/* stat chips overlapping the hero edge */
.statchips { display:flex; gap:16px; flex-wrap:wrap; margin-top:-44px; position:relative; z-index:2; }
.statchip { border-radius:var(--radius-md); padding:18px 22px; box-shadow:var(--shadow-raised); }
.statchip .chip-num { font-family:var(--font-display); font-weight:700; font-size:32px; letter-spacing:var(--tracking-display); display:block; }
.statchip .chip-label { display:block; margin-top:4px; }
.statchip-dark { background:var(--ink-1); color:var(--paper-0); }
.statchip-dark .chip-label { color:rgba(251,250,248,0.6); }
[data-theme="dark"] .statchip-dark { background:var(--paper-2); color:var(--ink-1); }
[data-theme="dark"] .statchip-dark .chip-label { color:var(--ink-3); }
.statchip-light { background:var(--surface-card); border:1px solid var(--border-strong); }
.statchip-light .chip-label { color:var(--text-muted); }

/* how it works — 3 column-ruled steps */
.hiw { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; margin-top:40px; border-top:1px solid var(--border-strong); }
.hiw-step { padding:28px 32px 28px 0; border-right:1px solid var(--border-default); }
.hiw-step:last-child { border-right:none; padding-right:0; }
.hiw-step + .hiw-step { padding-left:32px; }
.hiw-step .n { font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-muted); }
.hiw-step h3 { font-size:22px; margin:12px 0 0; }
.hiw-step p { font-size:14px; color:var(--text-secondary); margin:10px 0 0; }

/* editions / cohort fork cards (legacy .fork-grid/.fcard, handoff "cohorts" look) */
.fork-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; margin-top:32px; }
.fcard { border-left:1px solid var(--border-default); padding-left:40px; }
.fcard:first-child { border-left:none; padding-left:0; }
.fcard .num { font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--text-muted); }
.fcard h4 { font-size:24px; margin:10px 0 0; }
.fcard p { font-size:14px; color:var(--text-secondary); margin:10px 0 0; line-height:1.6; }
.fcard a { display:inline-block; font-size:14px; font-weight:600; margin-top:12px; color:var(--accent); }
.fcard a:hover { color:var(--accent-hover); }
.fcard .tagline { font-family:var(--font-mono); font-size:9.5px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--faint); display:block; margin-top:14px; }

/* tool tour — 2 cards */
.tools { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; }
.tool { background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:28px; }
.tool .mono { color:var(--text-muted); }
.tool h3 { font-size:22px; margin:10px 0 0; }
.tool p { font-size:14px; color:var(--text-secondary); margin:10px 0 0; }
.tool a { display:inline-block; font-size:14px; font-weight:600; margin-top:14px; color:var(--accent); }

/* reader stories (held until real quotes exist) */
.quotes { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-top:36px; }
.quote { background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:24px; display:flex; flex-direction:column; gap:14px; }
.quote p { font-size:15px; line-height:1.5; margin:0; }
.quote .who { font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-muted); margin-top:auto; }

/* methodology cards */
.methods { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-top:32px; }
.method { border-top:3px solid var(--ink-1); padding-top:16px; }
.method h4 { font-size:16px; margin:0; }
.method p { font-size:13px; color:var(--text-secondary); margin:8px 0 0; }

/* pricing */
.pricing { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; max-width:880px; }
.plan { border:1px solid var(--border-strong); border-radius:var(--radius-lg); padding:32px; background:var(--surface-card); }
.plan.featured { border-color:var(--accent); border-width:2px; }
.plan h3 { font-size:22px; margin:8px 0 0; }
.plan .price { font-family:var(--font-display); font-weight:700; font-size:40px; letter-spacing:var(--tracking-display); margin-top:12px; }
.plan .price small { font-family:var(--font-body); font-weight:400; font-size:14px; color:var(--text-muted); }
.plan ul { list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:10px; }
.plan li { font-size:14px; color:var(--text-secondary); padding-left:22px; position:relative; }
.plan li::before { content:"—"; position:absolute; left:0; color:var(--accent); }

/* FAQ */
.faq { margin-top:32px; max-width:760px; }
.faq details { border-top:1px solid var(--border-default); }
.faq details:last-child { border-bottom:1px solid var(--border-default); }
.faq summary { font-size:16px; font-weight:600; padding:18px 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--font-mono); color:var(--text-muted); font-size:16px; }
.faq details[open] summary::after { content:"−"; }
.faq details p { font-size:14px; color:var(--text-secondary); margin:0 0 18px; max-width:640px; }

/* ---------- 7. FIGURE CARD, GAUGE, BARS ---------- */
.fig { border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden; margin-top:28px; background:var(--surface-card); box-shadow:var(--shadow-raised); }
.fig-head { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; background:var(--fig-bg); color:var(--fig-tx); padding:10px 18px; display:flex; justify-content:space-between; }
.fig-body { padding:32px 36px; display:grid; grid-template-columns:200px 1fr; gap:40px; }
.gauge { width:168px; height:168px; border-radius:50%; background:conic-gradient(var(--accent) 0 41%, var(--warning) 41% 72%, var(--track) 72% 100%); display:grid; place-items:center; }
.gauge .in { width:122px; height:122px; border-radius:50%; background:var(--surface-card); display:grid; place-items:center; text-align:center; }
.gauge b { font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:var(--tracking-display); }
.gauge small { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); display:block; margin-top:2px; }
.fig h3 { font-size:26px; margin-bottom:4px; }
.fig .role { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); margin-bottom:24px; }
.bar { margin-bottom:15px; }
.bar .lbl { display:flex; justify-content:space-between; font-family:var(--font-body); font-size:13.5px; font-weight:600; margin-bottom:6px; }
.bar .lbl span:last-child { font-family:var(--font-mono); font-weight:400; color:var(--text-muted); }
.track { height:9px; background:var(--track); border-radius:5px; overflow:hidden; }
.fill { height:100%; border-radius:5px; }
.fig .cite { margin-top:18px; font-size:14px; color:var(--text-secondary); }
.fig .cite a { border-bottom:2px solid var(--accent); font-family:var(--font-body); font-weight:600; font-size:12.5px; }
.fig-foot { border-top:1px solid var(--border-default); padding:10px 18px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); display:flex; justify-content:space-between; }

/* shared report bars (handoff naming, used on home sample card) */
.bar-row { display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; }
.bar-track { height:8px; background:var(--surface-sunken); border-radius:4px; overflow:hidden; }
.bar-fill { height:100%; border-radius:4px; }

/* ---------- 8. SUBSCRIBE BAND & ARTICLE CARDS ---------- */
.band { border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden; margin-top:28px; display:grid; grid-template-columns:1fr 340px; background:var(--surface-card); box-shadow:var(--shadow-raised); }
.band-left { padding:34px 38px; border-right:1px solid var(--border-default); }
.band-left .kicker { margin-bottom:12px; }
.band-left h3 { font-size:30px; line-height:1.05; }
.band-left p { font-size:15px; color:var(--text-secondary); margin-top:12px; line-height:1.55; max-width:440px; }
.band-right { padding:34px 32px; background:var(--surface-sunken); display:flex; flex-direction:column; justify-content:center; }
.band-right input { width:100%; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface-card); color:var(--text-body); font-family:var(--font-body); font-size:14px; padding:13px 14px; margin-bottom:10px; }
.band-right button { width:100%; background:var(--accent); color:var(--text-on-accent); border:none; border-radius:var(--radius-sm); font-family:var(--font-body); font-weight:600; font-size:14px; padding:14px; cursor:pointer; transition:.2s; }
.band-right button:hover { background:var(--accent-hover); }
.band-right small { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-top:10px; text-align:center; }

.arts { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-top:28px; }
.art { background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:24px; }
.art .tag { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.art h5 { font-size:17px; line-height:1.25; margin:10px 0; }
.art h5:hover { color:var(--accent); cursor:pointer; }
.art p { font-size:13.5px; color:var(--text-secondary); line-height:1.55; }
.art .dt { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); display:block; margin-top:12px; }

/* ---------- 9. FOOTER ---------- */
footer.footer { background:var(--chrome-bg); color:var(--chrome-tx); margin-top:72px; }
footer.footer a { color:var(--chrome-mut); text-decoration:none; font-size:14px; }
footer.footer a:hover { color:#fff; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding:64px 0 48px; }
.foot-grid h6 { font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--chrome-faint); margin-bottom:14px; }
.foot-grid ul { list-style:none; }
.foot-grid li { padding:4px 0; }
.foot-wordmark { font-family:var(--font-display); font-weight:400; letter-spacing:-0.01em; font-size:20px; color:var(--chrome-tx); }
.foot-wordmark b { font-weight:800; letter-spacing:-0.03em; color:var(--chrome-accent); }
.colophon { font-size:13px; color:var(--chrome-mut); line-height:1.65; max-width:340px; margin-top:12px; }
.foot-base { border-top:1px solid var(--chrome-hair); display:flex; justify-content:space-between; padding:20px 0; flex-wrap:wrap; gap:12px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--chrome-faint); }

/* ---------- 10. FORMS & STATES ---------- */
.field { margin-bottom:18px; }
.field label { font-family:var(--font-body); font-weight:600; font-size:13px; display:block; margin-bottom:8px; }
.field input, .field select, .field textarea { width:100%; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface-card); color:var(--text-body); font-family:var(--font-body); font-size:14px; padding:13px 14px; }
.field input:focus:not(:focus-visible), .field select:focus:not(:focus-visible), .field textarea:focus:not(:focus-visible) { border-color:var(--text-body); outline:none; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color:var(--text-body); }
.field .hint { font-size:12.5px; color:var(--text-muted); margin-top:6px; }

.state { border:1px solid var(--border-default); border-radius:var(--radius-md); padding:28px 32px; margin-top:28px; text-align:center; background:var(--surface-card); }
.state .st-label { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.state p { font-size:15px; color:var(--text-secondary); margin-top:10px; line-height:1.55; }
.state--error { border-color:var(--danger); }
.loading-rule { height:2px; background:linear-gradient(90deg, var(--track) 0%, var(--accent) 50%, var(--track) 100%); background-size:200% 100%; animation:pressrun 1.2s linear infinite; margin-top:16px; }
@keyframes pressrun { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* ---------- 11. ACCESSIBILITY ---------- */
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- 12. RESPONSIVE ---------- */
@media (max-width:820px) {
  .nav-bar nav.nav-links { display:none; }
  .nav-menu-btn { display:inline-block; }
  .nav-bar .nav { gap:12px; }
  .nav-bar .nav-utils { gap:8px; }
  .nav-bar .nav-utils .nav-account,
  .nav-bar .nav-utils .toggle { display:none; }
  .nav-bar.sticky .nav { height:88px; }
  .nav-bar.sticky .logo { font-size:28px; }
  .nav-bar.sticky.shrunk .nav { height:56px; }
  .nav-bar.sticky.shrunk .logo { font-size:18px; }
  section.sec { padding:56px 0; }
  section.sec h2 { font-size:32px; }
  .statchips { margin-top:-30px; }
  .statchip .chip-num { font-size:26px; }
  .hiw, .fork-grid, .tools, .quotes, .methods, .pricing, .arts, .band { grid-template-columns:1fr; }
  .hiw { border-top:none; }
  .hiw-step { border-right:none; border-top:1px solid var(--border-default); padding:20px 0; }
  .hiw-step + .hiw-step { padding-left:0; }
  .fcard { border-left:none; padding-left:0; border-top:1px solid var(--border-default); padding-top:24px; }
  .fcard:first-child { border-top:none; padding-top:0; }
  .split-2 { grid-template-columns:1fr !important; }
  .fig-body { grid-template-columns:1fr; }
  .band-left { border-right:none; border-bottom:1px solid var(--border-default); }
  .foot-grid { grid-template-columns:1fr 1fr; gap:28px; padding:44px 0 36px; }
}
@media (max-width:640px) {
  .wrap { padding:0 20px; }
  .fig-body { padding:24px 20px; }
  .band-left, .band-right { padding:26px 22px; }
}
@media (max-width:400px) {
  .wrap { padding:0 16px; }
  section.sec h2 { font-size:28px; }
  .nav-bar .nav-utils .nav-account { display:none; }
}

/* ---------- 13. ONBOARDING OVERLAY + COHORT RETUNING (byn2.profile.cohort) ---------- */
#onboarding-root { position:relative; z-index:60; }

.onboard-panel {
  position:fixed;
  right:24px;
  bottom:24px;
  width:360px;
  max-width:calc(100vw - 32px);
  background:var(--surface-card);
  color:var(--text-body);
  border:1px solid var(--border-strong);
  border-top:3px solid var(--accent);
  border-radius:var(--radius-md);
  box-shadow:0 12px 40px var(--shadow);
  padding:22px 24px 24px;
  z-index:61;
}

.onboard-x {
  position:absolute;
  top:10px;
  right:12px;
  border:none;
  background:none;
  color:var(--text-muted);
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  padding:4px 6px;
}
.onboard-x:hover { color:var(--accent); }

.onboard-kicker {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 8px;
}

.onboard-q {
  font-family:var(--font-display);
  font-weight:700;
  font-size:21px;
  letter-spacing:-.01em;
  line-height:1.15;
  margin:0 0 16px;
}

.onboard-options { display:flex; flex-direction:column; gap:8px; }

.onboard-opt {
  text-align:left;
  font-family:var(--font-body);
  font-size:15px;
  color:var(--text-body);
  background:var(--surface-card);
  border:1px solid var(--border-default);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.onboard-opt:hover { border-color:var(--text-body); }
.onboard-opt:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }

@media (max-width:640px) {
  .onboard-panel { right:8px; left:8px; bottom:8px; width:auto; max-width:none; }
}

@media (prefers-reduced-motion: no-preference) {
  .onboard-panel { animation:onboard-in .2s ease-out; }
  @keyframes onboard-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
}

/* Cohort-specific hero line (revealed by body[data-cohort]) */
.hero-cohort-note { display:none; color:rgba(255,255,255,0.85); margin-top:12px; font-size:14px; }
body[data-cohort="displaced"] .hero-cohort-note[data-for="displaced"],
body[data-cohort="decider"]   .hero-cohort-note[data-for="decider"],
body[data-cohort="hedger"]    .hero-cohort-note[data-for="hedger"] { display:block; }

/* Emphasize the fork card matching the reader's cohort */
body[data-cohort] .fcard { transition:background .2s; }
body[data-cohort="displaced"] .fcard:has(a[data-fork="displaced"]),
body[data-cohort="decider"]   .fcard:has(a[data-fork="decider"]),
body[data-cohort="hedger"]    .fcard:has(a[data-fork="hedger"]) {
  background:var(--surface-sunken);
  box-shadow:inset 3px 0 0 var(--accent);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:18px 18px 18px 40px;
  margin:-18px -18px -18px 0;
}
body[data-cohort="displaced"] .fcard:not(:has(a[data-fork="displaced"])),
body[data-cohort="decider"]   .fcard:not(:has(a[data-fork="decider"])),
body[data-cohort="hedger"]    .fcard:not(:has(a[data-fork="hedger"])) { opacity:.72; }