stays pure text for the home_* source pins (home_test's /

/* home.css — area-scoped styles for index.html (the public front door).
   Palette: action blue #2563eb + teal accents on a dark shell (#0d0e12/#11131a).
   No neon. All hover motion is compositor-only (transform/opacity) and gated
   behind prefers-reduced-motion: no-preference. Contrast pinned in home_test.js. */

/* Self-hosted faces — CSP font-src 'self', font-display:swap (no FOIT). */
@font-face{font-family:'Space Grotesk';font-weight:500 800;font-display:swap;src:url('./fonts/space-grotesk-latin.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:400 700;font-display:swap;src:url('./fonts/jetbrains-mono-latin.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:400 700;font-display:swap;src:url('./fonts/inter-400.woff2') format('woff2');}

:root{
  --serif:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --sans:'Inter',-apple-system,system-ui,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --t-cap:0.75rem; --t-sm:0.875rem; --t-base:1rem; --t-lg:1.25rem; --t-xl:1.75rem; --t-hero:clamp(2.4rem,8.5vw,4rem);
  --s-05:4px; --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-6:48px; --s-8:64px;
  --r:14px; --r-sm:10px; --ring:2px; --dur:160ms;
  /* dark shell */
  --bg:#0d0e12; --surface:#11131a; --surface-2:#0a0b0e;
  --text:#eef2f8; --muted:#9aa6b8;
  --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.16);
  /* action blue + teal (verified WCAG AA in home_test.js) */
  --action:#2563eb; --action-hover:#1d4ed8; --on-action:#ffffff;
  --action-ink:#60a5fa; --teal-ink:#2dd4bf;
  --shadow-blue:rgba(37,99,235,0.35);
}
[data-theme="light"]{
  --bg:#f4f6fa; --surface:#ffffff; --surface-2:#eef1f6;
  --text:#0e1116; --muted:#4a5568;
  --line:rgba(8,12,20,0.10); --line-strong:rgba(8,12,20,0.18);
  --action:#2563eb; --action-hover:#1d4ed8; --on-action:#ffffff;
  --action-ink:#1e40af; --teal-ink:#0f766e;
  --shadow-blue:rgba(37,99,235,0.22);
}
/* obsidian — deepest premium black + gold plasma ink (a DARKER dark variant).
   Keyed on the [data-theme] attribute home.js sets on <html> (NOT body classes).
   Blue --action kept so the white-on-action CTA stays AA; gold drives the accent ink.
   All pairs computed >= AA in theme_polarity_contract_test.js. */
[data-theme="obsidian"]{
  --bg:#050506; --surface:#0d0d0f; --surface-2:#141416;
  --text:#f5f5f7; --muted:#a1a1aa;
  --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.14);
  --action:#2563eb; --action-hover:#1d4ed8; --on-action:#ffffff;
  --action-ink:#ffba08; --teal-ink:#f5b301;
  --shadow-blue:rgba(255,186,8,0.20);
}
/* clinical — clean instrument WHITE + green accent (a LIGHT variant, not black). */
[data-theme="clinical"]{
  --bg:#f7faf9; --surface:#ffffff; --surface-2:#eef4f2;
  --text:#0d1512; --muted:#3f4f49;
  --line:rgba(4,120,87,0.12); --line-strong:rgba(4,120,87,0.20);
  --action:#047857; --action-hover:#036249; --on-action:#ffffff;
  --action-ink:#046a4e; --teal-ink:#047857;
  --shadow-blue:rgba(4,120,87,0.18);
}

*{box-sizing:border-box;}
html{color-scheme:dark;} [data-theme="light"],[data-theme="clinical"]{color-scheme:light;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased;}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important;} }
:focus-visible{outline:var(--ring) solid var(--action-ink); outline-offset:3px; border-radius:2px;}

/* --- skip link (a11y) --- */
.skip-link{position:absolute; top:-100px; left:var(--s-2); z-index:100; background:var(--action); color:var(--on-action); padding:var(--s-1) var(--s-3); border-radius:var(--r-sm); font-family:var(--sans); font-weight:700; font-size:var(--t-sm); text-decoration:none; transition:top var(--dur);}
.skip-link:focus{top:var(--s-2);}

.shell{max-width:1120px; margin:0 auto; padding:var(--s-4) var(--s-3) var(--s-8); counter-reset:sec;}

/* --- top bar --- */
.topbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-2); margin:0 0 var(--s-6); padding-bottom:var(--s-2); border-bottom:1px solid var(--line);}
.wordmark{font-family:var(--mono); font-weight:700; letter-spacing:0.2em; font-size:var(--t-sm); text-transform:uppercase; color:var(--text); text-decoration:none;}
.wordmark b{color:var(--action-ink); font-weight:700;}
.topnav{display:flex; gap:var(--s-1); flex:none;}
.topnav a{font-family:var(--mono); font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; padding:0 var(--s-1); border-radius:var(--r-sm); transition:color var(--dur),background var(--dur);}
.topnav a:hover{color:var(--text); background:var(--surface);}
.topnav a:focus-visible{outline:var(--ring) solid var(--action-ink); outline-offset:2px;}
@media (max-width:640px){ .topnav{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); flex:1 1 100%; min-width:0; gap:2px;} .topnav a{justify-content:center; padding:0 2px;} }
@media (min-width:641px) and (max-width:900px){ .topnav{gap:2px;} .topnav a{padding:0 6px; letter-spacing:0.04em;} .theme-toggle{padding:0 var(--s-1);} }
.theme-toggle{font-family:var(--mono); font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.08em; background:transparent; color:var(--muted); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:var(--s-1) var(--s-2); min-height:44px; cursor:pointer; transition:color var(--dur),border-color var(--dur); flex:none;}
.theme-toggle:hover{color:var(--text); border-color:var(--action-ink);}
.theme-toggle:focus-visible{outline:2px solid var(--action-ink); outline-offset:2px;}
/* .linklike — the inline annual-billing switches ("or $29.88/yr"). Standalone <button>s,
   so the WCAG 2.5.8 inline exception does not apply; UA default is 20px tall. Lift to 24px. */
.linklike{min-height:24px; padding:4px 6px; vertical-align:middle;}

/* --- hero (dark instrument stage + subtle deep-blue glow — 2026-07-17) ---
   The old bright-blue slab (linear-gradient #1d4ed8/#2563eb/#1e40af) is retired.
   The hero is now a DARK stage that stays dark in ALL FOUR themes — its bg is
   hardcoded (never a theme token) and is never re-defined per [data-theme], so
   the white headline / #dbeafe subline / dark AI-readout card stay legible in
   every theme, INCLUDING the light + clinical light-shells, where a deliberate
   dark band reads as a premium cockpit stage rather than a broken slab. A
   low-opacity radial glow (deep action-blue rgba(37,99,235) -> teal
   rgba(45,212,191), fading to transparent) sits behind the readout (top-right) —
   a quiet blue energy, not a flat fill. Text contrast on the dark base is
   theme-invariant: #fff ~18:1, #dbeafe ~15:1 (both far above AA everywhere).
   Pinned in hero_stage_scroll_reveal_contract_test.js. CSS-only, markup untouched. */
