/* ═══════════════════════════════════════════════════════════════
   VOID — XESPOOL marketing design system
   Scoped under body.void-page so it can't bleed into app pages.
   Override the site.css blue tokens with void-pink equivalents.
   ═══════════════════════════════════════════════════════════════ */

/* ── Token overrides ───────────────────────────────────────────── */
body.void-page {
  --primary:       #f02070;
  --primary-light: #f84f8f;
  --primary-dark:  #b8003a;
  --accent:        #f02070;
  --good:          #f02070;
  --bg-dark:       #080808;
  --bg-darker:     #0e0e0e;
  --bg-card:       #141414;
  --border:        rgba(255, 255, 255, 0.07);
  --text:          #ebebeb;
  --text-muted:    #999;
  --text-dim:      #666;

  background: #080808 !important;
  color: #ebebeb !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Navbar ─────────────────────────────────────────────────────── */
body.void-page .navbar {
  background: rgba(8, 8, 8, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(12px);
}
body.void-page .navbar.scrolled {
  background: rgba(8, 8, 8, 0.98) !important;
}
body.void-page .nav-logo { color: #ebebeb !important; }
body.void-page .nav-logo .speakr-mark,
body.void-page .nav-logo span {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.02em !important;
  color: #ebebeb !important;
  text-shadow: none !important;
}
body.void-page .nav-logo .speakr-mark::before { display: none; }
body.void-page .nav-links a {
  color: #888 !important;
  font-weight: 500;
}
body.void-page .nav-links a:hover { color: #ebebeb !important; }
body.void-page .nav-start-btn {
  background: #f02070 !important;
  color: #fff !important;
  padding: 8px 20px !important;
  font-weight: 700 !important;
  font-size: 0.86rem !important;
  letter-spacing: 0.02em !important;
  border-radius: 0 !important;
  border: none !important;
}
body.void-page .nav-start-btn:hover { opacity: 0.88 !important; text-decoration: none !important; }
body.void-page .mobile-menu-btn { color: #ebebeb !important; }

/* ── Section titles ──────────────────────────────────────────────── */
body.void-page .section-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(1.9rem, 3.5vw, 3rem) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.03em !important;
  color: #ebebeb !important;
  line-height: 0.97 !important;
  margin-bottom: 1rem !important;
}
body.void-page .section-title::after { display: none !important; }
body.void-page .section-subtitle {
  color: #888 !important;
  max-width: 44em !important;
  font-size: 0.98rem !important;
  line-height: 1.75 !important;
}

/* ── Hero banners (about, guidelines, contact pages) ─────────────── */
body.void-page .about-hero,
body.void-page .contact-hero {
  background: #080808 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding: 7rem 0 3rem !important;
  text-align: left !important;
  position: relative;
}
body.void-page .about-hero::before,
body.void-page .contact-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 0% 50%, rgba(240,32,112,0.05), transparent 65%);
  pointer-events: none;
}
body.void-page .about-hero .container,
body.void-page .contact-hero .container { position: relative; z-index: 1; }
body.void-page .about-hero h1,
body.void-page .contact-hero h1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.03em !important;
  line-height: 0.97 !important;
  color: #ebebeb !important;
  margin-bottom: 1rem !important;
}
body.void-page .about-hero h1 em,
body.void-page .about-hero .page-title-em { color: #f02070 !important; font-style: normal !important; }
body.void-page .about-hero .page-subtitle,
body.void-page .contact-hero .page-subtitle {
  font-style: normal !important;
  color: #888 !important;
  font-size: 1.05rem !important;
  max-width: 46em !important;
  line-height: 1.75 !important;
}
/* Page label — monospace tag above headings */
body.void-page .page-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
  color: #f02070 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  margin-bottom: 1rem !important;
  display: block !important;
}

/* ── Main content backgrounds ──────────────────────────────────────── */
body.void-page .about-content,
body.void-page .contact-content {
  background: #080808 !important;
}
body.void-page .contact-intro {
  text-align: left !important;
  max-width: 800px !important;
  margin: 0 0 4rem !important;
}
body.void-page .contact-intro p,
body.void-page .about-text p {
  color: #999 !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
}
body.void-page .about-intro { margin-bottom: 4rem !important; }

/* ── Reasons section ──────────────────────────────────────────────── */
body.void-page .reasons-section { padding: 0 !important; margin-top: 5rem !important; }
body.void-page .reasons-section .section-title { margin-bottom: 1.5rem !important; }
body.void-page .reasons-list li {
  color: #999 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 1.25rem 0 1.25rem 2.5rem !important;
  margin-bottom: 0 !important;
}
body.void-page .reasons-list li::before {
  content: "//" !important;
  color: #f02070 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  top: 1.35rem !important;
  left: 0 !important;
}
body.void-page .reasons-list strong {
  color: #ebebeb !important;
  font-weight: 700 !important;
}

/* ── Feature cards ─────────────────────────────────────────────────── */
body.void-page .features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  margin-top: 3rem !important;
}
body.void-page .feature-card {
  background: #0e0e0e !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2.5rem !important;
  position: relative;
}
body.void-page .feature-card::before { display: none !important; }
body.void-page .feature-card:hover { border-color: transparent !important; box-shadow: none !important; }
body.void-page .feature-card:hover::before { display: none !important; }
body.void-page .feature-icon img { filter: grayscale(1) !important; opacity: 0.25 !important; }
body.void-page .feature-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #ebebeb !important;
  margin-bottom: 0.6rem !important;
}
body.void-page .feature-title::before {
  content: '// ';
  color: #f02070;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
}
body.void-page .feature-description { color: #888 !important; font-size: 0.9rem !important; line-height: 1.7 !important; }

/* ── About-intro grid ──────────────────────────────────────────────── */
body.void-page .about-intro .about-text { max-width: 76ch !important; }

/* ── Tier ladder (guidelines) ──────────────────────────────────────── */
body.void-page .tier-ladder {
  list-style: decimal !important;
  padding-left: 2rem !important;
  color: #888 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.88rem !important;
  line-height: 2 !important;
}
body.void-page .tier-ladder li:last-child,
body.void-page .tier-ladder li:nth-child(20) { color: #f02070 !important; }
body.void-page .tier-ladder em { color: #888 !important; }

/* ── Policy pages ──────────────────────────────────────────────────── */
body.void-page.policy-page {
  background: #080808 !important;
  padding-top: 6rem !important;
}
body.void-page .policy-page > .container,
body.void-page > .container.policy-container {
  font-family: 'Inter', sans-serif !important;
  color: #999 !important;
}
body.void-page .policy-page > .container h1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 2.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: -0.03em !important;
  color: #ebebeb !important;
  margin-bottom: 0.5rem !important;
}
body.void-page .policy-page > .container h2 {
  color: #ebebeb !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 2.5rem 0 0.75rem !important;
  border-left: 2px solid #f02070;
  padding-left: 0.75rem;
}
body.void-page .policy-page > .container p,
body.void-page .policy-page > .container li { color: #888 !important; line-height: 1.75 !important; }
body.void-page .policy-page > .container a { color: #f02070 !important; }
body.void-page .policy-page > .container .meta { color: #666 !important; font-family: 'JetBrains Mono', monospace !important; font-size: 0.8rem !important; }

/* ── Footer ──────────────────────────────────────────────────────── */
body.void-page .footer {
  background: #080808 !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  color: #ebebeb !important;
}
body.void-page .footer-logo.speakr-mark span,
body.void-page .footer-logo span {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.02em !important;
  color: #ebebeb !important;
}
body.void-page .footer-logo-img { display: none !important; }
body.void-page .footer-tagline {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.78rem !important;
  color: #555 !important;
}
body.void-page .footer-email { color: #888 !important; font-size: 0.86rem !important; }
body.void-page .footer-email:hover { color: #f02070 !important; text-decoration: none !important; }
body.void-page .footer-heading {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.7rem !important;
  text-transform: lowercase !important;
  letter-spacing: 0.1em !important;
  color: #f02070 !important;
  font-weight: 400 !important;
}
body.void-page .footer-links a { color: #666 !important; font-size: 0.86rem !important; }
body.void-page .footer-links a:hover { color: #ebebeb !important; text-decoration: none !important; }
body.void-page .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  color: #444 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.76rem !important;
}
body.void-page .footer-bottom p { color: #444 !important; }

/* ── Links ───────────────────────────────────────────────────────── */
body.void-page .about-text a,
body.void-page .about-content a,
body.void-page .reasons-section a { color: #f02070 !important; }
body.void-page .about-text a:hover,
body.void-page .about-content a:hover { opacity: 0.8 !important; }

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.void-page .features-grid { grid-template-columns: 1fr !important; }
  body.void-page .about-hero { padding: 5rem 0 2.5rem !important; }
}