/* ----------------------------------------------------------------------------
   License Price Calculator - styles
   ----------------------------------------------------------------------------
   Scope: every selector below is namespaced under .pricing-calculator-wrapper
   so this stylesheet can coexist with the rest of the site's CSS without
   leaking or being overridden by unrelated rules.

   Layout strategy:
     .pricing-calculator-wrapper  -> outer container (bounds sticky behaviour)
       .pricing-calculator-layout -> 2-column CSS Grid
         .pricing-calculator-steps  -> left column (Step 1, future Steps 2-5)
         .pricing-calculator-sticky -> right column (vertical position: sticky)
   The sticky panel sticks inside its grid cell, so it stops naturally once
   the wrapper's content (Steps 1..5) ends, as required by the spec.

   Class naming standard (project-wide):
     Block       : pricing-step-card
     Element     : pricing-step-card-header, pricing-step-card-title
     Modifier    : pricing-product-card-hero, pricing-yesno-btn-active
     No underscores in class names. Hyphen only.
---------------------------------------------------------------------------- */

.pricing-calculator-wrapper {
    box-sizing: border-box;
    padding: 50px 0;
    color: #0f172a;
    width:95%;
    margin: 0 auto;
    max-width: 1450px;

    @media (max-width:767px) {
        padding-top: 30px !important;
        padding-left: 12px;
        padding-right: 12px;
        width: 96%;
    }
}

    .pricing-calculator-wrapper *,
    .pricing-calculator-wrapper *::before,
    .pricing-calculator-wrapper *::after {
        box-sizing: inherit;
    }

/* ---------- 2-column grid ---------- */
.pricing-calculator-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
    width: 100%;
}

.build-license-title{
    color: #0F172A !important;
    margin: 0 auto;
    font-weight: 700;
    font-size: 36px;
    line-height: 56px;
    letter-spacing: 0;
    width: max-content;

    @media (max-width:767px) {
        width: 100%;
        line-height: normal;
        font-size: 26px !important;
        padding-bottom: 12px;
    }
}

.build-license-desc{
    margin: 0 auto 35px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .4px;
    line-height: 28px;
    color: #475569;
    width: max-content;
    @media (max-width:767px) {
        width: 100%;
    }

    @media (min-width:768px) and (max-width:1024px) {
        width: 100%;
        text-align:center ;
    }

    @media (max-width:767px) {
        width: 100%;    
        width: 100%;
        text-align: center;
    }
}

/* Left column stretches full height naturally */
.pricing-calculator-steps {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0; /* prevent grid blowout when content is wide */
}

/* Right column: the only place that scrolls with you */
.pricing-calculator-sticky {
    position: sticky;
    top: 96px; /* clears page header / top menu */
    align-self: start;
}

/* ----------------- STEP CARD ----------------- */
.pricing-step-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 28px 28px 32px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.pricing-step-card-locked .pricing-step-card-header {
    margin-bottom: 0;
}

.pricing-step-card-header {
    margin-bottom: 24px;
}

.pricing-step-card-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #0057ff;
    margin-right: 12px;
    vertical-align: middle;
}

.pricing-step-card-title {
    display: inline;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    vertical-align: middle;
    color: #0f172a;

    @media (max-width:767px) {
        display: block;
    }
}

.pricing-step-card-description {
    margin: 8px 0 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
    @media (max-width:767px) {
       font-size: 15px;
    }
}

.pricing-step-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;

    @media (min-width:768px) and (max-width:1024px) {
        gap: 30px;
    }

    @media (max-width:767px) {
        gap: 20px;
    }
}

/* Step 2 (merged) - Document Solutions usage subsection.
   Sits inside the Developer step card body, below the per-product
   developer stepper. Visually separated from the developer section
   above with a soft top border + spacing so the user reads it as a
   related but distinct subsection of the same step.

   Visibility is driven by JS via the
   pricing-step-card-usage-subsection-hidden modifier - same pattern
   the other per-card hide helpers use (e.g.
   pricing-developer-panel-hidden) so the rendering pipeline is
   uniform across the calculator.

   The product list (.pricing-doc-usage-products) and the slider
   template (.js-doc-usage-template) keep their existing markup /
   class hooks, so the JS that builds the per-product blocks does
   not need to know about the merge. */
.pricing-step-card-usage-subsection {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pricing-step-card-usage-subsection-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
}

.pricing-step-card-usage-subsection-hidden {
    display: none;
}

/* Whole-row hide for the Step 4 single-platform and
   single-component offer questions. JS toggles this class
   via renderStep5RowVisibility() based on whether the UI
   Component Suite is in the cart - the rows are hidden by
   default and only revealed when the suite is selected.

   Same display: none shape as every other JS-toggled
   hide modifier in this file so the rendering pipeline
   stays uniform across the calculator. */
.pricing-qualify-row-hidden {
    display: none;
}

a.js-developer-max-notice-link, .js-doc-usage-notice-link {
    color: #0057ff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* JS-controlled hide for any step card that the markup
   still ships but is no longer wired into the user flow
   (e.g. a legacy payment step card that was promoted to
   the summary-card header toggle). Pure display rule so
   the rest of the card stays in the DOM for any debug
   or a11y tree inspection. */
.pricing-step-card-hidden {
    display: none;
}

/* ====================================================
   Step 2-5 lock state (no product selected in Step 1)
   ====================================================
   When the user has not yet picked any product in Step 1,
   Steps 2-5 stay visible and scrollable but their bodies
   carry a subtle greyed treatment so the user reads them
   as "not yet ready". JS toggles `pricing-step-card-locked`
   on every step 2-5 card based on whether at least one
   product is selected.

   The body of the locked card dims and the controls stay
   focusable so keyboard users still see the focus ring; JS
   blocks the change handlers and shows a single inline
   notice on the FIRST locked step (Step 2) when the user
   attempts any interaction. The notice text comes from the
   data-attr on the calculator wrapper so copy edits live
   in the Razor template.
*/
.pricing-step-card-locked {
    position: relative;
}

    .pricing-step-card-locked .pricing-step-card-body {
        opacity: 0.55;
        pointer-events: none;
        user-select: none;
        filter: saturate(0.7);
        display: none;
    }

    .pricing-step-card-locked .pricing-step-locked-notice {
        display: block !important;
    }

    .pricing-step-locked-notice {
        display: none;
        margin: 12px 0 16px;
        padding: 12px 14px;
        background: #eff5ff;
        border: 1px solid #eff5ff;
        border-radius: 8px;
        color: #475569;
        font-size: 14px;
        line-height: 1.5;
    }

        .pricing-step-locked-notice-icon {
            display: inline-block;
            margin-right: 8px;
            font-weight: 700;
        }

    .pricing-step-card-locked-show-notice .pricing-step-locked-notice {
        display: block;
    }

    .pricing-step-locked-notice span.glyphicon.glyphicon-info-sign {
        color: #0057FF !important;
        padding: 5px 5px 0 0;
    }

.pricing-step-card-locked-show-notice .pricing-step-locked-notice {
    display: block;
}

/* The notice itself stays interactive so the user can
    read + dismiss it even when the rest of the body
    has pointer-events: none. */
.pricing-step-card-locked .pricing-step-card-body > .pricing-step-locked-notice {
    opacity: 1;
    filter: none;
    pointer-events: auto;
    user-select: text;
}

/* ----------------- PRODUCT GROUP ----------------- */
.pricing-product-group {
    padding: 0px !important;
}

.pricing-product-group-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #64748b;
    margin: 0 0 14px;
    text-transform: uppercase;

    @media (min-width:768px) and (max-width:990px) {
        font-size: 14px !important;
        font-weight: 600;
    }
}

/* 3-up grid for SDK cards; the hero row sits outside the grid. */
.pricing-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* ----------------- PRODUCT CARD ----------------- */
.pricing-product-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    user-select: none;
}

    .pricing-product-card:hover {
        border-color: #cbd5e1;
    }

    .pricing-product-card:has(.pricing-product-card-checkbox:checked) {
        background: #e6efff;
        border: 1px solid #0057ff;
    }

/* Hide the native checkbox visually but keep it focusable for keyboard users. */
.pricing-product-card-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* Visible checkbox square - drawn via ::after so the rendered tick lives
   inside the box, exactly like the UI reference. */
.pricing-product-card-check {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
}

    .pricing-product-card-check::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 6px;
        width: 5px;
        height: 9px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg) scale(0);
        transform-origin: center;
    }

.pricing-product-card:has(.pricing-product-card-checkbox:checked) .pricing-product-card-check {
    background: #0057ff;
    border-color: #0057ff;
}

    .pricing-product-card:has(.pricing-product-card-checkbox:checked) .pricing-product-card-check::after {
        transform: rotate(45deg) scale(1);
    }

/* Right-hand body of the card - name + price stacked vertically. */
.pricing-product-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pricing-product-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;

    @media (min-width:990px) and (max-width:1200px) {
        font-size: 14px;
    }
}

.pricing-product-card-price {
    font-size: 13px;
    color: #64748b;
}

.pricing-product-card-price-amount {
    font-weight: 600;
    color: #475569;
}

.pricing-product-card-price-unit {
    font-weight: 400;
}

/* "Covered by the suite" treatment. When UI Component Suite is
   selected, the three covered standalone SDKs (Grid, Chart, File
   Manager) flip to this state: their checkbox stays checked and
   disabled, the price strikes through so the user reads the
   standalone amount as no-longer-applicable, and the brand-blue
   "Covered by the suite" label appears underneath as the real
   truth about the cost. The label is hidden by default so older
   snapshots that don't carry it still render cleanly. */
