/* Ambient-заливки секций — как на главной. Файл создан после де-крипто-прохода
   P26M-182, поэтому его откат сюда ничего не вернул и страница выбивалась из
   визуального языка главной. */
.ibp-hero, .ibp-how, .ibp-trust, .ibp-cta {
    position: relative;
    isolation: isolate;
}
.ibp-hero::after, .ibp-how::after, .ibp-trust::after, .ibp-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 45% at 50% 0%,
        rgba(115, 196, 75, 0.07) 0%, transparent 60%);
    z-index: -1;
    pointer-events: none;
}
.ibp-compare, .ibp-savings, .ibp-banks, .ibp-pricing {
    position: relative;
    isolation: isolate;
}
.ibp-compare::after, .ibp-savings::after, .ibp-banks::after, .ibp-pricing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 80% 20%,
        rgba(59, 91, 255, 0.05) 0%, transparent 55%);
    z-index: -1;
    pointer-events: none;
}

/* P26M — IBAN+ landing.
 * Все секции страницы /iban-plus. Загружается только на ней (см. enqueue.php),
 * поэтому лежит одним файлом, а не дробится по секциям.
 *
 * Токены — общие из base/: страница не вводит собственной палитры, чтобы
 * IBAN+ читался как часть продукта, а не как отдельный сайт.
 */

/* ── Hero ────────────────────────────────────────────────────────────── */

.ibp-hero {
    position: relative;
    /* Шов с .ibp-compare ниже: общий --section-seam-y с обеих сторон вместо
       прежнего «ноль снизу + 48px сверху». Полные section-pad-y с обеих
       сторон дали бы провал ~250-300px, 48px слипались (см. pages.css). */
    padding-block: var(--section-pad-y) var(--section-seam-y);
    overflow: hidden;
    isolation: isolate;
}

/* Тот же сеточный фон, которым герой и финальный CTA размечены на остальном
   сайте (sections/cta.css) — без него страница читалась как чужая, хотя
   типографика и токены совпадали. Маска гасит сетку к краям, чтобы она не
   спорила с текстом. */
.ibp-hero::after,
.ibp-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(34, 38, 46, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 38, 46, 0.4) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, black 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 60% at center, black 0%, transparent 80%);
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
}

/* Светлая тема: захардкоженный тёмный тон сетки на белом слишком тяжёлый —
   тот же приём и те же значения, что в sections/cta.css. */
.surface--light .ibp-hero::after,
.surface--light .ibp-cta::after {
    background-image:
        linear-gradient(rgba(14, 20, 27, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 20, 27, 0.07) 1px, transparent 1px);
    opacity: 1;
}

.ibp-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
}

@media (min-width: 960px) {
    .ibp-hero__inner {
        grid-template-columns: 1.15fr 0.85fr;
        gap: var(--space-10);
    }
}

.ibp-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-block: var(--space-3) var(--space-4);
}

.ibp-hero__title em {
    font-style: normal;
    color: var(--color-brand);
}

.ibp-hero__lead {
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    max-width: 46ch;
}

.ibp-hero__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.ibp-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-7);
    padding: 0;
    list-style: none;
}

.ibp-hero__fact {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
}

.ibp-hero__fact svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-brand);
    flex-shrink: 0;
}

/* ── Chat mockup ─────────────────────────────────────────────────────── */

.ibp-chat {
    background: var(--color-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    max-width: 380px;
    margin-inline: auto;
    width: 100%;
}

.ibp-chat__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.ibp-chat__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-brand);
    color: var(--color-text-inverse);
    font-weight: 700;
    font-size: var(--fs-sm);
}

.ibp-chat__name { font-weight: 600; }

.ibp-chat__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
}

.ibp-chat__msg {
    max-width: 85%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--fs-sm);
    background: var(--color-surface);
    margin: 0;
}

.ibp-chat__msg--out {
    align-self: flex-end;
    background: color-mix(in srgb, var(--color-brand) 18%, transparent);
}

.ibp-chat__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-brand);
    background: var(--color-surface);
}

