/* Soundverse /pricing — the UI2.0 pricing surface, ported whole.
   ============================================================================
   Lifted from UI2.0's src/agentone/chat.css (.sv-pricing / .sv-up / .sv-price /
   .sv-mult / .sv-toolmatrix / .sv-toolgrid blocks) and src/index.css (the CTA
   tokens). Shapes, sizes, colours, radii, shadows and type scale are UI2.0's.

   FOUR DELIBERATE ADAPTATIONS, and nothing else:

   1. .sv-pricing is a PAGE here, not an overlay. In UI2.0 it is
      `position: fixed; inset: 0; z-index: 4200` because it floats over the app.
      This is the whole document, so it is normal flow. Keeping `fixed` would
      have covered the nav the brief says to keep.

   2. .sv-pricing-top (← Back + centred logo) is dropped. That header exists to
      escape the overlay; this page keeps the marketing nav instead.

   3. Manrope is loaded from Google Fonts in pricing.html. UI2.0 gets it from the
      app shell via --font-ui; a static page has no shell, so it asks directly.

   4. [data-theme="light"] rules are NOT carried over. The marketing shell has no
      theme switch, so every one of them is a selector that can never match. The
      dark palette below is the whole design.

   Loaded AFTER sv-pages.css, which styles the nav — these rules win on source
   order where the two ever name the same thing.
   ============================================================================ */

