/* =====================================================================
   GB Car Rental — landing page.
   Linked ONLY by index.html, after tokens.css and app.css. The :root
   block below deliberately overrides the monochrome tokens for this
   page alone, so the admin and driver portals are untouched.
   ===================================================================== */

:root {
    /* ---------- bold palette ---------- */
    --bg:           #0A0A0A;
    --surface:      #FAFAFA;
    --surface-2:    #141414;
    --line:         #262626;
    --line-light:   #E3E3E3;

    --fg:           #FAFAFA;
    --fg-muted:     #9A9A9A;
    --fg-on-light:  #0A0A0A;
    --fg-on-light-muted: #5A5A5A;

    --accent:       #FF3D00;
    --accent-fg:    #0A0A0A;   /* text ON vermillion — 5.58:1 */
    --accent-surface: #FFFFFF; /* white boxes sitting on a vermillion panel */
    --accent-dim:   #CC3100;   /* vermillion on a light panel — 5.02:1 */

    /* ---------- type ---------- */
    --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;

    /* ---------- shape ---------- */
    --r: 0px;
    --border-w: 2px;
    --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }

body.landing {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.landing section[id] { scroll-margin-top: 56px; }

.landing h1, .landing h2, .landing h3, .landing .num {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin: 0;
}

/* Everything is a hard rectangle. No radii anywhere on this page. */
.landing *, .landing *::before, .landing *::after { border-radius: 0 !important; }

/* ---------- panels ---------- */
.panel { padding: 96px 24px; }
.panel-dark   { background: var(--bg);        color: var(--fg); }
.panel-darker { background: var(--surface-2); color: var(--fg); }
.panel-light  { background: var(--surface);   color: var(--fg-on-light); }
.panel-accent { background: var(--accent);    color: var(--accent-fg); }
.inner        { max-width: 1160px; margin: 0 auto; }
.inner-narrow { max-width: 760px;  margin: 0 auto; }

/* ---------- type scale ---------- */
.display {
    font-size: clamp(2.6rem, 8.5vw, 6.4rem);
    text-transform: uppercase;
}
.section-title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    text-transform: uppercase;
    margin-bottom: 18px;
}
.eyebrow {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 20px;
}
.panel-light .eyebrow { color: var(--accent-dim); }
.panel-accent .eyebrow { color: var(--accent-fg); opacity: .92; }

.lede {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    color: var(--fg-muted);
    margin: 0 0 32px;
    max-width: 58ch;
}
.panel-light .lede { color: var(--fg-on-light-muted); }
.panel-accent .lede { color: var(--accent-fg); opacity: 1; }

.rule { height: var(--border-w); background: var(--accent); width: 72px; margin: 0 0 28px; }

/* ---------- buttons (override the pill .btn from app.css) ---------- */
.landing .btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    padding: 15px 28px;
    border: var(--border-w) solid transparent;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.landing .btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.landing .btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); }

.landing .btn-ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.landing .btn-ghost:hover { border-color: var(--fg); }
.panel-light .btn-ghost { color: var(--fg-on-light); border-color: var(--line-light); }
.panel-light .btn-ghost:hover { border-color: var(--fg-on-light); }

.landing .btn-invert { background: var(--fg); color: var(--fg-on-light); border-color: var(--fg); }
.landing .btn-invert:hover { background: transparent; color: var(--fg); }

