/* =============================================================================
   Cars Town — выкуп автомобилей в Москве и области
   carstown-vykup.ru

   Палитра и шрифт унаследованы от прежнего сайта, чтобы бренд остался
   узнаваемым. Убрано то, что делало страницу похожей на типовой лендинг:
   анимации появления, фотоколлажи под текстом, повторный квиз, плашки
   вроде «СРОЧНЫЙ ВЫКУП».

   Мобильная вёрстка первична: сначала правила для узкого экрана,
   потом расширения через min-width.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Шрифт. Лежит на своём домене: так он не зависит от чужого CDN
   и не тянет за собой сторонние запросы.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-var-cyrillic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212, U+2215;
}

:root {
  --sinij:        #2E6D9E;
  --sinij-temnyj: #205279;
  --sinij-fon:    #F3F5FC;
  --sinij-tuman:  rgba(46, 109, 158, .10);

  --tekst:        #222222;
  --tekst-tihij:  #666666;
  --tekst-blednyj:#8E8E8E;

  --bel:          #FFFFFF;
  --liniya:       #E1E1E1;
  --liniya-myag:  #EDEFF6;
  --temnyj:       #1B2A38;

  --zakruglenie:      16px;
  --zakruglenie-maloe:10px;

  --ten:      0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
  --ten-nizk: 0 1px 2px rgba(0,0,0,.05);

  --shrift: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

}

/* -----------------------------------------------------------------------------
   Основа
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Атрибут hidden обязан прятать элемент всегда. Без этой строки любое
   правило вида «.что-то { display: flex }» перебивает hidden, и элемент
   остаётся на экране: именно так полоса про cookie не исчезала после
   нажатия кнопок — выбор сохранялся, а полоса висела дальше. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bel);
  color: var(--tekst);
  font-family: var(--shrift);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--sinij); text-decoration: none; }
a:hover { color: var(--sinij-temnyj); }

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 30px; text-wrap: balance; }
h2 { font-size: 25px; }
h3 { font-size: 19px; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 2px solid var(--sinij);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--sinij); color: #fff; padding: 12px 18px; z-index: 200;
}
.skip:focus { left: 8px; top: 8px; color: #fff; }

/* Ловушка для роботов. Видимой быть не должна ни при каких условиях. */
.lovushka {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.obolochka {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}
.uzko { max-width: 820px; }

/* -----------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */
.knopka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--zakruglenie-maloe);
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.knopka--osnovnaya { background: var(--sinij); color: #fff; }
.knopka--osnovnaya:hover { background: var(--sinij-temnyj); color: #fff; }

.knopka--tihaya { background: transparent; color: var(--tekst-tihij); border-color: var(--liniya); }
.knopka--tihaya:hover { background: var(--sinij-fon); color: var(--tekst); }

.knopka--svetlaya { background: var(--bel); color: var(--sinij); border-color: var(--sinij); }
.knopka--svetlaya:hover { background: var(--sinij-fon); color: var(--sinij-temnyj); }

.knopka--shirokaya { width: 100%; }
.knopka--uzkaya { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.knopka[disabled] { opacity: .55; cursor: default; }

/* -----------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */
/* Фон непрозрачный и без backdrop-filter: слой размытия под липкой шапкой
   в Chrome периодически не дорисовывает хвост строки — гасли последние
   цифры телефона. Визуально разница незаметна, а дефект уходит. */
.shapka {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bel);
  border-bottom: 1px solid var(--liniya-myag);
}
.shapka__ryad {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
}
.logo { flex: 0 1 auto; min-width: 0; display: block; }
.logo img { width: 138px; max-width: 100%; height: auto; }

.menu { display: none; }

.shapka__svyaz {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Номер набирается отдельными группами, а не одной строкой. Длинный
   неразрывный прогон текста браузер рисовал не целиком: последний символ
   пропадал и появлялся только при наведении мыши. Отдельные группы такой
   строки не образуют. Порядок читается так же: +7 999 961-88-80. */
.nomer {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
}
.nomer > span { display: inline-block; }

/* Телефон в шапке — кнопка с отступами, а не голая ссылка. */
.tel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--liniya);
  border-radius: 100px;
  font-weight: 700;
  font-size: 16px;
  color: var(--tekst);
}
.tel:hover { background: var(--sinij-fon); border-color: var(--sinij); color: var(--sinij); }
.tel__znak { display: none; flex: 0 0 auto; }
.shapka__svyaz .knopka { display: none; }

.burger {
  width: 44px; height: 44px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  padding: 0 10px;
  background: none; border: 1px solid var(--liniya); border-radius: 8px;
  cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--tekst); border-radius: 2px; }

