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

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

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

/* ========================= PAGE STYLES =========================== */
/* ---------------------------------------------------------------
   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/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/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/about/00-about.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — О нас

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

   ТОН СЕКЦИЙ. По правилу из core/base.css соседних светлых секций одного
   тона не бывает: крем и белёсый идут через одну. Раскладка страницы:

      первый экран   крем     (заливки нет, берёт фон body)
      наша история   белёсый
      что мы делаем  крем
      наши слова     белёсый
      показатели     крем     (общая .s-02, заливки не имеет)
      доверие        ТЁМНАЯ   (общая .s-12)
      команда        белёсый
      призыв         ТЁМНАЯ   (общая .s-13)
      подвал         ТЁМНАЯ

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

   КАК У ОБРАЗЦА (сверка с образца на 375, 768 и 1440,
   17.09.2026). Совпадают расстановка, пропорции и расстояния: вертикальный
   кадр истории 2:3 на телефоне, кнопка «что мы делаем» по ширине текста,
   карточки с полями 24/28 и шагом 24 на всех ширинах, квадратный портрет
   основателя, кадры команды в столбик до 900 (3:4 / 3:2 / 16:9) и мозаикой
   с 901, поля секций 96–120. Общие блоки — показатели, доверие, призыв —
   оставлены такими же, как на остальных страницах сайта.

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

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

   Поля — как у образца (сверка 17.09.2026 на 375/768/1440): от низа
   шапки до плашки около 90, снизу 60–100. Урезанное верхнее поле «из-за
   липкой шапки» прижимало экран к шапке: у образца шапка той же высоты, а
   сверху 90. С 901 шапка у нас выше на 24 (96), поэтому сверху 72 —
   плашка встаёт на то же место от верха страницы. */
.ab-hero {
    padding-block: 88px 64px;
}

.ab-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

/* Потолок строки. 620 — одно число на обе внутренние страницы: при кегле
   лида в 20 это около шестидесяти знаков в строке, то есть внутри
   привычной полосы чтения. Разные потолки на соседних страницах дали бы
   два разных первых экрана там, где всё остальное у них совпадает до
   единицы. Второе такое же правило стоит в css/contact/00-contact.css. */
.ab-hero__lede {
    max-width: 620px;
    color: var(--c-text-body);
  /* Лид по центру: balance делит его на ровные строки. С pretty на
     414–600 последней оставалась «big budget.» в 58 точек. */
    text-wrap: balance;
}

/* Курсивное слово в заголовках — подтянуто к предыдущему. У Almarai нет
   курсива, браузер наклоняет буквы сам, и верх первой буквы уезжает
   вправо: перед «Tajiro?» стоял пробел вдвое шире, чем «What is» (на 1440
   23 точки против 11), и заголовок читался «Whatis   Tajiro?». Сдвиг
   подобран замером просветов по пикселям на 375/768/1440 под первую букву
   слова: у «T» вылет наклона больше, у «G», «d», «c» меньше. Число строк
   заголовков от сдвига не меняется (проверено на 320–1920). */
.ab-hero__title em { margin-inline-start: 0; }
/* Знак вопроса у Almarai с широким левым полем, и наклон его ещё
   раздвигает: «Tajiro ?» читался отдельно. Подтянут к «o». */
.ab-hero__q { margin-inline-start: -0.07em; }
.ab-story__title em,
.ab-do__title em { margin-inline-start: 0; }
.ab-people__title em { margin-inline-start: 0; }

/* Кнопка на телефоне во всю ширину — это общее правило из core/base.css.
   Здесь ей задан только верхний отступ сверх зазора колонки: кнопка и
   строка условий под ней — одна группа. Как у образца: от лида до кнопки
   36, от кнопки до условий 16–18. */
.ab-hero__cta {
    margin-top: 18px;
}

