/* ============================================================
   SoSocial — V2 page theme for ALL marketing pages (except the
   untouched original index.html). Loaded after redesign-v2.css.
   Turns light feature/pricing/legal pages into the same dark,
   living-backdrop look as index-v2 without rewriting markup.
   ============================================================ */

/* Kill page-local light body backgrounds */
body.rd { background: var(--rd-ink) !important; color: var(--rd-text) !important; }
body.rd > *:not(.rd-bg):not(#pt-overlay) { position: relative; z-index: 1; }

/* ─── Typography utilities used across feature pages ─── */
body.rd .text-slate-900,
body.rd .text-slate-800,
body.rd .text-slate-700 { color: #eef1f8 !important; }
body.rd .text-slate-600,
body.rd .text-slate-500 { color: rgba(238,241,248,0.62) !important; }
body.rd .text-slate-400,
body.rd .text-slate-300 { color: rgba(238,241,248,0.45) !important; }
body.rd h1, body.rd h2, body.rd h3, body.rd h4 { color: #fff; }
body.rd p { color: rgba(238,241,248,0.72); }

/* ─── Section / surface backgrounds → transparent glass ─── */
body.rd section,
body.rd .section-coral-bg,
body.rd .section-dark-bg {
  background: transparent !important;
  background-image: none !important;
}
body.rd section:nth-of-type(even)::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 18% 28%, rgba(8,9,15,0.1), rgba(8,9,15,0.62) 72%),
    linear-gradient(180deg, rgba(8,9,15,0.45) 0%, rgba(8,9,15,0.12) 42%, rgba(8,9,15,0.55) 100%);
}
body.rd section { position: relative; }
body.rd section > * { position: relative; z-index: 1; }

/* ─── Cards / bentos / FAQ ─── */
body.rd .bento-card,
body.rd .card,
body.rd .card-featured,
body.rd .faq-card,
body.rd .ed-faq__item {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 20px 50px -30px rgba(0,0,0,0.55) !important;
  color: var(--rd-text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.rd .card-featured { border-color: var(--rd-coral) !important; }
body.rd .bento-card.dark,
body.rd .bento-card.indigo-tint,
body.rd .bento-card.emerald-tint { background: rgba(255,255,255,0.06) !important; }

body.rd .ed-faq__q { color: #fff !important; }
body.rd .ed-faq__a { color: rgba(238,241,248,0.65) !important; }
body.rd .ed-faq__item[open] { border-color: rgba(244,63,94,0.35) !important; }

/* ─── Pricing specifics ─── */
body.rd .toggle-track {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
body.rd .toggle-btn.inactive { color: rgba(238,241,248,0.55) !important; }
body.rd .toggle-btn.active { background: rgba(255,255,255,0.14) !important; color: #fff !important; }
body.rd .btn-outline-coral {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.35) !important;
}
body.rd .btn-outline-coral:hover {
  background: rgba(244,63,94,0.15) !important;
  border-color: var(--rd-coral) !important;
  color: #fff !important;
}
body.rd .check-icon { background: rgba(244,63,94,0.15) !important; color: var(--rd-coral) !important; }

/* ─── Section labels / chips ─── */
body.rd .section-label {
  background: rgba(244,63,94,0.12) !important;
  color: var(--rd-coral) !important;
}
body.rd .chip {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.85) !important;
}

/* ─── Feature page helpers ─── */
body.rd .step-num {
  background: rgba(244,63,94,0.15) !important;
  color: var(--rd-coral) !important;
}
body.rd .check-item span,
body.rd .check-item { color: rgba(238,241,248,0.85) !important; }

/* Keep product mockups readable (they're light UI frames) */
body.rd .app-frame,
body.rd .scd,
body.rd .scd-schedule-modal,
body.rd .scd-chat,
body.rd .scd-opt-times,
body.rd .product-shot,
body.rd .hero-mock {
  /* leave mockup internals alone — just ensure they sit above the tint */
  position: relative; z-index: 2;
}

/* ─── Footers (already dark on most pages) ─── */
body.rd footer {
  background: transparent !important;
  position: relative; z-index: 1;
}
body.rd footer::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,9,15,0.2) 0%, rgba(8,9,15,0.55) 100%);
}
body.rd footer > * { position: relative; z-index: 1; }

/* ─── Legal pages ─── */
body.rd .prose,
body.rd article {
  color: rgba(238,241,248,0.78);
}
body.rd .prose a,
body.rd article a { color: var(--rd-coral); }

/* ─── Mobile menu button on dark ─── */
body.rd #mobileMenuBtn { color: #fff !important; }

/* Legal pages had a page-local white scrolled nav — force v2 pill */
body.rd #main-nav.scrolled {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
/* Any nav link (incl. Privacy/Terms "Back to Home") */
body.rd #main-nav a:not(.btn-coral) { color: #fff; }
body.rd #main-nav a:not(.btn-coral):hover { color: var(--rd-coral); }

/* ─── CTA bands that used coral solid bg — keep coral, it's fine ─── */
body.rd section[style*="var(--coral)"],
body.rd section[style*="background:var(--coral)"] {
  background: transparent !important;
}

/* Soften borders that assumed white pages */
body.rd .border-slate-100,
body.rd .border-slate-200,
body.rd .border-slate-800 { border-color: rgba(255,255,255,0.1) !important; }
body.rd .bg-white,
body.rd .bg-slate-50,
body.rd .bg-slate-100 {
  background-color: rgba(255,255,255,0.06) !important;
}
body.rd .bg-indigo-50,
body.rd .bg-cyan-50,
body.rd .bg-emerald-50 {
  background-color: rgba(255,255,255,0.06) !important;
}
body.rd .text-indigo-800,
body.rd .text-cyan-800,
body.rd .text-emerald-800,
body.rd .text-emerald-600 { color: rgba(238,241,248,0.85) !important; }

/* Gradient text helpers already work; ensure warm gradient stays vivid */
body.rd .text-gradient,
body.rd .text-gradient-warm,
body.rd .text-gradient-green {
  -webkit-background-clip: text; background-clip: text; color: transparent;
}