/* ============================================================
   What we build: the service page system.

   Loaded only by the six /services/ pages. Everything is scoped
   to .sv- so it cannot reach the rest of the site.

   The architecture is measured from clickup.com, the one page
   family in this market that does not read as a brochure:
     container ladder  1160 wrapper / 1080 content / 750 faq
     module rhythm     160px desktop, 80px phone, 20px gutter
     phone             one column
     motion            a marquee, an accordion, hover. Almost none.

   The type is NOT clickup's. It shipped as fixed px on its own ramp -- h1
   60/66 at -2.1px, body 17/26 -- which put the service pages on a second
   typographic system: at 1024 a service headline came out smaller than a blog
   headline, and the body ran 1.53 leading against the site's 1.7. It now uses
   the site's own clamps, the site's -0.02em tracking and the site's leading
   ratios. Layout is unchanged; only the type was re-pointed.

   Two deliberate departures. The page stays white, grey and
   black, with colour carried by icons, chips and diagrams
   rather than by a theme. And where they put a screenshot of
   their product, we render a mock surface in markup, because
   an agency has no product to photograph and a stock image
   would say nothing.
   ============================================================ */

.sv {
  --ink: #16181C;
  --ink-2: #16181C;        /* was #090C1D, a navy that read as purple */
  --body: var(--text);     /* the site sets body text in carbon */
  --muted: var(--text-2);
  --faint: #6F6F6F;          /* was #838383: 3.44:1 on --field at 12px, fails AA */
  --surface: var(--field);
  --surface-2: #F0F0F0;
  --hair: var(--rule);
  --white: var(--surface);

  /* Colour lives in icons, chips and diagrams, never in a background wash. */
  --violet: #6647F0;
  --violet-soft: #EFEDFD;
  --teal: #0C7A6A;           /* was #0E8F7C: 3.51:1 on --teal-soft at 12px */
  --teal-soft: #E1F4F0;
  --amber: #A05F08;          /* was #B26A09: 3.76:1 on --amber-soft at 12px */
  --amber-soft: #FBF0DF;
  --pink: #C42A62;
  --pink-soft: #FBE7EE;
  --blue: #1F63D6;
  --blue-soft: #E6EEFC;

  --wrapper: 1160px;
  --content: 1080px;
  --faq-col: 750px;
  --rhythm: 112px;

  color: var(--body);
}
.sv *, .sv *::before, .sv *::after { box-sizing: border-box; }
.sv-wrap { width: min(100% - 40px, var(--wrapper)); margin-inline: auto; }
.sv-mod { margin-top: var(--rhythm); }
.sv-hero + .sv-mod, .sv-hero + section { margin-top: 72px; }
.sv-mod.is-chained { margin-top: 0; }
.sv-mod.is-close { margin-top: 48px; }
.sv h1, .sv h2, .sv h3, .sv p { margin: 0; }
.sv ul { margin: 0; padding: 0; list-style: none; }

/* Headings are painted dark to grey, which stops a black wall of type. */
.sv-d1, .sv-d2 {
  background: linear-gradient(98deg, #16181C 43%, #8A8F98 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Three display steps, taken from the site's own ramp rather than set in
   px. They were 60, 48 and 32 with -2.1px of tracking, against the site's
   -0.02em, and being fixed they jumped: a .sv-d1 was 40px at 900 and 60px at
   1280, so on a 1024 laptop a service headline was 40px while a blog
   headline was 44.8 -- the sales page quieter than the article. These are
   the same clamps h1, .page-hero h1 and .cta-band h2 already use, so the
   sizes now step down in the same ratios as the rest of the site and scale
   with the viewport instead of snapping at a breakpoint. */
.sv-d1 { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 3.9rem); line-height: 1.12;
  font-weight: 700; letter-spacing: -0.02em; }
.sv-d2 { font-size: clamp(1.9rem, 1.35rem + 2.6vw, 2.8rem); line-height: 1.12;
  font-weight: 700; letter-spacing: -0.02em; }
.sv-d3 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.05rem); line-height: 1.18;
  font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.sv-lead { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); line-height: 1.6; color: var(--muted); }

