/* Buy Now (v2) pricing widget — sized 1:1 with pricing/variant1.html.
   The only delta from the prototype is the outer #pricing_wrapper chrome
   (rounded white card with subtle gradients) so the widget sits inside the
   site's pricing section framing. Inner styles mirror the prototype exactly:
     - Plus Jakarta Sans
     - Compact header: 14px navy pill + clamp(24px, 3.4vw, 40px) title
     - Card sizes/padding/colors lifted verbatim from variant1.html

   All inner rules are scoped under #pricing_wrapper #s9-buynow-pricing so
   theme cascades can't ghost the heading or distort card heights. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

#pricing_wrapper {
    padding: 80px 60px;
    background-color: #FFFFFF;
    /* 70px (not 60px) is the intended radius — there was a duplicate
       `border-radius: 60px` declaration earlier in the rule that the
       70px below was overriding via cascade. Collapsed to one line. */
    border-radius: 70px;
    position: relative;
    z-index: 1;
    /* Combined: `margin: 0 auto 0px` + `margin-top: -70px` into a single
       shorthand. Same computed values (top -70, right/left auto, bottom 0). */
    margin: -70px auto 0px;
    width: 100%;
    overflow: hidden;
}

#pricing_wrapper .pricing_bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* background:
        radial-gradient(ellipse 600px 400px at 95% 5%, rgba(31, 134, 255, 0.08), transparent 70%),
        radial-gradient(ellipse 500px 300px at 5% 95%, rgba(31, 134, 255, 0.06), transparent 70%); */
}

#pricing_wrapper #s9-buynow-pricing {
    --navy: #0F2447;
    --navy-2: #173263;
    --navy-soft: #1B3A73;
    --blue: #1F86FF;
    --blue-2: #2D95FF;
    --blue-soft: #BFD9FF;
    --blue-pale: #E3EEFF;
    --pill-light: #DDE7FA;
    --pill-track: #C9DCFB;
    --text-muted: #8C9DBE;
    --text-on-dark: #ffffff;
    --shadow-card: 0 12px 32px -16px rgba(15, 36, 71, 0.25);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;
    z-index: 1;
    color: var(--navy);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#pricing_wrapper #s9-buynow-pricing *,
#pricing_wrapper #s9-buynow-pricing *::before,
#pricing_wrapper #s9-buynow-pricing *::after {
    box-sizing: border-box;
}

#pricing_wrapper #s9-buynow-pricing .wrap {
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
/* Text inside the widget (titles, prices, labels, plan bullets) is
   selectable by default. Only block selection on the interactive
   controls — the slider already opts out via its own rule above; this
   covers buttons (segmented toggles + Buy buttons). Prevents the
   "I can't even highlight the price" UX issue without breaking
   double-click / drag on the controls themselves. */
#pricing_wrapper #s9-buynow-pricing button,
#pricing_wrapper #s9-buynow-pricing .segmented {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ----- Header (subtitle pill + title) — 1:1 with prototype ----- */
#pricing_wrapper #s9-buynow-pricing .header {
    text-align: center;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

/* Reset block-level h4/h2 defaults so flow matches the prototype's pill+h1 */
#pricing_wrapper #s9-buynow-pricing .pricing_subtitle,
#pricing_wrapper #s9-buynow-pricing .pricing_title {
    all: unset;
    display: block;
    text-align: center;
    color: var(--navy);
    font-family: inherit;
}

/* Mirrors prototype .pricing-pill */
#pricing_wrapper #s9-buynow-pricing .pricing_subtitle {
    display: inline-block;
    background: var(--navy);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 6px 16px;
    border-radius: 999px;
    letter-spacing: 0.2px;
    line-height: 1.2;
}

/* Mirrors prototype h1 */
#pricing_wrapper #s9-buynow-pricing .pricing_title {
    font-weight: 800;
    font-size: clamp(24px, 3.4vw, 40px);
    margin: 8px 0 0;
    letter-spacing: -0.5px;
    line-height: 1.1;
    z-index: 2;
    position: relative;
}

@media screen and (max-width: 1100px) {
    /* Scale the tuck-under proportionally: -70px → -50px at this
       breakpoint. The preceding section also gets smaller here, so
       the pull-up needs to shrink with it. */
    #pricing_wrapper { padding: 60px 40px; border-radius: 48px; margin-top: -50px; }
}
@media screen and (max-width: 720px) {
    /* On phones the pull-up effect tends to clip awkwardly; flatten
       to 0 and let the wrapper sit naturally below whatever's above. */
    #pricing_wrapper { padding: 48px 22px; border-radius: 36px; }
}

