/* Flotrack landing page.
   Layout: full-bleed hero, then a 1200px column where the product is shown as live dashboard renders. */

/* White, photo-led, blue action colour */
:root {
  color-scheme: light;
  --bg: #ffffff; --bg-2: #f4f4f4; --surface: #ffffff; --surface-2: #f4f5f6;
  --ink: #171a20; --ink-2: #5c5e62; --ink-3: #8b8e94; --line: #e2e3e6;
  --accent: #3e6ae1; --accent-ink: #ffffff; --hi: #3e6ae1; --route: #2f63e6;
  --ok: #12a05c; --warn: #d98a00; --bad: #e0352b; --map-halo: #eef0f3;
  --r-sm: 4px; --r: 10px; --r-lg: 14px; --r-btn: 4px;
  --f-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --h-weight: 500; --h-track: -.015em;
  --h1: clamp(34px, 5.2vw, 64px); --h2: clamp(28px, 3.6vw, 44px); --h3: 19px;
  --shadow: 0 1px 2px rgba(23, 26, 32, .05), 0 18px 44px -18px rgba(23, 26, 32, .22);
  --nav-h: 56px; --wrap: 1200px; --gut: clamp(16px, 4vw, 40px);
}
/* Dark stage used by the OBD / CAN section */
.deep {
  --bg: #070809; --bg-2: #0c0d10; --surface: #121418; --surface-2: #191c21;
  --ink: #f2f3f5; --ink-2: #a3a8b2; --ink-3: #6d727c; --line: rgba(255, 255, 255, .1);
  --ok: #3ddc84; --warn: #ffb020; --bad: #ff5a52; --route: #5aa2ff; --map-halo: #0e1014;
  --shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 30px 70px -30px #000;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); letter-spacing: 0; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }

h1, h2 { font-family: var(--f-display); font-weight: var(--h-weight); letter-spacing: var(--h-track); line-height: 1.08; text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-family: var(--f-body); font-size: var(--h3); font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
.lede { color: var(--ink-2); font-size: clamp(16px, 1.35vw, 18px); max-width: 60ch; text-wrap: pretty; }
.fine { color: var(--ink-3); font-size: 13px; }
.center { text-align: center; }

.eyebrow { font-size: 14px; font-weight: 500; color: var(--ink-2); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 26px; border: 0; border-radius: var(--r-btn); background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 500; letter-spacing: .01em; cursor: pointer; transition: transform .2s ease, filter .2s ease, background-color .2s ease; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.985); }
.btn-ghost { background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.btn-sm { min-height: 32px; padding: 0 16px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Status chips */
.pill { --c: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; background: color-mix(in srgb, var(--c) 15%, transparent); color: color-mix(in srgb, var(--c) 78%, var(--ink)); }
.pill > i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }
.pill.ok { --c: var(--ok); } .pill.warn { --c: var(--warn); } .pill.bad { --c: var(--bad); } .pill.idle { --c: var(--ink-3); }
.live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
/* A speed-limit sign keeps its real colours. */
.sign { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 4px solid #e0352b; color: #15171a; font: 700 12.5px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.bar { --c: var(--ink); height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.bar > i { display: block; width: var(--v); height: 100%; border-radius: inherit; background: var(--c); }
.bar.ok { --c: var(--ok); } .bar.warn { --c: var(--warn); }

/* ── Nav ── */
.nav { position: fixed; z-index: 60; inset: 0 0 auto 0; height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--gut) 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: background-color .3s ease, box-shadow .3s ease; }
.nav.scrolled { background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); box-shadow: 0 1px 0 var(--line); }
.brand { display: inline-flex; align-items: center; }
.brand svg { display: block; height: 17px; width: auto; }
.nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
.nav-links a { padding: 6px 14px; border-radius: var(--r-btn); font-size: 14px; font-weight: 500; transition: background-color .2s ease; }
.nav-links a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.nav-end { display: flex; align-items: center; gap: 10px; }
.lang { min-width: 38px; height: 32px; border: 0; border-radius: var(--r-btn); background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; }
.lang:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* ── Heroes ── */
.hero { position: relative; }
.hero-top p { font-size: clamp(15px, 1.4vw, 18px); }
.hero-a { display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; overflow: hidden; padding: calc(var(--nav-h) + clamp(28px, 6vh, 60px)) var(--gut) clamp(28px, 5vh, 46px); }
.hero-top, .hero-bottom { position: relative; z-index: 2; width: 100%; }
.hero-top { display: grid; gap: 12px; justify-items: center; }
.hero-media { position: absolute; inset: 0; container-type: size; }
.hero-media video, .use video, .deep-media video { width: 100%; height: 100%; object-fit: cover; }

.hero-a { height: clamp(600px, 100svh, 940px); }
.hero-a .hero-media { background: #c0c3c8; overflow: hidden; }
/* The frame always covers the hero. When it is wider or taller than the hero, the crop keeps the van
   (44% across, 72% down the footage) in view and gives up sky first. */
.hero-a .frame { --fw: max(100cqw, 177.78cqh); --fh: max(56.25cqw, 100cqh); position: absolute; width: var(--fw); aspect-ratio: 16 / 9; left: clamp(100cqw - var(--fw), 50cqw - var(--fw) * .44, 0px); top: calc((100cqh - var(--fh)) * .7); }
.hero-a .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .38) 100%); pointer-events: none; }
.hero-a .hero-top p { color: #2a2d34; font-weight: 500; }
.hero-a .hero-note { margin-top: 14px; color: #fff; font-size: 13.5px; font-weight: 500; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.hero-a .btn { min-width: min(260px, 100%); }
.hero-a .btn-ghost { background: rgba(255, 255, 255, .82); color: #171a20; box-shadow: none; }
/* Live tag anchored to the van's roof; the footage is a tracking shot, so the van holds its place. */
.pin { position: absolute; z-index: 1; width: 0; height: 0; }
.pin-card { position: absolute; left: 0; bottom: 46px; transform: translateX(-50%); display: grid; grid-template-columns: auto auto auto; align-items: center; column-gap: 9px; padding: 9px 14px 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .94); color: #171a20; font-size: 13px; white-space: nowrap; text-align: left; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pin-card::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 46px; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.pin-card b { font-weight: 600; }
.pin-card small { grid-column: 2 / -1; color: #5c5e62; font-size: 11.5px; }



/* ── Sections ── */
.sec { padding-block: clamp(72px, 9.5vw, 132px); }
.sec-alt { background: var(--bg-2); }
.sec-head { display: grid; gap: 14px; max-width: 780px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; justify-items: center; }
.sec-head .lede { margin-inline: auto; }

/* ── Dashboard render ── */
.dash { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; font-size: 13px; line-height: 1.35; text-align: left; }
.dash-bar { display: flex; align-items: center; gap: 22px; height: 50px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.brand-sm svg { height: 11px; }
.dash-tabs { display: flex; gap: 2px; min-width: 0; overflow: hidden; }
.dash-tabs > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.dash-tabs > .is-on { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700; font-style: normal; }
.dash-end { margin-left: auto; display: flex; align-items: center; gap: 16px; color: var(--ink-2); }
.bell { position: relative; }
.bell > i { position: absolute; right: -1px; top: -1px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--surface); }
.avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 10.5px; font-weight: 700; }
.dash-body { position: relative; display: grid; grid-template-columns: 276px minmax(0, 1fr); height: clamp(500px, 47vw, 620px); }
.units { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--surface); }
.units-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.units-head > b { flex: 1 0 100%; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.units-list { flex: 1; overflow: auto; padding: 8px; display: grid; gap: 2px; align-content: start; }
.unit { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 10px 10px 12px; border: 0; border-radius: var(--r); background: transparent; text-align: left; cursor: pointer; transition: background-color .2s ease; }
.unit:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.unit.is-on { background: color-mix(in srgb, var(--route) 11%, transparent); }
.unit.is-on::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--route); }
.unit img { width: 54px; height: 26px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)); }
.u-main, .u-end { display: grid; min-width: 0; }
.u-main b { font-weight: 600; font-size: 13.5px; }
.u-main small, .u-end small { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-end { justify-items: end; }
.u-end b { font-size: 15px; font-weight: 600; }
.unit.is-idle .u-end b { color: var(--ink-3); }
.mapwrap { position: relative; min-width: 0; overflow: hidden; background: var(--map-halo); }
.map { position: absolute; inset: 0; width: 100%; height: 100%; --k: 3; }
.map-attr { position: absolute; left: 8px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink-2); font-size: 10px; }

