/* ============================================================== 0. Шрифт Inter
   Локальные файлы (app/static/fonts/), без запросов к fonts.googleapis.com —
   unicode-range для latin/cyrillic взяты из ответа Google Fonts (css2 API,
   Inter v20, начертания 400/500/600/700). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ТехКарта — дизайн-система.
   Спокойный «документный» стиль: тёмно-синий акцент, ровная сетка,
   шкала отступов 4/8/12/16/24/32/48/64, контейнер 1120px.
   Тёмная тема в MVP не включена, но все цвета вынесены в переменные. */

/* ============================================================== 1. Токены */
:root {
  /* цвет */
  --c-accent: #1f3a5f;
  --c-accent-hover: #182f4d;
  --c-accent-active: #12253c;
  --c-accent-soft: #eaeff5;
  --c-accent-line: #c8d4e2;

  --c-bg: #f7f8fa;
  --c-surface: #ffffff;
  --c-surface-muted: #f2f4f7;

  --c-text: #1b1f24;
  --c-text-secondary: #5b6470;
  --c-text-inverse: #ffffff;

  --c-border: #e0e4e9;
  --c-border-strong: #c9cfd7;

  --c-success: #2e7d32;
  --c-success-bg: #eaf3ea;
  --c-error: #b3261e;
  --c-error-bg: #fbecea;
  --c-warning: #8a5a00;
  --c-warning-bg: #fcf3e3;

  /* отступы */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* типографика */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-h3: 22px;
  --fs-h2: 28px;
  --fs-h1: 40px;
  --lh-text: 1.5;
  --lh-head: 1.2;

  /* геометрия */
  --container: 1120px;
  --measure: 72ch;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --control-h: 44px;
  --control-h-sm: 36px;
  --control-h-lg: 52px;

  --shadow-sm: 0 1px 2px rgba(27, 31, 36, 0.06);
  --shadow: 0 2px 8px rgba(27, 31, 36, 0.07);
  --shadow-lg: 0 12px 32px rgba(27, 31, 36, 0.12);
  --ring: 0 0 0 3px rgba(31, 58, 95, 0.22);
}

/* ============================================================== 2. Сброс */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--sp-4);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: -0.01em;
  /* без «висячих» одиночных слов в последней строке заголовка */
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}
h4 {
  font-size: var(--fs-md);
}

p {
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

ul,
ol {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-5);
}

li {
  margin-bottom: var(--sp-2);
}

a {
  color: var(--c-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

hr {
  height: 1px;
  margin: var(--sp-6) 0;
  border: 0;
  background: var(--c-border);
}

small {
  font-size: var(--fs-sm);
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================ 3. Служебные и раскладка */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.section {
  padding: var(--sp-8) 0;
}

.section--tight {
  padding: var(--sp-7) 0;
}

.section--surface {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.section__head {
  max-width: var(--measure);
  margin-bottom: var(--sp-6);
}

.section__head p {
  margin-bottom: 0;
  color: var(--c-text-secondary);
}

.eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lead {
  color: var(--c-text-secondary);
  font-size: var(--fs-md);
}

.muted {
  color: var(--c-text-secondary);
}

.text-sm {
  font-size: var(--fs-sm);
}

.stack > * + * {
  margin-top: var(--sp-4);
}

.inline-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  box-shadow: var(--shadow);
}

.skip-link:focus {
  left: var(--sp-4);
  top: var(--sp-4);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* сетка 12 колонок */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-5);
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* ============================================================ 4. Кнопки */
/* Высота задана через min-height, а не height: длинная подпись («Сделать
   техкарту на следующий урок») на узком экране переносится на вторую строку и
   растит кнопку, а не вылезает за её границы. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--c-accent);
  color: var(--c-text-inverse);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  background: var(--c-accent-hover);
  text-decoration: none;
}

.btn:active {
  background: var(--c-accent-active);
}

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

.btn--secondary {
  background: var(--c-surface);
  border-color: var(--c-border-strong);
  color: var(--c-text);
}

.btn--secondary:hover {
  background: var(--c-surface-muted);
  border-color: var(--c-accent-line);
  color: var(--c-text);
}

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

.btn--ghost:hover {
  background: var(--c-accent-soft);
  color: var(--c-accent-hover);
}

/* «Выйти» в шапке — тихая ссылка второго плана, не кнопка: соседство с
   «Создать» провоцировало выход из аккаунта вместо ухода со страницы. */
.site-header__logout {
  min-height: var(--control-h-sm);
  padding: var(--sp-1) var(--sp-2);
  border: 0;
  background: transparent;
  color: var(--c-text-secondary);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.site-header__logout:hover,
.site-header__logout:focus-visible {
  color: var(--c-text);
  text-decoration: underline;
}

.btn--sm {
  min-height: var(--control-h-sm);
  padding: var(--sp-1) var(--sp-4);
  font-size: var(--fs-sm);
}

.btn--lg {
  min-height: var(--control-h-lg);
  padding: var(--sp-2) var(--sp-6);
  font-size: var(--fs-md);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* ====================================================== 5. Карточки, бейджи */
.card {
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card--flat {
  box-shadow: none;
}

.card__title {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-lg);
}

.card > :last-child {
  margin-bottom: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-accent-line);
  border-radius: 999px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  text-wrap: balance;
}

/* короткие служебные бейджи (баланс генераций, формат документа) не переносим:
   в строке таблицы и в шапке перенос делал их выше соседних элементов */
.badge--neutral {
  border-color: var(--c-border);
  background: var(--c-surface-muted);
  color: var(--c-text-secondary);
  white-space: nowrap;
}

a.badge:hover {
  text-decoration: none;
  border-color: var(--c-accent-line);
}

.badge--success {
  border-color: rgba(46, 125, 50, 0.3);
  background: var(--c-success-bg);
  color: var(--c-success);
}

.alert {
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--radius-sm);
  background: var(--c-accent-soft);
  color: var(--c-text);
  font-size: var(--fs-sm);
}

.alert > :last-child {
  margin-bottom: 0;
}

.alert--success {
  border-color: rgba(46, 125, 50, 0.3);
  background: var(--c-success-bg);
}

.alert--error {
  border-color: rgba(179, 38, 30, 0.3);
  background: var(--c-error-bg);
}

.alert--warning {
  border-color: rgba(138, 90, 0, 0.3);
  background: var(--c-warning-bg);
}

/* ========================================================== 6. Таблицы */
/* position: relative обязателен: без него абсолютно спозиционированные
   .visually-hidden / <caption> внутри широкой таблицы позиционируются
   относительно окна, не обрезаются этим контейнером и тянут горизонтальный
   скролл всей страницы (было 611px при вьюпорте 360px на /app/documents). */
.table-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.table th,
.table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}

.table th {
  background: var(--c-surface-muted);
  color: var(--c-text);
  font-weight: 600;
}

.table thead th {
  white-space: nowrap;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tr > * + * {
  border-left: 1px solid var(--c-border);
}

.table--wide {
  min-width: 900px;
}

/* Подсказка о боковой прокрутке широкой таблицы. Контейнер обязателен:
   градиент нельзя повесить на сам .table-wrap (overflow обрезал бы его и он
   уезжал бы вместе с содержимым). Появляется только там, где прокрутка
   действительно есть: .table--wide шире контейнера при ширине окна < 948px
   (min-width 900 + отступы контейнера 2 × 24). */
.table-scroll {
  position: relative;
}

.table-scroll__hint {
  display: none;
  margin: var(--sp-2) 0 0;
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
}

@media (max-width: 947px) {
  .table-scroll::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 28px;
    border-radius: 0 var(--radius) var(--radius) 0;
    /* тень, а не «белое на белом»: фон таблицы тоже белый, поэтому светлый
       градиент был бы не виден и подсказка не читалась бы */
    background: linear-gradient(to left, rgba(27, 31, 36, 0.16), rgba(27, 31, 36, 0));
    pointer-events: none;
  }

  .table-scroll__hint {
    display: block;
  }
}

/* Та же подсказка по факту переполнения, а не по ширине окна: таблица этапов
   в карточке документа и таблицы на /pricing шире обёртки и на широком экране.
   Класс is-scrollable ставит app.js (initTableScroll), когда scrollWidth
   таблицы больше ширины обёртки; тень уходит, когда прокрутили до конца. */
.table-scroll.is-scrollable::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 28px;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(to left, rgba(27, 31, 36, 0.16), rgba(27, 31, 36, 0));
  pointer-events: none;
}

.table-scroll.is-scrollable.is-scrolled-end::after {
  display: none;
}

.table-scroll.is-scrollable .table-scroll__hint {
  display: block;
}

.table-scroll .table-wrap {
  margin-bottom: 0;
}

/* Таблица этапов на узком экране: первые три строки + кнопка «показать все».
   Класс is-collapsed ставит скрипт, поэтому без JS видны все этапы. */
.stages__more {
  display: none;
  width: 100%;
  margin-top: var(--sp-4);
}

.stages.is-collapsed .stages__extra {
  display: none;
}

.stages.is-collapsed .stages__more {
  display: inline-flex;
}

.table--compare {
  min-width: 600px;
}

/* таблица этапов урока: колонки распределены как в печатной техкарте */
.table--stages th:nth-child(2),
.table--stages td:nth-child(2) {
  width: 14%;
}

.table--stages th:nth-child(4),
.table--stages td:nth-child(4) {
  width: 24%;
}

.table--stages th:nth-child(5),
.table--stages td:nth-child(5) {
  width: 22%;
}

.table--stages th:nth-child(6),
.table--stages td:nth-child(6) {
  width: 20%;
}

.table--stages th:nth-child(7),
.table--stages td:nth-child(7) {
  width: 14%;
}

.table .num {
  width: 40px;
  color: var(--c-text-secondary);
  text-align: center;
}

.table .time {
  width: 92px;
  white-space: nowrap;
}

/* =========================================================== 7. Формы */
.field {
  margin-bottom: var(--sp-4);
}

.field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.field__hint {
  margin-top: var(--sp-2);
  margin-bottom: 0;
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
}

.field__error {
  margin-top: var(--sp-2);
  margin-bottom: 0;
  color: var(--c-error);
  font-size: var(--fs-xs);
}

.input,
.select,
.textarea {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: var(--control-h);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.textarea {
  height: auto;
  min-height: 132px;
  padding: var(--sp-3);
  line-height: var(--lh-text);
  resize: vertical;
}

.select {
  padding-right: var(--sp-6);
  line-height: normal;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235B6470' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: var(--ring);
}

/* поле с ошибкой подсвечивается рамкой — иначе сообщение под полем висит
   отдельно от самого поля, и непонятно, что именно проверять */
.field:has(.field__error) .input,
.field:has(.field__error) .select,
.field:has(.field__error) .textarea {
  border-color: var(--c-error);
}

/* то же самое для групп радио-карточек (длительность, формат, тип урока):
   у них нет .input/.select, и без этого правила ошибка оставалась текстом
   под группой, а сама группа выглядела заполненной верно */
.field:has(.field__error) .radio-card {
  border-color: var(--c-error);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--c-surface-muted);
  color: var(--c-text-secondary);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: var(--control-h);
  padding: var(--sp-3) 0;
  font-size: var(--fs-sm);
}

.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--c-accent);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* ========================================================== 8. Шапка */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 68px;
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
  margin-right: var(--sp-2);
}

