/* ==========================================================================
   Closed-beta section (replaces pricing on homepage when BILLING_MODE != 'public')
   ========================================================================== */

.closed-beta-section {
    padding: 80px 0 96px;
    /* Starts at #0a1929, the exact color proof-section (above) renders as
       throughout - so proof-section and this section now read as ONE
       continuous dark zone instead of two different darks stacked on top
       of each other. Runs "to bottom" like every other section on the
       page (was 135deg, the one diagonal gradient on the whole homepage).
       Ends dark rather than fading all the way to transformation-section's
       light start on purpose - this section's own text (title, subtitle,
       cards) is styled white-on-dark throughout, so it can't fade to a
       light background without breaking its own contrast. The swing to
       transformation-section's light start stays a single clean jump,
       same as the light/dark swings elsewhere on the page. */
    background: linear-gradient(to bottom, #0a1929 0%, #0a2540 45%, #0f3d5c 100%);
    position: relative;
    overflow: hidden;
}

.closed-beta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 60%, rgba(64, 143, 196, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 80% 30%, rgba(45, 122, 175, 0.09) 0%, transparent 70%);
    pointer-events: none;
}

/* Scan lines - matches the rest of the page's dark sections (hero, proof,
   cta, etc.) - this section was missing the texture entirely before. */
.closed-beta-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg, transparent, transparent 4px,
        rgba(255,255,255,0.025) 4px, rgba(255,255,255,0.025) 5px);
    pointer-events: none;
}

.closed-beta-inner {
    position: relative;
    z-index: 1;
}

/* Full-width pitch header - not squeezed into a narrow column anymore. */
.cb-header { text-align: left; margin-bottom: 3rem; }

/* Title and subtitle side by side instead of stacked, so the header uses
   the section's full width rather than leaving empty space beside a
   narrow max-width text column. */
.cb-header-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 24px;
}

/* Below the header: a BALANCED two-column row - video on the left, proof
   cards + CTA on the right. Both sides carry real content weight (unlike
   the earlier text-column/action-column split), so neither trails off
   into empty space. */
.cb-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    text-align: left;
}

.closed-beta-badge {
    display: inline-block;
    background: rgba(45, 122, 175, 0.3);
    color: #7dbee0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 5px 16px;
    border-radius: 20px;
    border: 1px solid rgba(45, 122, 175, 0.45);
    margin-bottom: 24px;
}

.closed-beta-title {
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.25;
}

.closed-beta-subtitle {
    font-size: 1.02rem;
    color: rgba(224, 240, 250, 0.82);
    margin: 0;
    line-height: 1.7;
}

.closed-beta-momentum {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(110, 231, 183, 0.3);
    border-radius: 20px;
    padding: 8px 18px;
    margin-bottom: 28px;
}

.closed-beta-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.closed-beta-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--billing-radius);
    padding: 22px;
    text-align: left;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.2s, border-color 0.2s;
}

.closed-beta-card:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.18);
}

.closed-beta-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.closed-beta-card__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: rgba(45, 122, 175, 0.25);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #7dbee0;
}

.closed-beta-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.closed-beta-card__text {
    font-size: 0.875rem;
    color: rgba(224, 240, 250, 0.72);
    line-height: 1.6;
    margin: 0;
}

/* CTA cluster - the button is the one thing on this page that should grab
   the eye, so it gets real size, a strong glow, and a slow breathing pulse
   (nothing else on the section animates continuously). */
.cb-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 20px;
}

.closed-beta-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 20px 44px;
    background: linear-gradient(135deg, #2d7aaf, #57b4e0);
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    border-radius: 50px;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 10px 34px rgba(45, 122, 175, 0.5), 0 0 0 4px rgba(87, 180, 224, 0.12);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    animation: cbCtaPulse 2.8s ease-in-out infinite;
}

.closed-beta-cta i { transition: transform 0.2s ease; }

.closed-beta-cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 44px rgba(45, 122, 175, 0.65), 0 0 0 6px rgba(87, 180, 224, 0.18);
    color: #fff;
    text-decoration: none;
    animation-play-state: paused;
}
.closed-beta-cta:hover i { transform: translateX(4px); }

@keyframes cbCtaPulse {
    0%, 100% { box-shadow: 0 10px 34px rgba(45, 122, 175, 0.5), 0 0 0 4px rgba(87, 180, 224, 0.12); }
    50%      { box-shadow: 0 10px 40px rgba(45, 122, 175, 0.7), 0 0 0 8px rgba(87, 180, 224, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
    .closed-beta-cta { animation: none; }
}

.closed-beta-response-time {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #6ee7b7;
    margin: 0;
}

/* ── Video eyebrow badge ── */
.cb-video-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 50px;
    padding: 6px 18px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.cb-video-eyebrow__duration {
    color: rgba(16, 185, 129, 0.65);
    font-weight: 600;
}

/* ── Video embed inside closed beta ── */
.closed-beta-section .video-container {
    max-width: 100%;
    margin: 0 0 16px;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 48px rgba(0, 0, 0, 0.5);
}

/* Subdued timestamps - caption style, not pill style */
.closed-beta-section .video-timestamps {
    justify-content: flex-start;
    margin-top: 0;
    margin-bottom: 36px;
    gap: 4px 2px;
    flex-wrap: wrap;
}

.closed-beta-section .video-timestamp-chip {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 5px 10px;
    font-size: 0.78rem;
    color: rgba(224, 240, 250, 0.45);
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.closed-beta-section .video-timestamp-chip:hover {
    background: transparent;
    border: none;
    color: rgba(224, 240, 250, 0.85);
}

.closed-beta-section .video-timestamp-chip .ts-time {
    color: rgba(125, 190, 224, 0.65);
    font-size: 0.75rem;
}

.closed-beta-section .video-yt-link {
    display: inline-flex;
    margin-top: 4px;
}

@media (max-width: 900px) {
    .cb-columns { grid-template-columns: 1fr; }
    .cb-header-row { grid-template-columns: 1fr; gap: 16px; }
    .closed-beta-title { margin-bottom: 4px; }
}

@media (max-width: 768px) {
    .closed-beta-section .video-container {
        border-radius: 8px;
        margin-bottom: 12px;
    }

    .closed-beta-section .video-timestamps {
        gap: 2px;
        margin-bottom: 36px;
    }

    .closed-beta-section .video-timestamp-chip {
        font-size: 0.72rem;
        padding: 5px 8px;
    }

    .cb-video-eyebrow {
        font-size: 0.72rem;
        padding: 5px 14px;
    }

    .closed-beta-cta {
        padding: 17px 32px;
        font-size: 1.05rem;
        width: 100%;
        justify-content: center;
    }
}