/* The label above a section title is stamp red, the same as every other
   kicker on the site -- .fc-kicker, .build-tag, .lcard-k and the rule under
   .eyebrow all use it. It shipped violet, with teal, amber, pink and blue
   variants, which put forty-three labels in five colours the palette does
   not contain; Kareem picked the purple out immediately. The variant classes
   stay so the markup does not have to change, and they now all resolve to
   the one colour. Colour still lives in the rendered UI mocks below, which
   is where it was meant to be. */
.sv-eye { display: block; font-family: var(--mono); font-size: 13px; line-height: 20px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--stamp); }
.sv-eye.is-teal,
.sv-eye.is-amber,
.sv-eye.is-pink,
.sv-eye.is-blue { color: var(--stamp); }

.sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit;
  font-size: 17px; font-weight: 650; min-height: 48px; padding: 12px 24px; border-radius: 12px; border: 0;
  text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.sv-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; }
.sv-btn-dark { background: var(--ink); color: #fff; }
.sv-btn-dark:hover { background: #000; }
.sv-btn-quiet { background: var(--surface-2); color: var(--ink); }
.sv-btn-quiet:hover { background: var(--hair); }
.sv-btn-light { background: #fff; color: var(--ink); }
.sv-btn-ghost { background: rgba(255,255,255,.14); color: #fff; }
.sv-btn-ghost:hover { background: rgba(255,255,255,.22); }

/* ---------- Hero ------------------------------------------------ */
.sv-hero { padding-top: clamp(56px, 2rem + 5vw, 116px); }
.sv-hero-in { display: flex; gap: 48px; align-items: center; }
.sv-hero-copy { flex: 0 0 520px; max-width: 520px; }
.sv-hero-copy > * + * { margin-top: 20px; }
.sv-hero-media { flex: 1 1 auto; min-width: 0; }
.sv-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sv-micro { font-size: 13px; line-height: 19px; color: var(--muted); }
.sv-micro b { display: block; font-weight: 650; color: var(--ink); }
.sv-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-facts span { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 14px; border-radius: 999px;
  background: var(--surface); font-size: 14px; color: var(--muted); }
.sv-facts b { color: var(--ink); font-weight: 650; }

/* ---------- Tool wall ------------------------------------------- */
.sv-tools { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 56px;
  padding-top: 28px; border-top: 1px solid var(--hair); }
.sv-tools > span { flex: 0 1 auto; min-width: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); }
.sv-tools ul { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.sv-tools li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; color: var(--ink); }
.sv-tools li i { width: 8px; height: 8px; border-radius: 2px; }

/* ---------- Mock surfaces --------------------------------------- */
.sv-ui { background: var(--white); border: 1px solid var(--hair); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,19,25,.04), 0 24px 48px -24px rgba(16,19,25,.22); }
.sv-ui-bar { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--hair);
  background: var(--surface); }
.sv-ui-bar b { font-size: 14px; font-weight: 650; color: var(--ink-2); }
.sv-ui-bar .sv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex: none; }
.sv-ui-bar .sv-state { margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; color: var(--teal); }
.sv-ui-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid var(--hair); font-size: 14px; }
.sv-ui-row:last-child { border-bottom: 0; }
.sv-ui-row.is-hot { background: var(--violet-soft); }
.sv-who { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-2); min-width: 0; }
.sv-who i { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: var(--violet); }
.sv-who i.is-teal { background: var(--teal); }
.sv-who i.is-amber { background: var(--amber); }
.sv-who i.is-pink { background: var(--pink); }
.sv-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-pill { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font-size: 12px;
  font-weight: 650; white-space: nowrap; background: var(--surface); color: var(--muted); }
.sv-pill.is-good { background: var(--teal-soft); color: var(--teal); }
.sv-pill.is-warn { background: var(--amber-soft); color: var(--amber); }
.sv-pill.is-new { background: var(--violet-soft); color: var(--violet); }
.sv-ui-foot { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--ink); color: #fff;
  font-size: 13px; line-height: 18px; }
