/* =========================================================
   Closing CTA Section — layout only (typography comes from base.css / .text-lg)
   ========================================================= */

.cta-section {
    background-color: var(--color-ink-50);
    padding-block: 40px;
}

.cta-section .cta-section-band {
    gap: 18px;
    padding: var(--space-3xl) 48px;
    border-radius: var(--radius-3xl);
    background-image: linear-gradient(143.01deg, var(--color-teal-600) 10.94%, var(--color-signal-500) 89.06%);
    text-align: center;
}

.cta-section .cta-section-band h2 {
    color: var(--color-white);
    max-width: 770px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.cta-section .cta-section-band .cta-section-subline {
    max-width: 520px;
}

.page-ai .cta-section .cta-section-band .cta-section-subline,
.page-database-source-control .cta-section .cta-section-band .cta-section-subline,
.page-database-devops-observability .cta-section .cta-section-band .cta-section-subline,
.page-for-developers .cta-section .cta-section-band .cta-section-subline,
.page-webinars .cta-section .cta-section-band .cta-section-subline,
.page-tech-demos .cta-section .cta-section-band .cta-section-subline,
.page-white-papers .cta-section .cta-section-band .cta-section-subline,
.page-videos .cta-section .cta-section-band .cta-section-subline,
.page-success-stories .cta-section .cta-section-band .cta-section-subline {
    max-width: 430px;
}

.cta-section .cta-section-band .cta-section-subline p {
    color: var(--color-white);
}

.cta-section .cta-section-band .cta-section-actions {
    gap: 12px;
    padding-top: 10px;
}

.cta-section .cta-section-band .cta-section-actions .button-ghost {
    color: var(--color-teal-950);
}

.cta-section .cta-section-band .cta-section-actions .button-ghost span img {
    filter: brightness(0) saturate(100%) invert(10%) sepia(82%) saturate(429%) hue-rotate(147deg) brightness(101%) contrast(102%);
}

.cta-section .cta-section-band .cta-section-actions .button-ghost:hover,
.cta-section .cta-section-band .cta-section-actions .button-ghost:focus-visible {
    color: var(--color-white);
}

.cta-section .cta-section-band .cta-section-actions .button-ghost:hover span img,
.cta-section .cta-section-band .cta-section-actions .button-ghost:focus-visible span img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}


/* ---------- Large Desktop / Laptop ---------- */
@media (max-width: 1199px) {

    .cta-section .cta-section-band {
        padding: var(--space-2xl) var(--space-xl);
    }

}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {

    .cta-section {
        padding-block: var(--space-lg);
    }

    .cta-section .cta-section-band {
        gap: var(--space-sm);
        padding: var(--space-xl) var(--space-md);
    }

}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {

    .cta-section .cta-section-band {
        padding: var(--space-lg) var(--space-sm);
        border-radius: var(--radius-2xl);
    }

    .cta-section .cta-section-band .cta-section-actions {
        justify-content: flex-start;
        width: 100%;
        gap: 16px;
    }

}