/*
 * Лендинг wayzo.tech — токены, шрифты, базовая типографика.
 *
 * Цвета живут только в переменных ниже; правила берут их через var(--…).
 * Литерал цвета вне объявления переменной ловит landing/tool/check.py.
 * Значения — из wayzo-ui/lib/shared/ui/app_theme.dart (_Palette): сайт и
 * приложение красятся одинаково.
 *
 * Правила палитры (как в приложении):
 * - лайм (--accent) — только заливка, текст на нём --on-accent: лаймовый
 *   текст и тонкие линии на светлом фоне дают контраст 1.3:1;
 * - всё тонкое — фокус, ссылки, индикаторы, выделение — фиолетовым (--violet).
 *
 * Тема. Светлая — на :root: макет М5 светлый. Тёмная включается атрибутом
 * data-theme="dark" на любом элементе и действует внутри него (тёмный подвал
 * М5); следовать ли теме системы целиком — решается вёрсткой (Л1).
 */

/* Шрифты — подмножества латиницы и кириллицы, собранные landing/tool/fonts.sh
   из TTF приложения. Manrope — variable, один файл на веса 200–800. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Запасное начертание заголовков на время загрузки (Л3.2): системный
   жирный шрифт, растянутый под ширину Unbounded 900, — заголовок первого
   экрана переносится на столько же строк, и при подмене шрифта страница не
   прыгает (без него h1 на 412 px вырастал с трёх строк до четырёх, CLS
   0,16). Ничего не грузит — local(); нет такого шрифта в системе — берётся
   следующий в стеке. Arial Bold — macOS, iOS, Windows; Roboto Bold —
   Android. size-adjust подобран так, чтобы h1 (ru и en) давал столько же
   строк, сколько в Unbounded, на ширинах окна 320–1440 (совпадает 381 и 374
   из 392); ascent/descent — Unbounded (0,995 / 0,245 em), делённые на
   size-adjust: высота строки у .sticker и вопросов (line-height: normal)
   та же. Unbounded 800 (h3, вопросы — ниже первого экрана) берёт это же
   начертание. unicode-range — ровно символы подмножества Unbounded
   (fonts.sh): символ, которого нет в Unbounded (→ в «Для двоих»), и после
   загрузки берётся из Manrope, а не из растянутого Arial. Пересчёт после
   смены шрифтов или текста h1 — запись Л3.2 в docs/changelog.md. Текст
   (Manrope) запасного не требует: системный шрифт переносит его на те же
   строки. */
@font-face {
  font-family: "Unbounded Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 900;
  size-adjust: 135.5%;
  ascent-override: 73.43%;
  descent-override: 18.08%;
  line-gap-override: 0%;
  unicode-range: U+0020-007E, U+00A0-00B4, U+00B6-00FF, U+0400-045F, U+0490-0491, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+20AC, U+20BD, U+2116, U+2191, U+2193, U+2212;
}

@font-face {
  font-family: "Unbounded Fallback Roboto";
  src: local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 900;
  size-adjust: 140%;
  ascent-override: 71.07%;
  descent-override: 17.5%;
  line-gap-override: 0%;
  unicode-range: U+0020-007E, U+00A0-00B4, U+00B6-00FF, U+0400-045F, U+0490-0491, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+20AC, U+20BD, U+2116, U+2191, U+2193, U+2212;
}

:root {
  color-scheme: light;

  /* Светлая тема — _Palette.light */
  --bg: #F5F5F0;
  --surface: #FFFFFF;
  --text: #141416;
  --muted: #62625D;
  --accent: #C8F547;
  --on-accent: #141416;
  --violet: #6352DB;
  --on-violet: #FFFFFF;
  --soft: #EAEAE3;
  --border: #E3E3DC;
  --photo: #DCDBD4;
  --danger: #B8372C;
  --on-danger: #FFFFFF;
  --scrim: rgba(20, 20, 22, 0.45);
  /* Выделение текста — фиолетовый 30 %, как textSelectionTheme. */
  --selection: rgba(99, 82, 219, 0.3);

  /* Иллюстрации (телефоны со сценами, макет М5) — от темы не зависят:
     рамка телефона и наклейка «Не хочу» всегда графитовые. */
  --graphite: #141416;
  --on-graphite: #F5F5F0;
  /* Вспышка на круглой кнопке деки: лайм 45 % поверх экрана. */
  --accent-glow: rgba(200, 245, 71, 0.45);
  /* Вспышка на кнопке-пилюле: лайм 50 %. */
  --accent-halo: rgba(200, 245, 71, 0.5);
  /* Тёмная панель-поворот историй: второй план на графите. */
  --on-graphite-muted: #A3A39C;
  /* Переписка «До»: свои сообщения — светло-фиолетовым, чужие — --soft. */
  --bubble-me: #E4E0FF;

  /* Радиусы: карточка, панель, поле; пилюля — полный радиус. */
  --radius-card: 30px;
  --radius-panel: 22px;
  --radius-input: 16px;
  --radius-pill: 999px;
  /* Высота кнопки-пилюли, как в приложении. */
  --pill-height: 54px;

  /* Отступы — шаг 4/8/12/16/24/32. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Гарнитуры: Unbounded — вордмарк и заголовки, Manrope — всё остальное. */
  --font-text: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Unbounded", "Unbounded Fallback", "Unbounded Fallback Roboto", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Ширина контейнера на десктопе вместе с полями, как .in в М5. */
  --content-width: 1120px;
  /* Шапка на десктопе вместе с полями: в М5 она по ширине русского
     содержимого — 1012 px + 2 × 40 (знак на 134, край «Начать» на 1146 при
     1280). Закреплена, чтобы края шапки не зависели от языка (Л1.6). */
  --header-width: 1092px;
}

/* Тёмная тема — _Palette.dark. Лайм и текст на нём те же; фиолетовый светлее,
   и текст на нём тёмный: белый на #8B7CFF — 3.3:1. */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #121214;
  --surface: #1D1D21;
  --text: #F4F4F0;
  --muted: #A3A39C;
  --accent: #C8F547;
  --on-accent: #141416;
  --violet: #8B7CFF;
  --on-violet: #121214;
  --soft: #2A2A2F;
  --border: #2C2C31;
  --photo: #333338;
  --danger: #FF8A7D;
  --on-danger: #121214;
  --scrim: rgba(0, 0, 0, 0.6);
  --selection: rgba(139, 124, 255, 0.3);

  background: var(--bg);
  color: var(--text);
}

/* База */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

::selection {
  background: var(--selection);
}

/* Типографика — как в макете М5: Unbounded 900/800, плотная разрядка.
   Размеры плавают между телефоном (390) и десктопом (1280) и на этих двух
   ширинах совпадают с артбордами. */

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 900;
  line-height: 1.02;
}

h2 {
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 900;
  line-height: 1.06;
}

h3 {
  font-size: clamp(22px, 3vw, 26px);
  font-weight: 800;
  line-height: 1.15;
}

p {
  margin: 0;
}

/* Лаймовый маркер под словами — заливка, текст на ней графитовый. */
.mk {
  padding: 0 0.06em;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 0.5em;
  background-position: 0 92%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lead {
  color: var(--muted);
  font-size: 21px;
  font-weight: 500;
}

.note {
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

/* Ссылки и фокус — фиолетовым: лайм тонкой линией на светлом не виден. */
a {
  color: var(--violet);
}

a:hover {
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

/* Фокус с клавиатуры прокручивает к элементу вместе с кольцом: без запаса
   браузер ставит цель вплотную к краю окна, и кольцо (2 + 2 px) уходит за
   край (Л3.2). */
a,
button,
summary {
  scroll-margin-block: 8px;
}

/* Зона нажатия не меньше 44 px у мелких ссылок (Л3.2): невидимый ::after
   растягивает цель вокруг ссылки — вид и раскладка те же, а палец рядом с
   текстом попадает. Растяжка меньше половины зазора до соседней цели:
   меню и подвал — 28 px между ссылками, «Начать» — 28 px справа от EN. */
.brand,
.menu a,
.lang a,
.ghost,
.foot .links a {
  position: relative;
}

.brand::after,
.menu a::after,
.lang a::after,
.ghost::after,
.foot .links a::after {
  position: absolute;
  inset: -12px 0;
  content: "";
}

/* Отступ ::after считается от края под рамкой: у заглушек подвала с
   пунктиром снизу зона на 1 px меньше — 45,5 px. Знак — 40 px высотой.
   Ссылка языка — 31,5 × 39 px: вверх-вниз и наружу от пилюли, но не на
   соседний чип текущего языка — иначе нажатие у его края уводит на другую
   страницу: EN на русской стоит справа (растёт вправо), RU на английской —
   слева (растёт влево). «или по QR-коду» и «Открыть в Telegram ↗» в
   фиче — 26 px вместе с подчёркиванием. Отступы подобраны под нынешние
   размеры: другой шрифт или кегль — перемерить зоны. */
.brand::after {
  inset: -2px 0;
}

.lang a::after {
  inset: -7px -6px -7px 0;
}

.lang a:first-child::after {
  inset: -7px 0 -7px -6px;
}

.ghost::after {
  inset: -10px 0;
}

/* Вордмарк — строчные «wayzo» в Unbounded 900, как root_header.dart. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--text);
}

/* Каркас страницы. Секция и контейнер — разные элементы: .sec даёт
   вертикальные отступы, .wrap внутри — ширину и поля (урок макетов: класс
   контейнера на самой секции перебивал её отступы). */

.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 40px;
}

.sec {
  padding: 104px 0;
}

.sec.first {
  padding: 56px 0 96px;
}

/* Шапка (М5) — одна на всех страницах: знак с подписью, якоря, RU/EN,
   «Начать». На десктопе коробка — ширины русской шапки М5 по центру (линия
   под шапкой чуть короче колонки) на обоих языках: английское меню короче,
   и лишнее место делится между элементами (space-between), а не сдвигает
   знак внутрь. min-width — если содержимое всё же шире (другой шрифт),
   коробка растёт, как по содержимому в М5. На телефоне — по содержимому
   (ниже, до 760 px). */
.site-top {
  min-width: fit-content;
  max-width: var(--header-width);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  height: 84px;
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}

.brand .wordmark {
  display: block;
  font-size: 24px;
  line-height: 1;
}

.brand small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* Монограмма: wz.svg красит пути в currentColor. */
.mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--graphite);
  color: var(--accent);
}

.mark svg {
  width: 34px;
  height: 34px;
}

