/* =========================================================================
   Report details v2 (Reports CMS template): hero + data field / benefit items.
   Same tokens as every v2 page (--ds-*): site fonts, one accent, soft card shadow, site icon tiles.
   ========================================================================= */
.rp-root:has(.rph, .rpi) { background: transparent; }
.rp-root:has(.rpi) { height: 100%; }

/* ---------------------------------------------------------------- hero */
.rp-root .rph { position: relative; isolation: isolate; padding: var(--pr-top, 168px) var(--pr-side, 32px) var(--pr-bottom, 96px); overflow: clip; font-family: var(--ds-font-body); }
.rp-root .rph-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 60% at 72% 10%, color-mix(in srgb, var(--ds-primary) 10%, transparent), transparent 70%),
    radial-gradient(30% 46% at 94% 52%, color-mix(in srgb, var(--ds-accent) 8%, transparent), transparent 70%); }
.rp-root .rph-in { width: min(var(--pr-w, 1240px), 100%); margin-inline: auto; display: grid; gap: 64px; align-items: center; }
.rp-root .rph--split .rph-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
.rp-root .rph:not(.rph--split) .rph-text { max-width: 820px; margin-inline: auto; justify-items: center; text-align: center; }
.rp-root .rph-text { display: grid; justify-items: start; gap: 22px; }
.rp-root .rph-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font: 500 13.5px/1.2 var(--ds-font-body); color: var(--ds-muted); }
.rp-root .rph-crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.rp-root .rph-crumbs li + li::before { content: ''; width: 5px; height: 5px; margin: 0 6px 0 2px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.rp-root .rph-crumbs a { color: var(--ds-text); text-decoration: none; padding: 4px 2px; transition: color .2s; }
.rp-root .rph-crumbs a:hover { color: var(--ds-primary); }
.rp-root .rph-crumbs [aria-current] span { display: block; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-root .rph-cat { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 5px; border-radius: 999px; background: rgba(255, 255, 255, .88); text-decoration: none;
  font: 600 13px/1 var(--ds-font-body); color: var(--ds-ink); box-shadow: 0 0 0 1px rgba(16, 20, 46, .07), 0 10px 24px -18px rgba(16, 30, 80, .4); transition: box-shadow .25s; }
.rp-root .rph-cat:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ds-primary) 28%, transparent), 0 14px 26px -18px rgba(16, 30, 80, .5); }
.rp-root .rph-cat-ic { display: grid; place-items: center; width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: var(--ds-icon-r); background: var(--ds-icon-bg); color: var(--ds-icon-fg); box-shadow: var(--ds-icon-shadow); }
.rp-root .rph-cat-ic .rr-svg { width: 16px; height: 16px; stroke-width: 1.9; }
.rp-root .rph-title { margin: 0; font: var(--ds-h-weight) var(--rph-h1, calc(var(--ds-h1) * .8))/1.04 var(--ds-font-display); letter-spacing: -.038em; color: var(--ds-ink); text-wrap: balance; max-width: var(--rph-h1-w, 18ch); }
.rp-root .rph-sum { margin: 0; max-width: 54ch; font: 400 var(--rph-sum, var(--ds-lead))/1.6 var(--ds-font-body); color: var(--ds-text); text-wrap: pretty; }
.rp-root .rph-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.rp-root .rph:not(.rph--split) .rph-ctas { justify-content: center; }
.rp-root .rph-store { display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 7px 0 8px; border-radius: 999px; background: var(--ds-btn-bg); color: #fff; text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 20, 46, .2), inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .35s var(--rp-ease), box-shadow .35s; }
.rp-root .rph-store:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -18px rgba(16, 20, 46, .65); }
.rp-root .rph-store-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.rp-root .rph-store-ic svg { width: 21px; height: 21px; fill: #95bf47; }
.rp-root .rph-store-t { display: grid; gap: 3px; padding-right: 6px; }
.rp-root .rph-store-t small { font: 600 9.5px/1 var(--ds-font-body); letter-spacing: .12em; text-transform: uppercase; opacity: .62; }
.rp-root .rph-store-t b { font: 600 15.5px/1.1 var(--ds-font-body); letter-spacing: -.01em; white-space: nowrap; }
.rp-root .rph-store-go { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; }
.rp-root .rph-store-go svg { width: 18px; height: 18px; fill: none; stroke: var(--ds-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--rp-ease); }
.rp-root .rph-store:hover .rph-store-go svg { transform: translateX(3px); }
.rp-root .rph .hv-btn--ghost { min-height: 58px; }
.rp-root .rph-proof { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 0; font: 500 13.5px/1.2 var(--ds-font-body); color: var(--ds-text); }
.rp-root .rph-proof i { font-style: normal; letter-spacing: .06em; color: #f5b300; font-size: 13px; }
/* entry */
.rp-root .rph :is(.rph-crumbs, .rph-cat, .rph-title, .rph-sum, .rph-ctas, .rph-proof, .rph-vis) { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .8s ease, transform 1s var(--rp-ease); }
.rp-root .rph.is-in :is(.rph-crumbs, .rph-cat, .rph-title, .rph-sum, .rph-ctas, .rph-proof, .rph-vis) { opacity: 1; transform: none; }
.rp-root .rph.is-in .rph-cat { transition-delay: .04s; } .rp-root .rph.is-in .rph-title { transition-delay: .08s; } .rp-root .rph.is-in .rph-sum { transition-delay: .16s; }
.rp-root .rph.is-in .rph-ctas { transition-delay: .24s; } .rp-root .rph.is-in .rph-proof { transition-delay: .3s; } .rp-root .rph.is-in .rph-vis { transition-delay: .2s; }

/* visual: the report in a glass frame + floating chips */
.rp-root .rph-vis { --tx: 0; --ty: 0; position: relative; perspective: 1400px; }
.rp-root .rph-stage { position: relative; padding: 26px 22px 34px; transform: rotateY(calc(var(--tx) * 8deg)) rotateX(calc(var(--ty) * -6deg)); transform-style: preserve-3d; transition: transform .8s var(--rp-ease); }
.rp-root .rph-stage::before { content: ''; position: absolute; inset: 16% 10% 6%; z-index: -1; border-radius: 40px; background: linear-gradient(120deg, color-mix(in srgb, var(--ds-primary) 32%, transparent), color-mix(in srgb, var(--ds-accent) 28%, transparent)); filter: blur(56px); opacity: .55; }
.rp-root .rph-frame { position: relative; padding: 10px; border-radius: var(--ds-r-card); overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), color-mix(in srgb, var(--ds-primary) 6%, #fff) 60%, color-mix(in srgb, var(--ds-accent) 9%, #fff));
  box-shadow: 0 0 0 1px rgba(16, 20, 46, .06), 0 2px 6px rgba(16, 20, 46, .04), 0 50px 90px -56px rgba(16, 30, 80, .55); }
.rp-root .rph-frame img { display: block; width: 100%; height: auto; aspect-ratio: var(--rph-ratio, 16 / 10); object-fit: cover; object-position: top left; border-radius: calc(var(--ds-r-card) - 10px); background: #f2f4f8; }
.rp-root .rph-gloss { position: absolute; inset: 10px; border-radius: calc(var(--ds-r-card) - 10px); pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .26), transparent 60%); }
.rp-root .rph-vis:hover .rph-gloss { opacity: 1; }
.rp-root .rph-chip { position: absolute; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border-radius: 14px; background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 13px/1 var(--ds-font-body); color: var(--ds-ink); white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(16, 20, 46, .07), 0 24px 44px -26px rgba(16, 30, 80, .5);
  opacity: 0; transition: opacity .6s ease, transform .9s var(--rp-ease); }
.rp-root .rph-chip-ic { display: grid; place-items: center; width: 26px; height: 26px; padding: 5px; box-sizing: border-box; border-radius: var(--ds-icon-r); background: var(--ds-icon-bg); color: var(--ds-icon-fg); }
.rp-root .rph-chip-ic .rr-svg { width: 16px; height: 16px; stroke-width: 2; }
.rp-root .rph-chip--0 { left: -6px; top: 18%; transform: translate3d(calc(var(--tx) * -14px), calc(14px + var(--ty) * -10px), 40px); }
.rp-root .rph-chip--1 { right: -4px; top: 6%; transform: translate3d(calc(var(--tx) * -22px), calc(14px + var(--ty) * -14px), 60px); }
.rp-root .rph-chip--2 { right: 10%; bottom: 8px; transform: translate3d(calc(var(--tx) * -18px), calc(14px + var(--ty) * -12px), 50px); }
.rp-root .rph.is-in .rph-chip { opacity: 1; }
.rp-root .rph.is-in .rph-chip--0 { transition-delay: .7s; transform: translate3d(calc(var(--tx) * -14px), calc(var(--ty) * -10px), 40px); }
.rp-root .rph.is-in .rph-chip--1 { transition-delay: .85s; transform: translate3d(calc(var(--tx) * -22px), calc(var(--ty) * -14px), 60px); }
.rp-root .rph.is-in .rph-chip--2 { transition-delay: 1s; transform: translate3d(calc(var(--tx) * -18px), calc(var(--ty) * -12px), 50px); }
.rp-root .rph.is-still * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .rp-root .rph * { transition: none !important; } }
@container rp (max-width: 991px) {
  .rp-root .rph--split .rph-in { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .rp-root .rph-vis { max-width: 640px; width: 100%; margin-inline: auto; }
}
@container rp (max-width: 767px) {
  .rp-root .rph { padding-top: var(--pr-top, 128px); padding-bottom: var(--pr-bottom, 64px); }
  .rp-root .rph-crumbs [aria-current] { display: none; }
  .rp-root .rph-stage { padding: 18px 8px 26px; }
  .rp-root .rph-chip { font-size: 12px; padding: 6px 11px 6px 6px; }
  .rp-root .rph-chip--2 { display: none; }
  .rp-root .rph-text { width: 100%; gap: 18px; }
  .rp-root .rph-title { font-size: var(--rph-h1, clamp(32px, 8.4cqw, 44px)); }
  .rp-root .rph .hv-btn--ghost { min-height: 56px; }
}

/* ---------------------------------------------------------------- data field / benefit items */
.rp-root .rpi { box-sizing: border-box; height: 100%; font-family: var(--ds-font-body); background: #fff; transition: box-shadow .3s, transform .4s var(--rp-ease); }
.rp-root .rpi--field { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(16, 20, 46, .07), 0 1px 2px rgba(16, 20, 46, .03); outline: none; }
.rp-root .rpi--field:is(:hover, :focus-visible) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ds-primary) 26%, transparent), 0 24px 44px -34px rgba(16, 30, 80, .45); transform: translateY(-2px); }
.rp-root .rpi-dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--ds-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-primary) 12%, transparent); }
.rp-root .rpi-fb { display: grid; gap: 4px; min-width: 0; }
.rp-root .rpi--field .rpi-t { font: 600 15px/1.35 var(--ds-font-body); color: var(--ds-ink); }
.rp-root .rpi--field .rpi-d { font: 400 13.5px/1.5 var(--ds-font-body); color: var(--ds-text); }
.rp-root .rpi--benefit { display: grid; align-content: start; gap: 12px; padding: 26px 24px; border-radius: var(--ds-r-card);
  box-shadow: 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); }
