/* ═══════════════════════════════════════════════════════════════════
   EXUSIA MOBILITY · theme.css · "night drive"
   Dark by default (the approved concept), with a polished light mode.
   Signature: the night hero with its road grid and floating figures.
   The hero, the call-to-action band and "night" slabs stay dark in both
   modes; everything else follows the visitor's choice.
   Type: Unbounded (display), Manrope (text). Accent: volt blue and cyan.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────── */
:root {
  --f-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --f-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 600;
  --display-track: -0.03em;

  /* light */
  --bg: #EEF3F9; --bg-2: #E4EBF4;
  --surface: #FFFFFF; --surface-2: #F2F6FB; --surface-3: #E3EBF4;
  --line: rgba(12, 34, 64, .09); --line-2: rgba(12, 34, 64, .17);
  --ink: #07111D; --ink-2: #3A4B5F; --ink-3: #5A6B7E;
  --volt: #4FA8F2; --volt-2: #6BB8F6; --volt-ink: #04121F;
  --brand: #1769B8; --brand-2: #0F5A9F; --brand-ink: #FFFFFF; --brand-soft: rgba(30, 120, 210, .10);
  --cyan: #0B86AE; --hl: #0B78A8;
  --ok: #0E8A55; --ok-soft: rgba(14, 138, 85, .12);
  --pet: #D9561A; --pet-soft: rgba(217, 86, 26, .12);
  --warn: #9A6206; --warn-soft: rgba(214, 140, 20, .14);
  --bad: #C2341D; --bad-soft: rgba(194, 52, 29, .10);
  --glass: rgba(255, 255, 255, .74); --glass-line: rgba(12, 34, 64, .10);
  --glass-btn: rgba(12, 34, 64, .05);
  --island: rgba(10, 16, 26, .86); --island-ink: #F3F7FB; --island-ink-2: rgba(243, 247, 251, .62); --island-on: rgba(255, 255, 255, .13);
  --pic: radial-gradient(80% 70% at 50% 85%, #DCE7F3, #F4F8FC 72%);
  --tile: linear-gradient(180deg, #FFFFFF, #F3F7FC);
  --shadow-card: 0 1px 2px rgba(12, 34, 64, .05), 0 12px 30px -18px rgba(12, 34, 64, .25);
  --map-grid: rgba(12, 34, 64, .06);

  /* night (used by the hero, CTA band and night slabs in both modes) */
  --n-bg: #05070B; --n-s1: #0B1018; --n-s2: #111925; --n-s3: #18222F;
  --n-line: rgba(150, 185, 230, .10); --n-line-2: rgba(150, 185, 230, .18);
  --n-ink: #EEF4FB; --n-ink-2: #A2B3C7; --n-ink-3: #8193A8; --n-cyan: #7BE3FF; --n-ok: #5BE3A0; --n-pet: #FF7A3D;
  --slab: #0A121D; --slab-ink: var(--n-ink); --slab-ink-2: var(--n-ink-2); --slab-line: var(--n-line); --slab-surface: rgba(255, 255, 255, .04);

  --r-xl: 40px; --r-l: 28px; --r-m: 20px; --r-card: 24px; --r-field: 16px;
  --wrap: 1280px; --hd-h: 64px; --hd-top: 24px;
  --sec: clamp(64px, 8.5vw, 110px);
}
[data-theme="dark"] {
  --bg: #05070B; --bg-2: #080C12;
  --surface: #0B1018; --surface-2: #111925; --surface-3: #18222F;
  --line: rgba(150, 185, 230, .10); --line-2: rgba(150, 185, 230, .18);
  --ink: #EEF4FB; --ink-2: #A2B3C7; --ink-3: #8193A8;
  --brand: #6BB8F6; --brand-2: #8CC8F8; --brand-ink: #04121F; --brand-soft: rgba(79, 168, 242, .14);
  --cyan: #7BE3FF; --hl: #7BE3FF;
  --ok: #5BE3A0; --ok-soft: rgba(91, 227, 160, .12);
  --pet: #FF7A3D; --pet-soft: rgba(255, 122, 61, .14);
  --warn: #F2B544; --warn-soft: rgba(242, 181, 68, .12);
  --bad: #FF7B6B; --bad-soft: rgba(255, 123, 107, .12);
  --glass: rgba(12, 17, 25, .58); --glass-line: rgba(150, 185, 230, .12);
  --glass-btn: rgba(255, 255, 255, .07);
  --island: rgba(17, 25, 37, .86);
  --pic: radial-gradient(80% 70% at 50% 85%, #3A4A5E, #16202C 70%);
  --tile: linear-gradient(180deg, #121B28, #0B111A);
  --shadow-card: none;
  --map-grid: rgba(150, 185, 230, .06);
  --slab: #0B1626;
}

/* ── 2. Base ───────────────────────────────────────────────────────── */
body { font: 400 1rem/1.58 var(--f-body); letter-spacing: -.003em; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.03em; }
h3 { letter-spacing: -.02em; }
.wrap { max-width: calc(var(--wrap) + var(--gut) * 2); }
main { padding-top: calc(var(--hd-h) + var(--hd-top) + 18px); }
body.is-home main, body.m-bleed main { padding-top: 0; }
:where(main a:not([class])) { color: var(--brand); }
::selection { background: rgba(79, 168, 242, .32); }
.i { width: 20px; height: 20px; flex: 0 0 auto; }
.flip { transform: scaleX(-1); }
.crumbs { padding-top: 6px; }
.crumbs + .m-sec, .crumbs + section { padding-top: 18px; }
.crumbs ol { font-size: .84rem; }

/* Buttons: pill, 52px, bold. Volt (primary) and glass (secondary). */
.btn { min-height: 52px; padding: 0 24px; font: 700 .95rem/1.1 var(--f-body); letter-spacing: -.005em; gap: 10px; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .88rem; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1rem; }
.btn-volt, .btn:not(.btn-glass):not(.btn-ghost):not(.btn-quiet):not(.btn-wa):not(.btn-accent) { --btn-bg: var(--volt); --btn-ink: var(--volt-ink); box-shadow: 0 10px 30px -12px rgba(79, 168, 242, .75); }
.btn-volt:hover, .btn:not(.btn-glass):not(.btn-ghost):not(.btn-quiet):not(.btn-wa):not(.btn-accent):hover { --btn-bg: var(--volt-2); }
.btn-glass { --btn-bg: var(--glass-btn); --btn-ink: var(--ink); --btn-line: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-glass:hover { --btn-bg: color-mix(in srgb, var(--ink) 10%, transparent); }
.btn-wa { box-shadow: 0 10px 26px -14px rgba(31, 168, 85, .8); }
.lnk { color: var(--brand); font-weight: 700; }
.ib { background: var(--glass-btn); color: var(--ink); }
:focus-visible { outline-color: var(--volt); }

/* Shared section header */
.m-sec { padding-top: var(--sec); position: relative; }
.m-sec:last-child, main > .m-sec:last-of-type { padding-bottom: var(--sec); }
.m-sh { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 34px; }
.m-sh-t { max-width: 780px; }
.m-sh-sub { margin-top: 56px; }
.m-eyebrow { font: 700 .845rem/1.2 var(--f-body); color: var(--hl); margin: 0 0 14px; letter-spacing: 0; }
.m-eyebrow.pet { color: var(--pet); }
.m-h { font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.9rem); line-height: 1.05; margin: 0; max-width: 16em; }
h1.m-h { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem); line-height: 1.02; }
.m-h b, .m-hero-h b, .m-ph h1 b, .m-cta h2 b { font-weight: inherit; color: var(--hl); }
.m-intro { color: var(--ink-2); font-size: clamp(1rem, .96rem + .25vw, 1.12rem); margin: 14px 0 0; max-width: 40em; }
.m-intro b { color: var(--ink); }
.m-note { font-size: .84rem; color: var(--ink-3); margin: 14px 0 0; }
.m-more { margin-top: 22px; }
.m-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font: 650 .84rem/1 var(--f-body); color: var(--ink-2); text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; }
.m-chip .i { width: 14px; height: 14px; }
.m-chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--volt); }
.m-chip.ok { color: var(--ok); background: var(--ok-soft); box-shadow: none; }
.m-card { background: var(--surface); border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); padding: clamp(20px, 3vw, 34px); }
.m-panel-k { font: 700 .82rem/1.2 var(--f-body); color: var(--hl); margin: 0 0 8px; }

