/* Лендинг Sonny AI — стиль-система (сессия Л1, PLAN-лендинг.md, 07.09.2026).
 *
 * Источник значений — СТИЛЬ-лендинг.md («Renaissance gallery on putty paper»): тёплое
 * putty-полотно, чёрные комнаты, плоскость, волосяные линии, антиква как голос бренда.
 * Ни один цвет на странице не пишется мимо токенов ниже — это критерий сессии Л1.
 *
 * 🚨 Этот файл к приложению отношения не имеет: у него свои токены (app.css), своя палитра
 * и свой оранжевый. Лендинг монохромен намеренно (решение О3) — цвет начинается за дверью.
 *
 * 🚨 Шрифты только свои файлы. CSP страницы (`miniapp-dist/_headers`) держит
 * `font-src 'self' data:` — подключение Google Fonts отвалилось бы МОЛЧА, без ошибки на
 * экране: страница просто набралась бы системным шрифтом, и заметить это можно лишь глазом.
 */

/* ── Шрифты ───────────────────────────────────────────────────────────────────────────
 * Подмножества с fonts.gstatic.com (OFL, происхождение — font/ЛИЦЕНЗИИ.md). Оба семейства
 * вариативные: один файл несёт оба начертания (400 и 500), поэтому файлов четыре, а не
 * восемь. Кириллица отделена `unicode-range` — на английской версии она не грузится вовсе,
 * а русская (Л4) возьмёт её тем же CSS без единой правки.
 */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(font/playfair-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(font/playfair-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(font/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(font/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ── Токены ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Цвета — направление «Хроника пути» (решение владельца 07.09.2026, отменяет галерейную
     putty-палитру). Тёплая бумага вместо стены галереи: страница читается как дневник, по
     которому человек идёт 240 дней. Оранжевый — тот же, что встретит внутри приложения:
     переход с сайта в продукт не должен быть разрывом. */
  --paper: #f6f1e8;
  --paper2: #efe8dc;
  --paper3: #eae3d6;
  --ink: #1b1916;
  --mut: #6f6a61;
  --line: #e0d8c9;
  --ash: #a9a296;
  --white: #ffffff;
  --acc: #e8853b;
  --acc-ink: #231103;

  /* Цвета двенадцати периодов «Пути» — зеркало токенов --p-* из app.css. Лента на странице
     красится ими же, чтобы период, увиденный на сайте, узнавался внутри приложения. */
  --p-salad: #8fca7a;   --p-meat: #f38971;    --p-morning: #e9b44b; --p-grain: #f1ad71;
  --p-plate: #fe93a1;   --p-rhythm: #72cda5;  --p-drinks: #7fa8e0;  --p-fridge: #71d0d3;
  --p-store: #ada5f6;   --p-street: #dc94d9;  --p-body: #bfc56f;    --p-road: #5acdf9;

  /* Шрифты. Роли сменились вместе с направлением: работу текста ведёт гротеск, антиква
     осталась голосом для чисел, вордмарка и цитат — там, где нужен характер, а не чтение. */
  --serif: 'Playfair Display', ui-serif, Georgia, 'Times New Roman', serif;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* Шкала кеглей. Правые значения — канон стиля (десктоп), левые — телефон: страница
     верстается сначала под телефон (§3 плана), трафик придёт из соцсетей. */
  --text-caption: 12px;      --leading-caption: 1.25;
  --text-micro: 9px;
  --text-body-sm: clamp(15px, 1.1vw + 12px, 16px);   --leading-body-sm: 1.5;
  --text-subheading: clamp(18px, 1.4vw + 14px, 22px); --leading-subheading: 1.33; --tracking-subheading: -0.005em;
  --text-heading-sm: clamp(20px, 1.6vw + 15px, 26px); --leading-heading-sm: 1.33; --tracking-heading-sm: -0.005em;
  --text-heading: clamp(28px, 4.4vw + 12px, 43px);    --leading-heading: 1.1;     --tracking-heading: -0.005em;
  --text-heading-lg: clamp(32px, 6vw + 12px, 52px);   --leading-heading-lg: 1;    --tracking-heading-lg: -0.009em;

  /* Вордмарк. Кегль считается от ширины экрана, а не задаётся в пикселях: канонических
     374px на телефоне нет физически, а смысл «больше экрана» держится делителем — при
     нём строка «Sonny AI» шире вьюпорта и обрезается краем (§3 плана, решение О4). */
  --wordmark-div: 3.7;
  --leading-display: 0.84;
  --tracking-display: -0.009em;

  /* Начертания */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Отступы */
  --spacing-4: 4px;    --spacing-16: 16px;  --spacing-20: 20px;  --spacing-28: 28px;
  --spacing-32: 32px;  --spacing-36: 36px;  --spacing-40: 40px;  --spacing-52: 52px;
  --spacing-60: 60px;  --spacing-96: 96px;  --spacing-168: 168px;

  /* Раскладка */
  --section-gap: 80px;
  --section-pad: clamp(60px, 9vw, 168px);
  --edge: clamp(20px, 5vw, 60px);
  --card-padding: 24px;
  --element-gap: 6px;
  --measure: 34em;

  /* Радиусы — в системе только эти три, «обычных» 4/8/12px нет */
  --radius-sm: 2px;
  --radius-lg: 9px;
  --radius-3xl: 28.8px;
}

/* ── Основание ──────────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 var(--spacing-20); }
p:last-child { margin-bottom: 0; }
strong { font-weight: var(--font-weight-medium); }

/* ── Секции ─────────────────────────────────────────────────────────────────────────── */
/* Полотно от края до края, без ограничивающего контейнера: колонку держит .l-col. */
.l-sec { padding: var(--section-pad) var(--edge); }
.l-sec--ink { background: var(--ink); color: var(--white); }
.l-sec--quiet { background: var(--paper2); color: var(--ink); }

.l-col { max-width: var(--measure); margin: 0 auto; }
.l-col--wide { max-width: 46em; }

/* ── Типографика ────────────────────────────────────────────────────────────────────── */
.l-h1 {
  margin: 0 0 var(--spacing-28);
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}
.l-h2 {
  margin: 0 0 var(--spacing-36);
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: -0.02em;
}
.l-h3 {
  margin: 0 0 var(--spacing-16);
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: -0.01em;
}
/* Подзаголовок героя. Антиквой основной текст не набирается: она осталась голосом чисел,
   вордмарка и цитат — там, где нужен характер, а не длинное чтение. */
.l-lede {
  margin: 0 0 var(--spacing-32);
  font-family: var(--sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
}
/* Отметка времени: прописные, разрядка, акцент. В хронике она обозначает, где человек
   находится на дороге, — поэтому цветная, а не приглушённая. */
.l-label {
  margin: 0 0 var(--spacing-20);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--acc);
}
.l-sec--ink .l-label { color: var(--acc); }

/* ── Шапка ──────────────────────────────────────────────────────────────────────────── */
/* Меню на странице нет намеренно: знак слева, одна текстовая ссылка справа. */
.l-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-20) var(--edge);
}

/* Знак бренда — единственный графический знак страницы. */
.l-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: var(--serif);
  font-weight: var(--font-weight-medium);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}
