/* ================================================================
   Tropa — дизайн-система сайта. Один файл на все страницы.
   Шрифты подключаются отдельно, из fonts.css.

   Логика: страница собрана из полос (band). Полоса бывает трёх
   характеров — светлая, чёрная, лаймовая. Они чередуются, и это
   единственный способ разделять смысловые куски: рамок и теней
   почти нет.
   ================================================================ */

:root {
  color-scheme: light;

  /* Бренд */
  --lime:        #8CEB02;
  --lime-soft:   #C5FF67;
  --lime-pale:   #E4F1D3;
  --orange:      #FF5E00;
  --black:       #111111;
  --white:       #FFFFFF;

  /* Нейтрали с зелёным подмесом */
  --paper:       #F6F8F2;   /* светлый фон полос */
  --ink:         #111111;
  --ink-2:       #4A5143;
  --ink-3:       #79806F;
  --line:        #DDE4D2;
  --line-strong: #C3CEB3;   /* обводка мелких элементов на светлом */

  /* Лайм читается только как заливка: на светлом фоне #8CEB02 даёт контраст
     1.4:1, то есть текстом им писать нельзя. Для текста и наведения — тёмный
     лаймовый. Обе переменные использовались в коде до того, как появились
     здесь, поэтому наведение на вопрос в списке молча не работало. */
  --lime-ink:    #3E6B00;

  /* На чёрных полосах */
  --dark-bg:     #111111;
  --dark-2:      #1A1D16;   /* карточки на чёрном */
  --dark-line:   #2E332A;
  /* Обводка карточек на чёрном. Слабая линия даёт краю 1,46:1 при заливке
     1,11:1 — карточка почти не отделяется от полосы. Сначала усилили только у
     сопоставления сторон, и компоненты одного рода на соседних страницах стали
     выглядеть по-разному; теперь значение одно на все. 2,46:1 к фону полосы. */
  --dark-line-2: #50564A;
  --dark-ink:    #F4F7EE;
  --dark-ink-2:  #A8B09C;

  /* Onest — один шрифт на латиницу и кириллицу. Раньше здесь стояла пара из
     K2D и Rubik: в K2D нет кириллицы, и в одном заголовке оказывались два
     разных начертания. */
  --font: 'Tropa', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* ---- Размеры текста ----
     Одна шкала на весь сайт. Правило: новый размер не придумывается, берётся
     ступень отсюда. До 13.08 размеры расставлялись по месту, и набралось
     девятнадцать разных: заголовок раздела почти сравнялся с заголовком
     страницы, один и тот же список на чёрном и на светлом фоне набирался
     тридцатью и двадцатью одной точкой, а текст документов был мельче
     основного текста без всякой причины. */
  --fs-h1:    clamp(30px, 4.6vw, 54px);   /* заголовок страницы, первый экран */
  --fs-h2:    clamp(28px, 3.6vw, 44px);   /* заголовок раздела */
  --fs-h3:    clamp(20px, 2vw, 26px);     /* заголовок внутри раздела */
  --fs-mid:   clamp(24px, 2.4vw, 32px);   /* между разделом и подразделом: блок с кнопкой */
  --fs-row:   clamp(18px, 1.9vw, 23px);   /* строка раскрывающегося списка */
  --fs-h4:    19px;                       /* подзаголовок, врезка */
  --fs-lead:  clamp(17px, 1.5vw, 20px);   /* вводный абзац */
  --fs-body:  17px;                       /* основной текст */
  --fs-ui:    16px;                       /* кнопки, пункты интерфейса */
  --fs-small: 15px;                       /* второстепенный текст: шаги, карточки, меню */
  --fs-cap:   14px;                       /* подписи под цифрами и мелкие пометки */
  --fs-micro: 13px;                       /* служебное: подписи слотов, копирайт */
  --fs-label: 12px;                       /* заглавные метки с разрядкой */

  /* Глубина, на которую плита наезжает на предыдущую полосу. Одна переменная
     на нахлёст и на нижний отступ самой полосы — иначе они расходятся. */
  --overlap: 80px;

  --wrap: 1240px;
  --r-pill: 999px;
  --r-card: 20px;
  --r-slab: 40px;

  --step: clamp(64px, 8vw, 112px);   /* вертикальный воздух полосы */
}

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

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
img, svg { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--lime) 55%, transparent);
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Переносы по слогам в заголовке выглядят как опечатка, поэтому только
   аварийный перенос слова, которое физически не влезает в строку */
h1 { font-size: var(--fs-h1); line-height: 1.04; overflow-wrap: break-word; }
h2 { font-size: var(--fs-h2); line-height: 1.06; }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

p { margin: 0; max-width: 62ch; overflow-wrap: break-word; }

.lead { font-size: var(--fs-lead); line-height: 1.5; }
.small { font-size: var(--fs-small); line-height: 1.5; }