.map .districts text { font: 600 1px var(--f-body); font-size: calc(9.5px * var(--k)); letter-spacing: .16em; fill: var(--ink-3); text-anchor: middle; paint-order: stroke; stroke: var(--map-halo); stroke-width: calc(3px * var(--k)); stroke-linejoin: round; }
.map path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route { stroke: var(--route); stroke-width: calc(2.5px * var(--k)); opacity: .2; }
.trail { stroke: var(--route); stroke-width: calc(3px * var(--k)); opacity: .5; }
.is-sel .route { opacity: .3; }
.is-sel .trail { stroke-width: calc(4.5px * var(--k)); opacity: 1; }
.plan-line { stroke: var(--ink); stroke-width: calc(3px * var(--k)); stroke-dasharray: calc(1px * var(--k)) calc(7px * var(--k)); opacity: .75; }
.dev-line { stroke: var(--bad); stroke-width: calc(4px * var(--k)); }
.zone { fill: color-mix(in srgb, var(--hi) 16%, transparent); stroke: var(--hi); stroke-width: calc(2px * var(--k)); stroke-dasharray: calc(7px * var(--k)) calc(5px * var(--k)); stroke-linejoin: round; transition: fill .5s ease; }
.is-inside .zone { fill: color-mix(in srgb, var(--hi) 34%, transparent); }
.zone-label { font: 700 1px var(--f-body); font-size: calc(10.5px * var(--k)); letter-spacing: .08em; text-transform: uppercase; fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--map-halo); stroke-width: calc(3px * var(--k)); }
.vk { transform: scale(var(--k)); }
.veh image { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
.halo { fill: var(--route); opacity: .14; }
.is-sel .halo { opacity: .26; transform-box: fill-box; transform-origin: center; animation: halo 2.2s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.22); opacity: .12; } }
.tag rect { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.tag text { fill: var(--ink); font: 600 11px var(--f-body); }
.tag .t-s { fill: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.is-sel .tag rect { fill: var(--ink); stroke: var(--ink); }
.is-sel .tag text { fill: var(--bg); }
.is-sel .tag .t-s { fill: color-mix(in srgb, var(--bg) 70%, var(--ink)); }
.stop-dot { fill: var(--surface); stroke: var(--route); stroke-width: calc(2.5px * var(--k)); }

.unit-panel { position: absolute; z-index: 2; right: 14px; top: 14px; width: 272px; display: grid; gap: 14px; padding: 16px; border-radius: var(--r); background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.up-head { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.up-head img { width: 62px; height: 30px; object-fit: contain; }
.up-head div { display: grid; }
.up-head b { font-size: 15px; font-weight: 600; }
.up-head small { color: var(--ink-3); font-size: 11px; }
.up-speed { display: flex; align-items: baseline; gap: 6px; }
.up-speed .big { font-family: var(--f-display); font-size: 46px; font-weight: var(--h-weight); line-height: 1; letter-spacing: -.02em; }
.unit-l { color: var(--ink-2); font-size: 13px; }
.up-speed .sign { margin-left: auto; align-self: center; }
.spark { width: 100%; height: 52px; overflow: visible; }
.spark .s-line { fill: none; stroke: var(--route); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spark .s-area { fill: color-mix(in srgb, var(--route) 13%, transparent); }
.spark .s-limit { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: .7; }
.up-rows { display: grid; gap: 8px; padding-block: 12px; border-block: 1px solid var(--line); }
.up-rows > div { display: flex; justify-content: space-between; gap: 12px; }
.up-rows dt { color: var(--ink-3); }
.up-rows dd { font-weight: 500; text-align: right; }
.up-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.up-stats > div { display: grid; }
.up-stats b { font-size: 17px; font-weight: 600; white-space: nowrap; }
.up-stats small { color: var(--ink-3); font-size: 11px; line-height: 1.25; }
.up-foot { display: flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: 11.5px; }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: clamp(32px, 4vw, 56px); }
.facts li { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.facts p { color: var(--ink-2); font-size: 15px; }

/* ── Fleet types ── */
.fleet-row { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 3vw, 44px); margin-bottom: clamp(36px, 5vw, 64px); padding-inline: 2%; }
.fleet-row li { flex: var(--w) 1 0; min-width: 0; display: grid; justify-items: center; gap: 14px; }
.fleet-row img { width: 100%; filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .22)); }
.fleet-row span { color: var(--ink-2); font-size: 13px; font-weight: 500; text-align: center; }
.uses { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.use { position: relative; grid-column: span 5; min-height: clamp(260px, 30vw, 400px); border-radius: var(--r-lg); overflow: hidden; background: #101114; color: #fff; isolation: isolate; }
.use-wide { grid-column: span 7; }
.use > img, .use > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.use:hover > img, .use:hover > video { transform: scale(1.04); }
.use::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .72) 100%); }
.use-copy { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: clamp(18px, 2.4vw, 28px); }
.use-copy h3 { font-size: clamp(18px, 1.8vw, 23px); }
.use-copy p { color: rgba(255, 255, 255, .82); font-size: 14.5px; max-width: 44ch; }

/* ── Feature cards ── */
.fx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.fx { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.fx-render { position: relative; display: grid; place-items: center; min-height: 318px; padding: clamp(16px, 2.4vw, 28px); background: var(--surface-2); }
.fx-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: clamp(18px, 2.4vw, 28px); align-content: start; }
.fx-ico { grid-row: span 2; width: 26px; height: 26px; margin-top: 1px; color: var(--hi); }
.fx-copy p { color: var(--ink-2); font-size: 15px; }
.mini { position: relative; width: 100%; max-width: 440px; display: grid; gap: 14px; padding: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13px; line-height: 1.35; text-align: left; }
.mini-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.mini-head > img { width: 64px; height: 30px; object-fit: contain; }
.mini-head div { display: grid; }
.mini-head b { font-size: 14px; font-weight: 600; }
.mini-head small { color: var(--ink-3); font-size: 11.5px; }
.mini-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mini-foot small { color: var(--ink-2); font-size: 12px; }
.mini.mini-map { max-width: none; align-self: stretch; padding: 0; overflow: hidden; min-height: 262px; }
.fx-render:has(.mini-map) { padding: 0; place-items: stretch; }
.fx-render:has(.mini-map) .mini { border: 0; border-radius: 0; box-shadow: none; background: var(--map-halo); }
.chart { width: 100%; height: auto; overflow: visible; }
.chart text { font: 500 9.5px var(--f-body); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .limit { stroke: var(--bad); stroke-width: 1.2; stroke-dasharray: 4 3; }
.chart .limit-t { fill: var(--bad); font-weight: 700; }
.chart .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .over { fill: color-mix(in srgb, var(--bad) 22%, transparent); }
.chart .over-line { fill: none; stroke: var(--bad); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart .peak { fill: var(--bad); stroke: var(--surface); stroke-width: 2; }
.chart .peak-t { fill: var(--bad); font-weight: 700; font-size: 10.5px; }
.chart .area { fill: color-mix(in srgb, var(--ok) 14%, transparent); }
.chart .fuel { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linejoin: round; }
.chart .note-t { fill: var(--ink-2); }
.card-obd .chart text { font-size: 12.5px; }
.in .chart .line, .in .chart .fuel { stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 1.6s .15s ease-out both; }
@keyframes draw { from { stroke-dashoffset: 1; } }
.in .chart .over, .in .chart .over-line, .in .chart .peak, .in .chart .peak-t, .in .chart .note-t { animation: appear .5s 1.2s ease-out both; }
@keyframes appear { from { opacity: 0; } }
.log { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 6px; }
.log li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: calc(var(--r) - 4px); background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--line); font-size: 12.5px; opacity: .55; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity .4s ease, transform .4s ease; }
.log li.is-now { opacity: 1; transform: translateY(-2px); box-shadow: var(--shadow); }
.log i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.log li[data-state="in"].is-now i { background: var(--ok); }
.log li[data-state="out"].is-now i { background: var(--warn); }
.log span { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.map-chip, .map-alert { position: absolute; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--line); font-size: 12.5px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.map-chip { left: 12px; top: 12px; color: var(--ink-2); }
.dashline { width: 22px; height: 0; border-top: 3px dotted var(--ink); }
.map-alert { left: 12px; bottom: 12px; padding-left: 7px; box-shadow: var(--shadow); opacity: .35; transition: opacity .4s ease, transform .4s ease; }
.map-alert.is-now { opacity: 1; transform: translateY(-2px); }
.svc { display: grid; gap: 12px; }
.svc li { display: grid; gap: 6px; }
.svc li > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.svc b { font-weight: 600; }
.svc small { color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.in .bar > i { animation: grow 1.2s .2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes grow { from { width: 0; } }

/* ── Photo band ── */
.band { position: relative; display: grid; place-items: center; min-height: clamp(360px, 46vw, 620px); overflow: hidden; color: #fff; text-align: center; isolation: isolate; }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 9, 11, .42); }
.band-copy { display: grid; gap: 14px; padding: 40px var(--gut); max-width: 900px; }
.band-copy p { font-size: clamp(16px, 1.5vw, 19px); color: rgba(255, 255, 255, .86); }

/* ── App ── */
.app-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.app-copy { display: grid; gap: 16px; justify-items: start; }
.ticks { display: grid; gap: 10px; align-content: start; }
.ticks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; }
.ticks svg { width: 16px; height: 16px; margin-top: 4px; color: var(--hi); }
.phones { position: relative; width: 440px; max-width: 100%; height: 520px; }
.phone { position: absolute; width: 232px; height: 476px; padding: 8px; border-radius: 42px; background: #0c0c0e; box-shadow: 0 0 0 1px #2a2b30, 0 40px 60px -30px rgba(0, 0, 0, .6); }
.phone-lock { left: 0; top: 0; transform: rotate(-5deg); }
.phone-app { right: 0; bottom: 0; transform: rotate(3deg); }
.ph-screen { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: var(--map-halo); color: var(--ink); }
.ph-island { position: absolute; z-index: 3; left: 50%; top: 9px; width: 70px; height: 20px; border-radius: 12px; background: #0c0c0e; transform: translateX(-50%); }
.phone-lock .ph-screen { display: grid; grid-template-rows: auto auto 1fr; justify-items: center; padding: 46px 9px 14px; background: linear-gradient(180deg, rgba(6, 12, 28, .25), rgba(6, 12, 28, .7)), url("assets/photo-mty-night.webp") center / cover; color: #fff; }
.ph-time { font: 300 54px/1 var(--f-body); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ph-date { margin-top: 4px; font-size: 12px; opacity: .85; }
.notifs { align-self: end; width: 100%; display: grid; gap: 6px; }
.notifs li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 8px 9px; border-radius: 16px; background: rgba(245, 246, 248, .86); color: #15171a; font-size: 10.5px; line-height: 1.3; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.notifs p { display: flex; justify-content: space-between; gap: 6px; }
.notifs b { font-size: 11px; font-weight: 700; }
.notifs time { color: #6b6e75; font-size: 9.5px; }
.n-app { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #15171a; color: #fff; font-size: 12px; font-weight: 700; }
.in .notifs li { animation: drop .7s cubic-bezier(.2, .8, .2, 1) both; }
.in .notifs li:nth-child(1) { animation-delay: 1.3s; } .in .notifs li:nth-child(2) { animation-delay: .9s; } .in .notifs li:nth-child(3) { animation-delay: .5s; } .in .notifs li:nth-child(4) { animation-delay: .1s; }
@keyframes drop { from { opacity: 0; transform: translateY(-18px) scale(.94); } }
.ph-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 10px; padding: 8px 14px 18px; border-radius: 20px 20px 0 0; background: var(--surface); box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, .25); font-size: 12px; }
.grab { justify-self: center; width: 34px; height: 4px; border-radius: 2px; background: var(--line); }
.ph-unit { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ph-unit div { display: grid; }
.ph-unit b { font-size: 14px; }
.ph-unit small, .ph-stats small { color: var(--ink-3); font-size: 10.5px; }
.ph-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.ph-stats div { display: grid; }
.ph-stats b { font-size: 17px; font-weight: 600; }
.app-photo { align-self: stretch; min-height: 420px; border-radius: var(--r-lg); overflow: hidden; }
.app-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

/* ── Plans ── */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.plan { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.plan-media { aspect-ratio: 4 / 3; overflow: hidden; background: #dcdcdc; }
.plan-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.plan:hover .plan-media img { transform: scale(1.05); }
.plan-body { display: grid; gap: 14px; align-content: start; grid-template-rows: auto auto auto auto 1fr auto; padding: clamp(18px, 2.2vw, 28px); }
.plan-tag { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-2); }
.plan h3 { font-family: var(--f-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: var(--h-weight); letter-spacing: var(--h-track); margin-top: -8px; }
.plan-line { color: var(--ink-2); font-size: 15px; min-height: 3.1em; }
.price { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-block: 16px; border-block: 1px solid var(--line); }
.price > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.price dt { color: var(--ink-3); font-size: 12px; }
.price dd { font-family: var(--f-display); font-size: clamp(24px, 2.4vw, 31px); font-weight: var(--h-weight); line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price .cur { font-size: .58em; vertical-align: .52em; margin-right: 1px; color: var(--ink-2); }
.price small { font-family: var(--f-body); font-size: 11.5px; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--ink-3); text-transform: none; }
#plan-pro { box-shadow: 0 0 0 1.5px var(--hi), var(--shadow); border-color: transparent; }
.plans + .fine { margin-top: 22px; }

/* ── OBD / CAN depth: a dark stage ── */
.deep { color-scheme: dark; background: var(--bg); color: var(--ink); padding-bottom: clamp(48px, 6vw, 80px); }
.deep .sec-head { margin-bottom: 0; position: relative; z-index: 2; }
.deep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); align-items: start; }
.deep-media { grid-column: 1 / -1; aspect-ratio: 16 / 7.4; margin: -1% 0 -11%; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 50%, transparent 100%); }
.deep .mini { max-width: none; padding: 20px; gap: 16px; background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.chip-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--ink); }
.chip-ico svg { width: 20px; height: 20px; }
.plan-pill { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-family: var(--f-mono); font-weight: 500; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tiles > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; padding: 12px; border-radius: calc(var(--r) - 4px); background: var(--surface-2); min-width: 0; }
.tiles small { flex: 1 0 100%; color: var(--ink-3); font-size: 11px; }
.tiles b { font-size: 20px; font-weight: 600; line-height: 1.2; }
.tiles span { color: var(--ink-2); font-size: 11.5px; }
.tiles .bar { flex: 1 0 100%; margin-top: 6px; height: 4px; }
.dtc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--ink-2); font-size: 12.5px; }
.dtc .pill { font-family: var(--f-mono); }
.can-van { position: relative; margin: 6px 7% 0; }
.can-van img { width: 100%; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .6)); }
.hot { --c: var(--ok); position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 28%, transparent); transition: background-color .4s ease, box-shadow .4s ease; }
.hot.belt { border-radius: 4px; }
.hot.is-warn { --c: var(--warn); }
.hot.is-open { --c: var(--bad); animation: hot 1.4s ease-out infinite; }
@keyframes hot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.can-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.can-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.can-list span { color: var(--ink-2); }
.can-list b { font-weight: 600; white-space: nowrap; }
.can-list .ok { color: var(--ok); } .can-list .warn { color: var(--warn); } .can-list .bad { color: var(--bad); }
.deep-grid + .fine { margin-top: 22px; }

/* ── Compare ── */
.table-scroll { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.cmp { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { padding: 14px 20px; text-align: center; border-top: 1px solid var(--line); }
.cmp thead th { border-top: 0; padding-block: 20px; font-family: var(--f-display); font-size: 19px; font-weight: var(--h-weight); letter-spacing: var(--h-track); width: 19%; }
.cmp thead small { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 400; font-stretch: 100%; letter-spacing: .04em; color: var(--ink-3); text-transform: none; }
.cmp thead th:first-child { width: auto; }
.cmp tbody th { text-align: left; font-weight: 400; color: var(--ink); }
.cmp .grp th { padding-block: 10px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cmp td.num { font-weight: 600; font-size: 16px; }
.cmp td svg { width: 18px; height: 18px; margin-inline: auto; }
.cmp .y { color: var(--ink); } .cmp .n { color: var(--ink-3); opacity: .6; }
.cmp th:nth-child(3), .cmp td:nth-child(3) { background: color-mix(in srgb, var(--hi) 6%, transparent); }

/* ── Calculator ── */
.calc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.calc-rows { display: grid; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.calc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(16px, 2vw, 24px); }
.calc-row + .calc-row { border-top: 1px solid var(--line); }
.calc-row > div:first-child { display: grid; gap: 2px; }
.calc-row b { font-size: 17px; font-weight: 600; }
.calc-row small { color: var(--ink-2); font-size: 13px; }
.stepper { display: grid; grid-template-columns: 40px 56px 40px; align-items: center; border-radius: var(--r-btn); box-shadow: inset 0 0 0 1px var(--line); background: var(--surface-2); }
.stepper button { height: 40px; border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; border-radius: var(--r-btn); }
.stepper button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.stepper input { width: 100%; height: 40px; border: 0; background: transparent; text-align: center; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-out { display: grid; gap: 18px; align-content: center; padding: clamp(22px, 2.8vw, 36px); border-radius: var(--r-lg); background: var(--ink); color: var(--bg); }
.calc-title { font-size: 17px; font-weight: 600; }
.calc-lines { display: grid; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); font-size: 14px; }
.calc-lines li { display: flex; justify-content: space-between; gap: 16px; }
.calc-lines li span:last-child { color: color-mix(in srgb, var(--bg) 70%, var(--ink)); white-space: nowrap; }
.calc-lines .empty { color: color-mix(in srgb, var(--bg) 62%, var(--ink)); }
.calc-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.calc-out dt { font-size: 12.5px; color: color-mix(in srgb, var(--bg) 62%, var(--ink)); }
.calc-out dd { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: var(--h-weight); line-height: 1.2; }
.calc-out .main { grid-column: 1 / -1; padding-block: 16px; border-block: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); }
.calc-out .main dd { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.05; }
.calc-out .fine { color: color-mix(in srgb, var(--bg) 55%, var(--ink)); }

/* ── Steps ── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); counter-reset: none; }
.steps li { display: grid; gap: 8px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line); }
.step-n { font-family: var(--f-display); font-size: clamp(40px, 4.4vw, 60px); font-weight: var(--h-weight); line-height: 1; color: var(--ink); margin-bottom: 8px; }
.steps p { color: var(--ink-2); font-size: 15px; }

/* ── FAQ ── */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.faq-wrap .sec-head { margin: 0; text-align: left; justify-items: start; grid-template-columns: 1fr; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .25s ease; }
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq details p { padding: 0 32px 22px 0; color: var(--ink-2); max-width: 64ch; }

/* ── Contact ── */
.cta { position: relative; padding-bottom: clamp(72px, 9vw, 120px); overflow: hidden; }
.cta-visual { max-width: 1280px; margin-inline: auto; aspect-ratio: 16 / 7.2; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.cta-visual img, .cta-visual video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: start; margin-top: clamp(-70px, -5vw, -24px); position: relative; }
.cta-copy { display: grid; gap: 16px; padding-top: 24px; }
.cta-copy h2 { font-size: var(--h1); }
.lead { display: grid; gap: 14px; padding: clamp(20px, 2.6vw, 32px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.lead label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.lead input, .lead select { width: 100%; height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; color: var(--ink); }
.lead input:focus-visible, .lead select:focus-visible { outline: 2px solid var(--hi); outline-offset: 0; }
.lead-2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
.lead-msg { padding: 12px 14px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--ink); font-size: 13.5px; }
.lead-msg[data-kind="ok"] { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.lead-msg[data-kind="bad"] { background: color-mix(in srgb, var(--bad) 12%, transparent); }
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead .btn:disabled { opacity: .6; cursor: progress; }

/* ── Footer ── */
.foot { padding: 40px 0 calc(48px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--ink-2); }
.foot nav a:hover { color: var(--ink); }
.foot .fine { flex: 1 0 100%; }


/* ── Scroll-in: the resting state is the finished one; the class only replays an entrance ── */
.rv.in { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
.fleet-row .rv.in { animation-name: roll; animation-duration: 1.1s; }
.fleet-row li:nth-child(2).in { animation-delay: .08s; } .fleet-row li:nth-child(3).in { animation-delay: .16s; } .fleet-row li:nth-child(4).in { animation-delay: .24s; }
@keyframes roll { from { opacity: 0; transform: translateX(-70px); } }
.phones.rv.in { animation: none; }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .app-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .app-photo { grid-column: 1 / -1; min-height: 0; aspect-ratio: 16 / 8; }
}
@media (max-width: 900px) {
  .dash-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .units { min-width: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .units-list { display: flex; overflow-x: auto; gap: 6px; scroll-snap-type: x proximity; }
  .unit { flex: 0 0 204px; scroll-snap-align: start; }
  .mapwrap { aspect-ratio: 4 / 3; }
  .unit-panel { position: static; width: auto; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
  .dash-tabs > span:not(.is-on) { display: none; }
  .fx-grid, .plans, .calc, .faq-wrap, .cta-grid, .deep-grid { grid-template-columns: 1fr; }
  .plans { max-width: 520px; margin-inline: auto; }
  .plan-line { min-height: 0; }
  .deep-media { aspect-ratio: 16 / 9; margin-bottom: -6%; }
  .use, .use-wide { grid-column: 1 / -1; }
  .app-grid { grid-template-columns: 1fr; justify-items: center; }
  .app-copy { justify-self: stretch; }
  .cta-grid { margin-top: 0; }
  .cta-copy { padding-top: 0; }
}
@media (max-width: 640px) {
  .facts, .steps { grid-template-columns: 1fr; }
  .fleet-row { gap: 8px; padding-inline: 0; }
  .fleet-row span { font-size: 10.5px; }
  .pin-card { font-size: 12px; padding: 7px 11px 7px 9px; }
  .hero-a .btn-row { flex-wrap: nowrap; }
  .hero-a .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
  .hero-a .hero-note { font-size: 12.5px; }
  .phones { width: 336px; height: 452px; }
  .phone { width: 196px; height: 404px; border-radius: 36px; }
  .ph-screen { border-radius: 29px; }
  .ph-time { font-size: 44px; }
  .notifs li:nth-child(4) { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .can-list { grid-template-columns: 1fr; }
  .cmp { min-width: 0; font-size: 13px; }
  .cmp th, .cmp td { padding: 11px 5px; }
  .cmp tbody th, .cmp .grp th { padding-left: 12px; }
  .cmp thead th { width: 17%; font-size: 15px; padding-block: 14px; }
  .cmp thead small { font-size: 8.5px; letter-spacing: 0; }
  .cmp td.num { font-size: 13.5px; }
  .lead-2 { grid-template-columns: 1fr; }
  .cta-visual { aspect-ratio: 16 / 9; }
  .nav-end .btn { display: none; }
  .fx-render { min-height: 0; }
  .mini.mini-map { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}