/**
 * Unified responsive layer (imported last).
 * Breakpoints: 1100 · 1024 · 768 · 480 · 360
 */

/* ── Global tokens & overflow guard ───────────────────────────── */

html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: clip;
}

:root {
    --section-pad-y: 3.5rem;
    --section-pad-x: 1rem;
    --wrap-gutter: 2rem;
}

@media (max-width: 768px) {
    :root {
        --section-pad-y: 2.5rem;
        --section-pad-x: 0.85rem;
        --wrap-gutter: 1.25rem;
        --wrap: min(1140px, calc(100% - var(--wrap-gutter)));
    }
}

@media (max-width: 480px) {
    :root {
        --section-pad-y: 2rem;
        --section-pad-x: 0.75rem;
        --wrap-gutter: 1rem;
    }
}

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

.block-head {
    margin-bottom: clamp(1.15rem, 3vw, 1.75rem);
}

.block-head .lead,
.center-head .lead {
    font-size: clamp(0.92rem, 2.8vw, 1.05rem);
    line-height: 1.55;
}

.block-head h2 {
    font-size: clamp(1.45rem, 4.5vw, 2.2rem);
}

/* ── Desktop-only UI ──────────────────────────────────────────── */

@media (min-width: 769px) {
    .sticky-cta {
        display: none !important;
    }
}

/* ── Large tablet (≤1100) ─────────────────────────────────────── */

@media (max-width: 1100px) {
    .channel-grid {
        grid-template-columns: 1fr;
        max-width: min(26rem, 100%);
        margin-inline: auto;
        gap: 1.5rem;
    }

    .channel-card__details {
        min-height: clamp(17rem, 38vh, 22rem);
        max-height: clamp(18rem, 42vh, 24rem);
    }
}

/* ── Tablet (≤1024) — grid stack (must override sections.css base rules) ── */

