/* ----- Design Tokens ----- */
:root {
    --primary-orange: #ea580c;
    --primary-orange-hover: #c2410c;
    --orange-light-bg: #fff7ed;
    --sky-blue: #0284c7;
    --sky-blue-hover: #0369a1;
    --bg-sky-light: #f0f9ff;
    --card-border: #e2e8f0;
    --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --radius-lg: 16px;
    --radius-sm: 8px;
}

/* ----- Pricing Banner ----- */
.pricing-page .section-inner {
    max-width: 1120px;
}

.page-section.pricing-page {
    padding-top: 56px;
}

.pricing-banner {
    position: relative;
    min-height: 250px;
    margin-bottom: 34px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(27, 29, 30, 0.12);
    border-radius: 12px;
    background: transparent;
    box-shadow: 0 16px 36px rgba(27, 29, 30, 0.14);
}

.pricing-banner-background {
    position: absolute;
    inset: -18px;
    z-index: -2;
    background: url('../asset/promo banner/price_banner.jpg') center center / cover no-repeat;
    filter: blur(4px) drop-shadow(0 0 24px rgba(56, 189, 248, 0.72));
    transform: scale(1.04);
}

.pricing-banner-content {
    display: flex;
    min-height: 250px;
    padding: 0 70px 18px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

.pricing-banner .section-kicker {
    margin-bottom: 12px;
    color: #ffd9b8;
}

.pricing-banner h1 {
    display: block;
    width: min(670px, 100%);
    max-width: 670px;
    min-height: 76px;
    margin: 0;
    padding: 0 35px;
    align-content: center;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(23px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    border: 1px solid rgba(51, 218, 252, 0.34);
    border-radius: 18px;
    background: rgba(51, 218, 252, 0.28);
    box-shadow: 0 16px 28px rgba(51, 218, 252, 0.22);
    backdrop-filter: blur(5px);
}

.pricing-banner h2 {
    width: fit-content;
    max-width: 100%;
    margin: 12px 0 0;
    padding: 11px 24px;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 14px;
    background: rgba(244, 122, 34, 0.28);
    box-shadow: 0 12px 24px rgba(244, 122, 34, 0.2);
    backdrop-filter: blur(5px);
}

/* ----- Section Headings ----- */
.pricing-page .section-title {
    position: relative;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 30px;
    padding: 10px 18px;
    border-left: 5px solid #00bfff;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.1), rgba(244, 122, 34, 0.14));
    color: #f47a25;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.pricing-page .section-title::after {
    display: none;
}

/* ----- Featured Suite Layout ----- */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-bottom: 56px;
    width: min(1120px, 100%);
    margin-inline: auto;
}

.featured-card-wrapper {
    min-width: 0;
}

/* ----- Module Pricing Grid ----- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 28px;
    margin-bottom: 48px;
    width: min(1120px, 100%);
    margin-inline: auto;
}

/* ----- Pricing Card Base ----- */
.pricing-card {
    min-width: 0;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 32px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--card-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    min-height: 100%;
    margin-top: 14px;
}

.popular-card {
    border: 2px solid var(--primary-orange);
    background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%);
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px -4px rgba(0, 0, 0, 0.08);
}

/* ----- Featured and Popular Cards ----- */
.pricing-card.top-featured-orange {
    border: 2px solid var(--primary-orange);
    background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%);
    padding-top: 36px;
    padding-bottom: 36px;
    box-shadow: 0 8px 24px -4px rgba(234, 88, 12, 0.12);
}

/* ----- Badges and Pills ----- */
.badge-orange {
    position: absolute;
    top: -14px;
    left: 20px;
    background: var(--primary-orange);
    color: #ffffff;
    font-size: 11.52px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.2);
}

