/* ==========================================================================
   free-online-store - стили страницы.

   Собрано из source/tajiro скриптом tools/port-tajiro.mjs. Править здесь
   бессмысленно: следующий прогон затрёт. Правка идёт в src/css/.
   ========================================================================== */

/* ========================= HEADER STYLES ========================= */
/* Переопределения шапки для этой страницы. Общая шапка живёт в style.css
   в корне темы. */
/* ========================= /HEADER STYLES ======================== */

/* ========================= PAGE STYLES =========================== */
/* ---------------------------------------------------------------
   css/free-basic/00-base.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — Free Basic · 00 · Оболочка страницы и общие компоненты

   Страница переодета из прототипа Tajiro_Landing. Разметка и тексты
   прототипа сохранены один в один — менялось только оформление.

   ЧТО ПРИШЛОСЬ ПОМЕНЯТЬ И ПОЧЕМУ
   · Серифный дисплейный шрифт (Fraunces) убран целиком: в системе Tajiro
     заголовки набраны Almarai 800, серифа в ней нет вовсе. Крупные числа
     отданы Outfit — так же, как на главной.
   · Бирюзовый #0B4F4A заменён тёплым зелёным --c-green. Бирюза холодная, и
     на кремовой странице читалась чужой: фон тёплый, акцент холодный, и
     вместе они спорят.
   · Скругления сведены к шкале Tajiro: 4px кнопки, 6px мелкие карточки,
     18px крупные плашки. В прототипе было 14/10.
   · Тени переведены в тёплые rgba(43,38,33,…). Холодные из прототипа
     (rgba(8,59,55,…)) на песке отдают зеленью.

   ЗДЕСЬ ЛЕЖИТ только то, чего нет в общей базе: компоненты, которые
   повторяются в нескольких секциях. Токены, типографика, кнопки, стекло и
   доступность приходят из 00-base.css без правок. Шапка и подвал — общие
   с главной, своих здесь нет.
   ========================================================================== */

.fb {
  /* Тёмные плоскости страницы. Своего токена под фон тёмной секции в базе
     нет — на главной он тоже вписан числом, — поэтому держим его здесь
     одним местом на всю страницу. Значения ровно те же, что на главной. */
    --fb-dark: #1a1714;
    --fb-dark-soft: #1f1b17;   /* призыв: на ступень светлее подвала */
    --fb-sand-bg: #eae4d8;     /* песок первого экрана */
}

/* Часть фразы, которую нельзя рвать переносом */
.fb-nowrap { white-space: nowrap; }


/* --- Подзаголовок призывов ------------------------------------------------
   Оба призыва страницы собраны на компоненте главной (секция 13), и там
   подзаголовок ограничен 600px. Наша фраза длиннее хоумовской, и на 600
   она рвётся посреди имени: «…Your Growth / Manager is ready…». Строке
   «Your store is waiting, stocked with 100 products. Your Growth Manager is
   ready.» нужно 677px — даём 690.

   Правило под .fb, то есть только на этой странице: у главной свой текст,
   он в 600 ложится правильно, и трогать общий файл незачем.

   Селектор из трёх классов не для красоты: в общем файле стоит
   .s-13 .s-13__lead, это тот же вес, а грузится он позже — при равном весе
   побеждает последний. Отсюда .fb перед секцией, а не вместо неё. */
.fb .s-13 .s-13__lead { max-width: 690px; }


/* --- Ритм секций -----------------------------------------------------------
   Лесенка отступов общая для всей страницы: 64 → 80 → 96 → 120.

   ТОН СЕКЦИЙ. Правило Tajiro: соседние секции одного тона не совпадают, а
   тёмные идут через одну, а не полосой. В прототипе светлое шло сплошняком,
   а три тёмных стояли подряд в конце (призыв, доверие, подвал) — конец
   страницы читался одной чёрной полосой. Раскладка переставлена:

      1  hero          песок
      2  counters      крем  (прозрачная, берёт фон body)
      3  platform      ТЁМНАЯ
      4  store         белёсый
      5  how           крем
      6  sell          белёсый
      7  create        крем
      8  marketing     ТЁМНАЯ
      9  all-in-one    белёсый
     10  band          ТЁМНАЯ    (компонент призыва главной, секция 13)
     11  reviews       крем      (секция 09 главной, свой фон --c-bg)
     12  trust         ТЁМНАЯ    (секция 12 главной, керамические плитки)
     13  faq           крем
     14  final         ТЁМНАЯ  #1f1b17
     15  footer        ТЁМНАЯ  #1a1714

   Тёмное приходится на 3, 8, 10, 12 и 14–15 — ни одна тёмная не стоит рядом
   с другой, кроме пары «призыв + подвал»: они читаются одной опорой
   страницы и разведены не тоном, а глубиной.

   Порядок 10 и 11 переставлен ради этого же правила: блок доверия переехал
   на тёмный компонент главной, и полоса призыва, стоявшая перед ним,
   оказалась второй тёмной подряд. Отзывы на креме встали между ними.

   Отзывы переехали на общую секцию главной, а её фон — тот же крем, что у
   body. Соседка сверху поэтому переведена в белёсый: две кремовые подряд
   давали полотно в полторы тысячи пикселей без единой границы. ------------ */
.fb-section {
    position: relative;
    isolation: isolate;
    padding-block: 64px;
}

.fb-section--plain { background: var(--c-bg-plain); }
.fb-section--sand  { background: var(--fb-sand-bg); }

/* Тёмная секция. Цвета переведены по таблице пар из свода стиля: на тёмном
   заголовок --c-on-dark, текст --c-on-dark-soft, мета --c-on-dark-muted,
   зелёный акцент --c-green-on-dark, тёплый акцент --c-sand. Без этой замены
   акценты гаснут: --c-green-text и --c-gold на #1a1714 нечитаемы. */
.fb-section--dark {
    background: var(--fb-dark);
    color: var(--c-on-dark-soft);
}

.fb-section--dark .h1,
.fb-section--dark .h2,
.fb-section--dark .h3 { color: var(--c-on-dark); }

.fb-section--dark .h1 em,
.fb-section--dark .h2 em { color: var(--c-green-on-dark); }

.fb-section--dark .lead { color: var(--c-on-dark-soft); }
.fb-section--dark .meta { color: var(--c-on-dark-muted); }
.fb-section--dark .kicker { color: var(--c-green-on-dark); }
.fb-section--dark .rule { background: var(--c-green-on-dark); }


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

   НА ТЁМНОМ ФАКТУРЫ НЕТ, и это не упущение. На светлом решётку почти не
   видно, а на тёмном она работает наоборот: подсвечивает плоскость, и
   #1a1714 уезжает в серо-коричневый. Рядом с главной, где тёмные секции
   чистые, разница читается сразу — будто взят другой цвет, хотя цвет тот
   же. Под тёмным не лежит ничего. -------------------------------------- */
.fb-decor::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(54% 46% at 16% 20%, rgba(212, 163, 115, 0.16) 0%, transparent 66%),
      radial-gradient(48% 42% at 86% 76%, rgba(61, 143, 99, 0.12) 0%, transparent 64%),
      url("../images/decor/girih-pattern.svg") center / 620px repeat;
    opacity: 0.30;
}


/* --- Надзаголовки секций -----------------------------------------------------
   На главной их ДВА, и они не взаимозаменяемы. В прототипе оба места
   занимала одна золотая строчка «01 · Your store»; здесь она разведена так
   же, как на главной.

   1. НУМЕРОВАННЫЙ СТОЛП (у главной это 06, 07, 08) — крупный золотой номер
      отдельной строкой, под ним зелёная пилюля капсом. Номер набран
      дисплейным и работает верстовым столбом: по нему видно, какой из
      шести блоков читаешь.

   2. ОБЫЧНАЯ СЕКЦИЯ (04, 05, 09, 12) — короткий штрих и капс в строку, без
      номера. Стоит там, где номера нет: отзывы, доверие, вопросы.

   Значения взяты из 06-pillar-store.css и не подобраны заново: это один и
   тот же компонент на двух страницах. ------------------------------------ */

/* 1 · Столп: номер + пилюля */
.fb-numeral {
    font-family: var(--f-display);
    font-size: 56px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--c-gold);
}

/* .kicker с пилюлей: другой цвет и трекинг, чем у базового надзаголовка.
   Подложка зелёная, а не песочная: на 12px с трекингом буквы тонкие, и
   тёплая плашка перекрашивает их на глаз в коричневый. */
.fb-label {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 14px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--c-green) 10%, transparent);
    letter-spacing: 1.44px;
    line-height: 16px;
    color: var(--c-green-text);
}

/* На тёмной секции зелёный тинт почти не виден, а текст в нём нечитаем —
   по таблице пар берём зелёный для тёмного и поднимаем плотность плашки. */
.fb-section--dark .fb-label {
    background: rgba(127, 201, 160, 0.14);
    color: var(--c-green-on-dark);
}

.fb-section--dark .fb-numeral { color: var(--c-sand); }

/* 2 · Обычная секция: штрих + капс */
.fb-eye {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* .rule по умолчанию 120px — здесь короткий штрих слева от надписи */
.fb-eye .rule {
    flex: none;
    width: 24px;
    border-radius: 2px;
}

.fb-eye .kicker {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 1.3px;
}


/* --- Шапка секции -------------------------------------------------------------
   Кегль заголовка — не общий .h2, а тот, что стоит у столпов главной:
   30/38 → 38/46 → 48/54 → 56/62. Ступени переписаны с 06-pillar-store.css
   один в один, включая трекинг.

   Общий .h2 сюда не годится: у него другая лесенка (28 → 34 → 44), и на
   широком экране заголовки страницы оказывались на восемь пунктов мельче
   тех же заголовков на главной. Семейство и вес при этом совпадали, поэтому
   разница читалась не как «другой шрифт», а как «что-то не то». */
.fb-head__title {
    margin-top: 14px;
    max-width: 15em;
}

.fb-head__lead {
    margin-top: 14px;
    max-width: 44em;
    color: var(--c-text-muted);
}

.fb-section--dark .fb-head__lead { color: var(--c-on-dark-soft); }


/* --- Чек-лист ---------------------------------------------------------------
   Галочка — рисованная иконка из набора Tajiro, а не текстовый знак «✓».
   Сначала стоял знак: он ничего не весит и виден сразу. Но у столпов
   главной в этом месте лежит check-green.svg, и два разных вида галочки на
   соседних страницах — первое, за что цепляется глаз. Кегль и цвет строки
   тоже оттуда: 15/23, --c-text-muted. --------------------------------------- */
.fb-check {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.fb-check__item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 15px;
    line-height: 23px;
    color: var(--c-text-muted);
}

/* В макете иконка выровнена по верху строки (items-start), не по центру */
.fb-check__mark {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 3px;
}

.fb-section--dark .fb-check__item { color: var(--c-on-dark-soft); }


/* --- Ряд показателей ----------------------------------------------------------
   «100 / 60s / 100%» под чек-листом. Геометрия и типографика — та же, что у
   столпов главной (задана в её 00-base.css для .s-06/07/08__stats).

   В прототипе это были плашки с рамкой. Здесь рамки нет намеренно: у
   главной показатель в столпе — голая пара «число + подпись капсом», и
   обведённые плашки рядом с ней читались чужим компонентом. Число крупное
   дисплейное, подпись мелкая прописными в разрядку. ---------------------- */
/* ПРО ТРИ КОЛОНКИ И ОДНО ДЛИННОЕ ЧИСЛО.

   Ряд стоял в три колонки на всех ширинах. Двум показателям из трёх это
   годится — «100», «60s», «9:16» короткие, — но в полке товаров третий это
   «AED 26–3,669». Он набран дисплейным и не переносится (см. ниже), то есть
   занимает свои 179 px при кегле 28 как есть. Трети ряда столько не
   достаётся НИ НА ОДНОЙ ширине: в половине контейнера ячейка выходит от 104
   до 175 px.

   Обычно это было не видно — показатель последний в ряду, и лишнее уходило
   в поле контейнера. Но в диапазоне 901–1100, где колонка самая узкая,
   вылет доходил до 74 px и растягивал горизонтальную прокрутку всей
   страницы: на 920 документ был шире окна на 22 px.

   Чиним двумя правилами, а не одним:
     · три колонки только с 1101, ниже — две. Так ячейка нигде не падает
       ниже 137 px;
     · длинному значению свой кегль. Ищем его по data-range — атрибуту,
       который на нём и так есть: по нему js/shared/prices.js пересчитывает
       диапазон под выбранный рынок. Заводить ради этого класс незачем.

   Переносить число по-прежнему нельзя: на двух строках диапазон перестаёт
   читаться диапазоном. */
.fb-mini {
  /* ТРИ КОЛОНКИ НА ВСЕХ ШИРИНАХ. В две показателей не бывает: их всегда
     три, и третий уезжал на вторую строку один — ряд читался сломанным, а
     не переносом.

     Ритм ряда — тот же, что у таких же рядов на главной, правило и разбор
     в css/core/base.css у .s-07__stats. Здесь повторены только сами числа. */
    display: grid;
  /* РАССТОЯНИЕ МЕЖДУ ПОКАЗАТЕЛЯМИ ЗАДАЁТ ТОЛЬКО ЗАЗОР.

     Колонка равна своей надписи, а не трети контейнера. Пока она была
     третью, просвет между показателями считался как «треть минус надпись»
     и гулял вместе с шириной блока, а блоки разные: ряду у хранилища
     достаётся 263 точки, у товаров 520, на free-basic до 701. Замеры дали
     от 12 до 161 — разница в тринадцать раз. Четыре одинаковых по смыслу
     ряда выглядели четырьмя разными вёрстками.

     Теперь на всю страницу два числа и ни одного больше: 12 на телефоне,
     24 с 601. Ряд занимает столько, сколько просит содержимое, остаток
     доли остаётся пустым — он и раньше был пустым, только размазывался по
     просветам. Ступени 901 и 1101 правят кегль и НЕ ТРОГАЮТ зазор: стоит
     переопределить его где-то ещё, и расстояния снова разъедутся. */
    grid-template-columns: repeat(3, max-content);
    gap: 12px;
    align-items: start;
    margin-top: 24px;
}

.fb-mini__m {
    display: flex;
    flex-direction: column;
  /* По центру доли ТОЛЬКО НА ТЕЛЕФОНЕ — как в таком же ряду на главной.
     С 601 возвращается левый край, правило в ступени 601. Разбор там же,
     в core/base.css у .s-07__stat. */
    align-items: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
}

/* Кегль тот же, что в таких же рядах на главной (core/base.css,
   .s-07__stat-value). Здесь стояло 22 против тамошних 24 — на глаз мелочь,
   но рядом на одной ширине два ряда разным кеглем читаются разной вёрсткой. */
.fb-mini__n {
    font-family: var(--f-display);
    font-size: 24px;
    font-weight: 600;
    line-height: 28px;
  /* Числа не переносятся: «AED 26–3,669» на двух строках — уже не число. */
    white-space: nowrap;
    color: var(--c-ink-surface-2);
}

/* Диапазон цен — самое длинное значение ряда: «AED 26–3,669» против «100»
   и «10» у соседей. Мельче общего кегля он набран ТОЛЬКО НА ТЕЛЕФОНЕ и
   только потому, что там не помещается: при общих двадцати четырёх ряду на
   экране в 335 точек нужно 319, а есть 295.

   С 601 уменьшения нет вовсе — там ряду хватает места с запасом (384 из
   536), и разнобой кеглей внутри одного ряда читался ошибкой: два числа
   крупные, третье вдвое мельче.

   Восемнадцать, а не пятнадцать, как было: при пятнадцати разрыв с
   соседями виден и на телефоне, при восемнадцати ряд на 335 просит 288 из
   295 — влезает, а разница уже читается оттенком, а не сбоем.

   Переносить его по-прежнему нельзя: на двух строках диапазон перестаёт
   читаться диапазоном.

   Ограничение записано через max-width, хотя весь файл собран по
   min-width. Причина в силе селекторов: «класс плюс атрибут» сильнее
   голого класса, и медиа-запрос этого не меняет — уменьшение, заданное
   базовым правилом, пережило бы все ступени ниже и держалось бы даже на
   широком экране. Так уменьшение живёт ровно там, где нужно, а на всех
   остальных ширинах диапазон берёт общий кегль .fb-mini__n. */
@media (max-width: 600px) {
  .fb-mini__n[data-range] { font-size: 18px; line-height: 24px; }
}

/* На 320 ряд просил 285 из 280 и вылезал за колонку на 5. Зазор не
   трогаем (он общий, см. .fb-mini) — ужимаем только самое длинное
   значение: 17 и лёгкая разрядка дают ~276. */
@media (max-width: 360px) {
  .fb-mini__n[data-range] { font-size: 17px; letter-spacing: -0.2px; }
}

.fb-mini__l {
    font-size: 10px;
    line-height: 14px;
  /* Прописными в разрядку: подпись читается служебной строкой при числе, а
     не второй строкой текста. На телефоне 0.45, с 601 возвращается 0.55 —
     ровно как в рядах главной. */
    text-transform: uppercase;
    letter-spacing: 0.45px;
  /* Резерв на две строки: длинные подписи в узкую долю в одну не влезают, и
     без резерва ряды разъезжаются по высоте. */
    min-height: 28px;
    color: var(--c-text-muted);
}

.fb-section--dark .fb-mini__n { color: var(--c-on-dark); }
.fb-section--dark .fb-mini__l { color: var(--c-on-dark-muted); }


/* --- Ряд кнопок --------------------------------------------------------------- */
.fb-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.fb-actions--center { justify-content: center; }

/* Условия под кнопкой: «Free 14-day trial · Nothing to ship» */
.fb-terms { margin-top: 14px; }


/* --- Выбор рынка -------------------------------------------------------------
   Своего здесь нет. Селект страны стоит в общей шапке — там же, где в
   прототипе, — и оформлен в css/shared/header.css (.nav-market плюс копия
   для мобильного листа .nav-sheet__market).

   Он общий намеренно: шапка одна на все страницы, и выбор рынка должен
   стоять на каждой в одном месте. Цены по нему пересчитывает
   js/shared/prices.js — тоже общий. -------------------------------------- */


/* --- Стеклянная плашка -------------------------------------------------------
   Вариант из раздела 7.1 свода, собранный из токенов, — тот самый, что
   стоит на главной. Упрощённая утилита .glass намеренно не используется:
   рядом два разных стекла читаются как два разных материала.

   Граница прозрачная и работает распоркой: по ней конический градиент
   кромки и рисует торец. ---------------------------------------------------- */
.fb-panel {
    position: relative;
    border: 1px solid transparent;
    border-radius: 18px;
    background-image: var(--glass-bg), var(--glass-edge);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}

/* На тёмной секции белые градиенты стекла превращаются в молочное пятно —
   по своду там нужна плоская тёмная плашка со светящейся гранью. */
.fb-panel--dark {
    border: 1px solid var(--c-line-on-dark);
    background-image: none;
    background-color: var(--c-ink-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


/* --- Верхняя строка панели ------------------------------------------------------
   Стоит на двух панелях страницы: на аналитике первого экрана и на
   конструкторе в 04. Раньше жила в 04-pillars.css, потому что панель была
   одна; со второй переехала сюда — по тому же правилу, по которому файлы
   уходят в shared/, только внутри страницы.

   Строка светлая и полупрозрачная НАМЕРЕННО. До правки у панели первого
   экрана вместо неё стояла глухая чёрная шапка. Чёрного хрома в системе
   Tajiro нет вовсе: тёмное здесь — тон целой секции, полосой во всю ширину,
   а не обвязка виджета. Чёрная плашка поверх стекла читалась скриншотом
   чужой админки и заодно гасила сам материал — под ней переставало быть
   видно, что панель стеклянная. --------------------------------------------- */
.fb-preview__top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--c-line-soft);
    background: rgba(245, 240, 235, 0.55);
    font-size: 13px;
    color: var(--c-text-muted);
}

/* Адрес витрины — дисплейным и зелёным: он здесь работает как знак, а не
   как подпись. */
.fb-preview__u {
    font-family: var(--f-display);
    font-weight: 600;
    color: var(--c-green-text);
}


/* --- Адаптив: снизу вверх ------------------------------------------------------
   Пороги те же, что во всей системе: 601 / 901 / 1281, только min-width и
   строго по возрастанию. ---------------------------------------------------- */
@media (min-width: 601px) {
  .fb-section { padding-block: 80px; }

  /* Те же ступени, что у столпов главной */
  .fb-numeral { font-size: 68px; letter-spacing: -2.4px; }
  .fb-head__title {line-height: 46px; letter-spacing: -1px; }

  /* Второе и последнее число зазора — как в рядах главной. */
  .fb-mini { gap: 24px; }

  .fb-mini__n { font-size: 28px; line-height: 30px; }
  .fb-mini__l { font-size: 11px; line-height: 15px; min-height: 30px; letter-spacing: 0.55px; }

  /* Левый край, общий со всем столпом. Центр остаётся телефону. */
  .fb-mini__m {
    align-items: flex-start;
    text-align: left;
  }
}

@media (min-width: 901px) {
  /* Ряд переезжает в ПОЛОВИНУ контейнера: с 901 столпы делятся на две
     колонки, и выросшие на 601 кегли в неё не входят — диапазон вылезает за
     край, подпись ломается надвое. Здесь возвращается телефонный кегль, а
     растёт он снова с 1101, когда половина контейнера доросла сама.

     Зазор НЕ трогаем: он один на все ряды обеих страниц и на все ширины.
     Кегли держатся одинаковыми с рядами главной, ступень в ступень. */
  .fb-mini__n { font-size: 24px; line-height: 28px; }
  .fb-mini__l { font-size: 10px; line-height: 14px; min-height: 28px; letter-spacing: 0.45px; }

  .fb-section { padding-block: 96px; }
  .fb-numeral { font-size: 80px; letter-spacing: -3px; }
  .fb-head__title {line-height: 54px; letter-spacing: -1.2px; }
}

@media (min-width: 1281px) {
  /* Здесь стояло правило .fb-mini--last-wide: последней доле ряда
     отдавалось её содержимое, а не равная треть. Понадобилось оно под
     подпись «CAMERAS, CREWS OR AGENCIES», которая в треть не помещалась.

     Подписи с тех пор сокращены — самая длинная теперь «VERTICAL VIDEO», и
     в равную треть она входит с запасом. А правило осталось и на широком
     экране разносило доли как 278, 278 и 87: два числа занимали почти всю
     ширину, третье жалось к ним вплотную. Пока содержимое стояло по левому
     краю, перекос был не так заметен; стоило поставить его по центру доли,
     как ряд поехал вправо. Снято. */

  .fb-section { padding-block: 120px; }
  .fb-numeral { font-size: 96px; letter-spacing: -3.8px; }
  .fb-head__title {line-height: 62px; letter-spacing: -1.5px; }
}


/* Половина контейнера доросла: ячейка снова от 137 точек, и кегли ряда
   показателей возвращаются к тем, что заданы с 601. */
@media (min-width: 1101px) {
  .fb-mini__n { font-size: 28px; line-height: 30px; }
  .fb-mini__l { font-size: 11px; line-height: 15px; min-height: 30px; letter-spacing: 0.55px; }
}

/* ---------------------------------------------------------------
   css/free-basic/01-hero.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — Free Basic · 01 · Первый экран

   Песочный фон, как на главной: он же держит переход к кремовой полосе
   счётчиков ниже. В прототипе первый экран стоял на общем фоне страницы, и
   верх страницы читался одной плоскостью без начала.

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

/* Геометрия блока — та же, что у первого экрана главной, и списана с него
   целиком: отступы, пропорция колонок и высота.

   Про высоту отдельно. У главной она не задана числом, а тянется за
   высотой окна: clamp(380, 100vh − 300, 580) плюс 48 пикселей воздуха.
   Смысл в том, чтобы первый экран помещался в сгиб вместе с кнопками при
   любом мониторе. Здесь справа не фигура, а стеклянная панель, и своей
   высоты ей хватает — но без той же формулы блок выходил ниже, чем на
   главной (667 против 629 на 1440×900), и два первых экрана рядом читались
   разными. Поэтому берём ту же: панель центрируется в полосе так же, как
   там центрируется снимок. */
.fb-hero { padding-block: 40px 48px; }

.fb-hero__wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.fb-hero__eyebrow { margin-bottom: 20px; }

/* Заголовок первого экрана. Лесенка не общая, а та, что у первого экрана
   главной, и переписана с неё целиком:

     телефон    44/50   (у главной это отдельный блок на max-width: 600 —
                         38 при центрировании выглядели мелко рядом с
                         кнопкой во всю ширину)
     ≥601       52/58
     ≥901       60/66
     ≥1281      68/74

   Ступень 601 приходится задавать здесь явно, хотя у главной на ней
   работает общий .h1. Причина в каскаде: этот файл идёт ПОСЛЕ базы, и
   правило без медиа-запроса перебивает базовое внутри запроса при равной
   силе. Пропустишь строку — на планшете заголовок останется телефонным.

   До правки было 38 → 44 → 60 → 68, и ниже 901 первый экран здесь читался
   мельче, чем тот же экран на главной. */
.fb-hero__title {
  /* КЕГЛЬ ЕДЕТ ЗА ШИРИНОЙ ЭКРАНА.

     Сорок четыре держатся с 376 и выше — там заголовок встаёт в две
     строки, как и задумано. Ниже он начинал складываться: на 350 три
     строки, на 320 четыре, по одному-два слова в каждой. Заголовок из
     четырёх огрызков — уже не заголовок.

     11.7vw подобраны так, чтобы на 375 выходило ровно прежние сорок
     четыре, а на 320 — тридцать восемь: при них самая длинная строка
     набора укладывается в ширину колонки. Ниже 325 кегль упирается в
     нижнюю границу и дальше не мельчает — читаемость важнее числа строк.

     Интерлиньяж и межбуквенное заданы долями кегля, иначе они остались бы
     от сорока четырёх и разъехались бы с текстом. */
    font-size: min(clamp(38px, 11.7vw, 44px), calc((100vw - 40px) * 0.108));
    line-height: 1.136;
    letter-spacing: -0.027em;
    /* прежние значения: 44 / 50 / -1.2

       ВТОРОЙ ПОТОЛОК — не больше двух строк. «business – for free» —
       неразрывная пара (тире приклеено, «for free» в nowrap), и при 44 на
       реальных телефонах 360–414 заголовок шёл в три-четыре строки. 0.108 —
       отношение кегля к колонке (экран минус поля 40), при котором он
       ровно встаёт в две, с запасом 3 %. */
  /* Строки выравниваются по длине сами: без этого на узкой колонке
     последняя строка регулярно оставалась в одно слово. */
    text-wrap: balance;
}

/* Подзаголовок. Ступени тоже переписаны с главной: 18/28 → 18/29 → 20/32 →
   22/34. Все четыре выписаны явно по той же причине, что у заголовка, —
   правило без медиа-запроса в этом файле перебивает базовый .lead внутри
   запроса. */
.fb-hero__lede {
    max-width: 30em;
    margin: 22px 0 28px;
    font-size: 18px;
    line-height: 28px;
    color: var(--c-text-body);
}


/* --- Адаптив ---------------------------------------------------------------- */
/* --- Фоновое движение --------------------------------------------------------
   Первый экран — единственное место страницы, где фон живёт. Дальше он
   стоит, и это намеренно: движение на каждой секции читалось бы рябью.

   Движение медленное настолько, что его не замечают, пока не остановятся
   взглядом, — и в этом весь смысл. Решётка гириха уезжает по диагонали
   ровно на один модуль за круг, поэтому стык не виден: узор повторяется
   каждые 620 точек, на столько же он и смещается. Пятна света дышат
   отдельным слоем и в своём ритме — совпади они с решёткой, движение
   стало бы одним общим качанием, и его сразу видно.

   ОБА СЛОЯ ЛЕЖАТ ПОД СОДЕРЖИМЫМ и не ловят курсор: это фактура, а не
   элемент. При запрете движения оба замирают в своём обычном виде —
   первый кадр ничем не отличается от остальных. -------------------------- */
.fb-hero { overflow: hidden; }

.fb-hero::before {
    animation: fb-hero-drift 140s linear infinite;
}

@keyframes fb-hero-drift {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 0 0, 620px 620px; }
}