.pricing-product-card-covered-label {
    display: none;
    font-size: 13px;
    font-weight: 600;
    color: #0057ff;
    line-height: 1.3;
}

/* When covered, the price reads as struck-through (no additional
   cost) and the new label appears below it. */
.pricing-product-card-covered .pricing-product-card-price {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: #94a3b8;
    color: #94a3b8;
}

.pricing-product-card-covered .pricing-product-card-covered-label {
    display: block;
}

/* Hero variant - UI Edition card (full-width, emphasises the active selection) */
.pricing-product-card-hero {
    width: 100%;
    max-width: 320px;
}

/* ----------------- SUMMARY / STICKY CALCULATOR ----------------- */
.pricing-summary-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px 24px 22px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.pricing-summary-card-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #64748b;
    margin: 0 0 6px;
    text-transform: uppercase;
}

/* ====================================================
   Summary-card header � flex row that puts the "YOUR
   License" eyebrow on the left and the payment toggle
   on the right. The big per-dev price still sits below
   on its own line so the layout hierarchy stays the
   same as before � only the toggle was promoted up here
   from the (now-removed) Step 4 article.

   Spacing pass (2026-Q3):
     - 8px gap below the header so the big price reads as
       a separate visual block
     - 16px on either side of the toggle so it never crowds
       the card edge
   ==================================================== */
.pricing-summary-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px;
    min-height: 24px;
}

    .pricing-summary-card-header .pricing-summary-card-eyebrow {
        margin: 0;
        line-height: 1;
    }

/* Savings badge - green pill aligned to the right of the
   "YOUR Pricing" eyebrow. Rendered only when an active
   discount has produced a positive dollar savings, otherwise
   JS toggles the .pricing-summary-card-savings-hidden class.
   Lives in the header so the user sees "You save $X/year" at
   the same scan level as the eyebrow, before the eye drops
   to the hero number. */
.pricing-summary-card-savings {
    display: inline-flex;
    align-items: center;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    margin-left: auto;
}

    .pricing-summary-card-savings-hidden {
        display: none;
    }

/* ====================================================
   Payment schedule pill toggle (Yearly / Monthly).
   Lives in the top-right of the summary-card header.
   A pure-CSS "sliding thumb" indicates the active
   option; JS only toggles a namespaced active class on
   the matching label/input. The two radio inputs are
   visually hidden but kept focusable so the toggle is
   keyboard- and screen-reader-friendly.

   Visual treatment (2026-Q3 refresh):
     - 40px tall, 12px horizontal padding, 4px internal gutter
     - Soft slate track with a hairline border + inset shadow
     - White sliding thumb with a 2-layer shadow (tight contact
       + diffuse ambient) for a tactile, "floating" feel
     - Active option label uses the brand blue so the toggle
       reads as a primary control, not a passive filter
     - Focus ring uses a translucent brand-blue halo so the
       toggle stays keyboard-friendly without looking heavy
   ==================================================== */
.pricing-payment-toggle {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    height: 40px;
    padding: 2px;
    background: linear-gradient(180deg, #eef2f6 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
    isolation: isolate;
}

.pricing-payment-toggle-option {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    margin-bottom: 0px;
    justify-content: center;
    min-width: 84px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    user-select: none;
    letter-spacing: 0.01em;
    transition: color 180ms ease;
}

    .pricing-payment-toggle-option:hover {
        color: #1e293b;
    }

    /* The active option flips to the brand blue so the user
       immediately reads it as a primary control. The contrast
       against the white thumb is intentional � it gives the
       toggle a "highlighted CTA" feel without overwhelming
       the rest of the summary card. */
    .pricing-payment-toggle-option-active {
        color: #0057ff;
    }

/* Hide the actual <input type="radio"> visually but
   keep it focusable for keyboard nav + a11y. The
   thumb indicator visually represents the active
   radio so the hidden control stays a pure a11y hook. */
.pricing-payment-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

    /* Brand-blue halo for keyboard focus. Two-layer outline
       (a tight inner ring + a softer outer glow) so the
       focus state is unambiguous without looking heavy. */
    .pricing-payment-toggle-input:focus-visible + .pricing-payment-toggle-label {
        outline: 2px solid #0057ff;
        outline-offset: 3px;
        box-shadow: 0 0 0 4px rgba(0, 87, 255, 0.18);
        border-radius: 999px;
    }

.pricing-payment-toggle-label {
    display: inline-block;
    line-height: 1;
}

/* Sliding white thumb. Two-layer shadow (a tight contact
   shadow right under the thumb + a diffuse ambient shadow
   below) gives it a tactile, "floating" feel that makes
   the click feel responsive. Width is 50% of the toggle
   minus one padding-side, which lines up exactly with
   the two equal-width options. */
.pricing-payment-toggle-thumb {
    position: absolute;
    z-index: 0;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    background: #ffffff;
    border-radius: 999px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.10),
        0 4px 12px rgba(15, 23, 42, 0.10),
        0 0 0 1px rgba(15, 23, 42, 0.04);
    transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateX(0);
    pointer-events: none;
}

/* When the MONTHLY option is active, slide the thumb
   to the right by 100% of its own width (which is
   exactly the second option's column width). The
   equal-width assumption is enforced by the
   `min-width: 84px` on the option + a fixed 4px
   padding on the wrapper. */
.pricing-payment-toggle:has(.pricing-payment-toggle-option-active[data-step4-id="monthly"]) .pricing-payment-toggle-thumb {
    transform: translateX(100%);
}

/* IE / older browser fallback (no :has support) �
   JS adds `.pricing-payment-toggle-monthly-active` on
   the toggle root in that case, so we keep a
   belt-and-braces selector. */
.pricing-payment-toggle-monthly-active .pricing-payment-toggle-thumb {
    transform: translateX(100%);
}

/* Hero row. 2026-Q3 redesign: the hero now carries an OPTIONAL
   struck-through original price in front of the headline final
   price. When a discount is active, JS shows the strikethrough;
   otherwise the strike is hidden and only the big final number
   renders. The two spans share the line so the strike-through
   sits flush to the left of the headline. */
.pricing-summary-card-big {
    margin: 0 0 16px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    color: #0f172a;
}

.pricing-summary-card-big-strike {
    font-size: 28px;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: line-through;
    margin-right: 12px;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

    .pricing-summary-card-big-strike-hidden {
        display: none;
    }

/* Payment schedule block. 2026-Q3 redesign: this used to live in
   the top-right of the header; it now sits directly under the
   hero, paired with a "Payment schedule" eyebrow label and a
   dynamic one-line caption ("12 � $X per month" / "One payment
   of $X"). The Yearly/Monthly toggle (and its CSS) is unchanged
   - we just moved the host wrapper to a new container.

   2026-Q3.1 layout: two columns. Left column carries the
   "Payment schedule" eyebrow label only; right column carries
   the toggle + the dynamic caption stacked underneath it. The
   right column is right-aligned so the toggle lands flush with
   the right edge of the summary card, and the caption tracks
   it by inheriting the same `align-items: flex-end`. This
   matches Screenshot 2's pattern where the label sits on the
   left while the toggle + payment detail float to the right.
   The two columns are independent flex children so the label
   always sits at the natural top of the card and the right
   column lines up with whatever the toggle's height is. */
.pricing-summary-card-payment {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 20px 0 16px;
    @media (min-width:768px) and (max-width:990px) {
        flex-direction: column;
    }

}

    .pricing-summary-card-payment-hidden {
        display: none;
    }

.pricing-summary-card-payment-label {
    margin: 0;
    padding-top: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: #475569;
    line-height: 1;
    flex: 0 0 auto;
}

/* Right column wrapper (toggle + caption stacked). The wrapper
   itself is a column flex so the caption sits directly under
   the toggle, right-aligned, with the same right edge. The
   min-width: 0 allows the caption to wrap on narrow widths
   without overflowing the summary card. */
.pricing-summary-card-payment-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
}

.pricing-summary-card-payment-caption {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    line-height: 1.4;
    text-align: right;
}

/* Subtotal row (replaces the old .pricing-summary-card-discount
   line). Two-column flex: dynamic label on the left, value
   stack on the right (optional strike + final). When no
   discount is active, JS leaves the strike hidden and uses
   the plain "Subtotal" label. */
.pricing-summary-card-subtotal {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0 12px;
    border-top: 1px solid #eef2f7;
    margin: 4px 0 4px;
}

    .pricing-summary-card-subtotal-hidden {
        display: none;
    }

.pricing-summary-card-subtotal-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.pricing-summary-card-subtotal-label {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    flex: 1 1 auto;
    min-width: 0;
}

/* The "15%" portion of the subtotal label is rendered in
   green so the discount magnitude reads at a glance - the eye
   picks up the green percent before the slate "Subtotal after"
   + "Product Bundle Discount" body. The percent lives inline
   within the same sentence so the two pieces read as one
   natural label, not two stacked lines. */
.pricing-summary-card-subtotal-label .js-summary-subtotal-pct {
    color: #15803d;
    font-weight: 700;
}

.pricing-summary-card-subtotal-value-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.pricing-summary-card-subtotal-strike {
    font-size: 14px;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: line-through;
}

    .pricing-summary-card-subtotal-strike-hidden {
        display: none;
    }

