/* =============================================================
   saviliate-pricing.css  (updated)
   Pricing-page component styles ONLY.
   All rules scoped under body.sv (inherited from landing.css).

   Load order:
     1. saviliate-landing.css  → tokens, noise, cursor, navbar,
                                  buttons, sections, hero, footer
     2. saviliate-vendors.css  → check-icon, fee-card, value-card,
                                  combine-callout (reused here)
     3. saviliate-pricing.css  → this file
   ============================================================= */


/* ── Pricing hero ───────────────────────────────────────────── */
/* Override the landing hero's full-viewport height for the shorter
   pricing hero — it leads straight into plan cards so it should be
   punchy, not tall. */
.sv .sv-pricing-hero {
    min-height: 72vh !important;
    padding-bottom: 3.5rem;
}
@media (max-width: 767.98px) {
    .sv .sv-pricing-hero { min-height: auto !important; padding-bottom: 2.5rem; }
}

/* Shift the teal radial gradient slightly so it doesn't compete
   with the plan cards section directly below */
.sv .sv-pricing-hero-bg {
    background:
        radial-gradient(ellipse 70% 55% at 50% 25%, rgba(26,74,74,.4) 0%, transparent 70%),
        radial-gradient(ellipse 55% 35% at 85% 75%, rgba(201,169,110,.1) 0%, transparent 60%),
        radial-gradient(ellipse 45% 45% at 15% 65%, rgba(26,74,74,.14) 0%, transparent 60%);
}

/* Plan anchor pills */
.sv .sv-pricing-plan-pills { gap: .55rem !important; }
.sv .sv-pricing-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .4rem .9rem;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--sv-border);
    border-radius: 100px;
    text-decoration: none;
    color: rgba(255,255,255,.55);
    font-family: 'DM Mono', monospace;
    font-size: .62rem; letter-spacing: .08em;
    transition: background .22s, border-color .22s, color .22s;
}
.sv .sv-pricing-pill:hover {
    background: rgba(201,169,110,.1);
    border-color: rgba(201,169,110,.4);
    color: var(--sv-gold-light);
}
.sv .sv-pricing-pill i {
    color: var(--sv-gold); font-size: .65rem;
}
.sv .sv-pp-label {
    font-weight: 500; color: rgba(255,255,255,.75);
    letter-spacing: .1em; text-transform: uppercase;
}
.sv .sv-pp-note {
    font-size: .55rem; color: rgba(255,255,255,.3);
    letter-spacing: .06em;
}

/* ── Hero trust bar ─────────────────────────────────────────── */
.sv .sv-hero { min-height: 88vh; }
@media (max-width: 767.98px) { .sv .sv-hero { min-height: auto; } }

.sv .sv-trust-bar  { border-top: 1px solid var(--sv-border); }
.sv .sv-trust-item {
    font-size: .82rem; color: rgba(255,255,255,.5);
    font-family: 'DM Mono', monospace; letter-spacing: .04em;
    display: flex; align-items: center; gap: .5rem;
}
.sv .sv-trust-item i { color: var(--sv-gold); }


