/* Landing pages only. Loaded after app.css, whose variables it reuses so the two page sets
   do not drift into two different greys.

   One rule shapes everything here: a landing page is read once, top to bottom, by someone
   who arrived from a search result and is deciding whether the number is trustworthy. So the
   numbers are large and the sentences that qualify them sit directly under them in grey,
   rather than in a footnote nobody reaches. */

.seo { max-width: 760px; }

.seo h1 { font-size: 24px; line-height: 1.25; margin: 22px 0 10px; }
.seo h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; }

.seo .lead { font-size: 17px; line-height: 1.5; margin: 0 0 8px; }
.seo p { margin: 0 0 8px; }

/* The qualifier under a number: why it is a median, what it is computed over, what it
   excludes. Grey, not hidden. */
.seo .why { color: var(--ink-dim); font-size: 13px; }
.seo .muted { color: var(--ink-faint); }
.seo .stamp { color: var(--ink-faint); font-size: 12px; margin-top: 26px; }

.seo .block {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 22px;
}

.seo table.grid {
  border-collapse: collapse;
  width: 100%;
  margin: 6px 0 10px;
}
.seo table.grid th,
.seo table.grid td {
  text-align: left;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.seo table.grid thead th {
  color: var(--ink-faint);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.seo table.grid tbody th { font-weight: 400; color: var(--ink-dim); }
.seo table.grid tr.sum th,
.seo table.grid tr.sum td { font-weight: 700; color: var(--ink); }
/* The row the form asked for, inside the by-year table. */
.seo table.grid tr.on td { background: var(--panel-2); font-weight: 700; }

/* ---------------------------------------------------------------- calculator */

.seo form.calc {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin: 14px 0 18px;
}
.seo form.calc label { display: flex; flex-direction: column; gap: 4px; }
.seo form.calc label span { font-size: 12px; color: var(--ink-dim); }
.seo form.calc input,
.seo form.calc select {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  min-width: 120px;
}
.seo form.calc button {
  font: inherit;
  font-weight: 600;
  padding: 7px 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--link);
  color: #fff;
  cursor: pointer;
}

/* The answer. Large because it is the only reason the page was opened. */
.seo .total {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  margin: 4px 0 12px;
  font-variant-numeric: tabular-nums;
}

/* The landed-price bridge: the uncleared median carried through customs and set against the
   cleared one. It is the only arithmetic on the page a visitor cannot get from the source
   sites, so it is the only paragraph in the customs block that is not body text. */
.seo .landed {
  font-size: 17px;
  line-height: 1.5;
  margin: 12px 0 2px;
  font-variant-numeric: tabular-nums;
}
.seo .landed-verdict {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- conversion */

.seo .cta { border-top: 2px solid var(--ink); }
.seo a.button {
  display: inline-block;
  margin: 4px 0 10px;
  padding: 10px 18px;
  border-radius: var(--radius);
  background: var(--link);
  color: #fff;
  font-weight: 600;
}
.seo a.button:hover { text-decoration: none; background: #14509f; }
.seo a.link { font-weight: 600; }

/* The one control on the page that writes something. A form rather than a link because it
   posts the page's own filters into the garage; styled as the primary action because putting
   this car under the ten-minute check is what the page is for. */
.seo form.watch { margin: 6px 0 10px; }
.seo form.watch button {
  font: inherit;
  font-weight: 600;
  padding: 11px 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--link);
  color: #fff;
  cursor: pointer;
}
.seo form.watch button:hover { background: #14509f; }

.seo nav.bands ul { list-style: none; padding: 0; margin: 0; }
.seo nav.bands li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.seo nav.bands li span { margin-left: 8px; font-size: 13px; }

/* What the checks find on this model. A list rather than a table: three columns of two
   numbers each read as a spreadsheet, and this is a paragraph broken into lines. */
.seo ul.findings { list-style: none; padding: 0; margin: 10px 0 0; }
.seo ul.findings li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.seo ul.findings li:last-child { border-bottom: 0; }

/* The one car shown in full. Bordered rather than tinted: the page is white on purpose,
   because a dark panel is where a photograph of a car stops being legible. */
.seo .pick .card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 10px;
}
.seo .pick .card h3 { margin: 0 0 4px; font-size: 18px; }
.seo .pick .card .specs { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.seo .pick .card .verdict { margin: 8px 0 0; }
.seo .pick .card .muted { color: var(--muted); font-size: 14px; }

/* The gate.
   These bars stand in for rows that are NOT in the document. They carry no text, no id and
   no width derived from any listing, because a skeleton built from real data is a leak with
   a loading animation on it. Four of them, always, whatever the count says. */
.seo .gate ul.skeletons { list-style: none; padding: 0; margin: 12px 0; }
.seo .gate ul.skeletons li {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  opacity: 0.55;
}
.seo .gate .bar {
  display: block;
  height: 11px;
  border-radius: 3px;
  background: linear-gradient(90deg, #e9edf3 0%, #f4f6f9 50%, #e9edf3 100%);
  margin-bottom: 7px;
}
.seo .gate .bar.wide  { width: 62%; }
.seo .gate .bar.short { width: 28%; margin-bottom: 0; }
.seo .gate a.cta-link {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius);
  background: var(--link);
  color: #fff;
  text-decoration: none;
}
.seo .gate a.cta-link:hover { background: #14509f; }

@media (max-width: 560px) {
  .seo h1 { font-size: 21px; }
  .seo .total { font-size: 26px; }
  .seo form.calc { padding: 12px; gap: 10px; }
  .seo form.calc label { flex: 1 1 130px; }
  .seo form.calc input, .seo form.calc select { width: 100%; min-width: 0; }
}

/* ---------------------------------------------------------------- catalogue pages
   Make, city and one make in one city. Same variables, same greys, same tabular numbers as
   the price page above; what is new is that these pages are read by someone comparing rather
   than someone learning, so the numbers come first as a strip and the children come as a
   scannable grid instead of a paragraph of links. */

.seo .crumbs {
  font-size: 12px;
  color: var(--ink-faint);
  margin: 18px 0 0;
}
.seo .crumbs a { color: var(--ink-dim); }
.seo .crumbs b { color: var(--ink); font-weight: 600; }

/* The four numbers at the top. Grid rather than flex so the columns line up across the
   breakpoint instead of reflowing into a ragged last row. */
.seo .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 16px 0 4px;
  overflow: hidden;
}
.seo .stats > div {
  background: var(--bg);
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.seo .stats .k { font-size: 12px; color: var(--ink-dim); }
.seo .stats .v { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.seo .stats .n { font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* The children. Two or three columns of one-line links, each carrying its own count and
   median, with a bar that turns a list into a shape: at a glance a reader sees that Toyota is
   three times Hyundai without reading either number. */
.seo ul.tiles {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1px 14px;
}
/* A row that is not a link. The town breakdown lists every town the model stands in, and
   only some of them carry enough cars to have earned a page: the ones that did are links,
   the ones that did not are the same row without the affordance. Same grid, so the columns
   line up down the whole list. */
.seo ul.tiles a,
.seo ul.tiles .flat {
  display: grid;
  /* Слак отдан полосе, а не подписи. Было `minmax(96px, 1fr)` на подпись, и на широкой
     плитке между «Тбилиси» и его полосой зияло полтораста пикселей: три куска строки,
     которые глаз не собирает в одну. */
  grid-template-columns: minmax(64px, max-content) minmax(36px, 1fr) 44px 60px;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.seo ul.tiles a:hover { background: var(--panel); }
.seo ul.tiles .flat { color: var(--ink-dim); cursor: default; }
.seo ul.tiles a:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.seo ul.tiles .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo ul.tiles .c,
.seo ul.tiles .p {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink-dim);
}
.seo ul.tiles .p { color: var(--ink-faint); }
.seo ul.tiles .bar {
  height: 6px;
  background: var(--panel-2);
  border-radius: 2px;
  overflow: hidden;
}
.seo ul.tiles .bar > span {
  display: block;
  height: 100%;
  background: var(--link);
  opacity: .55;
}

/* The one closed thing on the page. Bordered rather than filled: a solid block of colour
   here reads as an advertisement, and this is a sentence with a number in it. */
.seo .block.gate {
  border: 1px solid var(--link);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 26px;
}
.seo .block.gate .lead { margin-bottom: 10px; }
.seo .btn {
  display: inline-block;
  background: var(--link);
  color: #fff;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: var(--radius);
  font-size: 14px;
}
.seo .btn:hover { filter: brightness(1.08); }

/* Переключатель языка теперь один и живёт в `app.css` вместе с остальной шапкой. Здесь стоял
   второй набор правил для того же контрола, с текстовыми названиями языков вместо флагов, и
   расхождение между двумя шапками начиналось именно с него. */

/* ── Список машин ─────────────────────────────────────────────────────────────────────
   Коробка под фотографию задана жёстко и в разметке, и здесь. Картинки приходят с чужого
   CDN разной пропорции и разными порциями; без этого каждая при загрузке сдвигает всё, что
   под ней, и страница из шестидесяти строк дёргается несколько секунд. */
.seo ul.cars { list-style: none; margin: 10px 0 0; padding: 0; }
.seo ul.cars li { border-bottom: 1px solid var(--line); }
.seo ul.cars li:last-child { border-bottom: none; }
.seo ul.cars a {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 9px 4px;
  text-decoration: none;
  color: var(--ink);
}
.seo ul.cars a:hover { background: var(--panel); }
.seo ul.cars a:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.seo ul.cars .shot {
  aspect-ratio: 4 / 3;
  background: var(--panel-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.seo ul.cars .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seo ul.cars .meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.seo ul.cars .ttl {
  font-weight: 600;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seo ul.cars .sub { font-size: 13px; color: var(--ink-dim); }
.seo ul.cars .dot { margin: 0 5px; color: var(--ink-faint); }
.seo ul.cars .cust { font-size: 12px; }
.seo ul.cars .cust.ok { color: #1f6b45; }
.seo ul.cars .cust.no { color: #a8322a; }
.seo ul.cars .price {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .seo ul.cars a { grid-template-columns: 68px minmax(0, 1fr) auto; gap: 10px; }
  .seo ul.cars .ttl { font-size: 14px; }
  .seo ul.cars .price { font-size: 15px; }
}

/* ── Вступление и заключение ──────────────────────────────────────────────────────────
   Вступление крупнее основного текста и уже его по мере: это первое, что читают после
   заголовка, и оно должно прочитаться целиком, а не быть просмотренным. Заключение того же
   кегля, что основной текст, но отделено линией сверху: оно закрывает страницу, а не
   продолжает её. */
.seo .intro { margin: 2px 0 20px; }
.seo .intro p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 8px;
  max-width: 62ch;
}
.seo .intro p:last-child { margin-bottom: 0; }
.seo .outro {
  margin: 28px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.seo .outro p {
  color: var(--ink-dim);
  margin: 0 0 8px;
  max-width: 62ch;
}
.seo .outro p:last-child { margin-bottom: 0; }

/* ══ ЛЕНДИНГ: СЕТКА И ИЕРАРХИЯ ═══════════════════════════════════════════════════════════
   Страница шла одной колонкой в 760px посреди полутора тысяч пикселей, и все заголовки были
   одного кегля: 13px, капсом, серым. То есть в документе не было ни одного уровня, кроме h1,
   и глазу не за что зацепиться — читатель либо читает всё подряд, либо не читает ничего.
   Здесь три изменения и все три структурные, а не косметические: ширина, уровни, ответ. */

.seo { max-width: 1120px; }

/* ── Две колонки ─────────────────────────────────────────────────────────────────────
   Слева то, что читают подряд, справа то, во что заглядывают: ответ числами, кнопка в
   выдачу и таблица цен по годам. Таблица на семнадцать строк в основной колонке весила
   столько же, сколько весь разбор растаможки, а отвечает на вопрос, который задают редко. */
.seo .cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; }
.seo .col-main { min-width: 0; max-width: 68ch; }
.seo .col-side { min-width: 0; }

@media (min-width: 1000px) {
  .seo .cols { grid-template-columns: minmax(0, 1fr) 320px; }
  /* Липкая, потому что это единственный блок, к которому возвращаются по ходу чтения:
     цифра медианы нужна и у таблицы по годам, и у растаможки, и у списка машин. */
  .seo .col-side { position: sticky; top: calc(var(--h-top) + 16px); align-self: start; }
}

/* ── Панель ответа ───────────────────────────────────────────────────────────────────
   «Сколько стоит» было предложением в середине абзаца, тем же кеглем, что оговорка про
   медиану. Число, за которым пришли, набрано крупно и первым, остальные под ним в том
   порядке, в каком человек принимает решение: сколько машин, растаможены ли, какого года,
   сколько прошли. */
/* Сетка объявлена явно. Без неё панель наследовала `display: flex` от одноимённого правила
   в app.css и раскладывалась двумя в ряд по случайности: выглядело сносно ровно до первой
   ячейки, у которой нет возраста, и тогда ряды съезжали. */
.seo .figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px 18px;
  background: var(--panel);
  margin: 0 0 20px;
}
.seo .fig { padding: 10px 0; border-bottom: 1px solid var(--line); }
.seo .fig:last-of-type { border-bottom: none; }
.seo .fig-k {
  display: block;
  font-size: 11.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.seo .fig-v {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.seo .fig-n { display: block; font-size: 12.5px; color: var(--ink-dim); margin-top: 1px; }
.seo .fig-lead { padding-top: 0; grid-column: 1 / -1; }
.seo .btn-wide { grid-column: 1 / -1; }
.seo .fig-lead .fig-v { font-size: 34px; letter-spacing: -.5px; }

.seo .btn-wide { display: block; text-align: center; margin-top: 16px; }
.seo .figures .fig:nth-last-of-type(-n+2) { border-bottom: none; }

/* ── Уровни ──────────────────────────────────────────────────────────────────────────
   h2 был подписью к полю, а не заголовком раздела: 13px капсом читается как ярлык и
   проваливается в текст под ним. Настоящий кегль плюс линия сверху — и раздел виден
   периферийным зрением, а страница листается, а не вычитывается. */
.seo h1 {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -.5px;
  margin: 26px 0 12px;
  text-wrap: balance;
}
/* Мера, а не ширина контейнера: строка в 1 084 пикселя это 150 знаков, и глаз теряет начало
   следующей строки на каждом переносе. */
.seo > .lead,
.seo .col-main > .lead { font-size: 19px; line-height: 1.5; color: var(--ink); max-width: 62ch; }
.seo > .why { max-width: 62ch; }
.seo h2 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.2px;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 10px;
}
.seo .col-side h2 { font-size: 15px; }
.seo .block { padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--line); }
.seo .col-side .block { padding-top: 0; margin-top: 0; border-top: none; }

/* ── Список машин ────────────────────────────────────────────────────────────────────
   Карточка общая с подбором и тянет свою сетку оттуда; здесь только шапка блока и кнопка
   под ним. На широком экране карточки идут в две колонки: одна колонка из десяти карточек
   на 1 120px это полтора экрана прокрутки ради десяти машин. */
.seo .cars-block { border-top: 2px solid var(--ink); }
.seo .block-head { margin-bottom: 14px; }
.seo .block-note { color: var(--ink-dim); font-size: 14px; margin: 0; max-width: 62ch; }
.seo .cars-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0 0;
}
.seo .cars-count { font-size: 13px; color: var(--ink-dim); }
/* ОДНА КОЛОНКА КАРТОЧЕК, И ЭТО ЗАМЕР, А НЕ ВКУС. В двух колонках карточка получает 535px,
   а её собственная сетка внутри `240px 35px 200px`: колонка описания схлопывается до
   тридцати пяти пикселей и заголовок наезжает на цену. Карточка общая с подбором и
   рассчитана на всю ширину, так что делить её пополам значит чинить чужой компонент ради
   плотности, которой никто не просил. */

/* ── Таблица по годам в узкой колонке ───────────────────────────────────────────────── */
.seo .col-side table.grid { font-size: 13px; }
.seo .col-side table.grid th,
.seo .col-side table.grid td { padding: 5px 8px 5px 0; }