.l-foot .l-mark { border-color: var(--mut); color: var(--mut); }

/* ── Ссылки и кнопка ────────────────────────────────────────────────────────────────── */
.l-link {
  color: var(--ink);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.l-link:hover { text-decoration: underline; }
.l-sec--ink .l-link { color: var(--white); }

/* Кнопка-пилюля. Одна такая на экран — это единственное действие страницы.
   ⚠️ Отступление от канона: поля 9px 17px дают высоту 33px, а палец на телефоне требует
   44px. Визуал пилюли сохранён (гротеск 12px, радиус 28.8px), высота добрана min-height —
   иначе главное действие страницы промахивается мимо пальца. */
.l-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  background: var(--ink);
  color: var(--white);
  border: 0;
  border-radius: var(--radius-lg);
  font-family: var(--sans);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.l-sec--ink .l-btn { background: var(--white); color: var(--ink); }
/* Закрывающая кнопка (экран 13). То же действие, что в герое, но человек дочитал страницу
   до конца и жмёт её большим пальцем на ходу: на телефоне она во всю колонку и выше на
   палец, дальше 360px не растягивается — растянутая пилюля перестаёт читаться кнопкой. */
.l-btn--wide {
  width: 100%;
  max-width: 360px;
  min-height: 52px;
}

/* ── Герой ──────────────────────────────────────────────────────────────────────────── */
/* Маленький центральный блок парит над монументальным вордмарком, который держит низ. */
.l-hero {
  padding: clamp(28px, 6vw, 96px) var(--edge) 0;
  text-align: center;
}
.l-hero .l-col { text-align: left; }
.l-hero .l-label { text-align: center; }

/* Пара чисел: значение и метка прописными, разделены отступом. */
.l-nums {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-16) var(--spacing-52);
  margin: var(--spacing-40) 0 var(--spacing-36);
  padding-top: var(--spacing-28);
  border-top: 1px solid var(--line);
}
.l-num { text-align: center; }
.l-num b {
  display: block;
  font-size: 16px;
  line-height: 1.25;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.l-num span {
  display: block;
  margin-top: var(--element-gap);
  font-size: var(--text-micro);
  line-height: 1.25;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mut);
}

