/* PVR redesign, comparison pages (9 languages). 
   The pages keep their own section design; this maps their variables to the redesign palette and font. */
:root {
  --pink: #6d4fd8; --pink-light: #b29df7; --purple: #6d4fd8;
  --gradient: linear-gradient(90deg, #6d4fd8 0%, #8f78ea 100%);
  --fg: #ecebf2; --fg-soft: #cbc9d6; --fg-muted: #a3a0b1;
  --border: rgba(236, 235, 242, 0.1); --radius-card: 20px;
}
body.cmp-page { font-family: var(--font); background: var(--bg); }
.cmp-page h1, .cmp-page h2, .cmp-page h3 { font-family: var(--font); letter-spacing: -0.03em; }
.cmp-page .jump-bar { top: var(--nav-h) !important; }
.cmp-page main, .cmp-page section { scroll-margin-top: calc(var(--nav-h) + 56px); }
/* align the page containers with the nav and footer (same max width and gutters) */
.cmp-page .container { max-width: 1240px; padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px); }
/* sticky spec-table header: stick under the nav, not behind it */
.cmp-page .sc-header { top: var(--nav-h) !important; }
/* gradient words: every .grad* variant is clipped to the text (grad-soft was a filled box, also on the live site) */
.cmp-page :is(.grad, .grad-soft, .grad-blue, .grad-warm) { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cmp-page .grad-soft { background-image: linear-gradient(90deg, #6d4fd8 0%, #b29df7 100%); }
/* buy buttons in cards: one line (the crossed-out price made "Buy Solace Pro — $399 $199" wrap on 4 lines) */
.cmp-page :is(.pick-card__cta, .cta-card, .hero-card) .btn { white-space: nowrap; }
.cmp-page .sc-buy-row__cell .btn { font-size: 12.5px; padding-left: 10px; padding-right: 10px; line-height: 1.25; }
.cmp-page .pick-card__cta .btn { font-size: 14px; padding-left: 18px; padding-right: 18px; }
/* long row labels (German compounds) break instead of running into the values */
.cmp-page .sc-row__label { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; min-width: 0; }