/* MyDS marketing about page (S04, M2 T13c): rear-view mirror, scroll-lit sentence, lane gantry with the car, sample story / odometers / people, number plate.
   Ported from the frozen prototype F01-about; loaded after www.css (tokens, nav, footer, buttons, sample tag live there). No inline styles are needed. */
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.h1{font:800 clamp(52px,7.2vw,124px)/.9 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:var(--track-display);text-wrap:balance;outline:0}
[dir="rtl"] .h1{line-height:1.15}
.h1 .ln{display:block}
.h1 em{font-style:normal;color:var(--gold)}
.h2.big{font-size:clamp(36px,5.2vw,84px);outline:0}
.night .h2 em{color:var(--gold)}
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}
.js .rv{opacity:0;transform:translateY(24px)}
.js .rv.in{opacity:1;transform:none;transition:opacity var(--dur-reveal) var(--ease-drive),transform var(--dur-reveal) var(--ease-drive)}
.sec-h.c .smp{justify-self:center}

/* 1. hero: the rear-view mirror, admin shrinks into the distance */
.ab{position:relative;display:flex;align-items:center;min-height:100svh;padding:clamp(96px,14vh,140px) 0 clamp(56px,8vw,112px);background:radial-gradient(55% 50% at 90% 12%,rgb(201 162 74/.16),transparent),radial-gradient(40% 40% at 0% 100%,rgb(201 162 74/.08),transparent),var(--bg)}
.agrid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(32px,6vw,96px);align-items:center;width:100%}
.acopy{display:grid;gap:var(--space-5);justify-items:start}
.acopy .lead{max-width:44ch}
.acopy .row{margin-top:var(--space-3)}
.mirw{position:relative;width:100%;max-width:620px;margin-inline:auto;perspective:1400px;display:grid;gap:var(--space-5)}
.mir{--rx:0deg;--ry:0deg;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform 400ms var(--ease-drive);direction:ltr}
.js .mir{animation:deal 1s var(--ease-drive) .1s backwards}
@keyframes deal{from{opacity:0;transform:translateY(-50px) rotate(3deg)}}
.stalk{width:56px;height:72px;margin:0 auto -8px;background:linear-gradient(90deg,#16161a,#3a3a42,#16161a);clip-path:polygon(14% 0,86% 0,100% 100%,0 100%)}
.frame{padding:12px;border-radius:64px;background:linear-gradient(160deg,#34343b,#101013 60%);border:1px solid #3e3e46;box-shadow:inset 0 1px 0 rgb(255 255 255/.12),0 44px 80px -32px rgb(0 0 0/.85),0 0 100px rgb(201 162 74/.14)}
.glass{container-type:inline-size;position:relative;overflow:hidden;aspect-ratio:16/6.4;border-radius:54px;background:radial-gradient(70% 45% at 50% 40%,rgb(201 162 74/.4),transparent 70%),linear-gradient(#0b0b0e 0 38%,#2a2212 40%,#0c0c0e 41%);isolation:isolate}
.glass::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(115deg,rgb(255 255 255/.1),transparent 34%,transparent 70%,rgb(255 255 255/.05))}
.mroad,.medge{position:absolute;inset:40% 0 0 0;clip-path:polygon(45.5% 0,54.5% 0,132% 100%,-32% 100%)}
.medge{background:linear-gradient(#8E8B82,#4A4A52)}
.mroad{clip-path:polygon(46.5% 0,53.5% 0,126% 100%,-26% 100%);background:linear-gradient(#34343b,#17171b)}
.mdash{position:absolute;left:50%;top:0;width:2.4cqi;height:6cqi;margin-left:-1.2cqi;background:#F4F2EC;border-radius:.3cqi;transform-origin:50% 0;animation:mdash 1.5s cubic-bezier(.55,.1,.85,.45) infinite;animation-delay:calc(var(--k)*-.3s)}
.mdash:nth-child(1){--k:0}.mdash:nth-child(2){--k:1}.mdash:nth-child(3){--k:2}.mdash:nth-child(4){--k:3}.mdash:nth-child(5){--k:4}
@keyframes mdash{0%{transform:translateY(0) scale(.05);opacity:0}12%{opacity:1}100%{transform:translateY(24cqi) scale(1)}}
.rm .mdash{animation:none;transform:translateY(calc(var(--k)*4.4cqi)) scale(calc(.2 + var(--k)*.16))}
.rtag{position:absolute;left:50%;top:38%;z-index:3;padding:.35em .9em;border-radius:999px;background:rgb(28 28 32/.9);border:1px solid #4a4a52;color:var(--gold);font:600 clamp(11px,3.3cqi,19px)/1 var(--font-ui);white-space:nowrap;animation:recede 7.2s cubic-bezier(.25,.6,.4,1) infinite;animation-delay:calc(var(--i)*-1.2s)}
.rtag:nth-child(1){--i:0;--x:-30;--dy:22}.rtag:nth-child(2){--i:1;--x:28;--dy:20}.rtag:nth-child(3){--i:2;--x:-12;--dy:15}
.rtag:nth-child(4){--i:3;--x:14;--dy:12}.rtag:nth-child(5){--i:4;--x:-26;--dy:7}.rtag:nth-child(6){--i:5;--x:24;--dy:4}
@keyframes recede{0%{transform:translate(calc(-50% + var(--x)*1cqi),calc(-50% + var(--dy)*1cqi)) scale(1.1);opacity:0}8%{opacity:1}100%{transform:translate(-50%,-50%) scale(.05);opacity:0}}
.rm .rtag{animation:none;opacity:1;transform:translate(calc(-50% + var(--x)*1cqi),calc(-50% + var(--dy)*1cqi)) scale(.8)}
.pz{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--text-2);font-size:var(--fs-lead);text-align:center}
.pz b{color:var(--text);font-weight:600}

/* 2. the idea: words light up as you read (all lit with no script or reduced motion) */
.idea{padding:var(--section) 0;background:var(--bg)}
.stm{font:800 clamp(34px,6.4vw,108px)/1.04 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:var(--track-display);text-wrap:balance;margin:var(--space-5) 0 var(--space-7)}
[dir="rtl"] .stm{line-height:1.3}
.stm em{font-style:normal;color:var(--gold-text)}
.stm .w{display:inline-block;margin-inline-end:.22em}
.js .stm .w{opacity:.14;transition:opacity 220ms}
.js .stm .w.on{opacity:1}
.stm .w.k{color:var(--gold-text)}
.rm .stm .w{opacity:1!important;transition:none}
.idea .lead{max-width:52ch}

/* 3. the lane gantry */
.gan{position:relative;padding:var(--section) 0 clamp(64px,8vw,112px);background:radial-gradient(60% 40% at 50% 100%,rgb(201 162 74/.12),transparent),var(--bg);overflow:hidden}
.vlist{display:grid;gap:var(--space-5);max-width:980px;margin:var(--space-5) auto 0}
.vlist li{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,40px);align-items:baseline;padding-top:var(--space-5);border-top:1px solid var(--border)}
.vlist .n{font:800 clamp(36px,5vw,72px)/1 var(--font-display);font-stretch:var(--display-stretch);color:var(--gold);font-variant-numeric:tabular-nums;min-width:1.5ch}
.vlist h3{font:700 clamp(22px,2.6vw,36px)/1.1 var(--font-ui);text-wrap:balance;margin-bottom:var(--space-2)}
.vlist p{color:var(--text-2);font-size:var(--fs-lead);max-width:48ch}
.js .vlist{display:none}
.gscene{max-width:980px;margin:var(--space-7) auto 0}
.beam{position:relative;height:16px;border-radius:6px;background:linear-gradient(#4a4a52,#1c1c20);box-shadow:0 10px 24px -8px rgb(0 0 0/.7)}
.gps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1.6vw,18px);padding-inline:1.5%;margin-top:clamp(14px,3vw,28px)}
.gp{position:relative;display:grid;justify-items:center;align-content:start;gap:clamp(6px,1.4vw,12px);padding:clamp(10px,1.8vw,20px) 6px clamp(12px,2vw,22px);border-radius:10px;border:2px solid #4a4a52;background:var(--night-2);color:#F4F2EC;cursor:pointer;font:600 clamp(11px,1.5vw,17px)/1.2 var(--font-ui);text-align:center;min-height:44px;box-shadow:inset 0 0 0 4px var(--night-2),inset 0 0 0 5px rgb(244 242 236/.45);transition:border-color var(--dur-base),transform var(--dur-slow) var(--ease-snap),background-color var(--dur-base)}
.gp::before{content:"";position:absolute;top:calc(-1 * clamp(14px,3vw,28px));left:50%;width:6px;height:clamp(14px,3vw,28px);translate:-50% 0;background:linear-gradient(#4a4a52,#2a2a30)}
.gp:hover{transform:translateY(-3px)}
.gp[aria-selected="true"]{border-color:var(--gold);background:#24211a;box-shadow:inset 0 0 0 4px #24211a,inset 0 0 0 5px rgb(214 180 96/.7),0 0 36px rgb(201 162 74/.3)}
.gp .gn{font:700 11px/1 var(--font-ui);letter-spacing:.16em;color:#9A978F}
.gp[aria-selected="true"] .gn{color:var(--gold)}
.gp svg{width:clamp(22px,5vw,50px);height:auto;aspect-ratio:2/3;fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;color:#9A978F;transition:color var(--dur-base),transform var(--dur-slow) var(--ease-snap)}
.gp[aria-selected="true"] svg{color:var(--gold);transform:translateY(4px)}
.gp .gl{display:block}
@media (max-width:600px){.gp .gl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.gp{padding-inline:2px}}
.road{position:relative;margin-top:clamp(8px,2vw,20px);aspect-ratio:980/250;-webkit-mask:linear-gradient(transparent,#000 30%);mask:linear-gradient(transparent,#000 30%)}
.roadin{position:absolute;inset:0}
[dir="rtl"] .roadin{transform:scaleX(-1)}
.rsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rsvg .rd0{fill:#17171b}
.rsvg .ed{fill:none;stroke:#6A6A72;stroke-width:3;vector-effect:non-scaling-stroke}
.rsvg .ln3{fill:transparent;transition:fill var(--dur-slow)}
.rsvg .ln3.on{fill:rgb(201 162 74/.3)}
.rsvg .dv{fill:none;stroke:#F4F2EC;stroke-width:4;stroke-dasharray:16 22;vector-effect:non-scaling-stroke;animation:dvrun .7s linear infinite;opacity:.85}
@keyframes dvrun{to{stroke-dashoffset:-38}}
.rm .rsvg .dv{animation:none}
.rcar{position:absolute;top:39.6%;width:5.8%;aspect-ratio:1/2;translate:-50% 0;left:6.4%;rotate:24.5deg;isolation:isolate;will-change:left,rotate}
.rcar svg{position:relative;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 7px 8px rgb(0 0 0/.65))}
.rcar::before{content:"";position:absolute;z-index:-1;left:50%;bottom:92%;width:190%;height:130%;translate:-50% 0;background:linear-gradient(to top,rgb(255 240 190/.26),rgb(255 240 190/.07) 55%,transparent);clip-path:polygon(34% 100%,66% 100%,100% 0,0 0)}
.rcar::after{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:170%;height:70%;translate:-50% -50%;background:radial-gradient(closest-side,rgb(201 162 74/.18),transparent)}
.rcar .ind{fill:#6b4a08}
.rcar.turn-r .ind.r,.rcar.turn-l .ind.l{animation:blink .42s steps(1) infinite}
@keyframes blink{0%{fill:#FFB020}50%{fill:#6b4a08}}
[dir="rtl"] .rcar .rsign{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}
.rm .rcar .ind{animation:none!important}
.gd{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,40px);align-items:baseline;max-width:980px;margin:var(--space-7) auto 0;padding-top:var(--space-5);border-top:1px solid var(--border)}
.gd .n{font:800 clamp(48px,7vw,104px)/1 var(--font-display);font-stretch:var(--display-stretch);color:var(--gold);font-variant-numeric:tabular-nums;min-width:1.5ch}
.gd h3{font:700 clamp(26px,3.4vw,48px)/1.1 var(--font-ui);text-wrap:balance;margin-bottom:var(--space-3)}
.gd p{color:var(--text-2);font-size:var(--fs-lead);max-width:48ch}
.gd.sw{animation:swap 520ms var(--ease-drive)}
@keyframes swap{from{opacity:0;transform:translateY(12px)}}
.rm .gd.sw{animation:none}
/* no script: the tabs and the detail panel cannot work, the plain list above stands in for them */
html:not(.js) .gps,html:not(.js) .gd,html:not(.js) #pauseBtn{display:none}

/* sample-data sections (D-089): story, numbers, people. Everything tagged .smp is placeholder content */
.sty{position:relative;padding:var(--section) 0;background:var(--bg)}
.miles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,64px);position:relative;padding-top:var(--space-7)}
.miles::before{content:"";position:absolute;inset-inline:0;top:22px;height:4px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--gold) 0 24px,transparent 24px 40px)}
.mi{position:relative;display:grid;gap:var(--space-3);align-content:start}
.mi::before{content:"";position:absolute;top:calc(-1 * var(--space-7) + 12px);inset-inline-start:0;width:24px;height:24px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px var(--bg),0 0 28px var(--gold-glow)}
.mi .yr{font:800 clamp(48px,7vw,112px)/1 var(--font-display);font-stretch:var(--display-stretch);font-variant-numeric:tabular-nums;color:var(--text)}
.mi h3{font:700 clamp(20px,2vw,28px)/1.2 var(--font-ui)}
.mi p{color:var(--text-2);max-width:34ch}
.numb{position:relative;padding:var(--section) 0;background:radial-gradient(60% 50% at 50% 0,rgb(201 162 74/.1),transparent),var(--bg)}
.odos{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,5vw,80px) clamp(32px,6vw,96px);margin-top:var(--space-7)}
.on1{display:grid;justify-items:center;gap:var(--space-4)}
.odo{display:flex;gap:clamp(3px,.6vw,8px);direction:ltr;font-size:clamp(34px,6.4vw,104px)}
.odo .d{display:grid;place-items:center;width:.68em;height:1.18em;border-radius:.1em;border:1px solid #3a3a42;background:linear-gradient(#2a2a30,#0e0e11 50%,#2a2a30);font:800 1em/1 var(--font-display);font-stretch:var(--display-stretch);font-variant-numeric:tabular-nums;color:#F4F2EC;position:relative;box-shadow:inset 0 -2px 6px rgb(0 0 0/.6)}
.odo .d::after{content:"";position:absolute;inset-inline:0;top:50%;height:1px;background:rgb(0 0 0/.7)}
.odo .d.z{color:#4a4a52}
.odo .sp{align-self:end;font:800 1em/1 var(--font-display);color:var(--gold);padding-bottom:.1em}
.on1 .lb{font:700 clamp(13px,1.2vw,16px)/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
[dir="rtl"] .on1 .lb{letter-spacing:0;text-transform:none;font-size:clamp(15px,1.4vw,18px)}
.ppl-s{position:relative;padding:var(--section) 0;background:var(--bg)}
.ppl{list-style:none;margin:var(--space-6) 0 0;padding:0;border-top:1px solid var(--border)}
.pr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(12px,3vw,40px);align-items:center;padding:clamp(14px,2.4vw,28px) 0;border-bottom:1px solid var(--border);transition:padding var(--dur-slow) var(--ease-snap),background-color var(--dur-base);outline:0}
.pr:hover,.pr:focus-visible{padding-inline-start:clamp(8px,2vw,28px);background:linear-gradient(90deg,rgb(201 162 74/.08),transparent)}
[dir="rtl"] .pr:hover,[dir="rtl"] .pr:focus-visible{background:linear-gradient(270deg,rgb(201 162 74/.08),transparent)}
.pr:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
.pr .no{font:700 12px/1 var(--font-ui);letter-spacing:.16em;color:var(--text-muted)}
.pr .nm{display:block;font:800 clamp(32px,6vw,96px)/1 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:var(--track-display);transition:color var(--dur-base)}
[dir="rtl"] .pr .nm{line-height:1.2}
.pr:hover .nm,.pr:focus-visible .nm{color:var(--gold-text)}
.pr .rl{display:block;font:600 clamp(13px,1.4vw,18px)/1.3 var(--font-ui);color:var(--text-2);margin-top:6px}
.pr .av{width:clamp(48px,7vw,96px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font:800 clamp(16px,2.4vw,32px)/1 var(--font-display);color:var(--on-gold);background:linear-gradient(135deg,var(--gold),#8a6a22);box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--gold);transition:transform var(--dur-slow) var(--ease-snap)}
.pr:hover .av,.pr:focus-visible .av{transform:scale(1.18) rotate(-4deg)}
.rm .pr:hover .av{transform:none}
@media (max-width:700px){.miles{grid-template-columns:1fr;padding-top:0;gap:40px}.miles::before{inset-inline:auto;inset-inline-start:11px;top:0;bottom:0;width:4px;height:auto;background:repeating-linear-gradient(0deg,var(--gold) 0 24px,transparent 24px 40px)}.mi{padding-inline-start:44px}.mi::before{top:6px}.pr .no{display:none}.pr{grid-template-columns:minmax(0,1fr) auto}}

/* 4. finale: the number plate */
.fin{position:relative;padding:var(--section) 0 clamp(72px,9vw,128px);background:radial-gradient(50% 50% at 85% 40%,rgb(201 162 74/.14),transparent),var(--bg);overflow:hidden}
.finc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,7vw,112px);align-items:center}
.fcol{display:grid;gap:var(--space-5);justify-items:start}
.fcol .lead{max-width:40ch}
.platew{display:grid;justify-items:center;gap:var(--space-5);perspective:900px}
.plate{--ry:0deg;display:inline-grid;grid-template-columns:auto 1fr;align-items:stretch;border-radius:14px;overflow:hidden;border:3px solid #141414;background:linear-gradient(150deg,#F2D98C,#C9A24A 60%,#B8913A);color:#141414;direction:ltr;box-shadow:inset 0 0 0 2px rgb(255 255 255/.3),0 30px 60px -20px rgb(0 0 0/.7),0 0 80px rgb(201 162 74/.2);transform:rotateY(var(--ry));transition:transform 400ms var(--ease-drive)}
.plate .gb{display:grid;place-items:center;align-content:center;gap:6px;padding:0 clamp(10px,2vw,20px);background:#1B3A8C;color:#fff;font:700 clamp(14px,2vw,22px)/1 "Archivo",system-ui,sans-serif}
.plate .gb i{width:1.4em;height:1.4em;border-radius:50%;border:2px dotted #F2D98C}
.plate b{font:800 clamp(44px,9vw,128px)/1 "Archivo",system-ui,sans-serif;font-stretch:100%;letter-spacing:.06em;padding:.12em .3em;white-space:nowrap}
.js .plate{transform:translateX(120%) rotate(8deg);opacity:0}
.js .platew.in .plate{transform:rotateY(var(--ry));opacity:1;transition:transform 1.1s var(--ease-snap),opacity 300ms}
.rm .plate,.rm .platew.in .plate{transform:none!important;opacity:1!important;transition:none}
.pcap{display:inline-flex;gap:10px;align-items:center;color:var(--text-2);font-size:15px;text-align:center}
.pcap svg{width:18px;height:18px;color:var(--gold);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (max-width:900px){
  .agrid,.finc{grid-template-columns:1fr}
  .ab{min-height:0}
  .frame{border-radius:44px}.glass{border-radius:34px}
  .platew{order:2}
}

/* Reduced motion (device setting; JS also adds .rm): mirror tags static, sentence lit, car placed without a ride, plate at rest. */
.rm .rv{opacity:1;transform:none}
.rm .rv-h{clip-path:none;transform:none}
@media (prefers-reduced-motion:reduce){
  .mir,.mdash,.rtag,.rsvg .dv,.rcar .ind,.gd.sw{animation:none!important}
  .js .stm .w{opacity:1;transition:none}
  .js .plate,.js .platew.in .plate{transform:none;opacity:1;transition:none}
}