/* Вордмарк. Обрезка краем намеренная: он обязан казаться больше экрана.
   Флекс, а не text-align: центрирование строки, которая шире контейнера, только флексом и
   обрезается симметрично с обеих сторон — у text-align переполнение уходит вправо целиком,
   и слева вордмарк стоял бы ровно по краю, будто просто не поместился. Поля секции
   снимаются отрицательным margin: полотно у вордмарка — весь экран, от края до края. */
.l-wordmark {
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin: clamp(28px, 5vw, 60px) calc(var(--edge) * -1) 0;
}
.l-wordmark span {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-weight: var(--font-weight-medium);
  font-size: calc(100vw / var(--wordmark-div));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
  color: var(--ink);
}

.l-cta { margin: 0; text-align: center; }

/* ── Списки ─────────────────────────────────────────────────────────────────────────── */
.l-list { margin: 0 0 var(--spacing-32); padding: 0; list-style: none; }
.l-list li {
  padding: var(--spacing-16) 0;
  border-bottom: 1px solid var(--mut);
}
.l-list li:first-child { border-top: 1px solid var(--mut); }
.l-sec--quiet .l-list li,
.l-sec--quiet .l-list li:first-child { border-color: var(--line); }

/* ── Блок разбора (экран 3) ─────────────────────────────────────────────────────────── */
.l-block { margin: 0 0 var(--spacing-52); }
.l-block:last-of-type { margin-bottom: var(--spacing-40); }

/* ── Сноски ─────────────────────────────────────────────────────────────────────────── */
/* Исследования в тексте — надстрочными номерами, источники списком под секцией.
   🚨 Ссылок на чужие домены на странице нет ни одной (критерий Л1 и сторож §6): источник
   называется так, чтобы его нашли по идентификатору. */
.l-fn {
  font-size: 0.7em;
  font-weight: var(--font-weight-medium);
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0.04em;
}
.l-notes {
  margin: var(--spacing-40) 0 0;
  padding: var(--spacing-20) 0 0;
  border-top: 1px solid var(--line);
  padding-left: 0;
  list-style: decimal;
  list-style-position: inside;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--mut);
}
.l-sec--ink .l-notes { border-color: var(--mut); color: var(--line); }
.l-notes li { padding: var(--spacing-4) 0; }
.l-notes li::marker { font-weight: var(--font-weight-medium); }

