/* Стили сайта поверх токенов дизайн-системы «Табло» (assets/tokens.css).
   Правила системы: поверхности разделяет только граница, теней нет, радиус 2 px,
   база пространства 6 px, контрол 48 px, строка данных 26 px, капса нет,
   движется только цвет. Ступени 42 и 68 включаются от 768 px. */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-text);
  font-size: var(--size-value);
  line-height: var(--leading-text);
  font-variant-numeric: var(--numeric);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--action); text-decoration: none; border-bottom: var(--border-w) solid var(--border-hairline); }
a:hover { color: var(--action-hover); border-bottom-color: var(--action-hover); }

:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3 {
  font-family: var(--font-data);
  font-weight: var(--weight-title);
  line-height: var(--leading-title);
  margin: 0 0 var(--space-2);
}
h1 { font-size: var(--size-total); font-weight: var(--weight-total); line-height: var(--leading-hero); }
h2 { font-size: var(--size-total); }
h3 { font-size: var(--size-lead); }
p { margin: 0 0 var(--space-2); max-width: var(--measure-text); }
p:last-child { margin-bottom: 0; }

.page { width: 100%; max-width: 1180px; margin: 0 auto; background: var(--surface-card); }

.section {
  padding: var(--space-5) var(--space-4);
  border-top: var(--border-w) solid var(--border-hairline);
}
.section--zebra { background: var(--surface-page); }
.section__lead { max-width: var(--measure-text); margin-top: var(--space-1); }

.eyebrow {
  font-family: var(--font-data);
  font-size: var(--size-caption);
  color: var(--text-label);
  padding-bottom: var(--space-1);
  border-bottom: var(--border-w) solid var(--border-hairline);
  margin-bottom: var(--space-3);
}

.note { font-size: var(--size-caption); color: var(--text-secondary); max-width: var(--measure-text); }

/* ---------- Шапка ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  height: var(--control);
  background: var(--surface-card);
  color: var(--text-body);
  border-bottom: var(--border-w) solid var(--border-hairline);
}
.topbar__mark { flex: none; display: flex; align-items: center; }
.topbar__mark img { width: 30px; height: 30px; }
.topbar__nav {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-data);
  font-size: var(--size-value);
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar__nav::-webkit-scrollbar { display: none; }
.topbar__nav a {
  display: flex;
  align-items: center;
  height: var(--control);
  color: var(--text-secondary);
  white-space: nowrap;
  border-bottom: 0;
  transition: color var(--motion);
}
.topbar__nav a:hover { color: var(--action-hover); }
.topbar__phone {
  margin-left: auto;
  font-family: var(--font-data);
  font-size: var(--size-value);
  font-weight: var(--weight-title);
  color: var(--text-body);
  white-space: nowrap;
  border-bottom: 0;
}
.topbar__phone:hover { color: var(--action-hover); }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control);
  padding: 0 var(--space-4);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-data);
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  white-space: nowrap;
  transition: background-color var(--motion), border-color var(--motion), color var(--motion);
}
a.btn { border-bottom-width: var(--border-w); }
.btn--action { background: var(--action); color: var(--text-on-action); border-color: var(--action); }
.btn--action:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--text-on-action); }
.btn--action:active { background: var(--action-press); border-color: var(--action-press); }
.btn--ghost { border-color: var(--border-emphasis); color: var(--text-body); font-weight: var(--weight-value); background: var(--surface-card); }
.btn--ghost:hover { border-color: var(--action-hover); color: var(--action-hover); }
.btn--quiet { border-color: var(--border-control); color: var(--text-secondary); font-weight: var(--weight-value); background: var(--surface-card); }
.btn--quiet:hover { border-color: var(--border-emphasis); color: var(--text-body); }
.btn--full { width: 100%; }
.btn[disabled] { background: var(--surface-zebra); border-color: var(--border-control); color: var(--text-disabled); cursor: not-allowed; }

.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

/* ---------- Первый экран ---------- */

