/* ── Balance API — Page-Specific Styles ────────── */

/* ── Hero ───────────────────────────────────────── */
.api-hero {
    padding: 160px 80px 100px 80px;
    max-width: 1300px;
    margin: 0 auto;
}

.product-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray);
    border: 1px solid rgba(0,0,0,0.15);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 24px;
}

.hero-headline {
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 24px;
}

.hero-sub {
    max-width: 560px;
    margin-bottom: 32px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── The Flow (condensed grid) ────────────────────── */
.flow-summary-section {
    background-color: var(--warm-grey);
    padding: 64px 72px;
    max-width: 1300px;
    margin: 0 auto 32px auto;
    border-radius: 24px;
}

.flow-summary-header { margin-bottom: 56px; }

.flow-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 32px;
}

.flow-summary-item {
    padding-top: 24px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.flow-summary-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--light-gray);
    margin-bottom: 12px;
}

.flow-summary-name {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    display: block;
}

.flow-summary-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
}

.flow-summary-link {
    display: inline-block;
    margin-top: 40px;
    font-size: 15px;
    font-weight: 500;
    color: var(--black);
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.flow-summary-link:hover { opacity: 0.6; }

/* ── Verified Delta Section ─────────────────────── */
.delta-section {
    max-width: 1300px;
    margin: 0 auto;
    padding: 100px 80px;
}

.delta-inner {
    max-width: 800px;
    margin: 0 auto;
}

.delta-headline {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-bottom: 20px;
}

.delta-body {
    font-size: 17px;
    line-height: 1.7;
    color: var(--gray);
    margin-bottom: 32px;
}

.delta-body strong { color: var(--black); font-weight: 600; }

.delta-properties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.delta-property h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.delta-property p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray);
}

.delta-cta {
    text-align: center;
    margin-top: 40px;
}

.delta-cta .btn-outline {
    font-size: 14px;
    padding: 10px 24px;
}

/* ── Verification Paths Section ─────────────────── */
.paths-section {
    background-color: var(--warm-grey);
    padding: 64px 72px;
    max-width: 1300px;
    margin: 0 auto 32px auto;
    border-radius: 24px;
}

.paths-header { margin-bottom: 16px; }

.paths-intro {
    font-size: 17px;
    line-height: 1.6;
    color: var(--gray);
    margin-bottom: 48px;
    max-width: 700px;
}

.paths-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.path-card {
    background: var(--white);
    border-radius: 16px;
    padding: 32px 28px;
    border: 1px solid rgba(0,0,0,0.06);
    transition: border-color 0.2s ease;
}

.path-card:hover { border-color: rgba(0,0,0,0.15); }
.path-card.best { border-color: var(--black); }

.path-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.path-badge.common { color: var(--gray); background: rgba(0,0,0,0.06); }
.path-badge.escalation { color: #8b5e3c; background: #fef3e2; }
.path-badge.ideal { color: var(--black); background: rgba(0,0,0,0.08); }

.path-card h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.path-quote {
    font-size: 15px;
    font-style: italic;
    color: var(--light-gray);
    margin-bottom: 12px;
}

.path-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
}

/* ── Settlement Flow Diagram ────────────────────── */
.flow-section {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 80px 80px 80px;
}
.flow-scene {
    position: relative;
    width: 100%;
    max-width: 920px;
    height: 270px;
    margin: 0 auto;
}

