:root{
  --ground:#f4f4f2; --surface:#fff; --fill:#ebebe7; --ink:#111; --soft:#5d5d5a; --faint:#9a9a95;
  --dot:#ffc531; --line:#d8d8d3; --radius:22px;
  --ease:cubic-bezier(.2,.7,.2,1);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--ground);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
main{position:relative}
section{padding:120px max(28px,calc((100vw - 1160px)/2)) ;position:relative}
h1{font-size:clamp(48px,7.4vw,104px);line-height:.95;letter-spacing:-.045em;font-weight:800}
h2{font-size:clamp(36px,4.6vw,64px);line-height:1;letter-spacing:-.035em;font-weight:800}
h3{font-size:20px;letter-spacing:-.01em;font-weight:700}
p{font-size:18px;line-height:1.55;color:var(--soft)}

/* Header */
.top{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:14px max(28px,calc((100vw - 1160px)/2));transition:background .3s,box-shadow .3s}
.top.scrolled{background:rgba(244,244,242,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.brand{display:flex;align-items:center;gap:6px;font-weight:800;font-size:24px;letter-spacing:-.04em}
.top nav{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:500}
.top nav a:not(.gh){opacity:.75;transition:opacity .2s}.top nav a:hover{opacity:1}
.lang{font-size:13px;font-weight:700;padding:6px 10px;border-radius:10px}
.lang,.key{background:var(--surface);box-shadow:0 1.5px 1.5px rgba(0,0,0,.14),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.06)}

/* Bevelled keys, like the app */
.key{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:14px;font-weight:700;font-size:16px;
  transition:transform .15s var(--ease),box-shadow .15s}
.key:hover{transform:translateY(-1px)}
.key:active{transform:translateY(1px);box-shadow:inset 0 2px 3px rgba(0,0,0,.18)}
.key-ink{background:var(--ink);color:#fff;box-shadow:0 2px 3px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.18)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* Hero */
.hero{overflow-x:clip;min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;padding-top:110px}
.kicker{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--soft);margin-bottom:26px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 0 rgba(255,197,49,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,197,49,.55)}70%{box-shadow:0 0 0 12px rgba(255,197,49,0)}100%{box-shadow:0 0 0 0 rgba(255,197,49,0)}}
.lead{margin-top:28px;max-width:30em;font-size:20px}
.facts{display:flex;gap:22px;list-style:none;margin-top:30px;font-size:14px;font-weight:600;color:var(--soft)}
.facts li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink);margin-right:8px;vertical-align:middle}
.hero-phones{position:relative;height:min(700px,78vh);display:flex;justify-content:center;align-items:center}
/* iPhone 17 Pro: Apple's product bezel (Apple Design Resources) over the screenshot.
   The bezel is 1350 x 2760, the screen sits at 72,69 with 1206 x 2622. */
.phone{--w:min(300px,62vw);position:relative;flex:none;width:var(--w);height:calc(var(--w)*2.04444);aspect-ratio:1350/2760;
  filter:drop-shadow(0 calc(var(--w)*.09) calc(var(--w)*.08) rgba(0,0,0,.22)) drop-shadow(0 calc(var(--w)*.02) calc(var(--w)*.025) rgba(0,0,0,.18))}
.phone img{position:absolute;left:5.333%;top:2.5%;width:89.334%;height:95%;object-fit:cover;border-radius:calc(var(--w)*.13)}
.phone::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:url(assets/iphone-17-pro.webp) center/100% 100% no-repeat}
.hero-phones .phone{--w:calc(min(700px,78vh)*.4891)}
.phone-front{z-index:2;transform:translateX(-8%)}
.phone-back{position:absolute!important;z-index:1;transform:translateX(42%) rotate(5deg) scale(.86);opacity:.95}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.slide.on{opacity:1}
.cycle-tabs{position:absolute;bottom:-56px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--fill);
  box-shadow:inset 0 1.5px 2.5px rgba(0,0,0,.16),inset 0 -1px 0 rgba(255,255,255,.9)}
