/* ShipItWorks design tokens. The ONLY file with raw values (px, rem, colours, durations).
   site.css uses var(--…) only; tools/test_gates.py fails the build on a raw px value in site.css.
   Palette: the live palette (owner decision 2026-11-04). Spacing: 8 px grid (owner rule 2026-11-05),
   with one 4 px half step for hairline gaps inside a control. Type: frames 2:2, 3:2, 4:2 (Figma, Inter stand-in; system fonts ship). */
:root{
 /* colour: Figma variable names in comments */
 --stage:#1A1917;        /* stage/base */
 --stage-deep:#121110;   /* stage/deep */
 --stage-line:#343330;   /* stage/line */
 --stage-fg:#ECEBE6;     /* stage/fg */
 --stage-muted:#CECCC2;  /* stage/muted */
 --stage-link:#F0938D;   /* stage/link */
 --bg:#F3F2EE;           /* surface/bg */
 --surface:#FFFFFF;      /* surface/card */
 --line:#DCDAD2;         /* line/default */
 --track:#E4E2DA;        /* score bar track (v1) */
 --ink:#121110;          /* text/ink */
 --fg:#2A2926;           /* text/fg */
 --muted:#5C5A54;        /* text/muted */
 --red:#B31919;          /* brand/red */
 --red-d:#7D1111;
 --red-hi:#D32222;
 --link:#A31717;         /* brand/link */
 --on-red:#FFFFFF;       /* brand/on-red */

 /* spacing: 8 px grid */
 --sp-h:4px; --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:40px; --sp-6:48px; --sp-8:64px; --sp-12:96px;
 --gutter:clamp(16px,4.4vw,64px);
 --sec-top:clamp(32px,6vw,88px); --sec-bottom:clamp(48px,7vw,112px);
 --band-top:clamp(40px,5vw,72px); --band-bottom:clamp(48px,6vw,80px);
 --card-pad:clamp(24px,2.5vw,32px);

 /* type */
 --t-display:clamp(2.75rem,1.6rem + 4.6vw,5rem);
 --t-score:clamp(4rem,2.8rem + 4vw,6rem);
 --t-hero:clamp(2rem,1.2rem + 1.9vw,2.875rem);
 --t-title:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);
 --t-card:clamp(1.5rem,1.35rem + .5vw,1.75rem);
 --t-lede:clamp(1.125rem,1.05rem + .35vw,1.375rem);
 --t-num:1.625rem; --t-num-sm:1.375rem; --t-brand:1.125rem; --t-body:1.0625rem; --t-ui:1rem; --t-nav:.9375rem;
 --t-small:.875rem; --t-xs:.8125rem; --t-label:.75rem; --t-sup:.75rem;
 --lh-body:1.6; --lh-row:1.5; --lh-marker:1.7; --lh-tight:1.1; --lh-display:1.02; --lh-ui:1.3; --lh-lede:1.45;
 --fw-reg:400; --fw-mid:550; --fw-bold:650;
 --track-score:-.03em; --track-tight:-.02em; --track-snug:-.01em; --track-label:.06em; --track-eyebrow:.08em;

 /* measures */
 --measure:65ch; --w-copy:35rem; --w-note:46rem; --w-foot:47.5rem; --w-media:39rem; --w-max:82rem; --w-score:24rem; --w-vid:50rem;
 --w-wide-table:88rem; --w-table:36rem; --w-rowhead:9.5rem; --w-marker:24px;

 /* lines, radii, targets */
 --ul-off:.2em; --ul-off-nav:.45em; --bw:1px; --bw-2:2px; --focus-w:3px; --focus-off:3px; --r-lg:16px; --r-sm:8px; --r-xs:4px;
 --target:48px; --target-min:44px; --icon:32px;

 /* Helmline page (2026-11-06): the "proven" proof label and the deployment diagram (SVG user units scale with the drawing) */
 --ok:#1D6B38;
 --w-diagram:28rem; --t-dg:13px; --t-dg-s:12px; --dg-dash:6 4;

 /* motion (spec 4:120): controls 150 ms, footage reveal 500 ms ease-out, below the fold only */
 --t-control:150ms; --t-reveal:500ms; --ease-out:cubic-bezier(.2,.7,.2,1); --rise:16px;

 /* 2026-11-05: on the owner's Linux machine system-ui and sans-serif both resolve to a monospace-looking font (measured in Chrome).
    Named fonts first, so the site never depends on a machine's generic mapping. Still system fonts only, nothing downloaded. */
 --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Liberation Sans","Noto Sans","DejaVu Sans",system-ui,sans-serif;
 color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{
 --bg:#121110;--surface:#1A1917;--track:#2A2926;--fg:#DEDCD4;--ink:#F5F5F5;--muted:#B4B2A9;--line:#343330;--link:#F0938D;--ok:#86CFA0}}

/* ShipItWorks site styles. Values come from tokens.css only (no raw px here; tools/test_gates.py checks).
   Layout follows Figma file 8ZH0JI6EJiq89ghVG6hwoe, page "Designs" (frames 2:2, 2:66, 3:2, 4:76, 4:2, spec 4:120).
   gen.py serves tokens.css + site.css as one file, /css/site.css. Breakpoints are in rem because custom properties cannot be used in media queries. */
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;font-family:var(--font)}
body{margin:0;background:var(--bg);color:var(--fg);font-size:var(--t-body);line-height:var(--lh-body);overflow-wrap:break-word;overflow-x:clip;
 font-variant-numeric:tabular-nums}                                   /* every number lines up (spec 4:120, trend 4) */
