/*
 * Лендинг: полосы разделов, ритм и кегли.
 *
 * Мобильный первым, как и витрина: критерий приёмки Заказчика — человек
 * в воскресенье в полночь с телефона. Ширина по умолчанию считается
 * телефонной, широкий экран получает своё в медиазапросе.
 *
 * ── Имена ─────────────────────────────────────────────────────────
 * БЭМ: блок — самостоятельная вещь (`.header`, `.hero`, `.steps`,
 * `.button`), элемент — его часть и без него не живёт (`.hero__title`),
 * модификатор — разновидность (`.button--primary`).
 *
 * Блоки названы по роли, а не по месту на странице. Было `.top`
 * и `.bottom` — по ним не видно, что это шапка и подвал, а не «то, что
 * сверху»; переставь их местами, и имена соврут.
 *
 * Элемент чужого блока внутри другого блока — ошибка, и она тут была:
 * знак `.top__logo` стоял и в шапке, и в подвале. Знак от шапки не зависит,
 * поэтому он теперь свой блок `.logo`.
 *
 * ── Отступы ───────────────────────────────────────────────────────
 * Только шкала `--space-*` из tokens.css, где номер — множитель четырёх.
 * Своих чисел в этом файле нет ни одного, кроме габаритов (высоты кружка,
 * толщины линии) и единственного осознанного исключения — миниатюр,
 * у которых свои значения объявлены на блоке и объяснены на месте.
 *
 * ── Цвета ─────────────────────────────────────────────────────────
 * Только токенами: это проверяет public/ui/tokens.test.js, и он же
 * не даст завести здесь цвет, у которого нет тёмного значения.
 *
 * ── Границы ───────────────────────────────────────────────────────
 * Медиазапросы собраны в конце файла по возрастанию, по одному на ширину:
 * 430 (узкий телефон), 560, 720, 900, 1240, 1280. Раньше три блока
 * `min-width: 720px` лежали в разных местах файла, и что произойдёт
 * на планшете, приходилось собирать по кускам.
 */

.home {
  /* Крупные кегли живут здесь, а не в общей шкале: общая задана под рабочий
     интерфейс, где самый большой кегль — заголовок экрана, а на лендинге
     заголовок читают с расстояния вытянутой руки.

     Поднят только потолок, с 44/30 до 56/36. Прежний упирался в предел
     на ширине около 730 px, и на мониторе 1920 заголовок первого экрана
     оставался того же кегля, что на планшете, — колонка под ним выглядела
     наполовину пустой.

     Скорость роста (`vw`) и нижние значения не тронуты намеренно: с первой
     попытки я заодно сбавил её до 5vw и 3vw — и на планшете заголовок стал
     меньше прежнего (38 px вместо 44 на 768). Поднимать потолок можно,
     опускать середину — нет. */
  --display:         clamp(30px, 6vw, 56px);
  --display-section: clamp(22px, 3.4vw, 36px);

  background: var(--surface);
  color: var(--text);

  /* base.css задаёт `html, body { height: 100% }` — это нужно оболочке
     портала, которая занимает экран целиком и прокручивает свои области
     сама. Здесь такая высота ломает липкую шапку: `position: sticky`
     держится в границах родителя, а родитель ростом ровно в экран, — и
     шапка отклеивается, едва страница прокрутится дальше первого экрана.
     Найдено измерением: при прокрутке на 1500 px шапка оказывалась
     на y = −242, то есть уезжала вместе со страницей. */
  height: auto;
  min-height: 100%;
}

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

   Прежний потолок 1120 px оставлял на широком экране по 240 px пустоты
   с каждой стороны, и страница читалась как узкий столбец посреди пустого
   поля. Нынешние 1680 — рабочая ширина по решению Заказчика: заметно шире
   прежнего, но не во весь экран. Край окна остаётся за полосой раздела,
   а не за текстом.

   Строку текста от растягивания держат сами абзацы (`.lead` ограничен
   56 знаками), а не контейнер: ограничивать надо то, что от длины
   портится, а карточкам и сеткам ширина только на пользу. */
