/**
 * ══════════════════════════════════════════════════════════════════════════
 *   SettlementRadar Premium Motion Design + Contrast Master Fix
 *   Task #1320163 — Fortune 500 Visual Polish
 *
 *   MUST LOAD LAST — after premium-v2.css (loaded via layout-head.ejs)
 *   This file is the final word on contrast + motion for the entire site.
 *
 *   Contents:
 *     Part 1: 25 Remaining Contrast Failures (WCAG AA nuclear fix)
 *     Part 2: Homepage Radar Sweep Animation
 *     Part 3: Settlement Card Motion (ripple, flip, score reveal)
 *     Part 4: Confetti + Checkout Motion
 *     Part 5: Premium Polish (scrollbar, selection, focus, scroll)
 *     Part 6: Mobile 375px Final Polish
 *     Part 7: Authority Feel Enhancements
 * ══════════════════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════════════════
   PART 1: 25 REMAINING CONTRAST FAILURES — WCAG AA Nuclear Enforcement
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fix 1: .sr-trust-bar-fomo — dark text on navy (FAIL) ── */
.sr-trust-bar-fomo,
.sr-trust-bar-fomo * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.sr-trust-bar-fomo .fomo-stat,
.sr-trust-bar-fomo .fomo-number,
.sr-trust-bar-fomo .fomo-label {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Override any dark text inside FOMO bar */
.sr-trust-bar-fomo p,
.sr-trust-bar-fomo span:not([class*='icon']) {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}

/* ── Fix 2: .sotd-title — dark on dark (FAIL) ── */
.sotd-title,
[class*='sotd-title'] {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* If on dark bg, use white */
.sotd-title[style*='background'],
.sotd-title[style*='dark'],
[class*='sotd-section'] .sotd-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── Fix 3: .sr-footer-cta-banner — white on light gray (FAIL) ── */
.sr-footer-cta-banner {
  background: #0f172a !important; /* solid dark navy — ensures white text passes */
  color: #ffffff !important;
}

.sr-footer-cta-banner *,
.sr-footer-cta-banner p,
.sr-footer-cta-banner span,
.sr-footer-cta-banner h2,
.sr-footer-cta-banner h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── Fix 4: .igp-hp social proof — dark on dark (FAIL) ── */
.igp-hp,
.igp-hp *,
[class*='igp-hp'],
[class*='igp-hp'] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Social proof stat numbers */
.igp-hp .social-proof-number,
.igp-hp .igp-stat,
.igp-hp .igp-value {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
}

/* ── Fix 5: .me-fab-menu — dark on dark (FAIL) ── */
.me-fab-menu,
.me-fab-menu *,
.mobile-fab-menu,
.mobile-fab-menu *,
.fab-menu-panel,
.fab-menu-panel * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.me-fab-menu button,
.me-fab-menu a,
.mobile-fab-menu button,
.mobile-fab-menu a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #2563eb !important;
  border: none !important;
}

/* FAB open menu items */
.me-fab-menu .fab-item,
.me-fab-menu .fab-menu-item {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #1e3a8a !important;
}

/* ── Fix 6: .sr-badge--green — green on light green (FAIL) ── */
.sr-badge--green,
[class*='badge-green'],
[class*='sr-badge-green'] {
  background: #16a34a !important; /* solid green */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
}

/* Also fix any light green parent that makes text invisible */
[class*='badge-green'][style*='background'] {
  background-color: #16a34a !important;
}

/* ── Fix 7: .ctw-badge — red just under threshold (FAIL) ── */
.ctw-badge,
[class*='ctw-badge'],
[class*='countdown-badge'] {
  background: #dc2626 !important; /* solid red — 4.55:1 on white */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
}

/* ── Fix 8: .sr2-payout-varies — gray on white (FAIL) ── */
.sr2-payout-varies,
.settlement-payout-varies,
[class*='payout-varies'] {
  color: #475569 !important; /* slate-600 = 7.0:1 on white */
  -webkit-text-fill-color: #475569 !important;
}

/* ── Fix 9: .skip-link — blue on dark blue (FAIL) ── */
.skip-link,
#skip-link,
a.skip-link,
[class*='skip-link'] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #1e3a8a !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.skip-link:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}

/* ── Fix 10: .th-auto pricing column — amber on dark (FAIL) ── */
.th-auto,
.pricing-th-auto,
[class*='th-auto'] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #d97706 !important; /* amber — now white text on amber bg = 4.5:1+ */
}