/* Isometric stations */
.iso-station {
    position: absolute;
    top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.iso-station.left   { left: 0; }
.iso-station.center { left: 50%; transform: translateX(-50%); top: 34px; }
.iso-station.right  { right: 0; }

/* Cube container — outer */
.iso-block {
    position: relative;
    width: 140px;
    height: 132px;
}
/* Cube container — center (taller, wider) */
.iso-station.center .iso-block {
    width: 160px;
    height: 158px;
}

/* Top face — isometric diamond via clip-path */
.iso-top {
    position: absolute;
    width: 140px;
    height: 81px;
    top: 0;
    left: 0;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    filter: drop-shadow(0 0 0.5px rgba(0,0,0,0.18));
    z-index: 2;
}
.iso-station.center .iso-top {
    width: 160px;
    height: 92px;
}
.iso-station.left .iso-top,
.iso-station.right .iso-top {
    background: var(--warm-grey);
}
.iso-station.center .iso-top {
    background: #dce8f3;
}

/* Left face — skewed parallelogram */
.iso-side {
    position: absolute;
    top: 41px;
    left: 0;
    width: 70px;
    height: 50px;
    transform: skewY(30deg);
    transform-origin: top left;
    border-left: 1px solid rgba(0,0,0,0.12);
    border-bottom: 1px solid rgba(0,0,0,0.12);
    z-index: 1;
}
.iso-station.center .iso-side {
    top: 46px;
    width: 80px;
    height: 64px;
}
.iso-station.left .iso-side,
.iso-station.right .iso-side {
    background: #e2e2df;
}
.iso-station.center .iso-side {
    background: #bdd1e4;
}

/* Right face — skewed parallelogram */
.iso-front {
    position: absolute;
    top: 41px;
    right: 0;
    width: 70px;
    height: 50px;
    transform: skewY(-30deg);
    transform-origin: top right;
    border-right: 1px solid rgba(0,0,0,0.12);
    border-bottom: 1px solid rgba(0,0,0,0.12);
    z-index: 1;
}
.iso-station.center .iso-front {
    top: 46px;
    width: 80px;
    height: 64px;
}
.iso-station.left .iso-front,
.iso-station.right .iso-front {
    background: #ebebea;
}
.iso-station.center .iso-front {
    background: #c8d9ea;
}

/* Icon — centered on the diamond face */
.iso-icon {
    position: absolute;
    left: 50%;
    top: 40px;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}
.iso-station.center .iso-icon {
    top: 46px;
    width: 44px;
    height: 44px;
}
.iso-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--black);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.iso-station.center .iso-icon svg {
    width: 26px;
    height: 26px;
}

/* Station labels */
.iso-label {
    margin-top: 16px;
    text-align: center;
}
.iso-label-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--black);
    margin-bottom: 4px;
}
.iso-label-action {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--light-gray);
}

/* Connection paths */
.flow-path {
    position: absolute;
    top: 80px;
    height: 2px;
    z-index: 0;
}
.flow-path-line {
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,0.12);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.flow-path.left-to-center {
    left: 140px;
    width: calc(50% - 220px);
}
.flow-path.center-to-right {
    left: calc(50% + 80px);
    width: calc(50% - 220px);
}

/* Animated packets */
.flow-packet {
    position: absolute;
    width: 8px;
    height: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
}
.flow-packet::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background: var(--black);
}
.flow-path.left-to-center .flow-packet {
    animation: travelRight 4s linear infinite;
}
.flow-path.center-to-right .flow-packet {
    animation: travelRight 4s linear infinite;
}
.flow-path.center-to-right .flow-packet::before {
    background: #6ee7b7;
}
.flow-packet.p2 { animation-delay: -1.6s; }
.flow-packet.p3 { animation-delay: -3.2s; }

@keyframes travelRight {
    0%   { left: -8px; opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { left: calc(100% + 8px); opacity: 0; }
}

/* Fingerprint pulse at center station */
.pulse-ring {
    position: absolute;
    top: 46px;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
}
.pulse-ring::before,
.pulse-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid #6ee7b7;
    border-radius: 50%;
    opacity: 0;
    animation: pulseOut 4s ease-out infinite;
}
.pulse-ring::after {
    animation-delay: 2s;
}
@keyframes pulseOut {
    0%   { transform: scale(0.6); opacity: 0; }
    10%  { opacity: 0.5; }
    50%  { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(1.8); opacity: 0; }
}

@keyframes travelDown {
    0%   { top: -8px; opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: calc(100% + 8px); opacity: 0; }
}

/* Reduced motion: stop animations */
@media (prefers-reduced-motion: reduce) {
    .flow-packet, .pulse-ring::before, .pulse-ring::after {
        animation: none;
        opacity: 0.5;
    }
    .flow-packet { left: 50%; }
}

