/*
  Schumann Resonance Live — Master Fix v3
  Fixes: scroll blocking, uneven widths, FAQ, app popup design
  MUST load LAST (after sr-layout-lock.css, sr-type-unified.css)
*/

/* ═══════════════════════════════════════════════════════════════
   1. SCROLL FIX — CRITICAL: Force scroll to work
   ═══════════════════════════════════════════════════════════════ */

html {
  overflow-x: clip !important;
  overflow-y: scroll !important;
  height: auto !important;
  position: static !important;
  scroll-behavior: smooth !important;
}

html body,
html body.sr-site,
html body.sr-site.sr-flagship {
  overflow-x: clip !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  touch-action: manipulation !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Site wrapper must flow naturally */
body.sr-site .site-wrapper {
  overflow-x: clip !important;
  overflow-y: visible !important;
  height: auto !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.sr-site main {
  overflow-x: clip !important;
  overflow-y: visible !important;
  flex: 1 1 auto !important;
}

/* Sections must allow scroll */
body.sr-site section,
body.sr-site section[id] {
  overflow-x: clip !important;
  overflow-y: visible !important;
  position: relative !important;
  height: auto !important;
}

/* ALL pointer-events must be auto for content */
body.sr-site .site-wrapper,
body.sr-site main,
body.sr-site section,
body.sr-site footer,
body.sr-site .sr-faq-section,
body.sr-site .sr-faq-list,
body.sr-site .sr-faq-card,
body.sr-site .sr-faq-trigger {
  pointer-events: auto !important;
}

/* Background layers must never block touch */
#world-solar-bg,
#schumann-canvas,
#schumann-bg-canvas,
body > canvas,
.bg-cosmic,
#starfield,
.sr-hero-pro__grid,
.sr-hero-pro__pulse-hook,
.sr-cosmos-scroll-track,
.sr-scroll-cosmos-hint,
.wsb-vignette {
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. EQUAL WIDTHS — No gaps, consistent full-width layout
   ═══════════════════════════════════════════════════════════════ */

/* Override sr-layout-lock 92rem cap — go full width */
body.sr-site .site-wrapper {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.sr-site section[id],
body.sr-site .footer-premium,
body.sr-site .sr-hero-pro,
body.sr-site .sr-aether-hero,
body.sr-site .sr-faq-section,
body.sr-site .sr-seo-section,
body.sr-site .sr-promo-strip,
body.sr-site #dashboard,
body.sr-site #guide,
body.sr-site #about {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Inner containers stay centered with consistent max-width */
body.sr-site .max-w-7xl,
body.sr-site .max-w-5xl,
body.sr-site .max-w-3xl,
body.sr-site .sr-lane,
body.sr-site .sr-hero-pro__shell,
body.sr-site .footer-premium-shell,
body.sr-site .sr-footer-pro__container {
  width: 100% !important;
  max-width: min(80rem, calc(100% - 2rem)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(0.75rem, 2vw, 1.5rem) !important;
  padding-right: clamp(0.75rem, 2vw, 1.5rem) !important;
  box-sizing: border-box !important;
}

/* Nav full width */
body.sr-site .nav-glass {
  width: 100% !important;
  max-width: 100% !important;
}

body.sr-site .nav-glass > .max-w-7xl,
body.sr-site .nav-glass > div {
  max-width: min(80rem, calc(100% - 2rem)) !important;
  margin: 0 auto !important;
}

/* Hero shell slightly wider */
body.sr-site .sr-hero-pro__shell {
  max-width: min(72rem, calc(100% - 2rem)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. CANVAS / BG — Fixed, no layout space
   ═══════════════════════════════════════════════════════════════ */

#schumann-canvas,
#schumann-bg-canvas,
body > canvas,
#world-solar-bg canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

#world-solar-bg {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. FAQ — Accordion fix
   ═══════════════════════════════════════════════════════════════ */

body.sr-site .sr-faq-section {
  overflow: visible !important;
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}

body.sr-site .sr-faq-trigger {
  cursor: pointer !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
  z-index: 2 !important;
}

body.sr-site .sr-faq-answer {
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, padding 0.3s ease !important;
}

body.sr-site .sr-faq-card.open .sr-faq-answer {
  max-height: 60rem !important;
  opacity: 1 !important;
}

body.sr-site .sr-faq-chevron {
  transition: transform 0.3s ease !important;
}

body.sr-site .sr-faq-card.open .sr-faq-chevron {
  transform: rotate(180deg) !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. NO GAPS — Remove spacing inconsistencies
   ═══════════════════════════════════════════════════════════════ */

body.sr-site .sr-hero-pro.sr-aether-hero {
  margin-bottom: 0 !important;
}

body.sr-site .sr-cosmos-scroll-track {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
}

body.sr-site .sr-scroll-cosmos-hint {
  display: none !important;
}

/* Consistent section spacing */
body.sr-site section[id] {
  padding-top: clamp(2rem, 4vw, 3.5rem) !important;
  padding-bottom: clamp(2rem, 4vw, 3.5rem) !important;
}

body.sr-site .sr-hero-pro.sr-aether-hero {
  padding-top: calc(var(--sr-nav-offset, 5.85rem) + 1rem) !important;
  padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. APP PROMO DOCK — Beautiful Premium Design
   ═══════════════════════════════════════════════════════════════ */

.sr-promo-dock {
  position: fixed !important;
  z-index: 10020 !important;
  right: clamp(0.75rem, 2vw, 1.25rem) !important;
  bottom: clamp(4.75rem, 8vh, 5.75rem) !important;
  width: min(26rem, calc(100vw - 1.5rem)) !important;
  border-radius: 1.75rem !important;
  background:
    linear-gradient(170deg, rgba(12, 20, 40, 0.98) 0%, rgba(6, 12, 28, 0.99) 100%) !important;
  border: 1.5px solid rgba(100, 200, 255, 0.15) !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(34, 211, 238, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 2px 0 rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: blur(48px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(48px) saturate(200%) !important;
}

.sr-promo-dock__aurora {
  background:
    radial-gradient(ellipse 100% 80% at 15% -10%, rgba(34, 211, 238, 0.22), transparent 50%),
    radial-gradient(ellipse 80% 60% at 85% 15%, rgba(251, 191, 36, 0.12), transparent 45%),
    radial-gradient(ellipse 90% 50% at 50% 110%, rgba(99, 102, 241, 0.1), transparent 50%) !important;
}

.sr-promo-dock__border {
  background: linear-gradient(160deg,
    rgba(34, 211, 238, 0.5),
    rgba(186, 230, 253, 0.15) 35%,
    rgba(251, 191, 36, 0.35) 65%,
    rgba(168, 85, 247, 0.2)) !important;
}

.sr-promo-dock__head {
  background: linear-gradient(180deg, rgba(15, 25, 50, 0.95), rgba(8, 16, 36, 0.8)) !important;
  border-bottom: 1px solid rgba(100, 200, 255, 0.1) !important;
  padding: 0.9rem 1.1rem 0.75rem !important;
}

.sr-promo-dock__tabs {
  background: rgba(0, 10, 25, 0.85) !important;
  border: 1px solid rgba(100, 200, 255, 0.15) !important;
  border-radius: 0.85rem !important;
  padding: 0.28rem !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.sr-promo-dock__tab {
  border-radius: 0.65rem !important;
  padding: 0.55rem 0.95rem !important;
  font-size: 0.73rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sr-promo-dock__tab.is-active {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.25), rgba(56, 189, 248, 0.15)) !important;
  color: #f0fdfa !important;
  box-shadow: 0 6px 20px rgba(34, 211, 238, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.sr-promo-dock__panel {
  padding: 1.1rem 1.2rem 1.35rem !important;
  background: linear-gradient(180deg, rgba(8, 14, 28, 0.88), rgba(4, 10, 20, 0.95)) !important;
}

.sr-promo-dock__close {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 0.6rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.2s ease !important;
}

.sr-promo-dock__close:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

/* Device mockup */
.sr-promo-dock__device-frame {
  border-radius: 1.15rem !important;
  border: 1px solid rgba(100, 200, 255, 0.16) !important;
  background: linear-gradient(170deg, rgba(3, 10, 25, 0.98), rgba(8, 20, 40, 0.99)) !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
}

.sr-promo-dock__device-bar {
  background: linear-gradient(180deg, rgba(20, 35, 60, 0.6), rgba(10, 20, 40, 0.4)) !important;
  border-bottom: 1px solid rgba(100, 200, 255, 0.08) !important;
  padding: 0.5rem 0.75rem !important;
}

.sr-promo-dock__device-body {
  padding: 0.85rem 0.75rem !important;
}

.sr-promo-dock__device-freq {
  margin: 0.5rem 0 !important;
}

.sr-promo-dock__device-num {
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.35) !important;
  font-variant-numeric: tabular-nums !important;
}

.sr-promo-dock__device-unit {
  font-size: 0.85rem !important;
  color: rgba(251, 191, 36, 0.7) !important;
  font-weight: 600 !important;
  margin-left: 0.25rem !important;
}

/* Badges */
.sr-promo-dock__badges {
  display: flex !important;
  gap: 0.45rem !important;
  margin-bottom: 0.55rem !important;
  flex-wrap: wrap !important;
}

.sr-promo-dock__badge {
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.3rem 0.6rem !important;
  border-radius: 999px !important;
}

.sr-promo-dock__badge--app {
  background: rgba(34, 211, 238, 0.12) !important;
  color: #67e8f9 !important;
  border: 1px solid rgba(34, 211, 238, 0.2) !important;
}

.sr-promo-dock__badge--live {
  background: rgba(34, 197, 94, 0.12) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
}

.sr-promo-dock__badge--live i {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  margin-right: 0.35rem !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7) !important;
  animation: srPromoPulse 2s ease-in-out infinite !important;
}

@keyframes srPromoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.sr-promo-dock__badge--pro {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1)) !important;
  color: #fde68a !important;
  border: 1px solid rgba(251, 191, 36, 0.25) !important;
}

/* Copy */
.sr-promo-dock__highlight {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #67e8f9 !important;
  margin-bottom: 0.25rem !important;
}

.sr-promo-dock__highlight--gold {
  color: #fde68a !important;
}

.sr-promo-dock__title {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #f8fafc !important;
  line-height: 1.25 !important;
  margin-bottom: 0.35rem !important;
}

.sr-promo-dock__body {
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
  color: rgba(186, 230, 253, 0.75) !important;
  margin-bottom: 0.5rem !important;
}

/* Features */
.sr-promo-dock__features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0.85rem 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
}

.sr-promo-dock__features li {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: rgba(220, 240, 255, 0.88) !important;
  padding: 0.5rem 0.7rem !important;
  border-radius: 0.7rem !important;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.05), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid rgba(100, 200, 255, 0.08) !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.sr-promo-dock__features li:hover {
  border-color: rgba(100, 200, 255, 0.18) !important;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(255, 255, 255, 0.03)) !important;
}

.sr-promo-dock__feat-ico {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.65rem !important;
  height: 1.65rem !important;
  border-radius: 0.45rem !important;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(56, 189, 248, 0.08)) !important;
  color: #67e8f9 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(34, 211, 238, 0.1) !important;
}

.sr-promo-dock__features--pro .sr-promo-dock__feat-ico {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.08)) !important;
  color: #fde68a !important;
}

/* Stats */
.sr-promo-dock__stats {
  display: flex !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  margin: 0.75rem 0 !important;
}

.sr-promo-dock__stat {
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(186, 230, 253, 0.5) !important;
  padding: 0.32rem 0.6rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* CTA Buttons */
.sr-promo-dock__cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  width: 100% !important;
  min-height: 3.25rem !important;
  border-radius: 1rem !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease !important;
}

.sr-promo-dock__cta:hover {
  transform: translateY(-2px) !important;
}

.sr-promo-dock__cta--app {
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 40%, #0891b2 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 16px 40px rgba(6, 182, 212, 0.3),
    0 0 0 1px rgba(34, 211, 238, 0.3) inset,
    0 2px 0 rgba(255, 255, 255, 0.2) inset !important;
}

.sr-promo-dock__cta--app:hover {
  box-shadow:
    0 20px 50px rgba(6, 182, 212, 0.4),
    0 0 0 1px rgba(34, 211, 238, 0.4) inset,
    0 2px 0 rgba(255, 255, 255, 0.25) inset !important;
}

.sr-promo-dock__cta--pro {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #d97706 100%) !important;
  color: #1a1a2e !important;
  box-shadow:
    0 16px 40px rgba(245, 158, 11, 0.3),
    0 0 0 1px rgba(251, 191, 36, 0.3) inset,
    0 2px 0 rgba(255, 255, 255, 0.25) inset !important;
}

.sr-promo-dock__cta--pro:hover {
  box-shadow:
    0 20px 50px rgba(245, 158, 11, 0.4),
    0 0 0 1px rgba(251, 191, 36, 0.4) inset,
    0 2px 0 rgba(255, 255, 255, 0.3) inset !important;
}

.sr-promo-dock__cta-shine {
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent) !important;
  animation: srPromoShine 3s ease-in-out infinite !important;
}

@keyframes srPromoShine {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

.sr-promo-dock__sub {
  text-align: center !important;
  font-size: 0.65rem !important;
  color: rgba(186, 230, 253, 0.45) !important;
  margin-top: 0.6rem !important;
}

.sr-promo-dock__note {
  text-align: center !important;
  font-size: 0.68rem !important;
  color: rgba(186, 230, 253, 0.5) !important;
  margin: 0.5rem 0 0.75rem !important;
}

/* Pro hero section */
.sr-promo-dock__pro-hero {
  text-align: center !important;
  margin-bottom: 0.85rem !important;
  padding: 0.5rem 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. FAB BUTTON — Beautiful floating button
   ═══════════════════════════════════════════════════════════════ */

.sr-promo-fab {
  position: fixed !important;
  z-index: 10010 !important;
  right: clamp(0.75rem, 2vw, 1.25rem) !important;
  bottom: clamp(4.75rem, 8vh, 5.75rem) !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 1.25rem !important;
  overflow: hidden !important;
  transform: translateY(130%) scale(0.9) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, visibility 0.4s ease !important;
  cursor: pointer !important;
  background: linear-gradient(160deg, rgba(10, 18, 36, 0.98), rgba(5, 12, 26, 0.99)) !important;
  border: 1.5px solid rgba(100, 200, 255, 0.18) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(34, 211, 238, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(36px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(180%) !important;
}

.sr-promo-fab.is-visible {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.sr-promo-fab:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.6),
    0 0 50px rgba(34, 211, 238, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(100, 200, 255, 0.28) !important;
}

.sr-promo-fab__halo {
  position: absolute !important;
  inset: -2px !important;
  border-radius: inherit !important;
  background: conic-gradient(from 0deg, rgba(34, 211, 238, 0.3), rgba(251, 191, 36, 0.2), rgba(168, 85, 247, 0.2), rgba(34, 211, 238, 0.3)) !important;
  animation: srFabHalo 4s linear infinite !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.sr-promo-fab:hover .sr-promo-fab__halo {
  opacity: 1 !important;
}

@keyframes srFabHalo {
  to { transform: rotate(360deg); }
}

.sr-promo-fab__body {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  padding: 0.7rem 0.9rem !important;
  z-index: 1 !important;
}

.sr-promo-fab__orb {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sr-promo-fab__orb-ring {
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(34, 211, 238, 0.25) !important;
  animation: srFabRing 3s ease-in-out infinite !important;
}

@keyframes srFabRing {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 1; }
}

.sr-promo-fab__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.1rem !important;
}

.sr-promo-fab__eyebrow {
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(186, 230, 253, 0.55) !important;
}

.sr-promo-fab__title {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  letter-spacing: -0.01em !important;
}

.sr-promo-fab__live {
  display: flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  font-size: 0.62rem !important;
  color: rgba(186, 230, 253, 0.65) !important;
}

.sr-promo-fab__live i {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.7) !important;
  animation: srPromoPulse 2s ease-in-out infinite !important;
}

.sr-promo-fab__live strong {
  color: #fbbf24 !important;
  font-weight: 800 !important;
}

.sr-promo-fab__action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 0.7rem !important;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(56, 189, 248, 0.1)) !important;
  border: 1px solid rgba(34, 211, 238, 0.2) !important;
  color: #67e8f9 !important;
  flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. MOBILE (< 768px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  html,
  html body.sr-site {
    overflow-x: clip !important;
    overflow-y: scroll !important;
    touch-action: manipulation !important;
  }

  body.sr-site .site-wrapper,
  body.sr-site main,
  body.sr-site section,
  body.sr-site footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  body.sr-site .max-w-7xl,
  body.sr-site .max-w-5xl,
  body.sr-site .max-w-3xl,
  body.sr-site .sr-lane {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  body.sr-site .footer-premium-grid {
    grid-template-columns: 1fr !important;
  }

  body.sr-site .footer-premium-hero {
    grid-template-columns: 1fr !important;
  }

  body.sr-site .nav-center,
  body.sr-site .nav-center-v2,
  body.sr-site .nav-live-strip,
  body.sr-site .nav-live-strip-v2 {
    display: none !important;
  }

  /* Promo dock full width on mobile */
  .sr-promo-dock {
    right: 0.5rem !important;
    left: 0.5rem !important;
    width: auto !important;
    bottom: 4rem !important;
  }

  .sr-promo-fab {
    right: 0.75rem !important;
    bottom: 4rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   9. TABLET (768px - 1024px)
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  body.sr-site .footer-premium-hero {
    grid-template-columns: 1fr !important;
  }

  body.sr-site .footer-premium-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   10. PRINT
   ═══════════════════════════════════════════════════════════════ */

@media print {
  html, body, body.sr-site {
    overflow: visible !important;
  }
}