/* Night surfaces (hero, CTA band, slabs) keep the concept palette in both modes */
.m-hero, .m-cta, .m-slab, .m-ph-slab, .m-ph-vehicle {
  --bg: var(--n-bg); --surface: var(--n-s1); --surface-2: var(--n-s2); --surface-3: var(--n-s3);
  --line: var(--n-line); --line-2: var(--n-line-2); --ink: var(--n-ink); --ink-2: var(--n-ink-2); --ink-3: var(--n-ink-3);
  --hl: var(--n-cyan); --cyan: var(--n-cyan); --ok: var(--n-ok); --pet: var(--n-pet); --brand: #8CC8F8; --glass-btn: rgba(255, 255, 255, .07);
  --pic: radial-gradient(80% 70% at 50% 85%, #3A4A5E, #16202C 70%); --tile: linear-gradient(180deg, #121B28, #0B111A); --shadow-card: none; --map-grid: rgba(150, 185, 230, .06);
  color: var(--ink);
}
.m-slab { margin: var(--sec) 12px 0; padding-bottom: var(--sec); border-radius: var(--r-xl); background: radial-gradient(70% 90% at 90% 0%, rgba(79, 168, 242, .18), transparent 60%), linear-gradient(180deg, #0B1626, #070B12); overflow: hidden; }
.m-slab + .m-slab { margin-top: 12px; }
.m-soft { background: var(--surface-2); margin: var(--sec) 12px 0; border-radius: var(--r-xl); padding-bottom: var(--sec); }

/* ── 3. Header ─────────────────────────────────────────────────────── */
.hd { position: fixed; left: 0; right: 0; top: var(--hd-top); padding: 0 var(--gut); }
.hd-bar { max-width: var(--wrap); height: var(--hd-h); padding: 0 10px 0 24px; background: var(--glass); border: 0; box-shadow: inset 0 0 0 1px var(--glass-line); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
.hd.is-scrolled .hd-bar { box-shadow: inset 0 0 0 1px var(--glass-line), 0 18px 40px -20px rgba(0, 0, 0, .55); }
.hd-brand img { height: 26px; width: auto; }
.hd-nav { gap: 2px; }
.hd-nav a { font: 600 .9rem/1 var(--f-body); color: var(--ink-2); padding: 10px 14px; }
.hd-nav a:hover, .hd-nav a[aria-current] { color: var(--ink); background: var(--glass-btn); }
.hd-nav a[aria-current]::after { background: var(--volt); }
.hd .ib { background: var(--glass-btn); }
.hd .ib-wa { background: var(--wa); color: #fff; }
.hd-act { gap: 8px; }
.hd-cta { min-height: 44px; }
body.is-home .hd:not(.is-scrolled) { --glass: rgba(12, 17, 25, .5); --glass-line: rgba(150, 185, 230, .12); --ink: #EEF4FB; --ink-2: #A2B3C7; --glass-btn: rgba(255, 255, 255, .07); }
@media (max-width: 1220px) { .hd-nav a { padding: 10px 10px; font-size: .86rem; } }
@media (max-width: 1080px) { .hd-nav { display: none; } .hd-menu { display: inline-grid; } }
@media (max-width: 960px) {
  :root { --hd-h: 56px; --hd-top: 10px; }
  .hd { padding: 0 10px; }
  .hd-bar { border-radius: 999px; padding: 0 8px 0 16px; padding-top: 0; height: var(--hd-h); border-width: 0; }
  .hd-brand img { height: 22px; }
}

/* ── 4. Home hero (the signature) ──────────────────────────────────── */
.m-hero {
  position: relative; margin: 12px; border-radius: var(--r-xl); overflow: hidden; isolation: isolate;
  padding: calc(var(--hd-h) + var(--hd-top) + 62px) 0 96px;
  background: radial-gradient(90% 60% at 70% 100%, rgba(79, 168, 242, .35), transparent 60%), radial-gradient(60% 50% at 15% 0%, rgba(123, 227, 255, .10), transparent 60%), linear-gradient(180deg, #070B12, #0A121D 60%, #0B1626);
}
.m-hero::before {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -60px; height: 340px; z-index: -1;
  background: repeating-linear-gradient(90deg, rgba(123, 227, 255, .10) 0 1px, transparent 1px 90px), linear-gradient(180deg, transparent, rgba(79, 168, 242, .10));
  transform: perspective(500px) rotateX(62deg); transform-origin: bottom; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%);
}
.m-hero-road { position: absolute; left: 0; right: 0; bottom: 250px; height: 1px; background: linear-gradient(90deg, transparent, rgba(123, 227, 255, .6), transparent); z-index: -1; }
@media (prefers-reduced-motion: no-preference) {
  .m-hero::before { animation: m-road 6s linear infinite; }
  @keyframes m-road { from { background-position: 0 0, 0 0; } to { background-position: 90px 0, 0 0; } }
}
.m-kicker { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 16px 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line); font: 600 .845rem/1.3 var(--f-body); color: var(--ink-2); margin: 0; }
.m-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--n-cyan); box-shadow: 0 0 12px var(--n-cyan); flex: 0 0 auto; }
.m-hero-h { font-size: clamp(2.3rem, 1rem + 5vw, 4.75rem); line-height: 1; margin: 22px 0 0; max-width: 12.5em; }
.m-hero-row { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 40px; align-items: end; margin-top: 40px; }
.m-reg { display: flex; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line); width: max-content; max-width: 100%; }
.m-reg button { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 700 .875rem/1 var(--f-body); white-space: nowrap; transition: background .25s, color .25s; }
.m-reg button:hover { color: var(--ink); }
.m-reg button[aria-selected="true"] { background: #fff; color: #05070B; }
.m-reg .i { width: 18px; height: 18px; }
.m-offer { margin-top: 26px; }
.m-offer-big { font: 600 clamp(1.5rem, 1rem + 1.4vw, 2.1rem)/1.15 var(--f-display); letter-spacing: -.03em; margin: 0; color: var(--ink); }
.m-offer-big b { color: var(--n-cyan); font-weight: 600; }
.m-offer-p { color: var(--ink-2); margin: 12px 0 24px; max-width: 28em; }
.m-hero-r { position: relative; min-height: 470px; align-self: end; }
.m-car { position: absolute; inset: 0; }
.m-car-glow { position: absolute; right: 10%; bottom: 0; width: 80%; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(123, 227, 255, .35), transparent); filter: blur(10px); }
.m-car-img { position: absolute; right: 4%; bottom: 30px; height: 410px; width: auto; max-width: 96%; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .45)); }
.m-spec { position: absolute; display: flex; flex-direction: column; padding: 12px 16px; border-radius: 18px; background: rgba(10, 16, 24, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line-2); z-index: 2; }
.m-spec span { font: 600 .75rem/1.3 var(--f-body); color: var(--ink-3); }
.m-spec b { font: 600 1.25rem/1.2 var(--f-display); letter-spacing: -.02em; }
.m-spec.s1 { left: 2%; top: 140px; } .m-spec.s2 { right: 0; top: 20px; } .m-spec.s3 { left: 14%; bottom: 30px; }
@media (prefers-reduced-motion: no-preference) {
  .m-car:not([hidden]) .m-car-img { animation: m-in .7s var(--ease) both; }
  .m-car:not([hidden]) .m-spec { animation: m-up .6s var(--ease) both; }
  .m-car:not([hidden]) .s2 { animation-delay: .08s; } .m-car:not([hidden]) .s3 { animation-delay: .16s; }
  .m-offer:not([hidden]) { animation: m-up .5s var(--ease) both; }
  @keyframes m-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
  @keyframes m-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
/* search dock */
.m-dock { position: relative; z-index: 5; margin: -44px auto 0; max-width: 980px; padding: 0 20px; }
.m-search { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 24px; border-radius: 999px; background: rgba(17, 25, 37, .92); color: var(--n-ink); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--n-line-2); }
[data-theme="light"] .m-search { background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: 0 30px 60px -24px rgba(12, 34, 64, .4), inset 0 0 0 1px var(--line-2); }
.m-search-i { color: var(--ink-3); }
.m-search input[type="search"] { flex: 1; border: 0; background: transparent; outline: 0; font: 600 1.06rem/1 var(--f-body); min-width: 0; height: 56px; color: inherit; }
.m-search input::placeholder { color: var(--ink-3); }
.m-qf { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.m-qf a { height: 36px; padding: 0 15px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 650 .845rem/1 var(--f-body); color: var(--ink-2); display: inline-flex; align-items: center; text-decoration: none; }
.m-qf a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--volt); }