.hero { display: grid; grid-template-columns: 1fr; }
.hero__text {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__sub { font-size: var(--size-lead); line-height: 1.45; max-width: 42ch; }

.figures { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.figure__value {
  font-family: var(--font-data);
  font-size: var(--size-total);
  font-weight: var(--weight-total);
  line-height: 0.95;
  white-space: nowrap;
}
.figure__label { font-family: var(--font-data); font-size: var(--size-value); color: var(--text-secondary); }
.figure__source { font-family: var(--font-data); font-size: var(--size-caption); color: var(--text-label); }

/* честная заглушка вместо фото: без силуэтов и градиентов */
.slot {
  background: var(--surface-zebra);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  font-family: var(--font-data);
  font-size: var(--size-caption);
  color: var(--text-label);
  text-align: center;
}
.slot--hero { aspect-ratio: 3 / 2; border-top: var(--border-w) solid var(--border-hairline); }
.slot--card { aspect-ratio: 3 / 2; border-bottom: var(--border-w) solid var(--border-hairline); }

/* ---------- Слайдер первого экрана ---------- */

.hero__media {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-top: var(--border-w) solid var(--border-hairline);
}

.slider { position: relative; flex: 1 1 auto; min-height: 0; }

.slider__viewport {
  position: relative;
  /* 4:5 — снимки с телефона вертикальные, в кадре 3:2 машина выходила мелкой,
     а размытых полей было больше, чем самой машины */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-zebra);
}

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 1;
  transition: opacity var(--motion);
}
.slide[hidden] { display: block; opacity: 0; pointer-events: none; }
/* переключил человек — меняем кадр сразу: кроссфейд смягчает только ту смену,
   которой не ждали, а по нажатию он читается как задержка */
.slider.is-instant .slide { transition: none; }

/* пустоту от несовпадения пропорций заполняет размытая копия самого снимка */
.slide__blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(24px) saturate(1.1) brightness(0.92);
  transform: scale(1.2);
}

.slide picture { position: absolute; inset: 0; display: block; }
.slide__photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* полоски сторис: сколько снимков и сколько осталось до следующего */
.bars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2);
}
.bar {
  flex: 1 1 0;
  height: 6px;
  background: rgba(255, 255, 255, 0.4);
  /* капсула вместо системных 2 px: на шестипиксельной полоске прямой угол
     выглядит обрубком, а не деталью «Табло» */
  border-radius: 3px;
  overflow: hidden;
}
.bar__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--paper);
}
.bar--done .bar__fill { width: 100%; }
.bar--active .bar__fill { animation: bar-fill 5000ms linear forwards; }
.slider.is-paused .bar--active .bar__fill { animation-play-state: paused; }
/* при выключенных анимациях полоска просто отмечает текущий снимок,
   а листает человек сам — сама собой листалка не крутится */
.slider.is-calm .bar--active .bar__fill { animation: none; width: 100%; }

@keyframes bar-fill {
  from { width: 0; }
  to { width: 100%; }
}

/* зоны нажатия по краям, как в сторис: середина оставлена снимку —
   по ней открывается полный кадр */
.nav {
  position: absolute;
  top: var(--space-4);
  bottom: 0;
  width: 25%;
  z-index: 2;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav--prev { left: 0; }
.nav--next { right: 0; }
.nav:focus-visible { outline: var(--border-w-emphasis) solid var(--paper); outline-offset: -4px; }

.hero__credit {
  font-family: var(--font-data);
  font-size: var(--size-caption);
  color: var(--text-label);
  padding: var(--space-2) var(--space-3);
  border-top: var(--border-w) solid var(--border-hairline);
  margin: 0;
}


/* ---------- Строки данных ---------- */

.rows { display: flex; flex-direction: column; font-family: var(--font-data); font-size: var(--size-value); }
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--row-data);
  border-top: var(--border-w) solid var(--border-hairline);
  padding: var(--space-1) 0;
}
.rows .row:last-child { border-bottom: var(--border-w) solid var(--border-hairline); }
.row__label { color: var(--text-label); white-space: nowrap; }
.row__value { font-weight: var(--weight-value); white-space: nowrap; }
.row__value--money { font-weight: var(--weight-title); }
/* В карточке колонка узкая: подпись переносится, сумма — никогда и не вылезает за край. */
.card .row { gap: var(--space-1); }
.card .row__label { white-space: normal; min-width: 0; }
.card .row__value { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.row--tall { min-height: var(--control); }
.row--current { border-left: var(--border-w-emphasis) solid var(--action); padding-left: var(--space-1); }
.row__value--ok { color: var(--status-ok); font-weight: var(--weight-value); }
.row__value--warn { color: var(--status-warn); font-weight: var(--weight-value); }

.total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1);
  border-top: var(--border-w-emphasis) solid var(--border-emphasis);
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  font-family: var(--font-data);
}
.total__label { font-size: var(--size-caption); color: var(--text-label); white-space: nowrap; }
.total__value { font-size: var(--size-total); font-weight: var(--weight-total); white-space: nowrap; }