/* ── Plan mega-card (legacy — keep for backwards compat) ────── */
.sv .sv-plan-mega {
    background: var(--sv-ink2);
    border: 1px solid rgba(201,169,110,.3);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(201,169,110,.06), 0 40px 80px rgba(0,0,0,.5);
    position: relative;
}
.sv .sv-plan-mega::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg,
        transparent, var(--sv-gold), var(--sv-teal-light), var(--sv-gold), transparent);
}
.sv .sv-plan-mega-header {
    padding: 3rem 3rem 2.5rem;
    background: linear-gradient(135deg, rgba(26,74,74,.3), rgba(10,10,15,.9));
    border-bottom: 1px solid var(--sv-border);
}
@media (max-width: 767.98px) { .sv .sv-plan-mega-header { padding: 2rem 1.5rem; } }
.sv .sv-plan-mega-badge {
    font-family: 'DM Mono', monospace;
    font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
    background: var(--sv-gold); color: var(--sv-ink);
    padding: .22rem .65rem; border-radius: 100px;
    display: inline-block;
}
.sv .sv-plan-mega-price {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(3.5rem, 7vw, 5.5rem);
    font-weight: 300; line-height: 1; color: #fff;
}
.sv .sv-plan-mega-price .sv-pmp-cur {
    font-size: 45%; vertical-align: super; color: var(--sv-gold);
}
.sv .sv-plan-mega-price .sv-pmp-period {
    font-family: 'DM Mono', monospace;
    font-size: .28em; color: rgba(255,255,255,.3); letter-spacing: .06em;
}
.sv .sv-plan-mega-usd {
    font-family: 'DM Mono', monospace;
    font-size: .78rem; color: rgba(255,255,255,.38); letter-spacing: .06em;
}
.sv .sv-plan-mega-usd .sv-pmu-rate { font-size: .88em; color: rgba(255,255,255,.22); }
.sv .sv-plan-mega-tagline {
    font-size: .93rem; color: rgba(255,255,255,.55);
    line-height: 1.7; max-width: 400px;
}
.sv .sv-plan-mega-note { font-size: .82rem; color: rgba(255,255,255,.4); }
.sv .sv-plan-mega-features { padding: 2.5rem 3rem; }
@media (max-width: 767.98px) { .sv .sv-plan-mega-features { padding: 2rem 1.5rem; } }
.sv .sv-pmf-heading {
    font-family: 'DM Mono', monospace;
    font-size: .65rem; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255,255,255,.3);
}
.sv .sv-pf-item {
    background: rgba(255,255,255,.025);
    border: 1px solid var(--sv-border);
    border-radius: 6px;
    transition: background .3s, border-color .3s;
}
.sv .sv-pf-item:hover {
    background: rgba(201,169,110,.06);
    border-color: rgba(201,169,110,.3);
}
.sv .sv-pf-icon {
    width: 36px; height: 36px; border-radius: 6px;
    border: 1px solid var(--sv-border);
    background: rgba(201,169,110,.07);
    color: var(--sv-gold); font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
}
.sv .sv-pf-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem; font-weight: 500; color: #fff;
}
.sv .sv-pf-desc { font-size: .78rem; color: rgba(255,255,255,.45); line-height: 1.6; }


/* ── Fees — extended from vendors.css ──────────────────────── */
.sv .sv-fee-pct--sm { font-size: 2.8rem; }
.sv .sv-cost-callout {
    background: linear-gradient(135deg, rgba(26,74,74,.28), rgba(10,10,15,.9));
    border: 1px solid rgba(201,169,110,.22);
    border-radius: 4px; padding: 2.5rem 3rem;
}
@media (max-width: 767.98px) { .sv .sv-cost-callout { padding: 1.75rem 1.5rem; } }
.sv .sv-cost-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem; font-weight: 500; color: #fff;
}
.sv .sv-cost-body { font-size: .88rem; color: rgba(255,255,255,.55); line-height: 1.8; }


/* ── Value cards ─────────────────────────────────────────────── */
.sv .sv-value-card {
    background: var(--sv-ink2);
    border: 1px solid var(--sv-border);
    border-radius: 4px; padding: 2rem;
    position: relative; overflow: hidden;
    transition: background .3s, border-color .3s;
}
.sv .sv-value-card:hover {
    background: rgba(26,74,74,.18);
    border-color: rgba(201,169,110,.28);
}
.sv .sv-value-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--sv-gold), transparent);
    opacity: 0; transition: opacity .35s;
}
.sv .sv-value-card:hover::before { opacity: 1; }
.sv .sv-value-icon {
    width: 44px; height: 44px; border-radius: 8px;
    border: 1px solid var(--sv-border);
    background: rgba(201,169,110,.07);
    color: var(--sv-gold); font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
}
.sv .sv-value-num {
    position: absolute; top: 1.25rem; right: 1.5rem;
    font-family: 'DM Mono', monospace; font-size: .62rem;
    color: rgba(201,169,110,.18);
}
.sv .sv-value-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.3rem; font-weight: 500; color: #fff;
}
.sv .sv-value-desc { font-size: .85rem; color: rgba(255,255,255,.52); line-height: 1.75; }


