/* ═══════════════════════════════════════════════════════════════════════
   LIDERIK · лендинг · тексты v4.1
   Оформление по брендбуку: прямые углы везде, форму держит заливка,
   кобальт только на действиях и цифрах, одна кривая на всю систему.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Палитра брендбука (раздел 02) ─────────────────────────────────────── */
:root {
  --white: #ffffff;
  --paper: #f3f3f6;
  --ink: #13131b;
  --ink-2: #5a5a66;
  --accent: #2b39ff;
  --accent-hover: #1f2ad9;
  --accent-tint: #e7e9ff;
  --line: #e7e7ec;
  --dark: #15151c;

  /* Пастельные категории: тон выбирается по СМЫСЛУ блока. */
  --tone-a: #e6e9ff; /* ядро, продукт   */
  --tone-b: #e3f4e8; /* агенты, поток   */
  --tone-c: #ffebdf; /* аналитика, вопросы */
  --tone-d: #f0e6ff; /* знание, айдентика  */

  /* Номер секции лежит фоном, а для подложек в палитре назначен
     accent-tint. Свой, выдуманный оттенок тут стоять не должен —
     в брендбуке такого тона нет. */
  --ghost: var(--accent-tint);

  /* Одна кривая на всю систему. Линейной анимации нет. */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-hover: 150ms;
  --t-block: 300ms;

  --container: 1360px;
  --bar-h: 72px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; }

/* ── Первый экран во всю высоту устройства ─────────────────────────────── */
.hero {
  min-height: calc(100svh - var(--bar-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0 56px;
  background: var(--paper);
}

/* ── Сетка и ритм (стр. 35): контейнер 1360, поля 24 ───────────────────── */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.sec { padding: 128px 0; }
.sec-fill { background: var(--paper); }
.sec-dark { background: var(--dark); color: var(--white); }

/* ── Типографика ───────────────────────────────────────────────────────
   Заголовки набраны Inter светлого начертания: у Newsreader нет
   кириллицы, и сам брендбук набирает русские заголовки гротеском.      */
h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.03em; }
h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1.0; }
h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.04; text-wrap: balance; }
h3 { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }

.lead { font-size: 20px; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-2); }
.small { font-size: 16px; line-height: 1.45; color: var(--ink-2); }

/* Ярлык: Inter 600 · 0.78rem · только строчными · РИСОВАННАЯ заливка.
   Края чуть неровные — маркер провели рукой, а не поставили штампом.
   Углы при этом остаются прямыми: скруглений в системе нет. */
.tag {
  display: inline-block;
  padding: 5px 11px;
  background: var(--tone-a);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  transform: rotate(-0.6deg);
  /* Верх и низ идут лёгкой волной, боковые грани остаются на месте:
     прежний многоугольник срезал нижний правый угол вместе с буквой. */
  clip-path: polygon(
    0% 5%,     31% 0%,    66% 4%,    100% 1%,
    100% 95%,  67% 100%,  33% 96%,   0% 99%
  );
}
.tag-b { background: var(--tone-b); }
.tag-c { background: var(--tone-c); }
.tag-d { background: var(--tone-d); }
.tag-w { background: var(--white); }

/* ── ШАПКА СЕКЦИИ · одна система на все блоки ──────────────────────────
   Номер фоном, название на маркере, заголовок, лид. Всегда по центру.

   Номер и ярлык лежат в ОДНОЙ полосе постоянной высоты. Это принципиально:
   пока номер позиционировался от середины шапки, его положение зависело от
   того, есть у блока лид или нет, — и цифра съезжала от секции к секции,
   наезжала на заголовок и обрезалась по краю.                          */
.head { position: relative; max-width: 940px; margin: 0 auto 72px; text-align: center; }

.head-mark {
  position: relative;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.head .ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 118px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ghost);
  user-select: none;
  pointer-events: none;
}
.head-mark .tag { position: relative; z-index: 1; }
.sec-dark .head .ghost { color: #24242e; }

.head h2 { margin-top: 4px; text-wrap: balance; }
.head .lead { margin: 20px auto 0; max-width: 40em; }
.sec-dark .head h2 { color: var(--white); }
.sec-dark .head .lead { color: rgba(255, 255, 255, .72); }

/* ── Кнопки (стр. 32): 48px, поля 16×20, Inter 600, радиус 0 ───────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  font: 600 16px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-hover); color: var(--white); }
.btn-secondary { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.btn-secondary:hover { background: var(--line); color: var(--ink); }

.field {
  height: 48px;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  padding: 0 16px;
  font: 400 16px/1 Inter, system-ui, sans-serif;
  color: var(--ink);
  width: 100%;
  outline: none;
}
.field::placeholder { color: var(--ink-2); }
.field:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.sec-fill .field { background: var(--white); }

.underlink {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-hover) var(--ease);
}
.underlink:hover { text-decoration-color: var(--ink); }

/* ── Кадр и подпись (стр. 28) ──────────────────────────────────────────
   Кадр сверху, залитый блок с подписью снизу. Текст на кадр не ложится.
   Бенто: равные колонки, одна пропорция кадра, общий низ ряда.         */
.frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--line);
}
.card { display: flex; flex-direction: column; background: var(--white); }
.card-body { flex: 1; padding: 28px 30px 30px; }
.card-body h3 { margin-bottom: 12px; }
.card-body p { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
/* Текст на пастели — ВСЕГДА ink: пара «ink-2 на пастели» не согласована. */
.on-tone p, .on-tone li { color: var(--ink); opacity: .8; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

/* Цифра — кобальтом: «кобальт живёт на действиях и цифрах». */
.num { font-size: 52px; font-weight: 400; line-height: 1; letter-spacing: -0.03em; color: var(--accent); }
.num-sm { font-size: 34px; font-weight: 400; line-height: 1; letter-spacing: -0.03em; color: var(--accent); }

/* ── Шапка сайта: подложка во всю ширину, прямой угол, одна линия ─────── */
.bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
}
/* Шапка идёт во всю ширину окна, а не по контейнеру 1360: логотип прижат к
   левому краю, кнопка — к правому, как на образце. Правого поля нет намеренно
   — синяя плашка обязана доходить до края и держать всю высоту полосы. */
.bar-in {
  position: relative;
  height: var(--bar-h);
  display: flex;
  align-items: stretch;
  gap: 40px;
  padding-left: 32px;
}
.bar-logo { display: flex; align-items: center; align-self: stretch; flex-shrink: 0; }
/* 32 px по высоте локапа: на 26 знак спекался в пятно и разрыв с точкой
   переставал читаться. Брендбук держит минимум 20, здесь берём с запасом. */
.bar-logo img { height: 32px; width: auto; display: block; }
/* Меню стоит по центру ОКНА, а не после логотипа. Центр берётся абсолютным
   позиционированием: в потоке ширина логотипа слева и группы справа разная,
   и меню съезжало бы от середины на их разницу. */
.nav {
  display: flex;
  gap: 34px;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.nav a {
  display: flex;
  align-items: center;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color var(--t-hover) var(--ease);
}
.nav a:hover { color: var(--accent); }
.bar-right { margin-left: auto; display: flex; align-items: stretch; gap: 28px; }
.bar-right > a:first-child {
  display: flex; align-items: center; color: var(--ink);
  font-size: 16px; font-weight: 500;
}
.bar-right > a:first-child:hover { color: var(--accent); }
.cta-block {
  display: flex; align-items: center; padding: 0 28px;
  background: var(--accent); color: var(--white);
  font-size: 16px; font-weight: 600;
  transition: background-color var(--t-hover) var(--ease);
}
.cta-block:hover { background: var(--accent-hover); color: var(--white); }
.burger { display: none; }

/* ── Вопросы ───────────────────────────────────────────────────────────── */
.q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; text-align: left;
  border: 0; border-radius: 0; background: transparent;
  padding: 26px 0; cursor: pointer; font-family: inherit;
}
.q span:first-child { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.q .sign { flex-shrink: 0; font-size: 26px; font-weight: 300; color: var(--accent); line-height: 1; }
.q:hover span:first-child { color: var(--accent); }
.q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.a { padding: 0 48px 26px 0; color: var(--ink-2); }
.faq-item { border-top: 1px solid var(--line); }

/* ═══ ЗАСТАВКА ═══════════════════════════════════════════════════════════
   Элемент РАСКЛАДЫВАЕТСЯ: одна клетка разворачивается в поле, поле
   раскрывает страницу. Ничего не сжимается.
   ═══════════════════════════════════════════════════════════════════════ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  overflow: hidden;
}
.pf { position: absolute; inset: 0; display: grid; }

/* Клетка не двигается и не тает — ей просто меняют заливку на белую,
   мгновенно. Анимацией это не делается специально: с fill-mode браузер
   не удерживал белый поверх инлайнового фона, и часть поля оставалась
   цветной. Заливку переключает скрипт — промежуточных оттенков нет. */
.px { display: block; }

/* Кобальтовый блок в самой середине белым не становится. Когда всё
   вокруг побелело, он дважды подпрыгивает и исчезает — как курсор
   в конце строки кода. Сдвиг 8px и масштаб: ровно то, что разрешено. */
.px-seed.hop { animation: hop 420ms var(--ease) forwards; }
@keyframes hop {
  0%   { transform: translateY(0); }
  22%  { transform: translateY(-8px); }
  44%  { transform: translateY(0); }
  66%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
/* Исчезает разом, а не ужимается. */
.px-seed.gone { display: none; }

/* ── ПОЯВЛЕНИЕ ────────────────────────────────────────────────────────
   Прозрачность и сдвиг на 8px — ровно то, что брендбук разрешает
   двигать. Вращения и параллакса нет.                                 */
.up { opacity: 0; transform: translateY(8px); }
.play .up { animation: up var(--t-block) var(--ease) forwards; }
@keyframes up { to { opacity: 1; transform: translateY(0); } }

/* Появление блока. Наблюдатель висит на САМОЙ части, а не на секции:
   секция высокая, и по её верхнему краю анимация отрабатывала задолго
   до того, как содержимое попадало в кадр.
   Двигаются прозрачность, сдвиг на 8px и масштаб — ровно то, что
   разрешено (стр. 34). Вращения и параллакса нет. */
.anim {
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transition:
    opacity var(--t-block) var(--ease),
    transform var(--t-block) var(--ease);
}
.anim.in { opacity: 1; transform: none; }

.preloader.done { animation: fadeOut 260ms var(--ease) forwards; }
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }

/* «prefers-reduced-motion выключает всё» (стр. 34). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .preloader { display: none; }
  .up, .anim {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}



/* ═══════════════════════════════════════════════════════════════════════
   АДАПТАЦИЯ ПОД УСТРОЙСТВО
   Ступени: 1080 — планшет, 900 — узкий планшет, 760 — телефон.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Планшет ───────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .sec { padding: 96px 0; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .head { margin-bottom: 56px; }
  .bar-in { gap: 24px; }
  .nav { gap: 20px; }
  .nav a { font-size: 15px; }
  /* Бренд-ядро: две колонки схлопываются в одну, иначе правая давит левую. */
  #bank .wrap > div { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── Узкий планшет ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cmp-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 20px; }
  .cmp-head { display: none; }
  .cmp-row .cmp-us { padding-top: 6px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  /* Меню в шапке не помещается — уходит под кнопку. */
  .nav, .bar-right > a:first-child { display: none; }
  .burger { display: flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: var(--bar-h); bottom: auto;
    transform: none;
    flex-direction: column; gap: 0;
    background: var(--white);
  }
  .nav.open { display: flex; }
  .nav a { min-height: 52px; padding: 0 24px; font-size: 17px; }
  .nav a + a { border-top: 1px solid var(--line); }
}

/* ── Телефон ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  :root { --bar-h: 56px; }

  .wrap { padding: 0 16px; }
  .sec { padding: 64px 0; }
  .hero { padding: 40px 0; }

  h1 { font-size: 34px; line-height: 1.05; }
  h2 { font-size: 27px; line-height: 1.1; }
  h3 { font-size: 20px; }
  .lead { font-size: 17px; }
  body { font-size: 16px; }

  .head { margin-bottom: 36px; }
  .head h2 { margin-top: 14px; }
  .head .lead { margin-top: 14px; }

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

  .bar-in { padding-left: 16px; gap: 12px; }
  .bar-logo img { height: 22px; }
  .bar-right { gap: 0; }
  .cta-block { padding: 0 16px; font-size: 15px; }
  .nav a { padding: 0 16px; }

  .card-body { padding: 22px 20px 24px; }
  .cmp-row { padding: 20px 16px; }
  .a { padding-right: 0; }
  .q { padding: 20px 0; }
  .q span:first-child { font-size: 17px; }

  .btn { width: 100%; }
  .num { font-size: 40px; }
  .num-sm { font-size: 28px; }
}

/* ── Шапка на узком экране ─────────────────────────────────────────────
   Бургер стоит ПЕРЕД кнопкой и не сжимается, иначе кобальтовый блок
   выдавливает его за край экрана. */
@media (max-width: 900px) {
  .bar-right { align-items: center; }
  .burger { order: -1; flex-shrink: 0; }
  .cta-block { flex-shrink: 1; min-width: 0; align-self: stretch; }
}


/* ── Кнопка меню ───────────────────────────────────────────────────────
   Две линии ink, прямые углы, цель нажатия 44px. */
.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); }
.burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Показ кнопки меню стоит последним: базовое правило .burger объявлено
   ниже медиазапроса и иначе перебивало бы его. */
@media (max-width: 900px) {
  .burger { display: flex; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ПОДВАЛ · инверсия без рамок и теней
   ═══════════════════════════════════════════════════════════════════════ */
.foot { background: var(--dark); color: var(--white); padding: 96px 0 40px; }

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 64px;
  padding-bottom: 64px;
}
.foot-logo { height: 30px; width: auto; display: block; color: var(--white); }
.foot-lead {
  margin-top: 22px;
  max-width: 26em;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .72);
}
.foot-cta { margin-top: 32px; }

.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
}
.foot-cols a {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: 16px;
  color: rgba(255, 255, 255, .72);
  transition: color var(--t-hover) var(--ease);
}
.foot-cols a:hover { color: var(--white); }

/* Одна функциональная линия тоном заливки — не серая обводка. */
.foot-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 16px;
  color: rgba(255, 255, 255, .56);
}
.foot-legal { display: flex; gap: 28px; flex-wrap: wrap; }
.foot-legal a { color: rgba(255, 255, 255, .56); transition: color var(--t-hover) var(--ease); }
.foot-legal a:hover { color: var(--white); }