/* ---------- Шильдики ---------- */

.badges { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: var(--space-1); }
.badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--badge);
  padding: 0 var(--space-1);
  border: var(--border-w) solid var(--border-control);
  border-radius: var(--radius);
  font-family: var(--font-data);
  font-size: var(--size-caption);
  font-weight: var(--weight-value);
  color: var(--text-secondary);
  white-space: nowrap;
}
.badge--action { border-color: var(--action); color: var(--action); }
.badge--ok { border-color: var(--status-ok); color: var(--status-ok); }
.badge--warn { border-color: var(--status-warn); color: var(--status-warn); }

/* ---------- Таблица ---------- */

.table-wrap { overflow-x: auto; margin-top: var(--space-3); border: var(--border-w) solid var(--border-hairline); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-family: var(--font-data); font-size: var(--size-value); }
thead { background: var(--surface-ink); color: var(--border-control); }
th {
  font-size: var(--size-caption);
  font-weight: var(--weight-value);
  text-align: left;
  padding: 7px var(--space-2);
  border-left: var(--border-w) solid var(--border-on-ink);
  white-space: nowrap;
}
th:first-child { border-left: 0; }
td {
  padding: var(--space-1) var(--space-2);
  min-height: var(--row-data);
  border-top: var(--border-w) solid var(--border-hairline);
  border-left: var(--border-w) solid var(--border-hairline);
  white-space: nowrap;
}
td:first-child { border-left: 0; }
tbody tr:nth-child(even) { background: var(--surface-zebra); }
.cell-model { font-weight: var(--weight-title); }
.cell-meta { color: var(--text-secondary); font-size: var(--size-caption); }
.cell-total { font-weight: var(--weight-total); }

/* ---------- Карточки ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.card {
  border: var(--border-w) solid var(--border-hairline);
  border-radius: var(--radius);
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
}
/* снимок в карточке: тот же приём, что на первом экране — кадр не режет машину,
   пустоту по краям закрывает размытая копия самого снимка */
.shot {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-zebra);
  border-bottom: var(--border-w) solid var(--border-hairline);
}
.shot__blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(24px) saturate(1.1) brightness(0.92);
  transform: scale(1.2);
}
.shot picture { position: absolute; inset: 0; display: block; }
.shot__photo { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Лента студии ---------- */

/* Карусель, а не сетка: за краем полосы видно начало следующего поста — это и
   есть приглашение листать, и на телефоне тоже. Листается только руками:
   единственное, что на странице движется само, — листалка первого экрана. */
.feed {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--space-4);
  /* полоса уходит под край секции: иначе «частично видный» пост упирается
     в отступ и читается как обрезанный по линейке, а не как продолжение */
  margin: var(--space-3) calc(var(--space-4) * -1) 0;
  padding: var(--space-1) var(--space-4);
  scrollbar-width: none;
}
.feed::-webkit-scrollbar { display: none; }
.feed__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* маячок в конце полосы: по нему feed.js понимает, что пора просить следующую
   порцию постов. Ширина нулевая, но не ноль — нулевой элемент наблюдатель
   пересечений не видит вовсе */
.feed__tail { flex: 0 0 1px; }

/* место под ленту держится заранее: плитки приезжают из /feed/feed.json уже
   после загрузки страницы, и без этого секция подпрыгивала бы под курсором */
.feed-block { min-height: 560px; }
.feed-block.is-empty { min-height: 0; }
.feed__fallback { margin-top: var(--space-2); }