.menu {
  display: flex;
  gap: 28px;
  font-size: 15px;
  font-weight: 700;
}

.menu a {
  color: var(--text);
  text-decoration: none;
}

.menu a:hover {
  color: var(--violet);
}

/* Переключатель языка: текущий — графитовая заливка, другой — ссылка. */
.lang {
  display: flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
}

.lang > * {
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  color: var(--text);
  text-decoration: none;
}

.lang .on {
  background: var(--text);
  color: var(--bg);
}

/* Кнопки. Графитовая пилюля, на наведении — лайм; .lime — наоборот. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--pill-height);
  padding: 0 28px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--bg);
  font: 800 16px var(--font-text);
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.btn.lime {
  background: var(--accent);
  color: var(--on-accent);
}

.btn.lime:hover {
  background: var(--text);
  color: var(--bg);
}

.btn.sm {
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
}

/* Ссылка-подсказка рядом с кнопкой: графитовый текст, лаймовое подчёркивание
   2 px — как в М5; ссылку узнают по тексту, линия — украшение. */
.ghost {
  border-bottom: 2px solid var(--accent);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

/* Пилюли сторов «скоро» (В13, макет М5): «App Store», «RuStore»,
   «Google Play» и метка «скоро». Свои — без официальных бейджей и логотипов
   сторов: те появятся, когда приложение будет в сторе. Нажатие считается
   (data-cta, Л2.2), поэтому пилюля — <button type="button"> или <a>; стили
   одинаковы для обоих. Пример разметки — tool/samples.html. */
.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--pill-height);
  margin: 0;
  padding: 0 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font: 700 15px/1 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.soon-tag {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

/* Кнопки по платформе. site.js ставит на <html> data-platform: ios,
   android или other (десктоп); элемент с data-show виден только на своих
   платформах (через пробел). Без JS атрибута нет — видно всё. */
html[data-platform="other"] [data-show]:not([data-show~="desktop"]),
html[data-platform="ios"] [data-show]:not([data-show~="ios"]),
html[data-platform="android"] [data-show]:not([data-show~="android"]) {
  display: none;
}

/* Первый экран (М5): слева текст, справа телефон с наклейками. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 48px;
  align-items: center;
}

.hero .copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.hero .lead {
  max-width: 36ch;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0;
  padding: 0;
  list-style: none;
}

.steps li {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.steps i {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
}

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

/* Телефон. Экран — снимки мини-аппа со стенда (Л3.4, Л4.3а, Л4.4а): экран
   390×844 (группы — 390×1005), светлая тема, настоящие фото мест; файлы —
   780 px в ширину у первого экрана (телефон 300) и 520 px у телефонов 260
   ниже. Поверх снимков нарисованы только вспышки нажатий, рамки, ореолы и
   спиннер ожидания (сцены — ниже). */
.scene {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0;
}

.phone {
  flex: none;
  /* 300 px, но не шире колонки: на планшете колонка уже телефона. */
  width: min(300px, 85%);
  padding: 10px;
  border-radius: 42px;
  background: var(--graphite);
}

.scene .phone {
  transform: rotate(4deg);
}

.phone .screen {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: var(--bg);
}

/* Снимки экрана группы выше остальных (390×1005: в третьей фиче он
   прокручивается и ниже края экрана есть что показать); в кадре 390×844 он
   срезается снизу. */
.screen > img,
.layer > img {
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top;
}

.layer {
  position: absolute;
  inset: 0;
}

/* Наклейки «Хочу» / «Не хочу» по краям телефона. */
.sticker {
  position: absolute;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--on-accent);
  font: 900 22px var(--font-display);
  letter-spacing: -0.02em;
}

.sticker.yes {
  left: 0;
  top: 170px;
  transform: rotate(-9deg);
}

.sticker.no {
  right: 0;
  bottom: 120px;
  background: var(--graphite);
  color: var(--on-graphite);
  transform: rotate(7deg);
}

/* Сцены на телефонах (Л4.3б): стопка снимков стенда внутри .screen.
   Нижний снимок стоит в потоке и задаёт размер экрана; слои над ним по
   умолчанию прозрачны, так что без анимации (prefers-reduced-motion) виден
   целый экран — базовое состояние сцены. Слои включает и гасит свой набор
   @keyframes у каждой сцены (проценты посчитаны из секунд, без
   animation-delay — FREEZE в dcrender.py показывает кадр на любой секунде).
   Паузы между действиями — не короче 0,8 с («Совпало!» — 2 с): по слову
   заказчика 18.10 они в полтора раза короче первой сборки, движения
   (вспышки, полёт карточки, затухания, прокрутка) — прежние.
   Между экранами — затухание 0,4 с; мгновенно слой меняется, только когда
   это не видно: под ним те же пиксели (карточка деки над своим снимком) или
   он закрыт другим слоем. Имена слоёв — по роли: deck1–deck4 — ленты деки,
   c1–c4 — их карточки, sw — переключатель групп, notif — уведомления, grp и
   grp2 — группа после голоса, brought — после «Принести место», match —
   «Совпало!», detail — подробности карточки, talk и cal — вкладки «Чат» и
   «Календарь» группы, bring и wait — «Принести место» и ожидание (с
   номером — вторая и третья ссылка первой фичи), date0, date и time —
   выбор дня и времени. Снимки у каждой секции свои (решение В17): первый
   экран — набор A, «Пятница» с «Крышей на Китай-городе» (S1–S4, S6,
   A1–A3); фича 1 — общий набор: «Крыша», «Веранда на Хохловке», «Кофейня
   Скуратов» (S7, S8, S12, S13, F1–F4); «После» — набор B, «Пятница» с
   «Крафтом», «Караоке» и «Квизом» (B1–B8, S12, S13); фича 2 — набор C,
   «Коллеги» с «Лапшичной» и «Катком» (C1–C6); фича 3 — набор D, «Семья» с
   «Лекцией про кино» (D1–D4); «Совпало. Теперь выбираем день» — «Веранда»
   в «Пятнице» (S8–S11). Л4.4б расширила сцены (раскадровка Л4.4): паузы и
   движения — как в Л4.3, новых только шаги. Слой, который целиком закрыл
   непрозрачный слой выше, гаснет (opacity 0), а включается снова, пока
   ещё закрыт, — меньше перерисовки, а кадр тот же; так же — нижний снимок в
   потоке (в первой фиче он закрыт всегда и в анимации не виден вовсе). Что
   на каком слое — в комментарии сцены. */
.phone .screen > .layer {
  opacity: 0;
}

/* Группа третьей фичи — нижний слой, а не снимок в потоке: рамка и вспышка
   на «Голосовать» лежат в нём же. */
.phone .screen > .list {
  opacity: 1;
}

/* Нижний снимок первого экрана и карточки c1 и c4 — на своих слоях
   компоновки: c1 («Крыша») мгновенно включается над нижним снимком, c4
   («Завтраки») — над своей лентой deck4, и без этого картинка
   «вздрагивала» — один и тот же снимок растрируется по-разному на слое и в
   потоке (Л4.4б: с ними кадры до и после включения совпадают пиксель в
   пиксель). Во второй фиче возврата к подробностям слоем больше нет: сцена
   кончается группой, которая гаснет. */
.scene .screen > img,
.scene .c1 > img,
.scene .c4 > img {
  will-change: opacity;
}

/* Карточка деки — тот же снимок ленты, вырезанный по карточке: она
   улетает, а под ней уже лежит следующий экран целиком (низ карточки под
   кнопками и шапка меняются вместе с ним). Вырез до 79,4 % высоты: верх
   кольца кнопки-сердца на снимке — 79,7 %, и с низом 80 % его белая кромка
   уезжала с карточкой. Скругление — 30 pt, как у карточки в приложении:
   7,7 % ширины и 3,55 % высоты экрана. */
.phone .cardlayer {
  clip-path: inset(14.5% 4.1% 20.6% 4.1% round 7.7% / 3.55%);
  transform-origin: 50% 90%;
}

/* Вспышка перед нажатием круглой кнопки деки: .ph — сердце, .px —
   крестик (центры на снимке — 69,7 % и 28,2 % ширины, 84,8 % высоты). */
