/* aangine.com · site design system · v2026.10
   Layout: the live explainer scenes are the ground of each hero, full-bleed, with copy in the left column on a shade;
   content sections alternate ground and alt bands. Two themes: dark (the aangine dark palette, the default look)
   and light (the brand's light graphics). Every color below is a token; the theme follows the device
   (prefers-color-scheme) unless the visitor picks one with the header switch (html[data-theme], stored per browser).
   Dark "stage" panels pin the dark tokens in both themes: the film dialog (.film), brand-gradient panels, and .dk
   (build.py adds it to every .tile that holds a film clip, video.clip).
   Tokens follow the aangine web-scenes kit. */

/* ── theme-independent tokens ── */
:root{
  --brand:linear-gradient(100deg,#5E3D9F,#E05A2C);
  --brand-btn:linear-gradient(100deg,#5E3D9F,#C94F1F); /* labelled buttons: white text stays >=4.5:1 at the orange end */
  /* brand fills behind a transparent border use "border-box", or the gradient repeats into the 1.5px border (a sliver of the other end) */
  --violet-rgb:121,58,255;
  --opaque:#000;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gl:max(clamp(16px,4vw,64px),env(safe-area-inset-left,0px));
  --gr:max(clamp(16px,4vw,64px),env(safe-area-inset-right,0px));
  --sec:clamp(72px,9vw,132px);
  --r-lg:22px; --r:18px; --r-sm:12px;
  --head-h:68px;
  /* page-level shadows (dark); not re-pinned inside dark stage panels, so a stage tile casts the page's shadow */
  --sh-btn:0 12px 30px rgba(224,90,44,.32); --sh-btn-h:0 16px 36px rgba(224,90,44,.45);
  --sh-pl:0 6px 18px rgba(224,90,44,.35); --sh-play:0 14px 40px rgba(224,90,44,.45);
  --sh-tile:0 30px 80px rgba(0,0,0,.45),0 0 0 8px rgba(168,139,250,.05);
  --sh-shot:0 34px 90px rgba(0,0,0,.5);
  --sh-pop:0 24px 60px rgba(0,0,0,.55);
  --shot-frame:linear-gradient(160deg,rgba(168,139,250,.35),rgba(91,69,148,.25) 40%,rgba(244,123,66,.28));
  --dots-rgb:255,255,255;
  --dot-glow:0 0 10px #A88BFA;
  --wash-o:.18; --wash-v:.22;
}

/* ── dark color tokens: the default, html[data-theme="dark"], and the dark stage panels in either theme ── */
:root,:root[data-theme="dark"],.dk,.film,.card.brand,.triad .hum{
  --night:#0D0520; --ground-rgb:13,5,32;
  --plum:#1A0B35;
  --box:#24104A; --box-rgb:36,16,74; --box-2:#2C1559;
  --raise-rgb:30,13,64; --pop-rgb:26,11,53;
  --foot:#0A0418;
  --line:#5B4594; --lav-rgb:168,139,250; --line-soft:rgba(168,139,250,.16);
  --ink:#FFFFFF; --ink-rgb:255,255,255; --soft:#D9CCF5; --muted:#9C8CC9;
  --on-brand:#FFFFFF; --on-accent:#1A0B35; --paper:#FFFFFF;
  --orange:#F47B42; --orange-rgb:244,123,66; --orange-ui:#F47B42; --orange-text:#F47B42; --orange-soft:#FFB089;
  --lav:#A88BFA; --link:#A88BFA;
  --mint:#5FE3B5; --mint-rgb:95,227,181;
  --red:#FF7A7A; --red-rgb:255,122,122;
  --focus:#F47B42;
  --grad:linear-gradient(90deg,#A88BFA,#F47B42);
  --grad-text:linear-gradient(90deg,#A88BFA,#F47B42);
  --stamp-grad:linear-gradient(90deg,#FFB089,#F47B42 45%,#E05A2C);
  --i-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235FE3B5' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  --i-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF7A7A' d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
  --i-tick-lav:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231A0B35' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  --scrim-rgb:8,3,20; --video-bg:#000; --sh-film:0 30px 90px rgba(0,0,0,.6);
  --dk-only:inline; --lt-only:none;
  color-scheme:dark;
}
.dk,.film,.card.brand,.triad .hum{color:var(--ink)}

/* ── light color tokens: device in light mode (unless the visitor chose dark), or chosen light ── */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --night:#F7F5FB; --ground-rgb:247,245,251;
    --plum:#EFEAF8;
    --box:#FFFFFF; --box-rgb:255,255,255; --box-2:#F3EEFF;
    --raise-rgb:255,255,255; --pop-rgb:255,255,255;
    --foot:#EFEAF8;
    --line:#CDBBE3; --lav-rgb:121,58,255; --line-soft:rgba(94,61,159,.16);
    --ink:#290B4A; --ink-rgb:41,11,74; --soft:#482580; --muted:#6B5B8A;
    --on-brand:#FFFFFF; --on-accent:#1A0B35; --paper:#FFFFFF;
    --orange:#DF6F34; --orange-rgb:223,111,52; --orange-ui:#C2561F; --orange-text:#A3461A; --orange-soft:#9A4318;
    --lav:#793AFF; --link:#5E3D9F;
    --mint:#076A49; --mint-rgb:7,106,73;
    --red:#B3261E; --red-rgb:179,38,30;
    --focus:#C2561F;
    --grad:linear-gradient(90deg,#5E3D9F,#C94F1F);
    --grad-text:linear-gradient(90deg,#5E3D9F,#A3401C);
    --stamp-grad:linear-gradient(90deg,#E05A2C,#C94F1F 45%,#A3401C);
    --i-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23076A49' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
    --i-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B3261E' d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    --i-tick-lav:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
    --dk-only:none; --lt-only:inline;
    --sh-btn:0 10px 24px rgba(224,90,44,.24); --sh-btn-h:0 14px 30px rgba(224,90,44,.32);
    --sh-pl:0 5px 14px rgba(224,90,44,.26); --sh-play:0 12px 30px rgba(224,90,44,.30);
    --sh-tile:0 24px 60px rgba(41,11,74,.14),0 0 0 8px rgba(121,58,255,.06);
    --sh-shot:0 0 0 1px rgba(205,187,227,.7),0 24px 60px rgba(41,11,74,.14);
    --sh-pop:0 18px 44px rgba(41,11,74,.16);
    --shot-frame:linear-gradient(160deg,rgba(121,58,255,.16),rgba(205,187,227,.32) 40%,rgba(223,111,52,.16));
    --dots-rgb:94,61,159;
    --dot-glow:0 0 0 3px rgba(121,58,255,.16);
    --wash-o:.10; --wash-v:.08;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --night:#F7F5FB; --ground-rgb:247,245,251;
  --plum:#EFEAF8;
  --box:#FFFFFF; --box-rgb:255,255,255; --box-2:#F3EEFF;
  --raise-rgb:255,255,255; --pop-rgb:255,255,255;
  --foot:#EFEAF8;
  --line:#CDBBE3; --lav-rgb:121,58,255; --line-soft:rgba(94,61,159,.16);
  --ink:#290B4A; --ink-rgb:41,11,74; --soft:#482580; --muted:#6B5B8A;
  --on-brand:#FFFFFF; --on-accent:#1A0B35; --paper:#FFFFFF;
  --orange:#DF6F34; --orange-rgb:223,111,52; --orange-ui:#C2561F; --orange-text:#A3461A; --orange-soft:#9A4318;
  --lav:#793AFF; --link:#5E3D9F;
  --mint:#076A49; --mint-rgb:7,106,73;
  --red:#B3261E; --red-rgb:179,38,30;
  --focus:#C2561F;
  --grad:linear-gradient(90deg,#5E3D9F,#C94F1F);
  --grad-text:linear-gradient(90deg,#5E3D9F,#A3401C);
  --stamp-grad:linear-gradient(90deg,#E05A2C,#C94F1F 45%,#A3401C);
  --i-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23076A49' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  --i-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B3261E' d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
  --i-tick-lav:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  --dk-only:none; --lt-only:inline;
  --sh-btn:0 10px 24px rgba(224,90,44,.24); --sh-btn-h:0 14px 30px rgba(224,90,44,.32);
  --sh-pl:0 5px 14px rgba(224,90,44,.26); --sh-play:0 12px 30px rgba(224,90,44,.30);
  --sh-tile:0 24px 60px rgba(41,11,74,.14),0 0 0 8px rgba(121,58,255,.06);
  --sh-shot:0 0 0 1px rgba(205,187,227,.7),0 24px 60px rgba(41,11,74,.14);
  --sh-pop:0 18px 44px rgba(41,11,74,.16);
  --shot-frame:linear-gradient(160deg,rgba(121,58,255,.16),rgba(205,187,227,.32) 40%,rgba(223,111,52,.16));
  --dots-rgb:94,61,159;
  --dot-glow:0 0 0 3px rgba(121,58,255,.16);
  --wash-o:.10; --wash-v:.08;
  color-scheme:light;
}
/* small text on tinted panels and in tables: the text-safe accent variants */
.result,table.t{--grad:var(--grad-text);--orange:var(--orange-text)}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--night);scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:12px 18px;border-radius:10px;background:var(--orange);color:var(--on-accent);font-weight:760;text-decoration:none}
.skip:focus{top:12px}
.nc{text-transform:none}
.i{width:1em;height:1em;fill:currentColor;flex:none;display:inline-block;vertical-align:-.125em}
.sprite{display:none}
aangine-scene-lazy{display:block}
/* theme-specific twins (logos, switch icons): one shows per theme; inline like a plain <img> (the footer logo link keeps its line box),
   blockified where the parent is grid/flex (header logo, switch icons) */
.on-dk{display:var(--dk-only)}
.on-lt{display:var(--lt-only)}

/* ───────── layout ───────── */
.wrap{max-width:1360px;margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr);width:100%}
.wrap.narrow{max-width:980px}
.sec{padding-block:var(--sec);overflow-x:clip}
.sec.tight{padding-block:clamp(56px,6vw,88px)}
.sec.alt{background:var(--plum);border-block:1px solid var(--line-soft)}
.sec + .sec.alt, .sec.alt + .sec{border-top:1px solid var(--line-soft)}
.sec-head{display:grid;gap:18px;max-width:52em;margin-bottom:clamp(36px,4.6vw,60px)}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.sec-head .lede{margin:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.split.top{align-items:start}
.split > *{min-width:0}
.stack{display:grid;gap:16px}

/* ───────── type ───────── */
.eyebrow{margin:0;font-weight:720;font-size:14px;line-height:1.2;letter-spacing:.24em;text-transform:uppercase;color:var(--orange-text)}
h1,.h1{margin:0;font-weight:820;font-size:clamp(44px,5.6vw,100px);line-height:.98;letter-spacing:-.018em;text-wrap:balance}
h2,.h2{margin:0;font-weight:820;font-size:clamp(34px,4.5vw,70px);line-height:1.02;letter-spacing:-.014em;text-wrap:balance}
.h2.sm,h2.sm{font-size:clamp(30px,3.4vw,52px);line-height:1.05}
h3,.h3{margin:0;font-weight:780;font-size:clamp(21px,1.7vw,25px);line-height:1.18;letter-spacing:-.004em;text-wrap:balance}
h4,.h4{margin:0;font-weight:740;font-size:18px;line-height:1.25}
.lede{max-width:34em;font-size:clamp(18px,1.55vw,23px);line-height:1.45;color:var(--soft);text-wrap:pretty}
.body{color:var(--soft);text-wrap:pretty}
.muted{color:var(--muted)}
.small{font-size:15px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.k{display:block}
.hl{color:var(--orange-ui)}
strong,b{font-weight:740}
.mono{font-family:var(--mono)}

/* ───────── buttons, chips, pills ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font:700 16px/1 var(--display);text-decoration:none;
  border:1.5px solid transparent;transition:transform .2s,background-color .2s,border-color .2s,box-shadow .2s;white-space:nowrap;cursor:pointer;color:var(--ink);background:none}
button.btn{appearance:none}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--brand-btn) border-box;color:var(--on-brand);box-shadow:var(--sh-btn)}
.btn.primary:hover{box-shadow:var(--sh-btn-h)}
.btn.ghost{border-color:rgba(var(--lav-rgb),.5);background:rgba(var(--box-rgb),.5)}
.btn.ghost:hover{border-color:var(--lav)}
.btn.sm{min-height:40px;padding:0 18px;font-size:14px}
.btn .i{width:18px;height:18px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.film-btn{gap:12px;padding:0 20px 0 7px}
.film-btn .pl{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--on-brand);box-shadow:var(--sh-pl);flex:none}
.film-btn .pl .i{width:16px;height:16px;margin-left:2px}
.film-btn .dur{flex:none;padding:6px 8px;border-radius:999px;background:rgba(var(--lav-rgb),.16);font:700 12.5px/1 var(--mono);color:var(--soft)}
.film-btn .lbl{text-wrap:balance}
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--link);text-decoration:none}
.tlink:hover{color:var(--ink)}
.tlink .i{width:18px;height:18px;transition:transform .2s}
.tlink:hover .i{transform:translateX(3px)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chips li{display:flex;align-items:center;gap:9px;min-height:40px;padding:0 14px;border-radius:11px;background:rgba(var(--raise-rgb),.88);border:1.5px solid var(--line);font-weight:640;font-size:16px;color:var(--ink);white-space:nowrap}
.chips li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lav);box-shadow:var(--dot-glow);flex:none}
.chips.ok li::before{width:18px;height:18px;background:var(--lav) var(--i-tick-lav) center/14px no-repeat;box-shadow:none}
.chips.sm li{min-height:34px;font-size:14.5px;padding:0 12px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(var(--lav-rgb),.14);border:1px solid rgba(var(--lav-rgb),.3);font-weight:680;font-size:13px;letter-spacing:.02em;color:var(--soft);white-space:nowrap}
.pill.orange{background:rgba(var(--orange-rgb),.14);border-color:rgba(var(--orange-rgb),.38);color:var(--orange-soft)}
.pill.mint{background:rgba(var(--mint-rgb),.12);border-color:rgba(var(--mint-rgb),.34);color:var(--mint)}
.pill .i{width:15px;height:15px}

/* ───────── header + menus ───────── */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(var(--ground-rgb),.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
header.top .wrap{display:flex;align-items:center;gap:24px;height:var(--head-h)}
.logo{display:flex;flex:none}
.logo img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav > ul{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.nav-i{position:relative}
.nav-a{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 12px;border-radius:10px;border:0;background:none;color:var(--soft);font:620 15px/1 var(--display);text-decoration:none;cursor:pointer;white-space:nowrap}
.nav-a:hover,.nav-i.open > .nav-a{color:var(--ink);background:rgba(var(--lav-rgb),.1)}
.nav-a[aria-current="page"],.nav-i.cur > .nav-a{color:var(--ink)}
.nav-i.cur > .nav-a::after,.nav-a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--grad)}
.nav-a .i{width:18px;height:18px;transition:transform .2s;color:var(--muted)}
.nav-i.open > .nav-a .i{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);min-width:340px;padding:10px;border-radius:18px;background:rgba(var(--pop-rgb),.98);border:1.5px solid var(--line);
  box-shadow:var(--sh-pop);display:none}
.nav-i.open .menu{display:grid;gap:2px}
.menu.wide{min-width:560px;grid-template-columns:1fr 1fr}
.nav-i.open .menu.wide{display:grid}
.menu a{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 12px;align-items:center;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--ink)}
.menu a:hover,.menu a[aria-current="page"]{background:rgba(var(--lav-rgb),.12)}
.menu a .mi{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(var(--lav-rgb),.16);color:var(--lav)}
.menu a .mi .i{width:20px;height:20px}
.menu a b{font-weight:700;font-size:15px;line-height:1.2}
.menu a span{font-size:13px;line-height:1.3;color:var(--muted)}
header.top .btn{margin-left:10px}
.burger{display:none;margin-left:auto;width:44px;height:44px;place-items:center;border-radius:12px;border:1.5px solid rgba(var(--lav-rgb),.4);background:transparent;color:var(--ink);cursor:pointer}
.burger .i{width:24px;height:24px}
/* light / dark switch: icon button in the bar, a labelled row inside the mobile menu */
.theme-btn{display:grid;place-items:center;width:42px;height:42px;padding:0;margin-right:-10px;border-radius:12px;border:1.5px solid rgba(var(--lav-rgb),.4);background:transparent;color:var(--ink);cursor:pointer;flex:none;transition:border-color .2s,background-color .2s}
.theme-btn:hover{border-color:var(--lav);background:rgba(var(--lav-rgb),.1)}
.theme-btn .i{width:20px;height:20px}
.nav .theme-btn.mob{display:none}

/* ───────── heroes ───────── */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(88svh,920px);display:flex;align-items:center}
.hero > :is(aangine-scene,aangine-scene-lazy){position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--ground-rgb),.94) 0%,rgba(var(--ground-rgb),.72) 30%,rgba(var(--ground-rgb),0) 58%),linear-gradient(0deg,var(--night) 0%,rgba(var(--ground-rgb),0) 18%)}
.hero .wrap{width:100%}
.hero-copy{max-width:min(700px,48vw);padding-block:64px;display:grid;gap:26px}
.hero-copy .ctas{margin-top:8px}
.hero-copy .lede{max-width:26em}
.hero.page{min-height:min(72svh,760px)}
.hero.page h1{font-size:clamp(40px,4.4vw,74px)}
.hero.page .hero-copy{max-width:min(600px,42vw)}
/* compact page hero: copy left, live scene tile right */
.phero{position:relative;overflow:hidden;padding-block:clamp(56px,7vw,104px) clamp(48px,6vw,88px);border-bottom:1px solid var(--line-soft);
  background:radial-gradient(ellipse 900px 520px at 85% 0%,rgba(var(--violet-rgb),.16),transparent 70%),radial-gradient(ellipse 700px 460px at 0% 100%,rgba(var(--orange-rgb),.08),transparent 70%),var(--night)}
.phero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:center}
.phero.solo .wrap{grid-template-columns:minmax(0,1fr)}
.phero-copy{display:grid;gap:22px;min-width:0}
.phero h1{font-size:clamp(40px,4.6vw,78px)}
.phero .tile{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--line);background:var(--plum);box-shadow:var(--sh-tile)}
.phero .tile :is(aangine-scene,aangine-scene-lazy){display:block;width:100%;aspect-ratio:4/3;max-width:100%}
.phero .tile .tag{position:absolute;left:14px;bottom:14px}
/* film clips (silent loops cut from the 1-minute film, media/clips/film/): dark stage in both themes */
video.clip{display:block;width:100%;max-width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--night)}
/* still frames from the kit with a slow push-in: motion at almost no memory cost (mobile Safari);
   site.js swaps in the light stills (media/posters/clean-light/) in the light theme */
