/* ──────────────────────────────────────────────────────────────────────────
   Декоративный слой посадочных страниц.

   Правила, которые тут соблюдаются:
   — Текст не трогается вообще. Весь декор живёт в ::before / ::after,
     в разметке не появляется ни одного узла. Для поиска этих картинок нет.
   — pointer-events: none, чтобы декор не перехватывал клики.
   — Всё абсолютное: раскладка не сдвигается, скачка при загрузке нет.
   — Лесенка z-index задаётся явно. Иначе «вылет» из секции наверх будет
     закрашен фоном следующей секции — та рисуется позже и поверх.
   — Глубина фона — радиальными градиентами на токенах, а не картинками:
     в плоской манере клякса выглядела бы чужеродно и весила бы лишнее.
   — На узких экранах перекрытия выключаются: на 390 px они превращаются
     в кашу и лезут на текст.
   ────────────────────────────────────────────────────────────────────────── */


/* ═══ /seo-services-europe/ ═══════════════════════════════════════════════ */

@media (min-width: 993px) {

    /* Лесенка слоёв. Секция, из которой предмет вылезает, должна лежать
       ВЫШЕ соседней, иначе её фон срежет вылет. */
    .page-id-142 .god-hero      { position: relative; z-index: 5; overflow: visible; }
    .page-id-142 #audience      { position: relative; z-index: 4; overflow: visible; }
    .page-id-142 #offer         { position: relative; z-index: 3; overflow: visible; }
    .page-id-142 #advantages    { position: relative; z-index: 2; overflow: visible; }
    .page-id-142 #pricing       { position: relative; z-index: 3; overflow: visible; }
    .page-id-142 #cases         { position: relative; z-index: 3; overflow: visible; }
    .page-id-142 #section-faq-content { position: relative; z-index: 1; overflow: visible; }
    .page-id-142 #process       { position: relative; z-index: 1; overflow: visible; }

    /* Содержимое всегда выше декора своей секции. */
    .page-id-142 .god-hero > .container,
    .page-id-142 #audience > .container,
    .page-id-142 #offer > .container,
    .page-id-142 #advantages > .container,
    .page-id-142 #pricing > .container,
    .page-id-142 #cases > .container,
    .page-id-142 #section-faq-content > .container,
    .page-id-142 #process > .container {
        position: relative;
        z-index: 2;
    }

    .page-id-142 .god-hero::before,
    .page-id-142 .god-hero::after,
    .page-id-142 #audience::after,
    .page-id-142 #offer::after,
    .page-id-142 #advantages::after,
    .page-id-142 #pricing::before,
    .page-id-142 #cases::before,
    .page-id-142 #section-faq-content::before,
    .page-id-142 #process::before {
        content: "";
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
    }

    /* ── Первый экран ─────────────────────────────────────────────────────
       Карта Европы фоном. Уходит правым краем за экран — так она читается
       как фрагмент большего, а не как картинка в рамке. */
    .page-id-142 .god-hero::before {
        right: -70px;
        top: -46px;
        bottom: -46px;
        width: 880px;
        background-image: url("../img/il/bg-europe.webp");
        background-position: center right;
        opacity: .95;
        z-index: 0;
        filter: saturate(1.15);
    }

    /* Стопка карточек вываливается из первого экрана ВНИЗ, в следующую
       секцию. Это и есть разрыв сетки: граница секций видна, предмет её
       протыкает. */
    .page-id-142 .god-hero::after {
        left: -40px;
        bottom: -96px;
        width: 250px;
        height: 243px;
        background-image: url("../img/il/prop-cards.webp");
        transform: rotate(-6deg);
        opacity: .92;
        z-index: 1;
        filter: drop-shadow(0 18px 34px rgba(80, 109, 212, .16));
    }

    /* Подсветка под текстом первого экрана: глубина без единого килобайта. */
    .page-id-142 .god-hero {
        background-image:
            radial-gradient(760px 420px at 12% 18%, rgba(157, 83, 197, .10), transparent 62%),
            radial-gradient(620px 380px at 88% 88%, rgba(80, 109, 212, .12), transparent 60%),
            linear-gradient(180deg, #DCECFF 0%, rgba(255, 255, 255, .28) 100%);
    }

    /* ── «Для кого» → охват ───────────────────────────────────────────────
       Карточки стран свисают из секции вниз, на стык со следующей. */
    .page-id-142 #audience::after {
        right: -70px;
        bottom: -110px;
        width: 360px;
        height: 373px;
        background-image: url("../img/il/seo-reach.webp");
        transform: rotate(3deg);
        z-index: 1;
        filter: drop-shadow(0 22px 40px rgba(42, 43, 75, .13));
    }

    /* ── Кейсы → рост ─────────────────────────────────────────────────────
       Выходит за левый край контейнера. Поп-аут: предмет крупнее отведённого
       ему места и не помещается в колонку. */
    .page-id-142 #offer::after {
        right: -95px;
        top: 1180px;
        width: 360px;
        height: 320px;
        background-image: url("../img/il/seo-growth.webp");
        transform: rotate(-4deg);
        opacity: .96;
        z-index: 1;
        filter: drop-shadow(0 20px 38px rgba(80, 109, 212, .15));
    }

    /* ── Преимущества → маленький акцент над верхней границей ─────────────── */
    .page-id-142 #advantages::after {
        right: 40px;
        top: -70px;
        width: 190px;
        height: 185px;
        background-image: url("../img/il/prop-cards.webp");
        transform: rotate(8deg) scaleX(-1);
        opacity: .8;
        z-index: 1;
        filter: drop-shadow(0 14px 26px rgba(42, 43, 75, .12));
    }

    /* ── Подход → метод ───────────────────────────────────────────────────
       Вылезает вверх, за границу градиентной секции. */
    .page-id-142 #process::before {
        left: -90px;
        top: -70px;
        width: 420px;
        height: 396px;
        background-image: url("../img/il/seo-method.webp");
        transform: rotate(-4deg);
        z-index: 1;
        filter: drop-shadow(0 24px 44px rgba(42, 43, 75, .16));
    }

    /* ── Пустые зоны: по одному мелкому акценту, не больше ────────────────
       Между ростом и преимуществами шло 3 400 px без единого элемента,
       после процесса — ещё 2 500. Крупные сюжеты туда не нужны, нужен
       ритм: маленький предмет на краю, чтобы глаз не проваливался. */

    /* Прайс — ценник с монетами. */
    .page-id-142 #pricing::before {
        left: -60px;
        top: 90px;
        width: 168px;
        height: 169px;
        background-image: url("../img/il/prop-tag.webp");
        transform: rotate(-7deg);
        opacity: .9;
        z-index: 1;
        filter: drop-shadow(0 14px 26px rgba(80, 109, 212, .14));
    }

    /* Кейсы — пины: разборы у вас по странам. */
    .page-id-142 #cases::before {
        right: -50px;
        top: 150px;
        width: 150px;
        height: 184px;
        background-image: url("../img/il/prop-pins.webp");
        transform: rotate(5deg);
        opacity: .9;
        z-index: 1;
        filter: drop-shadow(0 14px 26px rgba(42, 43, 75, .12));
    }

    /* FAQ — облачка реплик. */
    .page-id-142 #section-faq-content::before {
        left: -50px;
        top: 120px;
        width: 170px;
        height: 195px;
        background-image: url("../img/il/prop-bubbles.webp");
        transform: rotate(-5deg);
        opacity: .88;
        z-index: 1;
        filter: drop-shadow(0 14px 26px rgba(157, 83, 197, .14));
    }

    /* Подсветка внутри длинной белой секции с текстом — чтобы 2 400 px
       сплошного белого не читались как пустота. */
    .page-id-142 #offer {
        background-image:
            radial-gradient(700px 500px at 100% 8%, rgba(157, 83, 197, .07), transparent 60%),
            radial-gradient(600px 460px at -5% 62%, rgba(80, 109, 212, .07), transparent 58%);
    }
}

