/* ============================================================
   CORSA MOTORS — внутренние страницы: шапка страницы, инвентарь,
   карточка машины (VDP), инструменты, FAQ, контакты, сервисные.
   ============================================================ */

/* ---------- шапка страницы ---------- */
.page-head { padding: clamp(36px, 5vw, 64px) 0 clamp(10px, 2vw, 18px); }
.ph-kicker {
  font-family: var(--display); font-stretch: 110%; font-weight: 750;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); margin: 0 0 12px;
}
.page-head h1 {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  margin-bottom: 12px;
}
.ph-lede { font-size: clamp(17px, 1.5vw, 19.5px); color: var(--ink-soft); max-width: 46em; margin: 0; }

/* ---------- общие секции ---------- */
main > section { padding-bottom: var(--section); }
main > section.page-head { padding-bottom: 0; }

/* двухколоночный каркас: контент + сайдбар */
.vdp-cols {
  display: grid; gap: clamp(30px, 4vw, 56px);
  grid-template-columns: 1fr; align-items: start;
  padding-top: clamp(26px, 3.4vw, 44px);
}
/* длинное значение спеки (VIN) распирает колонку и весь мобильный экран */
.vdp-cols > * { min-width: 0; }
.spec b { overflow-wrap: anywhere; }
@media (min-width: 960px) { .vdp-cols { grid-template-columns: 7fr 5fr; } }
.vdp-aside { display: grid; gap: 22px; }

/* карточка-инструмент */
.tool-card {
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 2px 10px rgba(20, 23, 27, .07);
  padding: clamp(20px, 2.6vw, 28px);
}
.tool-card h3 { margin-bottom: 12px; }
.tool-card .btn { width: 100%; margin-top: 14px; }
.tool-card .fine { font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; }

/* ползунки в инструментах */
.tool-card input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 3px;
  background: #DDD9CE; outline: none; cursor: pointer;
  margin: 8px 0 16px;
}
.tool-card input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--red); border: none;
  box-shadow: 0 3px 10px rgba(200, 16, 46, .35); cursor: grab;
}
.tool-card input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--red); border: none;
  box-shadow: 0 3px 10px rgba(200, 16, 46, .35); cursor: grab;
}
.pc-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 15.5px; color: var(--ink-soft); }
.pc-row b {
  font-family: var(--display); font-stretch: 114%; font-weight: 800;
  font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.pc-out { font-size: 16px; color: var(--ink-soft); margin-top: 6px; }
.pc-out b {
  font-family: var(--display); font-stretch: 116%; font-weight: 820;
  font-size: 30px; color: var(--red); font-variant-numeric: tabular-nums;
}
.pc-out.big b { font-size: clamp(34px, 3.4vw, 44px); }

/* строка ZIP-запроса в карточке-инструменте (VDP) */
.zip-row { display: flex; gap: 10px; }
.zip-row input {
  font: inherit; font-size: 16.5px; color: var(--ink);
  /* width:100px гасит браузерный дефолт «20 символов», который
     распирал грид-колонку сайдбара на мобиле */
  flex: 1 1 100px; width: 100px; min-width: 0; min-height: 50px; padding: 8px 14px;
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--r-btn);
}
.zip-row input:focus { outline: none; border-color: var(--ink); background: #fff; }
.zip-row .btn { flex: none; margin-top: 0; width: auto; }

/* мини-шаги */
.mini-steps { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; counter-reset: ms; }
.mini-steps li { counter-increment: ms; display: flex; gap: 11px; align-items: baseline; font-size: 16.5px; }
.mini-steps li::before {
  content: counter(ms);
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 13.5px;
  transform: translateY(4px);
}

/* ---------- ИНВЕНТАРЬ ---------- */
.inv .wrap { padding-top: 26px; }

/* плитки-декады: главный фильтр для человека, который ищет машину юности */
.dec-tabs {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 16px;
}
.dec-tab {
  font: inherit; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: #fff; color: var(--ink);
  border: 2px solid transparent; border-radius: var(--r-card);
  box-shadow: 0 2px 10px rgba(20, 23, 27, .07);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.dec-tab:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--line); }
.dt-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dt-era {
  font-family: var(--display); font-stretch: 114%; font-weight: 800;
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.1;
  white-space: nowrap;
}
.dt-sub { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.dt-n {
  flex: none;
  min-width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-tint);
  font-family: var(--display); font-stretch: 114%; font-weight: 820;
  font-size: 16px; color: var(--red);
  padding: 0 6px;
}
.dec-tab.is-on {
  background: var(--deep); color: #fff; border-color: var(--deep);
}
.dec-tab.is-on .dt-sub { color: #9AA1A9; }
.dec-tab.is-on .dt-n { background: var(--red); color: #fff; }
/* плитка без машин под текущими фильтрами гаснет, но остаётся кликабельной */
.dec-tab.is-none { opacity: .45; }
.dt-n { margin-left: auto; }
@media (max-width: 1240px) { .dt-sub { display: none; } }
/* на узких экранах — сетка 2x2: все четыре декады видны сразу, ничего листать не надо */
@media (max-width: 900px) {
  .dec-tabs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dt-the { display: none; }
  .dec-tab { padding: 10px; gap: 6px; min-width: 0; }
  .dt-era { font-size: 15px; }
  .dt-n { min-width: 28px; height: 28px; font-size: 14px; }
}
@media (max-width: 380px) {
  .dt-dec { display: none; }
  .dt-era { font-size: 13.5px; }
  .dec-tab { padding: 9px 10px; gap: 6px; }
  .dt-n { min-width: 24px; height: 24px; font-size: 13px; }
}


/* полосы-вставки внутри сетки. Не generic-плашки, а фирменный язык:
   доставка = квитанция FROM->TO с пунктиром-дорогой (как на главной),
   финансы = красная плитка с крупными фактами (как money-tile главной) */
.inv-band { grid-column: 1 / -1; border-radius: var(--r-card); }

/* --- доставка: белая квитанция --- */
.band-ship {
  background: #fff; box-shadow: 0 2px 10px rgba(20, 23, 27, .07);
  padding: clamp(16px, 2vw, 20px) clamp(16px, 2.4vw, 24px);
}
.bs-row { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; }
.bs-road {
  flex: 1 1 120px; align-self: center; position: relative;
  height: 22px; min-width: 60px;
}
.bs-road::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 2px dashed var(--red); opacity: .55;
}
/* иконка красится через background+mask, поэтому белая подложка — отдельным слоем */
.bs-road i {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: #fff; padding: 0 8px; line-height: 0; font-style: normal;
}
.bs-road .ic { width: 22px; height: 22px; background: var(--red); vertical-align: middle; }
.bs-form { display: flex; gap: 12px; flex: none; }
.band-ship .btn { min-height: 58px; }
.bs-out { margin: 12px 0 0; font-size: 16.5px; color: var(--ink-soft); }
.bs-out b { color: var(--ink); }
.bs-out .bs-price {
  font-family: var(--display); font-stretch: 116%; font-weight: 820;
  font-size: 22px; color: var(--red); margin-right: 4px;
}
.bs-out a { color: var(--ink); font-weight: 700; text-decoration-color: var(--red); text-underline-offset: 3px; }
.bs-out a:hover { color: var(--red); }
.bs-out .bs-err { color: var(--red); }
@media (max-width: 640px) {
  .band-ship { padding: 14px; }
  /* FROM и TO бок о бок, кнопка на всю ширину: форма раскрывается в сетку */
  .bs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .bs-road { display: none; }
  .bs-form { display: contents; }
  .band-ship .qc-from { padding: 6px 12px; min-width: 0; }
  .band-ship .qc-fixed { font-size: 15px; white-space: normal; }
  .bs-form .qc-to { width: auto; min-width: 0; }
  .bs-form .qc-to input { min-height: 52px; padding: 20px 12px 6px; }
  .band-ship .btn { grid-column: 1 / -1; min-height: 50px; }
  .bs-out { font-size: 15.5px; }
  .bs-out .bs-price { font-size: 20px; }
}

/* --- финансы: красная плитка --- */
.band-fin {
  background: var(--red); color: #fff;
  display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); flex-wrap: wrap;
  padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.6vw, 28px);
}
.bf-facts { display: flex; gap: clamp(18px, 2.6vw, 34px); flex: none; }
.bf-fact { display: grid; gap: 2px; }
.bf-fact b {
  font-family: var(--display); font-stretch: 116%; font-weight: 820;
  font-size: clamp(24px, 2.4vw, 30px); line-height: 1; color: #fff;
}
.bf-fact span { font-size: 13.5px; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.bf-line { flex: 1 1 220px; margin: 0; font-size: 16.5px; color: rgba(255, 255, 255, .92); min-width: 0; }
.band-fin .btn-light { flex: none; color: var(--ink); }
@media (max-width: 640px) {
  .band-fin { padding: 16px; gap: 12px; }
  .bf-facts { gap: 22px; }
  .bf-fact b { font-size: 23px; }
  .bf-fact span { font-size: 12.5px; }
  .bf-line { font-size: 15.5px; flex-basis: 100%; }
  .band-fin .btn-light { width: 100%; }
}

/* строка счётчика + сброс */
.inv-countbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-top: 20px; flex-wrap: wrap;
}
.inv-countbar .inv-count { margin: 0; }
.inv-reset {
  font: inherit; font-size: 14.5px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; cursor: pointer;
  color: var(--ink); background: none;
  border: 2px solid var(--line); border-radius: 999px;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.inv-reset:hover { border-color: var(--red); color: var(--red); }
.inv-reset .ic { width: 13px; height: 13px; }
.inv-empty-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* финал: розыск машины под заказ */
.inv-locator { background: var(--paper-tint); padding-top: clamp(36px, 4.4vw, 56px); }
main > section.inv-locator { padding-bottom: clamp(48px, 6vw, 72px); }
.inv-locator .ask-card { margin: 0 auto; }

.inv-tools {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
  align-items: end;
  padding: 18px; background: #fff;
  border-radius: var(--r-card);
  box-shadow: 0 2px 10px rgba(20, 23, 27, .07);
}
@media (min-width: 920px) { .inv-tools { grid-template-columns: 1.2fr 2fr; } }
.inv-search { position: relative; }
.inv-search .ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--ink-soft); pointer-events: none; }
.inv-search input {
  font: inherit; font-size: 16.5px; color: var(--ink);
  width: 100%; min-height: 52px; padding: 10px 14px 10px 46px;
  background: var(--paper); border: 2px solid var(--line); border-radius: 999px;
}
.inv-search input:focus { outline: none; border-color: var(--ink); background: #fff; }
.inv-filters { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
  /* на телефоне панель не должна съедать экран: два селекта парой,
     сортировка живёт в строке счётчика (перенос делает inventory.js),
     длинная часть лида и ценовой диапазон скрыты */
  .ph-more { display: none; }
  .inv .wrap { padding-top: 14px; }
  .inv-filters { grid-template-columns: 1fr 1fr; gap: 8px; }
  .inv-tools { padding: 10px; gap: 8px; }
  .inv-search input { min-height: 44px; font-size: 16px; }
  .inv-search .ic { left: 13px; width: 17px; height: 17px; }
  .inv-f { gap: 3px; }
  .inv-f span { font-size: 10px; }
  .inv-f select { min-height: 42px; font-size: 16px; padding: 5px 8px; }
  .cnt-x { display: none; }
  /* сортировка-пилюля в строке счётчика */
  .inv-countbar { margin-top: 14px; align-items: center; }
  .inv-countbar .inv-f { display: block; }
  .inv-countbar .inv-f > span { display: none; }
  .inv-countbar .inv-f select {
    /* не меньше 16px: поле мельче заставляет iPhone зумить страницу,
       и открытый список уезжает в сторону */
    min-height: 38px; font-size: 16px; font-weight: 700;
    border: 2px solid var(--line); border-radius: 999px;
    padding: 3px 8px; background: transparent; color: var(--ink);
  }
  .inv-delivery { padding: 12px 14px; font-size: 15px; gap: 10px; flex-wrap: nowrap; align-items: flex-start; }
  .inv-delivery .ic { margin-top: 2px; }
}
.inv-f { display: grid; gap: 5px; }
.inv-f span {
  font-family: var(--display); font-stretch: 110%; font-weight: 750;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.inv-f select {
  font: inherit; font-size: 16px; color: var(--ink);
  min-height: 48px; padding: 8px 12px;
  background: #fff; border: 2px solid var(--line); border-radius: var(--r-btn);
}
.inv-f select:focus { outline: none; border-color: var(--ink); }

.inv-delivery {
  margin-top: 18px; padding: 14px 18px;
  background: var(--deep); color: #C9CED4;
  border-radius: var(--r-card);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 16px;
}
.inv-delivery b { color: #fff; }
.inv-delivery .ic { width: 20px; height: 20px; color: #FF5A70; flex: none; }
.inv-count { margin: 20px 0 0; font-size: 15.5px; color: var(--ink-soft); }
.inv .car-grid { margin-top: 14px; }
.inv-empty {
  text-align: center; padding: 48px 20px;
  background: #fff; border-radius: var(--r-card); margin-top: 14px;
}
.inv-empty p { max-width: 34em; margin: 0 auto 18px; color: var(--ink-soft); }

/* ---------- VDP ----------
   ТИПОГРАФИЧЕСКАЯ ШКАЛА (аудит 04.09.2026: было 25 кеглей / 81 стиль).
   Шесть ступеней, три веса, четыре цвета текста. Ничего мельче 13px:
   покупателю 55-70 микрокегли не читаются, даже когда контраст в норме.
     KICKER 13 caps  — метки, надзаголовки
     SMALL  14       — подписи под числами, юр. мелочь
     BODY   17       — весь основной текст и списки
     LEAD   19       — подводки и вводные абзацы
     H3     20       — подзаголовки внутри секций
     H2     28       — заголовки секций
   Крупные числа берут ступени, а не заводят новые. */
.vdp {
  --f-kicker: 13px; --f-small: 14px; --f-body: 17px;
  --f-lead: 19px; --f-h3: 20px; --f-h2: 28px;
  --c-ink: #14171B; --c-2nd: #4A5058; --c-mute: #6E757D;
}
.vdp .sec-kicker, .vdp .ac-tag, .vdp .ct-cap, .vdp .prc-cap,
.vdp .ac-picks legend, .vdp .vp-head, .vdp .vp-row span, .vdp .vx-match {
  font-size: var(--f-kicker); letter-spacing: .12em;
}
.vdp .fine, .vdp .ship-facts span, .vdp .vf-s, .vdp .rq-meta,
.vdp .dr-total .dt-sub, .vdp .credit-tile .dc-step small, .vdp .pr-note {
  font-size: var(--f-small); line-height: 1.45;
}
.vdp .ns-copy, .vdp .vx-chap li, .vdp .vx-row, .vdp .faq-a p,
.vdp .ac-picks .pick, .vdp .ns-quote div, .vdp .how-intro p, .vdp .tl p {
  font-size: var(--f-body);
}
.vdp .sec-sub, .vdp .vx-lede, .vdp .vx-here-copy { font-size: var(--f-lead); line-height: 1.5; color: var(--c-2nd); }
.vdp .vx-chap h3, .vdp .tl h3, .vdp .vx-faq summary, .vdp .vf-t, .vdp .vx-here h2 {
  font-size: var(--f-h3); line-height: 1.25; font-stretch: 100%;
}
.vdp .sec-head h2 { font-size: var(--f-h2); line-height: 1.15; font-stretch: 100%; }

/* ---------- VDP: карточка машины, сборка v3 ----------
   Фото — герой во всю ширину, дальше страница говорит на языке принятых
   страниц сайта: sec-head, ленты цифр, красная плитка, квитанция,
   таймлайн. Ритм фонов: paper / tint чередованием, тёмное — только
   шапка, плашка и футер. */

/* --- верх: титул во всю ширину, галерея слева, панель продажи справа.
   Канон 19 из 20 разобранных дилеров (Vanguard, RK, Gateway, Streetside,
   Skyway...): большой кадр + миниатюры, рядом липкая панель с ценой. --- */
.vx-top .wrap { padding-top: clamp(16px, 2.4vw, 30px); }
.vdp section.vx-top { padding-bottom: 0; }
.vx-title { margin-bottom: 16px; }
.vx-title h1 { display: block; margin: 0; line-height: 1.06; }
.vh-year {
  color: var(--ink); font-stretch: 118%; font-weight: 700;
  font-size: var(--f-h2); letter-spacing: .01em;
}
.vh-make {
  color: var(--c-mute); font-stretch: 110%; font-weight: 700;
  font-size: var(--f-h2); letter-spacing: .02em;
}
.vh-model {
  display: block; margin-top: 2px; color: var(--ink);
  font-stretch: 118%; font-weight: 700;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem); line-height: 1.03;
}

/* numbers-matching — короткий красный ярлык под титулом, только по данным */
.vx-match {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 12px 0 0; font-family: var(--display); font-stretch: 112%; font-weight: 700;
  font-size: var(--f-kicker); letter-spacing: .14em; text-transform: uppercase; color: var(--red);
}
.vx-match .ic { width: 14px; height: 14px; }

.vx-lead-grid { display: grid; gap: clamp(18px, 2.6vw, 40px); grid-template-columns: minmax(0, 1fr); align-items: start; }
/* дети через display:contents наследуют колонку грида — без minmax(0)
   широкое фото распирает её на узких экранах */
.vx-lead-grid > *, .vx-media > *, .vx-deal > * { min-width: 0; }
@media (min-width: 940px) {
  .vx-lead-grid { grid-template-columns: 8fr 4fr; }
  .vx-deal { position: sticky; top: 92px; }
}

/* галерея */
.vx-stage { position: relative; margin: 0; background: var(--paper-tint); border-radius: var(--r-card); overflow: hidden; }
.vx-stage img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; cursor: zoom-in;
}
.vx-count {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(10, 11, 13, .62); color: #fff;
  padding: 8px 13px; border-radius: 999px;
  font-size: var(--f-small); font-weight: 700; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.vx-open {
  position: absolute; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  border: none; cursor: pointer; border-radius: 999px;
  background: rgba(10, 11, 13, .62); color: #fff;
  padding: 9px 16px; font-size: var(--f-small); font-weight: 700; font-family: var(--body);
  transition: background .18s var(--ease);
}
.vx-open:hover { background: var(--red); }
.vx-open .ic { width: 15px; height: 15px; }
.g-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(10, 11, 13, .5); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s var(--ease);
}
.g-prev { left: 12px; } .g-prev .ic { transform: rotate(180deg); }
.g-next { right: 12px; }
.g-nav:hover { background: var(--red); }
.g-nav .ic { width: 18px; height: 18px; }
.vx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
@media (min-width: 940px) { .vx-grid { grid-template-columns: repeat(6, 1fr); } }
.vx-th {
  padding: 0; border: none; cursor: pointer; border-radius: 8px; overflow: hidden;
  background: var(--paper-tint); position: relative;
}
.vx-th img {
  display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; transition: transform .3s var(--ease);
}
.vx-th:hover img { transform: scale(1.05); }
/* последняя плитка — вход в полный набор: «+12» поверх кадра */
.vx-th-more span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 11, 13, .58); color: #fff;
  font-family: var(--display); font-stretch: 116%; font-weight: 700;
  font-size: var(--f-h3); letter-spacing: .02em;
}
.vx-th-more:hover span { background: rgba(200, 16, 46, .72); }

/* панель продажи */
.vx-deal {
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 2px 12px rgba(20, 23, 27, .08);
  padding: clamp(22px, 2.6vw, 34px);
}
.vx-price { margin-bottom: 20px; }
.vx-price { margin: 0 0 16px; }
/* заводская табличка — data plate, как выбитая пластина под капотом:
   шлифованный алюминий, заклёпки по углам, гравированные значения */