/* Строка условий под кнопкой. Значок в строке перед первым словом, как у
   .s-13__trust: флексом текст становился коробкой во всю ширину, и на 320,
   где строка ложится в две, значок висел у левого края колонки, а строки
   стояли по центру. Пункты склеены в разметке (.nobr) — перенос только
   после точки.

   На телефоне кегль 12: при 13 строка (315) не входила в колонку 320–335
   рядом со значком, и «needed» уходило на вторую строку одно. */
.ab-hero__note {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--c-text-muted);
  /* На самых узких (320–344) строка всё равно не входит — тогда две
     ровные строки. */
    text-wrap: balance;
}

.ab-hero__note-icon {
    display: inline-block;
    margin-right: 6px;
    vertical-align: -2px;
}

/* --- Наша история --------------------------------------------------------- */
.ab-story {
    padding-block: 96px;
    background: var(--c-bg-plain);
}

/* От текста до кадра в столбик 48 — как у образца на 375 и 768. */
.ab-story__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

/* Надзаголовок с чёрточкой — общая пара .kicker + .rule, как у секций
   доверия и менеджера. Собран одним правилом на обе секции страницы:
   второй раз те же четыре строки писать незачем.

   Кегль и разрядка перебиты явно. База даёт .kicker 12px с разрядкой 1.6 —
   это надзаголовок БЕЗ чёрточки. Все надзаголовки с чёрточкой в проекте
   идут 13/1.3 (shared/trust-security.css, home/10b-growth-manager.css), и
   разрядки 1.6 рядом с линейкой нет нигде.

   Чёрточка укорочена до 24: полные 120 из базы рассчитаны на линейку ПОД
   текстом, а здесь она идёт перед ним. flex: none — чтобы флекс не сжал
   двухпиксельную полоску в ноль. */
.ab-story__kicker,
.ab-people__head .kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 1.3px;
}

.ab-story__kicker .rule,
.ab-people__head .rule {
    flex: none;
    width: 24px;
    border-radius: 2px;
}

.ab-story__title {
    margin-top: 14px;
}

/* Интерлиньяж свой, 16/27: общий 1.5 (16/24) рядом с образцом (16/28.8)
   читался сбитым. С 1101 — 18/30. */
.ab-story__p {
    margin-top: 16px;
    line-height: 27px;
    color: var(--c-text-body);
  /* pretty, а не balance: balance стоит на заголовках, он выравнивает
     строки по длине и на абзаце в четыре строки даёт рваный правый край.
     pretty правит только хвост — не оставляет одно слово в последней
     строке, а остальное не трогает. */
    text-wrap: pretty;
}

/* «A ready-made» не рвём: ни по дефису, ни с артиклем в конце строки.
   Не U+2011: в Almarai его может не быть, и дефис подставился бы из
   запасного шрифта. */
.ab-story__nobr { white-space: nowrap; }

.ab-story__figure {
    margin: 0;
}

.ab-story__shot {
    width: 100%;
    height: auto;
  /* Файл — вертикальный кадр 2:3 целиком (1000×1500). На телефоне он так
     и стоит, как у образца на 375: 327×490 у них, 335×502 у нас. На
     планшете рамка 4:3, рядом с текстом — почти квадрат; см. ступени. */
    aspect-ratio: 2 / 3;
  /* Потолок для широких телефонов: 2:3 во всю колонку на 600 выходило
     560×840, выше экрана. На 375 кадр 335×502 потолка не касается. */
    max-height: 520px;
    object-fit: cover;
    border-radius: var(--r-card);
  /* Кромка и тень — материал карточек страницы: у снимка по краям
     пересвеченные окна почти цвета фона секции, и без кромки углы и
     скругления пропадали. */
    box-shadow: 0 0 0 1px var(--c-line-soft), var(--sh-card);
}

/* --- Что мы делаем -------------------------------------------------------- */
.ab-do {
    padding-block: 96px;
}

/* Шапка блока: заголовок, лид и кнопка столбиком. Кнопка по содержимому
   слева на любой ширине — и на телефоне тоже, как у образца (у него на
   375 она 254 из 327). Общее правило «на телефоне во всю ширину» из
   core/base.css здесь перебито явно. В ряд с заголовком она встаёт только
   с 901; разбор порога — в ступени 901 ниже. */
