/* ═══════════════════════════════════════════════════════════════
   BUMAGA ESCROW — Public Page Styles v3.0 (Clean Rebuild)
   Location: /assets/css/escrow.css
   ═══════════════════════════════════════════════════════════════
   
   CLEAN FLAT DARK UI — matches Labels / Methods / Proxy pages.
   No gradient sections. No glow. No glassmorphism. Just clean cards.
   
   Namespace: esc-*
   Dependencies: tokens.css (--bp-* variables)
   ═══════════════════════════════════════════════════════════════ */


/* ── Page Layout ── */

.esc-page {
    /* clamp(1280px, 86vw, 1420px) caused horizontal overflow on screens < 1488px
       (86vw < 1280px minimum → max-width locked to 1280px → scrollbar flash → layout jank).
       Fixed: simple max-width, width: 100% stays within viewport always. */
    max-width: 1420px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px 60px;
    box-sizing: border-box;
}

.esc-container {
    max-width: 1200px;
    margin: 0 auto;
}


/* ══════════════════════════════════════════════════════════════
   HERO — 1:1 Labels / Methods / Proxy + trust chips
   ══════════════════════════════════════════════════════════════ */

.esc-header {
    text-align: center;
    padding: 48px 0 32px;
}

.esc-title {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: var(--bp-text);
}

.esc-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--bp-accent) 0%, #2d7cd6 100%);
    border-radius: var(--bp-radius);
    box-shadow: 0 8px 25px rgba(74, 158, 255, 0.3);
    flex-shrink: 0;
}

.esc-title-icon svg {
    width: 32px;
    height: 32px;
    color: #fff;
}

.esc-subtitle {
    color: var(--bp-text-secondary);
    font-size: 18px;
    max-width: 650px;
    margin: 0 auto 20px;
    line-height: 1.6;
}

/* Trust chips — GREEN = trust, not blue */
.esc-chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.esc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bp-green-dim);
    border: 1px solid rgba(52, 211, 153, 0.15);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bp-green);
    font-family: var(--bp-sans);
}

.esc-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bp-green);
}

.esc-chip-icon {
    font-weight: 700;
    font-size: 11px;
}


/* ══════════════════════════════════════════════════════════════
   METRICS — Primary KPI (60%) + Secondary stack (40%)
   Color rule: numbers = WHITE, blue = only borders/hover/buttons
   ══════════════════════════════════════════════════════════════ */

.esc-metrics-section {
    margin-bottom: 48px;
    /* contain: layout isolates any residual counter animation reflow
       so it cannot shift elements outside this section */
    contain: layout;
}

.esc-metrics-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Primary KPI card */
.esc-kpi-card {
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.esc-kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--bp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
}

/* KPI number = WHITE, heavy, clean — not neon blue */
.esc-kpi-value {
    font-size: 48px;
    font-weight: 800;
    color: var(--bp-text);
    font-family: var(--bp-mono);
    line-height: 1;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* Fade-in reveal — числа не прыгают, просто плавно появляются */
    opacity: 0;
    transition: opacity 0.5s ease;
}
.esc-kpi-value.esc-stat-visible { opacity: 1; }

.esc-kpi-meta {
    font-size: 13px;
    color: var(--bp-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.esc-kpi-sep {
    color: var(--bp-border-hover);
    margin: 0 2px;
}

/* Dynamic line: +$102k in 2026 */
.esc-kpi-dynamic {
    font-size: 13px;
    color: var(--bp-text-muted);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.esc-kpi-plus {
    color: var(--bp-green);
    font-weight: 700;
    font-family: var(--bp-mono);
}

/* Divider between financial + trust zones */
.esc-kpi-divider {
    height: 1px;
    background: var(--bp-border);
    margin: 14px 0;
}

/* Trust signals — green checkmarks */
.esc-trust-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 20px;
}

.esc-trust-signal {
    font-size: 12px;
    color: var(--bp-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Popup on max deal — click to see proof */
.esc-has-popup {
    position: relative;
    cursor: pointer;
}

.esc-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bp-border);
    color: var(--bp-text-muted);
    font-size: 9px;
    font-weight: 700;
    margin-left: 2px;
    transition: background var(--bp-transition-fast);
}

.esc-has-popup:hover .esc-tooltip-icon {
    background: var(--bp-accent);
    color: #fff;
}

.esc-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    background: var(--bp-card-raised);
    border: 1px solid var(--bp-border-hover);
    border-radius: var(--bp-radius-sm);
    padding: 14px 16px;
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: all 0.2s ease;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.esc-has-popup:hover .esc-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.esc-popup-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--bp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.esc-popup-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-xs);
    color: var(--bp-text);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--bp-transition-fast);
}

.esc-popup-link:hover {
    border-color: var(--bp-accent);
}

.esc-popup-link svg {
    flex-shrink: 0;
    color: var(--bp-accent);
}

.esc-popup-hash {
    font-family: var(--bp-mono);
}

.esc-popup-hash-short {
    color: var(--bp-text-muted);
    font-family: var(--bp-mono);
    font-size: 11px;
    margin-left: auto;
}

/* Secondary card as link (reviews → TG group) */
a.esc-secondary-card.esc-secondary-link {
    text-decoration: none;
    cursor: pointer;
}

a.esc-secondary-card.esc-secondary-link:hover {
    border-color: var(--bp-accent-border);
}

.esc-secondary-arrow {
    color: var(--bp-text-muted);
    flex-shrink: 0;
    transition: color var(--bp-transition-fast), transform var(--bp-transition-fast);
}

a.esc-secondary-card:hover .esc-secondary-arrow {
    color: var(--bp-accent);
    transform: translateX(2px);
}

/* CTA button in KPI card */
.esc-kpi-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--bp-accent);
    color: #fff;
    border: none;
    border-radius: var(--bp-radius-xs);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background var(--bp-transition);
    font-family: var(--bp-sans);
    align-self: flex-start;
}

.esc-kpi-cta svg {
    flex-shrink: 0;
}

.esc-kpi-cta:hover {
    background: var(--bp-accent-hover);
}

/* Secondary stack */
.esc-secondary-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.esc-secondary-card {
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-sm);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    transition: border-color var(--bp-transition);
}

.esc-secondary-card:hover {
    border-color: var(--bp-border-hover);
}

/* Secondary numbers = WHITE, not blue */
.esc-secondary-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--bp-text);
    font-family: var(--bp-mono);
    min-width: 90px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.esc-secondary-value.esc-stat-visible { opacity: 1; }

.esc-secondary-info {
    flex: 1;
    min-width: 0;
}

.esc-secondary-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--bp-text);
    margin-bottom: 2px;
}

.esc-secondary-hint {
    font-size: 12px;
    color: var(--bp-text-muted);
}

/* Yearly performance — compact row */
.esc-yearly-row {
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.esc-yearly-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--bp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.esc-yearly-chips {
    display: flex;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.esc-yearly-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-xs);
    min-width: 100px;
    transition: border-color var(--bp-transition);
}

.esc-yearly-chip:hover {
    border-color: var(--bp-border-hover);
}

/* Active total = only blue accent allowed */
.esc-yearly-chip.esc-yearly-total {
    border-color: var(--bp-accent-border);
    background: var(--bp-accent-dim);
}

.esc-yearly-year {
    font-size: 11px;
    color: var(--bp-text-muted);
    font-weight: 500;
    margin-bottom: 2px;
}

/* Year amounts = progressive brightness, blue only on total */
.esc-yearly-amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--bp-text);
    font-family: var(--bp-mono);
}

.esc-yearly-chip.esc-yearly-total .esc-yearly-amount {
    color: var(--bp-accent);
}

/* Прогрессивная яркость: старые годы тусклее */
.esc-yearly-chip--old .esc-yearly-amount {
    color: var(--bp-text-muted);
}
.esc-yearly-chip--old .esc-yearly-year {
    color: var(--bp-text-muted);
    opacity: 0.6;
}

.esc-yearly-chip--mid .esc-yearly-amount {
    color: var(--bp-text-secondary);
}

/* Текущий год — акцент: белый + синяя рамка сверху */
.esc-yearly-chip--current {
    border-top: 2px solid var(--bp-accent-border);
}
.esc-yearly-chip--current .esc-yearly-amount {
    color: var(--bp-text);
}
.esc-yearly-chip--current .esc-yearly-year {
    color: var(--bp-accent);
    font-weight: 600;
}

.esc-yearly-deals {
    font-size: 10px;
    color: var(--bp-text-muted);
    margin-top: 1px;
}


/* ══════════════════════════════════════════════════════════════
   SECTION TITLE — Reusable
   ══════════════════════════════════════════════════════════════ */

.esc-section-title {
    font-size: 28px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 32px;
    color: var(--bp-text);
}


/* ══════════════════════════════════════════════════════════════
   WHAT IS ESCROW — Product explanation
   One diagram + a concise before/after comparison
   ══════════════════════════════════════════════════════════════ */

.esc-what-section {
    padding: 48px 0;
}

.esc-what-head {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: center;
}

.esc-what-label {
    margin-bottom: 10px;
    color: var(--bp-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.esc-what-head .esc-section-title {
    margin-bottom: 12px;
}

.esc-what-subtitle {
    max-width: 680px;
    margin: 0 auto;
    color: var(--bp-text-secondary);
    font-size: 15px;
    line-height: 1.65;
}

.esc-what-diagram {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.2fr) 64px minmax(0, 1fr);
    align-items: center;
    padding: 24px;
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
}

.esc-what-node {
    min-width: 0;
    padding: 20px 12px;
    text-align: center;
}

.esc-what-node--escrow {
    padding: 24px 18px;
    background: var(--bp-accent-dim);
    border: 1px solid var(--bp-accent-border-strong);
    border-radius: var(--bp-radius-sm);
}

.esc-what-node-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    color: var(--bp-text-secondary);
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: 50%;
}

.esc-what-node-icon svg {
    width: 22px;
    height: 22px;
}

.esc-what-node--escrow .esc-what-node-icon {
    color: var(--bp-accent);
    background: var(--bp-card);
    border-color: var(--bp-accent-border-strong);
}

.esc-what-node-title {
    margin: 0 0 7px;
    color: var(--bp-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.esc-what-node-desc {
    max-width: 220px;
    margin: 0 auto;
    color: var(--bp-text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.esc-what-node--escrow .esc-what-node-desc {
    color: var(--bp-text-secondary);
}

.esc-what-connector {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--bp-accent);
}

.esc-what-connector span {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    background: var(--bp-accent-border-strong);
}

.esc-what-connector span::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1px;
    width: 7px;
    height: 7px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

.esc-what-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.esc-what-compare-card {
    padding: 24px;
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-sm);
}

.esc-what-compare-card--protected {
    border-color: var(--bp-green-dim);
}

.esc-what-compare-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
}

.esc-what-compare-title h3 {
    margin: 0;
    color: var(--bp-text);
    font-size: 15px;
    font-weight: 700;
}

.esc-what-compare-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.esc-what-compare-mark--muted {
    color: var(--bp-text-muted);
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
}

.esc-what-compare-mark--safe {
    color: var(--bp-green);
    background: var(--bp-green-dim);
    border: 1px solid var(--bp-green-dim);
}

.esc-what-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.esc-what-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--bp-text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.esc-what-list-dot {
    width: 5px;
    height: 5px;
    margin-top: 7px;
    background: var(--bp-text-muted);
    border-radius: 50%;
    flex-shrink: 0;
}

.esc-what-list-dot--safe {
    background: var(--bp-green);
}

.esc-what-connector span::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    background: var(--bp-accent);
    border-radius: 50%;
    opacity: 0;
    transform: translateY(-50%);
}

/* Motion starts only when JS marks an off-screen block as ready. */
.esc-what-reveal.esc-what-reveal-ready {
    opacity: 1;
    transform: none;
}

