/* LazyPlayer home page: "Cinema Night". Loaded only by /index.html. */

/* ---------- Fonts (self-hosted) + metric-matched fallbacks ---------- */
@font-face{font-family:Outfit;src:url(/fonts/outfit-latin.woff2) format("woff2"),url(/fonts/outfit.ttf) format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url(/fonts/manrope-latin.woff2) format("woff2"),url(/fonts/manrope.ttf) format("truetype");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 900;size-adjust:94.2%;ascent-override:106%;descent-override:27.6%;line-gap-override:0%}
@font-face{font-family:"Outfit Fallback";src:local("Arial"),local("ArialMT");font-weight:100 599;size-adjust:98.3%;ascent-override:101.7%;descent-override:26.4%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("ArialMT");font-weight:200 599;size-adjust:101.6%;ascent-override:104.9%;descent-override:29.5%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 800;size-adjust:99.5%;ascent-override:107.1%;descent-override:30.2%;line-gap-override:0%}

/* ---------- Tokens ---------- */
:root{
  --bg:#07070a;--bg-deep:#040406;--bg-2:#0c0c11;--panel:#121218;--panel-2:#1a1a22;
  --line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.16);
  --text:#f6f3ec;--muted:#b8b3aa;--faint:#948f86;
  --gold:#ffd84d;--gold-2:#e9b72c;--gold-soft:#fff1b8;--gold-ink:#1a1500;--ember:#ff982f;--teal:#7cc7c7;
  --font-display:Outfit,"Outfit Fallback",system-ui,sans-serif;
  --font-body:Manrope,"Manrope Fallback",system-ui,sans-serif;
  --t-hero:clamp(2.5rem,.6rem + 5.6vw,5.5rem);
  --t-h2:clamp(2.1rem,1.3rem + 3.4vw,4rem);
  --t-h3-xl:clamp(1.65rem,1.15rem + 1.9vw,2.6rem);
  --t-h3:clamp(1.15rem,1rem + .5vw,1.375rem);
  --t-price:clamp(5rem,2.6rem + 9vw,10rem);
  --t-lede:clamp(1.06rem,.98rem + .4vw,1.3rem);
  --section:clamp(56px,7vw,104px);--gutter:clamp(16px,4vw,40px);
  --r-xs:8px;--r-sm:12px;--r-md:18px;--r-lg:24px;--r-xl:32px;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);--ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-settle:cubic-bezier(.12,.9,.25,1.06);
  --shadow-tv:0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.6),0 60px 120px -40px rgba(0,0,0,.95),-40px 0 120px -60px rgba(124,199,199,.18);
  --glow-screen:0 0 140px -30px rgba(255,216,77,.32),0 0 320px 0 rgba(255,216,77,.08);
  --glow-gold-sm:0 0 0 1px rgba(255,216,77,.5),0 0 16px rgba(255,216,77,.35);
  --glow-btn:0 10px 36px -10px rgba(255,216,77,.65);
  --grad-gold:linear-gradient(100deg,#ffd84d 0%,#fff1b8 45%,#ffd84d 60%,#e9b72c 100%);
  --grad-panel:linear-gradient(160deg,#16161d 0%,#0d0d12 60%,#0a0a0e 100%);
  --grad-hairline:linear-gradient(90deg,transparent,rgba(255,216,77,.45) 50%,transparent);
  --grad-beam:linear-gradient(to bottom,rgba(255,241,184,.2),rgba(255,216,77,.06) 60%,transparent 95%);
  --grad-floor:radial-gradient(50% 50% at 50% 50%,rgba(255,216,77,.28),transparent 70%);
  --grad-wall:radial-gradient(60% 50% at 50% 55%,rgba(255,216,77,.18),transparent 70%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--font-display);font-optical-sizing:auto;text-wrap:balance;margin:0}
p,li{text-wrap:pretty}
ul,ol{margin:0}
figure{margin:0}
strong,b{font-weight:700}
::selection{background:rgba(255,216,77,.35);color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{width:min(75rem,100% - 2 * var(--gutter));margin-inline:auto}
.line{display:block}
.skip-link{position:fixed;left:16px;top:12px;z-index:60;padding:12px 18px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-weight:700;text-decoration:none;transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* gold gradient text */
.gold-text{background:var(--grad-gold);background-size:200% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 24px rgba(255,216,77,.3))}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){.gold-text{color:var(--gold);-webkit-text-fill-color:currentColor;background:none}}
/* a filter on a transformed, text-clipped element can paint its whole box in Chromium: glow from the static parent instead */
.line>.gold-text{filter:none}
.line:has(>.gold-text){position:relative}
.line:has(>.gold-text)::before{content:"";position:absolute;inset:0 12%;z-index:-1;background:radial-gradient(closest-side,rgba(255,216,77,.16),transparent);pointer-events:none}

/* ---------- Buttons, links, kickers ---------- */
.btn-gold,.btn-ghost{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 26px;border-radius:999px;font:700 .95rem/1.1 var(--font-body);text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease-out-quart),background-color .2s,border-color .2s}
.btn-gold{background:var(--gold);color:var(--gold-ink)}
.btn-gold::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--glow-btn);opacity:.75;transition:opacity .2s}
.btn-gold:hover{background:#ffe170}
.btn-gold:hover::after{opacity:1}
.btn-ghost{background:rgba(255,255,255,.04);border:1px solid var(--line-strong);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,216,77,.45)}
.btn-sm{min-height:44px;padding:10px 18px;font-size:.86rem}
.arr,.arr-ne,.arr-down{display:inline-block;transition:transform .2s var(--ease-out-quart)}
.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--gold);font-weight:700;text-decoration:none}
.text-link:hover{text-decoration:underline;text-underline-offset:5px}
.link-more{display:inline-flex;align-items:center;min-height:44px;color:var(--text);font-weight:700;text-decoration:underline;text-decoration-color:rgba(255,216,77,.55);text-decoration-thickness:2px;text-underline-offset:7px}
.link-more:hover{text-decoration-color:var(--gold)}
.kicker{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:var(--gold);font:700 .78rem/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase}
.kicker::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.sub{margin:0;max-width:40rem;color:var(--muted);font-size:var(--t-lede);line-height:1.6}
.sub a{color:var(--gold)}
h2{margin:0 0 20px;font-size:var(--t-h2);font-weight:700;line-height:1.02;letter-spacing:-.03em}
.section-head{margin-bottom:clamp(32px,4vw,56px)}
.head--center{text-align:center}
.head--center .kicker{justify-content:center}
.head--center .sub,.head--center .tour-disclosure{margin-inline:auto}
@media (min-width:64rem){
  .head--split{display:grid;grid-template-columns:7fr 5fr;column-gap:clamp(32px,5vw,80px);align-items:end}
  .head--split .kicker{grid-column:1/-1}
  .head--split h2{grid-column:1;margin:0}
  .head--split .sub{grid-column:2;grid-row:2;margin:0;padding-bottom:.45em;padding-left:clamp(20px,2vw,28px);border-left:1px solid rgba(255,216,77,.28)}
}
figcaption{color:var(--faint);font-size:.78rem;line-height:1.5;text-align:center}