/* Ширина задаётся одним `min`, а не парой «потолок плюс внутреннее поле».
   Разница не в записи: при `max-width` + `padding` поле от края и потолок
   складываются, и на 1920 содержимое стояло бы в 120 px от края вместо
   шестидесяти. Здесь поле вычитается из окна до того, как сработает
   потолок, поэтому на широком экране всё поле даёт сам потолок
   (1920 − 1800 = 60 с каждой стороны), а на узком — `--gutter`,
   и два числа никогда не складываются. */
.wrap { width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; }

/* ── Филиалы ───────────────────────────────────────────────────── */
/* Карточки ложатся сами: сколько поместится в ряд, столько и встанет.
   Явного числа колонок нет — филиалов у сети то шесть, то семь, и жёсткая
   сетка на трёх оставляла бы в последнем ряду одинокую карточку во всю
   ширину. `auto-fit` с нижней границей решает это без правок под каждое
   новое число складов. */
.branches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
  text-align: left;
}

/* Карточка — ссылка целиком, а не текст с кнопкой внизу: палец попадает
   в неё где угодно, и это те же 44 пикселя цели, только во все стороны. */
.branch {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: .14s;
}

.branch:hover { border-color: var(--accent); }
.branch:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 2px; }

.branch__name { font-size: var(--text-md); font-weight: var(--weight-strong); }
.branch__address { font-size: var(--text-sm); color: var(--muted); }
.branch__hours { font-size: var(--text-sm); color: var(--muted); }

/* Цена прижата к низу карточки, а не идёт следом за адресом.
   У части складов часы работы не заданы, и цена в таких карточках
   оказывалась выше, чем у соседних: ряд цен шёл лесенкой, хотя читают
   их именно рядом, сравнивая филиалы между собой. */
.branch__price { margin-top: auto; padding-top: var(--space-3); font-size: var(--text-base); }

.branch__sizes { font-size: var(--text-xs); color: var(--muted); letter-spacing: .04em; }

/* ── Кнопка ────────────────────────────────────────────────────── */
/* Свой блок, а не элемент того места, где стоит. Кнопок на странице три,
   и раньше каждая была элементом своего хозяина — `.top__enter`,
   `.hero__go`, `.band__go`, — хотя отличались только заливкой и ростом.
   Общее лежит в блоке, различия — в модификаторах; добавить четвёртую
   теперь значит выбрать модификатор, а не переписать пять свойств. */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  flex: none;
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  /* Рамки в основании нет намеренно. Напрашивается `1px solid transparent`,
     чтобы контурному варианту оставалось задать только цвет, — но ширина
     кнопки считается по содержимому, и прозрачная рамка прибавляет к ней
     два пикселя. Залитые кнопки от этого поехали, и сравнение снимков
     «до/после» это показало. Рамку объявляет тот вариант, которому
     она нужна. */
  border-radius: var(--radius);
  font-weight: var(--weight-strong);
  text-decoration: none;
  color: inherit;
}

/* Действие шапки: «Войти». Цвет акцента — тот же, что у действий портала. */
.button--primary { background: var(--accent); color: var(--on-accent); }
.button--primary:hover { background: var(--accent-text); }

/* Вход в воронку. Крупнее прочих: по ней целятся пальцем с первого экрана,
   и заливка та же, что у «Далее» на шагах воронки, — палитру не меняем. */
.button--brand {
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  background: var(--brand); color: var(--on-brand);
  font-size: var(--text-md);
}
.button--brand:hover { background: var(--brand-2); }

/* Второстепенное действие: контур вместо заливки. Рост 44 px — нижний
   предел для пальца. */
.button--ghost { min-height: 44px; border: 1px solid var(--line-strong); }
.button--ghost:hover { border-color: var(--accent); }

.button__ico { display: inline-flex; flex: none; }
.button__ico .icon { width: 20px; height: 20px; }

/* ── Знак ──────────────────────────────────────────────────────── */
/* Стоит в шапке. Имя не привязано к ней нарочно: пока блок назывался
   `.top__logo`, всё, что его переиспользовало, ломалось вместе с шапкой.
   Сам квадратик со «SQ» — общий `.mark` из base.css, он же в портале. */
.logo { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: inherit; flex: none; }
.logo__name { font-size: var(--text-md); font-weight: var(--weight-title); letter-spacing: .06em; }

