/* Витрина. Мобильный первым: критерий приёмки Заказчика — человек
   в воскресенье в полночь с телефона, поэтому шириной по умолчанию
   считается телефон, а не рабочий стол. */

.site { background: var(--surface-sunken); }

/* Воронка стоит по центру экрана, и это не вкусовое.
   Лендинг читают — там взгляд идёт по левому краю сверху вниз, и колонка
   во всю ширину ему в помощь. В воронке не читают, а отвечают на один
   вопрос за раз: выбрать филиал, назвать срок, вписать телефон. Вопрос
   у левого края широкого экрана выглядит прижатым в угол, а полметра
   пустоты справа — незаполненным местом, где что-то потерялось.

   Колонка уже, чем у лендинга, намеренно: карточки размеров и филиалов
   встают в неё по три-четыре, а не по шесть, и каждую видно целиком. */
#app {
  width: min(100% - 2 * var(--gutter), 1100px);
  margin-inline: auto;
  padding: var(--space-4) 0 var(--space-8);
}

/* Ширину получила колонка, но не всё в ней.
   Ширина нужна тому, чего много: плиткам, филиалам, карточкам размеров,
   срокам — они встают в несколько столбцов и заполняют её. Всё остальное
   на этих экранах — это один блок, и растянутый во всю ширину он
   превращается в пустую рамку с содержимым в углу: строку для телефона
   такой ширины не набирают, а в растянутом итоге «Склад» и «Абая»
   оказываются на разных краях, и взгляду не за что зацепиться по дороге.

   Одно значение на всех — иначе края разъедутся и колонка перестанет
   читаться как колонка. */
.field, .total, .go, .offer, .aside, .promise, .ask, .chosen {
  max-width: 520px;
  margin-inline: auto;
}

/* Абзацы — по длине строки, а не по окну: ограничивать надо то, что
   от ширины портится. По центру вместе с остальным — иначе подпись шага
   уезжала бы влево от формы, к которой она относится. */
.step__title, .step__sub, .note, .step__note { text-align: center; }
/* Подпись шага держится той же ширины, что поля под ней: строка
   в 60 знаков шире 520 px, и подпись выходила бы за края формы —
   на глаз это читается как два разных блока, а не один вопрос. */
.step__sub, .note, .step__note { max-width: 520px; margin-inline: auto; }

/* ── Шапка сайта ───────────────────────────────────────────────── */
/* Пока только знак. Пункты «О нас · Филиалы · Вопросы» из макета ведут
   на страницы, которых ещё нет (`А3`), а меню со ссылками в никуда хуже
   меню без ссылок. Стоит на первом экране, как в макете: на шагах место
   наверху занимает счёт шагов, и второй ряд стоил бы сорока пикселей
   из тех, что на телефоне видно без прокрутки. */
.head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0 var(--space-6); }
.head__name { display: block; font-size: var(--text-md); font-weight: var(--weight-title); letter-spacing: .06em; }
.head__claim { display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; color: var(--muted); margin-top: 2px; }

/* ── Шапка шага: дорожка из шести кружков ───────────────────────── */
/* Стрелка ростом с кружок и прижата к верху: дорожка у нас в две строки
   (кружок и подпись), и по центру стрелка встала бы напротив подписи,
   а не напротив того, от чего ведёт назад. */
.bar { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) 0 var(--space-4); }
.bar__back { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 14px; text-decoration: none; }
.bar__back:hover { border-color: var(--line-strong); }

/* Колонки равной доли, а не по ширине подписи: иначе «Оплата» поджимает
   «Что храните», кружки встают неровно и дорожка перестаёт читаться как
   шкала. Подпись переносится на вторую строку — это дешевле, чем обрезать
   её многоточием на том самом шаге, где человек и смотрит, куда попал. */
.steps { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(6, 1fr); list-style: none; margin: 0; padding: 0; }
.steps__one { position: relative; display: grid; justify-items: center; gap: 5px; padding: 0 2px; text-align: center; text-decoration: none; color: var(--muted); }

/* Отрезок пути слева от кружка. Тянется до середины предыдущей колонки,
   поля по 15px — чтобы не упереться в сами кружки. */
.steps li:not(:first-child) .steps__one::before {
  content: '';
  position: absolute;
  top: 12px; right: 50%; left: -50%;
  margin: 0 15px;
  height: 2px;
  background: var(--line);
}
.steps__one--done::before,
.steps__one--now::before { background: var(--accent); }