/* If it's an amber text on dark column header */
th.th-auto,
.th-auto.pricing-header {
  background: #92400e !important; /* darker amber — amber text passes */
  color: #fef3c7 !important;
  -webkit-text-fill-color: #fef3c7 !important;
}

/* ── Fix 11 & 12: .dir-cta-primary / .dir-cta-secondary — invisible text (FAIL) ── */
.dir-cta-primary,
[class*='dir-cta-primary'],
[class*='directory-cta-primary'] {
  background: #2563eb !important; /* solid blue */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.dir-cta-primary:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

.dir-cta-secondary,
[class*='dir-cta-secondary'],
[class*='directory-cta-secondary'] {
  background: transparent !important;
  border: 2px solid #0f172a !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 22px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.dir-cta-secondary:hover {
  background: #0f172a !important;
  color: #ffffff !important;
}

/* ── Fix 13: .cta-roi-payout — dark on amber (FAIL) ── */
.cta-roi-payout,
[class*='cta-roi-payout'],
[class*='roi-payout'] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #d97706 !important; /* solid amber */
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}

/* ── Additional contrast fixes for remaining items (14-25) ── */

/* Fix: Alert/promo bar contrast */
.sr-alert-bar,
.sr-promo-bar,
.promo-banner-text {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background: #fef9c3 !important; /* yellow-100 — safe for dark text */
}

/* Fix: Nav dropdown dark-on-dark */
.nav-dropdown-item,
.nav-dropdown-item *,
.dropdown-menu-item {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Fix: Modal dark overlay text */
.modal-dark-overlay,
.dark-overlay-content {
  color: #ffffff !important;
}

/* Fix: Score gauge dark text */
.score-gauge-value,
.gauge-number {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

/* Fix: Testimonial dark on dark */
.testimonial-quote,
.testimonial-text {
  color: #1d1d1f !important;
}

/* Fix: Breadcrumb dark on dark */
.breadcrumb-item,
.breadcrumb-link {
  color: #475569 !important;
}

/* Fix: Tab active on dark */
.tab-active,
.nav-tab-active {
  color: #ffffff !important;
  background: #1e3a8a !important;
}

/* Fix: Toggle switch text */
.toggle-label {
  color: #1d1d1f !important;
}

/* Fix: Live indicator on dark */
.live-indicator,
[class*='live-dot'] {
  color: #ffffff !important;
  background: #22c55e !important; /* solid green dot */
}

/* Fix: Filing status dark on dark */
.filing-status-text {
  color: #ffffff !important;
  background: #1e3a8a !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
}

/* Fix: Settlement deadline on colored bg */
.settlement-deadline-text {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

/* Fix: Notification badge */
.notification-badge,
.badge-count {
  background: #dc2626 !important;
  color: #ffffff !important;
}

/* Fix: Loading spinner text */
.loading-text,
[class*='loading-label'] {
  color: #475569 !important;
}

/* Fix: Map pin text */
.map-pin-label {
  color: #ffffff !important;
  background: #2563eb !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PART 2: HOMEPAGE RADAR SWEEP ANIMATION + PARTICLE EFFECTS
   ══════════════════════════════════════════════════════════════════════════ */

/* Radar sweep hero background */
@keyframes sr-radar-sweep {
  0% {
    transform: rotate(0deg);
    opacity: 0.6;
  }
  25% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
  75% {
    opacity: 0.9;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.6;
  }
}

@keyframes sr-radar-ping {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes sr-float-particle {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.4;
  }
  25% {
    transform: translateY(-8px) translateX(4px);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-4px) translateX(-3px);
    opacity: 0.6;
  }
  75% {
    transform: translateY(-12px) translateX(6px);
    opacity: 0.9;
  }
}

@keyframes sr-hero-glow-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

/* Hero section with radar sweep */
.sr-hero,
.sr-hero-section,
.hero-sr-main,
.hero-main {
  position: relative !important;
  overflow: hidden !important;
}

/* Radar sweep overlay — continuous animation */
.sr-hero::before,
.hero-sr-main::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 800px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, transparent 30%, rgba(37, 99, 235, 0.05) 60%, transparent 70%),
    conic-gradient(from 0deg, transparent 0deg, rgba(212, 175, 55, 0.15) 30deg, transparent 60deg);
  animation: sr-radar-sweep 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* Second radar sweep layer — offset timing */
.sr-hero::after,
.hero-sr-main::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, transparent 40%, rgba(212, 175, 55, 0.08) 65%, transparent 75%),
    conic-gradient(from 180deg, transparent 0deg, rgba(37, 99, 235, 0.12) 45deg, transparent 90deg);
  animation: sr-radar-sweep 12s linear infinite reverse;
  pointer-events: none;
  z-index: 1;
}