.esc-what-reveal-ready .esc-what-head,
.esc-what-reveal-ready .esc-what-diagram,
.esc-what-reveal-ready .esc-what-node,
.esc-what-reveal-ready .esc-what-compare-card {
    opacity: 0;
    transform: translateY(14px);
}

.esc-what-reveal-ready .esc-what-connector {
    opacity: 0;
}

.esc-what-reveal-ready .esc-what-connector span {
    transform: scaleX(0);
    transform-origin: left center;
}

.esc-what-reveal-ready .esc-what-node--escrow {
    background: var(--bp-card);
    border-color: var(--bp-border);
}

.esc-what-reveal-ready .esc-what-node--escrow .esc-what-node-icon {
    color: var(--bp-text-muted);
    border-color: var(--bp-border);
    transform: scale(0.92);
}

.esc-what-reveal-ready.esc-what-visible .esc-what-head {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.42s ease-out, transform 0.42s ease-out;
}

.esc-what-reveal-ready.esc-what-visible .esc-what-diagram {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.36s ease-out 0.12s, transform 0.36s ease-out 0.12s;
}

.esc-what-reveal-ready.esc-what-visible .esc-what-node:first-child {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.32s ease-out 0.28s, transform 0.32s ease-out 0.28s;
}

.esc-what-reveal-ready.esc-what-visible .esc-what-connector:nth-child(2) {
    opacity: 1;
    transition: opacity 0.2s ease-out 0.43s;
}

.esc-what-reveal-ready.esc-what-visible .esc-what-connector:nth-child(2) span {
    transform: scaleX(1);
    transition: transform 0.32s ease-out 0.43s;
}

.esc-what-reveal-ready.esc-what-visible .esc-what-connector:nth-child(2) span::before {
    animation: escWhatTransferX 0.44s ease-in-out 0.44s both;
}

.esc-what-reveal-ready.esc-what-visible .esc-what-node--escrow {
    opacity: 1;
    transform: translateY(0);
    background: var(--bp-accent-dim);
    border-color: var(--bp-accent-border-strong);
    transition: opacity 0.35s ease-out 0.68s,
                transform 0.35s ease-out 0.68s,
                background 0.3s ease-out 0.78s,
                border-color 0.3s ease-out 0.78s;
}

.esc-what-reveal-ready.esc-what-visible .esc-what-node--escrow .esc-what-node-icon {
    color: var(--bp-accent);
    border-color: var(--bp-accent-border-strong);
    transform: scale(1);
    transition: color 0.28s ease-out 0.8s,
                border-color 0.28s ease-out 0.8s,
                transform 0.28s ease-out 0.8s;
    animation: escWhatSecure 0.38s ease-out 0.8s both;
}

.esc-what-reveal-ready.esc-what-visible .esc-what-connector:nth-child(4) {
    opacity: 1;
    transition: opacity 0.2s ease-out 0.94s;
}

.esc-what-reveal-ready.esc-what-visible .esc-what-connector:nth-child(4) span {
    transform: scaleX(1);
    transition: transform 0.34s ease-out 0.94s;
}

.esc-what-reveal-ready.esc-what-visible .esc-what-connector:nth-child(4) span::before {
    animation: escWhatTransferX 0.46s ease-in-out 0.96s both;
}

.esc-what-reveal-ready.esc-what-visible .esc-what-node:last-child {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.34s ease-out 1.22s, transform 0.34s ease-out 1.22s;
}

.esc-what-reveal-ready.esc-what-visible .esc-what-compare-card:first-child {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.38s ease-out 1.3s, transform 0.38s ease-out 1.3s;
}

.esc-what-reveal-ready.esc-what-visible .esc-what-compare-card:last-child {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.38s ease-out 1.4s, transform 0.38s ease-out 1.4s;
}

@keyframes escWhatTransferX {
    0% {
        left: 0;
        opacity: 0;
    }
    18%, 78% {
        opacity: 1;
    }
    100% {
        left: calc(100% - 6px);
        opacity: 0;
    }
}

@keyframes escWhatTransferY {
    0% {
        top: 0;
        opacity: 0;
    }
    18%, 78% {
        opacity: 1;
    }
    100% {
        top: calc(100% - 6px);
        opacity: 0;
    }
}