.menu.raskryto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  left: 8px; right: 8px; top: calc(100% + 6px);
  padding: 10px;
  background: var(--bel);
  border: 1px solid var(--liniya);
  border-radius: var(--zakruglenie);
  box-shadow: var(--ten);
}
.menu a {
  padding: 13px 12px;
  color: var(--tekst);
  font-weight: 500;
  border-radius: 8px;
}
.menu a:hover { background: var(--sinij-fon); color: var(--sinij); }

@media (max-width: 400px) {
  .shapka__ryad { gap: 8px; }
  .logo img { width: 96px; }
  .tel { font-size: 15px; padding: 6px 10px; gap: 6px; }
}
@media (min-width: 480px) {
  .tel__znak { display: block; }
  .tel { padding: 8px 14px; }
}

/* -----------------------------------------------------------------------------
   Первый экран
   -------------------------------------------------------------------------- */
.pervyj { padding: 26px 0 34px; background: linear-gradient(180deg, var(--sinij-fon) 0%, var(--bel) 100%); }

.nadzagolovok {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sinij);
}
.pervyj__lid {
  font-size: 17px;
  color: var(--tekst-tihij);
  max-width: 34em;
}
.pervyj__setka { display: flex; flex-direction: column; }
.pervyj__tekst    { order: 1; }
.pervyj__deystvie { order: 2; }
.zvonok           { order: 3; }
.pervyj__foto { display: none; }





/* Поля ввода */
.pole { display: block; position: relative; }
.pole__podpis {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tekst-tihij);
}
.pole__podpis em { font-style: normal; font-weight: 400; color: var(--tekst-blednyj); }

.pole input {
  width: 100%;
  min-height: 54px;
  padding: 13px 15px;
  font: inherit;
  font-size: 17px;
  color: var(--tekst);
  background: var(--bel);
  border: 1px solid var(--liniya);
  border-radius: var(--zakruglenie-maloe);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pole input::placeholder { color: var(--tekst-blednyj); }
.pole input:focus {
  outline: none;
  border-color: var(--sinij);
  box-shadow: 0 0 0 3px var(--sinij-tuman);
}
.pole input:disabled { background: var(--sinij-fon); color: var(--tekst-blednyj); }
.pole input.nevernoe { border-color: #C0553F; }

/* Подсказка марок и моделей */
.podskazka {
  position: absolute;
  z-index: 30;
  left: 0; right: 0; top: calc(100% + 4px);
  max-height: 320px;
  margin: 0; padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: var(--bel);
  border: 1px solid var(--liniya);
  border-radius: var(--zakruglenie-maloe);
  box-shadow: var(--ten);
}
.podskazka li {
  padding: 12px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}
.podskazka li:hover, .podskazka li.pod-kursorom { background: var(--sinij-fon); color: var(--sinij); }

.soglasie { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--tekst-tihij); }
.soglasie label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.soglasie input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--sinij); flex: 0 0 auto; }

/* Когда человек отправил форму, не поставив галочку. */
.soglasie.nevernoe {
  padding: 10px 12px;
  margin-left: -12px;
  margin-right: -12px;
  background: #FDF0EE;
  border-radius: var(--zakruglenie-maloe);
  color: #8A2B1C;
}
.soglasie.nevernoe a { color: #8A2B1C; }
.soglasie.nevernoe input { outline: 2px solid #C0553F; outline-offset: 2px; }

.messendzhery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.messendzhery--po-centru { justify-content: center; }
.messendzhery__podpis { font-size: 14px; color: var(--tekst-tihij); }
.messendzher {
  padding: 9px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sinij);
  background: var(--bel);
  border: 1px solid var(--liniya);
  border-radius: 100px;
}
.messendzher:hover { background: var(--sinij-fon); border-color: var(--sinij); }

/* Факты под первым экраном */
.fakty {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  background: var(--liniya-myag);
  border: 1px solid var(--liniya-myag);
  border-radius: var(--zakruglenie);
  overflow: hidden;
}
.fakty li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 14px;
  background: var(--bel);
}
.fakty strong { font-size: 19px; font-weight: 700; }
.fakty span { font-size: 14px; color: var(--tekst-tihij); }

/* -----------------------------------------------------------------------------
   Полосы разделов
   -------------------------------------------------------------------------- */
