/*
Theme Name: СИНК
Description: Тема лендинга агентства СИНК!. Светлый мир, два акцента — синий «действие» и зелёный «сигнал», Unbounded в заголовках. Отличается от соседних брендов не палитрой поверх общей вёрстки, а самой композицией.
Version: 2.0.6
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: siink
*/

/*
 * ПОЧЕМУ СВЕТЛАЯ, А НЕ ТЁМНАЯ, КАК У СОСЕДЕЙ.
 * Соседние бренды продают инструмент: тёмный интерфейсный мир там уместен — он читается
 * как «панель». СИНК продаёт работу людей, и страница должна читаться как документ
 * агентства, а не как консоль. Разводить бренды одной сменой палитры поверх общей
 * вёрстки бессмысленно: получаются два одинаковых сайта разного цвета.
 *
 * ТЕКСТОВЫЙ ШРИФТ — GOLOS TEXT, А НЕ INTER. Inter стоит на половине интерфейсов и
 * бренд не отличает ни от чего; Golos рисовался под кириллицу, а не адаптировался под
 * неё. Побочный выигрыш: три бренда расходятся и текстовым шрифтом, не только
 * заголовочным, — раньше отличались только заголовки.
 *
 * ДВА АКЦЕНТА, А НЕ ОДИН. Синий — то, на что нажимают. Зелёный — то, что живёт само:
 * бегущий огонёк разделителя, точка в знаке, метки статуса. Смешивать их роли нельзя,
 * иначе «сигнал» превращается в ещё одну кнопку и перестаёт что-либо значить.
 */

:root {
    --bg: #ffffff;
    --bg-panel: #f4f6fc;
    --accent: #3358e8;          /* действие: кнопки, ссылки */
    --accent-soft: #c9d4fa;
    --signal: #0baf82;          /* сигнал: живые индикаторы, статусы */
    --text: #10142b;
    --muted: #5b6480;
    --muted-2: #767e9c;
    --line: #e3e7f2;
    --radius: 14px;
    --shell: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

/* 🔴 `hidden` ЗНАЧИТ СКРЫТО — ВСЕГДА. Браузерное правило `[hidden] { display: none }`
   слабее любого класса с `display`: у баннера cookie стоял `display: flex`, и он
   висел на экране всегда — и до клика «Хорошо», и после, хотя скрипт честно ставил
   `hidden` и записывал согласие. Та же ошибка раньше держала на экране поля формы
   заявки после отправки. Одно правило на всё вместо заплатки на каждый элемент. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    /* Два мягких пятна вместо плоского фона: страница перестаёт выглядеть
       шаблоном, но текст остаётся на чистом белом — читаемость не страдает. */
    background-image:
        radial-gradient(ellipse 900px 500px at 15% -5%, rgba(51, 88, 232, .06), transparent 60%),
        radial-gradient(ellipse 700px 500px at 100% 8%, rgba(11, 175, 130, .05), transparent 55%);
    background-repeat: no-repeat;
}

h1, h2, h3, h4 {
    font-family: 'Unbounded', 'Golos Text', sans-serif;
    line-height: 1.22;
    letter-spacing: -.01em;
    margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; font-family: 'Golos Text', sans-serif; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }

/* Видимый фокус обязателен: по лендингу ходят с клавиатуры, и «убрать некрасивую
   рамку» — самый частый способ сделать сайт непроходимым. Цвет сигнальный, чтобы
   не сливаться с синими ссылками. */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.sm-shell { max-width: var(--shell); margin: 0 auto; padding: 0 32px; }

/* ─── Шапка ─────────────────────────────────────────────────────────────── */
/* С 24.09 шапка собрана блоками (часть шаблона `header`), и владелец правит её в
   админке. Стили висят на НАШИХ классах из части шаблона, а не на разметке
   WordPress: так поменять содержимое шапки можно, не сломав её вид. */
.sm-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.sm-header__inner.wp-block-group {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: nowrap; height: 74px; gap: 24px;
}

