/* عربيتنا landing: a night road the visitor's car drives as they scroll. Asphalt, road paint, headlight light,
   tail-light red. Motion recipes from transitions.dev (texts reveal, success check, toggle, tabs sliding,
   number pop-in, accordion, spinning counter) read the tokens below. */

@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 500 900; font-display: swap; src: url('../fonts/landing/alexandria-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 500 900; font-display: swap; src: url('../fonts/landing/alexandria-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/landing/plex-arabic-400.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/landing/plex-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/landing/plex-arabic-500.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/landing/plex-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/landing/plex-arabic-600.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/landing/plex-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/landing/plex-arabic-700.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/landing/plex-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/landing/saira-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/landing/saira-latin-700.woff2') format('woff2'); }

:root {
    color-scheme: dark;

    /* world */
    --ground: #0e0e0f;
    --road: #141415;
    --surface: #151516;
    --raised: #1c1c1e;
    --line: #29292c;
    --line-2: #3a3a3e;
    --ink: #f3efe7;
    --ink-2: #c9c4ba;
    --ink-3: #9a958c;
    --paint: #e9e4d8;
    --red: #e3262f;
    --red-hi: #f0434b;
    --amber: #f2b93b;
    --green: #3dd68c;
    --beam: 255, 236, 200;

    --f-display: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --f-text: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --f-num: 'Saira Condensed', 'IBM Plex Sans Arabic', sans-serif;

    /* layout: the road runs down the physical left of the content column */
    --maxw: 1280px;
    --gutter: 16px;
    --road-w: 52px;
    --road-gap: 12px;
    --paint-w: 2px;
    --dash: 18px;
    --dash-gap: 26px;
    --car-w: 17px;
    --car-top: 15vh;
    --beam-len: 200px;
    --header-h: 60px;
    --sec-pad: 88px;
    --radius: 10px;

    /* transitions.dev motion tokens */
    --duration-stagger: 40ms;
    --duration-micro: 80ms;
    --duration-quick: 150ms;
    --duration-fast: 250ms;
    --duration-medium: 350ms;
    --duration-slow: 400ms;
    --duration-very-slow: 500ms;
    --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: ease-in-out;
    --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
    --distance-micro: 4px;
    --distance-medium: 12px;
    --blur-small: 2px;
    --blur-medium: 3px;

    /* texts reveal */
    --stagger-dur: 500ms;
    --stagger-distance: 12px;
    --stagger-stagger: 40ms;
    --stagger-blur: 3px;
    --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* success check */
    --check-opacity-dur: 500ms;
    --check-rotate-dur: 500ms;
    --check-rotate-from: 80deg;
    --check-bob-dur: 500ms;
    --check-y-amount: 12px;
    --check-blur-dur: 500ms;
    --check-blur-from: 10px;
    --check-path-dur: 500ms;
    --check-path-delay: 80ms;
    --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
    --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
    --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
    --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
    /* toggle */
    --toggle-dur: 350ms;
    --toggle-travel: 20px;
    --toggle-ov1: 1px;
    --toggle-ov2: 0px;
    --toggle-track: 0ms;
    --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
    /* tabs sliding */
    --tabs-dur: 250ms;
    --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --tabs-text-muted: #9a958c;
    --tabs-text-active: #0e0e0f;
    --tabs-bar-bg: #1c1c1e;
    --tabs-pill-bg: #e9e4d8;
    /* number pop-in */
    --digit-dur: 500ms;
    --digit-distance: 8px;
    --digit-stagger: 70ms;
    --digit-blur: 2px;
    --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
    --digit-dir-x: 0;
    --digit-dir-y: 1;
    /* text swap */
    --text-swap-dur: 150ms;
    --text-swap-translate-y: 4px;
    --text-swap-blur: 2px;
    --text-swap-ease: ease-in-out;
    /* accordion */
    --acc-expand: 250ms;
    --acc-collapse: 250ms;
    --acc-chevron: 250ms;
    --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* spinning counter */
    --reel-dur: 1400ms;
    --reel-cell: 1.2em;
    --reel-spin-blur: 3px;
    --reel-stagger: 90ms;
    --reel-ease: cubic-bezier(0.16, 1, 0.3, 1);
    /* UI generation runtime, on the night ground */
}
html[data-theme="dark"] { --gen-line: #8f897e; --gen-strong: #e9e4d8; --gen-ink: rgba(233, 228, 216, 0.22); --gen-surface: #0e0e0f; --gen-text: #f3efe7; --gen-muted: #9a958c; }
@supports (height: 1svh) {
    :root { --car-top-s: 15svh; }
    @media (min-width: 640px) { :root { --car-top-s: 18svh; } }
    @media (min-width: 1024px) { :root { --car-top-s: 21svh; } }
}

@media (min-width: 640px) {
    :root { --gutter: 24px; --road-w: 92px; --road-gap: 28px; --paint-w: 3px; --dash: 30px; --dash-gap: 42px; --car-w: 28px; --car-top: 18vh; --beam-len: 280px; --header-h: 70px; --sec-pad: 112px; }
}
@media (min-width: 1024px) {
    :root { --gutter: 32px; --road-w: 140px; --road-gap: 48px; --paint-w: 4px; --dash: 44px; --dash-gap: 60px; --car-w: 42px; --car-top: 21vh; --beam-len: 380px; --header-h: 74px; --sec-pad: 136px; }
}
@media (min-width: 1280px) {
    :root { --road-w: 168px; --road-gap: 60px; --car-w: 50px; --beam-len: 420px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); background: var(--ground); scrollbar-color: #3a3a3e var(--ground); }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink-2);
    /* the page ground: the asphalt tile under a dark wash, smoother than the road */
    background: linear-gradient(rgba(14, 14, 15, 0.42), rgba(14, 14, 15, 0.42)), var(--ground) url('../img/landing/asphalt.webp') repeat;
    background-size: auto, 512px 512px;
    font: 400 17px/1.8 var(--f-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
::selection { background: var(--red); color: #fff; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: #34343a; border: 3px solid var(--ground); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #4a4a50; }
img, svg { display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--paint); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; font-weight: 700; text-wrap: balance; }
p, li, dd, small { text-wrap: pretty; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.num, .km, .price, .count { font-variant-numeric: tabular-nums; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; z-index: 100; top: 8px; right: 8px; padding: 10px 16px; border-radius: 8px; background: var(--paint); color: var(--ground); font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform var(--duration-fast) var(--ease-smooth-out); }
.skip:focus { transform: none; }

.wrap {
    position: relative;
    width: min(100% - 2 * var(--gutter), var(--maxw));
    margin-inline: auto;
    padding-left: calc(var(--road-w) + var(--road-gap));
}

/* ── the world: asphalt, the road and its paint ───────────────────────────────────────────── */
.world { position: relative; z-index: 1; }
.road {
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(var(--gutter), calc((100% - var(--maxw)) / 2));
    width: var(--road-w);
    background: #1a1a1b url('../img/landing/asphalt.webp') repeat;
    background-size: 512px 512px;
    background-blend-mode: lighten;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.6), inset -1px 0 0 rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.road-paint {
    position: absolute;
    inset: 0;
    opacity: 0.84;
    background:
        linear-gradient(var(--paint), var(--paint)) left calc(var(--paint-w) + 1px) top 0 / var(--paint-w) 100% no-repeat,
        linear-gradient(var(--paint), var(--paint)) right calc(var(--paint-w) + 1px) top 0 / var(--paint-w) 100% no-repeat,
        repeating-linear-gradient(to bottom, var(--paint) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--dash-gap))) center top / var(--paint-w) 100% no-repeat;
}

/* the car: parked in the hero without JS; JS makes it drive (fixed in the viewport while the road scrolls) */
.car {
    position: absolute;
    z-index: 5;
    top: var(--car-top);
    /* Egypt drives on the right: heading down the page, the car keeps to the viewer's left lane */
    left: calc(max(var(--gutter), (100% - var(--maxw)) / 2) + var(--road-w) * 0.25 - var(--car-w) / 2);
    width: var(--car-w);
    aspect-ratio: 60 / 128;
    pointer-events: none;
}
.car.is-driving { position: fixed; top: var(--car-top-s, var(--car-top)); will-change: transform; }
.car-body { position: relative; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.55)); }
/* the drawing lives in a <symbol>: selectors cannot reach inside <use>, so every instance passes its colours down */
.c-body { fill: var(--body, #dcd8cf); }
.c-roof { fill: var(--roof, #c9c5bc); }
.c-crease { fill: none; stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.8; stroke-linecap: round; }
.c-head { fill: var(--head, #fff8e4); }
.c-tail { fill: var(--tail, #b51a22); transition: fill var(--duration-fast) var(--ease-smooth-out); }
.c-rev { fill: #fff; opacity: var(--rev, 0); transition: opacity var(--duration-quick) linear; }
.car.is-braking { --tail: #ff3a43; }
.car.is-reversing { --rev: 1; }
.car-beam {
    position: absolute;
    top: 92%;
    left: 50%;
    width: calc(var(--car-w) * 3.6);
    height: var(--beam-len);
    transform: translateX(-50%);
    background:
        radial-gradient(60% 70% at 32% 0%, rgba(var(--beam), 0.30), rgba(var(--beam), 0) 72%),
        radial-gradient(60% 70% at 68% 0%, rgba(var(--beam), 0.30), rgba(var(--beam), 0) 72%),
        radial-gradient(70% 100% at 50% 0%, rgba(var(--beam), 0.12), rgba(var(--beam), 0) 80%);
    clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
    mix-blend-mode: screen;
    filter: blur(2px);
    transition: opacity var(--duration-slow) var(--ease-smooth-out);
}
.car-glow {
    position: absolute;
    left: 50%;
    top: -26%;
    width: 170%;
    height: 48%;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 70%, rgba(227, 38, 47, 0.55), rgba(227, 38, 47, 0) 70%);
    mix-blend-mode: screen;
    opacity: 0.6;
    transition: opacity var(--duration-fast) var(--ease-smooth-out);
}
.car.is-braking .car-glow { opacity: 1; }
.car.is-reversing .car-glow { background: radial-gradient(50% 50% at 50% 70%, rgba(255, 246, 228, 0.32), rgba(255, 246, 228, 0) 70%); opacity: 0.9; }
.car.is-parked .car-beam { opacity: 0; }
.car.is-parked .car-glow { opacity: 0.3; }

/* parked cars on the shoulder */
.parked { position: absolute; inset: 0; pointer-events: none; z-index: 2; --head: #77736b; --tail: #6e1217; }
.parked .pc { position: absolute; width: var(--car-w); aspect-ratio: 60 / 128; left: calc(max(var(--gutter), (100% - var(--maxw)) / 2) + var(--road-w) * 0.75 - var(--car-w) / 2); filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.6)); }
.pc-1 { top: 34%; --body: #2d3036; --roof: #24272c; transform: rotate(180deg); }
.pc-2 { top: 58%; --body: #8f1d23; --roof: #7a181d; transform: rotate(180deg); }
.pc-3 { top: 40%; --body: #b9b6ae; --roof: #a8a59d; transform: rotate(180deg); }
.for-sale {
    position: absolute;
    top: calc(40% + var(--car-w) * 0.62);
    left: calc(max(var(--gutter), (100% - var(--maxw)) / 2) + var(--road-w) * 0.75);
    transform: translate(-50%, 0) rotate(-6deg);
    padding: 1px 4px;
    border-radius: 2px;
    background: #ffd84a;
    color: #1a1a1a;
    font: 800 calc(var(--car-w) * 0.24) / 1.2 var(--f-display);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ── header: a floating capsule in the language of the app's own dock (the founder's glass bar): it
   compacts to the brand and the action going down, opens again going up, and its pill follows the section
   the reader is in (transitions.dev tabs sliding) ── */
.top { position: fixed; z-index: 30; top: 0; inset-inline: 0; padding: 14px var(--gutter) 0; pointer-events: none; }
.cap {
    position: relative;
    display: flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    height: 60px;
    margin-inline: auto;
    padding-inline: 22px 7px;
    border-radius: 30px;
    background: rgba(24, 24, 26, 0.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 40px -18px rgba(0, 0, 0, 0.9);
    pointer-events: auto;
    transition: height var(--duration-medium) var(--ease-smooth-out), background-color var(--duration-fast) var(--ease-smooth-out);
}
.top.is-scrolled .cap { background: rgba(20, 20, 22, 0.8); }
.brand { display: inline-flex; color: var(--ink); flex: none; }
.brand .wordmark-svg { width: auto; height: 28px; --livery: var(--red); }
.nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: 780px;
    margin-inline: 16px 8px;
    overflow: hidden;
    transition: max-width 420ms var(--ease-smooth-out), margin 420ms var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out), filter var(--duration-fast) var(--ease-smooth-out);
}
.nav a { position: relative; z-index: 1; flex: none; padding: 8px 13px; border-radius: 18px; color: var(--ink-2); font-size: 14.5px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: color var(--duration-quick) var(--ease-smooth-out); }
.nav a:hover, .nav a.is-active { color: var(--ink); }
.nav-pill { position: absolute; z-index: 0; top: 50%; left: 0; width: 0; height: 36px; margin-top: -18px; border-radius: 18px; background: rgba(233, 228, 216, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); opacity: 0; transform: translateX(0); transition: transform var(--tabs-dur) var(--tabs-ease), width var(--tabs-dur) var(--tabs-ease), opacity var(--duration-fast) var(--ease-smooth-out); pointer-events: none; }
.nav.has-active .nav-pill { opacity: 1; }
.nav-cta { display: none !important; }
.cap-cta { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 16px; border-radius: 23px; background: var(--red); color: #fff; font-size: 14.5px; font-weight: 600; white-space: nowrap; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: background-color var(--duration-quick) var(--ease-smooth-out), scale var(--duration-quick) var(--ease-smooth-out); }
.cap-cta:hover { background: #ee2f38; color: #fff; }
.cap-cta:active { scale: 0.96; }
/* the smart sticker's own page: a road-paint plate beside the red action, kept on every width (icon only on the
   narrowest phones, where its name stays in aria-label) */
.cap-sticker { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 8px; height: 46px; margin-inline-end: 6px; padding: 0 16px 0 14px; border-radius: 23px; background: var(--paint); color: var(--ground); font-size: 14.5px; font-weight: 700; white-space: nowrap; text-decoration: none; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1); transition: background-color var(--duration-quick) var(--ease-smooth-out), scale var(--duration-quick) var(--ease-smooth-out); }
.cap-sticker:hover { background: #fff; color: var(--ground); }
.cap-sticker:active { scale: 0.96; }
.cap-sticker .cs-ico { width: auto; height: 16px; flex: none; }
.cap-sticker .cs-short { display: none; }
.cap-cta .arr { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-fast) var(--ease-smooth-out); }
.cap-cta:hover .arr { transform: translateX(-3px); }
.top.is-compact .cap { height: 54px; }
.top.is-compact .nav { max-width: 0; margin-inline: 10px 0; opacity: 0; filter: blur(4px); }
.menu-btn { display: none; }

/* ── buttons, flags, plates ───────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    padding: 0 24px;
    border-radius: 8px;
    border: 1px solid transparent;
    font: 600 16px/1 var(--f-text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out), scale var(--duration-quick) var(--ease-smooth-out);
}
.btn:active { scale: 0.96; }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 2px 6px rgba(0, 0, 0, 0.45); }
.btn-red:hover { background: #ee2f38; color: #fff; }
.btn-line { border-color: var(--line-2); color: var(--ink); background: rgba(14, 14, 15, 0.4); }
.btn-line:hover { border-color: #5a5a60; background: rgba(233, 228, 216, 0.06); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14.5px; }
.btn .arr { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-fast) var(--ease-smooth-out); }
.btn:hover .arr, .more-link:hover .arr { transform: translateX(-3px); }
.flag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; }
.flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.flag-red { border-color: rgba(227, 38, 47, 0.55); color: #ffd9db; }
.flag-red::before { background: var(--red); }
.plate { display: inline-flex; flex-direction: column; flex: none; overflow: hidden; border-radius: 4px; background: #f5f2ee; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); text-align: center; vertical-align: middle; }
.plate .band { background: var(--red); color: #fff; font: 700 9px/1 var(--f-text); padding: 3px 7px 2px; white-space: nowrap; }
.plate .pn { color: #0b0b0c; font: 700 12px/1.25 var(--f-display); padding: 1px 7px 2px; white-space: nowrap; }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.tag-ok, .stamp { border: 1.5px solid var(--paint); color: var(--paint); font-weight: 700; rotate: -2deg; }
.chk { width: 9px; height: 9px; background: conic-gradient(var(--paint) 25%, #0b0b0c 0 50%, var(--paint) 0 75%, #0b0b0c 0) 0 0 / 4.5px 4.5px; border-radius: 1px; }
.pill-x { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill-x b { font-family: var(--f-display); font-weight: 700; }
.pill-x i { width: 6px; height: 6px; border-radius: 50%; background: rgba(233, 228, 216, 0.55); margin-inline-start: 4px; }
.pill-x.warn i { background: var(--amber); }
.pill-x.late { background: var(--red); border-color: var(--red); color: #fff; }
.ticks { display: grid; gap: 10px; margin-top: 28px; }
.ticks li { position: relative; padding-inline-start: 30px; color: var(--ink); font-size: 16px; line-height: 1.6; }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.8em; width: 16px; height: 3px; border-radius: 1px; background: var(--paint); opacity: 0.85; }
.demo-note { margin-top: 14px; color: var(--ink-3); font-size: 13px; }
.more-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--ink); font-weight: 600; text-decoration: none; }
.more-link .arr { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-fast) var(--ease-smooth-out); }

/* ── hero ─────────────────────────────────────────────────────────────────────────────────── */
.hero { position: relative; padding-top: calc(var(--header-h) + 14px); min-height: min(100svh, 980px); display: flex; flex-direction: column; justify-content: center; }
.hero-grid { padding-top: 36px; padding-bottom: 72px; }
.hero-copy { max-width: 980px; }
.hero h1 { font: 900 clamp(34px, 5.6vw + 14px, 84px) / 1.4 var(--f-display); letter-spacing: 0; }
.hero h1 .t-stagger-line { display: block; }
.lede { margin-top: 26px; max-width: 34em; color: var(--ink-2); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.85; }
.actions { margin-top: 36px; }
.actions-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 22px; color: var(--ink-3); font-size: 14px; }

/* km posts: white delineator posts with a red reflector on the road's shoulder; their labels sit beside them */
.posts { position: absolute; inset: 0; pointer-events: none; }
.post { position: absolute; }
.hero-posts .post {
    left: calc(max(var(--gutter), (100% - var(--maxw)) / 2) + var(--road-w) - var(--paint-w) * 2);
    display: grid;
    gap: 2px;
    padding-left: calc(var(--road-gap) * 0.55 + 12px);
    color: var(--ink-3);
    font-size: 14px;
    line-height: 1.45;
    transition: color var(--duration-slow) var(--ease-smooth-out);
}
.hero-posts .post::before { /* the post itself */
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 6px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(#e3262f 0 30%, #d9d4c8 30%);
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.6);
    transition: filter var(--duration-slow) var(--ease-smooth-out);
}
.hero-posts .km { color: var(--ink); font: 700 16px/1.3 var(--f-display); transition: color var(--duration-slow) var(--ease-smooth-out); }
.hero-posts .km.warn { color: #ffd98a; }
.hero-posts small { color: var(--ink-3); font-size: 13px; }
.post.is-lit { color: var(--ink-2); }
.post.is-lit::before { filter: brightness(1.35) drop-shadow(0 0 6px rgba(255, 236, 200, 0.55)); }
.hero-strip { display: none; }
.post-behind { top: calc(var(--car-top) - 96px); }
.post-ahead { top: calc(var(--car-top) + var(--car-w) * 2.13 + var(--beam-len) * 0.55); }
.post-far { top: calc(var(--car-top) + var(--car-w) * 2.13 + var(--beam-len) * 0.95); }

/* ── sections ─────────────────────────────────────────────────────────────────────────────── */
.sec { position: relative; padding-block: var(--sec-pad); }
.sec h2 { font: 800 clamp(30px, 4.2vw, 56px) / 1.36 var(--f-display); }
.sec-lede { margin-top: 18px; max-width: 36em; font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.85; }
.sec-head { max-width: 720px; }
.side-h { font: 700 18px/1.4 var(--f-display); }
.side-h small { display: block; margin-top: 4px; color: var(--ink-3); font: 400 14px/1.6 var(--f-text); }

/* picker */
.pick-grid { display: grid; gap: 56px; align-items: center; }
.picker { margin-top: 34px; display: grid; gap: 22px; }
.pick-row { display: grid; gap: 10px; }
.pick-label { color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 7px;
    border: 1px solid var(--line-2);
    background: rgba(14, 14, 15, 0.55);
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out), scale var(--duration-quick) var(--ease-smooth-out);
}
.chip:hover { border-color: #5a5a60; }
.chip:active { scale: 0.96; }
.chip img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; background: #fff; padding: 1px; }
.chip[aria-pressed="true"] { background: var(--paint); border-color: var(--paint); color: var(--ground); box-shadow: inset 0 3px 0 var(--red); font-weight: 600; }
.chip-select { position: relative; padding: 0; }
.chip-select select { appearance: none; height: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; padding-inline: 14px 34px; cursor: pointer; }
.chip-select .ic { position: absolute; inset-inline-end: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--ink-3); pointer-events: none; }
.chip-select select:focus { outline: none; }
.chip-select:focus-within { outline: 2px solid var(--paint); outline-offset: 3px; }
.chip-select select option { background: var(--raised); color: var(--ink); }
.chips.is-loading { opacity: 0.5; }
.pick-result { margin-top: 26px; color: var(--ink-2); font-size: 16.5px; }
.pick-result b { color: var(--ink); font-weight: 600; }

/* community */
.community .sec-head { margin-bottom: 48px; }
.com-grid { display: grid; gap: 40px; }
.thread { border: 1px solid var(--line); border-radius: 14px; background: rgba(21, 21, 22, 0.92); overflow: hidden; }
.thread-q { padding: 24px 24px 20px; border-bottom: 1px solid var(--line); }
.thread-q h3 { margin-top: 14px; font: 700 clamp(20px, 2.1vw, 26px) / 1.45 var(--f-display); }
.meta { margin-top: 8px; color: var(--ink-3); font-size: 14px; }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; }
.who b { font-weight: 600; }
.ava { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #3b3257; color: #f5f2ee; font-size: 12px; font-weight: 700; flex: none; }
.ava.a2 { background: #23413a; }
.ava.a3 { background: #4a2e2a; }
.answer { padding: 20px 24px; }
.answer + .answer { border-top: 1px solid var(--line); }
.answer p { margin-top: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.8; }
.answer.is-solved { background: rgba(233, 228, 216, 0.03); }
.solved { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 10px; border-radius: 6px; background: var(--paint); color: #0b0b0c; font-size: 13px; font-weight: 700; margin-inline-start: auto; }
.solved .t-success-check svg { width: 14px; height: 14px; }
.solved .t-success-check path { stroke: #0b0b0c; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.thread .demo-note { padding: 0 24px 18px; margin: 0; }
.threads { margin-top: 16px; border-top: 1px solid var(--line); }
.threads li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.threads b { color: var(--ink); font-weight: 600; font-size: 15.5px; line-height: 1.6; }
.threads small { grid-column: 1 / -1; color: var(--ink-3); font-size: 13px; }
.com-side .ticks { margin-top: 32px; }

/* garage */
.garage .sec-head { margin-bottom: 52px; }
.gar-grid { display: grid; gap: 36px; }
.dash { align-self: start; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(21, 21, 22, 0.94); }
.odo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.odo-l { width: 100%; color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
.odo-v { position: relative; display: inline-flex; direction: ltr; font: 800 clamp(34px, 3.6vw, 46px) / 1 var(--f-display); color: var(--ink); }
.odo-text { font-variant-numeric: tabular-nums; }
.js .odo-v.has-reels .odo-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.odo-reels { display: inline-flex; gap: 3px; }
.odo-reels:empty { display: none; }
.odo-cell { position: relative; display: block; width: 0.74em; height: 1.24em; overflow: hidden; border-radius: 5px; background: #070708; box-shadow: inset 0 0 0 1px #35353a, inset 0 10px 12px -8px rgba(0, 0, 0, 0.9), inset 0 -10px 12px -8px rgba(0, 0, 0, 0.9); }
.odo-cell.sep { width: 0.3em; background: none; box-shadow: none; }
.odo-strip { position: absolute; inset-inline: 0; top: 0; display: flex; flex-direction: column; will-change: transform; }
.odo-strip span { display: grid; place-items: center; height: 1.24em; font-variant-numeric: tabular-nums; }
.odo-cell.sep span { display: grid; place-items: end center; height: 1.1em; color: var(--ink-3); }
.odo-u { color: var(--ink-3); font-size: 16px; }
.dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.dash-stats dt { color: var(--ink-3); font-size: 13px; }
.dash-stats dd { margin: 2px 0 0; color: var(--ink); font-size: 15px; }
.dash-stats dd .num { font: 700 22px/1.3 var(--f-display); }
.dash-note { margin-top: 16px; color: var(--ink-3); font-size: 13px; line-height: 1.7; }
.log { position: relative; }
.log-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(96px, auto) 1fr auto;
    grid-template-areas: "km what cost" "km what tag";
    align-items: center;
    gap: 4px 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}
.log-row:first-child { border-top: 1px solid var(--line); }
.log-row .km { grid-area: km; color: var(--ink); font: 700 18px/1.3 var(--f-display); white-space: nowrap; }
.log-row .what { grid-area: what; color: var(--ink); font-weight: 600; font-size: 16px; line-height: 1.5; }
.log-row .what small { display: block; color: var(--ink-3); font-weight: 400; font-size: 13.5px; }
.log-row .cost { grid-area: cost; justify-self: end; color: var(--ink); font-size: 15px; white-space: nowrap; }
.log-row .cost .num { font: 700 17px/1.3 var(--f-display); }
.log-row .tag { grid-area: tag; justify-self: end; }
.log-row .pill-x { grid-area: cost / cost / tag / tag; justify-self: end; }
.log-row .post { /* the post on the road's shoulder, tied to the row by a short painted tick */
    position: absolute;
    top: 50%;
    left: calc(-1 * (var(--road-gap) + var(--paint-w) * 2 + 3px));
    width: 6px;
    height: 16px;
    margin-top: -8px;
    border-radius: 2px;
    background: linear-gradient(#e3262f 0 30%, #d9d4c8 30%);
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.6);
    transition: filter var(--duration-slow) var(--ease-smooth-out);
}
.log-row .post::after { content: ""; position: absolute; top: 50%; left: 12px; width: calc(var(--road-gap) - 22px); border-top: 1px dashed #4a4a50; }
.log-row.is-lit .post { filter: brightness(1.35) drop-shadow(0 0 6px rgba(255, 236, 200, 0.6)); }
.log-row.is-passed .km { color: var(--ink); }
.log-next .km, .log-next .what { color: var(--ink-2); }
.log-now .km { color: var(--ink); }
.log-now .what { color: var(--paint); }
.log-now .post { background: var(--paint); box-shadow: 0 0 0 3px rgba(233, 228, 216, 0.16), 0 3px 4px rgba(0, 0, 0, 0.6); }
.log-now.is-here .what { color: #fff; }
.papers { margin-top: 64px; }
.paper-list { margin-top: 18px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.paper-list li { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ic t p" "ic s p"; align-items: center; gap: 0 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.paper-list .ic { grid-area: ic; font-size: 22px; color: var(--ink-3); }
.paper-list b { grid-area: t; color: var(--ink); font-weight: 600; font-size: 15.5px; line-height: 1.5; }
.paper-list small { grid-area: s; color: var(--ink-3); font-size: 13px; }
.paper-list .pill-x { grid-area: p; }

/* market */
.market .sec-head { margin-bottom: 44px; }
.listing { display: grid; border: 1px solid var(--line); border-radius: 14px; background: rgba(21, 21, 22, 0.95); overflow: hidden; }
.listing-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0b0c; }
/* the model's banner, zoomed onto the car so its title and mark stay out of the frame */
.listing-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.48); transform-origin: 52% 90%; }
.ticks-row { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 30px; }
.listing-photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08); }
.listing-body { padding: 20px 22px 22px; }
.listing-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.listing-top h3 { font: 700 19px/1.45 var(--f-display); }
.price { color: var(--ink); font: 800 24px/1.2 var(--f-display); white-space: nowrap; }
.price small { font: 500 14px var(--f-text); color: var(--ink-3); }
.doc-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; height: 30px; padding: 0 11px; border-radius: 6px; border: 1.5px solid var(--paint); color: var(--paint); font-size: 13.5px; font-weight: 700; rotate: -2deg; }
.doc-badge .ic { font-size: 16px; }
.mini-log { margin-top: 16px; border-top: 1px solid var(--line); }
.mini-log li { display: grid; grid-template-columns: 104px 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.mini-log .km { font: 700 15px/1.3 var(--f-display); }

/* messages */
.msg-grid { display: grid; gap: 48px; align-items: center; }
.chat { border: 1px solid var(--line); border-radius: 14px; background: rgba(21, 21, 22, 0.95); overflow: hidden; }
.chat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); color: var(--ink); }
.chat-head b { font-weight: 600; }
.chat-body { display: grid; gap: 10px; padding: 20px; transition: opacity var(--duration-fast) var(--ease-smooth-out), filter var(--duration-fast) var(--ease-smooth-out); }
.bub { max-width: 82%; padding: 10px 14px 8px; border-radius: 14px; font-size: 15px; line-height: 1.7; color: var(--ink); }
.bub .tm { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }
.bub.in { justify-self: start; background: var(--raised); border-start-start-radius: 4px; }
.bub.out { justify-self: end; background: #5b1419; border-start-end-radius: 4px; }
.bub.out .tm { color: #f2b2b5; }
.warn-note { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 12px; border-radius: 8px; background: rgba(242, 185, 59, 0.08); color: #f5d792; font-size: 13.5px; }
.warn-note .ic { font-size: 17px; }
.chat-state { position: relative; min-height: 48px; margin: 0; padding: 0 20px; color: var(--ink-3); font-size: 13.5px; }
.chat-state .t-swap { display: flex; align-items: center; gap: 8px; transition: opacity var(--text-swap-dur) var(--text-swap-ease), transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease); }
.chat-state .t-swap[data-state="off"] { position: absolute; inset: 0 20px auto; opacity: 0; transform: translateY(var(--text-swap-translate-y)); filter: blur(var(--text-swap-blur)); color: #ffc9cc; }
.chat[data-open="false"] .t-swap[data-state="on"] { opacity: 0; transform: translateY(calc(var(--text-swap-translate-y) * -1)); filter: blur(var(--text-swap-blur)); }
.chat[data-open="false"] .t-swap[data-state="off"] { opacity: 1; transform: none; filter: none; }
.chat[data-open="false"] .chat-body { opacity: 0.32; filter: saturate(0.4); }
.privacy { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 15px; }
.t-toggle { position: relative; flex: none; width: 46px; height: 26px; padding: 3px; border: 0; border-radius: 13px; background: #3a3a3e; cursor: pointer; transition: background var(--toggle-track) var(--toggle-ease); direction: ltr; }
.t-toggle[data-on="true"] { background: var(--red); }
.t-toggle-thumb { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); translate: 0 0; will-change: translate; }
.t-toggle[data-on="true"] .t-toggle-thumb { translate: var(--toggle-travel) 0; }
.t-toggle.is-init[data-on="true"] .t-toggle-thumb { animation: t-toggle-on var(--toggle-dur) var(--toggle-ease) both; }
.t-toggle.is-init[data-on="false"] .t-toggle-thumb { animation: t-toggle-off var(--toggle-dur) var(--toggle-ease) both; }
@keyframes t-toggle-on { 0% { translate: 0 0; } 55% { translate: calc(var(--toggle-travel) + var(--toggle-ov1)) 0; } 80% { translate: calc(var(--toggle-travel) - var(--toggle-ov2)) 0; } 100% { translate: var(--toggle-travel) 0; } }
@keyframes t-toggle-off { 0% { translate: var(--toggle-travel) 0; } 55% { translate: calc(0px - var(--toggle-ov1)) 0; } 80% { translate: var(--toggle-ov2) 0; } 100% { translate: 0 0; } }

/* the smart sticker: a printed sticker on the glass and what the stranger sees */
.stk-grid { display: grid; gap: 48px; align-items: center; }
.stk-steps { display: grid; gap: 0; margin-top: 30px; border-top: 1px solid var(--line); counter-reset: stk; }
.stk-steps li { position: relative; display: grid; gap: 2px; padding: 14px 0 14px; padding-inline-start: 46px; border-bottom: 1px solid var(--line); counter-increment: stk; }
.stk-steps li::before { content: counter(stk); position: absolute; inset-inline-start: 0; top: 14px; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--paint); border-radius: 50%; color: var(--paint); font: 700 14px/1 var(--f-display); }
.stk-steps b { color: var(--ink); font-weight: 600; font-size: 16px; }
.stk-steps span { color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.sticker .actions-row { margin-top: 28px; }
.stk-visual { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 24px; }
.stk-sticker { display: grid; justify-items: center; gap: 10px; width: 200px; padding: 0 0 16px; overflow: hidden; border-radius: 16px; background: #f5f2ee; color: #0b0b0c; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 18px 34px -16px rgba(0, 0, 0, 0.85); rotate: -3deg; }
.stk-band { width: 100%; padding: 7px 0 6px; background: var(--red); color: #fff; font: 800 15px/1.2 var(--f-display); text-align: center; }
.stk-qr { display: block; width: 132px; height: 132px; margin-top: 6px; }
.stk-qr-svg { display: block; width: 100%; height: 100%; }
.stk-qr-svg path { fill: #0b0b0c; }
.stk-code { font: 700 17px/1 var(--f-display); letter-spacing: 0.06em; direction: ltr; }
.stk-hint { color: #55524e; font-size: 12.5px; font-weight: 600; }
.stk-scan { display: grid; gap: 8px; width: min(100%, 270px); margin-top: 34px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(21, 21, 22, 0.95); }
.stk-car { color: var(--ink); font: 700 15px/1.4 var(--f-display); }
.stk-preset { display: block; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink); font-size: 14.5px; }
.stk-preset.is-picked { border-color: var(--paint); background: var(--paint); color: var(--ground); font-weight: 600; }
.stk-preset.is-urgent { border-color: rgba(227, 38, 47, 0.6); color: #ffd9db; }
.stk-reply { display: grid; gap: 2px; margin-top: 6px; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: var(--raised); color: var(--ink); font-weight: 600; font-size: 15px; justify-self: end; }
.stk-reply small { color: var(--ink-3); font-size: 11.5px; font-weight: 500; }

/* centers */
.cen-grid { display: grid; gap: 40px; align-items: start; }
.cen-grid .spec { margin-top: 0; }
.spec { margin: 34px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.spec div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--ink); font-weight: 600; font-size: 15.5px; }
.spec dd { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.plans-wrap { margin-top: 96px; }
.plans-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.plans-head h3 { font: 800 clamp(26px, 3vw, 38px) / 1.2 var(--f-display); margin-inline-end: auto; }
.plans-note { color: var(--ink-3); font-size: 14px; }
.js .plans-note { display: none; }
.plans { display: grid; margin-top: 28px; border: 1px solid var(--line); border-radius: 14px; background: rgba(21, 21, 22, 0.95); overflow: hidden; }
.plan { position: relative; padding: 26px 24px 28px; }
.plan + .plan { border-top: 1px solid var(--line); }
.plan h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 700 20px/1.4 var(--f-display); }
.plan.rec { background: rgba(227, 38, 47, 0.045); }
.plan.rec::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--red); }
.plan .price { margin-top: 14px; font: 800 44px/1 var(--f-display); direction: rtl; }
.plan .price .num { display: inline-flex; direction: ltr; }
.plan .unit { color: var(--ink-3); font: 500 15px var(--f-text); }
.plan .yr { margin-top: 10px; color: var(--ink-3); font-size: 14px; }
.plan ul { margin-top: 20px; display: grid; gap: 8px; }
.plan li { position: relative; padding-inline-start: 24px; font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.plan li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.78em; width: 12px; height: 2px; background: var(--paint); opacity: 0.75; }
.plans-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.honest { max-width: 44em; color: var(--ink-3); font-size: 14px; line-height: 1.8; }
.t-tabs { position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: 9px; background: var(--tabs-bar-bg); border: 1px solid var(--line); }
.t-tab { position: relative; z-index: 1; appearance: none; border: 0; background: transparent; height: 36px; padding: 4px 16px; border-radius: 7px; color: var(--tabs-text-muted); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: color var(--tabs-dur) var(--tabs-ease); }
.t-tab small { font-size: 12px; font-weight: 500; opacity: 0.8; }
.t-tab:not([aria-selected="true"]):hover { color: var(--ink); }
.t-tab[aria-selected="true"] { color: var(--tabs-text-active); }
.t-tabs-pill { position: absolute; top: 3px; left: 0; height: 36px; width: 0; border-radius: 7px; background: var(--tabs-pill-bg); transform: translateX(0); transition: transform var(--tabs-dur) var(--tabs-ease), width var(--tabs-dur) var(--tabs-ease); will-change: transform, width; z-index: 0; pointer-events: none; }

/* facts */
.facts { padding-block: calc(var(--sec-pad) * 0.7); }
.facts-line { max-width: 22em; color: var(--ink-2); font: 600 clamp(24px, 3.1vw, 42px) / 1.6 var(--f-display); }
.facts-line b { color: var(--ink); font-weight: 800; }
.count { display: inline-flex; direction: ltr; vertical-align: bottom; }
.beta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 32px; color: var(--ink-3); font-size: 14.5px; }

/* faq */
.faq-grid { display: grid; gap: 40px; }
.faq-list { border-top: 1px solid var(--line); }
.t-acc { border-bottom: 1px solid var(--line); }
.t-acc h3 { font: inherit; }
.t-acc-head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; border: 0; background: none; color: var(--ink); font: 600 17px/1.6 var(--f-text); text-align: start; cursor: pointer; }
.t-acc-head:hover { color: #fff; }
.t-acc-chevron { display: inline-flex; flex: none; width: 22px; height: 22px; color: var(--ink-3); transform: scaleY(1); transform-origin: center; transition: transform var(--acc-chevron) var(--acc-ease); }
.t-acc-chevron svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc-panel-inner p { padding: 0 0 22px; color: var(--ink-2); font-size: 16px; line-height: 1.85; max-width: 40em; }
.t-acc-panel-inner a { color: var(--ink); }
.js .t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-collapse) var(--acc-ease); }
.js .t-acc[data-open="true"] .t-acc-panel { grid-template-rows: 1fr; transition: grid-template-rows var(--acc-expand) var(--acc-ease); }
.js .t-acc-panel-inner { overflow: hidden; opacity: 0; filter: blur(2px); transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease); }
.js .t-acc[data-open="true"] .t-acc-panel-inner { opacity: 1; filter: blur(0); transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-chevron { transform: scaleY(-1); }
.js .t-acc[data-open="false"] .t-acc-panel-inner { visibility: hidden; transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease), visibility 0s linear var(--acc-collapse); }

/* finale: the road ends in a parking bay */
.finale { padding-bottom: 0; }
.fin-grid { padding-bottom: 40px; }
.fin-copy { max-width: 640px; }
.finale .actions-row { margin-top: 32px; }
.bay {
    position: relative;
    z-index: 1;
    height: calc(var(--car-w) * 2.13 + 70px);
    margin-top: 24px;
    margin-left: max(var(--gutter), calc((100% - var(--maxw)) / 2));
    margin-right: auto;
    width: var(--road-w);
    background: #121213 url('../img/landing/asphalt.webp') repeat;
    background-size: 512px 512px;
}
.bay::before { /* the stop line across the road */
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: var(--paint-w);
    background: var(--paint);
    opacity: 0.84;
}
.bay::after { /* the bay: a painted U in the car's lane */
    content: "";
    position: absolute;
    top: 18px;
    bottom: 10px;
    left: calc(var(--paint-w) * 2 + 1px);
    right: calc(50% + var(--paint-w));
    border: var(--paint-w) solid var(--paint);
    border-top: 0;
    border-radius: 0 0 3px 3px;
    opacity: 0.84;
}
.bay-word { position: absolute; bottom: 16px; left: 25%; transform: translateX(-50%); color: var(--paint); opacity: 0.8; font: 900 calc(var(--road-w) * 0.105) / 1 var(--f-display); white-space: nowrap; }

/* footer: the end of the road. A painted lane line, the ways to get the app, and the wordmark painted large on
   the asphalt, sinking into it */
.foot { position: relative; z-index: 1; overflow: hidden; padding: 76px 0 0; background: #0a0a0b; }
.foot::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: repeating-linear-gradient(to left, var(--paint) 0 44px, transparent 44px 104px); opacity: 0.55; }
.foot .wrap { padding-left: 0; }
.foot-grid { display: grid; gap: 40px; }
.foot-line { max-width: 17em; color: var(--ink); font: 700 clamp(20px, 2vw, 26px) / 1.6 var(--f-display); }
.foot-get { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.get { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding-inline: 16px 18px; border-radius: 12px; background: #141416; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); text-decoration: none; transition: background-color var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-quick) var(--ease-smooth-out), scale var(--duration-quick) var(--ease-smooth-out); }
.get:hover { background: #1b1b1e; box-shadow: inset 0 0 0 1px #5a5a60; color: var(--ink); }
.get:active { scale: 0.96; }
.get > .ic { width: 22px; height: 22px; color: var(--ink-2); }
.get span { display: grid; font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.get small { color: var(--ink-3); font-size: 11.5px; font-weight: 500; }
.get.is-soon { opacity: 0.55; cursor: default; }
.get.is-soon:hover { background: #141416; box-shadow: inset 0 0 0 1px var(--line-2); }
.foot-col { display: grid; align-content: start; gap: 6px; }
.foot-col h3 { margin-bottom: 8px; color: var(--ink); font: 700 15px/1.4 var(--f-display); }
.foot-col a { justify-self: start; padding: 3px 0; color: var(--ink-3); font-size: 15px; text-decoration: none; transition: color var(--duration-quick) var(--ease-smooth-out); }
.foot-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.foot-col .mail { color: var(--ink); font-weight: 600; }
.foot-note { margin-top: 4px; max-width: 22em; color: var(--ink-3); font-size: 13.5px; line-height: 1.75; }
.foot-base { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 60px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13.5px; }
.to-top { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; color: var(--ink); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.to-top .ic { width: 18px; height: 18px; transition: transform var(--duration-fast) var(--ease-smooth-out); }
.to-top:hover { color: #fff; }
.to-top:hover .ic { transform: translateY(-3px); }
.foot-mark { width: min(100% - 2 * var(--gutter), var(--maxw)); margin: 44px auto 0; line-height: 0; color: rgba(233, 228, 216, 0.92); -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 88%); mask-image: linear-gradient(to bottom, #000 20%, transparent 88%); pointer-events: none; }
.foot-mark .wordmark-svg { display: block; width: 100%; height: auto; margin-bottom: -9%; --livery: var(--red); }

/* ── phone previews: the app as it is today (dark theme of «Rosso») ───────────────────────── */
.stage { position: relative; margin: 0; display: flex; justify-content: center; }
.phone {
    --pb: #0b0b0c; --pc: #121213; --pr: #1a1a1c; --pl: #2a2a2d; --pls: #3a3a3e; --pt: #f5f2ee; --pt2: #b9b5af; --pt3: #9c9994; --pred: #ff5a62; --pyel: #f2b93b; --pgrn: #4fcb8a; --pav: #3b3257;
    --dock-bg: rgba(36, 36, 38, 0.62); --dock-line: rgba(255, 255, 255, 0.17); --dock-on: rgba(0, 0, 0, 0.4); --lit-bg: #f4f1ec; --lit-t: #141414; --lit-t3: #6a6661; --fab-bg: rgba(10, 10, 11, 0.55);
    position: relative;
    width: 304px;
    padding: 9px;
    border-radius: 44px;
    background: #1b1b1d;
    box-shadow: 0 0 0 1px #3a3a3e, 0 0 0 7px #0e0e0f, 0 0 0 8px #2a2a2d, 0 40px 80px -30px rgba(0, 0, 0, 0.9);
    font-family: var(--f-text);
}
.ps { position: relative; height: 640px; overflow: hidden; border-radius: 35px; background: var(--pb); color: var(--pt); direction: rtl; font-size: 11px; line-height: 1.5; }
.ps::before { content: ""; position: absolute; top: 8px; left: 50%; z-index: 4; width: 72px; height: 19px; border-radius: 12px; background: #000; transform: translateX(-50%); }
.ps .ic { width: 1em; height: 1em; }
.ps .num { font-family: var(--f-num); }
.ps .plate { box-shadow: 0 0 0 1px var(--pls); }
.ps .plate .band { font-size: 6.5px; padding: 2.5px 6px 2px; }
.ps .plate .pn { font: 700 9.5px/1.3 var(--f-text); padding: 1px 6px 2px; }
.ps .plate.mini .band { font-size: 5.5px; padding: 2px 4px; }
.ps .plate.mini .pn { font: 700 8px/1.3 var(--f-num); padding: 0 4px 1px; }
.pbar { position: relative; display: flex; align-items: center; gap: 7px; padding: 33px 12px 9px; border-bottom: 1px solid var(--pl); }
.pbar::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 34px; height: 2px; background: var(--red); }
.pav { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pav); color: var(--pt); border: 2px solid var(--red); box-shadow: inset 0 0 0 2px var(--pb); font-size: 10.5px; font-weight: 700; }
.pav.sq { border-radius: 8px; border: 1px solid var(--pls); box-shadow: none; background: var(--pr); }
.pav .ic { font-size: 16px; }
.phi { flex: 1; min-width: 0; }
.phi b { display: block; overflow: hidden; font-size: 12.5px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.phi span { display: block; color: var(--pt3); font-size: 9.5px; white-space: nowrap; }
.pico { position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 22px; font-size: 16px; color: var(--pt); }
.pico .bdg { position: absolute; top: -3px; inset-inline-end: -4px; }
.pico .pdot { position: absolute; top: 0; inset-inline-end: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.bdg { min-width: 12px; height: 12px; padding: 0 3px; border-radius: 6px; background: var(--red); color: #fff; font: 700 8px/12px var(--f-num); text-align: center; box-shadow: 0 0 0 1.5px var(--pb); }
.plabel { padding: 9px 12px 4px; font-size: 11.5px; font-weight: 700; }
.pstrip { display: flex; gap: 6px; padding: 0 12px; overflow: hidden; }
.pchip { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--pl); border-radius: 8px; background: var(--pc); font-size: 10.5px; font-weight: 600; }
.pchip.on { border-color: var(--red); background: rgba(227, 38, 47, 0.09); }
.sdot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--pyel); }
.sdot.red { background: var(--red); }
.pcard { margin: 8px 10px 0; border: 1px solid var(--pl); border-radius: 8px; background: var(--pc); }
.pcar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 11px 9px; border-bottom: 1px solid var(--pl); }
.pcar-t { min-width: 0; }
.pcar b { display: block; font-size: 13px; line-height: 1.35; }
.pcar small { display: block; margin-bottom: 4px; color: var(--pt3); font-size: 9.5px; }
.pthumb { flex: none; width: 92px; height: 52px; border-radius: 5px; object-fit: cover; background: #18181a; box-shadow: 0 0 0 1px var(--pl); }
.podo { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 11px; border-bottom: 1px solid var(--pl); }
.podo .lbl { color: var(--pt3); font-size: 9.5px; }
.podo .big { direction: ltr; text-align: right; font: 700 30px/1.1 var(--f-num); }
.podo .big small { margin-inline-start: 4px; color: var(--pt3); font: 400 10px var(--f-text); }
.podo .cost { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; color: var(--pt2); font-size: 9.5px; }
.podo .cost b { color: var(--pt); font-size: 13px; }
.gauge { flex: none; width: 88px; overflow: visible; }
.gauge .gz { fill: none; stroke-width: 6.5; stroke-dasharray: 1.5 3.2; }
.gz.r { stroke: var(--red); } .gz.y { stroke: var(--pyel); } .gz.g { stroke: var(--pgrn); }
.gauge .nd { stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; }
.gauge .hub { fill: var(--pc); stroke: var(--pt); stroke-width: 2; }
.gauge text { fill: var(--pt); font-family: var(--f-num); font-weight: 700; }
.pnext { padding: 8px 11px 9px; }
.pnext .row2 { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; }
.pnext .row2 em { color: var(--pred); font-style: normal; font-weight: 700; white-space: nowrap; }
.pticks { display: flex; height: 14px; margin-top: 6px; }
.pticks i { display: block; height: 100%; }
.pticks .t1 { width: 26%; background: repeating-linear-gradient(90deg, var(--red) 0 1.5px, transparent 1.5px 5px); }
.pticks .t2 { width: 20%; background: repeating-linear-gradient(90deg, var(--pyel) 0 1.5px, transparent 1.5px 5px); }
.pticks .t3 { flex: 1; background: repeating-linear-gradient(90deg, var(--pls) 0 1.5px, transparent 1.5px 5px); }
.pbtns { display: flex; gap: 6px; padding: 0 11px 10px; }
.pbtn { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 11px; border: 1px solid var(--pls); border-radius: 5px; font-size: 10px; font-weight: 700; }
.pbtn.red { background: var(--red); border-color: var(--red); color: #fff; }
.phead { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--pl); }
.phead b { display: block; font-size: 12px; line-height: 1.35; }
.phead small { display: block; color: var(--pt3); font-size: 9.5px; }
.prem { display: flex; align-items: center; gap: 8px; padding: 8px 11px; }
.prem + .prem { border-top: 1px solid var(--pl); }
.prem .ico { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--pt2); font-size: 15px; }
.prem .tx { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; line-height: 1.4; }
.prem .tx small { display: block; color: var(--pt3); font-size: 9px; font-weight: 400; }
.pill { padding: 1px 7px; border-radius: 4px; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.pill-late { background: var(--red); color: #fff; }
.pill-warn { border: 1px solid var(--pls); color: var(--pt); font-weight: 600; }
.pill-warn i { display: inline-block; width: 5px; height: 5px; margin-inline-start: 5px; border-radius: 50%; background: var(--pyel); vertical-align: 1px; }
.psw { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 2px; height: 44px; margin: 10px 10px 0; padding: 2px; border: 1px solid var(--pl); border-radius: 22px; background: var(--pc); }
.psw .seg { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 7px; border-radius: 20px; font-size: 10.5px; font-weight: 700; }
.psw .seg b { display: block; overflow: hidden; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.psw .seg small { display: block; color: var(--pt3); font-size: 8px; font-weight: 400; line-height: 1.25; }
.psw .seg-t { min-width: 0; }
.psw .seg.lit { background: var(--lit-bg); color: var(--lit-t); box-shadow: inset 0 2px 0 var(--red); }
.psw .seg.lit small { color: var(--lit-t3); }
.psw .ava { width: 28px; height: 28px; font-size: 9.5px; background: var(--pav); }
.psw .ava.w { background: rgba(127, 127, 127, 0.28); color: var(--lit-t); font-size: 15px; }
.pbr { display: flex; gap: 6px; padding: 0 10px; overflow: hidden; }
.pbc { position: relative; flex: none; width: 92px; padding: 7px 8px; border: 1px solid var(--pl); border-radius: 8px; background: var(--pc); font-size: 10px; line-height: 1.4; }
.pbc.on { border-color: var(--red); background: rgba(227, 38, 47, 0.07); }
.pbc > .ic { display: block; margin-bottom: 3px; color: var(--pred); font-size: 15px; }
.pbc b { display: block; font-size: 10.5px; }
.pbc small { display: block; color: var(--pt3); font-size: 9px; }
.pbc .bdg { position: absolute; top: 6px; inset-inline-end: 6px; }
.pbc .rt { direction: ltr; text-align: right; color: var(--pt); font: 700 10px var(--f-num); }
.pbc .rt .ic { display: inline-block; margin-right: 2px; color: var(--pyel); fill: currentColor; stroke: none; font-size: 9px; vertical-align: -1px; }
.pplan .pn2 { display: flex; justify-content: space-between; align-items: center; padding: 9px 11px 0; font-size: 11.5px; font-weight: 700; }
.pplan .pn2 .pbtn { height: 22px; padding: 0 9px; font-size: 9.5px; }
.pplan .pticks { margin: 8px 11px 0; }
.pplan .pt2 { padding: 5px 11px 9px; color: var(--pt3); font-size: 9.5px; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 10px; }
.ptile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; height: 56px; padding: 8px; border: 1px solid var(--pl); border-radius: 8px; background: var(--pc); font-size: 10px; font-weight: 600; line-height: 1.3; }
.ptile .ic { color: var(--pt2); font-size: 18px; }
.ptile.dash { border-style: dashed; background: transparent; color: var(--pt2); }
.ptile .bdg { position: absolute; top: 6px; inset-inline-start: 7px; }
.dock { position: absolute; z-index: 3; inset-inline: 9px; bottom: 10px; display: flex; align-items: center; gap: 7px; }
.dbar { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; min-width: 0; height: 54px; padding: 3px; border: 1px solid var(--dock-line); border-radius: 27px; background: var(--dock-bg); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid transparent; border-radius: 24px; color: var(--pt2); font-size: 8.5px; font-weight: 700; line-height: 1.3; }
.slot .ic { font-size: 18px; }
.slot.on { background: var(--dock-on); border-color: var(--dock-line); color: var(--pred); }
.slot .ib { position: relative; display: block; line-height: 0; }
.slot .ib .bdg { position: absolute; top: -5px; inset-inline-end: -8px; }
.slot .ib .rd { position: absolute; top: -3px; inset-inline-end: -5px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1.5px var(--pb); }
.fab { position: relative; flex: none; width: 50px; height: 50px; border: 1px solid var(--dock-line); border-radius: 50%; background: var(--fab-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fab > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fab .lap { position: absolute; inset: 0; animation: lapping 7s linear infinite; }
.fab .lap i { position: absolute; top: 1px; left: 50%; width: 6px; height: 10px; margin-left: -3px; border-radius: 3px; background: #fff; border: 1px solid #0b0b0c; }
.fab .lap i::after { content: ""; position: absolute; left: 1px; right: 1px; top: 2px; height: 2.5px; border-radius: 1px; background: #0b0b0c; }
@keyframes lapping { to { transform: rotate(360deg); } }

/* ── the arrival: one authored moment at first paint, in CSS so it never waits for the script ─
   The car drives in from the top with its lights coming on and brakes; the copy rises with the
   texts-reveal tokens (12px, 3px blur, 500ms smooth-out, 40ms apart) as the car settles. */
@media (prefers-reduced-motion: no-preference) {
    .car { animation: car-in 1150ms cubic-bezier(0.16, 1, 0.3, 1) 80ms backwards; }
    .car-beam { animation: lights-on 620ms linear 40ms backwards; }
    .car-glow { animation: brake-flash 900ms var(--ease-smooth-out) 1000ms; }
    .hero .t-stagger-line { animation: t-rise var(--stagger-dur) var(--stagger-ease) backwards; }
    .hero .t-stagger-line--1 { animation-delay: 560ms; }
    .hero .t-stagger-line--2 { animation-delay: calc(560ms + var(--stagger-stagger)); }
    .hero .t-stagger-line--3 { animation-delay: calc(560ms + var(--stagger-stagger) * 3); }
    .hero .t-stagger-line--4 { animation-delay: calc(560ms + var(--stagger-stagger) * 5); }
    .hero-note, .hero-strip, .hero-posts { animation: fade-in var(--duration-very-slow) var(--ease-smooth-out) 980ms backwards; }
}
@keyframes car-in { from { transform: translateY(-46vh); } to { transform: none; } }
@keyframes lights-on { 0% { opacity: 0; } 35% { opacity: 0.7; } 50% { opacity: 0.25; } 100% { opacity: 1; } }
@keyframes brake-flash { 0%, 100% { opacity: 0.55; } 25%, 70% { opacity: 1; } }
@keyframes t-rise { from { opacity: 0; transform: translateY(var(--stagger-distance)); filter: blur(var(--stagger-blur)); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── transitions.dev: texts reveal, success check, number pop-in ──────────────────────────── */
.js.motion .reveal { opacity: 0; transform: translateY(var(--stagger-distance)); filter: blur(var(--stagger-blur)); transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease); }
.js.motion .reveal + .reveal { transition-delay: var(--duration-micro); }
.js.motion .reveal.is-in { opacity: 1; transform: none; filter: none; }

.t-success-check { display: inline-block; transform-origin: center; opacity: 0; will-change: transform, opacity, filter; }
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path { stroke-dasharray: 14; stroke-dashoffset: 14; }
.t-success-check[data-state="in"] { animation: t-check-fade var(--check-opacity-dur) var(--check-ease-opacity) forwards, t-check-rotate var(--check-rotate-dur) var(--check-ease-rotate) forwards, t-check-blur var(--check-blur-dur) var(--check-ease-out) forwards, t-check-bob var(--check-bob-dur) var(--check-ease-bob) forwards; }
.t-success-check[data-state="in"] svg path { animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards; }
html:not(.js) .t-success-check, .js:not(.motion) .t-success-check { opacity: 1; }
html:not(.js) .t-success-check svg path, .js:not(.motion) .t-success-check svg path { stroke-dashoffset: 0; }
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-blur { from { filter: blur(var(--check-blur-from)); } to { filter: blur(0); } }
@keyframes t-check-bob { from { translate: 0 var(--check-y-amount); } to { translate: 0 0; } }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

@keyframes t-digit-pop-in { 0% { transform: translate(calc(var(--digit-distance) * var(--digit-dir-x)), calc(var(--digit-distance) * var(--digit-dir-y))); opacity: 0; filter: blur(var(--digit-blur)); } 100% { transform: translate(0, 0); opacity: 1; filter: blur(0); } }
.t-digit-group { display: inline-flex; align-items: baseline; }
.t-digit { display: inline-block; will-change: transform, opacity, filter; }
.t-digit-group.is-animating .t-digit { animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both; }
.t-digit-group.is-animating .t-digit[data-stagger="1"] { animation-delay: var(--digit-stagger); }
.t-digit-group.is-animating .t-digit[data-stagger="2"] { animation-delay: calc(var(--digit-stagger) * 2); }
.t-digit-group.is-animating .t-digit[data-same] { animation: none; }

.t-reel { display: inline-flex; align-items: center; height: var(--reel-cell); font-variant-numeric: tabular-nums; }
.t-reel-col { position: relative; height: var(--reel-cell); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); }
.t-reel-strip { display: flex; flex-direction: column; will-change: transform, filter; }
.t-reel-digit { height: var(--reel-cell); display: flex; align-items: center; justify-content: center; }

/* the transitions.dev generation overlay, reduced to its dots: none of the agent's measuring marks */
.t-gen-label, .t-gen-reticle, .t-gen-handle, .t-gen-guide:not(.t-gen-guide--scan) { display: none !important; }

/* ── no JS: the parts that need it stay out of the way ────────────────────────────────────── */
html:not(.js) .picker, html:not(.js) .t-tabs { display: none !important; }

/* ── larger screens ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .pick-grid, .com-grid, .msg-grid, .cen-grid, .faq-grid { gap: 56px; }
    .plans { grid-template-columns: repeat(3, 1fr); }
    .plan + .plan { border-top: 0; border-inline-start: 1px solid var(--line); }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .foot-brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .pick-grid { grid-template-columns: 1fr 340px; gap: 72px; }
    .com-grid { grid-template-columns: 1.45fr 1fr; gap: 56px; align-items: start; }
    .gar-grid { grid-template-columns: 320px 1fr; gap: 56px; align-items: start; }
    .dash { position: sticky; top: calc(var(--header-h) + 24px); }
    .listing-body { padding: 26px 28px 24px; }
    .msg-grid { grid-template-columns: 1fr 1fr; gap: 72px; }
    .stk-grid { grid-template-columns: 1fr 1fr; gap: 72px; }
    .cen-grid { grid-template-columns: 1fr 340px; grid-template-areas: "head phone" "spec phone"; gap: 34px 72px; }
    .cen-grid .sec-head { grid-area: head; }
    .cen-grid .spec { grid-area: spec; }
    .cen-grid .stage-center { grid-area: phone; }
    .faq-grid { grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; }
    .faq .sec-head { position: sticky; top: calc(var(--header-h) + 24px); }
    .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; }
    .foot-brand { grid-column: auto; }
}

/* below the width where the posts fit beside the headline, they become a short list under it */
@media (min-width: 1280px) {
    .listing { grid-template-columns: 1.3fr 1fr; }
    .listing-photo { aspect-ratio: auto; min-height: 100%; }
    .listing-photo img { transform: scale(1.45); transform-origin: 50% 82%; }
}
@media (max-width: 1179.98px) {
    .hero-posts { display: none; }
    .hero-strip { display: grid; gap: 10px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 30em; }
    .hero-strip li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding-inline-start: 20px; color: var(--ink-3); font-size: 14.5px; line-height: 1.5; }
    .hero-strip li::before { content: ""; position: absolute; inset-inline-start: 0; top: 4px; width: 6px; height: 15px; border-radius: 2px; background: linear-gradient(#e3262f 0 30%, #d9d4c8 30%); }
    .hero-strip .km { color: var(--ink); font: 700 15px/1.4 var(--f-display); }
    .hero-strip .km.warn { color: #ffd98a; }
}

/* ── phones and small tablets ─────────────────────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
    .hero { min-height: min(88svh, 820px); }
    .dash { display: contents; }
    .odo { position: sticky; z-index: 4; top: calc(var(--header-h) + 10px); padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #151516; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.9); }
    .odo-l { width: auto; margin-inline-end: auto; align-self: center; }
    .odo { gap: 8px; }
    .odo-v { font-size: clamp(26px, 8.4vw, 40px); }
    .dash-stats { order: 3; margin-top: 8px; }
    .dash-note { order: 4; margin-top: 0; }
    .log { order: 2; }
    .cap { width: 100%; height: 58px; padding-inline: 18px 7px; border-radius: 29px; }
    .cap-cta { height: 44px; padding: 0 16px 0 14px; border-radius: 22px; margin-inline-start: auto; }
    .cap-sticker { height: 44px; border-radius: 22px; margin-inline-start: auto; }
    .cap-sticker + .cap-cta { margin-inline-start: 0; }
    .js .menu-btn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-inline-start: 4px; border: 0; border-radius: 22px; background: rgba(233, 228, 216, 0.08); color: var(--ink); cursor: pointer; }
    .menu-btn .ic { grid-area: 1 / 1; font-size: 22px; transition: opacity var(--duration-quick) linear, transform var(--duration-fast) var(--ease-smooth-out); }
    .menu-btn .ic-shut { opacity: 0; transform: rotate(-45deg) scale(0.6); }
    .top.is-menu .menu-btn .ic-open { opacity: 0; transform: rotate(45deg) scale(0.6); }
    .top.is-menu .menu-btn .ic-shut { opacity: 1; transform: none; }
    .nav-pill { display: none; }
    html:not(.js) .nav { display: none; }
    .js .nav {
        position: absolute;
        top: calc(100% + 8px);
        inset-inline: 0;
        display: grid;
        gap: 2px;
        max-width: none;
        margin: 0;
        padding: 8px;
        border-radius: 22px;
        background: #161618;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 24px 48px -16px rgba(0, 0, 0, 0.9);
        transform-origin: top center;
        opacity: 0;
        scale: 0.97;
        filter: none;
        visibility: hidden;
        transition: opacity var(--duration-quick) var(--ease-smooth-out), scale var(--duration-quick) var(--ease-smooth-out), visibility 0s linear var(--duration-quick);
    }
    .js .top.is-menu .nav { opacity: 1; scale: 1; visibility: visible; transition: opacity var(--duration-fast) var(--ease-smooth-out), scale var(--duration-fast) var(--ease-smooth-out); }
    .js .nav a { padding: 13px 16px; border-radius: 15px; font-size: 16px; }
    .js .nav a:hover { background: rgba(233, 228, 216, 0.06); }
    .js .nav .nav-cta { display: flex !important; justify-content: center; margin-top: 6px; background: var(--red); color: #fff; font-weight: 600; }
    .stage-home, .stage-center { margin-top: 8px; }
}
@media (max-width: 639.98px) {
    body { font-size: 16px; }
    .brand .wordmark-svg { height: 25px; }
    .cap { padding-inline-start: 16px; }
    .cap-cta { padding: 0 14px 0 12px; font-size: 14px; }
    .cap-sticker { padding: 0 13px 0 11px; font-size: 14px; }
    .cap-sticker .cs-long { display: none; }
    .cap-sticker .cs-short { display: inline; }
    .hero { min-height: auto; }
    .hero-grid { padding-top: 34px; padding-bottom: 56px; }
    .foot-get .get { flex: 1 1 140px; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
    .foot-brand, .foot-col:last-child { grid-column: 1 / -1; }
    .foot-base { margin-top: 44px; }
    .actions-row .btn { width: 100%; }
    .hero-posts { display: none; }
    .log-row { grid-template-columns: 1fr auto; grid-template-areas: "km cost" "what tag"; gap: 2px 12px; padding: 16px 0; }
    .log-row .pill-x { grid-area: tag; }
    .log-row .post::after { display: none; }
    .spec div { grid-template-columns: 1fr; gap: 2px; }
    .mini-log li { grid-template-columns: 1fr auto; }
    .mini-log li > span:not(.tag) { grid-column: 1 / -1; grid-row: 2; color: var(--ink-2); font-size: 14px; }
    .phone { width: 290px; }
    .thread-q, .answer { padding-inline: 18px; }
    .thread .demo-note { padding-inline: 18px; }
    .solved { margin-inline-start: 0; }
}

/* narrow phones: the red action drops its arrow and both pills tighten, so the sticker plate keeps its name down to
   350 px; only narrower screens show its glyph alone */
@media (max-width: 419.98px) {
    .cap-cta .arr { display: none; }
    .cap-cta { padding: 0 14px; }
    .cap-sticker { margin-inline-end: 5px; padding: 0 11px 0 10px; }
}
@media (max-width: 379.98px) {
    .cap { padding-inline: 14px 6px; }
    .brand .wordmark-svg { height: 23px; }
    .cap-sticker { gap: 6px; padding: 0 9px 0 8px; font-size: 13.5px; }
    .cap-cta { padding: 0 12px; font-size: 13.5px; }
    .js .menu-btn { width: 42px; height: 42px; margin-inline-start: 3px; }
}
@media (max-width: 349.98px) {
    .cap { padding-inline: 13px 6px; }
    .cap-sticker { width: 40px; height: 40px; margin-inline-end: 4px; padding: 0; }
    .cap-sticker .cs-short { display: none; }
    .cap-sticker .cs-ico { height: 18px; }
    .cap-cta { height: 40px; padding: 0 11px; font-size: 13px; }
    .js .menu-btn { width: 40px; height: 40px; margin-inline-start: 2px; }
}

/* under 380 px the 290 px phone previews are wider than their column: draw them smaller, whole */
@media (max-width: 379.98px) {
    .stage .phone { zoom: 0.78; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .t-stagger-line, .reveal, .hero-note, .hero-posts { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
    .t-success-check { animation: none !important; opacity: 1; }
    .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
    .t-toggle-thumb { animation: none !important; }
    .t-tabs-pill, .t-tab { transition: none !important; }
    .t-digit-group .t-digit { animation: none !important; }
    .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron { transition: none !important; }
    .t-reel-strip { transition: none !important; filter: none !important; }
    .fab .lap { animation: none; }
    .chat-state .t-swap, .chat-body { transition: none !important; }
}