/* ----- Controls row -----
   Layout strategy: the controls row stays self-contained at every viewport.
   It establishes its own positioning context (`position: relative`) and
   reserves a left gutter equal to `--s9bn-ninty-size` at desktop widths.
   The mascot is absolutely positioned into that gutter so it can never
   reach into the header or overlap the title — the wrap's old "right-
   aligned controls leaving a passive gutter" trick fails as soon as the
   wrap narrows enough that controls expand to fill it (the 1065 bug). */
#pricing_wrapper #s9-buynow-pricing .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto 28px;
    max-width: 1020px;
    position: relative;
    /* Default to no reserved gutter; desktop media query below adds it. */
    padding-left: 0;
}
#pricing_wrapper #s9-buynow-pricing .control {
    background: var(--navy);
    color: #fff;
    border-radius: 22px;
    padding: 14px 18px 16px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
}
#pricing_wrapper #s9-buynow-pricing .control-label {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: #DCE6FA;
    letter-spacing: 0.15px;
    margin-bottom: 10px;
    line-height: 1.2;
}

#pricing_wrapper #s9-buynow-pricing .control-quantity { flex: 1.6 1 380px; min-width: 320px; }
#pricing_wrapper #s9-buynow-pricing .control-commitment-wrap { flex: 1 1 300px; min-width: 280px; }
#pricing_wrapper #s9-buynow-pricing .control-type { flex: 0 1 220px; min-width: 220px; }

/* ----- Slider ----- */
#pricing_wrapper #s9-buynow-pricing .slider-wrap {
    position: relative;
    height: 40px;
    cursor: pointer;
    user-select: none;
}
#pricing_wrapper #s9-buynow-pricing .slider-track {
    position: absolute;
    inset: 0;
    background: var(--pill-track);
    border-radius: 999px;
    overflow: hidden;
}
#pricing_wrapper #s9-buynow-pricing .slider-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, #6CB1FF 0%, #2D95FF 100%);
    border-radius: 999px;
    transition: width 0.18s ease-out;
}
#pricing_wrapper #s9-buynow-pricing .slider-thumb {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--blue);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    height: 40px;
    min-width: 60px;
    padding: 0 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(31, 134, 255, 0.45);
    transition: left 0.18s ease-out;
    pointer-events: none;
}
#pricing_wrapper #s9-buynow-pricing .slider-thumb.dragging { transition: none; }
#pricing_wrapper #s9-buynow-pricing .slider-fill.dragging { transition: none; }
#pricing_wrapper #s9-buynow-pricing .slider-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s var(--ease);
    box-shadow: 0 4px 14px rgba(15, 36, 71, 0.35);
}
#pricing_wrapper #s9-buynow-pricing .slider-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--navy);
}
#pricing_wrapper #s9-buynow-pricing .slider-thumb.active .slider-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
#pricing_wrapper #s9-buynow-pricing .slider-hints {
    position: relative;
    margin-top: 6px;
    height: 14px;
    color: #8AA4D2;
}
#pricing_wrapper #s9-buynow-pricing .slider-hints .hint {
    position: absolute;
    top: 0;
    font-size: 11px;
    font-weight: 600;
    transform: translateX(-50%);
    user-select: none;
}
#pricing_wrapper #s9-buynow-pricing .control-quantity .control-label { transition: opacity 0.18s ease; }
@media (max-width: 720px) {
    #pricing_wrapper #s9-buynow-pricing .control-quantity.dragging .control-label { opacity: 0; }
}

/* ----- Commitment + payment frequency ----- */
#pricing_wrapper #s9-buynow-pricing .commitment-card {
    background: var(--navy);
    border-radius: 22px;
    padding: 14px 18px 16px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    position: relative;
}
@media (min-width: 721px) {
    #pricing_wrapper #s9-buynow-pricing .control,
    #pricing_wrapper #s9-buynow-pricing .commitment-card { min-height: 117px; }
}
#pricing_wrapper #s9-buynow-pricing .segmented {
    background: var(--pill-light);
    border-radius: 999px;
    padding: 4px;
    display: flex;
    position: relative;
    gap: 0;
}
#pricing_wrapper #s9-buynow-pricing .segmented button {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    color: var(--navy);
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.25s var(--ease), color 0.25s var(--ease);
    position: relative;
    z-index: 1;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}