/* ── Шапка ─────────────────────────────────────────────────────── */
/* Липкая: в ней «Войти» и телефон — то, за чем возвращаются с середины
   страницы. Из-за неё заголовкам нужен `scroll-margin-top`, иначе переход
   по якорю прячет заголовок раздела под шапку. */
.header {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
/* Просвет между знаком и меню шире, чем между пунктами самого меню:
   иначе первый пункт читается как часть названия компании. */
.header__row { display: flex; align-items: center; gap: var(--space-8); min-height: 64px; }

/* Меню появляется с 720 px. Гамбургера нет намеренно: за ним прячутся три
   якоря на той же странице, до которых доезжают прокруткой, а выдвижная
   панель ради них — это ловушка фокуса, замок прокрутки и кнопка закрытия,
   написанные ради того, что и так работает. */
.header__nav { display: none; gap: var(--space-6); margin-right: auto; }
.header__nav a { color: var(--muted); text-decoration: none; font-size: var(--text-base); }
.header__nav a:hover { color: var(--text); }

.header__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }

/* Регистрация появляется только с 900 px. Почему так поздно — написано
   у самого правила, в блоке этой ширины. */
.header__reg { display: none; }
.header__phone { color: var(--text); text-decoration: none; font-weight: var(--weight-strong); white-space: nowrap; }

/* ── Подвал ────────────────────────────────────────────────────── */
.footer { padding: var(--space-8) 0; border-top: 1px solid var(--line); background: var(--surface-sunken); }
.footer__row { display: grid; gap: var(--space-4); }
.footer__contacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.footer__contacts a { color: var(--accent-text); text-decoration: none; }
.footer__contacts a:hover { text-decoration: underline; }
.footer__phone { color: var(--text); font-weight: var(--weight-strong); text-decoration: none; }

/* ── Полоса раздела ────────────────────────────────────────────── */
/* Раздел — это полоса во всю ширину с собственным фоном, а внутри неё
   контейнер ограниченной ширины. Запас сверху — под липкую шапку: без него
   переход по якорю ставит заголовок раздела ровно под неё. */
.band { padding: var(--space-8) 0; scroll-margin-top: 64px; }
.band--tint { background: var(--surface-sunken); }
.band--dark { background: var(--brand); color: var(--on-brand); }

/* Заголовок раздела и приписка справа от него. На телефоне приписка
   уходит под заголовок: рядом ей там места нет, а обрезать её нельзя —
   это она обещает, что шагов всего шесть. */
.band__head { display: grid; gap: var(--space-2); }
.band__aside { margin: 0; color: var(--muted); font-size: var(--text-base); }

/* Разделы читаются по левому краю — все, как первый экран и «Как это
   работает». Прежде половина страницы стояла по середине, и на широком
   экране это читалось как две разные страницы, сшитые посередине: сверху
   всё начинается от левого поля, ниже заголовки вдруг съезжают в центр,
   и взгляду негде держаться. Один левый край на всю длину — это и есть
   та линия, по которой глаз спускается от первого экрана до оформления.

   Полосе от этого пусто не становится: под каждым заголовком идёт сетка
   во всю ширину, а от растягивания текст держат его собственные пределы —
   `.lead` в 56 знаков и `.soon` ниже. */

/* ── Заголовки и абзацы ────────────────────────────────────────── */
/* Типографика страницы, а не блока: один и тот же кегль нужен заголовку
   первого экрана и заголовкам пяти разделов. Разложить его по
   `.hero__title`, `.steps__title` и далее значило бы повторить одни
   и те же три свойства пять раз и однажды поправить их в четырёх местах
   из пяти. Поэтому шкала общая, а разновидность — модификатором.
   Было `.display-2`: цифра через дефис — не модификатор, и по ней
   не видно, что это разновидность того же самого. */
.display { margin: 0 0 var(--space-3); font-size: var(--display); line-height: 1.1; letter-spacing: -.02em; }
.display--section { font-size: var(--display-section); line-height: 1.2; }
/* Вторая строка заголовка — цветом действия, как в макете. Не декор:
   она называет то, ради чего сюда пришли. */
.display__accent { color: var(--accent-text); }

/* Надзаголовок: он же подпись раздела в макете. Набран вразрядку
   и прописными — это короткие два-три слова, где капс читается как
   метка, а не как текст. */
.eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow--dark { color: var(--on-brand-muted); }

.lead { margin: 0 0 var(--space-4); max-width: 56ch; color: var(--muted); line-height: 1.6; font-size: var(--text-md); }
.lead--dark { color: var(--on-brand-muted); }

/* ── Первый экран ──────────────────────────────────────────────── */
.hero__row { display: grid; gap: var(--space-6); }
.hero__content { min-width: 0; }

/* Две кнопки одного веса: какой из двух входов работает, мы как раз
   и собираемся выяснить, а подсвеченная кнопка сама себе сделает
   статистику. */
.hero__actions { display: grid; gap: var(--space-3); margin: 0 0 var(--space-6); }

/* Маркеры доверия. Строкой на широком, столбиком на телефоне: три коротких
   обещания рядом читаются как одно, а перенесённые по одному — как список,
   который надо читать. */
.hero__marks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.hero__marks li { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-base); }
.hero__mark-ico { display: inline-flex; flex: none; color: var(--accent-text); }
.hero__mark-ico .icon { width: 20px; height: 20px; }

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

/* ── Шесть шагов ───────────────────────────────────────────────── */
/* Столбиком на телефоне, по две на планшете, по три дальше и по шесть
   на широком. Прокрутки вбок нет намеренно: она прячет четыре шага
   из шести, а весь смысл блока в том, что их всего шесть.

   Было `.steps6` / `.step6`: цифра в имени блока держала в нём число,
   которое к строению отношения не имеет, а карточка при этом
   притворялась отдельным блоком, хотя вне списка шагов не существует.

   Осторожно: в витрине (`site.css`) есть свой `.steps` — дорожка шагов
   воронки. Файлы грузятся на разных страницах и не встречаются,
   но складывать их в один нельзя. */
.steps { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3); }
/* Колонкой, а не сеткой: описания шагов разной длины, и мини-вид
   в каждой карточке иначе оказывается на своей высоте — шесть картинок
   лесенкой читаются как шесть разных блоков, а не как один ряд. */
.steps__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);
}
.steps__no {
  align-self: flex-start;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  font-size: var(--text-xs); font-weight: var(--weight-strong);
}
.steps__title { margin: 0; font-size: var(--text-md); }
.steps__text { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }

/* ── Преимущества ──────────────────────────────────────────────── */
/* Сетка, а не колонка, как у шагов: здесь четыре независимых обещания
   без порядка, и разная длина текста им не мешает — читать их можно
   с любого. `auto-fit` сам решает, сколько встанет в ряд. */
.perks {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}
.perk {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
}
/* Значок в подложке, а не голым контуром: полоса раздела тонированная,
   карточка светлая, и контур на светлом теряется. */
.perk__ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent-text);
}
.perk__ico .icon { width: 20px; height: 20px; }
.perk__title { margin: 0; font-size: var(--text-md); }
.perk__text { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }

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

   Единственное место страницы со своими числами, и они объявлены здесь,
   на блоке, а не рассыпаны по шести правилам ниже. Шкала отступов начинается
   с четырёх пикселей, а этим рисункам нужны промежутки меньше и дробнее:
   в поле высотой 74 px шаг в 4 px — это уже заметная часть рисунка.
   Исключение из системы лучше назвать, чем прятать. */
.mini {
  --mini-gap:  4px;   /* между ячейками плиток и полос */
  --mini-gap-s: 5px;  /* строки оплаты: их три, и 4 px слипаются */
  --mini-gap-m: 6px;  /* поля формы: их три и они выше прочих */
  --mini-pad:  3px;   /* воздух внутри плитки вокруг значка */

  margin-top: auto;
  padding: var(--space-2);
  min-height: 74px;
  border-radius: var(--radius);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
}

/* Ячейка. Селектор по тегу, а не по классу: это `aria-hidden`-рисунок
   из пустых `span`, и двадцать атрибутов `class` в разметке сделали бы
   его тяжелее для чтения, ничего не объяснив. Класс есть только
   у ячеек, которые чем-то отличаются. */
.mini > span { display: block; background: var(--line-strong); border-radius: 3px; }