/* ── Шестиугольный индикатор ────────────────────────────────────────────────────────── */
.l-hex {
  display: flex;
  justify-content: center;
  gap: var(--element-gap);
  margin: 0 0 var(--spacing-28);
}
.l-hex svg { width: 12px; height: 12px; display: block; }
.l-hex path { fill: none; stroke: var(--ink); stroke-width: 12; }
.l-sec--ink .l-hex path { stroke: var(--white); }

/* ── Подвал ─────────────────────────────────────────────────────────────────────────── */
.l-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-40) var(--edge);
  background: var(--paper3);
  color: var(--mut);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}
.l-foot a { color: var(--mut); }

/* ── Переключатель языка ──────────────────────────────────────────────────────────────
 * Английская версия — главная (решение О5), русская живёт на /ru. В подвале обе версии
 * ссылаются друг на друга: это не второе действие страницы, а та же страница другими
 * словами. Имя языка пишем на самом языке — «Русский» и «English»: человек, попавший не на
 * свой язык, читает подвал глазами, а не переводом.
 * Прописных здесь нет намеренно, в отличие от .l-link: «РУССКИЙ» читается криком.
 */
.l-lang {
  color: var(--mut);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Предложение перейти на свой язык ─────────────────────────────────────────────────
 * 🚨 Предложение, а не редирект. Принудительный переход по языку браузера отнимает выбор:
 * русский житель англоязычного рынка не смог бы остаться на английской версии, а поисковый
 * робот увидел бы совсем не ту страницу, что в sitemap. Поэтому — узкая полоса внизу, две
 * ссылки и крестик; отказ запоминается, и второй раз полоса не приходит.
 * Полосу строит land.js: в разметке её нет, и без скрипта страница просто остаётся как есть.
 */
.l-offer {
  position: fixed;
  left: var(--edge);
  right: var(--edge);
  bottom: var(--spacing-16);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  max-width: 420px;
  margin: 0 auto;
  padding: var(--spacing-16) var(--spacing-20);
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}
/* На телефоне подвал переносится в две строки (замерено: 143 px при ширине 390), и полоса,
   висящая в самом низу, накрывает вторую — ту, где ссылка на приложение. Пока полоса на
   экране, подвал получает место под неё; убрали полосу — отступ уходит вместе с ней. */
.l-has-offer .l-foot { padding-bottom: 96px; }
.l-offer a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.l-offer span { flex: 1 1 auto; }
/* Крестик — кнопка, а не ссылка: он ничего не открывает. Размер добран до пальца. */
.l-offer button {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: -8px -8px -8px 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ash);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

/* ── Появление секций ───────────────────────────────────────────────────────────────── */
/* Класс ставит land.js: без него страница видна целиком — не выполнился скрипт, значит и
   прятать нечего. Прятать разметку в CSS и открывать её JS — это белая страница у всякого,
   у кого скрипт не дошёл. */
.l-rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
.l-rise.l-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .l-rise { opacity: 1; transform: none; transition: none; }
}

/* ── Лента «Пути»: 240 дней сверху вниз ───────────────────────────────────────────────
 * Хребет страницы в направлении «Хроника» (решение владельца 07.09.2026). Человек
 * прокручивает — и проживает дорогу: дни, имя периода, что в нём происходит. Цвет точки
 * тот же, что у периода внутри приложения, поэтому увиденное на сайте узнаётся потом.
 * 🚨 Дни берутся из живого приложения (BOUNDS в app.road.js), а НЕ из текста сайта: текст
 * писался до перекладки «Пути» на v4 и обещает другие недели (см. PLAN-лендинг.md §0).
 */
