/* ============================================================================
   co-mind.ai — NProxima look & feel (theme layer)
   Loaded after styles.css on every page. Restyles the existing markup to match
   nproxima.ai: DM Sans + Manrope, navy / NProxima blue, square corners, thin
   rules, no glow or glass. Content, structure, i18n and dark mode are unchanged.
   Selectors are prefixed with html[data-theme] so they win over styles.css
   (which uses [data-theme="light"] ... !important) without editing it.
   ============================================================================ */

/* --- Fonts (self-hosted, SIL OFL 1.1 — see /assets/fonts/) --- */
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-display: swap; font-weight: 100 1000;
  src: url('/assets/fonts/dm-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-display: swap; font-weight: 100 1000;
  src: url('/assets/fonts/dm-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url('/assets/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url('/assets/fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens: NProxima palette mapped onto co-mind's variables --- */
html[data-theme] {
  --np-navy: #101e35;
  --np-blue: #245af4;
  --np-blue-hover: #1646d5;
  --np-blue-soft: #e9efff;
  --np-blue-on-navy: #92afff;
  --np-ink: #182439;
  --np-muted: #647082;
  --np-line: #d9e0e8;
  --np-pale: #f2f5f9;
  --np-on-navy: #b9c6d8;
  --np-font-body: 'DM Sans', Arial, sans-serif;
  --np-font-display: 'Manrope', Arial, sans-serif;
}
html[data-theme="light"] {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: var(--np-pale);
  --color-bg-card: #ffffff;
  --color-bg-card-hover: #ffffff;
  --color-border: var(--np-line);
  --color-border-hover: #b8c4d4;
  --color-accent: var(--np-blue);
  --color-accent-light: var(--np-blue);
  --color-accent-glow: rgba(36, 90, 244, 0.08);
  --color-text-primary: var(--np-ink);
  --color-text-secondary: var(--np-muted);
  --color-text-muted: #8a94a3;
  --gradient-accent: var(--np-blue);
  --gradient-card: none;
}
html[data-theme="dark"] {
  --color-bg-primary: #0b1527;
  --color-bg-secondary: var(--np-navy);
  --color-bg-card: #13233d;
  --color-bg-card-hover: #172a48;
  --color-border: rgba(185, 198, 216, 0.16);
  --color-border-hover: rgba(185, 198, 216, 0.32);
  --color-accent: #5d85ff;
  --color-accent-light: var(--np-blue-on-navy);
  --color-accent-glow: rgba(93, 133, 255, 0.12);
  --color-text-primary: #f1f5f9;
  --color-text-secondary: var(--np-on-navy);
  --color-text-muted: #8a9bb5;
  --gradient-accent: var(--np-blue);
  --gradient-card: none;
}

/* --- Typography --- */
html[data-theme] body,
html[data-theme] body input,
html[data-theme] body select,
html[data-theme] body textarea,
html[data-theme] body button { font-family: var(--np-font-body) !important; }
html[data-theme] body h1,
html[data-theme] body h2,
html[data-theme] body h3,
html[data-theme] body h4 { font-family: var(--np-font-display) !important; }
html[data-theme] body h1 { font-weight: 500 !important; letter-spacing: -0.045em !important; line-height: 1.08 !important; }
html[data-theme] body h2 { font-weight: 500 !important; letter-spacing: -0.035em !important; line-height: 1.18 !important; }
html[data-theme] body h3 { font-weight: 600 !important; letter-spacing: -0.02em !important; }
/* Headline spans carry font-bold/-extrabold utilities: keep NProxima's lighter display weight */
html[data-theme] body h1 span,
html[data-theme] body h2 span { font-weight: inherit !important; }
/* Gradient headline text becomes solid NProxima blue */
html[data-theme] body .bg-clip-text,
html[data-theme] body .text-transparent.bg-gradient-to-r {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--np-blue) !important;
}
html[data-theme="dark"] body .bg-clip-text,
html[data-theme="dark"] body .text-transparent.bg-gradient-to-r { color: var(--np-blue-on-navy) !important; }

/* --- Square corners everywhere except photos, avatars, icons and toggles --- */
html[data-theme] body .card,
html[data-theme] body .glass-panel,
html[data-theme] body .cta-banner,
html[data-theme] body .btn-primary,
html[data-theme] body .btn-secondary,
html[data-theme] body .badge,
html[data-theme] body .form-input,
html[data-theme] body .radio-option,
html[data-theme] body .nav-dropdown,
html[data-theme] body .hero-video-frame,
html[data-theme] body .trusted-bar,
html[data-theme] body .rounded-lg,
html[data-theme] body .rounded-xl,
html[data-theme] body .rounded-2xl,
html[data-theme] body .rounded-3xl,
html[data-theme] body a.rounded-full,
html[data-theme] body button.rounded-full:not(.theme-toggle),
html[data-theme] body span.rounded-full.badge,
html[data-theme] body iframe,
html[data-theme] body video { border-radius: 0 !important; }

/* --- No glow, glass, orbs or grids: calm editorial surfaces --- */
html[data-theme] body .ambient-orb,
html[data-theme] body .orb-section,
html[data-theme] body .hero-grid-bg,
html[data-theme] body .hero-vignette,
html[data-theme] body .glow,
html[data-theme] body canvas#particles,
html[data-theme] body #particles-canvas,
html[data-theme] body .aurora,
html[data-theme] body [class*="aurora"] { display: none !important; }
html[data-theme] body .hero-section::before,
html[data-theme] body .section-dark::before,
html[data-theme] body .card::before,
html[data-theme] body .cta-banner::before,
html[data-theme] body .cta-banner::after,
html[data-theme] body .btn-primary::before { display: none !important; }
html[data-theme] body .card,
html[data-theme] body .glass-panel,
html[data-theme] body .cta-banner,
html[data-theme] body .badge,
html[data-theme] body .trusted-bar,
html[data-theme] body #footer {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* --- Cards: white surfaces with a thin rule, quiet hover --- */
html[data-theme] body .card {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
}
html[data-theme] body .card:hover {
  transform: none !important;
  border-color: var(--np-blue) !important;
  background: var(--color-bg-card) !important;
}
html[data-theme] body .glass-panel { background: var(--color-bg-card) !important; border: 1px solid var(--color-border) !important; }
html[data-theme] body .cta-banner { background: var(--np-blue-soft) !important; border: 0 !important; }
html[data-theme="dark"] body .cta-banner { background: #15284a !important; }

/* --- Buttons: NProxima solid blue / outlined ink --- */
html[data-theme] body .btn-primary {
  background: var(--np-blue) !important;
  color: #fff !important;
  padding: 15px 25px;
  font-size: 14px;
  font-weight: 600;
}
html[data-theme] body .btn-primary:hover { background: var(--np-blue-hover) !important; box-shadow: none !important; transform: translateY(-2px); }
html[data-theme] body .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--color-text-primary) !important;
  color: var(--color-text-primary) !important;
  padding: 15px 25px;
  font-size: 14px;
  font-weight: 600;
}
html[data-theme] body .btn-secondary:hover { border-color: var(--np-blue) !important; color: var(--np-blue) !important; background: transparent !important; }

/* --- Badges become NProxima "eyebrow" labels --- */
html[data-theme] body .badge {
  border: 0 !important;
  background: var(--np-blue-soft) !important;
  color: var(--np-blue) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  padding: 6px 10px !important;
}
html[data-theme="dark"] body .badge { background: rgba(93, 133, 255, 0.14) !important; color: var(--np-blue-on-navy) !important; }
html[data-theme] body .badge-success { background: #e7f6ee !important; color: #12804a !important; }
html[data-theme] body .badge-warning { background: #fdf3e2 !important; color: #a15c07 !important; }

/* --- Header: flat full-width bar instead of a floating pill --- */
html[data-theme] body #navbar { padding: 0 !important; background: #fff !important; border-bottom: 1px solid var(--np-line); }
html[data-theme="dark"] body #navbar { background: var(--np-navy) !important; border-bottom-color: rgba(185, 198, 216, 0.16); }
html[data-theme] body #navbar .nav-pill {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 18px 0 !important;
}
html[data-theme] body #navbar .xl\:hidden { padding: 14px 0; }
html[data-theme] body #navbar .nav-pill a:not(.btn-primary):not(.endorse-link),
html[data-theme] body #navbar .nav-pill button:not(.theme-toggle) {
  font-weight: 500;
  background: transparent !important;
}
html[data-theme="light"] body #navbar .nav-pill a:not(.btn-primary):not(.endorse-link),
html[data-theme="light"] body #navbar .nav-pill button:not(.theme-toggle) { color: var(--np-ink) !important; }
html[data-theme] body #navbar .nav-pill a:not(.btn-primary):not(.endorse-link):hover { color: var(--np-blue) !important; }
/* CTA in the header: outlined, like NProxima's "Build your AI roadmap" */
html[data-theme] body #navbar .btn-primary {
  background: transparent !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-text-primary) !important;
  padding: 10px 16px !important;
}
html[data-theme] body #navbar .btn-primary:hover { color: var(--np-blue) !important; border-color: var(--np-blue) !important; transform: none; }

