/* =========================================================
   RESPONSIVE.CSS · все медиа-запросы в одном месте
   Подключается ПОСЛЕ style.css
   -----------------------------------------------------------
   Breakpoints:
     ≤1024  — tablet L
     ≤860   — tablet / mobile landscape
     ≤560   — mobile
   ========================================================= */


/* [SPIRIT-HOP] Глобально (вне media): видео подставляется в Kwan-якорь
   и должно заполнять слот аккуратно — на десктопе (если юзер пришёл
   с мобилы, Kwan не загружен) spirit занимает место 3D-катушки,
   на мобиле CSS ниже в ≤860 блоке переопределяет размеры под
   абсолютное позиционирование.

   object-fit: contain — сохраняем пропорции видео внутри квадратного
   слота (aspect-ratio 1/1 у .stack__canvas-slot и .about__canvas-slot
   на десктопе), никакого обрезания. */
.spirit-hop {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}


/* [SPIRIT-HOP · DESKTOP FIX] Слот .process__canvas-slot на десктопе
   спроектирован под 3D-катушку Kwan: позиционирован абсолютом с
   left: -340px, width: 560px — половина уходит за левый край (так
   задумано для 3D-объекта, у него прозрачные края). Для spirit-video
   это превращается в обрезание кадра — видно только правую половину.
   Когда в слоте живёт spirit (.is-spirit-host), переопределяем
   позицию: прижимаем к левому краю контент-области и уменьшаем,
   чтобы видео было полностью в кадре. */
@media (min-width: 861px) {
  .process__canvas-slot.is-spirit-host {
    left: 4%;
    top: 12%;
    width: min(32vw, 440px);
    height: min(32vw, 440px);
    opacity: 0.7;
  }
}


/* ============== ≤ 1024 ============== */
@media (max-width: 1024px) {

  /* Единый ритм секций на 1024: 96px сверху/снизу.
     Одной строкой — чтобы все отступы между блоками были
     гарантированно равны. */
  .pains, .stack, .process, .cases, .compare,
  .about, .pricing, .faq, .blog, .cta {
    padding-top:    var(--space-9);
    padding-bottom: var(--space-9);
  }
  .marquee { margin: var(--space-9) 0; }

  /* NAV */
  .nav__menu        { gap: var(--space-6); }

  /* HERO · float-tags ближе к рамке */
  .float-tag--1     { left: -4%; }
  .float-tag--2     { right: -6%; }

  /* PAINS · 2 колонки; третью карточку центрируем */
  .pains__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
  .pains__grid > .pain-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
  }
  .pain-card        { min-height: 600px; padding: var(--space-6) var(--space-5); }

  /* STACK · 2 колонки становятся узкими, но sticky ещё работает */
  .stack__inner    { gap: var(--space-6); }

  /* PROCESS · чуть меньше амплитуда волны */
  .process-step__desc,
  .process-step__outcome { max-width: 180px; }

  /* CASES · чуть сжимаем стек слоёв */
  .case-layer {
    grid-template-columns: minmax(130px, 170px) minmax(300px, 1fr) minmax(170px, 220px);
    gap: var(--space-4);
    margin-top: -68px;   /* было -22 — слои почти не перекрывались, frost не работал */
  }
  .case-layer__plane { width: 380px; height: 200px; }
  .case-layer__slab  { height: 140px; }

  /* COMPARE · немного сжимаем отступы ячеек */
  .compare__cell       { padding: var(--space-4); }
  .compare__colhead-title { font-size: var(--fs-md); }

  /* ABOUT · всё те же 2 колонки [карта | якорь], только плотнее.
     Карта теперь flex-column, аватарка inline в шапке — сетку
     внутри карты больше не настраиваем. */
  .about                { gap: var(--space-6); }
  .about__card          {
    padding: var(--space-5);
    gap: var(--space-5);
  }
  .about__photo         { width: 92px;  height: 116px; }
  .about__title         { font-size: clamp(26px, 3.6vw, 44px); }
  .about__canvas-slot   { min-height: 320px; }
  .about__facts         { gap: var(--space-4); }

  /* BLOG · сетка на 1024 всё ещё 3 колонки, но плотнее */
  .blog__grid       { gap: var(--space-4); }
  .blog-card__body  { padding: var(--space-4) var(--space-5) var(--space-5); }
  .blog-card__title { font-size: clamp(17px, 1.8vw, 20px); }

  /* PRICING · чуть сжимаем hero-карту и сетку.
     Важно: top-padding держим через var(--overlap), иначе контент
     карты вылезет в зону заголовка. */
  .price-hero {
    padding: calc(var(--overlap) + var(--space-5)) var(--space-6) var(--space-6);
    gap: var(--space-6);
  }
  .price-hero__amount { font-size: clamp(48px, 6vw, 80px); }
  .price-grid { gap: var(--space-4); }
  .price-card { padding: var(--space-5); }

  /* FAQ · чуть плотнее */
  .faq__list    { max-width: 760px; }
  .faq-item__q  { padding: var(--space-4); font-size: clamp(15px, 1.4vw, 18px); }
  .faq-item__a  { padding: var(--space-4); padding-top: var(--space-4); }

  /* CTA · только типографика и горизонтальный padding.
     Вертикальные уже заданы общим правилом секций выше. */
  .cta         { padding-left: var(--space-5); padding-right: var(--space-5); }
  .cta__title  { font-size: clamp(38px, 6vw, 68px); }
}