.label {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tech { font-variant-numeric: tabular-nums; }

/* ---------------- Полосы ---------------- */

.band { position: relative; padding: var(--step) 0; }
.band--light { background: var(--paper); color: var(--ink); }
.band--white { background: var(--white); color: var(--ink); }
.band--white p:not(.lead) { color: var(--ink-2); }
.band--white .label { color: var(--ink-3); }
.band--dark  { background: var(--dark-bg); color: var(--dark-ink); }
.band--lime  { background: linear-gradient(160deg, var(--lime-soft) 0%, var(--lime-pale) 78%); color: var(--black); }
/* Однотонная светлая полоса без градиента: под шагами градиент тянул взгляд
   вбок и мешал читать линию, которая идёт поперёк */
.band--tint  { background: var(--lime-pale); color: var(--black); }
.band--tint p:not(.lead) { color: color-mix(in srgb, var(--black) 74%, transparent); }
.band--tight { padding: clamp(40px, 5vw, 64px) 0; }
/* Последняя тёмная полоса перед подвалом: снизу нужен не полный воздух полосы,
   а половина. Полный складывался с верхним отступом подвала в 192 точки
   пустого чёрного, и низ страницы читался обрывом, а не концом. */
main > .band--dark:last-child { padding-bottom: clamp(48px, 5vw, 72px); }
/* Полоса, на которую сверху наезжает плита: снизу нужен запас, иначе плита
   садится на последнюю строку текста. Запас складывается из глубины нахлёста
   и обычного воздуха полосы — плита съедает первое, и под содержимым остаётся
   ровно столько же, сколько над ним. До 14.08 запас был сначала жёстким
   (130 точек при нахлёсте 80 на десктопе и 48 на телефоне), потом нахлёст
   плюс 40 — и снизу оставалось 40 точек против 112 сверху, отчего полоса
   выглядела обрезанной по нижнему краю. */
.band--before-slab { padding-bottom: calc(var(--overlap) + var(--step)); }

.band--dark .label { color: var(--lime); }
.band--light .label { color: var(--ink-3); }
.band--lime .label { color: color-mix(in srgb, var(--black) 55%, transparent); }

.band--dark p { color: var(--dark-ink-2); }
.band--light p:not(.lead) { color: var(--ink-2); }

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

.stack { display: flex; flex-direction: column; gap: 20px; }
.stack--lg { gap: 40px; }
.head { display: flex; flex-direction: column; gap: 16px; }
.head h2 { max-width: 16ch; }
.head p { max-width: 56ch; }

/* Заголовок раздела по центру. Взято из референса айти-студии: там почти нет
   колонок 50 на 50, разделы открываются центрированным заголовком, а под ним
   идёт сетка карточек. У нас четыре двухколонника подряд читались как одна
   длинная лента без ритма. */
/* Общий предел ширины абзаца — 62ch, и текст центрировался внутри этой узкой
   коробки, а не по блоку. Утилите предел снимается. */
.center { text-align: center; max-width: none; }
.head--center { align-items: center; text-align: center; }
.head--center h2 { max-width: 22ch; }
.head--center p { max-width: 60ch; }

/* Раздел, открытый мелкой меткой слева и широким текстом справа — асимметрия
   один к трём вместо равных половин. Тот же референс, блок «О компании». */
.aside-lead {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) 3fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.aside-lead > .label { padding-top: 8px; }
/* Оба абзаца одного кегля: раньше первый шёл вводным размером, второй обычным,
   и текст выглядел так, будто вторая половина менее важна */
.aside-lead p { max-width: 62ch; font-size: var(--fs-lead); line-height: 1.5; }

@media (max-width: 860px) {
  .aside-lead { grid-template-columns: 1fr; gap: 16px; }
}

/* Точечная текстура — кладётся на чёрные полосы */
.dots::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.07;
  pointer-events: none;
}
.dots > * { position: relative; }

/* Лаймовое размытое пятно — декор для светлых полос */
.blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lime) 0%, color-mix(in srgb, var(--lime) 35%, transparent) 45%, transparent 70%);
  filter: blur(30px);
  opacity: 0.55;
  pointer-events: none;
}

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

/* Шапка лежит поверх первого экрана и своего фона не имеет: сквозь неё виден
   верх градиента, поэтому меню не читается отдельной полосой над героем.
   Фон появляется только когда герой ушёл вверх и меню оказалось на светлом
   содержимом страницы. */
header.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  transition: background .25s ease, box-shadow .25s ease;
}

/* Фон непрозрачный: полупрозрачная шапка при прокрутке накладывалась на
   заголовки и текст первого экрана, буквы просвечивали друг сквозь друга */
header.top.is-stuck {
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
}

.top-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  flex: none;
  text-decoration: none;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand img { display: block; height: 30px; width: auto; }
.mark-trail { fill: none; stroke: var(--lime); stroke-width: 6.5; stroke-linecap: round; }

.nav { margin-left: auto; }
.nav > summary {
  display: none;
  list-style: none;
  cursor: pointer;
}
.nav > summary::-webkit-details-marker { display: none; }

nav.pages {
  display: flex;
  gap: 2px;
}

/* Текущая страница обозначена начертанием и цветом, без плашки:
   капсула поверх прозрачной шапки выглядит наклейкой */
nav.pages a {
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--fs-small);
  /* 58 % давали на лаймовом первом экране 4.41:1 при норме 4.5 */
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  padding: 8px 12px;
  transition: color .18s ease;
}
nav.pages a:hover { color: var(--ink); }
nav.pages a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------------- Кнопки ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: var(--fs-ui);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:active { transform: scale(0.98); }

.btn--dark { background: var(--black); color: var(--white); }
.btn--dark:hover { background: #2A2E26; }

.btn--lime { background: var(--lime); color: var(--black); }
.btn--lime:hover { background: var(--lime-soft); }

/* Обводка 30 % давала на лаймовом фоне 1.96:1 — норма для границ
   элементов управления 3:1 (WCAG 1.4.11) */
.btn--ghost { border-color: color-mix(in srgb, currentColor 48%, transparent); color: inherit; }
.btn--ghost:hover { border-color: currentColor; }

/* Место, где будет кнопка магазина. Приложение ещё не опубликовано, ссылки на
   карточку не существует, поэтому здесь метка состояния, а не кнопка: кнопка
   обещала бы действие, которого нет, а приглушённая кнопка на лаймовой плите
   вдобавок почти не видна. */
.wait {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-ui);
  font-weight: 500;
}
.wait::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime-ink);
}

/* Ссылка на магазин — не кнопка: выбор платформы, а не выбор «делать или нет» */
.storelink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: var(--fs-ui);
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--ink) 18%, transparent);
  transition: color .18s ease, border-color .18s ease;
}
.storelink:hover { color: var(--ink); border-bottom-color: var(--ink); }

.btn .arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: var(--fs-cap);
  line-height: 1;
  transition: transform .18s ease;
}
.btn:hover .arrow { transform: translate(2px, -2px); }

/* ---------------- Пилюли и чипсы ---------------- */

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

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.pill--dark  { background: var(--black); color: var(--white); }
.pill--lime  { background: var(--lime); color: var(--black); }
.pill--ghost { border: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.pill--outline-dark { border: 1px solid var(--dark-line); color: var(--dark-ink); }

/* Плоские маркеры-факты. Отличаются от кнопок формой, иначе рядом с кнопкой
   в герое читаются как второй ряд действий и отбирают у неё вес */
/* Маленькие плашки вместо строки, разделённой точками: точка ставилась только
   между словами, поэтому первый пункт выглядел обрубленным, а на переносе
   разделители оказывались в начале строки */
.facts-flat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.facts-flat span {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.6);
  color: color-mix(in srgb, var(--black) 72%, transparent);
  font-size: var(--fs-cap);
  line-height: 1.2;
  white-space: nowrap;
}

/* Разбросанные под углом — приём с лаймовых плит */
.pills--tilt { gap: 12px; max-width: 520px; }
.pills--tilt .pill:nth-child(odd)  { transform: rotate(-3deg); }
.pills--tilt .pill:nth-child(even) { transform: rotate(2.5deg); }

/* ---------------- Герой ---------------- */

/* Верхний отступ включает высоту шапки: она лежит поверх героя,
   а градиент начинается от самого верха экрана */
/* Отступы посчитаны так, чтобы первый экран продукта целиком помещался в
   ноутбучные 900 точек вместе с шапкой: шапка 68 + отступы 176 + контент 460 */