/* Подсвеченная ячейка. Было `.mini--on` — модификатор блока, надетый
   на его ребёнка: по имени выходило, что «включён» весь рисунок,
   а включена одна полоса.

   Селектор нарочно повторяет `.mini > span`: у базового правила вес
   «класс + тег», и одного класса ему мало — с первой попытки подсветка
   просто не появилась, а сравнение снимков «до/после» это поймало.
   Тем же весом снят `!important` с булавки: он стоял здесь ровно затем,
   чтобы перебить то же самое базовое правило. */
.mini > span.mini__cell--on { background: var(--accent); }

.mini--tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mini-gap); }
.mini--tiles > span { background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; padding: var(--mini-pad) 0; }
.mini--tiles .tile__icon { width: 16px; height: 16px; color: var(--muted); }

.mini--map { position: relative; display: flex; align-items: center; justify-content: space-around; }
.mini > span.mini__pin { background: none; color: var(--accent-text); }
.mini__pin .icon { width: 18px; height: 18px; }
.mini--map .mini__pin:nth-child(2) { align-self: flex-start; }
.mini--map .mini__pin:nth-child(3) { align-self: flex-end; }

.mini--sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mini-gap); align-items: end; }
.mini--sizes > span { height: 34px; }
.mini--sizes > span.mini__cell--on { height: 52px; }

.mini--rows { display: grid; gap: var(--mini-gap); align-content: center; }
.mini--rows > span { height: 10px; }

.mini--form { display: grid; gap: var(--mini-gap-m); align-content: center; }
.mini--form > span { height: 14px; background: var(--surface); border: 1px solid var(--line-strong); }

.mini--pay { display: grid; gap: var(--mini-gap-s); align-content: center; }
.mini--pay > span { height: 12px; }
.mini--pay .mini__btn { height: 16px; background: var(--brand); }

/* ── Ещё не сделано ────────────────────────────────────────────── */
/* Видно нарочно. Пустой раздел без объяснения выглядит поломкой, и первым
   это скажет Заказчик, открывший ссылку. Пунктир — чтобы ни у кого
   не возникло сомнения, что это временно. */
.soon {
  margin: 0;
  /* Растянутая на весь экран рамка с одной строкой в левом углу выглядит
     поломкой убедительнее, чем объясняет. */
  max-width: 60ch;
  padding: var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* ── Призыв в конце ────────────────────────────────────────────── */
/* Заливка `--brand` тут не годится: полоса сама залита ею, и кнопка
   первого экрана на ней пропадает. Главная берёт акцент — тот же синий,
   что «Войти» в шапке. Вторая — контур: `--brand-line` на тёмном почти
   не виден (1.6:1), а `--on-brand-muted` даёт 6.96:1. */
.cta__actions { display: grid; gap: var(--space-3); }
.cta__actions .button { min-height: 52px; padding: var(--space-3) var(--space-6); font-size: var(--text-md); }
.cta__ghost { border: 1px solid var(--on-brand-muted); color: var(--on-brand); }
.cta__ghost:hover { border-color: var(--on-brand); background: var(--brand-3); }

/* ── Цены по размерам ──────────────────────────────────────────── */
/* Временный вид: строки вместо карточек. Нужен, чтобы на каркасе было
   видно, что расчёт цены «от» по сети доходит до страницы. Карточки
   со снимками встанут на это место в `Л5`. */
.prices { display: grid; gap: var(--space-2); }
.price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.price__name { font-weight: var(--weight-strong); }
.price__size { color: var(--muted); font-size: var(--text-sm); }
.price__from { margin-left: auto; font-size: var(--text-md); font-weight: var(--weight-strong); }
.price__from span { font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--muted); }
.price__none { margin-left: auto; color: var(--muted); font-size: var(--text-sm); }

/* ══ Ширины ════════════════════════════════════════════════════════
   Дальше только медиазапросы, по возрастанию и по одному на ширину.
   Всё, что происходит на данной ширине, лежит в одном месте. */

/* Узкий телефон: из шапки уходит слово, но не знак.
   Знак, название, телефон и «Войти» просят около 344 px, а между полями
   от края на 390 px остаётся 342 — и группа справа вылезала за поле,
   прижимаясь к краю ближе, чем всё остальное на странице. Убрать слово
   дешевле, чем телефон или вход: знак опознаётся и без него, а звонить
   и входить с телефона приходят чаще, чем читать название. */