/* ============== ≤ 860 ============== */
@media (max-width: 860px) {

  /* Единый ритм секций на 860: 64px сверху/снизу.
     .brief тут намеренно нет — это модалка-попап, не секция,
     паддингом управляет .brief-modal__inner. */
  .pains, .stack, .process, .cases, .compare,
  .about, .pricing, .faq, .blog, .cta {
    padding-top:    var(--space-8);
    padding-bottom: var(--space-8);
  }
  .marquee { margin: var(--space-8) 0; }

  /* Ambient glow · на десктопе радиусы пятен заданы в vw (40/35/26),
     и на узких экранах превращаются в крошечные цветные точки —
     видны как «разноцветные точки сверху/снизу справа», а не как
     мягкое свечение. На мобиле увеличиваем размеры до 80-100vw,
     чтобы это было разлитое по фону свечение, а не точка. */
  body::before {
    background:
      radial-gradient(95vw 95vw at 20% 25%, rgba(var(--rgb-accent),   var(--ambient-1-alpha)), transparent 60%),
      radial-gradient(90vw 90vw at 85% 75%, rgba(var(--rgb-accent-2), var(--ambient-2-alpha)), transparent 60%),
      radial-gradient(70vw 70vw at 55% 10%, rgba(var(--rgb-accent),   var(--ambient-3-alpha)), transparent 65%);
  }

  /* NAV */
  .nav__menu        { display: none; }

  /* HERO · одна колонка, min-height сбрасываем
     ---------------------------------------------------------
     На мобильном (≤768) частицы рисует particle-system.js — это
     fullscreen-fixed WebGL-канвас, который не привязан к
     .hero__visual (в отличие от Kwan-десктопа). Поэтому пустой
     квадратный блок .hero__visual был бы просто дырой в вёрстке
     между заголовком и stats — убираем его. */
  .hero {
    grid-template-columns: 1fr;
    row-gap: var(--space-6);
    padding-top: var(--space-6);
    min-height: 0;
  }
  /* [TEST-WEBM] На мобиле .hero__visual — ОБЫЧНЫЙ блок в потоке,
     сидит между .hero__content и .hero__stats (как раз там, где
     раньше была пустая дырка). Внутри JS кладёт <video class="hero__media">
     (WebM VP9 + yuva420p) + poster из particle.webp для iOS ≤ 16.3.
     Никаких absolute/z-index/blend — просто блок-видео. */
  .hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Высота подстраивается под содержимое (webm с native aspect ratio). */
    min-height: 0;
    pointer-events: none;
  }
  .hero__media {
    display: block;
    width: 80vw;         /* 80% ширины экрана */
    max-width: none;     /* снимаем ограничение, пусть тянется с вьюпортом */
    height: auto;
    pointer-events: none;
    object-fit: contain;
  }

  /* PAINS · одна колонка */
  .pains__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .pains__grid > .pain-card:nth-child(3) {
    grid-column: auto;
    max-width: none;
    margin: 0;
  }
  .pain-card        { min-height: 540px; padding: var(--space-6) var(--space-5); }
  .pain-card__visual { padding: 0 var(--space-4); bottom: -12%; }

  /* STACK · одна колонка, sticky отключаем.
     На мобильном text-align центрируем заголовок и лид —
     визуально вписывается в ритм остальных мобильных хедеров. */
  .stack__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .stack__intro {
    position: static;
    top: auto;
    padding: 0;
    align-items: center;       /* flex-children по центру */
    text-align: center;
  }
  .stack__title,
  .stack__lead {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .stack__hint { display: none; }

  /* ============================================================
     [SPIRIT-HOP] Единый блок правил для всех трёх слотов (stack,
     process, about). Слоты ВСЕГДА позиционированы (чтобы JS мог
     измерять их через getBoundingClientRect), но невидимы пока
     не получат класс .is-spirit-host. Это избавляет от гонки
     «display:none → нечего измерять → JS не переставляет».

     Все размеры одинаковые (110vw / max 620px), меняется только
     позиция per-слот (см. ниже).

     Специфичность 0,1,0 — базовые позиционные свойства.
     .is-spirit-host добавляет только opacity для плавного
     появления. Десктопные правила (>860px) этот блок не
     затрагивает — Kwan-якоря работают как раньше.
     ============================================================ */
  /* overflow-x: clip позволяет slot'у выходить за верх/низ секции
     (например, плавно перетекать в соседнюю секцию), но подрезает
     горизонтальный выход — чтобы width:110vw + right:-18% у slot'а
     не ломали ширину страницы горизонтальным скроллом. */
  .stack, .process, .about { position: relative; overflow-x: clip; overflow-y: visible; }

  .stack__canvas-slot,
  .process__canvas-slot,
  .about__canvas-slot {
    display: block;
    position: absolute;
    width: 110vw;
    max-width: 620px;
    min-height: 0;
    height: auto;
    margin: 0;          /* бьём margin:0 auto из ≤860 про about */
    left: auto;         /* бьём left из ≤860 про process */
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.45s ease;
  }

  /* Per-slot позиция */
  .stack__canvas-slot   { right: -18%; top: 50%; transform: translateY(-50%); }
  .process__canvas-slot { right: -55%; top: 10%; transform: none; width: 110vw; height: auto; }
  .about__canvas-slot   { right: -18%; top: auto; bottom: -22%; transform: none; }

  /* На мобиле spirit-hop видим (глобально он скрыт — см. верх файла). */
  .spirit-hop {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
  }

  /* Host = есть видео внутри → показываем */
  .stack__canvas-slot.is-spirit-host,
  .process__canvas-slot.is-spirit-host,
  .about__canvas-slot.is-spirit-host {
    opacity: 0.5;
  }

  /* Контент выше декора во всех трёх секциях */
  .stack__inner   { position: relative; z-index: 1; }
  .process__head,
  .process__toggle,
  .process__panel { position: relative; z-index: 1; }
  .about__card    { position: relative; z-index: 1; }

  /* ---------- STACK LIST · горизонтальный скролл на мобильном ----------
     На десктопе .stack__list — вертикальная колонка карточек, которая
     читается параллельно sticky-левой колонке. На мобильном sticky
     отключен, и 8 карточек вертикально = очень длинная лента.

     Решение: делаем горизонтальную «колоду» со scroll-snap. Каждая
     карточка ~82vw — краешек следующей виден, пользователь сразу
     понимает «можно свайпать». Снап по левому краю (align: start).

     Негативные margin'ы уводят скролл в edge-to-edge (карточки
     начинаются от левого края экрана, а не от padding секции).
     padding-inline симулирует отступы «внутри» скролла, чтобы первая
     и последняя карточки имели воздух по краям.
     ---------------------------------------------------------------- */
  .stack__list {
    flex-direction: row;
    gap: var(--space-4);
    overflow-x: auto;
    overflow-y: hidden;
    /* edge-to-edge: компенсируем padding секции (.stack = var(--space-6)
       на ≤860). На ≤560 секция получит свой padding, ниже override. */
    margin-left: calc(var(--space-6) * -1);
    margin-right: calc(var(--space-6) * -1);
    padding: 4px var(--space-6) var(--space-4);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-6);
    /* тач-скролл на iOS + скрываем дефолтный scrollbar до минимума */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--rgb-white), 0.15) transparent;
  }
  .stack__list::-webkit-scrollbar { height: 6px; }
  .stack__list::-webkit-scrollbar-thumb {
    background: rgba(var(--rgb-white), 0.12);
    border-radius: 3px;
  }
  .stack__list::-webkit-scrollbar-track { background: transparent; }

  .stack-card {
    flex: 0 0 82vw;            /* фиксированная ширина карточки */
    max-width: 360px;          /* на планшете 82vw = 630px — ограничим */
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* Высоту стандартизируем — иначе «прыгает» бейзлайн при свайпе,
       если у карточек разное количество строк в __desc.
       align-items у flex-row по умолчанию stretch → все карточки
       вытянутся до высоты самой длинной (08 «Приватный AI-шлюз»).
       min-height — страховка, если когда-то будет только короткий
       контент в ленте. */
    min-height: 220px;
    /* Для абсолютно-позиционированной «призрачной» цифры ниже */
    position: relative;
    overflow: hidden;
    /* Контент карточки поднимаем над ghost-слоем */
    z-index: 0;
  }

  /* ---------- Ghost-номер в углу ----------
     У коротких карточек (01 «CRM», 02 «AI-квалификация», 03
     «Интеграция каналов») описание всего 1-2 строки → при общей
     высоте колоды (~220px) в нижней части образуется пустота.
     Заполняем её большой декоративной цифрой — паттерн такой же,
     как в .process-step__ghost: outline-цифра полупрозрачная,
     «дышит» пустое пространство. На длинных карточках цифра
     частично уезжает за край и остаётся только нижним углом —
     не мешает чтению, работает как визуальный якорь.

     Номер берём через CSS-counter (decimal-leading-zero → 01..08) —
     синхронно с .stack-card__num, чтобы не дублировать в разметке. */
  .stack__list { counter-reset: stack-ghost; }
  .stack-card  { counter-increment: stack-ghost; }
  .stack-card::after {
    content: counter(stack-ghost, decimal-leading-zero);
    position: absolute;
    right: -12px;
    bottom: -40px;
    font-family: var(--font-display);
    font-size: 160px;
    font-weight: var(--fw-black);
    line-height: 0.85;
    letter-spacing: -0.06em;
    /* Раньше был -webkit-text-stroke + color:transparent — у цифры «4»
       в Inter открытый верх, и обводка рисовалась двойной линией/
       «артефактами». Переходим на залитый цвет с низкой прозрачностью —
       чисто на всех цифрах и работает одинаково в Chrome/Safari/FF. */
    color: rgba(var(--rgb-white), 0.045);
    -webkit-text-stroke: 0;
    pointer-events: none;
    user-select: none;
    z-index: 0;  /* между фоном карточки (0, но без z) и текстом (1) */
  }
  /* Поднимаем РЕАЛЬНЫЙ контент карточки над ghost — иначе цифра
     перекрыла бы часть текста в верхних строках. */
  .stack-card > * {
    position: relative;
    z-index: 1;
  }

  /* На карточках 07 (featured) и 08 (premium) текста и так много —
     ghost-цифра там только создаёт визуальный шум и лезет под описание.
     Убираем её полностью, оставляем ghost только на коротких 01–06. */
  .stack-card--featured::after,
  .stack-card--premium::after {
    content: none;
  }

  /* Сам маленький номер-лейбл сверху (.stack-card__num) остаётся как
     метка порядка чтения. На мобильном чуть уменьшаем, чтобы не
     конкурировал с большим ghost. */
  .stack-card__num {
    font-size: 10px;
    opacity: 0.7;
  }

  /* PROCESS · якорь катушки на мобильной. На десктопе он сидел
     слева за экраном большим кругом — на мобиле делаем его
     компактнее и позиционируем ПРАВЕЕ, выглядывающим с правого
     края. Меш прилетит сюда, пока пользователь прокручивает
     «Как я работаю» — в длинной мобильной ленте без катушки
     будет пусто. */
  .process__canvas-slot {
    left: auto;
    right: -140px;
    top: 35%;
    width: 280px;
    height: 280px;
  }

  /* PROCESS · шаги — 2 колонки, независимо от количества
     Это убирает волну: на планшете/мобиле шаги идут парами
     сверху вниз. Кривая скрывается — в малом экране она не нужна. */
  .process__trail,
  .process__trail--2 { min-height: 0; padding: 0; max-width: none; }
  .process__curve { display: none; }
  .process-step__dot { display: none; }
  .process__steps,
  .process__steps--2,
  .process__steps--4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7) var(--space-5);
    max-width: none;
  }
  .process-step { padding-top: 0; }
  .process-step__ghost { top: 0; font-size: 120px; }
  .process-step__desc,
  .process-step__outcome { max-width: 100%; }

  /* CASES · на планшете/мобиле — одна колонка, слабее наклон
     (стек всё ещё есть, но боковые подписи уходят выше/ниже плоскости) */
  .case-layer {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-5);
    text-align: center;
  }
  .case-layer__label,
  .case-layer__desc {
    border: 0;
    padding: 0;
    min-height: 0;
    text-align: center;
    justify-content: center;
  }
  .case-layer__label::after,
  .case-layer__desc::before { display: none; }
  .case-layer__slab { height: 160px; }
  .case-layer__plane {
    width: 300px;
    height: 170px;
    transform: translate(-50%, -50%) rotateX(48deg) rotateZ(-30deg);
  }
  .case-layer:hover .case-layer__plane {
    transform: translate(-50%, -50%) rotateX(48deg) rotateZ(-30deg);
  }

  /* Результат: 3 → 1 колонка на узком */
  .case-hero__result {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  /* COMPARE · горизонтальный скролл вместо «стопки карточек».
     -------------------------------------------------------------
     Предыдущая версия схлопывала таблицу в 1-колоночные карточки,
     дублируя data-label на каждой ячейке. Это ломало восприятие
     сравнения: пользователь видит 6 карточек подряд, в каждой те
     же 3 подхода — теряется сама суть таблицы (визуальное
     сопоставление колонок).
     Новая версия: таблица как есть (4 колонки), но в горизонтально-
     скроллируемом контейнере. Первая колонка (критерий) sticky —
     остаётся видна при свайпе. Пользователь свайпает по горизонтали
     через «SaaS-дашборд → Агентство → Мой формат» и сравнение
     сохраняет свою суть.
     -------------------------------------------------------------
     Сумма ширин колонок = 120+110+110+140 = 480 px. При mobile-
     viewport'е 360-420px это уверенно триггерит скролл, каждая
     колонка достаточно широка для 14-15 px шрифта и 2-3 строк
     текста без переноса в слове. */

  .compare__table {
    padding-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    /* Скрываем scrollbar: на iOS он сам прячется, на Android показывается
       и на десктопном touch-режиме тоже — здесь убираем унифицированно. */
    scrollbar-width: none;
  }
  .compare__table::-webkit-scrollbar { display: none; }

  /* ::before (акцентная подложка под «Мой формат») — абсолютная
     относительно .compare__table, при скролле не двигается с контентом,
     выглядит как оторванный прямоугольник. Отключаем; per-cell
     background на .compare__cell--mine сохраняется. */
  .compare__table::before { display: none; }

  /* Строки: фиксированные ширины колонок + min-width чтобы скролл
     триггерился на самом узком phone'е (~360px).
     Общая ширина 150+150+150+190 = 640px — это > viewport любого
     современного мобильного (даже iPad в portrait это ~768), гарантированно
     триггерит скролл. Предыдущие 120/110 давали 2-3 переноса слов в ячейке
     («видите сами» в 2 строки) — шире читаемее. */
  .compare__row {
    grid-template-columns: 150px 150px 150px 190px;
    min-width: 640px;
  }

  /* Ячейки: padding просторнее т.к. колонки теперь шире. Шрифт --fs-sm
     (не --fs-xs) — читаемее. */
  .compare__cell {
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
  }

  /* Первая колонка (label / col-label) — sticky. Остаётся видна
     при свайпе 3 других колонок. Обязателен solid background,
     иначе скроллящиеся колонки просвечивают под sticky-ячейкой. */
  .compare__cell--col-label,
  .compare__cell--label {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-bg);
    /* Правая edge-тень — визуальный индикатор «тут прилипло, дальше
       едет». Без неё sticky-столбец сливается с соседней колонкой. */
    box-shadow: 1px 0 0 rgba(var(--rgb-white), 0.08);
  }
  .compare__cell--label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
  }

  /* Круглые маркеры в weak/strong — уменьшаем, чтобы хватало места
     для самого текста в 110 px колонке. */
  .compare__cell--weak::before,
  .compare__cell--strong::before {
    width: 10px;
    height: 10px;
    margin-right: var(--space-2);
  }

  /* Заголовки колонок (компактнее) */
  .compare__cell--col-head {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .compare__colhead-title {
    font-size: var(--fs-md);
  }
  .compare__colhead-badge {
    top: var(--space-2);
    right: var(--space-2);
    font-size: 9px;
    padding: 2px 6px;
    letter-spacing: var(--tracking-wide);
  }

  /* Per-cell `data-label` fallback НЕ нужен — в горизонтальном скролле
     col-head-строка видна всегда (шапка таблицы), критерий sticky слева.
     Ранее этот атрибут дублировался в каждую ячейку — теперь это
     мёртвый HTML, CSS-рендера у него нет. Можно оставить в HTML для
     a11y (screen-reader'ы его могут озвучить), визуально не видно. */

  /* BLOG · на 860 — 1 колонка, карточки в стопку.
     Вертикальный padding задан общим правилом выше. */
  .blog               { padding-left: var(--space-5); padding-right: var(--space-5); }
  .blog__grid         { grid-template-columns: 1fr; gap: var(--space-5); }
  .blog-card__body    { padding: var(--space-5) var(--space-6) var(--space-6); }
  .blog-card__excerpt { min-height: 0; }

  /* FOOTER · планшет: можно сохранить ряд, но меньше gap */
  .footer__inner      { gap: var(--space-3) var(--space-5); }
  .footer__nav        { gap: var(--space-4); }

  /* ABOUT · на планшете секция схлопывается в одну колонку,
     якорь для тюба уходит под карту (карта сверху, тюб снизу).
     Так катушка всё равно находит anchor при скролле. */
  .about {
    /* вертикальный padding — общим правилом секций */
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .about__card {
    gap: var(--space-5);
    padding: var(--space-6);
  }
  .about__photo       { width: 96px;  height: 120px; }
  .about__title       { font-size: clamp(28px, 5.6vw, 52px); }
  .about__canvas-slot {
    min-height: 300px;
    max-width: 460px;
    margin: 0 auto;
  }
  .about__facts       { gap: var(--space-4); }

  /* PRICING · hero-карта в колонку, сетка — 1 колонка.
     --overlap не трогаем — clamp(32,6vw,88) даёт нужные ~52px
     при ширине 860. */
  .price-hero {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: calc(var(--overlap) + var(--space-5)) var(--space-5) var(--space-6);
  }
  .price-hero__ghost { filter: blur(18px); }
  .price-hero__right {
    align-items: flex-start;
    width: 100%;
    padding-left: 0;
    padding-top: var(--space-4);
    border-left: 0;
    border-top: 1px solid rgba(var(--rgb-white), 0.08);
  }
  .price-hero__cta { width: auto; }

  .price-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  /* На мобильных min-height у desc становится лишним —
     карточки и так идут столбиком, текст выравнивать не нужно. */
  .price-card__desc { min-height: 0; }

  /* FAQ · планшет. Вертикальный padding — общим правилом. */
  .faq           { padding-left: var(--space-5); padding-right: var(--space-5); }
  .faq-item__q   { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .faq-item__a   { padding: var(--space-3) var(--space-4) var(--space-4); }

  /* CTA · планшет. Секция на всю ширину; вертикальный padding —
     общим правилом секций, тут только горизонталь и карточка. */
  .cta          { padding-left: var(--space-5); padding-right: var(--space-5); }
  .cta__card    { gap: var(--space-4); }
  .cta__title   { font-size: clamp(34px, 6.5vw, 56px); }
  .cta__actions { width: 100%; }
}


/* ============== ≤ 560 ============== */
@media (max-width: 560px) {

  /* Единый ритм секций на мобилке: 48px сверху/снизу.
     .brief исключена — это модалка-попап, не секция. */
  .pains, .stack, .process, .cases, .compare,
  .about, .pricing, .faq, .blog, .cta {
    padding-top:    var(--space-7);
    padding-bottom: var(--space-7);
  }

  /* NAV · уменьшенные отступы */
  .nav              { padding-left: var(--space-4); padding-right: var(--space-4); }

  /* HERO */
  .hero             { padding-left: var(--space-4); padding-right: var(--space-4); }
  .hero__ctas .btn  { flex: 1; }

  /* Stats · в колонку, текст по центру (иначе «10+», «∞», «>100%»
     липнут к левому краю и смотрятся заброшенно) */
  .hero__stats      { grid-template-columns: 1fr; gap: var(--space-5); }
  .stat             { text-align: center; }

  /* Float-tags · компактнее */
  .float-tag        { font-size: var(--fs-xs); padding: 8px 12px; }
  .float-tag--1     { left: 2%; }
  .float-tag--2     { right: 2%; }

  /* Marquee · быстрее + меньше gap */
  :root {
    --marquee-speed: 40s;
    --marquee-gap:   var(--space-5);
    --marquee-fade:  40px;
  }
  .marquee          { margin: var(--space-7) 0; padding: var(--space-4) 0; }

  /* PAINS · компактнее. Вертикальный padding — общим правилом.
     На мобиле визуал перестаёт быть абсолютно позиционированным
     и становится обычным flex-ребёнком СНИЗУ с отступом —
     иначе текст описания прижимается к дашборду вплотную. */
  .pains             { padding-left: var(--space-4); padding-right: var(--space-4); }
  .pains__grid       { gap: var(--space-5); }
  .pain-card         { min-height: 0; padding: var(--space-5); border-radius: var(--radius-md); }
  .pain-card__title  { font-size: clamp(20px, 5.5vw, 26px); }
  .pain-card__points li,
  .pain-card__solution { font-size: var(--fs-sm); }
  .pain-card__visual {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 0;
    height: 220px;
    margin-top: var(--space-6);
  }
  .mini-dash         { padding: var(--space-3) var(--space-4); }
  .mini-dash__title  { font-size: 8px; }
  .mini-dash__row    { grid-template-columns: 38px 1fr 34px; gap: var(--space-2); }

  /* На мобиле ракурсы уменьшаем — чтоб дашборды не резались */
  .pain-card__visual--tilt-l .mini-dash { transform: rotateX(10deg) rotateY(-5deg); }
  .pain-card__visual--tilt-r .mini-dash { transform: rotateX(10deg) rotateY(5deg);  }

  /* Scatter на мобиле — компактнее */
  .chip              { padding: 6px 10px; font-size: var(--fs-xs); }

  /* STACK · компактнее. Вертикальный padding — общим правилом. */
  .stack             { padding-left: var(--space-4); padding-right: var(--space-4); }
  .stack-card        { padding: var(--space-5); border-radius: var(--radius-md); }
  .stack-card--featured { padding-left: calc(var(--space-5) + 6px); }

  /* Скролл-лента stack__list на ≤560 — переопределяем edge-to-edge
     компенсацию под мобильный padding секции (var(--space-4)) и
     делаем карточки чуть уже (85vw), чтобы краешек следующей был
     нагляднее на узком экране. */
  .stack__list {
    margin-left:  calc(var(--space-4) * -1);
    margin-right: calc(var(--space-4) * -1);
    padding-left:  var(--space-4);
    padding-right: var(--space-4);
    scroll-padding-inline: var(--space-4);
    gap: var(--space-3);
  }
  .stack-card {
    flex-basis: 85vw;
    max-width: none;
  }

  /* PROCESS · в одну колонку. Вертикальный padding — общим. */
  .process           { padding-left: var(--space-4); padding-right: var(--space-4); }
  .process__head     { margin-bottom: var(--space-6); }
  /* Переключатель формата: на мобиле оба таба занимают равную
     ширину. Без этого активный «Построение системы с нуля»
     растягивается под свой длинный текст и «съедает» кнопку
     «Быстрый запуск» — выглядит неравномерно. Делаем гридом
     1fr 1fr и центрируем содержимое внутри каждого таба. */
  .process__toggle   {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: 100%;
    max-width: 420px;
  }
  .process__tab      {
    padding: 10px 8px;
    font-size: var(--fs-xs);
    justify-content: center;
    text-align: center;
    min-width: 0;
  }
  .process__tab-label {
    font-size: var(--fs-xs);
    white-space: normal;  /* длинный текст может переноситься */
    line-height: 1.2;
  }
  /* Для spirit-hop правила теперь в ≤860 блоке выше — единые для
     всех трёх слотов. Здесь ≤560 process уже не трогаем. */
  .process__tab-label { font-size: var(--fs-xs); }
  .process__steps,
  .process__steps--2,
  .process__steps--4 {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .process-step__ghost { font-size: 100px; }

  /* CASES · мобильная версия */
  .cases { padding-left: var(--space-4); padding-right: var(--space-4); }
  .case-hero__intro { margin-bottom: var(--space-5); }
  /* На мобиле пилюли (медцентр / бюджет / срок) больше не умещаются
     в одну строку с описанием — они просто вылетают за экран.
     Переводим intro в колонку, пилюли разрешаем переносить.
     Всё содержимое центрируем — в унисон с остальными мобильными
     заголовками (hero / pains / pricing). */
  .case-hero__intro {
    flex-direction: column;
    align-items: center;    /* центр по горизонтали */
    gap: var(--space-3);
    text-align: center;
  }
  .case-hero__meta {
    flex-wrap: wrap;        /* пилюли переносятся на новую строку */
    margin-left: 0;         /* убираем прижим к правому краю */
    justify-content: center;/* пилюли по центру строки */
    order: 2;
  }
  /* В column-режиме flex-basis: 320px у описания превращался
     в height: 320px — отсюда дикая пустота между текстом и
     пилюлями. Сбрасываем flex → контент-сайз по высоте.
     text-align центрируем для ритма с остальной мобильной вёрсткой. */
  .case-hero__problem {
    order: 1;
    flex: 0 0 auto;
    text-align: center;
  }
  .case-hero__subhead { order: 3; }
  .case-tag {
    font-size: 11px;
    padding: 5px 10px;
  }
  .case-stack { padding: var(--space-4) 0 var(--space-5); }
  .case-layer__slab { height: 140px; }
  .case-layer__plane {
    width: 240px;
    height: 140px;
    border-radius: 18px;
    /* На мобиле уменьшаем blur — backdrop-filter тяжёлый,
       а маленькая плита и так плотная по цвету, хватает 10px. */
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
  }
  .case-layer__name { font-size: var(--fs-md); }

  /* BLOG · мобилка */
  .blog               { padding-left: var(--space-4); padding-right: var(--space-4); }
  .blog-card          { border-radius: var(--radius-md); }
  .blog-card__body    { padding: var(--space-4) var(--space-5) var(--space-5); }
  .blog-card__title   { font-size: 17px; }

  /* COMPARE · мобилка ≤560 — section-padding ужимаем, колонки чуть
     сужаем относительно 860-варианта чтобы sticky-label не съедал
     половину экрана на 360px. Row-padding НЕ трогаем (в горизонтальном
     скролле padding живёт per-cell). */
  .compare       { padding-left: var(--space-4); padding-right: var(--space-4); }
  .compare__row  { grid-template-columns: 140px 140px 140px 170px; min-width: 590px; }
  .compare__cell { padding: var(--space-3) var(--space-3); font-size: var(--fs-xs); }

  /* ABOUT · мобилка: карта в стопку, якорь тюба скрыт
     (на мобилке тюб виден на соседних якорях, не дробим). */
  .about              {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    gap: var(--space-5);
  }
  .about__card        {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    gap: var(--space-5);
  }
  .about__head        { gap: var(--space-3); }
  .about__photo       { width: 72px; height: 90px; }
  .about__title       { font-size: clamp(26px, 8vw, 40px); }
  .about__text        { font-size: var(--fs-sm); }
  .about__facts       {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-4) 0;
  }
  .about__fact-num    { font-size: 30px; }
  .about__stack       { gap: var(--space-3); flex-direction: column; align-items: flex-start; }
  .about__stack-label { padding-top: 0; }

  /* Все правила spirit-hop вынесены в ≤860 блок выше. */

  /* PRICING · мобильная версия */
  .pricing       { padding-left: var(--space-4); padding-right: var(--space-4); }

  /* Шапка секции: на десктопе margin:0 auto без нижнего отступа
     (там overlap реализует «посадку» карты на заголовок).
     На мобильном overlap=0 → без bottom margin карта лепится
     вплотную к тайтлу. Добавляем такой же зазор, как у других
     секций (.pains__head / .process__head: margin-bottom: --space-7). */
  .pricing__head {
    margin-bottom: var(--space-7);
  }

  /* Заголовок «СТОИМОСТЬ»: приводим к общему mobile-размеру других
     секционных заголовков (.pains__title, .process__title, etc),
     у которых baseline clamp(32, 4.4vw, 56px). На 375px = 33px,
     слово ≈ 250px, комфортно вписывается с padding'ами. */
  .pricing__title {
    font-size: clamp(32px, 4.4vw, 56px);
    margin: 0;
  }

  /* ---------- Центрирование заголовков на мобильном ----------
     Секционные __head (.pains/.process/.cases/.compare/.faq/.blog/.pricing)
     уже имеют align-items:center + text-align:center на десктопе —
     они наследуют его на мобильном, дополнительно править не нужно.

     Доп. центруем:
       • .hero__content — нет text-align, по умолчанию left
       • .pain-card__title — заголовок внутри карточки (тело остаётся слева) */
  .hero__content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hero__title,
  .hero__desc {
    text-align: center;
  }
  .hero__ctas {
    justify-content: center;
  }
  .pain-card__title {
    text-align: center;
  }

  .price-hero    {
    /* --overlap остаётся clamp-значением — на 560px это ~34px,
       что совпадает с половиной уменьшенного заголовка. */
    padding: calc(var(--overlap) + var(--space-4)) var(--space-5) var(--space-5);
    border-radius: var(--radius-lg);
  }
  .price-hero__ghost { filter: blur(12px); }
  .price-hero__title  { font-size: clamp(22px, 6.5vw, 28px); }
  .price-hero__amount { font-size: clamp(40px, 11vw, 56px); }
  .price-card         { padding: var(--space-5); }
  .price-card__title  { font-size: var(--fs-xl); }
  .price-card__amount { font-size: 26px; }

  /* =========================================================
     PRICE DECK · 3 платные карточки как колода со свайпом
     ---------------------------------------------------------
     Все три карточки занимают одну grid-cell (grid-row:1, grid-column:1
     — все в одной позиции, высота сетки = максимум их высот).
     CSS-селекторы [data-active="N"] переключают transform/opacity/z-index
     чтобы одна карточка была «на лицевой», следующая за ней «пипка»,
     третья — ещё глубже. Переключение активной карточки — через JS
     (main.js, initPriceDeck): touchstart/touchend обрабатывает свайп,
     клик по точкам-индикаторам (.price-dots) тоже триггерит смену.

     Стартовая активная — индекс 1 (price-card--featured «Ведение +
     рост / Популярно»): это основной оффер, логично показать его первым.
     ========================================================= */

  .price-grid {
    /* Все карточки в одной grid-cell — визуально стек */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    position: relative;
    /* Отключаем gap — карточки и так overlap'ятся */
    gap: 0;
    /* Запас снизу под выглядывающие краешки back-карточек (~90px
       третья карточка peek'ает) + 56px место под точки-индикаторы. */
    padding-bottom: 150px;
    touch-action: pan-y; /* вертикальный скролл страницы работает,
                            горизонтальные свайпы обрабатываем сами */
  }

  .price-grid > .price-card {
    /* Все в одной ячейке сетки → естественный overlap */
    grid-row: 1;
    grid-column: 1;
    /* Плавный transition для swap'ов */
    transition:
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      opacity   0.35s ease,
      box-shadow 0.35s ease;
    will-change: transform, opacity;
    /* transform-origin center — для scale ужимается симметрично,
       и rotate крутится вокруг центра (эффект «кривая колода»). */
    transform-origin: center center;
    /* Фон сплошной (а не прозрачный) — иначе «задняя» карточка
       просвечивает сквозь «лицевую». */
    background: var(--color-surface);
    border: 1px solid var(--color-border);
  }

  /* По умолчанию (нет data-active или JS отключён): все видны нормально
     в одну колонку — fallback без свайпа. */

  /* С data-active — позиционируем карточки относительно активной индекса.
     Селекторы строятся по формуле: для каждой комбинации active-index
     × card-index — своя позиция. active = front, next = peek behind,
     prev = ещё глубже. "next" определяем как (active + 1) % 3,
     "prev" как (active + 2) % 3. */

  /* Значения трансформаций для позиций в колоде.
     Математика peek'а (H = высота карточки, origin center):
       scale(0.94) — low-top сдвигается на +15px, bottom на -15px
       translate(Y=55px) → итоговый bottom карточки: (H/2)+(H*0.94/2)+55
       при H=500 = 250+235+55 = 540px → peek 40px ниже front'а (500).
     Раньше было translate(18px) → bottom 503 → peek 3px = «в ровень».
     Сейчас bottom peek 40-50px видно чётко.
     Лёгкий rotate ±2deg + сдвиг по X ±6px — эффект «небрежной колоды»,
     карточки не выглядят стопкой идеально-параллельных листов. */

  /* --- ACTIVE = 0 --- */
  .price-grid[data-active="0"] > .price-card:nth-child(1) {
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
    opacity: 1;
    z-index: 3;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
    pointer-events: auto;
  }
  .price-grid[data-active="0"] > .price-card:nth-child(2) {
    transform: translate3d(-6px, 55px, 0) scale(0.94) rotate(-2deg);
    opacity: 0.7;
    z-index: 2;
    pointer-events: none;
  }
  .price-grid[data-active="0"] > .price-card:nth-child(3) {
    transform: translate3d(6px, 100px, 0) scale(0.88) rotate(2deg);
    opacity: 0.45;
    z-index: 1;
    pointer-events: none;
  }

  /* --- ACTIVE = 1 (дефолт: «Популярно») --- */
  .price-grid[data-active="1"] > .price-card:nth-child(2) {
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
    opacity: 1;
    z-index: 3;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
    pointer-events: auto;
  }
  .price-grid[data-active="1"] > .price-card:nth-child(3) {
    transform: translate3d(-6px, 55px, 0) scale(0.94) rotate(-2deg);
    opacity: 0.7;
    z-index: 2;
    pointer-events: none;
  }
  .price-grid[data-active="1"] > .price-card:nth-child(1) {
    transform: translate3d(6px, 100px, 0) scale(0.88) rotate(2deg);
    opacity: 0.45;
    z-index: 1;
    pointer-events: none;
  }

  /* --- ACTIVE = 2 --- */
  .price-grid[data-active="2"] > .price-card:nth-child(3) {
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
    opacity: 1;
    z-index: 3;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
    pointer-events: auto;
  }
  .price-grid[data-active="2"] > .price-card:nth-child(1) {
    transform: translate3d(-6px, 55px, 0) scale(0.94) rotate(-2deg);
    opacity: 0.7;
    z-index: 2;
    pointer-events: none;
  }
  .price-grid[data-active="2"] > .price-card:nth-child(2) {
    transform: translate3d(6px, 100px, 0) scale(0.88) rotate(2deg);
    opacity: 0.45;
    z-index: 1;
    pointer-events: none;
  }

  /* Drag-during-swipe — класс на .price-grid снимает transition,
     чтобы карточка следовала за пальцем 1-в-1 без inertia. */
  .price-grid.is-dragging > .price-card {
    transition: none;
  }

  /* Dots — индикаторы + кнопки переключения.
     display:flex — override default display:none из style.css. */
  .price-dots {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    gap: 8px;
    justify-content: center;
    z-index: 4;
  }
  .price-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(var(--rgb-white), 0.25);
    cursor: pointer;
    transition: all 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .price-dot.is-active {
    width: 24px;
    border-radius: 4px;
    background: var(--color-accent-2);
  }

  /* Подсказка о свайпе — показываем 1 раз под заголовком.
     После первого свайпа JS добавляет .price-grid.has-swiped и подсказка
     исчезает. display:block — override default display:none из style.css. */
  .price-grid__hint {
    display: block;
    position: absolute;
    top: -28px;
    right: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0.7;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .price-grid.has-swiped > .price-grid__hint {
    opacity: 0;
  }

  /* FAQ · мобилка */
  .faq                { padding-left: var(--space-4); padding-right: var(--space-4); }
  .faq-item__q        {
    padding: var(--space-3);
    font-size: 14px;
    gap: var(--space-2);
  }
  .faq-item__icon     { width: 20px; height: 20px; }
  .faq-item__a        {
    padding: var(--space-3);
    padding-top: var(--space-3);
    font-size: var(--fs-sm);
  }
  /* Градиентная видимость: на мобилке тактильный blur мешает
     и нагружает GPU — оставляем только opacity, без blur.
     Все селекторы повторяют десктопные, но сбрасывают filter. */
  .faq__list:has(.faq-item[open]) .faq-item:not([open]),
  .faq-item[open] + .faq-item,
  .faq-item[open] + .faq-item + .faq-item,
  .faq-item[open] + .faq-item + .faq-item + .faq-item,
  .faq-item[open] ~ .faq-item + .faq-item + .faq-item + .faq-item,
  .faq-item:not([open]):has(+ .faq-item[open]),
  .faq-item:not([open]):has(+ .faq-item + .faq-item[open]),
  .faq-item:not([open]):has(+ .faq-item + .faq-item + .faq-item[open]),
  .faq-item:not([open]):has(+ .faq-item + .faq-item + .faq-item + .faq-item[open]) {
    filter: none;
  }

  /* CTA · мобилка: плотно, кнопки в стопку. Секция — во всю
     ширину вьюпорта; .cta__card без фона — только центрирует.
     Backdrop-filter тяжёлый для мобильного GPU — ослабляем радиус
     блюра и насыщенность; фон делаем плотнее, чтобы сохранить
     читаемость контента поверх меша. */
  .cta                {
    /* Вертикальный padding — общим правилом секций. */
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    /* На мобилке держим blur помягче (GPU), но база всё равно
       достаточно прозрачна, чтобы силуэт пробивался. */
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
            backdrop-filter: blur(24px) saturate(1.2);
    background:
      radial-gradient(ellipse 90% 70% at 15% 0%,
        rgba(var(--rgb-accent), 0.28) 0%,
        transparent 55%),
      radial-gradient(ellipse 80% 80% at 95% 100%,
        rgba(var(--rgb-accent-2), 0.22) 0%,
        transparent 55%),
      linear-gradient(180deg,
        rgba(18, 14, 38, 0.55) 0%,
        rgba(10, 10, 24, 0.72) 100%);
  }
  .cta__anchor        {
    width: min(420px, 80vw);
    height: min(320px, 48vh);
  }
  .cta__card          {
    padding: 0;
    gap: var(--space-4);
  }
  .cta__title         { font-size: clamp(30px, 9vw, 46px); }
  .cta__desc          { font-size: var(--fs-sm); }
  .cta__pills         {
    padding: var(--space-3) 0;
    gap: 6px;
  }
  .cta__pill          { font-size: 10px; padding: 5px 10px; }
  .cta__pill--flow    { white-space: normal; text-align: center; }
  .cta__actions       {
    flex-direction: column;
    width: 100%;
    gap: var(--space-2);
  }
  .cta__btn           { width: 100%; }
  .cta__meta          { font-size: 10px; }

  /* FOOTER · мобилка: всё в колонку, по центру */
  .footer             { padding: var(--space-5) var(--space-4) var(--space-6); }
  .footer__inner      {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
  }
  .footer__nav        { justify-content: center; gap: var(--space-3); }

  /* =========================================================
     BRIEF MODAL · фуллскрин-sheet на мобильном
     ---------------------------------------------------------
     На мобильном модалка становится почти-фуллскрин-листом:
       • 100vw × 100vh
       • без border-radius сверху — смотрится как нативный sheet
       • Грид формы 2-кол → 1 колонка
       • font-size: 16px на input — иначе iOS зумит при фокусе
     ========================================================= */
  .brief-modal {
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    margin: 0;
  }
  .brief-modal__inner {
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: var(--space-6) var(--space-4) var(--space-6);
  }
  .brief-modal__close {
    top: var(--space-3);
    right: var(--space-3);
  }
  .brief__title {
    font-size: clamp(28px, 6vw, 40px);
  }
  .brief__head {
    padding-right: var(--space-7);   /* запас под крестик */
  }
  .brief-form__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .brief-field--full { grid-column: auto; }
  .brief-field__input {
    font-size: 16px;
    padding: 12px 14px;
  }
  .brief-form__actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--space-5);
  }
  .brief-form__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .brief-form__submit { min-width: 0; }
}