img.clip.still{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--night);transform-origin:70% 50%;animation:push 14s ease-in-out infinite alternate}
@keyframes push{from{transform:scale(1)}to{transform:scale(1.12)}}
.triad figure{overflow:hidden}
.still img.clip.still{animation:none}
@media (prefers-reduced-motion:reduce){img.clip.still{animation:none}}
.tile .pill.sound{cursor:pointer;background:rgba(var(--ground-rgb),.82);border-color:rgba(var(--lav-rgb),.45);color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:700 13px/1 var(--display);min-height:34px;padding:0 14px 0 10px}
.tile .pill.sound:hover{border-color:var(--lav)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}
.crumbs a{color:var(--soft);text-decoration:none}
.crumbs a:hover{color:var(--ink)}

/* trust strip */
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;padding-block:22px;border-bottom:1px solid var(--line-soft)}
.trust b{font-weight:720;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.trust ul{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none}
.trust li{display:flex;align-items:center;gap:9px;font-weight:680;font-size:17px;color:var(--ink)}
.trust li .i{width:20px;height:20px;color:var(--lav)}

/* ───────── ticker ───────── */
.ticker{display:flex;align-items:center;gap:22px;border-block:1px solid var(--line-soft);background:var(--plum);padding-left:var(--gl);overflow:hidden}
.ticker b{flex:none;font-weight:780;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-text);padding-block:18px}
.tick-vp{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,var(--opaque) 6%,var(--opaque) 94%,transparent);mask:linear-gradient(90deg,transparent,var(--opaque) 6%,var(--opaque) 94%,transparent)}
.tick-track{display:flex;width:max-content;animation:tick 42s linear infinite}
.tick-track span{display:flex;align-items:center;gap:22px;padding-right:22px;font-weight:680;font-size:20px;color:var(--ink);white-space:nowrap}
.tick-track span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--lav);box-shadow:var(--dot-glow)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ───────── scroll story ───────── */
.story{position:relative}
.pin{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.pin :is(aangine-scene,aangine-scene-lazy){position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.pin::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(var(--ground-rgb),.92) 0%,rgba(var(--ground-rgb),.6) 31%,rgba(var(--ground-rgb),0) 55%)}
.pin-ui{position:absolute;left:0;right:0;bottom:0;padding-bottom:max(22px,env(safe-area-inset-bottom,0px))}
.pin-ui .wrap{display:flex;align-items:center;gap:18px}
.count{font:700 13px/1 var(--mono);letter-spacing:.08em;color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.track{flex:1;height:3px;border-radius:3px;background:rgba(var(--ink-rgb),.12);overflow:hidden}
.track i{display:block;height:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(0)}
.steps{position:relative;margin-top:-100svh;padding-block:50svh}
.step{min-height:92svh;display:flex;align-items:center}
.step .wrap{width:100%}
.step-copy{max-width:min(640px,44vw);display:grid;gap:22px;transition:opacity .45s}
.step:not(.is-active) .step-copy{opacity:.36}
.step h2{font-size:clamp(34px,4.5vw,70px)}
.step p:not(.eyebrow):not(.stamp-pre){max-width:30em;font-size:clamp(17px,1.45vw,21px);line-height:1.5;color:var(--soft);text-wrap:pretty}
.proofchip{display:inline-flex;align-items:center;gap:18px;justify-self:start;padding:14px 22px 14px 16px;border-radius:16px;background:rgba(var(--raise-rgb),.9);border:1.5px solid var(--line)}
.proofchip b{font-weight:880;font-size:clamp(40px,4vw,58px);line-height:1}
.proofchip span{font-weight:620;font-size:18px;line-height:1.2}
.step-stamp .step-copy{max-width:none;text-align:center;justify-items:center}
.stamp-pre{font-weight:720;font-size:20px;letter-spacing:.3em;text-transform:uppercase}
.stamp{display:inline-block;padding:20px 40px 24px;border:6px solid var(--orange);border-radius:20px;transform:rotate(-3deg);background:rgba(var(--ground-rgb),.6);box-shadow:0 0 0 9px rgba(var(--orange-rgb),.13)}
.stamp span{display:block;text-transform:uppercase;font-weight:880;font-size:clamp(44px,6.4vw,104px);line-height:.98;letter-spacing:-.01em}
.stamp span+span{background:var(--stamp-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stamp.sm span{font-size:clamp(34px,4.4vw,68px)}

/* ───────── core message triad ───────── */
.triad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.triad figure{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--box);border:1.5px solid var(--line);display:flex;flex-direction:column}
.triad :is(aangine-scene,aangine-scene-lazy){width:100%;aspect-ratio:4/3;max-width:100%}
.triad figcaption{padding:20px 22px 22px}
.triad figcaption b{display:block;font-weight:820;font-size:clamp(26px,2.4vw,36px);line-height:1.05}
.triad figcaption span{display:block;margin-top:4px;font-size:18px;color:var(--soft)}
.triad .hum{border-color:transparent;background:var(--brand) border-box}
.triad .hum figcaption span{color:var(--on-brand)}
.result{margin-top:clamp(28px,4vw,44px);padding:22px 26px;border-radius:16px;background:rgba(var(--lav-rgb),.12);border:1px solid rgba(var(--lav-rgb),.28);font-size:clamp(19px,1.7vw,25px);line-height:1.35;color:var(--soft)}
.result strong{color:var(--ink);font-weight:760}

/* ───────── cards ───────── */
.cards{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.cards.c2{--cols:2}.cards.c4{--cols:4}
.card{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.2vw,30px);border-radius:var(--r-lg);background:var(--box);border:1.5px solid var(--line);min-width:0}
.sec.alt .card{background:rgba(var(--box-rgb),.85)}
.card p,.card li{color:var(--soft);font-size:16.5px;line-height:1.5;text-wrap:pretty}
.card .card-foot{margin-top:auto;padding-top:8px}
.card.flat{background:transparent;border-color:var(--line-soft)}
.card.hot{border-color:rgba(var(--orange-rgb),.55);background:linear-gradient(180deg,rgba(var(--orange-rgb),.10),rgba(var(--box-rgb),.9) 60%)}
.card.brand,.sec.alt .card.brand{border-color:transparent;background:var(--brand) border-box}
.card.brand p,.card.brand li{color:var(--on-brand)}
.card a.cover{position:absolute;inset:0;border-radius:inherit}
.card.link{transition:border-color .2s,transform .2s}
.card.link:hover{border-color:var(--lav);transform:translateY(-3px)}
.ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(var(--lav-rgb),.16);color:var(--lav);flex:none}
.ic .i{width:28px;height:28px}
.ic.orange{background:rgba(var(--orange-rgb),.16);color:var(--orange-ui)}
.ic.mint{background:rgba(var(--mint-rgb),.13);color:var(--mint)}
.ic.solid{background:var(--brand);color:var(--on-brand)}
.ic.sm{width:40px;height:40px;border-radius:11px}
.ic.sm .i{width:22px;height:22px}
.card-head{display:flex;align-items:center;gap:14px}
.num{font:700 13px/1 var(--mono);letter-spacing:.08em;color:var(--orange-text)}
.ticks{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.ticks li{position:relative;padding-left:30px;color:var(--soft);line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:.12em;width:20px;height:20px;border-radius:50%;background:rgba(var(--mint-rgb),.16) var(--i-tick) center/14px no-repeat}
.ticks.x li::before{background:rgba(var(--red-rgb),.14) var(--i-cross) center/13px no-repeat}
.ticks.dots li::before{width:8px;height:8px;top:.6em;left:6px;background:var(--lav);box-shadow:var(--dot-glow)}

/* before / with pair */
.compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,1.6vw,22px)}
.compare > div{padding:clamp(22px,2.4vw,32px);border-radius:var(--r-lg);display:grid;gap:14px;align-content:start;min-width:0}
.compare .was{background:rgba(var(--red-rgb),.06);border:1.5px solid rgba(var(--red-rgb),.32)}
.compare .now{background:rgba(var(--mint-rgb),.06);border:1.5px solid rgba(var(--mint-rgb),.34)}
.compare .was .eyebrow{color:var(--red)}
.compare .now .eyebrow{color:var(--mint)}