#pricing_wrapper #s9-buynow-pricing .segmented button.active {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 4px 12px rgba(31, 134, 255, 0.35);
}

#pricing_wrapper #s9-buynow-pricing .payment-freq {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-6px);
    margin-top: 0;
    position: relative;
    transition:
        grid-template-rows 0.55s var(--ease),
        opacity 0.35s ease,
        transform 0.55s var(--ease),
        margin-top 0.55s var(--ease);
}
#pricing_wrapper #s9-buynow-pricing .payment-freq > .pf-inner {
    overflow: hidden;
    min-height: 0;
}
#pricing_wrapper #s9-buynow-pricing .payment-freq.show {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
    margin-top: 12px;
}
#pricing_wrapper #s9-buynow-pricing .payment-freq-inner-card {
    background: var(--blue);
    border-radius: 18px;
    padding: 12px 14px;
}
#pricing_wrapper #s9-buynow-pricing .payment-freq-inner-card .control-label {
    color: #fff;
    margin-bottom: 8px;
}
#pricing_wrapper #s9-buynow-pricing .payment-freq-inner-card .segmented {
    background: rgba(255,255,255,0.18);
}
#pricing_wrapper #s9-buynow-pricing .payment-freq-inner-card .segmented button {
    color: #fff;
    font-size: 13px;
    padding: 0 6px;
}
#pricing_wrapper #s9-buynow-pricing .payment-freq-inner-card .segmented button.active {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* ----- Type segmented -----
   The General pill is sized to its content (no flex-grow) so it doesn't
   stretch awkwardly across the segmented when the Type card is wider
   than the buttons need. The segmented as a whole centers within the
   card via .segmented's own flex layout. */
#pricing_wrapper #s9-buynow-pricing .type-segmented { justify-content: center; }
#pricing_wrapper #s9-buynow-pricing .type-segmented button { padding: 0 14px; }
#pricing_wrapper #s9-buynow-pricing .type-segmented button[data-val="general"] { flex: 0 1 auto; min-width: 0; }
#pricing_wrapper #s9-buynow-pricing .type-segmented button[data-val="niche"] { flex: 0 0 auto; padding: 0 12px; }
#pricing_wrapper #s9-buynow-pricing .type-segmented svg {
    display: block;
    pointer-events: none;
    height: 24px;
    width: auto;
    max-width: 100%;
}

/* ----- DR cards -----
   minmax(0, 1fr) instead of bare 1fr: a bare `1fr` track resolves to
   `minmax(auto, 1fr)`, and `auto` defers to the content's intrinsic
   min-width. While animateNumber rolls the price text, the intrinsic
   min-width oscillates, which expands and contracts the column on
   every frame — that's the visible wobble across the whole 6-card
   row (since 1fr columns share their inflation). Clamping the floor
   at 0 forces strict equal-share, so card width stays constant
   regardless of content width. */
#pricing_wrapper #s9-buynow-pricing .cards-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
    position: relative;
}
@media (max-width: 1100px) {
    #pricing_wrapper #s9-buynow-pricing .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 720px) {
    #pricing_wrapper #s9-buynow-pricing .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #pricing_wrapper #s9-buynow-pricing .card-price { font-size: 28px; }
    #pricing_wrapper #s9-buynow-pricing .card-price-base { font-size: 13px; }
}
@media (max-width: 380px) {
    #pricing_wrapper #s9-buynow-pricing .card-price { font-size: 24px; }
    #pricing_wrapper #s9-buynow-pricing .card-price-base { font-size: 12px; }
    #pricing_wrapper #s9-buynow-pricing .card-total { font-size: 15px; }
    #pricing_wrapper #s9-buynow-pricing .card-total .total-suffix { font-size: 12px; }
    #pricing_wrapper #s9-buynow-pricing .card-total-label { font-size: 11px; }
    #pricing_wrapper #s9-buynow-pricing .card-inner { padding: 12px 12px 8px; }
    #pricing_wrapper #s9-buynow-pricing .card-header { padding: 10px 12px; }
    #pricing_wrapper #s9-buynow-pricing .dr-label { font-size: 14px; }
    #pricing_wrapper #s9-buynow-pricing .popular-badge { font-size: 9px; padding: 2px 6px; }
    #pricing_wrapper #s9-buynow-pricing .commitment-card { padding: 12px 12px 14px; }
    #pricing_wrapper #s9-buynow-pricing .payment-freq-inner-card { padding: 10px 10px; }
    #pricing_wrapper #s9-buynow-pricing .payment-freq-inner-card .segmented button { font-size: 11px; padding: 0 3px; letter-spacing: -0.2px; }
    #pricing_wrapper #s9-buynow-pricing .control { padding: 12px 14px 14px; }
    #pricing_wrapper #s9-buynow-pricing .control-quantity,
    #pricing_wrapper #s9-buynow-pricing .control-commitment-wrap,
    #pricing_wrapper #s9-buynow-pricing .control-type { min-width: 0; flex-basis: 100%; }
}