.cycle-tabs button{position:relative;font-size:13px;font-weight:600;color:var(--soft);padding:8px 14px;border-radius:10px;white-space:nowrap;overflow:hidden}
.cycle-tabs button.on{color:var(--ink);background:var(--surface);box-shadow:0 1.5px 1.5px rgba(0,0,0,.14),inset 0 1px 0 #fff}
.cycle-tabs button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;background:var(--dot);transform-origin:left;animation:fill var(--cycle,3.6s) linear}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Ticker */
.ticker{padding:0;background:var(--ink);color:#fff;overflow:hidden;user-select:none}
.ticker-row{overflow:hidden;border-top:1px solid rgba(255,255,255,.08);padding:26px 0}
.ticker-track{display:flex;width:max-content;will-change:transform}
.ticker-track span{display:flex;align-items:center;font-size:clamp(28px,3.6vw,48px);font-weight:700;letter-spacing:-.03em;white-space:nowrap;padding-right:44px;transition:color .3s}
.ticker-track span::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--dot);margin-left:44px;flex:none}
.ticker-row-2 .ticker-track span{color:rgba(255,255,255,.45);font-weight:600}
.ticker-row-2 .ticker-track span::after{background:transparent;border:2px solid rgba(255,255,255,.4);width:10px;height:10px}
.ticker-track span:hover{color:var(--dot)}

/* Features */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;min-height:92vh}
.feature.flip .feature-text{order:2}
.feature-text{max-width:500px}
.num{font-size:14px;font-weight:800;color:var(--faint);letter-spacing:.08em;margin-bottom:16px;font-variant-numeric:tabular-nums}
.feature h2{margin-bottom:22px}
.points{list-style:none;margin-top:28px;display:grid;gap:12px}
.points li{display:flex;gap:12px;align-items:baseline;font-size:16px;font-weight:600}
.points li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;border:2px solid var(--ink);transform:translateY(-1px)}
.feature-shot{display:flex;flex-direction:column;align-items:center;gap:30px;perspective:1200px}
.feature-shot .phone{transition:transform 1s var(--ease)}
.phone img.dark{opacity:0;transition:opacity .6s var(--ease)}
.screens-dark .phone img.dark{opacity:1}

/* Dark strip */
.dark-strip{background:#0b0b0c;color:#fff;text-align:center}
.dark-strip h2{margin-bottom:64px}
.strip{display:flex;justify-content:center;gap:28px}
.strip .phone{--w:min(260px,28vw)}
.strip .phone:nth-child(2){transform:translateY(40px)}

/* Europe */
.europe{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.europe p{margin-top:22px;max-width:30em}
.link{display:inline-block;margin-top:24px;font-weight:700;border-bottom:2px solid var(--dot);padding-bottom:2px}
.cities{display:flex;flex-wrap:wrap;gap:10px}
.cities span{padding:10px 16px;border-radius:999px;background:var(--fill);font-weight:600;font-size:15px;
  box-shadow:inset 0 1.5px 2px rgba(0,0,0,.12),inset 0 -1px 0 rgba(255,255,255,.9);transition:background .3s,color .3s,box-shadow .3s}
.cities span.lit{background:var(--surface);box-shadow:0 1.5px 1.5px rgba(0,0,0,.14),inset 0 1px 0 #fff}
.cities span.lit::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--dot);margin-right:8px;vertical-align:1px}

/* Principles */
.principles h2{max-width:14em;margin-bottom:54px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--surface);border-radius:var(--radius);padding:28px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.card h3{margin-bottom:10px}.card p{font-size:15px}
.card .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--fill);margin-bottom:18px;font-size:19px;
  box-shadow:inset 0 1.5px 2px rgba(0,0,0,.12),inset 0 -1px 0 rgba(255,255,255,.9)}
.cards .card:nth-child(5){transition-delay:.32s}.cards .card:nth-child(6){transition-delay:.4s}