.site-header__tagline {
  flex: none;
  padding-left: var(--sp-4);
  border-left: 1px solid var(--c-border);
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.2;
  white-space: nowrap;
}

.logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-text);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.logo:hover {
  text-decoration: none;
}

.logo__mark {
  display: block;
  width: 32px;
  height: 32px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-right: auto;
}

.site-nav a {
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--c-text);
  text-decoration: none;
}

.site-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sp-3);
}

.site-actions form {
  margin: 0;
}

/* Компактный баланс генераций в шапке (P2-11). На широком экране баланс уже
   показан в .site-actions, поэтому этот бейдж включается только на мобильном,
   где меню свёрнуто и баланс иначе не виден вовсе. */
.site-header__credits {
  display: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 6px;
}

/* ============================================================ 9. Hero */
.hero {
  padding: var(--sp-8) 0;
  background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg) 100%);
  border-bottom: 1px solid var(--c-border);
}

.hero__grid {
  align-items: center;
}

/* Правая колонка hero: снимок документа занимает всю высоту колонки и на широких
   экранах выходит за правый край контейнера — «лист» читается крупно. */
.hero__shot {
  display: flex;
}

@media (min-width: 1024px) {
  .hero {
    overflow-x: clip;
  }

  .hero__shot {
    /* выход за правое поле контейнера ровно на ширину поля, но не больше 160px */
    margin-right: max(-160px, min(0px, calc((var(--container) - 100vw) / 2 + var(--sp-4))));
  }
}

.hero__eyebrow {
  max-width: 34em;
  margin-bottom: var(--sp-3);
  color: var(--c-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.hero h1 {
  margin-bottom: var(--sp-4);
}

.hero__sub {
  max-width: 34em;
  margin-bottom: var(--sp-5);
  color: var(--c-text-secondary);
  font-size: var(--fs-md);
}

/* Две кнопки hero не помещаются в колонку col-7 ни на одной ширине
   (424 + 250 px против 559–615 px), поэтому вместо «рваного» переноса
   flex-wrap они всегда идут в столбик одинаковой ширины — по самой широкой
   кнопке — и выравниваются по левому краю текста. */
.hero__cta {
  display: grid;
  gap: var(--sp-3);
  width: fit-content;
  max-width: 100%;
  margin-bottom: var(--sp-5);
}

/* строка-подпись под кнопками hero: условия входа одной строкой */
.hero__terms {
  max-width: 34em;
  margin-bottom: var(--sp-5);
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
}

/* Снимок страницы /example в правой колонке hero: не макет, а настоящий
   документ сервиса. Ссылка кликабельна целиком, подпись-оверлей снизу
   объясняет, что будет по клику. Ролика в первом экране по-прежнему нет. */
.doc-shot {
  position: relative;
  display: block;
  width: 100%;
  max-height: 640px;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  color: var(--c-text-inverse);
  text-decoration: none;
}

.doc-shot__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
}

/* подпись поверх нижнего края снимка: тач-цель не ниже 44px и достаточный
   контраст за счёт затемнения под текстом */
.doc-shot__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  min-height: 44px;
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
  background: linear-gradient(180deg, rgba(27, 31, 36, 0) 0%, rgba(27, 31, 36, 0.86) 70%);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.doc-shot:hover .doc-shot__caption,
.doc-shot:focus-visible .doc-shot__caption {
  text-decoration: underline;
}

.doc-shot:focus-visible {
  outline: none;
  box-shadow: var(--ring), var(--shadow-lg);
}

/* ============================================ 9a. Полоса «что проверить» */
/* Узкая полоса сразу под hero: четыре пункта чек-листа в строку и оговорка
   про ответственность учителя. */
.checkstrip {
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.checkstrip__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-md);
}

.checkstrip__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-5);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}

.checkstrip__list li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  text-wrap: pretty;
}

/* галочка рисуется символом, а не картинкой: не грузит ни байта */
.checkstrip__list li::before {
  content: "✓";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--c-accent);
  font-weight: 700;
}

/* подпись и бейдж «данные в РФ» в одну строку: бейдж переехал сюда из hero,
   чтобы первый экран был короче, а обещание стояло рядом с оговоркой про ИИ */
.checkstrip__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
}

.checkstrip__note {
  flex: 1 1 22em;
  margin: 0;
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
}

.checkstrip__badge {
  margin: 0;
}

/* =========================================================== 10. Шаги */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  margin: 0;
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

/* =============================== 10a. Сцены шагов (миниатюры интерфейса) */
/* Вместо стоковых фото в карточке шага — миниатюра настоящего экрана сервиса,
   собранная из разметки и CSS: ни одного растра и ни одной внешней библиотеки.
   Рамка «листа» повторяет hero-снимок .doc-shot, поэтому все три шага читаются
   как один и тот же документ на разных стадиях.

   Правило анимации: базовые стили задают КОНЕЧНОЕ состояние сцены (форма
   заполнена, документ собран, галочки проставлены). Движение добавляют только
   @keyframes под .is-playing — класс ставит app.js, пока карточка в зоне
   видимости и пользователь не просил убрать анимации. Поэтому без JS, вне
   экрана и при prefers-reduced-motion сцена выглядит осмысленно, а не пустой. */