.steps__num {
  position: relative;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--text-xs); font-weight: var(--weight-strong);
  background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--muted);
}
/* Пройденный шаг — кольцо и число синим по той же подложке, что у будущих.
   Заливку --accent-soft пришлось убрать дважды: на тёмной теме она почти
   совпадает с полотном и кружок пропадал, а на светлой синее число по ней
   даёт 4.24:1 — ниже порога для 11 px. Это не вкусовщина, это показал
   тест контраста, и он же не даст вернуть заливку обратно. */
.steps__one--done .steps__num { border-color: var(--accent-text); color: var(--accent-text); }
.steps__one--now .steps__num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.steps__label { font-size: var(--text-xs); line-height: 1.25; }
.steps__one--now .steps__label { color: var(--text); font-weight: var(--weight-label); }
a.steps__one:hover .steps__num { border-color: var(--accent); }

/* ── Первый экран ──────────────────────────────────────────────── */
.hero { padding: var(--space-6) 0 0; }
.hero__title { font-size: var(--text-xl); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 var(--space-3); }
.hero__sub { color: var(--muted); line-height: 1.6; margin: 0 0 var(--space-6); }

/* Две равные кнопки: одинаковая ширина, одинаковый вес, одинаковый цвет.
   Подсвеченная кнопка сама себе создаст статистику, а какая из двух
   работает — мы как раз и собираемся выяснить. */
.hero__ways { display: grid; gap: var(--space-3); }
.way { display: grid; gap: 4px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; color: inherit; transition: .14s; }
.way:hover { border-color: var(--brand-3); transform: translateY(-1px); }
.way__title { font-size: var(--text-md); font-weight: var(--weight-strong); }
.way__sub { font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }

/* Рисунок бокса. Ширина и высота продублированы в разметке: без них
   строка с картинкой до загрузки схлопнута, а потом раздвигается — и
   кнопки уезжают из-под пальца ровно тогда, когда по ним целятся. */
.hero__pic { display: block; width: 100%; height: auto; margin: var(--space-6) 0 0; border: 1px solid var(--line); border-radius: var(--radius-lg); }

.hero__marks { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.hero__marks li { padding-left: 22px; position: relative; line-height: 1.5; }
.hero__marks li::before { content: '✓'; position: absolute; left: 0; color: var(--brand-3); font-weight: 700; }

/* ── Шаг ───────────────────────────────────────────────────────── */
.step__title { font-size: var(--text-lg); line-height: 1.25; margin: 0 0 var(--space-2); }
.step__sub { color: var(--muted); line-height: 1.6; margin: 0 auto var(--space-4); }
.step__note { margin: var(--space-3) auto 0; padding: var(--space-3); border-left: 3px solid var(--danger); background: var(--surface); border-radius: var(--radius); font-size: var(--text-sm); }

/* Плитки шага 1: три в ряд на любой ширине, как в макете.
   Не `auto-fit`: он менял число колонок с шириной, и на телефоне шесть
   категорий вставали то в два, то в три столбца — сетка, в которой
   ничего не двигалось, выглядела переставленной. Три колонки держатся
   и на 320 px: самое длинное слово там — «Велосипед», 75 px при 88 px
   на плитку.

   Крупные: их нажимают большим пальцем на ходу. */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.tile { display: grid; justify-items: center; align-content: start; gap: var(--space-2); padding: var(--space-4) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); font: inherit; font-weight: var(--weight-strong); color: inherit; cursor: pointer; text-align: center; line-height: 1.3; transition: .14s; }

/* Значок ростом с две строки подписи — иначе он либо теряется, либо
   перетягивает на себя внимание с того, что человек читает. */
.tile__icon { width: 28px; height: 28px; flex: none; }
.tile__name { font-size: var(--text-sm); }
.tile:hover { border-color: var(--line-strong); }
/* Выбранная плитка — двойной ободок, а не оттенок фона: на тёмной теме
   оттенок съедается, а на шаге всё держится на том, чей вопрос показан. */
.tile--on { border-color: var(--brand-3); box-shadow: inset 0 0 0 2px var(--brand-3); }

.ask { margin-top: var(--space-6); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ask__question { font-weight: var(--weight-strong); margin-bottom: var(--space-3); }
.ask__answers { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.answer { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-sunken); font: inherit; color: inherit; cursor: pointer; transition: .14s; }
.answer:hover { border-color: var(--brand-3); background: var(--surface); }

/* ── Шаг 2: филиалы ────────────────────────────────────────────── */
/* Переключатель порядка. Прижат вправо, как в макете, и ростом 44 px:
   по нему целятся пальцем. Обычный `select`, а не своё выпадающее меню —
   на телефоне системный список удобнее любого нарисованного, и он один
   умеет всё, что от него ждут: клавиатуру, чтение с экрана, поворот. */
.sorter { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--muted); }
.sorter select { min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); }
.sorter select:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 1px; }

