/* Layout concept: Wispr-style editorial rhythm — light pages broken by big rounded
   navy panels; one serif display face with italic accents over a quiet sans body.
   In Webflow these map 1:1 to site Variables (names kept identical: rp-*). */
:host {
  --rp-paper: #f7f8fc;      /* page ground, cool off-white biased to brand blue */
  --rp-paper-2: #e8edf7;    /* tinted panels */
  --rp-ink: #10142e;        /* headings and body text */
  --rp-ink-soft: #62677b;   /* secondary text */
  --rp-line: rgba(16, 20, 46, 0.13);
  --rp-navy: #0c1231;       /* dark panels */
  --rp-navy-2: #151d40;
  --rp-blue: #0665f6;       /* brand blue (logo start, primary buttons) */
  --rp-violet: #5900ff;     /* brand violet (live site accent) */
  --rp-mint: #3ee0a1;       /* logo end green, progress and "done" states */
  --rp-sky: #c7e0ff;        /* product-shot backdrop blue */
  --rp-lime: #e5ffc5;
  --rp-on-dark: #f7f8fc;
  --rp-on-dark-soft: #b9c2d9;

  --rp-font-display: 'TWK Lausanne', 'Inter Tight', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --rp-font-body: 'TWK Lausanne', 'Inter Tight', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --rp-step--1: 0.8125rem;
  --rp-step-0: 1rem;
  --rp-step-1: 1.1875rem;
  --rp-step-2: clamp(1.5rem, 1.2rem + 1cqw, 2rem);
  --rp-step-3: clamp(2.25rem, 1.5rem + 2.6cqw, 3.75rem);
  --rp-step-4: clamp(2.75rem, 1.6rem + 4.2cqw, 6rem);

  --rp-radius-xl: clamp(28px, 3cqw, 48px);
  --rp-radius-l: 24px;
  --rp-radius-m: 14px;
  --rp-gutter: max(16px, env(safe-area-inset-left, 0px));
  --rp-max: 1240px;
  --rp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

html { background: var(--rp-paper); }
body {
  margin: 0;
  background: var(--rp-paper);
  color: var(--rp-ink);
  font-family: var(--rp-font-body);
  font-size: var(--rp-step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rp-blue); outline-offset: 3px; border-radius: 6px; }

.rp-display {
  font-family: var(--rp-font-display);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
.rp-display em { font-style: italic; letter-spacing: -0.02em; white-space: normal; }
.rp-eyebrow {
  font-family: var(--rp-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rp-ink-soft);
}
.rp-lede { font-size: var(--rp-step-1); color: var(--rp-ink-soft); max-width: 58ch; text-wrap: pretty; margin: 0; }

.rp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 22px; border: 0; border-radius: 9px;
  font: 600 14px/1.2 var(--rp-font-body); text-decoration: none;
  transition: transform 0.3s var(--rp-ease), background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.rp-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 22px -12px rgba(11, 18, 61, 0.44); }
.rp-btn:active { transform: translateY(-1px); }
.rp-btn--primary { background: var(--rp-ink); color: var(--rp-on-dark); }
.rp-btn--ghost { background: transparent; color: var(--rp-ink); box-shadow: inset 0 0 0 1.5px var(--rp-ink); }
.rp-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--rp-ink), 0 8px 22px -12px rgba(11, 18, 61, 0.44); }
.rp-btn--blue { background: var(--rp-blue); color: #fff; }
.rp-btn--light { background: #d7e6ff; color: var(--rp-ink); }
.rp-btn--line-light { color: var(--rp-on-dark); box-shadow: inset 0 0 0 1px rgba(215, 230, 255, 0.4); background: transparent; }

/* Section headings (shared rhythm) */
.section-heading { max-width: 850px; text-align: center; margin: 0 auto 64px; }
.section-heading h2 { font-size: clamp(42px, 5.5cqw, 76px); }
.section-heading > p:not(.rp-eyebrow) { font-size: 17px; line-height: 1.6; color: var(--rp-ink-soft); max-width: 56ch; margin: 26px auto 0; }
.rp-eyebrow { font-size: 11px; letter-spacing: 0.14em; }
.demo-label { display: block; text-align: center; font: 500 8px/1.4 var(--rp-font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #7c8699; margin-top: 14px; }
@container rp (max-width: 650px) { .section-heading h2 { font-size: 42px; } .section-heading > p:not(.rp-eyebrow) { font-size: 15px; } }

.rp-wrap { width: min(var(--rp-max), 100%); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Hero + logo band — shared by the prototype and the Webflow "RP Hero" component. */
.hero-wrap { position: relative; }
.hero-wrap .pf { padding-top: var(--rp-hero-top, 190px); }
.hero {
  position: relative; text-align: center; display: grid; justify-items: center; gap: 27px;
  width: min(1000px, 100%); margin-inline: auto; padding-inline: 24px;
}
.hero-eyebrow { margin: 0; color: var(--rp-ink-soft); font-size: 11px; letter-spacing: 0.14em; }
.hero h1 { font-size: clamp(50px, 6.5cqw, 92px); line-height: 0.99; max-width: 18ch; }
.hero h1 .w { display: inline-block; overflow: clip; vertical-align: bottom; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero h1 .wi { display: inline-block; }
.hero h1 .is-blue { color: var(--rp-hero-accent, var(--rp-blue)); }
.hero-body { text-align: center; font-size: 17px; line-height: 1.6; max-width: 61ch; color: var(--rp-ink-soft); margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 7px; }
.hero-actions .rp-btn { min-height: 50px; }
.hero-store { padding: 12px 20px 12px 17px; }
.hero-store .hero-store-icon { width: var(--store-icon, 22px); height: var(--store-icon, 22px); object-fit: contain; flex: none; display: block; }
.hero-store span { display: grid; text-align: left; gap: 3px; font-size: 14px; line-height: 1.05; }
.hero-store small { font-size: 8px; letter-spacing: 0.14em; opacity: 0.75; font-weight: 600; }

/* Proof line under the buttons: rating, divider, review quote. Flat, no cards. */
.hero-proof { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 4px; max-width: 580px; }
.hero-proof .hb-card { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; rotate: 0deg; border-radius: 0; }
.hero-proof .hb-rating { padding: 0; min-width: 190px; }
.hero-proof .hb-bag { display: none; }
.hero-proof .hb-rating-t { gap: 3px; justify-items: start; text-align: left; }
.hero-proof .hb-stars svg { width: 11px; height: 11px; fill: var(--rp-blue); filter: none; animation: none; }
.hero-proof .hb-line { font-size: 10px; }
.hero-proof .hb-rating small { font-size: 9px; }
.hero-proof .hb-quote { margin: 0; padding: 0 0 0 22px; width: 245px; border-left: 1px solid var(--rp-line); text-align: left; }
.hero-proof .hb-top, .hero-proof figcaption { display: none; }
.hero-proof .hb-quote blockquote { font: italic 15px/1.3 var(--rp-font-display); color: var(--rp-ink-soft); }

/* Framed product stage */
.hero-stage { position: relative; z-index: 3; max-width: 1220px; padding: 0 35px; margin: 56px auto 0; }
.hero-stage-card {
  position: relative; padding: 14px 16px 20px; border: 1px solid #cfd9ef; border-radius: 28px;
  background: linear-gradient(135deg, #e3ebfa, #eaf0fb 60%, #e1eee8);
  box-shadow: 0 30px 60px -45px rgba(11, 21, 63, 0.33); transform-origin: center;
}
.hero-stage-card .dh-frame { box-shadow: 0 12px 30px rgba(16, 26, 56, 0.08); border: 1px solid #dce3ee; }

.band { position: relative; background: transparent; margin: 0; padding: 64px 0 70px; }

@container rp (max-width: 900px) {
  .hero h1 { font-size: 72px; }
  .hero-body { max-width: 48ch; }
  .hero-stage { padding: 0 24px; }
  .hero-stage-card { padding: 10px 10px 18px; border-radius: 24px; }
  .band { padding: 50px 0; }
}
@container rp (max-width: 650px) {
  .hero { padding: 0 22px; gap: 23px; }
  .hero-eyebrow { font-size: 9px; letter-spacing: 0.1em; }
  .hero h1 { font-size: clamp(42px, 10.9cqw, 66px); max-width: 16ch; line-height: 1.02; }
  .hero-body { font-size: 15px; line-height: 1.65; }
  .hero-actions { gap: 10px; margin-top: 2px; }
  .hero-actions .rp-btn { font-size: 12px; padding: 13px; min-height: 47px; }
  .hero-store span { font-size: 12px; }
  .hero-store small { font-size: 6px; }
  .hero-store img:not(.hero-store-icon) { width: 16px; height: 18px; }
  .hero-proof { gap: 14px; margin-top: 0; width: 100%; }
  .hero-proof .hb-rating { min-width: 132px; }
  .hero-proof .hb-quote { width: auto; padding-left: 14px; }
  .hero-proof .hb-quote blockquote { font-size: 13px; }
  .hero-proof .hb-line { font-size: 9px; }
  .hero-proof .hb-rating small { font-size: 8px; }
  .hero-stage { padding: 0 15px; margin-top: 40px; }
  .hero-stage-card { padding: 8px 8px 14px; border-radius: 18px; }
  .demo-label { font-size: 7px; margin-top: 9px; }
  .band { padding: 35px 0 40px; }
}

/* Reading progress */
.scroll-progress { position: fixed; inset: 0 0 auto; height: 2px; background: var(--rp-blue); z-index: 110; transform: scaleX(0); transform-origin: left center; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

@container rp (max-width: 991px) { .hero-wrap .pf { padding-top: var(--rp-hero-top-t, var(--rp-hero-top, 190px)); } }
@container rp (max-width: 767px) {
  .hero-wrap .pf { padding-top: var(--rp-hero-top-m, var(--rp-hero-top, 190px)); }
  .hero-wrap.hm-steps .ho-steps { display: none; }
  .hero-wrap.hm-band .band { display: none; }
}

@container rp (max-width: 478px) { .hero-wrap .pf { padding-top: var(--rp-hero-top-p, var(--rp-hero-top-m, var(--rp-hero-top, 190px))); } }
.hero-wrap .hero-stage { max-width: var(--hero-stage-w, 1220px) !important; }

.rp-cq { container: rp / inline-size; width: 100%; }
/* Base styles inside each component's shadow root (the prototype's html/body rules). */
:host { display: block; }
.rp-root {
  position: relative;
  background: var(--rp-paper);
  color: var(--rp-ink);
  font-family: var(--rp-font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.rp-root--clear { background: transparent; }
.rp-root h1, .rp-root h2, .rp-root h3 { font-weight: 400; }

/* ---------- Story stage wrapper ---------- */
.story-wrap { position: relative; background: var(--rp-band, var(--rp-paper)); }
.story-wrap .ss { background: var(--rp-paper); }
.story-wrap .ss.is-static { border-radius: clamp(28px, 3cqw, 48px) clamp(28px, 3cqw, 48px) 0 0; }
.story-wrap .ss-race-title em, .rp-display em { font-style: italic; }

/* ---------- Pending tag on new sections ---------- */
.pending {
  position: absolute; z-index: 20; top: 16px; left: 50%; transform: translateX(-50%);
  font: 600 0.68rem/1 var(--rp-font-body); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 99px; background: #ffe66b; color: #3a3000; white-space: nowrap;
}
.faq-wrap { position: relative; }
.faq-wrap .pending { top: 40px; }

/* ==========================================================================
   Report Pundit design system (v12)
   One consolidated theme, loaded last and scoped to .rp-root so it wins over
   component defaults in the preview and inside each Webflow shadow root.

   Type      TWK Lausanne (as on ramp.com) when installed, otherwise Inter Tight
   Colour    Calm neutrals, one accent (RP blue), one deep tone (RP navy) used
             twice on the page. Aqua and lime live only in the logo and data.
   Surfaces  page → tile → white card, separated by hairlines and soft shadows.
   ========================================================================== */
.rp-root {
  /* palette */
  --rp-paper: #f7f8fc;          /* page */
  --rp-paper-2: #eef1f7;        /* tile */
  --rp-ink: #10142e;
  --rp-ink-soft: #5b6178;
  --rp-ink-faint: #8b90a3;
  --rp-line: rgba(16, 20, 46, 0.08);
  --rp-line-2: rgba(16, 20, 46, 0.12);
  --rp-blue: #0066ff;
  --rp-blue-soft: #eaf1ff;
  --rp-deep: #0c1231;
  --rp-navy: #eef1f7;           /* legacy name used by older component CSS */
  --rp-navy-2: #ffffff;
  --rp-on-dark: #10142e;
  --rp-on-dark-soft: #5b6178;
  --on-deep: #f7f8fc;
  --on-deep-soft: #aab3cc;
  --deep-bg: radial-gradient(60% 55% at 85% 0%, rgba(0, 102, 255, 0.32), rgba(0, 102, 255, 0) 70%), radial-gradient(50% 45% at 0% 100%, rgba(0, 102, 255, 0.14), rgba(0, 102, 255, 0) 70%), #0c1231;

  /* type */
  --rp-font-display: 'TWK Lausanne', 'Inter Tight', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --rp-font-body: 'TWK Lausanne', 'Inter Tight', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --fs-h1: clamp(46px, 6.6cqw, 96px);
  --fs-h2: clamp(38px, 4.9cqw, 68px);
  --fs-h3: clamp(28px, 2.6cqw, 38px);
  --fs-lede: clamp(16px, 1.25cqw, 18px);
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-label: 11.5px;

  /* surfaces */
  --sh-1: 0 0 0 1px var(--rp-line), 0 1px 2px rgba(16, 20, 46, 0.04);
  --sh-2: 0 0 0 1px var(--rp-line), 0 1px 2px rgba(16, 20, 46, 0.04), 0 16px 40px -20px rgba(16, 20, 46, 0.16);
  --sh-3: 0 0 0 1px var(--rp-line), 0 2px 6px rgba(16, 20, 46, 0.04), 0 48px 96px -40px rgba(16, 30, 80, 0.28);
  --r-card: 20px;
  --r-tile: 28px;
  --r-panel: clamp(28px, 3cqw, 40px);

  /* legacy aliases (older rules reference these) */
  --m-shadow: var(--sh-2);
  --m-shadow-lg: var(--sh-3);
  --m-violet: var(--rp-blue);

  background: var(--rp-paper);
  color: var(--rp-ink);
  font-family: var(--rp-font-body);
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.006em;
  text-rendering: optimizeLegibility;
}
.rp-root ::selection { background: rgba(0, 102, 255, 0.16); color: var(--rp-ink); }

/* ---------- Typography ---------- */
.rp-root .rp-display { font-family: var(--rp-font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; color: var(--rp-ink); text-wrap: balance; }
.rp-root .rp-display em { font-style: italic; letter-spacing: -0.01em; }
.rp-root h2.rp-display em { color: var(--rp-blue); }
.rp-root .hero h1 { font-size: var(--fs-h1); line-height: 0.98; letter-spacing: -0.025em; }
.rp-root :is(.ss-head, .ll-head, .ts-head, .rw-head, .cf-head, .section-heading) h2,
.rp-root .ss-race-title, .rp-root .cp-copy h2 { font-size: var(--fs-h2); line-height: 1.02; }
.rp-root .ll-title { font-size: var(--fs-h3); line-height: 1.06; letter-spacing: -0.015em; }
.rp-root .ss-copy-title { font-size: clamp(24px, 2cqw, 30px); line-height: 1.1; }
.rp-root .ts-title { font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; }
.rp-root :is(.hero-body, .rp-lede, .section-heading > p, .ss-head p, .ss-race-body, .ll-head p, .ts-head p, .rw-head p, .cp-copy p) {
  font-size: var(--fs-lede); line-height: 1.6; color: var(--rp-ink-soft); letter-spacing: -0.008em;
}
.rp-root :is(.ll-body, .ss-copy-body) { font-size: var(--fs-body); line-height: 1.65; color: var(--rp-ink-soft); }
.rp-root .ts-body { font-size: 13.5px; line-height: 1.55; color: var(--rp-ink-soft); }
.rp-root :is(.rp-eyebrow, .ss-copy-eyebrow, .ss-rail-eyebrow, .lm-label) { font: 600 var(--fs-label)/1.2 var(--rp-font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rp-blue); }
.rp-root .ll-tag { font: 600 var(--fs-label)/1.2 var(--rp-font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rp-blue); background: none; padding: 0; margin-bottom: 14px; }
.rp-root .lm-label { color: var(--rp-ink-faint); }
.rp-root .demo-label, .rp-root .ll-caption { font: 500 10.5px/1.4 var(--rp-font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rp-ink-faint); }

/* ---------- Buttons ---------- */
.rp-root .rp-btn {
  min-height: 46px; padding: 0 22px; border-radius: 999px; font: 600 14.5px/1 var(--rp-font-body); letter-spacing: -0.01em;
  transition: transform .3s var(--rp-ease), background-color .25s, box-shadow .3s, color .25s;
}
.rp-root .rp-btn:hover { transform: translateY(-1px); }
.rp-root .rp-btn--primary { background: var(--rp-ink); color: #fff; box-shadow: 0 1px 2px rgba(16, 20, 46, .2), inset 0 1px 0 rgba(255, 255, 255, .08); }
.rp-root .rp-btn--primary:hover { background: #1d2346; box-shadow: 0 10px 24px -12px rgba(16, 20, 46, .55); }
.rp-root .rp-btn--blue, .rp-root .rp-btn--light { background: var(--rp-blue); color: #fff; box-shadow: 0 1px 2px rgba(0, 60, 160, .25), inset 0 1px 0 rgba(255, 255, 255, .14); }
.rp-root .rp-btn--blue:hover, .rp-root .rp-btn--light:hover { background: #0058dd; box-shadow: 0 10px 24px -12px rgba(0, 102, 255, .6); }
.rp-root .rp-btn--ghost, .rp-root .rp-btn--line-light { background: #fff; color: var(--rp-ink); box-shadow: inset 0 0 0 1px var(--rp-line-2); }
.rp-root .rp-btn--ghost:hover, .rp-root .rp-btn--line-light:hover { box-shadow: inset 0 0 0 1px rgba(16, 20, 46, .22), 0 8px 20px -14px rgba(16, 20, 46, .35); }
.rp-root .scroll-progress { background: var(--rp-blue); }

/* ---------- Hero ---------- */
.rp-root .hero-wrap { position: relative; isolation: isolate; background: var(--hero-sheet, radial-gradient(50% 38% at 50% 0%, rgba(0, 102, 255, 0.07), rgba(0, 102, 255, 0) 70%), var(--rp-paper)); }
.rp-root .hero-wrap::before { content: none; }
.rp-root .hero { gap: 24px; }
.rp-root .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px;
  background: #fff; box-shadow: var(--sh-1); color: var(--rp-ink); font-size: 11.5px; letter-spacing: 0.08em;
}
.rp-root .hero-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rp-blue); box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.14); }
.rp-root .hero-eyebrow.is-plain { background: none; box-shadow: none; padding: 0; }
.rp-root .hero-eyebrow.is-plain::before { display: none; }
.rp-root .hero h1 .is-blue { color: var(--rp-hero-accent, var(--rp-blue)); }
.rp-root .hero-body { max-width: 56ch; }
.rp-root .hero-actions { gap: 10px; margin-top: 4px; }
.rp-root .hero-actions .rp-btn { min-height: 50px; }
.rp-root .hero-proof .hb-stars svg { fill: var(--rp-blue); }
.rp-root .hero-glow { display: none; }
.rp-root .hero-stage { margin-top: 64px; }
.rp-root .hero-stage-card {
  z-index: 1; border: 0; border-radius: var(--r-tile); padding: 12px 12px 16px;
  background: var(--hero-tile, #fff); box-shadow: var(--sh-3); will-change: transform;
}
.rp-root .hero-stage-card.has-beam::before, .rp-root .hero-stage-card.has-edge::after,
.rp-root .hero-stage.has-stack::before, .rp-root .hero-stage.has-stack::after { content: none; }
.rp-root .hero-stage-card .dh-frame { border: 1px solid var(--rp-line); box-shadow: none; }
.rp-root .band { background: transparent; }
.rp-root .lm--light .lm-set img { filter: grayscale(1) brightness(0.15); opacity: 0.45; }
.rp-root .lm--light .lm-set li:hover img { opacity: 0.8; }

/* Hero animation chrome */
.rp-root .ho-steps { background: #fff; box-shadow: var(--sh-1); }
.rp-root .ho-step { font-weight: 500; color: var(--rp-ink-faint); }
.rp-root .ho[data-step="1"] .ho-step--1, .rp-root .ho[data-step="2"] .ho-step--2, .rp-root .ho[data-step="3"] .ho-step--3 { background: var(--ho-step-on, var(--rp-ink)); color: var(--ho-step-on-text, #fff); }
.rp-root .ho[data-step="1"] .ho-step--1 b, .rp-root .ho[data-step="2"] .ho-step--2 b, .rp-root .ho[data-step="3"] .ho-step--3 b { background: var(--rp-blue); color: #fff; }
.rp-root .ho-src-in { box-shadow: var(--sh-2); }
.rp-root .ho-count b { color: #8ec2ff; }

/* ---------- Hours to seconds + Simplify ---------- */
.rp-root .story-wrap, .rp-root .story-wrap .ss, .rp-root .story-wrap .ss.has-race.is-pinned { background: var(--rp-paper); }
.rp-root .ss.is-pinned .ss-panel { background: var(--ss-panel, var(--deep-bg)); box-shadow: none; }
.rp-root .ss.is-pinned .ss-race-head .ss-race-title, .rp-root .ss.is-pinned .ss-race-head h2 { color: var(--on-deep); }
.rp-root .ss.is-pinned .ss-race-head h2 em { color: #8ec2ff; }
.rp-root .ss.is-pinned .ss-race-head .ss-race-body { color: var(--on-deep-soft); }
.rp-root .ss.is-pinned .ss-race-head .rp-eyebrow { color: #8ec2ff; }
.rp-root .ss-card, .rp-root .ss-slow { background: var(--rp-paper-2); box-shadow: var(--sh-2); }
.rp-root .ss.is-pinned .ss-slow, .rp-root .ss.is-pinned .ss-card { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -36px rgba(0, 0, 0, .55); }
.rp-root .ss-card-label span { color: var(--rp-ink-faint); }
.rp-root .ss-card-label strong { color: var(--rp-ink); font-family: var(--rp-font-display); }
.rp-root .ss-rail-fill { background: var(--rp-blue); }
.rp-root .ss-copy-item:nth-child(n) .ss-copy-eyebrow { color: var(--rp-blue); }
.rp-root .rr-tr span:last-child i { background: var(--rp-blue); }

/* ---------- One source of truth ---------- */
.rp-root .ll { position: relative; background: var(--ll-band, var(--rp-paper)); }
.rp-root .ll::before { content: none; }
.rp-root .ll-visual-inner { background: var(--ll-bg, var(--rp-paper-2)); border-radius: var(--ll-radius, var(--r-tile)); box-shadow: inset 0 0 0 1px var(--rp-line); overflow: hidden; }
.rp-root .ll-layer { padding: 4.5%; background: none; }
.rp-root .ll-layer:nth-child(n) { background: none; }
.rp-root .ll-inline-img { background: var(--rp-paper-2); box-shadow: inset 0 0 0 1px var(--rp-line); border-radius: var(--r-tile); padding: 4%; }
.rp-root .ll-dots span { background: rgba(16, 20, 46, 0.18); }
.rp-root .ll-dots span.is-on { background: var(--rp-ink); }
.rp-root .ll-item:nth-child(n) .ll-tag { background: none; color: var(--rp-blue); }

/* ---------- Experts ---------- */
.rp-root .ts-panel { border-radius: var(--r-panel); }
.rp-root .ts-card { background: #fff; box-shadow: var(--sh-1); border-radius: 18px; }
.rp-root .ts-card:hover { background: #fff; box-shadow: var(--sh-2); }
.rp-root .ts-card .ts-tile, .rp-root .ts-card:nth-child(2) .ts-tile { background: var(--ts-tile-bg, var(--rp-blue-soft)); color: var(--ts-tile-ink, var(--rp-blue)); border-radius: 10px; }
.rp-root .ts-figure { background: none; padding: 0; }
.rp-root .ts-avatars span.stack i { background: var(--rp-ink); }
.rp-root .ts-avatars span.stack i:first-child { background: var(--rp-blue); }
.rp-root .ts-avatars span.stack i:nth-child(3) { background: #3b4a73; }

/* ---------- Reviews ---------- */
.rp-root .rw { background: var(--rw-bg, var(--rp-paper)); color: var(--rp-ink); }
.rp-root .rw-head h2 { color: var(--rp-ink); }
.rp-root .rw-head p { color: var(--rp-ink-soft); }
.rp-root .rw-card { border-radius: var(--r-card); box-shadow: var(--sh-1); }
.rp-root .rw-card:hover { box-shadow: var(--sh-2); }
.rp-root .rw-card blockquote { font-family: var(--rp-font-display); font-size: 20px; line-height: 1.35; letter-spacing: -0.005em; }
.rp-root .rw-stars, .rp-root .rw-card .rw-stars { color: var(--rw-star, var(--rp-blue)); }
.rp-root .rw-num { color: var(--rp-ink-faint); }
.rp-root .rw-id strong { font-size: 12.5px; }
.rp-root .rw-cta.rp-btn--blue { background: var(--rp-ink); color: #fff; box-shadow: none; }
.rp-root .rw-cta.rp-btn--blue:hover { background: #1d2346; }

/* ---------- FAQ ---------- */
.rp-root .cf-panel { background: var(--cf-panel, var(--rp-paper-2)); border-radius: var(--r-panel); box-shadow: inset 0 0 0 1px var(--rp-line); }
.rp-root .cf-list { background: var(--rp-navy-list, #fff); color: var(--rp-ink); box-shadow: var(--sh-1); border-radius: 20px; }
.rp-root .cf-list-top { border-bottom: 1px solid var(--rp-line); margin-bottom: 6px; }
.rp-root .cf-list-top span { color: var(--rp-ink); font-family: var(--rp-font-display); }
.rp-root .cf-list-top em { color: var(--rp-ink-faint); opacity: 1; font-style: normal; }
.rp-root .cf-list button { color: var(--cf-q, #2c3150); font: 500 13.5px/1.4 var(--rp-font-body); }
.rp-root .cf-list button svg { color: var(--rp-ink-faint); }
.rp-root .cf-list button:hover { color: var(--rp-ink); background: #f4f6fa; }
.rp-root .cf-list li.is-active button { color: var(--cf-active-text, var(--rp-blue)); background: var(--cf-active-bg, var(--rp-blue-soft)); font-weight: 600; }
.rp-root .cf-list li.is-active button svg { color: var(--rp-blue); }
.rp-root .cf-inline { color: var(--rp-ink-soft); background: #f4f6fa; }
.rp-root .cf-chat { background: var(--cf-chat-bg, transparent); }
.rp-root .cf-chat-top strong { color: var(--rp-ink); font-family: var(--rp-font-display); }
.rp-root .cf-chat-top small { color: var(--rp-ink-faint); font-size: 11.5px; }
.rp-root .cf-avatar { background: #fff; box-shadow: var(--sh-1); }
.rp-root .cf-bubble { font-size: 14px; line-height: 1.6; }
.rp-root .cf-bubble--me { background: var(--cf-me-bg, transparent); color: var(--cf-me-text, var(--rp-ink-soft)); padding: 6px 2px; box-shadow: none; text-align: right; font-weight: 500; }
.rp-root .cf-bubble--them { background: var(--cf-them-bg, #fff); color: var(--cf-them-text, var(--rp-ink)); box-shadow: var(--sh-1); border-radius: 16px 16px 16px 4px; }
.rp-root .cf-help { color: var(--rp-blue); font-weight: 600; }
.rp-root .cf-compose { background: #fff; color: var(--rp-ink-faint); box-shadow: var(--sh-1); }
.rp-root .cf-compose i { background: var(--rp-ink); }

/* ---------- Closing ---------- */
.rp-root .cp { background: var(--cp-bg, var(--deep-bg)); color: var(--on-deep); }
.rp-root .cp-orb, .rp-root .cp-grain::after { display: none; }
.rp-root .cp-grain { background: none; }
.rp-root .cp-copy h2 { color: var(--on-deep); }
.rp-root .cp-copy h2 em { color: #8ec2ff; }
.rp-root .cp-copy p { color: var(--on-deep-soft); }
.rp-root .cp-live { opacity: var(--cp-live-o, 0.07); filter: blur(var(--cp-blur, 0px)); }
.rp-root .cp-actions .rp-btn--blue, .rp-root .cp-actions .rp-btn--light { background: var(--rp-blue); color: #fff; }
.rp-root .cp-actions .rp-btn--ghost, .rp-root .cp-actions .rp-btn--line-light { background: transparent; color: var(--on-deep); box-shadow: inset 0 0 0 1px rgba(247, 248, 252, 0.28); }
.rp-root .cp-actions .rp-btn--ghost:hover, .rp-root .cp-actions .rp-btn--line-light:hover { background: rgba(247, 248, 252, 0.06); }

/* ---------- Navbar ---------- */
.rp-root .nb { --nb-font: var(--rp-font-body); --nb-fw: 500; }
.rp-root .nb-dd-ic, .rp-root .nb-dd-item:nth-child(n) .nb-dd-ic, .rp-root .nb-m-sub a:nth-child(n) .nb-dd-ic { background: var(--nb-dd-ic-bg); color: var(--nb-dd-ic); }
.rp-root .nb-btn--1 { box-shadow: 0 1px 2px rgba(0, 60, 160, .25), inset 0 1px 0 rgba(255, 255, 255, .14); }

/* ---------- Footer ---------- */
.rp-root .ft-title { letter-spacing: 0.1em; }

/* ---------- Responsive type and rhythm ---------- */
@container rp (max-width: 991px) {
  .rp-root { --fs-h1: clamp(44px, 7.6cqw, 68px); --fs-h2: clamp(36px, 6cqw, 52px); }
  .rp-root .hero-stage { margin-top: 48px; }
}
@container rp (max-width: 767px) {
  .rp-root { --fs-h1: clamp(40px, 11cqw, 52px); --fs-h2: clamp(34px, 9.4cqw, 42px); --fs-h3: 28px; --fs-lede: 16px; --fs-body: 15px; }
  .rp-root .hero { gap: 20px; }
  .rp-root .hero-stage { margin-top: 36px; }
  .rp-root .hero-stage-card { border-radius: 20px; padding: 8px 8px 12px; }
  .rp-root .rp-btn { min-height: 46px; font-size: 14px; padding: 0 18px; }
  .rp-root .hero-actions .rp-btn { min-height: 48px; }
  .rp-root .rw-card blockquote { font-size: 18px; }
  .rp-root .ts-title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .rp-root .rp-btn:hover { transform: none; } }

/* ==========================================================================
   SOFT MULTI-TONE THEME (v13 "soft")
   RP logo tones softened into a supporting palette:
     sky   #eaf1ff / #d9e7ff   (from blue  #0066FF)
     mint  #e4f8f4 / #c9f1e9   (from aqua  #00FFD9)
     sage  #f0f8e3 / #e1f2c6   (from lime  #95FF00)
   Used for washes, tinted tiles, icons, hovers and illustration accents.
   Ink stays the only strong colour; RP blue is the single saturated accent.
   ========================================================================== */
.rp-root {
  --sky: #eaf1ff; --sky-2: #d9e7ff; --sky-ink: #0b4fc4;
  --mint: #e4f8f4; --mint-2: #c9f1e9; --mint-ink: #0b7f70;
  --sage: #f0f8e3; --sage-2: #e1f2c6; --sage-ink: #4d7f0c;
  --rp-paper: #f8f9fc;
  --rp-paper-2: #f1f4fa;
  --rp-blue-soft: var(--sky);
  --grid-line: rgba(16, 40, 90, 0.045);
  --wash: radial-gradient(48% 60% at 0% 0%, rgba(0, 102, 255, 0.10), transparent 70%),
          radial-gradient(42% 55% at 100% 8%, rgba(0, 255, 217, 0.10), transparent 70%),
          radial-gradient(50% 40% at 70% 100%, rgba(149, 255, 0, 0.07), transparent 70%);
  /* light "deep" panels: soft sky → mint, ink text */
  --deep-bg: radial-gradient(55% 70% at 100% 0%, rgba(0, 255, 217, 0.16), transparent 65%),
             radial-gradient(50% 60% at 0% 100%, rgba(149, 255, 0, 0.10), transparent 65%),
             linear-gradient(160deg, #e6eeff 0%, #eef3ff 48%, #e8f7f4 100%);
  --on-deep: #10142e;
  --on-deep-soft: #565d76;
  --sh-1: 0 0 0 1px rgba(16, 20, 46, 0.06), 0 1px 2px rgba(16, 20, 46, 0.04);
  --sh-2: 0 0 0 1px rgba(16, 20, 46, 0.06), 0 2px 4px rgba(16, 20, 46, 0.03), 0 20px 44px -24px rgba(16, 50, 120, 0.22);
  --sh-3: 0 0 0 1px rgba(16, 20, 46, 0.06), 0 4px 10px rgba(16, 20, 46, 0.03), 0 60px 110px -50px rgba(16, 60, 150, 0.32);
}
.rp-root .grid-bg, .rp-root .hero-wrap::after {
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Hero: soft wash + faint grid fading out, like light through frosted glass */
.rp-root .hero-wrap { background: var(--hero-sheet, var(--wash)), var(--rp-paper); }
.rp-root .hero-wrap::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 22%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 55% at 50% 22%, #000 0%, transparent 75%);
}
.rp-root .hero-eyebrow { background: rgba(255, 255, 255, 0.8); }
.rp-root .hero-eyebrow::before { background: linear-gradient(135deg, #0066ff, #00d9b8); }
.rp-root .hero-stage-card { background: var(--hero-tile, rgba(255, 255, 255, 0.92)); }
.rp-root .hero-stage::before {
  content: ''; position: absolute; inset: 6% -2% -4%; z-index: 0; border-radius: 48px; pointer-events: none;
  background: linear-gradient(120deg, rgba(0, 102, 255, 0.10), rgba(0, 255, 217, 0.10) 55%, rgba(149, 255, 0, 0.08));
  filter: blur(40px);
}
.rp-root .hero-stage { position: relative; }
.rp-root .ho-steps { background: rgba(255, 255, 255, 0.9); }

/* Story: light race panel; cards keep depth with soft blue shadows */
.rp-root .story-wrap, .rp-root .story-wrap .ss, .rp-root .story-wrap .ss.has-race.is-pinned { background: var(--rp-paper); }
.rp-root .ss.is-pinned .ss-panel { box-shadow: inset 0 0 0 1px rgba(0, 102, 255, 0.08); }
.rp-root .ss.is-pinned .ss-race-head h2 em, .rp-root .ss.is-pinned .ss-race-head .rp-eyebrow { color: var(--rp-blue); }
.rp-root .ss.is-pinned .ss-slow, .rp-root .ss.is-pinned .ss-card { box-shadow: var(--sh-3); }
.rp-root .ss-card, .rp-root .ss-slow { background: #fff; }
.rp-root .ss-card:nth-of-type(3n+1) { background: linear-gradient(180deg, #fff, var(--sky) 140%); }
.rp-root .ss-card:nth-of-type(3n+2) { background: linear-gradient(180deg, #fff, var(--mint) 140%); }
.rp-root .ss-card:nth-of-type(3n) { background: linear-gradient(180deg, #fff, var(--sage) 140%); }
.rp-root .ss-copy-item:nth-child(3n+2) .ss-copy-eyebrow { color: var(--mint-ink); }
.rp-root .ss-copy-item:nth-child(3n) .ss-copy-eyebrow { color: var(--sage-ink); }
.rp-root .ss.is-static .ss-static-shot { background: var(--sky); }
.rp-root .ss.is-static .ss-copy-item:nth-child(3n+2) .ss-static-shot { background: var(--mint); }
.rp-root .ss.is-static .ss-copy-item:nth-child(3n) .ss-static-shot { background: var(--sage); }
.rp-root .rr-tr span:last-child i { background: linear-gradient(90deg, #0066ff, #00c9ad); }

/* One source of truth: section wash + one tint per feature */
.rp-root .ll { background: radial-gradient(40% 50% at 100% 30%, rgba(0, 255, 217, 0.06), transparent 70%), radial-gradient(40% 40% at 0% 80%, rgba(0, 102, 255, 0.05), transparent 70%), var(--ll-band, var(--rp-paper)); }
.rp-root .ll-visual-inner { background: var(--ll-bg, linear-gradient(150deg, var(--sky) 0%, #f2f6ff 45%, var(--mint) 100%)); box-shadow: inset 0 0 0 1px rgba(0, 102, 255, 0.07); }
.rp-root .ll-item:nth-child(4n+1) .ll-tag { color: var(--rp-blue); }
.rp-root .ll-item:nth-child(4n+2) .ll-tag { color: var(--mint-ink); }
.rp-root .ll-item:nth-child(4n+3) .ll-tag { color: var(--sage-ink); }
.rp-root .ll-item:nth-child(4n) .ll-tag { color: var(--sky-ink); }
.rp-root .ll-item:nth-child(4n+1) .ll-inline-img { background: linear-gradient(150deg, var(--sky), #f5f8ff); }
.rp-root .ll-item:nth-child(4n+2) .ll-inline-img { background: linear-gradient(150deg, var(--mint), #f6fbfa); }
.rp-root .ll-item:nth-child(4n+3) .ll-inline-img { background: linear-gradient(150deg, var(--sage), #f8fbf3); }
.rp-root .ll-item:nth-child(4n) .ll-inline-img { background: linear-gradient(150deg, var(--sky), var(--mint)); }
.rp-root .ll-inline-img { box-shadow: inset 0 0 0 1px rgba(16, 20, 46, 0.05); }
.rp-root .ll-dots span.is-on { background: var(--rp-blue); }

/* Experts: soft sky→mint panel, tinted icon tiles */
.rp-root .ts-panel { box-shadow: inset 0 0 0 1px rgba(0, 102, 255, 0.06); }
.rp-root .ts-card { background: rgba(255, 255, 255, 0.85); }
.rp-root .ts-card .ts-tile { background: var(--ts-tile-bg, var(--sky)); color: var(--rp-blue); }
.rp-root .ts-card:nth-child(2) .ts-tile { background: var(--ts-tile-bg, var(--mint)); color: var(--mint-ink); }
.rp-root .ts-card:nth-child(3) .ts-tile { background: var(--ts-tile-bg, var(--sage)); color: var(--sage-ink); }

/* Reviews: quiet cards with the faintest tints, rotating sky / white / mint / sage */
.rp-root .rw { background: radial-gradient(45% 35% at 50% 0%, rgba(0, 102, 255, 0.06), transparent 70%), var(--rw-bg, var(--rp-paper)); }
.rp-root .rw-card { box-shadow: var(--sh-1); }
.rp-root .rw-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.rp-root .rw-card { transition: box-shadow .35s, transform .45s var(--rp-ease); }

/* FAQ: frosted panel */
.rp-root .cf-panel { background: var(--cf-panel, linear-gradient(160deg, #eef3ff, #f4f6fb 50%, #edf8f5)); box-shadow: inset 0 0 0 1px rgba(0, 102, 255, 0.06); }
.rp-root .cf-list button:hover { background: #f3f7ff; }
.rp-root .cf-avatar { background: linear-gradient(135deg, var(--sky), var(--mint)); }

/* Closing: light panel, ink text, ink + white buttons */
.rp-root .cp { box-shadow: inset 0 0 0 1px rgba(0, 102, 255, 0.08); }
.rp-root .cp-copy h2 em { color: var(--rp-blue); }
.rp-root .cp-live { opacity: var(--cp-live-o, 0.12); }
.rp-root .cp-actions .rp-btn--blue, .rp-root .cp-actions .rp-btn--light { background: var(--rp-ink); color: #fff; }
.rp-root .cp-actions .rp-btn--blue:hover, .rp-root .cp-actions .rp-btn--light:hover { background: #1d2346; }
.rp-root .cp-actions .rp-btn--ghost, .rp-root .cp-actions .rp-btn--line-light { background: rgba(255, 255, 255, 0.8); color: var(--rp-ink); box-shadow: inset 0 0 0 1px rgba(16, 20, 46, 0.1); }
.rp-root .cp-actions .rp-btn--ghost:hover, .rp-root .cp-actions .rp-btn--line-light:hover { background: #fff; }

/* Footer: faint top wash */
.rp-root .ft { background: linear-gradient(180deg, rgba(234, 241, 255, 0.55), transparent 240px), var(--ft-bg); }
.rp-root .ft-social a:hover, .rp-root .ft-ic:hover { background: var(--sky); color: var(--rp-blue); }

/* Buttons: ghost picks up a sky hover */
.rp-root .rp-btn--ghost:hover { background: #f5f8ff; }

/* ==========================================================================
   TYPE: Ramp-style grotesk (TWK Lausanne → Inter Tight). One family, tight
   tracking, medium-weight headings, accent words in colour (not italic).
   ========================================================================== */
.rp-root {
  --fs-h1: clamp(40px, 5.3cqw, 78px);
  --fs-h2: clamp(32px, 3.9cqw, 56px);
  --fs-h3: clamp(22px, 1.9cqw, 28px);
  letter-spacing: 0;
  font-feature-settings: 'ss01', 'cv11';
}
.rp-root :is(.hero-body, .rp-lede, .section-heading > p, .ss-head p, .ss-race-body, .ll-head p, .ts-head p, .rw-head p, .cp-copy p, .ll-body, .ss-copy-body, .ts-body) { letter-spacing: 0; }
.rp-root .rp-display { font-weight: 500; letter-spacing: -0.028em; line-height: 1.03; }
.rp-root .hero h1 { line-height: 1.02; letter-spacing: -0.032em; }
.rp-root .rp-display em, .rp-root .hero h1 em, .rp-root h1 .wi { font-style: normal; letter-spacing: inherit; }
.rp-root .ll-title, .rp-root .ss-copy-title { font-weight: 500; letter-spacing: -0.03em; }
.rp-root .ts-title { font-family: var(--rp-font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.025em; }
.rp-root .ss-card-label strong, .rp-root .cf-list-top span, .rp-root .cf-chat-top strong { font-weight: 500; letter-spacing: -0.03em; }
.rp-root .rw-card blockquote { font-family: var(--rp-font-body); font-size: 16px; line-height: 1.55; letter-spacing: -0.012em; font-weight: 400; }
@container rp (max-width: 991px) { .rp-root { --fs-h1: clamp(40px, 7cqw, 60px); --fs-h2: clamp(32px, 5.4cqw, 46px); } }
@container rp (max-width: 767px) { .rp-root { --fs-h1: clamp(36px, 10cqw, 46px); --fs-h2: clamp(30px, 8.4cqw, 38px); --fs-h3: 24px; } .rp-root .rw-card blockquote { font-size: 15px; } }

/* Webflow property overrides. A rule only switches on when its property is set (its flag is in
   data-c), so with every property at its default the design is exactly as built. */

/* Element families used below */
/* headings  : h1.rp-display, h2.rp-display                                  */
/* subheads  : h3, card titles                                               */
/* body      : intro paragraphs, card text, quotes, answers                  */
/* heads     : heading blocks (heading + intro)                              */
/* cards     : the boxed items of each section                               */
/* panels    : big rounded section panels                                    */
/* roots     : outer element of each section (padding lives here)            */

.rp-root[data-motion="off"] *, .rp-root[data-motion="off"] *::before, .rp-root[data-motion="off"] *::after { animation: none !important; transition: none !important; }

/* ---- Component layout switches (set by each component's Layout / General properties) ---- */
.rp-root.l-norail .ss-rail { display: none !important; }
.rp-root.l-nolabels .ss-card-label { display: none !important; }
.rp-root:not(:has(.ts-figure)) .ts-panel { grid-template-columns: 1fr; }
.rp-root.l-rw-nonum .rw-num, .rp-root.l-rw-nostars .rw-stars, .rp-root.l-rw-nologo .rw-logo { display: none; }
.rp-root.l-rw-nonum.l-rw-nostars .rw-top { display: none; }
.rp-root.l-cf-list-right .cf-list { order: 2; }
.rp-root.l-cf-nohelp .cf-help, .rp-root.l-cf-nocompose .cf-compose { display: none; }
.rp-root.l-cp-nodash .cp-live, .rp-root.l-cp-noorbs .cp-orb { display: none; }
@container rp (max-width: 991px) {
  .rp-root.l-rw-t1 .rw-grid { columns: 1 !important; }
}
@container rp (max-width: 767px) {
  .rp-root.l-rw-m-stack .rw-grid { display: grid !important; grid-template-columns: 1fr !important; overflow: visible; padding: 0 16px; gap: 14px; }
  .rp-root.l-rw-m-stack .rw-card { flex: none; width: auto; }
}

/* =========================================================================
   RP design system: one set of tokens for every v2 page (Home, Pricing, Features, Blog) + Navbar & Footer.

   Tokens (--ds-*) read site-wide overrides (--site-*) that RP Navbar writes on the page root; CSS variables pass
   into each component's shadow root, so one setting restyles every page. Per-section controls still win
   (they set their own variable, e.g. --pr-h2), and every section control's "0 / empty" now means "site default".

   The mapping below points the existing component classes at the tokens. It only normalises values that had
   drifted apart between pages (heading sizes, text sizes, buttons, icon tiles, card radius / shadow); layouts
   are untouched.
   ========================================================================= */
.rp-root {
  /* type */
  --ds-font-display: var(--site-font-display, 'TWK Lausanne', 'Inter Tight', 'Inter', 'Helvetica Neue', Arial, sans-serif);
  --ds-font-body: var(--site-font-body, 'TWK Lausanne', 'Inter Tight', 'Inter', 'Helvetica Neue', Arial, sans-serif);
  --ds-h-weight: var(--site-h-weight, 500);
  --ds-h1: var(--site-h1, clamp(44px, 5.4cqw, 78px));
  --ds-h2: var(--site-h2, clamp(34px, 4cqw, 56px));
  --ds-h3: var(--site-h3, clamp(21px, 2cqw, 28px));
  --ds-lead: var(--site-lead, 18.5px);
  --ds-body: var(--site-body, 16px);
  --ds-small: var(--site-small, 14px);
  --ds-eyebrow: var(--site-eyebrow, 12px);
  /* colour */
  --ds-primary: var(--site-primary, #0665f6);
  --ds-accent: var(--site-accent, #19c6c0);
  --ds-ink: var(--site-ink, #10142e);
  --ds-text: var(--site-text, #62677b);
  --ds-muted: var(--site-muted, #8b90a3);
  --ds-page: var(--site-page, #f7f8fc);
  --ds-grad-text: var(--site-grad-text, linear-gradient(100deg, var(--ds-primary) 0%, #2b6dff 28%, var(--ds-accent) 58%, var(--ds-primary) 100%));
  /* buttons */
  --ds-btn-h: var(--site-btn-h, 52px);
  --ds-btn-px: var(--site-btn-px, 24px);
  --ds-btn-r: var(--site-btn-r, 999px);
  --ds-btn-fs: var(--site-btn-fs, 15px);
  --ds-btn-bg: var(--site-btn-bg, #10142e);
  --ds-btn-text: var(--site-btn-text, #ffffff);
  --ds-btn2-bg: var(--site-btn2-bg, #ffffff);
  --ds-btn2-text: var(--site-btn2-text, #10142e);
  /* icons: one style everywhere: a brand-gradient tile with a white glyph */
  --ds-icon-bg: var(--site-icon-bg, linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-accent) 100%));
  --ds-icon-fg: var(--site-icon-fg, #ffffff);
  --ds-icon-r: var(--site-icon-r, 30%);
  --ds-icon-shadow: 0 10px 22px -12px color-mix(in srgb, var(--ds-primary) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28);
  /* surfaces */
  --ds-r-card: var(--site-r-card, 28px);
  --ds-r-panel: var(--site-r-panel, 40px);
  --ds-shadow-card: 0 0 0 1px rgba(16, 20, 46, .06), 0 1px 2px rgba(16, 20, 46, .04), 0 30px 60px -44px rgba(16, 30, 80, .42);
  --ds-shadow-card-h: 0 0 0 1px rgba(6, 101, 246, .16), 0 2px 6px rgba(16, 20, 46, .05), 0 44px 80px -46px rgba(16, 30, 80, .55);

  /* the existing palette follows the site colours */
  --rp-ink: var(--site-ink, #10142e);
  --rp-ink-soft: var(--site-text, #62677b);
  --rp-ink-faint: var(--site-muted, #8b90a3);
  --rp-blue: var(--site-primary, #0665f6);
  --rp-font-display: var(--ds-font-display);
  --rp-font-body: var(--ds-font-body);
}

/* ---------------------------------------------------------------- headings */
.rp-root.rp-root :is(.hv-h1, .f2-h-title, .bm--v2 h1.bm-title--v2) {
  font-family: var(--ds-font-display); font-weight: var(--ds-h-weight); letter-spacing: -.04em; line-height: 1.02;
  font-size: var(--hv-h1, var(--bm-h1, var(--ds-h1)));
}
.rp-root.rp-root :is(.hv-h2, .bs--v2 h2.bs-title) {
  font-family: var(--ds-font-display); font-weight: var(--ds-h-weight); letter-spacing: -.034em; line-height: 1.05;
  font-size: var(--pr-h2, var(--bs-h2, var(--ds-h2)));
}
/* headings inside the dark panels follow the same size */
.rp-root.rp-root :is(.hv-np, .hv-sd-panel, .hv-cta-panel) .hv-h2 { font-size: var(--pr-h2, var(--ds-h2)); }
.rp-root.rp-root :is(.hv-bc-tx h3, .p2-why-card .hv-bc-tx h3, .fc.fc--v2 .fc-title) {
  font-family: var(--ds-font-display); font-weight: var(--ds-h-weight); letter-spacing: -.022em; line-height: 1.15;
  font-size: var(--hv-card-t, var(--fc-title, var(--ds-h3)));
}
.rp-root.rp-root :is(.hv-grad, .hv-wi.hv-blue):not(:is(.hv-np, .hv-sd-panel, .hv-cta-panel, .hv-pn) *) { background-image: var(--ds-grad-text); }

/* ---------------------------------------------------------------- text */
.rp-root.rp-root :is(.hv-sub, .hv-lead, .f2-h-lead, .bm--v2 .bm-body, .bs--v2 .bs-body) {
  font-family: var(--ds-font-body); line-height: 1.6;
  font-size: var(--hv-sub, var(--hv-lead, var(--bm-body, var(--ds-lead))));
}
.rp-root.rp-root :is(.hv-bc-tx p:not(.hv-eyebrow), .fc.fc--v2 .fc-desc, .p2-why-card .hv-bc-tx p:not(.hv-eyebrow)) {
  font-family: var(--ds-font-body); line-height: 1.6;
  font-size: var(--p2-card-p, var(--fc-desc, var(--ds-body)));
}
.rp-root.rp-root :is(.hv-head > .hv-eyebrow, .hv-pill, .bm-eyebrow, .bs-eyebrow) { font-size: var(--ds-eyebrow); letter-spacing: .14em; }

/* ---------------------------------------------------------------- buttons */
.rp-root.rp-root .hv-btn:not(.hv-btn--sm) { min-height: var(--ds-btn-h); font-size: var(--ds-btn-fs); border-radius: var(--ds-btn-r); padding-left: var(--ds-btn-px); }
.rp-root.rp-root .hv-btn:not(.hv-btn--sm):not(.hv-btn--arrow) { padding-right: var(--ds-btn-px); }
.rp-root.rp-root .hv-btn--arrow { padding-right: 7px; }
.rp-root.rp-root .hv-btn--arrow svg { width: calc(var(--ds-btn-h) - 14px); height: calc(var(--ds-btn-h) - 14px); }
.rp-root.rp-root .hv-btn--dark { background: var(--ds-btn-bg); color: var(--ds-btn-text); }
.rp-root.rp-root .hv-btn--arrow svg { stroke: var(--ds-btn-bg); }
.rp-root.rp-root .hv-btn--ghost { background: var(--ds-btn2-bg); color: var(--ds-btn2-text); }
.rp-root.rp-root .hv-btn--sm { border-radius: var(--ds-btn-r); }
/* pricing plan buttons and blog "Load more" share the same shape */
.rp-root.rp-root .p2-cta { border-radius: var(--ds-btn-r); padding-left: 20px; min-height: calc(var(--ds-btn-h) + 4px); }
.rp-root.rp-root .p2-cta-go svg { border-radius: 50%; }
.rp-root.rp-root .p2-th-link { border-radius: var(--ds-btn-r); }
.rp-root.rp-root .rp-blog-btn { border-radius: var(--ds-btn-r); min-height: calc(var(--ds-btn-h) - 4px); font-size: var(--ds-btn-fs); }

/* ---------------------------------------------------------------- icon tiles (one style) */
.rp-root.rp-root :is(.hv-mini-ic, .hv-float-ic, .hv-cc-ic, .hv-sd-ic, .p2-trust-ic, .f2-pal-ic, .fc.fc--v2 .fc-icon, .p2-msg-ava) {
  background: var(--ds-icon-bg); color: var(--ds-icon-fg); border-radius: var(--ds-icon-r); box-shadow: var(--ds-icon-shadow);
}
.rp-root.rp-root :is(.hv-mini-ic, .hv-float-ic, .hv-cc-ic, .hv-sd-ic, .p2-trust-ic, .f2-pal-ic) svg { stroke: var(--ds-icon-fg); }
.rp-root.rp-root .p2-trust-ic--2 svg { fill: var(--ds-icon-fg); stroke: none; }
.rp-root.rp-root .f2-pal-ic img { filter: none; opacity: 1; }
.rp-root.rp-root .f2-pal-ic b { color: var(--ds-icon-fg); }
.rp-root.rp-root .fc.fc--v2 .fc-icon img { filter: none; }
/* small round ticks (lists, tables) use the same gradient */
.rp-root.rp-root :is(.p2-tick, .p2-yes, .hv-sk-ok, .hv-tick) { background: var(--ds-icon-bg); }
/* card-deck icons (Features hero) */
.rp-root.rp-root .f2-rc-dot { background: var(--ds-icon-bg); box-shadow: var(--ds-icon-shadow); }

/* ---------------------------------------------------------------- cards and panels */
.rp-root.rp-root :is(.p2-card, .fc.fc--v2, .bc.bc--v2:not(.bc--timeline):not(.bc--ranked), .p2-why-card, .f2-pal) { border-radius: var(--p2-r, var(--fc-r, var(--ds-r-card))); }
.rp-root.rp-root :is(.p2-cmp-card) { border-radius: var(--p2-cmp-r, var(--ds-r-card)); }
.rp-root.rp-root :is(.hv-np, .hv-sd-panel, .hv-cta-panel) { border-radius: var(--hv-sd-r, var(--ds-r-panel)); }