/* Первый экран одной высоты на всех шести страницах. Было от 439 точек на
   условиях до 640 на партнёрах: высоту задавало содержимое, а его на страницах
   разное количество — где-то плашки над заголовком, где-то лид в три строки,
   где-то картинка. При переходе между страницами шапка и заголовок прыгали.
   Теперь высота задана, содержимое выравнивается по центру полосы, а картинка
   ограничена по высоте, чтобы не растягивать экран сверх этой меры. */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(170deg, var(--lime-soft) 0%, var(--lime-pale) 78%);
  color: var(--black);
  padding: calc(clamp(28px, 3.2vw, 48px) + 68px) 0 clamp(40px, 5vw, 72px);
  display: grid;
  align-content: center;
  min-height: 560px;
}
@media (max-width: 900px) {
  .hero { min-height: 460px; }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

/* Первый экран, на который сверху наезжает плита: снизу нужен запас,
   иначе плита садится на текст и на слот с картинкой */
.hero--before-slab { padding-bottom: 130px; }

/* Экран-заявление: заголовок слева, само заявление справа.
   Две колонки уже пробовали и отменили — текст справа начинался выше заголовка
   и читался раньше него. Возвращены 14.08 с выравниванием по верхнему краю:
   заголовком стало одно слово «Дисклеймер», в одну колонку оно занимало 324
   точки из 1240 и справа оставалось 892 точки пустоты, а несущее утверждение
   про отсутствие серверов оказывалось вдвое шире собственного заголовка.
   Порядок чтения при этом сохранён: в разметке заголовок по-прежнему первый. */
.hero--statement { padding-bottom: clamp(64px, 9vw, 120px); }
.hero--statement .wrap {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) 1.4fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.hero--statement .statement-copy { display: flex; flex-direction: column; gap: 14px; max-width: 62ch; }
/* Крупнее обычного вводного абзаца: это главное утверждение страницы, ради
   него сюда заходит проверяющий App Store. Ступень из общей шкалы. */
.hero--statement .lead {
  font-size: var(--fs-mid);
  line-height: 1.28;
  color: color-mix(in srgb, var(--black) 76%, transparent);
}

@media (max-width: 900px) {
  .hero--statement .wrap { grid-template-columns: 1fr; gap: clamp(20px, 2.4vw, 32px); }
  .hero--statement .lead { font-size: var(--fs-lead); line-height: 1.5; }
}

.hero-copy { display: flex; flex-direction: column; gap: 18px; }
/* Заголовок первого экрана мельче общего h1: в 72 точки он занимал четыре
   строки и выталкивал остальное за нижний край экрана */
.hero-copy h1 { max-width: 16ch; }
.hero-copy .lead { max-width: 46ch; color: color-mix(in srgb, var(--black) 78%, transparent); }
.hero .label { color: color-mix(in srgb, var(--black) 55%, transparent); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }


/* ---------------- Слот под изображение ----------------
   Временный блок на месте будущей 3D-иллюстрации.
   Когда картинка готова — заменить на <img>. */

.imgslot {
  position: relative;
  display: grid;
  place-items: center;
  /* Без этого две подписи расползаются по верху и низу слота: каждая строка
     сетки центрируется в своей полосе, а не блок целиком */
  align-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  border: 2px dashed color-mix(in srgb, currentColor 28%, transparent);
  border-radius: var(--r-card);
  background: color-mix(in srgb, currentColor 5%, transparent);
}
.imgslot .name { font-size: var(--fs-small); font-weight: 500; }
.imgslot .hint { font-size: var(--fs-micro); opacity: 0.7; max-width: 34ch; }
.imgslot--square { aspect-ratio: 1 / 1; }
/* Картинка первого экрана вместо слота-заглушки. Ширина ограничена размером
   исходника (574 точки): растянутая шире, она мылится. Прижата к правому краю
   колонки, как был слот. */
/* Ширина ограничена размером колонки, высота — мерой первого экрана: без
   потолка по высоте портретная картинка партнёров растягивала экран
   до 640 точек против 499 у продукта. */
.heroart {
  justify-self: end;
  width: auto;
  height: auto;
  max-width: min(100%, 500px);
  max-height: 374px;
}
/* Центрирование включается там же, где колонки схлопываются в одну. Раньше
   между этими двумя порогами было сто точек, и в них картинка оставалась
   прижатой вправо: на 950 слева пустовало 387 точек градиента, а первый экран
   вырастал с 441 точки до 795. */
@media (max-width: 1000px) {
  .heroart { justify-self: center; }
}
@media (max-width: 900px) {
  .heroart { max-width: min(100%, 420px); max-height: 300px; }
}

/* В герое слот портретный и ограничен по высоте: квадрат во всю колонку
   растягивал первый экран до полутора тысяч точек */
.hero .imgslot {
  aspect-ratio: 4 / 5;
  width: min(100%, 360px);
  max-height: 460px;
}
/* Прижимаем слот вправо только на широком экране. Раньше это стояло в базовом
   правиле, ниже медиазапроса с центрированием, и перебивало его при равной силе
   селектора: слот не центрировался вовсе, на 700 слева оставалась 301 точка
   пустого градиента. Третий случай молча не работающего стиля в проекте. */
@media (min-width: 1001px) {
  .hero .imgslot { justify-self: end; }
}
/* На планшете квадратный слот раздувается во всю ширину и выталкивает текст
   за первый экран, поэтому ограничиваем высоту */
@media (max-width: 1024px) {
  .imgslot--square { aspect-ratio: 4 / 3; max-height: 420px; }
  .imgslot--wide { max-height: 360px; }
}
.imgslot--wide   { aspect-ratio: 16 / 9; }
.imgslot--tall   { aspect-ratio: 4 / 5; }

/* ---------------- Цифры на чёрном ---------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--dark-line);
  border: 1px solid var(--dark-line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.stat {
  background: var(--dark-2);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Микроподпись над значением: без неё три ячейки читаются как набор лозунгов,
   а не как сводка */
.stat .key {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-ink-2);
}

.stat .num {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

.stat .cap { font-size: var(--fs-cap); line-height: 1.4; color: var(--dark-ink-2); max-width: 24ch; }

/* Сводка из трёх равных ячеек (страница политики) */
.stats--three { grid-template-columns: repeat(3, 1fr); }
.stats--three .num { font-size: var(--fs-mid); }

/* ---------------- Плита, наезжающая на предыдущую полосу ---------------- */

.band--overlap { padding-top: 0; }
/* Чёрная плита не должна упираться в чёрный подвал: между ними нужен
   заметный светлый промежуток, иначе низ страницы читается одним пятном */
.band:has(.slab--dark) { padding-bottom: clamp(96px, 10vw, 150px); }
/* Кнопки на тёмной плите выравниваются по началу текста, а не по его середине */
.slab--dark .split { align-items: start; }

.slab {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--overlap) * -1);
  border-radius: var(--r-slab);
  padding: clamp(32px, 4.5vw, 64px);
  background: var(--white);
  color: var(--ink);
  /* Ниже стыка плита не видна вовсе: белый край к --paper даёт контраст
     1,07:1, и на светлом фоне у плиты пропадает низ — на 1440 это 83 % её
     площади. Мягкая тень возвращает край, не добавляя рамки. */
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.07);
}

