/* ARDORIUM — слой 2: компоненты.
   Токены и роли — app.css, подключается первым. Своих цветов здесь нет ни
   одного: компонент берёт роль (--ink, --accent, --surface), поэтому на
   тёмной полосе он читается сам, без варианта «то же самое, но на тёмном».

   Доли площади из палитры собираются полосами: navy — первый экран (≈40%),
   off-white — тело страницы (≈27%), коричневый — полоса шагов (≈15%),
   антрацит — подвал (≈15%), бордовый остаётся линиями и кнопками (≈3%). */

/* --- Каркас --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band {
  padding-block: var(--band-y);
}

.band--paper {
  background: var(--page);
}

.band--navy {
  background: var(--navy);
}

.band--teal {
  background: var(--teal);
}

.band--brown {
  background: var(--brown);
}

.band--ink {
  background: var(--anthracite);
}

.band + .band--paper {
  border-top: var(--hairline) solid var(--rule);
}

.stack {
  display: grid;
  gap: var(--space-5);
}

.stack--tight {
  gap: var(--space-3);
}

.measure {
  max-width: var(--measure);
}

/* Абзац во всю полосу — там, где ограничение длины строки рвёт мысль на узкий
   столбик в половину экрана (решение Николь 19.08). Кегль остаётся обычным:
   на полной ширине крупный текст читается тяжелее, а не легче. */
.wide {
  max-width: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 20;
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--space-4);
}

.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
  background: var(--navy);
  color: var(--offwhite);
}

/* --- Мелкая типографика --------------------------------------------------- */

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--text-1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--accent);
}

.lead {
  font-size: var(--text-3);
  line-height: var(--leading-snug);
}

.quiet {
  color: var(--ink-quiet);
}

.note {
  font-size: var(--text-1);
  color: var(--ink-quiet);
}

/* На морской волне ноты набираются ступенью тела, а не ступенью ноты. Белый
   по бирюзе даёт 3.51 — порог крупного текста, но не обычного и тем более не
   13-пиксельного. Поднять размер здесь дешевле, чем терять оговорку про НДС и
   условия возврата: это ровно тот текст, который обязан читаться. */
.band--teal .note {
  font-size: var(--text-2);
}

.draft-mark {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius);
  font-family: var(--font-text);
  font-size: var(--text-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

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

/* Шапка липкая (решение Николь 18.08): кнопка входа и разделы доступны с
   любого места страницы-интенсива, а она длинная — одиннадцать полос.

   Фон непрозрачный обязателен: сквозь полупрозрачную шапку проезжал бы текст.
   Слой ниже полосы согласия (10): согласие спрашивают до всего остального, и
   перекрывать его шапкой нельзя. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9;
  /* Синяя, как первый экран и подвал (решение Николь 18.08): страница
     начинается и заканчивается одним цветом, а молочное лежит между ними.
     Фон непрозрачный обязателен: сквозь полупрозрачную шапку проезжал бы
     текст. Слой ниже полосы согласия (10): согласие спрашивают раньше всего
     остального, и перекрывать его шапкой нельзя. */
  background: var(--navy);
  /* Полосы под шапкой нет (решение Николь 18.08): шапка и первый экран
     синие, и черта между ними делила один цвет надвое без причины. */
}

/* Шапка ниже обычного: это служебная строка, и высота у неё служебная. */
.site-header__row {
  padding-block: var(--space-2);
}

/* Якорь под липкой шапкой. Без этого браузер подводит цель к самой кромке
   окна, и заголовок блока оказывается ПОД шапкой — нажал «Инструменты»,
   а первая строка не видна. Запас с походом: шапка на широком экране выше. */
[id] {
  scroll-margin-top: 5rem;
}

/* Раскрытое меню на узком экране не должно уезжать за край окна вместе с
   липкой шапкой: длинный список получает свою прокрутку.

   ⚠️ Прокрутка живёт у САМОГО списка разделов, а не у строки шапки. Пока
   `overflow-y: auto` стоял на строке, она обрезала всё, что выходит за её
   границы, — и выпадающий список языков переставал выпадать: вместо трёх
   флагов под шапкой появлялась полоса прокрутки внутри самой шапки. Так это
   и выглядело у Николь 19.08: нажимаешь флаг — вместо списка белый столбик со
   стрелками. Обрезает не «overflow: hidden», а любое значение, кроме visible:
   абсолютно позиционированный потомок не выходит за прокручиваемого предка. */
.menu[open] ~ .site-nav {
  /* Запас 5rem — это высота строки шапки с отступами: список начинается под
     ней, и мерить ему остаётся окно за вычетом шапки. */
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
}

/* Четыре соседа в одном ряду: знак, языки, кнопка меню, список разделов.
   Список переносится на свою строку (основа 100%) и на узком экране скрыт,
   пока меню не раскрыто, — шапка занимает одну строку вместо двух. */
.site-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  /* Знак — тоже цель нажатия: ведёт на первый экран. */
  min-height: var(--tap);
  line-height: 0;
}

/* Нижняя граница подобрана под 320 px: знак, три языка и кнопка меню обязаны
   уместиться в одну строку и там. Иначе шапка снова разъезжается на два ряда,
   ради чего всё и затевалось. */
.brand__logo {
  display: block;
  width: clamp(5.5rem, 28vw, 12rem);
}

/* --- Кнопка меню ----------------------------------------------------------
   Раскрытие родное: <details> с одним <summary> и без содержимого. Само
   содержимое — соседний список разделов, им управляет `details[open] ~`.
   Ради этого и разведены: иначе пришлось бы держать переключатель на
   скрипте и повторять состояние «раскрыто» руками. */

/* Отступ слева задаёт только переключатель языков: при двух автоотступах
   flexbox делит свободное место поровну и разносит их по разным углам. */
.menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink-strong);
  cursor: pointer;
  list-style: none;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu__bars,
.menu__bars::before,
.menu__bars::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: var(--ink-strong);
}

.menu__bars {
  position: relative;
}

.menu__bars::before,
.menu__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu__bars::before {
  top: -0.375rem;
}

.menu__bars::after {
  top: 0.375rem;
}

/* --- Разделы --------------------------------------------------------------- */

.site-nav {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  font-family: var(--font-text);
  font-size: var(--text-2);
  letter-spacing: 0.02em;
}

.menu[open] ~ .site-nav {
  display: flex;
}

/* --- Шапка в одну строку (страница-интенсива) -------------------------------
   Знак, разделы, язык и «Войти» стоят в один ряд на любой ширине. Кнопки меню
   здесь нет: до неё надо догадаться, а «Войти» и разделы обязаны быть видны.

   Порядок задан числом, а не разметкой: переключатель языка стоит в шапке
   раньше блока разделов, потому что на остальных страницах разделы уезжают на
   вторую строку. Здесь строка одна, и язык обязан быть предпоследним.

   Свободное место забирает ОДИН автоотступ — у списка разделов. Свой отступ у
   переключателя здесь снимается: два автоотступа подряд flexbox делит пополам,
   и знак со списком уехали бы к середине.

   Селекторы составные не ради веса, а ради порядка: одиночный `.site-nav--line`
   перебивался бы правилами `.site-nav` из медиазапроса ниже по файлу — при
   равном весе побеждает последнее. */
.site-header__row--line {
  flex-wrap: nowrap;
}

.site-header__row--line .lang {
  margin-inline-start: 0;
}

.site-header__row--line .pair {
  order: 2;
  flex-shrink: 0;
}

.site-header__row--line .lang {
  order: 3;
}

/* Вход — ссылка, а не обведённая кнопка (решение Николь 19.08). Набран ровно
   как «Инструменты» рядом: тот же шрифт, тот же кегль `--text-1`, тот же
   приглушённый цвет и та же черта снизу, которая появляется под курсором.
   Свойства не копируются на глаз — правило стоит рядом с правилом соседа и
   повторяет его список, иначе первая же правка кегля разведёт их.
   Цель для пальца при этом полная: 2.75rem по высоте. */
