/* --------------------------------------------------------------- Pricing-page bundle picker Brand-aligned to the existing site: Poppins (display) + Mulish (body), navy + gold on white, restrained ornament. Scope is namespaced under `.rp` so this can sit inside any page wrapper without leaking styles. --------------------------------------------------------------- */ /* ── RESET ────────────────────────────────────────────────────── Hard-reset every descendant of `.rp` so host-page CSS (the theme, Elementor, the page builder, the parent template, etc.) can't leak in. Wrapped in `:where()` so the reset has zero specificity, letting my own rules below take precedence without specificity battles. `all: revert` peels each property back to its user-agent default; the explicit margin/padding/list-style/decoration overrides below re-establish a known baseline. */ /* SVGs are EXCLUDED from `all: revert`. Their presentational attributes (fill="none", stroke="currentColor", width="30", stroke-width="1.5", stroke-linecap="round", etc.) sit at lower priority than any author CSS, so reverting properties on the SVG// elements would override the attributes and break the stroke-only icons (black blobs or invisible open paths). The `:not(svg):not(svg *)` carve-out leaves every SVG and its descendants untouched by the reset. */ :where(.rp, .rp *:not(svg):not(svg *), .rp *::before, .rp *::after) { all: revert; box-sizing: border-box; } :where(.rp svg, .rp svg *) { box-sizing: border-box; } :where(.rp svg) { display: block; max-width: 100%; } :where(.rp) { margin: 0; padding: 0; } :where(.rp h1, .rp h2, .rp h3, .rp h4, .rp h5, .rp h6, .rp p, .rp ul, .rp ol, .rp li, .rp blockquote, .rp figure) { margin: 0; padding: 0; font: inherit; color: inherit; } :where(.rp ul, .rp ol) { list-style: none; } :where(.rp a) { text-decoration: none; color: inherit; background: transparent; } :where(.rp button) { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; text-align: inherit; } :where(.rp img) { display: block; max-width: 100%; } /* ── PICKER ───────────────────────────────────────────────────── Brand-aligned styles. Poppins (display) + Mulish (body). Variables live on `.rp`, `.rp-bar`, and `.rp-modal` because the JS re-parents the sticky bar and modal to on init so they can escape parent stacking/containing contexts (Elementor + isolation). Once detached, var() refs to --rp-* would fall back to undefined, stripping the bar/modal of background, color, and font. Declaring them on all three roots fixes that. */ :where(.rp, .rp-bar, .rp-modal) { --rp-bg: #FFFFFF; --rp-surface: #FFFFFF; --rp-surface-soft: #F4F5F8; --rp-navy: #130D60; --rp-navy-2: #221A8C; --rp-navy-deep: #0A0644; --rp-navy-tint: rgba(19,13,96,.04); --rp-navy-tint-2: rgba(19,13,96,.08); --rp-gold: #C9A961; --rp-gold-warm: #B8964A; --rp-gold-soft: #E1C98A; --rp-ink: #16143A; --rp-ink-soft: #5C5878; --rp-border: rgba(16,24,40,.10); --rp-border-soft: rgba(16,24,40,.06); --rp-shadow-1: 0 1px 2px rgba(15,10,69,.04), 0 8px 22px rgba(15,10,69,.06); --rp-shadow-2: 0 6px 14px rgba(15,10,69,.08), 0 22px 48px rgba(15,10,69,.10); --rp-shadow-sel: 0 8px 18px rgba(19,13,96,.28), 0 22px 56px rgba(19,13,96,.20), 0 0 0 1px rgba(201,169,97,.40); --font-display: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif; --font-body: 'Mulish', system-ui, -apple-system, Segoe UI, sans-serif; } .rp { position: relative; isolation: isolate; /* Bottom padding is just section-end breathing room — the sticky bar is `position: fixed` and reparented to , so it doesn't need any padding inside `.rp` to avoid overlap. */ padding: clamp(48px, 7vw, 88px) clamp(16px, 3vw, 40px) clamp(40px, 5vw, 56px); background: var(--rp-bg); color: var(--rp-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .rp *, .rp *::before, .rp *::after { box-sizing: border-box; } .rp button { font-family: inherit; } /* Background atmosphere -------------------------------------------- */ .rp-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 60% 30% at 50% 0%, rgba(19,13,96,.05) 0%, transparent 70%); } /* Header ----------------------------------------------------------- */ .rp-head { max-width: 760px; margin: 0 auto 52px; text-align: center; } .rp-eyebrow { font-family: var(--font-body); font-size: 18px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #00076F; margin: 0 0 18px; } .rp-headline { font-family: var(--font-display); font-weight: 700; font-size: 42px; line-height: 1.3; color: #000000; margin: 0 0 16px; } .rp-lede { font-size: clamp(15.5px, 1.4vw, 18px); line-height: 1.55; color: var(--rp-ink-soft); max-width: 560px; margin: 0 auto; } /* Cards grid ------------------------------------------------------- */ .rp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1180px; margin: 0 auto; } /* Card uses div+role=button so it can host a