/* service/web/site.css
   Оформление сайта сервиса. Палитра и шрифты — в tokens.css, общие с
   конструктором. Собрано из landing/styles.css и landing/tokens.css
   (лендинг от 29.07.2026) — вёрстка, приёмы и тон сохранены целиком, менялись
   тексты и разметка отдельных секций.

   ЧТО ИЗМЕНЕНО ПО СРАВНЕНИЮ С ИСХОДНЫМ ЛЕНДИНГОМ

   Шрифты — системные, а не Google Fonts. Внешних запросов на странице нет ни
   одного, и это не мелочь: сайт обещает, что работы учеников никуда не уходят,
   а сам при этом ходил бы за шрифтами на чужой сервер при каждом открытии. Тот
   же принцип, что во всём проекте: никаких внешних зависимостей.

   Контраст двух гарнитур сохранён — заголовки серифом, текст системным
   гротеском, — потому что на нём держится всё оформление. */

/* ---------- База ---------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg-paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
sub, sup { font-size: 0.8em; line-height: 0; }

:focus-visible {
  outline: 2px solid var(--accent-coral);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
}

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

.topbar {
  position: relative;
  z-index: 3;
  padding: 22px 0;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent-mint);
  color: #FFFFFF;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent-mint) 90%, transparent);
}

.brand__mark svg { width: 18px; height: 18px; }

.brand__name {
  font-family: var(--font-heading);
  font-size: 21px;
  letter-spacing: -0.01em;
}

.topbar__link {
  font-size: 15px;
  color: var(--ink-65);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.topbar__link:hover {
  color: var(--ink);
  border-bottom-color: var(--accent-coral);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 6vw, 64px) 0 clamp(72px, 10vw, 120px);
}

/* Тёплые цветовые пятна: задают настроение, но не мешают тексту. */
.hero__glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 78% 12%, color-mix(in srgb, var(--accent-coral) 20%, transparent), transparent 68%),
    radial-gradient(40% 38% at 96% 62%, color-mix(in srgb, var(--accent-amber) 22%, transparent), transparent 70%),
    radial-gradient(52% 46% at 6% 78%, color-mix(in srgb, var(--accent-mint) 18%, transparent), transparent 72%);
}

/* Едва заметное зерно — «бумага», а не глянец. */
.hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 76px);
  align-items: center;
}

/* ---------- Текстовая часть ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-65);
  margin-bottom: 26px;
}

.eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-amber);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-amber) 70%, transparent);
  animation: pulse 2.8s ease-out infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-amber) 65%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent-amber) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-amber) 0%, transparent); }
}

.hero__title {
  font-size: clamp(2.3rem, 5.4vw, 3.7rem);
  margin-bottom: 22px;
}

/* Подчёркивание «от руки» — коралловый штрих, дорисовывающийся при загрузке.
   Цвет внутри data-URI задан явно: в url() переменные CSS не работают. */
.hero__title em {
  font-style: normal;
  padding-bottom: 0.08em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C34 3.6 68 10.4 100 6.6c30-3.6 63 3.4 97-0.6' fill='none' stroke='%23FF6F59' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.3em;
  animation: draw-underline 0.85s var(--ease-out) 0.5s both;
}

@keyframes draw-underline {
  from { background-size: 0% 0.3em; }
  to   { background-size: 100% 0.3em; }
}

.hero__lead {
  max-width: 34em;
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  color: var(--ink-80);
  margin-bottom: 26px;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-bottom: 34px;
}

.hero__facts li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: var(--ink-65);
}

.hero__facts li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5 10 17.5 19 7' stroke='%233EC1B3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.btn--primary {
  background: var(--accent-coral);
  color: #FFFFFF;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent-coral) 95%, transparent);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--accent-coral) 95%, transparent);
}

.btn--primary:active { transform: translateY(0); }

.btn__arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease-out);
}

.btn--primary:hover .btn__arrow { transform: translateY(3px); }

.hero__note {
  font-size: 14px;
  color: var(--ink-45);
  max-width: 22em;
}