body.dark{background:var(--stage);color:var(--stage-fg)}
a{color:var(--link);text-underline-offset:var(--ul-off);text-decoration-thickness:var(--bw)}a:hover{text-decoration-thickness:var(--bw-2)}
.dark main a,.hero a,.foot a{color:var(--stage-link)}
:focus-visible{outline:var(--focus-w) solid var(--red-hi);outline-offset:var(--focus-off);border-radius:var(--r-xs)}
.dark :focus-visible,.hero :focus-visible,.top :focus-visible,.foot :focus-visible{outline-color:var(--stage-link)}
.skip{position:absolute;left:-100vw}.skip:focus{left:var(--sp-2);top:var(--sp-2);background:var(--surface);color:var(--ink);padding:var(--sp-1) var(--sp-2);z-index:9}
.vh{position:absolute;width:var(--bw);height:var(--bw);overflow:hidden;clip-path:inset(50%);white-space:nowrap}
h1,h2,h3{color:var(--ink);line-height:var(--lh-tight);letter-spacing:var(--track-snug);font-weight:var(--fw-bold)}
.dark h1,.dark h2,.hero h1,.hero h2{color:var(--stage-fg)}
p{max-width:var(--measure)}

/* Nav (frame 2:3): wordmark left, three links right */
.top{display:flex;flex-wrap:wrap;gap:var(--sp-h) var(--sp-3);align-items:center;justify-content:space-between;padding:var(--sp-2) var(--gutter);background:var(--stage)}
.brand{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--target-min);color:var(--stage-fg);text-decoration:none;font-weight:var(--fw-bold);font-size:var(--t-brand)}
.brand img{border-radius:var(--r-sm)}
.top ul{display:flex;gap:0 var(--sp-2);list-style:none;margin:0;padding:0;font-size:var(--t-nav)}
.top li{margin:0}
.top li a{display:flex;align-items:center;min-height:var(--target-min);padding:0 var(--sp-1);white-space:nowrap;color:var(--stage-muted);text-decoration:none;border-radius:var(--r-xs);
 transition:color var(--t-control)}
.top li a:hover,.top li a[aria-current]{color:var(--stage-fg)}
.top li a[aria-current]{text-decoration:underline;text-decoration-color:var(--red-hi);text-decoration-thickness:var(--bw-2);text-underline-offset:var(--ul-off-nav)}
@media (max-width:26rem){.top{padding-left:var(--sp-2);padding-right:var(--sp-2)}.top ul{gap:0}.top li a{padding:0 var(--sp-h)}.brand span{position:absolute;width:var(--bw);height:var(--bw);overflow:hidden;clip-path:inset(50%);white-space:nowrap}}  /* wordmark stays the link name for screen readers */

main{display:block}
main>section,main>p.next{padding-left:var(--gutter);padding-right:var(--gutter)}

/* Stage sections */
.hero{background:var(--stage);color:var(--stage-fg);padding-top:var(--sec-top);padding-bottom:var(--sec-bottom)}
.hero h1{font-size:var(--t-display);font-weight:var(--fw-bold);letter-spacing:var(--track-tight);line-height:var(--lh-display);margin:0 0 var(--sp-3);text-wrap:balance}
.hero .lede{font-size:var(--t-lede);line-height:var(--lh-lede);color:var(--stage-muted);max-width:var(--w-copy);margin:0}
.hero p{color:var(--stage-muted)}
.hero .intro{font-size:var(--t-small);max-width:var(--w-copy);margin:var(--sp-2) 0 0;line-height:var(--lh-lede)}
.eyebrow{font-size:var(--t-xs);font-weight:var(--fw-mid);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--stage-link)!important;margin:0 0 var(--sp-3)}
.hero.plain{padding-bottom:var(--sp-6)}

/* Actions: one primary (filled red) + one secondary (outline), 48 px targets, 150 ms state changes */
.actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-4) 0 0}
.btn,.btn-2,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:var(--target);padding:0 var(--sp-3);border-radius:var(--r-sm);
 font-weight:var(--fw-bold);font-size:var(--t-ui);line-height:1;text-decoration:none;text-align:center;
 transition:background-color var(--t-control),color var(--t-control),border-color var(--t-control)}