.ibp-chat__card-brand {
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand);
}

.ibp-chat__card-amount {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
}

.ibp-chat__card-meta {
    font-size: var(--fs-xs);
    color: var(--color-text-secondary);
}

.ibp-chat__card-cta {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-brand);
}

/* ── Compare ─────────────────────────────────────────────────────────── */

.ibp-compare {
    /* Шов под .ibp-hero — та же величина с обеих сторон (см. pages.css).
       as .contact-channels under .page-hero--contact (pages.css). */
    padding-block-start: var(--section-seam-y);
    padding-block-end: var(--section-pad-y);
}

.ibp-compare__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: var(--space-8); }

.ibp-compare__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .ibp-compare__grid { grid-template-columns: 1fr 1fr; }
}

.ibp-compare__col {
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
    background: var(--color-elevated);
}

.ibp-compare__col--after { border-color: var(--color-brand); }

.ibp-compare__col-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.ibp-compare__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.ibp-compare__time {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ibp-compare__col--after .ibp-compare__time { color: var(--color-brand); }

.ibp-compare__steps {
    margin: 0;
    padding-left: 1.2em;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
}

.ibp-compare__note {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-sm);
}

/* ── How ─────────────────────────────────────────────────────────────── */

.ibp-how { padding-block: var(--section-pad-y); }

.ibp-how__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: var(--space-8); }

.ibp-how__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

@media (min-width: 768px) {
    .ibp-how__list { grid-template-columns: repeat(3, 1fr); }
}

.ibp-how__step {
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
    background:
        radial-gradient(ellipse 100% 60% at 0% 0%, rgba(115, 196, 75, 0.06) 0%, transparent 55%),
        var(--color-elevated);
    position: relative;
}

/* Flow arrow between steps — three cards read as a sequence, not three
   unrelated features, so the connection should be visible on desktop
   where they sit in one row. */
@media (min-width: 768px) {
    .ibp-how__step:not(:last-child)::after {
        content: '→';
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(50%, -50%);
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--color-surface);
        border: 1px solid var(--color-border-strong);
        color: var(--color-brand);
        font-size: var(--fs-sm);
        line-height: 1;
        z-index: 1;
    }
}

.ibp-how__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: rgba(115, 196, 75, 0.12);
    border: 1px solid rgba(115, 196, 75, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: var(--space-4);
}

.ibp-how__icon .p26m-icon {
    width: 20px;
    height: 20px;
    color: var(--color-brand);
}

.ibp-how__num {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--color-brand);
}

.ibp-how__title {
    font-size: var(--fs-lg);
    margin-block: var(--space-3) var(--space-2);
}

.ibp-how__text {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ── Savings ─────────────────────────────────────────────────────────── */

.ibp-savings { padding-block: var(--section-pad-y); }

.ibp-savings__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: var(--space-8); }

/* Rebuilt to the myiban.com.ua reference composition (P26M-425, owner-supplied):
   one wide panel — value+rate row, full-width slider, quick presets, a
   two-sided comparison (card acquiring vs IBAN+ 0%), then a highlighted
   summary plate with its own CTA. The old two-column grid (controls | two
   stacked result cards) read as two disconnected halves; this reads as one
   instrument top to bottom. */
.ibp-savings__board {
    padding: var(--space-7) var(--space-6);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, var(--color-brand-glow-soft) 0%, transparent 65%),
        var(--color-elevated);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    position: relative;
    isolation: isolate;
}

/* Mobile-first base: one column, natural DOM order (turnover block fully,
   then the rate fieldset) — no grid-row bookkeeping needed here, so nothing
   to get wrong when the two-column grid below doesn't apply (P26M-439). */