@keyframes escWhatSecure {
    0% { transform: scale(0.92); }
    55% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@media (max-width: 768px) {
    .esc-what-section {
        padding: 40px 0;
    }

    .esc-what-diagram {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .esc-what-node {
        padding: 18px 12px;
    }

    .esc-what-node--escrow {
        padding: 22px 16px;
    }

    .esc-what-connector {
        justify-content: center;
        width: 1px;
        height: 28px;
        margin: 0 auto;
    }

    .esc-what-connector span {
        width: 1px;
        height: 100%;
    }

    .esc-what-connector span::after {
        top: auto;
        right: 50%;
        bottom: 1px;
        transform: translateX(50%) rotate(135deg);
    }

    .esc-what-connector span::before {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .esc-what-reveal-ready .esc-what-connector span {
        transform: scaleY(0);
        transform-origin: center top;
    }

    .esc-what-reveal-ready.esc-what-visible .esc-what-connector:nth-child(2) span,
    .esc-what-reveal-ready.esc-what-visible .esc-what-connector:nth-child(4) span {
        transform: scaleY(1);
    }

    .esc-what-reveal-ready.esc-what-visible .esc-what-connector:nth-child(2) span::before {
        animation-name: escWhatTransferY;
    }

    .esc-what-reveal-ready.esc-what-visible .esc-what-connector:nth-child(4) span::before {
        animation-name: escWhatTransferY;
    }

    .esc-what-compare {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .esc-what-reveal,
    .esc-what-reveal.esc-what-reveal-ready,
    .esc-what-reveal.esc-what-reveal-ready.esc-what-visible,
    .esc-what-reveal-ready .esc-what-head,
    .esc-what-reveal-ready .esc-what-diagram,
    .esc-what-reveal-ready .esc-what-node,
    .esc-what-reveal-ready .esc-what-connector,
    .esc-what-reveal-ready .esc-what-compare-card {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }

    .esc-what-reveal-ready .esc-what-connector span,
    .esc-what-reveal-ready.esc-what-visible .esc-what-connector span {
        transform: none;
        transition: none;
    }

    .esc-what-reveal-ready .esc-what-connector span::before,
    .esc-what-reveal-ready.esc-what-visible .esc-what-connector span::before {
        display: none;
        animation: none;
    }

    .esc-what-reveal-ready .esc-what-node--escrow,
    .esc-what-reveal-ready.esc-what-visible .esc-what-node--escrow {
        background: var(--bp-accent-dim);
        border-color: var(--bp-accent-border-strong);
    }

    .esc-what-reveal-ready .esc-what-node--escrow .esc-what-node-icon,
    .esc-what-reveal-ready.esc-what-visible .esc-what-node--escrow .esc-what-node-icon {
        color: var(--bp-accent);
        border-color: var(--bp-accent-border-strong);
        transform: none;
        transition: none;
        animation: none;
    }
}


/* ══════════════════════════════════════════════════════════════
   STORY DIVIDER — Quiet transition between explanation and risk
   Zero layout height: uses the existing whitespace between sections
   ═══════════════════════════════════════════════════════════════ */

.esc-story-divider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: min(720px, calc(100% - 40px));
    height: 28px;
    margin: -14px auto;
    position: relative;
    z-index: 1;
}

.esc-story-divider-line {
    display: block;
    height: 1px;
    background: var(--bp-border);
}

.esc-story-divider-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--bp-accent);
    background: var(--bp-surface);
    border: 1px solid var(--bp-accent-border);
    border-radius: 50%;
}

.esc-story-divider-node svg {
    width: 15px;
    height: 15px;
}

.esc-story-divider.esc-story-divider-ready .esc-story-divider-line {
    opacity: 0;
    transform: scaleX(0);
}

.esc-story-divider.esc-story-divider-ready .esc-story-divider-line--left {
    transform-origin: right center;
}

.esc-story-divider.esc-story-divider-ready .esc-story-divider-line--right {
    transform-origin: left center;
}

.esc-story-divider.esc-story-divider-ready .esc-story-divider-node {
    opacity: 0;
    transform: scale(0.82);
}

.esc-story-divider.esc-story-divider-ready.esc-story-divider-visible .esc-story-divider-line {
    opacity: 1;
    transform: scaleX(1);
    transition: opacity 0.45s ease-out, transform 0.55s ease-out;
}

.esc-story-divider.esc-story-divider-ready.esc-story-divider-visible .esc-story-divider-node {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.25s ease-out 0.28s, transform 0.3s ease-out 0.28s;
}

@media (max-width: 768px) {
    .esc-story-divider {
        width: min(420px, calc(100% - 48px));
        gap: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .esc-story-divider,
    .esc-story-divider.esc-story-divider-ready,
    .esc-story-divider.esc-story-divider-ready.esc-story-divider-visible,
    .esc-story-divider-line,
    .esc-story-divider-node {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ══════════════════════════════════════════════════════════════
   WHY ESCROW EXISTS — Unified 2×2 risk panel
   One surface, internal dividers, no card mosaic
   ══════════════════════════════════════════════════════════════ */

.esc-why-section {
    padding: 48px 0;
}

.esc-why-head {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: center;
}

.esc-why-label {
    margin-bottom: 10px;
    color: var(--bp-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.esc-why-head .esc-section-title {
    margin-bottom: 12px;
}

.esc-why-subtitle {
    max-width: 680px;
    margin: 0 auto;
    color: var(--bp-text-secondary);
    font-size: 15px;
    line-height: 1.65;
}

.esc-why-panel {
    overflow: hidden;
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
}

.esc-why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.esc-why-cell {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    min-width: 0;
    padding: 28px;
    transition: background var(--bp-transition-fast);
}

.esc-why-cell:nth-child(odd) {
    border-right: 1px solid var(--bp-border);
}

.esc-why-cell:nth-child(-n + 2) {
    border-bottom: 1px solid var(--bp-border);
}

.esc-why-cell:hover {
    background: var(--bp-card-hover);
}

.esc-why-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--bp-text-secondary);
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-xs);
}

.esc-why-icon svg {
    width: 21px;
    height: 21px;
}

.esc-why-cell-body {
    min-width: 0;
}

.esc-why-cell-body h3 {
    margin: 1px 0 8px;
    color: var(--bp-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.esc-why-cell-body p {
    margin: 0;
    color: var(--bp-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.esc-why-outcomes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--bp-surface);
    border-top: 1px solid var(--bp-border);
}

.esc-why-outcome {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    padding: 15px 12px;
    color: var(--bp-text-secondary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

.esc-why-outcome + .esc-why-outcome {
    border-left: 1px solid var(--bp-border);
}

.esc-why-outcome > span:first-child {
    color: var(--bp-green);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.esc-why-reveal.esc-why-reveal-ready {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

.esc-why-reveal.esc-why-reveal-ready.esc-why-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .esc-why-section {
        padding: 40px 0;
    }

    .esc-why-grid {
        grid-template-columns: 1fr;
    }

    .esc-why-cell {
        padding: 22px 20px;
        border-right: 0 !important;
        border-bottom: 1px solid var(--bp-border);
    }

    .esc-why-cell:last-child {
        border-bottom: 0;
    }

    .esc-why-outcomes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .esc-why-outcome:nth-child(3) {
        border-left: 0;
    }

    .esc-why-outcome:nth-child(n + 3) {
        border-top: 1px solid var(--bp-border);
    }
}

@media (max-width: 480px) {
    .esc-why-cell {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 13px;
        padding: 20px 16px;
    }

    .esc-why-icon {
        width: 38px;
        height: 38px;
    }

    .esc-why-icon svg {
        width: 19px;
        height: 19px;
    }

    .esc-why-outcomes {
        grid-template-columns: 1fr;
    }

    .esc-why-outcome {
        justify-content: flex-start;
        padding: 13px 16px;
        text-align: left;
    }

    .esc-why-outcome + .esc-why-outcome {
        border-top: 1px solid var(--bp-border);
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .esc-why-reveal,
    .esc-why-reveal.esc-why-reveal-ready,
    .esc-why-reveal.esc-why-reveal-ready.esc-why-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ══════════════════════════════════════════════════════════════
   ESCROW FLOW — 5-step process (replaces Services + How It Works)
   Scroll-linked vertical timeline on every viewport
   ══════════════════════════════════════════════════════════════ */

.esc-flow-section {
    padding: 48px 0;
}

.esc-flow-head {
    max-width: 720px;
    margin: 0 auto 38px;
    text-align: center;
}

.esc-flow-head .esc-section-title {
    margin-bottom: 12px;
}

.esc-flow-subtitle {
    max-width: 480px;
    margin: 0 auto;
    color: var(--bp-text-secondary);
    font-size: 15px;
    line-height: 1.5;
}

/* ── Scroll-linked vertical timeline ── */

.esc-flow-timeline {
    max-width: 1120px;
    margin: 0 auto 36px;
    position: relative;
}

.esc-flow-track {
    position: absolute;
    left: 50%;
    width: 2px;
    overflow: hidden;
    background: var(--bp-border);
    border-radius: 2px;
    transform: translateX(-50%);
    pointer-events: none;
}

.esc-flow-track-progress {
    display: block;
    width: 100%;
    height: 0;
    background: var(--bp-accent);
    border-radius: inherit;
    transition: height 0.12s linear;
}

.esc-flow-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    min-height: 154px;
    position: relative;
}

.esc-flow-step-content {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    padding: 22px 24px;
    position: relative;
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-sm);
    transition: opacity 0.35s ease-out, transform 0.35s ease-out, border-color 0.35s ease-out, background 0.35s ease-out;
}

.esc-flow-step:nth-child(even) .esc-flow-step-content {
    grid-column: 3;
}

.esc-flow-step-content::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -35px;
    width: 34px;
    height: 1px;
    background: var(--bp-border);
    transition: background 0.35s ease-out;
}

.esc-flow-step:nth-child(even) .esc-flow-step-content::after {
    right: auto;
    left: -35px;
}

.esc-flow-step-node {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    justify-self: center;
    position: relative;
    z-index: 3;
    color: var(--bp-text-muted);
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: 50%;
    transition: color 0.3s ease-out, background 0.3s ease-out, border-color 0.3s ease-out, transform 0.3s ease-out;
}

.esc-flow-step-node span {
    font-family: var(--bp-mono);
    font-size: 14px;
    font-weight: 700;
}

.esc-flow-step-title {
    margin: 0 0 8px;
    color: var(--bp-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.esc-flow-step-desc {
    margin: 0;
    color: var(--bp-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.esc-flow-timeline-ready .esc-flow-step-content {
    opacity: 0.68;
    transform: translateX(-12px);
}

.esc-flow-timeline-ready .esc-flow-step:nth-child(even) .esc-flow-step-content {
    transform: translateX(12px);
}

.esc-flow-step.esc-flow-step-active .esc-flow-step-content {
    opacity: 1;
    background: var(--bp-card-raised);
    border-color: var(--bp-accent-border);
    transform: translateX(0);
}

.esc-flow-step.esc-flow-step-active .esc-flow-step-content::after {
    background: var(--bp-accent-border-strong);
}

.esc-flow-step.esc-flow-step-active .esc-flow-step-node {
    color: var(--bp-accent);
    background: var(--bp-card-raised);
    border-color: var(--bp-accent-border-strong);
    transform: scale(1.04);
}

@media (max-width: 768px) {
    .esc-flow-head {
        margin-bottom: 30px;
    }

    .esc-flow-timeline {
        margin-bottom: 30px;
    }

    .esc-flow-track {
        left: 21px;
    }

    .esc-flow-step {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 16px;
        min-height: 0;
        padding-bottom: 26px;
        align-items: start;
    }

    .esc-flow-step:last-child {
        padding-bottom: 0;
    }

    .esc-flow-step-content,
    .esc-flow-step:nth-child(even) .esc-flow-step-content {
        grid-column: 2;
        padding: 18px 16px;
    }

    .esc-flow-step-node {
        grid-column: 1;
        width: 42px;
        height: 42px;
    }

    .esc-flow-step-content::after,
    .esc-flow-step:nth-child(even) .esc-flow-step-content::after {
        top: 21px;
        right: auto;
        left: -17px;
        width: 16px;
    }

    .esc-flow-timeline-ready .esc-flow-step-content,
    .esc-flow-timeline-ready .esc-flow-step:nth-child(even) .esc-flow-step-content {
        transform: translateY(10px);
    }

    .esc-flow-step.esc-flow-step-active .esc-flow-step-content,
    .esc-flow-step.esc-flow-step-active:nth-child(even) .esc-flow-step-content {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .esc-flow-track-progress,
    .esc-flow-step-content,
    .esc-flow-step-node {
        transition: none;
    }
}

/* ── Helper trust line ── */

.esc-flow-helper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-xs);
    max-width: 720px;
    margin: 0 auto 24px;
}

.esc-flow-helper svg {
    color: var(--bp-green);
    flex-shrink: 0;
}

.esc-flow-helper span {
    font-size: 13px;
    color: var(--bp-text-secondary);
    line-height: 1.5;
}




/* ── __ESC_RULES_LINK_V1__ — link to /escrow-rules ── */
.esc-flow-rules-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px;
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-xs);
    max-width: 720px;
    margin: 0 auto;
    text-decoration: none;
    transition: border-color var(--bp-transition-fast);
}

.esc-flow-rules-link svg {
    color: var(--bp-accent);
    flex-shrink: 0;
}

.esc-flow-rules-link span {
    font-size: 13px;
    font-weight: 600;
    color: var(--bp-accent);
    line-height: 1.5;
    font-family: var(--bp-sans);
}

.esc-flow-rules-link .esc-flow-rules-arrow {
    transition: transform var(--bp-transition-fast);
}

.esc-flow-rules-link:hover {
    border-color: var(--bp-accent);
}

.esc-flow-rules-link:hover span {
    color: var(--bp-accent-hover);
}

.esc-flow-rules-link:hover .esc-flow-rules-arrow {
    transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════════════
   DISPUTE RESOLUTION — Process path with decision branches
   One system surface, no card mosaic
   ═══════════════════════════════════════════════════════════════ */

.esc-dispute-section {
    padding: 48px 0;
}

.esc-dispute-head {
    max-width: 760px;
    margin: 0 auto 32px;
    text-align: center;
}

.esc-dispute-label {
    margin-bottom: 10px;
    color: var(--bp-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.esc-dispute-head .esc-section-title {
    margin-bottom: 12px;
}

.esc-dispute-subtitle {
    max-width: 720px;
    margin: 0 auto;
    color: var(--bp-text-secondary);
    font-size: 15px;
    line-height: 1.65;
}

.esc-dispute-map {
    max-width: 1100px;
    margin: 0 auto;
    padding: 34px 34px 0;
    overflow: hidden;
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
}

.esc-dispute-path {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) 54px minmax(0, 1fr);
    align-items: center;
}

.esc-dispute-stage {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    min-width: 0;
}

.esc-dispute-stage-icon,
.esc-dispute-outcome-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--bp-accent);
    background: var(--bp-surface);
    border: 1px solid var(--bp-accent-border);
    border-radius: 50%;
    flex-shrink: 0;
}

.esc-dispute-stage-icon svg,
.esc-dispute-outcome-icon svg {
    width: 20px;
    height: 20px;
}

.esc-dispute-stage h3,
.esc-dispute-outcome h3 {
    margin: 1px 0 7px;
    color: var(--bp-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.esc-dispute-stage p,
.esc-dispute-outcome p {
    margin: 0;
    color: var(--bp-text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.esc-dispute-connector {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--bp-accent-border-strong);
    transform-origin: left center;
}

.esc-dispute-decision {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.esc-dispute-decision::before,
.esc-dispute-decision::after {
    content: '';
    width: 1px;
    height: 28px;
    background: var(--bp-accent-border-strong);
    transform-origin: top center;
}

.esc-dispute-decision-node {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 15px 0 0;
    color: var(--bp-text);
    background: var(--bp-accent-dim);
    border: 1px solid var(--bp-accent-border-strong);
    border-radius: 22px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.esc-dispute-decision-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--bp-accent);
    background: var(--bp-card-raised);
    border-radius: 50%;
    flex-shrink: 0;
}

.esc-dispute-decision-icon svg {
    width: 20px;
    height: 20px;
}

.esc-dispute-outcomes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-top: 28px;
    position: relative;
}

.esc-dispute-outcomes::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(16.666% - 1px);
    right: calc(16.666% - 1px);
    height: 1px;
    background: var(--bp-border-hover);
    transform-origin: center;
}

.esc-dispute-outcome {
    padding: 0 18px 6px;
    position: relative;
    text-align: center;
}

.esc-dispute-outcome::before {
    content: '';
    position: absolute;
    top: -28px;
    left: 50%;
    width: 1px;
    height: 28px;
    background: var(--bp-border-hover);
    transform-origin: top center;
}

.esc-dispute-outcome-icon {
    margin: 0 auto 12px;
    position: relative;
    z-index: 1;
    color: var(--bp-text-secondary);
    border-color: var(--bp-border-hover);
}

.esc-dispute-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 30px -34px 0;
    padding: 16px 24px;
    color: var(--bp-text);
    background: var(--bp-surface);
    border-top: 1px solid var(--bp-border);
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    transition: background var(--bp-transition-fast);
}

.esc-dispute-link-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.esc-dispute-link-title {
    color: var(--bp-accent);
    font-size: 14px;
    font-weight: 700;
}

.esc-dispute-link-desc {
    color: var(--bp-text-secondary);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.esc-dispute-link-arrow {
    color: var(--bp-accent);
    flex-shrink: 0;
    font-size: 18px;
    transition: transform var(--bp-transition-fast);
}

.esc-dispute-link:hover {
    background: var(--bp-card-hover);
}

.esc-dispute-link:hover .esc-dispute-link-title {
    color: var(--bp-accent-hover);
}

.esc-dispute-link:hover .esc-dispute-link-arrow {
    transform: translateX(3px);
}

.esc-dispute-link:focus-visible {
    outline: 2px solid var(--bp-accent);
    outline-offset: -2px;
}

.esc-disputes-promo {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    max-width: 1100px;
    margin: 16px auto 0;
    padding: 18px 20px;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-sm);
}

.esc-disputes-promo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--bp-accent);
    background: var(--bp-card-raised);
    border: 1px solid var(--bp-accent-border);
    border-radius: 50%;
}

.esc-disputes-promo-icon svg {
    width: 20px;
    height: 20px;
}

.esc-disputes-promo-copy {
    min-width: 0;
}

.esc-disputes-promo-label {
    margin-bottom: 4px;
    color: var(--bp-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.65px;
    text-transform: uppercase;
}

.esc-disputes-promo-copy h3 {
    margin: 0 0 4px;
    color: var(--bp-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.esc-disputes-promo-copy p {
    max-width: 680px;
    margin: 0;
    color: var(--bp-text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.esc-disputes-promo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    color: var(--bp-accent);
    background: var(--bp-accent-dim);
    border: 1px solid var(--bp-accent-border);
    border-radius: var(--bp-radius-xs);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--bp-transition-fast), border-color var(--bp-transition-fast), background var(--bp-transition-fast);
}

.esc-disputes-promo-link > span:last-child {
    transition: transform var(--bp-transition-fast);
}

.esc-disputes-promo-link:hover {
    color: var(--bp-accent-hover);
    background: var(--bp-card-hover);
    border-color: var(--bp-accent-border-strong);
}

.esc-disputes-promo-link:hover > span:last-child {
    transform: translateX(3px);
}

/* Staged reveal: path, decision, then outcomes. */
.esc-dispute-reveal-ready .esc-dispute-stage,
.esc-dispute-reveal-ready .esc-dispute-decision-node,
.esc-dispute-reveal-ready .esc-dispute-outcome,
.esc-dispute-reveal-ready .esc-dispute-link,
.esc-dispute-reveal-ready .esc-disputes-promo {
    opacity: 0;
    transform: translateY(8px);
}

.esc-dispute-reveal-ready .esc-dispute-connector {
    transform: scaleX(0);
}

.esc-dispute-reveal-ready .esc-dispute-decision::before,
.esc-dispute-reveal-ready .esc-dispute-decision::after,
.esc-dispute-reveal-ready .esc-dispute-outcome::before {
    transform: scaleY(0);
}

.esc-dispute-reveal-ready .esc-dispute-outcomes::before {
    transform: scaleX(0);
}

.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-stage,
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-decision-node,
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-outcome,
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-link,
.esc-dispute-reveal-ready.esc-dispute-visible .esc-disputes-promo {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-connector {
    transform: scaleX(1);
    transition: transform 0.32s ease-out;
}

.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-decision::before,
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-decision::after,
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-outcome::before {
    transform: scaleY(1);
    transition: transform 0.28s ease-out;
}

.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-outcomes::before {
    transform: scaleX(1);
    transition: transform 0.4s ease-out 0.78s;
}

.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-stage:nth-of-type(1) { transition-delay: 0.04s; }
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-connector:nth-of-type(1) { transition-delay: 0.18s; }
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-stage:nth-of-type(2) { transition-delay: 0.29s; }
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-connector:nth-of-type(2) { transition-delay: 0.42s; }
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-stage:nth-of-type(3) { transition-delay: 0.53s; }
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-decision::before { transition-delay: 0.64s; }
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-decision-node { transition-delay: 0.72s; }
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-decision::after { transition-delay: 0.76s; }
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-outcome:nth-child(1) { transition-delay: 0.88s; }
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-outcome:nth-child(2) { transition-delay: 0.98s; }
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-outcome:nth-child(3) { transition-delay: 1.08s; }
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-outcome:nth-child(1)::before { transition-delay: 0.84s; }
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-outcome:nth-child(2)::before { transition-delay: 0.9s; }
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-outcome:nth-child(3)::before { transition-delay: 0.96s; }
.esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-link { transition-delay: 1.16s; }
.esc-dispute-reveal-ready.esc-dispute-visible .esc-disputes-promo { transition-delay: 1.24s; }

@media (max-width: 768px) {
    .esc-dispute-section {
        padding: 40px 0;
    }

    .esc-dispute-map {
        padding: 24px 18px 0;
    }

    .esc-dispute-path {
        grid-template-columns: 1fr;
    }

    .esc-dispute-stage {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .esc-dispute-connector {
        width: 1px;
        height: 28px;
        margin-left: 20px;
        transform-origin: top center;
    }

    .esc-dispute-decision {
        align-items: flex-start;
    }

    .esc-dispute-decision::before,
    .esc-dispute-decision::after {
        margin-left: 20px;
    }

    .esc-dispute-outcomes {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 0;
    }

    .esc-dispute-outcomes::before {
        top: 0;
        bottom: 21px;
        left: 20px;
        right: auto;
        width: 1px;
        height: auto;
        transform-origin: top center;
    }

    .esc-dispute-outcome {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: start;
        gap: 14px;
        padding: 0 0 24px;
        text-align: left;
    }

    .esc-dispute-outcome:last-child {
        padding-bottom: 0;
    }

    .esc-dispute-outcome::before {
        display: none;
    }

    .esc-dispute-outcome-icon {
        margin: 0;
        background: var(--bp-surface);
    }

    .esc-dispute-link {
        margin: 26px -18px 0;
        padding: 14px 16px;
    }

    .esc-disputes-promo {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
    }

    .esc-disputes-promo-link {
        grid-column: 1 / -1;
        width: 100%;
    }

    .esc-dispute-reveal-ready .esc-dispute-connector,
    .esc-dispute-reveal-ready .esc-dispute-outcomes::before {
        transform: scaleY(0);
    }

    .esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-connector,
    .esc-dispute-reveal-ready.esc-dispute-visible .esc-dispute-outcomes::before {
        transform: scaleY(1);
    }
}

@media (max-width: 480px) {
    .esc-dispute-head {
        margin-bottom: 26px;
    }

    .esc-dispute-subtitle {
        font-size: 14px;
    }

    .esc-dispute-map {
        padding-right: 15px;
        padding-left: 15px;
    }

    .esc-dispute-link {
        margin-right: -15px;
        margin-left: -15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .esc-dispute-reveal,
    .esc-dispute-reveal-ready .esc-dispute-stage,
    .esc-dispute-reveal-ready .esc-dispute-connector,
    .esc-dispute-reveal-ready .esc-dispute-decision::before,
    .esc-dispute-reveal-ready .esc-dispute-decision::after,
    .esc-dispute-reveal-ready .esc-dispute-decision-node,
    .esc-dispute-reveal-ready .esc-dispute-outcomes::before,
    .esc-dispute-reveal-ready .esc-dispute-outcome,
    .esc-dispute-reveal-ready .esc-dispute-outcome::before,
    .esc-dispute-reveal-ready .esc-dispute-link,
    .esc-dispute-reveal-ready .esc-disputes-promo {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   SECURITY — 2×2 monolithic grid (PR-7)
   ══════════════════════════════════════════════════════════════ */

.esc-security-section {
    padding: 48px 0;
}

.esc-security-header {
    text-align: center;
    margin-bottom: 36px;
}

.esc-security-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--bp-text-muted);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.esc-security-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--bp-text);
    margin-bottom: 10px;
}

.esc-security-subtitle {
    font-size: 14px;
    color: var(--bp-text-secondary);
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Monolithic 2×2 grid — single card, internal dividers */
.esc-security-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}

/* Internal dividers via box-shadow on cells */
.esc-security-cell {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 32px 28px;
    transition: background var(--bp-transition);
    position: relative;
}

/* Right border for left cells */
.esc-security-cell:nth-child(odd) {
    border-right: 1px solid var(--bp-border);
}

/* Bottom border for top row */
.esc-security-cell:nth-child(-n+2) {
    border-bottom: 1px solid var(--bp-border);
}

.esc-security-cell:hover {
    background: rgba(74, 158, 255, 0.04);
}

.esc-security-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bp-accent-dim);
    border: 1px solid var(--bp-accent-border);
    border-radius: var(--bp-radius-sm);
    color: var(--bp-accent);
}

.esc-security-icon svg {
    width: 20px;
    height: 20px;
}

.esc-security-cell-body {
    flex: 1;
    min-width: 0;
}

.esc-security-cell-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--bp-text);
    margin-bottom: 6px;
    line-height: 1.3;
}

.esc-security-cell-desc {
    font-size: 13px;
    color: var(--bp-text-secondary);
    line-height: 1.6;
}

/* Mobile */
@media (max-width: 768px) {
    .esc-security-grid {
        grid-template-columns: 1fr;
    }
    .esc-security-cell:nth-child(odd) {
        border-right: none;
    }
    .esc-security-cell:nth-child(-n+2) {
        border-bottom: none;
    }
    .esc-security-cell:not(:last-child) {
        border-bottom: 1px solid var(--bp-border);
    }
    .esc-security-cell {
        padding: 22px 20px;
    }
}


/* ══════════════════════════════════════════════════════════════
   PRICING — Split layout: tiers (left) + calculator (right)
   Interactive: click tier → syncs calculator select
   ══════════════════════════════════════════════════════════════ */

.esc-pricing-section {
    padding: 48px 0;
}

@media (prefers-reduced-motion: no-preference) {
    .esc-pricing-section .esc-pricing-reveal-ready {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        transition: opacity 0.65s ease-out, transform 0.65s cubic-bezier(0.2, 0.75, 0.25, 1);
    }

    .esc-pricing-section .esc-pricing-reveal-ready.esc-pricing-visible {
        opacity: 1;
        transform: none;
    }

    .esc-pricing-section .esc-pricing-subtitle.esc-pricing-visible { transition-delay: 0.06s; }
    .esc-pricing-section .esc-pricing-left.esc-pricing-visible { transition-delay: 0.12s; }
    .esc-pricing-section .esc-pricing-right.esc-pricing-visible { transition-delay: 0.18s; }
}

.esc-pricing-subtitle {
    text-align: center;
    color: var(--bp-text-secondary);
    font-size: 15px;
    margin: -20px auto 36px;
    max-width: 480px;
    line-height: 1.5;
}

/* ── Split grid ── */

.esc-pricing-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.esc-pricing-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.esc-pricing-right {
    display: flex;
    flex-direction: column;
}

/* ── Tier card (shared) ── */

.esc-tier {
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    padding: 20px 22px;
    transition: border-color var(--bp-transition);
    position: relative;
    cursor: pointer;
}

.esc-tier:hover {
    border-color: var(--bp-border-hover);
}

/* Active state (selected tier) */
.esc-tier.esc-tier-active {
    border-color: var(--bp-accent-border-strong);
}

/* Primary tier — Standard */
.esc-tier-primary {
    padding-top: 32px;
}

.esc-tier-badge {
    position: absolute;
    top: -11px;
    left: 22px;
    padding: 3px 12px;
    background: var(--bp-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--bp-sans);
}

/* Header row */
.esc-tier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.esc-tier-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--bp-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.esc-tier-rate-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.esc-tier-rate {
    font-size: 24px;
    font-weight: 900;
    color: var(--bp-accent);
    font-family: var(--bp-mono);
    line-height: 1;
}

.esc-tier-min {
    font-size: 12px;
    color: var(--bp-text-muted);
    font-weight: 500;
}

.esc-tier-desc {
    font-size: 13px;
    color: var(--bp-text-secondary);
    line-height: 1.55;
    margin-bottom: 0;
}

/* Secondary text-link */
.esc-tier-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--bp-accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--bp-transition-fast);
    font-family: var(--bp-sans);
}

.esc-tier-link:hover {
    color: var(--bp-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Info popup on Training "?" */
.esc-tier-info-trigger {
    display: inline-flex;
    margin-left: 2px;
}

.esc-tier-popup {
    min-width: 280px;
    bottom: auto;
    top: calc(100% + 10px);
    left: auto;
    right: 0;
}

.esc-tier-popup-text {
    font-size: 12px;
    color: var(--bp-text-secondary);
    line-height: 1.6;
    margin: 0 0 6px;
}

.esc-tier-popup-text:last-child { margin-bottom: 0; }

/* Custom tier — compact one-line */
.esc-tier-custom {
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-xs);
}

.esc-tier-custom span {
    font-size: 13px;
    color: var(--bp-text-muted);
}

/* ── Calculator (right side) — Live mode ── */

.esc-calc-box {
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    padding: 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.esc-calc-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--bp-text);
}

.esc-calc-field {
    margin-bottom: 12px;
}

.esc-calc-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--bp-text-secondary);
    font-size: 12px;
}

.esc-calc-input {
    width: 100%;
    padding: 9px 12px;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-xs);
    color: var(--bp-text);
    font-size: 15px;
    font-family: var(--bp-mono);
    font-weight: 600;
    transition: border-color var(--bp-transition);
    box-sizing: border-box;
}

.esc-calc-input:focus {
    outline: none;
    border-color: var(--bp-accent);
    box-shadow: 0 0 0 3px var(--bp-accent-dim);
}

/* Live result — always visible */
.esc-calc-live {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-xs);
    padding: 12px 14px;
    margin-bottom: 10px;
}

.esc-calc-live-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
}

