/* Clinical Edge flagship v7. Navy, gold and paper only.
   Chunk 1 owns this file's tokens, type scale, nav, hero, field, fly-through and chips (the chapter question slides live in kq.css).
   Rules for other sections further down are kept as they were until their chunk rewrites them. */
:root{
  --navy:#0A1E3A; --navy-2:#0D2547; --navy-deep:#071630; --marine:#12345F; --glow:#16407A; --ink:#0E1116;
  --gold:#B9974B; --gold-hi:#D4AF5E; --gold-logo:#C9A85C; --champ:#D8BE7E;
  --gold-ink:#755819; --gold-disp:#806022; --gold-line:#8A6D2F;
  --paper:#F7F4EE; --paper-2:#F1ECE1; --mist:#EDEAE1; --line:#E2DCCE; --white:#FFFFFF;
  --slate:#44505F; --slate-2:#5F6B78;
  --on-navy:#C8D1DA; --on-navy-hi:#E8EDF4; --on-navy-dim:#A9B4C2;
  /* v7 type colors (section 3.1 of the plan) */
  --pain-navy:#DCE3EA; --pain-paper:#3D4B5C; --body-navy:#D5DCE4; --fine-navy:#B7C1CD; --fine-paper:#4F5D6E;
  --line-navy:rgba(216,190,126,.28); --glass:rgba(255,255,255,.05); --glass-line:rgba(255,255,255,.12);
  --f-disp:'Newsreader', 'Newsreader Fallback', Georgia, serif; --f-ui:'Archivo', 'Archivo Fallback', system-ui, sans-serif; --f-mono:'IBM Plex Mono', ui-monospace, monospace;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --ease-emph:cubic-bezier(.32,.72,0,1);
  --wrap:1200px; --gut:24px; --r-card:14px; --r-panel:16px; --r-ctl:8px;
  --nav-h:72px;
  --cut:58deg;
  /* notes-1, Barry note 2 ("all the gold tags are too small"): one label scale for every numeral, HUD line, tag, chip and
     control label on the page. Phones step down once (the block below). The largest label (the 17px numeral) stays far
     under every heading, so labels mark the page without competing with the headlines. */
  --fs-num:17px; --fw-num:600; --ls-num:.06em;   /* mono numerals: hero lines, fly-through cards, chapter H2s, Premier rows */
  --num-rule:96px; --num-rule-h:3px;             /* the gold rule that runs out of a card numeral */
  --fs-hud:13.5px; --ls-hud:.16em;               /* mono caps HUD lines and section kickers */
  --fs-tag:13px; --ls-tag:.12em;                 /* mono caps tags: categories, Clinician-set, stamps, test labels */
  --fs-chip:13.5px;                              /* honesty and status chips (Archivo) */
  --fs-ctl:14px;                                 /* filter, segment and tab buttons */
  --fs-lbl:14px;                                 /* form and control labels */
  --fs-code:12.5px;                              /* corner codes and micro captions (library cells, result keys) */
  --fs-nav-n:13px;
}
@media (max-width:760px){
  :root{--fs-num:15px;--num-rule:72px;--fs-hud:12.5px;--ls-hud:.13em;--fs-tag:12.5px;--ls-tag:.1em;--fs-chip:13px;--fs-ctl:13px;--fs-lbl:13.5px;--fs-code:12px;--fs-nav-n:12.5px}
}
/* Metric-matched fallbacks keep the first paint close to the webfont paint (fewer layout shifts on swap). */
/* size-adjust measured against the webfonts (text width ratio, 2026-10-08) */
@font-face{font-family:'Newsreader Fallback';src:local('Georgia');font-style:normal;size-adjust:99.5%}
@font-face{font-family:'Newsreader Fallback';src:local('Georgia Italic'),local('Georgia-Italic');font-style:italic;size-adjust:88%}
@font-face{font-family:'Archivo Fallback';src:local('Arial');size-adjust:98.4%}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h)} /* r1: a jump lands each section's top on the nav edge, with no strip of the section before */
body{margin:0;background:var(--navy);color:var(--on-navy);font:400 16px/1.6 var(--f-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--gold);color:var(--navy)}
:focus-visible{outline:3px solid var(--champ);outline-offset:4px;border-radius:4px}
.band--paper :focus-visible,.on-paper :focus-visible{outline-color:var(--gold-ink)} /* v7 chunk 5: .week left with #first-week */
html{scrollbar-color:var(--gold-line) var(--navy)}
/* screen map fix (pass 3): the styled bar is for mouse screens only; on touch WebKit drew it as a 10px black band over
   the right edge of every screen, so touch devices keep the native overlay bar */
@media (hover:hover) and (pointer:fine){::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--navy)}::-webkit-scrollbar-thumb{background:var(--marine);border-radius:10px;border:2px solid var(--navy)}}