.site-header__login {
  order: 4;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: var(--tap);
  border-bottom: 2px solid transparent;
  color: var(--ink-quiet);
  font-family: var(--font-text);
  font-size: var(--text-1);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
}

.site-header__login:hover,
.site-header__login:focus-visible {
  border-bottom-color: var(--accent);
  color: var(--ink-strong);
}

.site-header__row--line .brand {
  flex-shrink: 0;
}

/* Узкий экран: пара разделов уходит на свою строку (правка 19.08 по мобильной
   вёрстке). До неё пять соседей в одном ряду не помещались в 390 px, а сжиматься
   им запрещено — и шапка выталкивала «Войти» с переключателем языка за край
   окна. Ширина документа становилась 445 px при экране 390, горизонтальную
   прокрутку получала ВСЯ страница, и полосы ниже обрезались по правому краю:
   заголовок «Любой малый и средний бизнес» терял последнее слово.

   Перенос, а не прокрутка строки: прокрутка у строки шапки обрезала бы
   выпадающий список языков — тот самый дефект, что чинится выше. */
@media (max-width: 30rem) {
  .site-header__row--line {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }

  .site-header__row--line .pair {
    order: 5;
    flex-basis: 100%;
    justify-content: center;
  }
}

.site-header__row--line .site-nav--line {
  display: flex;
  order: 1;
  flex-basis: auto;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0 var(--space-4);
  padding-bottom: 0;
  /* Свободное место забирает отступ СЛЕВА от якоря, а не справа: так «Инструменты»
     встают вплотную к паре разделов (решение Николь 18.08), а не остаются у знака
     через всю строку. Один автоотступ на всю шапку — второй здесь же поделил бы
     свободное место пополам и растащил группу обратно. */
  margin-inline-start: auto;
  /* Не хватило ширины — якорь прокручивается, а не переносит строку и не
     выдавливает «Войти» за край. Полоса прокрутки убрана: на телефоне её и
     так нет, а на широком экране прокручивать нечего. */
  overflow-x: auto;
  scrollbar-width: none;
}

.site-header__row--line .site-nav--line::-webkit-scrollbar {
  display: none;
}

.site-header__row--line .site-nav--line a {
  flex-shrink: 0;
  border-top: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-quiet);
  font-size: var(--text-1);
  white-space: nowrap;
}

.site-header__row--line .site-nav--line a:hover,
.site-header__row--line .site-nav--line a[aria-current="page"] {
  color: var(--ink-strong);
  border-bottom-color: var(--accent);
}

.site-nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  border-top: var(--hairline) solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink-strong);
}

/* --- Переключатель языков ------------------------------------------------- */

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

.lang {
  position: relative;
  margin-inline-start: auto;
  font-family: var(--font-text);
  font-size: var(--text-1);
  letter-spacing: 0.04em;
}

.lang > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Цель для пальца остаётся полной, мелким становится ЗНАК внутри неё:
     44 px — это не размер картинки, а размер промаха. */
  min-width: var(--tap);
  min-height: var(--tap);
  cursor: pointer;
}

/* Флаг в кружке: круг обрезает прямоугольник флага, поэтому картинка внутри
   растянута и подрезана по центру — иначе в круге остались бы поля. */
.lang__flag {
  display: block;
  overflow: hidden;
  width: 1.5rem;
  height: 1.5rem;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 50%;
}

.lang__flag img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

.lang > summary::-webkit-details-marker {
  display: none;
}

.lang > summary::marker {
  content: "";
}

/* Флаг — маленький шарик, мельче свёрнутого вида (решение Николь 19.08):
   кружки во всю зону нажатия читались гигантскими. Зона нажатия при этом
   остаётся полной — она у ссылки вокруг картинки, и мелким становится ЗНАК,
   а не цель для пальца. */
.lang__list img {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: cover;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 50%;
}

/* Раскрытый вид — шарики флагов СТОЛБИКОМ, друг под другом (решение Николь
   19.08). Ряд вбок читался лентой рядом с кнопкой, а список обязан выпадать
   вниз — туда, куда его ждут после нажатия.

   Рамки и скругления нет намеренно (решение Николь 19.08): шарики стоят
   просто на синем, как продолжение шапки. Обведённая плашка вокруг двух
   флагов превращала выбор языка в панель. */
.lang__list {
  position: absolute;
  /* Кегль держится в наборе, даже когда подписи скрыты: проверка навигации
     смотрит на него, а подписи возвращаются, если решим их показать. */
  font-size: var(--text-2);
  inset-inline-end: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Фон — тот же синий, что у шапки, и БЕЗ рамки со скруглением: шарики
     стоят просто на синем (решение Николь 19.08). Прозрачный фон не годится:
     на телефоне список выпадает поверх второй строки шапки, и флаги ложились
     прямо на подписи кнопок «I want to buy». Роль `--surface` тут не подходит
     — внутри `on-dark` она равна `transparent`. */
  background: var(--navy);
}

/* Каждый пункт — зона нажатия ростом с цель для пальца: 2.75rem, а не
   «сколько нарисовалось». Проверяется тестом навигации. Видимый шарик внутри
   меньше — это картинка флага, правило выше. Текущего языка в списке нет
   вовсе (шаблон его пропускает), поэтому и пометки «вы здесь» тут больше не
   бывает. */
.lang__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
}

/* Наведение поднимает шарик, а не рисует рамку: рамка вокруг маленького флага
   на синем читается как второй кружок. */
.lang__list a:hover img {
  border-color: var(--dark-ink);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* 44 px — минимальная цель для пальца, а не для курсора. */
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-5);
  border: var(--hairline) solid var(--btn-edge);
  border-radius: var(--radius-button);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font-text);
  font-size: var(--text-2);
  font-weight: var(--weight-strong);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: color-mix(in srgb, var(--btn-bg) 84%, var(--anthracite));
  border-color: color-mix(in srgb, var(--btn-edge) 84%, var(--anthracite));
  color: var(--btn-ink);
}

/* Главная кнопка трипваера. Единственная на странице, и страница ради неё
   существует: на телефоне она занимает всю ширину и набрана ступенью 2, а не
   ступенью метки, — 13 px на кнопке, ради которой пришёл весь трафик, это
   экономия не в том месте. Новых цветов и шрифтов не заводит: тот же
   `--btn-bg`, та же гарнитура, только размер и поле. */
.btn--lead {
  min-height: 3.25rem;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-3);
}

/* Обведённая кнопка: рамка вместо заливки. Нужна там, где действие одно, но
   главное на экране — не оно. В шапке страницы-интенсива это «Войти»: три
   призыва «Забрать схему» носят заливку, и четвёртая закрашенная кнопка
   спорила бы с ними за внимание. */
/* Обведённая кнопка красная тем же цветом, что и залитая (решение Николь
   18.08): цвет действия на странице один. Отличается не цвет, а вес — рамка
   вместо заливки. «Войти» в шапке не должна спорить с тремя призывами
   «Забрать схему», но и другим цветом быть не может.
   Красный по молочному даёт 6.48 — подпись читается с запасом. */
.btn--ghost {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent);
}

.btn--ghost:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

/* Кнопка в строку шапки: та же цель для пальца, но поля по горизонтали уже —
   иначе пара, язык и кнопка не встают в одну строку со знаком. */
.btn--compact {
  padding-inline: var(--space-3);
  font-size: var(--text-1);
}

/* --- Подписи под кнопкой ----------------------------------------------------
   Обещание возврата под верхней кнопкой и «уже идут N человек» под нижней
   (решение Николь 18.08). Обе строки — не ноты внизу полосы, а часть самой
   кнопки: они отвечают на возражение ровно там, где оно возникает.

   Приглушённый цвет, а не полный: строка обязана читаться, но спорить с
   подписью кнопки ей нечем. */
.under-btn {
  margin-block-start: calc(var(--space-3) * -1);
  color: var(--ink-quiet);
  font-size: var(--text-1);
}