/* ── Узкие экраны: перекрытия выключены ───────────────────────────────────
   Вылеты рассчитаны на широкий контейнер; на телефоне они лезут на текст. */
@media (max-width: 992px) {
    .page-id-142 .god-hero::before,
    .page-id-142 .god-hero::after,
    .page-id-142 #audience::after,
    .page-id-142 #offer::after,
    .page-id-142 #advantages::after,
    .page-id-142 #pricing::before,
    .page-id-142 #cases::before,
    .page-id-142 #section-faq-content::before,
    .page-id-142 #process::before {
        content: none;
    }
    /* Карта остаётся, но совсем бледной подложкой. */
    .page-id-142 .god-hero {
        background-image:
            url("../img/il/bg-europe.webp"),
            linear-gradient(180deg, #DCECFF 0%, rgba(255, 255, 255, .28) 100%);
        background-repeat: no-repeat, no-repeat;
        background-position: right -60px center, center;
        background-size: 420px auto, auto;
    }
}

/* Уважаем системную настройку: никакого параллакса и поворотов тем,
   кто просил меньше движения. */
@media (prefers-reduced-motion: reduce) {
    .page-id-142 .god-hero::after,
    .page-id-142 #audience::after,
    .page-id-142 #offer::after,
    .page-id-142 #advantages::after,
    .page-id-142 #pricing::before,
    .page-id-142 #cases::before,
    .page-id-142 #section-faq-content::before,
    .page-id-142 #process::before {
        transform: none;
    }
}