.landing .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- nav ---------- */
.site-nav {
    position: sticky; top: 0; z-index: 900;
    height: 56px;
    background: rgba(10, 10, 10, .88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .site-nav { background: var(--bg); }
}
.nav-inner {
    max-width: 1160px; height: 100%; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; gap: 16px;
}
.nav-logo {
    font-family: var(--font-display); font-weight: 700; font-size: 18px;
    letter-spacing: -0.02em; text-transform: uppercase; color: var(--fg);
    text-decoration: none; margin-right: auto; white-space: nowrap;
}
.nav-logo .mark {
    background: var(--accent); color: var(--accent-fg);
    padding: 3px 7px; margin-right: 7px;
}

/* language toggle */
.lang-toggle { display: flex; border: 1px solid var(--line); flex-shrink: 0; }
.lang-toggle button {
    font-family: var(--font-body); font-size: 12px; font-weight: 600;
    letter-spacing: .06em; padding: 7px 13px; min-height: 44px;
    background: transparent; color: var(--fg-muted);
    border: none; cursor: pointer; transition: background .2s, color .2s;
}
.lang-toggle button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.lang-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.nav-cta { padding: 11px 16px !important; font-size: 13px !important; min-height: 44px; }
@media (max-width: 520px) { .nav-cta .long { display: none; } }

/* ---------- hero ---------- */
.hero { padding: 72px 24px 0; }
.hero .display { margin-bottom: 24px; }
.hero .display em { font-style: normal; color: var(--accent); }
.hero .lede { margin-bottom: 40px; }

/* budget tiles — price is the front door */
.price-tiles {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0; border: var(--border-w) solid var(--line); border-right: none;
    margin-bottom: 0;
}
.price-tile {
    border-right: var(--border-w) solid var(--line);
    padding: 26px 20px 24px;
    text-decoration: none; color: var(--fg);
    display: flex; flex-direction: column; gap: 4px;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.price-tile:hover, .price-tile:focus-visible {
    background: var(--accent); color: var(--accent-fg); text-decoration: none; outline: none;
}
.price-tile .model {
    font-family: var(--font-body); font-size: 12px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted);
}
.price-tile:hover .model, .price-tile:focus-visible .model { color: var(--accent-fg); }
.price-tile .amount {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.9rem, 5vw, 2.9rem); letter-spacing: -0.04em; line-height: 1;
}
.price-tile .per { font-size: 13px; color: var(--fg-muted); }
.price-tile:hover .per, .price-tile:focus-visible .per { color: var(--accent-fg); }

/* ---------- break-even calculator ---------- */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.calc-grid > * { min-width: 0; }
.calc-field { margin-bottom: 26px; }
.calc-field label {
    display: block; font-size: 12px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: 10px; color: var(--accent-fg);
}
.calc-input-wrap { display: flex; align-items: stretch; border: var(--border-w) solid var(--accent-surface); background: var(--accent-surface); }
.calc-input-wrap .prefix {
    display: flex; align-items: center; padding: 0 14px;
    font-family: var(--font-display); font-weight: 700; font-size: 20px;
    color: var(--fg-on-light); background: var(--accent-surface);
}
.calc-grid input[type="number"] {
    flex: 1; min-width: 0; border: none; background: var(--accent-surface);
    font-family: var(--font-display); font-weight: 700; font-size: 28px;
    color: var(--fg-on-light); padding: 12px 14px 12px 0; -moz-appearance: textfield;
}
.calc-grid input[type="number"]::-webkit-outer-spin-button,
.calc-grid input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-grid input:focus { outline: none; }
.calc-input-wrap:focus-within { box-shadow: 0 0 0 3px rgba(0,0,0,.35); }

.calc-cars { display: flex; flex-wrap: wrap; gap: 10px; }
.calc-cars button {
    font-family: var(--font-body); font-size: 13px; font-weight: 600;
    padding: 10px 16px; min-height: 44px;
    background: transparent; color: var(--accent-fg);
    border: var(--border-w) solid rgba(0,0,0,.3); cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.calc-cars button[aria-pressed="true"] { background: var(--accent-surface); color: var(--fg-on-light); border-color: var(--accent-surface); }
.calc-cars button:focus-visible { outline: 3px solid var(--accent-fg); outline-offset: 2px; }

.calc-out { border-left: var(--border-w) solid rgba(0,0,0,.28); padding-left: 40px; }
.calc-out .big {
    font-family: var(--font-display); font-weight: 700; line-height: .95;
    font-size: clamp(3.2rem, 11vw, 6rem); letter-spacing: -0.045em;
    display: block; margin-bottom: 6px;
}
.calc-out .big-label {
    font-size: 13px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; opacity: 1; display: block; margin-bottom: 28px;
}
.calc-rows { border-top: 1px solid rgba(0,0,0,.28); }
.calc-rows div {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.28);
    font-size: 15px;
}
.calc-rows div span:last-child { font-family: var(--font-display); font-weight: 700; }
.calc-rows div.keep { font-size: 17px; }
.calc-note { font-size: 13px; opacity: .92; margin: 18px 0 0; max-width: 46ch; }