.hero .btn,.btn{background:var(--red);color:var(--on-red);border:var(--bw) solid var(--red)}
.btn:hover{background:var(--red-d);border-color:var(--red-d)}
.hero .btn-2,.btn-2{border:var(--bw) solid var(--stage-muted);color:var(--stage-fg)}
.btn-2:hover{background:var(--stage-line)}
.btn-ghost{border:var(--bw) solid currentColor;color:var(--link)}
.dark main .btn-ghost{color:var(--stage-link)}
.btn-ghost:hover,.dark main .btn-ghost:hover{background:var(--red);border-color:var(--red);color:var(--on-red)}
@media (max-width:40rem){.actions{flex-direction:column;align-items:stretch}.actions a{width:100%}}

/* Home hero (frame 2:9): copy left, footage right; one column on phones (2:70) */
.split{display:grid;gap:var(--sp-5);align-items:center}
@media (min-width:64rem){.split{grid-template-columns:minmax(0,1fr) minmax(0,var(--w-media));gap:var(--sp-8)}}
.h-copy,.h-media{min-width:0}

/* Home (PLAN.md:146; owner 2026-11-05): who/what line, Yield hero with a still, featured four, the rest, rubric link */
.whowhat{font-size:var(--t-small);color:var(--stage-muted);margin:0 0 var(--sp-3)}
@media (min-width:64rem){.home.split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.home{padding-top:var(--sp-5)}
.home h1{margin-bottom:var(--sp-2);font-size:var(--t-hero);letter-spacing:var(--track-snug);line-height:var(--lh-tight)}
.hscore{font-size:var(--t-ui);color:var(--stage-muted);margin:0}.hscore b{font-size:var(--t-num);font-weight:var(--fw-bold);color:var(--stage-fg)}
.hscore a,.pscore a{display:inline-flex;align-items:center;min-height:var(--target-min)}
.hdate{font-size:var(--t-small);margin:0}
.more{margin:var(--sp-2) 0 0}.more a{display:inline-flex;align-items:center;min-height:var(--target-min)}
.hero .note{font-size:var(--t-xs);color:var(--stage-muted);max-width:var(--w-copy);margin:var(--sp-2) 0 0}
.hero-shot{margin:0}
.hero-shot img{display:block;width:100%;height:auto;border-radius:var(--r-lg);border:var(--bw) solid var(--stage-line)}
.hero-shot figcaption{font-size:var(--t-xs);color:var(--stage-muted);margin-top:var(--sp-1)}
.fgrid,.ggrid{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
@media (min-width:40rem){.fgrid,.ggrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.ggrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fcard,.gcard{margin:0;padding:var(--sp-3);background:var(--stage);border:var(--bw) solid var(--stage-line);border-radius:var(--r-lg);min-width:0}
.fcard h3,.gcard h3{margin:0 0 var(--sp-1);font-size:var(--t-card)}.gcard h3{font-size:var(--t-brand)}
.fcard h3 a,.gcard h3 a{color:var(--stage-fg);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--target-min)}
.fcard h3 a:hover,.gcard h3 a:hover{text-decoration:underline}
.fcard p,.gcard p{color:var(--stage-muted);margin:0 0 var(--sp-1)}
.pplay{font-size:var(--t-xs)}.pscore{font-size:var(--t-small)}.pscore b{font-size:var(--t-num-sm);color:var(--stage-fg)}
.rubric{margin:var(--sp-4) 0 0;color:var(--stage-muted)}.rubric a{display:inline-flex;align-items:center;min-height:var(--target-min)}

/* Product footage frame (2:19, 3:26, 4:87) */
.footage{margin:0;background:var(--stage-deep);border:var(--bw) solid var(--stage-line);border-radius:var(--r-lg);overflow:hidden}
.chrome{display:flex;gap:var(--sp-1);padding:var(--sp-2);line-height:0}
.screen{position:relative;background:var(--stage)}
.screen video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--stage)}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-60%);pointer-events:none;line-height:0}
.playing .play{display:none}
.footage figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--sp-h) var(--sp-2);padding:var(--sp-2);
 border-top:var(--bw) solid var(--stage-line);font-size:var(--t-small);color:var(--stage-fg);line-height:var(--lh-ui)}
.fn{font-weight:var(--fw-mid)}.fl{font-size:var(--t-xs)}
.fs{color:var(--stage-muted);font-size:var(--t-xs)}.fs b{color:var(--stage-fg);font-size:var(--t-num-sm);font-weight:var(--fw-bold);margin-right:var(--sp-h)}
.footage.empty{aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:var(--sp-3)}
.footage.empty p{color:var(--stage-muted);margin:0}.footage.empty b{color:var(--stage-fg)}
.disclose{font-size:var(--t-xs);color:var(--stage-muted);margin:var(--sp-1) 0 0}
.vnote{display:block;color:var(--stage-fg);font-weight:var(--fw-mid);margin-bottom:var(--sp-h)}
@media (max-width:40rem){.chrome{display:none}}