/* ───────── feature rows with product screens ───────── */
.feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4.4vw,72px);align-items:center}
.feature + .feature{margin-top:clamp(64px,8vw,120px)}
.feature.flip > :first-child{order:2}
.feature-copy{display:grid;gap:18px;min-width:0}
.feature-copy .ticks{margin-top:6px}
.feature-copy > .pill{justify-self:start}
.shot{position:relative;margin:0;border-radius:18px;padding:10px;background:var(--shot-frame);box-shadow:var(--sh-shot);min-width:0}
.shot::before{content:"";display:block;height:22px;margin:-2px 2px 8px;background:radial-gradient(circle at 8px 50%,rgba(var(--dots-rgb),.4) 4px,transparent 4.5px),radial-gradient(circle at 24px 50%,rgba(var(--dots-rgb),.28) 4px,transparent 4.5px),radial-gradient(circle at 40px 50%,rgba(var(--dots-rgb),.18) 4px,transparent 4.5px)}
.shot img{display:block;width:100%;border-radius:10px;background:var(--paper)}
.shot figcaption{margin-top:10px;padding-inline:4px;font-size:14px;color:var(--soft)}
.shot.glow{isolation:isolate}
.shot.glow::after{content:"";position:absolute;inset:-10% -12px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 60% 40%,rgba(var(--violet-rgb),.30),transparent 60%);filter:blur(10px)}