#pricing_wrapper #s9-buynow-pricing .dr-card {
    background: #10335f;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, opacity 0.25s ease, filter 0.25s ease;
    box-shadow: var(--shadow-card);
}
#pricing_wrapper #s9-buynow-pricing .dr-card:hover { transform: translateY(-2px); }
#pricing_wrapper #s9-buynow-pricing .dr-card.unavailable {
    opacity: 0.4;
    filter: grayscale(0.4);
}
#pricing_wrapper #s9-buynow-pricing .dr-card.unavailable:hover { transform: none; }

#pricing_wrapper #s9-buynow-pricing .dr-card .card-header {
    background: #077dfd;
    transition: background 0.3s var(--ease);
}
#pricing_wrapper #s9-buynow-pricing .dr-card.featured-card .card-header { background: #0e44b0; }

#pricing_wrapper #s9-buynow-pricing .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    /* Fixed height (not min-height) so a featured card's badge can never push
       the header taller and break the row's vertical alignment. */
    height: 44px;
    gap: 6px;
}
#pricing_wrapper #s9-buynow-pricing .dr-label {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    /* Explicit line-height so theme cascades on spans don't shift it. */
    line-height: 1;
}
#pricing_wrapper #s9-buynow-pricing .popular-badge {
    background: #10335f;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
    line-height: 1;
    transition: opacity 0.25s ease, transform 0.25s var(--ease);
    transform-origin: right center;
}
#pricing_wrapper #s9-buynow-pricing .popular-badge.is-off {
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#pricing_wrapper #s9-buynow-pricing .card-inner {
    padding: 14px 14px 10px;
    flex: 1;
}
#pricing_wrapper #s9-buynow-pricing .card-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
#pricing_wrapper #s9-buynow-pricing .card-price {
    /* Fluid size: smaller at the narrow end of desktop so a 6-up grid
       (cards ~165px wide at 1100px viewport) still fits price +
       strikethrough on one line, larger at wide viewports. */
    font-size: clamp(30px, 2.4vw, 38px);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.8px;
    white-space: nowrap;
}
#pricing_wrapper #s9-buynow-pricing .card-price-base {
    font-size: 18px;
    font-weight: 600;
    color: rgba(170, 207, 255, 0.55);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}
#pricing_wrapper #s9-buynow-pricing .card-price-base.is-hidden { display: none; }
#pricing_wrapper #s9-buynow-pricing .card-per-link {
    font-size: 16px;
    line-height: 1em;
    font-weight: 500;
    color: #99c4f8;
}
#pricing_wrapper #s9-buynow-pricing .card-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.10);
    margin: 10px 0 8px;
}
#pricing_wrapper #s9-buynow-pricing .card-total-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
    min-height: 14px;
}
#pricing_wrapper #s9-buynow-pricing .card-total {
    font-size: 18px;
    font-weight: 600;
    color: #aacfff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    white-space: nowrap;
}
#pricing_wrapper #s9-buynow-pricing .card-total .total-suffix {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 1px;
}
#pricing_wrapper #s9-buynow-pricing .card-total-base {
    font-size: 15px;
    font-weight: 600;
    color: rgba(170, 207, 255, 0.55);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.1;
    transition: opacity 0.2s ease;
}
#pricing_wrapper #s9-buynow-pricing .card-total-base.is-hidden { display: none; }
#pricing_wrapper #s9-buynow-pricing .card-total-label {
    font-size: 12px;
    font-weight: 400;
    color: #aacfff;
    white-space: nowrap;
    width: 100%;
}
#pricing_wrapper #s9-buynow-pricing .card-btn-wrap { padding: 0 10px 10px; }
#pricing_wrapper #s9-buynow-pricing .card-btn {
    width: 100%;
    padding: 10px;
    border-radius: 16px;
    border: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    background: #077dfd;
    color: #fff;
    transition: background 0.15s ease, transform 0.15s ease;
}
#pricing_wrapper #s9-buynow-pricing .card-btn:hover { background: #1884fe; transform: translateY(-1px); }
#pricing_wrapper #s9-buynow-pricing .card-btn:active { transform: translateY(0); }
#pricing_wrapper #s9-buynow-pricing .card-btn:disabled,
#pricing_wrapper #s9-buynow-pricing .dr-card.unavailable .card-btn {
    background: #4d6280;
    cursor: not-allowed;
    transform: none;
}
#pricing_wrapper #s9-buynow-pricing .card-btn.is-loading {
    opacity: 0.7;
    cursor: wait;
}