.esc-calc-live-row + .esc-calc-live-row {
    border-top: 1px solid var(--bp-border);
}

.esc-calc-live-label {
    font-size: 12px;
    color: var(--bp-text-secondary);
    font-weight: 500;
}

.esc-calc-live-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--bp-accent);
    font-family: var(--bp-mono);
    transition: color 0.2s ease;
}

.esc-calc-payout {
    color: var(--bp-text);
}

.esc-calc-live-note {
    font-size: 11px;
    color: var(--bp-text-muted);
    text-align: center;
    margin-top: 6px;
}

.esc-calc-auto-hint {
    font-size: 11px;
    color: var(--bp-text-muted);
    text-align: center;
    margin-bottom: 12px;
}

/* CTA in calculator */
.esc-tier-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 28px;
    background: var(--bp-accent);
    color: #fff;
    border: none;
    border-radius: var(--bp-radius-xs);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: background var(--bp-transition);
    font-family: var(--bp-sans);
}

.esc-tier-cta:hover { background: var(--bp-accent-hover); }
.esc-tier-cta svg { flex-shrink: 0; }

.esc-calc-cta {
    margin-top: auto;
    width: 100%;
    justify-content: center;
}

/* Trust micro-features under tiers */
.esc-tier-features {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.esc-tier-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--bp-text-muted);
}