/* сцена выходит под padding карточки до её краёв: отрицательные поля равны
   padding'у .steps > li (--sp-5), радиус — на 1px меньше радиуса карточки. */
.stepviz {
  --sv-dur: 7.2s;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-4);
  padding: 14px;
  /* Высота задана числом, а не aspect-ratio: в одноколоночной раскладке
     (<=768px) сцена во всю ширину карточки при 16:10 выросла бы до 450px, а
     ограничение max-height вместе с aspect-ratio браузер «перекидывает»
     обратно в ширину — сцена отлипала от правого края карточки. Фиксированная
     высота даёт ровно 16:10 на трёхколоночной раскладке и одинаковую по всем
     брейкпоинтам «картинку». */
  height: 212px;
  background: linear-gradient(158deg, #eef2f8 0%, #e4ebf3 100%);
  border-bottom: 1px solid var(--c-border);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

/* «лист» документа: та же геометрия, что у снимка в hero */
.sv-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 296px;
  padding: 9px 10px;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 7px;
  box-shadow: 0 6px 16px rgba(27, 31, 36, 0.1);
  font-size: 8px;
  line-height: 1.35;
  color: var(--c-text);
}

.sv-head {
  margin: 0 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--c-border);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sv-sub,
.sv-label,
.sv-cap {
  margin: 0;
  color: var(--c-text-secondary);
  font-size: 7px;
}

.sv-sub--gap {
  margin-bottom: 7px;
}

.sv-cap {
  margin-bottom: 4px;
  color: var(--c-accent);
  font-weight: 600;
}

/* ---- шаг 1: мини-форма -------------------------------------------------- */
.sv-row {
  margin-bottom: 6px;
}

.sv-row .sv-label {
  display: block;
  margin-bottom: 2px;
}

.sv-input {
  position: relative;
  display: flex;
  align-items: center;
  height: 17px;
  padding: 0 5px;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
}

.sv-chev {
  width: 0;
  height: 0;
  margin-left: auto;
  border-top: 3px solid var(--c-text-secondary);
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
}

/* печать темы: текст всегда в разметке, «печатает» его шторка цвета листа —
   её левая кромка и есть каретка. В покое шторка стоит за концом строки. */
.sv-type {
  position: relative;
  white-space: nowrap;
}

.sv-type::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -60px;
  bottom: -4px;
  left: 100%;
  background: var(--c-surface);
  border-left: 1px solid transparent;
}

.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: auto;
  padding: 0 8px;
  height: 18px;
  background: var(--c-accent);
  border-radius: 4px;
  color: var(--c-text-inverse);
  font-size: 7.5px;
  font-weight: 600;
}

/* указатель мыши: в покое невидим, появляется только на время анимации */
/* на тач-экранах курсора нет */
@media (hover: none) and (pointer: coarse) {
  .sv-cursor {
    display: none;
  }
}

.sv-cursor {
  position: absolute;
  top: 44px;
  left: 71%;
  width: 7px;
  height: 7px;
  background: var(--c-accent);
  border: 1.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.35);
  opacity: 0;
}

/* ---- шаг 2: сборка документа ------------------------------------------- */
.sv-blk {
  margin-bottom: 5px;
}

.sv-line {
  display: block;
  height: 3px;
  margin-top: 3px;
  background: var(--c-surface-muted);
  border-radius: 2px;
}

.sv-line--w1 {
  width: 92%;
}

.sv-line--w2 {
  width: 61%;
}

.sv-tbl {
  border: 1px solid var(--c-border);
  border-radius: 4px;
  overflow: hidden;
}

.sv-tr {
  display: grid;
  grid-template-columns: 12px 1fr 30px;
  gap: 4px;
  padding: 2.5px 5px;
  border-top: 1px solid var(--c-border);
  font-size: 7px;
}

.sv-tr:first-child {
  border-top: 0;
}

.sv-tr > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sv-tr > span:last-child {
  color: var(--c-text-secondary);
  text-align: right;
}

.sv-tr--h {
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-weight: 600;
}

.sv-tr--h > span:last-child {
  color: var(--c-accent);
}

/* тонкая полоса «идёт генерация» с оценкой времени справа */
.sv-prog {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 6px;
}

.sv-prog__track {
  flex: 1;
  height: 3px;
  overflow: hidden;
  background: var(--c-surface-muted);
  border-radius: 2px;
}

.sv-prog__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-accent);
  border-radius: 2px;
}

.sv-prog__num {
  color: var(--c-text-secondary);
  font-size: 7px;
  font-variant-numeric: tabular-nums;
}

/* ---- шаг 3: чек-лист и выгрузка ---------------------------------------- */
.sv-check {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-check li {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 9px;
  font-size: 7.5px;
}

.sv-box {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 0.5px;
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: 2px;
}

.sv-box::after {
  content: "✓";
  position: absolute;
  inset: 0;
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  line-height: 8px;
  text-align: center;
}

.sv-dl {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 7px;
  border-top: 1px solid var(--c-border);
}

.sv-dl .sv-btn {
  margin-top: 0;
  align-self: auto;
}

.sv-btn--pdf {
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  color: var(--c-accent);
}

.sv-prog__track--dl {
  flex: 1;
}

/* ---- стрелка-переход между карточками (только трёхколоночная раскладка) -- */
.steps__arrow {
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--sp-5) - 1px);
  width: var(--sp-5);
  height: 10px;
  margin-top: -5px;
  color: var(--c-accent-line);
}

.steps__arrow svg {
  display: block;
}

/* ---- движение ----------------------------------------------------------- */
/* Всё, что ниже, — надстройка над статичной сценой. Двигаются только
   декоративные детали внутри миниатюры; текст и раскладка карточки стоят
   на месте. Каждый цикл заканчивается ровно тем состоянием, которое задано
   базовыми правилами, поэтому снятие .is-playing не даёт скачка. */