.pricing-summary-card-subtotal-value {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

/* ====================================================
   Per-discount breakdown rows (replaces the old
   .pricing-summary-card-discount-* rules from the 2026-Q3
   redesign that folded every offer into a single "Subtotal
   after X% {Offer}" line).

   Each active offer (Quick Closing / Single-Platform /
   Single-Product / Product Bundle) is rendered as its own
   row directly under the Subtotal. Visual treatment:
     - Same two-column flex as the Subtotal row so the
       list reads as a continuation of the same column
     - Name on the left (slate, 14px, normal weight)
     - Negative dollar amount on the right (green, 14px,
       bold, tabular-nums so the digits align)
     - The percentage lives INSIDE the name string ("Quick
       Closing Discount (7.5%)") so the user sees each offer
       and its magnitude on one line
     - Empty container is hidden via the
       .pricing-summary-card-discount-list-hidden modifier
       (JS toggles it based on the active-rule count)
   ==================================================== */
.pricing-summary-card-discount-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 0 12px;
    margin: 0;
}

    .pricing-summary-card-discount-list-hidden {
        display: none;
    }

.pricing-summary-card-discount-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.pricing-summary-card-discount-list-name {
    font-size: 14px;
    font-weight: 500;
    color: #15803d;
    flex: 1 1 auto;
    min-width: 0;
}

.pricing-summary-card-discount-list-amount-wrap {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #15803d;
    font-weight: 600;
}

.pricing-summary-card-discount-list-amount {
    font-size: 14px;
    font-weight: 700;
    color: #15803d;
}

/* ====================================================
   Per-summary "Total" row (sits below the per-offer
   discount rows, above the divider that separates the
   discount block from "Due now").

   Visual treatment:
     - Mirrors the Subtotal row's two-column flex layout so
       the column sizes stay aligned across both rows
     - "Total" label on the left: 14px slate, 600 weight -
       matches Subtotal label so the eye reads both as part
       of the same arithmetic column
     - Value on the right: 18px slate-900, 700 weight, slate
       tabular-nums - one step larger than the Subtotal value
       (16px) so the final number dominates slightly; the
       Subtotal stays a passively scan-able reference number
     - Top border in slate-200 to act as a soft separator
       from the discount rows above
     - Always visible (Yearly AND Monthly) - on the empty
       cart this whole block stays hidden via the same
       logic that hides the Subtotal block
==================================================== */
.pricing-summary-card-total {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px 0 12px;
    border-top: 1px solid #e2e8f0;
    margin: 4px 0 4px;
}

    .pricing-summary-card-total-hidden {
        display: none;
    }

.pricing-summary-card-total-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.pricing-summary-card-total-label {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    flex: 1 1 auto;
    min-width: 0;
}

.pricing-summary-card-total-value {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

/* Highlighted annual-License band was removed in the 2026-Q3
   redesign - the value now lives in the hero at the top of the
   card, so a separate "Annual License" band would be a duplicate.
   Only the simple divider rule below remains in this family. */

.pricing-summary-card-divider {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 4px 0 14px;
}

/* Per-product blocks rendered by JS. Each block is a two-line
   card showing the product name + line total on top, and the dev
   count + per-dev rate underneath. A horizontal divider separates
   adjacent blocks so the eye reads each one as a discrete unit. */
.pricing-summary-card-lines {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 14px;
}

.pricing-summary-card-product {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0 12px;
    border-bottom: 1px solid #eef2f7;
}

    /* First child: no top padding so the divider sits flush with
       the section above (e.g. the monthly callout). */
    .pricing-summary-card-lines > .pricing-summary-card-product:first-child {
        padding-top: 4px;
    }

    /* Last child: no bottom border so the divider doesn't double-
       line the bottom-most product before the support row. */
    .pricing-summary-card-lines > .pricing-summary-card-product:last-child {
        border-bottom: 0;
    }

.pricing-summary-card-product-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0;
    color: #0f172a;
}

.pricing-summary-card-product-name {
    /* Matches the Annual License row label weight/size so the
       product name reads as a peer of the "Annual License" /
       "Monthly instalments" labels above the per-product block. */
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}