.ab-do__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.ab-do__head .ab-do__cta { width: auto; }

.ab-do__lede {
    margin-top: 14px;
    color: var(--c-text-body);
}

/* Карточки. Материал — как у карточек способов связи на контактах:
   скругление 14, кромка --c-line-soft, тень --sh-card, мятная плашка под
   значок. Геометрия — образца (сверка 17.09.2026 на 375/768/1440): поля
   24/28, от плашки до текста 24, шаг между карточками 24, от шапки до
   сетки 64, плашка 64 со значком 28. Раньше с 601 карточки ужимались до
   геометрии контактов (поля 16/18, шаг 14–16, плашка 40) и на планшете и
   десктопе читались строками списка.

   Колонка сетки ровно под квадрат значка: значок не растягивает строку и
   не съезжает вниз, когда текст уходит в три строки.

   На телефоне плашка 56 и зазор 20: при 64 и 24 колонка текста на 375
   сужалась до 189, и «Marketing that runs for you» уходило в две строки. */
.ab-do__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 64px;
}

.ab-do__card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
  /* Плашка — по верху, рядом с названием: по центру она на телефоне, где
     текст в 3–4 строки, висела посреди абзаца. */
    align-items: start;
    gap: 20px;
    padding: 24px 28px;
    border: 1px solid var(--c-line-soft);
    border-radius: 14px;
    background: var(--c-bg-alt);
    box-shadow: var(--sh-card);
}

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

.ab-do__chip img {
    width: 26px;
    height: 26px;
}

/* Название над пояснением — как значение в карточках контактов
   (.ct__way-value): жирное, основной цвет текста, на ступень крупнее
   пояснения на каждой ширине. */
.ab-do__body { min-width: 0; }

/* Склейка хвоста пояснения: чтобы последняя строка не была в одно-два
   слова («day one.», «and sell.»). */
.ab-do__nobr { white-space: nowrap; }

.ab-do__name {
    display: block;
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: var(--c-text);
    text-wrap: balance;
}

.ab-do__text {
    display: block;
    min-width: 0;
    font-size: 15px;
    line-height: 23px;
    color: var(--c-text-body);
    text-wrap: pretty;
}

/* --- Слова компании ------------------------------------------------------- */
.ab-word {
    padding-block: 96px;
    background: var(--c-bg-plain);
}

/* Карточка белая, а не кремовая. Секция здесь белёсая (--c-bg-plain
   #fbfaf9), и кремовая плашка --c-bg-alt #fbf8f3 на ней отличалась бы от
   фона на 0/2/6 по каналам — то есть не читалась бы плашкой вовсе.
   Кремовые плашки в проекте лежат на кремовом фоне, где разница видна.

   Поля и скругление: 24 на телефоне, 32 с 601, радиус 18 (так же была
   устроена карточка-цитата главной, снятая 30.09.2026).
   Поля теперь у текстовой части: портрет стоит в карточке без полей, в
   край, и скругление ему даёт overflow карточки.

   Потолок 1000 по центру — как у образца: карточка уже сетки «что мы
   делаем» над ней, а не лента во весь контейнер. Контейнер уже 1000
   только с окна ~1130, ниже правило ничего не меняет. */
.ab-word__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 1000px;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--c-line-soft);
    border-radius: 18px;
    background: var(--c-surface);
    box-shadow: var(--sh-card);
}

/* Портрет. Снимок лежит абсолютно и в высоту карточки не вмешивается:
   на телефоне рамка квадратная, с 601 портрет стоит слева и рамка тянется
   за текстом рядом. Кадр квадратный, над головой запас ~20 из 672 (файл —
   весь исходник образца, по бокам срезано по 16) — при обрезке держим верх. */
.ab-word__photo {
    position: relative;
    aspect-ratio: 672 / 720;   /* на телефоне квадрат, как у образца (325×325 на 375) */
    background: var(--c-bg-alt);
}