/* Closing */
.closing{text-align:center;padding-bottom:140px}
.closing h2{max-width:13em;margin:0 auto}
.closing p{margin:22px auto 0;max-width:32em}
.closing .cta{justify-content:center}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px max(28px,calc((100vw - 1160px)/2));font-size:13px;color:var(--faint);border-top:1px solid var(--line)}

/* The line with the travelling dot */
.line{position:fixed;left:max(10px,calc((100vw - 1160px)/2 - 64px));top:96px;bottom:36px;width:24px;z-index:20;pointer-events:none}
.line-track{position:absolute;left:11px;top:0;bottom:0;width:2px;border-radius:2px;background:var(--line)}
.line-done{position:absolute;inset:0 0 auto 0;height:0;background:var(--ink);border-radius:2px}
.line-stops{list-style:none;position:absolute;inset:0}
.line-stops li{position:absolute;left:6px;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--ground);border:2px solid var(--line);transition:border-color .3s,transform .3s var(--ease)}
.line-stops li.passed{border-color:var(--ink)}
.line-stops li.here{transform:scale(1.25);border-color:var(--ink)}
.line-dot{position:absolute;left:3px;top:0;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--dot);
  box-shadow:0 0 0 3px var(--ground),0 2px 6px rgba(0,0,0,.25);will-change:transform}
.line-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--dot);opacity:.0;animation:ring 2.4s infinite}
@keyframes ring{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.line-label{position:absolute;left:28px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:4px 9px;border-radius:8px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.12);opacity:0;transition:opacity .3s}
.line.moving .line-label,.line.near .line-label{opacity:1}
body.on-dark .line-track{background:rgba(255,255,255,.18)}
body.on-dark .line-done{background:#fff}
body.on-dark .line-stops li{background:#0b0b0c}
body.on-dark .line-dot{box-shadow:0 0 0 3px #111,0 2px 6px rgba(0,0,0,.4)}

/* Reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.feature-text .reveal:nth-child(2){transition-delay:.06s}.feature-text .reveal:nth-child(3){transition-delay:.12s}.feature-text .reveal:nth-child(4){transition-delay:.18s}
.cards .card:nth-child(2){transition-delay:.08s}.cards .card:nth-child(3){transition-delay:.16s}.cards .card:nth-child(4){transition-delay:.24s}
.strip .phone:nth-child(2){transition-delay:.1s}.strip .phone:nth-child(3){transition-delay:.2s}

@media (max-width:1240px){.line{left:8px}}
@media (max-width:900px){
  section{padding:84px 24px}
  .hero{grid-template-columns:1fr;padding-top:100px;gap:90px}
  .hero-phones{height:560px}.hero-phones .phone{--w:274px}
  .feature,.europe{grid-template-columns:1fr;gap:48px;min-height:0}
  .feature.flip .feature-text{order:0}
  .cards{grid-template-columns:1fr 1fr}
  .top nav a:not(.gh){display:none}
  .line{left:auto;right:4px;width:18px}
  .line-track{left:8px}.line-stops li{left:3px;width:10px;height:10px;margin-top:-5px}
  .line-dot{left:1px;width:14px;height:14px;margin-top:-7px}
  .line-label{left:auto;right:24px}
  .strip{gap:14px}.strip .phone{--w:28vw}
}
@media (max-width:560px){.cards{grid-template-columns:1fr}.cycle-tabs button{padding:8px 9px;font-size:12px}.facts{gap:14px;font-size:13px;flex-wrap:wrap}.facts li{white-space:nowrap}.hero-phones{height:560px}.hero-phones .phone{--w:274px}.phone-front{transform:none}.cta{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .dot,.line-dot::after{animation:none}
}
/* screenshot mode (?shot) */
.shot .hero{min-height:900px}.shot .feature{min-height:820px}.shot .hero-phones{height:700px}.shot .hero-phones .phone{--w:342px}
.shot .reveal{opacity:1;transform:none;transition:none}
.shot *,.shot *::after{transition:none!important;animation:none!important}

/* Coverage map */
.coverage{display:block}
.coverage>p{max-width:36em;margin-top:18px}
.covwrap{margin-top:32px;display:grid;grid-template-columns:1fr 240px;gap:24px;align-items:start}
#covmap{position:relative;border-radius:22px;background:#f8f8f6;overflow:hidden;border:1px solid rgba(17,17,17,.09)}
#covmap svg{display:block;width:100%;height:auto}
#covmap .pt{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;transition:opacity .5s var(--ease),transform .6s var(--ease);cursor:pointer}
#covmap.on .pt{opacity:1;transform:none}
#covmap .pt:hover,#covmap .pt.sel{transform:scale(1.5)}
#covmap .ring{fill:none;stroke:#1b7a33;stroke-width:1.6;transform-box:fill-box;transform-origin:center;opacity:0}
#covmap.on .ring{animation:covpulse 2.6s var(--ease) infinite}
@keyframes covpulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.6);opacity:0}}
.covtip{position:absolute;z-index:2;pointer-events:none;min-width:150px;max-width:240px;padding:10px 12px;border-radius:12px;background:var(--surface);
  box-shadow:0 6px 18px rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.1);font-size:14px;line-height:1.35;opacity:0;transform:translate(-50%,calc(-100% - 14px)) scale(.96);transition:opacity .15s,transform .15s}