/* ----- Footer all-plans grid ----- */
/* Used to be a single-row flex pill with dot separators. With 8 perks
   in the list it wrapped to two lines with one straggling item — broke
   the visual rhythm. Now a centered header + responsive grid: 4 cols
   on desktop, 2 on tablet, 1 on phone. Items keep the same soft-blue
   container but the layout reads as a structured feature list. */
#pricing_wrapper #s9-buynow-pricing .all-plans {
    margin-top: 18px;
    background: var(--blue-pale);
    border-radius: 18px;
    padding: 14px 24px 16px;
    color: var(--navy);
    font-size: 13px;
}
#pricing_wrapper #s9-buynow-pricing .all-plans__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--blue);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}
#pricing_wrapper #s9-buynow-pricing .all-plans__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 22px;
}
#pricing_wrapper #s9-buynow-pricing .all-plans__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--navy);
    line-height: 1.3;
}
#pricing_wrapper #s9-buynow-pricing .all-plans__tick {
    flex: 0 0 auto;
    color: var(--blue);
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
}
@media (max-width: 900px) {
    #pricing_wrapper #s9-buynow-pricing .all-plans__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 420px) {
    #pricing_wrapper #s9-buynow-pricing .all-plans__list {
        grid-template-columns: 1fr;
    }
}
#pricing_wrapper #s9-buynow-pricing .check {
    width: 18px; height: 18px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    font-size: 11px;
    font-weight: 900;
}

/* ----- Toast ----- */
#pricing_wrapper #s9-buynow-pricing .s9bn-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%) translateY(20px);
    background: var(--navy);
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(15, 36, 71, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.25s var(--ease);
    z-index: 10000;
    max-width: calc(100vw - 32px);
}
#pricing_wrapper #s9-buynow-pricing .s9bn-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ----- Ninty mascot ----- */
/* Size is driven by a single CSS variable on the pricing widget root so the
   controls row can reserve a matching gutter when Ninty switches into the
   in-flow layout at narrow viewports. Within the desktop range (≥1024px)
   the linear expression resolves to 220px at 1024vw and 300px at 1920vw;
   the clamp pins those endpoints. Smaller viewports get explicit overrides
   in the media queries below. */
#pricing_wrapper #s9-buynow-pricing {
    /* Desktop Ninty size: small enough to leave plenty of room for the
       commitment card to grow when Payment frequency expands (4-button
       segmented). Old clamp(220, …, 300) cramped the controls at
       1100–1300px and clipped "Yearly". */
    --s9bn-ninty-size: clamp(160px, calc(80px + 6.5vw), 220px);
}
/* Ninty is the only animation container — kept `position: absolute` and
   anchored to `.controls` (which is always `position: relative`). Every
   other element in the widget is `position: relative` so Ninty's box
   can never escape its row or collide with the header / cards.
   At desktop the controls reserve a left gutter equal to Ninty's size,
   and Ninty fills it; at narrow viewports Ninty moves above the
   controls (see media queries below). */
.s9bn-ninty {
    position: absolute;
    top: 0;
    left: 0;
    --n-size: var(--s9bn-ninty-size);
    width: var(--n-size);
    height: var(--n-size);
    max-width: var(--n-size);
    max-height: var(--n-size);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
}
/* Full-screen confetti rain. Spawned by rainConfetti() in
   scripts/ninty_pricing.js, lives at document.body root so it can cover
   the whole viewport regardless of where it was triggered from. ~180
   particles fall from above the top edge to past the bottom edge over
   1.4-2.2s each, staggered by up to 800ms, with a horizontal sway and
   randomized rotation for a natural-looking drift. Suppressed under
   prefers-reduced-motion. */