.sm-logo.wp-block-group { display: inline-flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.sm-logo__mark img { display: block; width: 30px; height: 30px; border-radius: 9px; }
.sm-logo__word {
    margin: 0; line-height: 1;
    font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em;
}
.sm-logo__word a { color: var(--text); text-decoration: none; }
/* «!» в словомарке — штатный формат «цвет текста» (<mark class="has-signal-color">),
   а не самодельный <span>: самодельный редактор выбросил бы при первой правке, и
   знак перестал бы быть зелёным. Фон формата гасим — нужен только цвет.
   Мигающий знак — единственная анимация в шапке. Он же смысл марки: сервис,
   который держит ритм. Две анимации рядом уже читались бы как баннер. */
.sm-logo__word mark { background: none !important; color: var(--signal); animation: sm-blink 2.2s ease-in-out infinite; }
@keyframes sm-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Меню — блок «Навигация». Пункты ссылаются на страницы по номеру, поэтому текущий
   раздел WordPress помечает сам (`current-menu-item`). */
.sm-nav { font-size: .93rem; }
.sm-nav .wp-block-navigation__container { gap: 28px; align-items: center; }
/* Удвоенный класс в селекторе — не опечатка: сам WordPress красит пункты меню
   селектором `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content`
   (0,3,0), как раз чтобы перебивать темы. Одинарного класса не хватило —
   пункты стали тёмными вместо приглушённых. */
.sm-header .sm-nav .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--muted); }
.sm-header .sm-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { color: var(--text); text-decoration: none; }
.sm-header .sm-nav .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--text); font-weight: 500; }
/* Кнопки лежат не в списке пунктов, а рядом, в контейнере навигации — у него свой
   зазор по умолчанию (0.5em ≈ 7 px), и «Войти» прилипала к «Контактам». */
.sm-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content { gap: 28px; }
.sm-nav__acts.wp-block-buttons { gap: 14px; flex-wrap: nowrap; }

/* 🔴 Открытое мобильное меню. `backdrop-filter` у шапки делает её опорной для
   `position: fixed`, и полноэкранное меню WordPress сжималось до высоты шапки
   (74 px): виден был один пункт, страница просвечивала. Пока меню открыто,
   WordPress вешает на <html> класс `has-modal-open` — по нему размытие снимаем. */
html.has-modal-open .sm-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
.sm-header .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--bg); padding: 20px 24px;
    /* На десктопе меню прижато вправо, и WordPress тянет это выравнивание через
       переменные в открытое мобильное меню — пункты вставали лесенкой по правому
       краю. В полноэкранном меню читается только левый край. */
    --navigation-layout-justification-setting: flex-start;
    --navigation-layout-justify: flex-start;
    text-align: left;
}
.sm-header .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; gap: 28px; padding-top: 32px; }
.sm-header .is-menu-open .wp-block-navigation__container { gap: 18px; font-size: 1.12rem; align-items: flex-start; }
/* Переменную выравнивания задаём НА САМОМ списке: у него класс
   `items-justified-right`, который сам объявляет её как flex-end и перебивает
   всё, что задано выше по дереву. */
.sm-header .is-menu-open .items-justified-right { --navigation-layout-justification-setting: flex-start; --navigation-layout-justify: flex-start; }
.sm-header .is-menu-open .sm-nav__acts.wp-block-buttons { flex-direction: column; align-items: stretch; width: 100%; }
.sm-header .is-menu-open .sm-nav__acts .wp-block-button__link { width: 100%; justify-content: center; }