/* ───────── stats, quotes ───────── */
.stats{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);align-items:stretch}
.stats.even{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
.stat{padding:22px 22px 24px;border-radius:var(--r);background:var(--box);border:1.5px solid var(--line);min-width:0}
.stat b{display:inline-block;font-weight:880;font-size:clamp(40px,4.2vw,64px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat span{display:block;margin-top:10px;font-weight:600;font-size:17px;line-height:1.3;color:var(--soft)}
.stat.lead b{font-size:clamp(56px,6.6vw,104px)}
.stat.lead span{font-size:20px;color:var(--ink)}
.quote{margin:0;max-width:46em}
.quote p{font-style:italic;font-weight:460;font-size:clamp(21px,2vw,30px);line-height:1.35;text-wrap:pretty}
.quote footer{margin-top:12px;font-weight:620;font-size:15px;letter-spacing:.06em;color:var(--muted)}
.quotes{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.qcard{margin:0;display:flex;flex-direction:column;gap:16px;padding:clamp(22px,2.4vw,32px);border-radius:var(--r-lg);background:var(--box);border:1.5px solid var(--line);min-width:0}
.qcard p{font-style:italic;font-size:clamp(18px,1.5vw,21px);line-height:1.45;text-wrap:pretty}
.qcard footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-weight:620;font-size:14.5px;color:var(--muted)}
.stars{display:inline-flex;gap:2px;color:var(--orange-ui)}
.stars .i{width:18px;height:18px}
.note{font-size:13.5px;line-height:1.5;color:var(--muted)}

/* ───────── numbered process / timeline (only for real sequences) ───────── */
.process{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:clamp(14px,1.6vw,22px);counter-reset:p;margin:0;padding:0;list-style:none}
.process > li{position:relative;display:grid;gap:12px;align-content:start;padding:24px 22px 26px;border-radius:var(--r-lg);background:var(--box);border:1.5px solid var(--line);min-width:0}
.process > li::before{counter-increment:p;content:counter(p,decimal-leading-zero);font:700 13px/1 var(--mono);letter-spacing:.08em;color:var(--orange-text)}
.process > li p{color:var(--soft);font-size:16px}
.timeline{display:grid;gap:0;margin:0;padding:0;list-style:none;border-left:2px solid var(--line);margin-left:10px}
.timeline > li{position:relative;padding:0 0 32px 32px;display:grid;gap:8px}
.timeline > li::before{content:"";position:absolute;left:-9px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--night);border:3px solid var(--lav)}
.timeline > li:last-child{padding-bottom:0}
.timeline .when{font:700 13px/1.2 var(--mono);letter-spacing:.06em;color:var(--orange-text)}
.timeline p{color:var(--soft)}

/* ───────── FAQ accordion ───────── */
.faq{display:grid;gap:12px}
.faq-group + .faq-group{margin-top:clamp(40px,5vw,64px)}
.faq-group > h2{margin-bottom:20px}
.faq details{border-radius:16px;background:var(--box);border:1.5px solid var(--line);transition:border-color .2s}
.faq details[open]{border-color:var(--lav)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px;padding:16px 22px;cursor:pointer;list-style:none;font-weight:700;font-size:18px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--lav);border-bottom:2px solid var(--lav);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq .a{padding:0 22px 22px;color:var(--soft);display:grid;gap:12px;max-width:62em}
.faq .a ul{margin:0;padding-left:1.2em}

/* ───────── tables ───────── */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1.5px solid var(--line);background:var(--box)}
table.t{width:100%;border-collapse:collapse;font-size:15.5px;min-width:640px}
table.t th,table.t td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
table.t thead th{position:sticky;top:0;background:var(--box-2);font-weight:720;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
table.t tbody tr:last-child td{border-bottom:0}
table.t td{color:var(--soft)}
table.t td:first-child{color:var(--ink);font-weight:640}

/* ───────── integrations / tool groups ───────── */
.tools{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.tool-group{padding:24px;border-radius:var(--r-lg);background:var(--box);border:1.5px solid var(--line);display:grid;gap:16px;align-content:start;min-width:0}
.tool-group h3{display:flex;align-items:center;gap:12px}
.logos{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.logos li{display:flex;align-items:center;min-height:42px;padding:0 16px;border-radius:12px;background:rgba(var(--ground-rgb),.6);border:1px solid var(--line-soft);font-weight:680;font-size:15.5px;white-space:nowrap}

/* ───────── link cards, media cards ───────── */
.media{position:relative;display:grid;place-items:center;aspect-ratio:16/9;max-width:100%;border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--line);text-decoration:none;
  background:radial-gradient(ellipse at 70% 30%,rgba(var(--violet-rgb),.45),transparent 60%),radial-gradient(ellipse at 20% 90%,rgba(var(--orange-rgb),.30),transparent 60%),var(--plum)}
.media .play{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:var(--brand);color:var(--on-brand);box-shadow:var(--sh-play);transition:transform .2s}
.media .play .i{width:34px;height:34px;margin-left:4px}
.media:hover .play{transform:scale(1.07)}
.media .cap{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;gap:12px;font-weight:680;font-size:15px}
.media .cap span:last-child{color:var(--soft);font-weight:600}

/* ───────── offices / contact ───────── */
.office{display:grid;gap:10px;align-content:start}
.office address{font-style:normal;color:var(--soft);line-height:1.55}
.office .tel{font-family:var(--mono);font-size:15px;color:var(--ink)}
.form-shell{padding:clamp(22px,2.6vw,34px);border-radius:var(--r-lg);background:var(--box);border:1.5px solid var(--line);display:grid;gap:18px;min-width:0}
.form-shell .hs:empty{display:none}
.form-shell .hs iframe{display:block;width:100%!important;border-radius:12px;background:var(--paper)}
.form-fallback{display:grid;gap:14px}

/* ───────── prose (policy pages) ───────── */
.prose{max-width:72ch;color:var(--soft);font-size:17px;line-height:1.7}
.prose h2{font-size:clamp(26px,2.6vw,36px);color:var(--ink);margin:2.2em 0 .6em}
.prose h3{font-size:21px;color:var(--ink);margin:1.8em 0 .5em}
.prose p{margin:0 0 1em}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.3em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--link)}
.prose strong{color:var(--ink)}
.prose > :first-child{margin-top:0}
.toc{position:sticky;top:calc(var(--head-h) + 24px);display:grid;gap:4px;padding:18px;border-radius:var(--r);background:var(--box);border:1.5px solid var(--line);font-size:14.5px}
.toc a{color:var(--soft);text-decoration:none;padding:6px 8px;border-radius:8px}
.toc a:hover{background:rgba(var(--lav-rgb),.12);color:var(--ink)}
.with-toc{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}

/* callout */
.callout{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:16px;background:rgba(var(--lav-rgb),.10);border:1px solid rgba(var(--lav-rgb),.3);color:var(--soft)}
.callout .i{width:24px;height:24px;color:var(--lav);margin-top:2px}
.callout.orange{background:rgba(var(--orange-rgb),.08);border-color:rgba(var(--orange-rgb),.35)}
.callout.orange .i{color:var(--orange-ui)}
.callout strong{color:var(--ink)}

/* big numeric facts inside cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.kpi{padding:14px 16px;border-radius:14px;background:rgba(var(--ground-rgb),.55);border:1px solid var(--line-soft)}
.kpi b{display:block;font-weight:860;font-size:clamp(26px,2.4vw,34px);line-height:1.05;font-variant-numeric:tabular-nums}
.kpi span{display:block;margin-top:6px;font-size:14.5px;line-height:1.35;color:var(--soft)}

/* ───────── closing CTA (ready scene) ───────── */
.ready{position:relative;isolation:isolate;overflow:hidden;min-height:min(86svh,880px);display:flex;align-items:center}
.ready > :is(aangine-scene,aangine-scene-lazy){position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.ready::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--ground-rgb),.94) 0%,rgba(var(--ground-rgb),.7) 34%,rgba(var(--ground-rgb),0) 60%),linear-gradient(180deg,var(--night) 0%,rgba(var(--ground-rgb),0) 16%,rgba(var(--ground-rgb),0) 84%,var(--night) 100%)}
.ready .wrap{width:100%;padding-block:72px;display:grid;gap:26px}
.ready h2{max-width:min(15em,46vw);font-size:clamp(34px,4vw,62px)}
.cta{max-width:min(560px,46vw);padding:28px 30px 30px;border-radius:var(--r-lg);background:rgba(var(--raise-rgb),.92);border:1.5px solid var(--line);display:grid;gap:10px}
.cta .s1{font-weight:840;font-size:clamp(28px,2.8vw,42px);line-height:1.08}
.cta .s2{font-weight:620;font-size:clamp(18px,1.6vw,22px);color:var(--ink)}
.cta .ctas{margin-top:14px}
/* CTA band without a scene (inner pages) */
.cta-band{position:relative;overflow:hidden;padding-block:clamp(64px,8vw,112px);border-top:1px solid var(--line-soft);
  background:radial-gradient(ellipse 800px 500px at 100% 100%,rgba(var(--orange-rgb),var(--wash-o)),transparent 70%),radial-gradient(ellipse 900px 600px at 0% 0%,rgba(var(--violet-rgb),var(--wash-v)),transparent 70%),var(--plum)}