.places { display: grid; gap: var(--space-3); }

/* ── Карта филиалов ─────────────────────────────────────── */

/* Своя, из наших координат: улиц на ней нет и не нужно — она отвечает
   на вопрос «в какой стороне», а не «как доехать». Поэтому и выглядит
   схемой, а не картой: обещать видом то, чего она не умеет, нечестно. */
.citymap { margin: 0 0 var(--space-4); }

.citymap__svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.citymap__pin circle { fill: var(--accent); }
.citymap__pin text {
  fill: var(--on-accent);
  font-size: 4.6px;
  font-weight: 700;
  text-anchor: middle;
  /* Цифра внутри кружка — часть значка, а не текст страницы: выделять
     её при протяжке незачем, это мешает нажатию на телефоне. */
  user-select: none;
}
.citymap__pin:hover circle,
.citymap__pin:focus-visible circle { fill: var(--brand-3); }
.citymap__pin:focus-visible { outline: none; }
.citymap__pin:focus-visible circle { stroke: var(--text); stroke-width: 1.4; }

/* Человек — не филиал, и выглядеть должен иначе: заливка посветлее
   и ореол, чтобы точка читалась и поверх точки склада. */
.citymap__me { fill: var(--accent-text); }
/* Ореолу нужна обводка, а не только заливка: на тёмной теме подложка
   значка и фон карты почти одного цвета, и кольцо без неё пропадает —
   вместе с ответом на вопрос «а где тут я». */
.citymap__me-halo {
  fill: var(--accent-soft);
  stroke: var(--accent-text);
  stroke-width: 0.6;
  opacity: 0.9;
}

.citymap__scale line { stroke: var(--muted); stroke-width: 0.8; }
.citymap__scale text { fill: var(--muted); font-size: 3.4px; }

.citymap__note {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* ── План склада на витрине ─────────────────────────────── */

/* Окно просмотра плана. Прокрутку отдаём браузеру: инерция на телефоне,
   границы и полосы уже написаны, и писать их заново — писать хуже.
   Один палец прокручивает, два увеличивают. */
.splan__view { overflow: auto; max-height: 70vh; margin: var(--space-4) 0; border-radius: var(--radius-lg); touch-action: pan-x pan-y; }

.splan__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.splan__zoom { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.splan__zoom button { min-width: 40px; height: 36px; border: none; border-left: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; font-size: var(--text-lg); cursor: pointer; }
.splan__zoom button:first-child { border-left: none; }
.splan__zoom button:hover { background: var(--surface-sunken); }
.splan__tip { font-size: var(--text-sm); color: var(--muted); }

.splan { position: relative; width: 100%; min-width: 100%; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.splan__sheet { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }

.splan__box { position: absolute; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); font: inherit; color: inherit; cursor: pointer; overflow: hidden; }
.splan__box:hover:not(:disabled) { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 2; }

/* Подходящий по размеру выделен, остальные свободные приглушены:
   размер — подсказка, а не запрет. Человек на плане смотрит своими
   глазами, и бокс побольше ему никто не запрещает. */
.splan__box--fits { background: var(--tag-ok-bg); border-color: var(--ok); }
/* Занятый — заметно серый, а не «чуть темнее белого»: человек должен
   видеть заполненность склада с одного взгляда, не приглядываясь. */
.splan__box--taken { background: var(--tag-neutral-bg); border-color: var(--line-strong); color: var(--tag-neutral-text); cursor: default; }
/* Свободен, но цены нет: тариф бывает привязан к секции, и бокс вне её
   посчитать нечем. Пунктир, а не белый прямоугольник: белый нажимается
   у соседа, а этот нет, и разницу человек должен видеть, а не нащупывать. */
.splan__box--ask { border-style: dashed; border-color: var(--line-strong); cursor: default; }

.splan__num { font-family: var(--font-mono); font-size: 9px; line-height: 1; white-space: nowrap; }

.splan__label { position: absolute; display: grid; place-items: center; font-size: var(--text-sm); font-style: italic; color: var(--muted); pointer-events: none; }

.splan__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--muted); }
.splan__key { width: 12px; height: 12px; border: 1px solid var(--line); border-radius: 2px; }
.splan__key--fits { background: var(--tag-ok-bg); border-color: var(--ok); }
.splan__key--free { background: var(--surface); }
.splan__key--taken { background: var(--tag-neutral-bg); border-color: var(--line-strong); }
.splan__key--ask { border-style: dashed; border-color: var(--line-strong); }