/* --- Hero: navy band with white text in both themes --- */
html[data-theme] body .hero-section { background: var(--np-navy) !important; min-height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html[data-theme] body .hero-section h1,
html[data-theme] body .hero-section h2,
html[data-theme] body .hero-section .text-white,
html[data-theme] body .hero-section .text-slate-100,
html[data-theme] body .hero-section .text-slate-200 { color: #fff !important; }
html[data-theme] body .hero-section p,
html[data-theme] body .hero-section .text-slate-300,
html[data-theme] body .hero-section .text-slate-400 { color: #c8d1df !important; }
html[data-theme] body .hero-section .bg-clip-text,
html[data-theme] body .hero-section .text-transparent.bg-gradient-to-r { color: #7999ff !important; }
html[data-theme] body .hero-section .badge { background: transparent !important; color: var(--np-on-navy) !important; padding-left: 0 !important; padding-right: 0 !important; }
html[data-theme] body .hero-section .badge svg { color: var(--np-blue-on-navy); }
html[data-theme] body .hero-section .btn-secondary { border-color: #fff !important; color: #fff !important; }
html[data-theme] body .hero-section .btn-secondary:hover { border-color: var(--np-blue-on-navy) !important; color: var(--np-blue-on-navy) !important; }
html[data-theme] body .hero-section .trusted-bar { background: transparent !important; border: 0 !important; }
html[data-theme] body .hero-section .trusted-label { color: var(--np-on-navy) !important; }

/* --- Sections: pale bands instead of dark gradients --- */
html[data-theme="light"] body .section-dark { background: var(--np-pale) !important; }
html[data-theme="dark"] body .section-dark { background: var(--np-navy) !important; }

/* --- Forms --- */
html[data-theme] body .form-input { border: 1px solid #cbd4e0 !important; background: #fff !important; box-shadow: none !important; }
html[data-theme="dark"] body .form-input { background: #0f1d33 !important; border-color: rgba(185, 198, 216, 0.25) !important; }
html[data-theme] body .form-input:focus { outline: 3px solid #5d85ff !important; outline-offset: 2px; border-color: var(--np-blue) !important; }

/* --- Footer: light with a thin top rule (dark theme keeps navy) --- */
html[data-theme="light"] body #footer { background: #fff !important; border-top: 1px solid var(--np-line) !important; }
html[data-theme="light"] body #footer h4,
html[data-theme="light"] body #footer .text-white { color: var(--np-muted) !important; font-family: var(--np-font-body) !important; font-size: 11px !important; letter-spacing: 0.14em !important; text-transform: uppercase; }
html[data-theme="light"] body #footer a { color: var(--np-ink) !important; }
html[data-theme="light"] body #footer a:hover { color: var(--np-blue) !important; }
html[data-theme="light"] body #footer p,
html[data-theme="light"] body #footer .text-slate-500 { color: var(--np-muted) !important; }
html[data-theme="light"] body #footer .endorse-footer { color: var(--np-muted) !important; border-left-color: var(--np-line) !important; }
html[data-theme="light"] body #footer .endorse-footer .endorse-brand { color: var(--np-ink) !important; }
html[data-theme="dark"] body #footer { background: var(--np-navy) !important; }

/* --- Focus ring, like NProxima --- */
html[data-theme] body a:focus-visible,
html[data-theme] body button:focus-visible { outline: 3px solid #5d85ff !important; outline-offset: 4px; }

/* --- "Trusted by" strip: light logo strip like NProxima's technology strip --- */
html[data-theme="light"] body .trusted-strip { background: #fff !important; border-top: 1px solid var(--np-line) !important; border-bottom: 1px solid var(--np-line) !important; }
html[data-theme="light"] body .trusted-strip::before { display: none !important; }
html[data-theme="light"] body .trusted-strip p { color: var(--np-muted) !important; letter-spacing: 0.14em; font-size: 11px !important; }
html[data-theme="light"] body .trusted-strip .marquee-track img,
html[data-theme="light"] body .trusted-strip .marquee-track img[style*="filter: none"] { filter: grayscale(1) brightness(0.35) !important; opacity: 0.75 !important; }
html[data-theme="light"] body .trusted-strip .marquee-track img:hover { filter: none !important; opacity: 1 !important; }
html[data-theme="light"] body .trusted-strip .marquee-track span { color: var(--np-ink) !important; }
html[data-theme="dark"] body .trusted-strip { background: var(--np-navy) !important; }

/* --- Legal, security and blog article pages: navy header band, like NProxima's page hero --- */
html[data-theme] body.legal-press > section:first-of-type,
html[data-theme] body.press-doc > section:first-of-type {
  background: var(--np-navy) !important;
  padding-top: 130px !important;
  padding-bottom: 56px !important;
  margin-bottom: 40px;
}
html[data-theme] body.legal-press > section:first-of-type h1,
html[data-theme] body.press-doc > section:first-of-type h1 { color: #fff !important; }
html[data-theme] body.legal-press > section:first-of-type p,
html[data-theme] body.press-doc > section:first-of-type p,
html[data-theme] body.press-doc > section:first-of-type span:not(.badge),
html[data-theme] body.press-doc > section:first-of-type time { color: var(--np-on-navy) !important; }
html[data-theme] body.legal-press > section:first-of-type .badge,
html[data-theme] body.press-doc > section:first-of-type .badge { background: transparent !important; color: var(--np-blue-on-navy) !important; padding-left: 0 !important; padding-right: 0 !important; }

/* --- co-mind's violet/indigo accents become NProxima blue --- */
html[data-theme] body .bg-indigo-500,
html[data-theme] body .bg-indigo-600 { background-color: var(--np-blue) !important; }
html[data-theme="light"] body .text-indigo-300,
html[data-theme="light"] body .text-indigo-400,
html[data-theme="light"] body .text-indigo-500 { color: var(--np-blue) !important; }
html[data-theme="light"] body .hover\:text-indigo-300:hover { color: var(--np-blue-hover) !important; }
html[data-theme] body .border-indigo-500,
html[data-theme] body .border-indigo-400 { border-color: var(--np-blue) !important; }
html[data-theme="light"] body .card.\!bg-gradient-to-br { background: var(--np-blue-soft) !important; }
html[data-theme="dark"] body .card.\!bg-gradient-to-br { background: #15284a !important; }

/* --- Risk cards ("Why Private AI Matters"): NProxima numbered columns with a top rule --- */
html[data-theme] body .risk-card {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  border-top: 1px solid var(--np-line) !important;
  background: transparent !important;
  padding: 24px 0 0 !important;
}
html[data-theme] body .risk-card:hover { transform: none !important; border-top-color: var(--np-blue) !important; }
html[data-theme="dark"] body .risk-card { border-top-color: rgba(185, 198, 216, 0.2) !important; }
html[data-theme] body .risk-number { color: var(--np-blue) !important; font-family: var(--np-font-body) !important; }
html[data-theme] body .risk-icon-wrap { border-radius: 0 !important; background: var(--np-blue-soft) !important; color: var(--np-blue) !important; }
html[data-theme] body .card-spotlight { display: none !important; }

/* --- Feature chips: square, quiet --- */
html[data-theme] body .feature-pill {
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--np-line) !important;
  color: var(--color-text-primary) !important;
}
html[data-theme] body .feature-pill:hover { border-color: var(--np-blue) !important; color: var(--np-blue) !important; }
html[data-theme] body .feature-pill .dot { border-radius: 0 !important; background: var(--np-blue) !important; }
html[data-theme="dark"] body .feature-pill { border-color: rgba(185, 198, 216, 0.25) !important; }

/* --- Hero spacing: one consistent rhythm on every page (heroes used to rely on
       100vh + centring or on page-specific padding) --- */
html[data-theme] body .hero-section > div.max-w-7xl,
html[data-theme] body .hero-section > div.relative.z-10 {
  padding-top: 150px !important;
  padding-bottom: 88px !important;
}
@media (max-width: 767px) {
  html[data-theme] body .hero-section > div.max-w-7xl,
  html[data-theme] body .hero-section > div.relative.z-10 { padding-top: 116px !important; padding-bottom: 64px !important; }
}

/* --- More breathing room left and right (NProxima uses ~6% gutters) --- */
html[data-theme] body .px-4.sm\:px-6.lg\:px-8 {
  padding-left: clamp(24px, 5vw, 72px) !important;
  padding-right: clamp(24px, 5vw, 72px) !important;
}

/* ============================================================================
   Enterprise palette — replaces pastel tints (measured: pale-blue fills,
   indigo/violet tints, rainbow 10% icon tiles, mint/beige badges) with
   neutral surfaces, one strong accent, single-colour icons and navy emphasis.
   Red/green are kept only where they carry meaning (problem / solution, status).
   ============================================================================ */
html[data-theme] {
  --ent-tile: #f4f6f9;          /* neutral tile surface */
  --ent-tag-bg: #eef1f5;        /* neutral tag surface */
  --ent-tag-text: #33415c;
  --ent-accent-deep: #1c46c4;   /* accent for small text on light surfaces (AA) */
}
html[data-theme="dark"] { --ent-tile: #172a48; --ent-tag-bg: rgba(185, 198, 216, 0.12); --ent-tag-text: #d3dceb; --ent-accent-deep: var(--np-blue-on-navy); }

/* 1. Badges / tags: neutral, no tinted fills */
html[data-theme] body .badge,
html[data-theme] body .badge-success,
html[data-theme] body .badge-warning {
  background: var(--ent-tag-bg) !important;
  color: var(--ent-tag-text) !important;
  border: 0 !important;
}
html[data-theme] body .badge-accent { color: var(--ent-accent-deep) !important; }
/* Badges directly above headings act as eyebrows: plain text, like NProxima */
html[data-theme] body .badge.mb-4,
html[data-theme] body .badge.mb-6 { background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; color: var(--ent-accent-deep) !important; }

/* 2. Icon tiles: neutral surface + thin rule, single-colour icon */
html[data-theme] body .risk-icon-wrap,
html[data-theme] body .icon-circle,
html[data-theme] body .ind-icon,
html[data-theme] body .deploy-icon,
html[data-theme] body [class*="bg-"][class*="-500/"] {
  background: var(--ent-tile) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-theme] body .risk-icon-wrap svg,
html[data-theme] body .icon-circle svg,
html[data-theme] body .ind-icon svg,
html[data-theme] body .deploy-icon svg { color: var(--np-blue) !important; stroke: currentColor; }
/* Decorative category colours collapse to the brand accent */
html[data-theme="light"] body .text-purple-400, html[data-theme="light"] body .text-purple-500,
html[data-theme="light"] body .text-violet-400, html[data-theme="light"] body .text-violet-500,
html[data-theme="light"] body .text-pink-400, html[data-theme="light"] body .text-pink-500,
html[data-theme="light"] body .text-orange-400, html[data-theme="light"] body .text-orange-500,
html[data-theme="light"] body .text-yellow-400, html[data-theme="light"] body .text-yellow-500,
html[data-theme="light"] body .text-amber-400, html[data-theme="light"] body .text-teal-400,
html[data-theme="light"] body .text-teal-500, html[data-theme="light"] body .text-cyan-400,
html[data-theme="light"] body .text-sky-400 { color: var(--np-blue) !important; }
/* Semantic colours stay, but deeper (no neon) */
html[data-theme="light"] body .text-red-400, html[data-theme="light"] body .text-red-500 { color: #b42318 !important; }
html[data-theme="light"] body .text-green-400, html[data-theme="light"] body .text-green-500,
html[data-theme="light"] body .text-emerald-400 { color: #12804a !important; }
html[data-theme] body [class*="border-"][class*="-500/"] { border-color: var(--color-border) !important; }

/* 3. Emphasis panels: navy instead of pale blue */
html[data-theme] body .cta-banner { background: var(--np-navy) !important; }
html[data-theme] body .cta-banner h2,
html[data-theme] body .cta-banner h3,
html[data-theme] body .cta-banner .text-white { color: #fff !important; }
html[data-theme] body .cta-banner p,
html[data-theme] body .cta-banner [class*="text-slate"] { color: var(--np-on-navy) !important; }
html[data-theme] body .cta-banner .btn-secondary { border-color: #fff !important; color: #fff !important; }
html[data-theme] body .cta-banner .btn-secondary:hover { border-color: var(--np-blue-on-navy) !important; color: var(--np-blue-on-navy) !important; }
html[data-theme] body .card.\!bg-gradient-to-br { background: var(--np-navy) !important; border-color: var(--np-navy) !important; }
html[data-theme] body .card.\!bg-gradient-to-br p,
html[data-theme] body .card.\!bg-gradient-to-br div { color: #fff !important; }
html[data-theme] body .card.\!bg-gradient-to-br .btn-secondary { border-color: #fff !important; color: #fff !important; }

/* 4. Product platform diagram (pm-*): violet chips/dots -> brand blue on neutral */
html[data-theme] body .pm-agentic-chip { background: var(--ent-tag-bg) !important; border-color: var(--color-border) !important; color: var(--ent-tag-text) !important; border-radius: 0 !important; }
html[data-theme] body .pm-conn-dot { background: var(--np-blue) !important; }
html[data-theme] body .pm-platform-core,
html[data-theme] body .pm-private-ai-block,
html[data-theme] body .pm-gateway-block { border-color: var(--color-border) !important; background: var(--ent-tile) !important; border-radius: 0 !important; }
html[data-theme] body .pm-private-ai-block:hover,
html[data-theme] body .pm-gateway-block:hover { border-color: var(--np-blue) !important; }

/* 5. Toggle / filter buttons: solid accent when active, neutral otherwise */
html[data-theme] body .lang-btn.active,
html[data-theme] body .filter-btn.active { background: var(--np-blue) !important; color: #fff !important; border-color: var(--np-blue) !important; }

/* 6. Section bands: neutral light grey (less blue cast) */
html[data-theme="light"] {
  --np-pale: #f5f7fa;
  --color-bg-secondary: #f5f7fa;
}

/* 7. Inline-styled tints in page markup (style="background: rgba(…, 0.06)") */
html[data-theme] body :not(.hero-section) > [style*="background: rgba("][style*="border: 1px solid rgba("] {
  background: var(--ent-tile) !important;
  border-color: var(--color-border) !important;
  border-radius: 0 !important;
}
html[data-theme] body span.rounded-full[style*="background: rgba("] { background: var(--ent-tag-bg) !important; border-color: var(--color-border) !important; border-radius: 0 !important; }
html[data-theme] body a.rounded-lg[style*="rgba(26, 110, 245"] { background: var(--ent-tile) !important; border-color: var(--color-border) !important; }
html[data-theme] body a.rounded-lg[style*="rgba(26, 110, 245"]:hover { border-color: var(--np-blue) !important; opacity: 1 !important; }
html[data-theme] body .pm-third-party,
html[data-theme] body .pm-data-strip { border-color: var(--color-border) !important; border-radius: 0 !important; }
html[data-theme] body .pm-strip-sep { background: var(--color-border) !important; }

/* --- Sticky header stays opaque after scrolling. styles.css makes #navbar.nav-scrolled
       transparent (!important) in the light theme; this rule is more specific. --- */
html[data-theme] body #navbar.nav-scrolled { background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 1px 0 var(--np-line), 0 6px 18px rgba(16, 30, 53, 0.06) !important; }
html[data-theme="dark"] body #navbar.nav-scrolled { background: var(--np-navy) !important; box-shadow: 0 1px 0 rgba(185, 198, 216, 0.16) !important; }

/* --- Risk / problem cards: real cards with padding so icons never touch the edge.
       Hover changes only the outline colour (overrides the open-column style above). --- */
html[data-theme] body .risk-card {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  padding: 24px !important;
}
html[data-theme] body .risk-card:hover { border-color: var(--np-blue) !important; transform: none !important; }

/* --- Content inside navy panels (e.g. product "Security & compliance" banner) --- */
/* Tags: outlined light chips instead of pale grey fills */
html[data-theme] body .cta-banner .badge {
  background: transparent !important;
  border: 1px solid rgba(185, 198, 216, 0.38) !important;
  color: #dbe4f0 !important;
  padding: 6px 10px !important;
}
/* Highlighted words in headings: the hero accent instead of dark green */
html[data-theme] body .cta-banner h2 .text-green-400,
html[data-theme] body .cta-banner h2 [class*="text-green"] { color: #7999ff !important; }
/* Callout boxes with inline tints: translucent surface + accent bar, readable text */
html[data-theme] body .cta-banner [style*="background: rgba("][style*="border: 1px solid rgba("] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 0 !important;
  border-left: 3px solid var(--np-blue-on-navy) !important;
  border-radius: 0 !important;
}
html[data-theme] body .cta-banner [style*="background: rgba("][style*="border: 1px solid rgba("] p { color: #dbe4f0 !important; }
html[data-theme] body .cta-banner [style*="background: rgba("][style*="border: 1px solid rgba("] strong { color: #fff !important; }
html[data-theme] body .cta-banner a.text-indigo-400,
html[data-theme] body .cta-banner [style*="background: rgba("][style*="border: 1px solid rgba("] a { color: var(--np-blue-on-navy) !important; text-decoration: underline; text-underline-offset: 4px; }
html[data-theme] body .cta-banner [style*="background: rgba("][style*="border: 1px solid rgba("] a:hover { color: #fff !important; }

/* --- Homepage pull quote: NProxima display type, brand-blue highlight (was red) --- */
html[data-theme] body blockquote p {
  font-family: var(--np-font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
}
html[data-theme] body blockquote p.text-slate-400 { font-weight: 400 !important; letter-spacing: -0.01em !important; }
html[data-theme] body .pull-quote-highlight,
html[data-theme] body .pull-quote-highlight * { color: var(--np-blue) !important; -webkit-text-fill-color: var(--np-blue) !important; background: none !important; }
html[data-theme="dark"] body .pull-quote-highlight,
html[data-theme="dark"] body .pull-quote-highlight * { color: var(--np-blue-on-navy) !important; -webkit-text-fill-color: var(--np-blue-on-navy) !important; }