.ab-word__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
}

/* Снизу поле больше, чем сверху: глиф кавычки выходит над своей строкой
   на 7–8 точек, и при равных полях кавычка липла к фото, а низ карточки
   под должностью выглядел теснее верха. */
.ab-word__body {
    margin: 0;
    padding: 24px 24px 32px;
}

/* Кавычка. Крупная, песочная, дисплейным — как номера секций. Своей
   высоты ей не дано: междустрочие ужато до половины кегля, иначе над
   цитатой встаёт пустая строка в полсотни точек. Отступ сверху — как раз
   на тот вылет глифа над строкой. */
.ab-word__mark {
    display: block;
    margin-top: 8px;
    font-family: var(--f-display);
    font-size: 64px;
    font-weight: 600;
    line-height: 34px;
    color: var(--c-sand);
}

.ab-word__quote {
    margin: 10px 0 0;
}

/* КУРСИВА ЗДЕСЬ НЕТ. У Almarai нет курсивного начертания, браузер подделал
   бы его наклоном, и на пяти строках подряд это видно как брак. По своду
   стиля роль курсива в цитате берёт кегль: строка крупнее обычного текста
   на две ступени и темнее лида. */
.ab-word__quote p {
    margin: 0;
    font-size: 19px;
    line-height: 30px;
    letter-spacing: -0.3px;
    color: var(--c-text);
    text-wrap: pretty;
}

/* Подпись под цитатой — кегли цитаты главной: имя 17 полужирным, вторая
   строка 15 приглушённым. Отступ от цитаты 26, как у образца (от низа
   цитаты до имени ~40): при 18 подпись прилипала к последней строке. */
.ab-word__by {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 26px;
}

.ab-word__by-name {
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    color: var(--c-text);
}

.ab-word__by-role {
    font-size: 15px;
    line-height: 22px;
    color: var(--c-text-muted);
}

/* --- Команда -------------------------------------------------------------- */
.ab-people {
    padding-block: 96px;
    background: var(--c-bg-plain);
}

/* Расстановка как у образца («Our Team»): шапка по
   центру, под ней три кадра — один высокий слева во всю высоту ряда, два
   широких справа друг над другом. На телефоне И НА ПЛАНШЕТЕ все три в
   столбик во всю ширину, как у образца на 768; мозаика — с 901. */
.ab-people__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.ab-people__lede {
    max-width: 560px;
    color: var(--c-text-body);
  /* По центру — balance: с pretty на 600 хвостом оставалось «their own.» */
    text-wrap: balance;
}

/* От лида до кадров 64 и шаг между кадрами 24 — на всех ширинах, как у
   образца. При 32 и 12 шапка слипалась с кадрами, а кадры — в ленту. */
.ab-people__shots {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 64px;
}

/* Рамка кадра держит пропорцию сама, снимок лежит в ней абсолютно и
   обрезается по рамке. Пока кадра нет, рамку держит фактура — та же пара
   «гирих поверх градиента», что у экрана-ленты на free-basic
   (.fb-phone__screen--reel): место читается фактурой, а не поломкой. */
.ab-people__shot {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: var(--r-card);
    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;
}

/* Пропорции в столбик на телефоне — как у образца на 375: высокий 3:4,
   второй 3:2, третий 16:9. С 601 высокий тянется по ряду, правые 6:5 и 7:5. */
.ab-people__shot--tall { aspect-ratio: 3 / 4; max-height: 520px; }   /* на 600 кадр 3:4 выходил 560×747 */
.ab-people__shot:nth-child(3) { aspect-ratio: 16 / 9; }