/* ── 5. Inner page header ──────────────────────────────────────────── */
.m-ph { position: relative; }
.m-ph-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: end; }
.m-ph h1 { font-size: clamp(2.1rem, 1.1rem + 3.6vw, 3.9rem); line-height: 1.02; margin: 0; max-width: 14em; }
.m-ph-lead { color: var(--ink-2); font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem); margin: 18px 0 0; max-width: 40em; }
.m-ph .btn-row { margin-top: 26px; }
.m-ph-plain { padding-top: 22px; }
.m-ph-slab, .m-ph-vehicle { margin: 0 12px; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; padding: calc(var(--hd-h) + var(--hd-top) + 48px) 0 64px;
  background: radial-gradient(80% 70% at 85% 100%, rgba(79, 168, 242, .32), transparent 60%), radial-gradient(50% 50% at 10% 0%, rgba(123, 227, 255, .08), transparent 60%), linear-gradient(180deg, #070B12, #0B1626); }
.m-ph-slab::before, .m-ph-vehicle::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -60px; height: 220px; z-index: -1; background: repeating-linear-gradient(90deg, rgba(123, 227, 255, .08) 0 1px, transparent 1px 90px); transform: perspective(500px) rotateX(62deg); transform-origin: bottom; -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%); mask-image: linear-gradient(180deg, transparent, #000 50%); }
body.m-bleed .crumbs { display: none; }
.m-ph-vehicle.has-img .m-ph-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.m-ph-car { position: relative; min-height: 300px; display: flex; align-items: flex-end; justify-content: center; }
.m-ph-car .m-car-glow { right: 5%; width: 90%; }
.m-ph-img { position: relative; max-height: 380px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .45)); }
.m-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.m-facts div { padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-2); min-width: 130px; }
.m-ph-plain .m-facts div { background: var(--surface); }
.m-facts dt { font: 600 .75rem/1.3 var(--f-body); color: var(--ink-3); }
.m-facts dd { margin: 2px 0 0; font: 600 1.2rem/1.2 var(--f-display); letter-spacing: -.02em; }

/* ── 6. Shop by type ───────────────────────────────────────────────── */
.m-types-g { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 14px; }
.m-type { position: relative; border-radius: var(--r-l); background: var(--tile); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); height: 300px; overflow: hidden; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s; }
.m-type:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--volt), 0 30px 50px -30px rgba(79, 168, 242, .5); }
.m-type::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 16px; height: 60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 160, 210, .35), transparent); }
.m-type img { position: absolute; right: 4%; bottom: 18px; height: 62%; width: auto; max-width: 92%; object-fit: contain; z-index: 1; }
.m-type.big img { height: 70%; }
.m-type h3 { font-size: 1.35rem; position: relative; z-index: 2; margin: 0; }
.m-type-n { font: 650 .82rem/1.3 var(--f-body); color: var(--ink-2); position: relative; z-index: 2; margin: 4px 0 0; }
.m-go { position: relative; z-index: 2; align-self: flex-start; width: 40px; height: 40px; border-radius: 50%; background: var(--glass-btn); display: grid; place-items: center; }

/* ── 7. Vehicle cards and rails ────────────────────────────────────── */
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr)); gap: 16px; }
.m-grid-sm { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); margin-top: 20px; }
.m-railx { position: relative; }
.m-rail-in { display: grid; grid-auto-flow: column; grid-auto-columns: 320px; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px max(var(--gut), calc((100vw - var(--wrap)) / 2)) 24px; scrollbar-width: none; scroll-padding-inline: max(var(--gut), calc((100vw - var(--wrap)) / 2)); }
.m-rail-in::-webkit-scrollbar { display: none; }
.m-rail-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.m-rail-nav .ib:disabled { opacity: .35; }
.vc { scroll-snap-align: start; position: relative; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); padding: 10px; display: flex; flex-direction: column; min-width: 0; transition: box-shadow .25s, transform .25s var(--ease); }
.vc:hover { box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 40px -28px rgba(79, 168, 242, .45); transform: translateY(-2px); }
.vc-pic { height: 210px; border-radius: 20px; background: var(--pic); position: relative; display: grid; place-items: center; overflow: hidden; }
.vc-pic img { width: 88%; height: 178px; object-fit: contain; }
.vc.is-photo .vc-pic img { width: 100%; height: 100%; object-fit: cover; }
.vc.is-photo .vc-pic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); pointer-events: none; }
.vc-tag { position: absolute; top: 12px; left: 12px; z-index: 2; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(5, 7, 11, .62); font: 700 .75rem/1 var(--f-body); display: flex; align-items: center; gap: 6px; color: #D7E2EE; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vc-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--n-ok); }
.vc-cmp { position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; background: rgba(5, 7, 11, .62); display: grid; place-items: center; border: 0; color: #D7E2EE; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vc-cmp .i { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.vc-cmp[aria-pressed="true"] { background: var(--volt); color: var(--volt-ink); }
.vc-cmp[aria-pressed="true"] .i { transform: rotate(45deg); }
.vc-bd { padding: 16px 10px 8px; display: flex; flex-direction: column; flex: 1; }
.vc-brand { font: 700 .78rem/1.2 var(--f-body); color: var(--ink-3); }
.vc-n { font: 800 1.15rem/1.25 var(--f-body); letter-spacing: -.02em; margin: 2px 0 12px; }
.vc-n a { text-decoration: none; color: var(--ink); }
.vc-n a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-l); z-index: 1; }
.vc-price { font: 600 1.45rem/1 var(--f-display); letter-spacing: -.03em; }
.vc-mo { color: var(--hl); font: 700 .84rem/1.35 var(--f-body); margin: 8px 0 14px; }
.vc-earn { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 12px; font: 600 .78rem/1.3 var(--f-body); color: var(--ink-3); }
.vc-earn span { padding: 6px 10px; border-radius: 12px; background: var(--surface-2); }
.vc-earn b { color: var(--ok); font-weight: 800; }
.vc-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.vc-meta span { min-height: 28px; padding: 4px 10px; border-radius: 999px; background: var(--surface-3); font: 650 .78rem/1.3 var(--f-body); color: var(--ink-2); display: inline-flex; align-items: center; }

/* ── 8. Search and filters ─────────────────────────────────────────── */
.m-search-sec { padding-top: 26px; }
.m-fbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; margin-bottom: 16px; }
.m-fq { display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 54px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-card); min-width: 0; }
.m-fq:focus-within { box-shadow: inset 0 0 0 2px var(--volt); }
.m-fq .i { color: var(--ink-3); }
.m-fq input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 600 1rem/1 var(--f-body); height: 52px; }
.m-tseg { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border: 0; margin: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.m-tseg::-webkit-scrollbar { display: none; }
.m-tseg label { position: relative; flex: 0 0 auto; }
.m-tseg input { position: absolute; opacity: 0; pointer-events: none; }
.m-tseg span, .m-tseg-tabs button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font: 700 .875rem/1 var(--f-body); color: var(--ink-2); cursor: pointer; white-space: nowrap; border: 0; background: transparent; }
.m-tseg input:checked + span, .m-tseg-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.m-tseg input:focus-visible + span { outline: 2.5px solid var(--volt); outline-offset: 2px; }
.m-fbar .m-tseg { grid-column: 1 / -1; grid-row: 2; justify-self: start; max-width: 100%; }
.m-fopen { display: none; }
.m-fcount:not(:empty) { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--volt); color: var(--volt-ink); font-size: .74rem; }
.m-fsort select, .m-f select, .m-calc select, .inp { font-family: var(--f-body); }
.m-fsort select { height: 54px; border-radius: 999px; padding: 0 44px 0 20px; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); background-color: var(--surface); color: var(--ink); font-weight: 700; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238193A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; }
.m-fpanel { grid-column: 1 / -1; grid-row: 3; background: var(--surface); border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); padding: 18px; }
.m-fpanel-hd { display: none; }
.m-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.m-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.m-f > span { font: 700 .78rem/1.2 var(--f-body); color: var(--ink-3); }
.m-f select, .m-calc .inp, .m-f .inp { height: 48px; border-radius: 14px; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); background-color: var(--surface-2); color: var(--ink); padding: 0 40px 0 14px; font-weight: 650; font-size: .95rem; min-height: 48px; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238193A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.m-f input.inp, .m-calc input.inp { background-image: none; padding-right: 14px; }
.m-f select:focus, .m-f .inp:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--volt); }
.m-fchk { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); font: 650 .9rem/1.2 var(--f-body); cursor: pointer; }
.m-fchk input { accent-color: var(--volt); }
.m-fpanel-ft { display: none; }
.js .m-fpanel-ft [data-fapply] { display: none; }
.m-fpanel-ft { gap: 10px; margin-top: 14px; justify-content: flex-end; }
.no-js .m-fpanel-ft, html:not(.js) .m-fpanel-ft { display: flex; }
.m-rhd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 22px 0 18px; }
.m-count { margin: 0; font: 600 .95rem/1.2 var(--f-body); color: var(--ink-2); }
.m-count b { font: 600 1.25rem/1 var(--f-display); color: var(--ink); letter-spacing: -.02em; }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.m-alert-btn { margin-left: auto; }
.m-alert { padding: 16px 18px; border-radius: var(--r-m); background: var(--brand-soft); margin-bottom: 18px; }
.m-alert p { margin: 0 0 10px; font-size: .92rem; }
.m-alert-row { display: flex; gap: 8px; flex-wrap: wrap; }
.m-alert-row .inp { flex: 1 1 220px; min-height: 48px; border-radius: 999px; }
.m-empty { padding: 40px 24px; text-align: center; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.m-empty > :last-child { margin-bottom: 0; }
.pager { margin-top: 32px; }
.pg-btn, .pg-num { background: var(--surface); border-color: var(--line-2); color: var(--ink); min-width: 46px; height: 46px; }
.pg-num[aria-current] { background: var(--volt); color: var(--volt-ink); border-color: var(--volt); }
@media (max-width: 1099px) {
  .m-fbar { grid-template-columns: minmax(0, 1fr) auto; }
  .m-fsort { grid-column: 1 / -1; grid-row: 3; }
  .m-fsort select { width: 100%; height: 48px; }
  .m-fbar .m-tseg { grid-row: 2; grid-column: 1 / -1; }
  .m-fopen { display: inline-flex; grid-row: 1; grid-column: 2; min-height: 54px; }
  .m-fpanel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; max-height: 86dvh; overflow-y: auto; border-radius: var(--r-l) var(--r-l) 0 0; padding: 0 18px calc(18px + env(safe-area-inset-bottom)); background: var(--bg); box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .6); transform: translateY(105%); visibility: hidden; transition: transform .38s var(--ease), visibility 0s linear .38s; grid-row: auto; }
  .m-fpanel.on { transform: none; visibility: visible; transition: transform .38s var(--ease), visibility 0s; }
  .m-fpanel-hd { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--bg); padding: 16px 0 12px; z-index: 1; }
  .m-fpanel-hd strong { font: 600 1.1rem/1 var(--f-display); }
  .m-fgrid { grid-template-columns: 1fr 1fr; }
  .m-fpanel-ft { display: flex; position: sticky; bottom: 0; background: var(--bg); padding-top: 12px; }
  .m-fpanel-ft .btn { flex: 1; }
  .js .m-fpanel-ft [data-fapply] { display: inline-flex; }
}