/* ---------- Карточка вопроса (фирменный элемент) ---------- */

.hero__demo {
  display: flex;
  justify-content: center;
}

.qcard {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}

.qcard:hover {
  transform: translateY(-5px);
  border-color: var(--mint-line);
  box-shadow: var(--shadow-lift);
}

.qcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.qcard__step {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-45);
}

.qcard__mode {
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-amber) 18%, #FFFFFF);
  color: color-mix(in srgb, var(--accent-amber) 62%, var(--ink));
  font-size: 12px;
  font-weight: 600;
}

.qcard__topic {
  font-size: 13px;
  color: var(--ink-45);
  margin-bottom: 6px;
}

.qcard__prompt {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 18px;
}

.qcard__head,
.qrow {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 168px 22px;
  align-items: center;
  gap: 10px;
}

.qcard__head {
  padding: 0 12px;
  margin-bottom: 8px;
}

.qcard__head-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent-mint);
}

.qcard__board {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.qrow {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  transition:
    background 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out);
}

.qrow__letter {
  font-weight: 700;
  color: var(--accent-mint);
  text-align: center;
}

.qrow__item { font-size: 15px; }

/* Имитация выпадающего списка из самого теста: вариант ответа стоит
   напротив своей пары веществ, целиком — так задание и читается. */
.qrow__pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 14px;
  transition: border-color 0.35s var(--ease-out);
}

.qrow__pick-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qrow__caret {
  flex: none;
  width: 12px;
  height: 12px;
  color: var(--ink-45);
}

.qrow__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-mint);
  color: #FFFFFF;
  opacity: 0;
  transform: scale(0.3);
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.45s var(--ease-pop);
}

.qrow__mark svg { width: 14px; height: 14px; }

/* Галочка не появляется целиком, а дорисовывается — тот же жест, что
   в самом тесте после нажатия «Проверить».
   Рисование сделано @keyframes, а не transition, и базовое состояние —
   ГОТОВАЯ галочка: если анимация почему-либо не отработает, ученик всё равно
   увидит галочку, а не пустой кружок. Скрывать её базовым значением
   stroke-dashoffset: 26 не нужно — до появления класса кружок и так невидим. */
.qrow__check {
  stroke-dasharray: 26;
  stroke-dashoffset: 0;
}

@keyframes draw-check {
  from { stroke-dashoffset: 26; }
  to   { stroke-dashoffset: 0; }
}

.qrow.is-correct {
  background: var(--mint-soft);
  border-color: var(--mint-line);
}

.qrow.is-correct .qrow__pick { border-color: var(--mint-line); }

.qrow.is-correct .qrow__mark {
  opacity: 1;
  transform: scale(1);
}

/* Без fill-mode и без задержки: по окончании анимации свойство возвращается
   к базовому значению — а базовое и есть нужный итог (галочка нарисована).
   Так конечное состояние не зависит от того, доиграла анимация или нет. */
.qrow.is-correct .qrow__check {
  animation: draw-check 0.45s var(--ease-out);
}

.qcard__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.qcard__btn {
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-coral);
  color: #FFFFFF;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  /* box-shadow здесь намеренно НЕ анимируется: переход к `none` браузер
     отрабатывает ненадёжно, и коралловое свечение оставалось висеть вокруг
     уже «отжатой» кнопки после проверки. */
  transition: transform 0.2s var(--ease-out);
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--accent-coral) 95%, transparent);
}

.qcard__btn:hover { transform: translateY(-1px); }
.qcard__btn:active { transform: translateY(0); }

.is-checked .qcard__btn {
  background: transparent;
  color: var(--ink-65);
  border: 1px solid var(--line-strong);
  box-shadow: none;
  padding: 9px 19px;
}

.qcard__status {
  font-size: 14px;
  color: var(--ink-45);
}