/* Строка «уже идут N человек». Метка слева — четыре кружка внахлёст: так
   рисуют «несколько человек» без единой фотографии и без единого эмодзи.
   Нарисованы тенями одного элемента, а не четырьмя тегами: в разметке это
   один знак, а не список пустых элементов, который читалка экрана обязана
   перечислять. */
/* Стоит вплотную к обещанию возврата: обе строки — хвост одной кнопки, а не
   два отдельных абзаца. Отрицательный отступ снимает шаг столбика между ними. */
.going {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: calc(var(--space-4) * -1);
  color: var(--ink-quiet);
  font-size: var(--text-1);
}

.going__dots {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0.4375rem 0 0 color-mix(in srgb, var(--accent) 78%, transparent),
    0.875rem 0 0 color-mix(in srgb, var(--accent) 56%, transparent),
    1.3125rem 0 0 color-mix(in srgb, var(--accent) 34%, transparent);
  /* Место под три кружка справа: тень поля не занимает и наехала бы на текст. */
  margin-inline-end: 1.3125rem;
}

/* Стрелка в подписи кнопки. Отступ слева свой, а не общий `gap`: между словом
   и стрелкой места нужно больше, чем между словами. */
.btn__arrow {
  margin-inline-start: var(--space-2);
}

/* Раскрывающиеся дни на полосе по центру: сам столбик центрован, а строки
   внутри дней прижаты влево (решение Николь 18.08). Читают их слева направо,
   и центрованный список пунктов заставляет глаз каждый раз искать начало. */
.stack--middle .modules,
.stack--middle .module,
.stack--middle .questions,
.stack--middle .question {
  width: 100%;
  text-align: start;
}

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

   `justify-items`, а не `align-items`: столбик — это grid, и по горизонтали
   в нём распоряжается именно justify. С align вышло бы центрирование по
   вертикали внутри строки, то есть ничего не изменилось бы вовсе. */
.stack--middle {
  justify-items: center;
  text-align: center;
}

/* --- Пара разделов в общей обводке ------------------------------------------
   «Хочу купить» и «Есть бизнес» — одна развилка, две стороны одного вопроса.
   Общая рамка с разделителем читается как «выбери одно из двух»; две отдельные
   кнопки читались бы как «нажми обе».

   Форма капсулы, а не прямоугольник со скруглением 8 px: у пары внутри есть
   разделитель, и прямая рамка вокруг двух отсеков выглядит переключателем
   состояния — «включено/выключено», — а это не переключатель, а два перехода.

   Точка перед подписью — метка раздела, а не украшение: она отличает переход
   в раздел сайта от якоря на блок этой же страницы («Инструменты» стоит без
   точки и без рамки). Нарисована фоном, а не эмодзи. */
.pair {
  display: inline-flex;
  align-items: center;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 999px;
}

.pair__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* Цель для пальца полная: мелкой становится буква, а не кнопка. */
  min-height: var(--tap);
  padding-inline: var(--space-3);
  border-radius: 999px;
  color: var(--ink-strong);
  font-family: var(--font-text);
  font-size: var(--text-1);
  font-weight: var(--weight-strong);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.pair__item::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
}

.pair__item + .pair__item {
  border-inline-start: var(--hairline) solid var(--rule);
}

/* Наведение — заливка морской волной с белой подписью (решение Николь 18.08).
   Точка перед подписью на этом фоне тоже становится белой: красная по бирюзе
   даёт 2.09 и пропадает. Само состояние держится ровно столько, сколько на
   кнопке стоит курсор, — читают её в спокойном виде, а там контраст полный. */
.pair__item:hover,
.pair__item:focus-visible,
.pair__item[aria-current="page"] {
  background: var(--teal);
  color: var(--white);
}

.pair__item:hover::before,
.pair__item:focus-visible::before,
.pair__item[aria-current="page"]::before {
  background: var(--white);
}

@media (max-width: 32rem) {
  .btn--lead {
    display: flex;
    width: 100%;
  }
}

.btn--ghost {
  background: transparent;
  border-color: var(--accent);
  color: var(--ink-strong);
}

.btn--ghost:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
  color: var(--ink-strong);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius);
}

/* Счёт дня — в одной строке с названием (решение Николь 18.08). Отделяется не
   переносом, а начертанием: курсив с засечками против прямого полужирного.
   Курсив здесь настоящий, своим файлом: наклон обычного начертания у шрифта с
   засечками видно сразу — буквы не меняют форму, а просто ложатся набок. */
.card__count {
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
  /* Пробел после двоеточия ставит разметка; неразрывным его делать нельзя —
     на 390 px строка обязана иметь право перенестись именно здесь. */
}

/* Шаг третьего пути: номер во всю карточку. Цифра крупная и малиновая —
   она здесь не подпись, а сам знак порядка; название стоит под ней и набрано
   обычным кеглем, иначе два крупных набора спорят. */
/* Номер слева, название справа от него (решение Николь 19.08): шаг читается
   одной строкой — цифра и что делают, — а не двумя ярусами. */
.card--step {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
}

.card--step .card__count {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4rem);
  font-style: normal;
  font-weight: 500;
  line-height: 0.9;
}

/* Заголовок третьего пути малиновым (решение Николь 19.08): он отделяет выход
   от трёх сомнений над ним, и цвет делает это раньше, чем прочитан текст. */
.steps-head {
  color: var(--accent);
}

/* Название карточки акцентом — там, где автор текста пометил его главным.
   Цвет, а не размер: размер сместил бы карточку в сетке, а метка обязана
   работать внутри одинаковых по высоте карточек. */
.card__title--accent {
  color: var(--accent);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-3);
  font-weight: var(--weight-strong);
  line-height: var(--leading-snug);
  color: var(--ink-strong);
}

.card__foot {
  margin-top: auto;
  padding-top: var(--space-2);
}

a.card {
  text-decoration: none;
  color: var(--ink);
}

a.card:hover {
  border-color: var(--accent);
  color: var(--ink);
}

/* Подпись действия внутри ссылки-карточки: выглядит как кнопка, но остаётся
   текстом — вложенная кнопка внутри ссылки ломает клавиатурный обход. */
.card__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-text);
  font-size: var(--text-1);
  font-weight: var(--weight-medium);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