.fb-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(40% 36% at 24% 28%, rgba(212, 163, 115, 0.20) 0%, transparent 70%),
      radial-gradient(36% 32% at 76% 70%, rgba(61, 143, 99, 0.16) 0%, transparent 70%);
    animation: fb-hero-breathe 22s ease-in-out infinite alternate;
}

@keyframes fb-hero-breathe {
  from { opacity: 0.55; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.14) translate(1.5%, -2%); }
}

@media (prefers-reduced-motion: reduce) {
  .fb-hero::before,
  .fb-hero::after { animation: none; }
}


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

   Пропорция задана рамке, а не картинке: 4:5 — то же отношение, в котором
   кадр снят, и снимок в него ложится без обрезки. Высота считается из
   ширины колонки сама, поэтому на любом мониторе рамка остаётся рамкой, а
   не растягивается в полосу.

   Тень СВОЯ, а не общая --sh-card: та рассчитана на белую плашку на
   светлом, здесь под рамкой тёплый песок и снимок сам тёмный по краям.
   Пятно мягче и уходит вниз — рамка стоит на фоне, а не висит над ним. -- */
.fb-hero__shot {
    position: relative;
  /* НА ТЕЛЕФОНЕ РАМКА ВЫШЕ, чем пропорция кадра. Кадр снят 4:5, и в этой
     пропорции рамка занимала 41% первого экрана против 48% у фигуры на
     главной — рядом с ней экран читался коротким, хотя по числам был
     длиннее. 7:10 выравнивает долю; кадру это не вредит, лишнее срезается
     сверху и снизу, а человек в нём стоит по центру.

     С 601 возвращается 4:5 — там рамка стоит в колонке рядом с текстом, и
     вытягивать её незачем. */
    aspect-ratio: 7 / 10;
    overflow: hidden;
    margin: 0;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(43, 38, 33, 0.06),
                0 24px 40px -24px rgba(43, 38, 33, 0.30);
}

.fb-hero__shot video,
.fb-hero__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  /* Лицо в кадре выше середины — окно смещено к верху, иначе в рамку
     попадал бы в основном стол. */
    object-position: center 34%;

  /* Кадр ролика ещё и фоном: атрибут poster держит его ТОЛЬКО до начала
     воспроизведения, а решив играть, браузер постер снимает — и пока
     первый кадр не расшифрован, рамка стоит пустой. Фоном кадр лежит под
     видео всегда. Тот же приём, что у ролика инфлюенсеров и портрета
     менеджера. */
    background: url(../images/people/fb-hero-owner.webp) center 34% / cover no-repeat;
}


@media (min-width: 601px) {
  .fb-hero { padding-block: 52px 56px; }
  .fb-hero__shot { aspect-ratio: 4 / 5; }

  .fb-hero__title { font-size: 52px; line-height: 58px; letter-spacing: -1.4px; }
  .fb-hero__lede { line-height: 29px; }
}

@media (min-width: 901px) {
  /* Рост полосы тянется за высотой окна — формула главной без изменений */
  .fb-hero {
    --fb-fig-h-band: clamp(380px, calc(100vh - 300px), 580px);

  /* Флекс, а не просто min-height: полоса выше своего содержимого, и без
     центрирования панель прижималась бы к верху, а на главной снимок
     стоит посередине. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(var(--fb-fig-h-band) + 48px);
  /* Поле ровно в половину той же прибавки, что в min-height. Было 56, и
     полоса вырастала до 708 при 629 у первого экрана главной: рамка висела
     с широкими полями сверху и снизу, и экран читался пустым, хотя по
     числам был выше. Теперь высота сходится с главной, а рамка почти
     достаёт до кромок секции — как там достаёт фигура. */
    padding-block: 24px;
  }

  /* Колонки НЕ равные, как на главной: текст берёт больше. При половине на
     половину заголовок расходится лесенкой. Доля её же — 1.3 к 1. */
  .fb-hero__wrap {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: 40px;
  }

  /* Колонка 406–620 на 901–1280; при 60 заголовок шёл в три-четыре строки
     до 1140. Кегль идёт за колонкой (≈ 0.565 × экран − 103). */
  .fb-hero__title { font-size: min(60px, calc(6.27vw - 11.4px)); line-height: 1.1; letter-spacing: -0.03em; }
  .fb-hero__lede { font-size: 20px; line-height: 32px; }

  /* Фигура берёт ту же высоту полосы, что считает секция выше: силуэт и
     текстовая колонка кончаются на одной линии. */
  /* Рамка не выше полосы, которую считает секция: иначе первый экран
     перестаёт помещаться в сгиб. */
  /* Когда рамку ограничивает высота полосы, она уже колонки: прижимаем её
     вправо, к оси кнопки шапки и карточек показателей (на 1440 правый край
     стоял на 40 левее). Ширина явная: у <video> до загрузки метаданных своя
     ширина, и по содержимому рамка могла бы сжаться. */
  .fb-hero__shot {
    width: min(100%, calc(var(--fb-fig-h-band) * 4 / 5));
    max-height: var(--fb-fig-h-band);
    justify-self: end;
  }
}

@media (min-width: 1281px) {

  /* На 1281–1380 колонка 557–610, при 68 выходило три строки. */
  .fb-hero__title { font-size: min(68px, calc(6.28vw - 18.6px)); line-height: 1.088; letter-spacing: -0.029em; }
  .fb-hero__lede { font-size: 22px; line-height: 34px; }

}

/* ПРО ДВЕ СТРОКИ В ЗАГОЛОВКЕ. Здесь одно время стояла ступень на 1421 с
   долей 2.25 к 1: заголовок в неё ложился в две строки, но текст подходил
   к панели почти вплотную, а сама панель ужималась до 350px. Ступень
   снята, доля вернулась к пропорции главной.

   Две строки теперь даёт не вёрстка, а длина фразы: из заголовка убрано
   слово «today». Без него порог переноса падает с 786px до 600, и фраза
   ложится в две строки в обычную колонку при любой ширине окна. */

/* ---------------------------------------------------------------
   css/shared/stats.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — Home · 02 · Stats
   Figma: HoPojxNiFElmltha1NOl3N, node 511:300
   Полоса из четырёх показателей на кремовом фоне.
   ========================================================================== */

.s-02 {
  /* Сверху меньше, чем снизу, намеренно: верх этой секции выглядывает из-под
     первого экрана, и при равных отступах из-за сгиба торчало бы одно пустое
     поле, а не карточки. */
    padding-top: 36px;
    padding-bottom: 56px;

  /* Заливки здесь намеренно нет. Цвет у неё был ровно фоновый, то есть на глаз
     ничего не давал, — а холст первого экрана зафиксирован под всем документом,
     и непрозрачная секция обрубала песок бритвой ровно по своей верхней
     границе. Прозрачная — песок дотаивает сквозь неё сам. */
}

/* --- Сетка показателей ---------------------------------------------------- */
.s-02__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);

  /* Зазор ужат с 32: числа стали длиннее прежних, и каждый лишний пиксел
     между карточками — пиксел, отнятый у строки внутри них. */
    gap: 10px;
    text-align: center;
}

/* --- Карточка показателя -------------------------------------------------- */
/* column-reverse: в разметке сначала подпись (dt), визуально сначала число */
.s-02__stat {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  /* flex-end при column-reverse — это верх: число у верхнего поля, вторая
     строка подписи уходит вниз, и числа в ряду стоят на одной линии. По
     центру «0%» над подписью в две строки поднималось на ~10 выше соседей. */
    justify-content: flex-end;
    gap: 2px;

  /* Отступы НЕ равны намеренно — равной должна быть краска, а не коробки.

     Цифра не заполняет свою строку: сверху над ней остаётся около десяти
     пикселей пустой строки, снизу под подписью — около двух с половиной.
     При ровных полях это давало 34 сверху против 22.5 снизу, и верх
     читался просторнее. Здесь разница выбрана так, чтобы от верхнего края
     до краски цифры и от краски подписи до нижнего выходило поровну —
     около двадцати восьми. */
    padding: 14px 12px 18px;

  /* Стекло, общее со всеми крупными плашками страницы: токены в 00-base.css.
     Эти четыре карточки под него не попали, потому что у них своя разметка,
     а рядом с остеклёнными шагами разница читалась. Граница прозрачна и
     работает распоркой — в её толщину видно градиентную кромку. */
    border: 1px solid transparent;
    border-radius: 14px;
    background-image: var(--glass-bg), var(--glass-edge);
    background-origin: padding-box, padding-box, border-box;
    background-clip: padding-box, padding-box, border-box;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);

    overflow: clip;   /* Figma: overflow-clip — страница не должна ехать вбок */
}

.s-02__value {
    font-family: var(--f-display);
    font-weight: 700;

  /* Кегль подобран под САМУЮ ДЛИННУЮ строку — «Up to 100%». Числа здесь
     длиннее прежних: было «38» и «4.8/5», стало «Up to 100%» и «50,000+».
     При 64 длинная строка занимала 274 пиксела на 214 доступных и либо
     срывалась на вторую строку, либо вылезала за карточку. Перенос
     недопустим: ряд из четырёх сразу расходится по высоте. */
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.9px;
    white-space: nowrap;
    color: var(--c-text);
}

.s-02__label {
    font-size: 14px;
    line-height: 20px;
    color: #706b61;
    text-wrap: balance;   /* «Platform commission / on your store²», а не «…on / your store²» */
}

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


/* На четыре колонки «12,400+» перестаёт влезать раньше 900px:
   при gutter 64px трек = (vw − 200) / 4, а число в 54px требует ~236px
   вместе с паддингами. Порог перехода на две колонки — 1080px. */

/* --- Адаптив: снизу вверх ---------------------------------------------------
   Всё выше — телефонные значения. Здесь они дорастают до широкого экрана.
   Блоки идут строго по возрастанию порога: правила равной силы, побеждает
   последнее подошедшее. Пороги смещены на пиксел (601 вместо 600): при
   max-width граница входила в узкий диапазон, при min-width должна войти
   в широкий. -------------------------------------------------------------- */

@media (min-width: 601px) {
  .s-02 {
    padding-top: 44px;
    padding-bottom: 80px;
  }
  .s-02__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .s-02__stat {
    gap: 6px;
    /* Отступы НЕ равны намеренно — равной должна быть краска, а не коробки.
    
    Цифра не заполняет свою строку: сверху над ней остаётся около десяти
    пикселей пустой строки, снизу под подписью — около двух с половиной.
    При ровных полях это давало 34 сверху против 22.5 снизу, и верх
    читался просторнее. Здесь разница выбрана так, чтобы от верхнего края
    до краски цифры и от краски подписи до нижнего выходило поровну —
    около двадцати восьми. */
    padding: 20px 16px 26px;
    border-radius: 18px;
  }
  .s-02__value {
    font-size: 40px;
    line-height: 44px;
    letter-spacing: -1.1px;
  }
  /* Подпись про комиссию длиннее остальных на четыре слова и просила
     245 px при 237 доступных — ложилась в две строки, а соседние
     оставались в одну. Кегль на полтора пункта меньше выравнивает ряд. */
  .s-02__label {
    font-size: 15px;
    line-height: 21px;
  }
}

@media (min-width: 901px) {
  .s-02 {
    /* Сверху меньше, чем снизу, намеренно: верх этой секции выглядывает из-под
    первого экрана, и при равных отступах из-за сгиба торчало бы одно пустое
    поле, а не карточки. */
    padding-top: 60px;
    padding-bottom: 120px;
  }
}

@media (min-width: 1081px) {
  .s-02__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .s-02__value {
    font-size: 34px;
    line-height: 38px;
    letter-spacing: -0.9px;
  }
}

