/* =============================================================================
   ОФОРМЛЕНИЕ ТОЛЬКО ПУБЛИЧНОЙ ГЛАВНОЙ (WF1-HOMEPAGE-POLISH).

   ГДЕ ПОДКЛЮЧАЕТСЯ: один файл, одно место — views/default/site/index.php.
   Кабинет, админка, документы и виджет на чужих сайтах его не получают.

   ОБЛАСТЬ ДЕЙСТВИЯ. Каждое правило начинается с `.site-public` — корневого
   класса разметки главной. Файл ЛЕЖИТ ПОВЕРХ style.css и потому может
   переопределять его правила той же специфичностью и позже по порядку;
   правил без корня здесь нет ни одного.

   ЧТО ДЕЛАЕТ:
     1. рамка настоящих снимков продукта (.wf1-shot) — окна продукта имеют
        рамку сознательно: она помогает понять, что перед вами экран кабинета;
     2. новые мелкие элементы: строка условий trial, роли интеграций,
        пояснения к каналам и полосе CMS;
     3. успокаивает декоративные подложки у МЕЛКИХ информационных элементов
        (полоса фактов, полоса доверия, значки CMS, FAQ): фон секции и
        типографика вместо рамки-тени-скругления у каждого пункта;
     4. точечные правки витрины тарифов ТОЛЬКО на главной: воздух между
        списком возможностей и кнопкой, чуть крупнее кегль отличий
        (сам wf1-plans.css общий с кабинетом, его не трогаем);
     5. respect prefers-reduced-motion: постоянное вращение колеса и дрожание
        кнопки отключаются тем, кто просил меньше движения.
   ============================================================================= */

/* --- 1. Снимки продукта --- */