/* ── Comparison table ───────────────────────────────────────── */
.sv .sv-comp-wrap {
    border: 1px solid var(--sv-border);
    border-radius: 6px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.sv .sv-comp-toggle-label {
    font-family: 'DM Mono', monospace;
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.35);
}
.sv .sv-currency-toggle {
    display: inline-flex;
    border: 1px solid var(--sv-border);
    border-radius: 2px; overflow: hidden;
}
.sv .sv-cur-btn {
    padding: .45rem 1.1rem;
    font-family: 'DM Mono', monospace;
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    background: transparent; color: rgba(255,255,255,.4);
    border: none; cursor: none;
    transition: background .2s, color .2s;
}
.sv .sv-cur-btn.active {
    background: rgba(201,169,110,.15); color: var(--sv-gold);
}
.sv .sv-comp-head {
    display: grid; grid-template-columns: 2fr 1.2fr 1.3fr 1.6fr;
    background: rgba(255,255,255,.025);
    border-bottom: 1px solid var(--sv-border);
}
.sv .sv-comp-th {
    padding: .9rem 1.2rem;
    font-family: 'DM Mono', monospace;
    font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.3);
}
.sv .sv-comp-row {
    display: grid; grid-template-columns: 2fr 1.2fr 1.3fr 1.6fr;
    border-bottom: 1px solid rgba(201,169,110,.07);
    transition: background .2s;
}
.sv .sv-comp-row:last-child   { border-bottom: none; }
.sv .sv-comp-row:hover        { background: rgba(255,255,255,.02); }
.sv .sv-comp-row--hero {
    background: linear-gradient(90deg, rgba(26,74,74,.25), rgba(10,10,15,.9));
    border-bottom: 2px solid rgba(201,169,110,.3);
    position: relative;
}
.sv .sv-comp-row--hero::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(to bottom, var(--sv-gold), var(--sv-teal-light));
}
.sv .sv-comp-cell {
    padding: 1.1rem 1.2rem;
    display: flex; flex-direction: column; justify-content: center;
}
.sv .sv-comp-brand {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: .9rem; font-weight: 500; color: #fff;
    display: flex; align-items: center; gap: .6rem;
}
.sv .sv-comp-brand-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sv .sv-comp-sub {
    font-family: 'DM Mono', monospace;
    font-size: .58rem; color: rgba(255,255,255,.25);
    letter-spacing: .05em; margin-top: .2rem;
}
.sv .sv-comp-val {
    font-family: 'DM Mono', monospace;
    font-size: .75rem; color: rgba(255,255,255,.55); line-height: 1.4;
}
.sv .sv-comp-val-sub {
    font-size: .62rem; color: rgba(255,255,255,.28);
    margin-top: .15rem; line-height: 1.3;
}
.sv .sv-comp-row--hero .sv-comp-val { color: rgba(255,255,255,.82); }
.sv .sv-comp-val--gold  { color: var(--sv-gold) !important; font-weight: 500; }
.sv .sv-comp-val--red   { color: #f87171 !important; }
.sv .sv-comp-val--muted { color: rgba(255,255,255,.28) !important; }
.sv .sv-comp-override {
    font-family: 'DM Mono', monospace;
    font-size: .65rem; font-weight: 500;
    padding: .15rem .5rem; border-radius: 100px;
    display: inline-flex; align-items: center; gap: .3rem;
}
.sv .sv-comp-override--good {
    background: rgba(74,222,128,.1); color: #4ade80;
    border: 1px solid rgba(74,222,128,.2);
}
.sv .sv-comp-override--bad {
    background: rgba(248,113,113,.1); color: #f87171;
    border: 1px solid rgba(248,113,113,.2);
}
.sv .sv-savings-row {
    background: rgba(201,169,110,.06);
    border-top: 1px solid rgba(201,169,110,.2);
    padding: 1.75rem 1.5rem;
}
.sv .sv-savings-label {
    font-family: 'DM Mono', monospace;
    font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--sv-gold);
}
.sv .sv-savings-amount {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem; font-weight: 400; color: #fff; line-height: 1;
}
.sv .sv-savings-note { font-size: .82rem; color: rgba(255,255,255,.42); }
.sv .sv-comp-disclaimer {
    font-family: 'DM Mono', monospace;
    font-size: .62rem; color: rgba(255,255,255,.22);
    text-align: center; line-height: 1.8;
}
@media (max-width: 767.98px) {
    .sv .sv-comp-head, .sv .sv-comp-row, .sv .sv-comp-row--hero {
        grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    }
    .sv .sv-comp-th, .sv .sv-comp-cell { padding: .75rem .65rem; }
    .sv .sv-comp-th  { font-size: .52rem; letter-spacing: .07em; }
    .sv .sv-comp-val { font-size: .68rem; }
    .sv .sv-comp-override { font-size: .58rem; }
}
@media (max-width: 575.98px) {
    .sv .sv-comp-head, .sv .sv-comp-row, .sv .sv-comp-row--hero {
        grid-template-columns: 1.4fr .9fr .9fr 1fr;
    }
    .sv .sv-comp-th, .sv .sv-comp-cell { padding: .6rem .5rem; }
}