.esc-tier-feature-check {
    color: var(--bp-green);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}



/* ══════════════════════════════════════════════════════════════
   USE CASES — Chips + Unified Panel
   ══════════════════════════════════════════════════════════════ */

.esc-cases-section {
    padding: 56px 0 48px;
}

@media (prefers-reduced-motion: no-preference) {
    .esc-cases-section .esc-cases-reveal-ready {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        transition: opacity 0.65s ease-out, transform 0.65s cubic-bezier(0.2, 0.75, 0.25, 1);
    }

    .esc-cases-section .esc-cases-reveal-ready.esc-cases-visible {
        opacity: 1;
        transform: none;
    }

    .esc-cases-section .esc-cases-chips.esc-cases-visible { transition-delay: 0.10s; }
    .esc-cases-section .esc-cases-panel.esc-cases-visible { transition-delay: 0.18s; }
}

.esc-cases-header {
    text-align: center;
    margin-bottom: 32px;
}

.esc-cases-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--bp-text-muted);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.esc-cases-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--bp-text);
    margin-bottom: 10px;
}

.esc-cases-subtitle {
    font-size: 14px;
    color: var(--bp-text-secondary);
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Chips row ── */
.esc-cases-chips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.esc-case-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid var(--bp-border);
    background: rgba(255,255,255,0.03);
    color: var(--bp-text-secondary);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--bp-sans);
    cursor: pointer;
    transition: border-color var(--bp-transition), background var(--bp-transition), color var(--bp-transition);
    user-select: none;
}

.esc-case-chip:hover {
    border-color: rgba(74, 158, 255, 0.30);
    background: rgba(255,255,255,0.05);
    color: var(--bp-text);
}

.esc-case-chip--active {
    border-color: rgba(74, 158, 255, 0.45);
    background: rgba(74, 158, 255, 0.08);
    color: var(--bp-text);
}

.esc-case-chip-icon {
    font-size: 15px;
    line-height: 1;
}

/* ── Unified expand panel ── */
.esc-cases-panel {
    max-width: 860px;
    margin: 0 auto;
    position: relative;
}

.esc-case-content {
    display: none;
}

.esc-case-content--active {
    display: block;
    animation: escCaseFadeIn 0.22s ease;
}

@keyframes escCaseFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.esc-case-content-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    overflow: hidden;
}

/* Left column */
.esc-case-left {
    padding: 32px 28px;
    border-right: 1px solid var(--bp-border);
}

.esc-case-icon {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 14px;
}

.esc-case-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--bp-text);
    margin-bottom: 10px;
}

.esc-case-desc {
    font-size: 14px;
    color: var(--bp-text-secondary);
    line-height: 1.7;
}

/* Right column — bullets */
.esc-case-bullets {
    list-style: none;
    padding: 32px 28px;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.esc-case-bullet {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: var(--bp-text-secondary);
    line-height: 1.6;
}

.esc-case-bullet-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bp-accent);
    flex-shrink: 0;
    margin-top: 6px;
}

/* Mobile */
@media (max-width: 768px) {
    .esc-case-content-inner {
        grid-template-columns: 1fr;
    }
    .esc-case-left {
        border-right: none;
        border-bottom: 1px solid var(--bp-border);
        padding: 22px 20px;
    }
    .esc-case-bullets {
        padding: 20px;
        gap: 12px;
    }
    .esc-cases-chips {
        gap: 8px;
    }
    .esc-case-chip {
        padding: 8px 14px;
        font-size: 12px;
    }
}


/* ══════════════════════════════════════════════════════════════
   REVIEWS — Horizontal ticker
   ══════════════════════════════════════════════════════════════ */

/* ── Reviews — Dual-Row Trust Feed (PR-4b) ── */
.esc-reviews-section {
    padding: 56px 0 48px;
    overflow: hidden;
}

.esc-reviews-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 36px;
    text-align: center;
}

.esc-reviews-header-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.esc-reviews-header .esc-section-title {
    margin-bottom: 0;
}

.esc-reviews-subline {
    font-size: 13px;
    color: var(--bp-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.esc-reviews-count {
    color: var(--bp-green);
    font-weight: 600;
    font-size: 13px;
}

.esc-reviews-tg-link {
    font-size: 13px;
    color: var(--bp-accent);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--bp-transition-fast);
    margin-top: 2px;
}

.esc-reviews-tg-link:hover {
    color: var(--bp-accent-hover);
}

.esc-reviews-ticker {
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
    padding: 4px 0;
    /* mask-image: плавный fade без артефактов цвета — работает на любом фоне */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image:         linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.esc-reviews-ticker:last-of-type {
    margin-bottom: 0;
}

.esc-reviews-track {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: escTickerScroll 45s linear infinite;
    will-change: transform;
}

.esc-reviews-track--rev {
    animation-direction: reverse;
    animation-duration: 50s;
}

.esc-reviews-track:hover {
    animation-play-state: paused;
}

@keyframes escTickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.esc-review-card {
    flex-shrink: 0;
    width: 320px;
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color var(--bp-transition);
}

.esc-review-card:hover {
    border-color: var(--bp-border-hover);
}

.esc-review-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.esc-review-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.esc-review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.esc-review-meta {
    min-width: 0;
}

.esc-review-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--bp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.esc-review-date {
    font-size: 11px;
    color: var(--bp-text-muted);
    margin-top: 1px;
}

.esc-review-stars {
    display: flex;
    gap: 1px;
    flex-shrink: 0;
    padding-top: 3px;
    opacity: 0.85;
}

.esc-review-amount {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bp-green-dim);
    border: 1px solid rgba(52, 211, 153, 0.18);
    border-radius: var(--bp-radius-xs);
    padding: 4px 10px;
    width: fit-content;
}

.esc-review-amount-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bp-green);
    flex-shrink: 0;
}

.esc-review-amount-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--bp-green);
    font-family: var(--bp-mono);
}

.esc-review-amount-label {
    font-size: 11px;
    color: var(--bp-text-secondary);
}

.esc-review-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--bp-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.esc-review-link {
    font-size: 12px;
    color: var(--bp-accent);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--bp-transition-fast);
    margin-top: auto;
    white-space: nowrap;
}

.esc-review-link:hover {
    color: var(--bp-accent-hover);
}

@media (max-width: 768px) {
    .esc-reviews-header {
        gap: 6px;
        margin-bottom: 24px;
    }
    .esc-review-card {
        width: 270px;
        padding: 16px 18px;
    }
}


/* ══════════════════════════════════════════════════════════════
   TOP USERS — Leaderboard (PR-5)
   Fintech-style ranked list, no emoji, no gimmicks
   ══════════════════════════════════════════════════════════════ */

.esc-top-section {
    padding: 56px 0 48px;
}

.esc-top-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header — same language as numbers.php */
.esc-top-header {
    text-align: center;
    margin-bottom: 40px;
}

.esc-top-header-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--bp-text-muted);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 8px;
}

.esc-top-header h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--bp-text);
    margin-bottom: 8px;
}

.esc-top-header p {
    color: var(--bp-text-secondary);
    font-size: 14px;
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Leaderboard wrapper */
.esc-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Row */
.esc-lb-row {
    display: grid;
    grid-template-columns: 44px 44px 1fr auto auto;
    align-items: center;
    gap: 16px;
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-sm);
    padding: 14px 20px;
    text-decoration: none;
    transition: border-color var(--bp-transition);
    position: relative;
    overflow: hidden;
}

.esc-lb-row:hover {
    border-color: var(--bp-border-hover);
}

/* Top-3: accent left stripe */
.esc-lb-row[data-rank="1"] { border-left-color: rgba(255, 215, 0, 0.35); }
.esc-lb-row[data-rank="2"] { border-left-color: rgba(192, 192, 192, 0.25); }
.esc-lb-row[data-rank="3"] { border-left-color: rgba(205, 127, 50, 0.25); }

.esc-lb-row[data-rank="1"]::before,
.esc-lb-row[data-rank="2"]::before,
.esc-lb-row[data-rank="3"]::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
}

.esc-lb-row[data-rank="1"]::before { background: #FFD700; }
.esc-lb-row[data-rank="2"]::before { background: #C0C0C0; }
.esc-lb-row[data-rank="3"]::before { background: #CD7F32; }

/* Rank number */
.esc-lb-rank {
    font-size: 15px;
    font-weight: 700;
    color: var(--bp-text-muted);
    font-family: var(--bp-mono);
    text-align: center;
    line-height: 1;
    padding-left: 8px;
}

.esc-lb-row[data-rank="1"] .esc-lb-rank { color: #FFD700; }
.esc-lb-row[data-rank="2"] .esc-lb-rank { color: #C0C0C0; }
.esc-lb-row[data-rank="3"] .esc-lb-rank { color: #CD7F32; }

/* Avatar */
.esc-lb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.esc-lb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Identity column */
.esc-lb-identity {
    min-width: 0;
}

.esc-lb-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bp-text);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.esc-lb-verified {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--bp-accent);
}

.esc-lb-verified svg {
    width: 14px;
    height: 14px;
}

.esc-lb-handle {
    font-size: 12px;
    color: var(--bp-text-muted);
    font-family: var(--bp-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Volume bar column */
.esc-lb-bar-col {
    width: 120px;
    flex-shrink: 0;
}

.esc-lb-bar-track {
    height: 4px;
    background: var(--bp-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.esc-lb-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bp-accent), var(--bp-green));
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.esc-lb-bar-label {
    font-size: 10px;
    color: var(--bp-text-muted);
    text-align: right;
    font-family: var(--bp-mono);
    letter-spacing: 0.2px;
}

/* Stats column */
.esc-lb-stats {
    text-align: right;
    flex-shrink: 0;
}

.esc-lb-amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--bp-green);
    font-family: var(--bp-mono);
    line-height: 1;
    margin-bottom: 3px;
}

.esc-lb-deals {
    font-size: 11px;
    color: var(--bp-text-muted);
    font-family: var(--bp-mono);
}

/* Disclaimer */
.esc-disclaimer {
    text-align: center;
    margin-top: 24px;
}

.esc-disclaimer p {
    font-size: 11px;
    color: var(--bp-text-muted);
    line-height: 1.5;
    max-width: 600px;
    margin: 0 auto;
}

/* Mobile */
@media (max-width: 768px) {
    .esc-lb-row {
        grid-template-columns: 32px 36px 1fr auto;
        gap: 10px;
        padding: 12px 14px;
    }
    .esc-lb-bar-col { display: none; }
    .esc-lb-rank { font-size: 13px; padding-left: 4px; }
    .esc-lb-avatar { width: 36px; height: 36px; font-size: 14px; border-radius: 8px; }
    .esc-lb-amount { font-size: 13px; }
}


/* ══════════════════════════════════════════════════════════════
   FAQ — 1:1 pattern from numbers.php (PR-6)
   ══════════════════════════════════════════════════════════════ */

.esc-faq-section {
    padding: 48px 0 56px;
}

.esc-faq-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--bp-radius);
}

.esc-faq-header {
    margin-bottom: 24px;
}

.esc-faq-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--bp-text);
    margin: 0 0 8px 0;
}