/* Плита, наезжающая на чёрную полосу, срезана сверху: скруглённые углы
   на стыке с тёмным фоном оставляли по бокам два тёмных клина */
.band--overlap .slab { border-radius: 0 0 var(--r-slab) var(--r-slab); }
.slab--dark { background: var(--dark-2); color: var(--dark-ink); }
/* Селектор с двумя классами: иначе цвет абзаца перебивает правило светлой полосы,
   и на чёрной плите получается серый текст по чёрному */
.band--light .slab--dark p,
.band--white .slab--dark p { color: var(--dark-ink-2); }
.band--light .slab--dark h2,
.band--white .slab--dark h2 { color: var(--dark-ink); }

/* Медальон на стыке плит. Вырез повторяет форму иконки приложения —
   скруглённый квадрат: круглая рамка вокруг квадратного знака смотрелась
   как деталь не от этого набора. Радиусы согласованы: у иконки скругление
   составляет примерно четверть стороны, у выреза — столько же плюс рамка. */
.medallion {
  position: absolute;
  top: 0;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 22px;
  background: var(--paper);
  display: grid;
  place-items: center;
  border: 6px solid var(--paper);
}
.medallion img { width: 52px; height: 52px; border-radius: 14px; display: block; }

/* ---------------- Шаги, нанизанные на тропу ---------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; }

.step { display: flex; flex-direction: column; gap: 12px; }

.step .n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--black);
  font-size: var(--fs-small);
  font-weight: 600;
}

.step p { font-size: var(--fs-small); line-height: 1.5; }

/* Линия-тропа между шагами, рисуется при скролле */
.trail-line { position: absolute; inset: 0 0 auto 0; height: 40px; width: 100%; pointer-events: none; }
.trail-line path {
  fill: none;
  stroke: var(--lime);
  stroke-width: 2;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.6s ease-out;
}
.trail-line.drawn path { stroke-dashoffset: 0; }

/* ---------------- Крупный список возможностей ---------------- */

.rowlist { border-top: 1px solid var(--dark-line); }

.rowlist details {
  border-bottom: 1px solid var(--dark-line);
}

.rowlist summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 8px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-row);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--dark-ink-2);
  transition: color .2s ease, padding-left .2s ease;
}
.rowlist summary::-webkit-details-marker { display: none; }
.rowlist summary:hover { color: var(--lime); padding-left: 16px; }
.rowlist details[open] summary { color: var(--dark-ink); }

/* Переключатель нарисован двумя линиями: при раскрытии вертикальная исчезает
   и плюс превращается в минус — «свернуть», а не «удалить» */
.rowlist .plus {
  position: relative;
  margin-left: auto;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--dark-line);
  border-radius: 50%;
  transition: background .2s ease, border-color .2s ease;
}
.rowlist .plus::before,
.rowlist .plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: opacity .2s ease;
}
.rowlist .plus::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.rowlist .plus::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.rowlist details[open] .plus::after { opacity: 0; }
.rowlist details[open] .plus { background: var(--lime); color: var(--black); border-color: transparent; }
.rowlist summary:hover .plus { border-color: currentColor; }

.rowlist .body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 40px;
  padding: 0 8px 26px;
}

.rowlist .body li {
  list-style: none;
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--dark-ink-2);
}
.rowlist .body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 2px;
  background: var(--lime);
}
.rowlist .body ul { margin: 0; padding: 0; display: contents; }

/* ---------------- Карточки ---------------- */

/* Высота по содержимому: при растягивании под самую длинную карточку
   у коротких оставалось до двухсот точек пустого фона */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }

.card {
  border-radius: var(--r-card);
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(17, 17, 17, 0.09); }

/* Белая карточка на светлой полосе: заливка даёт краю 1,07:1, обводка 1,22:1 —
   в покое карточки почти не отделяются от фона, и весь их край держался на
   наведении. На айфоне наведения нет вовсе, а подъём с тенью там, где карточка
   никуда не ведёт, ещё и обещает переход, которого не существует. */
.band--light .card { border-color: var(--line-strong); box-shadow: 0 2px 10px rgba(17, 17, 17, 0.05); }
.band--light .card:hover { transform: none; box-shadow: 0 2px 10px rgba(17, 17, 17, 0.05); }

.card .k { font-size: var(--fs-cap); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.card p { font-size: var(--fs-small); line-height: 1.5; }

/* Карточки-профили: «кому подходит» и подобные наборы. Растягиваются до общей
   высоты, номер вынесен в лаймовый кружок, у каждой свой заголовок — иначе
   получается три абзаца разного роста, за которые глазу не зацепиться. */
/* Ряд карточек одной высоты. Обычные карточки живут по содержимому: при
   растягивании под самую длинную у коротких оставалось до двухсот точек
   пустоты. Но когда карточек три и они об одном, ровный ряд читается лучше. */
.cards--even { align-items: stretch; }

/* Четыре в ряд — для коротких карточек вроде чек-листа письма */
.cards--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .cards--four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .cards--four { grid-template-columns: 1fr; } }

.cards--profile { align-items: stretch; }
.cards--profile .card { padding: 32px 28px; gap: 10px; }
.cards--profile .k {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--black);
  font-size: var(--fs-cap);
  font-weight: 600;
}
.cards--profile h3 { font-size: var(--fs-h3); }
.cards--profile p { color: var(--ink-2); }
/* На белой полосе белая карточка с тонкой рамкой почти не читается —
   подложка становится светло-серой, как в референсе со светлым фоном */
.band--white .cards--profile .card { background: var(--paper); border-color: transparent; }
.band--white .cards--profile .card:hover { box-shadow: 0 10px 28px rgba(17, 17, 17, 0.07); }

/* Знак поставщика в карточке: настоящих логотипов партнёров у нас нет — до
   тех пор буква в лаймовом квадрате по форме иконки приложения */
.brandmark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 14px;
  background: var(--lime);
  color: var(--black);
  font-size: var(--fs-h4);
  font-weight: 600;
}
.brandmark--empty { background: transparent; border: 1px dashed var(--dark-line); color: var(--dark-ink-2); }
.card--muted { opacity: 0.75; }