.ab-people__shot img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Полоса показателей ---------------------------------------------------
   Общая .s-02 стоит на главной и на free-basic ПЕРВОЙ после первого
   экрана, и поля у неё нарочно неровные: сверху 36, снизу 56. Причина
   записана в shared/stats.css — верх секции выглядывает из-под первого
   экрана, и при равных полях из-за сгиба торчало бы пустое поле.

   Здесь она стоит серединой страницы, где выглядывать неоткуда, и
   неровные поля дают разный воздух над полосой и под ней. Поля ровные:
   64 на телефоне, 80 с 601 — и дальше не растут. Полоса узкая, у образца
   счётчик на этом месте идёт с полями 60; при 96–120 на десктопе ряд
   карточек терялся в пустом креме.

   Селектором взят сосед, а не класс на body: полоса на этой странице
   ровно одна и стоит ровно за словами компании. Появится вторая — станет
   видно сразу, что правило её не берёт. */
.ab-word + .s-02 {
    padding-block: 64px;
}

/* --- Финальный призыв -------------------------------------------------------
   Заголовок «Ready to build something of your own?» — не длиннее двух
   строк на любой ширине: «Ready to build» / «something of your own?».
   Кегль считает общий footer-cta.css от колонки призыва, отношение к
   колонке (--fit) стоит в разметке — замер на 320–1920. С 1281 строка
   «something of your own?» при 72 занимает 784 точки при потолке
   заголовка 760, поэтому потолок поднят до 820 (ступень 1281 ниже). */

/* Лид призыва. balance — чтобы на узких телефонах (320–344) третья
   строка не состояла из «side.». С 901 потолок 680: при общих 600 лид
   20-м кеглем ложился в 576 + хвост «your side.» в 82 точки, при 680 он
   встаёт в одну строку, как на 768. */
.s-13 .ab-final__lead { text-wrap: balance; }

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

   ВЕРТИКАЛЬНЫЕ ПОЛЯ СЕКЦИЙ. На сайте шкала 64 / 80 / 96 / 120, но у
   секций этой страницы — 96 на телефоне и планшете и 120 с 1281. Так
   решено по сверке с образцом (17.09.2026): у образца поля секций «о нас»
   не уменьшаются к телефону (100–120), и при наших 64/80 стыки выходили
   128/160 против 200–227 — страница читалась сплошной лентой. Общие
   секции (показатели, доверие, призыв) держат общую шкалу, как на всех
   страницах.
   -------------------------------------------------------------------------- */
/* 320–374: при плашке 56 и полях 28 колонке текста карточек «что мы
   делаем» оставалось 148, и пояснения рассыпались по слову («Pre-built,»,
   «required.»). Здесь ей ~182 — три строки, как на 375. 375 и шире,
   сверенные с образцом, не меняются. */
@media (max-width: 374px) {
  .ab-do__card { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px; }
  .ab-do__chip { width: 44px; height: 44px; border-radius: 12px; }
  .ab-do__chip img { width: 22px; height: 22px; }
}

