/* ==========================================================================
   3rd-i marketing site
   The whole site is a city atlas: quiet streets, one live route, clear stops.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

:root {
  --sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --void: #080a0f;
  --void-rgb: 8, 10, 15;
  --panel: #11141b;
  --panel-rgb: 17, 20, 27;
  --panel-2: #161a22;
  --text: #f4f5f7;
  --dim: #979eab;
  --soft: #6e7685;
  --line: rgba(255, 255, 255, 0.09);
  --line-hi: rgba(255, 255, 255, 0.16);
  --street: rgba(132, 150, 177, 0.09);
  --street-major: rgba(132, 150, 177, 0.15);
  --lot: rgba(132, 150, 177, 0.045);
  --lot-line: rgba(132, 150, 177, 0.08);
  --lot-hi: rgba(132, 150, 177, 0.08);
  --park: rgba(92, 193, 246, 0.05);
  --park-line: rgba(92, 193, 246, 0.08);
  --glass: rgba(13, 16, 22, 0.76);
  --glass-solid: #0e1117;
  --sky: #5cc1f6;
  --royal: #4979ef;
  --magenta: #f31a91;
  --alarm: #ef3b3b;
  --grad: linear-gradient(105deg, var(--sky), var(--royal) 52%, var(--magenta));
  /* The app's own CTA: light blue falling to deep blue, straight down. */
  --grad-cta: linear-gradient(180deg, #55b3ff, #1b74f0);
  --acc-sky: #5cc1f6;
  --acc-royal: #8e9bff;
  --acc-magenta: #ff4fae;
  --row: rgba(92, 193, 246, 0.08);
  --row-line: rgba(92, 193, 246, 0.14);
  --route-shadow: 0 0 18px rgba(73, 121, 239, 0.3);
  --lift: 0 24px 70px rgba(0, 0, 0, 0.24);
  --wrap: 1180px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --pill: 999px;
  color-scheme: dark;
}

html[data-theme="light"] {
  --void: #f5f6f8;
  --void-rgb: 245, 246, 248;
  --panel: #ffffff;
  --panel-rgb: 255, 255, 255;
  --panel-2: #eceff3;
  --text: #11141a;
  --dim: #5f6774;
  --soft: #8a929e;
  --line: rgba(18, 26, 40, 0.1);
  --line-hi: rgba(18, 26, 40, 0.18);
  --street: rgba(58, 74, 98, 0.09);
  --street-major: rgba(58, 74, 98, 0.16);
  --lot: rgba(58, 74, 98, 0.045);
  --lot-line: rgba(58, 74, 98, 0.09);
  --lot-hi: rgba(58, 74, 98, 0.08);
  --park: rgba(73, 121, 239, 0.06);
  --park-line: rgba(73, 121, 239, 0.1);
  --glass: rgba(248, 249, 251, 0.78);
  --glass-solid: #f8f9fb;
  --acc-sky: #1e8bfe;
  --acc-royal: #5a48e6;
  --acc-magenta: #d9309b;
  --row: rgba(30, 139, 254, 0.06);
  --row-line: rgba(30, 139, 254, 0.14);
  --route-shadow: 0 0 12px rgba(73, 121, 239, 0.18);
  --lift: 0 24px 70px rgba(26, 36, 54, 0.1);
  color-scheme: light;
}

html { scroll-behavior: smooth; }
html,
body { margin: 0; min-width: 320px; overflow-x: hidden; }
body {
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 0%, rgba(73, 121, 239, 0.07), transparent 30rem),
    var(--void);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Light mode wears the store screens' pastel wash: sky, lilac and pink
   bleeding in from the edges of a near-white page. */
html[data-theme="light"] body {
  background:
    radial-gradient(58rem 40rem at 10% -4%, rgba(30, 139, 254, 0.09), transparent 62%),
    radial-gradient(52rem 38rem at 102% 20%, rgba(90, 72, 230, 0.07), transparent 62%),
    radial-gradient(48rem 42rem at -4% 86%, rgba(217, 48, 155, 0.06), transparent 62%),
    var(--void);
}

img,
svg { display: block; max-width: 100%; }
a { color: inherit; }
button,
input,
select,
textarea { font: inherit; }
button { color: inherit; }
p,
h1,
h2,
h3,
ul { margin-top: 0; }

.wrap { width: min(calc(100% - 44px), var(--wrap)); margin-inline: auto; }
.skip {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--text);
  color: var(--void);
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- the city atlas and the live route -------------------------- */