.card--lime { background: var(--lime); border-color: transparent; }
.card--lime p, .card--lime .k { color: color-mix(in srgb, var(--black) 72%, transparent); }
.card--dark { background: var(--dark-2); border-color: var(--dark-line-2); color: var(--dark-ink); }
.card--dark p { color: var(--dark-ink-2); }

/* ---------------- Бегущая строка ---------------- */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--dark-line);
  border-bottom: 1px solid var(--dark-line);
  padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: run 26s linear infinite;
}

.marquee span {
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-ink-2);
  white-space: nowrap;
}
.marquee span::after { content: " ●"; color: var(--lime); }

@keyframes run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------- Две колонки ---------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.split--start { align-items: start; }
/* Документ с оглавлением сбоку. Ширины заданы классом, а не в разметке:
   инлайновый стиль не переопределяется медиазапросом и ломает мобильную раскладку. */
.split--doc { grid-template-columns: 280px 1fr; align-items: start; }

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

/* Подвал того же цвета, что тёмная полоса, и без границы они сливались в одно
   пятно: на странице продукта от начала последней тёмной полосы до низа
   подвала шло 1881 точка сплошного чёрного, 40 % страницы, а шва между ними
   не было вовсе — контраст 1,00:1. Теперь у подвала есть собственный край.
   Ниже, рядом с полосами, последней тёмной полосе срезан нижний отступ:
   между ней и первой строкой подвала пустовало 192 точки. */
footer {
  background: var(--black);
  color: var(--dark-ink);
  padding: clamp(48px, 6vw, 80px) 0 40px;
  border-top: 1px solid color-mix(in srgb, var(--dark-line) 30%, var(--dark-ink-2) 70%);
}

.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.foot h3 { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); margin-bottom: 16px; }
.foot ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.foot a { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--fs-small); text-decoration: none; color: var(--dark-ink-2); }
.foot a:hover { color: var(--dark-ink); text-decoration: underline; text-underline-offset: 3px; }
.foot p { font-size: var(--fs-cap); line-height: 1.5; color: var(--dark-ink-2); }

.legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--dark-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: var(--fs-micro);
  color: var(--dark-ink-2);
}

/* ---------------- Вопросы-ответы на светлой полосе ---------------- */

/* Строка вопроса не растягивается на всю ширину полосы: иначе между текстом
   и переключателем остаётся полметра пустоты */
/* По центру, а не по левому краю: соседний блок «Что приложить к письму»
   центрирован, и справа от списка вопросов оставалось 292 точки пустоты
   на всю его высоту — страница читалась недовёрстанной */
/* Список по центру полосы, и заголовок над ним тоже центрированный: иначе
   заголовок вставал на 218 точек левее списка и терял связь с тем, что
   называет. Пара «центрированный заголовок + центрированный список» —
   решение заказчика от 14.08. */
.rowlist--light { border-top: 1px solid var(--line); max-width: 900px; margin-inline: auto; }
.rowlist--light .plus { border-color: var(--line-strong); color: var(--ink-2); }
.rowlist--light summary { gap: 24px; }
.rowlist--light details { border-bottom: 1px solid var(--line); }
.rowlist--light summary { font-size: var(--fs-row); color: var(--ink); font-weight: 500; }
.rowlist--light summary:hover { color: var(--lime-ink); }
.rowlist--light details[open] summary { color: var(--ink); }
.rowlist--light .plus { border-color: var(--line-strong, var(--line)); color: var(--ink-2); }
.rowlist--light details[open] .plus { background: var(--lime); color: var(--black); border-color: transparent; }
.rowlist--light .body { display: block; padding-bottom: 24px; }
.rowlist--light .body p { color: var(--ink-2); font-size: var(--fs-body); margin-bottom: 10px; }
.rowlist--light .body p:last-child { margin-bottom: 0; }
.rowlist--light .body ol { margin: 0; padding-left: 22px; color: var(--ink-2); font-size: var(--fs-body); display: flex; flex-direction: column; gap: 8px; }
/* Пункты списка внутри ответа наследовали цвет тёмных полос (--dark-ink-2) и
   давали на белом контраст 2.24:1 — светлый вариант переопределял абзацы и
   нумерованные списки, а маркированные пропустил */
.rowlist--light .body li { color: var(--ink-2); font-size: var(--fs-body); }
.rowlist--light .body li::before { background: var(--lime-ink); }

/* ---------------- Пары «вопрос → к кому» ---------------- */

.duos { display: flex; flex-direction: column; }

.duo {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 12px 40px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.duo:last-child { border-bottom: 1px solid var(--line); }
.duo .q { font-weight: 500; }
.duo .a { color: var(--ink-2); font-size: var(--fs-body); }

.band--dark .duo { border-color: var(--dark-line); }
.band--dark .duo .a { color: var(--dark-ink-2); }

/* ---------------- Списки с галочками ---------------- */

.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }

.checks li {
  position: relative;
  padding-left: 30px;
  font-size: var(--fs-ui);
  line-height: 1.5;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 7px;
  border-left: 2px solid var(--lime);
  border-bottom: 2px solid var(--lime);
  transform: rotate(-45deg);
}

/* На лаймовом фоне лаймовая галочка сливается — переводим её в чёрный */
.card--lime .checks li::before,
.band--lime .checks li::before { border-color: var(--black); }

/* Номера шагов на лаймовой полосе: инвертируем, иначе кружок теряется в фоне */
.band--lime .vsteps li::before { background: var(--black); color: var(--lime); }
.band--lime .vsteps li { border-color: color-mix(in srgb, var(--black) 16%, transparent); }

/* Ссылка внутри пункта списка: подчеркивание браузерное, наведение — как у
   прочих текстовых ссылок на светлых полосах */
.checks a { text-underline-offset: 3px; }
.checks a:hover { color: var(--lime-ink); }

/* История маркеров в сопоставлении сторон, чтобы не ходить по кругу.
   Сначала у чужой стороны стоял прочерк — модификатор «чего приложение НЕ
   делает». Пара «галочка / прочерк» читалась как «да / нет», хотя правый
   список перечисляет то, что провайдер как раз делает: выдает ключ, берет
   оплату; для проверки App Store это худшее место для знака отрицания.
   Прочерк заменили нейтральной серой точкой, а 14.08 по решению заказчика
   обе стороны получили одинаковый маркер — лаймовую галочку. Оба списка
   перечисляют, что сторона делает, поэтому знак у них общий, а различает
   стороны заголовок. Модификатор `.checks--other` удален как ненужный. */

/* Тот же список, но перечисляет, чего приложение НЕ делает */
.checks--no li::before {
  content: "";
  top: 11px;
  width: 13px;
  height: 0;
  border-left: none;
  border-bottom: 2px solid color-mix(in srgb, currentColor 45%, transparent);
  transform: none;
}

