/* Drroo — landing page styles (generated from _build/parts — edit the parts or this file) */

/* ======================================================================
   HERO
   ====================================================================== */
/* Hero — layered night-city parallax scene, headline and booking card.
   Units: scene layers are drawn in "city units" (1u = var(--u) px) so the skyline keeps its proportions
   at every width and always extends far beyond the viewport edges (3000u wide). */

.hero {
  /* scene metrics */
  --u: min(clamp(0.62px, 0.3px + 0.05vw, 1.25px), 0.115svh);
  --street: clamp(116px, 16.5svh, 170px);
  --hero-tick: clamp(44px, 4.2vw, 66px);
  --road-cover: var(--hero-tick);
  --vis-road: calc(var(--street) - var(--road-cover));
  --lamp-h: calc(78 * var(--u));
  --car-w: clamp(92px, 6.4vw + 30px, 156px);
  --hero-gap: clamp(14px, 2.6svh, 28px);

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [copy-start] minmax(0, 720px)
    [copy-end] clamp(28px, 4vw, 80px)
    [book-start] minmax(300px, clamp(340px, 30vw, 440px))
    [book-end] minmax(var(--gutter), 1fr)
    [full-end];
  align-items: center;
  min-height: max(100svh, 700px);
  padding: calc(var(--header-h) + clamp(12px, 3.4svh, 44px)) 0 calc(var(--street) + clamp(24px, 5svh, 60px));
  overflow: clip;
  background: var(--ink-1000);
}

/* Performance note — per-frame values never touch the scene through custom properties.
   A custom property changing on an element restyles its whole subtree (measured 5–9 ms per frame for the
   ~530-node scene). So hero.js writes plain properties straight onto the few moving elements (`translate`
   on each layer, the car and the flare, `opacity` on the shade), and only the small copy / card / cue
   branch reads the exit progress as --hero-p: registered as non-inherited and handed down explicitly. */
@property --hero-p {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.hero-copy,
.hero-book,
.hero-card,
.hero-cue {
  --hero-p: inherit;
}

/* Empty box spanning the hero: the engine's exit progress is measured on it (data-progress="exit") */
.hero-progress {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------------- Scene ---------------- */
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
  user-select: none;
}

/* Each layer's `translate` is written by hero.js: pointer parallax (--depth) on desktop, plus on
   tablets/phones a counter-shift that damps the scroll parallax (--sink = 1 - data-speed) so the city
   doesn't vanish while the stage is still on screen. The engine's own parallax uses `transform`. */
.hero-layer {
  position: absolute;
}

.hero-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Sky: deep ink → violet, with drifting aurora glows */
.hero-sky {
  inset: -18vh -6vw 0;
  background: linear-gradient(180deg, #040309 0%, #07060f 16%, #0e0b1c 32%, #191230 47%, #271a3e 60%, #3a2149 71%, #55284c 80%, #713049 88%, #8b3a46 100%);
}

.hero-aurora {
  position: absolute;
  border-radius: 50%;
  animation: hero-aurora 26s ease-in-out infinite alternate;
}

.hero-aurora--a {
  left: -14%;
  top: 8%;
  width: 66%;
  height: 52%;
  background: radial-gradient(closest-side, rgba(139, 124, 248, 0.3), rgba(139, 124, 248, 0.08) 58%, transparent);
}

.hero-aurora--b {
  right: -16%;
  top: 2%;
  width: 64%;
  height: 56%;
  background: radial-gradient(closest-side, rgba(250, 126, 56, 0.2), rgba(250, 126, 56, 0.05) 60%, transparent);
  animation-duration: 32s;
  animation-delay: -9s;
}

.hero-aurora--c {
  left: 24%;
  top: 22%;
  width: 54%;
  height: 22%;
  rotate: -9deg;
  background: radial-gradient(closest-side, rgba(61, 220, 151, 0.07), rgba(139, 124, 248, 0.04) 60%, transparent);
  animation-duration: 21s;
  animation-delay: -5s;
}

@keyframes hero-aurora {
  from {
    transform: translate3d(-4%, 0, 0) scale(1);
  }
  to {
    transform: translate3d(5%, 4%, 0) scale(1.14);
  }
}

/* Stars */
.hero-stars {
  inset: -12vh -3vw 0;
}

/* stars: <i> = small, <b> = big sparkle; position/size/timing come from inline custom properties */
.hero-stars > i,
.hero-stars > b {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--s) * 1px);
  height: calc(var(--s) * 1px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
  animation: hero-twinkle calc(var(--t) * 1s) ease-in-out calc(var(--d) * 1s) infinite;
}

.hero-stars > b {
  box-shadow: 0 0 10px 1px rgba(255, 236, 214, 0.75);
}

.hero-stars > b::before,
.hero-stars > b::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1px;
  translate: -50% -50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
}

.hero-stars > b::after {
  rotate: 90deg;
}

@keyframes hero-twinkle {
  0%,
  100% {
    opacity: 0.95;
    transform: scale(1);
  }
  50% {
    opacity: 0.22;
    transform: scale(0.6);
  }
}

.hero-shoot {
  position: absolute;
  left: 66%;
  top: 14%;
  width: 160px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff, rgba(255, 214, 189, 0.5) 30%, transparent);
  rotate: -19deg;
  opacity: 0;
  animation: hero-shoot 11s ease-in 4s infinite;
}

@keyframes hero-shoot {
  0% {
    opacity: 0;
    transform: translateX(0) scaleX(0.3);
  }
  1.5% {
    opacity: 1;
  }
  6% {
    opacity: 0;
    transform: translateX(-340px) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-340px) scaleX(1);
  }
}

/* The big low sun / moon that sinks as you scroll */
.hero-sun {
  inset: 0;
  --sun-x: 360;
  --sun-y: 128;
  --sun-r: 290;
}

.hero-sun__disc,
.hero-sun__halo {
  position: absolute;
  left: calc(50% + (var(--sun-x) - var(--sun-r)) * var(--u));
  bottom: calc(var(--street) + (var(--sun-y) - var(--sun-r)) * var(--u));
  width: calc(var(--sun-r) * 2 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
}

.hero-sun__disc {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 244, 230, 0.9), rgba(255, 244, 230, 0) 46%),
    linear-gradient(180deg, #ffd2a8 0%, #ffab70 32%, #fa7e38 62%, #e4582a 100%);
  box-shadow: 0 0 120px 20px rgba(250, 126, 56, 0.28), inset 0 -40px 80px rgba(160, 40, 60, 0.35);
  opacity: 0.94;
  -webkit-mask-image: linear-gradient(180deg, #000 48%, rgba(0, 0, 0, 0.92) 58%, #000 59%, #000 66%, rgba(0, 0, 0, 0.55) 67.5%, #000 69%, #000 75%, rgba(0, 0, 0, 0.35) 76.5%, #000 78.5%, #000 83%, rgba(0, 0, 0, 0.2) 85%, #000 87%);
  mask-image: linear-gradient(180deg, #000 48%, rgba(0, 0, 0, 0.92) 58%, #000 59%, #000 66%, rgba(0, 0, 0, 0.55) 67.5%, #000 69%, #000 75%, rgba(0, 0, 0, 0.35) 76.5%, #000 78.5%, #000 83%, rgba(0, 0, 0, 0.2) 85%, #000 87%);
}

.hero-sun__halo {
  scale: 2.1;
  background: radial-gradient(closest-side, rgba(250, 126, 56, 0.34), rgba(236, 102, 32, 0.12) 45%, rgba(139, 60, 120, 0.05) 70%, transparent);
}

/* City layers (generated SVG), all anchored on the road's top edge */
.hero-city {
  left: calc(50% - 1500 * var(--u));
  width: calc(3000 * var(--u));
  height: calc(var(--h) * var(--u));
  bottom: calc(var(--street) - var(--foot, 70) * var(--u));
}

/* Intro: the skyline rises in depth order, the sun lifts, the route network fades in last */
.hero-city > .hero-svg,
.hero-sun__disc,
.hero-sun__halo {
  animation: hero-rise 1.8s var(--ease-out) both;
}

.hero-far > .hero-svg {
  animation-delay: 0.05s;
}

.hero-mid > .hero-svg {
  animation-delay: 0.15s;
}

.hero-fly > .hero-svg {
  animation-delay: 0.25s;
}

.hero-near > .hero-svg {
  animation-delay: 0.32s;
}

.hero-sun__disc,
.hero-sun__halo {
  animation-name: hero-sunrise;
  animation-duration: 2.6s;
}

.hero-routes > * {
  animation: hero-fade 1.2s var(--ease-out) 1s both;
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(46px);
  }
}

@keyframes hero-sunrise {
  from {
    opacity: 0;
    transform: translateY(18%);
  }
}

@keyframes hero-fade {
  from {
    opacity: 0;
  }
}

/* Soft light that follows the cursor across the sky (mouse / trackpad only; hero.js moves it) */
.hero-flare {
  position: absolute;
  left: -26vw;
  top: -26vw;
  width: 52vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 170, 110, 0.13), rgba(139, 124, 248, 0.06) 45%, transparent);
  translate: 50vw 50svh;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .hero-flare {
    opacity: 1;
  }
}

.hero-far .hero-svg {
  filter: saturate(0.9);
}

.hero-blink {
  animation: hero-blink var(--t) linear var(--d) infinite;
}

@keyframes hero-blink {
  0%,
  44% {
    opacity: 1;
  }
  45%,
  71% {
    opacity: 0;
  }
  72%,
  100% {
    opacity: 1;
  }
}

.hero-av {
  animation: hero-av var(--t) linear var(--d) infinite;
}

@keyframes hero-av {
  0%,
  9% {
    opacity: 1;
  }
  10%,
  100% {
    opacity: 0.12;
  }
}

/* Flyover traffic (tiny Drroo cars) */
.hero-mini {
  position: absolute;
  left: calc(1500 * var(--u));
  bottom: calc(134 * var(--u));
  width: calc(36 * var(--u));
  transform: translateX(calc(-18vw));
  animation: hero-fly-r 17s linear -6s infinite;
}

.hero-mini--l {
  width: calc(31 * var(--u));
  transform: translateX(26vw);
  animation-name: hero-fly-l;
  animation-duration: 23s;
  animation-delay: -15s;
}

.hero-mini__car {
  position: relative;
  --car-body: #f58a4c;
  --car-wheel: #efe6f7;
  --car-hub: #2d2640;
  --car-valve: #2d2640;
  --wheel-speed: 0.5s;
  filter: brightness(0.86);
}

.hero-mini--l .hero-mini__car {
  --car-body: #e9d9cb;
  --car-wheel: #f58a4c;
  scale: -1 1;
}

.hero-mini__beam {
  position: absolute;
  left: 92%;
  top: 40%;
  width: 260%;
  height: 70%;
  background: linear-gradient(90deg, rgba(255, 226, 176, 0.5), rgba(255, 226, 176, 0) 80%);
  clip-path: polygon(0 34%, 100% 0, 100% 100%, 0 58%);
}

.hero-mini--l .hero-mini__beam {
  left: auto;
  right: 92%;
  scale: -1 1;
}

@keyframes hero-fly-r {
  from {
    transform: translateX(calc(-50vw - 160px));
  }
  to {
    transform: translateX(calc(50vw + 120px));
  }
}

@keyframes hero-fly-l {
  from {
    transform: translateX(calc(50vw + 120px));
  }
  to {
    transform: translateX(calc(-50vw - 160px));
  }
}

/* Route network overlay — "connecting every move".
   Laid out on the content columns so pins always land in the free band between the copy/card and the road. */
.hero-routes {
  --wc: min(100% - 2 * var(--gutter), 720px + clamp(28px, 4vw, 80px) + clamp(340px, 30vw, 440px));
  --band: clamp(54px, 10svh - 12px, 150px);
  left: calc(50% - var(--wc) / 2);
  width: var(--wc);
  bottom: var(--street);
  height: calc(var(--band) * 2.4);
}

.hero-routes path {
  vector-effect: non-scaling-stroke;
}

.hero-routes__web path {
  fill: none;
  stroke: rgba(196, 189, 255, 0.4);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 3 8;
  animation: hero-flow 2.4s linear infinite;
}

.hero-trip__base {
  fill: none;
  stroke: url(#hero-gr);
  stroke-width: 7;
  opacity: 0.16;
  stroke-linecap: round;
}

.hero-trip__flow {
  fill: none;
  stroke: url(#hero-gr);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 11 9;
  animation: hero-flow-trip 1.4s linear infinite;
}

.hero-trip__comet {
  fill: none;
  stroke: #fff6ec;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 2.5 200;
  stroke-dashoffset: 3;
  animation: hero-comet 4.8s cubic-bezier(0.55, 0.06, 0.3, 1) 1.4s infinite;
}

.hero-routes__svg--m {
  display: none;
}

.hero-routes__svg--m .hero-trip__base,
.hero-routes__svg--m .hero-trip__flow {
  stroke: url(#hero-grm);
}

@keyframes hero-flow {
  to {
    stroke-dashoffset: -22;
  }
}

@keyframes hero-flow-trip {
  to {
    stroke-dashoffset: -40;
  }
}

@keyframes hero-comet {
  from {
    stroke-dashoffset: 3;
  }
  to {
    stroke-dashoffset: -101;
  }
}

.hero-pin {
  --pin: #b8aefc;
  --pin-glow: rgba(139, 124, 248, 0.55);
  position: absolute;
  left: calc(var(--x) * 1%);
  bottom: calc(var(--y) * var(--band));
  width: 0;
  height: 0;
}

.hero-pin--pickup {
  --pin: #3ddc97;
  --pin-glow: rgba(61, 220, 151, 0.55);
}

.hero-pin--drop {
  --pin: #fa7e38;
  --pin-glow: rgba(250, 126, 56, 0.6);
}

.hero-pin--hub {
  --pin: #ffc857;
  --pin-glow: rgba(255, 200, 87, 0.5);
}

.hero-pin__dot {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 26%, var(--pin) 32% 100%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pin) 22%, transparent), 0 0 22px 4px var(--pin-glow);
}

.hero-pin__dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1.5px solid var(--pin);
  opacity: 0;
  animation: hero-ping 2.8s var(--ease-out) infinite;
}

.hero-pin:nth-of-type(2n) .hero-pin__dot::after {
  animation-delay: -1.1s;
}

.hero-pin:nth-of-type(3n) .hero-pin__dot::after {
  animation-delay: -1.9s;
}

@keyframes hero-ping {
  0% {
    transform: scale(0.5);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.hero-pin__label {
  position: absolute;
  left: 13px;
  bottom: 9px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-pill);
  background: rgba(13, 10, 21, 0.78);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.8);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.hero-pin--pickup .hero-pin__label,
.hero-pin--drop .hero-pin__label {
  color: #1a0d05;
  border-color: transparent;
  background: var(--pin);
}

.hero-pin--flip .hero-pin__label {
  left: auto;
  right: 13px;
}

.hero-pin--mini .hero-pin__dot {
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
}

/* Street: road, lamps and traffic (moves with the page, speed 1) */
.hero-street {
  left: -90px;
  right: -90px;
  bottom: -64px;
  height: calc(var(--street) + 64px + var(--lamp-h) + 60px);
}

.hero-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--street) + 64px);
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(255, 170, 100, 0.05), transparent 70%),
    linear-gradient(180deg, #1a1426 0, #120e1c 14px, #0e0b17 45%, #09070f 100%);
}

.hero-road__curb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: linear-gradient(180deg, #4a3c66 0, #2c2342 2px, #1e182d 10px);
}

.hero-road__lane {
  position: absolute;
  left: 0;
  top: calc(10px + (var(--vis-road) - 10px) * 0.5);
  width: calc(100% + 96px);
  height: 3px;
  background: repeating-linear-gradient(90deg, rgba(246, 243, 250, 0.38) 0 46px, transparent 46px 96px);
  animation: hero-lane 1.1s linear infinite;
}

.hero-road__edge {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 184, 137, 0.25) 20%, rgba(255, 184, 137, 0.25) 80%, transparent);
}

@keyframes hero-lane {
  to {
    transform: translateX(-96px);
  }
}

.hero-lamps {
  position: absolute;
  inset: 0;
}

.hero-lamp {
  position: absolute;
  left: var(--x);
  bottom: calc(var(--street) + 64px + 3px);
  width: 4px;
  height: var(--lamp-h);
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #08060d, #1c1729 55%, #08060d);
}

.hero-lamp::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0;
  width: 20px;
  height: 12px;
  border: solid #15111f;
  border-width: 3px 3px 0 0;
  border-radius: 0 12px 0 0;
}

.hero-lamp::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 8px;
  width: 18px;
  height: 6px;
  border-radius: 2px 2px 9px 9px;
  background: #ffe2b0;
  box-shadow: 0 0 12px 3px rgba(255, 196, 120, 0.75), 0 0 54px 18px rgba(255, 160, 80, 0.2);
}

.hero-lamp i {
  position: absolute;
  left: 23px;
  top: 12px;
  width: 190px;
  height: calc(var(--lamp-h) + 26px);
  translate: -50% 0;
  background:
    radial-gradient(46% 12% at 50% 93%, rgba(255, 184, 110, 0.2), transparent 75%),
    radial-gradient(34% 90% at 50% 0%, rgba(255, 200, 130, 0.075), transparent 80%);
}

/* Traffic */
.hero-traffic {
  position: absolute;
  left: 90px;
  right: 90px;
  bottom: 0;
  height: 100%;
}

.hero-car {
  position: absolute;
  width: var(--car-w);
}

/* the hero car drives sideways as the hero scrolls out: hero.js sets its `translate` from the exit progress */
.hero-car--main {
  left: 7%;
  bottom: calc(var(--street) + 64px - 10px - (var(--vis-road) - 10px) * 0.82);
  z-index: 2;
}

.hero-car__in {
  position: relative;
  animation: hero-car-in 2.8s var(--ease-out) 0.25s both;
}

@keyframes hero-car-in {
  from {
    transform: translateX(calc(-1 * var(--car-w) - 14vw));
  }
}

/* `rotate` (lean under acceleration) is written by hero.js from scroll velocity */
.hero-car__body {
  position: relative;
  transform-origin: 28% 96%;
  animation: hero-bob 0.42s ease-in-out infinite alternate;
}

@keyframes hero-bob {
  to {
    transform: translateY(-1.5px);
  }
}

.hero-car__icon {
  position: relative;
  z-index: 1;
  --car-body: var(--orange-500);
  --car-wheel: #fbf7ff;
  --car-hub: #241e33;
  --car-valve: var(--orange-500);
  --wheel-speed: 0.62s;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}

.hero-car__cabin {
  position: absolute;
  left: 21%;
  top: 26.5%;
  width: 58%;
  height: 38%;
  border-radius: 48% 48% 4% 4% / 76% 76% 6% 6%;
  background: linear-gradient(165deg, #5b4680 0%, #2b2142 48%, #171225 100%);
  overflow: hidden;
}

.hero-car__cabin::after {
  content: "";
  position: absolute;
  left: 18%;
  top: -20%;
  width: 22%;
  height: 160%;
  rotate: 24deg;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

.hero-car__lamp {
  position: absolute;
  z-index: 2;
  right: -1.5%;
  top: 57%;
  width: 6%;
  height: 9%;
  border-radius: 40%;
  background: #fff8e8;
  box-shadow: 0 0 10px 3px rgba(255, 226, 170, 0.9), 0 0 32px 10px rgba(255, 190, 110, 0.4);
}

.hero-car__tail {
  position: absolute;
  z-index: 2;
  left: -1%;
  top: 60%;
  width: 3.5%;
  height: 8%;
  border-radius: 40%;
  background: #ff5263;
  box-shadow: 0 0 10px 3px rgba(255, 77, 94, 0.6);
}

.hero-car__beam {
  position: absolute;
  left: 95%;
  top: 34%;
  width: 250%;
  height: 84%;
  background: linear-gradient(90deg, rgba(255, 228, 182, 0.42), rgba(255, 210, 150, 0.1) 40%, transparent 82%);
  clip-path: polygon(0 40%, 100% 10%, 100% 100%, 0 56%);
  -webkit-mask-image: radial-gradient(120% 50% at 0% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(120% 50% at 0% 50%, #000 30%, transparent 100%);
}

.hero-car__pool {
  position: absolute;
  left: 100%;
  bottom: -9%;
  width: 230%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 210, 150, 0.26), transparent);
}

.hero-car__shadow {
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -7%;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent);
}

.hero-car__speed {
  position: absolute;
  right: 92%;
  top: 22%;
  width: 90%;
  height: 52%;
  background: repeating-linear-gradient(180deg, transparent 0 8px, rgba(255, 214, 189, 0.5) 8px 9.5px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 85%);
  mask-image: linear-gradient(90deg, transparent, #000 85%);
  opacity: 0; /* speed lines: opacity + scale written by hero.js from scroll velocity */
  scale: 0.4 1;
  transform-origin: 100% 50%;
}

.hero-car--oncoming {
  left: 0;
  bottom: calc(var(--street) + 64px - 10px - (var(--vis-road) - 10px) * 0.3);
  width: calc(var(--car-w) * 0.56);
  z-index: 1;
  transform: translateX(58vw);
  animation: hero-oncoming 13s linear -4.5s infinite;
}

.hero-car--oncoming .hero-car__icon {
  --car-body: #efe2d6;
  --car-wheel: var(--orange-500);
  --car-hub: #241e33;
  --car-valve: #fff3e8;
  --wheel-speed: 0.5s;
  filter: brightness(0.82) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}

.hero-car--oncoming .hero-car__body {
  animation-duration: 0.36s;
}

.hero-car--oncoming .hero-car__beam {
  left: auto;
  right: 95%;
  scale: -1 1;
  opacity: 0.55;
}

.hero-car--oncoming .hero-car__lamp {
  right: auto;
  left: -1.5%;
}

@keyframes hero-oncoming {
  from {
    transform: translateX(calc(100vw + 40px));
  }
  to {
    transform: translateX(calc(-100% - 220px));
  }
}

/* Foreground bokeh (nearest layer, moves faster than the page) */
.hero-bokeh {
  inset: 0;
}

.hero-bokeh__dot {
  position: absolute;
  width: var(--z);
  height: var(--z);
  margin: calc(var(--z) / -2) 0 0 calc(var(--z) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, var(--c) 38%, transparent 70%);
  animation: hero-float var(--t) ease-in-out var(--d) infinite alternate;
}

@keyframes hero-float {
  to {
    transform: translate3d(14px, -22px, 0) scale(1.08);
  }
}

/* Legibility scrim + scroll-out dimming */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 3, 9, 0.55) 0%, rgba(4, 3, 9, 0) 22%),
    radial-gradient(52% 64% at 28% 47%, rgba(7, 6, 12, 0.62) 0%, rgba(7, 6, 12, 0.36) 50%, rgba(7, 6, 12, 0) 82%);
}

/* dims the scene as the hero scrolls out (opacity written by hero.js) */
.hero-shade {
  position: absolute;
  inset: 0;
  background: #07060c;
  opacity: 0;
}

/* ---------------- Copy ---------------- */
.hero-copy {
  position: relative;
  z-index: 2;
  grid-column: copy;
  translate: 0 calc(var(--hero-p) * -120px);
  opacity: clamp(0, calc(1 - var(--hero-p) * 1.8), 1);
}

.hero-copy__in {
  display: grid;
  justify-items: start;
  gap: var(--hero-gap);
}

.hero-kicker {
  margin-bottom: calc(var(--hero-gap) * -0.15);
}

.hero-chip {
  gap: 0.65em;
  padding: 0.5em 1em 0.5em 0.85em;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(17, 14, 26, 0.6);
  color: var(--text);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.8);
}

.hero-title {
  font-size: min(var(--fs-h1), 11.2svh);
  --split-delay: 120ms;
}

.hero-title .text-gradient,
.hero-title .tg-split .split-i {
  background-image: linear-gradient(100deg, #ffd2b0 0%, #ff9a5c 40%, #fa7e38 70%, #ffb07a 100%);
}

.hero-lead {
  max-width: 33em;
  color: #d3cde0;
}

.hero-stores {
  margin-top: calc(var(--hero-gap) * 0.2);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 0;
  margin-top: calc(var(--hero-gap) * 0.1);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.hero-trust li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin: 0 16px;
  border-radius: 50%;
  background: var(--ink-500);
}

.hero-trust strong {
  color: var(--text);
  font-weight: 700;
}

.hero-trust__star {
  color: var(--sun);
}

.hero-trust__verified .icon {
  color: var(--mint);
  width: 18px;
  height: 18px;
}

.hero-avatars {
  display: inline-flex;
  margin-right: 4px;
}

.hero-avatars i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -9px;
  border: 2px solid #0d0a15;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #1a0d05;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-avatars i:first-child {
  margin-left: 0;
}

.hero-avatars i:nth-child(2) {
  background: linear-gradient(135deg, #ffe08a, #ffc857);
}

.hero-avatars i:nth-child(3) {
  background: linear-gradient(135deg, #c9c0ff, #8b7cf8);
}

.hero-avatars i:nth-child(4) {
  background: linear-gradient(135deg, #a6f5d1, #3ddc97);
}

/* ---------------- Booking card ---------------- */
.hero-book {
  position: relative;
  z-index: 3;
  grid-column: book;
  translate: 0 calc(var(--hero-p) * -70px);
}

.hero-card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: clamp(16px, 2.5svh, 26px) clamp(16px, 1.7vw, 24px) clamp(18px, 2.6svh, 26px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(31, 25, 48, 0.72) 0%, rgba(16, 13, 25, 0.84) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.95), 0 20px 40px -24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  opacity: clamp(0, calc(1 - var(--hero-p) * 1.5), 1);
  animation: hero-card-in 1.3s var(--ease-out) 0.5s backwards;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255, 176, 122, 0.75), rgba(255, 255, 255, 0.07) 28%, rgba(255, 255, 255, 0) 55%, rgba(139, 124, 248, 0.4));
  -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);
  pointer-events: none;
}

@keyframes hero-card-in {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
}

.hero-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hero-card {
  container-type: inline-size;
}

@container (max-width: 318px) {
  .hero-card__word,
  .hero-fare__tag {
    display: none;
  }
}

.hero-card__title {
  font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hero-card__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 5px 11px 5px 9px;
  border: 1px solid rgba(61, 220, 151, 0.24);
  border-radius: var(--r-pill);
  background: rgba(61, 220, 151, 0.09);
  color: #9af2ca;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.hero-card__count {
  display: inline-block;
  min-width: 1.2em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Segmented service picker (native radio group) */
.hero-seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-inline-size: 0;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.hero-seg__opt {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.hero-seg__opt input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.hero-seg__btn {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 2px 7px;
  border-radius: 14px;
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
  transition: color 0.35s var(--ease-out);
}

.hero-seg__btn .icon {
  width: 22px;
  height: 22px;
  transition: transform 0.5s var(--ease-spring);
}

.hero-seg__opt:hover .hero-seg__btn {
  color: var(--text);
}

.hero-seg__opt input:checked + .hero-seg__btn {
  color: #1a0d05;
}

.hero-seg__opt input:checked + .hero-seg__btn .icon {
  transform: translateY(-1px) scale(1.06);
}

.hero-seg__opt input:focus-visible + .hero-seg__btn {
  outline: 2px solid var(--orange-200);
  outline-offset: 2px;
}

.hero-seg__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 4);
  border-radius: 14px;
  background: var(--grad-brand);
  box-shadow: 0 10px 26px -10px var(--orange-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: translate 0.55s var(--ease-out);
}

.hero-seg:has(.hero-seg__opt:nth-of-type(2) input:checked) .hero-seg__thumb {
  translate: 100% 0;
}

.hero-seg:has(.hero-seg__opt:nth-of-type(3) input:checked) .hero-seg__thumb {
  translate: 200% 0;
}

.hero-seg:has(.hero-seg__opt:nth-of-type(4) input:checked) .hero-seg__thumb {
  translate: 300% 0;
}

/* Views: form and result share one grid cell so the card keeps its height */
.hero-views {
  display: grid;
}

.hero-view {
  grid-area: 1 / 1;
  display: grid;
  align-content: space-between;
  gap: 12px;
  min-width: 0;
  transition: opacity 0.45s var(--ease-out), translate 0.6s var(--ease-out), visibility 0s linear 0s;
}

.hero-view[hidden] {
  display: grid;
  visibility: hidden;
  opacity: 0;
  translate: 18px 0;
  transition: opacity 0.25s ease-in, translate 0.4s var(--ease-out), visibility 0s linear 0.25s;
}

.hero-view--form[hidden] {
  translate: -18px 0;
}

.hero-route {
  position: relative;
  display: grid;
  gap: 8px;
}

.hero-field {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  min-height: 58px;
  padding: 7px 8px 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  cursor: text;
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.35s var(--ease-out);
}

.hero-field:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.hero-field:focus-within {
  border-color: var(--orange-400);
  background: rgba(250, 126, 56, 0.07);
  box-shadow: 0 0 0 3px rgba(250, 126, 56, 0.2);
}

.hero-field.is-invalid {
  border-color: #ff7a8c;
  box-shadow: 0 0 0 3px rgba(255, 93, 115, 0.18);
}

.hero-field__mark {
  grid-column: 1;
  grid-row: 1 / 3;
  justify-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(61, 220, 151, 0.18);
}

.hero-field--drop .hero-field__mark {
  border-radius: 3px;
  background: var(--orange-500);
  box-shadow: 0 0 0 4px rgba(250, 126, 56, 0.2);
}

.hero-field__label {
  grid-column: 2;
  grid-row: 1;
  color: var(--text-3);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  cursor: text;
}

.hero-field__input {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  padding: 1px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  outline: none;
  text-overflow: ellipsis;
}

.hero-field__input::placeholder {
  color: #8e86a0;
  opacity: 1;
}

.hero-locate {
  grid-column: 3;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(250, 126, 56, 0.1);
  color: var(--orange-300);
  transition: background-color 0.25s, color 0.25s, transform 0.4s var(--ease-spring);
}

.hero-locate:hover {
  background: rgba(250, 126, 56, 0.2);
  color: var(--orange-200);
}

.hero-locate:active {
  transform: scale(0.92);
}

.hero-locate .icon {
  width: 20px;
  height: 20px;
}

.hero-locate.is-busy .icon {
  animation: hero-spin 0.8s linear infinite;
}

@keyframes hero-spin {
  to {
    transform: rotate(360deg);
  }
}

.hero-route__line {
  position: absolute;
  left: 22px;
  top: 40px;
  bottom: 40px;
  width: 2px;
  background: repeating-linear-gradient(180deg, rgba(196, 189, 209, 0.45) 0 3px, transparent 3px 7px);
}

.hero-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -4px;
  color: #ffa3b0;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
}