:root {
  --sv-cta-grad: linear-gradient(135deg, #ff7a2d, #ff3d8a);
  --sv-cta-shadow: 0 6px 20px -6px rgba(255, 90, 60, 0.5);
  --sv-font-ui: "Manrope", "Inter", system-ui, -apple-system, sans-serif;
}

/* The page ground. UI2.0's three-orb radial wash over #0b0b0f, attached to the
   body so it covers the full scroll height rather than one viewport. */
body.sv-pricing-body {
  background:
    radial-gradient(58% 42% at 50% -6%, rgba(255, 122, 45, 0.085), transparent 70%),
    radial-gradient(42% 34% at 88% 12%, rgba(255, 61, 138, 0.05), transparent 70%),
    radial-gradient(46% 36% at 8% 20%, rgba(124, 92, 255, 0.045), transparent 70%),
    #0b0b0f;
  background-attachment: fixed;
  color: #f4f4f6;
  font-family: var(--sv-font-ui);
}
.sv-pricing { color: #f4f4f6; font-family: var(--sv-font-ui); padding-bottom: 0; }
.sv-pricing button { font-family: inherit; }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.sv-pricing-hero { text-align: center; padding: 54px 20px 34px; max-width: 1040px; margin: 0 auto; }
.sv-pricing-hero h1 { font-size: clamp(34px, 4.6vw, 46px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 14px; color: #fff; }
.sv-pricing-hero p { font-size: 15.5px; line-height: 1.65; color: #9d9da8; margin: 0 auto; max-width: 980px; }

/* 3-way plan-type selector — its own row ABOVE the billing toggle */
.sv-pricing-tabs { display: flex; width: fit-content; gap: 4px; padding: 5px; margin: 30px auto 14px; border-radius: 999px;
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09); }
.sv-pricing-tabs button { padding: 10px 24px; border-radius: 999px; border: none; background: transparent; color: #a8a8b4;
  font-family: inherit; font-size: 14px; font-weight: 650; cursor: pointer; transition: all .15s; white-space: nowrap; }
.sv-pricing-tabs button:hover { color: #fff; }
.sv-pricing-tabs button.on { background: #fff; color: #111116; box-shadow: 0 4px 16px rgba(0,0,0,0.45); }

/* billing period — its own row BELOW the plan-type tabs */
.sv-up-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; margin-bottom: 22px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.sv-up-toggle button { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #a7a7b0; background: none;
  border: none; cursor: pointer; transition: background .15s, color .15s; }
.sv-up-save { margin-left: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.sv-pricing-toggle { margin: 0 auto; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09); }
/* An author display rule beats the [hidden] attribute, so without this the toggle stays on
   screen on the API tab while the page believes it hid it. */
.sv-up-toggle[hidden] { display: none; }
.sv-pricing-toggle button { color: #a8a8b4; }
.sv-pricing-toggle button:hover { color: #fff; }
.sv-pricing-toggle button.on { background: #fff; color: #111116; box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
.sv-pricing-toggle .sv-up-save { color: #ffb066; background: rgba(255,122,45,0.14); }

/* limited-time offer ribbon + social proof */
.sv-pricing-offer { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; width: fit-content; max-width: 92%;
  margin: 14px auto 0; padding: 9px 18px; border-radius: 999px; font-size: 13px; color: #ffd9b8;
  background: rgba(255,122,45,0.09); border: 1px solid rgba(255,150,80,0.4); }
.sv-pricing-offer b { color: #ffb066; }
/* The pill toggles `hidden` when the app's offer clock starts, a second or so after the page paints. Hide it
   but keep its box, so it appearing does not push the whole plan list down (the page's biggest layout shift).
   Visitors who never get an offer (paid plans) just see a little extra space under the toggle. */
.sv-pricing-offer[hidden] { visibility: hidden; }
.sv-pricing-offer-count { font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; background: rgba(255,122,45,0.22);
  border-radius: 999px; padding: 3px 11px; }
.sv-pricing-proof { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin: 14px auto 0; font-size: 12.5px; color: #9a9aa4; }
.sv-pricing-proof b { color: #ffb066; }
.sv-pricing-assure { text-align: center; font-size: 12.5px; color: #8a8a95; margin: 18px auto 0; }

/* ── plan cards ───────────────────────────────────────────────────────────── */
.sv-pricing-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; max-width: 1180px; margin: 10px auto 0; padding: 0 22px; align-items: stretch; }
.sv-pricing-grid.cols4 { grid-template-columns: repeat(4, 1fr); max-width: 1060px; }
.sv-pricing-card { position: relative; padding: 26px 22px 22px; border-radius: 20px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #16161d 0%, #101016 100%); border: 1px solid rgba(255,255,255,0.08);
  transition: border-color .18s ease, box-shadow .18s ease; }   /* no transform — cards stay put on hover */
.sv-pricing-card:hover { border-color: rgba(255,255,255,0.16); box-shadow: 0 24px 52px -26px rgba(0,0,0,0.75); }
.sv-pricing-card.hot { border-color: rgba(255,122,45,0.5);
  box-shadow: 0 0 0 1px rgba(255,122,45,0.26), 0 28px 64px -28px rgba(255,61,138,0.45);
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,122,45,0.12), transparent 60%), linear-gradient(180deg, #16161d 0%, #101016 100%); }
.sv-pricing-card.hot:hover { border-color: rgba(255,122,45,0.7); box-shadow: 0 0 0 1px rgba(255,122,45,0.34), 0 30px 70px -28px rgba(255,61,138,0.55); }
.sv-up-badge { position: absolute; top: 14px; right: 14px; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  color: #fff; background: var(--sv-cta-grad); letter-spacing: .4px; box-shadow: 0 6px 16px -6px rgba(255,90,60,0.55); }
.sv-pricing-name { font-size: 20px; font-weight: 760; letter-spacing: -0.01em; margin-bottom: 5px; }
/* Two lines reserved, expressed as 2 x line-height rather than a pixel guess: a card
   whose blurb wraps to two lines must not stand 0.25px taller than one whose blurb
   fits on one, or the row of CTA buttons below stops being a straight line. */
.sv-pricing-blurb { font-size: 12.5px; line-height: 1.45; color: #9a9aa4; margin-bottom: 16px; min-height: 2.9em; }
/* Same two-line reservation, against the INHERITED 1.55 line-height. UI2.0 hard-codes
   36px here, which is short of two lines: the API tab's Custom card has a one-line
   usage string where the other three wrap, so its CTA sat 2.75px above theirs. */
.sv-up-tokens { font-size: 12.5px; font-weight: 600; color: #ffb066; margin-bottom: 15px; min-height: 3.1em; font-variant-numeric: tabular-nums; }
.sv-pricing-btn { width: 100%; padding: 11px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #e8e8ee; margin-bottom: 18px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); cursor: pointer;
  transition: filter .15s, background .15s, border-color .15s, color .15s; }
.sv-pricing-btn:hover:not(:disabled) { background: rgba(255,122,45,0.08); border-color: rgba(255,150,80,0.5); color: #ffb066; }
.sv-pricing-btn:disabled { opacity: 0.5; cursor: default; }
/* the ONE emphasised action per view — Soundverse orange */
.sv-pricing-btn.cta { background: var(--sv-cta-grad); border-color: transparent; color: #fff; box-shadow: var(--sv-cta-shadow); }
.sv-pricing-btn.cta:hover:not(:disabled) { background: var(--sv-cta-grad); border-color: transparent; color: #fff; filter: brightness(1.08); }
.sv-pricing-btn.ghost { background: transparent; border-color: rgba(255,255,255,0.16); margin-top: -10px; }
/* The sales CTAs are anchors (a mailto: needs to be a real link, not a scripted navigation),
   so they need the box a <button> gets for free. */
a.sv-pricing-btn { display: block; box-sizing: border-box; text-align: center; text-decoration: none; }
.sv-up-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sv-pricing-card .sv-up-feats { margin-top: 0; }
.sv-up-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.7px; line-height: 1.4; color: #d4d4da; }
.sv-up-check { flex: none; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px;
  background: rgba(255,122,45,0.13); color: #ffb066; }
.sv-up-check svg { width: 10px; height: 10px; }

/* ── fixed-geometry price block (no card resize on slider/toggle) ─────────── */
.sv-price-block { display: flex; flex-direction: column; gap: 1px; margin-bottom: 10px; }
.sv-price-wasline { display: flex; align-items: center; gap: 7px; height: 18px; }
.sv-price-wasline.none { visibility: hidden; }
.sv-price-was { font-size: 13px; font-weight: 700; color: #8a8a95; text-decoration: line-through; text-decoration-thickness: 2px;
  text-decoration-color: rgba(255, 122, 45, 0.7); margin: 0; height: 17px; line-height: 17px; font-variant-numeric: tabular-nums; }
.sv-price-off { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px;
  color: #4ade9a; background: rgba(74,222,154,0.1); border: 1px solid rgba(74,222,154,0.4); }
.sv-price-main { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; min-height: 40px; }
.sv-price-main b { font-size: 33px; font-weight: 800; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.sv-price-main span { font-size: 12px; color: #8a8a95; }
.sv-price-note { font-size: 11.5px; color: #8a8a95; height: 15px; line-height: 15px; }
.sv-price-note.none { visibility: hidden; }

/* ── ×1…×5 volume slider (Max card + every API tier) ──────────────────────── */
.sv-mult { margin: 6px 0 12px; }
.sv-mult input[type="range"] { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 18px; margin: 0; padding: 0;
  background: transparent; border: none; cursor: pointer; }
.sv-mult input[type="range"]:focus-visible { outline: 2px solid rgba(255,150,80,0.6); outline-offset: 4px; border-radius: 999px; }
.sv-mult input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, #ff7a2d 0%, #ff3d8a var(--p, 0%), rgba(255,255,255,0.12) var(--p, 0%)); }
.sv-mult input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; margin-top: -5px; border-radius: 50%;
  background: #fff; border: none; box-shadow: 0 0 0 4px rgba(255,122,45,0.28), 0 2px 8px rgba(0,0,0,0.5); transition: box-shadow .15s; }
.sv-mult input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(255,122,45,0.42), 0 2px 8px rgba(0,0,0,0.5); }
.sv-mult input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.12); }
.sv-mult input[type="range"]::-moz-range-progress { height: 5px; border-radius: 999px; background: linear-gradient(90deg, #ff7a2d, #ff3d8a); }
.sv-mult input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: none;
  box-shadow: 0 0 0 4px rgba(255,122,45,0.28), 0 2px 8px rgba(0,0,0,0.5); }
.sv-mult-scale { display: flex; justify-content: space-between; margin-top: 1px; }
.sv-mult-scale button { padding: 2px 3px; background: none; border: none; font-family: inherit; font-size: 10.5px; font-weight: 750;
  color: #70707c; cursor: pointer; transition: color .13s; }
.sv-mult-scale button:hover { color: #fff; }
.sv-mult-scale button.on { color: #ffb066; }
/* spacer standing in for the slider on the Custom card, so all four API cards
   share the exact same vertical rhythm */
.sv-mult-ghost { height: 37px; margin: 6px 0 12px; }

/* ── "What's included" + tool tables ──────────────────────────────────────── */
.sv-pricing-inc { max-width: 1060px; margin: 34px auto 0; padding: 0 22px; }
.sv-pricing-inc h2 { font-size: 20px; font-weight: 760; letter-spacing: -0.015em; margin: 0 0 6px; text-align: center; }
.sv-pricing-inc > p { font-size: 13px; color: #9a9aa4; text-align: center; margin: 0 0 18px; }
.sv-pricing-inc > p a { color: #ffb066; font-weight: 650; }
.sv-pricing-inc-scroll { overflow-x: auto; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, #14141b, #101016); }
.sv-pricing-inc table { width: 100%; border-collapse: collapse; min-width: 720px; }
.sv-pricing-inc thead th { padding: 12px 14px; font-size: 12px; font-weight: 780; text-align: left; color: #b8b8c2;
  border-bottom: 1px solid rgba(255,255,255,0.1); }
.sv-pricing-inc thead th.hot { color: #ffb066; }
.sv-pricing-inc tbody th { padding: 11px 14px; font-size: 12.5px; font-weight: 700; text-align: left; color: #e8e8ee; width: 30%; }
.sv-pricing-inc tbody th em { display: block; font-style: normal; font-size: 11px; font-weight: 500; color: #8a8a95; margin-top: 2px; line-height: 1.4; }
.sv-pricing-inc tbody td { padding: 11px 14px; font-size: 12.5px; color: #b8b8c2; }
.sv-pricing-inc tbody td.hot { color: #ffcf9e; background: rgba(255,122,45,0.05); }
.sv-pricing-inc tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); }
.sv-pricing-inc tbody tr:last-child { border-bottom: none; }

/* tools × tiers availability matrix */
.sv-toolmatrix thead th:not(:first-child), .sv-toolmatrix td { text-align: center; width: 88px; }
.sv-toolmatrix tbody th { font-weight: 600; color: #c6c6d0; }
.sv-toolmatrix td.yes { color: #4ade9a; font-weight: 800; }
.sv-toolmatrix td.no { color: #4a4a55; }
/* A tool only staff can use yet: one muted cell across every plan column. */
.sv-toolmatrix td.soon { width: auto; color: #8a8a95; font-size: 11.5px; font-style: italic; letter-spacing: 0.01em; }
.sv-toolmatrix-stage th { background: rgba(255,255,255,0.035); color: #ffb066 !important; font-size: 11px !important;
  text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 14px !important; }

/* tool directory — grid of stage cards with one tool per line */
.sv-toolgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(246px, 1fr)); gap: 12px; align-items: start; }
.sv-toolcard { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, #14141b, #101016); }
.sv-toolcard h4 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px;
  font-size: 13px; font-weight: 760; letter-spacing: -0.01em; color: #f0f0f4; }
.sv-toolcard h4 em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #7d7d88; }
.sv-toolcard ul { list-style: none; margin: 0; padding: 0; }
.sv-toolcard li { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 12px; color: #b8b8c2; }
.sv-toolcard li:first-child { border-top: none; }
.sv-toolcard li span { min-width: 0; }
.sv-toolcard .sv-tooltier { flex: none; margin-left: 0; }
.sv-tooltier { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .05em; border-radius: 999px; padding: 1px 6px; margin-left: 4px; vertical-align: 1px; }
.sv-tooltier.free { color: #4ade9a; background: rgba(74,222,154,0.08); border: 1px solid rgba(74,222,154,0.3); }
.sv-tooltier.cr { color: #ffb066; background: rgba(255,122,45,0.1); border: 1px solid rgba(255,150,80,0.4); }
.sv-tooltier.pro { color: #c9a6ff; background: rgba(150,100,255,0.12); border: 1px solid rgba(150,100,255,0.4); }
.sv-tooltier.max { color: #7fc7ff; background: rgba(90,160,255,0.1); border: 1px solid rgba(90,160,255,0.35); }
.sv-tooltier.api { color: #7fc7ff; background: rgba(90,160,255,0.1); border: 1px solid rgba(90,160,255,0.35); }

/* ── Team & Enterprise — two wide cards + the education banner ────────────── */
.sv-pricing-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 880px; margin: 10px auto 0; padding: 0 22px; align-items: stretch; }
.sv-pricing-seats { margin: 12px 0 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.sv-seat-row { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 12.5px; }
.sv-seat-row span { font-weight: 650; }
.sv-seat-row em { flex: 1; font-style: normal; color: #83838e; font-size: 11.5px; }
.sv-seat-row b { font-size: 13px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-seat-row .sv-price-was { font-size: 11px; margin-right: 4px; height: auto; line-height: inherit; }
.sv-pricing-edu { display: flex; align-items: center; gap: 22px; max-width: 836px; margin: 18px auto 0; padding: 22px 24px; border-radius: 20px;
  background: radial-gradient(120% 130% at 0% 0%, rgba(255,122,45,0.13), transparent 55%), linear-gradient(180deg, #16161d 0%, #101016 100%);
  border: 1px solid rgba(255,122,45,0.35); }
.sv-pricing-edu-txt { flex: 1; }
.sv-pricing-edu h3 { margin: 0 0 6px; font-size: 17px; font-weight: 760; letter-spacing: -0.01em; }
.sv-pricing-edu p { margin: 0; font-size: 13px; line-height: 1.6; color: #a7a7b0; }
.sv-pricing-edu-cta { display: flex; flex-direction: column; align-items: stretch; gap: 9px; min-width: 176px; }
.sv-pricing-edu-cta .sv-pricing-btn { margin-bottom: 0; }
.sv-pricing-edu-cta a { text-align: center; font-size: 13px; font-weight: 650; color: #ffb066; }
.sv-pricing-edu-cta a:hover { color: #ffc48c; }

/* ── foot + footer ────────────────────────────────────────────────────────── */
.sv-pricing-foot { text-align: center; font-size: 13px; color: #7d7d88; margin: 40px auto 0; max-width: 640px; padding: 0 20px; line-height: 1.6; }
.sv-pricing-foot a { color: #ffb066; font-weight: 600; }
.sv-pricing-footer { margin-top: 56px; border-top: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.015); }
.sv-pricing-footer-in { max-width: 1060px; margin: 0 auto; padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.sv-pricing-footer-brand { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #7d7d88; }
.sv-pricing-footer-brand img { height: 20px; opacity: 0.9; }
.sv-pricing-footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.sv-pricing-footer-links a { font-size: 12.5px; font-weight: 600; color: #a3a3ae; transition: color .13s; }
.sv-pricing-footer-links a:hover { color: #ffb066; }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) { .sv-pricing-grid, .sv-pricing-grid.cols4 { grid-template-columns: repeat(2, 1fr); max-width: 620px; } }
@media (max-width: 800px) { .sv-pricing-duo { grid-template-columns: 1fr; max-width: 460px; } .sv-pricing-edu { flex-direction: column; align-items: stretch; max-width: 416px; text-align: center; } }
@media (max-width: 760px) {
  .sv-pricing-hero { padding: 34px 16px 22px; }
  .sv-pricing-hero p { font-size: 14px; }
  .sv-pricing-offer { font-size: 12px; padding: 8px 14px; }
  .sv-pricing-proof { gap: 12px 18px; font-size: 11.5px; padding: 0 16px; }
  .sv-pricing-assure { padding: 0 20px; }
  .sv-price-main b { font-size: 30px; }
  .sv-pricing-inc { padding: 0 14px; }
  .sv-toolgrid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
  .sv-pricing-tabs { max-width: calc(100vw - 24px); overflow-x: auto; }
  .sv-seat-row em { display: none; }               /* tokens hint yields to price on narrow rows */
  .sv-pricing-edu { margin-left: 16px; margin-right: 16px; }
  .sv-pricing-footer-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) { .sv-pricing-grid, .sv-pricing-grid.cols4 { grid-template-columns: 1fr; max-width: 400px; }
  .sv-pricing-tabs button { padding: 9px 14px; font-size: 12.5px; } }
@media (max-width: 480px) {
  .sv-toolgrid { grid-template-columns: 1fr; }
  .sv-pricing-grid { padding: 0 14px; }
  .sv-pricing-duo { padding: 0 14px; }
  .sv-up-toggle.sv-pricing-toggle { transform: scale(0.95); }
}

/* The plan cards are drawn by script, a moment after the page first paints. Until then the grid is empty and
   the lines below it sit in the first screen, then jump out of it when the cards arrive (the page's biggest
   layout shift). Reserve roughly the cards' room on a phone, where they stack, so those lines start below
   the fold; :empty ends this the moment the cards are in, so the real height takes over. */
@media (max-width: 760px) {
  .sv-pricing-grid:empty { min-height: 720px; }
}