.pricing-summary-card-product-total {
    /* Matches the Annual License value (16px / 700) so the
       line totals feel like the same kind of number the user
       is paying. */
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.pricing-summary-card-product-sub {
    /* Matches the metadata row size (13px) so the dev count +
       per-dev rate reads as supporting copy, not a second
       headline. */
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.pricing-summary-card-product-usage {
    /* Sits directly under the developer-count sub-line. Reuses
       the metadata size + color so the eye reads the two
       quantity lines (developers + documents/year) as one
       supporting-copy tier under the bold product title, with
       the headline total on the right. The 2px top margin
       creates a hair of breathing room between the two
       quantity rows so they do not read as a single run-on
       line. */
    margin: 2px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

/* Surcharge breakdown rows inside a product block.
   Each row is its own two-column flex layout:
     [scope + math]      [total]
   The right column is right-aligned via `margin-left: auto`
   so the totals land in the SAME column as the parent line's
   "$total" above, giving the eye a single vertical edge to
   scan line after line. The left edge carries the human-
   readable scope ("100K Documents: $rate � N") so the user
   knows which band they're looking at without a chip.
   The total on the right is bold + tabular so it lands in
   the parent's dollar column and reads as a number, not
   meta-copy. */
.pricing-summary-card-surcharge-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.pricing-summary-card-surcharge-scope {
    /* Slight tint shift between tiers - the 1M row is a touch
       warmer than the 100K row so scanning two consecutive rows
       still feels differentiated, but neither band dominates
       the parent product line. */
    color: #64748b;
}

.pricing-summary-card-surcharge-scope-1m {
    color: #64748b;
}

.pricing-summary-card-surcharge-total {
    margin-left: auto;
    flex: 0 0 auto;
    text-align: right;
    font-weight: 700;
    color: #0f172a;
    font-size: 16px;
}

/* ====================================================
   Summary card - covered-SDK line item
   ====================================================
   A display-only row the calculator emits under the UI
   Component Suite's main entry for each covered SDK
   (Grid / Chart / File Manager). The row shows what the
   SDK would cost standalone (struck through) next to the
   $0 the user actually pays, so the value of the suite
   coverage is immediately legible.

   The wrapping .pricing-summary-card-product block re-uses
   the existing product-row flex structure so the left-edge
   text + right-edge amount alignment matches every other
   line item in the summary panel. The covered variant tweaks
   typography (lighter weight for the original price, green
   for the $0, smaller caption on the second line) so the
   row reads as a value-marker line rather than a charge.
*/
.pricing-summary-card-product-covered {
    /* Slightly muted overall so the row reads as supporting
       copy rather than a primary charge. The green $0 keeps
       its full colour so the win-the-user-is-getting-for-free
       message still pops. */
    opacity: 0.95;
}

.pricing-summary-card-product-total-wrap {
    /* Inline-flex so the original-struck-through and $0 sit on
       the same baseline as the parent line's `$total` span
       would; the green $0 lands in the same right-edge
       column the other line items land in. */
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.pricing-summary-card-product-covered-original {
    /* Smaller + lighter weight than the headline amount so the
       crossed-out figure reads as a value-was, not as the live
       charge. The strike-through is the affordance; the muted
       color keeps the visual hierarchy tight. */
    font-size: 14px;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: line-through;
}

.pricing-summary-card-product-covered-zero {
    /* Same size + weight as the other "$total" values so the
       right-edge column reads consistently across summary
       lines; green is the affordance that distinguishes the
       "covered for free" $0 from a paid $0. */
    font-size: 16px;
    font-weight: 700;
    color: #15803d;
}

.pricing-summary-card-product-covered-caption {
    /* Caption sits on a second line directly under the SDK
       name + the (struck + green) amounts, reading as a
       supporting footnote. Smaller font + slate color matches
       the secondary-copy tone used elsewhere on the product
       line (developer count sub-line, "Included in your
       suite license" call-outs in the byte-level adjacent
       blocks etc.). */
    margin: 2px 0 0;
    color: #475569;
    font-size: 12px;
    line-height: 1.4;
}

/* The "No products selected." empty state still uses the old
   single-line class for backwards compatibility. Re-assert the
   hidden state via the [hidden] attribute so it can never collide
   with the new block layout. */
.pricing-summary-card-line {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-size: 14px;
    color: #0f172a;
}

    .pricing-summary-card-line[hidden] {
        display: none;
    }

.pricing-summary-card-line-empty {
    color: #64748b;
    font-size: 13px;
    font-style: italic;
}

.pricing-summary-card-metadata {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding: 0px 0px 8px;
}

/* Hide modifier for the "Support" metadata row. Toggled from JS
   in render() so the row hides when no products are in the
   cart (empty-state experience) and reappears on the next
   non-empty render. Mirrors the existing
   .pricing-summary-card-payment-hidden / -subtotal-hidden /
   -total-hidden modifier family. */
.pricing-summary-card-metadata-hidden {
    display: none;
}

/* Hide modifier for the payment-schedule caption row
   ("12 x $X per month" / "One payment of $X"). Toggled from
   JS in render() so the caption collapses on empty carts
   while the Yearly/Monthly toggle ABOVE it stays visible -
   the user can pre-pick a payment schedule before any
   product is in the cart, but the placeholder "12 x $0 per
   month" copy is removed so the empty-cart UI doesn't carry
   misleading $0 numbers next to "No products selected.". */
.pricing-summary-card-payment-caption-hidden {
    display: none;
}

.pricing-summary-card-meta-row {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-size: 13px;
}

.pricing-summary-card-meta-label {
    color: #64748b;
}

.pricing-summary-card-meta-value {
    font-weight: 600;
    color: #0f172a;
}

/* Due now block */
.pricing-summary-card-due {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0;
}

.pricing-summary-card-due-label {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.pricing-summary-card-due-value {
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
}

/* Action buttons */
.pricing-summary-card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

/* Two-button row (Request quote + Download quote). Sits below the
   full-width primary "Buy now" button. The two buttons share the row
   with a 10px gap so they read as equal-weight peer actions. */
.pricing-summary-card-actions-row {
    display: flex;
    gap: 10px;
    width: 100%;

    @media (max-width:767px) {
        flex-direction: column;
    }
}

    .pricing-summary-card-actions-row .pricing-summary-card-btn {
        /* Override the full-width rule above so each sibling gets
           exactly half the row minus the gap. The two buttons stay
           touchable on narrow viewports via the existing
           mobile-stacking rules. */
        width: auto;
        flex: 1 1 0;
        min-width: 0;

        @media (max-width:767px) {
            flex: auto;
        }
    }

.pricing-summary-card-btn {
    width: 100%;
    border-radius: 8px;
    padding: 12px 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    /* Allow longer button labels (e.g. "Download quote") to shrink
       gracefully without breaking the row layout. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .pricing-summary-card-btn-primary {
        background: #0057ff;
        color: #fff;
        border: 1px solid #0057ff;
    }

        .pricing-summary-card-btn-primary:hover {
            background: #004bdb;
            border-color: #004bdb;
        }

        /* Overage state: the primary action either drops the secondary
           outline (per the screenshots) or recolours the primary itself.
           Here we shift to a deeper blue tint to reinforce the higher-touch
           call. */
        .pricing-summary-card-btn-primary-overage {
            background: #004bdb;
            border-color: #004bdb;
        }

    .pricing-summary-card-btn-secondary {
        background: #fff;
        color: #0f172a;
        border: 1px solid #e5e7eb;
    }

        .pricing-summary-card-btn-secondary:hover {
            border-color: #cbd5e1;
        }

    /* Tertiary "Download quote" button. Sits next to the secondary
       in the same row, sharing the same outline styling so the two
       read as equal-weight peer actions. The download icon prefix
       (when present) is vertically centred via the inline-flex
       treatment below. */
    .pricing-summary-card-btn-tertiary {
        background: #fff;
        color: #0f172a;
        border: 1px solid #e5e7eb;
    }

        .pricing-summary-card-btn-tertiary:hover {
            border-color: #cbd5e1;
        }

/* Hidden helper for the tertiary button. JS adds this class in
   the same conditions that hide the secondary (e.g. dev-ceiling
   state, where the primary already says "Request quote" and a
   second "Download quote" beside it would be noise). */
.pricing-summary-card-btn-tertiary-hidden {
    display: none;
}

/* Disabled-state cursor for the three CTAs (Buy Now / Request
   Quote / Download Pricing). Disabled via the native `disabled`
   prop on the <button> element, which JS toggles every render
   from renderSummaryPrimaryButton() based on
   hasAnyProductSelected(). Empty cart -> disabled. Pick a
   product -> enabled.

   The browser blocks `click` + keyboard activation events on
   disabled buttons natively - that's the validator. The only
   extra CSS needed is the `cursor: not-allowed` cue so the user
   sees a non-interactive control before they try to click. We
   deliberately do NOT change background / border / text colors
   here - the existing per-button palette (e.g. the primary's
   primary blue, the secondary/tertiary's white fill) stays
   intact so the disabled state reads as the same button, just
   visually inert. This also keeps the hover transitions
   consistent across enabled + disabled renders - hovering a
   muted-blue primary still tints to the deeper-overage blue
   so the user's interactive expectations don't shift. */

.pricing-summary-card-btn:disabled,
.pricing-summary-card-btn[disabled] {
    cursor: not-allowed;
}

.pricing-summary-card-link {
    text-align: center;
    color: #0057ff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 0;
}

    .pricing-summary-card-link:hover {
        text-decoration: underline;
    }

.pricing-summary-card-footnote {
    margin: 12px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

/* ====================================================
   Step 2 - Hot fix radio cards
   ==================================================== */
.pricing-radio-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pricing-radio-list span.glyphicon.glyphicon-info-sign{
    color: #0057FF !important;
    padding: 5px 5px 0 0;
}

.pricing-radio-list .infoDescritpion{
    display: flex;
}

.pricing-radio-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    user-select: none;
}

    .pricing-radio-card:hover {
        border-color: #cbd5e1;
    }

    .pricing-radio-card:has(.pricing-radio-card-input:checked),
    .pricing-radio-card-active {
        background: #e6efff;
        border: 1px solid #0057ff;
    }

.pricing-radio-card-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pricing-radio-card-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pricing-radio-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
}

.pricing-radio-card-subtitle {
    color: #475569;
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: 0.02px;
    margin: 0px 0 2px;
}

.pricing-radio-card-main span.glyphicon.glyphicon-info-sign {
    color: #0057FF !important;
    padding: 5px 5px 0 0;
}

/* ====================================================
   Step 3 - "Recommended" badge on Business Support
   ====================================================
   Visual treatment:
     - Brand-blue pill, white bold text (matches the
       Step 1 "Best value" pill pattern so the same
       brand-blue palette is used throughout the calculator
       for recommendation / "we suggest this" signals)
     - Inline-flex so the badge sits next to the title
       without disturbing the existing flex column layout
     - Always visible: the .pricing-radio-card-recommended
       modifier is applied to the Business Support card in
       markup (no JS toggle needed) because the recommendation
       status is static, not state-driven
   Responsive behavior:
     - The title row uses flex-wrap so the badge can fall
       onto a second line on very narrow viewports (=360px)
       without clipping or overflowing the card
*/
.pricing-radio-card-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pricing-radio-card-recommended-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #0057ff;
    color: #ffffff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1px;
    line-height: 1.4;
    white-space: nowrap;
}

/* Subtle accent on the recommended card so the title-row
   badge reads as part of a deliberate visual treatment
   even when the card is not the active selection. Active
   state styling (pricing-radio-card-active) takes priority
   and is unchanged. */
.pricing-radio-card-recommended {
    border-color: #c7d8ff;
}

    .pricing-radio-card-recommended:hover {
        border-color: #93b4ff;
    }


.pricing-radio-card-price {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    font-size: 20px;
}

.pricing-radio-card-price-amount {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.pricing-radio-card-price-unit {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

/* ====================================================
   Step 3 - Developer stepper
   ==================================================== */
.pricing-stepper-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.pricing-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.pricing-stepper-btn {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

    .pricing-stepper-btn:hover {
        background: #f1f5f9;
    }

    .pricing-stepper-btn:disabled {
        color: #64748b;
        cursor: not-allowed;
        background: transparent;
    }

.pricing-stepper-input {
    width: 64px;
    height: 44px;
    border: 0;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    font-family: inherit;
    appearance: textfield;
    -moz-appearance: textfield;
    background: #fff;
}

    /* Read-only stepper input (developer count). The user can
       NOT type into this box - the value is driven entirely by
       the +/- buttons. We keep the input visible (vs. replacing
       it with a plain label) so the layout stays a familiar
       stepper pattern, but the readonly state hides the native
       text caret + the iOS numeric keyboard on mobile. The
       background + border + cursor all match the editable
       state so the user reads it as "the count", not as a
       disabled control. */
    .pricing-stepper-input[readonly] {
        cursor: default;
        background: #fff;
        color: #0f172a;
        outline: none;
    }

        .pricing-stepper-input[readonly]:focus,
        .pricing-stepper-input[readonly]:focus-visible {
            outline: none;
            box-shadow: none;
        }

    .pricing-stepper-input::-webkit-outer-spin-button,
    .pricing-stepper-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.pricing-stepper-hint {
    font-size: 14px;
    color: #475569;
}

    .pricing-stepper-hint strong {
        color: #0f172a;
        font-weight: 700;
    }

/* ====================================================
   Step 3 - Developer mode picker + per-product panel
   ====================================================
   The Step 3 card hosts:
     1. A Yes/No mode picker (two pricing-radio-card siblings).
     2. A "shared" panel with the existing stepper + caption.
     3. A "per-product" panel with one stepper per selected product +
        a "Seats licensed for this team" footer.

   The two panels are mutually exclusive � JS toggles
   `pricing-developer-panel-hidden` to switch which one is visible. Both
   panels are mounted at first paint so the switch is instant (no
   layout reflow on toggle). */

/* Mode picker. Single checkbox row that decides state.developerMode
   (checked = shared, unchecked = per-product). Lighter visual than
   the previous Yes/No radio pair so it reads as a single question
   rather than a price selector. The native checkbox is hidden via
   the standard a11y clip pattern; the visible box + tick live in
   the sibling `.pricing-developer-mode-checkbox-tick` span and are
   styled from the input's :checked state via :has().

   Class names are namespaced under `pricing-developer-mode-*` so this
   styling never bleeds into the support-tier list (Step 4), which
   uses the generic `pricing-radio-list` + `pricing-radio-card`
   classes and must keep its original full-width stacked layout. */
.pricing-developer-mode-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f1f5f9;
    cursor: pointer;
    user-select: none;
}

    .pricing-developer-mode-checkbox:hover {
        border-color: #cbd5e1;
    }

.pricing-developer-mode-checkbox-input {
    /* Native input hidden visually, kept focusable for keyboard
       users. The visible box + tick live in the sibling tick span;
       the input's :checked state drives the styling via :has() in
       the rules below. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Visible checkbox square. Sized to match the product-card check
   square (20px) so the two checkbox styles look like the same
   component. */
.pricing-developer-mode-checkbox-tick {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    transition: background-color 80ms linear, border-color 80ms linear;
}

    .pricing-developer-mode-checkbox-tick::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 6px;
        width: 5px;
        height: 9px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg) scale(0);
        transform-origin: center;
        transition: transform 80ms ease-out;
    }

/* When the input is checked, the visible box turns blue and the
   tick scales in. Same color as the product-card checkbox so the
   calculator's checkbox language stays consistent. */
.pricing-developer-mode-checkbox:has(.pricing-developer-mode-checkbox-input:checked) .pricing-developer-mode-checkbox-tick {
    background: #0057ff;
    border-color: #0057ff;
}

    .pricing-developer-mode-checkbox:has(.pricing-developer-mode-checkbox-input:checked) .pricing-developer-mode-checkbox-tick::after {
        transform: rotate(45deg) scale(1);
    }

.pricing-developer-mode-checkbox-text {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.4;
    font-size: 15px;
    color: #0f172a;

    @media (max-width:767px) {
        line-height: 26px;
        display: block;
    }
}

    .pricing-developer-mode-checkbox-text strong {
        font-weight: 600;
        color: #0f172a;
    }

.pricing-developer-mode-checkbox-divider {
    color: #94a3b8;
    font-weight: 400;
}

.pricing-developer-mode-checkbox-hint {
    color: #64748b;
    font-weight: 400;
}

.pricing-developer-panel {
    /* Both panels share this baseline. The hidden variant uses display:none
       so the visible panel occupies the full body width cleanly. */
    margin-top: 4px;
}

.pricing-developer-panel-hidden {
    display: none !important;
}

/* ---------- Shared (Yes) panel layout ----------
   The shared panel is a white card holding a title + caption on the left
   and the developer stepper on the right. Wraps to a single column on
   narrow viewports so the stepper falls below the title without
   overlapping the caption. Matches the layout in screenshot 2. */
.pricing-developer-shared-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    flex-wrap: wrap;
}

.pricing-developer-shared-card-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 220px;
}

.pricing-developer-shared-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.pricing-developer-shared-caption {
    margin: 0;
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
}

    .pricing-developer-shared-caption strong {
        color: #0f172a;
        font-weight: 700;
    }

/* Per-product panel: list of stepper rows + a footer. */
.pricing-developer-per-product-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pricing-developer-per-product-empty {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.pricing-developer-per-product-empty-hidden {
    display: none !important;
}

.pricing-developer-per-product-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    flex-wrap: wrap;
}

.pricing-developer-per-product-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.pricing-developer-per-product-row-name {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

/* Inline group around the bold product name and its trailing
   "(It's applicable for ...)" bracket. .row-main is a flex
   column, so this wrapper turns the [name + bracket] pair into a
   single block-level flex item; inside the wrapper both spans
   default to inline, so the bracket flows naturally on the same
   line as the bold name (matching the screenshot). On rows
   without the bracket, the bracket span carries the hidden
   modifier and collapses out of the line. */
.pricing-developer-per-product-row-title {
    display: block;
}

.pricing-developer-per-product-row-applicable {
    margin-left: 4px;
    color: #475569;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
}

.pricing-developer-per-product-row-applicable-hidden {
    display: none;
}

.pricing-developer-per-product-row-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.pricing-developer-per-product-row-cap {
    font-size: 14px;
    color: #475569;
    font-weight: 500;
    min-width: 90px;
    text-align: right;
}

/* Per-product extra-developer hint. Sits DIRECTLY BELOW the product
   name in the left-hand column (.row-main), reading as a small
   supporting caption under the bold product title. Hidden by
   default; JS reveals it only when the per-product developer count
   exceeds the included threshold (5). The hidden variant is a pure
   display rule so the column's `gap: 2px` between name and hint
   doesn't introduce stray vertical spacing when the hint is off. */
.pricing-developer-per-product-row-hint {
    font-size: 13px;
    color: #475569;
    font-weight: 400;
    line-height: 1.4;
}

/* Per-product annual-usage surcharge break-down now lives inside the
   Document Usage / End Users Per Year subsection (see
   .pricing-doc-usage-product-surcharge below). Previously these rules
   styled the same content inside the per-product developer row, but
   that placement read as part of the developer-count card instead of
   part of the usage card. */

.pricing-developer-per-product-row-hint-hidden {
    display: none !important;
}

/* Compact stepper for the per-product row. Same look as the shared
   panel's stepper but slightly tighter so the row fits in one line on
   the common 360px+ calculator column. */
.pricing-stepper-compact .pricing-stepper-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
}

.pricing-stepper-compact .pricing-stepper-input {
    width: 56px;
    height: 36px;
    font-size: 15px;
}

/* "Seats licensed for this team" footer. Sits below the per-product
   list with the label + cost equation stacked on the left and the
   total number on the right. The cost equation is conditionally
   visible � it shows up the moment the SUM of per-product dev counts
   crosses the included threshold (5) and disappears again when the
   user steps back down, so the footer stays quiet when no extra cost
   applies. */
.pricing-developer-per-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    margin-top: 12px;
    flex-wrap: wrap;
}

.pricing-developer-per-product-footer-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 220px;
}

.pricing-developer-per-product-footer-label {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}

.pricing-developer-per-product-footer-cap {
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
}

.pricing-developer-per-product-footer-cap-hidden {
    display: none !important;
}

.pricing-developer-per-product-footer-seats {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ====================================================
   Step 4 - Payment schedule radio cards
   ==================================================== */
.pricing-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pricing-payment-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    user-select: none;
}

    .pricing-payment-card:hover {
        border-color: #cbd5e1;
    }

    .pricing-payment-card:has(.pricing-payment-card-input:checked),
    .pricing-payment-card-active {
        background: #e6efff;
        border: 1px solid #0057ff;
    }

.pricing-payment-card-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pricing-payment-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}

