/* ═══════════════════════════════════════════════════════
   RESIDENTIAL FLEX PROXIES PRICING - Page-specific styles
   Sky/azure tint. Supplements pricing.css + modules/pricing.css.
   All overrides are scoped to .rflex so the shared pricing
   chrome stays type-agnostic.
   ═══════════════════════════════════════════════════════ */

/* ─── Page wrapper ─── */
.rflex {
    font-family: 'Mulish', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Gibson-like display font for every heading + the pricing module */
    --db-font-display: 'Mulish', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─── Navy bands - match the product page hero gradient ─── */
.rflex .db-pricing-hero,
.rflex .db-pricing-cta {
    background: linear-gradient(168deg, #07142b 0%, #091B36 46%, #0d264c 100%);
}

/* Brand glow tint for the hero + CTA radial wash - sky/azure */
.rflex .db-pricing-hero__bg::before {
    background: radial-gradient(circle, rgba(124, 58, 237, 0.22) 0%, rgba(168, 85, 247, 0.05) 45%, transparent 70%);
}
.rflex .db-pricing-cta::before {
    background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.2) 0%, transparent 68%);
}

/* Hero accent word - sky/azure consistent with the product hero */
.rflex .db-pricing-hero h1 span {
    background: linear-gradient(100deg, #c4b5fd 0%, #A855F7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
    .rflex .db-pricing-hero__breadcrumb a {
        transition: none !important;
    }
}