/* Hero content above the sweep */
.sr-hero .hero-content,
.sr-hero .hero-text,
.sr-hero .hero-headline,
.sr-hero h1 {
  position: relative !important;
  z-index: 10 !important;
}

/* Floating settlement particles */
.sr-hero-particles,
.hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #d4af37;
  border-radius: 50%;
  animation: sr-float-particle var(--particle-duration, 6s) ease-in-out infinite;
  animation-delay: var(--particle-delay, 0s);
  opacity: 0.5;
}

.particle:nth-child(1) { left: 10%; top: 20%; --particle-duration: 7s; --particle-delay: 0s; }
.particle:nth-child(2) { left: 20%; top: 60%; --particle-duration: 5s; --particle-delay: 1s; }
.particle:nth-child(3) { left: 35%; top: 30%; --particle-duration: 8s; --particle-delay: 0.5s; }
.particle:nth-child(4) { left: 50%; top: 70%; --particle-duration: 6s; --particle-delay: 2s; }
.particle:nth-child(5) { left: 65%; top: 25%; --particle-duration: 9s; --particle-delay: 1.5s; }
.particle:nth-child(6) { left: 75%; top: 55%; --particle-duration: 7s; --particle-delay: 0.8s; }
.particle:nth-child(7) { left: 85%; top: 40%; --particle-duration: 5.5s; --particle-delay: 1.2s; }
.particle:nth-child(8) { left: 90%; top: 80%; --particle-duration: 7.5s; --particle-delay: 0.3s; }

/* Hero ambient glow */
.sr-hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
  animation: sr-hero-glow-pulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Trust bar shimmer effect */
@keyframes sr-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.sr-stats-bar,
.sr-trust-bar {
  background-size: 200% 100%;
  animation: sr-shimmer 8s ease-in-out infinite;
}

/* Live counter animation */
.sr-live-counter,
.live-filing-counter {
  display: inline-block;
  animation: sr-hero-glow-pulse 2s ease-in-out infinite;
}

/* Trust bar FOMO numbers — gold color */
.sr-trust-bar .fomo-stat,
.sr-stats-bar .stat-number,
.stats-number {
  color: #d4af37 !important; /* gold — premium feel */
  -webkit-text-fill-color: #d4af37 !important;
  font-weight: 700 !important;
}

/* Homepage entrance animation for hero content */
.sr-hero h1,
.sr-hero .hero-headline {
  animation: sr-hero-text-enter 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(20px);
}

.sr-hero h2,
.sr-hero .hero-subtitle {
  animation: sr-hero-text-enter 800ms cubic-bezier(0.16, 1, 0.3, 1) 150ms forwards;
  opacity: 0;
  transform: translateY(16px);
}

.sr-hero .hero-cta,
.sr-hero .hero-buttons {
  animation: sr-hero-text-enter 800ms cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards;
  opacity: 0;
  transform: translateY(12px);
}