.l-tl { margin: 0 0 var(--spacing-32); border-top: 1px solid var(--line); }
.l-st {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: var(--spacing-16);
  align-items: baseline;
  padding: var(--spacing-20) 0;
  border-bottom: 1px solid var(--line);
}
.l-days {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--mut);
  white-space: nowrap;
}
.l-st h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: -0.01em;
}
.l-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.l-st p { margin: var(--spacing-4) 0 0; color: var(--mut); }
.l-dot--salad { background: var(--p-salad); }
.l-dot--meat { background: var(--p-meat); }
.l-dot--morning { background: var(--p-morning); }
.l-dot--grain { background: var(--p-grain); }
.l-dot--plate { background: var(--p-plate); }
.l-dot--rhythm { background: var(--p-rhythm); }
.l-dot--drinks { background: var(--p-drinks); }
.l-dot--fridge { background: var(--p-fridge); }
.l-dot--store { background: var(--p-store); }
.l-dot--street { background: var(--p-street); }
.l-dot--body { background: var(--p-body); }
.l-dot--road { background: var(--p-road); }

/* ── Панель с картиной ────────────────────────────────────────────────────────────────
 * Репродукция во всю ширину, без рамки, скруглений и наложений (СТИЛЬ-лендинг.md).
 * Работает атмосферой, а не иллюстрацией: между секциями, встык, без полей.
 * 🚨 Только public domain, происхождение каждой — img/land/ИСТОЧНИКИ.md.
 */
.l-art { margin: 0; }
.l-art img { display: block; width: 100%; height: auto; }
.l-art figcaption {
  padding: var(--spacing-16) var(--edge);
  background: var(--paper3);
  color: var(--mut);
  font-size: var(--text-micro);
  line-height: 1.5;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Экспонат: экран приложения ───────────────────────────────────────────────────────
 * Решение О1: показываем экраны, но подаём как музейный экспонат — тёмная комната Ink,
 * никакого муляжа телефона, волосяная линия по краю снимка, подпись-этикетка под ним.
 * Ширина экспоната ограничена: снимок 560×1094 во всю колонку встал бы почти на экран
 * высотой и читался бы как «скриншот на сайте», а не как вещь под стеклом.
 */
.l-exhs { padding-top: var(--spacing-60); padding-bottom: var(--spacing-60); }
.l-exhs .l-label { margin-bottom: var(--spacing-40); }
.l-exh { margin: 0 auto; max-width: 320px; }
.l-exh img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ash);
}
/* 13px, а не каноническая подпись 12px: это единственный текст, который объясняет снимок,
   и на телефоне (проверено рендером в 390px, сессия Л3) 12px читаются с прищуром. */
.l-exh figcaption {
  margin-top: var(--spacing-16);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ash);
}
/* Имя экрана — прописными, как на музейной этикетке; фраза под ним обычным текстом:
   прописными она перестала бы читаться на второй строке. */
.l-exh figcaption b {
  display: block;
  margin-bottom: var(--spacing-4);
  color: var(--white);
  font-size: 12px;
  line-height: 1.25;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Галерея экспонатов: на телефоне одна колонка, дальше сколько поместится. */
.l-gal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--spacing-52) var(--spacing-32);
  justify-items: center;
}

/* ── Список глав ──────────────────────────────────────────────────────────────────────
 * Номер антиквой: она осталась голосом чисел (направление «Хроника», решение О12).
 */
