/* ==========================================================================
   pricing - стили страницы.

   Собрано из 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/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/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; }
}

/* ---------------------------------------------------------------
   css/landing/00-landing.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — мини-лендинги (digital-products, domain, tiktok-shop и т. д.)

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

      первый экран   .lp-hero      крем + гирих, как первый экран free-basic
      преимущества   .lp-benefits  белёсый, белые карточки
      что входит     .lp-features  крем, кремовые карточки
      призыв         .s-13         общий блок (css/shared/footer-cta.css)

   Тон секций чередуется по правилу из core/base.css: соседних светлых
   одного тона не бывает. Карточки белые на белёсом и кремовые на креме —
   так же, как на «о нас» (кремовая плашка на белёсом не читается).

   НЕ БОЛЬШЕ ДВУХ СТРОК. Заголовки этих страниц разной длины, и одной
   лестницей кеглей их не уложить. Поэтому у заголовков шаблона кегль
   считается от ширины их колонки: font-size = min(потолок ступени,
   ширина колонки × --fit). --fit у каждого заголовка свой — отношение
   кегля к ширине, при котором именно этот текст ровно встаёт в две
   строки (с запасом). Его проставляет в разметку замер (см. заметку в
   странице), а колонка объявлена контейнером — 100cqi и есть её ширина.
   Короткий заголовок упирается в потолок и выглядит как везде на сайте;
   длинный на узком экране становится мельче, но остаётся в двух строках.

   Кадры первого экрана — снимки по образцу, значки карточек — керамические
   плитки в стиле главной.

   Всё, что ниже, — телефонные значения. Ступени идут строго по
   возрастанию: правила равной силы, побеждает последнее подошедшее.
   ========================================================================== */

/* --- Первый экран -------------------------------------------------------- */
.lp-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 48px 64px;
}

/* Фон — как у первого экрана free-basic: два тёплых пятна и гирих на 30 %. */
.lp-hero::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.3;
}

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

/* Колонка текста — контейнер: от её ширины считается кегль заголовка.
   Это ячейка сетки, её ширину задаёт трек, а не содержимое, поэтому
   контейнер ничего не ломает. */
.lp-hero__text {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

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

/* --fit-sm — свой кегль для телефона (до 600) у длинных заголовков. Им
   разрешено до трёх строк (решение владельца, 22.09.2026): в две строки
   такой заголовок на 320–375 влезал только в ~25 точек, заметно мельче
   первых экранов остальных страниц (~34). Без --fit-sm на телефоне
   работает общий --fit и правило двух строк. С 601 — всегда --fit. */
.lp-hero__title {
    --lp-max: 44px;
    font-size: min(var(--lp-max), calc(100cqi * var(--fit-sm, var(--fit, 1))));
    line-height: 1.12;
    letter-spacing: -0.028em;
}

/* Курсивное слово подтянуто к предыдущему: наклон, подделанный браузером
   (у Almarai нет курсива), раздвигает пробел перед ним. */
.lp-hero__title em { margin-inline-start: 0; }   /* акцент прямой — компенсация наклона не нужна */

.lp-hero__lede {
    max-width: 34em;
    margin-top: 16px;
    color: var(--c-text-body);
}

.lp-hero__actions {
    display: flex;
    width: 100%;
    margin-top: 28px;
}

.lp-hero__terms {
    margin-top: 14px;
    color: var(--c-text-muted);
}

/* Рамка кадра. Пропорция задана рамке, а не картинке: на телефоне 4:5,
   рядом с текстом — тоже 4:5, высота считается из ширины колонки.

   На телефоне кадр во всю колонку, на одной оси с текстом и карточками.
   Высота не больше 440: шире ~350 рамка перестаёт быть 4:5 и плавно
   ложится ниже пропорции (на 600 — 560×440). Прежде на 521–600 узкая
   рамка 480 стояла по центру, не на оси текста, высотой в экран, а на 601
   скачком становилась горизонтальной. */
.lp-hero__visual {
    position: relative;
    width: 100%;
}

.lp-hero__shot {
    overflow: hidden;
    width: 100%;           /* явно: иначе aspect-ratio переносит потолок высоты на ширину, и рамка сужается до 352 */
    aspect-ratio: 4 / 5;
    max-height: 440px;
    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);
}

