/* ============================================================
   Product Details Page — Scoped Styles
   Figma File : Z5yWzWeJcaZBlwQ4yJSPZG
   Nodes      : 946:41430  1249:53832  1255:67730
                1250:67074  1263:72603  1255:67650
                Pricing: 1378:70437  Packages: 1378:70460
   ============================================================ */

/* ── Page shell ── */
.pd-page {
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans', sans-serif;
    color: #0D1B2E;
}

.pd-header-wrap {
    width: 100%;
}

/* ── Centred inner wrapper ── */
.pd-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 80px;
    box-sizing: border-box;
}

/* ── Loading / not-found ── */
.pd-loading {
    display: flex;
    justify-content: center;
    padding: 80px 0;
}

.pd-not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    gap: 12px;
}

.pd-not-found h2 {
    font-size: 24px;
    font-weight: 700;
    color: #0D1B2E;
    margin: 0;
}

.pd-not-found p {
    font-size: 15px;
    color: #6B7A8D;
    margin: 0;
}

.pd-back-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #2B63E8 0%, #1740CC 100%);
    color: #FFFFFF;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
}

/* ── Breadcrumb ── */
.pd-breadcrumb-wrap {
    /* background: var(--gradient-p-600-p-400135, linear-gradient(135deg, var(--Color-Primary-600, #0A50DC) 0%, var(--Color-Primary-400, #4D91FA) 100%)); */
    border-bottom: none;
    padding: 10px 0;
}

