:root {
  /* Product palette — shared with the course catalogue. */
  --graphite: #343745;
  --graphite-deep: #292c37;
  --milk: #efeeec;
  --white: #ffffff;
  --smoke: #8fa3b0;
  --burgundy: #6e2639;
  --burgundy-dark: #571c2d;
  --border: #d6d5d1;
  --secondary: #6e6e73;
  --secondary-strong: #6b6c71;
  --success: var(--graphite);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-space: clamp(88px, 10vw, 128px);

  /* --ease remains a complete transition value for legacy declarations. */
  --ease: 250ms cubic-bezier(.2, .7, .2, 1);
  --ease-fn: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 220ms;
  --dur-base: 300ms;
  --dur-slow: 420ms;

  /* Движение продукта: длительность описывает задачу, кривая — физику. */
  --motion-press: 110ms;
  --motion-feedback: 240ms;
  --motion-move: 420ms;
  --motion-route: 620ms;
  --motion-spring: cubic-bezier(.32, .72, 0, 1);
  --motion-throw: cubic-bezier(.34, 1.26, .64, 1);
}

[data-motion-press] {
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-press) ease-out;
}

[data-motion-press]:active:not(:disabled) { transform: scale(.975); }

@media (prefers-reduced-motion: reduce) {
  [data-motion-press]:active:not(:disabled) { transform: none; }
}

/* Пометка о бета-режиме в подвале. Одна на все страницы: подвалы у них
   разные, а строка должна выглядеть одинаково.

   grid-column нужен юридическим страницам: там .legal-footer__inner — это
   grid из трёх колонок, и без него надпись вставала во вторую колонку и
   висела слева от центра. Во всех остальных подвалах контейнер обычный
   блок, и это свойство просто игнорируется. */
.beta-notice {
  grid-column: 1 / -1;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 8px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.beta-notice a {
  color: inherit;
  text-underline-offset: 2px;
  /* Название документа не рвётся посередине: перенос — только между частями. */
  white-space: nowrap;
}

/* Разделитель принадлежит предыдущей части, а не следующей: при переносе он
   остаётся в конце строки, а не открывает собой новую. inline-block — чтобы
   подчёркивание ссылки не тянулось на точку. */
.beta-notice > *:not(:last-child)::after {
  content: "·";
  display: inline-block;
  margin-left: 8px;
  color: var(--smoke);
}

/* На телефоне строка в одну не помещается. Вместо случайных переносов
   раскладываем осмысленно: пометка о бете — своей строкой, оба документа —
   следующей. Ссылкам даём вертикальный запас под палец (padding у inline
   расширяет область нажатия, не раздвигая строки). */
@media (max-width: 640px) {
  .beta-notice { font-size: 13px; }
  .beta-notice > .beta-notice__text { flex-basis: 100%; }
  /* Вес селектора не ниже базового правила с :not(:last-child) — иначе
     разделитель остаётся висеть в конце первой строки. */
  .beta-notice > .beta-notice__text:not(:last-child)::after { content: none; }
  .beta-notice a { padding-block: 4px; }
}

/* Баннер согласия оставлен там, где его ждут, — в нижнем углу экрана.
   Ни отступа странице, ни подъёма баннера: и то и другое пробовали, и то и
   другое выглядит сломанным — страница получала пустую полосу под подвалом,
   а поднятый баннер висел посреди экрана. Пока согласие не принято, баннер
   может перекрывать строку со ссылками; документы всё это время доступны по
   ссылке «Подробнее» в самом баннере. */

/* Страницы без собственного подвала (чат, загрузка, профиль) получают
   только эту рамку под плашку. Высота (~68px) держится наравне с шапкой —
   это эталон, по нему выровнены подвалы остальных страниц. */
.beta-footer {
  padding: 24px var(--gutter);
  background: var(--white);
  border-top: 1px solid var(--border);
  color: var(--graphite);
}