/* ── Bridge Callout (Verifiable Invoices) ──────── */
.bridge-section {
    max-width: 1300px;
    margin: 0 auto;
    padding: 80px 80px;
    text-align: center;
}
.bridge-inner {
    max-width: 680px;
    margin: 0 auto;
}
.bridge-arrow {
    display: block;
    margin: 0 auto 24px auto;
    width: 24px;
    height: 24px;
    color: var(--light-gray);
}
.bridge-headline {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-bottom: 16px;
}
.bridge-body {
    font-size: 17px;
    line-height: 1.7;
    color: var(--gray);
    max-width: 600px;
    margin: 0 auto;
}

/* ── MOBILE OVERRIDES (page-specific) ──────────── */
@media (max-width: 1024px) {
    /* Hero Mobile */
    .api-hero {
        padding: 120px 24px 48px 24px;
    }
    .hero-headline { font-size: 36px; }
    .hero-sub { font-size: 16px; }
    .hero-buttons { flex-direction: column; }
    .hero-buttons .btn { width: 100%; max-width: 280px; justify-content: center; }

    /* Flow Summary Mobile */
    .flow-summary-section { padding: 40px 24px; margin: 0 12px 12px 12px; }
    .flow-summary-header { margin-bottom: 40px; }
    .flow-summary-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .flow-summary-name { font-size: 18px; }
    .flow-summary-desc { font-size: 14px; }
    .flow-summary-link { margin-top: 32px; }

    /* Delta Mobile */
    .delta-section { padding: 64px 24px; }
    .delta-properties { grid-template-columns: 1fr; }

    /* Paths Mobile */
    .paths-section { padding: 40px 24px; margin: 0 12px 12px 12px; }
    .paths-grid { grid-template-columns: 1fr; gap: 16px; }
    .path-card { padding: 24px 20px; }
    .path-card h3 { font-size: 18px; }

    /* Flow Diagram Mobile */
    .flow-section { padding: 32px 24px 48px 24px; }
    .flow-scene {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .iso-station {
        position: relative;
        top: auto; left: auto; right: auto;
        transform: none;
    }
    .iso-station.center { transform: none; top: auto; left: auto; }
    .iso-block { width: 120px; height: 112px; }
    .iso-station.center .iso-block { width: 120px; height: 112px; }
    .iso-top { width: 120px; height: 69px; }
    .iso-station.center .iso-top { width: 120px; height: 69px; }
    .iso-side { top: 35px; width: 60px; height: 42px; }
    .iso-station.center .iso-side { top: 35px; width: 60px; height: 42px; }
    .iso-front { top: 35px; width: 60px; height: 42px; }
    .iso-station.center .iso-front { top: 35px; width: 60px; height: 42px; }
    .iso-icon { top: 34px; }
    .iso-station.center .iso-icon { top: 34px; width: 40px; height: 40px; }
    .iso-station.center .iso-icon svg { width: 22px; height: 22px; }
    .pulse-ring { top: 34px; }
    .flow-path {
        position: relative;
        top: auto;
        width: 2px;
        height: 40px;
        margin: 0 auto;
    }
    .flow-path-line {
        width: 1px;
        height: 100%;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }
    .flow-path.left-to-center,
    .flow-path.center-to-right {
        left: auto;
        width: 2px;
    }
    .flow-path .flow-packet {
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
    }
    .flow-path.left-to-center .flow-packet,
    .flow-path.center-to-right .flow-packet {
        animation: travelDown 3s linear infinite;
    }
    .flow-path .flow-packet.p2,
    .flow-path .flow-packet.p3 { display: none; }

    /* Bridge Mobile */
    .bridge-section { padding: 48px 24px; }
    .bridge-headline { font-size: 26px; }
    .bridge-body { font-size: 16px; }
}

@media (max-width: 600px) {
    .flow-summary-grid { grid-template-columns: 1fr; gap: 20px; }
    .flow-summary-section { padding: 48px 20px; }
    .paths-grid { grid-template-columns: 1fr; }
}