.hero-pricing {
    --pricing-hero-background: #f5f8fc;
    --pricing-hero-blur-left: #d7d1ff;
    --pricing-hero-blur-right: #91eeee;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 400px;
    /* The component measures any header overlap to retain a 70px menu-to-title gap. */
    padding: var(--pricing-hero-top-spacing, 70px) 0 50px;
    color: #292d36;
    background: var(--pricing-hero-background);
}

.hero-pricing__blur {
    position: absolute;
    z-index: -1;
    display: block;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    opacity: 0.7;
    filter: blur(95px);
    pointer-events: none;
}

.hero-pricing__blur--left {
    top: 38%;
    left: -300px;
    background: var(--pricing-hero-blur-left);
}

.hero-pricing__blur--right {
    top: -190px;
    right: -210px;
    background: var(--pricing-hero-blur-right);
}

.hero-pricing__heading {
    margin: 0;
    color: #292d36;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: normal;
}

.hero-pricing__content {
    max-width: 1040px;
    margin: 30px auto 0;
    color: #2b2e36;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
}

.hero-pricing__content > :last-child {
    margin-bottom: 0;
}

/* Large pricing card. */
.hero-pricing__card {
    margin-top: 62px;
    padding: 42px 64px;
    border-radius: 24px;
    color: #292d36;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 35px rgba(43, 45, 54, 0.05);
}

.hero-pricing__card-title {
    margin: 0;
    color: #292d36;
    font-size: clamp(30px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.hero-pricing .hero-pricing__price {
    margin: 18px 0 0;
    color: #008b89;
    font-size: clamp(72px, 8vw, 100px);
    /* Keep the price bold even when theme paragraph styles override font weight. */
    font-weight: 700 !important;
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.hero-pricing__billing-period {
    margin: 16px 0 0;
    color: #292d36;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.hero-pricing__card-description {
    max-width: 590px;
    margin-top: 32px;
    color: #292d36;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.35;
}

.hero-pricing__card-description > :last-child {
    margin-bottom: 0;
}

.hero-pricing__features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    margin-top: 28px;
}

.hero-pricing__feature {
    display: inline-flex;
    gap: 16px;
    align-items: center;
    min-height: 66px;
    padding: 13px 24px;
    border-radius: 999px;
    color: #292d36;
    background: #c9ffff;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
}

.hero-pricing__feature-icon {
    display: block;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.hero-pricing__card-media {
    display: flex;
    align-self: stretch;
    align-items: stretch;
}

.hero-pricing__card-image {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 340px;
    height: 100%;
    border-radius: 18px;
    object-fit: cover;
    object-position: center;
}

/* Header styling used only when Pricing Hero is selected. */
.site-header--pricing-hero {
    color: #292d36;
}

.site-header--pricing-hero > .container {
    padding-top: 29px !important;
    padding-bottom: 16px !important;
}

.site-header--pricing-hero .site-brand {
    color: #292d36;
}

/* Preserve menu colours without altering keyboard focus indicators. */
.site-header--pricing-hero :is(.menu-item > a, .nav-link, .dropdown-item),
.site-header--pricing-hero :is(.menu-item > a, .nav-link, .dropdown-item):is(:visited, :hover, :focus, :focus-visible, :active, .active, .show) {
    color: #000 !important;
}

/* Support a rendered Pricing Hero when the header modifier is absent. */
body:has(.hero-pricing) .site-header :is(.menu-item > a, .nav-link, .dropdown-item),
body:has(.hero-pricing) .site-header :is(.menu-item > a, .nav-link, .dropdown-item):is(:visited, :hover, :focus, :focus-visible, :active, .active, .show) {
    color: #000 !important;
}

.site-header--pricing-hero .custom-logo,
.site-header--pricing-hero .pricing-hero-header-logo {
    display: block;
    width: auto;
    max-width: 190px;
    max-height: 68px;
    object-fit: contain;
    filter: none;
}

.site-header--pricing-hero .navbar-toggler {
    filter: none;
}

@media (max-width: 991.98px) {
    .hero-pricing {
        min-height: 0;
    }

    .site-header--pricing-hero > .container {
        padding-top: 19px !important;
    }

    .site-header--pricing-hero .navbar-collapse {
        color: #292d36;
        background: rgba(255, 255, 255, 0.96);
    }

    .hero-pricing__card {
        padding: 42px;
    }

    .hero-pricing__card-media {
        display: block;
    }

    .hero-pricing__card-image {
        min-height: 0;
        height: auto;
        object-fit: contain;
    }
}

@media (max-width: 575.98px) {
    .hero-pricing {
        padding-bottom: 55px;
    }

    .site-header--pricing-hero > .container {
        padding-top: 12.5px !important;
    }

    .site-header--pricing-hero .custom-logo,
    .site-header--pricing-hero .pricing-hero-header-logo {
        max-width: 145px;
        max-height: 54px;
    }

    .hero-pricing__content {
        margin-top: 22px;
    }

    .hero-pricing__card {
        margin-top: 42px;
        padding: 32px 24px;
        border-radius: 20px;
    }

    .hero-pricing__card-description {
        margin-top: 24px;
        font-size: 19px;
    }

    .hero-pricing__feature {
        width: 100%;
        padding: 13px 18px;
        font-size: 18px;
    }

    .hero-pricing__blur {
        width: 420px;
        height: 420px;
        filter: blur(75px);
    }
}

/* Leave space around the artwork so the panel glow remains visible. */
@media (min-width: 992px) {
    .hero-pricing__card-media {
        position: relative;
        overflow: visible;
        padding: 0;
        border-radius: 18px;
    }
    .hero-pricing__card-image {
        transform: scale(1);
    }
}

/* Reusable teal/lavender glow for any CMS pricing-card image. */
.hero-pricing__card-media {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border-radius: 18px;
}
.hero-pricing__card-media::before {
    content: "";
    position: absolute;
    inset: -36px;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 64% 34%, rgba(64, 210, 211, .72) 0%, rgba(105, 221, 222, .4) 28%, transparent 64%),
        radial-gradient(ellipse at 38% 72%, rgba(180, 164, 233, .66) 0%, rgba(216, 210, 247, .38) 26%, transparent 60%);
    filter: blur(28px);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 74%);
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 74%);
}
.hero-pricing__card-image {
    position: relative;
    z-index: 1;
}