@media (min-width: 1281px) {
  .s-02__grid {
    /* Зазор ужат с 32: числа стали длиннее прежних, и каждый лишний пиксел
    между карточками — пиксел, отнятый у строки внутри них. */
    gap: 20px;
  }
  .s-02__value {
    /* Кегль подобран под САМУЮ ДЛИННУЮ строку — «Up to 100%». Числа здесь
    длиннее прежних: было «38» и «4.8/5», стало «Up to 100%» и «50,000+».
    При 64 длинная строка занимала 274 пиксела на 214 доступных и либо
    срывалась на вторую строку, либо вылезала за карточку. Перенос
    недопустим: ряд из четырёх сразу расходится по высоте. */
    font-size: 38px;
    line-height: 42px;
    letter-spacing: -1px;
  }
}


/* --- Сноски --------------------------------------------------------------
   Мельче подписей и приглушены: это оговорка, а не часть показателя. */
.s-02__note {
    margin-top: 26px;
    color: var(--c-text-muted);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

/* Каждая сноска — своим куском. На телефоне каждая с новой строки: одной
   строкой хвост первой («2023.») уходил в начало второй и читался как
   «2023. ² Payment…». В одну строку обе встают с 901: на 601–900 они
   вместе (~540) не входили в колонку и рвались на «fees / apply.». */
.s-02__note-item {
    display: block;
    text-wrap: balance;
}

.s-02__note .s-02__ref:first-child { margin-left: 0; }

@media (min-width: 901px) {
  .s-02__note-item { display: inline; }
  .s-02__note-item + .s-02__note-item { margin-left: 10px; }
}

/* Верхний индекс не должен растягивать строку показателя */
.s-02__ref {
    font-size: 0.62em;
    line-height: 0;
    vertical-align: super;
}

/* ---------------------------------------------------------------
   css/shared/what-you-get.css
   --------------------------------------------------------------- */
/* ==========================================================================
   05 · What you get — центрированный интро-блок на тёмной плашке
   Источник: Figma HoPojxNiFElmltha1NOl3N, node 511:369
   ========================================================================== */

.s-05 {
  /* Плашка темнее --c-ink-surface-2, текст мягче --c-on-dark: точных токенов нет */
    --s05-bg: #1a1714;
    --s05-title: #f2ede5;
    --s05-lead: #d9d1c7;

    padding-block: 64px;
    background: var(--s05-bg);
    color: var(--s05-lead);
}

.s-05__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}

/* --- Надзаголовок: штрих + WHAT YOU GET ----------------------------------- */
.s-05__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 1.1px;
    color: var(--c-green-on-dark);
}

.s-05__kicker-rule {
    flex: none;
    width: 18px;
    border-radius: 2px;
}

/* --- Заголовок ------------------------------------------------------------ */
.s-05__title {
  /* НЕ БОЛЬШЕ ДВУХ СТРОК на телефоне (правило сайта). На 320–344 было три строки.
     Кегль растёт с колонкой (ширина экрана минус поля 40) и упирается в
     прежний; 0.098 — отношение кегля к колонке, при котором заголовок ровно
     встаёт в две строки, с запасом 3 %. Проверено в эмуляции телефона на
     320–600 (17.09.2026). Интерлиньяж и разрядка — долями кегля. */
    color: var(--s05-title);
    text-wrap: balance;
}

/* --- Подзаголовок --------------------------------------------------------- */
/* 720, а не прежние 640. Лид здесь длинный — 149 знаков, — и одной строкой
   при кегле 20 он занимает 1268 px. В 640 не хватало ровно пяти пикселей:
   перенос складывается в две строки начиная с 645, а до того уходил в три.
   720 — те же две строки с запасом, разрыв ложится после «the whole»,
   и половины выходят почти равными: 76 и 73 знака. */
.s-05__lead {
    max-width: 720px;
    color: var(--s05-lead);
    text-wrap: pretty;
}

/* --- Финальный штрих ------------------------------------------------------ */
.s-05__rule {
    flex: none;
    width: 60px;
    border-radius: 2px;
}

/* --- Оглавление к столпам ----------------------------------------------------
   Четыре пункта, которые идут дальше отдельными секциями: те же номера, те
   же слова.

   Подписи держатся в 56 знаках и короче. Колонка узкая — при кегле 14 на
   строку приходится 176 px, то есть примерно 28 знаков, и всё длиннее
   уходит в третью строку. Дописывая сюда текст, считайте знаки. Появляются один раз, лесенкой, через общую систему
   (`.reveal-set` в 00-reveal.css) — зацикливать оглавление нельзя, его
   читают, а петля половину времени держала бы список неполным.
   Волосяные связи между колонками статичны: это структура, а не движение. */
.s-05__index {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 420px;
    margin-top: 20px;
    text-align: left;
}

.s-05__item {   position: relative; }

/* Связь между колонками — три пункта читаются как одно оглавление */
.s-05__item + .s-05__item::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
    background: rgba(212, 163, 115, 0.34);
}

.s-05__link {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    padding: 14px 0;
    transition: transform 0.22s ease;
}

.s-05__link:hover {   transform: translateY(-3px); }

/* Номер в колонке постоянной ширины: цифры пропорциональные, «01» уже
   «03», и подписи в соседних рядах стояли не на одной оси (на 3–7). */
.s-05__num {
    flex: none;
    min-width: 1.25em;
    font-family: var(--f-display);
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--c-sand);
}

.s-05__item-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.s-05__item-title {
    font-size: 17px;
    font-weight: 800;
    line-height: 23px;
    letter-spacing: -0.2px;
    color: var(--s05-title);
}

.s-05__item-text {
    font-size: 13px;
    line-height: 20px;
    color: var(--s05-lead);
    text-wrap: pretty;
}

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

/* --- Адаптив: снизу вверх ---------------------------------------------------
   Всё выше — телефонные значения. Здесь они дорастают до широкого экрана.
   Блоки идут строго по возрастанию порога: правила равной силы, побеждает
   последнее подошедшее. Пороги смещены на пиксел (601 вместо 600): при
   max-width граница входила в узкий диапазон, при min-width должна войти
   в широкий. -------------------------------------------------------------- */

@media (min-width: 601px) {
  .s-05 {
    padding-block: 88px;
  }
  .s-05__inner {
    gap: 26px;
  }
  .s-05__kicker {
    font-size: 12px;
    letter-spacing: 1.3px;
  }
  .s-05__kicker-rule {
    width: 24px;
  }
  .s-05__title {
  }
  /* Две колонки, а не три: пунктов стало четыре, и 2x2 делится ровно.
     Тремя они вставали 3+1, и одинокий четвёртый читался обрубком. */
  .s-05__index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 16px;           /* ряды 2×2 и их черты не слипаются */
    max-width: 720px;
  }
  /* Вертикальная черта только между соседями ОДНОГО ряда: у первого в ряду
     её быть не должно, иначе она повисает у левого края сетки. */
  .s-05__item + .s-05__item::before {
    top: 4px;
    right: auto;
    bottom: 4px;
    width: 1px;
    height: auto;
  }
  .s-05__item:nth-child(odd)::before {
    display: none;
  }
  .s-05__link {
    gap: 14px;
    padding: 6px 18px;
  }
  .s-05__num {
    font-size: 34px;
    letter-spacing: -1.4px;
  }
}

@media (min-width: 901px) {
  /* ЧЕТЫРЁХ КОЛОНОК ЗДЕСЬ БОЛЬШЕ НЕТ — они переехали на 1401, ниже.

     Стояли с 901 и разваливали текст. Арифметика: на подпись остаётся
     ширина колонки минус поля ссылки (64), минус номер (40) и зазор (18).
     На экране в 1024 колонка выходит 220, подписи достаётся 98 — это
     десять-четырнадцать знаков в строке, слова по одному в строку
     столбиком. На 1281 колонка 260, подписи 138 — всё ещё шестнадцать
     знаков. Комментарий к блоку обещает двадцать восемь, и они набираются
     только при колонке от 298, то есть при экране от 1432.

     До этого порога остаются две колонки со ступени 601: там подпись
     получает больше четырёхсот точек и читается абзацем, а не столбиком. */

  .s-05 {
    padding-block: 104px;
  }
  .s-05__inner {
    gap: 32px;
  }
  .s-05__title {
  }
  .s-05__link {
    gap: 18px;
    padding: 6px 32px;
  }
  .s-05__num {
    font-size: 40px;
  }
  .s-05__item-title {
    font-size: 19px;
    line-height: 25px;
  }
  .s-05__item-text {
    font-size: 14px;
    line-height: 22px;
  }
}

@media (min-width: 1281px) {
  .s-05 {
    padding-block: 120px;
  }
  .s-05__title {
  }
}

/* Четыре в один ряд — оглавление совпадает со столпами один к одному.
   Порог 1401, а не 901: только здесь колонка дорастает до 298 точек, при
   которых подписи достаётся 176 — те самые двадцать восемь знаков в
   строке, на которые рассчитан текст блока. Разбор — в ступени 901 выше. */
@media (min-width: 1401px) {
  .s-05__index {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1200px;
  }

  /* Ряд снова один, значит черта нужна у всех, кроме первого. */
  .s-05__item:nth-child(odd)::before {
    display: block;
  }

  .s-05__item:first-child::before {
    display: none;
  }
}

/* ---------------------------------------------------------------
   css/free-basic/03-platform.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — Free Basic · 03 · Оглавление на шесть пунктов

   Секция целиком — это s-05 главной: тот же тёмный фон, тот же надзаголовок,
   та же типографика. Файл shared/what-you-get.css подключён как есть. Здесь
   лежит то, что отличает шесть пунктов от четырёх.

   ПОЧЕМУ НЕ КРУПНЫЙ НОМЕР СБОКУ, КАК НА ГЛАВНОЙ

   У главной пунктов четыре, и они встают одним рядом: номера идут подряд,
   01…04, порядок читается единственным способом. Шесть в один ряд не
   влезают — доля выходит 187px вместо 300, — а в два ряда крупные золотые
   номера встают вертикальными парами: 01 над 04, 02 над 05, 03 над 06.
   Номер тяжелее подписи, глаз собирает их в столбцы, и оглавление читается
   сверху вниз парами вместо порядка слева направо.

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

   ПОЧЕМУ НЕ .s-05__link

   Пункты здесь не ссылки (см. партиал), поэтому и класс ссылки не берём:
   у него есть :hover с подъёмом на три пикселя, а сдвиг под курсором —
   обещание перехода. Обещать нечего, значит и движения быть не должно.
   Своя обёртка .fb-idx несёт только отступы.
   ========================================================================== */

.fb-idx { display: block; padding: 14px 0; }

/* Номер в строку с подписью.

   Кегль вровень с подписью, а не больше неё. Пробовал 26–28: номер
   становился крупнее заголовка пункта и забирал первый взгляд себе —
   читалось «01», а потом уже «Your store», хотя главное здесь подпись.
   У главной номер имеет право быть крупным, потому что стоит отдельным
   столбцом; в одной строке с подписью он обязан быть ей ровней.

   19 против 19 у подписи — на глаз номер даже чуть тише: Outfit 600 легче
   Almarai 800, и при равном кегле он читается спокойнее. Это и нужно —
   метка порядка, а не заголовок.

   line-height: 1 обязателен. Без него высокий инлайновый элемент раздвигает
   строку подписи изнутри: у подписи 25px интерлиньяжа, и строка растёт, а
   ряды перестают стоять вровень. */
.s-05__index--six .s-05__num {
    display: inline;
    margin-right: 10px;
    font-family: var(--f-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.4px;
    color: var(--c-sand);
}

.s-05__index--six .s-05__item-title {
    display: block;
    margin-bottom: 6px;
}


/* --- Адаптив ------------------------------------------------------------------
   Телефон — один столбец: подписи короткие, а шесть строк подряд читаются
   списком. Дальше два в ряд и три в ряд; в обоих случаях ряды полные,
   потому что шесть делится и на два, и на три.

   Волосинки между пунктами считает s-05: до 601 они горизонтальные, выше —
   вертикальные и сняты у первого в ряду через `:nth-child(odd)`. При двух
   колонках первый в ряду всегда нечётный, и правило подходит как есть. При
   трёх первые в ряду — 1 и 4, то есть `3n + 1`, и его надо пересчитать. */
/* С 601 пункты в две колонки, и между ними черта (what-you-get.css): без
   бокового поля текст правой колонки начинался на самой черте. Поле у всех
   пунктов, как у .s-05__link на главной; с 901 его перебивает 18px 24px. */
@media (min-width: 601px) {
  .fb-idx { padding-inline: 20px; }
}

@media (min-width: 901px) {
  .s-05__index--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1160px;
  }

  /* Сначала возвращаем черту всем (с 601 она снята у нечётных), потом
     снимаем у первых в ряду. Порядок важен: правила равной силы. */
  .s-05__index--six .s-05__item:nth-child(odd)::before { display: block; }
  .s-05__index--six .s-05__item:nth-child(3n + 1)::before { display: none; }

  .fb-idx { padding: 18px 24px; }

  /* Пункты набраны КРУПНЕЕ, чем на главной: 22/30 против её 19/25 у подписи
     и 15/23 против 14/22 у описания.

     Совпадение кеглей тут не работает. У главной пункт держит крупный
     золотой номер сбоку — он и даёт блоку вес. Здесь номер убран в строку и
     уравнен с подписью (иначе он забирал первый взгляд себе), и без него
     тем же кеглем шесть пунктов читались мелкой сноской под большим
     заголовком. Вес, который там несёт номер, здесь несёт сам текст.

     Выше поднимать нельзя: на 16 описание «AI influencers and promo videos,
     ready to post.» перестаёт помещаться в строку, ряды идут вразнобой. */
  .s-05__index--six .s-05__num { font-size: 22px; }
  .s-05__index--six .s-05__item-title { font-size: 22px; line-height: 30px; }
  .s-05__index--six .s-05__item-text { font-size: 15px; line-height: 23px; }
}

@media (min-width: 1281px) {
  /* Во всю ширину контейнера, как у оглавления главной */
  .s-05__index--six { max-width: 1200px; }
  .fb-idx { padding-inline: 32px; }
}

/* ---------------------------------------------------------------
   css/shared/pillar-store.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — Home · 06 · Pillar 01 — Your store
   Figma: HoPojxNiFElmltha1NOl3N, node 511:376
   Текстовая колонка + макет телефона с плавающими карточками-метриками.
   ========================================================================== */

.s-06 {
    overflow: hidden;   /* сияние вокруг телефона шире секции — режем по её краю */
    --s06-ink: var(--c-ink-surface-2);      /* заголовок, цифры метрик */
    --s06-muted: #6e675c;                     /* лид, подписи метрик      */
    --s06-glow: #c9a96a;                     /* галочки                  */

    padding-block: var(--gutter);
    background: var(--c-bg-plain);
}

.s-06__inner {
    display: flex;
  /* row выписан явно: ниже 900 колонки встают столбиком, и снять это на
     широком экране можно только тем, что написано здесь. */
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 44px;
}

/* --- Левая колонка -------------------------------------------------------- */
.s-06__text {
    display: flex;
  /* Потолок ширины по умолчанию снят: в стопке колонка получает свой,
     и вернуть её к обычной ширине выше 900 можно только этой строкой. */
    max-width: 560px;
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    width: 100%;
}

.s-06__block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: none;
}

.s-06__numeral {
    font-family: var(--f-display);
    font-size: 56px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--c-gold);
}

/* .kicker с пилюлей: другой цвет и трекинг, чем у базового надзаголовка */
.s-06__label {
    align-self: flex-start;
    padding: 5px 14px;
    border-radius: var(--r-pill);
  /* Подложка зелёная, а не песочная. Цвет текста тут ни при чём: он и был
     --c-green-text, тот же #2f6b4a, что у цены в фокусе ленты. Коричневой
     мульку делала песочная плашка — на 12 px с трекингом 1.44 буквы тонкие,
     и тёплая подложка перекрашивала их на глаз. Зелёный тинт в 10 % даёт
     контраст 4.91:1 при пороге 4.5, запас есть. */
    background: color-mix(in srgb, var(--c-green) 10%, transparent);
    letter-spacing: 1.44px;
    line-height: 16px;
    color: var(--c-green-text);
}

.s-06__title {
  /* НЕ БОЛЬШЕ ДВУХ СТРОК на телефоне (правило сайта). До 393 было три строки.
     Кегль растёт с колонкой (ширина экрана минус поля 40) и упирается в
     прежний; 0.080 — отношение кегля к колонке, при котором заголовок ровно
     встаёт в две строки, с запасом 3 %. Проверено в эмуляции телефона на
     320–600 (17.09.2026). Интерлиньяж и разрядка — долями кегля. */
    color: var(--s06-ink);
}

.s-06__lead {
    color: var(--s06-muted);
}

/* --- Список фич ----------------------------------------------------------- */
.s-06__features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.s-06__feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 23px;
    color: var(--c-text-muted);
}

/* В макете иконка выровнена по верху строки (items-start), не по центру */
.s-06__check {
    flex: none;
    width: 16px;
    height: 16px;
}

/* --- Ряд показателей -------------------------------------------------------
   Геометрия и типографика общие для 06, 07 и 08 — заданы один раз в
   00-base.css. Здесь только цвета. */
.s-06__stat-value { color: var(--s06-ink); }

.s-06__stat-label { color: var(--s06-muted); }


/* --- Кнопка ----------------------------------------------------------------
   Оформление общее для страницы — .btn .btn--primary, стрелка отъезжает на
   наведении ровно как в 03b, 04 и 08.
   -------------------------------------------------------------------------- */
.s-06__actions {
    display: flex;
}

.s-06__cta img {
    flex: none;
    transition: transform 0.18s ease;
}

.s-06__cta:hover img {   transform: translateX(3px); }

/* --- Правая колонка: сцена с телефоном ------------------------------------ */
.s-06__visual {
    display: flex;
  /* Ниже 600 сцене добавляют боковое поле; ноль здесь — то, чем его снять. */
    padding-inline: 18px;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
}

.s-06__stage {
    position: relative;
    width: min(280px, 100%);
    margin-right: 0;   /* сдвиг влево, как в макете (phone left 140 из 600) */
}

.s-06__phone {
    position: relative;
    width: 100%;
    aspect-ratio: 280 / 572;
    border-radius: 40px;
    background: #080808;
  /* Базовое свечение живёт в box-shadow, анимация только качает его силу —
     при отключённой анимации подсветка остаётся, просто перестаёт дышать. */
    box-shadow: 0 0 0 1px rgba(212, 163, 115, 0.22),
    0 0 30px -8px rgba(212, 163, 115, 0.40),
    0 34px 70px -24px rgba(43, 38, 33, 0.50);
    animation: s06-glow 6s ease-in-out infinite;
}

@keyframes s06-glow {
  50% {
    box-shadow:
      0 0 0 1px rgba(212, 163, 115, 0.45),
      0 0 58px -4px rgba(212, 163, 115, 0.65),
      0 34px 70px -24px rgba(43, 38, 33, 0.50);
  }
}

.s-06__screen {
    position: absolute;
    inset: 4px;
    border-radius: 36px;
    overflow: hidden;
}

.s-06__shot {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s-06__scrim {
    position: absolute;
    inset: 0;
  /* Скрим отпущен по всей высоте, и особенно снизу: 0.92 превращали нижнюю
     четверть экрана в чёрную полосу. С новым дневным кадром это топило всю
     витрину — средняя яркость экрана выходила 106 при яркости самого фото
     184, то есть скрим съедал две трети света.

     Теперь экран держится около 134. Низ больше не затемняем ради ленты
     заказов: плашка получила собственное тёмное стекло и читается на любом
     фоне сама, без помощи скрима. */
    background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0.05) 26%,
    rgba(0, 0, 0, 0.30) 56%,
    rgba(0, 0, 0, 0.45) 100%);
}

