/* ============================================================
   SettlementRadar — Premium Design System v2 (Task #1318785)
   Fortune 500 Visual Identity Overhaul

   This file loads LAST — after all other CSS files.
   It overrides everything with the canonical Fortune 500 palette.

   Canonical Colors:
   - Navy: #0A1628 (primary dark)
   - Gold: #F5A623 (accent, primary CTA)
   - White: #FFFFFF (cards, light sections)
   - Off-white: #F8FAFC (alternating sections)
   - Slate: #64748B (secondary text, readable on white)
   - Success: #10B981 (settlement won states)
   - Error: #EF4444 (error states)

   Load LAST — render-blocking, highest cascade priority.
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   1. FONT SYSTEM — Playfair Display + Inter
   ═══════════════════════════════════════════════════════════════ */

/* Load Playfair Display for hero headlines (Google Fonts CDN) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Premium font stack — display serif for headlines, clean sans for body */
:root {
  --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* ── Premium color palette ── */
  --sr-navy: #0A1628;
  --sr-navy-deep: #060e1a;
  --sr-navy-light: #152235;
  --sr-navy-border: rgba(255, 255, 255, 0.1);
  --sr-gold: #F5A623;
  --sr-gold-light: #FFB800;
  --sr-gold-dark: #d4920a;
  --sr-gold-glow: rgba(245, 166, 35, 0.25);
  --sr-white: #FFFFFF;
  --sr-off-white: #F8FAFC;
  --sr-slate: #64748B;
  --sr-success: #10B981;
  --sr-error: #EF4444;
  --sr-border: rgba(0, 0, 0, 0.06);

  /* ── Premium shadow system ── */
  --sr-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --sr-shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.14);
  --sr-shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.16);
  --sr-shadow-gold: 0 4px 24px rgba(245, 166, 35, 0.3);
  --sr-shadow-gold-hover: 0 8px 40px rgba(245, 166, 35, 0.4);

  /* ── Premium border radius ── */
  --sr-radius-sm: 8px;
  --sr-radius-md: 12px;
  --sr-radius-lg: 16px;
  --sr-radius-xl: 20px;
  --sr-radius-full: 9999px;
}

/* ═══════════════════════════════════════════════════════════════
   2. TYPOGRAPHY SYSTEM — Fortune 500 Grade
   ═══════════════════════════════════════════════════════════════ */

/* Hero headlines — Playfair Display serif */
h1, .sr-h1, .sr-hero-headline, .hero-title, .hero-headline,
.section-headline h2, .sr-section-title, .sr-display {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: var(--sr-navy) !important;
}

/* H1 — 48-72px desktop, 32-40px mobile */
h1, .sr-h1 {
  font-size: clamp(2rem, 5vw, 4.5rem) !important;
}

/* H2 — 36px desktop */
h2, .sr-h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  color: var(--sr-navy) !important;
}

/* H3 — 28px */
h3, .sr-h3 {
  font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--sr-navy) !important;
}

/* Body text — Inter, 16px min, 1.6 line-height */
body, p, .sr-body {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--sr-navy) !important;
}