.phone .pulse {
  position: absolute;
  left: 69.7%;
  top: 84.8%;
  width: 21%;
  aspect-ratio: 1;
  border: 4px solid var(--graphite);
  border-radius: 50%;
  background: var(--accent-glow);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

.phone .pulse.px {
  left: 28.2%;
}

/* Вспышка на кнопке-пилюле: лаймовый ореол с графитовой каймой, чуть
   больше кнопки. Где кнопка — у каждой сцены своё. */
.phone .tap {
  position: absolute;
  border: 3px solid var(--graphite);
  border-radius: var(--radius-pill);
  background: var(--accent-halo);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}

/* Пауза вне экрана (site.js): с IntersectionObserver на <html> стоит класс
   io, а у телефона и переписки «До», пока они у экрана (с запасом 200 px), —
   on. Остальные анимации стоят на месте и не держат компоновку; дойдя до
   экрана, сцена идёт дальше с того же кадра. Без JS и без
   IntersectionObserver класса io нет — всё крутится всегда. Чипы
   источников первой фичи подсвечиваются в такт её телефону — on у .feat
   ставится вместе с телефоном, и пауза у них общая. */
html.io .scene:not(.on) *,
html.io .phone.sm:not(.on) *,
html.io .phone.sm:not(.on) *::before,
html.io .chat:not(.on) *,
html.io .feat:not(.on) .src li::before {
  animation-play-state: paused;
}

/* Рамка на строке экрана группы: лаймовая, с графитовой каймой внутри. */
.phone .ring {
  position: absolute;
  left: 3%;
  right: 3%;
  border: 3px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 0 0 2px var(--graphite) inset;
  opacity: 0;
}

/* На группе после голоса рамка обводит первую строку под
   «Совпало — выберите день · 2» — появившуюся там «Крышу» (S6, первый экран)
   или «Квиз по четвергам» (B6, «После»): на обоих снимках строка —
   51,2–60,1 % высоты экрана, следующая — с 61,6 %. Заголовок над рамкой: он
   начинается у самого края карточек, и рамка вокруг него наезжала на первую
   букву. */
.grp .ring {
  top: 50.6%;
  height: 10.1%;
}

/* Сцена первого экрана, цикл 23,4 с — три шага из текста слева и то, что
   вокруг них: чью деку листаем и новая карточка в уведомлениях (Л4.4б).
   Слои снизу вверх: лента с «Крышей» (S1, в потоке), deck2 — «Выставка»
   (S2), deck3 — «Может кофе?» (S3), notif — уведомления (A2), deck4 —
   «Завтраки на Покровке» сверху (A3), grp — группа после голоса (S6),
   карточки c3, c4, c2, c1, sw — переключатель групп (A1), «Совпало!»
   (S4), вспышки. Базовое состояние — лента с «Крышей».
     0,0– 1,4  лента: «Крыша на Китай-городе», 2 из 4 за
     0,8– 1,85 вспышка на «Пятница · 4» в шапке
     1,4– 1,8  проявляется «Чью деку листаем?»: Пятница, Коллеги, Семья
     1,8– 3,3  переключатель — 1,5 с; 2,7–3,75 вспышка на строке «Пятница»
     3,3– 3,7  переключатель гаснет — снова лента с «Крышей»
     4,3– 5,35 вспышка на сердце
     4,9– 5,6  «Хочу» подпрыгивает, «Крыша» улетает вправо; под ней лента
               с «Выставкой» (шапка: точка на колокольчике, «Чаты 3»)
     5,6– 6,0  проявляется «Совпало!»
     6,0– 8,7  «Совпало!», 3 из 4 в группе за — 2,7 с
     8,7– 9,1  «Совпало!» гаснет: «Выставка Тарковского», 1 из 4
     9,1–10,3  раздумье (1,2 с); 9,7–10,75 вспышка на крестике
    10,3–11,0  «Не хочу» подпрыгивает, «Выставка» улетает влево; под ней
               «Может кофе?», 0 из 4
    11,6–12,65 вспышка на колокольчике
    12,2–12,6  проявляются уведомления: «Новая карточка · Аня предлагает…
               Завтраки на Покровке», «Совпадение… Веранда на Хохловке»,
               «Через час · Кофейня Скуратов»
    12,6–14,6  уведомления — 2 с
    14,6–15,0  дека: сверху новая карточка «Завтраки на Покровке», 1 из 4
    15,6–16,65 вспышка на сердце
    16,2–16,9  «Хочу» подпрыгивает, «Завтраки» улетают вправо; под ними
               снова «Может кофе?» (лента вокруг карточки — затуханием)
    17,5–18,55 вспышка на сердце
    18,1–18,8  «Хочу» подпрыгивает, «Может кофе?» улетает вправо; под ней
               проявляется группа «Пятница» после голоса (18,1–18,5)
    20,0–20,3  рамка на «Крыше» — первой под «Совпало — выберите день · 2»
    20,3–22,3  рамка держится 2 с
    22,3–22,7  группа с рамкой гаснет — снова лента с «Крышей»
    22,8       карточка «Крыши» снова над лентой (те же пиксели) — стык
   Вспышки (центр и размер — от экрана 390 × 844): «Пятница · 4» — пилюля
   шапки, 76 % / 4,3 %, пилюля 39,7 % × 4,4 %; строка «Пятница» листа —
   49,9 % / 68,7 %, плашка 93,7 % × 7,5 %; колокольчик — круг по центру
   значка, 49 % / 4,3 %. Точка на колокольчике — уже на S2 и S3, след
   совпадения «Крыши», а не новой карточки. */
.scene .screen > *,
.scene .ring,
.scene .sticker {
  animation-duration: 23.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.scene .screen > img { animation-name: h-base; }
.scene .sw { animation-name: h-sw; }
.scene .deck2 { animation-name: h-deck2; }
.scene .deck3 { animation-name: h-deck3; }
.scene .notif { animation-name: h-notif; }
.scene .deck4 { animation-name: h-deck4; }
.scene .grp { animation-name: h-grp; }
.scene .ring { animation-name: h-ring; }
.scene .c4 { animation-name: h-c4; }
.scene .c3 { animation-name: h-c3; }
.scene .c2 { animation-name: h-c2; }
.scene .c1 { animation-name: h-c1; }
.scene .match { animation-name: h-match; }
.scene .pulse.ph { animation-name: h-ph; }
.scene .pulse.px { animation-name: h-px; }
.scene .sticker.yes { animation-name: h-yes; }
.scene .sticker.no { animation-name: h-no; }

.scene .pulse.pb {
  left: 49%;
  top: 4.3%;
  width: 12%;
  animation-name: h-pb;
}

.scene .tap.tg {
  left: 76%;
  top: 4.3%;
  width: 42.5%;
  height: 5.4%;
  animation-name: h-tg;
}

.scene .tap.tr {
  left: 49.9%;
  top: 68.7%;
  width: 96%;
  height: 8.3%;
  border-radius: 12px;
  animation-name: h-tr;
}

@keyframes h-base {
  0%, 7.91% { opacity: 1; }
  8.12%, 13.89% { opacity: 0; }
  14.1%, 22.44% { opacity: 1; }
  22.65%, 95.09% { opacity: 0; }
  95.3%, 100% { opacity: 1; }
}

@keyframes h-tg {
  0%, 3.42% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  4.7% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  5.77% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  7.69% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  7.91%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes h-sw {
  0%, 5.98% { opacity: 0; }
  7.69%, 14.1% { opacity: 1; }
  15.81%, 100% { opacity: 0; }
}

@keyframes h-tr {
  0%, 11.54% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  12.82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  13.89% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  15.81% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  16.03%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes h-c1 {
  0%, 7.91% { opacity: 1; transform: none; }
  8.12%, 13.68% { opacity: 0; transform: none; }
  13.89% { opacity: 1; transform: none; }
  20.94% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  23.93% { opacity: 1; transform: translate(120%, -6%) rotate(14deg); }
  24.15% { opacity: 0; transform: translate(120%, -6%) rotate(14deg); }
  24.36%, 97.22% { opacity: 0; transform: none; }
  97.44%, 100% { opacity: 1; transform: none; }
}

@keyframes h-deck2 {
  0%, 20.94% { opacity: 0; }
  22.22%, 25.85% { opacity: 1; }
  26.07%, 36.75% { opacity: 0; }
  36.97%, 45.51% { opacity: 1; }
  45.73%, 100% { opacity: 0; }
}

@keyframes h-c2 {
  0%, 20.94% { opacity: 0; transform: none; }
  21.15%, 25.85% { opacity: 1; transform: none; }
  26.07%, 36.75% { opacity: 0; transform: none; }
  36.97% { opacity: 1; transform: none; }
  44.02% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  47.01% { opacity: 1; transform: translate(-120%, -6%) rotate(-14deg); }
  47.22% { opacity: 0; transform: translate(-120%, -6%) rotate(-14deg); }
  47.44%, 100% { opacity: 0; transform: none; }
}

@keyframes h-match {
  0%, 23.93% { opacity: 0; }
  25.64%, 37.18% { opacity: 1; }
  38.89%, 100% { opacity: 0; }
}

@keyframes h-deck3 {
  0%, 44.02% { opacity: 0; }
  45.3%, 54.06% { opacity: 1; }
  54.27%, 68.8% { opacity: 0; }
  69.02%, 79.27% { opacity: 1; }
  79.49%, 100% { opacity: 0; }
}

@keyframes h-pb {
  0%, 49.57% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  50.85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  51.92% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.15); }
  53.85% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  54.06%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes h-notif {
  0%, 52.14% { opacity: 0; }
  53.85%, 64.32% { opacity: 1; }
  64.53%, 100% { opacity: 0; }
}

@keyframes h-deck4 {
  0%, 62.39% { opacity: 0; }
  64.1%, 69.23% { opacity: 1; }
  70.51%, 100% { opacity: 0; }
}

@keyframes h-c4 {
  0%, 64.53% { opacity: 0; transform: none; }
  64.74% { opacity: 1; transform: none; }
  69.23% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  72.22% { opacity: 1; transform: translate(120%, -6%) rotate(14deg); }
  72.44% { opacity: 0; transform: translate(120%, -6%) rotate(14deg); }
  72.65%, 100% { opacity: 0; transform: none; }
}

@keyframes h-c3 {
  0%, 69.23% { opacity: 0; transform: none; }
  69.44% { opacity: 1; transform: none; }
  77.35% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  80.34% { opacity: 1; transform: translate(120%, -6%) rotate(14deg); }
  80.56% { opacity: 0; transform: translate(120%, -6%) rotate(14deg); }
  80.77%, 100% { opacity: 0; transform: none; }
}

@keyframes h-grp {
  0%, 77.35% { opacity: 0; }
  79.06%, 95.3% { opacity: 1; }
  97.01%, 100% { opacity: 0; }
}

@keyframes h-ring {
  0%, 85.47% { opacity: 0; }
  86.75%, 97.01% { opacity: 1; }
  97.22%, 100% { opacity: 0; }
}

@keyframes h-ph {
  0%, 18.38% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  19.66% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  20.73% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.15); }
  22.65% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  22.86%, 66.67% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  67.95% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  69.02% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.15); }
  70.94% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  71.15%, 74.79% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  76.07% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  77.14% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.15); }
  79.06% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  79.27%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes h-px {
  0%, 41.45% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  42.74% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  43.8% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.15); }
  45.73% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  45.94%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes h-yes {
  0%, 20.94% { transform: rotate(-9deg) scale(1); }
  22.01% { transform: rotate(-9deg) scale(1.15); }
  23.29%, 69.23% { transform: rotate(-9deg) scale(1); }
  70.3% { transform: rotate(-9deg) scale(1.15); }
  71.58%, 77.35% { transform: rotate(-9deg) scale(1); }
  78.42% { transform: rotate(-9deg) scale(1.15); }
  79.7%, 100% { transform: rotate(-9deg) scale(1); }
}

@keyframes h-no {
  0%, 44.02% { transform: rotate(7deg) scale(1); }
  45.09% { transform: rotate(7deg) scale(1.15); }
  46.37%, 100% { transform: rotate(7deg) scale(1); }
}

/* Истории «Для двоих» и «Для компании» (М5): заголовок с подзаголовком,
   две панели одной высоты, тёмная панель-поворот, строка под ней. Секция
   идёт сразу за предыдущей — верхний отступ даёт нижний отступ той; чтобы
   по якорю из шапки заголовок не вставал вплотную к краю окна, — отступ
   прокрутки. */
.sec.flush {
  padding-top: 0;
  scroll-margin-top: 24px;
}

/* 56ch — как в М5, где ширина «0» берётся от веса 400; от веса 500 тела
   страницы колонка выходила на 15 px шире, и подзаголовок «Создайте группу»
   переносился не так. Заголовок и подзаголовок задают свой вес сами. */