/* Video page: one page per published video (owner 2026-11-05) */
.vpage .footage{margin:var(--sp-3) 0;max-width:var(--w-vid)}
.vpage h1{margin-bottom:0}
.vpnote{margin:var(--sp-2) 0 0;max-width:var(--w-note)}
.vlinks{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--sp-3)}
.vlinks li{margin:0}.vlinks a{display:inline-flex;align-items:center;min-height:var(--target-min)}
.vpage .note{max-width:var(--w-note)}

/* Chapter player (Yield v6): native video plus a list of chapter links; current chapter marked */
.chapter-list{list-style:none;margin:var(--sp-1) 0 0;padding:0;display:grid;gap:var(--sp-h)}
.chapter-list li{margin:0}
.chapter-list a{display:flex;gap:var(--sp-1);align-items:center;min-height:var(--target-min);padding:0 var(--sp-1);border-radius:var(--r-sm);color:var(--stage-muted);text-decoration:none}
.chapter-list a:hover{color:var(--stage-fg);text-decoration:underline}
.chapter-list a[aria-current]{color:var(--stage-fg);background:var(--stage-deep);font-weight:var(--fw-mid)}

/* Reveal (spec 4:120, trends 1 and 6): only footage that starts below the first screen gets .pre (js/site.js), only when motion is allowed.
   Opacity and transform only, so nothing moves in the layout (no layout shift). */
@media (prefers-reduced-motion:no-preference){
 .reveal.pre{opacity:0;transform:translateY(var(--rise));transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out)}
 .reveal.pre.in{opacity:1;transform:none}}

/* Product first screen (3:9 desktop, 4:80 phone). Phone order: copy, score, actions, footage (owner 2026-11-04). */
.prod{display:grid;gap:var(--sp-3);grid-template-areas:"copy" "score" "act" "media"}
.p-copy{grid-area:copy;min-width:0}.p-score{grid-area:score;min-width:0}.p-media{grid-area:media;min-width:0}.p-act{grid-area:act;margin:0}
@media (min-width:64rem){
 .prod{grid-template-columns:minmax(0,1fr) minmax(0,var(--w-media));column-gap:var(--sp-8);row-gap:var(--sp-3);align-items:start;
  grid-template-areas:"copy media" "act media" "score media"}}
.crumb{font-size:var(--t-small);margin:0 0 var(--sp-3)}.hero .crumb a{color:var(--stage-muted)}
.scorebox{margin:0;display:inline-block;max-width:var(--w-score);background:var(--stage-deep);border:var(--bw) solid var(--stage-line);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4)}
.scorebox .eyebrow{color:var(--stage-muted)!important;font-size:var(--t-label);margin:0 0 var(--sp-2)}
.big{display:flex;align-items:baseline;gap:var(--sp-1);margin:0;line-height:1}
.big b{font-size:var(--t-score);font-weight:var(--fw-bold);letter-spacing:var(--track-score);color:var(--stage-fg)}
.big span{font-size:var(--t-num-sm);color:var(--stage-muted)}
.scorebox figcaption{margin-top:var(--sp-2);font-size:var(--t-small);line-height:var(--lh-lede);color:var(--stage-muted)}
.scorebox figcaption p,.scorebox .journey{margin:var(--sp-1) 0 0;color:var(--stage-muted)}
.scorebox figcaption b{color:var(--stage-fg)}
@media (max-width:40rem){.scorebox{display:block;padding:0;background:none;border:0}.scorebox .eyebrow{display:none}}

/* Proof and gaps (3:39): light surface, two cards side by side, gaps next to claims */
.proof{background:var(--bg);color:var(--fg);padding-top:var(--band-top);padding-bottom:var(--band-bottom)}
.proof-in{display:grid;gap:var(--sp-3) var(--sp-6);max-width:var(--w-max)}
@media (min-width:56rem){.proof-in{grid-template-columns:1fr 1fr;align-items:start}}
.pcard{min-width:0;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-lg);padding:var(--card-pad)}
.pcard h2{font-size:var(--t-card);margin:0 0 var(--sp-1);letter-spacing:var(--track-snug)}
.pcard .sub{color:var(--muted);margin:0 0 var(--sp-h)}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:var(--w-marker) minmax(0,1fr);overflow-wrap:anywhere;gap:var(--sp-2);margin:var(--sp-2) 0 0;padding:var(--sp-2) 0 0;border-top:var(--bw) solid var(--line);line-height:var(--lh-row)}
.rows li::before{font-weight:var(--fw-bold);font-size:var(--t-small);color:var(--link);line-height:var(--lh-marker)}
.ok li::before{content:"\2713"}
.todo{counter-reset:gap}.todo li{counter-increment:gap}.todo li::before{content:counter(gap)}
a.trace,.hero a.trace{color:inherit;text-decoration-color:var(--line)}a.trace:hover{text-decoration-color:var(--link)}
.hero a.trace{text-decoration-color:var(--stage-line)}.hero a.trace:hover{text-decoration-color:var(--stage-link)}