@media (prefers-reduced-motion: no-preference) {
  /* карточки появляются волной, а не все разом */
  .js-anim .steps > li:nth-child(2) {
    transition-delay: 0.1s;
  }

  .js-anim .steps > li:nth-child(3) {
    transition-delay: 0.2s;
  }

  .stepviz--doc {
    --sv-delay: 0.35s;
  }

  .stepviz--check {
    --sv-delay: 0.7s;
  }

  .is-playing .steps__arrow path,
  .is-playing .sv-val,
  .is-playing .sv-input,
  .is-playing .sv-btn,
  .is-playing .sv-cursor,
  .is-playing .sv-type::after,
  .is-playing .sv-blk,
  .is-playing .sv-tbl,
  .is-playing .sv-tr > span,
  .is-playing .sv-box,
  .is-playing .sv-prog__bar {
    animation-duration: var(--sv-dur);
    animation-delay: var(--sv-delay, 0s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }

  /* полосы прогресса растут равномерно — «ступенька» ease здесь читается
     как рывок генерации */
  .is-playing .sv-prog__bar {
    animation-timing-function: linear;
  }

  /* стрелка между карточками прочерчивается один раз за цикл */
  .steps__arrow path {
    stroke-dasharray: 26;
  }

  .is-playing .steps__arrow path {
    animation-name: sv-draw;
  }

  @keyframes sv-draw {
    0%,
    6% {
      stroke-dashoffset: 26;
    }
    26%,
    100% {
      stroke-dashoffset: 0;
    }
  }

  /* --- шаг 1 --- */
  .is-playing .sv-cursor {
    animation-name: sv-cursor;
  }

  @keyframes sv-cursor {
    0%,
    4% {
      top: 22px;
      left: 84%;
      opacity: 0;
    }
    8% {
      opacity: 1;
    }
    15%,
    18% {
      top: 50px;
      left: 66%;
    }
    27%,
    30% {
      top: 84px;
      left: 40%;
    }
    39%,
    62% {
      top: 119px;
      left: 68%;
    }
    72%,
    84% {
      top: 159px;
      left: 14%;
      opacity: 1;
    }
    92%,
    100% {
      top: 159px;
      left: 14%;
      opacity: 0;
    }
  }

  .is-playing .sv-row--a .sv-input {
    animation-name: sv-focus-a;
  }

  .is-playing .sv-row--b .sv-input {
    animation-name: sv-focus-b;
  }

  .is-playing .sv-row--c .sv-input {
    animation-name: sv-focus-c;
  }

  @keyframes sv-focus-a {
    0%,
    14%,
    26%,
    100% {
      border-color: var(--c-border-strong);
      box-shadow: none;
    }
    16%,
    24% {
      border-color: var(--c-accent);
      box-shadow: 0 0 0 2px rgba(31, 58, 95, 0.16);
    }
  }

  @keyframes sv-focus-b {
    0%,
    26%,
    38%,
    100% {
      border-color: var(--c-border-strong);
      box-shadow: none;
    }
    28%,
    36% {
      border-color: var(--c-accent);
      box-shadow: 0 0 0 2px rgba(31, 58, 95, 0.16);
    }
  }

  @keyframes sv-focus-c {
    0%,
    38%,
    68%,
    100% {
      border-color: var(--c-border-strong);
      box-shadow: none;
    }
    40%,
    66% {
      border-color: var(--c-accent);
      box-shadow: 0 0 0 2px rgba(31, 58, 95, 0.16);
    }
  }

  .is-playing .sv-val {
    animation-name: sv-val;
  }

  @keyframes sv-val {
    0%,
    15% {
      opacity: 0;
      transform: translateY(2px);
    }
    20%,
    100% {
      opacity: 1;
      transform: none;
    }
  }

  .is-playing .sv-row--b .sv-val {
    animation-name: sv-val-b;
  }

  @keyframes sv-val-b {
    0%,
    27% {
      opacity: 0;
      transform: translateY(2px);
    }
    32%,
    100% {
      opacity: 1;
      transform: none;
    }
  }

  .is-playing .sv-type::after {
    animation-name: sv-type;
    animation-timing-function: steps(27);
  }

  @keyframes sv-type {
    0%,
    40% {
      left: 0%;
      border-left-color: var(--c-accent);
    }
    64% {
      left: 100%;
      border-left-color: var(--c-accent);
    }
    68%,
    100% {
      left: 100%;
      border-left-color: transparent;
    }
  }

  .stepviz--form.is-playing .sv-btn {
    animation-name: sv-press;
  }

  @keyframes sv-press {
    0%,
    68% {
      background: var(--c-accent);
      box-shadow: none;
    }
    73% {
      background: var(--c-accent-active);
      box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.18);
      transform: scale(0.96);
    }
    78%,
    100% {
      background: var(--c-accent);
      box-shadow: 0 0 0 3px rgba(31, 58, 95, 0);
      transform: none;
    }
  }

  /* --- шаг 2 --- */
  .stepviz--doc.is-playing .sv-blk--1 {
    animation-name: sv-in-1;
  }

  .stepviz--doc.is-playing .sv-blk--2 {
    animation-name: sv-in-2;
  }

  .is-playing .sv-tbl {
    animation-name: sv-in-3;
  }

  .stepviz--doc.is-playing .sv-blk--3 > span {
    animation-name: sv-in-4;
  }

  .stepviz--doc.is-playing .sv-blk--4 > span {
    animation-name: sv-in-5;
  }

  .stepviz--doc.is-playing .sv-blk--5 > span {
    animation-name: sv-in-6;
  }

  .stepviz--doc.is-playing .sv-blk--6 > span {
    animation-name: sv-in-7;
  }

  @keyframes sv-in-1 {
    0%,
    4% {
      opacity: 0;
      transform: translateY(4px);
    }
    12%,
    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes sv-in-2 {
    0%,
    12% {
      opacity: 0;
      transform: translateY(4px);
    }
    20%,
    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes sv-in-3 {
    0%,
    20% {
      opacity: 0;
      transform: translateY(4px);
    }
    28%,
    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes sv-in-4 {
    0%,
    28% {
      opacity: 0;
      transform: translateY(4px);
    }
    36%,
    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes sv-in-5 {
    0%,
    36% {
      opacity: 0;
      transform: translateY(4px);
    }
    44%,
    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes sv-in-6 {
    0%,
    44% {
      opacity: 0;
      transform: translateY(4px);
    }
    52%,
    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes sv-in-7 {
    0%,
    52% {
      opacity: 0;
      transform: translateY(4px);
    }
    60%,
    100% {
      opacity: 1;
      transform: none;
    }
  }

  .stepviz--doc.is-playing .sv-prog__bar {
    animation-name: sv-fill;
  }

  @keyframes sv-fill {
    0%,
    4% {
      width: 4%;
    }
    62%,
    100% {
      width: 100%;
    }
  }

  /* --- шаг 3 --- */
  .is-playing .sv-box {
    animation-name: sv-check;
  }

  .is-playing .sv-blk--2 > .sv-box {
    animation-name: sv-check-2;
  }

  .is-playing .sv-blk--3 > .sv-box {
    animation-name: sv-check-3;
  }

  .is-playing .sv-blk--4 > .sv-box {
    animation-name: sv-check-4;
  }

  @keyframes sv-check {
    0%,
    8% {
      background: var(--c-surface);
      border-color: var(--c-border-strong);
      color: transparent;
    }
    14%,
    100% {
      background: var(--c-accent);
      border-color: var(--c-accent);
      color: #fff;
    }
  }

  @keyframes sv-check-2 {
    0%,
    18% {
      background: var(--c-surface);
      border-color: var(--c-border-strong);
      color: transparent;
    }
    24%,
    100% {
      background: var(--c-accent);
      border-color: var(--c-accent);
      color: #fff;
    }
  }

  @keyframes sv-check-3 {
    0%,
    28% {
      background: var(--c-surface);
      border-color: var(--c-border-strong);
      color: transparent;
    }
    34%,
    100% {
      background: var(--c-accent);
      border-color: var(--c-accent);
      color: #fff;
    }
  }

  @keyframes sv-check-4 {
    0%,
    38% {
      background: var(--c-surface);
      border-color: var(--c-border-strong);
      color: transparent;
    }
    44%,
    100% {
      background: var(--c-accent);
      border-color: var(--c-accent);
      color: #fff;
    }
  }

  .is-playing .sv-btn--docx {
    animation-name: sv-dl-docx;
  }

  .is-playing .sv-btn--pdf {
    animation-name: sv-dl-pdf;
  }

  @keyframes sv-dl-docx {
    0%,
    48% {
      opacity: 0;
      transform: translateY(3px);
    }
    54%,
    64% {
      opacity: 1;
      transform: none;
    }
    68% {
      transform: scale(0.94);
      box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.18);
    }
    74%,
    100% {
      opacity: 1;
      transform: none;
      box-shadow: 0 0 0 3px rgba(31, 58, 95, 0);
    }
  }

  @keyframes sv-dl-pdf {
    0%,
    52% {
      opacity: 0;
      transform: translateY(3px);
    }
    58%,
    100% {
      opacity: 1;
      transform: none;
    }
  }

  .stepviz--check.is-playing .sv-prog__bar {
    animation-name: sv-dl-bar;
  }

  @keyframes sv-dl-bar {
    0%,
    70% {
      width: 0;
    }
    90%,
    100% {
      width: 100%;
    }
  }
}

.steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--sp-3);
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* только собственный текст карточки: внутри сцены-миниатюры (.stepviz) свои
   размеры, и без «>» они перебивались бы этими правилами */
.steps > li > h3 {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-md);
}

.steps > li > p {
  margin-bottom: 0;
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
}

/* список «что внутри» */
.feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-list > li {
  margin: 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

.feature-list > li::before {
  content: "";
  position: absolute;
  top: 22px;
  left: var(--sp-4);
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--c-accent);
}

.feature-list strong {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-base);
}

/* ============================================ 10a. Скринкаст продукта */
/* Один ролик по центру секции — запись реальной работы в сервисе (раньше здесь
   была пара фотографий «до/после», потом слайд-шоу из кадров). Ширина ролика
   ограничена, но щедро: в кадре интерфейс шириной 1280px, и в узком плеере
   подписи полей перестают читаться — а ради читаемости ролик и снимался. */
.screencast {
  max-width: 860px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.screencast__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  /* до загрузки постера область видео не должна «светиться» белым */
  background: #000;
}

.screencast figcaption {
  padding: var(--sp-4);
}

/* три шага под роликом — подпись к тому, что происходит в кадре */
.screencast__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-3);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.screencast__steps li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
}