/* ── 9. Bento (home tools) ─────────────────────────────────────────── */
.m-bento-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.m-tile { border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); padding: 32px; position: relative; overflow: hidden; color: var(--ink); text-decoration: none; display: block; }
.m-tile h3 { font-size: clamp(1.35rem, 1.1rem + .7vw, 1.65rem); line-height: 1.12; margin: 0; }
.m-tile > p:not(.m-eyebrow):not(.m-tile-foot) { color: var(--ink-2); margin: 10px 0 22px; }
.m-tile-foot { font-size: .8rem; color: var(--ink-3); margin: 14px 0 0; }
.t-earn { grid-column: span 7; background: radial-gradient(90% 90% at 100% 0%, rgba(79, 168, 242, .22), transparent 60%), var(--surface); }
.t-map { grid-column: span 5; padding: 0; min-height: 360px; }
.t-map:hover .m-pin { transform: scale(1.15); }
.t-cost { grid-column: span 4; }
.t-vin { grid-column: span 4; }
.t-trade { grid-column: span 4; background: linear-gradient(160deg, color-mix(in srgb, var(--volt) 16%, var(--surface)), var(--surface)); }
.m-tile-in { padding: 32px 32px 0; position: relative; z-index: 2; }
.m-field { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--surface-3); }
.m-field input { flex: 1; border: 0; background: transparent; padding: 0 16px; outline: 0; font-weight: 650; min-width: 0; color: var(--ink); text-transform: uppercase; }
.m-field input::placeholder { text-transform: none; color: var(--ink-3); }
.m-field .btn { min-height: 44px; padding: 0 20px; }
.m-field:focus-within { box-shadow: inset 0 0 0 2px var(--volt); }

/* ── 10. Calculators ───────────────────────────────────────────────── */
.m-earn-g, .m-fuel-g { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.m-earn-copy .m-sh, .m-fuel-copy .m-sh { margin-bottom: 20px; }
.m-fuel-copy .btn-row { margin-top: 8px; }
.m-calc { background: var(--surface); border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); padding: clamp(20px, 3vw, 32px); }
.m-slab .m-calc { background: rgba(255, 255, 255, .035); }
.m-slider { margin: 4px 0 18px; }
.m-slider-lab { display: flex; justify-content: space-between; gap: 12px; font: 650 .84rem/1.3 var(--f-body); color: var(--ink-2); margin-bottom: 12px; }
.m-slider-lab output { color: var(--ink); font: 600 1rem/1 var(--f-display); letter-spacing: -.02em; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; --p: 50%; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--volt), var(--cyan)) 0 0 / var(--p) 100% no-repeat, var(--surface-3); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--surface-3); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--volt), var(--cyan)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(123, 227, 255, .22), 0 2px 6px rgba(0, 0, 0, .3); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(123, 227, 255, .22); }
input[type="range"]:focus-visible { outline: 2.5px solid var(--volt); outline-offset: 4px; border-radius: 999px; }
.m-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.m-presets .m-chip { height: 34px; }
.m-calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.m-calc > .m-f { margin-bottom: 16px; }
.m-earn-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.m-earn-out.two { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.m-box { border-radius: 20px; background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 0 0 0 1px var(--line); padding: 16px 18px; min-width: 0; }
.m-box span { display: block; font: 700 .76rem/1.3 var(--f-body); color: var(--ink-3); }
.m-box b { display: block; font: 600 clamp(1.2rem, 1rem + .9vw, 1.85rem)/1.1 var(--f-display); letter-spacing: -.03em; margin-top: 6px; overflow-wrap: anywhere; }
.m-box b.ok { color: var(--ok); }
.m-box b.pet { color: var(--pet); }
.m-calc-note { font-size: .82rem; color: var(--ink-3); margin: 16px 0; }
.m-calc-note:empty { display: none; }
.m-calc .btn-row { margin-top: 16px; }
.m-bars { display: grid; gap: 4px; margin-top: 8px; }
.m-bar-l { display: flex; justify-content: space-between; gap: 12px; font: 650 .84rem/1.3 var(--f-body); color: var(--ink-2); margin: 14px 0 8px; }
.m-bar-l b { font: 600 1.05rem/1 var(--f-display); color: var(--ink); letter-spacing: -.02em; }
.m-bar-t { height: 12px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.m-bar-t i { display: block; height: 100%; border-radius: 999px; transition: width .5s var(--ease); }
.m-bar.pet i { background: var(--pet); }
.m-bar.ev i { background: linear-gradient(90deg, var(--volt), var(--cyan)); }
.m-erows { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: .9rem; }
.m-erows th, .m-erows td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.m-erows th[scope="row"], .m-erows thead th:first-child { text-align: left; color: var(--ink-2); font-weight: 600; }
.m-erows thead th { font: 700 .76rem/1.2 var(--f-body); color: var(--ink-3); }
.m-erows td:nth-child(2) { color: var(--pet); }
.m-erows td:nth-child(3) { color: var(--ok); }
.m-erows tr.tot th, .m-erows tr.tot td { font-weight: 800; border-bottom: 0; }
.m-keep { margin: 16px 0 0; font-size: 1.02rem; }
.m-keep b { font: 600 1.2rem/1 var(--f-display); color: var(--ok); letter-spacing: -.02em; }
.m-tco-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m-tco-col { border-radius: 20px; padding: 18px; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface-2); }
.m-tco-col h3 { font-size: 1.05rem; margin: 0 0 10px; }
.m-tco-col p { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; color: var(--ink-2); }
.m-tco-col p b { color: var(--ink); font-variant-numeric: tabular-nums; }
.m-tco-col p.tot { border-bottom: 0; font-weight: 800; }
.m-tco-col.ev p.tot b { color: var(--ok); }
.m-tco-col.pet p.tot b { color: var(--pet); }

/* ── 11. Feature tiles, promise, callouts, steps, plans ────────────── */
.m-feat-g { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-feat-g.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.m-feat-g.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-feat { border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); padding: 26px; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); min-width: 0; transition: box-shadow .25s, transform .25s var(--ease); }
a.m-feat:hover { box-shadow: inset 0 0 0 1px var(--volt), 0 24px 40px -30px rgba(79, 168, 242, .5); transform: translateY(-2px); }
.m-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--brand-soft); color: var(--hl); display: grid; place-items: center; margin-bottom: 18px; flex: 0 0 auto; }
.m-feat-k { font: 700 .8rem/1.3 var(--f-body); color: var(--ink-3); margin: 0 0 6px; }
.m-feat h3 { font: 800 1.12rem/1.3 var(--f-body); letter-spacing: -.015em; margin: 0 0 6px; }
.m-feat-v { font: 600 1.6rem/1.1 var(--f-display); letter-spacing: -.03em; color: var(--hl); margin: 2px 0 8px; }
.m-feat-p { color: var(--ink-2); font-size: .93rem; margin: 0; white-space: pre-line; }
.m-feat-p a { color: var(--brand); }
.m-feat .lnk { margin-top: auto; padding-top: 16px; }
.m-promise-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.m-pr { border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); padding: 26px; }
.m-pr h3 { font: 800 1.12rem/1.3 var(--f-body); letter-spacing: -.01em; margin: 0 0 6px; }
.m-pr p { color: var(--ink-2); font-size: .92rem; margin: 0; }
.m-callout-sec { padding-top: 28px; }
.m-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 22px 26px; border-radius: var(--r-m); background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--volt) 26%, transparent); }
.m-callout p { margin: 0; flex: 1 1 360px; color: var(--ink-2); }
.m-callout b { color: var(--ink); }
.m-callout.warn { background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent); }
.m-callout.plain { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.m-steps-g { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.m-lane { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 10px; }
.m-lane li { counter-increment: s; position: relative; padding: 20px 22px 20px 74px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); margin: 0; }
.m-lane li::before { content: counter(s); position: absolute; left: 20px; top: 18px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 600 .95rem/1 var(--f-display); background: var(--brand-soft); color: var(--hl); }
.m-lane li:not(:last-child)::after { content: ""; position: absolute; left: 38px; top: 60px; bottom: -14px; width: 2px; background: linear-gradient(var(--volt), transparent); opacity: .5; }
.m-lane h3 { font: 800 1.02rem/1.3 var(--f-body); letter-spacing: -.01em; margin: 0 0 4px; }
.m-lane p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.m-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.m-plans-g { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.m-plans-g.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-plan { position: relative; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); padding: 28px; display: flex; flex-direction: column; }
.m-plan.feat { box-shadow: inset 0 0 0 2px var(--volt), 0 30px 50px -36px rgba(79, 168, 242, .7); }
.m-badge { align-self: flex-start; font: 700 .76rem/1 var(--f-body); color: var(--hl); background: var(--brand-soft); padding: 8px 12px; border-radius: 999px; margin-bottom: 16px; }
.m-plan h3 { font-size: 1.3rem; margin: 0; }
.m-plan-v { margin: 14px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.m-plan-v b { font: 600 2rem/1 var(--f-display); letter-spacing: -.035em; }
.m-plan-v span { color: var(--ink-3); font-size: .85rem; font-weight: 600; }
.m-plan-p { color: var(--ink-2); font-size: .93rem; margin: 14px 0; }
.m-plan-rows { margin: 0 0 14px; }
.m-plan-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.m-plan-rows dt { color: var(--ink-2); }
.m-plan-rows dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; }
.m-plan-f { font-size: .8rem; color: var(--ink-3); margin: 0 0 18px; }
.m-plan .btn { margin-top: auto; }

/* ── 12. Brands, cities, CTA ───────────────────────────────────────── */
.m-brands .m-sh { justify-content: center; text-align: center; }
.m-brands .m-sh-t { margin-inline: auto; }
.m-brands .m-h { margin-inline: auto; }
.m-brands-l { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.m-brands-l a, .m-brands-l span { height: 52px; padding: 0 22px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: inline-flex; align-items: center; gap: 10px; font: 600 1rem/1 var(--f-display); color: var(--ink-2); letter-spacing: -.02em; text-decoration: none; transition: color .2s, box-shadow .2s; }
.m-brands-l a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--volt); }
.m-brands-l small { font: 700 .72rem/1 var(--f-body); color: var(--ink-3); letter-spacing: 0; }
.m-brands-l a.more { color: var(--hl); }
.m-city-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.m-cityc { border-radius: var(--r-l); background: var(--tile); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); padding: 28px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 10px; transition: box-shadow .25s, transform .25s var(--ease); }
.m-cityc:hover { box-shadow: inset 0 0 0 1px var(--volt); transform: translateY(-3px); }
.m-cityc h3 { font-size: 1.7rem; margin: 0; }
.m-city-net { display: flex; gap: 16px; margin: 0; font-size: .88rem; color: var(--ink-2); }
.m-city-net b { font: 600 1.2rem/1 var(--f-display); color: var(--hl); margin-right: 4px; }
.m-city-a { color: var(--ink-2); font-size: .9rem; margin: 0; }
.m-city-s { font-size: .86rem; color: var(--ink-3); margin: 0 0 6px; }
.m-city-s b { color: var(--ink); }
.m-cityc .lnk { margin-top: auto; }
.m-cta { margin: var(--sec) 12px 0; border-radius: var(--r-xl); padding: clamp(56px, 7vw, 90px) 0; position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(70% 120% at 80% 100%, rgba(79, 168, 242, .5), transparent 60%), linear-gradient(180deg, #0B1626, #070B12); }
.m-cta h2 { font-size: clamp(2rem, 1.1rem + 3.4vw, 3.9rem); line-height: 1.02; max-width: 13em; margin: 0; }
.m-cta p { color: var(--ink-2); font-size: 1.1rem; margin: 18px 0 30px; max-width: 30em; }
.m-cta .wrap { position: relative; z-index: 2; }
.m-cta-img { position: absolute; right: 4%; bottom: 30px; width: min(540px, 40%); height: auto; z-index: 1; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .5)); }