.hero-error:empty {
  position: absolute;
}

.hero-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.hero-suggest__label {
  color: var(--text-3);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-suggest__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hero-suggest__btn {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 600;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.hero-suggest__btn:hover {
  border-color: rgba(250, 126, 56, 0.5);
  background: var(--orange-soft);
  color: var(--orange-200);
}

.hero-fine {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(61, 220, 151, 0.07);
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}

.hero-fine .icon {
  width: 16px;
  height: 16px;
  color: var(--mint);
}

.hero-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 2px;
}

/* Result view */
.hero-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hero-result__title {
  overflow: hidden;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-result__title:focus {
  outline: none;
}

.hero-result__title:focus-visible {
  outline: 2px solid var(--orange-400);
  outline-offset: 4px;
  border-radius: 6px;
}

.hero-result__edit {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  min-height: 32px;
  padding: 0 11px 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 700;
  transition: border-color 0.2s, color 0.2s;
}

.hero-result__edit:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text);
}

.hero-result__edit .icon {
  width: 16px;
  height: 16px;
}

.hero-view--result {
  gap: 10px;
}

.hero-result__meta {
  min-height: 1.3em;
  margin-top: -4px;
  overflow: hidden;
  color: var(--text-3);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* room for three rows is reserved so the card never jumps when fares arrive */
.hero-fares {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: calc(3 * 48px + 2 * 6px);
}

.hero-fare {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 5px 14px 5px 7px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  animation: hero-fare-in 0.7s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 90ms + 80ms);
}

.hero-fare--best {
  border-color: rgba(250, 126, 56, 0.5);
  background: linear-gradient(90deg, rgba(250, 126, 56, 0.16), rgba(250, 126, 56, 0.03));
}

@keyframes hero-fare-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.hero-fare__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--orange-300);
}

.hero-fare__icon .icon {
  width: 21px;
  height: 21px;
}

.hero-fare--best .hero-fare__icon {
  background: var(--orange-500);
  color: #1a0d05;
}

.hero-fare__info {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.hero-fare__name {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
}

.hero-fare__tag {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(250, 126, 56, 0.18);
  color: var(--orange-300);
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-fare__meta {
  overflow: hidden;
  color: var(--text-3);
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-fare__price {
  display: grid;
  justify-items: end;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.hero-fare__eta {
  color: #8ff0c4;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
}

.hero-result__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-top: 2px;
}

.hero-result__note {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 600;
}

.hero-book-btn {
  flex: 1 1 auto;
  min-height: 52px;
}

.hero-result__note .icon {
  width: 16px;
  height: 16px;
  color: var(--mint);
}

/* Scroll cue — a slim vertical label on the right edge, clear of the city */
.hero-cue {
  position: absolute;
  z-index: 3;
  right: clamp(10px, 1.6vw, 34px);
  bottom: calc(var(--street) + clamp(14px, 3svh, 30px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px 6px 6px;
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  translate: 0 calc(var(--hero-p) * -60px);
  opacity: clamp(0, calc(1 - var(--hero-p) * 4), 1);
  transition: color 0.2s;
}

.hero-cue:hover {
  color: var(--orange-300);
}

.hero-cue__text {
  writing-mode: vertical-rl;
  rotate: 180deg;
}

.hero-cue__line {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
}

.hero-cue__line i {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 16px;
  background: var(--orange-400);
  box-shadow: 0 0 8px var(--orange-500);
  animation: hero-cue 2s var(--ease-in-out) infinite;
}

@keyframes hero-cue {
  0% {
    transform: translateY(-16px);
  }
  70%,
  100% {
    transform: translateY(46px);
  }
}

/* Pause every loop while the hero is off screen (set by hero.js) */
.hero.is-offscreen *,
.hero.is-offscreen *::before,
.hero.is-offscreen *::after {
  animation-play-state: paused !important;
}

/* ---------------- Responsive ---------------- */
@media (min-width: 1021px) and (max-height: 760px) {
  .hero {
    --hero-gap: clamp(12px, 2.3svh, 20px);
  }

  .hero-lead {
    font-size: 1.12rem;
  }

  .hero-pin--aux .hero-pin__label {
    display: none;
  }
}

@media (max-width: 1020px) {
  .hero {
    --u: clamp(0.6px, 0.34px + 0.062vw, 0.95px);
    --street: clamp(104px, 9vw + 70px, 150px);
    --card-lift: clamp(34px, 5vw, 56px);
    --road-cover: var(--card-lift);
    --city-min: clamp(200px, 26vw + 90px, 380px);
    grid-template-columns: [full-start] var(--gutter) [copy-start book-start] minmax(0, 1fr) [copy-end book-end] var(--gutter) [full-end];
    grid-template-rows: auto auto;
    align-items: start;
    min-height: 0;
    padding: 0 0 calc(clamp(36px, 5vw, 60px) + clamp(30px, 4vw, 48px));
  }

  .hero-scene {
    grid-row: auto / 2;
    grid-column: auto / auto;
  }

  .hero-copy {
    grid-row: 1;
    min-height: max(100svh, 600px);
    padding: calc(var(--header-h) + clamp(18px, 5vw, 56px)) 0 calc(var(--street) + var(--city-min));
    opacity: clamp(0, calc(1 - var(--hero-p) * 1.4), 1);
  }

  .hero-book {
    grid-row: 2;
    justify-self: center;
    width: min(100%, 540px);
    margin-top: calc(var(--card-lift) * -1);
    translate: none;
  }

  .hero-card {
    opacity: 1;
    background: linear-gradient(180deg, rgba(31, 25, 48, 0.9) 0%, rgba(16, 13, 25, 0.96) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }

  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(4, 3, 9, 0.6) 0%, rgba(4, 3, 9, 0.28) 34%, rgba(4, 3, 9, 0) 58%),
      radial-gradient(90% 46% at 30% 30%, rgba(7, 6, 12, 0.5), rgba(7, 6, 12, 0) 80%);
  }

  .hero-sun {
    --sun-x: 150;
    --sun-y: 140;
    --sun-r: 210;
  }

  .hero-car--main {
    left: 5%;
  }

  .hero-routes {
    --wc: calc(100% - 2 * var(--gutter));
    --band: calc(var(--city-min) * 0.62);
  }

  .hero-pin {
    left: calc(var(--xm, var(--x)) * 1%);
    bottom: calc(var(--ym, var(--y)) * var(--band));
  }

  .hero-pin--mini {
    display: none;
  }

  .hero-routes__svg--d {
    display: none;
  }

  .hero-routes__svg--m {
    display: block;
  }

  .hero-cue {
    display: none;
  }

  .hero-stars > :nth-child(n + 40):not(.hero-shoot) {
    display: none;
  }

  .hero-bokeh__dot {
    scale: 0.72;
    opacity: 0.8;
  }
}

@media (max-width: 640px) {
  .hero {
    --car-w: clamp(84px, 22vw, 104px);
    --city-min: clamp(150px, 46vw, 220px);
    --hero-gap: 16px;
  }

  .hero-title {
    font-size: clamp(2.7rem, 13.6vw, 3.7rem);
  }

  /* keep the bright disc to the right, clear of the copy above the city */
  .hero-sun {
    --sun-x: 255;
    --sun-y: 118;
    --sun-r: 205;
  }

  .hero-lead {
    font-size: 1.04rem;
  }

  .hero-stores {
    gap: 10px;
  }

  .hero-stores .store-btn {
    gap: 9px;
    min-height: 52px;
    padding: 6px 15px 6px 12px;
  }

  .hero-stores .store-btn svg {
    width: 22px;
    height: 22px;
  }

  .hero-stores .store-btn__text strong {
    font-size: 1rem;
  }

  .hero-trust {
    font-size: 0.82rem;
  }

  .hero-trust li + li::before {
    margin: 0 10px;
  }

  .hero-trust__rating {
    flex-basis: 100%;
  }

  .hero-trust__rating + li::before {
    display: none;
  }

  .hero-card {
    border-radius: 26px;
  }

  .hero-stars > :nth-child(n + 28):not(.hero-shoot),
  .hero-bokeh__dot:nth-child(n + 5) {
    display: none;
  }

  .hero-bokeh__dot {
    scale: 0.55;
    opacity: 0.75;
  }

  .hero-pin__label {
    font-size: 0.66rem;
    padding: 4px 8px;
  }
}

@media (max-width: 380px) {
  .hero-seg__btn {
    font-size: 0.78rem;
  }

  .hero-card__live {
    padding: 4px 8px;
    font-size: 0.7rem;
  }

  .hero-stores .store-btn {
    padding: 6px 12px 6px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-flare {
    display: none;
  }

  .hero-copy,
  .hero-book,
  .hero-cue {
    translate: none;
  }

  .hero-seg__thumb,
  .hero-view {
    transition: none;
  }
}

/* ======================================================================
   TICKER
   ====================================================================== */
/* Ticker — two crossing marquee bands overlapping the hero's bottom edge.
   The container is twice the overlap tall, so the crossing sits exactly on the hero / services seam. */
.tick {
  --tick-over: clamp(44px, 4.2vw, 66px);
  --tick-a-ink: 2deg;
  --tick-a-orange: -3deg;
  --tick-o: 0px;
  position: relative;
  z-index: 6;
  height: calc(var(--tick-over) * 2);
  margin-top: calc(var(--tick-over) * -1);
  overflow-x: clip;
  overflow-y: visible;
  pointer-events: none;
  user-select: none;
}

.tick-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.tick-band {
  position: absolute;
  left: -7vw;
  right: -7vw;
  top: 50%;
  overflow: hidden;
  translate: 0 -50%;
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.85);
}

.tick-band--orange {
  z-index: 2;
  rotate: var(--tick-a-orange);
  translate: 0 calc(-50% + var(--tick-o));
  background: linear-gradient(90deg, #f06d27 0%, #fa7e38 22%, #ff9a5c 50%, #fa7e38 78%, #ec6620 100%);
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(120, 40, 0, 0.35);
  color: #1a0d05;
}

.tick-band--ink {
  z-index: 1;
  rotate: var(--tick-a-ink);
  translate: 0 calc(-50% - var(--tick-o));
  border-block: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(90deg, #0d0a16, #161220 50%, #0d0a16);
  color: var(--orange-400);
}

.tick-track {
  display: flex;
  width: max-content;
  animation: tick-scroll var(--tick-dur, 70s) linear infinite;
}

.tick-band--ink .tick-track {
  animation-direction: reverse;
}

.tick.is-off .tick-track {
  animation-play-state: paused;
}

.tick-list {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tick-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-display);
  line-height: 1;
}

.tick-band--orange .tick-item {
  padding: 0.62em 0;
  font-size: clamp(1.05rem, 0.72rem + 1.05vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.tick-band--ink .tick-item {
  padding: 0.78em 0;
  font-size: clamp(0.86rem, 0.66rem + 0.62vw, 1.18rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tick-icon {
  width: 1.18em;
  height: 1.02em;
  flex: none;
  margin: 0 0.8em;
  fill: currentColor;
  overflow: visible;
}

.tick-star {
  margin: 0 1.15em;
  color: var(--text-3);
  font-size: 0.8em;
}

@keyframes tick-scroll {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 1020px) {
  .tick {
    --tick-over: clamp(34px, 5vw, 48px);
    --tick-a-ink: 3.2deg;
    --tick-a-orange: -3.2deg;
    --tick-o: 12px;
  }
}

@media (max-width: 640px) {
  .tick {
    --tick-a-ink: 4.6deg;
    --tick-a-orange: -4deg;
    --tick-o: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tick-track {
    animation: none;
  }

  .tick-band--ink .tick-track {
    translate: -18% 0;
  }
}

/* ======================================================================
   SERVICES
   ====================================================================== */
/* Services — "One app. Every way to move."
   Modes (class set by services.js on #services):
   .svc--pin    ≥1021px + motion OK: pinned stage, horizontal track driven by scroll
   .svc--swipe  ≤1020px: native scroll-snap carousel with synced dots
   (default)    ≥1021px without JS or with reduced motion: static 4-column grid */

.svc {
  --svc-r: 28px;
  --svc-edge: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  --svc-intro-w: clamp(360px, 33vw, 500px);
  --svc-top: calc(var(--header-h) + 14px);
  --svc-bottom: 100px;
  position: relative;
  overflow: clip;
  background: var(--ink-950);
}

.svc-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.svc-pin {
  position: relative;
}

.svc-probe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  visibility: hidden;
  pointer-events: none;
}

.svc-probe--in {
  bottom: auto;
  height: 1px;
}

/* Outside pinned mode the wrappers stay static so the background spans the whole section */
.svc:not(.svc--pin) .svc-pin,
.svc:not(.svc--pin) .svc-stage {
  position: static;
}

/* ---------- Background: warm glows + faint map dots ---------- */
.svc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.svc-bg__glow {
  position: absolute;
  border-radius: 50%;
}

.svc-bg__glow--a {
  top: -26%;
  left: -16%;
  width: max(720px, 62vw);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(250, 126, 56, 0.17), rgba(250, 126, 56, 0.05) 55%, transparent);
}

.svc-bg__glow--b {
  right: -22%;
  bottom: -38%;
  width: max(640px, 56vw);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(139, 124, 248, 0.13), transparent);
}

.svc-bg__grid {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 320%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1.6px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 26%, #000 70%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 4%, #000 26%, #000 70%, transparent 96%);
}

/* ---------- Intro ---------- */
.svc-intro {
  position: relative;
  z-index: 2;
}

.svc-intro__title {
  margin-top: 18px;
}

.svc-intro__lead {
  margin-top: 20px;
}

.svc-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.svc-jump__btn {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  font-size: 0.86rem;
  font-weight: 700;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, translate 0.35s var(--ease-out);
}

.svc-jump__btn:hover {
  translate: 0 -2px;
  border-color: rgba(250, 126, 56, 0.55);
  background: var(--orange-soft);
  color: var(--text);
}

.svc-jump__btn.svc-on {
  border-color: transparent;
  background: var(--orange-500);
  color: #1a0d05;
}

.svc-jump__btn:focus-visible {
  border-radius: var(--r-pill);
}

.svc-hint {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.svc-hint__mouse {
  position: relative;
  width: 22px;
  height: 32px;
  flex: none;
  border: 2px solid var(--line-2);
  border-radius: 12px;
}

.svc-hint__mouse::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--orange-400);
  animation: svc-wheel 1.8s var(--ease-out) infinite;
}

.svc-hint__swipe {
  display: none;
}

.svc-hint__arrow {
  color: var(--orange-400);
  animation: svc-nudge 1.8s var(--ease-in-out) infinite;
}

@keyframes svc-wheel {
  0% {
    opacity: 0;
    transform: translateY(-2px);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(9px);
  }
}

@keyframes svc-nudge {
  50% {
    transform: translateX(6px);
  }
}

/* ---------- Track + cards (shared) ---------- */
/* doubled class beats base.css ol[role=list] reset */
.svc .svc-track {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-card {
  position: relative;
}

.svc-card__in {
  container: svc-card / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 14px 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--svc-r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012) 46%), var(--ink-900);
  box-shadow: 0 34px 70px -40px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.7s var(--ease-out), border-color 0.45s, box-shadow 0.6s var(--ease-out);
}

.svc-card__in:hover {
  border-color: color-mix(in srgb, var(--svc-a) 42%, transparent);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px color-mix(in srgb, var(--svc-a) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.svc-card__in:focus-visible {
  outline-offset: 4px;
  border-radius: var(--svc-r);
}

.svc-card__top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 4px 0 6px;
}

.svc-card__kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.svc-card__kind::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--svc-a);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--svc-a) 16%, transparent);
}

.svc-card__kind + .chip {
  margin-left: auto;
}

.svc-card__top .chip {
  padding: 0.32em 0.72em;
  font-size: 0.74rem;
  white-space: nowrap;
}

.svc-card__name {
  margin-top: 2px;
  padding-inline: 6px;
  font-size: clamp(1.42rem, 1.1rem + 0.8vw, 1.8rem);
  font-weight: 650;
  letter-spacing: -0.025em;
}

.svc-card__line {
  margin-top: -6px;
  padding-inline: 6px;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.5;
}

.svc-card .svc-card__feats {
  display: grid;
  gap: 8px;
  padding-inline: 6px;
}

.svc-card__feats li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text-2);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.svc-card__feats .icon {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--svc-a) 13%, transparent);
  color: color-mix(in srgb, var(--svc-a) 78%, #fff);
  stroke-width: 2;
}

.svc-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 14px 2px 0 6px;
  border-top: 1px solid var(--line);
}

.svc-card__price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.svc-card__price small {
  color: var(--text-3);
  font-size: 0.78rem;
  font-weight: 700;
}

.svc-card__price strong {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
}

.svc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px 0 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.4s var(--ease-out);
}

.svc-card__cta .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
  transition: transform 0.35s var(--ease-out);
}

.svc-card__cta:hover {
  border-color: transparent;
  background: var(--svc-a);
  color: #1a0d05;
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--svc-a) 70%, transparent);
}

.svc-card__cta:hover .icon {
  transform: translateX(3px);
}

.svc-card__cta:focus-visible {
  border-radius: var(--r-pill);
}

/* Narrow cards: price on its own row, full-width CTA (long names like "Book Outstation" never overflow) */
@container svc-card (max-width: 304px) {
  .svc-card__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .svc-card__cta {
    justify-content: center;
  }
}

/* ---------- Illustration panel (layers parallax with --svc-x, wheels spin with --svc-spin) ---------- */
.svc-art {
  position: relative;
  z-index: 0;
  flex: 1 1 0;
  min-height: 150px;
  overflow: hidden;
  border-radius: calc(var(--svc-r) - 9px);
  background: radial-gradient(90% 60% at 82% 0%, rgba(255, 255, 255, 0.05), transparent 62%),
    linear-gradient(180deg, #1f1930 0%, #171223 100%);
  isolation: isolate;
}

.svc-art::before,
.svc-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.svc-art::before {
  z-index: 0;
  background: radial-gradient(64% 58% at 54% 84%, color-mix(in srgb, var(--svc-a) 26%, transparent), transparent 72%);
  opacity: 0.75;
  transition: opacity 0.6s var(--ease-out);
}

.svc-art::after {
  z-index: 3;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.1), transparent 46%);
  opacity: 0;
  transition: opacity 0.5s;
}

.svc-card__in:hover .svc-art::before,
.svc--swipe .svc-card.svc-active .svc-art::before {
  opacity: 1;
}

.svc--swipe .svc-card.svc-active .svc-card__in {
  border-color: color-mix(in srgb, var(--svc-a) 30%, transparent);
}

.svc-card__in.is-tilting .svc-art::after {
  opacity: 1;
}

.svc-art__num {
  position: absolute;
  top: -0.06em;
  left: 12px;
  z-index: 1;
  padding-right: 0.06em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--svc-a) 30%, transparent), transparent 82%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(5.2rem, 3rem + 4vw, 8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  translate: calc(var(--svc-x, 0) * -42px) 0;
}

.svc-art__far {
  position: absolute;
  top: 0;
  left: -44px;
  z-index: 1;
  width: calc(100% + 88px);
  height: 100%;
  translate: calc(var(--svc-x, 0) * -30px) 0;
}

.svc-art__fg {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.svc-road {
  transform: translateX(calc(var(--svc-x, 0) * 22px));
  stroke-dashoffset: calc(var(--svc-road, 0) * 1px);
}

.svc-stones {
  transform: translateX(calc(var(--svc-road, 0) * -1px));
}

.svc-veh {
  transform: translateX(calc(var(--svc-x, 0) * -12px)) rotate(calc(var(--svc-lean, 0) * -1deg));
  transform-box: fill-box;
  transform-origin: 28% 100%;
  transition: translate 0.6s var(--ease-spring);
}

.svc-card__in:hover .svc-veh {
  translate: 0 -5px;
}

.svc-wh,
.svc-hand {
  transform-box: fill-box;
  transform-origin: center;
  rotate: calc(var(--svc-spin, 0) * 1deg);
}

.svc-hand--m {
  rotate: calc(var(--svc-spin, 0) * 0.5deg);
}

.svc-hand--h {
  rotate: calc(var(--svc-spin, 0) * 0.5deg / 12);
}

.svc-beam {
  opacity: 0.55;
  transition: opacity 0.5s var(--ease-out);
}

.svc-card__in:hover .svc-beam {
  opacity: 1;
}

/* ---------- HUD: counter, road progress with the Drroo car, name, arrows / dots ---------- */
html:not(.js) .svc-hud {
  display: none;
}

.svc-hud {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.svc-hud__count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.svc-hud__now {
  color: var(--text);
  font-size: 1.55rem;
  letter-spacing: -0.02em;
}

.svc-hud__bar {
  position: relative;
  flex: 0 1 300px;
  height: 30px;
}

.svc-hud__bar::before,
.svc-hud__fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
}

.svc-hud__bar::before {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 8px, transparent 8px 14px);
}

.svc-hud__fill {
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.svc-hud__car {
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 30px;
  --car-hub: var(--ink-950);
  --car-valve: var(--ink-950);
  filter: drop-shadow(0 4px 10px rgba(250, 126, 56, 0.45));
}

.svc-hud__car .drroo-icon__wheel {
  rotate: calc(var(--svc-spin, 0) * 1deg);
}

.svc-hud__name {
  min-width: 11ch;
  overflow: hidden;
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.svc-hud__label {
  display: inline-block;
}

.svc-hud__dots {
  display: flex;
  align-items: center;
}

.svc-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 32px;
  border-radius: var(--r-pill);
}

.svc-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.22);
  transition: width 0.45s var(--ease-out), background-color 0.3s;
}

.svc-dot:hover::before {
  background: rgba(255, 255, 255, 0.5);
}

.svc-dot[aria-current="true"]::before {
  width: 18px;
  background: var(--orange-500);
}

.svc-hud__nav {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.svc-nav {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s, translate 0.35s var(--ease-out);
}

.svc-nav .icon {
  stroke-width: 2.2;
}

.svc-nav:hover:not([aria-disabled="true"]) {
  translate: 0 -2px;
  border-color: transparent;
  background: var(--orange-500);
  color: #1a0d05;
}

.svc-nav[aria-disabled="true"] {
  opacity: 0.32;
  cursor: default;
}

.svc-nav:focus-visible {
  border-radius: 50%;
}

/* ======================================================================
   DEFAULT DESKTOP (no JS / reduced motion): static grid
   ====================================================================== */
@media (min-width: 1021px) {
  .svc:not(.svc--pin) {
    padding-bottom: calc(var(--section-y) + var(--r-xl));
  }

  .svc:not(.svc--pin) .svc-intro,
  .svc:not(.svc--pin) .svc-track {
    max-width: calc(var(--maxw) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .svc:not(.svc--pin) .svc-intro > * {
    max-width: 680px;
  }

  .svc:not(.svc--pin) .svc-jump,
  .svc:not(.svc--pin) .svc-hint,
  .svc:not(.svc--pin) .svc-hud {
    display: none;
  }

  .svc:not(.svc--pin) .svc-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: clamp(40px, 5vw, 64px);
  }

  .svc:not(.svc--pin) .svc-art {
    flex: none;
    aspect-ratio: 16 / 11;
  }
}

/* ======================================================================
   PINNED HORIZONTAL SCROLL (≥1021px, motion allowed; class set by JS)
   ====================================================================== */
.svc--pin {
  padding-block: 0 calc(var(--r-xl) + 24px);
  scroll-margin-top: calc(-1 * (var(--header-h) + 16px));
}

/* the glows fade out before the stage edge so nothing looks cut when the pin releases */
.svc--pin .svc-bg {
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}

.svc--pin .svc-bg > * {
  will-change: transform;
}

.svc--pin .svc-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
}

.svc--pin .svc-intro {
  position: absolute;
  top: var(--svc-top);
  bottom: var(--svc-bottom);
  left: var(--svc-edge);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--svc-intro-w);
  will-change: transform;
}

.svc--pin .svc-track {
  position: absolute;
  top: var(--svc-top);
  bottom: var(--svc-bottom);
  left: 0;
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  padding-left: calc(var(--svc-edge) + var(--svc-intro-w) + clamp(40px, 5vw, 84px));
  padding-right: var(--svc-edge);
  will-change: transform;
}

.svc--pin .svc-card {
  flex: none;
  width: clamp(318px, 27vw, 396px);
  height: min(100%, 680px);
}

.svc--pin .svc-hud {
  position: absolute;
  right: var(--svc-edge);
  bottom: 30px;
  left: var(--svc-edge);
}

.svc--pin .svc-hud__dots {
  display: none;
}

@media (max-height: 800px) {
  .svc--pin {
    --svc-top: calc(var(--header-h) + 8px);
    --svc-bottom: 88px;
  }

  .svc--pin .svc-hud {
    bottom: 22px;
  }

  .svc--pin .svc-card__in {
    gap: 11px;
  }

  .svc--pin .svc-card__feats {
    gap: 6px;
  }

  .svc--pin .svc-jump {
    margin-top: 22px;
  }

  .svc--pin .svc-hint {
    display: none;
  }
}

/* ======================================================================
   SWIPE CAROUSEL (≤1020px)
   ====================================================================== */