.covtip.show{opacity:1;transform:translate(-50%,calc(-100% - 14px))}
.covtip b{display:block;font-size:15px}.covtip span{display:flex;align-items:center;gap:6px;color:var(--soft);margin-top:2px}.covtip small{display:block;color:var(--faint);margin-top:4px}
.covtip i{width:9px;height:9px;border-radius:50%;border:2px solid;flex:none}
.covlegend{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:15px}
.covlegend li{display:flex;align-items:center;gap:10px}
.covlegend i{width:14px;height:14px;border-radius:50%;border:2px solid;flex:none}
.covlegend span{margin-left:auto;color:#66666b;font-variant-numeric:tabular-nums}
.covnote{font-size:13px;color:#66666b;margin-top:16px}
@media (max-width:800px){.covwrap{grid-template-columns:1fr}}

/* Kicker dot that flies onto the line */
.kicker .dot{position:relative;z-index:31;will-change:transform}
.line-dot.wait{opacity:0}
.kicker .dot.gone{visibility:hidden}

/* Live section extras */
.live-points{list-style:none;margin-top:28px;display:grid;gap:14px}
.live-points li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;background:var(--surface);border-radius:16px;padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.live-points b{display:block;font-size:16px;color:var(--ink)}
.live-points span{display:block;font-size:15px;color:var(--soft);line-height:1.45;margin-top:2px}
.live-points i{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--fill);font-style:normal;font-size:17px}
.morelink{text-align:center;padding-top:0;padding-bottom:40px}

/* Features page */
.fpage{padding-top:130px}
.fpage h1{font-size:clamp(44px,6vw,84px)}
.fpage .lead{max-width:34em}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.tile{position:relative;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius);padding:26px 26px 0;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05);min-height:250px}
.tile h3{margin-bottom:8px;padding-right:56px}.tile p{font-size:15px}
.tile .shot{margin:22px auto 0;width:68%;aspect-ratio:600/700;overflow:hidden;border-radius:22px 22px 0 0;border:6px solid #111;border-bottom:0;background:#111}
.tile .shot img{width:100%;height:auto}
.tile.noimg{padding-bottom:26px}
.tile .tag{position:absolute;top:22px;right:22px;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--dot);color:#111}
.tile .n{font-size:13px;font-weight:800;color:var(--faint);letter-spacing:.08em;margin-bottom:12px;font-variant-numeric:tabular-nums}
.tile.soon{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
@media (max-width:1000px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.tiles{grid-template-columns:1fr}.cards{grid-template-columns:1fr}}

/* Light / dark switch for the screens */
.theme{position:relative;display:inline-flex;align-items:center;gap:0;padding:3px;border-radius:999px;background:var(--fill);
  box-shadow:inset 0 1.5px 2.5px rgba(0,0,0,.16),inset 0 -1px 0 rgba(255,255,255,.9)}
.theme span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;font-size:13px;font-weight:600;color:var(--soft);transition:color .3s}
.theme svg{width:16px;height:16px}
.theme::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--surface);
  box-shadow:0 1.5px 1.5px rgba(0,0,0,.14),inset 0 1px 0 #fff;transition:transform .35s var(--ease)}