/* ---------- included list ---------- */
.incl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.incl-grid ul { list-style: none; margin: 0; padding: 0; }
.incl-grid li {
    display: flex; gap: 14px; align-items: baseline;
    padding: 16px 0; border-bottom: 1px solid var(--line-light);
    font-size: 17px;
}
.incl-grid li .tick { color: var(--accent-dim); font-weight: 700; flex-shrink: 0; }
.incl-grid li strong { font-weight: 600; }
.incl-grid li .detail { display: block; font-size: 14px; color: var(--fg-on-light-muted); margin-top: 3px; }
.incl-except {
    margin-top: 34px; padding: 18px 20px;
    border-left: 4px solid var(--accent); background: #F0F0F0;
    font-size: 15px; color: var(--fg-on-light);
}

/* ---------- fleet panels (one car per viewport) ---------- */
.car-panel {
    min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center;
    padding: 80px 24px;
    border-top: 1px solid var(--line);
}
.car-panel:nth-child(even) { background: var(--surface-2); }
.car-grid {
    max-width: 1160px; margin: 0 auto; width: 100%;
    display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center;
}
.car-grid > * { min-width: 0; }
.car-panel:nth-child(even) .car-grid { direction: rtl; }
.car-panel:nth-child(even) .car-grid > * { direction: ltr; }

.car-name { font-size: clamp(2.2rem, 6vw, 4rem); text-transform: uppercase; margin-bottom: 20px; }

.car-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.car-price .rm {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 3.4rem); letter-spacing: -0.04em; color: var(--accent);
}
.car-price .per { font-size: 15px; color: var(--fg-muted); }
.car-sub {
    font-size: 15px; color: var(--fg-muted); margin: 0 0 26px;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.car-sub .sep { opacity: .4; }

.spec-strip {
    display: flex; flex-wrap: wrap; gap: 0;
    border: 1px solid var(--line); margin-bottom: 30px;
}
.spec-strip span {
    padding: 11px 16px; font-size: 13px; font-weight: 500; color: var(--fg-muted);
    border-right: 1px solid var(--line); flex: 1 1 auto; text-align: center; white-space: nowrap;
}
.spec-strip span:last-child { border-right: none; }

.car-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Line art, not photography. The three cars we used to show here were other
   people's photos, shot in three places under three lights. These are drawn
   on one 800x400 grid with a common ground line and a common stroke weight,
   so they read as one technical set. They are deliberately generic profiles
   -- a sedan and an MPV -- and never claim to depict a specific vehicle. */
.car-shot { position: relative; }
.car-art {
    display: block; width: 100%; height: auto;
    aspect-ratio: 2 / 1; overflow: visible;
    stroke-linecap: round; stroke-linejoin: round;
}
.car-art .ca-body  { stroke: var(--fg); stroke-width: 2.6; }
.car-art .ca-tyre  { stroke: var(--fg); stroke-width: 2.6; }
.car-art .ca-rim   { stroke: var(--accent); stroke-width: 2.6; }
.car-art .ca-glass { stroke: var(--fg-muted); stroke-width: 1.6; fill: rgba(250,250,250,.045); }
.car-art .ca-line  { stroke: var(--fg-muted); stroke-width: 1.6; }
/* The one vermillion note in the drawing, besides the rims: the car sits on
   a ground line rather than floating. */
.car-art .ca-ground { stroke: var(--accent); stroke-width: 2; opacity: .85; }

/* ---------- stats band ---------- */
.stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border: var(--border-w) solid var(--line); border-right: none;
}
.stat { border-right: var(--border-w) solid var(--line); padding: 34px 22px; }
.stat .num {
    font-size: clamp(2.6rem, 7vw, 4.4rem); letter-spacing: -0.045em;
    color: var(--accent); display: block; margin-bottom: 8px;
}
.stat .label {
    font-size: 12px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--fg-muted);
}

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: var(--border-w) solid var(--line-light); }
.step { padding: 28px 24px 30px; border-right: 1px solid var(--line-light); }
.step:last-child { border-right: none; }
.step .n {
    font-family: var(--font-display); font-weight: 700; font-size: 13px;
    letter-spacing: .1em; color: var(--accent-dim); display: block; margin-bottom: 14px;
}
.step h3 { font-size: 21px; margin-bottom: 8px; text-transform: none; letter-spacing: -0.02em; }
.step p { margin: 0; font-size: 15px; color: var(--fg-on-light-muted); }
.step .when {
    display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    background: var(--fg-on-light); color: var(--surface); padding: 4px 9px;
}

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote { border: 1px solid var(--line); padding: 28px 24px; display: flex; flex-direction: column; }
.quote blockquote { margin: 0 0 20px; font-size: 18px; line-height: 1.45; }
.quote blockquote::before { content: '\201C'; color: var(--accent); }
.quote blockquote::after  { content: '\201D'; color: var(--accent); }
.quote .who { margin-top: auto; font-size: 13px; color: var(--fg-muted); letter-spacing: .04em; }
.quote .who strong { color: var(--fg); font-weight: 600; letter-spacing: 0; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-light); }
.faq details { border-bottom: 1px solid var(--line-light); }
.faq summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 24px 48px 24px 0;
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.05rem, 2.4vw, 1.35rem); letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
    content: ''; position: absolute; right: 4px; top: 50%;
    width: 16px; height: 2px; background: var(--accent);
}
.faq summary::before { transform: rotate(90deg); transition: transform .25s var(--ease); }
.faq details[open] summary::before { transform: rotate(0deg); }
.faq details > p { margin: 0; padding: 0 48px 26px 0; font-size: 16px; color: var(--fg-on-light-muted); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- trust block ---------- */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: var(--border-w) solid var(--line); border-right: none; }
.trust-cell { border-right: var(--border-w) solid var(--line); padding: 26px 22px; }
.trust-cell .k {
    font-size: 11px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 10px;
}
.trust-cell .v { font-size: 16px; line-height: 1.45; }
.trust-cell .v a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* A visible placeholder for facts the owner still has to supply. */
.todo {
    background: var(--accent); color: var(--accent-fg);
    padding: 1px 7px; font-size: .85em; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    /* These hold whole sentences until the owner fills them in, so they
       must be allowed to wrap rather than push the page sideways. */
    display: inline; overflow-wrap: anywhere;
}