@media (max-width: 1020px) {
  .svc {
    padding-block: clamp(84px, 13vw, 128px) calc(clamp(64px, 10vw, 104px) + var(--r-xl));
  }

  .svc-intro,
  .svc-hud {
    max-width: calc(var(--maxw) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .svc-intro > * {
    max-width: 640px;
  }

  .svc-jump,
  .svc-hint__mouse,
  .svc-hint__pin,
  .svc-hud__bar,
  .svc-hud__name {
    display: none;
  }

  .svc-hint {
    margin-top: 22px;
    padding: 8px 14px 8px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.04);
    transition: opacity 0.5s var(--ease-out);
  }

  .svc-hint__swipe {
    display: inline;
  }

  .svc-hint.svc-gone {
    opacity: 0.35;
  }

  .svc .svc-track {
    display: flex;
    gap: 14px;
    margin-top: clamp(32px, 6vw, 48px);
    padding: 6px var(--gutter) 22px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .svc .svc-track::-webkit-scrollbar {
    display: none;
  }

  .svc-card {
    flex: 0 0 clamp(272px, 80vw, 340px);
    scroll-snap-align: start;
  }

  .svc-art {
    flex: none;
    aspect-ratio: 16 / 10.5;
  }

  .svc-hud {
    gap: 14px;
  }

  .svc-hud__now {
    font-size: 1.3rem;
  }

  .svc-nav {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 640px) {
  .svc-hud__nav {
    display: none;
  }

  .svc-card__name {
    font-size: 1.45rem;
  }
}

@media (max-width: 380px) {
  .svc-card__in {
    padding: 12px 12px 14px;
  }

  .svc-card__top .chip {
    padding: 0.3em 0.6em;
  }

  .svc-card__cta {
    padding: 0 12px 0 15px;
  }
}

/* ---------- Reduced motion: everything static and complete ---------- */
@media (prefers-reduced-motion: reduce) {
  .svc-hint__mouse::after,
  .svc-hint__arrow {
    animation: none;
  }

  .svc-veh,
  .svc-card__in:hover .svc-veh {
    translate: none;
  }
}

/* ======================================================================
   HOW
   ====================================================================== */
/* ==========================================================================
   HOW IT WORKS — #how (prefix how-)
   Cream sheet after the dark services section.
   · Default (no JS, reduced motion, ≤1020px): four step cards, each with its own mini phone.
   · ≥1021px with motion: JS adds .how--pin → a pinned 400svh story. The four screens are moved
     into one big phone, the step list gets a filling rail, chips float around the phone.
   All phone UI is sized in em from --ph-w (the phone's width), so the same screens render
   crisply in the big phone and in the small card phones.
   ========================================================================== */

.how {
  --how-app: #0f0c17;          /* app background */
  --how-surf: #1b1628;         /* app surfaces */
  --how-surf-2: #241e33;
  --how-mute: #9c94ad;         /* muted text inside the app (≥ 6:1 on --how-app) */
  --how-soft: #ddd7e7;
  overflow: clip;
  isolation: isolate;
}

/* Icon glyphs (Lucide-style strokes) used as CSS masks — 1 DOM node per icon */
.how-i--back { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E"); }
.how-i--locate { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3Cpath d='M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3'/%3E%3C/svg%3E"); }
.how-i--plus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.how-i--clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.how-i--user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.how-i--map { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 4-6 2v14l6-2 6 2 6-2V4l-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E"); }
.how-i--home { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.how-i--work { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E"); }
.how-i--recent { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 2.6-6.4L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E"); }
.how-i--walk { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 21 3l-8 18-2-8z'/%3E%3C/svg%3E"); }
.how-i--pin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.how-i--shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v6c0 4.5 3 7.7 7 9 4-1.3 7-4.5 7-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.how-i--upi { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 4 6 8-6 8M12 4l6 8-6 8'/%3E%3C/svg%3E"); }
.how-i--chev { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.how-i--star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5l-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E"); }
.how-i--phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.how-i--chat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L3 21l1.9-6.4A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.how-i--share { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 13.5 6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E"); }
.how-i--check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.how-i--card { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }
.how-i--wallet { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H5'/%3E%3Cpath d='M16 14h.01'/%3E%3C/svg%3E"); }
.how-i--cash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }
.how-i--receipt { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14v18l-3-2-2 2-2-2-2 2-2-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E"); }
.how-i--users { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E"); }
.how-i--trend { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 17-8.5-8.5-5 5L2 7'/%3E%3Cpath d='M16 17h6v-6'/%3E%3C/svg%3E"); }

.how-i {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

/* Icon inside a round tile */
.how-ic {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  flex: none;
  border-radius: 50%;
  background: var(--how-surf-2);
  color: var(--how-soft);
}

.how-ic::before {
  content: "";
  width: 46%;
  height: 46%;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

/* ---------- Section background + heading ---------- */
.how-glow {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: min(1100px, 150vh);
  pointer-events: none;
  background:
    radial-gradient(40% 46% at 94% 4%, rgba(250, 126, 56, 0.2), transparent 70%),
    radial-gradient(34% 40% at 2% 36%, rgba(255, 200, 87, 0.16), transparent 70%);
}

.how-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(26, 20, 36, 0.11) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(60% 55% at 80% 10%, #000, transparent 75%);
  mask-image: radial-gradient(60% 55% at 80% 10%, #000, transparent 75%);
}

.how-head {
  position: relative;
  display: grid;
  gap: 26px;
  margin-bottom: clamp(44px, 6vw, 80px);
}

.how-head__main {
  display: grid;
  justify-items: start;
  gap: 18px;
}

.how-head__title {
  max-width: 11ch;
}

/* Words of the split heading: use the darker cream-friendly gradient (the shared one is tuned for dark) */
.how .tg-split .split-i,
.how .how-head__title .text-gradient {
  background: linear-gradient(100deg, #e2661c 0%, #b8470b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.how-head__aside {
  display: grid;
  justify-items: start;
  gap: 22px;
}

.how-head__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.how-head__facts .chip {
  background: rgba(255, 255, 255, 0.62);
  color: var(--on-cream-2);
}

.how-head__facts .icon {
  width: 1.1em;
  height: 1.1em;
  color: var(--orange-700);
}

@media (min-width: 900px) {
  .how-head {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
    column-gap: clamp(32px, 5vw, 88px);
  }
}

/* ---------- Step cards (default layout) ---------- */
.how-steps {
  display: grid;
  gap: 20px;
}

.how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(26, 20, 36, 0.07);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 34px 64px -40px rgba(80, 40, 10, 0.45), 0 2px 8px -2px rgba(26, 20, 36, 0.05);
  overflow: hidden;
  container-type: inline-size;
}

.how-step__media {
  --ph-w: min(252px, 74cqw);
  position: relative;
  height: calc(var(--ph-w) * 1.2113 + 28px); /* 58% of the phone's height is visible */
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(250, 126, 56, 0.26), transparent 70%),
    linear-gradient(180deg, #fde9da 0%, #fbdcc3 100%);
}

/* Big outlined step numeral + dot texture behind the phone */
.how-step__media::before {
  content: "01";
  position: absolute;
  left: 14px;
  top: -6px;
  font: 800 clamp(5.5rem, 34cqw, 8rem) / 1 var(--font-display);
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(201, 80, 15, 0.26);
  pointer-events: none;
}

.how-step__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(154, 58, 8, 0.16) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  pointer-events: none;
}

.how-step--2 .how-step__media::before { content: "02"; left: auto; right: 14px; }
.how-step--3 .how-step__media::before { content: "03"; -webkit-text-stroke-color: rgba(255, 255, 255, 0.14); }
.how-step--4 .how-step__media::before { content: "04"; left: auto; right: 14px; top: auto; bottom: -10px; }

.how-step--2 .how-step__media {
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(255, 200, 87, 0.42), transparent 70%),
    linear-gradient(180deg, #fbe2c8 0%, #fde9da 100%);
}

.how-step--3 .how-step__media {
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(250, 126, 56, 0.34), transparent 70%),
    radial-gradient(60% 50% at 10% 0%, rgba(139, 124, 248, 0.22), transparent 70%),
    linear-gradient(180deg, #17121f 0%, #221a2e 100%);
}

.how-step--3 .how-step__media::after {
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.4px);
}

.how-step--4 .how-step__media {
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(61, 220, 151, 0.26), transparent 70%),
    linear-gradient(180deg, #e3f5ea 0%, #fbeee2 100%);
}

.how-step__media .how-device {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 28px;
  translate: -50% 0;
  transition: translate 1.2s var(--ease-out) 0.12s;
}

.how-step--2 .how-step__media .how-device {
  top: auto;
  bottom: 28px;
}

.js .how-step:not(.is-in) .how-step__media .how-device {
  translate: -50% 14%;
}

.how-step__body {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px 24px 26px;
}

.how-step__num {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 5px 11px 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(250, 126, 56, 0.14);
  color: var(--orange-800);
  font: 700 0.74rem / 1.2 var(--font-body);
  letter-spacing: 0.12em;
}

.how-step__num::before {
  content: "STEP";
}

.how-step__title {
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--on-cream);
}

.how-step__text {
  max-width: 38ch;
  color: var(--on-cream-2);
  line-height: 1.55;
}

@media (min-width: 641px) {
  .how-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (min-width: 1180px) {
  .how:not(.how--pin) .how-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.how-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  margin-top: clamp(32px, 5vw, 48px);
}

.how-cta__note {
  color: var(--on-cream-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ---------- Floating chips (card versions + desktop versions share the look) ---------- */
.how-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 26px 50px -22px rgba(80, 40, 10, 0.45), 0 3px 10px -4px rgba(26, 20, 36, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  color: var(--on-cream);
  white-space: nowrap;
}

.how-chip__ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 12px;
  background: rgba(250, 126, 56, 0.15);
  color: var(--orange-700);
}

.how-chip__ico .how-i {
  width: 20px;
  height: 20px;
}

.how-chip__ico--mint { background: rgba(61, 220, 151, 0.18); color: #0f7f52; }
.how-chip__ico--sky { background: rgba(139, 124, 248, 0.18); color: #4f3fd0; }
.how-chip__ico--sun { background: rgba(255, 200, 87, 0.3); color: #8a5800; }
.how-chip__ico--live { background: rgba(61, 220, 151, 0.16); }

.how-chip__ico--avatar {
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd6bd, #fa7e38);
  color: #1a0d05;
  font: 700 1rem / 1 var(--font-display);
}

.how-chip__txt {
  display: grid;
  line-height: 1.25;
}

.how-chip__txt b {
  font: 600 0.95rem / 1.25 var(--font-display);
  letter-spacing: -0.01em;
}

.how-chip__txt small {
  color: var(--on-cream-3);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Card chips: one small chip per card, pops in after the card reveals */
.how-chip--m {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 16px;
  gap: 10px;
  padding: 8px 13px 8px 8px;
  border-radius: 15px;
  transition: opacity 0.6s var(--ease-out) 0.55s, transform 0.8s var(--ease-spring) 0.55s;
}

.how-chip--m .how-chip__ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.how-chip--m .how-chip__ico .how-i {
  width: 17px;
  height: 17px;
}

.how-chip--m .how-chip__txt b { font-size: 0.86rem; }
.how-chip--m .how-chip__txt small { font-size: 0.74rem; }

/* Like push notifications: over the status bar for top crops, over the home bar for the bottom crop */
.how-step--1 .how-chip--m { bottom: auto; top: 12px; }
.how-step--2 .how-chip--m { left: auto; right: 12px; bottom: 10px; }
.how-step--3 .how-chip--m { bottom: 14px; }
.how-step--4 .how-chip--m { left: auto; right: 12px; bottom: auto; top: 12px; }

.js .how-step:not(.is-in) .how-chip--m {
  opacity: 0;
  transform: translateY(10px) scale(0.94);
}

/* ---------- The phone (shared by the big pinned phone and the card phones) ---------- */
.how-device {
  position: relative;
  width: var(--ph-w);
  height: calc(var(--ph-w) * 2.0884);
  padding: 3.4em;
  border-radius: 15.8em;
  font-size: calc(var(--ph-w) / 100); /* 1em = 1% of the phone's width */
  background: linear-gradient(145deg, #625872 0%, #2b2535 10%, #15111d 28%, #0d0a13 62%, #231d2d 86%, #514760 100%);
  box-shadow:
    inset 0 0 0 0.3em #2e2738,
    inset 0 0 0 0.75em #050408,
    inset 0.3em 0.45em 0.5em -0.3em rgba(255, 255, 255, 0.4),
    0 5em 9em -3.5em rgba(74, 34, 8, 0.55),
    0 2.4em 4em -2em rgba(26, 20, 36, 0.5);
}

/* Dynamic island with a lens glint */
.how-device::before {
  content: "";
  position: absolute;
  z-index: 9;
  top: 5.3em;
  left: 50%;
  width: 30.5em;
  height: 8.6em;
  margin-left: -15.25em;
  border-radius: 9em;
  background: radial-gradient(circle at 80% 50%, #2b3a5c 0 0.9em, #0b101c 1.5em, transparent 1.7em), #000;
}

.how-device__screen {
  position: relative;
  height: 100%;
  border-radius: 12.4em;
  overflow: hidden;
  background: var(--how-app);
  isolation: isolate;
}

/* Status bar (time + signal, wifi, battery) */
.how-device__screen::before {
  content: "9:41";
  position: absolute;
  z-index: 8;
  inset: 0 0 auto;
  height: calc(var(--ph-w) * 0.12);
  padding: calc(var(--ph-w) * 0.043) 0 0 calc(var(--ph-w) * 0.098);
  color: #fff;
  font: 600 calc(var(--ph-w) * 0.037) / 1 var(--font-body);
  letter-spacing: -0.01em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 13' fill='white'%3E%3Crect y='8' width='3.2' height='4' rx='1'/%3E%3Crect x='4.6' y='6' width='3.2' height='6' rx='1'/%3E%3Crect x='9.2' y='3.5' width='3.2' height='8.5' rx='1'/%3E%3Crect x='13.8' y='1' width='3.2' height='11' rx='1'/%3E%3Cpath d='M29 3.2c2.6 0 5 1 6.8 2.7l1.3-1.4A11.6 11.6 0 0 0 29 1.3a11.6 11.6 0 0 0-8.1 3.2l1.3 1.4A9.7 9.7 0 0 1 29 3.2zm0 3.8c1.6 0 3 .6 4.1 1.6l1.3-1.4A7.8 7.8 0 0 0 29 5.1c-2 0-3.9.8-5.4 2.1l1.3 1.4A5.9 5.9 0 0 1 29 7zm0 3.9 2.4-2.5a3.4 3.4 0 0 0-4.8 0z'/%3E%3Crect x='41.5' y='1' width='22' height='11' rx='3.2' fill='none' stroke='white' stroke-opacity='.45'/%3E%3Crect x='43.3' y='2.8' width='16' height='7.4' rx='1.8'/%3E%3Cpath d='M65 4.6v3.8c.9-.3 1.5-1.1 1.5-1.9s-.6-1.6-1.5-1.9z' fill-opacity='.5'/%3E%3C/svg%3E") no-repeat right calc(var(--ph-w) * 0.075) top calc(var(--ph-w) * 0.045) / calc(var(--ph-w) * 0.165) auto;
  pointer-events: none;
}

/* Glass glare + home indicator */
.how-device__screen::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 5'%3E%3Crect width='140' height='5' rx='2.5' fill='white' fill-opacity='.82'/%3E%3C/svg%3E") no-repeat 50% calc(100% - var(--ph-w) * 0.022) / calc(var(--ph-w) * 0.34) auto,
    linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 26%, rgba(255, 255, 255, 0) 26.3%),
    linear-gradient(115deg, transparent 62%, rgba(255, 255, 255, 0.035) 62.3%, rgba(255, 255, 255, 0) 80%);
}

/* Side buttons (big phone only) */
.how-device__btns {
  position: absolute;
  z-index: -1;
  left: -0.75em;
  right: -0.75em;
  top: 19em;
  height: 42em;
  pointer-events: none;
  background:
    linear-gradient(90deg, #4a4157, #1d1827) left 0 top 0 / 1.4em 7em no-repeat,
    linear-gradient(90deg, #4a4157, #1d1827) left 0 top 11em / 1.4em 13em no-repeat,
    linear-gradient(90deg, #4a4157, #1d1827) left 0 top 26.5em / 1.4em 13em no-repeat,
    linear-gradient(270deg, #4a4157, #1d1827) right 0 top 14em / 1.4em 20em no-repeat;
}

/* ---------- App screens: shared UI ---------- */
.how-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 3.6em 1.15em 0;
  background: var(--how-app);
  color: #f4f1f8;
  font-family: var(--font-body);
  font-size: calc(var(--ph-w) * 0.0405); /* the screen is 23em × 50em at any phone size */
  line-height: 1.3;
  text-align: left;
}

.how-screen b,
.how-screen strong {
  font-weight: 600;
}

.how-screen ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.how-pt {
  width: 0.62em;
  height: 0.62em;
  flex: none;
  border-radius: 50%;
  background: #3ddc97;
  box-shadow: 0 0 0 0.24em rgba(61, 220, 151, 0.2);
}

.how-pt--to {
  border-radius: 0.16em;
  background: #fa7e38;
  box-shadow: 0 0 0 0.24em rgba(250, 126, 56, 0.22);
}

.how-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  height: 3.1em;
  border-radius: 1em;
  background: linear-gradient(180deg, #ff9a5c, #fa7e38);
  color: #1a0d05;
  font: 700 0.98em / 1 var(--font-display);
  box-shadow: 0 0.9em 1.6em -0.7em rgba(250, 126, 56, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: scale 0.3s var(--ease-out);
}

.how-sheet {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.55em 1.15em 2.4em;
  border-radius: 1.7em 1.7em 0 0;
  background: #16121f;
  box-shadow: 0 -0.8em 2.2em rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.how-sheet::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 50%;
  width: 2.6em;
  height: 0.26em;
  margin-left: -1.3em;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.2);
}

.how-sheet__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}

.how-sheet__head b {
  font: 600 1.15em / 1.15 var(--font-display);
  letter-spacing: -0.015em;
}

.how-sheet__head small {
  color: var(--how-mute);
  font-size: 0.72em;
  font-weight: 600;
}

.how-avatar {
  display: grid;
  place-items: center;
  width: 2.9em;
  height: 2.9em;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd6bd, #fa7e38);
  color: #1a0d05;
  font: 700 0.92em / 1 var(--font-display);
  box-shadow: 0 0 0 0.18em rgba(250, 126, 56, 0.25);
}

/* Touch indicator: plays once when its screen reaches a tap moment */
.how-tap {
  position: absolute;
  z-index: 3;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 0.35em rgba(255, 255, 255, 0.14);
  opacity: 0;
  pointer-events: none;
}

@keyframes how-tap {
  0% { opacity: 0; transform: scale(0.4); }
  22% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}

/* ---------- Screen 1: set your drop ---------- */
.how-s1__bar {
  display: flex;
  align-items: center;
  gap: 0.7em;
  height: 2.3em;
  font: 600 1.1em / 1 var(--font-display);
  letter-spacing: -0.01em;
}

.how-s1__bar .how-i {
  width: 1.05em;
  height: 1.05em;
  color: var(--how-soft);
}

.how-s1__fields {
  position: relative;
  margin-top: 0.75em;
  padding: 0 0.95em;
  border-radius: 1em;
  background: var(--how-surf);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.how-s1__fields::before {
  content: "";
  position: absolute;
  left: 1.25em;
  top: 2.05em;
  height: 1.75em;
  border-left: 1.5px dashed rgba(255, 255, 255, 0.24);
}

.how-s1__field {
  display: flex;
  align-items: center;
  gap: 0.85em;
  min-height: 3em;
}

.how-s1__field + .how-s1__field {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.how-s1__field > .how-i {
  width: 1.05em;
  height: 1.05em;
  color: var(--how-mute);
}

.how-s1__val {
  display: grid;
  flex: 1;
  min-width: 0;
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.25;
}

.how-s1__val small {
  color: var(--how-mute);
  font-size: 0.8em;
  font-weight: 500;
}

.how-s1__val--to {
  display: flex;
  align-items: center;
  font-size: 0.98em;
}

.how-s1__typed:empty::before {
  content: "Where to?";
  color: var(--how-mute);
  font-weight: 500;
}

.how-s1__caret {
  width: 2px;
  height: 1.15em;
  margin-left: 1px;
  border-radius: 1px;
  background: #fa7e38;
  animation: how-blink 1.05s steps(1) infinite;
}

@keyframes how-blink {
  50% { opacity: 0; }
}

.how-s1.is-picked .how-s1__caret {
  display: none;
}

.how-s1__pills {
  display: flex;
  gap: 0.4em;
  margin-top: 0.75em;
}

.how-s1__pills span {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.42em 0.72em;
  border-radius: 2em;
  background: var(--how-surf);
  color: var(--how-soft);
  font-size: 0.72em;
  font-weight: 600;
}

.how-s1__pills .how-i {
  width: 1.15em;
  height: 1.15em;
  color: #ff9a5c;
}

.how-s1__label {
  margin-top: 1.35em;
  color: var(--how-mute);
  font-size: 0.64em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.how-s1__list {
  margin-top: 0.45em !important;
}

.how-s1__list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin: 0 -0.55em;
  padding: 0.6em 0.55em;
  border-radius: 0.9em;
  transition: background-color 0.35s, box-shadow 0.35s;
}

.how-s1__list li + li {
  margin-top: 0.1em;
}

.how-s1__list span {
  display: grid;
  min-width: 0;
}

.how-s1__list b {
  font-size: 0.92em;
}

.how-s1__list small {
  color: var(--how-mute);
  font-size: 0.72em;
  font-weight: 500;
}

.how-s1__list em {
  margin-left: auto;
  color: var(--how-mute);
  font-size: 0.68em;
  font-style: normal;
  font-weight: 600;
}

.how-s1__list .how-ic {
  width: 2.3em;
  height: 2.3em;
}

.how-s1__hit .how-ic {
  background: rgba(250, 126, 56, 0.16);
  color: #ffb889;
}

.how-s1__hit .how-tap {
  left: 50%;
  top: 50%;
  margin: -1.3em 0 0 -1.3em;
}

.how-s1.is-match .how-s1__hit {
  background: rgba(250, 126, 56, 0.1);
}

.how-s1.is-picked .how-s1__hit {
  background: rgba(250, 126, 56, 0.16);
  box-shadow: inset 0 0 0 1px rgba(250, 126, 56, 0.5);
}

.how-s1.is-picked .how-s1__hit .how-tap {
  animation: how-tap 0.9s var(--ease-out) both;
}

/* Appears once the drop is picked (the keyboard slides away to reveal it) */
.how-s1__pickup {
  position: relative;
  margin-top: 1em;
  overflow: hidden;
  border-radius: 1.15em;
  background: #1d1729;
  box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.28), 0 1em 2em rgba(0, 0, 0, 0.45);
  opacity: 0;
  translate: 0 2em;
  transition: opacity 0.5s var(--ease-out) 0.1s, translate 0.8s var(--ease-out) 0.1s;
}

.how-s1__pickmap {
  display: block;
  width: 100%;
  height: 6.4em;
  background: #15111d radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.4px) 0 0 / 12px 12px;
}

.how-s1__walk {
  fill: none;
  stroke: #8ff0c4;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0.1 8;
}

.how-s1__you {
  fill: #8b7cf8;
  stroke: #fff;
  stroke-width: 3;
}

.how-s1__gate {
  fill: #fff;
  font: 700 13px / 1 var(--font-body);
}

.how-s1__pickrow {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.8em 0.9em;
}

.how-s1__pickup .how-ic {
  background: rgba(61, 220, 151, 0.16);
  color: #8ff0c4;
}

.how-s1__pickup span {
  display: grid;
  min-width: 0;
}

.how-s1__pickup b {
  font-size: 0.86em;
}

.how-s1__pickup small {
  color: var(--how-mute);
  font-size: 0.7em;
  font-weight: 500;
}

.how-s1__pickup em {
  margin-left: auto;
  padding: 0.5em 0.85em;
  border-radius: 2em;
  background: #3ddc97;
  color: #05261a;
  font-size: 0.72em;
  font-style: normal;
  font-weight: 700;
}

.how-s1__kbd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16.4em;
  background: #18141f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 262'%3E%3Cdefs%3E%3Cpattern id='a' x='3' y='48' width='38.4' height='54' patternUnits='userSpaceOnUse'%3E%3Crect x='2.5' width='33.4' height='42' rx='6' fill='%23353047'/%3E%3C/pattern%3E%3Cpattern id='b' x='22.2' y='48' width='38.4' height='54' patternUnits='userSpaceOnUse'%3E%3Crect x='2.5' width='33.4' height='42' rx='6' fill='%23353047'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M130 12v18M260 12v18' stroke='%233a3349' stroke-width='1.5'/%3E%3Cg font-family='-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif' font-size='15' fill='%23bdb5cc' text-anchor='middle'%3E%3Ctext x='65' y='27'%3EChennai%3C/text%3E%3Ctext x='195' y='27' fill='%23fff' font-weight='600'%3ECentral%3C/text%3E%3Ctext x='325' y='27'%3ECentre%3C/text%3E%3C/g%3E%3Crect x='3' y='48' width='384' height='42' fill='url(%23a)'/%3E%3Crect x='22.2' y='102' width='345.6' height='42' fill='url(%23b)'/%3E%3Crect x='60.6' y='156' width='268.8' height='42' fill='url(%23b)'/%3E%3Cg fill='%23262132'%3E%3Crect x='5.5' y='156' width='45' height='42' rx='6'/%3E%3Crect x='339.5' y='156' width='45' height='42' rx='6'/%3E%3Crect x='5.5' y='210' width='88' height='42' rx='6'/%3E%3C/g%3E%3Crect x='99.5' y='210' width='191' height='42' rx='6' fill='%23353047'/%3E%3Crect x='296.5' y='210' width='88' height='42' rx='6' fill='%23fa7e38'/%3E%3Cg font-family='-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif' font-size='17' fill='%23e9e4f1'%3E%3Ctext x='22.2 60.6 99.0 137.4 175.8 214.2 252.6 291.0 329.4 367.8' y='75' text-anchor='middle'%3EQWERTYUIOP%3C/text%3E%3Ctext x='41.4 79.8 118.2 156.6 195.0 233.4 271.8 310.2 348.6' y='129' text-anchor='middle'%3EASDFGHJKL%3C/text%3E%3Ctext x='79.8 118.2 156.6 195.0 233.4 271.8 310.2' y='183' text-anchor='middle'%3EZXCVBNM%3C/text%3E%3Ctext x='49.5' y='236' font-size='15' text-anchor='middle'%3E123%3C/text%3E%3Ctext x='195' y='236' font-size='15' text-anchor='middle' fill='%23bdb5cc'%3Espace%3C/text%3E%3Ctext x='340.5' y='236' font-size='15' font-weight='700' text-anchor='middle' fill='%231a0d05'%3Ego%3C/text%3E%3C/g%3E%3Cpath d='M28 168l-8 9h4.5v7h7v-7H36z' fill='none' stroke='%23e9e4f1' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M354 170h17a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-17l-6-7z' fill='none' stroke='%23e9e4f1' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M358 174l6 6m0-6-6 6' stroke='%23e9e4f1' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 50% 0.4em / 100% auto no-repeat;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.05);
  transition: translate 0.75s var(--ease-out);
}

.how-s1.is-picked .how-s1__kbd {
  translate: 0 105%;
}

.how-s1.is-picked .how-s1__pickup {
  opacity: 1;
  translate: 0 0;
}

/* ---------- Screen 2: pick your ride ---------- */
.how-s2 {
  padding: 0;
}

.how-s2__map {
  position: absolute;
  inset: 0 0 auto;
  height: 23em;
  background: #120f19;
}

.how-s2__map svg {
  width: 100%;
  height: 100%;
}

.how-m-park { fill: #13281e; }
.how-m-river { fill: none; stroke: #182241; stroke-width: 22; stroke-linecap: round; }
.how-m-road { fill: none; stroke: #211b2e; stroke-width: 6; stroke-linecap: round; }
.how-m-road--major { stroke: #2c2539; stroke-width: 11; }
.how-m-from { fill: #3ddc97; stroke: #fff; stroke-width: 3; }
.how-m-to { fill: #fa7e38; stroke: #fff; stroke-width: 3; }
.how-m-cars rect { fill: #ffb889; }

.how-s2__route {
  fill: none;
  stroke: #fa7e38;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: var(--s2-route, 0);
}

.how-s2__tag {
  position: absolute;
  padding: 0.34em 0.62em;
  border-radius: 0.6em;
  background: rgba(14, 11, 22, 0.88);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 0.4em 1em rgba(0, 0, 0, 0.35);
  font-size: 0.62em;
  font-weight: 700;
  white-space: nowrap;
}

.how-s2__tag--from { left: 9%; top: 72%; }
.how-s2__tag--to { right: 5%; top: 20%; }

.how-s2__tag small {
  margin-left: 0.3em;
  color: #ffb889;
  font-size: 1em;
}

.how-s2__sheet {
  top: 21em;
}

.how-s2__note {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.4em;
  color: #8ff0c4;
  font-size: 0.7em;
  font-weight: 600;
}

.how-s2__rides {
  --sel: 1;
  position: relative;
  display: grid;
  gap: 0.45em;
  margin-top: 0.9em !important;
}

.how-s2__rides li {
  display: flex;
  align-items: center;
  gap: 0.75em;
  height: 3.6em;
  padding: 0 0.9em 0 0.55em;
  border-radius: 1em;
  background: #1e1829;
}

/* Selection ring glides between rows */
.how-s2__rides::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 3.6em;
  border-radius: 1em;
  box-shadow: inset 0 0 0 0.13em #fa7e38, 0 0 1.4em -0.2em rgba(250, 126, 56, 0.45);
  background: rgba(250, 126, 56, 0.07);
  transform: translateY(calc(var(--sel) * 4.05em));
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}

.how-s2__rides span {
  display: grid;
  min-width: 0;
}

.how-s2__rides b {
  font: 600 0.96em / 1.15 var(--font-display);
}

.how-s2__rides small {
  color: var(--how-mute);
  font-size: 0.66em;
  font-weight: 600;
}

.how-s2__rides strong {
  margin-left: auto;
  font: 700 1em / 1 var(--font-display);
}

.how-veh {
  width: 2.9em;
  height: 2.3em;
  flex: none;
  border-radius: 0.75em;
  background: #282236 var(--v) 50% 62% / 82% auto no-repeat;
}

.how-veh--moto { --v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Cpath d='M6 23c.5-4 3.5-6.5 8-6.5h11l4.5-6h3.5l-1.8 6.5c4 .3 6.8 2.6 7.8 6z' fill='%23fa7e38'/%3E%3Cpath d='M17 16.5 20.5 9h4.8l-1.5 7.5z' fill='%23ffd6bd'/%3E%3Ccircle cx='23.5' cy='5.5' r='4.2' fill='%23ffb889'/%3E%3Cpath d='M22 4.6h5.4' stroke='%232d2640' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='24.5' r='5.5' fill='%23f6f3fa'/%3E%3Ccircle cx='11' cy='24.5' r='2' fill='%232d2640'/%3E%3Ccircle cx='38' cy='24.5' r='5.5' fill='%23f6f3fa'/%3E%3Ccircle cx='38' cy='24.5' r='2' fill='%232d2640'/%3E%3C/svg%3E"); }
.how-veh--auto { --v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Cpath d='M5 24V13c0-4.4 3.6-8 8-8h15c3.4 0 6.3 2 7.6 5l4.4 9.5V24z' fill='%23ffc857'/%3E%3Cpath d='M5 13c0-4.4 3.6-8 8-8h15c3.4 0 6.3 2 7.6 5l.9 2H5z' fill='%23fa7e38'/%3E%3Cpath d='M9 15h8v5.5H9zM20 15h9.5l3 5.5H20z' fill='%232d2640'/%3E%3Ccircle cx='13' cy='24.5' r='5' fill='%23f6f3fa'/%3E%3Ccircle cx='13' cy='24.5' r='1.8' fill='%232d2640'/%3E%3Ccircle cx='37' cy='24.5' r='5' fill='%23f6f3fa'/%3E%3Ccircle cx='37' cy='24.5' r='1.8' fill='%232d2640'/%3E%3C/svg%3E"); }
.how-veh--mini { --v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Cpath d='M3 23.5v-5c0-2.2 1.6-3.7 3.8-4.2l6.2-1.3 6-5.4c1.1-1 2.5-1.6 4-1.6h9.5c1.9 0 3.6.9 4.7 2.4l3.3 4.6c2.5.6 4.5 2.3 4.5 4.9v5.6z' fill='%23f6f3fa'/%3E%3Cpath d='M15.5 13 20.4 8.6c.7-.6 1.5-.9 2.4-.9h5.2v5.3zM30 7.7h3.4c1.1 0 2.1.5 2.8 1.4l2.8 3.9H30z' fill='%233d3454'/%3E%3Cpath d='M3.5 18.6h41' stroke='%23fa7e38' stroke-width='1.6'/%3E%3Ccircle cx='13' cy='24.5' r='5' fill='%231a1424'/%3E%3Ccircle cx='13' cy='24.5' r='2' fill='%23c4bdd1'/%3E%3Ccircle cx='36' cy='24.5' r='5' fill='%231a1424'/%3E%3Ccircle cx='36' cy='24.5' r='2' fill='%23c4bdd1'/%3E%3C/svg%3E"); }

.how-s2__pay {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.95em;
  color: var(--how-soft);
  font-size: 0.76em;
  font-weight: 600;
}

.how-s2__pay .how-i--upi { color: #3ddc97; }
.how-s2__pay .how-i--chev { margin-left: auto; color: var(--how-mute); }

.how-s2__book {
  margin-top: 0.85em;
}

.how-s2__book .how-tap {
  right: 18%;
  top: 50%;
  margin-top: -1.3em;
}

.how-s2.is-booked .how-s2__book {
  scale: 0.97;
}

.how-s2.is-booked .how-s2__book .how-tap {
  animation: how-tap 0.9s var(--ease-out) both;
}

.how-s2__fine {
  margin-top: 0.75em;
  color: var(--how-mute);
  font-size: 0.62em;
  font-weight: 600;
  text-align: center;
}

/* ---------- Screen 3: track your captain (dark map) ---------- */
.how-s3 {
  padding: 0;
  background: #100d17;
}

.how-map {
  position: absolute;
  inset: 0;
}

.how-map__svg {
  width: 100%;
  height: 100%;
}

.how-map__base {
  fill: none;
  stroke: rgba(250, 126, 56, 0.4);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0.1 10;
}

.how-map__glow,
.how-map__route {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: var(--s3-route, 0);
}

.how-map__glow {
  stroke: rgba(250, 126, 56, 0.22);
  stroke-width: 18;
}

.how-map__route {
  stroke: #fa7e38;
  stroke-width: 6;
}

.how-map__label {
  fill: #5c536f;
  font: 700 11px / 1 var(--font-body);
  letter-spacing: 0.16em;
}

.how-map__start {
  fill: #1a1424;
  stroke: #fa7e38;
  stroke-width: 3;
}

.how-map__pulse {
  fill: rgba(61, 220, 151, 0.24);
  transform-box: fill-box;
  transform-origin: center;
  animation: how-pulse 2.2s var(--ease-out) infinite;
}

@keyframes how-pulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

.how-map__pickup {
  fill: #3ddc97;
  stroke: #fff;
  stroke-width: 3;
}

/* The Drroo car marker — positioned + rotated along the route by JS */
.how-car {
  --car-body: #fa7e38;
  --car-wheel: #f6f3fa;
  --car-hub: #1a1424;
  --car-valve: #1a1424;
  --wheel-speed: 0.55s;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 2.7em;
  transform-origin: 0 0;
  transform: translate(20.6em, 23em) translate(-50%, -82%); /* no-JS fallback: parked at pickup */
  /* white sticker outline so the orange car reads on top of the orange route */
  filter: drop-shadow(0 0 0.07em #fff) drop-shadow(0 0 0.07em #fff) drop-shadow(0 0.35em 0.35em rgba(0, 0, 0, 0.6));
  will-change: transform;
}

.how-car .drroo-icon {
  display: block;
}

.how-s3.is-parked .how-car .drroo-icon__wheel {
  animation-play-state: paused;
}

.how-s3__eta {
  position: absolute;
  z-index: 3;
  top: 3.9em;
  left: 1.15em;
  right: 1.15em;
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.8em 1em;
  border-radius: 1.05em;
  background: rgba(24, 19, 34, 0.94);
  box-shadow: 0 0.8em 1.8em rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font: 600 0.94em / 1.2 var(--font-display);
  transition: box-shadow 0.4s;
}

.how-s3__live {
  width: 0.6em;
  height: 0.6em;
  flex: none;
  border-radius: 50%;
  background: #3ddc97;
  box-shadow: 0 0 0 0.26em rgba(61, 220, 151, 0.2);
}

.how-s3.is-arrived .how-s3__eta {
  box-shadow: 0 0.8em 1.8em rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(61, 220, 151, 0.55);
}

.how-s3__sheet {
  top: 30.6em;
  padding-top: 1.65em;
}

.how-s3__captain {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.how-s3__who {
  display: grid;
  min-width: 0;
}

.how-s3__who b {
  font: 600 1.02em / 1.15 var(--font-display);
}

.how-s3__who small {
  display: flex;
  align-items: center;
  gap: 0.3em;
  color: var(--how-mute);
  font-size: 0.7em;
  font-weight: 600;
}

.how-s3__who .how-i {
  width: 1.1em;
  height: 1.1em;
  color: #ffc857;
}

.how-s3__plate {
  display: grid;
  justify-items: end;
  gap: 0.3em;
  margin-left: auto;
}

.how-s3__plate small {
  color: var(--how-mute);
  font-size: 0.62em;
  font-weight: 600;
}

/* Commercial vehicles in India carry yellow plates */
.how-s3__plate b {
  padding: 0.32em 0.55em;
  border-radius: 0.4em;
  background: #ffc857;
  color: #1a1424;
  font: 700 0.72em / 1.1 var(--font-display);
  letter-spacing: 0.05em;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(26, 20, 36, 0.4);
}

.how-s3__pin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  margin-top: 1em;
  padding: 0.7em 0.8em 0.7em 0.95em;
  border-radius: 1em;
  background: #1e1829;
}

.how-s3__pin > span:first-child {
  display: grid;
  font: 600 0.86em / 1.2 var(--font-display);
}

.how-s3__pin small {
  color: var(--how-mute);
  font: 600 0.78em / 1.3 var(--font-body);
}

.how-s3__digits {
  display: flex;
  gap: 0.3em;
}

.how-s3__digits i {
  display: grid;
  place-items: center;
  width: 1.85em;
  height: 2.2em;
  border-radius: 0.5em;
  background: #2b2439;
  color: #fff;
  font: 700 1em / 1 var(--font-display);
  font-style: normal;
  transition: background-color 0.4s, color 0.4s, scale 0.5s var(--ease-spring);
}

.how-s3.is-arrived .how-s3__digits i {
  background: #fa7e38;
  color: #1a0d05;
}

.how-s3.is-arrived .how-s3__digits i:nth-child(2) { transition-delay: 0.06s; }
.how-s3.is-arrived .how-s3__digits i:nth-child(3) { transition-delay: 0.12s; }
.how-s3.is-arrived .how-s3__digits i:nth-child(4) { transition-delay: 0.18s; }

.how-s3__actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4em;
  margin-top: 1em;
}

.how-s3__actions span {
  display: grid;
  justify-items: center;
  gap: 0.45em;
  color: var(--how-soft);
  font-size: 0.66em;
  font-weight: 600;
}

.how-s3__actions .how-ic {
  width: 3.6em;
  height: 3.6em;
}

.how-s3__sos .how-ic {
  background: rgba(255, 93, 115, 0.16);
  color: #ff8193;
}

/* ---------- Screen 4: pay & rate ---------- */
.how-s4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4.5em;
  text-align: center;
}

.how-s4__badge {
  position: relative;
  width: 4.7em;
  height: 4.7em;
  flex: none;
}

/* Little confetti around the badge */
.how-s4__badge::before {
  content: "";
  position: absolute;
  inset: -1.3em -2.2em;
  background:
    radial-gradient(circle, #ffc857 0 0.22em, transparent 0.26em) 6% 30% / 1em 1em no-repeat,
    radial-gradient(circle, #fa7e38 0 0.18em, transparent 0.22em) 92% 18% / 1em 1em no-repeat,
    radial-gradient(circle, #8b7cf8 0 0.2em, transparent 0.24em) 98% 74% / 1em 1em no-repeat,
    radial-gradient(circle, #3ddc97 0 0.16em, transparent 0.2em) 2% 82% / 1em 1em no-repeat,
    radial-gradient(circle, #ff9a5c 0 0.14em, transparent 0.18em) 22% 0% / 1em 1em no-repeat,
    radial-gradient(circle, #ffc857 0 0.14em, transparent 0.18em) 86% 84% / 1em 1em no-repeat;
  opacity: var(--s4-confetti, 1);
  transition: opacity 0.5s;
}

.how-s4__badge svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.how-s4__ring {
  fill: rgba(61, 220, 151, 0.13);
  stroke: #3ddc97;
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: var(--s4-ring, 0);
  transform: rotate(-90deg);
  transform-origin: 32px 32px;
}

.how-s4__tick {
  fill: none;
  stroke: #3ddc97;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: var(--s4-tick, 0);
}

.how-s4__ok {
  margin-top: 0.9em;
  color: #8ff0c4;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.how-s4__amt {
  margin-top: 0.12em;
  font: 700 2.9em / 1 var(--font-display);
  letter-spacing: -0.035em;
}

.how-s4__via {
  margin-top: 0.5em;
  color: var(--how-mute);
  font-size: 0.7em;
  font-weight: 600;
}

.how-s4__methods {
  display: flex;
  gap: 0.35em;
  margin-top: 0.95em;
}

.how-s4__methods span {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.45em 0.62em;
  border-radius: 2em;
  background: #1e1829;
  color: #bdb5cc;
  font-size: 0.64em;
  font-weight: 700;
}

.how-s4__methods .how-i {
  width: 1.2em;
  height: 1.2em;
}

.how-s4__methods .is-on {
  background: rgba(61, 220, 151, 0.14);
  color: #8ff0c4;
  box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.45);
}

.how-s4__rate {
  width: 100%;
  margin-top: 1.25em;
  padding: 1em 0.95em 1.05em;
  border-radius: 1.15em;
  background: var(--how-surf);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.how-s4__rate-head {
  display: flex;
  align-items: center;
  gap: 0.65em;
  text-align: left;
}

.how-s4__rate-head .how-avatar {
  width: 2.5em;
  height: 2.5em;
  font-size: 0.8em;
}

.how-s4__rate-head b {
  font: 600 0.86em / 1.25 var(--font-display);
}

.how-s4__stars {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0.5em;
  margin-top: 0.85em;
}

.how-s4__stars i:not(.how-tap) {
  width: 2.05em;
  height: 2.05em;
  background: #3a3249;
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
  transition: background-color 0.3s, scale 0.5s var(--ease-spring);
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.9c.5 0 .9.3 1.1.7l2.6 5.4 5.9.9c1 .1 1.4 1.3.7 2l-4.3 4.2 1 5.9c.2 1-.9 1.7-1.7 1.2L12 19.4l-5.3 2.8c-.9.5-1.9-.2-1.7-1.2l1-5.9-4.3-4.2c-.7-.7-.3-1.9.7-2l5.9-.9 2.6-5.4c.2-.4.6-.7 1.1-.7z'/%3E%3C/svg%3E");
}

.how-s4__stars i.is-on,
html:not(.js) .how-s4__stars i:not(.how-tap) {
  background: #ffc857;
  scale: 1.1;
}

.how-s4__stars .how-tap {
  right: calc(50% - 5.3em);
  top: 50%;
  margin-top: -1.3em;
}

.how-s4.is-rated .how-s4__stars .how-tap {
  animation: how-tap 0.9s var(--ease-out) both;
}

.how-s4__tags {
  display: flex;
  justify-content: center;
  gap: 0.35em;
  margin-top: 0.85em;
}

.how-s4__tags span {
  padding: 0.4em 0.68em;
  border-radius: 2em;
  background: #251f33;
  color: #bdb5cc;
  font-size: 0.62em;
  font-weight: 600;
  transition: background-color 0.35s, color 0.35s;
}

.how-s4.is-rated .how-s4__tags span:nth-child(-n + 2) {
  background: rgba(250, 126, 56, 0.2);
  color: #ffb889;
}

.how-s4__trip {
  position: relative;
  display: grid;
  gap: 0.55em;
  width: 100%;
  margin-top: 0.7em;
  padding: 0.95em 0.95em 0.85em;
  border-radius: 1.15em;
  background: var(--how-surf);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  text-align: left;
}

.how-s4__trip::before {
  content: "";
  position: absolute;
  left: 1.25em;
  top: 1.65em;
  height: 1.25em;
  border-left: 1.5px dashed rgba(255, 255, 255, 0.24);
}

.how-s4__trip span {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-size: 0.8em;
  font-weight: 600;
}

.how-s4__trip em {
  margin-left: auto;
  color: var(--how-mute);
  font-size: 0.86em;
  font-style: normal;
}

.how-s4__trip small {
  display: flex;
  align-items: baseline;
  padding-top: 0.75em;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--how-mute);
  font-size: 0.68em;
  font-weight: 600;
}

.how-s4__trip small b {
  margin-left: auto;
  color: #f4f1f8;
  font: 700 1.3em / 1 var(--font-display);
}

.how-s4__tip {
  display: flex;
  align-items: center;
  gap: 0.4em;
  width: 100%;
  margin-top: 0.95em;
  padding: 0 0.2em;
}

.how-s4__tip span {
  margin-right: auto;
  color: var(--how-soft);
  font-size: 0.74em;
  font-weight: 600;
}

.how-s4__tip i {
  padding: 0.42em 0.7em;
  border-radius: 2em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: var(--how-soft);
  font: 700 0.66em / 1 var(--font-display);
  font-style: normal;
}

.how-s4__done {
  position: absolute;
  left: 1.15em;
  right: 1.15em;
  bottom: 2.5em;
}

/* ==========================================================================
   Pinned story (≥1021px, motion allowed) — .how--pin is added by how.js
   ========================================================================== */
.how--pin {
  padding-bottom: clamp(24px, 3vw, 48px);
}

.how--pin .how-head {
  margin-bottom: clamp(8px, 1.5vw, 24px);
}

.how--pin .how-pin {
  height: 400svh;
}

.how--pin .how-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  padding-top: var(--header-h);
}

.how--pin .how-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  column-gap: clamp(24px, 3.5vw, 64px);
  height: 100%;
}

.how--pin .how-flow {
  position: relative;
  z-index: 2;
  isolation: isolate;
  max-width: 540px;
}

.how--pin .how-steps {
  position: relative;
  grid-template-columns: none;
  grid-auto-rows: 1fr;
  gap: 8px;
}

/* White "you are here" card that glides to the active step */
.how--pin .how-steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  height: calc((100% - 24px) / 4);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 60px -36px rgba(80, 40, 10, 0.5), 0 2px 10px -4px rgba(26, 20, 36, 0.08);
  transform: translateY(calc(var(--step, 0) * (100% + 8px)));
  transition: transform 0.75s var(--ease-out);
}

.how--pin .how-step {
  z-index: 1;
  display: block;
  border: 0;
  border-radius: 22px;
  background: none;
  box-shadow: none;
  overflow: visible;
  container-type: normal;
}

.how--pin .how-step__media {
  display: none;
}

.how--pin .how-step__body {
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 4px;
  padding: 18px 26px 20px 14px;
}

.how--pin .how-step__num {
  position: relative;
  z-index: 2;
  grid-row: span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--cream-50);
  box-shadow: inset 0 0 0 1.5px rgba(26, 20, 36, 0.13);
  color: var(--on-cream-3);
  font: 600 1rem / 1 var(--font-display);
  letter-spacing: 0;
  transition: background-color 0.4s, color 0.4s, box-shadow 0.5s var(--ease-out);
}

.how--pin .how-step__num::before {
  content: none;
}

.how--pin .how-step__title {
  align-self: center;
  margin-top: 9px;
  font-size: clamp(1.3rem, 0.85rem + 0.85vw, 1.7rem);
  color: var(--on-cream-3);
  transition: color 0.4s;
}

.how--pin .how-step__text {
  grid-column: 2;
  max-width: 34ch;
  color: var(--on-cream-3);
  transition: color 0.4s;
}

.how--pin .how-step.is-active .how-step__title { color: var(--on-cream); }
.how--pin .how-step.is-active .how-step__text { color: var(--on-cream-2); }

.how--pin .how-step.is-done .how-step__num,
.how--pin .how-step.is-active .how-step__num {
  background: var(--orange-500);
  box-shadow: none;
  color: #1a0d05;
}

.how--pin .how-step.is-active .how-step__num {
  box-shadow: 0 0 0 6px rgba(250, 126, 56, 0.2), 0 10px 22px -8px rgba(236, 102, 32, 0.75);
}

.how--pin .how-step:not(.is-active):hover .how-step__title {
  color: var(--on-cream-2);
}

/* Step buttons (created by JS in pinned mode): the whole row is the hit area */
.how-step__btn {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.how-step__btn::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: 22px;
}

.how-step__btn:focus-visible {
  outline: none;
}

/* Drawn inside the row: the shared reveal clip-path would cut an outline that sits outside it */
.how-step__btn:focus-visible::after {
  outline: 2px solid var(--orange-600);
  outline-offset: -2px;
}

/* Progress rail through the step badges (position/size + fill set by JS) */
.how-rail {
  display: none;
}

.how--pin .how-rail {
  position: absolute;
  z-index: 1;
  left: 37px;
  top: 0;
  display: block;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: rgba(26, 20, 36, 0.1);
}

.how-rail__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--orange-400), var(--orange-600));
  transform: scaleY(0);
  transform-origin: 50% 0;
}

.how-rail__head {
  position: absolute;
  left: 50%;
  top: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--orange-500);
  box-shadow: 0 0 0 5px rgba(250, 126, 56, 0.2), 0 0 18px 2px rgba(250, 126, 56, 0.55);
}

.how--pin .how-cta {
  justify-content: flex-start;
  margin-top: 26px;
  padding-left: 14px;
}

/* ---------- Pinned visual: halo, numeral, phone, chips ---------- */
.how-visual {
  display: none;
}

.how--pin .how-visual {
  --ph-h: min(740px, calc(100svh - var(--header-h) - 48px));
  --ph-w: calc(var(--ph-h) / 2.0884);
  --mx: 0;
  --my: 0;
  position: relative;
  display: block;
  height: 100%;
}

.how-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--ph-h) * 1.18);
  aspect-ratio: 1;
  border-radius: 50%;
  translate: calc(-50% + var(--mx) * 4px) calc(-50% + var(--my) * 4px);
  background: radial-gradient(closest-side, rgba(250, 126, 56, 0.3), rgba(250, 126, 56, 0.1) 52%, transparent 74%);
  pointer-events: none;
}

.how-halo::before,
.how-halo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

/* Outer dashed orbit with three "captains" riding on it; inner orbit turns the other way */
.how-halo::before {
  inset: 9%;
  border: 1.5px dashed rgba(201, 80, 15, 0.26);
  background:
    radial-gradient(circle, #fa7e38 0 4px, rgba(250, 126, 56, 0.25) 5px 8px, transparent 9px) 50% 0 / 18px 18px no-repeat,
    radial-gradient(circle, #3ddc97 0 3.5px, rgba(61, 220, 151, 0.22) 4.5px 7px, transparent 8px) 7% 75% / 16px 16px no-repeat,
    radial-gradient(circle, #ffc857 0 3.5px, rgba(255, 200, 87, 0.3) 4.5px 7px, transparent 8px) 97% 67% / 16px 16px no-repeat;
  animation: how-spin 80s linear infinite;
}

.how-halo::after {
  inset: 23%;
  border: 1px solid rgba(201, 80, 15, 0.16);
  background: radial-gradient(circle, #8b7cf8 0 3px, rgba(139, 124, 248, 0.25) 4px 6px, transparent 7px) 85% 14.6% / 14px 14px no-repeat;
  animation: how-spin 56s linear infinite reverse;
}

@keyframes how-spin {
  to { rotate: 360deg; }
}

.how-phone-wrap {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  translate: calc(-50% + var(--mx) * 7px) calc(-50% + var(--my) * 6px);
}

.how-phone-float {
  animation: how-float 7s var(--ease-in-out) infinite;
}

@keyframes how-float {
  50% { translate: 0 -10px; }
}

.how--pin .how-device--main {
  rotate: calc((var(--p, 0) - 0.5) * -4deg);
  will-change: transform; /* rotates every scroll frame: keep it on its own layer */
}

.how-phone-shadow {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: calc(var(--ph-w) * -0.08);
  width: calc(var(--ph-w) * 0.86);
  height: calc(var(--ph-w) * 0.14);
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(74, 34, 8, 0.34), transparent);
  animation: how-shadow 7s var(--ease-in-out) infinite;
}

@keyframes how-shadow {
  50% { scale: 0.88; opacity: 0.7; }
}

/* Screens inside the big phone: push transition like real app navigation */
.how--pin .how-device--main .how-screen {
  opacity: 0;
  visibility: hidden;
  translate: 34% 0;
  transition: translate 0.9s var(--ease-out), opacity 0.45s ease, visibility 0s linear 0.9s;
}

.how--pin .how-device--main .how-screen.is-past {
  translate: -24% 0;
}

.how--pin .how-device--main .how-screen.is-active {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: translate 0.9s var(--ease-out), opacity 0.45s ease, visibility 0s;
}

/* Desktop chips: two per step, each at its own depth. They drift with scroll (--p) and pointer (--mx/--my). */
.how--pin .how-visual .how-chip {
  position: absolute;
  z-index: 4;
  opacity: 0;
  transform: translateY(18px) scale(0.9);
  translate:
    calc(var(--mx) * var(--d, 1) * 14px)
    calc(var(--my) * var(--d, 1) * 10px + (var(--p, 0) * 4 - var(--k, 0) - 0.5) * var(--d, 1) * -46px);
  transition: opacity 0.45s var(--ease-out), transform 0.75s var(--ease-spring);
  will-change: transform;
}

/* Chips sit beside the phone (overlapping its edge by ~14% of its width) over the less important parts
   of each screen. --y is the chip's centre relative to the phone's centre, in phone heights. */
.how--pin .how-visual {
  --cw: 258px;     /* max chip width — positions are clamped with it */
  --chip-gl: 40px; /* how far a left chip may reach into the column gap */
  --chip-gr: 20px; /* how far a right chip may reach into the page gutter */
}

.how--pin .how-visual .how-chip {
  top: calc(50% + var(--y, 0) * var(--ph-h));
  width: max-content;
  max-width: var(--cw);
  margin-top: -29px;
  white-space: normal;
}

.how--pin .how-visual .how-chip__txt {
  min-width: 0;
}

/* Hug the phone (anchored on the phone side), but never spill out of the visual column */
.how--pin .how-visual .how-chip--l { right: min(calc(50% + var(--ph-w) * 0.36), calc(100% - var(--cw) + var(--chip-gl))); }
.how--pin .how-visual .how-chip--r { left: min(calc(50% + var(--ph-w) * 0.36), calc(100% - var(--cw) + var(--chip-gr))); }

.how-chip--a { --k: 0; --d: 1.3; --y: 0.36; }
.how-chip--b { --k: 0; --d: 0.75; --y: -0.15; }
.how-chip--c { --k: 1; --d: 1.2; --y: -0.19; }
.how-chip--d { --k: 1; --d: 0.8; --y: 0.42; }
.how-chip--e { --k: 2; --d: 1.3; --y: 0.03; }
.how-chip--f { --k: 2; --d: 0.8; --y: -0.3; }
.how-chip--g { --k: 3; --d: 1.2; --y: -0.24; }
.how-chip--h { --k: 3; --d: 0.85; --y: 0.315; }

.how-stage[data-step="0"] .how-chip[data-k="0"],
.how-stage[data-step="1"] .how-chip[data-k="1"],
.how-stage[data-step="2"] .how-chip[data-k="2"],
.how-stage[data-step="3"] .how-chip[data-k="3"] {
  opacity: 1;
  transform: none;
}

.how-stage .how-chip--b,
.how-stage .how-chip--d,
.how-stage .how-chip--f,
.how-stage .how-chip--h {
  transition-delay: 0.1s;
}

/* Short desktop screens: tighten the step list */
@media (max-height: 760px) {
  .how--pin .how-step__body {
    padding-block: 12px 14px;
  }

  .how--pin .how-step__title {
    margin-top: 10px;
    font-size: 1.28rem;
  }

  .how--pin .how-step__text {
    font-size: 0.95rem;
  }

  .how--pin .how-cta {
    margin-top: 18px;
  }
}

@media (max-height: 640px) {
  .how--pin .how-cta {
    display: none;
  }
}

/* Narrow desktops: compact chips (titles may wrap) so they stay inside the visual column */
@media (max-width: 1200px) {
  .how--pin .how-visual {
    --cw: 212px;
    --chip-gl: 18px;
    --chip-gr: 16px;
  }

  .how--pin .how-visual .how-chip {
    gap: 9px;
    padding: 8px 12px 8px 8px;
  }

  .how--pin .how-visual .how-chip__ico {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .how--pin .how-visual .how-chip__ico .how-i {
    width: 16px;
    height: 16px;
  }

  .how--pin .how-visual .how-chip__txt b { font-size: 0.84rem; line-height: 1.2; }
  .how--pin .how-visual .how-chip__txt small { font-size: 0.72rem; }
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  .how-step__body {
    padding: 20px 20px 22px;
  }

  .how-chip--m .how-chip__txt b { font-size: 0.82rem; }
  .how-chip--m .how-chip__txt small { font-size: 0.72rem; }
}

/* ---------- Reduced motion: everything is static and complete (JS renders final states) ---------- */
@media (prefers-reduced-motion: reduce) {
  .how-step__media .how-device,
  .js .how-step:not(.is-in) .how-step__media .how-device {
    translate: -50% 0;
  }

  .how-halo::before,
  .how-phone-float,
  .how-phone-shadow,
  .how-map__pulse,
  .how-s1__caret {
    animation: none;
  }
}

/* ======================================================================
   SAFETY
   ====================================================================== */
/* Safety — dark sheet over the cream "how" section.
   Radar centrepiece (sweep, pulses, blips, orbiting captains, glowing shield) + six feature cards. */

.safe {
  overflow: clip;
  isolation: isolate;
  padding-bottom: clamp(72px, 8vw, 124px);
  background:
    radial-gradient(90% 60% at 85% 8%, rgba(139, 124, 248, 0.07), transparent 62%),
    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-900) 74%, var(--ink-950) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* base.css leaves `clip-path: inset(0 …)` on every revealed element, which clips shadows, glows, hover lifts
   and focus rings that paint outside the box. Only the "clip" variant needs it. */
.js .safe [data-reveal]:not([data-reveal="clip"]) {
  clip-path: none;
}

/* ---------- ambient background ---------- */
.safe-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.safe-bg__glow {
  position: absolute;
  border-radius: 50%;
}

.safe-bg__glow--a {
  right: -12%;
  top: 4%;
  width: min(1100px, 120vw);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(250, 126, 56, 0.13), rgba(250, 126, 56, 0.04) 55%, transparent 72%);
}

.safe-bg__glow--b {
  left: -18%;
  bottom: 6%;
  width: min(900px, 110vw);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(139, 124, 248, 0.09), transparent 70%);
}

.safe-bg__dots {
  position: absolute;
  inset: -10% 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1.6px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(60% 45% at 72% 30%, #000, transparent 75%);
  mask-image: radial-gradient(60% 45% at 72% 30%, #000, transparent 75%);
}

/* ---------- top: heading + radar ---------- */
.safe-top {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(40px, 5vw, 96px);
}

.safe-head {
  display: grid;
  justify-items: start;
  gap: 22px;
  max-width: 580px;
}

.safe-title {
  max-width: 11ch;
}

.safe-lead {
  max-width: 50ch;
}

.safe-women {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  margin-top: 6px;
  padding: 14px 16px 14px 14px;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background: linear-gradient(100deg, rgba(250, 126, 56, 0.11), rgba(255, 255, 255, 0.025) 62%);
}

.safe-women__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--grad-brand);
  color: #1a0d05;
  box-shadow: 0 10px 26px -12px var(--orange-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.safe-women__icon .icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.9;
}

.safe-women__text {
  color: var(--text-2);
  font-size: 0.93rem;
  line-height: 1.45;
}

.safe-women__text strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.safe-women__chip {
  align-self: start;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}

.safe-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 8px;
}

.safe-cta__note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.safe-sos-dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--rose);
}

.safe-sos-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--rose);
  border-radius: 50%;
  opacity: 0;
  animation: live-ping 2.2s var(--ease-out) infinite;
}

/* ---------- radar visual ---------- */
.safe-visual {
  --mx: 0;
  --my: 0;
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1;
  justify-self: center;
  pointer-events: none;
}

.safe-visual__halo {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 126, 56, 0.2), rgba(250, 126, 56, 0.06) 55%, transparent 74%);
}

.safe-radar {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 60px 120px -60px rgba(0, 0, 0, 0.85);
}

.safe-radar > * {
  position: absolute;
}

.safe-radar__base,
.safe-radar__dial {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.safe-radar__rings circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1.2;
}

.safe-radar__cross {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
  stroke-dasharray: 2 7;
}

.safe-radar__edge {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1.5;
}

.safe-radar__road {
  fill: none;
  stroke: rgba(255, 255, 255, 0.075);
  stroke-width: 8;
  stroke-linecap: round;
}

.safe-radar__road--thin {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 3.5;
}

.safe-radar__river {
  fill: none;
  stroke: rgba(139, 124, 248, 0.13);
  stroke-width: 18;
  stroke-linecap: round;
}

/* Dial: turns with scroll progress (--p from .safe-visual) */
.safe-radar__dial {
  rotate: calc((var(--p, 0.5) - 0.5) * 150deg);
}

.safe-dial__minor {
  fill: none;
  stroke: rgba(255, 255, 255, 0.17);
  stroke-width: 6;
  stroke-dasharray: 0.3 2.7;
}

.safe-dial__major {
  fill: none;
  stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 12;
  stroke-dasharray: 0.6 29.4;
}

.safe-dial__dash {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1.4;
  stroke-dasharray: 1 3;
}

.safe-dial__arc {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 64 296;
}

/* Sweep — leading edge at 0deg (top), rotating clockwise once every 6s */
.safe-radar__sweep {
  inset: 3.33%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(250, 126, 56, 0) 0deg,
    rgba(250, 126, 56, 0) 240deg,
    rgba(250, 126, 56, 0.06) 296deg,
    rgba(250, 126, 56, 0.24) 348deg,
    rgba(255, 196, 150, 0.7) 359.4deg,
    rgba(250, 126, 56, 0) 360deg
  );
  -webkit-mask-image: radial-gradient(closest-side, transparent 22%, #000 42%);
  mask-image: radial-gradient(closest-side, transparent 22%, #000 42%);
  animation: safe-spin 6s linear infinite;
}

.safe-radar__pulses {
  inset: 3.33%;
}

.safe-radar__pulses i {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(250, 126, 56, 0.55);
  border-radius: 50%;
  box-shadow: inset 0 0 36px rgba(250, 126, 56, 0.12);
  opacity: 0;
  animation: safe-pulse 4.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.safe-radar__pulses i:nth-child(2) {
  animation-delay: -1.5s;
}

.safe-radar__pulses i:nth-child(3) {
  animation-delay: -3s;
}

.safe-radar__blips {
  inset: 0;
}

.safe-radar__blips i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 12px 1px rgba(61, 220, 151, 0.75);
  opacity: 0.4;
  animation: safe-blip 6s linear var(--d, 0s) infinite;
}

.safe-radar__blips i::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1.5px solid rgba(61, 220, 151, 0.85);
  border-radius: 50%;
  opacity: 0;
  animation: safe-blip-ring 6s var(--ease-out) var(--d, 0s) infinite;
}

/* Orbiting captains */
.safe-orbit {
  inset: 0;
  translate: calc(var(--mx) * var(--depth) * 1px) calc(var(--my) * var(--depth) * 1px);
}

.safe-orbit--1 {
  --depth: 10;
  --inset: 25%;
  --dur: 26s;
}

.safe-orbit--2 {
  --depth: 18;
  --inset: 15.83%;
  --dur: 42s;
}

.safe-orbit--3 {
  --depth: 26;
  --inset: 6.67%;
  --dur: 64s;
}

.safe-orbit__ring {
  position: absolute;
  inset: var(--inset);
  border-radius: 50%;
  animation: safe-spin var(--dur) linear infinite;
}

.safe-orbit__ring::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 288deg, rgba(250, 126, 56, 0) 0deg, rgba(250, 126, 56, 0.7) 72deg, rgba(250, 126, 56, 0) 72.5deg);
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}

.safe-orbit--2 .safe-orbit__ring {
  animation-direction: reverse;
}

.safe-orbit--2 .safe-orbit__ring::before {
  background: conic-gradient(from 0deg, rgba(200, 190, 255, 0.55) 0deg, rgba(139, 124, 248, 0) 64deg);
}

.safe-orbit__ring i {
  position: absolute;
  inset: 0;
  rotate: var(--a);
}

.safe-orbit__ring i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(250, 126, 56, 0.24), 0 0 18px 2px rgba(250, 126, 56, 0.8);
}

.safe-orbit--2 .safe-orbit__ring i:first-child::before {
  box-shadow: 0 0 0 4px rgba(139, 124, 248, 0.26), 0 0 18px 2px rgba(139, 124, 248, 0.8);
}

.safe-orbit__ring i.is-sm::before {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--orange-300);
  box-shadow: 0 0 10px 1px rgba(250, 126, 56, 0.65);
}

.safe-orbit__ring i.is-sky::before {
  background: #cfc8ff;
  box-shadow: 0 0 10px 1px rgba(139, 124, 248, 0.8);
}

/* Shield */
.safe-shield {
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 29%;
  translate: calc(-50% + var(--mx) * 14px) calc(-50% + var(--my) * 14px);
  scale: calc(0.8 + 0.2 * min(1, var(--p, 0.5) * 2.4));
}

.safe-shield__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(250, 126, 56, 0.5), rgba(250, 126, 56, 0.16) 42%, transparent 70%);
  animation: safe-glow 4.5s ease-in-out infinite;
}

.safe-shield__body {
  position: relative;
  animation: safe-breathe 4.5s ease-in-out infinite;
}

.safe-shield__svg {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(250, 126, 56, 0.45));
}

.safe-shield__shine {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: translateX(0) skewX(-16deg);
  animation: safe-shine 6s var(--ease-in-out) infinite;
}

.safe-shield__icon {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 50%;
  translate: -50% -50%;
  --car-body: var(--orange-500);
  --car-wheel: #fff;
  --car-hub: #fff;
  --car-valve: #fff;
  filter: drop-shadow(0 0 10px rgba(250, 126, 56, 0.55));
}

.safe-shield__check {
  position: absolute;
  right: -5%;
  bottom: 9%;
  display: grid;
  place-items: center;
  width: 31%;
  aspect-ratio: 1;
  border: 3px solid var(--ink-900);
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 1px rgba(61, 220, 151, 0.4), 0 8px 22px -6px rgba(61, 220, 151, 0.7);
  scale: 0;
  transition: scale 0.7s var(--ease-spring) 0.65s;
}

.safe-radar.is-in .safe-shield__check {
  scale: 1;
}

.safe-shield__check svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: #052a19;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Floating chips */
.safe-float {
  position: absolute;
  z-index: 3;
  left: var(--fx);
  top: var(--fy);
}

.safe-float--a {
  --fx: -6%;
  --fy: 9%;
  --depth: 30;
}

.safe-float--b {
  --fx: 70%;
  --fy: 27%;
  --depth: 22;
}

.safe-float--c {
  --fx: -3%;
  --fy: 73%;
  --depth: 38;
}

.safe-float--d {
  --fx: 63%;
  --fy: 86%;
  --depth: 18;
}

.safe-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px 9px 9px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 16px;
  background: rgba(26, 21, 37, 0.92);
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  translate: calc(var(--mx) * var(--depth) * 1px) calc(var(--my) * var(--depth) * 1px);
}

.safe-chip__ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: var(--orange-soft);
  color: var(--orange-300);
}

.safe-chip__ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.safe-chip__ico--mint {
  background: rgba(61, 220, 151, 0.14);
  color: var(--mint);
}

.safe-chip__ico--rose {
  background: rgba(255, 93, 115, 0.14);
  color: #ff8a9a;
}

.safe-chip__ico--live {
  background: rgba(61, 220, 151, 0.1);
}

.safe-chip__txt {
  display: grid;
  gap: 1px;
  line-height: 1.25;
}

.safe-chip__txt b {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.safe-chip__txt small {
  color: var(--text-3);
  font-size: 0.74rem;
  font-weight: 600;
}

.safe-chip__pin {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.safe-chip__pin i {
  display: grid;
  place-items: center;
  width: 17px;
  height: 19px;
  border-radius: 5px;
  background: rgba(250, 126, 56, 0.16);
  color: var(--orange-200);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Frosted glass only where it is cheap: wide screens with a real pointer */
@media (min-width: 1021px) and (hover: hover) and (pointer: fine) {
  .safe-chip {
    background: rgba(26, 21, 37, 0.78);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
  }
}

/* Chip bob loops (on the inner chip; the wrapper carries the scroll parallax) */
.safe-float .safe-chip.is-in {
  animation: safe-bob 6.5s ease-in-out infinite;
}

.safe-float--b .safe-chip.is-in {
  animation-duration: 7.5s;
  animation-delay: -2s;
}

.safe-float--c .safe-chip.is-in {
  animation-duration: 5.8s;
  animation-delay: -4s;
}

.safe-float--d .safe-chip.is-in {
  animation-duration: 8s;
  animation-delay: -1s;
}

/* reveal stagger (base.css reads --d in ms) */
.safe-float--a .safe-chip {
  --d: 250;
}

.safe-float--b .safe-chip {
  --d: 420;
}

.safe-float--c .safe-chip {
  --d: 590;
}

.safe-float--d .safe-chip {
  --d: 760;
}

/* Everything pauses while the radar is off-screen */
.safe-visual.is-paused *,
.safe-visual.is-paused *::before,
.safe-visual.is-paused *::after {
  animation-play-state: paused !important;
}

/* ---------- feature cards ---------- */
.safe .safe-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: clamp(72px, 9vw, 136px) 0 0;
}

.safe-item {
  display: flex;
}

.safe-card {
  --gx: 50%;
  --gy: 0%;
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 2.4vw, 32px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  box-shadow: var(--shadow-md);
  transition: translate 0.5s var(--ease-out), border-color 0.4s, box-shadow 0.5s var(--ease-out);
}

/* pointer spotlight + glowing border */
.safe-card::before,
.safe-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}

.safe-card::before {
  background: radial-gradient(380px circle at var(--gx) var(--gy), rgba(250, 126, 56, 0.13), transparent 48%);
}

.safe-card::after {
  padding: 1px;
  background: radial-gradient(260px circle at var(--gx) var(--gy), rgba(255, 168, 112, 0.85), transparent 62%);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.safe-card:hover {
  translate: 0 -4px;
  border-color: rgba(250, 126, 56, 0.2);
  box-shadow: 0 34px 70px -34px rgba(250, 126, 56, 0.4), var(--shadow-md);
}

.safe-card:hover::before,
.safe-card:hover::after {
  opacity: 1;
}

.safe-card__num {
  position: absolute;
  top: clamp(24px, 2.4vw, 32px);
  right: clamp(24px, 2.4vw, 32px);
  color: var(--text-3);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  transition: color 0.3s;
}

.safe-card:hover .safe-card__num {
  color: var(--orange-300);
}

.safe-card__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(250, 126, 56, 0.18), rgba(250, 126, 56, 0.05));
  box-shadow: inset 0 0 0 1px rgba(250, 126, 56, 0.24), 0 12px 26px -14px rgba(250, 126, 56, 0.55);
  color: var(--orange-300);
  transition: background-color 0.4s, box-shadow 0.4s, color 0.3s, scale 0.5s var(--ease-spring);
}

.safe-card__icon .icon {
  width: 24px;
  height: 24px;
}

.safe-card:hover .safe-card__icon {
  scale: 1.06;
  color: var(--orange-200);
  box-shadow: inset 0 0 0 1px rgba(250, 126, 56, 0.45), 0 14px 32px -12px rgba(250, 126, 56, 0.75);
}

.safe-card--sos .safe-card__icon {
  background: linear-gradient(180deg, rgba(255, 93, 115, 0.2), rgba(255, 93, 115, 0.05));
  box-shadow: inset 0 0 0 1px rgba(255, 93, 115, 0.3), 0 12px 26px -14px rgba(255, 93, 115, 0.6);
  color: #ff97a5;
}

.safe-card--sos:hover .safe-card__icon {
  color: #ffb3bd;
  box-shadow: inset 0 0 0 1px rgba(255, 93, 115, 0.5), 0 14px 32px -12px rgba(255, 93, 115, 0.75);
}

.safe-card:hover .safe-ray {
  animation: safe-ray 0.9s ease-in-out 2;
}

.safe-card:hover .safe-card__icon--pin circle {
  animation: safe-pin 1.2s ease-in-out;
}

.safe-card__icon--pin circle:nth-of-type(2) {
  animation-delay: 0.1s !important;
}

.safe-card__icon--pin circle:nth-of-type(3) {
  animation-delay: 0.2s !important;
}

.safe-card__icon--pin circle:nth-of-type(4) {
  animation-delay: 0.3s !important;
}

.safe-card__title {
  padding-right: 2.2em;
  color: var(--text);
  font-size: clamp(1.18rem, 1.06rem + 0.42vw, 1.42rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.018em;
}

.safe-card__text {
  color: var(--text-2);
  font-size: 0.97rem;
  line-height: 1.62;
}

.safe-card__tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.safe-card__text + .safe-card__tag {
  margin-top: auto;
}

.safe-card__tag .icon {
  width: 16px;
  height: 16px;
  color: var(--mint);
  stroke-width: 2.4;
}

.safe-nowrap {
  white-space: nowrap;
}

/* ---------- help strip ---------- */
.safe-help {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 760px;
  margin: clamp(36px, 4.4vw, 60px) auto 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-align: center;
}

.safe-help__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(61, 220, 151, 0.14);
}

.safe-help a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(250, 126, 56, 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.safe-help a:hover {
  color: var(--orange-300);
  text-decoration-color: var(--orange-400);
}

/* ---------- keyframes ---------- */
@keyframes safe-spin {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

@keyframes safe-pulse {
  0% {
    scale: 0.3;
    opacity: 0;
  }
  12% {
    opacity: 0.9;
  }
  100% {
    scale: 1;
    opacity: 0;
  }
}

@keyframes safe-blip {
  0% {
    opacity: 1;
    scale: 1.4;
  }
  8% {
    scale: 1;
  }
  55% {
    opacity: 0.45;
  }
  100% {
    opacity: 0.3;
    scale: 1;
  }
}

@keyframes safe-blip-ring {
  0% {
    opacity: 0.95;
    scale: 0.4;
  }
  32%,
  100% {
    opacity: 0;
    scale: 2.6;
  }
}

@keyframes safe-glow {
  0%,
  100% {
    opacity: 0.72;
    scale: 0.95;
  }
  50% {
    opacity: 1;
    scale: 1.05;
  }
}

@keyframes safe-breathe {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.035;
  }
}

@keyframes safe-shine {
  0%,
  58% {
    transform: translateX(0) skewX(-16deg);
  }
  86%,
  100% {
    transform: translateX(190px) skewX(-16deg);
  }
}

@keyframes safe-bob {
  0%,
  100% {
    translate: calc(var(--mx) * var(--depth) * 1px) calc(var(--my) * var(--depth) * 1px - 5px);
  }
  50% {
    translate: calc(var(--mx) * var(--depth) * 1px) calc(var(--my) * var(--depth) * 1px + 5px);
  }
}

@keyframes safe-ray {
  50% {
    opacity: 0.15;
  }
}

@keyframes safe-pin {
  0%,
  100% {
    opacity: 1;
  }
  40% {
    opacity: 0.2;
  }
}

/* ---------- tablet ---------- */
@media (max-width: 1020px) {
  .safe-top {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(48px, 8vw, 72px);
  }

  .safe-head {
    max-width: 640px;
  }

  .safe-title {
    max-width: 13ch;
  }

  .safe-visual {
    width: min(100%, 540px);
  }

  .safe-float--a {
    --fx: -12%;
  }

  .safe-float--b {
    --fx: 78%;
  }

  .safe-float--c {
    --fx: -10%;
  }

  .safe-float--d {
    --fx: 66%;
  }

  .safe .safe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .safe-head {
    gap: 18px;
  }

  .safe-women {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  .safe-women__icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .safe-women__chip {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  .safe-women {
    position: relative;
  }

  .safe-women__text strong {
    padding-right: 52px;
  }

  .safe-cta .btn {
    width: 100%;
  }

  .safe-visual {
    width: 100%;
    max-width: 440px;
  }

  .safe-chip {
    gap: 8px;
    padding: 7px 11px 7px 7px;
    border-radius: 13px;
  }

  .safe-chip__ico {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  .safe-chip__ico svg {
    width: 15px;
    height: 15px;
  }

  .safe-chip__txt b {
    font-size: 0.78rem;
  }

  /* compact single-line pills on phones; the PIN chip shows just its digit boxes */
  .safe-chip__txt small {
    display: none;
  }

  .safe-float--b .safe-chip__txt b {
    display: none;
  }

  .safe-float--b .safe-chip__txt small {
    display: flex;
    margin: 0;
  }

  .safe-chip__pin i {
    width: 17px;
    height: 20px;
    font-size: 0.74rem;
  }

  .safe-float--a {
    --fx: 0%;
    --fy: 4%;
  }

  .safe-float--b {
    --fx: auto;
    --fy: 22%;
    right: 0%;
  }

  .safe-float--c {
    --fx: 0%;
    --fy: 80%;
  }

  .safe-float--d {
    --fx: auto;
    --fy: 90%;
    right: 3%;
  }

  .safe .safe-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .safe-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 6px;
    padding: 20px 20px 18px;
    border-radius: 22px;
  }

  .safe-card > :not(.safe-card__icon) {
    grid-column: 2;
  }

  .safe-card__icon {
    grid-row: 1 / span 3;
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: 14px;
  }

  .safe-card__num {
    top: 20px;
    right: 20px;
  }

  .safe-card__title {
    font-size: 1.14rem;
  }

  .safe-card__text {
    font-size: 0.94rem;
  }

  .safe-card__tag {
    margin-top: 8px;
    padding-top: 12px;
  }

  .safe-help {
    align-items: flex-start;
    text-align: left;
  }

  .safe-help__dot {
    margin-top: 7px;
  }
}

@media (max-width: 380px) {
  .safe-float--d {
    display: none;
  }
}

/* ---------- reduced motion: a calm, complete still ---------- */
@media (prefers-reduced-motion: reduce) {
  .safe-radar__sweep,
  .safe-radar__pulses i,
  .safe-radar__blips i,
  .safe-radar__blips i::after,
  .safe-orbit__ring,
  .safe-shield__glow,
  .safe-shield__body,
  .safe-shield__shine,
  .safe-float .safe-chip.is-in,
  .safe-sos-dot::after {
    animation: none !important;
  }

  .safe-radar__sweep {
    rotate: 64deg;
  }

  .safe-radar__pulses i:nth-child(1) {
    scale: 0.52;
    opacity: 0.55;
  }

  .safe-radar__pulses i:nth-child(2) {
    scale: 0.74;
    opacity: 0.32;
  }

  .safe-radar__pulses i:nth-child(3) {
    scale: 0.96;
    opacity: 0.16;
  }

  .safe-radar__blips i {
    opacity: 0.75;
  }

  .safe-shield,
  .safe-radar__dial {
    scale: 1;
    rotate: none;
  }

  .safe-shield__check {
    scale: 1;
  }
}

/* ======================================================================
   STATS
   ====================================================================== */
/* Stats — "Drroo in numbers". Count-up figures over two rows of giant outlined type drifting in
   opposite directions; a tiny Drroo drives the route above the figures as you scroll. */

.stats {
  --stats-mega: clamp(4.6rem, 1.6rem + 11.5vw, 13.5rem);
  --stats-num: clamp(3.1rem, 1.25rem + 4.6vw, 6rem);
  --road-h: 52px;
  --road-gap: 34px;
  --skew: 0deg;
  overflow: clip;
  isolation: isolate;
  padding-top: clamp(72px, 8vw, 128px);
  background:
    radial-gradient(70% 50% at 50% 68%, rgba(250, 126, 56, 0.07), transparent 70%),
    var(--ink-950);
}

/* base.css leaves `clip-path: inset(0 …)` on every revealed element, which would clip the road stop markers
   (they sit above each figure) and focus rings. Only the "clip" variant needs it. */
.js .stats [data-reveal]:not([data-reveal="clip"]) {
  clip-path: none;
}

/* ---------- giant drifting type (decorative, behind the content) ---------- */
.stats-row {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  height: calc(var(--stats-mega) * 0.86);
  pointer-events: none;
  user-select: none;
  transform: skewX(var(--skew));
}

.stats-row--a {
  top: 50%;
  translate: 0 -46%;
}

.stats-row--b {
  top: calc(var(--road-h) + var(--road-gap) + var(--stats-num) * 0.46);
  translate: 0 -50%;
}

.stats-row__track {
  position: absolute;
  left: 50%;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.3em;
  translate: -50% 0;
  white-space: nowrap;
  color: transparent;
  font-family: var(--font-display);
  font-size: var(--stats-mega);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px rgba(246, 243, 250, 0.085);
  will-change: transform;
}

.stats-row--b .stats-row__track {
  -webkit-text-stroke-color: rgba(250, 126, 56, 0.13);
}

.stats-star {
  width: 0.4em;
  height: 0.4em;
  flex: none;
  fill: var(--orange-500);
  opacity: 0.4;
}

.stats-row--b .stats-star {
  fill: none;
  stroke: rgba(246, 243, 250, 0.22);
  stroke-width: 0.45;
  opacity: 1;
}

/* ---------- heading ---------- */
.stats-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(300px, 28vw, 400px));
  align-items: end;
  gap: 32px clamp(32px, 6vw, 96px);
  margin-bottom: clamp(72px, 9vw, 132px);
}

.stats-head__main {
  display: grid;
  justify-items: start;
  gap: 18px;
}

@media (min-width: 1021px) {
  /* keeps "Twelve million moves." on one line beside the quote at 1024–1280px */
  .stats-title {
    font-size: min(var(--fs-h2), 5vw);
  }
}

.stats-title .text-gradient {
  display: block;
}

.stats-quote {
  margin: 0;
  padding: 2px 0 2px 24px;
  border-left: 2px solid var(--orange-500);
}

.stats-quote blockquote {
  margin: 0;
}

.stats-quote p {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 0.98rem + 0.42vw, 1.34rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
}

.stats-quote figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.stats-quote figcaption::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}

/* ---------- road + car ---------- */
.stats-board {
  position: relative;
}

.stats-road {
  --fill: 0;
  position: relative;
  z-index: 2;
  height: var(--road-h);
}

.stats-road__line,
.stats-road__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
}

.stats-road__line {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 12px, transparent 12px 22px);
}

.stats-road__fill {
  background: linear-gradient(90deg, rgba(250, 126, 56, 0.1), rgba(250, 126, 56, 0.9) 78%, var(--orange-300));
  box-shadow: 0 0 14px rgba(250, 126, 56, 0.5);
  transform-origin: 0 50%;
  scale: var(--fill) 1;
}

.stats-road__pin {
  position: absolute;
  right: -2px;
  bottom: 7px;
  width: 22px;
  transform-origin: 50% 100%;
  transition: scale 0.5s var(--ease-spring);
}

.stats-road__pin svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.stats-road__pin path {
  fill: var(--ink-700);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.2;
  transition: fill 0.4s, stroke 0.4s;
}

.stats-road__pin circle {
  fill: var(--ink-950);
}

.stats-road__pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 24px;
  height: 9px;
  margin-left: -12px;
  border: 1.5px solid var(--orange-400);
  border-radius: 50%;
  opacity: 0;
}

.stats-road__pin.is-arrived {
  scale: 1.14;
}

.stats-road__pin.is-arrived path {
  fill: var(--orange-500);
  stroke: var(--orange-300);
}

.stats-road__pin.is-arrived::after {
  animation: stats-ping 1.6s var(--ease-out) 2;
}

.stats-car {
  --car-body: var(--orange-500);
  --car-wheel: #fff;
  --car-hub: var(--ink-900);
  --car-valve: var(--ink-900);
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 54px;
  will-change: transform;
}

.stats-car .drroo-icon {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}

.stats-car .drroo-icon__wheel {
  transform: rotate(var(--wheel, 0deg));
}

/* headlight beam — dims once the car has parked at the pin */
.stats-car::before {
  content: "";
  position: absolute;
  left: 86%;
  top: 40%;
  width: 78px;
  height: 34px;
  background: linear-gradient(90deg, rgba(255, 214, 150, 0.55), rgba(255, 200, 87, 0));
  clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 66%);
  transition: opacity 0.6s;
}

.stats-road:has(.is-arrived) .stats-car::before {
  opacity: 0.25;
}

/* soft glow under the car */
.stats-car::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -6px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 126, 56, 0.45), transparent);
}

/* ---------- figures ---------- */
.stats .stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px clamp(16px, 2.2vw, 34px);
  margin: var(--road-gap) 0 0;
}

.stats-item {
  position: relative;
  display: grid;
  align-content: start;
}

/* stop markers sit on the road line above each figure (desktop) */
.stats-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--road-gap) * -1 - 7px);
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: var(--ink-950);
  transition: background-color 0.4s, border-color 0.4s, box-shadow 0.6s var(--ease-out), scale 0.5s var(--ease-spring);
}

.stats-item.is-on::before {
  border-color: var(--orange-300);
  background: var(--orange-500);
  box-shadow: 0 0 0 5px rgba(250, 126, 56, 0.16), 0 0 18px rgba(250, 126, 56, 0.8);
  scale: 1.12;
}

.stats-num {
  display: flex;
  align-items: flex-start;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--stats-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  letter-spacing: -0.055em;
  white-space: nowrap;
}

/* The hidden ghost reserves the final width, so the suffix never shifts while counting */
.stats-num__fig {
  display: inline-grid;
  align-self: baseline;
}

.stats-num__fig > span {
  grid-area: 1 / 1;
  text-align: right;
}

.stats-num__ghost {
  visibility: hidden;
}

.stats-num__suf {
  margin: 0.04em 0 0 0.06em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 0.54em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stats-num__suf--unit {
  align-self: baseline;
  margin: 0 0 0 0.16em;
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0;
}

.stats-num__suf--star {
  display: flex;
  width: 0.5em;
  margin: 0.02em 0 0 0.1em;
}

.stats-num__suf--star svg {
  width: 100%;
  height: auto;
  fill: var(--orange-500);
  filter: drop-shadow(0 0 12px rgba(250, 126, 56, 0.45));
}

.stats-label {
  margin-top: 18px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.stats-note {
  max-width: 24ch;
  margin-top: 6px;
  color: var(--text-3);
  font-size: 0.88rem;
  line-height: 1.5;
}

@keyframes stats-ping {
  0% {
    opacity: 0.9;
    scale: 0.4;
  }
  100% {
    opacity: 0;
    scale: 2.2;
  }
}

/* ---------- tablet ---------- */
@media (max-width: 1020px) {
  /* the next section's sheet overlaps our bottom edge by --r-xl; keep the figures breathing */
  .stats {
    padding-bottom: calc(var(--section-y) + 24px);
  }

  .stats-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .stats-quote {
    max-width: 520px;
  }

  .stats .stats-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 48px;
  }

  .stats-item {
    grid-column: span 2;
    padding-left: 18px;
  }

  .stats-item:nth-child(4),
  .stats-item:nth-child(5) {
    grid-column: span 3;
  }

  /* the road's stops become a 2px rule beside each figure; it lights up as the car passes */
  .stats-item::before {
    top: 3px;
    bottom: 3px;
    width: 2px;
    height: auto;
    border: 0;
    border-radius: 2px;
    background: var(--line-2);
  }

  .stats-item.is-on::before {
    border: 0;
    background: var(--orange-500);
    box-shadow: 0 0 12px rgba(250, 126, 56, 0.45);
    scale: 1;
  }

  .stats-row--a {
    top: 0;
    translate: 0 -8%;
  }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .stats {
    --road-gap: 28px;
  }

  .stats-row__track {
    -webkit-text-stroke-width: 1px;
  }

  .stats .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 20px;
  }

  .stats-item,
  .stats-item:nth-child(4),
  .stats-item:nth-child(5) {
    grid-column: span 1;
    padding-left: 14px;
  }

  .stats-item:first-child {
    grid-column: 1 / -1;
  }

  .stats-item:first-child .stats-num {
    font-size: calc(var(--stats-num) * 1.4);
  }

  .stats-row--b {
    top: calc(var(--road-h) + var(--road-gap) + var(--stats-num) * 0.64);
  }

  .stats-label {
    margin-top: 12px;
    font-size: 1rem;
  }

  .stats-note {
    font-size: 0.84rem;
  }

  .stats-car {
    width: 46px;
  }
}

@media (max-width: 380px) {
  .stats .stats-grid {
    column-gap: 14px;
  }

  .stats-item,
  .stats-item:nth-child(4),
  .stats-item:nth-child(5) {
    padding-left: 12px;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .stats-row {
    transform: none;
  }

  .stats-road__pin.is-arrived::after {
    animation: none;
  }
}

/* ======================================================================
   DRIVE
   ====================================================================== */
/* Drive with Drroo — cream sheet: benefits, earnings calculator and parallax road decor. */

.drive.section--cream {
  overflow: clip;
  padding-bottom: 0;
  background:
    radial-gradient(56% 42% at 94% 6%, rgba(250, 126, 56, 0.15), transparent 72%),
    radial-gradient(44% 34% at -6% 64%, rgba(255, 200, 87, 0.14), transparent 70%),
    var(--cream-100);
}

/* ---------- Decor (road markings) ---------- */
.drive-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.drive-decor__glow {
  position: absolute;
  top: 22%;
  right: -12%;
  width: min(820px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 126, 56, 0.14), transparent 72%);
}

.drive-mark {
  position: absolute;
  display: block;
}

.drive-mark--lane {
  top: 3%;
  left: 50%;
  width: max(1600px, 118vw);
  height: auto;
  max-width: none;
  translate: -50% 0;
  fill: none;
  stroke: #fff;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 64 52;
  opacity: 0.85;
}

.drive-mark--arrow {
  top: 88px;
  left: max(-72px, calc(50% - 790px));
  width: clamp(150px, 16vw, 240px);
  height: auto;
  fill: #fff;
  opacity: 0.8;
  rotate: -9deg;
}

/* base.css leaves `clip-path: inset(0)` on revealed elements, which would crop these shadows. */
.js .drive-calc-wrap[data-reveal].is-in,
.js .drive-benefit[data-reveal].is-in {
  clip-path: none;
}

/* ---------- Layout ---------- */
.drive-inner {
  position: relative;
  z-index: 1;
}

.drive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.drive-head {
  margin-bottom: clamp(30px, 3.6vw, 46px);
}

.drive-head .lead {
  max-width: 34em;
}

/* core.js gives split gradient words the dark-theme gradient; use the deeper cream variant here. */
.drive .tg-split .split-i {
  background: linear-gradient(100deg, #f0731f 0%, #c9500f 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- Benefits ---------- */
.drive-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.drive-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 18px 16px;
  border: 1px solid rgba(26, 20, 36, 0.07);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.58);
  transition: translate 0.45s var(--ease-out), background-color 0.3s, box-shadow 0.45s var(--ease-out);
}

/* Keep the staggered reveal (base.css) while adding undelayed hover transitions. */
.js .drive-benefit[data-reveal] {
  transition: opacity 0.9s var(--ease-out) calc(var(--d, 0) * 1ms), transform 1s var(--ease-out) calc(var(--d, 0) * 1ms),
    translate 0.45s var(--ease-out), background-color 0.3s, box-shadow 0.45s var(--ease-out);
}

.drive-benefit:hover {
  translate: 0 -3px;
  background: #fff;
  box-shadow: 0 26px 40px -30px rgba(90, 40, 8, 0.45);
}

.drive-benefit__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  background: var(--grad-brand);
  color: #1a0d05;
  box-shadow: 0 12px 22px -12px var(--orange-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.drive-benefit__icon .icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.9;
}

.drive-benefit__title {
  margin-bottom: 5px;
  font-size: 1.06rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.drive-benefit p {
  color: var(--on-cream-2);
  font-size: 0.92rem;
  line-height: 1.52;
}

.drive-steps {
  margin-top: 26px;
  padding: 20px 22px 22px;
  border: 1.5px dashed rgba(201, 80, 15, 0.3);
  border-radius: var(--r-lg);
}

.drive-steps__title {
  margin-bottom: 16px;
  color: var(--orange-700);
  font: 800 var(--fs-xs)/1.2 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.drive-steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.drive-steps__list li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  color: var(--on-cream-2);
  font-size: 0.9rem;
  line-height: 1.45;
}

.drive-steps__list b {
  display: block;
  color: var(--on-cream);
  font-weight: 700;
}

.drive-steps__list li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  right: -10px;
  left: 42px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--orange-500) 0 6px, transparent 6px 11px);
  opacity: 0.55;
}

.drive-steps__n {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--on-cream);
  color: #fff;
  font: 700 0.86rem/1 var(--font-display);
}