.head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 56ch;
  margin: 0 0 44px;
  font-weight: 400;
}

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

/* «Для двоих»: три дня в ряд (правка текстов 18.10.2026), на телефоне —
   столбиком, как .grid2. */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* «Для двоих», вход (Л4.4б): один раз, дни появляются по одному — через
   0,35 с, снизу на 12 px, — затем строки тёмной панели, тоже по одной.
   На десктопе секция видна целиком, и вход — лесенкой от on у
   #couple .wrap (site.js: верх блока выше нижних 15 % окна). На телефоне
   (до 760 px) дни стоят столбиком на два экрана, и у каждого дня и у
   тёмной панели свой on — когда блок показался хотя бы на 30 %: день
   проявляется сам, строки панели — лесенкой. Без JS, без
   IntersectionObserver и при prefers-reduced-motion всё видно сразу: до
   входа блоки прячутся, только когда стоит html.io и движение разрешено. */
#couple .grid3 > .panel,
#couple .turn > p,
#couple .turn > span > span {
  animation-duration: 2.6s;
  animation-timing-function: ease-out;
}

@media screen and (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  html.io #couple .wrap:not(.on) .grid3 > .panel,
  html.io #couple .wrap:not(.on) .turn > p,
  html.io #couple .wrap:not(.on) .turn > span > span {
    opacity: 0;
  }
}

@media (min-width: 761px) {
  #couple .wrap.on .grid3 > :nth-child(1) { animation-name: in1; }
  #couple .wrap.on .grid3 > :nth-child(2) { animation-name: in2; }
  #couple .wrap.on .grid3 > :nth-child(3) { animation-name: in3; }
  #couple .wrap.on .turn > p { animation-name: in4; }
  #couple .wrap.on .turn > span > :nth-child(1) { animation-name: in5; }
  #couple .wrap.on .turn > span > :nth-child(2) { animation-name: in6; }
  #couple .wrap.on .turn > span > :nth-child(3) { animation-name: in7; }
}

@media screen and (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  html.io #couple .grid3 > .panel:not(.on),
  html.io #couple .turn:not(.on) > p,
  html.io #couple .turn:not(.on) > span > span {
    opacity: 0;
  }
}

@media (max-width: 760px) {
  #couple .grid3 > .panel.on { animation-name: in1; }
  #couple .turn.on > p { animation-name: in1; }
  #couple .turn.on > span > :nth-child(1) { animation-name: in2; }
  #couple .turn.on > span > :nth-child(2) { animation-name: in3; }
  #couple .turn.on > span > :nth-child(3) { animation-name: in4; }
}

@keyframes in1 {
  0% { opacity: 0; transform: translateY(12px); }
  19.23%, 100% { opacity: 1; transform: none; }
}

@keyframes in2 {
  0%, 13.46% { opacity: 0; transform: translateY(12px); }
  32.69%, 100% { opacity: 1; transform: none; }
}

@keyframes in3 {
  0%, 26.92% { opacity: 0; transform: translateY(12px); }
  46.15%, 100% { opacity: 1; transform: none; }
}

@keyframes in4 {
  0%, 40.38% { opacity: 0; transform: translateY(12px); }
  59.62%, 100% { opacity: 1; transform: none; }
}

@keyframes in5 {
  0%, 53.85% { opacity: 0; transform: translateY(12px); }
  73.08%, 100% { opacity: 1; transform: none; }
}

@keyframes in6 {
  0%, 67.31% { opacity: 0; transform: translateY(12px); }
  86.54%, 100% { opacity: 1; transform: none; }
}

@keyframes in7 {
  0%, 80.77% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
}

