.stats,.glance{margin:0;}
.stats dd,.glance dd{margin:0;}
.stat{display:flex;flex-direction:column-reverse;}
[hidden]{display:none !important;}
*{margin:0;padding:0;box-sizing:border-box;}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent);color:#fff;}
html{-webkit-tap-highlight-color:color-mix(in srgb,var(--accent) 22%,transparent);}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;
  font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--accent-text);}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--gutter);}
.prose{max-width:720px;}
h2.eyebrow{font-family:var(--sans);font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;margin:0;text-wrap:initial;}
.eyebrow{font-size:0.8rem;letter-spacing:0.02em;color:var(--ink-faint);
  display:flex;align-items:center;gap:12px;margin-bottom:24px;font-weight:500;}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--accent);display:inline-block;}
.eyebrow.accent{color:var(--accent-text);}
h1{font-family:var(--serif);font-weight:600;font-size:min(clamp(52px,6.4vw,92px),12.2cqw);line-height:1.02;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;overflow-wrap:break-word;}
@media (max-width:600px){.cover h1{font-size:min(clamp(52px,6.4vw,92px),11.3cqw);}}
h2,h3,p,li,blockquote,.takeaway,.cap,.dcap,.cover .sub,p.lead,.qcard .q,.pull blockquote,figcaption,.eyebrow{overflow-wrap:break-word;}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.2vw,58px);line-height:1.06;letter-spacing:-0.015em;color:var(--ink);margin-bottom:32px;max-width:22ch;text-wrap:balance;}
h3{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.4vw,28px);line-height:1.2;color:var(--ink);margin:32px 0 12px;}
p{color:var(--ink-soft);font-size:1.16rem;line-height:1.72;margin-bottom:20px;}
p.lead{color:var(--ink);font-size:1.28rem;line-height:1.55;}
p,.prose li{text-wrap:pretty;}
figure,figcaption{margin:0;}
h3,.cover .sub,.pull blockquote,.qcard .q,.quiet .rq,.rule .rq,.takeaway,p.lead{text-wrap:balance;}
.takeaway{margin:32px 0 8px;padding:16px 24px;border-left:3px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);border-radius:0 12px 12px 0;
  font-size:1.16rem;line-height:1.55;color:var(--ink);font-weight:600;}
#content{overflow-x:clip;}
#content > section.band-b{background:var(--surface-container);}
.section{padding:96px 0;position:relative;}
@media(max-width:600px){.section,.pull{padding:60px 0;}}
.section .num{position:absolute;top:72px;right:max(var(--gutter),calc((100% - 1200px) / 2 + var(--gutter)));font-family:var(--serif);font-weight:600;font-size:clamp(48px,7vw,96px);line-height:1;color:color-mix(in srgb,var(--accent) 26%,transparent);letter-spacing:-0.02em;pointer-events:none;}
.figs{display:grid;grid-template-columns:1fr;gap:56px;margin-top:56px;}
.figs .fig{margin-left:auto;margin-right:auto;width:100%;}
.figs .fig .cap{margin-inline:0;text-align:left;}
@media (prefers-reduced-motion:no-preference){
 @supports (animation-timeline:view()){
  .figs .fig{animation:scr-parallax linear both;animation-timeline:view();animation-range:entry 0% exit 100%;}

  @keyframes scr-parallax{from{transform:translateY(34px);}to{transform:translateY(-34px);}}

  .section .num{animation:num-parallax linear both;animation-timeline:view();animation-range:entry 0% exit 100%;}

  @keyframes num-parallax{from{transform:translateY(40px);}to{transform:translateY(-40px);}}
  
  .pull blockquote{animation:pull-parallax linear both;animation-timeline:view();animation-range:entry 0% exit 100%;}

  @keyframes pull-parallax{from{transform:translateY(28px);}to{transform:translateY(-28px);}}}}
.fig{display:flex;flex-direction:column;gap:0;}
.fig .frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--bg-2);
  box-shadow:0 40px 90px -50px rgba(0,0,0,0.9);}
.fig .frame img{display:block;width:100%;height:auto;}
.fig .cap b{color:var(--ink-soft);font-weight:600;}
.cover{position:relative;overflow:hidden;padding:104px 0 72px;background:var(--surface-container);border-bottom:1px solid var(--line-soft);}
.cover .glow{position:absolute;left:-10%;top:-20%;width:70%;height:120%;pointer-events:none;
  background:radial-gradient(circle at 40% 40%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 62%);}