.drive-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  color: var(--on-cream-2);
  font-size: 0.95rem;
  line-height: 1.5;
}

.drive-proof strong {
  color: var(--on-cream);
}

.drive-proof__faces {
  display: flex;
  flex: none;
}

.drive-proof__faces i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -11px;
  border: 3px solid var(--cream-100);
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd6bd, #fa7e38);
  color: #1a0d05;
  font: 700 0.72rem/1 var(--font-display);
  font-style: normal;
}

.drive-proof__faces i:first-child {
  margin-left: 0;
}

.drive-proof__faces i:nth-child(2) {
  background: linear-gradient(135deg, #ffe7ad, #ffc857);
}

.drive-proof__faces i:nth-child(3) {
  background: linear-gradient(135deg, #d6d0ff, #8b7cf8);
}

.drive-proof__faces i:nth-child(4) {
  background: linear-gradient(135deg, #b6f3d7, #3ddc97);
}

/* ---------- Calculator column + floating decor ---------- */
.drive-calc-col {
  position: relative;
  padding-top: clamp(96px, 9vw, 124px);
}

.drive-id-layer {
  position: absolute;
  top: 0;
  right: clamp(4px, 2vw, 30px);
  z-index: 0;
  width: clamp(204px, 18vw, 246px);
}

.drive-id {
  position: relative;
  rotate: 7deg;
  animation: drive-float 7s ease-in-out infinite;
}

@keyframes drive-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}

.drive-id__strap {
  position: absolute;
  bottom: calc(100% - 6px);
  left: 50%;
  width: 24px;
  height: 130px;
  margin-left: -12px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent 0 5px, rgba(26, 13, 5, 0.22) 5px 6px, transparent 6px 18px, rgba(26, 13, 5, 0.22) 18px 19px, transparent 19px),
    linear-gradient(180deg, transparent, var(--orange-500) 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
  mask-image: linear-gradient(180deg, transparent, #000 60%);
}

.drive-id__strap::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 34px;
  height: 14px;
  margin-left: -17px;
  border-radius: 5px;
  background: linear-gradient(180deg, #4f4660, #1a1424);
}

.drive-id__card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 36px 60px -30px rgba(90, 40, 8, 0.5), 0 0 0 1px rgba(26, 20, 36, 0.07);
  transition: transform 0.3s var(--ease-in-out), opacity 0.3s;
}

.drive-id.is-swapping .drive-id__card {
  transform: perspective(700px) rotateY(86deg);
  opacity: 0.5;
}

.drive-id__top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 14px;
  background: var(--grad-brand);
  color: #1a0d05;
  font: 800 0.66rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.drive-id__top .drroo-icon {
  width: 24px;
  flex: none;
  --car-body: #1a0d05;
  --car-wheel: #1a0d05;
}

.drive-id__top em {
  margin-left: auto;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(26, 13, 5, 0.12);
  font-style: normal;
}

.drive-id__body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 10px;
}

.drive-id__avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffd6bd, #fa7e38);
  color: #1a0d05;
  font: 700 1rem/1 var(--font-display);
}