/* ═══ /seo-germany/ ═══════════════════════════════════════════════════════ */

@media (min-width: 993px) {

    .page-id-243 .god-hero { position: relative; z-index: 3; overflow: visible; }
    .page-id-243 #offer    { position: relative; z-index: 2; overflow: visible; }
    .page-id-243 .god-hero > .container { position: relative; z-index: 2; }

    /* Карта не должна съедать первый экран. */
    .page-id-243 .god-hero .right_block {
        position: relative;
        flex: 0 0 340px;
    }
    .page-id-243 .god-hero .right_block img {
        width: 340px;
        height: auto;
        position: relative;
        z-index: 1;   /* контур — фоном, ворота идут поверх него */
    }

    /* Ворота — в просвет между колонкой текста и картой.
       Привязаны к КОНТЕЙНЕРУ, а не к краю экрана: контейнер центрирован
       и ограничен по ширине, карта живёт в нём же. Если цепляться за
       viewport, на широких мониторах ворота уезжают на карту — именно
       это и случилось. z-index: -1 уводит их за карту. */
    .page-id-243 .god-hero .container::after {
        content: "";
        position: absolute;
        right: 300px;
        top: 50%;
        margin-top: -133px;
        width: 280px;
        height: 266px;
        background: url("../img/il/gate-berlin.webp") no-repeat center / contain;
        pointer-events: none;
        z-index: 3;
        filter: drop-shadow(0 18px 32px rgba(42, 43, 75, .16));
    }

    /* Полотно текста. Обтекание через float оказалось ненадёжным: абзацы
       образуют собственный контекст форматирования и текст полез на
       картинку. Делаем предсказуемо — колонка ограничена по ширине,
       иллюстрация стоит абсолютно в освободившемся справа месте. */
    .page-id-243 #offer .left .text {
        max-width: 720px;
    }
}

@media (max-width: 992px) {
    .page-id-243 .god-hero .container::after { content: none; }
}

/* От 993 до 1279 просвета между текстом и картой нет — ворота полезли бы
   на кнопки. Показываем их только там, где место действительно есть. */
@media (min-width: 993px) and (max-width: 1279px) {
    .page-id-243 .god-hero .container::after { content: none; }
}


/* ── /seo-germany/: ритм по всей странице ─────────────────────────────────
   Страница на 10 835 px держала два элемента, оба в первом экране.
   Ниже шло десять тысяч пикселей без единой зацепки для глаза.
   Ставим по одному акценту на секцию, каждый — по её смыслу. */