/* Bands below the first screen */
.band{padding-top:var(--band-top);padding-bottom:var(--band-bottom)}
.dark .band{background:var(--stage-deep);border-top:var(--bw) solid var(--stage-line)}
.dark .hero.plain+.band{background:var(--stage);border-top:0;padding-top:0}
.band h2{font-size:var(--t-title);margin:0 0 var(--sp-2);letter-spacing:var(--track-snug)}
.band .sub{color:var(--stage-muted);margin:0 0 var(--sp-3)}
.band .note{font-size:var(--t-small);color:var(--stage-muted);max-width:var(--w-note);margin-top:var(--sp-4)}

/* Product table (2:37, 4:12): stage rules only, no boxes; numbers in tabular figures */
.ptable table{width:100%;border-collapse:collapse;font-size:var(--t-body);line-height:var(--lh-ui)}
.ptable th,.ptable td{text-align:left;vertical-align:baseline;padding:var(--sp-2) var(--sp-2) var(--sp-2) 0;border-top:var(--bw) solid var(--stage-line)}
.ptable thead th{font-size:var(--t-label);font-weight:var(--fw-mid);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--stage-muted)}
.ptable tbody th{font-weight:var(--fw-bold);width:22%}
.ptable tbody th a{display:inline-flex;align-items:center;min-height:var(--target-min);color:var(--stage-fg);text-decoration:none}
.ptable tbody th a:hover{text-decoration:underline}
.ptable .who{color:var(--stage-muted);width:44%}
.ptable .sc{width:16%;white-space:nowrap}.ptable .sc b{font-size:var(--t-num);font-weight:var(--fw-bold);color:var(--stage-fg)}.ptable .sc .stage{display:inline-flex;align-items:center;min-height:var(--target-min);font-size:var(--t-small);color:var(--stage-muted);margin-left:var(--sp-1)}
.ptable .dm{color:var(--stage-muted)}
.ptable .dm a{display:inline-flex;align-items:center;min-height:var(--target-min)}
@media (max-width:40rem){.ptable .who,.ptable .dm,.ptable thead{display:none}.ptable tbody th{width:auto}.ptable .sc{text-align:right;padding-right:0}}

/* Product page foot action: the product's own email, quiet */
.cta-foot{background:var(--bg);padding-top:0;padding-bottom:var(--sp-8)}
.cta-foot p{color:var(--muted);margin:0 0 var(--sp-2)}
.cta-foot .note{font-size:var(--t-small);margin-top:var(--sp-2);max-width:var(--w-note)}
.small{display:inline-flex;align-items:center;min-height:var(--target-min);margin-left:var(--sp-2);font-size:var(--t-small)}
p.next{padding-top:var(--sp-2);padding-bottom:var(--sp-8);margin:0}

/* Reading pages (how we score, about, credits, privacy, claims, transcripts) */
main>section:not(.hero):not(.band):not(.proof):not(.cta-foot){padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
main>section:not(.hero):not(.band):not(.proof):not(.cta-foot)>*:not(.tablewrap){max-width:var(--w-note)}
.tablewrap{overflow-x:auto;margin:var(--sp-2) var(--gutter);background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-lg);padding:var(--sp-1) var(--sp-3) var(--sp-2)}
main>section .tablewrap{margin-left:0;margin-right:0}
.tablewrap.wide table{min-width:var(--w-wide-table);table-layout:fixed;font-size:var(--t-xs)}
.tablewrap.wide th,.tablewrap.wide td{padding:var(--sp-1);vertical-align:top;overflow-wrap:anywhere;text-align:left}
.tablewrap.wide tbody th[scope=row]{position:sticky;left:0;z-index:1;background:var(--surface);width:var(--w-rowhead)}
.more-rows summary{display:inline-flex;align-items:center;min-height:var(--target-min);cursor:pointer;color:var(--link);font-weight:var(--fw-mid)}
.skip-src{display:inline-flex;align-items:center;min-height:var(--target-min);margin-left:var(--sp-1)}
#after-sources:focus,#cmp-sources-h:focus{outline:none}
.cmp-src{font-size:var(--t-sup);white-space:nowrap}.cmp-sources .checked{font-size:var(--t-xs);color:var(--muted);white-space:nowrap}.cmp-sources{font-size:var(--t-small);overflow-wrap:anywhere}
.tablewrap table{border-collapse:collapse;min-width:var(--w-table);width:100%;font-size:var(--t-small)}
caption{text-align:left;color:var(--muted);padding:var(--sp-2) 0 var(--sp-1)}
.tablewrap th,.tablewrap td{text-align:left;vertical-align:top;padding:var(--sp-1) var(--sp-2) var(--sp-1) 0;border-bottom:var(--bw) solid var(--line)}
.tablewrap thead th{border-bottom:var(--bw-2) solid var(--ink);color:var(--ink)}
.faq dt{font-weight:var(--fw-bold);color:var(--ink);margin-top:var(--sp-2)}.faq dd{margin:var(--sp-h) 0 0}
.note{font-size:var(--t-small);color:var(--muted);max-width:var(--w-note)}
.journey{margin:var(--sp-1) 0 0}
li{margin:var(--sp-1) 0}
.policy .meta{margin:var(--sp-2) 0}