.screencast__num {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--fs-xs);
}

.screencast__note {
  margin: 0;
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
  text-wrap: pretty;
}

/* финальный CTA: текст и «результат» — вечер, когда работа уже сделана.
   На узком экране картинка уходит под кнопки. */
.cta-final {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
  background: linear-gradient(180deg, var(--c-accent-soft) 0%, var(--c-surface) 100%);
  border-color: var(--c-accent-line);
}

.cta-final__text > :last-child {
  margin-bottom: 0;
}

/* тот же блок без картинки (страница примера): текст занимает карточку целиком,
   иначе справа остаётся пустая колонка под несуществующее изображение */
.cta-final--single {
  grid-template-columns: minmax(0, 1fr);
}

.cta-final__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.cta-final__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ========================================================= 11. Тарифы */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--sp-6) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.pricing-card--featured {
  border-color: var(--c-accent);
  box-shadow: var(--shadow);
}

.pricing-card__ribbon {
  position: absolute;
  top: calc(-1 * var(--sp-3));
  left: var(--sp-5);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-text-inverse);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.pricing-card__title {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-lg);
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.pricing-card__amount {
  font-size: 32px;
  font-weight: 600;
  line-height: var(--lh-head);
}

.pricing-card__per {
  margin-bottom: var(--sp-4);
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
}

.pricing-card__list {
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.pricing-card__list li {
  padding-left: var(--sp-5);
  position: relative;
  color: var(--c-text-secondary);
}

.pricing-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-success);
  font-weight: 600;
}

.pricing-card__cta {
  margin-top: auto;
}

/* подписи под ценой периодного пакета: «≈ 7 техкарт в неделю» — главный
   ориентир при выборе, пояснение про недели — мелким шрифтом у самой кнопки */
.pricing-card__note {
  margin-bottom: var(--sp-4);
  padding: var(--sp-1) var(--sp-3);
  align-self: flex-start;
  border-radius: 999px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.pricing-card__hint {
  margin-bottom: var(--sp-4);
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
}

/* --- Калькулятор количества генераций ------------------------------------- */
.calc {
  padding: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.calc__title {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-h3);
}

.calc__lead {
  max-width: var(--measure);
  color: var(--c-text-secondary);
}

/* Пресеты — обычные кнопки отправки формы: покупка нужного количества
   работает и без скриптов, поэтому это <button name="credits" value="N">,
   а не переключатели, которые пришлось бы оживлять на JS. */
.calc__presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.calc__preset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 76px; /* тач-цель заведомо больше 44 px */
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.calc__preset:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

.calc__preset--static {
  cursor: default;
}

.calc__preset--static:hover {
  border-color: var(--c-border-strong);
  background: var(--c-surface);
}

.calc__preset-count {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-head);
}

.calc__preset-price {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-accent);
}

.calc__preset-per {
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
}

.calc__custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
  align-items: center;
  gap: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}

.calc__field {
  min-width: 0;
}

.calc__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.calc__input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.calc__number {
  width: 108px;
  flex: none;
}

.calc__units {
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
}

.calc__range-wrap {
  margin-top: var(--sp-3);
}

/* высота 44 px — это тач-цель ползунка целиком, сам трек рисуется тоньше
   и центрируется браузером */
.calc__range {
  width: 100%;
  height: 44px;
  margin: 0;
  accent-color: var(--c-accent);
  cursor: pointer;
}

.calc__scale {
  display: flex;
  justify-content: space-between;
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
}

/* Итог считается и сервером, и скриптом по одной формуле, поэтому цифру
   видно сразу, ещё до перехода в кассу. */
.calc__summary {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
}

.calc__result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
}

.calc__total {
  font-size: 32px;
  font-weight: 600;
  line-height: var(--lh-head);
}

.calc__per {
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
}

.calc__hint {
  margin: 0;
  color: var(--c-error);
  font-size: var(--fs-xs);
}

.calc__ladder {
  max-width: 560px;
}

/* ============================================================ 12. FAQ */
.faq {
  max-width: 860px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  overflow: hidden;
}

.faq details + details {
  border-top: 1px solid var(--c-border);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "+";
  flex: none;
  color: var(--c-text-secondary);
  font-size: var(--fs-lg);
  line-height: 1.2;
}

.faq details[open] summary::after {
  content: "−";
}

.faq summary:hover {
  background: var(--c-surface-muted);
}

.faq__body {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
}

.faq__body > :last-child {
  margin-bottom: 0;
}

/* ============================================= 13. Юридические тексты */
.prose {
  max-width: var(--measure);
}

.prose h2 {
  margin-top: var(--sp-7);
  font-size: var(--fs-h3);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: var(--sp-5);
  font-size: var(--fs-md);
}

.prose ol,
.prose ul {
  padding-left: var(--sp-5);
}

.prose li {
  margin-bottom: var(--sp-3);
}

.doc-meta {
  margin-bottom: var(--sp-6);
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
}

.doc-meta > :last-child {
  margin-bottom: 0;
}

.definition-list {
  margin: 0 0 var(--sp-4);
}

.definition-list dt {
  font-weight: 600;
}

.definition-list dd {
  margin: 0 0 var(--sp-3);
  color: var(--c-text-secondary);
}

/* ========================================================== 14. Подвал */
.site-footer {
  padding: var(--sp-7) 0 var(--sp-6);
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}

.site-footer h2 {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-secondary);
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li {
  margin-bottom: var(--sp-2);
}

.site-footer a {
  color: var(--c-text-secondary);
}

.site-footer a:hover {
  color: var(--c-accent);
}

.site-footer__bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
}

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

.site-footer__bottom > :last-child {
  margin-bottom: 0;
}

/* ===================================================== 15. Cookie-баннер */
.cookie {
  position: fixed;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 420px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-xs);
}

.cookie__accept {
  flex: none;
}

/* плашка «генерации закончились» у нижнего края экрана: не перекрывает
   контент на десктопе (узкая, по центру), на телефоне — во всю ширину */
.zero-bar {
  position: fixed;
  left: 50%;
  bottom: var(--sp-4);
  z-index: 49;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: min(640px, calc(100vw - 2 * var(--sp-4)));
  padding: var(--sp-3) var(--sp-4);
  transform: translateX(-50%);
  background: var(--c-accent);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
}

.zero-bar__text {
  margin: 0;
  flex: 1 1 auto;
}

.zero-bar__form {
  flex: none;
}

.zero-bar .btn {
  background: #fff;
  border-color: #fff;
  color: var(--c-accent);
}

.zero-bar .btn:hover {
  background: var(--c-accent-soft);
  border-color: var(--c-accent-soft);
}

.zero-bar__more {
  flex: none;
  color: #fff;
  text-decoration: underline;
}