.badge-sky {
    position: absolute;
    top: -14px;
    left: 20px;
    background: var(--sky-blue);
    color: #ffffff;
    font-size: 11.52px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pill-orange {
    display: inline-block;
    background: #fff7ed;
    color: var(--primary-orange);
    font-size: 12.48px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    margin-bottom: 14px;
    border: 1px solid rgba(234, 88, 12, 0.2);
    line-height: 1.5;
}

/* ----- Card Headings ----- */
.card-heading-orange {
    font-size: 22.4px;
    font-weight: 800;
    color: var(--primary-orange);
    margin-bottom: 14px;
    line-height: 1.4;
}

.bottom-card-heading {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 22px;
    line-height: 1.4;
    margin-top: 4px;
}

/* ----- Price Displays ----- */
.price-amount {
    font-size: 36.8px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.price-amount del {
    font-size: 18.4px;
    color: #94a3b8;
    font-weight: 500;
    margin-right: 6px;
}

.price-type {
    font-size: 13.6px;
    color: var(--text-muted);
    margin-top: 6px;
    margin-bottom: 22px;
    font-weight: 500;
    line-height: 1.6;
}

.renewal-box-orange {
    background: #fff7ed;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-size: 14.08px;
    color: #c2410c;
    margin-bottom: 22px;
    border-left: 3px solid var(--primary-orange);
    line-height: 1.7;
}

/* ----- Pricing Tiers ----- */
.pricing-tier {
    position: relative;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 14px 14px 12px 14px;
    margin-bottom: 24px;
}

.pricing-tier.last-tier {
    margin-bottom: 24px;
}

/* ----- Saving Badge ----- */
.save-legend-badge {
    position: absolute;
    top: -11px;
    right: 12px;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
    font-size: 10.4px;
    font-weight: 800;
    padding: 1px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ----- Audience Labels ----- */
.tier-title-prof,
.tier-title-biz {
    font-size: 14.4px;
    font-weight: 700;
    color: var(--sky-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
    margin-bottom: 8px;
    line-height: 1.5;
}

/* ----- Price Rows ----- */
.price-line {
    font-size: 13.12px;
    color: #334155;
    margin-bottom: 6px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    white-space: nowrap;
}

.price-line:last-child {
    margin-bottom: 0;
}

.price-line-left {
    display: flex;
    align-items: center;
    gap: 2px;
}

.price-line del {
    color: #94a3b8;
    margin-right: 2px;
}

.price-line strong {
    color: var(--text-dark);
    font-weight: 700;
}

/* ----- Price Tags ----- */
.tag-license-fee {
    background: #dcfce7;
    color: #15803d;
    padding: 1px 6px;
    border: 1px solid #bbf7d0;
    border-radius: 4px;
    font-size: 11.52px;
    font-weight: 700;
    white-space: nowrap;
    margin: 0 4px;
}

.tag-amc {
    background: #ffedd5;
    color: #c2410c;
    padding: 1px 6px;
    border: 1px solid #fed7aa;
    border-radius: 4px;
    font-size: 11.52px;
    font-weight: 700;
    white-space: nowrap;
    margin: 0 4px;
}

/* ----- Feature Lists ----- */
.features-list {
    list-style: none;
    margin-bottom: 22px;
    background: #f8fafc;
    padding: 16px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid #f1f5f9;
}

.features-list li {
    position: relative;
    padding-left: 20px;
    font-size: 13.6px;
    color: #475569;
    margin-bottom: 12px;
    line-height: 1.7;
    display: flex;
    align-items: flex-start;
}

.features-list li:last-child {
    margin-bottom: 0;
}

.features-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 6px;
    height: 6px;
    background-color: var(--primary-orange);
    border-radius: 50%;
    flex-shrink: 0;
}

.card-description {
    font-size: 13.6px;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.7;
}

/* ----- Card Descriptions ----- */
.card-info-text {
    font-size: 13.76px;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.6;
}

/* ----- Call-to-Action Buttons ----- */
.cta-btn-orange {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--primary-orange);
    color: #ffffff;
    font-weight: 700;
    font-size: 14.08px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.2s ease, transform 0.1s ease, opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.15);
    line-height: 1.5;
}

.cta-btn-orange:hover {
    background: var(--primary-orange-hover);
    transform: translateY(-1px);
}

.cta-btn-sky {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--sky-blue);
    color: #ffffff;
    font-weight: 700;
    font-size: 14.08px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.2s ease, transform 0.1s ease, opacity 0.3s ease, visibility 0.3s ease;
    line-height: 1.5;
}