@media (max-width: 430px) {
  .logo__name { display: none; }
}

@media (min-width: 560px) {
  /* Кнопки входа в строку, как только на неё хватает места: столбиком они
     занимают весь первый экран и отодвигают картинку за его край. */
  .hero__actions,
  .cta__actions { grid-auto-flow: column; justify-content: start; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 720px) {
  .band { padding: var(--space-16) 0; }
  .band__head { grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-4); }

  .header__nav { display: flex; }

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

     `auto-fill`, а не `auto-fit`: пять размеров не должны растягиваться
     на ширину восьми, если экран это позволяет. */
  .prices { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
  .price {
    display: grid; align-content: start; gap: var(--space-1);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }
  /* В карточке цена идёт своей строкой, а не прижимается к правому краю:
     прижимать её не к чему — соседний столбец начинается сразу за рамкой.

     Сброс стоит ниже правил `.price__*` намеренно: вес у них тот же,
     и выше по файлу он перебивался бы их `margin-left: auto`. Ровно так
     и вышло с первой попытки — цена уехала вправо, хотя `margin-left`
     в отладчике показывался нулевым: авто-поле у элемента сетки не даёт
     ему растянуться, и ширина бралась по содержимому. */
  .price__from, .price__none { margin-left: 0; margin-top: var(--space-2); }
}

@media (min-width: 900px) {
  /* Вторая кнопка шапки. Сначала она стояла с 720 px — вместе с меню, — и это
     был просчёт: на 720 появляется ещё и меню из трёх пунктов, и знак, меню,
     телефон, «Регистрация» и «Войти» в строку уже не помещались. Страница
     ехала вбок на 72 пикселя, и до 796 не переставала.

     Проверялись 390, 1280 и 1920, а планшетная полоса между ними — нет.
     Отсюда и правило: ширины проверяются не тремя точками, а от края до края.

     900, а не 796: порог зависит от длины телефона в шапке, а его задаёт
     Заказчик в настройках. Сотня пикселей запаса — на номер подлиннее
     и на лишний пункт меню. */
  .header__reg { display: inline-flex; }

  /* Текст слева, картинка справа — как в макете. Раньше 900 px картинка
     сжимается до нечитаемого: в ней разглядывают, что влезает в бокс. */
  .hero__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-8); }
  .steps { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1240px) {
  .steps { grid-template-columns: repeat(6, 1fr); }
}

/* На мониторе половина экрана тексту не нужна: заголовок, абзац и две
   кнопки занимают около 640 px, а остальные 280 оставались пустой
   полосой между текстом и картинкой. Колонка текста фиксируется по своему
   содержимому, а всё, что шире, отдаётся рисунку — так у первого экрана
   не остаётся места, которое ничем не занято. */
@media (min-width: 1280px) {
  /* Просвет между колонками вдвое шире обычного отступа: на мониторе
     текст и рисунок — два самостоятельных блока, и расстояние между ними
     должно читаться как пауза, а не как случайный зазор. */
  .hero__row { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: var(--space-16); }
}

/* Плавная прокрутка — только тем, кто не просил её убрать. Для остальных
   переход мгновенный: движение по экрану у части людей вызывает тошноту,
   и системная настройка означает именно это, а не «мне не нравится». */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Текстовые страницы ──────────────────────────────────────────────
   Перенесённый со старого сайта текст: «хранение шин», контакты, оферта.
   Читают его подряд и сверху вниз, а не разглядывают, — поэтому колонка
   уже остальной страницы. Строка длиннее 70–75 знаков заставляет глаз
   терять место возврата, и на широком мониторе это чувствуется сразу. */
.text { max-width: 68ch; }
.text__p { margin: 0 0 var(--space-4); color: var(--text); line-height: 1.7; }
.text__h2 { margin: var(--space-8) 0 var(--space-3); font-size: var(--text-xl); font-weight: var(--weight-strong); }
.text__h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-strong); }
/* Первый заголовок идёт сразу за `h1`, и верхний отступ там лишний:
   он читается как пропущенный кусок. */
.text > :first-child { margin-top: 0; }
.text__list { margin: 0 0 var(--space-4); padding-left: var(--space-5); line-height: 1.7; }
.text__list li { margin-bottom: var(--space-2); }