.pricing-payment-card-subtitle {
    font-size: 13px;
    color: #64748b;
}

/* ====================================================
   Step 5 - Qualify Yes/No rows
   ==================================================== */
.pricing-qualify-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pricing-qualify-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    /* Anchor for the info-button tooltip + ensure the pane
       can render outside the card boundary without being
       visually clipped by the card's rounded corner when the
       row sits in the bottom of a taller stack. */
    position: relative;
    overflow: visible;

    @media (max-width:767px) {
        gap: 20px;
        flex-direction: column;
        gap: 20px;
    }
}

    /* Row-card highlight removed � only the active Yes/No pill now
       signals a selected state. The row stays neutral so the highlight
       reads cleanly inside the pill itself. */

.pricing-qualify-row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pricing-qualify-row-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}

.pricing-qualify-row-subtitle {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
}

/* Yes/No group: each button is its own rounded pill with its own border.
   Resting state is a soft grey pill; the active pill turns green (matching
   the discount-status box palette) so the "yes" leg of a selected row reads
   as a positive confirmation rather than a state-fill of the row card. */
.pricing-yesno {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pricing-yesno-btn {
    appearance: none;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #475569;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 999px;
    font-family: inherit;
    min-width: 56px;
    text-align: center;
    line-height: 1.4;
}

    .pricing-yesno-btn:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

    .pricing-yesno-btn-active {
        background: #f0fdf4;
        color: #166534;
        border: 1px solid #16a34a;
    }

    /* Yes pill � green active palette (deeper than the resting green so the
       selected leg reads as "Yes, that one applies"). */
    .pricing-yesno-btn-active-yes {
        background: #f0fdf4;
        color: #166534;
        border-color: #16a34a;
        box-shadow: inset 0 0 0 1px #16a34a;
    }

        .pricing-yesno-btn-active-yes:hover {
            background: #dcfce7;
            border-color: #15803d;
            box-shadow: inset 0 0 0 1px #15803d;
        }

    /* No pill � neutral grey active palette so the selected leg reads as
       "No, that doesn't apply" without forcing a red/negative vibe. */
    .pricing-yesno-btn-active-no {
        background: #f1f5f9;
        color: #475569;
        border-color: #cbd5e1;
        box-shadow: inset 0 0 0 1px #cbd5e1;
    }

        .pricing-yesno-btn-active-no:hover {
            background: #e2e8f0;
            border-color: #94a3b8;
            box-shadow: inset 0 0 0 1px #94a3b8;
        }

/* ====================================================
   Responsive layout
   ==================================================== */

/* Tablet: keep 2 columns but tighten the calculator */
@media (max-width: 991px) {
    .pricing-calculator-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 0 16px;
    }

    .pricing-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile: stack vertically, calculator flows inline (no sticky) */
@media (max-width: 767px) {
    .pricing-calculator-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 0px;

    }

    .pricing-calculator-sticky {
        position: static;
        top: auto;
    }

    .pricing-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-payment-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pricing-product-card-hero {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .pricing-product-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pricing-summary-card-big {
        font-size: 30px;
    }

    .pricing-stepper-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Mobile: stack the Payment schedule two-column layout
       back to a single column so the label, toggle, and
       caption never overlap. The right column reverts to
       left alignment + the caption left-aligns, matching
       the rest of the card's mobile behavior. */
    .pricing-summary-card-payment {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .pricing-summary-card-payment-label {
        padding-top: 0;
    }

    .pricing-summary-card-payment-right {
        align-items: flex-start;
    }

    .pricing-summary-card-payment-caption {
        text-align: left;
    }
}

/* ====================================================
   Step 4 (conditional) - Document Solutions annual usage
   ====================================================
   Visible only when at least one Document Solutions product is selected.
   For each selected DS product one .pricing-doc-usage-product block holds a
   native range slider whose bubble + warning are toggled on every input
   event. The yellow warning is hidden via JS class toggle (not [hidden])
   so the same show/hide pattern as the bundle banner is reused.
*/
.pricing-doc-usage-card-hidden {
    display: none;
}

.pricing-doc-usage-products {
    display: flex;
    flex-direction: column;
}

.pricing-doc-usage-product {
    padding: 18px 0 22px;
    border-bottom: 1px solid #e5e7eb;
}

    .pricing-doc-usage-product:first-child {
        padding-top: 4px;
    }

    .pricing-doc-usage-product:last-child {
        padding-bottom: 4px;
        border-bottom: 0;
    }

/* ====================================================
   Doc-usage input row (� [value] +) � sits visually above
   the slider track per Screenshot 1. The three children
   share a single bordered card; the centre number input
   is the only element that displays the current value.
   The +/- buttons share the same border treatment as the
   developer stepper in Step 3 so the calculator's stepper
   language stays consistent. JS toggles `disabled` on the
   buttons at the floor/ceiling.
   ==================================================== */
.pricing-doc-usage-input-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    max-width: 360px;
    margin: 0 0 18px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.pricing-doc-usage-stepper-btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    user-select: none;
}

    .pricing-doc-usage-stepper-btn:hover {
        background: #f1f5f9;
    }

    .pricing-doc-usage-stepper-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.pricing-doc-usage-stepper-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 44px;
    border: 0;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    font-family: inherit;
    background: #fff;
    font-variant-numeric: tabular-nums;
    appearance: textfield;
    -moz-appearance: textfield;
    outline: none;
}

    .pricing-doc-usage-stepper-input:focus-visible {
        outline: 2px solid #0057ff;
        outline-offset: 2px;
    }

    .pricing-doc-usage-stepper-input::-webkit-outer-spin-button,
    .pricing-doc-usage-stepper-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
    }