.qcard__status.is-correct {
  color: color-mix(in srgb, var(--accent-mint) 78%, var(--ink));
  font-weight: 600;
  animation: fade-up 0.4s var(--ease-out) both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

.qcard__caption {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  color: var(--ink-45);
}

/* ---------- Общий каркас секций ---------- */

.section {
  position: relative;
  padding: clamp(64px, 9vw, 108px) 0;
}

/* Едва заметно темнее бумаги: секция читается своей полосой, а белые
   карточки на ней выступают вперёд. */
.section--tinted {
  background: color-mix(in srgb, var(--ink) 3.5%, var(--bg-paper));
  border-top: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}

.section__head {
  max-width: 860px;
  margin: 0 auto clamp(38px, 5vw, 56px);
  text-align: center;
}

.section__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-coral);
  margin-bottom: 14px;
}

.section__title {
  font-size: clamp(1.85rem, 3.7vw, 2.65rem);
  line-height: 1.14;
  margin-bottom: 18px;
}

.section__lead {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: var(--ink-65);
  max-width: 46ch;
  margin: 0 auto;
}

.section__bridge {
  margin-top: clamp(34px, 4vw, 48px);
  text-align: center;
  font-size: 15px;
  color: var(--ink-45);
}

.section__bridge-arrow {
  display: inline-block;
  margin-left: 4px;
  animation: nudge 2.4s ease-in-out infinite;
}

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ---------- Секция «Проблема» ---------- */

.problems {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.problem {
  padding: 28px 26px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.problem:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
    0 22px 50px -24px color-mix(in srgb, var(--ink) 38%, transparent);
}

.problem__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  margin-bottom: 18px;
}

.problem__icon svg { width: 23px; height: 23px; }

/* Мятный намеренно не используется: в этом проекте он означает «верно»,
   и на карточке с проблемой сбивал бы язык цвета. */
.problem__icon--amber {
  background: color-mix(in srgb, var(--accent-amber) 18%, #FFFFFF);
  color: color-mix(in srgb, var(--accent-amber) 72%, var(--ink));
}

.problem__icon--coral {
  background: color-mix(in srgb, var(--accent-coral) 14%, #FFFFFF);
  color: var(--accent-coral);
}

/* Запас в две строки: заголовки карточек разной длины, и без него текст
   в соседних колонках начинается на разной высоте. */
.problem__title {
  font-size: 1.24rem;
  line-height: 1.25;
  min-height: 2.5em;
  margin-bottom: 12px;
}

.problem__text {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-65);
}

/* ---------- Секция «Как решает»: путь файла ---------- */

/* Три равные колонки; промежуток — 24px. Пунктир и «летящий» файл считают
   свои координаты от этих двух чисел, других зависимостей у них нет. */
.flow {
  --flow-gap: 24px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--flow-gap);
  align-items: start;
}

.flow__step {
  position: relative;
  text-align: center;
}

/* Пунктир тянется от края одного номера до края следующего — через весь
   промежуток, а не внутри отдельной колонки: иначе линия висит между
   текстовыми блоками и ничего не соединяет. */
.flow__step::after {
  content: '';
  position: absolute;
  top: 23px;
  left: calc(50% + 32px);
  width: calc(100% + var(--flow-gap) - 64px);
  border-top: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}

.flow__step:last-child::after { content: none; }

.flow__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  margin: 0 auto 18px;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
}

.flow__num--amber {
  background: color-mix(in srgb, var(--accent-amber) 20%, #FFFFFF);
  color: color-mix(in srgb, var(--accent-amber) 70%, var(--ink));
}

.flow__num--coral {
  background: color-mix(in srgb, var(--accent-coral) 15%, #FFFFFF);
  color: var(--accent-coral);
}

/* Мятный на третьем шаге уместен: это «готово, результат получен» —
   то же значение, что у галочки в самом тесте. */
.flow__num--mint {
  background: var(--mint-soft);
  color: color-mix(in srgb, var(--accent-mint) 70%, var(--ink));
}

.flow__title {
  font-size: 1.2rem;
  line-height: 1.25;
  margin-bottom: 10px;
}

.flow__text {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-65);
}

/* Имя файла, который в этот момент переходит из рук в руки: садится ровно
   на середину промежутка между номерами (полколонки + половина зазора). */
.flow__pass {
  position: absolute;
  top: 0;
  left: calc(100% + var(--flow-gap) / 2);
  transform: translateX(-50%);
  z-index: 1;
  display: grid;
  place-items: center;
  /* Ширина по содержимому обязательна: без неё max-width плашки считается
     от ширины этого же блока, и плашка схлопывается до иконки. */
  width: max-content;
  height: 48px;
}

.flow__file {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg-paper);
  font-size: 12.5px;
  color: var(--ink-65);
  white-space: nowrap;
  /* Страховка: длинное имя файла подрежется, а не разъедет соседнюю колонку. */
  overflow: hidden;
}