/* ---------- apply form ---------- */
.form-wrap { max-width: 620px; margin: 0 auto; }
.landing .form-group label { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.landing .form-group input,
.landing .form-group select {
    border: var(--border-w) solid var(--line-light);
    font-size: 17px; padding: 14px 16px; background: #fff; font-family: var(--font-body);
}
.landing .form-group input:focus,
.landing .form-group select:focus { border-color: var(--accent); box-shadow: none; outline: 3px solid rgba(255,61,0,.22); }
.landing .form-group .err { display: block; margin-top: 7px; font-size: 14px; color: #B3290A; font-weight: 500; }
.form-note-top { font-size: 14px; color: var(--fg-on-light-muted); margin: 0 0 24px; }
.form-feedback { margin-top: 20px; padding: 16px; font-size: 16px; font-weight: 500; border: var(--border-w) solid; }
.form-feedback.is-ok    { background: #EAF6EE; color: #146B33; border-color: #146B33; }
.form-feedback.is-error { background: #FDECE7; color: #B3290A; border-color: #B3290A; }

/* ---------- sticky WhatsApp bar ---------- */
.wa-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--accent); color: var(--accent-fg);
    font-family: var(--font-body); font-weight: 700; font-size: 16px;
    padding: 16px 20px; text-decoration: none;
    border-top: var(--border-w) solid var(--bg);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.wa-bar:hover { background: var(--accent-dim); text-decoration: none; }
.wa-bar svg { width: 21px; height: 21px; fill: currentColor; flex-shrink: 0; }
.wa-bar .reply { font-weight: 400; opacity: 1; font-size: 14px; }
@media (max-width: 600px) { .wa-bar .reply { display: none; } }
body.landing { padding-bottom: 64px; }

/* ---------- footer ---------- */
.site-footer { background: var(--bg); border-top: 1px solid var(--line); padding: 34px 24px; font-size: 13px; color: var(--fg-muted); }
.site-footer .inner { display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--fg-muted); }

/* ---------- motion ---------- */
[data-reveal] {
    opacity: 0; transform: translateY(20px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: .07s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .14s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .21s; }

/* Scroll-driven car reveal. Native CSS, runs off the main thread, and
   simply does not apply where unsupported. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        @keyframes car-rise { from { transform: translateY(28px) scale(.985); } to { transform: none; } }
        .car-art {
            animation: car-rise linear both;
            animation-timeline: view();
            animation-range: entry 15% cover 42%;
        }
        /* The outline draws itself as the panel scrolls in. pathLength="1"
           on the body path normalises the dash maths, so no JS is needed to
           measure it. Scoped to the body only -- glass and wheels just rise,
           which keeps the effect from turning into a cartoon. */
        @keyframes car-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
        .car-art .ca-body {
            stroke-dasharray: 1; stroke-dashoffset: 0;
            animation: car-draw linear both;
            animation-timeline: view();
            animation-range: entry 20% cover 46%;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .landing * { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
    .panel { padding: 72px 22px; }
    .calc-grid { grid-template-columns: 1fr; gap: 40px; }
    .calc-out { border-left: none; border-top: var(--border-w) solid rgba(0,0,0,.28); padding-left: 0; padding-top: 32px; }
    .car-grid { grid-template-columns: 1fr; gap: 36px; }
    .car-panel:nth-child(even) .car-grid { direction: ltr; }
    .car-shot { order: -1; }
    .quotes { grid-template-columns: 1fr; }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .step:nth-child(2) { border-right: none; }
    .step:nth-child(-n+2) { border-bottom: 1px solid var(--line-light); }
    .trust-grid { grid-template-columns: repeat(3, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(-n+2) { border-bottom: var(--border-w) solid var(--line); }
}

@media (max-width: 767px) {
    .panel { padding: 56px 18px; }
    .hero { padding: 44px 18px 0; }
    body.landing { font-size: 16px; }

    /* Price tiles stack; they are the primary entry point so they stay large. */
    .price-tiles { grid-template-columns: 1fr; border-right: var(--border-w) solid var(--line); }
    .price-tile { border-right: none; border-bottom: var(--border-w) solid var(--line); flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 18px; }
    .price-tile:last-child { border-bottom: none; }

    .incl-grid { grid-template-columns: 1fr; gap: 0; }
    .steps { grid-template-columns: 1fr; }
    .step { border-right: none; border-bottom: 1px solid var(--line-light); }
    .step:last-child { border-bottom: none; }
    .trust-grid { grid-template-columns: 1fr; border-right: var(--border-w) solid var(--line); }
    .trust-cell { border-right: none; border-bottom: var(--border-w) solid var(--line); }
    .trust-cell:last-child { border-bottom: none; }
    .stats-grid { grid-template-columns: 1fr 1fr; }

    .car-panel { min-height: 0; padding: 56px 18px; }
    .spec-strip span { flex: 1 1 50%; border-bottom: 1px solid var(--line); }
    .car-ctas { flex-direction: column; }
    .car-ctas .btn { width: 100%; }

    .calc-out .big { font-size: clamp(2.8rem, 16vw, 4rem); }
}

/* Safety net: no grid or flex child may force the page wider than the
   viewport. Cheap insurance against a long unbreakable string. */
.incl-grid > *, .stats-grid > *, .steps > *, .trust-grid > *, .quotes > *, .price-tiles > * { min-width: 0; }

/* Narrow phones: the logo wordmark yields so the language toggle and the
   single CTA both stay on one 56px row at their full 44px touch height. */
@media (max-width: 460px) {
    .nav-inner { gap: 10px; padding: 0 14px; }
    .nav-logo .word { display: none; }
    .nav-logo .mark { margin-right: 0; }
    .lang-toggle button { padding: 7px 10px; }
    .nav-cta { padding: 11px 13px !important; }
}

/* Deposit is a headline fact, not a footnote — competitors hide theirs. */
.car-sub .dep { color: var(--fg); font-weight: 600; }
.car-sub .dep-note { color: var(--fg-muted); font-size: 13px; }
.car-sub .dep-note::before { content: "\00b7\00a0"; }