/* L-ASINAUT landing (/academy/), store-not-live mode, 22.10.2026. Vanilla CSS, no build.
   hero-shader.js is only mounted, never edited.
   Order: 1 fonts · 2 tokens/base · 3 chrome · 4 type/controls · 5 hero · 6 static layout (= no-JS, reduced motion, phone base)
          7 device · 8 motion (pinned acts, ≥768 + html.motion) · 9 tablet · 10 phone */

/* ================================================================ 1 · fonts (same files as /styles.css) + metric-matched fallbacks
   size-adjust / overrides measured in Chrome 22.10 (canvas, 100px): Syne 700 = 114.1% of Arial Bold, Syne 500 = 105.2% of Arial,
   Inter 500 = 108.3% of Arial, Inter 700 = 102.9% of Arial Bold; ascent/descent Syne .93/.27, Inter .97/.24 (÷ size-adjust) */
@font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/syne-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Syne Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600 800;size-adjust:114.06%;ascent-override:81.5%;descent-override:23.7%;line-gap-override:0%}
@font-face{font-family:'Syne Fallback';src:local('Arial'),local('ArialMT');font-weight:400 599;size-adjust:105.2%;ascent-override:88.4%;descent-override:25.7%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT');font-weight:400 599;size-adjust:108.3%;ascent-override:89.6%;descent-override:22.2%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600 800;size-adjust:102.9%;ascent-override:94.3%;descent-override:23.3%;line-gap-override:0%}

/* ================================================================ 2 · tokens + base */
:root{
  --night:#0b1230; --day:#fbfbfd; --mist:#f2f4f8;
  --ink:#0b1220; --ink2:#475569;
  --on-night:#f2f5ff; --on-night2:#c3cce2; --label-night:#a9b6d3;
  --brand:#2563eb; --brand-ink:#1d4ed8; --brand-night:#93c5fd;
  --ok:#047857; --ok-night:#6ee7b7; --bad:#b91c1c; --bad-night:#fca5a5; --warn:#b45309;
  --navy:#172554; --navy2:#1d3068; --navy-line:#33478a;
  --train-bg:#eef2ff; --train-ink:#3730a3; --train-tab:#4338ca; --train-edge:#c7d2fe;
  --o1:#3b82f6; --o2:#2563eb; --o3:#1e3a8a;
  --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.65,0,.35,1);
  --syne:'Syne','Syne Fallback',system-ui,sans-serif;
  --inter:'Inter','Inter Fallback',system-ui,sans-serif;
  --strip:32px; --navh:52px; --top:84px; --gut:32px; --maxw:1200px;
  --pad-x:max(var(--gut), calc((100% - var(--maxw)) / 2));
  --focus:var(--brand);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--top)}