.cta-band .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:28px 48px;align-items:end}
.cta-band .copy{display:grid;gap:18px;min-width:0}
.cta-band h2{font-size:clamp(32px,3.8vw,58px)}

/* ───────── footer ───────── */
footer.site{border-top:1px solid var(--line-soft);background:var(--foot);padding-block:clamp(48px,6vw,80px) calc(76px + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:15px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:32px}
.foot-brand{display:grid;gap:16px;align-content:start;max-width:24em}
.foot-brand img{height:30px;width:auto}
.foot-brand p{color:var(--soft);line-height:1.5}
footer.site h3{margin:0 0 14px;font-size:13px;font-weight:720;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
footer.site ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
footer.site a{color:var(--muted);text-decoration:none}
footer.site a:hover{color:var(--ink)}
footer.site .btn,footer.site .btn:hover{color:var(--on-brand)}
.foot-offices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line-soft)}
.foot-offices b{display:block;color:var(--ink);font-weight:700;margin-bottom:4px}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line-soft);font-size:14px}
.foot-base .core{color:var(--soft)}

/* ───────── motion control, film dialog ───────── */
.motion{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:8px;
  min-height:42px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(var(--lav-rgb),.4);background:rgba(var(--ground-rgb),.86);color:var(--ink);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:700 14px/1 var(--display);cursor:pointer}