/* ---------- Header ---------- */
header.site{position:fixed;inset:0 0 auto;z-index:50}
header.site::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(7,7,10,.98);border-bottom:1px solid var(--line);transition:opacity .3s}
@keyframes glass{from{opacity:0}to{opacity:1}}
header.site::before{opacity:1}
@supports (animation-timeline:scroll()){header.site::before{animation:glass linear both;animation-timeline:scroll(root block);animation-range:0px 80px}}
header.site.glass-js::before{animation:none;opacity:0}
header.site.glass-js.is-scrolled::before,header.site[data-menu-open]::before{opacity:1}
.nav-row{position:relative;display:flex;align-items:center;gap:12px 16px;min-height:64px;width:min(90rem,100% - 2 * var(--gutter));margin-inline:auto}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;color:var(--text);font:700 1.25rem/1 var(--font-display);letter-spacing:-.02em;text-decoration:none}
.brand-logo{width:34px;height:34px;filter:drop-shadow(0 0 12px rgba(255,216,77,.35))}
.menu-sheet{display:flex;align-items:center;gap:6px}
nav.site{display:flex;align-items:center;gap:2px}
nav.site a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:999px;color:var(--muted);font:600 .86rem/1 var(--font-body);text-decoration:none;white-space:nowrap;transition:color .2s}
nav.site a:hover{color:var(--text)}
nav.site a[href^="#"]::after{content:"";position:absolute;left:10px;right:10px;bottom:8px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease-out-quart)}
nav.site a[aria-current]{color:var(--gold)}
nav.site a[aria-current]::after{transform:scaleX(1)}
nav.site .nav-library{margin-left:6px;padding:0 16px;color:var(--text);border:1px solid var(--line-strong);background:rgba(255,255,255,.04)}
.nav-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,255,255,.05);color:var(--text);font:600 .9rem/1 var(--font-body);cursor:pointer}
.nav-toggle[hidden]{display:none}
.menu-lines{position:relative;width:16px;height:10px;border-block:2px solid currentColor;transition:transform .2s}
header.site[data-menu-open] .menu-lines{border-bottom-color:transparent;transform:translateY(2px)}
.nav-sections{display:contents}
@media (min-width:84rem){
  .nav-row{min-height:72px}
  .nav-toggle,.nav-toggle[hidden]{display:none}
  /* section links sit in the middle; Log in, My library and Try free stay right */
  .brand{margin-right:0}
  .menu-sheet,nav.site{flex:1;min-width:0}
  .nav-sections{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px}
  .nav-login{margin-left:auto}
}
@media (max-width:83.99rem){
  .nav-cta{order:2}
  .nav-toggle{order:3}
  .menu-sheet{order:4}
  /* no-JS: a scrollable chip row under the brand */
  header.site:not(.menu-ready) .nav-row{flex-wrap:wrap;padding-bottom:4px}
  header.site:not(.menu-ready) .menu-sheet{order:5;width:100%;min-width:0}
  header.site:not(.menu-ready) nav.site{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  header.site:not(.menu-ready) nav.site::-webkit-scrollbar{display:none}
  header.site:not(.menu-ready)::before{opacity:1}
  /* the no-JS header is two rows tall: keep the hero clear of it */
  body:has(header.site:not(.menu-ready)) .hero{padding-top:124px}
  /* JS: a disclosure sheet */
  header.site.menu-ready .menu-sheet{position:absolute;top:100%;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));display:none;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100vh - 64px);overflow:auto;padding:8px var(--gutter) 20px;background:#0a0a0e;border-bottom:1px solid var(--line);box-shadow:0 40px 80px -20px rgba(0,0,0,.8)}
  header.site.menu-ready[data-menu-open] .menu-sheet{display:flex}
  header.site.menu-ready nav.site{flex-direction:column;align-items:stretch;gap:0}
  header.site.menu-ready nav.site a{min-height:52px;padding:0 4px;border-radius:0;border-bottom:1px solid var(--line);font-size:1rem}
  header.site.menu-ready nav.site a::after{left:4px;right:auto;width:28px;bottom:10px}
  header.site.menu-ready nav.site .nav-library{margin:16px 0 0;justify-content:center;border-radius:999px;border:1px solid var(--line-strong)}
}
@media (max-width:29.99rem){.brand{font-size:1.1rem}.brand-logo{width:30px;height:30px}.nav-cta{padding-inline:14px}}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:clip;padding:96px 0 clamp(36px,4vw,52px);text-align:center;background:var(--bg)}
.top-sentinel{position:absolute;top:0;left:0;width:1px;height:80px;pointer-events:none}
.hero-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:clip}
.hero-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(7,7,10,.85) 82%,var(--bg) 96%)}
.sky-photo{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55)),linear-gradient(to bottom,rgba(7,7,10,.2),rgba(7,7,10,.65) 40%,#07070a 75%)}
.sky-photo::before{content:"";position:absolute;inset:0 0 25%;z-index:-1;background:url(/img/night.jpg) center 30%/cover no-repeat;background-image:image-set(url(/img/night.webp) type("image/webp"),url(/img/night.jpg) type("image/jpeg"));opacity:.38}
.stars{position:absolute;inset:-10% 0 -50%;background-repeat:repeat}
.stars--far{opacity:.75;background-size:1171px 1171px;background-position:217px 91px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1171' height='1171'%3E%3Ccircle cx='929' cy='1149' r='0.8' fill='%23fff1b8' opacity='0.87'/%3E%3Ccircle cx='956' cy='928' r='0.7' fill='%23fff1b8' opacity='0.85'/%3E%3Ccircle cx='391' cy='381' r='0.7' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='977' cy='384' r='0.5' fill='%23fff' opacity='0.96'/%3E%3Ccircle cx='624' cy='293' r='0.5' fill='%23fff' opacity='0.68'/%3E%3Ccircle cx='88' cy='814' r='0.8' fill='%23fff' opacity='0.84'/%3E%3Ccircle cx='325' cy='33' r='0.7' fill='%23fff' opacity='0.95'/%3E%3Ccircle cx='132' cy='124' r='0.5' fill='%23fff' opacity='0.94'/%3E%3Ccircle cx='498' cy='64' r='0.7' fill='%23fff' opacity='0.71'/%3E%3Ccircle cx='671' cy='905' r='0.7' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='403' cy='1066' r='0.6' fill='%23fff' opacity='0.93'/%3E%3Ccircle cx='605' cy='1026' r='0.5' fill='%23fff' opacity='0.79'/%3E%3Ccircle cx='177' cy='939' r='0.7' fill='%23fff' opacity='0.81'/%3E%3Ccircle cx='836' cy='1131' r='0.8' fill='%23fff' opacity='0.69'/%3E%3Ccircle cx='173' cy='523' r='0.6' fill='%23fff' opacity='0.79'/%3E%3Ccircle cx='594' cy='63' r='0.5' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='224' cy='823' r='0.5' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='598' cy='794' r='0.5' fill='%23fff' opacity='0.82'/%3E%3Ccircle cx='37' cy='4' r='0.6' fill='%23fff' opacity='1.0'/%3E%3Ccircle cx='771' cy='816' r='0.6' fill='%23fff' opacity='0.94'/%3E%3Ccircle cx='1162' cy='409' r='0.7' fill='%23fff' opacity='0.86'/%3E%3Ccircle cx='555' cy='692' r='0.5' fill='%23fff' opacity='0.69'/%3E%3Ccircle cx='684' cy='34' r='0.8' fill='%23fff' opacity='0.87'/%3E%3Ccircle cx='244' cy='278' r='0.6' fill='%23fff' opacity='0.79'/%3E%3Ccircle cx='209' cy='25' r='0.5' fill='%23fff' opacity='0.72'/%3E%3Ccircle cx='919' cy='1045' r='0.6' fill='%23fff' opacity='0.92'/%3E%3Ccircle cx='788' cy='241' r='0.6' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='438' cy='3' r='0.6' fill='%23fff' opacity='0.88'/%3E%3Ccircle cx='89' cy='302' r='0.6' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='676' cy='609' r='0.6' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='430' cy='500' r='0.5' fill='%23fff' opacity='0.74'/%3E%3Ccircle cx='931' cy='263' r='0.8' fill='%23fff' opacity='0.62'/%3E%3Ccircle cx='793' cy='377' r='0.7' fill='%23fff' opacity='0.85'/%3E%3Ccircle cx='639' cy='470' r='0.7' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='513' cy='391' r='0.5' fill='%23fff' opacity='0.81'/%3E%3Ccircle cx='798' cy='991' r='0.7' fill='%23fff' opacity='0.96'/%3E%3Ccircle cx='866' cy='100' r='0.5' fill='%23fff' opacity='0.63'/%3E%3Ccircle cx='82' cy='1052' r='0.8' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='491' cy='805' r='0.6' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='1008' cy='603' r='0.7' fill='%23fff' opacity='0.84'/%3E%3Ccircle cx='470' cy='984' r='0.7' fill='%23fff' opacity='0.6'/%3E%3Ccircle cx='36' cy='144' r='0.6' fill='%23fff' opacity='0.58'/%3E%3Ccircle cx='915' cy='513' r='0.5' fill='%23fff' opacity='0.95'/%3E%3Ccircle cx='363' cy='580' r='0.6' fill='%23fff' opacity='0.83'/%3E%3Ccircle cx='272' cy='191' r='0.6' fill='%23fff' opacity='0.72'/%3E%3Ccircle cx='925' cy='680' r='0.7' fill='%23fff' opacity='0.95'/%3E%3Ccircle cx='1071' cy='290' r='0.7' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='39' cy='975' r='0.8' fill='%23fff' opacity='0.83'/%3E%3Ccircle cx='990' cy='140' r='0.7' fill='%23fff' opacity='0.6'/%3E%3Ccircle cx='756' cy='94' r='0.8' fill='%23fff' opacity='0.72'/%3E%3C/svg%3E")}
.stars--mid{opacity:.8;background-size:887px 887px;background-position:-341px 173px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='887' height='887'%3E%3Ccircle cx='828' cy='775' r='1.1' fill='%23fff1b8' opacity='0.99'/%3E%3Ccircle cx='222' cy='396' r='0.7' fill='%23fff1b8' opacity='0.99'/%3E%3Ccircle cx='327' cy='217' r='0.7' fill='%23fff1b8' opacity='0.77'/%3E%3Ccircle cx='511' cy='362' r='1.0' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='872' cy='44' r='1.0' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='286' cy='844' r='0.7' fill='%23fff' opacity='0.95'/%3E%3Ccircle cx='464' cy='485' r='0.7' fill='%23fff' opacity='0.93'/%3E%3Ccircle cx='426' cy='394' r='0.9' fill='%23fff' opacity='0.67'/%3E%3Ccircle cx='508' cy='691' r='0.8' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='862' cy='865' r='1.1' fill='%23fff' opacity='0.72'/%3E%3Ccircle cx='79' cy='851' r='0.6' fill='%23fff' opacity='0.78'/%3E%3Ccircle cx='625' cy='45' r='0.9' fill='%23fff' opacity='0.88'/%3E%3Ccircle cx='290' cy='587' r='0.8' fill='%23fff' opacity='0.74'/%3E%3Ccircle cx='667' cy='813' r='0.9' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='659' cy='142' r='0.8' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='197' cy='28' r='1.0' fill='%23fff' opacity='0.53'/%3E%3Ccircle cx='800' cy='147' r='1.0' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='460' cy='114' r='0.9' fill='%23fff' opacity='0.59'/%3E%3Ccircle cx='673' cy='658' r='1.0' fill='%23fff' opacity='0.67'/%3E%3Ccircle cx='82' cy='703' r='0.7' fill='%23fff' opacity='0.89'/%3E%3Ccircle cx='846' cy='489' r='0.7' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='734' cy='14' r='1.0' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='40' cy='186' r='0.7' fill='%23fff' opacity='0.76'/%3E%3Ccircle cx='800' cy='357' r='0.9' fill='%23fff' opacity='0.86'/%3E%3Ccircle cx='535' cy='515' r='0.9' fill='%23fff' opacity='0.92'/%3E%3Ccircle cx='405' cy='872' r='1.0' fill='%23fff' opacity='0.84'/%3E%3Ccircle cx='232' cy='92' r='0.8' fill='%23fff' opacity='0.97'/%3E%3Ccircle cx='742' cy='400' r='0.7' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='467' cy='204' r='0.9' fill='%23fff' opacity='0.97'/%3E%3Ccircle cx='9' cy='388' r='0.9' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='671' cy='517' r='1.0' fill='%23fff' opacity='0.61'/%3E%3Ccircle cx='354' cy='477' r='0.8' fill='%23fff' opacity='0.76'/%3E%3Ccircle cx='742' cy='840' r='1.0' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='221' cy='251' r='1.0' fill='%23fff' opacity='0.86'/%3E%3C/svg%3E")}
.stars--near{opacity:.95;background-size:613px 613px;background-position:89px -257px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='613' height='613'%3E%3Ccircle cx='171' cy='538' r='1.3' fill='%23fff1b8' opacity='0.97'/%3E%3Ccircle cx='576' cy='265' r='1.1' fill='%23fff1b8' opacity='0.77'/%3E%3Ccircle cx='393' cy='216' r='1.1' fill='%23fff1b8' opacity='0.85'/%3E%3Ccircle cx='589' cy='512' r='1.1' fill='%23fff1b8' opacity='0.6'/%3E%3Ccircle cx='551' cy='120' r='1.3' fill='%23fff' opacity='0.81'/%3E%3Ccircle cx='389' cy='31' r='1.3' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='48' cy='531' r='1.6' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='560' cy='579' r='1.0' fill='%23fff' opacity='0.78'/%3E%3Ccircle cx='98' cy='173' r='1.0' fill='%23fff' opacity='0.68'/%3E%3Ccircle cx='426' cy='416' r='1.1' fill='%23fff' opacity='0.91'/%3E%3Ccircle cx='487' cy='507' r='1.0' fill='%23fff' opacity='0.68'/%3E%3Ccircle cx='540' cy='327' r='1.0' fill='%23fff' opacity='0.85'/%3E%3Ccircle cx='269' cy='135' r='1.5' fill='%23fff' opacity='0.82'/%3E%3Ccircle cx='26' cy='39' r='1.1' fill='%23fff' opacity='0.67'/%3E%3Ccircle cx='235' cy='15' r='1.4' fill='%23fff' opacity='1.0'/%3E%3Ccircle cx='332' cy='366' r='1.1' fill='%23fff' opacity='0.92'/%3E%3Ccircle cx='259' cy='205' r='1.5' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='142' cy='241' r='1.6' fill='%23fff' opacity='0.74'/%3E%3Ccircle cx='202' cy='102' r='1.0' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='400' cy='102' r='1.2' fill='%23fff' opacity='0.88'/%3E%3C/svg%3E")}
.leak{position:absolute;width:50vmax;height:50vmax;border-radius:50%;pointer-events:none}
.leak--gold{top:-22vmax;left:-12vmax;background:radial-gradient(closest-side,rgba(255,216,77,.22),transparent)}
.leak--ember{top:8%;right:-20vmax;background:radial-gradient(closest-side,rgba(255,152,47,.12),transparent)}
.leak--teal{top:38%;left:-26vmax;background:radial-gradient(closest-side,rgba(124,199,199,.1),transparent)}
.wall-wash{position:absolute;left:50%;top:38%;width:min(110rem,180%);height:58%;transform:translateX(-50%);background:var(--grad-wall);opacity:.75}
.beam{position:absolute;left:50%;top:0;width:min(96rem,150%);height:62%;transform:translateX(-50%);clip-path:polygon(44% 0,56% 0,94% 100%,6% 100%);background:var(--grad-beam);opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%);mask-image:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%)}
.motes{position:absolute;left:50%;top:44%;width:2px;height:2px;border-radius:50%;opacity:0;background:transparent;box-shadow:-180px 30px 0 rgba(255,241,184,.8),-120px -40px 0 rgba(255,241,184,.6),-60px 80px 0 rgba(255,241,184,.7),-20px -10px 0 rgba(255,241,184,.9),30px 60px 0 rgba(255,241,184,.6),90px -30px 0 rgba(255,241,184,.8),150px 40px 0 rgba(255,241,184,.6),210px -60px 0 rgba(255,241,184,.5),-240px -80px 0 rgba(255,241,184,.5),-90px 140px 0 rgba(255,241,184,.6),60px 150px 0 rgba(255,241,184,.5),130px 110px 0 rgba(255,241,184,.7),-150px 170px 0 rgba(255,241,184,.4),250px 120px 0 rgba(255,241,184,.4)}

.hero-copy{position:relative;z-index:2;max-width:52rem}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:7px 16px;border-radius:999px;border:1px solid rgba(255,216,77,.28);background:rgba(255,216,77,.06);color:var(--gold-soft);font:600 .82rem/1.3 var(--font-body);letter-spacing:.02em}
.eyebrow .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(255,216,77,.18),0 0 12px var(--gold)}
.hero h1{margin:0 0 18px;font-size:var(--t-hero);font-weight:700;line-height:.98;letter-spacing:-.035em}
.hero h1 .line>span{display:block}
.lede{max-width:48rem;margin:0 auto 26px;text-wrap:balance;color:var(--muted);font-size:var(--t-lede);line-height:1.6}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 28px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px}