.feed__card {
  flex: 0 0 min(76%, 290px);
  scroll-snap-align: start;
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms;
}
.feed__card:hover, .feed__card:focus-visible { border-color: var(--border-emphasis); }
.feed__card, .feed__card:hover { border-bottom-width: var(--border-w); }
/* внутренности плитки — span'ы: ссылка не вправе содержать div */
.feed__card .shot { display: block; aspect-ratio: 4 / 5; }
.feed__card .card__body { gap: var(--space-1); }
.feed__card .card__meta,
.feed__card .card__text { display: block; }
.feed__card .card__text {
  font-size: var(--size-caption);
  line-height: var(--leading-text);
  color: var(--text-secondary);
}

/* счётчики поста: иконка и число, как их читают в самом инстаграме */
.feed__stats { display: flex; gap: var(--space-2); font-family: var(--font-data); font-size: var(--size-caption); }
.feed__stat { display: inline-flex; align-items: center; gap: 4px; }
.feed__ico { width: 15px; height: 15px; }
.feed__num { font-variant-numeric: var(--numeric); }

/* метка ролика: плашка, а не тень — теней в системе нет, а белая иконка
   на светлом кадре пропадает */
.feed__badge {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  display: flex;
  padding: 3px;
  border-radius: var(--radius);
  background: var(--surface-ink);
  color: var(--text-on-ink);
}
.feed__badge .feed__ico { width: 14px; height: 14px; }

/* шапка аккаунта. Подчёркивание ссылок в системе рисует граница снизу, а тут
   ссылка блочная — линия растянулась бы на всю ширину секции; подчёркиваем имя */
.feed__account {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: inherit;
  border-bottom: 0;
}
.feed__avatar { display: block; width: 44px; height: 44px; border-radius: 50%; }
.feed__who { display: flex; flex-direction: column; align-items: flex-start; }
.feed__name {
  font-family: var(--font-data);
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  border-bottom: var(--border-w) solid var(--border-hairline);
  transition: color 120ms, border-color 120ms;
}
.feed__meta { font-family: var(--font-data); font-size: var(--size-caption); color: var(--text-label); }
.feed__account:hover .feed__name { color: var(--action-hover); border-bottom-color: var(--action-hover); }

/* Подпись для скринридера. Обычный рецепт «sr-only» ставит `position: absolute`,
   и это ловушка: без позиционированного предка блок считается от корня страницы,
   и лента с прокруткой вбок растягивала область прокрутки всего документа —
   справа от страницы появлялась пустота на полтора экрана. Прячем без
   позиционирования: строчный блок 1×1 внутри строки данных незаметен. */
.visually-hidden {
  display: inline-block;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Снимок во весь экран ---------- */

.is-zoomable { cursor: zoom-in; }
.is-locked { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(42, 36, 37, 0.96);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }

.lightbox__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  max-height: 100%;
}
.lightbox__photo {
  max-width: 100%;
  max-height: calc(100vh - var(--space-6) * 2);
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
}
.lightbox__caption {
  font-family: var(--font-data);
  font-size: var(--size-caption);
  color: var(--text-on-ink);
  text-align: center;
  margin: 0;
  max-width: var(--measure-text);
}
.lightbox__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: var(--control);
  height: var(--control);
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-on-ink);
  font-family: var(--font-data);
  font-size: 32px;
  line-height: 1;
  transition: color var(--motion);
}
.lightbox__close:hover { color: var(--paper); }
.lightbox__close:focus-visible { outline: var(--border-w-emphasis) solid var(--paper); outline-offset: -4px; }

.card__body { padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.card__title { font-family: var(--font-data); font-size: var(--size-title); font-weight: var(--weight-title); line-height: var(--leading-title); }
.card__meta { font-family: var(--font-data); font-size: var(--size-caption); color: var(--text-secondary); }
.card__total { font-family: var(--font-data); font-size: var(--size-title); font-weight: var(--weight-total); margin-top: auto; padding-top: var(--space-1); }
.card__caption { font-family: var(--font-data); font-size: var(--size-caption); color: var(--text-label); }
.card__text { font-size: var(--size-value); line-height: var(--leading-text); }

/* ---------- Шаги ---------- */

.steps { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--space-3); }
.step {
  display: grid;
  grid-column: 1;
  grid-template-columns: 26px 1fr;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: var(--border-w) solid var(--border-hairline);
}
.steps > :last-child { border-bottom: var(--border-w) solid var(--border-hairline); }