.motion .i{width:20px;height:20px}
.motion .play{display:none}
.still .motion .play{display:block}
.still .motion .pause{display:none}
/* the film dialog is a dark stage in both themes (dark tokens pinned on .film above) */
.film{width:min(1120px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);margin:auto;padding:0;overflow:auto;border:1.5px solid var(--line);border-radius:22px;background:var(--plum);color:var(--ink);box-shadow:var(--sh-film)}
.film::backdrop{background:rgba(var(--scrim-rgb,8,3,20),.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.film-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 14px 14px 22px}
.film-head h2{font-weight:800;font-size:clamp(19px,1.7vw,24px);line-height:1.15}
.film-head small{display:block;margin-top:5px;font:600 13px/1.3 var(--mono);color:var(--muted)}
.film-x{display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;border:1.5px solid rgba(var(--lav-rgb),.4);background:transparent;color:var(--ink);cursor:pointer;flex:none}
.film-x:hover{border-color:var(--lav)}
.film-x .i{width:20px;height:20px}
.film video{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100svh - 150px);background:var(--video-bg);object-fit:contain}
.film video::cue{background:rgba(var(--ground-rgb,13,5,32),.82);color:var(--ink,#fff);font-family:"Archivo",system-ui,sans-serif;font-weight:600}
.film-err{padding:12px 22px;background:rgba(var(--orange-rgb),.12);border-top:1px solid rgba(var(--orange-rgb),.3);font-size:15px}
.film-err a{color:var(--orange-text);font-weight:700}
.film-foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 24px;padding:16px 22px 20px}
.film-tx{flex:1;min-width:min(100%,20em);font-size:15.5px;color:var(--soft)}
.film-tx summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:12px;font-weight:700;color:var(--ink);list-style:none}
.film-tx summary::-webkit-details-marker{display:none}
.film-tx summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--lav);border-bottom:2px solid var(--lav);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.film-tx[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.film-tx p{margin:4px 0 0;max-width:62em;line-height:1.55}
.film-open{overflow:hidden}

/* ───────── kinetic type: rests visible, lines replay when their section becomes active ───────── */
@keyframes rise{from{opacity:0;transform:translateY(.45em);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes slam{0%{opacity:0;transform:rotate(-3deg) scale(1.85)}62%{opacity:1;transform:rotate(-3deg) scale(.96)}100%{opacity:1;transform:rotate(-3deg) scale(1)}}
@keyframes lift{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.go .hero .k,.go .phero .k,.step.is-active .k,.ready.is-on .k{animation:rise .75s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 110ms)}
.step.is-active .stamp,.slam.is-on .stamp{animation:slam .55s cubic-bezier(.2,.9,.25,1) both .2s}
.rv.is-on{animation:lift .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 90ms)}
.still .tick-track,.still .k,.still .stamp,.still .rv{animation:none!important}
/* phones: no blur filter in the line reveals (filters on text layers are costly in mobile Safari) */
@media (max-width:760px),(pointer:coarse){
  @keyframes rise{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tick-track,.k,.stamp,.rv,.btn,.card,.tlink .i{animation:none!important;transition:none!important}
}
/* reduced motion, desktop: the scene stays sharp behind the stamp step, so it gets the phone layout's panel */
@media (prefers-reduced-motion:reduce) and (min-width:761px){
  .step-stamp .step-copy{padding:28px 40px 32px;border-radius:24px;background:rgba(var(--ground-rgb),.9);border:1px solid rgba(var(--lav-rgb),.24)}
}

/* ───────── responsive ───────── */
@media (max-width:1260px){
  .nav-a{padding:0 8px;font-size:14.5px}
  header.top .wrap{gap:16px}
  header.top .btn{margin-left:4px}
  .theme-btn{margin-right:-4px}
}
@media (max-width:1180px){
  .foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:1080px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat.lead{grid-column:1/-1}
  .cards,.cards.c4,.process,.tools{--cols:2}
  .stats.even{--cols:2}
  .with-toc{grid-template-columns:minmax(0,1fr)}
  .toc{position:static}
}
@media (max-width:1120px){
  .burger{display:grid}
  header.top .btn,header.top .theme-btn:not(.mob){display:none}
  /* absolute to the sticky header (its backdrop-filter would capture a fixed child anyway) */
  .nav{position:absolute;top:100%;left:0;right:0;height:calc(100dvh - var(--head-h) - env(safe-area-inset-top,0px));display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:12px var(--gr) 32px var(--gl);
    background:rgba(var(--ground-rgb),.98);overflow-y:auto;border-top:1px solid var(--line-soft)}
  .nav.open{display:flex}
  .nav > ul{flex-direction:column;align-items:stretch;gap:0}
  .nav-a{width:100%;justify-content:space-between;min-height:54px;font-size:18px;padding:0 6px;border-bottom:1px solid var(--line-soft);border-radius:0}
  .nav-i.cur > .nav-a::after,.nav-a[aria-current="page"]::after{display:none}
  .menu,.menu.wide{position:static;transform:none;min-width:0;grid-template-columns:minmax(0,1fr);padding:6px 0 12px;border:0;border-radius:0;background:none;box-shadow:none}
  .nav.open .btn.mob{display:inline-flex;margin:20px 0 0}
  .nav.open .theme-btn.mob{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;height:auto;min-height:54px;margin:0;padding:0 6px;
    border:0;border-bottom:1px solid var(--line-soft);border-radius:0;background:none;color:var(--soft);font:620 18px/1.2 var(--display);text-align:left}
  .nav.open .theme-btn.mob:hover{color:var(--ink)}
  .theme-btn.mob .i{width:22px;height:22px;color:var(--lav)}
}
@media (max-width:980px){
  .split,.feature,.phero .wrap,.compare{grid-template-columns:minmax(0,1fr)}
  .feature.flip > :first-child{order:0}
  .cta-band .wrap{grid-template-columns:minmax(0,1fr);align-items:start}
}
.nav .btn.mob{display:none}
@media (max-width:760px){
  .hero.page .hero-copy{max-width:none}
  body{font-size:16.5px}
  .hero{display:block;min-height:0}
  .hero > :is(aangine-scene,aangine-scene-lazy){position:relative;inset:auto;display:block;height:56svh;min-height:300px}
  .hero::before{background:linear-gradient(0deg,var(--night) 0%,rgba(var(--ground-rgb),0) 30%);bottom:auto;height:56svh;min-height:300px}
  .hero-copy{max-width:none;padding-block:4px 48px}
  .step-copy{max-width:none;padding:22px 20px 24px;border-radius:18px;background:rgba(var(--ground-rgb),.92);border:1px solid rgba(var(--lav-rgb),.24)}
  .step:not(.is-active) .step-copy{opacity:.6}
  .stamp{padding:14px 22px 18px;border-width:5px}
  .triad,.cards,.cards.c2,.cards.c4,.process,.tools,.quotes,.stats.even{--cols:1;grid-template-columns:minmax(0,1fr)}
  .ready{display:block;min-height:0}
  .ready > :is(aangine-scene,aangine-scene-lazy){position:relative;inset:auto;display:block;height:52svh;min-height:280px}
  .ready::before{height:52svh;min-height:280px;bottom:auto;background:linear-gradient(0deg,var(--night) 0%,rgba(var(--ground-rgb),0) 34%)}
  .ready .wrap{padding-block:8px 64px}
  .ticker b{display:none}
  .cta,.ready h2{max-width:none}
  .pin :is(aangine-scene,aangine-scene-lazy){height:64svh;bottom:auto}
  .pin-ui{top:calc(var(--head-h) + 10px);bottom:auto}
  .pin::before{background:linear-gradient(0deg,var(--night) 36%,rgba(var(--ground-rgb),0) 52%)}
  .btn{white-space:normal;text-align:center;line-height:1.2}
  .btn.film-btn{text-align:left;min-height:52px;padding-block:7px}
  .film{width:calc(100vw - 20px);max-height:calc(100svh - 20px);border-radius:18px}
  .film-foot{padding:12px 16px 18px}
  .motion{padding:0;width:44px;justify-content:center}
  .motion span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .foot-top,.foot-offices{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .chips li{white-space:normal}
  .logos li{white-space:normal}
}
@media (max-width:460px){
  .foot-top,.foot-offices{grid-template-columns:minmax(0,1fr)}
}

/* ── video tiles: a 16:9 film in a dark stage tile, with a caption bar (hero tiles and "Watch" sections) ── */
figure.tile{margin:0}
.vtile{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--line);background:var(--plum);box-shadow:var(--sh-tile)}
.vcards .vtile{box-shadow:0 18px 50px rgba(0,0,0,.35)}
.vmedia{position:relative}
.vtile video.clip{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--night)}
.vplay{position:absolute;inset:0;display:grid;place-items:center;width:100%;margin:0;padding:0;border:0;cursor:pointer;color:#fff;
  background:radial-gradient(circle at 50% 50%,rgba(13,5,32,.42) 0%,rgba(13,5,32,.1) 55%,rgba(13,5,32,0) 80%)}
.vplay[hidden]{display:none}
.vplay .pl,.tv-start .pl{display:grid;place-items:center;width:clamp(56px,6vw,76px);aspect-ratio:1;border-radius:50%;background:var(--brand);box-shadow:var(--sh-play);transition:transform .2s ease}
.vplay .pl .i,.tv-start .pl .i{width:42%;height:42%;margin-left:6%}
.vplay:hover .pl,.tv-start:hover .pl{transform:scale(1.06)}
.vplay:focus-visible,.tv-start:focus-visible{outline:none}
.vplay:focus-visible .pl,.tv-start:focus-visible .pl{outline:3px solid var(--focus);outline-offset:5px}
.vdur{position:absolute;right:10px;bottom:10px;padding:4px 7px;border-radius:6px;background:rgba(13,5,32,.86);color:#fff;font:700 12.5px/1 var(--mono);pointer-events:none}
.vtile figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:14px 18px 16px;border-top:1px solid var(--line)}
.vtile .vk{flex-basis:100%;font:700 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-text)}
.vtile .vt{flex:1 1 14em;font:800 clamp(16px,1.3vw,18px)/1.25 var(--display);color:var(--ink);text-wrap:balance}
.vtile .tlink{font-size:14.5px;white-space:nowrap}
.vcards .vtile{height:100%}
.vcards .vtile figcaption{flex:1;align-content:start}
.vmore{margin-top:26px}

/* ── aangine TV page ── */
.phero.tv-hero{padding-block:clamp(36px,4.4vw,64px) clamp(18px,2.2vw,30px);border-bottom:0}
.tv-hero .phero-copy{gap:16px}
.tv-hero h1{font-size:clamp(34px,3.6vw,58px)}
.tv-hero .lede{max-width:46em}
.tv-hero + .sec{border-top:0;padding-top:clamp(8px,1.5vw,20px)}
.tv-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:clamp(20px,2.4vw,34px);align-items:start}
.tv-main{min-width:0}
.tv-player{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--line);background:var(--plum);box-shadow:var(--sh-tile)}
.tv-player video{display:block;width:100%;aspect-ratio:16/9;background:var(--night);object-fit:contain}
.tv-start{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:16px;width:100%;margin:0;padding:16px;border:0;cursor:pointer;color:#fff;
  background:radial-gradient(circle at 50% 50%,rgba(13,5,32,.5) 0%,rgba(13,5,32,.12) 55%,rgba(13,5,32,0) 80%)}