.pricing-doc-usage-product-title {
    /* Title now occupies ONE row on its own: the bold product name
       alone, with no surcharge inline. The surcharge break-down
       lives in the row below (paired with the quantity stepper via
       .pricing-doc-usage-product-controls) so it visually aligns
       with the input box - not with the title. The bottom margin
       keeps the title's baseline a tidy small step above the
       input-row. */
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

/* Flex row that pairs the quantity stepper (left) with the surcharge
   break-down (right). The surcharge is pinned to the right edge via
   `margin-left: auto` on the surcharge block. `flex-wrap: wrap` lets
   the surcharge drop under the stepper on narrow viewports so the
   existing responsive behaviour is preserved - the surcharge always
   sits beside the input when space allows, otherwise underneath
   without pushing any other element. `align-items: flex-start` keeps
   both blocks top-aligned so when one wraps below the other, the
   row's height is driven by its tallest child. The bottom margin
   replaces the previous bottom margin on .pricing-doc-usage-input-
   row so the gap between controls and slider stays the same. */
.pricing-doc-usage-product-controls {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0 0 18px;

    @media (max-width:767px) {
        gap: 0;
        margin: 0;
    }
}

/* Inside the controls row, the input row no longer needs its own
   bottom margin - the controls wrapper owns the gap to the slider.
   The override is scoped to the controls descendant so it stays
   harmless if the markup regresses and the input row becomes a
   direct child of .pricing-doc-usage-product again. */
.pricing-doc-usage-product-controls .pricing-doc-usage-input-row {
    margin-bottom: 0;
}

/* Per-product surcharge break-down inside the "Document Usage / End
   Users Per Year" subsection. Renders to the RIGHT of the quantity
   stepper (margin-left:auto + display:flex), inside the row with
   the stepper rather than next to the title. Acts as a small right-
   aligned price column that mirrors the surcharge row styling used
   inside the summary card on the right of the page - font-size
   13px, slate scope label, bold dark total - so both sections read
   identically and never drift (single source of truth in JS via
   renderDocUsageSurcharge()). `flex-direction:column` + `gap:2px`
   stacks the two bands (100K and 1M) when the user has crossed 1M
   usage; `align-items:flex-end` keeps both rows right-aligned.

   STABLE FLOOR: min-height is sized for 2 band rows (2 x line-
   height x font-size + gap � 2 x 1.4 x 13 + 2 = 38.4, rounded to
   40). Add `min-height` regardless of whether 0, 1 or 2 band
   rows render so the host's height is constant. Inactive band
   rows keep their slot via `.pricing-doc-usage-product-surcharge-
   row-hidden` (visibility:hidden) so the surrounding input/slider
   rows never reflow on 100K / 1M transitions. */
.pricing-doc-usage-product-surcharge {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: normal;
    justify-content: flex-start;
    gap: 2px;
    min-height: 40px;
    font-size: 13px;
    line-height: 1.4;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

/* One surcharge band rendered inside the per-product surcharge block.
   The math expression is a SINGLE continuous string ("100K Documents:
   $995 \u00d7 7 = $6,965"), so the row is a plain inline span rather
   than a flex container. Wrapping inside a narrow viewport still
   reads cleanly because the text is one statement, not a split. The
   font-variant-numeric + color live on the parent surcharge block,
   so this row inherits them. */
.pricing-doc-usage-product-surcharge-row {
    display: inline;
}

/* A band row that has no billable units (e.g. when the user is at
   the included allowance and the 1M band has no overage, or the
   product doesn't carry a 1M rate row). visibility:hidden (NOT
   display:none) keeps the slot's height in flow so the parent
   .pricing-doc-usage-product-surcharge's min-height stays accurate
   across band transitions - the controls row never reflows when a
   band appears or disappears. NB: the parent surcharge container
   is only inserted for products with hasUsage=true, so this rule
   never fires stand-alone for non-usage products. */
.pricing-doc-usage-product-surcharge-row-hidden {
    visibility: hidden;
}

.pricing-doc-usage-track {
    position: relative;
    padding: 22px 0 56px;
}

.pricing-doc-usage-range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 6px;
    margin: 0;
    border-radius: 999px;
    background: #d1d5db;
    outline: none;
    cursor: pointer;
}

    .pricing-doc-usage-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #0057ff;
        border: 3px solid #fff;
        box-shadow: 0 0 0 1px #0057ff;
        cursor: pointer;
    }

    .pricing-doc-usage-range::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #0057ff;
        border: 3px solid #fff;
        box-shadow: 0 0 0 1px #0057ff;
        cursor: pointer;
    }

    .pricing-doc-usage-range:focus-visible {
        outline: 2px solid #0057ff;
        outline-offset: 4px;
    }

.pricing-doc-usage-output {
    /* Anchored to pointer position via `left: <pct>%` (set by
       pricingCalculator.js). The default `transform: translateX(-50%)`
       centres the chip on the thumb; JS toggles one of the
       `pricing-doc-usage-output-align-{left,right}` classes when the
       thumb is within ~15% of either edge so the bubble never
       overflows the card. */
    position: absolute;
    top: 40px;
    left: 0;
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: 14px;
    background: #eff6ff;
    color: #0057ff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    margin-bottom: 6px;
    max-width: 100%;
}

/* Near the LEFT edge of the track: anchor the bubble's left edge to
   the thumb so the chip doesn't bleed off the card on the left. */
.pricing-doc-usage-output-align-left {
    transform: translateX(0);
}

/* Near the RIGHT edge of the track: anchor the bubble's right edge to
   the thumb so the chip doesn't bleed off the card on the right. */
.pricing-doc-usage-output-align-right {
    transform: translateX(-100%);
}

.pricing-doc-usage-scale {
    /* Sits inside .pricing-doc-usage-track BELOW the slider bar and
       the value bubble. The track's `padding-bottom` reserves space
       for the labels so the warning banner (rendered as a sibling
       after the track) never collides with them. Each tick is
       absolutely positioned at its true proportional left % (set by
       JS via data-doc-usage-tick -> usageToPct) and centred on that
       position. */
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    height: 18px;
    pointer-events: none;
}

/* Wide scale (50K..25M) � used by Document SDK. Narrow scale
   (50K..1M) � used by PDF Viewer / DOCX Editor / Spreadsheet
   Editor. JS toggles which wrapper is visible based on the
   per-product max configured on the wrapper. */
.pricing-doc-usage-scale-wide,
.pricing-doc-usage-scale-narrow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18px;
    pointer-events: none;
}

.pricing-doc-usage-scale-wide-hidden,
.pricing-doc-usage-scale-narrow-hidden {
    display: none;
}

/* Shared style for the five milestone labels (50K / 1M / 5M / 10M / 25M).
   Each tick is absolutely positioned at its true proportional position
   on the slider track (set by JS) and centred horizontally on that
   position via translateX(-50%). The first/last ticks are nudged
   inward by a small inset so their text doesn't overflow the card. */