.zero-bar__close {
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: var(--sp-1);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.zero-bar__close:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* если открыты обе плашки — cookie над «генерациями закончились» */
.zero-bar:not([hidden]) ~ .cookie {
  bottom: calc(var(--sp-4) + 64px);
}

@media (max-width: 640px) {
  .cookie {
    right: var(--sp-4);
    max-width: none;
  }

  .zero-bar {
    left: var(--sp-4);
    right: var(--sp-4);
    max-width: none;
    flex-wrap: wrap;
    row-gap: var(--sp-2);
    padding-right: calc(var(--sp-4) + 32px); /* место под крестик в углу */
    transform: none;
  }

  .zero-bar__hint {
    display: none;
  }

  .zero-bar__text {
    flex: 1 1 auto;
  }

  .zero-bar__form {
    order: 1;
  }

  /* «Все тарифы» — второй строкой, слева, той же высоты что текст */
  .zero-bar__more {
    order: 2;
    flex: 1 1 100%;
    font-size: var(--fs-xs);
  }

  .zero-bar__close {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    margin: 0;
  }

  .zero-bar:not([hidden]) ~ .cookie {
    bottom: calc(var(--sp-4) + 96px);
  }
}

.cookie p {
  margin: 0;
  color: var(--c-text-secondary);
}

.cookie__actions {
  display: flex;
  gap: var(--sp-3);
}

[hidden] {
  display: none !important;
}

/* ============================================ 15a. Появление при скролле */
/* Класс .js-anim ставит app.js — и только если есть IntersectionObserver и
   пользователь не просил убрать анимации. Без скрипта блоки просто видны. */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.js-anim .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ====================================================== 16. Адаптивность */
@media (max-width: 1024px) {
  :root {
    --fs-h1: 34px;
    --fs-h2: 26px;
  }

  .section {
    padding: var(--sp-7) 0;
  }

  .col-lg-12 {
    grid-column: span 12;
  }

  /* четыре пункта чек-листа в строку перестают помещаться — по два в ряд */
  .checkstrip__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Слоган помещается в шапку только на широком экране рядом с логотипом,
   навигацией и кнопками: у вошедшего пользователя к ним добавляются баланс,
   «Создать» и «Выйти» (1137px содержимого при 1072px контейнера), поэтому там
   слоган скрыт всегда — иначе он сжимал логотип и обрезал слово «ТехКарта». */
@media (max-width: 1119px) {
  .site-header__tagline {
    display: none;
  }
}

.site-header__inner:has(.site-actions form) .site-header__tagline {
  display: none;
}

/* Мобильное меню включается на 1023px, а не на 880px: между 880 и 1023
   шапка вошедшего пользователя не помещалась в строку и «съезжала». */
@media (max-width: 1023px) {
  .site-header__inner {
    position: relative;
    flex-wrap: wrap;
    /* логотип + баланс + бургер должны уместиться в одну строку уже на 320px */
    gap: var(--sp-3);
  }

  /* в раскрытом меню «Выйти» — по центру, под кнопками во всю ширину */
  .site-actions form,
  .site-header__logout {
    width: 100%;
    text-align: center;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-header__credits {
    display: inline-flex;
    min-height: var(--control-h);
    margin-left: auto;
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-xs);
  }

  /* иначе два `margin-left: auto` (у бейджа и у бургера) поделят свободное
     место пополам и растащат их по разным краям */
  .site-header__inner:has(.site-header__credits) .nav-toggle {
    margin-left: 0;
  }

  .site-nav,
  .site-actions {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    margin: 0;
    padding: var(--sp-3) 0;
  }

  .site-nav.is-open,
  .site-actions.is-open {
    display: flex;
  }

  .site-nav.is-open {
    border-top: 1px solid var(--c-border);
    margin-top: var(--sp-3);
  }

  .site-nav a {
    display: flex;
    align-items: center;
    min-height: var(--control-h);
    padding: var(--sp-2) 0;
    font-size: var(--fs-base);
  }

  /* открытое меню: кнопки и баланс одной высоты и на всю ширину,
     чтобы столбик читался как список, а не как разнокалиберные надписи */
  .site-actions.is-open {
    border-top: 1px solid var(--c-border);
    margin-top: var(--sp-2);
    padding-top: var(--sp-4);
  }

  .site-actions.is-open .btn,
  .site-actions.is-open form {
    width: 100%;
  }

  .site-actions.is-open .btn {
    min-height: var(--control-h);
    font-size: var(--fs-base);
  }

  .site-actions.is-open .btn--ghost {
    border-color: var(--c-border);
  }

  .site-actions.is-open .badge {
    min-height: var(--control-h);
    justify-content: center;
  }
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 30px;
    --fs-h2: 24px;
    --fs-md: 17px;
  }

  .grid > [class*="col-"] {
    grid-column: span 12;
  }

  .hero {
    padding: var(--sp-7) 0;
  }

  .hero__cta {
    width: 100%;
  }

  /* правая колонка hero уехала под текст — снимок документа получает воздух
     сверху, а по высоте обрезается: в первом экране нужен только верх листа */
  .hero__grid .hero__shot {
    margin-top: var(--sp-5);
  }

  .doc-shot {
    max-height: 420px;
  }

  .steps,
  .pricing,
  .cta-final {
    grid-template-columns: minmax(0, 1fr);
  }

  /* карточки шагов встали в столбик — горизонтальным стрелкам-переходам
     между колонками больше не на что указывать */
  .steps__arrow {
    display: none;
  }

  /* карточка стала во всю ширину — лист-миниатюра тоже чуть шире, иначе
     он теряется посреди подложки */
  .sv-frame {
    max-width: 360px;
  }

  /* карточка тарифа во всю ширину планшета выглядит непропорционально
     растянутой; «Популярный» получает воздух между карточками */
  .pricing {
    max-width: 480px;
    gap: var(--sp-6);
  }

  .site-footer .grid {
    gap: var(--sp-5);
  }

  /* группы кнопок: в столбик на всю ширину — одинаковые и ровные,
     вместо разной ширины и переноса строк flex-wrap */
  .inline-group,
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .inline-group > .btn,
  .form-actions > .btn {
    width: 100%;
  }

  /* в столбике кнопка без фона читается как «висящая» ссылка — даём ей
     светлую рамку, чтобы столбик выглядел ровным списком кнопок */
  .inline-group > .btn--ghost,
  .form-actions > .btn--ghost,
  .doc-actions > .btn--ghost {
    border-color: var(--c-border);
  }

  /* палец на мобильном: минимальная высота касания 44px */
  .btn--sm {
    min-height: var(--control-h);
  }
}

@media (max-width: 640px) {
  .feature-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* калькулятор: поле и итог с кнопкой встают друг под друга, иначе правая
     колонка ужимается до кнопки в две строки */
  .calc__custom {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }

  .calc__presets {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  }

  /* три шага под роликом: в три колонки на телефоне каждая подпись ломается
     на три строки — здесь они идут списком в столбик */
  .screencast__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkstrip__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
  }
}

@media (max-width: 480px) {
  :root {
    --fs-h1: 27px;
    --fs-h2: 22px;
    --fs-h3: 19px;
  }

  .container {
    padding: 0 var(--sp-4);
  }

  .section {
    padding: var(--sp-6) 0;
  }

  /* первый экран телефона: снимок документа выше прежнего ролика,
     поэтому у hero и полосы чек-листа отбивки скромнее */
  .hero {
    padding: var(--sp-6) 0;
  }

  .checkstrip__list {
    gap: var(--sp-2);
  }

  .card,
  .pricing-card,
  .calc,
  .checkstrip {
    padding: var(--sp-4);
  }

  /* на 360 px в ряд помещаются две плитки-пресета: у третьей цена за штуку
     переносилась бы на вторую строку и ломала ровную сетку */
  .calc__presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* бейдж в блоке доверия: на 13px подпись целиком помещается в одну строку
     и «таблетка» не разъезжается на две */
  .checkstrip__badge .badge {
    font-size: var(--fs-xs);
  }

  .cookie {
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: var(--sp-3);
    flex-direction: column;
    align-items: stretch;
  }

  .cookie__actions .btn {
    width: 100%;
  }
}

@media print {
  .site-header,
  .site-footer,
  .cookie,
  .hero__cta,
  .stages__more,
  .table-scroll__hint {
    display: none !important;
  }

  /* на печати таблица этапов нужна целиком, даже если экран был узкий */
  .stages.is-collapsed .stages__extra {
    display: table-row !important;
  }

  .js-anim .reveal {
    opacity: 1;
    transform: none;
  }

  body {
    background: #fff;
  }
}

/* ===================================================== 17. Флеш-сообщения */
.flash {
  padding-top: var(--sp-5);
}

.alert--info {
  border-color: var(--c-accent-line);
  background: var(--c-accent-soft);
}

/* ================================================= 18. Утилиты отступов */
.mt-4 {
  margin-top: var(--sp-4);
}

.mt-5 {
  margin-top: var(--sp-5);
}

.mt-6 {
  margin-top: var(--sp-6);
}

.mb-0 {
  margin-bottom: 0;
}

/* === App pages (Task 6) === */

/* формы: радио-карточки (тип урока, длительность, формат) */
.radio-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

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