/* ---------------- Вертикальные шаги с нумерацией ---------------- */

.vsteps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; counter-reset: v; }

.vsteps li {
  counter-increment: v;
  position: relative;
  padding: 20px 0 20px 60px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-ui);
  line-height: 1.5;
}

.vsteps li::before {
  content: counter(v);
  position: absolute;
  left: 0;
  top: 18px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  color: var(--black);
  font-size: var(--fs-cap);
  font-weight: 600;
}

.band--dark .vsteps li { border-color: var(--dark-line); color: var(--dark-ink-2); }

/* ---------------- Врезка-предупреждение ---------------- */

/* Врезка без рамки. Раньше это была карточка с тонкой обводкой по кругу и
   яркой полоской слева — приём, который встречается на каждом втором сайте.
   Теперь опознавательный знак один: короткий лаймовый штрих сверху, обрывок
   той же тропы, что и в логотипе. Фон плотный, границ нет. */
.note {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: none;
  background: none;
}
/* Штрих — первый элемент в потоке, а не абсолютный: на скруглённом углу
   позиционированная полоска зрительно отрывалась от плашки */
.note::before {
  content: "";
  display: block;
  flex: none;
  width: 44px;
  height: 4px;
  margin-bottom: 2px;
  border-radius: 2px;
  background: var(--lime);
}
.note h3 { font-size: var(--fs-h4); }
.note p { font-size: var(--fs-body); }

/* Внутри плит и карточек врезке нужен собственный фон, иначе она сливается
   с соседним текстом — там штрих остаётся, а блок получает подложку */
.note--boxed { padding: 24px; border-radius: var(--r-card); background: var(--paper); }
.band--light .note--boxed { background: var(--white); }
.band--dark .note--boxed { background: var(--dark-2); }
.band--lime .note--boxed { background: rgba(255, 255, 255, 0.72); }

/* Сильная врезка — для предупреждений, которые нельзя пролистать: тёмная
   плашка на светлой полосе. Контраст делает работу, которую раньше пыталась
   делать цветная полоска сбоку. */
.note--strong { background: var(--dark-2); color: var(--dark-ink); }
.band--light .note--strong,
.band--white .note--strong { background: var(--dark-2); }
.band--light .note--strong h3,
.band--white .note--strong h3 { color: var(--dark-ink); }
.band--light .note--strong p,
.band--white .note--strong p { color: var(--dark-ink-2); }
.note--strong a { color: var(--lime); }

/* ---------------- Юридический документ ---------------- */

/* Колонка сужена до ~70 знаков в строке: на 760px глаз терял начало строки */
.doc { max-width: 680px; display: flex; flex-direction: column; gap: 44px; }

.doc-meta { font-size: var(--fs-small); color: var(--ink-3); }

/* section по умолчанию блочный, поэтому gap без flex не действует
   и заголовок слипается с текстом */
.doc section { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 96px; padding-top: 28px; border-top: 1px solid var(--line); }
.doc section:first-child { padding-top: 0; border-top: none; }

/* Номер раздела висит слева от заголовка и работает ориентиром при поиске пункта */
.doc h3 { line-height: 1.2; text-indent: -2.1em; padding-left: 2.1em; }

/* Подзаголовки внутри раздела — самое читаемое место для проверяющего,
   поэтому отличаются не только жирностью */
.doc h4 {
  margin-top: 14px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.doc h3 { font-size: var(--fs-h3); }
.doc p { font-size: var(--fs-body); color: var(--ink-2); }

.doc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.doc ul li { position: relative; padding-left: 18px; font-size: var(--fs-body); color: var(--ink-2); }
.doc ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 2px; background: var(--lime); }

.doc h4 { font-size: var(--fs-body); margin-top: 6px; }

/* Оглавление остаётся на экране всю прокрутку документа: иначе после первого
   экрана левая колонка пустует, а искать нужный пункт негде */
.toc {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 120px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
  padding: 22px 24px;
}
.toc h2 { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
.toc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; }
.toc a { display: inline-flex; align-items: center; min-height: 38px; font-size: var(--fs-small); color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- Контакт ---------------- */

/* ---------------- Блок призыва к действию ----------------
   Один компонент на все страницы, в двух видах: лаймовый и тёмный. Текст
   слева, действие справа в своей колонке — раньше кнопка стояла в середине
   разворота и справа от неё оставалась пустая половина блока. */

.cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-slab);
}

/* Якорь ведёт на саму плиту, а шапка висит поверх страницы: без запаса она
   срезала на телефоне верх плиты и первое слово заголовка целиком.
   tabindex в разметке — чтобы после перехода фокус попадал на цель: в WebKit
   на нефокусируемый элемент он не переносится, и следующий Tab начинал обход
   заново сверху. Тот же случай уже чинили у main. */
#get { scroll-margin-top: 92px; }

/* Плита действия внутри тёмной полосы: отбита от мозаики сильнее, чем плитки
   отбиты друг от друга. При общем шаге стопки в 40 точек она по расстоянию
   читалась седьмой плиткой мозаики, а не выводом страницы. */
.band--dark .cta { margin-top: clamp(24px, 3vw, 40px); }

.cta--lime { background: var(--lime); color: var(--black); }
/* На лаймовой плите белая капсула — единственный залитый объект, и стоит она
   там, где ждут кнопку магазина: то есть обещает нажатие, которого нет.
   Полупрозрачная плашка обычного начертания читается меткой состояния. */
.cta--lime .wait {
  background: color-mix(in srgb, var(--white) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--black) 22%, transparent);
  font-weight: 400;
}
.cta--dark { background: var(--dark-2); color: var(--dark-ink); }
/* Светлая карточка — для блока внутри лаймовой полосы: тёмная там оказалась бы
   вплотную к тёмному подвалу, лаймовая слилась бы с фоном. */
.cta--paper { background: var(--white); color: var(--ink); }
.cta--paper .cta-copy p { color: var(--ink-2); }
/* Капсула состояния «Скоро в App Store» залита белым, и на белой плите она
   пропадает целиком: фон в фон, обводки у неё нет. */
.cta--paper .wait { background: var(--paper); border: 1px solid var(--line-strong); }

/* Узкая плита в колонку: текст сверху, кнопка под ним. Нужна там, где призыв
   стоит не во всю ширину полосы, а в половине — рядом с содержательным
   блоком. В два столбца на такой ширине заголовок ломается по слогам,
   а кнопка сжимается до высоты строки. */
.cta--stack {
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(20px, 2.4vw, 28px);
}
.cta--stack .cta-copy h3 { font-size: var(--fs-h3); line-height: 1.12; }
.cta--dark .cta-copy h3 { color: var(--dark-ink); }
.cta--stack .cta-copy p { max-width: 42ch; }