.pricing-doc-usage-scale-tick {
    position: absolute;
    top: 0;
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transform: translateX(-50%);
}

    /* Pin the leftmost tick to the left edge (its text reads from
       the start) and the rightmost tick to the right edge (its text
       reads to the end). Without these nudges, a centred
       translateX(-50%) on the 50K label would push "50K" half off
       the left side of the card, and "25M" would clip the right. */
    .pricing-doc-usage-scale-tick.pricing-doc-usage-scale-min {
        transform: translateX(0);
    }

    .pricing-doc-usage-scale-tick.pricing-doc-usage-scale-max {
        transform: translateX(-100%);
    }

/* ====================================================
   Step 2 - Document Usage over-limit notice
   ====================================================
   Per-product blue informational banner shown once the user
   pushes any DS product's slider above its threshold
   (Document SDK: 10M documents; Editor products: 1M end
   users). Lives directly under the slider so the user sees
   the limit in the exact place they are pushing it.

   2026-Q3.1.2 redesign: the previous yellow "Above the
   included allowance..." warning was replaced with this blue
   notice whose message body + "Request a custom quote" link
   are owned by the Razor template. The visual treatment is
   intentionally the same blue used by .pricing-developer-
   max-notice so all three in-flow information banners
   (developer limit, document-usage limit, end-user limit)
   read as the same kind of UI affordance.

   The host element is always in the DOM - JS only toggles
   the .pricing-doc-usage-notice-hidden class and populates
   the threshold + unit text - so the stylesheet is a pure
   visual layer with no render-mode logic. Link styling uses
   the brand-blue palette to keep the affordance visually
   consistent with the rest of the calculator.
*/
.pricing-doc-usage-notice {
    margin-top: 14px;
    padding: 12px 14px;
    background: #eff6ff;
    border: 1px solid #0057ff;
    border-radius: 8px;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
    /* Match the typography of the developer-max-notice so the
       eye reads both banners as the same kind of info. */
}

.pricing-doc-usage-notice-hidden {
    display: none;
}

    .pricing-doc-usage-notice a {
        /* Brand-blue link matches the calculator's primary
           CTA color (#0057ff) so the "Request a custom quote"
           affordance visually echoes the page's primary
           interaction. Underline keeps it obviously a link
           for users navigating without mouse hover. */
        color: #0057ff;
        text-decoration: underline;
        font-weight: 600;
    }

    .pricing-doc-usage-notice a:hover,
    .pricing-doc-usage-notice a:focus {
        color: #004bdb;
    }

/* ====================================================
   Step 5 - Grey "no offer" banner
   ====================================================
   Visible when no row in the qualify table answers Yes
   - i.e. the user does not qualify for any discount and
   the calculator is showing the standard annual License.
   Slotted directly under the rows so the answer reads next
   to the question. (The green "offer applied" status box
   that previously shared this slot was removed - offer names
   are no longer displayed in the calculator, so the banner
   became redundant with the "Discount (X%)" line in the
   summary card.)
*/
/* The .pricing-no-offer-banner* rules were removed in the
   2026-Q3.1.x redesign. The "No offer applies to this
   configuration" message is no longer shown in Step 4 - the
   Offer section now renders only the offer questions and
   Yes/No selections. The CSS selectors above are kept here
   purely as a documented placeholder so a future copy change
   doesn't accidentally reintroduce the banner with stale
   rules. */

.pricing-qualify-row-disabled {
    opacity: 0.55;
}

    .pricing-qualify-row-disabled .pricing-yesno-btn {
        background: #f8fafc;
        border-color: #e5e7eb;
        color: #64748b;
        cursor: not-allowed;
    }

    .pricing-qualify-row-disabled .pricing-yesno-btn-active {
        /* keep the active class visually muted so the disabled row doesn't
           appear selected. When the row becomes disabled (2+ products
           for the Single-Product row), renderStep5RowVisibility()
           force-resets state.step5['single-product'] to 'no', so the
           No pill is the one that gets the active class. The muted
           grey active style below reads as a soft visual confirmation
           that the question is answered, not a vibrant green "Yes,
           that offer applies" signal. */
        background: #f1f5f9;
        color: #64748b;
        border-color: #e5e7eb;
    }

/* ====================================================
   Step 4 - "Why this offer?" info link + tooltip
   ====================================================
   Inline link inside each Step 4 question title that opens a
   contextual tooltip explaining the offer. The tooltip matches
   the reference: light-blue info theme, no border, soft shadow,
   rounded corners, downward arrow, soft readable padding.
   Click to open, click outside (or Escape) to close. One tooltip
   at a time - opening a second closes the first.

   The title-row uses position: relative so the tooltip can
   anchor absolutely to the info trigger. The tooltip itself
   drops below the trigger with `top: calc(100% + 10px)` and an
   arrow using a rotated square with `box-shadow` so the
   downward point visually continues the tooltip body color.
==================================================== */
.pricing-qualify-row-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;

    @media (max-width:767px) {
        gap: 10px;
    }
}

.pricing-qualify-row-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.pricing-qualify-row-info-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0 2px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #0057ff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-underline-offset: 2px;
    text-decoration-color: rgba(0, 87, 255, 0.45);
    flex: 0 0 auto;
}

    .pricing-qualify-row-info-btn:hover,
    .pricing-qualify-row-info-btn:focus-visible {
        color: #004bdb;
        text-decoration-color: #004bdb;
        outline: none;
    }

    .pricing-qualify-row-info-btn[aria-expanded="true"] {
        color: #004bdb;
    }

/* The info-button glyph (blue "i" bubble) was removed in the
   2026-Q3.4 Step 4 rework - "Why this offer?" is now a plain
   underlined link with no leading icon. The CSS rule below is
   preserved in commented form only as a historical note; it is
   NOT applied to any markup so no glyph will render even if a
   stale <span class="pricing-qualify-row-info-btn-icon"> survives
   in markup. */
/*
.pricing-qualify-row-info-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0057ff;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
}
*/