@media (min-width: 993px) {

    /* Лесенка: секция, из которой предмет вылезает, лежит выше соседней. */
    .page-id-243 #offer,
    .page-id-243 #services,
    .page-id-243 #pricing,
    .page-id-243 .god-two-col,
    .page-id-243 #cases,
    .page-id-243 #advantages,
    .page-id-243 #audience,
    .page-id-243 #process,
    .page-id-243 #section-faq-content,
    .page-id-243 .god-upsell { position: relative; overflow: visible; }

    .page-id-243 #offer     { z-index: 10; }
    .page-id-243 #services  { z-index: 9; }
    .page-id-243 #pricing   { z-index: 8; }
    .page-id-243 .god-two-col { z-index: 7; }
    .page-id-243 #cases     { z-index: 6; }
    .page-id-243 #advantages{ z-index: 5; }
    .page-id-243 #audience  { z-index: 4; }
    .page-id-243 #process   { z-index: 3; }
    .page-id-243 #section-faq-content { z-index: 2; }
    .page-id-243 .god-upsell{ z-index: 1; }

    .page-id-243 #offer > .container,
    .page-id-243 #services > .container,
    .page-id-243 #pricing > .container,
    .page-id-243 .god-two-col > .container,
    .page-id-243 #cases > .container,
    .page-id-243 #advantages > .container,
    .page-id-243 #audience > .container,
    .page-id-243 #process > .container,
    .page-id-243 #section-faq-content > .container,
    .page-id-243 .god-upsell > .container { position: relative; z-index: 2; }

    .page-id-243 #offer::after,
    .page-id-243 #services::after,
    .page-id-243 #pricing::before,
    .page-id-243 .god-two-col::after,
    .page-id-243 #cases::before,
    .page-id-243 #advantages::after,
    .page-id-243 #audience::before,
    .page-id-243 #section-faq-content::before,
    .page-id-243 #offer::before,
    .page-id-243 #process::after,
    .page-id-243 #section-faq-content::after,
    .page-id-243 .god-upsell::after {
        content: "";
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
        z-index: 1;
    }

    /* Полотно текста: колонка ужата до 720 px, справа освободилась полоса
       в 440 px. Ставим туда карточки — иначе между первым экраном и
       услугами идёт 1 750 px без единой зацепки. */
    .page-id-243 #offer::after {
        right: 40px; top: 150px; width: 250px; height: 243px;
        background-image: url("../img/il/prop-cards.webp");
        transform: rotate(4deg);
        opacity: .9;
        filter: drop-shadow(0 18px 32px rgba(42, 43, 75, .12));
    }

    /* Услуги — метод: дерево структуры, лупа, шестерёнки. */
    .page-id-243 #services::after {
        right: -70px; bottom: -84px; width: 330px; height: 311px;
        background-image: url("../img/il/seo-method.webp");
        transform: rotate(3deg);
        filter: drop-shadow(0 20px 36px rgba(42, 43, 75, .13));
    }

    /* Цены — ценник с монетами. */
    .page-id-243 #pricing::before {
        left: -56px; top: 96px; width: 158px; height: 159px;
        background-image: url("../img/il/prop-tag.webp");
        transform: rotate(-7deg);
        filter: drop-shadow(0 14px 26px rgba(80, 109, 212, .14));
    }

    /* Двухколоночный блок — рост. */
    .page-id-243 .god-two-col::after {
        right: -80px; top: 110px; width: 300px; height: 266px;
        background-image: url("../img/il/seo-growth.webp");
        transform: rotate(-3deg);
        opacity: .95;
        filter: drop-shadow(0 18px 34px rgba(80, 109, 212, .14));
    }

    /* Кейсы — пины: разборы по странам. */
    .page-id-243 #cases::before {
        left: -46px; top: 130px; width: 142px; height: 174px;
        background-image: url("../img/il/prop-pins.webp");
        transform: rotate(5deg);
        filter: drop-shadow(0 14px 26px rgba(42, 43, 75, .12));
    }

    /* Преимущества — карточки над верхней границей. */
    .page-id-243 #advantages::after {
        right: 56px; top: -66px; width: 176px; height: 171px;
        background-image: url("../img/il/prop-cards.webp");
        transform: rotate(8deg) scaleX(-1);
        opacity: .82;
        filter: drop-shadow(0 14px 26px rgba(42, 43, 75, .12));
    }

    /* Для кого — охват. */
    .page-id-243 #audience::before {
        left: -80px; bottom: -96px; width: 320px; height: 332px;
        background-image: url("../img/il/seo-reach.webp");
        transform: rotate(-3deg);
        filter: drop-shadow(0 22px 40px rgba(42, 43, 75, .13));
    }

    /* FAQ — облачка реплик. */
    .page-id-243 #section-faq-content::before {
        left: -48px; top: 116px; width: 162px; height: 186px;
        background-image: url("../img/il/prop-bubbles.webp");
        transform: rotate(-5deg);
        opacity: .9;
        filter: drop-shadow(0 14px 26px rgba(157, 83, 197, .14));
    }

    /* Допродажа — карточки. */
    .page-id-243 .god-upsell::after {
        right: -40px; top: 84px; width: 190px; height: 185px;
        background-image: url("../img/il/prop-cards.webp");
        transform: rotate(-6deg);
        opacity: .85;
        filter: drop-shadow(0 14px 26px rgba(42, 43, 75, .12));
    }

    /* Вторая волна: самые длинные секции держали по одной зацепке.

       #offer — 1165 px, текстовая колонка ужата до 853 px, справа под
       текстом остаётся 588 px пустоты. Туда — документ с допуском и щит:
       блок как раз о том, почему BaFin и DSGVO делают немецкое SEO
       отдельной дисциплиной. */
    .page-id-243 #offer::before {
        right: 90px; bottom: 130px; width: 320px; height: 338px;
        background-image: url("../img/il/de-rules.webp");
        transform: rotate(-4deg);
        opacity: .95;
        filter: drop-shadow(0 20px 36px rgba(80, 109, 212, .14));
    }

    /* #process — «5 шагов», 1142 px и ни одной зацепки: секции не было
       в списке выше. Текст тут идёт широко, до 1198 px, поэтому предмет
       уходит во внешнее поле и срезается краем экрана — тот самый выход
       за сетку. Сюжет по смыслу: конвейер этапов со шкалой готовности. */
    .page-id-243 #process::after {
        right: -40px; top: 300px; width: 260px; height: 274px;
        background-image: url("../img/il/de-stages.webp");
        transform: rotate(3deg);
        filter: drop-shadow(0 20px 38px rgba(42, 43, 75, .13));
    }

    /* FAQ — 980 px, слева вверху мелкие облачка. Вторую зацепку ставим
       по диагонали, в правое поле за текстом: реплики и строка поиска. */
    .page-id-243 #section-faq-content::after {
        right: -50px; bottom: 110px; width: 300px; height: 283px;
        background-image: url("../img/il/de-faq.webp");
        transform: rotate(3deg);
        opacity: .95;
        filter: drop-shadow(0 18px 32px rgba(157, 83, 197, .13));
    }

    /* Глубина в длинных белых секциях — градиентами, не картинками. */
    .page-id-243 #offer {
        background-image:
            radial-gradient(680px 460px at 100% 10%, rgba(157, 83, 197, .07), transparent 60%),
            radial-gradient(560px 420px at -6% 70%, rgba(80, 109, 212, .07), transparent 58%);
    }
    .page-id-243 #cases,
    .page-id-243 #audience {
        background-image:
            radial-gradient(620px 420px at 6% 8%, rgba(157, 83, 197, .06), transparent 58%),
            radial-gradient(560px 400px at 98% 92%, rgba(80, 109, 212, .07), transparent 56%);
    }
}