/* Снимок заполняет рамку. Кадр снят 4:5 с человеком по центру и головой
   чуть выше середины: в рамке 16:10 (601–900) и в приплюснутой рамке
   широкого телефона от него остаётся средняя полоса, и точка кадрирования
   поднята к лицу. --shot-y — своя точка у снимка, где голова выше
   обычной (ставит разметка рамки); в рамке 4:5 она ни на что не влияет. */
.lp-hero__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% var(--shot-y, 40%);
}

/* Плашки вокруг кадра — язык плашек у телефона в столпе 01 главной
   (css/shared/pillar-store.css): белая карточка, точка, жирная строка и
   приглушённая под ней. Живут только с 1121: ниже им негде висеть, не
   налезая на текст. */
/* Материал — стекло, как у плашек у телефона в блоке магазина на главной
   (.s-06__float): сквозь него размыто видно снимок. Белее, чем там (80%
   против 44%): плашка лежит на фотографии, и строка должна читаться на
   любом её участке. На глухом белом не было бы видно и блика ниже. */
.lp-float {
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 150px;
    padding: 11px 14px;
    overflow: hidden;                /* блик не выходит за скругление */
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 1px 2px rgba(43, 38, 33, 0.06),
                0 12px 28px -14px rgba(43, 38, 33, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.75);
    animation: lp-float-drift 7s ease-in-out infinite;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-float { background: rgba(255, 255, 255, 0.96); }
}

/* Левитация — тот же дрейф на 6px, что у плашек на главной. Периоды разные
   и не кратные: плашки не ходят в такт. */
@keyframes lp-float-drift {
  50% { transform: translateY(-6px); }
}

/* Блик: светлая косая полоса раз в несколько секунд проходит по стеклу
   слева направо. Большую часть цикла она стоит за левым краем — плашка
   не мигает, а изредка ловит свет. У каждой плашки своя задержка. */
.lp-float::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;                      /* под строками: блик светит стекло, буквы не гаснут */
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.9) 50%, transparent 62%) no-repeat;
    background-size: 250% 100%;
    background-position: 100% 0;
    animation: lp-float-shine 7s ease-in-out infinite;
}

.lp-float > * {
    position: relative;
    z-index: 1;
}

@keyframes lp-float-shine {
  0%, 78% { background-position: 100% 0; }
  100%    { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-float,
  .lp-float::after { animation: none; }
}

.lp-float__title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.2px;
    color: var(--c-ink-surface-2);
    white-space: nowrap;
}

.lp-float__title::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-green-bright);
}

.lp-float__sub {
    padding-left: 13px;
    font-size: 13px;
    line-height: 18px;
    color: var(--c-text-muted);
    white-space: nowrap;
}

/* Все три выступают за кадр на одну величину — 32. Разный свес (28, 44,
   52) читался небрежностью.

   Высота — своя у каждого снимка (--y в разметке плашки): плашка не должна
   ложиться на лицо, экран с графиком, камеру или товар. Правые плашки
   закрывают правую четверть кадра, левая — левую; --y ставит их туда, где
   в этих полосах стена, полка или окно. Без --y — прежние места. */
.lp-float--1 { top: var(--y, 10%);    right: -32px; }
.lp-float--2 { bottom: var(--y, 12%); left: -32px;  animation-duration: 8.5s; animation-delay: -2s; }
.lp-float--3 { top: var(--y, 52%);    right: -32px; animation-duration: 9.5s; animation-delay: -4s; }

.lp-float--2::after { animation-delay: -2.4s; }
.lp-float--3::after { animation-delay: -4.8s; }

/* --- Три преимущества ------------------------------------------------------ */
/* Верхнее поле меньше нижнего: у ряда преимуществ нет своей шапки, и с
   полным полем между кадром первого экрана и карточками выходило 160–240
   пустоты. Секцию отделяет смена тона. */
.lp-benefits {
    padding-block: 40px 64px;
    background: var(--c-bg-plain);
}