.polosa { padding: 40px 0; }
.polosa--svetlaya { background: var(--sinij-fon); }
.polosa--tyomnaya { background: var(--temnyj); color: #fff; }
.polosa--tyomnaya h2 { color: #fff; }

.podzagolovok {
  margin: -4px 0 22px;
  max-width: 44em;
  font-size: 16px;
  color: var(--tekst-tihij);
}
.polosa--tyomnaya .podzagolovok { color: rgba(255,255,255,.72); }

.primechanie { font-size: 14px; color: var(--tekst-blednyj); line-height: 1.5; }
.primechanie--po-centru { margin-top: 18px; text-align: center; }

/* -----------------------------------------------------------------------------
   Цена
   -------------------------------------------------------------------------- */
.cena__karta {
  padding: 20px;
  background: var(--sinij-fon);
  border-left: 3px solid var(--sinij);
  border-radius: 0 var(--zakruglenie) var(--zakruglenie) 0;
}
.krupno { font-size: 19px; line-height: 1.45; }
.krupno strong { color: var(--sinij-temnyj); }

.ne-nuzhny { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--liniya); }

/* Списки с плюсами и минусами */
.spisok { margin: 0 0 14px; padding: 0; list-style: none; }
.spisok li {
  position: relative;
  padding: 0 0 0 28px;
  margin-bottom: 11px;
  line-height: 1.5;
}
.spisok li::before {
  position: absolute;
  left: 0; top: .55em;
  width: 16px; height: 2px;
  content: '';
  border-radius: 2px;
}
.spisok--plus li::before {
  background: var(--sinij);
  box-shadow: 0 0 0 0 transparent;
}
.spisok--plus li::after {
  position: absolute;
  left: 7px; top: calc(.55em - 7px);
  width: 2px; height: 16px;
  content: '';
  background: var(--sinij);
  border-radius: 2px;
}
.spisok--minus li::before { background: var(--tekst-blednyj); }

/* -----------------------------------------------------------------------------
   Что берём / не берём
   -------------------------------------------------------------------------- */
.dve-kolonki { display: grid; gap: 14px; }
.karta {
  padding: 20px;
  background: var(--bel);
  border: 1px solid var(--liniya-myag);
  border-radius: var(--zakruglenie);
  box-shadow: var(--ten-nizk);
}
.karta--net { background: #FAFBFD; }
.karta h3 { margin-bottom: 14px; }

/* -----------------------------------------------------------------------------
   Квиз
   -------------------------------------------------------------------------- */
.kviz-vrezka { margin-top: 22px; }

.kviz {
  padding: 22px 20px 24px;
  background: var(--bel);
  border: 1px solid var(--liniya-myag);
  border-radius: var(--zakruglenie);
  box-shadow: var(--ten);
}

/* Шапка: название, счётчик шагов и тонкая полоса прогресса. Полоса важнее,
   чем кажется: она сразу обещает, что шагов немного. */
.kviz__shapka { margin-bottom: 20px; }
.kviz__zagolovok { font-size: 20px; margin-bottom: 4px; }
.kviz__meta { margin: 0 0 12px; font-size: 13px; color: var(--tekst-blednyj); }
.kviz__polosa {
  height: 3px;
  border-radius: 3px;
  background: var(--liniya-myag);
  overflow: hidden;
}
.kviz__polosa span {
  display: block;
  width: 33%;
  height: 100%;
  border-radius: 3px;
  background: var(--sinij);
  transition: width .25s ease;
}

.kviz__shag { margin: 0; padding: 0; border: 0; }
.kviz__vopros {
  padding: 0;
  margin-bottom: 16px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.kviz__podskaz { margin: 18px 0 10px; font-size: 14px; color: var(--tekst-tihij); line-height: 1.5; }

.kviz__polya { display: grid; gap: 14px; }

.kviz__nizhnij { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.kviz__nizhnij .knopka { flex: 1 1 auto; }

/* «Назад» — тихая текстовая кнопка слева, чтобы не спорить с основной. */
.kviz__nazad {
  flex: 0 0 auto;
  margin-right: auto;
  padding: 10px 2px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--tekst-tihij);
  cursor: pointer;
}
.kviz__nazad:hover { color: var(--sinij); }

/* «Пропустить» стоит рядом с «Продолжить»: год и пробег знают не все,
   и лучше отпустить человека дальше, чем потерять его на этом шаге. */
.kviz__propustit {
  flex: 0 0 auto;
  padding: 12px 14px;
  background: none;
  border: 1px solid var(--liniya);
  border-radius: var(--zakruglenie-maloe);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--tekst-tihij);
  cursor: pointer;
  white-space: nowrap;
}
.kviz__propustit:hover { border-color: var(--sinij); color: var(--sinij); }

.varianty { display: grid; gap: 8px; }
.varianty--v-ryad { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }

.variant {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 50px;
  padding: 11px 14px;
  background: var(--bel);
  border: 1px solid var(--liniya);
  border-radius: var(--zakruglenie-maloe);
  cursor: pointer;
  font-size: 15px;
  line-height: 1.35;
  transition: border-color .15s ease, background-color .15s ease;
}
.variant input { width: 19px; height: 19px; accent-color: var(--sinij); flex: 0 0 auto; margin: 0; }
.variant:hover { border-color: var(--sinij); }
.variant:has(input:checked) { border-color: var(--sinij); background: var(--sinij-fon); }
.variant--malyj { min-height: 46px; padding: 10px 12px; font-size: 14px; justify-content: center; }
.variant--malyj input { width: 16px; height: 16px; }

.messendzher-vybor { margin-top: 20px; }
.messendzher-vybor .pole__podpis { margin-bottom: 8px; }

.kviz__otvet {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--zakruglenie-maloe);
  font-size: 15px;
  background: var(--sinij-fon);
}
.kviz__otvet.oshibka { background: #FDF0EE; color: #8A2B1C; }

.kviz__gotovo { padding: 4px 0 2px; }
.kviz__gotovo h3 { color: var(--sinij); margin-bottom: 8px; }
.kviz__gotovo p { font-size: 16px; color: var(--tekst-tihij); }

/* -----------------------------------------------------------------------------
   Шаги сделки
   -------------------------------------------------------------------------- */
.shagi {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.shag {
  padding: 20px;
  background: var(--bel);
  border: 1px solid var(--liniya-myag);
  border-radius: var(--zakruglenie);
  box-shadow: var(--ten-nizk);
}
.shag__nomer {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--sinij);
}
.shag h3 { margin-bottom: 6px; }
.shag p { font-size: 16px; color: var(--tekst-tihij); }

/* -----------------------------------------------------------------------------
   Эксперт
   -------------------------------------------------------------------------- */
.ekspert { display: grid; gap: 20px; }
.ekspert__foto img { border-radius: var(--zakruglenie); width: 100%; }
.podpis-k-foto { margin: 9px 0 0; font-size: 14px; color: var(--tekst-blednyj); }

/* -----------------------------------------------------------------------------
   Бесплатно
   -------------------------------------------------------------------------- */
.plitki {
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.plitki li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 17px 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--zakruglenie);
}
.plitki strong { font-size: 17px; }
.plitki span { font-size: 15px; color: rgba(255,255,255,.68); line-height: 1.45; }
.itog { font-size: 17px; color: rgba(255,255,255,.9); }

/* -----------------------------------------------------------------------------
   Договор
   -------------------------------------------------------------------------- */
.dogovor__karta {
  padding: 20px;
  background: var(--sinij-fon);
  border-radius: var(--zakruglenie);
}
.dogovor__karta .knopka { margin-top: 6px; }

/* -----------------------------------------------------------------------------
   Сделки
   -------------------------------------------------------------------------- */
.sdelki {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sdelka {
  overflow: hidden;
  background: var(--bel);
  border: 1px solid var(--liniya-myag);
  border-radius: var(--zakruglenie);
  box-shadow: var(--ten-nizk);
}
.sdelka img { width: 100%; aspect-ratio: 382 / 250; object-fit: cover; background: var(--liniya-myag); }
.sdelka__telo { padding: 14px 16px 16px; }
.sdelka__nazvanie { font-weight: 700; font-size: 17px; margin-bottom: 3px; }
.sdelka__stroka { font-size: 14px; color: var(--tekst-tihij); }
.sdelka__summa {
  margin-top: 10px;
  font-size: 21px;
  font-weight: 700;
  color: var(--sinij);
  letter-spacing: -.01em;
}

/* -----------------------------------------------------------------------------
   Отзывы
   -------------------------------------------------------------------------- */
.otzyvy { display: grid; gap: 12px; }
.otzyv {
  margin: 0;
  padding: 20px;
  background: var(--bel);
  border: 1px solid var(--liniya-myag);
  border-radius: var(--zakruglenie);
  box-shadow: var(--ten-nizk);
}
.otzyv p { font-size: 16px; line-height: 1.55; color: var(--tekst); }
.otzyv footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--liniya-myag);
  font-weight: 700;
}
.otzyv footer span { font-weight: 400; font-size: 14px; color: var(--tekst-blednyj); }