.rp-root .rpi--benefit:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ds-primary) 18%, transparent), 0 2px 6px rgba(16, 20, 46, .05), 0 44px 80px -46px rgba(16, 30, 80, .55); }
.rp-root .rpi-ic { display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; box-sizing: border-box; border-radius: var(--ds-icon-r); background: var(--ds-icon-bg); color: var(--ds-icon-fg); box-shadow: var(--ds-icon-shadow); }
.rp-root .rpi-ic .rr-svg { width: 22px; height: 22px; stroke-width: 1.8; }
.rp-root .rpi--benefit .rpi-t { margin-top: 4px; font: var(--ds-h-weight) 20px/1.25 var(--ds-font-display); letter-spacing: -.018em; color: var(--ds-ink); }
.rp-root .rpi--benefit .rpi-d { margin: 0; font: 400 15px/1.6 var(--ds-font-body); color: var(--ds-text); }
@container rp (max-width: 767px) { .rp-root .rph-chip--0 { left: 4px; top: auto; bottom: 4px; } .rp-root .rph-chip--1 { right: 4px; top: 0; } }
.rp-root .rph-store-t { text-align: left; }

/* v73: optional date line (Guides template) */
.rp-root .rph-date { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 0; font: 500 14px/1.2 var(--ds-font-body); color: var(--ds-text); opacity: .9; }
.rp-root .rph-date svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.rp-root .rph-date span { color: var(--ds-text); }
.rp-root .rph :is(.rph-date) { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .8s ease, transform 1s var(--rp-ease); }
.rp-root .rph.is-in .rph-date { opacity: .9; transform: none; transition-delay: .2s; }
.rp-root .rph.is-still .rph-date { transition: none; }