/* Витрина внутри экрана */
.s-06__store-hero {
    position: absolute;
  /* Приподнят с 53.2%: под кнопкой должны помещаться две плашки заказов,
     а они занимают ровно столько, сколько было свободного низа — зазор
     выходил минус два пикселя, стопка наезжала на кнопку. */
    top: 50.2%;
    left: 8.1%;
    right: 8.1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.s-06__store-title {
    font-size: 26px;
    font-weight: 800;
    line-height: 30px;
    letter-spacing: -0.5px;
    color: var(--c-on-dark);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.s-06__store-sub {
    font-size: 11px;
    line-height: 16px;
  /* По той же причине, что и логотип: приглушённый бежевый на светлом кадре
     не отделялся от фона. Здесь белый с прозрачностью — тише заголовка, но
     всё ещё явно светлее подложки. */
    color: rgba(251, 248, 243, 0.85);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.s-06__store-cta {
    padding: 10px 24px;
    border-radius: 24px;
    background: var(--c-surface);
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    letter-spacing: 1.5px;
    white-space: nowrap;
    color: #0e0e0e;
}

/* Тост «новый заказ» поверх экрана */
/* Обёртка прижата к низу экрана, а не отсчитана сверху: плашки копятся в
   стопку, и растёт она вверх — ниже места нет, там край телефона. */
.s-06__toasts {
    position: absolute;
  /* Ниже нельзя: у экрана скругление 44 px, и на отступе меньше 14 px
     угол начинает срезать нижние края плашки. */
    bottom: 3.2%;
    left: 4.4%;
    right: 4.4%;
}

.s-06__toast {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  /* Место в стопке задаёт --y: у свежей плашки ноль, каждая следующая
     поднята на свою высоту плюс зазор. Считает его скрипт: высота плашки
     зависит от содержимого, в стилях её не знать.

     Переход по transform, а не по top: перекладывать страницу на каждом
     кадре ради сдвига на полсотни пикселей незачем. */
    transform: translateY(var(--y, 0px));
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    align-items: center;
    gap: 9px;
  /* Плашка ужата: две штуки в стопке должны уместиться под кнопкой
     витрины, а на прежних 54 px высоты они туда не влезали. */
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
  /* Тёмное стекло, а не светлое. Светлое работало только потому, что скрим
     выжигал низ экрана в чёрный; на дневном кадре светлая плашка со светлым
     текстом растворялась в светлом камне. Теперь плашка держит контраст
     сама и не зависит от того, что под ней. */
  /* Стекло чуть плотнее (0.5 -> 0.56): мелкий текст на полупрозрачной
     подложке ловит рябь фотографии под собой и от этого мылится. */
    background: rgba(18, 15, 12, 0.56);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    color: var(--c-on-dark);
}

/* Плашку создаёт и убирает скрипт — своего цикла у неё нет. Прежние четыре
   карточки крутились по кругу с зашитыми задержками, и заказ в них ничего
   не значил: выручка рядом жила отдельной анимацией. */
.s-06__toast {
    animation: s06-toast-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Пока идёт въезд, анимация перебивает базовый transform, и подъём по стопке
   не сработал бы. Поэтому, как только въезд закончился, скрипт вешает этот
   класс и анимация снимается — дальше место в стопке держит переход. */
.s-06__toast.is-settled {   animation: none; }

/* Идёт после is-settled: при одинаковой силе селекторов побеждает последний,
   иначе уход не проигрался бы. */
.s-06__toast.is-leaving {
    animation: s06-toast-out 0.4s ease both;
}

/* Окна соседних карточек слегка перекрываются: на стыке идёт перекрёстное
   затухание, а не пустой экран (шаг 25%, видимость 2–23%, уход к 26%). */
/* Въезд и уход отсчитываются от места в стопке, а не от нуля: плашка должна
   приезжать на свою полку, а не на дно. */
@keyframes s06-toast-in {
  /* Разбег 9 px, а не 14: на четырнадцати плашка на миг заходила в
     скругление нижнего угла экрана и подрезалась на въезде. */
  from { opacity: 0; transform: translateY(calc(var(--y, 0px) + 9px)) scale(0.96); }
  to   { opacity: 1; transform: translateY(var(--y, 0px)) scale(1); }
}

@keyframes s06-toast-out {
  to { opacity: 0; transform: translateY(calc(var(--y, 0px) - 10px)); }
}

.s-06__toast-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
  /* Значок и задаёт высоту плашки: текст рядом ниже него. */
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: rgba(201, 169, 106, 0.22);
}

.s-06__toast-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.s-06__toast-title {
  /* Без переноса: на длинных городах вроде Abu Dhabi строка ломалась
     надвое, плашка становилась выше остальных, и стопка лезла на кнопку
     витрины. Одинаковая высота у всех плашек тут не косметика, а условие. */
    overflow: hidden;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.s-06__toast-sub {
  /* Было 8 px — на таком кегле название товара уже не читается, буквы
     сливаются в серую полосу. Место под прибавку есть: высоту плашки задаёт
     значок в 28 px, а две строки текста занимали 24.

     Цвет не трогаем в сторону приглушения: подпись и так была почти белой,
     нечитаемой её делал размер. Иерархию с заголовком держим весом и
     кеглем, а не блёклостью. */
    font-size: 9.5px;
    font-weight: 500;
    line-height: 13px;
    color: rgba(251, 248, 243, 0.85);
}

/* Время заказа. Набрано мельче и тише заголовка: это служебная пометка,
   а не то, ради чего плашку читают. Кегль тот же, что у названия товара, —
   иначе строка справа перетягивала бы на себя внимание, как перетягивала
   сумма, стоявшая здесь раньше золотым полужирным. */
.s-06__toast-time {
    flex: none;
    font-size: 9.5px;
    font-weight: 500;
    line-height: 13px;
    white-space: nowrap;
    color: rgba(251, 248, 243, 0.55);
}

/* --- Плавающие карточки-метрики ------------------------------------------- */
.s-06__float {
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.44);
    box-shadow: 0 10px 30px rgba(43, 38, 33, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}

.s-06__float-label {
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--s06-muted);
}

/* Точка перед подписью: показывает, что плашка про живое состояние */
.s-06__float-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    box-shadow: 0 0 8px rgba(61, 143, 99, 0.55);
    border-radius: 50%;
    background: var(--c-green-bright);
    vertical-align: middle;
}

.s-06__float-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 5px 0 0;
}

.s-06__float-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.s-06__float-value {
    font-family: var(--f-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.4px;
    color: var(--c-ink-surface-2);
}

/* Счётчик заказов: лента цифр едет на одну строку с каждым заказом */
.s-06__float {   animation: s06-drift 7s ease-in-out infinite; }
.s-06__float--rating {   animation-duration: 8.5s;   animation-delay: -2s; }
.s-06__float--orders {   animation-duration: 9.5s;   animation-delay: -4s; }

@keyframes s06-drift {
  50% { transform: translateY(-6px); }
}

/* Отступ задан от корпуса телефона, а не долей его ширины.

   Раньше стояло left: -50% / -47.1%: это позиция ЛЕВОГО края плашки, а
   зазор до телефона получался разностью с её собственной шириной. Плашки
   разной ширины — и зазоры вышли 3px, 15px и минус 22px, то есть «Orders»
   заезжала под корпус. Теперь left/right отсчитывается от ближней грани, и
   зазор одинаков независимо от того, насколько длинная в плашке цифра.

   56px — та же дистанция, что на образца (там 60–80px при том же корпусе). */
.s-06__float {   --s06-gap: 28px; }

/* Противоположная сторона у каждой плашки погашена явно: на узком экране
   они перевешиваются на другой бок, и без этих auto прежняя привязка
   осталась бы вместе с новой. */
.s-06__float--catalog {   top: 13%;   right: calc(100% + var(--s06-gap));   left: -16px; }
.s-06__float--rating {   top: 29%;   left: auto;   right: -16px; }
.s-06__float--orders {   top: 40%;     right: calc(100% + var(--s06-gap));   left: -16px; }

/* Размер подписи внутри плашки: на телефоне 11/15, с 601 — 12/16. */
.s-06__float-note {   font-size: 11px; line-height: 15px; }

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





/* --- Уважение к prefers-reduced-motion ------------------------------------
   Сброс в 00-base.css схлопывает анимации в последний кадр. У карточек
   заказов это opacity: 0 — без этого блока лента исчезла бы целиком.
   Оставляем статичную первую карточку, свечение и счётчик на первом значении. */
@media (prefers-reduced-motion: reduce) {
  /* Плашка остаётся видимой, просто без выезда: скрипт всё равно создаёт
     её и убирает, и прятать её тут значило бы показывать пустой экран. */
  .s-06__toast {
    animation: none !important;
    transform: none;
  }

  .s-06__float,
  .s-06__phone {
    animation: none !important;
    transform: none;
  }
}

/* --- Сцена вокруг телефона -------------------------------------------------
   Портирована с образца (pv-aurora / pv-rays / pv-orbit / pv-particle /
   pv-float-card). До неё телефон стоял в пустоте, и блок читался плоским —
   ровно то, на что была правка.

   Слои идут от дальнего к ближнему: сияние → лучи → кольца → орбиты →
   пылинки → плашки. Телефон стоит над всем этим на z-index: 3.

   Всё, что двигается, собрано на transform и opacity: сцена крутится
   постоянно, и любое свойство, дёргающее раскладку, тут стоило бы кадров.
   -------------------------------------------------------------------------- */
.s-06__stage {   position: relative; }

.s-06__phone {   position: relative;   z-index: 3; }

/* --- Сияние --- */
.s-06__aurora {
    position: absolute;
    z-index: 0;
    inset: -12% -18%;
  /* Плотность поднята: на кремовом фоне прежние 0.28/0.22 после блюра
     не читались вовсе — сцена выглядела пустой. */
    background: radial-gradient(ellipse 46% 38% at 32% 30%, rgba(61, 143, 99, 0.42) 0%, transparent 70%),
    radial-gradient(ellipse 40% 34% at 70% 68%, rgba(212, 163, 115, 0.34) 0%, transparent 70%);
    filter: blur(46px);
    animation: s06-aurora 14s ease-in-out infinite;
}

@keyframes s06-aurora {
  0%, 100% { transform: scale(1)    translate(0, 0);      opacity: 0.9; }
  50%      { transform: scale(1.08) translate(2%, -2%);   opacity: 1; }
}

/* --- Кольца-импульсы ---
   Расходятся из центра и гаснут. Три штуки с разбежкой в треть такта —
   получается непрерывная волна, а не три синхронных вспышки. */
.s-06__rings {   position: absolute;   z-index: 0;   inset: 0; }

.s-06__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46%;
    aspect-ratio: 1;
    border: 1px solid rgba(61, 143, 99, 0.30);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: s06-pulse 6s ease-out infinite;
}

.s-06__ring--2 {   animation-delay: 2s; }
.s-06__ring--3 {   animation-delay: 4s; }

@keyframes s06-pulse {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.6); }
  15%  { opacity: 0.85; }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(2.1); }
}

/* --- Орбиты ---
   Наклонённые кольца с точками на ободе. Точка держится за счёт вращения
   родителя, а не собственной анимации: так их фазы никогда не разъедутся.
   Контр-вращение на самой точке гасит её собственный поворот. */
.s-06__orbits {   position: absolute;   z-index: 0;   inset: 0; }

.s-06__orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(61, 143, 99, 0.16);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotateX(74deg);
}

.s-06__orbit i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-green-bright);
    box-shadow: 0 0 10px rgba(61, 143, 99, 0.9);
}

.s-06__orbit--1 {   --o: 39%;   width: 78%;   aspect-ratio: 1;   animation: s06-orbit 22s linear infinite; }
.s-06__orbit--2 {   --o: 48%;   width: 96%;   aspect-ratio: 1;   animation: s06-orbit 34s linear infinite reverse; }
.s-06__orbit--3 {   --o: 57%;   width: 114%;   aspect-ratio: 1;   animation: s06-orbit 48s linear infinite; }

.s-06__orbit i:nth-child(1) {   transform: translate(-50%, -50%) rotate(0deg)   translateX(var(--o, 50%)); }
.s-06__orbit i:nth-child(2) {   transform: translate(-50%, -50%) rotate(140deg) translateX(var(--o, 50%)); }
.s-06__orbit i:nth-child(3) {   transform: translate(-50%, -50%) rotate(255deg) translateX(var(--o, 50%)); }

@keyframes s06-orbit {
  from { transform: translate(-50%, -50%) rotateX(74deg) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(74deg) rotate(360deg); }
}

/* --- Пылинки ---
   Шесть точек, всплывающих вверх с разной задержкой. Позиции заданы явно:
   случайная россыпь тут читается лучше равномерной сетки. */
.s-06__motes {   position: absolute;   z-index: 1;   inset: 0; }

.s-06__motes span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(61, 143, 99, 0.7);
    animation: s06-mote 9s ease-in-out infinite;
}

.s-06__motes span:nth-child(1) {   top: 72%;   left: 14%;   animation-delay: 0s; }
.s-06__motes span:nth-child(2) {   top: 84%;   left: 33%;   animation-delay: 1.6s; }
.s-06__motes span:nth-child(3) {   top: 66%;   left: 82%;   animation-delay: 3.1s; }
.s-06__motes span:nth-child(4) {   top: 88%;   left: 68%;   animation-delay: 4.4s; }
.s-06__motes span:nth-child(5) {   top: 58%;   left: 8%;    animation-delay: 6s; }
.s-06__motes span:nth-child(6) {   top: 78%;   left: 91%;   animation-delay: 7.4s; }

@keyframes s06-mote {
  0%       { opacity: 0; transform: translateY(0) scale(0.6); }
  15%, 60% { opacity: 0.9; }
  100%     { opacity: 0; transform: translateY(-120px) scale(1); }
}

/* --- Стекло на плавающих плашках ------------------------------------------
   Плашки в блоке были и раньше — им не хватало не существования, а
   материала: сплошная заливка на фоне сцены читалась наклейкой. Теперь
   сквозь них видно сияние и орбиты, как на образца.
   -------------------------------------------------------------------------- */