.ibp-savings__top {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Two inputs drive the calculator — turnover and acquiring rate (P26M-439:
   the operations slider was removed by product decision). */
.ibp-savings__field { display: block; }

.ibp-savings__field--turnover,
.ibp-savings__rates {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ibp-savings__rates { border: 0; padding: 0; }

.ibp-savings__field-label {
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.ibp-savings__turnover-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
}

.ibp-savings__turnover-currency {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-brand);
}

.ibp-savings__turnover {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.ibp-savings__range { width: 100%; accent-color: var(--color-brand); }

.ibp-savings__rate-group { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ≥768px: independent flex columns (P26M-438) shared only their top edge —
   different value font sizes and a rate column with no value row at all left
   every horizontal (labels, sliders vs. pills, bottom edges) misaligned
   (P26M-439 design review). A real grid with explicit row numbers puts both
   columns' label / value / control / footer bands on shared tracks; fieldset
   and field wrapper turn to `display: contents` so their children become
   direct grid items without an extra nesting level to fight with the
   tracks. */
@media (min-width: 768px) {
    .ibp-savings__top {
        display: grid;
        grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr);
        column-gap: var(--space-5);
        row-gap: var(--space-3);
        align-items: center;
    }

    .ibp-savings__field--turnover,
    .ibp-savings__rates {
        display: contents;
    }

    .ibp-savings__field-label { grid-row: 1; grid-column: 1; }
    .ibp-savings__rates .ibp-savings__field-label { grid-column: 2; }

    .ibp-savings__turnover-row { grid-row: 2; grid-column: 1; }

    /* Row 2 is "what's currently selected" for both columns — the turnover
       number for the continuous slider, the highlighted pill for the
       discrete rate toggle. A duplicate large rate readout here doubled up
       with the pill highlight (same fact, two sources), so the row is filled
       by the pill group itself instead (design review, reverted the earlier
       readout). Rows 3-4 (slider, presets) are continuous-input-only
       refinement tools the toggle doesn't need — the rate column simply ends
       after row 2, which reads fine since fields carry no border of their
       own to make the shorter column look unfinished. */
    .ibp-savings__rate-group { grid-row: 2; grid-column: 2; align-self: center; }

    .ibp-savings__range { grid-row: 3; grid-column: 1; }
    .ibp-savings__presets { grid-row: 4; grid-column: 1; }
}

.ibp-savings__rate {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: var(--fs-sm);
}

.ibp-savings__rate input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
    /* Инпут растянут на всю пилюлю ради клик-таргета, поэтому глобальный
       :focus-visible рисовал бы на нём второй контур поверх того, что ниже
       ставит :has(input:focus-visible). Видимый индикатор оставляем один. */
    outline: none;
}

/* :has поддерживается во всех целевых браузерах; без него состояние просто не
   подсвечивается — выбор всё равно работает и озвучивается скринридером. */
.ibp-savings__rate:has(input:checked) {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.ibp-savings__rate:has(input:focus-visible) {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

/* Quick turnover presets — plain buttons that jump the slider to a point
   inside its existing range (iban-plus-savings.js). Purely a UI shortcut,
   not a new claim. */
.ibp-savings__presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ibp-savings__preset {
    appearance: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.ibp-savings__preset:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.ibp-savings__preset:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.ibp-savings__preset-amount {
    margin-left: var(--space-1);
    color: var(--color-text-tertiary);
}

.ibp-savings__preset.is-active {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.ibp-savings__preset.is-active .ibp-savings__preset-amount { color: var(--color-brand); }

/* Two-sided comparison — card acquiring vs IBAN+'s flat 0%, the point the
   old layout never stated side by side. */
.ibp-savings__compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .ibp-savings__compare { grid-template-columns: 1fr; }
    .ibp-savings__divider { justify-self: center; }
}

.ibp-savings__result {
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.ibp-savings__result--free {
    border-color: rgba(115, 196, 75, 0.35);
    background:
        radial-gradient(ellipse 100% 100% at 50% 0%, rgba(115, 196, 75, 0.10) 0%, transparent 65%),
        var(--color-surface);
}

.ibp-savings__result-label {
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* IBAN+ PAYG card header — label plus the "0% on the transfer" badge next to
   it, so the 0% reads as scoped to the acquiring fee, not the product price
   (P26M-438: the card used to claim a flat 0% cost). */
.ibp-savings__result-labelrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.ibp-savings__zero-badge {
    padding: 2px 8px;
    font-size: 10px;
}

.ibp-savings__result-rate {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--color-text-tertiary);
    margin-top: var(--space-1);
}

.ibp-savings__result--free .ibp-savings__result-rate { color: var(--color-brand); }

.ibp-savings__result-value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-block: var(--space-2) var(--space-1);
}

.ibp-savings__result-value .unit {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text-tertiary);
    margin-inline-start: 2px;
}

.ibp-savings__result--free .ibp-savings__result-value { color: var(--color-brand); }

.ibp-savings__result-sub {
    display: block;
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
}

.ibp-savings__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-border-strong);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    justify-self: center;
}

/* Highlighted takeaway plate with its own CTA — the old layout ended on a
   plain result card with nowhere to click. */
.ibp-savings__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(115, 196, 75, 0.35);
    background:
        radial-gradient(ellipse 100% 100% at 0% 50%, rgba(115, 196, 75, 0.12) 0%, transparent 65%),
        var(--color-surface);
    box-shadow: var(--shadow-brand);
}