/* Кнопки уведомления о cookie и форм моста — вне блоков, со своими классами. */
.sm-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: .92rem;
    padding: 11px 22px; border-radius: 999px;
    background: var(--accent); color: #fff; border: 1px solid transparent;
    transition: background .2s, transform .15s, border-color .2s;
    white-space: nowrap;
}
.sm-btn:hover { background: #4a6ef0; text-decoration: none; transform: translateY(-1px); }
.sm-btn--ghost { background: var(--bg); color: var(--text); border-color: var(--line); }
.sm-btn--ghost:hover { background: var(--bg); border-color: var(--accent); }

/* Кнопка редактора одета в фирменную: владелец вставит кнопку где угодно — она
   будет выглядеть как наши. Вторая — стиль блока «Контурная» (is-style-ghost).
   Два класса в селекторе нужны, чтобы перебить умолчание WordPress: у классической
   темы кнопки по умолчанию тёмно-серые (#32373c). */
.wp-block-button .wp-block-button__link {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: inherit; font-weight: 600; font-size: .92rem; line-height: 1.2;
    padding: 11px 22px; border-radius: 999px;
    background: var(--accent); color: #fff; border: 1px solid transparent;
    transition: background .2s, transform .15s, border-color .2s;
    white-space: nowrap; text-decoration: none;
}
.wp-block-button .wp-block-button__link:hover { background: #4a6ef0; color: #fff; text-decoration: none; transform: translateY(-1px); }
.wp-block-button.is-style-ghost .wp-block-button__link { background: var(--bg); color: var(--text); border-color: var(--line); }
.wp-block-button.is-style-ghost .wp-block-button__link:hover { background: var(--bg); color: var(--text); border-color: var(--accent); }

/* ─── Первый экран ──────────────────────────────────────────────────────── */
.sm-hero { padding: 84px 0 48px; max-width: 920px; }
/* Первый экран — группа блоков в контенте. Отступы детей задаём явно: у абзацев
   браузерный верхний отступ, и без сброса ритм первого экрана поплыл бы. */
.sm-hero > * { margin-top: 0; }
.sm-hero > h1 { margin-bottom: .6em; }
.sm-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: .82rem; color: var(--muted); margin-bottom: 20px;
}
.sm-eyebrow::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
    background: var(--signal); box-shadow: 0 0 0 4px rgba(11, 175, 130, .15);
    animation: sm-blink 2.2s ease-in-out infinite;
}
.sm-lead { font-size: clamp(1rem, 1.35vw, 1.18rem); color: var(--muted); max-width: 640px; margin: 0 0 32px; }
.sm-hero__acts.wp-block-buttons { gap: 14px; margin-bottom: 44px; }

/* Разделителей между пунктами НЕТ намеренно. Вертикальная линейка на
   `border-right` держится только пока строка не переносится: при переносе у
   последнего пункта верхней строки она повисает в пустоту, а `:last-child`
   ловит лишь конец всего списка, а не конец строки. Замер на 1280: три пункта
   легли в две строки, и висячий разделитель был виден. Ритм задаём отступами —
   он переживает любую ширину. */
.entry-content .sm-trust, .sm-trust {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 4px 40px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.entry-content .sm-trust li + li { margin-top: 0; }
.sm-trust li {
    font-size: .93rem; font-weight: 500;
    padding: 18px 0;
    color: var(--muted);
}
/* Точка-маркер вместо линейки: она принадлежит пункту, а не промежутку между
   ними, поэтому при переносе не остаётся ничего лишнего. */
.sm-trust li::before {
    content: ""; display: inline-block; vertical-align: middle;
    width: 5px; height: 5px; border-radius: 50%; margin-right: 10px;
    background: var(--signal);
}

/* ─── Пульс-разделитель ─────────────────────────────────────────────────── */
/* Фирменный мотив: линия, по которой идёт сигнал. Повторяется между разделами
   вместо декоративных плашек — на светлом фоне это единственная деталь, по
   которой страница узнаётся с одного взгляда. */
.sm-pulse { position: relative; height: 2px; background: var(--line); overflow: hidden; margin: 8px 0 0; }
.sm-pulse::after {
    content: ""; position: absolute; top: 0; left: -30%; height: 100%; width: 30%;
    background: linear-gradient(90deg, transparent, var(--signal), transparent);
    animation: sm-sweep 5.5s linear infinite;
}
@keyframes sm-sweep { from { left: -30%; } to { left: 100%; } }
/* Пульс — блок «во всю ширину» внутри контента: выходит за поля колонки на весь
   экран. `overflow-x: clip` на body — страховка от горизонтальной прокрутки из-за
   ширины полосы прокрутки в 100vw; clip, а не hidden: hidden сломал бы липкую шапку. */
body { overflow-x: clip; }
.entry-content > .sm-pulse.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; }

/* В РЕДАКТОРЕ обёртка `wp-block-group__inner-container` ставится независимо от
   темы (на сайте её снимает functions.php). `display: contents` делает её прозрачной
   для раскладки: без этого владелец видел бы в админке карточки столбиком, хотя на
   сайте они стоят сеткой. */
.editor-styles-wrapper [class*="sm-"] > .wp-block-group__inner-container { display: contents; }

/* ─── Секции и контент ──────────────────────────────────────────────────── */
.sm-section { padding: 96px 0; }
.sm-section--tight { padding: 56px 0 32px; }