/* Labels and caps — letter-spacing 0.05em */
.sr-label, .sr-badge, .sr-tag, label, .caps-label, .uppercase-label,
[class*='badge-'], [class*='tag-'] {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

/* Small text */
.sr-small, .sr-caption, .sr-meta {
  font-size: 0.875rem !important;
  color: var(--sr-slate) !important;
}

/* Section subtitles — slate, smaller */
.sr-subtitle, .section-subtitle, .sr-description {
  font-size: 1.125rem !important;
  color: var(--sr-slate) !important;
  line-height: 1.6 !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. STICKY HEADER — Navy Background, White Text
   ═══════════════════════════════════════════════════════════════ */

/* Primary header — navy background (override critical-failsafe inline !important) */
html body header[role='banner'],
body > header,
.sr-header, .site-header,
.nav-header, .nav-bar, .navbar,
.sr-nav-container, .nav-flat-container,
#srNav, #mainNav,
html body > nav#mainNav,
body > nav[role='navigation']:first-of-type {
  background: var(--sr-navy) !important;
  border-bottom: 1px solid var(--sr-navy-border) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Header text — white (override critical-failsafe) */
html body header[role='banner'] a,
html body header[role='banner'] span,
html body header[role='banner'] button,
html body header[role='banner'] svg,
body > header a, body > header span,
.sr-header a, .site-header a, .nav-header a,
.sr-header button, .nav-header button,
.nav-header input, .nav-header svg,
.sr-header .nav-link, .nav-header .nav-link,
.nav-header .nav-item, .nav-header .nav-text,
header[role='banner'] a, header[role='banner'] span {
  color: var(--sr-white) !important;
}

/* Nav links — white, hover gold */
.nav-flat-link, .nav-link, .nav-item a,
.nav-header a, .nav-header .nav-item,
.sr-header .nav-flat-link, .sr-header nav a,
header a[href]:not([class*='btn']):not([class*='cta']),
.nav-header a[href]:not([class*='btn']):not([class*='cta']) {
  color: rgba(255, 255, 255, 0.85) !important;
  transition: color 0.2s ease !important;
}

.nav-flat-link:hover, .nav-link:hover,
.nav-header a:hover, .nav-item a:hover,
.nav-header a:focus {
  color: var(--sr-gold) !important;
}

/* Nav logo — white */
.nav-logo, .sr-logo, .nav-brand img,
.nav-header img, .nav-header .logo-text,
.sr-header .logo-text, .nav-logo-text {
  filter: brightness(0) invert(1) !important;
}

/* Nav cta button — gold background (high specificity for override) */
html body .nav-cta-go-pro,
html body header .nav-cta-go-pro,
html body nav .nav-cta-go-pro,
.nav-cta-go-pro, .nav-upgrade-btn, .nav-pro-btn,
.nav-cta-pro, .nav-cta-premium,
html body [class*='nav-'] [class*='cta-'],
html body [class*='nav-bar'] [class*='cta-'],
.nav-header button[class*='pro'],
.nav-header a[class*='pro'],
header button[class*='pro'],
header a[class*='pro'],
.nav-header .sr-btn-primary,
.nav-header .nav-pro-cta,
.nav-pro-cta {
  background: linear-gradient(135deg, var(--sr-gold) 0%, var(--sr-gold-light) 100%) !important;
  color: var(--sr-navy) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--sr-radius-md) !important;
  padding: 10px 24px !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 12px var(--sr-gold-glow) !important;
}

.nav-cta-go-pro:hover, .nav-upgrade-btn:hover,
.nav-cta-pro:hover, .nav-pro-cta:hover {
  background: var(--sr-gold-light) !important;
  box-shadow: 0 4px 20px var(--sr-gold-glow) !important;
  transform: translateY(-1px) !important;
}

/* Hamburger menu icon — white */
.nav-hamburger span, .nav-hamburger::before, .nav-hamburger::after,
.hamburger span, .hamburger::before, .hamburger::after,
button[class*='hamburger'] span,
button[class*='hamburger']::before,
button[class*='hamburger']::after {
  background-color: var(--sr-white) !important;
}

/* Mobile nav open state */
.nav-mobile-menu {
  background: var(--sr-navy) !important;
}

/* Scroll progress bar at top — gold */
#srProgressBar, .sr-progress-bar, .reading-progress,
.scroll-progress, .page-progress {
  background: var(--sr-gold) !important;
  height: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. SEARCH BAR — Magnifying glass icon visible, button not covering it
   ═══════════════════════════════════════════════════════════════ */

/* Search container — proper positioning */
html body .sr-search-wrap, html body .sr-search-container,
html body .nav-search-container, html body .nav-inline-search,
html body .nav-header-search, html body .sr-header-search,
html body .search-form, html body .search-box,
.sr-search-wrap, .sr-search-container, .nav-search-container,
.nav-header-search, .sr-header-search, .nav-inline-search,
.search-form, .search-box, .sr-search-box,
#srSearch, #searchForm {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

/* Search icon — absolutely positioned, visible on left */
html body .nav-inline-search svg,
html body .nav-inline-search [class*='icon'],
.sr-search-icon, .search-icon, .nav-search-icon,
.search-form svg, .search-form [class*='icon'],
.nav-header-search svg, .nav-header-search [class*='icon'],
.search-box svg, .search-box [class*='icon'] {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--sr-slate) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* Search input — padding-left to avoid icon overlap */
html body .nav-inline-search input,
html body header input[type='search'],
.sr-search-input, .search-input, .nav-search-input,
.search-form input, .search-form input[type='search'],
.search-box input, .search-box input[type='search'],
input[type='search'].sr-search, input[type='search'].search-field,
.nav-header-search input, .nav-header-search input[type='search'] {
  padding-left: 42px !important;
  padding-right: 90px !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--sr-radius-md) !important;
  color: var(--sr-white) !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
}

html body .nav-inline-search input:focus,
.sr-search-input:focus, .search-input:focus,
.search-form input:focus, .search-box input:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--sr-gold) !important;
  box-shadow: 0 0 0 3px var(--sr-gold-glow) !important;
  outline: none !important;
}