/* ── 13. Forms ─────────────────────────────────────────────────────── */
.m-form-g { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.m-form-g.left { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.m-form-g.left .m-form-side { order: -1; }
.m-form-side { display: grid; gap: 12px; }
.m-panel { border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); padding: 22px; }
.m-panel h3 { font: 800 1.02rem/1.3 var(--f-body); letter-spacing: -.01em; margin: 0 0 6px; }
.m-panel-p { color: var(--ink-2); font-size: .9rem; margin: 10px 0 0; white-space: pre-line; }
.m-panel .lnk { margin-top: 10px; }
.m-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.m-fld { grid-column: 1 / -1; margin-bottom: 16px; position: relative; min-width: 0; }
.m-fld.half { grid-column: span 1; }
.m-form .lbl, .m-ti .lbl { font: 700 .88rem/1.3 var(--f-body); margin-bottom: 8px; }
.m-form .inp, .m-ti .inp { border-radius: var(--r-field); border: 0; box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--surface-2); min-height: 52px; color: var(--ink); }
.m-form .inp:focus, .m-ti .inp:focus { box-shadow: inset 0 0 0 2px var(--volt), 0 0 0 4px rgba(79, 168, 242, .18); }
.m-form .inp[aria-invalid="true"], .m-ti .inp[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--bad); }
.m-form select.inp, .m-ti select.inp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238193A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; -webkit-appearance: none; appearance: none; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.m-file-in { position: absolute; width: 1px; height: 1px; opacity: 0; }
.m-file { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px; border-radius: var(--r-field); border: 1.5px dashed var(--line-2); background: var(--surface-2); color: var(--ink-2); font-weight: 600; font-size: .92rem; cursor: pointer; margin: 0; }
.m-file:hover, .m-file-in:focus-visible + .err, .m-fld:focus-within .m-file { border-color: var(--volt); color: var(--ink); }
.m-file.has { border-style: solid; border-color: var(--ok); color: var(--ink); }
.m-file .i { color: var(--hl); }
.m-fld-chk .err { margin-top: 6px; }
.m-chk { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--ink-2); cursor: pointer; }
.m-chk input { margin-top: 3px; flex: 0 0 auto; }
.m-status { display: none; margin-top: 14px; padding: 14px 16px; border-radius: var(--r-field); font-size: .94rem; }
.m-status.on { display: block; }
.m-status.busy { background: var(--surface-2); color: var(--ink-2); }
.m-status.ok { background: var(--ok-soft); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent); }
.m-status.ok b { color: var(--ok); }
.m-status.err { background: var(--bad-soft); color: var(--ink); }
.m-status .btn-row { margin-top: 12px; }
.m-fine { font-size: .82rem; color: var(--ink-3); margin: 14px 0 0; }
.m-form-v { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 18px; background: var(--pic); margin-bottom: 18px; }
.m-form-v img { width: 96px; height: 64px; object-fit: contain; }
.m-form-v span { display: block; font-size: .74rem; color: var(--ink-3); font-weight: 700; }
.m-form-v b { display: block; font-size: 1rem; }
.m-form-v small { color: var(--hl); font-weight: 700; }
.m-ti-out { margin-top: 20px; padding: 18px; border-radius: var(--r-m); background: var(--brand-soft); }
.m-ti-range { font: 600 clamp(1.4rem, 1.1rem + 1.2vw, 2rem)/1.15 var(--f-display); letter-spacing: -.03em; margin: 0; }
.m-ti-book { margin-top: 14px; }
.m-ti-book h3 { margin-top: 0; }
.m-tradein .m-callout { margin-top: 14px; }

/* match */
.m-match-g { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.m-match fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.m-match legend { font: 800 1rem/1.3 var(--f-body); margin-bottom: 12px; padding: 0; }
.m-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.m-opt { position: relative; }
.m-opt input { position: absolute; opacity: 0; }
.m-opt span { display: inline-flex; align-items: center; min-height: 46px; padding: 8px 16px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); font: 650 .9rem/1.25 var(--f-body); color: var(--ink-2); cursor: pointer; }
.m-opt input:checked + span { background: var(--volt); color: var(--volt-ink); box-shadow: none; }
.m-opt input:focus-visible + span { outline: 2.5px solid var(--volt); outline-offset: 2px; }