/* срок рядом со своими шагами: до 768 px — строкой под ними, дальше — колонкой справа */
.term {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-data);
  padding: var(--space-2) 0;
  border-top: var(--border-w) solid var(--border-hairline);
}
.term__label { color: var(--text-label); }
.term__value { font-weight: var(--weight-value); white-space: nowrap; }
.term__value--ok { color: var(--status-ok); }
.term__value--warn { color: var(--status-warn); }
.step__num { font-family: var(--font-data); font-size: var(--size-lead); font-weight: var(--weight-title); color: var(--text-label); }
.step__title { font-family: var(--font-data); font-size: var(--size-lead); font-weight: var(--weight-title); margin-bottom: 2px; }
.step__text { font-size: var(--size-value); line-height: var(--leading-text); max-width: var(--measure-text); }

/* ---------- Калькулятор ---------- */

.calc {
  border: var(--border-w) solid var(--border-control);
  border-radius: var(--radius);
  background: var(--surface-card);
  overflow: hidden;
  margin-top: var(--space-3);
  max-width: 900px;
}
.calc__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  min-height: var(--control);
  background: var(--surface-ink);
  color: var(--text-on-ink);
  font-family: var(--font-data);
  font-size: var(--size-value);
}
.calc__fx { margin-left: auto; color: var(--border-control); text-align: right; }
/* minmax(0, 1fr), а не 1fr: у `1fr` минимальный размер — `auto`, и колонка
   раздувается под самый широкий негнущийся элемент внутри. Поле ссылки
   с кнопкой рядом как раз такой: на 390 px калькулятор уезжал за край экрана
   на десяток пикселей, а кнопка «Заполнить» обрезалась. */
.calc__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.calc__form { padding: var(--space-2); }
.calc__result { padding: var(--space-2); border-top: var(--border-w) solid var(--border-hairline); }
.calc__form .options { margin-bottom: var(--space-3); }
.calc__form .field__label + .options { margin-top: var(--space-1); }
.calc__section {
  font-family: var(--font-data);
  font-size: var(--size-title);
  font-weight: var(--weight-title);
  margin: 0 0 var(--space-1);
}
.calc__result .rows + .calc__section { margin-top: var(--space-3); }
.calc__note {
  font-size: var(--size-caption);
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0 0 var(--space-1);
  max-width: var(--measure-text);
}
.calc__empty { font-size: var(--size-value); color: var(--text-secondary); margin: 0; }


.options { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.option {
  display: inline-flex;
  align-items: center;
  min-height: var(--control);
  padding: 0 var(--space-2);
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-control);
  border-radius: var(--radius);
  font-family: var(--font-data);
  font-size: var(--size-value);
  white-space: nowrap;
  transition: background-color var(--motion), border-color var(--motion), color var(--motion);
}
.option:hover { border-color: var(--border-emphasis); }
.option[aria-pressed="true"] {
  background: var(--action);
  border-color: var(--action);
  color: var(--text-on-action);
  font-weight: var(--weight-title);
}

.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.field__label { font-family: var(--font-data); font-size: var(--size-caption); color: var(--text-label); }
.field input[type="text"], .field select {
  min-height: var(--control);
  padding: 0 var(--space-2);
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-control);
  border-radius: var(--radius);
  font-family: var(--font-data);
  font-size: var(--size-title);
  font-weight: var(--weight-title);
}
.field__hint { font-size: var(--size-caption); color: var(--text-secondary); }

/* ---------- Расчёт по ссылке ---------- */

/* Быстрый путь стоит первым и отделён линией: это не «ещё одно поле формы»,
   а способ не заполнять её вовсе. Малиновым не красим — на секцию одна
   малиновая кнопка, и она уже есть в колонке результата. */