/* Составные слова через дефис не рвём: «buzz- / worthy», «lead- /
   generation». Обёртку .lp-nobr ставит разметка. Не U+2011 — в Almarai
   его может не быть. */
.lp-nobr { white-space: nowrap; }

.lp-benefits__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

/* Карточка белая на белёсом — как карточка-цитата на «о нас». Плашка
   значка — мятная, как в карточках «что мы делаем» и способах связи. */
.lp-benefit {
    padding: 28px;
    border: 1px solid var(--c-line-soft);
    border-radius: 18px;
    background: var(--c-surface);
    box-shadow: var(--sh-card);
}

.lp-benefit__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--c-green-mist);
}

.lp-benefit__chip svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--c-green);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-benefit__title {
    margin-top: 20px;
}

/* На телефоне текст карточки в 3–5 строк — ровными строками: при
   обычном переносе оставалась дыра в полстроки («just a few taps,»). С 601
   строки длинные, и balance оставил бы пустой правый край — там pretty. */
.lp-benefit__text {
    margin-top: 10px;
    font-size: 15px;
    line-height: 25px;
    color: var(--c-text-body);
    text-wrap: balance;
}

/* --- Что входит ------------------------------------------------------------ */
.lp-features {
    padding-block: 64px;
}

/* Шапка по центру: надзаголовок с чёрточкой (пара .kicker + .rule, как в
   секциях «о нас» и доверия), заголовок, лид. Шапка — контейнер для
   кегля заголовка. */
.lp-features__head {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.lp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 1.3px;
}

.lp-kicker .rule {
    flex: none;
    width: 24px;
    border-radius: 2px;
}

/* Потолки кегля ниже, чем у заголовка первого экрана: H1 ужимается под
   две строки (--fit), и с прежними потолками H2 выходил крупнее H1.
   --fit-sm — телефонный кегль (до 600) у длинных H2, до трёх строк, как у
   .lp-hero__title: в две строки такие заголовки на 320 выходили 16–22
   точки, кегль названий карточек под ними. С 601 — всегда --fit. */
.lp-features__title {
    /* Потолок на телефоне дорастает до 34 к 600 и встречает 34 ступени 601:
       с постоянными 28 заголовок на границе 600/601 прыгал на пятую часть и
       менял число строк. Второй предел держит две строки на 518–600 (колонка
       601 уже телефонной на 54: поле 20→40 + полоса прокрутки). */
    --lp-max: clamp(28px, min(16px + 3vw, calc((100cqi - 54px) * var(--fit, 1))), 34px);
    max-width: 820px;
    margin-top: 14px;
    font-size: min(var(--lp-max), calc(min(100cqi, 820px) * var(--fit-sm, var(--fit, 1))));
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.lp-features__title em { margin-inline-start: 0; }   /* акцент прямой */

.lp-features__lede {
    max-width: 640px;
    margin-top: 16px;
    color: var(--c-text-body);
    text-wrap: balance;
}

.lp-features__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 40px;
}

/* Карточка кремовая на креме, как в «что мы делаем» на «о нас». */
.lp-feature {
    padding: 28px;
    border: 1px solid var(--c-line-soft);
    border-radius: 18px;
    background: var(--c-bg-alt);
    box-shadow: var(--sh-card);
}

/* Значок карточки — керамическая плитка, как в карточках менеджера и
   доверия на главной (.s-10b__tile, .s-12__tile): тот же размер, тень и
   подъём при наведении. Кадр 140×140 снят так, что глина занимает его
   целиком, — обрезать нечего. Мотив у каждой плитки свой, по смыслу
   карточки (картинки — папка landing, по подпапке на страницу). */
.lp-feature__art {
    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;
}

.lp-feature:hover .lp-feature__art {
    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) {
  .lp-feature__art { transition: none; }
  .lp-feature:hover .lp-feature__art { transform: none; }
}

.lp-feature__title {
    margin-top: 20px;
}

.lp-feature__text {
    margin-top: 10px;
    font-size: 15px;
    line-height: 25px;
    color: var(--c-text-body);
    text-wrap: balance;   /* см. .lp-benefit__text */
}