a.card:hover .card__action {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

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

/* Первый экран по центру (решение Николь 19.08): на нём остались надзаголовок
   и название, кнопка уехала вниз — и по левому краю такая пара висела в
   верхнем углу пустой полосы. */
.hero {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  text-align: center;
}

.hero__descriptor {
  font-family: var(--font-text);
  font-size: var(--text-1);
  letter-spacing: var(--tracking-word);
  text-transform: uppercase;
  color: var(--accent);
}

.hero__lead {
  max-width: var(--measure);
  font-size: var(--text-3);
  line-height: var(--leading-snug);
  color: var(--ink-quiet);
}

/* Одно действие первого экрана. Кнопка стоит под текстом, к которому
   относится, а не плавает: на телефоне палец доходит до неё прокруткой, а не
   ищет её поверх содержимого. */
.hero__action {
  margin-top: var(--space-3);
}

/* Развилка убрана с первого экрана решением 14.08. Правила остаются: тот же
   вид нужен перечням путей внутри страниц, и удалять их вслепую значит
   переписывать вёрстку дважды. */
.fork {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.fork__label {
  font-family: var(--font-text);
  font-size: var(--text-1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}

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

.steps {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  padding-top: var(--space-3);
  border-top: 2px solid var(--rule-strong);
}

.step__title {
  font-family: var(--font-display);
  font-size: var(--text-2);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-strong);
}

.step__text {
  margin-top: var(--space-2);
  font-size: var(--text-1);
  line-height: var(--leading-text);
  color: var(--ink-quiet);
}

/* --- Список программ ------------------------------------------------------ */

.program-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Пункт списка тянется на высоту строки сетки, карточка внутри — нет.
   Без этого рамки карточек в ряду заканчиваются на разной высоте. */
.program-list > li {
  display: grid;
}

/* --- Разделы страницы ----------------------------------------------------- */

.section {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--hairline) solid var(--rule);
}

.section__body {
  max-width: var(--measure);
}

.section__body p + p {
  margin-top: var(--space-3);
}

.section__list {
  max-width: var(--measure);
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.section__list li {
  padding-left: var(--space-4);
  position: relative;
}

.section__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: var(--hairline);
  background: var(--accent);
}

/* --- Факты программы ------------------------------------------------------ */

.facts {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.facts > div {
  padding-top: var(--space-2);
  border-top: var(--hairline) solid var(--rule);
}

.facts dt {
  font-family: var(--font-text);
  font-size: var(--text-1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.facts dd {
  margin: 0;
}

/* --- Варианты участия ----------------------------------------------------- */

.plans {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan__price {
  font-family: var(--font-display);
  font-size: var(--text-3);
  color: var(--ink-strong);
}

/* --- Форма ---------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field > label {
  font-family: var(--font-text);
  font-size: var(--text-1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.field input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius);
}

.field input::placeholder {
  color: var(--ink-quiet);
}

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

.consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: 0;
}

.consent input {
  flex: none;
  /* 24 px — нижняя граница цели нажатия по правилам доступности. Подпись
     рядом тоже переключает галочку и высотой уже с палец. */
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.55rem;
  accent-color: var(--accent);
}

.consent label {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  font-size: var(--text-1);
  line-height: var(--leading-snug);
  cursor: pointer;
}

.form-error {
  max-width: var(--measure);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* --- Юридическая страница --------------------------------------------------- */

.legal-meta {
  font-family: var(--font-text);
  font-size: var(--text-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

/* Плашка черновика обязана читаться как предупреждение, а не как оформление:
   принятый за действующий черновик документа хуже, чем его отсутствие. */
.legal-draft {
  padding-block: var(--space-5);
  border-top: 3px solid var(--burgundy);
  border-bottom: 3px solid var(--burgundy);
  background: color-mix(in srgb, var(--burgundy) 10%, var(--offwhite));
}

.legal-draft__badge {
  margin: 0 0 var(--space-2);
  font-family: var(--font-text);
  font-size: var(--text-3);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
  color: var(--burgundy);
}

.legal-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-1);
}

.legal-links a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink);
}

/* --- Трипваер --------------------------------------------------------------- */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--navy);
}

/* Пруф на первом экране: история, а не цифра. Отбит линией слева, без рамки
   и без тени — карточка здесь читалась бы как ещё один блок страницы, а это
   часть первого экрана. */
.proof {
  margin: var(--space-6) 0 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent);
  max-width: var(--measure);
}

.proof__title {
  font-family: var(--font-text);
  font-size: var(--text-1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  opacity: 0.75;
}

.proof__what {
  margin: var(--space-2) 0 0;
  font-size: var(--text-3);
  line-height: var(--leading-snug);
}

.proof__who {
  margin: var(--space-2) 0 0;
  font-size: var(--text-2);
  opacity: 0.85;
}

.reviews {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reviews blockquote {
  margin: 0;
  font-size: var(--text-3);
  line-height: var(--leading-snug);
}

.questions {
  display: grid;
  gap: var(--space-2);
  max-width: var(--measure);
}

.question {
  border-top: var(--hairline) solid var(--rule);
}

.question > summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--tap);
  padding-inline-end: var(--space-5);
  font-family: var(--font-text);
  font-size: var(--text-2);
  color: var(--ink-strong);
  cursor: pointer;
}

.question > p {
  padding-bottom: var(--space-3);
  max-width: var(--measure);
}

/* --- Полосы многоблочной страницы ------------------------------------------
   Вторая строка заголовка, части программы раскрывашками, блок заказа,
   портрет ведущего. Тени нет ни у одного блока: панель отвергает связку
   «скруглённая карточка с тенью и градиентом» как воронку продаж
   (business/палитра.md). Скругление взяли, тень не взяли — карточку отделяют
   граница и фон. */

/* Перенос строкой, а не `<br>` из данных: разметку в тексте не храним, а
   заголовок в две строки читается ритмичнее одной длинной. */
.title-tail {
  display: block;
  color: var(--accent);
}

/* Вторая ступень названия — тем же кеглем, своей строкой. Третья (`title-tail`)
   мельче и цветом: три строки одного роста читались бы как три названия. */
.title-line2 {
  display: block;
}

.modules {
  display: grid;
  gap: var(--space-2);
  max-width: var(--measure);
}

.module {
  border-top: var(--hairline) solid var(--rule);
}
/* Дни на морской волне — плашками, а не строками через линию (решение Николь
   19.08): плашка сама показывает, что её открывают, линия этого не говорила.
   Молочная, а не тёмная: счёт дня Николь просила малиновым, а малиновый даёт
   по бирюзе 2.09 и по тёмно-синему 2.26 — на тёмном фоне его просто не видно.
   На молочном он даёт 6.54 и читается сразу.

   Внутри плашки роли цвета возвращаются к тем, что на молочных полосах:
   бирюзовая полоса красит текст белым, а на светлой плашке белое исчезло бы. */
.band--teal .module {
  --ink: var(--anthracite);
  --ink-quiet: var(--anthracite);
  --ink-strong: var(--navy);
  --accent: var(--burgundy);
  --rule: color-mix(in srgb, var(--anthracite) 25%, transparent);
  --rule-strong: color-mix(in srgb, var(--anthracite) 45%, transparent);
  background: var(--offwhite);
  border-top: 0;
  border-radius: var(--radius);
  padding-inline: var(--space-4);
  color: var(--ink);
}

/* Плашки стоят свободнее строк: между ними просвет полосы, а не общая линия.
   Ограничение длины строки снято — иначе название дня ломается на вторую
   строку там, где рядом с ним ещё половина полосы пустая. */
.band--teal .modules {
  gap: var(--space-3);
  /* Вдвое уже полосы (просьба Николь 19.08). Не ровно половина от 74rem, а на
     несколько знаков шире: в 37rem название второго дня уже не помещается в
     строку рядом со счётом, и плашка снова ломается на две строки. */
  max-width: 42rem;
}


/* Счёт дня и его название — в одной строке (решение Николь 18.08). Строкой, а
   не столбиком: «День 1» и «Что искать и где» — одна мысль, и перенос делил бы
   её надвое. Не хватило ширины — название уходит на вторую строку само. */
.module > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  min-height: var(--tap);
  padding-block: var(--space-2);
  padding-inline-end: var(--space-5);
  cursor: pointer;
}

/* Счёт дня — крупно и курсивом (решение Николь 18.08), той же рукой, что и
   счёт на карточках вечеров. Капитель и разрядка сняты: с курсивом засечкового
   шрифта они спорят — прописные наклоняются в другую сторону, чем строчные,
   и строка начинает шататься. */