.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--paper);color:var(--navy);padding:10px 16px;border-radius:var(--r-ctl);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Type scale ---------- */
.display,.h2,.h3,h2,h3{font-family:var(--f-disp);font-weight:500;letter-spacing:-.015em;color:#fff;margin:0;text-wrap:balance}
.display{font-size:clamp(32px,3.55vw,52px);line-height:1.06;letter-spacing:-.022em}
.display em,.h2 em,h2 em,.h3 em,.overview__title em{font-style:italic;font-weight:400;color:var(--champ)}
.h2,h2{font-size:clamp(34px,3.8vw,54px);line-height:1.08}
.h3{font-size:clamp(26px,2.6vw,36px);line-height:1.15}
h3{font-size:22px;line-height:1.2}
.lead,.sub{font-size:18px;line-height:1.55;color:var(--body-navy);max-width:52ch;margin:18px 0 0}
.fine{font-size:13px;line-height:1.5;color:var(--fine-navy);margin:22px 0 0;max-width:60ch}
.band--paper .fine,.on-paper .fine{color:var(--fine-paper)}
.hud{font-family:var(--f-mono);font-size:var(--fs-hud);letter-spacing:var(--ls-hud);text-transform:uppercase;color:var(--champ);margin:0}
.tag{font-family:var(--f-mono);font-size:var(--fs-tag);letter-spacing:var(--ls-tag);text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--glass-line);color:var(--on-navy-dim);white-space:nowrap}
.tag--gold{border-color:rgba(216,190,126,.5);color:var(--champ)}
.band--paper .tag{border-color:var(--line);color:var(--slate)}
.band--paper .tag--gold{border-color:var(--gold-line);color:var(--gold-ink)}

/* Numerals: Plex Mono, hung in the gutter beside a heading line. Used on the H1 lines, chapter H2s, cards and nav. */
.num{font:var(--fw-num) var(--fs-num)/1 var(--f-mono);letter-spacing:var(--ls-num);color:var(--champ)}
.num[data-n]::before{content:attr(data-n)}
.band--paper .num,.on-paper .num{color:var(--gold-ink)}

/* Pain line: the practitioner's own words, said before the answer. Gold blade slash at 58 degrees. */
.pain{position:relative;margin:0 0 18px;padding-left:30px;font-family:var(--f-disp);font-style:italic;font-weight:400;font-size:20px;line-height:1.35;color:var(--pain-paper);max-width:46ch;text-wrap:balance}
.pain::before{content:"";position:absolute;left:4px;top:.2em;width:2px;height:1.05em;background:var(--gold);transform:rotate(32deg);transform-origin:50% 50%}
.pain--navy,.pain--hero,.pain--card,.band--navy .pain,.close .pain{color:var(--pain-navy)}
.pain--card{font-size:18px;margin-bottom:12px}

/* Honesty chips: one component, three labels (Illustrative, Estimate, In development). */
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 11px 6px 10px;border-radius:7px;border:1px solid rgba(216,190,126,.5);background:rgba(10,30,58,.4);color:var(--champ);font:600 var(--fs-chip)/1 var(--f-ui);letter-spacing:.02em;white-space:nowrap;vertical-align:middle}
.chip::before{content:"";flex:none;width:2px;height:12px;border-radius:1px;background:currentColor;transform:rotate(32deg)}
.chip--est::before{width:7px;height:7px;border-radius:50%;transform:none;background:transparent;border:1.5px solid currentColor}
.chip--dev{border-style:dashed}
.chip--dev::before{width:7px;height:7px;border-radius:50%;transform:none;opacity:.85}
.band--paper .chip,.on-paper .chip{color:var(--gold-ink);border-color:rgba(117,88,25,.42);background:rgba(255,255,255,.6)}

