/* =====================================================================
   DID EDITORIAL OVERRIDE for the product detail pages (/products/*).
   Loaded AFTER each page's styles.css + did-suite-style.css so it wins.
   Re-themes the suite to the main-site light editorial palette (#f7f4f0 +
   navy text + restrained blue accents + Space Grotesk) WITHOUT changing
   any page content/copy.
   ===================================================================== */

:root {
  /* per-product styles.css var names (shared across the suite) */
  --bg-primary: #f7f4f0;
  --bg-secondary: #ffffff;
  --accent-blue: #1E6FFF;
  --accent-purple: #0B3FBF;   /* unify purple/gold accents to the text-safe navy accent */
  --text-primary: #080d24;
  --text-secondary: #2d3147;
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(8, 13, 36, 0.1);
  /* shared did-suite-style.css var names */
  --did-blue: #1E6FFF;
  --did-blue-deep: #0B3FBF;
  --did-teal: #6EC1FF;
  --did-bg: #f7f4f0;
  --did-panel: rgba(255, 255, 255, 0.72);
  --did-border: rgba(8, 13, 36, 0.1);
  --did-text: #080d24;
  --did-muted: #2d3147;
}

html {
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 244, 228, 0.92), transparent 26%),
    radial-gradient(circle at 67% 65%, rgba(221, 191, 255, 0.58), transparent 30%),
    linear-gradient(135deg, #f7f4f0 0%, #ebe9f5 42%, #f8f1ea 100%);
}
body {
  background: transparent !important;
  color: #080d24;
  -webkit-font-smoothing: antialiased;
}

/* the old cinematic backdrop canvas + vignette are retired; hide them for any
   page markup that still includes the tags rather than requiring an HTML edit */
.did-canvas { display: none !important; }
.did-vignette { display: none !important; }

/* display type → Space Grotesk */
h1, h2, h3, .section-title, .hero h1, .hero-title, .hero-section h1, .logo-text, .did-suite-product-name {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.01em;
}

/* accent text colors that were hardcoded cyan/purple → text-safe navy */
[style*="color: #00d4ff"], [style*="color:#00d4ff"],
[style*="color: #a855f7"], [style*="color:#a855f7"] { color: #0B3FBF !important; }

/* inline white text (readable on the old dark bg, invisible on the new light one) */
[style*="color: white"], [style*="color:white"],
[style*="color: #fff"], [style*="color:#fff"],
[style*="color: #ffffff"], [style*="color:#ffffff"],
[style*="color: #FFFFFF"], [style*="color:#FFFFFF"] { color: #080d24 !important; }

/* primary buttons → DID near-black CTA + glow (matches .pill-primary on the main site) */
.btn-primary, .btn-primary-small, .pricing-btn, button.btn-primary, .btn-cta, .cta-button {
  background: #070b20 !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: 0 22px 64px rgba(17, 24, 39, 0.24), 0 0 40px rgba(188, 77, 255, 0.22) !important;
}
.btn-primary:hover, .btn-primary-small:hover, .pricing-btn:hover, .btn-cta:hover, .cta-button:hover {
  background: #151a38 !important;
  box-shadow: 0 26px 72px rgba(17, 24, 39, 0.3), 0 0 48px rgba(188, 77, 255, 0.3) !important;
}
.btn-secondary {
  border: 1px solid var(--glass-border) !important;
  color: #080d24 !important;
  background: rgba(255, 255, 255, 0.68) !important;
}
.btn-secondary:hover { border-color: rgba(126, 87, 255, 0.38) !important; box-shadow: 0 18px 44px rgba(90, 77, 140, 0.18) !important; }

/* navbar → translucent light + blur (matches main site) */
.navbar, .nav, .nav-inner {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

/* cards / panels → DID light glass + blue glow on hover */
.card, .feature-card, .pricing-card, .glass-panel, .pain-card, .trust-card, .testimonial-card, .stat-item {
  border-color: var(--glass-border) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 18px 58px rgba(90, 77, 140, 0.1) !important;
}
.card:hover, .feature-card:hover, .pricing-card:hover, .pain-card:hover, .trust-card:hover, .testimonial-card:hover {
  border-color: rgba(30, 111, 255, 0.35) !important;
  box-shadow: 0 24px 74px rgba(90, 77, 140, 0.16) !important;
}
.pricing-card.featured, .pricing-card.popular, .pricing-card.highlighted {
  border-color: rgba(30, 111, 255, 0.5) !important;
  box-shadow: 0 0 44px rgba(30, 111, 255, 0.2) !important;
}

/* accent rules / dividers / gradients that were cyan/purple-on-white text */
.gradient-text, .text-gradient {
  background: linear-gradient(135deg, #080d24 0%, #1E6FFF 60%, #0B3FBF 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
}
a { color: #0B3FBF; }
::selection { background: rgba(30, 111, 255, 0.35); color: #fff; }

/* did-suite-style.css nav/menu text that was set light-on-dark with !important */
.did-suite-product-name {
  color: #0B3FBF !important;
  background: rgba(30, 111, 255, 0.08) !important;
  border-color: rgba(30, 111, 255, 0.3) !important;
}
.did-suite-products-panel a.did-suite-products-parent { color: #080d24 !important; }
.did-suite-products-panel a.did-suite-products-child { border-left-color: rgba(8, 13, 36, 0.12) !important; }
.nav-links a:hover,
.did-suite-products-menu summary:hover {
  color: #0B3FBF !important;
  background: rgba(30, 111, 255, 0.09) !important;
}
.mobile-menu-btn {
  border-color: rgba(8, 13, 36, 0.14) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #080d24 !important;
}

/* per-product styles.css hero backdrop: a hardcoded near-black radial gradient
   (rgba(10,10,12,1)) laid over the hero, independent of the --bg-* variables above */
.gradient-bg {
  background: radial-gradient(circle at 50% 30%, rgba(30, 111, 255, 0.1) 0%, transparent 60%) !important;
}

/* mobile nav dropdown, hardcoded dark navy independent of the --bg-* variables */
.nav-links.active {
  background: rgba(255, 255, 255, 0.92) !important;
}

/* intentionally left dark: .code-block (code-editor mockup) and .dashboard-header/
   .main-dashboard (a framed screenshot of an actual dark-mode app UI) are product
   mockups representing real dark-themed dashboards, not page background — unrelated
   to the page's own light theme and left as authored. */