.module__number {
  font-family: var(--font-display);
  font-size: var(--text-3);
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

/* Надзаголовок на морской волне. Красным его набрать нельзя: красный по бирюзе
   даёт 2.09 и не виден вовсе. Отличается размером, разрядкой и капителью —
   на светлой полосе это работает не хуже цвета. */
.band--teal .eyebrow {
  color: var(--white);
}

/* Заголовок полосы программы крупнее обычного: это главная панель страницы,
   и она обязана отличаться от восьми молочных полос не только фоном. */
.band--teal h2 {
  font-size: var(--text-5);
}

/* Лид под ним, наоборот, тише обычного: заголовок уже сказал главное. */
.band--teal .lead {
  font-size: var(--text-2);
}

/* Пункты внутри раскрытого дня — плашками потемнее полосы (решение Николь
   18.08): так видно, где кончается один пункт и начинается следующий, а на
   ровной бирюзе они сливались в сплошной текст.

   Цвет получен примесью синего к бирюзе, а не новым значением: набор закрыт
   одиннадцатью, и двенадцатое не пройдёт проверку. Белый текст на этой смеси
   читается лучше, чем на самой бирюзе, — фон стал темнее. */
.band--teal .section__list li {
  /* Тире-маркер слева убрано вместе с его отступом: у плашки есть край, и
     второй знак начала строки только спорит с ним. */
  padding: var(--space-3) var(--space-4);
  /* Бирюза раздела, а не примесь синего (решение Николь 19.08): раскрытый
     день показывает полосу изнутри плашки. Цвет текста задан здесь прямо —
     плашка дня вернула тёмные роли молочной полосы, и без этого белые буквы
     стали бы тёмными на бирюзе. */
  background: var(--teal);
  border-radius: var(--radius);
  color: var(--white);
}

.band--teal .section__list li::before {
  content: none;
}

/* Пункты шире обычной колонки текста: внутри плашки строка обязана дышать. */
.band--teal .section__list {
  max-width: none;
  gap: var(--space-3);
}

/* Счёт дня на морской волне — глубокий синий, а не красный. Это замер, а не
   вкус: красный по бирюзе даёт 2.09, то есть его там просто не видно, а синий
   даёт 4.73. Название дня рядом остаётся белым, и два цвета по-прежнему
   отделяют метку от имени. */
.band--teal .module__number {
  color: var(--accent);
}

/* Условия участия строкой с галочкой. Галочка — края пустого элемента, как и
   везде на этой странице: ни картинки, ни эмодзи, ни знака, который читалка
   экрана попыталась бы прочесть вслух. */
/* Обе строки в одном ряду (решение Николь 18.08): это два условия участия, а
   не список, и вместе они читаются одним взглядом. На узком экране переносятся
   сами. */
/* Метки платёжных систем — мелко и в строку под кнопкой. Названиями, а не
   значками: чужой знак берут из его же набора фирменных файлов, а похожий
   рисунок на глаз хуже честной надписи. */
/* Чем платят — одной тихой строкой под кнопкой. Без рамок и без значков:
   рамки делали из этого четыре кнопки, а рядом стоит настоящая. */
/* Вплотную под кнопкой (решение Николь 18.08): это подпись к ней, а не
   отдельная строка полосы, и общий шаг столбика её отрывал. */
.pay {
  /* Отрицательный отступ съедает почти весь шаг столбика: строка обязана
     стоять вплотную к кнопке, а не через просвет в палец шириной. */
  margin-block-start: calc(var(--space-5) * -1 + var(--space-1));
  margin-inline: 0;
  color: var(--ink-quiet);
  font-size: var(--text-1);
}

.marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.marks__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-1);
}

.marks__tick {
  flex-shrink: 0;
  width: 0.4375rem;
  height: 0.75rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  /* Поворот съедает место слева и опускает галочку ниже строки: возвращаем
     обратно, иначе она наезжает на первое слово. */
  margin-inline: 0.25rem 0.375rem;
}

.module__title {
  font-family: var(--font-display);
  font-size: var(--text-3);
  line-height: var(--leading-snug);
  color: var(--ink-strong);
}

.offer__price {
  font-family: var(--font-display);
  font-size: var(--text-4);
  line-height: var(--leading-tight);
  color: var(--ink-strong);
}

/* Портрет в круге (решение Николь 18.08). Круг обрезает прямоугольник, поэтому
   картинка внутри растянута и подрезана по центру — иначе в круге остались бы
   поля, а лицо оказалось бы не в середине. */
/* Снимок кружком слева, рассказ справа. На узком экране — столбиком, снимок
   по центру: две колонки по 190 px там не строятся, а обрезать лицо нельзя. */
.host {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  text-align: center;
}

/* Снимок и подпись над ним — одной колонкой, обе по её середине. */
.host__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.host__about {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Имя латиницей и капителью — так оно стоит на самом знаке. */
.host__name {
  margin: 0;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

@media (min-width: 48rem) {
  /* Снимок и рассказ рядом, но вся пара стоит в середине полосы, а не
     прижата к левому краю (решение Николь 19.08): у блока своя ширина, и в
     широкой полосе он висел сбоку. Текст внутри при этом остаётся по левому
     краю — рассказ на несколько строк по центру читается тяжело. */
  .host {
    grid-template-columns: auto minmax(0, 34rem);
    justify-content: center;
    align-items: start;
    justify-items: start;
    text-align: start;
  }
}

.host__photo {
  width: 14rem;
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
}

/* --- Знак раскрытия ---------------------------------------------------------
   Плюс справа у всего, что раскрывается: вопросы и части программы (решение
   Николь 18.08). Раньше состояние показывал только родной треугольник браузера
   — в Safari он слева, в Chrome другой формы, и на телефоне его почти не видно.

   Знак нарисован псевдоэлементом, а не картинкой и не эмодзи: он обязан менять
   форму по состоянию, а `aria-expanded` для скринридера родной `<summary>`
   отдаёт сам — знак для него скрыт. */

.question > summary,
.module > summary {
  position: relative;
  list-style: none;
}

.question > summary::-webkit-details-marker,
.module > summary::-webkit-details-marker {
  display: none;
}

.question > summary::marker,
.module > summary::marker {
  content: "";
}

.question > summary::after,
.module > summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-text);
  font-size: var(--text-3);
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--accent);
}

/* Минус, а не перевёрнутый плюс: повёрнутый знак в момент поворота читается
   как помеха, а смена символа — как ответ. */
.question[open] > summary::after,
.module[open] > summary::after {
  /* Записан кодом, а не самим знаком: минус в этом файле однажды уже
     распался при перекодировке на невидимый знак и цифру «2», и на раскрытом
     блоке вместо него стояла двойка. Найдено осмотром 18.08. */
  content: "\2212";
}

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

/* Белая черта над подвалом (решение Николь 18.08): подвал и последняя полоса
   страницы оба тёмно-синие, и без черты они читались как один блок. */
.site-footer {
  border-top: 2px solid var(--dark-ink);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-6);
}

/* Четыре колонки — на десктопе. На телефоне они идут одна под другой: две
   узкие колонки на 390 px дают строку в три слова и рваный правый край. */
.site-footer__cols {
  display: grid;
  gap: var(--space-6);
}

/* Подвал набран мельче и плотнее (решение Николь 18.08): это справочный слой,
   и по нему не читают, а ищут глазами нужную строку. */
.site-footer__cols {
  font-size: var(--text-1);
}

/* Подвал набран мельче и плотнее (решение Николь 18.08): это справочный слой,
   по нему не читают, а ищут глазами нужную строку. */
.site-footer__cols {
  font-size: var(--text-1);
}

/* Контакт — акцентом. На синем это КОРАЛЛ, а не красный: красный по синему
   даёт 2.26 и не виден вовсе, коралл — 5.97. */
.site-footer__col--contact a {
  color: var(--dark-accent);
}

/* Строки подвала стоят вплотную (решение Николь 18.08): «Политика обработки»,
   «Выходные данные», «Оферта» — это один список, и просвет между ними делал из
   трёх строк три отдельных блока.

   ⚠️ Цель для пальца здесь 36 px вместо 44: полный размер разносил ссылки на
   высоту строки каждую. Это сознательный размен и единственное место страницы,
   где он сделан, — в шапке, на кнопках и в развилке цель полная. */
.site-footer__col {
  display: grid;
  gap: 0;
  align-content: start;
}

.site-footer__col a {
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

.site-footer__col a:hover {
  color: var(--ink-strong);
  text-decoration: underline;
}

.site-footer__col p {
  margin: 0;
  font-size: var(--text-1);
  color: var(--ink-quiet);
}

.site-footer__col .eyebrow {
  color: var(--accent);
}

/* Знак и оговорка — в одной строке (решение Николь 18.08): оговорка объясняет
   ровно то, что стоит слева от неё, и под знаком читалась как отдельная мысль.
   На узком экране складываются столбиком: две колонки там не строятся. */
.site-footer__base {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--rule);
}