.tv-start[hidden],.tv-end[hidden]{display:none}
.tv-start .pl{width:clamp(64px,7vw,88px)}
.tv-start .hint{padding:6px 13px;border-radius:999px;background:rgba(13,5,32,.74);font:650 13.5px/1.2 var(--display)}
.tv-start .err{max-width:40ch;padding:8px 12px;border-radius:10px;background:rgba(244,123,66,.18);border:1px solid rgba(244,123,66,.5);font:600 14px/1.4 var(--display)}
.tv-end{position:absolute;inset:0;display:flex;overflow:auto;padding:clamp(14px,2vw,24px);background:rgba(13,5,32,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tv-end-in{margin:auto;width:100%;max-width:560px;display:grid;gap:14px}
.tv-end .ctas{display:flex;flex-wrap:wrap;gap:10px}
.tv-next{display:grid;grid-template-columns:minmax(110px,42%) minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:10px;border-radius:14px;border:1.5px solid var(--line);background:var(--box);color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.tv-next:hover{border-color:var(--lav)}
.tv-next .m{display:grid;gap:4px;min-width:0}
.tv-next b{font:800 17px/1.2 var(--display)}
.tv-next .m span{font-size:14px;line-height:1.4;color:var(--soft)}
.tv-next .cd{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(13,5,32,.8);border:2px solid var(--orange);font:800 17px/1 var(--display);color:#fff}
.tv-next .cd:empty{display:none}
.th{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--night)}
.th img{display:block;width:100%;height:100%;object-fit:cover}
.th .vdur{right:6px;bottom:6px;padding:3px 6px;font-size:11.5px}
.tv-notes{display:grid;gap:12px;margin-top:clamp(18px,2vw,26px);max-width:60em}
.tv-notes h2{text-wrap:balance}
.tv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:4px}
.tv-meta [hidden]{display:none}
.tv-links{display:flex;flex-wrap:wrap;gap:10px}
.seg{display:inline-flex;padding:3px;border-radius:12px;background:rgba(var(--lav-rgb),.08);border:1px solid var(--line-soft)}
.seg button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:650 14px/1 var(--display);cursor:pointer}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--box);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.seg .i,.tv-meta .pill .i{width:17px;height:17px}
.tv-rail{display:grid;gap:12px;min-width:0}
.tv-rail-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tv-rail-h h3{font:700 13px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.tv-rail-h span{font:600 13px/1 var(--mono);color:var(--muted);white-space:nowrap}
.tv-list{list-style:none;margin:0;padding:0 4px 0 0;display:grid;gap:6px;max-height:min(600px,calc(100svh - 180px));overflow:auto;overscroll-behavior:contain}
.tv-item{width:100%;display:grid;grid-template-columns:124px minmax(0,1fr);gap:12px;align-items:start;padding:7px;border-radius:14px;border:1.5px solid transparent;background:transparent;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.tv-item:hover{background:rgba(var(--box-rgb),.7)}
.tv-item[aria-current="true"]{background:var(--box);border-color:var(--line)}
.tv-item .th{border-radius:8px}
.tv-item b{display:block;font:700 15px/1.25 var(--display)}
.tv-item .k2{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.tv-jump{display:flex;flex-wrap:wrap;gap:8px;margin:calc(-1 * clamp(14px,2vw,30px)) 0 clamp(32px,4vw,52px)}
.tv-jump .pill{text-decoration:none;min-height:36px;padding:0 14px;font-size:14px}
.tv-jump .pill:hover{border-color:var(--lav);color:var(--ink)}
.tv-group{scroll-margin-top:calc(var(--head-h) + 16px)}
.tv-group + .tv-group{margin-top:clamp(44px,5vw,72px)}
.tv-gh{display:grid;gap:6px;margin-bottom:22px;max-width:60em}
.tv-gh h3{font:800 clamp(22px,2vw,28px)/1.15 var(--display)}
.tv-gh p{color:var(--soft)}
.tv-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(14px,1.6vw,22px)}
.tv-card{display:flex;flex-direction:column;gap:8px;height:100%;padding:10px 10px 18px;border-radius:var(--r-lg);border:1.5px solid var(--line);background:rgba(var(--box-rgb),.85);color:var(--ink);text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.tv-card:hover{border-color:var(--lav);transform:translateY(-2px)}
.tv-card[aria-current="true"]{border-color:var(--orange)}
.tv-card .th{margin-bottom:6px}
.tv-card .th .pl{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--brand);color:#fff;box-shadow:var(--sh-pl);opacity:.94}
.tv-card .th .pl .i{width:22px;height:22px;margin-left:3px}
.tv-card :is(.vk,b,.s){padding:0 6px}
.tv-card .vk{font:700 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-text)}
.tv-card b{font:800 17px/1.25 var(--display);text-wrap:balance}
.tv-card .s{font-size:14.5px;line-height:1.45;color:var(--soft)}
@media (max-width:980px){
  .tv-layout{grid-template-columns:minmax(0,1fr)}
  .tv-list{max-height:none}
}
@media (max-width:560px){
  .tv-end{padding:10px}
  .tv-end-in{gap:8px}
  .tv-end .eyebrow{display:none}
  .tv-next{grid-template-columns:104px minmax(0,1fr);gap:10px;padding:7px}
  .tv-next b{font-size:15px}
  .tv-next .m span{display:none}
  .tv-next .cd{width:36px;height:36px;margin:-18px 0 0 -18px;font-size:14px}
  .tv-end .btn.sm{min-height:34px;padding:0 12px;font-size:13px}
  .tv-start .hint{display:none}
  .tv-item{grid-template-columns:112px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .vplay .pl,.tv-start .pl,.tv-card{transition:none}
  .tv-card:hover{transform:none}
}
/* the header carries one more item (aangine TV): tighten it just above the burger breakpoint */
@media (min-width:1121px) and (max-width:1360px){
  .nav-a{padding:0 6px;font-size:14px}
  header.top .wrap{gap:10px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
}
@media (min-width:1121px) and (max-width:1200px){
  .nav-a{padding:0 4px;font-size:13.5px}
  header.top .logo img{width:140px;height:auto}
}
/* brochure previews on resources.html */
.ic.solid.orange{background:linear-gradient(135deg,#F47B42,#E05A2C)}
.docpair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,24px);align-items:start;min-width:0}
.docpair a{display:block;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-shot);transition:transform .2s ease}
.docpair a:nth-child(2){margin-top:clamp(28px,5vw,64px)}
.docpair a:hover{transform:translateY(-4px)}
.docpair img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:reduce){.docpair a{transition:none}.docpair a:hover{transform:none}}
/* ── site search ── */
.search-btn{display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:12px;border:1.5px solid rgba(var(--lav-rgb),.4);background:transparent;color:var(--ink);cursor:pointer;flex:none;transition:border-color .2s}
.search-btn:hover{border-color:var(--lav)}
.search-btn .i{width:20px;height:20px}
.search-btn[hidden]{display:none}
.search-dlg{width:min(760px,calc(100vw - 24px));max-width:none;max-height:min(720px,calc(100svh - 32px));margin:clamp(12px,9vh,110px) auto auto;padding:0;border:1.5px solid var(--line);border-radius:20px;background:var(--plum);color:var(--ink);box-shadow:var(--sh-pop);overflow:hidden}
.search-dlg[open]{display:flex;flex-direction:column}
.search-dlg::backdrop{background:rgba(8,3,20,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.search-bar{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 20px;border-bottom:1px solid var(--line-soft);flex:none}
.search-bar > .i{width:22px;height:22px;color:var(--lav);flex:none}
.search-bar input{flex:1;min-width:0;height:50px;border:0;background:transparent;color:var(--ink);font:620 19px/1.2 var(--display);outline:none;-webkit-appearance:none;appearance:none}
.search-bar input::placeholder{color:var(--muted)}
.search-bar input::-webkit-search-cancel-button{display:none}
.search-x{display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;border:1.5px solid rgba(var(--lav-rgb),.4);background:transparent;color:var(--ink);cursor:pointer;flex:none}
.search-x:hover{border-color:var(--lav)}
.search-x .i{width:20px;height:20px}
.search-hint{margin:0;padding:10px 20px 0;font-size:14px;color:var(--muted);flex:none}
.search-results{list-style:none;margin:0;padding:8px 10px 14px;overflow:auto;overscroll-behavior:contain}
.search-results a{display:grid;gap:3px;padding:11px 12px;border-radius:12px;color:var(--ink);text-decoration:none}
.search-results a:hover{background:rgba(var(--lav-rgb),.1)}
.search-results a:focus-visible{background:rgba(var(--lav-rgb),.14);outline:2px solid var(--focus);outline-offset:-2px}
.search-results b{font:750 17px/1.25 var(--display)}
.sx-k{font:700 11.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-text)}
.sx-d{font-size:14.5px;line-height:1.45;color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-results mark{background:rgba(var(--orange-rgb),.24);color:inherit;border-radius:3px;padding:0 1px}
.sx-h{padding:8px 12px 2px;font:700 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sx-none{padding:16px 12px;color:var(--soft)}
@media (max-width:1120px){
  header.top .search-btn{margin-left:auto}
  header.top .search-btn:not([hidden]) ~ .burger{margin-left:0}
}
/* YouTube embed (T-Mobile webinar on customers.html) */
.media.yt-wrap{background:#000}
.media .yt-frame{position:absolute;inset:0;width:100%;height:100%;border:0}
/* aangine TV opens on the player (21 Oct): no hero, no side list; the player fits the first screen */
.sec.tv-top{padding-top:clamp(16px,2vw,28px);padding-bottom:clamp(28px,3.4vw,48px);border-top:0}
.tv-solo{width:min(100%,1120px);margin-inline:auto}
.tv-solo{width:min(100%,max(560px,min(1120px,calc((100svh - 260px) * 16 / 9))))}
.tv-h1{font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.01em;margin:0 0 clamp(10px,1.2vw,16px)}
.tv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:clamp(12px,1.4vw,18px)}
.tv-bar [hidden]{display:none}
.tv-now{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;flex:1 1 auto;min-width:0}
.tv-now b{font-size:clamp(17px,1.4vw,20px);line-height:1.3}
.tv-now span{color:var(--soft);font-size:15px}
.tv-bar .pill .i{width:17px;height:17px}
.tv-bar .tv-browse{white-space:nowrap}
.tv-bar .tv-links:empty{display:none}
.tv-go{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px}