/* ═══ Шрифт ══════════════════════════════════════════════════════════════
   Переменный, одна ось wght 400–900: один файл на все начертания.       */
@font-face {
  font-family: "Golos Text";
  src: url("fonts/golos-text-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ═══ Токены ═════════════════════════════════════════════════════════════
   Все коэффициенты контраста посчитаны на фоне --color-bg и закреплены
   тестом tests/tokens.test.mjs.                                          */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;

  --color-accent: #ec3013;      /* рамка фокуса на светлом фоне — 3,76 */
  --color-accent-600: #dd2b0f;  /* фон кнопки и плаката, белый текст — 4,74 */
  --color-accent-700: #ae1800;  /* ссылка — 6,41; кнопка при наведении — 7,17 */
  --color-accent-800: #7c1405;  /* ссылка при наведении — 9,59; кнопка нажата — 10,72 */

  --color-divider: color-mix(in srgb, var(--color-text) 50%, transparent); /* 3,17 */

  --text-muted-strong: color-mix(in srgb, var(--color-text) 80%, transparent); /* 8,09 */
  --text-muted: color-mix(in srgb, var(--color-text) 75%, transparent);        /* 6,85 */
  --text-muted-soft: color-mix(in srgb, var(--color-text) 70%, transparent);   /* 5,81 */
  --text-quiet: color-mix(in srgb, var(--color-text) 65%, transparent);        /* 4,95 */

  --font: "Golos Text", system-ui, sans-serif;
  --weight-heading: 800;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;

  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;

  --wrap-max: 1240px;
  --wrap-pad: 40px;
}

/* ═══ База ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 15px/1.55 var(--font);
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--weight-heading);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

a { color: var(--color-accent-700); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); text-decoration: underline; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }
/* Рубрика набирается одинаково, каким бы элементом ни была: под ней
   бывает и <span>, и <h2> — общее правило по тегам заголовков иначе
   делает заголовочные рубрики жирнее остальных. */
.k {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.mono { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 0; top: -100%;
  background: var(--color-text); color: var(--color-bg);
  padding: var(--space-2) var(--space-4); font-weight: var(--weight-heading); z-index: 10;
}
.skip-link:focus-visible { top: 0; color: var(--color-bg); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ═══ Кнопки ═════════════════════════════════════════════════════════════
   Флаш-лефт по канону: подпись шире текста начинается от левого
   внутреннего отступа. Центрируется только глиф в .btn-icon.            */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  justify-content: flex-start; text-align: left;
  font: var(--weight-heading) 14px/1.2 var(--font);
  color: var(--color-text); text-decoration: none;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--color-accent-600); color: #fff; }
.btn-primary:hover { background: var(--color-accent-700); color: #fff; }
.btn-primary:active { background: var(--color-accent-800); }
.btn-primary:focus-visible { outline-color: #fff; outline-offset: -4px; }

.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.btn-block { width: 100%; }
.btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; }

/* ═══ Поля ═══════════════════════════════════════════════════════════════ */
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: var(--text-muted-soft); }
.input {
  width: 100%; min-height: 40px; padding: 8px 10px;
  font: 400 15px/1.4 var(--font); color: var(--color-text);
  caret-color: var(--color-accent-700);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.input:focus-visible { border-color: var(--color-accent-700); outline-offset: 0; }
.input[aria-invalid="true"] { border-color: var(--color-accent-700); border-width: 2px; }

.seg { display: inline-flex; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.seg-opt {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 14px; font-size: 14px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-opt:has(input:checked) { background: var(--color-accent-600); color: #fff; }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* ═══ Секции ═════════════════════════════════════════════════════════════
   Разделители между секциями — 2 px, внутри сеток — 1 px.

   Воздух вокруг линии задаётся ТОЛЬКО с одной стороны каждой секции:
   снизу — отступом внутри .wrap, сверху — отступом самой секции. Линия
   лежит на нижней границе .wrap, то есть ВНУТРИ секции, поэтому нижний
   отступ у .sec оказался бы уже за линией и складывался бы с верхним
   отступом следующей. Так и было: 54 px до линии и 104 px после.

   Отступы намеренно НЕ равны: 52 px до и 24 px после. Линия принадлежит
   разделу под собой и работает как его шапка — рубрика висит на ней, а не
   плавает в пустоте. Отступление от макета (там 58 px после) сделано по
   решению владельца. 24 px — не новое число: столько же под линией у ячеек
   полосы принципов и в подвале. */
.sec { padding-top: 24px; }
.sec > .wrap { border-bottom: 2px solid var(--color-divider); padding-bottom: 52px; }
/* Правила `.sec:last-of-type > .wrap { border-bottom: 0 }` здесь больше
   нет: оно не действовало никогда. `:last-of-type` смотрит на тип тега, а
   последний <section> страницы — плакат, у которого класса .sec нет; под
   селектор не попадал ни один элемент (проверено в браузере: ноль
   совпадений). Секция «Вопросы» всё это время шла с нижней границей, и
   именно так лендинг снят, показан и принят: 52 px воздуха, линия, потом
   плакат сплошной заливкой. Убираем мёртвое правило, а не «чиним» его —
   починка изменила бы принятый вид. */

/* ═══ Шапка ══════════════════════════════════════════════════════════════ */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 18px 0; border-bottom: 2px solid var(--color-divider);
}
.nav-brand { font-weight: var(--weight-heading); font-size: 18px; margin-right: auto; }
.navlinks { display: flex; gap: 18px; align-items: baseline; }
.navlinks a { color: var(--color-text); font-size: 14px; }
.navlinks a:hover { color: var(--color-accent-700); }
.nav .btn { padding: 8px 14px; font-size: 13px; }

/* ═══ Первый экран ═══════════════════════════════════════════════════════ */
/* Нижнего отступа нет по той же причине, что и у .sec: линия лежит на
   нижней границе .wrap, и всё, что стоит ниже, оказывается уже за ней.
   Здесь это было заметнее всего — под первым экраном идёт полоса
   принципов с `padding: 0`, у которой своего верхнего отступа нет вовсе,
   поэтому ячейки отрывались от линии ровно на эти 40 px. В макете
   дизайнера между линией и текстом ячейки 25 px, у нас было 64.
   Правило .sec { padding-top } сюда не доставало: у первого экрана
   padding записан сокращённой формой, а она задаёт все четыре стороны. */
.sec-hero { padding: 56px 0 0; }
.sec-hero > .wrap { padding-bottom: 40px; }
.hero-title {
  font-size: 66px; line-height: 1.02; letter-spacing: -0.03em;
  margin: 18px 0 0; max-width: 20ch;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px; margin-top: 28px; align-items: start;
}
.hero-lead { font-size: 17px; line-height: 1.6; max-width: 52ch; color: var(--text-muted-strong); }
.hero-cta { display: flex; flex-direction: column; gap: 10px; max-width: 330px; }
.btn-lg { padding: 13px 18px; font-size: 15px; }
.hero-note { margin-top: 12px; font-size: 12.5px; color: var(--text-muted-soft); }

/* ═══ Сетки ══════════════════════════════════════════════════════════════
   .g — общий крючок для медиа-веток: в одноколоночном режиме именно по
   нему сбрасываются вертикальные линии и боковые отступы ячеек.        */
.g { display: grid; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }

.section-title { font-size: 34px; line-height: 1.12; letter-spacing: -0.02em; }

/* ═══ Полоса принципов ═══════════════════════════════════════════════════ */
.sec-principles { padding: 0; }
.sec-principles > .wrap { padding-bottom: 0; border-bottom: 2px solid var(--color-divider); }
.principles > li { padding: 22px 20px; border-left: 1px solid var(--color-divider); }
.principles > li:first-child { padding-left: 0; border-left: 0; }
.principles > li:last-child { padding-right: 0; }
.principle-title { font-weight: var(--weight-heading); font-size: 15px; }
.principle-note { margin-top: 6px; font-size: 12.5px; color: var(--text-muted-soft); }

/* ═══ Что происходит без этого ═══════════════════════════════════════════ */
.sec-pain .split { margin-top: 20px; }
.pain-list { border-top: 1px solid var(--color-divider); }
.pain-item { padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
.pain-item h3 { font-size: 14px; font-weight: 700; line-height: 1.35; }
.pain-item p { margin-top: 5px; font-size: 13px; color: var(--text-muted); }

/* ═══ Что делает сервис ══════════════════════════════════════════════════ */
.feature-head { margin-top: 16px; max-width: 34ch; }
.features { margin-top: 28px; border-top: 2px solid var(--color-divider); }
.feature { padding: 24px 28px 24px 0; border-bottom: 1px solid var(--color-divider); }
.feature:nth-child(even) { padding: 24px 0 24px 28px; border-left: 1px solid var(--color-divider); }
.feature-num { font-weight: var(--weight-heading); font-size: 13px; color: var(--text-quiet); }
.feature h3 { margin-top: 8px; font-size: 19px; }
.feature p:last-child { margin-top: 8px; font-size: 13.5px; line-height: 1.6; max-width: 62ch; color: var(--text-muted); }

/* ═══ Как это работает ═══════════════════════════════════════════════════ */
.steps { margin-top: 24px; border-top: 2px solid var(--color-divider); }
.step { padding: 24px; border-right: 1px solid var(--color-divider); }
.step:first-child { padding-left: 0; }
.step:last-child { padding-right: 0; border-right: 0; }
.step-num { font-weight: var(--weight-heading); font-size: 34px; letter-spacing: -0.02em; }
.step h3 { margin-top: 10px; font-size: 17px; }
.step p:last-child { margin-top: 8px; font-size: 13.5px; line-height: 1.6; max-width: 62ch; color: var(--text-muted); }

/* ═══ Экраны ═════════════════════════════════════════════════════════════ */
.screens-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.screens-note { font-size: 12.5px; color: var(--text-muted-soft); }
.screens { margin-top: 20px; border-top: 1px solid var(--color-divider); }
.screen { padding: 16px 20px; border-left: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.screen:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.screen:nth-child(3n) { padding-right: 0; }
.screen-title { font-size: 14px; font-weight: 700; }
.screen-note { margin-top: 5px; font-size: 12.5px; color: var(--text-muted-soft); }

/* ═══ Кому это нужно ═════════════════════════════════════════════════════ */
.who { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); margin-top: 20px; }
.who-title { font-size: 30px; line-height: 1.14; letter-spacing: -0.02em; }
.who-note { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.roles {
  display: grid; grid-template-columns: 170px minmax(0, 1fr);
  margin: 0; border-top: 1px solid var(--color-divider);
}
.roles dt, .roles dd {
  margin: 0; padding: 14px 0; font-size: 13px;
  border-bottom: 1px solid var(--color-divider);
}
.roles dt { font-weight: var(--weight-heading); }
.roles dd { padding-left: 14px; color: var(--text-muted); }

/* ═══ Вопросы ════════════════════════════════════════════════════════════ */
/* margin-top здесь не нужен, в отличие от .sec-pain .split и .who. Там эти
   20 px отделяют сетку от рубрики .k, стоящей выше. У «Вопросов» рубрики
   нет — сетка идёт первой, и отступ ложился прямо под разделитель, добавляя
   к его воздуху ещё 20 px поверх положенных 52. */
.faq { margin-top: 0; }
.faq-list { border-top: 1px solid var(--color-divider); }
.faq-item { padding: 16px 0; border-bottom: 1px solid var(--color-divider); }
.faq-item h3 { font-size: 15px; line-height: 1.35; }
.faq-answer { margin-top: 7px; font-size: 13.5px; line-height: 1.6; max-width: 62ch; color: var(--text-muted); }

/* ═══ Плакат ═════════════════════════════════════════════════════════════
   Единственное место, где красный идёт полем. Фон --color-accent-600:
   белый по нему даёт 4,74:1, по исходному #ec3013 было 4,20:1.         */
.poster { margin: 52px 0; padding: 48px 0; background: var(--color-accent-600); color: #fff; }
.poster-title { font-size: 44px; line-height: 1.08; letter-spacing: -0.025em; max-width: 26ch; }
.poster-cta { display: flex; align-items: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.poster-note { font-size: 13px; color: #fff; }
.btn-poster { background: var(--color-bg); color: var(--color-text); padding: 13px 20px; font-size: 15px; }
.btn-poster:hover { background: #fff; color: var(--color-text); }
/* Красная рамка по красному полю даёт 1,13:1 и не видна. */
.poster :focus-visible { outline-color: #fff; }

/* ═══ Подвал ═════════════════════════════════════════════════════════════ */
.foot { padding: 20px 0 44px; border-top: 2px solid var(--color-divider); }
.foot > .wrap { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.foot-brand { font-weight: var(--weight-heading); font-size: 15px; }
.foot-note { font-size: 12.5px; color: var(--text-muted-soft); }
.foot-link { font-size: 12.5px; }

/* ═══ Страница текста ════════════════════════════════════════════════════ */
.doc { padding-top: 40px; }
.doc-title { font-size: 40px; line-height: 1.08; letter-spacing: -0.025em; max-width: 24ch; }
.doc-meta { margin-top: 12px; font-size: 12.5px; color: var(--text-muted-soft); }
.doc h2 {
  margin-top: 32px; padding-top: 16px; font-size: 19px;
  border-top: 1px solid var(--color-divider);
}
.doc p { margin-top: 10px; font-size: 14px; line-height: 1.65; max-width: 62ch; color: var(--text-muted-strong); }
.navlinks-back { margin-left: auto; font-size: 14px; }

@media (max-width: 760px) {
  .doc-title { font-size: 28px; }
}

/* ═══ Окно заявки ════════════════════════════════════════════════════════
   Нативный dialog + showModal даёт ловушку фокуса, Esc, ::backdrop и
   возврат фокуса на вызвавший элемент бесплатно — здесь только то, чего
   браузер не делает сам: сама форма, ловушка для ботов, лист на телефоне. */
dialog#demo {
  width: 440px; max-width: calc(100vw - 32px);
  padding: 26px 26px 22px; margin: auto;
  background: var(--color-bg); color: var(--color-text);
  border: 2px solid var(--color-text); border-radius: var(--radius-lg);
}
dialog#demo::backdrop { background: color-mix(in srgb, var(--color-text) 55%, transparent); }

.demo-head { display: flex; align-items: flex-start; gap: 12px; }
.demo-head > div { flex: 1; }
.demo-head .btn-icon { flex: none; font-size: 15px; }
.demo-title { margin-top: 8px; font-size: 24px; line-height: 1.16; letter-spacing: -0.02em; }
.demo-note { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }

.demo-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.demo-objects { border: 0; padding: 0; margin: 0; }
.demo-objects legend {
  padding: 0; font-size: 12px; margin-bottom: 5px; color: var(--text-muted-soft);
}
.demo-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Согласие. Подпись не приглушена, в отличие от .demo-fine: это не мелкий
   шрифт под кнопкой, а поле, без которого заявка не уйдёт. accent-color, а
   не своя отрисовка: галочка остаётся настоящей — клавиатура, диктор,
   высокая контрастность достаются от браузера. */
.demo-consent {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 10px; align-items: start;
}
.demo-consent input {
  width: 18px; height: 18px; margin: 1px 0 0;
  accent-color: var(--color-accent-600); cursor: pointer;
}
.demo-consent > label {
  display: block; margin: 0; font-size: 12.5px; line-height: 1.45;
  color: var(--color-text); cursor: pointer;
}
/* Рамку в режиме accent-color сам input не показывает — рисуем обводкой. */
.demo-consent input[aria-invalid="true"] {
  outline: 2px solid var(--color-accent-700); outline-offset: 2px;
}

.demo-error { font-size: 13px; font-weight: 700; color: var(--color-accent-700); }
.demo-submit { min-height: 46px; font-size: 15px; }
.demo-fine { font-size: 11.5px; line-height: 1.5; color: var(--text-muted-soft); }
.demo-done h3 { font-size: 20px; }
.demo-done p { margin: 10px 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }

/* Пока окно открыто, страница за ним не прокручивается.
   Компенсируем ширину полосы прокрутки, чтобы вёрстка не дёрнулась. */
html.is-locked { overflow: hidden; padding-right: var(--scrollbar, 0); }

/* На телефоне окно превращается в лист у нижней кромки: поля ближе к
   клавиатуре, кнопка в зоне большого пальца. */
@media (max-width: 760px) {
  dialog#demo {
    width: 100%; max-width: 100%;
    margin: auto 0 0; padding: 20px 18px 18px;
    max-height: 92dvh; overflow-y: auto;
    border: 0; border-top: 2px solid var(--color-text);
  }
  .demo-title { font-size: 21px; }
  .demo-submit { min-height: 48px; }
  .demo-objects .seg { display: flex; }
  .demo-objects .seg-opt { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Раскладки. Директива приоритета не нужна: инлайновых стилей в разметке
   нет, перебивать нечего — в отличие от макета.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Планшет: 761–1100 px ──────────────────────────────────────────────
   Четырёх- и трёхколоночные сетки становятся двухколоночными. Границы
   ячеек рассчитаны на исходное число колонок, поэтому их надо сбросить
   и назначить заново: вертикальная линия только у чётных ячеек, ряды
   разделяются горизонтальной. Иначе третья ячейка съезжает.          */
@media (min-width: 761px) and (max-width: 1100px) {
  :root { --wrap-pad: 28px; }

  .hero-title { font-size: 46px; }
  .section-title, .who-title { font-size: 28px; }
  .poster-title { font-size: 34px; }

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

  .principles > li,
  .steps > .step,
  .screens > .screen {
    padding: 20px 20px 20px 0;
    border-left: 0; border-right: 0;
    border-bottom: 1px solid var(--color-divider);
  }
  .principles > li:nth-child(even),
  .steps > .step:nth-child(even),
  .screens > .screen:nth-child(even) {
    padding: 20px 0 20px 20px;
    border-left: 1px solid var(--color-divider);
  }

  /* Полулиния под последним рядом: у сеток с чётным числом ячеек
     границу снимаем у двух последних, с нечётным — только у последней. */
  .principles > li:nth-last-child(-n + 2),
  .screens > .screen:nth-last-child(-n + 2) { border-bottom: 0; }
  .steps > .step:last-child { border-bottom: 0; }

  .roles { grid-template-columns: 120px minmax(0, 1fr); }
}

/* ── Телефон: до 760 px ────────────────────────────────────────────────
   Все сетки в одну колонку. Вертикальные линии убираются, разделителями
   становятся горизонтальные. Кнопки во всю ширину колонки.            */
@media (max-width: 760px) {
  :root { --wrap-pad: 18px; }

  .g { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* .principles > li и .feature:nth-child(even) названы явно: у обоих
     базовое правило само содержит тип или :nth-child и потому не слабее
     универсального «.g > *» — по специфичности он их не перебивает,
     и левая рамка вместе с отступом четных карточек остаётся висеть. */
  .g > *,
  .principles > li,
  .feature:nth-child(even) {
    border-left: 0; border-right: 0;
    padding-left: 0; padding-right: 0;
  }
  .g > *:not(:last-child) { border-bottom: 1px solid var(--color-divider); }
  .g > *:last-child { border-bottom: 0; }

  .hero-title { font-size: 34px; letter-spacing: -0.02em; }
  .section-title, .who-title { font-size: 24px; }
  .poster-title { font-size: 28px; }

  /* Отступ только сверху — по той же причине, что и в основной ветке:
     линия лежит на нижней границе .wrap, и нижний отступ секции оказался
     бы уже за ней, складываясь с верхним отступом следующей. На телефоне
     это стоило 64 px после линии против 32 до неё.
     Соотношение то же, что на полной раскладке: воздуха до линии заметно
     больше, чем после, потому что линия открывает раздел, а не разделяет
     два поровну. */
  .sec { padding: 18px 0 0; }
  .sec > .wrap { padding-bottom: 32px; }
  .poster { margin: 32px 0; padding: 28px 0; }

  /* Мера строки: без ограничения текст растягивается на всю ширину
     и читается тяжело. */
  .hero-lead { font-size: 15px; line-height: 1.55; max-width: 36ch; }

  /* Первый экран: обе колонки идут подряд, линии между ними не нужны.
     Без сброса grid-template-columns колонки остаются рядом и делят
     ширину пополам — лид и кнопки сжимаются в узкий столбик.        */
  .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 26px; margin-top: 22px; }
  .hero-cta { max-width: none; }

  /* Ссылки меню уходят отдельной строкой контейнером, а не порядком:
     при переносе order строк не создаёт — набивается по вмещению, и
     первая ссылка уезжает в строку с названием. */
  .nav { flex-wrap: wrap; row-gap: 12px; padding: 14px 0; }
  .nav-brand { order: 0; flex: 0 0 auto; font-size: 17px; }
  .navlinks { order: 1; flex: 0 0 100%; gap: 16px; font-size: 13px; }
  .nav-login { order: 0; margin-left: auto; padding: 6px 12px; font-size: 12.5px; }
  /* Красная кнопка дублирует призыв первого экрана. */
  .nav-cta { display: none; }

  .roles { grid-template-columns: minmax(0, 1fr); }
  .roles dt { padding-bottom: 0; border-bottom: 0; }
  .roles dd { padding-left: 0; padding-top: 4px; }

  .btn-block, .btn-lg { width: 100%; }
  .foot > .wrap { flex-direction: column; gap: 6px; }
}