/* Footer (2:63) */
.foot{background:var(--stage);color:var(--stage-muted);border-top:var(--bw) solid var(--stage-line);padding:var(--sp-5) var(--gutter) var(--sp-6);font-size:var(--t-small)}
.foot-about{max-width:var(--w-foot);margin:0 0 var(--sp-1);line-height:var(--lh-lede)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 var(--sp-3);list-style:none;margin:0;padding:0}
.foot-links li{margin:0}.foot-links a{display:inline-flex;align-items:center;min-height:var(--target-min)}
.foot-links.quiet a{color:var(--stage-muted)}

/* Forced colours (Windows High Contrast): keep borders on controls and cards so shapes survive without background colour */
@media (forced-colors:active){.btn,.btn-2,.btn-ghost,.footage,.pcard,.scorebox{border:var(--bw) solid CanvasText}.play{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ===== Version-one layout (owner 2026-11-05): dark hero, light sections below, v1 section order ===== */
.home .h-head,.home .h-media,.home .h-rest{min-width:0}
.home.split{grid-template-areas:"head" "media" "rest";gap:var(--sp-3)}
.home .h-head{grid-area:head}.home .h-media{grid-area:media}.home .h-rest{grid-area:rest}
@media (min-width:64rem){.home.split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"head media" "rest media";column-gap:var(--sp-8);align-items:start}}
.home h1{margin-bottom:0}
.bar{display:block;width:100%;height:var(--sp-1);margin:var(--sp-1) 0;border-radius:var(--r-xs)}
.bar-track{fill:var(--track)}.bar-fill{fill:var(--red)}.bar-gap{fill:var(--surface)}
.hero .bar-track,.dark .bar-track{fill:var(--stage-line)}.hero .bar-gap{fill:var(--stage)}
.rail{max-width:var(--w-note);margin:var(--sp-4) var(--gutter) 0;padding:var(--card-pad);background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-lg)}
.rail .scorebox{display:block;max-width:none;background:none;border:0;padding:0}
.rail .scorebox .eyebrow{color:var(--muted)!important}
.rail .big b{color:var(--ink)}.rail .big span,.rail .scorebox figcaption,.rail .scorebox figcaption p,.rail .scorebox .journey{color:var(--muted)}
.rail .scorebox figcaption b{color:var(--ink)}
.rail-stages{display:grid;grid-template-columns:25fr 35fr 25fr 15fr;list-style:none;margin:0;padding:0;font-size:var(--t-xs);color:var(--muted)}
.rail-stages li{margin:0}
.pledge{max-width:var(--w-note);margin:var(--sp-4) var(--gutter);padding:var(--sp-2) var(--sp-3);background:var(--surface);border:var(--bw) solid var(--line);border-left:var(--focus-w) solid var(--red);border-radius:var(--r-sm);font-size:var(--t-small)}
.pledge b{display:block;color:var(--ink)}
.vid-wrap{max-width:var(--w-vid);margin:var(--sp-4) var(--gutter) 0}
.vid-wrap .disclose{color:var(--muted)}.vid-wrap .vnote{color:var(--ink)}
.sm-wrap,.feat-wrap{padding-top:var(--band-top)}
.sm{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:grid;gap:var(--sp-2) var(--sp-4)}
@media (min-width:40rem){.sm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.sm{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sm li{margin:0;min-width:0}.sm a{color:var(--ink);font-weight:var(--fw-bold)}
.smn{margin:0;font-size:var(--t-small);color:var(--muted)}.smn b{color:var(--ink)}
.feat-wrap .fcard,.feat-wrap .gcard{background:var(--surface);border-color:var(--line)}
.feat-wrap .fcard h3 a,.feat-wrap .gcard h3 a{color:var(--ink)}
.feat-wrap .fcard p,.feat-wrap .gcard p,.feat-wrap .pscore,.feat-wrap .pplay{color:var(--muted)}
.feat-wrap .pscore b{color:var(--ink)}
.app{margin:var(--sp-6) var(--gutter) 0;padding-top:var(--sp-4);border-top:var(--bw) solid var(--line)}
.app>h2{font-size:var(--t-title);margin:0 0 var(--sp-1)}.app>h2 a{color:var(--ink);text-decoration:none}
.app>.lede{max-width:var(--w-copy)}
.app .rail,.app .vid-wrap,.app .pledge{margin-left:0;margin-right:0}
.app .proof{padding-left:0;padding-right:0}
main>section.cta{padding-top:var(--sp-3)}

/* v1 nav has six items: on phones whole items wrap into rows, never mid-name */
@media (max-width:40rem){.top ul{flex-wrap:wrap;gap:0;font-size:var(--t-small)}.top nav{width:100%}}

/* links inside the dark video frame keep the stage link colour on light pages too (axe 2026-11-05) */
.footage a{color:var(--stage-link)}
/* ---- master prompt 4 (2026-11-05): menu button below 60rem (native popover, no script), Home hero words + Yield block, scores table */
.menu{display:none;min-height:var(--target-min);padding:0 var(--sp-2);border:var(--bw) solid var(--stage-muted);border-radius:var(--r-sm);background:transparent;color:var(--stage-fg);font:inherit;font-size:var(--t-nav);cursor:pointer}
.menu:hover{background:var(--stage-line)}
.top ul[popover]{position:static;inset:auto;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;display:flex}
@media (max-width:60rem){
 .menu{display:inline-flex;align-items:center}
 .top ul[popover]{display:none}
 .top ul[popover]:popover-open{display:flex;flex-direction:column;position:fixed;inset:var(--sp-8) var(--sp-2) auto auto;min-width:min(20rem,calc(100vw - 2 * var(--sp-2)));padding:var(--sp-1);background:var(--stage-deep);border:var(--bw) solid var(--stage-line);border-radius:var(--r-sm)}
 .top ul[popover]:popover-open li a{padding:0 var(--sp-2);font-size:var(--t-ui)}
 .top nav{width:auto}
}
.home .actions{flex-direction:row;flex-wrap:wrap;align-items:center}.home .actions a{width:auto}
.h-yield{font-size:var(--t-card);margin:0 0 var(--sp-1)}.h-yield a{color:var(--stage-fg);text-decoration:none}.h-yield a:hover{text-decoration:underline}
.h-one{font-size:var(--t-ui);color:var(--stage-fg);margin:0 0 var(--sp-1);max-width:var(--w-note)}
.scores{padding-top:var(--band-top)}
.score-table td,.score-table th{vertical-align:top}
.score-table .tscore{margin:0;font-size:var(--t-small);white-space:nowrap}.score-table .tscore b{font-size:var(--t-ui)}
.score-table .tscore a{display:inline-flex;align-items:center;min-height:var(--target-min)}
.score-table td:last-child a{display:inline-flex;align-items:center;min-height:var(--target-min);white-space:nowrap}
.score-table .dur{color:var(--muted);font-size:var(--t-xs);white-space:nowrap}
.watch{margin:var(--sp-2) 0}.watch a{display:inline-flex;align-items:center;min-height:var(--target-min);font-weight:var(--fw-mid)}
.transcript .tc{font-variant-numeric:tabular-nums;color:var(--muted);font-size:var(--t-small);margin-right:var(--sp-1)}
.home .h-head .lede{margin:var(--sp-2) 0 0}
.home .h-rest{border-top:var(--bw) solid var(--stage-line);padding-top:var(--sp-3)}
@media (max-width:40rem){
 .tablewrap .score-table{min-width:0;display:block}.score-table tbody,.score-table caption{display:block}.score-table .tscore{white-space:normal}
 .score-table thead{position:absolute;width:var(--bw);height:var(--bw);overflow:hidden;clip-path:inset(50%)}
 .score-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--sp-2);padding:var(--sp-2) 0;border-bottom:var(--bw) solid var(--line)}
 .score-table th,.score-table td{display:block;border:0;padding:0}
 .score-table td:nth-child(2){grid-column:1 / -1;order:3;font-size:var(--t-small);margin:var(--sp-h) 0}
 .score-table td:nth-child(3){grid-column:1 / -1;order:4}
 .score-table td:nth-child(4){order:2;text-align:right}
}
@media (max-width:26rem){.brand span{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:nowrap}}
.tablewrap{width:fit-content;max-width:calc(100% - 2 * var(--gutter));box-sizing:border-box}main>section .tablewrap{max-width:100%}
.home .vnote{font-weight:var(--fw-mid)}
@media (max-width:40rem){.home{padding-top:var(--sp-3)}.home .eyebrow{margin-bottom:var(--sp-1)}.home .actions{margin-top:var(--sp-2)}.home .h-head .lede{font-size:var(--t-ui)}}