.pd-breadcrumb-wrap .pd-inner {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pd-breadcrumb-link {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    color: #3C4C67;
    text-decoration: none;
}

.pd-breadcrumb-link:hover {
    color: #3C4C67;
    text-decoration: underline;
}

.pd-breadcrumb-sep {
    font-size: 14px;
    color: #3C4C67;
    /* The slash is colored #84F4FB in Figma */
}

.pd-breadcrumb-current {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    color: #283243;
}

/* ── Hero section ── */
.pd-hero-wrap {
    /* background: linear-gradient(180deg, #F4F8FE 0%, #DFECFA 100%); */
    /* background: var(--Surface-Neutral-Negative, #FFF); */
    background: linear-gradient(180deg, var(--Color-Primary-Lightest, #F5FAFF) 0%, var(--Color-Primary-50, #D8E7FE) 100%);
    padding: 0 0 40px;
    position: relative;
    overflow: hidden;
}

.pd-hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px;
    padding-top: 16px;
    padding-bottom: 24px;
}

.pd-hero-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pd-hero-pills {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.pd-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.pd-pill--outline {
    border: 1px solid #2B63E8;
    color: #2B63E8;
    background: transparent;
}

.pd-pill--solid {
    background: #2B63E8;
    color: #FFFFFF;
    border: 1px solid #2B63E8;
}

.pd-hero-identity {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.pd-logo {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pd-logo img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.pd-identity-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pd-name {
    font-size: 32px;
    font-weight: 800;
    color: #0A1C4D;
    margin: 0;
}

.pd-vendor {
    font-size: 14px;
    color: #4A5568;
    margin: 0;
}

.pd-hero-tagline {
    font-size: 20px;
    font-weight: 800;
    color: #0A1C4D;
    line-height: 1.4;
    margin: 0;
}

.pd-hero-description {
    font-size: 14px;
    color: #4A5568;
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
}

.pd-hero-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pd-hero-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: #0A1C4D;
    font-weight: 500;
    line-height: 1.5;
    max-width: 600px;
}

.pd-hero-checklist svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.pd-hero-actions {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-top: 12px;
}

.pd-btn-primary {
    background: #3B75F2;
    color: #FFFFFF;
    border: none;
    padding: 12px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.pd-btn-primary:hover {
    background: #2859c5;
}

.pd-btn-outline-blue {
    background: transparent;
    color: #3B75F2;
    border: 1px solid #3B75F2;
    padding: 12px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.pd-btn-outline-blue:hover {
    background: #EEF4FF;
}

.pd-btn-outline {
    background: transparent;
    color: #4A5568;
    border: 1px solid #A0ABBF;
    padding: 12px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.2s ease;
}


.pd-btn-outline:hover {
    border-color: #3B75F2;
    color: #3B75F2;
    background: #FFFFFF;
}

.pd-hero-image {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.pd-hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.pd-hero-stats {
    display: flex;
    flex-direction: row;
    gap: 24px;
    margin-top: 40px;
}

.pd-stat-card {
    flex: 1;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.pd-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #3B75F2;
    margin-bottom: 8px;
}

.pd-stat-label {
    font-size: 13px;
    font-weight: 600;
    color: #4A5568;
    line-height: 1.4;
}

/* ── Hero section — responsive ── */

/* Large desktop */
@media (min-width: 1440px) {
    .pd-hero {
        flex-direction: row;
        align-items: center;
        gap: 48px;
    }

    .pd-hero-content {
        flex: 1;
        min-width: 0;
    }

    .pd-hero-image {
        flex: 1;
        min-width: 0;
        justify-content: flex-end;
    }
}

/* Mid desktop / laptop (1024–1439) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .pd-hero {
        flex-direction: row;
        align-items: center;
        gap: 32px;
    }

    .pd-hero-content {
        flex: 1;
        min-width: 0;
    }

    .pd-hero-image {
        flex: 1;
        min-width: 0;
        justify-content: flex-end;
    }

    .pd-hero-image img {
        width: 100%;
        max-width: 100%;
    }

    .pd-name {
        font-size: 28px;
    }

    .pd-hero-tagline {
        font-size: 18px;
    }

    .pd-hero-actions {
        flex-wrap: wrap;
    }

    .pd-hero-stats {
        gap: 16px;
    }
}

/* Small tablet / narrow laptop (769–1023) */
@media (min-width: 769px) and (max-width: 1023px) {
    .pd-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .pd-hero-content {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .pd-hero-image {
        flex: none;
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .pd-hero-image img {
        width: 100%;
        max-width: 100%;
    }

    .pd-hero-description,
    .pd-hero-checklist li {
        max-width: 100%;
    }

    .pd-hero-pills {
        flex-wrap: wrap;
    }

    .pd-hero-actions {
        flex-wrap: wrap;
    }

    .pd-name {
        font-size: 28px;
    }

    .pd-hero-tagline {
        font-size: 18px;
    }

    .pd-hero-stats {
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 32px;
    }

    .pd-stat-card {
        flex: 1 1 calc(50% - 16px);
        min-width: 0;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .pd-hero-wrap {
        padding: 0 0 24px;
        overflow-x: hidden;
    }

    .pd-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding-top: 12px;
        padding-bottom: 16px;
    }

    .pd-hero-content {
        flex: none;
        width: 100%;
        min-width: 0;
        gap: 16px;
    }

    .pd-hero-pills {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 0;
    }

    .pd-hero-identity {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .pd-logo {
        width: 64px;
        height: 64px;
        border-radius: 12px;
    }

    .pd-identity-text {
        min-width: 0;
    }

    .pd-name {
        font-size: 22px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .pd-hero-tagline {
        font-size: 16px;
    }

    .pd-hero-description,
    .pd-hero-checklist li {
        max-width: 100%;
    }

    .pd-hero-actions {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 12px;
        width: 100%;
        margin-top: 4px;
    }

    .pd-hero-actions .pd-btn-primary,
    .pd-hero-actions .pd-btn-outline-blue,
    .pd-hero-actions .pd-btn-outline {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
        box-sizing: border-box;
    }

    .pd-hero-image {
        flex: none;
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .pd-hero-image img {
        width: 100%;
        max-width: 100%;
        border-radius: 12px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    }

    .pd-hero-stats {
        flex-direction: column;
        gap: 12px;
        margin-top: 24px;
    }

    .pd-stat-card {
        flex: none;
        width: 100%;
        padding: 20px 16px;
        box-sizing: border-box;
    }

    .pd-stat-value {
        font-size: 24px;
    }
}

/* ── Tab bar ── */
.pd-tabs-wrap {
    background: #FFFFFF;
    border-bottom: 2px solid #E8EDF3;
    position: sticky;
    top: 0;
    z-index: 10;
}

.pd-tabs-wrap .pd-inner {
    justify-content: center;
    display: flex;
    gap: 0;
}

.pd-tab {
    height: 48px;
    padding: 0 28px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #283243;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.pd-tab:hover {
    color: #1A5EC4;
}

.pd-tab--active {
    color: #296DF5;
    border-bottom-color: #296DF5;
    font-weight: 700;
}

/* ── Shared section styles ── */
.pd-tab-content {
    flex: 1;
}

.pd-section {
    padding: 56px 0;
}

.pd-section--light {
    background: #F7F9FC;
}

.pd-section--white {
    background: #FFFFFF;
}

.pd-section--overview {
    background: #F7F9FC;
}

/* Gate section — white page bg, card carries its own gradient */
.pd-section--gate {
    background: #FFFFFF;
    padding: 56px 0;
}

.pd-section-header {
    text-align: center;
    margin-bottom: 40px;
}

.pd-section-title {
    font-size: 26px;
    font-weight: 700;
    color: #0D1B2E;
    margin: 0 0 8px;
    line-height: 1.3;
}

.pd-section-subtitle {
    font-size: 14px;
    color: #6B7A8D;
    margin: 0;
    line-height: 1.5;
}

/* ── Core Capabilities grid ── */
.pd-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pd-capability-card {
    background: #FFFFFF;
    border: 1px solid #E8EDF3;
    border-radius: 12px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}

.pd-capability-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #EEF4FF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2B63E8;
    flex-shrink: 0;
}

.pd-capability-title {
    font-size: 15px;
    font-weight: 700;
    color: #0D1B2E;
    margin: 0;
    line-height: 1.35;
}

.pd-capability-desc {
    font-size: 13px;
    color: #4A5568;
    line-height: 1.6;
    margin: 0;
}

/* ── Industries / Use Cases chips ── */
.pd-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.pd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid #D1D9E0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #3D4F63;
    white-space: nowrap;
}

.pd-chip svg {
    color: #1A5EC4;
    flex-shrink: 0;
}

/* ── Overview section ── */
.pd-overview-layout {
    margin-bottom: 32px;
}

.pd-section--overview {
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: none;
}

.pd-section--overview::before {
    content: "";
    position: absolute;
    width: 851px;
    height: 851px;
    left: -426px;
    top: -300px;
    opacity: 0.85;
    pointer-events: none;
    border-radius: 851px;
    background: var(--Color-Primary-100, #C4DAFD);
    filter: blur(150px);
}

.pd-overview-title {
    font-size: 28px;
    font-weight: 700;
    color: #1A5EC4;
    line-height: 1.3;
    margin: 0 0 16px;
}

.pd-overview-body {
    font-size: 15px;
    color: #4A5568;
    line-height: 1.7;
    margin: 0;
    max-width: 680px;
}

/* Video placeholder block */
.pd-video-block {
    width: 100%;
    max-width: none;
    margin: 0;
    background: #1A2744;
    border-radius: 16px;
    border: none;
    box-shadow: none;
    height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #FFFFFF;
}

.pd-video-play {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pd-video-play:hover {
    background: rgba(255, 255, 255, 0.25);
}

.pd-video-label {
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: 0.2px;
}

/* ── Problem / Solution ── */
.pd-problem-solution {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.pd-ps-row {
    display: grid;
    gap: 40px;
    align-items: start;
}

/* Problem: text left, image right */
.pd-problem.pd-ps-row {
    grid-template-columns: 1fr auto;
}

/* Solution: image left, text right */
.pd-solution.pd-ps-row {
    grid-template-columns: auto 1fr;
}

.pd-ps-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pd-ps-title {
    font-size: 24px;
    font-weight: 700;
    color: #0D1B2E;
    line-height: 1.3;
    margin: 0;
}

.pd-ps-title--blue {
    color: #1A5EC4;
}

.pd-ps-body {
    font-size: 14px;
    color: #4A5568;
    line-height: 1.7;
    margin: 0;
}

/* Placeholder image tiles */
.pd-ps-image--placeholder {
    height: 300px;
    width: 500px;
    flex-shrink: 0;
    border-radius: 12px;
    /* background: repeating-conic-gradient(#D8E4F2 0% 25%, #EEF4FF 0% 50%) 0 0 / 20px 20px; */
    background-image: url("https://aginternalaistorage.blob.core.windows.net/agonedesignsystemassets/MarketplaceAssets/Rectangle%2069.svg");
    border: 1px solid #D8E4F2;
}

/* ── Pricing grid ── */
.pd-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-top: 24px;
    /* clearance for the "Most Popular" badge */
}

.pd-pricing-card {
    background: #FFFFFF;
    border: 1.5px solid #E8EDF3;
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
}

.pd-pricing-card--highlighted {
    border-color: #2B63E8;
    box-shadow: 0 4px 24px rgba(43, 99, 232, 0.15);
}

.pd-pricing-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: #1A2744;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    padding: 5px 18px;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.pd-pricing-tier {
    font-size: 20px;
    font-weight: 700;
    color: #0D1B2E;
    margin-bottom: 10px;
}

.pd-pricing-price {
    font-size: 28px;
    font-weight: 800;
    color: #2B63E8;
    line-height: 1.2;
    margin-bottom: 4px;
}

.pd-pricing-note {
    font-size: 13px;
    color: #8892A4;
    margin-bottom: 24px;
}

.pd-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.pd-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #3D4F63;
    line-height: 1.5;
}

.pd-pricing-features li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: #2B63E8;
}

.pd-pricing-cta {
    width: 100%;
    height: 46px;
    border-radius: 50px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: auto;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.pd-pricing-cta--solid {
    background: linear-gradient(135deg, #2B63E8 0%, #1740CC 100%);
    color: #FFFFFF;
    border: none;
}

.pd-pricing-cta--solid:hover {
    background: linear-gradient(135deg, #3570F5 0%, #2050E0 100%);
    box-shadow: 0 4px 14px rgba(27, 64, 204, 0.28);
}

.pd-pricing-cta--outline {
    background: transparent;
    color: #2B63E8;
    border: 1.5px solid #2B63E8;
}

.pd-pricing-cta--outline:hover {
    background: #F0F4FF;
}

/* ── Packages grid ── */
.pd-packages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 8px;
}

.pd-package-card {
    background: #FFFFFF;
    border: 1.5px solid #E8EDF3;
    border-radius: 16px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
}

.pd-package-name {
    font-size: 20px;
    font-weight: 700;
    color: #0D1B2E;
    margin: 0;
}

.pd-package-desc {
    font-size: 14px;
    color: #4A5568;
    line-height: 1.6;
    margin: 0;
}

.pd-package-includes {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.pd-package-includes li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #2B63E8;
}

.pd-package-includes li svg {
    flex-shrink: 0;
    color: #2B63E8;
}

.pd-package-cta {
    align-self: flex-start;
    height: 42px;
    padding: 0 28px;
    background: transparent;
    color: #2B63E8;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: 1.5px solid #2B63E8;
    border-radius: 50px;
    cursor: pointer;
    margin-top: auto;
    transition: background 0.15s ease;
}

.pd-package-cta:hover {
    background: #F0F4FF;
}

/* ── Footer CTA ── */
.pd-footer-cta-wrap {
    background: #F7F9FC;
    border-top: 1px solid #E8EDF3;
    padding: 20px 0;
}

.pd-footer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-footer-cta p {
    font-size: 13px;
    color: #8892A4;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .pd-inner {
        padding: 0 40px;
    }

    .pd-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pd-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    .pd-problem-solution {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .pd-ps-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .pd-inner {
        padding: 0 20px;
    }

    .pd-capabilities-grid {
        grid-template-columns: 1fr;
    }

    .pd-packages-grid {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════
   PRICING TAB — LOGGED-IN LAYOUT
   ════════════════════════════════════════════════════ */

.pd-pricing-section {
    padding: 0 0 40px;
    /* bottom pad for fixed cart bar */
}

/* ── Billing toggle + currency row ── */
.pd-billing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    padding: 40px 0;
    align-self: stretch;
    box-sizing: border-box;
}

/* ==========================================
   CURRENCY DROPDOWN STYLES
   ========================================== */
.pd-currency-select {
    appearance: none;
    /* Removes default browser styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #FFFFFF;
    border: 1px solid var(--Border-Neutral-Lighter, #9FAEC6);
    /* Matches the light blue card borders */
    border-radius: 6px;
    padding: 8px 36px 8px 16px;
    /* Extra padding on the right for the arrow */
    font-size: 16px;
    font-weight: 400;
    color: #283243;
    line-height: 140%;
    text-overflow: ellipsis;
    overflow: hidden;
    /* Dark Navy text */
    font-family: 'Noto Sans', sans-serif;
    cursor: pointer;
    /* Custom chevron arrow SVG */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230D1B2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

}

.header-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.yealery .pd-currency-select:hover {
    border-color: #74A9FB;
}

.pd-currency-select:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    /* Nice blue glow when clicked */
}

/* Optional: Style the 'Currency' label text if you haven't already */
.pd-currency-label {
    font-size: 14px;
    color: #4A5B7A;
    font-weight: 500;
}

.pd-billing-switch-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
    justify-content: center;
}

.pd-billing-yearly-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pd-billing-label {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 140%;
    color: #8C9EBB;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.pd-billing-label--active {
    color: #296DF5;
}

.pd-billing-switch {
    position: relative;
    width: 60px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #EEF4FF;
    cursor: pointer;
    flex-shrink: 0;
}

.pd-billing-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #296DF5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.pd-billing-switch--monthly .pd-billing-switch-knob {
    transform: translateX(28px);
}

.pd-save-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 12px;
    border-radius: 999px;
    border: 2px solid #E5E8F0;
    background: #F5F7F9;
    color: #B5C1D3;
    white-space: nowrap;
    pointer-events: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pd-save-pill--active {
    background: #008FA0;
    border-color: #BFFAFD;
    color: #E2F76E;
}

.pd-save-pill-pct {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: #B5C1D3;
}

.pd-save-pill-text {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
    color: #B5C1D3;
}

.pd-save-pill--active .pd-save-pill-pct,
.pd-save-pill--active .pd-save-pill-text {
    color: #E2F76E;
}

.pd-billing-header-spacer {
    width: 169px;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 42px;
    background: transparent;
    transition: background 0.2s ease;
}

.pd-billing-header-spacer--grey {
    background: var(--Surface-Neutral-Lightest, #F5F7F9);
    color: var(--Color-Neutral-200, #B5C1D3);
}

.pd-currency-wrap {
    width: 160px;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: static;
    transform: none;
    margin-top: 0;
}

.pd-currency-label {
    font-weight: 500;
    font-size: 14px;
    color: #171D27;
}

.pd-currency-pill {
    width: 91px;
    height: 42px;
    border: 1px solid #9FAEC6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #FFFFFF;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    color: #171D27;
}

/* ── Pricing card (logged-in pricing tab container) ── */
.pd-pricing-section .pd-pricing-card {
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0 0 16px;
    overflow: visible;
}

.pd-pricing-card-header {
    padding: 0;
}

.pd-pricing-card-product-name {
    font-weight: 700;
    font-size: 25px;
    color: #171D27;
    margin: 0;
    line-height: 140%;
}

/* ── What's Included ── */
.pd-included-section {
    background: #FFFFFF;
    border: 1px solid #C4DAFD;
    border-radius: 12px;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 24px;
}

.pd-included-icon {
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
}

.pd-included-icon-text {
    height: 22px;
    width: 126px;
}

.pd-included-header {
    width: 150px;
    height: 22px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #296DF5;
    text-transform: none;
    letter-spacing: normal;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.pd-included-header svg {
    color: #296DF5;
    flex-shrink: 0;
}

.pd-included-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    align-content: start;
}

.pd-included-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pd-included-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    height: 44px;
    width: 380px;
}

.pd-included-item--tall {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    height: 64px;
}

.pd-included-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #E8FBF0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    color: #099049;
}

.pd-included-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pd-included-title {
    font-weight: 600;
    font-size: 15px;
    color: #171D27;
    line-height: 140%;
}

.pd-included-subtitle {
    font-weight: 400;
    font-size: 14px;
    color: #64748B;
    line-height: 140%;
}

.colour-text-lightestgrey {
    color: #D8E7FE;
}

.colour-text-lightgrey {
    color: #B5C1D3;
}

.colour-text-grey {
    color: #3C4C67;
}

.colour-text-darkgrey {
    color: #283243;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 4px 0 1px 2px;
}

.colour-text-lightestblue {
    color: #9CC2FC;
}



.colour-text-lightblue {
    color: #0A50DC;
}

.colour-text-darkblue {
    color: #052970;
}

.colour-text-cyan {
    color: #005363;
}

.colour-text-lightcyan {
    color: #008FA0;
}

.colour-text-lightyellow {
    color: #EEFBA7;
}

.colour-text-yellow {
    color: #E2F76E;
}

.colour-text-orange {
    color: #FFAB5F;
}

.colour-text-lightorange {
    color: #FFDABD;
}

.colour-text-white {
    color: #FFFFFF;
}

/* ── Price box (full-width, light blue gradient) ── */
.pd-pricing-details-wrap {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #C4DAFD;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}

.pd-fees-section {
    gap: 20px;
    display: flex;
    flex-direction: column;
}

/* --- Inner Blue Card (Pricing Card) --- */
.pd-price-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

/* ==========================================
   MONTHLY VARIANT (Light Blue)
   ========================================== */
.pd-price-box--monthly {
    width: 100%;
    height: 161px;
    background: linear-gradient(180deg, #F5FAFF 0%, #D8E7FE 100%);
    border: 1px solid #74A9FB;
    border-radius: 16px;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    box-sizing: border-box;
}

.pd-price-box--monthly .pd-price-box-label {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #0A50DC;
    text-transform: uppercase;
}

.pd-price-box--monthly .pd-price-currency,
.pd-price-box--monthly .pd-price-amount {
    font-family: 'Noto Sans', sans-serif;
    font-size: 48.83px;
    font-weight: 700;
    color: #052970;
    line-height: 124%;
}

.pd-price-box--monthly .pd-price-unit {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    color: #0A50DC;
    font-weight: 600;
}

.pd-price-box--monthly .pd-price-equivalent {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #0A50DC;
    line-height: 140%;
}


/* ==========================================
   YEARLY VARIANT (Cyan + Skewed Blue Block)
   ========================================== */
.pd-price-box--yearly {
    height: 161px;
    width: 100%;
    background: linear-gradient(135deg, #E6FDFD 0%, #D8F7F7 100%);
    /* Light Cyan */
    border: 1px solid #75E6DA;
    border-radius: 16px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
    /* Clips the slanted block inside the rounded corners */
    position: relative;
}

/* Left Cyan Area */
.pd-price-box-left {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    position: relative;
    z-index: 1;
}

.pd-price-box-left .pd-price-box-label {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #00897B;
    /* Teal */
    text-transform: uppercase;
}

.pd-price-box-left .pd-price-currency,
.pd-price-box-left .pd-price-amount {
    font-family: 'Noto Sans', sans-serif;
    font-size: 48.83px;
    font-weight: 700;
    color: #004D40;
    /* Dark Teal */
    line-height: 124%;
}

.pd-price-box-left .pd-price-unit {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    color: #00897B;
    font-weight: 600;
}

.pd-price-box-left .pd-price-equivalent {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #008FA0;
    line-height: 140%;
}

/* Right Blue Angled Area */
.pd-price-box-right {
    position: relative;
    width: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
}

/* CSS trick to draw the skewed block and the lime accent line! */
.pd-price-box-right::before {
    content: '';
    position: absolute;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -50px;
    /* Overhangs the right edge */
    width: 296px;
    background: linear-gradient(225deg, #74A9FB 0%, #0A50DC 100%);
    transform: skewX(-20deg);
    /* Angles the block */
    border-left: 6px solid transparent;
    /* Creates the slanted lime line automatically! */
    z-index: 0;
    border-image: linear-gradient(180deg, #84F4FB 0%, #D9F53D 100%) 1;
}

/* Ensure text sits on top of the skewed background */
.pd-savings-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    margin: 35px 0px 34px 62px;
}

.pd-savings-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #FFFFFF;
    text-transform: uppercase;
}

.pd-savings-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
}

.pd-savings-header svg {
    color: #FFFFFF;
}

.pd-savings-amount {
    font-family: 'Noto Sans', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #D9F53D;
    /* Lime green */
    line-height: 1;
    margin: 4px 0;
}

.pd-savings-label {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #EEFBA7
}

/* --- Additional Fees Section --- */
/* ==========================================
   OPTIONAL ADD-ONS SECTION
   ========================================== */
.pd-addons-section {
    width: 100%;
    max-width: 100%;
    margin: 32px 0 0;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pd-fees-header {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    color: #296DF5;
    text-transform: none;
    letter-spacing: 0;
    line-height: 140%;
    height: 22px;
    width: 144px;
}

.pd-fees-header svg {
    color: #296DF5;
}

.pd-fee-row {
    width: 818px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0;
    border-bottom: none;

}

.pd-fee-label,
.pd-fee-amount {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #171D27;
}

.pd-fee-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Authentication Setup — separate card ── */
.pd-auth-card {
    background: #FFFFFF;
    border: 1.5px solid #D8E4F0;
    border-radius: 16px;
    overflow: hidden;
}

.pd-auth-card--error {
    border-color: #E53935;
}

.pd-auth-validation-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #FFF4F4;
    border: 1px solid #F8AAAA;
    border-radius: 8px;
    color: #C62828;
    font-size: 13px;
    font-weight: 500;
}

.pd-auth-section {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pd-auth-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pd-auth-title {
    font-size: 15px;
    font-weight: 700;
    color: #0D1B2E;
}

.pd-auth-subtitle {
    font-size: 13px;
    color: #6B7A8D;
    margin: 0;
    line-height: 1.5;
}

.pd-auth-options {
    width: 818px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pd-auth-option {
    height: 90px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1.5px solid #D1DAE6;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pd-auth-option:hover {
    border-color: #1A5EC4;
    background: #F4F8FF;
}

.pd-auth-option--selected {
    border-color: #1A5EC4;
    background: #EEF4FF;
}

.pd-auth-radio {
    display: flex;
    align-items: center;
    padding-top: 2px;
    flex-shrink: 0;
}

.pd-auth-option-radio {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-auth-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #1A5EC4;
    cursor: pointer;
}

.pd-auth-option-body {
    width: 210px;
    height: 66px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pd-auth-option-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #0D1B2E;
}

.pd-auth-option-desc {
    font-size: 12px;
    color: #6B7A8D;
    line-height: 1.4;
}

/* ── Optional Add-ons section ── */
.pd-addons-section {
    margin-top: 32px;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pd-addons-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pd-addons-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0D1B2E;
    margin: 0;
}

.pd-addons-subtitle {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    color: #6B7A8D;
    margin: 0;
    line-height: 1.5;
}

/* Flex layout to stack the add-on cards */
.pd-addon-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Individual Add-on Card Styles */
.pd-addon-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    background: #FFFFFF;
    border: 1px solid #D1DAE6;
    border-radius: 8px;
    /* Creates the individual card look */
    flex-wrap: wrap;
}

.pd-addon-info {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pd-addon-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    color: #171D27;
}

/* Removes the grey background circle on the info icon to match image */
/* .pd-addon-name  */

.pd-tooltip-icon {
    height: 16px;
    width: 16px;
    display: flex;
    justify-content: center;
}

.pd-addon-unit-price {
    font-family: 'Noto Sans', sans-serif;
    font-size: 13px;
    color: #6B7A8D;
}

.pd-addon-unit-price-box {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

/* The Quantity Pill Wrapper */
.pd-addon-qty {
    display: flex;
    height: 40px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    border: 2px solid #D6DBE6;
    background: #FFF;
    padding: 0 4px;
}

.pd-qty-btn {
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1/1;
    /* Active/Hover Blue color */
    cursor: pointer;
    transition: background 0.15s ease;
}

.pd-qty-btn:hover:not(:disabled) {
    background: #F0F4FF;
}

/* Makes the minus button grey when quantity is 0 */
.pd-qty-btn:disabled {
    color: #A0ABBF;
    cursor: default;
}

/* The quantity number cell with very faint vertical dividers */
.pd-qty-value {
    display: flex;
    width: 45px;
    padding: 0 4px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    color: var(--Text-Neutral-BodyText, #283243);
    /* Subtitle/Semibold/Large */
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    /* 28px */
}

/* Total Price on the right side */
.pd-addon-total {
    min-width: 130px;
    text-align: right;
    gap: 2px;
    display: flex;
    justify-content: flex-end;
    color: #283243
}

/* Separate styling for the suffix (/yr) so it isn't bolded */
.pd-addon-suffix {
    font-weight: 400;
    color: #6B7A8D;
    font-size: 13px;
    margin-left: 2px;
}

/* ════ Packages grid ════ */
.pd-packages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.pd-package-card {
    background: #FFFFFF;
    border: 1.5px solid #D1DAE6;
    border-radius: 14px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pd-package-name {
    font-size: 16px;
    font-weight: 700;
    color: #0D1B2E;
    margin: 0;
}

.pd-package-desc {
    font-size: 13px;
    color: #4A5568;
    margin: 0;
    line-height: 1.55;
}

.pd-package-includes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pd-package-includes li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #3D4F63;
}

.pd-package-includes li svg {
    color: #16A34A;
    flex-shrink: 0;
}

/* ==========================================
   PAGE BOTTOM — footer in document flow (not viewport-pinned)
   ========================================== */
.pd-page-bottom {
    flex-shrink: 0;
    width: 100%;
}

.pd-page .pd-page-bottom .agone-footer {
    margin-top: 0;
    position: static;
}

.pd-main--has-banner {
    display: flex;
    flex-direction: column;
}

.pd-main--has-banner .pd-tab-content {
    flex: 1 1 auto;
}

.pd-cart-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    flex-shrink: 0;
    z-index: 1000;
    background: #041A49;
    padding: 16px 40px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 4px solid #296DF5;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    font-family: 'Noto Sans', sans-serif;
}

.pd-cart-bar--collapsed {
    padding: 12px 32px;
    /* Shrinks the bar when collapsed */
    justify-content: flex-start;
}

.pd-cart-bar--collapsed .pd-cart-bar-toggle::after {
    content: "Payment Calculation";
    margin-left: 16px;
    color: #8C9EBB;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.pd-cart-bar-toggle {
    background: transparent;
    border: none;
    color: #8A9BB3;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.pd-cart-bar-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* The Grid Layout */
.pd-cart-bar-inner {
    flex: 1;
    max-width: 1100px;
    margin: 0 auto 0 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label actions"
        "fields actions"
        "note actions";
    column-gap: 40px;
    row-gap: 8px;
    /* <-- Tighter gap between the label, fields, and note */
    align-items: center;
}

/* Magic Trick: This allows its children to participate directly in the inner Grid layout */
.pd-cart-bar-top {
    display: contents;
}

.pd-cart-bar-pay-label {
    grid-area: label;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

.pd-cart-bar-fields {
    grid-area: fields;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* --- Individual Field Blocks --- */
.pd-cart-bar-field {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #556C91;
    border-radius: 8px;
    padding: 8px 16px;
    /* <-- Reduced vertical padding from 12px to 8px */
    display: flex;
    flex-direction: column;
    gap: 0px;
    /* <-- Pulled the text closer together */
    min-width: 160px;
}

.pd-cart-bar-field-label {
    font-size: 13px;
    color: #9EAECF;
}

.pd-cart-bar-field-value {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
}

/* Deposit Field Variant (Orange — Figma "[M].Card.Status" Color=Orange/Dark) */
.pd-cart-bar-field--deposit {
    background: rgba(242, 74, 28, 0.4);
    border: 1px solid rgba(255, 126, 66, 0.5);
}

.pd-cart-bar-field--deposit .pd-cart-bar-field-label {
    color: #FFB89E;
}

/* Estimated Total Field Variant (Primary Blue — Figma "[M].Card.Status" Color=Primary/Dark) */
.pd-cart-bar-field--total {
    background: rgba(41, 109, 245, 0.4);
    border: 1px solid #4D91FA;
}

/* Promo Code Field Variant (Green — Figma "[M].Card.Status" Color=Green/Dark) */
.pd-cart-bar-field--promo {
    background: rgba(9, 144, 73, 0.4);
    border: 1px solid rgba(12, 212, 108, 0.5);
}

.pd-cart-bar-field--total .pd-cart-bar-field-label {
    color: #8AB4F8;
}

/* --- Note beneath the fields --- */
.pd-cart-bar-note {
    grid-area: note;
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    color: #8C9EBB;
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.pd-cart-bar-note-second {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    color: #FFFFFF;
}

/* Force all colour-text classes inside pd-cart-bar to be visible on the dark background.
   Two-class specificity wins over agone.css single-class typography overrides. */
.pd-cart-bar-field .colour-text-lightgrey,
.pd-cart-bar-field .colour-text-lightestblue,
.pd-cart-bar-field .colour-text-lightestgrey,
.pd-cart-bar-field .colour-text-white {
    color: #FFFFFF;
}

.pd-cart-bar-field--deposit .colour-text-orange {
    color: #FFB89E;
}

.pd-cart-bar-field--deposit .colour-text-lightorange {
    color: #FFDABD;
}

.pd-cart-bar-field--promo .colour-text-lightgreen {
    color: #7BE0A6;
}

.pd-cart-bar-field--total .colour-text-lightestblue {
    color: #9CC2FC;
}

/* --- Actions Section (Stacked Buttons) --- */
.pd-cart-bar-actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    align-items: flex-end;
}

.pd-cart-btn-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #F4F7FC;
    /* Very light, near-white */
    color: #296DF5;
    /* Blue text */
    border: none;
    border-radius: 30px;
    /* Pill shape */
    padding: 10px 24px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: center;
    /* Subtitle/Semibold/Small */
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%
}

.pd-cart-btn-cart:hover {
    background: #FFFFFF;
}

.pd-cart-btn-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #3B82F6;
    /* Bright Blue */
    color: #FFFFFF;
    border: none;
    border-radius: 30px;
    /* Pill shape */
    padding: 10px 24px;
    text-align: center;
    /* Subtitle/Semibold/Small */
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pd-cart-btn-checkout:hover {
    background: #2563EB;
    /* Darker blue on hover */
}

/* --- TABLET (768px – 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    /* The bar itself is the flex row holding toggle / summary / actions, so it has
       to wrap here — otherwise the actions sit beside the summary and overflow. */
    .pd-cart-bar {
        flex-wrap: wrap;
        padding: 12px 24px;
        gap: 12px;
    }

    /* Corner-pin the chevron so the summary gets the full width of the bar. */
    .pd-cart-bar:not(.pd-cart-bar--collapsed) .pd-cart-bar-toggle {
        position: absolute;
        top: 8px;
        right: 12px;
        padding: 4px;
    }

    .pd-cart-bar--collapsed {
        padding: 10px 24px;
    }

    .pd-cart-bar-inner {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "label"
            "fields"
            "note";
        column-gap: 0;
        row-gap: 10px;
    }

    .pd-cart-bar-pay-label {
        padding-right: 36px;
    }

    .pd-cart-bar-fields {
        gap: 12px;
    }

    .pd-cart-bar-field {
        flex: 1 1 auto;
    }

    .pd-cart-bar-note,
    .pd-cart-bar-note-second {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .pd-cart-bar-actions {
        flex: 1 1 100%;
        width: 100%;
        flex-direction: row;
        align-items: stretch;
    }

    .pd-cart-btn-cart,
    .pd-cart-btn-checkout {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* --- MOBILE (767px and below) --- */
@media (max-width: 767px) {
    .pd-cart-bar {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 10px;
    }

    .pd-cart-bar:not(.pd-cart-bar--collapsed) .pd-cart-bar-toggle {
        position: absolute;
        top: 8px;
        right: 12px;
        padding: 4px;
    }

    .pd-cart-bar--collapsed {
        padding: 10px 16px;
    }

    .pd-cart-bar--collapsed .pd-cart-bar-toggle::after {
        margin-left: 8px;
        font-size: 14px;
    }

    .pd-cart-bar-inner {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "label"
            "fields"
            "note";
        column-gap: 0;
        row-gap: 10px;
    }

    .pd-cart-bar-pay-label {
        padding-right: 36px;
    }

    .pd-cart-bar-fields {
        gap: 8px;
    }

    .pd-cart-bar-field {
        flex: 1 1 calc(50% - 4px);
        min-width: 140px;
        padding: 8px 12px;
    }

    .pd-cart-bar-field-label,
    .pd-cart-bar-field .body-text-small-regular {
        font-size: 12px;
    }

    .pd-cart-bar-pay-label,
    .pd-cart-bar-note,
    .pd-cart-bar-note-second {
        font-size: 13px;
    }

    .pd-cart-bar-note,
    .pd-cart-bar-note-second {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Multi-product selections would otherwise push the bar over half the screen. */
    .pd-cart-bar-note-second {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .pd-cart-bar-actions {
        flex: 1 1 100%;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
    }

    /* Side by side while they fit; each takes a full row on narrow phones. */
    .pd-cart-btn-cart,
    .pd-cart-btn-checkout {
        flex: 1 1 200px;
        min-width: 0;
    }
}

/* ══════════════════════════════════════════
   PACKAGES TAB — new components
══════════════════════════════════════════ */
/* Value proposition */
.pd-pkg-value-prop {
    text-align: center;
    margin-bottom: 28px;
    padding: 0 8px;
}

.pd-pkg-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: #1A5EC4;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0 0 10px;
}

.pd-pkg-heading {
    font-size: 26px;
    font-weight: 800;
    color: #0D1B2E;
    margin: 0 0 12px;
    line-height: 1.25;
}

.pd-pkg-desc {
    font-size: 14px;
    color: #4E6283;
    line-height: 1.6;
    max-width: 580px;
    margin: 0 auto;
}

/* Suite card */
.pd-pkg-suite-card {
    background: #FFFFFF;
    border: 1.5px solid #D8E4F0;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
}

.pd-pkg-suite-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #E8EDF3;
    background: linear-gradient(135deg, #F0F6FF 0%, #E8EDF3 100%);
    color: #1A5EC4;
}

.pd-pkg-suite-name {
    font-size: 16px;
    font-weight: 700;
    color: #0D1B2E;
    margin: 0;
}

.pd-pkg-products {
    display: flex;
    flex-direction: column;
}

.pd-pkg-product-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid #E8EDF3;
}

.pd-pkg-product-row:last-child {
    border-bottom: none;
}

.pd-pkg-product-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #FFFFFF;
    flex-shrink: 0;
}

.pd-pkg-product-logo--hire {
    background: linear-gradient(135deg, #1A5EC4, #2B63E8);
}

.pd-pkg-product-logo--work {
    background: linear-gradient(135deg, #7C3AED, #9B5DE5);
}

.pd-pkg-product-logo--learn {
    background: linear-gradient(135deg, #059669, #10B981);
}

.pd-pkg-product-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pd-pkg-product-name {
    font-size: 14px;
    font-weight: 700;
    color: #0D1B2E;
}

.pd-pkg-product-desc {
    font-size: 12px;
    color: #4E6283;
    line-height: 1.5;
}

.pd-pkg-product-features {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
}

.pd-pkg-feature-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #2D4A6B;
    background: #F0F6FF;
    border-radius: 4px;
    padding: 3px 8px;
}

.pd-pkg-feature-chip svg {
    color: #16A34A;
    flex-shrink: 0;
}

/* Price box — package variant (with optional savings badge) */
.pd-price-box--pkg {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.pd-price-box-left {
    flex: 1;
}

.pd-pkg-savings-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #059669, #10B981);
    border-radius: 14px;
    padding: 14px 20px;
    min-width: 140px;
    text-align: center;
    flex-shrink: 0;
}

.pd-pkg-savings-star {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2px;
}

.pd-pkg-savings-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pd-pkg-savings-amount {
    font-size: 20px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 4px 0 2px;
}

.pd-pkg-savings-note {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
}

/* Included with the Suite */
.pd-pkg-included-card {
    background: #FFFFFF;
    border: 1.5px solid #D8E4F0;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
}

.pd-pkg-included-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border-bottom: 1px solid #E8EDF3;
    font-size: 13px;
    font-weight: 700;
    color: #1A5EC4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pd-pkg-included-items {
    display: flex;
    flex-direction: column;
}

.pd-pkg-included-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 24px;
    border-bottom: 1px solid #E8EDF3;
}

.pd-pkg-included-item:last-child {
    border-bottom: none;
}

.pd-pkg-included-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #DCFCE7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    color: #16A34A;
}

.pd-pkg-included-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pd-pkg-included-text--full {
    flex: 1;
}

.pd-pkg-included-title {
    font-size: 14px;
    font-weight: 700;
    color: #0D1B2E;
}

.pd-pkg-included-subtitle {
    font-size: 12px;
    color: #4E6283;
    margin-bottom: 10px;
}

/* Auth options inside included card ΓÇö fill the card width responsively
   (override the fixed 818px / 210px sizing used by the standalone variant). */
.pd-auth-options--pkg {
    margin-top: 10px;
    width: 100%;
}

.pd-auth-options--pkg .pd-auth-option {
    height: auto;
    min-height: 72px;
    align-items: center;
}

.pd-auth-options--pkg .pd-auth-option-body {
    width: auto;
    height: auto;
}

/* Request a Trial card */
.pd-trial-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: #F8FAFC;
    border: 1.5px solid #D8E4F0;
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 16px;
}

.pd-trial-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pd-trial-title {
    font-size: 18px;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
}

.pd-trial-desc {
    font-size: 14px;
    color: #4E6283;
    margin: 0;
    max-width: 1100px;
    line-height: 1.5;
}

.pd-trial-btn {
    flex-shrink: 0;
    background: #FFFFFF;
    color: #296DF5;
    border: 1.5px solid #296DF5;
    border-radius: 999px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.pd-trial-btn:hover:not(:disabled) {
    background: #296DF5;
    color: #FFFFFF;
}

.pd-trial-btn:disabled {
    opacity: 0.7;
    cursor: default;
}

/* Bundle promo section */
.pd-pkg-bundle-section {
    background: #F0F6FF;
    border: 1.5px solid #BFDBFE;
    border-radius: 16px;
    padding: 28px 28px 24px;
    margin-bottom: 24px;
}

.pd-pkg-bundle-header {
    text-align: center;
    margin-bottom: 22px;
}

.pd-pkg-bundle-title {
    font-size: 20px;
    font-weight: 800;
    color: #1A5EC4;
    margin: 0 0 6px;
}

.pd-pkg-bundle-subtitle {
    font-size: 13px;
    color: #4E6283;
    margin: 0;
}

.pd-pkg-bundle-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.pd-pkg-bundle-card {
    background: #FFFFFF;
    border: 1.5px solid #BFDBFE;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px 20px;
    gap: 12px;
    text-align: center;
}

.pd-pkg-bundle-pct-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-pkg-bundle-pct {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1A5EC4, #2B63E8);
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: 30px;
    font-weight: 900;
    color: #FFFFFF;
    padding-top: 20px;
}

.pd-pkg-bundle-pct span {
    font-size: 16px;
    font-weight: 700;
    margin-left: 1px;
}

.pd-pkg-bundle-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pd-pkg-bundle-condition {
    font-size: 14px;
    font-weight: 700;
    color: #0D1B2E;
    margin: 0;
}

.pd-pkg-bundle-label {
    font-size: 12px;
    color: #4E6283;
    margin: 0;
}

.pd-pkg-bundle-savings {
    background: linear-gradient(135deg, #059669, #10B981);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50px;
    padding: 6px 14px;
    margin-top: 6px;
    white-space: nowrap;
}

/* Responsive adjustments for packages tab */
@media (max-width: 700px) {
    .pd-pkg-product-row {
        grid-template-columns: 44px 1fr;
        grid-template-rows: auto auto;
    }

    .pd-pkg-product-features {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .pd-pkg-bundle-cards {
        grid-template-columns: 1fr;
    }

    .pd-price-box--pkg {
        flex-direction: column;
    }

    .pd-pkg-savings-badge {
        width: 100%;
        min-width: 0;
        flex-direction: row;
        gap: 12px;
        padding: 12px 16px;
    }
}

/* ── Overview Tab Section ── */
.pd-section--overview-tab {
    background: #FFFFFF;
    padding: 80px 0;
    overflow-x: hidden;
}

@media (max-width: 640px) {
    .pd-section--overview-tab {
        padding: 48px 0;
    }
}

/* Overview tab — Video block */
.pd-section--overview-video {
    background: #FFFFFF;
    padding: 0 0 80px;
}

.pd-ov-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.pd-ov-video-title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: #296DF5;
    text-align: center;
}

/* Program-offer overview video title (Figma: primary blue, 20px) */
.pd-offer-overview-video .pd-ov-video-title {
    font-size: 20px;
    line-height: 1.4;
    color: #296DF5;
}

.pd-offer-overview-video {
    padding-bottom: 100px;
}

.pd-ov-video-frame {
    width: 100%;
    max-width: 930px;
    aspect-ratio: 930 / 500;
    border-radius: 20px;
    overflow: hidden;
    background: #0B1B3A;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-ov-video-player {
    position: relative;
    width: 100%;
    height: 100%;
}

.pd-ov-video-media {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
}

.pd-ov-video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: #FFFFFF;
}

.pd-ov-video-placeholder svg {
    opacity: 0.9;
}

.pd-ov-video-placeholder span {
    font-size: 20px;
    font-weight: 700;
}

/* Overview video — responsive */

/* Large desktop — match Figma spacing (1440–1980) */
@media (min-width: 1440px) {
    .pd-section--overview-video {
        padding: 0 0 80px;
    }

    .pd-ov-video {
        gap: 24px;
    }

    .pd-ov-video-title {
        font-size: 28px;
    }

    .pd-ov-video-frame {
        border-radius: 20px;
    }

    .pd-offer-overview-video {
        padding-bottom: 100px;
    }
}

/* Mid desktop / laptop (1024–1439) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .pd-section--overview-video {
        padding: 0 0 64px;
    }

    .pd-ov-video {
        gap: 20px;
    }

    .pd-ov-video-title {
        font-size: 26px;
    }

    .pd-ov-video-frame {
        border-radius: 18px;
    }

    .pd-offer-overview-video {
        padding-bottom: 80px;
    }
}

/* Small tablet / narrow laptop (769–1023) */
@media (min-width: 769px) and (max-width: 1023px) {
    .pd-section--overview-video {
        padding: 0 0 56px;
    }

    .pd-ov-video {
        gap: 18px;
    }

    .pd-ov-video-title {
        font-size: 24px;
    }

    .pd-offer-overview-video .pd-ov-video-title {
        font-size: 18px;
    }

    .pd-ov-video-frame {
        border-radius: 16px;
    }

    .pd-offer-overview-video {
        padding-bottom: 64px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .pd-section--overview-video {
        padding: 0 0 40px;
    }

    .pd-ov-video {
        gap: 16px;
    }

    .pd-ov-video-title {
        font-size: 22px;
        line-height: 1.35;
        padding: 0 4px;
    }

    .pd-offer-overview-video .pd-ov-video-title {
        font-size: 18px;
    }

    .pd-ov-video-frame {
        border-radius: 12px;
    }

    .pd-offer-overview-video {
        padding-bottom: 48px;
    }
}

.pd-overview-tab-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin: 0 0 40px 0;
}

/* Program-offer overview headers stay centered */
.pd-overview-tab-header.pd-offer-center {
    align-items: center;
    max-width: 849px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.pd-overview-tab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #2B63E8;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.pd-overview-tab-line {
    width: 32px;
    height: 1.5px;
    background: #C4DAFD;
}

.pd-overview-tab-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: clamp(24px, 4vw + 12px, 39.06px);
    font-weight: 700;
    line-height: 140%;
    color: #052970;
    width: 100%;
    max-width: 100%;
    margin-bottom: 32px;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
}

.pd-overview-tab-header.pd-offer-center .pd-overview-tab-title {
    text-align: center;
}

.pd-overview-tab-header.pd-offer-center .pd-challenge-subtitle {
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
}

@media (max-width: 1024px) {
    .pd-overview-tab-title {
        margin-bottom: 24px;
    }

    .pd-overview-tab-header.pd-offer-center {
        max-width: 100%;
        padding: 0 8px;
        box-sizing: border-box;
    }
}

@media (max-width: 640px) {
    .pd-overview-tab-title {
        font-size: clamp(22px, 6.5vw, 28px);
        margin-bottom: 16px;
    }

    .pd-overview-tab-header {
        margin-bottom: 28px;
    }

    .pd-overview-tab-header .pd-challenge-subtitle {
        font-size: 14px;
        padding: 0 4px;
    }
}

.pd-overview-tab-header .pd-challenge-subtitle {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    color: #3C4C67;
    margin: 0;
    text-align: center;
}

.pd-overview-tab-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.pd-overview-tab-card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #E8EDF3;
}

.pd-overview-tab-card-header {
    background: #3B75F2;
    /* matched blue color */
    padding: 16px 24px;
    color: #FFFFFF;
    border-bottom: 4px solid var(--Color-Cyan-200, #84F4FB);
}

.pd-overview-tab-card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.pd-overview-tab-card-body {
    background: #F7F9FC;
    padding: 24px;
    flex: 1;
}

.pd-overview-tab-card-body p {
    margin: 0;
    font-size: 13px;
    color: #4A5568;
    line-height: 1.6;
}

.pd-overview-tab-features-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.pd-overview-tab-features-heading {
    color: var(--Text-Neutral-Title, #171D27);
}

.pd-overview-tab-features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    column-gap: 24px;
    row-gap: 16px;
}

.pd-step-number {
    width: 24px;
    height: 24px;
    background: #2F6FED;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.pd-overview-tab-features-list li {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #296DF5;
    line-height: 1.4;
}

.pd-overview-tab-efficiency-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 24px;
    border-radius: 999px;
    background: #2B63E8;
    font-size: 13px;
    font-weight: 600;
    color: #FFF;
    line-height: 1.4;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    margin-top: 32px;
}

.pd-overview-tab-efficiency-pill img {
    flex-shrink: 0;
    background: #2B63E8;
}

@media (max-width: 700px) {
    .pd-overview-tab-cards {
        grid-template-columns: 1fr;
    }

    .pd-overview-tab-features-list {
        grid-template-columns: 1fr;
    }
}

.pd-overview-tab-video {
    width: 100%;
    height: 440px;
    background: #2E384D;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #FFFFFF;
}

.pd-overview-tab-video .pd-video-play {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pd-overview-tab-video .pd-video-play:hover {
    background: rgba(255, 255, 255, 0.25);
}

.pd-overview-tab-video .pd-video-label-text {
    font-size: 18px;
    font-weight: 700;
}

/* ── Challenge Section ── */
.pd-section--challenge {
    background: var(--gradient-p-900-p-700135, linear-gradient(135deg, var(--Color-Primary-900, #041A49) 0%, var(--Color-Primary-700, #083DA6) 100%));
    /* Deep navy blue matching mockup */
    padding: 64px 0;
    color: #FFFFFF;
}

.pd-challenge-header {
    margin-bottom: 40px;
}

.pd-challenge-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #FF7575;
    /* Coral/Red */
    text-transform: uppercase;
    margin-bottom: 12px;
}

.pd-challenge-line {
    width: 32px;
    height: 1px;
    background: #FF7575;
}

.pd-challenge-title {
    font-size: 36px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.pd-challenge-subtitle {
    font-size: 16px;
    color: #3C4C67;
    margin: 0;
    max-width: 800px;
    font-weight: 400;
    line-height: 1.6;
}

.pd-challenge-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #FF7575;
    margin: 0 0 20px 0;
}

.pd-challenge-situations {
    margin-bottom: 56px;
}

.pd-challenge-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pd-challenge-card {
    background: #1A367D;
    border: 1px solid #74A9FB;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 0;
}

.pd-challenge-icon-wrap {
    width: 44px;
    height: 44px;
    background: #FFFFFF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F2545B;
    flex-shrink: 0;
}

.pd-challenge-card p {
    margin: 0;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 1.5;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ── Challenge cards — responsive ── */

/* Large desktop */
@media (min-width: 1440px) {
    .pd-challenge-cards {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

/* Mid desktop / laptop (1024–1439) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .pd-challenge-cards {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .pd-challenge-card {
        padding: 18px;
        gap: 14px;
    }
}

/* Small tablet / narrow laptop (769–1023) */
@media (min-width: 769px) and (max-width: 1023px) {
    .pd-challenge-cards {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .pd-challenge-card {
        padding: 16px;
        gap: 12px;
        align-items: flex-start;
    }

    .pd-challenge-icon-wrap {
        width: 40px;
        height: 40px;
    }

    .pd-challenge-card p {
        font-size: 13px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .pd-challenge-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pd-challenge-card {
        padding: 16px;
        gap: 12px;
        align-items: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .pd-challenge-icon-wrap {
        width: 40px;
        height: 40px;
    }

    .pd-challenge-card p {
        font-size: 14px;
    }
}

.pd-challenge-impacts {
    margin-bottom: 56px;
}

.pd-challenge-impact-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pd-challenge-impact-item {
    display: flex;
    align-items: center;
    gap: 24px;
}

.pd-challenge-impact-badge {
    min-width: 80px;
    padding: 0 16px;
    height: 48px;
    border: 1.5px solid #344A85;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #F2545B;
    background: transparent;
    flex-shrink: 0;
}

.pd-challenge-impact-item p {
    margin: 0;
    font-size: 15px;
    color: #FFFFFF;
    line-height: 1.5;
}

.pd-challenge-quote {
    background: #1A367D;
    border: 1px solid #2A4B9D;
    border-radius: 8px;
    padding: 32px 24px;
}

.pd-challenge-quote-text {
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0 0 16px 0;
    line-height: 1.6;
}

.pd-challenge-quote-author {
    font-size: 14px;
    font-style: italic;
    color: #8BA8EA;
    margin: 0;
}

/* ── Solution Section ── */
.pd-section--solution {
    background: #F7F9FC;
    /* Very light blue background */
    padding: 64px 0;
    color: #0D1B2E;
}

.pd-solution-header {
    margin-bottom: 48px;
}

.pd-solution-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #296DF5;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-family: "Noto Sans";
    font-style: normal;
    line-height: 140%;
}

.pd-solution-line {
    width: 38px;
    height: 1px;
    background: #296DF5;
}

.pd-solution-title {
    font-size: 39.06px;
    font-weight: 700;
    color: #052970;
    /* margin: 0 0 16px 0; */
    line-height: 140%;
    font-family: "Noto Sans";
    font-style: normal;
}

.pd-solution-subtitle {
    font-size: 16px;
    color: #3C4C67;
    margin: 0;
    max-width: 900px;
    line-height: 140%;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
}

.pd-solution-section-title {
    font-size: 20px;
    font-weight: 600;
    color: #052970;
    /* Dark navy */
    margin: 0 0 20px 0;
    font-family: "Noto Sans";
    font-style: normal;
    line-height: 140%;
}

.pd-solution-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.pd-solution-card {
    background: #FFFFFF;
    border: 1px solid var(--Border-Primary-Subtle, #C4DAFD);
    border-radius: 8px;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(26, 110, 196, 0.05);
    min-width: 0;
}

.pd-solution-icon-wrap {
    width: 48px;
    height: 48px;
    background: #3B75F2;
    /* Blue filled background */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    /* White icon */
    flex-shrink: 0;
}

.pd-solution-icon-wrap img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

.pd-solution-card p {
    margin: 0;
    font-size: 16px;
    color: #3C4C67;
    line-height: 140%;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ── Solution cards — responsive ── */

/* Large desktop */
@media (min-width: 1440px) {
    .pd-solution-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* Mid desktop / laptop (1024–1439) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .pd-solution-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .pd-solution-card {
        padding: 20px;
        gap: 14px;
    }

    .pd-solution-card p {
        font-size: 15px;
    }
}

/* Small tablet / narrow laptop (769–1023) */
@media (min-width: 769px) and (max-width: 1023px) {
    .pd-solution-cards {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 40px;
    }

    .pd-solution-card {
        padding: 18px;
        gap: 12px;
        align-items: flex-start;
    }

    .pd-solution-icon-wrap {
        width: 40px;
        height: 40px;
    }

    .pd-solution-card p {
        font-size: 14px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .pd-solution-cards {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 32px;
    }

    .pd-solution-card {
        padding: 16px;
        gap: 12px;
        align-items: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .pd-solution-icon-wrap {
        width: 40px;
        height: 40px;
    }

    .pd-solution-card p {
        font-size: 14px;
    }
}

/* ── Focus Industries Section ── */
.pd-section--industries {
    background: #F7F9FC;
    /* Very light blue matching mockup */
    padding: 64px 0;
    color: #0D1B2E;
}

.pd-industries-header {
    margin-bottom: 32px;
}

.pd-industries-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    color: #4880FF;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.pd-industries-line {
    width: 32px;
    height: 1.5px;
    background: #4880FF;
}

.pd-industries-title {
    font-size: 32px;
    font-weight: 800;
    color: #0A1C4D;
    margin: 0;
    line-height: 1.2;
}

.pd-industries-toggle-wrap {
    margin-bottom: 32px;
}

.pd-industries-toggle {
    display: inline-flex;
    background: #E8F0FE;
    /* Light blue container */
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #D1E0FF;
}

.pd-ind-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #4A5568;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pd-ind-btn svg {
    color: #6B7A8D;
}

.pd-ind-btn img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    /* Recolour the icon artwork to solid black regardless of its source colours */
    filter: brightness(0) saturate(100%);
    transition: filter 0.2s ease;
}

.pd-ind-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.5);
}

.pd-ind-btn.active {
    background: #3B75F2;
    color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pd-ind-btn.active svg {
    color: #FFFFFF;
}

.pd-ind-btn.active img {
    filter: brightness(0) invert(1);
}

.pd-industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.pd-industry-card {
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(26, 110, 196, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.pd-industry-card-border {
    height: 4px;
    background: #3B75F2;
    width: 100%;
}

.pd-industry-card-content {
    padding: 24px;
    flex-grow: 1;
    min-width: 0;
}

.pd-industry-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #0A1C4D;
    margin: 0 0 8px 0;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.pd-industry-card-subtitle {
    font-size: 16px;
    font-weight: 500;
    color: #4A5568;
    margin: 0 0 12px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.pd-industry-card-desc {
    font-size: 14px;
    font-weight: 400;
    color: #6B7A8D;
    line-height: 1.5;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ── Industries grid — responsive ── */

/* Large desktop */
@media (min-width: 1440px) {
    .pd-industries-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

/* Mid desktop / laptop (1024–1439) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .pd-industries-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .pd-industry-card-content {
        padding: 20px;
    }
}

/* Small tablet / narrow laptop (769–1023) */
@media (min-width: 769px) and (max-width: 1023px) {
    .pd-industries-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .pd-industry-card-content {
        padding: 18px;
    }

    .pd-industry-card-title {
        font-size: 14px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .pd-industries-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pd-industry-card {
        width: 100%;
        box-sizing: border-box;
    }

    .pd-industry-card-content {
        padding: 16px;
    }

    .pd-industry-card-title {
        font-size: 14px;
    }
}

/* ============================================================
   AG ONE Safe only — Focus industries cards (Figma 15178:130999).
   Five cards: the first three share one row, the last two share the next.
   A 6-column track lets the top trio span 2 and the bottom pair span 3, so the
   trailing pair fills the row instead of sitting left-aligned at 1/3 width.
   Scoped to .pd-industries-grid--safe; every other product keeps the shared grid.
   These rules follow the shared responsive block above so the equal-specificity
   overrides land in the right order.
   ============================================================ */
.pd-section--industries .pd-industries-grid--safe {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
}

.pd-section--industries .pd-industries-grid--safe > .pd-industry-card:nth-child(-n + 3) {
    grid-column: span 2;
}

.pd-section--industries .pd-industries-grid--safe > .pd-industry-card:nth-child(n + 4) {
    grid-column: span 3;
}

/* Below the laptop breakpoint there isn't room for a 3-up row, so fall back to
   the shared tablet/mobile stacking. */
@media (max-width: 1023px) {
    .pd-section--industries .pd-industries-grid--safe {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-section--industries .pd-industries-grid--safe > .pd-industry-card:nth-child(-n + 3),
    .pd-section--industries .pd-industries-grid--safe > .pd-industry-card:nth-child(n + 4) {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .pd-section--industries .pd-industries-grid--safe {
        grid-template-columns: 1fr;
    }
}

/* ── Use Cases Section ── */
.pd-section--use-cases {
    background: #FFFFFF;
    padding: 64px 0;
    color: #0D1B2E;
}

.pd-usecases-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #4880FF;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.pd-usecases-line {
    width: 32px;
    height: 1.5px;
    background: #4880FF;
}

.pd-usecases-title {
    font-size: 32px;
    font-weight: 800;
    color: #0A1C4D;
    margin: 0;
    line-height: 1.2;
}

.pd-usecases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.pd-usecase-card {
    background: var(--gradient-white-p-lightest-180, linear-gradient(180deg, var(--Color-White-100, #FFF) 0%, var(--Color-Primary-Lightest, #F5FAFF) 100%));
    /* Slight off-white */
    border: 1px solid #E4EDF7;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.pd-usecase-icon-wrap {
    width: 44px;
    height: 44px;
    background: #E8F0FE;
    /* Light blue */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3B75F2;
    /* Blue */
    margin-bottom: 24px;
}

.pd-usecase-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #171D27;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.pd-usecase-card-desc {
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    color: #3C4C67;
    line-height: 1.4;
    font-weight: 400;
}

/* ============================================================
   AG ONE Safe only — Use cases cards (Figma 14450:213848).
   Five cards: the first two share one row, the last three share the next.
   A 6-column track lets the top pair span 3 and the bottom trio span 2, so both
   rows fill the content width instead of leaving the fifth card orphaned.
   Scoped to .pd-section--use-cases .pd-usecases-grid--safe, so the offer panel
   grid that reuses .pd-usecases-grid — and every other product — is untouched.
   ============================================================ */
.pd-section--use-cases .pd-usecases-grid--safe {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
}

.pd-section--use-cases .pd-usecases-grid--safe > .pd-usecase-card:nth-child(-n + 2) {
    grid-column: span 3;
}

.pd-section--use-cases .pd-usecases-grid--safe > .pd-usecase-card:nth-child(n + 3) {
    grid-column: span 2;
}

/* Below the laptop breakpoint there isn't room for a 3-up row of these cards, so
   fall back to the shared 2-column grid. */
@media (max-width: 1023px) {
    .pd-section--use-cases .pd-usecases-grid--safe {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-section--use-cases .pd-usecases-grid--safe > .pd-usecase-card:nth-child(-n + 2),
    .pd-section--use-cases .pd-usecases-grid--safe > .pd-usecase-card:nth-child(n + 3) {
        grid-column: auto;
    }
}

/* ── Journey Tab Section ── */
.pd-section--journey-tab {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5FAFF 100%);
    padding: 100px 0;
}

/* Figma frame is 1440 with 120px side inset → 1200px content.
   Default .pd-inner is max-width 1200 + padding 80px (=1040), which
   made the step content / Outcome box look narrower than Figma. */
.pd-section--journey-tab .pd-inner {
    max-width: 1440px;
}

/* Section header */
.pd-journey-header {
    max-width: 760px;
    margin: 0 0 48px;
}

.pd-journey-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
    color: #296DF5;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.pd-journey-line {
    width: 38px;
    height: 1px;
    background: #296DF5;
}

.pd-journey-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 39.06px;
    font-weight: 700;
    line-height: 140%;
    color: #052970;
    margin: 0;
}

.pd-journey-subtitle {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    color: #3C4C67;
    margin: 0;
}

/* Two-column layout: sticky stepper menu + scrolling sections
   Figma: Steps ~116px + 16px gap + Content ~1068px (Outcome fills 1020px).
   Nav is max-content so longer step labels still fit; content takes the rest. */
.pd-journey-layout {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.pd-journey-nav {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
}

.pd-journey-steplist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pd-journey-stepbtn {
    display: flex;
    gap: 14px;
    width: auto;
    max-width: 100%;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: 'Noto Sans', sans-serif;
    /* the global `button` reset centres flex children — the stepper needs them
       left-aligned, and stretched so the connector line spans the row */
    justify-content: flex-start;
    align-items: stretch;
}

.pd-journey-stepmarker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.pd-journey-stepnum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #C4DAFD;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}

.pd-journey-stepline {
    flex: 1 0 auto;
    width: 2px;
    min-height: 28px;
    background: #D8E7FE;
    margin: 4px 0;
    transition: background .18s ease;
}

.pd-journey-steptext {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 24px;
}

.pd-journey-stepchip {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #B25E09;
    background: #FDF1E3;
    border-radius: 999px;
    padding: 3px 9px;
}

.pd-journey-steplabel {
    font-size: 14px;
    font-weight: 600;
    line-height: 140%;
    color: #C4DAFD;
    transition: color .18s ease;
}

.pd-journey-stepdesc {
    font-size: 12px;
    font-weight: 400;
    line-height: 140%;
    color: #9FAEC6;
}

/* Progress fill: current step and all prior steps turn blue */
.pd-journey-stepitem--reached .pd-journey-stepnum {
    background: #296DF5;
}

.pd-journey-stepitem--reached .pd-journey-steplabel {
    color: #296DF5;
    font-weight: 600;
}

/* Current entry keeps the soft halo; connector fills only up to it (not beyond) */
.pd-journey-stepitem--active .pd-journey-stepnum {
    box-shadow: 0 0 8px 0 rgba(6, 107, 252, 0.5);
}

.pd-journey-stepitem--reached:not(.pd-journey-stepitem--active) .pd-journey-stepline {
    background: #296DF5;
}

.pd-journey-stepbtn:hover .pd-journey-steplabel {
    color: #2B63E8;
}

/* Right-hand sections — Figma Content frame uses 24px horizontal padding */
.pd-journey-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0 24px;
}

/* No card chrome in the design — sections run together, separated by a hairline rule */
.pd-journey-panel {
    /* offset so a scrolled-to section clears the sticky page header */
    scroll-margin-top: 96px;
    padding: 32px 0;
}

.pd-journey-panel:first-child {
    padding-top: 0;
}

.pd-journey-panel:not(:last-child) {
    border-bottom: 1px solid #E5E8F0;
}

.pd-journey-panel-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.pd-journey-panel-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 140%;
    color: #296DF5;
    margin: 0;
}

.pd-journey-tag {
    font-family: 'Noto Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #2B63E8;
    background: #EAF1FE;
    border-radius: 999px;
    padding: 4px 12px;
}

.pd-journey-lead,
.pd-journey-block-text {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    color: #3C4C67;
    margin: 0 0 8px;
}

.pd-journey-block {
    margin-top: 24px;
}

/* Block taglines ("Starts with visibility.") are brand blue in the design */
.pd-journey-block-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    color: #296DF5;
    margin: 0 0 4px;
}

/* "Key Features:" sits above its chips and is styled like the other small labels rather
   than the blue hook line. */
.pd-journey-block:has(.pd-journey-chips) .pd-journey-block-title {
    font-size: 14px;
    font-weight: 600;
    color: #171D27;
}

/* Block SubBody — disc bullets (Figma list-disc / ms-21px) */
.pd-journey-subpoints {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pd-journey-subpoint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    /* Figma: list-disc + ms-21px → ~21px to text start */
    padding-left: 9px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    color: #3C4C67;
}

.pd-journey-subpoint-dot {
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    margin-top: 8px;
    border-radius: 50%;
    background: #3C4C67;
}

/* The groups' introductory heading — dark navy in the design, unlike the blue block taglines */
.pd-journey-groupsintro-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    color: #1F2A44;
    margin: 0 0 6px;
}

/* Framework / pillar groups with their check-point lists — a plain stacked list, no cards */
.pd-journey-groups {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

/* The intro heading and the list it introduces are a single group in the design,
   so they stay tighter than the 24px separating top-level groups. */
.pd-journey-block:has(.pd-journey-groupsintro-title) + .pd-journey-groups {
    margin-top: 16px;
}

.pd-journey-group-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 140%;
    color: #3C4C67;
    margin: 0 0 8px;
}

.pd-journey-group-text {
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 165%;
    color: #3C4C67;
    margin: 0 0 10px;
}

.pd-journey-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pd-journey-point {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    color: #171D27;
}

.pd-journey-point-icon {
    flex-shrink: 0;
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: block;
    object-fit: contain;
    overflow: hidden;
}

/* Default check mark when the sheet supplies no per-point icon URL */
.pd-journey-point-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    object-fit: contain;
    display: block;
}

/* "Assessed today / planned expansion" — plain label + value rows, no cards */
.pd-journey-domains {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
}

.pd-journey-domain {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.pd-journey-domain-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.pd-journey-domain-title {
    font-weight: 600;
    color: #171D27;
}

.pd-journey-domain-text {
    color: #3C4C67;
}

/* Key-feature chips */
.pd-journey-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.pd-journey-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    color: #007388;
    background: #EBFDFE;
    border: 1px solid #08E1ED;
    border-radius: 999px;
    padding: 6px 16px;
}

/* Outcome + licensing alert — Figma "Outcome Info" is 1020×98, p-16, full content width */
.pd-journey-outcome {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 24px;
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(170deg, #EBF3FF 16%, #EBFDFE 57%, #F8FED8 111%);
    border: 1px solid #C4DAFD;
}

/* Figma Line/Increase: 24×24 frame, overflow-clip; asset is wider than tall */
.pd-journey-outcome-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
    overflow: hidden;
}

.pd-journey-outcome-text {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    line-height: 140%;
    color: #283243;
    margin: 0;
}

/* "Outcome:" label sits on its own line above the sentence, in brand blue */
.pd-journey-outcome-text strong {
    display: block;
    color: #296DF5;
    font-weight: 600;
    margin: 0 0 4px;
}

.pd-journey-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #F5FAFF;
    border: 1px solid #74A9FB;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 140%;
    color: #296DF5;
}

.pd-journey-alert-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .pd-section--journey-tab .pd-inner {
        padding: 0 40px;
    }

    .pd-journey-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .pd-journey-nav {
        position: static;
        max-height: none;
    }

    .pd-journey-content {
        padding: 0;
    }

    .pd-journey-steplist {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .pd-journey-stepitem {
        flex: 0 0 auto;
    }

    .pd-journey-stepline {
        display: none;
    }

    .pd-journey-steptext {
        padding-bottom: 0;
    }
}

.pd-journey-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    padding: 64px 32px;
    border: 1px solid #E3ECFB;
    border-radius: 20px;
    background: linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 100%);
}

.pd-journey-soon-badge {
    display: inline-flex;
    align-items: center;
    font-family: 'Noto Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2B63E8;
    background: #EAF1FE;
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 20px;
}

.pd-journey-soon-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 140%;
    color: #052970;
    margin: 0 0 12px;
}

.pd-journey-soon-text {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
    color: #3C4C67;
    margin: 0;
}

@media (max-width: 640px) {
    .pd-section--journey-tab {
        padding: 48px 0 64px;
    }

    .pd-section--journey-tab .pd-inner {
        padding: 0 20px;
    }

    .pd-journey-soon {
        padding: 44px 20px;
    }

    .pd-journey-soon-title {
        font-size: 22px;
    }

    .pd-journey-title {
        font-size: 24px;
    }

    .pd-journey-panel {
        padding: 24px 20px;
    }

    .pd-journey-panel-title {
        font-size: 20px;
    }
}

/* ── Benefits Tab Section ── */
.pd-section--benefits-tab {
    background: #FFFFFF;
    padding: 0;
}

.pd-section--benefits-tab .pd-inner {
    max-width: none;
    padding: 0;
}

/* Program-offer Benefits tab content sits directly in .pd-inner (no full-bleed
   coloured sub-sections like the product Benefits tab), so re-apply the standard
   centred, constrained inner width instead of the full-width override above. */
.pd-section--benefits-tab .pd-inner.pd-offer-benefits {
    max-width: 1200px;
    padding: 0 80px;
    margin: 0 auto;
}

/* Program-offer Benefits tab headers — center title to match subtitle */
.pd-section--benefits-tab .pd-inner.pd-offer-benefits .pd-benefits-tab-header.pd-offer-center {
    align-items: center;
    text-align: center;
}

.pd-section--benefits-tab .pd-inner.pd-offer-benefits .pd-benefits-tab-header.pd-offer-center .pd-benefits-tab-title {
    text-align: center;
}

.pd-benefits-content-inner {
    width: 1200px;
    max-width: 1200px;
    margin: 0 auto;
}

.pd-benefits-ai-section {
    position: relative;
    padding: 80px 120px;
    background: var(--gradient-white-p-lightest-180, linear-gradient(180deg, var(--Color-White-100, #FFF) 0%, var(--Color-Primary-Lightest, #F5FAFF) 100%));
    box-sizing: border-box;
}

.pd-benefits-ai-section .pd-benefits-content-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.pd-benefits-automation-section {
    padding: 60px 120px 80px;
    background: #FFFFFF;
    box-sizing: border-box;
}

.pd-benefits-automation-section .pd-benefits-content-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.pd-benefits-plan-section {
    padding: 80px 120px 100px;
    background: #FFFFFF;
    box-sizing: border-box;
}

.pd-benefits-plan-section .pd-benefits-content-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.pd-benefits-tab-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    margin: 0 0 32px;
}

.pd-benefits-tab-header .pd-benefits-tab-title,
.pd-benefits-tab-header .pd-section-sub {
    width: 100%;
    text-align: left;
}

.pd-benefits-tab-header .pd-section-sub {
    margin: 0;
}

.pd-benefits-tab-header.pd-offer-center {
    text-align: left;
}

.pd-benefits-tab-header.pd-offer-center .pd-benefits-tab-eyebrow {
    justify-content: flex-start;
}

.pd-benefits-tab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #296DF5;
    text-transform: uppercase;
}

.pd-benefits-tab-line {
    width: 38px;
    height: 1px;
    background: #296DF5;
}

.pd-benefits-tab-title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    color: #052970;
}

.other-benefits-tab-title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    color: #296DF5;
}


.pd-benefits-tab-pill-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.pd-benefits-main-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 999px;
    border: 2px solid #9CC2FC;
    background: linear-gradient(180deg, #74A9FB 0%, #4D91FA 100%);
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 4px 14px rgba(41, 109, 245, 0.18);
}

.pd-benefits-main-pill svg {
    width: 20px;
    height: 20px;
}

.pd-benefits-main-pill img {
    width: 20px;
    height: 20px;
    display: block;
}

.pd-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 384px));
    justify-content: space-between;
    gap: 24px;
}

.pd-benefit-card {
    display: flex;
    flex-direction: column;
    min-height: 332px;
    padding: 32px;
    border: 1px solid #C4DAFD;
    border-radius: 12px;
    background: #FFFFFF;
}

.pd-benefit-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.pd-benefit-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: linear-gradient(180deg, #4D91FA 0%, #296DF5 100%);
}

.pd-benefit-icon svg,
.pd-benefit-icon img {
    width: 24px;
    height: 24px;
}

.pd-benefit-coming-soon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 4px 16px;
    border-radius: 999px;
    background: #0AA956;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.pd-benefit-title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #171D27;
}

.pd-benefit-desc {
    margin: 0;
    flex-grow: 1;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #3C4C67;
}

.pd-benefit-bottom {
    margin-top: 16px;
}

.pd-benefit-category-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
    border: 1px solid #9CC2FC;
    border-radius: 999px;
    background: #EBF3FF;
    color: #0A50DC;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* ── Benefits AI section — responsive ── */

/* Large desktop */
@media (min-width: 1440px) {
    .pd-benefits-ai-section {
        padding: 80px 120px;
    }

    .pd-benefits-ai-section .pd-benefits-grid {
        grid-template-columns: repeat(3, minmax(0, 384px));
        justify-content: space-between;
        gap: 24px;
    }
}

/* Mid desktop / laptop (1024–1439) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .pd-benefits-ai-section {
        padding: 64px 48px;
    }

    .pd-benefits-ai-section .pd-benefits-tab-header {
        margin-bottom: 24px;
    }

    .pd-benefits-ai-section .pd-benefits-tab-title {
        font-size: 28px;
    }

    .pd-benefits-ai-section .pd-benefits-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
        gap: 16px;
    }

    .pd-benefits-ai-section .pd-benefit-card {
        min-height: 0;
        padding: 24px;
    }

    .pd-benefits-ai-section .pd-benefits-main-pill {
        font-size: 18px;
        padding: 10px 20px;
    }
}

/* Small tablet / narrow laptop (769–1023) */
@media (min-width: 769px) and (max-width: 1023px) {
    .pd-benefits-ai-section {
        padding: 48px 32px;
    }

    .pd-benefits-ai-section .pd-benefits-tab-header {
        margin-bottom: 16px;
    }

    .pd-benefits-ai-section .pd-benefits-tab-title {
        font-size: 26px;
    }

    .pd-benefits-ai-section .pd-benefits-tab-pill-wrap {
        margin-bottom: 24px;
    }

    .pd-benefits-ai-section .pd-benefits-main-pill {
        font-size: 16px;
        padding: 10px 18px;
        gap: 8px;
        text-align: center;
        white-space: normal;
    }

    .pd-benefits-ai-section .pd-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        gap: 16px;
    }

    .pd-benefits-ai-section .pd-benefit-card {
        min-height: 0;
        padding: 24px;
        min-width: 0;
    }

    .pd-benefits-ai-section .pd-benefit-title,
    .pd-benefits-ai-section .pd-benefit-desc {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .pd-benefits-ai-section {
        padding: 40px 16px;
    }

    .pd-benefits-ai-section .pd-benefits-tab-header {
        margin: 0 0 16px;
    }

    .pd-benefits-ai-section .pd-benefits-tab-title {
        font-size: 22px;
    }

    .pd-benefits-ai-section .pd-benefits-tab-pill-wrap {
        margin-bottom: 20px;
    }

    .pd-benefits-ai-section .pd-benefits-main-pill {
        font-size: 14px;
        padding: 8px 14px;
        gap: 8px;
        text-align: center;
        white-space: normal;
        max-width: 100%;
        box-sizing: border-box;
    }

    .pd-benefits-ai-section .pd-benefits-grid {
        grid-template-columns: 1fr;
        justify-content: stretch;
        gap: 12px;
    }

    .pd-benefits-ai-section .pd-benefit-card {
        min-height: 0;
        padding: 20px;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .pd-benefits-ai-section .pd-benefit-icon {
        width: 40px;
        height: 40px;
    }

    .pd-benefits-ai-section .pd-benefit-coming-soon {
        font-size: 12px;
        padding: 4px 12px;
        min-width: 0;
    }

    .pd-benefits-ai-section .pd-benefit-title,
    .pd-benefits-ai-section .pd-benefit-desc,
    .pd-benefits-ai-section .pd-benefit-category-pill {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* ============================================================
   AG ONE Safe only — Benefits tab cards (Figma 15088:130842).
   Five cards: the first two share one row, the last three share the next.
   A 6-column track lets the top pair span 3 and the bottom trio span 2, so the
   bottom cards keep the shared 384px card width at the 1200px content width.
   Scoped to .pd-benefits-grid--safe; every other product keeps the 3-up grid.
   These rules follow the shared responsive block above so the equal-specificity
   overrides land in the right order.
   ============================================================ */
.pd-benefits-ai-section .pd-benefits-grid--safe {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    justify-content: stretch;
    gap: 24px;
}

/* The shared card reserves 332px of height for the narrow 3-up column. The Safe
   rows are wider, so the same copy wraps into far fewer lines and that reserve
   shows up as dead space under the text. Let each row size to its tallest card;
   grid still stretches the others in the row to match. */
.pd-benefits-ai-section .pd-benefits-grid--safe > .pd-benefit-card {
    min-height: 0;
}

.pd-benefits-ai-section .pd-benefits-grid--safe > .pd-benefit-card:nth-child(-n + 2) {
    grid-column: span 3;
}

.pd-benefits-ai-section .pd-benefits-grid--safe > .pd-benefit-card:nth-child(n + 3) {
    grid-column: span 2;
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .pd-benefits-ai-section .pd-benefits-grid--safe {
        gap: 16px;
    }
}

/* Below the laptop breakpoint there isn't room for a 3-up row, so fall back to
   the shared tablet/mobile stacking. */
@media (max-width: 1023px) {
    .pd-benefits-ai-section .pd-benefits-grid--safe {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .pd-benefits-ai-section .pd-benefits-grid--safe > .pd-benefit-card:nth-child(-n + 2),
    .pd-benefits-ai-section .pd-benefits-grid--safe > .pd-benefit-card:nth-child(n + 3) {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .pd-benefits-ai-section .pd-benefits-grid--safe {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ── Automation Section ── */
.pd-automation-pill-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.pd-automation-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 999px;
    border: 2px solid #84F4FB;
    background: linear-gradient(180deg, #08E1ED 0%, #06AFB8 100%);
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 4px 14px rgba(6, 175, 184, 0.22);
}

.pd-automation-pill svg {
    width: 20px;
    height: 20px;
}

.pd-automation-pill img {
    width: 20px;
    height: 20px;
    display: block;
}

.pd-automation-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
}

.pd-automation-card {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 164px;
    padding: 32px;
    border-radius: 12px;
    border: 1px solid #84F4FB;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5FEFF 100%);
}

.pd-automation-grid--5 .pd-automation-card:nth-child(n+3) {
    grid-column: span 2;
}

.pd-automation-card-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.pd-automation-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: linear-gradient(180deg, #06AFB8 0%, #008FA0 100%);
}

.pd-automation-icon svg,
.pd-automation-icon img {
    width: 24px;
    height: 24px;
}

.pd-automation-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #171D27;
}

.pd-automation-desc {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #3C4C67;
}

/* ── Product Plan Section ── */
.pd-plan-section {
    padding: 0;
}

.pd-plan-header {
    text-align: left;
    margin-bottom: 40px;
}

.pd-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 282px));
    justify-content: space-between;
    gap: 24px;
}

.pd-plan-card {
    display: flex;
    flex-direction: column;
    min-height: 367px;
    border: 1px solid var(--plan-color, #9CC2FC);
    border-radius: 20px;
    background: #FFFFFF;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pd-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}


.pd-plan-card-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--plan-color, #9CC2FC);
    background: var(--plan-head-bg, #F5FAFF);
    height: 103px;
}

.pd-plan-card-title {
    margin: 0;
    color: var(--plan-title-color, #296DF5);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

.pd-plan-card-subtitle {
    margin: 2px 0 0;
    color: var(--plan-subtitle-color, #296DF5);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    width: 236px;
}

.pd-plan-card-price {
    margin: 4px 0 0;
    color: var(--plan-price-color, #052970);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.pd-plan-card-body {
    flex: 1;
    padding: 16px 24px;
    background: #FFFFFF;
}

.pd-plan-feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.pd-plan-feature:last-child {
    margin-bottom: 0;
}

.pd-plan-feature-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #171D27;
}

.pd-plan-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #171D27;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── Benefits automation + plan sections — responsive ── */

/* Large desktop */
@media (min-width: 1440px) {
    .pd-benefits-automation-section {
        padding: 60px 120px 80px;
    }

    .pd-benefits-plan-section {
        padding: 80px 120px 100px;
    }

    .pd-benefits-automation-section .pd-automation-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 24px;
    }

    .pd-benefits-plan-section .pd-plan-grid {
        grid-template-columns: repeat(4, minmax(0, 282px));
        justify-content: space-between;
        gap: 24px;
    }
}

/* Mid desktop / laptop (1024–1439) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .pd-benefits-automation-section {
        padding: 48px 48px 64px;
    }

    .pd-benefits-plan-section {
        padding: 64px 48px 80px;
    }

    .pd-benefits-automation-section .pd-automation-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 16px;
    }

    .pd-benefits-automation-section .pd-automation-card {
        padding: 24px;
        min-height: 0;
    }

    .pd-benefits-automation-section .pd-automation-pill {
        font-size: 18px;
        padding: 10px 20px;
    }

    .pd-benefits-plan-section .pd-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        gap: 16px;
    }

    .pd-benefits-plan-section .pd-plan-card {
        min-height: 0;
        min-width: 0;
    }

    .pd-benefits-plan-section .pd-plan-card-subtitle {
        width: auto;
        max-width: 100%;
    }

    .pd-benefits-plan-section .pd-plan-header {
        margin-bottom: 32px;
    }

    .pd-benefits-plan-section .pd-benefits-tab-title {
        font-size: 28px;
    }
}

/* Small tablet / narrow laptop (769–1023) */
@media (min-width: 769px) and (max-width: 1023px) {
    .pd-benefits-automation-section {
        padding: 40px 32px 56px;
    }

    .pd-benefits-plan-section {
        padding: 48px 32px 64px;
    }

    .pd-benefits-automation-section .pd-automation-pill-wrap {
        margin-bottom: 24px;
    }

    .pd-benefits-automation-section .pd-automation-pill {
        font-size: 16px;
        padding: 10px 18px;
        gap: 8px;
        text-align: center;
        white-space: normal;
    }

    .pd-benefits-automation-section .pd-automation-grid,
    .pd-benefits-automation-section .pd-automation-grid--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .pd-benefits-automation-section .pd-automation-card,
    .pd-benefits-automation-section .pd-automation-grid--5 .pd-automation-card:nth-child(n+3) {
        grid-column: auto;
        padding: 20px;
        min-height: 0;
        min-width: 0;
    }

    .pd-benefits-automation-section .pd-automation-title {
        font-size: 18px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .pd-benefits-automation-section .pd-automation-desc {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .pd-benefits-plan-section .pd-plan-header {
        margin: 16px 0 28px;
    }

    .pd-benefits-plan-section .pd-benefits-tab-title {
        font-size: 26px;
    }

    .pd-benefits-plan-section .pd-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        gap: 14px;
    }

    .pd-benefits-plan-section .pd-plan-card {
        min-height: 0;
        min-width: 0;
    }

    .pd-benefits-plan-section .pd-plan-card-header {
        height: auto;
        min-height: 0;
        padding: 14px 18px;
    }

    .pd-benefits-plan-section .pd-plan-card-subtitle {
        width: auto;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .pd-benefits-plan-section .pd-plan-card-body {
        padding: 14px 18px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .pd-benefits-automation-section {
        padding: 32px 16px 40px;
    }

    .pd-benefits-plan-section {
        padding: 40px 16px 48px;
    }

    .pd-benefits-automation-section .pd-automation-pill-wrap {
        margin-bottom: 20px;
    }

    .pd-benefits-automation-section .pd-automation-pill {
        font-size: 14px;
        padding: 8px 14px;
        gap: 8px;
        text-align: center;
        white-space: normal;
        max-width: 100%;
        box-sizing: border-box;
    }

    .pd-benefits-automation-section .pd-automation-grid,
    .pd-benefits-automation-section .pd-automation-grid--5 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pd-benefits-automation-section .pd-automation-card,
    .pd-benefits-automation-section .pd-automation-grid--5 .pd-automation-card:nth-child(n+3) {
        grid-column: auto;
        width: 100%;
        padding: 20px;
        min-height: 0;
        min-width: 0;
        box-sizing: border-box;
    }

    .pd-benefits-automation-section .pd-automation-icon {
        width: 40px;
        height: 40px;
    }

    .pd-benefits-automation-section .pd-automation-title {
        font-size: 16px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .pd-benefits-automation-section .pd-automation-desc {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .pd-benefits-plan-section .pd-plan-header {
        margin: 0 0 20px;
    }

    .pd-benefits-plan-section .pd-benefits-tab-title {
        font-size: 22px;
    }

    .pd-benefits-plan-section .pd-plan-grid {
        grid-template-columns: 1fr;
        justify-content: stretch;
        gap: 12px;
    }

    .pd-benefits-plan-section .pd-plan-card {
        width: 100%;
        min-height: 0;
        min-width: 0;
        box-sizing: border-box;
    }

    .pd-benefits-plan-section .pd-plan-card-header {
        height: auto;
        min-height: 0;
        padding: 14px 16px;
    }

    .pd-benefits-plan-section .pd-plan-card-title {
        font-size: 18px;
    }

    .pd-benefits-plan-section .pd-plan-card-subtitle {
        width: auto;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .pd-benefits-plan-section .pd-plan-card-body {
        padding: 14px 16px;
    }

    .pd-benefits-plan-section .pd-plan-feature-text {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* ── Features tab: comparison matrix + terms (Figma-matched) ── */
.pd-features-section {
    padding: 80px 120px 100px;
}

.pd-features-header {
    margin-bottom: 40px;
}

/* Feature comparison matrix */
.pd-fmx {
    border: none;
    border-radius: 0;
    overflow: visible;
    background: #fff;
}

.pd-fmx-row {
    display: grid;
    grid-template-columns: 28% repeat(var(--cols, 4), 18%);
}

.pd-fmx-head {
    border-bottom: 1px solid #E2E8F0;
}

.pd-fmx-feature {
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.pd-fmx-plan {
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    text-align: left;
    border-left: none;
}

.pd-fmx-plan-name {
    font-weight: 700;
    font-size: 18px;
}

.pd-fmx-plan-sub {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.pd-fmx-plan--freemium,
.pd-fmx-plan--starter {
    background: #F4F6F8;
    border-bottom: 2px solid #BAC8D8;
}

.pd-fmx-plan--freemium .pd-fmx-plan-name,
.pd-fmx-plan--starter .pd-fmx-plan-name {
    color: #475569;
}

.pd-fmx-plan--freemium .pd-fmx-plan-sub,
.pd-fmx-plan--starter .pd-fmx-plan-sub {
    color: #64748B;
}

.pd-fmx-plan--lite {
    background: #FFF5EE;
    border-bottom: 2px solid #E25C22;
}

.pd-fmx-plan--lite .pd-fmx-plan-name {
    color: #E25C22;
}

.pd-fmx-plan--lite .pd-fmx-plan-sub {
    color: #E25C22;
}

.pd-fmx-plan--standard {
    background: #F0FDFB;
    border-bottom: 2px solid #0D9488;
}

.pd-fmx-plan--standard .pd-fmx-plan-name {
    color: #0D9488;
}

.pd-fmx-plan--standard .pd-fmx-plan-sub {
    color: #0D9488;
}

.pd-fmx-plan--enterprise {
    background: #EFF6FF;
    border-bottom: 2px solid #2563EB;
}

.pd-fmx-plan--enterprise .pd-fmx-plan-name {
    color: #2563EB;
}

.pd-fmx-plan--enterprise .pd-fmx-plan-sub {
    color: #2563EB;
}

.pd-fmx-module {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 24px 0 12px 0;
    background: transparent;
    color: #2563EB;
    font-weight: 700;
    font-size: 20px;
    cursor: pointer;
    border-bottom: 1px solid #E2E8F0;
    user-select: none;
}

.pd-fmx-module:hover {
    background: transparent;
    opacity: 0.85;
}

.pd-fmx-chevron {
    transition: transform .2s ease;
    flex-shrink: 0;
    color: #2563EB;
}

.pd-fmx-module--collapsed .pd-fmx-chevron {
    transform: rotate(180deg);
}

.pd-fmx-feat {
    border-bottom: 1px solid #E2E8F0;
}

.pd-fmx-feature-name {
    font-weight: 700;
    color: #1E293B;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.pd-fmx-feature-name--soon {
    color: #10B981;
}

.pd-fmx-feature-sub {
    font-size: 13px;
    color: #475569;
}

.pd-fmx-feature-sub--list {
    padding-left: 8px;
    list-style: none;
}

.pd-fmx-feature-sub--list li {
    position: relative;
    padding-left: 12px;
    margin-top: 3px;
    line-height: 1.5;
}

.pd-fmx-feature-sub--list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #94A3B8;
}

.pd-fmx-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: none;
    padding: 16px 10px;
}

.pd-fmx-soon {
    font-size: 14px;
    font-weight: 600;
    color: #10B981;
    background: transparent;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
}

.pd-matrix-empty {
    color: #64748B;
    padding: 24px 0;
}

/* Terms & Conditions */
.pd-tc {
    margin-top: 56px;
}

.pd-tc-title {
    font-size: 20px;
    font-weight: 700;
    color: #171D27;
    margin-bottom: 20px;
}

.pd-tc-table {
    border: none;
    border-radius: 0;
    overflow: visible;
}

.pd-tc-row {
    display: grid;
    grid-template-columns: 28% repeat(var(--cols, 4), 18%);
    border-bottom: 1px solid #D6DBE6;
}

.pd-tc-row:last-child {
    border-bottom: none;
}

.pd-tc-head {
    border-bottom: 1px solid #D6DBE6;
}

.pd-tc-label {
    padding: 16px 0;
    font-weight: 500;
    color: #171D27;
    font-size: 12px;
}

.pd-tc-cell {
    padding: 16px 10px;
    border-left: none;
}

.pd-tc-head .pd-tc-cell {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
}

.pd-tc-plan {
    font-weight: 700;
    font-size: 18px;
}

.pd-tc-head .pd-tc-cell.t-freemium,
.pd-tc-head .pd-tc-cell.t-starter {
    background: #F4F6F8;
    border-bottom: 2px solid #BAC8D8;
}

.pd-tc-head .pd-tc-cell.t-freemium .pd-tc-plan,
.pd-tc-head .pd-tc-cell.t-starter .pd-tc-plan {
    color: #475569;
}

.pd-tc-head .pd-tc-cell.t-lite {
    background: #FFF5EE;
    border-bottom: 2px solid #E25C22;
}

.pd-tc-head .pd-tc-cell.t-lite .pd-tc-plan {
    color: #E25C22;
}

.pd-tc-head .pd-tc-cell.t-standard {
    background: #F0FDFB;
    border-bottom: 2px solid #0D9488;
}

.pd-tc-head .pd-tc-cell.t-standard .pd-tc-plan {
    color: #0D9488;
}

.pd-tc-head .pd-tc-cell.t-enterprise {
    background: #EFF6FF;
    border-bottom: 1px solid #2563EB;
    color: #296DF5;
}
.pd-tc-head .pd-tc-cell.t-essential {
    background: #FFF6F0;
    border-bottom: 1px solid #FFAB5F;
    color: #F24A1C;
}
.pd-tc-head .pd-tc-cell.t-professional {
    background: #F5FEFF;
    border-bottom: 1px solid #08E1ED;
    color: #06AFB8;
}



.pd-tc-head .pd-tc-cell.t-enterprise .pd-tc-plan {
    color: #2563EB;
}

.pd-tc-body {
    white-space: pre-line;
    font-size: 12px;
    font-weight: 500;
    color: #3C4C67;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .pd-features-section {
        padding: 48px 20px 64px;
    }

    .pd-fmx-row,
    .pd-tc-row {
        grid-template-columns: 22% repeat(var(--cols, 4), 1fr);
    }

    .pd-tc-plan {
        font-size: 14px;
    }

    .pd-fmx-plan-sub {
        display: none;
    }


    .pd-fmx-plan {
        padding: 12px 6px;
    }

    .pd-fmx-plan-name {
        font-size: 14px;
    }
}

/* ============================================================
   Pricing tab ΓÇö selectable plan-tier cards + payment calc
   Figma nodes: 7136:211438 (cards) ┬╖ 7045:107097 (banner)
   ============================================================ */
.pd-tiers {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
    width: 100%;
}

.pd-tiers--error {
    scroll-margin-top: 120px;
}

.pd-tier-validation-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FEF2F2;
    border: 1px solid #F5C2C2;
    color: #C0392B;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
}

.pd-tier-validation-error svg {
    flex-shrink: 0;
}

.pd-tier-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.pd-tier-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #FFFFFF;
    border: 1px solid var(--tier-accent, #E1E8F2);
    border-radius: 20px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pd-tier-card:hover {
    border-color: var(--tier-accent, #9CC2FC);
    box-shadow: 0 6px 18px rgba(41, 109, 245, 0.10);
}

.pd-tier-card--selected {
    border-color: var(--tier-accent, #296DF5);
    box-shadow: 0 8px 24px rgba(41, 109, 245, 0.18);
    background: linear-gradient(180deg, #F5F9FF 0%, #FFFFFF 60%);
}

.pd-tier-card--disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

.pd-tier-card-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 24px 0;
    background: color-mix(in srgb, var(--tier-accent, #B5C1D3) 12%, #FFFFFF);
    border-bottom: 1px solid color-mix(in srgb, var(--tier-accent, #B5C1D3) 35%, #FFFFFF);
}

.pd-tier-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--tier-accent, #0B1B3A);
    line-height: 1.4;
}

.pd-tier-sub {
    font-size: 14px;
    font-weight: 500;
    color: var(--tier-accent, #6B7A93);
    line-height: 1.4;
}

.pd-tier-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 64px;
    padding: 0 24px 16px;
    background: color-mix(in srgb, var(--tier-accent, #B5C1D3) 12%, #FFFFFF);
}

.pd-tier-base {
    font-size: 25px;
    font-weight: 700;
    color: #8C9EBB;
    text-decoration: line-through;
    line-height: 1.4;
}

.pd-tier-final-row {
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-wrap: wrap;
}

.pd-tier-final {
    font-size: clamp(28px, 2.5vw, 39.06px);
    font-weight: 700;
    color: var(--tier-price-color, #0B1B3A);
    line-height: 1.24;
}

.pd-tier-unit {
    font-size: 16px;
    font-weight: 600;
    color: var(--tier-price-color, #6B7A93);
    line-height: 1.4;
}

.pd-tier-equiv {
    font-size: 12px;
    color: var(--tier-price-color, #8C9EBB);
    line-height: 1.4;
}

.pd-tier-ai-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(41, 109, 245, .10) 0%, rgba(77, 145, 250, .10) 100%);
    border: 1px solid #DCE8FF;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #296DF5;
}

.pd-tier-ai-banner img {
    width: 16px;
    height: 16px;
}

.pd-tier-features {
    list-style: none;
    margin: 0;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.pd-tier-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #171D27;
    line-height: 1.4;
    font-weight: 500;
}

.pd-tier-features li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: #1FAA59;
}

.pd-tier-qty {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px auto;
    background: transparent;
    border: none;
    padding: 0;
}

.pd-tier-qty-label {
    font-size: 12px;
    font-weight: 600;
    color: #6B7A93;
}

.pd-tier-qty-min {
    font-size: 11px;
    color: #98A6BF;
}

.pd-qty {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 120px;
    height: 38px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    padding: 2px 8px;
    box-sizing: border-box;
}

.pd-qty-btn {
    border: none !important;
    background: transparent !important;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    user-select: none;
    outline: none;
}

.pd-qty-btn--minus {
    color: #94A3B8;
}

.pd-qty-btn--minus:disabled {
    color: #CBD5E1;
    cursor: not-allowed;
}

.pd-qty-btn--plus {
    color: #3B82F6;
}

input.pd-qty-input {
    width: 48px;
    height: 100%;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    text-align: center;
    font-family: "Inter", "Noto Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1E293B;
    margin: 0;
    padding: 0;
    -moz-appearance: textfield;
}

input.pd-qty-input::-webkit-outer-spin-button,
input.pd-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pd-tier-choose {
    margin: auto 24px 16px;
    width: calc(100% - 48px);
    padding: 10px 16px;
    border-radius: 999px;
    border: 1.5px solid #296DF5;
    background: var(--gradient-p-600-p-400135, linear-gradient(135deg, var(--Color-Primary-600, #0A50DC) 0%, var(--Color-Primary-400, #4D91FA) 100%));
    color: #FFF;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.pd-tier-choose:hover {
    background: var(--gradient-p-400-p-50090, linear-gradient(90deg, var(--Color-Primary-400, #4D91FA) 0%, var(--Color-Primary-500, #296DF5) 100%));
}

.pd-tier-choose--selected {
    background: linear-gradient(135deg, #0A50DC 0%, #4D91FA 100%);
    border-color: transparent;
    color: #FFFFFF;
}

.pd-pricing-section .pd-pkg-included-card,
.pd-pricing-section .pd-trial-card {
    margin-left: 0;
    margin-right: 0;
}

.pd-pricing-section .pd-promo-card {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1100px) {
    .pd-tier-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .pd-billing-header {
        flex-wrap: wrap;
        gap: 16px;
        padding: 32px 0 24px;
    }

    .pd-billing-switch-wrap {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .pd-billing-header-spacer {
        display: none;
    }

    .pd-pricing-section .pd-pricing-card {
        padding: 0;
    }
}

@media (max-width: 620px) {
    .pd-tier-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pd-billing-label {
        font-size: 16px;
    }

    .pd-billing-switch-wrap {
        gap: 12px;
    }
}

/* Pricing tab ΓÇö promo code card */
.pd-promo-card {
    background: #FFFFFF;
    border: 1px solid #E1E8F2;
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pd-promo-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pd-promo-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0B1B3A;
}

.pd-promo-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.pd-promo-input {
    flex: 1;
    border: 1px solid #CBD7E8;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    color: #0B1B3A;
}

.pd-promo-input:focus {
    outline: none;
    border-color: #296DF5;
}

.pd-promo-input--error {
    border-color: #E5736F;
}

.pd-promo-input:disabled {
    background: #F5F8FD;
    color: #6B7A93;
}

.pd-promo-btn {
    padding: 0 28px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #0A50DC 0%, #4D91FA 100%);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
}

.pd-promo-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.pd-promo-btn--clear {
    background: #FFFFFF;
    color: #296DF5;
    border: 1.5px solid #296DF5;
}

.pd-promo-msg {
    font-size: 13px;
    font-weight: 500;
}

.pd-promo-msg--error {
    color: #C0392B;
}

.pd-promo-msg--ok {
    color: #1FAA59;
}

.colour-text-lightgreen {
    color: #7BE0A6;
}

/* Program-offer discount badge (pricing tab) */
.pd-program-offer-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ECFDF3;
    border: 1px solid #ABEFC6;
    color: #067647;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.pd-program-offer-badge svg {
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   PROGRAM OFFER — distinct detail UI (scoped to .pd-offer-*; products unaffected)
   ════════════════════════════════════════════════════════════════════════ */

/* Hero: blue gradient banner with an overlapping white card */
.pd-offer-hero {
    margin-top: 0;
}

.pd-offer-hero-banner {
    background: linear-gradient(135deg, #0A50DC 0%, #4D91FA 100%);
    border-bottom: 8px solid #84F4FB;
    padding: 20px 80px 120px;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    box-sizing: border-box;
}

.pd-offer-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--Color-Cyan-400, #08C9D4);
    color: #fff;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}

.pd-offer-hero-heading {
    font-family: 'Noto Sans', sans-serif;
    font-size: 39.06px;
    line-height: 140%;
    font-weight: 700;
    max-width: 1280px;
    margin: 0 auto;
    color: #FFFFFF;
}

.pd-offer-hero-desc {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    line-height: 140%;
    color: #EBF3FF;
    font-weight: 400;
    max-width: 720px;
    margin: 0 auto;
}

.pd-offer-hero-card {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 0px 20px 5px rgba(69, 74, 146, 0.2);
    margin: -64px 40px 0;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    box-sizing: border-box;
}

.pd-offer-hero-card-top {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    min-width: 0;
}

.pd-offer-hero-card-id {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    min-width: 0;
    flex: 1 1 0;
}

.pd-offer-hero-id-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pd-offer-hero-logo {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    flex-shrink: 0;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1), 0px 2px 8px 2px rgba(142, 146, 152, 0.3);
    padding: 4px;
    box-sizing: border-box;
}

.pd-offer-hero-logo img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    border-radius: 4px;
}

.pd-offer-hero-name {
    font-family: 'Noto Sans', sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 140%;
    color: #171D27;
    margin: 0;
}

.pd-offer-hero-vendor {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    color: #3C4C67;
    margin: 0;
}

.pd-offer-hero-card-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex: 0 0 auto;
    margin-left: auto;
}

.pd-offer-hero-card-notice {
    width: 100%;
    min-width: 0;
}

.pd-offer-hero-card-notice .pd-offer-conflict-notice {
    width: 100%;
    max-width: none;
}

.pd-offer-badge {
    background: #EAF1FF;
    color: #2B63E8;
    border: 1px solid #CFE0FF;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.pd-offer-hero-included {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px 40px 4px;
    justify-content: center;
}

.pd-offer-hero-included-label {
    font-size: 13px;
    font-weight: 600;
    color: #4A5A78;
}

.pd-offer-chip {
    background: #F2F6FF;
    color: #2B63E8;
    border: 1px solid #D7E4FF;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* Shared helpers */
.pd-offer-center {
    text-align: center;
}

.pd-offer-center .pd-overview-tab-eyebrow,
.pd-offer-center .pd-benefits-tab-eyebrow {
    justify-content: center;
}

.pd-offer-center .pd-challenge-subtitle,
.pd-offer-center .pd-solution-subtitle {
    margin-left: auto;
    margin-right: auto;
    max-width: none;
    white-space: nowrap;
}

.pd-offer-earlybird-pill {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #06AFB8;
    color: #fff;
    padding: 12px 20px;
    border-radius: 999px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    margin: 24px auto 32px;
}

.pd-offer-earlybird-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #BFFAFD;
    flex-shrink: 0;
}

/* Overview use-cases panel — fluid across viewports; break out of .pd-inner padding */
.pd-offer-usecases-panel {
    background: linear-gradient(180deg, #F5FAFF 0%, #D8E7FE 100%);
    border: 1px solid #C4DAFD;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    box-sizing: border-box;
    font-family: 'Noto Sans', sans-serif;
    width: calc(100% + 160px);
    max-width: none;
    min-height: 0;
    margin-left: -80px;
    margin-right: -80px;
    position: relative;
    left: auto;
    transform: none;
}

/* Default use-cases header — left-aligned (product Use Cases section) */
.pd-usecases-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    margin-bottom: 32px;
    box-sizing: border-box;
}

.pd-usecases-header .pd-usecases-title {
    width: 100%;
    max-width: 100%;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
}

/* Offer overview panel header — centered within the panel */
.pd-offer-usecases-panel .pd-usecases-header,
.pd-usecases-header.pd-offer-center {
    align-items: center;
    max-width: 571px;
    padding: 0 8px;
    margin-bottom: 0;
}

.pd-offer-usecases-panel .pd-usecases-header .pd-usecases-title,
.pd-usecases-header.pd-offer-center .pd-usecases-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: clamp(22px, 3vw + 10px, 31.25px);
    font-weight: 700;
    line-height: 140%;
    color: #052970;
    text-align: center;
    margin-bottom: 24px;
}

.pd-offer-usecases-panel .pd-usecases-header .pd-challenge-subtitle,
.pd-usecases-header.pd-offer-center .pd-challenge-subtitle {
    font-family: 'Noto Sans', sans-serif;
    font-size: clamp(14px, 1.5vw + 10px, 18px);
    font-weight: 400;
    line-height: 140%;
    color: #283243;
    margin-bottom: 0;
    text-align: center;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Up to 3 cards per row; 4th+ wrap. 1–2 cards expand to fill the row. */
.pd-offer-usecases-panel .pd-usecases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.pd-offer-usecases-panel .pd-usecases-grid > * {
    min-width: 0;
}

.pd-offer-usecases-panel .pd-usecases-grid:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}

.pd-offer-usecases-panel .pd-usecases-grid:has(> :only-child) {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
}

@media (max-width: 1024px) {
    .pd-offer-usecases-panel {
        width: calc(100% + 80px);
        margin-left: -40px;
        margin-right: -40px;
        padding: 20px;
        gap: 20px;
        border-radius: 20px;
    }

    .pd-offer-usecases-panel .pd-usecases-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .pd-offer-usecases-panel .pd-usecases-grid:has(> :only-child) {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .pd-offer-usecases-panel {
        padding: 16px;
        border-radius: 16px;
    }

    .pd-offer-usecases-panel .pd-usecases-header .pd-usecases-title,
    .pd-usecases-header.pd-offer-center .pd-usecases-title {
        margin-bottom: 16px;
    }

    .pd-offer-usecases-panel .pd-usecase-card {
        padding: 20px;
    }

    .pd-offer-usecases-panel .pd-usecase-card-content {
        padding: 12px 16px 20px;
    }

    .pd-offer-usecases-panel .pd-usecase-card-img {
        height: 130px;
        padding: 16px 16px 12px;
    }
}

@media (max-width: 640px) {
    .pd-offer-usecases-panel {
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
        padding: 14px;
        gap: 16px;
        border-radius: 14px;
    }

    .pd-offer-usecases-panel .pd-usecases-grid,
    .pd-offer-usecases-panel .pd-usecases-grid:has(> :nth-child(2):last-child),
    .pd-offer-usecases-panel .pd-usecases-grid:has(> :only-child) {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .pd-offer-usecases-panel .pd-usecases-header,
    .pd-usecases-header.pd-offer-center {
        padding: 0 4px;
    }

    .pd-offer-usecases-panel .pd-usecases-header .pd-usecases-title,
    .pd-usecases-header.pd-offer-center .pd-usecases-title {
        font-size: clamp(20px, 5.5vw, 24px);
        margin-bottom: 12px;
    }

    .pd-offer-usecases-panel .pd-usecases-header .pd-challenge-subtitle,
    .pd-usecases-header.pd-offer-center .pd-challenge-subtitle {
        font-size: 14px;
    }

    .pd-section--use-cases .pd-usecases-title {
        font-size: clamp(22px, 5.5vw, 28px);
    }

    .pd-offer-usecases-panel .pd-usecase-card {
        padding: 16px;
        border-radius: 12px;
    }

    .pd-offer-usecases-panel .pd-usecase-card-img {
        height: 120px;
        padding: 12px;
    }

    .pd-offer-usecases-panel .pd-usecase-card-content {
        padding: 12px 12px 16px;
    }

    .pd-offer-earlybird-pill {
        flex-wrap: wrap;
        font-size: 14px;
        padding: 10px 16px;
        margin: 16px auto 24px;
        max-width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

.pd-usecase-card {
    background: var(--gradient-white-p-lightest-180, linear-gradient(180deg, var(--Color-White-100, #FFF) 0%, var(--Color-Primary-Lightest, #F5FAFF) 100%));
    border: 1px solid #C4DAFD;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 32px;
}

.pd-usecase-card-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 150px;
    padding: 24px 24px 16px 24px;
    gap: 12px;
    align-self: stretch;
    position: relative;
    box-sizing: border-box;
}

/* Optional: if logo image is used */
.pd-usecase-card-logo-overlay img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 4px;
}

.pd-usecase-card-content {
    padding: 16px 24px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    /* Restored to 8px for the gap between container and points */
    flex: 1;
    box-sizing: border-box;
}

.pd-usecase-card-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    /* Title and Description gap */
    width: 100%;
}

.pd-usecase-card-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 140%;
    color: #171D27;
    margin-bottom: 0;
}

.pd-usecase-card-desc {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    color: #3C4C67;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
}

.pd-usecase-card-content .pd-overview-tab-features-list,
.pd-offer-package-card-text .pd-overview-tab-features-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pd-usecase-card-content .pd-overview-tab-features-list li,
.pd-offer-package-card-text .pd-overview-tab-features-list li {
    font-size: 14px;
    font-weight: 500;
    color: #296DF5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0;
    line-height: 1.4;
}

.pd-usecase-card-content .pd-overview-tab-features-list li svg,
.pd-offer-package-card-text .pd-overview-tab-features-list li svg {
    margin-top: 2px;
    flex-shrink: 0;
}

.pd-usecase-card-logo-overlay {
    width: 80px;
    height: 80px;
    background: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1), 0px 2px 8px 0px rgba(142, 146, 152, 0.3);
    /* Changed spread from 2px to 0px */
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Benefits — package value cards (2x2 with icon box) */
.pd-offer-package-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.pd-offer-package-card {
    background: #F8FAFC;
    border: 1px solid #D8E7FE;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.pd-offer-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #4D89F8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pd-offer-package-card-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pd-offer-package-card-text .pd-benefit-title {
    font-size: 14px;
    font-weight: 700;
    color: #171D27;
}

.pd-offer-package-card-text .pd-overview-tab-features-list li {
    font-size: 12px;
    font-weight: 500;
    color: #296DF5;
    line-height: 140%;
}

/* Benefits — "other" image + checklist row */
.pd-offer-other {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(24px, 4vw, 60px);
    align-items: center;
    justify-content: center;
    margin-top: clamp(48px, 8vw, 160px);
    margin-bottom: clamp(48px, 8vw, 160px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.pd-offer-other:has(.pd-offer-other-text:only-child) {
    flex-direction: column;
}

.pd-offer-other-img {
    width: min(504px, 100%);
    max-width: 100%;
    aspect-ratio: 504 / 348;
    height: auto;
    border-radius: 4px;
    overflow: hidden;
    background: #E8EEF8;
    flex: 1 1 280px;
    min-width: 0;
}

.pd-offer-other-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pd-offer-other-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 2vw, 24px);
    width: min(636px, 100%);
    max-width: 100%;
    flex: 1 1 280px;
    min-width: 0;
    box-sizing: border-box;
}

.pd-offer-other-text .pd-benefits-tab-title {
    text-align: left;
    color: #296DF5;
    font-size: clamp(22px, 2.5vw + 12px, 32px);
    font-weight: 700;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    white-space: normal;
}

.pd-offer-other-text .pd-challenge-subtitle,
.pd-offer-other-text .pd-hero-description {
    color: #4B5E7D;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
    text-align: left;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
}

.pd-offer-other-features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 100%;
}

.pd-offer-other-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #296DF5;
    font-size: clamp(14px, 1vw + 12px, 16px);
    font-weight: 600;
    margin-bottom: 0;
    line-height: 140%;
    overflow-wrap: break-word;
}

.pd-offer-other-features li svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Benefits — business function cards (image + text) */
.pd-offer-business-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
    margin-bottom: clamp(48px, 8vw, 160px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

.pd-offer-business-grid:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.pd-offer-business-grid:has(> :only-child) {
    grid-template-columns: minmax(0, 384px);
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.pd-offer-business-card {
    background: #fff;
    border: 1px solid #D8E7FE;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
}

.pd-offer-business-img {
    width: 100%;
    height: 180px;
    background: #E8EEF8;
    flex-shrink: 0;
}

.pd-offer-business-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pd-offer-business-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    flex: 1;
    min-width: 0;
}

.pd-offer-business-body h3,
.pd-offer-business-body .pd-usecase-card-title {
    color: #171D27;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 140%;
    overflow-wrap: break-word;
}

.pd-offer-business-body p,
.pd-offer-business-body .pd-solution-card-desc {
    color: #4B5E7D;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 140%;
    overflow-wrap: break-word;
}

@media (max-width: 1100px) {
    .pd-offer-business-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .pd-offer-business-grid:has(> :nth-child(2):last-child),
    .pd-offer-business-grid:has(> :only-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 100%;
    }

    .pd-offer-business-grid:has(> :only-child) {
        grid-template-columns: minmax(0, 1fr);
        max-width: 480px;
    }
}

@media (max-width: 900px) {
    .pd-offer-other {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
    }

    .pd-offer-other-img {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 10;
    }

    .pd-offer-other-text {
        flex: 0 0 auto;
        width: 100%;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .pd-offer-other {
        gap: 20px;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .pd-offer-other-img {
        border-radius: 8px;
        aspect-ratio: 4 / 3;
    }

    .pd-offer-other-text .pd-benefits-tab-title {
        font-size: clamp(20px, 5.5vw, 24px);
    }

    .pd-offer-other-features {
        gap: 12px;
    }

    .pd-offer-other-features li {
        font-size: 14px;
    }

    .pd-offer-other-features li svg {
        width: 20px;
        height: 20px;
    }

    .pd-offer-business-grid,
    .pd-offer-business-grid:has(> :nth-child(2):last-child),
    .pd-offer-business-grid:has(> :only-child) {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 16px;
        margin-top: 20px;
        margin-bottom: 48px;
    }

    .pd-offer-business-img {
        height: 160px;
    }

    .pd-offer-business-body {
        padding: 16px 20px 20px;
    }
}

/* Benefits — challenge flow (2-column grid, column-major: 1|3 / 2|4) */
.pd-offer-challenge-flow {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-template-columns: repeat(2, fit-content(100%));
    column-gap: 120px;
    row-gap: 32px;
    justify-content: center;
    width: 100%;
    max-width: 930px;
    margin: 40px auto 100px auto;
}

.pd-offer-challenge-item {
    width: auto;
    min-width: 0;
}

.pd-offer-challenge-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.pd-offer-challenge-summary::-webkit-details-marker {
    display: none;
}

.pd-offer-challenge-number {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #296DF5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.pd-offer-challenge-label {
    font-size: 16px;
    font-weight: 600;
    color: #171D27;
}

.pd-offer-challenge-content {
    margin-top: 16px;
    margin-left: 40px;
    /* Aligned with text, 24px width + 16px gap */
}

.pd-offer-challenge-img-wrapper {
    background: #F8FAFC;
    border: 1px solid #C4DAFD;
    border-radius: 12px;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-offer-challenge-img-wrapper img {
    max-width: 100%;
    display: block;
}


/* Pricing — early-bird discount banner */
.pd-offer-discount-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--gradient-c-200-l-20090, linear-gradient(90deg, var(--Color-Cyan-200, #84F4FB) 23.14%, var(--Color-Lime-200, #D9F53D) 90.54%));
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

@media (max-width: 860px) {

    .pd-offer-package-grid {
        grid-template-columns: 1fr;
    }

    .pd-offer-challenge-flow {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
        column-gap: 0;
        row-gap: 24px;
        max-width: 800px;
    }

    .pd-offer-center .pd-challenge-subtitle,
    .pd-offer-center .pd-solution-subtitle {
        white-space: normal;
    }

    .pd-offer-hero-banner {
        padding: 36px 24px 88px;
    }

    .pd-offer-hero-heading {
        font-size: 26px;
    }

    .pd-offer-hero-card {
        margin: -64px 16px 0;
        padding: 24px 20px;
    }

    .pd-offer-hero-card-top {
        flex-wrap: wrap;
        gap: 16px;
    }

    .pd-offer-hero-card-id {
        flex: 1 1 220px;
    }

    .pd-offer-hero-card-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
        margin-left: 0;
    }

    .pd-offer-hero-logo {
        width: 72px;
        height: 72px;
    }

    .pd-offer-hero-logo img {
        width: 64px;
        height: 64px;
    }

    .pd-offer-hero-name {
        font-size: 20px;
    }

    .pd-offer-hero-card-actions .pd-btn-primary,
    .pd-offer-hero-card-actions .pd-btn-outline-blue {
        padding: 10px 20px;
        font-size: 13px;
    }
}

@media (max-width: 520px) {
    .pd-offer-hero-card {
        padding: 20px 16px;
        gap: 12px;
    }

    .pd-offer-hero-card-id {
        gap: 12px;
        flex: 1 1 100%;
    }

    .pd-offer-hero-logo {
        width: 56px;
        height: 56px;
    }

    .pd-offer-hero-logo img {
        width: 48px;
        height: 48px;
    }

    .pd-offer-hero-name {
        font-size: 18px;
    }

    .pd-offer-hero-vendor {
        font-size: 14px;
    }

    .pd-offer-hero-card-actions {
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }

    .pd-offer-hero-card-actions .pd-btn-primary,
    .pd-offer-hero-card-actions .pd-btn-outline-blue {
        flex: 1 1 auto;
        justify-content: center;
        padding: 10px 16px;
    }
}

/* Program-offer: full-width preset-offer banner strip (top of page, below header) */
.pd-offer-discount-banner--strip {
    border-radius: 0;
    margin-bottom: 0;
    padding: 14px 24px;
    font-size: 15px;
}

/* Program-offer: Features tab grouped per included product */
.pd-offer-feature-group {
    margin-bottom: 40px;
}

.pd-offer-feature-group-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 2px solid #EAF1FF;
}

.pd-offer-feature-group-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #F2F6FF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-offer-feature-group-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pd-offer-feature-group-name {
    font-size: 20px;
    font-weight: 800;
    color: #1B2A4A;
    margin: 0;
}
/* ══════════════════════════════════════════════════════════════════════════════
   Benefits tab — sections added for AG ONE Safe (Microsoft Zero Trust, supported
   standards, AI highlights, "Why AG ONE Safe"). Every one is opt-in per product:
   the markup only emits these nodes when the workbook supplied the section, so
   products without them are visually untouched.
   ══════════════════════════════════════════════════════════════════════════════ */

.pd-section-sub {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    line-height: 160%;
    color: #3C4C67;
    margin: 8px 0 0;
}

.pd-section-sub-lead {
    font-weight: 700;
}

/* ── Microsoft Zero Trust ── */
.pd-benefits-zerotrust-section {
    background: linear-gradient(180deg, #F5F9FF 0%, #EDF4FF 100%);
    padding: 64px 0;
}

.pd-zerotrust-pill,
.pd-support-pill,
.pd-aihl-pill,
.pd-why-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    border-radius: 999px;
    padding: 12px 26px;
}

.pd-zerotrust-pill {
    color: #1F2A44;
    background: #FFFFFF;
    border: 1px solid #E0E7F3;
}

.pd-zerotrust-grid,
.pd-support-grid,
.pd-aihl-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 32px;
}

/* Cards share a row but keep their natural width, so a trailing row of 2 or 3
   centres instead of stretching to fill — matching the design's staggered rows. */
.pd-zerotrust-card {
    flex: 1 1 300px;
    max-width: 480px;
    border: 1px solid #D6DBE6;
    border-radius: 14px;
    background: linear-gradient(180deg, #FAFCFF 0%, #F2F6FD 100%);
    padding: 24px;
}

.pd-zerotrust-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.pd-zerotrust-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #7288AC;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-zerotrust-icon img { width: 24px; height: 24px; }

.pd-zerotrust-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #0B1B3A;
    margin: 0;
}

.pd-zerotrust-desc {
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    line-height: 160%;
    color: #45556F;
    margin: 0;
}

/* ── Supported standards ── */
.pd-benefits-support-section {
    background: #FFFFFF;
    padding: 64px 0;
}

.pd-support-pill {
    color: #FFFFFF;
    background: linear-gradient(90deg, #4E8BFF 0%, #2B63E8 100%);
    border: none;
}

.pd-support-card {
    flex: 1 1 280px;
    max-width: 420px;
    border: 1px solid #C4DAFD;
    border-radius: 12px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F9FF 100%);
    padding: 20px 22px;
}

.pd-support-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #0B1B3A;
    margin: 0 0 4px;
}

.pd-support-desc {
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    line-height: 155%;
    color: #45556F;
    margin: 0;
}

/* ── AI highlights ── */
.pd-benefits-aihl-section {
    background: linear-gradient(180deg, #F2FBFC 0%, #E9F7FB 100%);
    padding: 64px 0;
}

/* First word of the heading only — inherits every other title style */
.pd-benefits-aihl-section .pd-benefits-tab-title .pd-aihl-title-accent {
    background: var(--AI-Color-Dark-05, linear-gradient(52deg, var(--Color-Primary-500, #296DF5) -3.24%, var(--Color-Cyan-300, #08E1ED) 56.75%, var(--Color-Lime-100, #E2F76E) 98.41%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pd-aihl-pill {
    color: #FFFFFF;
    background: linear-gradient(90deg, #2FC4D8 0%, #06A6C4 100%);
    border: none;
}

.pd-aihl-pill svg path { fill: #FFFFFF; }

.pd-aihl-card {
    flex: 1 1 300px;
    max-width: 460px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #CFEAF2;
    border-radius: 12px;
    background: #FFFFFF;
    padding: 18px 20px;
}

.pd-aihl-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #E3F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-aihl-icon img { width: 22px; height: 22px; }

.pd-aihl-text {
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    line-height: 150%;
    color: #1F2A44;
}

/* ── Why AG ONE Safe (dark comparison panel) ── */
.pd-benefits-why-section {
    background: linear-gradient(180deg, #0A2E7A 0%, #062A6E 55%, #04205A 100%);
    padding: 72px 0;
    text-align: center;
}

.pd-why-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 20px;
}

.pd-why-pill {
    color: #FFFFFF;
    background: linear-gradient(90deg, #22C7DD 0%, #12B0CD 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.pd-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 860px;
    margin: 36px auto 0;
    text-align: left;
}

.pd-why-card {
    border-radius: 14px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FE 100%);
    overflow: hidden;
}

/* The AG ONE Safe side carries the design's cyan halo */
.pd-why-card--highlight {
    border: 1px solid #37D6EE;
    box-shadow: 0 0 22px rgba(45, 205, 232, 0.55);
}

.pd-why-card-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 16px;
    border-bottom: 1px solid #E4EBF6;
}

.pd-why-card-logo { max-height: 26px; }

.pd-why-card-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0B1B3A;
}

.pd-why-list {
    list-style: none;
    margin: 0;
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pd-why-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    line-height: 150%;
    color: #33415C;
}

.pd-why-item-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 3px;
}

.pd-why-bottom {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    line-height: 140%;
    color: #D6E4FB;
    max-width: 860px;
    margin: 32px auto 0;
    font-style: normal;
    font-weight: 400;
}

/* ── Microsoft Zero Trust — responsive ──────────────────────────────────────────
   Scoped to .pd-benefits-zerotrust-section so sibling opt-in sections keep their
   own layout. The shared .pd-benefits-content-inner is a fixed 1200px, which
   overflows once the viewport is narrower than that, so this section opts into a
   fluid inner and takes its side gutters from the section padding instead. */
.pd-benefits-zerotrust-section .pd-benefits-content-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.pd-benefits-zerotrust-section {
    box-sizing: border-box;
}

.pd-benefits-zerotrust-section .pd-zerotrust-card {
    box-sizing: border-box;
    min-width: 0;
}

.pd-benefits-zerotrust-section .pd-zerotrust-title,
.pd-benefits-zerotrust-section .pd-zerotrust-desc,
.pd-benefits-zerotrust-section .pd-section-sub {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Large desktop — match Figma spacing (1440–1980): 120px gutters leave the inner
   at its full 1200px, three cards per row. */
@media (min-width: 1440px) {
    .pd-benefits-zerotrust-section {
        padding: 64px 120px;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-grid {
        gap: 20px;
    }
}

/* Mid desktop / laptop (1024–1439) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .pd-benefits-zerotrust-section {
        padding: 56px 48px;
    }

    .pd-benefits-zerotrust-section .pd-benefits-tab-header {
        margin-bottom: 24px;
    }

    .pd-benefits-zerotrust-section .pd-benefits-tab-title {
        font-size: 28px;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-grid {
        gap: 16px;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-card {
        flex: 1 1 280px;
        max-width: none;
        padding: 22px;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-pill {
        font-size: 16px;
        padding: 11px 22px;
    }
}

/* Small tablet / narrow laptop below 1024 — two cards per row */
@media (min-width: 769px) and (max-width: 1023px) {
    .pd-benefits-zerotrust-section {
        padding: 48px 32px;
    }

    .pd-benefits-zerotrust-section .pd-benefits-tab-header {
        margin-bottom: 16px;
    }

    .pd-benefits-zerotrust-section .pd-benefits-tab-title {
        font-size: 26px;
    }

    .pd-benefits-zerotrust-section .pd-benefits-tab-pill-wrap {
        margin-bottom: 24px;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-pill {
        font-size: 15px;
        padding: 10px 18px;
        text-align: center;
        white-space: normal;
        max-width: 100%;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-grid {
        gap: 16px;
        margin-top: 24px;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-card {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
        padding: 20px;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-title {
        font-size: 18px;
    }
}

/* Mobile — single column */
@media (max-width: 768px) {
    .pd-benefits-zerotrust-section {
        padding: 40px 16px;
    }

    .pd-benefits-zerotrust-section .pd-benefits-tab-header {
        margin: 0 0 16px;
    }

    .pd-benefits-zerotrust-section .pd-benefits-tab-title {
        font-size: 22px;
    }

    .pd-benefits-zerotrust-section .pd-section-sub {
        font-size: 15px;
    }

    .pd-benefits-zerotrust-section .pd-benefits-tab-pill-wrap {
        margin-bottom: 20px;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-pill {
        font-size: 14px;
        padding: 9px 16px;
        gap: 8px;
        text-align: center;
        white-space: normal;
        max-width: 100%;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-grid {
        gap: 12px;
        margin-top: 20px;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-card {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 18px;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-card-top {
        gap: 12px;
        margin-bottom: 12px;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-icon img {
        width: 20px;
        height: 20px;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-title {
        font-size: 17px;
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-desc {
        font-size: 14px;
    }
}

/* ============================================================
   AG ONE Safe only — Zero Trust cards (Figma 15088:130866).
   Five cards: the first two share one row, the last three share the next.
   The shared grid is centred flex, which can't pin a 2-then-3 split, so the Safe
   variant switches to a 6-column grid where the top pair spans 3 and the bottom
   trio spans 2. The cards' 480px cap has to go or the wide pair won't fill its
   track. Scoped to .pd-zerotrust-grid--safe, so the support and AI-HL grids that
   share the flex rule — and every other product — are untouched.
   These rules follow the shared responsive block above so the equal-specificity
   overrides land in the right order.
   ============================================================ */
.pd-benefits-zerotrust-section .pd-zerotrust-grid--safe {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
}

.pd-benefits-zerotrust-section .pd-zerotrust-grid--safe > .pd-zerotrust-card {
    max-width: none;
}

.pd-benefits-zerotrust-section .pd-zerotrust-grid--safe > .pd-zerotrust-card:nth-child(-n + 2) {
    grid-column: span 3;
}

.pd-benefits-zerotrust-section .pd-zerotrust-grid--safe > .pd-zerotrust-card:nth-child(n + 3) {
    grid-column: span 2;
}

/* Below the laptop breakpoint there isn't room for a 3-up row, so fall back to
   the shared tablet/mobile stacking. */
@media (max-width: 1023px) {
    .pd-benefits-zerotrust-section .pd-zerotrust-grid--safe {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-benefits-zerotrust-section .pd-zerotrust-grid--safe > .pd-zerotrust-card:nth-child(-n + 2),
    .pd-benefits-zerotrust-section .pd-zerotrust-grid--safe > .pd-zerotrust-card:nth-child(n + 3) {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .pd-benefits-zerotrust-section .pd-zerotrust-grid--safe {
        grid-template-columns: 1fr;
    }
}

/* ── Supported standards — responsive ───────────────────────────────────────────
   Scoped to .pd-benefits-support-section; same fluid-inner + gutters pattern as
   Zero Trust so the fixed 1200px content-inner no longer overflows below that width. */
.pd-benefits-support-section .pd-benefits-content-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.pd-benefits-support-section {
    box-sizing: border-box;
}

.pd-benefits-support-section .pd-support-card {
    box-sizing: border-box;
    min-width: 0;
}

.pd-benefits-support-section .pd-support-title,
.pd-benefits-support-section .pd-support-desc,
.pd-benefits-support-section .pd-section-sub {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Large desktop — match Figma spacing (1440–1980) */
@media (min-width: 1440px) {
    .pd-benefits-support-section {
        padding: 64px 120px;
    }

    .pd-benefits-support-section .pd-support-grid {
        gap: 20px;
    }
}

/* Mid desktop / laptop (1024–1439) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .pd-benefits-support-section {
        padding: 56px 48px;
    }

    .pd-benefits-support-section .pd-benefits-tab-header {
        margin-bottom: 24px;
    }

    .pd-benefits-support-section .pd-benefits-tab-title {
        font-size: 28px;
    }

    .pd-benefits-support-section .pd-support-grid {
        gap: 16px;
    }

    .pd-benefits-support-section .pd-support-card {
        flex: 1 1 260px;
        max-width: none;
        padding: 18px 20px;
    }

    .pd-benefits-support-section .pd-support-pill {
        font-size: 16px;
        padding: 11px 22px;
    }
}

/* Small tablet / narrow laptop below 1024 — two cards per row */
@media (min-width: 769px) and (max-width: 1023px) {
    .pd-benefits-support-section {
        padding: 48px 32px;
    }

    .pd-benefits-support-section .pd-benefits-tab-header {
        margin-bottom: 16px;
    }

    .pd-benefits-support-section .pd-benefits-tab-title {
        font-size: 26px;
    }

    .pd-benefits-support-section .pd-benefits-tab-pill-wrap {
        margin-bottom: 24px;
    }

    .pd-benefits-support-section .pd-support-pill {
        font-size: 15px;
        padding: 10px 18px;
        text-align: center;
        white-space: normal;
        max-width: 100%;
    }

    .pd-benefits-support-section .pd-support-grid {
        gap: 16px;
        margin-top: 24px;
    }

    .pd-benefits-support-section .pd-support-card {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
        padding: 18px;
    }

    .pd-benefits-support-section .pd-support-title {
        font-size: 16px;
    }
}

/* Mobile — single column */
@media (max-width: 768px) {
    .pd-benefits-support-section {
        padding: 40px 16px;
    }

    .pd-benefits-support-section .pd-benefits-tab-header {
        margin: 0 0 16px;
    }

    .pd-benefits-support-section .pd-benefits-tab-title {
        font-size: 22px;
    }

    .pd-benefits-support-section .pd-section-sub {
        font-size: 15px;
    }

    .pd-benefits-support-section .pd-benefits-tab-pill-wrap {
        margin-bottom: 20px;
    }

    .pd-benefits-support-section .pd-support-pill {
        font-size: 14px;
        padding: 9px 16px;
        gap: 8px;
        text-align: center;
        white-space: normal;
        max-width: 100%;
    }

    .pd-benefits-support-section .pd-support-grid {
        gap: 12px;
        margin-top: 20px;
    }

    .pd-benefits-support-section .pd-support-card {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 16px;
    }

    .pd-benefits-support-section .pd-support-title {
        font-size: 16px;
    }

    .pd-benefits-support-section .pd-support-desc {
        font-size: 14px;
    }
}

/* ============================================================
   AG ONE Safe only — Supported standards cards (Figma 15088:130878).
   Eight cards: 3 + 3 + 2. A 6-column track lets the first six span 2 (three per
   row) and the last two span 3, so the trailing pair fills the row instead of
   sitting left-aligned at 1/3 width. The 420px cap has to go or the cards won't
   fill their tracks.
   Scoped to .pd-support-grid--safe, so the Zero Trust and AI-HL grids that share
   the flex rule — and every other product — are untouched.
   These rules follow the shared responsive block above so the equal-specificity
   overrides land in the right order.
   ============================================================ */
.pd-benefits-support-section .pd-support-grid--safe {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
}

.pd-benefits-support-section .pd-support-grid--safe > .pd-support-card {
    max-width: none;
}

.pd-benefits-support-section .pd-support-grid--safe > .pd-support-card:nth-child(-n + 6) {
    grid-column: span 2;
}

.pd-benefits-support-section .pd-support-grid--safe > .pd-support-card:nth-child(n + 7) {
    grid-column: span 3;
}

/* Below the laptop breakpoint there isn't room for a 3-up row, so fall back to
   the shared tablet/mobile stacking. */
@media (max-width: 1023px) {
    .pd-benefits-support-section .pd-support-grid--safe {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-benefits-support-section .pd-support-grid--safe > .pd-support-card:nth-child(-n + 6),
    .pd-benefits-support-section .pd-support-grid--safe > .pd-support-card:nth-child(n + 7) {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .pd-benefits-support-section .pd-support-grid--safe {
        grid-template-columns: 1fr;
    }
}

/* ── AI highlights — responsive ─────────────────────────────────────────────────
   Scoped to .pd-benefits-aihl-section; same fluid-inner + gutters pattern. */
.pd-benefits-aihl-section .pd-benefits-content-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.pd-benefits-aihl-section {
    box-sizing: border-box;
}

.pd-benefits-aihl-section .pd-aihl-card {
    box-sizing: border-box;
    min-width: 0;
}

.pd-benefits-aihl-section .pd-aihl-text,
.pd-benefits-aihl-section .pd-section-sub {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Large desktop — match Figma spacing (1440–1980) */
@media (min-width: 1440px) {
    .pd-benefits-aihl-section {
        padding: 64px 120px;
    }

    .pd-benefits-aihl-section .pd-aihl-grid {
        gap: 20px;
    }
}

/* Mid desktop / laptop (1024–1439) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .pd-benefits-aihl-section {
        padding: 56px 48px;
    }

    .pd-benefits-aihl-section .pd-benefits-tab-header {
        margin-bottom: 24px;
    }

    .pd-benefits-aihl-section .pd-benefits-tab-title {
        font-size: 28px;
    }

    .pd-benefits-aihl-section .pd-aihl-grid {
        gap: 16px;
    }

    .pd-benefits-aihl-section .pd-aihl-card {
        flex: 1 1 280px;
        max-width: none;
        padding: 16px 18px;
    }

    .pd-benefits-aihl-section .pd-aihl-pill {
        font-size: 20px;
        padding: 11px 22px;
    }
}

/* Small tablet / narrow laptop below 1024 — two cards per row */
@media (min-width: 769px) and (max-width: 1023px) {
    .pd-benefits-aihl-section {
        padding: 48px 32px;
    }

    .pd-benefits-aihl-section .pd-benefits-tab-header {
        margin-bottom: 16px;
    }

    .pd-benefits-aihl-section .pd-benefits-tab-title {
        font-size: 26px;
    }

    .pd-benefits-aihl-section .pd-benefits-tab-pill-wrap {
        margin-bottom: 24px;
    }

    .pd-benefits-aihl-section .pd-aihl-pill {
        font-size: 20px;
        padding: 10px 18px;
        text-align: center;
        white-space: normal;
        max-width: 100%;
    }

    .pd-benefits-aihl-section .pd-aihl-grid {
        gap: 16px;
        margin-top: 24px;
    }

    .pd-benefits-aihl-section .pd-aihl-card {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
        padding: 16px;
        gap: 12px;
    }
}

/* Mobile — single column */
@media (max-width: 768px) {
    .pd-benefits-aihl-section {
        padding: 40px 16px;
    }

    .pd-benefits-aihl-section .pd-benefits-tab-header {
        margin: 0 0 16px;
    }

    .pd-benefits-aihl-section .pd-benefits-tab-title {
        font-size: 22px;
    }

    .pd-benefits-aihl-section .pd-section-sub {
        font-size: 15px;
    }

    .pd-benefits-aihl-section .pd-benefits-tab-pill-wrap {
        margin-bottom: 20px;
    }

    .pd-benefits-aihl-section .pd-aihl-pill {
        font-size: 20px;
        padding: 9px 16px;
        gap: 8px;
        text-align: center;
        white-space: normal;
        max-width: 100%;
    }

    .pd-benefits-aihl-section .pd-aihl-grid {
        gap: 12px;
        margin-top: 20px;
    }

    .pd-benefits-aihl-section .pd-aihl-card {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 14px 16px;
        gap: 12px;
    }

    .pd-benefits-aihl-section .pd-aihl-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .pd-benefits-aihl-section .pd-aihl-icon img {
        width: 18px;
        height: 18px;
    }

    .pd-benefits-aihl-section .pd-aihl-text {
        font-size: 14px;
    }
}

/* ============================================================
   AG ONE Safe only — AI highlights cards (Figma 15088:130894).
   Eight cards: 3 + 3 + 2. A 6-column track lets the first six span 2 (three per
   row) and the last two span 3, so the trailing pair fills the row instead of
   sitting left-aligned at 1/3 width. The 460px cap has to go or the cards won't
   fill their tracks.
   Scoped to .pd-aihl-grid--safe, so the Zero Trust and support grids that share
   the flex rule — and every other product — are untouched.
   These rules follow the shared responsive block above so the equal-specificity
   overrides land in the right order.
   ============================================================ */
.pd-benefits-aihl-section .pd-aihl-grid--safe {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
}

.pd-benefits-aihl-section .pd-aihl-grid--safe > .pd-aihl-card {
    max-width: none;
}

.pd-benefits-aihl-section .pd-aihl-grid--safe > .pd-aihl-card:nth-child(-n + 6) {
    grid-column: span 2;
}

.pd-benefits-aihl-section .pd-aihl-grid--safe > .pd-aihl-card:nth-child(n + 7) {
    grid-column: span 3;
}

/* Below the laptop breakpoint there isn't room for a 3-up row, so fall back to
   the shared tablet/mobile stacking. */
@media (max-width: 1023px) {
    .pd-benefits-aihl-section .pd-aihl-grid--safe {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-benefits-aihl-section .pd-aihl-grid--safe > .pd-aihl-card:nth-child(-n + 6),
    .pd-benefits-aihl-section .pd-aihl-grid--safe > .pd-aihl-card:nth-child(n + 7) {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .pd-benefits-aihl-section .pd-aihl-grid--safe {
        grid-template-columns: 1fr;
    }
}

/* ── Why AG ONE Safe — responsive ───────────────────────────────────────────────
   Scoped to .pd-benefits-why-section; fluid inner + gutters, comparison cards
   stack on mobile. */
.pd-benefits-why-section .pd-benefits-content-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Figma Content node: 60px vertical rhythm between heading block, grid, and bottom copy */
.pd-benefits-why-section .pd-benefits-tab-pill-wrap {
    margin-bottom: 0;
}

.pd-benefits-why-section .pd-why-grid {
    margin-top: 60px;
}

.pd-benefits-why-section .pd-why-bottom {
    margin-top: 60px;
}

.pd-benefits-why-section {
    box-sizing: border-box;
}

.pd-benefits-why-section .pd-why-card {
    box-sizing: border-box;
    min-width: 0;
}

.pd-benefits-why-section .pd-why-title,
.pd-benefits-why-section .pd-why-item,
.pd-benefits-why-section .pd-why-bottom {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Large desktop — match Figma spacing (1440–1980) */
@media (min-width: 1440px) {
    .pd-benefits-why-section {
        padding: 72px 120px;
    }
}

/* Mid desktop / laptop (1024–1439) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .pd-benefits-why-section {
        padding: 64px 48px;
    }

    .pd-benefits-why-section .pd-why-title {
        font-size: 30px;
    }

    .pd-benefits-why-section .pd-why-grid {
        gap: 20px;
    }

    .pd-benefits-why-section .pd-why-pill {
        font-size: 20px;
        padding: 11px 22px;
    }
}

/* Small tablet / narrow laptop below 1024 — stack comparison cards */
@media (min-width: 769px) and (max-width: 1023px) {
    .pd-benefits-why-section {
        padding: 56px 32px;
    }

    .pd-benefits-why-section .pd-why-title {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .pd-benefits-why-section .pd-benefits-tab-pill-wrap {
        margin-bottom: 0;
    }

    .pd-benefits-why-section .pd-why-pill {
        font-size: 20px;
        padding: 10px 18px;
        text-align: center;
        white-space: normal;
        max-width: 100%;
    }

    .pd-benefits-why-section .pd-why-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 560px;
    }

    .pd-benefits-why-section .pd-why-bottom {
        padding: 0 8px;
    }
}

/* Mobile — single column */
@media (max-width: 768px) {
    .pd-benefits-why-section {
        padding: 48px 16px;
    }

    .pd-benefits-why-section .pd-why-title {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .pd-benefits-why-section .pd-benefits-tab-pill-wrap {
        margin-bottom: 0;
    }

    .pd-benefits-why-section .pd-why-pill {
        font-size: 20px;
        padding: 9px 16px;
        gap: 8px;
        text-align: center;
        white-space: normal;
        max-width: 100%;
    }

    .pd-benefits-why-section .pd-why-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 100%;
    }

    .pd-benefits-why-section .pd-why-card-head {
        padding: 16px 14px;
        gap: 6px;
    }

    .pd-benefits-why-section .pd-why-card-logo {
        max-height: 22px;
    }

    .pd-benefits-why-section .pd-why-card-title {
        font-size: 16px;
    }

    .pd-benefits-why-section .pd-why-list {
        padding: 14px 16px 18px;
        gap: 8px;
    }

    .pd-benefits-why-section .pd-why-item {
        font-size: 14px;
        gap: 8px;
    }

    .pd-benefits-why-section .pd-why-bottom {
        font-size: 14px;
        padding: 0 4px;
    }
}

/* ΓöÇΓöÇ Pricing tier card extras (Expansion Path, supported apps, rounding footnote) ΓöÇΓöÇ
   Emitted only for products whose workbook supplies a pricingTiersSection, so every
   other product's tier card is unchanged. */
.pd-tier-expansion {
    margin-top: 18px;
    border-top: 1px solid #E6ECF7;
}

.pd-tier-expansion-title,
.pd-tier-apps-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #171D27;
    margin: 0 0 8px;
}

.pd-tier-expansion-list {
    list-style: disc;
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pd-tier-expansion-list li {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    line-height: 150%;
    color: #33415C;
}

/* Pushed to the bottom so the "Choose Plan" buttons line up across cards of unequal length */
.pd-tier-apps {
    margin-top: auto;
    padding: 16px 24px;
}

.pd-tier-apps-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pd-tier-apps-row img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.pd-tier-footnote {
    font-family: 'Noto Sans', sans-serif;
    font-size: 13px;
    line-height: 150%;
    color: #6B7C99;
    text-align: center;
    margin: 18px 0 0;
}

/* ΓöÇΓöÇ Coming Soon plans ΓöÇΓöÇ the card is inert and visibly de-emphasised. The click handler
   already refuses selection; pointer-events makes that obvious rather than silently ignored. */
.pd-tier-card--soon {
    cursor: not-allowed;
    opacity: 0.75;
}

.pd-tier-card--soon:hover {
    border-color: var(--tier-accent);
    box-shadow: none;
    transform: none;
}

.pd-tier-choose--soon,
.pd-tier-choose:disabled {
    background: #E6EAF2;
    color: #7A8AA6;
    border-color: #E6EAF2;
    cursor: not-allowed;
    box-shadow: none;
}

.pd-tier-choose--soon:hover,
.pd-tier-choose:disabled:hover {
    background: #E6EAF2;
    color: #7A8AA6;
}

/* ── Icon placeholders (decorative; replace with design-system icons later) ── */
.pd-icon-placeholder {
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
    background: currentColor;
    opacity: 0.35;
    border-radius: 2px;
}

.pd-icon-placeholder--product,
.pd-icon-placeholder--tag,
.pd-icon-placeholder--addons,
.pd-icon-placeholder--message,
.pd-icon-placeholder--info,
.pd-icon-placeholder--chevron,
.pd-icon-placeholder--add {
    width: 20px;
    height: 20px;
    background: transparent;
    opacity: 1;
    border: 1.5px solid #296DF5;
    border-radius: 4px;
    position: relative;
}

.pd-icon-placeholder--tag,
.pd-icon-placeholder--addons {
    width: 24px;
    height: 24px;
}

.pd-icon-placeholder--product::after,
.pd-icon-placeholder--tag::after,
.pd-icon-placeholder--addons::after,
.pd-icon-placeholder--message::after,
.pd-icon-placeholder--info::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1.5px solid #296DF5;
    border-radius: 2px;
}

.pd-icon-placeholder--info {
    border-radius: 50%;
}

.pd-icon-placeholder--info::after {
    inset: auto;
    left: 50%;
    top: 3px;
    width: 2px;
    height: 8px;
    border: none;
    border-radius: 1px;
    background: #296DF5;
    transform: translateX(-50%);
}

.pd-icon-placeholder--info::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #296DF5;
    transform: translateX(-50%);
}

.pd-icon-placeholder--chevron {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
}

.pd-icon-placeholder--add {
    width: 16px;
    height: 16px;
    border-color: currentColor;
    border-radius: 2px;
}

.pd-icon-placeholder--add::before,
.pd-icon-placeholder--add::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.pd-icon-placeholder--add::before {
    width: 8px;
    height: 1.5px;
}

.pd-icon-placeholder--add::after {
    width: 1.5px;
    height: 8px;
}

.pd-icon-placeholder--chevron::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 8px;
    width: 8px;
    height: 8px;
    border: none;
    border-right: 2px solid #556C91;
    border-bottom: 2px solid #556C91;
    border-radius: 0;
    transform: rotate(45deg);
}

.pd-icon-placeholder--check {
    width: 10px;
    height: 6px;
    background: transparent;
    opacity: 1;
    border-left: 2px solid #15803D;
    border-bottom: 2px solid #15803D;
    border-radius: 0;
    transform: rotate(-45deg);
    margin-top: -2px;
}

.pd-icon-placeholder--info-sm {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background: transparent;
    opacity: 0.7;
}

.pd-icon-placeholder--app {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background: #E5E8F0;
    opacity: 1;
}

/* ── Services Tailor To Your Need (Figma Package Pricing / add-ons) ── */
.pd-services-card {
    background: #FFFFFF;
    border: 1px solid #C4DAFD;
    border-radius: 20px;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 0;
}

.pd-services-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pd-services-title {
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #171D27;
}

.pd-services-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.pd-services-accordion {
    border-radius: 12px;
}

.pd-services-accordion-summary {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    list-style: none;
    cursor: pointer;
}

.pd-services-accordion-summary::-webkit-details-marker {
    display: none;
}

.pd-services-accordion[open] .pd-icon-placeholder--chevron::after {
    top: 10px;
    transform: rotate(225deg);
}

.pd-services-accordion-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
    text-align: left;
}

.pd-services-accordion-name {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #296DF5;
}

.pd-services-accordion-desc {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #3C4C67;
}

.pd-services-divider {
    width: 100%;
    height: 0;
    border-top: 1px solid #E5E8F0;
}

.pd-services-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    background: #F5FAFF;
    border: 1px solid #74A9FB;
    border-radius: 8px;
    padding: 12px 16px;
}

.pd-services-alert-text {
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #296DF5;
}

@media (max-width: 768px) {
    .pd-pricing--safe .pd-promo-card,
    .pd-services-card {
        padding: 20px;
    }

    .pd-pricing--safe .pd-promo-row {
        flex-direction: column;
        align-items: stretch;
    }

    .pd-pricing--safe .pd-promo-btn {
        width: 100%;
    }
}

/* ============================================================
   AG ONE Safe only — Figma OverviewSection Pricing (15519:138155)
   Scoped under .pd-pricing--safe so other products keep shared styles.
   ============================================================ */
.pd-pricing--safe .pd-tier-features li img {
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px;
}

.pd-pkg-entra-alert {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
    background: #F5FAFF;
    border: 1px solid #74A9FB;
    border-radius: 8px;
    padding: 12px 16px;
}

.pd-pkg-entra-alert-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.pd-pkg-entra-alert-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.pd-pkg-entra-alert-title {
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #296DF5;
}

.pd-pkg-entra-alert-desc {
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #283243;
}

.pd-pkg-entra-alert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 120px;
    height: 44px;
    padding: 0 24px;
    border-radius: 999px;
    border: 1.5px solid #0A50DC;
    background: transparent;
    color: #296DF5;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
}

.pd-pkg-entra-alert-btn:hover:not(:disabled) {
    background: #F5FAFF;
}

.pd-pkg-entra-alert-btn:disabled {
    opacity: 0.7;
    cursor: default;
}

@media (max-width: 768px) {
    .pd-pkg-entra-alert {
        flex-direction: column;
        gap: 12px;
    }

    .pd-pkg-entra-alert-btn {
        width: 100%;
    }
}

/* Figma 15914:233947 is 1200×874 with 384px cards (gap 24).
   Default .pd-inner max-width 1200 + padding 80 → 1040 content (~330px cards).
   Widen the Safe pricing shell so the grid can hit the full 1200 content width. */
.pd-pricing-section.pd-pricing--safe > .pd-inner {
    max-width: 1360px; /* 1200 content + 80*2 side padding */
}

/* AG ONE Safe only — Figma 16001:136093 Microsoft 365 / Azure platform tabs */
.pd-pricing--safe .pd-platform-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
}

.pd-pricing--safe .pd-platform-tabs-track {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: #F5F7F9;
    border-radius: 999px;
    box-sizing: border-box;
}

.pd-pricing--safe .pd-platform-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 90px;
    width: 250px;
    padding: 16px 40px;
    border: none;
    border-radius: 999px;
    background: #F5F7F9;
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: #283243;
    text-align: center;
    white-space: nowrap;
    cursor: default;
    box-sizing: border-box;
}

.pd-pricing--safe .pd-platform-tab--selected {
    background: #296DF5;
    color: #FFFFFF;
}

.pd-pricing--safe .pd-platform-tab--soon {
    color: #9FAEC6;
    cursor: not-allowed;
}

.pd-pricing--safe .pd-platform-tab--soon .pd-platform-tab-soon {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.pd-pricing--safe .pd-platform-tab:disabled {
    opacity: 1;
}

.pd-pricing--safe .pd-billing-header {
    padding-top: 0;
}

.pd-pricing--safe .pd-tiers {
    align-items: stretch;
    gap: 12px;
    margin-bottom: 0;
}

.pd-pricing--safe .pd-tier-grid {
    /* Keep the 3 Safe tiers in one row (Figma 15914:233947). auto-fit + minmax
       was collapsing to a single column whenever the pricing pane was under ~900px. */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
    width: 100%;
    max-width: 1200px;
}

.pd-pricing--safe .pd-tier-card {
    height: 100%;
    min-height: 0;
    border-color: var(--tier-border, #E1E8F2);
    transition: box-shadow .15s ease;
    overflow: visible; /* allow app-icon tooltips to escape the card */
    width: 100%;
}

.pd-pricing--safe .pd-tier-card:hover {
    border-color: var(--tier-border, #E1E8F2);
    box-shadow: 0 6px 18px rgba(41, 109, 245, 0.08);
}

.pd-pricing--safe .pd-tier-card--selected {
    border-color: var(--tier-header-selected, var(--tier-border, #E1E8F2));
    box-shadow: none;
    background: #FFFFFF;
}

.pd-pricing--safe .pd-tier-card--selected .pd-tier-card-head {
    background: var(--tier-header-selected, var(--tier-accent, #296DF5));
    border-bottom-color: var(--tier-header-selected, var(--tier-accent, #296DF5));
}

.pd-pricing--safe .pd-tier-card--selected .pd-tier-name,
.pd-pricing--safe .pd-tier-card--selected .pd-tier-sub,
.pd-pricing--safe .pd-tier-card--selected .pd-tier-final,
.pd-pricing--safe .pd-tier-card--selected .pd-tier-asterisk,
.pd-pricing--safe .pd-tier-card--selected .pd-tier-unit,
.pd-pricing--safe .pd-tier-card--selected .pd-tier-equiv {
    color: #FFFFFF;
}

.pd-pricing--safe .pd-tier-card-head {
    gap: 8px;
    padding: 24px;
    background: var(--tier-header-bg, #F5F7F9);
    border-bottom: 1px solid var(--tier-header-border, #B5C1D3);
    border-radius: 20px 20px 0 0;
}

.pd-pricing--safe .pd-tier-title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.pd-pricing--safe .pd-tier-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.pd-pricing--safe .pd-tier-name {
    flex: 1 1 auto;
    min-width: 0;
}

.pd-pricing--safe .pd-tier-info {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.55;
    border-color: #556C91;
    color: #556C91;
}

.pd-pricing--safe .pd-tier-sub {
    white-space: pre-line;
}

.pd-pricing--safe .pd-tier-price {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    padding: 0;
    background: transparent;
    overflow: hidden;
    width: 100%;
}

.pd-pricing--safe .pd-tier-price-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
}

.pd-pricing--safe .pd-tier-final-row {
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 2px;
    margin-bottom: 0;
}

.pd-pricing--safe .pd-tier-final {
    font-size: 39.06px;
    line-height: 1.4;
    white-space: nowrap;
}

.pd-pricing--safe .pd-tier-final--free {
    font-size: 28px;
}

.pd-pricing--safe .pd-tier-asterisk {
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--tier-price-color, #0B1B3A);
    line-height: 1.4;
    padding-top: 8px;
}

.pd-pricing--safe .pd-tier-unit {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tier-price-color, #0B1B3A);
    white-space: nowrap;
}

.pd-pricing--safe .pd-tier-equiv {
    font-size: 12px;
    font-weight: 400;
    color: var(--tier-price-color, #0B1B3A);
    white-space: nowrap;
}

/* Additional Users inset — Figma 15914:233947 header */
.pd-pricing--safe .pd-tier-addl-users {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    background: #FFFFFF;
    border: 1px solid #D6DBE6;
    border-radius: 12px;
    box-sizing: border-box;
}

.pd-pricing--safe .pd-tier-addl-users-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    overflow: hidden;
}

.pd-pricing--safe .pd-tier-addl-users-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pd-pricing--safe .pd-tier-addl-users-divider {
    width: 1px;
    align-self: stretch;
    background: #D9D9D9;
    flex-shrink: 0;
}

.pd-pricing--safe .pd-tier-addl-users-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.pd-pricing--safe .pd-tier-addl-users-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.pd-pricing--safe .pd-tier-addl-users-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #171D27;
    white-space: nowrap;
}

.pd-pricing--safe .pd-tier-addl-users-rate {
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--tier-price-color, #0B1B3A);
}

.pd-pricing--safe .pd-tier-addl-users-min {
    font-family: 'Noto Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--tier-price-color, #0B1B3A);
    white-space: pre-wrap;
}

.pd-pricing--safe .pd-tier-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
}

.pd-pricing--safe .pd-tier-body-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: visible;
}

.pd-pricing--safe .pd-tier-features {
    padding: 0;
    flex-grow: 0;
}

.pd-pricing--safe .pd-tier-feature-text {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #171D27;
    flex: 1 1 auto;
    min-width: 0;
}

.pd-pricing--safe .pd-tier-expansion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid #E5E8F0;
    width: 100%;
}

.pd-pricing--safe .pd-tier-expansion-title {
    margin: 0;
    line-height: 1.4;
}

.pd-pricing--safe .pd-tier-expansion-list {
    list-style: none;
    padding-left: 8px;
    gap: 4px;
}

.pd-pricing--safe .pd-tier-expansion-list li {
    position: relative;
    padding-left: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #283243;
}

.pd-pricing--safe .pd-tier-expansion-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #283243;
}

.pd-pricing--safe .pd-tier-apps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    width: 100%;
    flex-shrink: 0;
}

.pd-pricing--safe .pd-tier-apps-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #283243;
}

.pd-pricing--safe .pd-tier-apps-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    overflow: visible;
}

.pd-pricing--safe .pd-tier-app-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 0.5px solid #E5E8F0;
    background: #FFFFFF;
    overflow: visible;
    box-sizing: border-box;
}

.pd-pricing--safe .pd-tier-app-icon img,
.pd-pricing--safe .pd-tier-apps-row > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Figma 16272:140544 — logo tooltip (max 256px, arrow left) */
.pd-pricing--safe .pd-tier-app-tooltip {
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    box-sizing: border-box;
    width: max-content;
    max-width: 256px;
    padding: 6px 8px;
    border-radius: 4px;
    background: #D6DBE6;
    color: #283243;
    font-family: "Noto Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    word-break: break-word;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}

.pd-pricing--safe .pd-tier-app-tooltip::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid #D6DBE6;
}

.pd-pricing--safe .pd-tier-app-icon:hover .pd-tier-app-tooltip,
.pd-pricing--safe .pd-tier-app-icon:focus-within .pd-tier-app-tooltip {
    opacity: 1;
    visibility: visible;
}

.pd-pricing--safe .pd-tier-qty {
    margin: 0;
    width: 100%;
}

.pd-pricing--safe .pd-tier-choose {
    margin: 0;
    width: 100%;
    height: 44px;
    padding: 0 24px;
    border: none;
    background: linear-gradient(163.65deg, #0A50DC 0%, #4D91FA 100%);
}

.pd-pricing--safe .pd-tier-choose:hover {
    filter: brightness(1.05);
    background: linear-gradient(163.65deg, #0A50DC 0%, #4D91FA 100%);
}

.pd-pricing--safe .pd-tier-choose--selected,
.pd-pricing--safe .pd-tier-choose--selected:hover {
    filter: none;
    background: #E5E8F0;
    color: #9FAEC6;
    cursor: default;
}

/* Figma 15914:233948 — centered rounding disclaimer under the tier cards */
.pd-pricing--safe .pd-tier-footnote {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #3C4C67;
    text-align: center;
    margin: 0 auto;
    max-width: 524px;
    width: 100%;
    align-self: center;
}

/* AG ONE Safe only — Figma 15958:137087 How Pricing Is Calculated */
.pd-pricing--safe .pd-pricing-how-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    margin-top: 16px; /* parent gap 24px + 16px ≈ Figma 40px under footnote */
    padding: 32px;
    background: #FFFFFF;
    border: 1px solid #C4DAFD;
    border-radius: 20px;
    box-sizing: border-box;
}

.pd-pricing--safe .pd-pricing-how-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.pd-pricing--safe .pd-pricing-how-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    object-fit: contain;
}

.pd-pricing--safe .pd-pricing-how-title {
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #171D27;
}

.pd-pricing--safe .pd-pricing-how-body {
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #3C4C67;
}

.pd-pricing--safe .pd-pricing-how-body strong {
    font-weight: 700;
    color: #171D27;
}

.pd-pricing--safe .pd-pkg-included-card {
    border: 1px solid #C4DAFD;
    border-radius: 20px;
    margin-bottom: 0;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #FFFFFF;
    box-sizing: border-box;
}

.pd-pricing--safe .pd-pkg-included-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0;
    border-bottom: none;
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #171D27;
    text-transform: none;
    letter-spacing: 0;
}

.pd-pricing--safe .pd-pkg-included-header-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    object-fit: contain;
}

.pd-pricing--safe .pd-pkg-included-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.pd-pricing--safe .pd-pkg-included-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
    border-bottom: none;
}

.pd-pricing--safe .pd-pkg-included-check {
    width: 20px;
    height: 20px;
    margin-top: 0;
    flex-shrink: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 0;
}

.pd-pricing--safe .pd-pkg-included-check img {
    display: block;
    width: 20px;
    height: 20px;
}

.pd-pricing--safe .pd-pkg-included-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.pd-pricing--safe .pd-pkg-included-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #283243;
}

.pd-pricing--safe .pd-pkg-included-subtitle {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #3C4C67;
    margin-bottom: 0;
}

.pd-pricing--safe .pd-pkg-entra-alert {
    align-items: center;
}

.pd-pricing--safe .pd-pkg-entra-alert-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
}

.pd-pricing--safe .pd-pkg-entra-alert-btn img {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.pd-pricing--safe .pd-promo-card {
    border: 1px solid #C4DAFD;
    border-radius: 20px;
    padding: 24px 32px;
    margin-top: 40px;
    gap: 24px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
}

.pd-pricing--safe .pd-promo-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.pd-pricing--safe .pd-promo-head-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    object-fit: contain;
}

.pd-pricing--safe .pd-promo-head h3 {
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #171D27;
}

.pd-pricing--safe .pd-promo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.pd-pricing--safe .pd-promo-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #9FAEC6;
    border-radius: 6px;
    padding: 10px 16px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #171D27;
    background: #FFFFFF;
    box-sizing: border-box;
}

.pd-pricing--safe .pd-promo-input::placeholder {
    color: #9FAEC6;
}

.pd-pricing--safe .pd-promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 100px;
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    background: linear-gradient(135deg, #0A50DC 0%, #4D91FA 100%);
    color: #FFFFFF;
    cursor: pointer;
    box-sizing: border-box;
}

.pd-pricing--safe .pd-promo-btn:disabled {
    background: #D6DBE6;
    color: #9FAEC6;
    opacity: 1;
    cursor: not-allowed;
}

.pd-pricing--safe .pd-services-card {
    margin-top: 40px;
    padding: 24px 32px;
    gap: 24px;
    background: #FFFFFF;
    border: 1px solid #C4DAFD;
    border-radius: 20px;
    box-sizing: border-box;
    width: 100%;
}

.pd-pricing--safe .pd-services-head-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    object-fit: contain;
}

.pd-pricing--safe .pd-services-chevron {
    display: block;
    width: 14px;
    height: 8px;
    flex-shrink: 0;
    margin-top: 8px; /* optically center in the 24px Figma chevron slot */
    object-fit: contain;
    transition: transform .15s ease;
}

.pd-pricing--safe .pd-services-accordion[open] .pd-services-chevron {
    transform: rotate(180deg);
}

.pd-pricing--safe .pd-services-alert {
    align-items: center;
}

.pd-pricing--safe .pd-services-alert-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
}

@media (max-width: 1100px) {
    .pd-pricing--safe .pd-tier-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .pd-pricing--safe .pd-tier-grid {
        grid-template-columns: 1fr;
    }

    .pd-pricing--safe .pd-platform-tabs-track {
        width: 100%;
        gap: 8px;
    }

    .pd-pricing--safe .pd-platform-tab {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        padding: 14px 16px;
        font-size: 16px;
    }

    .pd-pricing--safe .pd-platform-tab--soon .pd-platform-tab-soon {
        font-size: 13px;
    }

    .pd-pricing--safe .pd-pkg-included-card,
    .pd-pricing--safe .pd-promo-card,
    .pd-pricing--safe .pd-services-card,
    .pd-pricing--safe .pd-pricing-how-card {
        padding: 20px;
    }

    .pd-pricing--safe .pd-tier-final {
        font-size: 32px;
    }

    .pd-pricing--safe .pd-tier-app-tooltip,
    .pd-pricing--safe .pd-tier-app-icon:hover .pd-tier-app-tooltip,
    .pd-pricing--safe .pd-tier-app-icon:focus-within .pd-tier-app-tooltip {
        display: none;
    }
}


/* ── "Services Tailor To Your Need" — Excel-driven items inside each accordion ── */
.pd-services-sub {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    line-height: 155%;
    color: #45556F;
    margin: 4px 0 12px;
}

.pd-services-items {
    display: flex;
    flex-direction: column;
    padding-top: 16px;
}

.pd-services-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 0;
    border-bottom: 1px solid #D6DBE6;
}

.pd-services-item:last-child {
    border-bottom: none;
}

.pd-services-item-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 0 0;
    min-width: 0;
}

.pd-services-item-name {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #171D27;
}

.pd-services-item-desc {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #3C4C67;
}