@media (min-width: 46rem) {
  .site-footer__base {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-5);
  }

  .site-footer__base > :nth-child(n + 3) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 46rem) {
  .site-footer__cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

.site-footer .brand__logo {
  width: clamp(8.5rem, 32vw, 11rem);
}

.site-footer p {
  max-width: var(--measure);
  font-size: var(--text-1);
  color: var(--ink-quiet);
}

.site-footer .disclaimer {
  color: var(--ink);
}

/* --- Ширины больше телефона -----------------------------------------------
   Каждый экран принят на 390 px раньше десктопа: колонки добавляются, а не
   убираются. */

@media (min-width: 40rem) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 46rem) {
  .fork {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .program-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Места хватает — разделы стоят строкой всегда, кнопка меню не нужна.
     Скрыта именно она, а не список: список обязан быть виден и тогда,
     когда меню закрыто. */
  .menu {
    display: none;
  }

  .site-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
    padding-bottom: var(--space-2);
  }

  .site-nav a {
    border-top: 0;
    border-bottom: 2px solid transparent;
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    border-bottom-color: var(--accent);
  }
}

@media (min-width: 64rem) {
  /* Четыре карточки в три колонки дают ряд «три и один». Оставляем им две:
     2×2 читается как набор, 3+1 — как недосчитанный ряд.

     Селектор составной не ради веса, а ради порядка: одиночный `--four`
     стоит ВЫШЕ правила `.program-list` в этом же медиазапросе, а при равном
     весе побеждает последнее — и четыре карточки молча вставали в три
     колонки. Найдено осмотром 18.08. */
  .program-list.program-list--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .program-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Счёт дня и название — одной строкой (просьба Николь 19.08). Перенос
     разрешён только там, где ширины действительно не хватает. */
  .band--teal .module > summary {
    flex-wrap: nowrap;
  }

  .site-header__row {
    padding-block: var(--space-2);
  }
}

/* --- Баннер согласия -------------------------------------------------------
   Стоит последним в body. `sticky`, а не `fixed`: полоса резервирует себе
   место в потоке и не перекрывает подвал на последнем экране. Состояние
   держит сервер, поэтому ни строки JS; тёмная полоса берёт роли от `on-dark`.
   Кнопки равного размера: «нет» обязано быть таким же доступным, как «да». */

/* Полоса на глубоком синем, а не на антраците (решение Николь 18.08): синий —
   основа страницы, и полоса согласия перестала выглядеть чужой деталью.
   Обе кнопки обведённые: заливка у «разрешить» делала её главной, а выбор
   здесь равный — иначе это не выбор, а уговаривание. */
.consent-banner {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--navy);
  border-top: var(--hairline) solid var(--dark-rule);
}

/* На тёмной полосе обводка и подпись — молочные: красный по синему даёт 2.26
   и не читается вовсе. Роль акцента на тёмном уже переопределена, но кнопке
   нужен не акцент, а полный контраст: по ней принимают решение. */
.consent-banner .btn--ghost {
  border-color: var(--dark-ink);
  color: var(--dark-ink);
}

.consent-banner .btn--ghost:hover {
  background: color-mix(in srgb, var(--offwhite) 14%, transparent);
  border-color: var(--dark-ink);
  color: var(--dark-ink);
}

.consent-banner__inner {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

.consent-banner__text {
  max-width: var(--measure);
  font-size: var(--text-1);
  color: var(--ink);
}

.consent-banner__actions,
.consent-choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

@media (min-width: 48rem) {
  .consent-banner__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* --- Картинка «как это работает» ---------------------------------------------
   Три части и ряд кнопок под ними (чертёж Николь 18.08). Нажатие меняет ЛЕВУЮ
   и ПРАВУЮ карточки сразу; середина стоит на месте — что улучшают, одинаково
   у любого объекта, и в этом половина довода.

   Собрана карточками, а не файлом-картинкой: на 390 px она обязана
   перестроиться в столбик. Растр там даёт либо нечитаемые подписи, либо
   горизонтальную прокрутку. */
.mech {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}






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





.mech__part {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Карточки НЕ тянутся: три части стоят серединами на одной линии (решение
   Николь 18.08), и растянутая до общей высоты карточка это ломала бы —
   середина у неё оказывалась бы там, где кончается пустое место, а не там,
   где кончается содержимое. */

/* Надзаголовок в две ступени: первая строка крупно и прямо, вторая тише и
   курсивом. Курсив настоящий, своим файлом, — наклон обычного начертания у
   шрифта с засечками видно сразу. Вторая строка с новой строки, а не через
   точку: точка соединила бы две мысли, которые обязаны остаться отдельными. */
.lead-in {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-4);
  line-height: 1.2;
  text-wrap: balance;
}

/* Надзаголовок стал главным заголовком полосы (решение Николь 19.08): крупно
   и по центру. Строка под ним при этом уменьшена — две ступени поменялись
   местами, а не встали в один рост. */
.lead-in--head {
  margin-inline: auto;
  font-size: var(--text-5);
  text-align: center;
}

.why-head {
  font-size: var(--text-3);
}

.lead-in__tail {
  display: block;
  margin-top: var(--space-2);
  color: var(--ink-quiet);
  font-size: var(--text-3);
  font-style: italic;
}

.mech__title {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-3);
}

/* --- Развилка объектов -------------------------------------------------------
   Кнопки-таблетки под картинкой и по карточке слева и справа на каждый объект.
   Переключение родное: переключатель спрятан внутри своей кнопки, а нужные
   карточки показывает `:has()` от общего предка. */
.picks__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

/* Три карточки вечеров под схемой (решение Николь 19.08). Счёт малиновым и
   курсивом — той же рукой, что и счёт дня в программе ниже: это одни и те же
   три вечера, и разный набор читался бы как два разных списка. */
.daybriefs {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}

.daybriefs__lead {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-3);
  text-align: center;
}

.daybriefs__row {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* На бирюзовой полосе карточки вечеров — молочные плашки: внутри них роли
   цвета возвращаются к тем, что на светлых полосах, и счёт дня снова читается
   малиновым. По самой бирюзе малиновый даёт 2.09 и не виден вовсе. */
.band--teal .daybrief {
  --ink: var(--anthracite);
  --ink-quiet: var(--anthracite);
  --ink-strong: var(--navy);
  --accent: var(--burgundy);
  --rule-strong: color-mix(in srgb, var(--anthracite) 25%, transparent);
  background: var(--offwhite);
  color: var(--ink);
}

/* Карточки вечеров ниже обычной карточки (решение Николь 19.08): в них
   короткие строки, и полный набор полей делал из трёх подписей три плиты. */
.daybrief {
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  /* Текст к левому краю (решение Николь 19.08): полоса центрирует своё
     содержимое, и строки внутри карточек разъезжались по середине. */
  text-align: start;
}

.daybrief__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.daybrief__number {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2);
}

.daybrief__title {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-2);
}

.daybrief__lines {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font-size: var(--text-1);
  line-height: var(--leading-snug);
}

/* Кнопка под строкой примеров — по центру ряда и с просветом от него, чтобы
   не читалась пятой таблеткой в том же ряду (решение Николь 19.08). */
.picks__cta {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  text-align: center;
}

.picks__cta > p {
  margin: 0;
}

/* Подпись кнопки одной строкой (просьба Николь 19.08): «Забрать полный план
   за 2 000 ₽» переносился по словам и кнопка становилась в два яруса.

   ⚠️ Только там, где строка помещается. На 390 px английская подпись «Take the
   full plan for 20 dollars» просит 403 px и, не имея права перенестись,
   распирала ВСЮ полосу: страница получала ширину 423 px при экране 390, и
   тексты соседних полос обрезались по правому краю. Кнопка в два яруса — цена
   куда меньшая, чем поехавшая страница. */
.picks__cta .btn {
  white-space: nowrap;
  max-width: 100%;
}