.drive-id__who {
  display: grid;
  gap: 3px;
  min-width: 0;
  line-height: 1.2;
}

.drive-id__who b {
  color: var(--on-cream);
  font: 650 1.02rem/1.15 var(--font-display);
}

.drive-id__who span {
  color: var(--on-cream-3);
  font-size: 0.74rem;
}

.drive-id__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 0 14px 12px;
  color: var(--on-cream-2);
  font-size: 0.72rem;
}

.drive-id__meta b {
  color: var(--on-cream);
}

.drive-id__ok {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(61, 220, 151, 0.18);
  color: #0f6e45;
  font-weight: 700;
}

.drive-id__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px dashed rgba(26, 20, 36, 0.16);
  color: var(--on-cream-3);
  font: 600 0.66rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
}

.drive-id__bars {
  width: 64px;
  height: 16px;
  flex: none;
  opacity: 0.75;
  background: repeating-linear-gradient(90deg, #1a1424 0 2px, transparent 2px 4px, #1a1424 4px 5px, transparent 5px 7px, #1a1424 7px 10px, transparent 10px 12px);
}

.drive-calc-wrap {
  position: relative;
  z-index: 1;
}

.drive-pay-layer {
  position: absolute;
  top: clamp(26px, 3vw, 44px);
  left: clamp(-56px, -3vw, -16px);
  z-index: 2;
}

.drive-pay {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: rgba(17, 14, 26, 0.94);
  color: var(--text);
  box-shadow: 0 34px 50px -26px rgba(26, 20, 36, 0.7);
  rotate: -3deg;
  animation: drive-float 6s ease-in-out -2.5s infinite;
}

.drive-pay__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 12px;
  background: var(--mint);
  color: #06301d;
}

