/* ============================================================
   Страница услуги SEO Studio (services/seo-studio/)

   Восемь экранов, горизонтальная навигация как на главной
   (src/styles/screens/nav.css + src/scripts/nav.js). Префикс .seo-*

   Версия по макетам от Алекса (архив seostudionew). Шкала у макетов
   та же, что у сентябрьской главной, поэтому кегли берутся из
   токенов --fs-home-*.

   Размеры сняты при окне 1440: контент 90..1350 (1260), зазор между
   колонками 60. Правая панель 600, кроме экрана 1 — там карта 625, а
   левая колонка добирает остаток (575).

   Межстрочное в макетах плотнее общесайтового: у заголовков ровно
   кегль (48/48 и 32/32), у лида 1.125 (18 при 16).
   ============================================================ */

/* ---------- Общее для экранов ---------- */

/* Стрелка внутри кнопки. Класс общий на всю страницу: стрелка стоит
   на кнопках шести экранов и всюду одного размера. */
.seo-btn-arrow {
  display: inline-flex;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.seo-btn-arrow svg { width: 100%; height: 100%; }

/* Две колонки: слева текст, справа панель. В макетах при окне 1440
   контент 1260, колонка и панель по 600, зазор 60. */
/* Верхняя граница зазора — его же значение при 1680 (4.17vw = 70):
   выше контейнер не растёт, и зазору расти тоже не надо, иначе он
   отбирал бы ширину у колонок. */
.seo-two {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4.17vw, 70px);
  width: 100%;
}
/* Экран 1 — исключение: карта поискового продукта шире (625), поэтому
   левая колонка не своей ширины, а забирает остаток (575 при 1440).
   Зазор тот же, что у остальных экранов. */
.seo-two-map .seo-left {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

.seo-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.67vw, 28px);
  width: clamp(400px, 41.67vw, 700px);
  flex-shrink: 0;
}

/* Межстрочное у заголовков — ровно кегль (в макетах шаг строк 48 при
   кегле 48 и 32 при 32), у лида — 1.125 (шаг 18 при кегле 16). */
.seo-h1 {
  font-size: var(--fs-home-hero);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.seo-h2 {
  font-size: var(--fs-home-h2-wide);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* На экранах с правой панелью заголовок мельче: колонка вдвое уже. */
.seo-h2-narrow { font-size: var(--fs-home-h2); }

.seo-lead {
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text);
}
.seo-lead-dim { color: var(--text-50); }

/* Плашка над заголовком. В макетах SEO Studio она мельче общей
   (--fs-label, 13.7): кегль 12, высота 24, боковые отступы 12.7 —
   размеры получены обратным расчётом по шести плашкам разной длины.
   Зазор после неё вдвое меньше общего зазора колонки (12 против 24),
   поэтому отрицательный margin: остальные блоки колонки стоят на
   общем зазоре. */
.seo-badge {
  height: calc(var(--fs-home-micro) * 2);
  padding: 0 clamp(9px, 0.88vw, 15px);
  font-size: var(--fs-home-micro);
}
.seo-left > .seo-badge,
.seo-head > .seo-badge { margin-bottom: calc(clamp(8px, 0.8vw, 14px) * -1); }

/* Кнопка с подписью под ней — повторяется на экранах 1, 2, 4.
   Отступ сверху одинаковый и у пары кнопок (.seo-cta-row на экране 1),
   и у одиночной кнопки в колонке. */
.seo-cta-row,
.seo-left > .seo-cta {
  margin-top: clamp(14px, 1.7vw, 30px);
}
.seo-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 0.9vw, 16px);
}
.seo-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}
/* Экран 2, пятое состояние: кнопка уезжает под итоговую карточку, но
   место под неё в колонке остаётся — иначе колонка стала бы ниже и
   заголовок съехал бы вниз. */
.seo-gap-cta {
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}
.seo-gap-cta.is-gone {
  opacity: 0;
  visibility: hidden;
}
.seo-cta .btn {
  height: clamp(40px, 3.61vw, 62px);
  padding: 0 clamp(16px, 1.7vw, 29px);
  font-size: var(--fs-seo-cta);
}

/* ---------- Экран 1: карта поискового продукта ---------- */

/* Панель 625 шириной (остальные экраны — 600), внутренние отступы 24,
   зазор между блоками 12. Ширина задана flex-basis, а не flex: 1:
   ширину левой колонки считает браузер, и это её единственный
   источник (см. .seo-two-map выше). */
.seo-map {
  flex: 0 0 clamp(420px, 43.4vw, 729px);
  min-width: 0;
  padding: clamp(14px, 1.63vw, 27px) clamp(14px, 1.736vw, 29px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--surface-50);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.83vw, 14px);
}

.seo-map-title {
  font-size: var(--fs-seo-panel);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
}

/* Зазор до карточек вдвое больше общего (24 против 12) — так в макете,
   поэтому у чипов свой margin-bottom поверх зазора панели. */
.seo-engines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 0.83vw, 14px);
  margin-bottom: clamp(8px, 0.83vw, 14px);
}

.seo-engine {
  display: flex;
  align-items: center;
  gap: 6px;
  height: clamp(30px, 2.64vw, 45px);
  padding: 0 clamp(8px, 0.83vw, 14px);
  border-radius: 8px;
  /* Фона у чипа нет — в макете внутри ровно цвет панели. */
  border: 0.5px solid var(--surface-50);
  font-size: var(--fs-home-micro);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* Высота одна на все четыре знака, ширина у каждого своя: у Google
   квадрат, у Bing узкая «b», у Copilot приплюснутый шестигранник.
   Отсюда height без width и у бокса, и у самого знака. */
.seo-engine-icon {
  display: inline-flex;
  height: clamp(11px, 0.9vw, 15px);
  flex-shrink: 0;
}
.seo-engine-icon svg,
.seo-engine-icon img { height: 100%; width: auto; }

/* Два ряда по две карточки, между ними ограничение, снизу гипотеза.
   Скобы-связки лежат абсолютом внутри блоков (см. .seo-map-link). */
.seo-map-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.11vw, 19px);
}