/* ── 14. Map ───────────────────────────────────────────────────────── */
.m-mapx .m-tseg-tabs { margin-bottom: 14px; display: inline-flex; }
.m-map-g { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
.m-map-g.nolist { grid-template-columns: 1fr; }
.m-map-box { position: relative; border-radius: var(--r-l); overflow: hidden; min-height: 440px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.m-map-draw { position: absolute; inset: 0; }
.m-map-bg, .t-map .m-map-bg { position: absolute; inset: 0; background: radial-gradient(circle at 30% 70%, rgba(79, 168, 242, .15), transparent 40%), repeating-linear-gradient(0deg, var(--map-grid) 0 1px, transparent 1px 34px), repeating-linear-gradient(90deg, var(--map-grid) 0 1px, transparent 1px 34px); }
.m-map-pins { position: absolute; inset: 0; }
.m-pin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--n-cyan); box-shadow: 0 0 0 5px rgba(123, 227, 255, .18), 0 0 18px var(--n-cyan); z-index: 2; transition: transform .25s var(--ease); }
a.m-pin:hover, a.m-pin:focus-visible { transform: scale(1.3); }
.m-pin.k-swap { background: var(--n-ok); box-shadow: 0 0 0 5px rgba(91, 227, 160, .18), 0 0 18px var(--n-ok); }
.m-pin.k-both { background: linear-gradient(90deg, var(--n-cyan) 50%, var(--n-ok) 50%); }
.m-pin.k-service { background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .16), 0 0 14px rgba(255, 255, 255, .6); border-radius: 4px; }
.m-pin.k-area { background: transparent; border: 2px solid var(--n-cyan); box-shadow: 0 0 0 8px rgba(123, 227, 255, .08); }
[data-theme="light"] .m-map-box .m-pin.k-area { border-color: var(--hl); }
[data-theme="light"] .m-map-box .m-pin.k-service { background: var(--ink); }
.m-plabel { position: absolute; transform: translateX(-50%); font: 700 .74rem/1.2 var(--f-body); color: var(--ink-2); white-space: nowrap; z-index: 2; pointer-events: none; }
.m-legend { position: absolute; left: 24px; bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px 16px; font: 650 .8rem/1.2 var(--f-body); color: var(--ink-2); z-index: 3; }
.m-legend span { display: inline-flex; align-items: center; gap: 6px; }
.m-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.m-legend i.k-charge { background: var(--n-cyan); } .m-legend i.k-swap { background: var(--n-ok); }
.m-legend i.k-service { background: var(--ink); border-radius: 3px; } .m-legend i.k-area { border: 2px solid var(--hl); }
.t-map .m-legend { left: 32px; bottom: 26px; }
.m-map-osm { position: absolute; inset: 0; }
.m-map-osm iframe { width: 100%; height: 100%; border: 0; filter: saturate(.9); }
[data-theme="dark"] .m-map-osm iframe { filter: invert(.92) hue-rotate(180deg) saturate(.7) brightness(.95); }
.m-map-toggle { position: absolute; right: 14px; top: 14px; z-index: 4; background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.m-map-toggle[aria-pressed="true"] { --btn-bg: var(--volt); --btn-ink: var(--volt-ink); }
.m-locs { list-style: none; margin: 0; padding: 6px; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); max-height: 440px; overflow-y: auto; }
.m-locs li { margin: 0; }
.m-locs-hd { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.m-locs-hd b { font: 600 1.2rem/1.1 var(--f-display); }
.m-locs-hd span { font-size: .84rem; color: var(--ink-3); }
.m-loc { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 16px; scroll-margin-top: 120px; }
.m-loc:target, .m-loc:hover { background: var(--surface-2); }
.m-loc b { font-size: .98rem; }
.m-loc span:not(.m-loc-k), .m-loc small { color: var(--ink-2); font-size: .86rem; }
.m-loc-k { align-self: flex-start; font: 700 .7rem/1 var(--f-body); padding: 5px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--hl); }
.m-loc-k.k-swap { background: var(--ok-soft); color: var(--ok); }
.m-loc-k.k-service { background: var(--surface-3); color: var(--ink); }
.m-loc-k.k-area { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.m-loc .lnk { font-size: .84rem; }
.m-map .m-tbl-w { margin-top: 18px; }

/* ── 15. Tables, compare, prose, FAQ ───────────────────────────────── */
.m-tbl-w { overflow-x: auto; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); -webkit-overflow-scrolling: touch; }
.m-tbl { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 560px; }
.m-tbl th, .m-tbl td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.m-tbl thead th { font: 700 .78rem/1.3 var(--f-body); color: var(--ink-3); background: var(--surface-2); white-space: nowrap; }
.m-tbl tbody th { font-weight: 650; color: var(--ink-2); }
.m-tbl td { font-variant-numeric: tabular-nums; }
.m-tbl td.hl { color: var(--hl); font-weight: 800; }
.m-tbl tr:last-child > * { border-bottom: 0; }
.m-tbl tr.tot > * { font-weight: 800; color: var(--ink); }
.m-tbl a { color: var(--brand); font-weight: 700; text-decoration: none; }
.m-spectbl { min-width: 0; }
.m-spectbl th { width: 42%; }
.m-cmp-w { overflow-x: auto; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.m-cmp { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .92rem; }
.m-cmp th, .m-cmp td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.m-cmp tbody th { color: var(--ink-3); font-weight: 650; width: 170px; position: sticky; left: 0; background: var(--surface); }
.m-cmp thead th { vertical-align: bottom; }
.m-cmp-v { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.m-cmp-v img { width: 100%; max-width: 220px; height: 120px; object-fit: contain; border-radius: 16px; background: var(--pic); margin-bottom: 10px; }
.m-cmp-v:not(.is-cut) img { object-fit: cover; }
.m-cmp-b { font: 700 .78rem/1.2 var(--f-body); color: var(--ink-3); }
.m-cmp-n { font: 800 1.02rem/1.25 var(--f-body); color: var(--ink); text-decoration: none; }
.m-cmp-x { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(5, 7, 11, .62); color: #fff; z-index: 2; }
.m-cmp-x .i { width: 14px; height: 14px; }
.m-prose { font-size: 1.04rem; line-height: 1.7; color: var(--ink-2); }
.m-prose h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); color: var(--ink); margin: 1.8em 0 .5em; }
.m-prose h3 { font-size: 1.15rem; color: var(--ink); margin: 1.4em 0 .4em; }
.m-prose strong { color: var(--ink); }
.m-prose a { color: var(--brand); font-weight: 650; }
.m-prose ul, .m-prose ol { padding-left: 1.3em; }
.m-prose li { margin-bottom: .5em; }
.m-prose blockquote { margin: 1.4em 0; padding: 18px 22px; border-radius: var(--r-m); background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--volt); color: var(--ink); }
.m-prose blockquote p:last-child { margin: 0; }
.m-prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .92rem; display: block; overflow-x: auto; }
.m-prose th, .m-prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.m-prose thead th { color: var(--ink-3); font-size: .8rem; }
.m-prose > :first-child { margin-top: 0; }
.m-faq-g { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.m-acc { border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 10px; }
.m-acc[open] { box-shadow: inset 0 0 0 1px var(--line-2); }
.m-acc summary { list-style: none; cursor: pointer; padding: 20px 60px 20px 22px; position: relative; font: 750 1rem/1.4 var(--f-body); }
.m-acc summary::-webkit-details-marker { display: none; }
.m-acc summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FA8F2' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat; transition: transform .3s var(--ease); }
.m-acc[open] summary::after { transform: rotate(45deg); }
.m-acc-b { padding: 0 22px 20px; color: var(--ink-2); font-size: .96rem; }
.m-acc-b > :last-child { margin-bottom: 0; }
.m-ticks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.m-ticks li { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: .93rem; color: var(--ink-2); }
.m-ticks .i { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); flex: 0 0 auto; }

