/* Verelect — design system, Build 27 "Clinical Paper". DESIGN.md is the source of truth; every colour here is a token.
   Section order: 1 tokens (light) · 1D tokens (dark, twice) · 2 base + type · 3 nav / frame / footer · 4 controls ·
   5 stamps + dots · 6 pre-flight (pinned literals) · 7 steps · 8 runline · 9 results / findings · 10 note / tables / fcard ·
   11 plan / strip / Notion / menu / public pages · 12 responsive · 13 reduced motion · 14 compatibility tail (last). */

/* ===== 1 · tokens — light, the default, on bare :root ===== */
:root{
  /* Verelect colour system (Build 29) — the only raw hex in the sheet; every component reads a role below */
  --v-navy-ink:#00003D; --v-navy:#000067; --v-royal:#1F2F96; --v-link:#3A5BCE; --v-mist:#AFC1EC; --v-tint:#E1EAFA;
  --v-text:#0B0B1E; --v-text-muted:#5C5C73; --v-border:#D3D9E6; --v-page:#F3F5FA; --v-card:#FFFFFF;
  --v-accent:#F2B84B; --v-accent-text:#3D2A00;
  --v-verified:#1D9E75; --v-updated:#E49B1A; --v-conflict:#D63C3C; --v-unchecked:#8A8AA3;
  --v-on-navy:#FFFFFF; --v-on-status:#FFFFFF; --v-on-updated:#2E1F00; --v-on-unchecked:var(--v-navy-ink);
  /* roles: navy-as-text (H1/H2, secondary-button label, brand emphasis) and royal-as-text (H3/H4) swap to text / mist in dark */
  --v-heading:var(--v-navy); --v-subheading:var(--v-royal); --v-link-hover:var(--v-royal);
  /* the sheet's semantic names, resolved from the system */
  --ground:var(--v-page); --surface:var(--v-card); --surface-2:color-mix(in srgb,var(--v-page) 55%,var(--v-border));
  --line:var(--v-border); --line-strong:color-mix(in srgb,var(--v-border) 40%,var(--v-text-muted));
  /* a control edge in the scheme's own blue that still clears the 3:1 floor on card 3.81, tint 3.15, dark card 4.55, dark tint 3.92 */
  --line-blue:color-mix(in srgb,var(--v-mist) 55%,var(--v-royal));
  --ink:var(--v-text); --ink-muted:var(--v-text-muted); --ink-faint:var(--v-unchecked);
  --primary:var(--v-navy); --primary-hover:var(--v-navy-ink); --primary-tint:var(--v-tint); --on-primary:var(--v-on-navy);
  --attention:var(--v-conflict); --attention-tint:color-mix(in srgb,var(--v-conflict) 12%,var(--v-card));
  --ok:var(--v-verified); --ok-tint:color-mix(in srgb,var(--v-verified) 14%,var(--v-card));
  --warn:var(--v-updated); --warn-tint:color-mix(in srgb,var(--v-updated) 16%,var(--v-card));
  --stop:var(--v-conflict); --stop-tint:color-mix(in srgb,var(--v-conflict) 12%,var(--v-card));
  --focus:var(--v-link);
  --diagram-ground:var(--v-navy-ink); --diagram-ink:var(--v-tint);
  /* aliases — frozen markup, scripts and pinned rules reference these names */
  --l1:var(--surface-2); --l1-b:var(--line); --l2:var(--surface-2); --l2-b:var(--line); --l3:var(--surface); --l3-b:var(--line-strong);
  --rule:var(--line); --field:var(--ground); --field-base:var(--ground); --glass:var(--surface);
  --ok-500:var(--ok); --warn-500:var(--warn); --stop-500:var(--stop); --ok-dim:var(--ok-tint); --warn-dim:var(--warn-tint); --stop-dim:var(--stop-tint);
  --cy-500:var(--primary); --cy-300:var(--primary-hover); --cy-700:var(--primary-hover); --cy-100:var(--primary-tint);
  --uv-500:var(--primary); --uv-300:var(--primary-hover); --uv-100:var(--primary-tint);
  --verified:var(--ok); --refined:var(--warn); --superseded:var(--stop); --held:var(--ink-muted);
  --cyan:var(--primary); --uv:var(--primary); --line-2:var(--line); --line-3:var(--line-strong);
  --spectrum:none; --glow-cy:none; --glow-uv:none; --shadow-raised:none; --shadow-float:none;
  /* type */
  /* Build 50 (owner, 2026-09-02): one family — Inter, the 14..32 optical axis, its own italic — for body,
     headings and the accent alike. The mono stays for values. */
  --sans:'Inter','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --mono:'Source Code Pro','Cascadia Mono',Consolas,'SF Mono',Menlo,monospace;
  /* the accent voice is Inter's true italic (font-synthesis:none, so never a slanted roman). The token keeps its
     name and its one consumer (.section-head h2 em,.hero h1 em); the count is pinned. */
  --serif:'Inter','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --display:var(--sans); --body:var(--sans);
  --t-0:13px; --t-1:13px; --t-2:14px; --t-3:14px; --t-4:17px; --t-5:20px; --t-6:20px; --t-7:24px; --t-8:29px; --t-9:35px; --t-10:35px;
  /* space · radius · frame */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --r:4px; --r-lg:12px; --r-pill:999px;
  --frame:880px; --frame-n:760px; --measure:65ch; --measure-s:55ch;
  --btn-h:44px; --btn-h-sm:34px; --header-h:60px;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:var(--ease);
  color-scheme:light;
}

/* ===== 1D · tokens — dark (colour system rule 9). Block A follows the system; block B is the explicit toggle. ===== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* rule 9: page navy-ink, cards #0F0F52, text #E1EAFA, muted mist, borders royal, link lifted to #7A93E0 */
    --v-page:#00003D; --v-card:#0F0F52; --v-text:#E1EAFA; --v-text-muted:var(--v-mist); --v-border:var(--v-royal); --v-link:#7A93E0;
    --v-tint:color-mix(in srgb,var(--v-card) 62%,var(--v-royal));
    --v-heading:var(--v-text); --v-subheading:var(--v-mist); --v-link-hover:var(--v-mist);
    --surface-2:color-mix(in srgb,var(--v-card) 70%,var(--v-border)); --line-strong:color-mix(in srgb,var(--v-border) 55%,var(--v-mist));
    --primary:var(--v-link); --primary-hover:var(--v-mist); --on-primary:var(--v-navy-ink);
    --attention-tint:color-mix(in srgb,var(--v-conflict) 22%,var(--v-card)); --ok-tint:color-mix(in srgb,var(--v-verified) 22%,var(--v-card));
    --warn-tint:color-mix(in srgb,var(--v-updated) 22%,var(--v-card)); --stop-tint:color-mix(in srgb,var(--v-conflict) 22%,var(--v-card));
    --diagram-ground:var(--v-card); --diagram-ink:var(--v-text);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  /* rule 9: page navy-ink, cards #0F0F52, text #E1EAFA, muted mist, borders royal, link lifted to #7A93E0 */
  --v-page:#00003D; --v-card:#0F0F52; --v-text:#E1EAFA; --v-text-muted:var(--v-mist); --v-border:var(--v-royal); --v-link:#7A93E0;
  --v-tint:color-mix(in srgb,var(--v-card) 62%,var(--v-royal));
  --v-heading:var(--v-text); --v-subheading:var(--v-mist); --v-link-hover:var(--v-mist);
  --surface-2:color-mix(in srgb,var(--v-card) 70%,var(--v-border)); --line-strong:color-mix(in srgb,var(--v-border) 55%,var(--v-mist));
  --primary:var(--v-link); --primary-hover:var(--v-mist); --on-primary:var(--v-navy-ink);
  --attention-tint:color-mix(in srgb,var(--v-conflict) 22%,var(--v-card)); --ok-tint:color-mix(in srgb,var(--v-verified) 22%,var(--v-card));
  --warn-tint:color-mix(in srgb,var(--v-updated) 22%,var(--v-card)); --stop-tint:color-mix(in srgb,var(--v-conflict) 22%,var(--v-card));
  --diagram-ground:var(--v-card); --diagram-ink:var(--v-text);
  color-scheme:dark;
}

/* ===== 2 · base + type — one sans, tabular numerals, one focus ring ===== */
*{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh}
body::before,body::after{content:none}
h1,h2,h3,h4{margin:0;font-weight:600;color:var(--v-heading);letter-spacing:0;overflow-wrap:anywhere}
h1{font-size:35px;line-height:1.15;letter-spacing:-0.01em}
h2{font-size:29px;line-height:1.2;letter-spacing:-0.01em}
h3{font-size:24px;line-height:1.25;letter-spacing:-0.01em}
h4{font-size:20px;line-height:1.3}
h3,h4{color:var(--v-subheading)}
p{margin:0}
b,strong{font-weight:600}
a{color:var(--v-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .12s var(--ease)}
a:hover{color:var(--v-link-hover)}
s{text-decoration:line-through;text-decoration-color:var(--ink-muted);text-decoration-thickness:1px}
::selection{background:var(--primary-tint)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
svg{max-width:100%}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.val,.mono{font-family:var(--mono);font-weight:500;font-size:.9em;line-height:1.5;color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums}
.status-line.val{font-family:var(--sans)}
.label,.eyebrow,.back{font:500 14px/1.4 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.eyebrow{display:block;margin:0 0 8px}
.display{font-family:var(--sans);font-weight:600;letter-spacing:-0.01em}
.muted{color:var(--ink-muted)}
.small{font-size:14px;line-height:1.5}
.measure{max-width:var(--measure)}
.measure-s{max-width:var(--measure-s)}
.stack>*+*{margin-top:8px}
.section{margin:0 0 48px}
.section.lg{margin-bottom:64px}
.inline-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
code,.code,pre{font:400 15px/1.5 var(--mono);color:var(--ink);background:var(--surface-2);border-radius:var(--r);padding:0 4px}
pre,pre.code{display:block;padding:12px 16px;overflow-x:auto;max-width:100%;white-space:pre-wrap;margin:0}
table{border-collapse:collapse}
table td,table th{font-variant-numeric:tabular-nums}

/* ===== 3 · nav / frame / footer — static, opaque, quiet ===== */
.top{position:static;background:var(--v-navy);border-bottom:1px solid var(--v-navy-ink);box-shadow:none}
.top-in{max-width:var(--frame);min-height:var(--header-h);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:24px;position:relative}
.wordmark{display:inline-flex;align-items:center;color:var(--v-on-navy);text-decoration:none;margin-right:auto;line-height:1;font:600 18px/1 var(--sans)}
.wordmark-svg{display:inline-flex;align-items:center;color:inherit}
.wordmark-svg svg{display:block;height:14px;width:auto;overflow:visible}
.wordmark-svg.lg svg{height:22px}
.wm-bar{fill:currentColor}
.wordmark:hover .wm-bar{filter:none}
.nav{display:flex;gap:24px;align-items:center}
.nav a:not(.btn),.nav .menu>summary{font:400 14px/1.4 var(--sans);color:var(--v-mist);text-decoration:none;padding:4px 0;white-space:nowrap;transition:color .12s var(--ease)}
.nav a:not(.btn):hover,.nav .menu>summary:hover,.nav .menu[open]>summary{color:var(--v-on-navy)}
.nav a.on,.nav .menu>summary.on{color:var(--v-on-navy);font-weight:600;box-shadow:inset 0 -1px 0 var(--v-on-navy)}
.nav .btn,.nav .btn.primary,.nav .btn.sm{height:auto;padding:4px 0;border:0;background:none;color:var(--v-mist);font:400 14px/1.4 var(--sans);border-radius:0}
.nav .btn:hover,.nav .btn.primary:hover,.nav .btn.uv:hover{color:var(--v-on-navy);text-decoration:underline;text-underline-offset:3px;background:none;border-color:transparent}
.nav .btn.quiet{padding:4px 0}
main{max-width:var(--frame);margin:0 auto;padding:48px 24px 96px}
main:focus{outline:none}
main.narrow,main:has(>.hero),main:has(.plans),main:has(>.how-step){max-width:var(--frame-n)}
.view{display:none}
.view.on{display:block}
.page-head{margin:0 0 48px;padding:0 0 24px;border-bottom:1px solid var(--line)}
.page-head .eyebrow{margin-bottom:8px}
h1.page{font:600 29px/1.2 var(--sans);letter-spacing:-0.01em;color:var(--v-heading)}
.sub{color:var(--ink-muted);margin:8px 0 0;max-width:var(--measure-s);font-size:17px;line-height:1.6}
.page-head.split{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.page-head.split .act{flex:none}
.back{display:inline-block;margin:0 0 16px;text-decoration:none;color:var(--v-link)}
.back:hover{color:var(--v-link-hover);text-decoration:underline;text-underline-offset:3px}
.foot{max-width:var(--frame);margin:96px auto 0;padding:0 24px 48px;font-size:13px;line-height:1.5;color:var(--ink-muted)}
.foot-in{display:flex;flex-direction:column-reverse;gap:12px;border-top:1px solid var(--line);padding-top:24px}
.foot nav{display:flex;gap:16px;flex-wrap:wrap}
.foot a{color:var(--v-link);text-decoration:none}
.foot a:hover{color:var(--v-link-hover);text-decoration:underline;text-underline-offset:3px}
.foot p{margin:0;color:var(--ink-muted)}
.foot-mark,.foot .foot-mark{display:none}
/* account menu */
.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.menu>summary::-webkit-details-marker{display:none}
.menu .caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);display:inline-block;animation:none}
.menu[open] .caret{transform:translateY(1px) rotate(225deg)}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;padding:8px 0;display:grid;z-index:30;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:none;animation:fadein .16s var(--ease)}
.menu-panel .menu-who{display:block;padding:8px 16px 12px;font:400 14px/1.4 var(--sans);color:var(--ink-muted);border-bottom:1px solid var(--line);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-panel a,.menu-panel button,.nav .menu-panel a,.nav .menu-panel button{display:flex;align-items:center;width:100%;min-height:44px;text-align:left;padding:0 16px;font:400 14px/1.4 var(--sans);color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;white-space:nowrap;box-shadow:none;border-radius:0}
.menu-panel a:hover,.menu-panel button:hover,.nav .menu-panel a:hover,.nav .menu-panel button:hover{background:var(--surface-2);color:var(--ink)}
.menu-panel a:focus-visible,.menu-panel button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.menu-panel form{margin:4px 0 0;border-top:1px solid var(--line);padding-top:4px}
.navbtn{display:none;width:44px;height:44px;border:1px solid var(--v-mist);border-radius:var(--r);background:none;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto}
.navbtn span{display:block;width:18px;height:2px;background:var(--v-on-navy)}

/* ===== 4 · controls — button, field, segmented, toggle, drop zone ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border-radius:var(--r);border:1px solid transparent;
  font:500 17px/1 var(--sans);letter-spacing:0;white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;background:transparent;color:var(--ink);box-shadow:none;transform:none;overflow:visible;
  transition:background-color .12s var(--ease),color .12s var(--ease),border-color .12s var(--ease)}
/* rule 2: primary = navy + white, hover navy-ink; secondary = white + line edge + navy label, hover tint;
   the accent (gold) is the one most important action on a page — .accent, .uv (Subscribe) and the upload page's .go (its markup is contract-frozen) */
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary);box-shadow:none}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--on-primary)}
.btn.uv,.btn.accent,.btn.primary.accent,.btn.primary.go{background:var(--v-accent);border-color:var(--v-accent);color:var(--v-accent-text);box-shadow:none}
.btn.uv:hover,.btn.accent:hover,.btn.primary.accent:hover,.btn.primary.go:hover{background:color-mix(in srgb,var(--v-accent) 86%,var(--v-accent-text));border-color:color-mix(in srgb,var(--v-accent) 86%,var(--v-accent-text));color:var(--v-accent-text)}
.btn.secondary{background:var(--v-card);border-color:var(--v-border);color:var(--v-heading)}
.btn.secondary:hover{background:var(--v-tint);color:var(--v-heading)}
.btn.quiet{background:none;border:0;padding:0 8px;color:var(--v-link);font-weight:400}
.btn.quiet:hover{color:var(--v-link-hover);text-decoration:underline;text-underline-offset:3px}
.btn:active{transform:none}
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{background:var(--surface-2);border-color:var(--surface-2);color:var(--ink-muted);opacity:1;cursor:not-allowed;pointer-events:none}
.btn.sm{height:34px;padding:0 12px;font-size:14px}
.btn.quiet.sm{padding:0 4px}
.btn.is-loading{pointer-events:none;cursor:progress}
.btn.is-loading::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--primary);animation:none;transform:none}
.btn.primary.is-loading::after{background:var(--on-primary)}
.btn.uv.is-loading::after,.btn.accent.is-loading::after,.btn.primary.go.is-loading::after{background:var(--v-accent-text)}
.btn.go.has-sub{flex-direction:column;align-items:center;line-height:1.15;height:auto;min-height:44px;padding-top:8px;padding-bottom:8px}
.btn.go .go-sub{font:400 13px/1.3 var(--sans);color:currentColor;opacity:1;margin-top:2px;animation:none;letter-spacing:0;text-transform:none}
.btn .lbl{display:inline;transform:none}
/* fields */
.field{display:flex;flex-direction:column;gap:6px;font:500 14px/1.4 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none;min-width:0}
.field label{display:flex;flex-direction:column;gap:6px}
.field>input,.field>select,.field>textarea,.field input,.field select,.field textarea{height:44px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:0 12px;color:var(--ink);font:400 17px/1.4 var(--sans);letter-spacing:0;text-transform:none;min-width:0;transition:border-color .12s var(--ease)}
.field textarea{height:auto;min-height:88px;padding:10px 12px}
.field input::placeholder,.signup input::placeholder{color:var(--ink-muted);opacity:1}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-muted)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--v-link)}
.field input:user-invalid,.field input[aria-invalid="true"]{border-color:var(--attention)}
.field.inline{flex-direction:row;align-items:center;gap:8px;font-weight:400;font-size:17px;min-height:44px}
.field.inline input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary);margin:0}
input[type=checkbox],input[type=radio]{accent-color:var(--primary)}
.field>span .req{font-style:normal;font:400 13px/1.4 var(--sans);color:var(--ink-muted);margin-left:8px;letter-spacing:0;text-transform:none}
.form{display:grid;gap:16px;max-width:440px}
.card .form{margin-top:16px}
.form .inline-actions{margin-top:4px}
.msg{font:400 14px/1.5 var(--sans);color:var(--ink);margin:12px 0 0;max-width:var(--measure-s)}
.msg:empty{display:none}
.msg.err{color:var(--attention);border:0;padding:0}
.msg.ok{color:var(--ink)}
/* segmented control (a radio group) */
.intent{display:flex;flex-direction:column;gap:16px;margin:0 0 16px}
.intent .field{flex-direction:column;gap:8px}
.intent select{max-width:440px}
.seg{display:flex;flex-wrap:wrap;gap:8px;padding:0;border:0;background:none;border-radius:0}
.seg button{height:44px;padding:0 12px;background:transparent;border:1px solid var(--line-strong);border-radius:var(--r);color:var(--ink);font:500 14px/1 var(--sans);letter-spacing:0;text-transform:none;cursor:pointer;
  transition:background-color .12s var(--ease),color .12s var(--ease),border-color .12s var(--ease)}
.seg button:hover{border-color:var(--ink-muted)}
.seg button[aria-checked="true"],.seg button.on,.seg button.is-on,.seg button[aria-pressed="true"]{background:var(--v-tint);border-color:var(--v-mist);color:var(--v-heading)}
.seg button[aria-disabled="true"]{cursor:default}
.seg button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.seg.pulse{animation:none;border-color:var(--primary)}
.seg button::before,.seg button::after{content:none;display:none}
/* toggle (switch) */
.toggle{display:inline-flex;align-items:center;gap:10px;font:400 17px/1.4 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none;cursor:pointer}
.toggle input{appearance:none;width:40px;height:22px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line-strong);position:relative;cursor:pointer;margin:0;transition:background-color .12s var(--ease),border-color .12s var(--ease)}
.toggle input::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ink-muted);transition:background-color .12s var(--ease)}
.toggle input:checked{background:var(--primary);border-color:var(--primary)}
.toggle input:checked::before{left:20px;background:var(--on-primary)}
.toggle input:disabled{cursor:not-allowed;border-color:var(--line)}
.toggle input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.toggle b{color:var(--ink);font-weight:500}
/* the drop zone */
.drop{position:relative;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r-lg);
  min-height:200px;padding:32px;text-align:center;color:var(--ink);cursor:pointer;transition:border-color .12s var(--ease),background-color .12s var(--ease)}
.drop>div{display:grid;gap:8px;justify-items:center;max-width:var(--measure)}
.drop:hover{border-color:var(--ink-muted)}
.drop:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.drop.over{border:1px solid var(--v-link);background:var(--primary-tint);box-shadow:var(--glow-cy)}
.drop h2,.drop #drop-title{font:600 20px/1.3 var(--sans);letter-spacing:0;color:var(--v-heading);margin:0}
.drop p{color:var(--ink-muted);font-size:17px;line-height:1.5;max-width:var(--measure-s);margin:0}
.drop p b{color:var(--ink)}
.drop .formats{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none;margin:0}
.drop .drop-affirm{font-size:14px}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.drop .btn{pointer-events:none}
.drop.has-file{padding:16px 20px;min-height:0;border-style:solid;border-color:var(--line);align-items:stretch;text-align:left}
.drop.has-file>div{justify-items:start;max-width:none}
.drop.has-file h2,.drop.has-file #drop-title,.drop.has-file>div>p,.drop.has-file .formats,.drop.has-file .drop-promise,.drop.has-file .deliver{display:none}
.drop.locked,.drop[aria-disabled="true"]{cursor:not-allowed;border:1px dashed var(--line-strong);background:var(--surface);opacity:1}
.drop.locked:hover{border-color:var(--line-strong)}
.drop.locked.over{border:1px dashed var(--line-strong);background:var(--surface);box-shadow:none}
.drop .drop-reason{font:400 14px/1.5 var(--sans);color:var(--ink);letter-spacing:0;max-width:var(--measure-s);margin:0}
.drop:not(.locked) .drop-reason{display:none}
.drop-promise{color:var(--ink-muted);margin:0;max-width:var(--measure-s)}
.deliver{list-style:none;margin:0;padding:0;display:flex;gap:8px 24px;flex-wrap:wrap;justify-content:center}
.dl{position:relative;display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;padding:0;border:0;background:none;color:var(--ink);font-size:14px;line-height:1.5;transform:none;transition:none}
.dl span{font:500 14px/1.5 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none;grid-column:2}
.dl small{grid-column:2;font-size:14px;line-height:1.5;color:var(--ink-muted)}
.dl-dot{grid-row:1 / span 2;width:7px;height:7px;border-radius:50%;background:var(--ink-faint);box-shadow:none;animation:none}
.dl[data-state="working"] .dl-dot{background:var(--primary)}
.dl[data-state="lit"] .dl-dot{background:var(--ok)}
.dl[data-state="lit"]{animation:none;box-shadow:none;border:0;background:none}
.dl[data-state="lit"]::after{content:none}
.deliver.preview{margin-top:16px;opacity:1;justify-content:flex-start}
/* receipt · queued files */
.receipt{display:flex;gap:4px 12px;align-items:baseline;flex-wrap:wrap;font:400 14px/1.5 var(--sans);color:var(--ink);padding:0;border:0;background:none;box-shadow:none;animation:none}
.receipt b{color:var(--ink);font-weight:600}
.receipt i{font-style:normal;color:var(--ink-muted)}
.receipt span{font-family:var(--mono);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.receipt .rc-slides{color:var(--ink-muted)}
.receipt .rc-slides b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;text-shadow:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{font:400 14px/1.5 var(--sans);padding:4px 10px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.chips li.bad{border-color:var(--attention);color:var(--attention);text-decoration:line-through}
.chips li button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.opts{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:16px 0 0}
.opts .go{margin-left:auto}

/* ===== 5 · stamps + dots — the word carries the meaning; the dot repeats it in colour ===== */
/* the status badge — one solid fill per status, identical everywhere it appears (rule 6): verified / updated (refined) /
   conflict (superseded) / unchecked (held, unverified). White on verified and conflict, the on-updated brown on updated, navy-ink on unchecked. */
.stamp{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:var(--r-pill);padding:2px 10px;font:600 13px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--v-on-unchecked);background:var(--v-unchecked);--st:currentColor;white-space:nowrap;vertical-align:middle;box-shadow:none;animation:none;transform:none;cursor:default}
.stamp::before{content:none;width:6px;height:6px;border-radius:50%;background:var(--st);flex:none}
.stamp i{font-style:normal;opacity:1;color:currentColor;margin:0 .35em}
.stamp.verified,.stamp-verified{background:var(--v-verified);color:var(--v-on-status)}
.stamp.refined,.stamp-refined{background:var(--v-updated);color:var(--v-on-updated)}
.stamp.superseded,.stamp-superseded{background:var(--v-conflict);color:var(--v-on-status)}
.stamp.unverified,.stamp-unverified,.stamp.held,.stamp.ink,.stamp-period,.stamp-dissent{background:var(--v-unchecked);color:var(--v-on-unchecked)}
.stamp.error,.stamp.attention{background:var(--v-conflict);color:var(--v-on-status)}
.stamp.pen{background:var(--v-tint);color:var(--v-heading)}
.stamp.working{background:var(--v-tint);color:var(--v-heading);padding-left:8px;--st:var(--primary)}
.stamp.working::before{content:"";animation:pulse 1.5s ease-in-out infinite}
.stamp.lg{font-size:14px;padding:4px 12px;white-space:normal;line-height:1.4;max-width:100%}
.stamp.xl{font-size:17px;padding:6px 14px;white-space:normal;line-height:1.3;max-width:100%}
.stamp.land{animation:none}
.stamp.hi,.stamp.dim-other{opacity:1;box-shadow:none}
.stamp[tabindex]:focus-visible,button.stamp:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.key{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.key .stamp{font-size:13px}
.eyebrow-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 12px}
.eyebrow-row .eyebrow{margin:0}
.legend{display:flex;gap:8px;align-items:center;flex-wrap:wrap;position:relative}
.legend .lg-item{position:relative}
.legend button.stamp{cursor:help;font:600 13px/1.5 var(--sans)}
.legend .lg-def{position:absolute;right:0;top:calc(100% + 8px);min-width:260px;max-width:min(320px,calc(100vw - 32px));padding:12px 16px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:none;font:400 14px/1.5 var(--sans);color:var(--ink);display:none;z-index:25;text-align:left}
.legend .lg-item:hover .lg-def,.legend .lg-item:focus-within .lg-def{display:block;animation:fadein .16s var(--ease)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;box-shadow:none;color:var(--ink-muted)}
.dot.verified{color:var(--ok)}
.dot.refined{color:var(--warn)}
.dot.superseded{color:var(--stop)}
.dot.held{color:var(--ink-muted)}
.dot.now{color:var(--primary);animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes fadeup{from{opacity:0}to{opacity:1}}
.chip-tip{display:none}

/* ===== 6 · pre-flight — a calm checklist (the pinned literals live here; see DESIGN.md §compatibility) ===== */
.preflight{position:relative;background:var(--l2);border-top:1px solid var(--rule);border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:16px 20px;opacity:.7}
.preflight{opacity:1}
.preflight+.drop{border-top-left-radius:0;border-top-right-radius:0;border-top:0}
.preflight::before{content:none}
.preflight[data-stage],.preflight[data-tier]{background:var(--surface-2);box-shadow:none}
.pf-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font:500 14px/1.4 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none;margin:0 0 4px}
.pf-score{font:400 14px/1.4 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none;border:0;padding:0;background:none;animation:none}
.pf-score:empty{display:none}
.pf-score.ok{color:var(--ink)}
.pf-score.warn{color:var(--ink)}
.pf-score.stop{color:var(--stop)}
.pf-file{margin-left:auto;font:400 14px/1.4 var(--mono);color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.pf-file:empty{display:none}
.pf-seq{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.pf-seq{grid-template-columns:1fr}
.pf-seq{list-style:none;margin:0;padding:0;position:relative}
.pf-seg{position:relative;display:grid;grid-template-columns:20px 1fr;gap:4px 12px;align-items:start;padding:10px 0;border-top:1px solid var(--line);opacity:1;background:none;transform:none;box-shadow:none;transition:none}
.pf-seg:first-child{border-top:0}
.pf-num{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.pf-glyph{grid-column:1;grid-row:1;width:16px;height:16px;margin-top:3px;display:block;color:var(--ink-faint);animation:none;transform:none}
.pf-glyph svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf-glyph svg path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
.pf-glyph:empty::before{content:"";display:block;width:10px;height:10px;margin:3px;border:1.5px solid currentColor;border-radius:50%}
.pf-seg[data-state="pass"] .pf-glyph{color:var(--ok)}
.pf-seg[data-state="warn"] .pf-glyph{color:var(--warn)}
.pf-seg[data-state="stop"] .pf-glyph{color:var(--stop)}
.pf-seg[data-state="dash"] .pf-glyph,.pf-seg[data-state="known"] .pf-glyph,.pf-seg[data-state="filling"] .pf-glyph{color:var(--ink-muted)}
.pf-seg[data-state="waiting"] .pf-glyph,.pf-seg[data-state="idle"] .pf-glyph{color:var(--ink-faint)}
.pf-seg[data-state="filling"] .pf-glyph{animation:pf-fill .25s var(--ease) forwards}
.pf-txt{grid-column:2;grid-row:1;font:400 14px/1.5 var(--sans);color:var(--ink);display:block;overflow:visible;min-height:0;max-height:none}
.pf-detail{grid-column:2;grid-row:2;font:400 14px/1.5 var(--sans);color:var(--ink-muted);display:block;animation:none}
.pf-detail:empty{display:none}
.pf-seg[data-state="stop"] .pf-detail{color:var(--stop)}
.pf-seg[data-state="warn"] .pf-detail{color:var(--ink)}
.pf-rail{display:none}
.pf-trace{display:none}
.pf-trace path{stroke-dashoffset:0;animation:none}
.pf-seg.lit .pf-glyph,.pf-seg.lit .pf-rail i{animation:none;filter:none}
.pf-note{font:400 14px/1.5 var(--sans);color:var(--ink-muted);margin:8px 0 0}
.pf-verdict{position:relative;margin:0;padding:0;border:0;background:none;transition:none}
.pf-verdict[data-tier]{background:none}
.pf-verdict[data-tier="blocked"]{color:var(--stop)}
.pf-cost{font:400 17px/1.5 var(--sans);color:var(--ink);margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--line);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;border-radius:0;transition:none;box-shadow:none}
.pf-word{font-weight:600;color:var(--ink);letter-spacing:0;text-transform:none;text-shadow:none;animation:none;display:inline;margin-right:.35em}
.pf-word:empty{display:none}
.pf-rest{font-size:14px;color:var(--ink-muted);letter-spacing:0;text-transform:none}
.pf-cost.idle .pf-rest,.pf-cost.checking .pf-rest{color:var(--ink-muted);font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:14px}
.pf-cost[data-tier] .pf-word,.pf-cost[data-tier] .pf-rest{text-shadow:none}
.pf-cost.blocked .pf-rest{color:var(--stop-500)}
.pf-cost.pulse{animation:pf-glow .4s var(--ease) 1}
@keyframes pf-glow{0%{box-shadow:none}40%{box-shadow:var(--glow-cy)}100%{box-shadow:none}}
@keyframes pf-sweep{from{opacity:0}to{opacity:0}}
.preflight.sweep .pf-seq::after{content:none;animation:pf-sweep .4s var(--ease) forwards}
@keyframes pf-fill{from{opacity:1}to{opacity:1}}
.step-body>.preflight{margin-top:0}

/* ===== 7 · steps — no cards, a hairline and a number ===== */
.steps{display:flex;flex-direction:column;gap:48px;margin:0 0 24px}
.step{display:flex;flex-direction:column;gap:12px;min-width:0;border-top:1px solid var(--line);padding-top:24px}
.step-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.step-n{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none;white-space:nowrap;transition:color .12s var(--ease)}
.step-t{font:600 20px/1.3 var(--sans);letter-spacing:0;color:var(--ink)}
.step-hint{font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.step-state{margin-left:auto}
.step-body{min-width:0;transition:none;opacity:1}
.step[data-state="open"] .step-n{color:var(--primary)}
.step[data-state="done"] .step-n{color:var(--ink)}
.step[data-state="waiting"] .step-t,.step[data-state="idle"] .step-t{color:var(--ink-muted)}
.step[data-state="waiting"] .step-body,.step[data-state="idle"] .step-body{opacity:1}
.step[data-state="waiting"] .step-body :is(button,input,select,label){pointer-events:none}
.guards{display:grid;grid-template-columns:1fr;gap:16px}
.guard{display:flex;flex-direction:column;gap:12px}
.guard .eyebrow{margin:0}
.guard>p{color:var(--ink-muted);font-size:14px;line-height:1.5}
.guard .srcs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.guard .srcs li{display:inline;padding:0;border:0;background:none;font:500 14px/1.5 var(--sans);color:var(--ink)}
.guard .srcs li::before{content:none}
.guard .step-head{margin-bottom:4px}
.board{display:flex;align-items:center;gap:12px;padding:12px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
.board>div{flex:1;min-width:0}
.board b{display:block;font-size:17px;font-weight:600;color:var(--ink)}
.board small{display:block;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.board-alt{display:flex;flex-wrap:wrap;gap:4px 12px;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.outs{display:grid;grid-template-columns:1fr;gap:0}
.out{--sys:var(--primary);position:relative;display:flex;gap:12px;align-items:flex-start;padding:16px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;cursor:pointer;box-shadow:none;transition:none}
.out:first-child{border-top:0}
.out>input{position:absolute;width:1px;height:1px;opacity:0}
.out .tick{flex:none;width:20px;height:20px;margin-top:2px;border-radius:var(--r);border:1px solid var(--line-strong);display:grid;place-items:center;font-size:13px;line-height:1;font-weight:600;color:transparent;background:none;transition:color .12s var(--ease),border-color .12s var(--ease)}
.out b{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;margin:0 0 4px;color:var(--ink)}
.out b svg{width:15px;height:15px;flex:none}
.out p{margin:0;color:var(--ink-muted);font-size:14px;line-height:1.5}
.out .meta{display:block;margin-top:4px;font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.out .meta.off{color:var(--ink-muted)}
.out:hover{border-color:var(--line)}
.out:has(input:checked){background:none;border-color:var(--line);box-shadow:none}
.out:has(input:checked) .tick{border-color:var(--v-verified);color:var(--v-on-status);background:var(--v-verified)}
.out:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.out.fixed{cursor:default}
.out.locked{opacity:1;cursor:not-allowed}
.runbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:24px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
.pips{display:flex;gap:8px;align-items:center}
.pips i{width:6px;height:6px;border-radius:50%;background:var(--line-strong);transition:background-color .12s var(--ease)}
.pips i.on{background:var(--primary)}
.runbar .lbl{font:400 14px/1.5 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none}
.runbar .go{margin-left:auto}
.runbar[data-ready="true"] .lbl{color:var(--ink);font-weight:600}

/* ===== 8 · runline — the four stages as a quiet vertical list ===== */
.runline{display:flex;flex-direction:column;gap:0;align-items:stretch}
.rarrow{display:none}
.rbox,.rbox.grow,.rbox.grow2{flex:none;min-width:0;background:transparent;border:0;border-top:1px solid var(--line);border-left:2px solid transparent;border-radius:0;padding:16px 0 16px 16px;box-shadow:none;display:flex;flex-direction:column;gap:8px}
.rbox:first-child{border-top:0}
.rbox-h{display:flex;align-items:center;gap:8px;font:500 17px/1.3 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none}
.rbox-h .rmark{margin-left:auto;font:400 14px/1 var(--sans);color:var(--ink-muted)}
.rbox[data-state="done"]{border-color:var(--line);border-left-color:transparent}
.rbox[data-state="done"]>.rbox-h .rmark{color:var(--ok)}
.rbox[data-state="now"]{border-left-color:var(--primary);box-shadow:none}
.rbox[data-state="now"]>.rbox-h{color:var(--ink)}
.rbox[data-state="wait"]{background:transparent;border-style:solid;border-left-color:transparent}
.rbox[data-state="wait"]>.rbox-h{color:var(--ink-muted)}
.rlive{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:none;margin-left:auto;flex:none;animation:pulse 1.5s ease-in-out infinite}
.rfile{font:400 14px/1.5 var(--sans);color:var(--ink);word-break:break-word}
.rmono{display:flex;flex-direction:column;gap:4px;font:400 14px/1.5 var(--mono);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.rnote{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.rnote .sources{color:var(--ink);font-weight:500}
.reassure{margin:0;display:flex;gap:8px;align-items:center;color:var(--ink-muted);font-size:14px;line-height:1.5}
.rfoot{margin-top:auto;font:400 13px/1.5 var(--sans);color:var(--ink-muted)}
.rstage{display:flex;gap:4px}
.rstage i{flex:1;height:3px;border-radius:2px;background:var(--line-strong)}
.rstage i.done,.rstage i.now{background:var(--primary)}
.rstage i.stopped{background:var(--attention)}
.rfind{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rfind li{padding:6px 12px;border:0;border-left:2px solid var(--ink-muted);border-radius:0;background:transparent;display:flex;flex-direction:column;gap:2px}
.rfind .rk{font:500 13px/1.4 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.rfind li[data-k="superseded"]{border-left-color:var(--stop)}
.rfind li[data-k="superseded"] .rk{color:var(--stop)}
.rfind li[data-k="refined"]{border-left-color:var(--warn)}
.rfind li[data-k="refined"] .rk{color:var(--warn)}
.rfind li[data-k="verified"]{border-left-color:var(--ok)}
.rfind li[data-k="verified"] .rk{color:var(--ok)}
.rfind .rt{font-size:14px;line-height:1.5;color:var(--ink)}
.rfind li.empty{border-left-color:var(--line-strong);color:var(--ink-muted);font-size:14px}
.rghost{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--r);color:var(--ink-muted);font:400 14px/1.4 var(--sans);opacity:1}
.rghost svg{width:15px;height:15px;flex:none}
.run-elapsed{font:400 14px/1 var(--mono);color:var(--ink-muted);letter-spacing:0;text-transform:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.sys-chip{--sys:var(--ink-muted);display:inline-flex;align-items:center;padding:6px 10px;border-radius:var(--r);background:var(--surface-2);color:var(--ink);box-shadow:none;font:500 14px/1 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap}
.state .elapsed,.elapsed{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ===== 9 · results — export line, the findings, the margin rail ===== */
.xstrip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:transparent;border:1px solid var(--line);border-radius:var(--r);box-shadow:none;padding:16px 20px;margin:0 0 48px}
.xstrip .xdone{font:500 14px/1.4 var(--sans);color:var(--ok);letter-spacing:0;text-transform:none;white-space:nowrap}
.xpills{display:flex;gap:16px;flex-wrap:wrap;margin:0;padding:0}
.xpills span{display:inline;background:transparent;border:0;padding:0;font:400 14px/1.4 var(--sans);color:var(--ink);white-space:nowrap}
.xacts{margin-left:auto;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.xacts .btn svg{width:15px;height:15px;flex:none;margin-right:6px}
.vt-count{view-transition-name:none;animation:none}
::view-transition-old(*),::view-transition-new(*){animation:none}
.xfade{animation:none}
.rgrid{display:flex;gap:0;align-items:flex-start}
.rnote-col{flex:1;min-width:0;padding-right:32px;display:flex;flex-direction:column;gap:24px}
.rrail{width:240px;flex:none;padding-left:24px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:24px}
.rrail .rcount{display:flex;align-items:baseline;gap:8px;margin-top:8px;font-variant-numeric:tabular-nums}
.rrail .rcount b{font:500 29px/1 var(--mono);color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums}
.rrail .rcount span{font-size:14px;color:var(--ink-muted)}
.rleg{display:flex;flex-direction:column;gap:8px;font:400 14px/1.5 var(--sans)}
.rleg>span{display:flex;align-items:center;gap:10px}
.rleg .lk{flex:1;color:var(--ink-muted)}
.rleg i{width:7px;height:7px;border-radius:50%;flex:none}
.rrail-card{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:16px 0 0}
.rrail-card .k{font:500 14px/1.4 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.rrail-card p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.rrail-note{display:flex;flex-direction:column;gap:8px;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.rrail-note .fine{font:400 13px/1.5 var(--sans);color:var(--ink-muted)}
/* findings (gutter rows) */
.cards>*+*{margin-top:16px}
.gut-list{display:flex;flex-direction:column;gap:0}
.cards.gut-list>*+*{margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.gut{display:flex;gap:16px;align-items:flex-start;min-width:0}
.gut>.stamp{width:110px;flex:none;justify-content:center;box-sizing:border-box}
.gut-b{flex:1;min-width:0}
.gut-b,.gut-b *{min-width:0;overflow-wrap:anywhere}
.cards,.gut{min-width:0;max-width:100%}
.gut-b>b{display:block;font:600 17px/1.3 var(--sans);color:var(--ink);margin:0 0 4px}
.gut-b>p{margin:0;color:var(--ink)}
.gut-src{font:400 14px/1.5 var(--sans);color:var(--ink-muted);margin:0}
.gut-src a{color:var(--v-link)}
.gcard{background:transparent;border:1px solid var(--line);border-radius:var(--r);padding:16px 20px}
.gcard>b{display:block;font:600 17px/1.3 var(--sans);margin:0 0 12px;color:var(--ink)}
.gcard .gut-src{margin:12px 0 0}
.gh{display:flex;align-items:baseline;gap:12px;justify-content:space-between;margin:0 0 12px}
.gh b{font:600 17px/1.3 var(--sans);color:var(--ink)}
.gut .fcard-link{margin-left:auto}
.gh .fcard-link,.gut-b .fcard-link{flex:none;min-width:max-content}
.gh b{min-width:0}
.cmp{display:flex;gap:24px;align-items:flex-start}
.cmp>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cmp .k{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.cmp s{font:500 20px/1.5 var(--mono);color:var(--ink-muted);text-decoration:line-through;text-decoration-color:var(--ink-muted);text-decoration-thickness:1px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cmp b{font:500 20px/1.5 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cmp .src{font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.cmp-div{width:1px;align-self:stretch;background:var(--line);flex:none}
.gcard .gwhy,.gwhy{font-size:17px;line-height:1.6;color:var(--ink);margin:12px 0 0}
.prose-pair{margin:0;display:grid;gap:8px}
.prose-pair p{margin:0;font-size:17px;line-height:1.6;color:var(--ink)}
.prose-pair p b{font:500 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none;margin-right:8px}
.prose-pair p.muted{color:var(--ink-muted)}
/* legacy finding block, popover, rails (kept styled; nothing emits them today) */
.finding{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 20px;--status:var(--ink-muted);--rail-lec:var(--ink-muted);--lift:0}
.finding[data-status="verified"]{--status:var(--ok);--rail-lec:var(--ok)}
.finding[data-status="refined"]{--status:var(--warn);--rail-lec:var(--warn)}
.finding[data-status="superseded"]{--status:var(--stop);--rail-lec:var(--stop)}
.finding:hover,.finding:focus-within{background:transparent;border-color:var(--line);--lift:0}
.finding::before{content:none}
.finding .edge{display:none}
.fmeta{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none;margin:0 0 12px;display:flex;gap:0 8px;flex-wrap:wrap}
.fmeta i{font-style:normal}
.finding .fh{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:start;margin:0 0 16px}
.finding .fh h3{grid-column:1;font:600 20px/1.3 var(--sans);letter-spacing:0;margin:0}
.rails{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.rail-row{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}
.rail-k{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.rail-v{font:500 20px/1.5 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.rail-row.lecture .rail-v{color:var(--ink-muted)}
.rail{display:none}
.js .finding.reveal .rail i,.finding.reveal .fh .stamp{animation:none}
.ffoot,.finding .ffoot{margin:12px 0 0;font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.src-btn{background:none;border:0;border-bottom:1px solid currentColor;padding:2px 0;cursor:pointer;font:400 14px/1.4 var(--sans);color:var(--v-link);letter-spacing:0;text-transform:none;border-radius:0}
.src-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.popover{position:absolute;left:24px;right:24px;bottom:48px;z-index:30;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:none;padding:12px 16px;display:none;max-width:calc(100vw - 32px);color:var(--ink);font-size:14px;line-height:1.5}
.popover.is-open{display:grid;gap:8px;animation:fadein .16s var(--ease)}
.popover h4,.popover dt{font:500 14px/1.4 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.popover dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 16px}
.popover dd{margin:0;min-width:0;overflow-wrap:anywhere}
.popover a{color:var(--v-link)}
/* the reveal sequence — everything stays visible; the frozen script only adds classes */
.seq .rsum,.seq .cards>*,.seq .cards>.gut,.seq .cards>.card,.seq .cards>.finding,.seq .cards>.in,.seq .delivery,.seq .delivery.in,.seq .close,.seq .close.in{opacity:1;transform:none;transition:none;animation:none}
.dof>*,.dof-wait>*,.dof>:not(.is-open):not(.popover){filter:none;opacity:1;transition:none}
.tilt{transform:none !important;transition:none}
.tilt::after{display:none}
.reveal,.in,.choreo,.choreo-block,.entered,.typing-target,.viewt{opacity:1;transform:none;visibility:visible}
.srail{display:none}
.pin{position:static}
.pin .pin-stage{position:static;height:auto;overflow:visible}
.ticker,.caret{display:none}
.counters{animation:none}
.rsum{font:400 20px/1.5 var(--sans);color:var(--ink-muted);display:flex;gap:8px 16px;flex-wrap:wrap;align-items:baseline;margin:0 0 24px;font-variant-numeric:tabular-nums}
.rsum i{font-style:normal;color:var(--line-strong)}
.rsum b{font:500 24px/1.3 var(--mono);color:var(--ink)}
.rsum .unit{color:var(--ink-muted)}
.delivery{display:flex;gap:12px 16px;align-items:center;flex-wrap:wrap;padding:0;border:0;background:transparent;box-shadow:none;margin-top:0}
.xacts.delivery{margin-left:auto}
.reassure .dot.now{animation:none}
.delivery .eyebrow{margin:0 8px 0 0}
.close{margin-top:32px;display:grid;gap:12px;max-width:var(--measure)}
.close h3{font:600 20px/1.3 var(--sans);letter-spacing:0}
.close p{color:var(--ink-muted)}
.close .honest{font-size:14px;line-height:1.5;color:var(--ink-muted);opacity:1;margin-top:8px}
.srcs{list-style:none;margin:0;padding:0;display:grid;gap:0}
.srcs li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:12px;align-items:baseline;font-size:14px;line-height:1.5;padding:8px 0;border-bottom:1px solid var(--line)}
.srcs li:last-child{border-bottom:0}
.srcs .dot{align-self:center}
.srcs .g{color:var(--ink);min-width:0}
.srcs .g small{display:block;color:var(--ink-muted);font-size:13px;overflow-wrap:anywhere}
.srcs .v{font-family:var(--mono);font-size:13px;color:var(--ink-muted);white-space:nowrap}
/* the recheck readout — rendered inline, no hover disclosure */
.readout{position:relative;display:grid;gap:8px;padding:16px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;font:400 14px/1.5 var(--sans);color:var(--ink-muted);min-width:0;cursor:default}
.readout b{color:var(--ink);font-weight:600}
.readout i{font-style:normal;color:var(--line-strong);margin:0 .4em}
.readout .days{color:var(--ink)}
.readout.soon .days{color:var(--ink);font-weight:600}
.readout-bar{height:3px;background:var(--surface-2);border-radius:2px;overflow:hidden;position:relative}
.readout-bar i{display:block;height:100%;background:var(--primary);margin:0;transition:none}
.readout.soon .readout-bar i{background:var(--warn)}
.readout .ro-list{display:block;position:static;min-width:0;max-width:none;padding:8px 0 0;background:transparent;border:0;border-radius:0;box-shadow:none;animation:none;text-transform:none;letter-spacing:0}
.readout .ro-list ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.readout .ro-list li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:0 8px;align-items:baseline;font-size:14px;padding:2px 0;color:var(--ink);min-width:0}
.readout .ro-list li .dot{align-self:center}
.readout .ro-list li span{min-width:0;overflow-wrap:anywhere}
.readout .ro-list li small{grid-column:2;color:var(--ink-muted);white-space:normal;overflow-wrap:anywhere;font-size:13px}
.rrail,.rrail>*{min-width:0;overflow-wrap:anywhere}
.readout .ro-list h4{font:500 14px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-muted);margin:0 0 4px}
/* lecture rows + the stage ledger */
.rows{margin:0;padding:0;list-style:none;display:grid;gap:0}
.rows>li{border-top:1px solid var(--line)}
.rows>li:first-child{border-top:0}
.row{display:grid;grid-template-columns:auto minmax(180px,1.1fr) minmax(240px,1.4fr) auto;gap:0 24px;align-items:center;padding:12px 0;text-decoration:none;color:inherit;border-radius:0;min-height:64px}
.row:hover .name b{text-decoration:underline;text-underline-offset:3px}
.row .stamp-col,.lrow .stamp-col{display:flex;align-items:center;min-width:120px}
.row .name,.lrow .name{padding:4px 0;min-width:0;text-decoration:none;color:inherit}
.row .name b,.lrow .name b{display:block;font-weight:600;overflow-wrap:anywhere}
.row .name small,.lrow .name small{display:block;color:var(--ink-muted);font:400 14px/1.5 var(--sans)}
.row .state{padding:4px 0;text-align:right;font-size:14px;line-height:1.5;color:var(--ink-muted);white-space:normal}
.row .state b{color:var(--ink)}
.ledger{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;align-items:stretch}
.cell{position:relative;height:24px;border-radius:0;background:transparent;font:400 13px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-muted);display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;font-style:normal;padding:0 2px}
.cell::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}
.cell.done{color:var(--ink-muted)}
.cell.done::before{background:var(--primary)}
.cell.now{color:var(--ink)}
.cell.now::before{background:var(--primary);width:100%;animation:none;transform:none}
.cell.stopped{color:var(--attention)}
.cell.stopped::before{background:var(--attention)}
.empty{color:var(--ink-muted)}
.rows.list .lrow{display:grid;grid-template-columns:auto minmax(200px,1.4fr) minmax(160px,1fr) auto auto;gap:0 24px;align-items:center;padding:12px 0;border-radius:0;min-height:64px}
.lrow .name:hover b{text-decoration:underline;text-underline-offset:3px}
.lrow .status{font-size:14px;line-height:1.5;color:var(--ink-muted)}
.lrow .status b{color:var(--ink)}
.lrow .count{font:400 14px/1.5 var(--sans);color:var(--ink-muted);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.lrow .count b{color:var(--ink);font:500 20px/1.3 var(--mono);font-variant-numeric:tabular-nums}
.lrow .links{display:flex;gap:12px;font-size:14px;line-height:1.5;white-space:nowrap}
.lrow .links a{display:inline-flex;align-items:center;min-height:24px}

/* ===== 10 · note · callouts · tables · shareable card · report · details ===== */
.note{background:transparent;border:0;box-shadow:none;padding:0;max-width:var(--measure);border-radius:0}
.note .note-head{padding:0;margin:0 0 16px}
.note .note-head h1,.note-head,.note h2{font:600 24px/1.25 var(--sans);letter-spacing:-0.01em;color:var(--v-heading);margin:0 0 16px}
.note-section{margin:0;padding:0;border:0}
.note-section+.note-section{margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.note-section h2{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:0}
.note-section h3,.note h3{font:600 20px/1.3 var(--sans);letter-spacing:0;padding:0;margin:24px 0 8px}
.note-section h4,.note h4{font:600 17px/1.4 var(--sans);padding:0;margin:16px 0 4px}
.note p,.note li{font-size:17px;line-height:1.6;max-width:var(--measure)}
.note p+p{margin-top:12px}
.note-section p,.note-section ul,.note-section ol,.note-section .tbl,.note-section aside,.note-section pre,.note-section figure{margin:8px 0;padding-left:0;padding-right:0}
.note ul,.note ol,.note-section ul,.note-section ol{padding-left:20px}
.note-section li+li{margin-top:4px}
.note-section li>ul,.note-section li>ol{margin:4px 0 0}
.note > p.meta,.note > .callout{margin:8px 0}
.note p.meta,.meta{color:var(--ink-muted);font:400 14px/1.5 var(--sans);letter-spacing:0}
.note .status-line,.status-line{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none;margin:8px 0 16px}
.callout,.note .callout{display:block;background:none;border:0;border-left:2px solid var(--ink-muted);border-radius:0;padding:4px 0 4px 16px;margin:16px 0;color:var(--ink);max-width:var(--measure);font-size:17px;line-height:1.6}
.note .callout[data-role]{display:block;border-left-width:2px}
.callout-rule,.note .callout-rule{border-left-color:var(--stop);background:none}
.callout-key,.note .callout-key{border-left-color:var(--ok);background:none}
.callout-tension,.note .callout-tension{border-left-color:var(--warn);background:none}
.callout-drift,.note .callout-drift{border-left-color:var(--primary);background:none}
.callout-insight,.callout-owner,.note .callout-insight,.note .callout-owner,.note .callout-insight[data-role]{border-left-color:var(--ink-muted);background:none;font:400 17px/1.6 var(--sans)}
.callout-icon,.note .callout .callout-icon{display:none}
.callout-body,.note .callout .callout-body{font-size:17px;line-height:1.6;min-width:0}
.note-section[data-kind="exam"] ul{border:0;padding:0 0 0 20px;background:none}
.note .pos{font:500 14px/1.5 var(--sans);letter-spacing:0;text-transform:none;padding:0;border:0;border-radius:0;margin-right:4px;color:var(--ink-muted)}
.note .pos-current{color:var(--primary);border:0}
.unverified,.note .unverified{display:inline-flex;align-items:center;gap:6px;background:var(--v-unchecked);color:var(--v-on-unchecked);border:0;border-radius:var(--r-pill);padding:1px 8px;font:600 13px/1.5 var(--sans);letter-spacing:0;text-transform:none;vertical-align:middle}
.unverified::before{content:none}
.note .stamp{font-size:13px}
.note a{color:var(--v-link)}
.note .val{background:none;padding:0;border-radius:0}
.note code{font-size:15px}
.note pre{font:400 15px/1.5 var(--mono);background:var(--surface-2);border:0;padding:12px 16px;overflow-x:auto;white-space:pre;border-radius:var(--r)}
.note figure.diagram,.diagram{margin:16px 0;padding:0;border:0;background:transparent;max-width:100%;overflow-x:auto}
.mm,.mermaid,.note figure.diagram .mermaid,.note figure.diagram .mm{--mermaid-font-family:var(--sans);display:block;background:var(--diagram-ground);color:var(--diagram-ink);border:0;padding:16px;border-radius:var(--r-lg);overflow-x:auto;max-width:100%;white-space:pre-wrap}
.mm svg,.note figure.diagram svg{max-width:100%;height:auto;display:block}
.note figcaption{font:400 14px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-muted);margin-top:4px}
.note-section.toggle>details>summary{list-style:none;cursor:pointer;display:block}
.note-section.toggle>details>summary::-webkit-details-marker{display:none}
.note-section.toggle>details>summary h2::before{content:"▸";font-family:var(--sans);color:var(--ink-muted);margin-right:8px;display:inline-block;transition:none}
.note-section.toggle>details[open]>summary h2::before{content:"▾"}
.note-section.toggle>details>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.note-section[data-kind="numbers"] td:nth-child(2),.note-section[data-kind="drift"] td:nth-child(2),.note-section[data-kind="drift"] td:nth-child(3){font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
/* tables */
.tbl{overflow-x:auto;max-width:100%;min-width:0}
.note,.note-section,.rnote-col,.gut-b,.gcard{min-width:0}
.tbl table,table.tbl,.note table{width:100%;border-collapse:collapse;font-size:17px;line-height:1.5}
.note-section .tbl{max-width:none}
th,.tbl th,.note th{font:500 14px/1.4 var(--sans);color:var(--ink);background:var(--surface-2);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);letter-spacing:0;text-transform:none;vertical-align:bottom}
td,.tbl td,.note td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;font-variant-numeric:tabular-nums}
.tbl.mono td,table.tbl.mono td{font-family:var(--mono);font-size:14px}
.tbl-body{background:transparent;border:0}
.card.dense.tbl{border:0;padding:0;overflow-x:auto}
/* the shareable finding card */
.fcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:grid;gap:20px;color:var(--ink);max-width:100%;box-shadow:none;--status:var(--ink-muted)}
.fcard[data-status="verified"]{--status:var(--ok)}
.fcard[data-status="refined"]{--status:var(--warn)}
.fcard[data-status="superseded"]{--status:var(--stop)}
.fc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.fc-brand{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:4px}
.fc-brand b{color:var(--ink);font:600 14px/1.5 var(--sans);letter-spacing:0;text-transform:none;font-stretch:normal}
.fc-brand i{font-style:normal;color:var(--line-strong);margin:0 .25em}
.fc-topic{font:600 20px/1.3 var(--sans);letter-spacing:0;color:var(--v-heading);max-width:none}
.fc-lede{color:var(--ink);font-size:17px;line-height:1.6;max-width:var(--measure);margin:0}
/* the gist: what survived, what moved — one ticked or crossed line each, read before any prose */
.fc-gist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fc-gist li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:start;font:500 17px/1.5 var(--sans);color:var(--ink);min-width:0}
.fc-gist .ic{width:16px;height:16px;margin-top:5px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fc-gist .keep .ic{stroke:var(--ok)}
.fc-gist .gone{color:var(--ink-muted)}
.fc-gist .gone .ic{stroke:var(--stop)}
@media (forced-colors: active){.fc-gist .ic{stroke:CanvasText}}
.fc-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--line);padding-top:16px}
.fc-col{min-width:0;display:grid;gap:8px;align-content:start;border-left:2px solid var(--line-strong);padding-left:16px}
.fc-col.current{border-left-color:var(--status)}
.fc-label{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none;margin:0}
.fc-label em{font-style:normal;color:var(--ink-muted)}
.fc-col.current .fc-label{color:var(--ink-muted)}
.fc-rows{display:grid;gap:0;margin:0}
.fc-rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.fc-rows dt{font:400 14px/1.5 var(--sans);color:var(--ink-muted);margin:0}
.fc-rows dd{margin:0;font:500 17px/1.5 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.fc-rows .kept dd{color:var(--ink)}
.fc-rows .struck dd,.fc-rows .struck dd s{color:var(--ink-muted);text-decoration:line-through;text-decoration-color:var(--ink-muted);text-decoration-thickness:1px;position:static}
.fc-rows .struck dd s::after{content:none}
.fc-note{font:400 14px/1.5 var(--sans);color:var(--ink-muted);margin:0}
.fc-big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0;font:500 24px/1.3 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.fc-big .val{font:500 24px/1.3 var(--mono);color:var(--ink);letter-spacing:0;animation:none}
.fc-col.taught .fc-big,.fc-col.taught .fc-big .val{color:var(--ink-muted);text-decoration:line-through;text-decoration-color:var(--ink-muted);text-decoration-thickness:1px}
.fc-col.current .fc-big,.fc-col.current .fc-big .val{color:var(--ink);text-decoration:none}
.fc-big small{font:400 14px/1.4 var(--sans);color:var(--ink-muted);max-width:16ch}
.fc-text{font:400 17px/1.6 var(--sans);margin:0;color:var(--ink)}
.fc-col.taught .fc-text,.fc-col.taught .fc-text .val{color:var(--ink-muted)}
.fc-col.current .fc-text .val{background:none;padding:0;font-weight:500}
.fc-pair.prose .fc-text{font-family:var(--sans)}
.fc-still{margin:0;padding:12px 0 0;border-top:1px solid var(--line);color:var(--ink-muted);font-size:14px;line-height:1.5}
.fc-still b{color:var(--ink);font:500 14px/1.5 var(--sans);letter-spacing:0;text-transform:none;margin-right:8px}
.fc-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;border-top:1px solid var(--line);padding-top:12px;font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.fc-foot .fc-chain{grid-column:1;color:var(--ink-muted)}
.fc-foot .fc-chain i{font-style:normal;color:var(--ink-muted);margin:0 .5em}
.fc-foot .fc-lec,.fc-foot .fc-where{grid-column:1;color:var(--ink-muted)}
.fc-foot .fc-url{grid-column:2;grid-row:1 / span 3;align-self:end;font:400 14px/1.5 var(--mono);color:var(--ink-muted);letter-spacing:0;text-transform:none;font-stretch:normal}
.fcard-link{white-space:nowrap}
.js .fcard.in .stamp.xl,.js .fcard.in .fc-big .val{animation:none}
.bare *,.bare *::before,.bare *::after{animation:none !important;transition:none !important}
.bare .top,.bare .foot,.bare .cardtools,.bare .cardhint{display:none}
.bare main{padding:0;max-width:640px}
.cardpage main{max-width:calc(640px + 48px);padding-top:24px}
.cardtools{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 16px;font-size:14px;color:var(--ink-muted)}
.cardtools .back{margin:0}
.cardhint{margin-top:16px}
.cardpage .fcard{padding:24px}
.cardpage .fc-pair{grid-template-columns:1fr;gap:16px}
/* the deck report, tags, bars, details */
.report{padding:0;border:0;background:transparent;border-radius:0}
.card.report{border:1px solid var(--line);padding:0 24px}
.rl{display:grid;grid-template-columns:140px 100px 160px 1fr;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);min-width:0}
.rl>*{min-width:0;overflow-wrap:anywhere}
.rl:last-child{border-bottom:none}
.rl .k{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.rl .v{font:500 20px/1.5 var(--mono);color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums}
.rl .ref{font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.rl .wide{grid-column:2 / -1}
.bar{height:4px;background:var(--surface-2);border:0;position:relative;overflow:hidden;border-radius:2px}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--primary)}
.bar em{position:absolute;top:0;bottom:0;width:2px;background:var(--ink-muted)}
.bar.low i{background:var(--line-strong)}
.tags{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;line-height:1.5;color:var(--ink-muted)}
.tags b{color:var(--ink);font-family:var(--mono);font-weight:500}
details.more{font-size:14px;line-height:1.5;color:var(--ink-muted);margin:12px 0 0}
details.more summary,details.tech summary{cursor:pointer;padding:8px 0;font:500 14px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-muted);min-height:24px}
details.more summary:hover,details.tech summary:hover{color:var(--ink)}
details.more ul{margin:8px 0 0 20px;padding:0}
details.more pre{font:400 13px/1.5 var(--mono);white-space:pre-wrap;margin:8px 0 0;color:var(--ink-muted)}
details.tech{margin-top:24px}
details.tech .techmeta{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font:400 13px/1.5 var(--mono);margin:8px 0 0}
details.tech .techmeta dt{color:var(--ink-muted);text-transform:none;letter-spacing:0}
details.tech .techmeta dd{margin:0;color:var(--ink-muted);word-break:break-word}
.stage-detail{margin:0;color:var(--ink-muted);font-size:14px;line-height:1.5;max-width:var(--measure)}
.stage-detail .sources{color:var(--ink);font-weight:500;margin-left:8px}

/* ===== 11 · surfaces, strip, plan, Notion, public pages ===== */
.l1,.l2,.l3,.panel,.card,.plan,.row,.lrow,.note,.fcard,.finding,.work,.report,.drop,.demo,.readout,.notion-panel,.pipe,.strip,.tbl-body{box-shadow:none}
.l1,.l2{background:var(--surface-2);border:1px solid var(--line)}
.l3{background:var(--surface);border:1px solid var(--line-strong)}
.glass{background:var(--surface);border:1px solid var(--line-strong);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:none}
.card.dense{border:0;padding:0}
.card.split{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.card.split>.act{flex:none}
.card.split .stamp{margin-right:12px}
.card.empty{border-style:dashed;color:var(--ink-muted);padding:32px}
.card.empty .eyebrow{margin-bottom:8px}
.card.empty p{max-width:var(--measure-s)}
.card.empty .btn{margin-top:16px}
.card.edge{border-left:2px solid var(--ink-muted)}
.card h2,.card h3{font:600 20px/1.3 var(--sans);letter-spacing:0;margin:0 0 12px;color:var(--v-heading)}
.card p+p{margin-top:8px}
.card ul{margin:8px 0 0;padding:0 0 0 20px}
.card li+li{margin-top:4px}
.card code{font-family:var(--mono);font-size:15px;background:var(--surface-2);border-radius:var(--r);padding:0 4px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
/* the allowance strip — one sentence, a dot, a link; never a banner */
.strip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;min-height:44px;padding:8px 16px;border:0;border-radius:var(--r);background:var(--surface-2);font:400 14px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);margin:0;font-variant-numeric:tabular-nums}
.strip b{color:var(--ink);font-weight:600}
.strip>span{color:var(--ink-muted)}
.strip .dot{color:var(--ink-muted);margin:0}
.strip.warn .dot{color:var(--warn)}
.strip.stop .dot{color:var(--attention)}
.strip.warn b,.strip.stop b{color:var(--ink)}
.strip a{margin-left:auto;color:var(--v-link);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:24px;letter-spacing:0}
.strip.section{margin-bottom:24px}
/* the one plan */
.plans{display:flex;flex-direction:column;align-items:stretch;gap:24px;max-width:34rem;margin:0 auto;justify-content:flex-start}
.plan-free{width:100%;display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;padding:24px;border-radius:var(--r-lg);background:var(--v-tint);border:1px solid var(--v-mist);box-shadow:none}
.plan-free>div{flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px}
.plan-free b{font-size:17px;font-weight:600;color:var(--ink)}
.plan-free small{font-size:14px;line-height:1.5;color:var(--ink-muted)}
.plan-free .btn{flex:none}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;display:grid;gap:20px;align-content:start;box-shadow:none;width:100%;max-width:34rem;margin:0 auto;text-align:left}
.plan-k{display:flex;justify-content:space-between;align-items:center;gap:12px;font:400 14px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-muted)}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font:500 35px/1 var(--mono);color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums;border:0;padding:0;justify-content:flex-start}
.price .amt{font-size:35px;font-variant-numeric:tabular-nums}
.price .per{font:400 17px/1.4 var(--sans);color:var(--ink-muted);letter-spacing:0}
.plan-lectures{font:400 17px/1.5 var(--sans);color:var(--ink);margin:-8px 0 0}
.plan-lectures .val{font-size:17px;font-weight:500;margin-right:.15em}
.plan-hr{width:100%;height:1px;background:var(--line);border:0;margin:0}
.plan h3{font:600 20px/1.3 var(--sans);letter-spacing:0;margin:0}
.plan p{color:var(--ink-muted);font-size:14px;line-height:1.5}
.units{margin:0;padding:0;list-style:none;display:grid;gap:0;font-size:17px;line-height:1.6;text-align:left}
.units li{display:block;padding:8px 0;border-top:1px solid var(--line);color:var(--ink)}
.units li:first-child{border-top:0;padding-top:0}
.units li::before{content:none}
.units li.keep{font-weight:600;color:var(--ink)}
.units li.keep small{display:block;font-weight:400;color:var(--ink-muted);font-size:14px;margin-top:2px}
.payfor{width:100%;padding:16px 20px;border-radius:var(--r);background:transparent;border:1px solid var(--line);text-align:left}
.payfor .k{font:500 14px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-muted)}
.payfor p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.plan .btn{justify-self:stretch;width:100%}
.plan-foot,.plan-billed,.plan-secondary{font:400 14px/1.5 var(--sans);color:var(--ink-muted);margin:0}
.plan-foot b,.plan-secondary .val{color:var(--ink)}
.plan-secondary .val{font-size:14px;letter-spacing:0;text-transform:none;margin-right:8px}
.plan-more{display:flex;flex-direction:column;gap:8px;font:400 14px/1.5 var(--sans);color:var(--ink-muted);margin:0;justify-content:flex-start}
.plan-more b,.plan-cancel b{color:var(--ink)}
.plan-cancel{max-width:var(--measure);text-align:left;font:400 14px/1.5 var(--sans);color:var(--ink-muted);margin:0}
/* Notion */
.notion-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px 16px;align-items:start;box-shadow:none}
.notion-panel .nmark{width:32px;height:32px;color:var(--ink)}
.notion-panel .nmark svg{width:100%;height:100%;display:block}
.notion-panel .nbody{display:grid;gap:12px;min-width:0}
.nstate,.notion-panel .nstate{display:inline-flex;align-items:center;gap:6px;justify-self:start;border-radius:var(--r-pill);padding:2px 10px;font:600 14px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--v-on-unchecked);background:var(--v-unchecked)}
.nstate::before{content:none}
.nstate.on,.notion-panel .nstate.on{background:var(--v-verified);color:var(--v-on-status)}
.nstate.off,.notion-panel .nstate.off{background:var(--v-unchecked);color:var(--v-on-unchecked)}
.nstate .mark{display:none}
.nwhere,.notion-panel .nwhere{font:400 14px/1.5 var(--sans);color:var(--ink);display:grid;gap:2px}
.nwhere small,.notion-panel .nwhere small{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none;margin-right:8px}
.nwhere .id,.nwhere code{font:400 14px/1.5 var(--mono);color:var(--ink-muted);background:none;padding:0}
.nacts,.notion-panel .nacts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.nnote,.notion-panel .nnote{font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.struct{font:400 14px/1.7 var(--mono);color:var(--ink-muted);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin:0;display:block;white-space:pre-wrap;overflow-x:auto}
.struct b{color:var(--ink);font-weight:500}
.struct .ok{color:var(--ink);font-weight:500}
.struct .sys{display:inline}
/* public pages */
.prose h2{font:600 24px/1.25 var(--sans);letter-spacing:-0.01em;margin:48px 0 12px}
.prose h2:first-of-type{margin-top:0}
.prose .page-head+h2{margin-top:0}
.prose p,.prose li{max-width:var(--measure)}
.prose p+p{margin-top:12px}
.prose ul{padding-left:20px;margin:8px 0 0}
.prose li+li{margin-top:8px}
.prose .page-head{margin-bottom:32px}
.hero{display:block;padding:16px 0 64px;max-width:none}
.hero-copy{display:grid;gap:16px}
.hero .eyebrow{margin:0}
.hero h1{font:600 35px/1.15 var(--sans);letter-spacing:-0.01em;color:var(--v-heading);margin:0;max-width:var(--measure-s)}
.hero h1 .dim{color:var(--ink-muted);display:block}
.hero h1 em{font-style:normal;color:var(--v-heading)}
.hero p{font-size:20px;line-height:1.5;color:var(--ink-muted);margin:0;max-width:var(--measure-s)}
.signup{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:transparent;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;width:100%;max-width:620px;margin-top:8px;transition:border-color .12s var(--ease)}
.signup:focus-within{border-color:var(--v-link);box-shadow:var(--glow-cy)}
.signup .su-field{flex:1;min-width:220px;display:flex;align-items:center;height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface)}
.signup:focus-within .su-field{border-color:var(--v-link)}
.signup input{flex:1;min-width:0;height:100%;background:transparent;border:0;padding:0;color:var(--ink);font-size:17px}
.signup input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.signup .suffix{font:400 14px/1 var(--mono);color:var(--ink-muted);white-space:nowrap;padding-left:2px}
.signup.ok .suffix,.signup.ok:focus-within .suffix{color:var(--ink)}
.signup.bad .suffix,.signup.bad:focus-within .suffix{color:var(--attention)}
.signup .btn{flex:none}
.signup-note{font:400 14px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-muted);margin:0}
.signup-why{font:400 14px/1.5 var(--sans);color:var(--attention);min-height:0;margin:0}
.signup-why:empty{display:none}
.demo{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:grid;gap:12px;min-height:0;align-content:start;overflow:hidden;margin-top:32px}
.demo-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font:400 14px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-muted)}
.demo-head .n{color:var(--ink-muted);font-family:var(--mono);font-variant-numeric:tabular-nums}
.demo-src{font:400 14px/1.5 var(--sans);color:var(--ink-muted);min-height:1.5em;overflow-wrap:anywhere}
.demo-src::after{content:none;display:none}
.trace,.trace-svg{display:none}
.demo-topic{font:600 17px/1.4 var(--sans);letter-spacing:0;color:var(--ink);min-height:1.4em}
.demo-pair{display:grid;gap:8px}
.demo-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:baseline;opacity:1;transform:none;transition:none}
.demo-row .k{font:400 14px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-muted);overflow-wrap:anywhere}
.demo-row .v{font:500 20px/1.5 var(--mono);color:var(--ink);letter-spacing:0;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.demo-row.lecture .v{color:var(--ink-muted)}
.demo-row .v.long{font-size:17px}
.demo-row .rail{display:none}
.demo-chip{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:30px;flex-wrap:wrap}
.demo-chip .stamp{visibility:visible;white-space:normal}
.demo-chip .since{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;flex-basis:100%}
.demo.fading>*:not(.demo-head){opacity:1;transition:none}
.demo-static .demo-row{opacity:1;transform:none}
.typing{width:auto;border:0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 24px;padding:0 0 12px;border-bottom:1px solid var(--line)}
/* a section heading outranks anything inside the section. The finding card's own topic is 24px and sits on a
   raised white panel, so a 24px heading above it lost the argument — the scale steps 30 / 24 now. */
.section-head h2{font:600 clamp(25px,2.4vw,30px)/1.2 var(--sans);letter-spacing:-0.01em}
.section-head .eyebrow{margin:0 0 4px}
.section-head h2 em,.hero h1 em{font-family:var(--serif);font-style:italic;font-optical-sizing:auto;
  font-weight:inherit;font-synthesis:none}
/* +50 and +5%: at heading size Source Serif 4's stems run light against Source Sans 3 at the same number.
   The hero needs neither — at display size the serif already carries the line. Measured, not guessed:
   _shots/b29-indigo/accent-ab.png (600 light · 650 matched · 700 heavy). */
.section-head h2 em{font-size:1.05em;font-weight:650;letter-spacing:0}
.showcase-lecture{margin:4px 0 0;font:500 18px/1.4 var(--sans);color:var(--ink-muted)}
.section-head a{font-size:14px}
.how-n{font:400 14px/1.5 var(--mono);color:var(--ink-muted);letter-spacing:0}
.how{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.how li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line)}
.how h2{font:600 20px/1.3 var(--sans);letter-spacing:0;margin:0 0 8px}
.how p{color:var(--ink-muted);max-width:var(--measure)}
.how p b{color:var(--ink)}
.k-verified,.k-refined,.k-superseded{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.82em;line-height:1.5;letter-spacing:0;text-transform:none;border-radius:var(--r-pill);padding:0 8px;vertical-align:baseline}
.k-verified{background:var(--v-verified);color:var(--v-on-status)}
.k-refined{background:var(--v-updated);color:var(--v-on-updated)}
.k-superseded{background:var(--v-conflict);color:var(--v-on-status)}
.pipe{background:transparent;border:0;border-radius:0;padding:0;display:grid;gap:0;position:relative}
.pipe-track{display:grid;grid-template-columns:1fr;gap:0;position:relative;padding:0}
.pipe-track::before{content:none}
.station{position:relative;min-width:0;display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 16px;align-items:baseline;text-align:left;color:var(--ink-muted);background:none;border:0;border-top:1px solid var(--line);padding:12px 0;margin:0;font:inherit}
.station:first-child{border-top:0;padding-top:0}
.station::before{content:none}
.station .name{font:500 17px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);overflow-wrap:anywhere}
.station .sub{font-size:14px;line-height:1.5;color:var(--ink-muted);margin:0;max-width:none}
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);background:transparent;padding:0}
.faq summary{cursor:pointer;padding:16px 0;font:500 17px/1.5 var(--sans);color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-muted);font-size:20px;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 16px;color:var(--ink-muted);max-width:var(--measure)}
.cta{margin:64px 0 0;display:grid;gap:16px;justify-items:start;padding:48px 0 0;border-top:1px solid var(--line)}
.cta h2{font:600 24px/1.25 var(--sans);letter-spacing:-0.01em;max-width:var(--measure-s)}
.cta p{color:var(--ink-muted);max-width:var(--measure-s);font-size:17px}
.showcase-wrap{display:grid;gap:12px}
.showcase-wrap .key{justify-content:flex-end}
.showcase-wrap>p{max-width:var(--measure)}
/* retired hooks, kept inert */
.upload-fx .fx-panel,.fx-panel{position:static;isolation:auto}
.upload-fx .page-head .eyebrow::after{content:none}
.fx-ready,.fx-lock,.fx-mote,.fx-ring{animation:none;transform:none;scale:1;translate:0 0}
.lbl{transform:none}
.edge{display:none}
.card.edge{display:block}
.work,.work-trace,.work-ticks,.events,.work-foot,.proc,.findings-live{font:inherit;color:inherit}
.work-trace .now,.events li{animation:none}

/* ===== 12 · responsive ===== */
@media (max-width:1100px){
  .rgrid{flex-direction:column-reverse;gap:24px}
  .rnote-col{padding-right:0}
  .rrail{width:auto;padding:0 0 24px;border-left:0;border-bottom:1px solid var(--line)}
}
@media (max-width:899px){ .pf-seq{grid-template-columns:1fr} }
@media (max-width:900px){
  .row{grid-template-columns:auto 1fr auto}
  .row .ledger{grid-column:1 / span 3;margin:0 0 8px}
  .rl{grid-template-columns:110px 80px 1fr;grid-template-areas:"k v ref" "bar bar bar"}
  .rl .k{grid-area:k}.rl .v{grid-area:v}.rl .ref{grid-area:ref}.rl .bar{grid-area:bar}
  .rl .wide{grid-column:1 / -1}
  .fc-pair{grid-template-columns:1fr;gap:16px}
  .rows.list .lrow{grid-template-columns:auto 1fr auto;row-gap:0}
  .lrow .status{grid-column:2;padding-bottom:8px}
  .lrow .count{grid-column:3;grid-row:1}
  .lrow .links{grid-column:2 / span 2;padding:0 0 8px}
  .runbar .go{margin-left:0;width:100%}
  .step-state{margin-left:0}
}
@media (max-width:760px){
  .navbtn{display:flex}
  .nav{display:none;position:absolute;left:16px;right:16px;top:calc(100% + 8px);padding:8px 16px;flex-direction:column;align-items:stretch;gap:0;border-radius:var(--r-lg);background:var(--ground);border:1px solid var(--line);box-shadow:none;z-index:30}
  .nav.open{display:flex;animation:fadein .16s var(--ease)}
  .nav a:not(.btn),.nav .menu>summary,.nav .btn,.nav .btn.primary,.nav .btn.sm{display:flex;align-items:center;min-height:44px;padding:0;font-size:17px;color:var(--ink)}
  .nav a.on,.nav .menu>summary.on{box-shadow:none;text-decoration:underline;text-underline-offset:4px}
  .menu-panel{position:static;box-shadow:none;border:0;border-left:1px solid var(--line);border-radius:0;min-width:0;padding:0 0 0 12px;margin:4px 0 8px;background:transparent;animation:none}
  .menu-panel a,.menu-panel button,.nav .menu-panel a,.nav .menu-panel button{padding:0 12px}
  main{padding-top:32px}
  .hero{padding-top:8px}
  .card,.panel,.demo,.plan,.notion-panel,.fcard{padding:16px}
  .card.report{padding:0 16px}
  .card.empty{padding:24px 16px}
  .signup{flex-direction:column;align-items:stretch;padding:16px}
  .signup .su-field{min-width:0}
  .signup .btn{width:100%}
  .notion-panel{grid-template-columns:1fr}
  .notion-panel .nmark{width:28px;height:28px}
  .drop{padding:24px 16px;min-height:180px}
  .plan-free{flex-direction:column;align-items:flex-start}
  .station{grid-template-columns:1fr}
  .how li{grid-template-columns:1fr;gap:8px}
  .demo-row{grid-template-columns:1fr;gap:2px}
}
@media (max-width:640px){
  main{padding:32px 16px 64px}
  h1,.hero h1,h1.page{font-size:29px;line-height:1.2}
  .cmp{flex-direction:column;gap:12px}
  .cmp-div{width:auto;height:1px;align-self:auto}
  .gut{flex-wrap:wrap}
  .gut>.stamp{width:auto}
  .step-head{flex-wrap:wrap}
  .strip a{margin-left:0}
  .page-head{margin-bottom:32px}
  .foot{padding:0 16px 32px;margin-top:64px}
  .top-in{padding:0 16px}
  .xstrip{padding:12px 16px}
  .xacts{margin-left:0}
}
@media (max-width:480px){
  .hero h1{font-size:29px}
  .rl{grid-template-columns:1fr;grid-template-areas:"k" "v" "ref" "bar"}
}
.card.dense.tbl,.note table,pre,.diagram,.mm,.struct{overflow-x:auto;max-width:100%}
@media (forced-colors: active){
  .btn,.stamp,.seg button,.drop,.nstate,.unverified,.toggle input,.out .tick{border:1px solid CanvasText;forced-color-adjust:none;color:CanvasText;background:Canvas}
  .btn.primary,.btn.uv{background:Highlight;color:HighlightText;border-color:Highlight}
  .seg button[aria-checked="true"]{background:Highlight;color:HighlightText;border-color:Highlight}
  .stamp::before,.dot,.nstate::before,.unverified::before,.pips i,.rlive,.dl-dot{background:CanvasText}
  :focus-visible{outline:2px solid Highlight;outline-offset:2px}
}

/* ===== 13 · reduced motion ===== */
@media (prefers-reduced-motion: reduce){ .preflight{transition:none} .preflight::before{transition:none} .preflight.sweep .pf-seq::after{display:none} .pf-seg{transition:none} .pf-trace path{stroke-dashoffset:0;animation:none} .pf-cost.pulse{animation:none} }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0s !important;animation-iteration-count:1 !important;transition-duration:0s !important;scroll-behavior:auto !important}
  .dot.now,.rlive,.stamp.working::before{opacity:1}
}
html.reduce *,html.reduce *::before,html.reduce *::after{animation-duration:0s !important;animation-iteration-count:1 !important;transition-duration:0s !important;scroll-behavior:auto !important}
html.reduce .dot.now,html.reduce .rlive,html.reduce .stamp.working::before{opacity:1}
html.reduce .preflight,html.reduce .pf-seg{transition:none}
html.reduce .pf-cost.pulse{animation:none}

/* ===== 14 · Build 7A.4 · the upload page — compatibility tail (inert): the retired upload-fx hooks, neutralised ===== */
.upload-fx .fx-burst,.upload-fx .fx-mote,.upload-fx .fx-ring,.fx-burst{display:none}
.fx-burst i{animation:none}
.upload-fx .receipt{animation:none}
.upload-fx .drop::before,.upload-fx .drop::after,.upload-fx .seg button::after,.upload-fx .pf-seg::after,.upload-fx .strip::after{content:none;display:none}
.upload-fx .drop,.upload-fx .seg button,.upload-fx .pf-seg,.upload-fx .btn.primary.go,.upload-fx .rows .row,.upload-fx .dl,.upload-fx .toggle{translate:0 0;scale:1;box-shadow:none;transition:none;animation:none}
@media (prefers-reduced-motion: reduce){ .fx-burst i{animation:none} .upload-fx .receipt{animation:none} }
/* ===== page layers — appended by Phase 3 groups A–F; partials must not contain var(--glow-cy) or the 7A.4 marker ===== */
/* ===== 15A · page layer A (Build 27 Phase 3) ===== */
/* ===== Build 27 · page layer A — the shell: skip link, nav, mobile panel, account menu, footer, theme switch, error page.
   Extends verelect.css §3 / §11 / §12; tokens only. ===== */

/* skip link — the first thing Tab reaches; invisible until it has focus */
.skip{position:absolute;left:24px;top:-100px;z-index:40;padding:0 16px;min-height:44px;display:inline-flex;align-items:center;
  font:500 14px/1 var(--sans);color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);text-decoration:none}
.skip:focus,.skip:focus-visible{top:8px;outline:2px solid var(--focus);outline-offset:2px}

/* nav — static, quiet; the current page is the only bold word */
.top{border-bottom:1px solid var(--v-navy-ink)}
.top-in{gap:32px}
.wordmark:focus-visible{outline:2px solid var(--v-mist);outline-offset:4px;border-radius:2px}
.nav a:not(.btn):focus-visible,.nav .menu>summary:focus-visible,.nav .btn:focus-visible{outline:2px solid var(--v-mist);outline-offset:4px;border-radius:2px}   /* rule 4: nothing royal or link on navy */
.nav .menu>summary{cursor:pointer}
.menu .caret{color:var(--v-mist)}
.nav .menu[open]>summary .caret,.nav .menu>summary:hover .caret{color:var(--v-on-navy)}
.menu-panel .menu-who{color:var(--ink-muted)}

/* mobile panel — an opaque surface under the menu button, 44px rows, one hairline between the links and the account rows */
@media (max-width:760px){
  .navbtn{border-color:var(--v-mist);background:transparent}
  .navbtn:hover{background:var(--v-navy-ink)}
  .navbtn[aria-expanded="true"]{background:var(--v-navy-ink)}
  .nav{left:16px;right:16px;top:calc(100% + 4px);padding:8px 16px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg)}
  .nav a:not(.btn),.nav .menu>summary,.nav .btn,.nav .btn.primary,.nav .btn.sm{min-height:44px;justify-content:flex-start;font:400 17px/1.4 var(--sans);color:var(--ink)}
  .nav a.on,.nav .menu>summary.on{font-weight:600;text-decoration:none}
  .nav a:not(.btn):focus-visible,.nav .menu>summary:focus-visible,.nav .btn:focus-visible{outline-offset:-2px;border-radius:var(--r);outline-color:var(--focus)}
  .menu .caret,.nav .menu[open]>summary .caret,.nav .menu>summary:hover .caret{color:var(--ink-muted)}
  .nav .menu{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
  .menu-panel{border-left:0;padding:0;margin:0 0 4px}
  .menu-panel .menu-who{padding:8px 0 8px;border-bottom:0;margin:0}
  .menu-panel a,.menu-panel button,.nav .menu-panel a,.nav .menu-panel button{padding:0;font-size:17px}
  .menu-panel a:hover,.menu-panel button:hover,.nav .menu-panel a:hover,.nav .menu-panel button:hover{background:none;text-decoration:underline;text-underline-offset:4px}
  .menu-panel form{margin:0;border-top:0;padding-top:0}
}

/* footer — the sentence first, then the links and the theme switch on one quiet row */
.foot-in{flex-direction:column;gap:16px}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.foot nav{gap:20px}
.foot nav a{display:inline-flex;align-items:center;min-height:24px}
.foot a:focus-visible,.theme-btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}

/* theme switch — a small text button; theme.js writes the word (the theme you will switch to) */
.theme-btn{display:inline-flex;align-items:center;gap:8px;min-height:24px;padding:0;margin:0;border:0;background:none;cursor:pointer;
  font:400 13px/1.5 var(--sans);color:var(--v-link);transition:color .12s var(--ease)}
.theme-btn::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;box-sizing:border-box;flex:none}
.theme-btn:hover{color:var(--v-link-hover);text-decoration:underline;text-underline-offset:3px}

/* error page — narrow column, the held stamp, one sentence, one primary; nothing else */
main.narrow .page-head .stamp.held{margin:0 0 16px}
main.narrow .page-head #error-title+.sub{margin-top:12px}
main.narrow .inline-actions .btn.quiet{padding-left:8px;padding-right:8px}

@media (max-width:640px){
  .skip{left:16px}
  .foot-row{align-items:flex-start;flex-direction:column;gap:12px}
}
@media (prefers-reduced-motion: reduce){ .theme-btn{transition:none} }
@media (forced-colors: active){
  .skip,.theme-btn::before{border-color:CanvasText}
  .navbtn{border-color:CanvasText}
}

/* ===== 15B · page layer B (Build 27 Phase 3) ===== */
/* ===== Build 27 · page layer B (Phase 3 partial — consolidated into verelect.css after the marker at the end of Phase 3) ===== */
/* Group B · the public pages: the landing hero and its one static finding, the pipe list, the plan, the FAQ, the CTA
   and the prose pages (support, privacy, terms). Tokens only. This sheet loads after the core, so a rule at equal
   specificity restyles the core's selector; everything else here styles a class the core does not know. */

/* ---- landing hero: one column — eyebrow, the two-line thesis, one lead sentence, the .ac.uk field, the note ---- */
.hero{display:grid;gap:48px;margin:0 0 64px;padding:8px 0 0;max-width:none}
.hero-copy{display:grid;gap:16px}
.hero .eyebrow{margin:0}
.hero h1{max-width:var(--measure-s)}
.hero .lead{font:400 20px/1.5 var(--sans);color:var(--ink-muted);margin:0;max-width:var(--measure-s)}
/* the headline: one sentence, three voices — Save in ink at full weight, the qualifier receding,
   the promise italic in the scheme's indigo over a soft tint sweep that draws itself once on arrival */
.hero h1{font:400 clamp(30px,4.8vw,54px)/1.1 var(--sans);letter-spacing:-0.02em;color:var(--v-heading);margin:0;max-width:var(--measure)}
.hero h1 strong{font-weight:700;color:var(--v-heading);letter-spacing:-0.03em}
.hero h1 .upto{font-weight:400;color:var(--ink-muted)}
.hero h1 em{font-style:italic;font-weight:600;color:var(--primary);font-size:1.02em;letter-spacing:-0.005em;
  background-image:linear-gradient(var(--primary-tint),var(--primary-tint));background-repeat:no-repeat;
  background-position:0 84%;background-size:100% .30em;padding:0 .04em;border-radius:2px;
  animation:hero-sweep .8s var(--ease) .2s both}
@keyframes hero-sweep{from{background-size:0 .30em}to{background-size:100% .30em}}
@media (prefers-reduced-motion: reduce){ .hero h1 em{animation:none} }
.hero .hero-sub{font:500 22px/1.4 var(--sans);letter-spacing:0;color:var(--ink-muted);margin:0;max-width:var(--measure)}
.hero .hero-sub em{font-style:normal;color:var(--v-subheading);font-weight:600}
/* the four steps: the number centred over its verb, the detail below as ticked lines — a row on wide screens, a column on narrow */
.hero-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px;counter-reset:none}
.hero-steps>li{display:grid;justify-items:center;align-content:start;row-gap:8px;border-top:1px solid var(--line);padding-top:16px;min-width:0;text-align:center}
.hero-steps .hs-n{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-pill);background:var(--primary-tint);color:var(--primary);font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums}
.hero-steps .hs-t{font:600 17px/1.4 var(--sans);color:var(--ink)}
.hero-steps .hs-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;justify-items:start;text-align:left;width:fit-content;max-width:100%}
.hero-steps .hs-list li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:start;font:400 14px/1.5 var(--sans);color:var(--ink-muted);min-width:0}
.hero-steps .hs-list .ic{width:14px;height:14px;margin-top:4px;fill:none;stroke:var(--v-link);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:899px){.hero-steps{grid-template-columns:1fr;gap:12px}.hero-steps>li{justify-items:start;text-align:left;padding-top:12px;row-gap:6px}.hero .hero-sub{font-size:19px}}
@media (forced-colors: active){.hero-steps .hs-n{border:1px solid CanvasText;background:Canvas;color:CanvasText}.hero-steps .hs-list .ic{stroke:CanvasText}}
.hero .signup-note{font:400 14px/1.5 var(--sans);color:var(--ink-muted);margin:0}
.hero .signup-why{font:400 14px/1.5 var(--sans);color:var(--attention);margin:0;max-width:var(--measure-s)}
.hero .signup-why:empty{display:none}
/* the signup: no box around it — a visible label, one field that shows the suffix, one button */
.signup,.signup.glass{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label label" "field btn";gap:8px 12px;align-items:center;
  background:transparent;border:0;border-radius:0;padding:0;width:100%;max-width:none;margin:32px 0 0;box-shadow:none;transition:none}
.signup:focus-within{border-color:transparent;box-shadow:none}
.signup .su-label{grid-area:label;font:500 14px/1.4 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none}
.signup .su-field{grid-area:field;flex:none;min-width:0;display:flex;align-items:center;gap:2px;height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);transition:border-color .12s var(--ease)}
.signup .su-field:hover{border-color:var(--ink-muted)}
.signup:focus-within .su-field,.signup .su-field:focus-within{border-color:var(--v-link)}
.signup.bad .su-field,.signup.bad:focus-within .su-field{border-color:var(--attention)}
.signup input{flex:1;min-width:0;height:100%;background:transparent;border:0;padding:0;color:var(--ink);font:400 17px/1.4 var(--sans)}
.signup input:focus-visible{outline:none}
.signup .su-field:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
@supports not selector(:has(a)){.signup input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}}
.signup .suffix{font:400 17px/1 var(--sans);color:var(--ink-muted);white-space:nowrap;padding:0}
.signup .suffix:empty{display:none}
.signup.ok .suffix,.signup.ok:focus-within .suffix{color:var(--ink)}
.signup.bad .suffix,.signup.bad:focus-within .suffix{color:var(--attention)}
.signup .btn{grid-area:btn;flex:none;width:auto}

/* ---- the pipe: what happens to a lecture, as six quiet rows on one thread — the order is the information ---- */
.pipe{position:relative;background:transparent;border:0;border-radius:0;padding:0}
.pipe-track{position:relative;display:grid;gap:0;padding:0}
.pipe-track::before{content:none}
.station{position:relative;display:grid;grid-template-columns:7px 120px minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:12px 0;border:0;margin:0;color:var(--ink)}
.station:first-child{padding-top:12px;border-top:0}
.station::before{content:"";display:block;grid-column:1;grid-row:1;align-self:start;width:7px;height:7px;margin-top:9px;border-radius:50%;background:var(--line-strong);position:relative;z-index:1}
.station::after{content:"";position:absolute;left:3px;top:24px;bottom:-24px;width:1px;background:var(--line)}
.station:last-child::after{content:none}
.station .name{grid-column:2;font:500 17px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);overflow-wrap:anywhere}
.station .sub{grid-column:3;font:400 17px/1.5 var(--sans);color:var(--ink-muted);margin:0;max-width:none}

/* ---- section headings without a section-head ---- */
.sec-h{font:600 clamp(25px,2.4vw,30px)/1.2 var(--sans);letter-spacing:-0.01em;color:var(--v-heading);margin:0 0 16px}
.section.rule{border-top:1px solid var(--line);padding-top:24px}

/* ---- the plan: one column ≤34rem; the free block is the only tinted block; the month's terms as a hairline section ---- */
.plans{max-width:34rem;margin:0 auto;gap:24px}
.plan-free{align-items:center;gap:12px 24px}
.plan-free .btn.secondary{border-color:var(--v-mist)}
.plan{padding:32px;gap:20px}
.payfor{border:0;border-top:1px solid var(--line);border-radius:0;padding:16px 0 0;background:transparent}
.payfor .k{display:block}
.payfor p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.plan .btn{width:100%;justify-self:stretch}
.plan .msg{margin:0}
.plan-foot{margin:0}
.plan-cancel{max-width:none}

/* ---- questions: plain rows, the answer in ink ---- */
.faq details p{color:var(--ink);font-size:17px;line-height:1.6;padding:0 0 20px;max-width:var(--measure)}
.faq summary{font-weight:500}

/* ---- the closing call: keep the core layout, the note at 14px ---- */
.cta .signup-note{font-size:14px;line-height:1.5;color:var(--ink-muted)}

/* ---- how it works: three steps as hairline sections with a numbered disc; no cards ---- */
main:has(>.how-step) .page-head{border-bottom:0;padding-bottom:0}
/* the flow: the whole page in five words each — numbered tinted stages that wrap without a dangling arrow */
.flow{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 0;padding:0;counter-reset:flow}
.flow li{counter-increment:flow;display:flex;align-items:baseline;gap:7px;font:500 14px/1.5 var(--sans);color:var(--primary);background:var(--primary-tint);border-radius:var(--r-pill);padding:5px 14px}
.flow li::before{content:counter(flow);font:600 12px/1.5 var(--mono);color:var(--v-text-muted);opacity:1;font-variant-numeric:tabular-nums}
.how-step{border-top:1px solid var(--line);padding-top:24px}
.how-step .section-head{justify-content:flex-start;align-items:center;gap:12px;margin:0 0 16px;padding:0;border-bottom:0}
/* the numbered step heads keep the old size: they sit beside a 28px disc, not above a card */
.how-step .section-head h2{font-size:24px;line-height:1.25}
.how-step .how-n{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-pill);background:var(--primary-tint);color:var(--primary);font:600 14px/1 var(--mono);letter-spacing:0;font-variant-numeric:tabular-nums;flex:none}
.how-body{display:grid;gap:16px;max-width:var(--measure)}
.how-body p{margin:0;color:var(--ink);font-size:17px;line-height:1.6}
.how-body p.muted{color:var(--ink-muted);font-size:14px}
.how-body p b{color:var(--ink)}
.how-k{font:500 14px/1.5 var(--sans);color:var(--ink-muted);margin:0}
/* the ticked lines: the same drawn glyph the hero and the finding card use */
.ic{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticks li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:start;font:400 17px/1.5 var(--sans);color:var(--ink-muted);min-width:0}
.ticks li b{color:var(--ink);font-weight:600}
.ticks .ic{width:16px;height:16px;margin-top:5px;stroke:var(--v-link)}
/* the sources it checks against: national bodies as tinted chips, the boards as a hairline table */
.chips.src{gap:6px}
.chips.src li{border-color:transparent;background:var(--primary-tint);color:var(--primary);font-weight:500;border-radius:var(--r-pill);padding:4px 12px}
.boards{display:grid;gap:0;margin:0;border-top:1px solid var(--line)}
.boards>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:2px 16px;padding:8px 0;border-bottom:1px solid var(--line)}
.boards dt{font:400 15px/1.5 var(--sans);color:var(--ink-muted);margin:0}
.boards dd{margin:0;font:500 15px/1.5 var(--sans);color:var(--ink)}
/* what comes back: three outcomes on an indigo rail, then the three stamps with what each means */
.outs-how{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.outs-how li{display:grid;gap:2px;border-left:2px solid var(--primary);padding:2px 0 2px 14px}
.outs-how b{font:600 17px/1.4 var(--sans);color:var(--ink)}
.outs-how span{font:400 15px/1.5 var(--sans);color:var(--ink-muted)}
.verdicts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.verdicts li{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;gap:4px 12px}
.verdicts .stamp{justify-self:start}
.verdicts .vk{font:400 15px/1.5 var(--sans);color:var(--ink-muted)}
/* the real run, in figures */
.runstats{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px}
.runstats li{display:flex;align-items:baseline;gap:6px}
.runstats b{font:600 20px/1.2 var(--mono);color:var(--primary);font-variant-numeric:tabular-nums}
.runstats span{font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
/* the boundary of the product, said once, in the attention colour */
.boundary{margin:0;max-width:var(--measure);border-left:2px solid var(--attention);border-radius:0 var(--r) var(--r) 0;background:var(--attention-tint);padding:16px 20px;font:400 17px/1.6 var(--sans);color:var(--ink)}
.boundary b{color:var(--ink);font-weight:600}
@media (max-width:899px){.boards>div{grid-template-columns:1fr;gap:0}.verdicts li{grid-template-columns:1fr}}
@media (forced-colors: active){.flow li,.chips.src li,.how-step .how-n{border:1px solid CanvasText;background:Canvas;color:CanvasText}.ticks .ic{stroke:CanvasText}.boundary{border:1px solid CanvasText}}

/* ---- prose pages: the draft note is a quiet aside; questions as a definition list ---- */
.prose .card.edge{display:block;border:0;border-left:2px solid var(--ink-muted);border-radius:0;padding:2px 0 2px 16px;margin:0 0 32px;font:400 14px/1.5 var(--sans);color:var(--ink-muted);max-width:var(--measure);background:transparent}
.prose .card.edge b{color:var(--ink);font-weight:500}
.prose .card.edge+h2{margin-top:0}
.prose .qa{margin:0}
.prose .qa dt{font-weight:600;color:var(--ink);max-width:var(--measure);margin:20px 0 0}
.prose .qa dt:first-child{margin-top:0}
.prose .qa dd{margin:4px 0 0;max-width:var(--measure)}
.prose li b{color:var(--ink)}

/* ---- responsive ---- */
@media (max-width:760px){
  .signup,.signup.glass{grid-template-columns:1fr;grid-template-areas:"label" "field" "btn";padding:0;gap:8px}
  .signup .su-field{min-width:0}
  .signup .btn{width:100%}
  .station{grid-template-columns:7px minmax(0,1fr);gap:2px 16px}
  .station .name{grid-column:2}
  .station .sub{grid-column:2}
  .ex-row{grid-template-columns:1fr;gap:2px}
  .plan{padding:24px 16px}
  .plan-free{padding:20px 16px;align-items:stretch}
  .plan-free .btn{width:100%}
}
@media (max-width:640px){
  .hero{gap:40px;margin-bottom:48px}
  .boards{grid-template-columns:1fr;gap:0;margin-left:20px}
  .boards dt{margin-top:6px}
  .boards dt:first-child{margin-top:0}
}
@media (forced-colors: active){
  .station::before,.station::after{background:CanvasText}
  .example-pair,.ex-row+.ex-row,.how-step,.section.rule{border-color:CanvasText}
}

/* ===== 15C · page layer C (Build 27 Phase 3) ===== */
/* ===== Build 27 · page layer C (Phase 3 partial — consolidated into verelect.css after the marker at the end of Phase 3) ===== */
/* Group C — the app shell and the account views: the auth forms, the allowance strip, the lecture rows on the upload page,
   the list on My lectures, and the two empty states. Tokens only; the only motion is the core's 120 ms hover colour.
   Group D owns the upload steps, E the lecture view (#v-lec), F subscription + settings — nothing here reaches them. */

/* C.1 · the shell — a view's last section rests on main's own bottom padding; an empty allowance slot takes no room */
#v-home>.section:last-child,#v-lectures>.section:last-child{margin-bottom:0}
#ent:empty{display:none}

/* C.2 · account views — the form is the page: one narrow column, 44px fields, one primary, the rest quiet */
#v-auth .page-head{margin-bottom:32px}
#v-auth .sub b{color:var(--ink);font-weight:600}
#v-auth .form{max-width:440px;gap:20px}
#v-auth .form>.muted.small{margin:0;color:var(--ink-muted);max-width:var(--measure-s)}
#v-auth .msg{margin:0}
#v-auth .inline-actions{gap:8px 20px;margin:4px 0 0}
#v-auth .inline-actions .btn.quiet{padding:0}
#v-auth .inline-actions+.msg{margin-top:12px}
#v-auth .page-head+.btn{margin:0}
@media (max-width:480px){
  #v-auth .form{max-width:none}
  #v-auth .inline-actions{flex-direction:column;align-items:stretch;gap:12px}
  #v-auth .inline-actions .btn.primary,#v-auth .inline-actions .btn.secondary{width:100%}
  #v-auth .page-head+.btn{width:100%}
}

/* C.3 · the allowance strip — one sentence on a quiet surface: a dot, the words, a link. Never a banner. */
#ent .strip{padding:10px 16px;gap:8px 12px;line-height:1.5;align-items:baseline}
#ent .strip .dot{align-self:center}
#ent .strip>span{color:var(--ink-muted)}
#ent .strip a{font-weight:500;white-space:nowrap}
@media (max-width:640px){
  #ent .strip{padding:12px 16px}
  #ent .strip a{margin-left:0;flex-basis:100%;white-space:normal}
}

/* C.4 · the lecture register — hairline rows, the stamp as the only colour, the state in words on the right */
.eyebrow-row{align-items:center;margin:0 0 12px}
ul.key{list-style:none;margin:0;padding:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
ul.key>li{display:inline-flex}
.rows{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rows:empty{display:none}
.rows>li:first-child{border-top:0}
.row .stamp-col,.lrow .stamp-col{min-width:108px;align-items:center}
.row .name b,.lrow .name b{font:600 17px/1.4 var(--sans);color:var(--ink)}
.row .name small,.lrow .name small{margin-top:2px;font-variant-numeric:tabular-nums}
/* upload page: stamp · title · then, on the right, the stage ledger over the state line while a check runs */
.row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;gap:0 24px;padding:16px 0;min-height:0;align-items:center}
.row .stamp-col{grid-column:1;grid-row:1 / span 2}
.row .name{grid-column:2;grid-row:1 / span 2}
.row .ledger{grid-column:3;grid-row:1;justify-self:end;width:100%;min-width:260px;gap:6px}
.row .state{grid-column:3;grid-row:2;justify-self:stretch;margin-top:6px;max-width:38ch;text-align:left;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.row .state b{color:var(--ink);font-weight:600}
.row .state .muted{color:var(--ink-muted)}
.cell{font-size:13px;color:var(--ink-muted)}
/* a finished lecture no longer needs its stage ledger — the stamp and the state line say everything it did */
.row:has(.stamp-col .stamp.verified,.stamp-col .stamp.refined,.stamp-col .stamp.superseded) .ledger{display:none}
.row:has(.stamp-col .stamp.verified,.stamp-col .stamp.refined,.stamp-col .stamp.superseded) .state{grid-row:1 / span 2;margin-top:0}
/* My lectures: stamp · title · state · findings · downloads */
.rows.list .lrow{grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr) auto auto;gap:0 24px;padding:16px 0;min-height:0;align-items:center}
.lrow .status{font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.lrow .status b{color:var(--ink);font-weight:600}
.lrow .count{text-align:right;color:var(--ink-muted);font-size:14px;white-space:nowrap}
.lrow .count b{color:var(--ink);font:500 20px/1.3 var(--mono);font-variant-numeric:tabular-nums;margin-right:2px}
.lrow .links{gap:16px;font-size:14px;line-height:1.5}
.lrow .links a{display:inline-flex;align-items:center;min-height:24px}
.lrow .links .muted{color:var(--ink-muted)}
#all-link{margin:16px 0 0}
/* the empty states — a dashed frame, one sentence, and on My lectures the page's one primary */
#v-home .card.empty,#v-lectures .card.empty{padding:32px 24px;border-style:dashed;color:var(--ink-muted)}
#v-home .card.empty .eyebrow,#v-lectures .card.empty .eyebrow{color:var(--ink);margin-bottom:8px}
#v-home .card.empty p,#v-lectures .card.empty p{margin:0;max-width:var(--measure-s)}
#v-lectures .card.empty .btn{margin-top:20px}

/* C.5 · responsive — the rows fold: the ledger drops under the title, then everything stacks */
@media (max-width:900px){
  .row{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;gap:0 16px}
  .row .stamp-col{grid-row:1 / span 3}
  .row .name{grid-column:2;grid-row:1}
  .row .ledger{grid-column:2;grid-row:2;justify-self:stretch;min-width:0;margin-top:6px}
  .row .state{grid-column:2;grid-row:3;justify-self:start;max-width:none;text-align:left;margin-top:6px}
  .row:has(.stamp-col .stamp.verified,.stamp-col .stamp.refined,.stamp-col .stamp.superseded) .state{grid-row:2;margin-top:4px}
  .rows.list .lrow{grid-template-columns:auto minmax(0,1fr) auto;gap:4px 16px}
  .lrow .status{grid-column:2}
  .lrow .count{grid-column:3;grid-row:1}
  .lrow .links{grid-column:2 / span 2}
}
@media (max-width:640px){
  .row{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:0}
  .row .stamp-col,.lrow .stamp-col{min-width:0}
  .row .stamp-col{grid-column:1;grid-row:1;margin-bottom:6px}
  .row .name{grid-column:1;grid-row:2}
  .row .ledger{grid-column:1;grid-row:3}
  .row .state{grid-column:1;grid-row:4}
  .row:has(.stamp-col .stamp.verified,.stamp-col .stamp.refined,.stamp-col .stamp.superseded) .state{grid-row:3}
  .rows.list .lrow{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px}
  .lrow .stamp-col{grid-column:1 / -1}
  .lrow .name{grid-column:1;grid-row:2}
  .lrow .count{grid-column:2;grid-row:2;align-self:start;padding-top:2px}
  .lrow .status,.lrow .links{grid-column:1 / -1}
  #v-home .card.empty,#v-lectures .card.empty{padding:24px 16px}
  #v-lectures .page-head.split .act{width:100%}
  #v-lectures .page-head.split .act .btn{width:100%}
}

/* ===== 15D · page layer D (Build 27 Phase 3) ===== */
/* ===== Build 27 · page layer D (Phase 3 partial — consolidated into verelect.css after the marker at the end of Phase 3) ===== */
/* D · the upload steps: four hairline steps, quiet segments with the full system names, the checklist and the drop zone,
   hairline guard and output rows, the run bar. Tokens only; motion is one 200 ms colour nudge, gated below. */

/* -- the head: the title in navy, the promise as an equation, the retention line small -- */
#v-home .page-head{border-bottom:0;padding-bottom:0;margin-bottom:32px}
h1.page.brandmark{color:var(--primary);letter-spacing:-0.02em}
.equation{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:12px 0 0;max-width:none}
.equation .eq-t{font:500 15px/1.4 var(--sans);color:var(--ink);background:var(--surface-2);border-radius:var(--r-pill);padding:5px 12px}
.equation .eq-t.brand{color:var(--primary);background:var(--primary-tint);font-weight:600}
.equation .eq-t.out{color:var(--primary);background:var(--primary-tint)}
.equation .eq-o{font:600 15px/1 var(--mono);color:var(--ink-muted);padding:0 1px}
.equation .eq-o.eq-eq{color:var(--primary)}
.fine-sub{font:400 14px/1.5 var(--sans);color:var(--ink-muted);margin:12px 0 0}
/* -- the briefing dialog: opens on every visit; the three things that decide whether a lecture comes back right -- */
.guide{width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 64px);padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);overflow:auto;box-shadow:none}
.guide::backdrop{background:color-mix(in srgb,var(--v-navy-ink) 45%,transparent)}
:root[data-theme="dark"] .guide::backdrop{background:color-mix(in srgb,var(--v-navy-ink) 72%,transparent)}
.guide-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 24px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
.guide-head h2{font:600 24px/1.25 var(--sans);letter-spacing:-0.01em;margin:2px 0 0;color:var(--v-heading)}
.guide-head .eyebrow{margin:0}
.guide-x{flex:none}
.guide-steps{list-style:none;margin:0;padding:20px 24px;display:grid;gap:20px}
.guide-steps>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.gs-n{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-pill);background:var(--primary-tint);color:var(--primary);font:600 14px/1 var(--mono);flex:none}
.gs-b{display:grid;gap:6px;min-width:0}
.gs-b>b{font:600 17px/1.4 var(--sans);color:var(--ink)}
.gs-b>p{margin:0;font:400 15px/1.55 var(--sans);color:var(--ink-muted);max-width:var(--measure)}
.gs-b>p b{color:var(--ink);font-weight:600}
.gs-b .ticks{gap:6px;margin-top:2px}
.gs-b .ticks li{font-size:14px;color:var(--ink-muted)}
.gs-b .ticks li b{color:var(--ink)}
.gs-b .ticks .ic{width:14px;height:14px;margin-top:4px}
.guide-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 24px 24px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--surface)}
.guide-safe{margin:0;font:400 13px/1.5 var(--sans);color:var(--ink-muted);max-width:38ch}
@media (max-width:599px){.guide{width:100vw;max-width:100vw;max-height:100vh;border-radius:0;border:0}
  .guide-head,.guide-steps,.guide-foot{padding-left:16px;padding-right:16px}
  .guide-foot{justify-content:stretch}.guide-foot form,.guide-foot .btn{width:100%}}
@media (forced-colors: active){.gs-n{border:1px solid CanvasText;background:Canvas;color:CanvasText}.guide{border:1px solid CanvasText}}

/* -- the step: hairline above, number / title / hint stacked on the left, the stamp on the right -- */
.steps{gap:48px;margin:0 0 32px}
.step{gap:20px;padding-top:24px}
.step-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n state" "t state" "hint state";column-gap:16px;row-gap:2px;align-items:start}
.step-n{grid-area:n;font:500 14px/1.5 var(--sans);color:var(--ink-muted)}
.step-t{grid-area:t;font:600 20px/1.3 var(--sans);letter-spacing:0;margin:0;color:var(--ink)}
.step-hint{grid-area:hint;margin:0;font:400 14px/1.5 var(--sans);color:var(--ink-muted);max-width:var(--measure-s)}
.step-state{grid-area:state;margin-left:0;justify-self:end;align-self:start;padding-top:1px}
.step[data-state="open"] .step-n{color:var(--primary)}
.step[data-state="done"] .step-n{color:var(--ink)}
.step[data-state="waiting"] .step-t{color:var(--ink-muted)}
.step[data-state="waiting"] .step-body .drop{pointer-events:auto}

/* -- step 01 · the system as one row of equal segments; the script writes the abbreviation, the full name is drawn from data-s -- */
.intent{gap:20px;margin:0}
.intent .field{gap:8px}
.seg{gap:6px;flex-wrap:nowrap}
.seg button[data-s]{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:44px;height:auto;padding:9px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink-muted);font:500 13px/1.25 var(--sans);cursor:pointer;
  transition:background-color .12s var(--ease),color .12s var(--ease),border-color .12s var(--ease)}
/* the visible label is the button's own text (the frozen script prints the short system name) so the accessible name matches what is seen (WCAG 2.5.3) */
.seg button[data-s]::after{content:none}
.seg button[data-s]:hover{border-color:var(--v-link);color:var(--ink);background:var(--v-tint)}
.seg button[data-s][aria-checked="true"],.seg button[data-s][aria-pressed="true"]{background:var(--v-tint);border:2px solid var(--v-mist);padding:8px 7px;color:var(--v-heading);font-weight:600}
.seg button[data-s][aria-disabled="true"]{cursor:default;color:var(--ink-faint);border-color:var(--line);background:transparent}
.seg button[data-s][aria-disabled="true"][aria-checked="true"]{color:var(--v-heading);border-color:var(--v-mist);background:var(--v-tint)}
.seg button[data-s]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:1099px){.seg{flex-wrap:wrap}.seg button[data-s]{flex:0 1 auto;padding:9px 12px}.seg button[data-s][aria-checked="true"],.seg button[data-s][aria-pressed="true"]{padding:8px 11px}}
@keyframes seg-nudge{from{border-color:var(--primary);background:var(--primary-tint)}to{border-color:var(--line-strong);background:transparent}}
.seg.pulse button[data-s]:not([aria-checked="true"]){animation:seg-nudge .2s var(--ease) 1}
.intent select{max-width:440px}
/* the developer row: small and muted, at the end of the step */
#modewrap{margin-top:4px;padding-top:16px;border-top:1px solid var(--line);max-width:440px;font-size:14px;color:var(--ink-muted)}
#modewrap>span{color:var(--ink-muted)}
#modewrap select{height:36px;font-size:14px;color:var(--ink)}

/* -- step 02 · the checklist, then the drop zone flush beneath it -- */
.step-body>.preflight{padding:16px 24px 20px;border-color:var(--line)}
.pf-head{margin:0 0 6px}
.pf-seg{padding:8px 0}
.pf-note{margin-top:6px}
.pf-cost{margin-top:12px}
.drop{padding:36px 24px 32px;gap:20px}
.drop .drop-title{font:600 20px/1.3 var(--sans);letter-spacing:0;color:var(--v-heading);margin:0;max-width:none}
.drop .drop-reason{color:var(--ink)}
.drop .drop-promise{font-size:17px;color:var(--ink-muted)}
.drop .drop-affirm{font-size:14px;color:var(--ink-muted);margin-top:4px}
.drop .deliver{flex-direction:column;align-items:flex-start;gap:6px;margin:4px 0 0;text-align:left}
.drop .dl{grid-template-columns:7px auto auto;column-gap:10px;align-items:center}
.drop .dl-dot{grid-row:1;grid-column:1}
.drop .dl span{grid-column:2;grid-row:1}
.drop .dl small{grid-column:3;grid-row:1}
.drop .btn.secondary{pointer-events:none}
.drop.locked .btn.secondary{color:var(--ink-muted);border-color:var(--line-strong);background:transparent}
.drop:focus-visible .btn.secondary,.drop:has(input:focus-visible) .btn.secondary{border-color:var(--v-link);color:var(--v-link)}
.drop:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.drop.has-file{padding:16px 20px;gap:12px;align-items:stretch}
.drop.has-file .btn.secondary{align-self:flex-start}
.step-body>.drop+.drop-note{margin:12px 0 0}

/* -- step 03 · two hairline rows, not cards -- */
.guards{display:flex;flex-direction:column;gap:0}
.guard{gap:8px;padding:20px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;margin-top:20px}
.guard:first-child{border-top:0;padding-top:0;margin-top:0}
.guard-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.guard .eyebrow{font:500 14px/1.5 var(--sans);color:var(--ink);margin:0}
.guard .srcs{gap:4px 16px}
.guard .srcs li{font-weight:400;color:var(--ink);font-size:17px}
.guard>p{font-size:14px;line-height:1.5;color:var(--ink-muted);max-width:var(--measure-s);margin:0}
.board{padding:0;border:0;gap:16px;align-items:center}
.board b{font-size:17px;font-weight:600;color:var(--ink)}
.board small{font-size:14px;color:var(--ink-muted)}
.board-alt{margin:0;gap:4px 12px}
.board-alt-k{color:var(--ink-muted)}
.board-alt span:not(.board-alt-k){color:var(--ink)}

/* -- step 04 · the two output rows -- */
.out{padding:16px 0;gap:14px}
.out:first-child{padding-top:0}
.out .tick{margin-top:3px}
.out b{font-size:17px;color:var(--ink)}
.out p{max-width:var(--measure-s)}
.out .meta{margin-top:2px}
.out.locked .tick{border-color:var(--line)}

/* -- the run bar: a hairline, four 6 px pips, one sentence, one primary -- */
.runbar{margin-top:0;padding-top:24px;gap:16px}
.runbar .lbl{font:400 14px/1.5 var(--sans);color:var(--ink)}
.runbar[data-ready="true"] .lbl{color:var(--ink);font-weight:600}
.btn.go .go-sub{font:400 13px/1.3 var(--sans);opacity:1;margin-top:2px}
.btn.go:not([disabled]) .go-sub{color:var(--primary-tint)}
.btn.accent.go:not([disabled]) .go-sub,.btn.uv.go:not([disabled]) .go-sub,.btn.primary.go:not([disabled]) .go-sub{color:var(--v-accent-text)}
.btn.go[disabled] .go-sub{color:var(--ink-muted)}
.msg#upmsg{margin-top:12px}

/* -- small screens -- */
@media (max-width:640px){
  .steps{gap:40px}
  .pf-file{flex-basis:100%;max-width:100%;margin-left:0}
  .step-head{column-gap:12px}
  .drop{padding:24px 16px}
  .drop .deliver{align-self:stretch}
  .runbar{flex-direction:column;align-items:flex-start;gap:12px}
  .runbar .go{width:100%;margin-left:0}
}

/* -- reduced motion and forced colours -- */
@media (prefers-reduced-motion: reduce){ .seg.pulse button[data-s]{animation:none} }
html.reduce .seg.pulse button[data-s]{animation:none}
@media (forced-colors: active){
  .seg button[data-s][aria-checked="true"]{background:Highlight;color:HighlightText;border-color:Highlight}
  .btn.go .go-sub,.btn.go:not([disabled]) .go-sub{color:inherit}
}

/* ===== 15E · page layer E (Build 27 Phase 3) ===== */
/* ===== Build 27 · page layer E (Phase 3 partial — consolidated into verelect.css after the marker at the end of Phase 3) =====
   The lecture page (#v-lec: head, runline, export line, findings, close panel, deck report, notes) and the shareable
   card page (card.html + .fcard). Tokens only; the markup is printed by the frozen app.html script, render.py and
   findingcard.py, so everything here is CSS against fixed DOM. One column, no rail, no boxes inside boxes. */

/* ===== E.1 · lecture head ===== */
#v-lec>.back{margin:0 0 24px}
#v-lec .page-head.split{align-items:flex-end}
#v-lec .page-head .sub{margin-top:12px}
#v-lec .page-head .act{padding-bottom:6px}
#v-lec .sys-chip{vertical-align:baseline;margin-right:4px}

/* ===== E.2 · the processing runline — four stages as a vertical list; each row a 2px left rule, primary while "now" ===== */
.runline{display:flex;flex-direction:column;gap:0;align-items:stretch}
.rarrow,.rarrow.dim{display:none}
.rbox,.rbox.grow,.rbox.grow2{flex:none;min-width:0;display:flex;flex-direction:column;gap:8px;padding:16px 0 16px 20px;margin:0;
  background:transparent;border:0;border-bottom:1px solid var(--line);border-left:2px solid var(--line);border-radius:0;box-shadow:none}
.rbox:first-child{border-top:0}
.rbox:last-child{border-bottom:0}
.rbox[data-state="done"]{border-left-color:var(--line-strong)}
.rbox[data-state="now"]{border-left-color:var(--primary);box-shadow:none}
.rbox[data-state="wait"]{border-left-color:var(--line);border-style:solid}
.rbox-h{display:flex;align-items:center;gap:12px;font:500 17px/1.3 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none}
.rbox[data-state="wait"]>.rbox-h{color:var(--ink-muted)}
.rbox-h .rmark{margin-left:auto;font:400 14px/1.4 var(--sans);color:var(--ink-muted)}
.rbox[data-state="done"]>.rbox-h .rmark{color:var(--ink)}
.rlive{width:7px;height:7px;margin-left:auto;border-radius:50%;background:var(--primary);box-shadow:none;animation-duration:1.2s}
.rfile{font:500 14px/1.5 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.rmono{display:flex;flex-direction:row;flex-wrap:wrap;gap:2px 16px;font:400 13px/1.5 var(--mono);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.rnote{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink-muted);max-width:var(--measure)}
.rnote .sources{color:var(--ink);font-weight:500}
.reassure{margin:0;gap:8px;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.reassure .dot.now{animation:none;opacity:1}
/* the stage line: six-pixel pips, never a bar and never a percentage */
.rstage{display:flex;gap:8px;align-items:center;padding:2px 0;flex-wrap:wrap}
.rstage i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
.rstage i.done,.rstage i.now{background:var(--primary)}
.rstage i.stopped{background:var(--attention)}
/* findings so far: the same 110px gutter the finished list uses */
.rfind{margin:4px 0 0;padding:0;gap:0}
.rfind li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:0 16px;align-items:baseline;padding:6px 0;background:transparent;border:0;border-top:1px solid var(--line);border-radius:0}
.rfind li:first-child{border-top:0}
.rfind .rk{font:500 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.rfind li[data-k] .rk{justify-self:start;font:600 13px/1.5 var(--sans);border-radius:var(--r-pill);padding:0 8px;background:var(--v-unchecked);color:var(--v-on-unchecked)}
.rfind li[data-k="superseded"] .rk{background:var(--v-conflict);color:var(--v-on-status)}
.rfind li[data-k="refined"] .rk{background:var(--v-updated);color:var(--v-on-updated)}
.rfind li[data-k="verified"] .rk{background:var(--v-verified);color:var(--v-on-status)}
.rfind .rt{font:400 14px/1.5 var(--sans);color:var(--ink)}
.rfind li.empty{display:block;border:0;padding:0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.rbox.grow2>.rfoot{display:none}
.rghost{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;border-radius:0;background:none;color:var(--ink-muted);font:400 14px/1.5 var(--sans);opacity:1}
.rghost svg{width:14px;height:14px;flex:none}
.rfoot{margin:0;font:400 13px/1.5 var(--sans);color:var(--ink-muted)}
.run-elapsed{font:400 14px/1.4 var(--mono);color:var(--ink-muted);font-variant-numeric:tabular-nums}

/* ===== E.3 · the export line — a hairline box, one primary, quiet secondaries ===== */
.xstrip{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:16px 20px;margin:0 0 48px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:none}
.xstrip .xdone{display:inline-flex;align-items:center;gap:8px;font:500 14px/1.4 var(--sans);color:var(--ink);white-space:nowrap}
.xstrip .xdone::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.xpills{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0;font:400 14px/1.4 var(--sans);color:var(--ink-muted)}
.xpills span{display:inline;background:transparent;border:0;padding:0;font:400 14px/1.4 var(--sans);color:var(--ink-muted);white-space:nowrap}
.xpills span+span::before{content:"·";color:var(--line-strong);margin:0 8px}
.xacts.delivery{margin-left:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap;opacity:1}
.xacts .btn svg{width:14px;height:14px;flex:none;margin-right:6px}
.xacts .stamp{font-size:13px}

/* ===== E.4 · the findings — one column; the old margin rail is a summary block that reads before the list ===== */
#findings .rgrid{display:flex;flex-direction:column;gap:0;align-items:stretch}
#findings .rnote-col{flex:none;width:auto;min-width:0;padding:0;display:flex;flex-direction:column;gap:12px}
#findings .rnote-col .eyebrow-row{margin:0 0 12px}
#findings .rrail{order:-1;width:auto;flex:none;margin:0 0 32px;padding:0 0 24px;border:0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 24px;align-items:baseline;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
#findings .rrail>div:first-child{display:contents}
#findings .rrail .eyebrow{grid-column:1 / -1;margin:0 0 4px}
#findings .rrail .rcount{grid-column:1;display:flex;align-items:baseline;gap:8px;margin:0;font-variant-numeric:tabular-nums}
#findings .rrail .rcount b{font:500 29px/1 var(--mono);color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums}
#findings .rrail .rcount span{font:400 17px/1.5 var(--sans);color:var(--ink-muted)}
#findings .rleg{grid-column:2;display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 20px;align-items:baseline;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
#findings .rleg>span{display:inline-flex;align-items:baseline;gap:6px}
#findings .rleg i{order:-2;width:7px;height:7px;border-radius:50%;flex:none;align-self:center}
#findings .rleg>span>span:last-child{order:-1;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
#findings .rleg .lk{flex:none;color:var(--ink-muted)}
#findings .rrail-card,#findings .rrail .readout,#findings .rrail-note{grid-column:1 / -1}
#findings .rrail-card{background:transparent;border:0;border-radius:0;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline}
#findings .rrail-card .k{font:500 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
#findings .rrail-card p{margin:0;font:400 17px/1.6 var(--sans);color:var(--ink);max-width:var(--measure)}
/* the re-verification readout — one line plus the source list, always in view (A11Y §11.7) */
.readout,.readout.soon{position:static;display:grid;gap:6px;margin:8px 0 0;padding:16px 0 0;background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;
  font:400 14px/1.5 var(--sans);color:var(--ink-muted);min-width:0;cursor:default}
.readout>span:first-child{display:block;overflow-wrap:anywhere}
.readout b{color:var(--ink);font-weight:600}
.readout i{font-style:normal;color:var(--line-strong);margin:0 .4em}
.readout .days{color:var(--ink)}
.readout.soon .days{color:var(--ink);font-weight:600}
.readout .readout-bar{display:none}
.readout .ro-list,.readout:hover .ro-list,.readout:focus-within .ro-list{display:grid;gap:2px;position:static;min-width:0;max-width:none;margin:2px 0 0;padding:0;
  background:transparent;border:0;border-radius:0;box-shadow:none;animation:none;letter-spacing:0;text-transform:none}
.readout .ro-list h4{margin:0 0 2px;font:500 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.readout .ro-list ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.readout .ro-list li{display:block;padding:0 0 0 14px;text-indent:-14px;font:400 14px/1.5 var(--sans);color:var(--ink);min-width:0;overflow-wrap:anywhere}
.readout .ro-list li .dot{display:inline-block;vertical-align:middle;margin:0 7px 0 0;position:relative;top:-1px}
.readout .ro-list li span{display:inline;min-width:0;overflow-wrap:anywhere}
.readout .ro-list li small{display:inline;margin-left:6px;font-size:13px;color:var(--ink-muted);white-space:normal;overflow-wrap:anywhere}
#findings .rrail-note{display:flex;flex-wrap:wrap;gap:2px 16px;margin:8px 0 0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
#findings .rrail-note .fine{font:400 13px/1.5 var(--sans);color:var(--ink-muted)}
/* the legend — opaque definition panel on hover / focus; the chip itself meets the 24px target */
.legend{gap:8px}
.legend button.stamp{min-height:24px;cursor:help}
.legend .lg-def{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:none;padding:12px 16px;font:400 14px/1.5 var(--sans);color:var(--ink)}
/* the list: 32px and a hairline between findings; the stamp sits in a 110px gutter; nothing is boxed */
.cards.gut-list{display:flex;flex-direction:column;gap:0}
.cards.gut-list>*+*{margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.gut{display:flex;gap:16px;align-items:flex-start;min-width:0;max-width:100%;opacity:1;transform:none}
.gut>.stamp{width:auto;min-width:110px;flex:none;justify-content:center;box-sizing:border-box;margin-top:3px}
.gut-b{flex:1;min-width:0;display:grid;gap:12px;align-content:start}
.gut-b>b{display:block;font:600 20px/1.3 var(--sans);color:var(--ink);letter-spacing:0;margin:0}
.gut-b>p{margin:0;font:400 17px/1.6 var(--sans);color:var(--ink);max-width:var(--measure)}
.gut-b>p b{font-weight:600;color:var(--ink)}
.gcard{background:transparent;border:0;border-radius:0;padding:0;display:grid;gap:12px;align-content:start;min-width:0}
.gut[data-status="superseded"] .gcard,.gut[data-status="refined"] .gcard,.gut[data-status="verified"] .gcard,.gut[data-status="held"] .gcard{border:0}
.gh{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;margin:0}
.gh b{font:600 20px/1.3 var(--sans);color:var(--ink);letter-spacing:0;min-width:0}
.gut .fcard-link,.gh .fcard-link{margin-left:auto;flex:none;min-width:max-content}
/* structured findings: two 20px mono values either side of a hairline — the lecture struck in ink-muted, the current in ink */
.cmp{display:flex;gap:24px;align-items:stretch;margin:0;padding:4px 0}
.cmp>div{flex:1;min-width:0;display:grid;gap:4px;align-content:start}
.cmp .k{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.cmp s{font:500 20px/1.4 var(--mono);color:var(--ink-muted);text-decoration:line-through;text-decoration-color:var(--ink-muted);text-decoration-thickness:1px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cmp b{font:500 20px/1.4 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cmp .src{font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.cmp-div{display:none}
/* rule 5: the guideline side sits on the tint with a mist left edge; the lecture side stays on the card */
.cmp>div:last-of-type{background:var(--v-tint);border-left:3px solid var(--v-mist);border-radius:var(--r-lg);padding:12px 16px}
.gcard .gwhy,.gwhy{margin:0;font:400 17px/1.6 var(--sans);color:var(--ink);max-width:var(--measure)}
.gwhy b{font-weight:600;color:var(--ink)}
/* prose findings (recorded before structured findings): label column, the lecture line in ink-muted, the current line in ink */
.prose-pair{display:grid;gap:8px;margin:0}
.prose-pair p{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 12px;align-items:baseline;margin:0;font:400 17px/1.6 var(--sans);color:var(--ink);max-width:none}
.prose-pair p b{font:500 14px/1.7 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none;margin:0}
.prose-pair p:first-child{color:var(--ink-muted)}
.prose-pair p.muted{display:none}
.gut-src,.gcard .gut-src{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.gut-src a{color:var(--v-link)}
/* gaps and deck notes: the same gutter, a quiet held stamp */
.gut-list>.card.dense{display:flex;gap:16px;align-items:flex-start;padding:0;border:0;background:transparent;font:400 17px/1.6 var(--sans);color:var(--ink);opacity:1}
.gut-list>.card.dense>.stamp{width:auto;min-width:110px;flex:none;justify-content:center;box-sizing:border-box;margin-top:3px;font-size:14px;padding:4px 12px 4px 10px;line-height:1.4;white-space:normal}
/* the reveal sequence is inert — the frozen script adds .seq / .in / .dof; nothing is ever hidden */
.seq .cards>*,.seq .cards>.gut,.seq .cards>.in,.seq .delivery,.seq .delivery.in,.seq .close,.seq .close.in,.gut.reveal,.reveal,.in,.xfade{opacity:1;transform:none;filter:none;transition:none;animation:none}
.dof>*,.dof-wait>*,.dof>:not(.is-open):not(.popover){filter:none;opacity:1;transition:none}

/* ===== E.5 · the close panel, the action-needed card, the disclosure details ===== */
#v-lec .panel.close{margin-top:48px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:grid;gap:12px;max-width:none;justify-items:start;opacity:1}
#v-lec .close h3{font:600 20px/1.3 var(--sans);letter-spacing:0;margin:0;color:var(--v-subheading)}
#v-lec .close p{margin:0;font:400 17px/1.6 var(--sans);color:var(--ink-muted);max-width:var(--measure)}
#v-lec .close .inline-actions{margin-top:4px}
#v-lec .close .btn.uv{background:var(--v-card);border-color:var(--v-border);color:var(--v-heading)}
#v-lec .close .btn.uv:hover{background:var(--v-tint);border-color:var(--v-border);color:var(--v-heading)}
#v-lec .close .honest{display:none}
#v-lec p.muted.small.close{margin-top:32px;opacity:1}
#v-lec .card:not(.dense):not(.report):not(.empty){display:grid;gap:12px;justify-items:start;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:none}
#v-lec .card:not(.dense)>.stamp.held:first-child{background:var(--v-conflict);color:var(--v-on-status)}
#v-lec .card>h3{font:600 20px/1.3 var(--sans);letter-spacing:0;margin:0;color:var(--v-subheading)}
#v-lec .card>p{margin:0;font:400 17px/1.6 var(--sans);color:var(--ink);max-width:var(--measure)}
#v-lec .card>p .muted{color:var(--ink-muted)}
#v-lec .card>.inline-actions{margin-top:4px}
#v-lec .card>b{font:600 17px/1.5 var(--sans);color:var(--ink)}
details.more,details.tech{margin:24px 0 0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
details.more>summary,details.tech>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:24px;padding:4px 0;cursor:pointer;font:500 14px/1.4 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
details.more>summary::-webkit-details-marker,details.tech>summary::-webkit-details-marker{display:none}
details.more>summary::before,details.tech>summary::before{content:"▸";font-family:var(--sans);color:var(--ink-muted)}
details.more[open]>summary::before,details.tech[open]>summary::before{content:"▾"}
details.more>summary:hover,details.tech>summary:hover{color:var(--ink)}
details.more>summary:focus-visible,details.tech>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
details.more ul{margin:8px 0 0 20px;padding:0;color:var(--ink)}
details.more pre,details.tech pre{margin:8px 0 0;padding:12px 16px;font:400 13px/1.5 var(--mono);white-space:pre-wrap;color:var(--ink-muted);background:var(--surface-2);border-radius:var(--r)}
details.tech .techmeta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;margin:8px 0 0;font:400 13px/1.5 var(--mono);color:var(--ink-muted)}
details.tech .techmeta dt{color:var(--ink-muted);letter-spacing:0;text-transform:none}
details.tech .techmeta dd{margin:0;color:var(--ink-muted);overflow-wrap:anywhere}
details.tech .label{font:400 13px/1.5 var(--mono);color:var(--ink-muted)}

/* ===== E.6 · the deck report — thin meters in the hairline colour with a primary fill; no grade, no judgement ===== */
#v-lec .section[data-below]{margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
#v-lec .section[data-below]>.eyebrow{margin:0 0 16px}
.card.report,#deck-report{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.rl{display:grid;grid-template-columns:140px 110px 200px minmax(0,1fr);gap:8px 24px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);min-width:0}
.rl:last-child{border-bottom:0}
.rl>*{min-width:0;overflow-wrap:anywhere}
.rl .k{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.rl .k::first-letter{text-transform:uppercase}
.rl .v{font:500 20px/1.4 var(--mono);color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums}
.rl .ref{font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.rl .wide{grid-column:2 / -1}
.bar,.bar.low{position:relative;height:4px;margin:0;border:0;border-radius:2px;background:var(--line);overflow:visible;align-self:center}
.bar i,.bar.low i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--primary)}
.bar em{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--ink-muted)}
.tags{display:flex;flex-wrap:wrap;gap:4px 16px;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.tags b{font:500 14px/1.5 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.rl .val.wide{font:400 14px/1.5 var(--mono);color:var(--ink);background:none;padding:0}

/* ===== E.7 · the notes — plain document typography at a 65ch measure; h2 24px; 48px between sections ===== */
.note,#note{background:transparent;border:0;box-shadow:none;padding:0;border-radius:0;max-width:var(--measure);font:400 17px/1.6 var(--sans);color:var(--ink)}
.note .note-head{padding:0;margin:0 0 24px}
.note .note-head h1{font:600 24px/1.25 var(--sans);letter-spacing:-0.01em;color:var(--v-heading);margin:0}
.note-section{margin:0;padding:0;border:0}
.note-section+.note-section{margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.note-section h2,.note h2{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font:600 24px/1.25 var(--sans);letter-spacing:-0.01em;color:var(--v-heading);margin:0 0 16px;padding:0}
.note-section h2 .stamp{font-size:13px;letter-spacing:0;font-weight:600}
.note-section h3,.note h3{font:600 20px/1.3 var(--sans);letter-spacing:0;color:var(--v-subheading);margin:24px 0 8px;padding:0}
.note-section h4,.note h4{font:600 17px/1.4 var(--sans);color:var(--v-subheading);margin:16px 0 4px;padding:0}
.note p,.note li{font-size:17px;line-height:1.6;color:var(--ink);max-width:var(--measure)}
.note p+p{margin-top:12px}
.note p.meta,.note .meta{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;font-style:normal}
.note .status-line,.note .status-line.val{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none;margin:8px 0 16px;background:none;padding:0}
.note .callout,.callout{display:block;background:none;border:0;border-left:2px solid var(--ink-muted);border-radius:0;padding:4px 0 4px 16px;margin:16px 0;color:var(--ink);font:400 17px/1.6 var(--sans);max-width:var(--measure)}
.note .callout[data-role]{display:block;border-left-width:2px;background:none}
.note .callout-rule,.callout-rule,.note .callout-rule[data-role]{border-left-color:var(--stop);background:none}
.note .callout-key,.callout-key,.note .callout-key[data-role]{border-left-color:var(--ok);background:none}
.note .callout-tension,.callout-tension,.note .callout-tension[data-role]{border-left-color:var(--warn);background:none}
.note .callout-drift,.callout-drift,.note .callout-drift[data-role]{border-left-color:var(--primary);background:none}
.note .callout-insight,.note .callout-owner,.callout-insight,.callout-owner,.note .callout-insight[data-role]{border-left-color:var(--ink-muted);background:none;font:400 17px/1.6 var(--sans)}
.note .callout-icon,.callout-icon{display:none}
.note .callout-body,.callout-body{font:400 17px/1.6 var(--sans);color:var(--ink);min-width:0}
.note .callout p+p{margin-top:8px}
.note .pos{font:500 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none;padding:0;border:0;margin-right:4px;background:none}
.note .pos-current{color:var(--primary)}
.note .unverified,.unverified{display:inline-flex;align-items:center;gap:6px;background:var(--v-unchecked);color:var(--v-on-unchecked);border:0;border-radius:var(--r-pill);padding:1px 8px;font:600 13px/1.5 var(--sans);letter-spacing:0;text-transform:none;vertical-align:middle}
.note .val{font-family:var(--mono);font-weight:500;font-size:.9em;color:var(--ink);background:none;padding:0;border-radius:0}
.note a{color:var(--v-link)}
.note code{font:400 15px/1.5 var(--mono);background:var(--surface-2);border-radius:var(--r);padding:0 4px}
.note pre,.note pre.code{font:400 15px/1.5 var(--mono);color:var(--ink);background:var(--surface-2);border:0;border-radius:var(--r);padding:12px 16px;margin:8px 0;overflow-x:auto;white-space:pre;max-width:100%}
.note figure.diagram{margin:16px 0;padding:0;border:0;background:transparent;max-width:100%;overflow-x:auto}
.note figure.diagram .mermaid,.note figure.diagram .mm{display:block;background:var(--diagram-ground);color:var(--diagram-ink);border:0;border-radius:var(--r-lg);padding:16px;overflow-x:auto;max-width:100%;white-space:pre-wrap;font:400 14px/1.5 var(--mono)}
.note figure.diagram .mm svg{max-width:100%;height:auto;display:block}
.note figcaption{font:400 14px/1.5 var(--sans);color:var(--ink-muted);margin-top:4px;letter-spacing:0;text-transform:none}
.note .tbl{overflow-x:auto;max-width:100%;min-width:0;margin:8px 0}
.note .tbl table,.note table{width:100%;border-collapse:collapse;font-size:17px;line-height:1.5}
.note th{font:500 14px/1.4 var(--sans);color:var(--ink);background:var(--surface-2);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:bottom;letter-spacing:0;text-transform:none}
.note td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;font-variant-numeric:tabular-nums}
.note-section.toggle>details>summary{list-style:none;cursor:pointer;display:block;min-height:24px}
.note-section.toggle>details>summary::-webkit-details-marker{display:none}
.note-section.toggle>details>summary h2{margin:0}
.note-section.toggle>details>summary h2::before{content:"▸";font-family:var(--sans);color:var(--ink-muted);display:inline-block;margin:0;transition:none}
.note-section.toggle>details[open]>summary h2::before{content:"▾"}
.note-section.toggle>details[open]>summary{margin-bottom:16px}
.note-section.toggle>details>summary:hover h2{color:var(--ink)}
.note-section.toggle>details>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ===== E.8 · the shareable card page — the card is a --surface sheet at 8px with static strikes ===== */
.cardpage main{max-width:calc(680px + 48px);padding-top:32px}
.cardpage h1.sr-only{position:absolute}
.cardtools{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap;margin:0 0 24px;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.cardtools .back{margin:0}
.cardtools .inline-actions{gap:8px}
.fcard,.cardpage .fcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;display:grid;gap:24px;color:var(--ink);max-width:100%;box-shadow:none;transform:none;opacity:1}
.fc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 16px;flex-wrap:wrap}
.fc-brand{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;padding-top:6px;font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.fc-brand b{font:600 14px/1.5 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none;font-stretch:normal;margin-right:2px}
.fc-brand i{font-style:normal;color:var(--line-strong);margin:0 .2em}
.fc-head .stamp.xl{font-size:14px;padding:4px 12px 4px 10px;line-height:1.4}
.fc-head .stamp.xl i{color:currentColor;margin:0 .35em}
.fc-topic{font:600 24px/1.25 var(--sans);letter-spacing:-0.01em;color:var(--v-heading);margin:-8px 0 0;max-width:none}
.fc-pair,.cardpage .fc-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;margin:0;padding:20px 0 0;border-top:1px solid var(--line)}
.fc-pair.prose,.cardpage .fc-pair.prose{grid-template-columns:1fr;gap:16px}
/* rule 5: lecture panel on card white, guideline panel on the tint with a mist left edge; the badge sits top-right of the card head */
.fc-col{display:grid;gap:6px;align-content:start;min-width:0;background:var(--v-card);border:1px solid var(--v-border);border-radius:var(--r-lg);padding:16px 20px}
.fc-col.current{background:var(--v-tint);border-color:var(--v-mist);border-left:3px solid var(--v-mist);padding-left:18px}
.fc-pair:not(.prose) .fc-col.current{padding-left:18px}
.fc-pair.prose .fc-col.current{padding-top:16px}
.fc-label{font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none;margin:0}
.fc-label em{font-style:normal;color:var(--ink-muted)}
.fc-col.current .fc-label{color:var(--ink-muted)}
.fc-big,.fc-big .val{margin:0;font:500 24px/1.3 var(--mono);color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums;animation:none;background:none;padding:0}
.fc-big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fc-col.taught .fc-big,.fc-col.taught .fc-big .val{color:var(--ink-muted);text-decoration:line-through;text-decoration-color:var(--ink-muted);text-decoration-thickness:1px}
.fc-col.current .fc-big,.fc-col.current .fc-big .val{color:var(--ink);text-decoration:none}
.fc-text{margin:0;font:400 17px/1.6 var(--sans);color:var(--ink)}
.fc-col.taught .fc-text,.fc-col.taught .fc-text .val{color:var(--ink-muted)}
.fc-col.current .fc-text .val{background:none;padding:0;font-weight:500}
.fc-note{margin:0;font:400 17px/1.6 var(--sans);color:var(--ink)}
.fc-still{margin:0;padding:16px 0 0;border-top:1px solid var(--line);font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.fc-still b{font:500 14px/1.5 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none;margin-right:8px}
.fc-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 24px;padding:16px 0 0;border-top:1px solid var(--line);font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.fc-foot .fc-chain{grid-column:1;font-weight:500;color:var(--ink)}
.fc-foot .fc-chain i{font-style:normal;font-weight:400;color:var(--ink-muted);margin:0 .5em}
.fc-foot .fc-lec,.fc-foot .fc-where{grid-column:1;color:var(--ink-muted)}
.fc-foot .fc-url{grid-column:2;grid-row:1 / span 3;align-self:end;font:400 14px/1.5 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none;font-stretch:normal}
.cardhint{margin:16px 0 0;max-width:var(--measure);font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.js .fcard.in .stamp.xl,.js .fcard.in .fc-big .val,.fcard.in{animation:none;transform:none;opacity:1}
.bare *,.bare *::before,.bare *::after{animation:none !important;transition:none !important}
.bare .top,.bare .foot,.bare .cardtools,.bare .cardhint,.bare h1.sr-only{display:none}
.bare main{padding:16px;max-width:680px}

/* ===== E.9 · responsive ===== */
@media (max-width:900px){
  .rl{grid-template-columns:120px minmax(0,1fr);grid-template-areas:"k v" "ref ref" "bar bar";gap:4px 24px}
  .rl .k{grid-area:k}.rl .v{grid-area:v}.rl .ref{grid-area:ref}.rl .bar{grid-area:bar;margin:4px 0}
  .rl .wide{grid-column:1 / -1;grid-area:auto}
}
@media (max-width:760px){
  .fcard,.cardpage .fcard{padding:24px}
  #v-lec .panel.close,#v-lec .card:not(.dense):not(.report):not(.empty){padding:16px}
  details.more>summary,details.tech>summary{display:flex;min-height:44px}
}
@media (max-width:640px){
  #findings .rrail{grid-template-columns:1fr;gap:6px}
  #findings .rrail .rcount,#findings .rleg{grid-column:1}
  #findings .rleg{gap:4px 16px}
  .readout .ro-list ul{flex:1 1 100%}
  .rbox,.rbox.grow,.rbox.grow2{padding-left:16px}
  .rfind li{grid-template-columns:1fr;gap:0}
  .gut{flex-wrap:wrap;gap:8px 16px}
  .gut>.stamp{width:auto;margin-top:0}
  .gut-b{flex:1 1 100%}
  .gut-list>.card.dense{display:block}
  .gut-list>.card.dense>.stamp{width:auto;margin:0 0 8px;display:inline-flex}
  .prose-pair p{grid-template-columns:1fr;gap:2px}
  .cmp{flex-direction:column;gap:12px}
  .cmp-div{width:auto;height:1px;align-self:auto}
  .xstrip{padding:16px}
  .xacts.delivery{margin-left:0;width:100%;flex-direction:column;align-items:stretch}
  .xacts .btn{width:100%}
  .legend .lg-def{left:0;right:auto;min-width:0;width:max-content;max-width:calc(100vw - 32px)}
  .fc-pair,.cardpage .fc-pair{grid-template-columns:1fr;gap:16px}
  .fc-pair:not(.prose) .fc-col.current{padding-left:18px}
  .fc-topic{font-size:20px;line-height:1.3;letter-spacing:0}
  .fc-foot{grid-template-columns:1fr}
  .fc-foot .fc-url{grid-column:1;grid-row:auto;margin-top:4px}
  .cardtools .inline-actions{width:100%}
}
@media (max-width:480px){
  .rl{grid-template-columns:1fr;grid-template-areas:"k" "v" "ref" "bar"}
}

/* ===== 15F · page layer F (Build 27 Phase 3) ===== */
/* ===== Build 27 · page layer F (Phase 3 partial — consolidated into verelect.css after the marker at the end of Phase 3) ===== */
/* F · account (subscription, settings) + admin. Tokens only; extends the core, never repeats it. */

/* --- F.1 · the two account views sit in the narrow column, like every other page that is read once --- */
#v-sub,#v-settings{max-width:var(--frame-n);margin:0 auto}

/* --- F.2 · subscription: one state line, one plan, one top-up, one ledger --- */
#sub-active,#sub-inactive{align-items:flex-start;gap:16px 24px;padding:20px 24px;border-radius:var(--r-lg)}
#sub-active>div:first-child,#sub-inactive>div:first-child{flex:1 1 360px;min-width:0}
#sub-active>div:first-child>b,#sub-inactive>div:first-child>b{font:600 17px/1.5 var(--sans);color:var(--ink);vertical-align:middle}
#sub-active>div:first-child>.small,#sub-inactive>div:first-child>.small{display:inline-block;margin-top:6px;max-width:var(--measure);color:var(--ink-muted)}
#sub-active .val,#sub-inactive .val{font-size:14px;color:var(--ink)}
#sub-active>.act,#sub-inactive>.act{padding-top:2px}
#sub-active>.act>.small,#sub-inactive>.act>.small{display:inline-block;color:var(--ink-muted)}
#sub-active .msg,#sub-inactive .msg,#v-sub .card .msg{margin:12px 0 0;width:100%}
/* the state line's dates as labelled rows, never a sentence */
.statline{display:grid;gap:0;margin:10px 0 0;max-width:var(--measure)}
.statline>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:2px 16px;padding:7px 0;border-top:1px solid var(--line)}
.statline dt{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.statline dd{margin:0;font:500 14px/1.5 var(--sans);color:var(--ink)}
.statline dd small{display:block;font:400 13px/1.4 var(--sans);color:var(--ink-muted)}
#v-sub .card{border-radius:var(--r-lg)}
#v-sub .card h2{font:600 20px/1.3 var(--sans);letter-spacing:0;margin:0;font-variant-numeric:tabular-nums}
/* the plan and the top-up: a price line, what you get as ticks, the terms as labelled rows */
.pc-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.pc-head h2{font:600 24px/1.25 var(--sans);letter-spacing:-0.01em}
.pc-n{font:500 14px/1.5 var(--sans);color:var(--primary);background:var(--primary-tint);border-radius:var(--r-pill);padding:4px 12px;white-space:nowrap}
#v-sub .ticks li{font-size:15px;color:var(--ink)}
#v-sub .ticks .ic{width:15px;height:15px;margin-top:4px}
.terms{display:grid;gap:0;margin:16px 0 0;max-width:var(--measure)}
.terms>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:2px 16px;padding:8px 0;border-top:1px solid var(--line)}
.terms dt{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.terms dd{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink)}
.pc-more{margin:16px 0 0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
#v-sub .card .ticks+p{margin-top:16px}
@media (max-width:899px){.statline>div,.terms>div{grid-template-columns:1fr;gap:0}}
@media (forced-colors: active){.pc-n{border:1px solid CanvasText;background:Canvas;color:CanvasText}}
#v-sub .card>p{max-width:var(--measure);color:var(--ink)}
#v-sub .card>p>b{font-weight:500}
#v-sub .card>p.muted{color:var(--ink-muted)}
#v-sub .card>p.inline-actions{margin-top:24px;gap:12px 16px}
#v-sub .card>p.field{margin-top:16px;max-width:320px}
#v-sub .card>p.field label{font:500 14px/1.4 var(--sans);color:var(--ink)}
#v-sub .card>p.field input{width:100%}
#billing-off{margin-top:16px;font-size:14px;line-height:1.5}
#topup .card>p .val{font-size:1em}
/* the ledger — a quiet tabular list, 14px, hairline rows, flush with the column */
#ledger{border:0;padding:0;margin:0}
#ledger table.tbl.mono{width:100%;font-size:14px;line-height:1.5;border-collapse:collapse}
#ledger th{background:none;color:var(--ink-muted);font:500 14px/1.4 var(--sans);padding:0 16px 8px 0;border-bottom:1px solid var(--line-strong);text-align:left}
#ledger td{font:400 14px/1.5 var(--mono);color:var(--ink);padding:10px 16px 10px 0;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
#ledger th:last-child,#ledger td:last-child{padding-right:0}
#ledger td:first-child{white-space:nowrap;color:var(--ink-muted)}
#ledger td:nth-child(2){white-space:nowrap}
#ledger td:last-child{font-family:var(--sans);overflow-wrap:anywhere}
#ledger>.muted{display:block;padding:8px 0;font-size:14px;line-height:1.5}

/* --- F.3 · settings: four hairline boxes, 48px apart, one secondary action each; the Notion state is a quiet pill --- */
#v-settings .cards>*+*{margin-top:48px}
#v-settings .card,#v-settings .notion-panel{border-radius:var(--r-lg);padding:24px}
#v-settings .card h2{font:600 20px/1.3 var(--sans);letter-spacing:0;margin:0 0 12px}
#v-settings .card>p{max-width:var(--measure)}
#account>p:first-of-type{font-size:17px;line-height:1.6;overflow-wrap:anywhere}
#account>p:first-of-type .val{font-size:1em;color:var(--ink)}
#inst-fixed{margin-top:8px;max-width:var(--measure)}
#inst-fixed .val{font-size:1em;color:var(--ink);font-weight:500}
#inst-fixed .muted{color:var(--ink-muted)}
#local-boards{margin-top:8px}
#local-boards b{color:var(--ink);font-weight:500}
#local-none{margin-top:16px}
#f-board{margin-top:16px}
#f-board select{width:100%}
#board-note{margin:0}
#v-settings .form{max-width:440px}
#v-settings .form .inline-actions{margin-top:4px}
#v-settings .notion-panel{gap:12px 16px}
#v-settings .nbody{gap:12px}
#v-settings .nstate{font-size:14px}
#v-settings .nwhere{gap:4px;font-size:14px}
#v-settings .nwhere>span{display:block;overflow-wrap:anywhere}
#v-settings .nwhere small{display:inline-block;min-width:9em;color:var(--ink-muted)}
#v-settings .nwhere b{font-weight:500;color:var(--ink)}
#v-settings .nnote{max-width:var(--measure)}
#v-settings .nnote b{color:var(--ink);font-weight:500}
#v-settings .nacts{margin-top:4px}
#v-settings #structure{display:grid;gap:12px;margin-top:8px}
#v-settings .struct{font:400 14px/1.7 var(--mono);background:var(--surface-2);border:0;border-radius:var(--r-lg);padding:16px 20px;color:var(--ink-muted)}
#v-settings .struct b{color:var(--ink);font-weight:500}
#v-settings .struct .ok{color:var(--ink);font-weight:500}
#delete .measure{color:var(--ink);font-size:17px;line-height:1.6}
#b-del{padding:0;color:var(--v-link);font-weight:400}
#b-del:hover{color:var(--v-link-hover);text-decoration:underline;text-underline-offset:3px}

/* --- F.4 · admin — consistency only: plain hairline boxes, 16px apart, tables that scroll inside their box --- */
.admin>.card.report{padding:16px 24px 8px;border:1px solid var(--line);border-radius:var(--r-lg)}
.admin>.card.report+.card.report{margin-top:16px}
.admin>.card.report>h2{font:600 20px/1.3 var(--sans);letter-spacing:0;margin:0 0 12px}
.admin .rsum{font-size:17px;margin:4px 0 16px;gap:8px 24px}
.admin .rsum b{font:500 24px/1.3 var(--mono);color:var(--ink);white-space:nowrap}
.admin .rsum .unit{color:var(--ink-muted)}
.admin .rsum i{display:none}
.admin>.rsum{margin:0 0 24px}
.admin .tbl{overflow-x:auto;max-width:100%;margin:0 0 8px}
.admin .tbl+.tbl{margin-top:24px}
.admin .tbl table{width:100%;font-size:14px;line-height:1.5}
.admin .tbl th{font:500 14px/1.4 var(--sans);color:var(--ink-muted);background:none;border-bottom:1px solid var(--line-strong);padding:0 12px 8px 0;white-space:nowrap}
.admin .tbl td{font-size:14px;line-height:1.5;padding:8px 12px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.admin .tbl th:last-child,.admin .tbl td:last-child{padding-right:0}
.admin .tbl tr:last-child td{border-bottom:0}
.admin .tbl td.val{font:400 14px/1.5 var(--mono);color:var(--ink);white-space:nowrap}
#costs .tbl td.val{white-space:normal}
.admin .tbl td.measure{min-width:24ch;max-width:var(--measure-s)}
.admin .tbl td.muted{color:var(--ink-muted)}
.admin>.card.report>p.muted{margin:0 0 12px;max-width:var(--measure)}
.admin>.card.report>p.muted.small{font-size:14px;line-height:1.5}
.admin .tbl:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* --- F.5 · responsive --- */
@media (max-width:760px){
  #v-settings .card,#v-settings .notion-panel,#sub-active,#sub-inactive,#v-sub .card{padding:16px}
  #v-settings .cards>*+*{margin-top:32px}
  #v-sub .card>p.field{max-width:none}
  .admin>.card.report{padding:12px 16px 4px}
  #v-settings .nwhere small{display:block;min-width:0}
}
@media (max-width:480px){
  #ledger td:first-child{white-space:normal}
  #v-sub .card>p.inline-actions .btn{width:100%}
}

/* ===== 15G · Phase 5 loop-back — the upload page loses its wizard chrome (three portal-feel reviewers agreed) ===== */
/* the step order is carried by the numbers; the Required / Waiting / Set pills and the four pips were badge chrome */
#v-home .step-state{display:none}
#v-home #pips{display:none}
/* the developer mode select (#modewrap) is un-hidden by the frozen script whenever the server holds an API key; the field
   still exists and submits its server default — only the control is off-screen until a later build gates it to admins */
#v-home #modewrap{display:none}
/* the status legend above the upload page's own list is repeated by every row's stamp */
#v-home .eyebrow-row .key{display:none}
/* the allowance is a sentence under the title, not a bar: no fill, a hairline below; the server's ALL-CAPS token reads as a word */
#v-home .strip{background:transparent;border:0;border-radius:0;padding:0;min-height:0}   /* the step below carries the hairline */
#v-home .strip b{display:inline-block;text-transform:lowercase}
#v-home .strip b::first-letter{text-transform:uppercase}
#v-home .strip a{color:var(--v-link)}
/* pre-flight: a quiet list of the five rules — no panel, no circles until a real result arrives */
#step-file .preflight{background:transparent;border:0;border-radius:0;padding:0 0 8px}
#step-file .preflight[data-stage],#step-file .preflight[data-tier]{background:transparent}
#step-file .preflight+.drop{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg);border-top:1px dashed var(--line-strong)}
#step-file .pf-head{font:500 14px/1.4 var(--sans);color:var(--ink-muted)}
#step-file .pf-seg{padding:6px 0;border-top:0}
#step-file .pf-txt{font-size:14px;line-height:1.5;color:var(--ink-muted)}
#step-file .pf-seg[data-state="idle"] .pf-glyph:empty::before{width:4px;height:4px;margin:8px 6px;border:0;background:var(--ink-faint);border-radius:50%}
#step-file .pf-note{font-size:13px;color:var(--ink-muted)}
#step-file .pf-cost{border-top:0;padding-top:4px;margin-top:4px;font-size:14px;color:var(--ink-muted)}
#step-file .pf-cost:not(.idle){font-size:17px;color:var(--ink)}
/* a disabled primary is an outlined ghost, not grey on grey */
#v-home .btn.go:disabled,#v-home .btn.go[disabled]{background:transparent;border:1px solid var(--line-strong);color:var(--ink-muted)}
/* second loop-back pass — the three personas' residuals */
#v-home .deliver{display:none}                                   /* the last-run numbers list inside the dropzone; the frozen script still updates it, unseen */
#v-home .drop .btn.secondary{border-color:transparent;background:transparent;text-decoration:underline;text-underline-offset:3px;color:var(--v-link)}
#v-home .stamp.pen{background:transparent;padding:0;border-radius:0;color:var(--ink-muted)}   /* "Automatic" is a word, not a badge */
#v-home .card.empty,#v-lectures .card.empty{border:0;padding:0;background:transparent}
#v-home .card.empty .eyebrow{display:none}
#v-lectures .card.empty .eyebrow{display:none}
#subscribed-state.card{border:0;padding:0;background:transparent}
#subscribed-state .stamp{display:none}


/* ===== 15H · Build 28.2 · the upload page as boxes — a wider frame, the promise in a white box that counts itself in,
   four steps in a 2×2 checkerboard (1 and 4 tinted, 2 and 3 white), the pre-flight as five tiles, the drop beneath.
   Appended only: nothing above is removed and every pinned literal stays; motion lives under no-preference. ===== */
main:has(> #v-home.on){max-width:1120px}
/* -- the head: a bigger title in the scheme's indigo; the equation in its own surface with an indigo top rule -- */
#v-home .page-head.up-head{margin-bottom:24px}
h1.page.brandmark.xl{font-size:clamp(34px,4.2vw,46px);line-height:1.1;margin:4px 0 0}
.eqbox{position:relative;margin:20px 0 0;padding:24px 24px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.eqbox::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--primary) 0%,var(--primary) 55%,var(--primary-tint) 100%)}
.eqbox .equation{margin:0;gap:10px 10px}
.eqbox .eq-t{font:500 16px/1.4 var(--sans);padding:8px 16px;background:var(--surface-2);color:var(--ink);border:1px solid transparent}
.eqbox .eq-t.brand{background:var(--primary);color:var(--on-primary);font-weight:600}
.eqbox .eq-t.out{background:var(--primary-tint);color:var(--primary);transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.eqbox .eq-t.out.lit{background:var(--primary);color:var(--on-primary);box-shadow:0 0 0 4px var(--primary-tint)}
.eqbox .eq-o{font:600 18px/1 var(--mono);color:var(--ink-muted);padding:0}
.eqbox .eq-o.eq-eq{color:var(--primary);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--primary-tint)}
.eqbox .eq-foot{display:flex;align-items:center;gap:8px;margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line);font:400 13px/1.5 var(--sans);color:var(--ink-muted)}
.eqbox .eq-foot .ic{width:14px;height:14px;flex:none;stroke:var(--v-link)}
/* -- a subscriber sees no strip; the free and used states keep theirs -- */
#v-home .strip.quiet{display:none}
/* -- the four boxes -- */
#v-home .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 24px}
#v-home .step{display:flex;flex-direction:column;gap:18px;min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px 24px;background:var(--surface)}
#v-home .step:nth-child(1),#v-home .step:nth-child(4){background:var(--primary-tint);border-color:var(--v-mist)}   /* the checkerboard */
#v-home .step-head{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n t" "n hint";column-gap:12px;row-gap:2px;align-items:center}
#v-home .step-n{grid-area:n;align-self:start;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-pill);background:var(--primary);color:var(--on-primary);font:600 14px/1 var(--mono);font-variant-numeric:tabular-nums;transition:background-color .2s var(--ease)}
#v-home .step[data-state="done"] .step-n{background:var(--v-verified);color:var(--v-on-status)}
#v-home .step[data-state="waiting"] .step-n{background:var(--line-strong);color:var(--surface)}
#v-home .step-t{grid-area:t;font:600 22px/1.2 var(--sans);letter-spacing:-0.01em;color:var(--v-heading)}
#v-home .step[data-state="waiting"] .step-t{color:var(--ink-muted)}
#v-home .step-hint{grid-area:hint;margin:0}
/* box 1 · the system as a tidy grid of equal chips on the tint; the chosen one is tinted with a mist edge (rule: selected = tint + mist) */
#v-home .seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#v-home .seg button[data-s]{flex:none;padding:9px 6px;background:var(--surface);border-color:var(--line);color:var(--ink-muted)}
#v-home .seg button[data-s]:hover{border-color:var(--v-link);color:var(--ink);background:var(--surface)}
#v-home .seg button[data-s][aria-checked="true"],#v-home .seg button[data-s][aria-pressed="true"]{padding:8px 5px;background:var(--v-tint);border:2px solid var(--v-mist);color:var(--v-heading);font-weight:600}
#v-home .seg button[data-s][aria-disabled="true"][aria-checked="true"]{background:var(--v-tint);color:var(--v-heading)}
#v-home .step:nth-child(1) select{background:var(--surface);max-width:none}
/* box 2 · the pre-flight as five tiles on a quiet panel, then the verdict, then the drop */
#step-file .preflight{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px 16px}
#step-file .preflight[data-stage],#step-file .preflight[data-tier]{background:var(--surface-2)}
#step-file .pf-head{font:500 13px/1.4 var(--sans);color:var(--ink-muted);margin:0 0 10px}
#step-file .pf-seq{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
#step-file .pf-seg{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:center;align-content:start;gap:6px 0;padding:12px 6px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-align:center;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
#step-file .pf-glyph{grid-column:1;grid-row:1;width:30px;height:30px;margin:0;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--line-strong);color:var(--ink-faint);background:var(--surface);transition:border-color .2s var(--ease),color .2s var(--ease),background-color .2s var(--ease)}
#step-file .pf-glyph svg{width:16px;height:16px}
#step-file .pf-glyph:empty::before,#step-file .pf-seg[data-state="idle"] .pf-glyph:empty::before{content:"";width:8px;height:8px;margin:0;border:0;border-radius:50%;background:var(--line-strong)}
#step-file .pf-seg[data-state="waiting"] .pf-glyph,#step-file .pf-seg[data-state="known"] .pf-glyph,#step-file .pf-seg[data-state="filling"] .pf-glyph{border-color:var(--primary);color:var(--primary)}
#step-file .pf-seg[data-state="waiting"] .pf-glyph:empty::before,#step-file .pf-seg[data-state="known"] .pf-glyph:empty::before,#step-file .pf-seg[data-state="filling"] .pf-glyph:empty::before{background:var(--primary)}
#step-file .pf-seg[data-state="pass"]{border-color:var(--ok)}
#step-file .pf-seg[data-state="pass"] .pf-glyph{border-color:var(--ok);background:var(--ok-tint);color:var(--ok)}
#step-file .pf-seg[data-state="warn"]{border-color:var(--warn)}
#step-file .pf-seg[data-state="warn"] .pf-glyph{border-color:var(--warn);background:var(--warn-tint);color:var(--warn)}
#step-file .pf-seg[data-state="stop"]{border-color:var(--stop);background:var(--stop-tint)}
#step-file .pf-seg[data-state="stop"] .pf-glyph{border-color:var(--stop);background:var(--surface);color:var(--stop)}
#step-file .pf-seg[data-state="dash"] .pf-glyph{border-color:var(--line);color:var(--ink-muted)}
#step-file .pf-txt{grid-column:1;grid-row:2;display:block;font:600 13px/1.3 var(--sans);color:var(--ink)}
#step-file .pf-seg[data-state="dash"] .pf-txt{color:var(--ink-muted)}
#step-file .pf-txt .pf-short{display:block;font-weight:600}
#step-file .pf-txt .pf-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}   /* the full rule stays for readers and the title tooltip; the tile shows the short label */
#step-file .pf-detail{grid-column:1;grid-row:3;font:400 12px/1.35 var(--sans);color:var(--ink-muted);overflow-wrap:anywhere}
#step-file .pf-note{font-size:12px;color:var(--ink-muted);margin:10px 0 0;text-align:center}
#step-file .pf-verdict{margin-top:10px}
#step-file .pf-trace{display:block;width:100%;height:2px;color:var(--primary);margin:0;opacity:1}
#step-file .pf-trace path{stroke-width:2;fill:none}
#step-file .pf-cost{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:8px 0 0;padding:10px 14px;border:1px solid transparent;border-top:1px solid transparent;border-radius:var(--r);background:var(--surface);font-size:14px;color:var(--ink-muted)}
#step-file .pf-cost:not(.idle){font-size:15px;color:var(--ink)}
#step-file .pf-cost:not(.idle):not(.checking):not(.blocked){border-color:var(--v-mist);background:var(--v-tint)}
#step-file .pf-cost .pf-word{color:var(--primary);margin-right:0}
#step-file .pf-cost.blocked{border-color:var(--stop);background:var(--stop-tint)}
#step-file .pf-cost.blocked .pf-word{color:var(--stop)}
#step-file .preflight+.drop{margin-top:12px;border-radius:var(--r-lg);border:1px dashed var(--line-strong);border-top:1px dashed var(--line-strong)}
#step-file .drop,#step-file .drop.locked{background:var(--ground);padding:24px 20px 22px;min-height:0;gap:14px}
#step-file .drop .drop-promise{display:none}   /* said twice already: the step hint and the promise box */
#step-file .drop:not(.locked):hover{border-color:var(--v-link);background:var(--v-tint)}
#step-file .drop.over{border:1px solid var(--v-link);background:var(--v-tint)}
#step-file .drop.has-file{background:var(--surface);border-style:solid;border-color:var(--line)}
/* box 3 · the two guard rows on the same quiet panel as the pre-flight, so boxes 2 and 3 read as one white pair;
   the panel fills the box so it holds when box 4 is the taller of its row */
#step-guidance .step-body{flex:1;display:flex;flex-direction:column}
#step-guidance .guards{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px 16px}
/* -- motion, only where motion is welcome: the tokens count in, the outputs take turns, the boxes arrive, the tiles pop -- */
@media (prefers-reduced-motion: no-preference){
  .upload-js .eqbox .eq-t,.upload-js .eqbox .eq-o{opacity:0;transform:translateY(6px)}
  .upload-js .eqbox .eq-t.in,.upload-js .eqbox .eq-o.in{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease),background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
  @keyframes eq-pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
  .upload-js .eqbox .eq-o.eq-eq.in.tick{animation:eq-pulse .45s var(--ease) 1}
  .upload-js #v-home #steps>.step{opacity:0;transform:translateY(8px)}
  .upload-js #v-home #steps>.step.in{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
  @keyframes up-pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
  @keyframes up-spin{to{transform:rotate(360deg)}}
  @keyframes up-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
  #step-file .pf-seg[data-state="pass"] .pf-glyph,#step-file .pf-seg[data-state="warn"] .pf-glyph,#step-file .pf-seg[data-state="stop"] .pf-glyph,#step-file .pf-seg[data-state="dash"] .pf-glyph,#step-file .pf-seg.lit .pf-glyph{animation:up-pop .45s var(--ease) 1}
  #step-file .pf-seg[data-state="filling"] .pf-glyph,#step-file .pf-seg[data-state="waiting"] .pf-glyph{border-top-color:transparent;animation:up-spin .8s linear infinite}
  #step-file .pf-trace path.draw{stroke-dasharray:100;stroke-dashoffset:100;animation:up-draw .5s var(--ease) forwards}
  #step-file .pf-trace path.drawn{stroke-dasharray:100;stroke-dashoffset:0}
}
/* -- small screens: one column, three chips a row, the tiles reflow -- */
@media (max-width:899px){
  main:has(> #v-home.on){max-width:var(--frame)}
  #v-home .steps{grid-template-columns:1fr;gap:16px}
  #v-home .step{padding:18px 16px 20px}
  #v-home .seg{grid-template-columns:repeat(3,minmax(0,1fr))}
  #step-file .pf-seq{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
  .eqbox{padding:18px 16px 14px}
}
@media (forced-colors: active){
  #v-home .step,#v-home .step:nth-child(1),#v-home .step:nth-child(4),.eqbox,#step-file .pf-seg,#step-guidance .guards{border:1px solid CanvasText;background:Canvas}
  #v-home .step-n,.eqbox .eq-t.brand,.eqbox .eq-t.out.lit,#v-home .seg button[data-s][aria-checked="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}
}


/* ===== 15I · Build 30 · the upload page inside the Verelect colour system — the flow is carried by colour:
   navy = the step that wants you · mist = the step that is waiting · royal = the steps already set for you ·
   tint = every quiet panel · gold = the one action. Verified green goes back to meaning "checked against a
   guideline" (the Anki tick, a pre-flight pass) instead of "this step is preset". Appended only: nothing above
   is removed, every pinned literal stays, and every colour here is a token, so rule 9 carries it into dark. ===== */

/* -- the head: the identity ramp navy → royal → mist, and the equation entirely in the blue family -- */
.eqbox::before{background:linear-gradient(90deg,var(--v-navy) 0%,var(--v-royal) 45%,var(--v-mist) 100%)}
.eqbox .eq-t{background:var(--v-tint);color:var(--ink)}
.eqbox .eq-t.out{background:var(--v-tint);border-color:var(--v-mist);color:var(--v-subheading)}
.eqbox .eq-t.out.lit{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.eqbox .eq-o{color:var(--v-subheading)}
.eqbox .eq-foot{border-top-color:var(--v-mist)}
/* the free lecture is the promise the page opens on — it reads in the heading colour, not as body copy */
#v-home .strip b{color:var(--v-heading)}

/* -- the four numbers carry sequence, not status: one filled disc is the step asking for you, the preset steps
      are the same disc drawn as a ring, and the waiting step is a ring in the quiet edge. Three weights of the
      one colour, so the order reads at a glance and in dark, where a royal fill would sink into the tint. -- */
#v-home .step[data-state="done"] .step-n{background:transparent;border:2px solid var(--primary);color:var(--primary)}
#v-home .step[data-state="done"] .step-t{color:var(--v-subheading)}
#v-home .step[data-state="waiting"] .step-n{background:transparent;border:2px solid var(--line-blue);color:var(--ink-muted)}

/* -- box 1 · the system chips: a blue edge at rest, and the chosen one advances on the tint instead of
      receding into it — mist fill, royal edge, navy label (tint-on-tint is invisible here) -- */
#v-home .seg button[data-s]{border-color:var(--line-blue)}
#v-home .seg button[data-s][aria-checked="true"],#v-home .seg button[data-s][aria-pressed="true"]{background:var(--v-mist);border:2px solid var(--v-royal);color:var(--v-navy-ink)}
#v-home .seg button[data-s][aria-disabled="true"][aria-checked="true"]{background:var(--v-mist);color:var(--v-navy-ink)}
#v-home .step:nth-child(1) select{border-color:var(--line-blue)}

/* -- boxes 2 and 3 · the quiet panel is the scheme's tint, not a grey; the hairlines inside it are mist -- */
#step-file .preflight,#step-file .preflight[data-stage],#step-file .preflight[data-tier],
#step-guidance .guards{background:var(--v-tint);border-color:var(--v-mist)}
#step-file .pf-head{color:var(--v-subheading)}
#step-guidance .guards .guard{border-top-color:var(--v-mist)}

/* -- the five pre-flight tiles: white on the tint, and idle is the scheme's "unchecked", not a border grey -- */
#step-file .pf-seg{border-color:var(--v-mist)}
#step-file .pf-glyph{border-color:var(--line-blue)}
#step-file .pf-glyph:empty::before,#step-file .pf-seg[data-state="idle"] .pf-glyph:empty::before{background:var(--ink-faint)}

/* -- the drop: locked is white, dashed in mist; the moment a system is chosen it takes the tint and the
      link-blue dash, so the page visibly opens on step 1 being answered -- */
#step-file .preflight+.drop,#step-file .preflight+.drop.locked{background:var(--surface);border:1px dashed var(--v-mist)}
#step-file .preflight+.drop:not(.locked){background:var(--v-tint);border:1px dashed var(--v-link)}
#step-file .preflight+.drop.has-file{background:var(--surface);border:1px solid var(--v-mist)}
#step-file .preflight+.drop:not(.locked):hover,#step-file .preflight+.drop.over{border:1px solid var(--v-link);background:var(--v-tint)}
#step-file .preflight+.drop.locked:hover,#step-file .preflight+.drop.locked.over{border:1px dashed var(--v-mist);background:var(--surface)}

/* -- box 4 · the output rows sit on the tint, so their hairlines and the empty tick box take the blue edge -- */
#v-home .outs .out{border-top-color:var(--v-mist)}
#v-home .outs .out .tick{border-color:var(--line-blue)}

/* -- the run bar is the page's action zone, not a hairline: a tinted bar carrying the one gold button.
      The accent is present before it is armed — a gold edge on an unfilled button says where the action is. -- */
#v-home .runbar{margin-top:8px;padding:16px 20px;border:1px solid var(--v-mist);border-radius:var(--r-lg);background:var(--v-tint)}
#v-home .runbar .lbl{color:var(--ink-muted)}
#v-home .runbar[data-ready="true"] .lbl{color:var(--v-heading);font-weight:600}
#v-home .btn.go:disabled,#v-home .btn.go[disabled]{background:var(--surface);border:1px solid var(--v-accent);color:var(--ink-muted)}

/* -- the briefing dialog joins the family: the same ramp across its head, mist hairlines -- */
.guide{border-color:var(--v-mist)}
.guide-head{border-bottom-color:var(--v-mist);background-image:linear-gradient(90deg,var(--v-navy) 0%,var(--v-royal) 45%,var(--v-mist) 100%);background-repeat:no-repeat;background-size:100% 3px;background-position:left top}
.guide-foot{border-top-color:var(--v-mist)}
.guide-steps .gs-n{background:var(--v-tint);color:var(--v-subheading)}

@media (forced-colors: active){
  #v-home .runbar,#step-file .preflight+.drop{border:1px solid CanvasText;background:Canvas}
  #v-home .seg button[data-s][aria-checked="true"],#v-home .step[data-state="done"] .step-n,#v-home .step[data-state="waiting"] .step-n{forced-color-adjust:none;background:Highlight;color:HighlightText}
}
/* the verdict line sits on the tint panel now, so "ready" cannot be tint-on-tint: it stays white and takes a
   royal edge, which is also the one place royal reads as "this is the answer" rather than as a heading */
#step-file .pf-cost{border-color:var(--v-mist)}
#step-file .pf-cost:not(.idle):not(.checking):not(.blocked){background:var(--surface);border-color:var(--v-royal)}
#step-file .pf-cost .pf-word{color:var(--v-heading)}
#step-file .pf-cost.blocked{border-color:var(--stop);background:var(--stop-tint)}
#step-file .pf-cost.blocked .pf-word{color:var(--stop)}


/* ===== 16 · Build 31 · the offer — the pricing section on the landing and on /pricing.
   The brand's persuasion is arithmetic, not adjectives, so the force here comes from scale, from the three
   deliverables getting their own marks, and from the annual price being shown the way the product shows any
   value that has been superseded: the old figure struck, the current figure in ink, the difference named.
   Rule 2 is kept — gold stays on the landing hero and on /pricing's free block; this section's action is navy.
   Rule 6 is kept — no status colour is spent on a price. Appended only; tokens throughout. ===== */

/* the section lead: one sentence between the heading and the offer */
.section-lead{margin:8px 0 0;max-width:var(--measure-s);font:400 17px/1.6 var(--sans);color:var(--ink-muted)}

/* -- what a lecture comes back as: three marks, three names, three lines -- */
.gets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.get{display:grid;grid-template-rows:auto auto auto;gap:8px;min-width:0;padding:18px 16px 16px;border:1px solid var(--v-mist);border-radius:var(--r-lg);background:var(--surface);text-align:left}
.get-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r);background:var(--v-tint);border:1px solid var(--v-mist);color:var(--primary)}
.get-mark svg{width:20px;height:20px;display:block}
.get-mark .ic{width:19px;height:19px;stroke:var(--primary);stroke-width:2.4}
.get b{font:600 17px/1.3 var(--sans);color:var(--v-heading)}
.get small{font:400 14px/1.5 var(--sans);color:var(--ink-muted)}

.gets-foot{display:flex;align-items:flex-start;gap:8px;margin:2px 0 0;width:100%;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.gets-foot .ic{width:15px;height:15px;flex:none;margin-top:4px;stroke:var(--v-link)}

/* -- the two ways to pay, side by side inside the plan box -- */
.pays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%}
.pay{display:grid;gap:6px;align-content:start;min-width:0;padding:16px 18px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.pay.best{background:var(--v-tint);border-color:var(--v-mist)}
.pay-k{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:500 14px/1.4 var(--sans);color:var(--ink-muted);letter-spacing:0;text-transform:none}
.pay .price{margin:2px 0 0;align-items:baseline;gap:6px}
.pay .price .amt{font:500 35px/1 var(--mono);color:var(--v-heading);font-variant-numeric:tabular-nums}
.was-line{margin:2px 0 0;font:400 14px/1.4 var(--sans);color:var(--ink-muted)}
.was{font:400 14px/1.4 var(--mono);color:var(--ink-muted);text-decoration:line-through;text-decoration-color:var(--ink-muted);text-decoration-thickness:1px;font-variant-numeric:tabular-nums}
/* with the script in play the rule is drawn rather than declared — the year price striking the twelve months out
   is the one thing this section is meant to be remembered by, so it is the one thing that moves on its own */
.offer-js .was{position:relative;text-decoration:none}
.offer-js .was::after{content:"";position:absolute;left:0;top:52%;height:1px;width:100%;background:var(--ink-muted);
  transform:scaleX(0);transform-origin:left center}
.offer-js .was.struck::after{transform:none;transition:transform .45s var(--ease)}
.pay-sub{margin:2px 0 0;font:400 14px/1.5 var(--sans);color:var(--ink)}
.pay-note{font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.pay .btn{width:100%;margin-top:10px}
/* the discount drawn: the outlined track is the twelve-month price, the filled part is what you actually pay, and
   the gap on the right is the discount. `--pay` is set inline from ANNUAL_DISCOUNT_PCT, so the picture cannot
   disagree with the figure beside it. The proof of the offer, at the size of a caption. */
.offbar{margin:10px 0 0;width:100%}
.offbar-track{position:relative;height:14px;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--primary);overflow:hidden}
.offbar-fill{position:absolute;inset:0 auto 0 0;width:var(--pay,90%);border-radius:2px;background:var(--primary);display:block}
.offbar-k{display:flex;gap:14px;margin:6px 0 0;font:500 13px/1.4 var(--sans);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.offbar-k span{display:inline-flex;align-items:center;gap:6px}
.offbar-k span::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--primary)}
.offbar-k .ok-off{color:var(--v-heading);font-weight:600}
.offbar-k .ok-off::before{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--primary)}

/* the saving is emphasis, not a status: mist and navy-ink, never verified green */
.save{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-pill);background:var(--v-mist);color:var(--v-navy-ink);font:600 13px/1.4 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;font-variant-numeric:tabular-nums}

/* -- the plan box, now that the price lives in .pays -- */
.plan .plan-k{color:var(--ink-muted)}
.plan .units li{padding:10px 0}
.plan-go{width:100%;justify-self:stretch;margin-top:4px}

/* -- the offer breaks the reading column. The heading stays in it; the offer beneath is wider, so the three
      marks and the two prices get the room the close deserves. Falls back to the column where it will not fit. -- */
.plans:has(.gets){--offer-w:min(760px,calc(100vw - 32px),calc(100% + 168px));
  width:var(--offer-w);max-width:none;margin-left:calc((100% - var(--offer-w)) / 2);margin-right:0}
.plans:has(.gets) .plan{max-width:none}
/* in the widened box the terms and the re-check note sit side by side, so neither leaves a void */
/* .plan-terms, not .terms — `.terms` is already the subscription page's definition list (§15E) */
.plan-terms{display:grid;gap:16px;width:100%}
.plan-terms .units{margin:0}
.plans:has(.gets) .plan-terms{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 32px;align-items:start}

@media (max-width:719px){
  .gets{grid-template-columns:1fr;gap:8px}
  .get{grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 12px;padding:14px 16px;align-items:center}
  .get-mark{grid-row:1 / span 2;align-self:start}
  .pays{grid-template-columns:1fr}
  .plans:has(.gets) .plan-terms{grid-template-columns:1fr;gap:16px}
}

/* -- motion: one arrival, once, when the offer first comes on screen. No loop. -- */
@media (prefers-reduced-motion: no-preference){
  .offer-js .gets .get{opacity:0;transform:translateY(8px)}
  .offer-js .gets .get.in{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .offer-js .save{opacity:0;transform:scale(.9)}
  .offer-js .save.in{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  /* the bar fills to the whole twelve-month price, then the discount comes off it — one motion, the offer itself */
  .offer-js .offbar .offbar-fill{width:0}
  .offer-js .offbar.run .offbar-fill{animation:off-cut .95s var(--ease) forwards}
  .offer-js .offbar-k{opacity:0}
  .offer-js .offbar-k.in{opacity:1;transition:opacity .3s var(--ease)}
  @keyframes off-cut{0%{width:0}58%{width:100%}100%{width:var(--pay,90%)}}
}

@media (forced-colors: active){
  .get,.pay,.pay.best,.get-mark{border:1px solid CanvasText;background:Canvas}
  .save,.offbar-fill{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .offbar-track{box-shadow:inset 0 0 0 1px CanvasText}
}


/* ===== 17 · Build 35 · the public journey — evidence first.
   The landing stopped describing the product where it could show what the product returned: the finding from a
   real run is now the hero's right-hand half rather than the third section down, the four-step tick grid that
   repeated the pipe two sections later is gone, and the six pipe rows carry the guarantees instead of the
   mechanics. The offer's saving is stated in the product's own superseded grammar — the old figure struck at
   price scale, the new figure beside it — and the meter under it becomes a quiet rule that stops short of the
   full price rather than a dashboard track with a legend.
   Appended only. Tokens throughout, no raw hex: tests/test_build30_upload_palette.py and
   tests/test_build31_offer.py both scan everything after their own section marker. ===== */

/* -- the band. One per public page: the hero breaks the reading column, keeps the calm ground (rule 1 — no
      section is filled with navy) and takes the scheme's tint so the white artefact on it reads as paper. -- */
/* the landing's frame is released and each section re-insets itself, so the band is full-width without a `vw`
   trick: no scrollbar overshoot, no clipping context, and nothing to go wrong at a fractional zoom. */
main:has(>.hero){max-width:none;padding:0 0 96px}
main:has(>.hero)>.section,main:has(>.hero)>.cta{max-width:var(--frame-n);margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px;box-sizing:border-box}
main:has(>.hero)>.cta{margin-top:64px}
.hero.bleed{margin:0 0 64px;padding:44px 24px 52px;max-width:none;
  background:var(--v-tint);border-bottom:1px solid var(--v-mist);gap:0}
.hero-in{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  gap:24px 56px;align-items:center}
.hero .hero-copy{gap:20px;align-content:center}

/* the headline: one sentence, the accent phrase in the serif italic §11 already owns */
.hero h1{font-weight:600;font-size:clamp(30px,3.1vw,42px);line-height:1.1;letter-spacing:-0.02em;
  color:var(--v-heading);max-width:20ch}
.hero .hero-sub{font:400 20px/1.5 var(--sans);color:var(--ink);margin:0;max-width:46ch}

/* the signup sits on the tint, so the field is white and the label carries the ink */
.hero .signup{margin:12px 0 0}
.hero .signup .su-field{background:var(--surface);border-color:var(--line-blue)}
.hero .signup .su-label{color:var(--v-heading)}
.hero .signup-note{color:var(--ink-muted)}
/* a filled gold button needs a boundary of its own: its own label colour, at 1px, clears 1.4.11 on any ground */
.btn.accent,.btn.primary.accent{border:1px solid var(--v-accent-text)}

/* the proof: the artefact a real run returned, captioned, with the three stamps that read it underneath */
/* the finding is its own section under the hero now, and the stamp key sits in its head */
/* the three stamps read as a legend under the heading, not as a right-aligned orphan when the head wraps */
.showcase-wrap .key{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0;padding:0;list-style:none;justify-content:flex-start}
.showcase-wrap .key li{display:block}
.showcase-wrap .showcase-lecture{margin:4px 0 0}

@media (max-width:1079px){
  .hero-in{grid-template-columns:1fr;gap:40px}
  .hero h1{max-width:none}
  .hero.bleed{padding:40px 24px 48px}
}
@media (max-width:640px){
  .hero.bleed{padding:32px 16px 40px;margin-bottom:48px}
  .hero h1{font-size:clamp(28px,7.4vw,34px)}
  .hero .hero-sub{font-size:18px}
}
@media (forced-colors: active){
  .hero.bleed{background:Canvas;border-bottom:1px solid CanvasText}
  .btn.accent,.btn.primary.accent{border:1px solid CanvasText}
}

/* -- the six rows: what happens to a lecture, said as guarantees. The order is still the information. -- */
.pipe .station{grid-template-columns:7px 132px minmax(0,1fr);padding:14px 0}
/* §15B stacks the row below 760px; this layer is more specific, so it has to hand the column back */
@media (max-width:760px){.pipe .station{grid-template-columns:7px minmax(0,1fr);gap:2px 16px;padding:12px 0}}
.pipe .station .sub{color:var(--ink-muted)}
.pipe .station:first-child::before{margin-top:9px}

/* -- the offer, in the wider column: it no longer has to break out of the reading measure -- */
.plans,.plans:has(.gets){width:auto;max-width:none;margin-left:0;margin-right:0}
.plans:has(.gets) .plan{max-width:none}
.plan-free{padding:20px 24px}

/* the two ways to pay: equal columns, the action on the same baseline in both */
.pays{gap:20px}
.pay{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:20px}
.pay .btn{margin-top:auto}
.pay-sub{color:var(--ink-muted)}
/* the terms below the prices: one rule above the pair (.plan-hr), none inside it — the hairline between two
   statements and the one over the right-hand column read as an unfinished table */
/* both halves are the terms, so both are set as terms: one size, one leading, first lines on one baseline. At
   17px against the note's 14px the left half read as two headings that had lost their bodies, and the second
   one broke to leave `you cancel` alone on a line. */
.plan-terms .units{gap:6px;font-size:14px;line-height:1.5}
.plan-terms .units li{border-top:0;padding:0;text-wrap:pretty}
.plan-terms .payfor{border-top:0;padding-top:0}

/* the saving in the product's own grammar: the superseded figure struck at price scale, the current one beside
   it. This is the one thing the section is meant to be remembered by, so it is the one thing drawn on arrival. */
.price-cut{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 0 0}
.price-cut .was{font:400 25px/1 var(--mono);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.offer-js .price-cut .was::after{height:2px;top:54%;background:var(--ink-muted)}
.pay .price-cut .amt{font-size:35px}

/* the rule under the price: it fills to the three months bought one at a time, then stops short at what you pay.
   Three pixels, no track chrome, no legend — the numbers beside it are the statement. */
.offbar{margin:12px 0 4px}
.offbar-track{height:3px;border-radius:2px;box-shadow:none;background:var(--v-mist)}
.offbar-fill{border-radius:2px}
.offbar-k{display:block;margin:8px 0 0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.offbar-k span::before{content:none}
.offbar-k .ok-off{display:inline;color:var(--v-heading);font-weight:600}

/* -- dark: a card at --v-card on a --v-navy-ink page separates by 1.13:1, so the public surfaces take the
      lifted fill and the --line-strong edge instead of the hairline that disappears into the ground. -- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .plan,
  :root:not([data-theme="light"]) .pay,
  :root:not([data-theme="light"]) .get,
  :root:not([data-theme="light"]) .hero-proof .fcard,
  :root:not([data-theme="light"]) .hero-flow{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal));border-color:var(--line-strong)}
  :root:not([data-theme="light"]) .pay.best{background:color-mix(in srgb,var(--v-card) 58%,var(--v-royal))}
  :root:not([data-theme="light"]) .hero.bleed{border-bottom-color:var(--line-strong)}
}
:root[data-theme="dark"] .plan,
:root[data-theme="dark"] .pay,
:root[data-theme="dark"] .get,
:root[data-theme="dark"] .hero-proof .fcard,
:root[data-theme="dark"] .hero-flow{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal));border-color:var(--line-strong)}
:root[data-theme="dark"] .pay.best{background:color-mix(in srgb,var(--v-card) 58%,var(--v-royal))}
:root[data-theme="dark"] .hero.bleed{border-bottom-color:var(--line-strong)}

/* -- the closing call keeps one action; the note under it is the same sentence the hero already made -- */
.cta{padding-top:40px}
.cta h2{font-size:clamp(24px,2.2vw,29px);line-height:1.2;color:var(--v-heading)}

/* -- press feedback: every pressable acknowledges the press. Colour and transform only, inside §4's budget. -- */
@media (prefers-reduced-motion: no-preference){
  .btn:active:not([disabled]):not([aria-disabled="true"]){transform:scale(.985)}
}

/* -- /pricing · the questions are the objection handling, so the disclosure has to look like one: the marker is a
      drawn chevron that turns, not a "+" and a "–" set in the body face. Two answers open on arrival (template). -- */
.faq summary::after,.faq details[open] summary::after{content:"";width:9px;height:9px;border:0;
  border-right:2px solid var(--ink-muted);border-bottom:2px solid var(--ink-muted);border-radius:1px;
  transform:rotate(45deg);transform-origin:60% 60%;margin-right:6px;flex:none;font-size:0;line-height:0}
.faq details[open] summary::after{transform:rotate(-135deg)}
@media (prefers-reduced-motion: no-preference){.faq summary::after{transition:transform .15s var(--ease)}}
.faq summary:hover::after,.faq summary:focus-visible::after{border-color:var(--v-link)}
.faq details[open] summary{color:var(--v-heading)}


/* ===== 17B · Build 35 · the upload page as one working column.
   Build 28.2 laid the four steps out as a 2×2 checkerboard of equal weight, which gave the two steps that are
   already set for you half the page, left box 1 with a 350px void beside box 2, and put the drop zone — the one
   thing a student came here to do — in a quarter of the frame. The order of the DOM is untouched (the pinned
   `.preflight+.drop` seam depends on it) and every id the frozen script binds is where it was; only the layout,
   the weights and two strings the script never writes change. Tokens only, no raw hex. ===== */

/* the head: one sentence where the equation box used to be */
.up-sub{margin:8px 0 0;max-width:var(--measure);color:var(--ink-muted)}

/* the two steps you answer run the full width, in order; the two already set for you sit beneath them as a quiet
   pair. White is "this is yours to answer", tint is "this is already decided" — which is what the step numbers
   have said since §15I (filled disc = asking, ring = preset). */
#v-home .steps{gap:16px}
#v-home .step:nth-child(1),#v-home .step:nth-child(2){grid-column:1 / -1}
#v-home .step:nth-child(1){background:var(--surface);border-color:var(--line)}
#v-home .step:nth-child(3){background:var(--primary-tint);border-color:var(--v-mist)}
#v-home .step:nth-child(3),#v-home .step:nth-child(4){padding:18px 20px 20px;gap:12px}
#v-home .step:nth-child(3) .step-n,#v-home .step:nth-child(4) .step-n{width:24px;height:24px;font-size:12px}
#v-home .step:nth-child(3) .step-t,#v-home .step:nth-child(4) .step-t{font:600 17px/1.3 var(--sans)}

/* step 1 · at full width the eleven systems are one calm grid and the note structure sits beside them */
#v-home #intent{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;margin:0}
#v-home .seg{grid-template-columns:repeat(6,minmax(0,1fr))}
#v-home .step:nth-child(1) select{max-width:none}

/* step 2 · the five checks are rows again, not tiles: one height each, the detail readable at 14px instead of
   twelve, and no equal-height stretch turning a two-word result into a seven-line column */
#step-file .pf-seq{grid-template-columns:1fr;gap:0}
#step-file .pf-seg{grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto auto;justify-items:stretch;
  align-items:start;gap:2px 12px;padding:10px 12px;text-align:left;border:0;border-top:1px solid var(--v-mist);
  border-radius:0;background:transparent}
#step-file .pf-seg:first-child{border-top:0}
#step-file .pf-glyph{grid-column:1;grid-row:1 / span 2;align-self:start;width:22px;height:22px;margin-top:1px}
#step-file .pf-glyph svg{width:13px;height:13px}
#step-file .pf-glyph:empty::before,#step-file .pf-seg[data-state="idle"] .pf-glyph:empty::before{width:6px;height:6px}
#step-file .pf-txt{grid-column:2;grid-row:1;font:500 14px/1.45 var(--sans);color:var(--ink)}
#step-file .pf-detail{grid-column:2;grid-row:2;font:400 14px/1.45 var(--sans);text-align:left;color:var(--ink-muted)}
#step-file .pf-detail:empty{display:none}
/* the state is the glyph's job; only a blocking row takes a fill and an edge of its own */
#step-file .pf-seg[data-state="pass"],#step-file .pf-seg[data-state="warn"],
#step-file .pf-seg[data-state="dash"]{border-top-color:var(--v-mist)}
#step-file .pf-seg[data-state="stop"]{border-top-color:var(--stop);background:var(--stop-tint);border-radius:var(--r)}
/* before a file exists the panel has nothing to report, so it rests quietly instead of showing five empty tiles */
#step-file .preflight[data-stage="rest"] .pf-seg{padding:7px 12px}
#step-file .preflight[data-stage="rest"] .pf-txt{font-weight:400;color:var(--ink-muted)}
/* the score is a verdict, so it reads as one — the same pill grammar as every other status in the product */
/* the same grammar as every other status in the product (§6): a tint fill and a status edge, with the label in
   ink. A solid fill would put 13px white on verified green at 3.39:1, under §5's 4.5 floor for small text. */
#step-file .pf-score{border-radius:var(--r-pill);padding:1px 10px;font:500 13px/1.5 var(--sans);
  background:var(--surface);border:1px solid var(--line-blue);color:var(--ink)}
#step-file .pf-score.ok{background:var(--ok-tint);border-color:var(--ok)}
#step-file .pf-score.warn{background:var(--warn-tint);border-color:var(--warn)}
#step-file .pf-score.stop{background:var(--stop-tint);border-color:var(--stop)}
#step-file .pf-file{margin-left:auto}

/* the drop is the page's target: it gets the width and the weight. While it is locked the script's heading and
   this sentence said the same thing twice, with the refusal set larger — so the heading steps aside and the one
   sentence that names the way out carries the zone. Unlocked, "Drop a lecture here" is the biggest text in it. */
#step-file .preflight+.drop{min-height:180px;padding:32px 24px}
#step-file .drop .drop-title{font:600 24px/1.25 var(--sans);color:var(--v-heading)}
#step-file .drop.locked .drop-title{display:none}
#step-file .drop.locked .drop-reason{font:500 20px/1.4 var(--sans);color:var(--v-heading);margin:0}
#step-file .drop .drop-affirm{max-width:56ch;margin-left:auto;margin-right:auto}

/* the action stays on screen: the bar is the page's one gold button and it should not have to be scrolled to */
#v-home .runbar{position:sticky;bottom:16px;z-index:1;margin-top:16px}
.run-note{margin:12px 0 0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}

@media (max-width:899px){
  #v-home .seg{grid-template-columns:repeat(3,minmax(0,1fr))}
  #step-file .preflight+.drop{min-height:150px;padding:24px 16px}
  #step-file .drop .drop-title{font-size:20px}
  #step-file .drop.locked .drop-reason{font-size:17px}
  #v-home .runbar{bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
}
@media (forced-colors: active){
  #step-file .pf-seg{border-top:1px solid CanvasText}
  #v-home .runbar{border:1px solid CanvasText;background:Canvas}
  #step-file .pf-score{forced-color-adjust:none;background:Highlight;color:HighlightText}
}
/* at rest there is nothing to report: the trace is a 2px rule with no result behind it, the verdict line is a
   sentence rather than a filled field, and the note lines up with the rows above it */
#step-file .preflight[data-stage="rest"] .pf-trace{display:none}
#step-file .pf-cost.idle{background:transparent;border-color:transparent;padding:8px 12px 0;color:var(--ink-muted)}
#step-file .pf-note{text-align:left;padding-left:12px}
/* the note structure sits beside the systems only when there is room for both; the longest option is
   "Auto — detected from the lecture", which needs 340px before the select starts truncating */
@media (min-width:900px){#v-home #intent{grid-template-columns:minmax(0,1fr) 340px;gap:16px 32px}}


/* ===== 17C · Build 35 · the display voice and the hero's one authored moment.
   Every heading was Source Sans 3 — a superb body face and a characterless display one. Source Serif 4 was already
   loaded for the accent italic; adding its roman axis gives the headings a voice without a second family, with an
   exact metric match to the body, and turns the accent from a second face into emphasis inside one.
   The hero's right-hand half becomes one element that morphs: the run drawn as it actually happens, settling onto
   the finding a real run returned. It plays once — DESIGN §4's one infinite animation is still the live-run pulse
   dot — and the card is the resting state, visible by default and hidden only while the sequence runs. ===== */

/* -- the display face. Declared rather than aliased to --serif so the accent rule stays the single place that
      token is spent (tests/test_build29_accent_type.py pins that count). Build 50: Inter, as the body is. -- */
:root{--display:'Inter','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif}
.hero h1,h1.page,.section-head h2,.sec-h,.cta h2,.hero-proof-k h2,.fc-topic,.get b,.plan-free b,.card h2,.card h3{
  font-family:var(--display);font-optical-sizing:auto}
.hero h1{letter-spacing:-0.015em}
.section-head h2,.sec-h,.cta h2{letter-spacing:-0.005em}
/* serif on serif now, so the accent drops the optical bump that existed to match it to the sans stroke */
.hero h1 em,.section-head h2 em{font-size:1em;font-weight:inherit;letter-spacing:inherit}
.hero-proof-k h2 em{font-style:italic;color:var(--v-subheading)}

/* -- the page arrives instead of appearing: the hero copy rises in, then the accent draws under itself -- */
@media (prefers-reduced-motion: no-preference){
  .js .hero-copy>*{opacity:0;transform:translateY(10px);animation:hero-rise .55s var(--ease) forwards}
  .js .hero-copy>*:nth-child(1){animation-delay:.05s}
  .js .hero-copy>*:nth-child(2){animation-delay:.13s}
  .js .hero-copy>*:nth-child(3){animation-delay:.21s}
  .js .hero-copy>*:nth-child(4){animation-delay:.29s}
  .js .hero-copy>*:nth-child(5){animation-delay:.29s}
  @keyframes hero-rise{to{opacity:1;transform:none}}
  .js .hero h1 em{animation-delay:.55s}
}

/* -- the panel is the hero's own visual, so it is always on the page and its ground never leaves: the rewind
      fades the four content bands, never the panel behind them. Every lit state below also matches
      `html:not(.hero-js)`, which is what a visitor gets with no script or with reduced motion — the same diagram,
      finished, at rest.

      The layout is a fixed five-row grid with an empty band in the middle. That band is the spotlight: one thing
      is ever in it, entering large and centred, then flying to the slot it will keep. Nothing overlaps because
      nothing shares the band, and the sequence reads as a queue being worked rather than a list filling in. -- */
.hero-flow{--ease-out-strong:cubic-bezier(.23,1,.32,1);--ease-settle:cubic-bezier(.34,1.28,.64,1);
  display:grid;grid-template-rows:118px auto auto auto;justify-items:center;align-items:start;
  align-content:start;gap:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;min-width:0}
.flow-drop{grid-row:1}
.flow-steps{grid-row:2}
.flow-outs{grid-row:3}
.flow-bodies{grid-row:4}
/* the rewind empties the panel and leaves it standing */
.hero-flow>*{transition:opacity .34s var(--ease)}
.hero-flow.rewind>*{opacity:0}

/* 1 · the deck falls into the zone at the middle of the panel, then the whole block takes its place at the top
      and hands the stage over. The displacement is declared in CSS, so there is no jump before the script runs. */
.flow-drop{position:relative;width:100%;height:118px;transition:transform .58s var(--ease-settle)}
.hero-js .flow-drop{transform:translateY(132px)}
.flow-zone{position:absolute;inset:0;left:50%;width:min(384px,100%);transform:translateX(-50%);
  border:1px dashed var(--v-mist);border-radius:var(--r-lg);background:var(--v-card);
  transition:border-color .3s var(--ease),background-color .3s var(--ease)}
html:not(.hero-js) .flow-zone,.flow-zone.filled{border:1px solid var(--v-link);background:var(--v-tint)}
/* the deck takes the sequence colour, not royal: royal on the dark drop zone is 1.9:1 and the object the whole
   panel is about all but disappeared. `--primary` is navy on light and link on dark, so it reads on both. */
.flow-deck{position:absolute;z-index:1;left:50%;top:50%;display:grid;justify-items:center;gap:6px;
  color:var(--primary);transform:translate(-50%,-172%) rotate(-5deg);
  transition:transform .66s var(--ease-out-strong)}
.flow-deck .dk{width:62px;height:50px;display:block}
.flow-deck b{font:500 12px/1 var(--mono);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.flow-deck.dropped{transform:translate(-50%,-50%) rotate(-1deg) scale(.94)}
html:not(.hero-js) .flow-deck,.flow-deck.landed{transform:translate(-50%,-50%) rotate(0deg) scale(.88);
  transition:transform .22s var(--ease-settle)}

/* 2 · each stage takes the spotlight, is ticked there, then shrinks into the stack under the drop box. The
      completed disc is the sequence colour, never verified green — green means "checked against a guideline",
      which is what the finding below the hero is about to show. */
.flow-steps{list-style:none;margin:0;padding:0;display:grid;gap:11px;width:max-content;max-width:100%;justify-items:start}
.flow-steps li{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:11px;
  font:500 15px/1.4 var(--sans);color:var(--ink-muted);opacity:0;transform-origin:50% 50%;
  transition:opacity .34s var(--ease-out-strong),transform .5s var(--ease-settle),color .3s var(--ease)}
html:not(.hero-js) .flow-steps li{opacity:1}
html:not(.hero-js) .flow-steps li,.flow-steps li.done{color:var(--ink)}
/* the ring centres its own glyph: `place-items:center` holds the tick on the circle's axis at every scale,
   which a hand-placed rotated border never does once the row is blown up in the stage */
.flow-steps li i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--line-blue);
  transition:border-color .25s var(--ease),background-color .25s var(--ease)}
.flow-steps li i .ic{width:11px;height:11px;display:block;stroke:var(--on-primary);stroke-width:3.2;
  opacity:0;transition:opacity .2s var(--ease)}
html:not(.hero-js) .flow-steps li i,.flow-steps li.done i{border-color:var(--primary);background:var(--primary)}
html:not(.hero-js) .flow-steps li i .ic,.flow-steps li.done i .ic{opacity:1}

/* 3 · what comes back. One mark at a time: large in the band, then away to the slot it keeps — Notion, then the
      guideline check, then the deck, so no two are ever in the middle together. */
/* each mark is only as wide as itself, centred in its third: a full-column box would grow into its neighbours
   the moment it is scaled up in the stage, which is exactly what the middle-last ordering exists to avoid */
.flow-outs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  justify-items:center;gap:12px;width:100%}
.flow-outs li{display:grid;justify-items:center;gap:8px;width:max-content;max-width:100%;opacity:0;transform-origin:50% 50%;
  transition:opacity .34s var(--ease-out-strong),transform .52s var(--ease-settle)}
html:not(.hero-js) .flow-outs li{opacity:1}
.flow-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--v-mist);color:var(--line-blue);
  transition:background-color .34s var(--ease),border-color .34s var(--ease),color .34s var(--ease)}
html:not(.hero-js) .flow-mark,.flow-outs li.in .flow-mark{background:var(--v-tint);border-color:var(--v-royal);
  color:var(--primary)}
.flow-mark svg{width:22px;height:22px;display:block}
.flow-mark .ic{width:22px;height:22px;stroke:currentColor;stroke-width:2.4}
.flow-outs small{font:400 13px/1.35 var(--sans);color:var(--ink-muted);text-align:center;transition:color .34s var(--ease)}
html:not(.hero-js) .flow-outs small,.flow-outs li.in small{color:var(--ink)}
/* the three together, once: the moment the lecture is actually delivered */
@keyframes mark-lit{0%{transform:scale(1)}42%{transform:scale(1.12)}100%{transform:scale(1)}}
.flow-outs li.lit .flow-mark{animation:mark-lit .52s var(--ease-settle) 1}

/* 4 · and what it was checked against. Each one grows as it is processed and settles, the student's own board
      last and on its own — the only pill that keeps a fill of its own. */
.flow-bodies{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;width:100%}
.flow-bodies li{font:500 14px/1.5 var(--sans);color:var(--ink-muted);background:var(--surface);
  border:1px solid var(--v-mist);border-radius:var(--r-pill);padding:4px 14px;opacity:0;transform-origin:50% 50%;
  transition:opacity .3s var(--ease-out-strong),background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
html:not(.hero-js) .flow-bodies li{opacity:1}
html:not(.hero-js) .flow-bodies li,.flow-bodies li.in{background:var(--v-tint);border-color:var(--v-tint);
  color:var(--v-subheading);opacity:1}
html:not(.hero-js) .flow-bodies li.local,.flow-bodies li.local.in{background:var(--v-mist);border-color:var(--v-mist);
  color:var(--v-navy-ink);font-weight:600}
@keyframes body-lit{0%{transform:scale(1)}38%{transform:scale(1.22)}100%{transform:scale(1)}}
.flow-bodies li.in{animation:body-lit .46s var(--ease-settle) 1}

@media (max-width:640px){
  .hero-flow{padding:20px 16px;grid-template-rows:104px auto auto auto;gap:20px}
  .flow-bodies{justify-content:center;gap:6px}
  .flow-bodies li{font-size:13px;padding:3px 11px}
  .flow-drop{height:104px}
  .hero-js .flow-drop{transform:translateY(118px)}
  .flow-steps li{font-size:14px}
}
@media (forced-colors: active){
  .hero-flow,.flow-zone,.flow-mark{border:1px solid CanvasText;background:Canvas}
  .flow-steps li.done i{forced-color-adjust:none;background:Highlight;border-color:Highlight}
  .flow-bodies li{border:1px solid CanvasText}
}


/* ===== 18 · Build 36 · the close — the landing below the hero.
   The page had one ground from the hero down: white cards on light grey, a few small status pills, and a finding
   card that read as a specimen rather than as the argument. Three changes, in order of how much they carry:

   1 · The page gets acts. Tint (hero) → navy (the proof) → page (the promises) → tint (the offer) → page (the
       close). Colour rule 1 said no section is filled with navy; §18 opens one named exception, on the landing
       page only, for the one section whose whole job is to be believed. Nothing in the app moves.
   2 · The finding is the only thing that can sell this product, so it is animated. The strike is DRAWN across
       the durations the lecture taught and the current figure lands beside them — the product's own gesture,
       on its own real data, at the moment a visitor is deciding whether any of this is true.
   3 · The card's type collapses from ten treatments to four: the two values, the topic, the body, the meta.

   Appended only. Tokens throughout, no raw hex. ===== */

/* -- the band. A section that leaves the reading column and re-insets its own contents. -- */
main:has(>.hero)>.section.band{max-width:none;margin-left:0;margin-right:0;padding:56px 24px}
.band>.band-in{max-width:var(--frame-n);margin:0 auto}
.band-tint{background:var(--v-tint);border-top:1px solid var(--v-mist);border-bottom:1px solid var(--v-mist)}
@media (max-width:640px){
  main:has(>.hero)>.section.band{padding:44px 16px}
  }

/* -- the finding card, on the dark ground. It is a sheet of paper on a desk: nothing else in the band is white,
      so the eye has one place to go. -- */

/* -- type: four levels, not ten. The two values are the argument, so they are the biggest thing in the card;
      the topic names it; the body explains it; everything else is meta at one size and one weight. -- */
.fcard .fc-topic{font-size:clamp(22px,2vw,27px);line-height:1.2;margin:-4px 0 0}
.fcard .fc-rows dd,.fcard .fc-rows dd s{font:500 20px/1.4 var(--mono)}
.fcard .fc-rows dt{font:400 13px/1.5 var(--sans)}
.fcard .fc-big,.fcard .fc-big .val{font:500 35px/1.1 var(--mono)}
.fcard .fc-big small{font:400 14px/1.4 var(--sans);color:var(--ink-muted)}
.fcard .fc-gist li{font:400 17px/1.5 var(--sans)}
.fcard .fc-brand,.fcard .fc-brand b,.fcard .fc-still,.fcard .fc-still b,.fcard .fc-foot,
.fcard .fc-foot .fc-chain,.fcard .fc-foot .fc-lec,.fcard .fc-foot .fc-where,.fcard .fc-foot .fc-url{
  font-size:13px;line-height:1.5;font-weight:400}
.fcard .fc-brand b,.fcard .fc-still b,.fcard .fc-foot .fc-chain{font-weight:600;color:var(--ink)}
.fcard .fc-label{font-size:13px}

/* the slide reads itself first — each row of what the lecture taught arrives before anything is struck */
.showcase-anim .fcard .fc-rows>div{opacity:0;transform:translateY(7px);
  transition:opacity .3s var(--ease),transform .36s cubic-bezier(.23,1,.32,1)}
.showcase-anim .fcard .fc-rows>div.on{opacity:1;transform:none}
.showcase-anim .fcard .fc-col.taught{transition:border-color .4s var(--ease),background-color .4s var(--ease)}
.showcase-anim .fcard .fc-col.taught.read{border-color:var(--line-strong)}

/* -- the one moment: the strike is drawn, and the current figure lands. `.showcase-anim` is set by landing.js
      only when motion is welcome; without it the card is exactly what showcase.py rendered. -- */
.showcase-anim .fcard .fc-rows .struck dd,
.showcase-anim .fcard .fc-rows .struck dd s{text-decoration:none}
.showcase-anim .fcard .fc-rows .struck dd s{position:relative}
/* drawn on the compositor: a rule that grows by `width` relayouts the row it is drawn across on every frame,
   and this one is the page's one authored moment. scaleX from the left is the same picture, off the main thread. */
.showcase-anim .fcard .fc-rows .struck dd s::after{content:"";position:absolute;left:0;top:56%;height:2px;width:100%;
  background:var(--ink-muted);border-radius:1px;transform:scaleX(0);transform-origin:left center}
.showcase-anim .fcard .fc-rows .struck.cut dd s::after{transform:none;
  transition:transform .52s cubic-bezier(.23,1,.32,1)}
/* the guideline panel is unlit until the strike has landed — the answer arrives after the problem */
.showcase-anim .fcard .fc-col.current{background:var(--v-card);border-color:var(--v-border);border-left-color:var(--v-border);
  transition:background-color .5s var(--ease),border-color .5s var(--ease)}
.showcase-anim .fcard .fc-col.current.lit{background:var(--v-tint);border-color:var(--v-mist);border-left-color:var(--v-mist)}
/* Build 27 neutralised the old card animations with `.js .fcard.in .stamp.xl,.js .fcard.in .fc-big .val{
   opacity:1;transform:none}` — five classes. That rule outranks a four-class entrance, so the guidance figure and
   the stamp were visible from the first frame and two of the four beats never played. The class is repeated to
   match its weight rather than deleting a rule that still neutralises retired hooks. */
.showcase-anim.showcase-anim .fcard .fc-big .val{display:inline-block;transform:scale(.94);opacity:0;
  transition:transform .46s cubic-bezier(.34,1.28,.64,1),opacity .32s var(--ease)}
.showcase-anim.showcase-anim .fcard .fc-col.current.lit .fc-big .val{transform:none;opacity:1}
.showcase-anim .fcard .fc-gist li{opacity:0;transform:translateY(6px);
  transition:opacity .32s var(--ease),transform .32s var(--ease)}
.showcase-anim .fcard .fc-gist li.in{opacity:1;transform:none}
.showcase-anim.showcase-anim .fcard .stamp.xl{opacity:0;transform:scale(.9);
  transition:opacity .3s var(--ease),transform .38s cubic-bezier(.34,1.28,.64,1)}
.showcase-anim.showcase-anim .fcard .stamp.xl.in{opacity:1;transform:none}

/* -- the promises: the same six rows, but the name carries the display voice and the row has room to be read -- */
.pipe .station{grid-template-columns:9px 148px minmax(0,1fr);padding:16px 0;align-items:baseline}
.pipe .station .name{font:600 19px/1.4 var(--display);font-optical-sizing:auto;color:var(--v-heading);letter-spacing:-0.005em}
.pipe .station .sub{font:400 17px/1.6 var(--sans);color:var(--ink-muted)}
.pipe .station::before{width:9px;height:9px;margin-top:7px;background:var(--v-mist)}
.pipe .station::after{left:4px;top:26px;bottom:-26px}
@media (prefers-reduced-motion: no-preference){
  .js .pipe .station{opacity:0;transform:translateY(10px)}
  .js .pipe .station.in{opacity:1;transform:none;transition:opacity .42s var(--ease),transform .42s var(--ease)}
}
@media (max-width:760px){
  .pipe .station{grid-template-columns:9px minmax(0,1fr);gap:2px 16px;padding:14px 0}
  .pipe .station .name{font-size:18px}
  .pipe .station .sub{font-size:16px}
}

/* -- the close: it is the last thing on the page, so it is allowed to be the largest thing after the hero -- */
main:has(>.hero)>.cta{border-top:0;padding-top:0;margin-top:72px;justify-items:start}
main:has(>.hero)>.cta h2{font-size:clamp(27px,2.8vw,35px);line-height:1.15;letter-spacing:-0.015em}
main:has(>.hero)>.cta p{font-size:19px;line-height:1.55}
/* the terms line is not the pitch: it was inheriting the lead's 19px and reading at the same volume */
main:has(>.hero)>.cta p.signup-note{font-size:14px;line-height:1.5;text-wrap:pretty}

@media (forced-colors: active){
      .band-tint{background:Canvas;border-color:CanvasText}
}

/* -- Build 36, second pass: the findings of an independent critique, applied. -- */

/* the dark page IS navy-ink, so the band must lift rather than sink or it disappears into the ground (1.13:1) */
/* the three roots are ONE element repeated for weight — compounded, not descended. Written with spaces this
   asked for three nested roots, which no document has, so the whole override was dead and the band fell back to
   `--v-tint`: lighter than the cards standing on it, which inverted the figure and the ground. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):root:root .band-tint{background:color-mix(in srgb,var(--v-navy-ink) 78%,var(--v-royal));
    border-color:var(--v-royal)}
}
:root[data-theme="dark"]:root:root .band-tint{background:color-mix(in srgb,var(--v-navy-ink) 78%,var(--v-royal));
  border-color:var(--v-royal)}

/* the gist was three semi-bold 17px lines under a serif heading — a second heading block that out-shouted the
   numbers it introduces. One weight, and it reads as what it is: the summary. */
.fcard .fc-gist li{font-weight:400}
/* the two figures compose one frame: near parity, with the answer still winning */
.fcard .fc-rows dd,.fcard .fc-rows dd s{font:500 24px/1.35 var(--mono)}
.fcard .fc-big,.fcard .fc-big .val{font:500 32px/1.1 var(--mono)}
/* the 16ch cap broke "for every adult CAP severity" mid-phrase beside the most important number on the page */
.fcard .fc-big small{max-width:none}
/* the card prints its own URL: right on the shareable card page, noise on the site that serves it */
main:has(>.hero) .fcard .fc-foot .fc-url{display:none}

/* the founding run, in the band. Measured, not claimed: PRODUCT.md positioning, claim 2. */
.run-proof{margin:28px 0 0;padding:20px 24px;border:1px solid var(--v-mist);border-radius:var(--r-lg);
  background:var(--v-tint);font:400 19px/1.55 var(--sans);color:var(--ink);max-width:var(--measure)}
.run-proof b{font-weight:600;color:var(--v-heading)}
.run-proof small{display:block;margin:8px 0 0;font:400 13px/1.5 var(--sans);color:var(--ink-muted)}
@media (max-width:640px){.run-proof{padding:16px 18px;font-size:17px}}
@media (forced-colors: active){.run-proof{border:1px solid CanvasText;background:Canvas;color:CanvasText}}

/* the close finally uses the entrance hook it has carried since Build 27 */
@media (prefers-reduced-motion: no-preference){
  .js .cta.reveal{opacity:0;transform:translateY(12px)}
  .js .cta.reveal.shown{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
}


/* ===== 19 · Build 37 · the landing, for the close.
   Three things the owner named, in their words: the hero's left half did not read as a business worth paying;
   the finding section was being read as "the note" rather than as an example of a check, so it provoked a
   decision instead of settling one; and the flow was a list, not a flow.

   1 · The hero's left half is given scale. The headline runs to 54px, the field and its action become one
       control rather than two floating objects, and an authority line names the standard the product is held to.
   2 · The band opens on what a lecture COMES BACK AS — a Notion note that is theirs to restyle, a deck shown
       with two of its real cards, and the check — and the finding follows as the proof stamped inside it. The
       two Anki fronts are verbatim product output, cloze braces included: that syntax cannot be faked to an
       Anki user, which is exactly why it is the strongest thing on the page.
   3 · The six rows become the story, and the thread between them draws as you reach them.
   Appended only. Tokens throughout, no raw hex. ===== */

/* -- 1 · the hero's left half -- */
.hero h1{font-size:clamp(34px,3.9vw,54px);line-height:1.06;letter-spacing:-0.025em;max-width:none}
.hero .hero-sub{font:400 20px/1.5 var(--sans);color:var(--ink);max-width:44ch;margin-top:2px}
.hero .signup{margin-top:20px;gap:10px 0}
.hero .signup .su-label{font:500 13px/1.4 var(--sans);color:var(--ink-muted)}
/* the field and its action are one object: two floating controls read as a form, one reads as a product */
.hero .signup .su-field{height:52px;border-radius:var(--r) 0 0 var(--r);border-right:0;padding:0 14px}
.hero .signup .btn{height:52px;border-radius:0 var(--r) var(--r) 0;padding:0 20px;white-space:nowrap}
.hero .signup input{font-size:17px}
.hero-auth{margin:10px 0 0;max-width:52ch;font:400 13px/1.6 var(--sans);color:var(--ink-muted);
  padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:760px){
  .hero .signup{gap:10px}
  .hero .signup .su-field{border-radius:var(--r);border-right:1px solid var(--line-strong)}
  .hero .signup .btn{border-radius:var(--r)}
}

/* -- 2 · the finding sits on the page's own ground; Build 37's navy band and its three artefact panels were
      withdrawn at the owner's call. The founding-run block that lived on that band is relit for the light. -- */

/* -- 3 · the flow. The thread draws down as each row is reached, and the dot it arrives at fills. -- */
.pipe .station::before{background:var(--line-strong);transition:background-color .34s var(--ease),transform .34s var(--ease)}
.pipe .station.in::before{background:var(--primary)}
@media (prefers-reduced-motion: no-preference){
  .js .pipe .station::after{transform:scaleY(0);transform-origin:top}
  .js .pipe .station.in::after{transform:scaleY(1);transition:transform .55s cubic-bezier(.23,1,.32,1) .1s}
  .js .pipe .station.in::before{animation:dot-land .42s cubic-bezier(.34,1.28,.64,1) 1}
  @keyframes dot-land{0%{transform:scale(.4)}55%{transform:scale(1.5)}100%{transform:scale(1)}}
}

/* -- 4 · the offer arrives as a block rather than appearing whole -- */
@media (prefers-reduced-motion: no-preference){
  .offer-js .pays .pay{opacity:0;transform:translateY(10px)}
  .offer-js .pays .pay.up{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .5s cubic-bezier(.23,1,.32,1)}
  .offer-js .plan .plan-terms,.offer-js .plan .plan-go{opacity:0}
  .offer-js .plan.up .plan-terms,.offer-js .plan.up .plan-go{opacity:1;transition:opacity .45s var(--ease) .12s}
}

/* -- 5 · the two acts in one row: what happens to a lecture on the left, what it found on the right. The row
      leaves the reading column (1160px, the hero's own width) because the finding card is unreadable at half of
      760. In the narrow column the flow's rows stack their name over their detail rather than squeezing both. -- */
main:has(>.hero)>.section.band-wide{padding-top:0;padding-bottom:0}
.band-wide>.band-in{max-width:1160px}
.duo-in{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:56px;align-items:stretch}
/* the two columns are one height, and the last box in each is pushed to the floor, so they end flush whatever
   their content does. Any slack falls above the last box, where it reads as breathing room. */
.duo-col{min-width:0;display:flex;flex-direction:column}
.duo-col>:last-child{margin-top:auto}
/* both headings read as one size: the serif italic accent sits taller and lighter than the roman beside it, so
   in this row the emphasis is dropped and the two h2s match. The accent still belongs to the hero's h1. */
.duo-in .section-head h2 em{font-style:normal;font-size:1em;font-weight:inherit;color:inherit;letter-spacing:inherit}
.duo-flow .pipe .station{grid-template-columns:9px minmax(0,1fr);gap:2px 16px;padding:14px 0}
.duo-flow .pipe .station .name{grid-column:2;font-size:18px}
.duo-flow .pipe .station .sub{grid-column:2;font-size:16px;line-height:1.55}
.duo-flow .run-proof{margin:28px 0 0;font-size:17px;padding:18px 20px;max-width:none}
/* the key sits in the body now, directly over the card it decodes */
.duo-find .duo-body>.key{margin:0 0 16px}
@media (max-width:1023px){
  .duo-in{grid-template-columns:1fr;gap:56px}
  main:has(>.hero)>.section.band-wide{padding-left:24px;padding-right:24px}
}
@media (max-width:640px){
  main:has(>.hero)>.section.band-wide{padding-left:16px;padding-right:16px}
  .duo-in{gap:44px}
}

/* -- the sixth row is the boundary, not a step: it keeps its `.station` class for the DOM contract but loses the
      dot and the thread, and takes a rule above it so it reads as the caveat the owner wrote it as. -- */
.pipe .station[data-k="exams"]{margin-top:12px;padding-top:20px;border-top:1px solid var(--line)}
.pipe .station[data-k="exams"]::before,.pipe .station[data-k="exams"]::after{content:none}
.pipe .station[data-k="exams"] .name{color:var(--ink);font-family:var(--sans);font-weight:600;font-size:17px}
.pipe .station[data-k="exams"] .sub{color:var(--ink-muted)}
.duo-flow .pipe .station[data-k="exams"] .name,.duo-flow .pipe .station[data-k="exams"] .sub{grid-column:1 / -1}


/* ===== 20 · Build 38 · the journey.
   The left half of the duo stops being a list and becomes a path. Same six rows, same DOM contract, but the
   straight rail is replaced by one line that bends between five beats, and the colour of that line follows the
   reader down it. Each beat is now a sentence heading and one short line under it — a story read downward, not
   five paragraphs stacked.

   Only the y of each beat is content-dependent, so the path cannot be authored: `landing.js` measures the rows
   and writes the `<svg class="spine">`, then sets `.story` on the rail. Until that happens — no JavaScript, a
   failed measure — the rail keeps the straight pseudo-element thread it has always rendered, which is the same
   diagram at rest. Under reduced motion the path is built and drawn complete; the curve is comprehension, the
   drawing is decoration.

   The row is also squared up: each column now holds `.section-head` + `.duo-body`, the two heads share the
   grid's first row and the two bodies share its second, so the heads' rules land on one line and the bodies
   start and finish on one line. Appended only. Tokens throughout, no raw hex. ===== */

/* -- 1 · the two columns, squared. Subgrid puts both heads in row 1 and both bodies in row 2; the flow's rail
      takes whatever height the finding card asks for, so the two halves end flush without a spacer. -- */
@supports (grid-template-rows: subgrid){
  .duo-in{grid-template-rows:auto 1fr}
  .duo-col{display:grid;grid-template-rows:subgrid;grid-row:span 2;gap:0}
  .duo-in .duo-col>:last-child{margin-top:0}
}
.duo-body{min-width:0;display:flex;flex-direction:column}
.duo-in .section-head{align-items:flex-start;margin-bottom:0;padding-bottom:14px}
.duo-body>:first-child{margin-top:24px}
.duo-flow .duo-body>.pipe{flex:1 1 auto;align-content:stretch}
/* the beats take the slack between them rather than leaving it at the foot: the two columns end on one line and
   the journey is paced by the height it is given, which is the finding card's height. */
.duo-flow .pipe.story .pipe-track{position:relative;height:100%;align-content:space-between}
.duo-flow .duo-body>.run-proof{margin-top:20px;padding:16px 20px}
@media (max-width:1023px){
  .duo-in{grid-template-rows:auto}
  .duo-col{display:flex;flex-direction:column;grid-row:auto}
}

/* -- 2 · the rail becomes a lane. The line and its nodes live in the 46px column the rows already reserve for a
      dot, so the text keeps one flush edge however far the path bends inside it. -- */
.duo-flow .pipe.story .station{grid-template-columns:46px minmax(0,1fr);gap:3px 0}
.duo-flow .pipe.story .station::before,.duo-flow .pipe.story .station::after{content:none}
.duo-flow .pipe.story .station[data-k="exams"]{padding-left:46px}

.spine{position:absolute;left:0;top:0;width:46px;height:100%;overflow:visible;pointer-events:none}
/* the road ahead is visible before it is walked: a faint full-length thread, and a lit copy that draws over it */
.spine .thread{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-linecap:round;opacity:.5}
.spine .lit{fill:none;stroke:var(--primary);stroke-width:2;stroke-linecap:round}
.spine .node{fill:var(--v-page);stroke:var(--line-strong);stroke-width:2}
.spine .node.on{fill:var(--primary);stroke:var(--primary)}
.spine .gauge{fill:none;stroke:none}

/* -- 3 · the drawing. `--len` and `--at` are the measured path length and how far along it the reader has got;
      landing.js writes them, the transition does the rest, and because it is a transition and not a keyframe a
      fast scroll retargets it rather than restarting. Marketing motion, so it is allowed past 300ms. -- */
@media (prefers-reduced-motion: no-preference){
  .js .spine .lit{stroke-dasharray:var(--len);stroke-dashoffset:calc(var(--len) - var(--at,0px));
    transition:stroke-dashoffset .62s cubic-bezier(.23,1,.32,1)}
  .js .spine .node{opacity:.55;transform:scale(.55);transform-box:fill-box;transform-origin:center;
    transition:transform .38s cubic-bezier(.34,1.28,.64,1),opacity .3s var(--ease),
               fill .34s var(--ease),stroke .34s var(--ease)}
  .js .spine .node.on{opacity:1;transform:none}
  /* the beat arrives from the side the path bends towards, so the text leans out of the curve it hangs off */
  .js .duo-flow .pipe.story .station{opacity:0;transform:translate3d(var(--lean,10px),8px,0)}
  .js .duo-flow .pipe.story .station.in{opacity:1;transform:none;
    transition:opacity .44s var(--ease),transform .52s cubic-bezier(.23,1,.32,1)}
  .js .duo-flow .pipe.story .station .sub{opacity:0;transition:opacity .4s var(--ease) .1s}
  .js .duo-flow .pipe.story .station.in .sub{opacity:1}
}

/* -- 4 · the beats read as a story: a sentence for a heading, one line under it, and room to breathe between. -- */
.duo-flow .pipe.story .station{padding:0 0 8px}
.duo-flow .pipe.story .station .name{font:600 20px/1.35 var(--display);color:var(--v-heading);letter-spacing:-0.01em}
.duo-flow .pipe.story .station .sub{font:400 16px/1.55 var(--sans);color:var(--ink-muted);max-width:none}
.duo-flow .pipe.story .station[data-k="exams"]{margin-top:10px;padding:16px 0 0 46px}
/* the caveat keeps the voice Build 37 gave it — sans, smaller, ink — so it is not read as a sixth beat */
.duo-flow .pipe.story .station[data-k="exams"] .name{font:600 17px/1.45 var(--sans);color:var(--ink)}
@media (max-width:640px){
  .duo-flow .pipe.story .station{grid-template-columns:34px minmax(0,1fr);padding-bottom:22px}
  .duo-flow .pipe.story .station[data-k="exams"]{padding-left:34px}
  .duo-flow .pipe.story .station .name{font-size:18px}
  .spine{width:34px}
}

@media (forced-colors: active){
  .spine .thread,.spine .lit{stroke:CanvasText}
  .spine .node{fill:Canvas;stroke:CanvasText}
  .spine .node.on{fill:CanvasText;stroke:CanvasText}
}


/* ===== 21 · Build 39 · the hero's claim, drawn.
   The sentence under the headline now carries the thing a student actually buys — the write-up they will not be
   doing tonight — and the bar under it is that sentence as a picture. The whole bar is what one lecture used to
   cost; the lit head is what it costs now. No figure is asserted anywhere in it: PRODUCT.md positioning claim 3
   permits the saving qualitatively and forbids inventing a number, a range or a percentage until a measurement
   exists, so the ratio does the arguing and the caption says in words what the bar says in length.

   The bar is decoration — `aria-hidden`, with the caption carrying the meaning as text. It fills once, on load,
   in CSS: the hero is the busiest moment in the page's life and a keyframe runs off the main thread, where a
   script would be competing with everything else that is loading. `hero-js` is set before the first paint and
   never when reduced motion is asked for, so without it the bar simply renders full — the same picture at rest.
   Appended only. Tokens throughout, no raw hex. ===== */

.hero-time{margin:-4px 0 0;display:grid;gap:8px;max-width:46ch}
.ht-bar{position:relative;height:14px;border-radius:var(--r-pill);background:var(--surface);
  border:1px solid var(--line-blue);overflow:hidden}
/* `--line-blue` is the one token declared to clear 3:1 on card AND tint in both themes (§1), which is exactly
   what a shape that has to be seen on the hero's tinted band and on navy-ink needs. */
.ht-evening{position:absolute;inset:0;background:var(--line-blue);transform-origin:left center}
/* the head takes the theme's own maximum ink — navy on light, near-white on dark — so it separates from the
   evening in both. `--primary` does not: on dark it lifts to a link blue barely above the mid blue beside it.
   The head is a floor, not a fraction: at any column width it stays a shape rather than a hairline. */
.ht-us{position:absolute;inset:0 auto 0 0;width:7%;min-width:20px;border-radius:var(--r-pill);
  background:var(--v-heading);transform-origin:left center}
.ht-keys{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0;
  font:400 13px/1.4 var(--sans);color:var(--ink-muted)}
.ht-k-us{color:var(--v-heading);font-weight:600}
.ht-k-you{text-align:right}
@media (max-width:640px){
  .ht-keys{font-size:12px;gap:12px}
}

/* the evening fills, and only then does the head light: the problem is shown before the answer, which is the
   same order the finding card plays in. Transform and opacity only. */
@media (prefers-reduced-motion: no-preference){
  /* the block itself is still arriving on the hero's own `hero-rise` (210–760ms, front-loaded), so the fill waits
     until that has done its work — a bar filling inside something still fading in is two motions, read as mud */
  .hero-js .ht-evening{animation:ht-fill .7s cubic-bezier(.23,1,.32,1) .45s both}
  .hero-js .ht-us{animation:ht-land .4s cubic-bezier(.34,1.28,.64,1) 1.08s both}
  .hero-js .ht-k{opacity:0;animation:fadein .34s var(--ease) both}
  .hero-js .ht-k-us{animation-delay:1.16s}
  .hero-js .ht-k-you{animation-delay:1.26s}
  @keyframes ht-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes ht-land{from{opacity:0;transform:scaleX(.3)}to{opacity:1;transform:none}}
}

@media (forced-colors: active){
  .ht-bar{border:1px solid CanvasText;background:Canvas}
  .ht-evening{background:Canvas}
  .ht-us{background:CanvasText}
}


/* ===== 22 · Build 40 · the finish.
   No new ideas, no new sections: the landing as built, walked at three widths in both themes with the keyboard
   and with the script off, and every difference between what the page intends and what it renders closed at the
   narrowest level that owns it. The corrections that belong to an earlier section were made in that section
   (the dead `:root :root :root` band override in §18, the deck's royal in §17C, the terms' type in §16, the
   close's fine print in §18); what is left here is the one optical adjustment that is genuinely new.
   Appended only. Tokens throughout, no raw hex. ===== */

/* The roman full stop after the italic. The measured gap between them is 0 — the space is the italic's exit
   bearing plus the period's own, which at 54px reads as a word space and detaches the stop from the phrase.
   Optical, so it is set in em and applies at every clamp step. */
.hero h1 em{margin-right:-0.08em}

/* the lead's last line was one word on its own; the browser balances it away without touching the copy */
.hero .hero-sub{text-wrap:pretty}


/* ===== 23 · Build 41 · the upload page as an instrument.
   The screen a subscriber opens every evening, rebuilt as presentation only: the same DOM, the same ids, the same
   frozen script and steps.js, the §15I colour decisions and every pinned literal untouched. What changes is what
   is shown when, and where.

   1 · Two columns at desktop: the work on the left (system, then the lecture), what comes back on the right
       (checked against · what comes back) as a quiet tinted aside. The drop zone is the column's hero and sits
       in the first viewport instead of 900px down.
   2 · The drop leads and the pre-flight follows it (flex `order`, DOM unchanged): at rest the checklist is a
       caption under the zone, and its five rows exist only once there is a file to check — five idle circles
       read as unanswered radio buttons.
   3 · The run bar is in the viewport on desktop, so it is sticky on small screens only; one voice, the label is
       the state.
   4 · Motion is feedback: the rows materialise when a file lands, a glyph settles when a check resolves, the
       button gives under the pointer. Nothing performs on load. Transform and opacity, under no-preference.
   Appended only. Tokens throughout, no raw hex. ===== */

/* -- 1 · the head: title, one sentence, the allowance on a hairline -- */
#v-home .page-head.up-head{margin-bottom:16px;padding-bottom:0;border-bottom:0}
#v-home .up-head h1{margin:0}
#v-home .up-sub{margin-top:6px;font-size:17px}
#v-home #ent.section{margin:0 0 28px}
#v-home .strip{padding:12px 0 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink-muted)}

/* -- 2 · the grid. Row 1 is the system beside "checked against", row 2 the lecture beside "what comes back";
      the white boxes stretch to their row so the two columns keep one set of edges. -- */
@media (min-width:1024px){
  #v-home .steps{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;gap:20px 24px;align-items:stretch}
  #v-home .step:nth-child(1){grid-column:1;grid-row:1}
  #v-home .step:nth-child(2){grid-column:1;grid-row:2}
  #v-home .step:nth-child(3){grid-column:2;grid-row:1}
  #v-home .step:nth-child(4){grid-column:2;grid-row:2;align-self:start}
}
#v-home .step{padding:22px 24px 24px;gap:16px}
#v-home .step-t{font-size:20px}
#v-home .step-hint{font-size:14px;color:var(--ink-muted)}
/* nothing performs on a working screen that is opened daily: the boxes are simply there */
.upload-js #v-home #steps>.step{opacity:1;transform:none;transition:none}

/* -- 3 · step 1 · the systems wrap at their own width, so eleven names read as a row of choices, not a form grid -- */
#v-home #intent{display:flex;flex-direction:column;gap:18px;flex:1 1 auto}
#v-home .step:nth-child(1) .step-body{flex:1 1 auto;display:flex;flex-direction:column}
/* row 1 is as tall as the aside beside it; the select takes the box's floor so the stretch reads as a footer, not a void */
@media (min-width:1024px){#v-home #tplwrap{margin-top:auto}}
#v-home .seg{display:flex;flex-wrap:wrap;gap:8px}
#v-home .seg button[data-s]{flex:none;height:40px;padding:0 14px;font-size:14px;color:var(--ink)}
#v-home .seg button[data-s][aria-checked="true"],#v-home .seg button[data-s][aria-pressed="true"]{padding:0 13px}
#v-home #tplwrap{max-width:none}
#v-home .step:nth-child(1) select{width:auto;min-width:min(100%,30ch);max-width:100%}
@media (hover:hover) and (pointer:fine){
  #v-home .seg button[data-s]:hover{border-color:var(--v-link);color:var(--v-heading)}
}

/* -- 4 · step 2 · the drop leads; the checklist follows it and fills when there is a file -- */
#step-file .step-body{display:flex;flex-direction:column}
#step-file .preflight+.drop{order:1;margin-top:0}
#step-file .preflight{order:2;margin-top:14px}
#step-file .drop-note{order:3}
/* at rest the panel is a caption: the heading line and the idle sentence, no rows, no note */
#step-file .preflight[data-stage="rest"]{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;background:transparent;border:0;border-radius:0;padding:0 2px}
#step-file .preflight[data-stage="rest"] .pf-seq,#step-file .preflight[data-stage="rest"] .pf-note{display:none}
#step-file .preflight[data-stage="rest"] .pf-head{margin:0;font:500 13px/1.5 var(--sans);color:var(--ink-muted)}
#step-file .preflight[data-stage="rest"] .pf-cost.idle{padding:0;margin:0;font-size:13px}
/* with a file the panel is the tint, the rows are hairline rows, and the head names the file on the right */
#step-file .preflight:not([data-stage="rest"]){padding:12px 14px 12px}
#step-file .preflight:not([data-stage="rest"]) .pf-head{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:500 13px/1.5 var(--sans)}
#step-file .pf-file{font:400 13px/1.5 var(--mono);color:var(--ink-muted);overflow-wrap:anywhere;text-align:right}
#step-file .pf-note{margin:6px 0 0;padding-left:12px;font-size:13px}
#step-file .pf-cost:not(.idle){margin-top:10px;padding:10px 14px;font-size:15px}

/* the zone itself: tall, the title in the product's display voice, the way out named in ink while it is locked */
#step-file .preflight+.drop{min-height:232px;padding:36px 28px;gap:18px;
  transition:border-color .18s cubic-bezier(.23,1,.32,1),background-color .18s cubic-bezier(.23,1,.32,1),outline-color .14s var(--ease);
  outline:2px solid transparent;outline-offset:-2px}
#step-file .preflight+.drop:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#step-file .drop>div{gap:10px}
#step-file .drop .formats{font:500 13px/1.4 var(--mono);color:var(--ink-muted)}
#step-file .drop .drop-title{font:600 26px/1.2 var(--display);color:var(--v-heading);letter-spacing:-0.01em}
#step-file .drop.locked .drop-reason{font:500 17px/1.5 var(--sans);color:var(--ink);max-width:36ch}
#step-file .drop .drop-affirm{font-size:13px;line-height:1.5;color:var(--ink-muted);max-width:52ch}
/* drag-over is an outline, not a border: weight without a relayout, and it fades in and out */
#step-file .preflight+.drop:not(.locked).over{outline-color:var(--v-link);border-style:solid}
/* the button is a button again (§15G had made it an underline) */
#v-home .drop .btn.secondary{height:40px;padding:0 16px;border:1px solid var(--line-strong);background:var(--surface);color:var(--v-heading);text-decoration:none}

/* the file is in: the zone becomes one receipt row with the deck mark, the name, the size and the slide count, and
   the same button beside it for a swap. The mark is the house deck glyph as a mask in the sequence colour. */
#step-file .preflight+.drop.has-file{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;
  min-height:0;padding:16px 18px 16px 20px;border:1px solid var(--v-mist);background:var(--surface)}
#step-file .drop.has-file>div{display:grid;gap:8px;justify-items:start;min-width:0;flex:1 1 auto}
#step-file .drop.has-file .receipt{display:grid;grid-template-columns:30px auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:0;align-items:center}
#step-file .drop.has-file .receipt::before{content:"";grid-row:1 / span 2;grid-column:1;width:30px;height:24px;background:var(--primary);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32' fill='none' stroke='black' stroke-width='1.8'><rect x='7' y='2.6' width='30' height='22.8' rx='2.6' opacity='.45'/><rect x='3' y='6.6' width='30' height='22.8' rx='2.6'/><path d='M8 13h13M8 18.4h20M8 23h15' stroke-linecap='round'/></svg>") center / contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32' fill='none' stroke='black' stroke-width='1.8'><rect x='7' y='2.6' width='30' height='22.8' rx='2.6' opacity='.45'/><rect x='3' y='6.6' width='30' height='22.8' rx='2.6'/><path d='M8 13h13M8 18.4h20M8 23h15' stroke-linecap='round'/></svg>") center / contain no-repeat}
#step-file .drop.has-file .receipt b{grid-row:1;grid-column:2 / -1;font:600 16px/1.35 var(--sans);color:var(--ink);overflow-wrap:anywhere}
#step-file .drop.has-file .receipt i{display:none}
#step-file .drop.has-file .receipt>span{grid-row:2;font:400 13px/1.5 var(--mono);color:var(--ink-muted)}
#step-file .drop.has-file .receipt>span:not(.rc-slides){grid-column:2}
#step-file .drop.has-file .receipt .rc-slides{grid-column:3}
#step-file .drop.has-file .chips li{font-size:14px}
#step-file .drop-note{margin:10px 0 0;font-size:13px}

/* -- 5 · the aside · one quiet tint, headings instead of eyebrows, no panel inside a panel -- */
#v-home .step:nth-child(3),#v-home .step:nth-child(4){background:var(--v-tint);border-color:var(--v-mist);padding:20px 22px 22px;gap:12px}
#step-guidance .step-body{flex:none}
#step-guidance .guards{flex:none;background:transparent;border:0;border-radius:0;padding:0;gap:0}
#step-guidance .guard{gap:6px;padding:0}
#step-guidance .guard+.guard{margin-top:16px;padding-top:16px;border-top:1px solid var(--v-mist)}
#step-guidance .guard-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#step-guidance .guard-k{margin:0;font:600 15px/1.4 var(--sans);color:var(--v-heading);letter-spacing:0}
#step-guidance .guard .srcs{gap:4px 14px}
#step-guidance .guard .srcs li{font:500 15px/1.5 var(--sans);color:var(--ink)}
#step-guidance .guard>p{font:400 14px/1.5 var(--sans);color:var(--ink-muted);margin:0}
#step-guidance .board{border-top:0;padding:4px 0 0;gap:10px}
#step-guidance .board b{font-size:16px}
#step-guidance .board small{font-size:13px}
#step-guidance .board-alt{font-size:13px}
#step-outputs .out{padding:14px 0}
#step-outputs .out b{font-size:16px;margin-bottom:2px}
#step-outputs .out p,#step-outputs .out .meta{font-size:13px}

/* -- 6 · the run bar · in the viewport at desktop, so it is a bar, not a pinned banner -- */
#v-home .runbar{margin-top:20px;padding:14px 18px;gap:16px}
#v-home .runbar .lbl{font-size:15px}
#v-home .btn.go{min-width:220px;transition:background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease)}
@media (min-width:1024px){#v-home .runbar{position:static}}
.run-note{margin-top:10px;font-size:13px}
#v-home #upmsg{margin-top:8px}
@media (prefers-reduced-motion: no-preference){
  #v-home .btn.go:not(:disabled){transition:background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),transform .12s var(--ease)}
  #v-home .btn.go:not(:disabled):active{transform:scale(.98)}
}

/* -- 7 · the list below · a heading, then rows; the empty state is one sentence -- */
#v-home .eyebrow-row{margin:40px 0 8px;padding-top:24px;border-top:1px solid var(--line)}
#v-home .list-h{margin:0;font:600 17px/1.4 var(--sans);color:var(--v-heading);letter-spacing:0}
#v-home .card.empty p{margin:0;font:400 15px/1.5 var(--sans);color:var(--ink-muted);max-width:var(--measure-s)}

/* -- 8 · the briefing · no gradient, no eyebrow, the title in the display voice -- */
.guide-head{background-image:none}
.guide h2{font:600 24px/1.2 var(--display);color:var(--v-heading);letter-spacing:-0.01em;margin:0}

/* -- 9 · motion · feedback only. The rows exist from the moment there is a file, so their arrival is the state
      change; a glyph settles when its check resolves; the receipt rises in as the zone collapses to it. -- */
@media (prefers-reduced-motion: no-preference){
  @keyframes up-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  @keyframes up-settle{from{opacity:.4;transform:scale(.8)}to{opacity:1;transform:none}}
  #step-file .preflight:not([data-stage="rest"]) .pf-seg{animation:up-in .18s cubic-bezier(.23,1,.32,1) both}
  #step-file .preflight:not([data-stage="rest"]) .pf-seg:nth-child(2){animation-delay:40ms}
  #step-file .preflight:not([data-stage="rest"]) .pf-seg:nth-child(3){animation-delay:80ms}
  #step-file .preflight:not([data-stage="rest"]) .pf-seg:nth-child(4){animation-delay:120ms}
  #step-file .preflight:not([data-stage="rest"]) .pf-seg:nth-child(5){animation-delay:160ms}
  #step-file .pf-seg[data-state="pass"] .pf-glyph,#step-file .pf-seg[data-state="warn"] .pf-glyph,#step-file .pf-seg[data-state="stop"] .pf-glyph,
  #step-file .pf-seg[data-state="dash"] .pf-glyph,#step-file .pf-seg.lit .pf-glyph{animation:up-settle .2s cubic-bezier(.23,1,.32,1) 1}
  #step-file .pf-cost:not(.idle){animation:up-in .2s cubic-bezier(.23,1,.32,1) both}
  #step-file .drop.has-file .receipt{transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1);transition-behavior:allow-discrete}
  @starting-style{#step-file .drop.has-file .receipt{opacity:0;transform:translateY(4px)}}
}

/* -- 10 · dark · the boxes lift toward mist (navy mixed with royal barely moves, §19); the aside a hair darker
      than the work so the two columns keep their roles -- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #v-home .step:nth-child(1),:root:not([data-theme="light"]) #v-home .step:nth-child(2){background:color-mix(in srgb,var(--v-card) 84%,var(--v-link));border-color:var(--line-strong)}
  :root:not([data-theme="light"]) #v-home .step:nth-child(3),:root:not([data-theme="light"]) #v-home .step:nth-child(4){background:color-mix(in srgb,var(--v-card) 88%,var(--v-royal));border-color:var(--v-royal)}
  :root:not([data-theme="light"]) #step-file .preflight+.drop,:root:not([data-theme="light"]) #step-file .preflight+.drop.locked{background:var(--v-card)}
  :root:not([data-theme="light"]) #step-file .preflight:not([data-stage="rest"]){background:var(--v-card);border-color:var(--v-royal)}
}
:root[data-theme="dark"] #v-home .step:nth-child(1),:root[data-theme="dark"] #v-home .step:nth-child(2){background:color-mix(in srgb,var(--v-card) 84%,var(--v-link));border-color:var(--line-strong)}
:root[data-theme="dark"] #v-home .step:nth-child(3),:root[data-theme="dark"] #v-home .step:nth-child(4){background:color-mix(in srgb,var(--v-card) 88%,var(--v-royal));border-color:var(--v-royal)}
:root[data-theme="dark"] #step-file .preflight+.drop,:root[data-theme="dark"] #step-file .preflight+.drop.locked{background:var(--v-card)}
:root[data-theme="dark"] #step-file .preflight:not([data-stage="rest"]){background:var(--v-card);border-color:var(--v-royal)}

/* -- 11 · small screens -- */
@media (max-width:1023px){
  #v-home .steps{grid-template-columns:1fr;gap:16px}
}
@media (max-width:640px){
  #v-home .step{padding:18px 16px 20px}
  #step-file .preflight+.drop{min-height:180px;padding:26px 16px}
  #step-file .drop .drop-title{font-size:22px}
  #step-file .preflight+.drop.has-file{flex-direction:column;align-items:stretch;padding:14px 16px}
  #step-file .drop.has-file .receipt{grid-template-columns:30px minmax(0,1fr)}
  #step-file .drop.has-file .receipt>span:not(.rc-slides),#step-file .drop.has-file .receipt .rc-slides{grid-column:2}
  #step-file .drop.has-file .receipt .rc-slides{grid-row:3}
  #v-home .btn.go{min-width:0;width:100%}
  #v-home .step:nth-child(1) select{width:100%;min-width:0}
}
@media (forced-colors: active){
  #step-file .drop.has-file .receipt::before{background:CanvasText}
  #step-file .preflight+.drop:not(.locked).over{outline-color:Highlight}
}

/* ===== 24 · Build 43 · the question bank.
   The dashboard is information-dense (Passmed's ugly-but-informative density, rich first, pretty later);
   the QUESTION screen is deliberately sterile (exam-condition realism: clean type, generous spacing,
   nothing but vignette · lead-in · options · submit); the ANSWER screen is where the design effort
   goes — the loop back into the student's own note. Append-only section. */
.qcov-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.qcov{display:grid;grid-template-columns:14px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:2px 8px;
  padding:8px 12px;background:var(--card);border:1px solid var(--line);border-radius:8px}
.qcov .dot{grid-row:1/3}
.qcov .qa{font-weight:600;font-size:14px;line-height:1.25}
.qcov .qn{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:var(--ink-muted)}
.qcov small{grid-column:2/4;color:var(--ink-muted);font-size:12px}
.qcov[data-s="untaught"]{background:transparent;border-style:dashed}
.qcov[data-s="weak"]{border-color:var(--stop-500)}
.qb-filters{display:flex;gap:8px;flex-wrap:wrap}
.qb-filters select,.qb-filters input{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}
.qtabs{display:flex;gap:0;margin:10px 0 0;border-bottom:1px solid var(--line)}
.qtabs button{font:inherit;font-size:13px;padding:8px 14px;border:0;background:none;color:var(--ink-muted);cursor:pointer;border-bottom:2px solid transparent}
.qtabs button.on{color:var(--ink);border-bottom-color:var(--primary);font-weight:600}
.qb-tbl{margin-top:10px}
.qb-tbl table{width:100%}
.qb-tbl td.num,.qb-tbl th.num{text-align:right}
.qb-tbl td,.qb-tbl th{padding:6px 10px;white-space:nowrap}
.qb-tbl td:first-child{white-space:normal}
/* -- the question screen: sterile -- */
.qscreen{max-width:720px;margin:0 auto;display:grid;gap:16px}
.qcard{padding:28px 28px 24px}
.qvin{font-size:16.5px;line-height:1.65;margin:0 0 14px}
.qlead{font-size:17px;font-weight:700;margin:0 0 18px;color:var(--v-heading,var(--ink))}
.qopts{display:grid;gap:8px;margin:0 0 18px}
.qopt{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:12px;text-align:left;
  font:inherit;font-size:15px;line-height:1.45;padding:12px 14px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--ink);cursor:pointer}
.qopt i{font-style:normal;font-weight:700;font-family:var(--mono,ui-monospace,monospace);color:var(--ink-muted)}
.qopt:hover:not(.done){border-color:var(--primary)}
.qopt.sel{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.qopt.sel i{color:var(--primary)}
.qopt.done{cursor:default}
.qopt.done.right{border-color:var(--ok-500);box-shadow:inset 0 0 0 1px var(--ok-500)}
.qopt.done.wrong{border-color:var(--stop-500);box-shadow:inset 0 0 0 1px var(--stop-500)}
.qmark{font-weight:700}
.qopt.done.right .qmark{color:var(--ok-500)}
.qopt.done.wrong .qmark{color:var(--stop-500)}
/* -- the answer screen -- */
.qresult{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.qexp{margin:6px 0 0;line-height:1.6}
.qbanner{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--warn-500);
  border-radius:8px;background:var(--warn-dim,var(--card))}
.qbanner .dot{margin-top:5px}
.qbanner p{margin:0}
.qbanner .qb-gline{margin-top:6px;color:var(--ink-muted);font-size:13.5px}
.qsrc{margin:0}
.qsrc blockquote{margin:10px 0 12px;padding:10px 14px;border-left:3px solid var(--primary);
  background:var(--primary-tint,transparent);border-radius:0 8px 8px 0;line-height:1.6;font-size:15px}
.qmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
@media (max-width:640px){
  .qcard{padding:18px 16px}
  .qcov-grid{grid-template-columns:1fr 1fr}
  .qb-tbl{overflow-x:auto}
}

/* ===== 25 · Build 44 · the bank as a product surface.
   The structure every question bank a student already knows has: the headline stat strip, the session
   builder, the runner's progress header with one square per question, the end-of-session summary, the
   per-lecture listing, the review screen. Append-only section — §24 rules untouched. */
/* -- the headline strip -- */
.qstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 8px}
.qstat{display:grid;gap:2px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:8px}
.qstat b{font-family:var(--mono,ui-monospace,monospace);font-size:26px;line-height:1.1;font-weight:700;color:var(--v-heading,var(--ink))}
.qstat b small{font-size:15px;font-weight:600;color:var(--ink-muted)}
.qstat span{font-size:12.5px;color:var(--ink-muted)}
/* -- the session builder -- */
.qb-builder{padding:16px 18px 12px}
.qbb-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.qbb-row select,.qbb-row input{font:inherit;font-size:13px;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}
.qbb-row input{min-width:150px}
.qbb-len{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.qbb-len button{font:inherit;font-size:13px;font-weight:600;font-family:var(--mono,ui-monospace,monospace);
  padding:8px 12px;border:0;background:none;color:var(--ink-muted);cursor:pointer}
.qbb-len button+button{border-left:1px solid var(--line)}
.qbb-len button.on{background:var(--primary);color:var(--on-primary)}
.qb-builder .small{margin:10px 0 0}
/* -- the runner's progress header -- */
.qsess-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:720px;margin:0 auto 16px}
.qsh-n{font-size:14px;color:var(--ink-muted)}
.qsh-n b{color:var(--v-heading,var(--ink))}
.qsh-sq{display:inline-flex;gap:3px;flex-wrap:wrap}
.qsh-sq i{width:10px;height:10px;border-radius:2px;background:var(--line)}
.qsh-sq i.y{background:var(--ok-500)}
.qsh-sq i.n{background:var(--stop-500)}
.qsh-sq i.cur{background:transparent;box-shadow:inset 0 0 0 2px var(--primary)}
.qsh-score{font-family:var(--mono,ui-monospace,monospace);font-size:13px;color:var(--ink-muted)}
.qsess-head #qb-end{margin-left:auto;font-size:13px;color:var(--ink-muted)}
/* -- the summary -- */
.qsumm{padding:24px 28px;display:grid;gap:10px;justify-items:start}
.qsumm-score{display:flex;align-items:baseline;gap:12px}
.qsumm-score b{font-family:var(--mono,ui-monospace,monospace);font-size:44px;line-height:1;font-weight:700;color:var(--v-heading,var(--ink))}
.qsumm-score span{color:var(--ink-muted)}
/* -- summary rows and the per-lecture listing (one grammar for both) -- */
.qsum-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.qsum-row,.qlist-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;
  padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:8px}
.qsum-row .qmark.y{color:var(--ok-500)}
.qsum-row .qmark.n{color:var(--stop-500)}
.qsum-row .ql,.qlist-row .ql{font-size:14px;line-height:1.45}
.qsum-row .qyours{font-family:var(--mono,ui-monospace,monospace);font-size:13px;color:var(--ink-muted);white-space:nowrap}
.qlist-row .qno{font-family:var(--mono,ui-monospace,monospace);color:var(--ink-muted)}
.qlist-row .qst{font-size:13px;white-space:nowrap}
.qskip{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:13.5px;color:var(--ink-muted)}
/* -- Build 44.1 · the UKMLA skeleton: all 24 areas alphabetical, one bar each. The bar is the
   area's whole bank; the filled part is completed, split green (right) / red (wrong) by the
   latest attempt. An area with no questions yet is a dashed placeholder — the skeleton shows
   the whole exam, not just what's been uploaded. -- */
.qarea-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.qarea{display:grid;grid-template-columns:230px minmax(0,1fr) auto;grid-template-rows:auto auto;
  align-items:center;gap:3px 16px;padding:9px 14px;background:var(--card);border:1px solid var(--line);border-radius:8px}
.qarea .qa-name{grid-row:1/3;font-weight:600;font-size:14px;line-height:1.3}
.qarea .qa-counts{grid-column:2;font-size:12px;color:var(--ink-muted)}
.qarea .qa-counts .qa-w{color:var(--stop-500);font-weight:600}
.qarea .qa-bar{grid-column:2;display:flex;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.qa-bar .g{background:var(--ok-500)}
.qa-bar .r{background:var(--stop-500)}
.qarea .qa-act{grid-row:1/3;grid-column:3;display:grid;gap:4px;justify-items:end;font-size:13px;white-space:nowrap}
.qarea.none{background:transparent;border-style:dashed}
.qarea.none .qa-name{color:var(--ink-muted);font-weight:500}
.qarea.none .qa-bar{opacity:.5}
@media (max-width:640px){
  .qstats{grid-template-columns:1fr 1fr}
  .qsum-row,.qlist-row{grid-template-columns:auto minmax(0,1fr);grid-auto-flow:row}
  .qsum-row .qyours,.qsum-row a,.qlist-row .qst,.qlist-row .links{grid-column:2}
  .qarea{grid-template-columns:minmax(0,1fr) auto}
  .qarea .qa-name{grid-row:auto;grid-column:1}
  .qarea .qa-counts,.qarea .qa-bar{grid-column:1/3}
  .qarea .qa-act{grid-row:1;grid-column:2;display:flex;gap:10px}
}

/* ===== 26 · Build 45 · the systems map — the bank on the student's own course.
   The 24-area UKMLA skeleton becomes the 10 body systems every lecture is filed under (+ Unsorted, only
   when non-empty); the map and the session builder fuse into one instrument — a toolbar on a ledger, the
   grammar of every bank a student already knows. Gold is spent once: Start session. Append-only; §24/§25
   stand, and the rules below override only where markup survives (.qstats, .qbb-len, #qb-start). */

/* -- the stat strip: four numbers, one bordered instrument, hairlines inside -- */
.qstats{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;background:var(--card);
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.qstat{border:0;border-radius:0;background:none;padding:14px 16px;gap:2px}
.qstat+.qstat{border-left:1px solid var(--line)}
.qstat b{font:600 26px/1.1 var(--mono);letter-spacing:0;color:var(--v-heading);font-variant-numeric:tabular-nums}
.qstat b small{font:500 15px/1 var(--mono);color:var(--ink-muted)}
.qstat span{font-size:13px;color:var(--ink-muted)}

/* -- the instrument: the session toolbar on top of the course ledger -- */
.qmap{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.qmap-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.qmap-bar select,.qmap-bar input{height:34px;font:400 14px/1.4 var(--sans);padding:0 10px;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--ink);
  min-width:0;transition:border-color .12s var(--ease)}
.qmap-bar select{flex:0 1 auto;max-width:220px}
.qmap-bar input{flex:1 1 150px;max-width:220px}
.qmap-bar select:hover,.qmap-bar input:hover{border-color:var(--ink-muted)}
.qmap-bar select:focus-visible,.qmap-bar input:focus-visible{border-color:var(--v-link)}
#qb-start{margin-left:auto}
/* §15I precedent: the page's one gold is present before it is armed — edge, no fill (1.4.11 exempts disabled) */
#qb-start[disabled]{background:none;border-color:var(--v-accent);color:var(--ink-muted)}

/* the length segment — selection on a tinted ground follows §15I: mist fill, navy-ink label
   (tint-on-surface-2 is invisible in light and near-invisible in dark; mist reads in both) */
.qbb-len{border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.qbb-len button{height:32px;padding:0 12px;font:500 14px/1 var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:0;color:var(--ink-muted);background:none;border:0;cursor:pointer;
  transition:background-color .12s var(--ease),color .12s var(--ease)}
.qbb-len button+button{border-left:1px solid var(--line-strong)}
.qbb-len button:hover{color:var(--ink)}
.qbb-len button.on{background:var(--v-mist);color:var(--v-navy-ink);font-weight:600}
.qbb-len button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* -- the ledger rows: one grammar, ten systems + Unsorted -- */
.qmap-list{list-style:none;margin:0;padding:0}
.qsys{display:grid;grid-template-columns:26px 205px minmax(0,1fr) auto;grid-template-rows:auto auto;
  align-items:center;gap:3px 16px;padding:12px 16px;transition:background-color .12s var(--ease)}
.qsys+.qsys{border-top:1px solid var(--line)}
.qsys:not(.none):hover{background:var(--surface-2)}
.qs-ic{grid-row:1/3;font-size:16px;line-height:1;text-align:center}
.qs-name{grid-row:1/3;font:600 14px/1.3 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.qs-counts{grid-row:1;grid-column:3;font:400 13px/1.4 var(--sans);color:var(--ink-muted)}
.qs-counts b{font:600 13px/1.4 var(--mono);color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums}
/* the bar: track width is set inline by the script as a % of the largest system's bank; the floor keeps a
   two-question system a shape rather than a sliver. Green = right on latest attempt, red = wrong. */
.qs-bar{grid-row:2;grid-column:3;display:flex;height:10px;border-radius:5px;background:var(--line);
  overflow:hidden;min-width:44px}
.qs-bar .g{background:var(--ok-500)}
.qs-bar .r{background:var(--stop-500)}
.qs-act{grid-row:1/3;grid-column:4;display:flex;gap:16px;align-items:center;justify-content:flex-end;
  font-size:14px;white-space:nowrap}
.qs-act a{display:inline-flex;align-items:center;min-height:24px}
/* skeleton: a system with no lectures holds its place quietly — the whole course is always visible */
.qsys.none .qs-name{color:var(--ink-muted);font-weight:500}
.qsys.none .qs-bar{background:none;border:1px dashed var(--line-strong);width:44px;min-width:0}
/* the ordering promise, as the ledger's footnote */
.qmap-foot{padding:8px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-muted);margin:0}

/* -- responsive -- */
@media (max-width:760px){
  .qsys{grid-template-columns:26px minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:6px 10px}
  .qs-ic{grid-row:1}
  .qs-name{grid-row:1;grid-column:2}
  .qs-act{grid-row:1;grid-column:3;gap:12px}
  .qs-bar{grid-row:2;grid-column:1/-1}
  .qs-counts{grid-row:3;grid-column:1/-1}
}
@media (max-width:640px){
  .qstats{grid-template-columns:1fr 1fr}
  .qstat+.qstat{border-left:0}
  .qstat:nth-child(even){border-left:1px solid var(--line)}
  .qstat:nth-child(n+3){border-top:1px solid var(--line)}
  .qmap-bar{padding:12px}
  .qmap-bar select,.qmap-bar input{flex:1 1 45%;max-width:none}
  #qb-start{margin-left:0;flex:1 1 100%}
  .qsys{padding:10px 12px}
  .qmap-foot{padding:8px 12px}
}

/* ===== 27 · Build 46 · the whole offer, sold — the landing restructured around the question bank.
   The hero's flow gains its fourth deliverable; the duo row's right half stops showing one finding and starts
   selling the bank (an ABSTRACT demo — skeleton bars, no invented medicine — with one real anchor, the pinned
   showcase section name); the guideline check moves to its own act above the close, evidence intact; the offer
   gains the full-width fourth deliverable. Append-only; overrides of §16/§17C rules are deliberate and later
   in the cascade. */

/* -- the hero's outputs row holds four marks now -- */
.flow-outs{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:480px){
  .flow-outs{gap:4px}
  .flow-outs small{font-size:12px}
}

/* -- the offer's fourth deliverable: the full row is the emphasis -- */
.get.get-wide{grid-column:1 / -1;grid-template-rows:auto;grid-template-columns:34px minmax(0,1fr);
  grid-template-areas:"mark title" "mark body";column-gap:14px;row-gap:4px;align-items:start;padding:18px 20px 16px}
.get.get-wide .get-mark{grid-area:mark;margin-top:2px}
.get.get-wide b{grid-area:title;font-size:20px;line-height:1.3}
.get.get-wide small{grid-area:body;max-width:70ch}
@media (max-width:640px){.get.get-wide b{font-size:17px}}

/* -- the question-bank advert (the duo row's right half) -- */
.duo-qb{min-width:0}
.qb-ad{margin:0;display:grid;gap:14px}
.qba-card{background:var(--v-card);border:1px solid var(--v-border);border-radius:var(--r-lg);padding:20px 22px;display:grid;gap:14px}
.qba-from{margin:0}
.qba-chip{display:inline-block;font:500 13px/1.4 var(--sans);color:var(--ink-muted);background:var(--surface-2);
  border-radius:var(--r-pill);padding:3px 12px}
.qba-stem{display:grid;gap:8px}
.qba-stem i{display:block;height:10px;border-radius:5px;background:var(--surface-2)}
.qba-stem i:nth-of-type(1){width:96%}
.qba-stem i:nth-of-type(2){width:88%}
.qba-stem i:nth-of-type(3){width:58%}
.qba-opts{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.qba-opts li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--v-card)}
.qba-opts li::before{content:attr(data-l);font:600 13px/1 var(--mono);color:var(--ink-muted)}
.qba-opts li i{display:block;height:9px;border-radius:4px;background:var(--surface-2)}
.qba-opts li:nth-child(1) i{width:52%}
.qba-opts li:nth-child(2) i{width:70%}
.qba-opts li:nth-child(3) i{width:44%}
.qba-opts li:nth-child(4) i{width:61%}
.qba-opts li:nth-child(5) i{width:48%}
.qba-opts li.qba-right{border-color:var(--ok-500);box-shadow:inset 0 0 0 1px var(--ok-500)}
.qba-opts li.qba-pick{border-color:var(--stop-500);box-shadow:inset 0 0 0 1px var(--stop-500)}
.qba-mark{font-weight:700;line-height:1}
.qba-right .qba-mark{color:var(--ok-500)}
.qba-pick .qba-mark{color:var(--stop-500)}
.qba-why{margin:0;padding-left:14px;border-left:2px solid var(--primary);font:400 14px/1.55 var(--sans);color:var(--ink-muted)}
.qba-track{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 4px}
.qba-sys{font:600 14px/1.3 var(--sans);color:var(--ink)}
.qba-bar{display:flex;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.qba-bar .g{background:var(--ok-500);width:50%}
.qba-bar .r{background:var(--stop-500);width:25%}
.qba-count{font:500 13px/1.4 var(--mono);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.qba-count b{font-weight:600;color:var(--ink)}
.qb-facts{list-style:none;margin:18px 0 0;padding:0;display:grid}
.qb-facts li{position:relative;padding:12px 0 12px 26px;font:400 16px/1.55 var(--sans);color:var(--ink)}
.qb-facts li+li{border-top:1px solid var(--line)}
.qb-facts li::before{content:"";position:absolute;left:4px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--primary)}
/* the demo performs once, on arrival — finished is the default (no JS, reduced motion, script failure all render
   the answered state); .qb-anim is set only when the choreography will actually run, and each phase releases it */
.qb-anim .qba-card{opacity:0;transform:translateY(12px)}
.qb-anim.p1 .qba-card{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.qb-anim .qba-opts li{opacity:0;transform:translateX(8px)}
.qb-anim.p2 .qba-opts li{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.qb-anim.p2 .qba-opts li:nth-child(2){transition-delay:.06s}
.qb-anim.p2 .qba-opts li:nth-child(3){transition-delay:.12s}
.qb-anim.p2 .qba-opts li:nth-child(4){transition-delay:.18s}
.qb-anim.p2 .qba-opts li:nth-child(5){transition-delay:.24s}
.qb-anim:not(.p3) .qba-opts li.qba-right,.qb-anim:not(.p3) .qba-opts li.qba-pick{border-color:var(--line);box-shadow:none}
.qb-anim .qba-mark{opacity:0;transform:scale(.8)}
.qb-anim.p3 .qba-opts li{transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.qb-anim.p3 .qba-mark{opacity:1;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.qb-anim .qba-why{opacity:0}
.qb-anim.p4 .qba-why{opacity:1;transition:opacity .35s var(--ease)}
.qb-anim .qba-bar i{transform:scaleX(0);transform-origin:left center}
.qb-anim.p5 .qba-bar i{transform:none;transition:transform .5s var(--ease)}
.qb-anim.p5 .qba-bar .r{transition-delay:.1s}

/* dark: the duo act's ground is navy-ink and --v-card barely lifts on it (1.13 — the §18 lesson), so the demo
   card takes the same royal mix the public fcard does, and the skeleton bars lift with it. One root per
   selector, never chained (the Build 40 dead-selector lesson). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .qba-card{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal));border-color:var(--line-strong)}
  :root:not([data-theme="light"]) .qba-opts li{background:color-mix(in srgb,var(--v-card) 86%,var(--v-royal))}
  :root:not([data-theme="light"]) .qba-stem i,
  :root:not([data-theme="light"]) .qba-opts li i{background:color-mix(in srgb,var(--v-card) 30%,var(--v-royal))}
  :root:not([data-theme="light"]) .qba-chip{background:color-mix(in srgb,var(--v-card) 42%,var(--v-royal));color:var(--v-mist)}
}
:root[data-theme="dark"] .qba-card{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal));border-color:var(--line-strong)}
:root[data-theme="dark"] .qba-opts li{background:color-mix(in srgb,var(--v-card) 86%,var(--v-royal))}
:root[data-theme="dark"] .qba-stem i,
:root[data-theme="dark"] .qba-opts li i{background:color-mix(in srgb,var(--v-card) 30%,var(--v-royal))}
:root[data-theme="dark"] .qba-chip{background:color-mix(in srgb,var(--v-card) 42%,var(--v-royal));color:var(--v-mist)}

/* -- the check's own act: the finding, its key and the counted sentence, above the close -- */
.check-act .check-in{display:grid;gap:8px}
.check-act .section-head{margin-bottom:16px}
.check-act .showcase-wrap{max-width:820px}
.check-act .run-proof{max-width:820px}
@media (forced-colors: active){
  .qba-card,.qba-opts li,.get.get-wide{border:1px solid CanvasText;background:Canvas}
}

/* -- §28 · the stacked hero (owner direction 2026-09-01): one column — the copy, the run, the ask — and, on the
      owner's third-pass critique ("no unified text, edges all different"), every row on the run panel's own
      measure, so the copy's left edge, the panel's edge and the signup's edge are one line. The copy and the
      ask are left-aligned reading blocks (a multi-line centred paragraph has no edge to read down); the panel
      stays centred inside its own box. Append-only; the §17-era two-column rules are overridden here. -- */
.hero{--hero-w:720px;--hero-em:var(--v-subheading)}
.hero-in{grid-template-columns:minmax(0,1fr);gap:40px;justify-items:center;max-width:880px}
.hero .hero-copy,.hero-flow,.hero-act{width:min(100%,var(--hero-w))}
.hero .hero-copy{justify-items:start;text-align:left;gap:20px}
.hero-act{display:grid;gap:10px;justify-items:start;text-align:left}
.hero-act .signup{margin:0;width:100%}
.hero .hero-auth{margin-top:10px}
/* -- §28.1 · the hero's copy (owner copy 2026-09-01, third pass). Two couplets in one H1: the problem at the top
      of the clamp, its answer a step down (.72em) and a little under it, both with a second line that is a block
      so the composition never depends on the wrap. The antithesis is the house accent — `.hero h1 em`, the serif
      italic §11 owns — in the hero's blue, on "everyone else’s" and on "your own lectures", so the eye pairs
      them; the sweep it has always drawn is redrawn in mist, because §11's band is primary-tint, which on this
      tinted band is the ground itself. Elsewhere emphasis is two things said one way each: <b> is weight in the
      running ink, .hue is the blue via the hero-local token (royal on the tint; link in dark, where the
      subheading token flips to mist and reads as a fade). The check's mark is the run panel's own done-tick —
      the primary disc beside "Checking guidelines", at text size — so the sentence and the diagram say one
      thing with one sign; a bordered square read as a form checkbox, and no status green in the copy (rule 6). The three beats are one row across the measure, each
      one line, numbered small in the how-it-works mono; the urgency line closes the block above the run. -- */
.hero .hue{color:var(--hero-em)}
.hero h1{font-size:clamp(31px,2.6vw + 18px,50px);line-height:1.06;letter-spacing:-0.02em;max-width:none;width:100%;margin:0 0 6px;text-wrap:balance}
.hero h1 .h1-a,.hero h1 .h1-b,.hero h1 .h1-turn{display:block}
.hero h1 .h1-b{font-size:.72em;line-height:1.12;margin-top:.4em}
.hero h1 em{color:var(--hero-em);background-image:linear-gradient(var(--v-mist),var(--v-mist))}
.hero .hero-sub{max-width:none;text-wrap:pretty}
.hero .hero-copy .hero-sub b{font-weight:600;color:inherit}
.hero .hero-copy .hero-sub b.hue{color:var(--hero-em)}
.hero .hero-sub .nb{white-space:nowrap}
.hero-mark{display:inline-grid;place-items:center;width:1.1em;height:1.1em;margin-left:.3em;vertical-align:-.2em;border-radius:50%;background:var(--primary);color:var(--on-primary)}
.hero-mark .ic{width:.62em;height:.62em;stroke-width:3.2}
/* the three beats are one object, not three loose lines: a navy card — the bar's own colour, the identity
   colour the primary button wears — at the run panel's radius, white on it, the numbers in mist (rule 4: only
   mist, white and the status fills on navy). Thin: the padding is the text's own leading plus a little. The
   same in dark, as the bar is. */
.hero-sure{list-style:none;margin:4px 0 0;padding:11px 20px;counter-reset:sure;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:10px 24px;width:100%;background:var(--v-navy);color:var(--v-on-navy);
  border:0;border-radius:var(--r-lg)}
/* three columns sized to their own text, spread across the card: equal columns would wrap the longest beat,
   and flex-wrap would drop the third onto a line of its own — the asymmetry the row exists to avoid */
.hero-sure{display:grid;grid-template-columns:auto auto auto;padding:11px 20px;gap:10px 18px}
/* each beat is one cell beside its number (an inline <b> and a bare text node would otherwise be two cells) */
.hero-sure li{counter-increment:sure;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:baseline;margin:0;font:400 17px/1.45 var(--sans);color:var(--v-on-navy)}
.hero-sure li::before{content:counter(sure,decimal-leading-zero);font:500 12px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--v-mist)}
.hero-sure li b{font-weight:600;color:inherit}
/* the third beat is weight alone (owner, fifth pass): the band under "confident" is withdrawn, and on navy the
   only stress left is the <b> */
/* the two phrases the owner asked to see: the same mist band, in the running ink, under body copy — cloned per
   line so a phrase that turns the line keeps its band on both halves */
.hero .hero-sub mark{background:none;color:inherit;background-image:linear-gradient(var(--v-mist),var(--v-mist));background-repeat:no-repeat;background-size:100% .34em;background-position:0 88%;padding:0 .05em;margin:0 -.05em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* and each band draws itself the way the headline's does (owner, fifth pass): the line rises, then the mist
   sweeps under the phrase left to right — hero-sweep's shape at this band's own height, one paragraph after the
   other so they read in order behind the headline's (.55s + .8s), each within the sheet's 300ms cap (Build 41).
   Script only and never under reduced motion, the same gate as the rise; without either the band is simply
   there. */
@media (prefers-reduced-motion: no-preference){
  .js .hero .hero-sub mark{animation:hero-band .3s var(--ease) 1s both}
  @keyframes hero-band{from{background-size:0 .34em}to{background-size:100% .34em}}
  /* the ask now follows the copy (owner, fifth pass), so it rises with it, after the urgency line */
  .js .hero .hero-act{opacity:0;transform:translateY(10px);animation:hero-rise .3s var(--ease) .3s forwards}
}
/* -- §28.2 · the ask under the urgency line (owner, fifth pass): the signup is the sentence's own next step, so
      the row gap between the copy and the act closes to the copy's own gap; the run keeps the full gap below. The
      three beats' card and the second paragraph are withdrawn (CUTS.json B49); .hero-sure stays in the sheet
      inert, as the time bar's rules do. -- */
.hero .hero-act{margin-top:-16px}
.hero .hero-shift{font:500 18px/1.5 var(--sans);color:var(--ink);margin:4px 0 0;max-width:none}
/* the italic sentence never breaks inside itself, so on a narrow phone the line turns at the full stop */
.hero .hero-shift em{font-family:inherit;font-style:italic;font-weight:inherit;color:var(--hero-em);font-synthesis:none;white-space:nowrap}
.hero-act .hero-certain{font:600 17px/1.5 var(--sans);color:var(--ink);margin:0;max-width:none}
.hero-act .hero-certain b{font-weight:inherit;color:inherit}
.hero-act .signup-note{margin:-4px 0 0}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero{--hero-em:var(--v-link)}
  :root:not([data-theme="light"]) .hero h1 em{background-image:linear-gradient(var(--v-royal),var(--v-royal))}
  :root:not([data-theme="light"]) .hero .hero-sub mark{background-image:linear-gradient(var(--v-royal),var(--v-royal))}
  }
:root[data-theme="dark"] .hero{--hero-em:var(--v-link)}
:root[data-theme="dark"] .hero h1 em{background-image:linear-gradient(var(--v-royal),var(--v-royal))}
:root[data-theme="dark"] .hero .hero-sub mark{background-image:linear-gradient(var(--v-royal),var(--v-royal))}
@media (forced-colors: active){
  .hero-mark,.hero-sure{border:1px solid CanvasText;background:Canvas;color:CanvasText}
  .hero .hero-sub mark{background-image:none;animation:none}
  .hero h1 em{background-image:none}
}
@media (max-width:899px){
  .hero-sure{grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:10px}
}
@media (max-width:640px){
  .hero-in{gap:32px}
  .hero .hero-sub,.hero-sure li,.hero .hero-shift{font-size:17px}
}
@media (max-width:480px){
  .hero h1{font-size:clamp(27px,7.6vw,31px)}
}

/* ===== 29 · Build 48 · the subscription page — one screen, three intents: decide, check, leave.
   Rendered by app/static/subscription.js from /api/billing; the shell's inline script only switches to it.
   The page takes a wider frame than the rest of the app (1040px) for one reason — the summary card's two halves,
   the plan on the left and the drawn study flow on the right — and every other block sits on the same width so
   the edges are one line down the page. The card head is navy: colour rule 1 forbids a page SECTION filled with
   navy, and this is the one object on the page a subscriber is asked to trust, given the identity colour the
   nav and the primary button already wear. On navy only mist, white and the status fills appear (rule 4).
   Motion, all of it: the blocks rise once (10px, 300ms — the sheet's cap since Build 41 — 60ms apart); the flow
   draws once, node by node, in
   under 1.2s; the status pill fades in once; a plan card lifts 2px on a fine pointer; every button gives 2 %
   back under the finger; the dialog scales in from .97 over 180ms. Nothing loops, nothing pulses, and under
   reduced motion §13 zeroes every duration so all of it simply is. Tokens throughout, no raw hex. ===== */
main:has(#v-sub.on){max-width:1040px}
.sp{display:grid;gap:44px}
.sp>*{opacity:0;transform:translateY(10px);animation:sp-rise .3s cubic-bezier(.23,1,.32,1) forwards}
.sp>*:nth-child(2){animation-delay:.06s}
.sp>*:nth-child(3){animation-delay:.12s}
.sp>*:nth-child(4){animation-delay:.18s}
.sp>*:nth-child(5){animation-delay:.24s}
.sp>*:nth-child(6){animation-delay:.3s}
.sp>*:nth-child(7){animation-delay:.36s}
.sp>*:nth-child(n+8){animation-delay:.42s}
@keyframes sp-rise{to{opacity:1;transform:none}}
.sp .page-head{margin:0;padding:0 0 28px}
.sp .page-head .sub{max-width:var(--measure);font-size:18px}
.sp .page-head .sub b{font-weight:600;color:var(--ink)}
.sp .page-head .sub .nb{white-space:nowrap}
.sp .hue{color:var(--v-subheading)}
.sp .hero-mark{vertical-align:-.18em}
.sp-notice{margin-top:12px}
/* section heads: the display serif a step under the page title, one quiet sentence under it */
.sp-sec-h{display:grid;gap:4px;margin:0 0 16px}
.sp-sec-h h2{font:600 clamp(21px,2vw,24px)/1.25 var(--display);color:var(--v-heading);margin:0;letter-spacing:-0.005em}
.sp-sec-h p{margin:0;font:400 16px/1.5 var(--sans);color:var(--ink-muted);max-width:var(--measure)}
/* -- the summary card -- */
.sp-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.sp-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 40px;align-items:center;padding:28px 32px;background:var(--v-navy);color:var(--v-on-navy)}
.sp-head-l{display:grid;justify-items:start;gap:2px}
.sp-k{font:500 13px/1.4 var(--sans);color:var(--v-mist)}
.sp-plan{font:600 clamp(24px,2.4vw,30px)/1.2 var(--display);color:var(--v-on-navy);margin:2px 0 0;letter-spacing:-0.01em;white-space:nowrap}
.sp-line{font:400 17px/1.5 var(--sans);color:var(--v-mist);margin:0 0 12px}
.sp-status{animation:fadein .3s var(--ease) .3s both}
.sp-status .ic{width:13px;height:13px;stroke-width:3.2;stroke:currentColor}
.sp-flow{display:flex;align-items:flex-start;margin:0;padding:0;justify-self:end}
.sp-node{display:grid;justify-items:center;gap:8px;width:68px}
.sp-node i{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);border:1px solid color-mix(in srgb,var(--v-mist) 45%,transparent);color:var(--v-mist);background:color-mix(in srgb,var(--v-navy-ink) 45%,transparent)}
.sp-node i svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sp-node i svg[viewBox="0 0 100 100"]{stroke:none}
.sp-node i .dk{width:26px;height:22px}
.sp-node.ok i{background:var(--v-verified);border-color:var(--v-verified);color:var(--v-on-status)}
.sp-node small{font:500 12px/1.3 var(--sans);color:var(--v-mist);text-align:center}
.sp-link{flex:none;width:26px;height:1px;margin-top:22px;background:var(--v-mist);opacity:.75;transform-origin:left center}
/* drawn once, left to right, in 1.1s */
.js .sp-flow .sp-node{opacity:0;transform:translateY(6px);transition:opacity .32s cubic-bezier(.23,1,.32,1),transform .32s cubic-bezier(.23,1,.32,1)}
.js .sp-flow .sp-link{transform:scaleX(0);transition:transform .22s cubic-bezier(.23,1,.32,1)}
.js .sp-flow.in .sp-node{opacity:1;transform:none}
.js .sp-flow.in .sp-link{transform:none}
.js .sp-flow .sp-node:nth-of-type(2){transition-delay:.2s} .js .sp-flow .sp-node:nth-of-type(3){transition-delay:.4s}
.js .sp-flow .sp-node:nth-of-type(4){transition-delay:.6s} .js .sp-flow .sp-node:nth-of-type(5){transition-delay:.8s}
.js .sp-flow .sp-link:nth-of-type(1){transition-delay:.1s} .js .sp-flow .sp-link:nth-of-type(2){transition-delay:.3s}
.js .sp-flow .sp-link:nth-of-type(3){transition-delay:.5s} .js .sp-flow .sp-link:nth-of-type(4){transition-delay:.7s}
.sp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 28px;margin:0;padding:6px 32px;border-bottom:1px solid var(--line)}
.sp-facts>div{padding:18px 0;border-top:1px solid var(--line)}
.sp-facts>div:nth-child(-n+4){border-top:0}
.sp-facts dt{font:500 13px/1.4 var(--sans);color:var(--ink-muted);margin:0 0 4px}
.sp-facts dd{margin:0;font:600 19px/1.3 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.sp-card-foot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:20px 32px}
.sp-card-foot p{margin:0;font:400 15px/1.5 var(--sans);color:var(--ink-muted);max-width:var(--measure-s)}
.sp-actions{display:flex;gap:10px;flex-wrap:wrap}
/* the inactive strip: the state named, the reason under it, the portal beside it */
.sp-card-quiet{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:18px 24px}
.sp-card-quiet b{font:600 17px/1.4 var(--sans);color:var(--ink)}
.sp-card-quiet .muted{grid-column:2;font-size:15px}
.sp-card-quiet .btn{grid-column:3;grid-row:1/span 2}
/* -- your revision system: the counts the account actually carries -- */
.sp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.sp-tile{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:18px 20px;display:grid;gap:4px}
.sp-tile b{font:600 28px/1.1 var(--sans);color:var(--v-heading);font-variant-numeric:tabular-nums}
.sp-tile span{font:400 14px/1.4 var(--sans);color:var(--ink-muted)}
.sp-incl-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 28px;border-top:1px solid var(--line)}
.sp-incl-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;font:400 17px/1.4 var(--sans);color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line)}
.sp-incl-list li i{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r);background:var(--v-tint);color:var(--primary)}
.sp-incl-list li i svg{width:18px;height:18px;display:block}
.sp-incl-list li.ok i{background:var(--v-verified);color:var(--v-on-status)}
.sp-incl-list li.ok i .ic{stroke-width:3}
/* -- the chooser: two ways to pay one plan, a radio group drawn as cards -- */
.sp-plans{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sp-plan-opt{position:relative;display:grid;gap:6px;align-content:start;padding:22px 56px 22px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);cursor:pointer;
  transition:border-color .18s var(--ease),background-color .18s var(--ease),transform .18s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.sp-plan-opt:hover{border-color:var(--line-blue);transform:translateY(-2px)}}
.sp-plan-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.sp-plan-opt:has(input:checked){border-color:var(--primary);background:var(--primary-tint)}
.sp-plan-opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.sp-opt-k{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font:600 15px/1.4 var(--sans);color:var(--v-heading)}
.sp-tag{font:500 12px/1.4 var(--sans);color:var(--v-royal);background:var(--surface);border:1px solid var(--line-blue);border-radius:var(--r-pill);padding:1px 9px}
.sp-opt-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:2px}
.sp-opt-price b{font:600 30px/1.1 var(--sans);color:var(--v-heading);font-variant-numeric:tabular-nums}
.sp-opt-price s{color:var(--ink-muted);font-size:17px}
.sp-opt-price small{font-size:15px;color:var(--ink-muted)}
.sp-opt-sub{font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.sp-opt-check{position:absolute;top:20px;right:20px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:transparent;background:var(--surface);transform:scale(.97);
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s cubic-bezier(.23,1,.32,1)}
.sp-opt-check .ic{width:12px;height:12px;stroke-width:3.4}
.sp-plan-opt:has(input:checked) .sp-opt-check{background:var(--primary);border-color:var(--primary);color:var(--on-primary);transform:none}
.sp-buy{display:grid;gap:14px;margin-top:18px;justify-items:start}
.sp-buy .btn{min-height:48px;padding:0 22px;font-size:16px}
.sp-code{display:grid;gap:6px;font:500 14px/1.4 var(--sans);color:var(--ink)}
.sp-code-k .muted{font-weight:400}
.sp-code input{height:40px;border:1px solid var(--line-strong);border-radius:var(--r);padding:0 12px;font:400 15px var(--sans);background:var(--surface);color:var(--ink);min-width:min(280px,100%)}
.sp-code input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--v-link)}
.sp-assure{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;margin:0;font:400 14px/1.5 var(--sans);color:var(--ink-muted);max-width:var(--measure)}
.sp-assure .ic{width:16px;height:16px;stroke:var(--v-verified);stroke-width:3;margin-top:2px}
/* -- billing rows: label, value right, one action -- */
.sp-rows{border-top:1px solid var(--line)}
.sp-row{display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:8px 24px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);min-height:60px}
.sp-row-k{font:500 14px/1.4 var(--sans);color:var(--ink-muted)}
.sp-row-v{font:400 17px/1.4 var(--sans);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.sp-row-a{min-width:0}
.sp-row-a:empty{display:none}
.sp-row:has(.sp-row-a:empty){grid-template-columns:190px minmax(0,1fr)}
/* -- manage: lower, plainer, never hidden -- */
.sp-manage p{max-width:var(--measure);color:var(--ink-muted);margin:0 0 16px;font-size:16px;line-height:1.6}
.sp-manage p b{color:var(--ink);font-weight:600}
.sp .btn.destructive{background:none;border:1px solid color-mix(in srgb,var(--stop) 55%,var(--line));color:var(--stop);font-weight:500}
.sp .btn.destructive:hover{border-color:var(--stop);background:color-mix(in srgb,var(--stop) 8%,var(--surface));color:var(--stop)}
.sp .btn{transition:background-color .12s var(--ease),border-color .12s var(--ease),color .12s var(--ease),transform .16s cubic-bezier(.23,1,.32,1)}
.sp .btn:active{transform:scale(.98)}
.sp-topup .val{font-weight:600;color:var(--ink)}
/* -- the dialog: centred, 180ms, and only its confirm button changes anything -- */
.sp-dialog{border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:0;width:min(92vw,540px);background:var(--surface);color:var(--ink);box-shadow:none;margin:auto;
  opacity:0;transform:scale(.97);transition:opacity .18s cubic-bezier(.23,1,.32,1),transform .18s cubic-bezier(.23,1,.32,1),overlay .18s allow-discrete,display .18s allow-discrete}
.sp-dialog[open]{opacity:1;transform:none}
@starting-style{.sp-dialog[open]{opacity:0;transform:scale(.97)}}
.sp-dialog::backdrop{background:color-mix(in srgb,var(--v-navy-ink) 55%,transparent);transition:background-color .18s var(--ease),overlay .18s allow-discrete,display .18s allow-discrete}
@starting-style{.sp-dialog[open]::backdrop{background:transparent}}
.sp-dialog-in{padding:28px 28px 24px;display:grid;gap:14px}
.sp-dialog h2{font:600 24px/1.2 var(--display);color:var(--v-heading);margin:0;letter-spacing:-0.005em}
.sp-dialog-body{display:grid;gap:12px}
.sp-dialog p{margin:0;font:400 17px/1.5 var(--sans);color:var(--ink)}
.sp-dialog p b{font-weight:600}
.sp-dialog-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sp-dialog-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;font:400 15px/1.5 var(--sans);color:var(--ink-muted)}
.sp-dialog-list .ic{width:16px;height:16px;stroke:var(--v-verified);stroke-width:3;margin-top:3px}
.sp-dialog-list li:last-child .ic{stroke:var(--ink-muted)}
.sp-dialog-note{font:500 14px/1.4 var(--sans);color:var(--ink);margin-top:4px}
.sp-dialog textarea{width:100%;box-sizing:border-box;border:1px solid var(--line-strong);border-radius:var(--r);padding:10px 12px;font:400 15px/1.5 var(--sans);background:var(--surface);color:var(--ink);resize:vertical;min-height:76px;margin-top:-8px}
.sp-dialog textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--v-link)}
.sp-dialog .msg{margin:0}
.sp-dialog-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
/* -- loading and failure, the same shape as the page -- */
.sp-skel{display:grid;gap:14px}
.sp-skel i{display:block;width:100%;height:16px;border-radius:var(--r);background:var(--surface-2)}
.sp-skel-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;gap:0}
.sp-skel-card i{border-radius:0;background:var(--surface-2)}
.sp-skel-card i:first-child{background:color-mix(in srgb,var(--v-navy) 92%,var(--v-mist))}
.sp-loading{gap:44px}
.sp-error{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:24px;display:grid;gap:14px;justify-items:start}
.sp-error p{margin:0;font:400 17px/1.5 var(--sans);color:var(--ink)}
/* -- responsive -- */
@media (max-width:899px){
  .sp-head{grid-template-columns:1fr}
  .sp-flow{display:none}
}
@media (max-width:640px){
  .sp{gap:36px}
  .sp-head{padding:22px 20px}
  .sp-facts{padding:4px 20px;grid-template-columns:1fr}
  .sp-facts>div:nth-child(-n+4){border-top:1px solid var(--line)}
  .sp-facts>div:first-child{border-top:0}
  .sp-card-foot{padding:18px 20px;flex-direction:column;align-items:stretch}
  .sp-card-foot .sp-actions .btn{flex:1 1 auto}
  .sp-plans{grid-template-columns:1fr}
  .sp-row{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .sp-row:has(.sp-row-a:empty){grid-template-columns:1fr}
  .sp-row-v{text-align:left}
  .sp-row-a{margin-top:6px}
  .sp-card-quiet{grid-template-columns:auto minmax(0,1fr)}
  .sp-card-quiet .btn{grid-column:1/span 2;grid-row:auto;justify-self:start;margin-top:6px}
  .sp-buy .btn{width:100%}
}
@media (forced-colors: active){
  .sp-head{background:Canvas;color:CanvasText;border-bottom:1px solid CanvasText}
  .sp-node i,.sp-plan-opt,.sp-tile,.sp-card,.sp-dialog,.sp-opt-check{border:1px solid CanvasText;background:Canvas;color:CanvasText}
  .sp-link{background:CanvasText}
}
/* dark: the head stays navy on the navy-ink page (rule 9 keeps the bar navy for the same reason) and separates
   from the card body by the fill, not a hairline; the recommended tag and the checked plan keep their tokens. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sp-tag{background:var(--v-card)}
  :root:not([data-theme="light"]) .sp-skel-card i:first-child{background:var(--v-navy)}
}
:root[data-theme="dark"] .sp-tag{background:var(--v-card)}
:root[data-theme="dark"] .sp-skel-card i:first-child{background:var(--v-navy)}

/* ===== 30 · Build 50 (owner, 2026-09-02) · the hero in two columns again — the copy on the left, the run on the
   right — and Inter for everything (the tokens at the top of the sheet). Append-only; §28's one-column rules are
   overridden here. The copy is one headline, one paragraph and one button; the .ac.uk signup object, the three
   beats and the urgency line are withdrawn (CUTS.json B49/B50). The headline's accent keeps the mist band and
   its sweep; the paragraph's band keeps hero-band. ===== */
.hero-in{grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:24px 56px;align-items:center;justify-items:stretch;max-width:1160px}
.hero .hero-copy,.hero .hero-flow,.hero .hero-act{width:auto}
.hero .hero-copy{gap:20px;align-content:center}
/* Inter runs wider than Source Serif 4 at the same size, so the headline steps down a size and takes the tight
   display tracking; one sentence, three lines in the column, never balanced into a widow */
.hero h1{font-size:clamp(30px,1.9vw+16px,42px);line-height:1.12;letter-spacing:-0.025em;font-weight:600;max-width:none;margin:0;text-wrap:balance}
.hero h1 em{margin-right:0}
.hero .hero-sub{font-size:19px;line-height:1.55}
/* the ask is one filled button (the page's one primary) with its note and the authority line under it; it sits
   inside the copy so the column is one reading block, and rises with it in turn */
.hero .hero-act{margin-top:4px;gap:8px}
.hero .hero-act .btn{min-width:0}
.hero .hero-act .signup-note{margin:0;color:var(--ink-muted)}
.hero .hero-auth{margin-top:4px;font-size:15px;line-height:1.5;color:var(--ink-muted);max-width:44ch}
@media (prefers-reduced-motion: no-preference){
  .js .hero .hero-copy>.hero-act{animation:hero-rise .3s var(--ease) .29s forwards}
}
/* the run panel fills its column; under 1080px the columns stack, the copy first, as §17 did */
.hero .hero-flow{width:100%;justify-self:stretch}
@media (max-width:1079px){
  .hero-in{grid-template-columns:minmax(0,1fr);gap:40px;justify-items:center;max-width:880px}
  .hero .hero-copy,.hero .hero-flow{width:min(100%,var(--hero-w))}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(28px,7vw,34px)}
  .hero .hero-sub{font-size:17px}
}


/* ===== 31 · Build 54 (owner brief, 2026-09-02) · how it works, rebuilt — the page a prospect reads before paying.
   Five acts on the landing's band system: the head with the run drawn as it happens (the stages the product
   itself reports, a clock that settles on the measured span rather than a figure); what comes back, as four
   copy-and-artefact rows built from the frozen Pneumonia run's own data; how every number is checked (the order
   of authority as a ladder, the student's board, the real NG138 → NG250 chain); what you get and keep, from
   config; the boundary and the one gold ask. Every moment plays when it comes onto the screen, resets when
   it leaves, plays again when it returns (owner: keyed to the viewport, never the pointer), and never loops
   (§4: the hero was the last loop). Gated on `how-js`, which the head script never sets
   under reduced motion — so with no script or reduced motion each act simply renders finished. Keyframes are
   none; the long draws are transitions (the §20 precedent), the pops are ≤300ms. Tokens throughout. ===== */
main.hiw{max-width:none;padding:0 0 96px}
.how-act{padding:72px 24px}
.how-in{max-width:var(--frame-n);margin:0 auto}
.how-in.wide{max-width:1160px}

/* -- 1 · the head: the copy on the left, the run on the right, on the scheme's tint (rule 1: never navy) -- */
.how-head{background:var(--v-tint);border-bottom:1px solid var(--v-mist);padding:40px 24px 64px}
.how-head-in{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:32px 56px;align-items:center;max-width:1160px}
.how-copy{display:grid;gap:20px;align-content:center}
.how-h1{font:600 clamp(32px,2.2vw + 14px,46px)/1.08 var(--display);letter-spacing:-0.025em;color:var(--v-heading);margin:0;text-wrap:balance}
.how-h1 em{font-style:italic;font-synthesis:none;color:var(--v-subheading);background-image:linear-gradient(var(--v-mist),var(--v-mist));
  background-repeat:no-repeat;background-size:100% .3em;background-position:0 90%;padding:0 .04em;margin:0 -.04em}
.how-lede{margin:0;font:400 19px/1.55 var(--sans);color:var(--ink);text-wrap:pretty}
.how-facts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.how-facts li{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:start;font:400 16px/1.5 var(--sans);color:var(--ink)}
.how-facts .ic{width:18px;height:18px;margin-top:3px;stroke:var(--primary);stroke-width:2.8}
.how-facts b{font-weight:600;color:var(--ink)}

/* the run panel: a receipt row, the stages as a thread that lights as each one completes, then the delivery */
.how-run{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;display:grid;gap:18px;min-width:0}
.run-file{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.run-deck .dk{width:34px;height:28px;display:block;color:var(--primary)}
.run-name{font:600 16px/1.3 var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-meta{font:400 14px/1.4 var(--sans);color:var(--ink-muted);white-space:nowrap}
.run-clock{display:grid;justify-items:end;font-variant-numeric:tabular-nums;min-width:62px}
.run-clock b,.run-clock small{grid-area:1/1;transition:opacity .25s var(--ease)}
.run-clock b{font:500 20px/1 var(--mono);color:var(--ink);opacity:0}
.run-clock small{font:500 15px/1.3 var(--mono);color:var(--ink);white-space:nowrap}
.how-js .how-run:not(.fin) .run-clock b{opacity:1}
.how-js .how-run:not(.fin) .run-clock small{opacity:0}
.run-stages{list-style:none;margin:0;padding:0;display:grid;position:relative;--p:1}
.run-stages::before,.run-stages::after{content:"";position:absolute;left:10.5px;top:20px;bottom:20px;width:1px;background:var(--line)}
.run-stages::after{background:var(--primary);transform:scaleY(var(--p));transform-origin:top;transition:transform .5s var(--ease)}
.how-js .run-stages{--p:0}
.run-stages li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:1px 12px;align-items:start;padding:8px 0}
.run-stages li i{position:relative;z-index:1;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;
  border:1.5px solid var(--line-blue);background:var(--surface);transition:border-color .25s var(--ease),background-color .25s var(--ease)}
.run-stages li i .ic{grid-area:1/1;width:12px;height:12px;stroke:var(--on-primary);stroke-width:3.2;opacity:0;transition:opacity .2s var(--ease)}
.run-stages li i::after{content:"";grid-area:1/1;width:8px;height:8px;border-radius:50%;background:var(--primary);opacity:0;transform:scale(.4);transition:opacity .2s var(--ease),transform .25s var(--ease)}
.run-stages li span{font:500 15px/1.4 var(--sans);color:var(--ink-muted);transition:color .25s var(--ease)}
.run-stages li small{grid-column:2;font:400 13px/1.45 var(--sans);color:var(--ink-muted)}
html:not(.how-js) .run-stages li i,.run-stages li.done i{border-color:var(--primary);background:var(--primary)}
html:not(.how-js) .run-stages li i .ic,.run-stages li.done i .ic{opacity:1}
.run-stages li.now i{border-color:var(--primary);border-width:2px}
.run-stages li.now i::after{opacity:1;transform:none}
html:not(.how-js) .run-stages li span,.run-stages li.done span,.run-stages li.now span{color:var(--ink)}
.run-done{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;padding:12px 16px;border-radius:var(--r);background:var(--v-tint);border:1px solid var(--v-mist)}
.run-done-k{display:inline-flex;align-items:center;gap:8px;font:600 15px/1.4 var(--sans);color:var(--v-heading)}
.run-done-k .ic{width:20px;height:20px;padding:4px;border-radius:50%;background:var(--primary);stroke:var(--on-primary);stroke-width:3.2;box-sizing:border-box}
.run-done-t{font:400 14px/1.45 var(--sans);color:var(--ink)}
.how-js .how-run:not(.fin) .run-done{opacity:0;transform:translateY(6px)}
.how-run.fin .run-done{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
/* the head arrives: the copy rises line by line, the panel after it */
.how-js .how-head:not(.in) .how-copy>*{opacity:0;transform:translateY(10px)}
.how-head.in .how-copy>*{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.how-head.in .how-copy>:nth-child(2){transition-delay:.08s}
.how-head.in .how-copy>:nth-child(3){transition-delay:.16s}
.how-js .how-head:not(.in) .how-run{opacity:0;transform:translateY(12px)}
.how-head.in .how-run{opacity:1;transform:none;transition:opacity .3s var(--ease) .2s,transform .3s var(--ease) .2s}

/* -- 2 · what comes back: a section head, then four rows — copy 5fr, the artefact 7fr -- */
.how-sh{display:grid;gap:10px;max-width:var(--measure);margin:0 0 40px}
.how-sh h2{font:600 clamp(27px,2.4vw,34px)/1.15 var(--display);letter-spacing:-0.015em;color:var(--v-heading);margin:0;text-wrap:balance}
.how-sh h2 em{font-style:italic;font-synthesis:none;color:var(--v-subheading)}
.how-sh p{margin:0;font:400 17px/1.6 var(--sans);color:var(--ink-muted);text-wrap:pretty}
.get-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 56px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.how-sh+.get-row{border-top:0;padding-top:0}
.get-row.get-check{align-items:start}
.get-copy{display:grid;gap:12px;align-content:start;min-width:0}
.get-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r);background:var(--v-tint);border:1px solid var(--v-mist);color:var(--primary)}
.get-mark svg{width:22px;height:22px;display:block}
.get-mark .ic{stroke:currentColor;stroke-width:2.4}
.get-copy h3{font:600 24px/1.2 var(--display);letter-spacing:-0.01em;color:var(--v-heading);margin:0}
.get-copy>p{margin:0;font:400 17px/1.6 var(--sans);color:var(--ink);text-wrap:pretty}
.get-facts{list-style:none;margin:4px 0 0;padding:0;display:grid}
.get-facts li{position:relative;padding:10px 0 10px 22px;font:400 15px/1.5 var(--sans);color:var(--ink-muted)}
.get-facts li+li{border-top:1px solid var(--line)}
.get-facts li::before{content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;border-radius:50%;background:var(--primary)}
.get-facts.stamps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding-left:0}
.get-facts.stamps li::before{content:none}
.get-art{margin:0;min-width:0}
.get-row .qb-ad{display:grid;gap:14px}

/* the note: where it files, its sections writing in, and the check sitting at the line it corrects */
.art-note{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 24px;display:grid;gap:12px}
.art-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font:500 13px/1.4 var(--sans);color:var(--ink-muted)}
.art-crumb i{width:4px;height:4px;border-radius:50%;background:var(--line-strong)}
.art-crumb b{font-weight:600;color:var(--ink)}
.art-sections{list-style:none;margin:0;padding:0;counter-reset:sec;display:grid}
.art-sections>li{counter-increment:sec;display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 8px;padding:6px 0;font:500 14px/1.5 var(--sans);color:var(--ink);border-top:1px solid var(--line)}
.art-sections>li::before{content:counter(sec);font:500 12px/1.75 var(--mono);color:var(--ink-muted);font-variant-numeric:tabular-nums}
/* the check interrupts the list the way it interrupts the note: its own unnumbered row on the warn tint, the
   stamp the finding carries, the two positions with their sources */
.art-sections>li.art-drift{counter-increment:none;grid-template-columns:minmax(0,1fr);gap:6px;margin:4px 0;padding:12px 14px;border:1px solid var(--warn);border-left-width:3px;background:var(--warn-tint);border-radius:var(--r)}
.art-sections>li.art-drift::before{content:none}
.art-drift-k{display:flex;align-items:center;gap:8px;font:600 13px/1.4 var(--sans);color:var(--ink)}
.art-drift p{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink)}
.art-drift p b{font-weight:600}
.how-js .get-row:not(.in) .art-crumb>*{opacity:0}
.get-row.in .art-crumb>*{opacity:1;transition:opacity .25s var(--ease);transition-delay:calc(var(--i,0) * .06s)}
.art-crumb>:nth-child(2){--i:1}.art-crumb>:nth-child(3){--i:2}.art-crumb>:nth-child(4){--i:3}.art-crumb>:nth-child(5){--i:4}.art-crumb>:nth-child(6){--i:5}.art-crumb>:nth-child(7){--i:6}
.how-js .get-row:not(.in) .art-sections>li{opacity:0;transform:translateX(-6px)}
.get-row.in .art-sections>li{opacity:1;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease);transition-delay:calc(.3s + var(--i,0) * .07s)}
.art-sections>li:nth-child(2){--i:1}.art-sections>li:nth-child(3){--i:2}.art-sections>li:nth-child(4){--i:3}.art-sections>li:nth-child(5){--i:4}
.art-sections>li:nth-child(6){--i:5}.art-sections>li:nth-child(7){--i:6}.art-sections>li:nth-child(8){--i:7}.art-sections>li:nth-child(9){--i:8}
.art-sections>li:nth-child(10){--i:9}.art-sections>li:nth-child(11){--i:10}.art-sections>li:nth-child(12){--i:11}.art-sections>li:nth-child(13){--i:12}.art-sections>li:nth-child(14){--i:13}
/* the check lands in its turn, a beat after Management, and holds the eye a moment longer than a heading */
.how-js .get-row:not(.in) .art-sections>li.art-drift{opacity:0;transform:translateY(4px)}
.get-row.in .art-sections>li.art-drift{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease);transition-delay:calc(.45s + var(--i,0) * .07s)}

/* the deck: two real fronts; the cloze answers are hidden the way Anki hides them, then revealed one by one */
.art-deck{display:grid;gap:12px}
.art-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 20px;display:grid;gap:8px}
.art-card-k{font:500 12px/1.4 var(--mono);color:var(--ink-muted)}
.art-card p{margin:0;font:400 16px/1.6 var(--sans);color:var(--ink);text-wrap:pretty}
.cl{display:inline-block;padding:0 .35em;border-radius:3px;border:1px solid var(--v-mist);background:var(--v-tint);color:var(--v-heading);font-weight:600;line-height:1.35}
.art-deck-n{font:400 13px/1.4 var(--mono);color:var(--ink-muted)}
.how-js .get-row:not(.in) .art-card{opacity:0;transform:translateY(8px)}
.get-row.in .art-card{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.get-row.in .art-card+.art-card{transition-delay:.12s}
.how-js .get-row:not(.in) .cl{color:transparent;background:var(--v-mist)}
.get-row.in .cl{transition:color .3s var(--ease),background-color .3s var(--ease);transition-delay:calc(.8s + var(--i,0) * .35s)}
.cl:nth-of-type(2){--i:1}.cl:nth-of-type(3){--i:2}

/* the check: the real finding card, its lecture line above it (the landing's rule is scoped to its own wrap) */
.art-check{display:grid;gap:10px}
.art-check .showcase-lecture{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.how-gets .run-proof{margin-top:44px;max-width:820px}

/* -- 3 · how every number is checked: the ladder, the boards, the chain -- */
.how-check{background:var(--v-tint);border-top:1px solid var(--v-mist);border-bottom:1px solid var(--v-mist)}
.check-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px 64px;align-items:start}
.ladder{list-style:none;margin:0;padding:0;position:relative;counter-reset:rung;display:grid}
.ladder::before{content:"";position:absolute;left:14.5px;top:30px;bottom:30px;width:1px;background:var(--v-mist)}
.ladder li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:2px 16px;padding:12px 0;align-items:start}
.ladder li::before{content:counter(rung);counter-increment:rung;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--line-blue);font:600 13px/1 var(--mono);color:var(--primary);font-variant-numeric:tabular-nums;box-sizing:border-box}
.ladder li b{font:600 17px/1.4 var(--sans);color:var(--v-heading);padding-top:3px}
.ladder li span{grid-column:2;font:400 15px/1.5 var(--sans);color:var(--ink-muted);max-width:44ch}
.ladder li.local::before{background:var(--v-mist);border-color:var(--v-royal);color:var(--v-navy-ink)}
.check-side h3,.check-chain h3{font:600 17px/1.4 var(--sans);color:var(--v-subheading);margin:0 0 10px}
.check-side .boards{border-top-color:var(--v-mist)}
.check-side .boards>div{border-bottom-color:var(--v-mist)}
.check-note{margin:12px 0 0;font:400 14px/1.5 var(--sans);color:var(--ink-muted);text-wrap:pretty}
.check-chain{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 64px;align-items:center;padding-top:32px;border-top:1px solid var(--v-mist)}
.check-chain h3{grid-column:1 / -1;margin-bottom:6px}
.check-chain>p{margin:0;font:400 16px/1.55 var(--sans);color:var(--ink);text-wrap:pretty}
.check-chain>p b{font-weight:600}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:500 15px/1.4 var(--mono);font-variant-numeric:tabular-nums}
.chain-old{position:relative;padding:4px 12px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-muted)}
.chain-old::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:1.5px;background:var(--ink-muted);transform-origin:left center}
.chain-arrow{flex:none;position:relative;width:40px;height:1.5px;background:var(--primary);transform-origin:left center}
.chain-arrow::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1.5px solid var(--primary);border-right:1.5px solid var(--primary);transform:rotate(45deg)}
.chain-new{padding:4px 12px;border-radius:var(--r-pill);background:var(--primary);color:var(--on-primary);font-weight:600}
.chain small{flex-basis:100%;font:400 13px/1.4 var(--sans);color:var(--ink-muted)}
.check-unverified{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.check-unverified .unverified{flex:none}
.how-js .how-check:not(.in) .ladder li{opacity:0;transform:translateY(-8px)}
.how-check.in .ladder li{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease);transition-delay:calc(var(--i,0) * .14s)}
.ladder li:nth-child(2){--i:1}.ladder li:nth-child(3){--i:2}.ladder li:nth-child(4){--i:3}
.how-js .how-check:not(.in) .chain-old::after{transform:scaleX(0)}
.how-check.in .chain-old::after{transform:none;transition:transform .3s var(--ease) .6s}
.how-check.in .chain-old+.chain-old::after{transition-delay:.8s}
.how-js .how-check:not(.in) .chain-arrow{transform:scaleX(0)}
.how-check.in .chain-arrow{transform:none;transition:transform .3s var(--ease) 1s}
.how-js .how-check:not(.in) .chain-new{opacity:0;transform:scale(.8)}
.how-check.in .chain-new{opacity:1;transform:none;transition:opacity .25s var(--ease) 1.25s,transform .3s var(--ease-settle,var(--ease)) 1.25s}
.how-js .how-check:not(.in) .chain small{opacity:0}
.how-check.in .chain small{opacity:1;transition:opacity .3s var(--ease) 1.45s}

/* -- 4 · what you get, and keep: a ledger, not cards -- */
.keep{margin:0;display:grid;border-top:1px solid var(--line)}
.keep>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4px 32px;padding:18px 0;border-bottom:1px solid var(--line)}
.keep dt{margin:0;font:600 17px/1.4 var(--display);color:var(--v-heading)}
.keep dd{margin:0;font:400 16px/1.55 var(--sans);color:var(--ink-muted);text-wrap:pretty}
.keep-more{margin:20px 0 0;font:400 15px/1.5 var(--sans)}
.how-js .how-keep:not(.in) .keep>div{opacity:0;transform:translateY(6px)}
.how-keep.in .keep>div{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease);transition-delay:calc(var(--i,0) * .08s)}
.keep>div:nth-child(2){--i:1}.keep>div:nth-child(3){--i:2}.keep>div:nth-child(4){--i:3}.keep>div:nth-child(5){--i:4}

/* -- 5 · the boundary and the ask -- */
.how-close{padding-top:0}
.how-close .boundary{margin:0 0 48px}
.how-cta{margin:0;padding-top:0;border-top:0}
.how-cta h2{font-size:clamp(27px,2.8vw,35px);line-height:1.15;letter-spacing:-0.015em;color:var(--v-heading);max-width:none}
.how-cta p{font-size:19px;line-height:1.55;max-width:var(--measure)}
.how-cta p.signup-note{font-size:14px;line-height:1.5}

/* -- dark: the two tint bands register by a hair on navy-ink (the §18 lesson) and the panels on them lift toward
      royal, so the figure stays lighter than its ground. One root per selector, never chained. -- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .how-head,
  :root:not([data-theme="light"]) .how-check{background:color-mix(in srgb,var(--v-navy-ink) 78%,var(--v-royal));border-color:var(--v-royal)}
  :root:not([data-theme="light"]) .how-run,
  :root:not([data-theme="light"]) .art-note,
  :root:not([data-theme="light"]) .art-card,
  :root:not([data-theme="light"]) .chain-old,
  :root:not([data-theme="light"]) .ladder li::before{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal));border-color:var(--line-strong)}
  :root:not([data-theme="light"]) .run-stages li i{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal))}
  :root:not([data-theme="light"]) .run-stages li.done i{background:var(--primary)}
  :root:not([data-theme="light"]) .ladder li.local::before{background:var(--v-mist);border-color:var(--v-mist)}
  :root:not([data-theme="light"]) .how-h1 em{color:var(--v-link);background-image:linear-gradient(var(--v-royal),var(--v-royal))}
  :root:not([data-theme="light"]) .run-done,
  :root:not([data-theme="light"]) .get-mark{background:color-mix(in srgb,var(--v-card) 42%,var(--v-royal));border-color:var(--v-royal)}
}
:root[data-theme="dark"] .how-head,
:root[data-theme="dark"] .how-check{background:color-mix(in srgb,var(--v-navy-ink) 78%,var(--v-royal));border-color:var(--v-royal)}
:root[data-theme="dark"] .how-run,
:root[data-theme="dark"] .art-note,
:root[data-theme="dark"] .art-card,
:root[data-theme="dark"] .chain-old,
:root[data-theme="dark"] .ladder li::before{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal));border-color:var(--line-strong)}
:root[data-theme="dark"] .run-stages li i{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal))}
:root[data-theme="dark"] .run-stages li.done i{background:var(--primary)}
:root[data-theme="dark"] .ladder li.local::before{background:var(--v-mist);border-color:var(--v-mist)}
:root[data-theme="dark"] .how-h1 em{color:var(--v-link);background-image:linear-gradient(var(--v-royal),var(--v-royal))}
:root[data-theme="dark"] .run-done,
:root[data-theme="dark"] .get-mark{background:color-mix(in srgb,var(--v-card) 42%,var(--v-royal));border-color:var(--v-royal)}

@media (forced-colors: active){
  .how-run,.art-note,.art-card,.run-done,.get-mark,.chain-old,.ladder li::before{border:1px solid CanvasText;background:Canvas;color:CanvasText}
  .run-stages li.done i,.chain-new,.run-done-k .ic{forced-color-adjust:none;background:Highlight;border-color:Highlight}
  .how-h1 em{background-image:none}
  .art-sections>li.art-drift{border:1px solid CanvasText}
  .cl{border:1px solid CanvasText}
}
@media (max-width:1023px){
  .how-head-in{grid-template-columns:minmax(0,1fr);gap:40px;max-width:760px}
  .get-row{grid-template-columns:minmax(0,1fr);gap:20px;padding:36px 0}
  .check-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .check-chain{grid-template-columns:minmax(0,1fr);gap:16px}
}
@media (max-width:640px){
  .how-act{padding:48px 16px}
  .how-head{padding:24px 16px 48px}
  .how-h1{font-size:clamp(28px,7vw,34px)}
  .how-lede{font-size:17px}
  .how-run{padding:18px 16px}
  .run-file{grid-template-columns:auto minmax(0,1fr) auto;gap:8px 10px}
  .run-deck{grid-row:1 / span 2}
  .run-name{grid-column:2;grid-row:1}
  .run-meta{grid-column:2;grid-row:2}
  .run-clock{grid-column:3;grid-row:1 / span 2}
  .keep>div{grid-template-columns:minmax(0,1fr)}
  .how-cta p{font-size:17px}
}

/* -- 31.1 · the lockup in the bar (owner, 2026-09-02): the Instagram identity — ECG trace, gold V, "erelect" in
      white — replaces the VERELECT outlines. 30px tall on the 60px bar; gold and white come from the tokens inside
      the SVG (rule 2's one gold control per page is about controls — the identity mark is not one). The old .wm
      rules stay for any placement still carrying the outlines. -- */
.wordmark-svg svg.wm-mark{height:30px;width:auto;overflow:visible}
.wordmark:hover svg.wm-mark,.wordmark:focus-visible svg.wm-mark{opacity:1}
@media (max-width:760px){.wordmark-svg svg.wm-mark{height:26px}}
@media (forced-colors: active){.wm-mark .wm-trace{stroke:CanvasText}.wm-mark .wm-v,.wm-mark .wm-word path{fill:CanvasText}}

/* ===== 32 · Build 55 (owner copy, 2026-09-03) · the hero's headline is a sentence with a turn — "Spend your
   medical school hours studying, / not making the things you study from." — so it is set as two blocks (§28.1's
   .h1-a / .h1-b, both at the headline's own size here) and the comma always ends a line; each block balances on
   its own. Twice the characters of Build 50's line, so the clamp steps down a size (40px at the top) and the
   copy column takes 48fr, and the paragraph that carries the desire — "the time to learn" under the mist band —
   goes up a size to 20px. The ask is one verb-led gold button, "Upload your first lecture free". Append-only;
   §30's rules are overridden here. ===== */
/* only where the columns exist: §30 stacks the hero under 1080px, and a bare rule here would undo that */
@media (min-width:1080px){
  .hero-in{grid-template-columns:minmax(0,48fr) minmax(0,52fr)}
}
.hero h1{font-size:clamp(30px,1.7vw+17px,40px);line-height:1.1;letter-spacing:-0.025em;text-wrap:balance}
.hero h1 .h1-a,.hero h1 .h1-b{display:block;font-size:1em;line-height:inherit;margin:0;text-wrap:balance}
.hero h1 .h1-b{margin-top:.12em}
.hero .hero-sub{font-size:20px;line-height:1.5;max-width:40ch}
/* the desire phrase is one object: it never turns inside itself, so it lands whole on its own line */
.hero .hero-sub mark{white-space:nowrap}
.hero .hero-act{margin-top:8px}
@media (max-width:1079px){
  .hero .hero-sub{max-width:none}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(28px,7vw,34px)}
  .hero .hero-sub{font-size:18px}
}


/* ===== 33 · Build 56 (owner brief, 2026-09-03) · the story below the hero — five beats, the call, the prices.
   One lecture (Year 3 renal) moves through the product: the chat the night before, in greys; the lecture, the
   upload and what comes back (three frames, the third the payoff); one question answered wrong and the way back
   to the note; the term filling day by day; and the exam — the one navy section on the site, rule 1 re-opened by
   the owner's brief for this beat alone. Then the hero's own gold button once more (rule 2's second gold, the
   owner's call) and two quiet tiers with one code field. Every beat is a headline and at most one line.
   Motion: each beat plays ONCE on arrival, gated on `story-js` (never set under reduced motion) and driven by
   story.js adding `.in` — the §31 grammar. Long moves are transitions; the pops are ≤300ms. Without the class
   every beat is its finished frame. Append-only; tokens throughout, no raw hex. ===== */

/* -- the beats: full-width bands with no gap between them, each re-inset to the reading frame -- */
main:has(>.hero)>.section.st-beat{margin:0;padding:72px 24px}
.st-in{display:grid;gap:28px;justify-items:center;text-align:center;max-width:var(--frame-n)}
.st-in-wide{max-width:1160px}
.st-h{font:600 clamp(28px,2vw + 14px,40px)/1.12 var(--display);letter-spacing:-0.02em;color:var(--v-heading);margin:0;text-wrap:balance;max-width:24ch}
.st-line{margin:-16px 0 0;font:400 19px/1.5 var(--sans);color:var(--ink-muted);text-wrap:balance;max-width:44ch}
/* a two-sentence headline breaks between the sentences, never inside one */
.st-h2{max-width:none}
.st-hl{display:block}

/* -- beat 1 · the chat: a phone in greys and off-white, the ordinary world -- */
.st-chat{margin:0;width:min(100%,360px);background:var(--surface-2);border:1px solid var(--line);border-radius:28px;padding:18px 14px 20px;display:grid;gap:14px}
.chat-head{display:grid;justify-items:center;gap:2px;padding:0 0 10px;border-bottom:1px solid var(--line)}
.chat-title{font:600 15px/1.3 var(--sans);color:var(--ink)}
.chat-time{font:400 12px/1.3 var(--mono);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.chat-msgs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.chat-msgs li{display:flex;align-items:flex-end;gap:8px}
.chat-msgs li.chat-me{justify-content:flex-end}
.chat-av{width:24px;height:24px;border-radius:50%;background:var(--line-strong);flex:none}
.chat-b{max-width:78%;padding:8px 12px;border-radius:16px;border-bottom-left-radius:4px;background:var(--surface);border:1px solid var(--line);font:400 15px/1.4 var(--sans);color:var(--ink);text-align:left}
.chat-me .chat-b{border-bottom-left-radius:16px;border-bottom-right-radius:4px;background:var(--line)}
.story-js .st-know:not(.in) .chat-msgs li{opacity:0;transform:translateY(8px)}
.story-js .st-know.in .chat-msgs li{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .35s var(--ease)}
.story-js .st-know.in .chat-msgs li:nth-child(2){transition-delay:.6s}
.story-js .st-know.in .chat-msgs li:nth-child(3){transition-delay:1.25s}
.story-js .st-know.in .chat-msgs li:nth-child(4){transition-delay:1.7s}
.story-js .st-know.in .chat-msgs li:nth-child(5){transition-delay:2.35s}

/* -- beat 2 · three frames in a row; each with its caption under it -- */
.st-frames{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%;align-items:stretch}
/* the visuals hang from the top, the three captions share one line at the bottom */
.st-frame{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;justify-items:center;min-width:0}
.st-frame>figure{margin:0;width:100%;min-width:0;align-self:start}
.st-cap{margin:0;font:600 17px/1.3 var(--sans);color:var(--v-heading)}
/* frame 1: the screen at the front of the hall, and the backs of six heads */
.st-slide{display:grid;gap:10px}
.slide-screen{position:relative;aspect-ratio:16/10;background:var(--diagram-ground);color:var(--diagram-ink);border:1px solid var(--line-strong);border-radius:var(--r);padding:16px 18px;display:grid;align-content:start;gap:12px;text-align:left;min-width:0}
.slide-title{margin:0;font:600 15px/1.3 var(--sans);color:var(--diagram-ink);text-wrap:balance}
.slide-lines{display:grid;gap:7px}
.slide-lines i{display:block;height:7px;border-radius:4px;background:color-mix(in srgb,var(--diagram-ink) 35%,transparent)}
.slide-lines i:nth-child(1){width:88%}
.slide-lines i:nth-child(2){width:72%}
.slide-lines i:nth-child(3){width:80%}
.slide-lines i:nth-child(4){width:54%}
.slide-n{position:absolute;right:12px;bottom:10px;font:500 11px/1 var(--mono);color:var(--diagram-ink)}
.slide-room{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:0 10px}
.slide-room i{display:block;height:16px;border-radius:8px 8px 3px 3px;background:var(--line)}
/* frame 2: a phone, the file above the zone; the zone takes the house "over" look once the file lands */
.st-phone{display:grid;justify-items:center}
.phone{width:min(100%,224px);min-height:250px;border:2px solid var(--line-strong);border-radius:26px;background:var(--surface);padding:12px 12px 16px;display:grid;grid-template-rows:auto 1fr;gap:12px;text-align:left}
.phone-top{display:flex;justify-content:space-between;font:600 12px/1 var(--sans);color:var(--ink-muted)}
.phone-app{color:var(--v-heading)}
.phone-clock{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.phone-drop{position:relative;display:grid;align-content:start;justify-items:center}
.phone-file{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font:500 12px/1.2 var(--mono);color:var(--ink);white-space:nowrap;transform:translateY(74px)}
.phone-file b{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.phone-file .dk{width:22px;height:18px;color:var(--primary);flex:none}
.phone-zone{margin-top:14px;width:100%;min-height:124px;border:1px solid var(--primary);border-radius:8px;background:var(--v-tint);display:grid;align-content:end;justify-items:center;padding:0 12px 12px;text-align:center;font:500 13px/1.3 var(--sans);color:var(--v-heading);
  transition:border-color .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
.story-js .st-flow:not(.in) .phone-file,.story-js .st-flow.in:not(.dropped) .phone-file{transform:none}
.story-js .st-flow.in .phone-file{transition:transform .5s cubic-bezier(.34,1.18,.64,1)}
.story-js .st-flow:not(.dropped) .phone-zone{border-style:dashed;border-color:var(--line-strong);background:var(--surface);color:var(--ink-muted)}
/* frame 3: the three things, as cards */
.st-outs{display:grid;gap:10px}
.st-card{background:var(--v-card);border:1px solid var(--v-border);border-radius:var(--r-lg);padding:14px 16px;text-align:left;display:grid;gap:10px;min-width:0}
.st-card-h{display:flex;align-items:center;gap:10px;font:600 16px/1.3 var(--sans);color:var(--ink)}
.st-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r);background:var(--v-tint);border:1px solid var(--v-mist);color:var(--primary);flex:none}
.st-mark svg{width:18px;height:18px;display:block}
.note-secs{margin:0;display:grid;gap:6px}
.note-secs>div{display:grid;gap:5px;padding:6px 8px;margin:0 -8px;border-radius:var(--r);border-left:2px solid transparent;transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.note-secs dt{font:600 13px/1.3 var(--sans);color:var(--v-subheading)}
.note-secs dd{margin:0;display:grid;gap:4px}
.note-secs dd i{display:block;height:6px;border-radius:3px;background:var(--surface-2)}
.note-secs dd i:nth-child(1){width:94%}
.note-secs dd i:nth-child(2){width:76%}
.note-secs dd i:nth-child(3){width:58%}
/* the way back from beat 3 lands here: the Management section lit, by the script or by the fragment alone */
.note-secs>div.hl,.st-note:target .note-secs>div[data-s="management"]{background:var(--v-tint);border-left-color:var(--primary)}
.st-note:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
/* the strip: two rows in the card's width; the divider stays in the text and out of the picture */
.st-guide{margin:2px 0 0;padding-top:10px;border-top:1px solid var(--line);display:grid;gap:4px;font:500 12px/1.4 var(--sans);color:var(--ink-muted)}
.st-guide-div{display:none}
.st-deck,.st-qs{grid-template-columns:auto minmax(0,1fr);align-items:center;font:600 15px/1.3 var(--sans);color:var(--ink)}
/* the frames arrive in order; the third's cards land together, fast, the strip stamped last */
.story-js .st-flow:not(.in) .st-frame{opacity:0;transform:translateY(14px)}
.story-js .st-flow.in .st-frame{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .4s var(--ease)}
.story-js .st-flow.in .st-frame[data-f="upload"]{transition-delay:.6s}
.story-js .st-flow.in .st-frame[data-f="learn"]{transition-delay:1.5s}
.story-js .st-flow:not(.in) .st-card{opacity:0;transform:translateY(18px) scale(.96)}
.story-js .st-flow.in .st-card{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .45s cubic-bezier(.22,1.2,.36,1)}
.story-js .st-flow.in .st-note{transition-delay:1.6s}
.story-js .st-flow.in .st-deck{transition-delay:1.72s}
.story-js .st-flow.in .st-qs{transition-delay:1.84s}
.story-js .st-flow:not(.in) .st-guide{opacity:0}
.story-js .st-flow.in .st-guide{opacity:1;transition:opacity .3s var(--ease) 2.15s}

/* -- beat 3 · the question: A chosen, marked wrong, and the link back -- */
.st-quiz{margin:0;width:100%;max-width:640px}
.st-qcard{padding:22px 24px;gap:16px}
.st-stem{margin:0;font:500 17px/1.5 var(--sans);color:var(--ink)}
.st-opts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.st-opts li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--v-card);font:400 15px/1.45 var(--sans);color:var(--ink);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease)}
.st-opts li::before{content:attr(data-l);font:600 13px/1 var(--mono);color:var(--ink-muted)}
.st-opts li.st-pick{border-color:var(--stop);box-shadow:inset 0 0 0 1px var(--stop)}
.st-x{display:grid;place-items:center;width:20px;height:20px;color:var(--stop)}
.st-x .ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.st-back{margin:0;font:500 16px/1.4 var(--sans)}
.story-js .st-q:not(.in) .st-quiz{opacity:0;transform:translateY(12px)}
.story-js .st-q.in .st-quiz{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .4s var(--ease)}
/* p1: A is chosen (the house selection look) · p2: it is marked wrong · p3: the way back appears */
.story-js .st-q:not(.p1) .st-opts li.st-pick{border-color:var(--line);box-shadow:none}
.story-js .st-q.p1:not(.p2) .st-opts li.st-pick{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);background:var(--v-tint)}
.story-js .st-q:not(.p2) .st-x{opacity:0;transform:scale(.6)}
.story-js .st-q.p2 .st-x{opacity:1;transform:none;transition:opacity .2s var(--ease),transform .3s cubic-bezier(.34,1.4,.64,1)}
.story-js .st-q:not(.p3) .st-back{opacity:0;transform:translateY(4px)}
.story-js .st-q.p3 .st-back{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}

/* -- beat 4 · the term: twenty weekdays, each filling the day its lecture lands -- */
.st-cal{margin:0;width:100%;max-width:640px;background:var(--v-card);border:1px solid var(--v-border);border-radius:var(--r-lg);padding:18px 20px 20px;display:grid;gap:12px;text-align:left}
.cal-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:500 14px/1.3 var(--sans);color:var(--ink-muted)}
.cal-streak{font-variant-numeric:tabular-nums;white-space:nowrap}
.cal-streak b{font:600 22px/1 var(--mono);color:var(--v-heading);margin-right:4px}
.cal-days,.cal-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.cal-days li{font:500 12px/1.3 var(--sans);color:var(--ink-muted);text-align:center}
.cal-day{position:relative;aspect-ratio:5/4;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);display:grid;place-items:center;overflow:hidden;
  transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.cal-n{position:absolute;left:7px;top:5px;font:500 11px/1 var(--mono);color:var(--ink-muted);transition:color .3s var(--ease)}
.cal-lec,.cal-outs{grid-area:1/1}
.cal-lec{opacity:0;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .3s var(--ease)}
.cal-lec .dk{width:26px;height:21px;color:var(--primary);display:block}
.cal-outs{display:flex;gap:4px}
.cal-outs i{display:block;width:8px;height:8px;border-radius:50%;background:var(--on-primary);transition:transform .3s cubic-bezier(.34,1.3,.64,1)}
.cal-outs i:nth-child(2){transition-delay:.05s}
.cal-outs i:nth-child(3){transition-delay:.1s}
.cal-day.done{background:var(--primary);border-color:var(--primary)}
.cal-day.done .cal-n{color:var(--on-primary)}
/* with the script the fill is withheld until each day is reached: the deck shows, then the day fills over it */
.story-js .st-term .cal-day.done:not(.fill){background:var(--surface);border-color:var(--line)}
.story-js .st-term .cal-day.done:not(.fill) .cal-n{color:var(--ink-muted)}
.story-js .st-term .cal-day.done:not(.fill) .cal-outs i{transform:scale(0)}
.story-js .st-term .cal-day.lec:not(.fill) .cal-lec{opacity:1;transform:none}
.story-js .st-term:not(.in) .st-cal{opacity:0;transform:translateY(12px)}
.story-js .st-term.in .st-cal{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .4s var(--ease)}

/* -- beat 5 · the exam: the one navy section; the sentence alone, the three tiles in a thin strip beneath -- */
main:has(>.hero)>.section.st-final{background:var(--v-navy);color:var(--v-on-navy);min-height:100svh;padding:0 24px;border-top:1px solid var(--v-royal)}
.st-final-in{min-height:100svh;grid-template-rows:1fr auto;gap:0;padding:64px 0 0;max-width:var(--frame)}
.st-final-h{color:var(--v-on-navy);font-size:clamp(34px,4.2vw + 10px,72px);line-height:1.06;letter-spacing:-0.03em;max-width:16ch;align-self:center}
.st-stats{list-style:none;margin:0;padding:22px 0 26px;width:100%;border-top:1px solid color-mix(in srgb,var(--v-mist) 35%,transparent);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.st-stats li{padding:10px 12px;border:1px solid color-mix(in srgb,var(--v-mist) 35%,transparent);border-radius:var(--r);font:500 14px/1.4 var(--mono);color:var(--v-mist);font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}
.story-js .st-final:not(.in) .st-final-h{opacity:0;transform:translateY(16px)}
.story-js .st-final.in .st-final-h{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.story-js .st-final:not(.in) .st-stats li{opacity:0;transform:translateY(6px)}
.story-js .st-final.in .st-stats li{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.story-js .st-final.in .st-stats li:nth-child(1){transition-delay:.9s}
.story-js .st-final.in .st-stats li:nth-child(2){transition-delay:1.05s}
.story-js .st-final.in .st-stats li:nth-child(3){transition-delay:1.2s}

/* -- the call: the hero's button, larger, and nothing else -- */
main:has(>.hero)>.section.st-cta{padding:64px 24px 32px}
.st-go{height:auto;min-height:56px;padding:14px 28px;font-size:clamp(17px,1.2vw + 10px,22px);line-height:1.2;white-space:normal;text-align:center;max-width:100%;text-wrap:balance}

/* -- the prices: two quiet tiers, the three months marked; one code field -- */
main:has(>.hero)>.section.st-price{padding:24px 24px 88px}
.st-price .st-in{gap:32px}
.st-tiers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:440px}
.st-tiers li{min-width:0}
.st-tier{position:relative;display:grid;gap:4px;justify-items:center;align-content:center;min-height:104px;padding:18px 12px;border:1px solid var(--v-border);border-radius:var(--r-lg);background:var(--v-card);color:var(--ink);text-decoration:none;
  transition:border-color .12s var(--ease),background-color .12s var(--ease)}
.st-tier:hover{border-color:var(--v-mist);background:var(--v-tint);color:var(--ink)}
.st-amt{font:500 29px/1 var(--mono);color:var(--v-heading);font-variant-numeric:tabular-nums}
.st-per{font:400 14px/1.3 var(--sans);color:var(--ink-muted)}
.st-best .st-tier{border-color:var(--v-mist);background:var(--v-tint)}
.st-tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:2px 10px;border-radius:var(--r-pill);background:var(--v-mist);color:var(--v-navy-ink);font:600 12px/1.4 var(--sans);white-space:nowrap}
.st-code{display:grid;gap:8px;width:100%;max-width:400px;justify-items:start;text-align:left}
.st-code-l{font:500 14px/1.4 var(--sans);color:var(--ink)}
.st-code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%}
.st-code-row input{height:44px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:0 12px;color:var(--ink);font:400 17px/1.4 var(--sans);min-width:0;transition:border-color .12s var(--ease)}
.st-code-row input:hover{border-color:var(--ink-muted)}
.st-code-row input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--v-link)}
.st-code-msg{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink)}
.st-code-msg:empty{display:none}

/* -- responsive: the frames stack under 900px; phones take one column of tiers and tiles -- */
@media (max-width:900px){
  .st-frames{grid-template-columns:minmax(0,1fr);max-width:440px;gap:36px}
}
@media (max-width:640px){
  main:has(>.hero)>.section.st-beat{padding:52px 16px}
  .st-h{font-size:clamp(26px,7vw,32px)}
  .st-line{font-size:17px}
  .st-final-h{font-size:clamp(32px,9vw,44px)}
  .st-final-in{padding-top:48px}
  .st-stats{grid-template-columns:minmax(0,1fr);gap:8px}
  .st-tiers{grid-template-columns:minmax(0,1fr)}
  .st-tier{min-height:84px;grid-template-columns:auto auto;justify-content:center;gap:10px;align-items:baseline}
  .st-best .st-tier{margin-top:8px}
  .st-code-row{grid-template-columns:minmax(0,1fr)}
  .cal-day{aspect-ratio:1/1}
  .st-cal{padding:14px 12px 16px}
  main:has(>.hero)>.section.st-cta{padding:48px 16px 24px}
  main:has(>.hero)>.section.st-price{padding:16px 16px 64px}
}

/* -- dark: cards on the tint bands barely lift from --v-card (the §18 lesson), so they take the royal mix -- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .st-card,:root:not([data-theme="light"]) .st-cal{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal));border-color:var(--line-strong)}
  :root:not([data-theme="light"]) .st-opts li,:root:not([data-theme="light"]) .cal-day{background:color-mix(in srgb,var(--v-card) 86%,var(--v-royal))}
  :root:not([data-theme="light"]) .cal-day.done{background:var(--primary);border-color:var(--primary)}
  :root:not([data-theme="light"]) .story-js .st-term .cal-day.done:not(.fill){background:color-mix(in srgb,var(--v-card) 86%,var(--v-royal));border-color:var(--line)}
  :root:not([data-theme="light"]) .note-secs dd i{background:color-mix(in srgb,var(--v-card) 30%,var(--v-royal))}
  :root:not([data-theme="light"]) .chat-b{background:color-mix(in srgb,var(--v-card) 80%,var(--v-royal))}
  :root:not([data-theme="light"]) .phone{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal))}
}
:root[data-theme="dark"] .st-card,:root[data-theme="dark"] .st-cal{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal));border-color:var(--line-strong)}
:root[data-theme="dark"] .st-opts li,:root[data-theme="dark"] .cal-day{background:color-mix(in srgb,var(--v-card) 86%,var(--v-royal))}
:root[data-theme="dark"] .cal-day.done{background:var(--primary);border-color:var(--primary)}
:root[data-theme="dark"] .story-js .st-term .cal-day.done:not(.fill){background:color-mix(in srgb,var(--v-card) 86%,var(--v-royal));border-color:var(--line)}
:root[data-theme="dark"] .note-secs dd i{background:color-mix(in srgb,var(--v-card) 30%,var(--v-royal))}
:root[data-theme="dark"] .chat-b{background:color-mix(in srgb,var(--v-card) 80%,var(--v-royal))}
:root[data-theme="dark"] .phone{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal))}
@media (forced-colors: active){
  .st-card,.st-opts li,.st-tier,.cal-day,.st-chat,.chat-b,.phone,.st-stats li{border:1px solid CanvasText;background:Canvas}
  .cal-day.done{background:Highlight}
  .st-x .ic{stroke:CanvasText}
}


/* ===== 34 · Build 57 (owner critique, 2026-09-03) · the story, second pass — and the calendar on /lectures.
   The owner's read of Build 56: the beats did not hit the desire. Headlines rewritten (the chat qualified, the
   question bank as the top student's, the exam as "Master the exam your medical school sets", the call as
   "Notes are finished. Focus on learning."); frame 1 becomes a lecture theatre (the screen at the front, rows of
   seats, one student); frame 2 gains the system selector above the drop zone; the deck and the questions are
   SHOWN (a cloze card, an A–E row) rather than named; the captions sit tight under their visuals; beat 4 mirrors
   the real calendar this build adds to /lectures (a month, Mon–Sun, ‹ ›); the best-value tier no longer reads
   as already selected; the society code gets its own tinted panel and one line. Append-only over §33; tokens
   throughout; the motion grammar unchanged (story-js, once, transitions). ===== */

/* -- captions tight under each visual again -- */
.st-frame{grid-template-rows:auto auto;align-content:start}

/* -- frame 1 · the lecture theatre: the screen at the front, three curved rows of seats, one of them yours -- */
.st-slide{gap:0}
.slide-screen{aspect-ratio:16/8;padding:14px 16px;gap:10px;border-radius:var(--r) var(--r) 2px 2px}
.theatre{display:grid;gap:7px;padding:12px 0 0;justify-items:center;border-top:2px solid var(--line-strong);margin-top:6px}
.theatre-row{display:flex;gap:6px;justify-content:center;width:var(--w);padding-top:8px}
.theatre-row:nth-child(1){--w:70%}
.theatre-row:nth-child(2){--w:84%}
.theatre-row:nth-child(3){--w:98%}
.theatre-row i{position:relative;display:block;flex:1;height:13px;border-radius:6px 6px 3px 3px;background:var(--line)}
.theatre-row i::after{content:"";position:absolute;left:50%;top:-8px;width:9px;height:9px;border-radius:50%;background:var(--line-strong);transform:translateX(-50%)}
.theatre-row i.you{background:var(--primary)}
.theatre-row i.you::after{background:var(--primary);width:11px;height:11px;top:-10px}
.slide-room{display:none}

/* -- frame 2 · the system is chosen before the file drops: the upload page's own segment, at phone size -- */
.phone{min-height:296px}
.phone-sys{display:flex;flex-wrap:wrap;gap:4px;width:100%;margin:0 0 10px}
.phone-sys i{font:500 10px/1 var(--sans);font-style:normal;color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r);padding:5px 7px;background:transparent;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.phone-sys i.on{background:var(--v-tint);border-color:var(--v-mist);color:var(--v-heading)}
.story-js .st-flow:not(.sys) .phone-sys i.on{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.phone-zone{min-height:104px}

/* -- frame 3 · the deck and the questions, shown: a cloze card on its stack, a question's A–E row -- */
.st-deck,.st-qs{grid-template-columns:minmax(0,1fr);gap:10px}
.deck-fan{position:relative;padding:8px 0 0 8px}
.deck-fan>i{position:absolute;inset:0 8px 8px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.deck-fan>i:nth-child(1){transform:translate(8px,-8px)}
.deck-fan>i:nth-child(2){transform:translate(4px,-4px)}
.deck-front{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--v-card);padding:10px 12px;font:400 13px/1.5 var(--sans);color:var(--ink)}
.deck-front .cl{background:var(--v-tint);border-radius:3px;padding:0 4px;color:var(--v-heading);font-weight:600}
.deck-front small{display:block;margin-top:6px;font:500 11px/1.3 var(--mono);color:var(--ink-muted)}
.qs-mini{display:grid;gap:6px}
.qs-mini>i{display:block;height:8px;border-radius:4px;background:var(--surface-2)}
.qs-mini>i:nth-child(1){width:92%}
.qs-mini>i:nth-child(2){width:64%}
.qs-opts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:2px}
.qs-opts b{display:grid;place-items:center;height:24px;border:1px solid var(--line);border-radius:var(--r);font:600 11px/1 var(--mono);color:var(--ink-muted)}
.qs-foot{display:flex;justify-content:space-between;gap:8px;font:500 11px/1.3 var(--mono);color:var(--ink-muted)}
.qs-foot span{white-space:nowrap}

/* -- beat 4 · a month, as /lectures shows it: seven columns, the weekends quiet, ‹ › either side of the month -- */
.cal-days,.cal-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-day{aspect-ratio:1/1}
.cal-day.pad{border-color:transparent;background:transparent}
.cal-day.we{background:var(--surface-2);border-color:transparent}
.cal-day.we .cal-n{color:var(--ink-muted)}
.cal-nav{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.cal-nav i{font-style:normal;font:500 16px/1 var(--sans);color:var(--ink-muted)}
.cal-nav b{font:600 15px/1.3 var(--sans);color:var(--v-heading)}
.cal-outs i{width:7px;height:7px;gap:3px}
@media (max-width:640px){
  .cal-n{left:5px;top:4px;font-size:10px}
  .cal-outs{gap:3px}
  .cal-outs i{width:6px;height:6px}
}

/* -- the prices: the best-value tier is marked, not pre-selected; hover fills either -- */
.st-best .st-tier{background:var(--v-card);border:2px solid var(--v-mist);padding:17px 11px}
.st-best .st-tier:hover{background:var(--v-tint)}
/* -- the society code: a tinted panel with one line above the field -- */
.st-code{max-width:520px;background:var(--v-tint);border:1px solid var(--v-mist);border-radius:var(--r-lg);padding:22px 24px;gap:10px}
.st-code-line{margin:0;font:500 18px/1.4 var(--sans);color:var(--v-heading);text-wrap:balance}
.st-code-l{color:var(--ink-muted)}
@media (max-width:640px){.st-code{padding:18px 16px}}

/* -- /lectures · the calendar: a month of your lectures, each on the day it was checked -- */
.lc{margin:0 0 32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px 18px;display:grid;gap:12px}
.lc-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.lc-m{grid-column:2;font:600 20px/1.3 var(--sans);color:var(--v-heading);margin:0;text-align:center}
.lc-nav .btn{grid-row:1;min-width:34px;padding:0 8px;font-size:18px}
.lc-nav .btn:first-child{grid-column:1}
.lc-nav .btn:last-of-type{grid-column:3}
.lc-count{grid-column:1 / -1;text-align:center;font:400 14px/1.4 var(--sans);color:var(--ink-muted)}
.lc-wd,.lc-cells{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.lc-wd li{font:500 12px/1.3 var(--sans);color:var(--ink-muted);text-align:center}
.lc-d{min-height:76px;border:1px solid var(--line);border-radius:var(--r);padding:4px 6px;display:grid;align-content:start;gap:3px;background:var(--surface);min-width:0}
.lc-d.pad{border-color:transparent;background:transparent}
.lc-d.has{background:var(--v-tint);border-color:var(--v-mist)}
.lc-n{font:500 11px/1 var(--mono);color:var(--ink-muted)}
.lc-d.today .lc-n{color:var(--v-heading);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.lc-lec{display:flex;align-items:center;gap:5px;font:500 12px/1.3 var(--sans);color:var(--ink);text-decoration:none;min-width:0}
.lc-lec:hover span{text-decoration:underline;text-underline-offset:2px}
.lc-lec span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);flex:none}
.lc-dot.run{background:var(--ink-muted)}
.lc-empty{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink-muted);text-align:center}
@media (max-width:640px){
  .lc{padding:12px 10px 14px}
  .lc-d{min-height:48px;padding:3px 4px;gap:2px}
  .lc-lec{gap:0}
  .lc-lec span{display:none}
  .lc-m{font-size:17px}
}
@media (forced-colors: active){
  .lc-d,.phone-sys i,.deck-front,.qs-opts b{border:1px solid CanvasText;background:Canvas}
  .lc-d.has{background:Highlight}
}


/* ===== 35 · Build 58 (owner brief, 2026-09-03) · beat 1 replaced — the desk, late.
   The group chat is withdrawn (CUTS.json B58). In its place one student at a desk at 23:47: a laptop open on a
   half-finished note with a caret mid-sentence, a word-processor toolbar, an Anki tab behind it reading 2,300
   due, a phone lying beside it, a printed handout mostly unhighlighted. Drawn in the theatre's grammar (§34 —
   flat shapes, the same silhouette) so the two read as one person; in greys and off-white with one warm desk-lamp
   tone (the accent, mixed down), and NO navy: navy returns with beat 2, so colour itself marks the way out.
   Motion (story.js, once, gated on `story-js`): a few words type, a line is deleted and retyped, then three
   thoughts above the student replace each other and settle as a stack; when beat 2 arrives the scene dims. The
   caret's blink is a class toggled by the script, not a keyframe — no new loop. Without the class: the finished
   note, the three thoughts stacked. Append-only; tokens throughout. ===== */

.desk{margin:0;width:min(100%,680px);display:grid;gap:0;position:relative}
/* the thoughts: above the scene, small and italic; stacked at rest */
.thoughts{list-style:none;margin:0 0 6px;padding:0 0 0 26%;display:grid;gap:4px;min-height:78px;align-content:end;justify-items:start;position:relative;z-index:1}
.thoughts li{font:italic 400 15px/1.45 var(--sans);font-synthesis:none;color:var(--ink-muted);text-align:left}
/* the scene: an off-white room lit from the top left */
.desk-scene{position:relative;height:300px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(ellipse 46% 52% at 16% 8%,color-mix(in srgb,var(--v-accent) 30%,transparent),transparent 100%),var(--surface-2)}
.lamp{position:absolute;left:8%;top:0;width:60px;height:96px}
.lamp-arm{position:absolute;left:29px;top:0;width:3px;height:70px;background:var(--line-strong);border-radius:0 0 2px 2px}
.lamp-shade{position:absolute;left:0;top:56px;width:60px;height:26px;border-radius:4px 4px 30px 30px;background:var(--ink-muted)}
.lamp-shade::after{content:"";position:absolute;left:8px;right:8px;bottom:-4px;height:6px;border-radius:0 0 22px 22px;background:color-mix(in srgb,var(--v-accent) 60%,var(--surface))}
/* the student, from behind — the theatre's silhouette, grey here */
.student{position:absolute;left:22%;bottom:-6px;width:190px;height:206px;transform:translateX(-50%);z-index:2}
.student .head{position:absolute;left:50%;top:0;width:58px;height:58px;border-radius:50%;background:var(--line-strong);transform:translateX(-50%)}
.student .body{position:absolute;left:0;top:54px;width:190px;height:160px;border-radius:90px 90px 0 0;background:var(--line-strong)}
/* the desk and what is on it */
.desk-top{position:absolute;left:0;right:0;bottom:0;height:64px;background:color-mix(in srgb,var(--line) 70%,var(--surface));border-top:2px solid var(--line-strong)}
.laptop{position:absolute;left:55%;bottom:52px;width:270px;transform:translateX(-50%)}
.laptop .screen{position:relative;height:166px;border:3px solid var(--ink-muted);border-bottom-width:6px;border-radius:8px 8px 4px 4px;background:var(--v-card);overflow:hidden;text-align:left;display:grid;grid-template-rows:auto auto minmax(0,1fr)}
.laptop .lid{height:8px;margin:0 -22px;border-radius:0 0 8px 8px;background:var(--ink-muted)}
.tabs{display:flex;gap:2px;padding:4px 6px 0;background:var(--surface-2);border-bottom:1px solid var(--line)}
.tab{font:500 9px/1 var(--sans);color:var(--ink-muted);padding:5px 8px;border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--surface-2) 60%,var(--line));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}
.tab.on{background:var(--v-card);color:var(--ink)}
.toolbar{display:flex;align-items:center;gap:5px;padding:4px 8px;border-bottom:1px solid var(--line);font:600 9px/1 var(--sans);color:var(--ink-muted)}
.toolbar b,.toolbar i,.toolbar u{width:12px;text-align:center}
.toolbar i{font-style:italic;font-synthesis:none}
.toolbar .tb{display:block;width:16px;height:7px;border-radius:2px;background:var(--line)}
.toolbar .tb.w{width:34px}
.doc{padding:6px 10px;display:grid;gap:3px;align-content:start;overflow:hidden}
.doc-t{margin:0;font:600 10px/1.3 var(--sans);color:var(--ink)}
.doc-l{margin:0;font:400 8.5px/1.4 var(--sans);color:var(--ink);text-align:left}
.doc-type{display:flex;align-items:baseline;gap:1px}
.caret{display:inline-block;width:1px;height:10px;background:var(--ink);vertical-align:-1px;margin-left:1px}
.story-js .caret{opacity:0}
.story-js .caret.on,.story-js .st-know.fin .caret{opacity:1}
.phone-flat{position:absolute;left:calc(50% + 262px);bottom:62px;width:40px;height:72px;border-radius:7px;background:var(--ink-muted);border:2px solid var(--line-strong);display:grid;place-items:center;transform:rotate(-6deg)}
.phone-flat span{font:500 9px/1 var(--mono);color:var(--line)}
.handout{position:absolute;left:calc(50% + 178px);bottom:58px;width:78px;height:100px;background:var(--v-card);border:1px solid var(--line);border-radius:2px;padding:10px 8px;display:grid;gap:5px;align-content:start;transform:rotate(4deg)}
.handout i{display:block;height:4px;border-radius:2px;background:var(--line);width:var(--w,100%)}
.handout i:nth-child(2){--w:88%}
.handout i:nth-child(4){--w:92%}
.handout i:nth-child(6){--w:70%}
.handout i.hi{background:color-mix(in srgb,var(--v-accent) 55%,var(--surface))}

/* -- motion: the thoughts replace each other, then settle; the scene dims once beat 2 has arrived -- */
.story-js .st-know:not(.fin) .thoughts li{opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease);grid-area:1/1}
.story-js .st-know:not(.fin) .thoughts{grid-template-rows:auto;align-content:end}
.story-js .st-know.t1:not(.t2) .thoughts li:nth-child(1),
.story-js .st-know.t2:not(.t3) .thoughts li:nth-child(2),
.story-js .st-know.t3:not(.fin) .thoughts li:nth-child(3){opacity:1;transform:none}
.story-js .st-know.fin .thoughts li{opacity:1;transform:none;transition:opacity .3s var(--ease)}
.story-js .st-know:not(.in) .desk-scene{opacity:0;transform:translateY(10px)}
.story-js .st-know.in .desk-scene{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .4s var(--ease)}
.story-js .st-know.in.past .desk-scene{opacity:.5;transition:opacity .6s var(--ease)}
.story-js .st-know.in.past .thoughts li{opacity:.5;transition:opacity .6s var(--ease)}

@media (max-width:640px){
  .thoughts{padding-left:8%;min-height:72px}
  .thoughts li{font-size:14px}
  .desk-scene{height:250px}
  .student{left:18%;width:120px;height:150px;bottom:-6px}
  .student .head{width:42px;height:42px}
  .student .body{top:38px;width:120px;height:120px}
  .laptop{left:57%;width:220px;bottom:48px}
  .laptop .screen{height:132px}
  .tabs,.toolbar{display:none}
  .doc-t{font-size:11px}
  .doc-l{font-size:9px}
  .handout{display:none}
  .phone-flat{left:auto;right:8px;width:34px;height:60px}
  .lamp{left:4%}
}
@media (forced-colors: active){
  .desk-scene,.laptop .screen,.handout,.phone-flat{border:1px solid CanvasText;background:Canvas}
}


/* ===== 36 · Build 59 (owner critique, 2026-09-03) · the desk without the student, ticks for finished days, and the
   prices as the close. The silhouette is withdrawn (it read as nobody) and the scene no longer dims — it stays in
   its full colour once played: the lamp on the left, the laptop and its typing in the middle, the handout and the
   phone on the right. Beat 3 reads "The top students in your year have a question bank written for them." Beat
   4's finished days carry the product's own tick (one per day) instead of three dots. The prices are the page's
   last ask, so each tier is a card with a verb-led button inside it — the recommended three months in navy (the
   §16/Build 40 ranking), the month secondary — and a visible heading above them. Append-only; tokens only. ===== */

/* -- beat 1: no student, no dim; the laptop centred, the paper and the phone to its right -- */
.student{display:none}
.story-js .st-know.in.past .desk-scene{opacity:1}
.story-js .st-know.in.past .thoughts li{opacity:1}
.laptop{left:50%}
.handout{left:calc(50% + 150px)}
.phone-flat{left:calc(50% + 240px)}
.thoughts{padding-left:30%}
@media (max-width:640px){
  .laptop{left:50%}
  .handout{display:none}
  .phone-flat{right:8px}
  .thoughts{padding-left:10%}
}

/* -- beat 4: a finished day carries one tick -- */
.cal-outs{display:none}
.cal-tick{grid-area:1/1;display:grid;place-items:center;width:24px;height:24px;color:var(--on-primary);transition:transform .3s cubic-bezier(.34,1.3,.64,1)}
.cal-tick .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.story-js .st-term .cal-day.done:not(.fill) .cal-tick{transform:scale(0)}
@media (max-width:640px){.cal-tick{width:18px;height:18px}.cal-tick .ic{width:15px;height:15px}}

/* -- the prices, as the close: a heading, two cards, a button in each -- */
.st-price .st-in{gap:24px}
.st-price-h{font:600 clamp(24px,2vw + 10px,32px)/1.2 var(--display);letter-spacing:-0.02em;color:var(--v-heading);margin:0;text-wrap:balance}
.st-tiers{max-width:680px;gap:16px}
.st-tier{padding:26px 22px 22px;min-height:0;gap:4px;border:1px solid var(--v-border);background:var(--v-card);transition:border-color .12s var(--ease),background-color .12s var(--ease)}
.st-tier:hover{background:var(--v-card);border-color:var(--primary)}
.st-best .st-tier,.st-best .st-tier:hover{background:var(--v-card);border:2px solid var(--primary);padding:25px 21px 21px}
.st-tag{background:var(--primary);color:var(--on-primary)}
.st-amt{font-size:40px}
.st-per{font-size:15px}
.st-tier-go{width:100%;margin-top:14px;height:auto;min-height:48px;padding:10px 14px;font-size:16px;line-height:1.2;white-space:normal;text-align:center}
.st-tier:hover .st-tier-go.primary{background:var(--primary-hover);border-color:var(--primary-hover)}
.st-tier:hover .st-tier-go.secondary{background:var(--v-tint)}
.st-tier:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (max-width:640px){
  .st-tiers{gap:12px}
  .st-tier,.st-best .st-tier{grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;min-height:0;margin-top:0}
  .st-best{margin-top:6px}
  .st-amt{font-size:34px}
}


/* ===== 37 · Build 60 (owner, 2026-09-03) · the right answer, shown; the Anki mark redrawn.
   Beat 3 now shows B in the product's verified green once A has been marked wrong (p3), and the way back follows
   (p4). _anki_mark.svg is Anki's own arrangement — a card, a large star low-left, a small star high-right — drawn
   flat in currentColor like every mark here. Append-only; tokens only. ===== */
.st-opts li.st-right{border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.st-ok{display:grid;place-items:center;width:20px;height:20px;color:var(--ok)}
.st-ok .ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.story-js .st-q:not(.p3) .st-opts li.st-right{border-color:var(--line);box-shadow:none}
.story-js .st-q:not(.p3) .st-ok{opacity:0;transform:scale(.6)}
.story-js .st-q.p3 .st-ok{opacity:1;transform:none;transition:opacity .2s var(--ease),transform .3s cubic-bezier(.34,1.4,.64,1)}
.story-js .st-q:not(.p4) .st-back{opacity:0;transform:translateY(4px)}
.story-js .st-q.p4 .st-back{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
@media (forced-colors: active){.st-ok .ic{stroke:CanvasText}}

/* ===== 38 · Build 61 (owner brief, 2026-09-03) · the upload flow as one vertical stepper.
   The first thing a paying student uses, rebuilt: four steps that reveal in order, each a hairline block with a
   number, a heading and one line; a finished step collapses to a summary line that reopens; the fourth step is
   the run itself, narrated from the server's own progress view, one line ticking after another; then the result —
   three cards that arrive in turn, each with a real preview and one action. The briefing dialog, the four boxes,
   the pre-flight bar and the note-structure selector are gone (structure is detected from the lecture; the check
   results still drive every state here). Markup: _upload_flow.html; script: upload-flow.js.

   Grammar kept: no cards inside cards, hairlines and numbers (§7), the §15I disc weights (filled = asking, ring =
   waiting) with the product's verified fill for done (rule 6: a status is a fill), the one gold on the page is
   the run button (rule 2), status is a word beside a dot, and motion is feedback — every animation ≤ .3s, none
   loops except the product's one pulsing dot, all of it off under reduced motion (§13). Tokens only.
   Appended only. ===== */

/* -- the block and the list -- */
#v-home .uf{margin:0 0 8px}
.uf-steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.uf-step{position:relative;border-top:1px solid var(--line);padding:22px 0 26px;display:grid;gap:18px}
.uf-step:first-child{border-top:0;padding-top:4px}
.uf-step[data-state="locked"]{padding-bottom:22px}
.uf-head{display:grid;grid-template-columns:34px minmax(0,1fr) auto;column-gap:16px;align-items:start}
.uf-hd{display:grid;gap:4px;min-width:0}
.uf-t{margin:0;font:600 22px/1.25 var(--display);color:var(--v-heading);letter-spacing:-0.01em}
.uf-hint{margin:0;font:400 15px/1.5 var(--sans);color:var(--ink-muted);max-width:52ch}
/* the number carries sequence: filled while it asks, a quiet ring while it waits, the verified fill once it is done */
.uf-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--line-blue);background:transparent;
  font:600 15px/1 var(--mono);color:var(--ink-muted);font-variant-numeric:tabular-nums;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.uf-step[data-state="open"] .uf-n{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.uf-step[data-state="done"] .uf-n{background:var(--v-verified);border-color:var(--v-verified);color:var(--v-on-status);font-size:0}
.uf-step[data-state="done"] .uf-n::after{content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") center / contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") center / contain no-repeat}
.uf-step[data-state="locked"] .uf-t{color:var(--ink-muted)}
.uf-step[data-state="locked"] .uf-hint{display:none}
.uf-step[data-state="done"] .uf-hint{display:none}
/* the body shows only while the step is open; a done step shows its summary in the head instead */
.uf-body{grid-column:1 / -1;display:none;padding-left:50px}
.uf-step[data-state="open"] .uf-body{display:block}
/* the brief: the drop zone is visible before a system exists, disabled and saying why */
#uf-2[data-state="locked"] .uf-body{display:block}
/* the run's lines stay as the record once it is done */
#uf-4[data-state="done"] .uf-body{display:block}
#uf-4[data-state="done"] .uf-hint{display:none}
.uf-step[data-state="done"] .uf-body{display:none}
.uf-sum{grid-column:2 / -1;grid-row:2;justify-self:start;display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:4px 0 0;padding:0;border:0;background:none;
  font:400 15px/1.5 var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.uf-sum[hidden]{display:none}
.uf-sum-v{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0}
.uf-sum-v i{font-style:normal;color:var(--ink-muted)}
.uf-sum-f{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.uf-sum-ic{font-size:18px;line-height:1}
.uf-sum-x{color:var(--v-link);font-size:14px}
.uf-sum:hover .uf-sum-x{color:var(--v-link-hover);text-decoration:underline;text-underline-offset:3px}
.uf-sum:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r)}
.uf-sum:disabled{cursor:default}
.uf-sum:disabled .uf-sum-x{display:none}
.uf-elapsed{grid-column:3;font:500 14px/1.5 var(--mono);color:var(--ink-muted);font-variant-numeric:tabular-nums;padding-top:4px}
.uf-elapsed[hidden]{display:none}

/* -- 1 · the tiles: large, tappable, one glyph and one word each; two columns on a phone -- */
.uf-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0;border-radius:var(--r-lg)}
.uf-tile{display:grid;justify-items:start;align-content:start;gap:10px;min-height:96px;padding:14px 14px 12px;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--v-card);
  color:var(--v-heading);cursor:pointer;text-align:left;font:600 15px/1.3 var(--sans);letter-spacing:0;
  transition:border-color .16s var(--ease),background-color .16s var(--ease),transform .12s var(--ease)}
.uf-tile-ic{font-size:26px;line-height:1;font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',var(--sans)}
.uf-tile-l{color:inherit}
.uf-tile:hover{border-color:var(--v-link)}
.uf-tile[aria-checked="true"]{background:var(--v-tint);border-color:var(--v-royal);outline:1px solid var(--v-royal);outline-offset:-2px}
.uf-tile:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.uf-tile[aria-checked="true"]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* the nudge: a drop on the locked zone points back at the tiles, once */
@keyframes uf-nudge{0%,100%{box-shadow:none}50%{box-shadow:inset 0 0 0 2px var(--primary)}}
.uf-tiles.nudge{animation:uf-nudge .3s var(--ease) 1}

/* -- 2 · the drop zone: visible from the start, disabled until a system exists, and says why -- */
.uf-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:212px;padding:32px 24px;text-align:center;
  border:1px dashed var(--v-mist);border-radius:var(--r-lg);background:var(--v-tint);color:var(--ink);cursor:pointer;
  outline:2px solid transparent;outline-offset:-2px;transition:border-color .18s var(--ease),background-color .18s var(--ease),outline-color .14s var(--ease)}
.uf-drop[hidden]{display:none}
.uf-drop-ic{display:block;width:40px;height:32px;color:var(--primary);margin-bottom:4px}
.uf-drop-ic svg{width:100%;height:100%}
.uf-drop-t{display:block;font:600 22px/1.25 var(--display);color:var(--v-heading);letter-spacing:-0.01em}
.uf-drop-r{display:block;font:400 15px/1.5 var(--sans);color:var(--ink-muted);max-width:40ch}
.uf-drop .uf-drop-btn{margin-top:10px;height:40px;padding:0 16px;border:1px solid var(--line-strong);background:var(--v-card);color:var(--v-heading);pointer-events:none}
.uf-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.uf-drop:hover{border-color:var(--v-link)}
.uf-drop.over{border-style:solid;outline-color:var(--v-link);background:var(--v-tint)}
.uf-drop:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.uf-drop.locked{background:var(--v-card);border-color:var(--line-strong);cursor:not-allowed}
.uf-drop.locked .uf-drop-ic{color:var(--v-unchecked)}
.uf-drop.locked .uf-drop-t{color:var(--ink-muted)}
.uf-drop.locked .uf-drop-r{color:var(--ink)}
.uf-drop.locked .uf-drop-btn{border-color:var(--line);color:var(--ink-muted);background:var(--surface-2)}
.uf-drop.locked:hover{border-color:var(--line-strong)}
/* the file in hand: one receipt row — the mark, the name, size and slide count, a thin bar, then the verdict -- */
.uf-file{display:grid;grid-template-columns:40px minmax(0,1fr) auto;column-gap:14px;row-gap:4px;align-items:center;padding:16px 18px;border:1px solid var(--v-mist);border-radius:var(--r-lg);background:var(--v-card)}
.uf-file[hidden]{display:none}
.uf-file-ic{grid-row:1 / span 2;width:40px;height:32px;color:var(--primary)}
.uf-file-ic svg{width:100%;height:100%}
.uf-file-n{grid-row:1;grid-column:2;font:600 16px/1.35 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.uf-file-m{grid-row:2;grid-column:2;display:flex;flex-wrap:wrap;gap:0 8px;font:400 13px/1.5 var(--mono);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.uf-file-m i{font-style:normal}
.uf-file-m b{color:var(--ink);font-weight:500}
.uf-file-x{grid-row:1 / span 2;grid-column:3;align-self:center}
.uf-bar{grid-column:2 / -1;display:block;height:2px;margin:6px 0 2px;background:var(--line);border-radius:1px;overflow:hidden}
.uf-bar[hidden]{display:none}
.uf-bar i{display:block;height:100%;width:0;background:var(--primary);transition:width .2s var(--ease)}
.uf-file-s{grid-column:2 / -1;margin:2px 0 0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.uf-file-s:empty{display:none}
.uf-file[data-state="ok"] .uf-file-s{color:var(--ink)}
.uf-file[data-state="stop"]{border-color:var(--v-conflict)}
.uf-file[data-state="stop"] .uf-file-s,.uf-file[data-state="net"] .uf-file-s{color:var(--attention)}
.uf-file[data-state="stop"] .uf-file-ic{color:var(--v-unchecked)}
.uf-file-s .btn.quiet{display:inline;height:auto;padding:0;font-size:14px}
/* the title and the date, one line each, then the way on */
.uf-meta{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px 16px;align-items:end;margin-top:14px}
.uf-meta[hidden]{display:none}
.uf-meta .field{font-size:13px;color:var(--ink-muted)}
.uf-meta .field input{height:42px;font-size:16px}
.uf-date input{width:16ch;min-width:0}
.uf-meta .uf-next{height:42px}

/* -- 3 · what comes back: three toggle cards, all on; one gold button -- */
.uf-outs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.uf-out{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) 24px;column-gap:12px;align-items:start;padding:14px 14px 14px 16px;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--v-card);cursor:pointer;
  transition:border-color .16s var(--ease),background-color .16s var(--ease)}
.uf-out input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.uf-out-ic{width:28px;height:28px;color:var(--primary);margin-top:2px}
.uf-out-ic svg{width:100%;height:100%}
.uf-out-b{display:grid;gap:3px;min-width:0}
.uf-out-b b{font:600 16px/1.35 var(--sans);color:var(--v-heading)}
.uf-out-b small{font:400 13px/1.45 var(--sans);color:var(--ink-muted)}
.uf-out-b small a{color:var(--v-link)}
.uf-out-tick{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--line-blue);background:transparent;color:transparent;transition:background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease)}
.uf-out-tick .ic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.uf-out:has(input:checked){background:var(--v-tint);border-color:var(--v-mist)}
.uf-out:has(input:checked) .uf-out-tick{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.uf-out:hover{border-color:var(--v-link)}
.uf-out:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.uf-out.off{cursor:not-allowed;border-color:var(--line);background:var(--surface)}
.uf-out.off .uf-out-ic{color:var(--v-unchecked)}
.uf-out.off .uf-out-b b{color:var(--ink-muted)}
.uf-out.off .uf-out-tick{border-color:var(--line)}
.uf-go{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:22px}
#v-home .uf-go .btn.go{min-width:240px;height:48px;font-size:18px}
.uf-go-sub{font:400 14px/1.5 var(--sans);color:var(--ink-muted);max-width:52ch}
.uf-go-sub:empty{display:none}
#v-home .uf #upmsg{margin-top:12px}

/* -- 4 · the run, one line at a time -- */
.uf-lines{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.uf-line{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;align-items:start;font:400 16px/1.5 var(--sans);color:var(--ink-muted)}
.uf-line-m{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);color:transparent;margin-top:0}
.uf-line-t{display:block;min-width:0}
.uf-line-t b{font-weight:600;color:var(--ink)}
.uf-line-t small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--ink-muted)}
.uf-line[data-state="now"]{color:var(--ink)}
.uf-line[data-state="now"] .uf-line-m{border-color:var(--v-mist);background:var(--v-tint)}
.uf-line[data-state="now"] .dot.now{width:8px;height:8px}
.uf-line[data-state="done"]{color:var(--ink)}
.uf-line[data-state="done"] .uf-line-m{background:var(--v-verified);border-color:var(--v-verified);color:var(--v-on-status)}
.uf-line-m .ic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.uf-line[data-state="skip"] .uf-line-m{border-color:var(--v-unchecked);color:var(--v-unchecked)}
.uf-dash{display:block;width:10px;height:2px;background:currentColor;border-radius:1px}
.uf-line[data-state="stop"] .uf-line-m{background:var(--v-conflict);border-color:var(--v-conflict);color:var(--v-on-status)}
.uf-line[data-state="wait"] .uf-line-t b{color:var(--ink-muted)}
@keyframes uf-settle{from{transform:scale(.6);opacity:.4}to{transform:none;opacity:1}}
@keyframes uf-rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.uf-line.just .uf-line-m{animation:uf-settle .3s var(--ease) 1}
.uf-line.new{animation:uf-rise .24s var(--ease) both}
/* the detected structure as a chip, and the way to change it — the options only when asked for */
.uf-detect{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:14px 0 0 36px}
.uf-detect[hidden]{display:none}
.uf-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill);background:var(--v-tint);border:1px solid var(--v-mist);font:500 14px/1.5 var(--sans);color:var(--v-heading)}
.uf-chip b{font-weight:600;color:inherit}
.uf-chip.unsure{background:var(--warn-tint);border-color:var(--v-updated);color:var(--ink)}
.uf-detect .btn.quiet{height:auto;padding:0 4px;font-size:14px}
.uf-det-opts{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.uf-det-opts small{flex-basis:100%;font:400 13px/1.5 var(--sans);color:var(--ink-muted);max-width:60ch}
.uf-reassure{display:flex;align-items:center;gap:8px;margin:14px 0 0 36px;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.uf-reassure[hidden]{display:none}
.uf-fail{margin-top:16px}
.uf-fail[hidden]{display:none}
.uf-fail-c{display:grid;justify-items:start;gap:8px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--v-card)}
.uf-fail-c b{font:600 17px/1.4 var(--sans);color:var(--v-heading)}
.uf-fail-c p{margin:0;font:400 15px/1.5 var(--sans);color:var(--ink);max-width:var(--measure-s)}
.uf-fail-c .msg{margin:0}

/* -- the result: the name, one line, three cards in turn, the calendar line, the way round again -- */
.uf-done{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.uf-done[hidden]{display:none}
.uf-done-t{margin:0;font:600 32px/1.15 var(--display);color:var(--v-heading);letter-spacing:-0.015em;text-wrap:balance}
.uf-done-t:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:var(--r)}
.uf-done-n{color:var(--ink)}
.uf-done-s{margin:8px 0 0;font:400 17px/1.5 var(--sans);color:var(--ink-muted)}
.uf-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:24px}
.uf-card{display:grid;align-content:start;gap:10px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--v-card);opacity:0;transform:translateY(8px);transition:opacity .28s var(--ease),transform .28s var(--ease)}
.uf-card.in{opacity:1;transform:none}
.uf-card-ic{width:28px;height:28px;color:var(--primary)}
.uf-card-ic svg{width:100%;height:100%}
.uf-card h3{margin:0;font:600 18px/1.3 var(--sans);color:var(--v-heading);letter-spacing:0}
.uf-heads{list-style:none;margin:2px 0 0;padding:0 0 0 12px;border-left:2px solid var(--v-mist);display:grid;gap:6px}
.uf-heads li{font:600 15px/1.4 var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uf-heads li.uf-head-wait{font-weight:400;color:var(--ink-muted)}
.uf-strip{margin:0;font:400 12px/1.6 var(--mono);color:var(--ink-muted);overflow-wrap:anywhere}
.uf-strip i{font-style:normal;color:var(--v-mist)}
.uf-strip-f{color:var(--v-link);font-family:var(--sans);font-size:13px;white-space:nowrap}
.uf-count{margin:0;font:400 15px/1.4 var(--sans);color:var(--ink-muted)}
.uf-count b{font:600 32px/1.1 var(--display);color:var(--v-heading);font-variant-numeric:tabular-nums;margin-right:4px}
.uf-card-p{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.uf-card-a{display:grid;justify-items:start;gap:6px;margin-top:auto;padding-top:6px}
.uf-card-a .btn{height:40px;padding:0 16px;font-size:15px}
.uf-card-a .btn[aria-disabled="true"]{background:var(--surface-2);border-color:var(--surface-2);color:var(--ink-muted);pointer-events:none}
.uf-card-f{font:400 13px/1.5 var(--sans);color:var(--ink-muted)}
.uf-card-f a{color:var(--v-link)}
.uf-added{margin:22px 0 0;font:400 15px/1.5 var(--sans)}
.uf-added a{color:var(--v-link)}
.uf-done-a{margin-top:16px}

/* -- dark: cards on navy-ink barely lift from --v-card (the §18 lesson), so the objects mix toward link -- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .uf-tile,:root:not([data-theme="light"]) .uf-out,:root:not([data-theme="light"]) .uf-file,:root:not([data-theme="light"]) .uf-card,:root:not([data-theme="light"]) .uf-fail-c,:root:not([data-theme="light"]) .uf-drop.locked{background:color-mix(in srgb,var(--v-card) 84%,var(--v-link));border-color:var(--line-strong)}
  :root:not([data-theme="light"]) .uf-drop{background:color-mix(in srgb,var(--v-card) 70%,var(--v-royal));border-color:var(--v-royal)}
  :root:not([data-theme="light"]) .uf-tile[aria-checked="true"],:root:not([data-theme="light"]) .uf-out:has(input:checked){background:color-mix(in srgb,var(--v-card) 62%,var(--v-royal));border-color:var(--v-mist);outline-color:var(--v-mist)}
  :root:not([data-theme="light"]) .uf-tile-ic{filter:none}
}
:root[data-theme="dark"] .uf-tile,:root[data-theme="dark"] .uf-out,:root[data-theme="dark"] .uf-file,:root[data-theme="dark"] .uf-card,:root[data-theme="dark"] .uf-fail-c,:root[data-theme="dark"] .uf-drop.locked{background:color-mix(in srgb,var(--v-card) 84%,var(--v-link));border-color:var(--line-strong)}
:root[data-theme="dark"] .uf-drop{background:color-mix(in srgb,var(--v-card) 70%,var(--v-royal));border-color:var(--v-royal)}
:root[data-theme="dark"] .uf-tile[aria-checked="true"],:root[data-theme="dark"] .uf-out:has(input:checked){background:color-mix(in srgb,var(--v-card) 62%,var(--v-royal));border-color:var(--v-mist);outline-color:var(--v-mist)}

/* -- motion: the body of a step rises in when it opens; nothing performs on load -- */
@media (prefers-reduced-motion: no-preference){
  .uf-step[data-state="open"] .uf-body{animation:uf-rise .24s var(--ease) both}
  .uf-tile:active{transform:scale(.985)}
}

/* -- small screens: two tiles a row, the head stacks its summary, the fields stack -- */
@media (max-width:640px){
  .uf-step{padding:18px 0 22px;gap:14px}
  .uf-head{grid-template-columns:30px minmax(0,1fr);column-gap:12px}
  .uf-n{width:30px;height:30px;font-size:14px}
  .uf-t{font-size:20px}
  .uf-body{padding-left:0}
  .uf-sum{grid-column:2}
  .uf-elapsed{grid-column:2;grid-row:2;padding-top:0}
  .uf-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .uf-tile{min-height:84px;padding:12px}
  .uf-drop{min-height:180px;padding:24px 16px}
  .uf-drop-t{font-size:20px}
  .uf-file{grid-template-columns:32px minmax(0,1fr);padding:14px}
  .uf-file-ic{width:32px;height:26px}
  .uf-file-x{grid-row:auto;grid-column:2;justify-self:start;padding-left:0}
  .uf-meta{grid-template-columns:1fr}
  .uf-date input{width:100%}
  #v-home .uf-go .btn.go{width:100%;min-width:0}
  .uf-detect,.uf-reassure{margin-left:0}
  .uf-done-t{font-size:26px}
  .uf-cards{grid-template-columns:1fr}
}
@media (forced-colors: active){
  .uf-tile,.uf-out,.uf-file,.uf-card,.uf-drop,.uf-line-m,.uf-out-tick,.uf-n{border:1px solid CanvasText;background:Canvas}
  .uf-tile[aria-checked="true"],.uf-out:has(input:checked){background:Highlight;color:HighlightText}
  .uf-step[data-state="done"] .uf-n::after{background:CanvasText}
  .uf-bar i{background:Highlight}
}

/* ===== 39 · Build 62 (owner copy, 2026-09-03) · the hero headline names the three outputs in one sentence, so it
   is one block again (no .h1-a/.h1-b), with the house accent on the source; under it a subheading line —
   "By Medical students For Medical Students | Master Your Medical Degree" — set small, semibold, in the accent
   colour, the bar muted; Build 55's paragraph keeps its place and size. Append-only. ===== */
.hero .hero-kicker{font:600 16px/1.4 var(--sans);color:var(--hero-em);margin:-6px 0 0;letter-spacing:0;text-wrap:pretty}
.hero .hero-kicker .sep{color:var(--ink-muted);font-weight:400;margin:0 .35em}
@media (max-width:640px){
  .hero .hero-kicker{font-size:15px}
}

/* ===== 40 · Build 63 (owner brief, 2026-09-03) · the pricing page, standalone. The visitor has decided; the page
   makes paying feel obvious and safe: headline, one line, two cards (the term card marked), one anchor line,
   three safeties in a row (the third is the society-code field), a navy band with the end result, the close.
   Built from the system's own parts — the story's tier card (§33), the strip, the tick glyph, the buttons — with
   main.pp laid out act by act the way main.hiw is (§31). Rule 2: the page's one gold is the term card's button;
   the month is a secondary, the close a navy primary. Nothing counts down, nothing is scarce. Append-only. ===== */
main.pp{max-width:none;padding:0 0 96px}
.pp-act{padding:0 24px}
.pp-in{max-width:var(--frame-n);margin:0 auto}
.pp-head{padding-top:56px;padding-bottom:40px}
.pp-head .pp-in{display:grid;gap:12px;justify-items:start}
.pp-head .eyebrow{margin:0}
.pp-h1{font:600 clamp(30px,2.4vw + 12px,44px)/1.1 var(--display);letter-spacing:-0.025em;color:var(--v-heading);margin:0;max-width:18ch;text-wrap:balance}
.pp-sub{font:400 19px/1.5 var(--sans);color:var(--ink-muted);margin:0;max-width:44ch;text-wrap:pretty}
.pp-state{margin-top:12px}
.pp-state a{margin-left:0}
/* the two cards: equal columns, the term card marked by a border and its tag, both stacked under 720px */
.pp-plans-act{padding-bottom:24px}
.pp-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.pp-plan{position:relative;display:grid;gap:10px;align-content:start;padding:28px 26px 26px;border:1px solid var(--v-border);border-radius:var(--r-lg);background:var(--v-card);color:var(--ink);transition:border-color .12s var(--ease)}
.pp-plan:hover{border-color:var(--primary)}
.pp-best{border:2px solid var(--v-mist);padding:27px 25px 25px}
.pp-tag{position:absolute;top:-12px;left:24px;padding:3px 10px;border-radius:var(--r-pill);background:var(--v-mist);color:var(--v-navy-ink);font:600 12px/1.4 var(--sans);white-space:nowrap}
.pp-k{font:600 15px/1.4 var(--sans);letter-spacing:0;color:var(--ink-muted);margin:0}
.pp-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0}
.pp-amt{font:500 36px/1 var(--mono);color:var(--v-heading);font-variant-numeric:tabular-nums}
.pp-amt .pp-was{color:var(--ink-muted);font-size:.62em;text-decoration-thickness:2px}
.pp-amt .pp-now{color:var(--v-heading)}
.pp-per{font:400 15px/1.3 var(--sans);color:var(--ink-muted)}
.pp-line{margin:0;font:400 16px/1.5 var(--sans);color:var(--ink)}
.pp-gets{list-style:none;margin:6px 0 4px;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:8px}
.pp-gets li{display:flex;gap:10px;align-items:flex-start;font:400 16px/1.45 var(--sans);color:var(--ink)}
.pp-gets .ic,.pp-ic .ic{width:18px;height:18px;flex:none;margin-top:3px;fill:none;stroke:var(--primary);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pp-go{margin-top:8px;justify-self:start}
.pp-anchor{margin:20px 0 0;text-align:center;font:400 15px/1.5 var(--sans);color:var(--ink-muted)}
/* three safeties in a row; the third carries the code field and takes the width it needs */
.pp-safe-act{padding-top:24px;padding-bottom:56px}
.pp-safe{list-style:none;margin:0;padding:22px 24px;display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:20px 32px;align-items:start;border:1px solid var(--v-mist);border-radius:var(--r-lg);background:var(--v-tint)}
.pp-safe-i{display:flex;gap:10px;align-items:flex-start;font:500 16px/1.45 var(--sans);color:var(--v-heading);min-width:0;padding-top:10px}
.pp-safe-code{padding-top:0}
.pp-safe-code .pp-ic{padding-top:10px}
.pp-code{display:grid;gap:8px;width:100%;max-width:420px;justify-items:start}
.pp-code-l{font:500 16px/1.45 var(--sans);color:var(--v-heading);padding-top:10px}
.pp-code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%}
.pp-code-row input{height:44px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:0 12px;color:var(--ink);font:400 17px/1.4 var(--sans);min-width:0;transition:border-color .12s var(--ease)}
.pp-code-row input:hover{border-color:var(--ink-muted)}
.pp-code-row input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--v-link)}
.pp-code-row input::placeholder{color:var(--ink-muted);opacity:.7}
.pp-code-msg{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink)}
.pp-code-msg:empty{display:none}
.pp-code-msg.is-err{color:var(--v-conflict)}
/* the end result: the story's navy band (§33), one sentence */
.pp-final{background:var(--v-navy);color:var(--v-on-navy);padding:88px 24px;border-top:1px solid var(--v-royal);border-bottom:1px solid var(--v-royal)}
.pp-final-h{margin:0 auto;max-width:20ch;text-align:center;font:600 clamp(30px,3.2vw + 10px,52px)/1.1 var(--display);letter-spacing:-0.03em;color:var(--v-on-navy);text-wrap:balance}
/* the close: one button, one small line */
.pp-close{padding-top:64px}
.pp-close .pp-in{display:grid;gap:14px;justify-items:center;text-align:center}
.pp-built{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
@media (max-width:899px){
  .pp-safe{grid-template-columns:1fr 1fr}
  .pp-safe-code{grid-column:1 / -1}
}
@media (max-width:719px){
  .pp-plans{grid-template-columns:1fr}
  .pp-safe{grid-template-columns:1fr;gap:14px;padding:18px 18px}
  .pp-safe-i{padding-top:0}
  .pp-safe-code .pp-ic,.pp-code-l{padding-top:0}
  .pp-head{padding-top:40px;padding-bottom:28px}
  .pp-final{padding:64px 20px}
  .pp-close .pp-in{justify-items:stretch}
  .pp-close-go{text-align:center;white-space:normal;height:auto;min-height:44px;padding-top:10px;padding-bottom:10px;line-height:1.3}
}
@media (forced-colors: active){
  .pp-tag{border:1px solid CanvasText}
  .pp-best{border-color:CanvasText}
}
@media (prefers-reduced-motion: reduce){
  .pp-plan,.pp-code-row input{transition:none}
}


/* ===== 41 · Build 64 (owner brief, 2026-09-03) · how it works, rebuilt as the page that turns a curious visitor into
   a buyer. Eleven sections, each a headline, at most one line, and a visual that proves it — no paragraphs. One
   lecture (Year 3 Renal — AKI) runs through every visual, drawn from the product's own parts: the story's headline
   and line (§33), the theatre (§34), the upload stepper (§38), the run's progress lines (§38), the note card, the
   question card, the calendar and the stat tiles (§33–37), the pricing page's navy band (§40). Rule 1 (no navy
   section) is re-opened here for the tenth section, as the owner's brief re-opened it for the landing and the
   pricing page; rule 2 holds — the page's one gold is the close. Motion: each section plays ONCE on arrival, gated
   on `how-js` (never set under reduced motion) and driven by how.js adding `.in` (and phase classes) — the §33
   grammar; the third section is a short loop by the brief, parked whenever nobody is watching (the §17C rule).
   Long moves are transitions, pops ≤300ms, no keyframe. Without the class every section is its finished frame.
   Append-only; tokens throughout, no raw hex. Build 54's §31 rules stay for the sheet's history; nothing here
   reaches them (the markup no longer carries .how-*). ===== */

/* -- the sections: full-width bands, each re-inset to the reading frame; alternate ones on the tint -- */
main.hiw>.hw-act{padding:72px 24px}
main.hiw>.hw-head{padding:56px 24px 64px}
.hw-tint{background:var(--v-tint);border-top:1px solid var(--v-mist);border-bottom:1px solid var(--v-mist)}
.hw-tint+.hw-tint{border-top:0}
.hw-in{display:grid;gap:28px;justify-items:center;text-align:center;max-width:var(--frame-n);margin:0 auto}
.hw-in-wide{max-width:1160px}
.hw-h1{font:600 clamp(32px,2.6vw + 14px,52px)/1.08 var(--display);letter-spacing:-0.025em;color:var(--v-heading);margin:0;text-wrap:balance;max-width:20ch}
.hw-line{margin:-16px 0 0}
.hw-act figure{margin:0;width:100%}
.hw-small{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink-muted)}

/* -- 1 · the timeline: four nodes on one line; the line grows to each node and the node lights, in order -- */
.hw-tl-f{max-width:760px}
.hw-tl{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
.hw-tl li{position:relative;display:grid;justify-items:center;gap:12px;min-width:0}
.hw-tl li::before{content:"";position:absolute;left:-50%;right:50%;top:9px;height:2px;background:var(--line);z-index:0}
.hw-tl li:first-child::before{display:none}
.hw-tl li::after{content:"";position:absolute;left:-50%;right:50%;top:9px;height:2px;background:var(--primary);transform-origin:left center;z-index:0}
.hw-tl li:first-child::after{display:none}
.hw-node{position:relative;z-index:1;display:block;width:20px;height:20px;border-radius:50%;border:2px solid var(--primary);background:var(--primary);box-shadow:0 0 0 4px var(--v-page);
  transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.hw-tl span{font:600 14px/1.3 var(--sans);color:var(--v-heading);text-align:center;text-wrap:balance;padding:0 4px;transition:color .3s var(--ease)}
.how-js .hw-head:not(.in) .hw-tl li::after{transform:scaleX(0)}
.how-js .hw-head.in .hw-tl li::after{transform:none;transition:transform .5s var(--ease)}
.how-js .hw-head:not(.in) .hw-node{background:var(--v-page);border-color:var(--line-strong)}
.how-js .hw-head:not(.in) .hw-tl span{color:var(--ink-muted)}
.how-js .hw-head.in .hw-tl li:nth-child(2)::after{transition-delay:.35s}
.how-js .hw-head.in .hw-tl li:nth-child(3)::after{transition-delay:1s}
.how-js .hw-head.in .hw-tl li:nth-child(4)::after{transition-delay:1.65s}
.how-js .hw-head.in .hw-tl li:nth-child(1) .hw-node,.how-js .hw-head.in .hw-tl li:nth-child(1) span{transition-delay:.15s}
.how-js .hw-head.in .hw-tl li:nth-child(2) .hw-node,.how-js .hw-head.in .hw-tl li:nth-child(2) span{transition-delay:.8s}
.how-js .hw-head.in .hw-tl li:nth-child(3) .hw-node,.how-js .hw-head.in .hw-tl li:nth-child(3) span{transition-delay:1.45s}
.how-js .hw-head.in .hw-tl li:nth-child(4) .hw-node,.how-js .hw-head.in .hw-tl li:nth-child(4) span{transition-delay:2.1s}
.how-js .hw-head:not(.in) .hw-h1,.how-js .hw-head:not(.in) .hw-line{opacity:0;transform:translateY(10px)}
.how-js .hw-head.in .hw-h1,.how-js .hw-head.in .hw-line{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .45s var(--ease)}
.how-js .hw-head.in .hw-line{transition-delay:.12s}

/* -- 2 · the hall: the §34 theatre at reading width, the clock in its corner -- */
.hw-hall{position:relative;max-width:560px}
.hw-hall .st-slide{width:100%}
.hw-clock{position:absolute;right:12px;top:12px;display:grid;gap:2px;padding:8px 12px;border-radius:var(--r);background:var(--v-card);border:1px solid var(--line);
  font:500 12px/1.4 var(--mono);color:var(--ink-muted);text-align:left;font-variant-numeric:tabular-nums}
.hw-clock b{font-weight:600;color:var(--v-heading)}
.how-js .hw-listen:not(.in) .st-slide{opacity:0;transform:translateY(12px)}
.how-js .hw-listen.in .st-slide{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .4s var(--ease)}
.how-js .hw-listen:not(.in) .hw-clock{opacity:0;transform:translateY(-6px)}
.how-js .hw-listen.in .hw-clock{opacity:1;transform:none;transition:opacity .3s var(--ease) .7s,transform .3s var(--ease) .7s}

/* -- 3 · the stepper: the upload page's own parts (§38) as a picture, both steps open at once -- */
.hw-up{max-width:640px;text-align:left}
.hw-uf{width:100%;padding:20px 24px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--v-card);transition:opacity .3s var(--ease)}
.hw-uf .uf-body{display:block;position:relative}
.hw-uf .uf-step{padding:18px 0 20px}
.hw-uf .uf-step:first-child{padding-top:0}
.hw-uf .uf-t{font-size:19px}
.hw-uf .uf-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hw-uf .uf-tile{min-height:0;padding:10px 10px 9px;font-size:13px;gap:6px}
.hw-uf .uf-tile-ic{font-size:20px}
.hw-uf .uf-sum{cursor:default}
.hw-uf .uf-sum .uf-sum-x{color:var(--v-link)}
.hw-drop{display:none;min-height:150px;padding:20px 20px}
.hw-drop .uf-drop-t{font-size:18px}
.hw-drop .uf-drop-r{font-size:13px}
.hw-file .uf-bar i{width:100%}
.hw-fly{position:absolute;left:50%;top:50%;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--v-mist);border-radius:var(--r);background:var(--v-card);
  font:500 13px/1.2 var(--mono);color:var(--ink);white-space:nowrap;opacity:0;transform:translate(-50%,-150%);pointer-events:none}
.hw-fly .uf-file-ic{width:28px;height:22px;color:var(--primary)}
.hw-fly .uf-file-ic svg{width:100%;height:100%;display:block}
.hw-fly b{font-weight:500}
/* with the script: before the system exists step 1 asks and step 2 waits; then the file flies; then the receipt */
.how-js .hw-up:not(.p-sys) .hw-s1 .uf-n{background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-size:15px}
.how-js .hw-up:not(.p-sys) .hw-s1 .uf-n::after{display:none}
.how-js .hw-up:not(.p-sys) .hw-sum{opacity:0}
.hw-sum{transition:opacity .25s var(--ease)}
.how-js .hw-up:not(.p-sys) .hw-tile-on{background:var(--v-card);border-color:var(--line-strong);outline:0}
.how-js .hw-up:not(.p-sys) .hw-s2 .uf-n{background:transparent;border-color:var(--line-blue);color:var(--ink-muted)}
.how-js .hw-up:not(.p-sys) .hw-s2 .uf-t{color:var(--ink-muted)}
.how-js .hw-up:not(.p-got) .hw-drop{display:flex}
.how-js .hw-up:not(.p-got) .hw-file{display:none}
.how-js .hw-up:not(.p-sys) .hw-drop{background:var(--v-card);border-color:var(--line-strong)}
.how-js .hw-up:not(.p-sys) .hw-drop .uf-drop-ic{color:var(--v-unchecked)}
.how-js .hw-up:not(.p-sys) .hw-drop .uf-drop-t{color:var(--ink-muted)}
.how-js .hw-up.p-file:not(.p-got) .hw-fly{opacity:1;transform:translate(-50%,-50%);transition:opacity .2s var(--ease),transform .55s cubic-bezier(.34,1.18,.64,1)}
.how-js .hw-up.p-file:not(.p-got) .hw-drop{border-style:solid;outline-color:var(--v-link)}
.how-js .hw-up.hw-fade .hw-uf{opacity:0}
.how-js .hw-upload:not(.in) .hw-up{opacity:0;transform:translateY(12px)}
.how-js .hw-upload.in .hw-up{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .4s var(--ease)}

/* -- 4 · the run: three of the panel's lines (§38), ticking in order; the chip arrives with its line -- */
.hw-run{max-width:640px;text-align:left}
.hw-run .uf-step{padding:0}
.hw-run .uf-lines{gap:14px}
.hw-run .uf-line{font-size:17px}
.hw-run .uf-line .dot{display:none}
.hw-run .uf-chip{vertical-align:2px;font-size:14px;padding:2px 10px}
.hw-run .uf-elapsed{padding-top:6px}
/* waiting: muted, an empty ring · now: the tinted ring and the one pulsing dot · done: the verified fill (markup) */
.how-js .hw-read:not(.r1) .uf-line:nth-child(1),.how-js .hw-read:not(.r2) .uf-line:nth-child(2),.how-js .hw-read:not(.r3) .uf-line:nth-child(3){color:var(--ink-muted)}
.how-js .hw-read:not(.r1) .uf-line:nth-child(1) b,.how-js .hw-read:not(.r2) .uf-line:nth-child(2) b,.how-js .hw-read:not(.r3) .uf-line:nth-child(3) b{color:var(--ink-muted)}
.how-js .hw-read:not(.r1) .uf-line:nth-child(1) .uf-line-m,.how-js .hw-read:not(.r2) .uf-line:nth-child(2) .uf-line-m,.how-js .hw-read:not(.r3) .uf-line:nth-child(3) .uf-line-m{background:transparent;border-color:var(--line);color:transparent}
.how-js .hw-read:not(.r2) .uf-line:nth-child(1) .ic,.how-js .hw-read:not(.r3) .uf-line:nth-child(2) .ic,.how-js .hw-read:not(.r4) .uf-line:nth-child(3) .ic{display:none}
.how-js .hw-read:not(.r2) .uf-line:nth-child(1) .uf-line-m,.how-js .hw-read:not(.r3) .uf-line:nth-child(2) .uf-line-m,.how-js .hw-read:not(.r4) .uf-line:nth-child(3) .uf-line-m{background:transparent;border-color:var(--line)}
.how-js .hw-read.r1:not(.r2) .uf-line:nth-child(1) .uf-line-m,.how-js .hw-read.r2:not(.r3) .uf-line:nth-child(2) .uf-line-m,.how-js .hw-read.r3:not(.r4) .uf-line:nth-child(3) .uf-line-m{border-color:var(--v-mist);background:var(--v-tint);color:var(--primary)}
.how-js .hw-read.r1:not(.r2) .uf-line:nth-child(1) .dot,.how-js .hw-read.r2:not(.r3) .uf-line:nth-child(2) .dot,.how-js .hw-read.r3:not(.r4) .uf-line:nth-child(3) .dot{display:block;width:8px;height:8px}
.hw-run .uf-line-m{transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.hw-run .uf-line{transition:color .25s var(--ease)}
.how-js .hw-read:not(.r2) .uf-chip{opacity:0}
.how-js .hw-read.r2 .uf-chip{opacity:1;transition:opacity .3s var(--ease)}
.how-js .hw-read:not(.in) .hw-run{opacity:0;transform:translateY(12px)}
.how-js .hw-read.in .hw-run{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .4s var(--ease)}

/* -- 5 · the check: the note beside two dated sources, the one differing line lit in all three -- */
.hw-cmp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:start;text-align:left}
.hw-note{gap:12px}
.hw-lines{display:grid;gap:6px}
.hw-lines span{display:block;font:400 14px/1.45 var(--sans);color:var(--ink);padding:4px 8px;margin:0 -8px;border-radius:var(--r);border-left:2px solid transparent;transition:background-color .35s var(--ease),border-color .35s var(--ease)}
.hw-srcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hw-src{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--v-mist);border-radius:var(--r-lg);background:var(--v-tint);border-left:3px solid var(--v-mist)}
.hw-src-h{margin:0;display:grid;gap:2px}
.hw-src-h b{font:600 15px/1.3 var(--sans);color:var(--v-heading)}
.hw-src-h small{font:500 12px/1.4 var(--mono);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.hw-src-l{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hw-src-l li{font:400 14px/1.45 var(--sans);color:var(--ink);padding:4px 8px;margin:0 -8px;border-radius:var(--r);border-left:2px solid transparent;transition:background-color .35s var(--ease),border-color .35s var(--ease)}
/* the line that differs: the product's updated tint and edge (rule 6 — a status is a fill, never small text) */
.hw-diff{background:var(--warn-tint);border-left-color:var(--v-updated)}
.hw-lines span.hw-diff{background:var(--warn-tint);border-left-color:var(--v-updated)}
.hw-note .note-secs>div[data-s="management"]{background:var(--v-tint);border-left-color:var(--primary)}
.how-js .hw-check:not(.in) .hw-note{opacity:0;transform:translateY(12px)}
.how-js .hw-check.in .hw-note{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .4s var(--ease)}
.how-js .hw-check:not(.in) .hw-src{opacity:0;transform:translateY(12px)}
.how-js .hw-check.in .hw-src{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .4s var(--ease)}
.how-js .hw-check.in .hw-src:nth-child(1){transition-delay:.45s}
.how-js .hw-check.in .hw-src:nth-child(2){transition-delay:.7s}
.how-js .hw-check:not(.in) .hw-diff{background:transparent;border-left-color:transparent}
.how-js .hw-check.in .hw-diff{transition-delay:1.5s}
.how-js .hw-check:not(.in) .hw-small{opacity:0}
.how-js .hw-check.in .hw-small{opacity:1;transition:opacity .3s var(--ease) 2s}

/* -- 6 · three cards, one label each, arriving in turn -- */
.hw-outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:760px}
.hw-out{gap:8px}
.hw-out .uf-heads{margin-top:2px}
.how-js .hw-back:not(.in) .hw-out{opacity:0;transform:translateY(18px) scale(.96)}
.how-js .hw-back.in .hw-out{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .45s cubic-bezier(.22,1.2,.36,1)}
.how-js .hw-back.in .hw-out:nth-child(3){transition-delay:.25s}
.how-js .hw-back.in .hw-out:nth-child(4){transition-delay:.5s}

/* -- 7 · the question: the story's card (§33/§37) with its tag; A chosen, wrong; B right; the way back -- */
.hw-quiz .st-qcard{gap:14px}
.hw-tag{margin:0;display:flex;justify-content:flex-start}
.hw-tag .uf-chip{font-size:13px;padding:2px 10px}
.how-js .hw-wrong:not(.in) .hw-quiz{opacity:0;transform:translateY(12px)}
.how-js .hw-wrong.in .hw-quiz{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .4s var(--ease)}
.how-js .hw-wrong:not(.p1) .st-opts li.st-pick{border-color:var(--line);box-shadow:none}
.how-js .hw-wrong.p1:not(.p2) .st-opts li.st-pick{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);background:var(--v-tint)}
.how-js .hw-wrong:not(.p2) .st-x{opacity:0;transform:scale(.6)}
.how-js .hw-wrong.p2 .st-x{opacity:1;transform:none;transition:opacity .2s var(--ease),transform .3s cubic-bezier(.34,1.4,.64,1)}
.how-js .hw-wrong:not(.p3) .st-opts li.st-right{border-color:var(--line);box-shadow:none}
.how-js .hw-wrong:not(.p3) .st-ok{opacity:0;transform:scale(.6)}
.how-js .hw-wrong.p3 .st-ok{opacity:1;transform:none;transition:opacity .2s var(--ease),transform .3s cubic-bezier(.34,1.4,.64,1)}
.how-js .hw-wrong:not(.p4) .st-back{opacity:0;transform:translateY(4px)}
.how-js .hw-wrong.p4 .st-back{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}

/* -- 8 · the month (§33/§34/§36): each weekday fills as its lecture lands; then one day opens under it -- */
.hw-cal{max-width:640px}
.cal-day.hw-open{outline:2px solid var(--v-accent);outline-offset:2px;transition:outline-color .3s var(--ease)}
.hw-day{display:grid;gap:10px;margin-top:4px;padding:14px 16px;border:1px solid var(--v-mist);border-radius:var(--r-lg);background:var(--v-tint);text-align:left}
.hw-day-h{margin:0;display:flex;gap:10px;align-items:baseline;font:400 14px/1.4 var(--sans);color:var(--ink-muted)}
.hw-day-h b{font:600 15px/1.3 var(--mono);color:var(--v-heading)}
.hw-day-h span{font:600 15px/1.3 var(--sans);color:var(--ink)}
.hw-day-outs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.hw-day-outs li{display:inline-flex;align-items:center;gap:8px;font:500 14px/1.3 var(--sans);color:var(--ink)}
.hw-day-outs .st-mark{width:26px;height:26px;background:var(--v-card)}
.hw-day-outs .st-mark svg{width:15px;height:15px}
.how-js .hw-term .cal-day.done:not(.fill){background:var(--surface);border-color:var(--line)}
.how-js .hw-term .cal-day.done:not(.fill) .cal-n{color:var(--ink-muted)}
.how-js .hw-term .cal-day.done:not(.fill) .cal-tick{transform:scale(0)}
.how-js .hw-term .cal-day.lec:not(.fill) .cal-lec{opacity:1;transform:none}
.how-js .hw-term:not(.pop) .cal-day.hw-open{outline-color:transparent}
.how-js .hw-term:not(.pop) .hw-day{opacity:0;transform:translateY(-6px)}
.how-js .hw-term.pop .hw-day{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.how-js .hw-term:not(.in) .hw-cal{opacity:0;transform:translateY(12px)}
.how-js .hw-term.in .hw-cal{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .4s var(--ease)}

/* -- 9 · the split: two halves, a hairline between; ours ticked, yours plain -- */
.hw-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--v-card);overflow:hidden;text-align:left}
.hw-half{display:grid;gap:14px;align-content:start;padding:22px 24px 24px}
.hw-ours{border-right:1px solid var(--line);background:var(--v-tint)}
.hw-half-h{margin:0;font:600 13px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.hw-ours .hw-half-h{color:var(--v-subheading)}
.hw-half ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hw-half li{display:flex;align-items:center;gap:12px;font:500 17px/1.35 var(--sans);color:var(--ink)}
.hw-tick{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--v-verified);color:var(--v-on-status);flex:none;transition:transform .3s cubic-bezier(.34,1.3,.64,1)}
.hw-tick .ic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hw-ring{display:block;width:24px;height:24px;border-radius:50%;border:2px solid var(--line-blue);flex:none}
.how-js .hw-split-act:not(.in) .hw-split{opacity:0;transform:translateY(12px)}
.how-js .hw-split-act.in .hw-split{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .4s var(--ease)}
.how-js .hw-split-act:not(.in) .hw-tick{transform:scale(0)}
.how-js .hw-split-act.in .hw-ours li:nth-child(1) .hw-tick{transition-delay:.5s}
.how-js .hw-split-act.in .hw-ours li:nth-child(2) .hw-tick{transition-delay:.75s}
.how-js .hw-split-act.in .hw-ours li:nth-child(3) .hw-tick{transition-delay:1s}
.how-js .hw-split-act.in .hw-ours li:nth-child(4) .hw-tick{transition-delay:1.25s}
.how-js .hw-split-act:not(.in) .hw-yours li{opacity:0;transform:translateY(6px)}
.how-js .hw-split-act.in .hw-yours li{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.how-js .hw-split-act.in .hw-yours li:nth-child(1){transition-delay:1.6s}
.how-js .hw-split-act.in .hw-yours li:nth-child(2){transition-delay:1.75s}
.how-js .hw-split-act.in .hw-yours li:nth-child(3){transition-delay:1.9s}
.how-js .hw-split-act.in .hw-yours li:nth-child(4){transition-delay:2.05s}

/* -- 10 · the end result: the navy band (§40), full viewport, the sentence, the three tiles -- */
main.hiw>.hw-final{background:var(--v-navy);color:var(--v-on-navy);min-height:100svh;padding:0 24px;border-top:1px solid var(--v-royal);border-bottom:1px solid var(--v-royal)}
.hw-final-in{min-height:100svh;grid-template-rows:1fr auto;gap:0;padding:64px 0 0;max-width:var(--frame)}
.hw-final-h{margin:0;align-self:center;font:600 clamp(34px,4.2vw + 10px,72px)/1.06 var(--display);letter-spacing:-0.03em;color:var(--v-on-navy);text-wrap:balance;max-width:16ch}
.how-js .hw-final:not(.in) .hw-final-h{opacity:0;transform:translateY(16px)}
.how-js .hw-final.in .hw-final-h{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.how-js .hw-final:not(.in) .hw-stats li{opacity:0;transform:translateY(6px)}
.how-js .hw-final.in .hw-stats li{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.how-js .hw-final.in .hw-stats li:nth-child(1){transition-delay:.9s}
.how-js .hw-final.in .hw-stats li:nth-child(2){transition-delay:1.05s}
.how-js .hw-final.in .hw-stats li:nth-child(3){transition-delay:1.2s}

/* -- 11 · the close: the line, the hero's button, one small link (rule 2: the page's one gold) -- */
main.hiw>.hw-close{padding:64px 24px 24px}
.hw-close .hw-in{gap:18px}
.hw-built{margin:0;font-size:17px}
.hw-go{height:auto;min-height:56px;padding:14px 28px;font-size:clamp(17px,1.2vw + 10px,22px);line-height:1.2;white-space:normal;text-align:center;max-width:100%;text-wrap:balance}
.hw-more{font:400 15px/1.5 var(--sans);color:var(--v-link)}
.hw-more:hover{color:var(--v-link-hover)}
.how-js .hw-close:not(.in) .hw-in>*{opacity:0;transform:translateY(8px)}
.how-js .hw-close.in .hw-in>*{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.how-js .hw-close.in .hw-go{transition-delay:.15s}
.how-js .hw-close.in .hw-more{transition-delay:.3s}

/* -- responsive: the comparison and the split stack; the timeline labels shrink; phones tighten the bands -- */
@media (max-width:899px){
  .hw-cmp{grid-template-columns:minmax(0,1fr);max-width:560px}
}
@media (max-width:640px){
  main.hiw>.hw-act{padding:52px 16px}
  main.hiw>.hw-head{padding:40px 16px 48px}
  .hw-h1{font-size:clamp(28px,8vw,36px)}
  .hw-tl span{font-size:12px;padding:0 2px}
  .hw-tl li{gap:8px}
  .hw-hall .theatre-row{gap:4px}
  .hw-hall{display:grid;justify-items:end;gap:8px}
  .hw-clock{position:static;grid-auto-flow:column;gap:12px;padding:6px 10px;font-size:12px}
  .hw-uf{padding:16px 14px 18px}
  .hw-uf .uf-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hw-uf .uf-head{grid-template-columns:30px minmax(0,1fr)}
  .hw-uf .hw-sum{grid-column:2}
  .hw-uf .uf-elapsed{grid-column:2;grid-row:2;padding-top:0}
  .hw-uf .uf-body{padding-left:0}
  .hw-run .uf-line{font-size:16px}
  .hw-srcs{grid-template-columns:minmax(0,1fr)}
  .hw-outs{grid-template-columns:minmax(0,1fr);max-width:400px}
  .hw-split{grid-template-columns:minmax(0,1fr)}
  .hw-ours{border-right:0;border-bottom:1px solid var(--line)}
  .hw-final-h{font-size:clamp(32px,9vw,44px)}
  .hw-final-in{padding-top:48px}
  main.hiw>.hw-close{padding:48px 16px 16px}
  .hw-day-outs{gap:8px 12px}
}

/* -- dark: cards and panels on navy-ink barely lift from --v-card (the §18 lesson), so they take the royal mix -- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hw-uf,:root:not([data-theme="light"]) .hw-split,:root:not([data-theme="light"]) .hw-clock,:root:not([data-theme="light"]) .hw-fly{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal));border-color:var(--line-strong)}
  :root:not([data-theme="light"]) .hw-src,:root:not([data-theme="light"]) .hw-day,:root:not([data-theme="light"]) .hw-ours{background:color-mix(in srgb,var(--v-card) 62%,var(--v-royal))}
  :root:not([data-theme="light"]) .hw-node{box-shadow:0 0 0 4px var(--v-page)}
  :root:not([data-theme="light"]) .hw-day-outs .st-mark{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal))}
}
:root[data-theme="dark"] .hw-uf,:root[data-theme="dark"] .hw-split,:root[data-theme="dark"] .hw-clock,:root[data-theme="dark"] .hw-fly{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal));border-color:var(--line-strong)}
:root[data-theme="dark"] .hw-src,:root[data-theme="dark"] .hw-day,:root[data-theme="dark"] .hw-ours{background:color-mix(in srgb,var(--v-card) 62%,var(--v-royal))}
:root[data-theme="dark"] .hw-node{box-shadow:0 0 0 4px var(--v-page)}
:root[data-theme="dark"] .hw-day-outs .st-mark{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal))}
@media (forced-colors: active){
  .hw-uf,.hw-split,.hw-src,.hw-day,.hw-clock,.hw-fly,.hw-node,.hw-ring{border:1px solid CanvasText;background:Canvas}
  .hw-tick,.hw-diff{background:Highlight;color:HighlightText}
  .hw-tl li::after{background:Highlight}
}
@media (prefers-reduced-motion: reduce){
  .hw-node,.hw-tl span,.hw-sum,.hw-uf,.hw-lines span,.hw-src-l li,.hw-tick,.hw-run .uf-line,.hw-run .uf-line-m,.cal-day.hw-open{transition:none}
}


/* ===== 42 · Build 66 (owner brief 2026-09-05) · the hero on the night ground.
   The owner chose the dark-glass direction from the redesign canvas (Verelect Landing Test): the landing's first
   band is the one section painted navy-ink in both themes — rule 1 re-opened for the hero by the brief, as it was
   for the story's fifth beat and the pricing band. One centred column: a small uppercase eyebrow, the headline
   filled white-to-mist, the same paragraph with its mist band redrawn in royal, two pill actions (the gold ask,
   unchanged; an outlined how-it-works beside it), then three glass plates — the note, one marked question, one
   cloze with the month — and the four bodies as the band's last line. Glass here is a fill of the tint at 6% with
   a mist hairline and one inset highlight; there is no blur and nothing loops. The run panel (§17C, §30) and
   hero-flow.js are withdrawn from the template; their rules stay in the sheet inert. Append-only; every §30 rule
   the hero still matches is overridden below. Tokens throughout, no raw hex; hero-local values are color-mixes of
   the system tokens. ===== */
.hero.bleed.hero-night{--hn-dim:color-mix(in srgb,var(--v-mist) 55%,var(--v-link));--hn-line:color-mix(in srgb,var(--v-mist) 16%,transparent);
  position:relative;overflow:hidden;isolation:isolate;margin:0 0 64px;padding:88px 24px 56px;
  background:var(--v-navy-ink);border-bottom:1px solid var(--hn-line);color:var(--v-mist)}
/* the halo and the blueprint grid sit behind everything and reach nothing */
.hero.bleed.hero-night::before{content:"";position:absolute;left:50%;top:-40px;width:1100px;height:720px;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--v-royal) 62%,transparent),transparent);pointer-events:none}
.hero.bleed.hero-night::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--v-mist) 7%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--v-mist) 7%,transparent) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,black 18%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 30%,black 18%,transparent 70%)}
.hero-night .hero-in{position:relative;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:start;gap:64px;max-width:1160px;text-align:center}
.hero-night .hero-copy{width:100%;max-width:1080px;justify-items:center;gap:22px;align-content:start}
.hero-night .hero-eyebrow{margin:0;font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hn-dim)}
.hero-night h1{font-size:clamp(34px,3.4vw + 16px,68px);line-height:1.04;letter-spacing:-0.032em;font-weight:600;max-width:none;margin:0;text-wrap:balance;
  color:var(--v-on-navy);background:linear-gradient(180deg,var(--v-on-navy) 0%,var(--v-mist) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-night .hero-sub{font:400 clamp(17px,.6vw + 13px,21px)/1.45 var(--sans);letter-spacing:-0.012em;color:var(--v-mist);max-width:640px;margin:0}
.hero-night .hero-sub mark{color:var(--v-on-navy);background-image:linear-gradient(var(--v-royal),var(--v-royal))}
/* the two actions: pills, the gold ask first; the second is outlined in mist on the night ground */
.hero-night .hero-act{margin-top:10px;gap:14px;display:grid;justify-items:center;width:100%}
.hero-night .hero-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.hero-night .hero-act .btn{height:52px;padding:0 28px;border-radius:var(--r-pill);font-size:17px;font-weight:600;letter-spacing:-0.011em}
.hero-night .btn.secondary{background:transparent;border-color:color-mix(in srgb,var(--v-mist) 38%,transparent);color:var(--v-on-navy)}
.hero-night .btn.secondary:hover{background:color-mix(in srgb,var(--v-mist) 12%,transparent);color:var(--v-on-navy)}
.hero-night .hero-act .signup-note{margin:0;font-size:14px;color:var(--hn-dim)}
/* the plates: three equal columns, the outer two turned a little and dropped, the centre one raised above them */
.hero-night .hero-plates{position:relative;width:100%;max-width:1160px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start;margin:8px 0 40px}
.hero-night .plate{position:relative;display:grid;gap:10px;text-align:left;padding:26px 28px;border-radius:16px;color:var(--v-mist);
  background:color-mix(in srgb,var(--v-tint) 6%,transparent);border:1px solid color-mix(in srgb,var(--v-mist) 18%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--v-tint) 16%,transparent)}
.hero-night .plate p{margin:0;max-width:none}
.hero-night .plate-note{transform:translate(40px,36px) rotate(-2deg);z-index:1}
.hero-night .plate-q{z-index:2}
.hero-night .plate-deck{transform:translate(-40px,52px) rotate(2deg);z-index:1}
.hero-night .plate-k{display:flex;justify-content:space-between;align-items:center;gap:12px;font:400 11px/1.4 var(--sans);color:var(--hn-dim)}
.hero-night .plate-ok{display:inline-flex;align-items:center;gap:4px;color:var(--v-verified)}
.hero-night .plate-ok .ic{width:12px;height:12px;fill:none;stroke:var(--v-verified);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hero-night .plate-t{font:600 22px/1.2 var(--display);letter-spacing:-0.02em;color:var(--v-on-navy)}
.hero-night .plate-h{font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--hn-dim);margin-top:2px}
.hero-night .plate-p{font:400 14px/1.5 var(--sans)}
.hero-night .plate-stem{font:500 17px/1.4 var(--sans);letter-spacing:-0.012em;color:var(--v-on-navy)}
.hero-night .plate-opts{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px}
.hero-night .plate-opts li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--v-mist) 16%,transparent);font:400 13px/1.35 var(--sans);color:var(--v-mist)}
.hero-night .plate-opts li i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid color-mix(in srgb,var(--v-mist) 30%,transparent);font:600 11px/1 var(--sans);font-style:normal}
.hero-night .plate-opts li.wrong{border-color:color-mix(in srgb,var(--v-conflict) 60%,transparent)}
.hero-night .plate-opts li.wrong i{background:var(--v-conflict);border-color:transparent;color:var(--v-on-status)}
.hero-night .plate-opts li.right{border-color:color-mix(in srgb,var(--v-verified) 70%,transparent);background:color-mix(in srgb,var(--v-verified) 12%,transparent);color:var(--v-on-navy);font-weight:500}
.hero-night .plate-opts li.right i{background:var(--v-verified);border-color:transparent;color:var(--v-on-status)}
.hero-night .plate-cloze{font:400 18px/1.45 var(--sans);letter-spacing:-0.012em;color:var(--v-on-navy)}
.hero-night .plate-cloze b{font-weight:600;padding:0 6px;border-radius:4px;background:color-mix(in srgb,var(--v-link) 28%,transparent)}
.hero-night .plate-month{margin-top:4px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--v-mist) 16%,transparent);font-size:13px;color:var(--v-mist)}
.hero-night .plate-streak{padding:4px 10px;border-radius:var(--r-pill);background:var(--v-accent);color:var(--v-accent-text);font:600 12px/1.2 var(--sans)}
.hero-night .plate-cal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.hero-night .plate-cal li{height:20px;border-radius:4px;background:color-mix(in srgb,var(--v-mist) 10%,transparent)}
.hero-night .plate-cal li.on{background:var(--v-link)}
/* the last line: the authority sentence on the left, the four bodies on the right, over one hairline */
.hero-night .hero-auth{margin:0;padding-top:28px;border-top:1px solid var(--hn-line);width:100%;max-width:1160px;display:flex;justify-content:space-between;align-items:center;gap:24px;
  font:400 14px/1.5 var(--sans);color:var(--hn-dim);text-align:left}
.hero-night .hero-bodies{display:flex;gap:36px;font:600 15px/1 var(--sans);letter-spacing:.04em;color:var(--v-on-navy);white-space:nowrap}
/* the plates arrive after the copy, once, on the copy's own curve; script-only and never under reduced motion */
@media (prefers-reduced-motion: no-preference){
  .js .hero-night .hero-plates{opacity:0;transform:translateY(14px);animation:hero-rise .3s var(--ease) .38s forwards}
}
@media (max-width:1079px){
  .hero-night .hero-in{gap:48px;max-width:none}
  .hero-night .hero-copy{width:100%}
  .hero-night .hero-plates{grid-template-columns:minmax(0,1fr);max-width:520px;gap:16px;margin-bottom:0}
  .hero-night .plate-note,.hero-night .plate-deck{transform:none}
}
@media (max-width:640px){
  .hero.bleed.hero-night{padding:52px 16px 40px;margin-bottom:48px}
  .hero-night h1{font-size:clamp(30px,8.6vw,40px)}
  .hero-night .hero-sub{font-size:17px}
  .hero-night .hero-btns{flex-direction:column;width:100%}
  .hero-night .hero-act .btn{width:100%}
  .hero-night .plate{padding:20px}
  .hero-night .hero-auth{flex-direction:column;align-items:flex-start;gap:12px}
  .hero-night .hero-bodies{gap:24px}
}
/* both themes paint the band the same; the explicit dark rules above set the band's edge, so they are matched */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero.bleed.hero-night{border-bottom-color:var(--hn-line)}
}
:root[data-theme="dark"] .hero.bleed.hero-night{border-bottom-color:var(--hn-line)}
@media (forced-colors: active){
  .hero.bleed.hero-night{background:Canvas;border-bottom:1px solid CanvasText}
  .hero.bleed.hero-night::before,.hero.bleed.hero-night::after{content:none}
  .hero-night h1{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
  .hero-night .plate,.hero-night .plate-opts li,.hero-night .plate-cal li,.hero-night .btn.secondary{border:1px solid CanvasText;background:Canvas;box-shadow:none}
  .hero-night .plate-cal li.on,.hero-night .plate-streak,.hero-night .plate-cloze b,.hero-night .plate-opts li i{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
}


/* ===== 43 · Build 67 (owner brief 2026-09-05) · the scene, and the story in the hero's language.
   Three things on the owner's read of Build 66. (1) The hero: the headline is one colour (the white-to-mist fill
   is withdrawn), the copy is centred at every width (§28 set the copy left; §42 only re-centred the frame), and
   the bar over the landing takes the hero's own ground so the two are one surface. (2) The scene: on a wide
   screen the stage pins and, as the reader scrolls, the three plates gather into one pile and fly off the top in
   turn (hero-scene.js — scroll-driven, so nothing runs on a clock; off under reduced motion and under 1080px,
   where the resting frame is the design). (3) The story below, restyled on the canvas the redesign canvas set
   for it: Apple's rhythm (one centred headline, one line, the visual under it, 128px between sections, full-
   width bands alternating page / card / navy-ink), Notion's paper (white cards on a hairline at 12px, no
   shadows), Authkit's glass for the one dark band (Lecture. Upload. Learn.). Every beat keeps its id, its
   headline, its one line, its mock content and its story.js hooks; only the surface changes. Append-only; the
   §33–§37 rules stay in the sheet and are overridden here. Tokens throughout; every keyframe ≤ .3s. ===== */

/* -- 1 · the hero, corrected -- */
.hero-night h1{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor;color:var(--v-on-navy)}
.hero.bleed.hero-night .hero-copy,.hero.bleed.hero-night h1,.hero.bleed.hero-night .hero-sub{text-align:center;justify-items:center}
.hero.bleed.hero-night .hero-act{justify-items:center;text-align:center}
.hero.bleed.hero-night{display:block;margin-bottom:0;padding:0;overflow:clip}   /* block, not §17's grid: a stretched child would feed the scene's height back into itself */
body:has(.hero-night) .top{background:var(--v-navy-ink);border-bottom-color:var(--v-navy-ink)}
/* the stage carries the padding, the halo and the grid, so they pin with it */
.hero.bleed.hero-night::before,.hero.bleed.hero-night::after{content:none}
.hero-night .hero-stage{position:relative;isolation:isolate;padding:88px 24px 56px}
.hero-night .hero-stage::before{content:"";position:absolute;left:50%;top:-40px;width:1100px;height:720px;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--v-royal) 62%,transparent),transparent);pointer-events:none}
.hero-night .hero-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--v-mist) 7%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--v-mist) 7%,transparent) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,black 18%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 30%,black 18%,transparent 70%)}
.hero-night .hero-in{align-content:start}   /* rows never stretch into the scene's scroll room, so the scene's slot is fixed */
.hero-night .hero-copy{position:relative;z-index:1}
.hero-night .hero-plates{z-index:2}
/* -- 2 · the scene: the plates and the proof line are one block; on a wide screen it sticks mid-window inside the
      tall hero while the plates play, and the copy above scrolls away as copy does. The plates are opaque on the
      night ground (a see-through pile is a jumble), the pile's top card is the question. -- */
.hero-night .hero-scene{position:relative;z-index:2;width:100%;max-width:1160px;display:grid;gap:40px;justify-items:center}
.hero-night .hero-scene .hero-plates{margin:8px 0 32px}
.hero-night .plate{background:color-mix(in srgb,var(--v-tint) 7%,var(--v-navy-ink))}
.hero-night.pinned .hero-scene{position:sticky;top:0}
.hero-night.pinned .plate{will-change:transform}
@media (max-width:640px){
  .hero.bleed.hero-night{padding:0}
  .hero-night .hero-stage{padding:52px 16px 40px}
}
@media (forced-colors: active){
  .hero-night .hero-stage::before,.hero-night .hero-stage::after{content:none}
  .hero-night h1{color:CanvasText;-webkit-text-fill-color:CanvasText}
  body:has(.hero-night) .top{background:Canvas;border-bottom:1px solid CanvasText}
}

/* -- 3 · the story: the rhythm -- */
main:has(>.hero-night){background:var(--v-page)}
main:has(>.hero-night)>.section.st-beat{padding:128px 24px}
main:has(>.hero-night)>.section.st-beat+.section.st-beat{border-top:1px solid var(--v-border)}
.band>.st-in{max-width:1120px;gap:40px}
.band>.st-in.st-in-wide{max-width:1160px}
.st-eyebrow{display:block;font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--v-subheading);margin:0 0 -20px}
.st-h,.st-h2,.st-final-h{font:600 clamp(32px,2.4vw + 14px,48px)/1.08 var(--display);letter-spacing:-0.025em;color:var(--v-heading);margin:0;text-wrap:balance;max-width:22ch;align-self:auto}
.st-line{margin:-20px 0 0;font:400 clamp(17px,.5vw + 13px,21px)/1.45 var(--sans);letter-spacing:-0.012em;color:var(--ink-muted);max-width:44ch}

/* -- beat 1 · the desk becomes the document: one white card, the two tabs and the clock in its head -- */
.desk{width:min(100%,760px);gap:0}
.thoughts{padding:0;margin:-8px 0 8px;min-height:0;justify-items:center;text-align:center;gap:6px}
.thoughts li{font:italic 400 19px/1.45 var(--sans);color:var(--ink-muted);text-align:center}
.story-js .st-know:not(.fin) .thoughts{min-height:1.45em}
.desk-scene{height:auto;overflow:visible;border:1px solid var(--v-border);border-radius:var(--r-lg);background:var(--v-card)}
.lamp,.handout,.desk-top,.laptop .lid,.toolbar{display:none}
.laptop{position:static;width:100%;transform:none}
.laptop .screen{height:auto;border:0;border-radius:0;background:transparent;overflow:visible;display:grid;grid-template-rows:auto auto;gap:14px;padding:22px 28px 26px}
.desk,.desk-scene,.laptop,.laptop .screen,.doc,.tabs{min-width:0}
.tabs{display:flex;flex-wrap:wrap;gap:8px;padding:0 96px 14px 0;background:transparent;border-bottom:1px solid var(--v-border)}
.tab{font:500 12px/1.3 var(--mono);color:var(--ink-muted);padding:6px 10px;border-radius:6px;background:var(--surface-2);max-width:100%;overflow:visible;white-space:normal}
.tab.on{background:var(--v-tint);color:var(--v-heading)}
.doc{padding:0;gap:10px;overflow:visible}
.doc-t{font:600 20px/1.3 var(--display);letter-spacing:-0.015em;color:var(--ink)}
.doc-l{font:400 15px/1.55 var(--sans);color:var(--ink-muted)}
.caret{height:15px;vertical-align:-2px}
.phone-flat{left:auto;right:28px;top:24px;bottom:auto;width:auto;height:auto;transform:none;background:transparent;border:0;display:block}
.phone-flat span{font:500 13px/1 var(--mono);color:var(--ink-muted)}
@media (max-width:640px){
  .thoughts{padding:0;min-height:0}
  .thoughts li{font-size:16px}
  .desk-scene{height:auto}
  .laptop{width:100%}
  .laptop .screen{height:auto;padding:18px 18px 20px}
  .tabs{display:flex;padding-right:64px}
  .doc-t{font-size:18px}
  .doc-l{font-size:14px}
  .phone-flat{right:18px;top:20px;width:auto;height:auto}
}

/* -- beat 2 · the night band: three glass cards, numbered, the caption as the title -- */
main:has(>.hero-night)>.section.st-flow{background:var(--v-navy-ink);color:var(--v-mist);border-top:1px solid color-mix(in srgb,var(--v-mist) 16%,transparent);border-bottom:1px solid color-mix(in srgb,var(--v-mist) 16%,transparent)}
main:has(>.hero-night)>.section.st-flow+.section.st-beat{border-top:0}
.st-flow .st-eyebrow{color:var(--v-mist)}
.st-flow .st-h{color:var(--v-on-navy)}
.st-frames{counter-reset:frame;gap:24px;align-items:stretch}
.st-frame{counter-increment:frame;grid-template-rows:auto minmax(0,1fr);align-content:start;gap:22px;padding:28px;border-radius:16px;justify-items:stretch;
  background:color-mix(in srgb,var(--v-tint) 6%,transparent);border:1px solid color-mix(in srgb,var(--v-mist) 18%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--v-tint) 16%,transparent)}
.st-cap{order:-1;justify-self:start;text-align:left;font:600 24px/1.2 var(--display);letter-spacing:-0.02em;color:var(--v-on-navy)}
.st-cap::before{content:"0" counter(frame);display:block;margin:0 0 12px;font:600 12px/1 var(--mono);letter-spacing:.12em;color:color-mix(in srgb,var(--v-mist) 55%,var(--v-link))}
/* the theatre, on the night ground */
.slide-screen{background:color-mix(in srgb,var(--v-tint) 8%,transparent);border-color:color-mix(in srgb,var(--v-mist) 28%,transparent);color:var(--v-on-navy);border-radius:10px 10px 3px 3px}
.slide-title{color:var(--v-on-navy)}
.slide-lines i{background:color-mix(in srgb,var(--v-mist) 40%,transparent)}
.slide-n{color:var(--v-mist)}
.theatre{border-top-color:color-mix(in srgb,var(--v-mist) 30%,transparent)}
.theatre-row i{background:color-mix(in srgb,var(--v-mist) 22%,transparent)}
.theatre-row i::after{background:color-mix(in srgb,var(--v-mist) 45%,transparent)}
.theatre-row i.you,.theatre-row i.you::after{background:var(--v-accent)}
/* the phone, as glass */
.phone{background:color-mix(in srgb,var(--v-tint) 8%,transparent);border-color:color-mix(in srgb,var(--v-mist) 30%,transparent)}
.phone-top{color:var(--v-mist)}
.phone-app{color:var(--v-on-navy)}
.phone-sys i{color:var(--v-mist);border-color:color-mix(in srgb,var(--v-mist) 30%,transparent)}
.phone-sys i.on{background:color-mix(in srgb,var(--v-link) 32%,transparent);border-color:var(--v-link);color:var(--v-on-navy)}
.story-js .st-flow:not(.sys) .phone-sys i.on{background:transparent;border-color:color-mix(in srgb,var(--v-mist) 30%,transparent);color:var(--v-mist)}
.phone-file{background:color-mix(in srgb,var(--v-tint) 12%,transparent);border-color:color-mix(in srgb,var(--v-mist) 30%,transparent);color:var(--v-on-navy)}
.phone-file .dk{color:var(--v-accent)}
.phone-zone{background:color-mix(in srgb,var(--v-link) 22%,transparent);border-color:var(--v-link);color:var(--v-on-navy);border-radius:10px}
.story-js .st-flow:not(.dropped) .phone-zone{border-color:color-mix(in srgb,var(--v-mist) 35%,transparent);background:transparent;color:var(--v-mist)}
/* the three things stay paper: white artefacts on the night ground, as the plates were */
.st-flow .st-card{border-color:var(--v-border)}
.st-flow .st-outs{gap:12px}

/* -- beat 3 · the question, on white: the card as the note's paper, the letters as discs -- */
main:has(>.hero-night)>.section.st-q{background:var(--v-card)}
.st-quiz{max-width:720px}
.st-qcard{padding:32px;gap:18px;border-color:var(--v-border)}
.st-stem{font:500 20px/1.4 var(--sans);letter-spacing:-0.018em}
.st-opts{gap:8px;margin-top:2px}
.st-opts li{padding:12px 14px;border-radius:10px;font-size:15px;background:var(--v-card);transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease)}
.st-opts li::before{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);font:600 12px/1 var(--sans);color:var(--ink-muted);transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.st-opts li.st-pick{background:var(--stop-tint);box-shadow:none}
.st-opts li.st-pick::before{background:var(--stop);border-color:var(--stop);color:var(--v-on-status)}
.st-opts li.st-right{background:var(--ok-tint);box-shadow:none;font-weight:500}
.st-opts li.st-right::before{background:var(--ok);border-color:var(--ok);color:var(--v-on-status)}
.story-js .st-q:not(.p2) .st-opts li.st-pick{background:var(--v-card)}
.story-js .st-q:not(.p2) .st-opts li.st-pick::before{background:transparent;border-color:var(--line-strong);color:var(--ink-muted)}
.story-js .st-q.p1:not(.p2) .st-opts li.st-pick{background:var(--v-tint);box-shadow:none}
.story-js .st-q:not(.p3) .st-opts li.st-right{background:var(--v-card);font-weight:400}
.story-js .st-q:not(.p3) .st-opts li.st-right::before{background:transparent;border-color:var(--line-strong);color:var(--ink-muted)}
.st-back{padding-top:16px;border-top:1px solid var(--v-border);font:500 15px/1.4 var(--sans)}

/* -- beat 4 · the month: the calendar as one paper card -- */
.st-cal{max-width:640px;padding:24px 28px 28px;border-color:var(--v-border);gap:16px}
.cal-nav b{font-size:16px}
.cal-streak{display:inline-flex;align-items:baseline;gap:6px;padding:4px 12px;border-radius:var(--r-pill);background:var(--v-accent);color:var(--v-accent-text);font:600 13px/1.4 var(--sans)}
.cal-streak b{font:600 15px/1 var(--sans);color:var(--v-accent-text);margin:0}
.cal-day{border-radius:6px}
.cal-day.we{background:var(--surface-2)}

/* -- beat 5 · the results: on white, the three figures as rows on a hairline -- */
main:has(>.hero-night)>.section.st-final{background:var(--v-card);color:var(--ink);min-height:0;padding:128px 24px;border-top:1px solid var(--v-border);border-bottom:0}
.st-final-in{min-height:0;grid-template-rows:auto;gap:40px;padding:0;max-width:1120px}
.st-final-h{color:var(--v-heading);font-size:clamp(32px,2.4vw + 14px,48px);line-height:1.08;letter-spacing:-0.025em;max-width:22ch;align-self:auto}
.st-stats{padding:0;width:min(100%,520px);border:1px solid var(--v-border);border-radius:var(--r-lg);grid-template-columns:minmax(0,1fr);gap:0;overflow:hidden;background:var(--v-card)}
.st-stats li{padding:18px 24px;border:0;border-top:1px solid var(--v-border);border-radius:0;font:500 17px/1.4 var(--sans);color:var(--ink);text-align:left;white-space:normal}
.st-stats li:first-child{border-top:0}

/* -- the call · a navy band, the gold pill, one line -- */
main:has(>.hero-night)>.section.st-cta{background:var(--v-navy);color:var(--v-on-navy);padding:96px 24px;border-top:1px solid var(--v-royal)}
.st-cta .st-in{gap:20px}
.st-go{border-radius:var(--r-pill);padding:16px 32px;min-height:60px}
.st-cta-note{margin:0;font:400 15px/1.5 var(--sans);color:var(--v-mist)}

/* -- the prices · two paper cards, the three months edged in navy, the code in plain text -- */
main:has(>.hero-night)>.section.st-price{padding:128px 24px 112px}
.st-price .st-in{gap:40px}
.st-price-h{font:600 clamp(32px,2.4vw + 14px,48px)/1.08 var(--display);letter-spacing:-0.025em}
.st-tiers{max-width:760px;gap:24px}
.st-tier,.st-best .st-tier,.st-best .st-tier:hover{padding:36px;justify-items:start;text-align:left;gap:8px;border-radius:var(--r-lg);background:var(--v-card)}
.st-tier{border:1px solid var(--v-border)}
.st-tier:hover{border-color:var(--v-navy)}
.st-best .st-tier,.st-best .st-tier:hover{border:1px solid var(--v-navy);padding:36px}
.st-amt{font:600 48px/1 var(--display);letter-spacing:-0.03em;color:var(--v-heading)}
.st-per{font-size:15px;color:var(--ink-muted)}
.st-tag{left:36px;transform:none;background:var(--v-accent);color:var(--v-accent-text);padding:4px 12px;font-size:12px}
.st-tier-go{margin-top:20px;border-radius:var(--r-pill);font-weight:600}
.st-code{background:transparent;border:0;padding:0;max-width:520px;justify-items:center;text-align:center;gap:12px}
.st-code-line{font:400 15px/1.5 var(--sans);color:var(--ink-muted)}
.st-code-row{max-width:400px}
.st-code-row input{border-radius:var(--r-pill);padding:0 18px}
.st-code-row .btn{border-radius:var(--r-pill)}

/* -- the beats arrive as before (story.js); nothing here adds a keyframe -- */
@media (max-width:900px){
  .st-frames{max-width:520px}
}
@media (max-width:640px){
  main:has(>.hero-night)>.section.st-beat,main:has(>.hero-night)>.section.st-final{padding:72px 16px}
  main:has(>.hero-night)>.section.st-cta{padding:64px 16px}
  main:has(>.hero-night)>.section.st-price{padding:72px 16px 80px}
  .st-h,.st-h2,.st-final-h,.st-price-h{font-size:clamp(28px,7.6vw,34px)}
  .st-line{font-size:17px}
  .st-frame{padding:20px}
  .st-cap{font-size:20px}
  .st-qcard{padding:22px 20px}
  .st-stem{font-size:17px}
  .st-tier,.st-best .st-tier,.st-best .st-tier:hover{padding:24px;justify-items:start;align-items:start;grid-template-columns:minmax(0,1fr)}
  .st-tag{left:24px}
  .st-amt{font-size:40px}
  .st-cal{padding:18px 16px 20px}
}
/* -- dark: the page and card tokens already flip; the night band and the cards keep their hairlines -- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) main:has(>.hero-night)>.section.st-beat+.section.st-beat{border-top-color:var(--line-strong)}
  :root:not([data-theme="light"]) .st-flow .st-card{background:var(--v-card);border-color:var(--line-strong)}
}
:root[data-theme="dark"] main:has(>.hero-night)>.section.st-beat+.section.st-beat{border-top-color:var(--line-strong)}
:root[data-theme="dark"] .st-flow .st-card{background:var(--v-card);border-color:var(--line-strong)}
@media (forced-colors: active){
  .st-frame,.desk-scene,.st-stats,.cal-streak{border:1px solid CanvasText;background:Canvas}
  .st-opts li::before{border:1px solid CanvasText}
  .st-opts li.st-pick::before,.st-opts li.st-right::before,.cal-streak{forced-color-adjust:none;background:Highlight;color:HighlightText}
}


/* ===== 44 · Build 68 (owner brief 2026-09-05) · the page below the hero, rebuilt in the hero's language.
   The story (§33–§37, §43's restyle) is withdrawn from the landing; its rules stay in the sheet for /how-it-works
   (the calendar) and are otherwise inert. What follows: the flow map — the product's marks as tiles on a circuit,
   the lecture at the top, the question bank at the centre, the note and the deck either side, light running along
   the traces (flow-map.js, on only while on screen, never under reduced motion — the owner's named exception, as
   §17C's was); what comes back, as three paper cards; the check, as one stamped line; the term and the standing;
   the close; the prices. Apple's rhythm (one centred eyebrow, headline and line per section, the visual under it,
   128px between sections, bands alternating page / card / navy), Notion's paper (cards on a hairline at 12px),
   Authkit's board for the map. Tokens throughout; every keyframe ≤ .3s; no raw hex. Append-only. ===== */

/* -- the frame every section shares -- */
main:has(>.hero-night)>.section.hp{margin:0;padding:128px 24px;max-width:none}
main:has(>.hero-night)>.section.hp+.section.hp{border-top:1px solid var(--v-border)}
.band>.hp-in{max-width:1120px;display:grid;gap:24px;justify-items:center;text-align:center}
.hp-eyebrow{display:block;font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--v-subheading)}
.hp-h{font:600 clamp(32px,2.4vw + 14px,48px)/1.08 var(--display);letter-spacing:-0.025em;color:var(--v-heading);margin:0;text-wrap:balance;max-width:22ch}
.hp-line{margin:-4px 0 0;font:400 clamp(17px,.5vw + 13px,21px)/1.45 var(--sans);letter-spacing:-0.012em;color:var(--ink-muted);max-width:44ch;text-wrap:balance}
main:has(>.hero-night)>.section.hp-paper{background:var(--v-card)}
main:has(>.hero-night)>.section.hp-night{background:var(--v-navy-ink);color:var(--v-mist);border-top:0;border-bottom:1px solid color-mix(in srgb,var(--v-mist) 16%,transparent)}
main:has(>.hero-night)>.section.hp-night+.section.hp{border-top:0}
.hp-night .hp-eyebrow,.hp-night .hp-line{color:var(--v-mist)}
.hp-night .hp-h{color:var(--v-on-navy)}
main:has(>.hero-night)>.section.hp-navy{background:var(--v-navy);color:var(--v-on-navy);padding:96px 24px;border-top:1px solid var(--v-royal)}
main:has(>.hero-night)>.section.hp-navy+.section.hp{border-top:0}
.hp-navy .hp-h{color:var(--v-on-navy)}
.hp-navy .hp-in{gap:28px}
.hp-close-h{max-width:18ch;font-size:clamp(34px,3vw + 12px,56px)}

/* -- 1 · how it works, told as a scroll (Build 69). Two columns: the stage on the left keeps one plane on the page
      (sticky, centred in the window) and holds the four blocks stacked on one cell, one shown; the steps on the
      right scroll past it, each a numbered display headline and one paragraph at reading height, the current one
      in full ink and the rest quiet. A block arrives on the plane by rising into it; the composition is the
      editorial one — asymmetric, sparse, the type doing the work — on the sheet's own paper and ink. -- */
main:has(>.hero-night)>.section.sc{padding:96px 24px 48px}
.band>.sc-in{max-width:1160px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 72px;align-items:start;text-align:left;justify-items:stretch}
.sc-eyebrow{grid-column:1 / -1;margin-bottom:32px}
.sc-stage{position:sticky;top:calc(50vh - 280px);height:560px;display:grid;align-items:center}
.sc-block{grid-area:1 / 1;opacity:0;transform:translateY(32px) scale(.98);transition:opacity .45s var(--ease),transform .55s var(--ease);pointer-events:none}
.sc-block.is-active{opacity:1;transform:none}
.sc-card{display:grid;align-content:start;gap:14px;width:min(100%,520px);padding:30px;background:var(--v-card);border:1px solid var(--v-border);border-radius:20px;color:var(--ink)}
.sc-card-k{margin:0;display:flex;align-items:center;gap:10px;font:600 13px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.sc-card-t{font:600 24px/1.2 var(--display);letter-spacing:-0.02em;color:var(--v-heading)}
.sc-card-f{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--v-border);font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
/* 1 · the upload */
.sc-upload .sc-card-k{justify-content:space-between}
.sc-clock{font:500 12px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--ink-muted)}
.sc-sys{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.sc-sys i{font:500 13px/1 var(--sans);font-style:normal;color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:8px 12px}
.sc-sys i.on{background:var(--v-tint);border-color:var(--v-royal);color:var(--v-heading)}
.sc-drop{display:grid;justify-items:center;gap:6px;padding:28px 20px;border:1px dashed var(--v-mist);border-radius:14px;background:var(--v-tint);text-align:center}
.sc-drop .dk{width:40px;height:32px;color:var(--primary)}
.sc-drop b{font:600 15px/1.3 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.sc-drop small{font:400 13px/1.4 var(--sans);color:var(--ink-muted)}
.sc-go{justify-self:start;border-radius:var(--r-pill);padding:0 22px;pointer-events:none}
/* 2 · the note, with its one checked line */
.sc-check{margin:0;padding-top:14px;border-top:1px solid var(--v-border);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font:500 14px/1.4 var(--sans);color:var(--ink)}
.sc-src{font:500 12px/1 var(--mono);color:var(--ink-muted)}
/* 3 · the deck on its stack */
.sc-deck{position:relative;padding:10px 0 0 10px}
.sc-deck>i{position:absolute;inset:0 10px 10px 0;border:1px solid var(--v-border);border-radius:10px;background:var(--v-page)}
.sc-deck>i:nth-child(1){transform:translate(10px,-10px)}
.sc-deck>i:nth-child(2){transform:translate(5px,-5px)}
.sc-deck .hp-cloze{position:relative}
/* the steps */
.sc-steps{list-style:none;margin:0;padding:0}
.sc-step{min-height:72vh;display:grid;align-content:center;gap:18px;opacity:.36;transition:opacity .35s var(--ease)}
.sc-step:first-child{min-height:56vh;align-content:start;padding-top:8vh}
.sc-step:last-child{min-height:56vh;align-content:start}
.sc-step.is-active{opacity:1}
.sc-n{font:600 13px/1 var(--mono);letter-spacing:.14em;color:var(--v-subheading)}
.sc-h{font:600 clamp(32px,2.6vw + 14px,52px)/1.05 var(--display);letter-spacing:-0.03em;color:var(--v-heading);margin:0;text-wrap:balance;max-width:14ch}
.sc-p{margin:0;font:400 19px/1.5 var(--sans);letter-spacing:-0.012em;color:var(--ink-muted);max-width:40ch;text-wrap:pretty}
@media (prefers-reduced-motion: reduce){
  .sc-block,.sc-step{transition:none}
  .sc-step{opacity:1}
}
@media (max-width:900px){
  /* one column: the stage keeps its plane at the top of the window on the page's own ground; the steps pass under it */
  main:has(>.hero-night)>.section.sc{padding:64px 16px 32px}
  .band>.sc-in{grid-template-columns:minmax(0,1fr);gap:0}
  .sc-eyebrow{margin-bottom:20px}
  .sc-stage{top:0;height:auto;padding:12px 0 20px;z-index:2;background:var(--v-page);align-items:start}
  .sc-stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:24px;background:linear-gradient(var(--v-page),transparent);pointer-events:none}
  .sc-card{width:100%;padding:22px 20px;gap:12px}
  .sc-card-t{font-size:20px}
  /* the copy sits at the foot of its slot, so it is read below the stage, never under it */
  .sc-step,.sc-step:first-child,.sc-step:last-child{min-height:56vh;gap:14px;align-content:end;padding:0 0 32px}
  .sc-step:first-child{min-height:40vh}
  .sc-h{font-size:clamp(28px,7.6vw,36px);max-width:none}
  .sc-p{font-size:17px}
}
/* the tiles: the marks as the desktop shows them — a squircle each; the note's white, the deck's own icon, the bank's navy */
.fm-tile{position:relative;display:grid;place-items:center;width:104px;height:104px;border-radius:26px;background:var(--v-on-navy);color:var(--v-navy-ink);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--v-on-navy) 60%,transparent),0 24px 60px color-mix(in srgb,var(--v-navy-ink) 70%,transparent)}
.fm-tile svg{width:56%;height:56%;display:block}
.fm-tile-notion{background:var(--v-on-navy);color:var(--v-navy-ink)}
.fm-tile-core{--v-card:var(--v-navy);width:160px;height:160px;border-radius:40px;background:var(--v-navy);color:var(--v-on-navy);border:1px solid var(--v-royal);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--v-mist) 35%,transparent),0 0 0 12px color-mix(in srgb,var(--v-royal) 28%,transparent),0 0 90px color-mix(in srgb,var(--v-royal) 75%,transparent)}
.fm-tile-core svg{width:52%;height:52%}
/* the same tiles, small, name the three cards below */
.fm-tile-sm,.fm-tile.fm-tile-sm{width:34px;height:34px;border-radius:10px;box-shadow:none;border:0}
.fm-tile-sm svg{width:58%;height:58%}
.fm-tile-core.fm-tile-sm{box-shadow:none;border:0}

/* -- 2 · what comes back: three paper cards, the marks naming them -- */
.hp-cards{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%;text-align:left}
.hp-card{display:grid;align-content:start;gap:14px;padding:28px;background:var(--v-card);border:1px solid var(--v-border);border-radius:var(--r-lg);min-width:0}
.hp-card-k{display:flex;align-items:center;gap:10px;font:600 13px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.hp-card-t{font:600 22px/1.2 var(--display);letter-spacing:-0.02em;color:var(--v-heading)}
.hp-note{margin:0;display:grid;gap:4px}
.hp-note dt{font:600 11px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--v-subheading);margin-top:6px}
.hp-note dt:first-child{margin-top:0}
.hp-note dd{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink)}
.hp-cloze{padding:16px 18px;border-radius:10px;background:var(--v-page);border:1px solid var(--v-border);font:400 16px/1.45 var(--sans);letter-spacing:-0.012em;color:var(--ink)}
.hp-cloze mark{background:var(--v-tint);color:var(--v-heading);padding:0 6px;border-radius:4px;font-weight:600}
.hp-cloze small{display:block;margin-top:8px;font:500 11px/1.3 var(--mono);color:var(--ink-muted)}
.hp-stem{margin:0;font:500 15px/1.45 var(--sans);letter-spacing:-0.01em;color:var(--ink)}
.hp-opts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hp-opts li{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--v-border);border-radius:8px;font:400 13px/1.35 var(--sans);color:var(--ink-muted)}
.hp-opts li i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);font:600 11px/1 var(--sans);font-style:normal;color:var(--ink-muted)}
.hp-opts li.wrong{border-color:var(--stop);background:var(--stop-tint)}
.hp-opts li.wrong i{background:var(--stop);border-color:var(--stop);color:var(--v-on-status)}
.hp-opts li.right{border-color:var(--ok);background:var(--ok-tint);color:var(--ink);font-weight:500}
.hp-opts li.right i{background:var(--ok);border-color:var(--ok);color:var(--v-on-status)}
.hp-card-f{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--v-border);font:400 14px/1.5 var(--sans);color:var(--ink-muted)}

/* -- 3 · the check: one line, its stamp, its source; then the bodies -- */
.hp-finding{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 18px;margin:16px 0 0;padding:18px 26px;border:1px solid var(--v-border);border-radius:var(--r-lg);background:var(--v-page);font:500 17px/1.4 var(--sans);letter-spacing:-0.012em;color:var(--ink)}
.hp-stamp{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);background:var(--v-verified);color:var(--v-on-status);font:600 13px/1.2 var(--sans)}
.hp-stamp .ic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.hp-finding-src{font:500 13px/1 var(--mono);color:var(--ink-muted)}
.hp-bodies{margin:8px 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 32px;font:600 16px/1 var(--sans);letter-spacing:.04em;color:var(--v-heading)}
.hp-bodies em{font:400 14px/1.4 var(--sans);letter-spacing:0;font-style:normal;color:var(--ink-muted)}

/* -- 4 · the term and the standing: the month as the app shows it, and three figures beside it -- */
.hp-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;width:100%;margin-top:16px;text-align:left;align-items:stretch}
.hp-cal,.st-cal.hp-cal{max-width:none;margin:0}
.hp-standing{display:grid;align-content:start;gap:20px;padding:28px;background:var(--v-card);border:1px solid var(--v-border);border-radius:var(--r-lg)}
.hp-standing-t{font:600 22px/1.2 var(--display);letter-spacing:-0.02em;color:var(--v-heading);text-wrap:balance}
.hp-stats{list-style:none;margin:0;padding:0;display:grid}
.hp-stats li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0;border-top:1px solid var(--v-border);font:400 15px/1.4 var(--sans);color:var(--ink-muted)}
.hp-stats li b{font:600 24px/1 var(--display);letter-spacing:-0.02em;color:var(--v-heading);font-variant-numeric:tabular-nums}
.hp-stats li b small{font:400 14px/1 var(--sans);letter-spacing:0;color:var(--ink-muted)}

/* -- 5 · the prices: §43's cards, one line under each price -- */
.st-tier-sub{font:400 14px/1.5 var(--sans);color:var(--ink-muted);margin-top:4px}
.hp .st-tiers{margin-top:16px}

@media (max-width:900px){
  .hp-cards{grid-template-columns:minmax(0,1fr);max-width:560px}
  .hp-two{grid-template-columns:minmax(0,1fr);max-width:640px}
}
}
@media (max-width:640px){
  main:has(>.hero-night)>.section.hp{padding:72px 16px}
  main:has(>.hero-night)>.section.hp-map{padding-top:64px}
  main:has(>.hero-night)>.section.hp-navy{padding:64px 16px}
  .hp-h{font-size:clamp(28px,7.6vw,34px)}
  .hp-close-h{font-size:clamp(30px,8.4vw,40px)}
  .hp-line{font-size:17px}
  .hp-card,.hp-standing{padding:22px 20px}
  .hp-finding{padding:16px 18px;font-size:15px}
  .hp-bodies{gap:10px 20px;font-size:14px}
}
/* -- dark: the cards keep their hairlines; the tiles are fixed by token, so they read the same on both grounds -- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) main:has(>.hero-night)>.section.hp+.section.hp{border-top-color:var(--line-strong)}
  :root:not([data-theme="light"]) .hp-cloze,:root:not([data-theme="light"]) .hp-finding{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal))}
}
:root[data-theme="dark"] main:has(>.hero-night)>.section.hp+.section.hp{border-top-color:var(--line-strong)}
:root[data-theme="dark"] .hp-cloze,:root[data-theme="dark"] .hp-finding{background:color-mix(in srgb,var(--v-card) 74%,var(--v-royal))}
@media (forced-colors: active){
  .fm-tile,.sc-card,.sc-drop,.sc-sys i,.hp-standing,.hp-finding,.hp-cloze,.hp-opts li{border:1px solid CanvasText;background:Canvas;box-shadow:none}
  .hp-stamp,.hp-opts li.wrong i,.hp-opts li.right i{forced-color-adjust:none;background:Highlight;color:HighlightText}
}


/* ===== 45 · owner 2026-09-05 · Anki's logo, everywhere the deck is named.
   _anki_mark.svg is now Anki's own icon — the star on its dark tile, its own colours inside the file — so every box
   that held the flat mark drops its tint and edge and lets the icon be the tile: the plans' marks, the story cards'
   marks on /how-it-works, the upload flow's output icon and result marks, the landing's flow map and cards.
   Append-only; tokens only in the sheet. ===== */
.get-mark:has(.anki-logo),.st-mark:has(.anki-logo),.uf-out-ic:has(.anki-logo){background:transparent;border-color:transparent;padding:0}
.get-mark .anki-logo,.st-mark .anki-logo{width:100%;height:100%;border-radius:inherit}
.uf-out-ic .anki-logo{border-radius:7px}
.fm-tile.fm-tile-anki{background:none;box-shadow:none;filter:drop-shadow(0 24px 40px color-mix(in srgb,var(--v-navy-ink) 70%,transparent))}
.fm-tile-anki .anki-logo{width:100%;height:100%;border-radius:inherit;display:block}
.fm-tile-sm.fm-tile-anki{filter:none}
@media (forced-colors: active){
  .anki-logo{forced-color-adjust:none}
}


/* ===== 46 · Build 70 (owner brief 2026-09-05) · how it works, as five cards on a pinned stage.
   The stage fills the window and holds still while the reader scrolls a frame a little over four screens tall
   (--cs-len screens beyond the first). Five cards, one box: --card-w, --card-h and --card-r are set once here and
   every card reads them. The cards share one slot on the left; the copy has its own column on the right, so the two
   never meet. card-story.js writes the progress into custom properties on the stage (--q1..--q4 the cards' arrivals,
   --flip the turn, --t1..--t5 the texts, --bg-a/--bg-b the ground) and the rules below draw each stage from them —
   there is no animation and no transition in this block, so the motion is scrubbed and exactly reversible. A card is
   hidden (.is-covered) once the card over it has fully landed. Without the script, under reduced motion, or under
   1080px the same markup is the static reading layout: five boxes down the left, five texts beside them, nothing
   moved, nothing off-screen. Grounds are the sheet's light tones only (page → tint → mist on tint). Tokens only.

   stage 0  p 0.00–0.06  intro text only, no card            stage 3  p 0.40–0.66  text 2 out · card 3 rises over card 2 · text 3 in
   stage 1  p 0.06–0.16  card 1 fades and scales in         stage 4  p 0.69–0.89  text 3 out · ground → mist · card 4 from the right over card 3 · text 4 in
   stage 2  p 0.20–0.38  ground → tint · card 2 from the    stage 5  p 0.90–1.00  text 4 out · the card turns on Y · at 180° the back is card 5 · text 5 in
                          left over card 1 · text 1 → text 2   (the ranges are card-story.js's CUE table; tune them there) ===== */
.cs{--card-w:min(520px,calc(50vw - 120px));--card-h:min(600px,72vh);--card-r:20px;--cs-len:4.2}
main:has(>.hero-night)>.section.cs{padding:96px 24px}
.band>.cs-in{max-width:1160px;display:block;text-align:left}
.cs-frame{position:relative}
/* -- the static reading layout (the default): the eyebrow, then each card beside its text -- */
.cs-stage{--p:0;--q1:0;--q2:0;--q3:0;--q4:0;--flip:0;--t1:1;--t2:0;--t3:0;--t4:0;--t5:0;--bg-a:0;--bg-b:0;
  display:grid;grid-template-columns:var(--card-w) minmax(0,1fr);gap:48px 64px;align-items:center}
.cs-eyebrow{grid-column:1 / -1;grid-row:1;margin-bottom:8px}
.cs-deck,.cs-flip{display:contents}
.cs-copy{display:contents;list-style:none;margin:0;padding:0}
.cs-card{grid-column:1;width:var(--card-w);height:var(--card-h);box-sizing:border-box;border-radius:var(--card-r);background:var(--v-card);border:1px solid var(--v-border);color:var(--ink);overflow:hidden}
.cs-card-in{display:grid;align-content:start;gap:14px;height:100%;box-sizing:border-box;padding:30px;overflow:hidden}
.cs-text{grid-column:2;display:grid;gap:18px;align-content:center}
.cs-card[data-card="1"],.cs-text[data-text="1"]{grid-row:2}
.cs-card[data-card="2"],.cs-text[data-text="2"]{grid-row:3}
.cs-card[data-card="3"],.cs-text[data-text="3"]{grid-row:4}
.cs-card[data-card="4"],.cs-text[data-text="4"]{grid-row:5}
.cs-card[data-card="5"],.cs-text[data-text="5"]{grid-row:6}
/* the cards' insides */
.cs-card-k{margin:0;display:flex;align-items:center;gap:10px;font:600 13px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.cs-card-t{font:600 24px/1.2 var(--display);letter-spacing:-0.02em;color:var(--v-heading)}
.cs-card-f{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--v-border);font:400 14px/1.5 var(--sans);color:var(--ink-muted)}
.cs-upload .cs-card-k{justify-content:space-between}
.cs-clock{font:500 12px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--ink-muted)}
.cs-sys{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.cs-sys i{font:500 13px/1 var(--sans);font-style:normal;color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:8px 12px}
.cs-sys i.on{background:var(--v-tint);border-color:var(--v-royal);color:var(--v-heading)}
.cs-drop{display:grid;justify-items:center;gap:6px;padding:28px 20px;border:1px dashed var(--v-mist);border-radius:14px;background:var(--v-tint);text-align:center}
.cs-drop .dk{width:40px;height:32px;color:var(--primary)}
.cs-drop b{font:600 15px/1.3 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.cs-drop small{font:400 13px/1.4 var(--sans);color:var(--ink-muted)}
.cs-go{justify-self:start;border-radius:var(--r-pill);padding:0 22px;pointer-events:none}
.cs-check{margin:0;padding-top:14px;border-top:1px solid var(--v-border);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font:500 14px/1.4 var(--sans);color:var(--ink)}
.cs-src{font:500 12px/1 var(--mono);color:var(--ink-muted)}
.cs-stack{position:relative;padding:10px 0 0 10px}
.cs-stack>i{position:absolute;inset:0 10px 10px 0;border:1px solid var(--v-border);border-radius:10px;background:var(--v-page)}
.cs-stack>i:nth-child(1){transform:translate(10px,-10px)}
.cs-stack>i:nth-child(2){transform:translate(5px,-5px)}
.cs-stack .hp-cloze{position:relative}
/* the copy */
.cs-n{font:600 13px/1 var(--mono);letter-spacing:.14em;color:var(--v-subheading)}
.cs-h{font:600 clamp(32px,2.6vw + 14px,52px)/1.05 var(--display);letter-spacing:-0.03em;color:var(--v-heading);margin:0;text-wrap:balance;max-width:14ch}
.cs-p{margin:0;font:400 19px/1.5 var(--sans);letter-spacing:-0.012em;color:var(--ink);max-width:40ch;text-wrap:pretty}

/* -- pinned: the frame is tall, the stage sticks and fills the window, and every value is drawn from the properties -- */
/* the pinned section runs edge to edge so the ground can; the stage keeps the content at the page's 1160px frame with its own padding */
main:has(>.hero-night)>.section.cs.is-pinned{padding:0}
.cs.is-pinned .cs-in{max-width:none}
.cs.is-pinned .cs-frame{height:calc(100vh * (1 + var(--cs-len)))}
.cs.is-pinned .cs-stage{position:sticky;top:0;height:100vh;box-sizing:border-box;padding:0 max(24px,calc(50vw - 580px));overflow:clip;isolation:isolate;grid-template-rows:auto minmax(0,1fr);gap:0 64px;align-content:start}
.cs.is-pinned .cs-stage::before,.cs.is-pinned .cs-stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.cs.is-pinned .cs-stage::before{background:var(--v-tint);opacity:var(--bg-a)}
.cs.is-pinned .cs-stage::after{background:color-mix(in srgb,var(--v-mist) 45%,var(--v-tint));opacity:var(--bg-b)}
.cs.is-pinned .cs-eyebrow{position:relative;z-index:1;padding-top:40px;margin:0}
.cs.is-pinned .cs-deck{display:block;position:relative;z-index:1;grid-column:1;grid-row:2;align-self:center;width:var(--card-w);height:var(--card-h);perspective:1600px}
.cs.is-pinned .cs-card{position:absolute;inset:0;grid-row:auto;width:100%;height:100%;will-change:transform}
.cs.is-pinned .cs-card[data-card="1"]{z-index:1;opacity:var(--q1);transform:scale(calc(.94 + .06 * var(--q1)))}
.cs.is-pinned .cs-card[data-card="2"]{z-index:2;transform:translateX(calc((1 - var(--q2)) * -100vw))}
.cs.is-pinned .cs-card[data-card="3"]{z-index:3;transform:translateY(calc((1 - var(--q3)) * 110vh)) scale(calc(.97 + .03 * var(--q3)))}
.cs.is-pinned .cs-flip{display:block;position:absolute;inset:0;z-index:4;transform-style:preserve-3d;will-change:transform;
  transform:translateX(calc((1 - var(--q4)) * 100vw)) rotateY(calc(var(--flip) * -180deg))}
.cs.is-pinned .cs-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}
.cs.is-pinned .cs-back{transform:rotateY(180deg) translateZ(0)}
.cs.is-pinned .cs-card.is-covered{visibility:hidden;opacity:0}
.cs.is-pinned .cs-copy{display:grid;position:relative;z-index:1;grid-column:2;grid-row:2;align-self:center}
.cs.is-pinned .cs-text{grid-area:1 / 1;opacity:0}
.cs.is-pinned .cs-text[data-text="1"]{opacity:var(--t1);transform:translateY(calc((1 - var(--t1)) * -8px))}
.cs.is-pinned .cs-text[data-text="2"]{opacity:var(--t2);transform:translateY(calc((1 - var(--t2)) * 12px))}
.cs.is-pinned .cs-text[data-text="3"]{opacity:var(--t3);transform:translateY(calc((1 - var(--t3)) * 12px))}
.cs.is-pinned .cs-text[data-text="4"]{opacity:var(--t4);transform:translateY(calc((1 - var(--t4)) * 12px))}
.cs.is-pinned .cs-text[data-text="5"]{opacity:var(--t5);transform:translateY(calc((1 - var(--t5)) * 12px))}

@media (max-width:1079px){
  /* the static layout, one column: each card, then its text under it */
  .cs{--card-w:100%;--card-h:min(600px,72vh)}
  main:has(>.hero-night)>.section.cs{padding:64px 16px}
  .cs-stage{grid-template-columns:minmax(0,1fr);gap:20px}
  .cs-card,.cs-text{grid-column:1}
  .cs-card[data-card="1"]{grid-row:2}  .cs-text[data-text="1"]{grid-row:3;margin-bottom:28px}
  .cs-card[data-card="2"]{grid-row:4}  .cs-text[data-text="2"]{grid-row:5;margin-bottom:28px}
  .cs-card[data-card="3"]{grid-row:6}  .cs-text[data-text="3"]{grid-row:7;margin-bottom:28px}
  .cs-card[data-card="4"]{grid-row:8}  .cs-text[data-text="4"]{grid-row:9;margin-bottom:28px}
  .cs-card[data-card="5"]{grid-row:10} .cs-text[data-text="5"]{grid-row:11}
  .cs-text{gap:12px;align-content:start}
  .cs-h{font-size:clamp(28px,7.6vw,36px);max-width:none}
  .cs-p{font-size:17px}
  .cs-card-in{padding:22px 20px;gap:12px}
  .cs-card-t{font-size:20px}
}
@media (forced-colors: active){
  .cs-card{border:1px solid CanvasText;background:Canvas}
  .cs.is-pinned .cs-stage::before,.cs.is-pinned .cs-stage::after{content:none}
}


/* ===== 47 · Build 71 (owner brief 2026-09-05) · the cards are the desk.
   The five cards on the Build 70 stage are refilled as the real destinations — the upload stepper, the Notion page,
   the Anki review window, the question session, the finding card — with the founding run's Pneumonia lecture. The
   stage, the slot, the box and card-story.js are §46's; nothing there moves. `.dk-*` is the insides. `.cs-land` marks
   what arrives after the card: in the static layout card-motion.js adds `.is-lit` to a card once it is on screen and
   these settle in over ≤.3s (transitions only, no keyframe, staggered by .l1–.l6); on the pinned stage they are drawn
   from --q1..--q4 / --flip, so they scrub with the reader's hand. Without script (`html:not(.cs-js)`) or under
   reduced motion everything renders finished. Tokens only; the Anki mark keeps its own colours (§45). ===== */
.dk-in{padding:0;gap:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.dk-anki .dk-in{grid-template-rows:auto minmax(0,1fr) auto}
.dk-body{display:grid;align-content:start;gap:14px;padding:22px 30px 26px;min-height:0;overflow:hidden}
/* the window bar every destination has */
.dk-bar{margin:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-bottom:1px solid var(--v-border);background:var(--v-page);font:500 13px/1 var(--sans);color:var(--ink)}
.dk-bar>span:last-child:not(.dk-counts){font:400 12px/1 var(--sans);color:var(--ink-muted)}
.dk-bar-deck{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-bar .fm-tile-sm{width:26px;height:26px;border-radius:7px;flex:none}
.dk-bar-q{display:grid;gap:10px;padding:16px 24px 14px}
.dk-bar-row{margin:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.dk-progress{margin:0;display:flex;gap:4px}
.dk-progress i{flex:1;height:4px;border-radius:2px;background:var(--v-border)}
.dk-progress i.ok{background:var(--ok)}.dk-progress i.no{background:var(--stop)}.dk-progress i.now{background:var(--primary)}
/* 1 · the stepper */
.dk-step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.dk-step-b{display:grid;gap:10px;min-width:0}
.dk-step-t{font:600 15px/1.3 var(--sans);color:var(--v-heading)}
.dk-disc{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--primary);color:var(--on-primary);font:600 12px/1 var(--sans)}
.dk-disc.ring{background:none;border:1.5px solid var(--primary);color:var(--primary)}
.dk-disc.wait{background:none;border:1.5px solid var(--line-blue);color:var(--v-subheading)}
.dk-upload .cs-sys i.on{background:var(--v-mist);border-color:var(--v-royal);color:var(--v-navy-ink)}
.dk-upload .cs-sys i.dim{color:var(--ink-muted)}
.dk-receipt{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px dashed var(--v-mist);border-radius:14px;background:var(--v-tint)}
.dk-receipt .dk{width:40px;height:32px;color:var(--primary);flex:none}
.dk-receipt-t{display:grid;gap:3px;min-width:0}
.dk-receipt-t b{font:600 14px/1.3 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.dk-receipt-t small{font:400 13px/1.3 var(--sans);color:var(--ink-muted)}
.dk-ok{margin-left:auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ok);flex:none}
.dk-ok .ic{width:12px;height:12px;stroke:var(--v-on-status);stroke-width:3}
.dk-wants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dk-want{display:grid;gap:8px;padding:12px;border:1px solid var(--v-royal);border-radius:10px;background:var(--v-tint);font:500 12px/1.2 var(--sans);color:var(--v-heading)}
.dk-want .fm-tile-sm{width:28px;height:28px;border-radius:8px}
.dk-want .fm-tile-notion{border:1px solid var(--v-border)}
.dk-foot{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--v-border);font:400 13px/1.4 var(--sans);color:var(--ink-muted)}
.dk-act{display:flex;align-items:center;gap:16px}
/* 2 · the Notion page */
.dk-crumb{margin:0;display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid var(--v-border);font:400 12px/1 var(--sans);color:var(--ink-muted);white-space:nowrap;overflow:hidden}
.dk-crumb i{font-style:normal}.dk-crumb b{font-weight:500;color:var(--ink)}
.dk-crumb-mark{display:grid;place-items:center;width:16px;height:16px;color:var(--ink);flex:none}
.dk-crumb-mark svg{width:16px;height:16px}
.dk-page{gap:11px;padding:20px 30px 26px}
.dk-page-t{font:700 28px/1.15 var(--display);letter-spacing:-0.02em;color:var(--ink)}
.dk-callout{margin:0;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:6px;background:var(--surface-2);font:400 12.5px/1.5 var(--sans);color:var(--ink)}
.dk-callout.stop{background:var(--stop-tint);font-size:13px}
.dk-callout-i{flex:none}
.dk-h{font:600 17px/1.3 var(--sans);color:var(--ink);margin-top:4px}
.dk-p{margin:0;font:400 13.5px/1.55 var(--sans);color:var(--ink)}
.dk-check{padding:12px 14px;border:1px solid var(--v-border);border-radius:10px;background:var(--v-page);font-size:13.5px}
.dk-check .hp-stamp{padding:4px 10px;font-size:12px}
/* 3 · the Anki window */
.dk-counts{display:flex;gap:10px;font:500 12px/1 var(--mono)}
.dk-counts .new{color:var(--v-link)}.dk-counts .learn{color:var(--stop)}.dk-counts .due{color:var(--ok)}
.dk-review{align-content:center;justify-items:center;gap:16px;padding:20px 30px;text-align:center}
.dk-cloze{margin:0;font:400 20px/1.45 var(--sans);letter-spacing:-0.012em;color:var(--ink);max-width:30ch;text-wrap:pretty}
.dk-cloze mark{background:var(--v-tint);color:var(--v-heading);padding:0 6px;border-radius:4px;font-weight:600}
.dk-cloze mark.blank{color:var(--v-link)}
.dk-rule{width:100%;border:0;border-top:1px solid var(--v-border);margin:0}
.dk-answer{margin:0;font:400 15px/1.5 var(--sans);color:var(--ink-muted);max-width:34ch;text-wrap:pretty}
.dk-answer b{color:var(--ink)}
.dk-tags{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.dk-tags span{font:500 11px/1 var(--mono);color:var(--ink-muted);padding:5px 8px;border-radius:var(--r);background:var(--v-page);border:1px solid var(--v-border)}
.dk-ease{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--v-border)}
.dk-ease span{display:grid;justify-items:center;gap:3px;padding:14px 0;font:500 13px/1 var(--sans);color:var(--ink);border-right:1px solid var(--v-border)}
.dk-ease span:last-child{border-right:0}
.dk-ease small{font:400 11px/1 var(--mono);color:var(--ink-muted)}
.dk-ease .again{color:var(--stop)}.dk-ease .easy{color:var(--v-link)}
.dk-ease .good{color:var(--ok);font-weight:600;background:var(--ok-tint)}
/* 4 · the question session */
.dk-card .hp-stem{font-size:16px}
.dk-card .hp-opts li{padding:10px 12px}
.dk-why{display:grid;gap:6px;padding:12px 14px;border-radius:10px;background:var(--v-page);border:1px solid var(--v-border)}
.dk-why-k{font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--v-subheading)}
.dk-why p{margin:0;font:400 13px/1.5 var(--sans);color:var(--ink)}
.dk-why-link{font:500 13px/1.4 var(--sans);color:var(--v-link)}
/* 5 · the finding card */
.dk-finding{padding:30px;gap:16px;grid-template-rows:none}
.dk-fk{justify-content:space-between}
.dk-stamp{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--r-pill);font:600 13px/1.2 var(--sans);letter-spacing:0;text-transform:none}
.dk-stamp.refined{background:var(--warn);color:var(--v-on-updated)}
.dk-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dk-lecture{display:grid;gap:8px;align-content:start;padding:16px;border:1px solid var(--v-border);border-radius:12px}
.dk-guide{display:grid;gap:6px;align-content:start;padding:16px;border-radius:12px;background:var(--v-tint);border-left:3px solid var(--v-mist);font:400 13px/1.4 var(--sans);color:var(--ink)}
.dk-guide small{font-size:12px;color:var(--ink-muted)}
.dk-guide .dk-k{color:var(--v-subheading)}
.dk-k{font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.dk-big{font:600 32px/1 var(--display);letter-spacing:-0.02em;color:var(--v-heading);font-variant-numeric:tabular-nums}
.dk-row{margin:0;display:flex;justify-content:space-between;gap:8px;font:400 13px/1.4 var(--sans);color:var(--ink-muted)}
.dk-row b{font:600 13px/1.4 var(--mono);color:var(--ink)}
.dk-struck{position:relative}
.dk-struck i{position:absolute;left:-2px;right:-2px;top:50%;height:2px;background:var(--stop);transform-origin:left}
.dk-gist{list-style:none;margin:0;padding:0;display:grid;gap:8px;font:400 14px/1.4 var(--sans);color:var(--ink)}
.dk-gist li{display:flex;gap:10px;align-items:center}
.dk-gist .ic{width:16px;height:16px}
.dk-gist .keep .ic{stroke:var(--ok)}.dk-gist .gone .ic{stroke:var(--stop)}
.dk-chain{margin-top:auto;font:400 13px/1.4 var(--sans);color:var(--ink-muted)}
.dk-chain .cs-src.ink{color:var(--ink)}
/* the Anki mark (§45) clips its star with an id'd clipPath, and every copy on the page resolves to the first one — which
   is in card 1. A covered card is visibility:hidden (§46), and a hidden clipPath clips everything away, so card 3's mark
   would lose its star the moment card 1 is covered. Keep the clip's geometry visible; the card itself stays at opacity 0. */
.cs.is-pinned .cs-card.is-covered clipPath{visibility:visible}

/* -- the arrivals. Static layout: hidden until the card is lit, then transitions in, staggered. -- */
.cs-js .cs:not(.is-pinned) .cs-card .cs-land{opacity:0;transform:translateY(10px)}
.cs-js .cs:not(.is-pinned) .cs-card .dk-struck .cs-land{opacity:1;transform:scaleX(0)}
.cs-js .cs:not(.is-pinned) .cs-card.is-lit .cs-land{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.cs-js .cs:not(.is-pinned) .cs-card.is-lit .l1{transition-delay:.1s}
.cs-js .cs:not(.is-pinned) .cs-card.is-lit .l2{transition-delay:.2s}
.cs-js .cs:not(.is-pinned) .cs-card.is-lit .l3{transition-delay:.3s}
.cs-js .cs:not(.is-pinned) .cs-card.is-lit .l4{transition-delay:.42s}
.cs-js .cs:not(.is-pinned) .cs-card.is-lit .l5{transition-delay:.54s}
.cs-js .cs:not(.is-pinned) .cs-card.is-lit .l6{transition-delay:.66s}
/* -- pinned: the same elements are drawn from the stage's properties, so they scrub and reverse with the cards -- */
.cs.is-pinned .cs-card[data-card="1"] .cs-land{opacity:var(--q1);transform:translateY(calc((1 - var(--q1)) * 10px))}
.cs.is-pinned .cs-card[data-card="2"] .cs-land{opacity:var(--q2);transform:translateY(calc((1 - var(--q2)) * 10px))}
.cs.is-pinned .cs-card[data-card="3"] .cs-land{opacity:var(--q3);transform:translateY(calc((1 - var(--q3)) * 10px))}
.cs.is-pinned .cs-card[data-card="4"] .cs-land{opacity:var(--q4);transform:translateY(calc((1 - var(--q4)) * 10px))}
.cs.is-pinned .cs-card[data-card="5"] .cs-land{opacity:var(--flip);transform:translateY(calc((1 - var(--flip)) * 10px))}
.cs.is-pinned .cs-card[data-card="5"] .dk-struck .cs-land{opacity:1;transform:scaleX(var(--flip))}
@media (prefers-reduced-motion: reduce){
  .cs-js .cs .cs-card .cs-land,.cs.is-pinned .cs-card .cs-land{opacity:1;transform:none;transition:none}
}
@media (max-width:1079px){
  .dk-body,.dk-page{padding:18px 20px 22px;gap:11px}
  .dk-cloze{font-size:17px}
  .dk-page-t{font-size:24px}
  .dk-finding{padding:22px 20px}
  .dk-bar-deck{max-width:60%}
}
@media (forced-colors: active){
  .dk-bar,.dk-receipt,.dk-want,.dk-callout,.dk-check,.dk-lecture,.dk-guide,.dk-why,.dk-tags span{border:1px solid CanvasText;background:Canvas}
  .dk-disc,.dk-ok,.dk-stamp,.dk-progress i.ok,.dk-progress i.no,.dk-progress i.now{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .dk-struck i{background:CanvasText}
}