/* =====================================================================
   Hub page — overrides scoped to body.page--hub
   Matches designs/assets/pages/hub.html
   ===================================================================== */

/* ---------- Hub hero (override shared .hero) ---------- */
.page--hub .hero {
    background: var(--c-purple-50);
    padding-block: 96px;
    overflow: hidden;
}

.page--hub .hero__inner {
    display: block;
}

.page--hub .hero__title {
    font-size: clamp(40px, 6vw, 60px);
    line-height: 1;
    letter-spacing: -1.8px;
}

.page--hub .hero__title .accent {
    display: inline;
    color: inherit;
}

.page--hub .hero__lede {
    max-width: 680px;
    line-height: 1.625;
}

@media (max-width: 767px) {
    .page--hub .hero {
        padding-block: 64px;
    }
}

/* ---------- Hub grid section padding ---------- */
.page--hub .hub.section {
    padding-block: 96px;
    background: #fff;
}

@media (max-width: 767px) {
    .page--hub .hub.section {
        padding-block: 64px;
    }
}

/* ---------- Flat dark CTA (override .final-cta panel) ---------- */
.page--hub .final-cta {
    padding-block: 0;
    background: var(--c-purple-deep);
    color: #fff;
}

.page--hub .final-cta__panel {
    background: var(--c-purple-deep);
    border-radius: 0;
    padding-block: 72px;
    text-align: center;
}

.page--hub .final-cta__inner {
    padding: 0 24px;
    max-width: 720px;
    margin-inline: auto;
}

.page--hub .final-cta__title {
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.1;
    letter-spacing: -1.08px;
    margin-top: 16px;
}

.page--hub .final-cta__copy {
    font-size: 18px;
    line-height: 1.555;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 24px;
}

.page--hub .final-cta__buttons {
    margin-top: 32px;
}