@media (min-width: 601px) {
  /* 22 + 14 = 36 от лида до кнопки, 22 − 6 = 16 от кнопки до условий —
     как у образца. Строка условий здесь в одну строку при кегле 13. */
  .ab-hero__inner { gap: 22px; }
  .ab-hero__cta { margin-top: 14px; }
  .ab-hero__note {
    margin-top: -6px;
    font-size: 13px;
    line-height: 20px;
  }
  .ab-hero__note-icon { margin-right: 8px; }

  /* Кадр истории в одну колонку во всю ширину: 2:3 на 521 точку — это
     780 в высоту, почти экран планшета. Здесь рамка 4:3 по центру кадра,
     как у образца на 768: над головой около трети рамки, низ по голень. */
  .ab-story__shot { aspect-ratio: 4 / 3; object-position: 50% 50%; max-height: none; }

  /* В столбик 601–900 абзац шёл во всю ширину, 673–805 точек, до 115
     знаков в строке. 600 — около восьмидесяти знаков при кегле 16. С 901
     колонка уже 560, правило не срабатывает. */
  .ab-story__p { max-width: 600px; }

  .ab-do__card { grid-template-columns: 64px minmax(0, 1fr); gap: 24px; }
  .ab-do__chip { width: 64px; height: 64px; border-radius: 16px; }
  .ab-do__chip img { width: 28px; height: 28px; }
  .ab-do__name { font-size: 17px; line-height: 25px; }
  /* Пояснения — обычный перенос (pretty из базы). balance на 768 рвал
     «Marketing…» и «No barriers…» на две короткие строки с пустотой справа.
     Хвосты «from day one.» и «Just open and sell.» склеены в разметке. */
  .ab-do__text { font-size: 16px; line-height: 25px; }
  /* Все карточки одной высоты: пояснения в одну и в две строки давали
     стопку 112/125 вразнобой. У образца на 768 шаг ровный. */
  .ab-do__grid { grid-auto-rows: 1fr; }
  /* Излишек высоты делится поровну сверху и снизу, а не копится под
     коротким пояснением: карточки в одну строку выглядели просевшими. */
  .ab-do__card { align-content: center; }

  /* Портрет слева, цитата справа — как на десктопе, уже с 601. Было как у
     образца на 768: портрет во всю ширину полосой 673×320, и кадр резался
     по подбородку и плечи. Рядом с текстом рамка вертикальная (на 768
     около 282×350), и снимок виден целиком — от головы до скрещённых рук
     с часами. Доли 42/58, а не фиксированная колонка: на 601 карточке
     остаётся 520, и колонка 300 оставила бы цитате меньше двухсот точек.
     Кегль цитаты здесь 18/28, кавычка остаётся телефонной. */
  /* Рамка портрета не шире 300 и не ниже 380: на ~850–900 доля 42 %
     становилась шире своей высоты, и кадр резался по часам. На 601–~810
     это те же 42 %, дальше 300 — как с 901, без скачка на границе. */
  .ab-word__card { grid-template-columns: min(42%, 300px) minmax(0, 1fr); }
  .ab-word__photo { aspect-ratio: auto; min-height: 380px; }
  .ab-word__body { align-self: center; padding: 28px; }
  .ab-word__quote p { font-size: 18px; line-height: 28px; }

  .ab-word + .s-02 { padding-block: 80px; }

  /* Мозаика 1.2 : 1, как у образца, — с 601, а не с 901: столбиком на
     планшете высокий кадр выходил 673×897, выше экрана. Высокий кадр
     занимает оба ряда и растягивается по высоте двух широких с зазором —
     своя пропорция ему не нужна, иначе колонки встали бы ступенькой.
     Правые кадры разной высоты, 6:5 и 7:5, — так высокий выходит около
     3:4, как у образца; при двух одинаковых 3:2 он был почти квадратным. */
  .ab-people__shots { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

  .ab-people__shot--tall {
    grid-row: 1 / 3;
    aspect-ratio: auto;
    max-height: none;
  }

  .ab-people__shot:nth-child(2) { aspect-ratio: 6 / 5; }
  .ab-people__shot:nth-child(3) { aspect-ratio: 7 / 5; }
}

/* --- Две колонки ----------------------------------------------------------
   Порог 901: с него контейнеру остаётся 773, каждой доле по 354 при зазоре
   64. Абзацу истории это даёт около шестидесяти знаков в строке, карточке
   «что мы делаем» — 290 точек под текст, то есть две строки вместо трёх.
   На 601–900 обе раскладки пробовались и обе ломались: доля выходила 253,
   текст карточки рассыпался на четыре строки, а снимок истории мельчал до
   значка. */
@media (min-width: 901px) {
  /* Шапка здесь 96 вместо 72: сверху 72, плашка встаёт на ~169 от верха
     страницы, как у образца (163). */
  .ab-hero { padding-block: 72px 96px; }

  .ab-story__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }

  /* Рядом с колонкой текста — почти квадрат, как у образца на десктопе.
     Из кадра 2:3 берём полосу от окон с растением до ног девушки: сдвиг
     рамки на 76 % по высоте. */
  .ab-story__shot { aspect-ratio: 1100 / 1122; object-position: 50% 76%; }

  /* Кнопка уходит вправо и встаёт на одну линию с заголовком — как у
     образца. Порог 901, а не 601: на 601 контейнеру остаётся 521, кнопка
     берёт 265 и зазор 32, тексту достаётся 224 — лид рассыпался на четыре
     строки рядом с кнопкой в одну. Здесь контейнер 773, тексту остаётся
     476, и лид ложится в две. Ниже порога кнопка стоит под лидом: до 601
     во всю ширину колонки (общее правило), с 601 по содержимому слева. */
  .ab-do__head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }

  .ab-do__head-text { flex: 1 1 auto; min-width: 0; }
  .ab-do__cta { flex: none; }

  /* Ряды своей высоты: карточки одного ряда и так равны, а 1fr тянул все
     ряды под одну трёхстрочную. Содержимое по верху — названия соседей в
     ряду на одной линии. */
  .ab-do__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .ab-do__card { align-content: normal; }
  /* В две колонки строка пояснения длинная, и balance ужимал обе строки
     до ~300 из 460 — справа в карточке оставалась пустота. */
  .ab-do__text { text-wrap: pretty; }

  /* Портрет слева во всю высоту карточки (с 601), колонка здесь фиксирована.
     Колонка 300: на 901 тексту остаётся 393, и цитата кеглем 19 ложится в семь
     строк — рядом с портретом это ровная колонка, а не узкая лента.
     Кегль цитаты растёт с 1101, когда тексту достаётся больше 550. */
  .ab-word__card { grid-template-columns: 300px minmax(0, 1fr); }
  .ab-word__body { padding: 40px; }
  .ab-word__mark { font-size: 76px; line-height: 40px; }
  .ab-word__quote p { font-size: 19px; line-height: 30px; }

  /* Текстовой шапке потолок: лид набран .lead, и на всю ширину контейнера
     строка уходит за сотню знаков. Заголовку потолок не нужен — он в две
     слова. */
  .ab-people__lede { max-width: 640px; }

  .s-13 .ab-final__lead { max-width: 680px; }
}