.cta-btn-sky:hover {
    background: var(--sky-blue-hover);
    transform: translateY(-1px);
}

/* ----- Card Interaction States ----- */
.pricing-card.hover-btn-card .cta-btn-sky {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
}

.pricing-card.hover-btn-card:hover .cta-btn-sky {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pricing-card:focus-within {
    outline: 3px solid rgba(2, 132, 199, 0.35);
    outline-offset: 3px;
}

.cta-btn-orange:focus-visible,
.cta-btn-sky:focus-visible {
    outline: 3px solid #0f172a;
    outline-offset: 3px;
}

/* ----- Terms and Conditions ----- */

.pricing-terms {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 48px 0 0;
    padding: 32px 40px 24px;
    border-top: 2px solid #08a9d1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 24px rgba(25, 55, 80, 0.08);
}

.terms-card {
    background: #ffffff;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--card-shadow);
    margin-top: 24px;
}

.terms-card h3 {
    font-size: 17.6px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text-dark);
    line-height: 1.5;
}

.terms-card ul {
    padding-left: 20px;
    color: var(--text-muted);
    font-size: 14.08px;
    line-height: 1.8;
}

.terms-card li {
    margin-bottom: 8px;
}


.pricing-terms h2 {
    margin: 0 0 16px;
    color: #087aa3;
    font-size: 24px;
}