.s-06__float {
  /* 62% белого перекрывали фон почти насухо, и стекло было не отличить от
     обычной плашки. На 44% сквозь него читается решётка — размытая, но
     узнаваемая, а это и есть то, ради чего стекло ставят. */
    background: rgba(255, 255, 255, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow: 0 10px 30px rgba(43, 38, 33, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .s-06__float { background: rgba(255, 255, 255, 0.94); }   /* без размытия — только глухая подложка */
}

/* --- Адаптив сцены --------------------------------------------------------
   Ниже 900px по бокам от телефона места нет: плашки уехали бы за край
   экрана, поэтому их убираем целиком, а не поджимаем. Сияние и кольца
   остаются — они держатся внутри сцены. */


/* Сцена декоративна целиком: при «меньше движения» она замирает, но не
   исчезает — статичный кадр остаётся осмысленным. */
@media (prefers-reduced-motion: reduce) {
  .s-06__aurora,
  .s-06__ring,
  .s-06__orbit,
  .s-06__motes span { animation: none !important; }

  .s-06__ring--1 { opacity: 0.5; }
  .s-06__ring--2,
  .s-06__ring--3 { opacity: 0; }
  .s-06__motes span { opacity: 0.7; }
}

/* Панель витрины (бургер, логотип AURA, корзина со счётчиком) снята вместе
   со своими анимациями. Заказ по-прежнему виден: он двигает плашку
   уведомления, выручку и число заказов — просто без отклика в корзине. */

@media (prefers-reduced-motion: reduce) {
  .s-06__toast { animation: none; }
}
[hidden] .s-06__toast-proto {   display: none; }


/* --- Решётка гириха --------------------------------------------------------
   Замена расходящимся кривым: они читались случайными царапинами по фону.
   Здесь вместо них фирменный мотив — тот же ромб, что лежит подложкой
   первого экрана, только собранный в решётку вокруг телефона.

   На каждый заказ по решётке идёт волна: ромбы вспыхивают кольцами от
   корпуса наружу. Задержку каждый ромб знает сам — она записана ему в
   --d при построении, и волна получается из одной анимации на всех.

   Маска гасит решётку к краям, иначе она читается обоями, а не подложкой.
   -------------------------------------------------------------------------- */
.s-06__lattice {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 340%;
    max-width: none;   /* сброс в 00-base.css зажимает svg до ширины родителя */
    aspect-ratio: 1;
    overflow: visible;
    transform: translate(-50%, -50%);
    pointer-events: none;
  /* Растушёвка отодвинута к краю: раньше решётка гасла раньше, чем
     начинаются плавающие плашки, и стеклу нечего было показывать —
     размытие пустого фона остаётся пустым фоном. */
    mask-image: radial-gradient(circle at 50% 50%,
              #000 22%, rgba(0, 0, 0, 0.5) 54%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%,
              #000 22%, rgba(0, 0, 0, 0.5) 54%, transparent 78%);
}

/* Цвет ромба идёт через currentColor: только так его можно переназначить
   для <use>. Класс на самом пути перебил бы стиль, заданный на <use>. */
/* Ромб умеет заливаться, а не только светиться контуром.

   Всё, что было до этого, крутилось вокруг обводки в 1px на прозрачности
   20% — такое на кремовом фоне не видно в принципе, сколько ни добавляй
   частоты. Залитая плитка — это форма, её видно. Заодно это честнее к
   мотиву: в настоящем герихе плитки залиты, а не вычерчены.

   Прозрачности сидят на самом ромбе, а не на группе: групповая opacity
   зажимала бы и активное состояние тоже, и вспышке некуда было расти. */
.s-06__diamond {
    fill: currentColor;
    fill-opacity: 0;
    stroke: currentColor;
    stroke-opacity: 0.11;
    stroke-width: 1;
}

.s-06__lattice-grid {   color: var(--c-gold); }

/* --- Блик ------------------------------------------------------------------
   Медленная полоса света, идущая по решётке наискось. Нужна затем, что
   между заказами проходит пять-восемь секунд, и без неё фон всё это время
   стоит мёртвым — волна по событию есть, а жизни нет.

   Двигается маска на одном элементе, а не 172 ромба по отдельности: смена
   mask-position уходит в композитор, перерисовки путей не происходит.
   -------------------------------------------------------------------------- */
.s-06__sheen {
    color: var(--c-green-bright);
    opacity: 0.45;
  /* Две полосы в одной маске, а не два элемента: цикл тот же, а проход
     света случается вдвое чаще. Плюс сам цикл укорочен — одиннадцать
     секунд на проход читались как «ничего не происходит». */
    mask-image: linear-gradient(112deg,
              transparent 14%, #000 22%, #000 26%, transparent 34%,
              transparent 62%, #000 70%, #000 74%, transparent 82%);
    -webkit-mask-image: linear-gradient(112deg,
              transparent 14%, #000 22%, #000 26%, transparent 34%,
              transparent 62%, #000 70%, #000 74%, transparent 82%);
    mask-size: 300% 300%;
    -webkit-mask-size: 300% 300%;
    animation: s06-sheen 6.5s linear infinite;
}

@keyframes s06-sheen {
  from { mask-position: 120% 120%; -webkit-mask-position: 120% 120%; }
  to   { mask-position: -60% -60%; -webkit-mask-position: -60% -60%; }
}

/* --- Волна заказа ----------------------------------------------------------
   Идёт снаружи внутрь, от той стороны, с которой пришёл заказ, и гаснет на
   корпусе. Раньше расходилась от телефона наружу — то есть рассказывала
   ровно обратное тому, что написано на плашке рядом.

   Задержку каждый ромб получает при заказе: она считается как проекция на
   направление прилёта, поэтому фронт идёт полосой, а не кольцом.
   -------------------------------------------------------------------------- */
.s-06__lattice-grid.is-rippling .s-06__diamond {
    animation: s06-ripple 0.62s ease-out both;
    animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes s06-ripple {
  0%   { color: var(--c-gold);         fill-opacity: 0;    stroke-opacity: 0.11; }
  28%  { color: var(--c-green-bright); fill-opacity: 0.55; stroke-opacity: 0.95; }
  100% { color: var(--c-gold);         fill-opacity: 0;    stroke-opacity: 0.11; }
}

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

   Правило стоит ПОСЛЕ волны намеренно: у них одинаковая специфичность, и
   ромб, попавший под искру во время волны, должен доиграть искру, а не
   мигнуть дважды.
   -------------------------------------------------------------------------- */
.s-06__diamond.is-spark {
    animation: s06-spark 1.7s ease-out both;
}

@keyframes s06-spark {
  0%   { color: var(--c-gold);         fill-opacity: 0;    stroke-opacity: 0.11; }
  22%  { color: var(--c-green-bright); fill-opacity: 0.42; stroke-opacity: 0.85; }
  100% { color: var(--c-gold);         fill-opacity: 0;    stroke-opacity: 0.11; }
}

@media (prefers-reduced-motion: reduce) {
  .s-06__diamond.is-spark,
  .s-06__lattice-grid.is-rippling,
  .s-06__lattice-grid.is-rippling .s-06__diamond,
  .s-06__sheen { animation: none; }
}


/* --- Телефонные правила без базового двойника --------------------------- */
.s-06__lattice {
  display: none;
}
.s-06__orbit--3 {
  display: none;
}

/* --- Адаптив: снизу вверх ---------------------------------------------------
   Всё выше — телефонные значения. Здесь они дорастают до широкого экрана.
   Блоки идут строго по возрастанию порога: правила равной силы, побеждает
   последнее подошедшее. Пороги смещены на пиксел (601 вместо 600): при
   max-width граница входила в узкий диапазон, при min-width должна войти
   в широкий. -------------------------------------------------------------- */

@media (min-width: 601px) {
  .s-06__inner {
    gap: 56px;
  }
  .s-06__numeral {
    font-size: 68px;
    letter-spacing: -2.4px;
  }
  .s-06__title {
  }
  .s-06__visual {
    /* Ниже 600 сцене добавляют боковое поле; ноль здесь — то, чем его снять. */
    padding-inline: 0;
  }
  .s-06__phone {
    border-radius: 48px;
  }
  .s-06__screen {
    border-radius: 44px;
  }
  .s-06__float {
    gap: 0;
    padding: 10px 13px;
    border-radius: 14px;
    min-width: 144px;
  }
  .s-06__float-label {
    font-size: 10px;
    letter-spacing: 0.07em;
  }
  .s-06__float-value {
    font-size: 17px;
    line-height: 21px;
  }
  .s-06__float--catalog {
    top: 20.3%;
    left: auto;
  /* Плашка домена шире прежней плашки выручки и налезала на заголовок:
     подтягиваем её ближе к телефону. */
    right: calc(100% + 12px);
  }
  .s-06__float--rating {
    top: 46.5%;
    left: calc(100% + var(--s06-gap));
    right: auto;
  }
  .s-06__float--orders {
    top: 79%;
    left: auto;
  }
  /* Подпись — третий уровень плашки: капс 10, значение 17, пояснение 12.
     С inherit выходило 16 (от body) на строке 15: строки слипались, и по
     массе подпись догоняла значение. */
  .s-06__float-note {
    font-size: 12px;
    line-height: 16px;
  }
}

@media (min-width: 901px) {
  /* Ниже 900 по бокам от телефона места нет, и сцена раздевается: решётка и
     третья орбита убираются целиком. Здесь они возвращаются. */
  .s-06__lattice { display: block; }
  .s-06__orbit--3 { display: block; }

  .s-06__inner {
    /* row выписан явно: ниже 900 колонки встают столбиком, и снять это на
    широком экране можно только тем, что написано здесь. */
    flex-direction: row;
    align-items: center;
  }
  .s-06__text {
    /* Потолок ширины по умолчанию снят: в стопке колонка получает свой,
    и вернуть её к обычной ширине выше 900 можно только этой строкой. */
    max-width: none;
    width: 460px;
  }
  .s-06__block {
    max-width: 480px;
  }
  .s-06__numeral {
    font-size: 80px;
    letter-spacing: -3px;
  }
  /* «A professional storefront. / Ready in minutes.» в колонке 460 при 48
     ложился в три строки на всех ширинах 901–1280. Колонку не расширить:
     справа телефон с плашками. Две строки держатся с 38.5 — здесь 37. */
  .s-06__title {
  }
  .s-06__visual {
    min-height: 640px;
  }
  .s-06__float {
    --s06-gap: 32px;
  }
}

@media (min-width: 1281px) {
  .s-06__inner {
    gap: 80px;
  }
  .s-06__text {
    width: 520px;
  }
  /* Заголовку — вся ширина колонки (было 480): две строки при 42. При
     прежних 56 в любой колонке этой сетки выходило три. */
  .s-06__block {
    max-width: 520px;
  }
  .s-06__numeral {
    font-size: 96px;
    letter-spacing: -3.8px;
  }
  .s-06__title {
  }
  /* СЦЕНА СДВИНУТА ВПРАВО, чтобы свес карточки не лез в заголовок.

     Карточка домена висит слева от корпуса и выступает на 225 точек: сама
     213 плюс зазор 12. На 1281 контейнеру остаётся 1041, из них 520 берёт
     текстовая колонка и 80 — промежуток между колонками. Свесу оставалось
     140, и он заходил на слово «Ready» на 18 точек.

     Здесь стояло margin-right: 40px — корпус был отодвинут от правого края
     как раз на те 60, которых свесу не хватало. Теперь наоборот: сцена
     прижимается правее, и между карточкой и текстом остаётся 12 точек.

     За правый край это не выводит: на 1281 корпус кончается на 1091 при
     внутренней кромке контейнера 1161, то есть 70 точек запаса. На 1440 и
     шире запас 150. */
  .s-06__stage {
    margin-right: -20px;
  }
  .s-06__float {
    display: flex;
    --s06-gap: 56px;
  }
  /* Справа от корпуса на 1281–1360 места меньше, чем 56 + 144: плашка
     выходила за край секции и резалась. Зазор сжимается до ~15 на 1281 и
     доходит до 56 к ~1360. */
  .s-06__float--rating {
    left: calc(100% + clamp(12px, 50vw - 625px, 56px));
  }
}

/* Плашки живут только с 1281. Ниже их нет ни на одной ширине. На 1121–1280
   рядом с корпусом при колонке 460 нет места на обе: левая наезжала на
   заголовок, правая резалась краем секции.

   Порог когда-то стоял на 761: считалось, что при одной колонке по бокам
   от корпуса снова просторно. Считалось по старым плашкам шириной 154.
   Сейчас в них домен и «Custom domain connected» — 213 и 223 точки, плюс
   зазор до корпуса. На 768 контейнеру остаётся 688, корпус берёт 280 и
   стоит посередине: слева свободно 164. Плашка в 223 туда не влезала и
   уходила за левый край экрана на четырнадцать точек — её было видно
   обрезанной ровно по краю.

   Ужать их до 150 значит выбросить из них текст, ради которого они и
   стоят. Поэтому на планшете сцена раздевается так же, как на телефоне:
   остаётся один корпус. Возвращаются плашки там, где рядом с корпусом
   честно есть место на обе — с 1281.

   Прежде здесь плашки прижимались к корпусу на -18px. При z-index телефона
   выше их собственного это давало не «прижались», а «скрылись за телефоном»:
   от карточки оставалась кромка в пару пикселей. */


/* Пояснение под значением — своя строка, а не сосед справа */
.s-06__float-body .s-06__float-note {
    display: block;
    color: var(--s06-muted);
  /* Две ровные строки, а не «Encrypted, built / in». */
    text-wrap: balance;
}

/* Адрес не рвём по дефису: было «aura- / ritual.com». */
.s-06__float-value { white-space: nowrap; }


/* Знак плюса. Цифровая гарнитура тут ни при чём — у неё диапазон только
   цифры, — плюс рисует Almarai, и в ней перекладина стоит высоко, отчего
   знак читается перевёрнутым крестом. Отдаём его системному шрифту. */
/* Здесь стояло правило для знака «плюс» перед суммой: цифры набираются
   «Tajiro Figures», и в этой подрезанной гарнитуре плюс нарисован узким,
   с высокой перекладиной — на экране читался перевёрнутым крестом, поэтому
   ему подставлялся системный шрифт. Суммы в плашке больше нет. */

/* ---------------------------------------------------------------
   css/free-basic/04-pillars.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — Free Basic · 04 · Опоры: магазин, шаги, товары, свои продукты,
   маркетинг

   ЧЕТЫРЕ секции, а не пять. Столп «Ваш магазин» из этого файла ушёл целиком:
   он подключается партиалом главной, и стили у него общие — см.
   css/shared/pillar-store.css. Оставшиеся живут на одних и тех же деталях:
   сплит в две колонки, корпус телефона, полка товаров, карточки шагов.

   ЗАГЛУШЕК ОБЛОЖЕК ЗДЕСЬ БОЛЬШЕ НЕТ. В прототипе на месте снимков стояли
   цветные прямоугольники, и какое-то время они жили тут перекрашенными — с
   градиентом в зелень и гирихом поверх. Сняты все: там, где снимок есть, он
   и стоит, а там, где его не предполагалось (две строки конструктора),
   полоска обещала картинку, которой не бывает. Остался ровно один случай —
   экран телефона в маркетинге, где кадр ещё не нарисован; он держит фактуру
   сам, см. .fb-phone__screen--reel.
   ========================================================================== */

/* --- Сплит в две колонки ---------------------------------------------------- */
.fb-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}

.fb-pillar__actions { margin-top: 26px; }


/* --- Телефон ---------------------------------------------------------------------
   Остался ровно один: в маркетинге, с лентой коротких видео.

   ВИТРИНЫ ЗДЕСЬ БОЛЬШЕ НЕТ. Столп «Ваш магазин» какое-то время собирался
   на этих же классах — своя сцена с телефоном, своя витрина, свои плашки.
   Затея была неверная с самого начала: сцена главной живёт не на корпусе, а
   на всём, что вокруг него — сиянии, решётке гириха с бегущей волной,
   кольцах, орбитах, пылинках и ленте заказов, которую ведёт скрипт. Собрать
   это вторым способом нельзя: похоже — не значит так же, и при первой правке
   главной две сцены разойдутся.

   Поэтому столп теперь подключается партиалом главной, а файлы переехали в
   shared/ — см. css/shared/pillar-store.css. Здесь от той попытки не
   осталось ничего, кроме корпуса, который нужен второй секции.

   Значения корпуса (280 × 572, радиус 40, отступ экрана 4, свечение в
   box-shadow) взяты оттуда же и не подобраны заново.
   -------------------------------------------------------------------------- */
.fb-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  /* Свечение корпуса выходит за его габарит на три десятка пикселей. Без
     поля оно упирается в край контейнера и срезается ровной линией. */
    padding-inline: 18px;
}

.fb-stage__inner {
    position: relative;
    width: min(280px, 100%);
}

.fb-phone {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 280 / 572;
    border-radius: 40px;
    background: #080808;
  /* Базовое свечение живёт в box-shadow, анимация лишь качает его силу —
     при отключённом движении подсветка остаётся, просто перестаёт дышать. */
    box-shadow: 0 0 0 1px rgba(212, 163, 115, 0.22),
                0 0 30px -8px rgba(212, 163, 115, 0.40),
                0 34px 70px -24px rgba(43, 38, 33, 0.50);
    animation: fb-phone-glow 6s ease-in-out infinite;
}

@keyframes fb-phone-glow {
  50% {
    box-shadow: 0 0 0 1px rgba(212, 163, 115, 0.45),
                0 0 58px -4px rgba(212, 163, 115, 0.65),
                0 34px 70px -24px rgba(43, 38, 33, 0.50);
  }
}

.fb-phone__screen {
    position: absolute;
    inset: 4px;
    overflow: hidden;
    border-radius: 36px;
}

.fb-phone__shot {
    width: 100%;
    height: 100%;
    object-fit: cover;
  /* Постер ещё и фоном, не только атрибутом. Атрибут показывает кадр
     ТОЛЬКО до начала воспроизведения: как только браузер решает играть, он
     постер снимает — и если первый кадр ещё не расшифрован, в рамке
     телефона стоит чёрный прямоугольник. На телефоне по медленной сети
     это секунды. Фоном кадр лежит под видео всегда и виден в любую такую
     паузу: пока грузится, если автовоспроизведение запрещено, если mp4
     вовсе нет — как в лёгком цельном файле, куда ролик не вшивается. */
    background: url(../images/people/ai-team-poster.webp) center / cover no-repeat;
}

/* --- Экран как лента коротких видео ------------------------------------------
   Второй вид экрана того же телефона: витрина в 01, ролик здесь.

   Своя подложка под кадром — та же пара «градиент плюс гирих», что была у
   прежних заглушек. Она видна ровно до тех пор, пока в проекте нет кадра
   заливского инфлюенсера: alt у снимка пустой, значка битой ссылки не
   появляется, и экран читается фактурой, а не поломкой. ------------------- */
.fb-phone__screen--reel {
    background:
      url("../images/decor/girih-pattern.svg") center / 220px repeat,
      linear-gradient(150deg, var(--c-ink-surface-2) 0%, var(--c-green) 100%);
    background-blend-mode: soft-light, normal;
}

/* Интерфейс лежит прямо на кадре, без затемнения: кадр может оказаться и
   светлым, и тёмным, поэтому читаемость держится на тенях. Их три — узкая
   под контур глифа, средняя под пятно, широкая под ореол. */
.fb-reel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 26px 17px 26px 18px;
    color: var(--c-on-dark);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75),
                 0 2px 8px rgba(0, 0, 0, 0.6),
                 0 0 20px rgba(0, 0, 0, 0.45);
}

/* Иконки без счётчиков. Ширина колонки задана иконкой — подписей под ними
   нет вовсе: любые числа лайков пришлось бы выдумать. */
.fb-reel__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    align-self: flex-end;
    width: 26px;
    margin-top: auto;
    margin-bottom: 26px;
}

/* text-shadow не красит SVG — иконкам нужна своя тень. Рейл висит на
   середине кадра, где подложки нет вовсе. */
.fb-reel__rail img {
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65))
            drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

/* Подпись под роликом — одной строкой, как она и была написана в шапке
   плашки. Значок проверенного аккаунта в конце, а не после имени: имя тут
   в середине строки, и значок за ним разрывал бы её пополам. */
.fb-reel__meta {
    font-size: 13px;
    font-weight: 700;
    line-height: 19px;
}

/* Значок в потоке строки, а не флекс-соседом: во флексе он при переносе
   уходил на третью строку один, отдельно от текста, к которому относится. */
.fb-reel__meta img {
    display: inline;
    margin-left: 5px;
    vertical-align: -2px;
}

.fb-reel__progress {
    margin-top: 14px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.28);
}

/* Заполнение неподвижно: ролика под ним нет, и бегущая полоса обещала бы
   воспроизведение, которого не будет. */
.fb-reel__progress > span {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: 2px;
    background: var(--c-on-dark);
}


/* --- 02 · Шаги ----------------------------------------------------------------
   Секция светлая (крем), поэтому карточки белые с волосяной кромкой.
   Столбиком, а не рядом: у последовательности есть направление. --------- */
/* --- 02 · Очередь шагов ------------------------------------------------------
   Карточки приезжают одна за другой: этим занимается общая система
   появления — в разметке у списка стоит .reveal-set. Своего здесь две
   вещи.

   1. Очередь: карточки едут одна за другой с шагом 200ms. Общая система
      появления тут не работает — она на сайте выключена, — поэтому у
      блока свой крошечный скрипт, js/free-basic/steps.js.

   2. Связка. Вертикальная линия идёт от номера первого шага к номеру
      третьего и прочерчивается сверху вниз вместе с карточками. Видно её
      только в зазорах: карточки непрозрачные и лежат поверх. Именно она и
      превращает три плашки в последовательность. */
/* --- 02 «Три шага»: шапка по центру ------------------------------------------
   Шаги идут в строку, кнопка под ними по центру — заголовок у левого края
   оставался единственным, что держится за край, и блок читался съехавшим.
   По центру он собирается вокруг одной оси: номер, надзаголовок, фраза,
   лид, три карточки, кнопка.

   Текст внутри карточек при этом остаётся слева: центрировать абзацы в
   три строки нельзя, рваный левый край читается медленнее. Центрируется
   только шапка. ---------------------------------------------------------- */
.fb-how .fb-split__text {
    text-align: center;
}

/* Надзаголовок — пилюля с заливкой: её центрирует не text-align, а
   собственные поля, потому что она блочная. */
.fb-how .fb-label { margin-inline: auto; }

/* У заголовка и лида свой потолок ширины (15em и 44em), поэтому одного
   text-align мало: на 601–900 коробка заголовка уже колонки и стояла у
   левого края — строка съезжала от оси пилюли на ~50px. */
.fb-how .fb-head__title,
.fb-how .fb-head__lead { margin-inline: auto; }


.fb-steps {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

/* СВЯЗКИ МЕЖДУ ШАГАМИ НЕТ.

   Здесь шла вертикальная полоса через центры номеров: она пряталась под
   карточками и была видна только в зазорах — по 14 точек между соседями.
   В ряду с 901 её и так снимали, потому что от неё оставались две чёрточки
   непонятно зачем; столбиком выходило то же самое, только обрывков больше.

   Порядок шагов держат номера в кружках — 1, 2, 3, — и они его держат без
   посторонней помощи. Вместе с полосой убрана и анимация её прочерчивания.

   Исходное состояние очереди. Классы ставит js/free-basic/steps.js и
   только после проверок — без скрипта ничего не спрятано. */
.fb-steps.is-armed > .fb-step {
    opacity: 0;
    translate: 0 12px;
}

/* Появление. Карточка едет 500ms, следующая стартует через 200 — на три
   карточки это 900ms от первой до последней: очередь читается, а хвост не
   успевает надоесть. */
.fb-steps.is-live > .fb-step {
    animation: fb-step-in 500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.fb-steps.is-live > .fb-step:nth-child(2) { animation-delay: 200ms; }
.fb-steps.is-live > .fb-step:nth-child(3) { animation-delay: 400ms; }

@keyframes fb-step-in {
  from { opacity: 0; translate: 0 12px; }
  to   { opacity: 1; translate: none; }
}

.fb-step {
    position: relative;
    padding: 24px;
    border: 1px solid var(--c-line-soft);
    border-radius: 14px;
    background: var(--c-surface);
    box-shadow: var(--sh-card);
}

/* Номер — зелёная плашка. Радиус 6, а не 9 из прототипа: мелкие плашки в
   системе скруглены на --r-card. */
.fb-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 16px;
    border-radius: var(--r-card);
    background: var(--c-green);
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--c-on-dark);
}

.fb-step__title { margin-bottom: 8px; }

.fb-step__text {
    font-size: 15px;
    line-height: 24px;
    color: var(--c-text-muted);
}

.fb-step__tag {
    display: inline-block;
    margin-top: 14px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--c-green-mist);
    font-size: 12px;
    font-weight: 700;
    color: var(--c-green-text);
}


/* --- 04 · Конструктор ----------------------------------------------------------
   Две строки прототипа, набранные шагами. Оболочка — та же стеклянная
   плашка .fb-panel и та же адресная строка .fb-preview__top, что у панели
   первого экрана: одна рама в двух секциях, а не два похожих компонента.

   Внутри две части: опрос и то, что из него вышло. Обводок в них нет
   намеренно — см. ниже. -------- */
.fb-build__qs {
    display: grid;
    padding: 0;
}

/* Карточек как отдельных плашек здесь нет.

   Внутри стеклянной панели они давали третий контур подряд: рама панели →
   рамка карточки → форма пилюли, и панель читалась сеткой линий вместо
   двух понятных частей. Ни рамки, ни своей подложки, ни скругления, ни
   зазора. Части разделяет одна волосинка — та же, что отделяет адресную
   строку сверху. */