.cover .grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center;position:relative;}
.cover .grid>div:first-child{container-type:inline-size;min-width:0;}
.cover .sub{font-size:1.28rem;color:var(--ink-soft);margin-top:24px;max-width:560px;line-height:1.55;}
.cover .metric{margin-top:24px;font-size:0.92rem;color:var(--accent-text);font-weight:600;letter-spacing:0.02em;max-width:560px;}
.gatewrap{padding:40px 0 72px;background:var(--surface-container);}
.lock-head{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--ink);margin-bottom:16px;}
.lock{margin-top:0;padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(255,255,255,0.03);max-width:520px;}
.lock .nda{margin-top:12px;font-size:0.82rem;color:var(--ink-faint);display:flex;gap:8px;align-items:center;}
.lock .nda svg{width:14px;height:14px;flex:none;}
.cover .art .frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:0 60px 120px -50px rgba(0,0,0,0.95);}
.cover .art img{display:block;width:100%;height:auto;}
.glance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:40px;}
.glance .cell{border-top:1px solid var(--line);padding:24px 0 0;}
.glance .k{font-size:0.82rem;letter-spacing:0.02em;color:var(--ink-faint);margin-bottom:12px;font-weight:600;}
.glance .v{font-size:1.05rem;color:var(--ink);line-height:1.5;}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:40px;}
.stats .stat{justify-content:flex-end;}
.stats.impact-strip{margin-top:32px;margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--line);}
.stat{padding:0 24px;}
.stat:first-child{padding-left:0;}
.stat + .stat{border-left:1px solid var(--line);}
.stat .n,.bigstat,.callout,.callout b,.statpair,.statpair .n,.chart,.tl .num,.holdback .n,.barrace .br-chip b{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum","lnum";}
.stat .n{font-family:var(--serif);font-weight:500;font-size:clamp(42px,4.4vw,54px);line-height:1;color:var(--ink);letter-spacing:-0.02em;}
.stat .l{margin-top:12px;font-size:0.9rem;color:var(--ink-soft);line-height:1.45;max-width:26ch;}
.pull{min-height:100%;display:flex;align-items:center;justify-content:center;padding:96px 0;background:var(--surface-container-high);}
.pull blockquote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:52px;line-height:1.18;
  color:var(--ink);text-align:center;max-width:980px;letter-spacing:-0.01em;}