.s9bn-confetti-rain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}
.s9bn-confetti-rain__p {
    position: absolute;
    top: -24px;
    left: var(--x, 50%);
    width: var(--w, 8px);
    height: var(--h, 8px);
    will-change: transform, opacity;
    animation: s9bn-confetti-rain-fall var(--dur, 1.8s) cubic-bezier(.45, .1, .65, 1) forwards;
    animation-delay: var(--d, 0ms);
    opacity: 0;
}
@keyframes s9bn-confetti-rain-fall {
    0%   { transform: translate3d(-50%, 0, 0) rotate(0deg); opacity: 0; }
    6%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translate3d(calc(-50% + var(--sway, 0px)), calc(100vh + 60px), 0) rotate(var(--rot, 0deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .s9bn-confetti-rain { display: none; }
}

/* Discoverability cue — speech bubble above Ninty that explains he's
   clickable and what clicking does. Shown by JS via `.is-cue-visible`
   on the container once waving settles; removed via `.is-cue-gone`
   after the first press. Reduced motion: no bob, no fade — instant. */
.s9bn-ninty__cue {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    /* translate3d (rather than translateX + translateY) keeps the bubble
       on a dedicated GPU compositor layer for the entire animation. With
       a plain 2D translate, the browser re-rasterizes the text on each
       frame to the new sub-pixel position, and the text antialiasing
       shifts visibly — that's the wobble. With translate3d + will-change
       the text is rasterized once and the GPU just translates the cached
       bitmap, so antialiasing stays stable. */
    transform: translate3d(-50%, 6px, 0) scale(0.92);
    background: #ffffff;
    color: #10335F;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(16, 51, 95, 0.18),
                0 1px 2px rgba(16, 51, 95, 0.12);
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transition: opacity 0.35s ease,
                transform 0.35s cubic-bezier(.16, .85, .35, 1);
    z-index: 5;
}
.s9bn-ninty__cue strong {
    color: #1F86FF;
    font-weight: 700;
}
.s9bn-ninty__cue::after {
    /* Pointer triangle pointing down at Ninty's head. */
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #ffffff;
    /* Match the bubble's drop shadow to avoid a visible seam. */
    filter: drop-shadow(0 3px 1px rgba(16, 51, 95, 0.10));
    margin-top: -1px;
}
.s9bn-ninty.is-cue-visible .s9bn-ninty__cue {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
    animation: s9bn-cue-bob 3.2s ease-in-out 0.5s infinite;
}
.s9bn-ninty.is-cue-gone .s9bn-ninty__cue {
    opacity: 0;
    transform: translate3d(-50%, -6px, 0) scale(0.94);
    animation: none;
}
@keyframes s9bn-cue-bob {
    /* Whole-pixel endpoints + translate3d keep the GPU layer stable.
       Slower cycle (3.2s) gives a calmer, less attention-flickery bob. */
    0%, 100% { transform: translate3d(-50%, 0,    0) scale(1); }
    50%      { transform: translate3d(-50%, -4px, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .s9bn-ninty.is-cue-visible .s9bn-ninty__cue {
        animation: none;
        transition: opacity 0.2s linear;
    }
}

.s9bn-ninty__video {
    position: absolute;
    inset: 0;
    --n-size: 100%;
    width: var(--n-size);
    height: var(--n-size);
    /* Belt-and-suspenders: even if any rule above is overridden, these caps
       keep the video from expanding past the container's size. */
    max-width: var(--n-size);
    max-height: var(--n-size);
    object-fit: contain;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.s9bn-ninty__video.is-active {
    opacity: 1;
}

/* Desktop (≥1100px): Ninty sits to the LEFT of the controls in a reserved
   gutter that is part of the controls box itself (padding-left). Because
   the gutter is built into .controls rather than relying on the wrap's
   leftover space, it never collapses — and Ninty cannot reach the header.
   The controls row is also widened so it fills the wrap (no more right-
   aligned trick) and is internally centered around the actual controls. */
@media (min-width: 1100px) {
    #pricing_wrapper #s9-buynow-pricing .controls {
        max-width: 1320px;
        padding-left: calc(var(--s9bn-ninty-size) + 18px);
    }
    #pricing_wrapper #s9-buynow-pricing .control,
    #pricing_wrapper #s9-buynow-pricing .commitment-card { min-height: 110px; }
    /* Quantity stays fluid. Commitment is wider/heavier than before so
       its inner Payment-frequency segmented (4 buttons) always fits. */
    #pricing_wrapper #s9-buynow-pricing .control-quantity { flex: 1.2 1 300px; min-width: 260px; }
    #pricing_wrapper #s9-buynow-pricing .control-commitment-wrap { flex: 1.2 1 290px; min-width: 280px; }
    #pricing_wrapper #s9-buynow-pricing .control-type { flex: 0 0 auto; min-width: 0; }
    /* Anchor Ninty's BOTTOM to the controls' bottom so the mascot extends
       upward into the header (where the title is centered and the left
       gutter is empty) instead of downward into the test-run banner. */
    .s9bn-ninty {
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
    }
}

/* Below 1200px the row can no longer hold all three controls
   comfortably — force Quantity to claim the full first row so
   Commitment + Type wrap together onto row 2. Skips the in-between
   state where Type ends up stranded alone.
   Placed AFTER the desktop @media (min-width: 1100px) block above so
   source-order wins at 1100-1199px (both queries match in that range). */
@media (max-width: 1199px) {
    #pricing_wrapper #s9-buynow-pricing .control-quantity { flex-basis: 100%; }
}

/* Below 1100px the controls fill the row; Ninty hops above them into its
   own header strip. We pad the top of .controls by Ninty's size so the
   absolute mascot has guaranteed vertical room. */
@media (max-width: 1099px) {
    #pricing_wrapper #s9-buynow-pricing {
        --s9bn-ninty-size: clamp(150px, 20vw, 210px);
    }
    #pricing_wrapper #s9-buynow-pricing .controls {
        padding-top: calc(var(--s9bn-ninty-size) + 18px);
    }
    .s9bn-ninty {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 860px) {
    #pricing_wrapper #s9-buynow-pricing {
        --s9bn-ninty-size: clamp(140px, 22vw, 200px);
    }
}

@media (max-width: 480px) {
    #pricing_wrapper #s9-buynow-pricing {
        --s9bn-ninty-size: clamp(120px, 32vw, 160px);
    }
    #pricing_wrapper #s9-buynow-pricing .controls {
        padding-top: calc(var(--s9bn-ninty-size) + 12px);
    }
}