.pricing-qualify-row-tooltip {
    /* Anchored to the RIGHT edge of the trigger wrap
       (.pricing-qualify-row-info-wrap), with a small visual
       gap (8px). The bubble's LEFT edge sits flush with the
       trigger's RIGHT edge, so the tooltip reads as
       "directly after the 'Why this offer?' text" - the
       exact mental model the user has for an info icon.

       The wrap is a stable flex child of the title-row
       (.pricing-qualify-row-title-row), so its position is
       predictable: it sits to the right of the title <p>
       on the same flex line (or drops to a second line if
       the title is long and wraps). The wrap's width is
       just the trigger button's content width, so
       `left: 100%` puts the bubble's left edge just to the
       right of the button. The bubble extends rightward
       from there.

       Why RIGHT (not LEFT): the user wants the tooltip to
       appear on the RIGHT side of the "Why this offer?"
       question. The trigger sits at the right end of the
       title-row's flex line, with only ~28px of room to its
       right before the summary card begins. The bubble
       extends over the summary card on wide viewports, and
       z-index: 50 keeps it on top. The row, step card, and
       2-column grid are all `overflow: visible`, so the
       bubble can paint outside the step card cleanly. The
       user is mid-interaction with the Step 4 card when
       the bubble is open, so the summary card being
       temporarily dimmed behind the bubble is acceptable
       UX.

       The bubble's max-width is clamped to the viewport
       minus page padding so it never forces a horizontal
       scroll, and the min-width of 240px keeps the body
       text readable on a single line where possible. */
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 8px;
    transform: translateY(-50%);
    z-index: 50;
    width: max-content;
    max-width: min(360px, calc(100vw - 60px));
    min-width: 240px;
    padding: 14px 16px;
    background: #fff;
    color: #0f172a;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12),
                0 2px 6px  rgba(15, 23, 42, 0.08);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

    .pricing-qualify-row-tooltip-hidden {
        display: none;
    }

/* Inline wrapper around the info button + its tooltip. The
   wrap is now a flex child of the title-row
   (.pricing-qualify-row-title-row), sitting to the right of
   the title <p>. As a flex item with flex: 0 0 auto, the
   wrap's width is the width of the trigger button - the
   tooltip (its absolute child) positions against the wrap's
   content box, so `right: 0` on the tooltip puts the
   tooltip's right edge flush with the trigger's right edge,
   and `left: 0` puts the tooltip's left edge at the
   trigger's left edge. The wrap itself is still the
   containing block for the absolute tooltip. */
.pricing-qualify-row-info-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Redundant heading was removed from the tooltip body in the
   2026-Q3.4 step - the tooltip now hosts ONLY the descriptive
   paragraph so the link itself + the body copy read as a
   single coherent message. The class is preserved as a no-op
   in case any future copy needs a sub-title inside the body.
*/
.pricing-qualify-row-tooltip-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.pricing-qualify-row-tooltip-body {
    margin: 0;
    font-size: 13px;
    color: #1e293b;
}

/* Arrow points LEFT (toward the trigger) because the
   tooltip now opens to the RIGHT of the trigger. The arrow
   sits on the bubble's left edge, vertically centered, so
   the notch points at the trigger's right edge. The shadow
   drops to the lower-right side of the rotated square to
   match the tooltip's main box-shadow direction. */
.pricing-qualify-row-tooltip-arrow {
    position: absolute;
    top: 50%;
    left: -6px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: translateY(-50%) rotate(45deg);
    box-shadow: 2px 2px 4px rgba(15, 23, 42, 0.05);
}

/* Responsive refinement on narrow viewports. The desktop
   RIGHT-anchored placement would push the bubble off the
   right edge of a 320px-wide phone screen, so we drop it
   BELOW the trigger instead (anchored to the wrap's LEFT
   edge so the bubble stays in the row's content area, with
   a small vertical gap). The min-width is dropped so the
   bubble doesn't force a horizontal scroll, and the
   max-width is clamped to the viewport minus the page
   padding. The arrow re-orients to point UP from the
   bubble's top edge, aligned just to the left of the
   trigger so the notch lines up with the trigger's
   left edge. */
@media (max-width: 480px) {
    .pricing-qualify-row-tooltip {
        top: 100%;
        left: 0;
        right: auto;
        margin: 10px 0 0;
        transform: none;
        max-width: calc(100vw - 40px);
        min-width: 0;
    }
    .pricing-qualify-row-tooltip-arrow {
        top: -6px;
        left: 18px;
        right: auto;
        transform: rotate(45deg);
    }
}

/* ====================================================
   Summary card - discount line ("-X")
   ====================================================
   Inserts an entry between the metadata block and the divider that
   shows the active Step 4 offer (e.g. "Early-close offer -$375")
   or the auto-applied bundle (e.g. "Bundle product offer (15%) -$1,438").
   Hidden when no offer is active.

   The label column is allowed to grow so a longer bundle label
   (offer name + "(pct%)") flows naturally before wrapping. The
   value column stays right-aligned. The percentage in parens is
   rendered by JS so the offer name and the percentage stay on the
   same visual line.
*/
/* The old .pricing-summary-card-discount* rules were removed in
   the 2026-Q3 redesign. Discount UI is now expressed through the
   hero strikethrough + savings badge + .pricing-summary-card-
   subtotal row (label, strike, final). */

/* ====================================================
   Step 3 - Max-developer informational notice
   ====================================================
   Blue informational banner shown once the user reaches the per-
   product developer ceiling (default 25). Lives directly under
   the "Developers in this team" stepper (shared panel) or the
   "Seats licensed for this team" footer (per-product panel), so
   the user sees the limit in the exact place they are pushing it.

   The host element is always in the DOM � JS only toggles the
   `pricing-developer-max-notice-hidden` class � so the stylesheet
   can be a pure visual layer with no render-mode logic.

   Visual treatment is intentionally the same blue used for the
   stepper's selected state (#0057ff) so the banner reads as an
   informational call-to-action, not an error. The soft blue
   background (#eff6ff) keeps it visually distinct from the
   stepper row without competing for attention.
*/
.pricing-developer-max-notice {
    margin-top: 12px;
    padding: 12px 14px;
    background: #eff6ff;
    border: 1px solid #0057ff;
    border-radius: 8px;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
}

.pricing-developer-max-notice-hidden {
    display: none;
}

/* When the primary Buy Now button has been re-purposed as
   "Request quote" because the developer ceiling was hit, hide the
   secondary "Request quote" button so the user does not see two
   identical CTAs stacked on top of each other. JS adds this class;
   the hidden state is a pure display rule here. */
.pricing-summary-card-btn-secondary-hidden {
    display: none;
}

/* Optional distinct style for the dev-ceiling case. The base
   overage rule (pricing-summary-card-btn-primary-overage) already
   covers the visual shift; this class is here as a hook for any
   future per-case styling without re-touching JS. */
.pricing-summary-card-btn-primary-max-devs {
    /* Intentionally empty � kept as a stylesheet hook. */
}

/* ====================================================
   Step 1 - "Best value" pill (auto-suggest only)
   ====================================================
   Shown on the UI Component Suite card ONLY when the suite
   entered the cart because the user picked 2+ covered SDKs
   and the auto-suggest fired (state.suiteAutoSuggested === true).
   Hidden for manual suite picks so the pill is a faithful
   "we recommended this" signal, not a permanent badge.

   Visual treatment:
     - Brand-blue pill, white bold text
     - Sits at the bottom of the card body so the suite name +
       per-dev price still read as the primary card content
     - Inline-flex with a tiny horizontal margin so it doesn't
       collide with the price line above on the narrow 320px
       hero card width
   The label element is always in the markup; the parent card
   carries the pricing-product-card-best-value modifier while the
   pill is shown, so the visibility toggle is a pure CSS rule
   with no JS textContent churn on the hidden path.
*/
.pricing-product-card-best-value-label {
    display: none;
    align-self: flex-start;
    margin-top: 6px;
    padding: 4px 12px;
    background: #0057ff;
    color: #ffffff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
}

.pricing-product-card-best-value .pricing-product-card-best-value-label {
    display: inline-flex;
}

/* ====================================================
   Step 1 - UI Component Suite group + auto-suggest banner
   ====================================================
   The suite group is rendered as a flex row so the auto-suggest
   banner (right of the card) can sit beside the suite card on
   the same horizontal axis. On narrow viewports the row wraps
   and the banner falls below the card.

   The banner uses the same brand-blue palette as the
   dev-ceiling / monthly-callout notices so the user reads it as
   the same kind of "informational call-to-action" element. The
   visual treatment is intentionally subtle: thin brand-blue
   border, soft blue background, dark slate text. Hidden by
   default via the `pricing-suite-auto-suggest-banner-hidden`
   modifier; JS adds/removes the modifier based on
   state.suiteAutoSuggested. The body text is rendered from the
   wrapper's data-suite-auto-suggest-banner-template via .text()
   so user-edited copy never injects HTML.
*/
.pricing-product-group-suite-row {
    display: flex;
    align-items: stretch;
    gap: 18px;
    flex-wrap: wrap;
}

    .pricing-product-group-suite-row .pricing-product-card-hero {
        /* Hero card width is 320px; combined with the banner the row
           fits comfortably on the 600px+ step-1 column at desktop
           widths and wraps cleanly on tablet/mobile. */
        flex: 0 0 auto;
        margin-bottom: 0px;
    }

.pricing-suite-auto-suggest-banner {
    flex: 1 1 280px;
    align-self: center;
    margin: 0;
    padding: 14px 18px;
    background: #eff6ff;
    border-radius: 10px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    min-width: 0;
}

/* Dynamic Best Value banner - title (bold) + description (normal).
   The wrapper's font-weight: 600 is the default for the description
   paragraph; the title overrides to 700 so the visual hierarchy
   matches the reference (bold headline, normal-weight sub-copy). */
.pricing-suite-auto-suggest-banner-title {
    margin: 0 0 4px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
}

.pricing-suite-auto-suggest-banner-body {
    margin: 0;
    font-weight: 400;
    color: #0f172a;
    line-height: 1.5;
}

/* Info glyphicon at the start of each banner title. Sits inside
   the title <p> so it inherits the title's 700 / 14px treatment
   and line-height. Right margin gives a small visual gap before
   the text, and the brand-blue colour ties the icon to the
   banner's existing border + step label palette so it reads as
   "this is an informational notice" without introducing a new
   visual element. */
.pricing-suite-auto-suggest-banner-title .glyphicon,
.pricing-suite-included-banner-title   .glyphicon {
    margin-right: 6px;
    color: #0057ff;
    font-size: 14px;
    top: 1px;
}

.pricing-suite-auto-suggest-banner-hidden {
    display: none;
}

/* ====================================================
   Step 1 - Direct-suite informational banner
   ====================================================
   Shown when the user manually checks the UI Component Suite
   (NOT during the Best Value auto-suggest path - that scenario
   uses the savings banner above). Visually identical to the
   Best Value wrapper so the two banners can swap into the same
   grid cell without the user noticing any layout shift:
   same brand-blue palette, padding, border, and 14px/600
   defaults. The title / body sub-paragraphs mirror the
   pricing-suite-auto-suggest-banner-title / -body structure
   so they sit in the same vertical rhythm when they swap.

   Mutual exclusion with the Best Value banner is enforced in
   JS: renderSuiteIncludedBanner() early-returns when
   state.suiteAutoSuggested is true, so at most one of the
   two banners is visible at any time.

   Naming convention:
     - pricing-suite-included-banner      -> the wrapper
     - pricing-suite-included-banner-... -> title/body/hidden

   These rules live in a separate namespace from the savings
   banner so the two hosts are independent in the DOM, but the
   visual treatment is byte-for-byte mirrored. If a future
   change touches the banner palette, update BOTH blocks.
*/
.pricing-suite-included-banner {
    flex: 1 1 280px;
    align-self: center;
    margin: 0;
    padding: 14px 18px;
    background: #eff6ff;
    border-radius: 10px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    min-width: 0;
}

.pricing-suite-included-banner-title {
    margin: 0 0 4px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
}

.pricing-suite-included-banner-body {
    margin: 0;
    font-weight: 400;
    color: #0f172a;
    line-height: 1.5;
}

.pricing-suite-included-banner-hidden {
    display: none;
}

/* ====================================================
   Step 4 (qualification) - One-platform row visibility
   ====================================================
   The one-platform qualification row is hidden when the UI
   Component Suite is NOT selected. JS toggles this modifier
   on .js-step5-qualify-single-platform based on
   state.selectedProducts['ui-edition']. The rule is a pure
   display: none (so the row drops out of the flex layout
   cleanly instead of leaving a blank gap) and is namespaced
   under `pricing-` so it can never collide with the rest of
   the calculator's hide helpers.
*/
.pricing-qualify-row-hidden {
    display: none;
}