html body .nav-inline-search input::placeholder,
.sr-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Search button — not covering the icon */
html body .nav-inline-search button,
.sr-search-btn, .search-btn, .search-submit,
.search-form button, .search-form button[type='submit'],
.search-box button, .search-box button[type='submit'],
button[class*='search-btn'], button[class*='search-submit'],
.nav-header-search button {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--sr-gold) !important;
  color: var(--sr-navy) !important;
  border: none !important;
  border-radius: var(--sr-radius-sm) !important;
  padding: 8px 16px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  min-width: auto !important;
  min-height: auto !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 2 !important;
}

html body .nav-inline-search button:hover,
.sr-search-btn:hover, .search-btn:hover {
  background: var(--sr-gold-light) !important;
  transform: translateY(-50%) scale(1.02) !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. CARDS — Premium Design
   ═══════════════════════════════════════════════════════════════ */

/* Base card — white, 16px radius, premium shadow */
.sr-card, .settlement-card, .card, [class*='card-'],
.sr-settlement-card, .settlement-item, .card-item {
  background: var(--sr-white) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: var(--sr-radius-lg) !important;
  box-shadow: var(--sr-shadow-card) !important;
  padding: 24px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

/* Card hover — lift + shadow increase */
.sr-card:hover, .settlement-card:hover, .card:hover,
.sr-settlement-card:hover, .settlement-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--sr-shadow-card-hover) !important;
}

/* Featured card — gold accent border */
.sr-card-featured, .card-featured, .settlement-card.featured,
.sr-card--featured, [class*='featured-card'],
.settlement-card.sr-featured {
  border: 2px solid var(--sr-gold) !important;
  box-shadow: 0 0 0 4px var(--sr-gold-glow), var(--sr-shadow-card) !important;
}

/* Dark card — navy background */
.sr-card-dark, .card-dark, .sr-card--dark,
[class*='card-'][class*='dark'] {
  background: var(--sr-navy) !important;
  border: 1px solid var(--sr-navy-border) !important;
}

.sr-card-dark h1, .sr-card-dark h2, .sr-card-dark h3,
.sr-card-dark p, .sr-card-dark span,
.card-dark h1, .card-dark h2, .card-dark h3,
.card-dark p, .card-dark span {
  color: var(--sr-white) !important;
}

/* Settlement card — large payout amount */
.settlement-card .payout-amount,
.settlement-card .sr-payout, .sr-payout-value,
.settlement-card [class*='payout'], .sr-payout-display {
  font-family: var(--font-display) !important;
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  color: var(--sr-navy) !important;
  line-height: 1 !important;
}

