/* =========================================================
   Pricing Hero Section — layout only (typography comes from base.css)
   ========================================================= */

.pricing-hero-section {
    background-color: var(--color-white);
}

.pricing-hero-section .pricing-hero-section-wrapper {
    gap: 18px;
    padding-block: var(--section-padding);
    text-align: center;
}

.pricing-hero-section .pricing-hero-section-wrapper .breadcrumb {
    width: 100%;
    text-align: left;
}

/* Figma's box is 594px, but our glyph advance is a hair narrower and lets
   "you" creep onto line 1 — 560px reproduces the design's break after
   "environments" while the longest line ("you manage, nothing more") is 536px */
.pricing-hero-section .pricing-hero-section-wrapper h1 {
    max-width: 655px;
}

.pricing-hero-section .pricing-hero-section-wrapper .subheading {
    margin: 30px 0 2px 0;
}

.page-careers .pricing-hero-section .pricing-hero-section-wrapper .pricing-hero-section-text {
    max-width: 783px;
}

.page-partners .pricing-hero-section .pricing-hero-section-wrapper .pricing-hero-section-text {
    max-width: 600px;
}

.page-ibm-partnership .pricing-hero-section .pricing-hero-section-wrapper .pricing-hero-section-text {
    max-width: 1020px;
}

.pricing-hero-section .pricing-hero-section-wrapper .pricing-hero-section-text {
    max-width: 963px;
}

.pricing-hero-section .pricing-hero-section-wrapper .pricing-hero-section-text p {
    color: var(--color-slate-700);
}

.pricing-hero-section .pricing-hero-section-wrapper .pricing-hero-section-actions {
    gap: 12px;
    padding-top: 8px;
}

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

    .pricing-hero-section .pricing-hero-section-wrapper {
        padding-top: 64px;
        padding-bottom: 48px;
    }

    .pricing-hero-section .pricing-hero-section-wrapper .subheading {
        margin: 20px 0 2px 0;
    }

}

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

    .pricing-hero-section .pricing-hero-section-wrapper {
        padding-top: 52px;
        padding-bottom: 44px;
    }

    .pricing-hero-section .pricing-hero-section-wrapper .subheading {
        margin: 10px 0 2px 0;
    }

}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .pricing-hero-section .pricing-hero-section-wrapper {
        text-align: left;
        gap: var(--space-sm);
        padding-top: 44px;
        padding-bottom: 40px;
        align-items: flex-start;
    }

    .pricing-hero-section .pricing-hero-section-wrapper h1 {
        max-width: 100%;
        margin-right: auto;
    }

    .pricing-hero-section .pricing-hero-section-wrapper .subheading {
        margin: 20px 0 2px 0;
    }

    .pricing-hero-section .pricing-hero-section-wrapper .pricing-hero-section-actions {
        width: 100%;
    }

}

/* ---------- Small Mobile ---------- */