.cta-copy { display: flex; flex-direction: column; gap: 14px; }
/* Заголовок блока набирается в две строки, и при высоте строки 1 нижняя
   почти касалась текста под ней */
/* 18ch ломали длинный заголовок на три строки при доступных 781 точке, и
   справа оставалась пустая половина плиты. Короткие заголовки на других
   страницах от этого не меняются — они и так в одну строку. */
.cta-copy h2 { max-width: 22ch; line-height: 1.08; }
.cta-copy p { max-width: 54ch; font-size: var(--fs-body); }
.cta--lime .cta-copy p { color: color-mix(in srgb, var(--black) 76%, transparent); }
.cta--dark .cta-copy p { color: var(--dark-ink-2); }
.cta--dark .cta-copy h2 { color: var(--dark-ink); }

.cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cta-actions .small { font-size: var(--fs-cap); opacity: 0.75; }
.cta--dark .cta-actions .small { color: var(--dark-ink-2); opacity: 1; }

/* Ссылка-почта внутри текста блока остаётся текстом, а не второй кнопкой */
.cta-copy a { color: inherit; }

@media (max-width: 860px) {
  .cta { grid-template-columns: 1fr; gap: 24px; }
}

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

/* Прячем блоки до проявления только тогда, когда скрипт точно выполнился: класс
   js ставит он сам, первой строкой в head. Прежняя защита через noscript ловила
   выключенный JavaScript, но не упавший или заблокированный файл — а так скрыто
   до 91 % страницы условий. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .trail-line path { transition: none; stroke-dashoffset: 0; }
  .card:hover { transform: none; }
}

/* ---------------- Полоса-тропа: кто в цепочке что делает ----------------
   Третий заход на этот блок. Сначала были три коробки со стрелками — читались
   чертежом. Потом плоский список `.roles` с лаймовыми кружками — ревью 14.08
   показало, что схемой он не выглядит вовсе: связи между пунктами нет,
   направления нет, наша роль отличается только цветом кружка.

   Теперь через всю ширину плиты идёт одна линия, разрезанная на три отрезка по
   числу ролей. Крайние лаймовые, средний чёрный — это мы, и видно, что мы
   посередине, а серверы на том конце. Приём в системе уже был: короткий
   лаймовый штрих сверху у врезок и у нашей стороны в сопоставлении. Здесь он
   растянут на ширину колонки. */

.chain {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chain li { position: relative; padding-top: 26px; }

/* Отрезки смыкаются в одну непрерывную линию: каждый вылезает за свою колонку
   на половину межколоночного зазора с обеих сторон. Крайние наружу не лезут. */
/* Скругление только на внешних концах линии. Когда оно стояло у всех четырёх
   углов каждого отрезка, на стыках сходились два полукруга и линия физически
   рвалась: толщина падала с шести точек до нуля в точке касания. На узком
   экране три отрезка читались тремя отдельными палками — то есть ровно тем,
   от чего уходили. */
.chain li::before {
  content: "";
  position: absolute;
  top: 0;
  left: -14px;
  right: -14px;
  height: 6px;
  border-radius: 0;
  background: var(--lime);
}
.chain li:first-child::before { left: 0; border-radius: 3px 0 0 3px; }
.chain li:last-child::before { right: 0; border-radius: 0 3px 3px 0; }
/* Средняя роль — наша */
.chain li.is-us::before { background: var(--black); }

/* Ссылка, встроенная в абзац на белой плите: цветом она совпадала с текстом
   до последней единицы, и отличало её только браузерное подчёркивание. */
/* Ссылка на сайт партнёра — отдельной строкой под описанием карточки. Внутри
   абзаца она терялась: набрана тем же кеглем, а нажимать по ней нужно. */
.cardlink { margin-top: 12px; font-size: var(--fs-small); }
.cardlink a { color: var(--lime); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--lime) 45%, transparent); padding-bottom: 2px; }
.cardlink a:hover { border-bottom-color: var(--lime); }
/* Стрелка без кружка и того же кегля, что строка: кружок здесь читался бы
   кнопкой, а мелкий шрифт внутри него — 11 точек — ниже нашего порога. */
.cardlink .arrow { font-size: inherit; line-height: 1; }

.slab .head p a { color: var(--lime-ink); text-underline-offset: 3px; }
.slab .head p a:hover { color: var(--ink); }

.chain strong { display: block; font-size: var(--fs-h4); font-weight: 600; }
.chain span { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--ink-2); }

/* На узком экране линия встаёт вертикально и идёт слева вдоль ролей — тем же
   приёмом, что тропа между шагами подключения. Раньше отрезки оставались
   горизонтальными шапками над каждой ролью: три коротких черты одна под
   другой, и метафора пути пропадала, а с ней и вся схема. Отрезки заходят
   на половину промежутка сверху и снизу, поэтому линия читается непрерывной,
   а цвет по-прежнему показывает, что посередине — мы. */
@media (max-width: 860px) {
  .chain { grid-template-columns: 1fr; gap: 26px; }
  .chain li { padding-top: 0; padding-left: 26px; }
  .chain li::before {
    left: 0;
    right: auto;
    top: -13px;
    bottom: -13px;
    width: 6px;
    height: auto;
  }
  .chain li:first-child::before { top: 0; border-radius: 3px 3px 0 0; }
  .chain li:last-child::before { bottom: 0; border-radius: 0 0 3px 3px; }
}

/* ---------------- Две стороны: мы и провайдер ----------------
   Сопоставление вместо таблицы вопрос-ответ: два столбца-карточки, у каждого
   свой заголовок и свой список. Наша сторона стоит первой.
   Класс `.side--us` с 14.08 не задаёт ничего: подсветка была штрихом, штрихи
   убраны, и вся разница между сторонами теперь в маркере списка. Класс
   оставлен крючком на случай, если различение придётся усиливать. */

/* Высота общая: две стороны читаются парой, а не двумя разными блоками.
   Промежуток не меньше внутреннего отступа карточки: при 20 точках между
   сторонами и 36 внутри них воздуха внутри было больше, чем между, и пара
   читалась одним списком в две колонки — а блок существует ради
   противопоставления. */
.duel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 2.6vw, 36px); align-items: stretch; }
.duel .side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--r-card);
  background: var(--white);
  border: 1px solid var(--line);
}
/* Штрихов над заголовками сторон больше нет. Лаймовый у нашей стороны и
   бежевый у чужой стояли с 13.08 как замена сплошной лаймовой заливке;
   убраны 14.08 по решению заказчика вместе с переносом блока на чёрную
   полосу. Стороны различаются заголовком и маркером списка. */