.esc-faq-title::before {
    content: '❓';
    font-size: 20px;
}

.esc-faq-subtitle {
    color: var(--bp-text-secondary);
    font-size: 14px;
    margin: 0;
}

.esc-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.esc-faq-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--bp-radius-sm);
    overflow: hidden;
    transition: border-color var(--bp-transition), background var(--bp-transition);
    cursor: pointer;
}

.esc-faq-item:hover {
    border-color: rgba(74, 158, 255, 0.30);
    background: rgba(255,255,255,0.04);
}

.esc-faq-item.esc-active {
    border-color: rgba(74, 158, 255, 0.40);
    background: rgba(74, 158, 255, 0.05);
}

.esc-faq-question {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    user-select: none;
}

.esc-faq-q {
    font-size: 14px;
    font-weight: 500;
    color: #e0e0e0;
    line-height: 1.5;
}

.esc-faq-chevron {
    flex-shrink: 0;
    color: var(--bp-text-muted);
    transition: transform 0.3s ease, color 0.3s ease;
}

.esc-faq-chevron svg {
    width: 14px;
    height: 14px;
    display: block;
}

.esc-faq-item.esc-active .esc-faq-chevron {
    transform: rotate(180deg);
    color: var(--bp-accent);
}

.esc-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.esc-faq-item.esc-active .esc-faq-answer {
    max-height: 600px;
}

.esc-faq-answer-content {
    padding: 0 20px 20px;
    font-size: 13px;
    color: #a0a0a0;
    line-height: 1.7;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 16px;
    margin-top: 0;
}

.esc-faq-answer-content strong {
    color: var(--bp-accent);
    font-weight: 600;
}

/* Mobile */
@media (max-width: 768px) {
    .esc-faq-inner {
        padding: 16px;
        border-radius: var(--bp-radius-sm);
    }
    .esc-faq-title { font-size: 16px; }
    .esc-faq-question { padding: 14px 16px; }
    .esc-faq-answer-content { padding: 12px 16px 16px; font-size: 13px; }
}


/* ══════════════════════════════════════════════════════════════
   FIND PARTNER — Clean widget
   ══════════════════════════════════════════════════════════════ */

.esc-partner-section {
    padding: 48px 0;
}

.esc-partner-widget {
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    overflow: hidden;
    display: grid;
    grid-template-columns: 280px 1fr;
}

.esc-widget-promo {
    padding: 32px 24px;
    border-right: 1px solid var(--bp-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.esc-widget-promo-icon {
    width: 64px;
    height: 64px;
    background: var(--bp-accent-dim);
    border: 1px solid var(--bp-accent-border);
    border-radius: var(--bp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.esc-widget-promo-icon svg {
    width: 32px;
    height: 32px;
    color: var(--bp-accent);
}

.esc-widget-promo-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--bp-text);
    margin-bottom: 8px;
    line-height: 1.3;
}

.esc-widget-promo-text {
    font-size: 13px;
    color: var(--bp-text-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
    max-width: 240px;
}

.esc-widget-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
}

.esc-widget-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: var(--bp-radius-xs);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--bp-transition);
    font-family: var(--bp-sans);
}

.esc-widget-btn svg { width: 16px; height: 16px; }

.esc-widget-btn-primary {
    background: var(--bp-accent);
    color: #fff;
}

.esc-widget-btn-primary:hover {
    background: var(--bp-accent-hover);
}

.esc-widget-btn-tg {
    background: #0088cc;
    color: #fff;
}

.esc-widget-btn-tg:hover {
    background: #0077b5;
}

/* Listings side */
.esc-widget-listings {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
}

.esc-widget-listings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.esc-widget-listings-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--bp-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.esc-widget-view-all {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bp-accent);
    text-decoration: none;
    padding: 5px 12px;
    border-radius: var(--bp-radius-xs);
    background: var(--bp-accent-dim);
    transition: background var(--bp-transition);
}

.esc-widget-view-all:hover {
    background: rgba(74, 158, 255, 0.15);
}

.esc-widget-view-all svg { width: 14px; height: 14px; }

.esc-widget-listings-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bp-text-muted);
    font-size: 13px;
    padding: 36px 20px;
    text-align: center;
    border-radius: var(--bp-radius-xs);
    border: 1px dashed var(--bp-border);
}





/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .esc-metrics-grid       { grid-template-columns: 1fr; }
    .esc-kpi-value          { font-size: 40px; }
    .esc-pricing-split      { grid-template-columns: 1fr; }
    .esc-calc-box           { max-width: 100%; }
    .esc-row-bottom         { grid-template-columns: repeat(2, 1fr); }
    .esc-partner-widget     { grid-template-columns: 1fr; }
    .esc-widget-promo       { border-right: none; border-bottom: 1px solid var(--bp-border); }
    .esc-yearly-row         { flex-direction: column; align-items: stretch; gap: 12px; }
    .esc-yearly-chips       { justify-content: center; }
    .esc-yearly-label       { text-align: center; }
}

@media (max-width: 768px) {
    .esc-page               { padding: 0 16px 40px; }
    .esc-header             { padding: 32px 0 24px; }
    .esc-title              { font-size: 30px; gap: 12px; }
    .esc-title-icon         { width: 46px; height: 46px; }
    .esc-title-icon svg     { width: 26px; height: 26px; }
    .esc-subtitle           { font-size: 15px; }
    .esc-section-title      { font-size: 22px; margin-bottom: 24px; }

    /* Hero KPI — кнопка на полную ширину */
    .esc-kpi-card           { padding: 24px 18px; }
    .esc-kpi-value          { font-size: 34px; }
    .esc-kpi-cta            { width: 100%; justify-content: center; }
    .esc-secondary-stack    { flex-direction: column; gap: 8px; }
    .esc-secondary-value    { font-size: 22px; min-width: 70px; }

    /* Section paddings — убираем раздутость */
    .esc-flow-section       { padding: 32px 0; }
    .esc-cases-section      { padding: 36px 0 28px; }
    .esc-reviews-section    { padding: 36px 0 28px; }
    .esc-top-section        { padding: 36px 0 28px; }
    .esc-faq-section        { padding: 32px 0 40px; }

    /* ── Flow: вертикальный стек с таймлайном ──────────────────
       Линия остаётся вертикальной на всех экранах.
    ─────────────────────────────────────────────────────────── */
    .esc-flow-subtitle      { font-size: 14px; margin-bottom: 0; }

    .esc-flow-helper        { flex-direction: column; text-align: center; gap: 6px; padding: 12px 14px; }

    .esc-tier               { padding: 18px 16px; }
    .esc-tier-primary       { padding-top: 30px; }
    .esc-tier-rate          { font-size: 22px; }
    .esc-tier-header        { flex-direction: column; align-items: flex-start; }
    .esc-tier-custom        { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 16px; }
    .esc-tier-popup         { min-width: 240px; right: auto; left: 0; }
    .esc-calc-box           { padding: 20px 16px; }

    .esc-review-card        { width: min(270px, 85vw); padding: 16px 18px; }

    /* Leaderboard mobile */
    .esc-top-header h2      { font-size: 22px; }
    .esc-lb-stats           { min-width: 0; }
    .esc-lb-amount          { white-space: nowrap; }

    /* FAQ mobile */
    .esc-faq-inner          { padding: 16px; }
    .esc-faq-question       { padding: 14px 16px; }
    .esc-faq-answer-content { padding: 12px 16px 16px; font-size: 13px; }

    .esc-widget-buttons     { flex-direction: column; }
    .esc-widget-btn         { width: 100%; }

    .esc-yearly-chip        { min-width: 80px; padding: 6px 12px; }
}

@media (max-width: 480px) {
    .esc-title              { font-size: 26px; }
    .esc-kpi-value          { font-size: 28px; }
    .esc-kpi-dynamic        { font-size: 12px; }
    .esc-chips              { gap: 6px; }
    .esc-chip               { padding: 5px 10px; font-size: 11px; }
    .esc-container          { padding: 0 14px; }
    .esc-yearly-chip        { min-width: 70px; padding: 6px 8px; font-size: 11px; }
    .esc-lb-row             { grid-template-columns: 28px 32px 1fr auto; gap: 8px; padding: 10px 12px; }
    .esc-lb-avatar          { width: 32px; height: 32px; font-size: 13px; }
    .esc-lb-name            { font-size: 13px; }
    .esc-lb-handle          { font-size: 10px; }
}

/* Trust search entrance on Escrow only; the shared widget stays unchanged. */
@media (prefers-reduced-motion: no-preference) {
    .esc-page #trustSearch .esc-trust-reveal-ready {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        transition: opacity 0.65s ease-out, transform 0.65s cubic-bezier(0.2, 0.75, 0.25, 1);
    }

    .esc-page #trustSearch .esc-trust-reveal-ready.esc-trust-visible {
        opacity: 1;
        transform: none;
    }

    .esc-page #trustSearch .trs-section-title.esc-trust-visible { transition-delay: 0.06s; }
    .esc-page #trustSearch .trs-section-sub.esc-trust-visible { transition-delay: 0.12s; }
    .esc-page #trustSearch .trs-search-wrap.esc-trust-visible { transition-delay: 0.18s; }
}

/* ══════════════════════════════════════════════════════════════
   ESCROW LIVE REVIEWS · __ESCROW_REVIEWS_LIVE_V1__
   Visual source: homepage reviews ticker.
   ══════════════════════════════════════════════════════════════ */

/* Homepage primitives required by the shared component. */
.esc-page .idx-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;
}

.esc-page .idx-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 13px 28px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--bp-sans);
    border-radius: var(--bp-radius-sm);
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.esc-page .idx-cta-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.esc-page .idx-cta-btn--primary {
    background: var(--bp-accent);
    border-color: var(--bp-accent);
    color: #fff;
    box-shadow: 0 4px 18px rgba(74, 158, 255, 0.22);
}

.esc-page .idx-cta-btn--primary:hover {
    background: var(--bp-accent-hover);
    border-color: var(--bp-accent-hover);
    box-shadow: 0 4px 24px rgba(74, 158, 255, 0.32);
}

.esc-page .idx-cta-btn--ghost {
    background: transparent;
    border-color: var(--bp-border-hover);
    color: var(--bp-text-secondary);
}

.esc-page .idx-cta-btn--ghost:hover {
    border-color: rgba(74, 158, 255, 0.45);
    color: var(--bp-text);
}


/* Shared Reviews ticker CSS — copied from reviews-ticker.css. */
/* ═══════════════════════════════════════════════════════════
   reviews-ticker.css — __REVIEWS_TICKER_PR8__
   Homepage reviews ticker (namespace: idx-rv-*).
   Pure-CSS marquee, no JS. Tokens from index.css (--bp-*).
   ═══════════════════════════════════════════════════════════ */

.idx-reviews {
    padding: 100px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.idx-reviews-header {
    margin-bottom: 36px;
}

.idx-reviews-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--bp-text);
    margin: 0;
    line-height: 1.2;
}

.idx-reviews-sub {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--bp-text-secondary);
}

/* ── viewport ─────────────────────────────────────────────── */