/* На телефоне номера боксов не читаются — и не должны: там план нужен,
   чтобы понять устройство склада и ткнуть в свободное место, а номер
   подскажет подпись при нажатии. */
@media (max-width: 640px) {
  .splan__num { display: none; }
}
.place { display: grid; gap: 4px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; color: inherit; transition: .14s; }
.place:hover { border-color: var(--brand-3); }
.place__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.place__name { font-size: var(--text-md); font-weight: var(--weight-strong); }
.place__km { font-size: var(--text-sm); color: var(--muted); flex: none; }
.place__address { font-size: var(--text-sm); color: var(--muted); }
.place__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); font-size: var(--text-sm); }
.place__sizes { font-size: var(--text-xs); color: var(--muted); letter-spacing: .04em; }

/* ── Шаг 3: размеры ────────────────────────────────────────────── */
/* Средняя карточка крупнее и подсвечена: человек сравнивает соседние
   размеры, а не выбирает из пяти. */
.cards { display: grid; gap: var(--space-3); }
/* Колонкой, а не сеткой: габариты и описание заданы не у всех размеров,
   от этого карточки выходят разной высоты, и кнопки «Выбрать» вставали
   лесенкой — сравнивать три предложения, у которых действие в трёх
   разных местах, тяжело. `margin-top: auto` у кнопки прижимает её к низу,
   а карточки в ряду тянутся до высоты самой длинной. */
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.card > .card__flag,
.card > .stock { align-self: flex-start; }
/* Рекомендованная — синим, как лента над ней: обводка цветом действия
   и лента цветом фирменного синего — это одно решение, и врозь они
   выглядели бы двумя разными подсветками на одной карточке. */
.card--main { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.card__note { font-size: var(--text-xs); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.card__flag { justify-self: start; padding: 3px 9px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-size: var(--text-xs); font-weight: var(--weight-strong); }
.card__name { font-size: var(--text-md); font-weight: var(--weight-strong); }
.card--main .card__name { font-size: var(--text-lg); }
.card__size { font-size: var(--text-sm); color: var(--muted); }
.card__fits { font-size: var(--text-sm); line-height: 1.5; }
.card__price { font-size: var(--text-lg); font-weight: var(--weight-strong); }
.card__price span { font-size: var(--text-sm); font-weight: 400; color: var(--muted); }

/* Наличие плашкой, а не цветным словом посреди строки. Одна и та же
   на карточках размеров и в списке филиалов: два разных вида у одного
   и того же «есть свободные» читались бы как два разных смысла.
   Шрифт основной, не моноширинный, как у плашек портала, — здесь это
   слова, а не числа, и витрина разговаривает с людьми. */
.stock { display: inline-block; padding: 3px 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-label); }
.stock--ok { background: var(--tag-ok-bg); color: var(--tag-ok-text); }
.stock--few { background: var(--tag-danger-bg); color: var(--tag-danger-text); }
/* Нет свободных — серым, а не красным: красным здесь говорят «осталось два»,
   то есть «спеши», а тут спешить незачем. Плашка нужна, чтобы в ряду
   карточек было видно, где смотреть нечего, не вчитываясь в каждую. */
.stock--none { background: var(--tag-neutral-bg); color: var(--tag-neutral-text); }
.card__none { font-size: var(--text-sm); color: var(--muted); }
/* Заливкой — только у рекомендованной. Три одинаково тяжёлые кнопки
   на одном экране спорят между собой: главное действие должно быть одно,
   остальные тише. Цвет заливки тот же, что у «Далее» на других шагах,
   а синим на этой карточке говорят лента и обводка. */
.card__pick { margin-top: auto; padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius); text-align: center; font-weight: var(--weight-strong); text-decoration: none; color: inherit; }
.card__pick:hover { border-color: var(--accent); }
.card--main .card__pick { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.card--main .card__pick:hover { border-color: var(--brand-2); background: var(--brand-2); }

/* Прямоугольник в пропорциях бокса: форма меняет то, что войдёт, сильнее,
   чем полметра площади. Без габаритов не рисуется вовсе. */
.shape { display: flex; align-items: flex-end; height: 74px; overflow: hidden; }
/* Высота задана, ширина следует из пропорции бокса. Так прямоугольник
   не может вырасти выше отведённой ему строки, каким бы вытянутым
   ни оказался бокс. */
.shape__box { height: 100%; width: auto; max-width: 100%; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-sunken); }