@media (max-width: 1080px) {
  .foot-top { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 760px) {
  .foot { padding: 64px 0 32px; }
  .foot-top { padding-bottom: 40px; gap: 36px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .foot-lead { font-size: 16px; }
  .foot-cta { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   СЛОЁНЫЙ ПИРОГ
   Человек не читает страницу, а сканирует её по подзаголовкам. Значит
   подзаголовок обязан отличаться от текста кеглем, весом и цветом, а
   воздуха над ним должно быть больше, чем под ним, — иначе непонятно,
   к какому блоку он относится.
   ═══════════════════════════════════════════════════════════════════════ */

/* Подзаголовок карточки тяжелее текста, а не «чуть крупнее». */
h3 { font-weight: 600; }

/* Отступ сверху больше, чем снизу: подзаголовок прилипает к своему блоку. */
.card-body h3 { margin-bottom: 10px; }
.card-body h3 + p { margin-top: 0; }

/* Строка не длиннее 70 знаков — иначе глаз теряет начало следующей. */
.lead, .card-body p, .cmp-row span, .a { max-width: 68ch; }
.head .lead { max-width: 40em; }

/* Воздух между слоями: соседние блоки не должны сливаться в полотно. */
.sec + .sec { border-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   ЧТО ВНУТРИ · компактный список, а не второй пересказ цикла
   ═══════════════════════════════════════════════════════════════════════ */
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--line); }
.spec > .spec-i { background: var(--white); }
.sec-fill .spec > .spec-i { background: var(--white); }

/* Цель нажатия — вся плитка, а не заголовок внутри неё. */
.spec-q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  width: 100%; text-align: left;
  background: none; border: 0; border-radius: 0; padding: 30px 32px;
  font: inherit; color: inherit; cursor: pointer;
}
.spec-head { display: flex; flex-direction: column; gap: 8px; }
.spec-t { font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); transition: color var(--t-hover) var(--ease); }
.spec-p { font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.spec-sign { flex-shrink: 0; font-size: 26px; font-weight: 300; line-height: 1; color: var(--accent); }
.spec-q:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (hover: hover) { .spec-q:hover .spec-t { color: var(--accent); } }

/* Раскрытая часть: кадр слева, разбор справа. Кадр не украшение — он
   показывает ровно то, о чём строка выше. */
.spec-more {
  display: flex; flex-direction: column; gap: 22px;
  padding: 0 32px 30px;
}
/* Атрибут hidden сам по себе не переспорил бы display: grid. */
.spec-more[hidden] { display: none; }
.spec-shot { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.spec-lead { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.spec-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.spec-list li { position: relative; padding-left: 16px; font-size: 16px; line-height: 1.5; color: var(--ink); }
/* Метка — квадрат 5 px, а не точка: круглых форм в системе нет. */
.spec-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; background: var(--accent);
}
@media (max-width: 1200px) {
  .spec-more { gap: 18px; }
}

@media (max-width: 760px) {
  .spec { grid-template-columns: minmax(0, 1fr); }
  .spec-q { padding: 22px 20px; }
  .spec-more { padding: 0 20px 24px; }
}


/* ── Полоса «покажем на видео» ─────────────────────────────────────────── */
/* ── Блок с роликом ────────────────────────────────────────────────────────
   Главное здесь — сам кадр, поэтому он во всю ширину контейнера и в
   пропорции экрана 16:9. Раньше блок был из одного текста с кнопкой сбоку и
   выглядел незаполненным: обещание «покажем на видео» ничем не подкреплялось.

   Пока ролика нет, стоит честная заглушка с видимой пометкой, а не пустое
   тёмное поле. Прямые углы, заливка вместо обводки, теней нет. */
.video {
  position: relative;
  margin-top: 8px;
  aspect-ratio: 16 / 9;
  /* Потолок по высоте нужен, чтобы кадр помещался в экран на низком ноутбуке.
     При срабатывании он сжимает ширину — margin-inline держит кадр по центру,
     иначе он прижимался бы к левому краю. */
  max-height: 78svh;
  margin-inline: auto;
  background: rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-fill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Треугольник «плей» — заливкой через clip-path, без шрифтовых символов и
   без скруглений. */
.video-play {
  width: clamp(54px, 5vw, 82px);
  aspect-ratio: 1 / 1;
  background: var(--accent);
  clip-path: polygon(26% 16%, 26% 84%, 82% 50%);
}
.video-state {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}
.video-tag {
  background: var(--white);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 9px;
}
.video-note { font-size: 15px; color: rgba(255, 255, 255, .62); }

.video-under {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}
.video-cap { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .72); }

@media (max-width: 900px) {
  .video-under { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .video-under .btn { width: 100%; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ТАБЛИЦА СРАВНЕНИЯ · блок «в чём отличие»
   Базовые правила были потеряны при одной из правок — восстановлены.
   Ряды делит одна функциональная линия, блоки — заливка, не рамка.
   ═══════════════════════════════════════════════════════════════════════ */
.cmp {
  background: var(--white);
}
.cmp-row {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: baseline;
  padding: 26px 32px;
  border-top: 1px solid var(--line);
}
.cmp-row:first-child { border-top: 0; }
.cmp-head {
  padding-top: 22px;
  padding-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
}
/* Имя строки — это подзаголовок слоя: тяжелее и темнее соседнего текста. */
.cmp-name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cmp-row > span { color: var(--ink-2); }
.cmp-row .cmp-us { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════
   АДАПТИВНЫЕ ПЕРЕОПРЕДЕЛЕНИЯ — СТРОГО В КОНЦЕ ФАЙЛА
   Базовые правила дописывались по ходу работы и оказывались ниже
   медиазапросов, из-за чего перебивали их. Всё, что зависит от ширины,
   собрано здесь и идёт последним.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Три колонки сравнения на узком экране не читаются: разворачиваем
     каждую строку в подзаголовок и два ответа под ним. */
  .cmp-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 22px 20px;
  }
  .cmp-head { display: none; }
  .cmp-row > span { max-width: none; }
  .cmp-row .cmp-us { padding-top: 2px; }
  /* Чтобы было понятно, где чужое, а где наше. */
  .cmp-row > span:nth-child(2)::before { content: 'что делают: '; color: var(--ink); font-weight: 600; }
  .cmp-row .cmp-us::before { content: 'что делаем мы: '; color: var(--accent); font-weight: 600; }
}

@media (max-width: 760px) {
  .cmp-row { padding: 20px 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ПЕРВЫЙ ЭКРАН
   Текст держит одну колонку по центру, под ним — сам продукт.
   ═══════════════════════════════════════════════════════════════════════ */
.hero-in { text-align: center; }
.hero-in .tag { margin-bottom: 22px; }
.hero-in h1 { max-width: 17ch; margin: 0 auto; }
.hero-in .lead { max-width: 62ch; margin: 26px auto 0; }
.hero-act {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
}
.hero-in .small { margin-top: 18px; }

/* ── Окно приложения ──────────────────────────────────────────────────────
   Рабочее окно LIDERIK в маковском виде: полоса заголовка с тремя кнопками,
   боковое меню, панель вида, доска и строка состояния.

   Прямые углы, заливка вместо обводки, ни теней, ни наклона — всё как
   требует брендбук. Единственная круглая форма во всём проекте — три кнопки
   окна: без них это перестаёт читаться как macOS. Они серые, а не
   красно-жёлто-зелёные: так система рисует окно без фокуса, и второй яркий
   цвет в палитре не появляется.
   Разделители внутри окна нарисованы не рамками, а зазорами в 1–2 px: под
   ними лежит .app с заливкой paper, и линия получается из фона.          */
/* Окно имитирует настоящий экран, поэтому у него пропорция дисплея 16:10,
   а не высота по содержимому. При высоте по содержимому получалась полоса
   2,6:1 — на монитор это не похоже.
   max-height держит окно в пределах экрана на низких ноутбуках. */
.app {
  background: var(--line);
  padding: 1px;
  /* Высота по содержимому. Пропорция 16/10 держала под колонками доски
     пустое белое поле почти в треть окна — заказчик это и увидел.
     Минимум задан, чтобы окно не выглядело узкой полоской. */
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.mac-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--paper);
  padding: 0 16px;
  height: 44px;
}
.mac-dots { display: flex; gap: 8px; flex: 0 0 auto; }
.mac-dots i { width: 11px; height: 11px; border-radius: 50%; background: #c8c8d0; display: block; }
/* Имя окна стоит по центру ОКНА, а не после кнопок: в потоке оно съезжало бы
   на ширину кнопок, и центр переставал быть центром. */
.mac-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.mac-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mac-key {
  font-size: 13px;
  color: var(--ink-2);
  background: var(--white);
  padding: 3px 8px;
}
.mac-ava {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--white);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}

/* Цепочка на всю высоту окна: тело тянется, доска тянется, колонки тянутся.
   min-height: 0 обязателен в каждом звене — без него содержимое не даёт
   контейнеру сжаться и окно распирает пропорцию. */
.app-body {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 1px;
  margin-top: 1px;
  flex: 1 1 auto;
  min-height: 0;
}
.app-side, .app-main { min-height: 0; overflow: hidden; }

/* ── Боковое меню ── */
.app-side { background: var(--white); padding: 14px 12px 18px; }
.side-h {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .7;
  padding: 0 8px;
  margin: 14px 0 8px;
}
.side-h:first-child { margin-top: 0; }
.side-i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  font-size: 14px;
  color: var(--ink-2);
}
.side-i b { font-weight: 500; font-size: 13px; opacity: .8; }
.side-i.on { background: var(--accent-tint); color: var(--ink); font-weight: 600; }
.side-i.on b { color: var(--accent); }

/* ── Рабочая область ── */
.app-main { background: var(--white); display: flex; flex-direction: column; }
.app-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.tool { font-size: 14px; color: var(--ink-2); padding: 5px 12px; }
.tool.on { background: var(--ink); color: var(--white); font-weight: 500; }
.tool-gap { flex: 1 1 auto; }
.tool-note { font-size: 13px; color: var(--ink-2); }

.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  flex: 1 1 auto;
  min-height: 0;
}
.col { background: var(--white); padding: 14px 12px 18px; min-height: 0; overflow: hidden; }

/* Пустая строка внизу колонки — то, что есть в любой рабочей доске. Заодно
   она занимает освободившуюся высоту осмысленно, а не пустым полем. */
.col-add {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--paper);
  font-size: 13px;
  color: var(--ink-2);
  opacity: .75;
}
.col-h {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 10px;
  text-align: left;
}
.col-h b { color: var(--accent); font-weight: 600; }

.it { background: var(--paper); padding: 11px 12px; margin-bottom: 8px; text-align: left; }
.it:last-child { margin-bottom: 0; }
.it p { font-size: 14px; line-height: 1.35; font-weight: 500; color: var(--ink); }
.it .src { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.it .metr { display: block; margin-top: 8px; font-size: 19px; font-weight: 500; color: var(--accent); letter-spacing: -0.02em; }
.it .metr i { font-style: normal; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.it.hot { background: var(--accent-tint); }
.it.warn { background: var(--tone-c); }
.it.done { background: var(--tone-b); }

/* ── Строка состояния ── */
.app-foot {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--paper);
  padding: 0 16px;
  height: 38px;
  margin-top: 1px;
  font-size: 13px;
  color: var(--ink-2);
}
.foot-live { margin-left: auto; display: flex; align-items: center; gap: 7px; }
/* Точка живого процесса. Круглая — как и кнопки окна, это часть языка
   интерфейса, а не декор страницы. */
.foot-live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}


@media (max-width: 1080px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hero { padding: 32px 0 48px; }
  .hero-in h1 { max-width: none; }
  .hero-in .lead { font-size: 16px; margin-top: 18px; }
  .hero-act { margin-top: 26px; }
  .hero-act .btn { width: 100%; }
  .app { margin-top: 36px; padding: 8px; }
  .app-bar { height: auto; padding: 12px 14px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .app-tabs { gap: 14px; font-size: 14px; flex-wrap: wrap; }
  .board { grid-template-columns: minmax(0, 1fr); }
}

/* Полоса номера в блоке, где шапка прижата влево, а не по центру. */
.head-mark-left { justify-content: flex-start; }
.head-mark-left .ghost { left: 0; transform: translate(0, -50%); }

/* ── Короткие утверждения в блоке проблемы ─────────────────────────────
   Карточки тянутся по высоте вровень с кадром слева, а текста в них
   одна-две строки. Центрируем по вертикали, иначе под каждой строкой
   висит пустота. */
.note-card {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 24px 30px;
  background: var(--white);
}
.note-card p { max-width: 46ch; }


/* ── Доска идей внутри блока «шесть шагов» ─────────────────────────────
   Она иллюстрирует шаг 03, поэтому живёт здесь, а не в первом экране:
   там её рамка читалась как начало нового блока. */
.board-lead { margin: 56px auto 28px; max-width: 62ch; text-align: center; }

@media (max-width: 760px) {
  .board-lead { margin: 36px auto 20px; }
}


/* ── Подпись второго слоя внутри блока ─────────────────────────────────
   Воздуха сверху заметно больше, чем снизу: строка принадлежит тому,
   что идёт ПОД ней, а не спискy выше. */
.layer-note {
  margin: 64px auto 20px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
}

@media (max-width: 760px) {
  .layer-note { margin: 40px auto 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ПЕРВЫЙ ЭКРАН
   ═══════════════════════════════════════════════════════════════════════ */

/* Объявление над заголовком. Прямые углы, заливка вместо обводки. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 7px;
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 30px;
  transition: background-color var(--t-hover) var(--ease);
}
.pill:hover { background: var(--accent-tint); color: var(--ink); }
.pill-mark {
  padding: 3px 9px;
  background: var(--tone-b);
  font-size: 12.5px;
  font-weight: 600;
}
.pill-arr { color: var(--accent); font-weight: 600; }

.hero-in h1 { max-width: 15ch; margin: 0 auto; }
.hero-in .lead { max-width: 54ch; margin: 24px auto 0; }
.hero-act { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.hero-in .btn-secondary { background: var(--white); }

/* ── Визуальная полоса ─────────────────────────────────────────────────
   Три плитки в ряд: слово, кадр, цифра. Ничего не наложено друг на друга —
   «подпись под кадром, а не на нём». */
.hero-band {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.35fr) minmax(0, 0.82fr);
  gap: 2px;
  margin-top: 56px;
}
.hb-quote {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hb-sub { font-size: 15px; line-height: 1.4; color: var(--ink); opacity: .68; }

.hb-shot { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--line); }

.hb-side { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; }
.hb-stat {
  background: var(--white);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.hb-num { font-size: 56px; font-weight: 400; line-height: 1; letter-spacing: -0.03em; color: var(--accent); }
.hb-note { background: var(--tone-c); padding: 26px 30px; display: flex; align-items: center; }
.hb-note p { font-size: 16px; line-height: 1.45; color: var(--ink); }

@media (max-width: 1080px) {
  .hero-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hb-shot { grid-column: 1 / -1; height: 300px; order: -1; }
  .hb-side { grid-template-rows: none; grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .hero { padding: 28px 0 40px; }
  .pill { font-size: 14px; margin-bottom: 22px; text-align: left; }
  .hero-in h1 { max-width: none; }
  .hero-in .lead { font-size: 16px; margin-top: 18px; }
  .hero-act { margin-top: 26px; }
  .hero-act .btn { width: 100%; }
  .hero-band { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .hb-shot { height: 220px; }
  .hb-quote { font-size: 20px; }
  .hb-num { font-size: 44px; }
  .hb-say, .hb-stat, .hb-note { padding: 24px 20px; }
}

/* Обёртка доски идей внутри блока «шесть шагов». */
.board-wrap { margin: 0; }

/* ── Донастройка первого экрана ────────────────────────────────────────
   Заголовок разбивался на четыре строки и читался лесенкой — даём ему
   ширину под три. Текст в левой плитке стоял по нижнему краю и уходил
   за границу кадра — ставим по центру. */
.hero-in h1 { max-width: 15em; }
.hero-band { min-height: 380px; }

@media (max-width: 1080px) {
  .hero-band { min-height: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ПЕРВЫЙ ЭКРАН УКЛАДЫВАЕТСЯ В ЭКРАН УСТРОЙСТВА ЦЕЛИКОМ
   Было min-height: текст занимал экран, а полоса висела следом, и блок
   выходил в полтора экрана. Теперь высота жёсткая, а всё внутри тянется
   под неё: кегль считается и от ширины, и от ВЫСОТЫ окна, полоса берёт
   остаток.
   ═══════════════════════════════════════════════════════════════════════ */
.hero {
  height: calc(100svh - var(--bar-h));
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3.4vh, 44px);
  /* Снизу поля нет: сцена обязана упираться в нижний край первого экрана.
     С отбивкой под цветными панелями оставалась полоса фона, и шов с
     лого-полосой читался как случайный зазор. Освободившиеся пиксели
     забирает сцена — высота экрана от этого не меняется. */
  padding: clamp(14px, 2.6vh, 36px) 0 0;
  overflow: hidden;
}

/* Кегль ограничен и шириной, и высотой окна — иначе на низком ноутбуке
   заголовок выталкивает полосу за край. */
.hero-in h1 { font-size: clamp(28px, min(5vw, 6.6vh), 66px); }
.hero-in .lead { font-size: clamp(15px, min(1.35vw, 2.1vh), 20px); margin-top: clamp(12px, 1.8vh, 24px); }
.hero-act { margin-top: clamp(16px, 2.4vh, 32px); }
.pill { margin-bottom: clamp(14px, 2.2vh, 30px); }

/* Полоса забирает остаток высоты, кадр тянется под неё. */
.hero > .wrap:last-child { flex: 1 1 auto; min-height: 0; display: flex; }
.hero-band {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
  height: 100%;
}
.hb-shot { height: 100%; min-height: 0; }
.hb-quote { font-size: clamp(17px, min(1.5vw, 2.4vh), 24px); }
.hb-stat { padding: clamp(16px, 2.4vh, 28px) clamp(18px, 2vw, 30px); }
.hb-num { font-size: clamp(32px, min(3.4vw, 5vh), 56px); }
.hb-note { padding: clamp(16px, 2.2vh, 26px) clamp(18px, 2vw, 30px); }
.hb-note p { font-size: clamp(14px, min(1.1vw, 1.8vh), 16px); }
.hb-sub { font-size: clamp(13px, min(1vw, 1.6vh), 15px); }

/* ── Телефон ───────────────────────────────────────────────────────────
   Три плитки рядом с кадром в экран не влезают. Оставляем кадр: всё, что
   на них написано, страница говорит ниже своими блоками. */
@media (max-width: 900px) {
  .hero-band { grid-template-columns: minmax(0, 1fr); }
  .hb-say, .hb-side { display: none; }
  .hb-shot { grid-column: auto; order: 0; height: 100%; }
}

/* Кадр в полосе тянется на всю ячейку. Без явной ширины браузер считал
   её по собственной пропорции картинки и оставлял поля по бокам. */
.hb-shot {
  width: 100%;
  height: 100%;
  min-width: 0;
  align-self: stretch;
  justify-self: stretch;
  object-fit: cover;
  object-position: center;
}

/* Контейнеры первого экрана тянутся на всю ширину. В колоночном флексе
   `margin: 0 auto` отменяет растягивание по поперечной оси, и обёртка
   сжималась по содержимому — кадр из-за этого выходил квадратом. */
.hero > .wrap { width: 100%; }


/* ═══════════════════════════════════════════════════════════════════════
   ПЛИТКА · заливка приходит от секции
   «В залитой секции карточки белые» — и наоборот. Раз цвет считается от
   секции, а не пишется в разметке, перестановка чередования ничего
   не ломает.
   ═══════════════════════════════════════════════════════════════════════ */
.tile { background: var(--paper); }
.sec-fill .tile { background: var(--white); }
.sec-dark .tile { background: rgba(255, 255, 255, .05); }

/* Короткие утверждения в блоке проблемы — та же плитка. */
.note-card { background: var(--paper); }
.sec-fill .note-card { background: var(--white); }


/* ═══════════════════════════════════════════════════════════════════════
   ПОЛОСА ПЕРВОГО ЭКРАНА · кадр ведёт, факты держатся плотно сбоку
   ═══════════════════════════════════════════════════════════════════════ */
.hero-band { grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); }

.hb-side {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 2px;
  min-height: 0;
}

/* Плитки прижимаются к содержимому, а не растягиваются пустотой. */
.hb-stat {
  background: var(--white);
  padding: clamp(16px, 2.2vh, 26px) clamp(18px, 1.8vw, 26px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.hb-num { font-size: clamp(30px, min(3vw, 4.4vh), 48px); line-height: 1; }
.hb-sub { font-size: clamp(13px, min(0.95vw, 1.5vh), 15px); line-height: 1.4; color: var(--ink); opacity: .68; }

.hb-note {
  background: var(--tone-c);
  padding: clamp(16px, 2.2vh, 26px) clamp(18px, 1.8vw, 26px);
  display: flex;
  align-items: center;
}
.hb-note p { font-size: clamp(14px, min(1.05vw, 1.7vh), 16px); line-height: 1.45; color: var(--ink); }
.hb-note b { font-weight: 600; }

.hb-plat {
  background: var(--tone-a);
  padding: clamp(14px, 1.8vh, 22px) clamp(18px, 1.8vw, 26px);
  display: flex;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-band { grid-template-columns: minmax(0, 1fr); }
  .hb-side { display: none; }
}

/* Колонка фактов: два блока делят высоту поровну, перечень площадок —
   узкая полоса внизу. Раньше последняя плитка забирала весь остаток и
   стояла почти пустой. */
.hb-side { grid-template-rows: 1fr 1fr auto; }
.hb-plat { padding-top: clamp(12px, 1.5vh, 18px); padding-bottom: clamp(12px, 1.5vh, 18px); }

/* ═══ ЛОГО-ПОЛОСА ═══ шельф под первым экраном ────────────────────────────
   Заливка белая. Шов лежит СВЕРХУ: герой на paper, полоса на white — край
   между ними чёткий. Снизу полоса продолжается в белую «проблему» одним
   полем: полоса не глава, а зачин белого разворота, и своей границы у неё
   там нет. Прямые углы, ни обводок, ни теней — по брендбуку.

   ⚠ Непрерывная прокрутка — сознательное отступление от двух правил движения
   («сдвиг не больше 8 px», «линейной анимации нет»). Карусель без linear
   пульсирует, а без длинного сдвига не едет. Заказчик попросил именно
   карусель. Чтобы вернуться к статичному ряду — класс .logos-still на секцию,
   правило ниже уже готово.                                                */
.logos {
  background: var(--white);
  padding: 46px 0 54px;
  overflow: hidden;
}
.logos-cap {
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0 0 30px;
}
.logos-rail { overflow: hidden; }

/* Шаг между наборами обязан равняться шагу внутри набора, иначе на стыке
   виден разрыв ритма. padding-right ровно в один gap — без него сдвиг
   на -50 % не совпадёт со стыком и в петле будет рывок. */
.logos-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 64px;
  padding-right: 64px;
  animation: logos-run 46s linear infinite;
}
.logos-set { display: flex; align-items: center; gap: 64px; }
.logo-i {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--ink);
  opacity: .72;
}
/* Логотипы приходят разной высоты и с разной долей знака в кадре, поэтому
   равняем не по числу, а ОПТИЧЕСКИ: у VK и YouTube знак занимает всю высоту
   кадра и на общей 26 px читается крупнее остальных — им меньше. */
.logo-img { height: 26px; width: auto; display: block; opacity: .85; }
.logo-vk { height: 23px; }
.logo-youtube { height: 22px; }
.logo-reddit { height: 21px; }
.logo-dzen { height: 25px; }
.logo-tiktok { height: 24px; }

.logos-rail:hover .logos-track { animation-play-state: paused; }

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

/* Статичный ряд — как на образце у Jasper. Вторая копия ленты прячется. */
.logos-still .logos-track {
  animation: none;
  width: 100%;
  padding-right: 0;
}
.logos-still .logos-set { flex: 1 1 auto; justify-content: space-around; }
.logos-still .logos-set[aria-hidden="true"] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; }
}
@media (max-width: 760px) {
  .logos { padding: 34px 0 38px; }
  .logos-cap { font-size: 13px; margin-bottom: 22px; }
  .logos-track, .logos-set { gap: 40px; }
  .logos-track { padding-right: 40px; }
  .logo-i { font-size: 18px; }
  .logo-img { height: 22px; }
  .logo-vk { height: 20px; }
  .logo-youtube { height: 19px; }
  .logo-reddit { height: 18px; }
  .logo-dzen { height: 21px; }
  .logo-tiktok { height: 20px; }
}

/* ═══ ТРОЙКА ПЛИТОК В «ПРОБЛЕМЕ» ═══ ──────────────────────────────────────
   Три равные плитки в ряд: заголовок сверху, кадр в середине, вывод и
   стрелка снизу. Оформление у всех трёх одинаковое — разное читалось бы как
   разный смысл. Тон выбран по смыслу: аналитика, поток, айдентика.        */
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.trio-i {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--t-hover) var(--ease);
}
/* Сдвиг 6 px — в пределах разрешённых брендбуком 8. */
.trio-i:hover { transform: translateY(-6px); }

.trio-c { background: var(--tone-c); }
.trio-b { background: var(--tone-b); }
.trio-d { background: var(--tone-d); }

.trio-t {
  margin: 0;
  padding: 28px 28px 22px;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Кадр одной пропорции у всех трёх, иначе низ плиток разъезжается.
   Квадрат, а не 4:3: ролики нарисованы квадратными и заполняют кадр почти
   целиком — при обрезке под 4:3 срезало бы верхний и нижние блоки рисунка. */
.trio-shot {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: rgba(19, 19, 27, .03);
}
/* margin-top: auto прижимает подвал вниз — заголовки бывают в одну и в две
   строки, и без этого стрелки встают на разной высоте. */
.trio-foot {
  margin-top: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 28px 28px;
}
/* Резерв в две строки: подписи разной длины, и без него подвал первой плитки
   получался ниже остальных — стрелки вставали на разной высоте, а одинаковые
   карточки обязаны быть оформлены одинаково. */
.trio-foot p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink);
               min-height: 2.9em; }
.trio-arr {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1.3;
  color: var(--accent);
  transition: transform var(--t-hover) var(--ease);
}
.trio-i:hover .trio-arr { transform: translateX(6px); }

/* ── Счёт под тройкой ─────────────────────────────────────────────────── */
/* Своей заливки у полосы со счётом нет: серый прямоугольник посреди белой
   секции читался лишним слоем. Форму держит сам ряд плашек. */
.cost {
  margin-top: 24px;
  padding: 34px 0 10px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.cost h3 { margin: 0 0 12px; }
.cost-txt p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
/* Цифры вынесены на плашки: кобальт, жирное начертание, лёгкий наклон.
   Наклон разный по знаку — ряд перестаёт быть линейкой и получает движение.
   Кобальт на числах брендбук разрешает прямо, это его territory. */
.cost-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.cost-nums > div { display: flex; flex-direction: column; align-items: flex-start; }
.cost-nums .num-sm {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  padding: 12px 20px 14px;
}
.cost-nums > div:nth-child(1) .num-sm { transform: rotate(-1.6deg); }
.cost-nums > div:nth-child(2) .num-sm { transform: rotate(1.1deg); }
.cost-nums > div:nth-child(3) .num-sm { transform: rotate(-0.8deg); }
.cost-nums p { font-weight: 500; color: var(--ink) !important; }
.cost-nums p { margin-top: 6px; font-size: 16px; color: var(--ink-2); }

/* Действие под подводкой шапки — как на образце. */
.head-act { margin-top: 26px; display: flex; justify-content: center; }

@media (max-width: 1080px) {
  .trio-t { font-size: 24px; padding: 24px 22px 18px; }
  .trio-foot { padding: 20px 22px 24px; }
}
@media (max-width: 900px) {
  .trio { grid-template-columns: minmax(0, 1fr); }
  .cost { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 28px 24px; }
}
@media (max-width: 560px) {
  .trio-t { font-size: 22px; }
  .cost-nums { gap: 14px; }
  .cost-nums p { font-size: 14px; }
}

/* ═══ СЦЕНА ПЕРВОГО ЭКРАНА ═══ ────────────────────────────────────────────
   Человек стоит перед выкладкой плоских цветных панелей. Панели разной
   высоты — иначе получается полосатая стена, а не композиция.
   Что здесь СОЗНАТЕЛЬНО не используется: скругления, тени, растяжки цвета,
   вращения. Клетка нарисована repeating-linear-gradient с жёсткими стопами —
   это плоские линии, а не градиент.                                        */
/* Сцена идёт во всю ширину окна, а не по контейнеру 1360. На большом
   мониторе выкладка иначе стояла узкой полосой посреди пустого фона —
   именно этого просили не делать. Контейнер держит только текст сверху. */
.hero > .wrap.stage-wrap { max-width: none; padding: 0; }
.stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}
.stage-bg { position: absolute; inset: 0; }
.sb { position: absolute; bottom: 0; display: block; }

/* Раскладка по горизонтали: между панелями 0.4 % — это те же 2 px на
   контейнере 1312, что и в остальной вёрстке. */
.sb-4 { left: 64.6%;  width: 5.6%;  top: 30%; background: var(--accent); }

/* Клетка кочует по сценам: в первой она в центре, во второй уходит вправо,
   в третьей влево. Если оставить её на одной и той же панели, три кадра
   читаются как один и тот же с подменённым человеком. */
.scene-1 .sb-3,
.scene-2 .sb-5,
.scene-3 .sb-2 {
  background-image:
    repeating-linear-gradient(to right,  rgba(19, 19, 27, .14) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(to bottom, rgba(19, 19, 27, .14) 0 1px, transparent 1px 34px);
  background-position: center bottom;
}
/* Треугольник — единственная непрямоугольная форма. Углы острые, скруглений
   нет. Цвет кобальтовый — так его увидел и одобрил заказчик.

   Цвет тёмный, а не кобальт: справа встала кобальтовая плашка с метрикой,
   и трёх горячих масс на экране быть не должно. Кобальт остаётся там, где
   его держит брендбук, — на числах и действиях. */
.sb-tri { background: var(--dark); }

/* Человек стоит по центру. Ростом он ВЫШЕ сцены и обрезается снизу — так
   голова поднимается над цветными панелями, а не тонет в них, и фигура
   получает нормальный масштаб. Обрезать сверху нельзя: пропадёт лицо. */
.stage-person {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 130%;
  width: auto;
  display: block;
  z-index: 2;
}

/* Плашки лежат на цвете по краям и НЕ доходят до силуэта: человек занимает
   37,9–62,1 % ширины сцены, плашки — 1,6–26,6 % и 67,5–88,5 %.
   Роли у них разные, поэтому и оформление разное:
   слева — что продукт делает (белая, текстом), справа — что из этого
   выходит (кобальт, крупным числом). Одинаковое оформление читалось бы как
   одинаковый смысл. */
.stage-plate { position: absolute; z-index: 3; }

/* ── Слева: возможность ── */
.sp-l {
  left: 5%; bottom: 22%;
  width: 21%; max-width: 300px;
  background: var(--white);
  padding: 16px 18px 18px 16px;
  display: flex;
  gap: 11px;
}
/* Маркер квадратный, а не круглый: скруглений в системе нет нигде. */
.sp-mark {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  margin-top: 5px;
  background: var(--accent);
}
.sp-l p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.38;
  color: var(--ink);
}
.sp-l b { font-weight: 600; }

/* ── Справа: результат ── */
/* Плашка тёмная, а полоса за ней кобальтовая. Пока обе были кобальтовыми,
   они склеивались в одну Г-образную фигуру и метрика терялась. */
.sp-r {
  left: 66.5%; bottom: 32%;
  width: 17%; max-width: 240px;
  background: var(--dark);
  padding: 14px 16px 16px;
}
.sp-num {
  display: block;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-tint);
}
.sp-r p {
  margin: 7px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, .74);
}

@media (max-width: 1080px) {
  /* Планшетные поправки сцены живут в конце файла: базовые правила .sp-l,
     .sp-r и .stage-person объявлены НИЖЕ этого медиазапроса и перебивали бы
     его молча. Здесь остаётся только то, что ниже не переопределяется. */
  .sp-l p { font-size: 14px; }
  .sp-num { font-size: 34px; }
  .sp-r p { font-size: 12px; }
}
/* Сцена сужается, а человек остаётся той же доли высоты — значит по ширине
   он занимает всё больше. На 900 плашки уже ложились ему на грудь, поэтому
   уходят именно здесь, а не на 760. Замерено, а не на глаз. */
@media (max-width: 900px) {
  .stage-plate { display: none; }
}
@media (max-width: 760px) {
  .sb-1 { top: 44%; } .sb-2 { top: 26%; } .sb-5 { top: 50%; }
}

/* ── Курсор и растущая полоса ─────────────────────────────────────────────
   Курсор подъезжает к кобальтовой полосе, «нажимает» её, и полоса
   выстреливает вверх. Растёт масштабом от нижнего края: перерисовка высоты
   заставила бы браузер пересчитывать раскладку каждый кадр.

   ⚠ Здесь сознательно нарушено правило движения «сдвиг не больше 8 px»:
   курсор проезжает около 50 px, иначе нажатия не видно. Заказчик попросил
   именно этот приём. Всё остальное — масштаб и прозрачность, как положено. */
.sb-4 {
  transform-origin: 50% 100%;
  animation: bar-rise 5.4s var(--ease) infinite;
}
@keyframes bar-rise {
  0%, 17%  { transform: scaleY(.48); }
  25%      { transform: scaleY(1.05); }  /* короткий перелёт — «отдача» */
  31%, 84% { transform: scaleY(1); }
  100%     { transform: scaleY(.48); }
}

.play-cur {
  position: absolute;
  left: 68.2%;
  top: 31%;
  z-index: 4;
  display: block;
  line-height: 0;
  animation: cur-tap 5.4s var(--ease) infinite;
}
@keyframes cur-tap {
  0%       { transform: translate(52px, 40px); opacity: 0; }
  8%       { transform: translate(52px, 40px); opacity: 1; }
  17%      { transform: translate(0, 0)       scale(1);   opacity: 1; }
  21%      { transform: translate(0, 0)       scale(.82); opacity: 1; }
  27%, 78% { transform: translate(0, 0)       scale(1);   opacity: 1; }
  92%      { transform: translate(52px, 40px); opacity: 0; }
  100%     { transform: translate(52px, 40px); opacity: 0; }
}

/* Плашки чуть подрастают в тот же момент, что и полоса, — композиция
   оживает целиком, а не одним углом. Масштаб в пределах приличия. */
.stage-plate { transform-origin: 50% 100%; animation: plate-lift 5.4s var(--ease) infinite; }
.sp-r { animation-delay: .12s; }
@keyframes plate-lift {
  0%, 20%  { transform: scale(1); }
  28%      { transform: scale(1.035); }
  36%, 84% { transform: scale(1); }
  100%     { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sb-4, .play-cur, .stage-plate { animation: none; transform: none; }
  .play-cur { opacity: 1; }
}
/* На телефоне плашек нет, курсору не по чему щёлкать. */
@media (max-width: 760px) {
  .play-cur { display: none; }
  .sb-4 { animation: none; transform: none; }
}

/* ═══ ЛЕНТА СЦЕН ═══ ──────────────────────────────────────────────────────
   Три сцены стоят в ряд внутри сцены-окна. Переключение — сдвиг ленты
   влево; окно с overflow: hidden показывает ровно одну.                   */
.stage-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 300%;
  transform: translateX(0);
  transition: transform 520ms var(--ease);
}
.scene { position: relative; flex: 0 0 33.3333%; height: 100%; }

/* Пока сцена не активна, её содержимое спрятано: иначе во время проезда
   было бы видно, как соседний кадр уже собран. */
.scene .sb,
.scene .stage-person,
.scene .stage-plate,
.scene .play-cur { opacity: 0; }

/* Сборка на месте. Задержки отсчитываются от конца проезда ленты (520 мс):
   сначала приезжает пустое поле, потом собирается кадр.

   У каждой сцены СВОЯ хореография — и порядок, и способ появления. Один и
   тот же вход на трёх кадрах читается как один кадр с подменённым человеком.
   Сдвиги везде в пределах разрешённых брендбуком 8 px; там, где 8 px мало,
   работает масштаб или шторка, а не длинный проезд.

   1 · слева направо, всё всплывает снизу
   2 · панели вырастают из земли, плашки въезжают с боков
   3 · панели раскрываются шторкой от центра, человек входит сбоку          */

/* ── Сцена 1 · «слева направо» ── */
.scene-1.is-on .sb   { animation: sc1-panel 420ms var(--ease) both; }
.scene-1.is-on .sb-1 { animation-delay: 440ms; }
.scene-1.is-on .sb-2 { animation-delay: 490ms; }
.scene-1.is-on .sb-3 { animation-delay: 540ms; }
.scene-1.is-on .sb-5 { animation-delay: 590ms; }
.scene-1.is-on .sb-tri { animation-delay: 640ms; }
.scene-1.is-on .stage-person { animation: sc1-person 460ms var(--ease) 620ms both; }
@keyframes sc1-panel  { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc1-person { from { opacity: 0; transform: translate(-50%, 8px); }
                        to   { opacity: 1; transform: translate(-50%, 0); } }

/* ── Сцена 2 · «вырастают из земли» ── */
.scene-2.is-on .sb   { transform-origin: 50% 100%;
                       animation: sc2-panel 460ms var(--ease) both; }
.scene-2.is-on .sb-5 { animation-delay: 440ms; }
.scene-2.is-on .sb-3 { animation-delay: 500ms; }
.scene-2.is-on .sb-2 { animation-delay: 560ms; }
.scene-2.is-on .sb-1 { animation-delay: 620ms; }
.scene-2.is-on .sb-tri { animation-delay: 680ms; transform-origin: 50% 0%; }
.scene-2.is-on .stage-person { animation: sc2-person 480ms var(--ease) 660ms both; }
@keyframes sc2-panel  { from { opacity: 0; transform: scaleY(.18); }
                        to   { opacity: 1; transform: scaleY(1); } }
@keyframes sc2-person { from { opacity: 0; transform: translate(-50%, 0) scale(.965); }
                        to   { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes sc2-plate-l { from { opacity: 0; transform: translateX(-8px); }
                         to   { opacity: 1; transform: translateX(0); } }
@keyframes sc2-plate-r { from { opacity: 0; transform: translateX(8px); }
                         to   { opacity: 1; transform: translateX(0); } }

/* ── Сцена 3 · «шторка от центра» ──
   Шторкой едут только прямоугольные панели: у фигуры-уступа свой clip-path,
   и анимация шторки его бы стёрла. */
.scene-3.is-on .sb:not(.sb-tri) { animation: sc3-panel 480ms var(--ease) both; }
.scene-3.is-on .sb-3 { animation-delay: 440ms; }
.scene-3.is-on .sb-2 { animation-delay: 500ms; }
.scene-3.is-on .sb-5 { animation-delay: 560ms; }
.scene-3.is-on .sb-1 { animation-delay: 620ms; }
.scene-3.is-on .sb-tri { animation: sc3-shape 400ms var(--ease) 680ms both; }
.scene-3.is-on .stage-person { animation: sc3-person 480ms var(--ease) 680ms both; }
@keyframes sc3-panel  { from { opacity: 0; clip-path: inset(0 100% 0 0); }
                        to   { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes sc3-shape  { from { opacity: 0; transform: translateY(8px); }
                        to   { opacity: 1; transform: translateY(0); } }
@keyframes sc3-person { from { opacity: 0; transform: translate(calc(-50% + 8px), 0); }
                        to   { opacity: 1; transform: translate(-50%, 0); } }
@keyframes sc3-plate  { from { opacity: 0; transform: scale(.94); }
                        to   { opacity: 1; transform: scale(1); } }

/* Кобальтовая полоса и курсор живут только в активной сцене. Иначе циклы
   крутились бы во всех трёх и жгли кадры впустую. */
.scene.is-on .sb-4 {
  opacity: 1;
  animation: bar-rise 4.4s var(--ease) 740ms infinite backwards;
}
.scene.is-on .play-cur { opacity: 1; animation: cur-tap 4.4s var(--ease) 740ms infinite backwards; }
.scene:not(.is-on) .sb-4,
.scene:not(.is-on) .play-cur,
.scene:not(.is-on) .stage-plate { animation: none; }
/* Плашки: первая анимация — вход, своя у каждой сцены, с both удерживает
   opacity: 1; вторая — общий цикл подпрыгивания вместе с растущей полосой. */
.scene-1.is-on .sp-l { animation: sc1-plate 380ms var(--ease) 820ms both,
                                  plate-lift 5.4s var(--ease) 1180ms infinite; }
.scene-1.is-on .sp-r { animation: sc1-plate 380ms var(--ease) 890ms both,
                                  plate-lift 5.4s var(--ease) 1250ms infinite; }
@keyframes sc1-plate { from { opacity: 0; transform: translateY(8px); }
                       to   { opacity: 1; transform: translateY(0); } }

.scene-2.is-on .sp-l { animation: sc2-plate-l 400ms var(--ease) 860ms both,
                                  plate-lift 5.4s var(--ease) 1250ms infinite; }
.scene-2.is-on .sp-r { animation: sc2-plate-r 400ms var(--ease) 930ms both,
                                  plate-lift 5.4s var(--ease) 1320ms infinite; }

.scene-3.is-on .sp-l { animation: sc3-plate 380ms var(--ease) 880ms both,
                                  plate-lift 5.4s var(--ease) 1250ms infinite; }
.scene-3.is-on .sp-r { animation: sc3-plate 380ms var(--ease) 950ms both,
                                  plate-lift 5.4s var(--ease) 1320ms infinite; }

/* ── Переключатель кадров ─────────────────────────────────────────────── */
.stage-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 8px;
}
/* Прямоугольники, а не точки: круглых форм в системе нет. */
.dot {
  width: 26px; height: 3px;
  padding: 0; border: 0; border-radius: 0;
  background: rgba(19, 19, 27, .22);
  cursor: pointer;
  transition: background-color var(--t-hover) var(--ease);
}
.dot.is-on { background: var(--accent); }
.dot:hover { background: rgba(19, 19, 27, .42); }
.dot.is-on:hover { background: var(--accent); }
.dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

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

/* Сцена 1 — «лестница вправо»: низкое слева, высокое в центре, клетка в
   середине. Тёмный треугольник остриём вверх на левом склоне. */
.scene-1 .sb-1 { left: 0;      width: 23.4%; top: 50%; background-color: var(--tone-c); }
.scene-1 .sb-2 { left: 23.6%;  width: 12.2%; top: 36%; background-color: var(--tone-d); }
.scene-1 .sb-3 { left: 36%;    width: 28.4%; top: 19%; background-color: var(--tone-b); }
.scene-1 .sb-5 { left: 70.4%;  width: 29.6%; top: 44%; background-color: var(--tone-a); }
.scene-1 .sb-tri {
  left: 17%; width: 10.5%; top: 56%;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

/* Сцена 2 — «провал в середине»: массивные края, узкая высокая свеча слева
   от центра, клетка ушла на правое поле. Фигура перевёрнута остриём вниз. */
.scene-2 .sb-1 { left: 0;      width: 29.8%; top: 60%; background-color: var(--tone-b); }
.scene-2 .sb-2 { left: 30%;    width: 8.6%;  top: 28%; background-color: var(--tone-a); }
.scene-2 .sb-3 { left: 38.8%;  width: 25.4%; top: 47%; background-color: var(--tone-c); }
.scene-2 .sb-5 { left: 70.4%;  width: 29.6%; top: 24%; background-color: var(--tone-d); }
.scene-2 .sb-tri {
  left: 8%; width: 11%; top: 24%; bottom: auto; height: 24%;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

/* Сцена 3 — «ступень»: широкое низкое слева, клетка на левом плече, справа
   высокая стена. Фигура — уступ, третья форма из трёх. */
.scene-3 .sb-1 { left: 0;      width: 17.6%; top: 58%; background-color: var(--tone-d); }
.scene-3 .sb-2 { left: 17.8%;  width: 26.2%; top: 30%; background-color: var(--tone-b); }
.scene-3 .sb-3 { left: 44.2%;  width: 20%;   top: 52%; background-color: var(--tone-a); }
.scene-3 .sb-5 { left: 70.4%;  width: 29.6%; top: 34%; background-color: var(--tone-c); }
/* Отодвинута влево: на 25 % правая колонка уступа стояла ровно за
   предплечьем и выглядывала из-за руки чёрным пятном. */
.scene-3 .sb-tri {
  left: 12%; width: 13%; top: 62%;
  clip-path: polygon(0% 100%, 0% 42%, 52% 42%, 52% 0%, 100% 0%, 100% 100%);
}

/* Кадры сняты по-разному: вторая героиня в кадре заметно шире, третий — уже.
   При одном росте она наезжала бы на плашки, поэтому рост задан по сцене. */
.scene-2 .stage-person { height: 106%; }
.scene-2 .sp-r { left: 68.5%; }
.scene-3 .stage-person { height: 128%; }

@media (prefers-reduced-motion: reduce) {
  .stage-track { transition: none; }
  .scene .sb, .scene .stage-person, .scene .stage-plate, .scene .play-cur { opacity: 1; }
  .scene.is-on .sb, .scene.is-on .stage-person,
  .scene.is-on .sp-l, .scene.is-on .sp-r, .scene.is-on .sb-4,
  .scene.is-on .play-cur { animation: none; opacity: 1; transform: none; }
  .scene.is-on .stage-person { transform: translateX(-50%); }
}
@media (max-width: 900px) {
  .stage-dots { bottom: 12px; }
}

/* ═══ ПЛАНШЕТНЫЕ ПОПРАВКИ СЦЕНЫ — СТРОГО ПОСЛЕ ПРАВИЛ СЦЕН ═══
   Всё, что переопределяет .stage-person, .sp-l и .sp-r, обязано стоять
   здесь. Поставленное выше по файлу проигрывало базовым правилам по порядку
   и молча не работало — плашки продолжали ложиться людям на плечо.

   Сцена сужается быстрее, чем фигура: рост задан долей ВЫСОТЫ, и по ширине
   человек отъедает всё больше. Поэтому на планшете все трое ниже, а правая
   плашка отодвинута. Героиня второй сцены в кадре заметно шире остальных —
   ей отдельная поправка. */
@media (max-width: 1080px) {
  .stage-person { height: 112%; }
  .sp-l { left: 3%; width: 25%; padding: 13px 14px 15px 13px; }
  .sp-r { left: 71%; width: 21%; padding: 12px 13px 14px; }
  .scene-2 .stage-person { height: 100%; }
  .scene-2 .sp-r { left: 72%; }
  .scene-3 .stage-person { height: 112%; }
}

/* ═══ ВТОРОЙ СЛОЙ ПОЯВЛЕНИЯ ═══ ────────────────────────────────────────────
   Сам блок всплывает на 8 px, а внутри него отдельно оживают три вещи:
   кадр раскрывается шторкой снизу вверх, цифры выскакивают масштабом, номер
   секции проступает медленнее остальной шапки. Задержки отсчитываются от
   момента, когда блок попал в кадр, поэтому порядок читается как сборка.

   Шторка сделана через clip-path: это не сдвиг и не масштаб, лимит в 8 px
   она не трогает. Кривая и длительности — системные.                      */
.anim .frame,
.anim .trio-shot {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 550ms var(--ease) 120ms;
}
.anim.in .frame,
.anim.in .trio-shot { clip-path: inset(0 0 0 0); }

/* Цифры — главное в блоке, поэтому приходят последними и заметнее прочего. */
.anim .num,
.anim .num-sm,
.anim .cost-nums .num-sm {
  opacity: 0;
  transform: scale(.9);
  transition:
    opacity var(--t-block) var(--ease) 180ms,
    transform var(--t-block) var(--ease) 180ms;
}
.anim.in .num,
.anim.in .num-sm { opacity: 1; transform: none; }

/* Номер секции проступает позже ярлыка и заголовка — он фон, а не заголовок.
   Трогаем только прозрачность: центрирование .ghost держится на transform. */
.anim .ghost { opacity: 0; transition: opacity 550ms var(--ease) 220ms; }
.anim.in .ghost { opacity: 1; }

/* Ярлык приезжает своим ходом, но его поворот обязан уцелеть — поэтому
   поворот входит в обе фазы, а не стирается на in. */
.anim .tag {
  opacity: 0;
  transform: rotate(-0.6deg) translateY(6px);
  transition:
    opacity var(--t-block) var(--ease) 60ms,
    transform var(--t-block) var(--ease) 60ms;
}
.anim.in .tag { opacity: 1; transform: rotate(-0.6deg); }

@media (prefers-reduced-motion: reduce) {
  .anim .frame, .anim .trio-shot { clip-path: none; transition: none; }
  .anim .num, .anim .num-sm, .anim .ghost, .anim .tag {
    opacity: 1; transform: none; transition: none;
  }
  .anim .tag { transform: rotate(-0.6deg); }
}

/* Ярлык бывает и САМ анимируемым элементом — например в финальном блоке, где
   он лежит прямо в .wrap, а не внутри шапки. Тогда общее правило .anim.in
   стирало ему поворот, и «проведённый от руки» край выпрямлялся. Поворот
   обязан входить в обе фазы. */
.tag.anim    { transform: rotate(-0.6deg) translateY(8px) scale(.985); }
.tag.anim.in { transform: rotate(-0.6deg); }
@media (prefers-reduced-motion: reduce) {
  .tag.anim, .tag.anim.in { transform: rotate(-0.6deg); }
}

/* ── Плитка с роликом собирается изнутри ──────────────────────────────────
   Раньше плитка всплывала целиком и ролик просто оказывался на месте. Теперь
   порядок читается: заголовок, следом кадр раскрывается шторкой, последним
   приходит вывод со стрелкой. Ролик при этом стартует с первого кадра —
   это делает скрипт, автозапуска при загрузке нет. */
.trio-i.anim .trio-t,
.trio-i.anim .trio-foot {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--t-block) var(--ease),
    transform var(--t-block) var(--ease);
}
.trio-i.anim.in .trio-t    { opacity: 1; transform: none; transition-delay: 90ms; }
.trio-i.anim.in .trio-foot { opacity: 1; transform: none; transition-delay: 300ms; }

/* Шторка кадра идёт между ними — после заголовка, до вывода. */
.anim .trio-shot { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .trio-i.anim .trio-t, .trio-i.anim .trio-foot {
    opacity: 1; transform: none; transition: none;
  }
}

/* ── Подвал ───────────────────────────────────────────────────────────────
   Колонки ссылок лежат на два уровня глубже, чем достаёт обходчик, поэтому
   их лесенку задаём стилями от состояния всего верха подвала. */
.foot-top.anim .foot-cols > * {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--t-block) var(--ease),
    transform var(--t-block) var(--ease);
}
.foot-top.anim.in .foot-cols > * { opacity: 1; transform: none; }
.foot-top.anim.in .foot-cols > *:nth-child(1) { transition-delay: 120ms; }
.foot-top.anim.in .foot-cols > *:nth-child(2) { transition-delay: 190ms; }
.foot-top.anim.in .foot-cols > *:nth-child(3) { transition-delay: 260ms; }
.foot-top.anim.in .foot-cols > *:nth-child(4) { transition-delay: 330ms; }

@media (prefers-reduced-motion: reduce) {
  .foot-top.anim .foot-cols > * { opacity: 1; transform: none; transition: none; }
}

/* ═══ ШЕСТЬ ШАГОВ: ПРИКРЕПЛЁННЫЙ СЛАЙДЕР ═══ ───────────────────────────────
   Высокая обёртка .steps-pin задаёт длину прокрутки, внутри неё sticky-сцена
   ростом в экран. Пока обёртка проходит мимо, сцена стоит на месте и карточки
   сменяют друг друга сдвигом влево. Страница идёт дальше только после
   шестой карточки.

   Колесо НЕ перехватывается намеренно: это обычная прокрутка по высокому
   блоку. Полоса прокрутки, клавиатура, тачпад с инерцией и поиск по странице
   продолжают работать — при перехвате wheel всё это ломается.             */
/* Подложки у зоны прокрутки нет. Серое поле сюда ставилось ради заполнения
   пустоты, но на нём пропадал номер секции: --ghost (#E7E9FF) почти совпадал
   с --line (#E7E7EC), и цифра 02 растворялась в фоне. */
.steps-pin { position: relative; height: calc(6 * 68svh); }

/* Шапка блока живёт ВНУТРИ прикреплённой сцены. Пока сцена стоит, на экране
   виден весь блок целиком: номер, заголовок, полоса, точки. Раньше шапка
   уезжала вверх до прикрепления, и оставшийся экран был наполовину пустым —
   именно это и читалось как «слишком высокий блок». */
.steps-stage {
  position: sticky;
  top: var(--bar-h);
  /* Высота сцены ровно в экран — обязательный ограничитель. С авто-высотой
     на коротких окнах низ карточки и точки уходили за кромку экрана и
     оставались там всё прикрепление. Серое поле снимается не здесь, а
     высотой самой полосы — см. .step ниже. */
  height: calc(100svh - var(--bar-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Общего gap нет: отбивки разные. Между шапкой и полосой — воздух, между
     полосой и точками — почти вплотную, точки принадлежат полосе и должны
     читаться как её часть, а не как отдельный элемент внизу экрана. */
  overflow: hidden;   /* страховка: содержимое не должно распирать сцену */
}
/* Полоса забирает весь остаток сцены: её низ совпадает с низом секции, и
   серой полосы между карточкой и белым блоком ниже не остаётся вовсе.
   Точки переехали НАД полосой — иначе они снова отжимали её от края, а
   ставить их поверх кадра запрещает брендбук. */
.steps-view { margin-top: 12px; flex: 1 1 auto; min-height: 0; }
.steps-track { height: 100%; }
.steps-stage .head { margin-bottom: 0; }
.steps-stage .head h2 { margin-bottom: 0; }

/* Собственных полей у секции нет: блок целиком управляет своей высотой сам.
   С обычным padding сверху к пустому полю прикреплённой сцены добавлялось
   ещё 120 px, и вход в блок читался как провал. */
/* Своих полей у секции нет: сверху их съедала прикреплённая сцена, снизу
   после слайдера оставалась серая полоса в 120 px — она и читалась лишней
   подложкой. Нижний блок с доской своё поле получает отдельно. */
#cycle { padding-top: 0; padding-bottom: 0; }
#cycle .steps-pin + .wrap { padding-top: clamp(56px, 7vh, 96px); }

/* Полоса идёт во всю ширину окна, а не по контейнеру 1360: кадр упирается
   в левый край экрана, подложка с текстом — в правый, между ними шва нет.
   Серого поля по бокам не остаётся. */
.steps-view { overflow: hidden; width: 100%; }
.steps-track {
  display: flex;
  width: 600%;
  transition: transform 520ms var(--ease);
}

/* Карточка ложится в две колонки: кадр слева, разбор справа. При одной
   карточке на экран вертикальная раскладка либо мельчит кадр, либо не
   помещается по высоте. Зазор 2 px — плитки встык, как во всей вёрстке. */
/* Полоса, а не карточка: невысокая и во всю ширину. Зазора между кадром и
   подложкой нет — это одна сплошная лента. */
.step {
  flex: 0 0 16.6667%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Высота именно определённая, а не min-height. При авто-высоте строки
     `height: 100%` у картинки не разрешается, она берёт собственную
     пропорцию — кадры квадратные, и полоса раздувалась до 713 px вместо
     задуманных 400.

     Считается от остатка экрана, а не долей от него: шапка, точки и зазоры
     занимают около 320 px независимо от роста окна. При простом 52svh на
     мониторе 1440 в высоту оставалось полэкрана серого, а на ноутбуке 660
     полоса, наоборот, не влезала. */
     Запас 320 px был взят с запасом: шапка (160) + отбивка (19) + точки (3)
     занимают около 185, и лишние 130 px оставались серой полосой под точками.
     Сейчас вычитается реальное занятое место плюс 24 на воздух снизу. */
  /* Высота — весь остаток сцены, а не доля экрана: остатка не остаётся. */
  height: 100%;
  min-height: 260px;   /* пол для коротких окон: 160 шапка + 36 точки + 260 влезают */
}
.step > * { min-height: 0; min-width: 0; }
.step-shot { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Текст не растягивается на всю правую половину: на широком мониторе строка
   в 90 знаков не читается. Ограничение по знакам, а не по пикселям. */
.step-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3.2vh, 44px) clamp(24px, 3vw, 64px);
}
.step-body > * { max-width: 62ch; }
.step-a .step-body { background: var(--tone-a); }
.step-b .step-body { background: var(--tone-b); }
.step-c .step-body { background: var(--tone-c); }
.step-d .step-body { background: var(--tone-d); }

/* Кегли в полосе ниже обычных карточных: полоса невысокая, и на большом
   тексте вывод «убирает догадку» уезжал за нижний край. */
.step-body .num { font-size: clamp(28px, 2.3vw, 38px); }
.step-body h3 { margin: 10px 0 0; font-size: clamp(19px, 1.5vw, 24px); }
.step-body p  { margin: 12px 0 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5; color: var(--ink-2); }
.step-kill    { font-weight: 500; color: var(--ink) !important; }

/* Воздух над точками больше, чем под ними: иначе штрихи вплотную под
   заголовком читаются его подчёркиванием, а не управлением полосой. */
.steps-dots { display: flex; justify-content: center; gap: 8px; margin: clamp(18px, 3.4vh, 44px) 0 0; }

@media (max-width: 1080px) {
  .step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .step-body p { font-size: 15px; }
}

/* Телефон и узкий планшет: прикрепление выключено, шаги идут столбиком.
   Держать человека на блоке, когда он листает пальцем, — плохая идея:
   инерционная прокрутка и прикрепление дерутся друг с другом.
   Блок стоит В КОНЦЕ ФАЙЛА, иначе базовые правила выше перебили бы его. */
@media (max-width: 900px) {
  /* Тот же прикреплённый слайдер, что на большом экране: карточки листает
     прокрутка страницы. Шаг короче (56svh против 68), иначе шесть шагов
     съедают на телефоне слишком много движения колеса. */
  .steps-pin { height: calc(6 * 56svh); }
  .steps-stage { position: sticky; top: var(--bar-h); height: calc(100svh - var(--bar-h)); display: flex; flex-direction: column; }
  .steps-view { overflow: hidden; width: 100%; flex: 1 1 auto; min-height: 0; }
  .steps-track { height: 100%; width: 600%; flex-direction: row; gap: 0; }

  /* Карточка занимает экран целиком: кадр сверху, текст под ним. Доли, а не
     числа — на 640 и на 932 по высоте помещается одно и то же. */
  .step {
    flex: 0 0 auto;
    width: 16.6667%;
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 38%) minmax(0, 1fr);
  }
  .step-shot { width: 100%; height: 100%; aspect-ratio: auto; }
  .step-body { padding: 20px 20px 22px; overflow: hidden; }
  .step-body p { font-size: 15px; line-height: 1.45; }
  .step-body .num { font-size: 26px; }
  .step-body h3 { font-size: 19px; }

  /* Шапка внутри сцены короче, но номер на месте: он лежит фоном под
     ярлыком и своей высоты не занимает — треть экрана съедал не он, а
     воздух вокруг него. */
  .steps-stage .head { margin-bottom: 0; }
  .steps-dots { display: flex; margin: 10px 0 0; }
}


/* Окно приложения на узком экране: боковое меню и строка состояния уходят,
   доска встаёт в две колонки, потом в одну. Блок в конце файла — иначе
   базовые правила окна перебили бы медиазапрос. */
@media (max-width: 900px) {
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .app-side, .app-foot { display: none; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mac-title { position: static; transform: none; margin-left: 4px; }
  .mac-tools { display: none; }
}
@media (max-width: 560px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .app-tools .tool:nth-child(3) { display: none; }
  .tool-note { display: none; }
}

/* На узком экране пропорция дисплея не нужна: доска встаёт в одну-две
   колонки, и при 16:10 окно превратилось бы в пустое поле с карточками
   вверху. Высота идёт по содержимому. */
@media (max-width: 900px) {
  .app { aspect-ratio: auto; max-height: none; }
}

/* ═══ БЛОК «НА ЧЁМ ЭКОНОМИМ» ═══ ───────────────────────────────────────────
   Раскладка по образцу: заголовок слева, панели интерфейса справа НАД
   списком, список ниже во всю ширину.

   Ключевое отличие от прошлой версии: список начинается ТАМ, ГДЕ КОНЧАЮТСЯ
   панели. Раньше панель стояла сбоку от открытой строки, её тонированная
   полоса уходила под окно, и два разных прямоугольника накладывались друг
   на друга — отсюда и каша.

   Прямые углы, заливка вместо обводки, теней нет. Сетка фоном нарисована
   жёсткими стопами — это плоские линии, а не растяжка цвета.              */
/* Блок вылезает за текстовую колонку на 24 px в каждую сторону: тонированная
   полоса открытой строки обязана иметь поле слева, иначе текст лежит вплотную
   к её краю. Сам текст при этом остаётся на линии контейнера. */
.why { position: relative; margin: 0 -24px; }

/* ── Верх: заголовок и панели ── */
/* Подводка слева, панели справа — на одном уровне, над списком. */
.why-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 40px;
  align-items: start;
  padding: 0 24px;
  margin-bottom: 10px;
}
/* Шапка здесь несёт только номер и ярлык: заголовок спущен в левую колонку.
   Полоса .head-mark сохраняет свои 118 px, система блоков не тронута. */
.head-mark-only { margin-bottom: 6px; }

.why-intro { padding-top: 4px; }
.why-h {
  margin: 0 0 18px;
  text-align: left;
  text-wrap: balance;
  max-width: 20ch;
}
.why-lead {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
}

/* ── Панели интерфейса ──────────────────────────────────────────────────────
   Собраны по образцу: сетка фоном, два окна уступом, рамки в 1 px, скелетон-
   полоски вместо текста-рыбы, кольцевая диаграмма, прогресс-бары, круглая
   кнопка и квадратная со стрелкой, мелкие капсовые подписи.

   Оттенки одного тона получены наложением ink с малой прозрачностью на сам
   тон — это шаг того же цвета, а не новый цвет в палитре. Тот же приём уже
   работает в проекте: .sec-dark .tile.

   Кольцо нарисовано conic-gradient с ЖЁСТКИМ стопом: получается сплошная
   дуга, а не растяжка. Круглые здесь только диаграмма и кнопка «плюс» —
   формы, которые круглые по своей сути.                                     */
/* ⚠ Фон панели БЕЛЫЙ, тон живёт на окнах. Раньше было наоборот — большой
   цветной прямоугольник 660×420 перевешивал весь блок. В образце ровно так:
   светлое поле с еле заметной сеткой, цвет только внутри окон. */
.why-art { position: relative; min-height: 380px; }
.art {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-block) var(--ease);
}
.art.on { opacity: 1; visibility: visible; }

/* Сетка живёт ВНУТРИ панели и никуда за неё не выходит. */
.art-net {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  rgba(19, 19, 27, .05) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(to bottom, rgba(19, 19, 27, .05) 0 1px, transparent 1px 84px);
}

/* ── Окна ── */
.aw {
  position: absolute;
  border: 1px solid rgba(19, 19, 27, .16);
  display: flex;
  flex-direction: column;
}
/* Заднее — глубже тоном, стоит справа и выше. Переднее — белое, слева и ниже.
   Разная заливка и есть то, что даёт им объём. */
/* Перекрытие окон — только по краю. При широком нахлёсте переднее окно
   закрывало кольцо и метрику заднего, и оно читалось обрубком. */
.aw-back { right: 0; top: 0; width: 58%; }
.art-a .aw-back { background: var(--tone-a); }
.art-b .aw-back { background: var(--tone-b); }
.art-c .aw-back { background: var(--tone-c); }
.art-d .aw-back { background: var(--tone-d); }

.aw-front {
  left: 0; bottom: 0;
  width: 43%;
  background: var(--white);
  z-index: 2;
}

.aw-bar-top {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(19, 19, 27, .16);
}
.aw-bar-top b { font-size: 14px; font-weight: 600; color: var(--ink); }
.aw-bar-top span { margin-left: auto; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
/* Три полоски меню — заливкой, без шрифтовых символов. */
.aw-burger { width: 14px; height: 10px; flex: 0 0 auto; position: relative; }
.aw-burger::before, .aw-burger::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink); }
.aw-burger::before { top: 0; box-shadow: 0 4.5px 0 0 var(--ink); }
.aw-burger::after  { bottom: 0; }

.aw-sec {
  padding: 8px 12px;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid rgba(19, 19, 27, .16);
}

/* ── Кольцо ── */
.aw-hero { display: flex; align-items: center; gap: 12px; padding: 12px; }
.dial {
  flex: 0 0 auto;
  width: 62px; height: 62px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background:
    conic-gradient(var(--accent) 0 calc(var(--p) * 1%), rgba(19, 19, 27, .14) calc(var(--p) * 1%) 100%);
}
.dial i {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink);
}
.aw-dcap { font-size: 12.5px; line-height: 1.35; color: var(--ink); }

/* ── Строка с метрикой и полосой ── */
.aw-metric {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 8px;
  padding: 8px 12px;
  border-top: 1px solid rgba(19, 19, 27, .16);
}
.aw-metric b { font-size: 16px; font-weight: 600; color: var(--ink); }
.aw-lab { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.aw-bar { grid-column: 1 / -1; height: 5px; background: rgba(19, 19, 27, .14); display: block; }
.aw-bar i { display: block; height: 100%; background: var(--accent); }

.aw-btns { display: flex; gap: 1px; margin-top: auto; border-top: 1px solid rgba(19, 19, 27, .16); }
.aw-btns span {
  flex: 1 1 0;
  padding: 9px 10px;
  font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--white);
  text-align: center;
}

/* ── Переднее окно ── */
.aw-note { margin: 0; padding: 11px 12px; font-size: 12.5px; line-height: 1.4; color: var(--ink); }
.aw-card {
  margin: 0 12px;
  padding: 10px 11px;
  border: 1px solid rgba(19, 19, 27, .16);
}
.aw-card b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
/* Скелетон-полоски: так на макетах интерфейса рисуют текст, который здесь
   не важен. Лучше, чем набор бессмысленных слов. */
.sk { display: block; height: 6px; margin-top: 7px; background: rgba(19, 19, 27, .12); }
.sk-s { width: 62%; }

.aw-input {
  margin: 12px;
  margin-top: auto;
  padding: 10px 11px;
  border: 1px solid rgba(19, 19, 27, .16);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
}
.aw-ph { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-2); }
.aw-plus {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(19, 19, 27, .3);
  position: relative;
}
.aw-plus::before, .aw-plus::after { content: ""; position: absolute; background: var(--ink); }
.aw-plus::before { left: 4px; right: 4px; top: 9px; height: 1.5px; }
.aw-plus::after  { top: 4px; bottom: 4px; left: 9px; width: 1.5px; }
/* Квадратная кнопка со стрелкой — акцент, как в образце. */
.aw-go {
  grid-column: 3;
  width: 22px; height: 22px;
  background: var(--accent);
  position: relative;
}
.aw-go::before {
  content: ""; position: absolute; left: 6px; top: 10px; width: 10px; height: 1.5px; background: var(--white);
}
.aw-go::after {
  content: ""; position: absolute; right: 6px; top: 7px; width: 7px; height: 7px;
  border-top: 1.5px solid var(--white); border-right: 1.5px solid var(--white);
  transform: rotate(45deg);
}

/* ── Список ── */
.why-list { position: relative; z-index: 2; }
.why-row {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  transition: background-color var(--t-block) var(--ease);
}

/* ── Пиксельный край подложки ──────────────────────────────────────────────
   Приём со страницы «Пиксель» брендбука: белые квадраты стоят ВСТЫК
   ступенчатым кластером, плотно у своего края и рассыпаются наружу.

   Кластер собран НАСТОЯЩЕЙ сеткой из элементов, а не фоновыми слоями.
   Фоновые слои считались в дробных пикселях (58,17), и между квадратами
   оставались волосяные просветы. У grid дорожки 1fr стыкуются точно.

   Высота — ровно высота полосы, ширина берётся из пропорции 5:4, поэтому
   клетки квадратные при любой высоте подложки и скрипт для этого не нужен. */
.px-edge {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  aspect-ratio: 5 / 4;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-block) var(--ease);
}
.why-row.on .px-edge { opacity: 1; }
.px-edge i { display: block; }

.why-list .why-row:nth-child(1) .px-edge i:nth-child(3), .why-list .why-row:nth-child(1) .px-edge i:nth-child(4), .why-list .why-row:nth-child(1) .px-edge i:nth-child(5), .why-list .why-row:nth-child(1) .px-edge i:nth-child(7), .why-list .why-row:nth-child(1) .px-edge i:nth-child(9), .why-list .why-row:nth-child(1) .px-edge i:nth-child(10), .why-list .why-row:nth-child(1) .px-edge i:nth-child(13), .why-list .why-row:nth-child(1) .px-edge i:nth-child(14), .why-list .why-row:nth-child(1) .px-edge i:nth-child(15), .why-list .why-row:nth-child(1) .px-edge i:nth-child(19), .why-list .why-row:nth-child(1) .px-edge i:nth-child(20) { background: var(--white); }

.why-list .why-row:nth-child(2) .px-edge i:nth-child(4), .why-list .why-row:nth-child(2) .px-edge i:nth-child(5), .why-list .why-row:nth-child(2) .px-edge i:nth-child(7), .why-list .why-row:nth-child(2) .px-edge i:nth-child(8), .why-list .why-row:nth-child(2) .px-edge i:nth-child(9), .why-list .why-row:nth-child(2) .px-edge i:nth-child(10), .why-list .why-row:nth-child(2) .px-edge i:nth-child(11), .why-list .why-row:nth-child(2) .px-edge i:nth-child(13), .why-list .why-row:nth-child(2) .px-edge i:nth-child(14), .why-list .why-row:nth-child(2) .px-edge i:nth-child(15), .why-list .why-row:nth-child(2) .px-edge i:nth-child(19), .why-list .why-row:nth-child(2) .px-edge i:nth-child(20) { background: var(--white); }

.why-list .why-row:nth-child(3) .px-edge i:nth-child(2), .why-list .why-row:nth-child(3) .px-edge i:nth-child(3), .why-list .why-row:nth-child(3) .px-edge i:nth-child(4), .why-list .why-row:nth-child(3) .px-edge i:nth-child(5), .why-list .why-row:nth-child(3) .px-edge i:nth-child(8), .why-list .why-row:nth-child(3) .px-edge i:nth-child(9), .why-list .why-row:nth-child(3) .px-edge i:nth-child(10), .why-list .why-row:nth-child(3) .px-edge i:nth-child(14), .why-list .why-row:nth-child(3) .px-edge i:nth-child(15), .why-list .why-row:nth-child(3) .px-edge i:nth-child(17), .why-list .why-row:nth-child(3) .px-edge i:nth-child(19), .why-list .why-row:nth-child(3) .px-edge i:nth-child(20) { background: var(--white); }

.why-list .why-row:nth-child(4) .px-edge i:nth-child(3), .why-list .why-row:nth-child(4) .px-edge i:nth-child(4), .why-list .why-row:nth-child(4) .px-edge i:nth-child(5), .why-list .why-row:nth-child(4) .px-edge i:nth-child(6), .why-list .why-row:nth-child(4) .px-edge i:nth-child(7), .why-list .why-row:nth-child(4) .px-edge i:nth-child(9), .why-list .why-row:nth-child(4) .px-edge i:nth-child(10), .why-list .why-row:nth-child(4) .px-edge i:nth-child(14), .why-list .why-row:nth-child(4) .px-edge i:nth-child(15), .why-list .why-row:nth-child(4) .px-edge i:nth-child(17), .why-list .why-row:nth-child(4) .px-edge i:nth-child(18), .why-list .why-row:nth-child(4) .px-edge i:nth-child(19), .why-list .why-row:nth-child(4) .px-edge i:nth-child(20) { background: var(--white); }

.why-list .why-row:nth-child(5) .px-edge i:nth-child(4), .why-list .why-row:nth-child(5) .px-edge i:nth-child(5), .why-list .why-row:nth-child(5) .px-edge i:nth-child(8), .why-list .why-row:nth-child(5) .px-edge i:nth-child(9), .why-list .why-row:nth-child(5) .px-edge i:nth-child(10), .why-list .why-row:nth-child(5) .px-edge i:nth-child(11), .why-list .why-row:nth-child(5) .px-edge i:nth-child(12), .why-list .why-row:nth-child(5) .px-edge i:nth-child(13), .why-list .why-row:nth-child(5) .px-edge i:nth-child(14), .why-list .why-row:nth-child(5) .px-edge i:nth-child(15), .why-list .why-row:nth-child(5) .px-edge i:nth-child(19), .why-list .why-row:nth-child(5) .px-edge i:nth-child(20) { background: var(--white); }
.why-row:last-child { border-bottom: 1px solid var(--line); }
/* background-color, а не сокращение background: сокращение сбрасывало
   остальные фоновые свойства и на переходе давало прозрачный результат —
   тонировались не все строки. Селектор с .why-list поднимает вес правила
   выше всего, что объявлено ниже по файлу. */
.why-list .why-row.on.why-a { background-color: var(--tone-a); }
.why-list .why-row.on.why-b { background-color: var(--tone-b); }
.why-list .why-row.on.why-c { background-color: var(--tone-c); }
.why-list .why-row.on.why-d { background-color: var(--tone-d); }

/* Кнопка на всю ширину полосы: щёлкать можно по всей строке. Текст при этом
   держится в левой половине — правую занимает сетка фоном. */
/* Кнопка на всю ширину полосы: щёлкать можно по всей строке, а плюс стоит
   у правого края. Мера держится не шириной кнопки, а ограничением самого
   названия: раньше правую половину занимала сетка фоном, сейчас она лежит
   выше списка, и плюс на 52 % ширины висел посередине ни к чему. */
.why-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 26px 24px;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}
.why-name { max-width: 52%; font-size: clamp(20px, 1.7vw, 27px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }

.why-sign { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.why-sign::before, .why-sign::after {
  content: ""; position: absolute; background: var(--ink); opacity: .55;
  transition: opacity var(--t-hover) var(--ease);
}
.why-sign::before { left: 0; right: 0; top: 7px; height: 2px; }
.why-sign::after  { top: 0; bottom: 0; left: 7px; width: 2px; }
.why-row.on .why-sign::after { opacity: 0; }
.why-btn:hover .why-sign::before, .why-btn:hover .why-sign::after { opacity: .9; }
.why-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* У сетки РОВНО один ребёнок. Пока их было два, нулевую высоту получала
   только первая строка, а ссылка продолжала занимать место — свёрнутые
   строки оставались высокими и блок расползался на пустоту. */
.why-body {
  max-width: 52%;
  padding: 0 24px;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--t-block) var(--ease),
    opacity var(--t-block) var(--ease);
}
.why-in { overflow: hidden; min-height: 0; }
.why-row.on .why-body { grid-template-rows: 1fr; opacity: 1; }
.why-body p { margin: 0; padding-bottom: 16px; font-size: 17px; line-height: 1.55; color: var(--ink); }
.why-link {
  display: inline-block;
  padding-bottom: 28px;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
}
.why-link:hover { color: var(--accent-hover); }

/* ═══ КЕЙСЫ ═══ ────────────────────────────────────────────────────────────
   Мозаика один в один по образцу: четыре равные колонки, широкая плитка
   занимает две. Ритм по строкам 1-1-2 / 2-1-1 / 1-1-2 — за счёт этого сетка
   не читается таблицей и глаз идёт зигзагом, а не по столбцам.

   Плитка с цифрой: число сверху, под ним линия во всю ширину плитки,
   подпись, снизу логотип. Линия функциональная — она делит шапку плитки и
   её содержимое, а не обводит карточку.                                    */
.cases-note { margin-top: 56px; text-align: left; }

/* Подзаголовок над парой образцов и вывод под ними: воздуха сверху больше,
   чем снизу, — так видно, к чему строка относится. */
/* ── БЛОК 04: ДЕМО КАК ОДИН ИНСТРУМЕНТ ────────────────────────────────
   Было: форма, две подписи одинакового веса, пара карточек и вывод —
   всё по центру одним столбиком, из-за чего слои не читались и блок
   выглядел плотным. Стало: одна подложка, внутри три слоя разного веса,
   выключка левая. Отступы — только из шага системы 12/24/32/48. */
.demo-panel {
  margin-top: clamp(32px, 4.4vh, 48px);
  padding: clamp(28px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
}

/* Подводка слева, действие справа: центрированная форма посреди пустого
   поля читалась случайной. */
.demo-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 24px 48px;
  align-items: center;
}
.demo-kicker {
  margin: 0;
  font-size: clamp(20px, 1.8vw, 27px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.demo-do { display: flex; flex-direction: column; gap: 12px; }
/* Поле и кнопка стоят одной строкой: перенос кнопки под поле выглядел
   поломкой. Поле сжимается, кнопка — нет. */
.demo-form { display: flex; gap: 12px; align-items: stretch; }
.demo-form .field { flex: 1 1 200px; min-width: 140px; }
/* Поле лежит на белой подложке блока — значит само оно paper, иначе край
   пропадает. Как и у карточек, цвет вычисляется от секции. */
.sec-fill .demo-panel .field { background: var(--paper); }
.sec:not(.sec-fill) .demo-panel .field { background: var(--white); }
.demo-form .btn { flex: 0 0 auto; white-space: nowrap; }
.demo-fine { margin: 0; }

.demo-pair {
  display: grid;
  /* Правая колонка шире: фокус на версии с брендом, а не на «обычном ИИ». */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 24px;
  align-items: stretch;
}
.demo-col { display: flex; flex-direction: column; gap: 12px; }
.demo-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.demo-label-on { color: var(--ink); }

.demo-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.2vw, 32px);
  /* Цвет вычисляется от секции: подложка блока белая на залитой секции и
     paper на белой — образец внутри всегда противоположного тона. */
  background: var(--paper);
}
.sec:not(.sec-fill) .demo-card { background: var(--white); }
.demo-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
/* Безликий образец тише по кеглю и цвету — разницу голосов видно до чтения. */
.demo-card-on { background: var(--tone-a) !important; }
.demo-card-on p { font-size: 17px; color: var(--ink); }
.demo-first { font-size: 21px !important; font-weight: 500; line-height: 1.4; }

/* Вывод и примечание — одной строкой по краям подложки: две центрированные
   строки друг под другом читались как ещё один заголовок и подзаголовок. */
.demo-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.demo-out {
  margin: 0;
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 500;
  color: var(--ink);
}
.demo-foot .small { flex: 1 1 320px; min-width: 0; margin: 0; text-align: right; }

.cases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}
.cs { display: flex; flex-direction: column; min-height: 320px; }
.cs:nth-child(3), .cs:nth-child(4), .cs:nth-child(9) { grid-column: span 2; }

