/* ═══════════════════════════════════════════════════════
   MOBILE PROXIES PRICING - Page-specific styles
   Indigo tint (#4F46E5). Supplements pricing.css +
   modules/pricing.css. All overrides scoped to .mob-pr
   (the <main> wrapper on Mobile/Pricing.cshtml).
   ═══════════════════════════════════════════════════════ */

/* ─── Page wrapper ─── */
.mob-pr {
    font-family: 'Mulish', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --db-font-display: 'Mulish', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─── Navy bands - hero + bottom CTA ─── */
.mob-pr .db-pricing-hero,
.mob-pr .db-pricing-cta {
    background: linear-gradient(168deg, #07142b 0%, #091B36 46%, #0d264c 100%);
}

/* ─── Hero glow: indigo wash ─── */
.mob-pr .db-pricing-hero__bg::before {
    background: radial-gradient(circle, rgba(79,70,229,0.20) 0%, rgba(99,102,241,0.05) 45%, transparent 70%);
}
.mob-pr .db-pricing-cta::before {
    background: radial-gradient(ellipse at center, rgba(79,70,229,0.18) 0%, transparent 68%);
}

/* ─── Hero h1 accent word ─── */
.mob-pr .db-pricing-hero h1 span {
    background: linear-gradient(100deg, #a5b4fc 0%, #6366F1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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