/* ── FAQ accordion ──────────────────────────────────────────── */
.sv .sv-faq-item { border-bottom: 1px solid var(--sv-border); }
.sv .sv-faq-item:first-child { border-top: 1px solid var(--sv-border); }
.sv .sv-faq-btn {
    width: 100%; background: transparent; border: none;
    color: #fff; text-align: left;
    padding: 1.4rem 0; cursor: none;
    display: flex; align-items: center;
    justify-content: space-between; gap: 1rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.15rem; font-weight: 400;
    transition: color .25s;
}
.sv .sv-faq-btn:hover { color: var(--sv-gold); }
.sv .sv-faq-btn i {
    color: var(--sv-gold); font-size: .8rem;
    transition: transform .3s; flex-shrink: 0;
}
.sv .sv-faq-btn[aria-expanded="true"] i { transform: rotate(45deg); }
.sv .sv-faq-body { padding-bottom: 1.4rem; }
.sv .sv-faq-body p {
    font-size: .9rem; color: rgba(255,255,255,.55);
    line-height: 1.8; margin: 0;
}


/* ── CTA stat row ───────────────────────────────────────────── */
.sv .sv-cta-stat-label {
    font-family: 'DM Mono', monospace;
    font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.3);
}
.sv .sv-cta-stat-val {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.2rem; font-weight: 300; color: #fff; line-height: 1.1;
}
.sv .sv-cta-stat-note { font-size: .78rem; color: rgba(255,255,255,.35); }
.sv .sv-cta-stat-div { width: 1px; height: 52px; background: var(--sv-border); }
@media (max-width: 575.98px) {
    .sv .sv-cta-stat-div { width: 40px; height: 1px; }
    .sv .sv-cta-stats    { flex-direction: column; }
}


/* =============================================================
   NEW: Multi-tier plan cards + interval + currency controls
   ============================================================= */

/* ── Plan controls row ──────────────────────────────────────── */
.sv .sv-plan-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 2.75rem;
}

