.sr-pricing-03 .card-container {
    width: min(21.875rem, 100%);
    position: relative;
}
.sr-pricing-03 .card-container:has(.card__header) .card {
    border-radius: 0 0 var(--border_radius) var(--border_radius);
}
.sr-pricing-03 .card-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.875rem;
}

.sr-pricing-03 .card {
    position: relative;
    border: none;
    border-radius: var(--border_radius);
    min-height: 32.375rem;
    height: 100%;
    padding: 2.5rem;
    display: flex;
    transition: background 0.25s ease-in-out;
}

.sr-pricing-03 .card__header {
    border-radius: var(--border_radius) var(--border_radius) 0 0;
    padding: 0.9375rem 1.5625rem;
}

.sr-pricing-03 ul {
    padding: 0;
    list-style: none;
    margin-bottom: 3.125rem;
    margin-top: 3.125rem;
}

.sr-pricing-03 ul [role="presentation"] {
    margin-right: 1rem;
}


.sr-pricing-03 .feature-list li {
    position: relative;
    padding: 0 0 .5rem 0;
    display: flex;
    align-items: center;
}
.sr-pricing-03 .feature-list li svg.icon {
    min-width: 15px;
}

.sr-pricing-03 .feature-list li:last-child {
    padding-bottom: 0;
}

.sr-pricing-03 .feature-list li p {
    margin-bottom: 0;
}
.sr-pricing-03 .cta-group {
    margin-top: auto;
}

.sr-pricing-03 .pricing-text {
    display: none;
}

.sr-pricing-03 .pricing-text--active {
    display: block;
}

.sr-pricing-03 .pricing-toggle {
    display: flex;
    justify-content: center;
    gap: .9375rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.5625rem;
}