@media (max-width: 1024px) {
    .showcase-row {
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .showcase-copy h3 {
        font-size: clamp(1.1rem, 3vw, 1.35rem);
    }

    .card-grid-3,
    .card-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steps-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steps-row-wide {
        grid-template-columns: 1fr;
    }

    .news-grid:not(.news-grid-list) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-grid,
    .product-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pay-columns,
    .pay-columns.pay-columns-visual {
        grid-template-columns: 1fr;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-panel,
    .bid-form-contact {
        padding: 1rem;
    }

    .pay-columns-visual {
        --pay-visual-height: 240px;
    }

    .tariffs-table th,
    .tariffs-table td {
        padding: 0.7rem 0.75rem;
        font-size: 0.86rem;
    }
}

/* ── Mobile (≤768) ────────────────────────────────────────────── */

@media (max-width: 768px) {
    .card-grid-3,
    .card-grid-4,
    .steps-row,
    .steps-row.steps-row-wide,
    .news-grid,
    .hero-stats,
    .product-grid,
    .product-grid-4,
    .pay-columns,
    .pay-columns.pay-columns-visual,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .card-grid > *,
    .steps-row > li,
    .news-grid > *,
    .product-grid > *,
    .pay-columns > *,
    .contact-layout > * {
        min-width: 0;
    }

    .integration-logos {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
        scroll-snap-type: none;
        padding-bottom: 0;
    }

    .integration-logo {
        flex-shrink: 1;
        scroll-snap-align: unset;
    }

    .code-panel-body {
        font-size: 0.78rem;
    }

    .lead {
        font-size: clamp(0.92rem, 3.6vw, 1.02rem);
    }

    .hero-actions {
        gap: 0.55rem;
        margin: 1.15rem 0;
    }

    .hero-actions .btn {
        flex: 1 1 auto;
        min-width: min(100%, 10.5rem);
        min-height: 44px;
    }

    .hero-intro-lines {
        margin-top: 1rem;
        gap: 0.45rem;
    }

    .intro-line {
        padding: 0.55rem 0.7rem;
        font-size: 0.84rem;
    }

    .channel-grid {
        max-width: 100%;
        gap: 1.25rem;
    }

    .channel-card__body {
        padding: 0.9rem 0.95rem 1rem;
    }

    .channel-card__title {
        font-size: 1rem;
        min-height: 0;
        -webkit-line-clamp: 3;
    }

    .channel-card__purpose {
        min-height: 0;
        font-size: 0.8rem;
    }

    .channel-card__details {
        min-height: clamp(15rem, 36vh, 20rem);
        max-height: min(46vh, 22rem);
        padding: 0.55rem 0.6rem;
    }

    .channel-card__section-title,
    .channel-card__geo-head {
        font-size: 0.76rem;
    }

    .channel-card__flow-badge {
        font-size: 0.58rem;
    }

    .pay-columns-visual {
        --pay-visual-height: 220px;
    }

    .pay-columns-visual .pay-column {
        text-align: center;
    }

    .pay-columns-visual .pay-column h3 {
        font-size: 1rem;
        text-align: center;
    }

    .pay-card-regions {
        gap: 0.22rem;
        padding-inline: 0.15rem;
    }

    .pay-card-region-dot {
        font-size: 0.54rem;
        padding: 0.2rem 0.38rem;
        min-height: 28px;
    }

    .payments-glass-grid {
        gap: 0.75rem;
    }

    .product-grid {
        gap: 0.85rem;
    }

    .product-card {
        padding: 1rem;
    }

    .info-card,
    .stat-card,
    .news-card {
        padding: 1rem;
    }

    .card-grid {
        gap: 0.85rem;
    }

    .contact-layout {
        gap: 0.85rem;
    }

    .contact-form-wrap {
        width: 100%;
        min-width: 0;
    }

    .contact-panel-title {
        font-size: 1.05rem;
    }

    .bid-form-title {
        font-size: 1rem;
    }

    .bid-form-contact input,
    .bid-form-contact textarea {
        font-size: 16px; /* prevents iOS zoom on focus */
    }

    .bid-form-submit {
        min-height: 44px;
    }

    .footer-tagline {
        font-size: 0.82rem;
    }

    .footer-disclaimer {
        font-size: 0.72rem;
    }

    .footer-contact-cell__label {
        font-size: 0.72rem;
    }

    .site-nav {
        background: color-mix(in srgb, var(--header-bg) 97%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        max-height: calc(100dvh - 4.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    .nav-list a,
    .nav-drop-btn {
        min-height: 44px;
    }

    .header-inner {
        gap: 0.4rem 0.5rem;
        min-height: 64px;
    }

    .header-brand {
        min-width: 0;
    }

    .header-end {
        flex-shrink: 0;
    }

    .modal {
        padding: 0.75rem;
        align-items: flex-end;
    }

    .modal-panel {
        width: 100%;
        max-height: min(92dvh, 640px);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .fab-open {
        right: max(0.75rem, env(safe-area-inset-right));
        bottom: calc(4.75rem + env(safe-area-inset-bottom));
        min-height: 44px;
    }

    .sticky-cta {
        padding-inline: max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-right));
    }

    .nspk-section-lead {
        font-size: 0.92rem;
    }

    .steps-row > li h3,
    .steps-row > li h4 {
        font-size: 1rem;
        line-height: 1.3;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .info-card h3,
    .info-card h4,
    .news-card h3 {
        font-size: 1rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    body:has(.sticky-cta:not([hidden])) {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom));
    }

    .help-card {
        padding: 1rem;
    }
}

/* ── Small phone (≤480) ───────────────────────────────────────── */

@media (max-width: 480px) {
    .hero-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .hero-stats {
        gap: 0.55rem;
    }

    .stat-card {
        padding: 0.85rem;
    }

    .channel-card__row,
    .channel-card__spec {
        gap: 0.35rem;
    }

    .channel-card__row dt,
    .channel-card__row dd,
    .channel-card__spec dt,
    .channel-card__spec dd {
        font-size: 0.7rem;
    }

    .channel-card__flow-list {
        font-size: 0.68rem;
    }

    .pay-columns-visual .pay-plastic-card__number {
        font-size: clamp(0.92rem, 4.2vw, 1.15rem);
        gap: 0.55ch;
    }

    .pay-columns-visual .pay-plastic-card__digit-group {
        letter-spacing: 0.04em;
    }

    .footer-grid__cell {
        padding: 1.25rem 1rem;
    }

    .footer-legal-nav {
        gap: 0.25rem 0.35rem;
    }

    .footer-legal-nav a,
    .footer-legal-sep {
        font-size: 0.72rem;
    }

    .tariffs-wrap {
        margin-inline: calc(-1 * var(--section-pad-x));
        padding-inline: var(--section-pad-x);
    }

    .integration-logos {
        margin-inline: calc(-0.5 * var(--section-pad-x));
        padding-inline: var(--section-pad-x);
    }

    .crypto-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .showcase-visual.showcase-linkflow .linkflow-phone {
        width: min(100%, 280px);
        margin-inline: auto;
    }
}

/* ── Very small (≤380) ────────────────────────────────────────── */

@media (max-width: 380px) {
    .channel-card__row,
    .channel-card__spec {
        flex-direction: column;
        align-items: flex-start;
    }

    .channel-card__row dd,
    .channel-card__spec dd {
        text-align: left;
    }

    .pay-card-region-dot.is-active::after {
        content: '';
    }

    .brand-logo-text {
        font-size: 1rem;
        letter-spacing: 0.08em;
    }
}

/* ── Landscape phone ────────────────────────────────────────────── */

@media (max-height: 520px) and (orientation: landscape) and (max-width: 900px) {
    .channel-card__details {
        min-height: 12rem;
        max-height: 14rem;
    }

    .site-nav {
        max-height: calc(100dvh - 3.75rem);
    }
}

/* ── Coarse pointer / touch ───────────────────────────────────── */

@media (hover: none) and (pointer: coarse) {
    .block-channels .channel-card:hover {
        transform: none;
    }

    .product-card:hover,
    .info-card:hover,
    .help-card:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }
}