/* Payout badge — gold highlight */
.sr-payout-badge, .payout-badge, [class*='payout-badge'],
.settlement-card .sr-highlight-payout,
.settlement-card [class*='payout-highlight'] {
  background: linear-gradient(135deg, var(--sr-gold) 0%, var(--sr-gold-light) 100%) !important;
  color: var(--sr-navy) !important;
  font-weight: 800 !important;
  border-radius: var(--sr-radius-md) !important;
  padding: 8px 16px !important;
  box-shadow: var(--sr-shadow-gold) !important;
}

/* Deadline countdown */
.sr-deadline, .deadline-badge, .deadline-countdown,
[class*='deadline-'], [class*='countdown-'] {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--sr-error) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  border-radius: var(--sr-radius-sm) !important;
  padding: 6px 12px !important;
}

/* Claim count badge */
.sr-claim-count, .claim-count, [class*='claim-count'],
.settlement-card .claim-badge {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--sr-slate) !important;
  background: var(--sr-off-white) !important;
  border-radius: var(--sr-radius-full) !important;
  padding: 4px 10px !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. BUTTON SYSTEM — Gold Primary CTAs
   ═══════════════════════════════════════════════════════════════ */

/* Primary CTA — gold background, navy text */
.sr-cta-primary, .sr-btn-primary, .sr-primary-btn,
.btn-primary, .btn-gold, [class*='btn-primary'],
.sr-cta, .cta-btn, [class*='cta-btn'],
button.sr-cta, a.sr-cta,
.nav-cta, .cta-claim, .claim-now-btn,
.sr-file-now, .file-now-btn,
.sr-cta-gold {
  background: linear-gradient(135deg, var(--sr-gold) 0%, var(--sr-gold-light) 100%) !important;
  color: var(--sr-navy) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border: none !important;
  border-radius: var(--sr-radius-md) !important;
  padding: 16px 32px !important;
  min-height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: var(--sr-shadow-gold) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
}

.sr-cta-primary:hover, .sr-btn-primary:hover,
.btn-primary:hover, .sr-cta-gold:hover {
  background: linear-gradient(135deg, var(--sr-gold-light) 0%, var(--sr-gold) 100%) !important;
  transform: scale(1.02) translateY(-1px) !important;
  box-shadow: var(--sr-shadow-gold-hover) !important;
}

.sr-cta-primary:active, .sr-btn-primary:active {
  transform: scale(0.98) !important;
}

.sr-cta-primary:focus, .sr-btn-primary:focus {
  outline: 3px solid var(--sr-gold-glow) !important;
  outline-offset: 2px !important;
}

/* Primary CTA small variant */
.sr-cta-primary--sm, .sr-btn-primary--sm,
.btn-primary-sm, [class*='btn-primary-sm'] {
  padding: 10px 20px !important;
  min-height: 40px !important;
  font-size: 0.875rem !important;
}

/* Secondary CTA — outlined, navy border */
.sr-cta-secondary, .sr-btn-secondary, .btn-secondary,
[class*='btn-secondary'], .sr-cta-outline {
  background: transparent !important;
  color: var(--sr-navy) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border: 2px solid var(--sr-navy) !important;
  border-radius: var(--sr-radius-md) !important;
  padding: 14px 30px !important;
  min-height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.sr-cta-secondary:hover, .sr-btn-secondary:hover {
  background: var(--sr-navy) !important;
  color: var(--sr-white) !important;
}

/* Dark section CTA — white text on gold */
.sr-dark .sr-cta-primary, [class*='dark'] .sr-cta-primary,
.sr-navy-section .sr-cta-primary {
  background: var(--sr-gold) !important;
  color: var(--sr-navy) !important;
}

/* Ghost/outline buttons — remove, no longer premium */
.sr-cta-ghost, .sr-btn-ghost, .btn-ghost,
[class*='ghost-btn'], [class*='outline-btn'],
button[class*='ghost'], a[class*='ghost']:not([class*='cta']) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--sr-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--sr-radius-md) !important;
  padding: 12px 24px !important;
  min-height: 48px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.sr-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. SECTION RHYTHM — Alternating backgrounds
   ═══════════════════════════════════════════════════════════════ */