.flow__file svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--accent-coral);
}

/* ---------- Секция «Живой макет»: типы заданий ---------- */

.demo {
  max-width: 660px;
  margin: 0 auto;
}

.demo__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line);
}

.demo__tab {
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-65);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.demo__tab:hover { color: var(--ink); }

.demo__tab.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 8px -3px color-mix(in srgb, var(--ink) 35%, transparent);
}

/* Все панели лежат в одной ячейке сетки: контейнер получает высоту самой
   высокой, и переключение вкладок не дёргает страницу вверх-вниз. */
.demo__panels {
  display: grid;
}

.demo__panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.3s var(--ease-out),
    visibility 0.3s;
}

.demo__panel.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.demo__note {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-45);
}

/* Карточка внутри макета — та же, что в hero, но без «живого» поведения:
   здесь она не приманка, а образец, и подпрыгивать под курсором не должна. */
.qcard--flat {
  max-width: none;
}

.qcard--flat:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

/* --- фишки выбора (select_sequence) --- */

.seq__hint {
  font-size: 13px;
  color: var(--ink-45);
  margin-bottom: 12px;
}

.seq__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.seq__chip {
  padding: 8px 13px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface-soft);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.2s var(--ease-out),
    color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out),
    transform 0.15s var(--ease-out);
}

.seq__chip:hover { transform: translateY(-1px); }

/* Выбранная фишка — тёмная, а не мятная: мятный на этой странице означает
   «верно», и красить им ещё не проверенный выбор нельзя. */
.seq__chip.is-used {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg-paper);
}

/* --- строка ответа (общая для последовательности и числа) --- */

.answer-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.answer-strip__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-45);
}

.answer-strip__value {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.answer-strip__clear { margin-left: auto; }

.answer-strip__input {
  width: 130px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.answer-strip__unit {
  font-size: 15px;
  color: var(--ink-65);
}

.answer-strip__hint {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--accent-coral);
}

.answer-strip.is-correct {
  background: var(--mint-soft);
  border-color: var(--mint-line);
}

.answer-strip.is-correct .answer-strip__value {
  color: color-mix(in srgb, var(--accent-mint) 62%, var(--ink));
}

.answer-strip.is-wrong {
  background: var(--coral-soft);
  border-color: color-mix(in srgb, var(--accent-coral) 45%, transparent);
}

.num__hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-45);
}

.btn-ghost {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-65);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.btn-ghost:hover {
  color: var(--ink);
  border-color: var(--ink-45);
}

/* ---------- Секция «Тренировка vs Экзамен» ---------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.split__side {
  padding: 30px 28px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

/* Тёмная половина — первый крупный блок на --ink за всю страницу: контраст
   двух панелей сам по себе показывает, что режимы устроены по-разному. */
.split__side--exam {
  background: var(--ink);
  border-color: transparent;
  color: var(--bg-paper);
}

.split__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-mint) 72%, var(--ink));
  margin-bottom: 8px;
}

.split__side--exam .split__label { color: var(--accent-amber); }