.field { display: none !important; }
.road {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  width: 100%;
  pointer-events: none;
  overflow: hidden;
}
.road svg { width: 100%; overflow: visible; }
.road-above { z-index: 2; }
.city-lot {
  fill: var(--lot);
  stroke: var(--lot-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.city-lot-hi { fill: var(--lot-hi); }
.city-park {
  fill: var(--park);
  stroke: var(--park-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* Lit windows on the parcels: C01's city seen from above at night. The noon
   survey barely shows them, which is correct for daylight. */
.city-win { fill: rgba(235, 242, 252, 0.3); }
.city-win-warm { fill: rgba(255, 196, 128, 0.26); }
html[data-theme="light"] .city-win { fill: rgba(58, 74, 98, 0.08); }
html[data-theme="light"] .city-win-warm { fill: rgba(58, 74, 98, 0.06); }
.route-bed,
.route-live {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.route-bed { stroke: var(--line-hi); stroke-width: 3; }
.route-live {
  stroke: url("#routeGradient");
  stroke-width: 3;
  filter: drop-shadow(var(--route-shadow));
}
/* The soft head that glows at the drawing edge while the line is filling in. */
.route-tip {
  fill: #ffffff;
  filter: drop-shadow(0 0 7px rgba(92, 193, 246, 0.9)) drop-shadow(0 0 14px rgba(73, 121, 239, 0.55));
  transition: opacity 500ms ease;
}
html[data-theme="light"] .route-tip {
  fill: var(--royal);
  filter: drop-shadow(0 0 7px rgba(73, 121, 239, 0.55));
}
/* The underline is the SAME line as the road, same weight and gradient, so
   where the road turns across a heading and back there is no step in weight:
   it reads as one continuous ribbon, not a thin road feeding a fat underline. */
.route-ink {
  fill: none;
  stroke: url("#routeGradientInk");
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(var(--route-shadow));
  transition: stroke-dashoffset 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.route-node-outer {
  fill: var(--void);
  stroke: var(--line-hi);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.route-node-inner {
  fill: var(--void);
  stroke: var(--soft);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: fill 300ms ease, stroke 300ms ease;
}
.route-node.is-passed .route-node-inner {
  fill: var(--node-color, var(--royal));
  stroke: var(--text);
}

header,
main,
footer { position: relative; z-index: 1; }

/* ---------- navigation -------------------------------------------------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 72px;
  background: rgba(var(--void-rgb), 0.76);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.hdr-in {
  height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}
.hdr-logo { display: block; width: 72px; }
.hdr-logo img { width: 72px; height: auto; }
.hdr-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.6vw, 38px);
}
.hdr-nav a,
.foot-nav a {
  color: var(--dim);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 180ms ease;
}
.hdr-nav a:hover,
.hdr-nav a[aria-current="page"],
.foot-nav a:hover { color: var(--text); }
.hdr-end { display: flex; align-items: center; gap: 10px; }
.nav-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  padding: 9px;
  background: transparent;
}
.nav-btn svg { width: 24px; height: 24px; }
.theme-toggle {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  color: var(--dim);
  background: rgba(var(--panel-rgb), 0.54);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  cursor: pointer;
}
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
}
.t-dark { display: none; }
html[data-theme="light"] .t-light { display: none; }
html[data-theme="light"] .t-dark { display: inline; }

/* ---------- type and common controls ----------------------------------- */

h1,
h2,
h3 {
  margin-bottom: 0;
  font-weight: 600;
  text-wrap: balance;
}
h1 {
  font-size: clamp(50px, 7vw, 98px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}
h2 {
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.03;
  letter-spacing: -0.043em;
}
h3 {
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.eyebrow,
.ret-dist,
.press-lead,
.who,
.fork-who,
.pair-tag,
.tstamp,
.key {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow,
.ret-dist,
.press-lead { color: var(--dim); }
.eyebrow--brand,
.who,
.route-label {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede {
  color: var(--dim);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.48;
  letter-spacing: -0.018em;
}
.body { color: var(--dim); font-size: 17px; letter-spacing: -0.012em; }
.note,
.proof {
  color: var(--soft);
  font-size: 13px;
  line-height: 1.55;
}
.btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  color: var(--text);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.btn:hover { transform: translateY(-2px); }
/* The tri-gradient pill from the concept lanes. Adam picked it explicitly;
   the app-blue vertical gradient (--grad-cta) stays only where the site is
   depicting the app's own UI (the Go Live sheet, the entry pin). */
.btn-primary {
  color: #fff;
  background: var(--grad);
  box-shadow: 0 10px 30px rgba(73, 121, 239, 0.28);
}
/* Two-tone headings, straight off the App Store screens: black plus one
   phrase in an accent, alternating sky, violet, magenta down the page. */
.hl-sky { color: var(--acc-sky); }
.hl-royal { color: var(--acc-royal); }
.hl-magenta { color: var(--acc-magenta); }

/* The app's option rows (the Go Live sheet): soft tinted rounded rows with
   an icon chip, the last one the full CTA gradient. */
.app-sheet {
  display: grid;
  gap: 11px;
  max-width: 460px;
}
.app-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 10px 16px;
  border-radius: 18px;
  background: var(--row);
  border: 1px solid var(--row-line);
}
.app-row .chip {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(30, 139, 254, 0.14);
  color: var(--acc-sky);
}
.app-row .chip svg { width: 22px; height: 22px; }
.app-row .chip--alert {
  background: rgba(239, 59, 59, 0.14);
  color: var(--alarm);
}
.app-row b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.app-row span { display: block; color: var(--dim); font-size: 13px; margin-top: 2px; }
.app-row--cta {
  background: var(--grad-cta);
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(27, 116, 240, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.app-row--cta b,
.app-row--cta span { color: #fff; }
.app-row--cta span { color: rgba(255, 255, 255, 0.8); }
.app-row--cta .chip {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.sheet-cap {
  color: var(--soft);
  font-size: 13px;
  margin: 14px 0 0;
}

/* Lock Screen widget chips, from the store's Faster Access screen. */
.widgets {
  display: flex;
  align-items: center;
  gap: 12px;
}
.widget {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 12, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}
html[data-theme="light"] .widget {
  background: rgba(17, 20, 26, 0.82);
  border-color: rgba(17, 20, 26, 0.2);
}
.widget svg { width: 24px; height: 24px; }
.widget b {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.widget--stack {
  display: grid;
  place-items: center;
  gap: 1px;
  grid-auto-flow: row;
}
.widget--stack svg { width: 14px; height: 14px; }
.widget--stack b { font-size: 9.5px; }

/* The Emergency Entry Pin plate, from the store's responder screen. */
.entry-mini {
  position: relative;
  margin: 16px 0 14px;
  border-radius: 14px;
  overflow: hidden;
  height: 132px;
  background:
    linear-gradient(rgba(120, 134, 156, 0.14) 2px, transparent 2px) 0 38px / 100% 46px,
    linear-gradient(90deg, rgba(120, 134, 156, 0.14) 2px, transparent 2px) 34px 0 / 58px 100%,
    var(--panel-2);
  border: 1px solid var(--line);
}
.entry-pin {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--grad-cta);
  border: 3px solid #fff;
  color: #fff;
  box-shadow: 0 10px 24px rgba(27, 116, 240, 0.4);
}
.entry-pin svg { width: 22px; height: 22px; }
.entry-tag {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: var(--pill);
  background: var(--glass-solid);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.entry-addr {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  color: var(--dim);
}
.entry-addr .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--acc-sky);
  align-self: center;
}

/* Real phones from the client's own site, breaking up long text runs. */
.phone-plate {
  display: grid;
  place-items: center;
  padding: clamp(18px, 2.4vw, 30px);
  border-radius: var(--r);
  border: 1px solid var(--row-line);
  background: var(--row);
}
.phone-plate img {
  width: 100%;
  max-width: 262px;
  height: auto;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.28));
}
.versus.versus--media,
.nudge-grid.nudge-grid--media,
.fork.fork--media { grid-template-columns: 0.82fr 1.09fr 1.09fr; }
.quiet-map {
  position: relative;
  margin: 18px 0 0;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
}
.quiet-map img {
  display: block;
  width: 100%;
  height: 218px;
  object-fit: cover;
}
.quiet-map figcaption {
  position: absolute;
  left: 16px;
  bottom: 13px;
  padding: 6px 13px;
  border-radius: var(--pill);
  background: rgba(10, 13, 19, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cfd6e2;
  font-size: 12px;
}

.btn-ghost {
  background: rgba(var(--panel-rgb), 0.72);
  border-color: var(--line-hi);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { border-color: rgba(92, 193, 246, 0.5); }
.btn-sm { min-height: 36px; padding-inline: 16px; font-size: 13px; }
.btn-store { min-height: 50px; padding-inline: 17px; }
.btn-store .apple { width: 19px; height: 24px; fill: currentColor; }
.store-txt { display: grid; gap: 1px; text-align: left; }
.store-txt small { font-size: 9px; font-weight: 500; line-height: 1; }
.store-txt span { font-size: 16px; line-height: 1; letter-spacing: -0.02em; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.cta-row--c { justify-content: center; }
.live,
.pip {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 4px rgba(243, 26, 145, 0.12);
}

/* ---------- home hero --------------------------------------------------- */

.hero {
  min-height: calc(100svh - 72px);
  padding: clamp(64px, 8vw, 116px) 0 clamp(88px, 10vw, 142px);
}
.hero-atlas {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.75fr);
  align-items: center;
  gap: clamp(48px, 7vw, 100px);
}
.hero-copy { position: relative; z-index: 3; text-align: left; }
.hero-copy .eyebrow { margin-bottom: 24px; }
.hero-copy h1 { max-width: 10.5ch; }
.hero-copy .lede { max-width: 39rem; margin: 28px 0 0; }
.hero-copy .proof { margin: 18px 0 0; display: flex; align-items: center; gap: 10px; }
.trip-window {
  position: relative;
  min-height: 660px;
  display: grid;
  place-items: center;
}
.trip-window::before {
  content: "";
  position: absolute;
  inset: 6% 0;
  border: 1px solid var(--line);
  border-radius: 30px;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.trip-window::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(73, 121, 239, 0.17), transparent 67%);
  filter: blur(10px);
}

/* The sonar rings from C12 double as the circle's orbit paths from 05:
   returns radiating from the phone, with the people who watch riding them. */
.sonar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1060px;
  height: 1060px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}
.sonar circle {
  fill: none;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.sonar .s1 { stroke: rgba(92, 193, 246, 0.45); }
.sonar .s2 { stroke: url("#orbitGrad"); opacity: 0.62; }
.sonar .s3 { stroke: rgba(73, 121, 239, 0.34); }
.sonar .s4 { stroke: url("#orbitGrad"); opacity: 0.28; }
.sonar .ping {
  stroke: rgba(92, 193, 246, 0.5);
  transform-origin: center;
  animation: ping 5.6s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
@keyframes ping {
  0% { transform: scale(0.36); opacity: 0.9; }
  75% { transform: scale(1.04); opacity: 0; }
  100% { transform: scale(1.04); opacity: 0; }
}
html[data-theme="light"] .sonar .s1 { stroke: rgba(30, 139, 254, 0.3); }
html[data-theme="light"] .sonar .s3 { stroke: rgba(73, 121, 239, 0.22); }
html[data-theme="light"] .sonar .ping { stroke: rgba(30, 139, 254, 0.4); }

/* Initials discs riding the rings, with their nudges beside them (05). */
.orb {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 9px;
}
.orb .disc-s {
  width: 42px;
  height: 42px;
  background: var(--glass-solid);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35), 0 0 0 1.5px rgba(92, 193, 246, 0.4);
}
.orb--b .disc-s { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35), 0 0 0 1.5px rgba(243, 26, 145, 0.38); }
.orb-quote {
  padding: 8px 13px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--line-hi);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
}
.orb-quote small {
  display: block;
  color: var(--soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Both discs sit ON the r=322 orbit: dx matches the chord at their height,
   in the gaps the trip chips leave free. */
.orb--a { left: calc(50% - 343px); top: 49%; }
.orb--b { right: calc(50% - 310px); top: 33%; flex-direction: row-reverse; }

/* The C01 survey legend under the hero. */
.hero-legend {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin: clamp(26px, 4vw, 54px) 0 0;
  color: var(--soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-legend span { display: inline-flex; align-items: center; gap: 8px; }
.hero-legend i { display: inline-block; }
.lg-route { width: 18px; height: 2px; background: var(--sky); border-radius: 2px; }
.lg-you { width: 8px; height: 8px; border-radius: 50%; background: var(--royal); }
.lg-home { width: 8px; height: 8px; border-radius: 2px; background: var(--magenta); }
.lg-right { margin-left: auto; }
.device-clean {
  position: relative;
  z-index: 3;
  width: min(52vw, 270px);
  filter: drop-shadow(0 34px 50px rgba(0, 0, 0, 0.42));
}
.device-clean img { width: 100%; height: auto; }
.shot-light { display: none; }
html[data-theme="light"] .shot-dark { display: none; }
html[data-theme="light"] .shot-light { display: block; }
.trip-status,
.map-address,
.squad-float {
  position: absolute;
  z-index: 5;
  border: 1px solid var(--line-hi);
  background: var(--glass);
  box-shadow: var(--lift);
  backdrop-filter: blur(16px);
}
.trip-status {
  top: 13%;
  left: 1%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border-radius: var(--pill);
  font-size: 13px;
  font-weight: 600;
}
.map-address {
  right: -1%;
  bottom: 17%;
  width: 190px;
  padding: 15px 16px;
  border-radius: var(--r);
}
.map-address small,
.squad-float small {
  display: block;
  margin-bottom: 4px;
  color: var(--dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.map-address b { font-size: 14px; }
.squad-float {
  left: -4%;
  bottom: 28%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px 10px 10px;
  border-radius: var(--pill);
}
.squad-stack { display: flex; }
.squad-stack .disc-s { margin-left: -7px; }
.squad-stack .disc-s:first-child { margin-left: 0; }
.hero-street-key {
  position: absolute;
  right: 1%;
  top: 28%;
  z-index: 5;
  color: var(--dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* hide the superseded hero mechanisms if an older cached page reaches this CSS */
.city-svg,
.city-haze,
.city-veil,
.rings,
.orbit,
.stage-wrap,
.legend,
.origin-plate { display: none !important; }

/* ---------- inner heroes and section rhythm ---------------------------- */

.page-hero {
  min-height: 76svh;
  display: grid;
  align-items: center;
  padding: clamp(82px, 11vw, 150px) 0;
}
.page-hero .wrap { position: relative; }
.page-hero h1 { max-width: 12ch; }
.page-hero .lede { max-width: 43rem; margin: 28px 0 0; }
.page-hero .cta-row { justify-content: flex-start; }

.ret {
  position: relative;
  padding: clamp(100px, 12vw, 176px) 0;
}
.ret::before {
  content: "";
  position: absolute;
  inset: clamp(24px, 4vw, 56px) max(12px, calc((100vw - var(--wrap)) / 2 - 34px));
  z-index: -1;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(var(--void-rgb), 0.52);
  backdrop-filter: blur(3px);
}
.ret.route-passed::before { border-color: rgba(73, 121, 239, 0.18); }
.ret-head { max-width: 820px; margin-bottom: clamp(44px, 6vw, 76px); }
.ret-head .ret-mark {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 20px;
  border: 4px solid var(--void);
  border-radius: 50%;
  background: var(--soft);
  box-shadow: 0 0 0 1px var(--line-hi);
  transition: background 280ms ease, box-shadow 280ms ease;
}
.ret-head .ret-mark svg { display: none; }
.route-passed .ret-mark {
  background: var(--royal);
  box-shadow: 0 0 0 1px var(--sky), 0 0 22px rgba(73, 121, 239, 0.34);
}
.ret-dist { margin-bottom: 16px; }
.route-passed .ret-dist { color: var(--text); }
.ret-head h2 { max-width: 13ch; }
.ret-head .lede { max-width: 43rem; margin: 24px 0 0; }
.head { max-width: 760px; }
.head--c { margin-inline: auto; text-align: center; }
.head .lede { margin: 22px 0 0; }

/* ---------- shared surfaces -------------------------------------------- */

.card,
.vs-card,
.composer,
.returns,
.dcard,
.fork-card,
.plan,
.uni-card,
.shot-plate,
.pair,
.stop,
.seen-col,
.form {
  border: 1px solid var(--line);
  background: rgba(var(--panel-rgb), 0.9);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
}
.card,
.vs-card,
.composer,
.returns,
.dcard,
.fork-card,
.plan,
.uni-card,
.shot-plate,
.seen-col,
.form { border-radius: var(--r); }
.card,
.vs-card,
.composer,
.returns,
.dcard,
.fork-card,
.plan,
.uni-card,
.seen-col { padding: clamp(24px, 3vw, 38px); }
.route-passed .card,
.route-passed .vs-card,
.route-passed .composer,
.route-passed .returns,
.route-passed .dcard,
.route-passed .fork-card,
.route-passed .plan,
.route-passed .uni-card,
.route-passed .seen-col {
  border-color: var(--line-hi);
}
.card p,
.vs-card p,
.dcard p,
.fork-card p,
.plan p,
.uni-card p,
.stop p,
.pair p,
.seen-col p { color: var(--dim); }
.cols,
.watch,
.versus,
.nudge-grid,
.dispatch,
.fork,
.seen,
.split,
.uni-grid,
.plans,
.stops {
  display: grid;
  gap: clamp(16px, 2.2vw, 28px);
}
.cols,
.watch,
.versus,
.nudge-grid,
.fork,
.seen,
.split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dispatch { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- circle and privacy ----------------------------------------- */

.arc {
  position: relative;
  height: 190px;
  margin: 0 0 30px;
}
.arc-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.arc-line path { stroke: var(--line-hi) !important; stroke-dasharray: 3 8; }
.watcher {
  position: absolute;
  display: grid;
  justify-items: center;
  transform: translate(-50%, -50%);
  font-size: 12px;
}
.watcher > b { margin-top: 8px; font-size: 12px; }
.watcher > span:last-child { color: var(--soft); font-size: 10px; }
.ring,
.disc,
.disc-s {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  background: var(--glass-solid);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}
.ring { width: 44px; height: 44px; }
.disc { width: 44px; height: 44px; }
.disc-s { width: 38px; height: 38px; }
.ring::after,
.disc::after,
.disc-s::after { content: attr(data-i); }
.ring::before,
.disc::before,
.disc-s::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: var(--grad);
}
.disc-s--off { opacity: 0.42; }
.vs-card--flat { background: rgba(var(--panel-rgb), 0.54); }
.vs-kind,
.fork-who,
.composer-head { display: flex; align-items: center; gap: 9px; color: var(--dim); font-size: 12px; }
.vs-card h3,
.dcard h3,
.fork-card h3 { margin: 14px 0 12px; }
.vs-card > p:not(.vs-kind),
.dcard > p:not(.who),
.fork-card > p:not(.fork-who):not(.fork-price) {
  font-size: 15px;
  line-height: 1.6;
}
.vs-facts,
.fork-card ul,
.seen-col ul,
.plan ul {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.vs-facts li,
.fork-card li,
.seen-col li,
.plan li {
  position: relative;
  padding-left: 20px;
  color: var(--dim);
  font-size: 14px;
  line-height: 1.45;
}
.vs-facts li::before,
.fork-card li::before,
.seen-col li::before,
.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 9px;
  height: 1px;
  background: var(--royal);
}
.versus-note {
  margin: 18px 0 0;
  padding: 15px 18px;
  border-left: 2px solid var(--royal);
  background: rgba(var(--panel-rgb), 0.5);
  color: var(--dim);
  font-size: 14px;
}
.versus-note strong { color: var(--text); }

.card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 12px;
}
.card-hd b { color: var(--text); }
.rail { margin-top: 4px; }
.rail-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 16px 0 16px 18px;
  border-bottom: 1px solid var(--line);
}
.rail-item:last-child { border-bottom: 0; }
.rail-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 23px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--soft);
}
.rail-item--now::before { background: var(--sky); box-shadow: 0 0 0 4px rgba(92, 193, 246, 0.12); }
.rail-item--mag::before { background: var(--magenta); }
.rail-item h3 { font-size: 14px; letter-spacing: -0.01em; }
.rail-item p { margin: 3px 0 0; font-size: 12px; line-height: 1.45; }
.tstamp { color: var(--soft); font-size: 9px; white-space: nowrap; }
.people { display: grid; gap: 14px; margin-top: 18px; }
.person { display: flex; align-items: center; gap: 12px; }
.person-txt { display: grid; font-size: 13px; }
.person-txt > span { color: var(--soft); font-size: 11px; }
.watching { display: flex; align-items: center; gap: 6px; }
.watching i { width: 5px; height: 5px; border-radius: 50%; background: var(--sky); }
.nudge-note {
  display: flex;
  gap: 12px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 12px;
}
.seen { margin-top: 28px; }
.seen-col { box-shadow: none; }
.seen-col--no { background: rgba(var(--panel-rgb), 0.55); }
.seen-col h3 { margin-bottom: 18px; }

/* ---------- nudge, dispatch, proof, fork ------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.chip {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  color: var(--dim);
  background: var(--panel-2);
  font-size: 13px;
  font-weight: 500;
}
.chip--send { color: #fff; border-color: transparent; background: var(--grad); }
.returns { display: grid; align-content: center; gap: 10px; }
.rline {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.rline:last-child { border-bottom: 0; }
.rline > span { color: var(--soft); font-size: 11px; }
.mk { width: 24px; height: 24px; }
.mk .m1 { stroke: var(--magenta); fill: none; }
.mk .m2 { stroke: var(--royal); fill: none; }
.mk .mc { fill: var(--sky); }
.ret > .wrap > .note { margin: 22px 0 0; }
.dcard--alarm { border-color: rgba(239, 59, 59, 0.28); }
.dcard--alarm .who { color: var(--alarm); background: none; -webkit-text-fill-color: initial; }
.press { text-align: left; }
.press-lead { margin-bottom: 18px; }
.press-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.press-row img {
  width: 124px;
  height: 58px;
  object-fit: contain;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
}
.videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}
.vid {
  overflow: hidden;
  padding: 0;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  cursor: pointer;
}
.vid-shot { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--panel-2); }
.vid-shot img { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; transition: opacity 180ms ease, transform 300ms ease; }
.vid:hover .vid-shot img { opacity: 1; transform: scale(1.02); }
.vid-play {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 10px 30px rgba(73, 121, 239, 0.3);
}
.vid-play svg { width: 17px; fill: #fff; }
.vid-meta { display: grid; gap: 3px; padding: 15px 17px 17px; }
.vid-meta b { font-size: 13px; }
.vid-meta span { color: var(--soft); font-size: 11px; }
.vid-frame { aspect-ratio: 16 / 9; }
.vid-frame iframe { width: 100%; height: 100%; border: 0; }
.fork-card { display: flex; flex-direction: column; }
.fork-card--ent { background: linear-gradient(145deg, rgba(73, 121, 239, 0.1), rgba(var(--panel-rgb), 0.92) 48%); }
.fork-card .cta-row { margin-top: auto; padding-top: 26px; }
.fork-price { margin: 20px 0 0; font-size: 13px; }

/* ---------- product page ----------------------------------------------- */

.trip-line { display: none; }
.stops { grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: stop; }
.stop {
  position: relative;
  min-height: 240px;
  padding: 28px;
  border-radius: var(--r);
}
.stop::before {
  counter-increment: stop;
  content: "0" counter(stop);
  position: absolute;
  right: 24px;
  top: 20px;
  color: var(--line-hi);
  font-size: 46px;
  font-weight: 600;
  letter-spacing: -0.06em;
}
.stop .tstamp { display: block; margin-bottom: 56px; }
.stop h3 { max-width: 12ch; margin-bottom: 12px; }
.stop p { margin-bottom: 0; font-size: 14px; }
.pairs { display: grid; gap: 14px; }
.pair {
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--r);
}
.pair-you,
.pair-them { padding: clamp(22px, 3vw, 34px); }
.pair-them { background: rgba(73, 121, 239, 0.055); }
.pair-tag { display: block; margin-bottom: 18px; color: var(--soft); }
.pair h3 { margin-bottom: 10px; }
.pair p { margin-bottom: 0; font-size: 14px; }
.pair-link { position: relative; display: grid; place-items: center; }
.pair-link::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  width: 1px;
  background: var(--line);
}
.pair-ring {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  border: 4px solid var(--panel);
  border-radius: 50%;
  background: var(--royal);
  box-shadow: 0 0 0 1px var(--sky);
}
.pair--alarm .pair-ring { background: var(--alarm); box-shadow: 0 0 0 1px rgba(239, 59, 59, 0.65); }
.split { align-items: center; }
.shot-plate { display: grid; place-items: center; padding: clamp(26px, 4vw, 48px); overflow: hidden; }
.shot-plate img { width: min(100%, 310px); max-height: 680px; object-fit: contain; filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.22)); }
.cols { gap: 0; }
.cols > div { padding: 22px 0; border-bottom: 1px solid var(--line); }
.cols > div:last-child { border-bottom: 0; }
.cols h3 { margin-bottom: 8px; }
.cols p { margin: 0; color: var(--dim); }
.plan-group + .plan-group { margin-top: 56px; }
.plan-group-hd {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.plan-group-hd p { margin: 0; color: var(--dim); }
.plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan { position: relative; min-height: 420px; }
.plan--mid {
  transform: translateY(-8px);
  border-color: rgba(73, 121, 239, 0.44);
  background: linear-gradient(155deg, rgba(73, 121, 239, 0.11), rgba(var(--panel-rgb), 0.96) 42%);
}
.plan-badge {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 18px;
  padding: 6px 9px;
  border-radius: 6px;
  color: #fff;
  background: var(--grad);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.plan-badge--quiet { color: var(--dim); background: var(--panel-2); }
.plan .price { margin: 24px 0 0; color: var(--text); font-size: 40px; font-weight: 600; letter-spacing: -0.05em; }
.plan .per { font-size: 12px; }

/* ---------- enterprise -------------------------------------------------- */

.uni-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uni-card { min-height: 270px; }
.uni-card .mk { margin-bottom: 46px; }
.uni-card h3 { margin-bottom: 12px; }
.uni-card p { margin-bottom: 0; font-size: 14px; }
.tag-ph {
  display: inline-flex;
  margin-right: 6px;
  padding: 3px 7px;
  border: 1px solid var(--line-hi);
  border-radius: 5px;
  color: var(--dim);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.form {
  max-width: 720px;
  display: grid;
  gap: 18px;
  padding: clamp(24px, 4vw, 42px);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .field { display: grid !important; gap: 7px; }
.form label { font-size: 13px; font-weight: 600; }
.form input,
.form select,
.form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--text);
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 16px;
}
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus,
.form select:focus,
.form textarea:focus { outline: 2px solid var(--royal); outline-offset: 2px; }
.form .btn { justify-self: start; }

/* ---------- close and footer ------------------------------------------- */

.close {
  min-height: 74svh;
  display: grid;
  align-items: center;
  padding: clamp(110px, 14vw, 190px) 0;
  overflow: hidden;
}
.close-stage,
.close-scrim,
.circle-row { display: none; }
.close .wrap { text-align: left; }
.close h2 { max-width: 13ch; }
.close .lede { max-width: 42rem; margin: 26px 0 0; }
.close .cta-row { justify-content: flex-start; }
.foot {
  padding: 56px 0 34px;
  border-top: 1px solid var(--line);
  background: rgba(var(--void-rgb), 0.9);
}
.foot-in { display: flex; align-items: flex-start; justify-content: space-between; gap: 34px; }
.foot-brand img { width: 72px; }
.foot-brand p { max-width: 260px; margin: 14px 0 0; color: var(--dim); font-size: 13px; }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px 24px; }
.foot-legal { margin: 38px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--soft); font-size: 11px; }

/* ---------- reveal ------------------------------------------------------ */

.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1), transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rv.in { opacity: 1; transform: none; }
.d1 { transition-delay: 70ms; }
.d2 { transition-delay: 140ms; }
.d3 { transition-delay: 210ms; }

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 980px) {
  .hdr-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 72px;
    display: grid;
    justify-items: start;
    gap: 0;
    padding: 14px 22px 24px;
    background: var(--glass-solid);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--lift);
  }
  .hdr-nav[hidden] { display: none; }
  .hdr-nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav-btn { display: block; justify-self: end; }
  .hdr-in { grid-template-columns: auto 1fr auto; gap: 14px; }
  .hdr-end .theme-toggle { display: none; }
  .hero-atlas { grid-template-columns: 1fr; }
  .hero-copy h1 { max-width: 11ch; }
  .trip-window { width: min(100%, 600px); margin-inline: auto; min-height: 600px; }
  .uni-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .wrap { width: min(calc(100% - 36px), var(--wrap)); }
  .hdr,
  .hdr-in { height: 64px; }
  .hdr-nav { top: 64px; }
  .hdr-end .btn { min-height: 34px; padding-inline: 13px; }
  h1 { font-size: clamp(45px, 14.5vw, 66px); }
  h2 { font-size: clamp(34px, 10.5vw, 48px); }
  .on-wide { display: none; }
  /* The whole hero is one screen: the phone fills the flexible top space and
     the headline is pinned to the bottom, so the copy lands at the same place
     on any handset height instead of being pushed below the fold. */
  .hero { min-height: auto; padding: 0; }
  .hero-atlas {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 64px);
    gap: 0;
    padding-bottom: 30px;
  }
  .trip-window {
    order: -1;
    flex: 1 1 auto;
    min-height: 240px;
    width: 100%;
    margin-inline: auto;
  }
  .hero-copy { flex: 0 0 auto; }
  .hero-copy .eyebrow { margin-bottom: 14px; }
  .hero-copy .lede { font-size: 17px; margin-top: 18px; }
  .hero-copy .cta-row { margin-top: 20px; }
  .trip-window::before { inset: 3% -18px; }
  /* The phone scales to the height it is given, so it never overruns the
     screen on a short handset or float alone on a tall one. */
  .device-clean { width: min(52vw, 27svh); }
  .sonar { width: min(118vw, 560px); height: min(118vw, 560px); }
  /* The orbit discs and the loose corner chips become collisions in a narrow
     column, so the handset hero keeps just the live badge and destination. */
  .orb,
  .hero-street-key,
  .squad-float { display: none; }
  .hero-legend { display: none; }
  .trip-status { top: 8%; left: 2%; }
  .map-address { right: 2%; bottom: 12%; width: 168px; }
  .page-hero { min-height: auto; padding: 92px 0 110px; }
  .page-hero .lede { font-size: 18px; }
  .ret { padding: 100px 0; }
  .ret::before { inset: 22px 8px; }
  .ret-head { margin-bottom: 40px; }
  .ret-head .lede { font-size: 18px; }
  .cols,
  .watch,
  .versus,
  .nudge-grid,
  .dispatch,
  .fork,
  .seen,
  .split,
  .plans,
  .uni-grid,
  .stops,
  .versus.versus--media,
  .nudge-grid.nudge-grid--media,
  .fork.fork--media { grid-template-columns: 1fr; }
  .arc { height: 150px; margin-inline: -12px; }
  .watcher { transform: translate(-50%, -50%) scale(0.82); }
  .pair { grid-template-columns: 1fr; }
  .pair-link { height: 44px; }
  .pair-link::before { inset: 0 50%; height: 100%; }
  .plan--mid { transform: none; }
  .plan { min-height: auto; }
  .videos { grid-template-columns: 1fr; gap: 14px; }
  /* The lead video keeps the full card; the news segments compress into
     rows so three videos stop costing three screens of scrolling. */
  .vid:nth-child(n + 2):not(.is-playing) {
    display: grid;
    grid-template-columns: 136px 1fr;
    align-items: stretch;
  }
  .vid:nth-child(n + 2):not(.is-playing) .vid-shot {
    height: 100%;
    min-height: 86px;
    aspect-ratio: auto;
  }
  .vid:nth-child(n + 2):not(.is-playing) .vid-play {
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    box-shadow: none;
  }
  .vid:nth-child(n + 2):not(.is-playing) .vid-play svg { width: 13px; }
  .vid:nth-child(n + 2):not(.is-playing) .vid-meta {
    align-self: center;
    padding: 12px 14px;
  }
  .form-row { grid-template-columns: 1fr; }
  .close { min-height: auto; padding: 120px 0; }
  .foot-in { display: grid; }
  .foot-nav { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .hdr-logo,
  .hdr-logo img { width: 65px; }
  .theme-toggle { display: none; }
  .cta-row { align-items: stretch; }
  .cta-row .btn { flex: 1 1 auto; }
  .hero .cta-row .btn { flex-basis: 100%; }
  .trip-status { font-size: 11px; }
  .map-address { bottom: 10%; }
  .arc { height: 130px; }
  .watcher > b { font-size: 10px; }
  .watcher > span:last-child { display: none; }
  .ring { width: 36px; height: 36px; }
  .rline { grid-template-columns: 22px 1fr; }
  .rline > span { grid-column: 2; }
  .press-row img { width: 96px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .route-live { stroke-dashoffset: 0 !important; }
  .route-ink { stroke-dashoffset: 0 !important; }
  .route-tip { display: none; }
  .sonar .ping { display: none; }
}