@media (max-width: 992px) {
    .page-id-243 #offer::after,
    .page-id-243 #services::after,
    .page-id-243 #pricing::before,
    .page-id-243 .god-two-col::after,
    .page-id-243 #cases::before,
    .page-id-243 #advantages::after,
    .page-id-243 #audience::before,
    .page-id-243 #section-faq-content::before,
    .page-id-243 #offer::before,
    .page-id-243 #process::after,
    .page-id-243 #section-faq-content::after,
    .page-id-243 .god-upsell::after { content: none; }
}


/* ── Значки в карточках посадочных ────────────────────────────────────────
   В данных лежат эмодзи, которые скрипт WordPress подменял картинками
   Twemoji с s.w.org — чужой набор в чужой манере. Теперь god_icon() ставит
   свою SVG (inc/god-icons.php); здесь — плашка и цвет.
   Селекторы с `body`: в самом шаблоне есть <style> ниже по документу,
   и при равной силе он бы перебил эти правила. */
body .god-featured-item .feat-icon,
body .god-feature-item .feat-icon,
body .god-audience-item .aud-icon,
body .god-upsell-item .up-icon,
body .card-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    font-size: 22px;
    line-height: 1;
    border-radius: 14px;
    background: var(--g1-surface);
    border: 1px solid var(--g1-line);
    color: var(--g1-blue);
}

.gi-svg {
    display: block;
    width: 25px;
    height: 25px;
}

/* Длинный хвост значков: остаётся эмодзи, но без спора с палитрой. */
.gi-raw {
    -webkit-filter: grayscale(1) opacity(.6);
    filter: grayscale(1) opacity(.6);
}

/* Флаг — метка рынка, читается только в цвете. */
.gi-flag {
    width: 27px;
    height: 20px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 3px rgba(42, 43, 75, .28);
    box-shadow: 0 1px 3px rgba(42, 43, 75, .28);
}


/* ── /ru/seo-uslugi-evropa/: полотно на 3 824 px ──────────────────────────
   Русская Европа — одна секция #offer высотой 3 824 px при странице
   в 7 307 px. Текстовая колонка держится в пределах 905 px, справа на
   всю высоту идёт свободная полоса в 510 px — туда и ставим предметы.
   Берём те же, что на английской Европе: страницы парные, пусть читаются
   как пара. Четырёх зацепок на полотно хватает — одна на ~950 px. */

