/* refresh-bridge.css — puts a "Warm Editorial" page (viva-refresh.css + vr-*)
   into the 2026-10 redesign's look without touching its markup or scripts:
   plum/violet palette, Bricolage Grotesque headings, Nunito Sans body.
   Load it AFTER viva-refresh.css, with the Bricolage + Nunito font link.
   Used where rewriting is riskier than reskinning: pages that run real flows
   (/audit's Turnstile + claim fork, /get-started's booking). The nav and footer
   content come from js/viva-mockups.js. */

body { margin: 0; } /* the browser's default 8px showed as a white frame */

.vr, .vr-nav, .vr-mobile-menu {
  --ink: #2b1748;
  --muted: #5f5470;
  --soft: #7d7290;
  --paper: #fff8f0;
  --cream: #efeaff;
  --line: rgba(43, 23, 72, .12);
  --blue: #6d4ce8;
  --blue-d: #5536cf;
  --blue-soft: rgba(109, 76, 232, .12);
  --blue-glow: rgba(109, 76, 232, .28);
  --cta-bg: #2b1748;
  --cta-fg: #fff8f0;
  --ok: #1f9e8f;
  font-family: "Nunito Sans", "Avenir Next", system-ui, sans-serif;
}

/* Every rule that names the old serif, generated from viva-refresh.css and the
   bridged pages' inline styles. `body` lifts specificity one notch so a page's
   own <style>, which loads after this sheet, can't win the tie. */
body .bb-build-t,
body .bb-final h2,
body .bb-sect h2,
body .cc-case .name,
body .cc-done h2,
body .cc-loop-head h2,
body .cc-price-row .amt,
body .cc-proof-n,
body .cc-step .num,
body .cc-w-total .n,
body .cc-why h3,
body .footer-brand h4,
body .fu h2,
body .gs-done h2,
body .gs-why h3,
body .pd-calc-head,
body .pd-cell .n,
body .pd-field output,
body .pd-h1,
body .pd-h2,
body .pd-res .big,
body .pd-way .find,
body .vr .serif,
body .vr-ab-stat .v,
body .vr-aud-cta h3,
body .vr-aud-level,
body .vr-aud-ring-num,
body .vr-bk-day .n,
body .vr-ch-case-stat .v,
body .vr-ch-stat .v,
body .vr-cta-row h2,
body .vr-features-head h2,
body .vr-how-num,
body .vr-logo,
body .vr-pcard-price,
body .vr-pcard-title,
body .vr-pipe-stat .v,
body .vr-problem-big,
body .vr-problem-label,
body .vr-prow-copy h3,
body .vr-related-sec h2,
body .vr-ring-num,
body .vr-section-head h2,
body .vr-stat-v,
body .vr-tcard-q {
  font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  letter-spacing: -0.02em;
}
/* Headings get the display weight; stat numbers, quotes and inline .serif text
   keep their own weight, so a quoted sentence never turns into 800-weight type. */
body .bb-final h2,
body .bb-sect h2,
body .cc-done h2,
body .cc-loop-head h2,
body .cc-why h3,
body .footer-brand h4,
body .fu h2,
body .gs-done h2,
body .gs-why h3,
body .pd-h1,
body .pd-h2,
body .vr-aud-cta h3,
body .vr-cta-row h2,
body .vr-features-head h2,
body .vr-prow-copy h3,
body .vr-related-sec h2,
body .vr-section-head h2 {
  font-weight: 800;
}
body .vr h1, body .vr h2 { font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif; letter-spacing: -0.02em; }

/* The logo: v · dotless i with a coral dot · va (markup set by viva-mockups.js). */
.vr-logo, .footer-brand h4 { font-weight: 800; letter-spacing: -0.03em; }
.vr-logo .dotless, .footer-brand h4 .dotless { position: relative; }
.vr-logo .dotless i, .footer-brand h4 .dotless i { position: absolute; left: 50%; top: -0.02em; width: 0.26em; height: 0.26em; border-radius: 50%; background: #ee5f55; transform: translateX(-50%); }

/* Buttons and the ribbon pick up the palette through the tokens above; the
   footer is outside .vr, so it gets the plum directly. */
.footer { background: #2b1748; font-family: "Nunito Sans", "Avenir Next", system-ui, sans-serif; }
.vr-ribbon { background: #2b1748; color: #fff8f0; }