.sr-pricing-03 .pricing-toggle input[type="checkbox"] {
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.sr-pricing-03 .pricing-toggle input[type="checkbox"]:checked+.pricing-toggle__button {
    left: calc(100% - 1.25rem);
}

.sr-pricing-03 .pricing-toggle__checkbox {
    width: 2.5rem;
    height: 1.25rem;
    border-radius: 5.625rem;
    position: relative;
}

.sr-pricing-03 .pricing-toggle__button {
    border-radius: 100%;
    width: 1.25rem;
    height: 1.25rem;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: left 250ms ease;
}
.sr-pricing-03 .pricing-cta-1 {
    display: none;
}
.sr-pricing-03 .pricing-cta-1--active {
    display: flex;
}
.sr-pricing-03 .pricing-cta-2 {
    display: flex;
}
.sr-pricing-03 .pricing-cta-2--inactive {
    display: none;
}

@media(min-width:1200px) {
    .sr-pricing-03 .card-row:has(.card__header) {
        margin-top: 4rem
    }
    .sr-pricing-03 .card-container:has(.card__header) {
        margin-top: 0
    }
    .sr-pricing-03 .card__header {
        border-radius: var(--border_radius);
        position: absolute;
        right: 0;
        top: -4rem;
    }
    .sr-pricing-03 .card-container:has(.card__header) .card {
        border-radius: var(--border_radius)
    }
}
@media only screen and (min-width : 992px) {
    .sr-pricing-03 .card-row {
        align-items: stretch;
    }
}
/* ==========================================================================
   SVP Pricing Toggle - additions to stock SR Pricing 03
   Everything above this line is SR's own stylesheet, unchanged.
   ========================================================================== */

.svp-pricing-toggle {
    --band-height: 3.25rem;
    --svp-gutter: 1.25rem;
    /* Bound to the theme's brand token so the toggle always matches the site
       buttons, including after any future rebrand. */
    --svp-toggle-active: var(--tertiary, #4051f5);
    --svp-toggle-idle: var(--white, #fff);
    --svp-toggle-active-text: var(--white, #fff);
    --svp-card-line: #e3e4ea;
}

/* --- Toggle swaps whole package sets, not price text --------------------- */
/* Both sets sit in the same grid cell and both stay in the layout, so the
   module is always as tall as the taller sector and nothing below it moves
   when you switch. The inactive set is hidden with visibility rather than
   display, which keeps it out of the tab order and the accessibility tree
   while still letting it hold the height open. */

.svp-pricing-toggle .sector-stack,
.svp-pricing-toggle .sector-desc-stack {
    display: grid;
    align-items: start;
}

.svp-pricing-toggle .sector-stack > .sector-set,
.svp-pricing-toggle .sector-desc-stack > .sector-desc {
    grid-area: 1 / 1;
}

.svp-pricing-toggle .sector-desc {
    display: block;
}

.svp-pricing-toggle .sector-set {
    display: flex;
    gap: var(--svp-gutter);
}

.svp-pricing-toggle .sector-set,
.svp-pricing-toggle .sector-desc {
    visibility: hidden;
}

.svp-pricing-toggle[data-sector="one"] .sector-desc[data-set="one"],
.svp-pricing-toggle[data-sector="two"] .sector-desc[data-set="two"],
.svp-pricing-toggle[data-sector="one"] .sector-set[data-set="one"],
.svp-pricing-toggle[data-sector="two"] .sector-set[data-set="two"] {
    visibility: visible;
}

/* --- Segmented switch ---------------------------------------------------- */
/* Stock SR ships a sliding checkbox. SVP wants two options you press. */

.svp-pricing-toggle .pricing-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.svp-pricing-toggle .pricing-toggle__group {
    display: inline-flex;
    gap: .5rem;
}

.svp-pricing-toggle .pricing-toggle__option {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    padding: .875rem 2.25rem;
    border: 1px solid var(--svp-toggle-active);
    border-radius: 120px;
    background-color: var(--svp-toggle-idle);
    color: var(--svp-toggle-active);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.svp-pricing-toggle .pricing-toggle__option:hover {
    background-color: color-mix(in srgb, var(--svp-toggle-active) 12%, var(--svp-toggle-idle));
}

.svp-pricing-toggle .pricing-toggle__option.is-active,
.svp-pricing-toggle .pricing-toggle__option.is-active:hover {
    background-color: var(--svp-toggle-active);
    color: var(--svp-toggle-active-text);
}

.svp-pricing-toggle .pricing-toggle__option:focus-visible {
    outline: 2px solid var(--svp-toggle-active);
    outline-offset: 2px;
}

/* --- Key line and highlight band ----------------------------------------- */
/* Stock SR floats the band as an absolute pill top-right above 1200px. SVP
   wants it capping the column, reading as one block with the card. */

.svp-pricing-toggle .card-container {
    display: flex;
    flex-direction: column;
}

.svp-pricing-toggle .card {
    flex: 1 1 auto;
    border: 1px solid var(--svp-card-line);
}

.svp-pricing-toggle .card__header {
    position: static;
    top: auto;
    right: auto;
    min-height: var(--band-height);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid var(--svp-card-line);
    border-radius: var(--border_radius) var(--border_radius) 0 0;
}

/* The highlighted column sits slightly proud of the others */
.svp-pricing-toggle .card-container:has(.card__header) {
    border-radius: var(--border_radius);
    box-shadow: 0 14px 34px -14px rgba(1, 1, 53, .22);
}

/* Band and card are one shape, so drop the seam between them */
.svp-pricing-toggle .card-container:has(.card__header) .card {
    border-top: 0;
}

.svp-pricing-toggle .card-container:has(.card__header) .card__header {
    border-bottom: 0;
}

/* Columns without a band get an equal spacer, but only when a sibling
   column actually has one, so a row with no highlight has no dead space. */
.svp-pricing-toggle .card-row:has(.card__header) .card-container:not(:has(.card__header))::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    height: var(--band-height);
}

/* Undo the stock offsets that existed only to clear the floating pill */
.svp-pricing-toggle .card-row:has(.card__header),
.svp-pricing-toggle .card-container:has(.card__header) {
    margin-top: 0;
}

/* --- Package name -------------------------------------------------------- */
/* The theme's h6 lands this at 14px, which is smaller than the body copy
   underneath it. Set it deliberately instead. */
.svp-pricing-toggle .pricing-name {
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 0;
}

/* --- Price block: prefix / value / suffix stacked, with room to breathe --- */
.svp-pricing-toggle .pricing-price {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 0;
    padding: 1.25rem 0 1.75rem;
    font-weight: 600;
}

.svp-pricing-toggle .pricing-price__value {
    display: block;
    margin: 0;
    line-height: 1.05;
    font-weight: 800;
}

.svp-pricing-toggle .pricing-price__prefix,
.svp-pricing-toggle .pricing-price__suffix {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    opacity: 1;
}

.svp-pricing-toggle .pricing-blurb {
    margin: .5rem 0 0;
}

/* --- The "Everything in X, plus:" line ----------------------------------- */
/* It introduces the list under it, so it wants weight and a gap beneath. */
.svp-pricing-toggle .card > .description,
.svp-pricing-toggle .card > .description p {
    font-weight: 600;
}

.svp-pricing-toggle .card > .description {
    padding-bottom: .875rem;
}

.svp-pricing-toggle .card > .description p:last-child {
    margin-bottom: 0;
}

/* --- Feature bullets ------------------------------------------------------ */
.svp-pricing-toggle .feature-list {
    margin-top: 0;
    margin-bottom: 2rem;
}

.svp-pricing-toggle .feature-list li {
    align-items: flex-start;
    padding-bottom: 1.125rem;
}

.svp-pricing-toggle .feature-list li:last-child {
    padding-bottom: 0;
}

/* Ticks come from each row's Icon field in the editor. This is only the
   fallback for a row where someone sets Icon Type to None. */
.svp-pricing-toggle .feature-list li:not(:has([role="presentation"]))::before {
    content: "";
    flex: 0 0 auto;
    width: .3125rem;
    height: .3125rem;
    border-radius: 50%;
    background-color: currentColor;
    margin: .5rem .5rem 0 0;
    opacity: .6;
}

/* --- Bullets that use an icon -------------------------------------------- */
/* Stock SR gives the icon wrapper a 1rem gap and lets the theme decide the
   size of the background disc, which shunts the text well right of where the
   plain bullets sit. Pin it to the chosen icon size and match the plain gap. */

.svp-pricing-toggle .feature-list li > [role="presentation"] {
    flex: 0 0 auto;
    margin-right: .5rem;
    margin-top: .0625rem;
    line-height: 1;
}

.svp-pricing-toggle .feature-list .icon-icon {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-width, 18px);
    height: var(--icon-width, 18px);
    padding: .25rem;
}

.svp-pricing-toggle .feature-list .icon-icon.p-0 {
    padding: 0;
}

.svp-pricing-toggle .feature-list .icon-icon svg,
.svp-pricing-toggle .feature-list .icon-icon i {
    display: block;
    width: var(--icon-width, 18px);
    height: var(--icon-width, 18px);
}

/* --- Four across, which stock SR never had to handle --------------------- */
@media (min-width: 992px) {
    .svp-pricing-toggle .cards-4 .card-container {
        width: calc((100% - 3 * var(--svp-gutter)) / 4);
    }

    .svp-pricing-toggle .cards-4 .card {
        padding: 1.75rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .svp-pricing-toggle .cards-4 .card-container {
        width: calc((100% - var(--svp-gutter)) / 2);
    }
}

/* --- Row alignment across columns ---------------------------------------- */
/* Every card is laid out on one shared set of rows, so the price blocks sit on
   a single line and the feature lists all start together and hang from the top,
   no matter how long the names, blurbs or lists are. Subgrid does the work;
   browsers without it fall back to the flex layout above. */

@media (min-width: 992px) {
    @supports (grid-template-rows: subgrid) {
        .svp-pricing-toggle .sector-set {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            grid-template-rows: auto auto auto auto auto 1fr auto;
            column-gap: var(--svp-gutter);
            row-gap: 0;
            align-items: stretch;
        }

        .svp-pricing-toggle .sector-set.cards-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .svp-pricing-toggle .sector-set.cards-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .svp-pricing-toggle .sector-set.cards-1 {
            grid-template-columns: minmax(0, 21.875rem);
            justify-content: center;
        }

        /* The flex layout sized each container with a calc() share of the row.
           Inside the grid that calc resolves against the cell, not the row, so
           it has to be switched off explicitly and at a weight that beats the
           .cards-4 rule above. */
        .svp-pricing-toggle .sector-set[data-set] .card-container {
            width: auto;
            max-width: none;
            display: grid;
            grid-row: span 7;
            grid-template-rows: subgrid;
            row-gap: 0;
            min-width: 0;
        }

        /* Grid items default to min-width:auto, which lets long words push a
           column wider than its track. */
        .svp-pricing-toggle .sector-set[data-set] .card,
        .svp-pricing-toggle .sector-set[data-set] .card > * {
            min-width: 0;
        }

        /* The empty first row now does the spacer's job */
        .svp-pricing-toggle .card-row:has(.card__header) .card-container:not(:has(.card__header))::before {
            content: none;
        }

        .svp-pricing-toggle .card-container > .card__header {
            grid-row: 1;
        }

        .svp-pricing-toggle .card {
            display: grid;
            grid-row: 2 / span 6;
            grid-template-rows: subgrid;
            row-gap: 0;
            min-height: 0;
        }

        .svp-pricing-toggle .card > .pricing-name  { grid-row: 1; }
        .svp-pricing-toggle .card > .pricing-blurb { grid-row: 2; }
        .svp-pricing-toggle .card > .pricing-price { grid-row: 3; }
        .svp-pricing-toggle .card > .description   { grid-row: 4; }
        .svp-pricing-toggle .card > .feature-list  { grid-row: 5; }
        .svp-pricing-toggle .card > .cta-group     { grid-row: 6; align-self: end; }
    }
}