body{margin:0;background:var(--day);color:var(--ink);font:400 17px/1.5 var(--syne);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure,figcaption,table{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
svg{flex:none}
button,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.n{font-family:var(--inter);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}
.wrap{max-width:calc(var(--maxw) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.wrap-n{max-width:calc(820px + 2 * var(--gut))}
/* night scopes: text, chips, links and the focus ring switch to their night values */
.hero,.g-layers,.g-counts,.foot-turn,.act-d,.foot-d,.fin{--focus:var(--brand-night);color:var(--on-night)}

/* ================================================================ 3 · chrome: strip (never hidden, never animated), skip links, nav */
.strip{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:10px;height:var(--strip);padding:0 var(--gut);background:var(--train-bg);color:var(--train-ink);border-bottom:1px solid var(--train-edge);font:500 12px/1.3 var(--inter)}
.strip-tab{flex:none;padding:3px 8px;background:var(--train-tab);color:#fff;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.strip-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:80;padding:10px 16px;background:var(--ink);color:#fff;font:600 15px/1.2 var(--syne);text-decoration:none;border-radius:8px}
.skip:focus{top:calc(var(--top) + 8px)}
.nav{position:sticky;top:var(--strip);z-index:55;height:var(--navh);color:var(--on-night);--focus:var(--brand-night)}
.nav-bg{position:absolute;inset:0;transition:opacity .2s linear}
.nav-bg-d{background:rgba(11,18,48,.985);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-bg-l{background:rgba(251,251,253,.985);border-bottom:1px solid rgba(15,23,42,.08);opacity:0}
.nav[data-theme=light]{color:var(--ink);--focus:var(--brand)}
.nav[data-theme=light] .nav-bg-l{opacity:1}
.nav[data-theme=light] .nav-bg-d{opacity:0}
.nav-in{position:relative;display:flex;align-items:center;gap:16px;height:100%;max-width:1440px;margin:0 auto;padding:0 var(--gut)}
.wm{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none}
.wm b{font:700 17px/1 var(--syne);letter-spacing:.01em;white-space:nowrap}
.wm-mark{width:22px;height:22px;color:var(--brand-night)}
.nav[data-theme=light] .wm-mark{color:var(--brand)}
.by{display:inline-flex;align-items:center;min-height:44px;font:500 11px/1 var(--inter);text-decoration:none;opacity:.82}
.by:hover{opacity:1;text-decoration:underline}
.nav-links{display:flex;gap:2px;margin:0 auto}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font:600 14px/1 var(--syne);text-decoration:none;opacity:.86}
.nav-links a:hover,.nav-links a[aria-current]{opacity:1}
.nav-links a[aria-current]{box-shadow:inset 0 -2px 0 currentColor}
.nav-sec{display:none;position:static}
.nav-sec summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;font:600 14px/1 var(--syne);cursor:pointer;list-style:none;border-radius:8px}
.nav-sec summary::-webkit-details-marker{display:none}
.nav-sec summary::after{content:'';width:7px;height:7px;margin-top:-4px;border-right:1.6px solid;border-bottom:1.6px solid;transform:rotate(45deg)}
.nav-sec[open] summary::after{margin-top:3px;transform:rotate(225deg)}
.nav-sec nav{position:absolute;right:var(--gut);top:calc(100% + 6px);display:grid;min-width:230px;padding:8px;background:#fff;color:var(--ink);border-radius:14px;box-shadow:0 24px 48px -16px rgba(15,23,42,.4),0 0 0 1px rgba(15,23,42,.08);--focus:var(--brand)}
.nav-sec nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:8px;font:600 15px/1 var(--syne);text-decoration:none}
.nav-sec nav a:hover{background:#eef2ff}
.pill{display:inline-flex;align-items:center;justify-content:center;flex:none;height:36px;padding:0 16px;border-radius:999px;background:var(--brand);color:#fff;font:600 14px/1 var(--syne);text-decoration:none;transition:background-color .2s}
.pill:hover{background:var(--brand-ink)}
.nav-cta-s{display:none}
@media (max-width:1023px){.nav-links{display:none}.nav-sec{display:block;margin-left:auto}}

/* ================================================================ 4 · type and controls */
h1,h2,h3{font-family:var(--syne);font-weight:700;color:inherit}
h1{font-size:clamp(40px,5.5vw,80px);line-height:1.02;letter-spacing:-1px;text-wrap:balance}
h2{font-size:clamp(30px,3.9vw,56px);line-height:1.04;letter-spacing:-1px;text-wrap:balance}
h3{font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:-.5px}
.line{max-width:46ch;font-weight:500;font-size:clamp(17px,1.45vw,21px);line-height:1.45;color:var(--ink2);text-wrap:pretty}
.eyebrow{font:600 12px/1.3 var(--inter);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);text-wrap:balance}
.nb{white-space:nowrap}
.chip{display:inline-flex;align-items:center;min-height:28px;padding:5px 12px;border-radius:999px;border:1px solid #c7d2fe;background:#eef2ff;color:#1e3a8a;font:600 12px/1.3 var(--inter);letter-spacing:.12em;text-transform:uppercase}
:is(.hero,.g-layers,.g-counts,.foot-turn,.act-d,.foot-d,.fin) .line{color:var(--on-night2)}
:is(.hero,.g-layers,.g-counts,.foot-turn,.act-d,.foot-d,.fin) .chip{color:var(--label-night);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
:is(.hero,.g-layers,.g-counts,.foot-turn,.act-d,.foot-d,.fin) .eyebrow{color:var(--label-night)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;background:var(--brand);color:#fff;font:600 16px/1.1 var(--syne);text-decoration:none;transition:background-color .2s,box-shadow .2s}
.btn:hover{background:var(--brand-ink)}
.btn svg,.tlink svg{width:16px;height:16px}
.btn-s{min-height:44px;padding:0 20px;font-size:15px}
.btn-ghost{background:transparent;color:var(--brand-ink);box-shadow:inset 0 0 0 1.5px #bfdbfe}
.btn-ghost:hover{background:#eff6ff}
.btn-ghost-n{background:transparent;color:var(--on-night);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32)}
.btn-ghost-n:hover{background:rgba(255,255,255,.08)}
.tlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--brand-ink);font:600 16px/1.2 var(--syne);text-decoration:none}
.tlink:hover{text-decoration:underline;text-underline-offset:4px}
:is(.hero,.g-layers,.g-counts,.foot-turn,.act-d,.foot-d,.fin) .tlink{color:var(--brand-night)}
.tbtn{appearance:none;display:inline-flex;align-items:center;min-height:44px;padding:0 6px;border:0;background:none;color:inherit;font:600 15px/1.2 var(--syne);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.micro{font:500 13px/1.45 var(--inter);color:var(--label-night);text-wrap:balance}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tag{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:3px 9px;border-radius:999px;border:1px solid rgba(15,23,42,.14);font:500 12px/1.3 var(--inter);color:var(--ink2)}
.tag i{font-style:normal;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px}
:is(.g-counts,.act-d) .tag{border-color:rgba(255,255,255,.16);color:var(--on-night2)}
:is(.g-counts,.act-d) .tag i{color:var(--label-night)}
.nm{font:600 12px/1 var(--inter);color:var(--label-night);margin-left:2px}
.bar{position:relative;height:8px;border-radius:99px;background:rgba(148,163,184,.28);overflow:hidden}
.bar-fill{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(1);background:var(--bad-night);border-radius:99px;transition:transform .24s var(--e-out),background-color .24s}
.bar-mark{position:absolute;top:-3px;bottom:-3px;left:62.5%;width:2px;background:var(--on-night);border-radius:2px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 24px;font:600 15px/1.2 var(--syne)}
.foot-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--brand-night);text-decoration:none}
.foot-links a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-links svg{width:15px;height:15px}

.hero{--peek:9svh;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;
  height:calc(100svh - var(--top) - var(--peek));min-height:560px;
  background:radial-gradient(ellipse at 12% 78%,#172d66 0,transparent 52%),radial-gradient(ellipse at 90% 18%,#25245f 0,transparent 48%),#0b1230}
.hero-shader{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .8s var(--e-out)}
.hero-shader.is-on{opacity:1}
.hero-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 52% 40% at 50% 50%,rgba(11,18,48,.62),rgba(11,18,48,0) 72%),linear-gradient(to bottom,rgba(11,18,48,0) 72%,#0b1230 100%)}
.hero-copy{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;max-width:calc(1300px + 2 * var(--gut));padding:0 var(--gut);text-align:center}
.hero h1{color:var(--on-night)}
.h1-l{display:block}
.hero-line{max-width:46ch;font-weight:500;font-size:clamp(17px,1.45vw,21px);line-height:1.45;color:var(--on-night2)}
.hero .ctas{justify-content:center;margin-top:4px}
.hero .micro{color:var(--on-night2)} /* sampled over the moving shader: #a9b6d3 fell to 4.3:1 on one frame; #c3cce2 keeps ≥ 5.5:1 */
@media (min-width:768px){.hero .micro{position:absolute;left:var(--gut);bottom:35px;max-width:calc(50% - 60px);text-align:left;text-wrap:nowrap}}
.pause{position:absolute;right:24px;bottom:24px;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(11,18,48,.6);color:var(--on-night);cursor:pointer}
.pause[hidden]{display:none}
.pause svg{width:18px;height:18px}
.pause .pause-g,.pause[aria-pressed=true] .pause-p{display:none}
.pause[aria-pressed=true] .pause-g{display:block}
@keyframes rise{from{transform:translateY(14px)}to{transform:translateY(0)}}
.motion .hero-eyebrow,.motion .h1-l,.motion .hero-line,.motion .hero .ctas,.motion .hero .micro{animation:rise .7s var(--e-out) both}
.motion .h1-l:first-child{animation-delay:80ms}.motion .h1-l:last-child{animation-delay:160ms}
.motion .hero-line{animation-delay:240ms}.motion .hero .ctas{animation-delay:320ms}.motion .hero .micro{animation-delay:400ms}

/* ================================================================ 6 · static layout: no JS, reduced motion, html.rm, and the phone base.
   Pinned acts exist only under html.motion and ≥768px (section 8). Everything here is the real reading order. */
.act{position:relative}
.nr{position:absolute;left:0;width:1px;pointer-events:none;display:none}
.stage{position:relative}
.sky,.peek,.big,.xl-cap,.xl,.dv-off,.dv-glint,.dv-floor,.co-line,.co-t,.lv-vis{display:none}
.grp{padding:clamp(72px,9vw,120px) var(--pad-x)}
/* S2 · day */
.g-store{background:linear-gradient(var(--night),#1e2a5a 6%,#c7d2fe 18%,var(--day) 30%);background-repeat:no-repeat;background-color:var(--day);text-align:center;padding-top:calc(30svh + 24px)}
.beat{display:flex;flex-direction:column;align-items:center;gap:16px}
.beat .line{margin:0 auto}
.co-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px;max-width:860px;margin:36px auto 0;text-align:left;counter-reset:co}
.co-list li,.schem-legend li{position:relative;display:flex;gap:12px;align-items:baseline;font-weight:500;font-size:16px;line-height:1.4;counter-increment:co}
.co-list li::before,.schem-legend li::before{content:counter(co);flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font:700 13px/1 var(--inter);transform:translateY(-1px)}
/* S3 · midnight */
.g-layers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:'beat schem';column-gap:56px;row-gap:28px;align-items:start;background:var(--night)}
.g-layers .beat{grid-area:beat;align-items:flex-start;text-align:left}
.g-layers .beat .line{margin:0}
.schem{grid-area:schem}
.schem-legend{display:grid;gap:10px;margin-top:12px;counter-reset:co;color:var(--on-night2);text-align:left}
.schem-legend li::before{background:#2563eb}
/* S4 · midnight */
.g-counts{background:var(--night);text-align:center;padding-top:0;padding-bottom:24px}
.g-counts .beat{gap:18px}
.h2a,.h2b{display:inline}
.h2a{color:var(--on-night2)}
.counts-line{max-width:54ch;margin:18px auto 0;font-weight:500;font-size:clamp(17px,1.45vw,21px);line-height:1.45;color:var(--on-night2)}
.eq{display:flex;justify-content:center;gap:clamp(24px,6vw,96px);margin:44px auto 36px}
.eq-f{display:flex;flex-direction:column;align-items:center;gap:10px}
.eq-f svg{width:min(22vw,200px);height:auto;overflow:visible}
.eq-w{fill:none;stroke-width:12;stroke-linecap:round;vector-effect:non-scaling-stroke}
.eq-f svg .eq-w{stroke-width:9}
.eq-grey{stroke:#94a3b8}.eq-blue{stroke:var(--brand-night)}
.eq-approx .eq-blue{opacity:0}
.eq-f figcaption{font:600 12px/1.3 var(--inter);letter-spacing:.12em;text-transform:uppercase;color:var(--label-night)}
.beat-ai{max-width:52ch;margin:36px auto 0;font-weight:500;font-size:clamp(17px,1.45vw,21px);line-height:1.45;color:var(--on-night)}
/* the title card: cabinet card style; static shows both states (cut words struck, the count trail, the result) */
.tc{width:min(760px,100%);margin:0 auto;padding:22px 24px 20px;text-align:left;background:#fff;color:var(--ink);border-radius:16px;box-shadow:0 30px 70px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);font:500 18px/1.45 var(--inter);--focus:var(--brand)}
.tc-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid #e3e7ec;font-weight:700;font-size:15px}
.tc-chip{display:inline-flex;gap:6px}
.tc-chip-b,.tc-chip-g{padding:3px 11px;border-radius:99px;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.tc-chip-b{background:#fef2f2;color:var(--bad);border:1px solid #fecaca}
.tc-chip-g{background:#ecfdf5;color:var(--ok);border:1px solid #a7f3d0}
.tc-title{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--ink)}
.tw{position:relative;display:inline-block;transition:opacity .24s}
.tw::after{content:'';position:absolute;left:-1px;right:-1px;top:54%;height:2px;background:var(--bad);transform:scaleX(0);transform-origin:0 50%;transition:transform .24s var(--e-out)}
.tw.is-cut{opacity:.38}
.tw.is-cut::after{transform:scaleX(1)}
html:not(.motion) .tw[data-cut]{opacity:.45}
html:not(.motion) .tw[data-cut]::after{transform:scaleX(1)}
.tc-bar{margin:14px 0 4px;background:#e8edf3}
.tc-bar .bar-mark{background:var(--ink)}
.tc .bar-fill{background:var(--bad)}
.tc .bar-fill.is-ok{background:var(--ok)}
html:not(.motion) .tc .bar-fill{transform:scaleX(.575);background:var(--ok)}
.tc-trail{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:12px;font:600 15px/1.4 var(--inter);font-variant-numeric:tabular-nums;color:var(--ink2)}
.tc-trail svg{width:14px;height:14px;color:#94a3b8}
.tc-76{color:var(--bad)}.tc-76 small{font-size:12px;font-weight:700}
.tc-69{color:var(--ok)}
.tc-new{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:14px;padding:8px 12px;border-left:3px solid var(--ok);background:#ecfdf5;font-weight:600;font-size:16px;line-height:1.4}
.tc-new svg{width:18px;height:18px;color:var(--ok)}
.tc-new b{color:var(--ok);white-space:nowrap}
.tc-checks{display:grid;gap:6px;margin-top:12px;font-size:14px;line-height:1.4;color:var(--ink2)}
.tc-checks li{display:flex;gap:8px;align-items:baseline}
.tc-checks svg{width:15px;height:15px;color:var(--ok);transform:translateY(2px)}
.tc-checks b{font-weight:600;color:var(--ink)}
.tc .tags{margin-top:14px}
.tc .tag{border-color:rgba(15,23,42,.14);color:var(--ink2)}
.tc .tag i{color:var(--ink)}
.tc .nm{color:var(--ink2)}
.foot-turn{background:var(--night);padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,96px)}
.yt-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.yt-wrap h3{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.5px}
.yt-wrap .line{max-width:56ch;margin:0 auto;text-wrap:balance}
.fn{font:600 .7em/1 var(--inter);vertical-align:super;margin-left:2px}
.fn a{color:var(--brand-night);text-decoration:none;padding:0 2px}
.fn a:hover{text-decoration:underline}
.yt{display:flex;flex-direction:column;gap:14px;width:100%;max-width:860px;margin:14px auto 0;text-align:left}
.yt-label{display:block;margin-bottom:-6px;font:600 14px/1.3 var(--inter);color:var(--on-night2)}
.yt-field{position:relative}
#tryTitle{display:block;width:100%;min-height:150px;padding:16px 18px 58px;resize:vertical;border-radius:16px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:500 19px/1.5 var(--inter)}
#tryTitle:focus-visible{outline:2px solid var(--brand-night);outline-offset:2px}
.yt-count{position:absolute;right:18px;bottom:14px;pointer-events:none;font:700 28px/1 var(--inter);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--bad-night);white-space:nowrap}
.yt-of{font-size:17px;color:var(--on-night2)}
.yt-s{font-size:17px}
.yt.is-fail .yt-count{position:static;margin-top:8px;font-size:16px;white-space:normal;color:var(--on-night)}
.yt.is-ok .yt-count{color:var(--ok-night)}
.yt.is-ok .bar-fill{background:var(--ok-night)}
.yt-checks{display:grid;gap:8px;font:500 14px/1.4 var(--inter);color:var(--on-night2)}
.yt-checks li{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:8px}
.yt-checks svg{width:16px;height:16px;margin-top:2px}
.yt-checks b{font-weight:600;color:var(--on-night)}
.yt-checks span{grid-column:2}
.yt-checks .ic-ok{color:var(--ok-night)}.yt-checks .ic-bad{color:var(--bad-night)}
.yt-checks .is-ok .ic-bad,.yt-checks .is-bad .ic-ok{display:none}
.yt-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px}
.no-js .yt,.no-js #ytReset{display:none}
/* S5 · Next day (static: two receipt columns; with JS the button still swaps the date instantly) */
.act-d{background:var(--night)}
.stage-d{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px 64px;align-items:start;padding:clamp(72px,9vw,120px) var(--pad-x)}
.nd-l{display:flex;flex-direction:column;gap:28px}
.nd-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.nd-ctl{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.plate{display:inline-flex;flex-direction:column;gap:6px;padding:18px 24px 20px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.plate-k{font:600 12px/1.2 var(--inter);letter-spacing:.12em;text-transform:uppercase;color:var(--label-night)}
.plate-k .flap{color:var(--on-night)}
.h2s{display:block}
.plate-v{font:700 clamp(28px,3.1vw,46px)/1.05 var(--inter);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.flap{display:inline-grid;justify-items:start}
.flap>span{grid-area:1/1}
.flap-b{opacity:0}
.act-d[data-state=next] .flap-a{opacity:0}
.act-d[data-state=next] .flap-b{opacity:1}
.ndbtn{appearance:none;display:inline-grid;align-items:center;min-height:56px;padding:0 28px;border:0;border-radius:999px;background:#fff;color:var(--navy);font:700 17px/1.1 var(--syne);cursor:pointer;transition:background-color .2s}
.ndbtn:hover{background:#e0e7ff}
.ndbtn>span{grid-area:1/1}
.ndbtn-b,.act-d[data-state=next] .ndbtn-a{visibility:hidden}
.act-d[data-state=next] .ndbtn-b{visibility:visible}
.no-js .ndbtn{display:none}
.nd-r{display:flex;flex-direction:column;gap:18px;min-width:0}
.nd-num{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;font:700 clamp(56px,7vw,104px)/1 var(--inter);font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:#fff}
.nd-v{display:inline-flex;align-items:center;gap:14px}
.nd-v .s1{color:var(--on-night2)}
.s-arr{width:.4em;height:.4em;color:var(--label-night)}
.nd-delta{font-size:.3em;letter-spacing:0;padding:4px 12px;border-radius:99px;background:rgba(252,165,165,.12);color:var(--bad-night);border:1px solid rgba(252,165,165,.3)}
.rc{border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);font:500 15px/1.3 var(--inter);color:var(--on-night2);overflow:hidden}
.rc-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 16px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.rc-h b{color:#fff;font-weight:700}
.rc-cols{display:grid;grid-template-columns:repeat(2,8.5em);text-align:right;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--label-night)}
.rc-row{display:grid;grid-template-columns:minmax(0,1fr) 8.5em 8.5em;align-items:center;min-height:44px;padding:6px 18px;border-top:1px solid rgba(255,255,255,.06);font-variant-numeric:tabular-nums}
.rc-row:first-of-type{border-top:0}
.rc-v{text-align:right;color:#fff;font-weight:600}
.rc-v small{display:block;font-size:12px;font-weight:500;color:var(--label-night)}
.rc-same{grid-column:2/4}
.rc-none{color:var(--label-night)}
.rc-tot{color:#fff;font-weight:700}
.rc-tot .rc-v{font-weight:800}
.rc-peak .rc-v.s2{color:var(--bad-night)}
.nd-pill{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font:600 14px/1.3 var(--inter);color:var(--on-night2)}
.nd-pill-v{display:inline-flex;flex-wrap:wrap;gap:8px}
.nd-pill-v>span{padding:4px 12px;border-radius:99px;background:rgba(147,197,253,.12);color:var(--brand-night);border:1px solid rgba(147,197,253,.3)}
/* static: only the pill of the date on the plate (both dates are in the receipt columns) */
html:not(.motion) .act-d[data-state=today] .nd-pill-v .s2,html:not(.motion) .act-d[data-state=next] .nd-pill-v .s1{display:none}
/* the next day's store money: one dated line instead of two tiles (premium 4.8; honesty M6: never shown undated) */
.nd-yday{font:500 14px/1.5 var(--inter);color:var(--on-night2)}
.nd-yday b{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.tile-k{display:inline-block;margin-right:6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--label-night)}
.act-d .tags{gap:2px 12px}
.act-d .tag{border:0;padding:0;min-height:0;font-size:12px;color:var(--label-night)}
.nd-cap{font:500 14px/1.5 var(--inter);color:var(--on-night2);text-wrap:pretty}
.foot-d{background:var(--night);padding:0}
.dawn{display:grid;height:18svh;background:linear-gradient(var(--night),#c7d2fe 55%,var(--day))}
.dawn-h{display:block}
/* S6 · levels (static: three chapters with vignettes; ≥1024 three columns) */
.levels{background:var(--day);padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,112px)}
.lv-top{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(36px,5vw,64px)}
.lv-chs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.lv-ch{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 22px 24px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.08),0 24px 48px -32px rgba(15,23,42,.35)}
.lv-num{position:relative;display:grid;place-items:center;width:96px;height:56px;margin-bottom:4px}
.lv-num span{position:relative;font:700 30px/1 var(--inter);letter-spacing:-.02em}
.lv-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lv-ring ellipse{fill:none;stroke-width:2;stroke-dasharray:100;stroke-dashoffset:0}
#beginner{--lc:var(--o1)}#intermediate{--lc:var(--o2)}#pro{--lc:var(--o3)}
.lv-num span{color:var(--lc)}.lv-ring ellipse{stroke:var(--lc)}
.lv-disp{font:700 clamp(19px,1.6vw,23px)/1.25 var(--syne);letter-spacing:-.3px}
.lv-txt{font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--ink2)}
.lv-cta{margin-top:auto;padding-top:6px}
.lv-later{display:none;font:600 13px/1.3 var(--inter);color:var(--ink2)}
.lv-ch:is([data-level-open=false],[data-level-open=soon]) .lv-later{display:inline-flex;padding:6px 12px;border-radius:99px;background:#f1f5f9}
.lv-ch[data-level-open=soon] .lv-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
/* vignettes: a navy header strip + that level's overlay (static and phone) */
.vig{order:-1;position:relative;width:100%;margin:0 0 6px;padding:0 0 12px;border-radius:12px;background:#f8fafc;box-shadow:inset 0 0 0 1px #e2e8f0;overflow:hidden;font:500 12px/1.35 var(--inter);color:var(--ink)}
.vig-bar{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;background:var(--navy);color:#e6ebf6}
.vig-bar b{font-weight:800;letter-spacing:.02em;color:#fff}
.vig-bar span{margin-left:auto;padding:1px 8px;border-radius:99px;background:rgba(16,185,129,.16);border:1px solid rgba(110,231,183,.5);color:#bbf7d0;font-weight:600;font-size:11px}
.vig-menu{display:grid;place-items:center;width:22px;height:22px;border-radius:5px}
.vig-menu svg{width:15px;height:15px}
.vig-1 .vig-menu{box-shadow:0 0 0 2px var(--o1)}
.vig-bubble{position:relative;margin:12px 10px 0;padding:8px 10px;background:#fff;border-left:3px solid var(--o1);box-shadow:0 10px 24px -12px rgba(15,23,42,.35);font-weight:600}
.vig-chip{display:inline-block;margin:10px 10px 0;padding:3px 10px;border-radius:99px;background:#eef2ff;color:#1e3a8a;font-weight:700;font-size:11px}
.vig-rows{display:grid;gap:2px;margin:10px 10px 0;font-variant-numeric:tabular-nums}
.vig-rows span{padding:5px 8px;background:#fff;border-radius:4px}
.vig-rows .is-hi{background:#eef2ff;box-shadow:inset 3px 0 0 var(--o2);font-weight:700}
.vig-banner{padding:8px 10px;background:#eef2ff;color:var(--train-ink);font-weight:700;border-bottom:1px solid var(--train-edge);border-left:3px solid var(--o3)}
.vig-agent{display:grid;gap:3px;margin:10px 10px 0;padding:10px;background:#fff;border-radius:8px;box-shadow:0 10px 24px -14px rgba(15,23,42,.35)}
.vig-agent b{color:#3730a3}
.vig-ar{display:flex;gap:6px;margin-top:4px}
.vig-ar i{font-style:normal;padding:2px 10px;border-radius:99px;border:1px solid #cbd5e1;font-weight:600}
.vig-ar i:first-child{background:var(--navy);color:#fff;border-color:var(--navy)}
/* S7 · free */
.free{background:var(--day);padding:clamp(40px,5vw,72px) 0 clamp(72px,9vw,128px)}
.sec-top{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:clamp(32px,4vw,52px)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr);gap:24px}
.card a{display:flex;flex-direction:column;justify-content:flex-start;gap:6px;padding:18px 18px 22px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.08),0 18px 40px -30px rgba(15,23,42,.4);text-decoration:none;transition:transform .2s var(--e-out),box-shadow .2s}
.card a:hover{box-shadow:0 0 0 1px rgba(37,99,235,.35),0 24px 48px -30px rgba(15,23,42,.45)}
.card-task a{box-shadow:0 0 0 1.5px var(--navy),0 18px 40px -30px rgba(15,23,42,.4)}
.card-art{width:100%;height:auto;margin-bottom:10px;border-radius:10px;background:#f2f4f8}
.card-k{font:600 12px/1.3 var(--inter);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.card-t{font:700 20px/1.25 var(--syne);letter-spacing:-.3px;color:var(--ink)}
.card-s{font:500 14px/1.4 var(--inter);color:var(--ink2)}
.a-pg{fill:#fff;stroke:#e2e8f0}.a-navy{fill:#172554}.a-wl{stroke:#fff;stroke-width:1.4;stroke-linecap:round}
.a-tab{fill:#e2e8f0}.a-on{fill:#bfdbfe;stroke:#2563eb}.a-side{fill:#eef2ff}.a-card{fill:#f1f5f9;stroke:#e2e8f0}
.a-bottle{fill:#e2e8f0;stroke:#94a3b8;stroke-width:1.2}.a-lead{stroke:#94a3b8;stroke-width:1.2;stroke-dasharray:2 2}
.a-id{fill:#fff;stroke:#cbd5e1}.a-tx{font:600 8.5px/1 var(--inter);fill:#0b1220;text-anchor:middle}
.a-rule{stroke:#64748b;stroke-width:1.4}.a-tick{stroke:#94a3b8;stroke-width:1.2}.a-75{stroke:#0b1220;stroke-width:1.6;stroke-dasharray:3 2}
.a-tx75{font-size:10px;font-weight:700}
.a-over{fill:#fecaca}.a-fit{fill:#a7f3d0}.a-ok{fill:none;stroke:#047857;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.free-lead{max-width:60ch;margin:clamp(40px,5vw,64px) 0 18px;font-weight:600;font-size:clamp(18px,1.6vw,22px);line-height:1.4;text-wrap:pretty}
.tbl-wrap{border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.08);overflow:clip}
.cmp{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4}
.cmp caption{padding:18px 22px 6px;text-align:left;font:600 12px/1.3 var(--inter);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.cmp th,.cmp td{padding:14px 22px;border-top:1px solid #eef1f5;text-align:left;vertical-align:middle}
.cmp thead th{font:700 14px/1.2 var(--inter);color:var(--ink);border-top:0;padding-top:10px;padding-bottom:10px}
.cmp tbody th{font-weight:500;color:var(--ink)}
.cmp td{width:22%;font:500 14px/1.35 var(--inter);color:var(--ink2)}
.cmp td svg{display:inline-block;width:20px;height:20px;vertical-align:-4px}
.cmp .yes{color:var(--ok)}.cmp .no{color:#64748b}
.cmp-always{padding:16px 22px;border-top:1px solid #eef1f5;background:#f8fafc;font-weight:600;font-size:16px}
.ctas-day{margin-top:28px}
/* S8 · reference */
.ref{background:var(--mist);padding:clamp(64px,8vw,112px) 0}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rtile a{display:flex;flex-direction:column;gap:10px;height:100%;padding:22px 22px 18px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.08);text-decoration:none;transition:box-shadow .2s}
.rtile a:hover,.rtile a:focus-visible{box-shadow:0 0 0 1px rgba(37,99,235,.4),0 22px 44px -30px rgba(15,23,42,.45)}
.rtile-k{font:700 19px/1.25 var(--syne);letter-spacing:-.3px}
.rtile-t{font:500 15px/1.5 var(--inter);color:var(--ink2)}
.rtile-t b{color:var(--ink);font-weight:700}
.rtile-dates{display:grid;gap:6px}
.rtile-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px;color:var(--brand-ink);font:600 15px/1.2 var(--syne)}
.rtile-go svg{width:15px;height:15px}
/* S9 · finale (night) */
.fin{position:relative;background:radial-gradient(ellipse at 12% 78%,#172d66 0,transparent 52%),radial-gradient(ellipse at 90% 18%,#25245f 0,transparent 48%),var(--night);padding:clamp(80px,10vw,140px) 0;text-align:center}
.fin-in{display:flex;flex-direction:column;align-items:center;gap:20px}
.fin-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-bottom:12px}
.fin-n{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 12px}
.fin-n+.fin-n{border-left:1px solid rgba(255,255,255,.14)}
.fin-n b{font:700 clamp(48px,7.6vw,120px)/1 var(--inter);font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:#fff;white-space:nowrap}
.fin-n small{font-size:.4em;letter-spacing:-.02em;color:var(--on-night2)}
.fin-c{max-width:22ch;font:500 14px/1.4 var(--inter);color:var(--label-night)}
.fin-orbit{width:160px;height:80px;overflow:visible}
.fin-oe{fill:none;stroke:var(--brand-night);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0}
.fin-od{fill:var(--brand-night);offset-path:path('M 180 50 A 80 30 0 1 1 20 50 A 80 30 0 1 1 180 50');offset-distance:78%;offset-rotate:0deg}
.fin .ctas{justify-content:center}
.fin .line{text-wrap:balance}
/* S9 · waitlist form (#waitlist; posts to /api/waitlist, JS in landing.js) */
.wl{width:100%;max-width:560px;margin:8px auto 0;text-align:left;scroll-margin-top:calc(var(--top) + 24px)}
.wl-form{display:flex;flex-direction:column;gap:10px}
.wl-label{font:600 14px/1.3 var(--syne);color:var(--label-night)}
.wl-row{display:flex;gap:10px}
.wl-in{flex:1 1 auto;min-width:0;min-height:48px;padding:0 20px;border:1.5px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(255,255,255,.06);color:#fff;font:500 16px/1.2 var(--inter);caret-color:var(--brand-night)}
.wl-in:hover{border-color:rgba(255,255,255,.5)}
.wl-in:focus-visible{border-color:var(--brand-night)}
.wl-in[aria-invalid=true]{border-color:var(--bad-night)}
.wl-btn{flex:none;border:0;cursor:pointer}
.wl-btn:disabled{opacity:.7;cursor:progress}
.wl-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.wl-note{font:500 14px/1.45 var(--syne);color:var(--on-night2)}
.wl-note a{color:var(--brand-night);text-underline-offset:3px}
.wl-status{min-height:1.45em;font:600 15px/1.45 var(--syne);color:var(--on-night)}
.wl-form[data-state=ok] .wl-status{color:var(--ok-night)}
.wl-form:is([data-state=email],[data-state=busy],[data-state=error],[data-state=network]) .wl-status{color:var(--bad-night)}
/* cookie banner: built by /shared.js; rules copied from /styles.css (this page does not load styles.css), site tokens → page tokens */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#fff;border-top:1px solid #e2e8f0;padding:14px 24px;display:flex;align-items:center;justify-content:center;gap:16px;font-size:.85rem;color:var(--ink2);backdrop-filter:blur(12px);transform:translateY(100%);transition:transform .3s ease;box-shadow:0 -4px 20px rgba(0,0,0,.06)}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner a{color:var(--brand);text-decoration:underline}
.cookie-btn{padding:7px 18px;background:var(--brand);color:#fff;border:none;border-radius:100px;font-family:var(--syne);font-size:.8rem;font-weight:600;cursor:pointer}
.cookie-decline{background:transparent;border:1.5px solid #e2e8f0;color:#64748b}.cookie-decline:hover{background:#f8fafc}
@media (max-width:768px){
  .cookie-banner{flex-direction:column;gap:10px;text-align:center;padding:16px}
  .cookie-btn{padding:12px 22px;min-height:44px}
}
/* /shared.js also adds the site's Feedback and Ask L-Guard widgets; their styles live in /styles.css, which this page does not load */
#lgFeedbackBtn,#lgFeedbackModal,#lgChatBtn,#lgChatModal{display:none!important}
/* admin view-count badge: built by /shared.js only for the admin account; rules copied from /styles.css */
.lg-admin-views{position:fixed;bottom:84px;right:20px;z-index:9997;display:inline-flex;align-items:center;gap:9px;padding:10px 16px;background:#0f172a;color:#fff;border-radius:100px;font-family:var(--inter);font-size:.8rem;font-weight:600;box-shadow:0 8px 24px rgba(15,23,42,.32);user-select:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.lg-admin-views:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(15,23,42,.4)}
.lg-admin-views svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0;opacity:.9}
.lg-admin-views-num{font-weight:800;font-size:.95rem;letter-spacing:-.2px}
.lg-admin-views-label{opacity:.7;font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.lg-admin-views-error{background:#dc2626;box-shadow:0 8px 24px rgba(220,38,38,.4);animation:lgViewsPulse 2s ease-in-out infinite}
.lg-admin-views-error:hover{box-shadow:0 12px 28px rgba(220,38,38,.55)}
@keyframes lgViewsPulse{0%,100%{opacity:1}50%{opacity:.85}}
@media(max-width:560px){.lg-admin-views{bottom:78px;right:14px;padding:8px 12px;gap:7px}.lg-admin-views svg{width:14px;height:14px}.lg-admin-views-label{display:none}}
/* FAQ, notes, footer */
.faq{background:var(--day);padding:clamp(64px,8vw,112px) 0 48px}
.faq h2{margin-bottom:24px}
.faq details{border-top:1px solid #e2e8f0}
.faq details:last-of-type{border-bottom:1px solid #e2e8f0}
.faq summary{position:relative;display:flex;align-items:center;min-height:60px;padding:14px 40px 14px 0;font:700 19px/1.3 var(--syne);letter-spacing:-.2px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:8px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);transform:rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.faq details p{padding:0 0 20px;max-width:64ch;font-weight:500;color:var(--ink2)}
.notes{background:var(--day);padding:24px 0 72px}
.notes h2{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.5px;margin-bottom:14px}
.notes ol{display:grid;gap:10px;list-style:decimal;padding-left:20px;font:400 13px/1.55 var(--inter);color:var(--ink2)}
.notes a{color:var(--brand-ink)}
.notes .back{display:inline-grid;place-items:center;width:44px;height:44px;margin:-10px -6px;vertical-align:middle;border-radius:8px}
.notes .back svg{width:15px;height:15px}
.foot-site{background:var(--mist);border-top:1px solid #e2e8f0;padding:40px 0 48px;font:500 14px/1.55 var(--syne);color:var(--ink2)}
.foot-site .wrap{display:flex;flex-direction:column;gap:8px}
.fs-brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}
.fs-brand b{font-weight:700}
.fs-brand .wm-mark{color:var(--brand)}
.fs-how{color:var(--brand-ink);font-weight:600;text-underline-offset:3px}
.fs-links{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:6px}
.fs-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--brand-ink);text-decoration:none;font-weight:600}
.fs-links a:hover{text-decoration:underline;text-underline-offset:4px}
.rm-btn{padding:0 2px;color:var(--ink)}
.rm-btn[aria-pressed=true]::before{content:'';width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--ok)}
.dv{position:relative;width:min(1000px,100%);aspect-ratio:16/10;margin:44px auto 0;container-type:inline-size;text-align:left;color:#0f172a;-webkit-user-select:none;user-select:none}
.dv-arrive,.dv-frame,.dv-lift,.dv-iso{position:absolute;inset:0}
.ly{position:absolute}
.ly-face{position:absolute;inset:0;overflow:hidden;font:500 max(8px,1.06cqi)/1.3 var(--inter)}
.ly0{inset:0}
.ly5{left:0;top:0;width:100%;height:13%}
.ly1{left:25.5%;top:13%;width:74.5%;height:10%}
.ly2{left:0;top:13%;width:25.5%;height:87%}
.ly3{left:30%;top:36%;width:64%;height:52%}
.ly4{left:0;top:13%;width:24%;height:87%}
html:not(.motion) .dv .ly3,html:not(.motion) .dv .ly4,.dv-l .ly3,.dv-l .ly4{display:none}
.ly-face svg{width:1.25em;height:1.25em}
/* ly0 · base: page canvas, quick-action pills, widgets */
.lp-base{background:#f8fafc;border-radius:18px;box-shadow:0 0 0 1px rgba(15,23,42,.1),0 40px 80px -30px rgba(15,23,42,.35),0 18px 36px -18px rgba(15,23,42,.22)}
.lp-tabbed{position:absolute;left:25.5%;top:13%;width:74.5%;height:10%;background:#dfe4ea}
.lp-pills{position:absolute;left:27%;right:2%;top:25.2%;height:4.6%;display:flex;align-items:center;gap:.45em;white-space:nowrap;overflow:hidden}
.lp-sp,.lp-pl{flex:none;display:inline-flex;align-items:center;height:2.1em;padding:0 .8em;border:1.5px solid #94a3b8;border-radius:99px;background:#fff;font-weight:600;font-size:.92em}
.lp-sp i{width:.5em;height:.5em;margin-left:.6em;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg) translateY(-.15em)}
.lp-tx{flex:none;font-weight:600;font-size:.92em;color:#1d4ed8}
.lp-tx:first-of-type{margin-left:auto}
.lp-wg{position:absolute;top:32%;bottom:4%;display:flex;flex-direction:column;gap:.55em;padding:0 .9em .8em;background:#fff;border:1px solid #d5dbe1;border-radius:.7em;overflow:hidden}
/* widgets end with their content (premium 4.4: no half-empty white panels); the fee list fills the right column */
.lp-wg-title{left:27%;width:44%;bottom:42%}
.lp-wg-money{left:27%;width:44%;top:60.5%;bottom:auto;gap:.2em}
.lp-wg-bal{left:72.5%;right:2%;bottom:auto}
.lp-wg-prod{left:72.5%;right:2%;top:60.5%;bottom:auto;gap:.2em}
.lp-wg-prod .lp-mr span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-mr{display:flex;justify-content:space-between;gap:1em;padding:.18em 0;font-variant-numeric:tabular-nums}
.lp-mr span{color:#475569}.lp-mr b{font-weight:600}
.lp-net{margin-top:.15em;padding-top:.35em;border-top:1px solid #e3e7ec}.lp-net b{font-weight:800}
.lp-pay{margin-top:.2em;padding-top:.5em;border-top:1px solid #e3e7ec;color:#475569}.lp-pay b{color:#0f172a}
.lp-h{display:flex;justify-content:space-between;align-items:center;gap:.6em;margin:0 -.9em;padding:.6em .9em;border-bottom:1px solid #e3e7ec;font-weight:700;font-size:1.02em;white-space:nowrap}
.lp-h>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lp-chip-bad{flex:none;padding:.1em .7em;border-radius:99px;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;font-weight:700;font-variant-numeric:tabular-nums}
.lp-old{font-size:1.02em;line-height:1.45;color:#0f172a}
.lp-bar{position:relative;height:.55em;border-radius:99px;background:#fecaca;margin-top:.2em}
.lp-bar i{position:absolute;inset:0;border-radius:99px;background:#dc2626}
.lp-bar b{position:absolute;left:62.5%;top:-.3em;bottom:-.3em;width:2px;background:#0f172a}
.lp-k{font-size:.86em;line-height:1.35;color:#64748b}
.lp-big{font-size:1.45em;font-weight:700;font-variant-numeric:tabular-nums;color:#0f172a;margin-top:-.3em}
.lp-wg-bal{gap:.35em}
.lp-wg-bal .lp-h{margin-bottom:.3em}
/* ly5 · header: training strip + two navy rows */
.lp-head{display:grid;grid-template-rows:23% 43% 34%;background:var(--navy);border-radius:18px 18px 0 0;color:#e6ebf6}
.lp-strip{display:flex;align-items:center;gap:.7em;padding:0 .8em 0 .6em;background:var(--train-bg);color:var(--train-ink);border-bottom:1px solid var(--train-edge);white-space:nowrap;overflow:hidden;font-size:.86em}
.lp-strip-tab{flex:none;padding:.1em .55em;background:var(--train-tab);color:#fff;font-weight:700;font-size:.82em;letter-spacing:.1em;text-transform:uppercase}
.lp-strip-t{overflow:hidden;text-overflow:ellipsis}
.lp-date{display:inline-flex;align-items:center;gap:.45em;margin-left:auto;padding-left:.7em;border-left:1px solid var(--train-edge)}
.lp-date b{padding:0 .55em;background:#fff;border:1px solid var(--train-edge);border-radius:.3em;color:#0f172a;font-weight:700;font-variant-numeric:tabular-nums}
.lp-next{flex:none;padding:0 .7em;border-radius:99px;background:var(--train-tab);color:#fff;font-weight:700}
.lp-r1{display:flex;align-items:center;gap:.75em;padding:0 .7em 0 .45em;white-space:nowrap;overflow:hidden}
.lp-ic{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:.3em;color:#fff}
.lp-wm{display:inline-flex;align-items:center;gap:.35em;color:#60a5fa}
.lp-wm b{color:#fff;font-weight:800;letter-spacing:.02em}
.lp-store{display:inline-flex;align-items:center;gap:.45em;padding-right:.8em;border-right:1px solid var(--navy-line);font-weight:600}
.lp-store b{color:#fff}
.lp-store i{width:1px;height:1em;background:#7083bd}
.lp-hp{display:inline-flex;align-items:center;gap:.4em;padding:.05em .7em;border-radius:99px;background:rgba(16,185,129,.16);border:1px solid rgba(110,231,183,.5);color:#bbf7d0;font-weight:600;font-variant-numeric:tabular-nums}
.lp-hp i{width:.5em;height:.5em;border-radius:50%;background:#6ee7b7}
.lp-search{flex:1 1 auto;display:flex;align-items:center;gap:.5em;min-width:2em;max-width:24em;height:2.15em;margin:0 auto;padding:0 .7em;border:1px solid #7083bd;border-radius:.45em;background:rgba(255,255,255,.07);color:#b4c0de}
.lp-search span{overflow:hidden;text-overflow:ellipsis;font-style:italic}
.lp-search svg{width:1em;height:1em}
.lp-asst,.lp-learn{display:inline-flex;align-items:center;gap:.35em;color:#fff;font-weight:600}
.lp-icons{display:inline-flex;align-items:center}
.lp-icons svg{box-sizing:content-box;padding:0 .5em;border-left:1px solid var(--navy-line)}
.lp-r2{display:flex;align-items:center;gap:1em;padding:0 .75em;background:var(--navy2);border-top:1px solid var(--navy-line);white-space:nowrap;overflow:hidden}
.lp-r2 svg{width:1.05em;height:1.05em;color:#aab8d8}
.lp-r2 b{font-weight:500}
/* ly1 · seven workspace tabs, one number each */
.lp-tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3em;padding:.4em .6em 0;background:#dfe4ea}
.lp-tab{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:.15em .55em;background:#eef1f5;border-top:3px solid transparent;border-radius:.45em .45em 0 0;white-space:nowrap}
.lp-tab b,.lp-tab span{overflow:hidden;text-overflow:ellipsis}
.lp-tab b{font-weight:700;font-size:.95em;color:#0f172a}
.lp-tab span{font-size:.78em;color:#64748b}
.lp-tab em{font-style:normal;font-weight:700;font-size:1.25em;line-height:1.2;font-variant-numeric:tabular-nums;color:#0f172a}
.lp-tab.is-on{background:#f8fafc;border-top-color:#1d4ed8}
.lp-tab.is-on b{color:#1d4ed8}
.lp-tab.is-mute{opacity:.62}
/* ly2 · Actions panel */
.lp-actions{display:flex;flex-direction:column;gap:.5em;padding:.75em .7em;background:#fff;border-right:1px solid #e2e8f0;border-radius:0 0 0 18px}
.lp-ah{display:flex;align-items:center;gap:.45em}
.lp-ah b{font-size:1.15em;font-weight:700}
.lp-count{min-width:1.8em;padding:0 .5em;border-radius:99px;background:#b91c1c;color:#fff;font-size:.85em;font-weight:700;line-height:1.55;text-align:center}
.lp-all{margin-left:auto;color:#1d4ed8;font-weight:600;font-size:.9em}
.lp-act{display:flex;flex-direction:column;gap:.25em;padding:.5em .6em .55em .75em;border:1px solid #e2e8f0;border-radius:.5em;background:#fff}
.lp-act.is-crit{box-shadow:inset 3px 0 0 #b91c1c}
.lp-act.is-med{box-shadow:inset 3px 0 0 #64748b}
.lp-act.is-low{box-shadow:inset 3px 0 0 #94a3b8}
.lp-act-h{display:flex;align-items:center;gap:.4em}
.lp-lab{font-size:.78em;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.is-crit .lp-lab{color:#b91c1c}.is-med .lp-lab{color:var(--warn)}.is-low .lp-lab{color:#475569}
.sev{flex:none;display:inline-block;width:.6em;height:.6em}
.sev-c{border-radius:50%;background:#b91c1c}
.sev-m{width:0;height:0;border-left:.36em solid transparent;border-right:.36em solid transparent;border-bottom:.62em solid var(--warn)}
.sev-l{border-radius:50%;border:1.5px solid #64748b}
.lp-fix{margin-left:auto;padding:.05em .8em;border-radius:99px;background:#1d4ed8;color:#fff;font-weight:600;font-size:.85em}
.lp-pill{margin-left:auto;padding:.05em .65em;border-radius:99px;background:#eff6ff;color:#1d4ed8;font-weight:700;font-size:.82em;white-space:nowrap}
.lp-act-t{font-weight:600;line-height:1.3;color:#0f172a}
.lp-sub{margin-top:.2em;padding-top:.45em;border-top:1px solid #e2e8f0;font-size:.76em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#64748b}
.lp-rec{display:flex;align-items:center;gap:.4em;padding-top:.45em;border-top:1px solid #e2e8f0;font-weight:700}
.lp-rec span{min-width:1.5em;padding:0 .35em;border-radius:.3em;background:#475569;color:#fff;font-size:.82em;text-align:center}
.lp-rec2{color:#64748b;font-weight:600}
/* ly3 · Manage products sheet */
.lp-sheet{display:flex;flex-direction:column;gap:.6em;padding:.8em 1em;background:#fff;border-radius:.8em;box-shadow:0 0 0 1px rgba(15,23,42,.12),0 24px 48px -20px rgba(15,23,42,.45)}
.lp-crumb{font-size:.9em;color:#64748b}.lp-crumb b{color:#0f172a;font-size:1.15em}
.lp-tbl{display:grid}
.lp-tr{display:grid;grid-template-columns:2.2fr 1.4fr 1.25fr .9fr .8fr .8fr;gap:.6em;align-items:center;padding:.62em .3em;border-top:1px solid #eef1f4;white-space:nowrap;font-variant-numeric:tabular-nums}
.lp-tr span{overflow:hidden;text-overflow:ellipsis}
.lp-th{border-top:0;font-size:.82em;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#64748b}
.lp-tr span:last-child{font-weight:700}
.lp-st{display:inline-block;width:.55em;height:.55em;margin-right:.35em;border-radius:50%;background:#047857}
/* ly4 · the menu drawer */
.lp-menu{display:flex;flex-direction:column;gap:.15em;padding:.7em .6em;background:#fff;border-right:1px solid #e2e8f0;box-shadow:12px 0 32px -18px rgba(15,23,42,.4)}
.lp-msearch{display:flex;align-items:center;gap:.5em;height:2.2em;margin-bottom:.4em;padding:0 .6em;border:1px solid #cbd5e1;border-radius:.45em;color:#64748b;font-style:italic}
.lp-msearch svg{width:1em;height:1em}
.lp-mi{padding:.45em .6em;border-radius:.35em;font-weight:600}
.lp-mi.is-on{background:#eff6ff;color:#1d4ed8}
.lp-mi-t{margin-top:.3em;padding-top:.6em;border-top:1px solid #e2e8f0;border-radius:0;color:var(--train-ink)}
.lp-mfoot{display:flex;gap:1em;margin-top:auto;padding-top:.6em;border-top:1px solid #e2e8f0;color:#1d4ed8;font-weight:600;font-size:.9em}
/* callouts (numbered markers in the static version; chips with leader lines in motion) */
.co{position:absolute;margin:0;pointer-events:none}
.co-1{left:1.8%;top:6.6%}.co-2{left:37.6%;top:6.6%}.co-3{left:88.5%;top:-2.8%}.co-4{left:23.4%;top:15.6%}
.co-n{position:absolute;left:0;top:0;display:grid;place-items:center;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#2563eb;color:#fff;font:700 13px/1 var(--inter);box-shadow:0 0 0 3px #fff,0 6px 14px -4px rgba(15,23,42,.5)}
/* level overlays on device copy #2 (shown only in the motion levels layout) */
.ov{position:absolute;inset:0;pointer-events:none;opacity:0;font:500 max(8px,1.06cqi)/1.35 var(--inter)}
/* the schematic: six simplified slabs as a still isometric drawing (independent transforms, no preserve-3d chain) */
.schem{--sw:min(420px,64vw);--step:min(64px,9.5vw);position:relative;height:calc(var(--sw) * .58 + 5 * var(--step) + 20px);font:600 12px/1.3 var(--inter);color:#0f172a}
.sl{position:absolute;left:0;right:0;top:calc((var(--i) - 1) * var(--step));height:calc(var(--sw) * .58);z-index:calc(10 - var(--i))}
.sl-1{--i:1}.sl-2{--i:2}.sl-3{--i:3}.sl-4{--i:4}.sl-5{--i:5}.sl-6{--i:6}
.sl>span{position:absolute;left:50%;top:50%;display:grid;width:var(--sw);height:calc(var(--sw) * .6);margin:calc(var(--sw) * -.3) 0 0 calc(var(--sw) * -.5);padding:10px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.14),0 26px 30px -18px rgba(2,6,23,.75);transform:rotateX(54deg) rotateZ(-30deg)}
.sl i{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-bar{grid-auto-flow:column;align-items:start;gap:8px;background:var(--navy)!important}
.sl-bar i{padding:6px 10px;border-radius:99px;background:#33478a;color:#fff}
.sl-menu{grid-template-columns:1fr 1fr;align-content:start;gap:4px 8px}
.sl-menu i{padding:4px 8px;border-radius:6px;background:#eef2ff}
.sl-tbl{align-content:start;gap:6px}
.sl-tbl i{padding:7px 10px;border-radius:6px;background:#f1f5f9}
.sl-acts{align-content:start;gap:8px}
.sl-acts i{padding:8px 12px;border-radius:8px;border:1px solid #e2e8f0}
.sl-acts .c{box-shadow:inset 3px 0 0 #b91c1c;color:#b91c1c}.sl-acts .m{box-shadow:inset 3px 0 0 #64748b;color:var(--warn)}.sl-acts .l{box-shadow:inset 3px 0 0 #94a3b8;color:#475569}
.sl-tabs{grid-template-columns:repeat(4,1fr);align-content:start;gap:6px;background:#dfe4ea!important}
.sl-tabs i{padding:10px 6px;border-radius:6px 6px 0 0;background:#eef1f5;text-align:center;font-variant-numeric:tabular-nums}
.sl-base{grid-template-columns:1.6fr 1fr;gap:10px;background:#f8fafc!important}
.sl-base i{border-radius:8px;background:#fff;box-shadow:0 0 0 1px #e2e8f0}
.sn-n{position:absolute;left:calc(50% - var(--sw) * .583 - 44px);top:50%;z-index:2;display:grid;place-items:center;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:#2563eb;color:#fff;font:700 14px/1 var(--inter);box-shadow:0 0 0 3px var(--night)}
.pstk{display:none}   /* the phone stack of the real layers (section 10); ≥768 keeps the schematic above and the pinned device */
/* ================================================================ 8 · motion: pinned acts exist only under html.motion and ≥768px
   One source of truth: the same @keyframes run natively on the act's view timeline (contain range: p = 0 when the stage pins,
   1 when it unpins) or, in the fallback (html.fb), paused and scrubbed by landing.js with currentTime = p × 1000.
   Keyframe % = p. Only transform and opacity on large elements; small SVG strokes may repaint. Nothing ever scales above 1. */
@media (min-width:768px){
  .motion .k,.motion .k-in{animation-duration:1000ms;animation-timing-function:linear;animation-fill-mode:both;animation-play-state:paused}
  .motion:not(.fb) .act-r .k{animation-play-state:running;animation-duration:auto;animation-timeline:--r;animation-range:contain 0% contain 100%}
  .motion:not(.fb) .act-r .k-in{animation-play-state:running;animation-duration:auto;animation-timeline:--r;animation-range:entry 0% entry 100%}
  .motion:not(.fb) .act-d .k{animation-play-state:running;animation-duration:auto;animation-timeline:--d;animation-range:contain 0% contain 100%}
  .motion:not(.fb) .act-d .k-in{animation-play-state:running;animation-duration:auto;animation-timeline:--d;animation-range:entry 0% entry 100%}
  .motion:not(.fb) .hero .k{animation-play-state:running;animation-duration:auto;animation-timeline:--h;animation-range:exit 0% exit 100%}
  .motion .hero{view-timeline-name:--h;view-timeline-axis:block;view-timeline-inset:var(--top) 0px}
  .motion .hero-copy{animation-name:h-par}
  @keyframes h-par{from{transform:translateY(0)}to{transform:translateY(-6svh)}}

  /* ---------------------------------------------------------------- Act R skeleton */
  .motion .act-r{--len:640svh;--dv-w:min(1180px,90vw,135svh);
    --s2:.66;--y2:12svh;--s2b:.82;--y2b:3svh;--s3:.44;--x3:16vw;--y3:10svh;--s4:.5;--y4:20svh;--lz:6px;
    --iso-x:50deg;--iso-z:-30deg;--iso-z2:-24deg;--zs:1;
    --wx:.49;--wy:.45;--zc:calc(13svh - 11px);--tc-s:.66;
    --big-off:calc(clamp(64px,8.4vw,124px) * 2);--eq-w:min(22vw,300px);
    --dive-x:calc((.5 - var(--wx)) * var(--dv-w));--dive-y:calc((.5 - var(--wy)) * var(--dv-w) * .625 + var(--zc));
    height:var(--len);view-timeline-name:--r;view-timeline-axis:block;view-timeline-inset:var(--top) 0px}
  .motion .stage{position:sticky;top:var(--top);height:calc(100svh - var(--top));overflow:clip}
  .motion .nr{display:block;top:calc(var(--a) * (var(--len) - 100svh + var(--top)));height:calc((var(--b) - var(--a)) * (var(--len) - 100svh + var(--top)))}
  .motion .act-r .grp{display:contents}
  .motion .act-r :is(.sky,.peek,.big,.dv-off,.dv-glint,.dv-floor,.co-line,.co-t,.xl){display:block}
  .motion .act-r :is(.co-list,.schem,.schem-legend,.tc-trail,.eq-equal,.eq-f figcaption){display:none}
  .motion .sky{position:absolute;inset:0;background:var(--night)}
  .motion .sky-key{position:absolute;left:50%;top:60%;width:32px;height:20px;margin:-10px 0 0 -16px;background:radial-gradient(closest-side,rgba(37,99,235,.5),rgba(37,99,235,0));transform:scale(38,26)}
  .motion .sky-day{position:absolute;inset:0;background:var(--day);animation-name:r-day}
  @keyframes r-day{0%,7%{opacity:0}12%,23%{opacity:1}27%,100%{opacity:0}}
  .motion .peek{position:absolute;left:20%;right:20%;top:0;height:7svh;border-radius:16px 16px 0 0;background:linear-gradient(#1d3068,#172554 40%,rgba(11,18,48,0));box-shadow:inset 0 1px 0 rgba(147,197,253,.95);transform:perspective(1100px) rotateX(58deg);transform-origin:50% 0;animation-name:r-peek}
  .motion .peek-glow{position:absolute;left:50%;top:0;width:32px;height:20px;margin:-10px 0 0 -16px;background:radial-gradient(closest-side,rgba(96,165,250,.55),rgba(96,165,250,0));transform:scale(24,3)}
  @keyframes r-peek{0%,10%{opacity:1}35%,100%{opacity:0}}   /* gone before the device itself comes up */

  /* ---------------------------------------------------------------- the device: preserve-3d chain .dv-arrive › .dv-frame › .dv-lift › .dv-iso › .ly
     (none of them gets opacity < 1, overflow, filter, clip-path, mask or isolation while tilted; clipping lives on .ly-face) */
  .motion .act-r .dv{position:absolute;inset:0;margin:auto;width:var(--dv-w);height:calc(var(--dv-w) * .625);aspect-ratio:auto;perspective:2000px;perspective-origin:50% 42%;animation-name:r-dv}
  @keyframes r-dv{0%,61%{opacity:1}64%,100%{opacity:0}}
  .motion .act-r .dv.dv-gone{visibility:hidden}
  .motion .dv-r :is(.dv-arrive,.dv-frame,.dv-lift,.dv-iso,.ly){transform-style:preserve-3d}
  .motion .act-r.is-on :is(.dv-arrive,.dv-lift,.dv-iso,.ly){will-change:transform}
  .motion .dv-arrive{animation-name:r-arrive}
  @keyframes r-arrive{0%{transform:translateY(12svh) rotateX(18deg);animation-timing-function:cubic-bezier(.65,0,.35,1)}100%{transform:translateY(0) rotateX(0deg)}}
  .motion .dv-frame{animation-name:r-frame}
  @keyframes r-frame{
    0%{transform:translate(0,2svh) scale(calc(var(--s2) - .05));animation-timing-function:cubic-bezier(.65,0,.35,1)}
    6%,10%{transform:translate(0,0) scale(var(--s2));animation-timing-function:cubic-bezier(.65,0,.35,1)}
    13.5%,16.5%{transform:translate(0,var(--y2)) scale(var(--s2));animation-timing-function:cubic-bezier(.65,0,.35,1)}
    19%,24%{transform:translate(0,var(--y2b)) scale(var(--s2b));animation-timing-function:cubic-bezier(.65,0,.35,1)}
    29%,45%{transform:translate(var(--x3),var(--y3)) scale(var(--s3));animation-timing-function:cubic-bezier(.65,0,.35,1)}
    50%{transform:translate(0,var(--y2)) scale(var(--s2));animation-timing-function:cubic-bezier(.65,0,.35,1)}
    53%,58%{transform:translate(0,var(--y4)) scale(var(--s4));animation-timing-function:cubic-bezier(.65,0,.35,1)}
    63%,100%{transform:translate(var(--dive-x),var(--dive-y)) scale(1)}}
  .motion .dv-lift{transform-origin:50% 100%;animation-name:r-lift}
  @keyframes r-lift{0%{transform:rotateX(16deg);animation-timing-function:cubic-bezier(.65,0,.35,1)}6%,100%{transform:rotateX(0deg)}}
  .motion .dv-iso{animation-name:r-iso}
  @keyframes r-iso{
    0%,24%{transform:rotateX(0deg) rotateZ(0deg);animation-timing-function:cubic-bezier(.65,0,.35,1)}
    31%,39%{transform:rotateX(var(--iso-x)) rotateZ(var(--iso-z))}
    45%{transform:rotateX(var(--iso-x)) rotateZ(var(--iso-z2));animation-timing-function:cubic-bezier(.65,0,.35,1)}
    50%,100%{transform:rotateX(0deg) rotateZ(0deg)}}
  .motion .dv-floor{position:absolute;left:3%;right:3%;bottom:-6%;height:12%;background:radial-gradient(closest-side,rgba(2,6,23,.65),rgba(2,6,23,0));animation-name:r-floor}
  @keyframes r-floor{0%{transform:scaleX(1.1);opacity:.35}9%,23%{transform:scaleX(.92);opacity:.4}26%,100%{transform:scaleX(.92);opacity:0}}
  /* screen off = glossy black glass with a lit top edge; it comes back under the title card at the dive, so the device never shows through */
  .motion .dv-off{position:absolute;inset:0;border-radius:18px;background:linear-gradient(118deg,rgba(191,219,254,.08) 0%,rgba(191,219,254,.035) 33.8%,rgba(191,219,254,0) 34%),linear-gradient(165deg,#1b2a57 0%,#0a1130 34%,#050a1c 100%);box-shadow:inset 0 1px 0 rgba(191,219,254,.6),inset 0 0 0 1px rgba(147,197,253,.14);transform:translateZ(1px);animation-name:r-off}
  @keyframes r-off{0%,2.5%{opacity:1}7%,57%{opacity:0}60.5%,100%{opacity:.88}}
  .motion .dv-glint{position:absolute;inset:0;border-radius:18px;overflow:hidden;transform:translateZ(2px);pointer-events:none}
  .motion .dv-glint-b{position:absolute;inset:-10% 0;background:linear-gradient(105deg,transparent 45%,rgba(255,255,255,.8) 50%,transparent 55%);animation-name:r-glint}
  @keyframes r-glint{0%,3%{transform:translateX(-130%);opacity:0}3.5%{opacity:.55}9%,100%{transform:translateX(130%);opacity:0}}
  /* exploded layers (base ly0 never moves); every keyframe repeats the full function list */
  .motion .dv-r .ly1{animation-name:r-ly1}
  @keyframes r-ly1{0%,30%{transform:translateZ(0px);animation-timing-function:cubic-bezier(.16,1,.3,1)}34.5%,46%{transform:translateZ(calc(64px * var(--zs)));animation-timing-function:cubic-bezier(.65,0,.35,1)}50%,100%{transform:translateZ(0px)}}
  .motion .dv-r .ly2{animation-name:r-ly2}
  @keyframes r-ly2{0%,31%{transform:translateZ(0px);animation-timing-function:cubic-bezier(.16,1,.3,1)}35.5%,45.5%{transform:translateZ(calc(128px * var(--zs)));animation-timing-function:cubic-bezier(.65,0,.35,1)}49.5%,100%{transform:translateZ(0px)}}
  .motion .dv-r .ly3{animation-name:r-ly3}
  @keyframes r-ly3{0%,32%{transform:translate(0,0) translateZ(-1px);animation-timing-function:cubic-bezier(.16,1,.3,1)}37%,45%{transform:translate(18%,12%) translateZ(calc(192px * var(--zs)));animation-timing-function:cubic-bezier(.65,0,.35,1)}49%,100%{transform:translate(0,0) translateZ(-1px)}}
  .motion .dv-r .ly4{animation-name:r-ly4}
  @keyframes r-ly4{0%,31%{transform:translateX(-102%) translateZ(0px);animation-timing-function:cubic-bezier(.16,1,.3,1)}37%,45.5%{transform:translateX(-50%) translateZ(calc(256px * var(--zs)));animation-timing-function:cubic-bezier(.65,0,.35,1)}49.5%,100%{transform:translateX(-102%) translateZ(0px)}}
  /* the open menu stops half out of the device (was -14 %), so the Actions layer under it and its dot 4 stay in view */
  .motion .dv-r .ly4 .ly-face{animation-name:r-ly4f}
  @keyframes r-ly4f{0%,31%{opacity:0}35%,46%{opacity:1}47%,100%{opacity:0}}
  .motion .dv-r .ly5{animation-name:r-ly5}
  @keyframes r-ly5{0%,30%{transform:translateZ(0px);animation-timing-function:cubic-bezier(.16,1,.3,1)}37%,44.5%{transform:translateZ(calc(230px * var(--zs)));animation-timing-function:cubic-bezier(.65,0,.35,1)}48.5%,100%{transform:translateZ(0px)}}
  /* depth: the lifted faces get an edge and a soft shadow so the stack reads as hardware (static raster on leaves; only transforms animate) */
  .motion .dv-r .ly:not(.ly0)>.ly-face{box-shadow:0 0 0 1px rgba(148,163,184,.35),inset 0 1px 0 rgba(255,255,255,.95),0 46px 60px -34px rgba(2,6,23,.8)}
  .motion .dv-r .ly0>.ly-face{background:#e7ecf4}
  /* numbered dots on the layers (billboards: their transform mirrors .dv-iso, so they face the camera; --lz = .7 × the dot lifts each dot just clear of its own face, so the camera-facing disc is never cut by it, and stays under the next layer).
     The legend 1–6 sits under the S3 copy. Anchors are % of each layer box, chosen once by eye at build time (no measuring at runtime). */
  .motion .dv-r .xl{position:absolute;left:var(--dx);top:var(--dy);--dot:calc(24px / var(--s3));--lz:calc(var(--dot) * .7);width:var(--dot);height:var(--dot);margin:calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);display:grid;place-items:center;padding:0;border-radius:50%;background:#2563eb;border:0;box-shadow:0 0 0 calc(var(--dot) * .09) #fff,0 6px 14px -4px rgba(2,6,23,.6);font-size:0;transform-origin:50% 50%;pointer-events:none}
  .motion .dv-r .xl::before{content:attr(data-n);font:700 calc(var(--dot) * .54)/1 var(--inter);color:#fff}
  .motion .ly5>.xl{--dx:97%;--dy:50%}
  .motion .ly4>.xl{--dx:8%;--dy:16%}
  .motion .ly3>.xl{--dx:97%;--dy:14%}
  .motion .ly2>.xl{--dx:94%;--dy:42%}
  .motion .ly1>.xl{--dx:99%;--dy:55%}
  .motion .ly0>.xl{--dx:97%;--dy:96%}
  .motion .ly5 .xl{animation-name:r-xl0}.motion .ly4 .xl{animation-name:r-xl1}.motion .ly3 .xl{animation-name:r-xl2}
  .motion .ly2 .xl{animation-name:r-xl3}.motion .ly1 .xl{animation-name:r-xl4}.motion .ly0 .xl{animation-name:r-xl5}
  @keyframes r-xl0{0%,37%{opacity:0;transform:rotateZ(calc(-1 * var(--iso-z))) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}38.5%,39%{opacity:1;transform:rotateZ(calc(-1 * var(--iso-z))) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}44%{opacity:1}45%,100%{opacity:0;transform:rotateZ(calc(-1 * var(--iso-z2))) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}}
  @keyframes r-xl1{0%,37.4%{opacity:0;transform:rotateZ(calc(-1 * var(--iso-z))) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}38.9%,39%{opacity:1;transform:rotateZ(calc(-1 * var(--iso-z))) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}44%{opacity:1}45%,100%{opacity:0;transform:rotateZ(calc(-1 * var(--iso-z2))) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}}
  @keyframes r-xl2{0%,37.8%{opacity:0;transform:rotateZ(calc(-1 * var(--iso-z))) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}39%,39.3%{opacity:1;transform:rotateZ(calc(-1 * var(--iso-z))) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}44%{opacity:1}45%,100%{opacity:0;transform:rotateZ(calc(-1 * var(--iso-z2))) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}}
  @keyframes r-xl3{0%,38.2%{opacity:0;transform:rotateZ(calc(-1 * var(--iso-z))) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}39.7%{opacity:1;transform:rotateZ(calc(-1 * var(--iso-z) - .4deg)) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}44%{opacity:1}45%,100%{opacity:0;transform:rotateZ(calc(-1 * var(--iso-z2))) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}}
  @keyframes r-xl4{0%,38.6%{opacity:0;transform:rotateZ(calc(-1 * var(--iso-z))) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}40.1%{opacity:1;transform:rotateZ(calc(-1 * var(--iso-z) - .8deg)) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}44%{opacity:1}45%,100%{opacity:0;transform:rotateZ(calc(-1 * var(--iso-z2))) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}}
  @keyframes r-xl5{0%,39%{opacity:0;transform:rotateZ(calc(-1 * var(--iso-z))) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}40.5%{opacity:1;transform:rotateZ(calc(-1 * var(--iso-z) - 1.2deg)) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}44%{opacity:1}45%,100%{opacity:0;transform:rotateZ(calc(-1 * var(--iso-z2))) rotateX(calc(-1 * var(--iso-x))) translateZ(var(--lz))}}

  /* ---------------------------------------------------------------- S2 callouts (≥1200): annotations, not cards (premium 4.4).
     An 8 px brand dot on the target, a 1 px hairline, a one-line Inter label above the device (1–3) or on its left (4).
     Sizes are divided by --s2b so they read 15 px / 8 px / 1 px at the frame's scale. Targets: % of the device, measured once at build time. */
  .motion .co{width:0;height:0;animation-name:var(--co-a)}
  .motion .co-1{--co-a:r-co1}.motion .co-2{--co-a:r-co2}.motion .co-3{--co-a:r-co3}.motion .co-4{--co-a:r-co4}
  @keyframes r-co1{0%,19%{opacity:0;transform:translateY(8px)}20.5%,23%{opacity:1;transform:translateY(0)}24%,100%{opacity:0;transform:translateY(0)}}
  @keyframes r-co2{0%,19.6%{opacity:0;transform:translateY(8px)}21.1%,23%{opacity:1;transform:translateY(0)}24%,100%{opacity:0;transform:translateY(0)}}
  @keyframes r-co3{0%,20.2%{opacity:0;transform:translateY(8px)}21.7%,23%{opacity:1;transform:translateY(0)}24%,100%{opacity:0;transform:translateY(0)}}
  @keyframes r-co4{0%,20.8%{opacity:0;transform:translateX(-8px)}22.3%,23%{opacity:1;transform:translateX(0)}24%,100%{opacity:0;transform:translateX(0)}}
  .motion .co-1{left:1.6%;top:4%;--lh:calc(2.5cqi + 3.4cqi)}
  .motion .co-2{left:29.95%;top:4.4%;--lh:calc(2.75cqi + 3.4cqi)}
  .motion .co-3{left:88.6%;top:-1.1%;--lh:calc(3.4cqi - .69cqi)}
  .motion .co-4{left:0;top:15.5%;--lw:2.6cqi}
  .motion .act-r .co-line{display:none}
  .motion .co-n{display:none}
  .motion .co::after{content:'';position:absolute;left:calc(-4px / var(--s2b));top:calc(-4px / var(--s2b));width:calc(8px / var(--s2b));height:calc(8px / var(--s2b));border-radius:50%;background:#2563eb;box-shadow:0 0 0 calc(3px / var(--s2b)) rgba(37,99,235,.22)}
  .motion .co::before{content:'';position:absolute;left:calc(-.5px / var(--s2b));bottom:0;width:calc(1px / var(--s2b));height:var(--lh);background:rgba(37,99,235,.6)}
  .motion .co-t{position:absolute;left:0;bottom:var(--lh);width:max-content;transform:translate(-50%,calc(-6px / var(--s2b)));font:600 calc(15px / var(--s2b))/1.25 var(--inter);color:var(--ink);white-space:nowrap}
  .motion .co-1 .co-t{transform:translate(-78%,calc(-6px / var(--s2b)))}
  .motion .co-4::before{left:auto;right:0;bottom:calc(-.5px / var(--s2b));width:var(--lw);height:calc(1px / var(--s2b))}
  .motion .co-4 .co-t{left:auto;right:calc(var(--lw) + 8px / var(--s2b));bottom:auto;top:0;transform:translateY(-50%);max-width:calc(((100vw - var(--dv-w) * var(--s2b)) / 2 - 40px) / var(--s2b));white-space:normal;text-align:right}

  /* ---------------------------------------------------------------- beats */
  .motion .act-r .beat{position:absolute;left:0;right:0;margin:0 auto;padding:0 var(--gut)}
  .motion .beat-store{top:2.6%;max-width:1000px;color:var(--ink);animation-name:r-store}
  .motion .beat-store .line{color:var(--ink2);max-width:58ch}
  @keyframes r-store{0%,11%{opacity:0;transform:translate(0,24px)}13.5%,16.5%{opacity:1;transform:translate(0,0)}18%,100%{opacity:0;transform:translate(0,-24px)}}
  .motion .beat-layers{left:6vw!important;right:auto!important;top:6svh;max-width:30rem;padding:0!important;align-items:flex-start;text-align:left;animation-name:r-layers}
  .motion .beat-layers h2{font-size:clamp(30px,3.5vw,50px)}
  .motion .beat-layers .line{margin:0;max-width:34ch}
  /* the legend 1–6 for the dots on the layers, under the copy (premium 3.2 / 4.5) */
  .motion .act-r .beat-layers .schem-legend{display:grid;gap:7px;max-width:36vw;margin-top:10px;color:var(--on-night2)}   /* 36vw = the line's width at 1024, so the open menu never covers a row */
  .motion .beat-layers .schem-legend li{font-size:15px;line-height:1.3;align-items:center}
  .motion .beat-layers .schem-legend li::before{width:22px;height:22px;font-size:12px;transform:none;box-shadow:0 0 0 2px var(--night)}
  .motion .schem-legend li:nth-child(1){animation-name:r-lg1}.motion .schem-legend li:nth-child(2){animation-name:r-lg2}.motion .schem-legend li:nth-child(3){animation-name:r-lg3}
  .motion .schem-legend li:nth-child(4){animation-name:r-lg4}.motion .schem-legend li:nth-child(5){animation-name:r-lg5}.motion .schem-legend li:nth-child(6){animation-name:r-lg6}
  @keyframes r-lg1{0%,37%{opacity:0;transform:translateX(-8px)}38.5%,100%{opacity:1;transform:translateX(0)}}
  @keyframes r-lg2{0%,37.4%{opacity:0;transform:translateX(-8px)}38.9%,100%{opacity:1;transform:translateX(0)}}
  @keyframes r-lg3{0%,37.8%{opacity:0;transform:translateX(-8px)}39.3%,100%{opacity:1;transform:translateX(0)}}
  @keyframes r-lg4{0%,38.2%{opacity:0;transform:translateX(-8px)}39.7%,100%{opacity:1;transform:translateX(0)}}
  @keyframes r-lg5{0%,38.6%{opacity:0;transform:translateX(-8px)}40.1%,100%{opacity:1;transform:translateX(0)}}
  @keyframes r-lg6{0%,39%{opacity:0;transform:translateX(-8px)}40.5%,100%{opacity:1;transform:translateX(0)}}
  @keyframes r-layers{0%,27%{opacity:0;transform:translateY(20px)}30%,44%{opacity:1;transform:translateY(0)}46%,100%{opacity:0;transform:translateY(0)}}
  .motion .beat-counts{top:2.4%;gap:12px;animation-name:r-counts}
  .motion .beat-counts h2{font-size:clamp(30px,4vw,58px);white-space:nowrap}
  @keyframes r-counts{0%,50%{opacity:0;transform:translateY(20px)}53%,100%{opacity:1;transform:translateY(0)}}
  .motion .h2a{color:var(--on-night);animation-name:r-h2a}.motion .h2b{animation-name:r-h2b}
  @keyframes r-h2a{0%,54%{opacity:1}58%,100%{opacity:.5}}
  @keyframes r-h2b{0%,54%{opacity:.5}58%,100%{opacity:1}}
  .motion .counts-line{position:absolute;left:0;right:0;top:16.5%;max-width:62ch;margin:0 auto;padding:0 var(--gut);font-size:clamp(16px,1.25vw,19px);animation-name:r-cline}
  @keyframes r-cline{0%,62%{opacity:0;transform:translateY(8px)}64%,100%{opacity:1;transform:translateY(0)}}
  .motion .beat-ai{position:absolute;left:0;right:0;bottom:3.2%;margin:0 auto;padding:0 var(--gut);max-width:64ch;font-size:clamp(16px,1.3vw,19px);animation-name:r-ai}
  @keyframes r-ai{0%,94%{opacity:0;transform:translateY(8px)}96%,100%{opacity:1;transform:translateY(0)}}

  /* ---------------------------------------------------------------- ≈ straightens into =, the counter, the title card */
  .motion .act-r .eq{position:absolute;left:50%;top:31%;display:block;width:var(--eq-w);margin:calc(var(--eq-w) * -.1833) 0 0 calc(var(--eq-w) / -2);animation-name:r-eq}
  .motion .eq-f svg{width:100%}
  .motion .eq-f svg .eq-w{stroke-width:12}
  .motion .eq-approx .eq-blue{display:none}
  /* "=" leaves the device header before the dive; the counter follows (premium 3.3) */
  @keyframes r-eq{0%,51%{opacity:0;transform:translate(0,0) scale(1)}53%,58.5%{opacity:1;transform:translate(0,0) scale(1);animation-timing-function:cubic-bezier(.65,0,.35,1)}61.5%,100%{opacity:1;transform:translate(calc(-1 * var(--big-off) - var(--eq-w) * .275 - 18px),0) scale(.45)}}
  .motion .eq-g{transform-box:fill-box;transform-origin:center;animation-name:r-wave}
  @keyframes r-wave{0%,54%{transform:scaleY(1);animation-timing-function:cubic-bezier(.65,0,.35,1)}58%,100%{transform:scaleY(.001)}}
  .motion .eq-grey{animation-name:r-wcol}
  @keyframes r-wcol{0%,56%{stroke:#94a3b8}58%,100%{stroke:#93c5fd}}
  .motion .big{position:absolute;left:calc(50% - var(--big-off));top:31%;height:0;animation-name:r-big}
  @keyframes r-big{0%,61%{opacity:0}62%,100%{opacity:1}}
  .motion .big-l{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:.12em;transform:translateY(-50%);white-space:nowrap;font:700 clamp(64px,8.4vw,124px)/1 var(--inter);font-variant-numeric:tabular-nums;letter-spacing:-.04em;transition:opacity .24s}
  .motion .big-n{display:inline-block;min-width:3ch;text-align:right}
  .motion .big-of{font-size:.4em;letter-spacing:-.02em;color:var(--on-night2)}
  .motion .big-w{margin-left:.5em;font-size:.2em;font-weight:600;letter-spacing:0;padding:.25em .7em;border-radius:99px}
  .motion .big-bad{color:var(--on-night)}.motion .big-bad .big-w{display:inline-block;color:var(--bad-night);background:rgba(252,165,165,.12);border:1px solid rgba(252,165,165,.3)}
  .motion .big-ok{color:var(--ok-night);opacity:0}.motion .big-ok .big-w{background:rgba(110,231,183,.12);border:1px solid rgba(110,231,183,.3)}
  .motion .big.is-ok .big-bad{opacity:0}.motion .big.is-ok .big-ok{opacity:1}
  .motion .act-r .tc{position:absolute;left:50%;top:63%;width:min(760px,64vw);margin:0;animation-name:r-tc}
  /* the card arrives fast over the darkened screen (≈ 70 px of scroll), then grows; the device's own title widget is gone by then */
  @keyframes r-tc{0%,60%{opacity:0;transform:translate(-50%,-50%) scale(var(--tc-s))}61.5%{opacity:1;transform:translate(-50%,-50%) scale(calc(var(--tc-s) + (1 - var(--tc-s)) * .45))}64.5%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  .motion .dv-r .lp-wg-title{animation-name:r-wgt}
  @keyframes r-wgt{0%,59%{opacity:1}59.5%,100%{opacity:0}}
  .motion .act-r .tc-title{font-size:clamp(15px,1.3vw,19px)}
  .motion .tc-new{animation-name:r-tcn}.motion .tc-checks li:nth-child(1){animation-name:r-tc1}.motion .tc-checks li:nth-child(2){animation-name:r-tc2}
  .motion .tc-checks li:nth-child(3){animation-name:r-tc3}.motion .tc .tags{animation-name:r-tc4}
  @keyframes r-tcn{0%,87%{opacity:0;transform:translateY(6px)}88%,100%{opacity:1;transform:translateY(0)}}
  /* the three checks are there from the start of the cut; row 1 speaks at every cut (premium 3.4) */
  @keyframes r-tc1{0%,64%{opacity:0;transform:translateY(6px)}65.5%,100%{opacity:1;transform:translateY(0)}}
  @keyframes r-tc2{0%,64.5%{opacity:0;transform:translateY(6px)}66%,100%{opacity:1;transform:translateY(0)}}
  @keyframes r-tc3{0%,65%{opacity:0;transform:translateY(6px)}66.5%,100%{opacity:1;transform:translateY(0)}}
  @keyframes r-tc4{0%,91%{opacity:0;transform:translateY(6px)}92%,100%{opacity:1;transform:translateY(0)}}
}
/* short desktop viewports (≤ 860px tall, e.g. 1366×768): the counter, the card and the dive target move apart */
@media (min-width:768px) and (max-height:860px){
  .motion .act-r{--zc:calc(16svh - 13px);--big-off:calc(min(8.4vw,12.5svh) * 2)}
  .motion .big-l{font-size:min(8.4vw,12.5svh)}
  .motion .big,.motion .act-r .eq{top:33.5%}
  .motion .act-r .tc{top:66%;padding:16px 20px 14px}
  .motion .act-r .tc-h{padding-bottom:10px;margin-bottom:10px}
  .motion .act-r .tc-title{font-size:15px}
  .motion .act-r .tc-new{margin-top:10px;padding:6px 10px;font-size:14px}
  .motion .act-r .tc-checks{gap:3px;margin-top:8px;font-size:13px}
  .motion .act-r .tc .tags{margin-top:10px}
  .motion .act-r .tc .tag{min-height:22px;font-size:11px}
  .motion .counts-line{top:18%;font-size:16px}
  .motion .beat-ai{font-size:16px;bottom:2.4%}
}
/* the cut itself (both pinned and phone motion): words are struck by stepState classes, the chip swaps at the pass */
.motion .tc:not(.is-pass) .tc-chip-g,.motion .tc.is-pass .tc-chip-b{display:none}
.motion .tc .bar-fill{transform:scaleX(1);background:linear-gradient(90deg,#64748b 0 var(--lim,62.5%),var(--bad) var(--lim,62.5%))}
.motion .tc .bar-fill.is-ok{background:var(--ok)}
.tc.pulse .bar-mark{animation:mark-pulse .6s ease-out 1}
@keyframes mark-pulse{0%{opacity:.6;transform:scaleY(1)}40%{opacity:1;transform:scaleY(1.9)}100%{opacity:1;transform:scaleY(1)}}
/* the 76 hold: the "1 over" pill pulses once (premium 4.6) */
.motion .big-w.pulse{animation:w-pulse .6s var(--e-out) 1}
@keyframes w-pulse{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
/* the card's length row follows the cut (motion); the baked engine sentence stays for static, no-JS and the test */
.tc-live,.tc-checks .ic-bad{display:none}
.motion .tc-live{display:inline}
.motion .tc-checks li:first-child [data-v]{display:none}
.motion .tc-checks li.is-bad .ic-bad{display:block;color:var(--bad)}
.motion .tc-checks li.is-bad .ic-ok{display:none}
/* below 1200px the side chips would wrap into towers: numbered dots on the device + a caption row under it (same keyframes) */
@media (min-width:768px) and (max-width:1199px){
  .motion .act-r{--y2:8svh;--s2:.62;--s2b:.72;--y2b:2svh}
  .motion .act-r .co .co-t,.motion .act-r .co .co-line{display:none}
  /* the numbered dot sits at the end of the hairline, above the device (1–3) or left of it (4), never on its target */
  .motion .act-r .co .co-n{display:grid;width:3.2cqi;height:3.2cqi;margin:-1.6cqi 0 0 -1.6cqi;top:calc(-1 * var(--lh));font-size:1.7cqi;box-shadow:0 0 0 .35cqi #fff,0 6px 14px -4px rgba(15,23,42,.5)}
  .motion .act-r .co-4 .co-n{top:0;left:calc(-1 * var(--lw) - 1.6cqi)}
  .motion .act-r .g-store .co-list{position:absolute;left:0;right:0;bottom:2.2%;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));justify-content:center;gap:6px 28px;max-width:none;margin:0;padding:0 var(--gut);color:var(--ink);font-size:14px;animation-name:r-co1}
  .motion .act-r .co-list li{font-size:14px}
  .motion .act-r .co-list li::before{background:#2563eb;width:22px;height:22px;font-size:12px}
}

/* ---------------------------------------------------------------- Act D · Next day (pinned ≥768). State changes come from a click or
   from p crossing 45 % (scroll changes only the picture; the live region speaks only after a click). */
@media (min-width:768px){
  .motion .act-d{--len:180svh;height:var(--len);view-timeline-name:--d;view-timeline-axis:block;view-timeline-inset:var(--top) 0px}
  .motion .stage-d{grid-template-columns:minmax(0,40fr) minmax(0,60fr);align-content:center;gap:24px 56px;padding-top:24px;padding-bottom:24px}
  .motion .nd-copy{animation-name:d-copy}
  @keyframes d-copy{0%,10%{opacity:0;transform:translateY(4vh);animation-timing-function:cubic-bezier(.16,1,.3,1)}70%,100%{opacity:1;transform:translateY(0)}}
  .motion .nd-r{animation-name:d-rc}
  @keyframes d-rc{0%,20%{opacity:0;transform:translateY(3vh);animation-timing-function:cubic-bezier(.16,1,.3,1)}80%,100%{opacity:1;transform:translateY(0)}}
  .motion .act-d h2{font-size:clamp(32px,3.8vw,56px)}
  .motion .nd-num{font-size:clamp(64px,8.2vw,124px)}   /* the fee is the hero of this scene (premium 4.8) */
  .motion .nd-l{gap:22px}
  .motion .nd-r{gap:14px}
}
/* the stateful receipt (motion, any width): one value column; rows below the insertion point slide by one row */
.motion .rc-cols{display:none}
.motion .rc-row{grid-template-columns:minmax(0,1fr) auto;height:44px;min-height:0;padding-top:0;padding-bottom:0}
.motion .rc-v,.motion .rc-same{grid-column:2;grid-row:1;transition:opacity .3s var(--e-out),transform .45s var(--e-out)}
.motion .rc-v small{display:inline;margin-right:.6em}

.motion .rc-mv{transform:translateY(-44px);transition:transform .36s var(--e-out)}
.motion .rc-peak{opacity:0;transition:opacity .3s var(--e-out) .15s}
.motion .act-d[data-state=next] .rc-mv{transform:translateY(0)}
.motion .act-d[data-state=next] .rc-peak{opacity:1}
.motion .act-d[data-state=today] .rc .s2,.motion .act-d[data-state=today] .nd-pill-v .s2{opacity:0;transform:translateY(.7em)}
.motion .act-d[data-state=next] .rc .s1,.motion .act-d[data-state=next] .nd-pill-v .s1{opacity:0;transform:translateY(-.7em)}
.motion .nd-pill-v{display:inline-grid;justify-items:start}
.motion .nd-pill-v>span{grid-area:1/1;transition:opacity .3s var(--e-out),transform .45s var(--e-out)}
.motion .nd-v{display:none}
.motion .nd-delta{opacity:0;transform:translateY(6px);transition:opacity .3s var(--e-out) .45s,transform .3s var(--e-out) .45s}
.motion .act-d[data-state=next] .nd-delta{opacity:1;transform:none}
.motion .nd-yday,.motion .nd-cap{opacity:0;transform:translateY(8px);transition:opacity .35s var(--e-out),transform .35s var(--e-out)}
.motion .act-d[data-state=next] .nd-yday,.motion .act-d[data-state=next] .nd-cap{opacity:1;transform:none}
.motion .act-d[data-state=next] .nd-yday{transition-delay:.55s}
.motion .act-d[data-state=next] .nd-cap{transition-delay:.7s}
.odo{display:inline-flex;align-items:flex-start;line-height:1}
.odo-c{display:inline-block;height:1em;overflow:hidden}
.odo-s{display:block;white-space:pre;line-height:1;transition:transform .45s cubic-bezier(.16,1,.3,1)}
/* split-flap date: time-based, only after a state change with motion on */
@keyframes flip-out{from{opacity:1;transform:perspective(600px) rotateX(0deg)}to{opacity:1;transform:perspective(600px) rotateX(90deg)}}
@keyframes flip-in{from{opacity:1;transform:perspective(600px) rotateX(-90deg)}to{opacity:1;transform:perspective(600px) rotateX(0deg)}}
.flap>span{transform-origin:50% 55%}
.act-d.is-anim.flip[data-state=next] .flap-a,.act-d.is-anim.flip[data-state=today] .flap-b{animation:flip-out .19s ease-in both}
.act-d.is-anim.flip[data-state=next] .flap-b,.act-d.is-anim.flip[data-state=today] .flap-a{animation:flip-in .19s ease-out .19s both}
.act-d.is-anim.flip .flap-d>span{animation-delay:.06s}
.act-d.is-anim.flip[data-state=next] .flap-d .flap-b,.act-d.is-anim.flip[data-state=today] .flap-d .flap-a{animation-delay:.25s}
.act-d.is-anim.flip .rc-mv{transition-delay:.4s}
.act-d.is-anim.flip .odo-s{transition-delay:.45s}
/* static (no motion): both receipt columns are shown; the button still swaps the date and marks the current column */
html:not(.motion) .act-d[data-state=today] .rc-cols span:first-child,html:not(.motion) .act-d[data-state=next] .rc-cols span:last-child{color:#fff}

/* ---------------------------------------------------------------- S6 levels ≥1024 with motion: chapters in flow, a sticky visual on the right */
@media (min-width:1024px){
  .motion .levels{view-timeline-name:--lv;view-timeline-axis:block;view-timeline-inset:var(--top) 0px}
  .motion .lv-grid{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);column-gap:4vw}
  .motion .lv-chs{display:block}
  .motion .lv-ch{min-height:62svh;justify-content:center;padding:0;background:none;box-shadow:none;border-radius:0}
  .motion .lv-ch h3{font-size:clamp(26px,2.6vw,38px)}
  .motion .lv-ch .vig{display:none}
  .motion .lv-chs{padding-bottom:6svh}
  .motion .lv-ch .lv-cta{margin-top:8px}
  .motion .lv-vis{display:block}
  .motion .lv-stick{position:sticky;top:calc(var(--top) + 5svh);height:78svh}
  .motion .lv-rings{position:absolute;inset:-4% -6%;width:112%;height:108%;overflow:visible}
  .motion .lv-r{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:100;opacity:.2;transition:opacity .4s}
  .motion .lv-r1{stroke:var(--o1)}.motion .lv-r2{stroke:var(--o2)}.motion .lv-r3{stroke:var(--o3)}
  .motion .levels[data-level="1"] .lv-r1,.motion .levels[data-level="2"] .lv-r2,.motion .levels[data-level="3"] .lv-r3{opacity:.6}
  .motion .lv-rail{position:absolute;left:-4.2vw;top:50%;display:grid;gap:22px;transform:translateY(-50%);font:700 13px/1 var(--inter);color:#94a3b8}
  .motion .lv-rail i{font-style:normal;display:grid;place-items:center;width:30px;height:30px}
  .motion .lv-dot{position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--brand);transition:transform .4s var(--e-out)}
  .motion .levels[data-level="2"] .lv-dot{transform:translateY(52px)}
  .motion .levels[data-level="3"] .lv-dot{transform:translateY(104px)}
  .motion .lv-dev{position:absolute;left:4%;right:2%;top:50%;transform:perspective(1600px) rotateY(-10deg) rotateX(4deg) translateY(-50%);transform-origin:50% 0}
  .motion .dv-l{width:100%;margin:0}
  .motion .dv-l .lp-base{box-shadow:0 0 0 1px rgba(15,23,42,.1),0 50px 90px -40px rgba(15,23,42,.45),0 18px 36px -18px rgba(15,23,42,.25)}
  .motion .ov{transform:translateY(12px);transition:opacity .4s var(--e-out),transform .4s var(--e-out)}
  .motion .levels[data-level="1"] .ov-1,.motion .levels[data-level="2"] .ov-2,.motion .levels[data-level="3"] .ov-3{opacity:1;transform:none}
  /* each level's key element leaves the device at a readable size and overhangs its edge (premium 4.9) */
  .motion .dv-l .ov-bubble{font-size:15px;left:-7%;top:9%;max-width:44%}
  .motion .dv-l .ov-1 .ov-chip{font-size:13px;left:-7%;top:auto;bottom:62%}
  .motion .dv-l .ov-sheet{font-size:14px;left:auto;right:-7%;width:56%}
  .motion .dv-l .ov-2 .ov-chip{font-size:13px;left:auto;right:-7%;bottom:8%}
  .motion .dv-l .ov-banner{font-size:14px}
  .motion .dv-l .ov-agent{font-size:15px;right:-7%}
}
/* overlay content on device copy #2 (sizes in device em) */
.ov-scrim{position:absolute;inset:0;background:rgba(15,23,42,.08);border-radius:18px}
.ov-ring{position:absolute;left:.55%;top:2.6%;width:3.1%;height:5.6%;border-radius:.35em;box-shadow:0 0 0 2px var(--o1),0 0 0 6px rgba(59,130,246,.25)}
.ov-bubble{position:absolute;left:1%;top:10.5%;max-width:34%;padding:.7em .9em;background:#fff;border-left:3px solid var(--o1);box-shadow:0 20px 40px -18px rgba(15,23,42,.5);font-weight:600;color:#0b1220}
.ov-chip{position:absolute;left:1%;top:19%;padding:.3em .9em;border-radius:99px;background:#eef2ff;color:#1e3a8a;font-weight:700}
.ov-sheet{position:absolute;left:46%;right:2%;top:24%;padding:.7em .8em;background:#fff;border-radius:.6em;box-shadow:0 0 0 1px rgba(15,23,42,.12),0 24px 48px -20px rgba(15,23,42,.45);font-variant-numeric:tabular-nums;color:#0b1220}
.ov-sh{margin-bottom:.4em;font-weight:700}
.ov-tr{display:grid;grid-template-columns:1fr 1.6fr .6fr .5fr;gap:.6em;padding:.45em .4em;border-top:1px solid #eef1f4}
.ov-tr.is-hi{background:#eef2ff;box-shadow:inset 3px 0 0 var(--o2);font-weight:700}
.ov-2 .ov-chip{left:46%;top:auto;bottom:6%}
.ov-banner{position:absolute;left:0;right:0;top:13%;padding:.7em 1.1em;background:#eef2ff;color:var(--train-ink);font-weight:700;border-bottom:1px solid var(--train-edge);border-left:3px solid var(--o3)}
.ov-agent{position:absolute;right:2.5%;bottom:5%;display:grid;gap:.3em;padding:.9em 1.1em;background:#fff;border-radius:.7em;box-shadow:0 24px 48px -20px rgba(15,23,42,.5);color:#0b1220}
.ov-agent b{color:#3730a3}
.ov-ar{display:flex;gap:.5em;margin-top:.3em}
.ov-ar i{font-style:normal;padding:.2em .9em;border-radius:99px;border:1px solid #cbd5e1;font-weight:600}
.ov-ar i:first-child{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------------------------------------------------------------- entries on view() (any width with motion); fallback: IntersectionObserver adds .in */
@keyframes rv-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes deal{from{transform:translateX(calc(-1 * var(--i) * (100% + 24px))) rotate(calc(-6deg + 3deg * var(--i)))}to{transform:translateX(0) rotate(0deg)}}
@keyframes ring-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes orbit-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes orbit-dot{from{offset-distance:0%}to{offset-distance:78%}}
@keyframes num-up{from{opacity:0;transform:translateY(30%)}to{opacity:1;transform:translateY(0)}}
@keyframes lv-drift{from{transform:perspective(1600px) rotateY(-10deg) rotateX(4deg) translateY(-50%)}to{transform:perspective(1600px) rotateY(-3deg) rotateX(2deg) translateY(-50%)}}
.cards>li:nth-child(1){--i:0}.cards>li:nth-child(2){--i:1}.cards>li:nth-child(3){--i:2}.cards>li:nth-child(4){--i:3}
.fin-oe{stroke-dasharray:1}
@supports (animation-timeline: view()){
  .motion:not(.fb) .rv{animation:rv-up linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
  .motion:not(.fb) .cmp tbody tr{animation:rv-up linear both;animation-timeline:view();animation-range:entry 0% entry 100%}   /* opaque as soon as the row is fully in */
  .motion:not(.fb) .rtile:nth-child(2){animation-range:entry 8% entry 58%}
  .motion:not(.fb) .rtile:nth-child(3){animation-range:entry 16% entry 66%}
  .motion:not(.fb) .fin-n1{animation:num-up linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
  .motion:not(.fb) .fin-n2{animation:num-up linear both;animation-timeline:view();animation-range:entry 10% entry 60%}
  .motion:not(.fb) .fin-n3{animation:num-up linear both;animation-timeline:view();animation-range:entry 20% entry 70%}
  .motion:not(.fb) .fin-oe{animation:orbit-draw linear both;animation-timeline:--fin;animation-range:entry 20% cover 45%}
  .motion:not(.fb) .fin-od{animation:orbit-dot linear both;animation-timeline:--fin;animation-range:entry 20% cover 45%}
  .motion:not(.fb) .fin-orbit{view-timeline-name:--fin}
  .motion:not(.fb) .lv-ring ellipse{animation:ring-draw linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
}
@media (min-width:1024px){
  @supports (animation-timeline: view()){
    .motion:not(.fb) .cards{view-timeline-name:--cards}
    .motion:not(.fb) .cards>li{animation:deal linear both;animation-timeline:--cards;animation-range:entry 50% cover 55%;animation-timing-function:cubic-bezier(.16,1,.3,1)}   /* the deal happens on screen */
    .motion:not(.fb) .cards:focus-within>li{animation:none}
    .motion:not(.fb) .lv-r{animation:ring-draw linear both;animation-timeline:--lv;animation-range:entry 10% cover 30%}
    .motion:not(.fb) .lv-dev{animation:lv-drift linear both;animation-timeline:--lv;animation-range:contain 0% contain 100%}
  }
}
.motion.fb :is(.rv,.cmp tbody tr,.fin-n){opacity:0;transform:translateY(24px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.motion.fb :is(.rv,.cmp tbody tr,.fin-n).in{opacity:1;transform:none}
.motion.fb .rtile:nth-child(2){transition-delay:80ms}.motion.fb .rtile:nth-child(3){transition-delay:160ms}
.motion.fb .lv-ring ellipse,.motion.fb .lv-r{stroke-dashoffset:100;transition:stroke-dashoffset 1s var(--e-out)}
.motion.fb .lv-ring.in ellipse,.motion.fb .lv-r.in{stroke-dashoffset:0}
.motion.fb .fin-orbit .fin-oe{stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--e-out)}
.motion.fb .fin-orbit .fin-od{offset-distance:0%;transition:offset-distance 1.2s var(--e-out)}
.motion.fb .fin-orbit.in .fin-oe{stroke-dashoffset:0}
.motion.fb .fin-orbit.in .fin-od{offset-distance:78%}
.rtile a:hover,.rtile a:focus-visible{transform:translateY(-4px)}
.rtile a{transition:box-shadow .2s,transform .2s var(--e-out)}
html:not(.motion) .rtile a:hover,html:not(.motion) .rtile a:focus-visible{transform:none}
/* plan B (?flat=1 or html.flat for a browser where QA finds a 3D flattening bug): no rotations, layers fan out vertically */
@media (min-width:768px){
  .motion.flat .dv-iso{animation-name:none;transform:none}
  .motion.flat .dv-r .xl{display:none}
  .motion.flat .act-r .g-layers .xl-cap{display:block;position:absolute;left:0;right:0;bottom:5%;text-align:center;animation-name:r-xlcap}
  .motion.flat .xl-cap-t{display:inline-block;padding:.5em 1.1em;border-radius:99px;background:rgba(11,18,48,.78);border:1px solid rgba(255,255,255,.18);color:#fff;font:600 14px/1.2 var(--inter)}
  .motion.flat .dv-r .ly1{animation-name:f-ly1}.motion.flat .dv-r .ly2{animation-name:f-ly2}.motion.flat .dv-r .ly3{animation-name:f-ly3}
  .motion.flat .dv-r .ly4{animation-name:f-ly4}.motion.flat .dv-r .ly5{animation-name:f-ly5}
  @keyframes f-ly1{0%,30%{transform:translateY(0) translateZ(0px) scale(1)}34.5%,46%{transform:translateY(-5.6cqi) translateZ(1px) scale(.96)}50%,100%{transform:translateY(0) translateZ(0px) scale(1)}}
  @keyframes f-ly2{0%,31%{transform:translateY(0) translateZ(0px) scale(1)}35.5%,45.5%{transform:translateY(-11.2cqi) translateZ(2px) scale(.92)}49.5%,100%{transform:translateY(0) translateZ(0px) scale(1)}}
  @keyframes f-ly3{0%,32%{transform:translate(0,0) translateZ(-1px) scale(1)}37%,45%{transform:translate(24%,calc(16% - 16.8cqi)) translateZ(3px) scale(.88)}49%,100%{transform:translate(0,0) translateZ(-1px) scale(1)}}
  @keyframes f-ly4{0%,31%{transform:translateX(-102%) translateY(0) translateZ(0px) scale(1)}37%,45.5%{transform:translateX(-14%) translateY(-22.4cqi) translateZ(4px) scale(.84)}49.5%,100%{transform:translateX(-102%) translateY(0) translateZ(0px) scale(1)}}
  @keyframes f-ly5{0%,30%{transform:translateY(0) translateZ(0px) scale(1)}37%,44.5%{transform:translateY(-28cqi) translateZ(5px) scale(.8)}48.5%,100%{transform:translateY(0) translateZ(0px) scale(1)}}
}
/* ================================================================ 9 · tablet (768–1023): pinned acts stay, lighter 3D, one changing caption */
@media (min-width:768px) and (max-width:1023px){
  .motion .act-r{--len:550svh;--dv-w:92vw;--s2:.7;--y2:7svh;--s2b:.8;--y2b:2svh;--iso-x:48deg;--iso-z:-18deg;--iso-z2:-14deg;--zs:.6;--s3:.62;--x3:5vw;--y3:14svh;--s4:.58;--y4:18svh;--tc-s:.5}
  .motion .act-r .xl,.motion .act-r .beat-layers .schem-legend{display:none}
  .motion .act-r .g-layers .xl-cap{display:block;position:absolute;left:0;right:0;bottom:5%;text-align:center;animation-name:r-xlcap}
  .motion .xl-cap-t{display:inline-block;padding:.5em 1.1em;border-radius:99px;background:rgba(11,18,48,.78);border:1px solid rgba(255,255,255,.18);color:#fff;font:600 14px/1.2 var(--inter)}
  @keyframes r-xlcap{0%,36%{opacity:0}38%,44%{opacity:1}45.5%,100%{opacity:0}}
  .motion .beat-layers{top:4svh;max-width:34rem}
  .motion .act-r .tc{width:min(680px,86vw)}
  .motion .act-d{--len:160svh}
  .motion .stage-d{grid-template-columns:1fr;align-content:start;gap:16px;padding-top:20px}
  .motion .nd-l{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px 24px;align-items:end}
  .motion .act-d .eyebrow{display:none}
  .motion .act-d h2{font-size:34px}
  .motion .act-d .line{font-size:16px}
  .motion .nd-num{font-size:64px}
}
@media (min-width:768px) and (max-width:1023px){
  .lv-chs{grid-template-columns:1fr}
  .lv-ch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:28px;align-items:start}
  .lv-ch>*:not(.vig){grid-column:1}
  .lv-ch .vig{order:0;grid-column:2;grid-row:1/span 6;align-self:center}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:1fr}
  .g-layers{grid-template-columns:1fr;grid-template-areas:'beat' 'schem'}
}

/* ================================================================ 10 · phone (≤767): the static layout + gentle entries + both hands-on controls.
   Nothing pinned, no 3D chain; the device renders at its native phone width (container query). */
@media (max-width:767px){
  :root{--strip:44px;--navh:48px;--top:92px;--gut:16px}
  .strip{gap:8px;padding:4px 16px;font-size:12px;line-height:1.3}
  .strip-tab{font-size:12px;padding:2px 6px;letter-spacing:.06em}
  .strip-t{text-wrap:balance}
  /* a pill stays one line on phones (premium 3.6): sentence case, no tracking */
  .chip{letter-spacing:0;text-transform:none;font-size:13px}
  .strip-x,.by,.nav-cta-l{display:none}
  .nav-cta-s{display:inline}
  .nav-in{gap:6px}
  .wm b{font-size:16px}
  .nav-sec summary{padding:0 6px}
  .rc-cols{margin-left:auto}
  .pill{height:44px;padding:0 14px}
  .nav-sec nav{right:12px}
  .hero{--peek:7svh;min-height:540px;flex-direction:column;gap:18px}
  .hero-copy{gap:18px}
  .hero .micro{padding:0 var(--gut);text-align:center}
  .hero h1{font-size:clamp(34px,9.4vw,44px)}
  .h1-l{display:inline}
  .hero-line{font-size:17px}
  .hero .ctas{flex-direction:column;align-items:stretch;gap:8px;width:100%}
  .hero .ctas a{justify-content:center;min-height:48px}
  .pause{width:44px;height:44px;right:12px;bottom:12px}
  h2{font-size:clamp(30px,8.6vw,40px)}
  .grp{padding:56px var(--gut)}
  .g-store{padding-top:calc(30svh + 8px)}
  .co-list{grid-template-columns:1fr 1fr;gap:10px 14px}
  .co-list li,.schem-legend li{font-size:14px}
  .g-layers{grid-template-columns:1fr;grid-template-areas:'beat' 'schem';row-gap:24px}
  .g-layers .schem{display:none}   /* phones get .pstk (the real layers) instead of the blank slabs */
  .eq{margin:28px auto 24px}
  .eq-f svg{width:min(34vw,150px)}
  .tc{padding:16px;border-radius:14px}
  .tc-title{font-size:15px}
  .tc-new{font-size:14px}
  #tryTitle{font-size:17px;padding:14px 14px 50px}
  .yt-count{right:14px;bottom:12px;font-size:24px}
  .yt-act{justify-content:flex-start}
  .stage-d{grid-template-columns:1fr;min-height:100svh;gap:28px}
  .nd-ctl{align-items:stretch}
  .plate{display:flex}
  .ndbtn{width:100%}
  .nd-num{font-size:52px}
  .rc{font-size:13.5px}
  .rc-h{padding:12px 14px}
  .rc-row{grid-template-columns:minmax(0,1fr) 5.4em 5.4em;min-height:40px;padding:6px 14px}
  .rc-cols{grid-template-columns:repeat(2,5.4em)}
  .motion .rc-row{height:40px;grid-template-columns:minmax(0,1fr) auto}
  .motion .rc-mv{transform:translateY(-40px)}
  .dawn{height:14svh}
  .lv-chs{grid-template-columns:1fr;gap:20px}
  .cards{grid-template-columns:1fr;gap:12px}
  .card a{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;padding:12px}
  .card-art{grid-row:1/span 3;width:72px;margin:0}
  .card-t{font-size:17px}
  .cmp{font-size:14px}
  .cmp caption{padding:14px 12px 4px}
  .cmp th,.cmp td{padding:12px 10px}
  .cmp tbody th{width:56%}
  .cmp td{width:22%;text-align:center}
  .cmp thead th{font-size:12px;text-align:center}
  .cmp thead th:first-child{text-align:left}
  .cmp td.cmp-w{font-size:12px;line-height:1.3}
  .cmp-d{display:none}
  .cmp-always{padding:14px 12px;font-size:15px}
  .ctas-day{flex-direction:column;align-items:stretch}
  .ctas-day a{justify-content:center}
  .tiles{grid-template-columns:1fr}
  .fin-nums{grid-template-columns:1fr;gap:18px}
  .fin-n+.fin-n{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:22px}
  .fin .ctas{flex-direction:column;align-items:stretch;width:100%}
  .fin .ctas a{justify-content:center}
  .wl-row{flex-direction:column}
  .wl-btn{width:100%}
  .faq summary{font-size:17px}
  .dv{aspect-ratio:auto;margin-top:32px;border-radius:18px}
  .dv-arrive,.dv-frame,.dv-lift,.dv-iso{position:relative;inset:auto}
  /* phone motion: the cut runs once when the card is half visible (landing.js), the counter sits above the card */
  .motion .g-counts .big{display:grid;justify-content:center;margin:4px 0 14px}
  .motion .big-l{grid-area:1/1;display:flex;align-items:baseline;justify-content:center;gap:6px;font:700 64px/1 var(--inter);font-variant-numeric:tabular-nums;letter-spacing:-.04em;transition:opacity .24s}
  .motion .big-of{font-size:26px;color:var(--on-night2)}
  .motion .big-w{margin-left:8px;font-size:15px;font-weight:600;letter-spacing:0;padding:4px 10px;border-radius:99px}
  .motion .big-bad{color:var(--on-night)}.motion .big-ok{color:var(--ok-night);opacity:0}
  .motion .big-bad .big-w{display:inline-block;color:var(--bad-night);background:rgba(252,165,165,.12);border:1px solid rgba(252,165,165,.3)}
  .motion .big-ok .big-w{background:rgba(110,231,183,.12);border:1px solid rgba(110,231,183,.3)}
  .motion .big.is-ok .big-bad{opacity:0}.motion .big.is-ok .big-ok{opacity:1}
  .motion .g-counts .eq-equal,.motion .g-counts .eq figcaption,.motion .g-counts .tc-trail{display:none}
  /* the three checks are there from the start and row 1 follows the cut; only the result line and the tags wait for the pass */
  .motion .tc :is(.tc-new,.tags){transition:opacity .35s var(--e-out),transform .35s var(--e-out)}
  .motion .tc:not(.is-pass) :is(.tc-new,.tags){opacity:0;transform:translateY(6px)}
  .motion .tc .bar-fill{transition:transform .24s var(--e-out)}
}
@supports (animation-timeline: view()){
  @media (max-width:767px){
    @keyframes ph-on{from{opacity:.92}to{opacity:0}}
    @keyframes ph-glint{from{transform:translateX(-130%);opacity:.5}to{transform:translateX(130%);opacity:0}}
    .motion:not(.fb) .dv-r .dv-off{display:block;position:absolute;inset:0;z-index:5;border-radius:18px;background:#0b1229;animation:ph-on linear both;animation-timeline:view();animation-range:entry 20% entry 60%}
    .motion:not(.fb) .dv-r .dv-glint{display:block;position:absolute;inset:0;z-index:6;border-radius:18px;overflow:hidden;pointer-events:none}
    .motion:not(.fb) .dv-r .dv-glint-b{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);animation:ph-glint linear both;animation-timeline:--phg;animation-range:entry 40% entry 80%}
    .motion:not(.fb) .dv-r .dv-glint{view-timeline-name:--phg}
    .motion:not(.fb) .g-counts .eq-g{transform-box:fill-box;transform-origin:center;animation:r-wave-ph linear both;animation-timeline:--eqv;animation-range:entry 30% cover 50%}
    .motion:not(.fb) .g-counts .eq{view-timeline-name:--eqv}
    @keyframes r-wave-ph{from{transform:scaleY(1)}to{transform:scaleY(.001)}}
  }
}
/* the phone stack (≤767): the six layers of the device with their own lp-* markup, as a still isometric stack
   (independent transforms, no preserve-3d chain); numbers = the legend.
   --w = face width so the tilted face (1.17 × --w wide) and the number column fit the column; type scales with the face. */
@media (max-width:767px){
  .pstk{--w:min(calc((100vw - 2 * var(--gut) - 34px) / 1.17),420px);--h:calc(var(--w) * .62);--step:calc(var(--w) * .36);--pull:calc(var(--step) - 10px);
    grid-area:schem;justify-self:center;display:block;position:relative;width:calc(var(--w) * 1.17 + 34px);max-width:100%;height:calc(var(--h) + 5 * var(--step));
    font:500 calc(var(--w) * .037)/1.3 var(--inter);color:#0f172a;-webkit-user-select:none;user-select:none}
  .ps{position:absolute;left:34px;right:0;top:calc((var(--i) - 1) * var(--step));height:var(--h);z-index:calc(10 - var(--i))}
  .ps-1{--i:1}.ps-2{--i:2}.ps-3{--i:3}.ps-4{--i:4}.ps-5{--i:5}.ps-6{--i:6}
  .ps-f{position:absolute;left:50%;top:0;width:var(--w);height:var(--h);margin:0 0 0 calc(var(--w) / -2);overflow:hidden;border-radius:12px;background:#fff;
    box-shadow:0 0 0 1px rgba(148,163,184,.35),inset 0 1px 0 rgba(255,255,255,.95),0 34px 44px -26px rgba(2,6,23,.9);transform:rotateX(52deg) rotateZ(-24deg)}
  .ps-f svg{width:1.25em;height:1.25em}
  .ps-n{position:absolute;left:-34px;top:50%;display:grid;place-items:center;width:26px;height:26px;margin-top:-17px;border-radius:50%;background:#2563eb;color:#fff;font:700 13px/1 var(--inter);box-shadow:0 0 0 3px var(--night)}
  .ps-head{display:flex;flex-direction:column;background:var(--navy);color:#e6ebf6}
  .ps-head .lp-strip{flex:none;height:2.2em}
  .ps-head .lp-r1{flex:none;height:2.5em;padding:0 .8em 0 .5em}
  .ps-head :is(.lp-hp,.lp-learn){margin-left:auto}
  .ps-head .lp-store{padding-left:.5em}
  .ps-head .lp-date{padding:0;border:0}
  .ps-head .lp-search{max-width:none;margin:0}
  .ps-head .lp-r2{flex:1;padding:0 .8em}
  .ps-menu{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:.1em .5em;padding:.8em}
  .ps-menu .lp-msearch{grid-column:1/-1;margin-bottom:.3em}
  .ps-menu .lp-mi{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .ps-mi-t{color:var(--train-ink)}.ps-mi-w{color:#1d4ed8}
  .pstk .lp-sheet{gap:.4em}
  .pstk .lp-tr{grid-template-columns:2.2fr 1.5fr .9fr .9fr;padding:.55em .2em}
  .pstk .lp-actions{gap:.35em;padding:.6em .7em;border:0}
  .pstk .lp-act{padding:.35em .6em .4em .75em}
  .pstk .lp-act-t{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .pstk .lp-sub{margin-top:0;padding-top:.35em}
  .pstk .lp-tabs{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:.3em;padding:.5em;background:#dfe4ea}
  .pstk .lp-tab{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.4em;align-items:center;padding:.3em .55em;border-radius:.45em}
  .pstk .lp-tab em{grid-row:1/span 2;grid-column:2;font-size:1.15em}
  .ps-base{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:.5em;padding:.6em;background:#e7ecf4}
  .ps-base .lp-pills{position:static;grid-column:1/-1;height:auto;gap:.4em}
  .ps-wg{display:flex;flex-direction:column;gap:.4em;min-width:0;padding:0 .8em .7em;background:#fff;border:1px solid #d5dbe1;border-radius:.7em;overflow:hidden}
  .ps-wg .lp-h{margin:0 -.8em;padding:.5em .8em}
  .ps-wg .lp-old{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:.95em;line-height:1.35}
  /* motion: the stack unfolds downward as it scrolls in, the numbers come with their layer (transform/opacity only) */
  @keyframes ps-open{from{transform:translateY(calc((1 - var(--i)) * var(--pull)))}to{transform:none}}
  @keyframes ps-num{0%,50%{opacity:0}85%,100%{opacity:1}}
  /* no scroll timelines (.fb): landing.js adds .io (then .in in view); without .io, e.g. a cached older landing.js, the stack stays open */
  .motion.fb .pstk.io .ps{transition:transform 1.1s var(--e-out) calc((var(--i) - 1) * 70ms)}
  .motion.fb .pstk.io .ps-n{transition:opacity .4s linear calc(.45s + (var(--i) - 1) * 70ms)}
  .motion.fb .pstk.io:not(.in) .ps{transform:translateY(calc((1 - var(--i)) * var(--pull)))}
  .motion.fb .pstk.io:not(.in) .ps-n{opacity:0}
}
@supports (animation-timeline: view()){
  @media (max-width:767px){
    .motion:not(.fb) .pstk{view-timeline-name:--pst}
    .motion:not(.fb) .ps{animation:ps-open linear both;animation-timeline:--pst;animation-range:entry 15% entry 95%}
    .motion:not(.fb) .ps-n{animation:ps-num linear both;animation-timeline:--pst;animation-range:entry 15% entry 95%}
  }
}
/* the device's own phone layout (DESIGN §5.7): one navy row, Actions full width, a tab strip showing ~2.3 cards, the title check */
@container (max-width:520px){
  .ly,.ly-face{position:relative;inset:auto;left:auto;top:auto;width:auto;height:auto}
  .ly-face{font-size:12px;overflow:hidden}
  .ly3,.ly4,.lp-r2,.lp-strip-t,.lp-store,.lp-asst,.lp-learn,.lp-icons,.lp-search span,.lp-next,.lp-tabbed,.lp-pills,.lp-wg-bal,.lp-wg-money,.lp-wg-prod,.lp-rec2{display:none}
  .dv-iso{display:flex;flex-direction:column}
  .ly5{order:1}.ly2{order:2}.ly1{order:3}.ly0{order:4}
  .lp-head{display:block;border-radius:18px 18px 0 0}
  .lp-strip{height:24px;font-size:10.5px}
  .lp-date{margin-left:auto}
  .lp-r1{height:44px;gap:10px}
  .lp-search{flex:none;width:30px;height:30px;margin:0 0 0 auto;padding:0;justify-content:center}
  .lp-actions{border-radius:0;border-right:0;padding:12px}
  .lp-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:43%;grid-template-columns:none;padding:6px 8px 0}
  .lp-tab{padding:6px 8px}
  .lp-base{position:relative;padding:10px;border-radius:0 0 18px 18px}
  .lp-wg{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:auto}
  .lp-wg-title{padding-bottom:12px}
  /* the numbered dots sit on the device's top edge above their targets (Actions: on the left edge), never on them (premium 3.7) */
  .co-n{width:18px;height:18px;margin:-9px 0 0 -9px;font-size:10px;box-shadow:0 0 0 2px #fff,0 4px 10px -3px rgba(15,23,42,.45)}
  .co-1{left:18px;top:-10px}.co-2{left:188px;top:-10px}.co-3{left:calc(100% - 60px);top:-10px}.co-4{left:0;top:89px}
  .lp-date>span{display:none}
}
@media (max-width:359px){
  .nav-in{gap:4px;padding:0 10px}
  .wm{gap:5px}.wm b{font-size:14px}.wm-mark{width:18px;height:18px}
  .nav-sec summary{padding:0 3px;gap:5px;font-size:13px}
  .nav-cta{padding-inline:10px;font-size:13px}
}
.free,.ref,.fin,.faq,.notes{content-visibility:auto;contain-intrinsic-size:auto 900px}
/* placeholders close to the real 1440 heights (measured 22.10 on the public copy), so the page does not shrink by ~1.9k px (scrollbar jump) as these sections first render */
.free{contain-intrinsic-size:auto 1110px}.ref{contain-intrinsic-size:auto 430px}.fin{contain-intrinsic-size:auto 715px}.faq{contain-intrinsic-size:auto 570px}.notes{contain-intrinsic-size:auto 245px}   /* content box, padding comes on top */
/* reduced motion and html.rm: no time-based motion anywhere (the static layout above already has no scroll motion) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
.rm *,.rm *::before,.rm *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}