/* ── Billing interval toggle ────────────────────────────────── */
.sv .sv-plan-interval-wrap { display: flex; align-items: center; }
.sv .sv-plan-interval {
    display: inline-flex;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--sv-border);
    border-radius: 3px;
    overflow: hidden;
}
.sv .sv-int-btn {
    position: relative;
    padding: .5rem 1.15rem;
    font-family: 'DM Mono', monospace;
    font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
    background: transparent; color: rgba(255,255,255,.4);
    border: none; cursor: none;
    transition: background .2s, color .2s;
    display: flex; align-items: center; gap: .4rem;
    white-space: nowrap;
}
.sv .sv-int-btn.active {
    background: rgba(201,169,110,.14);
    color: var(--sv-gold);
}
.sv .sv-int-btn:not(.active):hover {
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.65);
}
.sv .sv-int-badge {
    font-size: .5rem; letter-spacing: .08em;
    background: rgba(74,222,128,.15);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,.25);
    border-radius: 100px;
    padding: .08rem .38rem;
    font-weight: 500;
}

/* ── Currency toggle (plan section) ────────────────────────── */
.sv .sv-plan-currency-wrap {
    display: flex; align-items: center; gap: .75rem;
    flex-wrap: wrap;
}
.sv .sv-plan-cur-label {
    font-family: 'DM Mono', monospace;
    font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.3);
}
.sv .sv-plan-currency {
    display: inline-flex;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--sv-border);
    border-radius: 3px;
    overflow: hidden;
    flex-wrap: wrap;
}
.sv .sv-pcur-btn {
    padding: .45rem .9rem;
    font-family: 'DM Mono', monospace;
    font-size: .62rem; letter-spacing: .09em; text-transform: uppercase;
    background: transparent; color: rgba(255,255,255,.38);
    border: none; cursor: none;
    transition: background .2s, color .2s;
    white-space: nowrap;
}
.sv .sv-pcur-btn.active {
    background: rgba(201,169,110,.13);
    color: var(--sv-gold);
}
.sv .sv-pcur-btn:not(.active):hover {
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.62);
}


/* ── Plans grid ─────────────────────────────────────────────── */
.sv .sv-plans-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--sv-border);
    border: 1px solid var(--sv-border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

/* ── Individual plan card ───────────────────────────────────── */
.sv .sv-plan-card {
    background: var(--sv-ink2);
    display: flex; flex-direction: column;
    position: relative;
    transition: background .3s;
}
.sv .sv-plan-card:hover {
    background: rgba(18,18,24,1);
}
.sv .sv-plan-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: transparent;
    transition: background .35s;
}
.sv .sv-plan-card:hover::before {
    background: linear-gradient(90deg, transparent, rgba(201,169,110,.4), transparent);
}

/* Featured (Growth) card */
.sv .sv-plan-card--featured {
    background: linear-gradient(160deg, rgba(26,74,74,.28), rgba(10,10,15,.95));
}
.sv .sv-plan-card--featured::before {
    background: linear-gradient(90deg, transparent, var(--sv-gold), transparent) !important;
}

/* Enterprise card */
.sv .sv-plan-card--enterprise {
    background: linear-gradient(160deg, rgba(15,15,22,1), rgba(10,10,15,.97));
}
.sv .sv-plan-card--enterprise::before {
    background: linear-gradient(90deg, transparent, rgba(139,92,246,.6), transparent);
    transition: none;
    opacity: 1 !important;
}

.sv .sv-plan-card-inner {
    padding: 1.75rem 1.5rem;
    display: flex; flex-direction: column;
    height: 100%;
}

/* Popular badge */
.sv .sv-plan-card-badge-wrap {
    margin-bottom: .5rem;
}
.sv .sv-plan-popular-badge {
    font-family: 'DM Mono', monospace;
    font-size: .55rem; letter-spacing: .14em; text-transform: uppercase;
    background: var(--sv-gold); color: var(--sv-ink);
    padding: .2rem .6rem; border-radius: 100px;
    display: inline-block;
}

/* Card head */
.sv .sv-plan-card-head {
    display: flex; flex-direction: column;
}

.sv .sv-plan-tier-label {
    font-family: 'DM Mono', monospace;
    font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.35);
}
.sv .sv-plan-card--featured .sv-plan-tier-label { color: var(--sv-gold); }
.sv .sv-plan-card--enterprise .sv-plan-tier-label { color: rgba(139,92,246,.85); }