/* ---------- Buttons ---------- */
.btn{--lift:0px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r-ctl);font:600 15px/1 var(--f-ui);text-decoration:none;cursor:pointer;border:1px solid transparent;overflow:hidden;transition:transform 180ms var(--ease-out),box-shadow 220ms var(--ease-out),background-color 180ms ease,color 180ms ease,border-color 180ms ease}
.btn:active{transform:scale(.97)}
.btn--gold{background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:var(--navy);box-shadow:0 10px 26px rgba(185,151,75,.28)}
.btn--gold::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform 700ms var(--ease-out)}
@media (hover:hover){.btn--gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(185,151,75,.38)}.btn--gold:hover::after{transform:translateX(120%)}}
.btn--ghost{color:var(--on-navy-hi);border-color:rgba(216,190,126,.45);background:rgba(10,30,58,.35)}
@media (hover:hover){.btn--ghost:hover{border-color:var(--champ);background:rgba(216,190,126,.08)}}
.btn--outline{color:var(--navy);border-color:var(--gold-line);background:transparent}
@media (hover:hover){.btn--outline:hover{background:var(--navy);color:var(--paper);border-color:var(--navy)}}
.btn--sm{min-height:40px;padding:0 16px;font-size:14px}
.btn--block{width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);display:flex;align-items:center;gap:22px;padding:0 28px;transition:background-color 260ms ease,box-shadow 260ms ease}
.nav.is-scrolled,.nav.is-open{background:rgba(10,30,58,.95);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 4px 24px rgba(0,0,0,.25)}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:#fff;flex:none}
.brand__mark{width:34px;height:34px}
.brand__word{font-family:var(--f-disp);font-size:21px;font-weight:500;letter-spacing:-.01em}
.brand__word .dot{color:var(--gold-logo)}
.nav__links{display:flex;gap:26px;margin-left:auto}
.nav__links a,.sheet__links a{position:relative;display:inline-flex;align-items:baseline;gap:7px;font:500 15px/1 var(--f-ui);color:var(--body-navy);text-decoration:none;padding:12px 0;transition:color 180ms ease}
.nav__n{font:var(--fw-num) var(--fs-nav-n)/1 var(--f-mono);letter-spacing:.06em;color:rgba(216,190,126,.8);transition:color 200ms ease}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;border-radius:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--ease-out)}
@media (hover:hover){.nav__links a:hover{color:#fff}.nav__links a:hover::after{transform:scaleX(.35)}}
.nav__links a.is-active,.sheet__links a.is-active{color:#fff}
.nav__links a.is-active::after{transform:scaleX(1)}
.nav__links a.is-active .nav__n,.sheet__links a.is-active .nav__n{color:var(--champ)}
.nav__cta{flex:none}
.nav__cta-short{display:none}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 2px;border:0;background:none;color:var(--fine-navy);font:500 13px/1 var(--f-ui);cursor:pointer;white-space:nowrap;transition:color 180ms ease}
.motion-toggle::before{content:"";flex:none;width:9px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.paused .motion-toggle::before,.rm .motion-toggle::before{width:0;height:0;border-left:8px solid currentColor;border-right:0;border-top:5px solid transparent;border-bottom:5px solid transparent}
@media (hover:hover){.motion-toggle:hover{color:#fff}}
.nav__pause{min-width:7.4em} /* the label flips between Pause and Play; keep the nav from shifting */
.no-gl .motion-toggle{display:none} /* the static fallback has no motion to pause */
.nav__menu{display:none;min-height:40px;padding:0 12px;border-radius:var(--r-ctl);border:1px solid rgba(216,190,126,.45);background:rgba(10,30,58,.35);color:var(--on-navy-hi);font:600 14px/1 var(--f-ui);cursor:pointer}
.nav__menu[aria-expanded="true"]{border-color:var(--champ);color:#fff}
.nav__sheet{position:absolute;left:0;right:0;top:var(--nav-h);padding:8px 18px 22px;background:var(--navy);border-bottom:1px solid var(--line-navy);box-shadow:0 24px 40px rgba(0,0,0,.35);opacity:0;transform:translateY(-6px);transition:opacity 200ms var(--ease-out),transform 260ms var(--ease-out)}
.nav__sheet.is-open{opacity:1;transform:none}
.sheet__links{display:grid;margin-bottom:16px}
.sheet__links a{font-size:18px;padding:16px 2px;border-bottom:1px solid var(--glass-line)}
.sheet__pause{margin-top:10px}
/* reading progress along the nav's bottom edge */
.nav__progress{position:absolute;left:0;right:0;bottom:-2px;height:2px;display:flex;gap:6px;opacity:0;transition:opacity 300ms ease;pointer-events:none}
.nav.is-reading .nav__progress{opacity:1}
.np{position:relative;flex:1 1 0;height:2px;background:rgba(216,190,126,.18)}
.np b{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--champ));transform-origin:left;transform:scaleX(var(--f,0))}
.np span{display:none} /* design-11 (pass 3 fixer): the bar stays; the labels read as debris under the nav */
.np.is-now span{color:var(--champ)}
@media (max-width:1100px){.nav{gap:18px;padding:0 20px}.nav__links{gap:18px}}
@media (max-width:960px){
  .nav__links,.nav__pause{display:none}
  .nav__menu{display:inline-flex;align-items:center}
  .nav__cta{margin-left:auto}
  .nav__cta-full{display:none}.nav__cta-short{display:inline}
  .np span{display:none}
}
@media (max-width:420px){.nav{padding:0 14px;gap:10px}.brand__word{font-size:19px}.brand{gap:9px}.nav__cta{padding:0 12px}}

/* ---------- Field (one WebGL context) ---------- */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(1100px 760px at 74% 40%,#16407A 0%,#0D2547 50%,#0A1E3A 100%)}
@media (max-width:760px){.backdrop{background:radial-gradient(700px 600px at 50% 22%,#16407A 0%,#0D2547 52%,#0A1E3A 100%)}}
.field{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 600ms ease}
.field canvas{width:100%;height:100%;display:block}
.field.is-live{opacity:1}
main,.foot{position:relative;z-index:1}
.node-labels{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 400ms ease}
.node-labels.is-on{opacity:1}
.nlabel{position:absolute;left:0;top:0;transform:translate3d(-999px,-999px,0);display:flex;align-items:baseline;gap:7px;white-space:nowrap;font:500 14px/1 var(--f-ui);color:var(--on-navy-hi);padding:7px 12px 7px 11px;border-radius:8px;background:rgba(10,30,58,.74);border:1px solid rgba(216,190,126,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:color 300ms ease,border-color 300ms ease,background-color 300ms ease,opacity 300ms ease}
.nlabel b{font:var(--fw-num) 13px/1 var(--f-mono);letter-spacing:.06em;color:var(--champ);transition:color 300ms ease}
.nlabel.is-active{color:var(--navy);background:var(--champ);border-color:var(--champ)}
.nlabel.is-active b{color:var(--navy)}
.nlabel.is-dim{opacity:.5}
.nlabel.is-under{opacity:0} /* notes-1: its node has gone under the next section's paper */

/* ---------- Hero ---------- */
.hero{position:relative;height:190vh;background:transparent;--md:min(34vw,520px,calc(100vh - 230px));--hx:clamp(28px,6.1vw,120px);--cy:calc(50% + var(--nav-h) / 2)}
.hero__pin{position:sticky;top:0;height:100vh;min-height:620px;overflow:hidden;display:flex;align-items:center;padding:var(--nav-h) 0 0 var(--hx)}
.hero__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,30,58,0) 86%,rgba(10,30,58,.6) 100%),linear-gradient(90deg,rgba(10,30,58,.92) 0%,rgba(10,30,58,.8) 40%,rgba(10,30,58,.42) 56%,rgba(10,30,58,0) 68%)}
.hero__copy{position:relative;z-index:2;width:100%;max-width:680px}
/* Sized so each of Barry's three lines (line 03 is 34 characters) sits on one line from 1024px up and clears the mark. */
.hero__h1{--fs:clamp(32px,3.55vw,52px);font-size:var(--fs);margin:0}
.hero__h1 .l{position:relative;display:block}
.hero__h1 .l3{font-style:italic;font-weight:400;color:var(--champ)}
@media (min-width:1024px){.hero__h1 .l{white-space:nowrap}}
.hn{position:absolute;left:-46px;top:calc(var(--fs) * .33);font:var(--fw-num) var(--fs-num)/1 var(--f-mono);font-style:normal;letter-spacing:var(--ls-num);color:var(--champ);transition:opacity 600ms var(--ease-out),text-shadow 900ms var(--ease-out)}
.hn::before{content:attr(data-n)}
.hn.is-lit{text-shadow:0 0 14px rgba(243,223,166,.6)}
.hero .pain--hero{margin:0 0 20px -30px;max-width:none}
.hero__lead{color:var(--pain-navy);max-width:50ch;margin-top:22px}
.hero__fine{max-width:none;white-space:nowrap}
.hero__mark{position:absolute;left:75%;top:var(--cy);z-index:1;width:var(--md);aspect-ratio:1;transform:translate(-50%,-50%)}
.mark-static{width:100%;height:100%;transform-origin:50% 50%;transition:opacity 700ms ease}
#mark-static{overflow:visible}
.is-field .hero .mark-static{opacity:0}
/* r1: before the field boots on a first visit the hero mark slot stays empty, so the intro reveal is not spoiled; the
   static mark appears only if the field has not booted by 2.4s (a late boot then crossfades onto the resting particle mark) */
.intro-pending:not(.is-field) .hero .mark-static{opacity:0;animation:ce-failsafe 1ms 2.4s forwards}
/* r1: the static mark (reduced motion, Pause motion, static fallback, the close slot) reads as the same soft glowing disc
   as the particle mark; the nav, footer, seal and agent marks keep the paper disc because they do not set --mark-disc */
.hero .mark-static,.mark-static--close{--mark-disc:rgba(214,226,240,.16);filter:drop-shadow(0 0 48px rgba(22,64,122,.65))}
.mark-hit{position:absolute;inset:4%;border-radius:50%;background:transparent;border:0;cursor:pointer}
.mark-hit:focus-visible{outline-offset:8px}
.hero__hint{position:absolute;left:75%;top:min(calc(var(--cy) + var(--md) / 2 + 32px),calc(100% - 36px));transform:translateX(-50%);z-index:2;margin:0;font:400 13px/1.2 var(--f-ui);color:var(--fine-navy);white-space:nowrap;transition:opacity 400ms ease}
/* scroll cue (Barry, 2026-10-10): the word "Scroll" and a gold spark that drops down a hairline, on a loop */
.hero__hint{display:flex;flex-direction:column;align-items:center;gap:12px;top:min(calc(var(--cy) + var(--md) / 2 + 28px),calc(100% - 92px));font:500 12px/1 var(--f-mono);letter-spacing:.28em;text-transform:uppercase;padding-left:.28em}
.hint__line{position:relative;display:block;width:1px;height:44px;overflow:hidden;background:linear-gradient(rgba(216,190,126,0),rgba(216,190,126,.5))}
.hint__line i{position:absolute;left:-1.5px;top:-14px;width:4px;height:14px;border-radius:2px;background:var(--champ);box-shadow:0 0 10px rgba(216,190,126,.85);animation:ceHintDrop 1.9s cubic-bezier(.65,0,.35,1) infinite}
@keyframes ceHintDrop{0%{transform:translateY(0);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translateY(58px);opacity:0}}
html.paused .hint__line i{animation-play-state:paused}
.hero__overview{position:absolute;left:0;right:0;bottom:10vh;z-index:2;text-align:center;opacity:0;transform:translateY(16px);pointer-events:none;padding:0 20px}
.overview__title{font-family:var(--f-disp);font-size:clamp(30px,3.2vw,46px);line-height:1.1;color:#fff;margin:0 auto;max-width:30ch;letter-spacing:-.015em;text-wrap:balance;text-shadow:0 2px 30px rgba(10,30,58,.95),0 0 60px rgba(10,30,58,.8)}
@media (min-width:1024px){.overview__title{max-width:none}}
/* line 03 sheen: an aria-hidden overlay of the same words, swept by a mask on the detonation beat */
.l3__sheen{position:absolute;left:0;right:0;top:0;pointer-events:none;opacity:0;color:#FFFAEC;text-shadow:0 0 16px rgba(255,234,186,.75);-webkit-mask:linear-gradient(100deg,transparent 38%,#000 50%,transparent 62%) 160% 0/300% 100% no-repeat;mask:linear-gradient(100deg,transparent 38%,#000 50%,transparent 62%) 160% 0/300% 100% no-repeat}
.l3__sheen::before{content:attr(data-text)}

/* ---------- Fly-through acts ---------- */
.tracks{position:relative;padding:0}
.tracks__static{display:none}
.act{position:relative;min-height:100vh;display:flex;align-items:center;padding:0 var(--hx,28px)}
/* r1: card 03 hands off to chapter 01 sooner (the gap from card 03 to the question was about a full viewport) */
html.motion #pillar-ai{min-height:80vh}
.tracks{--hx:clamp(28px,6.1vw,120px)}
.act__card{position:relative;width:min(470px,100%);padding:30px 32px 28px;border-radius:var(--r-panel);background:rgba(10,30,58,.8);border:1px solid var(--line-navy);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 30px 80px rgba(0,0,0,.35);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-emph)}
/* golive-03: the entrance pre-state is motion only (the head script sets html.motion before first paint), so without JS
   the three answers are never left invisible */
html.motion .act__card{opacity:0;transform:translateY(32px) scale(.985)}
.act.is-in .act__card{opacity:1;transform:none}
.act__rule{display:flex;align-items:center;gap:16px;margin:0 0 20px;font:var(--fw-num) var(--fs-num)/1 var(--f-mono);letter-spacing:var(--ls-num);color:var(--champ)}
.act__rule::before{content:attr(data-n)}
.act__rule::after{content:"";width:var(--num-rule);height:var(--num-rule-h);border-radius:2px;background:linear-gradient(90deg,var(--gold-hi),var(--gold));transform-origin:left;transform:scaleX(0);transition:transform 900ms var(--ease-emph) 200ms}
.act.is-in .act__rule::after{transform:scaleX(1)}
.act__h{font-size:clamp(28px,2.6vw,38px);line-height:1.1}
.act__card p:not(.pain){margin:14px 0 0;color:var(--body-navy);font-size:16px;line-height:1.55}
.act__link{display:inline-block;margin-top:18px;color:var(--champ);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.act__link:hover{color:#fff}

/* The chapter question slides moved to css/kq.css (pass 3, "The Blade Cut"); the .qa morph is retired. */

/* v7 chunk 3: the desk band (#model) and its .desk and .split rules were deleted with the section. .ticks stays (compliance, tiers). */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:22px;font-size:15px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:2px;background:var(--gold);transform:rotate(-58deg)}

/* ---------- Bands ---------- */
.band{position:relative;padding:120px 0}
.band--tight{padding-top:24px}
.band--paper{background:var(--paper);color:var(--slate)}
.band--paper .h2,.band--paper h2,.band--paper h3,.band--paper .h3{color:var(--navy)}
.band--paper .h2 em,.band--paper h2 em{color:var(--gold-disp)}
.band--paper .lead,.band--paper .sub{color:var(--slate)} /* v7 chunk 2: .sub on paper too */
.band--navy{background:radial-gradient(1000px 600px at 85% 0%,#12345F 0%,#0D2547 45%,#0A1E3A 100%)}
.band__head{max-width:760px;margin-bottom:48px}
.band__head--wide{max-width:900px}
.note{font-size:13px;color:var(--slate-2);margin:16px 0 0;max-width:80ch}

/* ---------- Stage (instrument frame) ---------- */
.stage{position:relative;border-radius:var(--r-panel);background:linear-gradient(180deg,#0D2547,#0A1E3A);color:var(--on-navy);box-shadow:0 30px 70px rgba(10,30,58,.28);overflow:hidden;border:1px solid rgba(10,30,58,.9)}
.stage::after{content:"";position:absolute;inset:6px;border-radius:12px;border:1px solid rgba(216,190,126,.14);pointer-events:none}
.stage__bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--glass-line)}
.stage .tag{border-color:var(--glass-line);color:var(--on-navy-dim)}

/* The horizon band rules were removed in v7 chunk 2 (the section is gone). .seg, .tier and .field-label stay: other sections use them. */
.field-label{font-size:var(--fs-lbl);font-weight:600;color:var(--on-navy-hi);display:flex;justify-content:space-between;gap:12px}
.seg{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.seg button{font:500 var(--fs-ctl)/1 var(--f-ui);padding:10px 14px;border-radius:999px;border:1px solid var(--glass-line);background:transparent;color:var(--on-navy);cursor:pointer;transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease}
.seg button:hover{border-color:rgba(216,190,126,.5)}
.seg button[aria-pressed="true"]{background:var(--champ);color:var(--navy);border-color:var(--champ)}
.tier{display:inline-flex;align-items:center;gap:7px;font:500 var(--fs-tag)/1 var(--f-mono);letter-spacing:var(--ls-tag);text-transform:uppercase;color:var(--on-navy-dim);white-space:nowrap}
.tier i{display:inline-block;width:18px;height:6px;border-radius:3px;border:1px solid var(--champ)}
i[data-t="1"]{background:var(--champ)}
i[data-t="2"]{background:linear-gradient(90deg,var(--champ) 66%,transparent 66%)}
i[data-t="3"]{background:linear-gradient(90deg,var(--champ) 33%,transparent 33%)}
i[data-t="4"]{background:transparent;border-style:dashed}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;accent-color:var(--gold)}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--gold) var(--fill,0%),rgba(255,255,255,.16) var(--fill,0%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:var(--champ);border:3px solid var(--navy);box-shadow:0 0 0 1px var(--champ)}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.16)}
input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--gold)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--champ);border:3px solid var(--navy)}

/* The unused v3 sim and studio CSS was removed in v7 chunk 1. v7 chunk 3 removed the old .ring rule here: app.css sizes the phone confirm ring, and this one rotated it twice. */

/* ---------- Switches, post card (still used by other sections). The .form rules moved to sections.css (v7 chunk 5). ---------- */
.sw{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:15px;color:var(--on-navy-hi);cursor:pointer}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw__ui{position:relative;flex:none;width:38px;height:22px;border-radius:999px;background:rgba(255,255,255,.14);transition:background-color 220ms var(--ease-out)}
.sw__ui::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--on-navy-hi);transition:transform 260ms var(--ease-out),background-color 220ms ease}
.sw input:checked + .sw__ui{background:var(--gold)}
.sw input:checked + .sw__ui::after{transform:translateX(16px);background:var(--navy)}
.sw input:focus-visible + .sw__ui{outline:3px solid var(--champ);outline-offset:3px}
.field-label output{font-family:var(--f-mono);color:var(--champ)}
.posts{display:grid;gap:10px}
.post{padding:12px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--glass-line)}
.post__who{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#fff;margin-bottom:6px}
.post__who i{width:20px;height:20px;border-radius:50%;background:var(--paper);display:inline-block}
.post__who small{margin-left:auto;font:500 var(--fs-code)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--champ)}
.post p{margin:0;font-size:13px;line-height:1.5;color:var(--on-navy-hi);min-height:3em}

/* v7 chunk 4: the kits and coach block (.duo, .kits, .chat, .msg) was deleted; kits and coach live in the #agents "Also included" expander (sections.css). */

/* v7 chunk 5: the first-week, FAQ, close, form, footer and .rv reveal rules moved or went. The new Membership, questions
   and close, form and footer rules live at the end of sections.css. */

/* ---------- Tablet / mobile (other sections) ---------- */
@media (max-width:760px){
  :root{--gut:18px}
  .cta-row{margin-top:20px;flex-direction:column}
  .cta-row .btn{width:100%}
  .fine{margin-top:14px;font-size:12.5px}
  .band{padding:80px 0}
  .band--tight{padding-top:12px}
  .band__head{margin-bottom:30px}
  .stage__bar{padding:14px 16px}
}

/* ---------- Chunk 1 stacked hero: phones, and tablets held upright ---------- */
@media (max-width:760px),(max-width:1180px) and (orientation:portrait){
  .hero{height:180vh;--md:min(60vw,240px);--hx:18px;--st:4px}
  .hero__pin{display:flex;flex-direction:column;align-items:stretch;padding:calc(var(--nav-h) + var(--st)) 14px 24px 18px}
  .hero__mark{order:-1;flex:none;position:relative;left:auto;top:auto;transform:none;margin:14px auto 0}
  .hero__scrim{background:linear-gradient(180deg,rgba(10,30,58,0) 0,rgba(10,30,58,0) calc(var(--nav-h) + var(--st) + var(--md) - 8px),rgba(10,30,58,.9) calc(var(--nav-h) + var(--st) + var(--md) + 36px),rgba(10,30,58,.9) 100%)}
  .hero__copy{margin-top:26px;max-width:none;padding-left:22px}
  /* 6.6vw keeps line 03 (34 characters) on one line down to 360px with a few pixels to spare in Safari and Chrome, and
     keeps the H1 the largest type in the hero (the overview line below is 24px); narrower, a line wraps cleanly */
  .hero__h1{--fs:clamp(23px,6.6vw,30px)}
  .hn{left:-26px;font-size:14px;top:calc(var(--fs) * .3)}
  .hero .pain--hero{font-size:17px;margin:0 0 14px -24px;padding-left:24px}
  .hero .pain--hero::before{left:6px}
  .hero__lead{font-size:17px;margin-top:14px}
  .hero .cta-row{margin:20px 0 0 -22px;flex-direction:column;gap:10px}
  .hero .cta-row .btn{width:100%;min-height:52px}
  .hero__fine{white-space:normal;margin-top:14px;font-size:12.5px}
  .hero__hint{display:none}
  .hero__overview{bottom:6vh;padding:28px 20px}
  .hero__overview::before{content:"";position:absolute;inset:-10px 0;z-index:-1;background:radial-gradient(60% 55% at 50% 50%,rgba(10,30,58,.8),rgba(10,30,58,0) 75%)}
  .overview__title{font-size:24px}
  .tracks{--hx:14px;padding-bottom:0}
  .act{align-items:flex-end;padding:0 14px 9vh}
}
/* upright tablets: the same stack, sized up */
@media (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  .hero{--md:min(52vw,400px);--hx:48px;--st:7vh}
  .hero__pin{padding-left:48px;padding-right:40px}
  .hero__h1{--fs:clamp(30px,5.4vw,46px)}
  .hn{left:-36px;font-size:15px}
  .hero .pain--hero{font-size:20px}
  .hero__lead{font-size:18px;max-width:52ch}
  .hero .cta-row{flex-direction:row;margin-left:0}
  .hero .cta-row .btn{width:auto}
  .overview__title{font-size:36px}
  .act{padding:0 48px 10vh}
}
/* r1: short phones (375x667 and the like): a smaller mark band keeps the primary button above the fold. The particle
   mark follows the slot's size every frame (field.js slotToMark), so the static and particle marks stay registered. */
@media (max-width:480px) and (max-height:720px){
  .hero{--md:min(48vw,180px)}
}
/* phones */
@media (max-width:760px){
  .pain{font-size:17px;padding-left:24px}
  .pain::before{left:3px}
  .pain--card{font-size:16.5px}
  .act__card{padding:22px 22px 20px}
  .act__h{font-size:27px}
  .act__card p:not(.pain){font-size:15.5px}
  .lead,.sub{font-size:17px}
}

/* ---------- Reduced motion, Pause motion and the static fallback: keep the composition, kill the motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.paused *,.paused *::before,.paused *::after{animation:none!important;transition:none!important}
.rm .field,.rm .node-labels{display:none}
.rm .hero{height:auto}
.rm .hero__pin{position:relative;height:auto;min-height:100vh}
.rm .hero__overview,.rm .hero__hint{display:none}
.rm .mark-hit{display:none}
/* design-15 (pass 3 fixer): the static fly-through draws the three pillar shapes (ring, phone, orbit) in gold hairline,
   one above each card, joined by thin gold lines; 2D SVG only. golive-03: no JS gets the same composition. */
.rm .tracks,html:not(.js) .tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:40px var(--hx) 120px}
.rm .tracks__static,html:not(.js) .tracks__static{display:block;grid-column:1/-1;width:100%;height:auto;margin:0 0 6px;overflow:visible}
.tracks__static .ts-lines path{fill:none;stroke:rgba(216,190,126,.5);stroke-width:1.2;stroke-dasharray:3 7}
.tracks__static .ts-shape *{fill:none;stroke:var(--champ);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tracks__static .ts-shape .f{fill:var(--champ);stroke:none}
.tracks__static .ts-halo{fill:url(#ts-glow);stroke:none}
.rm .act,html:not(.js) .act{min-height:0;padding:0;display:block}
.rm .act__card,html:not(.js) .act__card{opacity:1;transform:none;width:100%;height:100%;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--navy-2)}
.rm .act__rule::after,html:not(.js) .act__rule::after{transform:scaleX(1)}
@media (max-width:1080px){.rm .tracks,html:not(.js) .tracks{grid-template-columns:1fr 1fr}.rm .tracks__static,html:not(.js) .tracks__static{max-width:640px;justify-self:center}}
@media (max-width:760px){.rm .tracks,html:not(.js) .tracks{grid-template-columns:1fr;padding:24px 14px 80px}}

/* Mobile node label: the active one pins under the nav and steps aside while a card covers its band. */
@media (max-width:759px){
  .nlabel{display:none}
  .nlabel.is-active{display:flex;transform:none!important;left:50%!important;top:calc(var(--nav-h) + 24px)!important;translate:-50% 0;font-size:13px;max-width:calc(100vw - 32px)}
  .node-labels.is-covered .nlabel.is-active{opacity:0}
}

/* ---------- Field interleave (v5) ----------
   While the field is live the canvas sits between section grounds and section content:
   grounds move to a ::before at z -1, content sits at z 1, so the traveling swarm shows through
   every band but never draws over text. Reduced motion and the static fallback never get .is-field. */
html.is-field main{z-index:auto}
html.is-field .backdrop{z-index:-3}
html.is-field main>section{position:relative}
html.is-field .band--paper,html.is-field .band--navy{background:transparent}
html.is-field .band--paper::before,html.is-field .band--navy::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
html.is-field .band--paper::before{background:var(--paper)}
html.is-field .band--navy::before{background:radial-gradient(1000px 600px at 85% 0%,#12345F 0%,#0D2547 45%,#0A1E3A 100%)}
html.is-field .band>*,html.is-field .app>*{position:relative;z-index:1}
/* screen map fix (pass 3): #app has no ground of its own, so #agents' ground fades in over its first 60vh instead of
   starting at a hard brightness step that crawled up through the chapter 03 lead-in */
html.is-field #agents::before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 60vh);mask-image:linear-gradient(180deg,transparent 0,#000 60vh)}

/* ---------- Intro beat ----------
   First paint shows everything but line 03 at full strength. Line 03 waits at 70% and ignites with a sheen on the
   detonation; the numerals wait at 35% and ignite at 1.9s, 2.3s and 2.7s as the reform swirl passes them (field.js
   adds .is-lit). Failsafes reveal both if the field is slow to boot. */
.intro-pending .hero__h1 .l3{opacity:.7;transition:opacity 600ms var(--ease-out);animation:ce-failsafe 1ms 2s forwards}
.intro-pending .hn:not(.is-lit){opacity:.35;animation:ce-failsafe 1ms 3.4s forwards}
.intro-hit .hero__h1 .l3{opacity:1;animation:ce-beat 900ms var(--ease-out)}
.intro-hit .l3__sheen{animation:ce-sheen 700ms cubic-bezier(.4,0,.2,1)}
.intro-hit .hero__cta::after{animation:ce-sheen-btn 900ms var(--ease-out)}
@keyframes ce-failsafe{to{opacity:1}}
@keyframes ce-beat{0%{text-shadow:0 0 28px rgba(243,223,166,.85),0 0 2px rgba(255,248,230,.9)}100%{text-shadow:0 0 0 rgba(243,223,166,0)}}
@keyframes ce-sheen{0%{opacity:1;-webkit-mask-position:100% 0;mask-position:100% 0}85%{opacity:1}100%{opacity:0;-webkit-mask-position:0% 0;mask-position:0% 0}}
@keyframes ce-sheen-btn{from{transform:translateX(-120%)}to{transform:translateX(120%)}}

/* the field is on stage from the first charge frame; the static mark yields to it at once */
html.is-field .field{opacity:1;transition:none}
html.is-field .hero .mark-static{transition:opacity 160ms ease}
/* a late or repeat boot lands on the resting mark: the static mark crossfades onto it instead of cutting */
html.is-field:not(.intro-pending) .hero .mark-static{transition:opacity 500ms ease}

/* interaction-02 (pass 3 fixer): the fly-through card links land on the demo they name. The library slab clears the nav
   by 16px; the pinned stages (#app-track, #hire) land with the pin engaged (their top at the viewport top; the pin's own
   padding clears the nav). Static layouts clear the nav by 16px. */
#depth,#app-track,#hire{scroll-margin-top:16px}
html.motion #app-track,html.motion #hire{scroll-margin-top:calc(-1 * var(--nav-h))}