/* Блок переехал на чёрную полосу: карточки берут тон карточек тёмной полосы.
   Обводка сильнее обычной для тёмных карточек: заливка даёт к фону полосы
   всего 1,11:1, а здесь весь смысл в том, что сторон две и они разные —
   край обязан быть виден. 1,46:1 → 2,46:1. */
.band--dark .duel .side {
  background: var(--dark-2);
  border-color: var(--dark-line-2);
  color: var(--dark-ink);
}
.band--dark .duel .side li { color: var(--dark-ink-2); }
/* Заголовки сторон обычного цвета. Лаймовый у нашей сначала поставили, чтобы
   различать карточки, но заголовки цветом мы не выделяем — решение заказчика
   от 14.08. Стороны различают сами слова: «Tropa» и «Провайдер серверов». */
.duel .side h3 { font-size: var(--fs-h3); }
.duel .side ul { display: flex; flex-direction: column; gap: 10px; }
.duel .side li { font-size: var(--fs-small); line-height: 1.5; }

@media (max-width: 900px) { .duel { grid-template-columns: 1fr; } }

/* ---------------- Мозаика ----------------
   Плитки разного размера в одной сетке — приём из криптореференса. Нужен там,
   где четыре карточки подряд одного роста читаются как таблица. */

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bento .tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-card);
  background: var(--dark-2);
  border: 1px solid var(--dark-line-2);
  color: var(--dark-ink);
}
.bento .tile h3 { font-size: var(--fs-h3); color: var(--dark-ink); }
.bento .tile p { font-size: var(--fs-small); line-height: 1.5; color: var(--dark-ink-2); }
.bento .tile--wide { grid-column: span 2; }
/* Во всю ширину — иначе последняя широкая плитка оставляет дыру справа */
.bento .tile--full { grid-column: 1 / -1; }
.bento .tile--lime { background: var(--lime); border-color: transparent; color: var(--black); }
.bento .tile--lime h3 { color: var(--black); }
.bento .tile--lime p { color: color-mix(in srgb, var(--black) 74%, transparent); }

@media (max-width: 1000px) {
  .bento { grid-template-columns: 1fr; }
  .bento .tile--wide { grid-column: auto; }
}

/* ---------------- Полноширинное предупреждение ----------------
   Для одного важного утверждения, которое нельзя пролистать. Раньше такое
   стояло карточкой в правой колонке очередного двухколонника и терялось. */

.warn {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  padding: clamp(32px, 4.5vw, 56px);
  border-radius: var(--r-slab);
  background: var(--dark-2);
  color: var(--dark-ink);
}
.warn h2 { max-width: 24ch; }
/* Первый абзац — сам текст предупреждения, он набирается основным цветом:
   приглушённый серый на тёмном читался как сноска */
.warn p { max-width: 68ch; color: var(--dark-ink); }
.warn p + p { color: var(--dark-ink-2); font-size: var(--fs-small); }
.warn .label { color: var(--lime); }

/* Светлый вариант — когда предупреждение стоит перед тёмным подвалом
   и вторая тёмная плита подряд слепила бы низ страницы в одно пятно.
   Стоит ПОСЛЕ базовых правил: раньше он был выше, а вес селекторов
   одинаковый, поэтому цвета тёмной плиты доставались светлой — метка
   «Осторожно» набиралась лаймом по светлому (контраст 1.40:1). */
.warn--light { background: var(--paper); color: var(--ink); }
/* На светлой полосе подложка меняется на белую, иначе плита сливается с фоном */
.band--light .warn--light { background: var(--white); }
.warn--light p { color: var(--ink); }
.warn--light p + p { color: var(--ink-2); }
.warn--light .label { color: var(--lime-ink); }

/* ---------------- Служебное ----------------
   Ссылка в обход шапки: человек на одной клавиатуре или с программой чтения
   с экрана иначе проходит логотип и шесть пунктов меню заново на каждой
   странице. Видна только когда на неё встал фокус. */

/* Видно только программе чтения с экрана: подсказки вроде «откроется
   в новой вкладке», которые глазами читаются по значку. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--black);
  color: var(--white);
  border-radius: 0 0 var(--r-card) 0;
  font-size: var(--fs-ui);
  text-decoration: none;
}
.skip:focus { left: 0; }

/* Надзаголовок первого экрана: связывает страницу с пунктом меню, когда
   заголовок говорит о содержании, а не называет раздел */
.eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 14px;
}

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

/* Меню прячется под кнопку, когда шесть пунктов перестают помещаться в строку */
@media (max-width: 900px) {
  .nav > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    /* Контурная, а не чёрная: рядом в первом экране стоит чёрная кнопка
       действия того же размера, и две одинаковые капсулы в одном экране
       не давали понять, где меню, а где установка */
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
    color: var(--ink);
    font-size: var(--fs-small);
    font-weight: 500;
    min-height: 44px;
  }
  .nav > summary::after { content: "▾"; font-size: var(--fs-label); }
  .nav[open] > summary::after { content: "▴"; }

  .nav nav.pages {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: 0 14px 30px rgba(17, 17, 17, 0.12);
  }
  .nav:not([open]) nav.pages { display: none; }
  .nav nav.pages a { min-height: 46px; display: flex; align-items: center; }
}

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .split--doc { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats--three { grid-template-columns: 1fr; }
  /* Три карточки в две колонки оставляют дыру во втором ряду */
  .cards { grid-template-columns: 1fr; }
  /* Липкость снимается вместе с двумя колонками: в одноколоночной сетке
     оглавление переставало быть привязано к своей колонке и висело поверх
     текста документа — буквы печатались по буквам */
  .toc { max-width: 520px; position: static; max-height: none; overflow: visible; }
  .split { grid-template-columns: 1fr; }
  /* Тропа между шагами становится вертикальной: горизонтальная линия
     на узком экране не помещается, а без неё метафора пути пропадает */
  .steps { grid-template-columns: 1fr; gap: 20px; }
  .trail-line { display: none; }
  .step { position: relative; padding-left: 52px; }
  .step .n { position: absolute; left: 0; top: 0; width: 34px; height: 34px; font-size: var(--fs-cap); }
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 38px;
    bottom: -20px;
    width: 2px;
    background: color-mix(in srgb, var(--lime) 60%, transparent);
  }
  .foot { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --fs-body: 16px; --overlap: 48px; }
  .slab { padding: 26px 20px; border-radius: 28px; }
  .cards { grid-template-columns: 1fr; }
  .rowlist .body { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
  .medallion { width: 60px; height: 60px; }
  .pills--tilt .pill { transform: none !important; }
  .duo { grid-template-columns: 1fr; gap: 6px; }
  .vsteps li { padding-left: 48px; }
}