/* ---- Helmline page for the MSP buyer (2026-11-06; docs/helmline-build-notes.md): score beside the video (.prod, frame 3:9),
   proof labels as text chips (colour is never the only cue), workflow and build lists, the deployment diagram, three proof cards */
.prod .p-act{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-1)}.prod .p-act .note{flex-basis:100%}
.prod .p-act .small{margin-left:0}
.hrail{max-width:var(--w-score)}.hrail .scorebox{display:block}
.hero .rail-stages{color:var(--stage-muted)}
.flag .hscore{margin:var(--sp-2) 0 0}
.hproof{font-size:var(--t-small);margin:var(--sp-h) 0 0;max-width:var(--w-copy)}.hproof a{font-weight:var(--fw-mid)}
.flag .prod{grid-template-areas:"copy" "act" "media" "score"}   /* the four flagship pages, below 64rem: the linked score line sits in the copy, so the action and the video come next */
@media (min-width:64rem){.flag .prod{grid-template-areas:"copy media" "act media" "score media"}}
.lbl{display:inline-block;font-size:var(--t-label);font-weight:var(--fw-bold);letter-spacing:var(--track-label);text-transform:uppercase;
 line-height:var(--lh-marker);padding:0 var(--sp-1);border:var(--bw) solid currentColor;border-radius:var(--r-xs);white-space:nowrap;vertical-align:baseline}