/* ticket (hero pricing) */
.hero-pricing{--perf:10.5rem;display:grid;grid-template-columns:var(--perf) auto;text-align:left;border:1px solid rgba(255,216,77,.3);border-radius:16px;background:var(--grain),radial-gradient(ellipse at top,#2a220a,#0d0d10 70%);
  -webkit-mask:radial-gradient(circle 8px at var(--perf) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 8px at var(--perf) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 8px at var(--perf) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 8px at var(--perf) 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.hero-pricing p{align-self:center;margin:0;padding:12px 16px 12px 18px;color:var(--muted);font-size:.86rem;line-height:1.35}
.hero-pricing p strong{color:var(--text)}
.hero-pricing a{display:grid;gap:2px;align-content:center;min-height:64px;padding:10px 20px;border-left:1px dashed rgba(255,255,255,.22);color:var(--text);text-decoration:none;border-radius:0 15px 15px 0;transition:background-color .2s}
.hero-pricing a:hover{background:rgba(255,216,77,.06)}
.hero-pricing a>span:first-child{font:600 1.15rem/1.1 var(--font-display);color:var(--text)}
.hero-pricing a>span:first-child strong{color:var(--gold);font-size:1.5rem;font-weight:800}
.hero-pricing a>span:last-child{color:var(--faint);font-size:.76rem}
.hero-pricing a:focus-visible{outline-offset:-3px}

/* the TV */
/* the stage is pulled up under the copy: the tilt pushes the TV's top edge down, so its visible top lands just below the CTAs */
.hero-stage{--pull:clamp(0px,13vw - 44px,112px);position:relative;z-index:1;width:min(66rem,92vw);margin:calc(clamp(20px,2.4vw,32px) - var(--pull)) auto 0}
.hero-tv{transform-origin:50% 100%;transform:perspective(1800px) rotateX(6deg)}
.tv{position:relative}
.tv-bezel{position:relative;container-type:inline-size;padding:clamp(6px,1vw,12px);border-radius:22px;background:linear-gradient(180deg,#2a2a31,#0e0e12 60%,#0a0a0d);box-shadow:var(--shadow-tv),var(--glow-screen)}
.tv-screen{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border-radius:12px;background:#000;container-type:inline-size;color:var(--text);text-decoration:none}
.tv-screen picture{height:100%}
.tv-screen picture img{width:100%;height:100%;object-fit:cover}
a.tv-screen{cursor:zoom-in}
.tv-screen:focus-visible{outline-offset:2px}
.tv-screen::before{content:"";position:absolute;left:0;right:0;top:50%;z-index:3;height:2px;margin-top:-1px;background:#fff;box-shadow:0 0 24px 6px rgba(255,255,255,.55);opacity:0;pointer-events:none}
.tv-glare{position:absolute;inset:0 -20%;z-index:2;background:linear-gradient(115deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.02) 35%,transparent 36%);pointer-events:none}
.tv-led{position:absolute;left:50%;bottom:max(1px,calc(clamp(6px,1vw,12px) / 2 - 3px));width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--gold);box-shadow:var(--glow-gold-sm)}
.tv-stand{position:relative;display:block;width:34%;height:26px;margin:0 auto}
.tv-stand::before{content:"";position:absolute;left:50%;top:0;width:24%;height:18px;transform:translateX(-50%);background:linear-gradient(#1c1c21,#0a0a0c)}
.tv-stand::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;border-radius:8px;background:linear-gradient(#26262c,#0a0a0c);box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.tv-floor{position:absolute;left:-5%;right:-5%;bottom:-34px;z-index:-1;height:60px;background:var(--grad-floor)}
.hero-seat{position:absolute;left:-12%;bottom:0;z-index:3;width:clamp(8rem,11vw,10.5rem);filter:drop-shadow(0 24px 30px rgba(0,0,0,.7))}

/* remote-focus overlay on captures (coordinates in capture pixels, 1920 wide) */
.tv-focus{--cx:0;--cy:0;--cw:1920;position:absolute;z-index:2;left:calc((var(--fx) - var(--cx)) * 100cqi / var(--cw));top:calc((var(--fy) - var(--cy)) * 100cqi / var(--cw));width:calc(var(--fw) * 100cqi / var(--cw));height:calc(var(--fh) * 100cqi / var(--cw));border-radius:calc(var(--fr) * 100cqi / var(--cw));overflow:hidden;opacity:.6;box-shadow:0 0 0 2px rgba(255,216,77,.9),0 0 28px 6px rgba(255,216,77,.4);pointer-events:none}
.tv-sheen{position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-120%)}
.cap-home{--fx:36;--fy:68;--fw:1847;--fh:354;--fr:12}
.cap-live{--fx:36;--fy:297;--fw:715;--fh:70;--fr:10}

.hero-credits{position:relative;margin-top:clamp(28px,3.4vw,48px)}
.hero-caption{position:relative;margin:18px 0 0;color:var(--faint);font-size:.78rem}
.hero-caption a{color:var(--muted);text-decoration-color:rgba(255,216,77,.5);text-underline-offset:3px}
.hero-benefits{display:grid;gap:12px;max-width:72rem;margin:0 auto;padding:0;list-style:none}
.hero-benefits li{color:var(--text);font:600 1.02rem/1.35 var(--font-display);text-align:center}
.hero-benefits li::before{content:"✦";content:"✦" / "";margin-right:10px;color:var(--gold);font-size:.8em;vertical-align:.1em}
.hero-sources{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 24px;margin-top:18px}
.source-support{margin:0;color:var(--muted);font-size:.9rem;font-weight:700;letter-spacing:.04em}
.source-support span{margin-left:8px;color:var(--faint);font-weight:500;letter-spacing:0}
@media (min-width:48rem){
  .hero-benefits{grid-template-columns:repeat(3,1fr);padding:22px 0;border-block:1px solid var(--line)}
}
@media (max-width:63.99rem){.hero-seat{display:none}}
@media (max-width:47.99rem){
  .hero{padding-top:88px}
  .eyebrow{margin-bottom:14px;font-size:.78rem}
  .hero h1{margin-bottom:14px}
  .lede{margin-bottom:20px;font-size:1rem}
  .hero-actions,.cta-row{flex-direction:column;align-items:stretch;width:100%}
  .hero-actions{gap:10px}
  .cta-row{gap:2px}
  .hero-actions .btn-gold{width:100%}
  .cta-row .link-more{justify-content:center}
  .hero-pricing{--perf:44%;grid-template-columns:var(--perf) 1fr}
  .hero-pricing p{padding:10px 12px;font-size:.8rem}
  .hero-pricing a{min-height:58px;padding:8px 14px}
  .hero-pricing a>span:last-child{font-size:.74rem;line-height:1.3}
  .hero-stage{width:calc(100% - 24px);margin-top:28px}
  .tv-stand{display:none}
  .tv--hero .tv-bezel{border-radius:14px}
  .tv--hero .tv-screen{border-radius:9px}
  .tv-floor{left:20%;right:20%;bottom:-30px}
  .beam{clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);height:60%}
  .leak--teal{display:none}
}

/* ---------- Marquee ---------- */
.marquee{position:relative;padding:8px 0;border-block:1px solid var(--line);background:linear-gradient(180deg,#0b0b0f,#08080b)}
.marquee::before,.marquee::after{content:"";position:absolute;inset:5px 0;pointer-events:none;background:radial-gradient(circle,#ffd84d 0 1.6px,transparent 2.2px) 0 0/18px 8px repeat-x,radial-gradient(circle,#ffd84d 0 1.6px,transparent 2.2px) 0 100%/18px 8px repeat-x;opacity:.9}
.marquee::after{background-position:9px 0,9px 100%;opacity:.3}
.marquee-viewport{overflow:hidden;padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;width:max-content}
.marquee-list{display:flex;flex:none;margin:0;padding:0;list-style:none}
.marquee-list li{display:flex;align-items:center;white-space:nowrap;color:var(--muted);font:600 clamp(1.1rem,1rem + .8vw,1.6rem)/1.2 var(--font-display);letter-spacing:-.01em}
.marquee-list li::before{content:"✦";content:"✦" / "";margin-inline:clamp(18px,2.5vw,36px);color:var(--gold);font-size:.55em;opacity:.85}
.marquee-list b{margin-right:.28em;color:var(--gold);font-weight:700}
/* ---------- Generic sections ---------- */
main>section:not(.hero):not(.marquee):not(.encore):not(.footnotes){position:relative;padding-block:var(--section)}
main>section:not(.hero):not(.marquee):not(.footnotes)::before{content:"";position:absolute;top:0;left:50%;width:min(60rem,90%);height:1px;transform:translateX(-50%);background:var(--grad-hairline);opacity:.35;pointer-events:none}
/* One continuous dark room: sections never change the base colour. Each one gets a soft pool of light
   behind its visual instead, sized so it fades out well before the section's top and bottom edges. */
.live{background:radial-gradient(40rem 24rem at 70% 44%,rgba(255,90,79,.06),transparent 70%)}
.setup{background:radial-gradient(54rem 16rem at 50% 56%,rgba(255,216,77,.055),transparent 70%)}
.pricing{background:radial-gradient(40rem 26rem at 34% 64%,rgba(255,216,77,.085),transparent 70%)}
.faq-section{background:radial-gradient(30rem 26rem at 14% 34%,rgba(255,216,77,.045),transparent 70%)}
.card{position:relative;isolation:isolate;padding:clamp(20px,2.4vw,32px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--grain),var(--grad-panel);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .3s,transform .6s var(--ease-out-expo)}
.card::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 50px -10px rgba(255,216,77,.22);opacity:0;transition:opacity .3s;pointer-events:none}
.card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(255,216,77,.12),transparent 60%);opacity:0;transition:opacity .2s;pointer-events:none}
.card:hover,.card:focus-within{border-color:rgba(255,216,77,.35)}
.card:hover::after,.card:focus-within::after,.card:hover::before{opacity:1}
.card h3{margin:0 0 10px;font-size:var(--t-h3);font-weight:600;line-height:1.2;letter-spacing:-.015em}
.card p{color:var(--muted);font-size:.95rem;line-height:1.6}
.card p:last-child{margin-bottom:0}
/* the Live heading shares a row with its visual, so it runs a size smaller and never orphans a word */
.live-copy h2{font-size:clamp(2.1rem,1.3rem + 2.6vw,3.4rem)}
@media (min-width:64rem){.live-visual{position:sticky;top:104px}}
/* sections that end in a caption or notice don't need the full bottom spacing */
main>section:not(.hero):not(.marquee):not(.encore):not(.footnotes):is(.tour,.setup){padding-bottom:calc(var(--section) * .7)}
.rule-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.rule-list>*{position:relative;padding:18px 0 18px 22px;border-top:1px solid var(--line)}
.rule-list>*::before{content:"";position:absolute;left:0;top:26px;width:8px;height:8px;border-radius:2px;background:var(--gold);box-shadow:var(--glow-gold-sm)}
.rule-list h3{margin:0 0 6px;font-size:1.08rem;font-weight:600;letter-spacing:-.01em}
.rule-list p{margin:0;color:var(--muted);font-size:.95rem}

/* ---------- Tour: one evening ----------
   Six story steps scroll on the left; one sticky TV on the right changes channel per step.
   home.js sets --night (0 at 7:42 pm, 1 at midnight) on .tour; everything that follows the
   evening (sky, stars, TV glow, sun and moon) cross-fades with opacity only.
   Without JS (or below 56.25rem) it is a plain stack: every step shows its own screen. */
.tour{--night:0;isolation:isolate;overflow:clip}
.tour .section-head{margin-bottom:clamp(20px,3vw,40px)}
.tour-sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.tour-sky>span{position:absolute;inset:0;transition:opacity 1.8s var(--ease-in-out)}
.sky-dusk{background:radial-gradient(60rem 36rem at 72% 34%,rgba(255,140,50,.1),transparent 70%),radial-gradient(44rem 30rem at 18% 72%,rgba(255,216,77,.05),transparent 70%);opacity:calc(1 - var(--night))}
.sky-night{background:radial-gradient(64rem 40rem at 70% 38%,rgba(82,98,220,.14),transparent 70%),radial-gradient(40rem 30rem at 14% 78%,rgba(124,199,199,.06),transparent 70%);opacity:var(--night)}
.sky-stars{background-image:radial-gradient(1.4px 1.4px at 8% 12%,#fff,transparent),radial-gradient(1px 1px at 23% 64%,#fff,transparent),radial-gradient(1.2px 1.2px at 41% 28%,#fff,transparent),radial-gradient(1px 1px at 57% 82%,#fff,transparent),radial-gradient(1.6px 1.6px at 72% 46%,#fff,transparent),radial-gradient(1px 1px at 88% 14%,#fff,transparent),radial-gradient(1.2px 1.2px at 94% 70%,#fff,transparent);background-size:560px 440px;opacity:clamp(0,(var(--night) - .18) * 1.4,.55);-webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.4) 70%,transparent);mask-image:linear-gradient(#000,rgba(0,0,0,.4) 70%,transparent)}
.sky-stars--late{background-size:390px 330px;background-position:140px 90px;opacity:clamp(0,(var(--night) - .55) * 2,.75)}
.tour-disclosure{max-width:44rem;margin:18px 0 0;color:var(--faint);font-size:.8rem;line-height:1.55}
.tour-limit{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--faint);font-size:.8rem;line-height:1.55}

/* tonight's programme: a TV-guide strip that links to each step */
.programme{max-width:64rem;margin:28px auto 0;padding:14px 14px 12px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));text-align:left}
.programme-title{display:flex;align-items:center;gap:8px;margin:0 0 8px 10px;color:var(--gold-soft);font:700 .72rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase}
.programme-title svg{width:14px;height:14px;fill:var(--gold);filter:drop-shadow(0 0 6px rgba(255,216,77,.5))}
.programme ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:0;padding:0;list-style:none}
.programme a{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:52px;padding:8px 10px;border-radius:10px;color:var(--muted);font-size:.84rem;line-height:1.3;text-decoration:none;transition:background-color .25s,color .25s}
.programme time{color:var(--text);font:600 1.02rem/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em;transition:color .25s}
.programme a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.programme a[aria-current]{background:rgba(255,216,77,.08);color:var(--text)}
.programme a[aria-current] time{color:var(--gold)}
.programme a::after{content:"";position:absolute;right:10px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);opacity:0;transition:opacity .3s}
.programme a[aria-current]::after{opacity:1}
.programme a:focus-visible{outline-offset:-3px}
@media (min-width:40rem){.programme ol{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:64rem){.programme ol{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* the story steps */
.evening{position:relative;width:min(46rem,100% - 2 * var(--gutter));margin-inline:auto}
.ev-steps{position:relative;padding-left:40px}
.ev-rail{position:absolute;left:13px;top:var(--rail-top,24px);height:var(--rail-h,calc(100% - 48px));width:2px;border-radius:2px;background:rgba(255,255,255,.1)}
.ev-rail i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(var(--gold),var(--ember));box-shadow:0 0 12px rgba(255,216,77,.5);transform-origin:50% 0;transform:scaleY(var(--fill,0));transition:transform 1.1s var(--ease-out-expo)}
.ev-step{position:relative;padding-block:clamp(24px,4vw,40px)}
.ev-step:target{scroll-margin-top:96px}
.ev-time{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 14px;color:var(--gold);font:700 .8rem/1.2 var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.ev-time time{font-variant-numeric:tabular-nums}
.ev-time span{color:var(--muted);font:600 .86rem/1.2 var(--font-body);letter-spacing:.01em;text-transform:none}
.ev-time span::before{content:"·";content:"·" / "";margin-right:10px;color:var(--faint)}
.ev-time::before,.ev-time::after{content:"";position:absolute;left:-33px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%}
.ev-time::before{background:var(--bg);border:2px solid rgba(255,255,255,.28);transition:border-color .4s,background-color .4s}
.ev-time::after{box-shadow:0 0 0 5px rgba(255,216,77,.14),0 0 18px 2px rgba(255,216,77,.55);opacity:0;transition:opacity .5s}
.ev-step.is-past .ev-time::before{border-color:var(--gold);background:var(--gold)}
.ev-step.is-active .ev-time::before{border-color:var(--gold);background:var(--bg)}
.ev-step.is-active .ev-time::after{opacity:1}
.ev-step h3{margin:0 0 16px;font-size:var(--t-h3-xl);font-weight:650;line-height:1.06;letter-spacing:-.025em}
.ev-step>p{color:var(--muted)}
.ev-step ul{display:grid;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.ev-step li{display:flex;gap:12px;font-size:.95rem;line-height:1.5}
.ev-step li::before{content:"";flex:none;width:9px;height:9px;margin-top:.45em;border-radius:3px;background:var(--gold);box-shadow:var(--glow-gold-sm)}
.ev-visual{display:grid;gap:12px;margin-top:26px}
.ev-visual figcaption{color:var(--faint);text-align:left;font-size:.78rem;line-height:1.5}

/* a screen: one capture (or illustration) plus its overlays, positioned in capture pixels.
   --u is one capture pixel; the episodes crop changes the scale and origin. */
.ev-shot{--cw:1920;--cx:0;--cy:0;--u:calc(100cqi / var(--cw));position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border-radius:10px;background:#000;color:var(--text);text-decoration:none;container-type:inline-size;box-shadow:0 0 0 clamp(4px,1.1vw,8px) #16161b,0 0 0 calc(clamp(4px,1.1vw,8px) + 1px) rgba(255,255,255,.09),0 30px 60px -22px rgba(0,0,0,.9)}
.ev-shot picture{height:100%}
.ev-shot img{width:100%;height:100%;object-fit:cover}
a.ev-shot{cursor:zoom-in}
.ev-fx{position:absolute;inset:0;pointer-events:none}
.ev-fx>*{position:absolute;left:calc((var(--x) - var(--cx)) * var(--u));top:calc((var(--y) - var(--cy)) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
.fx-play{--x:48;--y:281;--w:134;--h:48;--r:8}
.fx-poster{--x:36;--y:631;--w:424;--h:275;--r:16}
.fx-continue{--x:24;--y:510;--w:424;--h:276;--r:16}
.fx-because{--x:171;--y:872;--w:316;--h:4}
.fx-why{--x:1290;--y:98;--w:560;--h:292}
.fx-scrim{--x:787;--y:540;--w:1109;--h:216}
.fx-dip{--x:827;--y:168;--w:0;--h:0}
.fx-buf{--x:827;--y:690;--w:1029;--h:10}
.fx-bufkey{--x:827;--y:716;--w:700;--h:0}
.fx-buftag{--x:1556;--y:650;--w:300;--h:0}
.ev-shot--episodes{--cw:1136;--cx:12;--cy:52;background:#0b0b0e}
.ev-shot--episodes picture{position:absolute;left:calc(var(--cx) * -1 * var(--u));top:calc(var(--cy) * -1 * var(--u));width:calc(1920 * var(--u));max-width:none;height:auto}
.ev-shot--episodes img{height:auto;max-width:none;object-fit:fill}
.fx-e1{--x:24;--y:141;--w:364;--h:258;--r:18}
.fx-e2{--x:404;--y:146;--w:351;--h:249;--r:16}
.fx-e2prog{--x:420;--y:386;--w:319;--h:5}
.fx-c1{--x:24;--y:424;--w:0;--h:0}
.fx-c2{--x:404;--y:424;--w:0;--h:0}
.fx-c3{--x:784;--y:424;--w:0;--h:0}
.fx-next{--x:24;--y:506;--w:1111;--h:0}
.fx-pause{--x:40;--y:992;--w:56;--h:56;--r:10}
.fx-pchips{--x:1050;--y:996;--w:820;--h:48}
.fx-dip,.fx-bufkey,.fx-buftag,.fx-c1,.fx-c2,.fx-c3,.fx-next{width:auto;height:auto}
.fx-buftag{width:calc(var(--w) * var(--u))}
.fx-why{height:auto}

/* TV focus, as the app draws it: a white ring with a soft gold glow */
.ev-ring{border-radius:calc(var(--r,12) * var(--u));box-shadow:0 0 0 max(2px,calc(4 * var(--u))) #fff,0 0 calc(34 * var(--u)) calc(6 * var(--u)) rgba(255,216,77,.5)}
.ev-ring::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 calc(70 * var(--u)) calc(16 * var(--u)) rgba(255,216,77,.4);opacity:.5}
.ev-ring--b{opacity:0}
.ev-underline{border-radius:4px;background:var(--gold);box-shadow:0 0 12px rgba(255,216,77,.8);transform-origin:0 50%}

/* recommend: why this pick */
.ev-why{display:flex;flex-direction:column;gap:calc(12 * var(--u));padding:calc(28 * var(--u)) calc(32 * var(--u));border:1px solid rgba(255,216,77,.35);border-radius:calc(22 * var(--u));background:linear-gradient(160deg,rgba(28,24,14,.94),rgba(10,10,14,.94));box-shadow:0 20px 50px -10px rgba(0,0,0,.8),0 0 40px -8px rgba(255,216,77,.3);font-size:max(8px,calc(20 * var(--u)));line-height:1.25}
.ev-why-k{color:var(--gold);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.85em}
.ev-why strong{margin-top:-.2em;font:700 1.75em/1.05 var(--font-display);letter-spacing:-.02em}
.ev-sig{display:grid;grid-template-columns:7.5em 1fr;align-items:center;gap:.8em;color:var(--muted)}
.ev-sig i{height:calc(8 * var(--u));border-radius:9px;background:linear-gradient(90deg,var(--gold),var(--gold-soft));transform-origin:0 50%;box-shadow:0 0 10px rgba(255,216,77,.4)}
.ev-sig:nth-of-type(2) i{transform:scaleX(.72)}
.ev-sig:nth-of-type(3) i{transform:scaleX(.5)}
.ev-why-f{margin-top:auto;color:var(--faint);font-size:.8em}

/* buffer: played / loaded / still to load */
.ev-scrim{background:linear-gradient(transparent,rgba(0,0,0,.72))}
.ev-dip{display:flex;align-items:center;gap:.6em;padding:.55em .95em;border:1px solid rgba(255,216,77,.4);border-radius:.7em;background:rgba(8,8,12,.86);font-size:max(8px,calc(24 * var(--u)));font-weight:600;line-height:1.2;white-space:nowrap;box-shadow:0 10px 30px -8px rgba(0,0,0,.8)}
.ev-dip svg{flex:none;width:1.3em;height:1.3em;fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round}
.ev-dip circle{fill:var(--gold);stroke:none}
.ev-dip em{color:var(--gold);font-style:normal}
.ev-buf{border-radius:9px;background:rgba(255,255,255,.22)}
.ev-buf>i,.ev-buf-head{position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%}
.ev-buf-load{background:rgba(255,241,184,.6);transform:scaleX(.62)}
.ev-buf-play{background:var(--gold);box-shadow:0 0 12px rgba(255,216,77,.7);transform:scaleX(.3)}
.ev-buf-head{transform:translateX(30%)}
.ev-buf-head i{position:absolute;left:0;top:50%;width:max(8px,calc(24 * var(--u)));height:max(8px,calc(24 * var(--u)));border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,216,77,.45),0 0 14px rgba(255,216,77,.8);transform:translate(-50%,-50%)}
.ev-buf-key{display:flex;gap:1.6em;color:#e9e6df;font-size:max(7px,calc(19 * var(--u)));font-weight:600;white-space:nowrap}
.ev-buf-key span{display:inline-flex;align-items:center;gap:.5em}
.ev-buf-key span::before{content:"";width:.8em;height:.8em;border-radius:2px}
.ev-buf-key span:nth-child(1)::before{background:var(--gold)}
.ev-buf-key span:nth-child(2)::before{background:rgba(255,241,184,.6)}
.ev-buf-key span:nth-child(3)::before{background:rgba(255,255,255,.3)}
.ev-buf-tag{color:var(--gold);font:700 max(8px,calc(22 * var(--u)))/1 var(--font-display);text-align:right;letter-spacing:.04em}

/* series: chips, resume progress and the next-episode prompt */
.ev-prog{border-radius:4px;background:rgba(255,255,255,.25)}
.ev-prog i{position:absolute;inset:0;border-radius:inherit;background:var(--gold);transform-origin:0 50%;transform:scaleX(.32)}
.ev-chip{display:inline-flex;align-items:center;gap:.45em;padding:.45em 1em;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.07);color:#e9e6df;font:600 max(8px,calc(21 * var(--u)))/1.1 var(--font-body);white-space:nowrap}
.ev-chip::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor}
.ev-chip--gold{border-color:rgba(255,216,77,.5);background:rgba(255,216,77,.14);color:var(--gold)}
.fx-c3{color:#bfe6e6;border-color:rgba(124,199,199,.4);background:rgba(124,199,199,.1)}
.ev-next{right:calc((1148 - 1135) * var(--u));display:flex;align-items:center;gap:1.4em;padding:.9em 1.2em;border:1px solid var(--line-strong);border-radius:.8em;background:linear-gradient(160deg,#1a1a22,#111117);font-size:max(8px,calc(22 * var(--u)));line-height:1.2;box-shadow:0 20px 40px -14px rgba(0,0,0,.9)}
.ev-next-copy{display:grid;gap:.25em;white-space:nowrap}
.ev-next-k{color:var(--gold);font-size:.8em;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ev-next strong{font:600 1.3em/1.1 var(--font-display)}
.ev-next-bar{position:relative;flex:1;min-width:2em;height:max(3px,calc(6 * var(--u)));overflow:hidden;border-radius:9px;background:rgba(255,255,255,.14)}
.ev-next-bar i{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;transform:scaleX(.6)}
.ev-next-act{display:flex;gap:.6em;white-space:nowrap}
.ev-next-act span{padding:.55em 1.1em;border-radius:.5em;background:rgba(255,255,255,.08);font-weight:600}
.ev-next-act .is-focus{background:#fff;color:#111;box-shadow:0 0 0 2px #fff,0 0 18px rgba(255,216,77,.55)}

/* player: track and resume chips inside the real control bar */
.ev-pchips{display:flex;justify-content:flex-end;align-items:stretch;gap:calc(14 * var(--u))}
.ev-pchips span{position:relative;display:flex;align-items:center;padding:0 1em;border:max(1px,calc(2 * var(--u))) solid rgba(255,255,255,.22);border-radius:calc(10 * var(--u));background:rgba(255,255,255,.06);color:#f2efe8;font:600 max(7px,calc(21 * var(--u)))/1 var(--font-body);white-space:nowrap}
.ev-pchips .ev-ring-host{border-color:rgba(255,216,77,.6);color:var(--gold)}
.ev-ring-host::after{content:"";position:absolute;inset:max(-2px,calc(-4 * var(--u)));border-radius:inherit;box-shadow:0 0 0 max(2px,calc(4 * var(--u))) #fff,0 0 calc(34 * var(--u)) calc(6 * var(--u)) rgba(255,216,77,.5);opacity:0}

/* playlists: an illustrated screen in the app's style */
.ev-shot--library{background:radial-gradient(90% 80% at 88% 0,rgba(255,216,77,.09),transparent 60%),radial-gradient(70% 70% at 0 100%,rgba(124,199,199,.06),transparent 60%),linear-gradient(#0f0f14,#09090c)}
.lib{position:absolute;inset:0;display:flex;flex-direction:column;gap:3.4cqi;padding:4.4cqi 5cqi;font-size:2cqi;line-height:1.25}
.lib-top{display:flex;align-items:center;justify-content:space-between;gap:2cqi}
.lib-top strong{font:600 3.4cqi/1 var(--font-display);letter-spacing:-.01em}
.lib-phone{display:inline-flex;align-items:center;gap:.6em;padding:.6em 1.1em;border:1px solid var(--line-strong);border-radius:999px;color:var(--muted);font-size:1.6cqi;font-weight:600}
.lib-phone svg{width:1.3em;height:1.3em;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round}
.lib-body{display:grid;grid-template-columns:1.55fr 1fr;gap:3cqi;min-height:0}
.lib-rows{--row:11.8cqi;--gap:1.8cqi;position:relative;display:grid;align-content:start;gap:var(--gap)}
.lib-row{display:flex;align-items:center;gap:2cqi;height:var(--row);padding:0 2.2cqi;border:1px solid var(--line);border-radius:1.6cqi;background:rgba(255,255,255,.04)}
.lib-row b{display:grid;place-items:center;flex:none;width:6.2cqi;height:6.2cqi;border-radius:1.3cqi;background:rgba(255,216,77,.12);color:var(--gold);font:800 1.6cqi/1 var(--font-display)}
.lib-row.is-current b{background:var(--gold);color:var(--gold-ink)}
.lib-row>span{min-width:0}
.lib-row strong{display:block;font:600 2.2cqi/1.2 var(--font-display)}
.lib-row small{display:block;overflow:hidden;color:var(--faint);font-size:1.55cqi;white-space:nowrap;text-overflow:ellipsis}
.lib-ring{position:absolute;left:0;right:0;top:0;z-index:1;height:var(--row);border-radius:1.6cqi;box-shadow:0 0 0 max(2px,.3cqi) #fff,0 0 3cqi .5cqi rgba(255,216,77,.45)}
.lib-side{display:flex;flex-direction:column;justify-content:center;gap:1.4cqi;padding:3cqi;border:1px solid rgba(255,216,77,.22);border-radius:2cqi;background:linear-gradient(160deg,rgba(255,216,77,.09),rgba(255,255,255,.015))}
.lib-badge{align-self:flex-start;padding:.5em .8em;border-radius:1cqi;background:var(--gold);color:var(--gold-ink);font:800 1.5cqi/1 var(--font-display)}
.lib-side strong{font:600 2.8cqi/1.1 var(--font-display)}
.lib-facts{display:grid;gap:.9cqi;color:var(--muted);font-size:1.7cqi}
.lib-facts span::before{content:"✓";content:"✓" / "";margin-right:.6em;color:var(--gold)}

/* small screens: keep each overlay to its key beat */
@container (max-width:30rem){
  .ev-sig,.ev-buf-key,.ev-next-bar,.ev-next-act span+span{display:none}
  .ev-why{justify-content:center}
  .lib{font-size:3.4cqi;gap:3cqi;padding:4cqi 6cqi}
  .lib-top strong{font-size:5cqi}
  .lib-phone{font-size:2.8cqi}
  .lib-body{grid-template-columns:1fr}
  .lib-side{display:none}
  .lib-rows{--row:11.4cqi;--gap:1.8cqi}
  .lib-row{gap:3cqi;padding:0 3cqi;border-radius:2.4cqi}
  .lib-row b{width:9cqi;height:9cqi;border-radius:2cqi;font-size:2.6cqi}
  .lib-row strong{font-size:3.6cqi}
  .lib-row small{font-size:2.7cqi}
  .lib-ring{border-radius:2.4cqi}
}

/* the evening stage (JS only, wide screens): clock, sky and the TV */
.ev-stage{display:none}
.ev-clockbar{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);width:var(--tvw)}
.ev-clock{display:flex;flex:none;align-items:baseline;gap:.28em;margin:0;font:600 clamp(1.5rem,1rem + 1vw,2.1rem)/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ev-digits{display:inline-flex}
.ev-d{display:inline-block;width:1ch;height:1.1em;overflow:hidden;text-align:center}
.ev-roll{display:flex;flex-direction:column;transform:translateY(calc(var(--d,0) * -1.1em));transition:transform .26s var(--ease-out-quart)}
.ev-roll>span{height:1.1em;line-height:1.1em}
.ev-colon{display:inline-block;height:1.1em;line-height:1.1em;margin-inline:.04em;color:var(--muted)}
.ev-ampm{color:var(--muted);font-size:.5em;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.ev-sky{position:relative;flex:1;height:28px;border-radius:999px;background:linear-gradient(90deg,#74401a 0%,#5a2a2c 14%,#3a2246 34%,#20204a 52%,#12163a 72%,#080a1c 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 -10px 14px -10px rgba(255,170,90,.45)}
.ev-sky-stars{position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(1px 1px at 48% 30%,#fff,transparent),radial-gradient(1px 1px at 58% 66%,#fff,transparent),radial-gradient(1.2px 1.2px at 66% 24%,#fff,transparent),radial-gradient(1px 1px at 74% 58%,#fff,transparent),radial-gradient(1.2px 1.2px at 81% 34%,#fff,transparent),radial-gradient(1px 1px at 87% 70%,#fff,transparent),radial-gradient(1.4px 1.4px at 92% 28%,#fff,transparent);opacity:clamp(.25,var(--night) * 1.1,1);transition:opacity 1.6s var(--ease-in-out)}
.ev-ticks i{position:absolute;bottom:4px;width:2px;height:5px;margin-left:-1px;border-radius:1px;background:rgba(255,255,255,.3);transition:background-color .4s}
.ev-ticks i.is-past{background:var(--gold)}
.ev-ticks i:nth-child(1){left:4%}
.ev-ticks i:nth-child(2){left:7.2%}
.ev-ticks i:nth-child(3){left:23.8%}
.ev-ticks i:nth-child(4){left:52.9%}
.ev-ticks i:nth-child(5){left:70.1%}
.ev-ticks i:nth-child(6){left:96%}
.ev-orb-track{position:absolute;inset:0;transform:translateX(calc(var(--orb,4) * 1%));transition:transform 1.4s var(--ease-in-out)}
.ev-orb{position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px}
.ev-sun,.ev-moon,.ev-orb::after{position:absolute;inset:0;border-radius:50%;transition:opacity 1.4s var(--ease-in-out)}
.ev-sun{background:radial-gradient(circle at 40% 38%,#fff7da,#ffd84d 45%,#ff982f);box-shadow:0 0 12px 3px rgba(255,170,60,.7),0 0 36px 8px rgba(255,120,40,.3);opacity:clamp(0,1 - var(--night) * 1.9,1)}
.ev-orb::after{content:"";box-shadow:0 0 12px 3px rgba(205,215,255,.45),0 0 36px 8px rgba(130,150,255,.2);opacity:clamp(0,(var(--night) - .28) * 2.2,1)}
.ev-moon{background:radial-gradient(circle at 62% 36%,#fff,#e6e9f6 50%,#aeb6d0);-webkit-mask:radial-gradient(circle at 18% 30%,transparent 44%,#000 46%);mask:radial-gradient(circle at 18% 30%,transparent 44%,#000 46%);opacity:clamp(0,(var(--night) - .28) * 2.2,1)}
.ev-tv{position:relative;isolation:isolate;width:var(--tvw)}
.ev-glow{position:absolute;inset:-22% -16% -14%;z-index:-1;pointer-events:none;transition:opacity 1.8s var(--ease-in-out)}
.ev-glow--dusk{background:radial-gradient(closest-side,rgba(255,150,60,.3),rgba(255,110,40,.1) 55%,transparent);opacity:calc(1 - var(--night))}
.ev-glow--night{background:radial-gradient(closest-side,rgba(110,128,255,.28),rgba(80,70,200,.09) 55%,transparent);opacity:var(--night)}
.ev-tv .tv-bezel{box-shadow:var(--shadow-tv)}
.ev-screen{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:12px;background:#000;container-type:inline-size}
.ev-ch{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none;opacity:0}
.ev-ch.is-on{opacity:1}
.ev-static{position:absolute;inset:-10%;z-index:3;background:var(--grain),var(--grain),rgba(255,255,255,.07);background-size:90px 90px,140px 140px;background-position:0 0,40px 30px;opacity:0;pointer-events:none}
.ev-scan{position:absolute;left:0;right:0;top:50%;z-index:3;height:2px;margin-top:-1px;background:#fff;box-shadow:0 0 24px 6px rgba(255,255,255,.5);opacity:0;pointer-events:none}
.ev-osd{position:absolute;top:3.4cqi;right:3.4cqi;z-index:4;display:flex;gap:.6em;padding:.55em .85em;border-radius:.45em;background:rgba(0,0,0,.62);color:#fff;font:700 max(11px,1.7cqi)/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;opacity:0;pointer-events:none}
.ev-osd b{color:var(--gold);font-variant-numeric:tabular-nums}
.ev-screen .tv-glare{z-index:4}
.ev-tv .tv-stand{margin-top:2px}
.ev-caption{display:flex;align-items:baseline;gap:12px;width:var(--tvw);margin:0;color:var(--faint);font-size:.8rem;line-height:1.4}
.ev-caption b{flex:none;color:var(--gold);font:700 .74rem/1.4 var(--font-display);letter-spacing:.12em;font-variant-numeric:tabular-nums}

@media (min-width:56.25rem){
  html.tour-ready .evening{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:0 clamp(40px,5vw,96px);width:min(90rem,100% - 2 * var(--gutter))}
  html.tour-ready .ev-steps{grid-column:1;grid-row:1;padding-block:4vh 16vh}
  html.tour-ready .ev-step{display:flex;flex-direction:column;justify-content:center;min-height:76vh;opacity:.5;transition:opacity .6s var(--ease-out-quart)}
  html.tour-ready .ev-step.is-active,html.tour-ready .ev-step:focus-within{opacity:1}
  html.tour-ready .ev-step:target{scroll-margin-top:var(--hdr,72px)}
  html.tour-ready .ev-visual{margin-top:18px}
  html.tour-ready .ev-visual figcaption,html.tour-ready .ev-visual div.ev-shot,html.tour-ready .ev-visual a.ev-shot>*{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  html.tour-ready a.ev-shot{display:inline-flex;align-items:center;justify-self:start;gap:8px;overflow:visible;aspect-ratio:auto;min-height:36px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(255,255,255,.03);box-shadow:none;color:var(--muted);font-size:.84rem;font-weight:600;container-type:normal;transition:color .2s,border-color .2s}
  html.tour-ready a.ev-shot::before{content:"Full-size capture ↗";content:"Full-size capture ↗" / ""}
  html.tour-ready a.ev-shot:hover{border-color:rgba(255,216,77,.5);color:var(--text)}
  html.tour-ready .ev-stage{--tvw:min(100%,calc((100vh - var(--hdr,72px) - 180px) * 16 / 9));position:sticky;top:var(--hdr,72px);grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.2vh,24px);height:calc(100vh - var(--hdr,72px))}
}

/* ---------- Live ---------- */
.live-layout{display:grid;gap:clamp(40px,5vw,72px);align-items:start}
.live .kicker::before{display:none}
.live-dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:#ff5a4f;box-shadow:0 0 10px #ff5a4f}
.live-copy .sub{margin-bottom:8px}
.live-copy .text-link{margin-bottom:22px}
/* TV on top, then the caption (left) and the fictional guide card (right), which only overlaps the TV's empty bottom edge */
.tv--live .tv-bezel{padding:clamp(5px,.8vw,10px);border-radius:18px}
.tv--live .tv-screen{border-radius:10px}
.tv--live .tv-led{bottom:max(0px,calc(clamp(5px,.8vw,10px) / 2 - 2.5px));width:5px;height:5px;margin-left:-2.5px}
.live-visual{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.live-stack{display:contents}
.live-visual .tv{grid-row:1}
.live-visual figcaption{grid-row:2;text-align:left}
.live-guide-example{grid-row:3}
.live-badge{position:absolute;top:-12px;left:clamp(18px,3vw,36px);z-index:3;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:6px;border:1px solid rgba(255,90,79,.45);background:#16090a;box-shadow:0 0 24px -4px rgba(255,90,79,.5);color:#fff;font:700 .7rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;pointer-events:none}
.live-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff5a4f;box-shadow:0 0 8px #ff5a4f}
@media (max-width:47.99rem){.live-badge{top:-20px}}
.tv-static{position:absolute;inset:0;z-index:2;background:var(--grain),rgba(255,255,255,.08);background-size:120px 120px;opacity:0;pointer-events:none}
.live-guide-example{position:relative;z-index:3;padding:20px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:rgba(18,18,24,.92);box-shadow:0 40px 80px -30px rgba(0,0,0,.95)}
.demo-heading{display:grid;gap:2px;margin-bottom:14px}
.demo-heading strong{font:600 1.02rem/1.25 var(--font-display)}
.demo-heading span{color:var(--faint);font-size:.76rem}
.guide-row{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid transparent}
.guide-row+.guide-row{margin-top:6px}
.guide-row.is-current{border-color:rgba(255,216,77,.45);background:rgba(255,216,77,.07)}
.channel-number{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.07);color:var(--gold);font:700 .8rem/1 var(--font-display)}
.guide-row div{display:grid;min-width:0}
.guide-row strong{font-size:.92rem;line-height:1.3}
.guide-row div span{color:var(--muted);font-size:.8rem;line-height:1.35}
.guide-row>span:last-child{grid-column:2;color:var(--faint);font-size:.78rem}
.demo-status{margin:12px 0 0;color:var(--faint);font-size:.75rem;line-height:1.45}
@media (min-width:48rem){
  .live-visual{grid-template-columns:minmax(0,1fr) minmax(0,22rem);column-gap:24px}
  .live-visual .tv{grid-column:1/-1}
  .live-visual figcaption{grid-column:1;grid-row:2;padding-top:4px}
  .live-guide-example{grid-column:2;grid-row:2;margin:-34px 5% 0 0;padding:16px;background:rgba(18,18,24,.95)}
  .guide-row{padding:8px 10px}
}
@media (min-width:64rem){
  .live-layout{grid-template-columns:6fr 7fr}
}

/* ---------- Setup: film frames ---------- */
.steps-wrap{position:relative}
.steps{display:grid;gap:20px;margin:0;padding:0;list-style:none}
.steps li{position:relative;isolation:isolate;overflow:hidden;padding:48px clamp(20px,2.4vw,30px);border:1px solid var(--line);border-radius:var(--r-md);background:var(--grain),linear-gradient(180deg,#14141a,#0d0d12)}
.steps li::before,.steps li::after{content:"";position:absolute;left:0;right:0;height:22px;background:radial-gradient(circle,var(--bg-2) 0 4px,transparent 4.5px) 4px 50%/22px 14px repeat-x,#1a1a21}
.steps li::before{top:0}
.steps li::after{bottom:0}
.steps .n{display:block;width:max-content;margin-bottom:14px;filter:drop-shadow(0 0 20px rgba(255,216,77,.2));background:linear-gradient(180deg,#ffe58a 0%,#ffd84d 42%,rgba(255,216,77,.34) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font:800 clamp(3.5rem,2.6rem + 2.5vw,4.5rem)/1 var(--font-display);letter-spacing:-.03em}
.steps h3{margin:0 0 10px;font-size:var(--t-h3);font-weight:600;letter-spacing:-.015em}
.steps p{margin:0;color:var(--muted);font-size:.95rem}
.steps-line{display:none}
@media (min-width:48rem){
  .steps{grid-template-columns:repeat(3,1fr)}
  .steps-line{position:absolute;left:0;right:0;top:50%;z-index:0;display:block;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 15%,var(--gold) 85%,transparent);box-shadow:0 0 14px rgba(255,216,77,.6);transform-origin:left}
  .steps{position:relative;z-index:1}
}
.notice{position:relative;margin-top:32px;padding:20px 22px 20px 58px;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-sm);background:var(--panel);color:var(--muted);font-size:.95rem}
.notice::before{content:"i";content:"i" / "";position:absolute;left:20px;top:20px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);font:700 .8rem/1 var(--font-display)}
.notice strong{color:var(--text)}
/* one panel under the steps: the sources it plays (left) and what the phone dashboard manages (right) */
.setup-panel{display:grid;margin-top:20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--grain),var(--grad-panel)}
.setup-panel>div{padding:clamp(22px,3vw,36px)}
.setup-panel>div+div{border-top:1px solid var(--line)}
.panel-title{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:var(--gold);font:700 .74rem/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase}
.source-list,.check-list{display:grid;margin:0;padding:0;list-style:none}
.source-list{gap:18px}
.source-list li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:start}
.source-tag{display:grid;place-items:center;height:40px;border:1px solid rgba(255,216,77,.3);border-radius:var(--r-xs);background:rgba(255,216,77,.07);color:var(--gold);font:800 .95rem/1 var(--font-display);letter-spacing:.02em}
.source-list h4{margin:0 0 2px;font:600 1.02rem/1.3 var(--font-display);letter-spacing:-.01em}
.source-list p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.check-list{gap:11px;margin-bottom:24px}
.check-list li{display:flex;gap:12px;color:var(--muted);font-size:.93rem;line-height:1.5}
.check-list li::before{content:"";flex:none;width:18px;height:18px;margin-top:.15em;border-radius:50%;background:rgba(255,216,77,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd84d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
@media (min-width:56rem){
  .setup-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .setup-panel>div+div{border-top:0;border-left:1px solid var(--line)}
}
@media (forced-colors:active){.steps .n{color:CanvasText;-webkit-text-fill-color:CanvasText;background:none}}

/* ---------- Pricing ---------- */
.plans{display:grid;gap:20px;align-items:stretch}
.plan-shell.featured{display:grid}
.ticket{--stub:76px;position:relative;overflow:hidden;border:1px solid rgba(255,216,77,.32);border-radius:28px;background:var(--grain),radial-gradient(ellipse at top,#2a220a,#0d0d10 70%);
  -webkit-mask:radial-gradient(circle 12px at 0 calc(100% - var(--stub)),#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% calc(100% - var(--stub)),#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 12px at 0 calc(100% - var(--stub)),#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% calc(100% - var(--stub)),#0000 98%,#000) right/51% 100% no-repeat;
  display:flex;flex-direction:column;transition:transform .6s var(--ease-out-expo)}
.ticket::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,216,77,.14),transparent 60%);opacity:0;transition:opacity .2s;pointer-events:none}
.ticket:hover::before{opacity:1}
.ticket-body{position:relative;flex:1;display:grid;align-items:center}
.ticket-main{position:relative;padding:clamp(28px,4vw,48px)}
.ticket-art{display:none}
.stamp{width:clamp(9.5rem,14vw,13rem);height:auto;overflow:visible;filter:drop-shadow(0 0 18px rgba(255,216,77,.22))}
.stamp-edge{fill:none;stroke:rgba(255,216,77,.55);stroke-width:1.5}
.stamp-edge--in{stroke:rgba(255,216,77,.45);stroke-dasharray:2 5}
.stamp-text{fill:var(--gold);font:700 13px/1 var(--font-display);letter-spacing:.16em}
.stamp-tv rect,.stamp-tv path{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.stamp-tv .stamp-play{fill:var(--gold);stroke:none}
.ticket h3{margin:0;font-size:var(--t-h3);font-weight:600}
.plan-term{margin:4px 0 0;color:var(--faint);font-size:.85rem}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:14px 0 12px}
/* the text-clipped gradient only paints inside the box, so the box must cover the whole glyph */
.odo{position:relative;display:inline-block;margin-block:-.08em -.04em;padding:.08em .04em .04em 0;font:800 var(--t-price)/1 var(--font-display);letter-spacing:-.04em}
.odo::after{content:"";position:absolute;inset:-6% -30%;z-index:-1;background:radial-gradient(closest-side,rgba(255,216,77,.16),transparent);pointer-events:none}
.price .per{color:var(--muted);font:600 1.15rem/1 var(--font-body)}
.plan-line{margin:0 0 18px;color:var(--text);font:500 1.1rem/1.4 var(--font-display)}
.plan-features{display:grid;gap:10px;margin:0 0 28px;padding:0;list-style:none}
.plan-features li{display:flex;gap:12px;color:var(--muted);font-size:.95rem}
.plan-features li::before{content:"";flex:none;width:18px;height:18px;margin-top:.2em;border-radius:50%;background:rgba(255,216,77,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd84d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
.ticket-stub{position:relative;display:flex;align-items:center;justify-content:center;height:var(--stub);margin:0;padding:0 28px;border-top:1px dashed rgba(255,255,255,.22);color:var(--faint);font:600 .72rem/1.5 var(--font-display);letter-spacing:.2em;text-align:center;text-transform:uppercase}
.plan-stack{display:grid;gap:16px;grid-template-rows:auto auto 1fr}
.plan-stack>div{display:grid}
.plan.card h3{margin-bottom:10px}
.plan.card .btn-ghost{margin-top:8px}
.ring-card{display:flex;align-items:center;gap:22px}
.ring-wrap{position:relative;flex:none;width:112px;height:112px}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:8}
.ring-fill{fill:none;stroke:var(--gold);stroke-width:8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 6px rgba(255,216,77,.55))}
.count{position:absolute;inset:0;display:grid;place-items:center;color:var(--text);font:800 2.4rem/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.ring-label{margin:0 0 4px;color:var(--text);font:600 1.15rem/1.25 var(--font-display)}
.ring-card p:last-child{margin:0;color:var(--muted);font-size:.92rem}
.tv-row{display:grid;align-content:center;gap:18px;height:100%;padding:22px 20px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--grad-panel)}
.tv-row-sets{display:flex;justify-content:space-between;gap:8px}
.mini{display:grid;flex:1;justify-items:center;align-content:start;gap:12px}
.mini i{position:relative;width:100%;max-width:58px;aspect-ratio:16/10;border-radius:6px;border:2px solid var(--gold);background:radial-gradient(ellipse at top,rgba(255,216,77,.3),rgba(255,216,77,.05));box-shadow:0 0 18px -2px rgba(255,216,77,.5)}
.mini i::after{content:"";position:absolute;left:50%;bottom:-8px;width:40%;height:3px;margin-left:-20%;border-radius:2px;background:rgba(255,216,77,.6)}
.mini b{color:var(--gold-soft);font:700 .8rem/1 var(--font-display);white-space:nowrap}
.tv-row-total{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin:0;padding-top:12px;border-top:1px solid rgba(255,216,77,.35);color:var(--muted);font-size:.84rem}
.tv-row-total::before,.tv-row-total::after{content:"";position:absolute;top:-7px;width:1px;height:7px;background:rgba(255,216,77,.55)}
.tv-row-total::before{left:0}
.tv-row-total::after{right:0}
.tv-row-total strong{color:var(--gold);font:700 1.02rem/1.2 var(--font-display)}
@media (min-width:40rem){
  .ticket{--stub:58px}
  .ticket-body{grid-template-columns:minmax(0,1fr) auto}
  .ticket-art{display:grid;place-items:center;padding:clamp(24px,3vw,40px) clamp(28px,4vw,52px) clamp(24px,3vw,40px) 0}
}
@media (min-width:64rem){.plans{grid-template-columns:7fr 5fr}}

/* ---------- Works on (devices strip, under the plans) ---------- */
.works-on{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:20px;padding:16px clamp(18px,2.4vw,28px);border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);font-size:.92rem}
.works-on p{margin:0}
.works-label{color:var(--faint);font:700 .72rem/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase}
.works-list{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;padding:0;list-style:none;color:var(--muted)}
.works-list li{display:flex;align-items:center;gap:8px}
.works-list strong{color:var(--text);font-weight:600}
.dot{flex:none;width:8px;height:8px;border-radius:50%}
.dot--on{background:var(--gold);box-shadow:0 0 10px rgba(255,216,77,.7)}
.dot--dev{border:1.5px solid var(--teal)}
.works-check{margin-left:auto!important;color:var(--faint)}
.works-check a{color:var(--gold);font-weight:600;text-underline-offset:3px}
@media (max-width:47.99rem){.works-on{flex-direction:column;align-items:flex-start}.works-list{flex-direction:column}.works-list li{display:block}.works-list .dot{display:inline-block;margin-right:8px;vertical-align:.08em}.works-list strong{margin-right:6px}.works-check{margin-left:0!important}}

/* ---------- FAQ ---------- */
.faq-layout{display:grid;gap:32px}
.faq{display:grid;gap:12px}
.faq details{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--panel);transition:border-color .25s}
.faq details:hover{border-color:var(--line-strong)}
.faq details[open]{border-color:rgba(255,216,77,.3);background:linear-gradient(160deg,#17171e,#111116)}
.faq details[open]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);box-shadow:0 0 12px rgba(255,216,77,.6)}
.faq summary{position:relative;display:flex;align-items:center;min-height:56px;padding:16px 56px 16px 22px;cursor:pointer;list-style:none;font:600 1.06rem/1.35 var(--font-display);letter-spacing:-.01em;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:24px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .24s var(--ease-out-quart)}
.faq details[open] summary{color:var(--gold)}
.faq details[open] summary::after{transform:translateY(4px) rotate(225deg)}
.faq summary:focus-visible{outline-offset:-3px;border-radius:16px}
.faq details p{margin:0;padding:0 22px 22px;color:var(--muted);font-size:.98rem}
@media (min-width:64rem){
  .faq-layout{grid-template-columns:4fr 8fr;gap:64px;align-items:start}
  .faq-intro{position:sticky;top:112px}
}
@media (max-width:47.99rem){.faq summary{font-size:.98rem}}

/* ---------- Encore ---------- */
.encore{position:relative;isolation:isolate;overflow:clip;padding:clamp(72px,9vw,128px) 0 clamp(64px,8vw,112px);text-align:center}
.encore-sky{position:absolute;inset:0;z-index:-1;background:radial-gradient(42rem 18rem at 50% 58%,rgba(255,216,77,.075),transparent 70%)}
.encore-beam{position:absolute;left:50%;top:0;width:min(70rem,160%);height:70%;transform:translateX(-50%);clip-path:polygon(47% 0,53% 0,80% 100%,20% 100%);background:var(--grad-beam);opacity:.75;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 24%);mask-image:linear-gradient(to bottom,transparent,#000 24%)}
.encore-floor{position:absolute;left:50%;top:44%;width:min(40rem,120%);height:120px;transform:translateX(-50%);background:var(--grad-floor);opacity:.8}
.encore-inner{position:relative;display:grid;justify-items:center}
.encore-seat{width:min(18rem,60vw);margin:0 auto 18px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.65)) drop-shadow(0 0 40px rgba(255,216,77,.18))}
.encore h2{font-size:clamp(2.4rem,1.4rem + 4.4vw,5rem);line-height:1}
.encore h2 .line>span{display:block}
.encore .sub{margin:0 auto 32px;text-align:center}
@media (max-width:47.99rem){.encore-seat{width:12rem}.encore .cta-row{width:100%}.encore .btn-gold{width:100%}}

/* ---------- Footnotes + footer ---------- */
.footnotes{position:relative;padding:clamp(20px,3vw,32px) 0 20px}
.footnotes::before{content:"";position:absolute;top:0;left:50%;width:min(75rem,100% - 2 * var(--gutter));height:1px;transform:translateX(-50%);background:var(--line)}
.footnotes p{max-width:62rem;color:var(--faint);font-size:.8rem;line-height:1.6}
.footnotes a{color:var(--muted);text-underline-offset:2px}
.credits-list{margin-bottom:0}
.notes summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--muted);font:600 .86rem/1.3 var(--font-body);cursor:pointer;list-style:none}
.notes summary::-webkit-details-marker{display:none}
.notes summary::after{content:"";width:7px;height:7px;margin-top:-4px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);transition:transform .2s var(--ease-out-quart)}
.notes[open] summary::after{margin-top:3px;transform:rotate(225deg)}
.notes summary:hover{color:var(--text)}
.notes[open] summary{margin-bottom:10px}
footer.site{position:relative;overflow:clip;padding:24px 0 0;color:var(--muted);font-size:.9rem}
footer.site::before{content:"";position:absolute;top:0;left:50%;width:min(75rem,100% - 2 * var(--gutter));height:1px;transform:translateX(-50%);background:var(--line)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px}
.footer-contact a{display:inline-block;padding-block:12px;color:var(--gold);text-underline-offset:3px}
.foot nav{display:flex;flex-wrap:wrap;gap:0 4px;margin:12px 0 0 -10px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--muted);text-decoration:none}
.foot nav a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}
/* the watermark is cropped exactly at its baseline: line-height .76 puts the box bottom on the baseline for Outfit */
.credits-mark{margin:20px auto 0;overflow:hidden;color:rgba(255,255,255,.04);font:800 clamp(4rem,17.4vw,15.4rem)/.76 var(--font-display);letter-spacing:-.05em;text-align:left;white-space:nowrap;user-select:none;pointer-events:none}

/* =====================================================================
   MOTION. Everything below only runs with prefers-reduced-motion: no-preference.
   Content is never hidden without JS: load animations end visible, and
   scroll reveals only hide things after home.js adds html.reveal-ready.
   ===================================================================== */
@keyframes fade-in{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translate3d(0,16px,0)}}
@keyframes rise-lg{from{transform:translate3d(0,48px,0)}}
@keyframes rise-t{from{transform:translate3d(0,14px,0)}}
@keyframes line-up{from{transform:translate3d(0,130%,0)}}
@keyframes power-on{0%{transform:scale(.56,.008)}55%{transform:scale(1,.008)}100%{transform:none}}
@keyframes flash{0%{opacity:.6}100%{opacity:0}}
@keyframes glare-in{from{transform:translateX(-60%)}}
@keyframes seat-in{from{opacity:0;transform:translateX(-24px)}}
@keyframes focus-land{0%{opacity:0;transform:scale(1.06)}25%{opacity:1;transform:none}75%{opacity:1}100%{opacity:.6}}
@keyframes sheen{from{transform:translateX(-120%)}to{transform:translateX(260%)}}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
@keyframes motes{0%{opacity:0;transform:translateY(0)}20%{opacity:.8}80%{opacity:.6}100%{opacity:0;transform:translateY(-60px)}}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
@keyframes bulb-a{0%{opacity:.9}50%{opacity:.3}}
@keyframes bulb-b{0%{opacity:.3}50%{opacity:.9}}
@keyframes tv-untilt{from{transform:perspective(1800px) rotateX(14deg) scale(.92)}to{transform:perspective(1800px) rotateX(0deg) scale(1)}}
@keyframes stage-drift{to{translate:0 32px}}
@keyframes tv-untilt-sm{from{transform:perspective(1200px) rotateX(10deg) scale(.96)}to{transform:perspective(1200px) rotateX(0deg) scale(1)}}
@keyframes glare-drift{from{translate:-8% 0}to{translate:8% 0}}
@keyframes wash{from{opacity:.55}to{opacity:1}}
@keyframes floor{from{opacity:.6;scale:.8 1}to{opacity:1;scale:1 1}}
@keyframes drift-far{to{translate:0 40vh}}
@keyframes drift-mid{to{translate:0 25vh}}
@keyframes drift-near{to{translate:0 10vh}}
@keyframes seat-lift{to{translate:0 -8vh}}
@keyframes title-out{to{opacity:.25;translate:0 -24px}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes grow-y{from{transform:scaleY(0)}}
@keyframes static-flash{0%{opacity:0}35%{opacity:.6}100%{opacity:0}}
@keyframes settle-in{from{transform:scale(1.02)}}
@keyframes live-pulse{0%{opacity:1;transform:none}100%{opacity:0;transform:scale(3.5)}}
@keyframes bloom{0%{opacity:0}40%{opacity:1}100%{opacity:.5}}
@keyframes price-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(-20% -10% -20% -10%)}}
@keyframes stamp-spin{from{rotate:-24deg}to{rotate:24deg}}

@keyframes crt-off{to{opacity:.15;transform:scale(1.03,.004)}}
@keyframes crt-on{0%{opacity:.5;transform:scale(1.03,.004)}30%{opacity:1;transform:scale(1,.02)}100%{opacity:1;transform:none}}
@keyframes tv-static{0%{opacity:.6;transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{opacity:.45;transform:translate(3%,-2%)}60%{transform:translate(-2%,-4%)}80%{opacity:.2;transform:translate(4%,2%)}100%{opacity:0;transform:none}}
@keyframes tv-scan{0%{opacity:0;transform:scaleX(.2)}25%{opacity:.95;transform:none}100%{opacity:0}}
@keyframes osd{0%{opacity:0;transform:translateY(-4px)}8%,70%{opacity:1;transform:none}100%{opacity:0}}
@keyframes hop-a{0%{opacity:0;transform:scale(1.06)}6%,42%{opacity:1;transform:none}49%,100%{opacity:0;transform:scale(.96)}}
@keyframes hop-b{0%,42%{opacity:0;transform:scale(1.06)}50%,93%{opacity:1;transform:none}99%,100%{opacity:0;transform:scale(.96)}}
@keyframes ring-land{from{opacity:0;transform:scale(1.06)}}
@keyframes glow-pulse{from{opacity:.25}to{opacity:.8}}
@keyframes from-zero-x{from{transform:scaleX(0)}}
@keyframes card-in{from{opacity:0;transform:translate3d(0,12px,0) scale(.97)}}
@keyframes chip-in{from{opacity:0;transform:translate3d(0,8px,0)}}
@keyframes buf-fade{0%{opacity:0}5%,93%{opacity:1}100%{opacity:0}}
@keyframes buf-play{0%{transform:scaleX(.18)}92%,100%{transform:scaleX(.5)}}
@keyframes buf-head{0%{transform:translateX(18%)}92%,100%{transform:translateX(50%)}}
@keyframes buf-load{0%{transform:scaleX(.4)}30%,68%{transform:scaleX(.62)}86%,100%{transform:scaleX(.8)}}
@keyframes dip{0%,30%{opacity:0;transform:translate3d(0,-8px,0)}35%,68%{opacity:1;transform:none}75%,100%{opacity:0;transform:translate3d(0,-8px,0)}}
@keyframes wifi{0%,36%{opacity:1}40%{opacity:.25}44%{opacity:1}48%{opacity:.25}52%,100%{opacity:1}}
@keyframes countdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes lib-hop{0%,24%{transform:none}32%,56%{transform:translateY(calc(var(--row) + var(--gap)))}64%,88%{transform:translateY(calc(2 * (var(--row) + var(--gap))))}96%,100%{transform:none}}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .arr,.arr-down{transition:transform .2s var(--ease-out-quart)}
  a:hover>.arr,a:hover>.arr-ne{transform:translate(3px,0)}
  a:hover>.arr-ne{transform:translate(3px,-3px)}
  a:hover>.arr-down{transform:translateY(3px)}
  .btn-gold:hover,.btn-ghost:hover{transform:translateY(-2px)}
  .btn-gold:active,.btn-ghost:active{transform:scale(.97);transition-duration:.1s}
  header.site.menu-ready[data-menu-open] .menu-sheet{animation:rise .22s var(--ease-out-expo)}

  /* hero entrance (CSS only, runs without JS, ends visible) */
  .hero-sky{animation:fade-in .9s var(--ease-out-quart) backwards}
  .eyebrow{animation:rise .6s var(--ease-out-expo) .1s backwards}
  .hero h1 .line{clip-path:inset(-40% -10% -.22em -10%);padding-bottom:.02em}
  .hero h1 .line>span{animation:line-up .8s var(--ease-out-expo) .16s backwards}
  .hero h1 .line+.line>span{animation:line-up .8s var(--ease-out-expo) .26s backwards}
  .lede{animation:rise-t .6s var(--ease-out-expo) .2s backwards}
  .hero-actions .cta-row{animation:rise .6s var(--ease-out-expo) .32s backwards}
  .hero-pricing{animation:rise .6s var(--ease-out-expo) .4s backwards}
  .tv-enter{animation:rise-lg 1s var(--ease-out-expo) .05s backwards}
  /* CRT power-on: the capture opens from a line on the black screen (transform only, composited) */
  html .tv--hero .tv-screen picture{animation:power-on .5s var(--ease-out-expo) .25s both}
  .tv--hero .tv-screen::before{animation:flash .3s ease-out .3s}
  .tv--hero .tv-glare{animation:glare-in 1s var(--ease-out-quart) .7s backwards}
  .tv--hero .tv-focus{animation:focus-land 1.6s var(--ease-spring) 1.1s backwards}
  .tv--hero .tv-sheen{animation:sheen .9s var(--ease-in-out) 1.4s backwards}
  .hero-seat{animation:seat-in .7s var(--ease-out-expo) .7s backwards}
  .hero-credits{animation:fade-in .8s var(--ease-out-quart) .5s backwards}

  /* ambient loops */
  .stars--near{animation:twinkle 5s var(--ease-in-out) 1.5s infinite alternate}
  .motes{animation:motes 14s linear 1.5s infinite}
  .marquee-track{animation:marquee 40s linear infinite}
  .marquee::before{animation:bulb-a 1.4s steps(1) infinite}
  .marquee::after{animation:bulb-b 1.4s steps(1) infinite}
  .marquee-viewport:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
  html.doc-hidden *,html.doc-hidden *::before,html.doc-hidden *::after,[data-loop].is-offscreen *,[data-loop].is-offscreen::before,[data-loop].is-offscreen::after,[data-loop].is-offscreen *::before,[data-loop].is-offscreen *::after{animation-play-state:paused!important}
  .tv:hover .tv-sheen{animation:sheen .9s var(--ease-in-out)}

  /* the TV straightens as you scroll (scroll-driven, no JS needed) */
  @supports (animation-timeline:scroll()){
    .hero-tv{animation:tv-untilt linear both;animation-timeline:scroll(root block);animation-range:0px 75vh}
    .hero-stage{animation:stage-drift linear both;animation-timeline:scroll(root block);animation-range:0px 75vh}
    .tv--hero .tv-glare{animation:glare-in 1s var(--ease-out-quart) 1.1s backwards,glare-drift linear both;animation-timeline:auto,scroll(root block);animation-range:normal,0px 75vh}
    .wall-wash{animation:wash linear both;animation-timeline:scroll(root block);animation-range:0px 75vh}
    .tv-floor{animation:floor linear both;animation-timeline:scroll(root block);animation-range:0px 75vh}
    .stars--far{animation:drift-far linear both;animation-timeline:scroll(root block);animation-range:0px 100vh}
    .stars--mid{animation:drift-mid linear both;animation-timeline:scroll(root block);animation-range:0px 100vh}
    .stars--near{animation:twinkle 5s var(--ease-in-out) 1.5s infinite alternate,drift-near linear both;animation-timeline:auto,scroll(root block);animation-range:normal,0px 100vh}
    .hero-seat{animation:seat-in .7s var(--ease-out-expo) .9s backwards,seat-lift linear both;animation-timeline:auto,scroll(root block);animation-range:normal,0px 75vh}
    @media (max-width:47.99rem){
      .hero-tv{animation-name:tv-untilt-sm;animation-range:0px 45vh}
      .hero-stage{animation:none}
    }
    .steps-line{animation:grow linear both;animation-timeline:view();animation-range:entry 40% cover 50%}
    .hero-title{animation:title-out linear both;animation-timeline:view();animation-range:exit 10% exit 100%}
    .stamp{animation:stamp-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
  @supports not (animation-timeline:scroll()){
    html.hero-js .hero-tv{transform:perspective(1800px) rotateX(calc((1 - var(--hp,0)) * 14deg)) scale(calc(.92 + var(--hp,0) * .08))}
    html.hero-js .hero-stage{translate:0 calc(var(--hp,0) * 32px)}
    html.hero-js .stars--far{translate:0 calc(var(--hp,0) * 30vh)}
    html.hero-js .stars--mid{translate:0 calc(var(--hp,0) * 19vh)}
    html.hero-js .stars--near{translate:0 calc(var(--hp,0) * 8vh)}
    html.hero-js .wall-wash{opacity:calc(.55 + var(--hp,0) * .45)}
    @media (max-width:47.99rem){
      html.hero-js .hero-tv{transform:perspective(1200px) rotateX(calc((1 - var(--hp,0)) * 10deg)) scale(calc(.96 + var(--hp,0) * .04))}
      html.hero-js .hero-stage{translate:none}
    }
    html.reveal-ready .steps-wrap:not(.is-in) .steps-line{transform:scaleX(0)}
    html.reveal-ready .steps-line{transition:transform 1.2s var(--ease-out-expo) .2s}
  }

  /* scroll reveals: only after home.js is ready */
  html.reveal-ready [data-reveal]:not(.is-in){opacity:0;transform:translate3d(0,28px,0)}
  html.reveal-ready [data-reveal="scale"]:not(.is-in){transform:translate3d(0,40px,0) scale(.96)}
  html.reveal-ready [data-reveal="fade"]:not(.is-in){transform:none}
  html.reveal-ready [data-reveal="mask"]:not(.is-in){opacity:1;transform:none}
  html.reveal-ready [data-reveal="mask"] .line{overflow:clip;padding-bottom:.14em;margin-bottom:-.14em}
  html.reveal-ready [data-reveal="mask"] .line>span{display:block}
  html.reveal-ready [data-reveal="mask"]:not(.is-in) .line>span{transform:translate3d(0,110%,0)}
  html.reveal-ready [data-reveal]{transition:opacity .7s var(--ease-out-quart),transform .9s var(--ease-out-expo);transition-delay:calc(var(--i,0) * 70ms)}
  html.reveal-ready [data-reveal="mask"] .line>span{transition:transform .9s var(--ease-out-expo)}
  html.reveal-ready [data-reveal="mask"] .line+.line>span{transition-delay:90ms}

  /* hover tilt (enabled by JS on fine pointers) */
  html.tilt-on [data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0)}
  html.tilt-on [data-tilt].is-tilting{transition:transform .12s linear,border-color .3s}
  .card:focus-within{transform:translateY(-4px)}
  html.tilt-on .card:focus-within{transform:perspective(900px) translateY(-4px)}

  /* tour: the channel change is a quick CRT collapse and expand, with a little static (transform + opacity only) */
  .ev-screen.is-switching .ev-ch.is-out{z-index:1;opacity:1;animation:crt-off .17s cubic-bezier(.55,0,1,.45) forwards}
  .ev-screen.is-switching .ev-ch.is-on{animation:crt-on .55s var(--ease-out-expo) .13s backwards}
  .ev-screen.is-switching .ev-static{animation:tv-static .5s steps(5,end)}
  .ev-screen.is-switching .ev-scan{animation:tv-scan .5s ease-out .08s}
  .ev-osd.is-shown{animation:osd 2.2s var(--ease-out-quart) forwards}
  html.tour-ready .ev-step h3{transition:transform .9s var(--ease-out-expo)}
  html.tour-ready .ev-step:not(.is-seen) h3{transform:translate3d(0,16px,0)}
  /* tour: overlays play on the live screen only (the TV channel, or the active step's own screen on phones) */
  .is-live .ev-ring--a{animation:hop-a 6.4s var(--ease-in-out) .4s infinite backwards}
  .is-live .ev-ring--b,.is-live .ev-ring-host::after{animation:hop-b 6.4s var(--ease-in-out) .4s infinite backwards}
  .is-live .ev-ring--solo{animation:ring-land .9s var(--ease-spring) .45s backwards}
  .is-live .ev-ring::after{animation:glow-pulse 2.4s var(--ease-in-out) 1s infinite alternate}
  .is-live .ev-underline{animation:from-zero-x .8s var(--ease-out-expo) 1.2s backwards}
  .is-live .ev-why,.is-live .ev-next{animation:card-in .8s var(--ease-out-expo) .8s backwards}
  .is-live .ev-sig i{animation:from-zero-x 1s var(--ease-out-expo) 1.1s backwards}
  .is-live .ev-sig:nth-of-type(2) i{animation-delay:1.2s}
  .is-live .ev-sig:nth-of-type(3) i{animation-delay:1.3s}
  .is-live .ev-buf{animation:buf-fade 7s linear infinite}
  .is-live .ev-buf-play{animation:buf-play 7s linear infinite}
  .is-live .ev-buf-head{animation:buf-head 7s linear infinite}
  .is-live .ev-buf-load{animation:buf-load 7s var(--ease-in-out) infinite}
  .is-live .ev-dip{animation:dip 7s var(--ease-out-quart) infinite}
  .is-live .ev-dip svg{animation:wifi 7s linear infinite}
  .is-live .ev-chip,.is-live .ev-pchips span{animation:chip-in .6s var(--ease-out-expo) .9s backwards}
  .is-live .fx-c2,.is-live .ev-pchips span:nth-child(2){animation-delay:.98s}
  .is-live .fx-c3,.is-live .ev-pchips span:nth-child(3){animation-delay:1.06s}
  .is-live .ev-next{animation-delay:1.3s}
  .is-live .ev-next-bar i{animation:countdown 6.4s linear .4s infinite}
  .is-live .ev-prog i{animation:from-zero-x 1s var(--ease-out-expo) .8s backwards}
  .is-live .lib-ring{animation:lib-hop 7.5s var(--ease-settle) .6s infinite}

  /* live: channel change */
  .live-visual.is-in .tv-static{animation:static-flash .28s linear .5s}
  .live-visual.is-in .tv-screen picture{animation:settle-in .6s var(--ease-out-expo) .5s}
  .live-visual.is-in .tv-focus{animation:focus-land 1.6s var(--ease-spring) .9s backwards}
  .live-visual.is-in .tv-sheen{animation:sheen .9s var(--ease-in-out) 1.2s backwards}
  html.reveal-ready .live-visual:not(.is-in) .guide-row{opacity:0;transform:translateY(10px)}
  .live-visual .guide-row{transition:opacity .5s var(--ease-out-quart) .8s,transform .6s var(--ease-out-expo) .8s}
  .live-visual .guide-row+.guide-row{transition-delay:.89s}
  .live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,90,79,.6);opacity:0;animation:live-pulse 1.6s ease-out 3}

  /* pricing */
  html.reveal-ready .ring-card.armed .ring-fill{stroke-dashoffset:1}
  .ring-card.counting .ring-fill{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease-out-expo)}
  .plan-shell.is-in .odo{animation:price-wipe .9s var(--ease-out-expo) .25s backwards}
  html.reveal-ready [data-reveal]:not(.is-in) .mini i{opacity:.25;box-shadow:none}
  .mini i{transition:opacity .4s var(--ease-out-quart),box-shadow .4s}
  .mini:nth-child(2) i{transition-delay:.12s}
  .mini:nth-child(3) i{transition-delay:.24s}
  .mini:nth-child(4) i{transition-delay:.36s}
  .mini:nth-child(5) i{transition-delay:.48s}

  /* faq */
  @supports (interpolate-size:allow-keywords){
    .faq{interpolate-size:allow-keywords}
    .faq details::details-content{block-size:0;overflow:clip;transition:block-size .32s var(--ease-out-quart),content-visibility .32s allow-discrete}
    .faq details[open]::details-content{block-size:auto}
  }
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important}}
@media (prefers-reduced-motion:reduce){.motes{display:none}}

/* static fallback for the reduced-motion marquee: one wrapped, centered list */
@media (prefers-reduced-motion:reduce){
  .marquee-track{width:auto;justify-content:center}
  .marquee-list{flex-wrap:wrap;justify-content:center;row-gap:10px}
  .marquee-list[aria-hidden]{display:none}
  .marquee-viewport{-webkit-mask-image:none;mask-image:none;padding-inline:var(--gutter)}
}

/* cursor glow (created by JS on fine pointers only) */
.cursor-glow{position:fixed;left:0;top:0;z-index:40;width:36rem;height:36rem;margin:-18rem 0 0 -18rem;border-radius:50%;background:radial-gradient(circle,rgba(255,216,77,.08),transparent 60%);opacity:0;pointer-events:none;transition:opacity .3s;will-change:transform}
.cursor-glow.is-on{opacity:.55}
html.menu-open .cursor-glow{opacity:0}

/* ---------- Preferences ---------- */
@media (prefers-contrast:more){
  :root{--muted:var(--text);--faint:#d6d1c8;--line:currentColor;--line-strong:currentColor;--grain:none}
  .card,.faq details,.setup-panel,.works-on{border-color:currentColor}
  .leak,.beam,.wall-wash,.motes,.tv-glare,.cursor-glow{display:none}
}
@media (prefers-reduced-transparency:reduce){
  header.site::before{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .live-guide-example{background:var(--panel)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (forced-colors:active){
  .gold-text{color:CanvasText;-webkit-text-fill-color:CanvasText;background:none;filter:none}
  :focus-visible{outline-color:Highlight}
  .tv-focus,.ev-ring{box-shadow:none;outline:2px solid Highlight}
}
@media print{
  header.site,.marquee,.hero-sky,.cursor-glow,.credits-mark{display:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}