/* --- Призыв: общий .s-13 --------------------------------------------------
   Кегль заголовка считает сам footer-cta.css (от колонки, с --fit из
   разметки). Здесь только лид — ровными строками, как лид «что входит»:
   длинной строкой с хвостом он выглядел неровно. */
.lp-page .s-13 .s-13__lead { text-wrap: balance; }

/* --- Адаптив: снизу вверх --------------------------------------------------- */
/* Широкий телефон и планшет в портрете: карточка — строкой, значок слева.
   Порог 481, а не 601: во всю ширину текст с balance занимает те же ~290, и
   правая треть карточки на 481–600 пустовала, а на 601 раскладка менялась
   скачком. Ниже 481 (реальные телефоны) — значок сверху. */
@media (min-width: 481px) {
  .lp-benefit,
  .lp-feature {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  .lp-benefit__chip { grid-row: span 2; }
  .lp-feature__art { grid-row: span 2; }
  .lp-benefit__title,
  .lp-feature__title { margin-top: 4px; }
  .lp-benefit__text,
  .lp-feature__text { margin-top: 8px; text-wrap: pretty; }
}

@media (min-width: 601px) {
  .lp-hero { padding-block: 64px 80px; }
  .lp-hero__title {
    --lp-max: 52px;
    font-size: min(var(--lp-max), calc(100cqi * var(--fit, 1)));
  }

  .lp-hero__actions { width: auto; }

  /* На 601–900 кадр под текстом во всю колонку и горизонтальный: узкая
     вертикальная рамка по центру стояла на другой оси, чем текст слева,
     и занимала полтора экрана. С 901 кадр снова рядом с текстом, 4:5. */
  .lp-hero__shot { aspect-ratio: 16 / 10; max-height: none; }

  .lp-benefits { padding-block: 48px 80px; }
  .lp-features { padding-block: 80px; }
  .lp-features__title {
    --lp-max: 38px;
    font-size: min(var(--lp-max), calc(min(100cqi, 820px) * var(--fit, 1)));
  }
  .lp-features__grid { margin-top: 48px; }

  /* Столбик карточек-строк — колонкой 760 по оси шапки уже с 601: на
     769–900 во всю ширину строка текста доходила до ~105 знаков. До ~840
     контейнер и так уже 760, так что ничего не меняется. С 1101 сетка в три
     колонки снимает потолок сама. */
  .lp-benefits__grid,
  .lp-features__grid { max-width: 760px; margin-inline: auto; }

}

/* Две колонки — с 901, как у первого экрана free-basic: текст берёт больше
   (1.25 к 1), иначе заголовок расходится лесенкой. */
@media (min-width: 901px) {
  .lp-hero { padding-block: 72px 96px; }
  .lp-hero__wrap {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 56px;
  }
  .lp-hero__title { --lp-max: 60px; }
  .lp-hero__lede { font-size: 20px; line-height: 32px; }
  .lp-hero__shot { aspect-ratio: 4 / 5; }

  /* Первый экран у всех мини-лендингов одинаковый: две колонки, кадр 4:5.
     У страниц с очень длинным H1 (ecommerce-store и др., .lp-hero--long)
     H1 в узкой колонке выходит мелким; чтобы H2 «что входит» его не
     перерастал, ему занижен потолок — только кегль, раскладка та же. */
  .lp-hero--long ~ .lp-features .lp-features__title { --lp-max: 38px; }

  .lp-benefits { padding-block: 56px 96px; }

  .lp-features { padding-block: 96px; }
  .lp-features__grid { margin-top: 56px; }

}

/* Три колонки карточек — с 1101: на 901–1100 доля выходила 190–260 под
   текст, и названия ломались по слову. Карточка снова вертикальная:
   значок над текстом. */
@media (min-width: 1101px) {
  /* H2 «что входит» — 34 до 1100, 40 с 1101. */
  .lp-features__title { --lp-max: 48px; }

  /* Длинный H1 (.lp-hero--long): H2 «что входит» не крупнее 34 на 1101–1280,
     иначе он перерастает мелкий H1 этих страниц. */
  .lp-hero--long ~ .lp-features .lp-features__title { --lp-max: 48px; }

  .lp-benefits__grid,
  .lp-features__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: none;
  }

  /* Значок, название и текст карточек ряда — на общих строках сетки
     (subgrid): если одно название уходит в две строки, тексты соседних
     карточек всё равно начинаются на одной высоте. */
  .lp-benefit,
  .lp-feature {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
  }
  .lp-benefit__chip,
  .lp-feature__art { grid-row: auto; }
  .lp-benefit__title,
  .lp-feature__title { margin-top: 20px; }
  .lp-benefit__text,
  .lp-feature__text { margin-top: 10px; }
}