.theme span:first-child,.screens-dark .theme span:last-child{color:var(--ink)}
.screens-dark .theme span:first-child{color:var(--soft)}
.screens-dark .theme::before{transform:translateX(100%);background:#1c1c1e;box-shadow:0 1.5px 1.5px rgba(0,0,0,.3)}
.screens-dark .theme span:last-child{color:#fff}
.theme span{flex:1;justify-content:center}
.hero-tools{position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center}
.hero-tools .cycle-tabs{position:static;transform:none}
.hero-tools .theme span{padding:8px 10px}
.hero-tools .theme span b{display:none}

/* Icons */
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico .y{fill:var(--dot);stroke:none}.ico .f{fill:currentColor;stroke:none}.ico .w{fill:var(--surface)}
.card .ic,.live-points i{color:var(--ink)}

/* The track: one line from the kicker dot through every heading to the last button */
.track{position:absolute;left:0;top:0;width:0;height:0;z-index:6;pointer-events:none}
.track .leg{position:absolute;overflow:visible}
.track path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.track .rest{stroke:#d3d3ce;stroke-width:2.5}
.track .done{stroke:var(--ink);stroke-width:3}
.track .done-dark{stroke:#fff}
.track circle.st{fill:var(--ground);stroke:#d3d3ce;stroke-width:2.5;transition:stroke .3s}
.track circle.st.passed{stroke:var(--ink)}
.track circle.st.dk{fill:#0b0b0c}.track circle.st.dk.passed{stroke:#fff}
.tdot{position:absolute;left:0;top:0;z-index:7;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#ffc531;pointer-events:none;
  box-shadow:0 0 0 3px var(--ground);will-change:transform}
.tdot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #ffc531;opacity:0;animation:ring 2.4s infinite;will-change:transform,opacity}
.tdot.dk{box-shadow:0 0 0 3px #0b0b0c}
.kicker .dot{visibility:hidden;animation:none}
.line{display:none}

/* Live trip film */
.film{display:flex;flex-direction:column;align-items:center;gap:22px}
.phone .island{position:absolute;z-index:4;left:50%;top:4.06%;height:3.77%;width:27.3%;transform:translateX(-50%);border-radius:999px;background:#000;color:#fff;
  display:flex;align-items:center;justify-content:space-between;padding:0 4%;font-size:calc(var(--w)*.04);font-weight:700;overflow:hidden;
  transition:width .6s var(--ease),height .6s var(--ease),top .6s var(--ease),border-radius .6s var(--ease)}
.island>*{opacity:0;transition:opacity .3s;white-space:nowrap}
.film.on .island{width:62%}
.film.on .island>*{opacity:1;transition-delay:.3s}
.island .ln{background:#0065b0;border-radius:4px;padding:1px 5px;font-size:.85em}
.island .mid{flex:1;padding:0 6%;font-weight:600;color:#cfcfd4;font-size:.9em;overflow:hidden;text-overflow:ellipsis}
.island .min{font-variant-numeric:tabular-nums;color:#ffc531}
.film.out .island{width:86%;height:11%;top:3%;border-radius:calc(var(--w)*.1)}
.film.out .island .mid{color:#fff;font-size:1.05em}
.phone .banner{position:absolute;z-index:4;left:6%;right:6%;top:15.5%;display:flex;gap:4%;align-items:center;padding:4% 5%;border-radius:calc(var(--w)*.07);
  background:rgba(250,250,250,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(0,0,0,.22);
  font-size:calc(var(--w)*.042);line-height:1.3;color:#111;opacity:0;transform:translateY(-30%) scale(.96);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.phone .banner b{display:block}.phone .banner span{color:#555}
.phone .banner .ico{flex:none;width:calc(var(--w)*.09);height:calc(var(--w)*.09)}
.film.out .banner{opacity:1;transform:none;transition-delay:.5s}
.film-steps{list-style:none;display:flex;gap:6px}
.film-steps li{position:relative;overflow:hidden;font-size:13px;font-weight:600;color:var(--soft);padding:7px 12px;border-radius:10px;background:var(--fill)}
.film-steps li.on{color:var(--ink);background:var(--surface);box-shadow:0 1.5px 1.5px rgba(0,0,0,.14),inset 0 1px 0 #fff}
.film-steps li.on::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;background:var(--dot);transform-origin:left;animation:fill var(--scene,3.4s) linear}

/* Roadmap tile */
.tile.road{grid-column:span 2;background:var(--ink);color:#fff;padding-bottom:26px}
.tile.road p{color:rgba(255,255,255,.65)}.tile.road .n{color:rgba(255,255,255,.4)}
.road ol{list-style:none;margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.road li{position:relative;padding:16px 16px 16px 40px;border-radius:16px;background:rgba(255,255,255,.07);font-size:15px;line-height:1.4;color:rgba(255,255,255,.7)}
.road li b{display:block;color:#fff;font-size:16px}
.road li::before{content:"";position:absolute;left:16px;top:21px;width:10px;height:10px;border-radius:50%;border:2px solid var(--dot)}
.road li:first-child::before{background:var(--dot)}
@media (max-width:1000px){.tile.road{grid-column:span 2}}
@media (max-width:620px){.tile.road{grid-column:auto}.road ol{grid-template-columns:1fr}}

/* Tiles with real device mockups */
.tile .tph{height:330px;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;margin:auto -26px 0;padding-top:26px}
.tile .tph .phone{align-self:flex-start;--w:220px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.16))}
.road .link{margin-top:10px;color:#fff;font-size:14px}.steps .card .ic{margin-bottom:14px}

/* Dark mode: follows the system, same palette as the dark app icon (#111, white P, yellow dot) */
:root{color-scheme:light dark}
@media (prefers-color-scheme:dark){
  :root{--ground:#111; --surface:#1c1c1e; --fill:#232325; --ink:#f2f2f0; --soft:#a3a3a0; --faint:#6e6e6b; --line:#2c2c2a}
  .top.scrolled{background:rgba(17,17,17,.82);box-shadow:0 1px 0 rgba(255,255,255,.06)}
  .lang,.key,.cycle-tabs button.on,.cities span.lit,.film-steps li.on,.theme::before{box-shadow:0 1px 2px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
  .cycle-tabs,.cities span,.card .ic,.theme{box-shadow:inset 0 1.5px 2.5px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.05)}
  .key-ink{color:#111;box-shadow:0 2px 3px rgba(0,0,0,.5),inset 0 1px 0 #fff}
  .ticker{background:#000;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(255,255,255,.06)}
  .dark-strip{background:#000}
  .card,.tile{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
  .tile.soon{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
  .tile.road{background:#000;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .tile .shot{border-color:#000;background:#000}
  #covmap{background:#18181a;border-color:rgba(255,255,255,.07)}
  #covmap circle[stroke="#111111"]{stroke:#f2f2f0}
  #covmap circle[fill="#ffffff"]{fill:#18181a}
  .covlegend span,.covnote{color:#8e8e93}
  .covtip{box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.07)}
  .screens-dark .theme::before{background:#3a3a3c}
  .theme span,.theme span:first-child{color:var(--soft)}
  body:not(.screens-dark) .theme span:first-child,.screens-dark .theme span:last-child{color:var(--ink)}
  .track .rest{stroke:#3a3a3a}
  .track circle.st{stroke:#3a3a3a}
  .track circle.st.dk{fill:#000}
  .tdot.dk{box-shadow:0 0 0 3px #000}
  .phone{filter:drop-shadow(0 calc(var(--w)*.09) calc(var(--w)*.08) rgba(0,0,0,.6)) drop-shadow(0 calc(var(--w)*.02) calc(var(--w)*.025) rgba(0,0,0,.5))}
}