/* MyDS marketing home (S01, M2 T13a): hero, dial, route, lesson mode, compare, voices, join, questions, finale.
   Ported from the frozen prototype F01-home; loaded after www.css. */
@keyframes eq{from{transform:scaleY(.12)}to{transform:scaleY(var(--h,.5))}}
@keyframes blink{50%{opacity:0}}
@keyframes wipe{from{clip-path:inset(0 0 100% 0);transform:translateY(8px)}to{clip-path:inset(-20% 0);transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgb(201 162 74/.6)}100%{box-shadow:0 0 0 14px rgb(201 162 74/0)}}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes laneflow{to{background-position:0 104px}}
@keyframes scin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fill{from{stroke-dasharray:0 1}}
@keyframes travel{from{transform:translateX(0)}to{transform:translateX(calc(100% * var(--dirn,1) - 12px * var(--dirn,1)))}}
@keyframes dprog{to{stroke-dashoffset:0}}
@property --wipe{syntax:"<angle>";inherits:false;initial-value:180deg}
.screenw{position:relative;aspect-ratio:16/11;border-radius:28px 28px 18px 18px;background:radial-gradient(120% 80% at 50% 0%,#1d1d22,#0b0b0d 70%);border:1px solid var(--night-line);overflow:hidden;box-shadow:inset 0 1px 0 rgb(255 255 255/.05),0 40px 80px rgb(0 0 0/.45);--wipe:180deg;-webkit-mask:conic-gradient(from -90deg at 50% 100%,#000 var(--wipe),transparent 0);mask:conic-gradient(from -90deg at 50% 100%,#000 var(--wipe),transparent 0)}
[dir="rtl"] .screenw{-webkit-mask:conic-gradient(from -90deg at 50% 100%,transparent calc(180deg - var(--wipe)),#000 0);mask:conic-gradient(from -90deg at 50% 100%,transparent calc(180deg - var(--wipe)),#000 0)}
.js .screenw:not(.in){--wipe:0deg}
.js .screenw.in{animation:wiper 640ms var(--ease-shift)}
@keyframes wiper{from{--wipe:0deg}to{--wipe:180deg}}
.rm .screenw{-webkit-mask:none!important;mask:none!important}
.screenw .tarmac{position:absolute;inset:38% -30% -10%;perspective:340px;perspective-origin:50% 0}
.screenw .plane{position:absolute;inset:0;transform:rotateX(62deg);transform-origin:50% 0;overflow:hidden;background:linear-gradient(90deg,transparent 14%,#55555e 14% 14.8%,transparent 14.8% 85.2%,#55555e 85.2% 86%,transparent 86%),linear-gradient(90deg,transparent 14.8%,#141417 14.8% 85.2%,transparent 85.2%)}
.screenw .side{position:absolute;top:-100%;height:200%;width:4px;background:repeating-linear-gradient(180deg,#C6C3BA 0 40px,transparent 40px 150px);opacity:.35;animation:stream 1.6s linear infinite}
.screenw .side.l{left:32%}.screenw .side.r{right:32%}
.screenw .sky{position:absolute;inset:0 0 62%;background:radial-gradient(60% 120% at 50% 100%,rgb(201 162 74/.18),transparent 70%)}
.screenw .stripe{position:absolute;left:50%;width:10px;margin-left:-5px;top:-100%;height:200%;background:repeating-linear-gradient(180deg,var(--gold) 0 60px,transparent 60px 150px);opacity:.75;animation:stream 1.6s linear infinite}
.paused .side,.paused .stripe{animation-play-state:paused}
@keyframes stream{to{transform:translateY(150px)}}
.screenw .glare{position:absolute;inset:0;background:linear-gradient(115deg,rgb(255 255 255/.06),transparent 35%);pointer-events:none}
.hudbar{position:absolute;top:14px;inset-inline:16px;display:flex;gap:8px;align-items:center;font:600 12px/1 var(--font-ui);color:#C6C3BA}
.hudbar .ibtn{margin-inline-start:auto;width:36px;height:36px;border-color:var(--night-line);background:rgb(10 10 12/.6);color:#F4F2EC}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--radius-full);border:1px solid var(--night-line);background:rgb(10 10 12/.6)}
.pill svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round}
.voice{position:absolute;left:50%;top:46%;translate:-50% -50%;width:min(84%,520px);display:grid;justify-items:center;gap:14px;text-align:center}
.wave{display:flex;gap:4px;align-items:center;height:44px;opacity:0;transition:opacity 240ms}
.wave i{width:4px;height:100%;border-radius:2px;background:var(--gold);transform:scaleY(.15)}
.listening .wave{opacity:1}
.listening .wave i{animation:eq 700ms var(--ease-shift) infinite alternate;animation-delay:calc(var(--i)*-63ms)}
.say{min-height:3em;font:500 clamp(15px,1.5vw,20px)/1.45 var(--font-ui);color:#F4F2EC}
.fault{position:absolute;bottom:18px;inset-inline:18px;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:var(--radius-sm);background:rgb(20 20 23/.85);border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);color:#F4F2EC;font-size:14px;font-weight:500;opacity:0;transform:translateY(16px);transition:opacity 380ms var(--ease-drive),transform 380ms var(--ease-drive)}
.fault.show{opacity:1;transform:none}
/* ===== 9. Compare: only one lane goes all the way ===== */
.compare{padding-block:var(--section)}
.compare header{display:grid;gap:var(--space-4);margin-bottom:var(--space-7);max-width:900px}
.ctable{width:100%;border-collapse:collapse;font-size:16px}
.ctable th{font:600 var(--fs-cap)/1.2 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);text-align:center;padding:0 8px 16px;width:22%}
[dir="rtl"] .ctable th{letter-spacing:0;font-size:14px}
.ctable th:first-child{text-align:start;width:auto}
.ctable th.us{color:var(--gold-text)}
.ctable td{height:60px;border-top:1px solid var(--border);padding:0;position:relative}
.ctable td:first-child{padding-inline-end:16px;color:var(--text-2)}
.ctable tr.plus td:first-child{color:var(--text)}
.ln-cell{position:relative;height:60px}
.ln-cell::before{content:"";position:absolute;left:50%;top:-1px;bottom:0;width:3px;margin-left:-1.5px;background:var(--border-strong);transform-origin:top;transform:scaleY(var(--g,1))}
.us-cell .ln-cell::before{background:var(--gold);box-shadow:0 0 12px var(--gold-glow)}
.dotn{position:absolute;left:50%;top:50%;width:14px;height:14px;translate:-50% -50%;border-radius:50%;background:var(--bg);border:2px solid var(--border-strong);transform:scale(var(--n,1));transition:transform 300ms var(--ease-drive)}
.us-cell .dotn{background:var(--gold);border-color:var(--gold)}
.end-cell .ln-cell::before{display:none}
.barrier{position:absolute;left:50%;top:12px;translate:-50% 0;width:min(120px,90%);height:12px;border-radius:2px;background:repeating-linear-gradient(-45deg,var(--text-muted) 0 6px,transparent 6px 12px);border:1px solid var(--text-muted)}
.barrier-l{position:absolute;left:0;right:0;top:30px;text-align:center;font-size:12px;font-weight:600;color:var(--text-muted)}
.cnote{margin-top:var(--space-5);font-size:13px;color:var(--text-muted)}
@media (max-width:600px){.ctable{font-size:14px}.ctable th{width:25%;font-size:10px;letter-spacing:.06em}}

/* ===== 5. Hero: a big live phone on the gold lane ===== */
.hero{position:relative;min-height:100svh;display:grid;overflow:hidden;padding-top:76px}
.hero::after{content:"";position:absolute;inset:auto -10% -34% 32%;height:84%;background:radial-gradient(closest-side,rgb(201 162 74/.24),transparent);pointer-events:none}
[dir="rtl"] .hero::after{inset:auto 32% -34% -10%}
.hgrid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(16px,3vw,56px);align-items:end;min-height:calc(100svh - 76px)}
.hero-copy{align-self:center;padding-block:clamp(16px,4vh,48px) clamp(40px,8vh,96px)}
.hero-copy .mega{margin-block:var(--space-5) var(--space-5)}
.hero-copy .lead{max-width:34ch}
.ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:var(--space-6);font-size:14px;color:var(--text-muted)}
.trust li{display:flex;align-items:center;gap:8px}
.trust svg{width:15px;height:15px;flex:none;stroke:var(--gold);fill:none;stroke-width:2.2}
.pstage{position:relative;align-self:stretch;display:grid;justify-items:center;align-items:end;perspective:1400px;min-height:420px}
.lane{position:absolute;inset:0 auto 0 50%;width:10px;margin-left:-5px;background:repeating-linear-gradient(180deg,var(--gold) 0 52px,transparent 52px 104px);animation:laneflow 1s linear infinite;-webkit-mask:linear-gradient(180deg,transparent,#000 24%,#000 70%,transparent);mask:linear-gradient(180deg,transparent,#000 24%,#000 70%,transparent);opacity:.85}
.pcap{position:absolute;inset-inline:0;bottom:10px;text-align:center;z-index:3;pointer-events:none}
.pcap .ex{background:rgb(10 10 12/.7);border-color:#3a3a42;color:#9A978F}
.phone{--w:clamp(240px,24vw,340px);position:relative;z-index:1;width:var(--w);aspect-ratio:9/18.6;margin-bottom:-12%;border-radius:calc(var(--w)*.16);padding:calc(var(--w)*.028);background:linear-gradient(145deg,#44444c,#0b0b0d 38%,#222228);box-shadow:0 60px 110px -24px rgb(0 0 0/.8),0 0 0 1px #000,0 0 90px -20px rgb(201 162 74/.35);transition:transform 300ms var(--ease-drive)}
.js .phone{translate:0 36%;opacity:0}
.js.ready .phone{translate:0 0;opacity:1;transition:translate 900ms var(--ease-drive) 120ms,opacity 500ms 120ms,transform 300ms var(--ease-drive)}
.scr{position:relative;height:100%;border-radius:calc(var(--w)*.135);overflow:hidden;background:linear-gradient(180deg,#19191d,#0d0d10);font-size:max(11px,calc(var(--w)/24));color:#F4F2EC;display:flex;flex-direction:column;gap:1.2em;padding:3.4em 1.3em 0}
.scr::before{content:"";position:absolute;top:2.3%;left:50%;width:30%;height:3.4%;translate:-50% 0;border-radius:99px;background:#000;z-index:6}
.scr .hd small{display:block;color:#9A978F}
.scr .hd b{display:block;font:800 2.4em/1.05 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:-.03em}
[dir="rtl"] .scr .hd b{letter-spacing:0}
.scr .sum{margin-top:15.6em;border-top:1px solid #2A2A30;padding-top:1em}
.scr .sum small{color:#9A978F}
.scr .sum b{display:block;font:700 2.7em/1.05 var(--font-ui);font-variant-numeric:tabular-nums;letter-spacing:-.03em;direction:ltr;text-align:start}
.dayr{display:grid}
.dayr div{display:flex;gap:.9em;align-items:center;padding:.85em 0;border-top:1px solid #222227}
.dayr i{font-style:normal;color:var(--gold);font-weight:600;min-width:3.6em;direction:ltr}
.dayr em{margin-inline-start:auto;font-style:normal;color:#9A978F}
.dayr span,.dayr em{unicode-bidi:isolate}.dayr em{direction:ltr}
.dayr .free{color:#8A877F;border-top-style:dashed}
.feed{position:absolute;inset:8.4em 1em auto;z-index:4;height:0}
.nt{position:absolute;inset-inline:0;top:0;display:flex;gap:.85em;align-items:center;padding:.85em;border-radius:1.25em;background:rgb(36 36 42/.95);border:1px solid #3a3a42;box-shadow:0 .8em 1.6em rgb(0 0 0/.45);transition:transform 640ms var(--ease-snap),opacity 400ms}
.nt .ni{flex:none;width:2.8em;height:2.8em;border-radius:.85em;background:rgb(201 162 74/.16);display:grid;place-items:center;color:var(--gold);font-size:1em}
.nt .ni svg{width:1.45em;height:1.45em}
.nx b{display:block;font-size:1.05em;line-height:1.2}
.nx small{display:block;color:#B9B6AD;font-size:.9em;line-height:1.3}
.nt[data-s="x"]{transition:none;transform:translateY(-150%) scale(.95);opacity:0}
.nt[data-s="0"]{z-index:3}
.nt[data-s="1"]{z-index:2;transform:translateY(calc(100% + .7em)) scale(.95);opacity:.7}
.nt[data-s="2"]{z-index:1;transform:translateY(calc(200% + 1.4em)) scale(.9);opacity:.3}
@media (max-width:900px){
  .hgrid{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding-bottom:var(--space-6)}
  .pstage{min-height:clamp(380px,100vw,520px)}
  .phone{--w:clamp(230px,56vw,300px)}
}
@media (max-width:520px){.ctas .btn{flex:1 1 100%}}

/* ===== 6. Dial: six jobs, one dial (the console is one object, not a grid of cards) ===== */
.dial-s{padding-block:var(--space-9) var(--section)}
.console{--bg:var(--night);--surface-1:var(--night-1);--surface-2:var(--night-2);--text:#F4F2EC;--text-2:#C6C3BA;--text-muted:#9A978F;--border:var(--night-line);--border-strong:#6A6A72;--gold-text:#D6B460;--focus:#D6B460;--bd:clamp(40px,3.6vw,52px);position:relative;border-radius:32px;background:radial-gradient(120% 90% at 18% 0%,#1d1d22,#0b0b0d 64%);color:var(--text);border:1px solid var(--night-line);box-shadow:0 70px 130px -50px rgb(0 0 0/.6),inset 0 1px 0 rgb(255 255 255/.06);padding:clamp(20px,3.4vw,52px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center;overflow:hidden;color-scheme:dark}
.dialwrap{position:relative;width:100%;max-width:470px;aspect-ratio:1;margin-inline:auto}
.dsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dsvg circle{fill:none}
.dsvg .base{stroke:#2A2A30;stroke-width:.5}
.dsvg .pg{stroke:var(--gold);stroke-width:1.1;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:50% 50%;filter:drop-shadow(0 0 1.5px rgb(201 162 74/.7))}
.dsvg .pg.run{animation:dprog var(--dwell,4400ms) linear forwards}
.paused .dsvg .pg.run{animation-play-state:paused}
.knob{position:absolute;inset:29%;border-radius:50%;transform:rotate(var(--ka,0deg));transition:transform 700ms var(--ease-snap);background:repeating-conic-gradient(from 0deg,#3a3a42 0 2.4deg,#131317 2.4deg 4.8deg);box-shadow:0 24px 44px rgb(0 0 0/.65),inset 0 0 0 1px #3a3a42}
.knob::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 34% 24%,#2f2f36,#0e0e11 72%);box-shadow:inset 0 2px 6px rgb(255 255 255/.09),0 0 0 1px #000}
.knob::after{content:"";position:absolute;top:2.5%;left:50%;width:4.5%;height:13%;margin-left:-2.25%;border-radius:3px;background:var(--gold);box-shadow:0 0 14px rgb(201 162 74/.7)}
.kn{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:800 clamp(26px,3.4vw,48px)/1 "Archivo",system-ui,sans-serif;font-stretch:125%;letter-spacing:-.04em;direction:ltr;pointer-events:none;color:var(--gold)}
.kn small{display:block;margin-top:8px;font:600 11px/1 var(--font-ui);letter-spacing:.16em;color:#9A978F}
.dbtns{display:contents}
.dbtn{--a:calc(var(--i)*60deg - 90deg);position:absolute;left:calc(50% + cos(var(--a))*31%);top:calc(50% + sin(var(--a))*31%);translate:-50% -50%;width:0;height:0;padding:0;border:0;background:none;color:#9A978F;cursor:pointer;outline:none;font:inherit}
.dbtn .bd{position:absolute;left:50%;top:50%;translate:-50% -50%;width:var(--bd);height:var(--bd);border-radius:50%;display:grid;place-items:center;background:#17171b;border:1px solid #34343b;color:#C6C3BA;font-size:calc(var(--bd)*.45);transition:background-color 200ms,border-color 200ms,color 200ms,box-shadow 300ms,transform 400ms var(--ease-snap)}
.dbtn:hover .bd{border-color:#8E8B82;color:#fff}
.dbtn:focus-visible .bd{outline:2px solid var(--focus);outline-offset:3px}
.dbtn .lb{position:absolute;left:50%;top:50%;white-space:nowrap;font:600 14px/1.2 var(--font-ui);color:#9A978F;transition:color 200ms;translate:calc(-50% + cos(var(--a))*(var(--bd)/2 + 14px + 50%)) calc(-50% + sin(var(--a))*(var(--bd)/2 + 14px + 50%))}
.dbtn[aria-selected="true"] .bd{background:var(--gold);border-color:var(--gold);color:#141414;box-shadow:0 0 0 6px rgb(201 162 74/.16),0 0 28px rgb(201 162 74/.5);transform:scale(1.12)}
.dbtn[aria-selected="true"] .lb{color:#F4F2EC}
.disp{position:relative;display:grid;align-content:center}
.sc{grid-area:1/1;visibility:hidden;opacity:0;display:grid;align-content:start;gap:var(--space-4)}
.sc.on{visibility:visible;opacity:1;animation:scin 520ms var(--ease-drive)}
.sc-n{display:flex;align-items:center;gap:12px;font:600 12px/1 var(--font-ui);letter-spacing:.16em;color:var(--gold-text)}
.sc-n span:first-child,.rt-num b,.rt-num span{direction:ltr;unicode-bidi:isolate}
.sc-h{font:800 clamp(34px,4.6vw,68px)/.98 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:-.035em;text-wrap:balance}
[dir="rtl"] .sc-h{letter-spacing:0;line-height:1.2}
.sc-p{font-size:clamp(17px,1.5vw,21px);color:#C6C3BA;max-width:38ch}
.sc-v{margin-top:var(--space-4);min-height:clamp(210px,19vw,250px);position:relative}
.dpause{position:absolute;top:18px;inset-inline-end:18px;z-index:5;border-color:#34343b;background:rgb(10 10 12/.6);color:#F4F2EC}
.dalso{margin-top:var(--space-6);text-align:center;font-size:15px;color:var(--text-muted)}
.dalso b{color:var(--text-2);font-weight:600}
/* scene visuals (play = replay the little story each time a position is selected) */
.v0 .mw{display:flex;gap:4px;align-items:center;height:80px}
.v0 .mw i{flex:1;max-width:8px;height:100%;border-radius:4px;background:var(--gold);transform:scaleY(var(--h,.5))}
.sc.play .v0 .mw i{animation:eq 420ms var(--ease-shift) 6 alternate;animation-delay:calc(var(--i)*-37ms)}
.v0 q{display:block;margin-top:20px;font:500 clamp(20px,2vw,28px)/1.3 var(--font-ui);quotes:none;color:#F4F2EC}
.vrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;align-items:center}
.sc.play .v0 .tag{animation:pop 380ms var(--ease-drive) 1500ms both}
.v1 .br{border:1px solid #34343b;border-radius:16px;overflow:hidden;background:#141417;max-width:560px;position:relative}
.v1 .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#1c1c20;font-size:12px;color:#9A978F;direction:ltr}
.v1 .bar i{width:8px;height:8px;border-radius:50%;background:#4a4a52}
.v1 .bar span{margin-inline-start:8px}
.v1 .pgx{padding:22px 22px 74px;display:grid;gap:8px;justify-items:start}
.v1 .pgx b{font:800 clamp(22px,2.4vw,34px)/1.05 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:-.02em}
.stars{color:var(--gold);letter-spacing:3px;font-size:15px;direction:ltr;unicode-bidi:isolate}
.v1 .bk{margin-top:6px;background:var(--gold);color:#141414;padding:11px 18px;border-radius:9px;font-weight:600;font-size:15px}
.v1 .nt2{position:absolute;inset-inline:14px;bottom:14px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#F4F2EC;color:#141414;font-size:15px;font-weight:600}
.v1 .nt2::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold);flex:none}
.sc.play .v1 .nt2{animation:pop 420ms var(--ease-snap) 600ms both}
.v2 .lbl{font-size:15px;color:#9A978F}
.v2 .big{font:700 clamp(60px,7vw,104px)/1 var(--font-ui);font-variant-numeric:tabular-nums;letter-spacing:-.04em;direction:ltr;unicode-bidi:isolate;text-align:start}
.v2 ul{display:grid;gap:10px;margin-top:18px;font-size:17px}
.v2 li{display:flex;gap:10px;align-items:center}
.v2 li svg{width:18px;height:18px;stroke:var(--success);fill:none;stroke-width:2.4;flex:none}
.sc.play .v2 li{animation:pop 320ms var(--ease-drive) both}
.sc.play .v2 li:nth-child(1){animation-delay:800ms}.sc.play .v2 li:nth-child(2){animation-delay:980ms}
.v3{display:flex;align-items:center;gap:clamp(18px,3vw,36px)}
.v3 svg{width:clamp(120px,12vw,168px);flex:none;transform:rotate(-90deg)}
.v3 .bgc{fill:none;stroke:#2A2A30;stroke-width:7}
.v3 .fg{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round;stroke-dasharray:.86 1}
.sc.play .v3 .fg{animation:fill 1000ms var(--ease-drive) both}
.v3 b{display:block;font:700 clamp(48px,5.6vw,80px)/1 var(--font-ui);font-variant-numeric:tabular-nums;letter-spacing:-.04em;direction:ltr;text-align:start}
.v3 span{display:block;font-size:17px;color:#C6C3BA}
.v3 .sm{margin-top:10px;font-size:15px;color:#9A978F}
.v4{display:grid;gap:12px;max-width:520px}
.v4 .bub{max-width:86%;padding:12px 16px;border-radius:18px 18px 18px 4px;background:#222227;font-size:16px}
[dir="rtl"] .v4 .bub{border-radius:18px 18px 4px 18px}
.v4 .draft{border:1px dashed rgb(201 162 74/.75);border-radius:16px;padding:16px;display:grid;gap:12px;background:#141417;font-size:17px}
.sc.play .v4 .draft{animation:wipe 460ms var(--ease-drive) 600ms both}
.badge{justify-self:start;font-size:12px;font-weight:600;color:var(--gold-text);border:1px solid rgb(201 162 74/.6);border-radius:var(--radius-full);padding:3px 10px}
.mini{display:flex;gap:8px}
.mini span{font-size:14px;font-weight:600;padding:9px 14px;border-radius:8px;border:1px solid #6A6A72}
.mini .ok{background:var(--gold);color:#141414;border-color:var(--gold)}
.sc.play .v4 .mini .ok{animation:ping 1000ms var(--ease-drive) 1400ms}
.v4 .cap{font-size:14px;color:#9A978F}
.v5{display:grid;grid-template-columns:1fr minmax(48px,.6fr) 1fr;align-items:center;gap:14px}
.node{display:grid;gap:4px;padding:16px 18px;border-radius:16px;border:1px solid #34343b;background:#141417;font-size:15px;line-height:1.35}
.node b{font-size:19px}
.node.ok{border-color:rgb(82 196 141/.55)}
.node.ok em{font-style:normal;color:var(--success);font-weight:600}
.wire{position:relative;height:2px;background:repeating-linear-gradient(90deg,#6A6A72 0 7px,transparent 7px 12px)}
.wire i{position:absolute;inset:0}
.wire i::after{content:"";position:absolute;top:-5px;inset-inline-start:0;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px rgb(201 162 74/.7)}
.sc.play .wire i{animation:travel 1000ms var(--ease-shift) 250ms both}
[dir="rtl"] .wire i{--dirn:-1}
.sc.play .v5 .node.ok{animation:pop 400ms var(--ease-drive) 1100ms both}

/* ===== 7. Route: one giant word per stop, one road, one car (scroll drives) ===== */
.scene{position:relative;height:calc(var(--len,2) * 100svh)}
.stage{position:sticky;top:0;height:100svh;overflow:hidden}
.route .stage{display:grid;grid-template-rows:auto 1fr auto;padding-top:clamp(84px,11vh,112px);padding-bottom:clamp(20px,4vh,44px)}
.route header{display:grid;gap:var(--space-3)}
.route .h2{font-size:clamp(26px,3vw,46px)}
.rt-main{display:grid;align-content:center;gap:clamp(12px,2.4vh,28px)}
.rt-num{font:600 clamp(14px,1.4vw,19px)/1 var(--font-ui);letter-spacing:.14em;color:var(--gold-text);display:flex;gap:10px;align-items:center}
.rt-num span{color:var(--text-muted)}
.rt-word{font:800 clamp(52px,11.6vw,176px)/.95 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:-.045em;overflow:hidden;padding-block:.06em;margin-block:-.06em}
[dir="rtl"] .rt-word{letter-spacing:0;line-height:1.2}
.rt-word span{display:inline-block}
.rt-word.swap span{animation:rise 440ms var(--ease-drive)}
.rt-info{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px}
.rt-info p{font-size:clamp(18px,1.8vw,26px);line-height:1.35;max-width:28ch;color:var(--text-2)}
.screen{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;border:1px solid var(--border);background:var(--surface-1);box-shadow:var(--e2);font-size:clamp(15px,1.3vw,18px);font-weight:500}
.screen svg{width:22px;height:22px;flex:none;stroke:var(--gold-text);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.rt-info .screen.swap{animation:pop 420ms var(--ease-drive)}
.rt-road{position:relative;height:112px}
.rt-road svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
[dir="rtl"] .rt-road svg{transform:scaleX(-1)}
.rt-road .surface{stroke:var(--road);stroke-linecap:round;stroke-width:52}
.rt-road .centre{stroke:var(--road-line);stroke-width:1.5;stroke-dasharray:10 12}
.rt-road .drive{stroke:var(--gold);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--gold-glow))}
.rt-road .stop{fill:var(--bg);stroke:var(--border-strong);stroke-width:2;transition:fill 240ms,stroke 240ms}
.rt-road .stop.past{fill:var(--gold);stroke:var(--gold)}
.rt-road .car .body{fill:var(--gold)}
.rt-road .car .cab{fill:#141414;opacity:.75}
.rt-road .car .lt{fill:#FAFAF7}
.rt-road .car .wh{fill:#141414}
.rt-list{display:none}
html:not(.js) .scene,.rm .scene{height:auto}
html:not(.js) .stage,.rm .stage{position:relative;height:auto;display:block}
html:not(.js) .rt-main,html:not(.js) .rt-road,.rm .rt-main,.rm .rt-road{display:none}
html:not(.js) .rt-list,.rm .rt-list{display:grid;gap:0;margin-top:var(--space-7)}
.rt-list li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-5) var(--space-7);align-items:center;padding-block:var(--space-6);border-top:1px solid var(--border)}
.rt-list h3{font:800 clamp(40px,6vw,88px)/.95 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:-.04em;display:flex;gap:16px;align-items:baseline}
[dir="rtl"] .rt-list h3{letter-spacing:0;line-height:1.2}
.rt-list h3 .num{font:600 14px/1 var(--font-ui);color:var(--gold-text);letter-spacing:.1em}
.rt-list p{font-size:20px;color:var(--text-2);margin-bottom:12px}
@media (max-width:760px){.rt-list li{grid-template-columns:1fr}}
.js:not(.rm) .rt-list{display:grid;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:760px){.rt-info p{max-width:none}.route .h2{font-size:24px}}

/* ===== 8. Lesson mode: the whole windscreen, wiped into view ===== */
.lesson{padding-block:var(--section);position:relative;overflow:hidden}
.lh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-5) var(--space-7);align-items:end;margin-bottom:var(--space-7)}
.lh .h2{font-size:var(--fs-title)}
.lh .copy{display:grid;gap:var(--space-4)}
.screenw{aspect-ratio:16/8.2;min-height:400px;border-radius:32px}
.screenw .fault{bottom:clamp(86px,10vw,120px);inset-inline:auto;inset-inline-start:50%;translate:-50% 0;width:min(86%,460px);font-size:clamp(14px,1.4vw,18px);padding:14px 16px}
[dir="rtl"] .screenw .fault{translate:50% 0}
.screenw .say{font-size:clamp(18px,2vw,28px)}
.screenw .voice{top:40%;width:min(86%,720px)}
.screenw .sky{background:radial-gradient(60% 140% at 50% 100%,rgb(201 162 74/.34),transparent 70%)}
.screenw .side{opacity:.75}.screenw .stripe{opacity:.95}
.screenw .plane{background:linear-gradient(90deg,transparent 14%,#9a9aa4 14% 15.2%,transparent 15.2% 84.8%,#9a9aa4 84.8% 86%,transparent 86%),linear-gradient(90deg,transparent 15.2%,#18181c 15.2% 84.8%,transparent 84.8%)}
.gauges{position:absolute;inset-inline:0;bottom:0;display:flex;justify-content:center;gap:clamp(10px,2.6vw,36px);padding:34px 14px 16px;background:linear-gradient(0deg,rgb(8 8 10/.95),rgb(8 8 10/0))}
.gauge{--v:.02;display:grid;justify-items:center;gap:6px;font-size:12px;color:#9A978F;text-align:center}
.gauge .rg{position:relative;width:clamp(42px,5vw,62px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--v)*360deg),#2A2A30 0);transition:--v 700ms var(--ease-drive)}
.gauge .rg::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#0d0d10}
.gauge .rg b{position:relative;font:700 clamp(15px,1.6vw,20px)/1 var(--font-ui);color:#F4F2EC;font-variant-numeric:tabular-nums}
.gauge.hit .rg b{color:var(--gold)}
@property --v{syntax:"<number>";inherits:false;initial-value:0}
@media (max-width:900px){.lh{grid-template-columns:1fr}.screenw{aspect-ratio:auto;min-height:480px}.gauges{flex-wrap:wrap;gap:10px 14px}.screenw .voice{top:34%}}
@media (max-width:520px){.hudbar .pill:nth-child(2) span{display:none}.gauge span{display:none}}

/* ===== 9b. Compare: bigger rows ===== */
.ctable{font-size:clamp(16px,1.6vw,21px)}
.ctable td{height:76px}.ln-cell{height:76px}
.ctable th{font-size:clamp(12px,1.2vw,15px)}
.dotn{width:18px;height:18px}
.barrier{top:16px;height:14px}.barrier-l{top:38px;font-size:13px}

/* ===== 9b. Voices (sample data, D-089/D-094): schools drive past on a road, one big quote at a time. Everything tagged .smp is placeholder content ===== */
.voices{padding-block:var(--section);border-top:1px solid var(--border);overflow:hidden}
.voices .sec-h{margin-bottom:var(--space-5)}
.voices .sec-h .smp{justify-self:start}
.vctl{display:flex;justify-content:flex-end;margin-bottom:var(--space-4)}
.vroad{position:relative;overflow:hidden;margin-block:0 var(--space-8);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.vroad::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:repeating-linear-gradient(90deg,var(--road-line) 0 28px,transparent 28px 56px);opacity:.7}
.vtrack{display:flex;width:max-content;padding-block:10px 26px;animation:vrun 52s linear infinite}
[dir="rtl"] .vtrack{animation-name:vrunr}
@keyframes vrun{to{transform:translateX(-50%)}}
@keyframes vrunr{to{transform:translateX(50%)}}
.vset{display:flex}
.vroad:hover .vtrack,.voices.paused .vtrack{animation-play-state:paused}
.vsign{position:relative;flex:none;display:flex;align-items:center;gap:14px;margin-inline-end:clamp(32px,5vw,72px);padding-block:16px;padding-inline:16px 28px;border:1px solid var(--border);background:var(--surface-1);border-radius:var(--radius-md);box-shadow:var(--e2)}
.vsign::after{content:"";position:absolute;bottom:-9px;inset-inline:34%;height:9px;border-radius:0 0 4px 4px;background:var(--border-strong)}
.vsign .vl{width:36px;height:36px;display:grid;place-items:center;border-radius:6px;background:var(--gold);color:var(--on-gold);font:800 20px/1 var(--font-display);direction:ltr}
.vsign b{display:block;font:800 clamp(18px,1.8vw,24px)/1.1 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:-.02em;white-space:nowrap}
[dir="rtl"] .vsign b{letter-spacing:0}
.vsign small{display:block;color:var(--text-muted);font-size:13px;margin-top:2px;white-space:nowrap}
.vq{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,80px);align-items:start}
.vlist{display:grid;border-top:1px solid var(--border)}
.vb{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;text-align:start;min-height:84px;padding:14px 4px;background:none;border:0;border-bottom:1px solid var(--border);cursor:pointer;color:var(--text-2)}
.vb:hover .av{border-color:var(--text)}
.vb .av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--border-strong);font:700 16px/1 var(--font-ui);direction:ltr;transition:background-color var(--dur-base),border-color var(--dur-base),color var(--dur-base)}
.vb b{display:block;font:700 18px/1.2 var(--font-ui);color:var(--text)}
.vb small{display:block;color:var(--text-muted);font-size:14px;margin-top:2px}
.vb[aria-selected="true"] .av{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.vb i{position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left}
[dir="rtl"] .vb i{transform-origin:right}
.vb[aria-selected="true"] i{transform:scaleX(1)}
.vq.run .vb[aria-selected="true"] i{animation:vprog var(--vd,6.5s) linear forwards}
@keyframes vprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.vq.paused .vb i,.voices.paused .vb i{animation-play-state:paused}
.qp{margin:0}
.js .qp{display:none}.js .qp.on{display:block;animation:wipe 520ms var(--ease-drive)}
.qmark{display:block;height:.42em;font:800 clamp(90px,12vw,180px)/.8 var(--font-display);color:var(--gold);direction:ltr}
.qp blockquote{margin:0;font:700 clamp(24px,3.2vw,46px)/1.18 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:-.025em;text-wrap:balance}
[dir="rtl"] .qp blockquote{letter-spacing:0;line-height:1.45}
.qp figcaption{margin-top:24px;display:grid;gap:12px;justify-items:start;color:var(--text-2);font-size:var(--fs-lead)}
.qp figcaption b{color:var(--text)}
html:not(.js) .vlist,html:not(.js) .vctl,.rm .vctl{display:none}
html:not(.js) .qp{padding-block:var(--space-6);border-top:1px solid var(--border)}
.vnums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3) clamp(16px,3vw,48px);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border)}
.vnums .smp{grid-column:1/-1;margin-bottom:var(--space-3)}
.vnums b{display:block;font:800 clamp(40px,5.4vw,80px)/1 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
[dir="rtl"] .vnums b{letter-spacing:0}
.vnums span.u{display:block;margin-top:6px;color:var(--text-2);font-size:clamp(15px,1.4vw,19px)}
.rm .vtrack,html:not(.js) .vtrack{animation:none!important;width:auto}
.rm .vset+.vset,html:not(.js) .vset+.vset{display:none}
.rm .vset,html:not(.js) .vset{flex-wrap:wrap;row-gap:30px}
.rm .vroad,html:not(.js) .vroad{-webkit-mask:none;mask:none}
@media (max-width:900px){.vq{grid-template-columns:1fr}.vlist{grid-template-columns:1fr 1fr}.vb:nth-child(odd){border-inline-end:1px solid var(--border);padding-inline-end:10px}.vb small{display:none}.vb{min-height:72px;padding-inline-start:10px}}
@media (max-width:600px){.vb .av{width:40px;height:40px;font-size:14px}.vb b{font-size:16px}.vnums{grid-template-columns:1fr}.vnums>div{display:flex;align-items:baseline;gap:16px}.vnums b{font-size:44px}}
/* ===== 10. Join: the gate and three giant steps; FAQ on its own ===== */
.join{padding-block:var(--section);border-top:1px solid var(--border)}
.jrow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.gate{display:block;width:min(100%,420px);margin-inline:auto;color:var(--border-strong)}
.gate line{stroke:currentColor;stroke-width:3;stroke-linecap:round}
.gate text{font:700 8px var(--font-ui);fill:var(--text-muted);text-anchor:middle}
.gate .knob2{fill:var(--gold);transition:transform 170ms var(--ease-shift);filter:drop-shadow(0 0 5px var(--gold-glow))}
.gears{display:grid;counter-reset:g}
.gears li{display:grid;grid-template-columns:clamp(72px,9vw,128px) 1fr;gap:clamp(14px,2vw,28px);padding-block:clamp(18px,2.6vw,34px);border-top:1px solid var(--border);align-items:center}
.gears li:last-child{border-bottom:1px solid var(--border)}
.gears .g{font:800 clamp(56px,7vw,108px)/1 var(--font-display);font-stretch:var(--display-stretch);color:transparent;-webkit-text-stroke:1.5px var(--border-strong);transition:color 200ms,-webkit-text-stroke-color 200ms;direction:ltr}
.gears li.on .g{color:var(--gold);-webkit-text-stroke-color:var(--gold)}
.gears h3{font:800 clamp(26px,3vw,44px)/1.05 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:-.03em}
[dir="rtl"] .gears h3{letter-spacing:0;line-height:1.25}
.gears p{font-size:clamp(16px,1.4vw,20px);color:var(--text-2);margin-top:8px;max-width:42ch}
.faq-s{padding-block:var(--section);border-top:1px solid var(--border)}
.faq-s .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-s .sec-h{margin-bottom:0}
.faq details{border-top:1px solid var(--border)}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:84px;padding-block:16px;cursor:pointer;font-weight:600;font-size:clamp(19px,2vw,27px);line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;width:20px;height:20px;flex:none}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;inset:9px 0 auto;height:2px;background:var(--gold-text);transition:transform 240ms var(--ease-drive)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details>div{padding-bottom:24px;color:var(--text-2);font-size:clamp(17px,1.5vw,20px);max-width:56ch}
@media (max-width:900px){.console{grid-template-columns:1fr}.jrow,.faq-s .wrap{grid-template-columns:1fr}.gate{width:min(60%,260px)}}
/* ===== 11. Finale: lanes converge on one form ===== */
.finale{position:relative;min-height:92svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding-block:var(--section)}
.finale svg.vanish{position:absolute;inset:0;width:100%;height:100%}
.vanish line{stroke:var(--night-line);stroke-width:1.5}
.vanish line.c{stroke:var(--gold);stroke-width:3;stroke-dasharray:22 26;animation:toward 1.2s linear infinite;opacity:.8}
.js .vanish line:not(.c){stroke-dasharray:1;stroke-dashoffset:1}
.finale.in .vanish line:not(.c){stroke-dashoffset:0;transition:stroke-dashoffset 700ms var(--ease-drive)}
@keyframes toward{to{stroke-dashoffset:48}}
.finale .inner{position:relative;z-index:1;display:grid;justify-items:center;gap:var(--space-5);padding-inline:var(--margin);width:100%;max-width:var(--max)}
.finale .mega{width:100%}
.finale .lead{margin-inline:auto}
.js .finale .rv{opacity:0;transform:translateY(16px)}
.finale.in .rv{opacity:1;transform:none;transition:opacity var(--dur-reveal) var(--ease-drive),transform var(--dur-reveal) var(--ease-drive)}
.finale.in .rv:nth-child(2){transition-delay:80ms}.finale.in .rv:nth-child(3){transition-delay:160ms}
.start{width:min(620px,100%);display:grid;gap:8px;text-align:start;background:rgb(20 20 23/.8);border:1px solid var(--night-line);border-radius:var(--radius-md);padding:18px;backdrop-filter:blur(6px)}
.start label{font-weight:600;font-size:14px}
.frow{display:flex;gap:10px}
.field{flex:1;min-width:0;height:54px;padding:0 14px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--night);color:var(--text);font:400 16px var(--font-ui);text-align:left}
.field:hover{border-color:#8E8B82}
.field:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.field[aria-invalid="true"]{border-color:var(--danger)}
.hint{font-size:13px;color:var(--text-muted)}
.err[hidden]{display:none}
.err{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--danger);font-weight:500}
.err svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.magnet{transition:transform 400ms var(--ease-drive)}
.fobjs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fchip{position:absolute;inset-inline-start:var(--l);top:var(--t);display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:14px;background:rgb(30 30 36/.92);border:1px solid #34343b;color:#F4F2EC;font-size:15px;font-weight:600;box-shadow:0 16px 34px rgb(0 0 0/.45);rotate:var(--r);opacity:0;white-space:nowrap}
[dir="rtl"] .fchip{padding:10px 10px 10px 16px}
.finale.in .fchip{opacity:1;animation:bob 5.2s ease-in-out infinite;animation-delay:var(--d);transition:opacity 700ms var(--ease-drive)}
@keyframes bob{50%{transform:translateY(-16px)}}
.fchip i{width:34px;height:34px;border-radius:10px;background:rgb(201 162 74/.16);display:grid;place-items:center;color:var(--gold)}
.fchip svg{width:19px;height:19px}
@media (max-width:1100px){.fchip{display:none}}
.rm .fchip{opacity:1;animation:none}

@media (max-width:560px){.frow{flex-direction:column}.frow .btn{width:100%}}

/* dial on small screens: the six positions become a scrolling row of big pills, no knob */
.dbar{display:none;height:3px;border-radius:2px;background:#2A2A30;overflow:hidden}
.dbar i{display:block;height:100%;background:var(--gold);transform-origin:0 0;transform:scaleX(0)}
[dir="rtl"] .dbar i{transform-origin:100% 0}
.dbar i.run{animation:dbar var(--dwell,4400ms) linear forwards}
.paused .dbar i.run{animation-play-state:paused}
@keyframes dbar{to{transform:scaleX(1)}}
@media (max-width:1000px){
  .console{grid-template-columns:1fr;gap:var(--space-5)}
  .dialwrap{aspect-ratio:auto;max-width:none;display:grid;gap:12px}
  .dsvg,.knob,.kn{display:none}
  .dbar{display:block}
  .dbtns{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;margin-inline:-2px;scrollbar-width:none}
  .dbtns::-webkit-scrollbar{display:none}
  .dbtn{position:static;translate:none;width:auto;height:auto;flex:none;display:inline-flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border:1px solid #34343b;border-radius:999px;color:#C6C3BA}
  [dir="rtl"] .dbtn{padding:6px 6px 6px 18px}
  .dbtn .bd{position:static;translate:none;width:40px;height:40px;font-size:18px}
  .dbtn .lb{position:static;translate:none;font-size:16px;color:inherit}
  .dbtn[aria-selected="true"]{border-color:var(--gold);color:#F4F2EC}
  .dbtn[aria-selected="true"] .bd{transform:none;box-shadow:none}
  .dpause{position:static;justify-self:end}
  .disp{order:2}.dpause{order:3}
}
html:not(.js) .console{grid-template-columns:1fr}
html:not(.js) .dialwrap,html:not(.js) .dpause{display:none}
html:not(.js) .disp{gap:56px}
html:not(.js) .sc{grid-area:auto;visibility:visible;opacity:1}

/* values the prototype set inline */
.route{--len:2.6}
.dbtn:nth-child(1){--i:0}.dbtn:nth-child(2){--i:1}.dbtn:nth-child(3){--i:2}.dbtn:nth-child(4){--i:3}.dbtn:nth-child(5){--i:4}.dbtn:nth-child(6){--i:5}
.gauge{--v:0}.gauge.hit{--v:.17}
.gate .knob2{transform:translate(60px,60px)}

/* ===== Reduced motion: static final states ===== */
.rm .hero .mega .ln>span,.rm .hero .fade,.rm .finale .rv,.rm .rv-h{transform:none!important;opacity:1!important;clip-path:none!important}
.rm .phone{translate:none;opacity:1}
.rm .sc.on{animation:none}
.rm .rt-list li{padding-block:var(--space-5)}