.split__title {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.split__row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  min-height: 58px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.split__side--exam .split__row {
  border-top-color: color-mix(in srgb, var(--bg-paper) 16%, transparent);
}

.split__key {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.split__side--exam .split__key {
  color: color-mix(in srgb, var(--bg-paper) 50%, transparent);
}

.split__val {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.split__side--exam .split__val {
  color: color-mix(in srgb, var(--bg-paper) 90%, transparent);
}

/* ---------- Отдельный экзаменационный файл ---------- */

.upgrade {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding: clamp(28px, 4vw, 42px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.upgrade__head {
  max-width: 640px;
  margin-bottom: clamp(26px, 3vw, 34px);
}

.upgrade__badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-amber) 20%, #FFFFFF);
  color: color-mix(in srgb, var(--accent-amber) 62%, var(--ink));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.upgrade__title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.2;
  margin-bottom: 12px;
}

.upgrade__lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-65);
}

.upgrade__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 32px);
}

.upgrade__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--accent-amber) 16%, #FFFFFF);
  color: color-mix(in srgb, var(--accent-amber) 68%, var(--ink));
}

.upgrade__icon svg { width: 21px; height: 21px; }

.upgrade__name {
  font-size: 1.1rem;
  line-height: 1.3;
  margin-bottom: 8px;
}

.upgrade__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-65);
}

/* ---------- Секция «Агрегатор»: сводная таблица ---------- */

.board {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.board__drop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px dashed color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.board__drop-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--mint-soft);
  color: color-mix(in srgb, var(--accent-mint) 70%, var(--ink));
}

.board__drop-icon svg { width: 19px; height: 19px; }

.board__drop-text {
  font-size: 14px;
  color: var(--ink-65);
}

.board__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.board__chips .flow__file { background: var(--surface); }

.board__more {
  font-size: 12.5px;
  color: var(--ink-45);
}

.board__summary {
  padding: 16px 4px 14px;
  font-size: 14.5px;
  color: var(--ink-65);
}

.board__summary b {
  font-weight: 600;
  color: var(--ink);
}

.board__head,
.board__row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 0.8fr 0.9fr 0.8fr 16px;
  gap: 12px;
  align-items: center;
  text-align: left;
}

.board__head {
  padding: 0 12px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-45);
  border-bottom: 1px solid var(--line);
}

.board__sorted {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-65);
}

.board__sorted svg { width: 11px; height: 11px; }

.board__row {
  width: 100%;
  padding: 13px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s var(--ease-out);
}

.board__row:hover { background: var(--surface-soft); }

.board__cell { font-size: 15px; }

.board__cell--name { font-weight: 600; }

.board__chev {
  width: 12px;
  height: 12px;
  color: var(--ink-45);
  transition: transform 0.3s var(--ease-out);
}

.board__row[aria-expanded="true"] .board__chev { transform: rotate(180deg); }

.board__item + .board__item {
  border-top: 1px solid var(--line);
}

/* Раскрытие через grid-template-rows: 0fr → 1fr — высота считается сама,
   без замеров в JS. Если анимация не отработает, останется конечное
   состояние, то есть раскрытая строка. */
.board__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-out);
}

.board__detail.is-open { grid-template-rows: 1fr; }

.board__detail-inner { overflow: hidden; }

.qline {
  position: relative;
  padding: 10px 12px 10px 34px;
  margin-bottom: 6px;
  border-radius: 9px;
  background: var(--surface-soft);
  font-size: 14px;
}

.qline:last-child { margin-bottom: 12px; }

.qline::before {
  position: absolute;
  left: 12px;
  top: 10px;
  font-weight: 700;
}

.qline--ok::before {
  content: "✓";
  color: var(--accent-mint);
}

.qline--bad::before {
  content: "✕";
  color: var(--accent-coral);
}

.qline__head {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

.qline__body {
  display: block;
  color: var(--ink-65);
}

.pct {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pct--good {
  background: var(--mint-soft);
  color: color-mix(in srgb, var(--accent-mint) 58%, var(--ink));
}

.pct--mid {
  background: color-mix(in srgb, var(--accent-amber) 20%, #FFFFFF);
  color: color-mix(in srgb, var(--accent-amber) 58%, var(--ink));
}

.pct--bad {
  background: var(--coral-soft);
  color: color-mix(in srgb, var(--accent-coral) 72%, var(--ink));
}

.board__caption {
  max-width: 640px;
  margin: 20px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-45);
}

/* ---------- Врезка-примечание ---------- */

.note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 780px;
  margin: clamp(44px, 5vw, 64px) auto 0;
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-coral);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.note__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--coral-soft);
  color: var(--accent-coral);
}