.drive-pay__icon .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.6;
}

.drive-pay__text {
  display: grid;
  line-height: 1.3;
  white-space: nowrap;
}

.drive-pay__text b {
  font: 600 0.95rem/1.3 var(--font-display);
}

.drive-pay__text small {
  color: var(--text-3);
  font-size: 0.74rem;
}

/* ---------- Calculator card ---------- */
.drive-calc {
  position: relative;
  display: grid;
  gap: 22px;
  padding: clamp(22px, 2.5vw, 34px);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: 0 60px 100px -56px rgba(90, 40, 8, 0.55), 0 0 0 1px rgba(26, 20, 36, 0.06);
}

.drive-calc__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.drive-calc__kicker {
  margin-bottom: 6px;
  color: var(--orange-700);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.drive-calc__title {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  font-weight: 650;
  letter-spacing: -0.025em;
}

.drive-calc__badge {
  flex: none;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: rgba(61, 220, 151, 0.16);
  color: #0f6e45;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.drive-label {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  color: var(--on-cream);
  font: 700 var(--fs-sm)/1.2 var(--font-body);
}

/* Segmented vehicle picker (native radios, styled labels) */
.drive-seg {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.drive-seg__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 5px;
  border-radius: 20px;
  background: var(--cream-100);
  box-shadow: inset 0 0 0 1px rgba(26, 20, 36, 0.06);
}

.drive-seg__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.drive-seg__opt {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 11px 6px 10px;
  border-radius: 15px;
  color: var(--on-cream-2);
  font: 650 1rem/1.1 var(--font-display);
  text-align: center;
  cursor: pointer;
  transition: color 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.drive-seg__opt .icon {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
  transition: translate 0.4s var(--ease-spring);
}

.drive-seg__opt small {
  color: var(--on-cream-3);
  font: 600 0.7rem/1.1 var(--font-body);
  transition: color 0.3s;
}

.drive-seg__opt:hover {
  color: var(--on-cream);
}

.drive-seg__opt:hover .icon {
  translate: 0 -2px;
}

.drive-seg__input:checked + .drive-seg__opt,
.drive-seg__input:checked + .drive-seg__opt small {
  color: #1a0d05;
}

.drive-seg__input:focus-visible + .drive-seg__opt {
  outline: 2px solid var(--orange-700);
  outline-offset: 2px;
}

.drive-seg__thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  z-index: 0;
  width: calc((100% - 10px) / 3);
  border-radius: 15px;
  background: var(--grad-brand);
  box-shadow: 0 12px 24px -12px var(--orange-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: translate 0.55s var(--ease-spring);
}

.drive-seg__track:has(#drive-v-auto:checked) .drive-seg__thumb {
  translate: 100% 0;
}

.drive-seg__track:has(#drive-v-cab:checked) .drive-seg__thumb {
  translate: 200% 0;
}

/* Range sliders */
.drive-range__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.drive-range__head .drive-label {
  margin: 0;
}

.drive-range__val {
  color: var(--on-cream-2);
  font: 600 0.95rem/1 var(--font-display);
  white-space: nowrap;
}

.drive-range__val b {
  color: var(--on-cream);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.drive-range__input {
  --pct: 0.5;
  --thumb: 28px;
  display: block;
  width: 100%;
  height: 38px;
  margin: 4px 0 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.drive-range__input:focus-visible {
  outline: none;
}

.drive-range__input::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(90deg, var(--orange-400), var(--orange-600)) 0 0 / calc(var(--thumb) / 2 + var(--pct) * (100% - var(--thumb))) 100% no-repeat,
    rgba(26, 20, 36, 0.09);
}

.drive-range__input::-webkit-slider-thumb {
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((10px - var(--thumb)) / 2);
  border: 7px solid var(--orange-500);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 14px -4px rgba(201, 80, 15, 0.65);
  transition: scale 0.25s var(--ease-out), box-shadow 0.25s;
  -webkit-appearance: none;
  appearance: none;
}

.drive-range__input:hover::-webkit-slider-thumb,
.drive-range__input:active::-webkit-slider-thumb {
  scale: 1.1;
}

.drive-range__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--orange-700), 0 6px 14px -4px rgba(201, 80, 15, 0.65);
}

.drive-range__input::-moz-range-track {
  height: 10px;
  border-radius: var(--r-pill);
  background: rgba(26, 20, 36, 0.09);
}

.drive-range__input::-moz-range-progress {
  height: 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--orange-400), var(--orange-600));
}

.drive-range__input::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  border: 7px solid var(--orange-500);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 14px -4px rgba(201, 80, 15, 0.65);
}

.drive-range__input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--orange-700), 0 6px 14px -4px rgba(201, 80, 15, 0.65);
}

.drive-range__ticks {
  position: relative;
  height: 14px;
  margin: 0 14px;
  color: var(--on-cream-3);
  font: 600 0.7rem/1 var(--font-body);
}

.drive-range__ticks span {
  position: absolute;
  top: 0;
  left: calc(var(--t) * 100%);
  translate: -50% 0;
}

/* Result panel */
.drive-result {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  overflow: hidden;
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: radial-gradient(120% 150% at 0% 0%, #2d2640 0%, var(--ink-950) 62%);
  color: var(--text);
  isolation: isolate;
}

.drive-result::before {
  content: "";
  position: absolute;
  right: -30%;
  bottom: -70%;
  z-index: -1;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 126, 56, 0.32), transparent 72%);
}

.drive-result__label {
  color: var(--text-3);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.drive-result__num {
  margin-top: 8px;
  padding-bottom: 0.06em;
  font: 700 clamp(2.5rem, 1.8rem + 2.2vw, 3.6rem)/1 var(--font-display);
  letter-spacing: -0.045em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.drive-result__sub {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 0.95rem;
}

.drive-week {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.drive-week__day {
  display: grid;
  justify-items: center;
  gap: 7px;
}

.drive-week__day b {
  color: var(--text-3);
  font: 700 0.62rem/1 var(--font-body);
}

.drive-week__bar {
  display: block;
  width: 11px;
  height: 74px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--orange-300), var(--orange-600));
  clip-path: inset(calc((1 - var(--h, 0.5)) * 100%) 0 0 0 round 6px);
  transition: clip-path 0.7s var(--ease-spring), background-color 0.3s;
}

.drive-week__day.is-off .drive-week__bar {
  background: rgba(255, 255, 255, 0.16);
}

.drive-week__day.is-off b {
  opacity: 0.55;
}

/* Breakdown */
.drive-break {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: -6px 0 0;
}

.drive-break div {
  padding: 12px 14px;
  border: 1px solid rgba(26, 20, 36, 0.06);
  border-radius: 14px;
  background: var(--cream-50);
}

.drive-break dt {
  color: var(--on-cream-3);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.3;
}

.drive-break dd {
  margin: 3px 0 0;
  color: var(--on-cream);
  font: 650 1.12rem/1.2 var(--font-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.drive-break .drive-break__zero {
  color: #0f6e45;
}

.drive-fine {
  margin-top: -6px;
  color: var(--on-cream-3);
  font-size: 0.78rem;
  line-height: 1.5;
}

.drive-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

.drive-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--on-cream);
  font: 600 1rem/1.2 var(--font-display);
}

.drive-link .icon {
  color: var(--orange-700);
  stroke-width: 2.1;
}

.drive-link span {
  position: relative;
}

.drive-link span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange-600);
  transform: scaleX(0.28);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--ease-out);
}

.drive-link:hover span::after {
  transform: scaleX(1);
}

/* ---------- Street strip with the Drroo scooter ---------- */
.drive-street {
  position: relative;
  z-index: 1;
  height: clamp(250px, 21vw, 300px);
  margin-top: clamp(8px, 2vw, 32px);
  container-type: inline-size;
  pointer-events: none;
}

.drive-road {
  position: absolute;
  inset: 0 0 calc(var(--r-xl) + 16px) 0;
}

/* Its foot hides ~36px behind the road band, so the slower parallax never lifts it off the street. */
.drive-skyline {
  position: absolute;
  right: 0;
  bottom: calc(var(--r-xl) + 16px + 30px);
  left: 0;
  height: clamp(116px, 10vw, 156px);
}

.drive-skyline__svg {
  width: 100%;
  height: 100%;
  max-width: none;
}

.drive-skyline__far {
  fill: #f8e0cb;
}

.drive-skyline__near {
  fill: #f2d2b6;
}

.drive-skyline__palms {
  fill: #ecc6a6;
  stroke: #ecc6a6;
}

.drive-road__band {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 66px;
  border-block: 3px solid var(--cream-300);
  background: var(--cream-200);
}

.drive-road__dash {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 5px;
  margin-top: -2.5px;
  background: repeating-linear-gradient(90deg, #fff 0 46px, transparent 46px 86px);
}

.drive-road__zebra {
  position: absolute;
  bottom: 3px;
  left: 58%;
  width: 150px;
  height: 60px;
  background: repeating-linear-gradient(90deg, #fffaf5 0 16px, transparent 16px 30px);
  transform: skewX(-52deg);
  transform-origin: 50% 100%;
  opacity: 0.9;
}

.drive-road__sign {
  position: absolute;
  bottom: 66px;
  left: 76%;
  display: grid;
  justify-items: center;
}

.drive-road__sign-face {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--orange-500);
  box-shadow: 0 10px 20px -10px rgba(90, 40, 8, 0.6);
}

.drive-road__sign-face .drroo-icon {
  width: 28px;
  --car-body: #fff;
  --car-wheel: #fff;
}

.drive-road__sign-pole {
  width: 5px;
  height: clamp(76px, calc(7.4vw + 14px), 126px);
  border-radius: 3px;
  background: #4f4660;
}

.drive-road__sign-tag {
  position: absolute;
  top: 58px;
  left: 50%;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--on-cream);
  color: #fff;
  font: 800 0.6rem/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.drive-ride {
  position: absolute;
  bottom: 18px;
  left: 0;
  z-index: 1;
  width: clamp(150px, 14vw, 214px);
  translate: calc((var(--p, 0.5) * 1.35 - 0.2) * 100cqw) 0;
}

.drive-scooter {
  --wheel: 0deg;
  --spd: 0;
  position: relative;
}

.drive-scooter__flip {
  position: relative;
  transition: scale 0.55s var(--ease-out);
}

.drive-scooter.is-reverse .drive-scooter__flip {
  scale: -1 1;
}

.drive-scooter__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.drive-scooter__wheel {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  rotate: var(--wheel);
}

.drive-scooter__body {
  animation: drive-idle 0.5s ease-in-out infinite alternate;
}

@keyframes drive-idle {
  to {
    translate: 0 1.4px;
  }
}

.drive-scooter__lines {
  position: absolute;
  top: 34%;
  left: -34%;
  display: grid;
  gap: 13px;
  width: 38%;
  opacity: var(--spd);
}

.drive-scooter__lines i {
  display: block;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--orange-400));
}

.drive-scooter__lines i:nth-child(2) {
  margin-left: 30%;
}

.drive-scooter__lines i:nth-child(3) {
  margin-left: 12%;
}

/* ---------- Responsive ---------- */
/* Small laptops: benefits stack beside the calculator; steps + proof run full width underneath. */
@media (max-width: 1180px) and (min-width: 1021px) {
  .drive-copy {
    display: contents;
  }

  .drive-grid {
    grid-template-areas:
      "head calc"
      "bens calc"
      "steps steps"
      "proof proof";
    row-gap: 0;
  }

  .drive-head {
    grid-area: head;
  }

  .drive-calc-col {
    grid-area: calc;
  }

  .drive-benefits {
    grid-area: bens;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .drive-benefit {
    padding: 14px 16px;
  }

  .drive-steps {
    grid-area: steps;
    margin-top: 48px;
  }

  .drive-proof {
    grid-area: proof;
  }
}

.drive-nowrap {
  white-space: nowrap;
}

@media (max-width: 1020px) {
  .drive-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .drive-calc-col {
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    padding-top: 112px;
  }

  .drive-id-layer {
    top: 18px;
    right: 0;
  }

  /* Keep the lanyard inside the gap above the calculator so it never crosses the lead text. */
  .drive-id__strap {
    height: 54px;
  }

  .drive-pay-layer {
    bottom: auto;
    top: 34px;
    left: 0;
  }

  .drive-copy {
    display: contents;
  }

  .drive-head {
    order: 0;
    margin-bottom: 0;
  }

  .drive-calc-col {
    order: 1;
  }

  .drive-benefits {
    order: 2;
  }

  .drive-steps {
    order: 3;
    margin-top: -12px;
  }

  .drive-proof {
    order: 4;
    margin-top: -12px;
  }

}

@media (max-width: 640px) {
  .drive-benefits {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .drive-benefit {
    padding: 15px 16px 15px 14px;
  }

  .drive-calc-col {
    padding-top: 98px;
  }

  .drive-steps {
    padding: 18px 16px 18px;
  }

  .drive-steps__list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .drive-steps__list li {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }

  .drive-steps__list li:not(:last-child)::after {
    top: 38px;
    right: auto;
    bottom: -12px;
    left: 15px;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--orange-500) 0 5px, transparent 5px 9px);
  }

  .drive-id-layer {
    top: 18px;
    right: 2px;
    width: 160px;
  }

  .drive-id {
    rotate: 6deg;
  }

  .drive-id__top {
    gap: 6px;
    padding: 8px 10px;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
  }

  .drive-id__top .drroo-icon {
    width: 20px;
  }

  .drive-id__top em {
    display: none;
  }

  .drive-id__body {
    padding: 10px 10px 8px;
    gap: 9px;
  }

  .drive-id__avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 0.9rem;
  }

  .drive-id__who b {
    font-size: 0.92rem;
  }

  .drive-id__meta {
    padding: 0 12px 10px;
    font-size: 0.66rem;
  }

  .drive-id__foot {
    display: none;
  }

  .drive-pay-layer {
    top: 4px;
    left: -2px;
  }

  .drive-pay {
    gap: 9px;
    padding: 9px 14px 9px 9px;
    border-radius: 16px;
  }

  .drive-pay__icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .drive-pay__text b {
    font-size: 0.84rem;
  }

  .drive-pay__text small {
    font-size: 0.66rem;
  }

  .drive-calc {
    gap: 20px;
    border-radius: var(--r-lg);
  }

  .drive-calc__badge {
    display: none;
  }

  .drive-seg__opt {
    padding: 10px 4px 9px;
    font-size: 0.95rem;
  }

  .drive-seg__opt small {
    font-size: 0.64rem;
  }

  .drive-result {
    padding: 18px 16px 16px 18px;
    border-radius: 18px;
  }

  .drive-week {
    gap: 4px;
  }

  .drive-week__bar {
    width: 8px;
    height: 60px;
  }

  .drive-break {
    gap: 8px;
  }

  .drive-break div {
    padding: 10px 10px 9px;
    border-radius: 12px;
  }

  .drive-break dt {
    font-size: 0.68rem;
  }

  .drive-break dd {
    font-size: 1rem;
  }

  .drive-mark--arrow {
    top: 40px;
    left: auto;
    right: -40px;
    width: 120px;
    rotate: 14deg;
    opacity: 0.6;
  }

  .drive-road__sign {
    left: 70%;
  }

  .drive-road__zebra {
    left: 40%;
    width: 96px;
  }
}

@media (max-width: 380px) {
  /* Too narrow for chip + ID card side by side: let the ID card peek in from the screen edge. */
  .drive-id-layer {
    right: -34px;
  }

  .drive-result {
    grid-template-columns: 1fr;
  }

  .drive-week {
    justify-content: space-between;
  }

  .drive-week__bar {
    width: 22px;
    height: 44px;
  }

  .drive-break dt {
    font-size: 0.64rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drive-ride {
    translate: 46cqw 0;
  }

  .drive-scooter__lines {
    display: none;
  }
}

/* ======================================================================
   CITIES
   ====================================================================== */
/* Cities — dark sheet: dotted network map with flowing routes + searchable city list and request form. */

.city.section--sheet {
  overflow: clip;
  background: var(--ink-950);
}

.city-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.city-bg__glow {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
}

.city-bg__glow--a {
  top: 2%;
  left: -16%;
  width: min(900px, 95vw);
  background: radial-gradient(closest-side, rgba(139, 124, 248, 0.13), transparent 72%);
}

.city-bg__glow--b {
  right: -12%;
  bottom: 0;
  width: min(840px, 95vw);
  background: radial-gradient(closest-side, rgba(250, 126, 56, 0.12), transparent 72%);
}

.city-inner {
  position: relative;
  z-index: 1;
}

/* ---------- Heading row ---------- */
.city-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px 64px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.city-head {
  margin-bottom: 0;
}

.city-head .lead {
  max-width: 36em;
}

.city-stats {
  display: flex;
  gap: 10px;
}

.city-stats li {
  display: grid;
  gap: 6px;
  min-width: 128px;
  padding: 16px 18px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}

.city-stats b {
  color: var(--text);
  font: 700 2.3rem/1 var(--font-display);
  letter-spacing: -0.04em;
}

.city-stats li:first-child b {
  color: var(--orange-400);
}

.city-stats li:last-child b {
  color: #b3a9ff;
}

.city-stats span {
  color: var(--text-3);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---------- Grid ---------- */
.city-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 2.8vw, 40px);
  align-items: start;
}