/* ============================================================
   Services without the Test Run flow (e.g. brand_mention) render
   without the Ninty mascot. The Ninty-reservation paddings above
   were measured against the mascot's size, so when it's gone they
   produce a tall empty strip above the controls (mobile/tablet)
   and an offset gutter that shifts the controls right (desktop).
   Strip both reservations and trim the title margin so the
   controls hug the header naturally. Tighten the bottom gap on
   the header too — without the mascot poking up into it, the
   spec'd 18px feels generous.
   ============================================================ */
#pricing_wrapper #s9-buynow-pricing.is-no-ninty .controls {
    padding-left: 0;
    padding-top: 0;
}
#pricing_wrapper #s9-buynow-pricing.is-no-ninty .header {
    margin-bottom: 22px;
}

/* ============================================================
   Test Run mode — engaged by Ninty's pressing animation.
   Banner sits above the DR cards and the commitment segmented
   control becomes non-interactive, with the inactive option
   visually dimmed to communicate the lock.
   ============================================================ */
#pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 14px 22px;
    border-radius: 16px;
    background: linear-gradient(95deg, #0F2447 0%, #1B3A73 100%);
    border: 1px solid rgba(31, 134, 255, 0.45);
    color: #fff;
    box-shadow: 0 8px 24px rgba(15, 36, 71, 0.22);
    position: relative;
    overflow: hidden;
    animation: s9bnTestRunBannerIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner::before {
    /* Soft blue glow on the left edge so the eye lands on the badge first. */
    content: "";
    position: absolute;
    inset: -40% auto -40% -10%;
    width: 280px;
    background: radial-gradient(closest-side, rgba(31, 134, 255, 0.35), transparent 70%);
    pointer-events: none;
}
#pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner[hidden] { display: none; }
#pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner__lead {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
}
#pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner__badge {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 999px;
    background: #1F86FF;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(31, 134, 255, 0.55);
}
#pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner__headline {
    flex: 1 1 auto;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    letter-spacing: -0.1px;
}
#pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner__perks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    flex: 0 1 auto;
    position: relative;
    z-index: 1;
}
#pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner__perks li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(153, 202, 255, 0.25);
    color: #EAF1FF;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
#pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1F86FF;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 auto;
}
@keyframes s9bnTestRunBannerIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Commitment toggle stays fully interactive in Test Run mode — clicking
   Yearly is the user's escape hatch back to regular pricing (handled by
   exitTestRun() in pricing_v2.js). Re-clicking Monthly is a no-op via
   the existing .active check in setupSegmented. */

