/* StationQC
   Concept: a night drive over Québec. The page is ink; blue is the brand; green, amber and red
   only ever mean a price. Glass is used only where something real sits behind it. */

:root{
  --bg:#0b0d14;--deep:#07080d;--card:#11141c;--raised:#1a1e28;--panel:#0f1219;
  --line:rgba(238,240,245,.08);--line-2:rgba(238,240,245,.14);
  --ink:#eef0f5;--ink-2:#a3a9b8;--ink-3:#7a8296;
  --blue:#1e6fd0;--blue-2:#2a7ddf;--azure:#54bfff;--emerald:#30da88;--amber:#ffa726;--red:#ff5a5a;
  --orb:radial-gradient(circle at 50% 30%,#6aa8ff 0%,#1e6fd0 55%,#06214d 100%);
  --font:'Geist',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1240px;--gut:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.22,1,.36,1);--expo:cubic-bezier(.16,1,.3,1);
  --ph:min(72svh,720px);
}
@supports (color:color(display-p3 0 0 0)){:root{--emerald:color(display-p3 .188 .855 .533);--azure:color(display-p3 .329 .749 1)}}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);font-size:16px;line-height:1.5;text-rendering:optimizeLegibility;overflow-x:clip}
/* The Earth's horizon stays with you after the globe leaves. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 55% at 50% 125%,rgba(30,111,208,.18),rgba(30,111,208,.04) 45%,transparent 70%)}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3{font-weight:500;text-wrap:balance}
p,li{text-wrap:pretty}
::selection{background:rgba(84,191,255,.3)}
:focus-visible{outline:2px solid var(--azure);outline-offset:3px;border-radius:8px}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(84,191,255,.18);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:rgba(84,191,255,.32)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:120;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:500}
.skip:focus{top:12px}
.wrap{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:var(--gut);padding-right:var(--gut)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
@view-transition{navigation:auto}
::view-transition-old(root){animation:.22s var(--ease) both vt-out}
::view-transition-new(root){animation:.38s var(--ease) both vt-in}
@keyframes vt-out{to{opacity:0;filter:blur(6px)}}
@keyframes vt-in{from{opacity:0;filter:blur(6px)}}

h2{font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.04em}
.lede{color:var(--ink-2);font-size:clamp(16px,1.35vw,18px);line-height:1.6;max-width:460px}

/* ---------- Liquid glass ---------- */
.glass{position:relative;isolation:isolate;background:hsl(0 0% 100% / .055);-webkit-backdrop-filter:blur(18px) saturate(1.6) brightness(1.05);backdrop-filter:blur(18px) saturate(1.6) brightness(1.05);
  box-shadow:inset 0 1px 0 hsl(0 0% 100% / .26),inset 0 -1px 0 hsl(0 0% 100% / .05),inset 0 0 18px 2px hsl(0 0% 100% / .035),0 12px 32px -14px rgba(0,0,0,.6)}
.glass::before,.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1}
.glass::before{background:linear-gradient(135deg,hsl(0 0% 100% / .12) 0%,transparent 40%,transparent 66%,hsl(0 0% 100% / .04) 100%)}
.glass::after{padding:1px;background:linear-gradient(180deg,hsl(0 0% 100% / .42),hsl(0 0% 100% / .1) 40%,hsl(0 0% 100% / .04) 70%,hsl(0 0% 100% / .14));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:500;white-space:nowrap;transition:transform .16s var(--ease),background-color .18s ease,color .18s ease}
.btn:active,.badge:active,.pill:active{transform:scale(.97)}
.btn-blue{position:relative;color:#fff;background:var(--blue);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.08),0 12px 30px -12px rgba(30,111,208,.85)}
.btn-glass{color:var(--ink)}
.badge{display:inline-block;border-radius:10px;transition:transform .16s var(--ease),opacity .18s ease}
.badge img{height:46px;width:auto}
/* Pill with a lit orb, the primary call to action in the bar */
.pill{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 5px 0 18px;border-radius:999px;font-size:14px;font-weight:500;transition:transform .16s var(--ease)}
.orb{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--orb);box-shadow:inset 0 1px 1px rgba(255,255,255,.45),0 6px 16px -6px rgba(30,111,208,.9);transition:transform .3s var(--expo)}
.orb svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){
  .btn-blue:hover{background:var(--blue-2)}
  .btn-glass:hover,.pill:hover{background:hsl(0 0% 100% / .1)}
  .pill:hover .orb{transform:scale(1.07)}
  .badge:hover{opacity:.85}
}