@media (min-width: 1101px) {
  /* История: текст около 80 % высоты кадра, как у образца (435 из 540).
     Кадр 4:3 по центру: над головой девушки окна и растение целиком, низ
     по ножки стола. При 5:4 со сдвигом 70 % фигура липла к верхнему краю.
     Абзацы 17/29 — кегль пояснений карточек на этой ступени. При 18/30
     неразрывное «A ready-made» не входило в первую строку второго абзаца,
     и весь абзац выходил на 80–100 точек уже первого. На 901–1100 колонки
     узкие, текст и так выше, там кадр остаётся почти квадратным. */
  .ab-story__shot { aspect-ratio: 4 / 3; object-position: 50% 50%; }
  .ab-story__p { font-size: 17px; line-height: 29px; }

  /* Карточка 1000: портрет 320, колонке текста 582 при полях 48 — около
     семидесяти знаков в строке, как у образца. */
  .ab-word__card { grid-template-columns: 320px minmax(0, 1fr); }
  .ab-word__body { padding: 48px; }
  /* 20/32: при 22/34 цитата ложилась в пять строк с хвостом «can start.»,
     а balance сжимал все строки до 430–480 из 582 — справа пустела треть
     карточки. При 20 — четыре строки почти во всю колонку, как у образца. */
  .ab-word__quote p { font-size: 20px; line-height: 32px; }

  .ab-do__name { font-size: 18px; line-height: 27px; }
  .ab-do__text { font-size: 17px; line-height: 27px; }
}

@media (min-width: 1281px) {
  .ab-story { padding-block: 120px; }
  .ab-do { padding-block: 120px; }
  .ab-word { padding-block: 120px; }
  .ab-people { padding-block: 120px; }

  .ab-story__inner { gap: 80px; }

  /* Потолок финального заголовка — разбор в разделе «Финальный призыв». */
  .s-13 .ab-final__title { max-width: 820px; }
}
/* ========================= /PAGE STYLES ========================== */

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