.fb-build__q {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fb-build__q + .fb-build__q { border-top: 1px solid var(--c-line-soft); }

/* --- Верхняя часть: сам опрос ----------------------------------------------
   Пять полей с ответами. В покое они заполнены и зелёные — опрос пройден,
   панель показывает результат. Это базовое состояние, и без скрипта
   страница остаётся ровно такой.

   Со скриптом поля сначала пустеют (.is-armed), а когда панель входит в
   кадр (.is-live), ответы набираются по очереди: в поле бежит текст с
   курсором на конце, дописался — поле зеленеет, очередь уходит
   следующему. Ровно то, о чём говорит подпись под ними: «Answer a few
   prompts, get a ready product».

   Как набирается ТЕКСТ, а не полоса: строка лежит в поле целиком, а
   открывается маской — clip-path режет её справа и отступает ступенями.
   Ступеней 12 на все поля, по числу знаков в самом длинном; на коротких
   шаг выходит крупнее, но на глаз это тот же машинописный ритм.

   Маской, а НЕ шириной строки. Ширина меняет раскладку: пустое поле
   сжималось бы в огрызок, и весь ряд ехал бы вправо по мере набора. Маска
   раскладку не трогает — поле с первого кадра стоит на своём месте и
   своей ширины.

   Курсора нет. Он был — чёрточкой на конце набранного, — но в поле высотой
   26px и при тексте в 11px читался не курсором, а мусором: короткий штрих
   рядом с буквами того же роста. Набор виден и без него.

   Такт — 0.75s на поле, пять полей укладываются в 3.75s. Набор занимает
   0.6 из них, остаток — пауза перед следующим: без неё очередь читается
   бегущей строкой, а не ответами. */
/* НА ТЕЛЕФОНЕ ПИЛЮЛЬ НЕТ. В узкой панели пять штук ложатся в три ряда и
   занимают больше места, чем подпись под ними, ради которой панель и
   стоит. Набор текста в них при этом не виден: на телефоне панель входит
   в кадр целиком, и очередь проходит до того, как на неё посмотрят.
   Остаётся подпись — она говорит ровно то же словами. */
.fb-build__steps {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px 18px 0;
}

.fb-build__step {
    position: relative;
    display: flex;
    align-items: center;
    height: 26px;
    padding-inline: 11px;
    border-radius: var(--r-pill);
    background-color: var(--c-green-mist);
}

/* Строка ответа. nowrap и overflow: hidden — на них и держится набор:
   поле обрезает то, что ещё не напечатано. */
.fb-build__step span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
  /* Поле размечено тегом <i>, а он курсивный по умолчанию. Пока поля были
     пустыми, это не имело значения; с текстом наклон срезался обрезкой —
     у последней буквы верхний правый угол выходил за коробку строки. */
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: 0.1px;
    color: var(--c-green-text);
}

.fb-build__step:nth-child(1) { --t: 0s; }
.fb-build__step:nth-child(2) { --t: 0.75s; }
.fb-build__step:nth-child(3) { --t: 1.5s; }
.fb-build__step:nth-child(4) { --t: 2.25s; }
.fb-build__step:nth-child(5) { --t: 3s; }

/* --- Взведённое состояние: поля пустые ------------------------------------- */
.fb-build.is-armed .fb-build__step {
    background-color: color-mix(in srgb, var(--c-green) 8%, transparent);
}

.fb-build.is-armed .fb-build__step span {
    clip-path: inset(0 100% 0 0);
}

/* --- Набор ------------------------------------------------------------------ */
.fb-build.is-live .fb-build__step {
  /* Заливка возвращается через 0.6s после начала своей очереди — ровно
     когда строка дописана. */
    animation: fb-build-lit 0.25s linear both;
    animation-delay: calc(var(--t) + 0.6s);
}

.fb-build.is-live .fb-build__step span {
    animation: fb-build-type 0.6s steps(12, end) var(--t) both;
}

@keyframes fb-build-type {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes fb-build-lit {
  to { background-color: var(--c-green-mist); }
}

/* --- Нижняя часть: что получилось ------------------------------------------
   Кадр вставлен в панель с полем, а не во всю её ширину.

   Во всю ширину не выходит: у стеклянной панели рамка в 1px прозрачная и
   работает распоркой — по ней рисуется кант. Обрезка панели идёт по
   внутреннему краю, то есть кадр упирается в этот кант и вдоль снимка
   тянется светлая полоска в пиксель. Читается браком печати, хотя это
   кромка материала.

   Поле 18px — то же, что у пилюль опроса сверху и у подписи снизу, так что
   кадр встаёт на общую вертикаль панели. Скругление 10: мельче панельных
   18, как и положено вложенному объекту.

   Обрезка чуть ниже середины — у товарных снимков предмет стоит в нижних
   двух третях. */
.fb-build__shot {
    display: block;
    height: 128px;
    margin: 16px 18px 0;
    border-radius: 10px;
    overflow: hidden;
}

.fb-build__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
}

.fb-build__body {
    display: grid;
    gap: 3px;
  /* Сверху столько же, сколько снизу: пилюль над подписью на этой ступени
     нет, и поле в 14 читалось бы приплюснутым. С 601 они возвращаются, и
     поле сжимается обратно. */
    padding: 18px;
}

.fb-build__say {
    font-size: 17px;
    line-height: 25px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--c-text);
}

/* Подпись под строкой — мельче и приглушённее: она поясняет, а не
   объявляет. */
.fb-build__ask {
    font-size: 14px;
    line-height: 21px;
    color: var(--c-text-muted);
}


/* --- 03 · Полка товаров --------------------------------------------------------
   В прототипе стоит одной колонкой слева от текста, поэтому карточка
   горизонтальная не нужна: полка узкая и карточки идут друг под другом.

   ПОЛКА ЕДЕТ. Приём и все значения времени взяты у каталога в 07 главной;
   подбирать их заново было нечего. Своё здесь только два числа: высота
   карточки и число шагов. Общего с главной ровно столько, сколько можно
   разделить, — скрипт: он один на две страницы, js/shared/roll.js.

   Keyframes общими быть не могут: CSS не умеет цикл, и число шагов
   приходится выписывать руками. У главной их шесть, здесь три.
   -------------------------------------------------------------------------- */
.fb-roll {
  /* Шаг и высоту карточки меряет js/shared/roll.js и кладёт сюда же — в
     --roll-step и --roll-card. Числа ниже нужны только на первый кадр, до
     того как скрипт отработал: карточка тянется за содержимым, и её высота
     гуляет от 145 на широкой колонке до двух с лишним сотен на узкой. */
    --roll-step: 161px;
    --roll-card: 145px;
  /* Карточек в окне. Было два — на паузе полка показывала две штуки, и
     рядом с текстом в шесть строк это читалось обрезком, а не полкой.
     Три — как у каталога главной, где в окне пять строк. */
    --roll-seen: 3;
  /* Какая карточка стоит в полосе фокуса, считая сверху. Была верхняя, и
     при двух карточках это работало. При трёх — нет: верхняя кромка окна
     растворена на 42px, и подсвеченная карточка оказывалась единственной
     полупрозрачной в окне. Взгляд шёл на среднюю, чёткую, а зелёная цена
     горела на туманной. Полоса переехала на середину — как у каталога
     главной, где подсвечена третья строка из пяти. Это же число знает
     скрипт: data-roll-focus в разметке. */
    --roll-focus: 1;

    position: relative;
    height: calc(var(--roll-step) * var(--roll-seen));
    overflow: hidden;
  /* Края растворяются: без маски карточки обрубались бы по прямой, и лента
     читалась бы обрезанным списком, а не потоком без конца.

     Растушёвка в ПИКСЕЛЯХ, а не в процентах. При процентах она росла бы
     вместе с окном и съедала бы тем больше, чем окно выше.

     Двадцать точек на телефоне. У каталога главной кромка вчетверо
     шире, но там в окне пять строк и растворяются крайние из пяти. Здесь
     строк три — ровно один набор, — и широкая кромка съела бы треть
     показанного. С 601, где в окне карточки, кромка возвращается к
     прежним сорока двум. */
    mask-image: linear-gradient(180deg,
              transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    -webkit-mask-image: linear-gradient(180deg,
              transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}

/* Ход появляется только вместе с копиями набора: без них лента уехала бы в
   пустоту. Класс ставит скрипт после клонирования. */
.fb-roll__track.is-live {
    animation: fb-roll 12s cubic-bezier(0.4, 0.08, 0.3, 1) infinite;
}

/* Ход шагами, а не сплошной прокруткой. При непрерывной прокрутке карточка
   совпадает с полосой фокуса ровно на мгновение и тут же уезжает —
   подсветке не на чем сойтись. Здесь лента идёт ~2,5 s и стоит ~1,5 s:
   доля хода к паузе та же, что на главной, только шагов втрое меньше и
   такт втрое короче — 4 s на карточку в обоих случаях.

   Отсчёт от ВТОРОГО набора, отсюда −3 в первом шаге: если поставить в
   полосу первую карточку первого набора, над ней в окне не окажется
   ничего. */
@keyframes fb-roll {
  0%,     12%     { transform: translateY(calc(var(--roll-step) * -3)); }
  33.33%, 45.33%  { transform: translateY(calc(var(--roll-step) * -4)); }
  66.67%, 78.67%  { transform: translateY(calc(var(--roll-step) * -5)); }
  100%            { transform: translateY(calc(var(--roll-step) * -6)); }
}

/* Дорожка — поток из трёх наборов подряд. Зазор между наборами тот же, что
   внутри набора, иначе на стыке лента дёрнется. */
.fb-roll__track {
    display: grid;
  /* На телефоне строки стоят вплотную и разделены волосяной линией, как в
     каталоге главной; зазор возвращается вместе с карточками, с 601. */
    gap: 0;
}

/* --- Карточка в полосе фокуса ------------------------------------------------
   Зеленеет цена, чуть подаётся обложка и по карточке идёт зелёный тинт
   слева — тот же градиент, что у полосы фокуса на главной.

   ЖИВЁТ ОН НА КАРТОЧКЕ, А НЕ ОТДЕЛЬНОЙ ПЛАШКОЙ, и это принципиально. У
   главной полоса лежит ПОД строками: строки прозрачные, тинт виден сквозь
   них, и полоса может стоять на месте. Здесь карточки непрозрачные, и
   такую же полосу пришлось бы класть поверх — а она живёт по своим часам,
   отдельно от хода ленты, и зелёное приходило на карточку, которая ещё не
   доехала до середины.

   Класс is-focus ставит js/shared/roll.js по ФАКТИЧЕСКОМУ положению
   дорожки. Значит, подсветка не может опередить карточку: она и есть
   карточка. Блика по полосе здесь нет по той же причине — ему нужна своя
   дорожка времени. */
.fb-prod__shot,
.fb-prod__price { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }

.fb-prod {
    position: relative;   /* контекст для блика */
    transition: background-image 0.45s ease;
}

.fb-prod.is-focus {
    background-image: linear-gradient(90deg,
              rgba(61, 143, 99, 0.10),
              rgba(61, 143, 99, 0.02) 62%,
              transparent);
}

/* Блик по карточке — тот же приём, что у полосы фокуса на главной, только
   дорожка времени у него не своя, а карточкина: анимация висит на классе
   is-focus, а его ставит скрипт по фактическому положению ленты. Класс
   появился — блик пошёл; уехала карточка — класс снялся, и блик снялся с
   ней. Разъехаться им теперь негде.

   ЗАДЕРЖКА 1.1s ОБЯЗАТЕЛЬНА. Класс is-focus скрипт ставит не в момент
   остановки, а когда карточка накрывает точку замера — то есть примерно за
   1.15 секунды до конца хода. Без задержки блик шёл бы по едущей карточке
   и гас ровно тогда, когда она встаёт на место. Со сдвигом он приходится
   на паузу: карточка стоит в полосе 1.44 секунды из такта в четыре, блик
   занимает 1.3 из них. */
.fb-prod::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(100deg,
              transparent 40%, rgba(61, 143, 99, 0.26) 50%, transparent 60%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
}

.fb-prod.is-focus::after {
    animation: fb-prod-sweep 1.3s ease-out 1.1s;
}

@keyframes fb-prod-sweep {
  0%   { opacity: 0; background-position: -60% 0; }
  12%  { opacity: 1; }
  68%  { opacity: 1; }
  100% { opacity: 0; background-position: 160% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-prod.is-focus::after { animation: none; }
}

.fb-prod.is-focus .fb-prod__shot { transform: scale(1.06); }
.fb-prod.is-focus .fb-prod__price { transform: scale(1.06); transform-origin: left center; }

@media (prefers-reduced-motion: reduce) {
  /* Лента останавливается, но окно остаётся окном: показываем первые
     карточки от начала набора, а не случайный кадр посреди прокрутки. */
  .fb-roll__track { animation: none !important; transform: none; }
  .fb-roll__focus { display: none; }
  .fb-prod.is-focus .fb-prod__shot,
  .fb-prod.is-focus .fb-prod__price { transform: none; }
}

/* Все строки набора — по самой высокой карточке (1fr): скрипт ленты
   меряет первую, и при описаниях разной длины (на ~1085–1165 одно в
   строку, другое в две) окно отрезало низ третьей — цену и рейтинг. */
.fb-shelf {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    gap: 0;
}



/* Карточка горизонтальная: обложка слева, текст справа. Во всю ширину
   снимок в 3:2 поднимал карточку почти на 400 px, и три таких не вставали
   рядом с текстовой колонкой. Столбец обложки фиксированный, а не долей:
   полка живёт в трёх разных ширинах (одна колонка, две, снова одна), и при
   доле обложка в каждой получалась своего размера. */
.fb-prod {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    overflow: hidden;
  /* КРОМКИ НЕТ ВОВСЕ, и это не упущение. Волосяная линия в 1px на белом
     фоне карточки не видна, а вдоль обложки слева читается белой полосой
     между фотографией и краем — снимок как будто в паспарту. Снаружи она
     тоже мешала: карточки стоят стопкой в 16px, и на таком расстоянии
     линия работала границей между ними.

     Форму карточки держит тень ниже. Её первый слой для того и нужен:
     волосяная подложка в 1px очерчивает край не хуже рамки, но не режет
     фотографию. */
    border-radius: 14px;
    background: var(--c-surface);
  /* Тень СВОЯ, а не общая --sh-card. У общей второй слой идёт без
     отрицательного разлёта: 0 12px 32px во все стороны. На отдельно
     стоящей карточке это незаметно, а здесь карточки стоят стопкой с
     зазором в 16px — тень ложилась ровно в зазор плотным пятном с чёткой
     верхней кромкой, и между карточками читалась полоса.

     Здесь разлёт отрицательный и большой: пятно стартует на 22px уже
     карточки, то есть гаснет задолго до соседней. Плотность снижена с 0.30
     до 0.20 — на белёсой секции карточка и так почти белая, и тень при
     прежней плотности оставалась заметнее самой карточки. */
    box-shadow: 0 1px 2px rgba(43, 38, 33, 0.05),
                0 18px 26px -22px rgba(43, 38, 33, 0.20);
}

.fb-prod__shot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--c-bg);
}

/* Категория переехала с обложки в тело карточки. На квадрате в 112 px
   пилюля занимала треть кадра и закрывала ровно то, ради чего кадр
   поставлен. Здесь она набрана надзаголовком — тем же приёмом, что
   .kicker в секциях. */
.fb-prod__cat {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-green-text);
}

.fb-prod__body { padding: 16px; }

.fb-prod__name {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.2px;
}

.fb-prod__desc {
    margin: 4px 0 12px;
    font-size: 13px;
    line-height: 20px;
    color: var(--c-text-muted);
}

.fb-prod__foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.fb-prod__price {
    font-family: var(--f-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--c-green-text);
}

/* --- ПОЛКА НА ТЕЛЕФОНЕ — СПИСОК СТРОК ----------------------------------------
   На узком экране карточка со снимком в 112px, описанием
   занимает две сотни точек, и три таких подряд читаются грудой. Строкой —
   миниатюра, надзаголовок, название, цена справа — та же полка становится
   каталогом: ровный шаг, волосяная линия между строками, ничего лишнего.
   Ровно так же устроен каталог в 07 главной, и это не совпадение: на
   телефоне обоим блокам нужно одно и то же.

   Описание и оценка на этой ступени сняты. Не «не поместились»: в строке
   им нет места, а полка здесь показывает ассортимент, а не карточку
   товара — за подробностями человек идёт в сам магазин.

   Всё, что ниже, — телефонные значения. С 601 они возвращаются к
   карточке, блок в конце файла. ------------------------------------------ */

.fb-prod {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  /* Высота ЗАДАНА, а не собрана по содержимому. На ней держится шаг ленты:
     скрипт меряет первую строку и ведёт по ней всю дорожку. Название в две
     строки выше названия в одну, и без общей высоты лента промахивалась бы
     мимо строки на всех наборах, кроме первого.

     92 — это две строки названия с надзаголовком над ними (15 + 42) плюс
     поля. Миниатюра в 48 в эту высоту входит с запасом. */
    height: 92px;
    overflow: visible;   /* миниатюре в фокусе некуда расти внутри строки */
    padding: 0 2px;
    border-radius: 0;
    border-bottom: 1px solid var(--c-line);
    background: transparent;
    box-shadow: none;
}

.fb-prod__shot {
    width: 48px;
    height: 48px;
    border-radius: 10px;
}

/* Тело строки в два столбца: слева надзаголовок с названием, справа цена
   во всю высоту. Цена стоит в правом краю строки, а не под названием —
   иначе столбец цен не выстроится и список перестанет читаться списком. */
.fb-prod__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
  /* Поле справа. Без него цена упирается в кромку окна — у окна
     overflow: hidden, и в валютах длиннее дирхама («OMR 11.5» против
     «AED 110») хвост срезало. Двух точек отступа строки на это не хватало. */
    padding: 0 8px 0 0;
}

/* В СТРОКЕ ЦЕНА НЕ УВЕЛИЧИВАЕТСЯ. Приём карточный: там она росла внутрь
   плашки и места хватало. Здесь она у самого края окна, и рост на шесть
   процентов выносил её за кромку — подсвеченная строка теряла хвост
   цены. */
.fb-prod.is-focus .fb-prod__price { transform: none; }

/* Цена на ступень мельче карточной: в строке она стоит рядом с
   названием, а не под ним, и на прежнем кегле отнимала у названия столько,
   что оно не помещалось целиком. Кегль тот же, что у цены в каталоге
   главной. */
.fb-prod__price { font-size: 18px; line-height: 24px; }

.fb-prod__cat  { grid-area: 1 / 1; margin-bottom: 0; }
.fb-prod__name { grid-area: 2 / 1; }
.fb-prod__foot { grid-area: 1 / 2 / 3 / 3; margin-top: 0; }

.fb-prod__desc { display: none; }

/* Название переносится целиком — обрезать его отточием здесь нечем
   оправдаться: это единственное, по чему товар узнают. Место под вторую
   строку заложено в высоте строки выше. */
.fb-prod__name {
    font-size: 15px;
    line-height: 21px;
}