.pricing-terms h2::after {
    content: "";
    display: block;
    width: 38px;
    height: 2px;
    margin-top: 12.8px;
    background: var(--primary-orange, #f97316);
}

.pricing-terms ul {
    margin: 0;
    padding-left: 24px;
}

.pricing-terms li {
    margin: 8.8px 0;
    color: #3f4145;
    line-height: 1.45;
}

.terms-note {
    margin: 22.4px 0 0;
    color: red !important;
    line-height: 1.5;
}

/* ----- Responsive Layout ----- */
@media (max-width: 600px) {
    .pricing-banner {
        min-height: 220px;
        margin-bottom: 28px;
    }

    .pricing-banner-content {
        min-height: 220px;
        padding: 0 24px 18px;
    }

    .pricing-banner h1 {
        max-width: 100%;
        min-height: 45px;
        font-size: 23px;
    }

    .pricing-banner p {
        margin-top: 12px;
        font-size: 17px;
    }

    .featured-grid {
        gap: 24px;
        grid-template-columns: 1fr;
    }

    .featured-card-wrapper {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card {
        padding: 28px 16px;
    }

    .price-line {
        white-space: normal;
        align-items: flex-start;
    }

    .price-line-left {
        flex-wrap: wrap;
    }

    .pricing-terms {
        padding: 24px 20px;
    }

    .pricing-terms h2 {
        font-size: 20.8px;
    }

    .pricing-page .section-title {
        font-size: 18.4px;
        padding: 14px 16px;
    }
}

/* ----- Touch Device Behavior ----- */
@media (hover: none) {
    .pricing-card.hover-btn-card .cta-btn-sky {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* ----- Reduced Motion ----- */
@media (prefers-reduced-motion: reduce) {
    .pricing-card,
    .cta-btn-orange,
    .cta-btn-sky {
        transition: none;
    }

    .pricing-card:hover,
    .cta-btn-orange:hover,
    .cta-btn-sky:hover {
        transform: none;
    }
}

/* ----- Narrow 3-Column Grid: keep price rows inside cards ----- */
@media (max-width: 1200px) and (min-width: 992px) {
    .price-line {
        white-space: normal;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .price-line-left {
        flex-wrap: wrap;
    }
}

/* ----- Tablet Grid ----- */
@media (max-width: 991px) and (min-width: 601px) {
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .price-line {
        white-space: normal;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .price-line-left {
        flex-wrap: wrap;
    }
}

/* ----- Featured Suites: stack below 768px ----- */
@media (max-width: 767px) {
    .featured-grid {
        grid-template-columns: 1fr;
    }
}

/* Clear pricing introduction with mobile-safe text widths. */
.pricing-page .pricing-banner { min-height:260px; border:1px solid #d8e6ec; border-radius:18px; background:#f6fafc; box-shadow:0 10px 28px #214d6410; }
.pricing-page .pricing-banner-background { inset:0; z-index:-2; filter:none; transform:none; background-position:right center; }
.pricing-page .pricing-banner::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#f7fbff 0%,#f7fbfff5 44%,#f7fbff9c 74%,#f7fbff22 100%); }
.pricing-page .pricing-banner-content { box-sizing:border-box; min-height:260px; padding:36px 40px; justify-content:center; gap:0; }
.pricing-banner-eyebrow { font-size:10px; line-height:1.5; font-weight:750; letter-spacing:.15em; color:#35758b; margin-bottom:14px; }
.pricing-page .pricing-banner h1 { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 10px; width:auto; max-width:100%; min-height:0; padding:0; border:0; border-radius:0; margin:0; color:#0b3b3b; background:none; box-shadow:none; backdrop-filter:none; font-size:clamp(26px,3vw,37px); line-height:1.22; letter-spacing:-.035em; }
.pricing-banner h1 > span:not(.pricing-brand-divider) { white-space:nowrap; }
.pricing-page .pricing-brand-divider { color:#dc772a; font-weight:500; }
.pricing-page .pricing-banner-summary { max-width:470px; margin:14px 0 0; color:#355968; font-size:16px; line-height:1.65; }
.pricing-banner-products { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.pricing-banner-products span { padding:6px 11px; border:1px solid #cadfe9; border-radius:8px; background:#ffffffe6; color:#245363; font-size:11px; line-height:1.5; font-weight:600; }
.pricing-suite-heading { box-sizing:border-box; width:min(1120px,100%); margin:0 auto 22px; padding:0 0 0 16px; border-left:3px solid #ef8737; }
.pricing-section-eyebrow { display:block; margin-bottom:7px; color:#9b561f; font-size:10px; line-height:1.5; font-weight:750; letter-spacing:.1em; }
.pricing-page .pricing-suite-heading h2 { margin:0; color:#0b3b3b; font-size:clamp(23px,2.4vw,30px); font-weight:800; line-height:1.25; letter-spacing:-.025em; }
.pricing-suite-heading p { margin:9px 0 0; max-width:680px; font-size:14px; line-height:1.65; color:#4e6977; }
@media(max-width:767px) {
 .page-section.pricing-page { padding-top:30px; }
 .pricing-page .pricing-banner-content { padding:28px 24px; }
 .pricing-page .pricing-banner::before { background:linear-gradient(100deg,#f7fbfffa,#f7fbffe6); }
 .pricing-page .pricing-banner h1 { max-width:500px; font-size:30px; }
 .pricing-suite-heading { padding-left:13px; margin-bottom:20px; }
 .pricing-page .badge-orange,.pricing-page .badge-sky { max-width:calc(100% - 32px); box-sizing:border-box; white-space:normal; line-height:1.4; left:16px; }
}
@media(max-width:480px) {
 .pricing-page .pricing-banner { min-height:0; margin-bottom:26px; border-radius:14px; }
 .pricing-page .pricing-banner-content { min-height:0; padding:26px 20px; }
 .pricing-page .pricing-banner h1 { display:grid; grid-template-columns:auto 1fr; gap:5px 8px; font-size:clamp(24px,7.2vw,31px); }
 .pricing-banner h1 > span:first-child { grid-column:1/-1; }
 .pricing-page .pricing-brand-divider { font-size:.8em; }
 .pricing-page .pricing-banner-summary { font-size:14px; line-height:1.65; margin-top:14px; }
 .pricing-banner-products { gap:6px; margin-top:17px; }
 .pricing-banner-products span { padding:5px 8px; }
 .pricing-suite-heading p { font-size:13px; }
 .pricing-page .pricing-suite-heading h2 { font-size:23px; }
}

/* Match the surrounding product-frame width; keep pricing cards untouched. */
.page-section.pricing-page { padding-top:18px; }
.pricing-page > .section-inner { width:100%; max-width:none; margin-inline:auto; }
.pricing-page .pricing-banner { min-height:230px; margin-bottom:26px; }
.pricing-page .pricing-banner-content { min-height:230px; padding:28px 34px; }
.pricing-page .pricing-banner h1 { font-size:clamp(27px,3.1vw,40px); font-weight:800; letter-spacing:-.035em; line-height:1.2; }
.pricing-page .pricing-banner h1 > span:first-child { color:#cc6017; }
.pricing-page .pricing-banner h1 > span:last-child { color:#087da5; }
.pricing-page .pricing-brand-divider { color:#647d88; font-weight:500; }
.pricing-page .pricing-banner-eyebrow { color:#426c7e; margin-bottom:11px; letter-spacing:.13em; }
.pricing-page .pricing-banner-summary { color:#365566; font-weight:500; max-width:540px; margin-top:12px; }
.pricing-page .pricing-banner-products { margin-top:17px; }
.pricing-page .pricing-suite-heading h2 { color:#163d4b; letter-spacing:-.03em; }
.pricing-page .pricing-suite-heading h2 span { color:#087da5; }
.pricing-page .section-title { color:#14637c; font-weight:750; letter-spacing:-.02em; }
@media(max-width:767px) {
 .page-section.pricing-page { padding-top:14px; }
 .pricing-page .pricing-banner-content { min-height:210px; padding:25px 22px; }
 .pricing-page .pricing-banner { min-height:210px; margin-bottom:22px; }
 .pricing-page .pricing-banner h1 { font-size:30px; }
}
@media(max-width:480px) {
 .pricing-page .pricing-banner,.pricing-page .pricing-banner-content { min-height:0; }
 .pricing-page .pricing-banner-content { padding:24px 18px; }
 .pricing-page .pricing-banner h1 { font-size:clamp(23px,7vw,30px); line-height:1.25; }
 .pricing-page .pricing-banner-summary { font-size:14px; }
}

/* Light licence illustration and touch-friendly section shortcuts. */
.pricing-page .pricing-banner-background { background: url('../asset/promo banner/price_banner.jpg') right center / cover no-repeat; }
.pricing-page .pricing-banner::before { background:linear-gradient(90deg,#f7fbff 0%,#f7fbfff2 42%,#f7fbff8c 70%,#f7fbff18 100%); }
.pricing-page .pricing-banner { margin-bottom:14px; }
.pricing-quick-nav { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 28px; padding:10px 14px; border:1px solid #dbe8ed; border-radius:12px; background:#ffffffd9; }
.pricing-quick-nav > span { color:#577180; font-size:12px; font-weight:600; margin-right:auto; }
.pricing-quick-nav a { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:44px; padding:0 15px; border:1px solid #d5e8ef; border-radius:9px; background:#f3fbff; color:#12617d; text-decoration:none; font-size:12px; font-weight:700; transition:background .18s,border-color .18s; }
.pricing-quick-nav a:hover { background:#e3f5fc; border-color:#85c6dc; }
.pricing-quick-nav a:focus-visible { outline:2px solid #087da5; outline-offset:3px; }
.pricing-quick-nav a span { color:#059ed2; }
#suite-heading,#pricing-individual,#pricing-combos { scroll-margin-top:110px; }
@media(max-width:767px) {
 .pricing-quick-nav > span { flex-basis:100%; }
 .pricing-quick-nav a { flex:1; gap:8px; padding:0 10px; }
}
@media(max-width:540px) {
 .pricing-page .pricing-banner-content { padding-right:18px; }
 .pricing-page .pricing-banner h1,.pricing-page .pricing-banner-eyebrow { position:relative; z-index:1; }
 .pricing-quick-nav { gap:7px; padding:10px; }
 .pricing-quick-nav a { flex:1 1 100%; min-height:44px; }
}

/* Keep the photo visible while protecting narrow-screen heading contrast. */
@media(max-width:767px) {
 .pricing-page .pricing-banner::before { background:linear-gradient(90deg,#f7fbfff5,#f7fbffce 60%,#f7fbff78); }
}

/* Full-width pricing frames; the existing card grids keep their dimensions. */
.pricing-plans-panel {
  position:relative;
  isolation:isolate;
  width:100%;
  margin:0 0 24px;
  padding:28px 0;
}
.pricing-plans-panel::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border:1px solid #dce8ee;
  border-radius:18px;
  background:linear-gradient(120deg,#fffdf9ed,#f3faffed);
  box-shadow:0 6px 20px #214d6408;
}
.pricing-plans-panel--modules::before {
  background:linear-gradient(120deg,#f7fbffed,#fffaf5ed);
}
.pricing-plans-panel > .featured-grid,
.pricing-plans-panel > .pricing-grid { margin-bottom:0; }
.pricing-page .pricing-plans-panel > .section-title {
  display:block;
  width:min(1120px,100%);
  box-sizing:border-box;
  margin:0 auto 30px;
}
@media(max-width:767px) {
  .pricing-plans-panel { padding:24px 0; margin-bottom:20px; }
  .pricing-plans-panel::before { border-radius:14px; }
}

/* Small, meaningful illustrations around the pricing content. */
.pricing-decoration { display:block; pointer-events:none; flex-shrink:0; }
.pricing-decoration--guide { width:95px; height:55px; margin-right:auto; }
.pricing-quick-nav > span { margin-right:0; }
.pricing-suite-heading,.pricing-modules-heading { position:relative; }
.pricing-suite-heading { min-height:98px; padding-right:170px; }
.pricing-decoration--suite,.pricing-decoration--modules { position:absolute; right:10px; top:0; width:140px; height:105px; }
.pricing-modules-heading { box-sizing:border-box; width:min(1120px,100%); min-height:105px; margin:0 auto 24px; padding:0 170px 0 16px; border-left:3px solid #35acd0; }
.pricing-page .pricing-modules-heading h2 { margin:0; color:#163d4b; font:800 clamp(23px,2.4vw,30px)/1.25 'Plus Jakarta Sans',sans-serif; letter-spacing:-.03em; }
.pricing-modules-heading h2 span { color:#087da5; }
.pricing-modules-heading p { margin:9px 0 0; color:#4e6977; font-size:14px; line-height:1.65; }
.pricing-modules-heading .pricing-section-eyebrow { color:#426c7e; }
.pricing-terms { position:relative; padding-right:200px; }
.pricing-decoration--terms { position:absolute; top:28px; right:30px; width:135px; height:110px; }
.pricing-page .pricing-terms h2 { color:#163d4b; font-weight:800; letter-spacing:-.025em; }
@media(max-width:767px) {
 .pricing-quick-nav > span { flex-basis:auto; }
 .pricing-decoration--guide { width:75px; height:45px; }
 .pricing-quick-nav a:first-of-type { clear:both; }
 .pricing-suite-heading,.pricing-modules-heading { padding-right:105px; min-height:90px; }
 .pricing-decoration--suite,.pricing-decoration--modules { width:90px; height:75px; right:4px; }
 .pricing-terms { padding-right:130px; }
 .pricing-decoration--terms { width:90px; height:80px; right:15px; }
}
@media(max-width:540px) {
 .pricing-suite-heading,.pricing-modules-heading { padding-right:68px; }
 .pricing-decoration--suite,.pricing-decoration--modules { width:65px; height:56px; top:1px; right:0; }
 .pricing-modules-heading p { font-size:13px; }
 .pricing-page .pricing-modules-heading h2 { font-size:23px; }
 .pricing-terms { padding-right:20px; }
 .pricing-page .pricing-terms h2 { padding-right:65px; min-height:48px; }
 .pricing-decoration--terms { width:64px; height:56px; right:16px; top:18px; }
}