/* Vehicles module page (design node aa89l). Builds on /styles.css; values mirror the 1440px design.
   The "garage" palette is this page's dark theme. */
:root {
  --garage: #0E0D07;
  --garage-2: #1A1910;
  --garage-line: #2E2C1F;
  --garage-text: #B9B6A6;
  --alert: #FF5A3C;
  --ok: #5BD38A;
  --dark-copy: #D6D3C4;
}
body.v { background: var(--garage); }

/* ---------- Shared bits ---------- */
.v-btn-sun { background: var(--sun); color: var(--ink); font-weight: 700; padding: 17px 26px; }
.v-btn-sun.btn-sm { padding: 11px 18px; font-size: 14px; }
.v-btn-ghost { color: #fff; padding: 17px 22px; box-shadow: inset 0 0 0 1.5px #fff; }
.v-btn-ghost:hover { background: rgba(255, 255, 255, .06); }
.v-body { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.v-body-dark { font-size: 17px; line-height: 1.6; color: var(--dark-copy); }
.v-h60 { font: 800 60px/1 var(--font-display); letter-spacing: -2px; }
.v-h56 { font: 800 56px/1 var(--font-display); letter-spacing: -1.8px; color: #fff; }
.v-head-l { display: flex; flex-direction: column; gap: 16px; width: 780px; max-width: 100%; }
.v-head-760 { width: 760px; }
.v-head-free { width: auto; }
.v-head-free h2 { line-height: 1.2; }
/* After .v-h56/.v-h60 so these colour overrides win at equal specificity. */
.v-white { color: #fff; }
.v-ink { color: var(--ink); }
.v-lede-420 { width: 420px; }
.v-light { background: var(--paper); padding-block: 120px; }
.v-stack { display: flex; flex-direction: column; gap: 56px; }
.v-stack-48 { gap: 48px; }
.v .split-head { align-items: flex-end; }

/* ---------- Nav ---------- */
.v-nav { position: sticky; top: 0; z-index: 50; background: var(--garage); box-shadow: inset 0 -1px 0 var(--garage-line); }  /* inside stroke, like the design: 83px total */
.v-nav-in { position: relative; }  /* the shared megamenu panel anchors to this */
.v-nav-in { display: flex; align-items: center; justify-content: space-between; padding-block: 22px; }
.v-nav-left { display: flex; align-items: center; gap: 20px; }
/* The breadcrumb doubles as the modules megamenu trigger (megamenu.js). */
.v-crumb {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--garage-line); font: 400 13px/1.2 var(--font-body); color: var(--garage-text);
  transition: box-shadow .15s ease, background-color .15s ease;
}
.v-crumb > .lucide { width: 13px; height: 13px; transition: rotate .2s ease; }
.v-crumb:hover, .v-crumb[aria-expanded="true"] { box-shadow: inset 0 0 0 1px #4A4834; color: #E6E3D6; }
.v-crumb[aria-expanded="true"] { background: var(--garage-2); }
.v-crumb[aria-expanded="true"] .v-crumb-sep { rotate: 90deg; }
.v-crumb-cur { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.v-crumb-cur .lucide { width: 14px; height: 14px; }
.v-crumb:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
.v-links { display: flex; align-items: center; gap: 32px; }  /* center: the language pill is taller than the links */
.v-links a { font-size: 15px; font-weight: 500; color: #E6E3D6; }
.v-links a:hover { color: #fff; }

/* Hamburger on the dark garage nav. */
.v .mn-btn { background: var(--garage-2); color: #fff; box-shadow: inset 0 0 0 1px var(--garage-line); }

/* ---------- Hero ---------- */
.v-hero { background: var(--garage); overflow: hidden; }
.v-hero-in {
  position: relative; max-width: 1440px; margin-inline: auto; min-height: 780px;
  /* Headlight glow (900px radial, centred at 1210,250 on the design frame) + the faint 164px column grid. */
  background:
    radial-gradient(450px 450px at 1210px 250px, #FFDF0030, #FFDF0000),
    repeating-linear-gradient(90deg, #FFFFFF08 0 1px, transparent 1px 164px) 64px 0 / 1313px 100% no-repeat;
}
.v-hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; width: 700px; padding: 96px 0 96px 64px; box-sizing: content-box; }
.v-kicker { display: flex; align-items: center; gap: 10px; font: 400 13px/1.2 var(--font-mono); color: var(--garage-text); }
.v-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; background: var(--sun); color: var(--ink); font-weight: 600; font-size: 12px; }
.v-badge .lucide { width: 14px; height: 14px; }
.v h1 { font: 800 92px/.94 var(--font-display); letter-spacing: -3.5px; color: #fff; }
.v-sub { width: 560px; max-width: 100%; font-size: 19px; line-height: 1.55; color: var(--dark-copy); }
.v-ctas { padding-top: 6px; }
.v-micro { font: 400 12px/1.2 var(--font-mono); color: #8F8B76; }
/* Art is a 680x780 crop of the design frame's right edge (x760–1440). */
.v-hero-art { position: absolute; top: 0; right: 0; width: min(680px, 47vw); aspect-ratio: 680 / 780; }

/* ---------- Spec bar ---------- */
.v-specs { background: var(--garage); }
.v-specs-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.v-specs-in::before { content: none; }
.v-specs-in { position: relative; }
.v-specs-in li { display: flex; flex-direction: column; gap: 10px; padding: 36px 32px 40px; border-top: 1px solid var(--garage-line); border-bottom: 1px solid var(--garage-line); }
.v-specs-in li + li { border-left: 1px solid var(--garage-line); }
.v-specs-in li:first-child { padding-left: 0; }
.v-specs-in strong { font: 600 44px/1.25 var(--font-mono); letter-spacing: -1.5px; color: var(--sun); }
.v-specs-in span { font-size: 15px; line-height: 1.45; color: var(--garage-text); }

/* ---------- Snap the dash ---------- */
.v-snap { background: var(--sun); overflow: hidden; }
.v-snap-in { position: relative; max-width: 1440px; margin-inline: auto; min-height: 1060px; }
.v-snap-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 26px; width: 520px; padding: 223px 0 96px 64px; box-sizing: content-box; }
.v-pill-ink { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--sun); font: 600 12px/1.2 var(--font-mono); }
.v-pill-ink .lucide { width: 14px; height: 14px; }
.v-snap h2 { font: 800 84px/.95 var(--font-display); letter-spacing: -3px; color: var(--ink); }
.v-steps { padding-top: 8px; }
.v-steps li { display: flex; align-items: center; gap: 16px; padding-block: 16px; border-top: 1px solid #12110026; }
.v-num { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--ink); color: var(--sun); }
.v-num .lucide { width: 18px; height: 18px; }
.v-steps div { display: flex; flex-direction: column; gap: 3px; }
.v-steps strong { font-size: 17px; font-weight: 700; line-height: 1.2; }
.v-steps span:not(.v-num) { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
/* 840x1060 crop (x600–1440) holding the chat window and the read-out callout. */
.v-snap-art { position: absolute; top: 0; right: 0; width: min(840px, 58vw); aspect-ratio: 840 / 1060; }

/* ---------- Service ---------- */
.v-service { display: flex; gap: 24px; }
.v-service-art { flex: 1; min-width: 0; aspect-ratio: 848 / 560; border-radius: 28px; overflow: hidden; background: var(--sun); }
.v-sheet { width: 440px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--card); border-radius: 28px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.v-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; background: var(--ink); }
.v-sheet-head h3 { font: 700 20px/1.2 var(--font-display); color: #fff; }
.v-sheet-head span { font: 400 12px/1.2 var(--font-mono); color: var(--sun); }
.v-sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.v-sheet td, .v-sheet th { white-space: nowrap; }
.v-sheet th { padding: 12px 0; background: var(--paper-2); font: 400 11px/1.2 var(--font-mono); letter-spacing: .5px; color: var(--muted); text-align: left; }
.v-sheet td { padding: 13px 0; border-top: 1px solid var(--line); font: 400 13px/1.2 var(--font-mono); color: var(--ink-2); }
.v-sheet td:first-child { font: 500 15px/1.2 var(--font-body); color: var(--ink); }
.v-sheet th:first-child, .v-sheet td:first-child { padding-left: 24px; }
.v-sheet th:nth-child(2), .v-sheet td:nth-child(2) { width: 100px; }
.v-sheet th:last-child, .v-sheet td:last-child { width: 80px; padding-right: 24px; }  /* 56px column + 24px padding (border-box) */
.v-sheet-more { flex: 1; padding: 14px 24px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.2; color: var(--muted); }

/* ---------- Fuel ---------- */
.v-fuel { background: var(--garage); padding-block: 120px; }
.v-fuel-in { display: flex; align-items: center; gap: 80px; }
.v-fuel-copy { width: 500px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.v-note { display: flex; gap: 14px; padding: 20px; border-radius: 16px; background: var(--garage-2); box-shadow: inset 0 0 0 1px var(--garage-line); }
.v-note > .lucide { width: 20px; height: 20px; color: var(--sun); }
.v-note div { display: flex; flex-direction: column; gap: 6px; }
.v-note strong { font-size: 15px; font-weight: 700; line-height: 1.2; color: #fff; }
.v-note span { font-size: 14px; line-height: 1.55; color: var(--garage-text); }
.v-fuel-visual { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.v-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v-gauges li { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 20px; background: var(--garage-2); box-shadow: inset 0 0 0 1px var(--garage-line); }
.v-gl { font: 400 11px/1.2 var(--font-mono); letter-spacing: 1px; color: var(--garage-text); }
.v-gv { display: flex; align-items: flex-end; gap: 4px; font: 400 15px/1.6 var(--font-mono); color: var(--garage-text); white-space: nowrap; }
.v-gv b { font: 600 36px/1.15 var(--font-mono); letter-spacing: -1px; color: var(--sun); }
.v-gs { font-size: 13px; line-height: 1.2; color: #8F8B76; }
.v-fuel-browser { width: 100%; border-radius: 14px; }

/* ---------- Glovebox cards ---------- */
.v-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 20px; }  /* rows are 48px apart in the design, columns 20px */
.v-card { min-height: 339px; display: flex; flex-direction: column; gap: 24px; padding: 32px; background: var(--card); border-radius: 28px; box-shadow: inset 0 0 0 1px var(--line); }
.v-card-head { display: flex; gap: 16px; }
.v-card-head > div { display: flex; flex-direction: column; gap: 6px; }
.v-well { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--ink); color: var(--sun); }
.v-well .lucide { width: 22px; height: 22px; }
.v-card h3 { font: 700 26px/1.2 var(--font-display); letter-spacing: -.5px; }
.v-card-head p { font-size: 15px; line-height: 1.55; color: var(--muted); }
.v-mini { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--paper); }
.v-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.v-row-active { box-shadow: inset 0 0 0 1.5px var(--ink); }
.v-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v-row strong { font-size: 14px; font-weight: 600; line-height: 1.2; }
.v-row > div span { font: 400 11.5px/1.2 var(--font-mono); color: var(--muted); }
.v-ico { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--paper-2); }
.v-ico .lucide { width: 17px; height: 17px; }
.v-ico-alert { background: #FFE4DE; color: #C2321A; }
.v-tag { flex-shrink: 0; padding: 4px 9px; border-radius: 6px; background: var(--paper-2); font: 600 11px/1.2 var(--font-mono); font-style: normal; color: var(--ink-2); white-space: nowrap; }
.v-tag-sun { background: var(--sun); color: var(--ink); }
.v-tag-alert { background: #FFE4DE; color: #C2321A; }
.v-tag-ok { background: #DDF5E6; color: #1E7A45; }
.v-files { display: flex; flex-wrap: wrap; gap: 8px; }
.v-files span { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 9px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 400 11.5px/1.2 var(--font-mono); color: var(--ink-2); }
.v-files .lucide { width: 14px; height: 14px; color: var(--muted); }
.v-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 4px; font: 400 12px/1.2 var(--font-mono); color: var(--ink-2); }
.v-flow span { display: flex; align-items: center; gap: 6px; }
.v-flow .lucide { width: 14px; height: 14px; color: var(--ink); }
.v-flow .v-arrow { color: var(--muted); }

/* ---------- History ---------- */
.v-history { background: var(--garage); overflow: hidden; }
.v-history-in {
  position: relative; max-width: 1440px; margin-inline: auto; min-height: 760px;
  background: radial-gradient(450px 450px at 150px 650px, #FFDF0022, #FFDF0000);
}
/* 800x760 crop (x0–800) of the design's history frame: the timeline browser, cut at the section edge. */
.v-history-art { position: absolute; top: 0; left: 0; width: min(800px, 55vw); }
.v-history-copy { position: relative; display: flex; flex-direction: column; gap: 24px; width: 552px; margin-left: calc(min(800px, 55vw) + 24px); padding-block: 120px; }
.v-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.v-chips li { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--garage-line); font-size: 13px; line-height: 1.2; color: #E6E3D6; }
.v-chips .lucide { width: 14px; height: 14px; color: var(--sun); }

/* ---------- Family & AI ---------- */
.v-family { display: flex; align-items: flex-start; gap: 20px; }
.v-points { flex: 1; min-width: 0; }
.v-points li { display: flex; gap: 20px; padding-block: 24px; }
.v-points li + li { border-top: 1px solid var(--line); }
.v-sunwell { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--sun); }
.v-sunwell .lucide { width: 20px; height: 20px; }
.v-points div { display: flex; flex-direction: column; gap: 6px; }
.v-points h3 { font: 700 22px/1.2 var(--font-display); }
.v-points p { font-size: 15px; line-height: 1.55; color: var(--muted); }
.v-ai { width: 560px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 28px; background: var(--ink); }
.v-ai-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--sun); font: 600 12px/1.2 var(--font-mono); }
.v-ai-badge .lucide { width: 13px; height: 13px; }
.v-ai h3 { font: 700 28px/1.1 var(--font-display); color: #fff; }
.v-chat { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px; background: var(--garage-2); }
.v-bubble { align-self: flex-end; padding: 11px 15px; border-radius: 16px 16px 4px 16px; background: var(--sun); font-size: 14px; font-weight: 500; line-height: 1.2; }
.v-reply { border-radius: 14px; background: var(--card); overflow: hidden; }
.v-reply-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--paper); }
.v-reply-head .lucide { width: 15px; height: 15px; }
.v-reply-head strong { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.2; }
.v-reply-head code { font: 400 11px/1.2 var(--font-mono); color: var(--muted); }
.v-reply dl { margin: 0; }
.v-reply dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.2; }
.v-reply dt { color: var(--muted); }
.v-reply dd { margin: 0; font: 600 13px/1.2 var(--font-mono); color: var(--ink); }

/* ---------- Final CTA ---------- */
.v-final-wrap { background: var(--garage); padding-block: 96px; }
.v-final { position: relative; height: 540px; border-radius: 36px; overflow: hidden; background: var(--sun); }
.v-final-car { position: absolute; top: 0; right: 0; width: 752px; height: 100%; max-width: none; object-fit: cover; }
/* 300px fade from solid yellow into the photo, starting 20px before it (x540 on the 1312 card). */
.v-final::after { content: ""; position: absolute; top: 0; bottom: 0; right: 472px; width: 300px; background: linear-gradient(90deg, var(--sun), #FFDF0000); pointer-events: none; }
.v-final-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 26px; width: 620px; max-width: 100%; padding: 72px 0 0 64px; box-sizing: content-box; }
.v-final h2 { font: 800 68px/.96 var(--font-display); letter-spacing: -2.4px; color: var(--ink); }
.v-final-content > p:not(.v-final-price) { width: 480px; max-width: 100%; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.v-final .ctas { padding-top: 6px; }
.v-final .btn-ink { padding: 18px 26px; font-weight: 700; }
.v-btn-demo { padding: 18px 22px; }
.v-final-price { font: 400 12px/1.2 var(--font-mono); color: var(--ink-2); }

.v-footer { background: var(--garage); border-top: 1px solid var(--garage-line); }

/* ================= Responsive ================= */
.v-card-b { min-height: 307px; }  /* design rows: 339px, then 307px */

@media (max-width: 1320px) {
  .v-links { gap: 24px; }
  .v h1 { font-size: clamp(60px, 6.2vw, 92px); letter-spacing: -2.5px; }
  .v-hero-copy { width: calc(100% - min(680px, 47vw) - 64px); }
  .v-snap h2 { font-size: clamp(56px, 5.6vw, 84px); }
  .v-snap-copy { width: calc(100% - min(840px, 58vw) - 88px); padding-top: clamp(120px, 15.5vw, 223px); }
  .v-history-copy { width: auto; margin-right: 48px; }
  .v-fuel-in { gap: 48px; }
  .v-fuel-copy { width: 420px; }
  .v-gv b { font-size: 30px; }
  .v-final-content { width: 520px; }
  .v-final h2 { font-size: 58px; }
}

@media (max-width: 1080px) {
  .v-nav-in { gap: 8px; }
  .v-nav-left { margin-right: auto; }  /* CTA + menu button sit together on the right */
  .v-links { display: none; }
  .v-hero-in, .v-snap-in, .v-history-in { min-height: 0; }
  .v-hero-copy, .v-snap-copy { width: auto; padding: 72px var(--gutter) 40px; }
  .v-hero-art, .v-snap-art, .v-history-art { position: relative; margin-inline: auto; }
  .v-hero-art { width: min(560px, 100%); }
  .v-snap-art { width: min(720px, 100%); max-height: 760px; overflow: hidden; aspect-ratio: auto; height: min(760px, calc(min(720px, 100vw) * 1060 / 840)); }
  .v-history-in { display: flex; flex-direction: column-reverse; }
  .v-history-art { width: min(720px, 100%); margin-left: 0; }
  .v-history-copy { width: auto; margin: 0; padding: 72px var(--gutter) 24px; }
  .v-light, .v-fuel { padding-block: 96px; }
  .v .split-head { flex-direction: column; align-items: flex-start; }
  .v-lede-420 { width: 100%; max-width: 620px; }
  .v-service, .v-fuel-in, .v-family { flex-direction: column; align-items: stretch; }
  .v-service-art { flex: none; }
  .v-sheet, .v-fuel-copy, .v-ai { width: 100%; }
  .v-specs-in { grid-template-columns: 1fr 1fr; }
  .v-cards { grid-template-columns: 1fr; gap: 20px; }
  .v-card, .v-card-b { min-height: 0; }
  .v-specs-in li:nth-child(3) { border-left: 0; padding-left: 0; }
  .v-specs-in li:nth-child(n+3) { border-top: 0; }
  .v-final { height: auto; padding-bottom: 300px; }
  .v-final-car { top: auto; bottom: 0; width: 100%; height: 320px; object-position: 30% 50%; }
  .v-final::after { top: auto; bottom: 220px; right: 0; left: 0; width: auto; height: 100px; background: linear-gradient(180deg, var(--sun), #FFDF0000); }
  .v-final-content { width: auto; padding: 56px 40px 0; }
}


@media (max-width: 640px) {
  .v-nav-in { padding-block: 14px; gap: 12px; }
  .v-crumb-mod { display: none; }
  .v-crumb-sep { order: 2; }  /* on phones: "🚗 Vehicles ›", the chevron hinting at the menu */
  .v-nav .logo img { width: 128px; height: 26px; }
  .v-nav-in > .btn { display: none; }  /* logo + module menu need the room; the hero CTA is right below */
  .v-nav .logo { flex-shrink: 0; }
  .v-nav-left { gap: 10px; min-width: 0; }
  .v-kicker { flex-wrap: wrap; }
  .v h1 { font-size: 48px; letter-spacing: -1.6px; }
  .v-sub { font-size: 17px; }
  .v-ctas { flex-direction: column; align-items: stretch; }
  .v-hero-copy, .v-snap-copy, .v-history-copy { padding: 48px var(--gutter) 32px; gap: 22px; }
  .v-specs-in li { padding: 24px 16px 28px; }
  .v-specs-in li:nth-child(odd) { padding-left: 0; }
  .v-specs-in strong { font-size: 32px; }
  .v-specs-in span { font-size: 14px; }
  .v-snap h2 { font-size: 48px; letter-spacing: -1.6px; }
  .v-body { font-size: 16px; }
  .v-snap-art { height: 520px; }
  .v-h60, .v-h56 { font-size: 38px; letter-spacing: -1.2px; line-height: 1.04; }
  .v-h60 br, .v-h56 br, .v-snap h2 br { display: none; }
  .v-light, .v-fuel { padding-block: 72px; }
  .v-stack { gap: 36px; }
  .v-gauges { grid-template-columns: 1fr; }
  .v-card { padding: 22px; border-radius: 22px; }
  .v-card h3 { font-size: 22px; }
  .v-row { padding: 12px; gap: 10px; flex-wrap: wrap; }
  .v-sheet td:first-child { font-size: 14px; }
  .v-ai { padding: 22px; border-radius: 22px; }
  .v-ai h3 { font-size: 24px; }
  .v-reply-head { flex-wrap: wrap; }
  .v-final-wrap { padding-block: 56px; }
  .v-final { border-radius: 28px; padding-bottom: 240px; }
  .v-final-car { height: 260px; }
  .v-final::after { bottom: 180px; }
  .v-final-content { padding: 40px 22px 0; gap: 22px; }
  .v-final h2 { font-size: 42px; letter-spacing: -1.4px; }
  .v-final h2 br { display: none; }
  .v-final .btn { white-space: normal; text-align: center; }
  .v-final .ctas { flex-direction: column; align-items: stretch; }
}

/* Fuel-log chat (data-chat-seq): bubble, typing dots, then the tool reply. motion.js plays it;
   the dots live in the flow only while visible so the card height doesn't jump. */
.v-chat[data-chat-seq] { position: relative; }
.v-typing { position: absolute; left: 18px; display: none; gap: 4px; padding: 11px 14px; border-radius: 16px 16px 16px 4px; background: rgba(255, 255, 255, .12); }
.v-typing b { width: 6px; height: 6px; border-radius: 50%; background: var(--dark-text, #C9C6B6); animation: cd-bounce 1s ease-in-out infinite; }
.v-typing b:nth-child(2) { animation-delay: .15s; }
.v-typing b:nth-child(3) { animation-delay: .3s; }

/* ---------- Hero video ---------- */
/* Play button (shared .hero-play) centred at (1190, 573) of the hero frame = 63.2% / 62.8% of the
   680x780 art crop (x760–1440), 84px = 12.35% wide. */
.v-hero-play { left: 63.2%; top: 62.8%; width: 12.35%; }