/* ---------- Top bar + tab bar ---------- */
.top{position:fixed;left:0;right:0;top:16px;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 var(--gut);pointer-events:none}
.top>*{pointer-events:auto}
.brand{justify-self:start;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 4px;font-weight:600;font-size:16px;letter-spacing:-.01em}
.brand img{width:28px;height:28px;border-radius:7px}
.tabs{display:flex;padding:5px;border-radius:999px}
.tabs a{position:relative;z-index:1;display:flex;align-items:center;gap:6px;height:36px;padding:0 16px;border-radius:999px;font-size:14px;color:var(--ink-2);transition:color .2s ease}
.tabs a.on{color:var(--ink)}
.tabs svg{display:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lens{position:absolute;z-index:0;left:0;top:5px;bottom:5px;width:0;border-radius:999px;opacity:0;background:hsl(0 0% 100% / .12);box-shadow:inset 0 1px 0 hsl(0 0% 100% / .24),inset 0 0 0 1px hsl(0 0% 100% / .05)}
.tools{justify-self:end;display:flex;align-items:center;gap:8px}
.lang{display:flex;padding:4px;border-radius:999px;font:500 12px var(--mono)}
.lang button{width:36px;height:34px;border-radius:999px;color:var(--ink-3);transition:color .18s ease,background-color .18s ease}
.lang button[aria-pressed=true]{color:var(--ink);background:hsl(0 0% 100% / .1)}
@media (hover:hover) and (pointer:fine){.tabs a:hover,.lang button:hover{color:var(--ink)}}
@media (max-width:760px){
  .top{top:10px;grid-template-columns:1fr auto}
  .pill span{display:none}
  .pill{padding:0 5px}
  /* The tab bar moves to the bottom, where a thumb can reach it. */
  .tabs{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(440px,calc(100% - 24px));padding:6px}
  .tabs a{flex:1;flex-direction:column;justify-content:center;gap:3px;height:52px;padding:0 4px;font-size:11px;letter-spacing:.01em}
  .tabs svg{display:block}
  .lens{top:6px;bottom:6px}
}

/* ---------- Globe ---------- */
.globe{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;display:block;z-index:0;pointer-events:none}
html:not(.anim) .globe{position:absolute;height:100svh}
body.no-gl .globe{display:none}
#labels{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .4s ease}
#labels.on{opacity:1}
.lb{position:absolute;left:0;top:0;will-change:transform;font:400 12px/1 var(--mono);color:#d9dde6;white-space:nowrap}
.lb i{position:absolute;left:0;bottom:0;width:1px;height:var(--h);background:rgba(238,240,245,.42)}
.lb span{position:absolute;left:7px;bottom:calc(var(--h) - 11px)}
.lb.left span{left:auto;right:7px}
main,.foot{position:relative;z-index:2}
/* Slides up over the Earth with a soft edge, so it is covered by the page rather than switched off. */
.night{display:none}
.anim .night{display:block;position:absolute;left:0;right:0;top:0;height:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(11,13,20,0),var(--bg) 280px)}

/* ---------- Stage: hero, dive, tour ---------- */
.stage{position:relative}
.hero-copy{position:relative;min-height:100svh;max-width:var(--maxw);margin:0 auto;padding:clamp(124px,17vh,170px) var(--gut) 0;display:grid;grid-template-columns:1fr auto;gap:28px 56px;align-items:start}
h1{font-size:clamp(48px,7vw,104px);line-height:.98;letter-spacing:-.05em}
h1 span{display:block}
h1 .l2{color:var(--ink-3)}
.hero-side{max-width:360px;padding-top:40px}
.hero-side p{color:var(--ink-2);font-size:16px;line-height:1.55}
.acts{display:flex;align-items:center;gap:10px;margin-top:24px;flex-wrap:wrap}
.hero-side .note{margin-top:18px;font-size:13px;color:var(--ink-3)}
.dive-copy{display:none}
.dive-copy h2{font-size:clamp(38px,5vw,76px);line-height:1;letter-spacing:-.045em;text-align:center}
.dive-copy span{display:block}
.dive-copy .d2{margin-top:20px;font-size:clamp(17px,1.7vw,22px);letter-spacing:-.01em;line-height:1.35;color:var(--ink-2)}
/* Static tour (no motion or no scripts): steps in flow, each with its screen */
.tour{max-width:var(--maxw);margin:0 auto;padding:40px var(--gut) 80px}
.st{display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:center;padding:48px 0}
.st h3{font-size:clamp(30px,3.4vw,48px);line-height:1.04;letter-spacing:-.035em}
.st p{margin-top:14px;max-width:430px;color:var(--ink-2);font-size:17px;line-height:1.55}
.st .shot{width:min(300px,70vw);border-radius:40px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-2),0 40px 80px -40px #000}
.device,.prog{display:none}
.phone{position:relative;height:var(--ph);aspect-ratio:1206/2622}
.bezel{position:absolute;inset:0;border-radius:calc(var(--ph)*.075);background:linear-gradient(160deg,#2a2e38,#121419 40%,#1d2029);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 0 6px #0b0d12,inset 0 0 0 7px rgba(255,255,255,.06),0 60px 120px -40px #000}
.scr{position:absolute;inset:calc(var(--ph)*.012);border-radius:calc(var(--ph)*.064);overflow:hidden;background:#000;transform:translateZ(0)}
.scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Screens push in like the app: the incoming one casts a soft edge shadow over the one leaving */
.anim .scr img{box-shadow:-28px 0 44px rgba(0,0,0,.55);will-change:transform}
/* Dynamic Island. The screenshots carry blurred map pins under the status bar, which read as a
   second shape hanging off the island; a soft dark falloff behind it keeps the island one clean pill. */
.scr::before{content:"";position:absolute;z-index:3;left:22%;right:22%;top:0;height:9%;background:radial-gradient(50% 55% at 50% 32%,rgba(0,0,0,.8),rgba(0,0,0,.4) 55%,transparent);pointer-events:none}
.scr::after{content:"";position:absolute;z-index:4;left:34.4%;right:34.4%;top:1.25%;height:4.2%;border-radius:999px;background:#000}
/* A soft pool of blue under the phone, as if lit by its own screen */
.device::before{content:"";position:absolute;left:50%;bottom:-6%;width:120%;height:22%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(30,111,208,.35),transparent);filter:blur(10px);pointer-events:none}

/* Animated stage */
.anim #hl,.anim .hero-side,.anim .doc-hero h1{visibility:hidden}
.anim .stage{height:100svh;overflow:hidden}
.anim .hero-copy{position:absolute;inset:0;min-height:0;z-index:3}
/* Sits in the sky above Montréal, so the city lights it is talking about stay clear below it. */
.anim .dive-copy{display:flex;position:absolute;inset:0;z-index:3;align-items:flex-start;justify-content:center;padding:clamp(110px,17vh,180px) var(--gut) 0;pointer-events:none}
.anim .tour{position:absolute;inset:0;max-width:none;padding:0;z-index:2}
.anim .tour-copy{position:absolute;z-index:3;left:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));top:50%;width:min(460px,38vw);transform:translateY(-50%);height:340px}
.anim .st{position:absolute;inset:0 0 auto;display:block;padding:0;visibility:hidden}
.anim .st .shot{display:none}
/* Step indicators: each names its screen, fills as you read, and jumps there on click. */
.anim .prog{display:flex;position:absolute;left:0;bottom:-28px;gap:20px}
.prog button{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:6px 0;font-size:13px;color:var(--ink-3);transition:color .2s ease}
.prog button.on{color:var(--ink)}
.prog i{position:relative;display:block;width:56px;height:2px;border-radius:2px;background:rgba(238,240,245,.14);overflow:hidden}
.prog b{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
@media (hover:hover) and (pointer:fine){.prog button:hover{color:var(--ink-2)}.prog button.on:hover{color:var(--ink)}}
.anim .device{display:block;position:absolute;left:50%;top:50%;z-index:2;will-change:transform;transform-style:preserve-3d}
.callouts{position:absolute;inset:0;pointer-events:none}
.co{position:absolute;left:calc(var(--ax)*1%);top:calc(var(--ay)*1%);width:0;height:0;opacity:0}
.co .dot{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18),0 0 0 9px rgba(255,255,255,.06)}
.co .ln{position:absolute;right:0;top:0;height:1px;width:calc(var(--ax)*var(--pw)/100*1px + 44px);background:linear-gradient(90deg,rgba(238,240,245,.5),rgba(238,240,245,.95));transform-origin:right}
.co .chip{position:absolute;top:0;right:calc(var(--ax)*var(--pw)/100*1px + 52px);transform:translateY(-50%);display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:999px;font-size:13.5px;white-space:nowrap}
@media (max-width:760px){
  :root{--ph:min(50svh,500px)}
  .hero-copy{grid-template-columns:1fr;padding-top:96px;gap:8px}
  .hero-side{max-width:none;padding-top:8px}
  .st{grid-template-columns:1fr}
  .st .shot{margin:24px auto 0}
  .anim .device{top:calc(9svh + var(--ph)/2)}
  .anim .tour-copy{left:var(--gut);right:var(--gut);width:auto;top:calc(9svh + var(--ph) + 4svh);transform:none;height:auto;bottom:calc(84px + env(safe-area-inset-bottom))}
  .anim .st h3{font-size:24px}
  .anim .st p{font-size:15px;margin-top:8px}
  .anim .prog{position:absolute;top:-22px;bottom:auto;gap:6px}
  .prog button{padding:8px 0}
  .prog span{display:none}
  .prog i{width:34px}
  .callouts{display:none}
}
@media (max-width:980px) and (min-width:761px){.anim .tour-copy{width:40vw}}

/* ---------- Pins: prices fall, then become Québec ---------- */
.pins{position:relative}
.pins-stage{position:relative;min-height:100svh;overflow:hidden}
.pins-canvas{display:none}
.pins-copy{position:relative;z-index:2;padding-top:clamp(120px,16vh,170px);padding-bottom:80px}
.pins-copy h2{max-width:11ch}
.pins-copy .lede{margin-top:20px}
.pins-note{display:none}
.anim .pins-stage{height:100svh;min-height:0}
.anim .pins-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1}
.anim .pins-copy{padding-bottom:0}
.anim .pins-note{display:block;margin-top:16px;font-size:13px;color:var(--ink-3)}

/* ---------- Brands (scroll velocity) ---------- */
.brands{position:relative;padding:clamp(80px,12vw,150px) 0 clamp(40px,6vw,80px);overflow:hidden}
.kicker{max-width:var(--maxw);margin:0 auto 28px;padding:0 var(--gut);font-size:15px;color:var(--ink-3)}
.vel{display:grid;gap:4px}
.vel-row{display:flex;width:max-content;white-space:nowrap;font-size:clamp(44px,7.4vw,118px);font-weight:500;letter-spacing:-.045em;line-height:1.08;will-change:transform}
.vel-row span{padding-right:.55em}
.vel-row[data-dir="1"]{color:var(--ink-2)}
.vel-row[data-dir="-1"]{color:#363c4b}
html:not(.anim) .vel{overflow-x:auto}

/* ---------- Statement + numbers ---------- */
.facts{padding-top:clamp(60px,9vw,120px);padding-bottom:clamp(80px,11vw,140px)}
.stmt{max-width:1080px;font-size:clamp(28px,3.9vw,54px);line-height:1.12;letter-spacing:-.032em;font-weight:500}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--line);padding-top:32px}
.nums .odo{display:flex;font-weight:400;font-size:clamp(56px,7vw,104px);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.nums .lbl{display:block;margin-top:12px;font-size:15px;color:var(--ink-3)}
@media (max-width:760px){.nums{grid-template-columns:repeat(2,1fr);gap:36px 16px}}

/* Odometer: digit columns translate, so changes retarget instead of restarting */
.odo{display:inline-flex;line-height:1;height:1em;overflow:hidden}
.dg{display:block;height:1em;overflow:hidden}
.col{display:block;transition:transform .7s var(--ease)}
.col b{display:block;height:1em;font-weight:inherit}
.nums .col{transition:none}

/* ---------- The rest of your day ---------- */
.day{position:relative}
.day-pin{padding:40px 0 100px}
.day-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,48px)}
.day-head h2{max-width:12ch}
.day-head .lede{max-width:340px}
.track{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.card{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,hsl(0 0% 100% / .06),hsl(0 0% 100% / .025));box-shadow:inset 0 1px 0 hsl(0 0% 100% / .22),0 24px 60px -28px rgba(0,0,0,.8),0 14px 40px -18px rgba(30,111,208,.22)}
.vis{position:relative;height:clamp(230px,30svh,290px)}
.tx{padding:4px 26px 26px}
.tx h3{font-size:19px;letter-spacing:-.015em}
.tx p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.day-prog{display:none}
.anim .day-pin{height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:0}
.anim .day-head,.anim .day-prog{width:100%}
.anim .track{display:flex;align-items:stretch;gap:18px;max-width:none;margin:0;padding:0 max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));will-change:transform}
.anim .card{flex:none;width:min(380px,80vw);will-change:transform}
.anim .day-prog{display:block;margin-top:clamp(24px,3vw,36px)}
.day-prog i{display:block;width:160px;height:2px;border-radius:2px;background:rgba(238,240,245,.12);overflow:hidden}
.day-prog b{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
.notifs{position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.nf{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:20px}
.nf img{width:34px;height:34px;border-radius:8px;flex:none}
.nf div{min-width:0;flex:1}
.nf header{display:flex;justify-content:space-between;gap:8px;font-size:13.5px;font-weight:500}
.nf time{font-weight:400;font-size:12px;color:var(--ink-3);flex:none}
.nf p{font-size:13px;line-height:1.35;color:var(--ink-2)}
.fuel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:22px}
.pump{display:flex;align-items:baseline;font-size:clamp(60px,5.6vw,78px);letter-spacing:-.045em;color:var(--emerald);font-variant-numeric:tabular-nums}
.pump small{font-size:.4em;margin-left:4px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);width:min(300px,100%);padding:4px;border-radius:999px}
.seg i{position:absolute;z-index:0;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/3);border-radius:999px;background:hsl(0 0% 100% / .14);box-shadow:inset 0 1px 0 hsl(0 0% 100% / .22);transform:translateX(calc(var(--g,0)*100%));transition:transform .32s var(--ease)}
.seg button{position:relative;z-index:1;height:38px;border-radius:999px;font-size:13.5px;color:var(--ink-2);transition:color .18s ease}
.seg button[aria-pressed=true]{color:var(--ink)}
.widget{position:absolute;left:50%;top:50%;width:170px;height:170px;margin:-85px 0 0 -85px;padding:16px;border-radius:34px}
.widget small{display:block;font-size:12px;color:var(--ink-2)}
.widget b{display:block;margin-top:8px;font-weight:500;font-size:42px;line-height:1;letter-spacing:-.04em;color:var(--emerald);font-variant-numeric:tabular-nums}
.widget p{margin-top:14px;font-size:13px;line-height:1.3}
.widget p span{display:block;font-size:12px;color:var(--ink-3)}
.siri{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:22px;padding:28px}
.siri q{quotes:'“' '”';font-size:clamp(22px,2vw,27px);line-height:1.2;letter-spacing:-.025em}
.wave{display:flex;align-items:center;gap:5px;height:30px}
.wave i{width:4px;height:100%;border-radius:4px;background:linear-gradient(180deg,#9fd0ff,#1e6fd0);transform:scaleY(.25)}
.stks{position:absolute;inset:0}
.stks img{position:absolute;width:128px;height:128px;top:50%;left:50%;margin:-64px 0 0 -64px}
.stks img:nth-child(1){transform:translate(-88px,-4px) rotate(-9deg)}
.stks img:nth-child(2){transform:translate(0,-16px) rotate(3deg)}
.stks img:nth-child(3){transform:translate(88px,6px) rotate(10deg)}

/* ---------- Everything list ---------- */
.all{padding-top:clamp(90px,12vw,160px);padding-bottom:clamp(40px,6vw,80px)}
.all h2{max-width:14ch}
.fl{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 28px;margin-top:clamp(40px,5vw,64px)}
.fl h3{font-size:15px;font-weight:500;color:var(--ink-3);margin-bottom:16px}
.fl ul{list-style:none;display:grid;gap:12px}
.fl li{font-size:16px;line-height:1.35}
@media (max-width:980px){.fl{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.fl{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{padding-top:clamp(90px,12vw,160px);padding-bottom:clamp(90px,12vw,160px);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.faq-head .btn{margin-top:28px}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px;padding:18px 0;text-align:left;font-size:18px;font-weight:500;letter-spacing:-.01em;transition:color .18s ease}
.qa .pm{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:hsl(0 0% 100% / .05);box-shadow:inset 0 1px 0 hsl(0 0% 100% / .14);transition:background-color .2s ease}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--ink-2);transition:transform .35s var(--ease)}
.qa .pm::after{transform:rotate(90deg)}
.qa[data-open] .pm{background:var(--blue)}
.qa[data-open] .pm::before,.qa[data-open] .pm::after{background:#fff}
.qa[data-open] .pm::before{transform:rotate(45deg)}
.qa[data-open] .pm::after{transform:rotate(135deg)}
.ans{overflow:hidden;height:0}
.qa[data-open] .ans{height:auto}
.ans p{padding:0 56px 24px 0;color:var(--ink-2);font-size:16px;line-height:1.65}
@media (hover:hover) and (pointer:fine){.qa button:hover{color:#fff}.qa button:hover .pm{background:hsl(0 0% 100% / .1)}}
@media (max-width:860px){.faq{grid-template-columns:1fr}}

/* ---------- Beta ---------- */
.beta{position:relative;min-height:100svh;display:flex}
.beta-in{position:relative;width:100%;padding-top:clamp(110px,15vh,160px);padding-bottom:clamp(220px,32vh,340px);display:grid;grid-template-columns:1fr minmax(320px,440px);gap:40px 72px;align-items:start}
.beta-copy h2{max-width:11ch}
.beta-copy p{margin-top:20px;max-width:440px;color:var(--ink-2);font-size:18px}
.form{display:grid;gap:14px;padding:24px;border-radius:32px}
.field{display:grid;gap:8px;font-size:14px;color:var(--ink-2)}
.field input{height:52px;padding:0 16px;border-radius:16px;border:0;outline:0;font:400 16px var(--font);color:var(--ink);background:rgba(7,8,13,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .18s ease,background-color .18s ease}
.field input:focus{box-shadow:inset 0 0 0 1.5px var(--azure),0 0 0 4px rgba(84,191,255,.14);background:rgba(7,8,13,.6)}
.field input[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--red)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.send{position:relative;width:100%;height:54px;margin-top:6px;font-size:16px}
.send .spin{position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;opacity:0;transition:opacity .15s ease}
.send-label{transition:opacity .15s ease,filter .15s ease}
.form.busy .send-label{opacity:0;filter:blur(3px)}
.form.busy .spin{opacity:1;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.status{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.status:empty{display:none}
.status.err{color:#ff9a90}
.form.done .field,.form.done .send{display:none}
.form.done .status{font-size:18px;color:var(--ink)}
.consent{font-size:12.5px;line-height:1.45;color:var(--ink-3)}
@media (max-width:860px){.beta-in{grid-template-columns:1fr}}

/* ---------- Footer: a raised panel with a bilingual ticker ---------- */
.foot{margin-top:-1px;border-radius:44px 44px 0 0;background:var(--panel);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);overflow:hidden;color:var(--ink-2)}
body[data-page=home] .foot{margin-top:-120px}
.foot::before{content:"";position:absolute;right:-8rem;top:-10rem;width:30rem;height:30rem;border-radius:50%;background:radial-gradient(circle,rgba(30,111,208,.32) 0%,transparent 65%);filter:blur(30px);pointer-events:none}
.tick{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:22px 0}
.tick-t{display:flex;width:max-content;animation:tick 30s linear infinite}
.tick span{display:inline-flex;align-items:center;gap:clamp(24px,3vw,40px);padding-right:clamp(24px,3vw,40px);font-size:clamp(30px,5.4vw,68px);font-weight:500;letter-spacing:-.04em;color:rgba(238,240,245,.9);white-space:nowrap}
.tick span::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--orb);box-shadow:0 0 12px rgba(84,191,255,.6)}
@keyframes tick{to{transform:translate3d(-50%,0,0)}}
.foot-body{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;padding-top:clamp(56px,7vw,96px)}
.foot-cta h2{font-size:clamp(34px,4.4vw,60px);color:var(--ink);max-width:12ch}
.foot-cta .badge{margin-top:28px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.cols h3{font-size:14px;font-weight:500;color:var(--ink-3);margin-bottom:16px}
.cols ul{list-style:none;display:grid;gap:12px}
.cols a{display:inline-flex;align-items:center;gap:6px;font-size:15.5px;color:rgba(238,240,245,.78);transition:color .18s ease}
.cols a svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:0;transform:translate(-4px,4px);transition:opacity .2s ease,transform .3s var(--expo)}
@media (hover:hover) and (pointer:fine){.cols a:hover{color:#fff}.cols a:hover svg{opacity:1;transform:none}}
.foot-bar{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;margin-top:clamp(56px,7vw,96px);padding-top:24px;padding-bottom:calc(30px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font:400 11.5px var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.foot-bar .brand{height:auto;padding:0;font-family:var(--font);letter-spacing:-.01em;color:var(--ink)}
@media (max-width:860px){.foot-body{grid-template-columns:1fr}}
@media (max-width:760px){.foot{border-radius:32px 32px 0 0}.foot-bar{padding-bottom:calc(104px + env(safe-area-inset-bottom))}.cols{grid-template-columns:repeat(2,1fr)}}

/* ---------- Documents ---------- */
.horizon{display:none}
.doc{padding-bottom:clamp(80px,10vw,140px)}
.doc-hero{padding-top:clamp(124px,18vh,180px);padding-bottom:clamp(40px,6vw,72px)}
.back{display:inline-flex;align-items:center;gap:6px;margin-bottom:28px;font-size:14px;color:var(--ink-2);transition:color .18s ease}
.back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.back:hover{color:var(--ink)}}
.doc-hero h1{font-size:clamp(46px,7vw,100px)}
.doc-hero .lede{margin-top:20px;max-width:560px;font-size:19px}
.doc-hero .up{margin-top:18px;font:400 12px var(--mono);letter-spacing:.08em;color:var(--ink-3)}
.legal{display:grid;grid-template-columns:250px minmax(0,720px);gap:clamp(32px,6vw,96px);align-items:start}
.toc{position:sticky;top:100px;padding:10px;border-radius:26px}
.toc p{padding:8px 12px 8px;font-size:13px;font-weight:500;color:var(--ink-3)}
.toc-in{position:relative}
.toc ol{list-style:none;display:grid}
.toc a{position:relative;z-index:1;display:block;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.3;color:var(--ink-2);transition:color .2s ease}
.toc a.on{color:var(--ink)}
.toc .mark{position:absolute;z-index:0;left:0;right:0;top:0;height:0;border-radius:14px;background:hsl(0 0% 100% / .09);box-shadow:inset 0 1px 0 hsl(0 0% 100% / .16)}
.legal article section{padding:6px 0 38px;scroll-margin-top:110px}
.legal article h2{display:flex;gap:16px;align-items:baseline;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;line-height:1.2}
.legal article h2 em{font:400 12px var(--mono);font-style:normal;color:var(--azure)}
.legal article p{margin-top:12px;font-size:17px;line-height:1.7;color:#c3c9d6}
/* Support: a ruled list of problems and their fixes, like a troubleshooting sheet. It reads the
   same with any number of entries, so there is never a lone card left over. */
.fixes{display:grid}
.fix{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:16px 56px;padding:32px 0;border-top:1px solid var(--line)}
.fix:last-child{border-bottom:1px solid var(--line)}
.fix h2{font-size:clamp(20px,2vw,24px);letter-spacing:-.02em;line-height:1.25}
.fix ol{list-style:none;counter-reset:s;display:grid;gap:12px}
.fix li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:8px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.fix li::before{content:counter(s);font:500 13px/1.85 var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.more{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:860px){.legal{grid-template-columns:1fr}.toc{display:none}.fix{grid-template-columns:1fr;padding:24px 0}}

@media (prefers-reduced-motion:reduce){
  .col,.seg i,.qa .pm::before,.qa .pm::after{transition:none}
  .tick-t{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}