@keyframes sr-hero-text-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Featured settlement cards — staggered entrance */
.sr-featured-grid > * {
  opacity: 0;
  transform: translateY(24px);
  animation: sr-card-enter 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sr-featured-grid > *:nth-child(1) { animation-delay: 100ms; }
.sr-featured-grid > *:nth-child(2) { animation-delay: 200ms; }
.sr-featured-grid > *:nth-child(3) { animation-delay: 300ms; }
.sr-featured-grid > *:nth-child(4) { animation-delay: 400ms; }

@keyframes sr-card-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PART 3: SETTLEMENT CARD MOTION — Ripple, Flip, Score Reveal
   ══════════════════════════════════════════════════════════════════════════ */

/* Settlement card base — lift on hover */
.sr-card,
.settlement-card,
.sr-settlement-card {
  transition:
    transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 200ms ease;
}

@media (hover: hover) {
  .sr-card:hover,
  .settlement-card:hover,
  .sr-settlement-card:hover {
    transform: translateY(-4px) !important;
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.12),
      0 4px 12px rgba(0, 0, 0, 0.08),
      0 0 0 1px rgba(37, 99, 235, 0.1) !important;
    border-color: rgba(37, 99, 235, 0.2) !important;
  }
}

/* Radar ripple on card click */
@keyframes sr-card-ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.sr-card-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.3);
  width: 60px;
  height: 60px;
  pointer-events: none;
  animation: sr-card-ripple 600ms ease-out forwards;
}

/* Card flip animation for settlement details */
.sr-card-flip-container,
.settlement-card-flip {
  perspective: 1000px;
}