/* Price display */
.sv .sv-plan-price {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 300; line-height: 1; color: #fff;
    display: flex; align-items: baseline; gap: .1rem; flex-wrap: wrap;
    transition: opacity .25s;
}
.sv .sv-plan-price.sv-price-updating { opacity: .35; }
.sv .sv-pp-cur {
    font-size: 55%; vertical-align: super; color: var(--sv-gold);
    font-family: 'DM Mono', monospace; font-weight: 400;
}
.sv .sv-pp-amount { letter-spacing: -.02em; }
.sv .sv-pp-period {
    font-family: 'DM Mono', monospace;
    font-size: .26em; color: rgba(255,255,255,.3); letter-spacing: .06em;
    align-self: flex-end; margin-bottom: .1em;
}
.sv .sv-plan-price--custom {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    color: rgba(139,92,246,.9);
}
.sv .sv-pp-custom-label {
    font-weight: 300; letter-spacing: .01em;
    line-height: 1.25;
}

.sv .sv-plan-price-sub {
    font-family: 'DM Mono', monospace;
    font-size: .62rem; color: rgba(255,255,255,.3); letter-spacing: .06em;
}

.sv .sv-plan-card-desc {
    font-size: .78rem; color: rgba(255,255,255,.45);
    line-height: 1.65;
    flex-grow: 0;
}

/* CTA buttons inside cards */
.sv .sv-plan-cta {
    font-size: .72rem !important;
    padding: .6rem 1.1rem !important;
    width: 100%;
    text-align: center;
    justify-content: center;
}
.sv .sv-plan-cta--enterprise {
    border-color: rgba(139,92,246,.4) !important;
    color: rgba(139,92,246,.9) !important;
}
.sv .sv-plan-cta--enterprise:hover {
    background: rgba(139,92,246,.12) !important;
    border-color: rgba(139,92,246,.7) !important;
    color: #a78bfa !important;
}

/* ── Plan limits strip ──────────────────────────────────────── */
.sv .sv-plan-card-limits {
    margin-top: 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--sv-border);
    border-bottom: 1px solid var(--sv-border);
    display: flex; flex-direction: column; gap: .45rem;
}
.sv .sv-plan-limit-row {
    font-family: 'DM Mono', monospace;
    font-size: .6rem; letter-spacing: .06em;
    color: rgba(255,255,255,.42);
    display: flex; align-items: center; gap: .55rem;
}
.sv .sv-plan-limit-row i {
    color: var(--sv-gold); font-size: .7rem; flex-shrink: 0;
}
.sv .sv-plan-card--enterprise .sv-plan-limit-row { color: rgba(255,255,255,.52); }