.note__icon svg { width: 20px; height: 20px; }

/* Янтарный вариант — для оговорок «важно понимать», в отличие от кораллового,
   которым отмечено «важно знать» в разделе про файл. */
.note--amber {
  border-left-color: var(--accent-amber);
}

.note--amber .note__icon {
  background: color-mix(in srgb, var(--accent-amber) 18%, #FFFFFF);
  color: color-mix(in srgb, var(--accent-amber) 66%, var(--ink));
}

.note__text {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-65);
}

.note__text strong {
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Финальный блок ---------- */

/* Тёплое пятно как в hero: страница заканчивается тем же светом,
   с которого началась. */
.section--closing {
  position: relative;
  overflow: hidden;
}

.closing__glow {
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 150%;
  pointer-events: none;
  background:
    radial-gradient(42% 40% at 18% 8%, color-mix(in srgb, var(--accent-mint) 16%, transparent), transparent 70%),
    radial-gradient(46% 42% at 86% 30%, color-mix(in srgb, var(--accent-coral) 15%, transparent), transparent 70%),
    radial-gradient(40% 38% at 60% 96%, color-mix(in srgb, var(--accent-amber) 16%, transparent), transparent 72%);
}

.section--closing .container { position: relative; z-index: 1; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 940px;
  margin: 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--mint-line);
  box-shadow: var(--shadow-lift);
}

.card--ghost {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.card--ghost:hover {
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  box-shadow: none;
}

/* Карточка, которая никуда не ведёт: витрина форматов рассказывает, а не
   отправляет по ссылке. Подъём при наведении с неё снят намеренно — движение
   обещает переход, которого нет, и это раздражает сильнее, чем отсутствие
   анимации. Нижняя строка в такой карточке подпись, а не «Открыть», поэтому
   она спокойного цвета. */
.card--static { cursor: default; }
.card--static:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow-soft); }
.card--static.card--ghost:hover { border-color: var(--line); }
.card--static .card__go { color: var(--ink-65); font-weight: 500; }

.card__badge {
  align-self: flex-start;
  padding: 4px 11px;
  margin-bottom: 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card__badge--training {
  background: var(--mint-soft);
  color: color-mix(in srgb, var(--accent-mint) 62%, var(--ink));
}

.card__badge--exam {
  background: color-mix(in srgb, var(--accent-amber) 20%, #FFFFFF);
  color: color-mix(in srgb, var(--accent-amber) 62%, var(--ink));
}

.card__badge--all {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink-65);
}

.card__title {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.card__text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-65);
  margin-bottom: 18px;
}

.card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent-coral);
}

.card__go svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s var(--ease-out);
}

.card:hover .card__go svg { transform: translateX(3px); }

.hello {
  max-width: 620px;
  margin: clamp(40px, 5vw, 60px) auto 0;
  text-align: center;
}

.hello__text {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-80);
  margin-bottom: 22px;
}

.hello__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.btn--quiet {
  background: transparent;
  color: var(--ink-65);
  border: 1px solid var(--line-strong);
}

.btn--quiet:hover {
  color: var(--ink);
  transform: translateY(-2px);
}

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

.footer {
  padding: 26px 0 34px;
  border-top: 1px solid var(--line);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-65);
}

.footer__brand .brand__mark {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}

.footer__brand .brand__mark svg { width: 15px; height: 15px; }

.footer__links {
  font-size: 14.5px;
  color: var(--ink-45);
}

.footer__links a {
  color: var(--ink-65);
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.footer__links a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent-coral);
}

/* ---------- Появление при прокрутке ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}

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

/* ---------- Адаптив ---------- */