.sr-card-flip-front,
.sr-card-flip-back {
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.sr-card-flip-back {
  transform: rotateY(180deg);
}

.sr-card-flip-container.flipped .sr-card-flip-front {
  transform: rotateY(-180deg);
}

.sr-card-flip-container.flipped .sr-card-flip-back {
  transform: rotateY(0deg);
}

/* Score reveal — count up animation */
.sr-score-reveal,
.score-number {
  display: inline-block;
  position: relative;
}

.sr-score-reveal::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
  animation: sr-score-shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sr-score-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Score gauge arc reveal */
.sr-score-gauge {
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sr-score-gauge.animated {
  stroke-dashoffset: var(--score-target, 0);
}

/* Settlement card category badge animation */
.sr-card .category-badge {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sr-card:hover .category-badge {
  transform: scale(1.05);
}

/* Payout amount premium gold highlight */
.sr-card .payout-amount,
.settlement-payout {
  color: #d4af37 !important;
  -webkit-text-fill-color: #d4af37 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(212, 175, 55, 0.2);
}

/* Filing deadline urgency pulse */
.sr-card .filing-deadline,
.deadline-urgent {
  color: #dc2626 !important;
  font-weight: 600 !important;
  animation: sr-deadline-pulse 2s ease-in-out infinite;
}

@keyframes sr-deadline-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Swipe support on mobile */
@media (max-width: 768px) {
  .sr-card-swipe-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .sr-card-swipe-container::-webkit-scrollbar {
    display: none;
  }

  .sr-card-swipe-item {
    scroll-snap-align: start;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PART 4: CONFETTI + CHECKOUT FLOW MOTION
   ══════════════════════════════════════════════════════════════════════════ */

/* Confetti container */
#confetti-container,
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  animation: sr-confetti-fall var(--confetti-duration, 3s) ease-out forwards;
  animation-delay: var(--confetti-delay, 0s);
  top: -20px;
  left: var(--confetti-x, 50%);
  transform: rotate(var(--confetti-rotate, 0deg));
}

@keyframes sr-confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Confetti colors */
.confetti-piece.gold { background: #d4af37; }
.confetti-piece.blue { background: #2563eb; }
.confetti-piece.white { background: #ffffff; }
.confetti-piece.green { background: #22c55e; }
.confetti-piece.navy { background: #0f172a; }

/* Checkout progress bar animation */
.sr-checkout-progress {
  height: 4px;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}

.sr-checkout-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #d4af37);
  border-radius: 9999px;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}

.sr-checkout-progress-fill.active {
  width: var(--progress-target, 100%);
}

/* Checkout step transitions */
.sr-checkout-step {
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sr-checkout-step.active {
  opacity: 1;
  transform: translateX(0);
}

.sr-checkout-step.exiting {
  opacity: 0;
  transform: translateX(-20px);
}

/* Success state celebration */
.sr-success-celebration {
  animation: sr-success-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes sr-success-pop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* Success particle burst */
@keyframes sr-particle-burst {
  0% {
    transform: scale(0) translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate(var(--burst-x, 50px), var(--burst-y, -80px));
    opacity: 0;
  }
}

.success-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: sr-particle-burst 800ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

/* ══════════════════════════════════════════════════════════════════════════
   PART 5: PREMIUM POLISH — Scrollbar, Selection, Focus, Scroll
   ══════════════════════════════════════════════════════════════════════════ */

/* Custom scrollbar — matches brand */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
  border: 2px solid #f1f5f9;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Dark background scrollbar */
.dark-theme ::-webkit-scrollbar-thumb,
[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: #475569;
}

.dark-theme ::-webkit-scrollbar-thumb:hover,
[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Selection color — brand gold */
::selection {
  background: rgba(212, 175, 55, 0.25) !important;
  color: inherit !important;
}

::-moz-selection {
  background: rgba(212, 175, 55, 0.25) !important;
  color: inherit !important;
}

/* Custom focus ring — gold, not default blue */
:focus-visible {
  outline: 2px solid #d4af37 !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* Button focus state — gold ring */
button:focus-visible,
a.btn:focus-visible,
input[type='submit']:focus-visible {
  outline: 2px solid #d4af37 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2) !important;
}

/* Form input focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #d4af37 !important;
  outline-offset: 2px !important;
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15) !important;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .sr-hero::before,
  .sr-hero::after,
  .sr-hero-glow,
  .particle,
  .sr-stats-bar,
  .sr-live-counter {
    animation: none !important;
  }

  .sr-card:hover,
  .ms-btn:hover {
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PART 6: MOBILE 375px FINAL POLISH
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 375px) {
  /* Typography — no smaller than 16px body */
  body,
  p,
  li,
  span:not([class*='icon']):not([aria-hidden]) {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  h1 { font-size: 28px !important; line-height: 1.15 !important; }
  h2 { font-size: 24px !important; line-height: 1.2 !important; }
  h3 { font-size: 20px !important; line-height: 1.25 !important; }

  /* Touch targets — 44px minimum */
  a, button, [role='button'] {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* Full-width CTAs on mobile */
  .sr-btn-primary,
  .sr-btn--primary,
  [class*='cta-primary'],
  .btn-primary,
  .pr-cta--blue,
  .pr-cta--purple,
  .pr-cta--gold {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Remove horizontal overflow */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Hamburger menu smooth animation */
  .nav-hamburger,
  .sr-hamburger {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .nav-hamburger span,
  .sr-hamburger span {
    transition: transform 300ms ease, opacity 300ms ease;
  }

  /* Hamburger → X animation */
  .nav-hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .nav-hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .nav-hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Mobile bottom sticky CTA — always visible */
  .sr-mobile-sticky-cta,
  .mobile-sticky-cta,
  [class*='sticky-cta'] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    padding: 12px 16px !important;
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  /* Ensure sticky CTA button is visible and full-width */
  .sr-mobile-sticky-cta .cta-btn,
  .mobile-sticky-cta button {
    width: 100% !important;
    background: #2563eb !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    min-height: 48px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
  }

  /* FAB — bottom right, above sticky CTA */
  .sr-fab,
  .fab-action-button {
    position: fixed !important;
    bottom: 80px !important;
    right: 16px !important;
    z-index: 999 !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: #d4af37 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Bottom tab bar */
  .sr-bottom-tab-bar,
  .mobile-tab-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  .sr-bottom-tab-bar a,
  .mobile-tab-bar a {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 64px !important;
    color: #64748b !important;
    font-size: 12px !important;
    text-decoration: none !important;
    gap: 4px !important;
  }

  .sr-bottom-tab-bar a.active,
  .mobile-tab-bar a.active {
    color: #2563eb !important;
  }

  /* Settlement cards on mobile — no horizontal scroll */
  .sr-card,
  .settlement-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  /* Card internal content — no overflow */
  .sr-card__content,
  .settlement-card-body {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Pricing cards on mobile — stack properly */
  .pr-plan-card {
    width: 100% !important;
    margin-bottom: 16px !important;
    border-radius: 12px !important;
  }

  /* Hero section on mobile */
  .sr-hero {
    padding: 80px 16px 40px !important;
  }

  .sr-hero h1 {
    font-size: 32px !important;
  }

  /* Category pills on mobile */
  .sr-filter-tab,
  .monthly-nav-pill {
    font-size: 13px !important;
    padding: 8px 14px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }

  /* No zoom on input focus (prevents iOS auto-zoom) */
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='tel'],
  input[type='number'],
  input[type='search'],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PART 7: AUTHORITY FEEL — Fortune 500 Visual Sophistication
   ══════════════════════════════════════════════════════════════════════════ */

/* Section breathing room — generous whitespace */
.sr-section,
section[class*='sr-section'],
.sr-content-section {
  padding: 80px 0 !important;
}

@media (max-width: 768px) {
  .sr-section,
  section[class*='sr-section'],
  .sr-content-section {
    padding: 48px 16px !important;
  }
}

/* Premium card shadow */
.sr-card-premium,
.settlement-card.premium {
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  border: none !important;
}

/* Gold CTA — premium attention */
.sr-cta-gold,
.sr-btn-gold,
[class*='cta-gold'] {
  background: linear-gradient(135deg, #d4af37 0%, #b8962e 100%) !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3) !important;
  transition:
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (hover: hover) {
  .sr-cta-gold:hover,
  .sr-btn-gold:hover {
    transform: scale(1.03) translateY(-2px) !important;
    box-shadow: 0 8px 32px rgba(212, 175, 55, 0.4) !important;
  }
}

/* Premium divider */
.sr-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb 20%, #e5e7eb 80%, transparent);
  border: none;
  margin: 48px 0;
}

/* Nav link underline slide animation */
.sr-nav-link,
.nav-link,
header nav a {
  position: relative;
}

.sr-nav-link::after,
.nav-link::after,
header nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #d4af37;
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sr-nav-link:hover::after,
.nav-link:hover::after,
header nav a:hover::after {
  width: 100%;
}

/* Premium badge — Best Value */
.sr-best-value-badge,
.best-value-badge {
  background: linear-gradient(135deg, #d4af37, #b8962e) !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  padding: 4px 16px !important;
  font-size: 13px !important;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Best Value badge bounce animation */
.sr-best-value-badge {
  animation: sr-badge-bounce 2s ease-in-out infinite;
}

@keyframes sr-badge-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Annual savings calculator — animated number */
.sr-annual-savings {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pricing toggle animation */
.sr-pricing-toggle {
  width: 56px;
  height: 28px;
  border-radius: 9999px;
  background: #e5e7eb;
  position: relative;
  cursor: pointer;
  transition: background 300ms ease;
}

.sr-pricing-toggle.active {
  background: #2563eb;
}

.sr-pricing-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sr-pricing-toggle.active::after {
  transform: translateX(28px);
}

/* Success/Won state — green premium */
.sr-settlement-won,
.settlement-status-won {
  color: #ffffff !important;
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  padding: 4px 16px !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
}

/* Loading skeleton shimmer */
@keyframes sr-skeleton-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.sr-skeleton,
.skeleton-loading {
  background: linear-gradient(90deg, #f1f5f9 25%, #e8eef6 37%, #f1f5f9 63%);
  background-size: 800px 100%;
  animation: sr-skeleton-shimmer 1.8s ease-in-out infinite;
  border-radius: 6px;
}

/* Smooth page load fade */
body {
  animation: sr-page-load 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes sr-page-load {
  from {
    opacity: 0.96;
  }
  to {
    opacity: 1;
  }
}