.ibp-savings__summary-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ibp-savings__summary-label {
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.ibp-savings__summary-value {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-brand);
}

.ibp-savings__summary-permo {
    display: block;
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
}

.ibp-savings__summary-text {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 42ch;
}

/* At a small enough turnover the PAYG fee outweighs the acquiring fee it
   replaces — net savings goes negative (P26M-438). §2 reserves green for
   positive outcomes ("never use green for warnings"), so a negative result
   switches the panel to the warning token instead of keeping the brand glow,
   which would otherwise read as good news. */
.ibp-savings__summary--negative {
    border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
    background:
        radial-gradient(ellipse 100% 100% at 0% 50%, color-mix(in srgb, var(--color-warning) 12%, transparent) 0%, transparent 65%),
        var(--color-surface);
    box-shadow: none;
}

.ibp-savings__summary--negative .ibp-savings__summary-value { color: var(--color-warning); }

.ibp-savings__note {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    margin: 0;
    /* Глобальный p { max-width: 65ch } (base/typography.css) обрезал сноску по
       ширине панели. Здесь ограничение снимаем осознанно. */
    max-width: none;
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
}

/* ── Pricing (P26M-438) ──────────────────────────────────────────────────
 * Одна прогрессивная шкала, поэтому компактная таблица, а не карточки-тиры
 * (patterns/pricing.php на главной) — тот формат про выбор одного из
 * нескольких планов, здесь выбора нет, только автоматическая ступень.
 */

.ibp-pricing { padding-block: var(--section-pad-y); }

.ibp-pricing__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: var(--space-8); }

.ibp-pricing__panel {
    max-width: 720px;
    margin-inline: auto;
    padding: var(--space-7) var(--space-6);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
    background: var(--color-elevated);
    box-shadow: var(--shadow-soft);
}

/* Horizontal scroll fallback rather than a reflowed card layout — two columns
   fit 390px without one, so the extra responsive machinery isn't earning its
   keep here (unlike wider data tables elsewhere on the site). */
.ibp-pricing__table-wrap { overflow-x: auto; }

.ibp-pricing__table {
    width: 100%;
    min-width: 360px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.ibp-pricing__table th,
.ibp-pricing__table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.ibp-pricing__table thead th {
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.ibp-pricing__table tbody td { font-size: var(--fs-base); }

.ibp-pricing__table tbody td .metric {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-brand);
}

.ibp-pricing__row-enterprise td {
    padding-block-start: var(--space-4);
    border-bottom: 0;
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    font-style: italic;
}

.ibp-pricing__note {
    margin: var(--space-6) 0 0;
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
}

/* ── Trust ───────────────────────────────────────────────────────────── */

.ibp-trust { padding-block: var(--section-pad-y); }

.ibp-trust__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: var(--space-8); }

.ibp-trust__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 640px) { .ibp-trust__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ibp-trust__grid { grid-template-columns: repeat(4, 1fr); } }

.ibp-trust__card {
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
    background: var(--color-elevated);
}