/* -----------------------------------------------------------------------------
   Вопросы
   -------------------------------------------------------------------------- */
.voprosy {
  background: var(--bel);
  border: 1px solid var(--liniya-myag);
  border-radius: var(--zakruglenie);
  overflow: hidden;
}
.vopros + .vopros { border-top: 1px solid var(--liniya-myag); }
.vopros summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.vopros summary::-webkit-details-marker { display: none; }
.vopros summary::after {
  content: '';
  flex: 0 0 auto;
  width: 11px; height: 11px;
  margin-top: 6px;
  border-right: 2px solid var(--sinij);
  border-bottom: 2px solid var(--sinij);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.vopros[open] summary::after { transform: rotate(-135deg); }
.vopros summary:hover { color: var(--sinij); }
.vopros__otvet { padding: 0 18px 18px; }
.vopros__otvet p { font-size: 16px; color: var(--tekst-tihij); line-height: 1.55; }

/* -----------------------------------------------------------------------------
   Финальный призыв
   -------------------------------------------------------------------------- */
.finalnyj { background: var(--sinij-fon); }
.finalnyj__vnutri { text-align: center; }
.finalnyj p { max-width: 34em; margin-inline: auto; color: var(--tekst-tihij); }
.finalnyj__knopki {
  display: grid;
  gap: 10px;
  margin: 20px 0 16px;
}

/* -----------------------------------------------------------------------------
   Подвал
   -------------------------------------------------------------------------- */
.podval {
  padding: 34px 0 30px;
  background: var(--temnyj);
  color: rgba(255,255,255,.72);
  font-size: 15px;
}
.podval__setka { display: grid; gap: 24px; }
.podval h3 { margin-bottom: 10px; font-size: 15px; color: #fff; }
.podval p { margin: 0 0 7px; }
.podval a { color: rgba(255,255,255,.86); }
.podval a:hover { color: #fff; text-decoration: underline; }
/* В подвале стоит отдельный файл логотипа, перекрашенный под тёмный фон:
   кузов светлый, блики тёмные, надпись белая. Перекраска фильтром
   схлопывала рисунок в белое пятно, а светлая подложка выглядела заплаткой. */
.podval__logo { width: 150px; margin-bottom: 14px; }
.podval__melko { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.45; }

/* -----------------------------------------------------------------------------
   Уведомление о cookie
   -------------------------------------------------------------------------- */

/* Полоса про cookie. Держим её низкой: она обязана быть заметной,
   но не должна съедать пол-экрана на телефоне и мешать нажать кнопки. */
.cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--temnyj);
  color: rgba(255,255,255,.86);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 -2px 12px rgba(0,0,0,.14);
}
.cookie__tekst { margin: 0; }
.cookie a { color: #fff; text-decoration: underline; }

.cookie__knopki { display: flex; gap: 8px; }

/* Кнопки полосы — свои, а не общие: общие высокие, и полоса
   становилась в полэкрана. Ширина нажатия при этом остаётся большой. */
.cookie__da,
.cookie__net {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
}
.cookie__da { background: var(--sinij); color: #fff; }
.cookie__da:hover { background: var(--sinij-temnyj); }
.cookie__net { background: transparent; color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.35); }
.cookie__net:hover { background: rgba(255,255,255,.12); color: #fff; }

/* =============================================================================
   Планшет
   ============================================================================= */
@media (min-width: 700px) {
  body { font-size: 18px; }
  h1 { font-size: 40px; }
  h2 { font-size: 30px; }
  h3 { font-size: 20px; }

  .obolochka { padding: 0 24px; }
  .polosa { padding: 56px 0; }
  .pervyj { padding: 36px 0 46px; }


  .fakty { grid-template-columns: repeat(4, 1fr); }
  .fakty strong { font-size: 21px; }

  .dve-kolonki { grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .shagi { grid-template-columns: 1fr 1fr; gap: 16px; }
  .plitki { grid-template-columns: repeat(2, 1fr); }
  .otzyvy { grid-template-columns: 1fr 1fr; gap: 16px; }
  .sdelki { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .karta, .shag, .otzyv, .cena__karta, .dogovor__karta { padding: 26px; }
  .kviz { padding: 26px 26px 28px; }
  .kviz__zagolovok { font-size: 22px; }

  .kviz__polya--dva { grid-template-columns: 1fr 1fr; }
  .kviz__nizhnij .knopka { flex: 0 0 auto; min-width: 180px; }

  /* Вторая колонка появляется только вместе с фотографией. */
  .ekspert:has(.ekspert__foto) { grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }

  .finalnyj__knopki { display: flex; justify-content: center; }
  .finalnyj__knopki .knopka { min-width: 220px; }

  .podval__setka { grid-template-columns: 1fr 1fr; gap: 30px; }

  .cookie {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 9px 24px calc(9px + env(safe-area-inset-bottom));
  }
  .cookie__tekst { flex: 1; }
  .cookie__knopki { flex: 0 0 auto; }
  .cookie__da, .cookie__net { flex: 0 0 auto; min-height: 36px; font-size: 13px; }
}

/* =============================================================================
   Компьютер
   ============================================================================= */
@media (min-width: 900px) {
  .obolochka { padding: 0 32px; }
}

@media (min-width: 1000px) {
  h1 { font-size: 46px; }
  h2 { font-size: 33px; }

  .polosa { padding: 68px 0; }
  .pervyj { padding: 44px 0 56px; }

  .shapka__svyaz .knopka { display: inline-flex; }
  .tel { font-size: 18px; }
  .logo img { width: 164px; }


  .shagi { grid-template-columns: repeat(4, 1fr); }
  .plitki { grid-template-columns: repeat(4, 1fr); }
  .otzyvy { grid-template-columns: repeat(3, 1fr); }
  .sdelki { grid-template-columns: repeat(3, 1fr); }
  .podval__setka { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

  .dogovor__karta { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
  .dogovor__karta .spisok { margin-bottom: 0; }
  .dogovor__karta .knopka { flex: 0 0 auto; margin-top: 0; }
}

/* =============================================================================
   Первый экран в две колонки.
   Раньше он включался с 1000px, и на планшете колонки выходили узкими:
   заголовок ломался на четыре строки. Теперь две колонки только там,
   где им хватает места.
   ============================================================================= */
@media (min-width: 1100px) {
  /* На широком экране раскладка другая: слева заголовок и телефон,
     справа квиз во всю высоту. start, а не center — иначе левая колонка
     ездила вверх-вниз вслед за высотой квиза. */
  .pervyj__setka {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "tekst  kviz"
      "zvonok kviz";
    grid-template-rows: auto 1fr;
    column-gap: 40px;
    align-items: start;
  }
  .pervyj__tekst    { grid-area: tekst; }
  .zvonok           { grid-area: zvonok; }
  .pervyj__deystvie { grid-area: kviz; }
  .kviz-vrezka { margin-top: 0; }
  .pervyj__lid { font-size: 19px; }
}

/* =============================================================================
   Меню в строку — только когда для него есть место.
   Ниже 1180px шесть пунктов вместе с номером и кнопкой в строку не влезают,
   и номер уезжал за край экрана. Там остаётся бургер.
   ============================================================================= */
@media (min-width: 1180px) {
  .menu {
    display: flex;
    gap: 2px;
    min-width: 0;
    margin-left: 14px;
    overflow: hidden;
  }
  .menu a {
    padding: 8px 10px;
    font-size: 14px;
    color: var(--tekst);
    border-radius: 8px;
    font-weight: 500;
    white-space: nowrap;
  }
  .menu a:hover { background: var(--sinij-fon); color: var(--sinij); }
  .burger { display: none; }
}

/* =============================================================================
   Юридические страницы: оферта и политика
   ============================================================================= */
.legal { max-width: 780px; }
.legal__head { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--liniya); }
.legal h1 { font-size: 26px; line-height: 1.25; }
.legal__meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 12px; font-size: 14px; color: var(--tekst-blednyj);
}
.legal section { margin-bottom: 30px; }
.legal h2 { font-size: 20px; margin-bottom: 12px; }
.legal p, .legal li { font-size: 16px; line-height: 1.6; color: var(--tekst); }
.legal ul, .legal ol { padding-left: 22px; margin: 0 0 1em; }
.legal li { margin-bottom: 8px; }
.legal a { text-decoration: underline; }

.req {
  padding: 16px 18px;
  margin: 0 0 1em;
  background: var(--sinij-fon);
  border-radius: var(--zakruglenie-maloe);
  font-size: 15px;
  line-height: 1.7;
}
.legal__note {
  padding: 14px 16px;
  margin: 0 0 1em;
  background: var(--sinij-fon);
  border-left: 3px solid var(--sinij);
  border-radius: 0 var(--zakruglenie-maloe) var(--zakruglenie-maloe) 0;
  font-size: 15px;
}

/* Таблицы в документах свёрстаны не тегом table, а рядами из div.
   Без своих правил все ячейки сливались в сплошной текст.

   На телефоне колонки не помещаются, поэтому ряд превращается в карточку:
   первая ячейка — заголовком, остальные под ней отдельными строками. */
.ltable {
  margin: 0 0 1.2em;
  border: 1px solid var(--liniya);
  border-radius: var(--zakruglenie-maloe);
  overflow: hidden;
  font-size: 15px;
}
.ltable__head { display: none; }
.ltable__row { padding: 13px 15px; line-height: 1.5; }
.ltable__row + .ltable__row { border-top: 1px solid var(--liniya-myag); }
.ltable__row > span { display: block; color: var(--tekst-tihij); }
.ltable__row > span:first-child { font-weight: 600; color: var(--tekst); margin-bottom: 4px; }
.ltable__row > span + span { margin-top: 3px; }
.ltable__n {
  font-weight: 700 !important;
  color: var(--sinij) !important;
  margin-bottom: 4px;
}

@media (min-width: 700px) {
  .legal h1 { font-size: 32px; }
  .legal h2 { font-size: 22px; }

  /* Есть место — раскладываем ряды по колонкам и возвращаем шапку. */
  .ltable__head { display: grid; }
  .ltable__head,
  .ltable__row {
    display: grid;
    gap: 4px 18px;
    padding: 12px 16px;
    align-items: start;
  }
  .ltable__head {
    background: var(--sinij-fon);
    font-weight: 600;
    color: var(--tekst);
  }
  .ltable__head + .ltable__row { border-top: 1px solid var(--liniya); }
  .ltable__row > span,
  .ltable__row > span:first-child { display: block; margin: 0; font-weight: 400; color: var(--tekst-tihij); }
  .ltable__n { margin: 0; }

  .ltable--two .ltable__head,
  .ltable--two .ltable__row   { grid-template-columns: 1fr 1fr; }
  .ltable--data .ltable__head,
  .ltable--data .ltable__row  { grid-template-columns: 1fr 1.7fr 1fr; }
  .ltable--goals .ltable__head,
  .ltable--goals .ltable__row { grid-template-columns: 34px 1.4fr 1.2fr; }
}

/* =============================================================================
   Блок звонка в первом экране.
   Телефон — главное действие сайта, поэтому он крупнее всего остального.
   ============================================================================= */
.zvonok {
  margin-top: 22px;
  padding: 18px;
  background: var(--bel);
  border: 1px solid var(--liniya-myag);
  border-radius: var(--zakruglenie);
  box-shadow: var(--ten);
}
.zvonok__vvod { margin: 0 0 14px; font-size: 16px; color: var(--tekst-tihij); }

/* Сам номер — большая кнопка. Текст внутри центрирован и с отступами,
   поэтому у последнего символа всегда есть запас с обеих сторон. */
.zvonok__nomer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 12px 16px;
  background: var(--sinij);
  color: #fff;
  border-radius: var(--zakruglenie-maloe);
  font-size: 21px;
  font-weight: 700;
  transition: background-color .15s ease;
}
.zvonok__nomer:hover { background: var(--sinij-temnyj); color: #fff; }
.zvonok__nomer .tel__znak { display: block; }
.zvonok__podpis { margin: 12px 0 0; font-size: 14px; color: var(--tekst-tihij); text-align: center; }
.zvonok .messendzhery { justify-content: center; margin-top: 14px; }

/* =============================================================================
   Примеры цены
   ============================================================================= */
.primery { display: grid; gap: 14px; margin-bottom: 20px; }
.primer {
  padding: 20px;
  background: var(--bel);
  border: 1px solid var(--liniya-myag);
  border-radius: var(--zakruglenie);
  box-shadow: var(--ten-nizk);
}
.primer h3 { font-size: 17px; margin-bottom: 12px; color: var(--tekst-tihij); font-weight: 600; }
.primer__schet {
  margin: 0 0 12px;
  padding: 13px 15px;
  background: var(--sinij-fon);
  border-radius: var(--zakruglenie-maloe);
  font-size: 16px;
  line-height: 1.5;
}
.primer__schet strong { font-size: 19px; color: var(--sinij-temnyj); white-space: nowrap; }
.primer p:last-child { font-size: 16px; color: var(--tekst-tihij); }

.vyvod {
  padding: 16px 18px;
  background: var(--sinij-fon);
  border-left: 3px solid var(--sinij);
  border-radius: 0 var(--zakruglenie-maloe) var(--zakruglenie-maloe) 0;
  font-size: 17px;
  line-height: 1.5;
}
.chestno { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--liniya); }
.chestno h3 { margin-bottom: 10px; }
.chestno p { font-size: 16px; color: var(--tekst-tihij); }
.chestno em { font-style: normal; font-weight: 600; color: var(--tekst); }
.chestno .spisok { margin: 14px 0 16px; }
.chestno .spisok li { font-size: 16px; color: var(--tekst-tihij); margin-bottom: 8px; }

.stroka-dtp {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--bel);
  border: 1px solid var(--liniya);
  border-radius: var(--zakruglenie-maloe);
  font-size: 15px;
  color: var(--tekst-tihij);
}

/* =============================================================================
   Лента времени «что будет после звонка»
   ============================================================================= */
.lenta-vremeni { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lenta-vremeni li {
  position: relative;
  padding: 18px 20px 18px 20px;
  background: var(--bel);
  border: 1px solid var(--liniya-myag);
  border-left: 3px solid var(--sinij);
  border-radius: 0 var(--zakruglenie) var(--zakruglenie) 0;
  box-shadow: var(--ten-nizk);
}
.lenta-vremeni__kogda {
  display: inline-block;
  margin-bottom: 7px;
  padding: 3px 10px;
  background: var(--sinij-fon);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sinij-temnyj);
  white-space: nowrap;
}
.lenta-vremeni h3 { font-size: 18px; margin-bottom: 5px; }
.lenta-vremeni p { font-size: 16px; color: var(--tekst-tihij); }

/* =============================================================================
   Почему цена меняется
   ============================================================================= */
.prichiny { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: prichina; }
.prichiny li {
  position: relative;
  padding: 18px 20px 18px 60px;
  background: var(--bel);
  border: 1px solid var(--liniya-myag);
  border-radius: var(--zakruglenie);
  box-shadow: var(--ten-nizk);
  counter-increment: prichina;
}
.prichiny li::before {
  position: absolute;
  left: 20px; top: 18px;
  content: counter(prichina);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sinij);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}
.prichiny h3 { font-size: 17px; margin-bottom: 5px; }
.prichiny p { font-size: 16px; color: var(--tekst-tihij); }

/* =============================================================================
   Города
   ============================================================================= */
.goroda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.goroda li {
  padding: 8px 14px;
  background: var(--bel);
  border: 1px solid var(--liniya);
  border-radius: 100px;
  font-size: 15px;
  color: var(--tekst-tihij);
}

@media (min-width: 700px) {
  .zvonok { padding: 24px; }
  .zvonok__nomer { font-size: 25px; min-height: 68px; }
  .primery { grid-template-columns: 1fr 1fr; gap: 18px; }
  .lenta-vremeni { grid-template-columns: 1fr 1fr; gap: 16px; }
  .primer, .lenta-vremeni li, .prichiny li { padding: 24px; }
  .prichiny li { padding-left: 66px; }
  .prichiny li::before { left: 24px; top: 24px; }
}

@media (min-width: 1000px) {
  .lenta-vremeni { grid-template-columns: repeat(4, 1fr); }
  .zvonok__vvod { font-size: 17px; }
}

/* =============================================================================
   Страница марок
   ============================================================================= */
.zvonok--ploskij { box-shadow: none; background: var(--sinij-fon); border-color: transparent; }

.marki-navigaciya {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.marki-navigaciya a {
  display: block;
  padding: 9px 15px;
  background: var(--bel);
  border: 1px solid var(--liniya);
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
}
.marki-navigaciya a:hover { border-color: var(--sinij); background: var(--bel); }

.marki { display: grid; gap: 14px; }
.marka {
  padding: 20px;
  background: var(--bel);
  border: 1px solid var(--liniya-myag);
  border-radius: var(--zakruglenie);
  box-shadow: var(--ten-nizk);
  /* Липкая шапка не должна накрывать заголовок при переходе по якорю. */
  scroll-margin-top: 84px;
}
.marka h2 { font-size: 21px; margin-bottom: 6px; }
.marka__modeli {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--sinij-temnyj);
  font-weight: 600;
  line-height: 1.45;
}
.marka p { font-size: 16px; color: var(--tekst-tihij); }
.marka__smotrim {
  margin-top: 12px;
  padding: 13px 15px;
  background: var(--sinij-fon);
  border-radius: var(--zakruglenie-maloe);
  font-size: 15px !important;
  color: var(--tekst) !important;
  line-height: 1.55;
}
.marka__smotrim strong { color: var(--tekst); }

@media (min-width: 700px) {
  .marki { grid-template-columns: 1fr 1fr; gap: 18px; }
  .marka { padding: 26px; }
}
@media (min-width: 1000px) {
  .marki { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================================
   Окно с документом поверх страницы

   Нужно, чтобы ссылка на политику или оферту не уводила со страницы:
   заполненный квиз при уходе терялся. Человек читает и возвращается
   ровно туда, где был.
   ============================================================================= */
.bez-prokrutki { overflow: hidden; }

.okno {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.okno__fon {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 40, .55);
}
.okno__karta {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 780px;
  max-height: 92vh;
  background: var(--bel);
  border-radius: var(--zakruglenie) var(--zakruglenie) 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.28);
}
.okno__shapka {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--liniya-myag);
}
.okno__zagolovok { flex: 1; font-size: 16px; line-height: 1.3; }
.okno__krest {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--liniya);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--tekst-tihij);
  cursor: pointer;
}
.okno__krest:hover { border-color: var(--sinij); color: var(--sinij); }

.okno__telo {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px;
}
.okno__telo h2 { font-size: 18px; margin-bottom: 10px; }
.okno__telo p, .okno__telo li { font-size: 15px; line-height: 1.6; color: var(--tekst); }
.okno__telo section { margin-bottom: 24px; }
.okno__zhdem { color: var(--tekst-tihij); }

.okno__nizhnij {
  flex: 0 0 auto;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--liniya-myag);
}
.okno__nizhnij .knopka { width: 100%; }

@media (min-width: 700px) {
  .okno { align-items: center; padding: 24px; }
  .okno__karta { border-radius: var(--zakruglenie); max-height: 86vh; }
  .okno__shapka, .okno__telo, .okno__nizhnij { padding-left: 26px; padding-right: 26px; }
  .okno__nizhnij .knopka { width: auto; min-width: 220px; }
}

/* =============================================================================
   Кнопка возврата на главную
   ============================================================================= */
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  margin-bottom: 18px;
  padding: 11px 18px;
  background: var(--bel);
  border: 1px solid var(--liniya);
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tekst);
}
.legal__back:hover { border-color: var(--sinij); color: var(--sinij); background: var(--sinij-fon); }