/* три формата документа в полуколонке формы: в три колонки карточка уже
   150px и «Технологическая карта» рвётся посреди слова — списком в один столбец */
.radio-cards--1 {
  grid-template-columns: minmax(0, 1fr);
}

.radio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.radio-card input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.radio-card:has(input:checked) {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  box-shadow: var(--ring);
}

.radio-card:has(input:focus-visible) {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.radio-card__title {
  font-weight: 600;
}

.radio-card__desc {
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
}

.radio-card--compact {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: var(--control-h);
}

/* блок «УМК (учебник)»: переключатель источника учебника и поля обоих вариантов.
   Это не .field, а собственная обёртка: иначе правило .field:has(.field__error)
   красило бы рамкой оба поля сразу — и список УМК, и своё название. */
.umk-field {
  margin-bottom: var(--sp-4);
}

.umk-field > .radio-cards {
  margin-bottom: var(--sp-3);
}

.umk-field > .field:last-child {
  margin-bottom: 0;
}

/* баланс генераций над кнопкой отправки формы */
.balance-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin-top: var(--sp-5);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--radius-sm);
  background: var(--c-accent-soft);
}

.balance-banner p {
  margin: 0;
}

/* ожидание генерации: спиннер и шаги */
.job-status {
  padding: var(--sp-6) 0 0;
  text-align: center;
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--sp-4);
  border: 4px solid var(--c-border);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: tk-spin 0.9s linear infinite;
}

/* шкала ожидания генерации: полоса на всю ширину карточки и процент справа */
.progress {
  position: relative;
  height: 12px;
  margin: var(--sp-4) 0 var(--sp-5);
  border-radius: 999px;
  background: var(--c-surface-muted);
  overflow: visible;
}

.progress__bar {
  height: 100%;
  border-radius: 999px;
  background: var(--c-accent);
  transition: width 0.25s ease-out;
}

.progress__value {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-2));
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.job-status .progress + .job-status__steps {
  margin-top: var(--sp-6);
}

@keyframes tk-spin {
  to {
    transform: rotate(360deg);
  }
}

.job-status__steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
}

.job-status__steps li {
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  background: var(--c-surface-muted);
}

.job-status__steps li.is-active {
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-weight: 600;
}

.job-status__steps li.is-done {
  color: var(--c-success);
}

/* документ: панель действий, встроенное подтверждение удаления, чек-лист */
.doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.doc-actions--bottom {
  margin-top: var(--sp-6);
  margin-bottom: 0;
}

/* остаток генераций под кнопками документа: строка прижата к кнопкам,
   блок-предложение (alert) держит свои внутренние отступы */
.balance-note {
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-5);
  font-size: var(--fs-sm);
}

.alert.balance-note {
  margin-top: 0;
  margin-bottom: var(--sp-5);
}

/* «Следующий урок» под кнопками документа: остаток генераций, темы по
   программе и ссылка в форму с уже подставленными параметрами */
.next-lesson {
  padding: var(--sp-4);
  margin: 0 0 var(--sp-5);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--radius-sm);
  background: var(--c-accent-soft);
}

.next-lesson__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
}

.next-lesson__title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
}

.next-lesson__balance {
  margin: 0;
  font-size: var(--fs-sm);
}

.next-lesson__lead {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
}

.next-lesson__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}

.next-lesson__topic {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* тач-цель */
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.35;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.next-lesson__topic:hover,
.next-lesson__topic:focus-visible {
  border-color: var(--c-accent);
  box-shadow: var(--ring);
  text-decoration: none;
}

.next-lesson__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
}

.next-lesson-bottom {
  margin-top: var(--sp-6);
}

.next-lesson-bottom .next-lesson,
.next-lesson-bottom .alert.balance-note {
  margin-bottom: var(--sp-4);
}

.next-lesson__pricing {
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
}

/* блок «похоже, опечатка в домене» на форме входа */
.email-suggestion p {
  margin-bottom: var(--sp-3);
}

.email-suggestion .inline-group {
  gap: var(--sp-2) var(--sp-3);
}

/* подпись о предзаполнении формы из последнего документа */
.form-prefill-note {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
}

/* плитки покупки на странице «генерации закончились»: те же пропорции, что
   у пресетов калькулятора на /pricing, но всего три и в одну строку */
.buy-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.buy-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 76px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.buy-tile:hover,
.buy-tile:focus-visible {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

.buy-tile__count {
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-head);
}

.buy-tile__price {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-accent);
}

.buy-tile__per {
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
}

.buy-tiles + p {
  margin-top: var(--sp-3);
}

/* те же плитки внутри предложения под документом при нуле: отступ от текста
   и без «сжатого» шрифта самого блока */
.balance-note .buy-tiles {
  margin-top: var(--sp-3);
}

.balance-note .buy-tiles + p {
  margin-bottom: var(--sp-3);
}

@media (max-width: 640px) {
  .buy-tiles {
    grid-template-columns: 1fr;
  }
}

.confirm-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  border: 1px solid rgba(179, 38, 30, 0.3);
  border-radius: var(--radius-sm);
  background: var(--c-error-bg);
}

.confirm-inline form {
  display: inline-flex;
}

.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  border-bottom: 1px solid var(--c-border);
}

.checklist li:last-child {
  border-bottom: 0;
}

.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: var(--sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
  color: var(--c-success);
  font-size: 13px;
  line-height: 18px;
}

/* строка действий над таблицей примера на главной: открыть пример целиком
   и скачать его в DOCX (на узком экране .inline-group ставит кнопки в столбик) */
.example-actions {
  margin-bottom: var(--sp-5);
}

/* таблица «Ход урока» на странице документа: колонки задаются через <colgroup>
   в partials/lesson_plan.html (table-layout: fixed игнорирует авто-ширину по
   содержимому), поэтому длинный текст переносится внутри ячейки, а не
   раздвигает таблицу шире карточки документа. */
.table--stages-doc {
  table-layout: fixed;
  width: 100%;
  min-width: 900px;
}

.table--stages-doc th,
.table--stages-doc td {
  padding: var(--sp-3);
  word-break: normal;
  overflow-wrap: break-word;
  /* узкие колонки («Этап урока», «Планируемые результаты») рвали слова без
     дефиса: «Самостоятельн/ая». Перенос по правилам языка читается как в книге */
  hyphens: auto;
  -webkit-hyphens: auto;
}