.sv-ui-foot i { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--violet); font-style: normal; font-weight: 700; font-size: 13px; }
.sv-ui-foot b { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: #8FE3C8; margin-bottom: 2px; }
.sv-ui-pad { padding: 16px; display: grid; gap: 10px; }
.sv-line { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--hair); font-size: 14px; color: var(--ink-2); }
.sv-line em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.sv-line .sv-pill { margin-left: auto; }
.sv-line.is-hot { background: var(--violet-soft); border-color: transparent; }
.sv-msg { padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 20px; max-width: 88%; }
.sv-msg.them { background: var(--surface); border-bottom-left-radius: 4px; color: var(--ink-2); }
.sv-msg.us { background: var(--violet); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.sv-meter { height: 6px; border-radius: 999px; background: var(--hair); overflow: hidden; }
.sv-meter i { display: block; height: 100%; border-radius: 999px; background: var(--teal); width: var(--to, 70%); }

/* ---------- Chapter band and splits ----------------------------- */
.sv-band .sv-d2 { max-width: 20ch; margin-top: 12px; }
.sv-band .sv-lead { margin-top: 16px; max-width: 60ch; }
.sv-split { display: flex; gap: 48px; align-items: center; padding: 36px 0; }
.sv-split.is-flip { flex-direction: row-reverse; }
.sv-split-copy { flex: 0 0 452px; max-width: 452px; }
.sv-split-copy .sv-d3 { margin: 12px 0 14px; }
/* 452px column is a ~53ch reading measure, so this is body copy, not a card
   blurb: it takes the site's body token and the site's 1.7 prose leading. */
.sv-split-copy p { font-size: var(--step); line-height: 1.7; color: var(--muted); }
.sv-split-media { flex: 1 1 auto; min-width: 0; }
.sv-checks { margin-top: 20px; display: grid; gap: 11px; }
.sv-checks li { position: relative; padding-left: 28px; font-size: .95rem; line-height: 1.5; color: var(--body); }
.sv-checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--teal-soft); }
.sv-checks li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 7px; height: 4px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }

/* ---------- Cards ----------------------------------------------- */
.sv-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.sv-c { background: var(--surface); border-radius: 14px; padding: 24px; transition: background-color .2s ease; }
.sv-c:hover { background: var(--hair); }
.sv-c h3 { font-size: 18px; line-height: 24px; font-weight: 650; letter-spacing: -.5px; color: var(--ink-2); }
.sv-c p { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--muted); }
.sv-chip { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 16px;
  background: var(--white); }
.sv-chip svg { width: 22px; height: 22px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Without / with, one seam ---------------------------- */
.sv-vs { display: flex; gap: 1px; background: var(--hair); border-radius: 8px; overflow: hidden; margin-top: 36px; }
.sv-vs > div { flex: 1 1 0; background: var(--white); padding: 36px; }
.sv-vs h3 { font-size: 22px; line-height: 30px; font-weight: 650; margin-bottom: 14px; color: var(--muted); }
.sv-vs > div:last-child h3 { color: var(--ink); }
.sv-vs li { position: relative; padding-left: 26px; font-size: 16px; line-height: 26px; color: var(--muted); }
.sv-vs li + li { margin-top: 6px; }
.sv-vs li::before { content: ""; position: absolute; left: 0; top: 12px; width: 14px; height: 2px; background: #C9CDD3; }
.sv-vs > div:last-child li { color: var(--body); }
.sv-vs > div:last-child li::before { top: 5px; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--teal-soft); }
.sv-vs > div:last-child li::after { content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 4px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }

/* ---------- Tab switcher ---------------------------------------- */
.sv-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.sv-tab { font: inherit; font-size: 15px; font-weight: 600; height: 44px; padding: 0 18px; cursor: pointer;
  border: 2px dashed var(--hair); border-radius: 54px; background: transparent; color: var(--muted);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, border-radius .2s ease; }
.sv-tab:hover { color: var(--ink); border-color: #C9CDD3; }
.sv-tab[aria-selected="true"] { border: 2px solid var(--stamp); background: #FBEAE8;
  color: var(--stamp); border-radius: 16px; }
.sv-panel { margin-top: 22px; background: var(--surface); border-radius: 28px; padding: 36px;
  display: flex; gap: 36px; align-items: center; }
.sv-panel[hidden] { display: none; }
.sv-panel-copy { flex: 0 0 500px; max-width: 500px; }
.sv-panel-copy h3 { font-size: 26px; line-height: 32px; font-weight: 650; letter-spacing: -.9px; color: var(--ink); }
.sv-panel-copy p { margin-top: 12px; font-size: 1rem; line-height: 1.6; color: var(--muted); }
.sv-spec { flex: 1 1 auto; background: var(--white); border-radius: 16px; padding: 22px; display: grid; gap: 14px; }
.sv-spec div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--hair); }
.sv-spec div:last-child { border-bottom: 0; padding-bottom: 0; }
.sv-spec span { color: var(--muted); }
.sv-spec b { font-weight: 650; color: var(--ink-2); text-align: right; }