.entry-content { font-size: 1.02rem; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { margin-top: 2.2em; }
.entry-content h3 { margin-top: 1.8em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li + li { margin-top: .45em; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.entry-content th { background: var(--bg-panel); font-weight: 600; }
/* Широкие таблицы прокручиваются внутри себя: иначе на телефоне горизонтально
   едет вся страница, и шапка уезжает за экран. */
.entry-content .wp-block-table { overflow-x: auto; }
/* Левая линейка у цитаты — типографская конвенция, а не акцентная плашка,
   поэтому тонкая и приглушённая: цитата должна оставаться частью текста, а не
   выглядеть выноской, спорящей с ним за внимание. */
.entry-content blockquote {
    border-left: 2px solid var(--accent-soft); padding-left: 18px; margin-left: 0; color: var(--muted);
}
.entry-content code {
    font-family: 'JetBrains Mono', monospace; font-size: .88em;
    background: var(--bg-panel); padding: 2px 6px; border-radius: 5px;
}

/* ─── Блоки моста (модули, тарифы, реквизиты) ───────────────────────────── */
/* Классы заданы плагином-мостом (class-sm-blocks.php) — здесь их только оформляем.
   Контейнер тарифов называется .sm-pricing, а не .sm-tariffs: имена сверены с
   разметкой, а не придуманы, иначе стили лягут в пустоту и это заметят на проде. */
.sm-modules, .sm-pricing { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.sm-modules { grid-template-columns: repeat(3, 1fr); }
/* Число колонок под число карточек: четыре карточки в сетке на три ложатся как
   3 + 1, и одинокая четвёртая читается не как часть ряда, а как что-то забытое.
   Модификатор ставится в наполнении, где число карточек известно заранее. */
.sm-modules--2 { grid-template-columns: repeat(2, 1fr); }
.sm-modules--4 { grid-template-columns: repeat(4, 1fr); }
.sm-pricing { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
/* Карточки — группы блоков. Сбрасываем внешние отступы детей сетки: промежутки
   задаёт gap, а не поля блоков. */
.entry-content .sm-modules > *, .entry-content .sm-pricing > * { margin: 0; }
/* Число колонок тарифов — классом: у блока-группы нет data-атрибутов, которыми
   это делает витрина моста ([sm_pricing] по-прежнему ставит data-count). */
.sm-pricing--1 { grid-template-columns: minmax(0, 420px); }
.sm-pricing--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sm-module, .sm-tariff {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 26px;
    transition: border-color .2s, transform .2s;
}
.sm-module:hover, .sm-tariff:hover { border-color: var(--accent); transform: translateY(-3px); }
/* Первый элемент карточки без отступа сверху: иначе `.entry-content h3` (он
   специфичнее класса) даёт заголовку 1.8em пустоты над собой. */
.sm-module > :first-child, .sm-tariff > :first-child { margin-top: 0; }
.sm-module__title, .sm-tariff__name { font-family: 'Golos Text', sans-serif; font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; }
.sm-module__text, .sm-tariff__desc { color: var(--muted); font-size: .92rem; margin: 0; }
.sm-module__more { display: inline-block; margin-top: 12px; font-size: .88rem; font-weight: 500; }

.sm-tariff { display: flex; flex-direction: column; }
/* Список возможностей и кнопка есть только у карточек, набранных в наполнении:
   у карточки из витрины сервиса их нет — там тариф самообслуживаемый и описание
   приходит одной строкой. */
.sm-tariff__list { list-style: none; margin: 4px 0 20px; padding: 0; font-size: .9rem; color: var(--muted); }
.sm-tariff__list li { padding-left: 20px; position: relative; }
.sm-tariff__list li + li { margin-top: 8px; }
.sm-tariff__list li::before {
    content: ""; position: absolute; left: 4px; top: .55em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--signal);
}
/* Кнопка прижата к низу: карточки разной высоты, и кнопки на разных уровнях
   читаются как разные по важности. */
.sm-tariff__cta { margin-top: auto; align-self: flex-start; }
.sm-tariff__price { font-family: 'Unbounded', sans-serif; font-size: 1.8rem; font-weight: 600; margin: 10px 0 14px; }
/* «/мес» — приписка, а не часть суммы: тем же кеглем она спорит с ценой за
   внимание, и взгляд читает «50 000 ₽/мес» как одно длинное число. */
.sm-tariff__price span { font-family: 'Golos Text', sans-serif; font-size: .78rem; font-weight: 500; color: var(--muted); }
/* Приписка к цене — отдельным абзацем, а не <span> внутри: неизвестные вставки
   редактор выбрасывает при первой правке, и «в месяц + 2 %» слилось бы с суммой. */
.sm-tariff__note { font-size: .78rem; font-weight: 500; color: var(--muted); margin: -10px 0 14px; }
.sm-tariff__cta.wp-block-buttons { margin-top: auto; }
/* «по блокам» вместо суммы: не число, поэтому и набирается как текст. */
.sm-tariff__price--custom { font-size: 1.25rem; color: var(--muted); }

/* Юридические документы приезжают шорткодом [sm_legal] из cms_pages сервиса. */
.sm-legal__date { font-family: 'JetBrains Mono', monospace; font-size: .74rem; color: var(--muted-2); margin-bottom: 20px; }

/* ─── Подвал ────────────────────────────────────────────────────────────── */
/* Колонки, а не плоская строка ссылок: документов и разделов набралось столько,
   что в одну строку они переносились в четыре ряда и читались как свалка. */
.sm-footer { border-top: 1px solid var(--line); padding: 56px 0 36px; margin-top: 56px; }
/* Колонки — блок «Колонки»: владелец добавит или уберёт колонку ссылок кнопкой в
   редакторе. Колонка бренда шире остальных (30 % задано в самой части шаблона): в
   ней абзац текста, а не список из трёх слов. */
.sm-footer__grid.wp-block-columns { gap: 32px; margin: 0; align-items: flex-start; }
.sm-footer__brand { max-width: 340px; }
.sm-footer__brand .sm-logo__word { font-size: 1.2rem; }
.sm-footer__brand p { color: var(--muted); font-size: .87rem; margin: 18px 0 0; }
.sm-footer__slogan { font-family: 'Unbounded', sans-serif; font-weight: 600; color: var(--signal) !important; font-size: .92rem !important; }
.sm-logo--footer { font-size: 1.2rem; }
.sm-footer__col h4 { font-family: 'Golos Text', sans-serif; font-size: .82rem; font-weight: 600; margin: 0 0 14px; letter-spacing: .02em; }
.sm-footer__col ul { list-style: none; margin: 0; padding: 0; }
.sm-footer__col li + li { margin-top: 9px; }
.sm-footer__col a { color: var(--muted); font-size: .86rem; }
.sm-footer__col a:hover { color: var(--text); text-decoration: none; }
.sm-footer__bottom > * { margin: 0; }
.sm-footer__bottom.wp-block-group, .sm-footer__bottom {
    margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
    font-size: .78rem; color: var(--muted-2);
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.sm-requisites { font-size: .78rem; color: var(--muted-2); line-height: 1.6; }

/* ─── Лента новостей ────────────────────────────────────────────────────── */
.sm-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0; }
.sm-post { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.sm-post__date { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--muted-2); }
.sm-post__title { font-size: 1.05rem; font-weight: 600; margin: 8px 0; font-family: 'Golos Text', sans-serif; }

/* ─── Слоган ────────────────────────────────────────────────────────────── */
/* Не заголовок и не кнопка: реплика бренда. Поэтому моноширинный набор и
   сигнальный цвет — те же, что у статусных меток, а не акцент действия. */
.sm-slogan {
    font-family: 'Unbounded', sans-serif; font-weight: 600;
    color: var(--signal); font-size: 1.05rem; margin: -14px 0 28px;
}

/* ─── Сетка процессов ───────────────────────────────────────────────────── */
.entry-content > .sm-sync-block { margin-top: 56px; }
.sm-sync__head > p { margin: 0; }
.sm-sync__head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    flex-wrap: wrap; margin-bottom: 18px;
    font-family: 'JetBrains Mono', monospace; font-size: .72rem;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2);
}
.sm-sync__status { color: var(--signal); display: inline-flex; align-items: center; gap: 8px; }
.sm-sync__status::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
    animation: sm-blink 2.2s ease-in-out infinite;
}
/* Номера — счётчиком, а не текстом: добавили или убрали пункт в редакторе —
   нумерация пересчиталась сама. */
.entry-content .sm-sync, .sm-sync {
    list-style: none; margin: 0; padding: 0; counter-reset: sm-sync;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    /* Пробел между ячейками рисует линия фона: так сетка читается как единое
       поле процессов, а не как двенадцать отдельных плашек. */
    gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden;
}
.sm-sync li {
    background: var(--bg); padding: 18px 18px 16px;
    font-size: .9rem; font-weight: 500;
    display: flex; flex-direction: column; gap: 6px;
}
.entry-content .sm-sync li + li { margin-top: 0; }
.sm-sync li::before {
    counter-increment: sm-sync; content: counter(sm-sync, decimal-leading-zero);
    font-family: 'JetBrains Mono', monospace; font-size: .7rem; font-weight: 400; color: var(--accent);
}

/* ─── Место под картинку ────────────────────────────────────────────────── */
/* Штриховая рамка и подпись — чтобы заглушку нельзя было принять ни за готовый
   блок, ни за сломанную вёрстку. Пропорцию задаёт шорткод переменной. */
.sm-shot {
    margin: 0; position: relative; padding-top: var(--sm-shot-pad, 56.25%);
    background: var(--bg-panel); border: 1px dashed var(--accent-soft); border-radius: var(--radius);
}
.sm-shot figcaption {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 24px;
    font-size: .86rem; color: var(--muted-2); line-height: 1.5;
}
.sm-shot figcaption::before { content: "🖼 "; margin-right: 6px; }

/* Готовая иллюстрация: та же рамка, но сплошная, и подпись под картинкой, а не
   поверх. Тень мягкая — снимок интерфейса должен читаться как окно, а не как
   вклеенный прямоугольник. */
.sm-shot--filled { padding-top: 0; background: none; border: 0; }
.sm-shot--filled img {
    display: block; width: 100%; border-radius: var(--radius);
    border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(16, 20, 43, .08);
}
.sm-shot--filled figcaption {
    position: static; display: block; padding: 12px 0 0;
    text-align: left; font-size: .8rem;
}
.sm-shot--filled figcaption::before { content: none; }

/* ─── Форма заявки ──────────────────────────────────────────────────────── */
.sm-form {
    background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 28px 26px; display: grid; gap: 14px;
}
.sm-form__title { margin: 0 0 4px; font-size: 1.15rem; }
.sm-form__row { display: grid; gap: 6px; }
/* Скрытие полей после отправки держит общее правило `[hidden]` в начале файла. */
.sm-form__row > span { font-size: .84rem; color: var(--muted); }
.sm-form__row > span b { color: var(--accent); font-weight: 600; }
.sm-form input[type=text], .sm-form input[type=email], .sm-form textarea {
    font: inherit; font-size: .95rem; color: var(--text);
    background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
    padding: 11px 14px; width: 100%; resize: vertical;
}
.sm-form input:focus, .sm-form textarea:focus { outline: none; border-color: var(--accent); }
/* Видимый фокус восстанавливаем отдельно: `outline: none` выше убирает и его,
   а по форме ходят с клавиатуры. */
.sm-form input:focus-visible, .sm-form textarea:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.sm-form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--muted); }
.sm-form__consent input { margin-top: 3px; flex: 0 0 auto; }
.sm-form__submit { justify-self: start; margin-top: 4px; border: 0; cursor: pointer; font-family: inherit; }
.sm-form__note { font-size: .78rem; color: var(--muted-2); margin: 0; }
.sm-form__error { color: #c8322b; font-size: .85rem; margin: 0; min-height: 0; }
.sm-form__error:empty { display: none; }
.sm-form__done { color: var(--signal); font-weight: 500; margin: 0; }
/* 🔴 Приманка убирается из потока, но НЕ через `display:none` у самого поля:
   часть ботов такие поля пропускает. Уводим за пределы экрана — в разметке оно
   обычное текстовое поле, для человека невидимое и недостижимое табом. */
.sm-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Форма рядом с контактами: две колонки на широком экране. */
.sm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.entry-content .sm-split > * { margin: 0; }

/* ─── Уведомление о cookie ──────────────────────────────────────────────── */
.sm-cookie {
    position: fixed; z-index: 100; left: 20px; right: 20px; bottom: 20px;
    max-width: 760px; margin: 0 auto;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(16, 20, 43, .14);
    padding: 18px 22px;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.sm-cookie p { margin: 0; font-size: .86rem; color: var(--muted); flex: 1 1 320px; }
.sm-cookie__actions { flex: 0 0 auto; }
.sm-btn--sm { padding: 9px 20px; font-size: .86rem; border: 0; cursor: pointer; font-family: inherit; }

/* ─── Тарифы: витрина из одной карточки ─────────────────────────────────── */
/* Публичный тариф у агентства ровно один. В сетке на три колонки он вышел бы
   обрубком на треть ширины, поэтому число карточек мост отдаёт в разметке. */
.sm-pricing[data-count="1"] { grid-template-columns: minmax(0, 420px); }
.sm-pricing[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ─── Юридические документы ─────────────────────────────────────────────── */
.sm-legal__subtitle { color: var(--muted); font-size: 1.02rem; margin-top: 0; }
/* Документ читают подряд и ищут в нём пункт — поэтому у заголовков разделов
   отступ сверху больше обычного, а список набирается плотнее абзацев. */
.sm-legal h2 { font-size: 1.25rem; margin-top: 2em; }
.sm-legal ul { padding-left: 1.2em; }
.sm-legal li + li { margin-top: .35em; }

/* ─── Адаптив ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .sm-modules, .sm-pricing, .sm-posts, .sm-modules--4 { grid-template-columns: 1fr 1fr; }
    .sm-pricing[data-count="1"] { grid-template-columns: minmax(0, 420px); }
    /* С .entry-content — иначе базовое правило специфичнее, сетка остаётся в
       четыре колонки и четвёртую срезает overflow. */
    .entry-content .sm-sync { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm-split { grid-template-columns: 1fr; }
    /* Колонка бренда занимает всю ширину, ссылки идут под ней в две колонки:
       на планшете пять колонок сжимаются до нечитаемых подписей в один символ. */
    .sm-pricing--2 { grid-template-columns: 1fr 1fr; }
    /* Колонка бренда во всю ширину, ссылки под ней по две: на планшете пять колонок
       сжимаются до подписей в один символ. Селектор длинный, чтобы перебить
       !important самого WordPress, который на узком экране ставит колонкам 100 %. */
    .wp-block-columns.sm-footer__grid { flex-wrap: wrap !important; }
    .wp-block-columns.sm-footer__grid:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: calc(50% - 16px) !important; flex-grow: 0; }
    .wp-block-columns.sm-footer__grid:not(.is-not-stacked-on-mobile) > .sm-footer__brand { flex-basis: 100% !important; max-width: 520px; }
    /* Меню уходит в бургер с 980 px, а не с 600 px, как у WordPress по умолчанию:
       иначе на планшете пять разделов и две кнопки не помещаются в строку. */
    .sm-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
    .sm-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
    .sm-header .wp-block-navigation__responsive-container-open {
        padding: 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--text);
    }
}
@media (max-width: 640px) {
    .sm-shell { padding: 0 20px; }
    .sm-modules, .sm-pricing, .sm-posts, .sm-modules--2, .sm-modules--4 { grid-template-columns: 1fr; }
    .sm-pricing[data-count="1"], .sm-pricing[data-count="2"] { grid-template-columns: 1fr; }
    .entry-content .sm-sync { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-sync li { padding: 14px; font-size: .84rem; }
    .sm-form { padding: 22px 18px; }
    /* Приписка уходит под сумму: рядом с 1.8rem-цифрой на 375 px строка «в месяц
       + 2 % с оборота» рвётся посреди условия, и остаток читается как отдельная
       мысль. Блоком — две ровные строки на любой ширине. */
    .sm-tariff__price span { display: block; margin-top: 4px; }
    /* Баннер прижимается к краям: 20 px по бокам на 360 px забирают десятую часть
       ширины и текст лезет в четыре строки. */
    .sm-cookie { left: 10px; right: 10px; bottom: 10px; padding: 16px; gap: 14px; }
    .sm-cookie__actions, .sm-cookie__actions .sm-btn { width: 100%; justify-content: center; }
    .sm-section { padding: 64px 0; }
    .sm-hero { padding: 56px 0 36px; }
    .sm-trust { flex-direction: column; gap: 0; }
    .sm-trust li { padding: 12px 0; }
    .sm-pricing--1, .sm-pricing--2 { grid-template-columns: 1fr; }
    .sm-header__inner.wp-block-group { height: 66px; }
}

/* Уважение к системной настройке: анимации здесь декоративные, и для тех, кому
   от движения плохо, страница обязана работать без него. */
@media (prefers-reduced-motion: reduce) {
    .sm-logo__word mark, .sm-eyebrow::before, .sm-sync__status::before { animation: none; }
    .sm-pulse::after { animation: none; opacity: 0; }
    .sm-btn:hover, .wp-block-button .wp-block-button__link:hover, .sm-module:hover, .sm-tariff:hover { transform: none; }
}