.lbl-proven{color:var(--ok)}.lbl-built{color:var(--muted)}.lbl-not-built{color:var(--link)}
.msp{padding-top:var(--band-top)}
.msp h2{font-size:var(--t-title);margin:0 0 var(--sp-2)}
.msp .sub{color:var(--muted);margin:0 0 var(--sp-1);font-size:var(--t-small)}
.wf{margin:var(--sp-2) 0 0;max-width:var(--w-note)}
.wf-row{border-top:var(--bw) solid var(--line);padding:var(--sp-2) 0}
.wf dt{font-weight:var(--fw-bold);color:var(--ink);margin:0 0 var(--sp-h)}
.wf dd{margin:var(--sp-1) 0 0;line-height:var(--lh-row)}
@media (min-width:48rem){.wf-row{display:grid;grid-template-columns:var(--w-rowhead) minmax(0,1fr);column-gap:var(--sp-3)}
 .wf dt{grid-column:1;grid-row:1 / span 4}.wf dd{grid-column:2}.wf dd:first-of-type{margin-top:0}}
.arch .diagram{margin:var(--sp-4) 0 0;max-width:var(--w-diagram)}
.diagram svg{display:block;width:100%;height:auto}
.diagram figcaption{font-size:var(--t-xs);color:var(--muted);margin-top:var(--sp-1)}
.dg-b{fill:var(--surface);stroke:var(--line);stroke-width:var(--bw)}
.dg-g{fill:none;stroke:var(--muted);stroke-width:var(--bw)}
.dg-opt{stroke-dasharray:var(--dg-dash)}
.dg-a{stroke:var(--muted);stroke-width:var(--bw-2)}.dg-ah{fill:var(--muted)}
.dg-t{font-size:var(--t-dg);font-weight:var(--fw-bold);fill:var(--ink)}
.dg-s{font-size:var(--t-dg-s);fill:var(--muted)}
.pbn{max-width:var(--w-max)}
.pbn h2{font-size:var(--t-title);margin:0 0 var(--sp-1)}
.pbn>.sub{color:var(--muted);margin:0 0 var(--sp-3)}
.pbn-grid{display:grid;gap:var(--sp-3)}
@media (min-width:56rem){.pbn-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"p b" "n b";align-items:start}
 .pbn-proven{grid-area:p}.pbn-built{grid-area:b}.pbn-not-built{grid-area:n}}
.pbn .pcard h3{margin:0;font-size:var(--t-card)}.pbn .pcard h3 .lbl{font-size:var(--t-small)}.pbn .n{color:var(--muted);font-weight:var(--fw-reg)}
.lblrows li{grid-template-columns:minmax(0,1fr);gap:0}
.from{display:block;font-size:var(--t-xs);color:var(--muted)}
.cta-foot h2{font-size:var(--t-title);margin:0 0 var(--sp-2);padding-top:var(--band-top)}
.cta-foot .small{margin-left:var(--sp-2)}

/* ---- Layout pass 2026-11-06 (owner, 2026-11-05): Home hero copy in proportion to the video beside it, two columns only.
   Measured (docs/decision-ledger-2026-11-05.md, layout pass): the left block (eyebrow, H1, sub line, buttons) within 5% of the
   video block's height at 1440 and 1920. Tokens only: sub line two steps up (--t-lede to --t-card) under --measure; buttons grow
   in height, padding and text together (--sp-8, --sp-4, --t-lede), never below --target. From 110rem the video column is wider
   than the copy can follow in one step, so the H1 takes a second step (--t-display to --t-score) and the gaps one spacing step.
   Phones and tablets (below 64rem) keep the earlier sizes. */
@media (min-width:64rem){
 .home h1{font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--track-tight)}
 .home .h-head .lede{font-size:var(--t-card);max-width:var(--measure)}
 .home .actions .btn,.home .actions .btn-2{min-height:var(--sp-8);padding:0 var(--sp-4);font-size:var(--t-lede)}
}
@media (min-width:110rem){
 .home h1{font-size:var(--t-score)}
 .home .h-head .eyebrow{margin-bottom:var(--sp-4)}
 .home .h-head .lede{max-width:var(--w-copy);margin-top:var(--sp-4)}
 .home .actions{margin-top:var(--sp-6)}
}