.idx-rv-viewport {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.idx-rv-row {
    display: flex;
    width: -webkit-max-content;
    width: max-content;
    will-change: transform;
}

.idx-rv-row--a { animation: idxRvScrollA 64s linear infinite; }
.idx-rv-row--b { animation: idxRvScrollB 78s linear infinite; margin-top: 16px; }

.idx-rv-viewport:hover .idx-rv-row,
.idx-rv-viewport:focus-within .idx-rv-row {
    animation-play-state: paused;
}

@keyframes idxRvScrollA {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes idxRvScrollB {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* ── card ─────────────────────────────────────────────────── */

.idx-rv-card {
    flex: 0 0 320px;
    width: 320px;
    box-sizing: border-box;
    min-height: 152px;
    margin-right: 16px;
    padding: 20px;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.2s ease;
}

.idx-rv-card:hover {
    border-color: var(--bp-border-hover);
}

.idx-rv-text {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--bp-text);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.idx-rv-meta {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    font-size: 12px;
    color: var(--bp-text-secondary);
}

.idx-rv-author {
    font-weight: 600;
    color: var(--bp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.idx-rv-num {
    opacity: 0.55;
    white-space: nowrap;
}

.idx-rv-badge {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 11px;
    color: var(--bp-text-secondary);
    border: 1px solid var(--bp-border);
    border-radius: 999px;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.idx-rv-badge:hover {
    border-color: var(--bp-border-hover);
    color: var(--bp-text);
}

.idx-rv-badge svg {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
}

/* ── footer actions ───────────────────────────────────────── */

.idx-rv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 32px;
}

/* ── responsive ───────────────────────────────────────────── */

@media (max-width: 768px) {
    .idx-reviews { padding: 80px 0; }
    .idx-reviews-title { font-size: 24px; }
    .idx-rv-card { flex-basis: 268px; width: 268px; padding: 18px; min-height: 140px; }
    .idx-rv-text { font-size: 14px; -webkit-line-clamp: 5; }
    .idx-rv-row--a { animation-duration: 48s; }
    .idx-rv-row--b { animation-duration: 58s; }
}

/* ── reduced motion: static grid, no marquee ──────────────── */

@media (prefers-reduced-motion: reduce) {
    .idx-rv-viewport {
        -webkit-mask-image: none;
                mask-image: none;
    }
    .idx-rv-row {
        animation: none;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 0;
    }
    .idx-rv-card[aria-hidden="true"] { display: none; }
    .idx-rv-card { margin: 0 8px 16px; }
}

/* __REVIEWS_TICKER_PR8__ kicker — declarations mirrored from .idx-uc-kicker */
.idx-reviews-kicker {
    font-size: 12px;
    font-weight: 600;
    color: var(--bp-accent);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 0.6;
    margin: 0 0 12px;
}

/* __REVIEWS_TICKER_PR8__ centered header */
.idx-reviews-header {
    text-align: center;
}

.idx-reviews-sub {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* __REVIEWS_TICKER_PR8__ separator before final CTA */
.idx-reviews {
    padding-bottom: 72px;
}

.idx-reviews + .idx-cta {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

@media (max-width: 768px) {
    .idx-reviews { padding-bottom: 56px; }
}



/* Escrow-local section rhythm. */
.esc-page .idx-reviews {
    padding-top: 72px;
    padding-bottom: 56px;
}


/*
 * One-time scroll reveal.
 * Hidden state is enabled only when JS explicitly opts in.
 * No-JS / reduced-motion therefore always remains visible.
 */
@media (prefers-reduced-motion: no-preference) {
    .esc-reviews-live-reveal.esc-reviews-live-reveal-ready {
        opacity: 0;
        transform: translateY(18px);
        transition:
            opacity 0.55s ease,
            transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .esc-reviews-live-reveal.esc-reviews-live-reveal-ready.esc-reviews-live-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .esc-page .idx-reviews {
        padding-top: 56px;
        padding-bottom: 44px;
    }
}



/* ══════════════════════════════════════════════════════════════
   FIND A COUNTERPARTY · __ESCROW_PARTNER_GATE_V1__
   Same flat dark visual language as the rest of Escrow.
   ══════════════════════════════════════════════════════════════ */

.esc-partner-section {
    padding: 48px 0 56px;
}

.esc-partner-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

.esc-partner-shell {
    padding: 28px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--bp-radius);
}

.esc-partner-header {
    max-width: 680px;
    margin-bottom: 24px;
}

.esc-partner-label {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--bp-accent, #4a9eff);
}

.esc-partner-title {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.esc-partner-subtitle {
    margin: 10px 0 0;
    max-width: 660px;
    color: rgba(255,255,255,0.58);
    font-size: 14px;
    line-height: 1.65;
}

.esc-partner-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.esc-partner-card {
    min-width: 0;
    min-height: 250px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    background: rgba(255,255,255,0.018);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: calc(var(--bp-radius) - 2px);
    transition:
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.esc-partner-card:hover {
    color: inherit;
    text-decoration: none;
    background: rgba(255,255,255,0.028);
    border-color: rgba(255,255,255,0.14);
    transform: translateY(-2px);
}

.esc-partner-card--telegram:hover {
    border-color: rgba(74,158,255,0.30);
}

.esc-partner-card--disabled,
.esc-partner-card--disabled:hover {
    opacity: 0.58;
    cursor: default;
    transform: none;
    border-color: rgba(255,255,255,0.07);
}

.esc-partner-card-head {
    min-height: 54px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.esc-partner-icon {
    position: relative;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.035);
}

.esc-partner-icon--telegram {
    background: rgba(74,158,255,0.08);
    border-color: rgba(74,158,255,0.16);
}

.esc-partner-icon-word {
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.045em;
    color: rgba(255,255,255,0.92);
}

.esc-partner-icon--telegram svg {
    position: absolute;
    right: -2px;
    bottom: -1px;
    width: 18px;
    height: 18px;
    padding: 3px;
    box-sizing: border-box;
    color: #fff;
    fill: currentColor;
    border-radius: 50%;
    background: var(--bp-accent, #4a9eff);
    box-shadow: 0 0 0 3px #171717;
}

.esc-partner-icon--market {
    border-radius: 13px;
}

.esc-partner-icon--market svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: rgba(255,255,255,0.82);
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.esc-partner-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.esc-partner-badge,
.esc-partner-official {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.esc-partner-badge {
    color: rgba(255,255,255,0.62);
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.06);
}

.esc-partner-official {
    color: #8dc1ff;
    background: rgba(74,158,255,0.07);
    border: 1px solid rgba(74,158,255,0.14);
}

.esc-partner-card-body {
    margin-top: 22px;
}

.esc-partner-card-body h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -0.015em;
}

.esc-partner-card-body p {
    margin: 8px 0 0;
    min-height: 46px;
    color: rgba(255,255,255,0.57);
    font-size: 13px;
    line-height: 1.6;
}

.esc-partner-card-meta {
    margin-top: 14px;
    color: rgba(255,255,255,0.38);
    font-size: 11px;
    line-height: 1.4;
}

.esc-partner-card-link {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(255,255,255,0.82);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 650;
}

.esc-partner-card-link svg,
.esc-partner-safety-cta svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms ease;
}

.esc-partner-card:hover .esc-partner-card-link svg,
.esc-partner-safety-cta:hover svg {
    transform: translateX(3px);
}

.esc-partner-flow {
    margin-top: 16px;
    padding: 15px 16px;
    display: grid;
    grid-template-columns:
        minmax(0,1fr) auto
        minmax(0,1fr) auto
        minmax(0,1fr) auto
        minmax(0,1fr);
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.014);
    border: 1px solid rgba(255,255,255,0.055);
    border-radius: calc(var(--bp-radius) - 4px);
}

.esc-partner-flow-step {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.66);
    font-size: 10px;
    line-height: 1.35;
    font-weight: 600;
}

.esc-partner-flow-num {
    color: rgba(255,255,255,0.26);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 600;
}

.esc-partner-flow-arrow {
    color: rgba(255,255,255,0.20);
    font-size: 13px;
}

.esc-partner-safety {
    margin-top: 14px;
    padding: 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    background: rgba(74,158,255,0.035);
    border: 1px solid rgba(74,158,255,0.12);
    border-radius: calc(var(--bp-radius) - 4px);
}

.esc-partner-safety-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #8dc1ff;
    background: rgba(74,158,255,0.07);
    border: 1px solid rgba(74,158,255,0.12);
}

.esc-partner-safety-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.esc-partner-safety-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.esc-partner-safety-copy strong {
    color: rgba(255,255,255,0.90);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 650;
}

.esc-partner-safety-copy span {
    color: rgba(255,255,255,0.50);
    font-size: 11px;
    line-height: 1.5;
}

.esc-partner-safety-cta {
    min-height: 36px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    line-height: 1;
    font-weight: 650;
    border-radius: 8px;
    background: var(--bp-accent, #4a9eff);
    border: 1px solid rgba(255,255,255,0.05);
    transition: opacity 160ms ease, transform 160ms ease;
}

.esc-partner-safety-cta:hover {
    color: #fff;
    text-decoration: none;
    opacity: 0.92;
    transform: translateY(-1px);
}

/* Reveal is opt-in via JS so content stays visible when JS is unavailable. */
.esc-partner-section.esc-partner-reveal-ready {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 560ms ease, transform 560ms ease;
}

.esc-partner-section.esc-partner-reveal-ready.esc-partner-reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 760px) {
    .esc-partner-section {
        padding: 40px 0 48px;
    }

    .esc-partner-container {
        padding: 0 16px;
    }

    .esc-partner-shell {
        padding: 20px;
    }

    .esc-partner-grid {
        grid-template-columns: 1fr;
    }

    .esc-partner-card {
        min-height: 226px;
    }

    .esc-partner-card-body p {
        min-height: 0;
    }

    .esc-partner-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .esc-partner-flow-arrow {
        display: none;
    }

    .esc-partner-flow-step {
        min-height: 36px;
        padding: 8px 10px;
        background: rgba(255,255,255,0.018);
        border-radius: 7px;
    }

    .esc-partner-safety {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .esc-partner-safety-cta {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 430px) {
    .esc-partner-shell {
        padding: 18px 14px;
    }

    .esc-partner-card {
        padding: 17px;
    }

    .esc-partner-card-head {
        gap: 10px;
    }

    .esc-partner-flow {
        grid-template-columns: 1fr;
    }

    .esc-partner-safety {
        padding: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .esc-partner-card,
    .esc-partner-card-link svg,
    .esc-partner-safety-cta,
    .esc-partner-safety-cta svg,
    .esc-partner-section {
        transition: none !important;
        transform: none !important;
    }

    .esc-partner-section.esc-partner-reveal-ready {
        opacity: 1;
        transform: none;
    }
}


/* ══════════════════════════════════════════════════════════════
   ESCROW PARTNER — visual polish
   __ESCROW_PARTNER_POLISH_V2__
   ══════════════════════════════════════════════════════════════ */

/* Header now sits above the framed cards. */
.esc-partner-header {
    max-width: 720px;
    margin: 0 auto 30px;
    text-align: center;
}

.esc-partner-label {
    text-align: center;
}

.esc-partner-title {
    text-align: center;
}

.esc-partner-subtitle {
    max-width: 680px;
    margin: 10px auto 0;
    text-align: center;
}

/* Real BUMAGA OTC avatar. */
.esc-partner-icon--telegram.esc-partner-icon--photo {
    position: relative;
    overflow: visible;
    padding: 0;
    background: rgba(255,255,255,0.025);
    border-color: rgba(255,255,255,0.10);
}

.esc-partner-icon--photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

.esc-partner-icon--telegram .esc-partner-telegram-mark {
    position: absolute;
    right: -3px;
    bottom: -2px;
    width: 18px;
    height: 18px;
    padding: 3px;
    box-sizing: border-box;
    fill: #fff;
    border-radius: 50%;
    background: var(--bp-accent, #4a9eff);
    box-shadow: 0 0 0 3px #171717;
}

/* Cards + safety block only: process strip was intentionally removed. */
.esc-partner-safety {
    margin-top: 16px;
}

@media (max-width: 760px) {
    .esc-partner-header {
        margin-bottom: 24px;
        padding: 0 4px;
    }
}



/* ══════════════════════════════════════════════════════════════
   FINAL CTA — copied from escrow-rules
   __ESCROW_FINAL_CTA_V1__
   Source styles: assets/css/escrow-rules.css
   ══════════════════════════════════════════════════════════════ */

.esc-final-cta {
    max-width: 1000px;
    margin: 0 auto;
    padding: 36px 20px 52px;
}

.esc-final-cta .escr-section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--bp-text);
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}

.esc-final-cta .escr-section-subtitle {
    font-size: 0.92rem;
    color: var(--bp-text-secondary);
    line-height: 1.55;
    margin: 0 auto;
    max-width: 640px;
}

.esc-final-cta .escr-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
    flex-wrap: wrap;
}

.esc-final-cta .escr-hero-actions .esc-kpi-cta {
    align-self: auto;
}

.esc-final-cta .esc-kpi-cta.escr-cta-ghost {
    background: var(--bp-accent-dim);
    color: var(--bp-accent);
    border: 1px solid var(--bp-accent-border);
    padding: 11px 27px;
    transition: all var(--bp-transition);
}

.esc-final-cta .esc-kpi-cta.escr-cta-ghost:hover {
    background: var(--bp-accent);
    color: #fff;
    border-color: var(--bp-accent);
}

.esc-final-cta .escr-cta-card {
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    padding: 44px 32px;
    text-align: center;
}

.esc-final-cta .escr-cta-card .escr-hero-actions {
    margin-top: 24px;
}

/* Exact responsive overrides from escrow-rules.css */
@media (max-width: 640px) {
    .esc-final-cta .escr-hero-actions {
        gap: 8px;
    }

    .esc-final-cta .escr-hero-actions .esc-kpi-cta {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .esc-final-cta {
        padding: 20px 20px 36px;
    }

    .esc-final-cta .escr-cta-card {
        padding: 32px 20px;
    }
}


/* ══════════════════════════════════════════════════════════════
   ESCROW LABEL + REVEAL POLISH
   __ESCROW_LABEL_SCRAMBLE_POLISH_V1__
   ══════════════════════════════════════════════════════════════ */

/*
 * Unified blue labels.
 */
.esc-page .esc-code-label {
    margin-bottom: 10px;
    color: var(--bp-accent);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 1;
}

/*
 * Same scramble character treatment as homepage.
 */
.esc-page .hx-glitch {
    opacity: .45;
    font-weight: inherit;
}


@media (prefers-reduced-motion: no-preference) {

    /*
     * Reviews:
     * header -> moving reviews -> buttons.
     */
    .esc-reviews-live-reveal.esc-reviews-live-reveal-ready .idx-reviews-header,
    .esc-reviews-live-reveal.esc-reviews-live-reveal-ready .idx-rv-viewport,
    .esc-reviews-live-reveal.esc-reviews-live-reveal-ready .idx-rv-actions {
        opacity: 0;
        transform: translateY(12px);

        transition:
            opacity .62s cubic-bezier(.22,.61,.36,1),
            transform .62s cubic-bezier(.22,.61,.36,1);
    }

    .esc-reviews-live-reveal.esc-reviews-live-reveal-ready.esc-reviews-live-visible .idx-reviews-header,
    .esc-reviews-live-reveal.esc-reviews-live-reveal-ready.esc-reviews-live-visible .idx-rv-viewport,
    .esc-reviews-live-reveal.esc-reviews-live-reveal-ready.esc-reviews-live-visible .idx-rv-actions {
        opacity: 1;
        transform: none;
    }

    .esc-reviews-live-reveal.esc-reviews-live-reveal-ready .idx-reviews-header {
        transition-delay: 40ms;
    }

    .esc-reviews-live-reveal.esc-reviews-live-reveal-ready .idx-rv-viewport {
        transition-delay: 120ms;
    }

    .esc-reviews-live-reveal.esc-reviews-live-reveal-ready .idx-rv-actions {
        transition-delay: 200ms;
    }


    /*
     * Top Users:
     * header -> rows one-by-one -> disclaimer.
     */
    .esc-top-section.esc-top-reveal-ready .esc-top-reveal-item {
        opacity: 0;
        transform: translateY(14px);

        transition:
            opacity .64s cubic-bezier(.22,.61,.36,1)
                var(--esc-top-delay, 0ms),
            transform .64s cubic-bezier(.22,.61,.36,1)
                var(--esc-top-delay, 0ms);
    }

    .esc-top-section.esc-top-reveal-ready.esc-top-reveal-visible .esc-top-reveal-item {
        opacity: 1;
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .esc-page .hx-glitch {
        opacity: 1;
    }

    .esc-top-reveal-item,
    .esc-reviews-live-reveal .idx-reviews-header,
    .esc-reviews-live-reveal .idx-rv-viewport,
    .esc-reviews-live-reveal .idx-rv-actions {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   MARKETPLACE CATALOG VISUAL
   __ESCROW_MARKETPLACE_VISUAL_V1__
   ══════════════════════════════════════════════════════════════ */

/*
 * Marketplace gets its own visual identity instead of a
 * generic calendar/grid SVG. Same footprint as the OTC avatar.
 */
.esc-partner-icon--market.esc-partner-icon--catalog {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    padding: 6px;
    overflow: hidden;
    display: block;

    border-radius: 13px;
    border-color: rgba(74,158,255,0.18);
    background: rgba(74,158,255,0.045);
}


/* Tiny marketplace/browser window. */
.esc-market-preview {
    width: 100%;
    height: 100%;
    padding: 4px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    gap: 4px;

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px;
    background: rgba(10,14,19,0.42);
}


/* Browser/catalog header. */
.esc-market-preview-bar {
    height: 5px;
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 5px;
}

.esc-market-preview-bar span {
    width: 2px;
    height: 2px;
    display: block;
    border-radius: 50%;
    background: rgba(255,255,255,0.27);
}

.esc-market-preview-bar span:first-child {
    background: rgba(74,158,255,0.72);
}


/* Four small listing cards. */
.esc-market-preview-grid {
    min-height: 0;
    flex: 1;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
}

.esc-market-preview-card {
    position: relative;
    min-width: 0;
    min-height: 0;

    display: block;
    overflow: hidden;

    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.035);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease;
}


/* Thumbnail area. */
.esc-market-preview-card::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 45%;

    border-radius: 2px;
    background: rgba(255,255,255,0.09);
}


/* Tiny title/price line. */
.esc-market-preview-card::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 5px;
    bottom: 3px;
    height: 2px;

    border-radius: 999px;
    background: rgba(255,255,255,0.18);
}


/* One highlighted listing makes the catalogue feel active. */
.esc-market-preview-card:nth-child(2) {
    border-color: rgba(74,158,255,0.25);
    background: rgba(74,158,255,0.07);
}

.esc-market-preview-card:nth-child(2)::before {
    background: rgba(74,158,255,0.17);
}

.esc-market-preview-card:nth-child(2)::after {
    background: rgba(141,193,255,0.55);
}


/* BUMAGA badge alongside MARKETPLACE. */
.esc-partner-market-brand {
    white-space: nowrap;
}


/*
 * Very restrained interaction:
 * catalogue gets a tiny sense of activity without becoming
 * a decorative animation.
 */
.esc-partner-card--market:hover .esc-market-preview-card:nth-child(2) {
    transform: translateY(-1px);
    border-color: rgba(74,158,255,0.38);
    background: rgba(74,158,255,0.10);
}

.esc-partner-card--market:hover .esc-market-preview-card:nth-child(4) {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.13);
}


/* Marketplace card gets the same restrained blue affinity as OTC. */
.esc-partner-card--market:hover {
    border-color: rgba(74,158,255,0.24);
}


@media (prefers-reduced-motion: reduce) {
    .esc-market-preview-card {
        transition: none !important;
        transform: none !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   ESCROW SECTION RAIL
   __ESCROW_SECTION_RAIL_V1__
   Desktop scroll-spy + section progress navigation
   ══════════════════════════════════════════════════════════════ */

.esc-section-rail {
    position: fixed;
    top: 50%;
    right: clamp(
        18px,
        calc((100vw - 1200px) / 2 - 56px),
        76px
    );

    z-index: 40;

    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;

    padding: 12px 0;

    transform: translateY(-50%);
    opacity: 0;

    transition: opacity 220ms ease;

    pointer-events: auto;
}


/* Show only when there is real side space. */
@media (min-width: 1100px) {
    .esc-section-rail {
        display: flex;
    }

    .esc-section-rail.esc-section-rail--ready {
        opacity: 1;
    }
}


/*
 * Vertical guide.
 * Positioned through the visual centre of the tick marks.
 */
.esc-section-rail__track {
    position: absolute;
    top: 22px;
    right: 8px;
    bottom: 22px;

    width: 1px;

    overflow: hidden;

    background: rgba(255,255,255,0.08);

    pointer-events: none;
}


/* Continuous blue reading progress. */
.esc-section-rail__progress {
    position: absolute;
    inset: 0;

    display: block;

    background: rgba(74,158,255,0.48);

    transform: scaleY(0);
    transform-origin: 50% 0;

    transition: transform 90ms linear;
}


/*
 * Large invisible hit area,
 * tiny visual footprint.
 */
.esc-section-rail__item {
    position: relative;

    width: 42px;
    height: 22px;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    border: 0;
    outline: 0;

    background: transparent;
    color: inherit;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}


/* The actual small line. */
.esc-section-rail__tick {
    position: relative;
    z-index: 2;

    display: block;

    width: 9px;
    height: 2px;

    border-radius: 999px;

    background: rgba(255,255,255,0.28);

    transition:
        width 180ms ease,
        height 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}


/* Hover = slightly longer, still restrained. */
.esc-section-rail__item:hover
.esc-section-rail__tick,
.esc-section-rail__item:focus-visible
.esc-section-rail__tick {
    width: 17px;

    background: rgba(255,255,255,0.58);
}


/* Active section. */
.esc-section-rail__item.is-active
.esc-section-rail__tick {
    width: 25px;
    height: 3px;

    background: var(--bp-accent, #4a9eff);

    box-shadow:
        0 0 0 1px rgba(74,158,255,0.08);
}


/*
 * Tooltip appears to the LEFT of the rail,
 * toward the page rather than outside viewport.
 */
.esc-section-rail__label {
    position: absolute;
    top: 50%;
    right: 34px;

    max-width: 220px;
    padding: 6px 9px;

    white-space: nowrap;

    color: rgba(255,255,255,0.86);
    background: rgba(18,18,20,0.96);

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px;

    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.01em;

    opacity: 0;
    visibility: hidden;

    transform:
        translate(
            6px,
            -50%
        );

    transition:
        opacity 150ms ease,
        transform 150ms ease,
        visibility 150ms ease;

    pointer-events: none;

    box-shadow:
        0 6px 20px rgba(0,0,0,0.20);
}


.esc-section-rail__item:hover
.esc-section-rail__label,
.esc-section-rail__item:focus-visible
.esc-section-rail__label {
    opacity: 1;
    visibility: visible;

    transform:
        translate(
            0,
            -50%
        );
}


/* Accessible keyboard focus without an ugly default outline. */
.esc-section-rail__item:focus-visible::after {
    content: "";

    position: absolute;
    right: -5px;

    width: 35px;
    height: 18px;

    border: 1px solid rgba(74,158,255,0.38);
    border-radius: 5px;

    pointer-events: none;
}


/*
 * Keep rail out of tablet/mobile layouts entirely.
 */
@media (max-width: 1099px) {
    .esc-section-rail {
        display: none !important;
    }
}


@media (prefers-reduced-motion: reduce) {
    .esc-section-rail,
    .esc-section-rail__tick,
    .esc-section-rail__label,
    .esc-section-rail__progress {
        transition: none !important;
    }
}