@media (max-width: 900px) {
  .problems { grid-template-columns: minmax(0, 1fr); }
  .problem { padding: 24px 22px 26px; }

  .split { grid-template-columns: minmax(0, 1fr); }
  .upgrade__grid { grid-template-columns: minmax(0, 1fr); }

  /* В таблице остаются ученик и результат: дата и время на телефоне
     превращали строку в нечитаемую кашу из четырёх узких колонок. */
  .board__head,
  .board__row {
    grid-template-columns: minmax(0, 1fr) auto 14px;
  }

  .board__head span:nth-child(2),
  .board__head span:nth-child(4),
  .board__row .board__cell:nth-child(2),
  .board__row .board__cell:nth-child(4) {
    display: none;
  }

  .board__chips { margin-left: 0; }

  .cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; }

  /* Выравнивать строки по соседней колонке больше не нужно — панели идут
     одна под другой, и лишняя высота превратилась бы в пустоту. */
  .split__row { min-height: 0; }

  /* В одну колонку выравнивать нечего — запас превратился бы в пустоту. */
  .problem__title { min-height: 0; }

  /* Путь файла разворачивается сверху вниз: горизонтальный пунктир между
     номерами уступает место вертикальному отрезку над именем файла. */
  .flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .flow__step::after { content: none; }

  .flow__pass {
    position: static;
    display: block;
    width: auto;
    height: auto;
    transform: none;
    padding: 16px 0 20px;
  }

  .flow__pass::before {
    content: '';
    display: block;
    width: 0;
    height: 22px;
    margin: 0 auto 12px;
    border-left: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
  }

  .note {
    padding: 20px;
    gap: 14px;
  }
}

@media (max-width: 1000px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .hero__copy { max-width: 640px; }

  /* В одну колонку карточка встаёт по левому краю — иначе она «уезжает»
     от текста и блоки перестают читаться как один экран. */
  .hero__demo { justify-content: flex-start; }
  .qcard { max-width: 560px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }

  .hero__facts { gap: 8px 16px; }

  /* Иконка встаёт над текстом: рядом она отъедала треть и без того узкой
     строки, и текст рвался по два-три слова. */
  .note {
    flex-direction: column;
    gap: 12px;
  }

  /* Названия типов в строку не помещаются, и «пилюля» разваливалась на три
     ряда сама собой. Лучше честный вертикальный список: видны все три типа,
     ничего не прячется за горизонтальную прокрутку. */
  .demo__tabs {
    flex-direction: column;
    border-radius: 16px;
  }

  .demo__tab {
    width: 100%;
    border-radius: 11px;
  }

  .qcard { padding: 20px 16px; }

  /* Тот же приём, что в мобильной вёрстке самого теста: список ответа
     переезжает на свою строку, а не сжимается до нечитаемого. */
  .qcard__head { display: none; }

  .qrow {
    grid-template-columns: 24px minmax(0, 1fr) 22px;
    grid-template-areas:
      "letter item mark"
      "pick   pick pick";
    row-gap: 9px;
  }

  .qrow__letter { grid-area: letter; }
  .qrow__item { grid-area: item; }
  .qrow__pick { grid-area: pick; }
  .qrow__mark { grid-area: mark; }
}

/* ---------- Пониженная анимация ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Содержимое показывается сразу и не едет: убираем не только длительность,
     но и само начальное смещение — иначе блок «прыгнул» бы на месте. */
  .js .reveal {
    opacity: 1;
    transform: none;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .qcard:hover { transform: none; }
}

/* --- Проверка данных ------------------------------------------------------
   Настоящий текст отказа показан как есть: он в проекте написан внятно, и
   пересказывать его «маркетинговым» языком значило бы потерять единственное,
   что здесь убеждает, — что сервис разговаривает по-человечески. */
.checks {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.checks__sample {
  padding: 22px 24px;
  background: var(--coral-soft);
  border: 1px solid color-mix(in srgb, var(--accent-coral) 35%, transparent);
  border-radius: var(--radius-lg);
}

.checks__title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--accent-coral) 75%, var(--ink));
}