.l-ch { margin: 0 0 var(--spacing-32); padding: 0; list-style: none; }
.l-ch li {
  display: flex;
  gap: var(--spacing-16);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.l-ch li:first-child { border-top: 1px solid var(--line); }
.l-ch li span {
  flex: 0 0 1.4em;
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  color: var(--acc);
}

/* ── Таблица сравнения ────────────────────────────────────────────────────────────────
 * Шесть колонок на телефон не помещаются никак: таблица прокручивается вбок внутри своей
 * обёртки, а страница по горизонтали не едет. Ужимать текст в ячейках нельзя — сравнение
 * и есть содержание секции.
 */
.l-cmp {
  margin: 0 0 var(--spacing-32);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.l-cmp table {
  border-collapse: collapse;
  min-width: 52em;
  font-size: var(--text-caption);
  line-height: 1.5;
}
.l-cmp th, .l-cmp td {
  padding: var(--spacing-16);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.l-cmp thead th {
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--mut);
}
.l-cmp tbody th {
  width: 8em;
  font-weight: var(--font-weight-medium);
}
.l-cmp td { color: var(--mut); }
/* Наша колонка — единственная выделенная: подложка на ступень темнее и чернильный текст. */
.l-cmp .l-ours { background: var(--paper3); color: var(--ink); }
.l-cmp thead .l-ours { border-bottom-color: var(--acc); }
/* На узком экране шесть колонок не спасает никакая прокрутка: главная — наша — уезжает за
   край, и человек её просто не увидит. Поэтому до 700px таблица разбирается на карточки:
   строка = критерий, внутри пять ответов, у каждого метка подхода из data-c. Разметка одна
   и та же, дублировать содержимое в двух вариантах нельзя — разъедутся. */
@media (max-width: 700px) {
  .l-cmp { overflow-x: visible; }
  .l-cmp table { min-width: 0; display: block; }
  .l-cmp thead { display: none; }
  .l-cmp tbody, .l-cmp tr, .l-cmp th, .l-cmp td { display: block; }
  .l-cmp tbody tr {
    padding: var(--spacing-20) 0 var(--spacing-4);
    border-bottom: 1px solid var(--mut);
  }
  .l-cmp tbody th {
    width: auto;
    padding: 0 0 var(--spacing-16);
    font-size: var(--text-subheading);
    line-height: var(--leading-subheading);
    letter-spacing: -0.01em;
    border: 0;
  }
  .l-cmp td {
    padding: var(--spacing-4) 0 var(--spacing-16);
    border: 0;
  }
  .l-cmp td::before {
    content: attr(data-c);
    display: block;
    margin-bottom: var(--spacing-4);
    font-size: var(--text-micro);
    line-height: 1.25;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mut);
  }
  /* Наш ответ — единственный выделенный: подложка на всю ширину карточки и чернильный
     текст, метка подхода красится акцентом. */
  .l-cmp .l-ours {
    margin-top: var(--spacing-4);
    padding: var(--spacing-16);
    background: var(--paper3);
  }
  .l-cmp .l-ours::before { color: var(--acc); }
}

.l-cmp-note {
  margin: var(--spacing-16) 0 0;
  font-size: var(--text-micro);
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mut);
}
/* Пустой заголовок первой колонки: экранному диктору нужен текст, глазу — нет. */
.l-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Тарифы (экран 13) ────────────────────────────────────────────────────────────────
 * Две строки, а не «таблица тарифов»: сравнивать нечего. Семейный — доплата за функцию
 * «еда на семью, у каждого свой выбор», а не места на нескольких человек (решение О11).
 * 🚨 Цена набирается антиквой: в направлении «Хроника» она голос чисел, а не текста.
 */
.l-plans {
  display: grid;
  gap: var(--spacing-32);
  margin: 0 0 var(--spacing-40);
  padding-top: var(--spacing-28);
  border-top: 1px solid var(--mut);
}
.l-plan { padding-bottom: var(--spacing-28); border-bottom: 1px solid var(--mut); }
.l-plan-nm {
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc);
}
.l-plan-pr {
  margin: 0 0 var(--spacing-16);
  font-family: var(--serif);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  font-variant-numeric: tabular-nums;
}
/* «в месяц» рядом с суммой — гротеском и мельче: срок не спорит с ценой за внимание. */
.l-plan-pr span {
  font-family: var(--sans);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ash);
}
.l-plan-tx { margin: 0; color: var(--line); }

/* Закрывающая строка под кнопкой: та же величина, что у подзаголовка героя — страница
   заканчивается тем же голосом, каким началась. */
.l-close { margin: var(--spacing-40) 0 0; text-align: center; }

/* ── Мелкий шрифт (экран 14) ──────────────────────────────────────────────────────────
 * Дисклеймер стоит отдельной полосой перед подвалом: он обязан быть на странице, но не
 * обязан спорить с закрывающей кнопкой.
 */
.l-fine {
  padding: var(--spacing-40) var(--edge);
  color: var(--mut);
  font-size: var(--text-caption);
  line-height: 1.5;
}
.l-fine p { margin: 0; }