/* Bintera design system: Graphite with one pale accent (ice by default; approved backups below).
   One quiet typeface (Hanken Grotesk) at restrained sizes.
   Footage is graded the same way everywhere so it reads as film, not stock. */
@font-face{font-family:Hanken;src:url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2-variations');font-weight:100 900;font-display:swap}

:root{
  --black:#0F1114;--booth:#14171B;--panel:#181B20;--panel-2:#22262D;--bg-rgb:15 17 20;--text-rgb:241 243 246;
  --line:rgb(var(--text-rgb) / .12);--line-2:rgb(var(--text-rgb) / .24);
  --text:#F1F3F6;--text-2:#C5CAD2;--text-3:#A9AFB9;--strong:#fff;
  --tungsten:var(--accent);--tungsten-hi:var(--accent-hi);--tungsten-ink:var(--on-accent);--tungsten-wash:rgb(var(--accent-rgb) / .12);
  --info:#A9D6FF;--info-hi:#C6E4FF;--info-rgb:169 214 255;
  --ember:#E66A43;--ember-wash:rgba(230,106,67,.14);--sage:#8FCBA8;--sage-wash:rgba(143,203,168,.13);--amber-warn:#E8C25B;
  --font:Hanken,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --wide:100%;--normal:100%;--narrow:100%;
  --ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --max:1280px;--gutter:clamp(16px,4vw,48px);
  --r:14px;--r-lg:22px;
  --z-grain:1;--z-nav:20;--z-overlay:30;
}
/* ---- Two brand colors: Burnt amber (--accent) is for action (buttons, logo, slider); Ice (--info) is for information and attention (links, focus, progress, highlights).
   Burnt amber is the chosen default (set by SITE_ACCENT); ice and the others are approved backups. Approved backups swap with one setting (SITE_ACCENT), so seasons and campaigns can change the look without a redesign. */
:root,[data-accent=smokyturq]{--accent:#78B4AB;--accent-hi:#8FC4BC;--on-accent:#0A2321;--accent-rgb:120 180 171;--on-accent-rgb:10 35 33}
[data-accent=burnt]{--accent:#C97D2B;--accent-hi:#D8924A;--on-accent:#140900;--accent-rgb:201 125 43;--on-accent-rgb:20 9 0}
[data-accent=ice]{--accent:#A9D6FF;--accent-hi:#C6E4FF;--on-accent:#08223A;--accent-rgb:169 214 255;--on-accent-rgb:8 34 58}
[data-accent=silver]{--accent:#E6E9ED;--accent-hi:#FFFFFF;--on-accent:#0F1114;--accent-rgb:230 233 237;--on-accent-rgb:15 17 20}
[data-accent=rose]{--accent:#F5B8C6;--accent-hi:#F9CDD7;--on-accent:#3A0F1B;--accent-rgb:245 184 198;--on-accent-rgb:58 15 27}
[data-accent=peach]{--accent:#FFC4A3;--accent-hi:#FFD6BF;--on-accent:#3A1606;--accent-rgb:255 196 163;--on-accent-rgb:58 22 6}
[data-accent=lilac]{--accent:#CDBEFF;--accent-hi:#DDD2FF;--on-accent:#1E1240;--accent-rgb:205 190 255;--on-accent-rgb:30 18 64}
[data-accent=periwinkle]{--accent:#B4BFFF;--accent-hi:#CBD3FF;--on-accent:#141B4A;--accent-rgb:180 191 255;--on-accent-rgb:20 27 74}
[data-accent=mauve]{--accent:#E6B8E2;--accent-hi:#F0CDEC;--on-accent:#3A1236;--accent-rgb:230 184 226;--on-accent-rgb:58 18 54}
[data-accent=coral]{--accent:#FFAE9F;--accent-hi:#FFC6BB;--on-accent:#3D1009;--accent-rgb:255 174 159;--on-accent-rgb:61 16 9}
[data-accent=steel]{--accent:#B9C7D8;--accent-hi:#D0DAE6;--on-accent:#132233;--accent-rgb:185 199 216;--on-accent-rgb:19 34 51}
[data-accent=honey]{--accent:#F6C67E;--accent-hi:#F9D49C;--on-accent:#2E1A02;--accent-rgb:246 198 126;--on-accent-rgb:46 26 2}
[data-accent=amber]{--accent:#EFA845;--accent-hi:#F4BC6A;--on-accent:#261402;--accent-rgb:239 168 69;--on-accent-rgb:38 20 2}
[data-accent=darkamber]{--accent:#D98B2B;--accent-hi:#E5A050;--on-accent:#1F0F00;--accent-rgb:217 139 43;--on-accent-rgb:31 15 0}
[data-accent=burnt]{--accent:#C97D2B;--accent-hi:#D8924A;--on-accent:#140900;--accent-rgb:201 125 43;--on-accent-rgb:20 9 0}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--black)}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--black);color:var(--text);font:400 17px/1.62 var(--font);font-stretch:var(--normal);-webkit-font-smoothing:antialiased}
body::after{content:'';position:fixed;inset:-50%;pointer-events:none;z-index:var(--z-grain);opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--info);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--info-hi)}
:focus-visible{outline:2px solid var(--info);outline-offset:3px;border-radius:6px}
::selection{background:var(--tungsten);color:var(--tungsten-ink)}
h1,h2,h3,.display{font-family:var(--font);font-stretch:var(--wide);font-weight:600;letter-spacing:-.02em;line-height:1.12;margin:0 0 .45em;text-wrap:balance;color:var(--strong)}
h1{font-size:clamp(2.1rem,3.6vw,2.6rem)}
h2{font-size:clamp(1.7rem,2.8vw,2.4rem)}
h3{font-size:1.15rem;font-stretch:var(--normal);font-weight:700;letter-spacing:-.005em;line-height:1.3;margin:0 0 .4em}
.lit{color:inherit}
p{margin:0 0 1em;text-wrap:pretty}
code{font:500 .86em/1.4 ui-monospace,Menlo,monospace;background:var(--panel-2);padding:.12em .4em;border-radius:6px;word-break:break-all;color:var(--text-2)}
.lede{font-size:clamp(1.08rem,1.45vw,1.25rem);line-height:1.58;color:var(--text-2);max-width:54ch}
.fine{color:var(--text-3);font-size:.9rem}
.fine.after{margin:18px 0 0}.fine.flush{margin:0}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:16px;top:8px;background:var(--tungsten);color:var(--tungsten-ink);padding:8px 12px;z-index:50;border-radius:8px}
.envbar{position:relative;z-index:25;background:#1B1F26;color:#C9D3E0;font:500 .78rem/1 var(--font);letter-spacing:.02em;text-align:center;padding:9px 16px}
.envbar a{color:#E6ECF5}

/* ---------- navigation */
.top{position:sticky;top:0;z-index:var(--z-nav);background:linear-gradient(180deg,rgb(var(--bg-rgb) / .92),rgb(var(--bg-rgb) / .72));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.home-page .top{position:fixed;left:0;right:0;background:linear-gradient(180deg,rgb(var(--bg-rgb) / .7),rgb(var(--bg-rgb) / 0));border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .4s var(--ease),border-color .4s var(--ease)}
.home-page.scrolled .top{background:rgb(var(--bg-rgb) / .9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.home-page .envbar{position:fixed;left:0;right:0;top:0;z-index:26}
.home-page.has-envbar .top{top:33px}
.top-in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:20px;padding:14px var(--gutter)}
.brand{display:flex;align-items:center;gap:10px;color:var(--strong);text-decoration:none;font:600 1.22rem/1 var(--font);font-stretch:var(--wide);letter-spacing:-.02em}
.brand:hover{color:var(--strong)}
.mark{width:26px;height:26px}
.top nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.top nav a,.top nav .linklike{color:var(--text-2);text-decoration:none;font:500 .93rem/1 var(--font);padding:10px 13px;border-radius:999px;transition:color .25s var(--ease),background .25s var(--ease)}
.top nav a:hover,.top nav .linklike:hover{color:var(--strong);background:rgb(var(--text-rgb) / .07)}
.top nav a[aria-current=page]{color:var(--strong);box-shadow:inset 0 -2px 0 var(--info);border-radius:0}
.top nav a.btn{color:var(--tungsten-ink);margin-left:8px}
.top nav a.btn:hover{color:var(--tungsten-ink)}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border-radius:50%;border:0;background:rgb(var(--text-rgb) / .08);cursor:pointer;position:relative}
.menu-btn .bar{position:absolute;left:13px;right:13px;height:1.5px;background:var(--strong);transition:transform .45s var(--ease)}
.menu-btn .bar:nth-last-child(2){top:18px}.menu-btn .bar:last-child{top:25px}
.nav-open .menu-btn .bar:nth-last-child(2){transform:translateY(3.5px) rotate(45deg)}
.nav-open .menu-btn .bar:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.inline{display:inline}
.linklike{background:none;border:0;color:var(--text-2);font:500 .95rem/1.6 var(--font);cursor:pointer;padding:0}
.linklike:hover{color:var(--strong);text-decoration:underline}

/* ---------- buttons */
.btn{--h:50px;display:inline-flex;align-items:center;gap:12px;min-height:var(--h);padding:0 24px;border-radius:999px;background:var(--tungsten);color:var(--tungsten-ink);border:0;font:600 .98rem/1 var(--font);letter-spacing:0;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .5s var(--ease),background .3s var(--ease),box-shadow .4s var(--ease)}
.btn:hover{background:var(--tungsten-hi);color:var(--tungsten-ink);box-shadow:0 0 0 5px var(--tungsten-wash)}
.btn:active{transform:scale(.97)}
.btn.arrow{padding-right:7px}
.btn .ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgb(var(--on-accent-rgb) / .12);transition:transform .5s var(--ease)}
.btn .ico svg{width:14px;height:14px}
.btn:hover .ico{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--strong);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn.ghost:hover{background:rgb(var(--text-rgb) / .06);box-shadow:inset 0 0 0 1.5px var(--strong)}
.btn.accent{background:var(--tungsten)}
.btn.light{background:#fff;color:#111}.btn.light:hover{background:var(--text);color:#111}
.btn.light .ico{background:rgba(0,0,0,.08)}
.btn.sm{--h:40px;padding:0 18px;font-size:.9rem}
.btn.ms{background:#fff;color:#111}
.btn.ms:hover{background:var(--text);color:#111;box-shadow:none}
.textlink{font-weight:600;color:var(--strong);text-decoration:none;border-bottom:1.5px solid var(--line-2);padding-bottom:3px;transition:border-color .3s var(--ease)}
.textlink:hover{color:var(--strong);border-color:var(--info)}
.textlink.on-dark{color:var(--strong)}
.cta{display:flex;gap:14px 22px;flex-wrap:wrap;align-items:center;margin:32px 0 0}

/* ---------- frame */
main{flex:1;width:100%;max-width:var(--max);margin:0 auto;padding:56px var(--gutter) 104px}
main.home{max-width:none;padding:0}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:760px;margin:0 auto}
.narrowish{max-width:440px}
.sec{padding-block:clamp(84px,10vw,150px)}
.sec-head{display:grid;gap:14px;margin-bottom:48px;max-width:760px}
.sec-head p{color:var(--text-2);max-width:44ch;margin:0}
.flash{padding:14px 18px;border-radius:var(--r);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);color:var(--text)}
.flash.ok{background:var(--sage-wash);box-shadow:inset 0 0 0 1px rgba(143,203,168,.35)}
.flash.bad{background:var(--ember-wash);box-shadow:inset 0 0 0 1px rgba(230,106,67,.4)}
.flash.warn{background:rgba(232,194,91,.1);box-shadow:inset 0 0 0 1px rgba(232,194,91,.35)}
.pill{display:inline-block;font:600 .8rem/1 var(--font);padding:8px 12px;border-radius:999px;background:var(--panel-2);color:var(--text-2)}
.pill.bad{background:var(--ember-wash);color:#F3A487}

/* reveals enhance an already-visible page; never hide content without scripts */
.js .reveal{opacity:0;transform:translateY(24px);filter:blur(6px);transition:opacity 1s var(--ease),transform 1.2s var(--ease),filter 1s var(--ease)}
.js .reveal.in{opacity:1;transform:none;filter:none}
.js .reveal.d1{transition-delay:.1s}.js .reveal.d2{transition-delay:.2s}.js .reveal.d3{transition-delay:.3s}.js .reveal.d4{transition-delay:.4s}

/* ---------- HERO: the screening */
.screen{position:relative;height:min(100dvh,920px);min-height:640px;overflow:hidden;background:#000;isolation:isolate}
.reel{position:absolute;inset:0;z-index:-2}
.scene{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s var(--ease-io)}
.scene.is-on{opacity:1}
.scene video,.scene img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 16s linear}
.scene.is-on video,.scene.is-on img{transform:scale(1)}
.screen::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(var(--bg-rgb) / .92) 0%,rgb(var(--bg-rgb) / .72) 38%,rgb(var(--bg-rgb) / .15) 70%),linear-gradient(0deg,rgb(var(--bg-rgb) / .92) 0%,rgb(var(--bg-rgb) / 0) 34%),linear-gradient(180deg,rgb(var(--bg-rgb) / .55) 0%,rgb(var(--bg-rgb) / 0) 22%)}
/* letterbox bars: the lights go down on load */
.bars{position:absolute;inset:0;z-index:4;pointer-events:none}
.bars::before,.bars::after{content:'';position:absolute;left:0;right:0;height:0;background:#000;z-index:2;animation:lightsdown 1.9s var(--ease-io) .25s both;pointer-events:none}
.bars::before{top:0}.bars::after{bottom:0}
@keyframes lightsdown{from{height:50%}to{height:0}}
.screen-in{position:relative;z-index:3;height:100%;max-width:var(--max);margin:0 auto;padding:clamp(110px,16vh,170px) var(--gutter) 0;display:flex;flex-direction:column}
.screen h1{font-size:clamp(2.1rem,5.2vw,2.6rem);line-height:.92;letter-spacing:-.035em;max-width:12ch;margin-bottom:26px}
.screen h1 .lit{display:block}
.screen .lede{color:#D9DEE5;max-width:46ch}
.subtitle{position:absolute;left:50%;bottom:clamp(96px,14vh,128px);transform:translateX(-50%);z-index:3;width:min(820px,calc(100% - 32px));text-align:center;pointer-events:none}
.subtitle span{display:inline;padding:.18em .55em;background:rgba(0,0,0,.62);color:#fff;font:500 clamp(1rem,1.6vw,1.25rem)/1.8 var(--font);-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:4px}
.subtitle span.swap{animation:subin .8s var(--ease)}
@keyframes subin{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:none}}
.chapters{position:absolute;left:0;right:0;bottom:0;z-index:3}
.chapters-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter) 28px;display:grid;grid-template-columns:repeat(4,1fr) auto;gap:18px;align-items:end}
.chap{appearance:none;background:none;border:0;padding:12px 0 0;text-align:left;cursor:pointer;color:var(--text-3);font:600 .86rem/1.3 var(--font);border-top:2px solid rgb(var(--text-rgb) / .2);position:relative;transition:color .3s var(--ease)}
.chap b{display:block;font-weight:600;font-stretch:var(--wide);color:inherit;font-size:.98rem;letter-spacing:-.01em}
.chap:hover{color:var(--strong)}
.chap[aria-current=true]{color:var(--strong)}
.chap[aria-current=true]::before{content:'';position:absolute;left:0;top:-2px;height:2px;width:100%;background:var(--info);transform-origin:left;animation:fill var(--dur,15s) linear forwards}
.paused .chap[aria-current=true]::before{animation-play-state:paused}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pausebtn{appearance:none;background:rgb(var(--text-rgb) / .08);border:0;color:var(--strong);border-radius:999px;padding:10px 16px;font:600 .8rem var(--font);cursor:pointer}
.pausebtn:hover{background:rgb(var(--text-rgb) / .16)}

/* ---------- audiences: a film strip of posters */
.posters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.poster{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:2/3;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--strong);isolation:isolate;background:var(--panel)}
.poster:hover{color:var(--strong)}
.poster img,.poster video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease),filter .8s var(--ease);filter:saturate(.85)}
.poster:hover img,.poster:hover video{transform:scale(1.05);filter:saturate(1)}
.poster::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(var(--bg-rgb) / 0) 22%,rgb(var(--bg-rgb) / .55) 46%,rgb(var(--bg-rgb) / .94) 78%)}
.poster .p-in{padding:20px}
.poster strong{display:block;font:600 1.45rem/1 var(--font);font-stretch:var(--wide);letter-spacing:-.02em;margin-bottom:8px}
.poster span{font-size:.92rem;color:var(--text-2);display:block}
.poster .p-ex{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2);font-size:.82rem;color:var(--text-3)}

/* ---------- decision demo */
.demo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:center}
.demo .shot{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 0 0 1px var(--line),0 50px 90px -40px #000;position:relative}
.demo .shot::after{content:'Paused';position:absolute;left:18px;top:16px;background:rgba(0,0,0,.6);color:#fff;font:700 .75rem/1 var(--font);font-stretch:var(--wide);letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;border-radius:6px}
.demo-q{font:600 clamp(1.6rem,2.6vw,2.2rem)/1.05 var(--font);font-stretch:var(--wide);letter-spacing:-.02em;color:var(--strong);margin:0 0 22px}
.opt{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;margin:0 0 10px;padding:16px 18px;border-radius:12px;border:0;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font:500 1rem/1.4 var(--font);cursor:pointer;transition:transform .45s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.opt:hover:not([disabled]){box-shadow:inset 0 0 0 1px var(--info);transform:translateX(5px)}
.opt .k{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:rgb(var(--text-rgb) / .08);font:700 .8rem var(--font);color:var(--text-2)}
.opt.good{background:var(--sage-wash);box-shadow:inset 0 0 0 1px var(--sage)}
.opt.good .k{background:var(--sage);color:#0B1A12}
.opt.badpick{background:var(--ember-wash);box-shadow:inset 0 0 0 1px var(--ember)}
.opt[disabled]{cursor:default}
.demo-fb{min-height:3.2em;margin-top:16px;color:var(--text-2)}
.demo-fb b{color:var(--strong)}

/* ---------- now showing (free lessons) */
.showing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.reelcard{display:flex;flex-direction:column;gap:16px;color:var(--text);text-decoration:none}
.reelcard:hover{color:var(--text)}
.reelcard .frame{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.reelcard .frame img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.8) contrast(1.05);transition:transform 1.2s var(--ease),filter .6s var(--ease)}
.reelcard:hover .frame img{transform:scale(1.04);filter:saturate(1)}
.reelcard .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgb(var(--bg-rgb) / .55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--strong);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);transition:transform .5s var(--ease),background .3s var(--ease)}
.reelcard:hover .play{transform:scale(1.1);background:var(--tungsten);color:var(--tungsten-ink)}
.reelcard .play svg{width:18px;height:18px;margin-left:3px}
.reelcard strong{display:block;font:600 1.55rem/1.05 var(--font);font-stretch:var(--wide);letter-spacing:-.02em;color:var(--strong);margin:4px 0 6px}
.reelcard .meta{font-size:.84rem;color:var(--text-3);font-weight:600}
.reelcard .sub{color:var(--text-2)}

/* ---------- research statement */
.statement{max-width:1100px}
.statement blockquote{margin:0;font:600 clamp(2.0rem,4.6vw,2.6rem)/1.04 var(--font);font-stretch:var(--wide);letter-spacing:-.03em;color:var(--strong)}
.statement blockquote .dim{color:var(--text-3)}
.statement figcaption{margin-top:28px;color:var(--text-3);max-width:62ch;font-size:.95rem}
.statement{margin:0}
.points{list-style:none;padding:0;margin:72px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.points li{border-top:1px solid var(--line-2);padding-top:22px}
.points p{color:var(--text-2);margin:0}

/* ---------- roll credits (evidence) */
.credits{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.fw{list-style:none;padding:0;margin:30px 0 0}
.fw li{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.fw li:last-child{border-bottom:1px solid var(--line)}
.fw b{font-weight:700;color:var(--strong)}
.fw span{color:var(--text-3);font-size:.9rem}
.roll{position:relative;height:520px;border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line);-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.roll-in{position:absolute;left:0;right:0;top:0;text-align:center;padding:60px 24px;animation:roll 38s linear infinite}
.roll:hover .roll-in{animation-play-state:paused}
@keyframes roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.roll .rt{font:600 .8rem/1 var(--font);font-stretch:var(--wide);letter-spacing:.18em;text-transform:uppercase;color:var(--info);margin:34px 0 14px}
.roll .rl{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;font-size:.95rem;color:var(--text);max-width:420px;margin:0 auto}
.roll .rl span:nth-child(odd){text-align:right;color:var(--text-3)}
.roll .rl span:nth-child(even){text-align:left}
.roll .big{font:600 2rem/1.05 var(--font);font-stretch:var(--wide);color:var(--strong);letter-spacing:-.02em}
.roll .sample{position:absolute;right:14px;top:12px;font:600 .72rem var(--font);color:var(--text-3);z-index:2}

/* ---------- how it works */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s}
.steps li{counter-increment:s;border-top:1px solid var(--line-2);padding-top:24px;position:relative}
.steps li::before{content:counter(s);display:block;font:600 2.8rem/1 var(--font);font-stretch:var(--wide);color:var(--tungsten);margin-bottom:18px}
.steps strong{display:block;font:600 1.25rem/1.15 var(--font);font-stretch:var(--wide);color:var(--strong);margin-bottom:10px;letter-spacing:-.01em}
.steps p{color:var(--text-2);margin:0;font-size:.97rem}

/* ---------- microsoft band */
.booth{background:var(--booth);border-block:1px solid var(--line)}
.ms-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.perm{list-style:none;padding:0;margin:0}
.perm li{display:flex;justify-content:space-between;gap:16px;padding:17px 0;border-top:1px solid var(--line)}
.perm li:last-child{border-bottom:1px solid var(--line)}
.perm .y{color:var(--sage);font-weight:700}.perm .n{color:var(--ember);font-weight:700}

/* ---------- closing */
.closing{position:relative;overflow:hidden;color:var(--strong);isolation:isolate;padding:clamp(110px,16vw,200px) 0}
.closing video,.closing img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.closing::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(var(--bg-rgb) / .92),rgb(var(--bg-rgb) / .55) 60%,rgb(var(--bg-rgb) / .25)),linear-gradient(0deg,var(--black),transparent 30%),linear-gradient(180deg,var(--black),transparent 30%)}
.closing h2{max-width:13ch;font-size:clamp(2.1rem,5.6vw,2.6rem);line-height:.95}
.closing p{color:var(--text-2);max-width:44ch}

/* ---------- pricing */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.plan{display:flex;flex-direction:column;padding:34px;border-radius:var(--r-lg);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.plan .core{display:flex;flex-direction:column;flex:1}
.plan.lead{background:linear-gradient(180deg,rgb(var(--accent-rgb) / .12),rgb(var(--accent-rgb) / 0) 60%),var(--panel);box-shadow:inset 0 0 0 1px rgb(var(--accent-rgb) / .45)}
.plan h3{font:600 1.9rem/1 var(--font);font-stretch:var(--wide);letter-spacing:-.02em;color:var(--strong);margin:0 0 20px}
.plan .price{display:flex;align-items:baseline;gap:8px;margin:0 0 8px}
.plan .price span{font:600 2.2rem/1.05 var(--font);letter-spacing:-.01em;color:var(--text)}
.plan .price .fine{font-size:1rem;font-stretch:var(--normal);font-weight:500;letter-spacing:0;color:var(--text-3)}
.plan .for{color:var(--text-2);min-height:3.2em}
.plan ul{list-style:none;padding:0;margin:18px 0 30px;flex:1}
.plan li{padding:12px 0 12px 28px;border-top:1px solid var(--line);position:relative;font-size:.97rem}
.plan li::before{content:'';position:absolute;left:3px;top:20px;width:11px;height:6px;border-left:2px solid var(--tungsten);border-bottom:2px solid var(--tungsten);transform:rotate(-45deg)}

/* ---------- library page */
.catalog{columns:2;column-gap:72px}
.catalog section{break-inside:avoid;margin-bottom:48px}
.catalog h2{font-size:1.5rem;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line-2);padding-bottom:12px;margin-bottom:6px}
.catalog h2 .n{font-size:.95rem;color:var(--info);font-stretch:var(--normal)}
.catalog ol{list-style:none;padding:0;margin:0}
.catalog li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.97rem}
.catalog li .m{color:var(--text-3);white-space:nowrap;font-size:.88rem}
.catalog li a{font-weight:600}

/* ---------- forms */
.form-page{max-width:540px;margin:0 auto}
.form-page h1{font-size:clamp(2.1rem,3.8vw,2.6rem)}
.form-card{margin-top:30px;border-radius:var(--r-lg);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.form-card>.core{padding:32px}
.stack{display:flex;flex-direction:column;gap:18px}
label{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:.95rem;color:var(--text)}
input,select{width:100%;min-width:0;font:400 1rem var(--font);color:var(--strong);background:var(--black);border:0;box-shadow:inset 0 0 0 1px var(--line-2);border-radius:10px;padding:13px 14px;min-height:50px;transition:box-shadow .25s var(--ease)}
input:hover,select:hover{box-shadow:inset 0 0 0 1px rgb(var(--text-rgb) / .4)}
input:focus,select:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--info),0 0 0 4px rgb(var(--info-rgb) / .14)}
input[type=date]{color-scheme:dark}
input[type=file]{padding:12px}
.opt-l{color:var(--text-3);font-weight:400}
.or{display:flex;align-items:center;gap:14px;color:var(--text-3);font:600 .8rem var(--font);margin:20px 0}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}
fieldset{border:0;padding:0;margin:30px 0}
legend{font:600 1.35rem/1.1 var(--font);font-stretch:var(--wide);color:var(--strong);padding:0;margin-bottom:12px}
label.check{flex-direction:row;align-items:flex-start;gap:12px;font-weight:400;padding:8px 0}
label.check input{min-height:auto;width:18px;height:18px;margin-top:3px;accent-color:var(--tungsten);box-shadow:none;flex:none}
.trackpick{border-top:1px solid var(--line)}
.trackpick:last-of-type{border-bottom:1px solid var(--line)}
.trackpick summary{cursor:pointer;font-weight:700;padding:15px 4px;display:flex;justify-content:space-between;gap:16px;list-style:none}
.trackpick summary::-webkit-details-marker{display:none}
.trackpick summary::after{content:'+';color:var(--text-3)}
.trackpick[open] summary::after{content:'–'}
.mods{display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px;padding:0 4px 14px}
.people-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px;padding-left:30px}

/* ---------- app screens */
.page-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1,.page-head h2{margin:0}
.in-app h1{font-size:clamp(2.0rem,3.6vw,2.6rem)}
.in-app h2{font-size:1.6rem;margin-top:48px}
.card{padding:28px;border-radius:var(--r-lg);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:20px}
.card h2{margin-top:0;font-size:1.4rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0 36px}
.two>*,.stack,.card{min-width:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 8px}
.stats>div{padding:22px 24px;border-radius:var(--r-lg);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column}
.stats .k{font-weight:600;font-size:.9rem;color:var(--text-3)}
.stats .v{font:600 3.2rem/1.05 var(--font);font-stretch:var(--wide);letter-spacing:-.03em;margin:10px 0 4px;color:var(--strong);font-variant-numeric:tabular-nums}
.stats .v.bad{color:var(--ember)}
.stats .d{color:var(--text-3);font-size:.9rem}
.tbl{width:100%;border-collapse:collapse;margin:14px 0 28px;font-size:.95rem}
.tbl th{text-align:left;font-weight:600;font-size:.82rem;color:var(--text-3);border-bottom:1px solid var(--line-2);padding:12px 10px 12px 0}
.tbl td{border-bottom:1px solid var(--line);padding:14px 10px 14px 0;vertical-align:middle;font-variant-numeric:tabular-nums}
.tbl tbody tr{transition:background .2s var(--ease)}
.tbl tbody tr:hover{background:rgb(var(--text-rgb) / .03)}
.tbl tr.disabled td{color:var(--text-3)}
.tbl.small{font-size:.86rem}
.tbl code{font-size:.76rem}
.bar{width:96px;max-width:none;height:6px;display:inline-block;vertical-align:middle;margin-right:8px}
.bar .bg{fill:var(--panel-2)}.bar .fg{fill:var(--tungsten)}
.st{display:inline-block;font:600 .78rem/1 var(--font);padding:6px 10px;border-radius:999px;background:var(--panel-2);color:var(--text-2)}
.st.complete{background:var(--sage-wash);color:var(--sage)}
.st.overdue{background:var(--ember-wash);color:#F3A487}
.st.in-progress{background:rgba(232,194,91,.12);color:var(--amber-warn)}
.setup{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;padding:32px;border-radius:var(--r-lg);background:linear-gradient(135deg,rgb(var(--accent-rgb) / .12),rgb(var(--accent-rgb) / 0) 55%),var(--panel);box-shadow:inset 0 0 0 1px var(--line);margin-top:12px}
.setup .intro h2{margin-top:0;font-size:1.8rem}
.checklist{list-style:none;counter-reset:c;padding:0;margin:0}
.checklist li{counter-increment:c;display:grid;grid-template-columns:46px 1fr;padding:16px 0;border-bottom:1px solid var(--line)}
.checklist li:last-child{border-bottom:0}
.checklist li::before{content:counter(c);grid-row:span 2;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);display:grid;place-items:center;font-weight:700;font-size:.9rem}
.checklist li.done::before{content:'✓';background:var(--tungsten);color:var(--tungsten-ink);box-shadow:none}
.checklist a,.checklist .t{font-weight:700;color:var(--strong)}
.checklist span:last-child{color:var(--text-3);font-size:.93rem}
.plain{padding-left:20px}
.crumb{font-weight:600;font-size:.85rem;color:var(--text-3);margin-bottom:14px}
.crumb a{color:var(--text-2)}
.assignment{margin-top:34px}
.assignment h2{margin:0;font-size:1.5rem}
.lessons{list-style:none;padding:0;margin:14px 0}
.lessons li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;margin-bottom:10px;border-radius:var(--r);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s var(--ease),transform .45s var(--ease)}
.lessons li:hover{box-shadow:inset 0 0 0 1px var(--info);transform:translateX(4px)}
.lessons li a{display:flex;flex-direction:column;gap:2px;color:var(--text);text-decoration:none;flex:1}
.lessons li a strong{font:600 1.2rem/1.2 var(--font);font-stretch:var(--wide);color:var(--strong);letter-spacing:-.01em}
.lessons .state{font-weight:700;font-size:.85rem;color:var(--info);white-space:nowrap}
.lessons li.done .state{color:var(--sage)}
.mail{border-radius:var(--r-lg);margin:16px 0;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.mail header{display:flex;flex-direction:column;gap:4px;padding:16px 20px;border-bottom:1px solid var(--line)}
.mail pre{white-space:pre-wrap;word-break:break-all;padding:16px 20px;margin:0;font:400 .92rem/1.55 var(--font);color:var(--text-2)}

/* ---------- lesson player */
.player-wrap{max-width:1080px;margin:0 auto}
.ptitle{font-size:clamp(2.1rem,4.6vw,2.6rem);margin-bottom:.15em}
.psub{color:var(--text-3);margin-bottom:28px}
.player{position:relative;background:#000;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;box-shadow:0 0 0 1px var(--line),0 60px 120px -50px #000}
.player video{width:100%;height:100%;display:block}
.bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:0 26px 0 8px;border-radius:999px;border:0;background:var(--tungsten);color:var(--tungsten-ink);font:700 1.05rem var(--font);cursor:pointer;transition:transform .5s var(--ease)}
.bigplay::before{content:'';width:42px;height:42px;border-radius:50%;background:rgb(var(--on-accent-rgb) / .15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.5v9l7-4.5z' fill='%231C1206'/%3E%3C/svg%3E") center/16px no-repeat}
.bigplay[hidden]{display:none}
.bigplay:hover{transform:translate(-50%,-50%) scale(1.04)}
.overlay{position:absolute;inset:0;background:rgb(var(--bg-rgb) / .94);display:flex;align-items:center;justify-content:center;padding:28px}
.overlay[hidden]{display:none}
.ov-card{max-width:620px;width:100%}
.ov-card .eyebrow{font:600 .78rem var(--font);font-stretch:var(--wide);letter-spacing:.12em;text-transform:uppercase;color:var(--info)}
.ov-card h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:10px 0 20px}
.choice{display:block;width:100%;text-align:left;margin:0 0 10px;padding:15px 18px;border-radius:12px;border:0;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font:500 1rem/1.4 var(--font);cursor:pointer;min-height:52px;transition:transform .45s var(--ease),box-shadow .3s var(--ease)}
.choice:hover:not([disabled]){box-shadow:inset 0 0 0 1px var(--info);transform:translateX(5px)}
.choice.right{background:var(--sage-wash);box-shadow:inset 0 0 0 1px var(--sage)}
.choice.wrong{background:var(--ember-wash);box-shadow:inset 0 0 0 1px var(--ember)}
.choice[disabled]{cursor:default}
.ov-card .btn{margin-top:6px}
.feedback{margin:14px 0 6px;font-weight:700}
.feedback.ok{color:var(--sage)}.feedback.no{color:#F3A487}
.quiz{margin-top:48px;max-width:760px}
.quiz h2{font-size:2.2rem}
.quiz .q{border-top:1px solid var(--line);padding:22px 0;margin:0}
.quiz .q legend{font:600 1.05rem/1.4 var(--font);font-stretch:var(--normal);margin-bottom:8px}
.quiz .why{color:var(--text-2);margin-top:8px}
.result{font:600 2.4rem/1.1 var(--font);font-stretch:var(--wide);color:var(--strong);margin:20px 0 8px}

/* ---------- prose */
.prose{max-width:740px}
.prose h2{font-size:1.8rem;margin-top:1.6em}
.prose li{margin-bottom:.75em;color:var(--text-2)}
.prose li strong{color:var(--strong)}

/* ---------- footer */
.foot{background:#0A0908;border-top:1px solid var(--line);position:relative;z-index:2}
.foot-in{max-width:var(--max);margin:0 auto;padding:80px var(--gutter) 44px;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.5fr));gap:40px}
.foot .tag{font:500 1.05rem/1.4 var(--font);color:var(--text-2);margin:18px 0 0;max-width:32ch}
.foot h4{font-weight:700;font-size:.85rem;color:var(--text-3);margin:6px 0 16px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:10px}
.foot a{color:var(--text-2);text-decoration:none}
.foot a:hover{color:var(--strong)}
.foot .legal{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--line);font-size:.82rem;color:var(--text-3)}
.in-app .foot-in{padding:28px var(--gutter);grid-template-columns:1fr}
.in-app .foot .legal{border:0;padding:0}

/* ---------- responsive */
@media (max-width:1060px){
  .posters{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(230px,42%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}
  .posters::-webkit-scrollbar{display:none}
  .poster{scroll-snap-align:start}
  .showing{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .demo,.credits,.ms-band,.sec-head,.setup{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:40px}
  .points{grid-template-columns:1fr;gap:28px}
  .catalog{columns:1}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-in>div:first-child{grid-column:1/-1}
  .chapters-in{grid-template-columns:repeat(4,1fr)}
  .pausebtn{display:none}
}
@media (max-width:860px){
  .menu-btn{display:block}
  .top-in{flex-wrap:wrap}
  .top nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:2px;padding:6px 0 12px}
  .nav-open .top nav{display:flex}
  .nav-open.home-page .top{background:rgb(var(--bg-rgb) / .97)}
  .top nav a,.top nav .linklike{padding:14px 6px;font-size:1.05rem;text-align:left;border-radius:8px}
  .top nav a[aria-current=page]{box-shadow:none;color:var(--info)}
  .top nav a.btn{justify-content:center;margin:10px 0 0}
  .top nav form{display:block}
  .plans,.two{grid-template-columns:1fr}
  .mods,.people-pick{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .tbl{display:block;overflow-x:auto;white-space:nowrap}
  .player{aspect-ratio:auto;overflow:visible;background:transparent;box-shadow:none}
  .player video{aspect-ratio:16/9;height:auto;border-radius:16px;background:#000}
  .overlay{position:static;background:var(--panel);border-radius:16px;margin-top:12px;padding:22px}
  .fw li{grid-template-columns:1fr;gap:4px}
  .showing{grid-template-columns:1fr}
}
@media (max-width:620px){
  main{padding:36px var(--gutter) 80px}
  .screen{min-height:720px;height:100dvh;max-height:860px}
  .screen-in{padding-top:110px}
  .screen h1{font-size:clamp(2.1rem,12vw,2.6rem)}
  .screen::before{background:linear-gradient(180deg,rgb(var(--bg-rgb) / .55),rgb(var(--bg-rgb) / .35) 40%,rgb(var(--bg-rgb) / .95) 85%)}
  .subtitle{bottom:96px}
  .chapters-in{grid-template-columns:repeat(4,1fr);gap:8px;padding-bottom:18px}
  .chap{font-size:0;padding-top:10px}
  .chap b{font-size:.74rem;font-stretch:var(--normal)}
  .steps{grid-template-columns:1fr}
  .roll{height:440px}
  .foot-in{grid-template-columns:1fr}
  .form-card>.core{padding:22px}
  .posters{grid-auto-columns:72%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::after{animation:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none;filter:none}
  .roll-in{position:static}
  .roll{height:auto;-webkit-mask-image:none;mask-image:none}
  .scene video,.scene img{transform:none}
}

/* ---------- inside a lesson: the one carousel of lesson screens on the home page */
.inside{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.inside-stage{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line),0 50px 90px -40px #000}
.inside-stage .scene img{width:100%;height:100%;object-fit:cover}
.inside-tabs{display:flex;flex-direction:column}
.inside-tabs .chap{border-top:1px solid var(--line);padding:18px 0 18px;font:400 .95rem/1.5 var(--font);color:var(--text-3)}
.inside-tabs .chap:last-of-type{border-bottom:1px solid var(--line)}
.inside-tabs .chap b{font-size:1.25rem;margin-bottom:6px;color:var(--text-2)}
.inside-tabs .chap span{display:block;max-width:44ch}
.inside-tabs .chap[aria-current=true] b{color:var(--strong)}
.inside-tabs .chap[aria-current=true] span{color:var(--text-2)}
.inside-tabs .chap[aria-current=true]::before{top:-1px}
.inside-foot{display:flex;gap:20px;align-items:center;margin-top:22px}
@media (max-width:980px){
  .inside{grid-template-columns:1fr}
  .inside-tabs .pausebtn{display:inline-block}
  .inside-tabs .chap:not([aria-current=true]) span{display:none}
}
.mark rect{fill:var(--accent)}.mark path{stroke:var(--on-accent)}

/* ===== Home page (Graphite and ice, quiet type). Markets carousel, the rule, the lesson timeline, proof + ticket pricing. ===== */
.h-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.home > section:not(.h-hero):not(.h-close){padding:clamp(72px,9vw,128px) 0}
.h-hero{position:relative;min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:1fr auto;isolation:isolate;overflow:hidden}
.h-stage{position:absolute;inset:0;z-index:-2;margin:0}
.h-scene{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1200ms ease}
.h-scene.is-on{opacity:1}
.h-scene video,.h-scene img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 8s linear}
.h-scene.is-on video,.h-scene.is-on img{transform:scale(1)}
.h-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(var(--bg-rgb) / .6),rgb(var(--bg-rgb) / 0) 24%,rgb(var(--bg-rgb) / .1) 45%,rgb(var(--bg-rgb) / .95) 92%),linear-gradient(90deg,rgb(var(--bg-rgb) / .75),rgb(var(--bg-rgb) / 0) 65%)}
.h-hook{position:absolute;right:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));top:140px;max-width:26ch;text-wrap:balance;font:500 1.05rem/1.4 var(--font);color:var(--text);background:rgb(var(--bg-rgb) / .72);padding:14px 18px;border-radius:12px;border-left:3px solid var(--info);opacity:0;transform:translateY(10px);transition:opacity 700ms var(--ease) 400ms,transform 900ms var(--ease) 400ms}
.h-scene.is-on .h-hook{opacity:1;transform:none}
.h-copy{align-self:end;width:100%;max-width:var(--max);margin:0 auto;padding:140px var(--gutter) 28px}
.h-copy h1{font-size:clamp(2.1rem,3.6vw,3.2rem);line-height:1.1;max-width:20ch;margin:0}
.h-sub{margin:18px 0 0;max-width:44ch;font-size:1.125rem;color:var(--text)}
.h-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.h-ctas .ghost{background:rgb(var(--bg-rgb) / .3)}
.h-chapters{display:flex;align-items:stretch;gap:4px;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter) 28px}
.h-chapters .chap{position:relative;flex:1;min-width:0;text-align:left;background:none;border:0;padding:16px 0 4px;color:var(--text-2);font:600 .9375rem/1.2 var(--font);cursor:pointer;transition:color 200ms ease}
.h-chapters .chap::before,.h-chapters .chap::after{content:'';position:absolute;left:0;top:0;height:2px;border-radius:2px}
.h-chapters .chap::before{right:6px;background:var(--line-2)}
.h-chapters .chap::after{width:0;background:var(--info)}
.h-chapters .chap[aria-current=true]{color:var(--text)}
.h-chapters .chap[aria-current=true]::after{animation:hfill var(--dur,7s) linear forwards}
.paused .h-chapters .chap[aria-current=true]::after{animation-play-state:paused}
.h-chapters .chap:hover{color:var(--text)}
@keyframes hfill{to{width:calc(100% - 6px)}}
.h-pause{flex:none;align-self:flex-end;min-height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:rgb(var(--bg-rgb) / .4);color:var(--text);font:500 .875rem/1 var(--font);cursor:pointer}

.h-rule h2{margin:0}
.h-rule-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:36px}
.h-rule-cols p{font-size:1.0625rem;color:var(--text-2);border-top:1px solid var(--line-2);padding-top:18px;margin:0}

.h-ask{background:var(--panel)}
.h-ask h2{margin:0}
.h-lede{margin:12px 0 0;color:var(--text-2)}
.tl{margin:40px 0 0}
.tl svg{width:100%;height:auto;overflow:visible}
.tl-track{fill:var(--panel-2)}
.tl-run{fill:var(--text-3);transform-box:fill-box;transform-origin:left center}
.tl-track,.tl-run{height:4px;y:58px}
.tl-mark line{stroke:var(--text);stroke-width:1.5}
.tl-mark circle{fill:var(--panel);stroke:var(--text);stroke-width:2.5;r:7px}
.tl-decide circle{fill:var(--info);stroke:var(--info)}
.tl-decide line{stroke:var(--info)}
.tl-mark{transform-box:fill-box;transform-origin:center}
.js .tl.reveal{opacity:1;transform:none;filter:none}
.js .tl.reveal .tl-run{transform:scaleX(0);transition:transform 2400ms var(--ease-io) 300ms}
.js .tl.reveal.in .tl-run{transform:scaleX(1)}
.js .tl.reveal .tl-mark{opacity:0;transform:scale(.6);transition:opacity 300ms ease,transform 500ms var(--ease)}
.js .tl.reveal.in .tl-decide{opacity:1;transform:none;transition-delay:660ms}
.js .tl.reveal.in .tl-mark:not(.tl-decide){opacity:1;transform:none;transition-delay:2230ms}
.tl-labels{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:24px 0 0;padding:0}
.tl-l{color:var(--text-2)}
.tl-l b{display:block;font:600 1.15rem/1.2 var(--font);color:var(--text);margin-bottom:6px;font-variant-numeric:tabular-nums}
.tl-l1 b{color:var(--info)}

.h-end h2{margin:0 0 40px}
.h-end-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,6vw,88px);align-items:start}
.h-proof{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.h-proof li{display:grid;gap:6px;padding-left:22px;border-left:2px solid var(--info)}
.h-proof h3{font-size:1.1rem;margin:0}
.h-proof p{color:var(--text-2);margin:0}
.h-ticket{position:relative;background:var(--panel-2);border-radius:var(--r-lg);padding:32px;display:grid;gap:14px;justify-items:start}
.h-ticket::before,.h-ticket::after{content:'';position:absolute;top:60%;width:28px;height:28px;border-radius:50%;background:var(--black)}
.h-ticket::before{left:-14px}.h-ticket::after{right:-14px}
.h-ticket h3{font-size:1.25rem;margin:0}
.h-calc{display:grid;gap:10px;width:100%;padding-bottom:20px;border-bottom:2px dashed var(--line-2)}
.h-calc p{margin:0}
.calc-total{color:var(--text-2)}
.calc-total span{display:block;font:600 clamp(2rem,3.4vw,2.6rem)/1.05 var(--font);letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums}
.calc-l{font-weight:600}
.calc-range{display:flex;align-items:center;gap:16px}
.calc-range input{flex:1;min-width:0;height:28px;accent-color:var(--accent)}
.calc-range output{min-width:8ch;font-weight:600;font-variant-numeric:tabular-nums}
.calc-per,.h-fine{color:var(--text-2);font-size:.95rem;margin:0}
.h-fine a{color:var(--text)}
.draft{margin-top:20px;font-size:.875rem;color:var(--text-3)}

.h-close{display:grid;grid-template-columns:1.1fr 1fr;min-height:64vh;background:var(--panel)}
.h-close-film{position:relative;overflow:hidden;min-height:320px}
.h-close-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-close-copy{display:grid;align-content:center;justify-items:start;gap:16px;padding:clamp(40px,6vw,96px)}
.h-close-copy h2,.h-close-copy p{margin:0}
.h-close-copy p{color:var(--text-2);max-width:40ch}

@media (max-width:900px){
  .h-hook{left:var(--gutter);right:auto;top:110px}
  .h-chapters{overflow-x:auto;scrollbar-width:none}
  .h-chapters::-webkit-scrollbar{display:none}
  .h-chapters .chap{flex:0 0 auto;min-width:120px}
  .h-rule-cols,.h-end-grid,.h-close,.tl-labels{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.h-scene video,.h-scene img{transform:none;transition:none}.h-chapters .chap[aria-current=true]::after{animation:none;width:calc(100% - 6px)}}

/* ---- Third color: Deep ink, a background tone used on a few sections only, to give the page rhythm. */
:root{--ink:#131B2A;--ink-2:#1C2639;--ink-rgb:19 27 42}
.h-ask{background:var(--ink)}
.h-ask .tl-track{fill:var(--ink-2)}
.h-ask .tl-mark:not(.tl-decide) circle{fill:var(--ink)}
.h-ticket{background:var(--ink);box-shadow:inset 0 0 0 1px rgb(var(--info-rgb) / .1)}
.h-close{background:var(--ink)}

/* ---- Headline typeface (body text stays Hanken Grotesk). Chosen with SITE_HEADFONT; dry-run bar can preview. */
@font-face{font-family:BricolageH;src:url(/fonts/bricolage-grotesque-latin-standard-normal.woff2) format('woff2-variations');font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:Familjen;src:url(/fonts/familjen-grotesk-latin-wght-normal.woff2) format('woff2-variations');font-weight:400 700;font-display:swap}
@font-face{font-family:MonaH;src:url(/fonts/mona-sans-latin-standard-normal.woff2) format('woff2-variations');font-weight:200 900;font-stretch:75% 125%;font-display:swap}
:root{--font-head:var(--font);--head-stretch:100%;--head-weight:600;--head-track:-.02em}
[data-head=bricolage]{--font-head:BricolageH,var(--font);--head-weight:650;--head-track:-.03em}
[data-head=familjen]{--font-head:Familjen,var(--font);--head-weight:650;--head-track:-.025em}
[data-head=mona]{--font-head:MonaH,var(--font);--head-stretch:112%;--head-weight:640;--head-track:-.025em}
h1,h2,h3,.display,.h-hook{font-family:var(--font-head);font-stretch:var(--head-stretch);font-optical-sizing:auto}
h1,h2,.display{font-weight:var(--head-weight);letter-spacing:var(--head-track)}
.plan h3,.plan .price span,.h-ticket h3,.calc-total span,.tl-l b,.h-proof h3{font-family:var(--font-head);font-stretch:var(--head-stretch)}

/* ---- Information color options (Ice is current). Set with SITE_INFO; dry-run bar can preview. */
[data-info=smoky]{--info:#8FC4BC;--info-hi:#A9D3CD;--info-rgb:143 196 188}
[data-info=patina]{--info:#7FB8AE;--info-hi:#9CCAC1;--info-rgb:127 184 174}
[data-info=verdigris]{--info:#6DADA4;--info-hi:#8DC0B8;--info-rgb:109 173 164}
[data-info=burntturq]{--info:#5E9F98;--info-hi:#7DB4AE;--info-rgb:94 159 152}

/* ---- Swapped pairing (preview): Smoky turquoise for action, Burnt amber for information */
[data-accent=smokyturq]{--accent:#78B4AB;--accent-hi:#8FC4BC;--on-accent:#0A2321;--accent-rgb:120 180 171;--on-accent-rgb:10 35 33}
[data-info=amber]{--info:#C97D2B;--info-hi:#D8924A;--info-rgb:201 125 43}

/* ---- Public header: quick links + a retractable menu panel at every screen size */
.top.drop .top-in{gap:8px}
.top-quick{margin-left:auto;display:flex;align-items:center;gap:2px}
.top-quick a{color:var(--text-2);text-decoration:none;font:500 .93rem/1 var(--font);padding:10px 13px;border-radius:999px;transition:color .25s var(--ease),background .25s var(--ease)}
.top-quick a:hover{color:var(--strong);background:rgb(var(--text-rgb) / .07)}
.top-quick a[aria-current=page]{color:var(--strong)}
.top.drop .menu-btn{display:inline-flex;align-items:center;margin-left:4px;width:auto;height:42px;padding:0 44px 0 16px;border-radius:999px;color:var(--text);font:500 .93rem/1 var(--font)}
.top.drop .menu-btn .bar{left:auto;right:16px;width:16px}
.top.drop .menu-btn .bar:nth-last-child(2){top:17px}.top.drop .menu-btn .bar:last-child{top:24px}
.top.drop nav{position:absolute;left:0;right:0;top:100%;margin:0;display:block;padding:0;background:var(--black);box-shadow:0 24px 48px -24px rgb(0 0 0 / .6);border-bottom:1px solid var(--line);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .45s var(--ease),visibility 0s linear .45s}
.nav-open .top.drop nav{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .45s var(--ease)}
.drop-in{max-width:var(--max);margin:0 auto;padding:18px var(--gutter) 28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 24px}
.top.drop nav .drop-in a{display:block;padding:14px 0;border-bottom:1px solid var(--line);border-radius:0;font:600 1.25rem/1.2 var(--font-head);color:var(--text);background:none;box-shadow:none;opacity:0;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .45s var(--ease),color .2s ease}
.nav-open .top.drop nav .drop-in a{opacity:1;transform:none}
.nav-open .top.drop nav .drop-in a:nth-child(2){transition-delay:30ms}.nav-open .top.drop nav .drop-in a:nth-child(3){transition-delay:60ms}.nav-open .top.drop nav .drop-in a:nth-child(4){transition-delay:90ms}.nav-open .top.drop nav .drop-in a:nth-child(5){transition-delay:120ms}.nav-open .top.drop nav .drop-in a:nth-child(6){transition-delay:150ms}
.top.drop nav .drop-in a:hover{color:var(--info);background:none}
.top.drop nav .drop-in a[aria-current=page]{color:var(--info);box-shadow:none}
.nav-open .top.drop{background:rgb(var(--bg-rgb) / .98)}
@media (max-width:860px){
  .top.drop nav{display:block;width:auto;padding:0}
  .drop-in{grid-template-columns:1fr;padding-top:8px}
  .top.drop nav .drop-in a{font-size:1.15rem}
}
@media (max-width:480px){.top-quick .q-pricing{display:none}.top.drop .menu-btn .menu-word{display:none}.top.drop .menu-btn{width:44px;padding:0}.top.drop .menu-btn .bar{right:14px}}
@media (prefers-reduced-motion:reduce){.top.drop nav,.top.drop nav .drop-in a{transition:none}}

/* ---- Three colors, three jobs: Smoky turquoise = action (--accent), Ice = information (--info), Burnt amber = the moment of the ask (--moment). */
:root{--moment:#C97D2B;--moment-rgb:201 125 43}
.h-hook{border-left-color:var(--moment)}
.tl-decide circle{fill:var(--moment);stroke:var(--moment)}
.tl-decide line{stroke:var(--moment)}
.tl-l1 b{color:var(--moment)}
.ov-card .eyebrow{color:var(--moment)}
.h-rule .lit{color:var(--moment)}

/* ---- dry-run bar: style links live in a small dropdown so the bar stays one line */
.envbar{white-space:nowrap}
.envstyle{display:inline-block;position:relative}
.envstyle summary{display:inline;cursor:pointer;text-decoration:underline;text-underline-offset:3px;list-style:none}
.envstyle summary::-webkit-details-marker{display:none}
.envstyle-in{position:absolute;right:50%;transform:translateX(50%);top:calc(100% + 10px);z-index:40;width:min(560px,calc(100vw - 32px));white-space:normal;text-align:left;background:#1B1F26;border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;box-shadow:0 16px 40px -12px rgb(0 0 0 / .6)}
.envstyle-in p{margin:0 0 8px;line-height:1.9}.envstyle-in p:last-child{margin:0}
.envstyle-in b{display:block;color:var(--strong);font-weight:600}
.envstyle-in a{margin-right:6px}
@media (max-width:600px){.envbar{font-size:.72rem;padding:9px 10px}.envbar .env-long{display:none}}
/* dev style-preview panel: pin to the viewport so it can never widen the page on phones */
.envstyle-in{position:fixed;right:auto;left:50%;transform:translateX(-50%);top:34px}
.envstyle:not([open]) .envstyle-in{display:none}
/* the progress-bar .bar rule (line ~328) must not reach the menu icon's lines */
.menu-btn .bar{width:auto;display:block;margin:0;vertical-align:baseline}
.top.drop .menu-btn .bar{width:16px}

/* ---- library: department kits */
.kits{margin:8px 0 72px}
.kits h2,.kits-all{margin:0;font:600 1.375rem/1.25 var(--font-head)}
.kits-lede{margin:10px 0 0;color:var(--text-2);max-width:60ch}
.kit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 40px;margin-top:28px}
.kit{border-top:1px solid var(--line-2);padding:22px 0 28px;scroll-margin-top:96px}
.kit:target{border-top-color:var(--info)}
.kit h3{margin:0;font:600 1.0625rem/1.3 var(--font-head)}
.kit-who{margin:4px 0 0;color:var(--text-3);font-size:.9375rem}
.kit-hook{margin:14px 0 0;color:var(--text)}
.kit ol{margin:14px 0 0;padding-left:1.3em;color:var(--text-2);font-size:.9375rem;line-height:1.75}
.kits-all{margin-bottom:28px}

/* ---- Assign: department kit buttons */
.kitpick .kit-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.kit-btn{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:none;color:var(--text);font:500 .9375rem/1 var(--font);cursor:pointer;transition:border-color 200ms ease,background-color 200ms ease}
.kit-btn:hover{border-color:var(--text-3)}
.kit-btn[aria-pressed=true]{border-color:var(--accent);background:rgb(var(--text-rgb) / .06)}
.kit-btn:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.kitpick [data-kit-note]{margin-top:12px}

/* =====================================================================================
   21 Oct round 2: tighter rhythm, hook line out of the footage, department switcher,
   "Try the pause", setup steps. Replaces the boxed caption and the closing film.
   ===================================================================================== */
.home > section:not(.h-hero):not(.h-close){padding:clamp(56px,6.5vw,88px) 0}
.home > section.h-rule:not(.h-hero):not(.h-close){padding-bottom:clamp(36px,4vw,56px)}
.home > section.h-depts:not(.h-hero):not(.h-close){padding-top:clamp(36px,4vw,56px)}

/* hero: the market's hook sits above the headline, on the darkened side, no box */
.h-scene .h-hook{display:none}
.h-hooks{display:grid;margin:0 0 18px;min-height:3.2em;max-width:34ch}
.h-hook-line{grid-area:1/1;align-self:end;font:500 clamp(1.05rem,1.4vw,1.2rem)/1.4 var(--font-head);color:var(--text);text-shadow:0 1px 18px rgb(var(--bg-rgb) / .9);opacity:0;transform:translateY(6px);transition:opacity 600ms var(--ease),transform 800ms var(--ease)}
.h-hook-line.is-on{opacity:1;transform:none;transition-delay:250ms}
.h-hook-mkt{display:block;margin-bottom:4px;font:600 .8125rem/1.2 var(--font);letter-spacing:.02em;color:var(--moment)}
@media (prefers-reduced-motion:reduce){.h-hook-line{transition:none;transform:none}}

/* =====================================================================================
   Below the hero (round 6). Open layouts, no enclosures: hairlines, measured type, one accent.
   Every section: a heading block, then its object. Rhythm comes from alternating widths
   (split / full-bleed line / rail+programme / split / centred close), not from boxes or bands.
   ===================================================================================== */
.home > section.hs:not(.h-hero):not(.h-close){padding:clamp(56px,6.5vw,96px) 0}
.hs + .hs{border-top:1px solid rgb(var(--text-rgb) / .08)}
.sg-head{max-width:62ch}
.sg-head h2{margin:0;text-wrap:balance}
.sg-head p{margin:14px 0 0;font-size:1.125rem;line-height:1.6;color:var(--text-2);text-wrap:pretty}
.hs-after{margin:28px 0 0;max-width:52ch;font-size:1.0625rem;color:var(--text-2)}
.btn.sm{--h:42px;padding:0 6px 0 18px;font-size:.9375rem;gap:10px}
.btn.sm .ico{width:30px;height:30px}
.btn .ico{display:grid;place-items:center}
.btn.ghost .ico{background:rgb(var(--text-rgb) / .1)}

/* facts: heading left, three sourced figures right. Quiet numerals; the source is part of the claim. */
.hs-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.facts{list-style:none;margin:0;padding:0}
.facts li{display:grid;gap:4px;padding:20px 0;border-top:1px solid rgb(var(--text-rgb) / .1)}
.facts li:first-child{padding-top:4px;border-top:0}
.facts b{font:600 clamp(1.5rem,2.2vw,1.9rem)/1.15 var(--font-head);letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums}
.facts span{color:var(--text-2);line-height:1.55;max-width:46ch}
.facts a{margin-top:2px;font-size:.8125rem;color:var(--text-3);text-decoration:none;border-bottom:1px solid rgb(var(--text-rgb) / .18);width:max-content;transition:color 160ms var(--ease),border-color 160ms var(--ease)}
.facts a:hover{color:var(--text);border-color:var(--text-3)}

/* the pause: one line across the page, four stops. A light travels; where it stops, the ask is lit. */
.pz{margin-top:44px}
.pz-line{position:relative;height:2px;border-radius:2px;background:rgb(var(--text-rgb) / .1)}
.pz-run{position:absolute;left:0;top:0;bottom:0;width:var(--x,0%);border-radius:2px;background:rgb(var(--text-rgb) / .45);transition:width var(--ms,0ms) linear}
.pz-light{position:absolute;top:50%;left:var(--x,0%);width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgb(var(--text-rgb) / .5);transition:left var(--ms,0ms) linear,background-color 240ms var(--ease),box-shadow 240ms var(--ease),transform 240ms var(--ease)}
.pz.at-ask .pz-light{background:var(--moment);box-shadow:0 0 20px 6px rgb(var(--moment-rgb) / .5);transform:scale(1.3)}
.pz-stop{position:absolute;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;border:2px solid rgb(var(--text-rgb) / .35);background:var(--black);transition:border-color 240ms var(--ease),background-color 240ms var(--ease)}
.pz-stop:nth-child(3){left:12.5%}.pz-stop:nth-child(4){left:37.5%}.pz-stop:nth-child(5){left:62.5%}.pz-stop:nth-child(6){left:87.5%}
.pz-stop.is-on{border-color:var(--moment);background:var(--moment)}
.pz-asks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;margin:22px 0 0;padding:0}
.pz-asks li{display:grid;gap:4px;color:var(--text-3);transition:color 260ms var(--ease)}
.pz-asks b{font:600 1.25rem/1.25 var(--font-head);color:var(--text-3);transition:color 260ms var(--ease)}
.pz-asks span{font-size:.9375rem;line-height:1.5}
.pz-asks li.is-on{color:var(--text-2)}
.pz-asks li.is-on b{color:var(--text)}

/* departments: a rail of names, a hairline, the programme */
.dp{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,4vw,56px);margin-top:40px}
.dp-tabs{display:flex;flex-direction:column;gap:2px;border-right:1px solid rgb(var(--text-rgb) / .1);padding-right:clamp(14px,2vw,28px)}
.dp-tab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;padding:11px 12px;border:0;border-radius:10px;background:none;color:var(--text-3);font:600 .9688rem/1.3 var(--font-head);text-align:left;cursor:pointer;transition:color 160ms var(--ease),background-color 160ms var(--ease),transform 160ms var(--ease)}
.dp-tab:active{transform:scale(.98)}
.dp-tab[aria-selected=true]{color:var(--text);background:rgb(var(--text-rgb) / .07)}
.dp-tab-n{font:500 .75rem/1 var(--font);font-variant-numeric:tabular-nums;color:var(--text-3)}
.dp-tab[aria-selected=true] .dp-tab-n{color:var(--info)}
.dp-tab:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.dp-panel{outline:0}
.dp-panel[hidden]{display:none}
.js .dp-panel:not([hidden]){animation:sgin 240ms var(--ease)}
@keyframes sgin{from{opacity:0;transform:translateY(6px)}}
.dp-who{margin:0;font-size:.9375rem;color:var(--text-3)}
.dp-hook{margin:8px 0 0;max-width:22ch;font:600 clamp(1.5rem,2.4vw,2.1rem)/1.2 var(--font-head);letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.dp-sum{margin:14px 0 0;font-size:.9375rem;color:var(--text-3);font-variant-numeric:tabular-nums}
.dp-index{list-style:none;margin:22px 0 24px;padding:0;columns:2;column-gap:clamp(24px,4vw,56px);counter-reset:dpi}
.dp-index li{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid rgb(var(--text-rgb) / .08);break-inside:avoid;counter-increment:dpi;color:var(--text)}
.dp-index li::before{content:counter(dpi,decimal-leading-zero);flex:none;width:2ch;font:500 .75rem/1 var(--font);color:var(--text-3);font-variant-numeric:tabular-nums}
.dp-t{flex:1;font-size:.9688rem}
.dp-d{flex:none;font:500 .75rem/1 var(--font);color:var(--text-3);font-variant-numeric:tabular-nums}

/* live before lunch: steps, a hairline, the price */
.lv{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);margin-top:40px}
.lv-steps{list-style:none;margin:0;padding:0;counter-reset:lv}
.lv-steps li{position:relative;padding:18px 0 18px 44px;color:var(--text-2);line-height:1.6;counter-increment:lv}
.lv-steps li + li{border-top:1px solid rgb(var(--text-rgb) / .08)}
.lv-steps li:first-child{padding-top:0}.lv-steps li:last-child{padding-bottom:0}
.lv-steps li::before{content:counter(lv);position:absolute;left:0;top:18px;font:600 1.25rem/1.25 var(--font-head);color:var(--info);font-variant-numeric:tabular-nums}
.lv-steps li:first-child::before{top:0}
.lv-steps b{display:block;margin-bottom:4px;font:600 1.0625rem/1.35 var(--font-head);color:var(--text)}
.lv-price{display:grid;gap:12px;justify-items:start;align-content:start;padding-left:clamp(24px,4vw,56px);border-left:1px solid rgb(var(--text-rgb) / .1)}
.lv-plan{margin:0;font:600 .8125rem/1.3 var(--font);color:var(--text-3)}
.lv-price .h-fine{margin:0}
.lv-price .calc-total{margin-top:0}

/* close: the line that opened the page, centred, with the two actions */
.hs-close .h-in{text-align:center;display:grid;justify-items:center}
.hs-close h2{margin:0;font-size:clamp(1.9rem,3.6vw,2.9rem);text-wrap:balance}
.hs-close p{margin:14px 0 0;font-size:1.125rem;color:var(--text-2)}
.hs-close .h-ctas{justify-content:center}

@media (hover:hover) and (pointer:fine){.dp-tab:hover{color:var(--text);background:rgb(var(--text-rgb) / .05)}}
@media (max-width:860px){
  .hs-split{grid-template-columns:1fr;gap:28px}
  .pz-line{display:none}
  .pz{margin-top:28px}
  .pz-asks{grid-template-columns:1fr;gap:0;margin:0}
  .pz-asks li{grid-template-columns:22px minmax(0,1fr);column-gap:10px;padding:12px 0;border-top:1px solid rgb(var(--text-rgb) / .08)}
  .pz-asks li::before{content:'';grid-row:span 2;align-self:start;margin-top:.45em;width:10px;height:10px;border-radius:50%;border:2px solid rgb(var(--text-rgb) / .35);transition:border-color 240ms var(--ease),background-color 240ms var(--ease),box-shadow 240ms var(--ease)}
  .pz-asks li.is-on::before{border-color:var(--moment);background:var(--moment);box-shadow:0 0 14px 3px rgb(var(--moment-rgb) / .45)}
  .pz-asks b{font-size:1.0625rem}
  .dp{grid-template-columns:1fr;gap:20px;margin-top:28px}
  .dp-tabs{flex-direction:row;overflow-x:auto;gap:6px;border-right:0;padding:0 var(--gutter) 10px;margin:0 calc(var(--gutter) * -1);border-bottom:1px solid rgb(var(--text-rgb) / .08);scrollbar-width:none}
  .dp-tabs::-webkit-scrollbar{display:none}
  .dp-tab{flex:none;width:auto;padding:9px 14px;border-radius:999px;font-size:.9rem;box-shadow:inset 0 0 0 1px rgb(var(--text-rgb) / .14)}
  .dp-tab[aria-selected=true]{box-shadow:inset 0 0 0 1px var(--info);background:rgb(var(--info-rgb) / .08)}
  .dp-tab-n{display:none}
  .dp-index{columns:1}
  .lv{grid-template-columns:1fr;gap:28px;margin-top:28px}
  .lv-price{padding-left:0;border-left:0;padding-top:24px;border-top:1px solid rgb(var(--text-rgb) / .1)}
}
@media (prefers-reduced-motion:reduce){
  .dp-panel{animation:none!important}
  .pz-run,.pz-light{transition:none}
}

/* ---- section imagery (round 7): one graded photograph per section, three placements.
   tall: beside the copy · strip: a wide band between heading and object · bg: behind a section, scrimmed. */
.mood{margin:0}
.mood-img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.mood-tall{aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--panel)}
.mood-strip{aspect-ratio:21/6;margin-top:36px;border-radius:18px;overflow:hidden;background:var(--panel)}
.mood-strip + .dp,.mood-strip + .lv{margin-top:36px}
.hs-split-img{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.hs-bg{position:relative;isolation:isolate;overflow:hidden}
.hs-bg .mood-bg{position:absolute;inset:0;z-index:-2}
.hs-bg .mood-bg .mood-img{filter:saturate(.8)}
.hs-bg::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(var(--bg-rgb) / .92),rgb(var(--bg-rgb) / .78) 40%,rgb(var(--bg-rgb) / .9))}
.hs-pause::before{background:linear-gradient(90deg,rgb(var(--bg-rgb) / .96) 0%,rgb(var(--bg-rgb) / .86) 55%,rgb(var(--bg-rgb) / .7))}
.hs-close::before{background:linear-gradient(180deg,rgb(var(--bg-rgb) / .86),rgb(var(--bg-rgb) / .72) 50%,rgb(var(--bg-rgb) / .9))}
.hs-close{padding-top:clamp(80px,9vw,128px)!important;padding-bottom:clamp(80px,9vw,128px)!important}
.hs-pause .pz-stop{background:var(--black)}
/* with an image behind, the open layout still needs its hairline */
.hs-bg + .hs,.hs + .hs-bg{border-top:1px solid rgb(var(--text-rgb) / .08)}
@media (max-width:860px){
  .hs-split-img{grid-template-columns:1fr}
  .mood-tall{aspect-ratio:16/10;order:-1}
  .mood-strip{aspect-ratio:16/9;margin-top:24px}
}
@media (prefers-reduced-motion:no-preference){
  .js .mood-tall .mood-img,.js .mood-strip .mood-img{transform:scale(1.04);transition:transform 1600ms var(--ease)}
  .js .mood.reveal.in .mood-img{transform:none}
}

/* ---- round 9: air and scale. Larger type steps (≥1.25 between levels), generous section rhythm,
   photographs that bleed to the edges instead of sitting in boxes, no hairlines between sections. */
.home > section.hs:not(.h-hero):not(.h-close){padding:clamp(96px,10vw,152px) 0}
.hs + .hs,.hs-bg + .hs,.hs + .hs-bg{border-top:0}
.hs h2{font-size:clamp(2.25rem,1.3rem + 3vw,3.5rem);line-height:1.04;letter-spacing:-.025em;margin:0}
.sg-head{max-width:30ch}
.sg-head p{margin:22px 0 0;max-width:52ch;font-size:clamp(1.125rem,1rem + .45vw,1.3125rem);line-height:1.55}
.hs-after{margin:48px 0 0;font-size:1.125rem;max-width:48ch}
/* facts */
.hs-split-img{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,7vw,120px)}
.mood-tall{border-radius:24px;aspect-ratio:4/5}
.facts{margin-top:48px}
.facts li{gap:8px;padding:28px 0;border-top:1px solid rgb(var(--text-rgb) / .12)}
.facts li:first-child{padding-top:0;border-top:0}
.facts b{font-size:clamp(1.9rem,1.4rem + 1.4vw,2.5rem);letter-spacing:-.02em}
.facts span{font-size:1.0625rem;max-width:44ch}
.facts a{font-size:.9375rem;margin-top:4px}
/* the pause */
.pz{margin-top:72px}
.pz-asks{gap:32px;margin-top:30px}
.pz-asks b{font-size:1.375rem}
.pz-asks span{font-size:1rem;line-height:1.5}
/* full-bleed photographs: no frame, fades into the page above and below */
.mood-strip{position:relative;aspect-ratio:21/7;margin:clamp(56px,7vw,96px) 0 0;width:100%;border-radius:0;background:none}
.mood-strip::before,.mood-strip::after{content:'';position:absolute;left:0;right:0;height:22%;z-index:1;pointer-events:none}
.mood-strip::before{top:0;background:linear-gradient(180deg,var(--black),transparent)}
.mood-strip::after{bottom:0;background:linear-gradient(0deg,var(--black),transparent)}
.mood-strip + .h-in{margin-top:clamp(56px,7vw,96px)}
/* departments */
.dp{grid-template-columns:280px minmax(0,1fr);gap:clamp(40px,6vw,96px)}
.dp-tabs{gap:4px;padding-right:clamp(20px,3vw,40px)}
.dp-tab{padding:14px 16px;font-size:1.0625rem;border-radius:12px}
.dp-tab-n{font-size:.875rem}
.dp-who{font-size:1rem}
.dp-hook{margin:12px 0 0;font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);letter-spacing:-.02em;max-width:20ch}
.dp-sum{margin:20px 0 0;font-size:1rem}
.dp-index{margin:32px 0 32px}
.dp-index li{padding:13px 0;gap:14px}
.dp-index li::before{font-size:.875rem}
.dp-t{font-size:1.0625rem}
.dp-d{font-size:.875rem}
/* live before lunch */
.lv{gap:clamp(40px,6vw,112px)}
.lv-steps li{padding:26px 0 26px 56px;font-size:1.0625rem}
.lv-steps li::before{top:26px;font-size:1.5rem}
.lv-steps li:first-child::before{top:0}
.lv-steps b{font-size:1.25rem;margin-bottom:6px}
.lv-price{gap:16px;padding-left:clamp(32px,5vw,72px)}
.lv-plan{font-size:.9375rem}
/* close */
.hs-close h2{font-size:clamp(2.4rem,1.4rem + 3.6vw,4rem);line-height:1.02}
.hs-close p{margin:22px 0 0;font-size:clamp(1.125rem,1rem + .45vw,1.3125rem)}
.hs-close .h-ctas{margin-top:36px}
.hs-close{padding-top:clamp(120px,14vw,200px)!important;padding-bottom:clamp(120px,14vw,200px)!important}
@media (max-width:860px){
  .home > section.hs:not(.h-hero):not(.h-close){padding:72px 0}
  .hs-split-img{gap:36px}
  .mood-tall{aspect-ratio:16/10;border-radius:18px}
  .mood-strip{aspect-ratio:16/9;margin-top:40px}
  .mood-strip + .h-in{margin-top:40px}
  .facts{margin-top:32px}
  .facts li{padding:20px 0}
  .pz{margin-top:36px}
  .dp{gap:28px}
  .dp-tab{padding:10px 16px;font-size:.9688rem}
  .dp-index{margin:24px 0}
  .lv-steps li{padding:20px 0 20px 44px}
  .lv-steps li::before{top:20px;font-size:1.25rem}
  .hs-close{padding-top:88px!important;padding-bottom:88px!important}
}
.hs-depts,.hs-live{overflow-x:clip}
.sg-head{max-width:64ch}
.hs h2{max-width:18ch}
.hs-facts h2{font-size:clamp(2rem,1.2rem + 2.4vw,3rem);max-width:14ch}
.hs-split-img{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
@media (max-width:860px){.pz-asks{gap:0;margin:0}.pz-asks b{font-size:1.125rem}}
@media (max-width:860px){.hs-split-img{grid-template-columns:1fr}}
@media (max-width:860px){.dp{grid-template-columns:1fr}.dp-tabs{padding:0 var(--gutter) 10px}.dp-tab{border-radius:999px}}
/* round 10: generated photographs. The pause image carries the moment itself, so the scrim lets it through. */
.hs-pause::before{background:linear-gradient(90deg,rgb(var(--bg-rgb) / .94) 0%,rgb(var(--bg-rgb) / .8) 42%,rgb(var(--bg-rgb) / .45) 100%),linear-gradient(180deg,rgb(var(--bg-rgb) / .7),transparent 30%,transparent 70%,rgb(var(--bg-rgb) / .8))}
.hs-pause .mood-bg .mood-img{object-position:50% 45%;transform:scale(1.3) translateX(14%);transform-origin:50% 50%}
.hs-close::before{background:linear-gradient(180deg,rgb(var(--bg-rgb) / .9),rgb(var(--bg-rgb) / .74) 50%,rgb(var(--bg-rgb) / .92))}
@media (max-width:860px){.hs-pause .mood-bg .mood-img{transform:scale(1.15) translateX(22%);object-position:50% 40%}}

/* round 13: logo reverted to the approved tile; Wil is sourcing a new mark elsewhere */
.mark{width:26px;height:26px;flex:none}
.foot .tag{margin-top:0}
/* round 11: product-in-use photographs */
.hs-pause .mood-bg .mood-img{transform:none;object-position:72% 45%}
.hs-pause::before{background:linear-gradient(90deg,rgb(var(--bg-rgb) / .94) 0%,rgb(var(--bg-rgb) / .82) 40%,rgb(var(--bg-rgb) / .3) 100%),linear-gradient(180deg,rgb(var(--bg-rgb) / .6),transparent 30%,transparent 70%,rgb(var(--bg-rgb) / .8))}
.mood-strip{aspect-ratio:21/9}
.hs-depts .mood-strip .mood-img{object-position:50% 30%}
.hs-live .mood-strip .mood-img{object-position:50% 55%}
.hs-close .mood-bg .mood-img{object-position:60% 50%}
.hs-close::before{background:linear-gradient(180deg,rgb(var(--bg-rgb) / .88),rgb(var(--bg-rgb) / .7) 50%,rgb(var(--bg-rgb) / .92))}
@media (max-width:860px){.hs-pause .mood-bg .mood-img{transform:none;object-position:78% 40%}.mood-strip{aspect-ratio:16/10}}

/* round 12: the first photograph dissolves into the page like the others; no dev bar */
.mood-tall{border-radius:0;background:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.hs-facts .mood-tall .mood-img{object-position:60% 50%}
@media (max-width:860px){.mood-tall{border-radius:0}}

/* =====================================================================================
   Round 13: drawn graphics instead of photographs. Each section carries its own evidence or
   mechanism, in its own colour: ice chart · ink band with the amber light · turquoise nodes and
   amber arrows · a warm morning line · ink close. Tighter rhythm between sections.
   ===================================================================================== */
.home > section.hs:not(.h-hero):not(.h-close){padding:clamp(64px,7vw,112px) 0}
.hs-ink{background:var(--ink)}
.hs-ink + .hs,.hs + .hs-ink{border-top:0}
.hs-pause{position:relative;isolation:isolate;overflow:hidden}
.hs-pause::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 78% 50%,rgb(var(--moment-rgb) / .14),transparent 70%)}
.hs-close{position:relative;isolation:isolate;overflow:hidden}
.hs-close::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 70% at 50% 100%,rgb(var(--moment-rgb) / .16),transparent 70%),radial-gradient(60% 60% at 50% 0%,rgb(var(--info-rgb) / .08),transparent 70%)}
.hs-close{padding-top:clamp(96px,11vw,160px)!important;padding-bottom:clamp(96px,11vw,160px)!important}
.gfx{margin:0}
.gfx svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font)}
.gfx figcaption{margin:14px 0 0;font-size:.9375rem;color:var(--text-3)}
.gfx figcaption a{color:var(--text-3);text-decoration:none;border-bottom:1px solid rgb(var(--text-rgb) / .18)}
.gfx figcaption a:hover{color:var(--text)}
/* chart */
.gfx-chart{align-self:center}
.lc-grid{stroke:rgb(var(--text-rgb) / .1);stroke-width:1}
.lc-ax{fill:var(--text-3);font-size:13px}
.lc-yr{fill:var(--text-2);font-size:14px}
.lc-val{fill:var(--text-3);font-size:13px;font-variant-numeric:tabular-nums}
.lc-val.is-last{fill:var(--moment);font-weight:600;font-size:15px}
.lc-bar{fill:rgb(var(--info-rgb) / .55)}
.lc-bar.is-last{fill:var(--moment)}
.js .gfx-chart .lc-bar{transform-origin:50% 100%;transform:scaleY(0);transition:transform 900ms var(--ease)}
.js .gfx-chart.in .lc-bar{transform:none}
.js .gfx-chart .lc-bar:nth-child(odd){transition-delay:60ms}
/* departments diagram */
.gfx-aim{margin:clamp(40px,5vw,64px) 0 0}
.ad-line{stroke:rgb(var(--text-rgb) / .14);stroke-width:1}
.ad-arrow{stroke:var(--moment);stroke-width:1.5;stroke-dasharray:3 5}
.ad-hit{fill:var(--moment)}
.ad-ask{fill:var(--text-2);font-size:15px}
.ad-node{fill:rgb(var(--accent-rgb) / .14);stroke:rgb(var(--accent-rgb) / .55);stroke-width:1}
.ad-name{fill:var(--text);font-size:15px;font-weight:600}
.ad-list{display:none}
.gfx-aim + .dp{margin-top:clamp(40px,5vw,64px)}
/* morning line */
.gfx-morning{margin:clamp(40px,5vw,64px) 0 0}
.ml-base{stroke:rgb(var(--text-rgb) / .14);stroke-width:2;stroke-linecap:round}
.ml-done{stroke:var(--moment);stroke-width:2;stroke-linecap:round;opacity:.9}
.ml-tick{stroke:rgb(var(--text-rgb) / .3);stroke-width:1}
.ml-hour{fill:var(--text-3);font-size:13px;font-variant-numeric:tabular-nums}
.ml-dot{fill:var(--black);stroke:var(--moment);stroke-width:2.5}
.ml-t{fill:var(--moment);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.ml-l{fill:var(--text);font-size:15px;font-weight:600}
.ml-list{display:none}
.gfx-morning + .lv{margin-top:clamp(40px,5vw,64px)}
/* the split: chart beside the figures */
.hs-split-img{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
@media (max-width:860px){
  .home > section.hs:not(.h-hero):not(.h-close){padding:64px 0}
  .ad-wide,.ml-wide{display:none}
  .ad-list,.ml-list{display:grid;gap:0;list-style:none;margin:0;padding:0}
  .ad-list li,.ml-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:12px 0;border-top:1px solid rgb(var(--text-rgb) / .1)}
  .ad-list li:first-child,.ml-list li:first-child{border-top:0}
  .ad-list b{font:600 1rem/1.3 var(--font-head);color:var(--text)}
  .ad-list span{font-size:.9375rem;color:var(--moment)}
  .ml-list li{grid-template-columns:4.5ch minmax(0,1fr)}
  .ml-list b{font:600 .9375rem/1.4 var(--font);color:var(--moment);font-variant-numeric:tabular-nums}
  .ml-list span{display:grid;color:var(--text);font-weight:600}
  .ml-list small{font-weight:400;font-size:.9375rem;color:var(--text-3)}
  .gfx-aim,.gfx-morning{margin-top:28px}
  .gfx-aim + .dp,.gfx-morning + .lv{margin-top:28px}
  .hs-close{padding-top:80px!important;padding-bottom:80px!important}
  .lc-ax,.lc-val{font-size:15px}.lc-yr{font-size:16px}
}
@media (max-width:860px){.hs-split-img{grid-template-columns:1fr}.gfx-chart{order:-1}}

/* ---- round 14: curve instead of bars · the lesson strip · the roster board. Copy made plainer. */
.lc-base{stroke:rgb(var(--text-rgb) / .14);stroke-width:1}
.lc-curve{fill:none;stroke:var(--moment);stroke-width:2.5;stroke-linecap:round}
.lc-pt{fill:var(--black);stroke:var(--moment);stroke-width:2}
.lc-pt.is-last{fill:var(--moment)}
.lc-end{fill:var(--text-2);font-size:15px;font-variant-numeric:tabular-nums}
.lc-end.is-last{fill:var(--text);font-size:26px;font-weight:600;letter-spacing:-.01em;font-family:var(--font-head);paint-order:stroke;stroke:var(--black);stroke-width:6px;stroke-linejoin:round}
.lc-sub{fill:var(--moment);font-size:14px;font-weight:600;paint-order:stroke;stroke:var(--black);stroke-width:5px;stroke-linejoin:round}
.js .gfx-chart .lc-curve{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1600ms var(--ease)}
.js .gfx-chart .lc-area{opacity:0;transition:opacity 900ms var(--ease) 700ms}
.js .gfx-chart.in .lc-curve{stroke-dashoffset:0}
.js .gfx-chart.in .lc-area{opacity:1}
.js .gfx-chart .lc-bar{transform:none}
/* the lesson strip */
.gfx-lesson{margin:clamp(40px,5vw,64px) 0 0}
.ls-track{position:relative;display:flex;align-items:center;gap:10px;height:44px;margin:0 0 28px}
.ls-seg{display:block;height:6px;border-radius:3px}
.ls-seg-watch{flex:0 0 68%;background:linear-gradient(90deg,rgb(var(--info-rgb) / .35),rgb(var(--info-rgb) / .85))}
.ls-seg-after{flex:1;background:rgb(var(--text-rgb) / .14)}
.ls-stop{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--moment);color:var(--black);box-shadow:0 0 0 8px rgb(var(--moment-rgb) / .18),0 0 36px rgb(var(--moment-rgb) / .35)}
.ls-stop svg{fill:currentColor}
.ls-time{position:absolute;top:100%;margin-top:8px;font:500 .8125rem/1 var(--font);color:var(--text-3);font-variant-numeric:tabular-nums}
.ls-time-0{left:0}.ls-time-1{left:calc(68% + 10px + 22px);transform:translateX(-50%);color:var(--moment);font-weight:600}.ls-time-2{right:0}
.ls-phases{display:grid;gap:32px;list-style:none;margin:40px 0 0;padding:0}
.ls-phases li{display:grid;gap:6px;color:var(--text-2);line-height:1.5;max-width:40ch}
.ls-phases b{font:600 1.1875rem/1.25 var(--font-head);color:var(--text)}
.ls-phases li.ls-ph-stop b{color:var(--moment)}
.ls-phases{grid-template-columns:repeat(3,minmax(0,1fr))}
.hs-after .lit{color:var(--moment);font-weight:600}
/* the roster board */
.gfx-roster{margin:clamp(40px,5vw,64px) 0 0}
.rb-done circle{fill:rgb(var(--accent-rgb) / .22);stroke:var(--accent);stroke-width:1.5}
.rb-done path{stroke:var(--accent-hi)}
.rb-wait circle:first-child{fill:none;stroke:var(--moment);stroke-width:1.5;stroke-dasharray:3 3}
.rb-wait circle:not(:first-child){fill:var(--moment)}
.rb-h{fill:var(--text);font-size:19px;font-weight:600;font-family:var(--font-head)}
.rb-s{fill:var(--text-2);font-size:14px}
.rb-k{fill:var(--text-3);font-size:13px}
.rb-list{display:none}
.gfx-roster + .lv{margin-top:clamp(40px,5vw,64px)}
.js .gfx-roster .rb-done{opacity:0;transition:opacity 300ms var(--ease)}
.js .gfx-roster.in .rb-done{opacity:1}
@media (max-width:860px){
  .gfx-lesson,.gfx-roster{margin-top:28px}
  .ls-phases{grid-template-columns:1fr;gap:18px;margin-top:36px}
  .ls-stop{width:36px;height:36px}
  .ls-time-1{left:calc(68% + 10px + 18px)}
  .rb-wide{display:none}
  .rb-list{display:block;margin:0;padding:16px 0 0;border-top:1px solid rgb(var(--text-rgb) / .1);color:var(--text-2);font-size:1rem}
  .rb-list b{color:var(--text)}
  .gfx-roster + .lv{margin-top:28px}
}