@media (min-width: 993px) {

    .page-id-175 .god-hero            { position: relative; z-index: 4; overflow: visible; }
    .page-id-175 #offer               { position: relative; z-index: 3; overflow: visible; }
    .page-id-175 #advantages          { position: relative; z-index: 2; overflow: visible; }
    .page-id-175 #section-faq-content { position: relative; z-index: 1; overflow: visible; }

    /* Содержимое всегда выше декора своей секции. */
    .page-id-175 .god-hero > .container,
    .page-id-175 #offer > .container,
    .page-id-175 #advantages > .container,
    .page-id-175 #section-faq-content > .container { position: relative; z-index: 2; }

    .page-id-175 .god-hero::before,
    .page-id-175 .god-hero::after,
    .page-id-175 #offer::before,
    .page-id-175 #offer::after,
    .page-id-175 #offer > .container::before,
    .page-id-175 #offer > .container::after,
    .page-id-175 #advantages::after,
    .page-id-175 #section-faq-content::before,
    .page-id-175 #section-faq-content::after {
        content: "";
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
        z-index: 1;
    }

    /* Первый экран — карта Европы, как на английской версии: уходит правым
       краем за экран, читается фрагментом большего, а не картинкой в рамке. */
    .page-id-175 .god-hero::before {
        right: -70px; top: -46px; bottom: -46px; width: 880px;
        background-image: url("../img/il/bg-europe.webp");
        background-position: center right;
        opacity: .95;
        z-index: 0;
        filter: saturate(1.15);
    }

    /* Стопка карточек протыкает границу секций — разрыв сетки.
       Ниже и левее, чем на английской версии: там на этом месте пусто,
       а здесь кнопки первого экрана, и предмет ложился прямо на них. */
    .page-id-175 .god-hero::after {
        left: -70px; bottom: -170px; width: 200px; height: 194px;
        background-image: url("../img/il/prop-cards.webp");
        transform: rotate(-5deg);
        z-index: 3;
        filter: drop-shadow(0 20px 36px rgba(42, 43, 75, .14));
    }

    /* Дальше — четыре зацепки вниз по полотну, по очереди справа и слева,
       чтобы взгляд не ехал по одной стенке. Охват. */
    .page-id-175 #offer::before {
        right: 10px; top: 520px; width: 300px; height: 311px;
        background-image: url("../img/il/seo-reach.webp");
        transform: rotate(3deg);
        filter: drop-shadow(0 20px 36px rgba(80, 109, 212, .13));
    }

    /* Пины по странам — единственный предмет слева, срезается краем экрана. */
    .page-id-175 #offer::after {
        left: -46px; top: 1520px; width: 142px; height: 174px;
        background-image: url("../img/il/prop-pins.webp");
        transform: rotate(-6deg);
        opacity: .9;
        filter: drop-shadow(0 14px 26px rgba(157, 83, 197, .14));
    }

    /* Этапы работы. Отсчёт от контейнера: его правый край — 1 320 px,
       поэтому отрицательный отступ выводит предмет во внешнее поле. */
    .page-id-175 #offer > .container::before {
        right: -90px; top: 2320px; width: 265px; height: 279px;
        background-image: url("../img/il/de-stages.webp");
        transform: rotate(3deg);
        filter: drop-shadow(0 20px 38px rgba(42, 43, 75, .13));
    }

    /* Метод: дерево структуры и лупа. */
    .page-id-175 #offer > .container::after {
        right: -110px; top: 3160px; width: 300px; height: 283px;
        background-image: url("../img/il/seo-method.webp");
        transform: rotate(-3deg);
        filter: drop-shadow(0 20px 36px rgba(42, 43, 75, .13));
    }

    /* «Что вы получаете» — рост. */
    .page-id-175 #advantages::after {
        right: -70px; top: 120px; width: 290px; height: 258px;
        background-image: url("../img/il/seo-growth.webp");
        transform: rotate(-3deg);
        opacity: .95;
        filter: drop-shadow(0 18px 34px rgba(80, 109, 212, .14));
    }

    /* FAQ — мелкие облачка слева вверху и реплики со строкой поиска справа. */
    .page-id-175 #section-faq-content::before {
        left: -48px; top: 116px; width: 162px; height: 186px;
        background-image: url("../img/il/prop-bubbles.webp");
        transform: rotate(-5deg);
        opacity: .9;
        filter: drop-shadow(0 14px 26px rgba(157, 83, 197, .14));
    }

    .page-id-175 #section-faq-content::after {
        right: -50px; bottom: 110px; width: 300px; height: 283px;
        background-image: url("../img/il/de-faq.webp");
        transform: rotate(3deg);
        opacity: .95;
        filter: drop-shadow(0 18px 32px rgba(157, 83, 197, .13));
    }

    /* Глубина на полотне — градиентами, не картинками. */
    .page-id-175 #offer {
        background-image:
            radial-gradient(700px 520px at 100% 6%, rgba(157, 83, 197, .07), transparent 60%),
            radial-gradient(600px 460px at -6% 34%, rgba(80, 109, 212, .07), transparent 58%),
            radial-gradient(660px 480px at 102% 62%, rgba(80, 109, 212, .06), transparent 58%),
            radial-gradient(600px 460px at -4% 88%, rgba(157, 83, 197, .06), transparent 58%);
    }
}

@media (max-width: 992px) {
    .page-id-175 .god-hero::before,
    .page-id-175 .god-hero::after,
    .page-id-175 #offer::before,
    .page-id-175 #offer::after,
    .page-id-175 #offer > .container::before,
    .page-id-175 #offer > .container::after,
    .page-id-175 #advantages::after,
    .page-id-175 #section-faq-content::before,
    .page-id-175 #section-faq-content::after { content: none; }
}


/* ── page-prose.php: страновые полотна ────────────────────────────────────
   Тридцать две страницы стран на одном шаблоне. Текст у них длинный
   (Великобритания — 9 206 px одной секцией), а заголовков разное число:
   у Великобритании четырнадцать, у Грузии девять, у Армении восемь.

   Поэтому привязка идёт не к номеру заголовка, а к его смыслу: класс
   проставляет inc/god-prose-il.php по ключевому слову. На любой длине
   «Сроки и бюджеты» получают ценник, а «Частые вопросы» — реплики.

   Текстовая колонка узкая (772 px) и стоит по центру: по 327 px
   свободного поля с каждой стороны, предметы уходят туда.

   Сидим на ::after: в ::before у заголовков фирменный градиентный
   штрих, картинка его затирала. */