/* =========================================================================
   Compare v2 (Competitors template + Shopify vs Report Pundit): hero "VS" scorecard, sections, more-comparison cards.
   Same tokens as every v2 page (--ds-*).
   ========================================================================= */
.rp-root .vs { position: relative; padding: 18px 8px 26px; }
.rp-root .vs-glow { position: absolute; inset: 14% 8% 4%; z-index: 0; border-radius: 40px; pointer-events: none;
  background: linear-gradient(120deg, color-mix(in srgb, var(--ds-primary) 30%, transparent), color-mix(in srgb, var(--ds-accent) 26%, transparent)); filter: blur(60px); opacity: .5; }
.rp-root .vs-card { position: relative; z-index: 1; padding: 26px 26px 18px; border-radius: var(--ds-r-card, 28px); background: rgba(255, 255, 255, .94);
  box-shadow: 0 0 0 1px rgba(16, 20, 46, .06), 0 2px 6px rgba(16, 20, 46, .04), 0 50px 90px -56px rgba(16, 30, 80, .55); font-family: var(--ds-font-body); }
.rp-root .vs-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid #eef1f6; }
.rp-root .vs-side { display: grid; justify-items: center; gap: 10px; text-align: center; min-width: 0; }
.rp-root .vs-side b { font: 600 16px/1.2 var(--ds-font-display); letter-spacing: -.01em; color: var(--ds-ink); }
.rp-root .vs-side.is-us b { background: linear-gradient(100deg, var(--ds-primary, #0665f6), #19c6c0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rp-root .vs-mk { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 20, 46, .07), 0 16px 30px -20px rgba(16, 30, 80, .5); }
.rp-root .vs-side.is-us .vs-mk { background: linear-gradient(160deg, #f1f6ff, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ds-primary) 22%, transparent), 0 18px 34px -20px color-mix(in srgb, var(--ds-primary) 70%, transparent); }
.rp-root .vs-them { display: contents; }
.rp-root .vs-mk .cmp-ini { display: grid; place-items: center; border-radius: 12px; background: #eef1f6; color: var(--ds-ink); font: 700 15px/1 var(--ds-font-body); }
.rp-root .vs-mk svg, .rp-root .vs-mk img, .rp-root .vs-logo { display: block; width: 44px; height: 44px; object-fit: contain; border-radius: 10px; }
.rp-root .vs-ini { display: grid; place-items: center; border-radius: 12px; background: #eef1f6; color: var(--ds-ink); font: 700 15px/1 var(--ds-font-body); }
.rp-root .vs-coin { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ds-ink, #10142e); color: #fff; font: 800 13px/1 var(--ds-font-display); letter-spacing: .06em;
  box-shadow: 0 0 0 6px #fff, 0 12px 24px -10px rgba(16, 20, 46, .55); }
.rp-root .vs-rows { display: grid; margin: 0; padding: 4px 0 0; }
.rp-root .vs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid #f1f3f8; }
.rp-root .vs-row:last-child { border-bottom: 0; }
.rp-root .vs-row dt { grid-column: 1 / -1; text-align: center; font: 600 11px/1.2 var(--ds-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ds-muted, #8b90a3); }
.rp-root .vs-row dd { margin: 0; text-align: center; font: 500 14.5px/1.35 var(--ds-font-body); color: var(--ds-text); }
.rp-root .vs-row dd.is-us { font-weight: 650; color: var(--ds-ink); }
.rp-root .vs-foot { margin: 6px 0 0; text-align: center; font: 500 12.5px/1.4 var(--ds-font-body); color: var(--ds-muted, #8b90a3); }
/* entry: the two sides slide in, the coin pops, the rows follow (once) */
.rp-root .vs:not(.is-still) .vs-side { animation: vs-in .9s var(--rp-ease, cubic-bezier(.16,1,.3,1)) .25s both; }
.rp-root .vs:not(.is-still) .vs-side:last-child { animation-name: vs-in-r; }
.rp-root .vs:not(.is-still) .vs-coin { animation: vs-pop .7s var(--rp-ease, cubic-bezier(.16,1,.3,1)) .5s both; }
.rp-root .vs:not(.is-still) .vs-row { animation: vs-up .7s var(--rp-ease, cubic-bezier(.16,1,.3,1)) calc(.6s + var(--i, 0) * .08s) both; }
@keyframes vs-in { from { opacity: 0; transform: translateX(-14px); } }
@keyframes vs-in-r { from { opacity: 0; transform: translateX(14px); } }
@keyframes vs-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes vs-up { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .rp-root .vs * { animation: none !important; } }
.rp-root .rph--compare .rph-vis { max-width: 520px; width: 100%; justify-self: center; }
.rp-root .rph--compare .rph-banner { display: block; width: 100%; height: auto; border-radius: var(--ds-r-card, 28px); box-shadow: 0 0 0 1px rgba(16, 20, 46, .06), 0 50px 90px -56px rgba(16, 30, 80, .55); }
@container rp (max-width: 478px) {
  .rp-root .vs-card { padding: 20px 16px 12px; }
  .rp-root .vs-mk { width: 60px; height: 60px; border-radius: 18px; }
  .rp-root .vs-them { display: contents; }
.rp-root .vs-mk .cmp-ini { display: grid; place-items: center; border-radius: 12px; background: #eef1f6; color: var(--ds-ink); font: 700 15px/1 var(--ds-font-body); }
.rp-root .vs-mk svg, .rp-root .vs-mk img, .rp-root .vs-logo { width: 36px; height: 36px; }
  .rp-root .vs-side b { font-size: 14px; }
  .rp-root .vs-row dd { font-size: 13.5px; }
}

/* ---------------------------------------------------------------- more comparisons card */
.rp-root:has(> .cc), .rp-root:has(.cc) { background: transparent; height: 100%; }
.rp-root .cc { display: flex; flex-direction: column; gap: 14px; height: 100%; box-sizing: border-box; padding: 24px; border-radius: var(--ds-r-card, 24px); background: #fff; text-decoration: none; color: inherit; font-family: var(--ds-font-body);
  box-shadow: 0 0 0 1px rgba(16, 20, 46, .07), 0 24px 50px -40px rgba(16, 30, 80, .45); transition: transform .45s var(--rp-ease, ease), box-shadow .45s; }
.rp-root .cc:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ds-primary) 22%, transparent), 0 30px 60px -38px rgba(16, 30, 80, .55); }
.rp-root .cc-pair { display: flex; align-items: center; gap: 8px; }
.rp-root .cc-mk { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 20, 46, .08); }
.rp-root .cc-mk.is-us { background: linear-gradient(160deg, #f1f6ff, #fff); }
.rp-root .cc-mk svg, .rp-root .cc-mk img { display: block; width: 28px; height: 28px; object-fit: contain; border-radius: 7px; }
.rp-root .cc-mk .cmp-ini { display: grid; place-items: center; border-radius: 8px; background: #eef1f6; font: 700 11px/1 var(--ds-font-body); color: var(--ds-ink); }
.rp-root .cc-vs { font: 800 11px/1 var(--ds-font-display); letter-spacing: .08em; color: var(--ds-muted, #8b90a3); }
.rp-root .cc-t { font: 600 19px/1.25 var(--ds-font-display); letter-spacing: -.015em; color: var(--ds-ink); }
.rp-root .cc-s { font: 400 14.5px/1.55 var(--ds-font-body); color: var(--ds-text); flex: 1; }
.rp-root .cc-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font: 600 14px/1 var(--ds-font-body); color: var(--ds-primary); }
.rp-root .cc-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--rp-ease, ease); }
.rp-root .cc:hover .cc-go svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- hero illustration: split versus panel */
.rp-root .vx { --tx: 0; --ty: 0; --tone: var(--ds-primary, #0665f6); --tone-soft: #e3edff; position: relative; width: 100%; max-width: 540px; margin-left: auto; padding: 24px 4px 34px; font-size: 16px; font-family: var(--ds-font-body);
  transform: perspective(1200px) rotateX(calc(var(--ty) * -5deg)) rotateY(calc(var(--tx) * 6deg)); transition: transform .8s var(--rp-ease, ease); }
.rp-root .vx-glow { position: absolute; inset: -6% -8% -4%; z-index: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(6, 101, 246, .1), transparent); }
.rp-root .vx-stack { position: relative; z-index: 1; }
/* card (same look as the All Features hero card): tinted glass, coloured edge underneath */
.rp-root .vx-card { box-sizing: border-box; border-radius: 1.6em;
  background: linear-gradient(155deg, rgba(255, 255, 255, .98) 30%, var(--tone-soft) 120%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px color-mix(in srgb, var(--tone) 16%, rgba(16, 20, 46, .05)),
    0 .42em 0 -.02em color-mix(in srgb, var(--tone) 34%, #fff), 0 .44em 0 0 color-mix(in srgb, var(--tone) 18%, transparent),
    0 1.9em 2.8em -1.6em rgba(16, 30, 80, .42); }
/* front card */
.rp-root .vx-card { position: relative; padding: 1.05em 1.1em 1.15em; background: linear-gradient(155deg, #fff 45%, color-mix(in srgb, var(--tone-soft) 70%, #fff) 120%); }
.rp-root .vx-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(70% 55% at 100% 0%, color-mix(in srgb, var(--tone) 12%, transparent), transparent 70%); }
.rp-root .vx-hd { position: relative; display: flex; align-items: center; gap: .6em; min-height: 1.6em; margin: 0 .15em .9em; }
.rp-root .vx-hd svg { width: 1.5em; height: 1.5em; flex: none; border-radius: .4em; }
.rp-root .vx-hd b { flex: 1; min-width: 0; font: 600 .9em/1.2 var(--ds-font-body); letter-spacing: -.01em; color: var(--ds-ink, #10142e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-root .vx-chip { flex: none; display: inline-flex; align-items: center; gap: .4em; padding: .38em .7em; border-radius: 999px; font: 600 .68em/1 var(--ds-font-body); letter-spacing: .06em;
  color: color-mix(in srgb, var(--tone) 75%, #10142e); background: color-mix(in srgb, var(--tone) 9%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 20%, transparent); }
.rp-root .vx-chip i { width: .5em; height: .5em; border-radius: 50%; background: var(--tone); }
.rp-root .vx-panel { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: 1.05em; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px rgba(16, 20, 46, .06); }
.rp-root .vx-half { position: absolute; top: 0; bottom: 0; display: grid; place-content: center; justify-items: center; gap: 16px; isolation: isolate; }
.rp-root .vx-half.is-them { left: 0; right: 0; padding-left: 50%; }
.rp-root .vx-half.is-us { left: 0; width: 60%; padding-right: 10%; clip-path: polygon(0 0, 100% 0, 66.67% 100%, 0 100%); z-index: 1; }
.rp-root .vx-half.is-us { background: radial-gradient(120% 90% at 20% 0%, #2f86ff 0%, transparent 60%), linear-gradient(150deg, #0a5ff0 0%, #0665f6 40%, #10a7c8 85%, #19c6c0 100%); }
.rp-root .vx-half.is-them { background: linear-gradient(160deg, #ffffff 0%, #f4f6fa 100%); }
.rp-root .vx-dots { position: absolute; inset: 0; z-index: -1; opacity: .22; background-image: radial-gradient(rgba(255, 255, 255, .9) 1.2px, transparent 1.3px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(80% 70% at 30% 30%, #000, transparent 75%); mask-image: radial-gradient(80% 70% at 30% 30%, #000, transparent 75%); }
.rp-root .vx-lines { position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: repeating-linear-gradient(135deg, rgba(16, 20, 46, .05) 0 1px, transparent 1px 14px);
  -webkit-mask-image: radial-gradient(80% 70% at 70% 70%, #000, transparent 75%); mask-image: radial-gradient(80% 70% at 70% 70%, #000, transparent 75%); }
.rp-root .vx-mk { display: grid; place-items: center; width: clamp(76px, 11vw, 124px); aspect-ratio: 1; border-radius: 30%; }
.rp-root .vx-half.is-us .vx-mk { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 24px 40px -22px rgba(0, 20, 80, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rp-root .vx-half.is-us .vx-mk svg { width: 62%; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 30, 90, .35)); }
.rp-root .vx-half.is-them .vx-mk { background: #fff; box-shadow: 0 0 0 1px rgba(16, 20, 46, .07), 0 24px 40px -24px rgba(16, 30, 80, .45); }
.rp-root .vx-half.is-them .vx-mk :is(svg, img, .cmp-ini) { width: calc(60% * var(--vx-s, 1)) !important; height: calc(60% * var(--vx-s, 1)) !important; max-width: 92%; max-height: 92%; object-fit: contain; border-radius: 14%; }
.rp-root .vx-half.is-them .vx-mk .cmp-ini { display: grid; place-items: center; background: #eef1f6; color: var(--ds-ink); font: 700 28px/1 var(--ds-font-display); }
.rp-root .vx-name { font: 600 clamp(14px, 1.3vw, 17px)/1.2 var(--ds-font-display); letter-spacing: -.015em; text-align: center; }
.rp-root .vx-half.is-us .vx-name { color: #fff; }
.rp-root .vx-half.is-them .vx-name { color: var(--ds-ink); }
/* diagonal seam + badge */
.rp-root .vx-seam { position: absolute; z-index: 2; left: 50%; top: -10%; bottom: -10%; width: 0; transform: rotate(13.5deg); pointer-events: none; }
.rp-root .vx-seam::before { content: ''; position: absolute; inset: 0 -1.5px; background: linear-gradient(transparent, rgba(255, 255, 255, .95) 20%, rgba(255, 255, 255, .95) 80%, transparent); }
.rp-root .vx-badge { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: var(--ds-ink, #10142e); color: #fff; font: 800 17px/1 var(--ds-font-display); letter-spacing: .03em;
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px rgba(16, 20, 46, .06), 0 18px 36px -12px rgba(16, 20, 46, .55); }
/* entry (once) */
.rp-root .vx:not(.is-still) .vx-half.is-us .vx-mk, .rp-root .vx:not(.is-still) .vx-half.is-us .vx-name { animation: va-l .95s var(--rp-ease, cubic-bezier(.16,1,.3,1)) .25s both; }
.rp-root .vx:not(.is-still) .vx-half.is-them .vx-mk, .rp-root .vx:not(.is-still) .vx-half.is-them .vx-name { animation: va-r .95s var(--rp-ease, cubic-bezier(.16,1,.3,1)) .35s both; }
.rp-root .vx:not(.is-still) .vx-badge { animation: vs-pop .7s var(--rp-ease, cubic-bezier(.16,1,.3,1)) .7s both; }
@keyframes va-l { from { opacity: 0; translate: -22px 0; } }
@keyframes va-r { from { opacity: 0; translate: 22px 0; } }
/* entry: the card rises once */
.rp-root .vx:not(.is-still) .vx-card { animation: vs-up .8s var(--rp-ease, cubic-bezier(.16,1,.3,1)) .1s both; }
@media (prefers-reduced-motion: reduce) { .rp-root .vx * { animation: none !important; } .rp-root .vx { transform: none; } }
@container rp (max-width: 991px) { .rp-root .rph--compare .rph-vis { max-width: 460px; } }
@container rp (max-width: 991px) { .rp-root .vx { margin-inline: auto; } }
@container rp (max-width: 478px) {
  .rp-root .vx { font-size: 14px; padding-top: 12px; }
  .rp-root .vx-badge { width: 48px; height: 48px; margin: -24px 0 0 -24px; font-size: 13px; box-shadow: 0 0 0 4px #fff, 0 14px 28px -12px rgba(16, 20, 46, .55); }
  .rp-root .vx-half { gap: 14px; }
}