/* ===== Admin console v2: dashboard, campaigns, connectors, logs, settings ===== */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0 8px}
.kpis.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpis>div{padding:22px 24px;border-radius:var(--r-lg);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.kpis .k{display:block;font-weight:600;font-size:.9rem;color:var(--text-3)}
.kpis .v{display:block;font:600 2.6rem/1.05 var(--font-head);letter-spacing:-.02em;margin:10px 0 4px;color:var(--strong);font-variant-numeric:tabular-nums}
.kpis .v.bad{color:var(--ember)}
.kpis .d{display:block;color:var(--text-3);font-size:.9rem}
.two.wide-gap{gap:40px}
.tbl td.bad{color:var(--ember)}
.tbl td.acts{white-space:nowrap}.tbl td.acts a,.tbl td.acts form{margin-right:12px}
.st{display:inline-block;font:600 .74rem/1 var(--font);padding:5px 9px;border-radius:999px;background:rgb(var(--text-rgb) / .08);color:var(--text-2);vertical-align:middle}
.st.complete{background:var(--sage-wash);color:#9FD8B4}.st.overdue{background:var(--ember-wash);color:#F3A487}.st.in-progress{background:rgba(169,214,255,.12);color:var(--info)}
.conn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin:16px 0 8px}
.card.conn{margin:0;display:flex;flex-direction:column;gap:12px}
.card.conn h3{margin:0;font:600 1.15rem/1.3 var(--font-head);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card.conn p{margin:0;color:var(--text-2)}
.card.conn .stack{gap:12px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:.95rem}.kv dt{color:var(--text-3)}.kv dd{margin:0;word-break:break-all}
.acts-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.checks{display:grid;gap:4px}
.more summary{cursor:pointer;color:var(--text-2);font-weight:600;padding:6px 0}
.more[open] summary{margin-bottom:8px}
.secret{display:inline-block;margin:10px 0;padding:10px 14px;border-radius:8px;background:var(--black);font-size:.95rem;word-break:break-all;user-select:all}
.tabs{display:flex;gap:4px;margin:18px 0 10px;border-bottom:1px solid var(--line)}
.tabs a{padding:10px 14px;color:var(--text-2);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:600}
.tabs a.on{color:var(--strong);border-color:var(--moment)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:20px 0 6px}
.filters input,.filters select{padding:9px 12px;min-width:0}
.filters a.fine{margin-left:auto}
.inline-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:12px 0}
.inline-form label{display:flex;flex-direction:column;gap:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.who .indent{margin:0 0 10px 30px;max-width:360px;display:block}
.btn.sm{--h:40px;padding:0 16px;font-size:.9375rem}
.btn.danger{background:var(--ember-wash);color:#F3A487;box-shadow:inset 0 0 0 1px rgba(230,106,67,.4)}
.btn.danger:hover{background:rgba(230,106,67,.25)}
ul.plain{list-style:none;padding:0;margin:8px 0}ul.plain li{padding:6px 0;border-bottom:1px solid var(--line)}
@media (max-width:860px){.kpis,.kpis.three{grid-template-columns:1fr 1fr}.two.wide-gap{grid-template-columns:1fr}.row2{grid-template-columns:1fr}.tbl td.acts{white-space:normal}}

/* ---------- Round 16: charts, groups, security ---------- */
.chart{margin:0 0 8px}
.chart svg{display:block;max-width:100%;height:auto}
.chart-donut{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ch-track{stroke:color-mix(in srgb,var(--text) 10%,transparent)}
.ch-arc{stroke-linecap:butt}
.ch-centre{fill:var(--text);font:600 18px/1 var(--font-head)}
.ch-legend{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.92rem}
.ch-legend li{display:flex;align-items:center;gap:8px}
.ch-legend b{margin-left:auto;padding-left:12px;font-weight:600}
.ch-key{width:12px;height:12px;border-radius:3px;display:inline-block;background:currentColor}
.c-ok{color:var(--accent);stroke:var(--accent);fill:var(--accent)}
.c-mid{color:var(--info);stroke:var(--info);fill:var(--info)}
.c-bad{color:var(--moment);stroke:var(--moment);fill:var(--moment)}
.c-none{color:color-mix(in srgb,var(--text) 28%,transparent);stroke:color-mix(in srgb,var(--text) 28%,transparent);fill:color-mix(in srgb,var(--text) 28%,transparent)}
.ch-legend .ch-key.c-ok{background:var(--accent)}.ch-legend .ch-key.c-mid{background:var(--info)}.ch-legend .ch-key.c-bad{background:var(--moment)}.ch-legend .ch-key.c-none{background:color-mix(in srgb,var(--text) 28%,transparent)}
ul.ch-bars{list-style:none;margin:0;padding:0;display:grid;gap:10px}
ul.ch-bars li{display:grid;grid-template-columns:minmax(90px,160px) 1fr auto;align-items:center;gap:12px;font-size:.92rem}
.ch-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-bar{display:block;height:10px;border-radius:5px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
.ch-fill{display:block;height:100%;width:var(--at,0%);border-radius:5px;background:var(--accent);transition:width .6s ease}
.ch-fill.c-mid{background:var(--info)}.ch-fill.c-bad{background:var(--moment)}
.ch-val{font-variant-numeric:tabular-nums;white-space:nowrap}
.ch-grid{stroke:color-mix(in srgb,var(--text) 10%,transparent);stroke-dasharray:3 4}
.ch-base{stroke:color-mix(in srgb,var(--text) 25%,transparent)}
.ch-ax{fill:color-mix(in srgb,var(--text) 60%,transparent);font-size:11px}
.ch-area{fill:var(--accent);opacity:.14}
.ch-line{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round}
.ch-dot{fill:rgb(var(--bg-rgb));stroke:var(--accent);stroke-width:2}
.results{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:32px;align-items:start;margin-bottom:24px}
.results h3{margin-top:0}
dl.kv.compact{grid-template-columns:auto 1fr;gap:6px 16px;margin-top:16px}
dl.kv.compact dd{overflow-wrap:normal;word-break:normal}
dl.kv.compact dd .fine{display:block}
.people-pick.tall{max-height:320px;overflow:auto}
.indent{margin-left:28px}
p.indent{margin-top:4px}
@media (prefers-reduced-motion:reduce){.ch-fill{transition:none}}
@media (max-width:760px){.results{grid-template-columns:1fr}.chart-donut{gap:16px}ul.ch-bars li{grid-template-columns:1fr;gap:4px}}
/* narrow screens: tables scroll sideways instead of clipping; progress bars keep their width */
@media (max-width:760px){
  .tbl{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl td,.tbl th{white-space:nowrap}
  .tbl td .bar{width:64px;max-width:none}
}

/* ---------- Round 17: training sub-navigation, curricula, playbooks ---------- */
.tabs.subnav{margin:0 0 22px}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:12px 0 28px}
.card.tpl{display:flex;flex-direction:column;gap:8px}
.card.tpl h3{margin:0}
.card.tpl .k{font-size:.78rem;font-weight:600;color:var(--moment);letter-spacing:.02em}
.card.tpl .btn{margin-top:auto;align-self:flex-start}
ol.cu-steps{margin:8px 0 12px;padding-left:22px;display:grid;gap:6px}
ol.cu-steps li::marker{color:var(--text-3);font-variant-numeric:tabular-nums}
.page-head .btn{margin-left:auto}
textarea{width:100%;font:inherit;color:inherit;background:transparent;border:1px solid var(--line-2);border-radius:var(--r);padding:10px 12px;resize:vertical}


/* ---------- Round 18: light mode for signed-in pages (chosen per user; public site stays dark) ---------- */
html[data-theme=light]{--black:#FFFFFF;--booth:#F7F8FA;--panel:#FFFFFF;--panel-2:#F1F3F6;--bg-rgb:255 255 255;--text-rgb:20 24 31;
  --text:#1A1F27;--text-2:#3B4250;--text-3:#545C6A;--strong:#0B0E13;
  --info:#1C5D99;--info-hi:#164B7D;--info-rgb:28 93 153;
  --moment:#9C5710;--moment-rgb:156 87 16;
  --ember:#B4401E;--ember-wash:rgba(180,64,30,.10);--sage:#2F7A52;--sage-wash:rgba(47,122,82,.10);--amber-warn:#8A6400;
  --line:rgb(var(--text-rgb) / .12);--line-2:rgb(var(--text-rgb) / .22);
  --ink:#E9EEF5;--ink-2:#DDE4EE;--ink-rgb:233 238 245;color-scheme:light;--tungsten:#131B2A;--tungsten-hi:#26324A;--tungsten-ink:#FFFFFF;--tungsten-wash:rgb(19 27 42 / .10)}
html[data-theme=light] body::after{opacity:0;display:none}
html[data-theme=light] .top{background:rgb(var(--bg-rgb) / .92)}
html[data-theme=light] .top.drop nav{box-shadow:0 24px 48px -24px rgb(0 0 0 / .18)}
html[data-theme=light] .card,html[data-theme=light] .kpis>div,html[data-theme=light] .conn-grid .card{box-shadow:inset 0 0 0 1px rgb(var(--text-rgb) / .10),0 1px 2px rgb(16 24 40 / .04),0 4px 12px -6px rgb(16 24 40 / .06)}
html[data-theme=light] input,html[data-theme=light] select,html[data-theme=light] textarea{background:#fff}
html[data-theme=light] .secret{background:var(--panel-2)}
html[data-theme=light] .c-ok,html[data-theme=light] .ch-legend .ch-key.c-ok,html[data-theme=light] .ch-fill{--accent:#131B2A}
html[data-theme=light] .ch-line{stroke:#131B2A}
html[data-theme=light] .ch-area{fill:#131B2A;opacity:.06}
html[data-theme=light] .ch-dot{stroke:#131B2A}
html[data-theme=light] .player-wrap{--black:#0F1114;--panel:#181B20;--panel-2:#22262D;--bg-rgb:15 17 20;--text-rgb:241 243 246;--text:#F1F3F6;--text-2:#C5CAD2;--text-3:#A9AFB9;--strong:#fff;--info:#A9D6FF;--info-rgb:169 214 255;--moment:#C97D2B;--moment-rgb:201 125 43;--line:rgb(241 243 246 / .12);--line-2:rgb(241 243 246 / .24);background:var(--black);color:var(--text);border-radius:var(--r-lg);padding:clamp(16px,3vw,32px);color-scheme:dark}
@media (prefers-color-scheme:light){
html[data-theme=system]{--black:#FFFFFF;--booth:#F7F8FA;--panel:#FFFFFF;--panel-2:#F1F3F6;--bg-rgb:255 255 255;--text-rgb:20 24 31;
  --text:#1A1F27;--text-2:#3B4250;--text-3:#545C6A;--strong:#0B0E13;
  --info:#1C5D99;--info-hi:#164B7D;--info-rgb:28 93 153;
  --moment:#9C5710;--moment-rgb:156 87 16;
  --ember:#B4401E;--ember-wash:rgba(180,64,30,.10);--sage:#2F7A52;--sage-wash:rgba(47,122,82,.10);--amber-warn:#8A6400;
  --line:rgb(var(--text-rgb) / .12);--line-2:rgb(var(--text-rgb) / .22);
  --ink:#E9EEF5;--ink-2:#DDE4EE;--ink-rgb:233 238 245;color-scheme:light;--tungsten:#131B2A;--tungsten-hi:#26324A;--tungsten-ink:#FFFFFF;--tungsten-wash:rgb(19 27 42 / .10)}
html[data-theme=system] body::after{opacity:0;display:none}
html[data-theme=system] .top{background:rgb(var(--bg-rgb) / .92)}
html[data-theme=system] .top.drop nav{box-shadow:0 24px 48px -24px rgb(0 0 0 / .18)}
html[data-theme=system] .card,html[data-theme=system] .kpis>div,html[data-theme=system] .conn-grid .card{box-shadow:inset 0 0 0 1px rgb(var(--text-rgb) / .10),0 1px 2px rgb(16 24 40 / .04),0 4px 12px -6px rgb(16 24 40 / .06)}
html[data-theme=system] input,html[data-theme=system] select,html[data-theme=system] textarea{background:#fff}
html[data-theme=system] .secret{background:var(--panel-2)}
html[data-theme=system] .c-ok,html[data-theme=system] .ch-legend .ch-key.c-ok,html[data-theme=system] .ch-fill{--accent:#131B2A}
html[data-theme=system] .ch-line{stroke:#131B2A}
html[data-theme=system] .ch-area{fill:#131B2A;opacity:.06}
html[data-theme=system] .ch-dot{stroke:#131B2A}
html[data-theme=system] .player-wrap{--black:#0F1114;--panel:#181B20;--panel-2:#22262D;--bg-rgb:15 17 20;--text-rgb:241 243 246;--text:#F1F3F6;--text-2:#C5CAD2;--text-3:#A9AFB9;--strong:#fff;--info:#A9D6FF;--info-rgb:169 214 255;--moment:#C97D2B;--moment-rgb:201 125 43;--line:rgb(241 243 246 / .12);--line-2:rgb(241 243 246 / .24);background:var(--black);color:var(--text);border-radius:var(--r-lg);padding:clamp(16px,3vw,32px);color-scheme:dark}
}
/* theme switch in the header */
.theme-form{display:inline-flex;margin:0}
.theme-btn{appearance:none;border:0;background:transparent;color:var(--text-2);width:40px;height:40px;border-radius:999px;display:inline-grid;place-items:center;cursor:pointer}
.theme-btn:hover{color:var(--strong);background:rgb(var(--text-rgb) / .07)}
.theme-btn:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.theme-btn svg{width:18px;height:18px}
.theme-btn .t-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.top.drop nav .theme-btn{width:auto;height:auto;padding:14px var(--gutter);border-radius:0;justify-content:start;display:flex;gap:10px}
.top.drop nav .theme-btn .t-label{position:static;width:auto;height:auto;clip:auto}
.appearance{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.appearance label.check{border:1px solid var(--line-2);border-radius:12px;padding:10px 14px}
.appearance label.check:has(input:checked){border-color:var(--info);box-shadow:inset 0 0 0 1px var(--info)}

html[data-theme=light] .foot{background:var(--black)}
html[data-theme=light] .st.complete{color:#1F6B44}
html[data-theme=light] .st.overdue,html[data-theme=light] .pill.bad{color:#A33A16}
html[data-theme=light] .btn.danger{color:#A33A16;box-shadow:inset 0 0 0 1px rgba(180,64,30,.35)}
html[data-theme=light] .flash.ok{box-shadow:inset 0 0 0 1px rgba(47,122,82,.30)}
html[data-theme=light] .flash.bad{box-shadow:inset 0 0 0 1px rgba(180,64,30,.30)}
html[data-theme=light] .flash.warn{background:rgba(138,100,0,.08);box-shadow:inset 0 0 0 1px rgba(138,100,0,.28)}
html[data-theme=light] .st.in-progress{background:rgb(var(--info-rgb) / .10)}
@media (prefers-color-scheme:light){
html[data-theme=system] .foot{background:var(--black)}
html[data-theme=system] .st.complete{color:#1F6B44}
html[data-theme=system] .st.overdue,html[data-theme=system] .pill.bad{color:#A33A16}
html[data-theme=system] .btn.danger{color:#A33A16;box-shadow:inset 0 0 0 1px rgba(180,64,30,.35)}
html[data-theme=system] .flash.ok{box-shadow:inset 0 0 0 1px rgba(47,122,82,.30)}
html[data-theme=system] .flash.bad{box-shadow:inset 0 0 0 1px rgba(180,64,30,.30)}
html[data-theme=system] .flash.warn{background:rgba(138,100,0,.08);box-shadow:inset 0 0 0 1px rgba(138,100,0,.28)}
html[data-theme=system] .st.in-progress{background:rgb(var(--info-rgb) / .10)}
}
.chart-donut .ch-arc,.chart-donut .ch-track{fill:none}
.appearance + .btn{align-self:flex-start;width:auto}
@media (max-width:860px){
  .top nav .theme-form{display:block}
  .top nav .theme-btn{width:100%;height:auto;padding:14px 6px;border-radius:8px;display:flex;justify-content:flex-start;gap:10px;font:inherit;font-size:1.05rem;color:var(--text-2)}
  .top nav .theme-btn .t-label{position:static;width:auto;height:auto;clip:auto;overflow:visible}
}

html[data-theme=light] .btn .ico{background:rgb(255 255 255 / .16)}
@media (prefers-color-scheme:light){html[data-theme=system] .btn .ico{background:rgb(255 255 255 / .16)}}

/* light mode, ink direction (round 18c): near-black action colour; turquoise kept for the logo */
html[data-theme=light] .c-mid,html[data-theme=light] .ch-legend .ch-key.c-mid{color:#6F7B8E;stroke:#6F7B8E;fill:#6F7B8E;background:#6F7B8E}
html[data-theme=light] .ch-fill.c-mid{background:#6F7B8E}
html[data-theme=light] .c-none{color:#DCE0E6;stroke:#DCE0E6}
html[data-theme=light] .ch-legend .ch-key.c-none{background:#DCE0E6}
html[data-theme=light] .ch-track{stroke:#EEF0F3}
html[data-theme=light] svg.bar .fg{fill:#131B2A}
html[data-theme=light] svg.bar .bg{fill:#EEF0F3}
html[data-theme=light] .top nav a[aria-current=page]{box-shadow:inset 0 -2px 0 #131B2A}
html[data-theme=light] .tabs a.on{border-color:#131B2A}
html[data-theme=light] .theme-btn:hover{background:#F1F3F6}
@media (prefers-color-scheme:light){
html[data-theme=system] .c-mid,html[data-theme=system] .ch-legend .ch-key.c-mid{color:#6F7B8E;stroke:#6F7B8E;fill:#6F7B8E;background:#6F7B8E}
html[data-theme=system] .ch-fill.c-mid{background:#6F7B8E}
html[data-theme=system] .c-none{color:#DCE0E6;stroke:#DCE0E6}
html[data-theme=system] .ch-legend .ch-key.c-none{background:#DCE0E6}
html[data-theme=system] .ch-track{stroke:#EEF0F3}
html[data-theme=system] svg.bar .fg{fill:#131B2A}
html[data-theme=system] svg.bar .bg{fill:#EEF0F3}
html[data-theme=system] .top nav a[aria-current=page]{box-shadow:inset 0 -2px 0 #131B2A}
html[data-theme=system] .tabs a.on{border-color:#131B2A}
html[data-theme=system] .theme-btn:hover{background:#F1F3F6}
}
html .chart-donut circle.ch-arc,html .chart-donut circle.ch-track{fill:none}
.flash.backup ol.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 16px;margin:12px 0 4px;padding-left:22px;font-size:1.05rem}
.flash.backup code{letter-spacing:.06em}
p.bad{color:#F3A487}
html[data-theme=light] p.bad{color:#A33A16}
@media (prefers-color-scheme:light){html[data-theme=system] p.bad{color:#A33A16}}
/* round 19: report button + reported emails */
.conn-grid .wide-card{grid-column:1/-1}
ol.setup-steps{margin:14px 0;padding-left:22px;display:grid;gap:10px}
.breakall{word-break:break-word;overflow-wrap:anywhere}
pre.headers{white-space:pre-wrap;word-break:break-all;font-size:.8rem;line-height:1.45;background:var(--panel-2);border-radius:10px;padding:14px;max-height:480px;overflow:auto}
ul.links li{margin-bottom:6px}
td.clip{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card.triage{margin-top:24px}

/* =====================================================================================
   Round 20 — one type scale and one spacing scale for every signed-in page (.in-app).
   Type (16px root):  display 2.6rem · h2 1.5rem · h3 1.125rem · lede 1.125rem
                      body 1rem · table/control .9375rem · small .875rem · micro .8125rem
   Spacing (4px grid): 4 · 8 · 12 · 16 · 24 · 32 · 48
   The public marketing pages keep their own (approved) scale; shared fixes at the end.
   ===================================================================================== */
.in-app{font-size:16px;line-height:1.6}
.in-app main{padding-top:48px;padding-bottom:96px}

/* headings: same size for the same role on every page */
.in-app h1{font-size:clamp(2rem,3.4vw,2.6rem);line-height:1.1;margin:0 0 16px}
.in-app h2{font-size:1.5rem;line-height:1.25;margin:0 0 16px}
.in-app h3{font-size:1.125rem;line-height:1.35;margin:0 0 8px}
.in-app section>h2:not(:first-child),.in-app section>details+h2,.in-app section>div+h2,.in-app section>table+h2,.in-app section>form+h2,.in-app section>p+h2,.in-app section>ul+h2,.in-app section>dl+h2,.in-app section>figure+h2{margin-top:48px}
.in-app section>h3:not(:first-child){margin-top:32px}
.in-app .card h2{font-size:1.25rem;margin-bottom:12px}
.in-app .page-head{gap:12px 16px;margin-bottom:24px}
.in-app .page-head h1{margin:0}

/* text */
.in-app p{margin:0 0 16px;max-width:72ch}
.in-app .lede{font-size:1.125rem;line-height:1.6;max-width:64ch;margin-bottom:24px}
.in-app .fine,.in-app .opt-l{font-size:.875rem;line-height:1.55}
.in-app p.fine{margin:12px 0 16px}
.in-app .crumb{font-size:.875rem;margin:0 0 12px}
.in-app code{font-size:.8125rem;line-height:1.5}
.in-app .tbl code{font-size:.8125rem}
.in-app ul.plain li{margin-bottom:8px;line-height:1.55}

/* small labels: one micro size, never below 13px */
.in-app .pill{font-size:.8125rem;line-height:1.2;padding:6px 12px}
.in-app .st{font-size:.8125rem;line-height:1.2;padding:4px 10px}
.in-app .card.tpl .k,.in-app .kpis .k{font-size:.8125rem;letter-spacing:.01em}

/* buttons: comfortable when a label wraps; consistent sizes */
.btn{line-height:1.2}
.in-app .btn{font-size:.9375rem}
.in-app .btn.sm{--h:40px;font-size:.875rem;padding:0 18px}
.in-app .cta,.in-app .acts-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px 0}
.in-app .cta form.inline,.in-app .acts-row form.inline{margin:0}
.in-app form .btn+p.fine,.in-app .assign-form>.btn+p.fine{margin-top:12px}
.in-app .linklike{line-height:1.4}

/* forms */
.in-app .stack{gap:16px}
.in-app label{font-size:.9375rem;gap:8px}
.in-app input,.in-app select,.in-app textarea{font-size:1rem}
.in-app .inline-form{gap:12px 16px;margin:16px 0}
.in-app .checks,.in-app .appearance{gap:10px 12px}
.in-app .mods,.in-app .people-pick{row-gap:10px}
.in-app label.check{line-height:1.45}
.in-app fieldset{margin:0 0 32px}
.in-app legend{font-size:1.25rem;margin-bottom:12px}
.in-app details.more{margin:16px 0}
.in-app details.more>summary{padding:8px 0}
.in-app details.more[open]>summary{margin-bottom:12px}
.in-app details.more>.card,.in-app details.more>form{margin-top:4px}

/* cards, grids, key-value lists */
.in-app .card{padding:28px}
.in-app .card>*:last-child{margin-bottom:0}
.in-app .two{gap:24px;margin:24px 0 40px}
.in-app .two.wide-gap{gap:40px}
.in-app .kv{gap:10px 24px;font-size:.9375rem;line-height:1.5}
.in-app .kpis{gap:16px}
.in-app .kpis .v{margin:8px 0 6px}
.in-app .kpis .d{font-size:.875rem;line-height:1.45}

/* tables */
.in-app .tbl{font-size:.9375rem;margin:12px 0 32px}
.in-app .tbl th{font-size:.8125rem;padding:12px 16px 12px 0;line-height:1.3}
.in-app .tbl td{padding:14px 16px 14px 0;line-height:1.45}
.in-app .tbl.small{font-size:.875rem}
.in-app .tbl.small td{padding:12px 16px 12px 0}

/* flashes and tabs */
.in-app .flash{margin:0 0 24px;line-height:1.55}
.in-app .tabs a{font-size:.9375rem}
.in-app .tabs.subnav{margin-bottom:24px}

/* charts: legend and axis text at the small size */
.in-app .ch-legend{font-size:.9375rem;gap:8px}
.in-app ul.ch-bars li{font-size:.9375rem}

/* phones: a little less air, same rhythm */
@media (max-width:760px){
  .in-app main{padding-top:32px;padding-bottom:72px}
  .in-app h1{font-size:1.85rem}
  .in-app h2{font-size:1.3rem}
  .in-app section>h2:not(:first-child){margin-top:40px}
  .in-app .card{padding:20px}
  .in-app .lede{font-size:1.0625rem}
  .in-app .cta .btn,.in-app .acts-row .btn{flex:0 1 auto}
}

/* shared (public pages too): stacked cards on phones never touch */
@media (max-width:760px){ .kit-grid{row-gap:16px} }
/* round 20 — remaining off-scale sizes */
.in-app .ch-ax{font-size:12px}
.in-app pre.headers{font-size:.8125rem}
.in-app .lessons .state{font-size:.875rem}
.in-app .lessons li a strong{font-size:1.125rem;line-height:1.3}
.in-app .linklike{font-size:.9375rem}
.in-app .card h3,.in-app .card.conn h3{font-size:1.125rem;line-height:1.35}
.in-app .assign-form{display:flex;flex-direction:column;gap:32px}
.in-app .assign-form>fieldset{margin:0}
.in-app .assign-form>.btn{align-self:flex-start}
.in-app .assign-form>.btn+p.fine{margin-top:-20px}
/* round 20 — form details found in review */
.in-app label:not(.check){display:block}
.in-app label:not(.check)>:is(input,select,textarea){display:block;margin-top:8px}
.in-app label:not(.check)>.opt-l{font-weight:400;color:var(--text-3)}
.in-app .inline-form label.check{display:flex;flex-direction:row;align-items:center;gap:10px;align-self:center}
.in-app .stack>.btn,.in-app .stack>button.btn{align-self:flex-start}
.in-app .trackpick summary{justify-content:flex-start;align-items:baseline;gap:10px}
.in-app .trackpick summary::after{margin-left:auto}
.in-app legend{font-weight:600;color:var(--strong)}
.in-app ol.setup-steps li{line-height:1.55}
.in-app ol.setup-steps li form.inline{margin:0 12px 6px 0;vertical-align:middle}
/* round 20 — charts on phones */
@media (max-width:760px){
  .in-app .chart-line .ch-ax{font-size:20px}
  .in-app ul.ch-bars li{grid-template-columns:1fr auto;gap:6px 12px}
  .in-app ul.ch-bars .ch-bar{grid-column:1/-1;grid-row:2}
}
.in-app .stack>p,.in-app .stack>h2,.in-app .stack>h3{margin-top:0;margin-bottom:0}
.in-app p>.btn,.in-app p>a.btn{margin:0 8px 10px 0}
.in-app ol.setup-steps li{max-width:80ch}
.in-app select.indent{width:calc(100% - 28px);max-width:420px}

/* =====================================================================================
   Round 20b — the same discipline on the public pages (home hero and home graphics untouched).
   Public scale (body 17px): page title 2.6rem · section 1.75rem · group title 1.25rem
   intro 1.1875rem · body 1.0625rem · small .9375rem · meta .875rem
   ===================================================================================== */
.public:not(.home-page) main{padding-top:64px;padding-bottom:112px}
.public:not(.home-page) .sec-head{gap:16px;margin-bottom:56px}
.public:not(.home-page) .sec-head p,.public .prose>.lede,.public .kits-lede{font-size:1.1875rem;line-height:1.6;color:var(--text-2);max-width:56ch}
.public .kits h2,.public h2.kits-all,.public .prose h2{font-size:1.75rem;line-height:1.25;margin:64px 0 12px}
.public .kits>h2:first-child{margin-top:0}
.public .kits-lede{margin:0 0 32px}
.public .catalog section>h2{font-size:1.25rem;line-height:1.3;margin:0 0 12px}
.public .catalog .m,.public .reelcard .meta,.public .poster .meta{font-size:.875rem}
.public .kit h3{font-size:1.125rem}
.public .kit-who,.public .kit ol{font-size:.9375rem}
.public .kit-hook{font-size:1.0625rem;line-height:1.5;margin-top:16px}
.public .kit ol{margin-top:16px}
.public .kit{padding-bottom:32px}
.public .prose p,.public .prose li{font-size:1.0625rem;line-height:1.65}
.public .prose li{margin-bottom:12px}
.public .plan .price{margin-bottom:16px}
.public .plan li{font-size:1rem}
.public:not(.home-page) .btn{font-size:1rem}
.public:not(.home-page) .form-page .lede{font-size:1.1875rem}
.public:not(.home-page) label{font-size:.9375rem}
.public:not(.home-page) .fine{font-size:.9375rem}
@media (max-width:760px){
  .public:not(.home-page) main{padding-top:40px;padding-bottom:80px}
  .public:not(.home-page) .sec-head{margin-bottom:40px}
  .public .kits h2,.public h2.kits-all,.public .prose h2{font-size:1.5rem;margin-top:48px}
  .public:not(.home-page) .sec-head p,.public .prose>.lede,.public .kits-lede{font-size:1.0625rem}
}
.public .catalog li{font-size:1rem}
.public .catalog section>h2 .n{font-size:.875rem}

/* =====================================================================================
   Round 21 — console sidebar. Under the logo, far left, below the top bar; the top bar and
   the content keep their own space. Collapsed = icons only (names on hover/focus).
   ===================================================================================== */
.has-sidebar{--sb-w:244px;--top-h:65px}
.has-sidebar.sb-collapsed{--sb-w:72px}
.has-sidebar .top-in{max-width:none;height:64px;padding:0 var(--gutter) 0 20px}
.has-sidebar main{width:calc(100% - var(--sb-w));max-width:calc(var(--max) + 32px);margin:0 auto 0 var(--sb-w);padding-left:clamp(24px,3.4vw,48px);padding-right:clamp(24px,3.4vw,48px)}
.has-sidebar .foot{margin-left:var(--sb-w)}
.has-sidebar .foot-in{max-width:none;padding-left:clamp(24px,3.4vw,48px)}
.sidebar{position:fixed;left:0;top:var(--top-h);bottom:0;width:var(--sb-w);z-index:calc(var(--z-nav) - 1);display:flex;flex-direction:column;justify-content:space-between;
  background:var(--black);border-right:1px solid var(--line);padding:16px 12px 12px;overflow-y:auto;overflow-x:hidden;transition:width .22s var(--ease)}
.sb-nav{display:flex;flex-direction:column;gap:2px}
.sb-group{display:flex;flex-direction:column}
.sb-top{position:relative;display:flex;align-items:center;gap:14px;min-height:44px;padding:0 12px;border-radius:12px;color:var(--text-2);text-decoration:none;font-size:.9375rem;font-weight:600;white-space:nowrap}
.sb-top svg{width:22px;height:22px;flex:none}
.sb-top:hover{background:rgb(var(--text-rgb) / .06);color:var(--strong)}
.sb-group.on>.sb-top,.sb-top[aria-current=page]{color:var(--strong);background:rgb(var(--text-rgb) / .07)}
.sb-group.on>.sb-top::before,.sb-top[aria-current=page]::before{content:'';position:absolute;left:-12px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--info)}
.sb-sub{list-style:none;margin:4px 0 8px;padding:0 0 0 48px;display:flex;flex-direction:column;gap:2px}
.sb-sub a{display:block;padding:8px 10px;border-radius:8px;color:var(--text-3);text-decoration:none;font-size:.875rem;white-space:nowrap}
.sb-sub a:hover{color:var(--strong);background:rgb(var(--text-rgb) / .05)}
.sb-sub a[aria-current=page]{color:var(--strong);font-weight:600}
.sb-sep{height:1px;background:var(--line);margin:12px 4px}
.sb-toggle-form{margin:12px 0 0}
.sb-toggle{appearance:none;border:0;background:transparent;width:100%;display:flex;align-items:center;gap:14px;min-height:44px;padding:0 12px;border-radius:12px;color:var(--text-3);font:600 .875rem var(--font);cursor:pointer;position:relative}
.sb-toggle:hover{color:var(--strong);background:rgb(var(--text-rgb) / .06)}
.sb-toggle svg{width:22px;height:22px;flex:none;transition:transform .22s var(--ease)}
.sb-top:focus-visible,.sb-sub a:focus-visible,.sb-toggle:focus-visible{outline:2px solid var(--info);outline-offset:2px}
/* collapsed: icons only; names stay readable to screen readers and appear as a tip */
.sb-collapsed .sidebar{padding-left:10px;padding-right:10px;overflow:visible}
.sb-collapsed .sb-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sb-collapsed .sb-sub{display:none}
.sb-collapsed .sb-top,.sb-collapsed .sb-toggle{justify-content:center;padding:0}
.sb-collapsed .sb-toggle svg{transform:rotate(180deg)}
.sb-collapsed .sb-top::before{left:-10px}
.sb-collapsed [data-tip]:hover::after,.sb-collapsed [data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;
  background:var(--panel-2);color:var(--strong);font:600 .8125rem/1 var(--font);padding:8px 10px;border-radius:8px;box-shadow:0 6px 20px rgb(0 0 0 / .25);pointer-events:none;z-index:5}
@media (prefers-reduced-motion:reduce){.sidebar,.sb-toggle svg{transition:none}}
/* phones and small tablets: the menu button already lists everything; no sidebar */
@media (max-width:860px){
  .sidebar{display:none}
  .has-sidebar main{width:100%;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
  .has-sidebar .foot{margin-left:0}
  .has-sidebar .top-in{height:auto;padding:14px var(--gutter)}
}
/* the expanded sidebar already lists each area's pages, so the in-page tabs step aside;
   collapsed (icons only) and on phones the tabs come back */
@media (min-width:861px){ .has-sidebar:not(.sb-collapsed) .tabs.subnav{display:none} }
html[data-theme=light] .sb-group.on>.sb-top::before,html[data-theme=light] .sb-top[aria-current=page]::before{background:#131B2A}
@media (prefers-color-scheme:light){html[data-theme=system] .sb-group.on>.sb-top::before,html[data-theme=system] .sb-top[aria-current=page]::before{background:#131B2A}}

/* =====================================================================================
   Round 22 — "Signal" palette from the Bintera Technologies family page.
   Ink #111316 · paper #EEEFEA · tiles #2A2E33. Orange #FF4F1F = act (buttons, links that act,
   current page). Teal #14A39A = done / the lit bit (logo, complete). Ice #9CC9D9 = in progress
   and information. Magenta #B8478A = missed / overdue. Yellow #F2B705 = caution.
   Heavy tight headings (Hanken 800), uppercase mono labels (Geist Mono).
   ===================================================================================== */
@font-face{font-family:GeistMono;src:url(/fonts/geist-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:GeistMono;src:url(/fonts/geist-mono-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
[data-accent=signal]{--accent:#FF4F1F;--accent-hi:#FF6A3D;--on-accent:#111316;--accent-rgb:255 79 31;--on-accent-rgb:17 19 22}
[data-info=signal]{--info:#9CC9D9;--info-hi:#B9DCE8;--info-rgb:156 201 217}
[data-head=signal]{--font-head:Hanken,var(--font);--head-weight:800;--head-track:-.04em}
html[data-accent=signal]{
  --black:#111316;--booth:#16191D;--panel:#1A1D21;--panel-2:#2A2E33;--bg-rgb:17 19 22;
  --text:#EEEFEA;--text-2:#C9CCC6;--text-3:#A3A8AE;--strong:#FFFFFF;--text-rgb:238 239 234;
  --line:rgb(var(--text-rgb) / .12);--line-2:rgb(var(--text-rgb) / .22);
  --lit:#14A39A;--lit-text:#3CC4BA;--miss:#B8478A;--miss-text:#E58AC0;--caution:#F2B705;--paper:#EEEFEA;--paper-ink:#3A3F45;
  --moment:#FF4F1F;--moment-rgb:255 79 31;
  --ember:#E58AC0;--ember-wash:rgb(184 71 138 / .16);--sage:#3CC4BA;--sage-wash:rgb(20 163 154 / .16);--amber-warn:#F2B705;
  --mono:GeistMono,ui-monospace,SFMono-Regular,Menlo,monospace}
html[data-accent=signal] body::after{opacity:.035}
/* logo tile: the teal "lit bit" */
html[data-accent=signal] .mark rect{fill:#14A39A}
html[data-accent=signal] .mark path{stroke:#111316}
/* headings: heavy and tight */
html[data-accent=signal] h1,html[data-accent=signal] h2,html[data-accent=signal] .display{font-weight:800;letter-spacing:-.04em}
html[data-accent=signal] h3{font-weight:750;letter-spacing:-.02em}
/* mono labels: eyebrows, table heads, KPI labels, card kinds, footer headings */
html[data-accent=signal] :is(.eyebrow,.ov-card .eyebrow,.tbl th,.kpis .k,.card.tpl .k,.foot h4,.sb-sep-label,.crumbs){font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-stretch:100%}
html[data-accent=signal] :is(.eyebrow,.ov-card .eyebrow){color:var(--text-3)}
html[data-accent=signal] .eyebrow::before,html[data-accent=signal] .ov-card .eyebrow::before{content:'';display:inline-block;width:.62em;height:.62em;margin-right:.7em;background:var(--lit);vertical-align:.02em}
html[data-accent=signal] .in-app :is(.tbl th,.kpis .k,.card.tpl .k){font-size:.75rem}
html[data-accent=signal] .card.tpl .k{color:var(--accent)}
/* status pills */
html[data-accent=signal] .st.complete{background:rgb(20 163 154 / .16);color:var(--lit-text)}
html[data-accent=signal] .st.in-progress{background:rgb(156 201 217 / .14);color:var(--info)}
html[data-accent=signal] .st.overdue,html[data-accent=signal] .pill.bad{background:rgb(184 71 138 / .18);color:var(--miss-text)}
html[data-accent=signal] p.bad{color:var(--miss-text)}
/* charts: teal done, ice in progress, magenta missed, tile grey not started */
html[data-accent=signal] .c-ok{color:var(--lit);stroke:var(--lit);fill:var(--lit)}
html[data-accent=signal] .c-mid{color:var(--info);stroke:var(--info);fill:var(--info)}
html[data-accent=signal] .c-bad{color:var(--miss);stroke:var(--miss);fill:var(--miss)}
html[data-accent=signal] .c-none{color:#3A3F45;stroke:#3A3F45;fill:#3A3F45}
html[data-accent=signal] .ch-legend .ch-key.c-ok,html[data-accent=signal] .ch-fill{background:var(--lit)}
html[data-accent=signal] .ch-legend .ch-key.c-mid,html[data-accent=signal] .ch-fill.c-mid{background:var(--info)}
html[data-accent=signal] .ch-legend .ch-key.c-bad,html[data-accent=signal] .ch-fill.c-bad{background:var(--miss)}
html[data-accent=signal] .ch-legend .ch-key.c-none{background:#3A3F45}
html[data-accent=signal] .ch-line{stroke:var(--lit)}html[data-accent=signal] .ch-dot{stroke:var(--lit)}html[data-accent=signal] .ch-area{fill:var(--lit);opacity:.10}
html[data-accent=signal] svg.bar .fg,html[data-accent=signal] .bar .fg{fill:var(--lit)}
html[data-accent=signal] svg.bar .bg,html[data-accent=signal] .bar .bg{fill:var(--panel-2)}
/* current page markers in orange */
html[data-accent=signal] .top nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--accent)}
html[data-accent=signal] .tabs a.on{border-color:var(--accent)}
html[data-accent=signal] .sb-group.on>.sb-top::before,html[data-accent=signal] .sb-top[aria-current=page]::before{background:var(--accent)}
/* footer: same ink as the page, separated by a rule */
html[data-accent=signal] .foot{background:var(--black);border-top:1px solid var(--line-2)}
/* buttons: orange pill, ink text */
html[data-accent=signal] .btn .ico{background:rgb(17 19 22 / .14)}

html[data-accent=signal][data-theme=light]{--black:#FFFFFF;--booth:#F6F6F3;--panel:#FFFFFF;--panel-2:#F1F2EE;--bg-rgb:255 255 255;--text-rgb:17 19 22;
  --text:#111316;--text-2:#3A3F45;--text-3:#5B6168;--strong:#000000;
  --info:#1F5F75;--info-hi:#174A5C;--info-rgb:31 95 117;
  --lit:#14A39A;--lit-text:#0B6E68;--miss:#B8478A;--miss-text:#93306C;
  --tungsten:#FF4F1F;--tungsten-hi:#FF6A3D;--tungsten-ink:#111316;--tungsten-wash:rgb(255 79 31 / .14);
  --moment:#C2380F;--moment-rgb:194 56 15;--ember:#93306C;--ember-wash:rgb(184 71 138 / .10);--sage:#0B6E68;--sage-wash:rgb(20 163 154 / .10);--amber-warn:#8A6400;--line:rgb(var(--text-rgb) / .12);--line-2:rgb(var(--text-rgb) / .22)}
html[data-accent=signal][data-theme=light] .c-mid{color:#3E8AA6;stroke:#3E8AA6;fill:#3E8AA6}
html[data-accent=signal][data-theme=light] .ch-legend .ch-key.c-mid,html[data-accent=signal][data-theme=light] .ch-fill.c-mid{background:#3E8AA6}
html[data-accent=signal][data-theme=light] .c-none{color:#E3E5E0;stroke:#E3E5E0;fill:#E3E5E0}
html[data-accent=signal][data-theme=light] .ch-legend .ch-key.c-none{background:#E3E5E0}
html[data-accent=signal][data-theme=light] .ch-track{stroke:#EEEFEA}
html[data-accent=signal][data-theme=light] svg.bar .bg,html[data-accent=signal][data-theme=light] .bar .bg{fill:#EEEFEA}
html[data-accent=signal][data-theme=light] .c-ok,html[data-accent=signal][data-theme=light] .ch-legend .ch-key.c-ok,html[data-accent=signal][data-theme=light] .ch-fill{--accent:#14A39A}
html[data-accent=signal][data-theme=light] .ch-line,html[data-accent=signal][data-theme=light] .ch-dot{stroke:#14A39A}html[data-accent=signal][data-theme=light] .ch-area{fill:#14A39A;opacity:.08}html[data-accent=signal][data-theme=light] svg.bar .fg{fill:#14A39A}
html[data-accent=signal][data-theme=light] .top nav a[aria-current=page]{box-shadow:inset 0 -2px 0 #FF4F1F}
html[data-accent=signal][data-theme=light] .tabs a.on{border-color:#FF4F1F}
html[data-accent=signal][data-theme=light] .sb-group.on>.sb-top::before,html[data-accent=signal][data-theme=light] .sb-top[aria-current=page]::before{background:#FF4F1F}
html[data-accent=signal][data-theme=light] .st.complete{background:rgb(20 163 154 / .12);color:#0B6E68}
html[data-accent=signal][data-theme=light] .st.in-progress{background:rgb(31 95 117 / .09);color:#1F5F75}
html[data-accent=signal][data-theme=light] .st.overdue,html[data-accent=signal][data-theme=light] .pill.bad{background:rgb(184 71 138 / .10);color:#93306C}
html[data-accent=signal][data-theme=light] p.bad{color:#93306C}
html[data-accent=signal][data-theme=light] .btn .ico{background:rgb(17 19 22 / .12)}
html[data-accent=signal][data-theme=light] .foot{background:#FFFFFF;border-top:1px solid var(--line)}
html[data-accent=signal][data-theme=light] .card.tpl .k{color:#C2380F}
html[data-accent=signal][data-theme=light] .eyebrow::before{background:#14A39A}
@media (prefers-color-scheme:light){
html[data-accent=signal][data-theme=system]{--black:#FFFFFF;--booth:#F6F6F3;--panel:#FFFFFF;--panel-2:#F1F2EE;--bg-rgb:255 255 255;--text-rgb:17 19 22;
  --text:#111316;--text-2:#3A3F45;--text-3:#5B6168;--strong:#000000;
  --info:#1F5F75;--info-hi:#174A5C;--info-rgb:31 95 117;
  --lit:#14A39A;--lit-text:#0B6E68;--miss:#B8478A;--miss-text:#93306C;
  --tungsten:#FF4F1F;--tungsten-hi:#FF6A3D;--tungsten-ink:#111316;--tungsten-wash:rgb(255 79 31 / .14);
  --moment:#C2380F;--moment-rgb:194 56 15;--ember:#93306C;--ember-wash:rgb(184 71 138 / .10);--sage:#0B6E68;--sage-wash:rgb(20 163 154 / .10);--amber-warn:#8A6400;--line:rgb(var(--text-rgb) / .12);--line-2:rgb(var(--text-rgb) / .22)}
html[data-accent=signal][data-theme=system] .c-mid{color:#3E8AA6;stroke:#3E8AA6;fill:#3E8AA6}
html[data-accent=signal][data-theme=system] .ch-legend .ch-key.c-mid,html[data-accent=signal][data-theme=system] .ch-fill.c-mid{background:#3E8AA6}
html[data-accent=signal][data-theme=system] .c-none{color:#E3E5E0;stroke:#E3E5E0;fill:#E3E5E0}
html[data-accent=signal][data-theme=system] .ch-legend .ch-key.c-none{background:#E3E5E0}
html[data-accent=signal][data-theme=system] .ch-track{stroke:#EEEFEA}
html[data-accent=signal][data-theme=system] svg.bar .bg,html[data-accent=signal][data-theme=system] .bar .bg{fill:#EEEFEA}
html[data-accent=signal][data-theme=system] .c-ok,html[data-accent=signal][data-theme=system] .ch-legend .ch-key.c-ok,html[data-accent=signal][data-theme=system] .ch-fill{--accent:#14A39A}
html[data-accent=signal][data-theme=system] .ch-line,html[data-accent=signal][data-theme=system] .ch-dot{stroke:#14A39A}html[data-accent=signal][data-theme=system] .ch-area{fill:#14A39A;opacity:.08}html[data-accent=signal][data-theme=system] svg.bar .fg{fill:#14A39A}
html[data-accent=signal][data-theme=system] .top nav a[aria-current=page]{box-shadow:inset 0 -2px 0 #FF4F1F}
html[data-accent=signal][data-theme=system] .tabs a.on{border-color:#FF4F1F}
html[data-accent=signal][data-theme=system] .sb-group.on>.sb-top::before,html[data-accent=signal][data-theme=system] .sb-top[aria-current=page]::before{background:#FF4F1F}
html[data-accent=signal][data-theme=system] .st.complete{background:rgb(20 163 154 / .12);color:#0B6E68}
html[data-accent=signal][data-theme=system] .st.in-progress{background:rgb(31 95 117 / .09);color:#1F5F75}
html[data-accent=signal][data-theme=system] .st.overdue,html[data-accent=signal][data-theme=system] .pill.bad{background:rgb(184 71 138 / .10);color:#93306C}
html[data-accent=signal][data-theme=system] p.bad{color:#93306C}
html[data-accent=signal][data-theme=system] .btn .ico{background:rgb(17 19 22 / .12)}
html[data-accent=signal][data-theme=system] .foot{background:#FFFFFF;border-top:1px solid var(--line)}
html[data-accent=signal][data-theme=system] .card.tpl .k{color:#C2380F}
html[data-accent=signal][data-theme=system] .eyebrow::before{background:#14A39A}
}

/* round 22 — home: ink and paper bands, numbered mono eyebrows, the lit-bit grid on the close */
html[data-accent=signal] .sg-head .eyebrow{margin:0 0 18px;font-size:.75rem;line-height:1.2}
html[data-accent=signal] .hs-paper{--black:#EEEFEA;--bg-rgb:238 239 234;--text:#111316;--text-2:#3A3F45;--text-3:#5B6168;--strong:#000;--text-rgb:17 19 22;
  --panel:#F8F8F5;--panel-2:#DCDED8;--ink:#EEEFEA;--ink-2:#DCDED8;--info:#1F5F75;--info-rgb:31 95 117;--moment:#C2380F;--moment-rgb:194 56 15;--lit:#0E8A82;
  --line:rgb(17 19 22 / .14);--line-2:rgb(17 19 22 / .26);background:#EEEFEA;color:var(--text);color-scheme:light}
html[data-accent=signal] .hs-paper::before{display:none}
html[data-accent=signal] .hs-paper .btn.ghost{color:var(--text);box-shadow:inset 0 0 0 1.5px rgb(17 19 22 / .35)}
html[data-accent=signal] .hs-paper input,html[data-accent=signal] .hs-paper select{background:#fff;color:#111316}
html[data-accent=signal] .hs-paper .tl-decide circle{fill:#FF4F1F;stroke:#FF4F1F}html[data-accent=signal] .hs-paper .tl-decide line{stroke:#FF4F1F}
html[data-accent=signal] .hs-paper .tl-mark circle{fill:#EEEFEA}
html[data-accent=signal] .hs-paper .eyebrow::before{background:#0E8A82}
html[data-accent=signal] .hs-ink{background:var(--black)}
html[data-accent=signal] .hs-close::before{background-image:linear-gradient(#111316 2px,transparent 2px),linear-gradient(90deg,#111316 2px,transparent 2px),linear-gradient(#24282D,#24282D);
  background-size:22px 22px,22px 22px,auto;background-position:50% 100%;
  -webkit-mask-image:radial-gradient(60% 85% at 50% 100%,#000,transparent 78%);mask-image:radial-gradient(60% 85% at 50% 100%,#000,transparent 78%)}
/* a few lit bits, snapped to the grid (cells start at centre - 11px, rows count up from the bottom) */
html[data-accent=signal] .hs-close::after{content:'';position:absolute;z-index:-1;width:20px;height:20px;left:calc(50% - 11px + 2px - 330px);bottom:0;background:#14A39A;pointer-events:none;
  box-shadow:110px -22px 0 #14A39A,484px -44px 0 #FF4F1F,-132px -22px 0 #9CC9D9,594px 0 0 #14A39A,264px -44px 0 #2E8F88,770px -22px 0 #F2B705}
@media (max-width:640px){html[data-accent=signal] .hs-close::after{display:none}}
html[data-accent][data-theme] .chart-donut circle.ch-arc,html[data-accent][data-theme] .chart-donut circle.ch-track{fill:none}
html[data-accent=signal][data-theme] .player-wrap{--black:#111316;--panel:#1A1D21;--panel-2:#2A2E33;--bg-rgb:17 19 22;--text-rgb:238 239 234;--text:#EEEFEA;--text-2:#C9CCC6;--text-3:#A3A8AE;--info:#9CC9D9;--info-rgb:156 201 217;--moment:#FF4F1F;--moment-rgb:255 79 31;--line:rgb(238 239 234 / .12);--line-2:rgb(238 239 234 / .22)}

/* =====================================================================================
   Round 23 — the sidebar is the console's only menu. The top bar keeps just the logo.
   Areas with several pages fold open in place; collapsed, an area's pages appear beside its icon.
   Appearance, sign out and collapse sit at the bottom. On phones the menu button opens it as a drawer.
   ===================================================================================== */
.has-sidebar .top{border-bottom:1px solid var(--line)}
.has-sidebar .tabs.subnav{display:none!important}
.sidebar .sb-nav{gap:2px}
.sb-fold>summary{list-style:none;cursor:pointer;user-select:none}
.sb-fold>summary::-webkit-details-marker{display:none}
.sb-chev{margin-left:auto;display:inline-flex;color:var(--text-3)}
.sb-chev svg{width:16px!important;height:16px!important;transition:transform .2s var(--ease)}
.sb-fold[open]>summary .sb-chev svg{transform:rotate(90deg)}
.sb-fold.on>summary{color:var(--strong)}
.sb-fold:not([open]).on>summary{background:rgb(var(--text-rgb) / .07)}
.sb-fold[open]>summary{background:none}
.sb-fold .sb-sub{margin:2px 0 6px}
.sb-sub-head{display:none}
.sb-sub a[aria-current=page]{color:var(--strong);font-weight:600;background:rgb(var(--text-rgb) / .06);box-shadow:inset 2px 0 0 var(--accent)}
.sb-foot{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:10px;margin-top:12px}
.sb-form{margin:0}
.sb-btn{appearance:none;border:0;background:transparent;width:100%;font:600 .9375rem var(--font);cursor:pointer;text-align:left}
.sidebar .theme-btn{width:100%;height:auto;border-radius:12px;display:flex;justify-content:flex-start}
.sidebar .theme-btn .t-label{display:none}
.sb-toggle-form{margin:0}
.sb-toggle{color:var(--text-3)}
/* collapsed: icons only; an area's pages fly out beside its icon on hover or keyboard focus */
.sb-collapsed .sb-chev{display:none}
.sb-collapsed .sb-fold{position:relative}
.sb-collapsed .sb-fold.on>summary{background:rgb(var(--text-rgb) / .07)}
.sb-collapsed .sb-fold.on>summary::before{content:'';position:absolute;left:-10px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.sb-collapsed .sb-fold .sb-sub{display:none}
.sb-collapsed .sb-fold:hover .sb-sub,.sb-collapsed .sb-fold:focus-within .sb-sub{display:flex;position:absolute;left:calc(100% + 10px);top:-6px;margin:0;padding:8px;min-width:200px;flex-direction:column;gap:2px;
  background:var(--panel);border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2),0 12px 32px rgb(0 0 0 / .28);z-index:6}
.sb-collapsed .sb-fold:hover .sb-sub::before,.sb-collapsed .sb-fold:focus-within .sb-sub::before{content:'';position:absolute;left:-12px;top:0;bottom:0;width:12px}
.sb-collapsed .sb-sub-head{display:block;padding:6px 10px 8px;font:500 .75rem/1.2 var(--mono,var(--font));text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.sb-collapsed .sb-fold:hover>summary[data-tip]::after,.sb-collapsed .sb-fold:focus-within>summary[data-tip]::after{display:none}
.sb-collapsed .sb-foot{align-items:stretch}
/* phones: the menu button opens the same sidebar as a drawer, always with names */
@media (max-width:860px){
  .has-sidebar .menu-btn{display:block}
  .has-sidebar .sidebar{display:none}
  .has-sidebar.nav-open .sidebar{display:flex;width:min(320px,86vw);top:var(--top-h);z-index:var(--z-overlay);box-shadow:24px 0 48px -24px rgb(0 0 0 / .5);padding:16px 12px}
  .has-sidebar.nav-open::before{content:'';position:fixed;inset:0;background:rgb(0 0 0 / .4);z-index:calc(var(--z-overlay) - 1)}
  .has-sidebar.nav-open .sb-label{position:static;width:auto;height:auto;clip:auto;overflow:visible}
  .has-sidebar.nav-open .sb-top{justify-content:flex-start;padding:0 12px}
  .has-sidebar.nav-open .sb-chev{display:inline-flex}
  .has-sidebar.nav-open .sb-fold[open] .sb-sub{display:flex;position:static;box-shadow:none;background:none;padding:0 0 0 48px;min-width:0}
  .has-sidebar.nav-open .sb-sub-head,.has-sidebar.nav-open [data-tip]::after{display:none!important}
  .has-sidebar .sb-toggle-form{display:none}
}
@media (max-width:860px){.has-sidebar .top-in{height:64px;padding:0 var(--gutter)}}
.sb-collapsed .sidebar .theme-btn{justify-content:center;padding:0}
/* filter rows sit on one line on wide screens instead of stacking */
.in-app .filters input{flex:1 1 280px;width:auto}
.in-app .filters select{flex:0 1 220px;width:auto}
.in-app .filters .btn{flex:none}

/* =====================================================================================
   Round 24 — console dark mode on a matte dark grey instead of near-black. Public pages keep
   the ink; the lesson player keeps its own dark screen. Tiles and charts step up to stay distinct.
   ===================================================================================== */
html[data-accent=signal][data-theme=dark]:has(body.in-app){
  --black:#1E2124;--booth:#222528;--panel:#26292D;--panel-2:#31353A;--bg-rgb:30 33 36;
  --line:rgb(var(--text-rgb) / .11);--line-2:rgb(var(--text-rgb) / .20)}
html[data-accent=signal][data-theme=dark]:has(body.in-app) body::after{opacity:.025}
html[data-accent=signal][data-theme=dark]:has(body.in-app) :is(.c-none){color:#4A4F56;stroke:#4A4F56;fill:#4A4F56}
html[data-accent=signal][data-theme=dark]:has(body.in-app) .ch-legend .ch-key.c-none{background:#4A4F56}
@media (prefers-color-scheme:dark){
html[data-accent=signal][data-theme=system]:has(body.in-app){
  --black:#1E2124;--booth:#222528;--panel:#26292D;--panel-2:#31353A;--bg-rgb:30 33 36;
  --line:rgb(var(--text-rgb) / .11);--line-2:rgb(var(--text-rgb) / .20)}
html[data-accent=signal][data-theme=system]:has(body.in-app) body::after{opacity:.025}
html[data-accent=signal][data-theme=system]:has(body.in-app) :is(.c-none){color:#4A4F56;stroke:#4A4F56;fill:#4A4F56}
html[data-accent=signal][data-theme=system]:has(body.in-app) .ch-legend .ch-key.c-none{background:#4A4F56}
}
html[data-accent][data-theme]:has(body.in-app) .chart-donut circle.ch-arc,html[data-accent][data-theme]:has(body.in-app) .chart-donut circle.ch-track{fill:none}

/* =====================================================================================
   Round 25 — the whole signal set, not just teal. Each console area has its own colour
   (sidebar icon, current-page marker, the lit bit before the page heading); dashboard cards
   carry a coloured dash; curriculum and playbook kinds are colour-coded; home eyebrows vary.
   Status meaning is unchanged: teal = done, ice = in progress, magenta = missed, orange = act.
   ===================================================================================== */
html[data-accent=signal]{--sg-teal:#14A39A;--sg-ice:#9CC9D9;--sg-yellow:#F2B705;--sg-magenta:#B8478A;--sg-orange:#FF4F1F;--sg-stone:#A3A8AE;
  --sgt-teal:#3CC4BA;--sgt-ice:#9CC9D9;--sgt-yellow:#F2B705;--sgt-magenta:#E58AC0;--sgt-orange:#FF7A52;--sgt-stone:#A3A8AE}
html[data-accent=signal][data-theme=light]{--sg-teal:#0E8A82;--sg-ice:#3E8AA6;--sg-yellow:#B08400;--sg-magenta:#B8478A;--sg-orange:#E8431A;--sg-stone:#6B7178;
  --sgt-teal:#0B6E68;--sgt-ice:#1F5F75;--sgt-yellow:#7A5B00;--sgt-magenta:#93306C;--sgt-orange:#B8340F;--sgt-stone:#5B6168}
@media (prefers-color-scheme:light){html[data-accent=signal][data-theme=system]{--sg-teal:#0E8A82;--sg-ice:#3E8AA6;--sg-yellow:#B08400;--sg-magenta:#B8478A;--sg-orange:#E8431A;--sg-stone:#6B7178;
  --sgt-teal:#0B6E68;--sgt-ice:#1F5F75;--sgt-yellow:#7A5B00;--sgt-magenta:#93306C;--sgt-orange:#B8340F;--sgt-stone:#5B6168}}
/* area colours */
[data-key=dashboard],[data-area=dashboard]{--area:var(--sg-teal)}
[data-key=users],[data-area=users]{--area:var(--sg-ice)}
[data-key=training],[data-area=training]{--area:var(--sg-yellow)}
[data-key=reports],[data-area=reports]{--area:var(--sg-magenta)}
[data-key=connectors],[data-area=connectors]{--area:var(--sg-orange)}
[data-key=logs],[data-area=logs],[data-key=settings],[data-area=settings]{--area:var(--sg-stone)}
[data-key=lessons],[data-area=lessons]{--area:var(--sg-teal)}
html[data-accent=signal] .sidebar .sb-group .sb-top>svg{color:var(--area,currentColor)}
html[data-accent=signal] .sidebar .sb-group.on>.sb-top::before,html[data-accent=signal] .sidebar .sb-top[aria-current=page]::before,
html[data-accent=signal] .sb-collapsed .sb-fold.on>summary::before{background:var(--area,var(--accent))}
html[data-accent=signal] .sidebar .sb-sub a[aria-current=page]{box-shadow:inset 2px 0 0 var(--area,var(--accent))}
html[data-accent=signal] body[data-area] main h1:first-of-type::before{content:'';display:inline-block;width:.34em;height:.34em;margin-right:.32em;background:var(--area);vertical-align:.12em}
/* dashboard and campaign cards: a coloured dash, one colour each */
html[data-accent=signal] .kpis>div{position:relative}
html[data-accent=signal] .kpis>div::before{content:'';position:absolute;left:24px;top:0;width:32px;height:3px;border-radius:0 0 2px 2px;background:var(--kc,var(--sg-teal))}
html[data-accent=signal] .kpis>div:nth-child(4n+1){--kc:var(--sg-teal)}
html[data-accent=signal] .kpis>div:nth-child(4n+2){--kc:var(--sg-magenta)}
html[data-accent=signal] .kpis>div:nth-child(4n+3){--kc:var(--sg-yellow)}
html[data-accent=signal] .kpis>div:nth-child(4n+4){--kc:var(--sg-ice)}
html[data-accent=signal] .kpis.three>div:nth-child(2){--kc:var(--sg-ice)}
html[data-accent=signal] .kpis.three>div:nth-child(3){--kc:var(--sg-magenta)}
/* curriculum and playbook kinds */
html[data-accent=signal] .card.tpl{position:relative}
html[data-accent=signal] .card.tpl::before{content:'';position:absolute;left:28px;top:0;width:32px;height:3px;border-radius:0 0 2px 2px;background:var(--kc,var(--sg-orange))}
html[data-accent=signal] .card.tpl .k{color:var(--kt,var(--sgt-orange))}
.card.tpl[data-kind=onboarding],.card.tpl[data-kind="user.added"]{--kc:var(--sg-teal);--kt:var(--sgt-teal)}
.card.tpl[data-kind=quarterly],.card.tpl[data-kind=manual]{--kc:var(--sg-ice);--kt:var(--sgt-ice)}
.card.tpl[data-kind=yearly]{--kc:var(--sg-yellow);--kt:var(--sgt-yellow)}
.card.tpl[data-kind=remedial],.card.tpl[data-kind="phish.clicked"]{--kc:var(--sg-magenta);--kt:var(--sgt-magenta)}
.card.tpl[data-kind=department]{--kc:var(--sg-orange);--kt:var(--sgt-orange)}
/* home: each section's lit bit in a different signal colour */
html[data-accent=signal] .hs-facts .eyebrow::before{background:#FF4F1F}
html[data-accent=signal] .hs-pause .eyebrow::before{background:#0E8A82}
html[data-accent=signal] .hs-depts .eyebrow::before{background:#B8478A}
html[data-accent=signal] .hs-live .eyebrow::before{background:#B08400}
/* round 27: evidence section — heading on the left above the chart and the figures */
.hs-facts .sg-head{max-width:none}
.hs-facts h2{max-width:22ch}
.hs-facts .sg-head p{max-width:52ch}
.hs-facts .fc-body{margin-top:clamp(20px,2.5vw,36px);align-items:center}
/* round 27: department picker reads as buttons — each team is an outlined row with its lesson
   count and an arrow; the chosen one is filled with an orange edge; a mono prompt sits above */
@media (min-width:861px){
  .dp-tabs{gap:8px}
  .dp-tabs::before{content:'Choose a team';display:block;margin:0 0 6px 2px;font:500 .75rem/1.2 var(--mono,var(--font));text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
  .dp-tab{position:relative;align-items:center;padding:14px 16px 14px 18px;box-shadow:inset 0 0 0 1px rgb(var(--text-rgb) / .16);color:var(--text-2);transition:background .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease)}
  .dp-tab-name{flex:1}
  .dp-tab-n{color:var(--text-3);white-space:nowrap}
  .dp-tab-go{flex:none;width:18px;text-align:right;color:var(--text-3);transition:transform .2s var(--ease),color .2s var(--ease)}
  .dp-tab[aria-selected=true]{color:var(--strong);background:rgb(var(--text-rgb) / .08);box-shadow:inset 3px 0 0 var(--accent),inset 0 0 0 1px rgb(var(--text-rgb) / .22)}
  .dp-tab[aria-selected=true] .dp-tab-n{color:var(--text-2)}
  .dp-tab[aria-selected=true] .dp-tab-go{color:var(--accent);transform:translateX(3px)}
}
@media (min-width:861px) and (hover:hover) and (pointer:fine){
  .dp-tab:hover{color:var(--strong);background:rgb(var(--text-rgb) / .06);box-shadow:inset 0 0 0 1px rgb(var(--text-rgb) / .32)}
  .dp-tab:hover .dp-tab-go{color:var(--text);transform:translateX(3px)}
  .dp-tab[aria-selected=true]:hover{box-shadow:inset 3px 0 0 var(--accent),inset 0 0 0 1px rgb(var(--text-rgb) / .32)}
}
@media (max-width:860px){.dp-tab-go{display:none}.dp-tabs::before{content:none}}
@media (prefers-reduced-motion:reduce){.dp-tab,.dp-tab-go{transition:none}}
@media (min-width:861px){
  .dp{grid-template-columns:300px minmax(0,1fr)}
  .dp-tab{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:3px;align-items:center}
  .dp-tab-name{grid-column:1;grid-row:1}
  .dp-tab-n{grid-column:1;grid-row:2;font-size:.8125rem;font-weight:500}
  .dp-tab-go{grid-column:2;grid-row:1 / span 2}
}
/* round 27: "one morning" timeline replaces the roster circles. Five stops on one line, each a
   signal-coloured lit bit; the last carries the finished bar. Phones: the same stops, stacked. */
.gfx-roster.mt{margin:clamp(28px,3.5vw,44px) 0 0}
.mt-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.mt-line::before{content:'';position:absolute;left:5px;right:0;top:5px;height:2px;background:rgb(var(--text-rgb) / .16)}
.mt-step{position:relative;padding:26px 18px 0 0;display:flex;flex-direction:column;gap:4px}
.mt-step::before{content:'';position:absolute;left:0;top:0;width:12px;height:12px;background:var(--mc,var(--accent))}
.mt-step[data-c=ice]{--mc:#3E8AA6}.mt-step[data-c=yellow]{--mc:#B08400}.mt-step[data-c=orange]{--mc:#FF4F1F}.mt-step[data-c=magenta]{--mc:#B8478A}.mt-step[data-c=teal]{--mc:#0E8A82}
.mt-t{font:500 .75rem/1.2 var(--mono,var(--font));text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.mt-step b{font:700 1.0625rem/1.3 var(--font-head);letter-spacing:-.01em;color:var(--text)}
.mt-s{font-size:.9375rem;line-height:1.45;color:var(--text-2)}
.mt-bar{display:block;height:6px;margin:6px 0 2px;background:rgb(var(--text-rgb) / .12);border-radius:3px;overflow:hidden;max-width:200px}
.mt-fill{display:block;height:100%;width:var(--at,0%);background:var(--mc)}
.js .gfx-roster.mt .mt-fill{width:0;transition:width 1.2s var(--ease) .4s}
.js .gfx-roster.mt.in .mt-fill{width:var(--at,0%)}
.gfx-roster.mt + .lv{margin-top:clamp(36px,4.5vw,56px)}
@media (max-width:860px){
  .mt-line{grid-template-columns:1fr;gap:18px}
  .mt-line::before{left:5px;top:6px;bottom:6px;right:auto;width:2px;height:auto}
  .mt-step{padding:0 0 0 30px}
  .gfx-roster.mt + .lv{margin-top:28px}
}
@media (prefers-reduced-motion:reduce){.js .gfx-roster.mt .mt-fill{transition:none;width:var(--at,0%)}}
/* round 27: price slider drawn by hand so the handle reaches both ends and the fill follows it */
.calc-range input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:28px;padding:0;margin:0;background:transparent;box-shadow:none;border:0;border-radius:0;cursor:pointer;--fill:5%}
.calc-range input[type=range]:hover,.calc-range input[type=range]:focus{box-shadow:none}
.calc-range input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--accent) 0 var(--fill),rgb(var(--text-rgb) / .16) var(--fill) 100%)}
.calc-range input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:rgb(var(--text-rgb) / .16)}
.calc-range input[type=range]::-moz-range-progress{height:8px;border-radius:4px;background:var(--accent)}
.calc-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 4px rgb(0 0 0 / .25)}
.calc-range input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 4px rgb(0 0 0 / .25)}
.calc-range input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid rgb(var(--info-rgb) / .5);outline-offset:2px}
.calc-range input[type=range]:focus-visible::-moz-range-thumb{outline:3px solid rgb(var(--info-rgb) / .5);outline-offset:2px}
/* Enterprise: a real, inviting link instead of a footnote */
.lv-ent{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;width:100%;margin-top:8px;padding:14px 18px;border-radius:14px;text-decoration:none;color:var(--text);box-shadow:inset 0 0 0 1.5px rgb(var(--text-rgb) / .22);transition:box-shadow .2s var(--ease),background .2s var(--ease)}
.lv-ent-k{grid-column:1;font:500 .75rem/1.2 var(--mono,var(--font));text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.lv-ent b{grid-column:1;font:700 1.0625rem/1.3 var(--font-head);margin-top:3px}
.lv-ent-go{grid-column:2;grid-row:1 / span 2;font-size:1.25rem;transition:transform .2s var(--ease)}
.lv-ent:hover{box-shadow:inset 0 0 0 1.5px var(--text);background:rgb(var(--text-rgb) / .04)}
.lv-ent:hover .lv-ent-go{transform:translateX(4px)}
.lv-ent:focus-visible{outline:2px solid var(--info);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.lv-ent,.lv-ent-go{transition:none}}
html[data-accent=signal] .hs-paper .calc-range input[type=range]{background:transparent}
/* round 27: one vertical rhythm for every home section after the hero (closing band included) */
.home > section.hs:not(.h-hero){padding-top:clamp(56px,6vw,80px)!important;padding-bottom:clamp(56px,6vw,80px)!important}
.home > section.hs .h-in > :last-child{margin-bottom:0}
/* round 27: lesson library — one list, filtered by department, track, free and search */
.lib-filter{display:grid;gap:18px;margin:8px 0 28px;padding:20px 22px;border-radius:var(--r-lg);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.lib-k{display:block;font:500 .75rem/1.2 var(--mono,var(--font));text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:8px}
.lib-depts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lib-depts .lib-k{flex-basis:100%;margin-bottom:0}
.lib-chip{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;text-decoration:none;color:var(--text-2);font-size:.9375rem;font-weight:600;box-shadow:inset 0 0 0 1px rgb(var(--text-rgb) / .2);transition:background .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease)}
.lib-chip:hover{color:var(--strong);box-shadow:inset 0 0 0 1px rgb(var(--text-rgb) / .4)}
.lib-chip[aria-current=true]{color:var(--on-accent);background:var(--accent);box-shadow:none}
.lib-chip:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.lib-row{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end}
.lib-field{display:block;min-width:200px}
.lib-grow{flex:1;min-width:240px}
.lib-free{align-self:center;margin-top:20px}
.lib-filter.live .lib-go{display:none}
.lib-kit{margin:0 0 20px;padding:4px 0 4px 18px;box-shadow:inset 3px 0 0 var(--accent)}
.lib-kit-who{margin:0;font-size:.9375rem;color:var(--text-3)}
.lib-kit-hook{margin:4px 0 0;font:700 clamp(1.25rem,1rem + 1vw,1.6rem)/1.25 var(--font-head);letter-spacing:-.02em;color:var(--text)}
.lib-kit-sum{margin:6px 0 0;font-size:.9375rem;color:var(--text-2)}
.lib-count{margin:0 0 6px;font-size:.875rem;color:var(--text-3)}
.lib-list{list-style:none;margin:0;padding:0;columns:2;column-gap:56px}
.lib-item{display:grid;grid-template-columns:2.4ch minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);break-inside:avoid}
.lib-item[hidden]{display:none}
.lib-n{grid-row:1 / span 2;font:500 .8125rem/1.4 var(--mono,var(--font));color:var(--text-3);font-variant-numeric:tabular-nums}
.lib-t{font-weight:600;color:var(--text)}
.lib-t a{color:var(--text)}
.lib-tr{grid-column:2;font-size:.8125rem;color:var(--text-3)}
.lib-m{grid-column:3;grid-row:1;white-space:nowrap;font-size:.875rem;color:var(--text-3);display:flex;gap:8px;align-items:baseline}
.lib-freeb{font:600 .75rem/1 var(--font);padding:4px 8px;border-radius:999px;background:rgb(20 163 154 / .18);color:#3CC4BA}
.lib-none{margin:24px 0;color:var(--text-2)}
@media (max-width:860px){.lib-list{columns:1}.lib-filter{padding:16px}.lib-field,.lib-grow{min-width:0;flex:1 1 100%}.lib-free{margin-top:0}}
/* round 27: Security page — four plain promises, then how to reach us */
.trust-points{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.trust-points li{position:relative;padding:28px 0 28px 30px;border-top:1px solid var(--line)}
.trust-points li::before{content:'';position:absolute;left:0;top:36px;width:12px;height:12px;background:var(--tc,#14A39A)}
.trust-points li[data-c=ice]{--tc:#9CC9D9}.trust-points li[data-c=yellow]{--tc:#F2B705}.trust-points li[data-c=magenta]{--tc:#B8478A}
.trust-points h2{margin:0 0 8px;font-size:clamp(1.25rem,1rem + .8vw,1.5rem)}
.trust-points p{margin:0;color:var(--text-2);max-width:46ch}
.trust-foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 56px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line-2)}
.trust-foot h2{margin:0 0 8px;font-size:1.125rem}
.trust-foot p{margin:0;color:var(--text-2)}
@media (max-width:860px){.trust-points,.trust-foot{grid-template-columns:1fr}}
/* round 28: legal pages */
.legal .legal-meta{margin:0 0 8px;font:500 .75rem/1.2 var(--mono,var(--font));text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.legal-toc{margin:28px 0 8px;padding:18px 22px;border-radius:var(--r);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.legal-toc-k{margin:0 0 8px;font:500 .75rem/1.2 var(--mono,var(--font));text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.legal-toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px}
.public .legal-toc li{margin:0 0 6px;font-size:.9375rem;break-inside:avoid}
.legal section{scroll-margin-top:90px}
.legal-tbl{margin:12px 0 16px;width:100%}
.legal-tbl td{padding:10px 12px 10px 0;vertical-align:top;font-size:.9375rem;color:var(--text-2);border-bottom:1px solid var(--line)}
@media (max-width:640px){.legal-toc ol{columns:1}.legal-tbl{display:block;overflow-x:auto}}
.public .prose.legal .legal-meta,.public .prose.legal .legal-toc-k{font-size:.75rem;line-height:1.2}
.legal-toc ol{list-style:none;padding-left:0}
.form-switch{margin:14px 0 0}

/* ===== round 30: lesson library (list / tiles), trial home, demo form, campaign lessons ===== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.h-sm{font-size:1.05rem;margin:0 0 6px}
.field-note{display:block;font-size:.85rem;color:var(--text-3);margin-top:6px;font-weight:400}
input[aria-invalid="true"],select[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--ember)!important}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-page textarea{width:100%;font:inherit;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);resize:vertical}

.ml-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0 6px}
.ml-field input,.ml-field select{min-height:42px}
.ml-grow{flex:1 1 260px}.ml-grow input{width:100%}
.ml-views{display:inline-flex;margin-left:auto;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);padding:3px}
.ml-view{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border-radius:999px;text-decoration:none;color:var(--text-2);font-weight:600;font-size:.9rem}
.ml-view svg{width:15px;height:15px;fill:currentColor}
.ml-view[aria-pressed="true"]{background:var(--text);color:var(--panel)}
.ml-view:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.js .ml-go{display:none}
.ml-count{margin:4px 0 14px}
.ml-items{list-style:none;margin:0;padding:0}
.ml-item{position:relative}
.ml-item[hidden]{display:none}
.ml-link{text-decoration:none;color:inherit;display:grid}
.ml-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
.ml-t strong{display:block;font-weight:650}
.ml-sub{display:block;color:var(--text-3);font-size:.875rem;line-height:1.35}
.ml-tr{color:var(--text-2);font-size:.875rem}
.ml-watch{font-weight:600;color:var(--accent)}
.ml-done{font-weight:600;color:var(--sage);font-size:.875rem}
.ml-img{position:relative;display:block;overflow:hidden;background:#111}
.ml-img img{display:block;width:100%;height:100%;object-fit:cover}
.ml-dur{position:absolute;right:8px;bottom:8px;background:rgb(0 0 0 / .72);color:#fff;font-size:.75rem;font-weight:600;padding:3px 7px;border-radius:6px}
/* tiles */
.ml-items.is-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px 18px}
.is-tiles .ml-link{grid-template-columns:1fr;gap:6px}
.is-tiles .ml-img{aspect-ratio:16/9;border-radius:10px}
.is-tiles .ml-link:hover .ml-img img{transform:scale(1.03)}
.is-tiles .ml-img img{transition:transform .5s var(--ease)}
.is-tiles .ml-n{font-size:.75rem;color:var(--text-3);font-variant-numeric:tabular-nums;letter-spacing:.06em;margin-top:4px}
.is-tiles .ml-st{font-size:.875rem}
.is-tiles .ml-sub{display:none}
.is-tiles .ml-pick{position:absolute;top:8px;left:8px}
/* list */
.ml-items.is-list{border-top:1px solid var(--line)}
.is-list .ml-item{border-bottom:1px solid var(--line)}
.is-list .ml-link{grid-template-columns:96px 34px minmax(0,1fr) 190px 96px;align-items:center;gap:16px;padding:10px 4px 10px 40px}
.is-list .ml-img{aspect-ratio:16/9;border-radius:6px}
.is-list .ml-dur{display:none}
.is-list .ml-n{color:var(--text-3);font-variant-numeric:tabular-nums}
.is-list .ml-st{text-align:right}
.is-list .ml-link:hover{background:rgb(var(--text-rgb) / .04)}
.is-list .ml-pick{position:absolute;left:8px;top:50%;transform:translateY(-50%)}
.ml-items:not(:has(.ml-pick)).is-list .ml-link{padding-left:4px}
.ml-pick input{width:20px;height:20px;accent-color:var(--accent);cursor:pointer}
.is-tiles .ml-pick input{box-shadow:0 0 0 3px rgb(0 0 0 / .35);border-radius:4px}
.ml-item.is-done .ml-img::after{content:"✓";position:absolute;left:8px;bottom:8px;width:24px;height:24px;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:700}
.ml-empty{padding:24px 0;color:var(--text-2)}
.ml-tray{position:sticky;bottom:16px;display:flex;align-items:center;gap:12px;margin-top:18px;padding:10px 12px 10px 20px;border-radius:999px;background:var(--panel);box-shadow:0 8px 30px rgb(0 0 0 / .18),inset 0 0 0 1px var(--line);width:max-content;max-width:100%}
.ml-tray[hidden]{display:none}
@media (max-width:760px){
  .is-list .ml-link{grid-template-columns:72px minmax(0,1fr) auto;gap:12px}
  .is-list .ml-n,.is-list .ml-tr{display:none}
  .ml-views{margin-left:0}
  .ml-items.is-tiles{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px 12px}
}
/* trial home */
.th-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:40px;align-items:start;margin-bottom:28px}
.th-me{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;padding:20px 22px;border-radius:12px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.th-me dt{color:var(--text-3);font-size:.875rem}.th-me dd{margin:0;font-weight:550;overflow-wrap:anywhere}
.th-me .bar{display:block;width:100%;height:6px;margin-top:6px}
.th-next{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 40px}
.th-opt{padding:20px 22px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.th-opt p{color:var(--text-2);margin:0 0 14px}
.th .eyebrow{font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
@media (max-width:860px){.th-head,.th-next{grid-template-columns:1fr;gap:20px}}
/* lessons on a campaign page */
.camp-lessons{margin:18px 0 26px}
.lesson-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.lesson-links a{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center;padding:8px 14px 8px 8px;border-radius:10px;text-decoration:none;color:inherit;box-shadow:inset 0 0 0 1px var(--line)}
.lesson-links a:hover{background:rgb(var(--text-rgb) / .04)}
.lesson-links img{width:96px;height:54px;object-fit:cover;border-radius:6px;display:block}
.lesson-links strong{display:block}
.ll-play{font-weight:600;color:var(--accent);font-size:.9rem}
.pv-note{margin:-4px 0 14px}
.ml-pick{display:block;margin:0;padding:0;gap:0;line-height:0}
.ml-pick input{min-height:auto;width:20px;height:20px;padding:0;margin:0;border-radius:4px;box-shadow:none;background:none;accent-color:var(--accent)}
.ml-pick input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lesson-links .fine{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lesson-links a>span:nth-child(2){min-width:0}

/* round 31: eye wordmark */
.brand .wordmark{display:block;height:27px;width:auto;color:var(--strong)}
@media (max-width:760px){.brand .wordmark{height:24px}}
/* round 32: evidence section rebalanced. Heading left, intro right, on the same two columns as
   the chart and the figures below, so everything shares one left edge and one middle line. The
   chart starts level with the first figure and runs the height of all three. */
@media (min-width:861px){
  .hs-facts .sg-head{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,7vw,120px);align-items:end}
  .hs-facts h2{max-width:16ch}
  .hs-facts .sg-head p{margin:0;max-width:44ch;padding-bottom:.35em}
  .hs-facts .fc-body{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,7vw,120px);align-items:stretch;margin-top:clamp(48px,5vw,72px);padding-top:clamp(36px,4vw,52px);border-top:1px solid rgb(var(--text-rgb) / .1)}
  .hs-facts .gfx-chart{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;margin:0}
  .hs-facts .gfx-chart svg{width:100%;height:auto;display:block}
  .hs-facts .facts{margin-top:0;display:flex;flex-direction:column;justify-content:space-between}
  .hs-facts .facts li{padding:22px 0}
  .hs-facts .facts li:first-child{padding-top:0}
  .hs-facts .facts li:last-child{padding-bottom:0}
}
@media (max-width:860px){
  .hs-facts .fc-body{margin-top:32px}
}
@media (min-width:861px){
  .hs-facts h2{max-width:none;font-size:clamp(2rem,3.5vw,3.25rem)}
  .hs-facts h2 .fc-l{display:block;white-space:nowrap}
  .hs-facts .gfx-chart{justify-content:flex-end;gap:18px}
}
/* round 32: the department diagram IS the picker. Seven pills on one line, each with the scam
   aimed at it on a dashed stem (alternating above and below). The chosen pill fills in orange and
   its stem and scam light up; the kit opens full width underneath. */
.dk{margin-top:clamp(40px,5vw,64px)}
.dk-map{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1.4vw,22px)}
.dk-map::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgb(var(--text-rgb) / .14)}
.dk-col{position:relative;display:grid;grid-template-rows:44px 56px 50px 56px 44px;justify-items:center;align-items:center}
.dk-ask{font-size:.95rem;line-height:1.25;color:var(--text-3);text-align:center;white-space:nowrap;transition:color .25s var(--ease)}
.dk-stem{width:0;height:100%;border-left:1.5px dashed rgb(var(--moment-rgb) / .55);position:relative;transition:border-color .25s var(--ease)}
.dk-stem::after{content:"";position:absolute;left:-4.5px;width:7.5px;height:7.5px;border-radius:50%;background:rgb(var(--moment-rgb) / .7)}
.is-up .dk-ask{grid-row:1}.is-up .dk-stem{grid-row:2}.is-up .dk-stem::after{bottom:-2px}
.is-dn .dk-ask{grid-row:5}.is-dn .dk-stem{grid-row:4}.is-dn .dk-stem::after{top:-2px}
.dk-pill{grid-row:3;position:relative;z-index:1;width:100%;min-height:50px;padding:0 10px;border-radius:999px;border:1px solid rgb(var(--moment-rgb) / .5);background:color-mix(in srgb,var(--moment) 16%,var(--booth));color:var(--text);font:600 1rem/1.15 var(--font);cursor:pointer;white-space:nowrap;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.dk-pill:hover{border-color:var(--moment);transform:translateY(-1px)}
.dk-pill:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.dk-pill[aria-selected="true"]{background:var(--moment);border-color:var(--moment);color:#fff}
.dk-col:has(.dk-pill[aria-selected="true"]) .dk-ask{color:var(--text)}
.dk-col:has(.dk-pill[aria-selected="true"]) .dk-stem{border-left-style:solid;border-left-color:var(--moment)}
.dk-col:has(.dk-pill[aria-selected="true"]) .dk-stem::after{background:var(--moment)}
.dk .dp-panels{margin-top:clamp(36px,4vw,56px);padding-top:clamp(32px,4vw,48px);border-top:1px solid rgb(var(--text-rgb) / .1)}
@media (min-width:861px){
  .dk .dp-panel:not([hidden]){display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);column-gap:clamp(40px,7vw,120px);grid-template-rows:auto auto auto 1fr;align-items:start}
  .dk .dp-panel > *{grid-column:1}
  .dk .dp-index{grid-column:2;grid-row:1 / span 5;margin:0;columns:1}
  .dk .dp-panel > .btn{margin-top:28px;justify-self:start}
}
@media (max-width:1100px) and (min-width:861px){.dk-ask{font-size:.82rem;white-space:normal}.dk-pill{font-size:.9rem}}
/* phones: the line becomes a scrollable row of pills; the scam shows in the kit below */
@media (max-width:860px){
  .dk-map{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 6px}
  .dk-map::-webkit-scrollbar{display:none}
  .dk-map::before{display:none}
  .dk-col{display:block;flex:none}
  .dk-ask,.dk-stem{display:none}
  .dk-pill{width:auto;min-height:44px;padding:0 18px}
  .dk .dp-panels{margin-top:24px;padding-top:24px}
}
/* round 32: Enterprise leads in the price block (the trial button already appears across the page) */
.lv-ent.is-primary{margin-top:6px;padding:18px 22px;background:var(--tungsten);color:var(--tungsten-ink);box-shadow:none}
.lv-ent.is-primary .lv-ent-k{color:var(--tungsten-ink);opacity:.72}
.lv-ent.is-primary b{font-size:1.1875rem}
.lv-ent.is-primary:hover{background:var(--tungsten-hi, var(--tungsten));box-shadow:none;transform:translateY(-1px)}
.lv-trial{margin:14px 0 0;font-size:.9688rem;color:var(--text-2)}
.lv-trial a{color:var(--text);font-weight:600;text-underline-offset:3px}
/* round 32: no lesson numbers next to lesson names (kit lists, public library, console/trial library) */
.dp-index li::before{content:none;display:none}
.lib-n,.ml-n{display:none}
.is-list .ml-link{grid-template-columns:96px minmax(0,1fr) 190px 96px}
@media (max-width:760px){.is-list .ml-link{grid-template-columns:72px minmax(0,1fr) auto}}
.lib-item{grid-template-columns:minmax(0,1fr) auto}
.lib-t,.lib-tr{grid-column:1}
.lib-m{grid-column:2}
/* round 32: submenu rows are the same width as their parent row (same left edge, same rounding),
   with the text indented to sit under the parent's label, so opening a group reads as one block */
.sb-sub,.sb-fold .sb-sub{padding:0}
.sb-sub a{display:flex;align-items:center;min-height:40px;padding:0 12px 0 46px;border-radius:12px;font-size:.9063rem}
.sb-sub a[aria-current=page]{box-shadow:inset 3px 0 0 var(--accent)}
.sb-collapsed .sb-fold:hover .sb-sub a,.sb-collapsed .sb-fold:focus-within .sb-sub a{padding:0 12px;border-radius:8px}
@media (max-width:860px){.has-sidebar.nav-open .sb-fold[open] .sb-sub{padding:0}}
/* round 33: compact picker so the kit is visible right under it (about half the old height) */
@media (min-width:861px){
  .dk{margin-top:clamp(28px,3vw,40px)}
  .dk-col{grid-template-rows:26px 18px 46px 18px 26px}
  .dk-ask{font-size:.875rem}
  .dk-pill{min-height:46px;font-size:.9688rem}
  .dk .dp-panels{margin-top:22px;padding-top:28px}
  .dk .dp-hook{font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem)}
  .dk .dp-index{margin:0}
  .dk .dp-index li{padding:10px 0}
}
/* round 33: compact footer. Brand and line on the left, two short link rows on the right, one
   copyright line. About a third of the old height; security.txt stays at its standard address
   for researchers but is no longer linked on the page. */
.foot-in{padding:clamp(36px,4vw,52px) var(--gutter) 28px;grid-template-columns:minmax(0,1fr) auto;gap:20px 48px;align-items:start}
.foot-brand{display:flex;flex-direction:column;gap:12px}
.foot-brand .wordmark{display:block;height:24px;width:auto;color:var(--strong)}
.foot .tag{margin:0;font-size:.9688rem;max-width:34ch}
.foot-nav{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.foot-nav ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 26px;list-style:none;margin:0;padding:0}
.foot-nav li{margin:0}
.foot-nav a{font-size:.9375rem}
.foot-nav ul+ul a{color:var(--text-3)}
.foot-copy{grid-column:1/-1;margin:8px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--text-3)}
@media (max-width:860px){
  .foot-in{grid-template-columns:1fr;gap:22px}
  .foot-nav{align-items:flex-start}
  .foot-nav ul{justify-content:flex-start;gap:8px 20px}
}
/* round 34: footer holds only what the top menu doesn't (demo, legal, contact), in one row */
.foot-nav{align-self:center}
.foot-nav a{color:var(--text-2)}
.foot-copy{margin-top:4px;padding-top:16px}
.foot-in{padding:32px var(--gutter) 22px;row-gap:16px}
.foot .tag{max-width:none}
.foot-brand{gap:8px}
/* round 35: smaller picker + tighter kit so the pills and the whole kit fit in one window */
@media (min-width:861px){
  .dk-col{grid-template-rows:20px 12px 36px 12px 20px}
  .dk-ask{font-size:.8125rem}
  .dk-pill{width:auto;min-width:min(100%,104px);max-width:100%;min-height:36px;padding:0 16px;font-size:.875rem}
  .dk-stem::after{width:6px;height:6px;left:-3.75px}
  .dk .dp-panels{margin-top:16px;padding-top:20px}
  .dk .dp-who{font-size:.875rem}
  .dk .dp-hook{margin-top:6px;font-size:clamp(1.3rem,.95rem + 1vw,1.75rem)}
  .dk .dp-sum{margin-top:12px;font-size:.875rem}
  .dk .dp-panel > .btn{margin-top:18px}
  .dk .dp-index li{padding:7px 0;font-size:.9375rem}
}
@media (min-width:861px){.dk-ask{white-space:nowrap}}
/* round 36: Enterprise call to action as the site's standard button, with a quiet sentence under it */
.lv-cta{margin-top:22px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.lv-note{margin:0;max-width:44ch;font-size:.9375rem;line-height:1.55;color:var(--text-2)}
.lv-note a{color:var(--text);font-weight:600;text-underline-offset:3px}
.lv-note a{white-space:nowrap}
/* round 36: each setup step gets an icon tile instead of a plain square */
.mt-step::before{content:none}
.mt-line::before{top:19px;left:20px}
.mt-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--mc,var(--accent));color:#fff;position:relative;z-index:1;margin-bottom:12px;box-shadow:0 0 0 6px var(--black)}
.mt-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mt-step{padding-top:0}
@media (max-width:860px){
  .mt-line::before{left:19px;top:20px;bottom:20px}
  .mt-step{padding:0 0 0 58px;min-height:40px}
  .mt-ic{position:absolute;left:0;top:0;margin:0}
}

/* ===== round 37: contextual help ===== */
.lab{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.hint{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;margin-left:6px;padding:0;border:0;border-radius:50%;background:rgb(var(--text-rgb) / .1);color:var(--text-2);font:700 11px/1 var(--font);cursor:pointer;vertical-align:.12em;transition:background .15s ease-out,color .15s ease-out}
.lab .hint{margin-left:0}
.hint:hover,.hint:focus-visible{background:rgb(var(--info-rgb) / .22);color:var(--strong)}
.hint:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.hint.is-static{cursor:default;vertical-align:.1em}
h1 .hint,h2 .hint,h3 .hint,legend .hint{vertical-align:.25em}
.hint-pop{position:fixed;inset:auto;margin:0;max-width:calc(100vw - 24px);padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);color:var(--text-2);box-shadow:0 18px 48px -12px rgb(0 0 0 / .45);font:400 .875rem/1.5 var(--font);text-align:left;text-transform:none;letter-spacing:normal}
.hint-pop:popover-open{display:flex;flex-direction:column;gap:6px}
.hint-pop strong{color:var(--strong);font-weight:650;font-size:.9063rem}
.hint-pop a{margin-top:4px;font-weight:600;font-size:.8125rem;color:var(--info)}
@media (prefers-reduced-motion:no-preference){.hint-pop:popover-open{animation:hintin .16s cubic-bezier(.22,1,.36,1)}}
@keyframes hintin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* help page */
.help .lede{max-width:64ch}
.help-bar{margin:20px 0 12px;max-width:560px}
.help-search input{width:100%}
.help-toc{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 8px;font-size:.875rem}
.help-toc a{color:var(--text-2);text-decoration:none}
.help-toc a:hover{color:var(--strong)}
.help-area{margin-top:36px;scroll-margin-top:90px}
.help-area[hidden]{display:none}
.help-area h2{font-size:1.125rem;margin:0 0 6px}
.help-list{margin:0;border-top:1px solid var(--line)}
.help-item{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:8px 32px;padding:16px 0;border-bottom:1px solid var(--line);scroll-margin-top:90px}
.help-item[hidden]{display:none}
.help-item:target{background:rgb(var(--info-rgb) / .08);box-shadow:-12px 0 0 rgb(var(--info-rgb) / .08),12px 0 0 rgb(var(--info-rgb) / .08)}
.help-item dt{font-weight:650;color:var(--strong)}
.help-item dd{margin:0;max-width:72ch;color:var(--text-2);line-height:1.6}
.help-item dd p{margin:0}
.help-item dd p+p{margin-top:6px}
.help-s{color:var(--text)}
.help-contact{margin-top:40px;max-width:560px}
@media (max-width:760px){.help-item{grid-template-columns:1fr}}

/* ===== round 37: console system — one type scale, one control height, one spacing rhythm =====
   type: 28 / 19 / 16 / 15 / 14 / 13 · controls 40px (34px small) · radius 10 controls, 14 panels
   spacing: 8 · 12 · 16 · 24 · 40 · 56 */
html[data-accent] .in-app main{padding-top:40px;padding-bottom:72px}
html[data-accent] .in-app main>section,html[data-accent] .in-app main>.wrap>section{max-width:1180px}
html[data-accent] .in-app h1{font-size:1.75rem;line-height:1.2;letter-spacing:-.015em;font-weight:650;text-wrap:balance}
html[data-accent] .in-app h2{font-size:1.1875rem;line-height:1.3;letter-spacing:-.005em;font-weight:650;margin:0 0 12px}
html[data-accent] .in-app h3{font-size:1rem;line-height:1.35;font-weight:650;margin:0 0 8px}
html[data-accent] .in-app section>h2:not(:first-child),html[data-accent] .in-app section>*+h2{margin-top:40px}
html[data-accent] .in-app section>h3:not(:first-child){margin-top:28px}
html[data-accent] .in-app .card h2{font-size:1.0625rem;margin:0 0 14px}
html[data-accent] .in-app .page-head{gap:10px 12px;margin-bottom:20px;min-height:40px}
html[data-accent] .in-app .lede{font-size:1rem;line-height:1.6;color:var(--text-2);max-width:68ch;margin:0 0 24px}
html[data-accent] .in-app p{max-width:72ch}
html[data-accent] .in-app .fine,html[data-accent] .in-app .opt-l{font-size:.8125rem;line-height:1.55;color:var(--text-3)}
html[data-accent] .in-app .opt-l{font-weight:400}
html[data-accent] .in-app .crumb{font-size:.8125rem;margin:0 0 8px}
html[data-accent] .in-app .crumb a{color:var(--text-3);text-decoration:none}
html[data-accent] .in-app .crumb a::before{content:'← '}
html[data-accent] .in-app .crumb a:hover{color:var(--strong)}
html[data-accent] body[data-area] main h1:first-of-type::before{width:.32em;height:.32em;margin-right:.4em;vertical-align:.14em;border-radius:2px}
/* panels */
html[data-accent] .in-app .card{padding:24px;border-radius:14px;margin-bottom:16px}
html[data-accent] .in-app .two{gap:16px;margin:20px 0 28px}
html[data-accent] .in-app .two.wide-gap{gap:40px}
/* forms */
html[data-accent] .in-app label{gap:6px;font-size:.875rem;font-weight:600;color:var(--text)}
html[data-accent] .in-app .stack{gap:16px}
html[data-accent] .in-app input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),html[data-accent] .in-app select{min-height:40px;height:40px;padding:0 12px;border-radius:10px;font-size:.9375rem}
html[data-accent] .in-app textarea{padding:10px 12px;border-radius:10px;font-size:.9375rem;line-height:1.5}
html[data-accent] .in-app input[type=file]{min-height:40px;padding:6px 8px;border-radius:10px;font-size:.875rem}
html[data-accent] .in-app input[type=file]::file-selector-button{margin-right:10px;padding:6px 12px;border:0;border-radius:7px;background:rgb(var(--text-rgb) / .1);color:var(--text);font:600 .8125rem var(--font);cursor:pointer}
html[data-accent] .in-app label.check{font-weight:400;font-size:.9375rem;padding:6px 0;gap:10px;align-items:center}
html[data-accent] .in-app label.check input{margin-top:0;width:17px;height:17px}
html[data-accent] .in-app .inline-form{gap:10px;align-items:flex-end;margin:12px 0}
html[data-accent] .in-app .inline-form label{flex:1 1 220px;max-width:360px}
html[data-accent] .in-app fieldset{margin:28px 0 0;padding:0;border:0}
html[data-accent] .in-app legend{padding:0;margin:0 0 10px;font-size:1rem;font-weight:650;color:var(--strong)}
html[data-accent] .in-app .narrowish{max-width:520px}
/* buttons: one shape, two sizes */
html[data-accent] .in-app .btn{--h:40px;padding:0 18px;font-size:.9063rem;font-weight:600;gap:8px;border-radius:10px}
html[data-accent] .in-app .btn.sm{--h:34px;padding:0 14px;font-size:.8438rem;border-radius:9px}
html[data-accent] .in-app .btn .ico{width:auto;height:auto;background:none}
html[data-accent] .in-app .btn:active{transform:translateY(1px)}
html[data-accent] .in-app .cta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:20px 0}
html[data-accent] .in-app .cta form.inline{display:inline-flex}
html[data-accent] .in-app .hint+form,html[data-accent] .in-app .btn+.hint{margin-left:-2px}
/* tables */
html[data-accent] .in-app .tbl{font-size:.9063rem;margin:8px 0 24px}
html[data-accent] .in-app .tbl th{padding:10px 16px 10px 0;font-size:.6875rem;letter-spacing:.06em;color:var(--text-3);white-space:nowrap}
html[data-accent] .in-app .tbl th .hint{vertical-align:0;width:16px;height:16px;font-size:10px;margin-left:4px}
html[data-accent] .in-app .tbl td{padding:12px 16px 12px 0}
html[data-accent] .in-app .tbl.small td{padding:10px 16px 10px 0}
html[data-accent] .in-app .tbl a:not(.btn){color:var(--strong);text-decoration:none;font-weight:550}
html[data-accent] .in-app .tbl a:not(.btn):hover{text-decoration:underline;text-underline-offset:3px}
html[data-accent] .in-app .tbl td.acts{text-align:right;white-space:nowrap}
html[data-accent] .in-app .tbl td.acts form{display:inline;margin:0}
html[data-accent] .in-app .tbl td.acts a,html[data-accent] .in-app .tbl td.acts .linklike,html[data-accent] .in-app .act{margin:0 0 0 14px;font:600 .8438rem/1.4 var(--font);color:var(--text-2);text-decoration:none}
html[data-accent] .in-app .tbl td.acts a:hover,html[data-accent] .in-app .tbl td.acts .linklike:hover{color:var(--strong)}
/* KPIs: quieter numbers, same rhythm as panels */
html[data-accent] .in-app .kpis{gap:12px;margin:4px 0 32px}
html[data-accent] .in-app .kpis>div{padding:18px 20px 16px;border-radius:14px}
html[data-accent] .in-app .kpis .k{display:flex;align-items:center;font-size:.6875rem}
html[data-accent] .in-app .kpis .k .hint{width:16px;height:16px;font-size:10px;margin-left:6px}
html[data-accent] .in-app .kpis .v{font-size:2rem;margin:10px 0 4px}
html[data-accent] .in-app .kpis .d{font-size:.8125rem;line-height:1.45}
/* status chips and pills */
html[data-accent] .in-app .pill{font-size:.75rem;padding:5px 10px;font-weight:600}
html[data-accent] .in-app .st{font-size:.75rem;padding:4px 9px}
/* flashes */
html[data-accent] .in-app .flash{padding:12px 16px;border-radius:10px;margin:0 0 20px;font-size:.9375rem}
/* expanders */
html[data-accent] .in-app details.more{margin:16px 0}
html[data-accent] .in-app details.more>summary{font-size:.9063rem;font-weight:600;color:var(--text-2);cursor:pointer}
html[data-accent] .in-app details.more>summary:hover{color:var(--strong)}
/* pickers */
html[data-accent] .in-app .people-pick{gap:0 20px;padding-left:28px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
html[data-accent] .in-app .kit-btns{gap:8px}
@media (prefers-reduced-motion:reduce){html[data-accent] .in-app .btn:active{transform:none}}
html[data-accent] .in-app .cta .hint{margin-left:-2px}
html[data-accent] .in-app .inline-form label:has(input[type=date]){flex:0 1 220px}
.ll-play{color:var(--text-2)!important}
.lesson-links a:hover .ll-play{color:var(--strong)!important}
[data-key=help],[data-area=help]{--area:var(--sg-stone)}
html[data-accent] .in-app fieldset{margin-top:24px}
/* round 37: less orange on the home page. Orange is kept for the main calls to action only. */
.hs-facts{--chart:#2FA79E}
.hs-facts .lc-curve{stroke:var(--chart)}
.hs-facts .lc-pt{stroke:var(--chart)}
.hs-facts .lc-pt.is-last{fill:var(--chart)}
.hs-facts .lc-sub{fill:var(--chart)}
/* department picker: each department has its own color */
.dk-col{--dc:#8C939B;--dct:#0F1114}
.dk-col:has(#dk-tab-everyone){--dc:#2FA79E}
.dk-col:has(#dk-tab-executives){--dc:#5B9BD5}
.dk-col:has(#dk-tab-finance){--dc:#D2A93A}
.dk-col:has(#dk-tab-hr){--dc:#C25A9B;--dct:#fff}
.dk-col:has(#dk-tab-it){--dc:#7B86E0;--dct:#fff}
.dk-col:has(#dk-tab-marketing){--dc:#98B04A}
.dk-col:has(#dk-tab-frontdesk){--dc:#5BAE73}
.dk-stem{border-left-color:color-mix(in srgb,var(--dc) 70%,transparent)}
.dk-stem::after{background:var(--dc)}
.dk-pill{border-color:color-mix(in srgb,var(--dc) 55%,transparent);background:color-mix(in srgb,var(--dc) 13%,var(--booth))}
.dk-pill:hover{border-color:var(--dc)}
.dk-pill[aria-selected="true"]{background:var(--dc);border-color:var(--dc);color:var(--dct)}
.dk-col:has(.dk-pill[aria-selected="true"]) .dk-stem{border-left-color:var(--dc)}
.dk-col:has(.dk-pill[aria-selected="true"]) .dk-stem::after{background:var(--dc)}
.dk:has(#dk-tab-everyone[aria-selected="true"]) .dp-panels{--dc:#2FA79E}
.dk:has(#dk-tab-executives[aria-selected="true"]) .dp-panels{--dc:#5B9BD5}
.dk:has(#dk-tab-finance[aria-selected="true"]) .dp-panels{--dc:#D2A93A}
.dk:has(#dk-tab-hr[aria-selected="true"]) .dp-panels{--dc:#C25A9B}
.dk:has(#dk-tab-it[aria-selected="true"]) .dp-panels{--dc:#7B86E0}
.dk:has(#dk-tab-marketing[aria-selected="true"]) .dp-panels{--dc:#98B04A}
.dk:has(#dk-tab-frontdesk[aria-selected="true"]) .dp-panels{--dc:#5BAE73}
.dk .dp-panels{border-top-color:color-mix(in srgb,var(--dc,#888) 45%,transparent)}
.ml-watch{color:var(--text-2)}
.ml-link:hover .ml-watch{color:var(--strong)}

/* round 38 — orange reserved for "Start free trial" and the logo dot */
.mt-step[data-c=orange]{--mc:#6C72D9}
.h-hook-mkt{color:#6FD3C8}
.h-ctas .btn[href^="/try"]:not(.ghost){background:#fff;color:#0F1114;box-shadow:none}
.h-ctas .btn[href^="/try"]:not(.ghost):hover{background:#E8ECEF;color:#0F1114;box-shadow:0 0 0 5px rgb(255 255 255 / .14)}
.lv-cta .btn{background:var(--strong);color:var(--black,#0F1114)}
.lv-cta .btn:hover{background:var(--text-2);color:var(--black,#0F1114);box-shadow:0 0 0 5px rgb(var(--text-rgb) / .1)}
.calc-range{--accent:#1E9B92}

/* round 40 — form submits: sized to their label, neutral ink (orange stays on "Start free trial" calls to action) */
html .form-page form .btn,html[data-accent] .form-page form .btn{align-self:flex-start;--h:46px;min-height:46px;padding:0 8px 0 22px;font-size:.9375rem;background:var(--strong);color:var(--black);box-shadow:none}
html .form-page form .btn:not(.arrow),html[data-accent] .form-page form .btn:not(.arrow){padding:0 22px}
html .form-page form .btn:hover,html[data-accent] .form-page form .btn:hover{background:var(--text-2);color:var(--black);box-shadow:0 0 0 4px rgb(var(--text-rgb) / .1)}
html .form-page form .btn .ico,html[data-accent] .form-page form .btn .ico{width:30px;height:30px;background:rgb(var(--bg-rgb) / .14)}
html .form-page form .btn:focus-visible{outline:2px solid var(--strong);outline-offset:3px}
html .form-page .cta .btn,html[data-accent] .form-page .cta .btn{--h:46px;min-height:46px;padding:0 8px 0 22px;font-size:.9375rem;background:var(--strong);color:var(--black);box-shadow:none}
html .form-page .cta .btn:hover,html[data-accent] .form-page .cta .btn:hover{background:var(--text-2);color:var(--black)}
html .form-page .cta .btn .ico,html[data-accent] .form-page .cta .btn .ico{width:30px;height:30px;background:rgb(var(--bg-rgb) / .14)}
html .bigplay,html[data-accent] .bigplay{background:#fff;color:#0F1114;box-shadow:0 10px 30px -8px rgb(0 0 0 / .5)}
html .bigplay::before{background-color:rgb(15 17 20 / .08)}
html[data-accent] .top nav a[aria-current=page]:not(.btn){box-shadow:inset 0 -2px 0 var(--strong)}

/* round 40 — an open sidebar section reads as one continuous panel: no gap, no edge line on the current item */
html .sidebar .sb-fold[open].on{background:rgb(var(--text-rgb) / .05);border-radius:12px}
html .sidebar .sb-fold[open].on>summary,html .sidebar .sb-fold[open].on>summary:hover{background:none}
html .sidebar .sb-fold[open] .sb-sub{margin:0;padding:0 0 6px;gap:2px}
html .sidebar .sb-sub a[aria-current=page],html[data-accent] .sidebar .sb-sub a[aria-current=page]{box-shadow:none;background:rgb(var(--text-rgb) / .08);color:var(--strong);font-weight:600}
html .sidebar .sb-fold[open] .sb-sub a{margin:0 6px;padding-left:40px}
html .sidebar .sb-fold[open].on>summary::before,html[data-accent] .sidebar .sb-fold[open].on>summary::before{display:none}
html .sidebar .sb-fold[open] .sb-sub a{padding-left:42px}