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

/* Страница — обычный поток, а не флекс-колонка редактора */
body.welcome { display: block; overflow: auto; }

/* Кнопки страницы: одна вертикальная метрика на весь лист, иначе рядом
   стоящие кнопки разъезжаются по высоте */
.cta { font-size: 15px; font-weight: 600; height: 50px; padding: 0 26px; }
.cta-2 { font-size: 15px; font-weight: 500; height: 50px; padding: 0 22px; text-decoration: none; }

/* Ссылки — из палитры, а не браузерным синим */
a { color: var(--color-text); text-decoration-color: var(--color-neutral-400); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); text-decoration-color: var(--color-accent-600); }

.gate-remember {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: var(--space-6);
  font-size: 13px; color: var(--color-neutral-800); cursor: pointer;
}
.gate-remember input { width: 16px; height: 16px; accent-color: var(--color-accent); }

/* Ошибка — строкой под подзаголовком. Поля не красим и не трясём: человек
   ошибся в пароле, а не сделал что-то опасное. */
.gate-error { margin-bottom: var(--space-4); font-size: 13px; color: var(--color-accent-600); }
.gate-note { margin-top: var(--space-4); font-size: 12px; line-height: 1.45; color: var(--color-neutral-700); }

/* ---------- Страница «здесь работать не получится» ---------- */
/* Одна конструкция на два состояния: А — браузер не умеет собирать видео,
   Б — мало места для ленты. Разметка и отступы общие, различаются тексты:
   две страницы означали бы два места для правки одного и того же. */

/* overflow задан явно: в продукте у body стоит hidden (редактор не
   прокручивается), а здесь на узком экране текст выше окна. */
.stop { min-height: 100vh; display: flex; flex-direction: column; overflow: auto; background: var(--color-bg); }
.stop-main { flex: 1; display: flex; align-items: center; padding: 0 var(--space-8); }
.stop-inner { width: 100%; max-width: 720px; margin: 0 auto; padding: 64px 0; }
.stop-rule { height: 2px; background: var(--color-text); margin: 0 0 28px; }
.stop-head { font: 500 13px/1 var(--font-body); color: var(--color-neutral-700); }
.stop-title {
  font: var(--font-heading-weight) clamp(30px, 4.6vw, 52px)/1.03 var(--font-heading);
  letter-spacing: -0.04em; max-width: 16ch; margin-bottom: 20px; text-wrap: balance;
}
.stop-lead { font-size: 17px; line-height: 1.5; color: var(--color-neutral-800); max-width: 54ch; margin-bottom: 16px; text-wrap: pretty; }
.stop-do { font-size: 17px; line-height: 1.5; font-weight: 600; max-width: 54ch; margin-bottom: 30px; text-wrap: pretty; }
.stop-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: 34px; }

/* Адрес рядом с кнопкой: его читают глазами, когда копирование не сработало */
.stop-link {
  display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px;
  background: var(--color-neutral-200); font: 500 13px/1 var(--font-body); color: var(--color-neutral-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stop-fine {
  padding-top: 20px; border-top: 1px solid var(--color-neutral-300);
  font-size: 13px; line-height: 1.5; color: var(--color-neutral-700); max-width: 54ch;
}
.stop-fine p { margin: 0 0 6px; }
.stop-fine p:last-child { margin: 0; }

/* Узкое состояние: то же дерево, другие числа */
@media (max-width: 640px) {
  .stop-main { padding: 0 var(--space-6); }
  .stop-inner { padding: 40px 0; }
  .stop-title { font-size: 30px; }
  .stop-lead, .stop-do { font-size: 15px; }
  .stop-actions { display: block; margin-bottom: 30px; }
  .stop-actions .cta { width: 100%; justify-content: center; margin-bottom: 10px; }
  .stop-link { width: 100%; box-sizing: border-box; justify-content: center; }
  .stop-fine { font-size: 12px; }
  /* Номер сборки в шапке не помещается рядом со знаком — на узком остаётся
     только «закрытый тест» */
  .stop-build { display: none; }
}