.promise { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-4) auto 0; padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }
.promise .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent-text); }

/* ── Шаг 4: срок ───────────────────────────────────────────────── */
/* Сумма крупнее срока: сравнивают деньги, а не число месяцев. */
.terms { display: grid; gap: var(--space-3); }
.term { display: grid; gap: 2px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; color: inherit; transition: .14s; }
.term:hover { border-color: var(--brand-3); }
.term__months { font-size: var(--text-sm); color: var(--muted); }
.term__total { font-size: var(--text-lg); font-weight: var(--weight-strong); }
.term__saved { font-size: var(--text-sm); color: var(--ok); font-weight: var(--weight-strong); }
.online { margin: var(--space-4) 0 0; padding: var(--space-3); border-left: 3px solid var(--brand-3); background: var(--surface); border-radius: var(--radius); font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }

/* ── Шаг 5: кто вы ─────────────────────────────────────────────── */
/* Поля крупные: их заполняют с телефона, стоя, одной рукой.
   Подпись обычным регистром, а не капсом с разрядкой: так в макете,
   и так её быстрее прочесть — капс читается по буквам, а не словом.
   Селектор берёт и `span`, и `label`: где под полем стоит сообщение
   об ошибке, обёртка-`label` не годится (текст ошибки попал бы в имя
   поля и читался бы вслух как его часть), и там подпись отдельная. */
.field { display: grid; gap: 6px; margin-bottom: var(--space-4); }
.field > span,
.field > label { font-size: var(--text-sm); font-weight: var(--weight-label); color: var(--muted); }
.field > span i,
.field > label i { margin-left: var(--space-2); font-style: normal; font-weight: var(--weight-normal); opacity: .8; }

/* Звёздочка обязательного поля — только для глаз: тем, кто слушает,
   про обязательность говорит сам атрибут `required`. */
.req { color: var(--tag-danger-text); font-weight: var(--weight-strong); }

/* Строка «поле + действие»: «отправить код» стоит там, где код вводят,
   а не отдельной кнопкой во всю ширину. Рост 44 px — не украшение:
   по этой ссылке целятся большим пальцем. */
.field__row { display: flex; align-items: center; gap: var(--space-2); }
.field__row input { flex: 1; min-width: 0; }
.field__send { flex: none; min-height: 44px; padding: 0 var(--space-2); border: 0; background: none; font: inherit; font-size: var(--text-sm); color: var(--accent-text); text-decoration: underline; cursor: pointer; }
.field__send:disabled { color: var(--muted); text-decoration: none; cursor: default; }

/* Подсказка и ошибка — под своим полем, а не общей плашкой сверху:
   на трёх полях общая плашка заставляет гадать, к какому из них она. */
.field__hint { margin: 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.4; }
.field__err { margin: 0; font-size: var(--text-sm); color: var(--tag-danger-text); line-height: 1.4; }
.field input[aria-invalid='true'] { border-color: var(--tag-danger-text); }
.field input, .field select { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-md); }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 1px; border-color: var(--brand-3); }
.field input:disabled { color: var(--muted); background: var(--surface-sunken); }

/* Кнопкой бывает и `button`, и `a`: «Оплатить» уходит на сторону
   провайдера, «Войти в кабинет» — в другое приложение. Кнопка центрует
   надпись сама, ссылка — нет, поэтому выравнивание задано здесь. */
.go { display: block; width: 100%; padding: var(--space-4); border: 0; border-radius: var(--radius); background: var(--brand); color: var(--on-brand); font: inherit; font-size: var(--text-md); font-weight: var(--weight-strong); text-align: center; cursor: pointer; }
.go:hover { background: var(--brand-2); }

/* Второе действие под главным: контур вместо заливки. Две залитые кнопки
   подряд спорят за палец, и нижнюю жмут чаще — а платить надо верхней. */
.go--ghost { margin-top: var(--space-3); background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.go--ghost:hover { background: var(--surface-sunken); border-color: var(--brand); }
.again { width: 100%; margin-top: var(--space-2); padding: var(--space-3); border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--text-sm); cursor: pointer; text-decoration: underline; }
.note { margin: 0 auto var(--space-4); padding: var(--space-3); border-left: 3px solid var(--brand-3); background: var(--surface); border-radius: var(--radius); font-size: var(--text-sm); line-height: 1.5; }