.calc__link {
  padding-bottom: var(--space-3);
  border-bottom: var(--border-w) solid var(--border-hairline);
}
/* На узком экране кнопка уходит под поле, а не ужимается до нечитаемой:
   палец мимо 48-пиксельного контрола не промахивается, а мимо обрезанного —
   запросто. Порог берём базой: 200 px поля плюс кнопка. */
.calc__link-row { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.calc__link input[type="url"] {
  flex: 1 1 200px;
  min-width: 0;
  min-height: var(--control);
  padding: 0 var(--space-2);
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-control);
  border-radius: var(--radius);
  font-family: var(--font-data);
  font-size: var(--size-lead);
}
.calc__link-go { flex: 1 0 auto; min-height: var(--control); }
.calc__link-go[disabled] { color: var(--text-disabled); border-color: var(--border-hairline); cursor: default; }
.calc__link-note--bad { color: var(--status-error); }

/* Единственное вращение на странице. В «Табло» движение — только цвет за 120 мс,
   и исключений было два: листалка первого экрана и самоход ленты студии.
   Это третье, и оно того же рода: ожидание надо показывать, иначе нажатие
   читается как «зависло». С prefers-reduced-motion кружок не крутится,
   но остаётся виден — «идёт работа» сообщает он, а не его вращение. */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: var(--space-1);
  vertical-align: -2px;
  border: 2px solid var(--border-control);
  border-top-color: var(--text-body);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--action); }
}

/* карточка подтянутой машины — над разбором цены */
.calc__car {
  border: var(--border-w) solid var(--border-hairline);
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.calc__car-shot { aspect-ratio: 4 / 3; border-bottom: var(--border-w) solid var(--border-hairline); }
.calc__car-body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); }
.calc__car-warn { font-size: var(--size-caption); color: var(--status-warn); margin: 0; }
.calc__car-link { font-family: var(--font-data); font-size: var(--size-caption); align-self: flex-start; }

/* Ползунок к числовому полю. Дорожка красится градиентом: закрашенную часть
   браузеры единообразно рисовать не умеют, а долю считает calc.js и кладёт
   в --fill — тогда положение бегунка и заливка всегда отвечают тому, что
   введено, а не тому, где его последний раз отпустили. */
.field__range {
  --fill: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--space-4);          /* палец попадает, а поле не разъезжается */
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.field__range::-webkit-slider-runnable-track {
  height: var(--space-1);
  border-radius: var(--radius);
  background:
    linear-gradient(to right, var(--border-emphasis) 0 var(--fill), var(--surface-zebra) var(--fill) 100%);
}
.field__range::-moz-range-track {
  height: var(--space-1);
  border-radius: var(--radius);
  background:
    linear-gradient(to right, var(--border-emphasis) 0 var(--fill), var(--surface-zebra) var(--fill) 100%);
}
.field__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--space-3);
  height: var(--space-3);
  margin-top: calc((var(--space-1) - var(--space-3)) / 2);
  border: 0;
  border-radius: var(--radius);
  background: var(--border-emphasis);
  transition: background 120ms;
}
.field__range::-moz-range-thumb {
  width: var(--space-3);
  height: var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: var(--border-emphasis);
  transition: background 120ms;
}
.field__range:hover::-webkit-slider-thumb,
.field__range:active::-webkit-slider-thumb { background: var(--action); }
.field__range:hover::-moz-range-thumb,
.field__range:active::-moz-range-thumb { background: var(--action); }

/* поле пустое — ползунку нечего показывать, и он не притворяется, что показывает */
.field__range.is-empty::-webkit-slider-thumb { background: var(--border-control); }
.field__range.is-empty::-moz-range-thumb { background: var(--border-control); }

/* сброс примера в калькуляторе: поле само по себе не двигается, меняется только
   цвет — иначе очистку принимают за пропавший ввод */
@keyframes field-reset {
  0%   { background: var(--surface-zebra); border-color: var(--action); }
  60%  { background: var(--surface-zebra); border-color: var(--action); }
  100% { background: var(--surface-card); border-color: var(--border-control); }
}
.field input[type="text"].field--reset { animation: field-reset 700ms ease-out; }