@media (min-width: 1240px) {

    .page-template-page-prose .pp-body,
    .page-template-page-prose .pp-container-narrow,
    .page-template-page-prose .pp-content { overflow: visible; }

    .page-template-page-prose .pp-content { position: relative; }

    .page-template-page-prose .pp-content > h2 { position: relative; }

    .page-template-page-prose .pp-content > h2[class*="il-"]::after {
        content: "";
        position: absolute;
        top: -34px;
        width: 190px;
        height: 190px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        pointer-events: none;
        z-index: 0;
        opacity: .95;
        filter: drop-shadow(0 16px 30px rgba(42, 43, 75, .12));
    }

    /* Справа от колонки. */
    .page-template-page-prose .pp-content > h2.il-scope::after,
    .page-template-page-prose .pp-content > h2.il-stages::after,
    .page-template-page-prose .pp-content > h2.il-price::after,
    .page-template-page-prose .pp-content > h2.il-industry::after,
    .page-template-page-prose .pp-content > h2.il-faq::after,
    .page-template-page-prose .pp-content > h2.il-method::after {
        left: 100%;
        margin-left: 30px;
        transform: rotate(3deg);
    }

    /* Слева от колонки. */
    .page-template-page-prose .pp-content > h2.il-growth::after,
    .page-template-page-prose .pp-content > h2.il-market::after,
    .page-template-page-prose .pp-content > h2.il-tools::after,
    .page-template-page-prose .pp-content > h2.il-audience::after,
    .page-template-page-prose .pp-content > h2.il-cities::after,
    .page-template-page-prose .pp-content > h2.il-start::after,
    .page-template-page-prose .pp-content > h2.il-ads::after {
        right: 100%;
        margin-right: 30px;
        transform: rotate(-4deg);
    }

    /* Сюжет под смысл заголовка. */
    .page-template-page-prose .pp-content > h2.il-growth::after {
        background-image: url("../img/il/seo-growth.webp");
    }

    .page-template-page-prose .pp-content > h2.il-scope::after {
        background-image: url("../img/il/il-content.webp");
    }

    .page-template-page-prose .pp-content > h2.il-market::after {
        background-image: url("../img/il/seo-reach.webp");
    }

    .page-template-page-prose .pp-content > h2.il-stages::after {
        background-image: url("../img/il/de-stages.webp");
    }

    .page-template-page-prose .pp-content > h2.il-tools::after {
        background-image: url("../img/il/seo-method.webp");
    }

    .page-template-page-prose .pp-content > h2.il-method::after {
        background-image: url("../img/il/il-search.webp");
    }

    .page-template-page-prose .pp-content > h2.il-price::after {
        background-image: url("../img/il/prop-tag.webp");
        width: 150px;
        height: 150px;
    }

    .page-template-page-prose .pp-content > h2.il-audience::after {
        background-image: url("../img/il/il-team.webp");
    }

    .page-template-page-prose .pp-content > h2.il-industry::after {
        background-image: url("../img/il/il-shop.webp");
    }

    .page-template-page-prose .pp-content > h2.il-cities::after {
        background-image: url("../img/il/il-geo-pins.webp");
    }

    .page-template-page-prose .pp-content > h2.il-faq::after {
        background-image: url("../img/il/de-faq.webp");
    }

    .page-template-page-prose .pp-content > h2.il-start::after {
        background-image: url("../img/il/il-audit.webp");
    }

    .page-template-page-prose .pp-content > h2.il-ads::after {
        background-image: url("../img/il/il-ads.webp");
    }
}

/* На широких экранах поля больше — предметы крупнее. */
@media (min-width: 1500px) {
    .page-template-page-prose .pp-content > h2[class*="il-"]::after {
        width: 230px;
        height: 230px;
    }
}


/* ── Блоки для текста страниц прозы ───────────────────────────────────────
   В .pp-content было двадцать восемь абзацев и ни одного списка: перечни
   инструментов, этапы по месяцам и особенности рынка записаны сплошной
   прозой по 600–700 знаков. Читать такое невозможно.

   Ниже — набор блоков в той же манере, что карточки и шаги на лендингах.
   Текст при разметке не меняется, меняется только подача. */

.pp-content .pp-lead {
    margin: 0 0 28px;
    padding: 20px 24px;
    border-left: 3px solid var(--g1-accent);
    border-radius: 0 12px 12px 0;
    background: var(--g1-surface);
    font-size: 17px;
    line-height: 1.6;
}