.pull blockquote em{color:var(--accent-text);font-style:italic;}
.prose ul{margin:8px 0 20px 24px;color:var(--ink-soft);font-size:1.16rem;line-height:1.72;}
.prose li{margin-bottom:8px;}
.prose li b{color:var(--ink);font-weight:600;}
.fig .cap,.diag .dcap,.bubble ~ .bub-cap,.bub-cap{font-size:0.86rem;color:var(--ink-faint);line-height:1.5;letter-spacing:0.01em;max-width:46ch;}
.fig .cap,.montage-fig .cap,.diag .dcap,.badgepile .bp-cap,.ownhome .oh-cap{margin-top:24px;}
.barrace-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overflow-y:hidden;padding-bottom:40px;margin-bottom:-40px;}
.athome-wrap,.fw-wrap,.gflow-wrap,.barrace-wrap,.terminal-wrap,.beat-pane,.conv,.diag,.argument-wrap{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 55%,transparent) transparent;}
.athome-wrap::-webkit-scrollbar,.fw-wrap::-webkit-scrollbar,.gflow-wrap::-webkit-scrollbar,.barrace-wrap::-webkit-scrollbar,.terminal-wrap::-webkit-scrollbar,.beat-pane::-webkit-scrollbar,.conv::-webkit-scrollbar,.diag::-webkit-scrollbar,.argument-wrap::-webkit-scrollbar{height:8px;}
.athome-wrap::-webkit-scrollbar-track,.fw-wrap::-webkit-scrollbar-track,.gflow-wrap::-webkit-scrollbar-track,.barrace-wrap::-webkit-scrollbar-track,.terminal-wrap::-webkit-scrollbar-track,.beat-pane::-webkit-scrollbar-track,.conv::-webkit-scrollbar-track,.diag::-webkit-scrollbar-track,.argument-wrap::-webkit-scrollbar-track{background:rgba(255,255,255,0.05);border-radius:var(--r-pill);}
.athome-wrap::-webkit-scrollbar-thumb,.fw-wrap::-webkit-scrollbar-thumb,.gflow-wrap::-webkit-scrollbar-thumb,.barrace-wrap::-webkit-scrollbar-thumb,.terminal-wrap::-webkit-scrollbar-thumb,.beat-pane::-webkit-scrollbar-thumb,.conv::-webkit-scrollbar-thumb,.diag::-webkit-scrollbar-thumb,.argument-wrap::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 55%,transparent);border-radius:var(--r-pill);}
[data-scrollregion][data-sx="r"]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);}
[data-scrollregion][data-sx="l"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 34px);mask-image:linear-gradient(to right,transparent,#000 34px);}
[data-scrollregion][data-sx="lr"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent);}
html{scroll-behavior:smooth;}
@media print{
 *{animation:none !important;transition:none !important;}
 html.js-reveal #content .section .wrap>*,html.js-reveal #content .fig[data-in]>*{opacity:1 !important;transform:none !important;}
  :root{--ink:#111 !important;--ink-soft:#333 !important;--ink-faint:#555 !important;--bg:#fff !important;--bg-2:#fff !important;--bg-3:#fff !important;--surface:#fff !important;--surface-container:#fff !important;--surface-container-high:#fff !important;--line:#c9c9c9 !important;--line-soft:#e2e2e2 !important;}
  html,body{background:#fff !important;color:#111 !important;}
  #content > section:nth-of-type(even){background:#fff !important;}
  .cs-nav,.reading-progress,.to-top,.motion-toggle,.skip,.module-nav,.mw-grid,.cs-thanks,.glow{display:none !important;}  /* R-N12: .cs-foot stays so a printed case carries the byline */
  .cs-foot a{display:none !important;}
  .gatewrap{display:none !important;}
  h1,h2,h3,h4,p,li,span,div,figcaption,.cap,.eyebrow,.num,em,b,strong,i,small{color:#111 !important;}  /* PR-1c (Sept 7): em/b/strong/i/small were omitted, so emphasized words kept the light accent colour (e.g. evidence violet rgb(179,162,255)) and printed at ~2.3:1 on the white page. Fold them into the ink override; italic/bold weight still carries the emphasis in print. */
  .eyebrow,.num,.cap{color:#555 !important;}
  a{color:#111 !important;text-decoration:underline;}
  .cover{min-height:auto !important;padding:0 0 24px !important;color:#111 !important;}
  video.csvid{max-height:70vh;}
  .fig,.frame,figure,.section,.worked,.diag{break-inside:avoid;page-break-inside:avoid;}
  h2,h3{break-after:avoid;page-break-after:avoid;}
  section{border:0 !important;}
  .ns-tile,.ns-hero,.ns-fade,.sq-video,.cov .ct{background:#fff !important;background-image:none !important;border:1px solid #c9c9c9 !important;}  /* R-S2: the hard-coded dark panels print as white boxes so their #111 labels stay legible */
  .w3-syn,.rcard{background:#fff !important;background-image:none !important;border:1px solid #c9c9c9 !important;}  /* PR-1a (Sept 7): the AI page's synopsis card (.w3-syn #0b1220) and reason cards (.rcard) kept their dark bg under print-color-adjust:exact while the blanket span,div{#111} re-inked their text to near-black -> dark-on-dark, illegible in a saved PDF. Whitewash to match R-S2 so the synopsis + reason reading content prints legibly (verified via print-media emulation: contrast 18.9:1). */
  .w3-hl{background:#fbe4ef !important;}  /* PR-1a: keep the synopsis highlight pills as a light-pink tint (the #111 text is legible on it, 15.7:1) instead of a dark pill that would print near-black-on-dark. */
  .strings .st-card,.halfsec .hs-mode,.members .mb-screen,.ba .ba-stage,.ba .ba-chip{background:#fff !important;background-image:none !important;border:1px solid #c9c9c9 !important;}  /* PR-1b (Sept 7): the Evidence page's simple dark text-cards -- the strings synopsis cards (.st-card #0d1424: "STRANGER THINGS" etc.), the halfsec mode cards (.hs-mode: "Skimming on instinct" / "Slowing down to read"), and the members mini-screens (.mb-screen #0d1424, whose .mb-ev evidence chips like "New Season Now Streaming" are transparent text on the dark screen) -- printed dark-on-dark. Whitewash the simple CSS cards (verified via print-media emulation: text 18.9:1; screenshots clean, member avatars keep legible letters). The .ba billboard-anatomy stage (.ba-stage + its dark .ba-chip; a CSS stage, no reference image) is also whitewash-safe and verified (BODIES title/metadata/synopsis/evidence-chip all legible, the dark VIDEO placeholder stays as intended). The IMAGE-bearing stages (anatomy-band, scale, tvcover) instead KEEP their dark band (so the reference screenshot survives) and give their floating labels a light chip -- see the rule below. The AI-page composition chips (.std-chip on the phone-mockup, .fr-tag, the rotated .hb-stamp "Nothing moved") get the same light-chip treatment (.note already resolves to a white ground, no change). The remaining Evidence panels are handled by the two rules below (whitewash + light-chip + small in the ink override). PR-1 COMPLETE: a corrected canvas-based contrast scan (composites alpha, parses color(srgb)) against the built CSS reports 0 dark-on-dark text on all three case pages (AI, Evidence, Woobo) in print media. */
  .anatomy-band .ab-l,.anatomy-band .ab-s,.tvcover .tc-h,.tvcover .tc-sub,.scale .sc-n,.scale .sc-s{background:rgba(255,255,255,.92) !important;color:#111 !important;border-radius:4px !important;padding:1px 5px !important;-webkit-box-decoration-break:clone;box-decoration-break:clone;}  /* PR-1b (Sept 7): the image-bearing Evidence stages (anatomy-band's annotated TV screenshot, the scale + tvcover mockups) must KEEP their dark band so the reference image is not washed out; the fix is to give each floating label a light chip (rgba white + #111 text) so it reads over the dark band/image. Verified via print-media emulation: every label 18.9:1, band stays dark (#070b16), screenshots show coherent dark annotated figures with legible light-pill labels on their red leader lines. */
  .std-chip,.fr-tag,.hb-stamp{background:rgba(255,255,255,.92) !important;color:#111 !important;border:1px solid #c9c9c9 !important;}  /* PR-1b (Sept 7): the AI page's small dark composition chips -- the .std-chip annotations on the phone-mockup ("Stranger Things" etc.), the .fr-tag genre tag, and the rotated .hb-stamp ("Nothing moved") -- printed dark-on-dark. Same light-chip fix (verified by eye: legible light pills, the stamp keeps its rotation). */
  .ag-chip,.dw-stamp,.nb-head,.ns-row,.cn-brick,.st-short,.ev-badges span{background:#fff !important;background-image:none !important;border:1px solid #c9c9c9 !important;}  /* PR-1c (Sept 7): the remaining Evidence dark panels surfaced by the corrected canvas scanner -- .ag-chip badges, the .dw-stamp ("ONE SYSTEM"), the .nb-head NotebookLM bar, the North Star .ns-row mockup (so its .ns-rt "Trending Now" titles read), the .cn-brick legend cells ("Availability", "Callouts"...), the .st-short strings badges, and the .ev-badges pills ("Top 10" etc.). Whitewash (verified via emulation: 0 dark-on-dark remaining; North Star mockup + brick legend screenshot clean). */
  .lf-tab{background:rgba(255,255,255,.92) !important;color:#111 !important;border:1px solid #c9c9c9 !important;}  /* PR-1c: the lifecycle tab rail is <button>s (button is not in the ink override), so on a whitewashed rail the tab text stayed light; give each tab a light chip + explicit #111 (verified: "WEEKS BEFORE | ... | LIVE | LEAVING" print as a clean segmented rail). */
  *{box-shadow:none !important;text-shadow:none !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}
@media print, (prefers-reduced-motion: reduce){html{scroll-behavior:auto !important;}.skip{transition:none !important;}.m3field label{transition:color .12s ease !important;}.reading-progress span,.reading-progress > *{transition:none !important;}}
.cs-head{display:contents;}
/* R-W12: class on the header instead of a parent-of-nav relational selector, so the sticky case nav works in engines without relational-selector support */
.cs-nav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:16px clamp(20px,5vw,56px);background:rgba(8,8,10,0.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft);}
.cs-nav .brand{font-family:var(--serif);font-size:1rem;color:var(--ink);display:inline-flex;align-items:center;column-gap:.28em;min-height:44px;margin:-10px 0;}
/* R-X15: word space before the NY tail */
.cs-nav .brand span{color:var(--ink-faint);}
.cs-nav .here{font-size:0.8rem;letter-spacing:0.02em;color:var(--ink-faint);text-align:right;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:560px){.cs-nav .here{display:none;}}
.wrap{padding:0 var(--gutter);}
/* R-P12 (Sept 5): the old .gate .cover viewport-height rule matched nothing (no builder emits .gate) and is gone; the cover is sized by its padding as it always has been */
.lock form{display:flex;gap:10px;align-items:center;margin:0;}
.m3field{position:relative;flex:1;min-width:0;}
.m3field input{width:100%;height:56px;border-radius:var(--r-md);border:1px solid var(--outline);background:transparent;color:var(--ink);
  padding:0 16px;font:inherit;font-size:16px;letter-spacing:0.14em;outline:none;caret-color:var(--accent-text);transition:border-color .12s ease;box-sizing:border-box;}
.m3field input:hover,.m3field input:focus-visible{border-color:var(--ink);}
.m3field input:focus{border:2px solid var(--accent-text);padding:0 15px;}
.m3field label{position:absolute;left:12px;top:50%;transform:translateY(-50%);padding:0 4px;background:color-mix(in srgb,#fff 3%,var(--surface-container));color:var(--ink-faint);
  font-size:16px;letter-spacing:0.02em;pointer-events:none;transition:top .12s ease,font-size .12s ease,color .12s ease;}
.m3field input:focus+label,.m3field input:not(:placeholder-shown)+label{top:0;font-size:12px;color:var(--accent-text);letter-spacing:0.04em;}
.m3field input:focus+label{font-weight:600;}
.lock button{height:56px;padding:0 20px;border-radius:var(--r-md);background:var(--ink);color:var(--bg);font:inherit;font-weight:600;font-size:0.95rem;border:0;cursor:pointer;}
.lock button:hover,.lock button:focus-visible{background:var(--accent-text);color:var(--bg);}
/* backlog #64: hover in the page accent, not flat white */
.lock .err{display:none;margin-top:10px;font-size:0.85rem;color:var(--neg-text);}
.lock.bad .err{display:block;}
.lock.bad .m3field input{border:2px solid var(--neg-text);}
.lock.bad .m3field label{color:var(--neg-text);}
.frame video{display:block;width:100%;height:auto;}
#gateform input#pw{font-size:16px;box-sizing:border-box;}
.skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r-md);font-weight:600;transition:top .2s;}
.skip:focus{top:12px;}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;}
#content:focus-visible,#lead:focus-visible,#Top:focus-visible{outline:none;}
/* R-W9: these are scroll anchors moved to by the gate/skip, not controls; no box outline */  /* R-A10: the outline follows each element's own radius; forcing --r-sm squared the round .to-top */
.m3field input:focus-visible{outline-offset:2px;border-color:var(--outline);}
/* one ring, not a ring plus an accent border */
.reading-progress{position:fixed;top:var(--nav-h,62px);left:0;right:0;height:3px;background:transparent;z-index:49;}
/* R-A6/R-W8: fixed so its slot never offsets the sticky nav at scrollY 0; offset follows the real nav height (NAVH_JS) */
.reading-progress #rpbar{display:block;height:100%;width:0;background:var(--accent);transition:width .08s linear;}
.section{scroll-margin-top:calc(var(--nav-h,62px) + 16px);}
html{scroll-padding-top:calc(var(--nav-h,62px) + 16px);scroll-padding-bottom:88px;}
/* R-S11: focus scrolls clear of the sticky nav and the two fixed bottom controls */
/* R-W13 (Sept 7): removed the dead .next a rule group (the module-nav is .mnav-side/.mnav-home now, R-K8; .next matches 0 elements on every case page). */
.cs-foot{padding:40px 0 64px;border-top:1px solid var(--line-soft);font-size:0.8rem;letter-spacing:0.02em;color:var(--ink-faint);}
.cs-foot-in{display:flex;justify-content:space-between;gap:20px;}
.cs-foot a{color:var(--ink-soft);display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;}
@media (max-width: 900px){
  h1{font-size:clamp(34px,11vw,44px);} h2{font-size:34px;}
  .cover .grid{grid-template-columns:1fr;gap:32px;}
  .glance{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stats,.statpair{grid-template-columns:1fr;gap:0;}
  .stat{padding:24px 0 0 !important;}
  .stat:first-child{padding-top:0 !important;}
  .stat + .stat{border-left:0 !important;border-top:1px solid var(--line);}
  .twovoice,.rtable,.holdback,.fail2,.cluster{grid-template-columns:1fr;}
  .section .num{display:none;}
  .pull blockquote{font-size:34px;}
  .quiet .rq{font-size:34px;} .rule .rq{font-size:32px;} .bigstat{font-size:96px;}
}
/* bottom module (Uber house style, restyled dark) */
.cs-thanks{padding:104px 0 48px;background:var(--surface-container);border-top:1px solid var(--line-soft);}
.cs-thanks .wrap{text-align:center;}
.thanks-h{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4vw,52px);color:var(--ink);}
.thanks-rule{width:100px;height:2px;background:var(--ink);opacity:.4;margin:24px auto 32px;}
.thanks-sub{font-size:0.8rem;letter-spacing:0.02em;color:var(--ink-faint);margin-bottom:40px;}
.mw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1200px;margin:0 auto;padding:0 var(--gutter);}
.mw-card{display:block;text-align:left;}
.mw-thumb{position:relative;aspect-ratio:16/11;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--bg-2);}
.mw-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.05,.7,.1,1);}
.mw-card:hover .mw-thumb img,.mw-card:focus-visible .mw-thumb img{transform:scale(1.05);}
/* R-W13 (Sept 7): removed the dead .mw-thumb.text rules (the text-only related-work thumbnail fallback; every related-work card carries a real cover image, so .mw-thumb.text matches 0 elements). */
.mw-plus{position:absolute;right:0;bottom:0;width:46px;height:46px;background:var(--a);color:var(--bg);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;}
.mw-name{margin-top:16px;font-family:var(--serif);font-weight:600;font-size:1.12rem;color:var(--ink);}
/* R-W10: same typeface + size as .mnav-title, which names the same next case one screen below */
.module-nav{display:flex;align-items:stretch;margin-top:80px;border-top:1px solid var(--line-soft);}
.mnav-side{flex:1;display:flex;align-items:center;gap:16px;padding:24px var(--gutter);border-bottom:1px solid var(--line-soft);}
.mnav-spacer{flex:1;border-bottom:1px solid var(--line-soft);padding:24px var(--gutter);}
/* CA-2 (Sept 7): on the first case (genai) the left slot is this empty spacer, which lacked the horizontal padding .mnav-side carries, so the two flex:1 sides were asymmetric and the fixed-width centre .mnav-home ("BH" home dot) drifted 72px left. Matching the .mnav-side padding makes both sides symmetric and centres the dot, as evidence/woobo already are (they have a real padded .mnav-side left). Hidden on mobile (below), so no mobile effect. */
.mnav-side.right{justify-content:flex-end;text-align:right;}
.mnav-side:hover,.mnav-side:focus-visible{background:var(--surface-container-high);}
.mnav-arrow{font-size:24px;color:var(--ink-faint);display:inline-block;transition:transform .2s ease;}
.mnav-lab{display:block;font-size:0.8rem;letter-spacing:0.02em;color:var(--ink-faint);margin-bottom:4px;}
.mnav-title{display:block;font-family:var(--serif);font-size:1.12rem;color:var(--ink);}
.mnav-home{width:132px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft);position:relative;}
.mnav-home:hover,.mnav-home:focus-visible{background:var(--surface-container-high);}
.mnav-dot{width:54px;height:54px;border-radius:50%;background:var(--accent-text);color:var(--bg);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--serif);font-size:18px;}
/* A11Y (Sept 7): the "BH" home dot was --accent, giving #08080a text only 3.48:1 (evidence violet) / 4.28:1 (genai pink), under AA 4.5:1 for 18px-bold; --accent-text (the lighter page tint) gives 8.8 to 11.6:1. */
.mnav-tip{font-size:0.8rem;letter-spacing:0.02em;color:var(--ink-faint);}
.to-top{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,0.62);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);z-index:60;backdrop-filter:blur(6px);text-decoration:none;font-size:18px;transition:transform .2s ease,background .2s ease;}
.to-top:hover,.to-top:focus-visible{background:rgba(0,0,0,0.88);color:var(--ink);}
.motion-toggle{position:fixed;right:84px;bottom:24px;height:48px;padding:0 18px;border-radius:999px;background:rgba(0,0,0,0.62);border:1px solid var(--line);color:var(--ink);font:inherit;font-size:0.82rem;font-weight:600;letter-spacing:.01em;display:inline-flex;align-items:center;cursor:pointer;z-index:60;backdrop-filter:blur(6px);transition:background .2s ease,border-color .2s ease,color .2s ease;}
/* R-N2; RCR-1/2: glass blur + transition to match the sibling .to-top control (was a flat slab whose hover/aria-pressed changes snapped) */
.motion-toggle:hover,.motion-toggle:focus-visible{background:rgba(0,0,0,0.88);}
@media (max-width:760px){.to-top,.motion-toggle{bottom:calc(24px + env(safe-area-inset-bottom));} .cs-foot{padding-bottom:120px;}}
/* R-P3: the footer reserves the band the two fixed controls own on a phone */
.motion-toggle[aria-pressed=true]{border-color:var(--accent);color:var(--accent-text);}
/* Consistent CTA micro-interactions (match the homepage arrow-nudge): prev/next nav arrows slide in their direction on hover; back-to-top lifts. Reduced-motion safe. */
.mnav-side.right:hover .mnav-arrow,.mnav-side.right:focus-visible .mnav-arrow{transform:translateX(4px);}
.mnav-side.left:hover .mnav-arrow,.mnav-side.left:focus-visible .mnav-arrow{transform:translateX(-4px);}
.to-top:hover,.to-top:focus-visible{transform:translateY(-2px);}
/* R-S9: every hover on the chrome has a focus twin */
@media print, (prefers-reduced-motion:reduce){
 .mnav-arrow,.to-top,.mw-thumb img{transition:none;}  /* R-K6: the related-card thumb zoom is frozen under reduced motion for hover as well as focus */
 .mnav-side.right:hover .mnav-arrow,.mnav-side.left:hover .mnav-arrow,.mnav-side.right:focus-visible .mnav-arrow,.mnav-side.left:focus-visible .mnav-arrow,.mw-card:hover .mw-thumb img,.mw-card:focus-visible .mw-thumb img,.to-top:hover,.to-top:focus-visible{transform:none;}
}
@media (max-width:760px){
 .mw-grid{grid-template-columns:1fr;gap:16px;}
 .module-nav{flex-direction:column;}
 .mnav-spacer{display:none;}
 .mnav-home{width:100%;flex-direction:row;justify-content:center;gap:12px;padding:16px;border:0;border-bottom:1px solid var(--line-soft);order:-1;}
 .mnav-side{padding:16px 24px;}
 /* R-W13 (Sept 7): removed the dead .pipe mobile rules (.pipe diagram was renamed; 0 elements). */
 .fork .row{flex-wrap:wrap;gap:12px;} .fork .arrow{display:none;} .fork .paths{flex-basis:100%;width:100%;}
 .ladder{flex-wrap:wrap;} .ladder .step{flex:1 1 46%;min-height:auto !important;}
 /* R-W13 (Sept 7): removed the dead .cluster mobile rules (0 elements). The line below keeps its live members (.diag/.worked/.holdback/.rtable/.statpair); its remaining dead members (.pipe/.twovoice/.fail2) are harmless no-op parts of a live rule, left to avoid a surgical selector-list edit. */
 .diag,.pipe,.worked,.holdback,.rtable,.twovoice,.fail2,.statpair{overflow-x:auto;-webkit-overflow-scrolling:touch;}
 .tl .rail{overflow:visible;} .tl .lab{font-size:max(13px,0.7rem);}  /* RE2 (Sept 6): was 0.7rem = 12.6px at every width (unconditional, not just mobile), under the ~13px legibility floor; max(13px,..) lifts it to 13px with a negligible width change so the timeline labels do not overlap. */
 .quiet .rq{font-size:30px;} .rule .rq{font-size:28px;} .bigstat{font-size:88px;} .pull blockquote{font-size:30px;}
}
@media (max-width: 560px){
  .glance{grid-template-columns:1fr;}
  .lock form{flex-direction:column;align-items:stretch;}
}
/* slide "play out" reveal: each section's content builds in as it enters view (native, high quality) */
/* Deck entrance engine (4. Netflix.dc.html enter(), lines 674 to 681): opacity 0 + translateY(16px) to 1 / none, 750ms, cubic-bezier(.2,1.1,.4,1), delay 150 + idx*140 ms. The eyebrow and the H2 are ONE [data-in] block in the deck, so children 1 and 2 share idx 0. */
html.js-reveal #content .section .wrap>*{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.2,1.1,.4,1) .04s,transform .5s cubic-bezier(.2,1.1,.4,1) .04s;}
html.js-reveal #content .section.rv .wrap>*{opacity:1;transform:none;}
/* BRE-R2 (Sept 6): reveals were too slow and did not survive quick scrolling (last child waited 1.55s + .75s ~ 2.3s). Stagger compressed to a ~.3s ceiling; durations/delays shortened; and the observer reveals ~30% earlier (see REVEAL_JS rootMargin) so elements finish before they are centered even on fast scroll. */
html.js-reveal #content .section .wrap>*:nth-child(3){transition-delay:.07s}
html.js-reveal #content .section .wrap>*:nth-child(4){transition-delay:.10s}
html.js-reveal #content .section .wrap>*:nth-child(5){transition-delay:.13s}
html.js-reveal #content .section .wrap>*:nth-child(6){transition-delay:.16s}
html.js-reveal #content .section .wrap>*:nth-child(7){transition-delay:.19s}
html.js-reveal #content .section .wrap>*:nth-child(8){transition-delay:.22s}
html.js-reveal #content .section .wrap>*:nth-child(9){transition-delay:.25s}
html.js-reveal #content .section .wrap>*:nth-child(10){transition-delay:.28s}
html.js-reveal #content .section .wrap>*:nth-child(n+11){transition-delay:.30s}
/* The deck shows a diagram layer instantly (set(l,{opacity:'1'}
), line 670) and only its inner elements enter: containers with their own deck timeline are exempt from the generic reveal. */
html.js-reveal #content .section .wrap>.ladder,html.js-reveal #content .section .wrap>.holdback,html.js-reveal #content .section .wrap>.qcard,html.js-reveal #content .section .wrap>.rtable,html.js-reveal #content .section .wrap>.athome-wrap,html.js-reveal #content .section .wrap>.fw-wrap,html.js-reveal #content .section .wrap>.dishon,html.js-reveal #content .section .wrap>.gflow-wrap,html.js-reveal #content .section .wrap>.goodline,html.js-reveal #content .section .wrap>.worked,html.js-reveal #content .section .wrap>.quiet,html.js-reveal #content .section .wrap>.scale157,html.js-reveal #content .section .wrap>.terminal-wrap,html.js-reveal #content .section .wrap>.cov,html.js-reveal #content .section .wrap>.recap3,html.js-reveal #content .section .wrap>.bubble,html.js-reveal #content .section .wrap>.bub-cap,html.js-reveal #content .section .wrap>.figs:has(.fig[data-in]){opacity:1;transform:none;transition:none;}
/* F02 stat (deck D45/D46): the number scales 0.94 to 1 over 1100ms at 150ms; its caption rises 16px over 750ms at 1400ms */
html.js-reveal #content .section .wrap>.bigstat{transform:scale(.94);transition:opacity 1.1s cubic-bezier(.2,1.1,.4,1) .15s,transform 1.1s cubic-bezier(.2,1.1,.4,1) .15s;}
html.js-reveal #content .section.rv .wrap>.bigstat{transform:none;}
html.js-reveal #content .section .wrap>.bigstat small{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.2,1.1,.4,1) .42s,transform .5s cubic-bezier(.2,1.1,.4,1) .42s;}
html.js-reveal #content .section.rv .wrap>.bigstat small{opacity:1;transform:none;}
/* F06 / F43 ladder header (deck enterLadder D698 to D700): translateY(14px), 900ms at 150ms, tw ease cubic-bezier(.22,.9,.24,1) */
html.js-reveal #content .section[data-beat="ladder"] .wrap>.eyebrow,html.js-reveal #content .section[data-beat="ladder"] .wrap>h2,html.js-reveal #content #closing .wrap>.eyebrow,html.js-reveal #content #closing .wrap>h2{transform:translateY(14px);transition:opacity .9s cubic-bezier(.22,.9,.24,1) .15s,transform .9s cubic-bezier(.22,.9,.24,1) .15s;}
html.js-reveal #content .section[data-beat="ladder"].rv .wrap>.eyebrow,html.js-reveal #content .section[data-beat="ladder"].rv .wrap>h2,html.js-reveal #content #closing.rv .wrap>.eyebrow,html.js-reveal #content #closing.rv .wrap>h2{transform:none;}
/* Per-figure deck entrance: make_specs v(..., d=, dur=, tr=) writes data-in + CSS vars on the figure (d=0,dur=0 = the deck shows it with no entrance). The frame and caption move, not the .fig itself, so the N9 parallax on .fig is untouched. */
html.js-reveal #content .section .figs .fig[data-in]>*{opacity:0;transform:var(--tr,translateY(16px));transition:opacity var(--dur,.5s) var(--ease,cubic-bezier(.2,1.1,.4,1)) var(--d,.05s),transform var(--dur,.5s) var(--ease,cubic-bezier(.2,1.1,.4,1)) var(--d,.05s);}
/* --ease: R-U1 to R-U13, the Evidence deck tweens each panel on its own curve */
html.js-reveal #content .section :is(.av .fig[data-in], .fig[data-in].av)>*{opacity:1;transform:none;}
/* F01 cover (deck D29/D38): mock fades 1200ms at 150ms (no transform); title block rises 16px over 1000ms at 500ms. Load-time. RK1 (Sept 6): both Netflix pages share the identical .art.art3d 3D-tilt cover, so both get the entrance (was genai-only, leaving Evidence's flagship cover static on first paint = a cross-Netflix cohesion break). Woobo has a different plain .art cover and is intentionally not included. */
@media (prefers-reduced-motion:no-preference){
 html.js-reveal :is(body[data-page="genai"],body[data-page="evidence"]) .cover .art{animation:cv-fade 1.2s cubic-bezier(.2,1.1,.4,1) .15s both;}
 html.js-reveal :is(body[data-page="genai"],body[data-page="evidence"]) .cover .grid>div:first-child{animation:cv-rise 1s cubic-bezier(.2,1.1,.4,1) .5s both;}
 @keyframes cv-fade{from{opacity:0;}to{opacity:1;}}
 @keyframes cv-rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
}
@media print, (prefers-reduced-motion: reduce){html.js-reveal #content .section .wrap>*,html.js-reveal #content .section .wrap>.bigstat small,html.js-reveal #content .section .figs .fig[data-in]>*{opacity:1 !important;transform:none !important;transition:none !important;}}