.vx-plate {
  position: relative; margin: 0 0 16px;
  padding: 15px 16px 13px;
  border-radius: 10px;
  border: 1px solid #AEB2B6;
  background:
    radial-gradient(circle 5px at 13px 13px, #9DA2A7 0 3px, #EDEFF1 3.5px 5px, transparent 5px),
    radial-gradient(circle 5px at calc(100% - 13px) 13px, #9DA2A7 0 3px, #EDEFF1 3.5px 5px, transparent 5px),
    radial-gradient(circle 5px at 13px calc(100% - 13px), #9DA2A7 0 3px, #EDEFF1 3.5px 5px, transparent 5px),
    radial-gradient(circle 5px at calc(100% - 13px) calc(100% - 13px), #9DA2A7 0 3px, #EDEFF1 3.5px 5px, transparent 5px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px 3px),
    linear-gradient(165deg, #E6E8EA 0%, #D2D5D8 46%, #DFE1E3 74%, #CDD0D3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 2px 8px rgba(20, 23, 27, .14);
}
.vp-head {
  display: flex; justify-content: space-between; gap: 12px;
  margin: 0 4px 10px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(20, 23, 27, .22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  font-family: var(--display); font-stretch: 112%; font-weight: 700;
  font-size: var(--f-kicker); letter-spacing: .18em; text-transform: uppercase;
  color: #4A4F55; text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.vp-rows { display: grid; margin: 0 4px; }
.vp-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8.5px 0;
}
.vp-row + .vp-row { border-top: 1px solid rgba(20, 23, 27, .13); box-shadow: 0 -1px 0 rgba(255, 255, 255, .5); }
.vp-row span {
  font-family: var(--display); font-stretch: 110%; font-weight: 700;
  font-size: var(--f-kicker); letter-spacing: .12em; text-transform: uppercase;
  color: #565C63; text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.vp-row b {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; font-variant-numeric: tabular-nums;
  font-size: var(--f-body); font-weight: 700; color: #101317;
  text-align: right; overflow-wrap: anywhere;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.vx-plate .vx-match {
  margin: 10px 4px 2px; padding-top: 9px;
  border-top: 1px solid rgba(20, 23, 27, .13); box-shadow: 0 -1px 0 rgba(255, 255, 255, .5);
  display: block; text-align: center;
  font-family: var(--display); font-stretch: 114%; font-weight: 700;
  font-size: var(--f-kicker); letter-spacing: .16em; text-transform: uppercase;
  color: var(--red); text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

/* цена — принятая строка прейскуранта */
.prc-cap {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 2px; font-family: var(--display); font-stretch: 110%; font-weight: 700;
  font-size: var(--f-kicker); letter-spacing: .16em; text-transform: uppercase; color: var(--c-2nd);
}
.prc-cap::after { content: ""; flex: none; width: 26px; height: 2px; background: var(--red); }
/* бирка-ценник, как на зеркале машины в зале: срезанный носик, люверс,
   цена и месячный платёж. Фирменный ценник витрины — в полный рост. */
.vx-price {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 4.4vw, 24px);
  background: #fff;
  clip-path: polygon(0 50%, 26px 0, 100% 0, 100% 100%, 26px 100%);
  filter: drop-shadow(0 3px 10px rgba(20, 23, 27, .14));
  padding: 21px clamp(14px, 3vw, 24px) 21px 50px;
}
.vx-price::before {
  /* люверс: колечко, сквозь которое бирка висит на шнурке */
  content: ""; position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--paper); border: 3.5px solid #C9C3B2;
  box-shadow: inset 0 1px 2px rgba(20, 23, 27, .25);
}
.pr-div { flex: none; width: 2px; align-self: stretch; background: #C9C3B2; }
.vx-price .prc-price { flex: 1; text-align: center; }
.vx-price .prc-mo-big { flex: 1; text-align: center; }
.prc-price {
  display: block; white-space: nowrap;
  font-family: var(--display); font-stretch: 118%; font-weight: 700;
  font-size: clamp(29px, 8vw, 42px); line-height: 1; color: var(--ink);
  letter-spacing: -0.01em;
}
.prc-mo-big {
  display: block; white-space: nowrap;
  font-family: var(--display); font-stretch: 116%; font-weight: 700;
  font-size: var(--f-h2); line-height: 1; color: var(--red);
}
.prc-mo-big small { font-size: var(--f-small); font-weight: 700; color: var(--red); }
@media (min-width: 940px) {
  .prc-price { font-size: clamp(30px, 2.4vw, 38px); }
  .prc-mo-big { font-size: var(--f-h3); }
}

.vx-cta { display: grid; gap: 10px; margin: 0 0 16px; }
.cta-big { min-height: 58px; font-size: var(--f-body); white-space: normal; line-height: 1.25; }
.vx-cta .btn .ic { width: 17px; height: 17px; }


/* --- статья --- */
.vx-story { background: var(--paper-tint); }
.vx-story .wrap { padding-top: clamp(44px, 5.4vw, 72px); }
.vdp section.vx-story { padding-bottom: 0; }
.vx-story .sec-head { margin-bottom: 28px; }
/* лист описания от продавца: белая карточка на тинте, главы с фирменной
   точкой, пункты со строгими красными чёрточками вместо кружков */
.vx-article {
  max-width: 760px; margin: 0 auto;
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 2px 12px rgba(20, 23, 27, .08);
  padding: clamp(22px, 3.4vw, 44px) clamp(20px, 4vw, 52px);
}
.vx-chap { margin: 0 0 26px; }
.vx-chap:last-of-type { margin-bottom: 0; }
.vx-chap h3 {
  font-size: var(--f-h3); margin: 0 0 13px;
  font-stretch: 112%; font-weight: 700; color: var(--ink);
}
.vx-chap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vx-chap li {
  position: relative; padding-left: 22px;
  font-size: var(--f-body); line-height: 1.6; color: var(--c-2nd);
}
.vx-chap li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 11px; height: 2.5px; background: var(--red); border-radius: 1px;
}
.vx-close {
  margin: 0 0 14px; font-size: var(--f-body); line-height: 1.72; color: var(--c-2nd);
}
.vx-close:first-of-type { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.vx-close:last-of-type { margin-bottom: 0; }
.linklike {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px;
}
.linklike:hover { color: var(--red); }
/* видео по запросу: кино-карточка — тёмный зал, крупный кадр, Play */
.vx-film {
  margin: 28px 0 0; padding: 14px 14px 18px;
  background: var(--deep); border-radius: 14px;
  display: grid; gap: 14px;
}
.vf-frame {
  position: relative; padding: 0; border: none; cursor: pointer;
  width: 100%; border-radius: 9px; overflow: hidden;
}
.vf-frame img { display: block; width: 100%; height: clamp(150px, 40vw, 190px); object-fit: cover; }
.vf-frame::after { content: ""; position: absolute; inset: 0; background: rgba(10, 11, 13, .3); }
.vf-play {
  position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; background: var(--red);
  box-shadow: 0 4px 16px rgba(10, 11, 13, .5);
  transition: transform .18s var(--ease);
}
.vf-play::after {
  content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
}
.vf-frame:hover .vf-play { transform: translate(-50%, -50%) scale(1.08); }
.vf-copy { min-width: 0; padding: 0 6px; }
.vf-t {
  margin: 0 0 6px; font-family: var(--display); font-stretch: 114%; font-weight: 700;
  font-size: var(--f-lead); color: #fff;
}
.vf-s { margin: 0; font-size: var(--f-small); line-height: 1.6; color: #A7AEB6; }
.vf-btn { width: 100%; }
.vf-btn .ic { width: 16px; height: 16px; }
@media (min-width: 760px) {
  .vx-film { grid-template-columns: 260px 1fr; align-items: center; padding: 16px; }
  .vf-frame img { height: 150px; }
  .vf-copy { padding: 0 4px; }
  .vf-btn { grid-column: 2; width: auto; justify-self: start; }
}
/* --- цифры: квитанция доставки + красная плитка --- */
.vx-numbers .wrap { padding-top: clamp(44px, 5.4vw, 72px); }
.vdp section.vx-numbers { padding-bottom: 0; }
.vx-numbers .sec-head { margin-bottom: 30px; }
.num-grid { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .num-grid { grid-template-columns: 1fr 1fr; } }
.num-card {
  position: relative;
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 2px 12px rgba(20, 23, 27, .08);
  padding: clamp(22px, 2.6vw, 30px);
}
.num-card .ac-tag { margin-bottom: 16px; }
.ship-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.ship-facts b {
  display: block; font-family: var(--display); font-stretch: 116%; font-weight: 700;
  font-size: var(--f-h2); color: var(--ink); line-height: 1;
}
.ship-facts span { display: block; margin-top: 4px; font-size: var(--f-kicker); color: var(--c-2nd); }
.ns-copy { margin: 16px 0; font-size: var(--f-small); line-height: 1.6; color: var(--c-2nd); }
.dr-zip { display: flex; gap: 8px; margin-bottom: 14px; }
.dr-zip input {
  flex: 1; min-width: 0; width: 100%;
  border: 2px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font: inherit; font-size: var(--f-body); background: #fff; color: var(--ink);
}
.dr-zip input:focus { outline: none; border-color: var(--ink); }
.dr-zip .btn { flex: none; min-height: 50px; width: auto; }
.ns-quote { display: none; }
.ns-quote.show {
  display: block; margin: 0 0 14px; padding: 14px 16px;
  border: 1.5px dashed #CFC9BB; border-radius: 10px; background: var(--paper-tint);
}
.ns-quote .qo-err { font-size: var(--f-small); color: var(--ink); }
.ns-quote a { color: var(--ink); font-weight: 700; text-decoration-color: var(--red); text-underline-offset: 3px; }
/* мини-квитанция: маршрут, цена, мелочи */
.rq-route {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-stretch: 112%; font-weight: 700;
  font-size: var(--f-small); color: var(--ink);
}
.rq-route i { flex: 1; border-bottom: 2px dashed #C9C3B2; position: relative; top: 1px; }
.rq-route .ic { flex: none; width: 17px; height: 17px; color: var(--red); }
.rq-price {
  margin: 8px 0 2px;
  font-family: var(--display); font-stretch: 118%; font-weight: 700;
  font-size: var(--f-h2); line-height: 1; color: var(--red);
}
.rq-price small { font-size: var(--f-small); font-weight: 700; color: var(--c-2nd); margin-left: 6px; }
.rq-meta { font-size: var(--f-small); line-height: 1.55; color: var(--c-2nd); }
.dr-total {
  margin: 0 0 14px; padding: 14px 18px 15px; border-radius: 10px;
  background: var(--deep); display: grid; gap: 3px;
}
.dr-total .dt-cap {
  font-family: var(--display); font-stretch: 110%; font-weight: 700;
  font-size: var(--f-kicker); letter-spacing: .16em; text-transform: uppercase; color: #FF5A70;
}
.dr-total b {
  font-family: var(--display); font-stretch: 118%; font-weight: 700;
  font-size: var(--f-h2); line-height: 1.05; color: #fff;
}
.dr-total .dt-sub { font-size: var(--f-small); line-height: 1.5; color: #A7AEB6; }
.ns-ctas { display: grid; gap: 10px; margin: 0 0 14px; }
.ns-ctas .btn .ic { width: 16px; height: 16px; }
.num-card .fine { margin: 4px 0 0; font-size: var(--f-small); color: var(--c-2nd); }
.quiet-link { color: var(--ink); font-weight: 700; text-decoration-color: var(--red); text-underline-offset: 3px; }
.quiet-link:hover { color: var(--red); }

.credit-tile {
  background: var(--red); color: #fff; border-radius: var(--r-card);
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: 0 10px 30px rgba(200, 16, 46, .22);
}
.ct-cap {
  margin: 0 0 14px; font-family: var(--display); font-stretch: 110%; font-weight: 700;
  font-size: var(--f-kicker); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .8);
}
.credit-tile .num-out { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; }
.credit-tile .dc-mo {
  font-family: var(--display); font-stretch: 118%; font-weight: 700;
  font-size: clamp(36px, 3.4vw, 46px); color: #fff; line-height: 1;
}
.credit-tile .dc-note { font-size: var(--f-small); color: rgba(255, 255, 255, .82); }
.credit-tile .pc-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--f-small); color: rgba(255, 255, 255, .85); margin-bottom: 6px;
}
.credit-tile .pc-row b { color: #fff; font-size: var(--f-body); }
.credit-tile input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 30px;
  background: transparent; cursor: pointer; margin-bottom: 10px;
}
.credit-tile input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.credit-tile input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.credit-tile input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: none; margin-top: -10px;
  box-shadow: 0 3px 10px rgba(10, 11, 13, .35); cursor: grab;
}
.credit-tile input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: #fff; border: none;
  box-shadow: 0 3px 10px rgba(10, 11, 13, .35); cursor: grab;
}
.credit-tile input[type="range"]:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 4px; }
.ct-term {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 8px; font-size: var(--f-small); color: rgba(255, 255, 255, .85);
}
.ct-term b { color: #fff; font-size: var(--f-body); }
.credit-tile .dc-ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 0 0 16px; }
.credit-tile .dc-step {
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 10px; cursor: pointer;
  background: transparent; padding: 8px 4px 9px; display: grid; gap: 2px; text-align: center;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.credit-tile .dc-step small { font-size: var(--f-kicker); color: rgba(255, 255, 255, .78); letter-spacing: .04em; }
.credit-tile .dc-step b {
  font-family: var(--display); font-stretch: 112%; font-weight: 700;
  font-size: var(--f-small); color: #fff;
}
.credit-tile .dc-step:hover { border-color: #fff; }
.credit-tile .dc-step.is-on { background: #fff; border-color: #fff; }
.credit-tile .dc-step.is-on small { color: var(--red); }
.credit-tile .dc-step.is-on b { color: var(--red); }
.credit-tile .fine { margin: 0; font-size: var(--f-kicker); color: rgba(255, 255, 255, .82); }
.credit-tile .fine a { color: #fff; font-weight: 700; text-decoration-color: rgba(255,255,255,.6); text-underline-offset: 3px; }
@media (max-width: 420px) {
  .credit-tile .dc-ladder { grid-template-columns: repeat(3, 1fr); }
}

/* --- где стоит машина --- */
.vx-place { background: var(--paper-tint); }
.vx-place .wrap { padding-top: clamp(44px, 5.4vw, 72px); }
.vdp section.vx-place { padding-bottom: 0; }
.vx-place-grid { display: grid; gap: clamp(20px, 2.8vw, 44px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) { .vx-place-grid { grid-template-columns: 7fr 5fr; } }
.vx-floor { margin: 0; }
.vx-floor img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: var(--r-card);
}
.vx-here h2 { font-size: var(--f-h2); margin: 6px 0 12px; }
.vx-here-copy { margin: 0 0 18px; font-size: var(--f-body); line-height: 1.65; color: var(--c-2nd); max-width: 40em; }
.vx-row { display: flex; align-items: baseline; gap: 12px; font-size: var(--f-small); line-height: 1.5; margin-bottom: 10px; color: var(--c-2nd); }
.vx-row .ic { flex: none; width: 17px; height: 17px; color: var(--red); transform: translateY(3px); }
.vx-row b { color: var(--ink); font-weight: 700; }
.vx-more { display: inline-block; margin-top: 8px; font-size: var(--f-small); }
@media (max-width: 760px) {
  .vx-floor {
    margin-left: calc(-1 * clamp(18px, 4vw, 32px));
    margin-right: calc(-1 * clamp(18px, 4vw, 32px));
  }
  .vx-floor img { border-radius: 0; }
}

/* --- как проходит покупка --- */
.vx-how .wrap { padding-top: clamp(44px, 5.4vw, 72px); }
.vdp section.vx-how { padding-bottom: 0; }
@media (min-width: 960px) { .how-intro { position: sticky; top: 110px; } }
.how-intro h2 { margin: 8px 0 12px; }
.how-intro p { font-size: var(--f-body); line-height: 1.6; color: var(--c-2nd); margin: 0 0 22px; max-width: 26em; }
.how-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.how-btns .btn .ic { width: 16px; height: 16px; }
@media (max-width: 560px) { .how-btns { flex-direction: column; } .how-btns .btn { width: 100%; } }

/* --- вопросы по машине --- */
.vx-faq { background: var(--paper-tint); }
.vx-faq .wrap { padding-top: clamp(44px, 5.4vw, 72px); }
.vdp section.vx-faq { padding-bottom: 0; }
.vx-faq .sec-head { margin-bottom: 26px; }
.vx-faq .vdp-faq-list { max-width: 920px; margin: 0 auto; display: grid; gap: 12px; }
.vx-faq .faq-item {
  background: #fff; border-radius: var(--r-card); padding: 0;
  box-shadow: 0 2px 10px rgba(20, 23, 27, .07);
  border-left: 4px solid transparent; overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.vx-faq .faq-item[open] { border-left-color: var(--red); box-shadow: 0 10px 28px rgba(20, 23, 27, .12); }
.vx-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  cursor: pointer; list-style: none; padding: 20px 24px;
  font-family: var(--display); font-stretch: 110%; font-weight: 700; font-size: var(--f-body); color: var(--ink);
}
.vx-faq summary::-webkit-details-marker { display: none; }
.vx-faq summary::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--paper-tint);
  background-image: linear-gradient(var(--red), var(--red)), linear-gradient(var(--red), var(--red));
  background-size: 12px 2px, 2px 12px; background-position: center, center; background-repeat: no-repeat;
  transition: transform .25s var(--ease);
}
.vx-faq .faq-item[open] summary::after { transform: rotate(135deg); }
.vx-faq .faq-item[open] summary { padding-bottom: 12px; }
.vx-faq .faq-a { padding: 0 24px 22px; }
.vx-faq .faq-a::before { content: ""; display: block; height: 1px; background: var(--line); margin-bottom: 14px; }
.vx-faq .faq-a p { margin: 0; font-size: var(--f-body); line-height: 1.7; color: var(--c-2nd); max-width: 68ch; }
.vx-faq .faq-a a, .faq-more-line a { color: var(--ink); font-weight: 700; text-decoration-color: var(--red); text-underline-offset: 3px; }
.faq-more-line { text-align: center; margin: 26px 0 0; font-size: var(--f-body); color: var(--c-2nd); }

/* --- бланк дилера --- */
.vx-ask .wrap { padding-top: clamp(44px, 5.4vw, 72px); }
.vdp section.vx-ask { padding-bottom: 0; }
.vx-ask .ask-card { margin: 0 auto; }
.ac-picks { border: none; margin: 0 0 16px; padding: 0; }
.ac-picks legend {
  font-family: var(--display); font-stretch: 110%; font-weight: 700;
  font-size: var(--f-kicker); letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); margin-bottom: 10px; padding: 0;
}
.ac-picks .pick {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--f-body); color: var(--ink); cursor: pointer; padding: 5px 0;
  transition: color .15s var(--ease);
}
.ac-picks .pick:hover { color: var(--red); }
.ac-picks input { width: 19px; height: 19px; accent-color: var(--red); flex: none; cursor: pointer; }
@media (min-width: 560px) {
  .ac-picks:has(input[type="radio"]) { display: flex; gap: 22px; flex-wrap: wrap; }
  .ac-picks:has(input[type="radio"]) legend { width: 100%; }
}

/* --- финал: закрывашка + три лота --- */
.vx-similar { background: var(--paper-tint); }
.vx-similar .wrap { padding-top: clamp(44px, 5.4vw, 72px); }
.vdp section.vx-similar { padding-bottom: clamp(44px, 5.6vw, 72px); }
.vx-similar .sec-head { margin-bottom: 28px; }
.sim-close {
  margin: 0 0 clamp(28px, 3.6vw, 44px); padding: 18px 22px;
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 2px 10px rgba(20, 23, 27, .07);
  text-align: center; font-size: var(--f-body); color: var(--c-2nd);
}
.sim-close a { color: var(--ink); font-weight: 700; text-decoration-color: var(--red); text-underline-offset: 3px; }
.sim-close a:hover { color: var(--red); }
.sim-more { text-align: center; margin: 26px 0 0; font-size: var(--f-body); }

/* --- всплывающий бланк дилера --- */
.ask-modal {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(10, 11, 13, .55);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .22s var(--ease);
}
.ask-modal.is-open { opacity: 1; }
.ask-modal[hidden] { display: none; }
.am-card {
  position: relative; width: 100%; max-width: 700px;
  max-height: calc(100svh - 46px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border-radius: 14px 14px 0 0;
  border-top: 3px solid var(--red);
  padding: 26px clamp(18px, 4vw, 32px) calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateY(28px); transition: transform .22s var(--ease);
}
.ask-modal.is-open .am-card { transform: none; }
.am-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer;
  background: var(--paper-tint); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.am-close:hover { background: var(--red); color: #fff; }
.am-close .ic { width: 15px; height: 15px; }
.am-card .ask-card { max-width: none; box-shadow: none; padding: 0; margin: 0; background: transparent; }
@media (min-width: 760px) {
  .ask-modal { align-items: center; padding: 24px; }
  .am-card { border-radius: 14px; max-height: calc(100svh - 80px); }
  .am-card .ac-grid { grid-template-columns: 1fr; }
  .am-card .ac-side { display: none; }
}

/* --- липкая полоса --- */
.vdp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; align-items: center; gap: 10px;
  background: var(--deep); border-top: 3px solid var(--red);
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 28px rgba(10, 11, 13, .4);
  transform: translateY(0); transition: transform .3s var(--ease);
}
.vdp-sticky.is-off { transform: translateY(110%); }
.vs-price { flex: none; display: grid; gap: 2px; line-height: 1; min-width: 0; }
.vs-price b {
  font-family: var(--display); font-stretch: 116%; font-weight: 700;
  font-size: var(--f-h3); color: #fff; letter-spacing: .01em;
}
.vs-price small { font-size: var(--f-kicker); font-weight: 700; color: #FF5A70; white-space: nowrap; }
.vdp-sticky .btn { flex: 1; min-height: 48px; font-size: var(--f-small); padding-left: 10px; padding-right: 10px; }
.vdp-sticky .btn-light { background: #fff; color: var(--ink); }
.vdp-sticky .btn-light:hover { background: var(--paper-tint); color: var(--ink); }
.vdp-sticky .btn .ic { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .vdp-sticky { display: flex; }
  /* плашка висит до самого низа — футер оставляет ей ровно её высоту */
  body.has-sticky .site-footer { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* --- полноэкранный просмотр фото --- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 11, 13, .95);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 48px);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lb-close, .lb-nav {
  position: absolute; border: none; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .12); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s var(--ease);
}
.lb-close:hover, .lb-nav:hover { background: var(--red); }
.lb-close { top: 18px; right: 18px; width: 46px; height: 46px; }
.lb-close .ic { width: 17px; height: 17px; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lb-nav .ic { width: 20px; height: 20px; }
.lb-prev { left: 18px; } .lb-prev .ic { transform: rotate(180deg); }
.lb-next { right: 18px; }
.lb-count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: rgba(255, 255, 255, .12); color: #fff;
  padding: 6px 14px; border-radius: 999px; font-size: var(--f-small); font-weight: 600;
}
@media (max-width: 640px) {
  .lb-nav { width: 44px; height: 44px; }
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
  .lb-close { top: 10px; right: 10px; }
}

/* --- мобильные поджимы --- */
@media (max-width: 939px) {
  /* телефон: порядок продажи — фото, цена, кнопки, факты, доверие,
     миниатюры. Контейнеры раскрываются в общий грид, поэтому
     sticky-observer в vdp.js смотрит на .vx-cta, а не на панель */
  .vx-media, .vx-deal { display: contents; }
  /* галерея целиком наверху: кадр, миниатюры, кнопка — потом деньги */
  .vx-lead-grid .vx-stage { order: 1; }
  .vx-lead-grid .vx-grid { order: 2; margin-top: 0; gap: 6px; }
  .vx-lead-grid .vx-price { order: 4; margin-top: 6px; }
  .vx-lead-grid .vx-cta { order: 5; margin-top: -2px; }
  .vx-lead-grid .vx-plate { order: 6; margin-top: 10px; margin-bottom: 0; }
  .vx-lead-grid { gap: 14px; }
}
@media (max-width: 760px) {
  .vx-count { bottom: 10px; } .vx-open { bottom: 10px; }
  .g-nav { width: 42px; height: 42px; }
  .vx-numbers .wrap { padding-top: 32px; }
  .vx-article {
    margin-left: calc(-1 * clamp(18px, 4vw, 32px));
    margin-right: calc(-1 * clamp(18px, 4vw, 32px));
    border-radius: 0; box-shadow: none;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .num-card, .credit-tile {
    margin-left: calc(-1 * clamp(18px, 4vw, 32px));
    margin-right: calc(-1 * clamp(18px, 4vw, 32px));
    border-radius: 0;
    padding-left: clamp(18px, 4vw, 32px); padding-right: clamp(18px, 4vw, 32px);
  }
  /* карточки во всю ширину идут встык — светлой щели перед красной
     плиткой нет (правило якорей) */
  .num-grid { gap: 0; }
  .num-card { box-shadow: none; border-top: 1px solid var(--line); }
  .vx-faq .faq-item { box-shadow: none; }
  .num-card { padding-top: 20px; padding-bottom: 20px; }
  .ship-facts { gap: 8px; }
}

/* ---------- CONTACT ---------- */
main > section.ct-hero { padding-bottom: 0; }
.ct-hero .wrap { padding-top: clamp(34px, 4.4vw, 58px); padding-bottom: clamp(34px, 4.4vw, 58px); }
.ct-grid { display: grid; gap: clamp(28px, 3.4vw, 48px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .ct-grid { grid-template-columns: 7fr 5fr; } }
.ct-hero h1 { color: #fff; font-size: clamp(2rem, 3.8vw, 2.8rem); margin-bottom: 14px; }
.ct-hero .d-sub { max-width: 34em; margin-bottom: 28px; }

/* три способа связи */
.ct-ways { display: grid; gap: 12px; }
.way-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border-radius: var(--r-card);
  background: rgba(255, 255, 255, .05);
  border: 2px solid rgba(255, 255, 255, .1);
  text-decoration: none; color: #fff;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.way-card:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); transform: translateY(-2px); }
.wc-ic {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red);
}
.wc-ic .ic { width: 20px; height: 20px; color: #fff; }
.wc-txt { display: grid; gap: 2px; min-width: 0; }
.wc-txt small {
  font-family: var(--display); font-stretch: 110%; font-weight: 750;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9AA1A9;
}
.wc-txt b {
  font-family: var(--display); font-stretch: 114%; font-weight: 800;
  font-size: clamp(17px, 1.7vw, 20px); color: #fff; overflow-wrap: anywhere;
}
.way-call .wc-txt b { font-size: clamp(20px, 2vw, 24px); }
.wc-note { font-size: 14px; color: #A7AEB6; }

/* карточка «прямо сейчас» */
.now-card {
  background: #fff; border-radius: var(--r-card);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.now-clock { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.now-clock b {
  font-family: var(--display); font-stretch: 118%; font-weight: 820;
  font-size: clamp(34px, 3.4vw, 44px); line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.now-clock span { font-size: 14.5px; color: var(--ink-soft); }
.now-state {
  display: flex; align-items: center; gap: 9px; margin: 0 0 6px;
  font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 17px;
}
.dot-live { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.now-card.is-open .now-state { color: #1E7A38; }
.now-card.is-open .dot-live { background: #1E7A38; box-shadow: 0 0 0 0 rgba(30, 122, 56, .5); animation: live-pulse 2.4s infinite; }
.now-card.is-closed .now-state { color: var(--ink-soft); }
.now-card.is-closed .dot-live { background: #9AA1A9; }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(30, 122, 56, .45); }
  70% { box-shadow: 0 0 0 9px rgba(30, 122, 56, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 122, 56, 0); }
}
.now-hint { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.now-hours { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.nh-row { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; color: var(--ink-soft); }
.nh-row i { flex: 1; border-bottom: 2px dotted #E0DBCE; transform: translateY(-3px); }
.nh-row b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-soft); }
.nh-row.nh-off b { color: #6F6A60; }
.nh-row.is-today { color: var(--ink); font-weight: 700; }
.nh-row.is-today b { color: var(--red); }
.now-card .btn { width: 100%; }
.now-card .btn .ic { width: 16px; height: 16px; }

/* чего ждать от звонка */
.ct-expect { background: var(--paper-tint); padding-top: clamp(40px, 5.4vw, 68px); }
.ct-expect .sec-head { margin-bottom: 34px; }
main > section.ct-expect { padding-bottom: clamp(56px, 7vw, 88px); }
.expect-grid .st-n { margin: 0 0 14px; box-shadow: none; }

.ct-ask { padding-top: clamp(36px, 4.4vw, 56px); }
main > section.ct-ask { padding-bottom: clamp(56px, 7vw, 80px); }
.ct-ask .ask-card { margin: 0 auto; }

.ct-where { background: var(--paper-tint); padding-top: clamp(40px, 5.4vw, 68px); }
main > section.ct-where { padding-bottom: clamp(56px, 7vw, 88px); }
.ct-where .place-copy h2 { margin: 10px 0 14px; }
.ct-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
/* две кнопки в ряд равной ширины — иначе на узкой колонке валятся стопкой вразнобой */
.ct-actions .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
.ct-actions .btn .ic { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .ct-actions { flex-direction: column; }
  .ct-actions .btn { width: 100%; }
  .way-card { padding: 14px 15px; gap: 13px; }
  .wc-ic { width: 40px; height: 40px; }
}

/* ---------- FAQ ---------- */
main > section.faq-hero { padding-bottom: 0; }
.faq-hero .wrap {
  padding-top: clamp(34px, 4.4vw, 60px); padding-bottom: clamp(34px, 4.4vw, 56px);
  text-align: center;
}
.faq-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 12px; }
.faq-hero .d-sub { max-width: 40em; margin: 0 auto 26px; }
/* строка поиска */
.faq-search {
  position: relative; display: flex; align-items: center;
  max-width: 620px; margin: 0 auto;
}
.faq-search > .ic {
  position: absolute; left: 20px; width: 20px; height: 20px;
  color: var(--ink-soft); pointer-events: none; z-index: 1;
}
.faq-search input {
  font: inherit; font-size: 17px; color: var(--ink);
  width: 100%; min-height: 58px; padding: 12px 52px 12px 52px;
  background: #fff; border: 2px solid transparent; border-radius: 999px;
}
.faq-search input:focus { outline: none; border-color: var(--red); }
.faq-clear {
  position: absolute; right: 16px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--paper-tint); color: var(--ink);
}
.faq-clear:hover { background: var(--red); color: #fff; }
.faq-clear .ic { width: 13px; height: 13px; }
.faq-quick {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin-top: 18px;
  font-size: 14.5px; color: #9AA1A9;
}
.faq-quick .chip {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff;
}
.faq-quick .chip:hover { background: var(--red); border-color: var(--red); }

/* тело */
.faq-page { padding-top: clamp(30px, 3.6vw, 44px); }
main > section.faq-page { padding-bottom: clamp(50px, 6vw, 76px); }
.faq-tabs { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 1080px) { .faq-tabs { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 900px) { .faq-tabs { grid-template-columns: 1fr 1fr; } }
.faq-tab { padding: 11px 14px; }
.faq-tab .dt-era { white-space: normal; font-size: 15px; }
.faq-countbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 22px 0 4px; min-height: 26px;
}
.faq-countbar .inv-count { margin: 0; }
/* сам аккордеон */
/* Аккордеон FAQ. Базовые .faq-list-правила лежат НИЖЕ по файлу, поэтому
   всё здесь пишем через .faq-page (0,3,0) — иначе отступы обнуляются. */
.faq-page .faq-full { display: grid; gap: 12px; margin-top: 14px; max-width: none; }
.faq-page .faq-full .faq-item {
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 2px 10px rgba(20, 23, 27, .07);
  padding: 0; overflow: hidden;
  border-left: 4px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-page .faq-full .faq-item:hover { box-shadow: 0 6px 20px rgba(20, 23, 27, .1); }
.faq-page .faq-full .faq-item[open] {
  border-left-color: var(--red);
  box-shadow: 0 10px 28px rgba(20, 23, 27, .13);
}
.faq-page .faq-full summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; cursor: pointer; list-style: none;
  padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
  font-family: var(--display); font-stretch: 110%; font-weight: 750;
  font-size: clamp(17px, 1.5vw, 19px); line-height: 1.35; color: var(--ink);
}
.faq-page .faq-full summary:hover { color: var(--red); }
/* знак «плюс» — кружок, а не голый символ у самого края */
.faq-page .faq-full summary::after {
  content: ""; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--paper-tint);
  background-image:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red));
  background-size: 13px 2px, 2px 13px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform .25s var(--ease), background-color .2s var(--ease);
}
.faq-page .faq-full summary:hover::after { background-color: #F3E4E7; }
.faq-page .faq-full .faq-item[open] summary::after { transform: rotate(135deg); }
.faq-page .faq-full .faq-item[open] summary { padding-bottom: 14px; }
/* ответ: отступы как у вопроса, с линией-разделителем и колонкой под чтение */
.faq-page .faq-full .faq-a {
  padding: 0 clamp(20px, 2.4vw, 30px) clamp(22px, 2.4vw, 28px);
}
/* разделитель тянем на всю ширину карточки, а текст держим в колонке для чтения */
.faq-page .faq-full .faq-a::before {
  content: ""; display: block; height: 1px; background: var(--line); margin-bottom: 16px;
}
.faq-page .faq-full .faq-a p {
  margin: 0; padding: 0;
  font-family: var(--body); font-size: 16.5px; line-height: 1.7;
  color: var(--ink-soft); max-width: 68ch;
}
.faq-page .faq-full .faq-a a { color: var(--ink); font-weight: 700; text-decoration-color: var(--red); text-underline-offset: 3px; }
.faq-page .faq-full .faq-a a:hover { color: var(--red); }

.faq-ask { background: var(--paper-tint); padding-top: clamp(36px, 4.4vw, 56px); }
main > section.faq-ask { padding-bottom: clamp(48px, 6vw, 72px); }
.faq-ask .ask-card { margin: 0 auto; }

@media (max-width: 640px) {
  .faq-search input { min-height: 52px; font-size: 16px; padding-left: 46px; }
  .faq-search > .ic { left: 16px; width: 18px; height: 18px; }
  .faq-quick { font-size: 13.5px; }
  .faq-a p { font-size: 15.5px; }
}

/* ---------- ABOUT ---------- */
main > section.ab-hero { padding-bottom: 0; }
.ab-hero .wrap { padding-top: clamp(34px, 4.4vw, 60px); padding-bottom: clamp(34px, 4.4vw, 60px); }
.ab-grid {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 940px) { .ab-grid { grid-template-columns: 6fr 5fr; } }
.ab-hero h1 { color: #fff; font-size: clamp(2rem, 3.8vw, 2.8rem); margin-bottom: 14px; }
.ab-hero .d-sub { max-width: 34em; margin-bottom: 26px; }
.ab-facts { grid-template-columns: repeat(2, auto); gap: 18px 34px; justify-content: start; }
@media (min-width: 620px) { .ab-facts { grid-template-columns: repeat(4, auto); } }
.ab-facts b { font-size: clamp(26px, 2.6vw, 36px); white-space: nowrap; }
.ab-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.ab-cta .fh-alt { margin: 0; }
.ab-cta .qb-txt small { color: #9AA1A9; }
.ab-cta .qb-txt b { color: #fff; }
.ab-cta .fh-alt:hover .qb-txt b { color: #FF5A70; }
@media (max-width: 900px) { .ab-hero .fh-alt { display: inline-flex; margin-left: 0; } }
@media (max-width: 640px) {
  .ab-cta { gap: 18px; }
  .ab-cta .btn { width: 100%; }
  .ab-facts { gap: 16px 26px; }
  .why-card { padding: 20px 18px; }
  .why-card h3 { font-size: 17.5px; }
  .why-card p { font-size: 15px; }
  .wy-n { font-size: 22px; margin-bottom: 6px; }
  .place-card { padding: 18px 16px; gap: 14px; }
  .prep-shot figcaption { padding: 28px 14px 14px; font-size: 13.5px; }
  .prep-shot figcaption b { font-size: 16.5px; }
}
/* фото шоурума в рамке-паспарту */
.ab-shot {
  margin: 0; background: #fff; padding: 10px 10px 0;
  border-radius: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  transform: rotate(-1.2deg);
}
.ab-shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 3px; }
.ab-shot figcaption {
  padding: 12px 4px 14px; text-align: center;
  font-family: var(--display); font-stretch: 112%; font-weight: 800;
  font-size: 14.5px; color: var(--ink);
}

/* манифест */
.ab-why { background: var(--paper-tint); padding-top: clamp(40px, 5.4vw, 68px); }
.ab-why .sec-head { margin-bottom: 34px; }
main > section.ab-why { padding-bottom: clamp(56px, 7vw, 88px); }
.why-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .why-grid { grid-template-columns: 1fr 1fr; } }
.why-card {
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 2px 10px rgba(20, 23, 27, .07);
  padding: clamp(22px, 2.6vw, 30px);
}
.wy-n {
  display: block; margin-bottom: 10px;
  font-family: var(--display); font-stretch: 118%; font-weight: 820;
  font-size: 26px; line-height: 1; color: var(--red);
}
.why-card h3 { font-size: 19px; margin-bottom: 8px; }
.why-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }

/* подготовка машины: три кадра */
.ab-prep { padding-top: clamp(40px, 5.4vw, 68px); }
.ab-prep .sec-head { margin-bottom: 34px; }
main > section.ab-prep { padding-bottom: clamp(56px, 7vw, 88px); }
.prep-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .prep-grid { grid-template-columns: 5fr 4fr 4fr; } }
.prep-shot {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-card); background: var(--paper-tint);
  box-shadow: 0 10px 26px rgba(20, 23, 27, .14);
}
.prep-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 4 / 3.2; transition: transform .5s var(--ease);
}
.prep-shot:hover img { transform: scale(1.03); }
@media (min-width: 860px) { .prep-shot img { aspect-ratio: 4 / 4.4; } }
.prep-shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 18px 16px; color: #fff;
  background: linear-gradient(to top, rgba(16, 18, 20, .92), rgba(16, 18, 20, 0));
  font-size: 14.5px; line-height: 1.45;
}
.prep-shot figcaption b {
  display: block; font-family: var(--display); font-stretch: 114%; font-weight: 820;
  font-size: 18px; margin-bottom: 3px;
}

/* где мы */
.ab-place { background: var(--paper-tint); padding-top: clamp(40px, 5.4vw, 68px); }
main > section.ab-place { padding-bottom: clamp(56px, 7vw, 88px); }
.place-grid {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 940px) { .place-grid { grid-template-columns: 5fr 7fr; } }
.place-copy h2 { margin: 10px 0 14px; }
.place-copy p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 14px; max-width: 34em; }
.place-card {
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 2px 10px rgba(20, 23, 27, .07);
  padding: clamp(20px, 2.4vw, 26px); margin-top: 24px;
  display: grid; gap: 16px;
}
.pl-row { display: flex; align-items: flex-start; gap: 13px; font-size: 15.5px; line-height: 1.5; }
.pl-row .ic { flex: none; width: 20px; height: 20px; color: var(--red); margin-top: 2px; }
.pl-row b { font-size: 16.5px; }
.place-card .btn { width: 100%; }
.place-card .btn .ic { width: 15px; height: 15px; }
/* карта на светлом фоне: точки темнее, чем на графите */
.place-map svg { width: 100%; height: auto; display: block; }
.place-map .map-dot { fill: rgba(20, 23, 27, .28); }
.place-map .map-home { fill: var(--red); }
.place-map .map-home-ring { stroke: var(--red); }
.place-map .d-map-cap { color: var(--ink-soft); }

/* витрина на About */
.ab-stock { padding-top: clamp(40px, 5.4vw, 68px); }
.ab-stock .sec-head { margin-bottom: 34px; }
main > section.ab-stock { padding-bottom: clamp(56px, 7vw, 88px); }
.ab-more { text-align: center; margin-top: 30px; }
.ab-more .btn .ic { width: 15px; height: 15px; }

/* финальная полоса */
.ab-visit { background: var(--paper-tint); padding-top: clamp(36px, 4.4vw, 56px); }
main > section.ab-visit { padding-bottom: clamp(48px, 6vw, 72px); }
.visit-band {
  position: relative; overflow: hidden;
  background: var(--deep); color: #C9CED4; border-radius: var(--r-card);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 40px); flex-wrap: wrap;
  padding: clamp(24px, 3vw, 38px) clamp(24px, 3.2vw, 40px);
}
.vb-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .3;
}
.visit-band > *:not(.vb-bg) { position: relative; z-index: 1; }
.vb-copy { flex: 1 1 320px; min-width: 0; }
.visit-band h2 { color: #fff; margin-bottom: 8px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.visit-band p { margin: 0; font-size: 17px; color: #A7AEB6; }
.vb-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
.vb-call { color: #fff; border-color: rgba(255,255,255,.35); }
.vb-call:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.vb-call .ic { width: 16px; height: 16px; color: #FF5A70; }
@media (max-width: 640px) {
  .vb-actions { width: 100%; }
  .vb-actions .btn { width: 100%; }
}

/* ---------- TRADE-IN ---------- */
/* hero и карточка наследуют язык Financing (.fin-hero/.deal-card) */
main > section.ti-hero { padding-bottom: 0; }
.ti-hero .wrap { padding-top: clamp(26px, 3.2vw, 40px); padding-bottom: clamp(26px, 3.4vw, 40px); }
@media (min-width: 1120px) {
  .ti-hero { display: flex; }
  .ti-hero .wrap {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    min-height: min(calc(100svh - 148px), 860px);
  }
}
.ti-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 12px; }
.ti-hero .d-sub { max-width: 32em; }
.ti-hero .d-facts { grid-template-columns: repeat(3, auto); gap: 14px 30px; margin-top: 6px; }
.ti-hero .d-fact b { font-size: clamp(20px, 1.9vw, 26px); white-space: nowrap; }
@media (max-width: 900px) {
  .ti-hero .fh-alt { display: inline-flex; margin-left: 0; }
  .ti-hero .d-sub { margin-bottom: 20px; }
  .ti-hero .d-facts { gap: 12px 22px; }
}

.ti-hint { font-size: 13.5px; color: var(--ink-soft); margin: -2px 0 14px; }
/* полоса: сколько машины закрывает трейд */
.ti-bar {
  display: flex; height: 14px; border-radius: 7px; overflow: hidden;
  background: var(--paper); margin-bottom: 10px;
}
.tb-trade { background: var(--red); transition: width .25s var(--ease); }
.tb-fin { background: #D8D3C6; transition: width .25s var(--ease); }
.ti-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; font-size: 14px; color: var(--ink-soft); }
.ti-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; }
.lg-trade i { background: var(--red); }
.lg-fin i { background: #D8D3C6; }
.ti-legend b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* сравнение с покупкой без трейда */
.ti-vs {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: -4px 0 12px; font-size: 14.5px; color: var(--ink-soft);
}
.ti-vs s { color: var(--ink-soft); font-size: 16px; text-decoration-color: var(--red); }
.ti-vs b { color: var(--red); }
/* расклад трейда: цена − трейд = к финансированию */
.ti-flow { display: grid; gap: 6px; }
.tf-row { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: var(--ink-soft); }
.tf-row i { flex: 1; border-bottom: 2px dotted #D8D3C6; transform: translateY(-3px); }
.tf-row b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; }
.tf-minus b { color: var(--red); }
.tf-total { padding-top: 8px; border-top: 2px solid var(--line); margin-top: 4px; font-weight: 700; color: var(--ink); }
.tf-total b { font-family: var(--display); font-stretch: 114%; font-weight: 820; font-size: 19px; }
.ti-down {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 8px;
  background: var(--paper); font-size: 14.5px; line-height: 1.45; color: var(--ink);
  border-left: 3px solid var(--line);
}
.ti-down.is-ok { border-left-color: #1E7A38; }

/* лист «что достаёт трейд» — в языке прейскуранта */
.trade-sheet { padding-top: clamp(40px, 5.4vw, 68px); }
.trade-sheet .sec-head { margin-bottom: 32px; }
.trade-sheet .sec-sub b { color: var(--ink); white-space: nowrap; }
.trade-sheet .rs-stamp { font-size: 15px; line-height: 1.2; padding: 11px 16px; }
.trade-sheet .rc-city { white-space: normal; }
.trade-sheet .rc-price small {
  font-family: var(--body); font-weight: 600; font-size: 12.5px;
  color: var(--ink-soft); margin-left: 2px;
}
main > section.trade-sheet { padding-bottom: clamp(56px, 7vw, 88px); }

/* что влияет на оценку */
.ti-moves { padding-top: clamp(40px, 5.4vw, 68px); }
.ti-moves .sec-head { margin-bottom: 34px; }
main > section.ti-moves { padding-bottom: clamp(56px, 7vw, 88px); }
.moves-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .moves-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .moves-grid { grid-template-columns: repeat(3, 1fr); } }
.move-card {
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 2px 10px rgba(20, 23, 27, .07);
  padding: 24px 22px;
}
.mv-n {
  display: block; margin-bottom: 10px;
  font-family: var(--display); font-stretch: 118%; font-weight: 820;
  font-size: 26px; line-height: 1; color: var(--red);
}
.move-card h3 { font-size: 17.5px; margin-bottom: 8px; }
.move-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.move-cta { background: var(--deep); display: flex; flex-direction: column; justify-content: center; }
.move-cta h3 { color: #fff; font-size: 20px; }
.move-cta p { color: #A7AEB6; margin-bottom: 16px; }
.move-cta .btn { width: 100%; }
.move-cta .btn .ic { width: 16px; height: 16px; }

/* мобильная плотность блоков трейд-ина */
@media (max-width: 640px) {
  .move-card { padding: 18px 16px; }
  .mv-n { font-size: 22px; margin-bottom: 6px; }
  .move-card h3 { font-size: 16.5px; margin-bottom: 6px; }
  .move-card p { font-size: 14.5px; }
  .take-card { padding: 20px 18px; }
  .take-card h3 { font-size: 17.5px; }
  .take-card p { font-size: 15px; }
  .tk-ic { width: 36px; height: 36px; margin-bottom: 12px; }
  .tk-ic .ic { width: 17px; height: 17px; }
  .vs-card { padding: 20px 18px; }
  .vs-list { gap: 9px; }
  .vs-list li { font-size: 15px; }
  .ti-legend { gap: 12px; font-size: 13.5px; }
  .ti-down { font-size: 14px; padding: 9px 11px; }
}

/* сам или к нам */
.ti-versus { padding-top: clamp(40px, 5.4vw, 68px); }
.ti-versus .sec-head { margin-bottom: 32px; }
main > section.ti-versus { padding-bottom: clamp(56px, 7vw, 88px); }
.vs-grid { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .vs-grid { grid-template-columns: 1fr 1fr; } }
.vs-card {
  background: var(--paper-tint); border-radius: var(--r-card);
  padding: clamp(22px, 2.6vw, 30px);
}
.vs-ours { background: #fff; box-shadow: 0 10px 30px rgba(20, 23, 27, .1); border-top: 4px solid var(--red); }
.vs-cap {
  font-family: var(--display); font-stretch: 110%; font-weight: 750;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 16px;
}
.vs-ours .vs-cap { color: var(--red); }
.vs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.vs-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 16px; line-height: 1.5; color: var(--ink-soft);
}
.vs-card:not(.vs-ours) .vs-list li { padding-left: 22px; position: relative; }
.vs-card:not(.vs-ours) .vs-list li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 8px; height: 2px; background: #B7B0A2; border-radius: 1px;
}
.vs-ours .vs-list li { color: var(--ink); font-weight: 600; }
.vs-list .ic { flex: none; width: 17px; height: 17px; color: var(--red); margin-top: 3px; }
.vs-ours .btn { margin-top: 20px; }
.vs-ours .btn .ic { width: 16px; height: 16px; color: #fff; margin: 0; }

/* что берём / что нет */
.ti-take { background: var(--paper-tint); padding-top: clamp(40px, 5.4vw, 68px); }
.ti-take .sec-head { margin-bottom: 32px; }
.take-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .take-grid { grid-template-columns: 1fr 1fr; } }
.take-card {
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 2px 10px rgba(20, 23, 27, .07);
  padding: clamp(22px, 2.6vw, 30px);
  border-top: 4px solid var(--line);
}
.take-yes { border-top-color: #1E7A38; }
.take-no { border-top-color: var(--red); }
.tk-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; margin-bottom: 14px;
}
.take-yes .tk-ic { background: #1E7A38; }
.take-no .tk-ic { background: var(--red); }
.tk-ic .ic { width: 20px; height: 20px; color: #fff; }
.take-card h3 { font-size: 19px; margin-bottom: 8px; }
.take-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
main > section.ti-take { padding-bottom: clamp(56px, 7vw, 88px); }

.ti-how { background: var(--paper-tint); padding-top: clamp(40px, 5.4vw, 68px); }
.ti-how .sec-head { margin-bottom: 34px; }
main > section.ti-how { padding-bottom: clamp(56px, 7vw, 88px); }

.ti-ask { background: var(--paper-tint); padding-top: clamp(36px, 4.4vw, 56px); }
main > section.ti-ask { padding-bottom: clamp(48px, 6vw, 72px); }
.ti-ask .ask-card { margin: 0 auto; }

/* ---------- FINANCING ---------- */
/* тёмный hero с конструктором сделки */
main > section.fin-hero { padding-bottom: 0; }
.fin-hero .wrap { padding-top: clamp(26px, 3.2vw, 40px); padding-bottom: clamp(26px, 3.4vw, 40px); }
@media (min-width: 1120px) {
  .fin-hero { display: flex; }
  .fin-hero .wrap {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    min-height: min(calc(100svh - 148px), 860px);
  }
}
.fh-top {
  display: grid; gap: clamp(18px, 3vw, 48px);
  grid-template-columns: 1fr; align-items: end;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
@media (min-width: 940px) { .fh-top { grid-template-columns: 1fr auto; } }
.fh-side { display: grid; gap: 16px; justify-items: start; }
@media (min-width: 940px) { .fh-side { justify-items: end; text-align: right; } }
/* водяная печать кредитора: оттиск наискось за контентом,
   в пару к штампу ENCLOSED & INSURED на прейскуранте доставки */
.fin-hero { position: relative; overflow: hidden; }
.fh-stamp {
  /* держим оттиск в пустой зоне между навбаром и карточкой:
     под фактами он превращал белый текст в кашу */
  position: absolute; right: 4%; top: -2px; z-index: 0;
  transform: rotate(-3.5deg);
  border: 3px solid rgba(255, 90, 112, .14);
  border-radius: 16px;
  outline: 2px solid rgba(255, 90, 112, .14); outline-offset: -8px;
  padding: 7px 18px 9px;
  text-align: center; pointer-events: none;
}
.fh-stamp b {
  display: block;
  font-family: var(--display); font-stretch: 122%; font-weight: 820;
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1;
  letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255, 90, 112, .13);
}
.fh-stamp span {
  display: block; margin-top: 5px;
  font-family: var(--display); font-stretch: 112%; font-weight: 800;
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 90, 112, .12);
}
@media (max-width: 1120px) { .fh-stamp { display: none; } }
/* на низких экранах полоса над фактами исчезает — печати там не место */
@media (max-height: 840px) { .fh-stamp { display: none; } }
.fin-hero .wrap { position: relative; z-index: 1; }
.fin-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 12px; }
.fin-hero .d-sub { max-width: 30em; }
.fin-hero .d-facts { grid-template-columns: repeat(3, auto); gap: 14px 30px; margin-top: 6px; }
.fin-hero .d-fact b { font-size: clamp(26px, 2.6vw, 36px); white-space: nowrap; }
.fh-alt { margin: 0; }
/* телефон в hero финансов нужен и на телефоне: правило скрытия
   написано для квитанции доставки, здесь его отменяем */
@media (max-width: 900px) {
  /* .qb-alt{display:none} из секции доставки лежит ниже по файлу
     и перебивает одноклассовое правило — берём специфичностью */
  /* margin-left:auto тоже из квитанции — на телефоне прижимаем влево */
  .fin-hero .fh-alt { display: inline-flex; margin-left: 0; }
  .fh-side { gap: 18px; margin-top: 2px; }
  .fin-hero .d-sub { margin-bottom: 20px; }
  .fin-hero .d-facts { gap: 12px 22px; }
}
.fh-alt .qb-txt small { color: #9AA1A9; }
.fh-alt .qb-txt b { color: #fff; }
.fh-alt:hover .qb-txt b { color: #FF5A70; }

/* карта-конструктор */
.deal-card {
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  padding: clamp(18px, 2.2vw, 26px);
  display: grid; gap: 8px clamp(20px, 2.6vw, 34px);
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .deal-card { grid-template-columns: 30fr 24fr 24fr; align-items: start; }
  .deal-card .ac-tag { grid-column: 1 / -1; margin-bottom: 2px; }
  .dc-colB { padding-top: 4px; }
}
.dc-car { position: relative; border-radius: 10px; overflow: hidden; background: var(--paper-tint); }
.dc-car img { width: 100%; height: auto; aspect-ratio: 16 / 9.5; object-fit: cover; display: block; }
.dc-car .g-nav { width: 40px; height: 40px; }
.dc-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 10px 0 0; flex-wrap: wrap;
}
.dc-title a {
  font-family: var(--display); font-stretch: 112%; font-weight: 800;
  font-size: 19.5px; color: var(--ink); text-decoration: none; min-width: 0;
  line-height: 1.15;
}
.dc-title a:hover { color: var(--red); }
.dc-title b {
  font-family: var(--display); font-stretch: 116%; font-weight: 820;
  font-size: 21px; color: var(--red); white-space: nowrap;
}
/* лейблы и значения ползунков: значения заметно жирнее лейблов */
.deal-card .pc-row { font-size: 14.5px; }
.deal-card .pc-row b { font-size: 20px; }
/* зона нажатия у ползунка — вся высота элемента, а дорожка рисуется
   отдельно: иначе пальцем надо попасть в полоску 6px */
.deal-card input[type="range"],
.tool-card input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px;
  background: transparent; outline: none; cursor: pointer;
}
.deal-card input[type="range"] { margin: 0 0 6px; }
.deal-card input[type="range"]::-webkit-slider-runnable-track,
.tool-card input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: #DDD9CE;
}
.deal-card input[type="range"]::-moz-range-track,
.tool-card input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px; background: #DDD9CE;
}
.deal-card input[type="range"]::-webkit-slider-thumb,
.tool-card input[type="range"]::-webkit-slider-thumb { margin-top: -10px; }
/* outline:none глушил и клавиатурный фокус — возвращаем кольцо */
.deal-card input[type="range"]:focus-visible,
.tool-card input[type="range"]:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px;
}
.deal-card input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--red); border: none;
  box-shadow: 0 3px 10px rgba(200, 16, 46, .35); cursor: grab;
}
.deal-card input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--red); border: none;
  box-shadow: 0 3px 10px rgba(200, 16, 46, .35); cursor: grab;
}
/* лестница сроков: платёж по каждому, активный — графит */
.dc-ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 4px 0 12px; }
.dc-step {
  font: inherit; cursor: pointer; text-align: center;
  padding: 8px 4px; border-radius: 8px;
  background: var(--paper); border: 2px solid var(--line);
  display: grid; gap: 2px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.dc-step small { font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; }
.dc-step b {
  font-family: var(--display); font-stretch: 112%; font-weight: 800;
  font-size: 14.5px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.dc-step:hover { border-color: var(--ink-soft); }
.dc-step.is-on { background: var(--deep); border-color: var(--deep); }
.dc-step.is-on small { color: #9AA1A9; }
.dc-step.is-on b { color: #fff; }
.dc-out { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
/* мини-квитанция сделки: дот-лидеры, как в прейскуранте */
.dc-sheet { margin-bottom: 12px; display: grid; gap: 4px; }
.ds-row { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; color: var(--ink-soft); }
.ds-row i { flex: 1; border-bottom: 2px dotted #D8D3C6; transform: translateY(-3px); }
.ds-row b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; }
.ds-row.ds-int b { color: var(--red); }
.dc-mo {
  font-family: var(--display); font-stretch: 118%; font-weight: 820;
  font-size: clamp(32px, 2.8vw, 38px); line-height: 1; color: var(--red);
  font-variant-numeric: tabular-nums;
}
.dc-note { font-size: 15px; color: var(--ink-soft); }
.dc-note b { color: var(--ink); }
.dc-perks {
  list-style: none; margin: 0 0 12px; padding: 10px 0 0;
  border-top: 2px dotted #D8D3C6;
  display: grid; gap: 6px;
}
.dc-perks li {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.dc-perks .ic { flex: none; width: 16px; height: 16px; color: var(--red); }
.deal-card .btn { width: 100%; }
.deal-card .btn .ic { width: 15px; height: 15px; }
.deal-card .fine { font-size: 13.5px; color: var(--ink-soft); margin: 12px 0 0; }

/* лист платежей: тот же прейскурант, что на доставке, но по машинам */
.pay-sheet { padding-top: clamp(40px, 5.4vw, 68px); }
.pay-sheet .sec-head { margin-bottom: 32px; }
.pay-sheet .sec-sub b { color: var(--ink); white-space: nowrap; }
.ps-h { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin: 0; }
.pay-sheet .rs-stamp { font-size: 17px; line-height: 1.2; padding: 12px 18px; }
.pay-sheet .rc-city { white-space: normal; }
.pay-sheet .rc-price small {
  font-family: var(--body); font-weight: 600; font-size: 12.5px;
  color: var(--ink-soft); margin-left: 2px;
}
.rc-row.is-on { background: var(--paper); box-shadow: inset 3px 0 0 var(--red); }
.rc-row.is-on .rc-city { color: var(--red); }
main > section.pay-sheet { padding-bottom: clamp(56px, 7vw, 88px); }
.ps-more {
  display: none; width: 100%; margin-top: 12px;
  font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer;
  padding: 12px; border-radius: var(--r-btn);
  background: none; border: 2px solid var(--line); color: var(--ink);
}
.ps-more:hover { border-color: var(--red); color: var(--red); }
@media (max-width: 859px) {
  /* лист в один столбец: первые восемь машин, дальше по кнопке */
  .rc-grid.is-clipped .rc-row:nth-child(n+9) { display: none; }
  .ps-more { display: block; }
}

/* шаги и трейд-ин */
.fin-how { background: var(--paper-tint); padding-top: clamp(40px, 5.4vw, 68px); }
.fin-how .sec-head { margin-bottom: 34px; }
/* таймлайн-дорога: тот же компонент, что на главной */
.fin-tl { max-width: 720px; margin: 0 auto; }
.fin-tl a { color: var(--ink); font-weight: 700; text-decoration-color: var(--red); text-underline-offset: 3px; }
.fin-tl a:hover { color: var(--red); }
main > section.fin-how { padding-bottom: clamp(56px, 7vw, 88px); }

.fin-trade { background: none; }
.fin-trade .wrap { padding-top: clamp(44px, 5.6vw, 68px); }
main > section.fin-trade { padding-bottom: clamp(44px, 5.6vw, 68px); }
.trade-band {
  background: var(--red); color: #fff; border-radius: var(--r-card);
  display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap;
  padding: clamp(22px, 3vw, 36px) clamp(22px, 3.2vw, 40px);
}
.tb-copy { flex: 1 1 300px; min-width: 0; }
.tb-cap {
  font-family: var(--display); font-stretch: 110%; font-weight: 750;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75); margin: 0 0 8px;
}
.trade-band h2 { color: #fff; margin-bottom: 8px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.trade-band p { margin: 0; font-size: 17px; color: rgba(255, 255, 255, .92); }
.trade-band .btn-light { flex: none; color: var(--ink); }
.trade-band .btn .ic { width: 15px; height: 15px; }
@media (max-width: 640px) { .trade-band .btn-light { width: 100%; } }

.fin-ask { background: var(--paper-tint); padding-top: clamp(36px, 4.4vw, 56px); }
main > section.fin-ask { padding-bottom: clamp(48px, 6vw, 72px); }
.fin-ask .ask-card { margin: 0 auto; }

/* ---------- SHIPPING ---------- */
/* тёмный hero: заголовок страницы живёт прямо в блоке карты */
main > section.ship-map { padding-bottom: 0; }
.ship-map .wrap {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5.4vw, 64px);
}
/* телефон-альтернатива в квитанции: как кнопка звонка в шапке */
.qb-alt {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; margin-left: auto;
}
.qb-ic {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red);
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.qb-ic .ic { width: 20px; height: 20px; color: #fff; }
.qb-alt:hover .qb-ic { background: var(--red-hover, #A20D25); transform: scale(1.06); }
.qb-txt { display: grid; gap: 2px; }
.qb-txt small {
  font-family: var(--display); font-stretch: 110%; font-weight: 750;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.qb-txt b {
  font-family: var(--display); font-stretch: 114%; font-weight: 820;
  font-size: 21px; color: var(--ink); line-height: 1;
}
.qb-alt:hover .qb-txt b { color: var(--red); }
@media (max-width: 900px) { .qb-alt { display: none; } }

/* на десктопе hero добирает до низа окна (шапка ~148px), контент по центру */
@media (min-width: 1120px) {
  .ship-map { display: flex; }
  .ship-map .wrap {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    min-height: clamp(540px, calc(100svh - 148px), 920px);
  }
  .ship-map .d-head { width: 100%; }
}
.ship-map { margin-top: 0; }
.sh-kicker { color: #FF5A70; }
.ship-map h1 { color: #fff; font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 12px; }
.ship-map .d-sub { max-width: 30em; }
/* факты в ряд, компактнее, чем на главной */
.ship-map .d-facts { grid-template-columns: repeat(3, auto); gap: 14px 30px; margin-top: 6px; }
.ship-map .d-fact b { font-size: clamp(26px, 2.6vw, 36px); white-space: nowrap; }

/* стыки секций Shipping чуть плотнее общесайтовых 112px */
main > section.ship-story,
main > section.rate-card,
main > section.ship-cover,
main > section.ship-faq { padding-bottom: clamp(56px, 7vw, 88px); }

/* гарантии доставки: 4 карточки-обещания */
.ship-cover { padding-top: clamp(40px, 5.4vw, 68px); }
.ship-cover .sec-head { margin-bottom: 34px; }
.cover-grid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cover-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .cover-grid { grid-template-columns: repeat(4, 1fr); } }
.cover-card {
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 2px 10px rgba(20, 23, 27, .07);
  padding: 24px 22px;
}
.cv-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--red); margin-bottom: 16px;
}
.cv-ic .ic { width: 22px; height: 22px; color: #fff; }
.cover-card h3 { font-size: 17.5px; margin-bottom: 8px; }
.cover-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.cover-cta { text-align: center; margin-top: 30px; }
@media (max-width: 640px) {
  .cover-cta .btn, .faq-more .btn { width: 100%; }
}

/* единая шапка секции: штрих + ярлык + заголовок + подводка, по центру.
   Ведёт человека из блока в блок одним ритмом. */
.sec-head { text-align: center; max-width: 760px; margin: 0 auto; }
.sec-head::before {
  content: ""; display: block;
  width: 46px; height: 4px; border-radius: 2px;
  background: var(--red); margin: 0 auto 18px;
}
.sec-kicker {
  font-family: var(--display); font-stretch: 110%; font-weight: 750;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 12px;
}
.sec-head h2 { margin-bottom: 12px; }
.sec-sub { font-size: 18px; color: var(--ink-soft); margin: 0 auto; max-width: 36em; }

/* фоторепортаж: киноплёнка 35мм — компактная лента-объект внутри
   светлой секции. Один тёмный блок на странице — hero. */
.ship-story .wrap.sec-head { padding-top: clamp(40px, 5.4vw, 68px); padding-bottom: 34px; }
/* горизонтальный процесс доставки: 4 шага на пунктирной линии */
.ship-steps {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: grid; gap: clamp(18px, 2.6vw, 34px);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .ship-steps { grid-template-columns: repeat(4, 1fr); }
  /* дорога сквозь номера шагов */
  .ship-steps::before {
    content: ""; position: absolute; left: 11%; right: 11%; top: 16px;
    border-top: 2px dashed var(--red); opacity: .4;
  }
}
.ship-steps li { position: relative; }
.st-n {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  margin: 0 auto 16px;
  background: var(--red); color: #fff;
  font-family: var(--display); font-stretch: 114%; font-weight: 820; font-size: 15.5px;
  box-shadow: 0 0 0 5px var(--paper);
}
.ship-steps img {
  width: 100%; height: auto; aspect-ratio: 4 / 3.1;
  object-fit: cover; display: block;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(20, 23, 27, .14);
}
.ship-steps li:first-child img, .ship-steps li:last-child img { object-position: center 58%; }
.ship-steps h3 { font-size: 18px; margin: 15px 0 6px; }
.ship-steps p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 859px) {
  /* на телефоне шаги стопкой: номер и заголовок в строку, фото под ними.
     Без order заголовок падал в колонку номера и слова вставали столбиком. */
  .ship-steps li {
    display: grid; grid-template-columns: 34px 1fr; gap: 10px 12px; align-items: center;
  }
  .st-n { margin: 0; order: 1; }
  .ship-steps h3 { margin: 0; order: 2; }
  .ship-steps img { grid-column: 1 / -1; order: 3; }
  .ship-steps p { grid-column: 1 / -1; order: 4; margin-top: -2px; }
}

/* лист-прейскурант: одна белая карта-документ со штампом */
.rate-sheet {
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 2px 12px rgba(20, 23, 27, .08);
  padding: clamp(24px, 3.4vw, 44px);
  max-width: 1040px; margin: 0 auto;
}
.rs-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 22px; margin-bottom: 26px;
}
.rs-cap {
  font-family: var(--display); font-stretch: 110%; font-weight: 750;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 8px;
}
.rs-head h2 { margin-bottom: 10px; }
.rs-stamp {
  flex: none; margin-top: 8px;
  border: 3px solid var(--red); border-radius: 8px; color: var(--red);
  font-family: var(--display); font-stretch: 116%; font-weight: 820;
  font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  text-align: center; line-height: 1.35;
  padding: 9px 16px; transform: rotate(-7deg);
  opacity: .85;
}
.rc-sub { font-size: 16.5px; color: var(--ink-soft); max-width: 46em; margin: 0; }
@media (max-width: 640px) {
  .rs-head { flex-direction: column-reverse; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
  .rs-stamp { margin-top: 0; font-size: 13px; padding: 7px 12px; transform: rotate(-5deg); align-self: flex-end; }
  .rate-sheet { padding: 20px 16px; }
}
.rc-grid { display: grid; gap: 2px 48px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .rc-grid { grid-template-columns: 1fr 1fr; } }
.rc-row {
  font: inherit; cursor: pointer; text-align: left;
  display: flex; align-items: baseline; gap: 12px;
  width: 100%; padding: 13px 10px;
  background: none; border: none; border-radius: 8px;
  transition: background .18s var(--ease);
}
.rc-row:hover { background: var(--paper); }
.rc-row:hover .rc-city { color: var(--red); }
.rc-city { font-weight: 700; font-size: 17px; color: var(--ink); white-space: nowrap; }
.rc-dots { flex: 1; border-bottom: 2px dotted #C9C3B4; transform: translateY(-4px); min-width: 24px; }
.rc-meta { font-size: 14.5px; color: var(--ink-soft); white-space: nowrap; }
.rc-price {
  font-family: var(--display); font-stretch: 116%; font-weight: 820;
  font-size: 20px; color: var(--red); white-space: nowrap;
  min-width: 74px; text-align: right;
}
@media (max-width: 480px) {
  /* узкий экран: цена справа, мили и дни второй строкой — лидеры не влезают */
  .rc-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 11px 14px; }
  .rc-dots { display: none; }
  .rc-city { font-size: 15.5px; }
  .rc-meta { font-size: 13px; grid-column: 1; }
  .rc-price { font-size: 18px; min-width: 0; grid-column: 2; grid-row: 1 / 3; align-self: center; }
}

/* FAQ в две колонки на десктопе */
.faq-cols { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .faq-cols { grid-template-columns: 1fr 1fr; gap: 14px 18px; } }
.faq-cols .faq-list { display: grid; gap: 14px; align-content: start; }

/* финальная форма на тонированном поле, как локатор на инвентаре */
.ship-ask { padding-top: clamp(36px, 4.4vw, 56px); }
main > section.ship-ask { padding-bottom: clamp(48px, 6vw, 72px); }
.ship-ask .ask-card { margin: 0 auto; }

/* hero прижат к шапке вплотную — графит начинается сразу под красной линией */
.ship-how .wrap { padding-top: var(--section); max-width: 860px; }
.ship-faq { background: var(--paper-tint); }
.ship-faq .wrap { padding-top: clamp(40px, 5.4vw, 64px); }
.ship-faq .sec-head { margin-bottom: 30px; }
.faq-more {
  display: flex; align-items: center; justify-content: center;
  gap: 10px 18px; flex-wrap: wrap;
  margin: 30px 0 0;
}
.faq-more span { font-size: 17px; color: var(--ink-soft); }
.faq-more .btn .ic { width: 16px; height: 16px; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 10px; max-width: 800px; }
.faq-list details {
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 2px 10px rgba(20, 23, 27, .06);
  padding: 0 22px;
}
.faq-list summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  font-family: var(--display); font-stretch: 110%; font-weight: 720;
  font-size: 17.5px; padding: 18px 0;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; flex: none;
  font-size: 24px; font-weight: 400; color: var(--red);
  transition: transform .2s var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin: 0; padding: 0 0 20px; color: #3A4148; font-size: 16.5px; }

.faq-cta { margin-top: 34px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.faq-cta p { margin: 0; font-weight: 600; }

/* ---------- WARRANTY ---------- */
.war-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; max-width: 40em; }
.war-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 16.5px; color: #3A4148; }
.war-list .ic { width: 19px; height: 19px; flex: none; margin-top: 4px; color: var(--red); }
.war-list li:nth-child(-n+2) .ic { color: #1E7B34; }

/* ---------- CONTACT ---------- */
.contact-rows { display: grid; gap: 12px; }
.contact-row {
  display: flex; gap: 16px; align-items: center;
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 2px 10px rgba(20, 23, 27, .06);
  padding: 18px 20px;
  color: var(--ink); text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
a.contact-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--ink); }
.cr-ic {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--red);
  display: flex; align-items: center; justify-content: center;
}
.cr-ic .ic { width: 21px; height: 21px; color: #fff; }
.contact-row b { font-size: 17.5px; }
/* длинный e-mail не влезает в 320px без переноса */
.contact-row > span { min-width: 0; overflow-wrap: anywhere; }

/* ---------- THANK YOU / 404 ---------- */
.ty-page .wrap { padding-top: clamp(40px, 6vw, 80px); }
.ty-card {
  max-width: 620px; margin: 0 auto; text-align: center;
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 2px 10px rgba(20, 23, 27, .07);
  padding: clamp(30px, 4vw, 52px);
}
.ty-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--red); margin-bottom: 20px;
}
.ty-check .ic { width: 28px; height: 28px; color: #fff; }
.ty-card h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.ty-card p { color: var(--ink-soft); max-width: 34em; margin: 0 auto 22px; }
.ty-card .mini-steps { text-align: left; max-width: 340px; margin: 0 auto 26px; }
.ty-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- LEGAL ---------- */
.legal .wrap { padding-top: 10px; }
.legal-body { max-width: 760px; }
.legal-body p { color: #3A4148; font-size: 16.5px; }
.legal-body h2 { font-size: 1.4rem; margin: 28px 0 10px; }

/* ---------- ABOUT ---------- */
.about-photos.v-photos { min-height: clamp(300px, 30vw, 420px); }
.about-facts { margin-top: 26px; }
.about-facts .m-fact b { color: var(--ink); }
.about-facts .m-fact span { color: var(--ink-soft); }

/* факты на светлом (financing strip) */
.fin-calc .wrap { padding-top: 10px; }
.ti .wrap { padding-top: 16px; }
.ti-note { margin-top: 20px; font-size: 15.5px; }
.war .wrap { padding-top: 16px; }
.about-body .wrap { padding-top: 16px; }
.contact .wrap { padding-top: 16px; }

/* ===== статус «открыто/закрыто» на светлом фоне (визит-карточки, контакты) ===== */
main .open-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; margin-right: 8px; }
main .open-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
main .open-status.is-open { color: #1E7A38; }
main .open-status.is-open::before { background: #1E7A38; }
main .open-status.is-closed { color: #5D656E; }
main .open-status.is-closed::before { background: #5D656E; }


/* ==========================================================================
   VDP — ЕДИНАЯ ТИПОГРАФИКА (аудит 04.09.2026)
   Блок стоит последним и правит всё, что приходит из общих компонентов.
   Шесть ступеней, три веса, три цвета текста. Ничего мельче 13px.
   ========================================================================== */

/* --- ступени --- */
.vdp .sec-kicker, .vdp .ac-tag, .vdp .ct-cap, .vdp .prc-cap, .vdp .ac-cap,
.vdp .ac-picks legend, .vdp .vp-head, .vdp .vp-row span, .vdp .vx-match,
.vdp .cc-tag, .vdp .dt-cap {
  font-family: var(--display); font-weight: 600; font-stretch: 100%;
  font-size: 13px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase;
}
.vdp .fine, .vdp .ship-facts span, .vdp .rq-meta, .vdp .dt-sub, .vdp .pr-note,
.vdp .credit-tile .dc-step small, .vdp .vx-count, .vdp .ac-hours,
.vdp .cc-meta, .vdp .vf-s, .vdp .form-note, .vdp .field .error, .vdp .vx-open {
  font-family: var(--body-font, inherit); font-weight: 400;
  font-size: 14px; line-height: 1.45;
}
.vdp p, .vdp li, .vdp .field label, .vdp .ac-picks .pick, .vdp .quiet-link,
.vdp .faq-a p, .vdp .ns-copy, .vdp .vx-row, .vdp .tl p, .vdp .how-intro p {
  font-size: 17px; line-height: 1.6;
}
.vdp .sec-sub, .vdp .vx-lede, .vdp .vx-here-copy { font-size: 19px; line-height: 1.5; }
.vdp h3, .vdp .vx-faq summary, .vdp .vf-t, .vdp .cc-link, .vdp .vx-here h2 {
  font-family: var(--display); font-weight: 700; font-stretch: 100%;
  font-size: 20px; line-height: 1.25; letter-spacing: 0;
}
.vdp .sec-head h2, .vdp .ask-card h2 {
  font-family: var(--display); font-weight: 700; font-stretch: 100%;
  font-size: 28px; line-height: 1.15; letter-spacing: -.01em;
}
/* крупные числа и титул — вне шкалы, это точки входа */
.vdp .vh-model { font-size: 34px; font-weight: 700; }
.vdp .vh-year, .vdp .vh-make { font-size: 20px; font-weight: 700; }
.vdp .prc-price { font-size: 34px; font-weight: 700; }
.vdp .prc-mo-big { font-size: 22px; font-weight: 700; }
.vdp .credit-tile .dc-mo { font-size: 36px; font-weight: 700; }
.vdp .ship-facts b, .vdp .rq-price, .vdp .dr-total b, .vdp .vp-row b,
.vdp .credit-tile .dc-step b, .vdp .pc-row b, .vdp .ct-term b {
  font-weight: 700; font-stretch: 100%;
}
.vdp .ship-facts b, .vdp .vp-row b { font-size: 20px; }
.vdp .rq-price, .vdp .dr-total b { font-size: 26px; }
.vdp .credit-tile .dc-step b, .vdp .pc-row b, .vdp .ct-term b { font-size: 17px; }
.vdp .btn { font-size: 17px; font-weight: 700; font-stretch: 100%; }
.vdp .btn-sm, .vdp .vdp-sticky .btn { font-size: 15px; }
.vdp, .vdp * { font-variant-numeric: tabular-nums; }
.vdp .vx-chap li, .vdp .faq-a p, .vdp p { font-variant-numeric: normal; }

/* --- цвета текста: три токена вместо пятнадцати --- */
.vdp p, .vdp li, .vdp .vx-chap li, .vdp .faq-a p, .vdp .ns-copy,
.vdp .tl p, .vdp .how-intro p, .vdp .vx-row { color: #454B52; }
.vdp .sec-sub, .vdp .vx-lede, .vdp .vx-here-copy { color: #454B52; }
.vdp .fine, .vdp .ship-facts span, .vdp .rq-meta, .vdp .cc-meta,
.vdp .form-note, .vdp .ac-hours, .vdp .sec-kicker, .vdp .ac-tag,
.vdp .ac-cap, .vdp .ac-picks legend, .vdp .vx-match { color: #5C636B; }
.vdp h3, .vdp .sec-head h2, .vdp .ask-card h2, .vdp .vx-faq summary,
.vdp .vx-here h2, .vdp .cc-link, .vdp .field label { color: var(--ink); }
/* на тёмном и красном — свои; ниже общих правил, чтобы перебивать их */
.vdp .credit-tile .fine, .vdp .credit-tile .pc-row span,
.vdp .credit-tile .ct-term span { color: rgba(255,255,255,.88); }
.vdp .credit-tile .ct-cap { color: rgba(255,255,255,.85); }
.vdp .credit-tile .dc-step small { color: rgba(255,255,255,.8); }
.vdp .credit-tile .dc-step.is-on small, .vdp .credit-tile .dc-step.is-on b { color: var(--red); }
.vdp .vf-t { color: #fff; }
.vdp .vf-s, .vdp .dt-sub { color: #B9BFC6; }
.vdp .dt-cap { color: #FF8A9B; }

/* --- красный только на действии и одном фирменном знаке --- */
.vdp .vx-chap li::before { background: #C9C4B8; }
.vdp .vx-faq summary::after {
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
}

/* --- заголовки: 3 «главы» по центру, остальные — рабочие, слева --- */
.vdp .vx-place .sec-kicker, .vdp .vx-faq .sec-kicker,
.vdp .vx-ask .sec-kicker, .vdp .vx-similar .sec-kicker { display: none; }
.vdp .vx-place .sec-head, .vdp .vx-faq .sec-head,
.vdp .vx-ask .sec-head, .vdp .vx-similar .sec-head { text-align: left; margin-bottom: 20px; }
.vdp .vx-place .sec-head h2::before, .vdp .vx-faq .sec-head h2::before,
.vdp .vx-ask .sec-head h2::before, .vdp .vx-similar .sec-head h2::before { display: none; }
.vdp .vx-faq .sec-head .dot, .vdp .vx-ask .sec-head .dot,
.vdp .vx-similar .sec-head .dot, .vdp .vx-place .sec-head .dot { display: none; }

/* --- описание: аннотация сверху, две главы открыты, остальное в раскрывашке --- */
.vx-lede { margin: 0 0 26px; padding-left: 16px; border-left: 3px solid var(--red); }
.vdp .vx-chap { margin-bottom: 34px; }
.vdp .vx-chap h3 { margin-bottom: 15px; }
.vdp .vx-chap ul { gap: 12px; }
.vx-more { margin-top: 8px; }
.vx-more > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 58px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper-tint);
  font-family: var(--display); font-stretch: 100%; font-weight: 700;
  font-size: 17px; color: var(--ink);
}
.vx-more > summary::-webkit-details-marker { display: none; }
.vx-more > summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease);
}
.vx-more[open] > summary { margin-bottom: 24px; }
.vx-more[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.vx-more-body .vx-chap:last-child { margin-bottom: 0; }

/* --- похожие: компактные строки вместо карточек в полный рост --- */
@media (max-width: 760px) {
  /* компактнее по высоте, но структуру карточки не ломаем: фото ниже,
     кнопки убраны — на них есть липкая плашка и вся карточка кликабельна */
  .vx-similar .car-grid { gap: 12px; }
  /* высоту задаёт контейнер (у него aspect-ratio 4/3), а не картинка —
     иначе под кадром остаётся пустота и ценник висит в воздухе */
  .vx-similar .car-card .cc-photo { aspect-ratio: 16 / 9; }
  .vx-similar .car-card .cc-body { padding: 22px 16px 16px; }
  .vx-similar .car-card .cc-actions { display: none; }
}
/* у рабочих заголовков (без кикера) черта не нужна — она вводила
   ложную симметрию с «главами» */
.vdp .vx-place .sec-head::before, .vdp .vx-faq .sec-head::before,
.vdp .vx-ask .sec-head::before, .vdp .vx-similar .sec-head::before { display: none; }

/* 320px: ярус цены и кино-карточка не должны распирать колонку */
@media (max-width: 360px) {
  .vdp .prc-price { font-size: 30px; }
  .vdp .prc-mo-big { font-size: 19px; }
  .vx-price { gap: 12px; padding-left: 14px; padding-right: 14px; }
  .vx-film { padding: 12px 12px 16px; }
  .vx-film > * { min-width: 0; max-width: 100%; }
}

/* --- ДОСТАВКА и КРЕДИТ: «один вопрос — один ответ» ---
   Ленту из трёх цифр, абзац-объяснение и ползунок взноса убрали:
   человек путался, где цена машины, где доставка, где платёж.
   Осталось действие (ZIP / выбор срока) и ответ. */
.vdp .nc-q {
  margin: 0 0 14px;
  font-family: var(--display); font-weight: 700; font-stretch: 100%;
  font-size: 20px; line-height: 1.25; color: var(--ink);
}
.vdp .credit-tile .nc-q { color: #fff; }
.vdp .credit-tile .nc-q .dot { color: #fff; }
.vdp .nc-note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: #5C636B; }
.vdp .num-ship .dr-zip input { min-height: 56px; font-size: 17px; }
.vdp .num-ship .dr-zip .btn { min-height: 56px; padding-left: 22px; padding-right: 22px; }

/* калькулятор: взнос вписывается руками или кнопками шага */
.ct-stepper { display: flex; align-items: stretch; gap: 8px; }
.st-btn {
  flex: none; width: 54px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 10px;
  background: transparent; color: #fff; cursor: pointer;
  font-size: 26px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.st-btn:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.st-btn:active { background: rgba(255,255,255,.24); }
.st-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px;
  background: #fff; border-radius: 10px; padding: 0 14px; min-height: 58px;
}
.st-cur, .st-field input {
  font-family: var(--display); font-weight: 700; font-stretch: 100%;
  font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.st-field input {
  flex: 1; min-width: 0; width: 100%; border: none; outline: none;
  background: transparent; padding: 0; min-height: 0;
}
.ct-hint { margin: 10px 0 20px; font-size: 14px; line-height: 1.5; color: #B9BFC6; }
.ct-out {
  display: flex; align-items: baseline; gap: 8px;
  margin: 4px 0 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.3);
}
.vdp .credit-tile .dc-note { font-size: 17px; color: rgba(255,255,255,.85); }
.vdp .ct-pick {
  margin: 0 0 10px; font-family: var(--display); font-weight: 600; font-stretch: 100%;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8);
}
.vdp .credit-tile .dc-ladder { margin-bottom: 14px; }
.vdp .credit-tile .dc-step { padding: 10px 4px 11px; }

/* калькулятор графитовый: красная плита била в глаза, а красный нужен
   кнопкам. Тёмная плита спокойнее и в одном языке с плашкой и футером. */
.vdp .credit-tile {
  background: var(--deep);
  box-shadow: 0 10px 30px rgba(20, 23, 27, .18);
}
.vdp .credit-tile .dc-mo { color: #fff; }
.vdp .credit-tile .dc-step { border-color: rgba(255,255,255,.32); }
.vdp .credit-tile .dc-step:hover { border-color: #fff; }
.vdp .credit-tile .dc-step.is-on { background: var(--red); border-color: var(--red); }
.vdp .credit-tile .dc-step.is-on small { color: rgba(255,255,255,.85); }
.vdp .credit-tile .dc-step.is-on b { color: #fff; }
.vdp .credit-tile .fine a { color: #fff; }
.st-btn { border-color: rgba(255,255,255,.4); }

.vdp .ct-hint { font-size: 14px; color: #B9BFC6; }

/* --- ПОРЯДОК БЛОКОВ (аудит): «что это и сколько» → «докажите, что
   машина и вы настоящие» (видео + адрес) → подробности → деньги →
   как проходит сделка → вопросы → заявка → другие машины.
   Доказательства стояли пятым-шестым экраном, куда доходила половина. */
.vx-proof { background: var(--paper-tint); }
.vx-proof .wrap { padding-top: clamp(30px, 3.8vw, 48px); }
.vdp section.vx-proof { padding-bottom: 0; }
.vx-proof .vx-film { margin-top: 0; }
.vdp .vx-place .wrap { padding-top: clamp(30px, 3.8vw, 48px); }
.vdp .vx-story { background: var(--paper); }
.vdp .vx-story .wrap { padding-top: clamp(38px, 4.6vw, 60px); }

/* proof и place стояли двумя тинтами подряд и сливались в один длинный
   блок — разводим по принятому чередованию paper/tint */
.vdp .vx-place { background: var(--paper); }
.vdp .vx-story { background: var(--paper-tint); }
.vdp .vx-numbers { background: var(--paper); }


/* ==========================================================================
   VDP — перестройка по замечаниям заказчика (порядок и плотность)
   Порядок: первый экран → описание → видео → где стоит → доставка →
   финансирование → FAQ → похожие → форма. Таймлайн «How buying works»
   удалён целиком.
   ========================================================================== */

/* --- описание: каждая глава раскрывается отдельно, первые две открыты --- */
.vdp .vx-chap {
  margin: 0 0 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.vdp .vx-chap > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 58px; padding: 0 18px;
  font-family: var(--display); font-weight: 700; font-stretch: 100%;
  font-size: 18px; color: var(--ink);
}
.vdp .vx-chap > summary::-webkit-details-marker { display: none; }
.vdp .ch-n {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
  background: var(--paper-tint); color: #4A5058;
  font-family: var(--body); font-size: 13px; font-weight: 700;
}
.vdp .vx-chap > summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-left: -4px;
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease);
}
.vdp .vx-chap[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.vdp .vx-chap[open] > summary { border-bottom: 1px solid var(--line); }
.vdp .ch-body { padding: 16px 18px 18px; }
.vdp .vx-chap ul { display: grid; gap: 11px; }
.vdp .vx-lede { margin-bottom: 22px; }

/* --- доставка и финансирование: две отдельные секции-шага --- */
.vdp .vx-delivery { background: var(--paper); }
.vdp .vx-credit { background: var(--paper-tint); }
.vdp .vx-delivery .wrap, .vdp .vx-credit .wrap { padding-top: clamp(32px, 4vw, 52px); }
.vdp section.vx-delivery, .vdp section.vx-credit { padding-bottom: 0; }
.vdp .vx-delivery .sec-head, .vdp .vx-credit .sec-head { margin-bottom: 18px; }
.vdp .vx-credit .credit-tile { margin-bottom: 0; }

/* --- FAQ компактнее: восемь вопросов не должны занимать полтора экрана --- */
.vdp .vx-faq .faq-item { border-radius: 8px; }
.vdp .vx-faq summary { min-height: 56px; padding: 14px 18px; font-size: 17px; }
.vdp .vx-faq summary::after { width: 26px; height: 26px; background-size: 11px 2px, 2px 11px; }
.vdp .vx-faq .faq-a { padding: 0 18px 18px; }
.vdp .vx-faq .vdp-faq-list { gap: 8px; }

/* --- форма компактнее: она закрывает страницу, а не открывает --- */
.vdp .vx-ask .ask-card { padding: clamp(20px, 3vw, 30px); }
.vdp .vx-ask .ask-card h2 { font-size: 24px; }
.vdp .vx-ask .form-note { margin-bottom: 16px; }
.vdp .vx-ask .field { margin-bottom: 12px; }
.vdp .vx-ask .field input, .vdp .vx-ask .field textarea { min-height: 52px; }
.vdp .vx-ask .field textarea { min-height: 84px; }
.vdp .vx-ask .ac-picks { margin-bottom: 12px; }
.vdp .vx-ask .ac-picks .pick { padding: 3px 0; }
@media (max-width: 760px) {
  .vdp .vx-ask .ask-card { border-radius: 0; box-shadow: none; border-top: 1px solid var(--line);
    margin-left: calc(-1 * clamp(18px, 4vw, 32px)); margin-right: calc(-1 * clamp(18px, 4vw, 32px)); }
}

/* телефон в форме дублирует липкую плашку, которая физически под ней —
   на VDP корешок с телефоном не нужен */
.vdp .vx-ask .ac-side { display: none; }
.vdp .vx-ask .ac-grid { grid-template-columns: 1fr; gap: 0; }
.vdp .vx-ask .ask-card { max-width: 640px; }
.vdp .vx-ask .field-row { gap: 12px; }

/* точка входа после калькулятора: человек посчитал платёж — тут и решают.
   Раньше эту роль играли кнопки таймлайна, он удалён. */
.vx-after { margin-top: 22px; text-align: center; }
.vx-after p {
  margin: 0 0 14px; font-family: var(--display); font-weight: 700; font-stretch: 100%;
  font-size: 18px; color: var(--ink);
}
.vx-after-btns { display: grid; gap: 10px; }
.vx-after-btns .btn { min-height: 54px; }
.vx-after-btns .btn .ic { width: 16px; height: 16px; }
@media (min-width: 700px) {
  .vx-after-btns { grid-auto-flow: column; justify-content: center; }
  .vx-after-btns .btn { padding-left: 26px; padding-right: 26px; }
}

@media (max-width: 360px) {
  .vx-after-btns .btn { padding-left: 12px; padding-right: 12px; font-size: 15px; white-space: normal; line-height: 1.25; }
}


/* --- раскрывашки глав: счётчик прижат к стрелке, а не болтается
   посередине (был space-between на трёх элементах) --- */
.vdp .vx-chap > summary { justify-content: flex-start; gap: 12px; }
.vdp .ch-t { flex: 1; min-width: 0; }
.vdp .ch-n { margin-left: auto; }

/* --- видео как часть описания: светлая карточка в цвет листа,
   красный только на кнопке Play и CTA --- */
.vdp .vx-story .vx-film {
  margin: 22px 0 0; padding: 0; background: transparent;
  display: block; border-top: 1px solid var(--line); padding-top: 22px;
}
.vdp .vx-story .vf-frame {
  width: 100%; border-radius: 10px; overflow: hidden; margin-bottom: 16px;
}
.vdp .vx-story .vf-frame img { height: clamp(170px, 46vw, 220px); }
.vdp .vx-story .vf-frame::after { background: rgba(10, 11, 13, .22); }
.vdp .vx-story .vf-play {
  width: 62px; height: 62px;
  box-shadow: 0 4px 18px rgba(200, 16, 46, .45);
}
.vdp .vx-story .vf-copy { padding: 0; margin-bottom: 16px; }
.vdp .vx-story .vf-t { color: var(--ink); font-size: 20px; margin-bottom: 6px; }
.vdp .vx-story .vf-s { color: #454B52; font-size: 15px; }
.vdp .vx-story .vf-btn { width: 100%; }
@media (min-width: 760px) {
  .vdp .vx-story .vx-film {
    display: grid; grid-template-columns: 280px 1fr; gap: 20px 24px; align-items: center;
  }
  .vdp .vx-story .vf-frame { margin-bottom: 0; }
  .vdp .vx-story .vf-frame img { height: 170px; }
  .vdp .vx-story .vf-copy { margin-bottom: 0; }
  .vdp .vx-story .vf-btn { grid-column: 2; width: auto; justify-self: start; }
}


/* --- форма компактнее: 824px на мобиле — это экран целиком под анкету.
   Ужимаем поля, зазоры между группами и заголовок. --- */
.vdp .vx-ask .ask-card h2 { font-size: 22px; margin-bottom: 4px; }
.vdp .vx-ask .ac-tag { margin-bottom: 6px; }
.vdp .vx-ask .form-note { margin-bottom: 14px; font-size: 15px; }
.vdp .vx-ask .ac-grid { margin-top: 0; }
.vdp .vx-ask .field { margin-bottom: 10px; }
.vdp .vx-ask .field label { font-size: 15px; margin-bottom: 2px; }
.vdp .vx-ask .field input { min-height: 48px; }
.vdp .vx-ask .field textarea { min-height: 72px; }
.vdp .vx-ask .field-row { gap: 10px; margin-bottom: 0; }
.vdp .vx-ask .ac-picks { margin-bottom: 12px; }
.vdp .vx-ask .ac-picks legend { margin-bottom: 6px; }
.vdp .vx-ask .ac-picks .pick { padding: 2px 0; font-size: 15.5px; }
.vdp .vx-ask .ask-card .btn { min-height: 54px; }
.vdp section.vx-ask { padding-bottom: clamp(28px, 3.4vw, 44px); }
.vdp .vx-ask .wrap { padding-top: clamp(30px, 3.6vw, 48px); }


/* ==========================================================================
   ДОСТАВКА И ПЛАТЁЖ — два самостоятельных блока, а не две плитки подряд
   ========================================================================== */

/* карта зон доставки: тот же приём, что на главной и Shipping, но на
   светлом фоне — точки темнее, иначе их не видно */
.ship-map {
  margin: 0 0 -22px; padding: 0 6px;
  position: relative; z-index: 0;
}
.ship-map svg { width: 100%; height: auto; display: block; }
/* тёмные точки — только для светлой карты в рельсе VDP; голое
   «.ship-map» ловило тёмный hero шипинга (его секция тоже .ship-map)
   и точки штатов пропадали на графите */
.vx-colR .ship-map .map-dot { fill: rgba(20, 23, 27, .16); }
.ship-map .map-home { fill: var(--red); }
.ship-map .map-home-ring { fill: none; stroke: var(--red); stroke-width: 2; opacity: .5; }
.ship-map .map-route { stroke: var(--red); stroke-width: 2.5; fill: none; stroke-dasharray: 6 5; }
.ship-map .map-dest { fill: var(--red); stroke: #fff; stroke-width: 2; }

/* карточка расчёта поверх карты — как квитанция, положенная на стол */
.vdp .vx-delivery .num-ship {
  position: relative; z-index: 1;
  max-width: 560px; margin: 0 auto;
  border: 1px solid var(--line);
  box-shadow: 0 6px 26px rgba(20, 23, 27, .1);
}
.vdp .vx-delivery { background: var(--paper-tint); }
.vdp .vx-credit { background: var(--paper); }
.vdp .vx-credit .credit-tile { max-width: 560px; margin: 0 auto; }
@media (max-width: 760px) {
  .vdp .vx-delivery .num-ship {
    margin-left: 0; margin-right: 0; border-radius: 12px;
    box-shadow: 0 6px 26px rgba(20, 23, 27, .12); border-top: 1px solid var(--line);
  }
  .vdp .vx-credit .credit-tile { margin-left: 0; margin-right: 0; border-radius: 12px; }
  .ship-map { margin-bottom: -18px; padding: 0; }
}


/* --- заголовки секций по левому краю: центр на длинной странице
   заставляет глаз каждый раз возвращаться в середину --- */
.vdp .sec-head { text-align: left; margin-bottom: 20px; }
.vdp .sec-head::before { margin-left: 0; }
.vdp .sec-head h2 { margin-left: 0; margin-right: 0; }
.vdp .sec-head .sec-sub { margin-left: 0; margin-right: 0; max-width: 46ch; }
.vdp .vx-story .sec-head, .vdp .vx-delivery .sec-head,
.vdp .vx-credit .sec-head { text-align: left; }


/* --- ДВА ШАГА: номер в круге + связь между блоками.
   Раньше это были две одинаковые секции с кикером «Step one/two» —
   читались как случайные соседи, а не как последовательность. --- */
.step-head {
  position: relative; display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 20px;
}
.step-n {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--deep); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-stretch: 100%;
  font-size: 21px; line-height: 1;
  box-shadow: 0 3px 12px rgba(20, 23, 27, .22);
}
.step-cap {
  margin: 0 0 2px; font-family: var(--display); font-weight: 600; font-stretch: 100%;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--red);
}
.step-head h2 { margin: 0; font-size: 28px; line-height: 1.15; }
/* пунктир от первого шага ко второму — та же дорога, что в таймлайне */
.vdp .vx-delivery .step-head::before {
  content: ""; position: absolute; left: 22px; top: 52px; bottom: -30px;
  width: 2px; background: repeating-linear-gradient(#C9C4B8 0 6px, transparent 6px 12px);
  z-index: 0;
}
.vdp .vx-delivery .step-n, .vdp .vx-credit .step-n { position: relative; z-index: 1; }
.vdp .vx-credit .step-n { background: var(--red); box-shadow: 0 3px 12px rgba(200, 16, 46, .3); }

/* фоны: доставка на бумаге, платёж на тинте — шаги отличимы */
.vdp .vx-delivery { background: var(--paper); }
.vdp .vx-credit { background: var(--paper-tint); }
.vdp .vx-delivery .num-ship { background: #fff; }


/* --- калькулятор: белая карта вместо тёмной плиты. Тёмное пятно посреди
   светлой страницы читалось как чужая вставка; красный оставляем
   выбранному сроку и сумме платежа. --- */
.vdp .credit-tile {
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 6px 26px rgba(20, 23, 27, .1);
}
.vdp .credit-tile .nc-q, .vdp .credit-tile .nc-q .dot { color: var(--ink); }
.vdp .credit-tile .ct-pick { color: var(--c-mute, #5C636B); }
.vdp .credit-tile .dc-mo { color: var(--red); }
.vdp .credit-tile .dc-note { color: #5C636B; }
.vdp .credit-tile .ct-hint { color: #5C636B; }
.vdp .credit-tile .fine { color: #5C636B; }
.vdp .credit-tile .fine a { color: var(--ink); }
.vdp .credit-tile .ct-out { border-top-color: var(--line); }
/* поле взноса на белом — тонированное, чтобы читалось как поле ввода */
.st-field { background: var(--paper-tint); border: 1.5px solid var(--line); }
.st-btn { border-color: var(--line); color: var(--ink); }
.st-btn:hover { background: var(--paper-tint); border-color: var(--ink); }
.st-btn:active { background: #E6E2D8; }
/* чипы сроков: контурные на белом, выбранный — красный */
.vdp .credit-tile .dc-step { border-color: var(--line); background: #fff; }
.vdp .credit-tile .dc-step small { color: #5C636B; }
.vdp .credit-tile .dc-step b { color: var(--ink); }
.vdp .credit-tile .dc-step:hover { border-color: var(--ink); }
.vdp .credit-tile .dc-step.is-on { background: var(--red); border-color: var(--red); }
.vdp .credit-tile .dc-step.is-on small { color: rgba(255,255,255,.9); }
.vdp .credit-tile .dc-step.is-on b { color: #fff; }


/* --- CTA после расчёта доставки: не два тяжёлых блока во всю ширину,
   а тихая строка-вопрос и компактная пара кнопок --- */
.ns-ctas { display: block; margin: 4px 0 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.ns-ask {
  margin: 0 0 10px; font-family: var(--display); font-weight: 700; font-stretch: 100%;
  font-size: 16px; color: var(--ink);
}
.ns-pair { display: flex; gap: 8px; }
.vdp .ns-pair .btn {
  min-height: 46px; font-size: 15px; padding-left: 16px; padding-right: 16px;
  white-space: normal; line-height: 1.2;
}
.vdp .ns-pair .btn-red { flex: none; }
.vdp .ns-pair .btn-ghost { flex: 1; }
.vdp .ns-pair .btn .ic { width: 15px; height: 15px; }
@media (max-width: 360px) {
  .ns-pair { flex-direction: column; }
  .vdp .ns-pair .btn { width: 100%; }
}


/* CTA после расчёта — как были: две полноширинные кнопки */
.vdp .ns-ctas { display: grid; gap: 10px; margin: 0 0 14px; padding-top: 0; border-top: none; }
.vdp .ns-ctas .btn { min-height: 52px; font-size: 16px; }

/* --- итог «всё вместе у двери»: чёрная плита выглядела грубо.
   Светлая карточка с красной боковой линией: сумма читается как
   выделенная строка счёта, а не как ещё одно тёмное пятно. --- */
.vdp .dr-total {
  background: var(--paper-tint);
  border-left: 4px solid var(--red); border-radius: 0 10px 10px 0;
  padding: 14px 18px 15px;
}
.vdp .dr-total .dt-cap { color: var(--red); }
.vdp .dr-total b { color: var(--ink); font-size: 28px; }
.vdp .dr-total .dt-sub { color: #5C636B; }


/* --- КВИТАНЦИЯ и ИТОГ: были двумя одинаковыми тинтовыми плитками,
   сливались в одно пятно. Квитанция — белый отрывной чек, итог —
   тонированная строка счёта с крупной суммой. --- */
.vdp .ns-quote.show {
  background: #fff; border: 1.5px dashed #C9C4B8; border-radius: 10px;
  padding: 16px 18px;
}
.vdp .rq-route { margin-bottom: 12px; }
.vdp .rq-price { margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; }
.vdp .rq-price small { font-size: 15px; font-weight: 700; color: #5C636B; margin: 0; }
/* факты — тремя парами, а не строкой в три переноса */
.rq-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.rq-facts div { min-width: 0; }
.rq-facts dt {
  font-family: var(--display); font-weight: 600; font-stretch: 100%;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #6E757D;
  margin-bottom: 3px;
}
.rq-facts dd {
  margin: 0; font-family: var(--display); font-weight: 700; font-stretch: 100%;
  font-size: 16px; color: var(--ink); white-space: nowrap;
}

/* итог: подпись спокойным серым, сумма крупно графитом */
.vdp .dr-total {
  background: var(--paper-tint); border-left: 4px solid var(--red);
  border-radius: 0 10px 10px 0; padding: 15px 18px 16px;
}
.vdp .dr-total .dt-cap { color: #5C636B; letter-spacing: .14em; }
.vdp .dr-total b { color: var(--ink); font-size: 32px; line-height: 1.05; }
.vdp .dr-total .dt-sub { color: #5C636B; font-size: 14px; }


/* маршрут в одну строку: города переносились, грузовик сплющивался */
.vdp .rq-route { gap: 8px; font-size: 15px; align-items: center; }
.vdp .rq-route span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdp .rq-route span:first-child { flex: none; }
.vdp .rq-route span:last-child { flex: 1; min-width: 0; text-align: right; }
.vdp .rq-route i { flex: none; width: 18px; min-width: 18px; }
.vdp .rq-route .ic { width: 19px; height: 19px; }
/* факты: подписи ровно в строку, значения по общей базовой линии */
.rq-facts { gap: 8px; align-items: start; }
.rq-facts dt { white-space: nowrap; font-size: 11px; }
.rq-facts dd { font-size: 15.5px; }
@media (max-width: 360px) {
  .vdp .rq-route { font-size: 14px; }
  .rq-facts dd { font-size: 14.5px; }
}


/* --- ИЕРАРХИЯ В БЛОКЕ ДОСТАВКИ ---
   Была сбита: цена доставки шла тем же кеглем, что подписи, а метки
   падали до 11px. Лестница: 20 вопрос → 26 цена доставки → 16 маршрут
   и значения → 14 условия и расшифровка → 12 капс-метки → 32 итог. */
.vdp .num-ship .nc-q { font-size: 20px; margin-bottom: 12px; }
.vdp .num-ship .nc-note { font-size: 14px; line-height: 1.5; }
.vdp .rq-route { font-size: 16px; }
.vdp .rq-price { font-size: 26px; line-height: 1.05; color: var(--red); }
.vdp .rq-price small { font-size: 14px; color: #5C636B; font-weight: 600; }
.vdp .rq-facts dt { font-size: 12px; letter-spacing: .09em; color: #6E757D; }
.vdp .rq-facts dd { font-size: 16px; }
.vdp .dr-total .dt-cap { font-size: 12px; }
.vdp .dr-total b { font-size: 32px; }
.vdp .dr-total .dt-sub { font-size: 14px; margin-top: 2px; }
.vdp .ns-ctas .btn { font-size: 16px; }


/* на телефоне пунктиры маршрута съедали место и город обрезался
   многоточием — оставляем города и грузовик между ними */
@media (max-width: 560px) {
  .vdp .rq-route i { display: none; }
  .vdp .rq-route { justify-content: space-between; gap: 10px; }
  .vdp .rq-route span:last-child { text-align: right; }
  .vdp .rq-route span { overflow: visible; text-overflow: clip; }
}


/* ==========================================================================
   ИЕРАРХИЯ КРУПНОГО ТЕКСТА — финальная.
   Было: титул машины 34, платёж 36, цена 34, итог 32, H2 28, кнопки ±26.
   Название машины оказалось МЕЛЬЧЕ платежа, четыре цифры дрались за
   внимание. Теперь у каждого уровня одна работа:
     34  название машины           — единственное на странице
     30  цена машины               — главная цифра сделки
     26  заголовки секций (H2)
     23  результаты расчётов       — платёж и итог, между собой равны
     20  заголовки карточек и блоков
     18  подзаголовки глав описания
     17  текст
   ========================================================================== */
.vdp .vh-model { font-size: 34px; line-height: 1.04; }
.vdp .prc-price { font-size: 30px; }
.vdp .sec-head h2, .vdp .step-head h2, .vdp .ask-card h2 { font-size: 26px; }
.vdp .credit-tile .dc-mo { font-size: 23px; }
.vdp .dr-total b { font-size: 23px; }
.vdp .rq-price { font-size: 20px; }
.vdp .nc-q, .vdp h3, .vdp .vx-faq summary, .vdp .cc-link,
.vdp .vx-here h2 { font-size: 20px; }
.vdp .vx-chap > summary { font-size: 18px; }
.vdp .vx-lede, .vdp .sec-sub, .vdp .vx-here-copy { font-size: 18px; }
/* служебные символы не должны быть крупнее заголовков */
.st-btn { font-size: 22px; }
.st-cur, .st-field input { font-size: 20px; }
.vdp .step-n { font-size: 19px; }
.vdp .credit-tile .dc-step b { font-size: 16px; }
.vdp .vx-similar .cc-tag { font-size: 17px; }
.vdp .ship-facts b, .vdp .vp-row b { font-size: 17px; }

/* добивка: платёж в бирке-ценнике не спорит с ценой, цена в карточке
   похожей машины не спорит с ценой этой, заголовок формы = H2 секций */
.vdp .prc-mo-big { font-size: 20px; }
.vdp .car-card .cc-tag, .vdp .car-card .cc-tag .now { font-size: 17px; }
.vdp .vx-ask .ask-card h2 { font-size: 26px; }


/* --- иерархия внутри квитанции: главная цифра блока — ИТОГ, а не цена
   доставки. Раньше маршрут и цена шли одним кеглем (17), а красная
   $1,400 перекрикивала графитовый итог. Теперь:
     28 итог у двери (главное) → 20 цена доставки → 16 маршрут и факты.
   Красный в блоке остаётся грузовику, линии итога и кнопке Call. --- */
.vdp .rq-route { font-size: 16px; }
.vdp .rq-route span { font-size: 16px; }
.vdp .rq-price { font-size: 20px; color: var(--ink); }
.vdp .rq-price small { font-size: 14px; color: #5C636B; }
.vdp .rq-facts dd { font-size: 16px; }
.vdp .dr-total { padding: 16px 18px 17px; }
.vdp .dr-total b { font-size: 28px; letter-spacing: -.01em; }
.vdp .dr-total .dt-cap { font-size: 12px; margin-bottom: 3px; }

/* .rq-price — div, и его перебивало общее «.ns-quote div: 17px».
   Правило с тем же весом ниже по файлу не помогает — нужен вес выше. */
.vdp .ns-quote .rq-price { font-size: 20px; color: var(--ink); }
.vdp .ns-quote .rq-route { font-size: 16px; }
.vdp .ns-quote .rq-price small { font-size: 14px; color: #5C636B; }


/* --- калькулятор: итог — главная цифра карточки ---
   Заголовок «Or pay monthly» дублировал «PAYMENT / Paying for it» и
   был третьим заголовком подряд об одном. Сумма платежа стояла 23px
   при 16px в чипе — итог читался как повтор, а не как результат. */
.vdp .credit-tile { padding-top: clamp(20px, 2.4vw, 26px); }
.vdp .credit-tile .ct-out {
  margin: 2px 0 10px; padding-top: 18px; border-top: 1px solid var(--line);
  align-items: baseline; gap: 10px;
}
.vdp .credit-tile .dc-mo { font-size: 30px; line-height: 1; }
.vdp .credit-tile .dc-note { font-size: 15px; color: #5C636B; }
.vdp .credit-tile .dc-step b { font-size: 16px; }
.vdp .credit-tile .dc-step small { font-size: 12px; }


/* --- калькулятор, финальная раскладка ---
   Результат встал наверх (ради него всё и крутится), под ним условие
   строкой. Чипы показывают только срок и стоят одним ровным рядом:
   пять сумм в чипах плюс итог давали шесть цифр в одной карточке. */
.vdp .credit-tile .ct-out {
  margin: 0 0 4px; padding-top: 0; border-top: none;
  align-items: baseline; gap: 8px;
}
.vdp .credit-tile .dc-mo { font-size: 34px; line-height: 1; }
.vdp .credit-tile .dc-note { font-size: 16px; color: #5C636B; }
.vdp .ct-under {
  margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.5; color: #5C636B;
}
.vdp .ct-under b { color: var(--ink); font-weight: 700; }
.vdp .ct-hint { margin: 8px 0 18px; font-size: 14px; color: #6E757D; }

/* пять сроков — один ровный ряд вместо рваной сетки 3+2 */
.vdp .credit-tile .dc-ladder {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 0 16px;
}
.vdp .credit-tile .dc-step {
  padding: 10px 2px 9px; gap: 0; border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.vdp .credit-tile .dc-step b { font-size: 17px; line-height: 1.1; }
.vdp .credit-tile .dc-step small { font-size: 11.5px; letter-spacing: .06em; }


/* --- блок «где стоит машина» ---
   Заголовок шёл 20px против 26px у соседних секций — раздел выглядел
   карточкой. Телефон был текстом, а не ссылкой: на телефоне номер
   видно, позвонить нельзя. Ссылка «See who we are» уводила с карточки
   товара — единственный допустимый выход отсюда это звонок. */
.vdp .vx-here h2 { font-size: 26px; line-height: 1.15; margin-bottom: 10px; }
.vdp .vx-here-copy { font-size: 17px; margin-bottom: 20px; }
.vx-tel { color: var(--ink); text-decoration-color: var(--red); text-underline-offset: 3px; }
.vx-tel:hover { color: var(--red); }
.vx-tel b { font-weight: 700; }
/* «Open now» — статусный зелёный: светлый не добирал контраст на белом */
.vdp .open-status { color: #1E7F3C; }


/* --- карта дилера вместо фото зала ---
   Встроенная Google-карта: адрес проверяется в один тап, а не на слово.
   Ленивая загрузка — iframe не тормозит первый экран. */
.vx-map { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--paper-tint); }
.vx-map iframe {
  display: block; width: 100%; height: 100%; min-height: 260px;
  aspect-ratio: 3 / 2; border: 0;
}
.vx-map-go {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ink); border-radius: 999px;
  padding: 10px 16px; font-size: 14px; font-weight: 700;
  box-shadow: 0 3px 12px rgba(20, 23, 27, .22);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.vx-map-go .ic { width: 15px; height: 15px; color: var(--red); }
.vx-map-go:hover { background: var(--red); color: #fff; }
.vx-map-go:hover .ic { color: #fff; }
@media (max-width: 760px) {
  .vx-map {
    border-radius: 0;
    margin-left: calc(-1 * clamp(18px, 4vw, 32px));
    margin-right: calc(-1 * clamp(18px, 4vw, 32px));
  }
  .vx-map iframe { min-height: 240px; aspect-ratio: 16 / 11; }
  .vx-map-go { left: clamp(18px, 4vw, 32px); }
}

.vx-map-go { text-decoration: none; }


/* --- значок раскрывашки: в псевдоэлементе сидел текстовый «+», а поверх
   рисовались два градиента — символ и рисунок накладывались друг на
   друга. Оставляем только рисунок. --- */
.vdp .vx-faq summary::after { content: ""; }

/* --- красная точка возвращается во все заголовки секций: это фирменный
   знак сайта, скрывать его в части блоков было ошибкой --- */
.vdp .sec-head .dot, .vdp .step-head .dot, .vdp .vx-here h2 .dot { display: inline; color: var(--red); }

/* --- FAQ: вопрос 18px вместо 20 (в 20 почти каждый лез в две строки),
   карточки плотнее --- */
.vdp .vx-faq summary { font-size: 18px; min-height: 54px; padding: 14px 16px; gap: 14px; }
.vdp .vx-faq .faq-a { padding: 0 16px 18px; }
.vdp .vx-faq .faq-a p { font-size: 16.5px; line-height: 1.65; }
.vdp .vx-faq .vdp-faq-list { gap: 8px; }
.vdp .vx-faq summary::after { width: 28px; height: 28px; }

/* точки у FAQ и «похожих» гасило раннее правило скрытия — возвращаем
   выше по весу: красная точка есть у каждого заголовка секции */
.vdp .vx-faq .sec-head h2 .dot, .vdp .vx-similar .sec-head h2 .dot,
.vdp .vx-ask .sec-head h2 .dot, .vdp .vx-place .sec-head h2 .dot { display: inline; }


/* --- замыкающая карточка списка вопросов ---
   Была строка по центру с телефоном, который рвался дефисом на две
   строки и дублировал липкую плашку. Теперь карточка в ритме списка:
   ведёт к полному FAQ, звонок остаётся за плашкой. */
.faq-more {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 14px; margin-top: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 16px 17px; text-decoration: none;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.faq-more:hover { border-color: var(--ink); transform: translateY(-1px); }
.fm-t {
  grid-column: 1; font-family: var(--display); font-weight: 700; font-stretch: 100%;
  font-size: 18px; color: var(--ink);
}
.fm-s { grid-column: 1; font-size: 15px; color: #5C636B; }
.fm-go {
  grid-column: 2; grid-row: 1 / span 2;
  width: 38px; height: 38px; border-radius: 50%; background: var(--paper-tint);
  display: flex; align-items: center; justify-content: center;
}
.fm-go .ic { width: 15px; height: 15px; color: var(--ink); }
.faq-more:hover .fm-go { background: var(--red); }
.faq-more:hover .fm-go .ic { color: #fff; }


/* --- карточки похожих машин ---
   Ценник был позиционирован под фото 4:3 и после смены кадра на 16:9
   свисал на 11px ниже снимка — читалось как сломанная вёрстка. Теперь
   он прижат к нижнему краю самого фото. Строку платежа убрали: в
   чужой карточке достаточно цены, платёж считается на своей странице. */
.vdp .vx-similar .car-card .cc-photo { position: relative; }
.vdp .vx-similar .car-card .cc-tag {
  position: absolute; right: 12px; bottom: 12px; top: auto;
  border-radius: 8px; padding: 7px 13px;
}
.vdp .vx-similar .car-card .cc-body { padding-top: 16px; }
.vdp .vx-similar .car-card .cc-mo { display: none; }
.vdp .vx-similar .car-card .cc-meta { margin-bottom: 0; }
.sim-more { margin-top: 14px; }

/* .cc-tag лежит внутри .cc-body (у него position:relative), поэтому
   привязка к .cc-photo не работала — поднимаем плашку над телом
   карточки отрицательным top, она садится в нижний угол снимка */
.vdp .vx-similar .car-card .cc-tag {
  position: absolute; right: 12px; top: -48px; bottom: auto; left: auto;
}


/* ценник в похожих — точно как на странице инвентаря: сидит на стыке
   фото и тела карточки (верх на снимке, низ на белом), красная тень.
   Мои прежние переопределения загоняли его внутрь кадра — убираем. */
.vdp .vx-similar .car-card .cc-tag {
  position: absolute; top: -26px; right: 16px; bottom: auto; left: auto;
  border-radius: 7px; padding: 8px 15px 9px;
  font-size: 18px; line-height: 1.1;
  box-shadow: 0 8px 18px rgba(200, 16, 46, .32);
}
.vdp .vx-similar .car-card .cc-tag .now { font-size: 18px; }


/* --- лид-форма: чистка ---
   Кикер «REQUEST FORM» ничего не сообщал (и так видно, что это форма),
   а подпись дублировала три чекбокса ниже. Лейблы придвинуты к полям,
   группа галочек отделена линией — она про другое, чем контакты. */
.vdp .vx-ask .ask-card .ac-tag { display: none; }
.vdp .vx-ask .ask-card h2 { margin-top: 0; }
.vdp .vx-ask .field label { margin-bottom: 4px; font-size: 15px; color: var(--ink); }
.vdp .vx-ask .field { margin-bottom: 14px; }
.vdp .vx-ask .ac-picks {
  margin: 4px 0 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
.vdp .vx-ask .ac-picks legend { margin-bottom: 8px; }
.vdp .vx-ask .field textarea { min-height: 80px; }
.vdp .vx-ask .ask-card .btn { min-height: 56px; font-size: 17px; }

/* у «похожих» оставался нижний отступ 44px в СВОЁМ цвете (тинт), а форма
   стоит на светлом — перед ней висела тинтовая полоса. По правилу якорей
   низ обнуляем, весь воздух отдаём верху формы; фон формы задаём явно,
   чтобы не зависеть от body */
.vdp section.vx-similar { padding-bottom: 0; }
.vdp .vx-ask { background: var(--paper); }
.vdp .vx-ask .wrap { padding-top: clamp(38px, 4.6vw, 60px); }


/* ==========================================================================
   ЯКОРЯ — новое правило заказчика: межблочный зазор принадлежит блоку,
   который ЗАКАНЧИВАЕТСЯ (раньше отдавали следующему). Основной воздух —
   в padding-bottom секции, у следующей остаётся короткий внутренний
   отступ до контента. Перед тёмным футером не применяем.
   ========================================================================== */
.vdp section.vx-top { padding-bottom: clamp(30px, 3.8vw, 48px); }
.vdp section.vx-story { padding-bottom: clamp(34px, 4.2vw, 54px); }
.vdp section.vx-delivery { padding-bottom: clamp(34px, 4.2vw, 54px); }
.vdp section.vx-credit { padding-bottom: clamp(34px, 4.2vw, 54px); }
.vdp section.vx-place { padding-bottom: clamp(34px, 4.2vw, 54px); }
.vdp section.vx-faq { padding-bottom: clamp(34px, 4.2vw, 54px); }
.vdp section.vx-similar { padding-bottom: clamp(34px, 4.2vw, 54px); }
.vdp section.vx-ask { padding-bottom: clamp(30px, 3.6vw, 46px); }

.vdp .vx-story .wrap, .vdp .vx-delivery .wrap, .vdp .vx-credit .wrap,
.vdp .vx-place .wrap, .vdp .vx-faq .wrap, .vdp .vx-similar .wrap,
.vdp .vx-ask .wrap { padding-top: clamp(22px, 2.6vw, 30px); }

/* faq и similar шли двумя тинтами подряд — граница между ними пропадала.
   Чередование: story тинт → delivery paper → credit тинт → place paper →
   faq тинт → similar paper → ask тинт (форма замыкает страницу) */
.vdp .vx-similar { background: var(--paper); }
.vdp .vx-ask { background: var(--paper-tint); }


/* --- форма на мобиле без карточки ---
   Белая карточка во всю ширину внутри тинтовой секции оставляла тинт
   видимым только полосками сверху и снизу — они и читались как «якорь
   другого цвета». Убираем саму карточку: поля лежат на фоне секции. */
@media (max-width: 760px) {
  .vdp .vx-ask .ask-card {
    background: transparent; box-shadow: none; border: none;
    border-radius: 0; margin: 0; padding: 0;
  }
  .vdp .vx-ask .wrap { padding-top: 26px; }
  .vdp section.vx-ask { padding-bottom: 30px; }
}
/* зазоры между блоками короче — страница плотнее */
.vdp section.vx-story, .vdp section.vx-delivery, .vdp section.vx-credit,
.vdp section.vx-place, .vdp section.vx-faq, .vdp section.vx-similar {
  padding-bottom: clamp(26px, 3.2vw, 44px);
}
.vdp .vx-story .wrap, .vdp .vx-delivery .wrap, .vdp .vx-credit .wrap,
.vdp .vx-place .wrap, .vdp .vx-faq .wrap, .vdp .vx-similar .wrap {
  padding-top: clamp(20px, 2.4vw, 28px);
}


/* --- лид-форма: бланк, а не россыпь полей ---
   Без карточки поля висели на фоне и форма читалась дёшево; с
   full-bleed карточкой по краям оставались тинтовые полосы. Решение:
   белая карточка с полями по бокам — тинт вокруг работает как фон. */
@media (max-width: 760px) {
  .vdp .vx-ask .ask-card {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 4px 18px rgba(20, 23, 27, .07);
    margin: 0; padding: 22px 18px 20px;
  }
}
/* поля плотнее: было ~90px на поле с подписью */
.vdp .vx-ask .field { margin-bottom: 12px; }
.vdp .vx-ask .field label { font-size: 14px; margin-bottom: 3px; color: #454B52; }
.vdp .vx-ask .field input { min-height: 46px; padding: 10px 13px; font-size: 16px; }
.vdp .vx-ask .field textarea { min-height: 68px; padding: 10px 13px; font-size: 16px; }
.vdp .vx-ask .field input::placeholder, .vdp .vx-ask .field textarea::placeholder { color: #9AA1A9; }
.vdp .vx-ask .ac-picks { margin: 2px 0 14px; padding-top: 14px; }
.vdp .vx-ask .ac-picks .pick { padding: 3px 0; font-size: 16px; }
.vdp .vx-ask .ac-picks input { width: 20px; height: 20px; }
.vdp .vx-ask .ask-card h2 { font-size: 24px; }
.vdp .vx-ask .form-note { font-size: 14.5px; margin-bottom: 16px; }
.vdp .vx-ask .ask-card .btn { min-height: 54px; }


/* ==========================================================================
   ЛИД-ФОРМА, ВАРИАНТ 2: поля-подложки вместо рамок, материалы —
   выбираемые карточки. Рамочные боксы делали форму «казённой».
   ========================================================================== */
.vdp .vx-ask .ask-card { padding: 24px 20px 22px; }
.vdp .vx-ask .field label {
  font-family: var(--display); font-weight: 600; font-stretch: 100%;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: #6E757D; margin-bottom: 5px;
}
.vdp .vx-ask .field input,
.vdp .vx-ask .field textarea {
  background: var(--paper-tint); border: 1.5px solid transparent; border-radius: 10px;
  min-height: 50px; padding: 12px 14px; font-size: 16.5px; color: var(--ink);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.vdp .vx-ask .field input:focus,
.vdp .vx-ask .field textarea:focus {
  background: #fff; border-color: var(--ink); box-shadow: none; outline: none;
}
.vdp .vx-ask .field.is-bad input, .vdp .vx-ask .field.is-bad textarea { border-color: var(--red); background: #FCF3F4; }

/* материалы — карточки-переключатели: в них попадают пальцем, и видно,
   что выбрано, без разглядывания мелкого квадратика */
.vdp .vx-ask .ac-picks { border-top: none; padding-top: 0; margin: 6px 0 16px; display: grid; gap: 8px; }
.vdp .vx-ask .ac-picks legend {
  font-size: 12px; letter-spacing: .1em; color: #6E757D; margin-bottom: 2px;
}
.vdp .vx-ask .ac-picks .pick {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
  font-size: 16px; color: var(--ink); cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.vdp .vx-ask .ac-picks .pick:hover { border-color: var(--ink); }
.vdp .vx-ask .ac-picks .pick:has(input:checked) { border-color: var(--red); background: #FDF2F4; }
.vdp .vx-ask .ac-picks input { width: 22px; height: 22px; accent-color: var(--red); flex: none; }


/* ==========================================================================
   ЛИД-ФОРМА ДЛЯ 55+: крупно, чётко, без догадок.
   Предыдущие версии шли в другую сторону: метки 12px капсом (мелко для
   пресбиопии), поля-подложки без рамок (не видно, где кликать).
   Правила: подпись обычным словом 17px тёмным, поле 58px с чёткой
   рамкой 2px на белом, шрифт в поле 17px, галочки 26px, кнопка 60px.
   ========================================================================== */
.vdp .vx-ask .ask-card { padding: 24px 20px 24px; }
.vdp .vx-ask .ask-card h2 { font-size: 25px; margin-bottom: 6px; }
.vdp .vx-ask .form-note { font-size: 16px; line-height: 1.5; margin-bottom: 20px; color: #454B52; }

.vdp .vx-ask .field { margin-bottom: 16px; }
.vdp .vx-ask .field label {
  font-family: var(--body); font-weight: 700; font-stretch: 100%;
  font-size: 17px; letter-spacing: 0; text-transform: none;
  color: var(--ink); margin-bottom: 7px;
}
.vdp .vx-ask .field input,
.vdp .vx-ask .field textarea {
  background: #fff; border: 2px solid #B9BEC4; border-radius: 10px;
  min-height: 58px; padding: 14px 16px; font-size: 17px; color: var(--ink);
}
.vdp .vx-ask .field textarea { min-height: 90px; }
.vdp .vx-ask .field input:focus, .vdp .vx-ask .field textarea:focus {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20, 23, 27, .12); outline: none;
}
.vdp .vx-ask .field input::placeholder, .vdp .vx-ask .field textarea::placeholder { color: #8A9199; }

/* материалы: строки с крупной галочкой, без карточек-рамок вокруг —
   рамка на каждой строке дробила блок */
.vdp .vx-ask .ac-picks {
  display: grid; gap: 2px; margin: 4px 0 18px; padding-top: 16px;
  border-top: 2px solid var(--line);
}
.vdp .vx-ask .ac-picks legend {
  font-family: var(--body); font-weight: 700; font-size: 17px;
  letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 8px;
}
.vdp .vx-ask .ac-picks .pick {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 4px; border: none; background: transparent; border-radius: 0;
  font-size: 17px; line-height: 1.35; color: var(--ink); cursor: pointer;
}
.vdp .vx-ask .ac-picks .pick:hover { color: var(--red); background: transparent; }
.vdp .vx-ask .ac-picks input { width: 26px; height: 26px; accent-color: var(--red); flex: none; }

.vdp .vx-ask .ask-card .btn { min-height: 60px; font-size: 18px; }

/* подсветка отмеченной строки осталась от прошлой версии формы —
   галочка и так красная, розовая заливка только рябит */
.vdp .vx-ask .ac-picks .pick:has(input:checked) { background: transparent; border-color: transparent; }
.vdp .vx-ask .ac-picks .pick:has(input:checked) { font-weight: 600; }


/* ==========================================================================
   ЛИД-ФОРМА — ФИНАЛ. Четыре поля и кнопка, ничего больше.
   Размеры под 55+: подпись 16px обычным словом, поле 54px с чёткой
   рамкой, текст в поле 17px, кнопка 56px. Карточка ~560px — влезает
   в экран целиком, человек видит форму от заголовка до кнопки.
   ========================================================================== */
.vdp .vx-ask .ask-card { padding: 22px 18px 20px; }
.vdp .vx-ask .ask-card h2 { font-size: 24px; margin-bottom: 5px; }
.vdp .vx-ask .form-note { font-size: 15.5px; line-height: 1.45; margin-bottom: 18px; color: #5C636B; }

.vdp .vx-ask .field { margin-bottom: 13px; }
.vdp .vx-ask .field label {
  font-family: var(--body); font-weight: 700;
  font-size: 16px; letter-spacing: 0; text-transform: none;
  color: var(--ink); margin-bottom: 6px;
}
.vdp .vx-ask .field input, .vdp .vx-ask .field textarea {
  background: #fff; border: 2px solid #C2C7CC; border-radius: 10px;
  min-height: 54px; padding: 13px 15px; font-size: 17px;
}
.vdp .vx-ask .field textarea { min-height: 78px; }
.vdp .vx-ask .field input:focus, .vdp .vx-ask .field textarea:focus {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20, 23, 27, .1);
}
.vdp .vx-ask .ac-picks { display: none; }
.vdp .vx-ask .ask-card .btn { min-height: 56px; font-size: 17.5px; margin-top: 4px; }


/* --- форма: доводка после визуальной проверки ---
   1) рамка поля давала контраст 1.70 к белому при норме 3.0 — для 55+
      границы полей были почти не видны, форма читалась дёшево;
   2) шапка формы сливалась с полями — добавлена отбивка;
   3) подписи полей 16px спорили с заголовком — опущены до 15;
   4) кнопка стояла впритык к последнему полю. */
.vdp .vx-ask .field input, .vdp .vx-ask .field textarea { border-color: #8F979F; }
.vdp .vx-ask .field input:hover, .vdp .vx-ask .field textarea:hover { border-color: #6E757D; }
.vdp .vx-ask .form-note {
  margin-bottom: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.vdp .vx-ask .ac-grid { margin-top: 16px; }
.vdp .vx-ask .field label { font-size: 15px; margin-bottom: 6px; }
.vdp .vx-ask .ask-card .btn { margin-top: 6px; }


/* ==========================================================================
   ЛИПКАЯ ПЛАШКА — переделана.
   Было: цена зажата между двумя кнопками одного веса, причём белая
   заливка на чёрном кричала громче красной — глаз не понимал, что
   главное. Стало: цена слева с воздухом, одна крупная красная кнопка
   звонка, заявка — тихой иконкой рядом.
   ========================================================================== */
.vdp-sticky {
  gap: 14px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 -10px 30px rgba(10, 11, 13, .45);
}
.vs-price { flex: 1; min-width: 0; gap: 1px; }
.vs-price b { font-size: 21px; color: #fff; letter-spacing: .01em; }
.vs-price small { font-size: 13px; font-weight: 600; color: #9AA1A9; }

.vs-acts { flex: none; display: flex; align-items: center; gap: 8px; }
.vs-call {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 22px; border-radius: 10px;
  background: var(--red); color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-stretch: 100%; font-size: 17px;
  box-shadow: 0 4px 14px rgba(200, 16, 46, .4);
  transition: background .15s var(--ease);
}
.vs-call:hover { background: #A50D26; color: #fff; }
.vs-call .ic { width: 17px; height: 17px; }
.vs-ask {
  flex: none; width: 50px; height: 50px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1.5px solid rgba(255, 255, 255, .38);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.vs-ask .ic { width: 19px; height: 19px; color: #fff; }
.vs-ask:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
@media (max-width: 359px) {
  .vs-call { padding: 0 16px; font-size: 16px; }
  .vs-price b { font-size: 19px; }
}


/* --- плашка: наполнение и кнопки ---
   Иконка-конверт без подписи для 55+ загадка — вернули слово.
   Цена стала ссылкой на блок платежа: тап по «$508/mo · see terms»
   ведёт к калькулятору, где эти условия и живут. */
.vdp-sticky { gap: 10px; padding-left: 12px; padding-right: 12px; }
a.vs-price { text-decoration: none; }
a.vs-price:hover .vs-go { color: #fff; }
.vs-price small { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.vs-go {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #FF5A70; border-bottom: 1px solid rgba(255, 90, 112, .5);
}
.vs-call { padding: 0 18px; gap: 8px; }
.vs-ask {
  width: auto; padding: 0 15px; gap: 8px;
  font-family: var(--display); font-weight: 700; font-stretch: 100%; font-size: 16px;
  color: #fff;
}
.vs-ask .ic { width: 17px; height: 17px; }
@media (max-width: 379px) {
  .vs-go { display: none; }
  .vs-call, .vs-ask { padding: 0 13px; font-size: 15px; }
}


/* --- аудит 03.09: иерархия и тап-зоны ---
   Платёж $508 стоял 34px — вровень с названием машины и крупнее цены
   30px (тот самый косяк лестницы). Результат расчёта равняется итогу
   доставки: 28px. Кнопки ± были 22px — выше заголовков карточек 20px;
   служебные символы ниже заголовков. Поле взноса имело тап-зону 20px
   высотой — растянуто на всю карманную высоту поля. */
.vdp .credit-tile .dc-mo { font-size: 28px; }
.vdp .credit-tile .dc-note { font-size: 15px; }
.st-btn { font-size: 20px; }
.st-field input { align-self: stretch; min-height: 54px; }


/* --- форма в модалке: те же финальные стили ---
   По кнопке форма переезжает в #amSlot и выпадает из .vx-ask (и из main.vdp — модалка стоит после </main>) — все
   правила «.vdp .vx-ask …» переставали действовать, и в модалке поля
   стояли с бледными рамками старой версии. Дубль правил через
   .am-card, чтобы бланк выглядел одинаково в секции и во всплывашке. */
.ask-modal .am-card .ask-card { padding: 22px 18px 20px; }
.ask-modal .am-card .ask-card h2 { font-size: 24px; margin-bottom: 5px; }
.ask-modal .am-card .form-note {
  font-size: 15.5px; line-height: 1.45; color: #5C636B;
  margin-bottom: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.ask-modal .am-card .ac-grid { margin-top: 16px; }
.ask-modal .am-card .field { margin-bottom: 13px; }
.ask-modal .am-card .field label {
  font-family: var(--body); font-weight: 700;
  font-size: 15px; letter-spacing: 0; text-transform: none;
  color: var(--ink); margin-bottom: 6px;
}
.ask-modal .am-card .field input, .ask-modal .am-card .field textarea {
  background: #fff; border: 2px solid #8F979F; border-radius: 10px;
  min-height: 54px; padding: 13px 15px; font-size: 17px;
}
.ask-modal .am-card .field textarea { min-height: 78px; }
.ask-modal .am-card .field input:hover, .ask-modal .am-card .field textarea:hover { border-color: #6E757D; }
.ask-modal .am-card .field input:focus, .ask-modal .am-card .field textarea:focus {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20, 23, 27, .1);
}
.ask-modal .am-card .ac-picks { display: none; }
.ask-modal .am-card .ask-card .btn { min-height: 56px; font-size: 17.5px; margin-top: 6px; }

/* «Open now» слипался с расписанием в блоке «Prefer to talk?» —
   у open-status там не было отбивки, в отличие от меню и футера */
.ac-hours .open-status { margin-right: 7px; }


/* обёртки калькулятора: прозрачны везде — калькулятор одноколонный
   и на мобиле, и в правой рельсе десктопа */
.ct-l, .ct-r { display: contents; }

/* ==========================================================================
   VDP: двухрельсовая раскладка по образцу принятых VDP-2/JF.
   Каркас: .vx-page > .vx-colL (галерея, описание, место, FAQ) +
   .vx-colR (титул, панель, доставка, платёж). На мобиле обёртки
   прозрачны, порядок блоков восстановлен order-ами — вид не менялся.
   ========================================================================== */
.vx-page { display: grid; grid-template-columns: minmax(0, 1fr); }
.vx-colL, .vx-colR { display: contents; }

@media (max-width: 939px) {
  .vx-title { order: 1; padding: clamp(16px, 2.4vw, 30px) clamp(18px, 4vw, 32px) 0; }
  .vx-top { order: 2; }
  /* панель на мобиле — не карточка, а прежний открытый поток;
     display:block перекрывает давнее «.vx-deal { display:contents }»,
     иначе её дети распыляются по гриду с order:0 и всплывают наверх */
  .vx-deal {
    order: 3; display: block; background: transparent; box-shadow: none; border-radius: 0;
    padding: 14px clamp(18px, 4vw, 32px) clamp(30px, 3.8vw, 48px);
  }
  .vx-story { order: 4; }
  .vx-delivery { order: 5; }
  .vx-credit { order: 6; }
  .vx-place { order: 7; }
  .vx-faq { order: 8; }
  .vdp section.vx-top { padding-bottom: 0; }
}

@media (min-width: 940px) {
  .vdp .vx-page {
    grid-template-columns: minmax(0, 1fr) clamp(400px, 33vw, 464px);
    gap: 0 52px; align-items: start;
    max-width: var(--wrap); margin: 0 auto;
    padding: clamp(22px, 2.8vw, 38px) clamp(18px, 4vw, 32px) 10px;
  }
  .vx-colL { display: block; min-width: 0; grid-column: 1; }
  .vx-colR { display: block; min-width: 0; grid-column: 2; }
  /* внутри колонок секции теряют полосность: фон, wrap и паддинги
     (вес .vdp — иначе фоны чередования .vdp .vx-credit сильнее) */
  .vdp .vx-colL section, .vdp .vx-colR section { background: transparent; padding: 0; }
  .vx-colL .wrap, .vx-colR .wrap { padding: 0; max-width: none; }
  .vdp .vx-colL section.vx-top, .vdp .vx-colL section.vx-story,
  .vdp .vx-colL section.vx-place, .vdp .vx-colL section.vx-faq,
  .vdp .vx-colR section.vx-delivery, .vdp .vx-colR section.vx-credit { padding-bottom: 0; }
  .vx-colL > section + section { margin-top: 56px; }
  .vx-colR > * + * { margin-top: 20px; }

  /* рельса: титул над панелью; липкость панели отключена — теперь под
     ней в рельсе живут доставка и платёж, липкая панель ехала поверх них */
  .vx-colR .vx-deal { position: static; }
  .vx-colR .vx-title { margin-bottom: 4px; }
  .vx-colR .vh-model { font-size: 33px; }
  .vx-colR .vh-year, .vx-colR .vh-make { font-size: 19px; }
  /* панель — белая карточка (базовые стили), цена без бирки */
  .vx-colR .vx-price {
    clip-path: none; filter: none; background: transparent;
    justify-content: flex-start; gap: 16px; padding: 2px 0 14px;
    border-bottom: 1px solid var(--line); margin-bottom: 14px;
  }
  .vx-colR .vx-price::before { display: none; }
  .vx-colR .prc-price { flex: none; text-align: left; font-size: 34px; }
  .vx-colR .prc-mo-big { flex: none; text-align: left; font-size: 20px; }
  .vx-colR .pr-div { width: 1.5px; background: var(--line); }
  .vdp .vp-row b { font-size: 15px; white-space: nowrap; }

  /* шаги в рельсе компактнее */
  .vx-colR .step-head { margin-bottom: 14px; gap: 12px; }
  .vx-colR .step-head h2 { font-size: 21px; }
  .vx-colR .step-n { width: 30px; height: 30px; font-size: 15px; }
  .vx-colR .ship-map { margin: 0 0 14px; }
  .vx-colR .num-ship { max-width: none; margin: 0; }
  .vx-colR .credit-tile { max-width: none; margin: 0; }
  .vdp .vx-colR .vx-after { max-width: none; margin: 16px 0 0; padding: 0; }
  .vdp .vx-colR .vx-after-btns { display: grid; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-content: stretch; justify-items: stretch; }
  .vdp .vx-colR .vx-after-btns .btn { width: 100%; min-width: 0; }
  /* FAQ снова полоса на всю ширину: заголовок выровнен по списку 920 */
  .vx-faq .sec-head { max-width: 920px; margin: 0 auto 22px; }

  /* левая колонка: рабочие заголовки чуть крупнее рельсы */
  .vx-colL .sec-head h2 { font-size: 29px; }
  .vx-colL .sec-head { margin-bottom: 20px; max-width: none; margin-left: 0; margin-right: 0; }
  .vx-colL .vx-article { max-width: none; margin: 0; }
  .vx-colL .vdp-faq-list { max-width: none; margin: 0; }
  .vx-colL .faq-more { margin-top: 12px; }
  .vx-colL .vx-map iframe { min-height: 380px; }
  .vx-colL .vx-map { margin-bottom: 20px; }

  /* полноширинный низ: форма с корешком */
  .vdp .vx-ask .ask-card { max-width: 1020px; padding: 34px 38px 32px; }
  .vdp .vx-ask .ac-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 0 56px; }
  .vdp .vx-ask .ac-side { display: flex; }
  .vdp .ask-card h2 { font-size: 27px; }
  .vx-similar .sec-head { max-width: none; margin-left: 0; margin-right: 0; }
}


/* --- галерея на десктопе была ужата: lead-grid остался 8fr/4fr после
   изъятия панели в рельсу — фото занимало 2/3 левой колонки, а треть
   пустовала. Одна колонка: кадр во всю ширину colL, миниатюры крупнее.
   Заодно странице дан простор на широких экранах: 1200 → 1320. --- */
@media (min-width: 940px) {
  .vx-lead-grid { grid-template-columns: minmax(0, 1fr); }
  .vdp .vx-page { max-width: 1320px; }
  .vx-grid { gap: 10px; margin-top: 10px; }
}


/* ==========================================================================
   Галерея: два ряда миниатюр на десктопе, низ вровень с панелью.
   Панель: титул слит с карточкой, серая пластина заменена лёгкими
   строками — алюминиевая плита в белой карточке давила серым пятном.
   Мобила не меняется: тумбы 7-11 скрыты, «+N» встаёт шестым.
   ========================================================================== */
.vx-th-more .thm-d { display: none; }
@media (max-width: 939px) {
  .vx-grid .vx-th:nth-child(n+6):not(.vx-th-more) { display: none; }
}
@media (min-width: 940px) {
  .vx-th-more .thm-m { display: none; }
  .vx-th-more .thm-d { display: flex; }

  /* --- панель одной белой картой: титул внутри --- */
  .vx-colR .vx-title {
    margin: 0; background: #fff; border-radius: var(--r-card) var(--r-card) 0 0;
    box-shadow: 0 2px 12px rgba(20, 23, 27, .08);
    padding: 24px 28px 0;
  }
  .vx-colR .vx-deal {
    border-radius: 0 0 var(--r-card) var(--r-card);
    padding-top: 14px;
  }
  .vx-colR .vx-title + .vx-deal { margin-top: 0; }
  .vx-colR .vh-model { font-size: 31px; }
  .vx-colR .vh-year, .vx-colR .vh-make { font-size: 18px; }
  .vx-colR .prc-price { font-size: 36px; }
  .vx-colR .vx-cta { display: grid; gap: 10px; }
  .vx-colR .vx-cta .btn { min-height: 54px; }

  /* --- факты: вместо алюминия — строки прейскуранта --- */
  .vx-colR .vx-plate {
    background: none; box-shadow: none; border: none; border-radius: 0;
    padding: 6px 0 0; margin: 18px 0 0;
  }
  .vx-colR .vx-plate::before, .vx-colR .vx-plate::after { display: none; }
  .vx-colR .vp-head { display: none; }
  .vx-colR .vp-rows { background: none; }
  .vx-colR .vp-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 8.5px 0; border-bottom: 1px solid var(--line);
    background: none; box-shadow: none;
  }
  .vx-colR .vp-row:last-child { border-bottom: none; }
  .vx-colR .vp-row span {
    font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: #6E757D;
  }
  .vx-colR .vp-row b { font-size: 15.5px; color: var(--ink); }
  .vx-colR .vx-match {
    margin: 12px 0 0; padding: 8px 12px;
    border: 1.5px solid var(--red); border-radius: 7px; color: var(--red);
    text-align: center; background: none;
  }

  /* --- симметрия: кадр повыше, тумбы двумя рядами заполняют колонку --- */
  .vx-stage img { aspect-ratio: 5 / 3; }
}


/* --- титул рельсы одной строкой: «1950 Chevrolet 3100.» --- */
@media (min-width: 940px) {
  .vx-colR .vx-title h1 {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px;
  }
  .vx-colR .vh-model { font-size: 28px; }
  .vx-colR .vh-year, .vx-colR .vh-make { font-size: 28px; }
  .vx-colR .vh-year { color: var(--ink); }
}


/* сервисная строка вместо штампа у не-matching машин: серый контур,
   на мобиле скрыта — принятый мобильный вид не меняется */
/* мобила: в пластине никаких штампов — ни сервисной строки,
   ни numbers-matching (команда заказчика; на десктопе оба живут) */
@media (max-width: 939px) { .vx-match-alt, .vdp .vx-match { display: none; } }
@media (min-width: 940px) {
  .vx-colR .vx-match-alt { border-color: var(--line); color: #5C636B; }
}


/* --- визуальный проход рельсы --- */
@media (min-width: 940px) {
  /* титул без «зебры»: вводный год серым, имя машины чёрным целиком */
  .vx-colR .vh-year { color: var(--ink-soft); }
  .vx-colR .vh-make { color: var(--ink); }
  /* сервисная строка теперь кнопка: ведёт в форму за документами */
  .vx-colR button.vx-match-alt {
    width: 100%; cursor: pointer; background: none; font-family: var(--body);
    transition: border-color .15s var(--ease), color .15s var(--ease);
  }
  .vx-colR button.vx-match-alt:hover { border-color: var(--ink); color: var(--ink); }
  /* рельсе больше воздуха между панелью и шагами */
  .vx-colR > section { margin-top: 34px; }
}


/* ==========================================================================
   УАУ-проход: живая галерея + глубина панели.
   ========================================================================== */
/* кадр меняется мягко, а не вспышкой */
.vx-stage img { transition: opacity .18s var(--ease); }
/* счётчик с камерой */
.vx-count { display: inline-flex; align-items: center; gap: 7px; }
.vx-count .ic { width: 15px; height: 15px; background: #fff; }
/* активная миниатюра: красная рамка, связь кадра и ленты */
.vx-th { outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .18s var(--ease); }
.vx-th.is-on { outline-color: var(--red); }
.vx-th.is-on img { transform: none; }

@media (min-width: 940px) {
  /* глубина: кадр и панель на одном уровне «стекла» */
  .vx-stage { box-shadow: 0 3px 16px rgba(20, 23, 27, .1); }
  .vx-colR .vx-title, .vx-colR .vx-deal { box-shadow: 0 3px 16px rgba(20, 23, 27, .1); }
  /* иерархия рельсы: имя крупнее, цена — главная цифра */
  .vx-colR .vh-model, .vx-colR .vh-year, .vx-colR .vh-make { font-size: 30px; }
  .vx-colR .prc-price { font-size: 38px; }
  .vx-colR .vp-row b { font-size: 16px; }
}


/* --- панель: шов под титулом и кнопка документов ---
   Шов: тень .vx-deal размывалась вверх поверх белого титула серой
   полосой на стыке — титул поднят над ней. Кнопка документов была
   прозрачным призраком с еле видной рамкой — стала явной тихой
   кнопкой: тинт, иконка документов, текст-действие. */
@media (min-width: 940px) {
  .vx-colR .vx-title { position: relative; z-index: 1; box-shadow: none; }
  .vx-colR button.vx-match-alt {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; padding: 10px 14px;
    background: var(--paper-tint); border: 1px solid transparent; border-radius: 9px;
    font-size: 13.5px; font-weight: 700; letter-spacing: .05em;
    color: var(--ink);
  }
  .vx-colR button.vx-match-alt .ic { width: 16px; height: 16px; background: var(--ink); flex: none; }
  .vx-colR button.vx-match-alt:hover { background: #E9E5DA; border-color: transparent; color: var(--ink); }
}


/* ==========================================================================
   УАУ-сборка средней зоны (десктоп). Было налеплено: в рельсе заголовок,
   карта США и ZIP-карточка валялись отдельными предметами на фоне, CTA
   платежа болтались под карточкой; место — карта с прижатым текстом;
   главы описания — карты в карте. Стало: рельса = стопка из трёх белых
   инструментов (панель / доставка / платёж), каждый цельный: шапка
   шага, содержимое и действия внутри одной карты. Место — фирменный
   приём главной: карта во всю ширину, поверх неё белая карточка адреса.
   ========================================================================== */
@media (min-width: 940px) {
  /* --- рельса: доставка и платёж — белые карты целиком --- */
  .vdp .vx-colR section.vx-delivery, .vdp .vx-colR section.vx-credit {
    background: #fff; border-radius: var(--r-card);
    box-shadow: 0 3px 16px rgba(20, 23, 27, .1);
    padding: 22px 24px 24px;
  }
  /* шапка шага компактная, внутри карты */
  .vx-colR .step-head { margin-bottom: 12px; gap: 10px; align-items: center; }
  .vx-colR .step-head h2 { font-size: 20px; }
  .vx-colR .step-n { width: 26px; height: 26px; font-size: 13.5px; }
  .vx-colR .step-head::after { display: none; }
  /* карта США — часть инструмента: приглушена, отделена линией */
  .vx-colR .ship-map { margin: 0 0 4px; opacity: .85; }
  /* внутренние карточки больше не карточки — содержимое карты */
  .vx-colR .num-ship, .vx-colR .credit-tile {
    background: none; box-shadow: none; border-radius: 0; padding: 12px 0 0;
    border-top: 1px solid var(--line);
  }
  .vx-colR .nc-q { font-size: 19px; }
  /* CTA платежа — внутри карты, отделены линией */
  .vdp .vx-colR .vx-after {
    margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line);
    text-align: left;
  }
  .vx-colR .vx-after p { font-size: 15px; margin-bottom: 12px; }

  /* --- место: карта во всю ширину, белая карточка адреса поверх --- */
  .vx-colL .vx-place-grid { display: block; position: relative; }
  .vx-colL .vx-place .vx-map { margin: 0; }
  .vx-colL .vx-map iframe { min-height: 440px; display: block; }
  .vx-colL .vx-here {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    max-width: 430px; background: #fff; border-radius: var(--r-card);
    box-shadow: 0 10px 32px rgba(20, 23, 27, .22);
    padding: 24px 26px 22px;
  }
  .vx-colL .vx-here h2 { font-size: 24px; margin-bottom: 10px; }
  .vx-colL .vx-here p { font-size: 15.5px; }

  /* --- описание: главы линиями внутри одной карты, не карты в карте --- */
  .vx-colL .vx-chap {
    border: none; border-radius: 0; box-shadow: none; background: none;
    border-top: 1px solid var(--line); margin: 0;
  }
  .vx-colL .vx-chap summary { padding-left: 0; padding-right: 0; }
  .vx-colL .vx-chap .ch-body, .vx-colL .vx-chap ul { padding-left: 0; padding-right: 0; }
}


/* --- ЕЩЁ ЛУЧШЕ: рамки, лид, главы (десктоп) --- */
@media (min-width: 940px) {
  /* внутренние блоки рельсы окончательно без своих рамок и теней */
  .vdp .vx-colR .num-ship, .vdp .vx-colR .credit-tile {
    border: none; border-top: 1px solid var(--line); box-shadow: none;
  }
  /* лид описания — голос продавца: крупнее, воздух, жирный вход */
  .vx-colL .vx-lede {
    font-size: 18px; line-height: 1.75; padding-left: 22px;
  }
  .vx-colL .vx-lede::first-line { font-weight: 600; }
  /* счётчики глав: тонкая серая цифра вместо кружка-пилюли */
  .vx-colL .vx-chap .ch-n {
    background: none; border: none; box-shadow: none;
    font-size: 13px; color: #8A9199; font-weight: 600; min-width: 0; padding: 0;
  }
  .vx-colL .vx-chap summary { min-height: 58px; }
  .vx-colL .vx-chap .ch-t { font-size: 18px; }
}


/* ==========================================================================
   Перестановка по решению заказчика: FAQ — в левую колонку под описание,
   место с картой — в рельсу под платёж (красивый финал правой колонки).
   ========================================================================== */
@media (max-width: 939px) {
  .vx-faq { order: 8; }
}
@media (min-width: 940px) {
  /* FAQ в колонке: без полосы и центровки, стопка на всю ширину */
  .vx-colL .vx-faq .sec-head { max-width: none; margin: 0 0 18px; }
  .vx-colL .vdp-faq-list { max-width: none; margin: 0; }
  .vx-colL .vx-faq .faq-more { margin-top: 12px; }
  /* место в рельсе: белая карта-инструмент, как доставка и платёж */
  .vdp .vx-colR section.vx-place {
    background: #fff; border-radius: var(--r-card);
    box-shadow: 0 3px 16px rgba(20, 23, 27, .1);
    padding: 16px 16px 22px;
  }
  .vx-colR .vx-place-grid { display: block; position: static; }
  .vx-colR .vx-map { margin: 0 0 16px; }
  .vx-colR .vx-map iframe { min-height: 260px; display: block; border-radius: 9px; }
  .vx-colR .vx-here { padding: 0 8px; }
  .vx-colR .vx-here h2 { font-size: 21px; margin-bottom: 8px; }
  .vx-colR .vx-here p { font-size: 15px; }
  .vx-colR .vx-row { font-size: 15px; }
}


/* ==========================================================================
   Дорогой проход: нумерация глав, переходы фонов, липкий финал рельсы.
   ========================================================================== */
@media (min-width: 940px) {
  /* главы описания: номер 01/02 красным моно — язык номеров Financing */
  .vx-colL .vx-article { counter-reset: chap; }
  .vx-colL .vx-chap { counter-increment: chap; }
  .vx-colL .vx-chap summary::before {
    content: counter(chap, decimal-leading-zero);
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 13px; font-weight: 700; letter-spacing: .06em;
    color: var(--red); flex: none; width: 30px;
  }
  /* фон похожих — общий цвет страницы: цельное полотно, белые карты */
  .vdp section.vx-similar { background: var(--paper); }
  .vdp section.vx-ask { background: var(--paper); }
  /* карта места липнет и сопровождает прокрутку FAQ — рельса не бросает
     правую сторону пустой (colR растянут на высоту строки грида) */
  .vx-colR { align-self: stretch; }
  .vdp .vx-colR section.vx-place { position: sticky; top: 84px; }
  /* чёткость мелочей: серые подписи на ступень контрастнее */
  .vdp .fine, .vdp .nc-note, .vdp .ct-hint { color: #5C636B; }
}


/* ==========================================================================
   Живая квитанция: дорога бежит под грузовиком — машинка «едет» от
   Мальты к городу покупателя. Пунктир переведён с dashed-бордера на
   градиент, чтобы анимировать движение; грузовик мягко покачивается.
   Уважение к reduce-motion: всё замирает.
   ========================================================================== */
.rq-route i {
  border-bottom: none; top: 0; height: 2px;
  background: repeating-linear-gradient(90deg,
    #C9C3B2 0 7px, transparent 7px 13px);
  background-size: 13px 2px;
  animation: rqRoad 1.1s linear infinite;
}
@keyframes rqRoad { from { background-position-x: 13px; } to { background-position-x: 0; } }
.rq-route .ic { animation: rqTruck 1.6s ease-in-out infinite; }
@keyframes rqTruck {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-1.2px); }
  60% { transform: translateY(.6px); }
}
@media (prefers-reduced-motion: reduce) {
  .rq-route i, .rq-route .ic { animation: none; }
}


/* ==========================================================================
   Квитанция: настоящий рейс. Грузовик выезжает из Мальты, проезжает
   весь маршрут, за ним тянется красная линия пройденного пути (язык
   дуги на карте), у города растворяется — и на новый рейс. Пунктир
   всего пути серый статичный, бегущая крошка отключена.
   ========================================================================== */
.vdp .rq-route i { animation: none; }
.rq-way {
  flex: 1; position: relative; height: 20px; min-width: 60px;
  display: block;
}
.rq-way .rq-line, .rq-way .rq-trail {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  transform: translateY(-50%);
  border: none; flex: none; margin: 0; animation: none;
}
.rq-way .rq-line {
  background: repeating-linear-gradient(90deg, #C9C3B2 0 7px, transparent 7px 13px);
}
/* вес .vdp обязателен: «.vdp .rq-route i {animation:none}» иначе глушит след */
.vdp .rq-way .rq-trail, .rq-way .rq-trail {
  right: auto; width: 0; background: var(--red); border-radius: 2px;
  animation: rqTrail 4.4s ease-in-out infinite;
}
.rq-truck.ic {
  position: absolute; left: 0; top: 50%; margin-top: -14px;
  width: 19px; height: 19px; color: var(--red);
  animation: rqRun 4.4s ease-in-out infinite;
}
@keyframes rqRun {
  0%   { left: 0; opacity: 0; }
  7%   { left: 0; opacity: 1; }
  76%  { left: calc(100% - 19px); opacity: 1; }
  86%  { left: calc(100% - 19px); opacity: 0; }
  100% { left: 0; opacity: 0; }
}
@keyframes rqTrail {
  0%   { width: 0; opacity: 0; }
  7%   { width: 0; opacity: 1; }
  76%  { width: calc(100% - 10px); opacity: 1; }
  86%  { width: calc(100% - 10px); opacity: 0; }
  100% { width: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rq-truck.ic, .rq-trail { animation: none; }
  .rq-truck.ic { left: calc(50% - 10px); opacity: 1; }
}


/* счётчики пунктов рядом со стрелкой глав убраны по команде заказчика */
@media (min-width: 940px) {
  .vx-colL .vx-chap .ch-n { display: none; }
}


/* линии рейса не наследуют мобильные ограничители старых пунктиров
   («.vdp .rq-route i {width:18px}» и display:none в медиа) */
.vdp .rq-way .rq-line, .vdp .rq-way .rq-trail {
  display: block; flex: none; min-width: 0; top: 50%;
}
.vdp .rq-way .rq-line { width: auto; }


/* ==========================================================================
   Целостность: хлебная строка, плашки-номера глав, единые заголовки зон.
   ========================================================================== */
.vx-crumbs { display: none; }
@media (min-width: 940px) {
  /* хлебная строка: тихий вход в карточку, как у больших каталогов */
  .vx-crumbs {
    display: flex; align-items: center; gap: 10px;
    max-width: 1320px; padding-top: 18px; padding-bottom: 0;
    font-size: 13.5px; color: #5C636B;
  }
  .vx-crumbs a { color: #5C636B; text-decoration: none; font-weight: 600; }
  .vx-crumbs a:hover { color: var(--red); }
  .vx-crumbs b { color: var(--ink); font-weight: 600; }
  .vx-crumbs span { color: #B9BEC4; }
  .vdp .vx-page { padding-top: 14px; }

  /* номера глав — плашки: тинт-квадратик с красной цифрой */
  .vx-colL .vx-chap summary::before {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 22px; margin-right: 14px;
    background: var(--paper-tint); border-radius: 6px;
    font-size: 11.5px; letter-spacing: .08em;
  }
  /* лид стоит слева, как принято; воздух между чертой и текстом */
  .vx-colL .vx-lede { margin-left: 0; padding-left: 22px; }

  /* заголовок FAQ — в один голос с «About this»: красный штрих сверху */
  .vx-colL .vx-faq .sec-head::before {
    content: ""; display: block; width: 34px; height: 3px;
    background: var(--red); margin-bottom: 12px;
  }
}


/* ==========================================================================
   FAQ единой картой (десктоп): вопросы — строки с линиями внутри одной
   белой карты, как главы описания. Простыня из десяти одинаковых
   карточек убрана; ответ на всю ширину, без пустого хвоста.
   ========================================================================== */
.vx-dir { display: none; }
@media (min-width: 940px) {
  .vx-colL .vdp-faq-list {
    background: #fff; border-radius: var(--r-card);
    box-shadow: 0 3px 16px rgba(20, 23, 27, .1);
    padding: 8px 30px; gap: 0;
  }
  .vx-colL .vx-faq .faq-item {
    background: none; box-shadow: none; border-radius: 0;
    border-left: none; border-top: 1px solid var(--line); margin: 0;
  }
  .vx-colL .vx-faq .faq-item:first-child { border-top: none; }
  .vx-colL .vx-faq .faq-item[open] { box-shadow: none; border-left: none; }
  .vx-colL .vx-faq summary { padding: 19px 0; font-size: 17.5px; }
  .vx-colL .vx-faq .faq-item[open] summary { padding-bottom: 10px; }
  .vx-colL .vx-faq .faq-a { padding: 0 0 20px; }
  .vx-colL .vx-faq .faq-a p { max-width: none; }
  /* финальная строка «все ответы» — в тон карты, тинт */
  .vx-colL .vx-faq .faq-more {
    background: var(--paper-tint); box-shadow: none;
  }
  /* место: тихая ссылка-маршрут */
  .vx-colR .vx-dir {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 46px; margin-top: 14px; padding: 10px 14px;
    background: var(--paper-tint); border-radius: 9px;
    font-size: 13.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink); text-decoration: none;
    transition: background .15s var(--ease);
  }
  .vx-colR .vx-dir:hover { background: #E9E5DA; color: var(--ink); }
  .vx-colR .vx-dir .ic { width: 16px; height: 16px; background: var(--ink); }
}


/* ==========================================================================
   Строки-переходы «Still have a question?» и «Not quite it?» (десктоп):
   вместо серой плиты — белая строка-действие в одну линию: вопрос
   чёрным слева, подводка серым у правого края, красный кружок-стрелка.
   Наведение: рамка и сдвиг стрелки — строка отвечает руке.
   ========================================================================== */
@media (min-width: 940px) {
  .vdp .faq-more {
    display: flex; align-items: center; gap: 16px;
    background: #fff; border: 1.5px solid var(--line);
    border-radius: var(--r-card); box-shadow: none;
    padding: 19px 22px 19px 26px;
    transition: border-color .18s var(--ease);
  }
  .vdp .fm-t { grid-column: auto; flex: none; font-size: 17.5px; color: var(--ink); margin: 0; }
  .vdp .fm-s { grid-column: auto; flex: 1; text-align: right; font-size: 15px; color: #6E757D; margin: 0; }
  .vdp .fm-go {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    background: var(--red); display: flex; align-items: center; justify-content: center;
    transition: transform .18s var(--ease);
  }
  .vdp .fm-go .ic { color: #fff; width: 16px; height: 16px; background: #fff; }
  .vdp .faq-more:hover { border-color: var(--red); transform: none; }
  .vdp .faq-more:hover .fm-go { transform: translateX(4px); background: var(--red); }
}


/* ==========================================================================
   Похожие (десктоп): карточки один в один с инвентори (возвращена строка
   «From $X/mo with $Y down» — её прятала мобильная чистка), плашка
   «Not quite it?» снизу убрана — переход к каталогу живёт в заголовке
   секции ссылкой «All 25 classics →».
   ========================================================================== */
.sim-all { display: none; }
@media (min-width: 940px) {
  .vdp .vx-similar .car-card .cc-mo { display: block; }
  .vdp .vx-similar .sim-more { display: none; }
  .vx-similar .sim-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: 26px;
  }
  .sim-all {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: var(--ink);
    text-decoration: none; padding-bottom: 6px;
    border-bottom: 2px solid var(--red);
    transition: color .15s var(--ease);
  }
  .sim-all .ic { width: 14px; height: 14px; background: var(--red); transition: transform .18s var(--ease); }
  .sim-all:hover { color: var(--red); }
  .sim-all:hover .ic { transform: translateX(3px); }
}


/* --- доводка по командам: иерархия ценников и строка-переход --- */
@media (min-width: 940px) {
  /* ценник чужой машины тише её имени (имя 20px — главное на карточке) */
  /* строка-переход: вопрос крупнее, подводка справа не мелочь, ховер тёплый */
  .vdp .fm-t { font-size: 18.5px; }
  .vdp .fm-s { font-size: 16.5px; color: #454B52; }
  .vdp .faq-more:hover { background: var(--paper-tint); border-color: var(--red); }
}


/* --- одна ось и один голос заголовков по всей странице (десктоп) ---
   Верх жил в 1320, похожие в 1200, форма в 1020 — три оси на одной
   странице; заголовки одного уровня стояли 29/26/24. */
@media (min-width: 940px) {
  .vdp .vx-similar .wrap, .vdp .vx-ask .wrap { max-width: 1320px; }
  .vdp .vx-similar .sec-head h2 { font-size: 29px; }
  .vdp .vx-ask .ask-card h2 { font-size: 27px; }
}


/* --- похожие: в систему остальных блоков (десктоп) ---
   Красный штрих над заголовком, как у «About this» и «Before you
   call»; сетка машин — белой картой, карточки внутри отделены тонкими
   рамками вместо теней (каталог в раме, не три отдельных виджета). */
@media (min-width: 940px) {
  .vx-similar .sim-head > div::before {
    content: ""; display: block; width: 34px; height: 3px;
    background: var(--red); margin-bottom: 12px;
  }
  .vdp .vx-similar .car-grid {
    background: #fff; border-radius: var(--r-card);
    box-shadow: 0 3px 16px rgba(20, 23, 27, .1);
    padding: 26px; gap: 26px;
  }
  .vdp .vx-similar .car-card {
    box-shadow: none; border: 1px solid var(--line);
  }
  .vdp .vx-similar .car-card:hover { box-shadow: 0 6px 18px rgba(20, 23, 27, .1); }
}


/* --- похожие: контуры карточек чётче, «All 25 classics» — кнопка --- */
@media (min-width: 940px) {
  .vdp .vx-similar .car-card { border: 1.5px solid #C9C3B2; }
  .sim-all {
    padding: 12px 20px; border: 1.5px solid var(--ink); border-radius: 9px;
    border-bottom-width: 1.5px; font-size: 14.5px;
    transition: color .15s var(--ease), border-color .15s var(--ease);
  }
  .sim-all .ic { background: var(--ink); }
  .sim-all:hover { color: var(--red); border-color: var(--red); }
  .sim-all:hover .ic { background: var(--red); }
}


/* ==========================================================================
   Ценник похожих — 1 В 1 С ИНВЕНТОРИ (команда заказчика). Слои VDP
   красили .vdp .cc-tag в 13px капс с трекингом .12em и перетирали
   кегль/вес — здесь всё возвращено к базе components: 21px/820 без
   разрядки и капса, штатные паддинги и красная тень.
   ========================================================================== */
@media (min-width: 940px) {
  .vdp .vx-similar .car-card .cc-tag {
    font-size: 21px; font-weight: 820; font-stretch: 112%;
    letter-spacing: 0; text-transform: none;
    padding: 8px 15px 9px; border-radius: 7px;
    top: -26px; right: 16px; bottom: auto; left: auto;
  }
  .vdp .vx-similar .car-card .cc-tag .now { font-size: 21px; font-weight: 820; letter-spacing: 0; }
}


/* --- похожие: зазор заголовка как у остальных блоков (был 36 против
   18-20) и кнопка «View Inventory» — чёрная, в один голос с View
   Details на карточках машин --- */
@media (min-width: 940px) {
  .vx-similar .sim-head { margin-bottom: 20px; }
  .vdp .vx-similar .car-grid { margin-top: 0; }
  .sim-all {
    background: var(--ink); border-color: var(--ink); color: #fff;
    padding: 13px 22px; border-radius: 9px;
    font-family: var(--display); font-stretch: 110%; font-weight: 700; font-size: 15px;
  }
  .sim-all .ic { background: #fff; }
  .sim-all:hover { background: var(--red); border-color: var(--red); color: #fff; }
  .sim-all:hover .ic { background: #fff; transform: translateX(3px); }
}


/* мобила: пластина — зона проверки, отделена воздухом от зоны решения
   (бирка+CTA плотно, пластина ниже — принятая композиция; прежний
   отступ жил на «.vx-lead-grid .vx-plate» и умер при переносе панели) */
@media (max-width: 939px) {
  .vx-deal .vx-plate { margin-top: 46px; }
}


/* ==========================================================================
   WARRANTY & RETURNS — пересборка в языке сайта: тёмный hero с плитой
   21/500/Day 0 (классы Financing), таймлайн, честный файнпринт двумя
   карточками, манифест «всё видно до отгрузки», FAQ-хвост.
   ========================================================================== */
.war-how { background: var(--paper); }
.war-how .wrap { padding-top: clamp(44px, 5.4vw, 72px); padding-bottom: clamp(38px, 4.6vw, 60px); }
.war-tl { max-width: 720px; }

.war-fine { background: var(--paper-tint); }
.war-fine .wrap { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(38px, 4.6vw, 60px); }
.wf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 761px) { .wf-grid { grid-template-columns: 1fr 1fr; gap: 22px; } }
.wf-card {
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 3px 16px rgba(20, 23, 27, .08);
  padding: clamp(20px, 2.6vw, 30px);
}
.wf-cap {
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
  color: #1E7B34; margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.wf-no .wf-cap { color: var(--red); }
.wf-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wf-card li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.6; color: var(--c-2nd); }
.wf-card li .ic { flex: none; width: 18px; height: 18px; margin-top: 4px; background: #1E7B34; }
.wf-no li .ic { background: var(--red); }
.wf-card li b { color: var(--ink); }

.war-before { background: var(--paper); }
.war-before .wrap { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(38px, 4.6vw, 60px); }
.wb-card {
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 3px 16px rgba(20, 23, 27, .1);
  padding: clamp(24px, 3vw, 40px);
}
.wb-copy { max-width: 62ch; }
.wb-copy h2 { margin: 6px 0 10px; }
.wb-copy p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--c-2nd); }
.wb-list { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 761px) { .wb-list { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.wb-list li {
  display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center;
  background: var(--paper-tint); border-radius: 10px; padding: 16px 18px;
}
.wb-list li .ic { grid-row: 1 / span 2; width: 22px; height: 22px; background: var(--red); }
.wb-list li b { font-size: 16px; color: var(--ink); }
.wb-list li span { font-size: 14px; color: #5C636B; }
.war-before .cover-cta { margin-top: 4px; justify-content: flex-start; }

.war-faq { background: var(--paper-tint); }
.war-faq .faq-more { margin-top: 18px; }

/* ==========================================================================
   THANK YOU — квитанция с шагами и открытая витрина «пока ждёте».
   ========================================================================== */
.ty-card .sec-kicker { margin-bottom: 8px; }
.ty-sub { max-width: 54ch; margin-left: auto; margin-right: auto; }
.ty-steps {
  list-style: none; counter-reset: ty; margin: 24px auto; padding: 20px 0 6px;
  border-top: 1px solid var(--line);
  display: grid; gap: 16px; text-align: left; max-width: 460px;
}
.ty-steps li { counter-increment: ty; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 12px; }
.ty-steps li::before {
  content: counter(ty); grid-row: 1 / span 2;
  width: 26px; height: 26px; border-radius: 50%; margin-top: 2px;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 700;
}
.ty-steps b { font-size: 16.5px; color: var(--ink); }
.ty-steps span { font-size: 15px; line-height: 1.55; color: #5C636B; }
.ty-floor { background: var(--paper-tint); }
.ty-floor .wrap { padding-top: clamp(38px, 4.6vw, 60px); padding-bottom: clamp(44px, 5.4vw, 72px); }
.ty-floor .sec-head { margin-bottom: 22px; }


/* --- warranty: доводка первого прогона --- */
/* hero без пустого низа: контент компактный, карты внутри нет */
.delivery.fin-hero.war-hero { min-height: 0; height: auto; }
.war-hero .wrap { padding-top: clamp(40px, 5vw, 70px); padding-bottom: clamp(44px, 5.6vw, 80px); }
.war-hero .fh-top { margin-bottom: 0; }
/* таймлайн по центру колонны, как заголовок */
.war-tl { margin-left: auto; margin-right: auto; }
.war-how .wrap { padding-bottom: clamp(30px, 3.6vw, 46px); }
.war-fine .wrap { padding-bottom: clamp(30px, 3.6vw, 46px); }


/* растяжку на полный экран задаёт .fin-hero .wrap (min-height 100svh
   в медиа 1120+) — у warranty конструктора сделки нет, hero компактный */
@media (min-width: 1120px) {
  .war-hero .wrap { min-height: 0; }
}


/* war-faq: три вопроса — одна центрированная колонна, а не левая
   половина шипингового двухколонника с пустотой справа; строка
   «Still have a question?» той же ширины */
.war-faq .faq-cols { display: block; max-width: 860px; margin: 0 auto; }
.war-faq .faq-cols .faq-list { width: 100%; max-width: none; }
.war-faq .faq-more { max-width: 860px; margin-left: auto; margin-right: auto; }


/* ==========================================================================
   QA-спринт 2: дизайн-система заголовков.
   H1 внутренних страниц гулял по трём значениям (44.8 About/Contact,
   46.4 Shipping/Financing/FAQ/Warranty, 51.2 Inventory/Privacy/Terms) —
   единый размер 46.4px на десктопе; главная и VDP — осознанные
   исключения. Мобильный H1 уже един (32px) — не трогаем.
   Thank You: H2 секции (40.8) был крупнее H1 карточки (38.4) —
   инверсия уровней снята на обоих разрешениях.
   Privacy/Terms H2 22.4 оставлены решением заказчика (стиль юр-документов).
   ========================================================================== */
@media (min-width: 940px) {
  /* точечно: .page-head h1 давал 51.2 (Inventory/Privacy/Terms),
     .fh-copy h1 — 44.8 (About/Contact); тёмные hero уже 46.4 */
  .page-head h1, .fh-copy h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
}
.ty-floor .sec-head h2 { font-size: clamp(24px, 2.4vw, 34px); }


/* ==========================================================================
   QA-спринт 3: переливы на 320px (тёмные hero и карточки инвентори).
   .d-facts держал три колонки (min-content 326-335px) и распирал
   грид-ячейку fh-top, у которой не было min-width:0; карточку машины
   распирала пара кнопок View Details + трубка.
   ========================================================================== */
.fh-top > *, .fh-side > * { min-width: 0; }
@media (max-width: 559px) {
  .d-facts { display: flex; flex-wrap: wrap; }
}
@media (max-width: 355px) {
  .cc-actions .btn { padding-left: 12px; padding-right: 12px; }
  .cc-actions { gap: 8px; }
}
.car-grid > * { min-width: 0; }


/* на сверхузких экранах кнопки переносят текст — nowrap-минимум длинных
   CTA («Get My Trade Number» и подобных) распирал карточки и страницу */
@media (max-width: 359px) {
  .btn { white-space: normal; line-height: 1.25; }
}