/* ---------- Map ---------- */
.city-map {
  position: relative;
}

.city-map__panel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1.08;
  container-type: size;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 55% at 42% 78%, rgba(250, 126, 56, 0.1), transparent 72%),
    linear-gradient(180deg, var(--ink-900), #0d0b15);
  isolation: isolate;
}

.city-map__field {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.075) 1.1px, transparent 1.7px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 92%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 92%);
}

.city-map__glow {
  position: absolute;
  top: 54%;
  left: 18%;
  z-index: -1;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 126, 56, 0.3), rgba(250, 126, 56, 0.08) 55%, transparent 74%);
}

/* Fit the projected map (594 × 648 viewBox) inside whatever shape the panel has. */
.city-map__geo {
  --geo-h: 86cqh;
  position: absolute;
  top: 53%;
  left: 50%;
  width: 78%;
  width: min(92cqw, var(--geo-h) * 0.9167);
  aspect-ratio: 594 / 648;
  translate: -50% -50%;
}

.city-map__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.city-map__dots {
  fill: none;
  stroke: url(#city-dotgrad);
  stroke-width: 3.6;
  stroke-linecap: round;
}

.city-arc {
  fill: none;
  stroke: rgba(250, 126, 56, 0.38);
  stroke-width: 1.5;
}

.city-arc--soon {
  stroke: rgba(160, 148, 255, 0.6);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1.5 5;
  animation: city-flow 2.6s linear infinite;
}

.city-arc__flow {
  fill: none;
  stroke: var(--orange-300);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 4 8;
  animation: city-flow 1.4s linear infinite;
  animation-delay: calc(var(--i, 0) * -0.28s);
}

@keyframes city-flow {
  to {
    stroke-dashoffset: -12;
  }
}

.city-arc__comet {
  fill: none;
  stroke: #fff4ea;
  stroke-width: 4.6;
  stroke-linecap: round;
  stroke-dasharray: 0 200;
  opacity: 0;
  animation: city-comet 4.2s var(--ease-in-out) infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes city-comet {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  52% {
    stroke-dashoffset: -100;
    opacity: 1;
  }
  60%,
  100% {
    stroke-dashoffset: -100;
    opacity: 0;
  }
}

.city-node {
  transition: opacity 0.4s;
}

.city-node__dot,
.city-node__ring,
.city-node__ping,
.city-node__halo {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.city-node__dot {
  fill: var(--orange-400);
  stroke: #0d0b15;
  stroke-width: 1.6;
  transition: scale 0.45s var(--ease-spring), fill 0.3s;
}

.city-node--big .city-node__dot {
  fill: var(--orange-500);
}

.city-node__ping {
  fill: none;
  stroke: var(--orange-400);
  stroke-width: 1.4;
  opacity: 0;
  animation: city-ping 2.8s var(--ease-out) infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes city-ping {
  0% {
    scale: 1;
    opacity: 0.85;
  }
  100% {
    scale: 3.6;
    opacity: 0;
  }
}

.city-node--hq .city-node__halo {
  fill: rgba(250, 126, 56, 0.24);
  animation: city-breathe 3s ease-in-out infinite;
}

@keyframes city-breathe {
  50% {
    scale: 1.25;
    opacity: 0.6;
  }
}

.city-node--hq .city-node__dot {
  fill: var(--orange-500);
  stroke: #fff;
  stroke-width: 2;
}

.city-node__core {
  fill: #fff;
}

.city-node__ring {
  fill: #0d0b15;
  stroke: #a094ff;
  stroke-width: 1.9;
  transition: scale 0.45s var(--ease-spring);
}

.city-node.is-hot .city-node__dot,
.city-node.is-hot .city-node__ring {
  scale: 1.9;
}

.city-node.is-hot .city-node__dot {
  fill: #fff;
}

.city-map.is-filtering .city-node:not(.is-match) {
  opacity: 0.22;
}

.city-map.is-filtering .city-node.is-match .city-node__dot {
  scale: 1.35;
}

/* Labels (HTML so they stay legible at any map size) */
.city-map__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.city-label,
.city-callout {
  position: absolute;
  color: var(--text);
  font: 600 0.78rem/1 var(--font-body);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 0 0 3px #0d0b15, 0 1px 10px rgba(13, 11, 21, 0.95);
  transition: opacity 0.35s;
}

.city-label {
  translate: 9px -50%;
}

.city-label--l {
  translate: calc(-100% - 9px) -50%;
}

.city-label--t {
  translate: -50% calc(-100% - 9px);
}

.city-label--b {
  translate: -50% 9px;
}

.city-label--soon {
  color: var(--text-3);
}

.city-label--hq {
  translate: 14px -50%;
  font-size: 0.92rem;
  font-weight: 700;
}

.city-label small {
  margin-left: 6px;
  padding: 3px 5px 2px;
  border-radius: 5px;
  background: var(--orange-500);
  color: #1a0d05;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow: none;
  vertical-align: 1px;
}

.city-map.is-filtering .city-label.is-dim {
  opacity: 0.25;
}

/* Small-city labels only appear when a search narrows things down. */
.city-label--x {
  visibility: hidden;
  opacity: 0;
}

.city-map.is-filtering .city-label.is-on {
  display: block;
  visibility: visible;
  opacity: 1;
}

.city-callout {
  z-index: 2;
  padding: 7px 10px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgba(22, 18, 32, 0.94);
  text-shadow: none;
  translate: -50% calc(-100% - 14px);
  box-shadow: var(--shadow-md);
}

.city-callout em {
  margin-left: 6px;
  color: #8ff0c4;
  font-style: normal;
}

.city-callout.is-soon em {
  color: #c4bbff;
}

.city-callout[hidden] {
  display: none;
}

.city-map__bar {
  position: absolute;
  top: 18px;
  right: 20px;
  left: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 600;
}

.city-map__live,
.city-map__legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(13, 11, 21, 0.7);
}

.city-map__live {
  color: var(--text);
}

.city-key {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.city-key--live {
  background: var(--orange-500);
}

.city-key--soon {
  margin-left: 4px;
  border: 2px solid #a094ff;
}

/* Floating cards (nearest parallax layer) */
.city-float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: rgba(24, 20, 35, 0.95);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}

.city-float--a {
  top: 21%;
  right: clamp(-28px, -1.6vw, -10px);
}

.city-float--b {
  right: clamp(-28px, -1.6vw, -10px);
  bottom: 9%;
}

.city-float__icon,
.city-float__car {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 12px;
}

.city-float__icon {
  background: rgba(139, 124, 248, 0.18);
  color: #c4bbff;
}

.city-float__icon .icon {
  width: 20px;
  height: 20px;
}

.city-float__car {
  background: var(--grad-brand);
}

.city-float__car .drroo-icon {
  width: 24px;
  --car-body: #1a0d05;
  --car-wheel: #1a0d05;
}

.city-float__text {
  display: grid;
  line-height: 1.3;
  white-space: nowrap;
}

.city-float__text b {
  color: var(--text);
  font: 600 0.92rem/1.3 var(--font-display);
}

.city-float__text small {
  color: var(--text-3);
  font-size: 0.74rem;
}

/* ---------- Finder ---------- */
.city-finder {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow: var(--shadow-md);
}

.city-search__label {
  display: block;
  margin-bottom: 12px;
  color: var(--text);
  font: 600 1.3rem/1.2 var(--font-display);
  letter-spacing: -0.015em;
}

.city-search__box {
  position: relative;
  display: flex;
  align-items: center;
}

.city-search__box > .icon {
  position: absolute;
  left: 19px;
  width: 20px;
  height: 20px;
  color: var(--text-3);
  pointer-events: none;
  transition: color 0.2s;
}

.city-search__box:focus-within > .icon {
  color: var(--orange-400);
}

.city-search__input {
  width: 100%;
  height: 56px;
  padding: 0 54px 0 50px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(11, 9, 18, 0.66);
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  transition: border-color 0.2s, box-shadow 0.25s, background-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.city-search__input::placeholder {
  color: var(--text-3);
  opacity: 1;
}

.city-search__input:placeholder-shown {
  padding-right: 20px;
}

.city-search__input:hover {
  border-color: rgba(255, 255, 255, 0.24);
}

.city-search__input:focus {
  outline: none;
  border-color: var(--orange-500);
  background: rgba(11, 9, 18, 0.9);
  box-shadow: 0 0 0 4px rgba(250, 126, 56, 0.22);
}

.city-search__input::-webkit-search-cancel-button,
.city-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.city-search__clear {
  position: absolute;
  right: 8px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text-2);
  transition: background-color 0.2s, color 0.2s;
}

.city-search__clear:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.city-search__clear[hidden] {
  display: none;
}

.city-search__clear .icon {
  width: 18px;
  height: 18px;
}

.city-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.city-filter {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.03);
}

.city-filter__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.city-filter__opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  color: var(--text-2);
  font: 600 0.86rem/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
  -webkit-tap-highlight-color: transparent;
}

.city-filter__opt:hover {
  color: var(--text);
}

.city-filter__opt span {
  padding: 3px 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.7rem;
  font-weight: 700;
}

.city-filter__input:checked + .city-filter__opt {
  background: var(--text);
  color: var(--ink-950);
}

.city-filter__input:checked + .city-filter__opt span {
  background: rgba(11, 9, 18, 0.1);
}

.city-filter__input:focus-visible + .city-filter__opt {
  outline: 2px solid var(--orange-400);
  outline-offset: 2px;
}

.city-count {
  color: var(--text-3);
  font-size: 0.86rem;
  font-weight: 600;
}

.city-count b {
  color: var(--text);
  font-weight: 700;
}

.city-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.city-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px 6px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: 600 0.9rem/1.2 var(--font-body);
  cursor: default;
  transition: border-color 0.25s, background-color 0.25s, translate 0.35s var(--ease-out);
}

.city-chip:hover {
  translate: 0 -2px;
  border-color: rgba(250, 126, 56, 0.55);
  background: rgba(250, 126, 56, 0.1);
}

.city-chip[hidden] {
  display: none;
}

.city-chip.is-pop {
  animation: city-pop 0.45s var(--ease-spring) both;
}

@keyframes city-pop {
  from {
    opacity: 0;
    scale: 0.85;
  }
}

.city-chip__name mark {
  border-radius: 3px;
  background: rgba(250, 126, 56, 0.28);
  color: var(--orange-200);
}

.city-chip__aka {
  color: var(--text-3);
  font-weight: 500;
}

.city-chip__tag {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(61, 220, 151, 0.12);
  color: #8ff0c4;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.city-chip--hq .city-chip__tag {
  background: var(--orange-500);
  color: #1a0d05;
}

.city-chip--soon {
  border-style: dashed;
  border-color: rgba(160, 148, 255, 0.38);
  color: var(--text-2);
}

.city-chip--soon:hover {
  border-color: rgba(160, 148, 255, 0.7);
  background: rgba(139, 124, 248, 0.1);
}

.city-chip--soon .city-chip__tag {
  background: rgba(139, 124, 248, 0.15);
  color: #c9c2ff;
}

/* "Show all" toggle — phones only */
.city-more {
  justify-self: center;
  margin-top: -4px;
}

.city-more[hidden] {
  display: none;
}

.city-more .icon {
  width: 18px;
  height: 18px;
  transition: rotate 0.35s var(--ease-out);
}

.city-more[aria-expanded="true"] .icon {
  rotate: 180deg;
}

/* Empty state */
.city-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 26px 20px 24px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  text-align: center;
  animation: city-pop 0.5s var(--ease-out) both;
}

.city-empty[hidden] {
  display: none;
}

.city-empty__icon {
  width: 54px;
  margin-bottom: 6px;
  rotate: -8deg;
  opacity: 0.9;
}

.city-empty__icon .drroo-icon {
  --car-body: var(--ink-500);
  --car-wheel: var(--text-3);
}

.city-empty__title {
  color: var(--text);
  font: 600 1.12rem/1.3 var(--font-display);
  overflow-wrap: anywhere;
}

.city-empty__text {
  max-width: 32ch;
  color: var(--text-3);
  font-size: 0.9rem;
}

.city-empty__btn {
  margin-top: 8px;
}

/* Request form — full-width strip under the map + finder */
.city-req {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr);
  align-items: center;
  gap: 20px clamp(24px, 4vw, 56px);
  margin-top: clamp(20px, 2.8vw, 40px);
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 40px);
  overflow: hidden;
  border: 1px solid rgba(250, 126, 56, 0.22);
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 160% at 0% 0%, rgba(250, 126, 56, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  isolation: isolate;
}

.city-req__intro {
  position: relative;
  padding-left: 70px;
}

.city-req__intro::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a0d05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.99-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 14.99 4 10a8 8 0 0 1 16 0'/%3E%3Cpath d='M12 7v6M9 10h6'/%3E%3C/svg%3E") center / 26px no-repeat,
    var(--grad-brand);
  box-shadow: var(--shadow-glow);
}

.city-req__title {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.city-req__intro p {
  margin-top: 6px;
  color: var(--text-3);
  font-size: 0.95rem;
}

.city-req__fields {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto;
  gap: 12px;
  align-items: start;
}

.city-req__submit {
  height: 50px;
  min-height: 50px;
  margin-top: 25px;
}

.city-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 17px;
}

.city-field input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: rgba(11, 9, 18, 0.66);
  color: var(--text);
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.25s;
}

.city-field input::placeholder {
  color: var(--text-3);
  opacity: 0.8;
}

.city-field input:hover {
  border-color: rgba(255, 255, 255, 0.24);
}

.city-field input:focus {
  outline: none;
  border-color: var(--orange-500);
  box-shadow: 0 0 0 4px rgba(250, 126, 56, 0.22);
}

.city-field input[aria-invalid="true"] {
  border-color: var(--rose);
  box-shadow: 0 0 0 4px rgba(255, 93, 115, 0.16);
}

.city-field__err {
  margin-top: 7px;
  color: #ff98a6;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

.city-field__err:empty {
  display: none;
}

.city-req.is-shake .city-req__fields {
  animation: city-shake 0.4s var(--ease-out);
}

@keyframes city-shake {
  20%,
  60% {
    translate: -6px 0;
  }
  40%,
  80% {
    translate: 6px 0;
  }
}

/* ---------- Responsive ---------- */
/* Below wide desktops the finder would tower over the map, so stack them. */
@media (max-width: 1180px) {
  .city-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .city-map__panel {
    aspect-ratio: 1.5 / 1;
  }

  .city-float--a {
    top: 20%;
    right: auto;
    left: 16px;
  }

  .city-float--b {
    right: 16px;
    bottom: 8%;
  }
}

@media (max-width: 1180px) and (min-width: 1021px) {
  .city-stats li {
    min-width: 110px;
  }
}

@media (max-width: 1020px) {
  .city-top {
    grid-template-columns: 1fr;
  }

  .city-stats li {
    flex: 1;
    min-width: 0;
  }

  .city-map__panel {
    aspect-ratio: 1.12 / 1;
  }

  .city-map__geo {
    --geo-h: 84cqh;
  }

  .city-req {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .city-stats {
    gap: 8px;
  }

  .city-stats li {
    padding: 12px 12px 11px;
    border-radius: 14px;
  }

  .city-stats b {
    font-size: 1.75rem;
  }

  .city-stats span {
    font-size: 0.74rem;
  }

  .city-map__panel {
    aspect-ratio: 1 / 1.08;
    border-radius: var(--r-lg);
  }

  .city-map__geo {
    --geo-h: 80cqh;
    top: 55%;
  }

  .city-map__bar {
    top: 12px;
    right: 12px;
    left: 12px;
    font-size: 0.72rem;
  }

  .city-map__live,
  .city-map__legend {
    gap: 6px;
    padding: 5px 9px;
  }

  .city-label:not(.city-label--m) {
    display: none;
  }

  .city-label {
    font-size: 0.7rem;
  }

  .city-label--hq {
    font-size: 0.8rem;
  }

  .city-float {
    gap: 8px;
    padding: 7px 12px 7px 7px;
    border-radius: 14px;
  }

  .city-float__icon,
  .city-float__car {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .city-float__text b {
    font-size: 0.8rem;
  }

  .city-float__text small {
    font-size: 0.66rem;
  }

  .city-float--a {
    display: none;
  }

  .city-float--b {
    right: 10px;
    bottom: 3%;
  }

  .city-finder {
    padding: 18px 16px 20px;
    border-radius: var(--r-lg);
  }

  .city-tools {
    gap: 10px;
  }

  .city-filter {
    width: 100%;
  }

  .city-filter__opt {
    flex: 1;
    justify-content: center;
    padding: 9px 6px;
    font-size: 0.8rem;
  }

  .city-chip {
    padding: 5px 6px 5px 12px;
    font-size: 0.85rem;
  }

  .city-list.is-collapsed {
    max-height: 214px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
    mask-image: linear-gradient(180deg, #000 62%, transparent);
  }

  .city-req {
    padding: 22px 18px;
    border-radius: var(--r-lg);
  }

  .city-req__intro {
    padding-left: 60px;
  }

  .city-req__intro::before {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .city-req__fields {
    grid-template-columns: 1fr;
  }

  .city-req__submit {
    width: 100%;
    margin-top: 4px;
  }
}

@media (max-width: 380px) {
  .city-filter__opt span {
    display: none;
  }

  .city-float--a {
    display: none;
  }
}

/* ======================================================================
   STORIES
   ====================================================================== */
/* Stories — two opposing marquee rows of rider + captain testimonials.
   Default (no JS / reduced motion): each row is a native, snap-scrolling strip.
   .tst.is-live (stories.js): duplicated tracks loop seamlessly via WAAPI, pause on hover/focus, drag to scrub. */
.tst {
  --tst-card-w: 384px;
  --tst-gap: 22px;
  --tst-fade: clamp(28px, 9vw, 200px);
  --tst-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 22 20.4'%3E%3Cpath d='M10 .5l2.35 6.26 6.69.3-5.24 4.18 1.78 6.45L10 14l-5.58 3.69 1.78-6.45L.96 7.06l6.69-.3Z' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  padding-bottom: clamp(72px, 8vw, 124px);
  overflow: clip;
  isolation: isolate;
  background: linear-gradient(180deg, var(--ink-950) 0, var(--ink-900) 360px);
}

/* ---------- decor ---------- */
.tst-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* parallaxed glows fade out before the section edges, so no seams against the neighbours */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent);
}

.tst-glow {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
}

.tst-glow--a {
  top: -6%;
  right: -14%;
  width: min(980px, 110vw);
  background: radial-gradient(closest-side, rgba(250, 126, 56, 0.15), rgba(250, 126, 56, 0.05) 55%, transparent);
}

.tst-glow--b {
  bottom: -18%;
  left: -18%;
  width: min(900px, 110vw);
  background: radial-gradient(closest-side, rgba(139, 124, 248, 0.13), rgba(139, 124, 248, 0.04) 55%, transparent);
}

.tst-bigquote {
  position: absolute;
  top: clamp(10px, 4vw, 70px);
  right: max(-20px, calc(50% - 740px));
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(15rem, 30vw, 30rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  -webkit-text-stroke: 1.5px rgba(250, 126, 56, 0.2);
  user-select: none;
}

/* ---------- head ---------- */
.tst-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px clamp(32px, 6vw, 104px);
  margin-bottom: clamp(44px, 6vw, 88px);
}

.tst-intro {
  display: grid;
  gap: 20px;
  max-width: 720px;
}

.tst-title {
  max-width: 13.5ch;
}

.tst-badges {
  display: grid;
  gap: 12px;
  width: min(100%, 340px);
}

.tst-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px 13px 13px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.tst-badge__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: rgba(250, 126, 56, 0.13);
  color: var(--orange-300);
}

.tst-badge__icon svg {
  width: 22px;
  height: 22px;
}

.tst-badge__icon svg:not(.icon) {
  fill: currentColor;
}

.tst-badge--mint .tst-badge__icon {
  background: rgba(61, 220, 151, 0.12);
  color: #8ff0c4;
}

.tst-badge__body {
  display: grid;
  gap: 3px;
  min-width: 0;
  line-height: 1.25;
}

.tst-badge__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tst-badge__score {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.tst-badge__label {
  color: var(--text-3);
  font-size: 0.86rem;
  font-weight: 500;
}

.tst-nowrap {
  white-space: nowrap;
}

.tst-faces {
  display: flex;
  padding-left: 6px;
}

.tst-faces i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: -7px;
  border: 2px solid #1b1726;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  color: #1a0d05;
  font: normal 700 0.62rem/1 var(--font-display);
}

/* Star meter: one element, partial ratings via the gradient stop, star shape via a repeating mask. */
.tst-stars {
  --r: 5;
  display: inline-block;
  flex: none;
  width: 88px;
  height: 16px;
  background: linear-gradient(90deg, var(--sun) calc(var(--r) * 20%), rgba(255, 255, 255, 0.17) 0);
  -webkit-mask: var(--tst-star) 0 50% / 17.6px 16px repeat-x;
  mask: var(--tst-star) 0 50% / 17.6px 16px repeat-x;
}

.tst-stars--lg {
  width: 100px;
  height: 18px;
  -webkit-mask-size: 20px 18px;
  mask-size: 20px 18px;
}

/* ---------- rows ---------- */
.tst-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}

.tst-row {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 1920px;
  margin-inline: auto;
  padding-block: 14px 18px;
  /* static mode: a native swipe strip */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 126, 56, 0.45) transparent;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--tst-fade)), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--tst-fade)), transparent);
}

.tst-drift {
  width: max-content;
  padding-inline: var(--gutter);
}

.tst-track {
  display: flex;
  width: max-content;
}

.tst-list {
  display: flex;
  gap: var(--tst-gap);
}

.tst-item {
  display: flex;
  flex: none;
  width: var(--tst-card-w);
  scroll-snap-align: start;
}

/* base.css ends every reveal with clip-path: inset(0); keep hover lifts + shadows unclipped */
.js .tst-rows[data-reveal].is-in,
.js .tst-badge[data-reveal].is-in {
  clip-path: none;
}

/* live (animated) mode */
.tst.is-live .tst-row {
  overflow: clip;
  scroll-snap-type: none;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--tst-fade), #000 calc(100% - var(--tst-fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--tst-fade), #000 calc(100% - var(--tst-fade)), transparent);
}

.tst.is-live .tst-row.is-dragging {
  cursor: grabbing;
}

.tst.is-live .tst-drift {
  width: auto;
  padding-inline: 0;
}

.tst.is-live .tst-list {
  padding-right: var(--tst-gap);
}

.tst.is-live .tst-track {
  will-change: transform;
}

/* ---------- card ---------- */
.tst-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  margin: 0;
  padding: clamp(22px, 2vw, 28px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 100% 0%, rgba(250, 126, 56, 0.08), transparent 55%),
    linear-gradient(180deg, #1e192a, #15111e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-md);
  transition: translate 0.6s var(--ease-out), border-color 0.3s, box-shadow 0.6s var(--ease-out);
}

.tst-card--captain {
  background: radial-gradient(120% 90% at 100% 0%, rgba(61, 220, 151, 0.08), transparent 55%),
    linear-gradient(180deg, #1c1b29, #14121e);
}

.tst-card::after {
  content: "\201D";
  content: "\201D" / "";
  position: absolute;
  right: 18px;
  bottom: -0.42em;
  font-family: var(--font-display);
  font-size: 9rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
}

.tst-card:hover {
  translate: 0 -6px;
  border-color: rgba(250, 126, 56, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 34px 60px -34px rgba(0, 0, 0, 0.9),
    0 18px 50px -30px var(--orange-glow);
}

.tst-card--captain:hover {
  border-color: rgba(61, 220, 151, 0.3);
}

.tst-card:focus-visible {
  outline: 2px solid var(--orange-400);
  outline-offset: 3px;
  border-radius: var(--r-lg);
}

.tst-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tst-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.34em 0.8em;
  border: 1px solid rgba(250, 126, 56, 0.26);
  border-radius: var(--r-pill);
  background: var(--orange-soft);
  color: var(--orange-300);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tst-tag--captain {
  border-color: rgba(61, 220, 151, 0.28);
  background: rgba(61, 220, 151, 0.1);
  color: #8ff0c4;
}

.tst-tag .icon {
  width: 1.15em;
  height: 1.15em;
  stroke-width: 2.8;
}

.tst-card__quote {
  flex: 1;
  margin: 0;
}

.tst-card__quote p {
  color: var(--text);
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.07rem);
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: -0.004em;
}

.tst-card__who {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.tst-av {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 8px 20px -10px var(--a2);
  color: #1a0d05;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tst-card__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
  line-height: 1.3;
}

.tst-card__name {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
}

.tst-card__role {
  color: var(--text-3);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

/* ---------- controls ---------- */
.tst-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  margin-top: clamp(26px, 3.5vw, 44px);
}

.tst-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px 0 7px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 600;
  transition: background-color 0.25s, border-color 0.25s;
}

.tst-toggle[hidden] {
  display: none;
}

.tst-toggle:hover {
  border-color: rgba(250, 126, 56, 0.5);
  background: var(--orange-soft);
}

.tst-toggle__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--orange-500);
  color: #1a0d05;
}

.tst-toggle__icon svg {
  grid-area: 1 / 1;
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: opacity 0.25s, scale 0.45s var(--ease-spring);
}

.tst-toggle__play,
.tst.is-paused .tst-toggle__pause {
  opacity: 0;
  scale: 0.4;
}

.tst.is-paused .tst-toggle__play {
  opacity: 1;
  scale: 1;
}

.tst-hint {
  color: var(--text-3);
  font-size: 0.88rem;
  font-weight: 500;
}

.tst-hint__live,
.tst.is-live .tst-hint__static {
  display: none;
}

.tst.is-live .tst-hint__fine {
  display: inline;
}