/* ── Feature rows ───────────────────────────────────────────── */
.sv .sv-plan-card-features {
    margin-top: 1.25rem;
    display: flex; flex-direction: column; gap: .5rem;
    flex-grow: 1;
}
.sv .sv-pcf-row {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: .72rem;
    display: flex; align-items: flex-start; gap: .55rem;
    line-height: 1.45;
}
.sv .sv-pcf-row i { font-size: .65rem; flex-shrink: 0; margin-top: .13em; }
.sv .sv-pcf-yes { color: rgba(255,255,255,.65); }
.sv .sv-pcf-yes i { color: #4ade80; }
.sv .sv-pcf-no  { color: rgba(255,255,255,.22); }
.sv .sv-pcf-no  i { color: rgba(255,255,255,.18); }

/* ── Plan rate note ─────────────────────────────────────────── */
.sv .sv-plan-rate-note {
    font-family: 'DM Mono', monospace;
    font-size: .6rem; letter-spacing: .05em;
    color: rgba(255,255,255,.2); line-height: 1.8;
}


/* ── Responsive: plans grid ─────────────────────────────────── */

/*
 * xl (1200–1399px) — MacBook 13"/14", smaller laptops:
 * Keep Free + Starter + Growth + Scale on ONE row (4 cols),
 * Enterprise spans all 4 below. Tighten inner padding so cards fit.
 */
@media (max-width: 1399.98px) and (min-width: 1200px) {
    .sv .sv-plans-grid { grid-template-columns: repeat(4, 1fr); }
    .sv .sv-plan-card--enterprise { grid-column: span 4; }
    .sv .sv-plan-card--enterprise .sv-plan-card-features {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem .75rem;
    }
    .sv .sv-plan-card--enterprise .sv-plan-card-limits {
        display: grid; grid-template-columns: repeat(4, 1fr);
    }
    .sv .sv-plan-card-inner { padding: 1.4rem 1.25rem; }
    .sv .sv-plan-price {
        font-size: clamp(1.75rem, 2.6vw, 2.4rem);
    }
    .sv .sv-plan-card-desc { font-size: .72rem; }
    .sv .sv-pcf-row { font-size: .68rem; }
    .sv .sv-plan-limit-row { font-size: .57rem; }
}

/*
 * lg (992–1199px) — smaller laptops / large tablets landscape:
 * 3-column: Free + Starter + Growth on row 1, Scale spans 2 + empty,
 * Actually keep 3 cols here and let Scale sit alone — to avoid that,
 * use 2×2 split: Free+Starter / Growth+Scale, Enterprise full width.
 * We achieve this with a named grid-area trick: just use 2-col so
 * all four standard cards flow 2×2 naturally.
 */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .sv .sv-plans-grid { grid-template-columns: repeat(2, 1fr); }
    .sv .sv-plan-card--enterprise { grid-column: span 2; }
    .sv .sv-plan-card--enterprise .sv-plan-card-features {
        display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem .75rem;
    }
    .sv .sv-plan-card--enterprise .sv-plan-card-limits {
        display: grid; grid-template-columns: repeat(2, 1fr);
    }
    .sv .sv-plan-controls { flex-direction: column; align-items: flex-start; }
    .sv .sv-plan-interval { flex-wrap: wrap; }
    .sv .sv-plan-currency { flex-wrap: wrap; }
}

/* md (768–991px) — tablets / small laptops */
@media (max-width: 991.98px) and (min-width: 768px) {
    .sv .sv-plans-grid { grid-template-columns: repeat(2, 1fr); }
    .sv .sv-plan-card--enterprise { grid-column: span 2; }
    .sv .sv-plan-card--enterprise .sv-plan-card-features {
        display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem .75rem;
    }
    .sv .sv-plan-card--enterprise .sv-plan-card-limits {
        display: grid; grid-template-columns: repeat(2, 1fr);
    }
    .sv .sv-plan-controls { flex-direction: column; align-items: flex-start; }
    .sv .sv-plan-interval { flex-wrap: wrap; }
    .sv .sv-plan-currency { flex-wrap: wrap; }
}

/* sm and below */
@media (max-width: 767.98px) {
    .sv .sv-plans-grid { grid-template-columns: 1fr; }
    .sv .sv-plan-card--enterprise { grid-column: span 1; }
    .sv .sv-plan-card--enterprise .sv-plan-card-features {
        display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem .6rem;
    }
    .sv .sv-plan-card--enterprise .sv-plan-card-limits {
        display: grid; grid-template-columns: repeat(2, 1fr);
    }
    .sv .sv-plan-controls { flex-direction: column; align-items: flex-start; }
    .sv .sv-plan-interval { flex-wrap: wrap; }
    .sv .sv-plan-currency { flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
    .sv .sv-plan-card--enterprise .sv-plan-card-features {
        grid-template-columns: 1fr;
    }
    .sv .sv-plan-card--enterprise .sv-plan-card-limits {
        grid-template-columns: 1fr;
    }
    .sv .sv-plan-card-inner { padding: 1.5rem 1.25rem; }
    .sv .sv-int-btn { padding: .5rem .75rem; font-size: .6rem; }
    .sv .sv-pcur-btn { padding: .42rem .65rem; }
}