@media (max-width: 30rem) {
  .picks__cta .btn {
    white-space: normal;
  }
}

.picks__label {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  white-space: nowrap;
  color: var(--ink-quiet);
  font-size: var(--text-1);
}

/* Мостик к трём сомнениям — малиновым и вплотную к абзацу над ним (решение
   Николь 19.08): он продолжает мысль про третий путь, а не начинает новую. */
.accent-line {
  color: var(--accent);
}

.picks__pill {
  display: inline-flex;
  align-items: center;
  /* Цель для пальца полная, даже когда набор мелкий. */
  min-height: var(--tap);
  /* Отступы поджаты, подпись не переносится: подпись и четыре кнопки обязаны
     уместиться в одну строку под первой карточкой (решение Николь 19.08). */
  white-space: nowrap;
  padding-inline: var(--space-3);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink-quiet);
  font-size: var(--text-1);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.picks__pill:has(:checked) {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: var(--weight-strong);
}

/* Рамка фокуса на самой кнопке, а не на спрятанном переключателе: иначе
   человек с клавиатуры видит, что фокус куда-то ушёл, но не видит куда. */
.picks__pill:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* «Без опыта управления» — малиновым на молочной плашке (решение Николь
   19.08). Плашка здесь не украшение, а способ вернуть цвет: по самой бирюзе
   малиновый даёт 2.09 и не читается вовсе, по молочному — 7.4. Строка при
   этом остаётся частью заголовка, просто выделенной. */
.band--teal .picks__note--head .title-tail {
  display: inline-block;
  margin-block-start: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border-radius: 999px;
  background: var(--offwhite);
  color: var(--burgundy);
}

/* --- Полоса «как это работает» на телефоне (правки Николь 19.08) ----------
   Три подписи частей встают по центру: на узком экране части идут столбиком,
   и подпись, прижатая влево над широкой карточкой, читается оторванной от
   неё. Ряд примеров теряет слово «Например, попробуй» и становится мельче:
   подпись занимала половину строки, а кнопки ради неё жались в остаток. */
@media (max-width: 47.99rem) {
  .mech__title {
    text-align: center;
  }

  .picks__label {
    display: none;
  }

  .picks__row {
    gap: var(--space-1) var(--space-2);
  }

  .picks__pill {
    /* Цель для пальца остаётся выше порога Apple по ширине, а по высоте — 40px
       вместо 44: четыре кнопки в две строки на 390 px иначе занимают экран
       больше, чем сама карточка объекта, ради которой они нажимаются. */
    min-height: 2.5rem;
    padding-inline: var(--space-2);
    /* Мельче самой мелкой ступени набора: это подписи кнопок, а не текст. */
    font-size: 0.75rem;
  }
}

/* Карточки лежат стопкой в одной ячейке: так высота колонки не скачет при
   переключении и картинка не прыгает под пальцем. */
.picks__panels {
  display: grid;
}

/* Стопка карточек внутри рамки: рамка держит место, карточки в ней сменяются.
   Направление задаётся явно — карточка по умолчанию складывает содержимое
   сверху вниз, а здесь все её дети лежат в ОДНОЙ ячейке сетки. */
.picks__panels.card {
  display: grid;
}

.picks__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  grid-area: 1 / 1;
  visibility: hidden;
}

/* Правило смотрит от `.mech`, а не от одной колонки: одно нажатие меняет и
   левую карточку, и правую, а стоят они в разных частях картинки.

   По правилу на номер — иначе никак: соответствие «переключатель N ↔ карточка N»
   родной CSS без скрипта другим способом не выражает. Шесть штук с запасом;
   седьмой объект в списке просто не откроется, и это видно сразу. */