.panel > .who {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.big {
  font: 800 26px/1.2 var(--font-display);
  letter-spacing: -0.02em;
}

.panel .txt {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

/* Поворот: графитовая панель, слово-маркер — лаймовым текстом (на графите
   лайм контрастный, заливка не нужна). */
.turn {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 32px;
  align-items: center;
  margin-top: 20px;
  padding: 40px 44px;
  border-radius: 24px;
  background: var(--graphite);
  color: var(--on-graphite);
}

.turn p {
  font: 900 30px/1.15 var(--font-display);
  letter-spacing: -0.025em;
}

.turn .mk {
  padding: 0;
  background: none;
  color: var(--accent);
}

.turn > span {
  color: var(--on-graphite-muted);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

/* Строки «Вторник / Четверг / Суббота» — по элементу на строку: в «Для
   двоих» они появляются по одной. */
.turn > span > span {
  display: block;
}

.slogan {
  margin-top: 40px;
  font: 800 26px/1.3 var(--font-display);
  letter-spacing: -0.02em;
}

.line {
  margin-top: 40px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 600;
}

/* «До»: переписка; итог прижат к низу панели. */
.chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

.msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--soft);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.msg.me {
  align-self: flex-end;
  background: var(--bubble-me);
}

.msg small {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
}

.day {
  align-self: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.sum {
  margin-top: auto;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

/* «После»: телефон с экраном группы целиком, отступы панели — как у
   остальных. В М5 низ телефона подрезан панелью; по слову заказчика
   18.10.2026 подрезки нет — в сцене (Л4.3б) внизу экрана кнопки деки и
   «Выбрать дату». Панель «До» тянется до той же высоты, итог в ней прижат
   к низу (.sum). */
.shot {
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.shot > .who {
  align-self: flex-start;
}

.phone.sm {
  width: min(260px, 100%);
  padding: 8px;
  border-radius: 38px;
}

.phone.sm .screen {
  border-radius: 30px;
}

/* Переписка, цикл 10 с: сообщения появляются по одному (каждые 0,7 с),
   держатся до 86 % и гаснут вместе. Базовое состояние — все видны, «ещё 35
   сообщений», без «печатает». Когда все сообщения на месте (Л4.4б),
   счётчик тикает 35 → 40 раз в 0,5 с (4,7–6,7 с), а под перепиской «Лена
   печатает» с тремя точками (4,4–7,5 с). Числа 35–40 лежат стопкой в одной
   клетке сетки — ширина по самому широкому, цифры моноширинные, видно одно;
   к следующему кругу (9,5 с) снова 35. */
.chat > * {
  animation-duration: 10s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.chat > :nth-child(1) { animation-name: pop1; }
.chat > :nth-child(2) { animation-name: pop2; }
.chat > :nth-child(3) { animation-name: pop3; }
.chat > :nth-child(4) { animation-name: pop4; }
.chat > :nth-child(5) { animation-name: pop5; }
.chat > :nth-child(6) { animation-name: pop6; }
.chat > .typing { animation-name: typing; }

.day .n {
  display: inline-grid;
  font-variant-numeric: tabular-nums;
}

.day .n > * {
  grid-area: 1 / 1;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

.day .n > :not(:first-child) {
  opacity: 0;
}

.day .n > :nth-child(1) { animation-name: n35; }
.day .n > :nth-child(2) { animation-name: n36; }
.day .n > :nth-child(3) { animation-name: n37; }
.day .n > :nth-child(4) { animation-name: n38; }
.day .n > :nth-child(5) { animation-name: n39; }
.day .n > :nth-child(6) { animation-name: n40; }

/* «Лена печатает» — строкой под перепиской, слева, как у входящих; три
   точки мигают по очереди. Место под строку занято всегда (без анимации она
   прозрачная), так что раскладка не прыгает. */
.typing {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  padding-left: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
}

.typing i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.typing i:first-of-type {
  margin-left: 2px;
}

.typing i:nth-of-type(1) { animation-name: dot1; }
.typing i:nth-of-type(2) { animation-name: dot2; }
.typing i:nth-of-type(3) { animation-name: dot3; }

@keyframes pop1 {
  0%, 3% { opacity: 0; transform: translateY(8px); }
  7% { opacity: 1; transform: none; }
  86% { opacity: 1; transform: none; }
  94% { opacity: 0; transform: none; }
  100% { opacity: 0; transform: translateY(8px); }
}

@keyframes pop2 {
  0%, 10% { opacity: 0; transform: translateY(8px); }
  14% { opacity: 1; transform: none; }
  86% { opacity: 1; transform: none; }
  94% { opacity: 0; transform: none; }
  100% { opacity: 0; transform: translateY(8px); }
}

@keyframes pop3 {
  0%, 17% { opacity: 0; transform: translateY(8px); }
  21% { opacity: 1; transform: none; }
  86% { opacity: 1; transform: none; }
  94% { opacity: 0; transform: none; }
  100% { opacity: 0; transform: translateY(8px); }
}

@keyframes pop4 {
  0%, 24% { opacity: 0; transform: translateY(8px); }
  28% { opacity: 1; transform: none; }
  86% { opacity: 1; transform: none; }
  94% { opacity: 0; transform: none; }
  100% { opacity: 0; transform: translateY(8px); }
}

@keyframes pop5 {
  0%, 31% { opacity: 0; transform: translateY(8px); }
  35% { opacity: 1; transform: none; }
  86% { opacity: 1; transform: none; }
  94% { opacity: 0; transform: none; }
  100% { opacity: 0; transform: translateY(8px); }
}

@keyframes pop6 {
  0%, 38% { opacity: 0; transform: translateY(8px); }
  42% { opacity: 1; transform: none; }
  86% { opacity: 1; transform: none; }
  94% { opacity: 0; transform: none; }
  100% { opacity: 0; transform: translateY(8px); }
}

@keyframes typing {
  0%, 44% { opacity: 0; }
  47%, 72% { opacity: 1; }
  75%, 100% { opacity: 0; }
}

@keyframes n35 {
  0%, 46.9% { opacity: 1; }
  47%, 94.9% { opacity: 0; }
  95%, 100% { opacity: 1; }
}

@keyframes n36 {
  0%, 46.9% { opacity: 0; }
  47%, 51.9% { opacity: 1; }
  52%, 100% { opacity: 0; }
}

@keyframes n37 {
  0%, 51.9% { opacity: 0; }
  52%, 56.9% { opacity: 1; }
  57%, 100% { opacity: 0; }
}

@keyframes n38 {
  0%, 56.9% { opacity: 0; }
  57%, 61.9% { opacity: 1; }
  62%, 100% { opacity: 0; }
}

@keyframes n39 {
  0%, 61.9% { opacity: 0; }
  62%, 66.9% { opacity: 1; }
  67%, 100% { opacity: 0; }
}

@keyframes n40 {
  0%, 66.9% { opacity: 0; }
  67%, 94.9% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

@keyframes dot1 {
  0%, 45%, 100% { opacity: 0.3; }
  15% { opacity: 1; }
}

@keyframes dot2 {
  0%, 15%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

@keyframes dot3 {
  0%, 30%, 75%, 100% { opacity: 0.3; }
  45% { opacity: 1; }
}

/* «После», цикл 19 с — «сорок сообщений против двух минут свайпов»: бар
   против квиза из переписки «До» (набор B), затем чат, группа и своё место
   (Л4.4б). Свайпы быстрые, как жестом, — без вспышек на кнопках деки.
   Слои снизу вверх: группа до голоса (B5, в потоке), deck2 — «Крафт» (B1),
   deck3 — «Караоке» (B2), deck1 — «Квиз» (B3), «Совпало!» (B4), карточки
   c1, c3, c2, talk — чат «Пятницы» (B7), grp — группа после голоса (B6),
   bring — «Принести место» (S12), wait — ожидание (S13), brought — группа
   после «Принести место» (B8), вспышки. Базовое состояние — группа до
   голоса.
     0,0– 1,7  группа «Пятница»: «7 новых», «Совпало — выберите день · 1»
     1,1– 2,15 вспышка на «Листать деку · 7 новых»
     1,7– 2,1  проявляется дека: «Крафт на Покровке»
     2,9– 3,5  «Крафт» улетает влево, под ней «Караоке «Соловей»»
     4,1– 4,7  «Караоке» улетает вправо, под ней «Квиз по четвергам»
     5,3– 5,9  «Квиз» улетает вправо, под ней проявляется «Совпало!»
     5,7– 7,7  «Совпало!» — 2 с; 7,1–8,15 вспышка на «Обсудить в чате»
     7,7– 8,1  чат «Пятницы»: «Совпало · 3 из 4 · Квиз по четвергам», своё
               «Ура, в четверг?»
     8,1–10,1  чат — 2 с; 9,5–10,55 вспышка на вкладке «Карточки»
    10,1–10,5  группа после голоса: «4 новых», «Совпало — выберите день · 2»,
               первым — «Квиз»
    11,0–11,3  рамка на «Квизе», держится, пока группу не закроет
               «Принести место»; 12,2–13,25 вспышка на «Принести место»
    12,8–13,2  «Принести место»: ссылка на рилс, «Reels — подходит»
    13,8–14,85 вспышка на «Добавить в деку»
    14,4–14,8  «Собираем карточку…», спиннер крутится 1,6 с
    16,4–16,8  группа после «Принести место»: «5 новых», «Голосуем 8»
    17,0–18,05 вспышка на «5 новых»
    18,3–18,7  группа гаснет — группа до голоса
   Своей строки принесённое место на B8 не показывает: «Голосуем» клиент
   сортирует по доле голосов, и новая карточка (0 из 4) встаёт седьмой,
   ниже экрана, — шаг кончается вспышкой на счётчике новых. Вспышки (от
   экрана 390 × 844): «7 новых» и «5 новых» — одна пилюля, 83,2 % / 18,7 %,
   на 3 % шире и чуть выше её (21,2 % × 4,7 %, как на S5); «Обсудить в
   чате» — 50 % / 87,5 %, кнопка 87,7 % × 6,4 %; «Карточки» — 19,7 % /
   11,2 %, вкладка 29 % × 4,7 %; «Принести место» — 50 % / 26,2 %, строка
   91,5 % × 4,4 %; «Добавить в деку» — как в фиче 1. */
.after .screen > *,
.after .ring {
  animation-duration: 19s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.after .tap {
  left: 83.2%;
  top: 18.7%;
  width: 24%;
  height: 4.9%;
  animation-name: a-tap;
}

.after .tap.tt {
  left: 50%;
  top: 87.5%;
  width: 90.5%;
  height: 7%;
  animation-name: a-tt;
}

.after .tap.tk {
  left: 19.7%;
  top: 11.2%;
  width: 31.5%;
  height: 5.6%;
  animation-name: a-tk;
}

.after .tap.tb {
  left: 50%;
  top: 26.2%;
  width: 94%;
  height: 5.2%;
  animation-name: a-tb;
}

.after .tap.ta {
  left: 49.9%;
  top: 88.6%;
  width: 94.4%;
  height: 6.6%;
  animation-name: a-ta;
}

.after .screen > img { animation-name: a-base; }
.after .deck2 { animation-name: a-deck2; }
.after .c2 { animation-name: a-c2; }
.after .deck3 { animation-name: a-deck3; }
.after .c3 { animation-name: a-c3; }
.after .deck1 { animation-name: a-deck1; }
.after .c1 { animation-name: a-c1; }
.after .match { animation-name: a-match; }
.after .talk { animation-name: a-talk; }
.after .grp { animation-name: a-grp; }
.after .ring { animation-name: a-ring; }
.after .bring { animation-name: a-bring; }
.after .wait { animation-name: a-wait; }
.after .brought { animation-name: a-brought; }

@keyframes a-base {
  0%, 11.32% { opacity: 1; }
  11.58%, 95.79% { opacity: 0; }
  96.05%, 100% { opacity: 1; }
}

@keyframes a-tap {
  0%, 5.79% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  7.37% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  8.68% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  11.05% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  11.32%, 89.47% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  91.05% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  92.37% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  94.74% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  95%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes a-deck2 {
  0%, 8.95% { opacity: 0; }
  11.05%, 16.58% { opacity: 1; }
  16.84%, 100% { opacity: 0; }
}

@keyframes a-c2 {
  0%, 11.05% { opacity: 0; transform: none; }
  11.32% { opacity: 1; transform: none; }
  15.26% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  18.42% { opacity: 1; transform: translate(-120%, -6%) rotate(-14deg); }
  18.68% { opacity: 0; transform: translate(-120%, -6%) rotate(-14deg); }
  18.95%, 100% { opacity: 0; transform: none; }
}

@keyframes a-deck3 {
  0%, 15.26% { opacity: 0; }
  16.32%, 22.89% { opacity: 1; }
  23.16%, 100% { opacity: 0; }
}

@keyframes a-c3 {
  0%, 15.26% { opacity: 0; transform: none; }
  15.53% { opacity: 1; transform: none; }
  21.58% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  24.74% { opacity: 1; transform: translate(120%, -6%) rotate(14deg); }
  25% { opacity: 0; transform: translate(120%, -6%) rotate(14deg); }
  25.26%, 100% { opacity: 0; transform: none; }
}

@keyframes a-deck1 {
  0%, 21.58% { opacity: 0; }
  22.63%, 30.26% { opacity: 1; }
  30.53%, 100% { opacity: 0; }
}

@keyframes a-c1 {
  0%, 21.58% { opacity: 0; transform: none; }
  21.84% { opacity: 1; transform: none; }
  27.89% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  31.05% { opacity: 1; transform: translate(120%, -6%) rotate(14deg); }
  31.32% { opacity: 0; transform: translate(120%, -6%) rotate(14deg); }
  31.58%, 100% { opacity: 0; transform: none; }
}

@keyframes a-match {
  0%, 27.89% { opacity: 0; }
  30%, 42.89% { opacity: 1; }
  43.16%, 100% { opacity: 0; }
}

@keyframes a-tt {
  0%, 37.37% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  38.95% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  40.26% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  42.63% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  42.89%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes a-talk {
  0%, 40.53% { opacity: 0; }
  42.63%, 55.53% { opacity: 1; }
  55.79%, 100% { opacity: 0; }
}

@keyframes a-tk {
  0%, 50% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  51.58% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  52.89% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  55.26% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  55.53%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes a-grp {
  0%, 53.16% { opacity: 0; }
  55.26%, 69.74% { opacity: 1; }
  70%, 100% { opacity: 0; }
}

@keyframes a-ring {
  0%, 57.89% { opacity: 0; }
  59.47%, 69.74% { opacity: 1; }
  70%, 100% { opacity: 0; }
}

@keyframes a-tb {
  0%, 64.21% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  65.79% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  67.11% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  69.47% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  69.74%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes a-bring {
  0%, 67.37% { opacity: 0; }
  69.47%, 78.16% { opacity: 1; }
  78.42%, 100% { opacity: 0; }
}

@keyframes a-ta {
  0%, 72.63% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  74.21% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  75.53% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  77.89% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  78.16%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes a-wait {
  0%, 75.79% { opacity: 0; }
  77.89%, 88.68% { opacity: 1; }
  88.95%, 100% { opacity: 0; }
}

@keyframes a-brought {
  0%, 86.32% { opacity: 0; }
  88.42%, 96.32% { opacity: 1; }
  98.42%, 100% { opacity: 0; }
}

/* «С вас — рилсы. С нас — карточки» (#how, М5): заголовок по центру и три
   фичи в две колонки — текст и телефон; у второй телефон слева. */
.head.c {
  align-items: center;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

/* «Совпало. Теперь выбираем день» (.settle, ниже) раскладывается так же:
   текст и телефон 260 px в две колонки. */
.feat,
.settle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: center;
}

.feat {
  padding: 56px 0;
}

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

.feat .txt {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.feat p {
  max-width: 44ch;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

.feat .ghost {
  align-self: flex-start;
}

/* Чипы: источники, голоса, разделы; первый — графитовый. */
.opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.opts li {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 14px;
  font-weight: 700;
}

.opts .on {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}

.feat .pic,
.settle .pic {
  display: flex;
  justify-content: center;
}

.feat.rev .pic {
  order: -1;
}

/* Экран телефона фичи держит пропорции сам: в третьей фиче всё внутри
   спозиционировано абсолютно. */
.feat .screen,
.settle .screen {
  aspect-ratio: 390 / 844;
}

/* Фича 1, цикл 24,3 с — ссылка становится карточкой, три источника по
   очереди: рилс, Яндекс Карты, Google Карты (Л4.4б). Слои снизу вверх:
   подробности «Крыши» (S7, в потоке), bring — «Принести место» со ссылкой
   на рилс (S12), wait — «Собираем карточку…» для видео (S13), wipe —
   проявление «Крыши» (S7); bring2, wait2, wipe2 — то же для Яндекс Карт
   (F1, F3, «Веранда на Хохловке» — S8); bring3, wait3, wipe3 — для Google
   Карт (F2, F3 Google, «Кофейня Скуратов» — F4); вспышка. Базовое
   состояние — подробности «Крыши».
     0,0– 1,2  «Принести место»: ссылка на рилс, «Reels — подходит»
     0,6– 1,65 вспышка на «Добавить в деку»
     1,2– 1,6  «Собираем карточку…», спиннер крутится 2,4 с
     4,0– 5,4  подробности «Крыши» проявляются снизу вверх (голосуем)
     5,4– 8,1  карточка держится 2,7 с
     8,1– 8,5  «Принести место» со ссылкой Яндекс Карт, «Яндекс Карты —
               подходит»; 9,1–10,15 вспышка на «Добавить в деку»
     9,7–10,1  «Собираем карточку…» для ссылки с карты, 1,6 с
    11,7–13,1  проявляется «Веранда на Хохловке · из Яндекс Карт» (совпало)
    13,1–15,8  карточка держится 2,7 с
    15,8–16,2  «Принести место» со ссылкой Google; 16,8–17,85 вспышка
    17,4–17,8  «Собираем карточку…» — «Из Google Карт в группу «Пятница»»
    19,4–20,8  проявляется «Кофейня Скуратов · из Google Карт»
               (запланировано: «Сб, 24 окт · 11:00»)
    20,8–23,5  карточка держится 2,7 с
    23,5–23,9  карточка гаснет — снова «Принести место» со ссылкой на рилс
   Чипы «Рилс», «Яндекс Карты», «Google Карты» в тексте фичи
   подсвечиваются в такт (0–8,1, 8,1–15,8, 15,8–23,9 с, смена — 0,4 с),
   «Тикток» — нет: приём тиктоков отложен. Проявление — двумя встречными
   сдвигами: .wipe поднимается снизу и показывает, что попало в экран, а
   вложенный слой сдвигается обратно, так что карточка стоит на месте (как
   clip-path, но только transform). Вспышка — по кнопке «Добавить в деку»
   (центр 49,9 % / 88,6 %, кнопка 91,4 % × 6,2 %; на S12, F1 и F2 — там
   же). Три подробности — три состояния карточки: голосуем, совпало,
   запланировано. */
.intake .screen > *,
.intake .wipe > .layer,
.src li::before {
  animation-duration: 24.3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.intake .screen > img { animation-name: i-base; }
.intake .bring { animation-name: i-bring; }
.intake .wait { animation-name: i-wait; }
.intake .bring2 { animation-name: i-bring2; }
.intake .wait2 { animation-name: i-wait2; }
.intake .bring3 { animation-name: i-bring3; }
.intake .wait3 { animation-name: i-wait3; }

.intake .tap {
  left: 49.9%;
  top: 88.6%;
  width: 94.4%;
  height: 6.6%;
  animation-name: i-tap;
}

.wipe {
  overflow: hidden;
}

.intake .wipe { animation-name: i-wipe; }
.intake .wipe > .layer { animation-name: i-unwipe; }
.intake .wipe2 { animation-name: i-wipe2; }
.intake .wipe2 > .layer { animation-name: i-unwipe2; }
.intake .wipe3 { animation-name: i-wipe3; }
.intake .wipe3 > .layer { animation-name: i-unwipe3; }

/* Спиннер ожидания крутится: диск цвета подложки закрывает неподвижную
   дугу снимка (центр 49,9 % / 41,9 %, дуга — 8,5 % ширины экрана), поверх
   — такая же фиолетовая дуга в три четверти круга, оборот за 1 с. */
.spin {
  position: absolute;
  left: 49.9%;
  top: 41.9%;
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--soft);
  transform: translate(-50%, -50%);
}

.spin::before {
  position: absolute;
  inset: 11.5%;
  border: 2px solid var(--violet);
  border-bottom-color: transparent;
  border-radius: 50%;
  content: "";
  animation: spin 1s linear infinite;
}

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

/* У ожидания для ссылки с карты текст короче на строку — спиннер ниже. */
.spin.lo {
  top: 43.2%;
}

/* Чипы источников первой фичи (Л4.4б): вокруг чипа того источника, чья
   ссылка сейчас в телефоне, — лаймовый ореол с графитовой каймой, как у
   вспышек на экранах. Ореол — ::before под чипом: список изолирован (свой
   контекст наложения), у чипа фон свой и закрывает середину ореола. */
.src {
  isolation: isolate;
}

.src li {
  position: relative;
}

.src li::before {
  position: absolute;
  inset: -6px;
  z-index: -1;
  border: 2px solid var(--graphite);
  border-radius: var(--radius-pill);
  background: var(--accent);
  content: "";
  opacity: 0;
}

.src li:nth-child(1)::before { animation-name: i-reel; }
.src li:nth-child(3)::before { animation-name: i-google; }
.src li:nth-child(4)::before { animation-name: i-yandex; }

@keyframes i-tap {
  0%, 2.47% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  3.7% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  4.73% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  6.58% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  6.79%, 37.45% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  38.68% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  39.71% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  41.56% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  41.77%, 69.14% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  70.37% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  71.4% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  73.25% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  73.46%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes i-base {
  0%, 100% { opacity: 0; }
}

@keyframes i-bring {
  0%, 6.79% { opacity: 1; }
  7%, 96.3% { opacity: 0; }
  96.5%, 100% { opacity: 1; }
}

@keyframes i-wait {
  0%, 4.94% { opacity: 0; }
  6.58%, 22.43% { opacity: 1; }
  22.63%, 100% { opacity: 0; }
}

@keyframes i-wipe {
  0%, 16.26% { opacity: 0; transform: translateY(100%); }
  16.46% { opacity: 1; transform: translateY(100%); }
  22.22%, 34.98% { opacity: 1; transform: none; }
  35.19% { opacity: 0; transform: none; }
  35.39%, 100% { opacity: 0; transform: translateY(100%); }
}

@keyframes i-unwipe {
  0%, 16.46% { transform: translateY(-100%); }
  22.22%, 34.98% { transform: none; }
  35.19%, 100% { transform: translateY(-100%); }
}

@keyframes i-bring2 {
  0%, 33.33% { opacity: 0; }
  34.98%, 41.77% { opacity: 1; }
  41.98%, 100% { opacity: 0; }
}

@keyframes i-wait2 {
  0%, 39.92% { opacity: 0; }
  41.56%, 54.12% { opacity: 1; }
  54.32%, 100% { opacity: 0; }
}

@keyframes i-wipe2 {
  0%, 47.94% { opacity: 0; transform: translateY(100%); }
  48.15% { opacity: 1; transform: translateY(100%); }
  53.91%, 66.67% { opacity: 1; transform: none; }
  66.87% { opacity: 0; transform: none; }
  67.08%, 100% { opacity: 0; transform: translateY(100%); }
}

@keyframes i-unwipe2 {
  0%, 48.15% { transform: translateY(-100%); }
  53.91%, 66.67% { transform: none; }
  66.87%, 100% { transform: translateY(-100%); }
}

@keyframes i-bring3 {
  0%, 65.02% { opacity: 0; }
  66.67%, 73.46% { opacity: 1; }
  73.66%, 100% { opacity: 0; }
}

@keyframes i-wait3 {
  0%, 71.6% { opacity: 0; }
  73.25%, 85.8% { opacity: 1; }
  86.01%, 100% { opacity: 0; }
}

@keyframes i-wipe3 {
  0%, 79.63% { opacity: 0; transform: translateY(100%); }
  79.84% { opacity: 1; transform: translateY(100%); }
  85.6%, 96.71% { opacity: 1; transform: none; }
  98.35% { opacity: 0; transform: none; }
  98.56%, 100% { opacity: 0; transform: translateY(100%); }
}

@keyframes i-unwipe3 {
  0%, 79.84% { transform: translateY(-100%); }
  85.6%, 98.35% { transform: none; }
  98.56%, 100% { transform: translateY(-100%); }
}

@keyframes i-reel {
  0%, 33.33% { opacity: 1; transform: none; }
  34.98%, 96.71% { opacity: 0; transform: scale(0.85); }
  98.35%, 100% { opacity: 1; transform: none; }
}

@keyframes i-yandex {
  0%, 33.33% { opacity: 0; transform: scale(0.85); }
  34.98%, 65.02% { opacity: 1; transform: none; }
  66.67%, 100% { opacity: 0; transform: scale(0.85); }
}

@keyframes i-google {
  0%, 65.02% { opacity: 0; transform: scale(0.85); }
  66.67%, 96.71% { opacity: 1; transform: none; }
  98.35%, 100% { opacity: 0; transform: scale(0.85); }
}

/* Фича 2, цикл 15,4 с — порог в две трети, группа «Коллеги» из шести
   (набор C, Л4.4б). Слои снизу вверх: подробности «Лапшичной на
   Маросейке» (C1, в потоке), deck2 — «Стендап» (C3), deck3 — «Каток» (C4,
   «2 из 6 за»), grp — группа «Коллеги» после «хочу» (C5), grp2 — после
   голоса коллеги (C6), карточки c3, c2, «Совпало!» (C2), рамка, вспышки.
   Базовое состояние — подробности: «3 из 6 за · нужно 4 · не хватает
   одного голоса».
     0,0– 1,7  подробности «Лапшичной»: «ваш может стать решающим»
     1,1– 2,15 вспышка на «Хочу пойти»
     1,7– 2,1  проявляется «Совпало!»
     2,1– 4,1  «Совпало!», 4 из 6 — 2 с
     4,1– 4,5  «Совпало!» гаснет: дека, «Стендап по средам»
     5,6– 6,65 вспышка на стрелке вверх
     6,2– 6,9  «Стендап» уезжает вверх (пропустить), под ним «Каток на
               Патриках», 2 из 6
     8,0– 9,05 вспышка на сердце
     8,6– 9,3  «Каток» улетает вправо, под ним проявляется группа
               «Коллеги» (8,6–9,0): «Каток» в «Голосуем», 3 из 6, вы за
     9,6– 9,9  рамка на «Катке»
    11,4–11,8  голос коллеги: группа с «Катком» в «Совпало — выберите
               день · 2», 4 из 6; рамка переезжает туда же
    11,8–14,3  группа — 2,5 с
    14,3–14,7  группа с рамкой гаснет — снова подробности «Лапшичной»
   Вспышки: «Хочу пойти» — центр 58,6 % / 94 %, кнопка 74 % × 6,5 % (на C1
   там же, где на S7); стрелка вверх — 48 % / 84,6 %, кнопка 11,7 % ширины.
   Строка «Катка» на C5 — 51,9–59,4 % высоты экрана, как «Квиз» на B6, и
   рамка стоит там же; на C6 — 36,3–43,8 %: рамка едет вверх на 15,7 %
   экрана, сдвигом на 155,4 % своей высоты. */
.votes .screen > * {
  animation-duration: 15.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.votes .tap {
  left: 58.6%;
  top: 94%;
  width: 77%;
  height: 6.9%;
  animation-name: v-tap;
}

.votes .pulse.pu {
  left: 48%;
  top: 84.6%;
  width: 13%;
  animation-name: v-pu;
}

.votes .ring {
  top: 50.6%;
  height: 10.1%;
  animation-name: v-ring;
}

.votes .screen > img { animation-name: v-base; }
.votes .match { animation-name: v-match; }
.votes .deck2 { animation-name: v-deck2; }
.votes .c2 { animation-name: v-c2; }
.votes .deck3 { animation-name: v-deck3; }
.votes .c3 { animation-name: v-c3; }
.votes .pulse.ph { animation-name: v-ph; }
.votes .grp { animation-name: v-grp; }
.votes .grp2 { animation-name: v-grp2; }

@keyframes v-base {
  0%, 13.96% { opacity: 1; }
  14.29%, 92.21% { opacity: 0; }
  92.53%, 100% { opacity: 1; }
}

@keyframes v-tap {
  0%, 7.14% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  9.09% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  10.71% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  13.64% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  13.96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes v-match {
  0%, 11.04% { opacity: 0; }
  13.64%, 26.62% { opacity: 1; }
  29.22%, 100% { opacity: 0; }
}

@keyframes v-deck2 {
  0%, 25.97% { opacity: 0; }
  26.3%, 42.53% { opacity: 1; }
  42.86%, 100% { opacity: 0; }
}

@keyframes v-c2 {
  0%, 25.97% { opacity: 0; transform: none; }
  26.3% { opacity: 1; transform: none; }
  40.26% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  44.81% { opacity: 1; transform: translateY(-115%); }
  45.13% { opacity: 0; transform: translateY(-115%); }
  45.45%, 100% { opacity: 0; transform: none; }
}

@keyframes v-pu {
  0%, 36.36% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  38.31% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  39.94% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.15); }
  42.86% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  43.18%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes v-deck3 {
  0%, 40.26% { opacity: 0; }
  42.21%, 58.77% { opacity: 1; }
  59.09%, 100% { opacity: 0; }
}

@keyframes v-c3 {
  0%, 40.26% { opacity: 0; transform: none; }
  40.58% { opacity: 1; transform: none; }
  55.84% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  60.39% { opacity: 1; transform: translate(120%, -6%) rotate(14deg); }
  60.71% { opacity: 0; transform: translate(120%, -6%) rotate(14deg); }
  61.04%, 100% { opacity: 0; transform: none; }
}

@keyframes v-ph {
  0%, 51.95% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  53.9% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  55.52% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.15); }
  58.44% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  58.77%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes v-grp {
  0%, 55.84% { opacity: 0; }
  58.44%, 76.95% { opacity: 1; }
  77.27%, 100% { opacity: 0; }
}

@keyframes v-grp2 {
  0%, 74.03% { opacity: 0; }
  76.62%, 92.86% { opacity: 1; }
  95.45%, 100% { opacity: 0; }
}

@keyframes v-ring {
  0%, 62.34% { opacity: 0; transform: none; }
  64.29%, 74.03% { opacity: 1; transform: none; }
  76.62%, 92.86% { opacity: 1; transform: translateY(-155.4%); }
  95.45% { opacity: 0; transform: translateY(-155.4%); }
  95.78%, 100% { opacity: 0; transform: none; }
}

/* Фича 3, цикл 17,2 с — всё на одном экране группы «Семья» из трёх
   (набор D), а потом её чат и календарь (Л4.4б). Рамка и вспышка на
   «Голосовать» — в слое группы (.list, D1); сверху — detail, подробности
   «Лекции про кино» (D2), talk — чат «Семьи» (D3), cal — её календарь
   (D4), вспышки. Базовое состояние — группа.
     0,0– 0,8  группа «Семья»
     0,8– 2,7  рамка на «Запланировано · Зарядье в воскресенье · Вс, 25 окт»
     3,5– 5,4  рамка на «Совпало — выберите день · Пекарня на Солянке»
     6,2– 8,0  рамка на «Голосуем · Лекция про кино · 1 из 3»
     7,0– 8,05 вспышка на «Голосовать»
     7,6– 8,0  проявляются подробности «Лекции»
     8,0–10,0  подробности — 2 с; 9,4–10,45 вспышка на «назад»
    10,0–10,4  подробности гаснут — группа
    10,8–11,85 вспышка на вкладке «Чат»
    11,4–11,8  чат «Семьи»: «Совпало · Зарядье…», «Совпало · Пекарня…»,
               «Запланировано «Зарядье в воскресенье» на вс, 25 окт, 12:00»
    11,8–13,8  чат — 2 с; 13,2–14,25 вспышка на вкладке «Календарь»
    13,8–14,2  календарь «Семьи»: 25 октября, «12:00 Зарядье в воскресенье»
    14,2–16,2  календарь — 2 с; 15,6–16,65 вспышка на вкладке «Карточки»
    16,2–16,6  календарь гаснет — группа
   Прокрутки нет: в «Семье» пять мест, список кончается на 96,8 % высоты
   экрана, и прокрутка (раньше 2,5–3,5 и 5,2–6,2 с, по 8 %) показывала бы
   пустой фон под последней строкой — в приложении такой список не
   прокручивается. Строки на снимке (390×1005, проценты — от высоты экрана
   844) — там же, где на S5: «Зарядье» 35,8–44,2 %, «Пекарня» 51,4–59,8 %,
   «Лекция» 67,1–75,4 %; «Голосовать» — центр 79,7 % / 71,3 %, кнопка
   25,2 % × 4,1 %. Рамка стоит на «Зарядье» (top 35,3 %) и переезжает
   сдвигом на свою высоту (9,4 % экрана), пока погашена: на «Пекарню» —
   translateY(166 %), на «Лекцию» — 333 %; top не анимируется — сцена
   остаётся на компоновщике.
   Вкладки группы на D1, D3 и D4 — на одной высоте (центр 11,1 %, вкладка
   29 % × 4,7 %): «Карточки» — 19,7 %, «Чат» — 50 %, «Календарь» —
   80,3 %; «назад» на подробностях — круг 8,75 % / 5,2 %, 11,3 % ширины. */
.board .screen > *,
.board .ring,
.board .tap {
  animation-duration: 17.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.board .list { animation-name: b-list; }
.board .detail { animation-name: b-detail; }
.board .talk { animation-name: b-talk; }
.board .cal { animation-name: b-cal; }

.board .ring {
  top: 35.3%;
  height: 9.4%;
  animation-name: b-ring;
}

.board .tap {
  left: 79.7%;
  top: 71.3%;
  width: 28.2%;
  height: 5.1%;
  animation-name: b-tap;
}

.board .tap.tc,
.board .tap.tl,
.board .tap.tk {
  left: 50%;
  top: 11.1%;
  width: 31.5%;
  height: 5.6%;
  animation-name: b-tc;
}

.board .tap.tl {
  left: 80.3%;
  animation-name: b-tl;
}

.board .tap.tk {
  left: 19.7%;
  animation-name: b-tk;
}

.board .pulse.pk {
  left: 8.75%;
  top: 5.2%;
  width: 13%;
  animation-name: b-pk;
}

@keyframes b-ring {
  0%, 4.65% { opacity: 0; transform: translateY(0); }
  6.4%, 13.95% { opacity: 1; transform: translateY(0); }
  15.7% { opacity: 0; transform: translateY(0); }
  15.99%, 20.35% { opacity: 0; transform: translateY(166%); }
  22.09%, 29.65% { opacity: 1; transform: translateY(166%); }
  31.4% { opacity: 0; transform: translateY(166%); }
  31.69%, 36.05% { opacity: 0; transform: translateY(333%); }
  37.79%, 46.51% { opacity: 1; transform: translateY(333%); }
  46.8% { opacity: 0; transform: translateY(333%); }
  47.09%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes b-list {
  0%, 46.8% { opacity: 1; }
  47.09%, 57.56% { opacity: 0; }
  57.85%, 68.9% { opacity: 1; }
  69.19%, 93.6% { opacity: 0; }
  93.9%, 100% { opacity: 1; }
}

@keyframes b-tap {
  0%, 40.7% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  42.44% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  43.9% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  46.51% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  46.8%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes b-detail {
  0%, 44.19% { opacity: 0; }
  46.51%, 58.14% { opacity: 1; }
  60.47%, 100% { opacity: 0; }
}

@keyframes b-pk {
  0%, 54.65% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  56.4% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  57.85% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.15); }
  60.47% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  60.76%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes b-tc {
  0%, 62.79% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  64.53% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  65.99% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  68.6% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  68.9%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes b-talk {
  0%, 66.28% { opacity: 0; }
  68.6%, 82.85% { opacity: 1; }
  83.14%, 100% { opacity: 0; }
}

@keyframes b-tl {
  0%, 76.74% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  78.49% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  79.94% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  82.56% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  82.85%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes b-cal {
  0%, 80.23% { opacity: 0; }
  82.56%, 94.19% { opacity: 1; }
  96.51%, 100% { opacity: 0; }
}

@keyframes b-tk {
  0%, 90.7% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  92.44% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  93.9% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  96.51% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  96.8%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* «Совпало. Теперь выбираем день» (#settle): текст слева, телефон 260 px
   справа — как у фич; на телефоне экран под текстом (решение В16,
   отступление от М5, где секция — столбик по центру). В тексте — стрелка,
   заголовок, текст, заметка-пилюля про смену даты, мелкая строка про
   бронь, кнопка; всё выровнено влево. Сетка и телефон — общие с .feat. */
.settle .txt {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.settle .arrow {
  color: var(--violet);
}

.settle .txt > p {
  max-width: 52ch;
  color: var(--muted);
  font-size: 19px;
  font-weight: 500;
}

.settle .txt > .memo {
  max-width: none;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

.settle .txt > .fine {
  font-size: 14px;
  font-weight: 600;
}

/* Сцена «Совпало. Теперь выбираем день», цикл 12,8 с (Л4.4б) — от
   совпавшей карточки до записи в календаре группы «Пятница» (S8–S11).
   Слои снизу вверх: календарь группы (S11, в потоке) с рамкой, detail —
   подробности «Веранды на Хохловке» (S8), date0 — выбор дня, пусто (S9
   до нажатия), date — выбрана суббота (S9), time — время (S10), вспышки.
   Базовое состояние — календарь с записью.
     0,0– 1,7  подробности «Веранды», 3 из 4 за, «Совпало · выберите день»
     1,1– 2,15 вспышка на «Совпало · выберите день»
     1,7– 2,1  «Когда идём?»: октябрь, день не выбран
     2,7– 3,75 вспышка на субботе, 24-м
     3,3– 3,7  выбрана суббота: чип «Сб, 24 окт», «Дальше — время»
     4,3– 5,35 вспышка на «Дальше — время»
     4,9– 5,3  «Во сколько?»: 19:00–22:00, напомнить за час
     6,5– 7,55 вспышка на «Запланировать»
     7,1– 7,5  экран времени гаснет — календарь группы, 24 октября
     8,0– 8,3  рамка на «19:00 Веранда на Хохловке», держится 3 с
    11,3–11,6  рамка гаснет
    11,6–12,0  снова подробности «Веранды» — стык
   На S8 большой кнопки «Выбрать дату» нет — её роль у метки «Совпало ·
   выберите день» (центр 35,3 % / 70,6 %, метка 53,5 % × 4 %). Суббота на
   S9 — круг 74,6 % / 44,2 %, 9,2 % ширины; «Дальше — время» на S9 и
   «Запланировать» на S10 — одна кнопка, 50 % / 93,9 %, 91,5 % × 6,3 %;
   строка «19:00» на S11 — 71,4–77,3 % высоты экрана, рамка — как у групп. */
.plan .screen > * {
  animation-duration: 12.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.plan .screen > img { animation-name: p-base; }
.plan .detail { animation-name: p-detail; }
.plan .date0 { animation-name: p-date0; }
.plan .date { animation-name: p-date; }
.plan .time { animation-name: p-time; }

.plan .ring {
  top: 70%;
  height: 8.6%;
  animation-name: p-ring;
}

.plan .tap {
  left: 35.3%;
  top: 70.6%;
  width: 56.5%;
  height: 4.9%;
  animation-name: p-tap;
}

.plan .tap.tn {
  left: 50%;
  top: 93.9%;
  width: 94.4%;
  height: 6.9%;
  animation-name: p-tn;
}

.plan .pulse.pd {
  left: 74.6%;
  top: 44.2%;
  width: 11.5%;
  animation-name: p-pd;
}

@keyframes p-base {
  0%, 54.69% { opacity: 0; }
  55.08%, 94.14% { opacity: 1; }
  94.53%, 100% { opacity: 0; }
}

@keyframes p-detail {
  0%, 16.8% { opacity: 1; }
  17.19%, 90.62% { opacity: 0; }
  93.75%, 100% { opacity: 1; }
}

@keyframes p-tap {
  0%, 8.59% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  10.94% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  12.89% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  16.41% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  16.8%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes p-date0 {
  0%, 13.28% { opacity: 0; }
  16.41%, 29.3% { opacity: 1; }
  29.69%, 100% { opacity: 0; }
}

@keyframes p-pd {
  0%, 21.09% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  23.44% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  25.39% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.15); }
  28.91% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  29.3%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes p-date {
  0%, 25.78% { opacity: 0; }
  28.91%, 41.8% { opacity: 1; }
  42.19%, 100% { opacity: 0; }
}

@keyframes p-tn {
  0%, 33.59% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  35.94% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  37.89% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  41.41% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  41.8%, 50.78% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  53.12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  55.08% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
  58.59% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  58.98%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes p-time {
  0%, 38.28% { opacity: 0; }
  41.41%, 55.47% { opacity: 1; }
  58.59%, 100% { opacity: 0; }
}

@keyframes p-ring {
  0%, 62.5% { opacity: 0; }
  64.84%, 88.28% { opacity: 1; }
  90.62%, 100% { opacity: 0; }
}

/* Вопросы (#faq, М5): на всю ширину в две колонки, линия под каждым.
   Строки сетки общие, так что открытый вопрос растягивает и соседа справа —
   линии в ряду остаются на одной высоте. Маркер <summary> скрыт, вместо
   него шеврон. */
.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  border-top: 1px solid var(--border);
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font: 800 20px var(--font-display);
  letter-spacing: -0.02em;
  list-style: none;
  cursor: pointer;
}

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

.faq summary svg {
  flex: none;
  color: var(--violet);
}

.faq details p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 400;
}

/* «Создайте группу» (#download, М5): две карточки — Telegram и вторая по
   платформе (QR на десктопе, пилюли сторов на телефонах). */
.dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  max-width: 900px;
  margin: 0 auto;
}

.dlcard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  text-align: center;
}

.dlcard h3 {
  font-size: 22px;
}

.dlcard p {
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

/* Монограмма на карточке Telegram и в подвале — графит на лайме. */
.dlcard .mark,
.foot .mark {
  background: var(--accent);
  color: var(--on-accent);
}

.dlcard .soon {
  height: 48px;
  padding: 0 20px;
  background: var(--bg);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* QR (qr.svg из Л0.2): своего фона у него нет, тихая зона 4 модуля — внутри
   файла, поэтому картинка во всю светлую плашку, без полей. */
.qr {
  width: 140px;
  height: 140px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
}

.qr img {
  width: 100%;
  height: 100%;
}

.dlnote {
  margin-top: 24px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

/* Подвал (М5): тёмный — data-theme="dark" даёт токены тёмной темы (второй
   план, линии, фокус), фон и текст — графит иллюстраций, как в артборде. */
.foot {
  padding: 56px 0 64px;
  background: var(--graphite);
  color: var(--on-graphite);
}

.foot > .wrap {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  text-align: center;
}

.foot .brand,
.foot .wordmark {
  color: var(--on-graphite);
}

.foot .tag {
  color: var(--muted);
  font-size: 17px;
  font-weight: 600;
}

.foot .links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}

.foot .links a {
  color: var(--on-graphite);
  text-decoration: none;
}

/* Заглушки («Условия» готовятся, «Поддержка» и «Канал» — без адреса):
   второй план и пунктир. */
.foot .links a.stub {
  border-bottom: 1px dashed var(--border);
  color: var(--muted);
}

/* Наведение — фиолетовым, как ссылки везде (лайм — только заливка). В
   тёмном подвале --violet светлый, #8B7CFF: на графите 5,6:1. */
.foot .links a:hover {
  color: var(--violet);
}

.foot small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

/* Страницы-документы (политика, соглашение): шапка и подвал общие,
   текст — колонкой для чтения. */
.doc {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* «Конфиденциальности» в Unbounded на телефоне в строку не помещается:
   в разметке мягкий перенос (&shy;) — «конфиденци-альности»; break-word —
   страховка от вылезания за край. */
.doc h1 {
  font-size: clamp(26px, 5vw, 44px);
  line-height: 1.06;
  overflow-wrap: break-word;
}

.doc h2 {
  font-size: clamp(22px, 3vw, 26px);
  font-weight: 800;
}

.doc p,
.doc li {
  max-width: 64ch;
  font-size: 18px;
}

.doc .policy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding-left: 1.4em;
}

.doc .policy li::marker {
  color: var(--muted);
  font-weight: 800;
}

.doc .part {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.doc .part + .part {
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

/* Короткая страница-документ: подвал прижат к низу окна, как в М5
   (обёртка min-height: 100vh, main растягивается). Только на документах:
   у главной высота и так больше окна. Во flex-колонке шапка с auto-полями
   ужалась бы по содержимому — между телефоном и десктопом ей, как в
   обычном потоке, вся ширина. */
.doc-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.doc-page > main {
  flex: 1 0 auto;
}

@media (min-width: 761px) and (max-width: 1139px) {
  .doc-page > .site-top {
    width: 100%;
  }
}

/* Вопросы, «Скачать» и подвал на телефоне (М5, до 760 px). */
@media (max-width: 760px) {
  .faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .faq summary {
    padding: 18px 0;
    font-size: 17px;
  }

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

  .foot {
    padding: 40px 0 48px;
  }
}

/* Фичи и «Совпало…» на телефоне (М5, до 760 px): одна колонка, экран
   всегда под текстом. */
@media (max-width: 760px) {
  .feat,
  .settle {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .feat {
    padding: 40px 0;
  }

  .feat.rev .pic {
    order: 0;
  }
}

/* Истории на телефоне (М5, до 760 px): панели в столбик. */
@media (max-width: 760px) {
  .head {
    margin-bottom: 28px;
  }

  .grid2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .grid3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .panel {
    padding: 22px;
  }

  .big {
    font-size: 22px;
  }

  .turn {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 28px;
  }

  .turn p {
    font-size: 24px;
  }

  .slogan {
    margin-top: 28px;
    font-size: 22px;
  }
}

.menu a,
.brand small {
  white-space: nowrap;
}

/* Между телефоном и десктопом (М5 этих ширин не рисовал): пять якорей в
   строку не помещаются — меню скрыто, шапка во всю ширину, RU/EN и
   «Начать» справа. Русской шапке нужно ≈ 1092 px страницы; порог с запасом
   на обычную полосу прокрутки (15–17 px), которую медиазапрос не вычитает. */
@media (max-width: 1139px) {
  .menu {
    display: none;
  }

  .site-top {
    max-width: var(--content-width);
  }

  .lang {
    margin-left: auto;
  }
}

/* Телефон (М5, до 760 px): одна колонка, поля 20 px, меню и «Начать»
   в шапке скрыты, телефон под текстом без наклона. */
@media (max-width: 760px) {
  .site-top {
    width: fit-content;
  }

  .lang {
    margin-left: 0;
  }

  .wrap {
    padding: 0 20px;
  }

  .sec {
    padding: 64px 0;
  }

  .sec.first {
    padding: 28px 0 56px;
  }

  .lead {
    font-size: 17px;
  }

  .topbar {
    gap: 14px;
    height: 64px;
  }

  .menu,
  .topbar .btn,
  .brand small {
    display: none;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .steps li {
    align-items: flex-start;
    font-size: 16px;
  }

  .scene {
    padding: 24px 0 8px;
  }

  .scene .phone {
    width: 240px;
    padding: 8px;
    border-radius: 36px;
    transform: none;
  }

  .scene .phone .screen {
    border-radius: 28px;
  }

  .sticker {
    padding: 8px 12px;
    font-size: 18px;
  }

  .sticker.yes {
    left: 4px;
    top: 150px;
  }

  .sticker.no {
    right: 4px;
    bottom: 90px;
  }
}

/* Без движения по просьбе системы. Базовое состояние каждого блока — полный
   видимый контент, так что выключенная анимация ничего не прячет. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}