/* ==========================================================================
   Shreenath Kia — showroom and car pages
   Loaded after styles.css. Tokens, buttons, tabs, fields, labels, the final form and the footer all come from there;
   only what these two pages add lives here.
   ========================================================================== */

/* Moving between the showroom and a car is one soft cross-fade, where the browser supports it */
@view-transition { navigation: auto; }

/* The header on a white page: solid from the first pixel */
.nav.is-solid { background: var(--white); color: var(--ink); box-shadow: 0 1px 0 var(--rule); }
.nav.is-solid::before { opacity: 0; }
.nav.is-solid:not(.is-scrolled):not(.is-open) .btn { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- Shared pieces ---------- */

/* A car cut out of its turntable frame. The frame is 2:1; the box is exactly the car, so its width can be set to scale. */
.cut { position: relative; display: block; overflow: hidden; aspect-ratio: calc(2 * (var(--r) - var(--l))) / calc(var(--b) - var(--t)); }
.cut img {
  position: absolute; max-width: none; height: auto; object-fit: fill;
  width: calc(100% / (var(--r) - var(--l)));
  left: calc(-100% * var(--l) / (var(--r) - var(--l)));
  top: calc(-100% * var(--t) / (var(--b) - var(--t)));
}

/* Turntable: the car turns under the pointer, a finger, or the arrow keys */
.spin { position: relative; aspect-ratio: 2 / 1; }
.spin canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: pan-y; cursor: grab; opacity: 0; transition: opacity .3s ease; outline-offset: -2px;
  -webkit-user-select: none; user-select: none;
}
.spin.is-ready canvas { opacity: 1; }
.spin.is-swapping canvas { opacity: 0; transition-duration: .15s; }
.spin.is-dragging canvas { cursor: grabbing; }
.spin__bar { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 10px; }
.spin__hint { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 21ch; font-size: .9rem; color: var(--graphite); }
.spin__hint .ico { width: 20px; height: 20px; }

/* Three facts, each a small caption over its value: the same voice as the enquiry bar on the homepage */
.facts { display: flex; margin: 0; }
.facts div { padding: 0 clamp(16px, 2vw, 28px); border-left: 1px solid var(--rule); }
.facts div:first-child { padding-left: 0; border-left: 0; }
.facts dt { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); line-height: 1.4; }
.facts dd { margin: 6px 0 0; font-size: 1.05rem; line-height: 1.3; color: var(--ink); }

/* ==========================================================================
   SHOWROOM 01 · THE RANGE — every car on one floor line, to scale; the chosen one large beneath
   ========================================================================== */

.lineup { padding: calc(var(--nav-h) + clamp(28px, 3.4vw, 52px)) var(--pad) var(--section); }
.lineup__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; }
.lineup__head .h2 { margin-top: 10px; }