@media (hover: none) {
  .tst.is-live .tst-hint__fine {
    display: none;
  }

  .tst.is-live .tst-hint__touch {
    display: inline;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .tst {
    --tst-card-w: 340px;
  }

  .tst-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .tst-title {
    max-width: 16ch;
  }

  .tst-bigquote {
    display: none;
  }

  .tst-badges {
    display: flex;
    flex-wrap: wrap;
    width: auto;
  }

  .tst-badge {
    flex: 1 1 230px;
  }
}

@media (max-width: 640px) {
  .tst {
    --tst-card-w: min(300px, 80vw);
    --tst-gap: 14px;
  }

  .tst-badges {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }

  .tst-badge {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
  }

  .tst-badge--mint {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
  }

  .tst-badge__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .tst-badge__icon svg {
    width: 19px;
    height: 19px;
  }

  .tst-badge__score {
    font-size: 1.3rem;
  }

  .tst-badge__row {
    flex-wrap: wrap;
    gap: 6px 8px;
  }

  .tst-stars--lg {
    width: 80px;
    height: 15px;
    -webkit-mask-size: 16px 15px;
    mask-size: 16px 15px;
  }

  .tst-badge__label {
    font-size: 0.8rem;
  }

  .tst-card {
    gap: 14px;
    padding: 20px;
  }

  .tst-card__quote p {
    font-size: 0.98rem;
  }

  .tst-av {
    width: 40px;
    height: 40px;
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tst-card:hover {
    translate: none;
  }
}

/* ======================================================================
   DOWNLOAD
   ====================================================================== */
/* Download — an orange circle grows from the centre of the section as it scrolls in (clip-path driven by --p),
   revealing the CTA, a rising phone, a decorative QR card and a little orange city with Drroo cars driving by.
   --dl-t: 0..1 reveal (full at --dl-pfull ≈ 45% progress), --dl-e: eased. download.js sets --dl-rmax/--dl-pfull. */
.dl {
  --dl-ink: #1a0d05;
  --dl-ink-2: #3d1d0a;
  --dl-cx: 50;
  --dl-cy: 50;
  --dl-t: min(1, calc(var(--p, 1) / var(--dl-pfull, 0.45)));
  --dl-e: calc(var(--dl-t) * (2 - var(--dl-t)));
  --dl-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 22 20.4'%3E%3Cpath d='M10 .5l2.35 6.26 6.69.3-5.24 4.18 1.78 6.45L10 14l-5.58 3.69 1.78-6.45L.96 7.06l6.69-.3Z' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --dl-city-h: clamp(150px, 17vw, 250px);
  padding-block: 0;
  overflow: clip;
  isolation: isolate;
  background: var(--ink-900);
}

/* warm bloom on the dark background, just ahead of the circle */
.dl-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(48% 42% at calc(var(--dl-cx) * 1%) calc(var(--dl-cy) * 1%), rgba(250, 126, 56, 0.34), rgba(250, 126, 56, 0.08) 55%, transparent 75%);
  opacity: min(1, calc(var(--p, 0) * 3.2));
  pointer-events: none;
}

.dl-stage {
  position: relative;
  z-index: 1;
  padding-block: clamp(96px, 10vw, 150px) calc(var(--dl-city-h) + var(--r-xl) + 24px);
  color: var(--dl-ink);
  background: radial-gradient(70% 60% at 18% 22%, rgba(255, 190, 140, 0.55), transparent 70%),
    radial-gradient(60% 70% at 88% 86%, rgba(229, 96, 26, 0.6), transparent 72%), var(--orange-500);
}

.js .dl-stage {
  clip-path: circle(calc(var(--dl-e) * var(--dl-rmax, 150vmax)) at calc(var(--dl-cx) * 1%) calc(var(--dl-cy) * 1%));
}

.js .dl.is-open .dl-stage {
  clip-path: none;
}

/* ---------- background art ---------- */
.dl-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dl-dots {
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(26, 13, 5, 0.16) 1.2px, transparent 1.7px) 0 0 / 26px 26px;
  -webkit-mask-image: radial-gradient(60% 55% at 74% 38%, #000, transparent 78%);
  mask-image: radial-gradient(60% 55% at 74% 38%, #000, transparent 78%);
}

.dl-rings-wrap {
  position: absolute;
  left: 74%;
  top: 46%;
  width: min(940px, 130vw);
  aspect-ratio: 1;
  translate: -50% -50%;
}

.dl-rings {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dl-rings circle {
  fill: none;
  stroke: rgba(26, 13, 5, 0.1);
  stroke-width: 1.5;
}

.dl-rings .dl-rings__dot {
  fill: var(--dl-ink);
  stroke: none;
  opacity: 0.32;
}

.dl-rings__orbit {
  transform-origin: 400px 400px;
  animation: dl-orbit 46s linear infinite;
}

@keyframes dl-orbit {
  to {
    transform: rotate(360deg);
  }
}

/* city silhouettes + road */
.dl-city {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--dl-city-h) + var(--r-xl) + 74px);
}

.dl-sky {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--r-xl) + 66px);
  height: var(--dl-city-h);
}

.dl-sky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  height: 140px;
  background: #6b2405;
}

.dl-sky--far {
  opacity: 0.13;
}

.dl-sky--near {
  height: calc(var(--dl-city-h) * 0.72);
  opacity: 0.22;
}

.dl-sky__svg {
  width: 100%;
  height: 100%;
}

.dl-sky__far,
.dl-sky__near {
  fill: #6b2405;
}

.dl-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--r-xl);
  height: 74px;
  background: linear-gradient(180deg, #dc6420, #cd5817);
  box-shadow: inset 0 1px 0 rgba(255, 220, 190, 0.35), inset 0 3px 0 rgba(150, 50, 0, 0.12);
}

.dl-road::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255, 240, 228, 0.72) 0 26px, transparent 26px 52px);
}

.dl-lane {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  transform: translate3d(var(--park, 30%), 0, 0);
  animation: dl-drive var(--dur, 12s) linear var(--delay, 0s) infinite;
}

.dl-lane--1 {
  --dur: 12s;
  --delay: -2.5s;
  --park: 14%;
  bottom: 7px;
  z-index: 2;
}

.dl-lane--2 {
  --dur: 17s;
  --delay: -9s;
  --park: 58%;
  bottom: 43px;
  z-index: 1;
  animation-direction: reverse;
}

.dl-lane--3 {
  --dur: 12s;
  --delay: -8.6s;
  --park: 84%;
  bottom: 7px;
  z-index: 2;
}

@keyframes dl-drive {
  from {
    transform: translate3d(-90px, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}

.dl-car {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  --car-body: var(--dl-ink);
  --car-wheel: var(--cream-50);
  --car-hub: var(--dl-ink);
  --car-valve: var(--orange-500);
  --wheel-speed: 0.55s;
}

.dl-car .drroo-icon {
  position: relative;
  z-index: 1;
}

.dl-car::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -3px;
  height: 6px;
  border-radius: 50%;
  background: rgba(60, 20, 0, 0.35);
}

.dl-lane--2 .dl-car {
  width: 34px;
  --car-body: #5a2006;
}

.dl-car--back {
  scale: -1 1;
}

/* ---------- layout ---------- */
.dl-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  gap: 48px clamp(32px, 5vw, 80px);
}

.dl-copy {
  display: grid;
  justify-items: start;
  gap: 24px;
  width: 100%;
  container-type: inline-size;
}

.dl-in {
  translate: 0 calc((1 - var(--dl-e)) * var(--k, 40) * 1px);
}

.dl-eyebrow {
  color: var(--dl-ink);
}

.dl-eyebrow::before {
  background: var(--dl-ink);
  box-shadow: 0 0 0 4px rgba(26, 13, 5, 0.12);
}

.dl-title {
  max-width: 11ch;
  color: var(--dl-ink);
  font-size: clamp(2.7rem, 1.3rem + 4.4vw, 5.4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.042em;
}

.dl-title__accent {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.dl-swoosh {
  position: absolute;
  left: -3%;
  top: calc(100% - 0.06em);
  width: 106%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--dl-ink);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - max(0, min(1, (var(--dl-e) - 0.4) / 0.6)));
}

.dl-lead {
  max-width: 44ch;
  color: var(--dl-ink-2);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.6;
}

.dl-get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 22px;
  margin-top: 6px;
}

.dl-stores {
  flex-direction: column;
  gap: 12px;
}

.dl-stores .store-btn {
  min-width: 200px;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 34px -18px rgba(70, 20, 0, 0.75);
}

.dl-stores .store-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 22px 40px -16px rgba(70, 20, 0, 0.85);
}

.dl-stores .store-btn:focus-visible {
  outline-color: var(--dl-ink);
}

.dl-or {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--dl-ink-2);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dl-or::before,
.dl-or::after {
  content: "";
  width: 1.5px;
  height: 26px;
  background: rgba(26, 13, 5, 0.25);
}

.dl-qr {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 312px;
  padding: 12px 20px 12px 12px;
  border-radius: 24px;
  background: var(--cream-50);
  box-shadow: 0 26px 50px -24px rgba(70, 20, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  rotate: -2.5deg;
}

.dl-qr__code {
  position: relative;
  width: 112px;
  height: 112px;
  flex: none;
  padding: 9px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(26, 13, 5, 0.08);
}

.dl-qr__svg {
  width: 100%;
  height: 100%;
  fill: var(--dl-ink);
  color: var(--dl-ink);
}

.dl-qr__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 5px;
  border-radius: 10px;
  background: #fff;
  translate: -50% -50%;
  --car-body: var(--orange-500);
  --car-wheel: var(--dl-ink);
}

.dl-qr__scan {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 8px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--orange-500) 20%, var(--orange-500) 80%, transparent);
  box-shadow: 0 0 12px 2px rgba(250, 126, 56, 0.55);
  animation: dl-scan 2.4s var(--ease-in-out) infinite alternate;
}

@keyframes dl-scan {
  to {
    translate: 0 94px;
  }
}

.dl-qr__text {
  display: grid;
  gap: 4px;
  color: var(--on-cream-2);
  font-size: 0.84rem;
  line-height: 1.4;
}

.dl-qr__text strong {
  color: var(--on-cream);
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dl-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--dl-ink-2);
  font-size: 0.86rem;
  font-weight: 700;
}

.dl-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 13px;
  border: 1px solid rgba(26, 13, 5, 0.16);
  border-radius: var(--r-pill);
  background: rgba(255, 244, 235, 0.16);
}

.dl-trust strong {
  color: var(--dl-ink);
}

.dl-trust__star {
  width: 15px;
  height: 15px;
  fill: var(--dl-ink);
}

/* narrow copy column (e.g. 1024px laptops): buttons side by side, QR card on its own line */
@container (max-width: 590px) {
  .dl-or {
    display: none;
  }

  .dl-stores {
    flex-direction: row;
  }
}

/* ---------- phone ---------- */
.dl-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
}

.dl-phone-wrap {
  position: relative;
  z-index: 1;
  width: clamp(250px, 22vw, 306px);
  container-type: inline-size;
}

.dl-phone {
  position: relative;
  aspect-ratio: 300 / 618;
  padding: 2.8cqw;
  border-radius: 15.5cqw;
  background: linear-gradient(150deg, #2d2639, #0d0a14 42%, #1b1526);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 0.9cqw #07060c, 0 60px 90px -42px rgba(70, 20, 0, 0.85),
    0 26px 44px -26px rgba(26, 13, 5, 0.6);
  rotate: calc((1 - var(--dl-e)) * -8deg);
}

.dl-phone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 12.8cqw;
  background: #f3ebe1;
}

.dl-phone__screen::before {
  content: "9:41";
  position: absolute;
  top: 4.7cqw;
  left: 9.5cqw;
  z-index: 3;
  color: var(--on-cream);
  font-family: var(--font-display);
  font-size: 4.3cqw;
  font-weight: 700;
  line-height: 1;
}

.dl-phone__screen::after {
  content: "";
  position: absolute;
  top: 5cqw;
  right: 9cqw;
  z-index: 3;
  width: 6.6cqw;
  height: 3.3cqw;
  border-radius: 1cqw;
  background: linear-gradient(90deg, var(--on-cream) 72%, transparent 72%);
  box-shadow: 0 0 0 0.5cqw var(--on-cream), 0 0 0 0.9cqw #f3ebe1;
}

.dl-phone__island {
  position: absolute;
  top: 5cqw;
  left: 50%;
  width: 27cqw;
  height: 7.8cqw;
  border-radius: 99px;
  background: #07060c;
  translate: -50% 0;
}

.dl-map {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 64%;
}

.dl-mcar--a {
  transform: translate(60px, 90px);
  animation: dl-mcar-a 9s linear infinite;
}

.dl-mcar--b {
  transform: translate(203px, 150px) rotate(90deg);
  animation: dl-mcar-b 12s linear -5s infinite;
}

.dl-mcar--c {
  transform: translate(250px, 202px) rotate(180deg);
  animation: dl-mcar-c 10s linear -2s infinite;
}

@keyframes dl-mcar-a {
  from {
    transform: translate(-20px, 90px);
  }
  to {
    transform: translate(320px, 90px);
  }
}

@keyframes dl-mcar-b {
  from {
    transform: translate(203px, -20px) rotate(90deg);
  }
  to {
    transform: translate(203px, 420px) rotate(90deg);
  }
}

@keyframes dl-mcar-c {
  from {
    transform: translate(320px, 202px) rotate(180deg);
  }
  to {
    transform: translate(-20px, 202px) rotate(180deg);
  }
}

.dl-map__pulse {
  opacity: 0.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: dl-pulse 2.4s var(--ease-out) infinite;
}

@keyframes dl-pulse {
  from {
    opacity: 0.5;
    transform: scale(0.35);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}

.dl-ui-top {
  position: absolute;
  top: 14.5cqw;
  left: 5cqw;
  right: 5cqw;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2.6cqw;
}

.dl-ui-btn {
  display: grid;
  place-items: center;
  width: 11cqw;
  height: 11cqw;
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2cqw 5cqw -2cqw rgba(26, 20, 36, 0.4);
  color: var(--on-cream);
}

.dl-ui-btn svg {
  width: 5.4cqw;
  height: 5.4cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.dl-ui-btn--me {
  background: linear-gradient(135deg, #ffd2b3, #fa7e38);
  color: var(--dl-ink);
  font-family: var(--font-display);
  font-size: 3.5cqw;
  font-weight: 700;
}

.dl-ui-loc {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 1.8cqw;
  min-width: 0;
  height: 9cqw;
  padding: 0 3cqw;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2cqw 5cqw -2cqw rgba(26, 20, 36, 0.35);
  color: var(--on-cream);
  font-size: 3.4cqw;
  font-weight: 700;
  white-space: nowrap;
}

.dl-ui-loc i {
  width: 2.2cqw;
  height: 2.2cqw;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0.9cqw rgba(61, 220, 151, 0.25);
}

.dl-sheet {
  position: absolute;
  inset: 49% 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3.2cqw;
  padding: 2.8cqw 5.2cqw 6cqw;
  border-radius: 7cqw 7cqw 0 0;
  background: #fff;
  box-shadow: 0 -6cqw 12cqw -8cqw rgba(26, 20, 36, 0.4);
  color: var(--on-cream);
}

.dl-sheet__handle {
  align-self: center;
  width: 11cqw;
  height: 1.3cqw;
  border-radius: 9px;
  background: #e5deeb;
}

.dl-sheet__hi {
  margin-top: 0.4cqw;
  color: var(--on-cream-3);
  font-size: 3.6cqw;
  font-weight: 600;
  line-height: 1.2;
}

.dl-search {
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  height: 13cqw;
  padding: 0 2.2cqw 0 4cqw;
  border-radius: 4.4cqw;
  background: #f4f0f7;
  font-family: var(--font-display);
  font-size: 5.2cqw;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dl-search svg {
  width: 5.6cqw;
  height: 5.6cqw;
  flex: none;
  fill: none;
  stroke: var(--on-cream);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.dl-search span {
  flex: 1;
}

.dl-search em {
  padding: 1.8cqw 2.8cqw;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 1cqw 3cqw -1.5cqw rgba(26, 20, 36, 0.4);
  font-family: var(--font-body);
  font-size: 3.1cqw;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.dl-svcs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.2cqw;
}

.dl-svc {
  display: grid;
  justify-items: center;
  gap: 1.4cqw;
  color: var(--on-cream-2);
  font-size: 3.2cqw;
  font-weight: 700;
  line-height: 1;
}

.dl-svc i {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1.12;
  border-radius: 4cqw;
  background: #fff1e6;
}

.dl-svc svg {
  width: 8.2cqw;
  height: 8.2cqw;
  fill: none;
  stroke: var(--orange-700);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dl-svc:first-child i {
  background: var(--orange-500);
  box-shadow: 0 2cqw 4cqw -2cqw rgba(236, 102, 32, 0.9);
}

.dl-svc:first-child svg {
  stroke: var(--dl-ink);
}

.dl-recent {
  display: grid;
}

.dl-recent__row {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 2.2cqw 0;
  border-top: 1px solid #f1ecf4;
}

.dl-recent__row i {
  display: grid;
  place-items: center;
  width: 8.6cqw;
  height: 8.6cqw;
  flex: none;
  border-radius: 50%;
  background: #f4f0f7;
}

.dl-recent__row svg {
  width: 4.6cqw;
  height: 4.6cqw;
  fill: none;
  stroke: var(--on-cream-2);
  stroke-width: 2;
  stroke-linejoin: round;
}

.dl-recent__row b,
.dl-recent__row small {
  display: block;
  line-height: 1.25;
}

.dl-recent__row b {
  font-family: var(--font-display);
  font-size: 3.6cqw;
  font-weight: 700;
}

.dl-recent__row small {
  color: var(--on-cream-3);
  font-size: 3.1cqw;
  font-weight: 600;
}

/* ---------- floating chips ---------- */
.dl-float {
  position: absolute;
  z-index: 2;
}

.dl-float--a {
  top: 25%;
  left: max(-4%, calc(50% - 300px));
}

.dl-float--b {
  top: 47%;
  right: max(-6%, calc(50% - 320px));
}

.dl-float--c {
  bottom: 9%;
  left: max(0%, calc(50% - 270px));
}

.dl-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  border-radius: 18px;
  background: rgba(255, 250, 245, 0.95);
  box-shadow: 0 24px 46px -22px rgba(70, 20, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.85);
  color: var(--on-cream);
  white-space: nowrap;
  animation: dl-bob 5.5s var(--ease-in-out) infinite alternate;
}

.dl-float--b .dl-chip {
  animation-delay: -2s;
}

.dl-float--c .dl-chip {
  animation-delay: -3.6s;
}

@keyframes dl-bob {
  from {
    translate: 0 -7px;
  }
  to {
    translate: 0 7px;
  }
}

.dl-chip__av,
.dl-chip__ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
}

.dl-chip__av {
  background: linear-gradient(135deg, #d6cfff, #8b7cf8);
  color: var(--dl-ink);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
}

.dl-chip__ic {
  background: var(--mint);
}

.dl-chip__ic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #05301e;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dl-chip__txt {
  display: grid;
  line-height: 1.25;
}

.dl-chip__txt b {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 700;
}

.dl-chip__txt small {
  color: var(--on-cream-3);
  font-size: 0.76rem;
  font-weight: 600;
}

.dl-chip--rate {
  display: grid;
  justify-items: start;
  gap: 5px;
  padding: 14px 18px;
}

.dl-chip--rate b {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.dl-chip__stars {
  width: 90px;
  height: 16px;
  background: var(--orange-500);
  -webkit-mask: var(--dl-star) 0 50% / 18px 16px repeat-x;
  mask: var(--dl-star) 0 50% / 18px 16px repeat-x;
}

.dl-chip--rate small {
  color: var(--on-cream-3);
  font-size: 0.76rem;
  font-weight: 600;
}

.dl.is-idle :is(.dl-lane, .drroo-icon__wheel, .dl-mcar, .dl-map__pulse, .dl-qr__scan, .dl-chip, .dl-rings__orbit) {
  animation-play-state: paused;
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .dl {
    --dl-cy: 30;
  }

  .dl-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .dl-copy {
    justify-items: center;
    text-align: center;
  }

  .dl-title {
    max-width: 12ch;
  }

  .dl-get,
  .dl-trust {
    justify-content: center;
  }

  .dl-visual {
    width: 100%;
    min-height: 0;
    padding-block: 12px 24px;
  }

  .dl-phone-wrap {
    width: clamp(232px, 36vw, 290px);
  }

  .dl-rings-wrap {
    left: 50%;
    top: 68%;
  }

  .dl-dots {
    -webkit-mask-image: radial-gradient(70% 45% at 50% 70%, #000, transparent 78%);
    mask-image: radial-gradient(70% 45% at 50% 70%, #000, transparent 78%);
  }

  .dl-float--a {
    left: max(0%, calc(50% - 300px));
  }

  .dl-float--b {
    right: max(0%, calc(50% - 310px));
  }
}

@media (max-width: 640px) {
  .dl {
    --dl-cy: 26;
    --dl-city-h: 130px;
  }

  .dl-stage {
    padding-top: 88px;
  }

  .dl-copy {
    gap: 20px;
  }

  .dl-or,
  .dl-qr-wrap {
    display: none;
  }

  .dl-stores {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .dl-stores .store-btn {
    min-width: 0;
  }

  .dl-trust {
    font-size: 0.8rem;
  }

  .dl-phone-wrap {
    width: min(64vw, 248px);
  }

  .dl-visual {
    padding-bottom: 8px;
  }

  .dl-float--a {
    top: 30%;
    left: 0;
  }

  .dl-float--b {
    top: auto;
    bottom: 9%;
    right: 0;
  }

  .dl-float--c {
    display: none;
  }

  .dl-chip {
    gap: 8px;
    padding: 8px 12px 8px 8px;
    border-radius: 14px;
  }

  .dl-chip__av,
  .dl-chip__ic {
    width: 30px;
    height: 30px;
  }

  .dl-chip__ic svg {
    width: 15px;
    height: 15px;
  }

  .dl-chip__txt b {
    font-size: 0.8rem;
  }

  .dl-chip__txt small {
    font-size: 0.68rem;
  }

  .dl-car {
    width: 40px;
  }

  .dl-lane--2 .dl-car {
    width: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dl {
    --dl-t: 1;
  }

  .js .dl-stage {
    clip-path: none;
  }

  .dl-qr__scan {
    display: none;
  }
}

/* ======================================================================
   FAQ
   ====================================================================== */
/* FAQ — cream sheet. Desktop: heading + sticky "Still need help?" card on the left, accordion on the right.
   <details>/<summary> stay native; faq.js animates the height and toggles .is-closing so the icon morphs in sync. */
.faq {
  overflow: clip;
  isolation: isolate;
}

.faq-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.faq-blob {
  position: absolute;
  top: -12%;
  right: -16%;
  width: min(920px, 110vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 126, 56, 0.16), rgba(250, 126, 56, 0.05) 58%, transparent);
}

/* ---------- layout ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "head list"
    "help list";
  align-items: start;
  gap: 36px clamp(40px, 6vw, 96px);
}

.faq-head {
  grid-area: head;
  display: grid;
  justify-items: start;
  gap: 20px;
}

.faq-title {
  max-width: 11ch;
}

/* the split-heading gradient in base.css is tuned for dark sections; use the deeper cream variant here */
.faq .text-gradient,
.faq .tg-split .split-i {
  background: linear-gradient(100deg, #e0611a 0%, #b4440b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.faq-list {
  grid-area: list;
  display: grid;
  gap: 12px;
}

/* ---------- accordion ---------- */
.faq-item {
  --faq-pad: clamp(18px, 2vw, 26px);
  --faq-num: 26px;
  border: 1px solid rgba(26, 20, 36, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: background-color 0.45s var(--ease-out), border-color 0.45s, box-shadow 0.45s var(--ease-out);
}

.js .faq-item[data-reveal] {
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out), background-color 0.45s var(--ease-out),
    border-color 0.45s, box-shadow 0.45s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms), calc(var(--d, 0) * 1ms), 0s, 0s, 0s;
}

/* base.css ends every reveal with clip-path: inset(0) — that would clip these cards' shadows to a square box */
.js .faq-item[data-reveal].is-in,
.js .faq-help[data-reveal].is-in {
  clip-path: none;
}

.faq-item:not([open]):hover,
.faq-item.is-closing:hover {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(26, 20, 36, 0.12);
}

.faq-item[open]:not(.is-closing) {
  border-color: rgba(250, 126, 56, 0.34);
  background: #fff;
  box-shadow: 0 30px 60px -38px rgba(80, 40, 10, 0.45), 0 0 0 4px rgba(250, 126, 56, 0.06);
}

.faq-item.is-animating {
  overflow: hidden;
}

.faq-q {
  display: grid;
  grid-template-columns: var(--faq-num) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: var(--faq-pad);
  border-radius: 21px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q::marker {
  content: "";
}

.faq-q:focus-visible {
  outline: 2px solid var(--orange-600);
  outline-offset: -3px;
}

.faq-q__num {
  color: var(--orange-700);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.faq-q__text {
  color: var(--on-cream);
  font-family: var(--font-display);
  font-size: clamp(1.04rem, 0.97rem + 0.32vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  transition: color 0.25s;
}

.faq-q:hover .faq-q__text {
  color: var(--orange-800);
}

.faq-q__icon {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1.5px solid rgba(26, 20, 36, 0.14);
  border-radius: 50%;
  transition: background-color 0.4s var(--ease-out), border-color 0.4s, rotate 0.6s var(--ease-out);
}

.faq-q:hover .faq-q__icon {
  border-color: rgba(201, 80, 15, 0.45);
}

.faq-q__icon::before,
.faq-q__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 2px;
  background: var(--on-cream);
  transition: transform 0.55s var(--ease-out), background-color 0.3s;
}

.faq-q__icon::after {
  transform: rotate(90deg);
}

.faq-item[open]:not(.is-closing) .faq-q__icon {
  border-color: var(--orange-500);
  background: var(--orange-500);
  rotate: 180deg;
}

.faq-item[open]:not(.is-closing) .faq-q__icon::before,
.faq-item[open]:not(.is-closing) .faq-q__icon::after {
  background: #1a0d05;
}

.faq-item[open]:not(.is-closing) .faq-q__icon::after {
  transform: rotate(0deg);
}

.faq-a {
  padding: 0 calc(var(--faq-pad) + 56px) var(--faq-pad) calc(var(--faq-pad) + var(--faq-num) + 16px);
}

.faq-a__inner {
  display: grid;
  gap: 14px;
  color: var(--on-cream-2);
  font-size: 1rem;
  line-height: 1.7;
}

.faq-a__inner strong {
  color: var(--on-cream);
  font-weight: 700;
}

.faq-link {
  color: var(--orange-800);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(201, 80, 15, 0.35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.faq-link:hover {
  color: var(--orange-700);
  text-decoration-color: currentColor;
}

.faq-nope {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.faq-nope li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 6px;
  border: 1px solid rgba(255, 93, 115, 0.24);
  border-radius: var(--r-pill);
  background: rgba(255, 93, 115, 0.08);
  color: #8a1c31;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
}

.faq-nope li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: #e8475e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* ---------- "Still need help?" card ---------- */
.faq-help {
  grid-area: help;
  position: sticky;
  top: calc(var(--header-h) + 28px);
  display: grid;
  justify-items: start;
  gap: 16px;
  padding: clamp(26px, 3vw, 36px);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #1f1a2b, var(--ink-900));
  box-shadow: 0 44px 80px -42px rgba(60, 25, 5, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text);
  color-scheme: dark;
}

.faq-help__glow {
  position: absolute;
  top: -40%;
  right: -30%;
  z-index: -1;
  width: 120%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 126, 56, 0.28), rgba(250, 126, 56, 0.06) 60%, transparent);
}

.faq-help__car {
  position: absolute;
  top: clamp(24px, 2.8vw, 34px);
  right: clamp(24px, 2.8vw, 34px);
  width: 58px;
  --car-body: var(--orange-500);
  --car-wheel: #fff;
  --car-hub: var(--ink-900);
  --car-valve: var(--orange-500);
  --wheel-speed: 1.6s;
  animation: faq-idle 1.4s var(--ease-in-out) infinite alternate;
}

@keyframes faq-idle {
  to {
    translate: 0 -2px;
  }
}

.faq-help__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #8ff0c4;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.faq-help__title {
  color: var(--text);
}

.faq-help__text {
  max-width: 34ch;
  color: var(--text-2);
}

.faq-help__list {
  display: grid;
  gap: 10px;
  width: 100%;
}

.faq-contact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.25s, background-color 0.25s, translate 0.4s var(--ease-out);
}

.faq-contact:hover {
  translate: 0 -2px;
  border-color: rgba(250, 126, 56, 0.45);
  background: var(--orange-soft);
}

.faq-contact__ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  background: var(--orange-soft);
  color: var(--orange-300);
}

.faq-contact__txt {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.faq-contact__txt small {
  color: var(--text-3);
  font-size: 0.8rem;
  font-weight: 600;
}

.faq-contact__txt strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.faq-help__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.faq-help .btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.05);
  --btn-fg: var(--text);
  --btn-border: var(--line-2);
}

.faq-help .btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.09);
  --btn-border: rgba(255, 255, 255, 0.28);
}

.faq-help__sos {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.88rem;
  line-height: 1.5;
}

.faq-help__sos .icon {
  margin-top: 1px;
  color: var(--rose);
}

.faq-help__sos strong,
.faq-help__sos a {
  color: var(--text);
  font-weight: 700;
}

.faq-help__sos a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .faq-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "head"
      "list"
      "help";
    gap: 32px;
  }

  .faq-title {
    max-width: 14ch;
  }

  .faq-help {
    position: relative;
    top: auto;
    margin-top: 12px;
  }
}

@media (max-width: 640px) {
  .faq-item {
    --faq-pad: 18px;
    --faq-num: 22px;
    border-radius: 18px;
  }

  .faq-q {
    gap: 12px;
    border-radius: 17px;
  }

  .faq-q__icon {
    width: 34px;
    height: 34px;
  }

  .faq-q__icon::before,
  .faq-q__icon::after {
    width: 12px;
    margin-left: -6px;
  }

  .faq-a {
    padding: 0 var(--faq-pad) var(--faq-pad);
  }

  .faq-a__inner {
    font-size: 0.97rem;
  }

  .faq-help {
    border-radius: var(--r-lg);
  }

  .faq-help__car {
    width: 50px;
  }

  .faq-help__actions .btn {
    flex: 1 1 auto;
  }
}