.checks__body { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-80); }

.checks__sample code {
  padding: 1px 5px;
  background: color-mix(in srgb, #FFFFFF 70%, transparent);
  border-radius: 5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.checks__list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-80);
}

@media (max-width: 760px) {
  .checks { grid-template-columns: 1fr; gap: 20px; }
}

/* Вторая строка подвала — контакты и каталог: тише основной, чтобы правовые
   ссылки не терялись среди них. */
.footer__links--quiet { font-size: 14px; opacity: 0.7; }

/* Кнопка в шапке. Уменьшенная копия основной: в шапке она соседствует со
   ссылками и в полный рост перевешивала бы всё остальное. */
.btn--small { padding: 9px 16px; font-size: 14.5px; }

.topbar__nav { display: flex; gap: 18px; margin-left: auto; margin-right: 18px; }

@media (max-width: 720px) {
  /* На телефоне из шапки остаётся только кнопка: разделы всё равно листаются
     прокруткой, а три ссылки в строку не помещаются и ломают шапку. */
  .topbar__nav { display: none; }
}

/* --- Правовые страницы ----------------------------------------------------
   Один узкий столбец и крупный текст: эти документы читают целиком, а не
   просматривают. Оформление то же, что на сайте, — правовая страница в чужом
   виде выглядит как страница другого сайта, и доверия это не прибавляет. */
.legal { padding: 48px 0 72px; background: var(--bg-paper); }
.legal__inner { max-width: 720px; }

.legal__title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.15;
  margin: 0 0 8px;
}

.legal__meta { margin: 0 0 28px; font-size: 14.5px; color: var(--ink-45); }

.legal h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  margin: 34px 0 10px;
}

.legal p, .legal li { font-size: 16.5px; line-height: 1.65; color: var(--ink-80); }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--accent-coral); }

.legal code {
  padding: 1px 5px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-radius: 5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

/* Выжимка перед юридическим текстом. Документ, который читают только юристы,
   свою задачу не выполняет: человек должен понять главное, не продираясь
   через все разделы. */
.legal__summary {
  margin: 0 0 32px;
  padding: 22px 24px;
  background: var(--mint-soft);
  border: 1px solid var(--mint-line);
  border-radius: var(--radius-lg);
}

.legal__summary-title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 15px;
  color: color-mix(in srgb, var(--accent-mint) 70%, var(--ink));
}

.legal__summary ul { margin: 0; padding-left: 20px; }
.legal__summary li { margin-bottom: 8px; font-size: 16px; }
.legal__summary li:last-child { margin-bottom: 0; }

.legal__back { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }

/* --- Справка ---------------------------------------------------------------
   Тот же узкий столбец, что у правовых страниц: эти тексты читают подряд, а не
   просматривают. Отличается только оглавление карточками и подача примеров. */
.help-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-80);
  margin: 0 0 28px;
}

.help-up { margin: 0 0 10px; font-size: 14.5px; }
.help-up a { color: var(--ink-45); }
.help-up a:hover { color: var(--accent-coral); }

.help-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 0 0 36px;
}
.help-card {
  display: block;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: inherit;
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out),
    box-shadow .3s var(--ease-out);
}
.help-card:hover {
  border-color: var(--mint-line);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.help-card h2 {
  font-family: var(--font-heading);
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--ink);
}
.help-card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-65); }

/* Таблица «что нужно — что выбрать». Узкий столбец и длинные строки, поэтому
   на телефоне она уезжает вбок внутри себя, а не растягивает страницу. */
.help-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 15.5px;
}
.help-table th,
.help-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.help-table th {
  font-weight: 600;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.help-table td { color: var(--ink-80); }

/* Пример списка слов — моноширинный, с прокруткой вбок вместо переноса:
   перенесённая строка выглядела бы как две записи. */
.help-code {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}

.help ol { margin: 0 0 16px; padding-left: 22px; }
.help ol li { margin-bottom: 8px; font-size: 16.5px; line-height: 1.65; color: var(--ink-80); }