/* --- Адаптив: снизу вверх ------------------------------------------------------ */
@media (min-width: 601px) {
  /* Пилюли опроса возвращаются вместе с шириной */
  .fb-build__steps { display: flex; }

  /* Кадр растёт с шириной панели: при 128 на 768–900 полоса выходила 6:1,
     и предмет (будильник) срезало сверху. Кадрирование поднято к нему. С
     901 высоту перебивает height: auto; flex: 1. */
  .fb-build__shot { height: clamp(128px, 22vw, 200px); }
  .fb-build__shot img { object-position: center 40%; }
  .fb-build__body { padding: 14px 18px 18px; }

  /* --- Полка возвращается к карточкам ------------------------------------
     Всё, что снято на телефоне, встаёт обратно: обложка столбцом слева,
     описание, оценка, тень, свои поля. Подробности — в комментарии
     «ПОЛКА НА ТЕЛЕФОНЕ» выше по файлу. -------------------------------- */
  .fb-roll {
    --roll-seen: 3;
    --roll-focus: 1;
    mask-image: linear-gradient(180deg,
              transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
    -webkit-mask-image: linear-gradient(180deg,
              transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
  }

  .fb-roll__track,
  .fb-shelf { gap: 16px; }

  .fb-prod {
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    height: auto;
    overflow: hidden;
    padding: 0;
    border-radius: 14px;
    border-bottom: 0;
    background: var(--c-surface);
    box-shadow: 0 1px 2px rgba(43, 38, 33, 0.05),
                0 18px 26px -22px rgba(43, 38, 33, 0.20);
  }

  .fb-prod__shot {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  /* Текст сверху вниз естественным потоком: категория, название, описание,
     цена — сразу под текстом. Карточки ряда равной высоты (grid-auto-rows:
     1fr у .fb-shelf — нужно, чтобы лента не срезала нижнюю), излишек высоты
     у коротких карточек уходит в пустое поле снизу, а не в зазор к цене. */
  .fb-prod__body { display: block; padding: 16px; }

  .fb-prod__cat { margin-bottom: 6px; }

  .fb-prod__price { font-size: 20px; line-height: normal; }
  .fb-prod__body { padding: 16px; }
  .fb-prod.is-focus .fb-prod__price { transform: scale(1.06); }

  .fb-prod__desc { display: block; }

  .fb-step { padding: 26px; }
}

@media (min-width: 901px) {
  .fb-split { grid-template-columns: 1fr 1fr; gap: 52px; }

  /* --- 02 «Три шага»: заголовок сверху, шаги в строку --------------------
     В две колонки этот блок не держался. Справа стопка из трёх карточек в
     полтора экрана, слева заголовок с кнопкой — и под ними полколонки
     пустого песка: текста ровно столько, сколько есть, дотягивать его до
     высоты стопки нечем.

     Развёрнут: заголовок во всю ширину сверху, три шага рядом под ним.
     Пустоты не осталось, а последовательность читается не хуже — просто
     теперь она идёт слева направо, как строка, а не сверху вниз.

     Ширина текста ограничена: во всю тысячу с лишним лид расходится в
     строки, которые глаз не дочитывает до конца. -------------------- */
  .fb-how .fb-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .fb-how .fb-split__text { max-width: 680px; margin-inline: auto; }

  .fb-how__actions { margin-top: 8px; }

  .fb-how .fb-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  /* Карточки в ряду одной высоты, а плашка стоит под текстом: у карточки с
     текстом короче плашка поднималась выше соседних. Текст забирает
     остаток высоты — плашки встают на одну линию, отступ 14px остаётся. */
  .fb-how .fb-step { display: flex; flex-direction: column; }
  .fb-how .fb-step__text { flex-grow: 1; }
  .fb-how .fb-step__tag { align-self: flex-start; }





  /* Полка одноколоночная на всех ширинах, и двух колонок у неё больше нет
     нигде. Раньше с 601 до 900 она вставала в две — но лента едет ВНИЗ, и
     в две колонки шаг ленты перестаёт совпадать с шагом карточек. */

  /* Медиа слева. В разметке текстовая колонка ВСЕГДА идёт первой — на
     телефоне читать нужно с текста, а не с полки товаров. Там, где по
     прототипу медиа стоит в левой колонке, её переставляет этот
     модификатор, и только с 901: ниже колонок нет вовсе. */
  .fb-split--media-left > :last-child { order: -1; }

  /* --- Панель конструктора во всю высоту колонки ---------------------------
     Панель собиралась по содержимому и выходила 361px рядом с текстом в
     583 — рядом с полной колонкой она выглядела скукоженной, будто не
     дорисована.

     Тянуть числами (выше кадр, шире поля) пришлось бы под каждую ширину
     заново: колонка текста растёт от количества строк в подзаголовке.
     Поэтому панель просто встаёт во всю высоту ряда, а слабину забирает
     кадр — единственное, что можно растянуть без вреда. Опрос сверху
     остаётся своего размера. */
  .fb-build {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .fb-build__qs {
    flex: 1;
    grid-template-rows: auto 1fr;
  }

  .fb-build__shot {
    position: relative;
    flex: 1;
    height: auto;
    min-height: 128px;
  }

  /* Снимок кладётся абсолютно: в растущем блоке height: 100% считать не от
     чего, и картинка схлопнулась бы в свои 128px, оставив под подписью
     белое поле. */
  .fb-build__shot img { position: absolute; inset: 0; }

  /* --- Столп с длинным заголовком — доля колонок своя ----------------------
     «Meet your AI influencers. Marketing made easy.» — самая длинная строка
     страницы: первой части на общем кегле 56px нужно 647px, а половина
     контейнера даёт 574. Заголовок шёл в три строки, хотя на главной этот
     же текст стоит в две.

     Разгадка там же: у главной этот столп не делится пополам — текст берёт
     700px против 444 у снимка, доля 1.57 к 1. Здесь та же. Кегль не
     трогаем: он общий у всех заголовков страницы.

     Сама доля включается с 1281 (ниже по файлу), а здесь модификатор
     объявлен пополам — чтобы на 901…1280 он ничего не менял. Порог такой
     потому, что доля отнимает у визуальной колонки, а в ней телефон
     шириной 272px со свечением по краям: на 1281 колонке остаётся 385px,
     запас есть, а на 901 осталось бы 280 — телефон встал бы впритык к
     тексту. */
  /* НА 901–1120 В ОДНУ КОЛОНКУ, как тот же столп на главной. Пополам колонке
     текста доставалось 353–453, и «Meet your AI influencers. Marketing
     made easy.» шёл в четыре строки при 48 — чтобы уложить его в две,
     кегль пришлось бы опустить до 30. В столбик колонка 620+, две строки. */
  .fb-split--text-wide { grid-template-columns: minmax(0, 1fr); }
}

/* С 1121 — доля 1.57 к 1 (было с 1281, а на 1121–1280 пополам: колонке
   текста 473–543, заголовок в три-четыре строки). На 1121 визуальной
   колонке остаётся ~380 — столько же, сколько на 1281 при прежнем пороге. */
@media (min-width: 1121px) {
  .fb-split--text-wide { grid-template-columns: minmax(0, 1.57fr) minmax(0, 1fr); }
}


/* Зелёная часть заголовка — с новой строки.

   Пока колонка была узкой, перенос и так приходился на неё: «Meet your AI /
   influencers. / Marketing made easy.». С широкой долей на 1281 строка
   стала ломаться посреди зелёного — «influencers. Marketing / made easy.», —
   и фраза перестала читаться фразой. Блочный элемент это закрепляет: где
   двух строк не хватает, третьей становится первая часть, а не зелёная.

   Только у этого столпа: у соседей заголовки короче и ломаются сами. */
.fb-split--text-wide .fb-head__title em { display: block; }

/* Не больше двух строк на телефоне: «Meet your AI influencers.» при 30 не
   входил в колонку до 390. Кегль растёт с колонкой и упирается в 30.
   max-width — исключение из min-width: правило двух классов без порога
   перебило бы ступени .fb-head__title в 00-base.css. */
@media (max-width: 600px) {
  .fb-split--text-wide .fb-head__title {
  }
}


/* --- Широкая текстовая колонка у столпа маркетинга ---------------------------
   Доля главной: 700 к 444. Подробности — в комментарии к .fb-split--text-wide
   в блоке 901. -------------------------------------------------------------- */
/* Доля 1.57 к 1 теперь включается с 1121 — см. выше. */

/* На 1281–1360 колонка 595–640, и при 56 «Meet your AI influencers.» не
   входил в строку — заголовок шёл в три. Кегль идёт за колонкой
   (≈ 0.61 × экран − 186) и с ~1410 упирается в 56. */
@media (min-width: 1281px) {
  .fb-split--text-wide .fb-head__title {
  }
}



/* Свечение корпуса — украшение, а не смысл: при отключённом движении
   оно остаётся на месте в базовом состоянии. */
@media (prefers-reduced-motion: reduce) {
  .fb-phone { animation: none; }
}

/* ---------------------------------------------------------------
   css/free-basic/05-all-in-one.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — Free Basic · 05 · Всё в одном

   Секция кремовая, поэтому карточки белые: на --c-bg-alt (тоже кремовый)
   строки слились бы с фоном. Тень мягкая — это перечень, а не витрина, и
   поднимать строки над страницей незачем.
   ========================================================================== */

.fb-incl {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 32px;
}

/* Карточка.

   Была плоская белая с серой кромкой, и шесть таких читались таблицей: на
   всю секцию приходилось ровно одно цветное пятно — галочка в 16px.
   Добавлены три вещи, все из палитры страницы:

   — подложка не белая, а с уходом в кремовый (--c-bg-plain снизу): белое
     на кремовом фоне секции выглядит вырезанным из другого материала;
   — песочный блик в правом верхнем углу, очень слабый (8%) — он и даёт
     карточке тепло, которого не хватало;
   — тень глубже прежней, но по-прежнему мягкая: перечень не витрина,
     поднимать строки над страницей незачем. */
.fb-incl__row {
    display: flex;
  /* Плитка по центру текста, а не по его первой строке: у карточек разной
     высоты (описание в одну строку или в три) знак иначе висел бы вверху и
     ряд читался бы разъехавшимся. */
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--c-line-soft);
    border-radius: 14px;
    background:
      radial-gradient(120% 140% at 100% 0,
        color-mix(in srgb, var(--c-sand) 9%, transparent) 0%, transparent 58%),
      linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg-plain) 100%);
    box-shadow: 0 1px 2px rgba(43, 38, 33, 0.04),
                0 12px 26px -20px rgba(43, 38, 33, 0.35);
}

/* Знак в плитке, а не сам по себе. Мятный квадрат со скруглением — та же
   заливка, что у пилюль страницы (--c-green-mist), и он даёт каждой
   карточке своё цветное пятно вместо одной галочки на всю секцию. */
.fb-incl__chip {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--c-green-mist);
}

.fb-incl__body { display: block; }

.fb-incl__title {
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--c-text);
}

.fb-incl__text {
    display: block;
    font-size: 15px;
    line-height: 24px;
    color: var(--c-text-muted);
}

.fb-included__actions { margin-top: 26px; }


/* --- Адаптив ---------------------------------------------------------------- */
@media (min-width: 601px) {
  .fb-incl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
  /* В две колонки карточки ряда одной высоты, а описания разной длины: при
     центровке заголовки соседей разъезжались на 12–24. Текст по верху,
     плитка на строке заголовка (34 плитки против 24 строки — минус 5). */
  .fb-incl__row { align-items: flex-start; }
  .fb-incl__chip { margin-top: -5px; }
}

/* Не больше двух строк на телефоне: «Everything you need. All in one
   place.» при 30 на 320 шёл в три. Кегль растёт с колонкой (экран минус
   поля 40) и упирается в 30. max-width — исключение из min-width: правило
   двух классов без порога перебило бы ступени .fb-head__title в
   00-base.css. */
@media (max-width: 600px) {
  .fb-included .fb-head__title {
  }
}

/* ---------------------------------------------------------------
   css/shared/footer-cta.css
   --------------------------------------------------------------- */
/* ==========================================================================
   13 · Footer CTA — «Ready to start your online business?»
   Figma: HoPojxNiFElmltha1NOl3N, node 511:701
   ========================================================================== */

.s-13 {
    --s13-ink: #f5f1e8;                      /* заголовок на тёмном */
    --s13-ink-soft: rgba(245, 241, 232, 0.8);     /* подзаголовок */
    --s13-ink-muted: rgba(245, 241, 232, 0.7);     /* строка доверия */

    overflow: hidden;                              /* световые пятна уходят за край */
    padding-block: 64px;
  /* Призыв — тёмная панель со скруглением на светлом поле, а не тёмная
     полоса во всю ширину. Полосой он стоял вплотную к тёмному подвалу, и
     низ страницы читался одной тёмной плитой: тон чуть светлее подвала и
     волосяная линия их не разделяли. Светлое поле вокруг (фон страницы)
     отделяет панель и от подвала, и от блока над ней. */
    margin: 16px;
    border-radius: 24px;
  /* Ровный тёмный, а не градиент слева направо: с градиентом правое пятно
     боролось с фоном, который и без него светлел к краю. На ровном фоне свет
     дают только сами пятна. */
    background: #1f1b17;
}

/* Рядом с тёмной секцией доверия (.s-12) поля в 16–24 мало: панель и
   секция сливались в одну тёмную плиту. Раньше между ними стоял светлый
   блок историй — он снят 30.09.2026. Поле шире только с этой стороны:
   на главной доверие над панелью, на free-online-store — под полосой. */
.s-12 + .s-13 { margin-top: 48px; }
.s-13:has(+ .s-12) { margin-bottom: 48px; }

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

   Раньше это были два неподвижных SVG из макета. Второе пятно, тёмно-зелёное
   при непрозрачности 5%, на тёмном фоне не давало вообще ничего — секция
   читалась пустой. Теперь оба пятна тёплые: зелёный из фонов со страницы
   вычищен намеренно.

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

   Дышим через transform и opacity: обе эти вещи браузер отдаёт видеокарте и
   не перекладывает из-за них страницу заново на каждом кадре. */
.s-13__glow {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.s-13__glow--sand {
    top: -110px;
    left: -150px;
    width: 460px;
    height: 460px;
  /* Плотное ядро с быстрым спадом, а не ровная размазня до нуля. Прежний
     градиент не имел края вообще, поэтому и увеличивать было нечего:
     масштаб менялся, а видимой границы, которая бы поехала, не было. */
    background: radial-gradient(circle closest-side,
              rgba(212, 163, 115, 0.34),
              rgba(212, 163, 115, 0.17) 30%,
              rgba(212, 163, 115, 0.05) 58%,
              rgba(212, 163, 115, 0) 78%);
    animation: s13-pulse-a 5s ease-in-out infinite;
}

.s-13__glow--warm {
    right: -150px;
    bottom: -170px;
    width: 540px;
    height: 540px;
    background: radial-gradient(circle closest-side,
              rgba(245, 241, 232, 0.26),
              rgba(245, 241, 232, 0.13) 30%,
              rgba(245, 241, 232, 0.04) 58%,
              rgba(245, 241, 232, 0) 78%);
    animation: s13-pulse-b 7s ease-in-out -2.6s infinite;
}

/* Пульс, а не перемещение: пятна стоят на месте и дышат.

   Первый заход был на 9 и 13 секунд с размахом непрозрачности от 0.55 —
   и не читался вовсе. Причина не в размахе, а в скорости: яркость менялась
   примерно на пять уровней в секунду, а такое медленное и размытое изменение
   глаз не ловит. Он видит края и движение, а не плавный общий подсвет.

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

   Периоды 5 и 7 секунд не кратны друг другу: пятна расходятся по фазе и в
   такт не сходятся. Размах у них разный, иначе это выглядит одним эффектом,
   продублированным дважды. */
@keyframes s13-pulse-a {
  0%, 100% { transform: scale(0.78); opacity: 0.34; }
  50%      { transform: scale(1.14); opacity: 1; }
}

@keyframes s13-pulse-b {
  0%, 100% { transform: scale(0.84); opacity: 0.46; }
  50%      { transform: scale(1.10); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .s-13__glow { animation: none; }
}

/* --- Контент -------------------------------------------------------------- */
/* Колонка — контейнер для кегля заголовка: кегль считается от её ширины
   (cqi), а не от ширины экрана. С полями панели колонка уже экрана на
   24–64px, и формулы от vw вели заголовок в три строки. */
.s-13__inner {
    container-type: inline-size;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}

/* Селекторы намеренно с двойным классом (.s-13 .s-13__…): они перебивают
   .h2 / .lead из 00-base независимо от порядка склейки файлов в styles.css. */
.s-13 .s-13__title {
  /* НЕ БОЛЬШЕ ДВУХ СТРОК на любой ширине (правило сайта). Кегль растёт с
     колонкой и упирается в потолок ступени (--s13-max: 34 → 46 → 60 → 72).
     --fit — отношение кегля к колонке, при котором заголовок ровно встаёт
     в две строки, с запасом 3 %; у длинных заголовков оно своё и стоит в
     разметке (style="--fit: …"), замер на 320–1920. Интерлиньяж и
     разрядка — долями кегля.
     --fit-sm — свой кегль для телефона (до 600) у длинных заголовков, до
     трёх строк, как у первого экрана мини-лендингов (решение владельца,
     22.09.2026): в две строки такой заголовок на 320 выходил ~21 точка,
     почти кегль лида под ним. С 601 — всегда --fit.
     Потолок на телефоне растёт плавно (34 на 320, ~45 на 600) и встречает
     46 ступени 601: с постоянными 34 заголовок на границе 600/601
     прыгал на треть. */
    --s13-max: clamp(34px, 21px + 4vw, 46px);
    max-width: 760px;
    font-size: min(var(--s13-max), calc(min(100cqi, 760px) * var(--fit-sm, var(--fit, 0.105))));
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: var(--s13-ink);
}

/* Составное слово в заголовке не рвём по дефису («hands- / off»): обёртку
   ставит разметка. */
.s-13__nobr { white-space: nowrap; }

.s-13 .s-13__lead {
    max-width: 600px;
    color: var(--s13-ink-soft);
}

/* --- Кнопка --------------------------------------------------------------- */
.s-13__cta-icon {
    flex: none;
    width: 18px;
    height: 18px;
    transition: transform 0.18s ease;
}

.s-13__cta:hover .s-13__cta-icon {   transform: translateX(3px); }

/* --- Строка доверия ------------------------------------------------------- */
/* Строка — обычным абзацем, а не флексом. Флексом текст становился
   одной ячейкой: на телефонах уже ~350 он целиком уходил на вторую строку,
   а значок оставался один на первой. Инлайном значок едет вместе с первым
   словом, а balance делит перенос на две ровные строки. */
.s-13__trust {
    display: block;
    font-size: 12px;
    line-height: 18px;
    color: var(--s13-ink-muted);
    text-wrap: balance;
}

.s-13__trust-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
}

/* Цена внутри строки (span[data-sub]) — обычный инлайн: скрипт находит
   узел и подставляет цену рынка. Пока строка была флексом, span
   становился отдельной ячейкой и получал зазоры, отсюда стояло
   display: contents; с абзацем оно не нужно. */

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

/* --- Адаптив: снизу вверх ---------------------------------------------------
   Всё выше — телефонные значения. Здесь они дорастают до широкого экрана.
   Блоки идут строго по возрастанию порога: правила равной силы, побеждает
   последнее подошедшее. Пороги смещены на пиксел (601 вместо 600): при
   max-width граница входила в узкий диапазон, при min-width должна войти
   в широкий. -------------------------------------------------------------- */

@media (min-width: 601px) {
  .s-13 {
    margin: 20px;
    border-radius: 28px;
    padding-block: 80px;
  }
  .s-13__glow--sand {
    top: -150px;
    left: -200px;
    width: 620px;
    height: 620px;
  }
  .s-13__glow--warm {
    right: -200px;
    bottom: -240px;
    width: 720px;
    height: 720px;
  }
  .s-13__inner {
    gap: 26px;
  }
  .s-13 .s-13__title {
    --s13-max: 38px;
    font-size: min(var(--s13-max), calc(min(100cqi, 760px) * var(--fit, 0.105)));
    line-height: 1.13;
  }
  .s-13__trust {
    font-size: 13px;
  }
}

@media (min-width: 901px) {
  .s-13 {
    margin: 24px;
    border-radius: 32px;
    padding-block: 96px;
  }
  .s-13__glow--sand {
    top: -180px;
    left: -240px;
    width: 780px;
    height: 780px;
  }
  .s-13__glow--warm {
    right: -260px;
    bottom: -320px;
    width: 940px;
    height: 940px;
  }
  .s-13__inner {
    gap: 32px;
  }
  .s-13 .s-13__title {
    --s13-max: 48px;
    line-height: 1.1;
    letter-spacing: -0.033em;
  }
}

@media (min-width: 1281px) {
  .s-13 {
    margin: 32px;
    padding-block: 120px;
  }
  .s-13 .s-13__title {
    --s13-max: 56px;
    line-height: 1.06;
    letter-spacing: -0.035em;
  }
}

/* ---------------------------------------------------------------
   css/shared/trust-security.css
   --------------------------------------------------------------- */
/* ==========================================================================
   12 · Trust & security — «Your trust is our foundation.»
   Figma: HoPojxNiFElmltha1NOl3N, node 511:625
   ========================================================================== */

.s-12 {
  /* ТЁМНАЯ. Вторая из двух секций, перекрашенных ради ритма: тёмные идут
     через одну — 04, 07, 09, 11, 13–14. Без неё нижняя треть страницы шла
     одним светлым куском в четырнадцать тысяч пикселей, и «разбитости»
     референса не получалось.

     Выбрана эта, а не соседние: у 10 сверху тёмный сосед (09), а 12 снизу
     только что собрана по образцу со светлыми карточками. Эта же стоит
     ровно посередине светлой полосы и режет её надвое. Разговор про
     регистрацию, шифрование и гарантию на тёмном звучит уместнее прочих. */
    --s12-ink: var(--c-on-dark);          /* заголовки карточек и секции */
    --s12-soft: var(--c-on-dark-soft);    /* лид, даты */
    --s12-faint: var(--c-on-dark-muted);  /* подписи под фигурами */

  /* Песочные тинты подняты: на белёсом хватало 12 и 24 %, на тёмном они
     пропадали вовсе. */
    --s12-icon-bg: rgba(212, 163, 115, 0.16);
    --s12-icon-line: rgba(212, 163, 115, 0.30);
    --s12-press-line: var(--c-line-on-dark);
    --s12-badge-line: var(--c-line-on-dark);

  /* Плашка карточки. Не стекло: --glass-* собран из белых градиентов и на
     тёмном превращается в молочное пятно. Берём плоскую поверхность с
     волосяной кромкой — ровно так были сделаны плитки витрины в 03b,
     пока та была тёмной. */
    --s12-card: var(--c-ink-surface);

    padding-block: 64px;
    background: #1a1714;
}

/* --- Подложка под стекло ----------------------------------------------------
   Два мягких цветовых пятна и решётка гириха. Существует ровно затем, чтобы
   плашкам было что искажать: на ровной заливке стекло не читается вовсе.
   Контраст низкий намеренно — под плашками не должно быть ничего, что
   спорит с их текстом.
   -------------------------------------------------------------------------- */
.s-12 {
    position: relative;
    isolation: isolate;
}

.s-12::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  /* БЕЗ ГИРИХА. Решётка не прозрачная: первым элементом в SVG лежит
     сплошной прямоугольник fill="#F5F0EB". На светлой секции это незаметно —
     крем по крему, — а на тёмной кремовая заливка под прозрачностью
     превращает весь фон в ровный серый. Именно это здесь и случилось после
     перевода секции в тёмное.

     Возвращать нечего: подложка существовала затем, чтобы стеклу было что
     искажать, а стекла в карточках больше нет — они плоские. Остались два
     тёплых пятна, они дают глубину и не спорят с текстом. */
    background: radial-gradient(52% 44% at 18% 22%, rgba(212, 163, 115, 0.16) 0%, transparent 68%),
    radial-gradient(46% 40% at 84% 74%, rgba(61, 143, 99, 0.12) 0%, transparent 66%);
    opacity: 1;
}