/* ── 16. Vehicle page ──────────────────────────────────────────────── */
.m-vdp { padding-top: 8px; }
.m-vdp-g { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(20px, 3.5vw, 48px); align-items: start; }
.m-vdp-l { position: sticky; top: calc(var(--hd-h) + var(--hd-top) + 16px); }
.m-stage { position: relative; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: radial-gradient(80% 60% at 50% 100%, rgba(79, 168, 242, .38), transparent 62%), radial-gradient(60% 50% at 15% 0%, rgba(123, 227, 255, .10), transparent 60%), linear-gradient(180deg, #070B12, #0B1626); }
.m-stage::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -40px; height: 46%; z-index: -1; background: repeating-linear-gradient(90deg, rgba(123, 227, 255, .10) 0 1px, transparent 1px 70px); transform: perspective(400px) rotateX(62deg); transform-origin: bottom; -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%); mask-image: linear-gradient(180deg, transparent, #000 50%); }
.m-stage-road { position: absolute; left: 0; right: 0; bottom: 34%; height: 1px; background: linear-gradient(90deg, transparent, rgba(123, 227, 255, .5), transparent); z-index: -1; }
.m-stage.is-cut img { width: 86%; height: 82%; object-fit: contain; filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .45)); }
.m-stage.is-photo { padding: 22px; }
.m-stage.is-photo img { width: 100%; height: 100%; object-fit: contain; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); background: #fff; }
.m-stage-tag { position: absolute; left: 18px; top: 18px; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(5, 7, 11, .6); color: #DDE7F2; font: 700 .8rem/1 var(--f-body); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.m-stage-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--n-ok); box-shadow: 0 0 10px var(--n-ok); }
.m-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.m-sw { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border: 0; color: var(--ink-2); font: 650 .82rem/1 var(--f-body); }
.m-sw i { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .4); }
.m-sw[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--volt); color: var(--ink); }
.m-swatches .m-note { width: 100%; margin-top: 4px; }
.m-keyspec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.m-keyspec div { border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: 14px 16px; min-width: 0; }
.m-keyspec span { display: block; font: 700 .74rem/1.3 var(--f-body); color: var(--ink-3); }
.m-keyspec b { display: block; font: 600 1rem/1.25 var(--f-display); letter-spacing: -.02em; margin-top: 4px; overflow-wrap: anywhere; }
.m-vdp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.m-vdp-h { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); line-height: 1.02; margin: 0; }
.m-vdp-lead { color: var(--ink-2); font-size: 1.05rem; margin: 14px 0 0; }
.m-vdp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.m-vdp-chips span { min-height: 30px; padding: 5px 12px; border-radius: 999px; background: var(--surface-3); font: 650 .8rem/1.3 var(--f-body); color: var(--ink-2); }
.m-price { margin-top: 22px; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); padding: 22px; }
.m-price-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.m-price-big { font: 600 clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem)/1 var(--f-display); letter-spacing: -.035em; margin: 0; }
.m-price-cap { font-size: .82rem; color: var(--ink-3); margin: 8px 0 0; }
.m-cmpbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font: 700 .82rem/1 var(--f-body); }
.m-cmpbtn[aria-pressed="true"] { background: var(--volt); color: var(--volt-ink); box-shadow: none; }
.m-cmpbtn .i { width: 16px; height: 16px; }
.m-fin { margin-top: 18px; padding: 16px; border-radius: 20px; background: var(--surface-2); }
.m-fin-row { display: grid; gap: 4px; }
.m-fin-dep { display: flex; justify-content: space-between; font: 700 .82rem/1.2 var(--f-body); color: var(--ink-2); }
.m-fin-dep output { font: 600 .95rem/1 var(--f-display); color: var(--ink); }
.m-fin-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.m-fin-g div { padding: 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.m-fin-g div.wide { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.m-fin-g div.hl { box-shadow: inset 0 0 0 1.5px var(--volt); }
.m-fin-g dt { font: 700 .72rem/1.2 var(--f-body); color: var(--ink-3); }
.m-fin-g dd { margin: 4px 0 0; font: 600 1rem/1.15 var(--f-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.m-fin-g div.hl dd { color: var(--hl); }
.m-fin-note { font-size: .8rem; color: var(--ink-3); margin: 12px 0 0; }
.m-fin-note a { color: var(--brand); font-weight: 700; }
.m-vdp-earn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.m-vdp-earn div { padding: 12px 14px; border-radius: 16px; background: var(--ok-soft); }
.m-vdp-earn span { display: block; font: 700 .74rem/1.2 var(--f-body); color: var(--ink-3); }
.m-vdp-earn b { font: 600 1.2rem/1.2 var(--f-display); letter-spacing: -.02em; }
.m-vdp-earn b.ok { color: var(--ok); }
.m-vdp-earn p { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--ink-3); }
.m-price-acts { display: grid; gap: 8px; margin-top: 16px; }
.m-price-row { display: flex; flex-wrap: wrap; gap: 8px; }
.m-price-row .btn { flex: 1 1 140px; }
.m-reserve { display: grid; gap: 6px; }
.m-avail { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font: 650 .84rem/1.35 var(--f-body); color: var(--ink-2); }
.m-avail i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.m-prov { margin-top: 14px; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: 18px 20px; }
.m-prov-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.m-prow { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.m-prow span { color: var(--ink-3); }
.m-prow b { text-align: right; font-weight: 700; }
.m-prow b.ok { color: var(--ok); }
.m-vtabs { margin-top: clamp(40px, 6vw, 72px); }
.m-vtabs [role="tabpanel"] { margin-top: 18px; }
.m-vtabs .m-sec { padding-top: 0; }
.m-vtabs .m-sec .wrap { padding-inline: 0; }

/* ── 17. Tray, drawer, terms, articles, 404 ────────────────────────── */
.m-tray { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 75; width: min(620px, calc(100vw - 24px)); }
.m-tray-in { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--island); color: #fff; -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.m-tray-l { display: flex; align-items: center; gap: 8px; font: 700 .86rem/1 var(--f-body); }
.m-tray-slots { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.m-slot { position: relative; width: 58px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .08); flex: 0 0 auto; display: grid; place-items: center; }
.m-slot img { width: 92%; height: 90%; object-fit: contain; }
.m-slot button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #fff; color: #05070B; display: grid; place-items: center; font-size: 12px; line-height: 1; padding: 0; }
.m-slot.empty { border: 1.5px dashed rgba(255, 255, 255, .2); background: transparent; }
.m-tray .ib { background: rgba(255, 255, 255, .08); color: #fff; width: 40px; height: 40px; flex-basis: 40px; }
.m-tray .btn { min-height: 42px; }
body.drawer-open .m-tray, body.sheet-open .m-tray { opacity: 0; pointer-events: none; }
.m-drawer .m-form .btn-block { margin-top: 4px; }
.m-drawer .qd-bd { padding-bottom: 28px; }
.m-drawer .m-fields { grid-template-columns: 1fr 1fr; }
.m-terms-hd { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.m-terms-hd h2 { font-size: 1.6rem; margin: 0; }
.m-terms .m-tbl { min-width: 0; }
.m-terms .m-tbl td { text-align: right; }
.m-terms .m-tbl th { width: 60%; }
.m-terms h3 { margin: 22px 0 6px; font-size: 1.05rem; }
.m-sched { margin-top: 18px; }
.m-sched summary { cursor: pointer; font-weight: 750; padding: 10px 0; }
.m-terms .btn-row { margin-top: 22px; }
.m-article .m-h { max-width: 18em; }
.m-article .m-prose { margin-top: 30px; }
.m-art-img { margin: 26px 0 0; }
.m-art-img img { border-radius: var(--r-l); }
.m-art-cta { margin-top: 36px; }
.m-art-cta p { color: var(--ink-2); }
.m-404-code { font: 600 clamp(5rem, 18vw, 10rem)/.9 var(--f-display); letter-spacing: -.06em; color: var(--volt); margin: 0 0 10px; }

/* ── 18. Footer and island ─────────────────────────────────────────── */
.m-ft { padding: clamp(40px, 6vw, 72px) 0 calc(28px + env(safe-area-inset-bottom)); }
.m-ftpanel { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); border-radius: var(--r-xl); padding: clamp(26px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 48px); }
.m-ft-about img { height: 28px; width: auto; }
.m-ft-about p { color: var(--ink-2); font-size: .94rem; margin: 16px 0 18px; max-width: 34em; }
.m-ft-mail { margin: 14px 0 0 !important; }
.m-ft-mail a { color: var(--ink-2); font-weight: 650; }
.m-fcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.m-fh { font: 700 .82rem/1 var(--f-body); color: var(--ink-3); margin: 6px 0 14px; letter-spacing: 0; }
.m-fcols ul { list-style: none; margin: 0; padding: 0; }
.m-fcols li { margin: 0; }
.m-fcols a { display: block; padding: 6px 0; font: 600 .94rem/1.35 var(--f-body); color: var(--ink); text-decoration: none; }
.m-fcols a:hover { color: var(--hl); }
.m-fam { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--line); }
.m-fam a { min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); display: inline-flex; align-items: center; gap: 8px; font: 650 .88rem/1 var(--f-body); color: var(--ink); text-decoration: none; }
.m-fam a.on { background: var(--ink); color: var(--bg); }
.m-fam i { width: 10px; height: 10px; border-radius: 50%; }
.m-fam .fam-green i { background: #86BC2B; } .m-fam .fam-mobility i { background: #3A9BEF; } .m-fam .fam-digital i { background: #F39318; }
.fam-ene-logo { height: 16px; width: auto; }
.fam-ene-logo.dk { display: none; }
[data-theme="light"] .fam-ene-logo { display: none; }
[data-theme="light"] .fam-ene-logo.dk { display: inline; }
.m-ft-reg { grid-column: 1 / -1; font-size: .78rem; line-height: 1.7; color: var(--ink-3); }
.m-ft-reg b, .m-ft-reg strong { color: var(--ink-2); font-weight: 650; }
.m-ft-reg p { margin: 0; }
.m-ft-fine { grid-column: 1 / -1; font-size: .74rem; color: var(--ink-3); margin: 0; }
.island-in { border-radius: 28px; height: 70px; padding: 7px; gap: 4px; }
.it { border-radius: 21px; font: 700 .69rem/1 var(--f-body); }
.it-primary, .it-primary[aria-current] { background: var(--volt); color: var(--volt-ink); }
.it-primary .it-ic, .it-primary[aria-current] .it-ic { color: var(--volt-ink); }
.sheet-panel { background: var(--bg); }
.sq .i { color: var(--hl); }

/* ── 19. Responsive ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .m-types-g { grid-template-columns: 1fr 1fr; }
  .m-type.big { grid-column: 1 / -1; }
  .m-feat-g.c4, .m-promise-g { grid-template-columns: 1fr 1fr; }
  .m-earn-g, .m-fuel-g, .m-steps-g, .m-faq-g, .m-match-g { grid-template-columns: minmax(0, 1fr); }
  .m-plans-g { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .m-vdp-g { grid-template-columns: minmax(0, 1fr); }
  .m-vdp-l { position: static; }
  .m-bento-g { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .t-earn, .t-map { grid-column: span 6; }
  .t-cost, .t-vin, .t-trade { grid-column: span 3; }
  .t-trade { grid-column: span 6; }
  .m-ftpanel { grid-template-columns: 1fr; }
  .m-map-g { grid-template-columns: minmax(0, 1fr); }
  .m-locs { max-height: none; }
}
@media (max-width: 960px) {
  :root { --gut: 18px; }
  main { padding-top: calc(var(--hd-h) + var(--hd-top) + 12px); }
  .m-hero { margin: 8px; border-radius: 32px; padding: calc(var(--hd-h) + var(--hd-top) + 30px) 0 70px; }
  .m-hero-h { font-size: clamp(2.1rem, 1.2rem + 4vw, 2.6rem); }
  .m-hero-row { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 26px; }
  .m-reg { width: 100%; }
  .m-reg button { flex: 1; justify-content: center; padding: 0 6px; font-size: .78rem; flex-direction: column; gap: 3px; min-height: 58px; }
  .m-offer-big { font-size: 1.5rem; }
  .m-hero-r { min-height: 300px; margin-top: 10px; }
  .m-car-img { right: 50%; transform: translateX(50%); height: 260px; bottom: 22px; }
  .m-car:not([hidden]) .m-car-img { animation: none; }
  .m-spec.s1 { display: none; } .m-spec.s2 { right: 0; top: 0; } .m-spec.s3 { left: 0; bottom: 4px; }
  .m-spec b { font-size: 1.05rem; }
  .m-dock { margin-top: -30px; padding: 0 14px; }
  .m-search { padding-left: 18px; }
  .m-search input[type="search"] { font-size: .95rem; height: 48px; }
  .m-search .btn { min-height: 48px; padding: 0 18px; }
  .m-qf { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding: 0 14px; }
  .m-qf::-webkit-scrollbar { display: none; }
  .m-qf a { flex: 0 0 auto; }
  .m-sh { flex-direction: column; align-items: flex-start; }
  .m-type { height: 210px; padding: 16px; }
  .m-type.big, .m-types-g .m-type:last-child { height: 240px; }
  .m-type h3 { font-size: 1.05rem; }
  .m-type img { height: 52%; }
  .m-rail-in { grid-auto-columns: 80%; }
  .m-tile { padding: 24px; }
  .m-tile-in { padding: 24px 24px 0; }
  .t-map { min-height: 340px; }
  .m-cta { margin: var(--sec) 8px 0; border-radius: 32px; padding-bottom: 250px; }
  .m-cta-img { width: 88%; right: 6%; bottom: 24px; }
  .m-ph-slab, .m-ph-vehicle { margin: 0 8px; border-radius: 32px; padding: calc(var(--hd-h) + var(--hd-top) + 26px) 0 48px; }
  .m-ph-vehicle.has-img .m-ph-in { grid-template-columns: minmax(0, 1fr); }
  .m-ph-car { min-height: 220px; order: 2; }
  .m-ph-img { max-height: 240px; }
  .m-slab, .m-soft { margin-inline: 8px; border-radius: 32px; }
  .m-city-g { grid-template-columns: minmax(0, 1fr); }
  .m-earn-out { grid-template-columns: 1fr 1fr; }
  .m-notes { grid-template-columns: minmax(0, 1fr); }
  .m-form-g, .m-form-g.left { grid-template-columns: minmax(0, 1fr); }
  .m-form-g.left .m-form-side { order: 0; }
  .m-keyspec { grid-template-columns: 1fr 1fr; }
  .m-fin-g { grid-template-columns: 1fr 1fr; }
  .m-fcols { grid-template-columns: 1fr 1fr; }
  .m-tray { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .m-stage { border-radius: 30px; }
}
@media (max-width: 640px) {
  .m-feat-g, .m-feat-g.c2, .m-feat-g.c3 { grid-template-columns: minmax(0, 1fr); }
  .m-feat-g.c4, .m-promise-g { grid-template-columns: 1fr 1fr; }
  .m-feat-g.c4 .m-feat, .m-pr { padding: 18px; }
  .m-bento-g { grid-template-columns: minmax(0, 1fr); }
  .t-earn, .t-map, .t-cost, .t-vin, .t-trade { grid-column: auto; }
  .m-fields { grid-template-columns: minmax(0, 1fr); }
  .m-fld.half { grid-column: 1 / -1; }
  .m-calc-row, .m-tco-cols { grid-template-columns: minmax(0, 1fr); }
  .m-earn-out { grid-template-columns: 1fr 1fr; }
  .m-box { padding: 14px; }
  .m-fbar { gap: 8px; }
  .m-tseg span { padding: 0 13px; font-size: .82rem; }
  .m-rhd .m-alert-btn { margin-left: 0; }
  .m-map-box { min-height: 360px; }
  .m-drawer .m-fields { grid-template-columns: minmax(0, 1fr); }
  .m-terms-hd { flex-direction: column; }
  .m-callout { padding: 18px; }
  .m-grid { grid-template-columns: minmax(0, 1fr); }
  .vc-pic { height: 200px; }
}
@media (max-width: 400px) {
  .m-feat-g.c4, .m-promise-g { grid-template-columns: minmax(0, 1fr); }
  .m-reg button span { font-size: .74rem; }
}

/* ── 20. Motion, print ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .m-hero::before { animation: none; }
  .vc:hover, .m-type:hover, a.m-feat:hover, .m-cityc:hover { transform: none; }
}
@media print {
  .no-print, .m-tray, .m-drawer, .crumbs, .ft, .hd, .island { display: none !important; }
  body, .m-card, .m-terms { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  main { padding: 0 !important; }
  .m-tbl-w, .m-tbl { box-shadow: none !important; }
  .m-sched[open] summary, .m-sched summary { display: none; }
  .m-sched > table { display: table; }
  .m-terms * { color: #000 !important; }
}

/* ── 20. Session 2 additions ───────────────────────────────────────── */
.m-slot button .i { width: 12px; height: 12px; }
.m-tray [data-cmp-go][aria-disabled="true"] { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
@media (max-width: 960px) { .m-tray { bottom: calc(96px + env(safe-area-inset-bottom)); } }
.m-ft-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -8px 0 0; font-size: .82rem; }
.m-ft-legal a, .m-ft-legal button { color: var(--ink-2); font: 650 .82rem/1.4 var(--f-body); text-decoration: none; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.m-ft-legal a:hover, .m-ft-legal button:hover { color: var(--ink); text-decoration: underline; }
.m-fin-g dd { font-size: 1.12rem; }
.m-price-top { flex-wrap: wrap; }
.m-price-top > div { min-width: 0; }
.m-cmpbtn { flex: 0 0 auto; }
.m-fin-g dd { white-space: nowrap; overflow-wrap: normal; font-size: clamp(.98rem, .8rem + 1vw, 1.12rem); }
.m-fin-g div.wide dd { white-space: nowrap; }
@media (max-width: 480px) {
  .m-price-big { font-size: clamp(1.7rem, 1rem + 4vw, 2rem); }
  .m-fin-g div { padding: 10px; }
  .m-fin-g div.wide { flex-direction: column; align-items: flex-start; gap: 2px; }
}