/* ---------- Stat band ------------------------------------------- */
.sv-stats { background: var(--ink); color: #fff; padding: 68px 0; margin-top: var(--rhythm); }
.sv-stats-row { display: flex; gap: 44px; }
.sv-stats-row > div { flex: 1 1 0; }
.sv-stats b { display: block; font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -1.6px; color: #fff; }
.sv-stats p { margin-top: 10px; font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,.74); }

/* ---------- Marquee --------------------------------------------- */
.sv-marq { overflow: hidden; max-width: 100vw; margin-top: var(--rhythm); }
.sv-marq-row { display: flex; gap: 12px; width: max-content; animation: sv-slide 60s linear infinite; }
.sv-marq-row.is-back { animation-name: sv-slide-back; margin-top: 12px; }
@keyframes sv-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sv-slide-back { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.sv-marq span { display: inline-flex; align-items: center; gap: 9px; padding: 11px 19px; border-radius: 15px;
  border: 1px solid var(--hair); background: var(--white); font-size: 15px; font-weight: 600; color: var(--ink);
  white-space: nowrap; }
.sv-marq span i { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* ---------- Calculator ------------------------------------------ */
.sv-calc { display: flex; border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; margin-top: 32px; }
.sv-calc-in { flex: 1 1 0; padding: 36px; display: grid; gap: 24px; align-content: start; background: var(--white); }
.sv-f label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px;
  font-weight: 650; color: var(--ink-2); margin-bottom: 10px; }
.sv-f label span { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--stamp); }
.sv-f input { width: 100%; height: 44px; accent-color: var(--stamp); background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer; }
.sv-f input::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--hair); }
.sv-f input::-moz-range-track { height: 6px; border-radius: 999px; background: var(--hair); }
.sv-f input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px;
  margin-top: -10px; border-radius: 50%; background: var(--stamp); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(16,19,25,.3); }
.sv-f input::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--stamp);
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(16,19,25,.3); }
.sv-f input:focus-visible { outline: 2px solid var(--stamp); outline-offset: 4px; }
.sv-calc-out { flex: 0 0 400px; padding: 36px; background: var(--ink); color: #fff; display: grid;
  align-content: center; gap: 8px; }
.sv-calc-out p { font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,.74); }
.sv-calc-out .sv-big { font-size: 52px; line-height: 1; font-weight: 700; letter-spacing: -2px;
  font-variant-numeric: tabular-nums; }