.cs-b { background: var(--tone-b); }
.cs-a { background: var(--tone-a); }
.cs-c { background: var(--tone-c); }
.cs-d { background: var(--tone-d); }
.cs-q { background: var(--paper); flex-direction: row; }
/* Цвет вычисляется от секции: #demo залит paper, и плитка на нём обязана
   быть белой, иначе отзыв не отделяется от фона. */
.sec-fill .cs-q { background: var(--white); }

/* Плитка с цифрой */
.cs-top { padding: 26px 28px 20px; border-bottom: 1px solid rgba(19, 19, 27, .12); }
.cs-num {
  display: block;
  font-size: clamp(34px, 3vw, 50px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.cs-cap { margin: 18px 28px 0; font-size: 16px; line-height: 1.45; color: var(--ink); }

/* Подвал прижат к низу — как в образце, где логотип стоит на дне плитки. */
.cs-foot {
  margin-top: auto;
  padding: 24px 28px 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.cs-logo { font-size: 14px; font-weight: 600; color: var(--ink-2); opacity: .8; }
.cs-tag {
  flex: 0 0 auto;
  background: var(--white);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 9px;
}

/* Плитка с отзывом */
/* Пока кейсы обезличены, фото нет: белый бокс под снимок убран — иначе рядом
   с двумя ярлыками стояло бы 175 px пустого поля. Когда клиент разрешит
   публикацию и сюда встанет <img>, вернуть flex-basis, белый фон и padding. */
.cs-face {
  flex: 0 0 auto;
  margin: 26px 0 26px 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
/* Ярлыки стоят рядом с цитатой, а не поверх изображения: брендбук держит
   «текст и плашки поверх изображения» в запретах. */
.cs-who { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cs-who b { background: var(--ink); color: var(--white); font-size: 13px; font-weight: 600; padding: 4px 8px; }
.cs-who i { background: var(--paper); color: var(--ink-2); font-size: 12.5px; font-style: normal; padding: 4px 8px; }

.cs-text { flex: 1 1 auto; display: flex; flex-direction: column; padding-left: 26px; }
.cs-quote { margin: 26px 26px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.cs-q .cs-foot { padding-left: 0; }


/* Кейсы и полосы на узком экране. В конце файла — правила выше объявлены
   позже базовых и перебили бы медиазапрос, поставленный раньше. */
@media (max-width: 900px) {
  .cases { grid-template-columns: minmax(0, 1fr); }
  .cs { grid-column: auto !important; min-height: 0; }
  .cs-q { flex-direction: column; }
  .cs-face { flex: 0 0 auto; margin: 22px 22px 0; }
  .cs-text { padding-left: 22px; }
  .cs-quote { margin: 20px 22px 0 0; }
  .cs-top { padding: 22px 22px 18px; }
  .cs-cap { margin: 16px 22px 0; }
  .cs-foot { padding: 22px; }
  .cs-q .cs-foot { padding-left: 0; }
}

/* Блок «на чём экономим» на узком экране: панели и сетка уходят, заголовок и
   строки занимают всю ширину. Панели там встали бы поверх текста, а ужимать
   их до размера иконки бессмысленно — читать в них будет нечего.
   Блок в конце файла: правила выше объявлены позже базовых. */
@media (max-width: 900px) {
  .why { margin: 0 -16px; }
  .why-top { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px; }
  .why-art { display: none; }
  .why-lead { max-width: none; }
  .why-btn, .why-body { max-width: none; }
  /* Сокращение padding стояло ниже и стирало боковую отбивку — текст снова
     ложился вплотную к краю тонированной полосы. Теперь одно правило. */
  .why-btn { padding: 20px 16px; }
  .why-body { padding: 0 16px; }
  .why-body p { font-size: 16px; }
}

/* Панели интерфейса на узком экране не показываем: два окна уступом в
   350 px шириной превращаются в нечитаемую кашу. Строки списка остаются.
   В конце файла — правила выше объявлены позже базовых. */
@media (max-width: 900px) {
  .why-art { display: none; }
}

/* ═══ ТАРИФЫ ═══ ───────────────────────────────────────────────────────────
   Три карточки одного устройства: название, для кого, цена, что входит,
   действие. Разное оформление читалось бы как разный смысл, поэтому
   отличается только заливка средней — она же выбор по умолчанию.

   Инлайновые стили из разметки убраны: цвет карточки обязан вычисляться от
   секции, иначе при следующей перестановке чередования семь плиток снова
   станут белым по белому.                                                  */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  padding: 38px 32px 32px;
  background: var(--paper);
}
.sec-fill .plan { background: var(--white); }
.plan-pick { background: var(--tone-a); }
.sec-fill .plan-pick { background: var(--tone-a); }

.plan-badge { align-self: flex-start; margin-bottom: 16px; }
/* У средней карточки ярлык занимает место сверху. Чтобы названия у всех трёх
   стояли на одной высоте, у крайних резервируется столько же. */
.plan:not(.plan-pick) .plan-name { margin-top: 42px; }

.plan-name { margin: 0; font-size: clamp(24px, 2vw, 28px); }
.plan-for { margin: 8px 0 0; font-size: 16px; color: var(--ink-2); }
.plan-price { margin: 26px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-price .num { font-size: clamp(30px, 2.8vw, 40px); }
.plan-per { font-size: 16px; color: var(--ink-2); }
.plan-what { margin: 20px 0 30px; flex: 1 1 auto; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.plan-pick .plan-for,
.plan-pick .plan-what,
.plan-pick .plan-per { color: var(--ink); }
.plan-go { width: 100%; text-align: center; }

.plans-note {
  margin: 28px 0 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
}
.plans-note-2 { margin-top: 10px; }

/* Тарифы на узком экране: карточки столбиком, резерв под ярлык не нужен.
   В конце файла — правила выше объявлены позже базовых. */
@media (max-width: 900px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan { padding: 30px 24px 26px; }
  .plan:not(.plan-pick) .plan-name { margin-top: 0; }
}

/* ═══ В ЧЁМ ОТЛИЧИЕ ═══ ────────────────────────────────────────────────────
   Сравнение карточками, а не таблицей. В таблице три колонки текста читались
   одинаково серо: где «как обычно», а где «у нас», глаз различал только по
   порядку колонок. Здесь у строки «как обычно» приглушённая заливка и знак
   «минус», у строки «у нас» — тон и кобальтовый знак. Разница видна до того,
   как человек начал читать.

   Знаки нарисованы заливкой и границами, без шрифтовых символов: галочка не
   зависит от того, что подставит система вместо ✓.                        */
.vs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
.vs {
  display: flex;
  flex-direction: column;
  background: var(--white);
}
.vs-name { margin: 0; padding: 26px 22px 20px; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.2; }

/* Две панели с РАЗНОЙ ЗАЛИВКОЙ вместо значков. Квадратики с галочкой и
   чертой читались как чекбоксы — будто это форма, которую надо заполнить.
   Разницу держит цвет подложки и подпись, а не иконка. */
.vs-line { padding: 18px 22px 20px; }
.vs-line p { margin: 6px 0 0; font-size: 16px; line-height: 1.5; }
.vs-lab {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.vs-lab-us { color: var(--accent); }

.vs-old { background: var(--paper); }
.vs-old p { color: var(--ink-2); }
.vs-new { background: var(--tone-a); flex: 1 1 auto; }
.vs-new p { color: var(--ink); font-weight: 500; }

.vs-lead { margin: 32px auto 0; max-width: 62ch; }
.vs-note { margin: 56px 0 20px; text-align: left; }

.vs-nots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.vs-not { background: var(--tone-c); padding: 30px 30px 32px; }
.vs-not h3 { margin: 0; }
.vs-not p { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink); }

/* Сравнение на узком экране: карточки столбиком.
   В конце файла — правила выше объявлены позже базовых. */
@media (max-width: 900px) {
  .vs-grid, .vs-nots { grid-template-columns: minmax(0, 1fr); }
  .vs-name { padding: 22px 18px 16px; }
  .vs-line { padding: 16px 18px 18px; }
  .vs-not { padding: 24px 22px 26px; }
  .vs-note { margin: 40px 0 16px; }
}

/* Ответ формы заявки. Кобальт — потому что это результат действия;
   отступ 12 — из шага системы. Медиазапросов у правила нет, поэтому
   раздел адаптивных переопределений оно не перебивает. */
.lead-ok { margin-top: 12px; color: var(--accent); font-weight: 500; }

/* Пара образцов на узком экране: колонки в столбик, правая уже не шире. */
@media (max-width: 900px) {
  .demo-pair { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* Вопросы: строка тянется во всю ширину, плюс — у правого края. Ответ мерой
   не растягивается: 90 знаков в строке не читаются. */
#faq-list .q span:first-child { max-width: 62ch; }
#faq-list .a { max-width: 76ch; }

/* Демо на узком экране: подводка над формой, образцы столбиком, вывод и
   примечание тоже столбиком с выключкой влево. */
@media (max-width: 900px) {
  .demo-top { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .demo-pair { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .demo-kicker br { display: none; }
  .demo-foot { flex-direction: column; gap: 12px; }
  .demo-foot .small { text-align: left; }
}
@media (max-width: 560px) {
  .demo-form { flex-wrap: wrap; }
  .demo-form .btn { width: 100%; }
}

/* Кадр бренд-ядра — квадратный: снимок нарисован в квадрате, и пропорция
   16/10 срезала ему верх и низ. Модификатор, а не правка общего .frame:
   остальные кадры в бенто держат общую пропорцию ряда. */
.frame-sq { aspect-ratio: 1 / 1; }

/* ═══ 08 · КОМУ ПОДХОДИТ ═══ ───────────────────────────────────────────
   Переключатель, сцена с кадром человека и ярлыки остальных аудиторий.
   Прямые углы, заливка вместо обводки, тон берётся из пастели блока. */
.aud-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  margin-top: clamp(24px, 3vh, 32px);
}
.aud-tab {
  border: 0; border-radius: 0; cursor: pointer; font: inherit;
  padding: 12px 18px;
  font-size: 15px; font-weight: 500;
  background: var(--paper); color: var(--ink-2);
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.sec-fill .aud-tab { background: var(--white); }
.aud-tab:hover { color: var(--ink); }
.aud-tab.is-on { background: var(--ink); color: var(--white); }
.aud-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Боковые жёлоба — место ярлыков. Без них левые ярлыки ложились поверх
   карточки: она занимает всю левую половину сцены. Плашка поверх
   содержимого в запретах, поэтому жёлоб, а не сдвиг на пиксели. */
.aud-stage {
  position: relative;
  margin-top: clamp(28px, 4vh, 48px);
  padding-inline: clamp(0px, 7vw, 100px);
}

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

   Геометрия связана одной величиной --shot-h: кластер стоит НАД зоной
   растворения и ровно в неё не заходит. Пока высота считалась от ширины
   колонки, а растворение от vw, нижний ряд квадратов забеливался. */
.aud-px {
  position: absolute; z-index: 0;
  left: 50%; transform: translateX(-50%);
  top: auto; bottom: calc(var(--diss-h) + 8px);
  height: auto; width: 100%;
  display: grid;
  /* Сторона ячейки — одна величина: что меньше, ширина колонки на 7 или
     свободная высота на 5. Из двух независимых величин ячейка вытягивалась
     в вертикальный прямоугольник, а приём брендбука — именно квадрат. */
  --cell: min(calc((100% - 12px) / 7), calc((var(--shot-h) - var(--diss-h) - 16px) / 5));
  grid-template-columns: repeat(7, var(--cell));
  grid-auto-rows: var(--cell);
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}
/* Содержимое сцены обязано лежать НАД кластером. Кластер — единственный
   позиционированный элемент внутри сцены, поэтому без этого правила он
   красится после обычного потока и ложится квадратами на карточку. */
.aud-scene > .aud-plate,
.aud-scene > .aud-body { position: relative; z-index: 1; }
.aud-px i { display: block; aspect-ratio: 1 / 1; }
.aud-px i.on { background: var(--px); }
/* Тон живёт на сцене: у каждой аудитории он свой, и подсветка ярлыка
   берёт то же значение (--px наследуется от сцены к ярлыку через .aud-stage). */
.aud-stage.tone-a { --px: var(--tone-a); }
.aud-stage.tone-b { --px: var(--tone-b); }
.aud-stage.tone-c { --px: var(--tone-c); }
.aud-stage.tone-d { --px: var(--tone-d); }
.aud-s1 { --px: var(--tone-a); }
.aud-s2 { --px: var(--tone-b); }
.aud-s3 { --px: var(--tone-c); }
.aud-s4 { --px: var(--tone-d); }

/* Сцены лежат стопкой: показана одна. Переключение прозрачностью — так
   между аудиториями нет мигания пустотой. */
.aud-scene { display: none; position: relative; z-index: 1; }
.aud-scene.is-on { display: block; }

.aud-plate {
  max-width: 620px; margin: 0 auto;
  padding: 0 4px 24px;
  text-align: center;
}
.aud-say { margin: 0; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; color: var(--ink); }
.aud-link { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 600; }

/* Карточка стоит РЯДОМ с кадром: плашка поверх изображения в запретах. */
.aud-body {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: end;
}
.aud-card { padding: clamp(24px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 12px; }
.aud-kind { align-self: flex-start; }
.aud-card h3 { margin: 0; }
.aud-card p { margin: 0; color: var(--ink-2); }
.aud-meta { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }

.aud-shot {
  position: relative;
  display: flex; justify-content: center; align-items: flex-end;
  /* Одна величина на кадр, кластер и растворение — иначе они разъезжаются. */
  --shot-h: clamp(280px, 34vw, 430px);
  --diss-h: clamp(42px, 5vw, 72px);
}
.aud-shot img { position: relative; z-index: 1; }

/* Низ кадра растворяется в квадратах цвета секции: обрез по прямой линии
   читался обрубленным. Ряды снизу вверх редеют. */
.aud-diss {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0;
  height: var(--diss-h);
  display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr;
  pointer-events: none;
}
.aud-diss i { display: block; }
.aud-diss i.w { background: var(--white); }
.sec-fill .aud-diss i.w { background: var(--paper); }
.aud-shot img { display: block; width: auto; max-width: 100%; height: var(--shot-h); object-fit: contain; }

/* Ярлык аудитории: квадратный кадр, подпись и уголок-указатель. */
.aud-pins { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.aud-pin {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px;
  background: var(--paper);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: background-color var(--t-block) var(--ease), color var(--t-block) var(--ease);
}
.sec-fill .aud-pin { background: var(--white); }
.aud-pin img { width: 30px; height: 30px; object-fit: cover; object-position: top center; background: var(--accent-tint); }
/* Подпись показывается только там, где под неё есть жёлоб — см. правило
   min-width в конце файла. Иначе ярлык (до 255 px) заходил в колонку
   карточки: плашка поверх содержимого в запретах. */
.aud-pin b { display: none; font-weight: 600; }
.aud-pin.is-on { background: var(--px); color: var(--ink); }
.aud-pin-1 { left: 0; top: 22%; }
.aud-pin-2 { right: 0; top: 16%; }
.aud-pin-3 { right: 0; bottom: 20%; }
.aud-pin-4 { left: 0; bottom: 14%; }

/* Сцена аудиторий на узком экране: ярлыки уходят, кадр и карточка столбиком. */
@media (max-width: 900px) {
  .aud-pins { display: none; }
  .aud-body { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .aud-shot { order: -1; }
  .aud-px { top: 2%; }
  .aud-tab { font-size: 14px; padding: 10px 14px; }
}

/* Широкое окно: жёлоба хватает на ярлык с подписью целиком (самый широкий —
   «Медиахолдинги и сети каналов», 255 px), поэтому подпись возвращается. */
@media (min-width: 1500px) {
  .aud-stage { padding-inline: 280px; }
  .aud-pin { padding: 6px 10px 6px 6px; }
  .aud-pin b { display: inline; }
}

/* ── 08 · ДВИЖЕНИЕ ────────────────────────────────────────────────────
   Разрешённое брендбуком: прозрачность, масштаб, заливка и сдвиг не
   больше 8 px; одна кривая на систему; длительности 150 / 300 / 550.
   Вращения и параллакса нет. */
@keyframes audIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.aud-scene.is-on > * { animation: audIn var(--t-block) var(--ease) both; }
.aud-scene.is-on .aud-body { animation-delay: 60ms; }
.aud-scene.is-on .aud-body .aud-shot { animation: audIn 550ms var(--ease) both; animation-delay: 120ms; }

/* Кластер собирается по одному пикселю — как поле заставки, только медленнее
   и мельче. Задержку каждому пикселю ставит скрипт: в CSS её пришлось бы
   расписывать 32 селекторами. */
.aud-px i.on {
  opacity: 0;
  transform: scale(.92);
  transition: opacity var(--t-block) var(--ease),
              transform var(--t-block) var(--ease),
              background-color var(--t-block) var(--ease);
}
.aud-stage.is-live .aud-px i.on { opacity: 1; transform: none; }

/* Ярлыки приезжают следом за кластером, по одному. */
.aud-pin {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-block) var(--ease),
              transform var(--t-block) var(--ease),
              background-color var(--t-block) var(--ease),
              color var(--t-block) var(--ease);
}
.aud-stage.is-live .aud-pin { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .aud-scene.is-on > *,
  .aud-scene.is-on .aud-body .aud-shot { animation: none; }
  .aud-px i.on, .aud-pin { opacity: 1; transform: none; transition: none; }
}

/* ── 08 · ЧЕТЫРЕ РАЗНЫХ ОФОРМЛЕНИЯ ───────────────────────────────────
   Заказчик: «прилавки везде одинаковые». Различие держат три вещи, а не
   украшения: фигура пиксельного кластера, заливка карточки и сторона,
   с которой стоит кадр. Палитра при этом закрытая — четыре пастельных
   тона брендбука плюс ink; пятого цвета не появляется. */

/* 01 · малый бизнес — карточка на нейтральной плите, кадр справа. */

/* 02 · агентства — карточка на своём тоне, кадр СЛЕВА: смена стороны
   читается сильнее любой смены оттенка. */
.aud-s2 .aud-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.aud-s2 .aud-shot { order: -1; }
.aud-s2 .aud-card { background: var(--tone-b) !important; }
.aud-s2 .aud-card p { color: var(--ink); }
.aud-s2 .aud-plate { text-align: left; }

/* 03 · медиахолдинги — тёмная карточка: масштаб сети читается весом. */
.aud-s3 .aud-card { background: var(--dark) !important; }
.aud-s3 .aud-card h3 { color: var(--white); }
.aud-s3 .aud-card p { color: rgba(255, 255, 255, .72); }
.aud-s3 .aud-meta { color: rgba(255, 255, 255, .56); }

/* 04 · эксперты — кадр слева и карточка на тоне d, плашка по левому краю. */
.aud-s4 .aud-shot { order: -1; }
.aud-s4 .aud-card { background: var(--tone-d) !important; }
.aud-s4 .aud-card p { color: var(--ink); }
.aud-s4 .aud-plate { text-align: left; }

/* Плашка реплики: у чётных аудиторий она прижата к своей стороне, чтобы
   composition не повторялась дословно. */
.aud-s2 .aud-plate, .aud-s4 .aud-plate { margin-left: 0; }
.aud-s3 .aud-plate { margin-right: 0; }

/* Рост кадра тоже разный — иначе четыре сцены выглядят одной. */
.aud-s2 .aud-shot { --shot-h: clamp(280px, 32vw, 400px); }
.aud-s3 .aud-shot { --shot-h: clamp(280px, 36vw, 450px); }
.aud-s4 .aud-shot { --shot-h: clamp(280px, 33vw, 410px); }

@media (max-width: 900px) {
  .aud-s2 .aud-shot, .aud-s4 .aud-shot { order: -1; }
  .aud-s2 .aud-plate, .aud-s3 .aud-plate, .aud-s4 .aud-plate { margin: 0 auto; text-align: center; }
}

/* Кадр шага заполняет полосу целиком: вписывание оставляло поля по бокам,
   и это выглядело хуже, чем небольшая обрезка коллажа. */
.step-shot { object-fit: cover; object-position: center; }

/* ═══ 09 · МАТРИЦА СРАВНЕНИЯ ═══ ────────────────────────────────────────
   Было восемь карточек «как обычно / у нас» — они читались одинаково серо
   и не доказывали заголовок. Матрица показывает ровно то, что обещано:
   у соседей закрыта половина строк, целиком — только у нас. */
.mx-wrap { margin-top: clamp(24px, 3vh, 32px); overflow-x: auto; }
.mx { min-width: 720px; }
.mx-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) repeat(5, minmax(96px, 1fr));
  align-items: stretch;
  border-top: 1px solid var(--line);
}
.mx-row:last-child { border-bottom: 1px solid var(--line); }

.mx-head { border-top: 0; }
.mx-head .mx-what { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.mx-col {
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 12px 14px;
  text-align: center;
  font-size: 13.5px; font-weight: 600; line-height: 1.25;
  color: var(--ink-2);
}
/* Наша колонка — единственная залитая: сравнение должно иметь адресата. */
.mx-col-us { background: var(--tone-a); color: var(--ink); font-size: 15px; }

.mx-what {
  display: flex; align-items: center;
  padding: 18px 20px 18px 0;
  font-size: 16px; line-height: 1.35; color: var(--ink);
}
.mx-c {
  display: flex; align-items: center; justify-content: center;
  padding: 18px 12px;
}
.mx-c-us { background: var(--tone-a); }

/* Знак — квадрат, а не иконка: полный, половинный, пустой. */
.mx-m { display: block; width: 16px; height: 16px; }
.mx-yes { background: var(--accent); }
/* Половина квадрата залита сплошным цветом, а не градиентом: градиенты
   брендбук держит в запретах. */
.mx-part { position: relative; background: var(--accent-tint); }
.mx-part::before { content: ""; position: absolute; inset: 0 50% 0 0; background: var(--accent); }
.mx-no { background: var(--line); }

.mx-legend {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin-top: 16px;
  font-size: 13px; color: var(--ink-2);
}
.mx-legend span { display: flex; align-items: center; gap: 8px; }

/* Служебная подпись для скринридера: знак сам по себе ничего не говорит. */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Матрица на узком экране: прокручивается по горизонтали внутри своей
   обёртки — сжимать семь колонок до нечитаемых 40 px хуже. */
@media (max-width: 900px) {
  .mx { min-width: 640px; }
  .mx-what { font-size: 15px; padding: 14px 16px 14px 0; }
  .mx-c { padding: 14px 8px; }
  .mx-row { grid-template-columns: minmax(160px, 1.5fr) repeat(5, minmax(76px, 1fr)); }
}

/* Разбор шага: номер, название и текст стоят сверху, вывод прижат к низу
   полосы. Раньше всё было центрировано по вертикали и висело посреди
   пустого поля — на высокой полосе это читалось потерянным.
   Мера текста ограничена: во всю половину экрана строка не читается. */
/* Номер, название, текст и вывод — ОДНА группа. Прижатие вывода к низу
   панели (margin-top: auto) на высоком окне отрывало его от текста почти
   на весь экран: зазор зависел от высоты окна, а не от шага системы.
   Лишний воздух отдан панели симметрично центрированием. */
.step-body { justify-content: center; }
.step-body > p { max-width: 52ch; }
.step-body .step-kill { margin-top: 0; padding-top: 20px; }
@media (max-width: 900px) {
  .step-body .step-kill { padding-top: 12px; }
}

/* ═══ 13 · УКРАШЕНИЕ ФИНАЛА ═══ ────────────────────────────────────────
   Два пиксельных кластера по краям. Квадраты, прямые углы, цвета только
   из палитры: четыре пастельных тона, подложка и кобальт на акцентах. */
.fin { position: relative; overflow: hidden; }
.fin-px {
  position: absolute; z-index: 0; top: 50%;
  transform: translateY(-50%);
  width: clamp(140px, 13vw, 230px);
  display: grid; grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 3px;
  pointer-events: none;
}
.fin-px-l { left: clamp(-40px, 1vw, 24px); }
.fin-px-r { right: clamp(-40px, 1vw, 24px); }
.fin-px i { display: block; aspect-ratio: 1 / 1; }
.fin-a    { background: var(--tone-a); }
.fin-b    { background: var(--tone-b); }
.fin-c    { background: var(--tone-c); }
.fin-d    { background: var(--tone-d); }
.fin-tint { background: var(--accent-tint); }
.fin-acc  { background: var(--accent); }

/* Появление: квадраты проступают по одному, задержку ставит скрипт. */
.fin-px i.on {
  opacity: 0; transform: scale(.94);
  transition: opacity var(--t-block) var(--ease), transform var(--t-block) var(--ease);
}
.fin.is-live .fin-px i.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fin-px i.on { opacity: 1; transform: none; transition: none; }
}

/* Украшение финала на узком экране уходит: содержание важнее. */
@media (max-width: 1080px) {
  .fin-px { display: none; }
}

/* Кластеры у блока с окном приложения — уже, чем в финале: рядом стоит
   интерфейс, и украшение не должно с ним соперничать. */
#board .fin-px { grid-template-columns: repeat(4, 1fr); width: clamp(96px, 8vw, 140px); }
@media (max-width: 1280px) { #board .fin-px { display: none; } }


/* ═══════════════════════════════════════════════════════════════════════
   ТЕЛЕФОН — СВОДНЫЙ ПРОХОД
   Замеры на 390 px (реальный iPhone, вьюпорт 373 px после полос).
   Блок идёт последним в файле: почти все правила выше объявлены ПОЗЖЕ
   базовых медиазапросов и иначе перебивали бы его.
   ═══════════════════════════════════════════════════════════════════════ */

/* iOS сам увеличивает шрифт при повороте — выключаем, ритм уже задан. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 760px) {
  /* Вырез и скруглённые углы: поля контейнера не меньше системных.
     На iPhone в ландшафте без этого текст уползает под «уши». */
  .wrap { padding-left: 16px; padding-right: 16px; }
  .bar-in { padding-left: 16px; }

  /* Заголовок: 1.05 на 28 px давал слипшиеся строки — русские слова длинные. */
  .hero-in h1 { line-height: 1.14; }
  h2 { line-height: 1.14; }

  /* Мера текста: 15 px на телефоне читается хуже 16 при том же числе строк. */
  .hero-in .lead { font-size: 16px; }
  .step-body p { font-size: 16px; line-height: 1.5; }
  .mx-what, .aud-meta, .demo-label, .logos-cap, .src, .col-add { font-size: 14px; }
  .tag { font-size: 13px; }

  /* Шапка секции плотнее: 36 px под ней на телефоне читались как разрыв. */
  .head { margin-bottom: 28px; }

  /* ЦЕЛИ НАЖАТИЯ. Полоски переключателя — 3 px высотой: пальцем не попасть.
     Сама полоска остаётся 3 px (форма из системы), нажимается область 44. */
  .dot { position: relative; }
  .dot::after { content: ""; position: absolute; inset: -21px -9px; }
  .steps-dots, .stage-dots { gap: 18px; }

  .aud-tab { padding: 14px 18px; min-height: 44px; }
  .aud-link, .underlink { display: inline-block; padding: 6px 0; }

  /* iOS оставляет :hover приклеенным после касания — на устройствах без
     наведения сдвиги и подъёмы выключены. */
  .trio-i:hover { transform: none; }

  /* Матрица прокручивается пальцем с инерцией, край подсказан затуханием. */
  .mx-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .mx-hint { display: block; }

  /* Окно приложения: доска — четыре колонки по 4–5 карточек, столбиком это
     1100 px однообразных плашек. Оставляем по две карточки в колонке:
     все четыре стадии видны, экран не тонет. Заголовок колонки — первый
     ребёнок, поэтому счёт идёт с третьей карточки. */
  .board .col > *:nth-child(n+4) { display: none; }

  /* Ссылки в подвале и меню: цель нажатия по системе — 44 px. Ссылки
     подвала стоят столбиком, поэтому им отдаётся высота, а не отступ. */
  .foot-cols a { display: flex; align-items: center; min-height: 44px; }
  .foot-legal a { display: inline-block; padding: 10px 0; }
  .nav a { min-height: 48px; }

  /* Ссылки внутри текста тянуть по высоте нельзя — строка разъедется.
     Отступ 10 px даёт 43 px цели при 23 px строке. */
  .aud-link, .underlink { padding: 10px 0; }
}

/* Подсказка к матрице нужна только там, где матрица шире экрана. */
.mx-hint { display: none; margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
@media (max-width: 900px) { .mx-hint { display: block; } }

@media (hover: none) {
  .trio-i:hover { transform: none; }
}


/* ═══ 13 · МАТЕРИАЛЫ ══════════════════════════════════════════════════
   Плитка = кадр сверху + пастельная подложка снизу, как в карточках блока 02.
   Текст на кадр не ложится — прямой запрет брендбука. */
.res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.res {
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink);
  transition: transform var(--t-hover) var(--ease);
}
.res-shot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* Подложка тянется до низа ряда: плитки с подписями разной длины обязаны
   заканчиваться на одной линии, иначе ряд выглядит рваным. */
.res-body { flex: 1 1 auto; padding: 26px 28px 30px; }
.res-body h3 { margin: 0; transition: color var(--t-hover) var(--ease); }
.res-body p { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.res-a .res-body { background: var(--tone-a); }
.res-b .res-body { background: var(--tone-b); }
.res-c .res-body { background: var(--tone-c); }
.res-d .res-body { background: var(--tone-d); }

/* Сдвиг 6 px — в пределах разрешённых брендбуком 8. На касании выключен:
   iOS оставляет :hover приклеенным после тапа. */
@media (hover: hover) {
  .res:hover { transform: translateY(-6px); }
  .res:hover .res-body h3 { color: var(--accent); }
}
.res:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 1080px) { .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 640px) {
  .res-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .res-body { padding: 22px 20px 24px; }
}


/* ═══ ОТЗЫВЫ С ФОТО И ЛОГОТИПОМ ════════════════════════════════════════
   Фото занимает левую треть плитки и тянется во всю её высоту — как в
   образце. Ярлыки переехали в текстовую колонку: ставить их поверх
   изображения нельзя. Логотип клиента стоит в подвале, на месте подписи.
   Блок в конце файла: правила .cs-* выше объявлены позже медиазапросов. */
.cs-q .cs-face { flex: 0 0 34%; margin: 0; align-self: stretch; background: var(--paper); }
.cs-photo {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 12%;
  filter: grayscale(1) contrast(1.04);
}
/* Обесцвечено намеренно: три портрета в разной одежде (бордо, кобальт,
   терракота) рядом с пастельными плитками давали четыре спорящих цвета.
   Кобальт остаётся единственным ярким в блоке. */
.cs-q .cs-who { margin: 26px 26px 0 0; }
.cs-q .cs-quote { margin-top: 16px; }
.cs-brand { height: 24px; width: auto; display: block; opacity: .85; }

@media (max-width: 900px) {
  .cs-q .cs-face { flex: 0 0 auto; height: 260px; }
  .cs-q .cs-who { margin: 22px 22px 0; }
  .cs-brand { height: 22px; }
}


/* Имя и должность: две плашки в текстовой колонке. На белой плитке белая
   плашка из образца была бы невидима, поэтому имя идёт на paper, должность —
   инверсией на ink. Поверх фото плашки не ставим: это запрет брендбука. */
.cs-q .cs-who b { background: var(--paper); color: var(--ink); font-size: 15px; padding: 5px 10px; }
.cs-q .cs-who i { background: var(--ink); color: var(--white); font-size: 13px; padding: 5px 10px; }
/* Логотип и ниша стоят в подвале рядом: логотип отвечает «кто», ниша — «что
   за компания». Прижаты влево, чтобы не разъезжаться по краям плитки. */
.cs-q .cs-foot { justify-content: flex-start; gap: 14px; align-items: center; }
.cs-q .cs-foot .cs-logo { font-size: 13px; font-weight: 400; }


/* Логотипы клиентов равняются по ВЫСОТЕ ЗНАКОВ, а не по кадру файла.
   «СЛОЙ» — прописные во всю высоту кадра, urbana — строчные с выносными:
   на одной высоте 24 px urbana читался вдвое мельче соседа. Числа взяты
   от высоты прописных, а не на глаз. */
.brand-sloy { height: 19px; }
.brand-urbana { height: 30px; }
.brand-svyazlog { height: 24px; }
@media (max-width: 900px) {
  .brand-sloy { height: 17px; }
  .brand-urbana { height: 27px; }
  .brand-svyazlog { height: 22px; }
}


/* Ярлык героя не переносится внутри себя: на 900–1000 он рвался посреди
   фразы («на / себе»), и подводка читалась как две обрубленные строки. */
.pill-mark { white-space: nowrap; }


/* ── Первый экран: порядок блоков ──────────────────────────────────────
   Кнопки — отдельный ребёнок .hero, поэтому их место задаётся порядком,
   а не разметкой: на большом экране между подводкой и кадром, на телефоне
   под кадром. Правило в конце файла: .hero объявлен выше дважды. */
.hero-in { order: 1; }
.hero-act-wrap { order: 2; }
.stage-wrap { order: 3; }
.hero-act-wrap .hero-act { margin-top: clamp(16px, 2.4vh, 32px); }

@media (max-width: 760px) {
  /* Объявление про свою медиасеть на телефоне уходит: три строки ярлыка
     съедали первый экран раньше заголовка, а сказано то же самое в блоке
     «кому подходит», куда оно и ведёт. */
  .hero .pill { display: none; }

  /* Кнопки — под кадром: на телефоне сначала показываем продукт, потом
     просим действие. Кадр при этом остаётся в границах первого экрана. */
  .hero-act-wrap { order: 4; }
  /* Между кадром и кнопками копилось 49 px: общий зазор первого экрана
     (29) плюс собственный отступ кнопок (20). Отступы блоков задаём сами,
     а общий зазор на телефоне снимаем — иначе под фото открывается полоса
     пустоты в палец шириной. */
  .hero { row-gap: 0; }
  .hero .stage-wrap { margin-top: 22px; }
  .hero-act-wrap .hero-act { margin: 14px 0 clamp(20px, 3vh, 32px); flex-direction: column; }
  .hero-act-wrap .btn { width: 100%; }
}


/* ── Шапка на телефоне ─────────────────────────────────────────────────
   Кобальтовый блок «Регистрация» из шапки убран: втроём с логотипом и
   бургером он не помещался — логотип поджимался, а сам блок доходил до
   края экрана. Вход и регистрация переехали в меню, последняя строка
   залита кобальтом, чтобы действие осталось заметным.
   Правила в конце файла: шапка описана выше в трёх медиазапросах. */
.nav-auth { display: none; }

@media (max-width: 900px) {
  .bar-right > .cta-block { display: none; }
  .nav-auth { display: flex; }
  .nav .nav-auth { border-top: 1px solid var(--line); }
  .nav .nav-auth-cta { background: var(--accent); color: var(--white); font-weight: 600; }
  .nav .nav-auth-cta:hover { background: var(--accent-hover); color: var(--white); }
  /* Бургер остался единственным элементом справа — прижимаем его к краю
     тем же полем, что у логотипа слева. */
  .bar-in { padding-right: max(16px, env(safe-area-inset-right)); }
  .burger { margin-left: auto; }
}



/* Пиксельный край подложки на телефоне уходит. Его ширина считается от
   ВЫСОТЫ полосы (5:4), а раскрытая строка на 373 px высокая — кластер
   вырастал во всю ширину экрана и белые квадраты ложились прямо на текст.
   Это украшение, а не содержание. */
@media (max-width: 900px) {
  .px-edge { display: none; }
}


/* Шапка блока 04 на телефоне — по центру, как во всех остальных блоках.
   Левая выключка там осмысленна только рядом с панелями интерфейса, а на
   телефоне панели скрыты: заголовок висел слева с рваным правым краем. */
@media (max-width: 900px) {
  .why-intro { text-align: center; }
  /* У .why-h своя выключка влево — без переопределения она перебивала
     центрирование родителя. */
  .why-h { text-align: center; max-width: none; margin-inline: auto; }
  /* Ручной перенос в заголовке рассчитан на широкую колонку: на телефоне
     он рвал строку посреди фразы. */
  .why-h br { display: none; }
  .why-lead { max-width: 34ch; margin-inline: auto; }
  .head-mark-left { justify-content: center; }
  .head-mark-left .ghost { left: 50%; transform: translate(-50%, -50%); }
}


/* ── Блок 05 на телефоне ───────────────────────────────────────────────
   Пустота под выводом: у примечания стоит flex: 1 1 320px, и когда подвал
   разворачивается в СТОЛБИК, 320 px превращаются из ширины в высоту —
   абзац в три строки занимал 315 px. На телефоне размер берётся из текста. */
@media (max-width: 900px) {
  .demo-foot .small { flex: 0 0 auto; }

  /* Образцы переключаются, а не листаются: см. .demo-tabs ниже. */
  .demo-pair { display: block; }
  .demo-col { display: none; }
  .demo-pair[data-on="0"] .demo-col:nth-child(1),
  .demo-pair[data-on="1"] .demo-col:nth-child(2) { display: flex; }
  /* Названия образцов несёт переключатель — в самих карточках они лишние. */
  .demo-label { display: none; }
  .demo-tabs { display: flex; }
}



/* ── Переключатель образцов (только телефон) ────────────────────────────
   Две кнопки в один ряд, заливка вместо обводки, прямые углы — как у
   переключателя аудиторий в блоке 09. На большом экране образцы стоят
   рядом, и переключатель не нужен. */
.demo-tabs { display: none; gap: 2px; margin-bottom: 14px; }
.demo-tab {
  flex: 1 1 0; min-width: 0;
  border: 0; border-radius: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
  min-height: 44px; padding: 12px 10px;
  background: var(--paper); color: var(--ink-2);
}
.sec-fill .demo-tab { background: var(--paper); }
.demo-tab.is-on { background: var(--ink); color: var(--white); }
.demo-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* Показ переключателя стоит последним: базовое .demo-tabs { display: none }
   объявлено ниже медиазапроса и иначе перебивало бы его. */
@media (max-width: 900px) { .demo-tabs { display: flex; } }


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

   Порядок задан order, а не другой разметкой: одна и та же плитка обязана
   остаться одной и той же — иначе правки придётся вносить дважды. */
@media (max-width: 900px) {
  .cases .cs:nth-child(2) { order: 1; }   /* −41 %  · Слой      */
  .cases .cs:nth-child(3) { order: 2; }   /* отзыв  · Слой      */
  .cases .cs:nth-child(1) { order: 3; }   /* ×3,4   · urbana    */
  .cases .cs:nth-child(4) { order: 4; }   /* отзыв  · urbana    */
  .cases .cs:nth-child(7) { order: 5; }   /* ×2,1   · Связьлог  */
  .cases .cs:nth-child(9) { order: 6; }   /* отзыв  · Связьлог  */
  .cases .cs:nth-child(5) { order: 7; }   /* 6 площадок         */
  .cases .cs:nth-child(6) { order: 8; }   /* 40 минут           */
  .cases .cs:nth-child(8) { order: 9; }   /* 78 %               */

  /* Портрет на телефоне — КВАДРАТ, и кадр не режется вовсе: снимки
     квадратные, поэтому в квадратном окне они лежат целиком. Любая другая
     пропорция срезала макушку — именно это и выглядело обрубком. */
  .cs-q .cs-face { height: auto; aspect-ratio: 1 / 1; background: var(--white); }
  .cs-photo { object-fit: contain; object-position: 50% 50%; }
}

.cases-lead { margin: 0 0 20px; max-width: 62ch; }


/* ── Сцена первого экрана на телефоне ──────────────────────────────────
   Человек считался от высоты сцены и на узком экране занимал её целиком
   (344 из 374 px по ширине): цветные панели уходили ему за спину и читались
   обрубками. Ставим фигуру ниже роста сцены — выкладка снова видна, а
   плашки и панели остаются на своих местах. */
@media (max-width: 760px) {
  .hero .stage-person { height: 84%; }
  /* Ступени поднимаются выше: под фигурой ростом 84 % им нужно больше
     кадра, иначе видны только верхние 40 px каждой панели. */
  .hero .sb-1 { top: 38%; }
  .hero .sb-2 { top: 20%; }
  .hero .sb-3 { top: 30%; }
  .hero .sb-5 { top: 34%; }
  .hero .sb-tri { display: none; }   /* на 373 px фигура-акцент читается пятном */
}


/* ── Фигура стоит на земле ─────────────────────────────────────────────
   У фигуры задан top: 0, и когда рост уменьшили до 84 %, она повисла в
   воздухе: под ней осталось 71 px пустой сцены. Привязываем к низу. */
@media (max-width: 760px) {
  .hero .stage-person { top: auto; bottom: 0; }
}

/* ── Блоки во всю ширину экрана ────────────────────────────────────────
   На телефоне поля контейнера 16 px превращали каждую подложку в узкую
   карточку с серыми полями по бокам. Крупные блоки теперь идут от края до
   края, а собственную отбивку держат сами — текст к краю не прилипает. */
@media (max-width: 760px) {
  .demo-panel,
  .spec,
  .cases,
  .plans,
  .vs-grid,
  .vs-nots,
  .res-grid,
  .trio,
  .board-wrap,
  .mx-wrap {
    /* Ровно 16 px: выражение с env() давало не то же число, что поле
       контейнера, и по краям оставались серые полоски по 3 px. */
    margin-inline: -16px;
    width: auto;
  }
  /* Подложка с формой и образцами: поле возвращаем внутрь. */
  .demo-panel { padding-inline: 16px; }
  /* Матрица прокручивается сама — ей нужно только поле у первой колонки. */
  .mx-wrap { padding-inline: 16px; }
  /* Окно приложения своих полей не двигает: его к краям выносит .board-wrap. */
  .app { box-sizing: border-box; width: auto; margin-inline: 0; }
  /* Ширину не задаём: 100vw включает полосу прокрутки и давала лишние
     17 px горизонтального хода. Блочные элементы растягиваются сами. */
}


/* Вырез и скруглённые углы дают о себе знать только в ландшафте — там
   поля контейнера добираются системным отступом. */
@media (max-width: 900px) and (orientation: landscape) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .bar-in { padding-left: max(16px, env(safe-area-inset-left)); }
}


/* ═══ ТЕЛЕФОН: ПЛОТНАЯ УКЛАДКА БЛОКОВ ═════════════════════════════════
   Всё ниже — про один и тот же дефект: на большом экране зазор 2 px между
   плитками читается как шов в мозаике, а столбиком он превращается в
   светлые полоски между цветными подложками. Столбиком плитки стыкуются
   без шва. */
@media (max-width: 900px) {
  .cases { gap: 0; }
  .spec { gap: 0; }
  .spec > .spec-i + .spec-i { border-top: 1px solid var(--line); }
  .vs-grid, .vs-nots { gap: 0; }
  .plans { gap: 0; }
  .plans .plan + .plan { border-top: 1px solid var(--line); }

  /* Бренд-ядро: кадр и подложка идут от края до края, без белых полей по
     бокам и без зазора между собой. Сетка задана инлайном в разметке,
     поэтому цель — её класс .anim. */
  #bank .wrap > .anim { margin-inline: -16px; gap: 0 !important; }
  #bank .frame { width: 100%; }
  #bank .card-body { padding: 22px 16px 26px; }

  /* Окно приложения на телефоне скрыто: интерфейс на 373 px превращается в
     нечитаемую мелочь, а подводка над ним говорит то же словами. Секция
     после этого несёт только текст, поэтому поле снизу ей уже не нужно. */
  .board-wrap { display: none; }
  #board { padding-bottom: 8px; }
  #board .board-lead { margin-bottom: 0; }

  /* Аудитории: четыре кнопки разной длины стояли рваной лестницей.
     Сетка 2×2 равными долями — ряд ровный, подписи по центру. */
  .aud-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .aud-tab {
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 14px 10px; min-height: 56px;
    font-size: 14px; line-height: 1.25;
  }
}


/* ═══ ТЕЛЕФОН: СТЫКИ БЛОКОВ И ТАБЛИЦА ═════════════════════════════════ */
@media (max-width: 900px) {
  /* Сцену к краям НЕ выносим: карточка считает ширину от сцены, и при
     выносе текст сжимался в колонку в 200 px, а пиксельный кластер вылезал
     наружу. Ширины ей хватает и в полях контейнера. */

  /* Тарифы стыкуются без белой полосы: линия шва — ровно 1 px из системы,
     а не поле подложки. */
  .plans { gap: 1px; background: var(--line); }
  .plans .plan + .plan { border-top: 0; }

  /* ── Таблица сравнения ──────────────────────────────────────────────
     Семь колонок на 373 px не поместятся никакими средствами, поэтому
     таблица прокручивается. Чтобы прокрутка была осмысленной, первая
     колонка — со строками «что нужно» — прилипает к левому краю: иначе,
     уехав к нашей колонке, человек уже не знает, о какой строке речь. */
  .mx-wrap { margin-inline: -16px; padding-inline: 0; }
  .mx { min-width: 560px; }
  .mx-what {
    position: sticky; left: 0; z-index: 2;
    background: var(--paper);
    padding: 14px 12px 14px 16px;
    min-width: 150px;
  }
  .sec-fill .mx-what { background: var(--white); }
  .mx-col { font-size: 12.5px; padding-inline: 6px; }
  .mx-c { padding: 14px 6px; }
  /* Наша колонка держит края: на прокрутке она главная. */
  .mx-col-us, .mx-c-us { padding-inline: 10px; }
}

/* Поля секций на телефоне: 64 px сверху и снизу складывались в серую полосу
   в 128 px между цветными блоками. 40 — тот же шаг системы, но вдвое тише. */
@media (max-width: 760px) {
  .sec { padding: 40px 0; }
  #cycle .steps-pin + .wrap { padding-top: 40px; }
}


@media (max-width: 900px) {
  /* Секция с окном приложения на телефоне не нужна целиком: само окно уже
     скрыто, а одна подводка посреди белого поля читалась пустым экраном.
     То же самое сказано в блоке 03 и в перечне 07. */
  #board { display: none; }

  /* Переключатель аудиторий — во всю ширину экрана и без зазоров:
     четыре кнопки встык, шов только между ними. */
  .aud-tabs { margin-inline: -16px; gap: 0; }
  .aud-tab { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .aud-tab:nth-child(2n) { border-right: 0; }
  .aud-tab:nth-child(n+3) { border-bottom: 0; }
  .aud-tab.is-on { border-color: transparent; }
}

@media (max-width: 760px) {
  /* Стык 05 и 06: два поля по 40 px давали белую полосу в 80. Мозаика
     кейсов заканчивает блок 05 цветом, и следующая глава начинается сразу. */
  #demo { padding-bottom: 0; }
  #demo .cases-note + .cases-lead { margin-bottom: 16px; }
  #bank { padding-top: 40px; }
}


/* ── Таблица на телефоне: читаемые колонки ─────────────────────────────
   На 560 px минимума подписи колонок слипались боками («Аналитика» и
   «Планирование» стояли без пробела). Колонки получают собственную
   ширину и поле, знаки — размер, при котором видно, что это квадрат. */
@media (max-width: 900px) {
  .mx { min-width: 700px; }
  .mx-row { align-items: stretch; }
  .mx-col, .mx-c { min-width: 108px; padding-inline: 12px; }
  .mx-col { font-size: 13px; line-height: 1.25; }
  .mx-c i, .mx-c span { transform: scale(1.15); }
  .mx-what { min-width: 170px; }
  /* Правый край таблицы затухает — видно, что она продолжается. */
  .mx-wrap { position: relative; }
}

@media (max-width: 760px) {
  /* Швы в 05 и стык с 06 — убираем жёстко: правила выше объявлены позже
     базовых и перебивали эти значения. */
  .cases { gap: 0 !important; }
  .demo-panel { margin-bottom: 0; }
  #demo { padding-bottom: 0 !important; }
  /* 24 px, а не ноль: номер главы лежит выше ярлыка и при нулевом поле
     срезался верхней границей секции. */
  #bank { padding-top: 24px !important; }
}


@media (max-width: 760px) {
  /* 2. Материалы: плитки встык, белых полос между ними нет. */
  .res-grid { gap: 0; }
  .res + .res { border-top: 1px solid var(--line); }

  /* Финал: 144 px сверху и снизу на телефоне давали два пустых экрана
     до заголовка. */
  #final { padding: 56px 0 !important; }
}


/* ── Таблица по кнопке (телефон) ───────────────────────────────────────
   Семь колонок в горизонтальной прокрутке — не то, что читают с телефона.
   По умолчанию таблица закрыта, кнопка открывает её целиком. */
.mx-toggle { display: none; }

@media (max-width: 900px) {
  .mx-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; margin-top: 20px;
    padding: 16px; min-height: 52px;
    border: 1px solid var(--ink); border-radius: 0;
    background: transparent; color: var(--ink);
    font: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
  }
  .mx-toggle::after { content: "+"; font-size: 24px; font-weight: 300; color: var(--accent); line-height: 1; }
  .mx-toggle[aria-expanded="true"]::after { content: "–"; }
  .mx-wrap[hidden] { display: none; }
  .mx-wrap { margin-top: 12px; }

  /* 09 → 10: два поля по 40 px давали серую полосу в 80. */
  #audiences { padding-bottom: 0 !important; }
  #position { padding-top: 24px; }
}


/* ═══ ТЕЛЕФОН: НИ ОДНОЙ БЕЛОЙ ЩЕЛИ ════════════════════════════════════
   Столбиком любой зазор между цветными подложками читается щелью — на
   большом экране тот же зазор работает швом мозаики. Поэтому на телефоне
   зазор снимается у ВСЕХ сеток блока разом, а не по одной.
   !important — потому что часть этих правил объявлена ниже по файлу. */
@media (max-width: 760px) {
  .trio,
  .cases,
  .spec,
  .plans,
  .res-grid,
  .vs-grid,
  .vs-nots,
  .grid-2, .grid-3, .grid-4 {
    gap: 0 !important;
  }
  /* Там, где обе соседние подложки одного цвета, шов рисуем линией в 1 px —
     иначе две карточки слипаются в одну. */
  .plans .plan + .plan,
  .res + .res,
  .spec > .spec-i + .spec-i { border-top: 1px solid var(--line); }
}


/* ── Откуда брались щели ────────────────────────────────────────────────
   Анимация появления сдвигает плитку на 8 px вниз и сжимает до 98,5 %.
   На большом экране это незаметно: плитки стоят в мозаике с зазором.
   Столбиком во всю ширину каждый несработавший сдвиг превращается в белую
   щель на 8 px и в поля по 3 px по бокам — а срабатывает он только когда
   плитка попала в кадр наблюдателя, чего при быстрой прокрутке не
   происходит. На телефоне геометрию не двигаем вовсе: плитки стоят на
   местах с первого кадра. */
@media (max-width: 760px) {
  .trio-i.anim, .trio-i.anim.in,
  .cs.anim, .cs.anim.in,
  .res.anim, .res.anim.in,
  .plan.anim, .plan.anim.in,
  .spec-i.anim, .spec-i.anim.in,
  .step.anim, .step.anim.in {
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ── Сцена аудиторий на телефоне: одна колонка ─────────────────────────
   У отдельных сцен (.aud-s2, .aud-s4) две колонки заданы НИЖЕ по файлу и
   перебивали общий откат: карточка сжималась в колонку 250 px, и текст шёл
   по два слова в строку. Здесь ставим одну колонку для всех сцен разом. */
@media (max-width: 900px) {
  .aud-body,
  .aud-s1 .aud-body, .aud-s2 .aud-body, .aud-s3 .aud-body, .aud-s4 .aud-body {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  .aud-shot { order: -1; }
  .aud-card { width: 100%; }
  .aud-scene .aud-plate { margin: 0; text-align: left; }
  /* Кластер за кадром на 373 px превращался в лестницу пустых квадратов. */
  .aud-stage .px-edge, .aud-pins { display: none; }
}


@media (max-width: 760px) {
  /* Швы между плитками перечня: линия в 1 px рисовалась цветом --line,
     а плитки на телефоне paper — линия читалась белой щелью. Плитки
     стыкуются вплотную, разделяет их сама смена тона подложки. */
  .spec { background: transparent !important; }
  .spec > .spec-i + .spec-i,
  .plans .plan + .plan,
  .res + .res { border-top: 0 !important; }
  .spec > .spec-i { margin: 0 !important; }

  /* Белые полосы на стыках глав: у каждой секции было по 40 px сверху и
     снизу, вместе — 80 px пустоты между цветными блоками. Поле остаётся
     только сверху, и только чтобы номер главы не срезался. */
  #problem, #economy, #demo, #bank, #features, #proof,
  #audiences, #position, #pricing, #faq, #resources {
    padding-top: 28px !important;
    padding-bottom: 0 !important;
  }
  /* Последний блок перед подвалом дышит снизу сам. */
  #final { padding: 48px 0 !important; }
}


@media (max-width: 760px) {
  /* Приписка «ещё внутри» на телефоне убрана вместе со своей серой полосой:
     всё названное уже стоит плитками выше, а полоса добавляла ещё один
     пустой экран перед подвалом. */
  #features .small { display: none; }

  /* Нулевое поле снизу годится только тем главам, что кончаются плиткой во
     всю ширину. У глав со своей заливкой на нём обрезалась подложка —
     кобальтовая кнопка вылезала за тёмный блок. Им поле возвращаем. */
  #problem, #economy, #bank, #proof, #position, #faq {
    padding-bottom: 28px !important;
  }
  /* Тёмная и цветные врезки внутри глав держат своё поле снизу сами. */
  .sec-dark, .cta-dark, .demo-cta { padding-bottom: 28px; }
}


@media (max-width: 900px) {
  /* Карточки всех четырёх сцен аудиторий — во всю ширину экрана, без белых
     полей по бокам. Сцена остаётся в потоке, к краям выносится только она
     сама вместе с карточкой, поэтому текст ширину не теряет. */
  .aud-stage { margin-inline: -16px !important; }
  .aud-card { width: 100% !important; margin-inline: 0 !important; padding: 24px 16px 28px !important; }
  .aud-shot { width: 100%; }
}


@media (max-width: 900px) {
  /* У сцены своё внутреннее поле в 27 px (на большом экране оно держит
     кадр внутри цветной подложки) — на телефоне оно и оставляло рамку
     вокруг карточки. Снимаем, поле берёт на себя сама карточка. */
  .aud-stage { padding-inline: 0 !important; }
}


@media (max-width: 760px) {
  /* Белую полосу давало поле СЛЕДУЮЩЕЙ главы сверху. Убираем и его —
     воздух перед номером главы даёт отступ самой шапки, он лежит внутри
     цветной подложки, а не между блоками. */
  #problem, #economy, #demo, #bank, #features, #proof,
  #audiences, #position, #pricing, #faq, #resources {
    padding-top: 0 !important;
  }
  #problem > .wrap > .head, #economy > .wrap > .head, #demo > .wrap > .head,
  #bank > .wrap > .head, #features > .wrap > .head, #proof > .wrap > .head,
  #audiences > .wrap > .head, #position > .wrap > .head, #pricing > .wrap > .head,
  #faq > .wrap > .head, #resources > .wrap > .head { padding-top: 34px; }
}


@media (max-width: 760px) {
  /* Переключатель аудиторий стоит первым в главе и на нулевом поле садился
     ровно на стык — верх подписи срезало. У этой главы поле сверху
     возвращаем: белой полосы не будет, потому что предыдущая глава кончается
     плиткой во всю ширину того же тона. */
  #audiences { padding-top: 20px !important; }
  #audiences > .wrap > .head { padding-top: 14px; }
  /* Подпись в две строки должна помещаться целиком. */
  .aud-tab { min-height: 60px; line-height: 1.25; overflow: visible; }
}


@media (max-width: 760px) {
  /* Белая полоса под последней плиткой главы «выгода» — её собственное поле
     снизу, которое я вернул ради тёмной врезки в другой главе. Здесь его
     нет: глава кончается плиткой во всю ширину. Заодно красим саму главу
     в paper — если где-то останется миллиметр, он будет серым, не белым. */
  #bank { padding-bottom: 0 !important; background: var(--paper); }
}


@media (max-width: 900px) {
  /* Цитата и ссылка лежали в 7 px от края экрана: боковое поле этой плашки
     считалось от поля сцены, которое на телефоне снято. Даём ей то же
     поле в 16 px, что у текста карточки — колонка выравнивается по всей
     главе. */
  .aud-plate { padding: 0 16px 24px !important; }
}


@media (max-width: 900px) {
  /* Правка поля применялась (текст встал по колонке), но блок всё равно
     читался «прижатым»: у него нет своей подложки — цитата и ссылка висели
     прямо на белом, и справа оставалось пустое поле в пол-экрана.
     Даём плашке заливку главы, поле 20 px и шов сверху: теперь это
     самостоятельный блок под переключателем, а не обрывок текста. */
  /* Серую подложку снимаем — блок стоит на белом.
     Цитата по центру сверху, под ней кобальтовая кнопка во всю ширину:
     текст у левого края, стрелка у правого, чтобы вес не собирался
     в одну точку строки. */
  .aud-plate {
    padding: 20px 16px 24px !important;
    background: transparent;
    text-align: center;
  }
  .aud-plate .aud-say { font-size: 19px; line-height: 1.35; margin: 0 auto; text-align: center !important; }
  .aud-plate .aud-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    margin-top: 18px;
    padding: 0 18px;
    background: var(--accent);
    color: var(--white);
    text-align: left;
  }
  .aud-plate .aud-link:hover { background: var(--accent-hover); color: var(--white); }
}


@media (max-width: 900px) {
  /* Между сиреневой плиткой «кому подходит» и серой главой ниже оставался
     белый шов в 28 px — это нижнее поле самой главы, а не зазор. Плитка
     залитая, воздух ей не нужен: снимаем поле, и сиреневый стыкуется
     с серым впритык. */
  #audiences { padding-bottom: 0 !important; }
}


@media (max-width: 900px) {
  /* Сноски под тарифами на телефоне убраны: то же самое перечислено
     в самих карточках тарифов, а здесь они добавляли белый блок в шесть
     строк между тарифами и вопросами. На большом экране остаются. */
  .plans-note { display: none; }
}


/* Указатель «Читать →» в плитках ресурсов: карточка — ссылка, и это должно
   быть видно без наведения (на телефоне наведения нет вовсе). */
.res-body { display: flex; flex-direction: column; }
.res-go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 18px;
  font-size: 15px; font-weight: 600; color: var(--accent);
}
.res-go b { font-weight: 600; transition: transform var(--t-hover) var(--ease); }
@media (hover: hover) { .res:hover .res-go b { transform: translateX(4px); } }


@media (max-width: 900px) {
  /* Низ подвала: строка копирайта и две правовые ссылки стояли в одном
     переносящемся ряду — зазор 28 px складывался с собственным полем ссылок
     в 10 px, и расстояния получались разные. Ставим столбиком с общим шагом
     и одинаковой высотой строк. */
  .foot-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 22px;
  }
  .foot-bottom > span:first-child { padding-bottom: 6px; }
  .foot-legal { flex-direction: column; gap: 0; width: 100%; }
  .foot-legal a {
    display: flex; align-items: center;
    min-height: 44px; padding: 0 !important;
  }
}


@media (max-width: 760px) {
  /* Заголовок начинался почти вплотную к шапке: ярлык, который держал этот
     воздух, на телефоне убран. Возвращаем отступ самому тексту. */
  .hero-in { padding-top: clamp(24px, 5vh, 52px); }
}