/* Section base — clean spacing */
section, .sr-section {
  padding: 80px 0 !important;
}

@media (max-width: 768px) {
  section, .sr-section {
    padding: 48px 0 !important;
  }
}

/* Dark section — navy background */
.sr-section-dark, .sr-dark-section, .sr-navy-section,
[class*='section-dark'], [class*='dark-section'],
.sr-section--dark {
  background: var(--sr-navy) !important;
  color: var(--sr-white) !important;
}

.sr-section-dark h1, .sr-section-dark h2, .sr-section-dark h3,
.sr-section-dark p, .sr-section-dark span,
.sr-navy-section h1, .sr-navy-section h2, .sr-navy-section h3,
.sr-navy-section p, .sr-navy-section span {
  color: var(--sr-white) !important;
}

/* Off-white section */
.sr-section-alt, .sr-alt-section, [class*='section-alt'],
.sr-section--subtle {
  background: var(--sr-off-white) !important;
}

/* White section (default) */
.sr-section-white, [class*='section-white'] {
  background: var(--sr-white) !important;
}

/* Section content wrapper */
.sr-section-content, .section-content, .sr-container,
.sr-max-w {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* Hero section — full viewport */
.sr-hero, .hero-section, [class*='hero-section'] {
  min-height: 80vh !important;
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(180deg, var(--sr-navy) 0%, var(--sr-navy-deep) 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.sr-hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: radial-gradient(ellipse at 70% 50%, rgba(245, 166, 35, 0.08) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

.sr-hero h1, .sr-hero h2, .hero-title {
  color: var(--sr-white) !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. BADGES — Premium Design, All Contrast Fixed
   ═══════════════════════════════════════════════════════════════ */

/* Verified badge — gold */
.sr-badge-verified, .verified-badge, [class*='badge-verified'],
.sr-verified, [class*='verified-'] {
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.15) 0%, rgba(245, 166, 35, 0.08) 100%) !important;
  color: var(--sr-gold-dark) !important;
  border: 1px solid var(--sr-gold) !important;
  border-radius: var(--sr-radius-full) !important;
  padding: 4px 12px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Deadline soon badge */
.sr-badge-deadline, .deadline-soon-badge,
[class*='badge-deadline'], [class*='deadline-soon'] {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: var(--sr-radius-full) !important;
  padding: 4px 12px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* High payout badge */
.sr-badge-high-payout, .high-payout-badge,
[class*='badge-payout'], [class*='payout-high'] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: var(--sr-radius-full) !important;
  padding: 4px 12px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* No proof required badge */
.sr-badge-no-proof, .no-proof-badge,
[class*='badge-no-proof'], [class*='no-proof'] {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%) !important;
  color: #4338ca !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  border-radius: var(--sr-radius-full) !important;
  padding: 4px 12px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Status pills — slate on off-white, readable */
.sr-status-pill, .status-pill, [class*='status-pill'],
[class*='pill-'] {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: var(--sr-radius-full) !important;
  background: var(--sr-off-white) !important;
  color: var(--sr-navy) !important;
  border: 1px solid var(--sr-border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   9. TRUST BAR / SOCIAL PROOF — Odometer Animation
   ═══════════════════════════════════════════════════════════════ */

.sr-trust-bar, .trust-bar, .stats-bar,
[class*='trust-bar'], [class*='stats-bar'] {
  background: var(--sr-off-white) !important;
  border-top: 1px solid var(--sr-border) !important;
  border-bottom: 1px solid var(--sr-border) !important;
  padding: 20px 0 !important;
}

/* Stat numbers — navy, bold */
.sr-stat-number, .stat-number, [class*='stat-number'],
.trust-bar .number, .stats-bar .count,
.sr-trust-bar .stat-value {
  font-family: var(--font-display) !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: var(--sr-navy) !important;
  line-height: 1 !important;
}

/* Stat labels — slate, uppercase */
.sr-stat-label, .stat-label, [class*='stat-label'],
.trust-bar .label, .stats-bar .label {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--sr-slate) !important;
  margin-top: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════
   10. EXIT INTENT POPUP — Premium, Pretty
   ═══════════════════════════════════════════════════════════════ */

/* Popup overlay — navy with 95% opacity */
.sr-exit-overlay, .exit-intent-overlay,
.exit-overlay, [class*='exit-overlay'],
#exitIntentOverlay, #exitIntentModal,
[class*='exit-intent'][class*='modal'],
[class*='exit-popup'],
.modal-overlay, .sr-modal-overlay {
  background: rgba(10, 22, 40, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

/* Popup card — white, 16px radius, centered */
.sr-exit-popup, .exit-intent-popup, .exit-popup-card,
.exit-intent-modal, .sr-popup,
[class*='exit-popup'][class*='card'],
.modal-content, .popup-content,
#exitIntentContent, .sr-exit-content {
  background: var(--sr-white) !important;
  border-radius: var(--sr-radius-lg) !important;
  padding: 48px !important;
  max-width: 520px !important;
  width: 100% !important;
  box-shadow: var(--sr-shadow-elevated) !important;
  position: relative !important;
  text-align: center !important;
  border: 1px solid var(--sr-border) !important;
}

@media (max-width: 600px) {
  .sr-exit-popup, .exit-intent-popup, .exit-popup-card,
  .exit-intent-modal, .sr-popup {
    padding: 32px 24px !important;
    max-width: 100% !important;
    border-radius: var(--sr-radius-md) !important;
  }
}

/* X close button — 44px tap target, prominent */
.sr-exit-close, .exit-intent-close, .exit-close,
.sr-popup-close, .popup-close,
button[class*='exit-close'], button[class*='popup-close'],
[class*='exit-intent'][class*='close'],
[class*='exit-popup'] [class*='close'],
.sr-modal-close, .modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  background: var(--sr-off-white) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: var(--sr-radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--sr-slate) !important;
  font-size: 1.25rem !important;
  transition: all 0.2s ease !important;
  z-index: 9999 !important;
  padding: 0 !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  pointer-events: auto !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.sr-exit-close:hover, .exit-intent-close:hover {
  background: var(--sr-navy) !important;
  color: var(--sr-white) !important;
  transform: scale(1.05) !important;
}

/* Exit popup headline */
.sr-exit-popup h2, .exit-intent-popup h2,
.sr-exit-popup .sr-headline, .exit-intent-popup .headline {
  font-family: var(--font-display) !important;
  font-size: clamp(1.5rem, 4vw, 2rem) !important;
  font-weight: 700 !important;
  color: var(--sr-navy) !important;
  margin-bottom: 12px !important;
  line-height: 1.2 !important;
}

/* Exit popup body text */
.sr-exit-popup p, .exit-intent-popup p,
.sr-exit-popup .sr-body, .exit-intent-popup .body {
  color: var(--sr-slate) !important;
  font-size: 1rem !important;
  margin-bottom: 24px !important;
  line-height: 1.6 !important;
}

/* Exit popup CTAs — side by side on desktop */
.sr-exit-popup .cta-row,
.sr-exit-popup [class*='cta-group'],
.sr-exit-popup .popup-ctas {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

/* ═══════════════════════════════════════════════════════════════
   11. FOOTER — Premium, Navy with Gold Accents
   ═══════════════════════════════════════════════════════════════ */

.sr-footer, .site-footer, footer[role='contentinfo'],
.footer, .sr-footer-container {
  background: var(--sr-navy) !important;
  color: var(--sr-white) !important;
  padding: 80px 0 40px !important;
}

/* Footer headings — white, bold */
.sr-footer h3, .footer h3, .footer-heading,
.sr-footer h4, .footer h4, .footer-column-title {
  color: var(--sr-white) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

/* Footer links — off-white with hover to gold */
.sr-footer a, .footer a, .footer-link {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color 0.2s ease !important;
  font-size: 0.9rem !important;
  line-height: 1.8 !important;
}

.sr-footer a:hover, .footer a:hover, .footer-link:hover {
  color: var(--sr-gold) !important;
}

/* Footer columns */
.sr-footer-grid, .footer-grid, .footer-columns,
.footer-col, .footer-column {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 40px !important;
  margin-bottom: 48px !important;
}

/* Footer social icons — Facebook only, white */
.sr-footer-social a, .footer-social a, .footer-social-links a,
.footer [class*='social'] a, .sr-social-link {
  color: rgba(255, 255, 255, 0.6) !important;
  transition: color 0.2s ease !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--sr-radius-sm) !important;
}

.sr-footer-social a:hover {
  color: var(--sr-gold) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Footer bottom bar */
.sr-footer-bottom, .footer-bottom, .footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 24px !important;
  margin-top: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.sr-footer-bottom p, .footer-bottom p {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 0.8rem !important;
}

/* Footer gold accent — logo or tagline */
.sr-footer [class*='gold'], .footer [class*='gold'] {
  color: var(--sr-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════
   12. MOTION DESIGN — Premium Micro-interactions
   ═══════════════════════════════════════════════════════════════ */

/* Page load — staggered fade-in + slide-up */
@keyframes sr-fade-in-up {
  from {
    opacity: 0 !important;
    transform: translateY(20px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

.sr-fade-in-up, .sr-animate-in,
.sr-hero > *, .sr-hero-content > *,
section.sr-hero h1, section.sr-hero h2,
section.sr-hero p, section.sr-hero a {
  animation: sr-fade-in-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  opacity: 0 !important;
}

/* Stagger delays */
.sr-hero > *:nth-child(1), .sr-hero h1 { animation-delay: 0.1s !important; }
.sr-hero > *:nth-child(2), .sr-hero p { animation-delay: 0.2s !important; }
.sr-hero > *:nth-child(3), .sr-hero a { animation-delay: 0.3s !important; }
.sr-hero > *:nth-child(4), .sr-hero button { animation-delay: 0.4s !important; }
.sr-hero > *:nth-child(5) { animation-delay: 0.5s !important; }

/* Scroll reveal — fade in up when in view */
@keyframes sr-reveal {
  from {
    opacity: 0 !important;
    transform: translateY(30px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

.sr-reveal, .sr-scroll-reveal,
[class*='reveal-'], [class*='scroll-reveal'] {
  opacity: 0 !important;
}

.sr-reveal.visible, .sr-scroll-reveal.visible,
.sr-reveal.in-view, [class*='reveal-'].visible,
[class*='scroll-reveal'].in-view {
  animation: sr-reveal 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* Card hover — smooth lift */
.sr-card, .settlement-card, .card {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s ease !important;
}

.sr-card:hover, .settlement-card:hover, .card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--sr-shadow-card-hover) !important;
}

/* Button hover — scale + shadow */
.sr-cta-primary, .sr-btn-primary, .btn-primary,
.sr-cta-gold {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s ease,
              background 0.2s ease !important;
}

.sr-cta-primary:hover {
  transform: scale(1.03) translateY(-1px) !important;
}

.sr-cta-primary:active {
  transform: scale(0.97) !important;
}

/* Search input focus — glow effect */
.sr-search-input:focus, .search-input:focus,
input[type='search']:focus {
  box-shadow: 0 0 0 3px var(--sr-gold-glow) !important;
}

/* Payout badge pulse — subtle gold pulse */
@keyframes sr-pulse-gold {
  0%, 100% {
    box-shadow: var(--sr-shadow-gold) !important;
  }
  50% {
    box-shadow: 0 4px 32px rgba(245, 166, 35, 0.5) !important;
  }
}

.sr-payout-badge, .payout-badge,
[class*='payout-badge']:first-child {
  animation: sr-pulse-gold 3s ease-in-out infinite !important;
}

/* Number count-up — triggered by scroll */
.sr-count-up, .sr-stat-number {
  font-variant-numeric: tabular-nums !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sr-fade-in-up, .sr-animate-in,
  .sr-reveal, .sr-scroll-reveal,
  [class*='reveal-'], [class*='scroll-reveal'],
  .sr-card:hover, .settlement-card:hover,
  .sr-cta-primary:hover, .sr-btn-primary:hover,
  .sr-payout-badge {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   13. FORM INPUTS — Premium Design
   ═══════════════════════════════════════════════════════════════ */

input[type='text'], input[type='email'], input[type='tel'],
input[type='password'], input[type='number'], input[type='search'],
input[type='url'], input[type='date'], select, textarea,
.sr-input, .form-input, input.sr-field {
  background: var(--sr-white) !important;
  border: 1.5px solid var(--sr-border) !important;
  border-radius: var(--sr-radius-md) !important;
  padding: 12px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--sr-navy) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  min-height: 48px !important;
}

input:focus, select:focus, textarea:focus,
.sr-input:focus, .form-input:focus {
  border-color: var(--sr-gold) !important;
  box-shadow: 0 0 0 3px var(--sr-gold-glow) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: var(--sr-slate) !important;
  opacity: 0.7 !important;
}

/* ═══════════════════════════════════════════════════════════════
   14. MISCELLANEOUS PREMIUM POLISH
   ═══════════════════════════════════════════════════════════════ */

/* Accent lines — gold underline for key headings */
.sr-accent-line::after,
[class*='accent-line']::after {
  content: '' !important;
  display: block !important;
  width: 48px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--sr-gold), var(--sr-gold-light)) !important;
  border-radius: 2px !important;
  margin-top: 12px !important;
}

/* Divider — subtle, not harsh */
.sr-divider, .divider, hr {
  border: none !important;
  border-top: 1px solid var(--sr-border) !important;
  margin: 40px 0 !important;
}

/* Scrollbar — thin, navy */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: var(--sr-off-white) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--sr-navy) !important;
  border-radius: 4px !important;
  opacity: 0.4 !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sr-gold) !important;
}

/* Selection — gold accent */
::selection {
  background: var(--sr-gold) !important;
  color: var(--sr-navy) !important;
}

/* Smooth focus visible */
:focus-visible {
  outline: 2px solid var(--sr-gold) !important;
  outline-offset: 2px !important;
}

/* Gold text on dark backgrounds */
.sr-gold-text, [class*='text-gold'] {
  color: var(--sr-gold) !important;
}

/* Premium pricing display */
.sr-price, .sr-pricing {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  color: var(--sr-navy) !important;
}

/* Success state — emerald green */
.sr-success-text, [class*='text-success'] {
  color: var(--sr-success) !important;
}

/* Error state — rose red */
.sr-error-text, [class*='text-error'] {
  color: var(--sr-error) !important;
}

/* Category pills — slate on off-white */
.sr-category-pill, .category-pill, [class*='category-pill'],
.sr-cat-tag, .cat-tag {
  background: var(--sr-off-white) !important;
  color: var(--sr-navy) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: var(--sr-radius-full) !important;
  padding: 6px 16px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.sr-category-pill:hover {
  background: var(--sr-navy) !important;
  color: var(--sr-white) !important;
  border-color: var(--sr-navy) !important;
}

/* Horizontal scroll container — premium cards */
.sr-scroll-row, .scroll-row, [class*='scroll-row'] {
  display: flex !important;
  gap: 20px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 16px !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: thin !important;
}

.sr-scroll-row > * {
  scroll-snap-align: start !important;
  flex-shrink: 0 !important;
  min-width: 300px !important;
}