.site-public .wf1-shot{
    margin:34px auto 0;
    max-width:980px;
    border:1px solid #dfe6f0;
    border-radius:14px;
    background:#fff;
    box-shadow:0 14px 44px rgba(15,23,42,.10);
    overflow:hidden;
}
.site-public .wf1-shot__bar{
    display:flex;align-items:center;gap:6px;
    padding:10px 14px;
    background:#eef2f8;border-bottom:1px solid #dfe6f0;
}
.site-public .wf1-shot__bar span{
    width:10px;height:10px;border-radius:50%;
    background:#cdd7e4;flex-shrink:0;
}
.site-public .wf1-shot__bar em{
    margin-left:8px;
    font-style:normal;font-size:12.5px;color:#64748b;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.site-public .wf1-shot img{
    display:block;width:100%;height:auto;
}
.site-public .wf1-shot figcaption{
    padding:12px 16px;
    font-size:13.5px;line-height:1.55;color:#64748b;
    border-top:1px solid #eef2f7;
}
.site-public .wf1-shot figcaption a{color:#1f61eb;text-decoration:underline}
.site-public .wf1-shot figcaption a:hover{text-decoration:none}

/* Снимок в тёмной секции «Возможности»: рамка чуть светлее фона, подпись
   читаемая на тёмном. */
.site-public .wf1-shot--dark{
    border-color:rgba(255,255,255,.14);
    box-shadow:0 18px 60px rgba(0,0,0,.35);
}
.site-public .wf1-shot--dark .wf1-shot__bar{background:#1e293b;border-bottom-color:rgba(255,255,255,.10)}
.site-public .wf1-shot--dark .wf1-shot__bar span{background:#475569}
.site-public .wf1-shot--dark .wf1-shot__bar em{color:rgba(255,255,255,.60)}
.site-public .wf1-shot--dark figcaption{
    background:#0f172a;border-top-color:rgba(255,255,255,.10);
    color:rgba(255,255,255,.66);
}

/* --- 2. Новые мелкие элементы --- */

.site-public .hero-trial-note{
    margin:12px 0 0;
    font-size:13.5px;line-height:1.55;
    color:rgba(255,255,255,.66);
}

.site-public .integration__role{
    margin-left:auto;
    font-style:normal;font-size:11px;font-weight:700;
    letter-spacing:.03em;text-transform:uppercase;
    color:#64748b;white-space:nowrap;
}
.site-public .integration__content code{
    font-size:.92em;background:#f1f5f9;border-radius:5px;padding:1px 5px;
}

.site-public .integrations-note,
.site-public .cms-note{
    margin:22px auto 0;max-width:860px;
    text-align:center;
    font-size:14.5px;line-height:1.65;color:#64748b;
}
.site-public .integrations-note a,
.site-public .cms-note a{color:#1f61eb;text-decoration:underline}
.site-public .integrations-note a:hover,
.site-public .cms-note a:hover{text-decoration:none}

/* Значки новых плиток. Фон плитки тот же, что у остальных (`style.css`),
   здесь — только картинки. Это нейтральные глифы из /media/img, не логотипы. */
.site-public .integration__header i.sheets{background-image:url('/media/img/sheets.svg')}
.site-public .integration__header i.webhook{background-image:url('/media/img/webhook.svg')}

/* --- 3. Спокойнее к мелким информационным элементам --- */

/* Полоса фактов первого экрана: одна общая подложка вместо «коробки в
   коробке» — внутренние ячейки без собственного фона, между ними тонкий
   разделитель. */
.site-public .hero-metrics div{background:transparent;border-radius:0;padding:6px 18px}
.site-public .hero-metrics div + div{border-left:1px solid rgba(255,255,255,.12)}

/* Полоса доверия: три факта текстом на белом фоне секции, без серых плиток. */
.site-public .trust-strip__grid div{background:transparent;border-radius:0;padding:6px 0}

/* Категории «для кого»: карточки остаются, но перестают подпрыгивать и
   отбрасывать тяжёлую тень при наведении. */
.site-public .who{transition: .2s;border:none;background: #f2f6fc}


/* Плитки интеграций: рамки достаточно, крупная мягкая тень у каждой из восьми
   плиток создавала «плавающий» шум. */
.site-public .integration{box-shadow:none}

/* Значки CMS: логотип и подпись на фоне секции, без собственных коробок. */
.site-public .cms__icon{background:transparent;border:0;padding:10px 4px}

/* FAQ: карточка с рамкой без крупной тени. */
.site-public .faq-grid details{box-shadow:none}

/* Чек-лист SEO-блока и карточки новостей: тень мельче и ближе к предмету. */
.site-public .seo-checklist{box-shadow:0 6px 18px rgba(15,23,42,.05)}
.site-public .new__item{box-shadow:0 6px 18px rgba(15,23,42,.05)}

/* Финальный призыв: секция уже тёмная — внутренняя стеклянная панель была
   вторым слоем той же мысли. Содержимое лежит прямо на фоне секции.

   ГОРИЗОНТАЛЬНЫЕ ОТСТУПЫ НЕ ТРОГАЕМ. Здесь стояло `padding:10px 0`, и это был
   дефект: `.final-cta__inner` — тот же элемент, что и `.container`
   (`<div class="container final-cta__inner">`), а у контейнера в боковых
   отступах вся его работа. Обнулив их, правило прижимало заголовок и текст к
   самым краям экрана — на телефоне это било в глаза. Задаём только
   вертикальные. */
.site-public .final-cta__inner{background:transparent;border:0;border-radius:0;padding-top:10px;padding-bottom:10px}

/* --- 3.1. Пакеты дополнительных заявок под витриной тарифов --- */

/* Это ответ на вопрос «а если заявок придёт больше?», а не четвёртая карточка
   тарифа: поэтому полоса под витриной, без рамок у каждой позиции — их роль
   играет фон секции и разделители. */
.site-public .lead-packs{
    margin-top:26px;padding:24px;
   border-radius:18px;background:#ededed;
}
.site-public .lead-packs__head strong{
    display:block;color:#111827;font-size:20px;font-weight:800;line-height:1.3;
}
.site-public .lead-packs__head p{
    margin:6px 0 0;color:#64748b;font-size:14.5px;line-height:1.6;max-width:760px;
}
.site-public .lead-packs__list{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
    margin:18px 0 0;padding:0;list-style:none;
}
.site-public .lead-pack{
    display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;
    padding:14px 16px;border-radius:14px;background:#fff;border:1px solid #e8eef6;
}
.site-public .lead-pack b{color:#111827;font-size:21px;font-weight:800;line-height:1}
.site-public .lead-pack span{color:#64748b;font-size:14px}
/* Цена — вторая по значимости величина после объёма, поэтому она уходит к
   правому краю плитки и набрана акцентным цветом. */
.site-public .lead-pack em{margin-left:auto;color:#1f61eb;font-style:normal;font-weight:800;font-size:24px;white-space:nowrap;line-height: 1.1}
.site-public .lead-pack i{flex-basis:100%;color:#98a2b3;font-style:normal;font-size:13px}
.site-public .lead-packs__note{margin:14px 0 0;color:#64748b;font-size:14px}
.site-public .lead-packs__note a{color:#1f61eb;text-decoration:underline}
.site-public .lead-packs__note a:hover{text-decoration:none}

/* --- 4. Витрина тарифов, только на главной --- */

/* Воздух между списком возможностей и кнопкой: раньше последняя строка
   упиралась в кнопку. Кнопка по-прежнему прижата к низу карточки. */
.site-public .wfp-feats{margin-bottom:18px}
/* Отличия тарифов читаются в первую очередь — кегль строк списка чуть
   крупнее, чем в тесной модалке кабинета. */
.site-public .wfp-feats li{font-size:13.5px}
.site-public .wfp-limits li{font-size:13.5px}

/* --- 5. Меньше движения тем, кто об этом просил --- */

@media (prefers-reduced-motion: reduce){
    .site-public .widget-wheel-wait,
    .site-public .widget-wheel-spin,
    .site-public .why-2 .why-image:hover .widget-wheel-wrap .widget-wheel,
    .site-public .why-1 .why-image:hover .wf1openwidget{animation:none !important}
    .site-public .get-started:hover,
    .site-public .button__action:hover,
    .site-public .who:hover{transform:none}
}

/* --- Узкие экраны --- */

@media (max-width: 900px){
    .site-public .wf1-shot{margin-top:26px;border-radius:12px}
    .site-public .wf1-shot figcaption{font-size:13px;padding:10px 14px}
}
@media (max-width: 760px){
    /* Полоса фактов на телефоне — 2×2: вертикальный разделитель между
       ячейками одной строки тут не совпадает с раскладкой, убираем. */
    .site-public .hero-metrics div + div{border-left:0}
    .site-public .hero-metrics div{padding:10px 12px}
    .site-public .integration__role{margin-left:0;flex-basis:100%;order:3}
    .site-public .integration__header{flex-wrap:wrap}
}