/* The rail: one line under all of them, the names and prices beneath it */
.rail { margin-top: clamp(26px, 3vw, 44px); }
.rail__list { display: flex; align-items: flex-end; }
.rail__item { flex: var(--len) 1 0; min-width: 0; transition: opacity .3s var(--ease); }
.rail__car { width: 100%; display: block; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: center; }
.rail__floor { display: block; padding: 0 7% 0; border-bottom: 1px solid var(--rule); }
.rail__floor .cut img { filter: grayscale(1); opacity: .5; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.rail__car:hover .cut img, .rail__car:focus-visible .cut img { filter: none; opacity: .85; }
.rail__car.is-active .cut img { filter: none; opacity: 1; }
.rail__name { display: block; margin-top: 12px; font-size: .98rem; line-height: 1.3; color: var(--graphite); white-space: nowrap; transition: color .25s var(--ease); }
.rail__price { display: block; margin-top: 1px; font-size: .82rem; color: #8b9096; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rail__car:hover .rail__name, .rail__car.is-active .rail__name { color: var(--ink); }
.rail__car.is-active .rail__name { font-weight: 700; }
.rail__car.is-active .rail__price { color: var(--graphite); }
.rail__item.is-off { opacity: .28; }
.rail__note { margin-top: 14px; font-size: .78rem; color: #8b9096; text-align: right; }

/* The stage: words left, the car right, the two sharing a centre line */
.stage { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 72px); align-items: center; margin-top: clamp(20px, 2.4vw, 36px); }
.stage__text { transition: opacity .18s ease; }
.stage.is-swapping .stage__text { opacity: 0; }
.stage__text .h2 { margin-top: 12px; }
.stage__line { margin-top: 16px; font-size: clamp(1.05rem, 1.3vw, 1.18rem); line-height: 1.5; color: var(--graphite); max-width: 36ch; }
.stage__price { display: flex; align-items: baseline; gap: 6px 22px; flex-wrap: wrap; margin-top: 22px; }
.stage__price b { font-stretch: 104%; font-weight: 500; font-size: clamp(1.3rem, 1.7vw, 1.6rem); letter-spacing: -.015em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stage__price b small { font-weight: 400; font-size: .95rem; letter-spacing: 0; color: var(--graphite); margin-right: 4px; }
.stage__link {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .92rem; color: var(--graphite); text-decoration: underline; text-decoration-color: #c9ccd1; text-underline-offset: 5px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.stage__link:hover { color: var(--ink); text-decoration-color: var(--ink); }
.stage__link[hidden] { display: none; }
.stage__offer { margin-top: 8px; font-size: .95rem; color: var(--ink); }
.stage__offer a { text-decoration: underline; text-decoration-color: #c9ccd1; text-underline-offset: 5px; }
.stage__offer a:hover { text-decoration-color: var(--ink); }
.stage .facts { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); }
.stage__actions { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-top: 28px; }
.stage__actions .btn { min-height: 52px; padding: 0 24px; }
.lineup__note { margin-top: clamp(28px, 3.4vw, 48px); max-width: 96ch; }

/* ==========================================================================
   SHOWROOM 02 · COMPARE — heading left; two cars and the deciding rows right
   ========================================================================== */

.compare {
  padding: 0 var(--pad) var(--section);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: start;
}
.compare__head { position: sticky; top: calc(var(--nav-h) + 32px); }
.versus { --label: 132px; }
.versus__top, .versus__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(16px, 3vw, 48px); padding-left: var(--label); }
.versus__pick { display: grid; gap: 0; min-width: 0; }
.versus__pick .field select { font-size: 1.02rem; font-weight: 500; }
/* Both cars stand on one line, each as wide as its real length against the longest Kia */
.versus__car { display: flex; align-items: flex-end; height: clamp(120px, 12vw, 176px); border-bottom: 1px solid var(--rule); }
.versus__scale { display: block; width: var(--w); }
.versus__rows { margin: 0; }
.versus__delta { padding: 12px 0 14px var(--label); font-size: .86rem; color: var(--graphite); }
.versus__row { display: grid; grid-template-columns: var(--label) 1fr 1fr; gap: 0 clamp(16px, 3vw, 48px); align-items: baseline; padding: 13px 0; border-top: 1px solid var(--rule); }
.versus__row dt { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); line-height: 1.5; }
.versus__row dd { margin: 0; font-size: 1.05rem; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; }
/* A row that does not separate the two steps back, so the differences read first */
.versus__row.is-same dd { color: #8b9096; }
.versus__acts { margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--rule); }
.versus__acts .btn { justify-self: start; min-height: 50px; }

/* ==========================================================================
   RESPONSIVE — showroom
   ========================================================================== */

@media (max-width: 1199px) {
  /* The rail becomes a strip you slide: still to scale, still in price order, three or four cars in view */
  .lineup { padding-left: 0; padding-right: 0; }
  .lineup__head, .stage, .lineup__note, .rail__note { margin-left: var(--gutter); margin-right: var(--gutter); }
  .rail__list { overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--gutter); padding: 0 var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rail__list::-webkit-scrollbar { display: none; }
  .rail__item { flex: none; width: calc(var(--len) * .041px); scroll-snap-align: center; }
  .rail__note { text-align: left; }
  .stage { grid-template-columns: 1fr; gap: 8px; }
  .stage__view { order: -1; max-width: 720px; width: 100%; margin: 0 auto; }
  .compare { grid-template-columns: 1fr; gap: 24px; }
  .compare__head { position: static; }
}

@media (max-width: 859px) {
  .lineup { padding-top: calc(var(--nav-h) + 24px); }
  .lineup__head { display: block; }
  .lineup__head .tabs { display: flex; margin-top: 18px; }
  .lineup__head .tab { flex: 1; min-width: 0; padding: 0 6px; font-size: .9rem; }
  .rail { margin-top: 22px; }
  .rail__item { width: calc(var(--len) * .027px); }
  .rail__name { font-size: .9rem; margin-top: 10px; }
  .rail__price { font-size: .76rem; }
  .stage { margin-top: 12px; }
  .stage .facts { flex-wrap: wrap; gap: 14px 0; }
  .stage .facts div { padding: 0 16px; }
  .stage .facts div:first-child { padding-left: 0; }
  .stage__actions .btn { flex: 1 1 calc(50% - 6px); padding: 0 12px; }
  .spin__bar { margin-top: 4px; }

  /* Compare: two columns only; each label sits above its pair of values */
  .versus { --label: 0px; }
  .versus__top, .versus__acts, .versus__row { gap: 0 14px; }
  .versus__pick .field { padding: 0 10px; gap: 6px; }
  .versus__pick .field > .ico { display: none; }
  .versus__pick .field select { font-size: .95rem; }
  .versus__car { height: 84px; }
  .versus__row { grid-template-columns: 1fr 1fr; padding: 11px 0 12px; }
  .versus__row dt { grid-column: 1 / -1; margin-bottom: 3px; }
  .versus__row dd { font-size: .98rem; }
  .versus__acts .btn { justify-self: stretch; padding: 0 10px; font-size: .86rem; }
}

/* Kia Signature weights, as on the homepage: bold headings and figures, regular text */
html:not(.font-archivo) .stage__price b, html:not(.font-archivo) .versus__pick .field select { font-weight: 700; }
html:not(.font-archivo) .stage__price b small { font-weight: 400; }

/* ==========================================================================
   CAR PAGE — one story in nine chapters. Each opens with the buyer's question, answers it, and hands on to the next.
   ========================================================================== */

/* The chapter mark in front of each question, and the line that leads to the next chapter */
.car .label i { margin-right: 14px; font-style: normal; color: #b3b7bc; font-variant-numeric: tabular-nums; }
.bridge {
  display: inline-flex; align-items: center; gap: 16px; margin-top: clamp(36px, 4.4vw, 64px);
  font-size: clamp(1.05rem, 1.35vw, 1.22rem); font-weight: 600; line-height: 1.35; color: var(--ink);
}
.bridge .round { border-radius: 50%; }
.bridge .ico { transition: transform .25s var(--ease); }
.bridge:hover .ico { transform: translateY(3px); }
/* The same line, when it leads to a person and not to the next chapter */
.bridge--ask:hover .ico { transform: translateX(3px); }
.versions .bridge { margin-top: clamp(24px, 2.8vw, 40px); }

/* ==========================================================================
   CAR PAGE · HERO — Kia's photograph, whole. The words run along the lower edge, under the car, never on it:
   the promise and the money on the left, the three signature features on the right.
   ========================================================================== */

.hero--car { justify-content: space-between; gap: clamp(24px, 3vw, 56px); }
/* The photograph is shown whole and still: no drift, so the car and the rating in it are never cropped */
.hero--car .hero__slide { display: block; animation: none; }
.hero--car .hero__slide img { object-position: 80% 62%; }
.hero--car .hero__inner { max-width: none; }
/* One line of money under the name: the price leads, the monthly figure follows quietly */
.hero--car .hero__lede { margin-top: 10px; max-width: 96ch; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.5; color: rgba(255, 255, 255, .88); }
.hero__from { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; font-size: clamp(1rem, 1.2vw, 1.12rem); color: rgba(255, 255, 255, .86); font-variant-numeric: tabular-nums; }
.hero__from b { margin-left: 6px; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 600; letter-spacing: -.015em; color: #fff; }
.hero__from sup { font-size: .55em; font-weight: 400; }
.hero__from > span { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .4); }

.hero--car .hero__actions { gap: 12px; margin-top: clamp(20px, 2.8vh, 28px); }
/* The second action has real weight, but never competes with the first: a clear outline on the photograph */
.hero__actions .btn--glass, .btn--glass { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .7); color: #fff; }
.hero__actions .btn--glass:hover, .btn--glass:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }

/* Three signature features, as Kia marks them on its own hero */
/* They share the buttons' line, at its right-hand end */
.hero__marks { position: absolute; right: var(--pad); bottom: 64px; height: 54px; display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
.hero__marks a { display: flex; align-items: center; gap: 12px; max-width: 232px; font-size: .88rem; font-weight: 600; line-height: 1.3; color: #fff; transition: opacity .2s var(--ease); }
.hero__marks img { width: 46px; height: 46px; flex: none; object-fit: contain; }
.hero__marks a:hover { opacity: .76; }

@media (min-width: 860px) {
  /* As tall as the photograph is at this width, so it is never cropped; never taller than the screen */
  .hero.hero--car { height: min(100svh, 56.25vw); min-height: 620px; padding-bottom: 64px; }
  .hero--car .hero__title { font-size: clamp(2rem, 3.1vw, 2.9rem); line-height: 1.06; }
  /* Only the lower edge is darkened, where the words are. The car and the sky stay as photographed. */
  .hero--car .hero__veil { background: linear-gradient(0deg, rgba(8, 9, 10, .86) 0%, rgba(8, 9, 10, .62) 20%, rgba(8, 9, 10, 0) 44%); }
}

/* ==========================================================================
   CAR PAGE 01 · WHY BUY IT FROM US — a real delivery on the left, as tall as the words; four reasons on the right, two to a row
   ========================================================================== */

.whyus { padding: var(--section) var(--pad) 0; }
/* The photograph is exactly as tall as the words: its top meets the label, its foot meets the buttons */
.whyus__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.whyus__photo { position: relative; min-height: 360px; overflow: hidden; border-radius: var(--r-lg); background: var(--tint); }
.whyus__photo img { position: absolute; inset: 0; object-position: 56% 46%; }
.whyus__side { display: flex; flex-direction: column; }
/* The heading holds two lines */
.whyus .h2 { max-width: 30ch; text-wrap: balance; }

/* Each reason on one line of sight: its icon, then the claim and one line */
.usps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(34px, 3.4vw, 48px) clamp(28px, 3.4vw, 52px); margin: clamp(30px, 3.2vw, 44px) 0 0; }
.usp { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 18px; align-items: start; }
.usp__icon { grid-row: 1 / span 2; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--ink); }
.usp__icon .ico { width: 22px; height: 22px; }
.usp h3 { margin-top: 1px; font-size: clamp(1.12rem, 1.4vw, 1.28rem); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.usp p { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--graphite); max-width: 34ch; }
.whyus__acts { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: auto; padding-top: clamp(34px, 3.4vw, 48px); }
.whyus__acts .btn { min-height: 50px; }
.whyus__acts .g { width: 18px; height: 18px; flex: none; }
.place__rate .g { width: 30px; height: 30px; flex: none; }

/* ==========================================================================
   CAR PAGE 04 · YOUR TEST-DRIVE LIST — the film runs the full width of the page; the nine items are one row beneath it
   ========================================================================== */

.tour { padding: var(--section) var(--pad) 0; }
.tour__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 48px; flex-wrap: wrap; }
.tour__hint { max-width: 36ch; font-size: 1.05rem; color: var(--graphite); }
/* Kia's film is 2:1. It is shown whole, and only trimmed top and bottom on a screen too short to hold it. */
.tour__stage { position: relative; margin-top: clamp(24px, 3vw, 44px); }
.tour__screen { position: relative; aspect-ratio: 2 / 1; max-height: 76vh; width: 100%; overflow: hidden; border-radius: var(--r-lg); background: #1b1d1f; }
.tour__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Nine items in one row: the bar above an item is inked when it is the one on screen; a tick by its number says it is on the list */
.tour__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0 clamp(8px, 1vw, 16px); }
.tour__list li { border-top: 2px solid var(--rule); transition: border-color .3s var(--ease); }
.tour__list li.is-active { border-top-color: var(--ink); }
.tour__stop { display: grid; gap: 6px; align-content: start; width: 100%; min-height: 76px; padding: 14px 0 0; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; color: #8b9096; transition: color .2s var(--ease); }
.tour__stop i { display: flex; align-items: center; gap: 9px; min-height: 16px; font-style: normal; font-size: .8rem; font-weight: 700; color: #b3b7bc; font-variant-numeric: tabular-nums; }
.tour__stop span { font-size: clamp(.92rem, 1.08vw, 1.05rem); line-height: 1.3; }
.tour__stop:hover, .tour__stop.is-active { color: var(--ink); }
.tour__stop.is-active i { color: var(--ink); }
.tour__stop.is-active span { font-weight: 600; }

/* What is on screen: one small white card in the film's upper right corner, where the frame is quietest.
   A number, the name, one line, whether the chosen version has it, and the one action. */
.tour__card { position: absolute; top: clamp(14px, 1.6vw, 24px); right: clamp(14px, 1.6vw, 24px); width: min(290px, 34%); padding: 18px 20px 20px; background: var(--white); border-radius: var(--r-lg); }
.tour__n { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: #8b9096; font-variant-numeric: tabular-nums; }
.tour__card h3 { margin-top: 6px; font-size: 1.2rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.tour__text { margin-top: 6px; font-size: .93rem; line-height: 1.5; color: var(--graphite); }
.tour__has { margin-top: 10px; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; color: var(--graphite); }
.tour__has:empty { display: none; }
.tour__has.is-on { color: var(--ink); }
.tour__book { min-height: 50px; }
.tour__note { margin-top: 18px; }
.tour .bridge { margin-top: clamp(28px, 3.4vw, 48px); }

/* ==========================================================================
   CAR PAGE 03 · LOOK CLOSER — the car (or its cabin) on a full-width stage, the colours beneath
   ========================================================================== */

.explore { padding: var(--section) var(--pad) 0; }
.explore__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; }
/* One job: look at it, in your colour. The car takes the stage; the colours and the hint share one line beneath it. */
.viewer { margin-top: clamp(24px, 3vw, 44px); container-type: inline-size; }
.viewer__bar { display: flex; justify-content: space-between; align-items: center; gap: 14px 32px; flex-wrap: wrap; margin-top: 18px; min-height: 44px; }
.viewer__bar .paint { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
.viewer__bar .paint__name { min-width: 15ch; }
.viewer__bar .paint__list { margin-top: 0; }
.viewer__bar .spin__hint { margin-left: auto; }
/* The stage is as wide as the film in the next section and shares its corners; the car keeps its own size in the middle of it */
.viewer__stage { position: relative; height: min(50cqw, 520px); overflow: hidden; border-radius: var(--r-lg); background: var(--tint); }
.viewer__stage .spin { position: absolute; inset: 0; width: min(100%, 1040px); margin: 0 auto; aspect-ratio: auto; }
.pano { position: absolute; inset: 0; aspect-ratio: auto; }
.spin[hidden], .pano[hidden], .paint[hidden] { display: none; }
.pano { overflow: hidden; background: var(--tint); }
.pano canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: pan-y; cursor: grab; opacity: 0; transition: opacity .4s ease; outline-offset: -2px;
  -webkit-user-select: none; user-select: none;
}
.pano.is-ready canvas { opacity: 1; }
.pano.is-dragging canvas { cursor: grabbing; }
.explore__note { margin-top: 14px; max-width: 96ch; }
.explore .bridge { margin-top: clamp(28px, 3.4vw, 48px); }

/* One detail at a time: its name large, one line about it, where in the range it starts.
   Beneath it, the same numbers that are marked on the car. The panel keeps its height, so the colours below never move. */
.spots { display: grid; align-content: start; }
.dtl { min-height: clamp(232px, 19vw, 272px); transition: opacity .14s ease; }
.dtl.is-swapping { opacity: 0; }
.dtl__count { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); line-height: 1.4; }
.dtl__name { margin-top: 14px; font-size: clamp(1.7rem, 2.6vw, 2.35rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.dtl__text { margin-top: 14px; font-size: 1.06rem; line-height: 1.55; color: var(--graphite); max-width: 36ch; }
.dtl__from { display: inline-block; margin-top: 18px; padding: 7px 12px; background: var(--tint); border-radius: var(--r); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: var(--ink); }
.dtl__from[hidden] { display: none; }
.dtl__nums { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.detail {
  width: 46px; height: 46px; padding: 0; display: grid; place-items: center; background: var(--white); color: var(--ink);
  border: 1px solid #c9ccd1; border-radius: 50%; cursor: pointer; font: inherit; font-size: .98rem; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.detail:hover { border-color: var(--ink); }
.detail.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.paint { margin-top: clamp(20px, 2.4vw, 32px); padding-top: 22px; border-top: 1px solid var(--rule); }
.paint__name { font-size: .95rem; color: var(--graphite); }
.paint__name b { margin-left: 4px; font-weight: 600; color: var(--ink); }
.paint__list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.paint__dot { width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--c); border: 1px solid rgba(20, 23, 26, .2); cursor: pointer; outline: 1px solid transparent; outline-offset: 3px; transition: outline-color .2s var(--ease); }
.paint__dot:hover { outline-color: #b3b7bc; }
.paint__dot.is-active { outline-color: var(--ink); }

/* Markers: numbered like the list, laid on the photograph only where the detail is in view */
.pins { position: absolute; inset: 0; pointer-events: none; }
.pin {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; display: grid; place-items: center;
  background: #fff; color: var(--ink); border: 1px solid var(--ink); border-radius: 50%; cursor: pointer;
  font: inherit; font-size: .74rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(.6);
  transition: opacity .25s ease, transform .25s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.pin.is-on { opacity: 1; transform: none; pointer-events: auto; }
.pin.is-active { background: var(--ink); color: #fff; border-color: #fff; }
.pin.is-active::after { content: ""; position: absolute; inset: -7px; border: 1px solid var(--ink); border-radius: 50%; opacity: .4; animation: halo 2.2s ease-out infinite; }
@keyframes halo { from { transform: scale(.8); opacity: .6; } to { transform: scale(1.5); opacity: 0; } }
.viewer[data-view="interior"] .pin { border-color: #fff; }
.viewer[data-view="interior"] .pin.is-active::after { border-color: #fff; }

/* ==========================================================================
   CAR PAGE 06 · VERSIONS — a filter panel on the left; the versions that are left, as a list of names, on the right
   ========================================================================== */

.versions { margin-top: var(--section); padding: var(--section) var(--pad); background: var(--tint); }
.versions__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 48px; flex-wrap: wrap; }
.pick { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(28px, 3.4vw, 48px); }

/* The panel: four short groups of checkboxes. It stays in view while the results scroll. */
.filt { position: sticky; top: calc(var(--nav-h) + 24px); }
.filt__toggle { display: none; }
.filt__body { display: grid; gap: 26px; }
.filt__group { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 2px; align-content: start; }
.filt__group legend { padding: 0; margin-bottom: 8px; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); line-height: 1.4; }
.tick { display: flex; align-items: center; gap: 12px; min-height: 36px; font-size: 1.02rem; color: var(--ink); cursor: pointer; }
.tick input { position: absolute; opacity: 0; pointer-events: none; }
.tick__box { width: 20px; height: 20px; flex: none; display: grid; place-items: center; background: var(--white); border: 1px solid #b3b7bc; border-radius: var(--r); transition: background .2s var(--ease), border-color .2s var(--ease); }
.tick__box::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); opacity: 0; }
.tick:hover .tick__box { border-color: var(--ink); }
.tick input:checked + .tick__box { background: var(--ink); border-color: var(--ink); }
.tick input:checked + .tick__box::after { opacity: 1; }
.tick input:focus-visible + .tick__box { outline: 2px solid var(--navy-2); outline-offset: 3px; }

/* Above the results: how many are left, and what was ticked (each one removable) */
.pick__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; min-height: 40px; }
.pick__count { font-size: 1.08rem; color: var(--graphite); }
.pick__count b { font-weight: 700; color: var(--ink); }
.pick__on { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px 0 12px; background: var(--white); border: 1px solid #d5d8dc; border-radius: var(--r); cursor: pointer; font: inherit; font-size: .9rem; color: var(--ink); transition: border-color .2s var(--ease); }
.pill::after { content: "×"; font-size: 1.1rem; line-height: 1; color: var(--graphite); }
.pill:hover { border-color: var(--ink); }
.pick__on .stage__link { margin-left: 6px; }

/* The versions, as names. One line each; "Know more" is the only thing to press, and it is drawn as a control, not as a link. */
.vlist { list-style: none; margin: clamp(14px, 1.6vw, 20px) 0 0; padding: 0 clamp(16px, 2.2vw, 32px); background: var(--white); border-radius: var(--r-lg); }
.vrow + .vrow { border-top: 1px solid var(--rule); }
.vrow__head { margin: 0; font: inherit; }
.vrow__btn { width: 100%; display: flex; align-items: center; gap: 10px 14px; min-height: 72px; padding: 12px 0; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.vrow__name { font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.vrow__tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; background: var(--tint); border-radius: var(--r); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; }
.vrow__tag .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.vrow__more { margin-left: auto; display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 138px; min-height: 44px; padding: 0 14px 0 16px; border: 1px solid #b3b7bc; border-radius: var(--r); font-size: .92rem; font-weight: 600; white-space: nowrap; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.vrow__btn:hover .vrow__more { border-color: var(--ink); }
.vrow.is-open .vrow__more { background: var(--ink); border-color: var(--ink); color: #fff; }
/* + opens, − closes */
.vrow__sign { position: relative; width: 12px; height: 12px; flex: none; }
.vrow__sign::before, .vrow__sign::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 0; border-top: 1.5px solid currentColor; transition: transform .25s var(--ease); }
.vrow__sign::after { transform: rotate(90deg); }
.vrow.is-open .vrow__sign::after { transform: none; }

/* One version, open: on the left what it costs and the next step; on the right what the money buys */
.vrow__panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); padding: 4px 0 clamp(28px, 3vw, 40px); }
.vrow__panel.is-new { animation: panel .4s var(--ease) both; }
.vrow__best { font-size: 1.08rem; line-height: 1.5; color: var(--graphite); max-width: 46ch; }
.vrow__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.vrow__acts .btn { min-height: 50px; padding: 0 20px; }
.vrow__get > .vspec__cap:first-child { margin-top: 4px; }
.vrow__get .spec summary { font-size: 1rem; }

.pick__none { max-width: 56ch; margin-top: 18px; padding: clamp(24px, 3vw, 40px); background: var(--white); border-radius: var(--r-lg); }
.pick__none[hidden] { display: none; }
.pick__none p { font-size: 1.05rem; line-height: 1.55; color: var(--graphite); }
.pick__none strong { color: var(--ink); font-weight: 600; }
.pick__none-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.versions__note { margin-top: clamp(32px, 3.6vw, 52px); max-width: 110ch; }

/* Inside an open version */
.vspec__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 16px; color: var(--graphite); font-variant-numeric: tabular-nums; }
.vspec__price b { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.vspec__price span + span { padding-left: 10px; border-left: 1px solid #c9ccd1; }
.vspec__cap { margin-top: 26px; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); line-height: 1.4; }
.vspec__more { margin-top: 22px; border-top: 1px solid var(--rule); border-bottom: 0; }
.vspec__also { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 2px 0 4px; font-size: .96rem; line-height: 1.4; color: var(--graphite); }

.trim__links { display: flex; gap: 4px 28px; flex-wrap: wrap; margin-top: 18px; }
.trim__list { display: grid; gap: 11px; margin-top: 14px; }
.trim__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; font-size: 1.04rem; line-height: 1.45; }
.trim__list .ico { width: 18px; height: 18px; margin-top: 3px; color: #8b9096; }
/* Engine and gearbox: plain outlined choices, never the solid black of an action */
.engines { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.opt {
  min-height: 42px; padding: 0 14px; background: var(--white); border: 1px solid #d5d8dc; border-radius: var(--r); cursor: pointer;
  font: inherit; font-size: .95rem; color: var(--graphite); white-space: nowrap;
  transition: border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.opt:hover { border-color: #8b9096; color: var(--ink); }
.opt.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); font-weight: 600; }
.trim__note { margin-top: 14px; font-size: .92rem; line-height: 1.5; color: var(--graphite); max-width: 60ch; }
.trim__note[hidden] { display: none; }

/* ==========================================================================
   CAR PAGE 02 · YOUR PRICE, YOUR PLAN — the price and the offer on the left, the monthly plan on the right
   ========================================================================== */

.cost { padding: var(--section) var(--pad) 0; }
/* Three columns that read left to right: the car and its two choices, what it costs, what that is a month */
.cost__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .85fr) minmax(340px, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; margin-top: clamp(28px, 3.2vw, 46px); }
.cost__car figure { aspect-ratio: 2 / 1; }
.cost__car img { object-fit: contain; }
.cost__pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 520px; margin: 6px auto 0; }
.cost__pick .field { min-height: 52px; border-color: #d5d8dc; }
.cost__pick select { height: 50px; font-size: 1rem; font-weight: 600; color: var(--ink); text-overflow: ellipsis; }

/* The price: one figure, and which car it is for */
.price__cap { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); line-height: 1.4; }
.price__fig { margin-top: 10px; font-size: clamp(2.4rem, 3.6vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price__what { margin-top: 10px; font-size: 1rem; color: var(--graphite); }
/* The price, line by line: hairlines between the rows, the total in ink beneath them */
.ledger { margin: 22px 0 0; border-top: 1px solid var(--rule); }
.ledger div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: .96rem; }
.ledger dt { color: var(--graphite); }
.ledger dd { margin: 0; font-variant-numeric: tabular-nums; }
.ledger .ledger__sum { border-bottom: 0; padding-top: 13px; font-size: 1.02rem; font-weight: 600; }
.ledger .ledger__sum dt { color: var(--ink); }
.cost__note { margin-top: 6px; }

.plan { padding: clamp(24px, 2.8vw, 40px); background: var(--tint); border-radius: var(--r-lg); }
.plan__cap, .getquote__cap { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); line-height: 1.4; }
.plan__emi { margin-top: 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan__emi b { font-size: clamp(2.4rem, 3.6vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan__emi small { font-size: 1.05rem; color: var(--graphite); }
.plan__loan { margin-top: 10px; font-size: .95rem; line-height: 1.5; color: var(--graphite); font-variant-numeric: tabular-nums; }

.slider { margin-top: 26px; }
.slider__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.slider label { font-size: 1rem; color: var(--graphite); }
.slider output { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.slider input {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: 4px 0 0; padding: 0; background: none; cursor: pointer;
}
.slider input::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--ink) var(--fill, 0%), #c9ccd1 var(--fill, 0%)); }
.slider input::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--ink) var(--fill, 0%), #c9ccd1 var(--fill, 0%)); }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--tint); }
.slider input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--tint); }
.slider input:focus-visible { outline: none; }
.slider input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--tint), 0 0 0 6px var(--navy-2); }

.getquote { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 28px; padding-top: 24px; border-top: 1px solid #d5d8dc; }
.getquote__cap { grid-column: 1 / -1; }
.getquote .field { min-height: 54px; }
.getquote .field input { height: 52px; }
.getquote .btn { min-height: 54px; }
.getquote .form__status { grid-column: 1 / -1; }
.getquote.is-done > :not(.form__status) { display: none; }
.getquote.is-done .form__status { font-size: 1.08rem; line-height: 1.45; }
.plan > .note { margin-top: 12px; }

/* ==========================================================================
   CAR PAGE 05 · THE RIGHT FIT — one question with three answers; each is worked out from the versions and opens them narrowed
   ========================================================================== */

.fit { padding: var(--section) var(--pad) 0; }
/* Kia's 2:1 photograph, uncropped, on the left; the question and its answer on the right, centred on it */
.fit__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.fit__photo { aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--r-lg); background: var(--tint); }
.fit .h2 { max-width: 22ch; }
/* The question is finished by one of three answers: the page's own segmented control */
.fit__ask { margin-top: clamp(22px, 2.4vw, 32px); font-size: 1.05rem; color: var(--graphite); }
.fit__tabs { margin-top: 10px; }
.fit__tabs .tab { padding: 0 clamp(12px, 1.5vw, 22px); }
.fit__answer { margin-top: clamp(22px, 2.4vw, 30px); transition: opacity .14s ease; }
.fit__answer.is-swapping { opacity: 0; }
.fit__answer h3 { font-size: clamp(1.25rem, 1.6vw, 1.45rem); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.fit__answer > p { margin-top: 8px; min-height: 4.65em; font-size: 1.02rem; line-height: 1.55; color: var(--graphite); max-width: 52ch; }
/* What that means in the range: three short facts on one line, worked out from the versions below */
.fit__match { display: grid; grid-template-columns: auto auto auto; justify-content: start; gap: 12px clamp(18px, 2.4vw, 40px); margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.fit__match dt { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); line-height: 1.4; }
.fit__match dd { margin: 6px 0 0; font-size: 1.08rem; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.fit__acts { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: clamp(24px, 2.6vw, 34px); }
.fit__acts .btn { min-height: 50px; }

/* ==========================================================================
   CAR PAGE 08 · BUYING IT FROM US — "Why buy it from us" mirrored: the steps on the left, a real delivery on the right
   ========================================================================== */

.whyus--flip .whyus__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.usp__icon--n { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Review mode (seltos.html?review=1): every claim the dealership has still to confirm is marked */
.review .tbc { background: #fff1b8; box-shadow: 0 0 0 3px #fff1b8; color: #14171a; border-radius: 2px; }
.review .tbc::after { content: " · to confirm"; font-size: .68em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* The FAQ follows as chapter 07, in the homepage's layout */
.car .faqs { padding-top: var(--section); }

/* ==========================================================================
   CAR PAGE 11 · DRIVE IT — the ask on the left, the place that was chosen on the right
   ========================================================================== */

/* Light, like the rest of the page: the tint marks it as the closing ask, and the footer beneath is the only dark band */
.final {
  margin-top: var(--section); padding: var(--section) var(--pad); background: var(--tint); color: var(--ink);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center;
}
.final .h2 { margin-top: 12px; max-width: 18ch; }
.final__sub { margin-top: 14px; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.5; color: var(--graphite); max-width: 44ch; }
.final__cap { margin-top: clamp(22px, 2.4vw, 30px); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); line-height: 1.4; }

.final__form { margin-top: 4px; }
.final .field { min-height: 56px; padding: 0 16px; border-color: #d5d8dc; }
.final .field input, .final .field select { height: 54px; font-size: 1rem; }
/* The car being booked, and the three things that can be changed about it */
.final__picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.final__picks select { font-weight: 600; color: var(--ink); text-overflow: ellipsis; }
.final__dot { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--c, #6d8a9c); border: 1px solid rgba(20, 23, 26, .2); }
.final__price { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 10px; font-size: .95rem; line-height: 1.5; color: var(--graphite); font-variant-numeric: tabular-nums; }
.final__list[hidden] { display: none; }
.final__list b { font-weight: 600; color: var(--ink); }

/* Where: the page's own segmented control, on white so it reads on the tint */
.where { display: flex; margin-top: 10px; background: var(--white); border: 1px solid #d5d8dc; }
.where .tab { flex: 1 1 0; min-height: 46px; padding: 0 10px; }
.where .tab.is-active { background: var(--ink); color: #fff; box-shadow: none; }

.final__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; margin-top: 10px; }
.final__fields .btn { min-height: 56px; padding: 0 22px; }
.final__notes { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; font-size: .9rem; color: var(--graphite); }
.final__notes li, .final__notes a { display: inline-flex; align-items: center; gap: 8px; }
.final__notes .ico { width: 16px; height: 16px; }
.final__notes a { font-weight: 600; color: var(--ink); }
.final__notes a:hover .ico { transform: translateX(3px); }
.final__notes a .ico { transition: transform .25s var(--ease); }
.final__form.is-done > :not(.form__status) { display: none; }
.final__form.is-done .form__status { margin-top: 26px; font-size: 1.15rem; line-height: 1.5; }

/* The place that was chosen: the map, then its particulars set straight on the page. No card round them. */
.place { display: grid; gap: clamp(18px, 2vw, 26px); }
.place__map { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: var(--rule); }
.place__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.place[data-kind="door"] .place__map { display: none; }
.place__body { display: grid; gap: 10px; }
.place__rate { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--graphite); }
.place__rate[hidden], .place__hours[hidden], .place__acts a[hidden] { display: none; }
.place__rate .g { width: 22px; height: 22px; }
.place__rate b { font-size: 1.3rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.place__name { font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.place__addr { font-style: normal; font-size: 1rem; line-height: 1.55; color: var(--graphite); max-width: 44ch; }
.place__hours { display: flex; align-items: center; gap: 8px; font-size: .98rem; color: var(--ink); }
.place__hours .ico { width: 18px; height: 18px; color: var(--graphite); }
.place__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.place__acts .btn { min-height: 48px; padding: 0 18px; background: var(--white); }

/* ---------- Full specifications: the calculator's sheet, with one group open at a time ---------- */
.specs { width: min(640px, calc(100vw - 32px)); max-height: min(88vh, 860px); overflow-y: auto; }
.specs__groups { margin-top: 20px; border-top: 1px solid var(--rule); }
.spec { border-bottom: 1px solid var(--rule); }
.spec summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; font-size: 1.05rem; font-weight: 600; }
.spec summary::-webkit-details-marker { display: none; }
.spec summary .ico { color: var(--graphite); transition: transform .3s var(--ease); }
.spec[open] summary .ico { transform: rotate(180deg); }
.spec__rows { display: grid; gap: 10px; margin: 2px 0 20px; }
.spec__rows div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; }
.spec__rows dt, .spec__engines dd { font-size: .95rem; color: var(--graphite); }
.spec__rows dd { margin: 0; }
.spec__engines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 2px 0 20px; }
.spec__engines dl { margin: 0; }
.spec__engines dt { font-weight: 600; }
.spec__engines dd { margin: 4px 0 0; line-height: 1.4; }
.specs__pdf { width: 100%; margin: 22px 0 4px; }

/* ==========================================================================
   RESPONSIVE — car page
   ========================================================================== */

@media (max-width: 1199px) {
  .hero__marks { display: none; }
  .tour__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
  .fit__grid { grid-template-columns: 1fr; gap: 32px; }
  .tour__card { width: min(270px, 38%); padding: 16px; }
  .whyus--flip .whyus__grid { grid-template-columns: 1fr; }
  .whyus--flip .whyus__photo { order: -1; }
  .whyus__grid { grid-template-columns: 1fr; gap: 36px; }
  .whyus__photo { min-height: 0; aspect-ratio: 16 / 10; }
  .whyus__photo img { object-position: 50% 30%; }
  .pick { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; }
  .vrow__panel { grid-template-columns: 1fr; gap: 28px; }
  .cost__grid { grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
  .cost__car { grid-column: 1 / -1; }
  .cost__car figure { max-width: 640px; margin: 0 auto; }
  .final { grid-template-columns: 1fr; }
  .final__fields { grid-template-columns: 1fr 1fr; }
  .final__fields .btn { grid-column: 1 / -1; }
}

@media (max-width: 859px) {
  /* Phone: Kia's portrait photograph on top, the words on the dark panel beneath, then the three marks */
  .hero--car { gap: 0; }
  .hero--car .hero__media { height: min(62svh, 500px); }
  .hero--car .hero__slide img { object-position: 50% 56%; }
  .hero--car .hero__actions { margin-top: 20px; }
  .hero__marks { position: relative; right: auto; bottom: auto; height: auto; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; margin: 26px var(--gutter) 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16); }
  .hero__marks a { display: grid; justify-items: center; text-align: center; max-width: none; gap: 10px; font-size: .78rem; font-weight: 400; }
  .hero__marks img { width: 44px; height: 44px; }
  .bridge { align-items: flex-start; font-size: 1.02rem; }
  .bridge .round { margin-top: -6px; }

  .whyus__photo { aspect-ratio: 4 / 3; margin: 0 calc(-1 * var(--gutter)); border-radius: 0; }
  .whyus__grid { gap: 28px; }
  .usps { grid-template-columns: 1fr; gap: 28px; margin-top: 26px; }
  .usp p { font-size: .96rem; max-width: none; }
  .whyus__acts .btn { flex: 1 1 100%; }

  /* Phone: the film runs edge to edge; the nine items become a row to swipe */
  .tour__stage { margin-top: 22px; }
  .tour__screen { width: auto; max-height: none; margin: 0 calc(-1 * var(--gutter)); border-radius: 0; }
  .tour__list { display: flex; gap: 14px; overflow-x: auto; margin: 16px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); scroll-padding-left: var(--gutter); scroll-snap-type: x proximity; scrollbar-width: none; }
  .tour__list::-webkit-scrollbar { display: none; }
  .tour__list li { flex: 0 0 132px; scroll-snap-align: start; }
  /* Phone: the film is too small to carry the card, so it sits under the row, on the tint */
  .tour__card { position: static; width: auto; margin-top: 18px; padding: 18px; background: var(--tint); }
  .tour__card { min-height: 156px; }
  .tour__book { width: 100%; }

  .explore__head { display: block; }
  .explore__head .tabs { display: flex; margin-top: 18px; }
  .explore__head .tab { flex: 1; }
  /* The stage runs edge to edge, so the car is as large as a phone allows */
  .viewer__stage { height: calc(50cqw + var(--gutter)); margin: 0 calc(-1 * var(--gutter)); border-radius: 0; }
  .viewer__bar .spin__hint { margin-left: 0; }
  .pano { border-radius: 0; }
  .pin { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .dtl { min-height: 218px; }

  .fit__grid { gap: 26px; }
  .fit__photo { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; }
  .fit__tabs { display: flex; }
  .fit__tabs .tab { flex: 1 1 0; min-height: 52px; padding: 0 6px; font-size: .92rem; white-space: normal; line-height: 1.2; text-align: center; }
  .fit__answer > p { min-height: 0; }
  .fit__match { grid-template-columns: 1fr 1fr; }
  .fit__acts .btn { flex: 1 1 100%; }

  .cost__grid { grid-template-columns: 1fr; gap: 30px; }
  .hero--car .hero__lede { max-width: none; }

  /* Phone: the panel folds behind one "Filters" button; the versions become a row to swipe through */
  .versions { padding-left: 0; padding-right: 0; overflow-x: clip; }
  .versions__head, .versions__note { margin-left: var(--gutter); margin-right: var(--gutter); }
  .pick { display: block; margin-top: 22px; }
  .filt { position: static; margin: 0 var(--gutter); background: var(--white); border-radius: var(--r-lg); }
  .filt__toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 1.02rem; font-weight: 600; color: var(--ink); }
  .filt__toggle b { margin-left: 8px; font-weight: 400; color: var(--graphite); }
  .filt__toggle .ico { transition: transform .3s var(--ease); }
  .filt__toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }
  .filt__body { display: none; grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: 6px 16px 20px; }
  .filt.is-open .filt__body { display: grid; }
  .tick { min-height: 40px; font-size: .98rem; }
  .pick__bar { margin: 18px var(--gutter) 0; }
  .vlist { margin: 14px var(--gutter) 0; }
  .vrow__btn { min-height: 68px; }
  .vlist { padding: 0 14px; }
  .vrow__name { font-size: 1.06rem; white-space: nowrap; }
  .vrow__more { min-width: 0; gap: 8px; padding: 0 10px 0 12px; font-size: .88rem; }
  .vspec__price span + span { flex-basis: 100%; padding-left: 0; border-left: 0; }
  .vrow__tag { padding: 5px 7px; font-size: 0; gap: 0; }
  .vrow__acts .btn { flex: 1 1 100%; }
  .vspec__also { grid-template-columns: 1fr; }
  .pick__none { margin: 18px var(--gutter) 0; }
  .opt { flex: 1 1 calc(50% - 4px); padding: 0 8px; font-size: .88rem; }

  .plan { margin: 0 calc(-1 * var(--gutter)); padding: 28px var(--gutter); border-radius: 0; }
  .getquote { grid-template-columns: 1fr; }

  .where { flex-wrap: wrap; }
  .where .tab { flex: 1 1 40%; }
  .final__picks { grid-template-columns: 1fr; }
  .final__fields { grid-template-columns: 1fr; }
  .final__fields .btn { grid-column: auto; }
  .place__acts .btn { flex: 1 1 100%; }

  .spec__rows div { grid-template-columns: 112px minmax(0, 1fr); }
  .spec__engines { grid-template-columns: 1fr; gap: 14px; }
  .dock--car { grid-template-columns: 1fr 1fr 1.3fr; }
  .dock--car .dock__call { border-right: 1px solid var(--rule); }
  .dock--car .dock__go { background: var(--ink); color: #fff; }
}

/* Kia Signature weights on the car page: names of details and questions stay Regular; figures and answers are Bold */
html:not(.font-archivo) .hero__from b, html:not(.font-archivo) .vrow__name, html:not(.font-archivo) .fit__match dd, html:not(.font-archivo) .tour__card h3, html:not(.font-archivo) .fit__answer h3, 
html:not(.font-archivo) .tour__cap b, html:not(.font-archivo) .place__name, html:not(.font-archivo) .where__opt b, html:not(.font-archivo) .ledger__sum { font-weight: 700; }
html:not(.font-archivo) .usp h3 { font-weight: 700; }
html:not(.font-archivo) .dtl__name { font-weight: 700; }

/* ==========================================================================
   CAR PAGE 07 · WHY HERE — one chart: the same five things, bought on a quoted price alone and bought from us
   ========================================================================== */

.cmp, .proof { padding: var(--section) var(--pad) 0; }
.cmp__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 48px; flex-wrap: wrap; }
.cmp__acts .btn { min-height: 50px; }
.cmp__acts .g { width: 18px; height: 18px; flex: none; }
/* No grid of boxes: hairlines between the rows, and one tinted column for our side */
.cmp__table { width: 100%; margin-top: clamp(26px, 3vw, 42px); border-collapse: collapse; table-layout: fixed; text-align: left; }
.cmp__table col, .cmp__table thead td { width: 22%; }
.cmp__table th, .cmp__table td { padding: 20px clamp(16px, 2vw, 28px); vertical-align: top; font-size: 1.04rem; line-height: 1.5; }
.cmp__table tbody tr { border-top: 1px solid var(--rule); }
.cmp__table thead th { padding-top: 18px; padding-bottom: 18px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: var(--graphite); }
.cmp__table tbody th { padding-left: 0; font-size: 1.08rem; font-weight: 600; color: var(--ink); }
.cmp__table tbody td { color: var(--graphite); }
.cmp__table .cmp__us { background: var(--tint); color: var(--ink); font-weight: 600; }
.cmp__table thead .cmp__us { color: var(--ink); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.cmp__table tbody tr:last-child .cmp__us { border-radius: 0 0 var(--r-lg) var(--r-lg); }
/* A tick before each of ours */
.cmp__table tbody .cmp__us { position: relative; padding-left: calc(clamp(16px, 2vw, 28px) + 30px); }
.cmp__table tbody .cmp__us::before { content: ""; position: absolute; left: clamp(16px, 2vw, 28px); top: 27px; width: 12px; height: 6px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }

/* ==========================================================================
   CAR PAGE 09 · PROOF — three real deliveries in a row, then Google's rating for each location on one line
   ========================================================================== */

.proof__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(26px, 3vw, 42px); }
.proof__photos figure { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); background: var(--tint); }
.proof__rates { list-style: none; margin: clamp(22px, 2.4vw, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px clamp(12px, 1.6vw, 24px); }
.proof__rates li { display: flex; align-items: center; gap: 12px; }
.proof__rates .g { width: 26px; height: 26px; flex: none; }
.proof__rates b { font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.proof__rates span { display: grid; gap: 2px; font-size: 1.02rem; font-weight: 600; line-height: 1.3; }
.proof__rates small { font-size: .9rem; font-weight: 400; color: var(--graphite); }

.explore__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.explore__links .btn { min-height: 46px; padding: 0 18px; }

@media (max-width: 859px) {
  /* Phone: each row of the chart becomes a short block: the subject, the usual way in grey, ours on the tint */
  .cmp__acts { flex: 1 1 100%; }
  .cmp__acts .btn { width: 100%; }
  .cmp__table, .cmp__table tbody, .cmp__table tr, .cmp__table th, .cmp__table td { display: block; width: auto; }
  .cmp__table thead { display: none; }
  .cmp__table tbody tr { padding: 18px 0; }
  .cmp__table tbody th { padding: 0; }
  .cmp__table tbody td { padding: 6px 0 0; font-size: .98rem; }
  .cmp__table tbody td:not(.cmp__us)::before { content: "Elsewhere: "; font-weight: 600; }
  .cmp__table tbody .cmp__us, .cmp__table tbody tr:last-child .cmp__us { margin-top: 12px; padding: 12px 14px 12px 42px; border-radius: var(--r-lg); }
  .cmp__table tbody .cmp__us::before { left: 14px; top: 19px; }
  .proof__photos { display: flex; gap: 12px; overflow-x: auto; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .proof__photos::-webkit-scrollbar { display: none; }
  .proof__photos figure { flex: 0 0 82%; scroll-snap-align: center; }
  .proof__rates { grid-template-columns: 1fr; }
  .explore__links .btn { flex: 1 1 0; padding: 0 10px; }
}
html:not(.font-archivo) .cmp__table tbody th, html:not(.font-archivo) .cmp__table .cmp__us { font-weight: 700; }
html:not(.font-archivo) .cmp__table thead th { font-weight: 700; }

/* Outside, the markers belong to the car's own frame; inside, to the whole panorama */
.viewer[data-view="exterior"] .pins { inset: 0; width: min(100%, 1040px); margin: 0 auto; }


/* ==========================================================================
   CAR PAGE 02 · THE VERSIONS, UNDER THE CAR — eleven names on one line, then the chosen one in a sentence with "Know more"
   ========================================================================== */

.vstrip { margin-top: clamp(22px, 2.4vw, 32px); padding-top: clamp(20px, 2.2vw, 28px); border-top: 1px solid var(--rule); }
.vstrip__cap { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); line-height: 1.4; }
/* One track, eleven equal names: the page's segmented control, not a row of boxes */
.vstrip__list { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; margin-top: 12px; padding: 5px; background: var(--tint); border-radius: var(--r-lg); }
.vchip { min-height: 46px; padding: 0 4px; background: transparent; border: 0; border-radius: var(--r); cursor: pointer; font: inherit; font-size: clamp(.84rem, 1vw, 1rem); color: var(--graphite); white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease); }
.vchip:hover { color: var(--ink); }
.vchip.is-active { background: var(--ink); color: #fff; font-weight: 600; }
/* The chosen one, in a line: what it is, what it costs, and the way in */
.vstrip__now { display: flex; align-items: center; gap: 12px clamp(20px, 3vw, 48px); flex-wrap: wrap; margin-top: 18px; }
.vstrip__now p:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin-right: auto; }
.vstrip__now b { font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.vstrip__now span { font-size: 1.02rem; line-height: 1.45; color: var(--graphite); }
.vstrip__price { font-size: 1.05rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vstrip__now .btn { min-height: 48px; gap: 12px; padding: 0 16px 0 18px; }

/* The sheet: the same content as an opened row of the list, in one column */
.vdlg { width: min(620px, calc(100vw - 32px)); }
.vdlg .vrow__panel { grid-template-columns: 1fr; gap: 26px; padding: 14px 0 0; animation: none; }

@media (max-width: 1199px) {
  /* Narrower: the names become a row to swipe, the chosen one always in ink */
  .vstrip__list { display: flex; overflow-x: auto; scrollbar-width: none; }
  .vstrip__list::-webkit-scrollbar { display: none; }
  .vchip { flex: 0 0 auto; padding: 0 16px; font-size: .96rem; }
}
@media (max-width: 859px) {
  .vstrip__list { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 5px var(--gutter); border-radius: 0; }
  .vstrip__now .btn { flex: 1 1 100%; }
}
html:not(.font-archivo) .vstrip__now b, html:not(.font-archivo) .vstrip__price { font-weight: 700; }

/* The comparison chart, contained: the section holds to a reading width in the middle of the page, so each answer
   sits close to its subject. Column headings are read as headings, not as captions. */
.cmp > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.cmp .h2 { max-width: 30ch; }
.cmp__table thead td { width: 20%; }
.cmp__table thead th { padding-top: 20px; padding-bottom: 20px; font-size: 1.12rem; font-weight: 600; letter-spacing: -.005em; text-transform: none; line-height: 1.3; color: var(--graphite); }
.cmp__table thead .cmp__us { width: 44%; font-size: 1.2rem; color: var(--ink); }
.cmp__table th, .cmp__table td { padding-top: 18px; padding-bottom: 18px; font-size: 1.02rem; }
.cmp__table tbody th { font-size: 1.04rem; }
/* A quiet cross before the usual way, as the tick stands before ours */
.cmp__table tbody td:not(.cmp__us) { position: relative; padding-left: calc(clamp(16px, 2vw, 28px) + 26px); }
.cmp__table tbody td:not(.cmp__us)::after { content: "×"; position: absolute; left: clamp(16px, 2vw, 28px); top: 15px; font-size: 1.25rem; line-height: 1.5; color: #b3b7bc; }
.cmp__table tbody .cmp__us::before { top: 25px; }
@media (max-width: 859px) {
  .cmp__table tbody td:not(.cmp__us) { padding-left: 0; }
  .cmp__table tbody td:not(.cmp__us)::after { content: none; }
  .cmp__table tbody .cmp__us::before { top: 19px; }
}
html:not(.font-archivo) .cmp__table thead th { font-weight: 700; }

/* ==========================================================================
   CAR PAGE 03 · PRICE, IN TWO COLUMNS — the car on its stage with its two choices; beside it the two figures,
   one detail at a time, and the one ask. Overrides the earlier three-column rules above.
   ========================================================================== */

.cost__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: stretch; }
/* The stage: the same tint and corners as the 360 above, so the car is the same object in both */
.cost__car { display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 1.4vw, 20px); padding: clamp(20px, 2.6vw, 40px); background: var(--tint); border-radius: var(--r-lg); }
.cost__car figure { width: 100%; max-width: 760px; margin: auto; }
.cost__pick { width: 100%; max-width: 560px; margin: 0 auto; }
.cost__pick .field { border-color: transparent; }

.cost__side { display: flex; flex-direction: column; justify-content: center; padding: clamp(4px, 1vw, 16px) 0; }
.cost__name { font-size: 1.05rem; color: var(--graphite); }
/* Two figures of equal weight, a hairline between them */
.cost__figs { display: grid; grid-template-columns: auto auto; justify-content: start; margin-top: 18px; }
.cost__figs > div { padding-right: clamp(24px, 3.4vw, 56px); }
.cost__figs > div + div { padding-left: clamp(24px, 3.4vw, 56px); padding-right: 0; border-left: 1px solid var(--rule); }
.cost__figs .price__fig { margin-top: 8px; font-size: clamp(2.1rem, 3.1vw, 2.9rem); white-space: nowrap; }
.cost__figs .price__fig sup { font-size: .42em; font-weight: 400; vertical-align: super; }
.cost__sub { margin-top: 8px; font-size: .92rem; color: var(--graphite); }

.cost__tabs { align-self: flex-start; margin-top: clamp(26px, 2.8vw, 38px); }
.cost__tabs .tab { min-height: 44px; padding: 0 clamp(16px, 1.6vw, 22px); font-size: .98rem; }
.cost__pane { min-height: 236px; margin-top: 6px; }
.cost__pane[hidden] { display: none; }
.cost__pane .ledger { margin-top: 0; border-top: 0; }
.cost__pane .ledger div { padding: 13px 0; font-size: 1rem; }
.cost__pane .ledger .ledger__sum { font-size: 1.06rem; }
.cost__pane .slider { margin-top: 20px; }
.cost__pane .slider input::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--white); }
.cost__pane .slider input::-moz-range-thumb { box-shadow: 0 0 0 4px var(--white); }
.cost__pane .plan__loan { margin-top: 18px; }

.cost__side .getquote { margin-top: 18px; padding-top: 0; border-top: 0; }
.cost__side .cost__note { margin-top: 12px; max-width: 64ch; }

@media (max-width: 1199px) {
  .cost__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cost__car { grid-column: auto; }
  .cost__side { min-width: 0; }
}
@media (max-width: 859px) {
  .cost__car { margin: 0 calc(-1 * var(--gutter)); padding: 20px var(--gutter) 22px; border-radius: 0; }
  .cost__grid { grid-template-columns: minmax(0, 1fr); }
  .cost__figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cost__sub { font-size: .86rem; }
  .cost__figs > div { padding-right: 12px; }
  .cost__figs > div + div { padding-left: 16px; }
  .cost__figs .price__fig { font-size: clamp(1.55rem, 7.4vw, 2rem); }
  .cost__tabs { align-self: stretch; display: flex; }
  .cost__tabs .tab { flex: 1 1 0; padding: 0 8px; }
  .cost__pane { min-height: 0; }
}

/* ==========================================================================
   CAR PAGE 01 · WHY BUY IT FROM US, WITHOUT THE PHOTOGRAPH — the heading with its two actions on one line,
   then the four reasons side by side under a hairline: the same head-then-row pattern as the sections below
   ========================================================================== */

.whyus--row .h2 { max-width: 30ch; }
.whyus--row .cmp__acts { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.usps--row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 56px); margin-top: clamp(28px, 3.2vw, 46px); padding-top: clamp(28px, 3.2vw, 44px); border-top: 1px solid var(--rule); }
.usps--row .usp { display: block; }
.usps--row .usp__icon { display: grid; margin-bottom: 20px; }
.usps--row .usp p { max-width: 32ch; }
@media (max-width: 1199px) {
  .usps--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  .usps--row { grid-template-columns: 1fr; gap: 26px; }
  .usps--row .usp { display: grid; }
  .usps--row .usp__icon { margin-bottom: 0; }
  .whyus--row .cmp__acts { flex: 1 1 100%; }
  .whyus--row .cmp__acts .btn { flex: 1 1 100%; width: auto; }
}

/* The comparison chart, in the page's two-column rhythm (as the price above and the FAQ below): the question and its
   action on the left at the page edge, the chart on the right. Supersedes the centred, contained version. */
.cmp > * { max-width: none; margin-left: 0; margin-right: 0; }
.cmp { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.cmp > .cmp__head { flex-direction: column; align-items: flex-start; gap: clamp(24px, 2.6vw, 34px); position: sticky; top: calc(var(--nav-h) + 32px); }
.cmp .h2 { max-width: 16ch; }
.cmp__table { margin-top: 0; }
.cmp__table thead td { width: 21%; }
.cmp__table thead .cmp__us { width: 43%; }
.cmp__table thead th { padding-top: 22px; padding-bottom: 22px; }
.cmp__table th, .cmp__table td { padding-top: 22px; padding-bottom: 22px; font-size: 1.05rem; }
.cmp__table tbody td:not(.cmp__us)::after { top: 19px; }
.cmp__table tbody .cmp__us::before { top: 29px; }
@media (max-width: 1199px) {
  .cmp { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cmp > .cmp__head { position: static; }
  .cmp .h2 { max-width: 30ch; }
}
@media (max-width: 859px) {
  .cmp__table th, .cmp__table td { padding-top: 0; padding-bottom: 0; }
  .cmp__table tbody td { padding-top: 6px; }
  .cmp__table tbody .cmp__us, .cmp__table tbody tr:last-child .cmp__us { padding: 12px 14px 12px 42px; }
  .cmp__table tbody .cmp__us::before { top: 19px; }
}

/* ==========================================================================
   CAR PAGE 02 · THE BAR UNDER THE CAR — two decisions side by side: colour on the left, version on the right.
   Replaces the colour row, the eleven-name track and the sentence row.
   ========================================================================== */

/* The drag hint sits on the stage itself, in its lower left corner, clear of the car */
.viewer__hint { position: absolute; left: clamp(12px, 1.4vw, 20px); bottom: clamp(12px, 1.4vw, 20px); z-index: 2; min-width: 0; padding: 7px 12px 7px 10px; background: var(--white); border-radius: var(--r); font-size: .84rem; pointer-events: none; }

.config { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 88px); align-items: end; margin-top: clamp(20px, 2.2vw, 30px); }
.config__cell { min-width: 0; margin: 0; padding: 0; border: 0; }
.config__cell--ver { padding-left: clamp(32px, 5vw, 88px); border-left: 1px solid var(--rule); }
.config__cap { display: flex; align-items: baseline; gap: 12px; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); line-height: 1.4; }
.config__cap b { font-size: .98rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.config__cell--ver .config__cap b { font-weight: 400; color: var(--graphite); }
.config .paint__list { margin-top: 0; min-height: 52px; align-items: center; margin-top: 10px; }
.config .paint__dot { width: 30px; height: 30px; }
.config__row { display: flex; align-items: center; gap: 12px clamp(16px, 2vw, 32px); flex-wrap: wrap; margin-top: 10px; }
.config__row .field { flex: 0 1 330px; min-height: 52px; border-color: #d5d8dc; }
.config__row select { height: 50px; font-size: 1rem; font-weight: 600; color: var(--ink); text-overflow: ellipsis; }
.config__now { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.config__now b { font-size: 1.02rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.config__now span { font-size: .93rem; line-height: 1.4; color: var(--graphite); }
.config__row .btn { min-height: 52px; gap: 12px; padding: 0 16px 0 18px; }
.config .paint[hidden] { display: none; }
.config:has(.paint[hidden]) { grid-template-columns: minmax(0, 1fr); }
.config:has(.paint[hidden]) .config__cell--ver { padding-left: 0; border-left: 0; }

@media (max-width: 1199px) {
  .config { grid-template-columns: minmax(0, 1fr); }
  .config__cell--ver { padding-left: 0; border-left: 0; }
}
@media (max-width: 859px) {
  .viewer__hint { font-size: .76rem; padding: 5px 9px 5px 7px; }
  .config .paint__list { gap: 9px; }
  .config .paint__dot { width: 28px; height: 28px; }
  .config__row .field { flex: 1 1 100%; }
  .config__row .btn { flex: 1 1 100%; }
}
html:not(.font-archivo) .config__now b { font-weight: 700; }
@media (min-width: 1200px) {
  /* One line: the dropdown, its sentence (which wraps within itself) and the way in */
  .config__row { flex-wrap: nowrap; }
  .config__row .field { flex: 0 0 clamp(270px, 22vw, 330px); }
  .config__now { flex: 1 1 0; }
  .config__row .btn { flex: none; }
}
@media (max-width: 859px) {
  /* Phone: the car fills the stage, so the hint keeps to the top corner */
  .viewer__hint { top: 10px; bottom: auto; left: var(--gutter); }
}
@media (min-width: 1200px) and (max-width: 1559px) {
  /* Laptop widths: the bar keeps to one line, so the sentence about the version waits in "Know more" */
  .config__now span { display: none; }
  .config__now b { font-size: .98rem; line-height: 1.35; }
}

/* ==========================================================================
   CAR PAGE 04 · WHY HERE, AS FIVE SHORT COLUMNS — not a table. The same head-then-row pattern as section 01:
   under each subject, the usual way in grey with a cross, then ours in ink with a tick. A one-line key beneath.
   ========================================================================== */

.duel { padding: var(--section) var(--pad) 0; }
.duel .h2 { max-width: 30ch; }
.duel__list { list-style: none; margin: clamp(28px, 3.2vw, 46px) 0 0; padding: clamp(28px, 3.2vw, 44px) 0 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px clamp(20px, 2.6vw, 48px); }
.duel__list h3 { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: var(--graphite); }
.duel__them, .duel__us { position: relative; padding-left: 28px; }
.duel__list .duel__them { margin-top: 16px; min-height: 3em; font-size: .98rem; line-height: 1.5; color: #8b9096; }
.duel__list .duel__us { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: clamp(1.08rem, 1.3vw, 1.22rem); font-weight: 600; line-height: 1.35; letter-spacing: -.005em; color: var(--ink); }
/* The cross and the tick */
.duel__them::before { content: "×"; position: absolute; left: 2px; top: -.12em; font-size: 1.3em; line-height: 1.5; color: #b3b7bc; }
.duel__us::before { content: ""; position: absolute; left: 2px; top: .5em; width: 13px; height: 7px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.duel__list .duel__us::before { top: calc(14px + .42em); }
.duel__key { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: clamp(24px, 2.6vw, 34px); font-size: .9rem; color: var(--graphite); }
.duel__key .duel__us { color: var(--ink); font-weight: 600; }
@media (max-width: 1399px) {
  .duel__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  .duel__list { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .duel__list .duel__them { min-height: 0; margin-top: 10px; }
  .duel .cmp__acts { flex: 1 1 100%; }
  .duel .cmp__acts .btn { width: 100%; }
}
html:not(.font-archivo) .duel__list .duel__us, html:not(.font-archivo) .duel__list h3 { font-weight: 700; }

/* ==========================================================================
   CAR PAGE 06 · THE RIGHT FIT, ALIGNED — the photograph and the words share one height: the label meets the
   photograph's top edge, the buttons its foot. Less to read: three short tabs, one answer, one line of fact.
   ========================================================================== */

.fit__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: stretch; }
/* The photograph takes the words' height; only sky and road at its edges are trimmed, never the car */
.fit__photo { position: relative; aspect-ratio: auto; min-height: 420px; }
.fit__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fit__side { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(26px, 3vw, 40px); }
.fit__side .label { margin-top: -2px; }
.fit__tabs { margin-top: 0; }
.fit__answer { margin-top: clamp(20px, 2.2vw, 28px); }
.fit__answer > p { min-height: 0; }
.fit__answer #fit-text { min-height: 3.1em; }
.fit__answer .fit__meta { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 1.02rem; color: var(--graphite); max-width: none; }
.fit__meta b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.fit__acts { margin-top: 0; }
@media (max-width: 1699px) {
  /* Narrower than this the words are taller than a 2:1 photograph, and stretching it would cut the car: the photograph keeps its shape and sits centred beside them */
  .fit__grid { align-items: center; }
  .fit__photo { min-height: 0; aspect-ratio: 2 / 1; }
}
@media (max-width: 1199px) {
  .fit__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 859px) {
  .fit__grid { gap: 26px; }
  .fit__side { gap: 24px; }
  .fit__answer #fit-text { min-height: 0; }
}
html:not(.font-archivo) .fit__meta b { font-weight: 700; }

/* ==========================================================================
   CAR PAGE 04 · WHY HERE, AS A COMPARISON CHART — heading and action at the page edge, then one chart the width
   of the page: the subject, the usual way, ours. One line a row, so it reads across at a glance.
   ========================================================================== */

.chart { width: 100%; margin-top: clamp(28px, 3.2vw, 44px); border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: left; }
.chart thead td { width: 20%; }
.chart thead th { width: 40%; padding: 20px clamp(18px, 2.4vw, 40px); font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: var(--graphite); }
.chart thead .chart__us { background: var(--ink); color: #fff; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.chart tbody th, .chart tbody td { padding: 20px clamp(18px, 2.4vw, 40px); border-top: 1px solid var(--rule); vertical-align: middle; font-size: 1.05rem; line-height: 1.45; }
.chart tbody th { padding-left: 0; font-weight: 600; color: var(--ink); }
.chart tbody td { color: var(--graphite); }
.chart tbody .chart__us { background: var(--tint); border-top-color: #e1e3e6; color: var(--ink); font-weight: 600; }
.chart tbody tr:last-child .chart__us { border-radius: 0 0 var(--r-lg) var(--r-lg); }
/* A cross before the usual way, a tick before ours */
.chart tbody td > span { position: relative; display: block; padding-left: 30px; }
.chart tbody td:not(.chart__us) > span::before { content: "×"; position: absolute; left: 0; top: -.14em; font-size: 1.3em; line-height: 1.45; color: #b3b7bc; }
.chart tbody .chart__us > span::before { content: ""; position: absolute; left: 1px; top: .42em; width: 13px; height: 7px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
@media (max-width: 859px) {
  /* Phone: each row becomes a short block: the subject, the usual way, then ours on the tint */
  .chart, .chart tbody, .chart tr, .chart th, .chart td { display: block; width: auto; }
  .chart thead { display: none; }
  .chart tbody tr { padding: 18px 0; border-top: 1px solid var(--rule); }
  .chart tbody th, .chart tbody td { padding: 0; border-top: 0; }
  .chart tbody td { margin-top: 8px; font-size: .98rem; }
  .chart tbody .chart__us, .chart tbody tr:last-child .chart__us { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-lg); }
}
html:not(.font-archivo) .chart thead th, html:not(.font-archivo) .chart tbody th, html:not(.font-archivo) .chart tbody .chart__us { font-weight: 700; }

/* All eleven versions, in view: one track of names under the caption, the chosen one in ink.
   Beneath it, one line: what the chosen one costs, what it is known for, and the way in. */
.config { align-items: start; }
.vchips { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; margin-top: 10px; padding: 5px; background: var(--tint); border-radius: var(--r-lg); }
.vchips .vchip { min-height: 42px; padding: 0 2px; font-size: clamp(.82rem, .92vw, .98rem); }
.config__row { margin-top: 14px; }
.config__now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 18px; }
.config__now span { display: inline; }
.config__cell--ver .config__cap b { font-weight: 600; color: var(--ink); }
@media (min-width: 1200px) and (max-width: 1559px) {
  .config__now span { display: inline; }
  .vchips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
  .vchips { display: flex; overflow-x: auto; scrollbar-width: none; }
  .vchips::-webkit-scrollbar { display: none; }
  .vchips .vchip { flex: 0 0 auto; padding: 0 16px; font-size: .96rem; }
}
@media (max-width: 859px) {
  .vchips { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 5px var(--gutter); border-radius: 0; }
}
/* Every width shows all eleven at once: the track wraps to more rows, it never scrolls */
@media (max-width: 1199px) {
  .vchips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; }
  .vchips .vchip { padding: 0 2px; font-size: .92rem; }
}
@media (max-width: 859px) {
  .vchips { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-left: 0; margin-right: 0; padding: 5px; border-radius: var(--r-lg); }
  .vchips .vchip { min-height: 44px; font-size: .86rem; }
}

/* CAR PAGE 01, IN ONE ROW — no buttons: the claim on the left, the four reasons beside it, a hairline before each */
@media (min-width: 1400px) {
  .whyus--row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 4fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
  .whyus--row .cmp__head { display: block; }
  .whyus--row .h2 { max-width: 15ch; font-size: clamp(1.7rem, 2.1vw, 2.1rem); }
  .whyus--row .usps--row { margin-top: 0; padding-top: 0; border-top: 0; gap: 0; }
  .whyus--row .usp { padding: 2px clamp(18px, 2vw, 36px) 4px; border-left: 1px solid var(--rule); }
  .whyus--row .usp:last-child { padding-right: 0; }
  .whyus--row .usp__icon { margin-bottom: 18px; }
  .whyus--row .usp h3 { font-size: 1.15rem; }
  .whyus--row .usp p { font-size: .97rem; max-width: none; }
}
@media (min-width: 1400px) {
  /* The claim holds to three lines at most: a wider column, no measure cap */
  .whyus--row { grid-template-columns: minmax(0, 1.9fr) minmax(0, 4fr); }
  .whyus--row .h2 { max-width: none; font-size: clamp(1.6rem, 1.95vw, 2rem); text-wrap: balance; }
  .whyus--row .usp { padding-left: clamp(16px, 1.6vw, 30px); padding-right: clamp(16px, 1.6vw, 30px); }
}
@media (min-width: 1400px) {
  /* The claim, given room: clear of its label, larger, with open lines */
  .whyus--row .h2 { margin-top: 20px; font-size: clamp(2rem, 2.35vw, 2.5rem); line-height: 1.22; }
  .whyus--row .cmp__head { padding-top: 4px; }
}

/* Price: the stage holds only the car. The one choice that belongs to the price, the engine and gearbox,
   sits on the first line of the figures' column, beside the car's name. */
.cost__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; }
.cost__name { font-size: clamp(1.15rem, 1.4vw, 1.35rem); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.cost__engine { flex: 0 0 auto; min-width: 230px; min-height: 46px; border-color: #d5d8dc; }
.cost__engine select { height: 44px; font-size: .98rem; font-weight: 600; color: var(--ink); }
.cost__figs { margin-top: clamp(18px, 2vw, 26px); }
.cost__car { justify-content: center; }
@media (max-width: 859px) {
  .cost__engine { flex: 1 1 100%; }
}
html:not(.font-archivo) .cost__name { font-weight: 700; }
/* A little more air between the chart's heading and the chart */
.chart { margin-top: clamp(40px, 4vw, 60px); }

/* THE RIGHT FIT, ALIGNED AT EVERY DESKTOP WIDTH — the photograph's column takes the room and is never shorter than
   its own 2:1 shape; the words keep to a fixed measure and spread to the same height: label at the top edge,
   buttons at the foot. If the words run a few pixels taller, only sky and road are trimmed. */
@media (min-width: 1400px) {
  .fit__grid { grid-template-columns: minmax(0, 1fr) clamp(440px, 34vw, 600px); gap: clamp(40px, 4.4vw, 80px); align-items: stretch; }
  .fit__photo { aspect-ratio: auto; min-height: 0; }
  .fit__photo::before { content: ""; display: block; padding-top: 50%; }
  .fit__side { gap: 20px; }
  .fit__answer { margin-top: 18px; }
  .fit__answer #fit-text { min-height: 0; }
  .fit__answer .fit__meta { margin-top: 14px; padding-top: 14px; }
}

/* ==========================================================================
   CAR PAGE 07 · VERSIONS, AS THE LINEUP — the homepage's "Explore the Kia lineup" pattern, for the eleven versions:
   a bar of segmented filters, then photo cards (photo, name, tag, starting price, one line, two buttons).
   ========================================================================== */

.vers { padding: var(--section) var(--pad) 0; }
.vers__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 48px; flex-wrap: wrap; }

/* Four groups on one bar. Each is the page's segmented track; a segment that is on is the raised white one. */
.vers__bar { margin-top: clamp(22px, 2.6vw, 34px); }
.vers__bar .filt__toggle { display: none; }
.vers__groups { display: flex; flex-wrap: wrap; gap: 18px clamp(18px, 2vw, 32px); }
.vers__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.vers__group legend { padding: 0; margin-bottom: 8px; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); line-height: 1.4; }
.vers__tabs { display: inline-flex; flex-wrap: wrap; }
.vers__opt { display: flex; cursor: pointer; }
.vers__opt input { position: absolute; opacity: 0; pointer-events: none; }
.vers__opt .tab { min-height: 44px; padding: 0 clamp(12px, 1.2vw, 18px); font-size: .96rem; }
.vers__opt input:checked + .tab { background: var(--white); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 23, 26, .1), 0 6px 16px -8px rgba(20, 23, 26, .3); }
.vers__opt input:focus-visible + .tab { outline: 2px solid var(--navy-2); outline-offset: 2px; }

.vers__count { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; min-height: 32px; margin-top: clamp(20px, 2.2vw, 28px); }

/* The cards: the lineup's own, four to a row. The photographs are 16:10 and are shown whole. */
.vers__cards { margin-top: clamp(14px, 1.6vw, 22px); animation: none; }
.vers__cards .model { animation: panel .45s var(--ease) both; }
.vers__cards .model__img { width: 100%; padding: 0; border: 0; cursor: pointer; aspect-ratio: 16 / 10; }
.vers__cards .model__name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.vers__cards .model__name button { padding: 0; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; transition: color .2s var(--ease); }
.vers__cards .model__name button:hover { color: var(--navy-2); }
.vers__cards .model__tag { color: var(--ink); }
.vers__cards .model__price { text-align: left; }
.vers__cards .model__price small { display: inline; font-size: .9rem; }
.vers__cards .model__line { max-width: none; }
.vers__cards .model__links .btn:hover .ico { transform: translateX(3px); }
.vers .pick__none { margin-top: 18px; background: var(--tint); }
.vers__note { margin-top: clamp(28px, 3.2vw, 44px); max-width: 110ch; }

@media (min-width: 1280px) and (max-width: 1559px) {
  .vers__cards.models--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  /* Phone: the filters fold behind one button; the cards are a row to swipe, as the lineup is */
  .vers { padding-left: 0; padding-right: 0; overflow-x: clip; }
  .vers__head, .vers__count, .vers__note, .vers .pick__none { margin-left: var(--gutter); margin-right: var(--gutter); }
  .vers__bar { margin: 20px var(--gutter) 0; background: var(--tint); border-radius: var(--r-lg); }
  .vers__bar .filt__toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 1.02rem; font-weight: 600; color: var(--ink); }
  .vers__bar .filt__toggle b { margin-left: 8px; font-weight: 400; color: var(--graphite); }
  .vers__bar .filt__toggle .ico { transition: transform .3s var(--ease); }
  .vers__bar .filt__toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }
  .vers__groups { display: none; padding: 4px 16px 18px; gap: 16px; }
  .vers__bar.is-open .vers__groups { display: grid; }
  .vers__tabs { display: flex; width: 100%; background: var(--white); }
  .vers__opt { flex: 1 1 auto; }
  .vers__opt .tab { flex: 1; min-height: 44px; padding: 0 10px; font-size: .9rem; }
  .vers__opt input:checked + .tab { background: var(--ink); color: #fff; box-shadow: none; }
  .vers__cards .model { flex: 0 0 82%; }
}
html:not(.font-archivo) .vers__opt input:checked + .tab { font-weight: 700; }

/* ==========================================================================
   CAR PAGE 08 · AFTER THE ENQUIRY, AS A TIMELINE — four steps down one rail. The rail fills in ink as the section
   is scrolled through, and each step's number and title turn to ink as the fill reaches it.
   ========================================================================== */

.steps { list-style: none; position: relative; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; display: grid; gap: clamp(24px, 2.6vw, 36px); }
/* The rail, and its fill */
.steps::before, .steps::after { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: var(--rule); }
.steps::after { background: var(--ink); transform: scaleY(var(--p, 1)); transform-origin: top; transition: transform .25s linear; }
.step { position: relative; z-index: 1; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: clamp(18px, 2vw, 28px); align-items: start; }
.step__n { grid-row: 1 / span 2; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--white); border: 1px solid #c9ccd1; box-shadow: 0 0 0 6px var(--white); font-size: 1.05rem; font-weight: 700; color: #8b9096; font-variant-numeric: tabular-nums; transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.step h3 { margin-top: 9px; font-size: clamp(1.12rem, 1.4vw, 1.28rem); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; transition: color .3s var(--ease); }
.step p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--graphite); max-width: 46ch; }
.step.is-on .step__n { background: var(--ink); border-color: var(--ink); color: #fff; }
.js .step:not(.is-on) h3 { color: #8b9096; }
.whyus--flip .whyus__acts { padding-top: clamp(30px, 3.2vw, 44px); }
html:not(.font-archivo) .step h3 { font-weight: 700; }

/* One heading style for every chapter on the car page: the same size, the same gap under its label, the same
   leading. Section 01 no longer has a treatment of its own, so it and the heading beneath it read as one family. */
.car .h2:not(.h2--xl) { margin-top: 14px; line-height: 1.16; }
@media (min-width: 1400px) {
  .whyus--row .h2 { margin-top: 14px; font-size: clamp(1.7rem, 2.6vw, 2.35rem); line-height: 1.16; }
  .whyus--row .cmp__head { padding-top: 0; }
}
/* More room between "Why buy it from us?" and the 360 beneath it */
.whyus--row { padding-bottom: clamp(28px, 3.4vw, 56px); }



/* ==========================================================================
   CAR PAGE 11 · THE BOOKING FORM, IN ORDER — three numbered steps of equal rhythm (the car, the place, your details),
   every row on the same three columns, then the one button with its reassurances beside it.
   ========================================================================== */

.final__cap { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 20px; margin-top: clamp(26px, 2.8vw, 34px); }
.final__cap i { margin-right: 12px; font-style: normal; color: #b3b7bc; font-variant-numeric: tabular-nums; }
.final__cap b { font-size: .98rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.final__picks, .final__fields, .where { margin-top: 12px; }
.final__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.where { padding: 5px; border-radius: var(--r-lg); }
.where .tab { min-height: 46px; }
/* The ask: one button, and beside it what happens next */
.final__send { display: flex; align-items: center; flex-wrap: wrap; gap: 16px clamp(20px, 2.4vw, 36px); margin-top: clamp(22px, 2.4vw, 30px); padding-top: clamp(22px, 2.4vw, 30px); border-top: 1px solid #d5d8dc; }
.final__send .btn { min-height: 56px; min-width: 250px; padding: 0 26px; }
.final__send .final__notes { display: grid; gap: 6px; margin: 0; }
.final__send .final__notes li:last-child { margin-top: 2px; }
.final__form.is-done .form__status { margin-top: 26px; }
@media (max-width: 1199px) {
  .final__fields { grid-template-columns: 1fr 1fr; }
  .final__fields .field--select { grid-column: 1 / -1; }
}
@media (max-width: 859px) {
  .final__fields { grid-template-columns: 1fr; }
  .final__fields .field--select { grid-column: auto; }
  .final__send .btn { flex: 1 1 100%; }
}
html:not(.font-archivo) .final__cap b { font-weight: 700; }

/* CAR PAGE 09 · OTHER CARS — the homepage's lineup, as it is; only the chapter's own spacing is set here */
.others { padding-bottom: 0; }
.others .range__head { display: block; }

/* ==========================================================================
   CAR PAGE 08 · PROOF, AS RATINGS BESIDE A GALLERY — on the left the three Google ratings, one to a line, and the
   way to read them all; on the right five real deliveries in the homepage's gallery (one large, a rail of thumbnails).
   ========================================================================== */

.proof__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: stretch; }
.proof__side { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(26px, 3vw, 40px); }
.proof .h2 { max-width: 18ch; }
/* One rating a line: Google's mark, the figure, the place, the count at the right. Hairlines between, no boxes. */
.proof__rates { display: block; margin: 0; }
.proof__rates li { display: grid; grid-template-columns: 26px auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px 0; border-top: 1px solid var(--rule); }
.proof__rates li:last-child { border-bottom: 1px solid var(--rule); }
.proof__rates b { min-width: 2.2ch; font-size: clamp(1.6rem, 2.1vw, 2rem); }
.proof__rates span { display: block; font-size: 1.08rem; }
.proof__rates small { font-size: .95rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.proof__acts .btn { min-height: 50px; gap: 10px; }
.proof__acts .g { width: 18px; height: 18px; flex: none; }
.proof .gallery__main { aspect-ratio: 4 / 3; }
@media (max-width: 1199px) {
  .proof__grid { grid-template-columns: minmax(0, 1fr); }
  .proof .h2 { max-width: 30ch; }
}
@media (max-width: 859px) {
  .proof__rates li { grid-template-columns: 24px auto minmax(0, 1fr); row-gap: 0; }
  .proof__rates small { grid-column: 3; }
  .proof__rates b { grid-row: span 2; }
  .proof__rates .g { grid-row: span 2; }
  .proof__acts .btn { width: 100%; }
}

/* The timeline, refined: a thin rail that stops at the fourth number; its fill is eased by script, not stepped;
   and the photograph beside it changes with the step that has been reached. */
.steps::before, .steps::after { left: 22px; top: 23px; bottom: auto; width: 2px; height: var(--rail, 0px); border-radius: 1px; }
.steps::after { transition: none; }
.step__n { transition: background .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease); }
.step h3 { transition: color .45s var(--ease); }
.steps__photo img { opacity: 0; transition: opacity .7s ease; }
.steps__photo img.is-active { opacity: 1; }

/* Price: the car can be changed here too. One quiet line names it, then two dropdowns side by side:
   the version, and its engine and gearbox. */
.cost__name { font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--graphite); }
html:not(.font-archivo) .cost__name { font-weight: 400; }
.cost__top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 560px; margin-top: 10px; }
.cost__top .field { min-height: 52px; border-color: #d5d8dc; }
.cost__top select { height: 50px; font-size: 1.02rem; font-weight: 600; color: var(--ink); text-overflow: ellipsis; }
@media (max-width: 859px) {
  .cost__top { max-width: none; }
}

/* Price: the two dropdowns that set the car sit in the section's heading line, at the right, where the page keeps
   every control that governs a whole section (as Exterior / Interior does above). The figures column opens with
   one quiet line naming the car they are for. */
.cost__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px 40px; flex-wrap: wrap; }
.cost__head .cost__top { flex: 0 1 520px; max-width: none; margin-top: 0; }
@media (max-width: 859px) {
  .cost__head .cost__top { flex: 1 1 100%; grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   CAR PAGE 09 · THE OTHER CARS, AS A FINDER — a short filter on the left; on the right each car that fits is one
   line: a small cut-out, its name and what it is, its starting price, and the link to its own page.
   ========================================================================== */

.others { padding: var(--section) var(--pad) 0; }
.others__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 48px; flex-wrap: wrap; }
.others__grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; margin-top: clamp(28px, 3.2vw, 44px); }
.others__filt { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 26px; }
.others__bar { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; min-height: 32px; }
.others__bar [hidden] { display: none; }
/* Two columns of cars on a wide screen, so ten cars are five short rows */
.others__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }
.ocar { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; grid-template-areas: "img what price" "img what go"; align-items: center; column-gap: clamp(14px, 1.6vw, 24px); padding: 16px 0; border-top: 1px solid var(--rule); animation: panel .4s var(--ease) both; }
.ocar__img { grid-area: img; display: block; aspect-ratio: 2 / 1; }
.ocar__img img { object-fit: contain; transition: transform .6s var(--ease); }
.ocar:hover .ocar__img img { transform: scale(1.05); }
.ocar__what { grid-area: what; min-width: 0; }
.ocar__what h3 { font-size: clamp(1.12rem, 1.4vw, 1.3rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.ocar__what h3 a { transition: color .2s var(--ease); }
.ocar__what h3 a:hover { color: var(--navy-2); }
.ocar__what p { margin-top: 4px; font-size: .92rem; line-height: 1.45; color: var(--graphite); }
.ocar__price { grid-area: price; align-self: end; justify-self: end; font-size: 1.05rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ocar__price small { margin-right: 6px; font-size: .84rem; font-weight: 400; color: var(--graphite); }
.ocar__go { grid-area: go; align-self: start; justify-self: end; margin-top: 4px; font-size: .95rem; white-space: nowrap; }
.others__none { margin-top: 18px; padding: 22px 24px; background: var(--tint); border-radius: var(--r-lg); font-size: 1.02rem; line-height: 1.55; color: var(--graphite); }
.others__none[hidden] { display: none; }
.others__note { margin-top: clamp(22px, 2.6vw, 34px); max-width: 100ch; }

@media (max-width: 1399px) {
  .others__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 859px) {
  .others__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .others__filt { position: static; grid-template-columns: 1fr 1fr; gap: 18px 16px; padding: 18px 16px; background: var(--tint); border-radius: var(--r-lg); }
  .others__filt .filt__group:last-child { grid-column: 1 / -1; }
  .ocar { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "img what" "img price" "img go"; row-gap: 2px; }
  .ocar__price, .ocar__go { justify-self: start; }
  .ocar__price { margin-top: 6px; }
}
html:not(.font-archivo) .ocar__what h3, html:not(.font-archivo) .ocar__price { font-weight: 700; }

/* The timeline, paced by time: it plays once at reading pace when it comes into view (one step every 3.2 s).
   The rail travels to each number over 1.4 s; the number and its title turn to ink as it arrives; the photograph
   cross-fades over a second. A step can be chosen by hand, which holds the sequence there. */
.steps::after { transition: transform 1.4s cubic-bezier(.45, 0, .2, 1); }
.step { cursor: pointer; outline-offset: 6px; }
.step__n, .step h3 { transition-duration: .5s; }
.step.is-on .step__n, .step.is-on h3 { transition-delay: 1s; }
.step:first-child.is-on .step__n, .step:first-child.is-on h3 { transition-delay: 0s; }
.steps__photo img { transition: opacity 1.1s ease .5s; }
.step:hover:not(.is-on) h3 { color: var(--graphite); }

/* ==========================================================================
   CAR PAGE 08 · PROOF, AS A REEL — the heading with the three Google ratings on its own line; then the delivery
   photographs in one row that runs to both edges of the screen; then the reviews link and the arrows.
   Supersedes the ratings-beside-a-gallery version.
   ========================================================================== */

.proof__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 22px 48px; flex-wrap: wrap; }
.proof .h2 { max-width: 22ch; }
/* Three ratings side by side, a hairline between them */
.rates { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 0; }
.rates li { display: flex; align-items: center; gap: 10px; padding: 0 clamp(16px, 1.8vw, 30px); border-left: 1px solid var(--rule); }
.rates li:first-child { padding-left: 0; border-left: 0; }
.rates li:last-child { padding-right: 0; }
.rates .g { width: 22px; height: 22px; flex: none; }
.rates b { font-size: clamp(1.5rem, 1.9vw, 1.85rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rates span { display: grid; gap: 1px; font-size: .98rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.rates small { font-size: .86rem; font-weight: 400; color: var(--graphite); }

/* The row bleeds past the side padding to the edges of the screen; the first photograph still starts on the page edge */
.reel { margin: clamp(26px, 3vw, 42px) calc(-1 * var(--pad)) 0; padding: 0 var(--pad); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; outline-offset: -3px; }
.reel::-webkit-scrollbar { display: none; }
.reel__track { list-style: none; margin: 0; padding: 0; display: flex; column-gap: clamp(10px, 1.2vw, 18px); width: max-content; }
.reel__track li { flex: none; width: clamp(260px, 31vw, 600px); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); background: var(--tint); scroll-snap-align: start; }
.reel__track img { -webkit-user-drag: none; user-select: none; transition: transform .9s var(--ease); }
.reel__track li:hover img { transform: scale(1.03); }

.proof__foot { display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; margin-top: clamp(18px, 2vw, 26px); }
.proof__foot .btn { min-height: 50px; gap: 10px; }
.proof__foot .g { width: 18px; height: 18px; flex: none; }
.reel__nav { display: flex; gap: 8px; }
.reel__nav .round { width: 50px; height: 50px; border-color: #b3b7bc; }
@media (max-width: 1199px) {
  .rates li { padding: 0 16px; }
}
@media (max-width: 859px) {
  .rates { display: grid; gap: 14px; width: 100%; }
  .rates li, .rates li:first-child { padding: 0; border-left: 0; }
  .reel__track li { width: 78vw; }
  .proof__foot .btn { flex: 1 1 auto; }
}
/* The heading keeps to its own measure, so the ratings share its line */
.proof__head > div:first-child { flex: 0 1 36rem; }
/* The ratings sit at the right of the heading, level with its last line */
.proof__head { flex-wrap: nowrap; }
.proof__head .rates { flex: none; flex-wrap: nowrap; margin-left: auto; padding-bottom: 6px; }
@media (max-width: 1199px) { .proof__head { flex-wrap: wrap; } .proof__head .rates { flex-wrap: wrap; margin-left: 0; } }

/* The timeline, continuous: the rail moves at one steady speed between numbers (its time and curve are set by script),
   a number and its title turn to ink the moment the rail arrives, and each photograph fades in over the one before it,
   so the picture never dips to grey between two photographs. */
.steps::after { transition: transform var(--ms, 700ms) var(--ease, linear); will-change: transform; }
.step__n, .step h3 { transition-duration: .6s; }
.step.is-on .step__n, .step.is-on h3, .step:first-child.is-on .step__n, .step:first-child.is-on h3 { transition-delay: 0s; }
.steps__photo img, .steps__photo img.is-active { opacity: 0; transition: opacity 1.4s ease; will-change: opacity; }
.steps__photo img.is-on { opacity: 1; }

/* The timeline, held in place: on a desktop the section is taller than the screen by the length of scroll the four
   steps are given, and its content sticks under the header for that length. Scrolling moves the rail from step to
   step; the next section arrives only after the fourth. */
.whyus--flip.is-pinned { padding-bottom: var(--pin-run, 0px); }
.whyus--flip.is-pinned .whyus__grid { position: sticky; top: var(--pin-top, 100px); }
/* The ratings group, a little narrower: closer together and slightly smaller */
.rates li { gap: 8px; padding: 0 clamp(12px, 1.2vw, 20px); }
.rates b { font-size: clamp(1.35rem, 1.6vw, 1.6rem); }
.rates .g { width: 20px; height: 20px; }
.rates span { font-size: .92rem; }
.rates small { font-size: .82rem; }
/* The arrows sit on the row itself: one at its left end, one at its right, half-way up the photographs */
.reel__wrap { position: relative; }
.reel__arrow { position: absolute; top: calc(50% + clamp(13px, 1.5vw, 21px)); z-index: 2; width: 52px; height: 52px; margin-top: -26px; background: var(--white); border-color: var(--white); border-radius: 50%; box-shadow: 0 2px 10px rgba(20, 23, 26, .18); }
.reel__arrow--prev { left: 14px; }
.reel__arrow--next { right: 14px; }
@media (max-width: 859px) { .reel__arrow { width: 44px; height: 44px; margin-top: -22px; } .reel__arrow--prev { left: 6px; } .reel__arrow--next { right: 6px; } }

/* Sticky needs the page itself to be the scroller: the body clips sideways overflow without becoming a scroll box */
body.car { overflow-x: clip; overflow-y: visible; }

/* ==========================================================================
   CAR PAGE 09 · THE OTHER CARS, AS CARDS — three to a row beside the filter. Each card: the car on a tint stage,
   its name with the starting price on the same line, what it is, its fuels, and two actions.
   Supersedes the one-line rows.
   ========================================================================== */

.others__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 28px); margin-top: 14px; }
.ocar { display: flex; flex-direction: column; padding: 0 0 clamp(16px, 1.6vw, 22px); border-top: 0; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; transition: border-color .25s var(--ease); }
.ocar:hover { border-color: #b3b7bc; }
.ocar__img { aspect-ratio: 2 / 1; padding: 10px 14% 0; background: var(--tint); }
.ocar__row, .ocar__what, .ocar__fuel, .ocar__acts { padding: 0 clamp(14px, 1.5vw, 20px); }
.ocar__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 16px; }
.ocar__row h3 { font-size: clamp(1.12rem, 1.35vw, 1.3rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.ocar__row h3 a:hover { color: var(--navy-2); }
.ocar__price { align-self: baseline; justify-self: auto; font-size: 1.02rem; }
.ocar__what { margin-top: 6px; font-size: .95rem; line-height: 1.45; color: var(--ink); }
.ocar__fuel { margin-top: 2px; font-size: .9rem; line-height: 1.45; color: var(--graphite); }
.ocar__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 16px; }
.ocar__acts .btn { min-height: 46px; padding: 0 8px; gap: 8px; font-size: .9rem; }
@media (max-width: 1399px) {
  .others__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  .others__list { grid-template-columns: minmax(0, 1fr); }
  .ocar { display: flex; grid-template-areas: none; }
  .ocar__price { margin-top: 0; }
}
html:not(.font-archivo) .ocar__row h3 { font-weight: 700; }

/* The held timeline needs its extra scroll length INSIDE the section's content box (sticky cannot travel through padding) */
.whyus--flip.is-pinned { padding-bottom: 0; }
.whyus--flip.is-pinned::after { content: ""; display: block; height: var(--pin-run, 0px); }

/* Car cards: text runs from the card's left edge */
.ocar { align-items: stretch; text-align: left; }
.ocar__row h3 { min-width: 0; }
.ocar__price { white-space: nowrap; }

/* FAQ intro on the car page: the label sits close to its heading, as in every other chapter; the rest keeps its rhythm */
.car .faqs__intro { gap: 20px; }
.car .faqs__intro .h2 { margin-top: -6px; }
/* With no filter on there is no count line: the cards start level with the filter */
.others__bar[hidden] { display: none; }
.others__bar[hidden] + .others__list { margin-top: 0; }
/* Right fit: a slightly narrower photograph, the words given the room */
@media (min-width: 1400px) {
  .fit__grid { grid-template-columns: minmax(0, 1fr) clamp(520px, 41vw, 740px); }
}

/* Booking form, unboxed: fields are a line to write on, not a white box; the place is chosen from a plain row
   where only the chosen one is filled. One hairline per field, nothing else drawn. */
.final .field { min-height: 52px; padding: 0 2px; background: transparent; border: 0; border-bottom: 1px solid #c3c7cc; border-radius: 0; box-shadow: none; transition: border-color .2s var(--ease); }
.final .field:hover { border-bottom-color: #8b9096; }
.final .field:focus-within { box-shadow: none; border-bottom-color: var(--ink); outline: 0; }
.final .field.is-invalid { box-shadow: none; border-bottom-color: var(--error, #c0392b); }
.final .field input, .final .field select { height: 50px; background: transparent; }
.final .field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--tint) inset; }
.final__picks, .final__fields { column-gap: clamp(18px, 2vw, 32px); row-gap: 6px; margin-top: 4px; }
.where { margin-top: 12px; padding: 0; gap: 6px; background: transparent; border: 0; border-radius: 0; }
.where .tab { flex: 0 1 auto; min-height: 44px; padding: 0 20px; border-radius: var(--r); color: var(--graphite); }
.where .tab:hover { color: var(--ink); }
.where .tab.is-active { background: var(--ink); color: #fff; }
.final__cap { margin-top: clamp(28px, 3vw, 38px); }
/* Car cards keep the same quiet outline on hover */
.ocar, .ocar:hover { border-color: var(--rule); transition: none; }
/* Timeline numbers are never filled: a reached step is an ink ring with an ink number on white; the rest stay grey */
.step.is-on .step__n { background: var(--white); border-color: var(--ink); box-shadow: 0 0 0 6px var(--white), inset 0 0 0 1px var(--ink); color: var(--ink); }

/* Dropdowns, opened or hovered: room inside the field, no tight focus box round the text, and a list whose
   rows are regular weight with space to breathe */
.final .field { padding: 0 10px; }
.final .field select, .cost__top select { outline: 0; cursor: pointer; }
.final .field select:focus-visible, .cost__top select:focus-visible { outline: 0; }
.car select option { padding: 10px 14px; background: var(--white); color: var(--ink); font-size: 1rem; font-weight: 400; line-height: 1.6; }
.car select option:checked { font-weight: 600; }
.final__picks, .final__fields { column-gap: clamp(14px, 1.6vw, 26px); }

/* ==========================================================================
   CAR PAGE 11 · THE BOOKING FORM, MADE PLAIN — three short questions in readable type; every field has its label
   above it (a placeholder disappears as soon as someone types); each place says what it is.
   ========================================================================== */

.final__cap { align-items: center; font-size: 1.12rem; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--ink); }
.final__cap span { display: inline-flex; align-items: center; gap: 12px; }
/* The step number, in a small ring */
.final__cap i { width: 26px; height: 26px; flex: none; margin-right: 0; display: inline-grid; place-items: center; border: 1px solid #b3b7bc; border-radius: 50%; font-size: .8rem; font-weight: 600; color: var(--graphite); }
.final__cap b { font-size: 1rem; }
.final__picks, .final__fields { margin-top: 14px; row-gap: 14px; }
/* A field: its label, then the line to fill */
.final .field { flex-wrap: wrap; align-content: flex-end; min-height: 70px; padding: 0 2px; row-gap: 0; }
.final .field__label { flex: 0 0 100%; font-size: .78rem; font-weight: 600; letter-spacing: .04em; line-height: 1.4; color: var(--graphite); cursor: pointer; }
.final .field__label small { margin-left: 6px; font-size: 1em; font-weight: 400; color: #8b9096; }
.final .field input, .final .field select { height: 44px; }
.final .field > .ico, .final .field > .final__dot { align-self: center; }
.final .field:focus-within .field__label { color: var(--ink); }
.final .field.is-invalid .field__label { color: var(--error, #c0392b); }
/* The places: a name and what it is */
.where { margin-top: 14px; gap: 8px; flex-wrap: wrap; }
.where .tab { display: grid; gap: 1px; justify-items: start; min-height: 56px; padding: 8px 18px; text-align: left; border: 1px solid #c9ccd1; }
.where .tab b { font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.where .tab small { font-size: .8rem; font-weight: 400; color: var(--graphite); line-height: 1.25; }
.where .tab:hover { border-color: #8b9096; }
.where .tab.is-active { border-color: var(--ink); }
.where .tab.is-active b { color: #fff; }
.where .tab.is-active small { color: rgba(255, 255, 255, .78); }
@media (max-width: 859px) {
  .where .tab { flex: 1 1 calc(50% - 4px); }
}
html:not(.font-archivo) .final__cap, html:not(.font-archivo) .where .tab b { font-weight: 700; }
/* The FAQ already ends with a full section of space; the booking panel does not add another */
.car .final { margin-top: 0; }
/* A little more room between "Is it the right fit" and the timeline beneath it */
.fit { padding-bottom: clamp(24px, 3vw, 48px); }

/* ==========================================================================
   REVIEW PASS — consistency and breathing room across the car page
   ========================================================================== */

/* Price: the two dropdowns match the booking form (a label, then a line to choose on), sit clear of the heading,
   and the line that repeated what they already say is gone */
.cost__head .cost__top { flex: 0 1 480px; gap: clamp(18px, 2vw, 32px); margin-top: 8px; }
.cost__top .field { flex-wrap: wrap; align-content: flex-end; min-height: 68px; padding: 0 2px; background: transparent; border: 0; border-bottom: 1px solid #c3c7cc; border-radius: 0; box-shadow: none; }
.cost__top .field:hover { border-bottom-color: #8b9096; }
.cost__top .field:focus-within { box-shadow: none; border-bottom-color: var(--ink); }
.cost__top .field__label { flex: 0 0 100%; font-size: .78rem; font-weight: 600; letter-spacing: .04em; line-height: 1.4; color: var(--graphite); cursor: pointer; }
.cost__top select { height: 44px; background: transparent; }
.cost__name { display: none; }
.cost__figs { margin-top: 0; }
.cost__grid { margin-top: clamp(32px, 3.4vw, 48px); }
@media (max-width: 859px) { .cost__head .cost__top { grid-template-columns: 1fr 1fr; gap: 16px; } }

/* Booking: the form and the map start on the same line; no rule above the button */
.final { align-items: start; }
.final .place { margin-top: clamp(6px, .8vw, 12px); }
.final__send { border-top: 0; padding-top: 0; margin-top: clamp(28px, 3vw, 38px); }

/* Proof: a little more room between the photographs and the reviews link */
.proof__foot { margin-top: clamp(24px, 2.6vw, 34px); }
/* Booking: more room between the three questions */
.final__cap { margin-top: clamp(40px, 4vw, 56px); }
.final__form > .final__cap:first-of-type { margin-top: clamp(28px, 3vw, 38px); }
.final__send { margin-top: clamp(36px, 3.6vw, 48px); }

/* ==========================================================================
   CAR PAGE 07 · TIMELINE, REFINED — two even columns; small quiet rings on a hairline rail; the step in hand is
   the one in full ink, with those already passed a shade quieter; the photograph carries a small tag naming its step.
   ========================================================================== */

@media (min-width: 1200px) { .whyus--flip .whyus__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); } }
.steps { margin-top: clamp(34px, 3.6vw, 48px); gap: clamp(30px, 3vw, 42px); }
.steps::before, .steps::after { left: 17px; top: 18px; width: 1px; border-radius: 0; }
.steps::before { background: #d5d8dc; }
.steps::after { width: 1px; }
.step { grid-template-columns: 36px minmax(0, 1fr); column-gap: clamp(20px, 2vw, 30px); }
.step__n { width: 36px; height: 36px; border: 1px solid #c9ccd1; box-shadow: 0 0 0 8px var(--white); font-size: .88rem; font-weight: 600; color: #8b9096; }
.step.is-on .step__n { border-color: var(--ink); box-shadow: 0 0 0 8px var(--white); color: var(--ink); }
.step h3 { margin-top: 5px; font-size: clamp(1.18rem, 1.5vw, 1.36rem); }
.step p { margin-top: 8px; max-width: 42ch; }
/* Passed steps step back a little; the one in hand stays in full ink */
.js .step.is-on:not(.is-now) h3 { color: var(--graphite); }
.js .step.is-on:not(.is-now) .step__n { border-color: #8b9096; color: var(--graphite); }
.js .step:not(.is-now) p { color: #8b9096; }
.step p { transition: color .5s var(--ease); }
/* The photograph says which step it belongs to */
.steps__photo::after { content: attr(data-cap); position: absolute; left: clamp(12px, 1.4vw, 20px); bottom: clamp(12px, 1.4vw, 20px); z-index: 2; padding: 8px 14px; background: var(--white); border-radius: var(--r); font-size: .86rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.steps__photo:not([data-cap])::after { content: none; }
@media (max-width: 859px) {
  /* Price selectors never push the page wider than the screen */
  .cost__head, .cost__head > div { min-width: 0; max-width: 100%; }
  .cost__head .cost__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  .cost__top .field, .cost__top select { min-width: 0; max-width: 100%; }
}

/* ==========================================================================
   CAR PAGE 07 · COMPARE VERSIONS — versions as columns, features grouped and collapsible, differences first.
   Cells are words with a quiet mark, not a grid of ticks and colours.
   ========================================================================== */
.cmpv { padding: var(--section) var(--pad) 0; }
.cmpv__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; flex-wrap: wrap; }
.cmpv__table { --cols: 3; margin-top: clamp(26px, 3vw, 40px); }
.cmpv__cols, .cmpv__row { display: grid; grid-template-columns: minmax(180px, 1.1fr) repeat(var(--cols), minmax(0, 1fr)); gap: 0 clamp(14px, 2vw, 28px); }
.cmpv__cols { position: sticky; top: var(--nav-h); z-index: 3; padding: 14px 0 18px; background: var(--white); border-bottom: 1px solid var(--rule); }
.cmpv__corner p { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.cmpv__col { display: grid; align-content: start; gap: 8px; min-width: 0; }
.cmpv__col .field { min-height: 48px; border-color: #d5d8dc; }
.cmpv__col select { height: 46px; font-size: 1rem; font-weight: 600; color: var(--ink); text-overflow: ellipsis; }
.cmpv__price { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmpv__price small { font-size: .82rem; font-weight: 400; color: var(--graphite); }
.cmpv__col .stage__link { justify-self: start; min-height: 24px; font-size: .85rem; }
.cmpv__col--add { align-content: center; }
.cmpv__col--add .btn { min-height: 48px; padding: 0 14px; font-size: .9rem; }
.cmpv__group { border-bottom: 1px solid var(--rule); }
.cmpv__group h3 { margin: 0; font: inherit; }
.cmpv__group h3 button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: 1.08rem; font-weight: 600; color: var(--ink); text-align: left; }
.cmpv__group h3 span { margin-right: auto; font-size: .88rem; font-weight: 400; color: var(--graphite); }
.cmpv__group.is-open .vrow__sign::after { transform: none; }
.cmpv__row { padding: 12px 0; border-top: 1px solid #eef0f2; }
.cmpv__name { font-size: .98rem; line-height: 1.4; color: var(--ink); }
.cmpv__cell { font-size: .95rem; line-height: 1.4; color: var(--graphite); }
.cmpv__cell span { position: relative; padding-left: 22px; }
.cmpv__cell.is-yes { color: var(--ink); }
.cmpv__cell.is-yes span::before { content: ""; position: absolute; left: 1px; top: .32em; width: 11px; height: 6px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.cmpv__cell.is-no { color: #9a9ea4; }
.cmpv__cell.is-no span::before { content: "–"; position: absolute; left: 2px; top: -.05em; }
.cmpv__cell.is-part span::before { content: ""; position: absolute; left: 1px; top: .3em; width: 10px; height: 10px; border: 1.5px solid var(--ink); border-radius: 50%; }
.cmpv__same { padding: 22px 0; color: var(--graphite); }
.cmpv__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 32px; margin-top: 24px; }
.cmpv__all { min-height: 44px; }
.cmpv__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.cmpv__acts .btn { min-height: 48px; }
.cmpv__note { margin-top: 16px; }
@media (max-width: 859px) {
  /* Phone: the feature name runs across the top of its row, the versions' answers in columns beneath */
  .cmpv__cols, .cmpv__row { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0 10px; }
  .cmpv__corner { display: none; }
  .cmpv__name { grid-column: 1 / -1; margin-bottom: 6px; font-weight: 600; }
  .cmpv__cell { font-size: .86rem; }
  .cmpv__col select { font-size: .88rem; }
  .cmpv__col--add .btn { padding: 0 8px; font-size: .8rem; white-space: normal; line-height: 1.2; }
  .cmpv__acts .btn { flex: 1 1 100%; }
}
@media (max-width: 859px) {
  .cmpv__cols, .cmpv__row { grid-template-columns: repeat(var(--picks, 2), minmax(0, 1fr)); }
  .cmpv__col, .cmpv__col .field, .cmpv__col select { min-width: 0; max-width: 100%; }
  .cmpv__col--add { grid-column: 1 / -1; margin-top: 10px; }
  .cmpv__col--add .btn { width: 100%; font-size: .9rem; }
  .cmpv__row > .cmpv__cell:empty { display: none; }
  .cmpv__price { font-size: .95rem; }
  .cmpv__price small { display: block; }
  .cmpv__group h3 button { flex-wrap: wrap; row-gap: 2px; padding: 12px 28px 12px 0; position: relative; }
  .cmpv__group h3 span { flex-basis: 100%; order: 2; }
  .cmpv__group h3 .vrow__sign { position: absolute; right: 0; top: 50%; margin-top: -6px; }
}

/* ==========================================================================
   VERSIONS + COMPARE IN PLACE (client: compare here, every version visible). Each chip = name + starting price, so
   the whole ladder reads at a glance; the chosen chip is filled, the one it is compared with is outlined. Below, one
   comparison: two names and prices, then only what differs.
   ========================================================================== */
.vchips .vchip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 6px 4px; line-height: 1.15; }
.vchips .vchip b { font-weight: 500; }
.vchips .vchip small { font-size: .76rem; color: var(--graphite); font-variant-numeric: tabular-nums; }
.vchips .vchip.is-active b { font-weight: 600; }
.vchips .vchip.is-active small { color: rgba(255, 255, 255, .72); }
.vchips .vchip.is-vs { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.vcmp { margin-top: 16px; padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.vcmp__head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 12px clamp(16px, 2vw, 28px); }
.vcmp__tag { display: block; margin: 0 0 6px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.vcmp__name { display: flex; align-items: center; min-height: 48px; font-size: clamp(1.1rem, 1.3vw, 1.25rem); font-weight: 600; }
.vcmp .field { min-height: 48px; border-color: #d5d8dc; }
.vcmp select { height: 46px; font-size: 1rem; font-weight: 600; color: var(--ink); text-overflow: ellipsis; }
.vcmp__price { margin-top: 6px; font-size: .92rem; color: var(--graphite); font-variant-numeric: tabular-nums; }
.vcmp__vs { align-self: center; margin-top: 18px; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.vcmp__diff { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.vcmp__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 1rem; font-weight: 600; }
.vcmp__cap b { flex: none; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.vcmp__cap--minor { margin-top: 16px; font-size: .92rem; color: var(--graphite); }
.vcmp__list { list-style: none; margin: 10px 0 0; padding: 0; columns: 2; column-gap: 32px; }
.vcmp__list li { display: flex; gap: 10px; break-inside: avoid; padding: 4px 0; font-size: .95rem; line-height: 1.45; color: var(--graphite); }
.vcmp__list .ico { flex: none; width: 16px; height: 16px; margin-top: .2em; color: var(--ink); stroke-width: 2; }
.vcmp__note { margin-top: 12px; font-size: .88rem; color: var(--graphite); }
.vcmp__acts { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 18px; }
.vcmp__acts .btn { min-height: 48px; gap: 12px; padding: 0 18px; }
@media (max-width: 1199px) and (min-width: 860px) { .vchips { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 859px) {
  .vchips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-left: 0; margin-right: 0; padding: 5px; border-radius: var(--r-lg); }
  .vchips .vchip { min-height: 54px; padding: 6px 2px; font-size: .9rem; }
  .vcmp { padding: 16px; }
  .vcmp__head { grid-template-columns: minmax(0, 1fr); }
  .vcmp__vs { margin: 0; }
  .vcmp__list { columns: 1; }
  .vcmp__acts .btn { flex: 1 1 100%; }
}

.config__now[hidden] { display: none !important; }
@media (max-width: 859px) { .vcmp__vs { display: none; } .vcmp__head { gap: 16px; } }

/* Compare, plain: one marked chip only; "Compare [A] with [B]"; two matching columns of what only each one has */
.vchips .vchip.is-vs { background: transparent; box-shadow: none; color: var(--graphite); }
.vcmp__title { font-size: 1.05rem; font-weight: 600; }
.vcmp__head { margin-top: 14px; align-items: start; }
.vcmp__vs { align-self: start; margin-top: 14px; text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 400; }
.vcmp__gap { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: .98rem; color: var(--graphite); }
.vcmp__gap b { font-weight: 600; color: var(--ink); }
.vcmp__cols { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: clamp(16px, 2vw, 28px); margin-top: 14px; }
.vcmp__cols::before { content: ""; grid-column: 2; grid-row: 1; width: clamp(16px, 2vw, 28px); visibility: hidden; }
.vcmp__cols .vcmp__col:first-child { grid-column: 1; }
.vcmp__cols .vcmp__col:nth-child(2) { grid-column: 3; }
.vcmp__cols .vcmp__note { grid-column: 1 / -1; }
.vcmp__cap { display: block; font-size: .92rem; font-weight: 600; color: var(--ink); }
.vcmp__list { columns: 1; margin-top: 8px; }
.vcmp__none { margin-top: 8px; font-size: .92rem; color: var(--graphite); }
@media (max-width: 859px) {
  .vcmp__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .vcmp__vs { display: none; }
  .vcmp select { font-size: .9rem; padding-right: 30px; }
  .vcmp__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
  .vcmp__cols::before { display: none; }
  .vcmp__cols .vcmp__col:nth-child(2) { grid-column: 2; }
  .vcmp__list li { font-size: .86rem; gap: 6px; }
  .vcmp__list .ico { width: 14px; height: 14px; }
}

/* Compare, final: one choice, its neighbours on the ladder. Name + price on one line, its one-line summary, then two
   columns split by a hairline: what it adds over the one below, what the next one up adds. */
.vcmp__top { display: grid; gap: 4px; }
.vcmp__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-height: 0; }
.vcmp__name b { font-size: clamp(1.15rem, 1.4vw, 1.3rem); font-weight: 600; }
.vcmp__name span { font-size: .98rem; color: var(--graphite); font-variant-numeric: tabular-nums; }
.vcmp__best { font-size: .95rem; line-height: 1.5; color: var(--graphite); }
.vcmp__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 0; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.vcmp__cols::before { content: none; }
.vcmp__cols .vcmp__col:first-child { grid-column: 1; padding-right: clamp(18px, 2.2vw, 32px); }
.vcmp__cols .vcmp__col:nth-child(2) { grid-column: 2; padding-left: clamp(18px, 2.2vw, 32px); border-left: 1px solid var(--rule); }
.vcmp__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .95rem; font-weight: 600; }
.vcmp__cap b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--graphite); }
.vcmp__none { margin-top: 8px; font-size: .92rem; line-height: 1.5; color: var(--graphite); }
.vcmp__go { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 10px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: .95rem; font-weight: 600; color: var(--ink); }
.vcmp__go .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.vcmp__go:hover .ico { transform: translateX(3px); }
.vcmp__acts { margin-top: 16px; }
@media (max-width: 859px) {
  .vcmp__cols { grid-template-columns: minmax(0, 1fr); }
  .vcmp__cols .vcmp__col:first-child { padding-right: 0; }
  .vcmp__cols .vcmp__col:nth-child(2) { grid-column: 1; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
  .vcmp__list li { font-size: .92rem; }
}

/* Up-close film, moving by itself: the bar above the item on screen fills while it is shown */
.tour__list.is-auto li { position: relative; }
.tour__list.is-auto li.is-active { border-top-color: var(--rule); }
.tour__list.is-auto li::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.tour__list.is-auto li.is-active::before { transform: scaleX(1); }
.tour__list.is-auto li.is-run::before { transform: scaleX(0); animation: tour-run var(--run, 5000ms) linear forwards; }
@keyframes tour-run { to { transform: scaleX(1); } }

/* Compare, explicit: "Compare the Seltos A with" + the other versions as options; a plain two-column table below */
.vcmp__ask { font-size: 1.05rem; font-weight: 600; }
.vcmp__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vcmp__opt { min-height: 40px; padding: 0 14px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); cursor: pointer; font: inherit; font-size: .92rem; color: var(--graphite); transition: border-color .2s var(--ease), color .2s var(--ease); }
.vcmp__opt:hover { border-color: #b3b7bc; color: var(--ink); }
.vcmp__opt.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); font-weight: 600; }
.vcmp__table { margin-top: 18px; }
.vcmp__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, 180px) minmax(96px, 180px); align-items: center; gap: 0 12px; min-height: 44px; border-bottom: 1px solid var(--rule); }
.vcmp__row p { font-size: .95rem; line-height: 1.4; color: var(--graphite); padding: 8px 0; }
.vcmp__row p + p { text-align: center; }
.vcmp__row .ico { width: 18px; height: 18px; color: var(--ink); stroke-width: 2; vertical-align: middle; }
.vcmp__no { font-size: 1.05rem; color: #b3b7bc; }
.vcmp__row--head { border-bottom: 1px solid var(--ink); }
.vcmp__row--head p { display: grid; gap: 2px; padding: 4px 0 10px; }
.vcmp__row--head b { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.vcmp__row--head span { font-size: .86rem; font-variant-numeric: tabular-nums; }
.vcmp__sub { margin-top: 14px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.vcmp__none { margin-top: 10px; font-size: .92rem; line-height: 1.5; color: var(--graphite); }
.vcmp__acts { justify-content: space-between; margin-top: 16px; }
.vcmp .stage__link { min-height: 32px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: .92rem; color: var(--graphite); text-decoration: underline; text-underline-offset: 5px; }
.vcmp .stage__link:hover { color: var(--ink); }
@media (max-width: 859px) {
  .vcmp__opts { gap: 6px; }
  .vcmp__opt { min-height: 38px; padding: 0 11px; font-size: .86rem; }
  .vcmp__row { grid-template-columns: minmax(0, 1fr) 72px 72px; gap: 0 8px; }
  .vcmp__row p { font-size: .88rem; }
  .vcmp__row--head b { font-size: .95rem; }
  .vcmp__row--head span { font-size: .76rem; }
  .vcmp__acts .btn { flex: 1 1 100%; }
}

/* Compare, fewer lines (user: too many lines). No panel border, no row rules: a tint panel, rows set apart by space alone */
.vcmp { border: 0; background: var(--tint); }
.vcmp__opt { border-color: transparent; }
.vcmp__opt:hover { border-color: transparent; color: var(--ink); }
.vcmp__row { border-bottom: 0; min-height: 38px; }
.vcmp__row--head { border-bottom: 0; margin-bottom: 2px; }
.vcmp__row:not(.vcmp__row--head):nth-of-type(odd) { background: transparent; }
.vcmp__table { margin-top: 20px; padding: 6px 18px 10px; background: var(--white); border-radius: var(--r); }
@media (max-width: 859px) { .vcmp__table { padding: 4px 12px 8px; } }
.vcmp__row--head span { white-space: nowrap; }
@media (max-width: 859px) { .vcmp__row { grid-template-columns: minmax(0, 1fr) 84px 84px; } .vcmp__row--head span { font-size: .72rem; } }
/* Compare marks, larger and clear: a dark tick for included, a grey cross for not included */
.vcmp__row .ico { width: 22px; height: 22px; stroke-width: 2.2; }
.vcmp__row .ico.vcmp__no { width: 20px; height: 20px; stroke-width: 2; color: #9aa0a6; }

/* Test drive: the time slot row, under the day; the same options as "Where", a label above */
.final__sub { margin-top: 18px; font-size: .86rem; font-weight: 600; color: var(--graphite); }
.final__sub small { margin-left: 8px; font-weight: 400; color: #8b9096; }
.slots.where { margin-top: 8px; }
.slots .tab[disabled] { opacity: .4; cursor: not-allowed; }
.slots .tab[disabled] small { text-decoration: line-through; }

/* Range page, small phones: the comparison could not shrink below its widest car name (31px of sideways scroll at 390px) */
@media (max-width: 1099px) { .compare { grid-template-columns: minmax(0, 1fr); } .compare > * { min-width: 0; } }
.versus__top, .versus__acts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.versus__pick .field, .versus__pick .field select { min-width: 0; max-width: 100%; }
.versus__pick .field select { width: 100%; text-overflow: ellipsis; }
@media (max-width: 859px) { .stage { grid-template-columns: minmax(0, 1fr); } .stage > *, .stage__text { min-width: 0; } .stage__actions .btn { white-space: normal; text-align: center; } }
@media (max-width: 859px) { .versus__acts .btn { min-width: 0; padding: 0 12px; white-space: normal; text-align: center; line-height: 1.25; } }

/* ==========================================================================
   COMPARE EVERY VERSION (client brief): one matrix, all versions as aligned columns. Key differences first; grouped
   rows; differences only by default; extra groups folded; the version that first gains a feature tinted; the buyer's
   version marked. Phones scroll it sideways; version names (top) and row labels (left) stay in place.
   ========================================================================== */
.config__more { margin-top: 12px; }
.config__more .btn { min-height: 46px; gap: 12px; padding: 0 18px; }
.vmx { margin-top: clamp(36px, 4vw, 56px); }
.vmx__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; }
.vmx__title { font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 600; letter-spacing: -.015em; }
html:not(.font-archivo) .vmx__title { font-weight: 700; }
.vmx__sub { margin-top: 6px; font-size: 1rem; color: var(--graphite); }
.vmx__tools { display: flex; align-items: center; gap: 22px; }
.vmx__switch { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: .95rem; color: var(--ink); }
.vmx__switch i { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #c9ccd1; transition: background .2s var(--ease); }
.vmx__switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.vmx__switch.is-on i { background: var(--ink); }
.vmx__switch.is-on i::after { transform: translateX(16px); }
.vmx .stage__link { min-height: 32px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: .92rem; color: var(--graphite); text-decoration: underline; text-underline-offset: 5px; }
.vmx .stage__link:hover { color: var(--ink); }
.vmx__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.vmx__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); cursor: pointer; font: inherit; font-size: .9rem; color: var(--graphite); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.vmx__chip .ico { width: 14px; height: 14px; stroke-width: 2.4; display: none; }
.vmx__chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.vmx__chip.is-on .ico { display: block; }
.vmx__chip:not(.is-on):hover { border-color: #b3b7bc; color: var(--ink); }
.vmx__keys { margin-top: 22px; }
.vmx__cap { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.vmx__keys ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.vmx__keys button { display: grid; gap: 2px; width: 100%; height: 100%; padding: 12px 14px; background: var(--tint); border: 0; border-radius: var(--r); cursor: pointer; font: inherit; text-align: left; transition: background .2s var(--ease); }
.vmx__keys button:hover { background: #e9ebed; }
.vmx__keys b { font-size: .95rem; font-weight: 600; color: var(--ink); }
.vmx__keys span { font-size: .86rem; color: var(--graphite); }
.vmx__keys small { font-size: .8rem; color: var(--graphite); font-variant-numeric: tabular-nums; }
.vmx__scroll { position: relative; margin-top: 22px; max-height: min(78vh, 900px); overflow: auto; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--white); overscroll-behavior-x: contain; }
.vmx__scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.vmx__grid { --label: clamp(150px, 16vw, 250px); display: grid; grid-template-columns: var(--label) repeat(var(--n), minmax(108px, 1fr)); min-width: max-content; }
.vmx__corner, .vmx__head { position: sticky; top: 0; z-index: 3; background: var(--white); border-bottom: 1px solid var(--ink); }
.vmx__corner { left: 0; z-index: 4; display: flex; align-items: flex-end; padding: 14px 16px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.vmx__head { display: grid; justify-items: center; align-content: end; gap: 2px; padding: 14px 8px 12px; text-align: center; }
.vmx__head b { font-size: 1rem; font-weight: 600; }
.vmx__head > span { font-size: .82rem; color: var(--graphite); font-variant-numeric: tabular-nums; }
.vmx__head button { margin-top: 6px; min-height: 30px; padding: 0 10px; background: none; border: 1px solid var(--rule); border-radius: var(--r); cursor: pointer; font: inherit; font-size: .78rem; color: var(--graphite); }
.vmx__head button:hover { border-color: var(--ink); color: var(--ink); }
.vmx__head em { margin-top: 6px; min-height: 30px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--r); background: var(--ink); color: #fff; font-style: normal; font-size: .78rem; }
.vmx__group { grid-column: 1 / -1; display: block; width: 100%; padding: 0; background: var(--tint); border: 0; border-top: 1px solid var(--rule); cursor: pointer; font: inherit; text-align: left; }
.vmx__group > span { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; }
.vmx__group b { font-size: .98rem; font-weight: 600; color: var(--ink); }
.vmx__group small { font-size: .84rem; color: var(--graphite); }
.vmx__group .vrow__sign { margin-left: 6px; }
.vmx__group[aria-expanded="true"] .vrow__sign::after { transform: rotate(90deg); opacity: 0; }
.vmx__label { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; padding: 10px 16px; background: var(--white); font-size: .92rem; line-height: 1.35; color: var(--graphite); box-shadow: 1px 0 0 var(--rule); }
.vmx__cell { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px; text-align: center; font-size: .9rem; color: var(--ink); font-variant-numeric: tabular-nums; transition: background .15s ease; }
.vmx__label, .vmx__cell { border-top: 1px solid #eef0f2; }
.vmx__cell .ico { width: 20px; height: 20px; }
.vmx__yes { color: var(--ink); stroke-width: 2.2; }
.vmx__no { color: #c2c6cb; stroke-width: 1.8; width: 16px !important; height: 16px !important; }
.vmx__part { font-size: .8rem; color: var(--graphite); }
.vmx__muted { font-size: .8rem; color: #9aa0a6; }
.vmx__cell.is-mine { background: #f7f8f9; }
.vmx__head.is-mine { background: #f7f8f9; }
.vmx__cell.is-new { background: #eef3ee; }
.vmx__cell.is-new.is-mine { background: #e6eee6; }
.vmx__cell.is-hover, .vmx__head.is-hover { background: #f1f2f4; }
.vmx__cell.is-new.is-hover { background: #e3ebe3; }
@keyframes vmx-flash { from { background: #fff3c4; } to { background: transparent; } }
.vmx__cell.is-flash, .vmx__label.is-flash { animation: vmx-flash 1.6s ease; }
.vmx__note { margin-top: 12px; }
@media (max-width: 859px) {
  .vmx__tools { width: 100%; justify-content: space-between; }
  .vmx__pick { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .vmx__pick::-webkit-scrollbar { display: none; }
  .vmx__chip { flex: none; }
  .vmx__keys ul { display: flex; overflow-x: auto; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .vmx__keys ul::-webkit-scrollbar { display: none; }
  .vmx__keys li { flex: 0 0 160px; }
  .vmx__scroll { max-height: 72vh; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; }
  .vmx__grid { --label: 124px; grid-template-columns: var(--label) repeat(var(--n), 96px); }
  .vmx__label { padding: 8px 10px; font-size: .82rem; }
  .vmx__cell { min-height: 44px; font-size: .82rem; }
  .vmx__head { padding: 10px 4px; }
  .vmx__head b { font-size: .9rem; }
  .vmx__corner { padding: 10px; }
}
/* Every column fits: no inner scroll, the version names stay pinned under the site header while reading down */
.vmx__scroll.is-fit { max-height: none; overflow: visible; }
.vmx__scroll.is-fit .vmx__corner, .vmx__scroll.is-fit .vmx__head { top: var(--nav-h, 72px); }
.vmx__scroll.is-fit .vmx__grid { min-width: 0; }

/* Compare, on one screen (user: not seamless). Laptops and up: the columns share the width, so there is never an
   inner scrollbar; the table runs with the page, its names pinned under the header. Compact rows and header; the
   name itself is the button that makes a version yours. Phones start with three versions, which fit across. */
@media (min-width: 860px) {
  .vmx__scroll, .vmx__scroll.is-fit { max-height: none; overflow: visible; }
  .vmx__grid { --label: clamp(150px, 14vw, 230px); grid-template-columns: var(--label) repeat(var(--n), minmax(0, 1fr)); min-width: 0; }
  .vmx__corner, .vmx__head { top: var(--nav-h, 72px); }
}
.vmx__head { width: 100%; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; font: inherit; color: inherit; padding: 12px 4px 10px; gap: 1px; }
.vmx__head:hover b { text-decoration: underline; text-underline-offset: 4px; }
.vmx__head b { font-size: clamp(.82rem, .95vw, 1rem); white-space: nowrap; }
.vmx__head > span { font-size: clamp(.72rem, .8vw, .82rem); white-space: nowrap; }
.vmx__head i, .vmx__head em { margin-top: 5px; min-height: 22px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: var(--r); font-style: normal; font-size: .72rem; }
.vmx__head i { color: var(--graphite); border: 1px solid var(--rule); }
.vmx__head:hover i { border-color: var(--ink); color: var(--ink); }
.vmx__head em { background: var(--ink); color: #fff; }
.vmx__cell { min-height: 40px; padding: 6px 4px; font-size: clamp(.76rem, .85vw, .9rem); }
.vmx__label { padding: 6px 14px; font-size: clamp(.8rem, .9vw, .92rem); }
.vmx__group > span { min-height: 42px; }
.vmx__cell .ico { width: 18px; height: 18px; }
@media (max-width: 859px) {
  .vmx__scroll { max-height: none; }
  .vmx__grid { --label: 108px; grid-template-columns: var(--label) repeat(var(--n), minmax(84px, 1fr)); min-width: 0; }
  .vmx__label { padding: 6px 10px; font-size: .8rem; }
  .vmx__cell { font-size: .8rem; }
}

/* Compare, lighter top (user: the top was a screen of its own): small light version toggles on one line; key
   differences as one compact strip, name over "From X", no prices (each column already carries its price) */
.vmx__pick { gap: 6px; margin-top: 16px; }
.vmx__chip { min-height: 32px; padding: 0 11px; gap: 5px; font-size: .84rem; background: transparent; border-color: var(--rule); color: #8b9096; }
.vmx__chip.is-on { background: var(--white); border-color: #b3b7bc; color: var(--ink); }
.vmx__chip .ico { width: 12px; height: 12px; }
.vmx__keys { margin-top: 16px; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.vmx__keys ul { flex: 1 1 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.vmx__keys button { padding: 8px 10px; gap: 1px; }
.vmx__keys b { font-size: .8rem; line-height: 1.25; }
.vmx__keys span { font-size: .76rem; }
.vmx__scroll { margin-top: 16px; }
@media (max-width: 859px) { .vmx__keys { display: block; } .vmx__keys ul { margin-top: 8px; display: flex; } .vmx__keys li { flex: 0 0 128px; } .vmx__chip { flex: none; } }
@media (max-width: 859px) { .vmx__keys ul { margin-left: 0; margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px 0; } }

/* Compare: room between the parts (title, versions, key differences, table) and between rows; no fill on hover */
.vmx__pick { margin-top: 26px; }
.vmx__keys { margin-top: 30px; }
.vmx__scroll { margin-top: 36px; }
.vmx__cell { min-height: 48px; padding: 10px 4px; }
.vmx__label { padding: 10px 16px; }
.vmx__group > span { min-height: 50px; }
.vmx__head { padding: 16px 4px 14px; }
.vmx__cell.is-hover, .vmx__head.is-hover { background: transparent; }
.vmx__cell.is-mine.is-hover, .vmx__head.is-mine.is-hover { background: #f7f8f9; }
.vmx__cell.is-new.is-hover { background: #eef3ee; }
.vmx__cell.is-new.is-mine.is-hover { background: #e6eee6; }
.vmx__keys button:hover { background: var(--tint); }
.vmx__keys button:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 859px) { .vmx__pick { margin-top: 20px; } .vmx__keys { margin-top: 22px; } .vmx__scroll { margin-top: 26px; } .vmx__cell { min-height: 46px; padding: 8px 4px; } .vmx__label { padding: 8px 10px; } }

/* Compare, flexible: a two-way switch (All versions / Choose versions), the versions, one plain line of help.
   No green tint any more: the only shading is the buyer's own column. */
.vmx__pick { display: grid; gap: 12px; }
.vmx__mode { display: inline-flex; justify-self: start; padding: 4px; background: var(--tint); border-radius: var(--r); }
.vmx__mode button { min-height: 38px; padding: 0 18px; background: none; border: 0; border-radius: var(--r); cursor: pointer; font: inherit; font-size: .92rem; color: var(--graphite); }
.vmx__mode button.is-on { background: var(--white); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.vmx__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vmx__chips.is-all .vmx__chip { color: var(--ink); border-color: var(--rule); }
.vmx__hint { font-size: .9rem; color: var(--graphite); }
.vmx__cell.is-new, .vmx__cell.is-new.is-hover { background: transparent; }
.vmx__cell.is-new.is-mine { background: #f7f8f9; }
.vmx__empty { grid-column: 1 / -1; padding: 28px 16px; font-size: .98rem; color: var(--graphite); text-align: center; border-top: 1px solid var(--rule); }
@media (max-width: 859px) {
  .vmx__chips { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; }
  .vmx__chips::-webkit-scrollbar { display: none; }
  .vmx__mode { justify-self: stretch; }
  .vmx__mode button { flex: 1 1 0; }
}

/* Compare marks, easy to scan (user: the cross could not be seen): each mark sits in a small near-square tile;
   included = green tick on soft green, not included = muted red cross on soft rose */
.vmx__cell .ico.vmx__yes, .vmx__cell .ico.vmx__no { box-sizing: border-box; width: 28px !important; height: 28px !important; padding: 6px; border-radius: var(--r); }
.vmx__cell .ico.vmx__yes { background: #e6f2ea; color: #1f7a43; stroke-width: 2.6; }
.vmx__cell .ico.vmx__no { background: #f8ecec; color: #b5524a; stroke-width: 2.4; padding: 7px; }
@media (max-width: 859px) { .vmx__cell .ico.vmx__yes, .vmx__cell .ico.vmx__no { width: 26px !important; height: 26px !important; } }

/* Engine rows: a gearbox icon (manual pattern or A for automatic), the plain name, the detail underneath */
.vmx__eng { display: flex; align-items: center; gap: 12px; }
.vmx__eng .ico { flex: none; width: 22px; height: 22px; color: var(--ink); stroke-width: 1.6; }
.vmx__eng > span { display: grid; gap: 1px; }
.vmx__eng b { font-size: .92rem; font-weight: 600; color: var(--ink); }
.vmx__eng small { font-size: .78rem; color: var(--graphite); }
@media (max-width: 859px) { .vmx__eng { gap: 8px; } .vmx__eng .ico { width: 18px; height: 18px; } .vmx__eng b { font-size: .8rem; } .vmx__eng small { font-size: .7rem; } }

/* Compare: every row label alike (user: two colours and weights read out of sync): one ink colour, one weight, one size; engine rows keep their small detail line */
.vmx__label, .vmx__eng b { color: var(--ink); font-size: clamp(.86rem, .92vw, .95rem); font-weight: 500; line-height: 1.35; }
html:not(.font-archivo) .vmx__label, html:not(.font-archivo) .vmx__eng b { font-weight: 400; }
.vmx__eng small { font-size: .78rem; color: var(--graphite); font-weight: 400; }
@media (max-width: 859px) { .vmx__label, .vmx__eng b { font-size: .82rem; } .vmx__eng small { font-size: .7rem; } }

/* Pinned version names stay solid whatever the pointer does (hover had made them see-through, so ticks showed through while scrolling) */
.vmx__head, .vmx__head.is-hover { background: var(--white); }
.vmx__head.is-mine, .vmx__head.is-mine.is-hover { background: #f7f8f9; }
.vmx__corner, .vmx__head { z-index: 5; }
.vmx__corner { z-index: 6; }

/* Up-close film: the film and its nine details fit one screen together (user). The film gives up height to the room
   left after the header and the details row; it keeps its width and is trimmed top and bottom. */
@media (min-width: 860px) {
  .tour__screen { aspect-ratio: auto; height: min(calc((100vw - 2 * var(--pad)) / 2), calc(100vh - var(--nav-h, 72px) - 150px)); min-height: 300px; max-height: none; }
  @supports (height: 100svh) { .tour__screen { height: min(calc((100vw - 2 * var(--pad)) / 2), calc(100svh - var(--nav-h, 72px) - 150px)); } }
  .tour__list { margin-top: 14px; }
  .tour__stop { min-height: 0; padding-top: 10px; gap: 4px; }
  .tour__stop span { font-size: clamp(.86rem, .95vw, 1rem); line-height: 1.25; }
}
@media (min-width: 860px) { .tour__screen { height: min(calc((100vw - 2 * var(--pad)) / 2), calc(100vh - var(--nav-h, 72px) - 112px)); } @supports (height: 100svh) { .tour__screen { height: min(calc((100vw - 2 * var(--pad)) / 2), calc(100svh - var(--nav-h, 72px) - 112px)); } } }

/* Test drive, step 3: day and time side by side, both dropdowns. Wide: name, phone, day, time in one row;
   narrower: name and phone, then day and time; phones: name, phone, then day and time sharing a row */
@media (min-width: 1200px) { .final__fields { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 860px) and (max-width: 1199px) { .final__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .final__fields .field--select { grid-column: auto; } }
@media (max-width: 859px) { .final__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .final__fields .field:not(.field--select) { grid-column: 1 / -1; } .final__fields .field--select { grid-column: auto; } .final__fields select { text-overflow: ellipsis; } }
@media (min-width: 860px) { .final__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 18px; } .final__fields .field--select { grid-column: auto; } }
@media (min-width: 1760px) { .final__fields { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Step 3: all four fields in one row on laptops and up (user); the phone hint is short so nothing is cut */
@media (min-width: 1100px) { .final__fields { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; } .final__fields select { text-overflow: ellipsis; } }
@media (min-width: 1100px) { .final__fields { align-items: end; } .final__fields .field__label { white-space: nowrap; } }
@media (min-width: 1100px) and (max-width: 1439px) { .final__fields .field__label small { display: none; } }

/* Outside, the markers live in the same 2:1 box the turntable photograph is drawn in, whatever the stage's own shape */
.viewer[data-view="exterior"] .pins { top: 50%; bottom: auto; height: auto; aspect-ratio: var(--ar, 2 / 1); transform: translateY(-50%); }


/* Up close on a model page without a film: Kia's photograph of each detail, one after another */
.tour__reel { position: absolute; inset: 0; }
.tour__reel figure { position: absolute; inset: 0; margin: 0; overflow: hidden; opacity: 0; transition: opacity .7s var(--ease); }
.tour__reel figure.is-on { opacity: 1; }
.tour__reel img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tour__fill { object-fit: cover; filter: blur(28px) brightness(.55); transform: scale(1.15); }
.tour__shot { object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .tour__reel figure { transition: none; } }

/* ==========================================================================
   SELTOS, 26 OCT: key features after the hero; the film straight through; other cars in one row
   ========================================================================== */
.keyf { padding: var(--section) var(--pad) 0; }
.keyf__head { max-width: 820px; }
.keyf__lede { margin-top: 14px; font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.6; color: var(--graphite); max-width: 62ch; }
.keyf__grid { list-style: none; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.keyf__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-content: start; padding: clamp(22px, 2.2vw, 30px) clamp(16px, 2vw, 28px) clamp(22px, 2.2vw, 30px) 0; border-bottom: 1px solid var(--rule); }
.keyf__ico { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); background: var(--tint); color: var(--ink); }
.keyf__ico .ico { width: 21px; height: 21px; }
.keyf__item h3 { font-size: clamp(1.05rem, 1.25vw, 1.2rem); font-weight: 600; line-height: 1.25; }
.keyf__item p { margin-top: 6px; font-size: .95rem; line-height: 1.55; color: var(--graphite); max-width: 40ch; }
@media (max-width: 1099px) { .keyf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 859px) { .keyf { padding-left: var(--gutter); padding-right: var(--gutter); } .keyf__grid { grid-template-columns: minmax(0, 1fr); } .keyf__item { padding-right: 0; } }

.tour__list.is-flow li { position: relative; border-top-color: var(--rule); }
.tour__list.is-flow li::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }

.others__row { margin-top: clamp(24px, 2.6vw, 36px); margin-right: calc(-1 * var(--pad)); overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.others__list--row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 24vw, 330px); grid-template-columns: none; gap: clamp(16px, 1.6vw, 24px); padding-right: var(--pad); }
.others__list--row .ocar { scroll-snap-align: start; }
@media (max-width: 859px) { .others__row { margin-right: calc(-1 * var(--gutter)); } .others__list--row { grid-auto-columns: 78vw; padding-right: var(--gutter); } }
.final__picks[hidden] { display: none !important; }
.cost__plan-cap { margin-top: 22px; font-size: .95rem; font-weight: 600; }
.cost__pane#cost-pane-plan { margin-top: 6px; }

/* The 360 in two columns: the car on the left, never covered and never edge to edge; on the right one panel, as tall
   as the car: the chosen detail's photograph, its name, a line and the versions that have it, then every detail as a
   numbered tile. On a short screen the stage gives up height and the car (2:1 frames) narrows with it, never cropped. */
.viewer .spots { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.viewer .spots .dtl, .viewer .spots .dtl__img img { transition: opacity .16s ease; }
.viewer .spots.is-swapping .dtl, .viewer .spots.is-swapping .dtl__img img { opacity: 0; }
.dpanel__top { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.viewer .dtl__img { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: var(--tint); }
.viewer .dtl__img[hidden] { display: none; }
.viewer .dtl__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.viewer .dtl { min-height: 0; }
.viewer .dtl__count { display: none; }
.viewer .dtl__name { margin: 0; font-size: clamp(1.2rem, 1.45vw, 1.45rem); line-height: 1.2; letter-spacing: -.015em; }
.viewer .dtl__text { margin-top: 6px; font-size: .96rem; line-height: 1.55; max-width: none; color: var(--graphite); }
.viewer .dtl__from { margin-top: 10px; padding: 5px 10px; background: var(--tint); border-radius: var(--r); font-size: .68rem; letter-spacing: .12em; }
.dnav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.drail { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.drail__card { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: var(--white); border: 1px solid #c9ccd1; border-radius: var(--r); font: inherit; font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.drail__card:hover { border-color: var(--ink); }
.drail__card.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.drail__card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dnav__step { display: flex; gap: 8px; flex: none; }
.dnav__step .round { width: 40px; height: 40px; }
@media (min-width: 1100px) {
  .viewer { --stage-h: clamp(340px, calc(100svh - var(--nav-h) - 190px), 580px); display: grid; grid-template-columns: minmax(0, 2.7fr) minmax(300px, 1fr); column-gap: clamp(20px, 2.2vw, 36px); align-items: stretch; }
  .viewer__stage { height: min(var(--stage-h), 48cqw); }
  .viewer__stage .spin, .viewer[data-view="exterior"] .pins { width: min(100%, calc(min(var(--stage-h), 48cqw) * 2)); }
  /* The panel takes the stage's height; its photograph gives way so the words and the tiles always fit */
  .viewer .spots { margin: 0; contain: size; }
  .viewer .dtl__img { flex: 1 1 0; min-height: 110px; aspect-ratio: auto; }
}

/* Up close: the caption is frosted glass, slimmer, so the film shows through and stays visible around it */
@media (min-width: 860px) {
  .tour__card { width: min(262px, 30%); padding: 14px 16px 15px; background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35); border: 1px solid rgba(255, 255, 255, .5); }
  .tour__n { color: #4a4f55; }
  .tour__card h3 { font-size: 1.1rem; }
  .tour__text { margin-top: 4px; font-size: .88rem; line-height: 1.45; color: #2b2f34; }
  .tour__has { margin-top: 8px; color: #2b2f34; }
}

/* Up close: one line for the whole film, under it the nine names; a pause button in the film's lower left corner */
.tour__track { position: relative; height: 18px; margin-top: 14px; cursor: pointer; touch-action: none; }
.tour__track[hidden] { display: none; }
.tour__track::before, .tour__track i { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 2px; }
.tour__track::before { background: var(--rule); }
.tour__track i { background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.tour__track:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.tour__track ~ .tour__list { margin-top: 4px; }
.tour__track ~ .tour__list li, .tour__track ~ .tour__list li.is-active { border-top: 0; }
.tour__track ~ .tour__list li::before { display: none; }
.tour__toggle { position: absolute; left: clamp(12px, 1.4vw, 20px); bottom: clamp(12px, 1.4vw, 20px); z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); color: var(--ink); cursor: pointer; transition: background .2s var(--ease); }
.tour__toggle[hidden] { display: none; }
.tour__toggle:hover { background: rgba(255, 255, 255, .85); }
.tour__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tour__toggle .ico { width: 18px; height: 18px; }
.tour__play { fill: currentColor; stroke: none; display: none; }
.tour__pause { stroke-width: 2.4; }
.tour__toggle.is-paused .tour__play { display: block; }
.tour__toggle.is-paused .tour__pause { display: none; }

/* 01 · Key features: two columns on laptops and up, the heading and its line on the left, the four best features
   two by two on the right */
@media (min-width: 1100px) {
  .keyf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; }
  .keyf__head { max-width: none; position: sticky; top: calc(var(--nav-h) + 24px); }
  .keyf__grid { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keyf__item { padding-right: clamp(12px, 1.6vw, 24px); }
}