/* Отступы по вертикали чуть меньше боковых: в макете карточка 64
   высотой при боковом отступе 12 (снято по левому краю текста).
   Боковой отступ не «на глаз»: при 12.5 строка «…квалифицированными
   лидами» в четвёртой карточке перестаёт влезать и переносится не
   там, где в макете. */
.seo-map-card {
  padding: clamp(8px, 0.79vw, 13px) clamp(9px, 0.83vw, 14px);
  border-radius: 8px;
  border: 0.5px solid var(--surface-50);
  background: var(--surface-15);
}
.seo-map-card-title {
  font-size: var(--fs-home-micro);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.seo-map-card-text {
  margin-top: 3px;
  font-size: var(--fs-seo-nano);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Связка между блоками карты — пунктирная скоба в зазоре 12px.
   Стойки a и b стоят по центрам колонок сетки (25% минус половина
   зазора), стойка c — по центру панели; горизонталь h соединяет a и b.
   Класс задаёт направление: -one сводит две карточки в одну строку
   (стойки сверху), -two разводит строку на две карточки. */
.seo-map-link {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: clamp(8px, 0.83vw, 14px);
}
.seo-map-link span { position: absolute; }
.seo-map-link-h {
  left: calc(25% - clamp(5px, 0.56vw, 10px));
  right: calc(25% - clamp(5px, 0.56vw, 10px));
  top: 50%;
  border-top: 1px dashed var(--text-20);
}
.seo-map-link-a,
.seo-map-link-b,
.seo-map-link-c {
  height: 50%;
  border-left: 1px dashed var(--text-20);
}
.seo-map-link-a { left: calc(25% - clamp(5px, 0.56vw, 10px)); }
.seo-map-link-b { left: calc(75% + clamp(5px, 0.56vw, 10px)); }
.seo-map-link-c { left: 50%; }
.seo-map-link-one .seo-map-link-a,
.seo-map-link-one .seo-map-link-b,
.seo-map-link-two .seo-map-link-c { top: 0; }
.seo-map-link-one .seo-map-link-c,
.seo-map-link-two .seo-map-link-a,
.seo-map-link-two .seo-map-link-b { top: 50%; }

.seo-map-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(9px, 0.9vw, 16px);
  padding: clamp(8px, 0.757vw, 13px);
  border-radius: 8px;
}
.seo-map-row-icon {
  display: inline-flex;
  width: clamp(20px, 1.94vw, 33px);
  height: clamp(20px, 1.94vw, 33px);
  flex-shrink: 0;
}
.seo-map-row-icon svg { width: 100%; height: 100%; }
.seo-map-row-title {
  font-size: var(--fs-home-micro);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.seo-map-row-text {
  margin-top: 3px;
  font-size: var(--fs-seo-nano);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Найденное ограничение — единственное жёлтое место на сайте, цвет
   взят из статусных токенов (--warn). */
.seo-map-limit {
  border: 1px solid var(--warn);
  background: rgba(240, 178, 46, 0.16);
}
.seo-map-limit .seo-map-row-icon,
.seo-map-limit .seo-map-row-title { color: var(--warn); }

.seo-map-hypothesis {
  border: 1px solid var(--accent);
  background: var(--accent-15);
}
.seo-map-hypothesis .seo-map-row-icon,
.seo-map-hypothesis .seo-map-row-title { color: var(--accent); }

/* ---------- Экран 2: разрывы ---------- */

/* Стек из двух состояний: аккордеон и итоговая карточка лежат в одной
   ячейке сетки и переключаются прозрачностью. Высоту колонки держит
   min-height, посчитанный в measureGaps (seo.js) по самому высокому
   состоянию, — иначе левая колонка с заголовком съезжала бы вниз при
   каждом переключении.

   visibility, а не display: под display переход не анимируется, а
   opacity в одиночку оставила бы скрытый блок под курсором и в обходе
   табом. Переход visibility срабатывает в конце, поэтому уходящий блок
   успевает погаснуть. */
.seo-gaps {
  flex: 1;
  min-width: 0;
  display: grid;
  align-items: center;
}
.seo-gaps-list,
.seo-gaps-outro {
  grid-area: 1 / 1;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out),
              visibility 0.45s;
}
/* Аккордеон прижат к верху ячейки: тогда строки стоят на месте, а
   раскрытая часть раздвигает только те, что ниже. По центру он бы
   ездил вверх-вниз, потому что раскрытые части разной высоты. */
.seo-gaps-list {
  align-self: start;
  display: flex;
  flex-direction: column;
}
/* Уходят в разные стороны: аккордеон вверх, карточка снизу. */
.seo-gaps.is-outro .seo-gaps-list {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
}
.seo-gaps:not(.is-outro) .seo-gaps-outro {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

/* Раскрытая строка — карточка с подсветкой, свёрнутая — только
   название и линия снизу. Обводка есть всегда, просто прозрачная:
   иначе бокс подрастал бы на 1px и список дёргался. */
.seo-gap {
  position: relative;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: flex-start;
  padding: clamp(14px, 1.736vw, 29px);
  border: 0.5px solid transparent;
  border-radius: var(--r-card);
  /* Свёрнутая строка в макете гасится не текстовым цветом, а цветом
     поверхности: замерено 35,40,52 на фоне страницы. */
  color: var(--surface-50);
  transition: color 0.3s var(--ease), background-color 0.4s var(--ease),
              border-color 0.4s var(--ease);
}
.seo-gap:hover { color: var(--text-50); }
.seo-gap::after {
  content: '';
  position: absolute;
  left: clamp(14px, 1.736vw, 29px);
  right: clamp(14px, 1.736vw, 29px);
  bottom: 0;
  height: 0.5px;
  background: var(--text-12);
  transition: opacity 0.3s var(--ease);
}
.seo-gap.active::after { opacity: 0; }

.seo-gap.active {
  color: var(--text);
  border-color: var(--text-12);
  background-color: var(--surface-15);
  background-image:
    radial-gradient(90% 140% at 8% 0%, rgba(77, 107, 255, 0.16) 0%, transparent 70%);
}

/* Место под иконку держит padding, а не сама иконка: иконка выведена
   из потока (см. .seo-gap-icon), иначе свёрнутая строка была бы её
   высотой — 102 вместо 72 по макету. */
.seo-gap-main {
  flex: 1;
  min-width: 0;
  padding-right: clamp(50px, 5vw, 84px);
}

/* display обязателен: название и раскрывающаяся часть — строчные
   span внутри блока, у строчного элемента height не работает вовсе. */
.seo-gap-name {
  display: block;
  font-size: var(--fs-home-lead);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Высота раскрывающейся части ставится из JS в px (measureGaps в
   seo.js) — тот же приём, что у аккордеонов on-page/off-page. */
.seo-gap-body {
  display: block;
  height: 0;
  overflow: hidden;
  transition: height 0.45s var(--ease-out);
}
.seo-gap-text,
.seo-gap-signal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-out);
}
.seo-gap.active .seo-gap-text,
.seo-gap.active .seo-gap-signal { opacity: 1; transform: none; }
.seo-gap.active .seo-gap-text { transition-delay: 0.08s; }
.seo-gap.active .seo-gap-signal { transition-delay: 0.15s; }

.seo-gap-text {
  display: block;
  margin-top: clamp(6px, 0.56vw, 10px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.seo-gap-signal {
  display: block;
  margin-top: clamp(14px, 1.53vw, 26px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--text);
}
.seo-gap-signal b { font-weight: 500; color: var(--accent); }

.seo-gap-icon {
  position: absolute;
  top: clamp(14px, 1.736vw, 29px);
  right: clamp(14px, 1.736vw, 29px);
  width: clamp(38px, 3.75vw, 62px);
  height: clamp(38px, 3.75vw, 62px);
  border-radius: 12px;
  background: var(--accent-15);
  border: 0.5px solid var(--accent-30);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.seo-gap.active .seo-gap-icon { opacity: 1; }
.seo-gap-icon svg { height: 62%; width: auto; }

/* Итоговая карточка вместо аккордеона — пятое состояние экрана. */
.seo-gaps-outro {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.1vw, 18px);
  align-self: center;
}
.seo-gaps-outro-card {
  padding: clamp(16px, 1.8vw, 30px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-15);
  background-image:
    radial-gradient(90% 140% at 100% 50%, rgba(77, 107, 255, 0.2) 0%, transparent 72%);
}
.seo-gaps-outro-title {
  font-size: var(--fs-home-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.seo-gaps-outro-text {
  margin-top: clamp(14px, 1.5vw, 24px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.seo-gaps-outro .btn {
  width: 100%;
  height: clamp(40px, 3.3vw, 56px);
  font-size: var(--fs-home-lead);
  gap: 8px;
}

/* ---------- Экран 3: слои поискового продукта ---------- */

/* Зазор между шапкой, блоком и плашкой — те же 60 при 1440, что между
   колонками в .seo-two (снято на экранах 3 и 5: 61 по чернилам и
   сверху, и снизу). */
.seo-wide {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4.17vw, 76px);
  width: 100%;
}

/* Зазор тот же, что в .seo-left: в макетах шапка экранов во всю
   ширину и левая колонка узких экранов размечены одинаково. */
.seo-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.67vw, 28px);
}

.seo-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(6px, 0.9vw, 14px);
}

.seo-tab {
  text-align: left;
  padding: clamp(8px, 0.75vw, 13px) clamp(11px, 1.2vw, 20px);
  border-radius: 10px 10px 0 0;
  border: none;
  background: var(--surface-15);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
/* Надписи свёрнутых табов сняты с макета как цвет поверхности
   (--track, на фоне таба это 52,61,79), а не как текст с малой
   альфой: --text-30 давал 85,89,98 — заметно светлее и холоднее, и
   неактивные слои спорили с активным. */
.seo-tab-num {
  display: block;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--track);
}
.seo-tab-name {
  display: block;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--track);
}
.seo-tab:hover .seo-tab-num,
.seo-tab:hover .seo-tab-name { color: var(--text-50); }
.seo-tab.active { background: var(--accent); }
.seo-tab.active .seo-tab-num,
.seo-tab.active .seo-tab-name { color: var(--text); }
.seo-tab.active .seo-tab-num { font-weight: 600; }

.seo-layer {
  display: flex;
  gap: clamp(24px, 3vw, 52px);
  padding: clamp(16px, 1.63vw, 28px);
  border-radius: 0 0 var(--r-card) var(--r-card);
  border: 0.5px solid var(--text-12);
  /* Заливки нет: в макете под табами ровный фон страницы, панель
     обозначена только кромкой. С surface-15 она читалась сплошной
     плашкой, светлее самих табов. */
}
.seo-layer-left { width: 47%; flex-shrink: 0; }
.seo-layer-right { flex: 1; min-width: 0; }

.seo-layer-name {
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

.seo-layer-tags {
  margin-top: clamp(12px, 1.15vw, 20px);
  display: flex;
  flex-wrap: wrap;
  /* 12 в макете, между всеми тремя парами пилюль одинаково. */
  gap: 12px;
}
/* Пилюля: бокс 24 высотой — как в макете, — но набрана она была вдвое
   мельче нужного и приглушённым цветом. По замеру макета кегль 10, а
   не 12 («Производительность» 97px чернил против наших 117), и цвет
   полный: ярчайший пиксель надписи в макете 232, ровно --text, а под
   --text-50 выходило 131. Отступы пересчитаны, чтобы бокс остался
   24: по вертикали (24 - 10 * 1.3) / 2, по горизонтали 12.5 — с ними
   пилюля «Technical SEO» сходится с макетными 89px. */
.seo-tag {
  padding: 5.5px 12.5px;
  border-radius: 20px;
  background: var(--surface-30);
  font-size: var(--fs-seo-nano);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
}

.seo-layer-text {
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.seo-layer-int {
  margin-top: clamp(8px, 0.83vw, 14px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.seo-layer-int b { font-weight: 600; color: var(--text); }

/* Плашка под блоком: текст слева, кнопка справа. Повторяется на
   экране 5 без кнопки. */
.seo-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 2.5vw, 44px);
  padding: clamp(16px, 1.56vw, 27px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-15);
  /* Подсвет с ОБОИХ краёв, к середине сходит на нет — так в макете:
     замер дал альфу акцента 0.23 у левой и правой кромки и ноль в
     полосе от 36% до 64% ширины. Прежний одиночный радиал светил
     только справа и вдвое слабее. */
  background-image:
    radial-gradient(46% 150% at 0% 50%, rgba(77, 107, 255, 0.38) 0%, transparent 72%),
    radial-gradient(46% 150% at 100% 50%, rgba(77, 107, 255, 0.38) 0%, transparent 72%);
}
.seo-note-title {
  font-size: var(--fs-home-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
}
.seo-note-text {
  margin-top: 10px;
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.seo-note .btn {
  flex-shrink: 0;
  gap: 8px;
  height: clamp(36px, 2.9vw, 50px);
  font-size: var(--fs-home-body);
  border: 0.5px solid var(--text-20);
  background: transparent;
}
.seo-note .btn:hover { background: var(--surface-30); }

/* Плашка экрана 3: заголовок и текст стопкой, кнопка справа. Колонка
   текста не растягивается до кнопки: в макете она 630 при 1440 (это
   52% содержимого плашки), и строка ломается после «выбираем». Без
   ограничения текст шёл на 896 и переносился на слове «влияют». */
.seo-note-body { max-width: 52%; }

/* Плашка экрана 5: две колонки текста, без кнопки. */
.seo-note-split { align-items: flex-start; }
.seo-note-split .seo-note-title { width: 40%; flex-shrink: 0; }
.seo-note-split .seo-note-text { margin-top: 0; flex: 1; }

/* ---------- Экран 4: этапы метода ---------- */

/* Полоса слева от карточки: пять сегментов, активный подсвечен. */
.seo-stage-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: clamp(12px, 1.4vw, 24px);
}

.seo-stage-track {
  flex-shrink: 0;
  width: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.seo-stage-seg {
  flex: 1;
  border-radius: 2px;
  background: var(--surface-30);
  transition: background 0.35s var(--ease);
}
.seo-stage-seg.active { background: var(--accent); }

.seo-stage {
  flex: 1;
  min-width: 0;
  /* 23.5 при 1440 — столько в макете от кромки карточки до плашки. */
  padding: clamp(14px, 1.63vw, 27px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-15);
  background-image:
    radial-gradient(70% 120% at 100% 30%, rgba(77, 107, 255, 0.26) 0%, transparent 68%);
}

.seo-stage-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--accent-50);
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* Кегль имени этапа — тот же, что у заголовков остальных карточек
   страницы (22 при 1440). Стоял --fs-home-h2 (32) — по замеру макета
   имя там 22: «Исследование» даёт 21px чернил против наших 31.5.
   Зазор от плашки в макете 7-8, а не 15. */
.seo-stage-name {
  margin-top: clamp(4px, 0.5vw, 8px);
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Линия под шапкой карточки — она есть в макете (при 1440 в 24 под
   именем и в 27 над первой подписью), у нас её не было вовсе. */
/* Отступы вокруг линии и шаг рядов сняты с макета при 1440: от имени
   до линии 19, от линии до первой подписи 27, между рядами 12. */
.seo-stage-rows {
  margin-top: clamp(11px, 1.3vw, 22px);
  padding-top: clamp(16px, 1.9vw, 32px);
  border-top: 0.5px solid var(--text-12);
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 0.83vw, 14px);
}
.seo-stage-row-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
}
.seo-stage-row-label::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
/* Межстрочное 1.07, а не общесайтовое 1.35: в макете шаг строк 15 при
   кегле 14 (замер по двухстрочным рядам), у нас было 19 — ряды
   растягивались, и карточка не сходилась с макетом по высоте. */
/* Текст ряда не сдвинут под подпись: в макете он начинается от кромки
   отступа карточки, левее маркера. Отступ в 13px отбирал ширину, и
   «Карта спроса, сегментов, …» ломалась на две строки вместо одной. */
.seo-stage-row-text {
  margin-top: 3px;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* Замыкающая заметка. В макете она есть только у пятого этапа: цикл
   закрывается и уходит в новый анализ. Отделена такой же линией, как
   шапка, и набрана полным цветом текста (в макете самый светлый
   пиксель заметки 239 — как у подписей рядов, а не как у их текста). */
.seo-stage-note {
  margin-top: clamp(11px, 1.3vw, 22px);
  padding-top: clamp(16px, 1.9vw, 32px);
  border-top: 0.5px solid var(--text-12);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ---------- Экран 5: коммерческие форматы ---------- */

/* Карусель, в отличие от табов экрана 3, не примыкает к карточкам:
   в макете между ней и рядом карточек 12. */
.seo-formats-nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 14px);
  margin-bottom: clamp(8px, 0.83vw, 14px);
}
.seo-formats-arrow {
  flex-shrink: 0;
  width: clamp(32px, 2.8vw, 46px);
  height: clamp(32px, 2.8vw, 46px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 0.5px solid var(--text-12);
  background: var(--surface-15);
  color: var(--text-50);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.seo-formats-arrow:hover:not(:disabled) { color: var(--text); background: var(--surface-30); }
.seo-formats-arrow:disabled { color: var(--text-20); cursor: default; }
.seo-formats-arrow svg { width: 45%; height: 45%; }

.seo-formats-label {
  flex: 1;
  min-width: 0;
  height: clamp(32px, 2.8vw, 46px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 0.5px solid var(--text-12);
  background: var(--surface-15);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  text-align: center;
}

/* Карточек в группе две или три — раскладку задаёт grid по их числу.

   min-height ряду ставит measureFormats (seo.js) по самой высокой из
   трёх групп, чтобы шапка экрана и плашка не съезжали при
   переключении. Ряд растягивается на весь этот резерв, а карточки
   вместе с ним: при align-content: start резерв оставался пустой
   полосой под карточками — в группах из двух это 45–75px явной дыры
   между рядом и плашкой. Пустое место лучше отдать самим карточкам.

   На мобильном резерва нет вовсе (там страница скроллится, держать
   нечего) — и своё align-content, см. медиазапрос ниже. */
.seo-formats-grid {
  display: grid;
  align-content: stretch;
  gap: clamp(8px, 1vw, 16px);
}

/* Две обёртки внутри карточки существуют ради мобильной раскладки: там
   рамку носит .seo-format-box, а кнопка со строкой «срок / цена»
   выходят из-под неё и стоят под карточкой (см. медиазапрос).
   На десктопе боксов быть не должно — карточка одна колонка, поэтому
   обе обёртки contents, а порядок восстанавливается order: в разметке
   список идёт раньше кнопки (он внутри коробки), на десктопе — позже. */
.seo-format-box,
.seo-format-foot { display: contents; }
.seo-format .btn { order: 1; }
.seo-format-meta { order: 2; }
.seo-format-gives { order: 3; }

.seo-format {
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.7vw, 28px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  background: var(--surface-15);
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease),
              background 0.3s var(--ease), transform 0.3s var(--ease-out);
}

/* Под курсором карточка выходит на первый план, соседние гаснут — так
   в макете (там курсор стоит на первой, вторая приглушена целиком:
   заголовок, текст, кнопка и список разом, поэтому гасим opacity
   карточки, а не каждый цвет по отдельности).

   Условие на грид, а не на :not(:hover) в одиночку: пока курсора на
   ряду нет, все карточки в полную яркость — иначе экран выглядел бы
   выключенным. По касанию :hover не наступает, поэтому только там,
   где курсор действительно есть.

   :focus-within — то же с клавиатуры: карточка с кнопкой в фокусе
   выходит на первый план. Внутри того же медиазапроса намеренно: на
   тач-устройствах фокус остаётся на кнопке после тапа, и ряд гас бы
   уже без курсора. */
@media (hover: hover) {
  .seo-formats-grid:hover .seo-format,
  .seo-formats-grid:focus-within .seo-format { opacity: 0.45; }
  .seo-formats-grid .seo-format:hover,
  .seo-formats-grid .seo-format:focus-within {
    opacity: 1;
    border-color: var(--accent-50);
    background:
      radial-gradient(120% 100% at 50% 0%, rgba(77, 107, 255, 0.12) 0%, transparent 70%),
      var(--surface-30);
    transform: translateY(-2px);
  }
}
.seo-format-name {
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.seo-format-text {
  margin-top: clamp(8px, 0.9vw, 15px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.seo-format .btn {
  margin-top: clamp(14px, 1.6vw, 26px);
  width: 100%;
  height: clamp(34px, 2.7vw, 46px);
  gap: 8px;
  font-size: var(--fs-home-body);
}

.seo-format-meta {
  margin-top: clamp(10px, 1.1vw, 18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-home-body);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.seo-format-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.seo-format-meta svg { width: 1em; height: 1em; flex-shrink: 0; }

.seo-format-gives {
  margin-top: clamp(14px, 1.6vw, 26px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px clamp(12px, 1.4vw, 24px);
}
.seo-format-gives li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
}
.seo-format-gives li::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
/* В группе из трёх карточек пункты идут одной колонкой: на 410px
   двухколоночный список ломается по словам. */
.seo-formats-grid.cols-3 .seo-format-gives { grid-template-columns: 1fr; }

/* ---------- Экран 6: доказательства ---------- */

/* Точки-пейджер — только мобильная раскладка (см. медиазапрос ниже):
   на десктопе кейсы переключают текстовые табы над карточкой. */
.seo-case-dots { display: none; }

.seo-proof-tabs {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 24px);
  margin-top: clamp(10px, 1.2vw, 20px);
}
.seo-proof-tab {
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-home-lead);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-30);
  cursor: pointer;
  transition: color 0.25s var(--ease);
}
.seo-proof-tab:hover { color: var(--text-50); }
.seo-proof-tab.active { color: var(--accent); }
.seo-proof-sep { color: var(--text-20); }

.seo-case {
  flex: 1;
  min-width: 0;
  padding: clamp(16px, 1.9vw, 32px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-15);
  background-image:
    radial-gradient(80% 120% at 100% 60%, rgba(77, 107, 255, 0.22) 0%, transparent 70%);
}
.seo-case-name {
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.seo-case-lead {
  margin-top: 8px;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.seo-case-text {
  margin-top: clamp(18px, 2vw, 34px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

.seo-case-metrics {
  margin-top: clamp(18px, 2vw, 34px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.1vw, 18px);
}
.seo-case-metric {
  padding-left: clamp(10px, 1.1vw, 18px);
  border-left: 2px solid var(--accent);
}
.seo-case-metric-value {
  font-size: var(--fs-home-lead);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.seo-case-metric-label {
  margin-top: 3px;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

.seo-case .btn {
  margin-top: clamp(18px, 2vw, 34px);
  gap: 8px;
  height: clamp(36px, 2.9vw, 50px);
  font-size: var(--fs-home-body);
  border: 0.5px solid var(--text-20);
  background: transparent;
}
.seo-case .btn:hover { background: var(--surface-30); }

/* ---------- Экран 7: технологический контур ---------- */

/* Веер карточек: активная шире остальных. Ширины в fr, потому что
   при переключении анимируется именно доля ряда.

   Карточки по центру ряда, а не растянуты: в макете активная выше
   пассивных (150 против 144 при 1440) и все они выровнены по средней
   линии. Высота ряда при этом не гуляет — активной всегда ровно одна,
   и её текст во всех пяти состояниях ложится в две строки. */
.seo-techs {
  display: grid;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  transition: grid-template-columns 0.45s var(--ease-out);
}

/* Пассивная карточка — та же карточка в 0.8 масштаба. Так в макете:
   при 1440 у активной отступ 24, плашка 24, имя 22, текст 14, у
   пассивной — 19, 20, 17.6 и 11.2. Отношение везде одно, поэтому
   масштаб задаётся одним множителем: иначе четыре пары чисел
   разъезжаются при первой же правке. Раньше пассивная сидела на
   отдельных мелких кеглях (14 и 9.9) и рядом с макетом читалась
   слишком мелко и слипшейся. */
.seo-tech { --tech-k: 0.8; }
.seo-tech.active { --tech-k: 1; }

/* Флекс-колонка, а не блок: у <button> внутренняя раскладка своя, и
   на блочных детях он добавлял к карточке по 2.7px сверху и снизу. */
.seo-tech {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  /* В макете отступ активной 23.5, пассивной 18.5. Взято на пиксель
     меньше: при макетном отступе самой длинной строке пассивной
     карточки («предположение и фиксируем», 153.1px) остаётся полпиксела,
     и она уходит на пятую строку — пассивная карточка становится выше
     активной. Пиксель отступа незаметен, лишняя строка заметна. */
  padding: calc(clamp(15px, 1.53vw, 26px) * var(--tech-k));
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  background: var(--surface-15);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* Активная карточка отличается только размером и шириной: фон и рамка
   у неё те же, что у остальных (в макете подсветки нет). */
.seo-tech:hover { border-color: var(--text-20); }

/* Не inline-block: строчный бокс добавлял бы к карточке лишние 6px
   на межстрочное родителя. */
.seo-tech-tag {
  display: block;
  width: fit-content;
  padding: calc(4.2px * var(--tech-k)) calc(12px * var(--tech-k));
  border-radius: 6px;
  background: var(--accent-50);
  font-size: calc(var(--fs-home-micro) * var(--tech-k));
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.seo-tech.active .seo-tech-tag { background: var(--accent); }

/* Кегли переключаются мгновенно, без transition.
   Анимировать font-size нельзя: текст переверстывается на каждом
   кадре, число строк в карточке гуляет, и вместе с ним прыгает высота
   ряда — по замеру размах был 19.4px, а верхняя кромка ряда ездила на
   9.7px, то есть дёргался весь экран. Ширину ряда анимирует
   grid-template-columns, этого достаточно. */
/* Зазоры до имени и до текста в макете почти равны (11.2 и 11.3 при
   1440 у активной), поэтому берутся из одного значения. */
.seo-tech-name {
  display: block;
  margin-top: calc(clamp(7px, 0.78vw, 13px) * var(--tech-k));
  font-size: calc(var(--fs-home-title) * var(--tech-k));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Межстрочное 1.07: в макете блок текста активной карточки от верха
   прописных первой строки до выносного элемента последней 28px на две
   строки, пассивной — 47 на четыре. Общесайтовое 1.2 давало на 2-3px
   больше на строку и разводило текст шире макета. */
.seo-tech-text {
  display: block;
  margin-top: calc(clamp(7px, 0.78vw, 13px) * var(--tech-k));
  font-size: calc(var(--fs-seo-tech) * var(--tech-k));
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* ---------- Экран 8: запрос диагностики ---------- */

.seo-checks {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: clamp(12px, 1.4vw, 24px);
}
.seo-check {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  cursor: pointer;
}
.seo-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.seo-check-box {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1px solid var(--text-30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.seo-check-box svg { width: 13px; height: 13px; opacity: 0; transition: opacity 0.2s var(--ease); }
.seo-check input:checked + .seo-check-box {
  background: var(--accent);
  border-color: var(--accent);
}
.seo-check input:checked + .seo-check-box svg { opacity: 1; }
.seo-check input:focus-visible + .seo-check-box { outline: 2px solid var(--accent-50); outline-offset: 2px; }
.seo-check a { color: var(--accent); }
.seo-check a:hover { filter: brightness(1.25); }

.seo-form-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.1vw, 18px);
}

.seo-form {
  padding: clamp(14px, 1.7vw, 28px) clamp(14px, 1.7vw, 28px) clamp(6px, 0.7vw, 12px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-15);
  background-image:
    radial-gradient(80% 120% at 100% 70%, rgba(77, 107, 255, 0.18) 0%, transparent 72%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(20px, 2.3vw, 40px);
}

/* Поля без рамок, только линия снизу — так в макете. */
.seo-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(10px, 1.1vw, 18px) 0;
  border-bottom: 0.5px solid var(--text-12);
  cursor: text;
  transition: border-color 0.2s var(--ease);
}
.seo-field:focus-within { border-bottom-color: var(--accent-50); }
.seo-field.is-bad { border-bottom-color: var(--danger); }
.seo-field-wide { grid-column: 1 / -1; }

.seo-field-label {
  display: block;
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.seo-input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
}
.seo-input::placeholder { color: var(--text-30); }
.seo-input:focus { outline: none; }
/* Высоту наращивает growArea в seo.js: в макете поле в одну строку,
   а ручку изменения размера рисовать незачем. */
.seo-textarea { resize: none; overflow: hidden; }

.seo-submit {
  width: 100%;
  height: clamp(42px, 3.6vw, 62px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-btn);
  border: 0.5px solid var(--text-20);
  background: transparent;
  font-family: inherit;
  font-size: clamp(14px, 1.25vw, 22px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-30);
  cursor: not-allowed;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), filter 0.2s var(--ease);
}
.seo-submit:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
  cursor: pointer;
}
.seo-submit:not(:disabled):hover { filter: brightness(1.1); }

.seo-form-note {
  text-align: center;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-30);
}
.seo-form-note[data-state='error'] { color: var(--danger); }
.seo-form-note[data-state='sending'] { color: var(--text-50); }

/* Экран благодарности вместо формы. */
.seo-form-done {
  padding: clamp(24px, 2.8vw, 48px) clamp(14px, 1.7vw, 28px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-15);
  background-image:
    radial-gradient(90% 130% at 0% 0%, rgba(77, 107, 255, 0.22) 0%, transparent 64%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.1vw, 18px);
  text-align: center;
}
.seo-form[hidden],
.seo-form-done[hidden],
.seo-form-ref[hidden] { display: none; }

.seo-form-ref {
  padding: 4px 12px;
  border-radius: 20px;
  border: 0.5px solid var(--text-20);
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.seo-form-ref b { font-weight: 500; color: var(--text); }
.seo-form-done-title {
  font-size: var(--fs-home-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.seo-form-done-text {
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* ============================================================
   МОБИЛЬНАЯ РАСКЛАДКА
   ============================================================ */
/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ (макеты seo_studio.zip, 375px)

   Общее по всем экранам:
     • H1 32, заголовки секций 24 — обратный расчёт по ширине строк:
       «SEO без бизнес-» 250 и «результата — дорогая» 330 дают 31.6,
       три строки H2 разных экранов сошлись на 23.5-23.6;
     • лид 14 при шаге строк 15.3 (замер по семи строкам экрана 7) —
       это ровно то, что даёт общий --fs-home-lead, менять нечего;
     • подписи под кнопками не показываются — как и на главной;
     • размеры в этом блоке в px: мобильные макеты сняты с одной
       ширины 375, тянуть их клампами не по чему.
   ============================================================ */
@media (max-width: 1024px) {
  .seo-two {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(24px, 6vw, 40px);
  }
  .seo-left,
  .seo-two-map .seo-left { width: 100%; }
  .seo-left .btn { width: 100%; }
  .seo-cta { width: 100%; }
  .seo-cta-row { flex-direction: column; align-items: stretch; }

  .seo-h1 { font-size: 32px; }
  .seo-h2 { font-size: var(--fs-svc-h2-mob); }
  .seo-cta .caption { display: none; }

  /* ---------- Экран 1: карта поискового продукта ----------
     Герой по центру — так в макете. Сетку карты и ряд поисковиков
     мобильный блок раньше ломал в одну и в две колонки; в макете они
     ровно десктопные: четыре чипа в ряд и карточки по две. */
  .seo-map { flex: 1 1 auto; }
  .seo-map-link { display: none; }
  /* Четыре чипа в ряд равными ячейками: по макету ряд занимает 291 при
     зазоре 8, то есть по 67 на чип. В общей высоте 30 и с боковыми
     отступами «AI Search» туда не влезал и уходил на вторую строку. */
  .seo-engines { gap: 8px; }
  .seo-engine {
    height: 26px;
    padding: 0 6px;
    gap: 4px;
    justify-content: center;
    white-space: nowrap;
  }
  .seo-engine-icon { height: 11px; }
  #seo-hero .seo-left { align-items: center; text-align: center; }

  /* ---------- Экран 2: где теряется результат ----------
     Иконка переезжает из правого верхнего угла к заголовку слева:
     в макете она стоит перед названием, а текст под ними идёт во всю
     ширину карточки. Замер: глиф иконки 49..66, название начинается
     на 89, содержимое карточки — от 40 при поле страницы 16. */
  .seo-gap { padding: 24px; }
  .seo-gap::after { left: 0; right: 0; }
  .seo-gap-icon {
    top: 24px;
    left: 24px;
    right: auto;
    width: 36px;
    height: 36px;
  }
  .seo-gap-name {
    min-height: 36px;
    display: flex;
    align-items: center;
    padding-left: 49px;
  }
  /* Свёрнутой строке иконки нет, и отступ под неё не нужен. */
  .seo-gap:not(.active) .seo-gap-name { min-height: 0; padding-left: 0; }
  /* Шаг свёрнутых строк в макете 75 (замер по трём): при высоте
     строки 19 это по 28 сверху и снизу. */
  .seo-gap:not(.active) { padding: 28px 0; }

  /* ---------- Экран 3: слои поискового продукта ----------
     Табы — только номер слоя, подпись убрана: в макете это компактная
     плашка из пяти чипов, три в первом ряду и два во втором. Шесть
     колонок с пролётами 2 и 3 дают ровно макетные центры чипов
     (57/171/285 в первом ряду и 86/257 во втором). */
  .seo-tabs {
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
  }
  .seo-tab {
    grid-column: span 2;
    border-radius: 10px;
    padding: 9px 8px;
    text-align: center;
  }
  .seo-tab:nth-child(n+4) { grid-column: span 3; }
  .seo-tab-name { display: none; }

  /* Порядок в карточке слоя: название, текст, интеграция и только
     потом пилюли. display: contents убирает обе колонки как боксы,
     оставляя их содержимое прямыми детьми карточки. */
  .seo-layer {
    flex-direction: column;
    gap: 14px;
    border-radius: var(--r-card);
    padding: 20px;
    /* Заливку возвращаем: на десктопе панель приросла к табам и в
       макете прозрачная, а здесь она отдельная карточка под сеткой
       чипов — без фона её край читается только по кромке. */
    background: var(--surface-15);
  }
  .seo-layer-left,
  .seo-layer-right { display: contents; }
  .seo-layer-name { order: 1; }
  .seo-layer-text { order: 2; }
  .seo-layer-int { order: 3; margin-top: 0; }
  /* Пилюли в макете стоят сеткой два на два, а не растекаются по
     ширине: у них равные ячейки и текст по центру. */
  .seo-layer-tags {
    order: 4;
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .seo-layer-tags .seo-tag { text-align: center; }

  /* Плашка «Состав решения» в мобильном макете не показывается —
     остаётся только её кнопка, обычной строкой под карточкой. */
  #seo-layers .seo-note {
    padding: 0;
    border: none;
    background: none;
  }
  #seo-layers .seo-note-body { display: none; }

  .seo-note { flex-direction: column; align-items: stretch; }
  .seo-note .btn { width: 100%; }
  .seo-note-split .seo-note-title { width: 100%; }
  .seo-note-body { max-width: 100%; }

  /* ---------- Экран 4: этапы метода ----------
     Полоса прогресса горизонтальная и ПОД карточкой (в макете она
     внизу, а не над ней). */
  .seo-stage-wrap { flex-direction: column; }
  .seo-stage-track {
    order: 2;
    width: 100%;
    height: 4px;
    flex-direction: row;
  }
  .seo-stage { padding: 20px; }
  /* Линии под названием этапа в мобильном макете нет. */
  .seo-stage-rows { padding-top: 0; border-top: none; }

  /* ---------- Экран 5: форматы работы ----------
     В макете видна одна карточка за раз, стрелки листают форматы
     подряд (семь состояний на семь форматов), а подпись показывает
     группу текущего. Кнопка и строка «срок / цена» выходят из-под
     рамки карточки и стоят под ней — поэтому рамку носит внутренняя
     коробка, а не сама карточка. */
  .seo-formats-grid { grid-template-columns: 1fr; align-content: start; }
  .seo-format {
    padding: 0;
    border: none;
    background: none;
  }
  /* На мобильном коробка снова становится боксом и берёт рамку на
     себя; order выше при этом работает как надо — внутри коробки
     список последний, снаружи кнопка и срок идут за ней. */
  .seo-format-box {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: var(--r-card);
    border: 0.5px solid var(--text-12);
    background: var(--surface-15);
  }
  .seo-format-foot { display: contents; }
  .seo-format-gives,
  .seo-formats-grid.cols-3 .seo-format-gives { grid-template-columns: 1fr; }
  /* Плашка «On-page, Off-page и Technical SEO» в мобильном макете
     отсутствует. */
  #seo-formats .seo-note-split { display: none; }

  /* ---------- Экран 6: доказательства ----------
     Вместо текстовых табов «[ Кейс №1 ]» — точки под карточкой. */
  .seo-proof-tabs { display: none; }
  .seo-case-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
  }
  .seo-case-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--track);
    cursor: pointer;
    transition: background 0.25s var(--ease);
  }
  .seo-case-dot.active { background: var(--accent); }
  .seo-case { padding: 20px; }
  /* Ссылка, а не кнопка: в макете это синяя строка под метриками. */
  .seo-case .btn {
    width: auto;
    height: auto;
    padding: 0;
    justify-content: flex-start;
    border: none;
    background: none;
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
  }
  .seo-case .btn:hover { background: none; }

  /* ---------- Экран 7: технологический контур ----------
     На мобильном все карточки читаются целиком, веер не нужен:
     масштаб у всех полный, отличается только цвет плашки. */
  .seo-techs { grid-template-columns: 1fr; gap: 10px; }
  .seo-tech,
  .seo-tech.active { --tech-k: 1; }
  /* В макете карточка просторнее десктопной пассивной: отступ 20. */
  .seo-tech { padding: 20px; }
  .seo-tech-name,
  .seo-tech.active .seo-tech-name { font-size: var(--fs-home-lead); }
  .seo-tech-text,
  .seo-tech.active .seo-tech-text { font-size: var(--fs-home-body); }

  /* ---------- Экран 8: форма ----------
     В макете поля лежат прямо на странице, без плашки, а согласия
     стоят ПОД кнопкой отправки. Колонка слева перестаёт быть боксом
     (display: contents), и её содержимое выстраивается порядком
     вместе с формой. */
  #seo-request .seo-left { display: contents; }
  #seo-request .seo-badge { order: 1; }
  #seo-request .seo-h2 { order: 2; }
  #seo-request .seo-lead { order: 3; }
  #seo-request .seo-form-wrap { order: 4; }
  #seo-request .seo-checks { order: 5; }
  #seo-request .seo-two { gap: 16px; }

  .seo-form {
    grid-template-columns: 1fr;
    padding: 0;
    border: none;
    background: none;
  }
  /* Подпись поля в макете 12, а не 14. */
  .seo-field { padding: 12px 0; }
  .seo-field-label { font-size: var(--fs-home-body); }
  /* Кегль ВВОДА оставлен 16, хотя в макете подсказка мельче: ниже 16
     Safari на iOS зумит страницу при фокусе на поле и обратно уже не
     отматывает. Это поведение платформы, а не вкус. */
  .seo-input { font-size: 16px; }
  /* Длинные подсказки больших полей на узком экране идут в три
     строки — в одну строку, как в макете, они тут не влезают. */
  .seo-textarea { min-height: 4.2em; }
  .seo-check { font-size: var(--fs-home-body); }
  /* Строки «Ответим в течение…» в макете нет. Скрываем только
     подсказку по умолчанию: сообщения об ошибке отправки видны. */
  .seo-form-note:not([data-state]) { display: none; }
}

/* ============================================================
   ЭКРАН 5 НА НЕВЫСОКИХ ОКНАХ
   ============================================================ */

/* Пятый экран — самый высокий на странице: шапка, карусель групп, ряд
   карточек и плашка под ним. По замерам он единственный не влезал в
   окно, и плашка уходила за нижнюю кромку: 33px на 1366x768, 39 на
   1440x800, 44 на 1920x950 (это 1080p с хромом браузера), 48 на
   1536x864, 94 на 1920x900. Экран фиксированной высоты и не
   скроллится, поэтому увидеть срезанное нельзя никак.

   Отбираем у зазоров между тремя блоками (`.seo-wide` даёт по 60px на
   1440 и по 76 на 1920 — вдвоём это до 152px воздуха). Кегли, ширины
   карточек и внутренние отступы не трогаем: они сняты с макета.

   Пороги выбраны так, чтобы обойти окна, где блок и так влезает, —
   там пропорции макета остаются ровно как были:
     1440x900  запас 18  → под правило не попадает (макет мерился тут);
     1920x1080 запас 67  → тоже.
   Второй запрос — для широких и невысоких окон: на 1920 блоку нужно
   около 994px по высоте, и 950 ему уже мало. Он идёт после первого и
   поджимает сильнее. */
@media (min-width: 1025px) and (max-height: 899px) {
  #seo-formats .seo-wide { gap: clamp(18px, 2.6vh, 76px); }
}
@media (min-width: 1600px) and (max-height: 1000px) {
  #seo-formats .seo-wide { gap: clamp(16px, 2.2vh, 76px); }
}