@media (min-width: 1121px) {
  .lp-float { display: flex; }
}

@media (min-width: 1281px) {
  .lp-hero { padding-block: 80px 96px; }
  .lp-hero__title { --lp-max: 68px; }
  .lp-hero__lede { font-size: 22px; line-height: 34px; }

  .lp-benefits { padding-block: 64px 120px; }
  .lp-features { padding-block: 120px; }
  .lp-features__title { --lp-max: 56px; }
  .lp-hero--long ~ .lp-features .lp-features__title { --lp-max: 56px; }
  .lp-features__grid { margin-top: 64px; }

  .lp-benefit,
  .lp-feature { padding: 32px; }

}

/* --- Расширенный состав (ecommerce-store) -----------------------------------
   Блоки free-basic на этой странице — как есть; здесь только две
   мелочи, которых у free-basic нет: лид под заголовком вопросов (по центру,
   как сам заголовок) и отступ списка галочек под лидом «трёх шагов». */
.lp-page .fb-faq-wrap .lp-faq__lede {
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
}

/* Шапка «трёх шагов» центрирована (так у free-basic), и список столбиком
   держался за левый край колонки — съезжал под заголовком. Здесь он в ряд
   по той же оси; не помещается — пункты переносятся, тоже по центру. */
.lp-how__check {
    display: grid;
    width: fit-content;
    margin: 24px auto 0;
    justify-items: start;   /* галочки в одну вертикаль */
    gap: 10px;
}

/* В ряд — с широких, где строка помещается в одну (колонка ~758). */
@media (min-width: 901px) {
  .lp-how__check {
    display: flex;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
  }
}

/* ---------------------------------------------------------------
   css/pricing/00-pricing.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — страница цен (pricing.html)

   Состав снят с образца: первый экран по центру → таблица
   тарифа → «Everything included» → «Fees and charges» → вопросы →
   финальный призыв. Оформление наше, большая часть — общие блоки и шаблон
   мини-лендингов (css/landing/00-landing.css). Здесь только то, чего у них
   нет:

      первый экран   .lp-hero.pr-hero   крем + гирих, текст по центру
      тариф          .pr-plan           белёсый, белая таблица
      что входит     .pr-inc            крем, кремовые карточки (1 → 2 → 4 колонки)
      комиссии       .pr-fees           аккордеон со free-basic, белёсый
      вопросы        .fb-faq-wrap       аккордеон со free-basic, крем
      призыв         .s-13              общий блок

   Тон секций чередуется: соседних светлых одного тона нет.

   Всё, что ниже, — телефонные значения. Ступени идут строго по
   возрастанию: правила равной силы, побеждает последнее подошедшее.
   ========================================================================== */

/* --- Первый экран по центру --------------------------------------------------
   Кадра у образца здесь нет, и колонка одна. Колонка текста — та же
   .lp-hero__text (контейнер для кегля заголовка), только по центру и с
   потолком ширины: во весь контейнер лид шёл строкой в сотню знаков. */
.pr-hero__text {
    max-width: 880px;
    margin-inline: auto;
    align-items: center;
    text-align: center;
}

.pr-hero .lp-hero__actions { justify-content: center; }

/* --- Значок в мятной плашке ---------------------------------------------------
   Линия в цвет сайта — как у значков преимуществ мини-лендингов. */
.pr-chip {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--c-green-mist);
}

.pr-chip svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--c-green);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Тарифы: таблица сравнения -----------------------------------------------
   Три тарифа (решение владельца, 22.09.2026): подписи слева + три колонки.
   Колонка Basic (вторая, сразу после подписей) выделена мятной заливкой и
   зелёной чертой сверху. Различаются тарифы только лимитом товаров и
   местом, ✓-строки одинаковы. */