.s-12__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

/* --- Надзаголовки с линейкой ---------------------------------------------- */
.s-12__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 1.3px;
    line-height: 18px;
    color: var(--c-green-on-dark);
}

.s-12__kicker-rule {
    width: 24px;
    border-radius: 2px;
}

/* --- Шапка секции --------------------------------------------------------- */
.s-12__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding-bottom: 8px;
    text-align: center;
}

.s-12__title {
    max-width: 900px;
    color: var(--s12-ink);
}

.s-12__lead {
    max-width: 640px;
    color: var(--s12-soft);
  /* Лид по центру — ровными строками: на 320–430 хвостом оставалось
     «for it.» или «it.». */
    text-wrap: balance;
}

/* --- Сетка доверия -------------------------------------------------------- */
.s-12__trust {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
}

.s-12__trust-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 0;
    padding: 22px;
  /* Ровно один пиксель, а не полтора: дробную границу браузер округляет до
     целого, и заявленные 1.5 всё равно превращались в 1. */
    border: 1px solid var(--c-line-on-dark);
    border-radius: 16px;
    background: var(--s12-card);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.s-12__trust-item:hover {
    transform: translateY(-2px);
    border-color: var(--c-line-strong);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3);
}

.s-12__trust-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.s-12__trust-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: -0.18px;
    color: var(--s12-ink);
}

.s-12__trust-text {
    font-size: 14px;
    line-height: 23px;
    color: var(--s12-faint);
}

/* Составные слова через дефис не рвём: в колонке ~210 на телефоне
   выходило «Money- / Back» и «PCI- / compliant». Не U+2011 — в Almarai
   его может не быть. */
.s-12__nowrap { white-space: nowrap; }

/* Изразец вместо плоской иконки — тот же приём, что в секции 11: там
   керамическая плитка уже заменила линейный значок, и блок доверия должен
   говорить с ней одним языком, иначе две соседние секции читаются собранными
   из разных наборов.

   Подложка плитке не нужна: кадр снят так, что глина занимает его целиком,
   и сама плитка и есть подложка знака. */
.s-12__tile {
    display: block;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: fill;
    box-shadow: 0 1px 2px rgba(43, 38, 33, 0.06),
    0 4px 12px -8px rgba(43, 38, 33, 0.26);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
}

.s-12__trust-item:hover .s-12__tile {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(43, 38, 33, 0.08),
    0 9px 18px -10px rgba(43, 38, 33, 0.32);
}

@media (prefers-reduced-motion: reduce) {
  .s-12__tile { transition: none; }
  .s-12__trust-item:hover .s-12__tile { transform: none; }
}

.s-12__trust-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.s-12__trust-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: -0.18px;
    color: var(--s12-ink);
}

.s-12__trust-text {
    font-size: 14px;
    line-height: 23px;
    color: var(--s12-faint);
}

.s-12__trust-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--s12-icon-line);
    border-radius: 12px;
    background: var(--s12-icon-bg);
}

.s-12__trust-icon img {
    width: 22px;
    height: 22px;
}

.s-12__trust-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.s-12__trust-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: -0.18px;
    color: var(--s12-ink);
}

.s-12__trust-text {
    font-size: 14px;
    line-height: 23px;
    color: var(--s12-faint);
}

/* --- Доказательство --------------------------------------------------------
   Не панель и не виджет: рамки нет, заливка едва намечена. Зона обозначена
   ровно настолько, чтобы глаз понял «здесь показывают», и ни на каплю
   больше — вес обязан остаться за заголовком и абзацем.

   Итоговый кадр лежит в обычных правилах, исходный — под классом .is-armed,
   который вешает скрипт. Договор тот же, что в 00-reveal.css: нет скрипта —
   нет класса — читатель сразу видит готовое доказательство.
   -------------------------------------------------------------------------- */
.s-12__proof {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 92px;
    padding: 0 16px;
    overflow: hidden;
    border-radius: 10px;
    background: color-mix(in srgb, var(--c-sand) 7%, transparent);
}

/* Подпись под фигурой: короткая, человеческая, без служебной лексики.
   Она называет то, что показано, а не пересказывает абзац. */
.s-12__proof-note {
    position: relative;
    display: block;
    height: 18px;
    font-size: 13px;
    line-height: 18px;
    color: var(--s12-faint);
}

/* --- 1. Регистрация --------------------------------------------------------- */
.s-12__proof--registry {   flex-direction: row;   align-items: center;   gap: 16px; }

.s-12__state {   position: relative;   display: inline-flex;   align-items: center; }

.s-12__state-line {
    fill: color-mix(in srgb, var(--c-sand) 16%, transparent);
    stroke: var(--c-sand);
    stroke-width: 2.4;
    stroke-linejoin: round;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Печать садится с запозданием: сначала место, потом отметка. */
.s-12__stamp {
    position: absolute;
    right: -11px;
    bottom: 2px;
    color: var(--c-green-on-dark);
    transition: opacity 0.4s ease 0.42s,
              transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) 0.42s;
}

.s-12__stamp circle {   fill: var(--s12-card);   stroke: currentColor;   stroke-width: 1.1; }
.s-12__stamp path {
    fill: none;   stroke: currentColor;   stroke-width: 1.9;
    stroke-linecap: round;   stroke-linejoin: round;
}

.s-12__proof--registry .s-12__proof-note {
    height: auto;
    transition: opacity 0.5s ease 0.56s;
}

.is-armed .s-12__state-line {   opacity: 0;   transform: translateY(4px); }
.is-armed .s-12__stamp {   opacity: 0;   transform: scale(1.5); }
.is-armed .s-12__proof--registry .s-12__proof-note {   opacity: 0; }

/* --- 2. Шифрование ---------------------------------------------------------
   Двумя clip-path навстречу: слева от бегущей черты строка уже зашифрована,
   справа ещё нет. Обе половины и черта едут на одном тайминге, поэтому
   разъехаться не могут — синхронизация не поручена скрипту.
   -------------------------------------------------------------------------- */
.s-12__cipher {   position: relative;   display: block;   height: 21px; }

.s-12__cipher-plain,
.s-12__cipher-code {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 21px;
    color: var(--s12-ink);
    transition: clip-path 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}

.s-12__cipher-code {
    letter-spacing: 0.4px;
    color: var(--s12-faint);
    clip-path: inset(0 0 0 0);
}

.s-12__cipher-plain {   clip-path: inset(0 0 0 100%); }

/* Черта волосяная и без свечения: отмечает границу, а не празднует её. */
.s-12__cipher-edge {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 100%;
    width: 1px;
    background: var(--c-sand);
    opacity: 0;
    transition: left 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.15s,
              opacity 0.3s ease 1.1s;
}

.s-12__note-a,
.s-12__note-b {   position: absolute;   inset: 0;   transition: opacity 0.4s ease 0.7s; }
.s-12__note-a {   opacity: 0; }
.s-12__note-b {   opacity: 1; }

.is-armed .s-12__cipher-code {   clip-path: inset(0 100% 0 0); }
.is-armed .s-12__cipher-plain {   clip-path: inset(0 0 0 0); }
.is-armed .s-12__cipher-edge {   left: 0;   opacity: 1; }
.is-armed .s-12__note-a {   opacity: 1; }
.is-armed .s-12__note-b {   opacity: 0; }

/* --- 3. Мелкий шрифт --------------------------------------------------------
   Петит уходит, на его месте встаёт одна короткая фраза. Длинная спорила
   с абзацем под панелью — эта помещается в один взгляд.
   -------------------------------------------------------------------------- */
.s-12__proof--print {   justify-content: center; }

.s-12__petit,
.s-12__plain {
    position: absolute;
    left: 16px;
    right: 16px;
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.s-12__petit {
    font-size: 4px;
    line-height: 7px;
    text-align: justify;
    color: var(--s12-faint);
    opacity: 0;
    transform: scale(0.95);
}

.s-12__plain {
    font-size: 15px;
    line-height: 22px;
    color: var(--s12-ink);
    opacity: 1;
    transition-delay: 0.5s;
}

.is-armed .s-12__petit {   opacity: 0.45;   transform: none; }
.is-armed .s-12__plain {   opacity: 0;   transform: scale(1.04);   transition-delay: 0s; }

/* --- 4. Тридцать дней ------------------------------------------------------- */
.s-12__ruler {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 24px;
}

.s-12__ruler i {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--c-green) 62%, transparent);
    transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 24ms),
              background-color 0.4s ease calc(var(--i) * 24ms);
}

/* Каждое седьмое выше — недельные засечки. Без них это индикатор загрузки. */
.s-12__ruler i:nth-child(7n) {   height: 24px; }

.s-12__ruler-ends {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    line-height: 18px;
    color: var(--s12-faint);
    transition: opacity 0.5s ease 0.72s;
}

.is-armed .s-12__ruler i {
    height: 9px;
    background: color-mix(in srgb, var(--c-green) 14%, transparent);
}

.is-armed .s-12__ruler i:nth-child(7n) {   height: 13px; }
.is-armed .s-12__ruler-ends {   opacity: 0; }

/* Меньше движения — сразу итоговый кадр, ничего не взводится. */
@media (prefers-reduced-motion: reduce) {
  .s-12__proof * { transition: none !important; }
}

.s-12__trust-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.s-12__trust-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: -0.18px;
    color: var(--s12-ink);
  /* pretty, а не balance из .h3: с неразрывным «Money-Back» balance делил
     заголовок на телефоне как «30-Day» / «Money-Back Guarantee». */
    text-wrap: pretty;
}

.s-12__trust-text {
    font-size: 14px;
    line-height: 23px;
    color: var(--s12-faint);
  /* pretty: на разных ширинах последней строкой оставалось одно слово —
     «invoice.», «servers.», «fees.». */
    text-wrap: pretty;
}

/* Ссылка на условия в тексте гарантии («conditions apply» → политика
   возврата). Секция тёмная: зелёный — пара для тёмного фона. */
.s-12__trust-link {
    color: var(--c-green-on-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.s-12__trust-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--s12-icon-line);
    border-radius: 12px;
    background: var(--s12-icon-bg);
}

.s-12__trust-icon img {
    width: 22px;
    height: 22px;
}

/* --- Пресса --------------------------------------------------------------- */
.s-12__press {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
}

.s-12__press-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border: 1px solid var(--s12-press-line);
    border-radius: 16px;
    background: var(--s12-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.s-12__press-item:hover {
    transform: translateY(-2px);
    border-color: var(--c-line);
    box-shadow: var(--sh-card);
}

.s-12__press-source {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
    line-height: 16px;
    color: var(--s12-faint);
}

.s-12__press-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: -0.16px;
    color: var(--s12-ink);
}

/* margin-top:auto заменяет распорку из макета и ровняет подвалы карточек.
   В Figma между заголовком и подвалом: 12 (gap) + 1 (пустая распорка) + 12 (gap) = 25px,
   поэтому к колоночному gap:12 добавляем padding-top:13px → карточка ровно 167px.
   gap внутри подвала = 0: дата растягивается (flex:1), ссылка прижата вправо. */
.s-12__press-foot {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: auto;
    padding-top: 13px;
    font-size: 12px;
    line-height: 16px;
}

.s-12__press-date {
    flex: 1 1 auto;
    color: var(--s12-soft);
}

.s-12__press-link {
    flex: none;
    font-weight: 700;
    white-space: nowrap;
    color: var(--s12-faint);
    transition: color 0.18s ease;
}

.s-12__press-link:hover {
    color: var(--c-sand);
}

/* --- Способы оплаты ------------------------------------------------------- */
.s-12__payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.s-12__payments-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    line-height: 14px;
    text-transform: uppercase;
    color: var(--s12-soft);
}

.s-12__payments-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.s-12__payment {
    padding: 7px 12px;
    border: 1px solid var(--s12-badge-line);
    border-radius: 8px;
    background: var(--s12-card);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: var(--s12-faint);
    white-space: nowrap;
}

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

/* --- Адаптив: снизу вверх ---------------------------------------------------
   Всё выше — телефонные значения. Здесь они дорастают до широкого экрана.
   Блоки идут строго по возрастанию порога: правила равной силы, побеждает
   последнее подошедшее. Пороги смещены на пиксел (601 вместо 600): при
   max-width граница входила в узкий диапазон, при min-width должна войти
   в широкий. -------------------------------------------------------------- */

@media (min-width: 601px) {
  .s-12 {
    padding-block: 80px;
  }
  .s-12__inner {
    gap: 44px;
  }
  .s-12__title {
  }
  .s-12__trust {
    gap: 24px;
  }
  .s-12__trust-item {
    gap: 18px;
    padding: 28px;
  }
  .s-12__trust-title {
    font-size: 18px;
    line-height: 24px;
  }
  .s-12__trust-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }
  .s-12__trust-icon img {
    width: 24px;
    height: 24px;
  }
  .s-12__press {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .s-12__press-item {
    padding: 26px;
  }
  .s-12__payments {
    gap: 14px;
  }
  .s-12__payments-list {
    gap: 14px;
  }
  .s-12__payment {
    padding: 8px 14px;
    font-size: 13px;
  }
}

@media (min-width: 901px) {
  .s-12 {
    padding-block: 96px;
  }
  .s-12__inner {
    gap: 56px;
  }
  .s-12__title {
  }
  .s-12__trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .s-12__trust-item {
    min-height: 155px;
  }
  .s-12__press {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1281px) {
  .s-12 {
    padding-block: 120px;
  }
  .s-12__title {
  }
}


/* --- Кнопка ---------------------------------------------------------------
   Стоит по центру под карточками: блок сам по себе центрирован. */
.s-12__actions {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* ---------------------------------------------------------------
   css/free-basic/09-faq.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — Free Basic · 09 · Вопросы

   Секция кремовая, узкая колонка — как в прототипе. Плюс поворачивается в
   крестик на раскрытии; при «меньше движения» поворот снимает общее
   правило базы, и знак просто меняет состояние без вращения.
   ========================================================================== */

/* Колонка — 760 без полей на любой ширине. Поле контейнера входит в
   max-width, и при 900 колонка была 820 → 772 → 660, то есть на широком
   экране уже, чем на 1024, и заголовок FAQ ломался надвое с одиноким
   «Frequently». 760 — как таблица тарифа (.pr-table) на pricing. */
.fb-faq__container { max-width: calc(760px + var(--gutter) * 2); }

/* --- Шапка секции по центру ---------------------------------------------------
   Тот же приём, что у секций главной без номера: в отзывах и в блоке
   доверия надзаголовок с заголовком собраны колонкой по центру.

   Слева шапка стояла одиноко. Колонка вопросов узкая, 900px в контейнере на
   1200, и заголовок оказывался прижат к её левому краю, а справа зияло
   пустое поле во всю секцию — блок читался обрезком широкой секции, а не
   самостоятельным.

   Сам список выключен влево и остаётся таким: строки раскрываются и
   закрываются, и центрированный текст, который меняет высоту, прыгал бы. */
.fb-faq-wrap .fb-eye { justify-content: center; }

/* Поля — потому что у заголовка потолок 15em: на 601–900 его коробка уже
   колонки, и без них строка съезжала от оси влево. */
.fb-faq-wrap .fb-head__title { text-align: center; margin-inline: auto; }

.fb-faq {
    margin-top: 30px;
    border-top: 1px solid var(--c-line);
}

.fb-faq__item { border-bottom: 1px solid var(--c-line); }

.fb-faq__q {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 20px 0;
    list-style: none;
    cursor: pointer;
    text-wrap: pretty;                     /* без слова-хвоста в вопросе */
    font-size: 17px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--c-text);
}

/* Маркер убирается в двух местах: webkit рисует свой треугольник даже при
   list-style: none. */
.fb-faq__q::-webkit-details-marker { display: none; }

.fb-faq__pm {
    flex: none;
    font-family: var(--f-display);
    font-size: 22px;
    line-height: 22px;
    color: var(--c-green-text);
    transition: transform 0.2s ease;
}

.fb-faq__item[open] .fb-faq__pm { transform: rotate(45deg); }

/* pretty — без одинокого слова в последней строке ответа («start.»). */
.fb-faq__a {
    padding-bottom: 20px;
    max-width: 52em;
    font-size: 16px;
    line-height: 26px;
    color: var(--c-text-body);
}

/* Цена в ответе — тем же зелёным, что и остальные показатели страницы.
   Её текст подставляет скрипт цен по выбранной стране. */
/* Валюта и сумма не расходятся по строкам («AED / 149»), что бы ни
   подставил скрипт цен. */
.fb-faq__a strong { color: var(--c-green-text); white-space: nowrap; }


/* --- Адаптив ------------------------------------------------------------------- */
@media (min-width: 601px) {
  .fb-faq { margin-top: 36px; }
  .fb-faq__q { font-size: 18px; line-height: 28px; }
}
/* ========================= /PAGE STYLES ========================== */

/* ========================= FOOTER STYLES ========================= */
/* Переопределения подвала для этой страницы. */
/* ========================= /FOOTER STYLES ======================== */