/* Акцентная карточка — единственный тезис на странице, который конкурент не
   может повторить. Отличаем её тремя носителями сразу (рамка, бейдж, залитая
   иконка), чтобы смысл не держался на одном цвете. */
.ibp-trust__card--accent {
    position: relative;
    isolation: isolate;
    border-color: var(--color-brand);
    /* Point-glow on the page's one differentiating claim — same recipe as
       #sales / .tier--featured / .finder-cta__inner (brand-radial inside the
       card + soft halo), not an ambient section wash (§18). */
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(115, 196, 75, 0.10), transparent 60%),
        color-mix(in srgb, var(--color-brand) 6%, var(--color-elevated));
    box-shadow:
        0 0 0 1px rgba(115, 196, 75, 0.08) inset,
        0 20px 48px rgba(115, 196, 75, 0.10);

    /* Бейдж и иконка — самостоятельные блоки в колонке, а НЕ инлайновая пара.
       С inline-block их взаимное положение зависело бы от того, влезает ли
       сумма ширин в контент-бокс: на узкой 4-колоночной сетке они переносились
       друг под друга, а на мобильной и планшетной ширине съезжались в один
       неровный ряд. Колонка фиксирует раскладку на всех вьюпортах. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ibp-trust__badge {
    display: block;
    width: fit-content;
    margin-bottom: var(--space-4);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    color: var(--color-text-inverse);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ibp-trust__card svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-brand);
}

.ibp-trust__card--accent .ibp-trust__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-brand) 16%, transparent);
}

.ibp-trust__title {
    font-size: var(--fs-lg);
    margin-block: var(--space-4) var(--space-2);
}

.ibp-trust__card--accent .ibp-trust__title { margin-top: var(--space-3); }

.ibp-trust__text {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ── Banks ───────────────────────────────────────────────────────────── */

.ibp-banks { padding-block: var(--section-pad-y); }

.ibp-banks__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: var(--space-7); }

/* Everything below the head lives in one centered panel so the list and the
   note share the head's axis instead of hugging the left edge of a section
   whose intro is centered (P26M-425) — that mismatch, plus text-only chips
   with no visual weight, is what read as "broken" here. */
.ibp-banks__panel {
    position: relative;
    isolation: isolate;
    max-width: 900px;
    margin-inline: auto;
    padding: var(--space-7) var(--space-6);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
    background:
        radial-gradient(ellipse 100% 100% at 50% 0%, var(--color-brand-glow-soft) 0%, transparent 65%),
        var(--color-elevated);
    box-shadow: var(--shadow-soft);
}

.ibp-banks__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.ibp-banks__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text);
    transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.ibp-banks__item:hover {
    border-color: rgba(115, 196, 75, 0.45);
    transform: translateY(-2px);
}

.ibp-banks__item-icon {
    width: 26px;
    height: 26px;
    padding: var(--space-1);
    border-radius: 50%;
    background: rgba(115, 196, 75, 0.14);
    color: var(--color-brand);
    flex-shrink: 0;
}

.ibp-banks__note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    max-width: 62ch;
    margin: 0 auto;
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
}

.ibp-banks__note-icon {
    width: 18px;
    height: 18px;
    color: var(--color-brand);
    flex-shrink: 0;
    margin-block-start: 2px;
}

/* ── CTA ─────────────────────────────────────────────────────────────── */

.ibp-cta {
    position: relative;
    padding-block: var(--section-pad-y);
    overflow: hidden;
    isolation: isolate;
}

.ibp-cta__inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ibp-cta__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.1;
    max-width: 20ch;
}

.ibp-cta__lead {
    margin-top: var(--space-4);
    max-width: 58ch;
    color: var(--color-text-secondary);
}

.ibp-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* Friction-reducer under the primary CTA (P26M-438) — same role as a
   subscription-free note under a pricing button, not another CTA. */
.ibp-cta__subtext {
    margin-top: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--color-text-tertiary);
}

.ibp-cta__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-6);
}

.ibp-cta__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
}

.ibp-cta__meta-item svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-brand);
}