/* Перечни: то, что входит в услугу, индустрии, аудитория. */
.pp-content .pp-ticks {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 10px 26px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.pp-content .pp-ticks li {
    position: relative;
    margin: 0;
    padding: 0 0 0 28px;
    line-height: 1.55;
}

.pp-content .pp-ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--g1-surface);
    border: 1.5px solid var(--g1-blue);
}

.pp-content .pp-ticks li::after {
    content: "";
    position: absolute;
    left: 4.6px;
    top: 11px;
    width: 5px;
    height: 2.5px;
    border-left: 1.8px solid var(--g1-blue);
    border-bottom: 1.8px solid var(--g1-blue);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* Карточки: города, аудитория, особенности рынка. */
.pp-content .pp-tiles {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.pp-content .pp-tiles li {
    margin: 0;
    padding: 20px 22px;
    border: 1px solid var(--g1-line);
    border-radius: 14px;
    background: #fff;
    line-height: 1.55;
}

.pp-content .pp-tiles b {
    display: block;
    margin-bottom: 7px;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 15px;
    color: var(--g1-ink);
}

/* Шаги: этапы работ по месяцам. Номер в кружке, как на лендингах. */
.pp-content .pp-steps {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    counter-reset: ppstep;
}

.pp-content .pp-steps li {
    position: relative;
    margin: 0 0 18px;
    padding: 0 0 0 58px;
    line-height: 1.55;
}

.pp-content .pp-steps li::before {
    counter-increment: ppstep;
    content: counter(ppstep);
    position: absolute;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--g1-grad);
    color: #fff;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
}

/* Линия между кружками — видно, что это последовательность. */
.pp-content .pp-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 18.5px;
    top: 44px;
    bottom: -12px;
    width: 1px;
    background: var(--g1-line);
}

.pp-content .pp-steps b {
    display: block;
    margin-bottom: 5px;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 15px;
    color: var(--g1-ink);
}

/* Плашки: инструменты, каталоги — короткие названия в ряд. */
.pp-content .pp-chips {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.pp-content .pp-chips li {
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--g1-line);
    border-radius: 999px;
    background: var(--g1-surface);
    font-size: 14px;
    line-height: 1.4;
}

/* Оговорка: с кем не работаем. */
.pp-content .pp-note {
    margin: 0 0 26px;
    padding: 14px 18px;
    border-left: 3px solid var(--g1-signal);
    border-radius: 0 10px 10px 0;
    background: rgba(212, 80, 80, .05);
    font-size: 14px;
    line-height: 1.55;
}

/* Таблица цен — в общей манере, а не голая сетка браузера. */
.pp-content table {
    width: 100%;
    margin: 0 0 26px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--g1-line);
    border-radius: 14px;
    overflow: hidden;
    font-size: 15px;
}

.pp-content thead th {
    padding: 13px 18px;
    background: var(--g1-surface);
    text-align: left;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 14px;
    color: var(--g1-ink);
}

.pp-content tbody td {
    padding: 13px 18px;
    border-top: 1px solid var(--g1-line);
    vertical-align: top;
}

.pp-content tbody tr:nth-child(even) td {
    background: rgba(241, 247, 255, .45);
}

.pp-content tbody td:last-child {
    white-space: nowrap;
    font-family: Montserrat, Arial, sans-serif;
    color: var(--g1-ink);
}

/* Частые вопросы — раскрывающийся список, как в остальных разделах. */
.pp-content .pp-faq {
    margin: 0 0 26px;
    border: 1px solid var(--g1-line);
    border-radius: 14px;
    overflow: hidden;
}

.pp-content .pp-faq details + details {
    border-top: 1px solid var(--g1-line);
}

.pp-content .pp-faq summary {
    position: relative;
    padding: 16px 52px 16px 20px;
    cursor: pointer;
    list-style: none;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 15px;
    color: var(--g1-ink);
}

.pp-content .pp-faq summary::-webkit-details-marker { display: none; }

.pp-content .pp-faq summary::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 22px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--g1-muted);
    border-bottom: 2px solid var(--g1-muted);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: transform .18s ease;
    transition: transform .18s ease;
}

.pp-content .pp-faq details[open] summary::after {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.pp-content .pp-faq details[open] summary { color: var(--g1-blue); }

.pp-content .pp-faq p {
    margin: 0;
    padding: 0 20px 18px;
    line-height: 1.6;
}

/* Заголовок вопроса остаётся h3 внутри summary — иерархия и ключи в нём
   нужны поиску, терять их ради раскрывашки нельзя. */
.pp-content .pp-faq summary h3 {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.5;
    color: inherit;
}

.pp-content .pp-faq summary h3::before,
.pp-content .pp-faq summary h3::after { content: none; }