.table--stages-doc .time,
.table--stages-doc .num {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ширина колонок здесь фиксирована <colgroup>, поэтому заголовки и «45 мин»
   переносятся внутри ячейки, а не вылезают за её границы */
.table--stages-doc thead th,
.table--stages-doc .time {
  white-space: normal;
}

/* восьмая колонка («Планируемые результаты этапа») при min-width 900px даёт
   ячейки уже 110px — текст в них рассыпается по одному слову в строку */
.table--stages-wide {
  min-width: 1060px;
}

/* шапка документа: строки «Учитель» и «Дата» сервис не заполняет (ФИО — это
   персональные данные, дата урока известна только учителю), поэтому в ячейке
   печатается линейка под запись от руки, а не прочерк */
.lesson-doc .fill-in::after {
  content: "";
  display: block;
  width: min(240px, 100%);
  height: 1.1em;
  border-bottom: 1px solid var(--c-border-strong);
}

/* страница документа: текстовые блоки — в комфортной ширине строки
   (на 1440px карточка шире 1000px, и строка уходила далеко за 72 знака),
   таблицы и чек-лист при этом занимают карточку целиком */
.lesson-doc p,
.lesson-doc ul,
.lesson-doc ol,
.lesson-doc h1,
.lesson-doc h2,
.lesson-doc h3 {
  max-width: var(--measure);
}

.lesson-doc .table-wrap,
.lesson-doc .checklist {
  max-width: none;
}

/* заголовок документа — длинная строка вида «Технологическая карта урока:
   … (Основы безопасности и защиты Родины, 8 класс)»: balance режет её на
   рваные короткие строки, pretty только убирает висячее слово */
.lesson-doc h1 {
  text-wrap: pretty;
}

/* публичная страница примера (/example): шапка «это пример» над документом.
   Заголовок страницы — h1, поэтому собственный заголовок документа внутри
   partial получает размер h2: иначе на странице две одинаково крупные строки
   и непонятно, что здесь главное. */
.example-head {
  margin-bottom: var(--sp-6);
}

.example-head h1,
.example-head__note {
  max-width: var(--measure);
}

.example-head__note {
  margin-bottom: var(--sp-5);
  color: var(--c-text-secondary);
  font-size: var(--fs-md);
}

.example-doc .lesson-doc h1 {
  font-size: var(--fs-h2);
}

/* таблица этапов в документе шире телефона и прокручивается внутри карточки —
   на узком экране об этом нужно сказать словами (та же граница, что и у
   подсказки под таблицей примера на главной) */
.example-head__hint {
  display: none;
  margin: 0 0 var(--sp-4);
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
}

@media (max-width: 947px) {
  .example-head__hint {
    display: block;
  }
}

/* страница ожидания генерации: узкая карточка по центру страницы */
.job-card {
  max-width: 640px;
  margin: 0 auto;
}

/* карточка входа (/login, /login/code): по умолчанию .grid растягивает
   .col-5 от левого края, оставляя пустоту справа — здесь карточка вместо
   этого центрируется по горизонтали в отдельной узкой колонке. */
.auth-card {
  max-width: 440px;
  margin: var(--sp-8) auto 0;
}

/* список документов: действия в строке таблицы */
.docs-row-actions {
  display: flex;
  gap: var(--sp-2);
}

/* «DOCX» и «Удалить» — .btn--ghost без фона: рядом со ссылкой-темой в соседней
   ячейке они читались как обычный текст, светлая рамка делает из них кнопки */
.docs-row-actions .btn--ghost {
  border-color: var(--c-border);
}

/* колонка действий ужимается по содержимому (width: 1% + nowrap — приём для
   таблиц с авто-раскладкой): три кнопки встают в одну строку, а вся оставшаяся
   ширина достаётся теме урока */
.table--docs th:last-child,
.table--docs td:last-child {
  width: 1%;
  white-space: nowrap;
}

/* документ в формате «план-конспект»: этапы нумерованными разделами, а не
   широкой таблицей — так его и оформляют в школе, и на телефоне читается
   без горизонтальной прокрутки */
.lesson-stages {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lesson-stage;
}

.lesson-stages > li {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-border);
}

.lesson-stages > li:first-child {
  padding-top: 0;
}

.lesson-stages > li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.lesson-stage__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: 0;
  margin-bottom: var(--sp-3);
  counter-increment: lesson-stage;
}

.lesson-stage__title::before {
  content: counter(lesson-stage) ".";
  color: var(--c-text-secondary);
}

.lesson-stage__time {
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
  font-weight: 400;
  white-space: nowrap;
}

.lesson-stage p {
  margin-bottom: var(--sp-2);
}

.lesson-stage p:last-child {
  margin-bottom: 0;
}

.lesson-stages__total {
  margin-top: var(--sp-4);
  margin-bottom: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border-strong);
  font-weight: 600;
}

/* список документов: пустое состояние */
.empty-state {
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  color: var(--c-text-secondary);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--radius);
}

/* список документов на телефоне: строки таблицы становятся карточками.
   Шесть колонок (из них одна с тремя кнопками) в 360px не помещаются, а
   горизонтальный скролл прячет именно действия — то есть то, ради чего в
   список и заходят. */
@media (max-width: 1000px) {
  .table--docs,
  .table--docs tbody,
  .table--docs tr,
  .table--docs td {
    display: block;
    width: 100%;
  }

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

  .table--docs tr {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--c-border);
  }

  .table--docs tr:last-child {
    border-bottom: 0;
  }

  .table--docs td {
    padding: var(--sp-1) 0;
    border-bottom: 0;
  }

  /* колонка действий здесь уже не колонка, а строка карточки */
  .table--docs td:last-child {
    width: 100%;
    white-space: normal;
  }

  .table--docs td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--c-text-secondary);
  }

  .table--docs .docs-cell--topic {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-base);
    font-weight: 600;
  }

  .table--docs .docs-row-actions {
    flex-wrap: wrap;
    margin-top: var(--sp-3);
  }

  .table--docs .docs-row-actions .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 768px) {
  .radio-cards,
  .radio-cards--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .confirm-inline {
    flex-direction: column;
    align-items: stretch;
  }

  /* на мобильном отступ сверху даёт сама секция — 64px «воздуха» над
     карточкой входа выглядели как пустой экран */
  .auth-card {
    margin-top: 0;
  }

  /* «Да, удалить» лежит внутри <form>: без этого форма растягивалась,
     а кнопка внутри оставалась узкой — две кнопки были разной ширины */
  .confirm-inline form,
  .confirm-inline .btn {
    width: 100%;
  }
}

/* ============================================ 20. Раздел «Техкарты» (посадочные страницы)
   Отдельная секция в конце файла: страницы собираются из существующих
   компонентов (section, container, card, btn, faq, cta-final), своего здесь —
   только крошки, плитки классов, список тем и полосы внутренних ссылок. */

.breadcrumbs {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  margin-bottom: var(--sp-1);
}

/* Разделитель рисуется псевдоэлементом: в разметке его нет, и он не попадает
   ни в озвучку скринридера, ни в копируемый текст. */
.breadcrumbs li + li::before {
  content: "→";
  color: var(--c-border-strong);
}

.breadcrumbs a {
  color: inherit;
}

/* Ширину ограничивает текст, а не блок целиком: иначе ряд кнопок ломается на
   две строки уже на десктопе, хотя место в контейнере есть. */
.seo-head h1,
.seo-head p {
  max-width: var(--measure);
}

.seo-head h1 {
  margin-top: var(--sp-2);
}

.seo-head .doc-actions {
  margin-top: var(--sp-5);
}

/* Плитки классов и предметов */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile {
  margin: 0;
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.tile__link {
  display: block;
  font-weight: 600;
}

.tile__note {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xs);
}

/* Хаб: предмет и его классы компактной сеткой */
.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.subject-grid__item {
  margin: 0;
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.subject-grid__item h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-base);
}

.grade-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grade-links li {
  margin: 0;
}

/* Номер класса — тач-цель 44 px: попасть пальцем в «5» иначе невозможно */
.grade-links a,
.link-row__list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding: 0 var(--sp-3);
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  text-align: center;
}

.grade-links a:hover,
.link-row__list a:hover {
  background: var(--c-surface);
  text-decoration: none;
}

/* Темы уроков со ссылкой на форму */
.topic-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.topic-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-border);
}

.topic-list__item:last-child {
  border-bottom: 0;
}

.topic-list__title {
  flex: 1 1 240px;
  min-width: 0;
}

.topic-list .btn {
  flex: 0 0 auto;
}

.topic-group + .topic-group {
  margin-top: var(--sp-6);
}

.topic-group h3 {
  margin-bottom: var(--sp-2);
}

/* Учебники: длинные строки каталога читаются списком без маркеров */
.umk-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}

.umk-list li {
  margin: 0;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent-line);
}

.umk-list li:last-child {
  border-bottom: 0;
}

/* Полосы ссылок на соседние страницы */
.seo-nearby {
  display: grid;
  gap: var(--sp-5);
}

.link-row__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-secondary);
}

.link-row__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-row__list li {
  margin: 0;
}

/* Остальные этапы примера — раскрывающийся блок без JS */
.stages-more {
  margin-top: var(--sp-4);
}

.stages-more > summary {
  padding: var(--sp-3) 0;
  color: var(--c-accent);
  font-weight: 600;
  cursor: pointer;
}

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

.stages-more > summary::after {
  content: " ↓";
}

.stages-more[open] > summary::after {
  content: " ↑";
}

/* Полоса ссылок на главной и блок в подвале */
.subject-strip {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: 2;
}

.site-footer__seo {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}

.site-footer__seo ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

.site-footer__seo li {
  margin: 0;
}

@media (max-width: 640px) {
  .tile-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  /* На узком экране кнопка темы уезжает под её название: растягивать её на всю
     ширину не нужно — полтора десятка тем превратились бы в стену кнопок. */
  .topic-list__item {
    justify-content: flex-start;
  }

  .topic-list__title {
    flex: 1 1 100%;
  }
}