/* ── Шаг 6: оплата ─────────────────────────────────────────────── */
.total { display: grid; gap: var(--space-2); margin: 0 auto var(--space-4); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.total div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.total dt { color: var(--muted); }
.total dd { margin: 0; text-align: right; }
.total__sum { padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: var(--text-md); }
/* Скидка зелёным: это единственная строка сводки, где число радует.
   Цвет плашечный, а не --ok: строка набрана мелким, а --ok закреплён
   тестом только для крупных чисел. */
.total__save dd { color: var(--tag-ok-text); font-weight: var(--weight-strong); }

/* ── Концовки: заявка принята, бокс забронирован ────────────────── */
/* Зелёный знак вместо заголовка в строку — конец пути должен читаться
   как конец с первого взгляда, даже если текст под ним человек не прочтёт.
   Заливка плотная, а не подложка плашки: это пара «фон + знак на нём»,
   и её контраст закреплён тестом. */
.done { text-align: center; margin: var(--space-6) 0 var(--space-6); }
.done__mark { width: 64px; height: 64px; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--solid-ok); color: var(--on-solid-ok); display: grid; place-items: center; }
.done__mark .icon { width: 32px; height: 32px; stroke-width: 2.6; }
.done__title { font-size: var(--text-lg); line-height: 1.25; margin: 0 0 var(--space-2); }
/* Той же колонки, что счёт под ним: фраза во всю ширину экрана читается
   в три раза длиннее, чем нужно, и разъезжается с карточкой счёта,
   к которой относится. */
.done__text { max-width: 520px; margin: 0 auto; color: var(--muted); line-height: 1.6; }
.offer { margin: 0 auto var(--space-4); font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }
a.go { display: block; text-align: center; text-decoration: none; }

/* ── Развилка: бесплатная бронь ────────────────────────────────── */
/* Тише основного пути: это выход для тех, кто не платит сегодня, а не
   второе равное действие. Поэтому рамка, а не кнопка во всю ширину. */
.aside { margin: var(--space-6) auto 0; padding: var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); }
.aside__title { font-weight: var(--weight-strong); margin-bottom: 4px; }
.aside__text { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }
.aside__go { display: inline-block; padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius); color: inherit; text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-strong); }
.aside__go:hover { border-color: var(--brand-3); }

/* ── Широкий экран ─────────────────────────────────────────────── */
/* Страница идёт во всю ширину окна, и одной колонки ей на широком экране
   мало: карточка филиала растягивалась на полтора метра, прижимая
   название, адрес и цену в левый угол, а справа оставалось пустое поле.
   Ширина должна работать — то, чего много, встаёт в несколько колонок.

   `auto-fill`, а не `auto-fit`: пустые дорожки остаются, и три филиала
   не растягиваются на ширину восьми. Лучше ряд из трёх карточек нормального
   размера и пустое место справа, чем три карточки во весь экран. */
@media (min-width: 1040px) {
  .tiles { grid-template-columns: repeat(6, 1fr); }
  .places { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* Что донесла до шага ссылка — видно на недоделанных шагах. */
.chosen { display: grid; gap: var(--space-2); margin: var(--space-4) auto 0; padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.chosen div { display: flex; gap: var(--space-3); justify-content: space-between; font-size: var(--text-sm); }
.chosen dt { color: var(--muted); }
.chosen dd { margin: 0; }

@media (min-width: 640px) {
  #app { padding-top: var(--space-6); }
  .hero__ways { grid-template-columns: 1fr 1fr; }
  /* Три карточки в ряд — только там, где они помещаются целиком.
     На телефоне ряд из трёх превращает каждую в колонку в два слова.
     Средняя шире крайних: «крупнее и подсвечена» — это про неё, а на
     телефоне в столбик крупнее сделать нечем, кроме подсветки. */
  /* Без `align-items: start`: карточки тянутся до высоты самой длинной,
     и кнопки «Выбрать» встают на одной линии. Габариты и описание заданы
     не у всех размеров, высоты выходят разные, и кнопки стояли лесенкой —
     сравнивать три предложения, у которых действие в трёх разных местах,
     тяжело. Прижимает кнопку к низу `margin-top: auto` у `.card__pick`. */
  .cards { grid-template-columns: 1fr 1.25fr 1fr; }
  .terms { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .cards:has(.card:nth-child(4)) { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}