.pr-plan {
    padding-block: 64px;
    background: var(--c-bg-plain);
}

/* Рамка-карточка. На узком экране таблица прокручивается вбок ВНУТРИ рамки
   (min-width колонок больше экрана), а страница вбок не едет: overflow
   держит прокрутку и скругление. */
.pr-table {
    max-width: 1140px;   /* как таблица тарифов у образца */
    margin: 40px auto 0;
    overflow: hidden;
    border: 1px solid var(--c-line-soft);
    border-radius: 20px;
    background: var(--c-surface);
    box-shadow: var(--sh-card);
}

.pr-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pr-table__grid {
    width: 100%;
    min-width: 600px;               /* 4 колонки: до ~640 таблица прокручивается */
    border-collapse: collapse;
    table-layout: fixed;
}

.pr-table__grid th,
.pr-table__grid td {
    padding: 15px 12px;
    border-top: 1px solid var(--c-line-soft);
    border-left: 1px solid var(--c-line-soft);
    text-align: center;
    font-size: 16px;
    vertical-align: middle;
}

.pr-table__grid thead th { border-top: 0; vertical-align: top; }

/* Первая колонка — подписи строк, слева, без левой кромки. */
.pr-table__grid th:first-child,
.pr-table__grid td:first-child { border-left: 0; }

.pr-table__grid tbody th {
    padding-left: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 23px;
    text-align: left;
    color: var(--c-text-body);
}

.pr-table__corner {
    width: 30%;
    padding-left: 16px;
    padding-bottom: 16px;
    vertical-align: bottom;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-align: left;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

/* Шапка тарифа. */
.pr-table__plan { position: relative; padding-block: 18px 16px; }

.pr-table__name {
    display: block;
    font-family: var(--f-body);
    font-size: 19px;
    font-weight: 800;
  /* Без отрицательной разрядки: у Almarai в жирном 800 на крупном кегле
     буквы стягивались («i» в «Basic»/«Ultimate» липла к соседней). */
    letter-spacing: 0;
    color: var(--c-text);
}

.pr-table__aud {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 17px;
    color: var(--c-text-muted);
}

/* Цена: число и «валюта /mo» — отдельными узлами, их пишет скрипт рынков. */
.pr-table__price {
    display: block;
    margin-top: 10px;
    font-family: var(--f-body);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    color: var(--c-text);
}

.pr-table__num { font-size: 30px; letter-spacing: -0.03em; }
.pr-table__cur { font-size: 13px; font-weight: 700; color: var(--c-text-muted); }

.pr-table__note {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: var(--c-text-muted);
}

/* Выделенный Basic — вторая колонка (подписи + три тарифа). Мятная заливка
   по всей колонке, зелёная черта сверху на шапке, зелёное имя. */
.pr-table__grid th:nth-child(2),
.pr-table__grid td:nth-child(2) { background: var(--c-green-mist); }
.pr-table__plan--feat { box-shadow: inset 0 3px 0 var(--c-green); }
.pr-table__plan--feat .pr-table__name { color: var(--c-green-text); }

.pr-tick {
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    fill: none;
    stroke: var(--c-green);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pr-table__value {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-text);
}

/* Строка кнопок: Basic — кнопка оформления во всю ширину ячейки; Advanced и
   Ultimate доступны в кабинете после трёх месяцев, поэтому у них тихая
   подпись, а не ссылка-заглушка. */
.pr-table__cta-row th,
.pr-table__cta-row td { padding-block: 18px; vertical-align: middle; }
.pr-table__btn { width: 100%; padding-inline: 12px; }
.pr-table__upgrade {
    font-size: 16px;
    line-height: 22px;
    color: var(--c-text-muted);
}

/* --- Что входит ---------------------------------------------------------------
   Фон — крем страницы, карточки — кремовые на креме, как на мини-лендингах.
   У образца сетка 4 × 2 со значком над текстом; ниже 1101 — столбик и две
   колонки со значком слева. */
.pr-inc {
    padding-block: 64px;
}

.pr-inc__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 40px;
}