.sv-calc-out .sv-pay { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); color: #fff; }
.sv-calc-out .sv-pay b { color: #8FE3C8; }

/* ---------- Dark CTA card and close ----------------------------- */
.sv-cta-card { background: var(--ink); border-radius: 18px; padding: 44px; display: flex; gap: 44px;
  align-items: center; color: #fff; margin-top: var(--rhythm); }
.sv-cta-card > div:first-child { flex: 1 1 auto; }
.sv-cta-card h2 { font-size: 32px; line-height: 38px; font-weight: 650; letter-spacing: -1.1px; }
.sv-cta-card p { margin-top: 12px; font-size: var(--step); line-height: 1.65; color: rgba(255,255,255,.74); max-width: 52ch; }

.sv-faq { max-width: var(--faq-col); margin-top: 30px; }
.sv-faq details { border-top: 1px solid var(--hair); }
.sv-faq details:last-of-type { border-bottom: 1px solid var(--hair); }
.sv-faq summary { list-style: none; cursor: pointer; padding: 21px 0; display: flex; gap: 20px; align-items: center;
  justify-content: space-between; font-size: 17px; font-weight: 650; color: var(--ink); transition: opacity .2s ease; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary:hover { opacity: .7; }
.sv-faq summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px,-2px); transition: transform .2s ease; }
.sv-faq details[open] summary::after { transform: rotate(-135deg) translate(-4px,-4px); }
.sv-faq p { padding: 0 0 21px; font-size: 16px; line-height: 24px; color: var(--muted); max-width: 66ch; }

.sv-close { background: var(--ink); border-radius: 28px; padding: 88px 40px; text-align: center; color: #fff;
  margin-top: var(--rhythm); }
.sv-close h2 { font-size: 44px; line-height: 50px; font-weight: 700; letter-spacing: -1.6px; max-width: 18ch;
  margin-inline: auto; }
.sv-close p { margin: 18px auto 0; max-width: 54ch; font-size: var(--step); line-height: 1.65; color: rgba(255,255,255,.74); }
.sv-close-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.sv-rel { margin-top: 26px; font-size: 14px; color: #8E959E; }
.sv-rel a { color: #fff; text-decoration: underline; }

/* ---------- Motion ---------------------------------------------- */
.sv-rise { opacity: 0; transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.sv-rise.is-seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sv-rise { opacity: 1; transform: none; transition: none; }
  .sv-marq-row { animation: none; }
}

/* ---------- Narrow ---------------------------------------------- */
@media (max-width: 1100px) {
  .sv-hero-copy { flex-basis: 46%; }
  .sv-split-copy { flex-basis: 44%; }
  .sv-panel-copy { flex-basis: 46%; }
  .sv-calc-out { flex-basis: 38%; }
}
@media (max-width: 900px) {
  /* Ten module gaps at 80px is 800px of a phone page spent on nothing.
     The modules are shorter than the reference's, so they do not need
     the reference's spacing to read as separate. */
  .sv { --rhythm: 48px; }
  /* The display steps are clamps now and shrink on their own, so the only
     thing left to say here is what the headings that are not .sv-d* do. */
  .sv-close h2 { font-size: clamp(1.9rem, 1.35rem + 2.6vw, 2.8rem); line-height: 1.12; letter-spacing: -0.02em; }
  .sv-cta-card h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.05rem); line-height: 1.18; letter-spacing: -0.02em; }
  .sv-hero-in, .sv-split, .sv-split.is-flip, .sv-panel, .sv-calc, .sv-cta-card, .sv-vs { flex-direction: column; gap: 28px; }
  .sv-hero-copy, .sv-hero-media, .sv-split-copy, .sv-split-media, .sv-panel-copy,
  .sv-calc-in, .sv-calc-out { flex: 1 1 auto; max-width: none; width: 100%; }
  .sv-grid3, .sv-stats-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .sv-calc-in, .sv-calc-out { padding: 26px; }
  .sv-panel { padding: 26px; border-radius: 22px; }
  .sv-cta-card { padding: 30px 24px; }
  .sv-close { padding: 52px 24px; border-radius: 22px; }
  .sv-vs > div { padding: 24px; }
  .sv-stats b { font-size: 34px; }
  .sv-calc-out .sv-big { font-size: 42px; }
  .sv-split { padding: 20px 0; }
}