.mech:has(#pick-1:checked) .picks__panel--1,
.mech:has(#pick-2:checked) .picks__panel--2,
.mech:has(#pick-3:checked) .picks__panel--3,
.mech:has(#pick-4:checked) .picks__panel--4,
.mech:has(#pick-5:checked) .picks__panel--5,
.mech:has(#pick-6:checked) .picks__panel--6 {
  visibility: visible;
}

/* Снимок объекта: одна пропорция на все четыре, обрезка по центру. Карточки
   сменяются на месте, и разная высота дёргала бы полосу под пальцем. */
.picks__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

.picks__name {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-3);
}

/* Подпись и число — в одной строке, пары идут столбиком с небольшим шагом
   (решение Николь 18.08). До правки пары стояли в строку через большой
   просвет, и «Стоимость» отрывалась от своего числа. */
.picks__figures {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.picks__figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}

.picks__figure dt {
  color: var(--ink-quiet);
  font-size: var(--text-1);
}

/* Цифры выстраиваются разряд под разрядом: иначе глаз сравнивает их длину,
   а не величину. */
.picks__figure dd {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Правая карточка: снимок во всю её ширину, без полей и без второй рамки
   внутри первой (решение Николь 19.08). Поля возвращаются только тексту под
   снимком, иначе цифры прилипают к краю. */
.mech__result {
  padding: 0;
  overflow: hidden;
}

/* Снимок в карточке результата не такой растянутый: 4:3 вместо 3:2 (решение
   Николь 19.08) — панорамная полоса рядом с двумя цифрами читалась как
   отдельная картинка, а не как часть карточки. */
.mech__result .picks__photo {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

/* Снимок занимает карточку целиком, цифры лежат поверх него внизу (макет
   Николь 19.08). Подложка светлая и полупрозрачная, текст тёмный: тёмную
   плашку с белыми буквами пробовали — на светлом снимке она читалась как
   заплата. Плашка ровная, без растяжки цвета: градиенты набор запрещает. */
.mech__result .picks__panels,
.mech__result .picks__panel {
  height: 100%;
}

.mech__result .picks__panel {
  position: relative;
}

.mech__result .picks__photo {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.mech__result .picks__figures {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--offwhite) 88%, transparent);
}

/* Подпись слева, число справа, числа — строго друг под другом (решение
   Николь 19.08): «350 000 $» и «90 000 $ в год» сравнивают взглядом по одной
   вертикали, а не ищут каждое в своей строке. Подпись при этом свободно
   занимает две строки — колонка под неё резиновая. */
.mech__result .picks__figure {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
}

/* Числа начинаются с одной вертикали, а не выравниваются по правому краю:
   «1 000 000 $» и «100 000 $» сравнивают по первому разряду. Период уходит
   строкой ниже и на выравнивание не влияет. */
/* По правому краю (решение Николь 19.08): у «500 000 $» и «100 000 $» тогда
   совпадают и нули, и знак валюты — глаз сравнивает величину, а не длину. */
/* Число не переносится и набрано на ступень мельче: рядом с длинной подписью
   «Приносит владельцу в год» оно ломалось надвое — «100» и «000 $». */
.mech__result .picks__figure dd {
  white-space: nowrap;
  font-size: var(--text-2);
  text-align: right;
}

/* Подпись одной строкой: «Приносит владельцу» в две строки задирало карточку
   и разводило числа по высоте (решение Николь 19.08). */
.mech__result .picks__figure dt {
  white-space: nowrap;
}


.picks__figure--flow dd,
.picks__figure--own dd {
  color: var(--accent);
}

/* Чем закрыли остальное. Отделено линейкой сверху: это не вторая цифра,
   а объяснение первой, и стоять с ней в одном ряду оно не должно. */
.picks__deal {
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--rule);
  color: var(--ink);
  font-size: var(--text-1);
}

.picks__note {
  margin: 0;
  color: var(--ink-quiet);
  font-size: var(--text-1);
  text-align: center;
}

/* Та же строка, но как заголовок полосы (решение Николь 19.08): «подходит
   любой малый бизнес» — это довод, а не оговорка под примерами. Набрана
   заголовочной гарнитурой и обычным цветом текста; тихий серый под таким
   кеглем читался бы как выключенная кнопка. */
/* Заголовок полосы по центру: он отвечает за всю полосу, а не за первую
   колонку под собой (решение Николь 19.08). */
.band-head {
  text-align: center;
}

/* Заголовок схемы — крупнее обычного и по центру полосы (решение Николь
   19.08): та же ступень, что и у заголовка полосы программы. */
.how-head {
  font-size: var(--text-5);
  text-align: center;
}

.picks__note--head {
  max-width: none;
  margin-inline: auto;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-4);
  line-height: var(--leading-snug);
}

/* Каждая ступень своей строкой: перечисление, обобщение, условие. */
.picks__note-line {
  display: block;
}



/* Под заголовком — кнопка, обещание возврата и счётчик, все по центру.
   Счётчик по умолчанию выключен слева меткой из кружков, поэтому строка
   центрируется отдельно. */
.picks__cta > .going {
  justify-content: center;
}

/* --- Середина: что улучшают --------------------------------------------------
   Не меняется ни для одного объекта — и это не экономия разметки, а довод:
   работа владельца одна и та же, чем бы он ни владел. */
.mech__stages,
.mech__legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mech__stage,
.mech__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mech__stage {
  /* Строка, а не столбик. Направление задаётся явно: `.mech__stage` — ещё и
     карточка, а карточка по умолчанию складывает содержимое сверху вниз, и
     без этой строки кольцо с галочкой встаёт НАД подписью. */
  flex-direction: row;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-1);
  font-weight: var(--weight-medium);
}

/* Середина мельче и уже боковых карточек (решение Николь 19.08): это не три
   равные части, а перечень работ между двумя состояниями объекта — и в чужой
   рост он спорил с ними за внимание. Ряд плашек прижат к середине колонки,
   поэтому карточки по бокам остаются на своих местах. */
/* Плашки прижаты к левому краю колонки, под свою подпись (макет Николь
   19.08): по центру они уезжали вправо, и подпись висела не над ними.

   Шаг между ними короче обычного: высоту всей тройки задаёт этот столбик из
   четырёх, и каждый лишний просвет в нём тянет вверх и две соседние карточки
   (замер 19.08). */
.mech__stages {
  align-items: start;
}

/* Карточки схемы уже своей колонки и занимают её по высоте целиком. */
.mech .card {
  width: 100%;
  max-width: 18.5rem;
  flex: 1;
}

/* Первая карточка — по своему содержимому, а не в рост соседних (решение
   Николь 19.08): текста в ней меньше, и растянутая до общей высоты она
   стояла наполовину пустой. Две другие не трогаются. */
.mech__part:first-of-type > .card {
  flex: none;
}


.mech__stages .mech__stage {
  width: min(100%, 13rem);
}

/* --- Схема на телефоне (правка Николь 19.08) ------------------------------
   Части схемы идут столбиком, и всё содержимое встаёт по центру колонки:
   подписи частей уже отцентрованы, а карточки с плашками оставались прижатыми
   влево — справа оставалась полоса пустоты, и полоса читалась съехавшей.

   Плашки середины при этом становятся во всю ширину карточек: узкими они
   сделаны для схемы в три колонки, где середина намеренно мельче боковых. На
   телефоне колонок нет, и узкий ряд под широкой карточкой читался обрезком.

   Правило стоит ЗДЕСЬ, а не в общем мобильном блоке выше: те же селекторы
   объявлены строкой выше, и при равной специфичности побеждает последний. */
@media (max-width: 47.99rem) {
  /* Центрируются сами карточки внутри части, а не части внутри схемы:
     `justify-items: center` на схеме сжимает часть до ширины содержимого, и
     плашки середины съезжают вместе с ней вместо того, чтобы встать по центру
     экрана. Проверено на 390 px: часть становилась 165 px вместо 350. */
  .mech__part > * {
    margin-inline: auto;
  }

  .mech__stages {
    align-items: stretch;
    width: min(100%, 18.5rem);
  }

  .mech__stages .mech__stage {
    width: 100%;
  }
}

/* Кольцо с галочкой уменьшено вместе с подписью, иначе оно занимает пол-плашки. */
.mech__stages .mech__check {
  width: 1.25rem;
  height: 1.25rem;
}

.mech__stages .mech__tick {
  width: 0.3125rem;
  height: 0.5625rem;
  border-width: 1.5px;
}

/* Галочка в кольце. Кольцо приглушённое, галочка акцентом: кольцо здесь рамка,
   а не содержание, и спорить за внимание с подписью ему нечем. Обе фигуры —
   края пустых элементов, ни картинки, ни эмодзи. */
.mech__check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 50%;
}

.mech__tick {
  width: 0.4375rem;
  height: 0.75rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  /* Поворот уводит галочку вправо и вниз от середины кольца: возвращаем её
     обратно, иначе она стоит в кольце криво. */
  margin: -0.125rem 0.125rem 0 0;
}

/* --- Справа: обе величины растут --------------------------------------------- */
.mech__chart {
  width: 100%;
  height: auto;
}

.mech__axis {
  stroke: var(--rule-strong);
  stroke-width: 1;
}

.mech__flow,
.mech__value {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mech__flow {
  stroke: var(--accent);
}

/* Вторая кривая пунктиром, а не вторым цветом: цветов в наборе одиннадцать, и
   тратить второй на линию нечего. Пунктир к тому же читается и без цвета — на
   чёрно-белой печати и человеку, который цвета не различает. */
.mech__value {
  stroke: var(--ink-strong);
  stroke-dasharray: 6 5;
}

.mech__dot {
  fill: var(--accent);
}

.mech__dot--value {
  fill: var(--ink-strong);
}

.mech__legend {
  gap: var(--space-2);
  font-size: var(--text-1);
}

.mech__swatch {
  flex-shrink: 0;
  width: 1.25rem;
  height: 0;
  border-top: 2.5px solid var(--accent);
}

.mech__legend-item--value .mech__swatch {
  border-top-style: dashed;
  border-top-color: var(--ink-strong);
}

.mech__note {
  color: var(--ink-quiet);
  font-size: var(--text-1);
  text-align: center;
}

@media (min-width: 48rem) {
  /* Три колонки со связками между ними; кнопки и подписи — во всю ширину под
     ними. Средняя колонка чуть шире: пунктов четыре, и они длиннее карточек. */
  .mech {
    /* Три равные колонки (решение Николь 19.08): середину ужали до плашек, и
       лишняя доля ширины ей больше не нужна — а правой карточке её как раз
       не хватало, чтобы «Приносит владельцу» встало в одну строку. */
    /* Три колонки без связок между ними (решение Николь 19.08): линии сняты,
       и промежуточные колонки под них больше не нужны. Крайние равны, середина
       уже: в ней короткие плашки, а не карточки. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.85fr);
    /* Части одной высоты, подписями в одном ряду (макет Николь 19.08): три
       карточки разного роста читались как три отдельных блока, а не как один
       ход. Растягиваются части — подписи остаются наверху. */
    align-items: stretch;
    gap: var(--space-5);
  }

  /* Веер связок — во всю высоту средней колонки: она самая высокая, и кривые
     обязаны доходить до её крайних строк. Тянется именно связка, а не
     карточки: их середины держит выравнивание грида. */



  .mech__note,
  .picks__cta,
  .picks__note {
    grid-column: 1 / -1;
  }

  /* Ряд кнопок стоит под ПЕРВОЙ карточкой, а не под всей картинкой (решение
     Николь 19.08): выбирают объект здесь же, где на него смотрят, и рука не
     уходит за три колонки вниз. Управляет он по-прежнему обеими карточками —
     это видно по тому, что правая меняется вместе с левой. */
  /* Ряд теперь живёт внутри первой части, а не отдельной строкой картинки:
     колонку ему задавать нечего, осталось только выравнивание по левому краю
     карточки, под которой он стоит. */
  .daybriefs {
    grid-column: 1 / -1;
  }

  .daybriefs__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* По центру полосы (решение Николь 19.08): ряд относится ко всем трём
     частям сразу, и прижатый влево читался подписью только к первой. */
  .picks__row {
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: 0;
  }
}