/* align-content: start — карточки ряда одной высоты, и без него лишнюю
   высоту делили строки сетки: у карточки с подпунктами в одну строку
   текст отъезжал от названия вниз. */
.pr-inc__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
    align-content: start;
    padding: 24px;
    border: 1px solid var(--c-line-soft);
    border-radius: 18px;
    background: var(--c-bg-alt);
    box-shadow: var(--sh-card);
}

.pr-inc__item .pr-chip { grid-row: span 2; }

.pr-inc__title { margin-top: 2px; }

.pr-inc__text {
    margin-top: 6px;
    font-size: 15px;
    line-height: 24px;
    color: var(--c-text-body);
}

/* --- Комиссии -----------------------------------------------------------------
   Аккордеон со free-basic. Оговорка под списком — мельче и тише ответа. */
.pr-fees__fine {
    margin-top: 24px;
    font-size: 13px;
    line-height: 21px;
    color: var(--c-text-muted);
}

.pr-fees__fine a,
.pr-faq__link {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--c-green-text);
}

/* В ответе про вывод комиссии — абзацы и список сборов. */
.pr-fees .fb-faq__a p + p { margin-top: 10px; }

.pr-fees .pr-fees__list {   /* сильнее сброса ul[class] из core/base.css */
    margin-top: 4px;
    padding-left: 1.25em;
    list-style: disc;
}

.pr-fees__list li::marker { color: var(--c-text-muted); }

/* --- Адаптив: снизу вверх --------------------------------------------------- */
@media (min-width: 601px) {
  .pr-plan { padding-block: 80px; }
  .pr-table { margin-top: 48px; }

  .pr-table__grid th,
  .pr-table__grid td { padding: 17px 18px; }

  .pr-table__plan { padding-block: 26px 22px; }
  .pr-table__name { font-size: 21px; }
  .pr-table__num { font-size: 38px; }
  .pr-table__cur { font-size: 15px; }
  .pr-table__aud { font-size: 14px; }
  .pr-table__note { font-size: 14px; }


  /* До 900 — столбик со значком слева, как на телефоне: на 601 две
     колонки оставляли тексту 138 точек, и названия ломались надвое. */
  .pr-inc { padding-block: 80px; }
  .pr-inc__grid { margin-top: 48px; }
}

@media (min-width: 901px) {
  .pr-plan { padding-block: 96px; }
  .pr-table { margin-top: 56px; }

  /* С 901 контейнер шире min-width таблицы (600) — прокрутки нет, колонки
     дышат. */
  .pr-table__grid th,
  .pr-table__grid td { padding: 19px 22px; }
  .pr-table__name { font-size: 22px; }
  .pr-table__num { font-size: 44px; }
  .pr-table__value { font-size: 17px; }
  .pr-table__upgrade { font-size: 17px; }
  .pr-tick { width: 26px; height: 26px; }

  .pr-inc { padding-block: 96px; }
  .pr-inc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 56px;
  }
}

@media (min-width: 1281px) {
  .pr-plan { padding-block: 120px; }
  .pr-table { margin-top: 64px; }
  .pr-table__grid th,
  .pr-table__grid td { padding: 22px 26px; }
  .pr-table__name { font-size: 24px; }
  .pr-table__num { font-size: 50px; }

  /* Четыре колонки, как у образца, значок над текстом. С 1281, а не с
     1101: на 1101–1280 тексту оставалось 180 точек — там две колонки.
     Значок, название и описание — три общие строки ряда (subgrid): на
     1281–1420 «Online Store + Hosting» и «Reports and Analytics» идут в
     две строки, и без subgrid описания в ряду начинались на разной
     высоте. row-gap: 0 — иначе внутрь карточки попадает зазор сетки. */
  .pr-inc { padding-block: 120px; }
  .pr-inc__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 64px;
  }
  .pr-inc__item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
    padding: 28px;
  }
  .pr-inc__item .pr-chip { grid-row: auto; margin-bottom: 20px; }
  .pr-inc__title { margin-top: 0; }
  .pr-inc__text { margin-top: 8px; }
}
/* ========================= /PAGE STYLES ========================== */

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