/* Drawn strikethrough on the old "no-contract" price + pop-in discount
   pill. Both animate in a left-to-right wave (60ms stagger per card) the
   first time .is-test-run is applied. Per-card stagger comes from the
   --s9bn-card-index custom property that JS sets in engageTestRun(). */
#pricing_wrapper #s9-buynow-pricing .dr-card { --s9bn-card-index: 0; }

#pricing_wrapper #s9-buynow-pricing.is-test-run .dr-card .card-price-base {
    /* Replace the native line-through with a pseudo-element line so we
       can animate it drawing across the price. */
    text-decoration: none;
    position: relative;
    color: rgba(255, 200, 200, 0.75);
}
#pricing_wrapper #s9-buynow-pricing.is-test-run .dr-card .card-price-base::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 52%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #FF6B6B 0%, #FF4D4D 100%);
    transform: scaleX(0);
    transform-origin: left center;
    box-shadow: 0 0 6px rgba(255, 77, 77, 0.55);
    animation: s9bnStrikeDraw 0.32s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
    animation-delay: calc(var(--s9bn-card-index) * 60ms);
    pointer-events: none;
}
@keyframes s9bnStrikeDraw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    #pricing_wrapper #s9-buynow-pricing.is-test-run .dr-card .card-price-base::after {
        animation-duration: 0.001s;
    }
}

@media (max-width: 720px) {
    #pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner {
        padding: 14px 16px;
        gap: 12px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    #pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner__lead {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    #pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner__headline {
        font-size: 14px;
        flex: 0 1 auto;
    }
    #pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner__perks {
        justify-content: center;
        gap: 6px 8px;
    }
    #pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner__perks li {
        font-size: 12px;
        padding: 5px 10px;
    }
}

/* Extra-narrow phones: stack the lead vertically (badge above headline) and
   give every perk its own row so the third one never sits orphaned. */
@media (max-width: 480px) {
    #pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner__lead {
        flex-direction: column;
        gap: 8px;
    }
    #pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner__headline {
        font-size: 13px;
        line-height: 1.3;
    }
    #pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner__perks {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        width: 100%;
    }
    #pricing_wrapper #s9-buynow-pricing .s9bn-testrun-banner__perks li {
        width: max-content;
        max-width: 100%;
    }
}

/* ============================================================
   Calculator + Fixed shapes (Full SEO / Content Writing / SEO Audit).
   These services don't use the DR card grid; they render a single
   summary card. Reuses .card-price + .card-btn-wrap + .card-btn from
   the matrix card styling so they look like siblings of the DR cards.
   ============================================================ */

/* ----- Fixed shape (single price card) ----- */
#pricing_wrapper #s9-buynow-pricing.s9bn-fixed .s9bn-fixed-card {
    max-width: 460px;
    margin: 0 auto;
    background: var(--navy);
    color: #fff;
    border-radius: 18px;
    padding: 32px 28px;
    box-shadow: var(--shadow-card);
    text-align: center;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-fixed .s9bn-fixed-card__price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-fixed .s9bn-fixed-card__desc {
    font-size: 14px;
    color: #aacfff;
    margin-bottom: 18px;
    line-height: 1.4;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-fixed .card-btn-wrap {
    padding: 0;
}

/* ----- Calculator shape (sliders + summary) ----- */
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc__desc {
    text-align: center;
    color: var(--text-muted);
    font-size: 15px;
    margin: 10px 0 0;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
    max-width: 1020px;
    margin: 0 auto;
}
@media (max-width: 860px) {
    #pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
}
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc__inputs {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--navy);
    border-radius: 22px;
    padding: 22px 24px;
    box-shadow: var(--shadow-card);
}
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc-row__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: #fff;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc-row__label {
    font-size: 14px;
    font-weight: 700;
    color: #DCE6FA;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc-row__value {
    font-size: 18px;
    font-weight: 800;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc-row__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--pill-track);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc-row__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blue);
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(31, 134, 255, 0.45);
    cursor: pointer;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc-row__slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blue);
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(31, 134, 255, 0.45);
    cursor: pointer;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc-row__bounds {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #8AA4D2;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc__summary {
    background: var(--navy);
    border-radius: 22px;
    padding: 24px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc__summary-label {
    font-size: 14px;
    font-weight: 700;
    color: #DCE6FA;
    margin-bottom: 8px;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc__price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 18px;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .s9bn-calc__per {
    font-size: 14px;
    font-weight: 600;
    color: #aacfff;
}
#pricing_wrapper #s9-buynow-pricing.s9bn-calc .card-btn-wrap {
    padding: 0;
}