.hero{margin:0 0 var(--s-6); display:grid; grid-template-columns:minmax(0,52ch); gap:0 var(--s-6); align-items:start;
  background:radial-gradient(118% 88% at 82% 20%, rgba(37,99,235,0.32) 0%, rgba(45,212,191,0.12) 30%, rgba(9,10,14,0) 64%), linear-gradient(158deg,#12141c 0%,#0b0c11 58%,#090a0e 100%);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:calc(var(--r) + 10px); padding:clamp(28px,5vw,64px);
  box-shadow:0 32px 90px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.05) inset;}
@media (min-width:900px){ .hero{grid-template-columns:minmax(0,52ch) minmax(300px,420px);} .hero > *{grid-column:1;} .hero .readout{grid-column:2; grid-row:1 / span 7;} }
.eyebrow{font-family:var(--mono); font-size:var(--t-cap); letter-spacing:0.22em; text-transform:uppercase; color:#99f6e4; margin:0 0 var(--s-2); display:flex; align-items:center; gap:var(--s-1);}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:#99f6e4; display:inline-block;}
/* Light theme: the plan-entry eyebrow sits on --surface (#fff), where the #99f6e4 hero
   teal computes 1.26:1. Re-point it to --teal-ink (#0f766e = 5.43:1 on white). Scoped so
   the hero eyebrow (on the blue gradient) keeps its light teal. */
[data-theme="light"] .plan-entry .eyebrow{color:var(--teal-ink);}
[data-theme="light"] .plan-entry .eyebrow .dot{background:var(--teal-ink);}
/* clinical shares light's white --surface, so the #99f6e4 hero teal collapses there
   too (1.2:1) — re-point to clinical --teal-ink (#047857 = 5.0:1 on white). */
[data-theme="clinical"] .plan-entry .eyebrow{color:var(--teal-ink);}
[data-theme="clinical"] .plan-entry .eyebrow .dot{background:var(--teal-ink);}
/* FOLD-AWARE HERO (cycle 36). The old clamp was width-aware only: at 1440x900 the
   10vw term resolved to 144px, clamped to 6.5rem = 104px, and the headline occupied
   489px of a 900px viewport — pushing the sub, the price line and the primary CTA to
   y=1014, i.e. 114px BELOW the fold. A desktop stranger's first screen had no action
   on it. The vh term makes the promise scale to the screen it is actually on, so the
   headline and the thing to do next stay on the same screen at every viewport.
   Mobile is unchanged: at 390 the 10vw term (39px) already loses to the 3rem floor. */
.hero h1{font-family:var(--serif); font-weight:800; font-size:clamp(3rem,min(10vw,8.5vh),6.5rem); line-height:0.94; letter-spacing:-0.03em; margin:0 0 var(--s-3); color:#ffffff;}
.hero-sub{color:#dbeafe; font-size:clamp(1.1rem,2.2vw,1.5rem); margin:0 0 var(--s-3); max-width:44ch;}
.hero .free-banner{background:rgba(10,11,14,0.35); border-color:rgba(255,255,255,0.28); border-left-color:#99f6e4; color:#ffffff;}
.hero .free-banner strong{color:#99f6e4;}
.hero .btn-primary{background:#ffffff; color:#1e3a8a; font-size:1.1rem; min-height:58px; padding:0 40px; box-shadow:0 16px 48px rgba(0,0,0,0.35);}
.hero .btn-primary:hover{background:#eff6ff;}
.hero .btn-ghost{color:#ffffff; border-color:rgba(255,255,255,0.5);}
.hero .btn-ghost:hover{border-color:#ffffff; color:#ffffff;}
.hero .proof{margin-bottom:var(--s-4); color:#dbeafe;}
.hero .proof li::before{background:#99f6e4;}
.hero .disclose > summary{color:#dbeafe;}
.hero .disclose > summary:hover{color:#ffffff;}
.hero .disclose > summary::after{color:#99f6e4;}
.hero .disclose .body{color:#dbeafe;}
.hero .disclose{border-top-color:rgba(255,255,255,0.22);}

/* --- sample readout panel (taste-fork A, operator-chosen 2026-07-07) ---
   AI-forward glance card: labeled SAMPLE, honest footer. Theme-variable driven
   so both shells work; elevation via static shadow (no animated shadow). */
/* #returningReadout pins the dark instrument surface (#0a0b0e) in every theme, but its
   links/text inherit theme tokens — so in light theme --action-ink (#1e40af) and --text
   (#0e1116) render near-invisible on black (2.26:1 and worse). Pin the dark-shell tokens
   on the panel so every descendant resolves against the surface it actually sits on. */
/* Every .readout is a permanently DARK instrument card (hardcoded #0a0b0e below), so the
   dark ink tokens are pinned for ALL of them — pinning only #returningReadout left every
   other readout rendering light-theme ink on the dark card (1.04:1, invisible) the moment
   the theme left dark. Measured live 2026-07-30. */
.readout{--text:#eef2f8; --muted:#9aa6b8; --action-ink:#60a5fa; --teal-ink:#2dd4bf; --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.16); color:var(--text);}
/* Readout separation: kept as a FIXED dark instrument panel (#0a0b0e shell + teal
   top rule — pinned in home_readout_contract_test.js). A teal inner-glow ring + a
   soft blue halo lift it cleanly off the hero's radial glow behind it. */
.readout{margin-top:var(--s-3); background:#0a0b0e; border:1px solid rgba(255,255,255,0.16); border-top:2px solid #2dd4bf; border-radius:var(--r); padding:var(--s-3) var(--s-3) var(--s-2); font-family:var(--mono); box-shadow:0 32px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(45,212,191,0.16), 0 0 44px rgba(37,99,235,0.14), inset 0 1px 0 rgba(255,255,255,0.05);}
@media (min-width:900px){ .readout{margin-top:0;} }
.readout-tag{margin:0 0 var(--s-2); padding-bottom:var(--s-1); border-bottom:1px solid rgba(255,255,255,0.10); font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.2em; color:#2dd4bf;}
.readout-call{margin:0 0 var(--s-2); display:flex; flex-direction:column; gap:4px;}
.readout-k{font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.14em; color:#9aa6b8;}
.readout-call strong{font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.1; color:#eef2f8; font-weight:700;}
.readout-rows{list-style:none; margin:0 0 var(--s-2); padding:0; display:flex; flex-direction:column; gap:var(--s-1); font-size:var(--t-sm);}
.readout-rows li{display:flex; justify-content:space-between; gap:var(--s-2); padding:6px 0; border-bottom:1px dashed rgba(255,255,255,0.10);}
.readout-rows li:last-child{border-bottom:none;}
.readout-rows span{color:#9aa6b8;}
.readout-rows b{color:#2dd4bf; font-weight:700; text-align:right; font-size:1.05rem;}
.readout-note{margin:0; padding-top:var(--s-1); border-top:1px solid rgba(255,255,255,0.10); font-size:var(--t-cap); color:#9aa6b8;}

/* --- free promise banner --- */
.free-banner{display:inline-flex; align-items:center; gap:var(--s-2); background:linear-gradient(90deg, rgba(37,99,235,0.14), rgba(45,212,191,0.10)); border:1px solid var(--line-strong); border-left:3px solid var(--action); border-radius:var(--r-sm); padding:var(--s-2) var(--s-3); margin:0 0 var(--s-4); font-family:var(--mono); font-size:var(--t-sm); color:var(--text);}
.free-banner strong{color:var(--action-ink); font-weight:700;}

/* --- CTA row (one-tap entry) --- */
.cta-row{display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center; margin:0 0 var(--s-4);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s-1); min-height:52px; padding:0 var(--s-4); font-family:var(--serif); font-weight:700; font-size:var(--t-base); text-decoration:none; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; transition:transform var(--dur),background var(--dur),border-color var(--dur),color var(--dur);}
.btn-primary{background:var(--action); color:var(--on-action); box-shadow:0 6px 20px var(--shadow-blue);}
.btn-primary:hover{background:var(--action-hover);}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--line-strong);}
/* .btn-buy: purchase CTA inside a pricing card. Looks primary but is scoped to the pricing
   grid, so the page-level Hick's-law primary-singularity budget (hero + free-card) stays intact. */
.btn-buy{background:var(--action); color:var(--on-action); box-shadow:0 6px 20px var(--shadow-blue);}
.btn-buy:hover{filter:brightness(1.06);}
.btn-ghost:hover{border-color:var(--action-ink); color:var(--action-ink);}
/* --- returning-member sign-in prompt (quiet, hero-adjacent; not a competing CTA) --- */
.hero-signin{font-family:var(--mono); font-size:var(--t-cap); letter-spacing:0.04em; color:var(--muted); margin:calc(-1 * var(--s-4)) 0 var(--s-6);}
.hero-signin a{color:var(--action-ink); text-decoration:underline; text-underline-offset:3px; min-height:44px; display:inline-flex; align-items:center; padding:0 4px; border-radius:var(--r-sm);}
.hero-signin a:hover{color:var(--text);}
.hero-signin a:focus-visible{outline:var(--ring) solid var(--action-ink); outline-offset:2px;}
/* --- proof strip (honest, no dark patterns) --- */
.proof{display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-3); list-style:none; margin:0 0 var(--s-8); padding:0; font-family:var(--mono); font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.06em; color:var(--muted);}
.proof li{display:flex; align-items:center; gap:6px;}
.proof li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--teal-ink);}

/* --- stats band (honest numbers, no interactive elements) --- */
.stats-band{display:flex; gap:0; margin:0 0 var(--s-6); padding:var(--s-3) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); list-style:none;}
.stats-band li{flex:1; text-align:center; position:relative;}
.stats-band li:not(:last-child)::after{content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); height:28px; width:1px; background:var(--line);}
.stats-band strong{display:block; font-family:var(--serif); font-weight:800; font-size:clamp(1.4rem,3vw,1.8rem); color:var(--text); letter-spacing:-0.02em;}
.stats-band span{display:block; font-family:var(--mono); font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-top:4px;}
@media (max-width:520px){ .stats-band{flex-wrap:wrap; gap:var(--s-2);} .stats-band li{flex:1 1 40%;} .stats-band li:not(:last-child)::after{display:none;} }

/* --- section heading (numbered 01/02/03 via counter — no HTML change) --- */
.sec-head{font-family:var(--mono); font-size:var(--t-base); font-weight:700; text-transform:uppercase; letter-spacing:0.22em; color:var(--text); margin:0 0 var(--s-3); padding-top:var(--s-6); border-top:1px solid var(--line); display:flex; align-items:center; gap:var(--s-2);}
.sec-head::before{counter-increment:sec; content:"0" counter(sec); font-weight:700; letter-spacing:0.05em; color:var(--on-action); background:var(--action); border:1px solid transparent; border-radius:6px; padding:4px 10px; line-height:1; flex:none; box-shadow:0 6px 20px var(--shadow-blue);}

/* --- surfaces grid (glance + progressive disclosure) --- */
.surfaces{display:grid; grid-template-columns:1fr; gap:var(--s-2); margin:0 0 var(--s-6);}
@media (min-width:760px){ .surfaces{grid-template-columns:repeat(3,1fr); gap:var(--s-3);} }
.surface{position:relative; background:linear-gradient(170deg,var(--surface) 0%,var(--surface-2) 100%); border:1px solid var(--line-strong); border-radius:calc(var(--r) + 6px); padding:var(--s-4); display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(37,99,235,0.06);}
.surface::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:calc(var(--r) + 6px) calc(var(--r) + 6px) 0 0; background:linear-gradient(90deg,var(--action),var(--teal-ink)); opacity:0.9;}
@media (prefers-reduced-motion:no-preference){
  .surface{transition:transform var(--dur);}
  .surface:hover{transform:translateY(-4px);}
}
.surface .k{font-family:var(--mono); font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.18em; color:var(--teal-ink); margin:0 0 var(--s-1);}
.surface h2{font-family:var(--serif); font-weight:800; font-size:clamp(1.75rem,3vw,2.4rem); margin:0 0 var(--s-1); letter-spacing:-0.025em; color:var(--text);}
.surface .glance{color:var(--muted); font-size:var(--t-sm); margin:0 0 var(--s-3);}
.open-link{margin-top:auto; align-self:flex-start; min-height:44px; display:inline-flex; align-items:center; gap:6px; color:var(--action-ink); text-decoration:none; font-family:var(--mono); font-size:var(--t-sm); font-weight:700;}
.open-link .arrow{transition:transform var(--dur);}

/* --- progressive disclosure (details/summary) --- */
.disclose{margin-top:var(--s-2); border-top:1px solid var(--line); padding-top:var(--s-1);}
.disclose > summary{cursor:pointer; list-style:none; min-height:44px; display:flex; align-items:center; gap:var(--s-1); font-family:var(--mono); font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.08em; color:var(--muted);}
.disclose > summary::-webkit-details-marker{display:none;}
.disclose > summary::after{content:"+"; margin-left:auto; font-size:var(--t-base); color:var(--action-ink); line-height:1;}
.disclose[open] > summary::after{content:"\2212";}
.disclose > summary:hover{color:var(--text);}
.disclose .body{color:var(--muted); font-size:var(--t-sm); line-height:1.6; padding:var(--s-1) 0 var(--s-1);}

/* --- sample conversion path (taste-fork C, operator-chosen 2026-07-07) ---
   Hero-A readout vocabulary: gradient shell, teal-top rule, elevation. Shows the
   PATH as equal stage rows — NEVER proportional widths or descending-bar geometry
   (that would imply conversion data we don't have pre-revenue). SAMPLE-tagged;
   the anti-proportion rule is enforced structurally by front_door_funnel_contract_test.js. */
.funnel{margin:0 0 var(--s-6); background:linear-gradient(160deg,var(--surface),var(--surface-2)); border:1px solid var(--line-strong); border-top:2px solid var(--teal-ink); border-radius:var(--r); padding:var(--s-3) var(--s-3) var(--s-2); box-shadow:0 24px 60px rgba(0,0,0,0.35), 0 8px 24px var(--shadow-blue);}
.funnel-tag{font-family:var(--mono); font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.18em; color:var(--teal-ink); margin:0 0 var(--s-2); padding-bottom:var(--s-1); border-bottom:1px solid var(--line);}
.funnel-stages{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0;}
.fstage{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2); padding:var(--s-2) 0; border-bottom:1px solid var(--line);}
.fstage:last-child{border-bottom:none;}
.fnum{font-family:var(--mono); font-size:var(--t-cap); color:var(--action-ink); font-weight:700; flex:none;}
.fname{font-family:var(--serif); font-weight:700; color:var(--text);}
.fdesc{font-size:var(--t-sm); color:var(--muted); margin-left:auto; text-align:right;}
/* stage-3 paid CTA — salient pill; stage rows stay neutral (data restrained, action loud).
   Reuses the canonical --action-hover CTA token (same in both themes) for white-on-blue at a
   comfortable margin above the plain --action pill (contrast floor pinned in the funnel contract). */
.cta-chip{margin-left:var(--s-2); display:inline-flex; align-items:center; gap:5px; min-height:44px; padding:0 var(--s-3); font-family:var(--serif); font-size:var(--t-sm); font-weight:700; color:var(--on-action); background:var(--action-hover); border-radius:var(--r-sm); text-decoration:none; white-space:nowrap; flex:none; transition:transform var(--dur);}
@media (max-width:600px){ .cta-chip{margin-left:0; margin-top:var(--s-2); flex-basis:100%; justify-content:center;} }

/* --- why section value props --- */
.why-grid{display:grid; grid-template-columns:1fr; gap:var(--s-2); margin:0 0 var(--s-4);}
@media (min-width:760px){ .why-grid{grid-template-columns:repeat(3,1fr); gap:var(--s-3);} }
.why-card{background:linear-gradient(170deg,var(--surface) 0%,var(--surface-2) 100%); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:var(--s-3); box-shadow:0 8px 24px rgba(0,0,0,0.20);}
.why-card h3{font-family:var(--serif); font-weight:700; font-size:var(--t-base); margin:0 0 var(--s-05); color:var(--text); letter-spacing:-0.01em;}
.why-card p{margin:0; color:var(--muted); font-size:var(--t-sm); line-height:1.5;}
.why .glance{color:var(--muted); font-size:var(--t-base); margin:0 0 var(--s-2);}

/* --- free section --- */
.free-card{background:linear-gradient(170deg,var(--surface) 0%,var(--surface-2) 100%); border:1px solid var(--line-strong); border-radius:var(--r); padding:var(--s-4); margin:0 0 var(--s-6); box-shadow:0 16px 40px rgba(0,0,0,0.25);}
.free-card h2{font-family:var(--serif); font-weight:800; font-size:var(--t-xl); margin:0 0 var(--s-1); letter-spacing:-0.02em;}
.free-card .glance{color:var(--muted); font-size:var(--t-base); margin:0 0 var(--s-3);}

/* --- footer disclaimer --- */
.site-foot{margin:var(--s-6) 0 0; padding-top:var(--s-4); border-top:1px solid var(--line);}
.foot-cols{display:grid; grid-template-columns:1fr; gap:var(--s-3); margin:0 0 var(--s-4);}
@media (min-width:560px){ .foot-cols{grid-template-columns:repeat(3,1fr);} }
.foot-col{display:flex; flex-direction:column; gap:var(--s-05);}
.foot-label{font-family:var(--mono); font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.12em; color:var(--faint, var(--muted)); margin:0 0 var(--s-05); font-weight:700;}
.foot{color:var(--muted); font-size:var(--t-cap); line-height:1.7; margin:var(--s-3) 0 0; padding-top:var(--s-3); border-top:1px solid var(--line); max-width:80ch;}
.foot-link{color:var(--action-ink); text-decoration:underline; text-underline-offset:2px; min-height:44px; display:inline-flex; align-items:center;}
.foot-link:hover{color:var(--text);}
.foot-link:focus-visible{outline:2px solid var(--action-ink); outline-offset:2px;}

/* --- FAQ section --- */
.faq{display:flex; flex-direction:column; gap:var(--s-1); margin:0 0 var(--s-6);}

/* --- tools preview section --- */
.tools-preview{background:linear-gradient(170deg,var(--surface) 0%,var(--surface-2) 100%); border:1px solid var(--line-strong); border-radius:var(--r); padding:var(--s-4); margin:0 0 var(--s-6); box-shadow:0 16px 40px rgba(0,0,0,0.25);}
.tools-preview .glance{color:var(--muted); font-size:var(--t-base); margin:0 0 var(--s-3); max-width:60ch;}
.tools-grid{display:grid; grid-template-columns:1fr; gap:var(--s-2); margin:0 0 var(--s-3);}
@media (min-width:560px){ .tools-grid{grid-template-columns:repeat(2,1fr); gap:var(--s-2);} }
@media (min-width:860px){ .tools-grid{grid-template-columns:repeat(3,1fr);} }
.tool-card{display:flex; flex-direction:column; gap:4px; min-height:44px; padding:var(--s-2) var(--s-3); border:1px solid var(--line-strong); border-left:3px solid var(--action); border-radius:var(--r-sm); background:var(--surface-2); color:var(--text); text-decoration:none; transition:transform var(--dur),border-color var(--dur);}
.tool-card strong{font-family:var(--serif); font-weight:700; font-size:var(--t-base); color:var(--text);}
.tool-card span{font-family:var(--sans); font-size:var(--t-sm); color:var(--muted); line-height:1.4;}
.tool-card:hover{border-left-color:var(--teal-ink); color:var(--action-ink);}
.tool-card:hover strong{color:var(--action-ink);}
.tool-card:focus-visible{outline:var(--ring) solid var(--action-ink); outline-offset:2px;}
@media (prefers-reduced-motion:no-preference){ .tool-card:hover{transform:translateY(-2px);} }

/* --- pricing comparison section --- */
.pricing{margin:0 0 var(--s-6);}
.pricing-grid{display:grid; grid-template-columns:1fr; gap:var(--s-2);}
@media (min-width:760px){ .pricing-grid{grid-template-columns:repeat(3,1fr); gap:var(--s-3);} }
.price-card{background:linear-gradient(170deg,var(--surface) 0%,var(--surface-2) 100%); border:1px solid var(--line-strong); border-radius:var(--r); padding:var(--s-4); display:flex; flex-direction:column; box-shadow:0 12px 32px rgba(0,0,0,0.25);}
.price-featured{border-color:var(--action); border-width:2px; box-shadow:0 16px 48px rgba(0,0,0,0.35), 0 0 0 1px var(--shadow-blue);}
.price-card h3{font-family:var(--serif); font-weight:800; font-size:var(--t-lg); margin:0 0 var(--s-1); color:var(--text); letter-spacing:-0.02em;}
.price-amt{font-family:var(--serif); font-weight:800; font-size:clamp(2rem,5vw,2.5rem); color:var(--text); margin:0 0 var(--s-3); letter-spacing:-0.03em;}
.price-features{list-style:none; margin:0 0 var(--s-3); padding:0; display:flex; flex-direction:column; gap:var(--s-1);}
.price-features li{font-family:var(--sans); font-size:var(--t-sm); color:var(--muted); line-height:1.5; padding-left:var(--s-2); position:relative;}
.price-features li::before{content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--teal-ink);}
.price-card .btn{margin-top:auto; width:100%;}
.price-note{font-family:var(--mono); font-size:var(--t-cap); color:var(--muted); text-align:center; margin:var(--s-3) 0 0; letter-spacing:0.04em;}

/* --- FAQ section --- */
.faq-item{background:linear-gradient(170deg,var(--surface) 0%,var(--surface-2) 100%); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:var(--s-2) var(--s-3); margin:0; border-top:1px solid var(--line-strong);}
.faq-item > summary{font-family:var(--sans); font-size:var(--t-base); font-weight:700; text-transform:none; letter-spacing:0; color:var(--text); min-height:44px; display:flex; align-items:center; gap:var(--s-2); cursor:pointer; list-style:none;}
.faq-item > summary::-webkit-details-marker{display:none;}
.faq-item > summary::after{content:"+"; margin-left:auto; font-size:var(--t-lg); color:var(--action-ink); line-height:1; font-weight:400;}
.faq-item[open] > summary::after{content:"\2212";}
.faq-item > summary:hover{color:var(--action-ink);}
.faq-item .body{color:var(--muted); font-size:var(--t-sm); line-height:1.6; padding:var(--s-1) 0 var(--s-05);}
@media (prefers-reduced-motion: no-preference){
  .faq-item{transition:border-color var(--dur);}
  .faq-item[open]{border-color:var(--action-ink);}
}

/* --- CTA microcopy --- */
.cta-microcopy{font-family:var(--mono); font-size:var(--t-cap); color:var(--muted); margin:var(--s-1) 0 0; letter-spacing:0.04em;}

/* --- expanded feature descriptions (progressive disclosure) --- */
.feature-expansion{margin:var(--s-4) 0; border-top:1px solid var(--line); padding-top:var(--s-2);}
.feature-expansion > summary{font-family:var(--sans); font-size:var(--t-base); font-weight:700; color:var(--text); min-height:44px; display:flex; align-items:center; gap:var(--s-2); cursor:pointer; list-style:none;}
.feature-expansion > summary::-webkit-details-marker{display:none;}
.feature-expansion > summary::after{content:"+"; margin-left:auto; font-size:var(--t-lg); color:var(--action-ink); line-height:1; font-weight:400;}
.feature-expansion[open] > summary::after{content:"\2212";}
.feature-detail-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s-3); margin-top:var(--s-3);}
.feature-detail{background:linear-gradient(170deg,var(--surface) 0%,var(--surface-2) 100%); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:var(--s-2) var(--s-3);}
.feature-detail h3{font-family:var(--serif); font-weight:700; font-size:var(--t-base); color:var(--text); margin:0 0 var(--s-1);}
.feature-detail .body{color:var(--muted); font-size:var(--t-sm); line-height:1.6; margin:0;}

/* --- motion, gated (compositor-only transform) --- */
@media (prefers-reduced-motion: no-preference){
  .btn:hover{transform:translateY(-2px);}
  .btn:active{transform:translateY(0);}
  .surface{transition:transform var(--dur),border-color var(--dur);}
  .surface:hover{transform:translateY(-3px); border-color:var(--action-ink);}
  .open-link:hover .arrow{transform:translateX(3px);}
  .cta-chip:hover{transform:translateY(-1px);}
}

/* Feature 4 — checkout waitlist (revealed on a gated 403, reuses /api/email-capture). */
.checkout-waitlist{margin:var(--s-4) auto 0; max-width:520px; border:1px solid var(--action, #d97706); border-radius:var(--r, 12px); padding:var(--s-4, 20px); background:var(--surface, #16181d);}
.checkout-waitlist .cw-h{margin:0 0 var(--s-1, 6px); font-weight:800;}
.checkout-waitlist .cw-msg{margin:0 0 var(--s-3, 14px); color:var(--muted, #9aa3af); font-size:var(--t-sm, .9rem);}
.checkout-waitlist .cw-row{display:flex; flex-wrap:wrap; gap:var(--s-2, 10px); margin:0 0 var(--s-2, 10px);}
.checkout-waitlist .cw-row input{flex:1 1 180px; min-height:44px; padding:0 12px; border:1px solid var(--line-strong, #2a2e37); border-radius:var(--r-sm, 8px); background:var(--surface-2, #1c1f26); color:var(--text, #e8eaed);}
.checkout-waitlist .cw-consent{display:flex; gap:8px; align-items:flex-start; font-size:var(--t-sm, .9rem); color:var(--muted, #9aa3af); margin:0 0 var(--s-3, 14px);}
.checkout-waitlist .cw-consent input{margin-top:3px;}
.checkout-waitlist .cw-error{color:#fca5a5; font-size:var(--t-sm, .9rem); margin-top:8px; min-height:1.2em;}

/* Typewriter hero caret (paired with the Option-A typewriter in home.js). The caret
   is a CSS ::after pseudo-element — NEVER an injected child node — so welcome.html's
   <h1> stays pure text for the home_* source pins (home_test's /<h1>[^<]{6,}<\/h1>/).
   Reduced-motion is doubly safe: (1) home.js never adds .tw-typing/.tw-done under
   prefers-reduced-motion, so those users see the full static headline with no caret;
   (2) the global reduced-motion rule at the top of this file already forces
   animation:none, so even a stray caret could never blink. #99f6e4 is the existing
   hero teal accent (no cyan introduced). */
.hero h1.tw-typing::after,
.hero h1.tw-done::after{
  content:"";
  display:inline-block;
  width:0.06em;
  height:0.82em;
  margin-left:0.06em;
  vertical-align:-0.04em;
  background:#99f6e4;
  border-radius:1px;
}
@media (prefers-reduced-motion:no-preference){
  .hero h1.tw-typing::after{ animation:heroCaretBlink 1s steps(1) infinite; }
  .hero h1.tw-done::after{ animation:heroCaretBlink 1.1s steps(1) infinite; }
}
@keyframes heroCaretBlink{ 0%,50%{opacity:1;} 50.01%,100%{opacity:0;} }

/* Looping-rotor caret (paired with the LOOP-TYPEWRITER rotors in home.js: the hero
   eyebrow + the SAMPLE readout call). Same ::after-pseudo approach as the hero caret
   above — NEVER an injected child node, so the eyebrow span and the sample-readout
   <strong> stay pure text for source scans. Motion is doubly safe: home.js adds
   .tw-loop only when prefers-reduced-motion is NOT reduce (else it returns before any
   class/caret), and the global reduced-motion rule at line 39 forces animation:none —
   so a reduced-motion user sees the static default phrase with no caret and no blink.
   currentColor matches each rotor's own ink (teal eyebrow / light readout) so no new
   colour is introduced. Both rotor elements are flex items, so the min-width home.js
   reserves for the longest phrase actually holds — the line never reflows mid-type. */
.eyebrow .tw-rotor.tw-loop::after,
.readout-call strong.tw-loop::after{
  content:"";
  display:inline-block;
  width:0.06em;
  height:0.9em;
  margin-left:0.06em;
  vertical-align:-0.06em;
  background:currentColor;
  border-radius:1px;
}
@media (prefers-reduced-motion:no-preference){
  .eyebrow .tw-rotor.tw-loop::after,
  .readout-call strong.tw-loop::after{ animation:heroCaretBlink 1s steps(1) infinite; }
}

/* --- ASK ECCO — front-page training-coach widget (.ask-ecco) ---
   Theme-token driven (surface/line/ink vars) so all FOUR themes render clean;
   the answer card reuses the FIXED dark .readout instrument panel (same as the
   hero sample readout and #returningReadout), so its light data text stays AA
   in the light + clinical shells too. Tap targets >= 44px; no new colors. */
.ask-ecco{background:linear-gradient(170deg,var(--surface) 0%,var(--surface-2) 100%); border:1px solid var(--line-strong); border-radius:calc(var(--r) + 6px); padding:var(--s-4); margin:0 0 var(--s-6); box-shadow:0 24px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(37,99,235,0.06);}
.ae-kicker{font-family:var(--mono); font-size:var(--t-cap); letter-spacing:0.22em; text-transform:uppercase; color:var(--teal-ink); margin:0 0 var(--s-1); display:flex; align-items:center; gap:var(--s-1);}
.ae-kicker .dot{width:7px; height:7px; border-radius:50%; background:var(--teal-ink); display:inline-block;}
.ae-h{font-family:var(--serif); font-weight:800; font-size:clamp(1.6rem,3.4vw,2.2rem); letter-spacing:-0.02em; color:var(--text); margin:0 0 var(--s-1);}
.ae-sub{color:var(--muted); font-size:var(--t-base); margin:0 0 var(--s-3); max-width:62ch;}
.ae-chips{display:flex; flex-wrap:wrap; gap:var(--s-1); margin:0 0 var(--s-2);}
.ae-chip{font-family:var(--mono); font-size:var(--t-sm); color:var(--action-ink); background:transparent; border:1px solid var(--line-strong); border-radius:999px; min-height:44px; padding:0 var(--s-2); cursor:pointer; transition:border-color var(--dur),color var(--dur);}
.ae-chip:hover{border-color:var(--action-ink);}
.ae-form{display:flex; flex-wrap:wrap; gap:var(--s-2); margin:0 0 var(--s-2);}
.ae-form input{flex:1 1 260px; min-width:0; min-height:52px; padding:0 var(--s-2); font-family:var(--sans); font-size:var(--t-base); color:var(--text); background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r-sm);}
.ae-form input::placeholder{color:var(--muted);}
.ae-stats{display:flex; align-items:center; gap:var(--s-1); font-family:var(--mono); font-size:var(--t-cap); color:var(--muted); margin:0 0 var(--s-2); min-height:24px; cursor:pointer;}
.ae-status{font-family:var(--mono); font-size:var(--t-sm); color:var(--muted); margin:0 0 var(--s-2); min-height:1.4em;}
.ask-ecco .readout{margin-top:0; margin-bottom:var(--s-2);}
.ae-answer{margin:0 0 var(--s-2); font-size:var(--t-sm); line-height:1.6; color:#eef2f8; white-space:pre-wrap; overflow-wrap:break-word;}
.ae-disclosure{font-family:var(--mono); font-size:var(--t-cap); color:var(--muted); margin:0; max-width:80ch;}

/* --- FEATURE 2: scroll-reveal motion — below-hero content RISES + fades in as it
   scrolls into view ("everything rises as you scroll"). CSS-ONLY via scroll-driven
   animations (animation-timeline: view()). No JS, no external refs — CSP-safe.

   FALLBACK + REDUCED-MOTION SAFETY (critical): the hidden initial state (opacity:0 +
   translateY) is emitted ONLY inside BOTH @media (prefers-reduced-motion: no-preference)
   AND @supports (animation-timeline: view()). So under reduced-motion OR any browser
   without scroll-timelines, the reveal selectors get NO opacity/transform override and
   every element is fully visible at rest (opacity:1, no transform) — never stranded
   invisible. The global reduced-motion reset (*{animation:none!important}) cannot leave
   an element at opacity:0 because opacity:0 is never emitted under `reduce`.

   The hero headline is deliberately excluded — it's above-the-fold and typewriter-driven
   by home.js; scroll-reveal is only for content that scrolls INTO view. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .stats-band,
    .sec-head,
    .surfaces > .surface,
    .why-grid > .why-card,
    .funnel,
    .tools-preview,
    .tools-grid > .tool-card,
    .faq > .faq-item,
    .pricing-grid > .price-card,
    .free-card,
    .feature-detail-grid > .feature-detail{
      opacity:0;
      transform:translateY(22px);
      animation:home-scroll-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }
  }
}
@keyframes home-scroll-rise{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:translateY(0); }
}

/* stats-band: 6 items wrap to 3x2 on narrow screens without overflow */
@media (max-width: 640px){
  .stats-band{flex-wrap:wrap;}
  .stats-band li{flex:1 1 33%; min-width:0; padding:6px 0;}
  .stats-band li:nth-child(3)::after{display:none;}
}

/* intelligence stack — proof section: every line traces to a live dashboard module */
.intel-stack{margin:0 0 var(--s-6); padding:var(--s-4); border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface);}
.intel-lede{margin:0 0 var(--s-3); color:var(--muted); max-width:62ch;}
.intel-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-2) var(--s-4);}
.intel-list li{display:flex; flex-direction:column; gap:2px; padding:var(--s-2); border:1px solid var(--line); border-radius:calc(var(--r) - 4px); min-width:0;}
.intel-list strong{font-family:var(--mono); font-size:.95rem;}
.intel-list span{color:var(--muted); font-size:.85rem; line-height:1.45;}
@media (max-width: 640px){ .intel-list{grid-template-columns:1fr;} }

/* --- UX ratchet 2026-07-22 (additive block; landing form-control + tap-target polish) ---
   Later-source overrides raise undersized targets to the 44px floor (WCAG 2.5.5),
   theme the two native checkboxes, and anchor input focus to the field edge.
   aria-pressed sync for the theme-preview pills is DEFERRED: it needs a JS edit and
   the script payload ceiling is currently over budget (Codex lane). */
:where(#aeStats, #cwConsent){accent-color:var(--action); width:18px; height:18px; flex:none;}
.ae-stats, .cw-consent{min-height:44px;}
p.home-theme-preview button{min-height:44px;} /* p+class outweighs hero-themes.css's later same-specificity 28px */
p.home-theme-preview{margin-bottom:var(--s-4);} /* offsets .hero-signin's negative top margin now that pills are taller */
.price-note .linklike{min-height:44px; padding-block:10px;}
.ae-form input:focus-visible, .checkout-waitlist .cw-row input:focus-visible{border-color:var(--action-ink);}
@media (prefers-reduced-motion: no-preference){
  :where(.ae-chip, .linklike, .cta-chip, .theme-toggle):active{transform:translateY(1px);}
}

/* --- UX ratchet 2026-07-22 cycle 8 (additive): annual toggle reads as a link, not a UA-grey pill ---
   .linklike is a raw <button> with UA chrome; on the conversion path it must read
   as the inline "or $X/yr" link it is. Flex on .price-note keeps the note from
   wrapping mid-phrase around the 44px control. */
.price-card .price-note{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px 6px;} /* card-scoped: flex on the section-level Stripe note split "Manage or cancel" from its period into gapped flex items */
.price-note .linklike{appearance:none; -webkit-appearance:none; background:transparent; border:0; font:inherit; color:var(--action-ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.price-note .linklike:hover{color:var(--text);}

/* --- UX ratchet 2026-07-22 cycle 9 (additive): mobile topbar compaction ---
   At phone widths the toggle wrapped onto its own third row (~56px wasted above
   the hero). Dock it top-right beside the wordmark; nav rows keep their flow.
   2026-07-30: the unit chip ALSO carries .theme-toggle, so both landed at right:0
   and overlapped ("LIGHT MOKG"). The unit chip has the stable width ("kg"/"lb"),
   so IT anchors right:0 and the variable-width theme button offsets past it. */
@media (max-width:640px){
  .topbar{position:relative;}
  .topbar .theme-toggle{position:absolute; top:0; right:58px;}
  .topbar .unit-toggle{right:0;}
}

/* --- UX ratchet 2026-07-22 cycle 13 (additive): free-banner flows as prose on phones ---
   inline-flex made the bold lede and "Local-first." two side-by-side columns when
   the lede wrapped; block flow lets the sentence wrap naturally. */
@media (max-width:640px){ .free-banner{display:block;} }

/* --- Today in the gym (front-page card, living-prescription pipeline) --- */
.gym-today{margin:0 0 var(--s-6); padding:var(--s-4); border:1px solid var(--line-strong); border-left:3px solid var(--action); border-radius:var(--r); background:var(--surface);}
.gt-head{font-family:var(--mono); font-size:var(--t-cap); letter-spacing:0.14em; text-transform:uppercase; color:var(--action-ink); margin:0 0 var(--s-2);}
.gt-list{list-style:none; margin:0 0 var(--s-2); padding:0; display:grid; gap:var(--s-1);}
.gt-list li{display:flex; justify-content:space-between; gap:var(--s-2); align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:6px; min-width:0;}
.gt-list strong{font-weight:700; min-width:0; overflow-wrap:anywhere;}
.gt-list span{font-family:var(--mono); font-size:var(--t-sm); color:var(--text); white-space:nowrap;}
.gt-note{font-family:var(--mono); font-size:var(--t-cap); color:var(--muted); letter-spacing:0.04em; margin:0 0 var(--s-3); max-width:62ch;}

/* --- Beat 2: plan showpiece (.plan-entry upgraded from inline styles) --- */
.plan-entry{margin:0 0 var(--s-6); padding:var(--s-4); border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-4); align-items:center; justify-content:space-between;}
.plan-entry .pe-copy{max-width:52ch;}
.plan-entry .pe-copy h2{font-family:var(--serif); font-weight:800; font-size:var(--t-xl); margin:0 0 var(--s-1);}
.plan-entry .pe-copy .body{color:var(--muted); margin:0 0 var(--s-3);}
.plan-sample{flex:1 1 280px; max-width:360px; margin:0;}
/* .plan-sample sits on the .readout card, whose #0a0b0e background is FIXED in
   every theme (dark/light/obsidian/clinical) — so its characters use the same
   literal light palette as the other readout children (#eef2f8/#9aa6b8/#2dd4bf),
   NEVER theme vars: var(--text)/var(--muted) flip to dark ink under the light
   and clinical themes and vanish against the always-dark card (2026-07-23). */
.ps-week{list-style:none; display:flex; gap:4px; margin:0 0 var(--s-2); padding:0;}
.ps-week li{flex:1; text-align:center; font-family:var(--mono); font-size:var(--t-cap); padding:6px 2px; border:1px solid rgba(255,255,255,0.14); border-radius:6px; color:#9aa6b8;}
.ps-week li b{display:block; font-weight:600; color:inherit;}
.ps-week li.on{color:#eef2f8; border-color:#2dd4bf;}
.ps-lines{list-style:none; margin:0 0 var(--s-2); padding:0;}
.ps-lines li{display:flex; justify-content:space-between; gap:var(--s-2); font-size:var(--t-sm); padding:4px 0; border-bottom:1px dashed rgba(255,255,255,0.10); color:#eef2f8;}
.ps-lines b{font-family:var(--mono); font-weight:600; white-space:nowrap; color:#2dd4bf;}

/* --- Tier SAMPLE previews inside pricing cards (Local+ analytics, Pro breakdown).
   Decorative bars are aria-hidden or paired with text values; all copy is
   SAMPLE-tagged. Bar growth animates only under no-preference. --- */
.tier-sample{margin:0 0 var(--s-3); padding:var(--s-2); border:1px dashed var(--line-strong); border-radius:var(--r-sm); background:var(--bg);}
.ts-tag{font-family:var(--mono); font-size:var(--t-cap); letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin:0 0 var(--s-1);}
.ts-spark{display:flex; align-items:flex-end; gap:3px; height:56px; margin:0 0 var(--s-1);}
.ts-spark i{flex:1; background:var(--action); opacity:.85; border-radius:2px 2px 0 0; height:var(--h,20%);}
.ts-cap{font-size:var(--t-cap); color:var(--muted); margin:0; line-height:1.5;}
.ts-score{list-style:none; margin:0 0 var(--s-1); padding:0; display:grid; gap:6px;}
.ts-score li{display:grid; grid-template-columns:minmax(88px,auto) 1fr auto; align-items:center; gap:var(--s-1); font-family:var(--mono); font-size:var(--t-cap); color:var(--text);}
.ts-score i{display:block; height:6px; border-radius:3px; background:var(--line); position:relative; overflow:hidden;}
.ts-score i::after{content:""; position:absolute; inset:0; width:var(--w,50%); background:var(--action); border-radius:3px;}
.ts-score b{font-weight:600;}
@media (prefers-reduced-motion:no-preference){
  .ts-spark i{animation:tsGrow .7s cubic-bezier(.2,.7,.2,1) backwards;}
  .ts-spark i:nth-child(2n){animation-delay:.06s;}
  .ts-spark i:nth-child(3n){animation-delay:.12s;}
  .ts-score i::after{animation:tsWide .7s cubic-bezier(.2,.7,.2,1) backwards;}
  @keyframes tsGrow{from{height:0;}}
  @keyframes tsWide{from{width:0;}}
}

/* --- Explore row: compact destinations replacing the Atlas/Tools sections --- */
.explore-row{display:flex; flex-wrap:wrap; gap:var(--s-2); margin:0 0 var(--s-6);}
.explore-row a{font-family:var(--mono); font-size:var(--t-sm); color:var(--text); text-decoration:none; border:1px solid var(--line-strong); border-radius:999px; padding:0 var(--s-3); min-height:44px; display:inline-flex; align-items:center;}
.explore-row a:hover{border-color:var(--action-ink); color:var(--action-ink);}

/* --- Mobile front-page polish 2026-07-24 (operator iPhone screenshots IMG_4762-4773) ---
   Additive block. Phone-width rules only: full-width action buttons (mobile buttons
   were narrow left-hugging pills), compact explore chips (each chip ate its own row),
   and footer-column links that read as designed nav instead of UA-default anchors. */
@media (max-width:640px){
  .cta-row .btn, .gs-actions .btn, .gym-today .btn, .plan-entry .pe-copy .btn{width:100%;}
  .ae-form .btn{flex:1 1 100%;}
  .explore-row{gap:var(--s-1);}
  .explore-row a{font-size:var(--t-cap); padding:0 var(--s-2);}
}
.foot-col .foot-link{text-decoration:none; color:var(--muted);}
.foot-col .foot-link:hover{color:var(--action-ink);}

/* ── Hero device preview (2026-07-25) ─────────────────────────────────────────
   The front door had zero images and never showed the product. This draws the
   real Gym Mode face in markup — no <img>, no request, no LCP cost — using the
   page's own tokens so it themes automatically. Non-interactive on purpose: it
   is a picture of the app, not a fake control surface, and it is labelled
   SAMPLE in the frame and again in the caption. */
.device{margin:var(--s-3) 0 0; display:flex; flex-direction:column; align-items:center; gap:var(--s-1);}
.device-frame{width:min(300px,86vw); border:1px solid var(--line-strong); border-radius:26px; padding:10px;
  background:linear-gradient(180deg,rgba(255,255,255,0.10),rgba(255,255,255,0.02));
  box-shadow:0 32px 90px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.10);}
/* The device mockup is the dark cockpit face in every theme: var(--surface-2) let it go
   light while dv-tag/dv-target keep dark-teal literals (1.64:1). Pin the dark screen +
   ink tokens so the literals always sit on the cockpit they were drawn for. */
.device-screen{border-radius:18px; background:#0a0b0e; --text:#eef2f8; --muted:#9aa6b8; color:#eef2f8; padding:14px 14px 16px; font-family:var(--mono);
  border:1px solid rgba(255,255,255,0.08);}
.dv-tag{margin:0 0 10px; font-size:var(--t-cap); letter-spacing:0.18em; text-transform:uppercase; color:#2dd4bf;}
.dv-lift{margin:0 0 2px; font-family:var(--serif); font-weight:800; font-size:1.05rem; color:var(--text); line-height:1.15;}
.dv-eyebrow{margin:6px 0 2px; font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);}
.dv-target{margin:0 0 12px; font-family:var(--serif); font-weight:800; font-size:1.9rem; line-height:1; color:#2dd4bf;}
.dv-target span{font-size:0.9rem; color:var(--muted);}
.dv-row{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.dv-cell{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px;
  border:1px solid var(--line-strong); border-radius:10px; padding:8px 10px; background:rgba(255,255,255,0.03);}
.dv-cell b{grid-column:1/-1; font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); font-weight:700;}
/* The sample adjusters became REAL buttons (operator 2026-07-30) — same visual
   footprint as the old inert glyphs, honest 44px hit areas via padding, and the
   device's pinned dark ink (literal colors, like its readout siblings). */
.dv-step{font-style:normal; color:#2dd4bf; font-size:1rem; background:transparent; border:0; cursor:pointer; min-width:44px; min-height:44px; margin:-10px 0; padding:0; font-family:inherit; border-radius:8px;}
.dv-step:hover{background:rgba(45,212,191,0.12);}
.dv-cell em{font-style:normal; text-align:center; font-family:var(--serif); font-weight:800; font-size:1.15rem; color:var(--text);}
.dv-effort{margin-top:8px; display:grid; grid-template-columns:auto repeat(5,1fr); align-items:center; gap:4px;}
.dv-effort b{font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-right:2px;}
.dv-eff{text-align:center; padding:6px 0; border:1px solid var(--line-strong); border-radius:8px; font-size:0.75rem; color:var(--muted); background:transparent; cursor:pointer; min-height:44px; font-family:inherit;}
.dv-eff.on{border-color:#2dd4bf; color:#2dd4bf; background:rgba(45,212,191,0.14);}
.dv-action{margin:12px 0 0; padding:12px 8px; text-align:center; border-radius:11px;
  background:var(--action); color:var(--on-action); font-weight:800; font-size:0.85rem; letter-spacing:0.02em;}
/* Beat 1c: dv-action is now a real <button> — strip UA chrome, keep the cockpit face,
   pin the 44px floor and a visible focus ring (same tokens as .topnav a:focus-visible). */
button.dv-action{display:block; width:100%; border:0; font-family:inherit; line-height:inherit; cursor:pointer; min-height:44px;}
button.dv-action:focus-visible{outline:var(--ring) solid var(--action-ink); outline-offset:2px;}
button.dv-action:active{transform:translateY(1px);}
.dv-status{margin:8px 0 0; font-size:0.72rem; line-height:1.5; color:var(--muted); text-align:center; min-height:2.2em;}
/* Sample-complete plan preview (operator 2026-07-30): appears inside the device
   card after the 4th sample set. The device is a pinned dark surface, so ink is
   literal like its readout siblings, never theme vars. */
.dv-plan-preview{margin:12px 0 0; padding:12px; border:1px solid rgba(255,255,255,0.16); border-radius:10px; display:flex; flex-direction:column; gap:8px; text-align:center;}
.dv-preview-kicker{margin:0; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:#99f6e4;}
.dv-preview-body{margin:0; font-size:0.74rem; line-height:1.5; color:#dbeafe;}
.dv-plan-preview .btn{min-height:44px; font-size:0.85rem;}
.dv-plan-preview .btn-ghost{color:#eef2f8; border-color:rgba(255,255,255,0.4);}
.device figcaption{max-width:34ch; text-align:center; color:var(--muted); font-size:var(--t-sm); line-height:1.45;}
@media (min-width:900px){ .hero .device{grid-column:2; margin-top:var(--s-3);} }
/* Desktop hero: column 2 stacks the device over the readout. Placed after the
   original .hero .readout rule so the row assignment wins on equal specificity. */
@media (min-width:900px){
  /* SPAN, don't occupy: a 336px card in a single grid row inflated row 1 and shoved
     the primary CTA from y=1073 to y=1443. Spanning lets column 1 keep its rhythm. */
  .hero .device{grid-column:2; grid-row:1 / span 4; margin-top:0; align-self:start;}
  .hero .readout{grid-column:2; grid-row:5 / span 3; margin-top:var(--s-3); align-self:start;}
}