.consent {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  font-size: var(--size-caption);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  min-height: var(--control);
}
.consent input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--action); }

.calc__error { font-size: var(--size-caption); color: var(--status-error); min-height: 1.2em; margin: 0 0 var(--space-1); max-width: var(--measure-text); }

/* ---------- Вопросы ---------- */

.faq { margin-top: var(--space-3); max-width: 70ch; }
.faq details { border-top: var(--border-w) solid var(--border-hairline); }
.faq details:last-of-type { border-bottom: var(--border-w) solid var(--border-hairline); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--control);
  font-family: var(--font-data);
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  list-style: none;
  transition: color var(--motion);
}
.faq summary:hover { color: var(--action-hover); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: var(--weight-text); color: var(--text-label); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: var(--space-2); }

/* ---------- Незаполненное ---------- */

.todo {
  border: var(--border-w) solid var(--action);
  border-left: var(--border-w-emphasis) solid var(--action);
  border-radius: var(--radius);
  padding: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--size-caption);
  color: var(--action);
  max-width: var(--measure-text);
}

/* ---------- Подвал ---------- */

.footer {
  background: var(--surface-ink);
  color: var(--border-control);
  padding: var(--space-5) var(--space-4) var(--space-4);
  font-size: var(--size-value);
}
.footer a { color: var(--text-on-ink); border-bottom-color: var(--border-on-ink); }
.footer a:hover { color: var(--text-on-ink); border-bottom-color: var(--text-on-ink); }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.footer h4 { font-family: var(--font-data); font-size: var(--size-lead); font-weight: var(--weight-title); color: var(--text-on-ink); margin: 0 0 var(--space-1); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.footer li { min-height: var(--control); display: flex; align-items: center; }
.footer__bottom {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: var(--border-w) solid var(--border-on-ink);
  font-size: var(--size-caption);
  max-width: var(--measure-text);
}

/* ---------- От 768 px: ступени 42 и 68 ---------- */

@media (min-width: 768px) {
  h1 { font-size: var(--size-heading); max-width: var(--measure-heading); }
  h2 { font-size: var(--size-heading); }
  .figure__value { font-size: var(--size-hero); line-height: 0.9; }
  .section { padding: var(--space-5) var(--space-4); }

  .hero { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); align-items: stretch; }
  .hero__text { padding: var(--space-5) var(--space-4); border-right: var(--border-w) solid var(--border-hairline); }
  .slot--hero { aspect-ratio: auto; min-height: 100%; border-top: 0; }

  /* высоту первого экрана задаёт текстовая колонка, снимок подстраивается */
  .hero__media { border-top: 0; }
  .slider__viewport { position: absolute; inset: 0; aspect-ratio: auto; }

  /* шаги слева, срок справа — напротив тех шагов, которые он и занимает:
     1–3 покупка, 4 дорога, 5–6 таможня и выдача */
  .steps { grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); column-gap: var(--space-5); }
  .term {
    grid-column: 2;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
  }
  .term--buy { grid-row: 1 / 4; }
  .term--road { grid-row: 4 / 5; }
  .term--customs { grid-row: 5 / 7; }
  .term__value { font-size: var(--size-lead); font-weight: var(--weight-title); }
  .steps > :last-child { border-bottom: 0; }
  .step:last-of-type, .term:last-of-type { border-bottom: var(--border-w) solid var(--border-hairline); }

  .calc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .calc__result { border-top: 0; border-left: var(--border-w) solid var(--border-hairline); background: var(--surface-page); }
}

@media (max-width: 767px) {
  .btn { width: 100%; }
  .actions { gap: var(--space-1); }
  .option { width: auto; }
  .topbar { padding: 0 var(--space-2); gap: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---------- Отступы и ширина вместо style="..." ----------

   CSP страницы — 'self' без 'unsafe-inline', поэтому атрибут style в разметке
   браузер молча выбрасывает и вёрстка едет. Точечные отступы живут здесь.
   Блок стоит последним: у утилит та же специфичность, что у .actions
   и .section__lead, и выигрывает та, что объявлена ниже. */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }

.rows--narrow { max-width: 520px; }
.rows--wide { max-width: 720px; }