/* Creator Lab homepage: the scroll story (#how) and the road (#road).
   Colour, type and motion tokens (--cl-*) live in shared/cl-tokens.css, shared
   with the app. Everything animated moves by
   transform or opacity only. Two modes:
   - html.story-on  : pinned, scroll-scrubbed story (set in <head> unless reduced motion)
   - otherwise      : static, fully readable panels (reduced motion, or no JS)          */

:root{
  --nav-h:57px;
}

/* ───────────── shared type + buttons ───────────── */
.story, .road{ font-family:'Archivo',Helvetica,sans-serif; -webkit-font-smoothing:antialiased }
.cl-eyebrow{ font-family:var(--cl-mono); font-size:11px; line-height:1.5; letter-spacing:.22em; text-transform:uppercase; margin:0; color:var(--ink,#98989D) }
.cl-btns{ display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.cl-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 26px; border-radius:999px; font-weight:800; font-size:16px; text-decoration:none; white-space:nowrap;
  transition:background-color 120ms var(--cl-e-out), transform 120ms var(--cl-e-out), border-color 120ms var(--cl-e-out) }
.cl-btn-primary{ background:var(--cl-blue); color:#fff; box-shadow:0 4px 18px rgba(40,135,232,.35) }
.cl-btn-primary:hover{ background:var(--cl-blue-hover) }
.cl-btn-primary:active{ background:var(--cl-blue-press); transform:scale(.98) }
.cl-btn-ghost{ border:2px solid rgba(245,245,247,.4); color:#F5F5F7 }
.cl-btn-ghost:hover{ border-color:#F5F5F7 }
.cl-btn:focus-visible{ outline:2px solid #F5F5F7; outline-offset:3px }

/* ═════════════════════════ THE STORY ═════════════════════════ */
.story{ position:relative; background:var(--cl-n0); color:var(--cl-n5) }
.story-pin{ position:relative; background:var(--cl-n0) }
.sc-h{ margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.05; text-wrap:balance; font-size:clamp(30px,3.3vw,48px) }
h1.sc-h{ font-size:clamp(30px,3.3vw,50px) }
.sc-p{ margin:0; font-size:18px; line-height:1.55; color:rgba(245,245,247,.72); max-width:46ch; text-wrap:pretty }
.sc{ --ink:#98989D }
.sc0{ --ink:rgba(245,245,247,.7) } .sc1{ --ink:#B9ABFF } .sc2{ --ink:#FFB49B } .sc3{ --ink:#8EE6F7 }
.sc4{ --ink:#8CC4FF } .sc5{ --ink:#C8F08F } .sc6{ --ink:#F2B6CD }

/* hero: future-skill kicker, Level Read microcopy, who-it's-for chips */
.sc0-kicker{ margin:0; font-size:17px; line-height:1.35; font-weight:800; letter-spacing:-.01em; color:#FFD58A }
.sc0-micro{ margin:-6px 0 0; font-size:13px; color:rgba(245,245,247,.55) }
/* the credential sits on the illustration, so the text column stays short */
.h-badge{ left:3%; top:88.5%; z-index:7; font-size:clamp(10.5px,2.2cqw,14px); font-weight:800; line-height:1; letter-spacing:.01em; color:#F5F5F7;
  background:rgba(8,8,10,.55); border:1px solid rgba(245,245,247,.18); border-radius:999px; padding:.6em 1em; white-space:nowrap }
.sc4-cta{ display:inline-block; margin-top:4px; font-size:15px; font-weight:800; color:#8CC4FF; text-decoration:none }
.sc4-cta:hover{ color:#fff }
.sc4-cta:focus-visible{ outline:2px solid #F5F5F7; outline-offset:3px; border-radius:4px }

/* grade cards (Scene 4) */
.sc4-body{ position:relative }
.gcards{ display:flex; flex-direction:column; gap:10px; margin-top:18px; max-width:48ch }
.gcard{ background:rgba(15,15,17,.92); border:1px solid rgba(245,245,247,.12); border-radius:12px; padding:14px 16px }
.gc-k{ font-family:var(--cl-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:6px }
.gc-good .gc-k{ color:var(--cl-ok) } .gc-fix .gc-k{ color:var(--cl-blue) }
.gcard p{ margin:0; font-size:15.5px; line-height:1.5; color:rgba(245,245,247,.9) }

/* ───────────── the world (illustrated stage) ───────────── */
.story-world{ position:relative; overflow:hidden; border-radius:28px; background:#111114; container-type:size }
.field{ position:absolute; inset:0; opacity:0 }
.f0{ opacity:1; background:linear-gradient(to top, #2A1622 0 15%, transparent 15.2%), linear-gradient(to bottom, #1E1B4B 0%, #4B2A6B 34%, #B8435E 62%, #FF8A4C 84%) }
.f1{ background:radial-gradient(circle at 50% 44%, #8468FF 0 34%, transparent 34.3%), linear-gradient(to top, #4F35C9 0 16%, transparent 16.2%), var(--cl-violet) }
.f2{ background:radial-gradient(circle at 50% 42%, #FF8A63 0 34%, transparent 34.3%), linear-gradient(to top, #D94E26 0 16%, transparent 16.2%), var(--cl-coral) }
.f3{ background:radial-gradient(circle at 50% 44%, #3CCBE8 0 34%, transparent 34.3%), linear-gradient(to top, #0D8FAD 0 16%, transparent 16.2%), var(--cl-cyan) }
.f4{ background:radial-gradient(52% 46% at 50% 38%, rgba(40,135,232,.42), transparent 72%), radial-gradient(90% 60% at 50% 100%, rgba(40,135,232,.14), transparent 70%), #0B0D12 }
.f5{ background:radial-gradient(circle at 50% 42%, #A3E05A 0 34%, transparent 34.3%), linear-gradient(to top, #6AA82A 0 16%, transparent 16.2%), var(--cl-lime) }
.f6{ background:radial-gradient(circle at 50% 44%, #D98AAA 0 34%, transparent 34.3%), linear-gradient(to top, #A44D71 0 16%, transparent 16.2%), var(--cl-rose) }

.world{ position:absolute; inset:0; margin:auto; width:min(100cqw,100cqh); height:min(100cqw,100cqh); container-type:size }
.world > *{ position:absolute }
.world svg{ display:block; width:100%; height:100% }

/* Scene 0: golden-hour set */
.h-bulbs{ left:0; top:1%; width:100%; height:15%; z-index:1 }
.h-bulbs .tw{ animation:cl-twinkle 2.8s ease-in-out infinite }
.h-bulbs .tw:nth-child(4n+3){ animation-delay:1.4s }
@keyframes cl-twinkle{ 50%{ opacity:.45 } }
.h-sun{ left:57%; top:60%; width:18%; aspect-ratio:1; z-index:1; border-radius:50%; background:radial-gradient(circle, #FFE2A0 0 38%, rgba(255,178,92,.5) 40%, rgba(255,140,80,0) 70%) }
.h-hills{ left:0; top:70%; width:100%; height:15%; z-index:1 }
.h-tripod{ left:38%; top:64%; width:24%; height:24%; z-index:4 }
.h-chair{ left:4%; top:61%; width:19%; height:23%; z-index:6 }
.h-teen{ left:77%; top:40%; width:22%; height:44%; z-index:6 }

/* the anchor rig */
.rig{ left:22%; top:25.875%; width:56%; aspect-ratio:320/230; z-index:5; will-change:transform }
.rig-screen{ position:absolute; left:12.5%; top:30.43%; width:75%; height:46.09%; border-radius:4.2cqw/9cqh; overflow:hidden; container-type:size; background:#050506 }
.rig-led{ position:absolute; left:8.75%; top:7.83%; width:17.5%; height:13.04%; border-radius:6%; background:#FFF6DF; box-shadow:0 0 24px 8px rgba(255,236,190,.65); opacity:0 }
.rig-beam{ position:absolute; left:-58%; top:4%; width:78%; height:120%; opacity:0; pointer-events:none;
  background:radial-gradient(60% 55% at 90% 12%, rgba(255,240,200,.55), rgba(255,240,200,.12) 55%, transparent 75%) }
.scr{ position:absolute; inset:0 }
.scr svg{ width:100%; height:100% }
.scr-meta{ position:absolute; font-family:var(--cl-mono); font-size:7cqh; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,245,247,.85); line-height:1 }
.vf-corners{ position:absolute; inset:9% 6%; border:0; background:
  linear-gradient(#fff,#fff) 0 0/7% 2px no-repeat, linear-gradient(#fff,#fff) 0 0/2px 14% no-repeat,
  linear-gradient(#fff,#fff) 100% 0/7% 2px no-repeat, linear-gradient(#fff,#fff) 100% 0/2px 14% no-repeat,
  linear-gradient(#fff,#fff) 0 100%/7% 2px no-repeat, linear-gradient(#fff,#fff) 0 100%/2px 14% no-repeat,
  linear-gradient(#fff,#fff) 100% 100%/7% 2px no-repeat, linear-gradient(#fff,#fff) 100% 100%/2px 14% no-repeat; opacity:.7 }
.scr0{ background:radial-gradient(70% 90% at 50% 50%, #1D2433, #07080B) }
.rec{ display:inline-flex; align-items:center; gap:1.4cqw }
.rec i{ width:5cqh; height:5cqh; border-radius:50%; background:#FF3B30; animation:cl-rec 1.1s steps(1,end) infinite }
@keyframes cl-rec{ 50%{ opacity:.15 } }
.thirds{ position:absolute; inset:0; background:
  linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255,255,255,.28) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(255,255,255,.28) 0 calc(66.66% + .5px), transparent 0),
  linear-gradient(transparent calc(33.33% - .5px), rgba(255,255,255,.28) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(255,255,255,.28) 0 calc(66.66% + .5px), transparent 0) }
.up-card{ position:absolute; left:50%; top:22%; width:44%; height:40%; margin-left:-22%; border-radius:5cqh; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.2) }
.up-bar{ position:absolute; left:28%; right:28%; top:72%; height:5cqh; border-radius:9cqh; background:rgba(245,245,247,.16); overflow:hidden }
.up-bar b{ display:block; height:100%; background:var(--cl-cyan); transform-origin:0 50%; transform:scaleX(1) }
.up-sent{ position:absolute; left:0; right:0; top:82%; text-align:center; font-family:var(--cl-mono); font-size:7cqh; letter-spacing:.16em; text-transform:uppercase; color:var(--cl-ok) }
.scr4{ background:#07080B; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6cqh }
.scr4 .ok{ width:30cqh; height:30cqh; border-radius:50%; background:var(--cl-ok); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18cqh }
.scr4 .scr-meta{ position:static }
.take-bar{ position:absolute; left:6%; right:6%; bottom:9%; height:3.5cqh; border-radius:9cqh; background:rgba(255,255,255,.25); overflow:hidden }
.take-bar b{ display:block; height:100%; background:#fff; transform-origin:0 50% }
.scr6{ background:#101014; display:grid; grid-template-columns:repeat(4,1fr); gap:3cqh; padding:10cqh 6cqw 8cqh; align-content:center }
.scr6 i{ display:block; aspect-ratio:16/10; border-radius:3cqh }

/* Scene 1: storyboard cards */
.sb{ width:22%; aspect-ratio:1.25; z-index:3; background:#F5F5F7; border-radius:1.6cqw; padding:1.2cqw; box-shadow:0 1cqw 3cqw rgba(20,10,60,.35) }
.sb svg{ border-radius:.8cqw; background:#E9E6F7 }
.sb em{ position:absolute; right:1.4cqw; bottom:.7cqw; font:800 1.6cqw/1 var(--cl-mono); font-style:normal; color:#6C4DF6; letter-spacing:.1em }
.sb1{ left:3%; top:17%; transform:rotate(-14deg) } .sb2{ left:25%; top:5%; transform:rotate(-5deg) }
.sb3{ left:53%; top:5%; transform:rotate(5deg) } .sb4{ left:75%; top:17%; transform:rotate(14deg) }

/* Scene 2: crew */
.tripod{ left:38%; top:63%; width:24%; height:33%; z-index:4; transform-origin:50% 0 }
.teen{ width:22%; height:44%; z-index:6 }
.teen-a{ left:0%; top:44%; z-index:6 } .teen-b{ left:78%; top:44% } .teen-c{ left:40%; top:21%; width:19%; height:38%; z-index:3 }
.boom{ left:19%; top:43.5%; width:50%; height:12%; z-index:6; transform-origin:0% 50% }
.slate{ left:67%; top:57%; width:15%; aspect-ratio:1.25; z-index:7 }
.slate-arm{ position:absolute; left:0; top:0; width:100%; height:24%; transform-origin:4% 100% }

/* Scene 3: upload hand-off */
.laptop{ left:8%; top:12%; width:84%; aspect-ratio:400/260; z-index:6; will-change:transform }
.laptop-screen{ position:absolute; left:10%; top:6.154%; width:80%; height:76.92%; overflow:hidden; background:#050506; container-type:size }
.gl-media, .gl-media img, .gl-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.gl-hud{ position:absolute; left:3%; top:4%; display:flex; gap:2cqw; align-items:center }
.gl-tag{ font-family:var(--cl-mono); font-size:3.6cqh; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(8,8,10,.62); padding:1.2cqh 2cqw; border-radius:1cqh }
.gl-scan{ position:absolute; left:0; right:0; top:0; height:22%; background:linear-gradient(180deg, transparent, rgba(40,135,232,.25) 70%, rgba(62,154,253,.95) 97%, #fff); opacity:0 }
.gl-status{ position:absolute; left:0; right:0; bottom:5%; text-align:center; font-family:var(--cl-mono); font-size:3.8cqh; letter-spacing:.16em; text-transform:uppercase; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6) }
.strip-fly{ left:39%; top:36%; width:22%; height:9%; z-index:8; border-radius:.6cqw; background:#16161A; box-shadow:0 0 2.4cqw rgba(142,230,247,.9), 0 0 .5cqw #fff;
  display:flex; gap:4%; padding:1.1% 4%; align-items:center;
  background-image:radial-gradient(circle, #3A3A40 38%, transparent 40%), radial-gradient(circle, #3A3A40 38%, transparent 40%);
  background-size:6% 18%; background-position:0 6%, 0 94%; background-repeat:repeat-x }
.strip-fly i{ flex:1; height:62%; border-radius:.3cqw; background:linear-gradient(135deg,#8EE6F7,#13B5D6 60%,#0D8FAD) }

/* Scene 4: the grade */
.fstrip{ left:10%; top:67.5%; width:80%; height:11.5%; z-index:5; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4%; }
.fthumb{ position:relative; border-radius:.8cqw; background:#222 center/cover no-repeat; box-shadow:0 0 0 1px rgba(245,245,247,.16) }
.fthumb.is-good{ box-shadow:0 0 0 2px var(--cl-ok) }
.fthumb.is-fix{ box-shadow:0 0 0 2px var(--cl-blue) }
.fthumb span{ position:absolute; left:6%; bottom:8%; font:600 1.7cqw/1 var(--cl-mono); color:#fff; background:rgba(8,8,10,.66); padding:.35cqw .6cqw; border-radius:.4cqw; letter-spacing:.06em }
.meters{ left:10%; top:82%; width:46%; height:15%; z-index:6; display:flex; flex-direction:column; justify-content:space-between }
.meter{ display:grid; grid-template-columns:24% 1fr; align-items:center; gap:3% }
.meter span{ font:500 1.7cqw/1 var(--cl-mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(245,245,247,.7) }
.meter i{ display:block; height:1.1cqw; border-radius:1cqw; background:rgba(245,245,247,.12); overflow:hidden }
.meter b{ display:block; height:100%; border-radius:1cqw; background:linear-gradient(90deg,#0774D4,#3E9AFD); transform-origin:0 50% }
.score{ left:62%; top:80.5%; width:28%; height:17%; z-index:6; display:flex; align-items:flex-end; gap:6% }
.score-num{ display:flex; align-items:baseline; gap:.4cqw; font-weight:800; letter-spacing:-.04em; line-height:.8 }
.score-v{ font-size:8.4cqw; color:#fff; min-width:2ch; text-align:right; font-variant-numeric:tabular-nums }
.score-num small{ font-size:1.9cqw; color:rgba(245,245,247,.45); letter-spacing:0 }
.ladder{ flex:1; height:100%; display:flex; align-items:flex-end; gap:5% }
.rung{ position:relative; flex:1; border-radius:.6cqw .6cqw .3cqw .3cqw; background:rgba(245,245,247,.12); overflow:visible }
.rung.r1{ height:38% } .rung.r2{ height:62% } .rung.r3{ height:86% }
.rung b{ position:absolute; inset:0; border-radius:inherit; background:var(--cl-ok); transform-origin:50% 100% }
.rung.r2 b, .rung.r3 b{ display:none }
.rung em{ position:absolute; left:50%; bottom:calc(100% + .6cqw); transform:translateX(-50%); font:800 1.35cqw/1 'Archivo',sans-serif; font-style:normal; color:rgba(245,245,247,.5); white-space:nowrap }
.rung.r1 em{ color:var(--cl-ok) }

/* Scene 5: level up */
.gauge{ left:14%; top:68%; width:72%; height:15%; z-index:6; background:rgba(15,15,17,.9); border-radius:1.8cqw; padding:2.2% 3.4%; display:flex; flex-direction:column; justify-content:center; gap:14% }
.g-top{ display:flex; justify-content:space-between; align-items:baseline }
.g-label{ font:500 1.7cqw/1 var(--cl-mono); letter-spacing:.16em; text-transform:uppercase; color:rgba(245,245,247,.7) }
.g-v{ font:800 4.4cqw/.8 'Archivo',sans-serif; color:#fff; letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.g-track{ position:relative; height:1.3cqw; border-radius:1cqw; background:rgba(245,245,247,.14) }
.g-fill{ position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,#6AA82A,#C8F08F); transform-origin:0 50%; transform:scaleX(.86) }
.g-bar{ position:absolute; left:80%; top:-.9cqw; bottom:-.9cqw; width:2px; background:#fff }
.g-bar em{ position:absolute; left:50%; bottom:calc(100% + .5cqw); transform:translateX(-50%); font:500 1.4cqw/1 var(--cl-mono); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:#fff; white-space:nowrap }
.badge{ left:71%; top:5%; width:21%; aspect-ratio:1; z-index:7; perspective:60cqw }
.badge-in{ position:absolute; inset:0; transform-style:preserve-3d }
.bface{ position:absolute; inset:0; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4%; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:.6cqw solid #fff; box-shadow:0 1.2cqw 3cqw rgba(30,60,0,.35) }
.bface b{ font-size:5.4cqw; line-height:1; color:#fff }
.bface em{ font:800 1.55cqw/1 'Archivo',sans-serif; font-style:normal; letter-spacing:.06em; text-transform:uppercase; color:#fff }
.bface.front{ background:#2B2D42 }
.bface.back{ background:#30A14E; transform:rotateY(180deg) }
.burst{ position:absolute; left:50%; top:50%; width:0; height:0 }
.burst i{ position:absolute; left:-.7cqw; top:-.7cqw; width:1.4cqw; height:1.4cqw; border-radius:50%; background:#fff; opacity:0 }
.burst i:nth-child(3n+1){ background:#FFD166 } .burst i:nth-child(3n+2){ background:#C8F08F }

/* Scene 6: the parent view */
.tablet{ left:53%; top:14%; width:41%; aspect-ratio:3/4; z-index:6; background:#1B1B1E; border-radius:2.6cqw; padding:1.6cqw; box-shadow:0 2cqw 5cqw rgba(60,10,40,.35) }
.tab-screen{ width:100%; height:100%; border-radius:1.4cqw; background:#F5F5F7; color:#0F0F11; padding:7% 7%; display:flex; flex-direction:column; gap:3.2% }
.tab-h{ display:flex; justify-content:space-between; align-items:baseline; font:500 1.45cqw/1 var(--cl-mono); letter-spacing:.16em; text-transform:uppercase; color:#6E6E73; margin-top:2% }
.tab-h strong{ font:800 2.6cqw/1 'Archivo',sans-serif; letter-spacing:-.02em; color:#0F0F11; text-transform:none }
.hrow{ display:grid; grid-template-columns:22% 1fr 14%; gap:4%; align-items:center; font-size:1.45cqw; font-weight:500 }
.hrow i{ height:1cqw; border-radius:1cqw; background:#E4E4E8; overflow:hidden }
.hrow i b{ display:block; height:100%; background:#C9678F; transform-origin:0 50% }
.hrow em{ font-style:normal; font-family:var(--cl-mono); text-align:right; color:#48484A }
.grow{ display:flex; justify-content:space-between; font-size:1.45cqw; padding:3% 0; border-top:1px solid #DCDCE1 }
.grow em{ font-style:normal; font-family:var(--cl-mono); font-weight:600 }
.cert{ left:6%; top:61%; width:45%; aspect-ratio:1.45; z-index:7; background:#FFFDF6; border-radius:1cqw; padding:1.2cqw; box-shadow:0 2cqw 4cqw rgba(60,10,40,.35); transform:rotate(-3deg) }
.cert-in{ position:relative; height:100%; border:.35cqw double #C9A24B; border-radius:.6cqw; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6%; text-align:center; color:#2B2D42 }
.cert-in small{ font:500 1.3cqw/1 var(--cl-mono); letter-spacing:.2em; text-transform:uppercase; color:#8A7A55 }
.cert-in strong{ font:800 2.7cqw/1.05 'Archivo',sans-serif; letter-spacing:-.02em; max-width:80% }
.cert-in .line{ display:block; width:46%; height:1px; background:#C9A24B }
.seal{ position:absolute; right:7%; bottom:9%; width:17%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 40% 35%, #F3D27A, #C9A24B 70%); box-shadow:0 0 0 .4cqw #FFFDF6, 0 0 0 .6cqw #C9A24B }

/* progress dots */
.story-dots{ display:none }

/* ───────────── pinned mode ───────────── */
/* no CSS scroll glide while the story runs (home.js glides in-page links instead) */
html.story-on{ scroll-behavior:auto }
.story-on .story-pin{ height:calc(100vh - var(--nav-h)); height:calc(100svh - var(--nav-h)); min-height:500px; overflow:hidden }
.story-on .story-copy{ position:absolute; z-index:3; top:0; bottom:64px; left:max(32px, calc((100vw - 1180px) / 2 + 32px)); width:min(42vw, 540px) }
.story-on .sc{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:20px }
.story-on .sc:not(.sc0){ opacity:0; visibility:hidden }
.story-on .story-world{ position:absolute; top:24px; right:24px; bottom:72px; left:calc(max(32px, calc((100vw - 1180px) / 2 + 32px)) + min(42vw, 540px) + 40px) }
.story-on .scr:not(.scr0), .story-on .hid{ opacity:0; visibility:hidden }
.story-on .story-dots{ display:flex; position:absolute; z-index:4; bottom:22px; left:max(32px, calc((100vw - 1180px) / 2 + 32px)); align-items:center; gap:10px }
.story-dots button{ width:26px; height:26px; padding:0; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:50% }
.story-dots button::before{ content:""; width:10px; height:10px; border-radius:50%; background:rgba(245,245,247,.25); box-shadow:inset 0 0 0 1.5px rgba(245,245,247,.35); transition:transform 260ms var(--cl-e-out), background-color 260ms var(--cl-e-out) }
.story-dots button[aria-current="step"]::before{ background:var(--dot, #F5F5F7); transform:scale(1.35); box-shadow:0 0 0 2px rgba(245,245,247,.9) }
.story-dots button:focus-visible{ outline:2px solid #F5F5F7; outline-offset:1px }
.dots-label{ margin-left:8px; font-family:var(--cl-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(245,245,247,.75) }
.story-on .type-in .w{ opacity:0 }

/* phones + narrow tablets: world on top, copy below */
@media (max-width:899px){
  .story-on .story-world{ top:10px; left:16px; right:16px; bottom:auto; height:37%; border-radius:22px }
  .story-on .story-copy{ top:calc(37% + 22px); left:16px; right:16px; width:auto; bottom:44px }
  .sc0-kicker{ font-size:15px }
  .story-on .sc0{ gap:10px }
  .sc0-micro{ margin-top:-4px; font-size:12px }
  .sc4-cta{ font-size:14px }
  .story-on .sc{ justify-content:flex-start; gap:12px }
  .story-on .story-dots{ left:10px; bottom:8px; gap:2px }
  .story-on .dots-label{ font-size:10px; margin-left:6px }
  .story-on .sc-h{ font-size:27px }
  .story-on .sc-p{ font-size:15px; line-height:1.48 }
  .story-on .cl-btn{ min-height:44px; padding:0 18px; font-size:14.5px }
  .story-on .cl-btns{ gap:10px }
  .story-on .gcards{ position:absolute; left:0; right:0; top:0; margin-top:0; gap:8px }
  .story-on .gcard{ padding:11px 13px }
  .story-on .gcard p{ font-size:14px; line-height:1.42 }
  .sb1, .sb4{ display:none }
  .fthumb span{ font-size:2.4cqw }
}
@media (max-width:899px) and (max-height:740px){
  .story-on .story-world{ height:31% }
  .story-on .story-copy{ top:calc(31% + 18px) }
  .story-on .sc-h{ font-size:24px }
  .story-on .sc-p{ font-size:14px }
}
@media (min-width:900px) and (max-height:819px){
  .story-on h1.sc-h{ font-size:clamp(30px,3.2vw,46px) }
  .story-on .sc0{ gap:16px }
  .story-on .gcards{ position:absolute; left:0; right:0; top:0; margin-top:0 }
  .story-on .sc-p{ font-size:16.5px }
}

/* ───────────── static mode (reduced motion / no JS) ───────────── */
html:not(.story-on) .story-pin{ max-width:1180px; margin:0 auto; padding:72px 22px 88px; display:flex; flex-direction:column; gap:28px }
html:not(.story-on) .story-copy{ display:contents }
html:not(.story-on) .sc{ display:flex; flex-direction:column; gap:14px; background:#0F0F11; border:1px solid rgba(245,245,247,.08); border-top:4px solid var(--bar, #26262A); border-radius:18px; padding:28px 26px }
html:not(.story-on) .sc0{ order:0; --bar:#2887E8; background:none; border:0; padding:8px 0 20px }
html:not(.story-on) .sc1{ order:1; --bar:var(--cl-violet) } html:not(.story-on) .sc2{ order:2; --bar:var(--cl-coral) }
html:not(.story-on) .sc3{ order:3; --bar:var(--cl-cyan) } html:not(.story-on) .sc4{ order:4; --bar:#2887E8 }
html:not(.story-on) .story-world{ order:5; width:100%; max-width:620px; aspect-ratio:1; margin:0 auto }
html:not(.story-on) .sc5{ order:6; --bar:var(--cl-lime) } html:not(.story-on) .sc6{ order:7; --bar:var(--cl-rose) }
/* the static world shows the product moment: the finished grade */
html:not(.story-on) .field:not(.f4){ display:none }
html:not(.story-on) .f4{ opacity:1 }
html:not(.story-on) .world > [data-s]:not([data-s~="4"]){ display:none }
html:not(.story-on) .scr:not(.scr4){ display:none }
html:not(.story-on) .rig{ transform:translate(-68%,-97%) scale(.3) }
html:not(.story-on) .gl-scan{ display:none }
html:not(.story-on) .gl-status{ display:none }

/* ═════════════════════════ THE ROAD ═════════════════════════ */
.road{ position:relative; color:#F5F5F7; background:#120E2A }
.road-pin{ position:relative; overflow:hidden }
.road-sky{ position:absolute; inset:0; background:linear-gradient(to bottom, #0E0B22 0%, #221645 38%, #5B2462 66%, #C8465A 84%, #FF7A45 100%) }
.road-sun{ position:absolute; right:12%; top:56%; width:18vh; height:18vh; border-radius:50%; background:radial-gradient(circle, #FFD58A 0 55%, rgba(255,160,90,.35) 56%, transparent 70%) }
.road-far{ position:absolute; left:0; bottom:17%; height:42%; width:260vw; will-change:transform }
.road-track{ position:absolute; left:0; top:0; bottom:0; width:430vw; will-change:transform }
.road-ground{ position:absolute; left:0; right:0; bottom:0; height:18%; background:
  linear-gradient(to bottom, #2A2A31 0 6%, transparent 6%),
  repeating-linear-gradient(90deg, transparent 0 3.2vw, rgba(245,245,247,.75) 3.2vw 6.4vw) 0 55%/100% 5px no-repeat,
  #16161B }
.stop{ position:absolute; bottom:18%; height:74%; width:72vw }
.stop-1{ left:62vw } .stop-2{ left:160vw } .stop-3{ left:258vw }
.stop-art{ position:absolute; left:26vw; bottom:0; height:64%; aspect-ratio:1.4; container-type:inline-size }
.stop-card{ position:absolute; left:0; top:6%; width:min(24vw,340px); background:rgba(8,8,10,.72); border:1px solid rgba(245,245,247,.14); border-radius:18px; padding:20px 22px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
.stop-card h3{ margin:8px 0 6px; font-size:clamp(24px,2.3vw,34px); font-weight:800; letter-spacing:-.03em; line-height:1.05 }
.stop-card p{ margin:0; font-size:16px; color:rgba(245,245,247,.75) }
.stop-1 .cl-eyebrow{ --ink:#FFB49B } .stop-2 .cl-eyebrow{ --ink:#8EE6F7 } .stop-3 .cl-eyebrow{ --ink:#F2B6CD }
.flag{ position:absolute; left:calc(26vw + 64vh * .5 * 1.4 + 14vw); bottom:0; height:52%; width:2px; background:#D7D7DC }
.flag::after{ content:""; position:absolute; left:-4px; bottom:-4px; width:10px; height:6px; border-radius:2px; background:#D7D7DC }
.flag span{ position:absolute; left:2px; top:0; padding:8px 18px 8px 12px; font:800 13px/1 'Archivo',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#08080A; white-space:nowrap;
  clip-path:polygon(0 0,100% 0,88% 50%,100% 100%,0 100%); transform-origin:0 50%; animation:cl-flag 2.4s ease-in-out infinite }
.stop-1 .flag span{ background:#30D158 } .stop-2 .flag span{ background:#8EE6F7 } .stop-3 .flag span{ background:#FFD166 }
@keyframes cl-flag{ 50%{ transform:scaleX(.9) skewY(2deg) } }
.marquee-text{ position:absolute; left:22%; right:22%; top:14.5%; height:10.5%; display:flex; align-items:center; justify-content:center; text-align:center; font:800 3.3cqw/1 'Archivo',sans-serif; letter-spacing:.02em; text-transform:uppercase; color:#1B1B1E }
.road-end{ position:absolute; left:342vw; width:80vw; top:0; bottom:22%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; text-align:center }
.road-end h2{ margin:0; font-size:clamp(34px,4.4vw,64px); font-weight:800; letter-spacing:-.035em; line-height:1.02; text-wrap:balance }
.road-end .cl-btns{ justify-content:center }
.road-car{ position:absolute; left:10vw; bottom:12.5%; width:min(21vw,38vh); aspect-ratio:2.1; z-index:3 }
.road-car .wheel{ position:absolute; width:26%; aspect-ratio:1; bottom:-5.5%; will-change:transform }
.road-car .w1{ left:10.8% } .road-car .w2{ left:63.2% }

/* road, pinned desktop */
.road-on .road-pin{ height:calc(100vh - var(--nav-h)); height:calc(100svh - var(--nav-h)); min-height:520px }

/* road, stacked (phones, reduced motion, no JS) */
html:not(.road-on) .road-pin{ padding:72px 16px 80px }
html:not(.road-on) .road-sky{ position:absolute }
html:not(.road-on) .road-far, html:not(.road-on) .road-ground, html:not(.road-on) .road-car, html:not(.road-on) .road-sun{ display:none }
html:not(.road-on) .road-track{ position:relative; width:auto; max-width:620px; margin:0 auto; display:flex; flex-direction:column; gap:28px }
html:not(.road-on) .stop{ position:relative; left:auto; bottom:auto; width:auto; height:auto; display:flex; flex-direction:column; gap:0;
  border-radius:22px; overflow:hidden; background:linear-gradient(to bottom, #221645, #5B2462 70%, #C8465A); border:1px solid rgba(245,245,247,.1) }
html:not(.road-on) .stop-art{ position:relative; left:auto; height:auto; width:78%; margin:28px auto 0; z-index:1 }
html:not(.road-on) .stop::after{ content:""; order:1; display:block; height:16px; background:#16161B; box-shadow:inset 0 3px 0 #2A2A31 }
html:not(.road-on) .stop-card{ position:relative; order:2; left:auto; top:auto; width:auto; border:0; border-radius:0; background:#0F0F11; padding:20px 22px 24px; backdrop-filter:none }
html:not(.road-on) .flag{ left:7%; top:20px; bottom:auto; height:96px; z-index:2 }
html:not(.road-on) .stop-2 .flag{ left:47% }
html:not(.road-on) .road-end{ position:relative; left:auto; width:auto; top:auto; bottom:auto; padding:40px 0 8px }

@media (prefers-reduced-motion: reduce){
  .rec i, .flag span, .h-bulbs .tw{ animation:none }
}