@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
/* ════════════════════════════════════════════════════════════════════
   SENTRIX — CHARCOAL + ELECTRIC MAGENTA + WHITE  ·  editorial-punk
   Charcoal ground · white panels · electric magenta signal · SQUARE buttons.
   Display: Space Grotesk · Body: Inter · Labels: IBM Plex Mono.
   Loaded LAST in <head> so it wins the cascade over each page's inline <style>.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* Black + Electric Blue + Swiss Red — CTA is BLUE, red is a touch */
  --ink:#000000; --panel:#0a0a0c; --panel-2:#111116;
  --paper:#ffffff; --paper-2:#f4f5f7;
  --text:#ffffff; --text-mut:#c8c8cc;
  --royal:#0ea5e9; --royal-deep:#0284c7; --royal-light:#38bdf8;   /* electric royal */
  --acid:#0ea5e9; --acid-deep:#0284c7;   /* CTA is BLUE now */
  --red:#0ea5e9; --red-deep:#0284c7;     /* Swiss red kept as accent-only */
  --line:rgba(255,255,255,.16); --line-strong:rgba(14,165,233,.55);
  --disp:'Space Grotesk','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --red:#ff4d57; --amber:#ffb020; --green:#35e07a;

  /* ── remap index.html tokens ── */
  --bg:#000000; --bg2:#0a0a0c; --bg3:#111116;
  --surface:rgba(14,165,233,.06); --surface2:rgba(14,165,233,.10);
  --border:rgba(255,255,255,.18); --border2:#0ea5e9;
  --text-1:#ffffff; --text-2:#ffffff; --text-3:#c8c8cc;
  --c1:#0ea5e9; --c2:#0ea5e9; --c3:#0ea5e9; --c4:#0ea5e9; --c5:#0ea5e9;
  --accent:#0ea5e9;
  --g:linear-gradient(135deg,#0ea5e9,#0284c7);
  --g2:linear-gradient(135deg,#0ea5e9,#0284c7);
  --g-hero:linear-gradient(135deg,#0ea5e9 0%,#0284c7 100%);
  --glass:rgba(38,38,42,.72); --glass-border:rgba(14,165,233,.28);
  --sh-sm:0 1px 3px rgba(0,0,0,.5); --sh-md:0 10px 30px rgba(0,0,0,.55);
  --sh-lg:0 18px 44px rgba(0,0,0,.6); --sh-xl:0 30px 70px rgba(0,0,0,.65);

  /* ── remap dashboard / admin tokens ── */
  --t:#0ea5e9; --t2:#ffffff; --v:#0ea5e9; --a:#0ea5e9; --c:#0ea5e9;
  --g1:linear-gradient(135deg,#0ea5e9,#0284c7);

  /* ── remap assurance tokens ── */
  --card:#ffffff; --mut:#c8c8cc;
  --red:#ff4d57; --green:#35e07a;
}

/* ── GROUND: charcoal + magenta atmosphere ──────────────────────────── */
html,body{background:#000000 !important; color:#ffffff !important; -webkit-font-smoothing:antialiased;}
body{
  background-image:
    radial-gradient(120% 80% at 85% -10%, rgba(14,165,233,.14) 0%, transparent 52%),
    radial-gradient(90% 60% at -8% 6%, rgba(14,165,233,.07) 0%, transparent 52%) !important;
}
::selection{ background:rgba(14,165,233,.4); color:#ffffff; }

/* ── TYPE: Space Grotesk display + Inter body ───────────────────────── */
body, p, span, a, li, td, th, label, input, select, textarea, button, div,
.sub,.lead,.meta,.desc{ font-family:'Inter', system-ui, -apple-system, sans-serif !important; }
h1,h2,h3,h4,h5,h6,.hero h1,.head,.display,.section-title,.view-title,
.word,.nav-logo-text,.wm,.login-logo-text{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif !important;
  color:#ffffff !important; letter-spacing:-.025em !important; font-weight:700 !important;
  text-wrap:balance;
}
.hero h1{ letter-spacing:-.045em !important; line-height:.95 !important; }
/* Any dark/near-black text (built for a light theme) → white */
[style*="color:#000"],[style*="color: #000"],[style*="color:#000000"],[style*="color:rgb(0"],
[style*="color:#14213d"],[style*="color:#0f1e2e"],[style*="color:#0c1222"],[style*="color:#0f172a"],
[style*="color:#1e2a38"],[style*="color:#231c18"],[style*="color:#12312e"],[style*="color:#0a3a44"],
[style*="color:#0a0e0c"]{ color:#ffffff !important; }

/* ── SURFACES: WHITE panels on charcoal — punk-editorial contrast ────── */
.card,[class*="card"],.panel,[class*="panel"],.tile,.box,.glass,
.feat,.feature,.stat,.kpi,.metric,.well,.surface,.modal,.sheet,
.login-box,.login-card,.gate,.gate-box,.method-opt,.dna-card,.toast,.ai-item{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:0 !important;
  color:#000000 !important;
  box-shadow:0 10px 30px rgba(0,0,0,.35) !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.card *,[class*="card"] *,.panel *,[class*="panel"] *,.tile *,.box *,
.feat *,.feature *,.stat *,.kpi *,.metric *,.well *,.surface *,.modal *,.sheet *,
.login-box *,.login-card *,.gate *,.gate-box *,.method-opt *,.dna-card *,.toast *,.ai-item *{ color:#000000 !important; }
.card:hover,[class*="card"]:hover{
  border-color:#0ea5e9 !important;
  box-shadow:0 16px 40px rgba(14,165,233,.34) !important;
  transform:translateY(-3px) !important;
}

/* ── BUTTONS: SQUARE — magenta primary, black-outline ghost ─────────── */
button,.btn,[class*="btn"],.cta,[class*="cta"],.pill-btn,.price-btn,
a.button,input[type="submit"],input[type="button"],.nav-cta{
  border-radius:0 !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:600 !important; letter-spacing:.01em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
}
.btn-primary,.btn.solid,.price-btn.solid,.cta-primary,.nav-cta:not(.nav-cta-ghost),
.btn.primary,button.primary,[class*="btn"].solid,.view-btn.primary,.dna-btn,
.login-btn,.al-btn,.gate button,.gate .btn,.login-submit{
  background:#0ea5e9 !important; color:#ffffff !important;
  border:0 !important; font-weight:700 !important; box-shadow:0 8px 22px rgba(14,165,233,.28) !important;
  border-radius:0 !important;
}
.btn-primary:hover,.btn.solid:hover,.cta-primary:hover,.login-btn:hover,.nav-cta:hover{
  transform:translateY(-2px) !important; box-shadow:0 12px 28px rgba(14,165,233,.44) !important;
  background:#0284c7 !important; color:#ffffff !important;
}
.btn-ghost,.btn.ghost,.nav-cta-ghost,.price-btn.outline,.price-btn.custom,
.cta-ghost,.btn.outline,[class*="btn"].ghost{
  background:transparent !important; color:#ffffff !important;
  border:1.5px solid rgba(255,255,255,.4) !important; box-shadow:none !important;
  border-radius:0 !important;
}
.btn-ghost:hover,.nav-cta-ghost:hover,.price-btn.outline:hover{
  background:#0ea5e9 !important; color:#ffffff !important; border-color:#0ea5e9 !important; transform:translateY(-2px) !important;
}

/* ── INPUTS: dark field, magenta focus, SQUARE ──────────────────────── */
input,select,textarea,.field,.input{
  background:#0a0a0c !important; color:#ffffff !important;
  border:1.5px solid rgba(255,255,255,.24) !important; border-radius:0 !important;
  transition:border-color .2s, box-shadow .2s !important;
}
input::placeholder,textarea::placeholder{ color:#c8c8cc !important; opacity:.8; }
input:focus,select:focus,textarea:focus{
  outline:none !important; border-color:#0ea5e9 !important;
  box-shadow:0 0 0 3px rgba(14,165,233,.28) !important;
}
select option{ background:#0a0a0c; color:#ffffff; }

/* ── LOGIN / GATE OVERRIDES — the gate is a LIGHT card on a light page ─
      so the dark-input rule above must not apply inside it. Keep the
      gate scrollable on short viewports (phone landscape, laptop split). */
.login-gate,.gate,.gate-overlay{ overflow-y:auto !important; padding:2rem 1rem !important; }
.login-box,.gate-box,.login-card{
  max-height:none !important; margin:auto !important;
  background:#ffffff !important; border-color:rgba(15,23,42,.08) !important;
  box-shadow:0 20px 60px rgba(14,165,233,.10),0 8px 24px rgba(14,165,233,.06) !important;
}
.login-box input,.login-box select,.login-box textarea,.login-box .login-field,
.gate-box input,.gate-box select,.gate-box textarea,.login-card input{
  background:rgba(15,23,42,.03) !important; color:#0f172a !important;
  border:1px solid rgba(15,23,42,.12) !important; border-radius:.5rem !important;
}
.login-box input::placeholder,.login-box textarea::placeholder,
.gate-box input::placeholder{ color:#64748b !important; opacity:1; }
.login-box input:focus,.login-box select:focus,.login-box textarea:focus,
.gate-box input:focus{
  border-color:#0ea5e9 !important; background:#ffffff !important;
  box-shadow:0 0 0 3px rgba(14,165,233,.15) !important;
}
.login-box .login-btn,.login-box .login-submit,.gate-box .btn-primary{ border-radius:.4rem !important; }
.login-box .login-divider,.login-box .login-alt,.login-box .login-back{ color:#334155 !important; }
.login-box .login-alt a{ color:#0284c7 !important; }

/* ── NAV / HEADER / FOOTER ──────────────────────────────────────────── */
header,.nav,.navbar,.topbar,.top,.appbar,.sidebar,.rail,.drawer,
.n,.ni,.site-nav,.legal-nav,.doc-nav,.topnav,.masthead{
  background:rgba(0,0,0,.78) !important; border-color:rgba(255,255,255,.14) !important;
  backdrop-filter:saturate(140%) blur(10px) !important;
}
footer,.footer,.app-footer,.dash-footer{ background:#000000 !important; border-top:2px solid #0ea5e9 !important; }
footer,.footer,.ft-row,.ft-links,.ft-powered,.ft-copy,footer p,footer span,footer li,footer div{ color:#ffffff !important; }
footer a,.ft-links a{ color:#38bdf8 !important; }
.nav-links a,nav a{ color:#ffffff !important; font-weight:500 !important; transition:color .2s; }
.nav-links a:hover,nav a:hover{ color:#0ea5e9 !important; }

/* ── BODY COPY on ink ────────────────────────────────────────────────── */
p,li,dd,dt,blockquote,figcaption,td,th,
.sub,.lead,.muted,.desc,.meta,.note,.small,small,.legal,.prose,.body-copy,
.cont-stats,.cont-stats div,label{ color:#ffffff !important; }
p,.lead,.sub{ line-height:1.65 !important; }
/* body copy INSIDE white cards → charcoal */
.card p,.card li,.card td,.card th,.card .sub,.card .desc,.card .meta,
[class*="card"] p,[class*="card"] li,[class*="card"] td,[class*="card"] th,
.panel p,.panel li,[class*="panel"] p,[class*="panel"] li,
.stat p,.stat li,.kpi p,.kpi li,.feat p,.feature p,
.login-box p,.login-card p,.gate p{ color:#000000 !important; }

/* ── RAG STATUS ─────────────────────────────────────────────────────── */
.red,.status-red,.sev-red,.badge-red,.rag-red,.danger,.critical{ color:#ff4d57 !important; }
.amber,.status-amber,.sev-amber,.badge-amber,.rag-amber,.warn,.warning{ color:#ffb020 !important; }
.green,.status-green,.sev-green,.badge-green,.rag-green,.ok,.good,.success{ color:#35e07a !important; }
.pill.red,.chip.red,.tag.red,.badge-high,.badge.badge-high,.badge-critical,.badge.badge-critical,.sev-high{ background:#ff4d57 !important; color:#000000 !important; }
.pill.amber,.chip.amber,.tag.amber,.badge-med,.badge.badge-med,.badge-medium,.badge.badge-medium,.sev-med{ background:#ffb020 !important; color:#000000 !important; }
.pill.green,.chip.green,.tag.green,.badge-low,.badge.badge-low,.badge-minor,.badge.badge-minor,.sev-low{ background:#35e07a !important; color:#000000 !important; }

/* ── LINKS / ACCENT / POP ───────────────────────────────────────────── */
.accent,.brand,.text-accent,.text-primary{ color:#0ea5e9 !important; }
.eyebrow,.badge,.tag,.pill,.chip,.hero-badge{ letter-spacing:.16em !important; font-family:'IBM Plex Mono',monospace !important; }
.gradient-text{ background:linear-gradient(120deg,#0ea5e9,#38bdf8) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important; }
a{ color:#0ea5e9; transition:color .2s; }
a:hover{ color:#0284c7; }

/* ── SCROLLBAR ──────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#0a0a0c}
::-webkit-scrollbar-thumb{background:#0ea5e9;border-radius:0}

/* ── PAGE-SPECIFIC SURFACE FIXES ────────────────────────────────────── */
#cookieBanner{ background:#000000 !important; border-top:2px solid #0ea5e9 !important; box-shadow:0 -6px 24px rgba(0,0,0,.5) !important; }
#cookieBanner,#cookieBanner p,#cookieBanner span{ color:#ffffff !important; }
#cookieBanner button,#cookieBanner .btn,#cookieBanner a.btn{ border:1.5px solid rgba(255,255,255,.5) !important; color:#ffffff !important; background:transparent !important; border-radius:0 !important; }
#cookieBanner .btn.solid,#cookieBanner [class*="accept"],#cookieBanner button.primary{ background:#0ea5e9 !important; color:#ffffff !important; border:0 !important; }
.nav-links{ background:transparent !important; }
.pricing-tabs,.pricing-toggle{ background:#0a0a0c !important; border:1px solid rgba(255,255,255,.2) !important; border-radius:0 !important; }
.pricing-tab{ border-radius:0 !important; }
.pricing-tab.active{ background:#0ea5e9 !important; color:#ffffff !important; }
.pricing-tab:not(.active){ background:transparent !important; color:#ffffff !important; }

/* ── APP-SHELL / role / research text families → white on ink ────────── */
.login-gate,.login-overlay,.overlay,.modal-overlay,.backdrop{ background:rgba(0,0,0,.92) !important; backdrop-filter:blur(6px) !important; }
strong,b{ color:inherit !important; }
.pred-body strong,.rp-section-body strong{ color:#0ea5e9 !important; }
[class^="login-"],[class^="topbar-"],[class^="side-"],[class^="si-"],[class^="method-opt"],
[class^="powered-by"],[class^="view-"],[class^="kpi-"],[class^="kb-"],[class^="hm-"],[class^="doc-"],
[class^="tm-"],[class^="bl-"],[class^="bstat-"],[class^="gantt-"],[class^="rt-"],[class^="rp-"],
[class^="pred-"],[class^="bp-"],[class^="conn-"],[class^="pmo-"],[class^="exec-"],[class^="dna-"],
[class^="notif-"],[class^="chat-"],[class^="ms-"],[class^="al-"],[class^="tb-"],[class^="user-"],
[class^="rev-"],[class^="activity-"],[class^="bench-"],[class^="role-"],[class^="chart-"],
[class^="dl-"],[class^="fm"],[class^="progress-"],[class^="comp-"],[class^="bar-"],[class^="audit-"],
[class^="section-"],[class^="cost-"],[class^="alloc-"],[class^="invoice-"],.lbl,.field-hint,
.section-head,.nav-toggle,kbd{ color:#ffffff !important; }
.st-done,.st-complete,.st-ok{ color:#35e07a !important; }
.st-risk,.st-delayed,.urgent,.exec-decision-urgency{ color:#ff4d57 !important; }
.st-prog,.st-progress,.st-warn{ color:#ffb020 !important; }
.bar,.kpi-bar,.progress-bar,.track,.meter,.comp-bar-wrap,.comp-track,.bar-wrap{ background:rgba(255,255,255,.14) !important; border-radius:0 !important; }
.comp-bar,.cont-fill{ background:linear-gradient(90deg,#0ea5e9,#0284c7) !important; border-radius:0 !important; }
.progress-dot,.dot,.step-dot{ background:#ffffff !important; border-color:#0ea5e9 !important; color:#000000 !important; }
.chip{ background:#ffffff !important; border:1px solid rgba(0,0,0,.14) !important; color:#000000 !important; border-radius:0 !important; }
.chip.active,.chip.sel,.chip.selected{ background:#0ea5e9 !important; color:#ffffff !important; border-color:transparent !important; }
.compliance-badge,.comp-badge{ background:#000000 !important; color:#0ea5e9 !important; border:1px solid rgba(14,165,233,.4) !important; }
.rag-item,.fm,.role-btn,.role-picker,.role-picker-btn,.dl-item{ background:#ffffff !important; color:#000000 !important; border:1px solid rgba(0,0,0,.12) !important; }
.sidebar a,.side a,.subnav a,.menu a{ color:#ffffff !important; }

@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* ═══════════════════════════════════════════════════════════════════
   LANDING CARDS · editorial re-skin (feat / feature-card / role-card / price-card)
   Dark panels on black with a coral top-rule, mono eyebrow, hover lift.
   Higher specificity to override earlier "white cards" rules for landing surfaces.
   ═══════════════════════════════════════════════════════════════════ */

body .feat,
body .feature-card,
body .role-card,
body .price-card{
  background:#0d0d10 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-top:2px solid #0ea5e9 !important;
  border-radius:0 !important;
  color:#ffffff !important;
  padding:28px 24px !important;
  position:relative !important;
  overflow:hidden !important;
  box-shadow:0 8px 24px rgba(0,0,0,.4) !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
body .feat *,
body .feature-card *,
body .role-card *,
body .price-card *{ color:#ffffff !important; }

body .feat:hover,
body .feature-card:hover,
body .role-card:hover,
body .price-card:hover{
  border-color:rgba(14,165,233,.6) !important;
  border-top-color:#38bdf8 !important;
  box-shadow:0 20px 44px rgba(14,165,233,.22) !important;
  transform:translateY(-4px) !important;
}

/* mono eyebrow index — a 01/02/... marker in blue */
body .feat::before,
body .feature-card::before,
body .role-card::before{
  content:counter(card, decimal-leading-zero);
  position:absolute; top:12px; right:16px;
  font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  font-size:10px; font-weight:500; letter-spacing:.16em; color:#38bdf8;
  opacity:.9;
}

/* card typography — tight, editorial, sky-blue hover on the name */
body .feat .feat-name,
body .feature-card h3,
body .role-card h3,
body .role-card .role-name,
body .price-card .price-tier{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif !important;
  font-size:19px !important; font-weight:700 !important; letter-spacing:-.015em !important;
  color:#ffffff !important; margin:8px 0 !important;
}
body .feat .feat-desc,
body .feature-card p,
body .role-card p,
body .price-card p,
body .price-card .price-desc{
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:13.5px !important; line-height:1.6 !important; color:#c8c8cc !important;
  margin:0 !important;
}

/* feat icon → blue pill */
body .feat .feat-icon,
body .feature-card .feature-icon,
body .role-card .role-icon{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:44px !important; height:44px !important;
  background:rgba(14,165,233,.12) !important;
  border:1px solid rgba(14,165,233,.35) !important;
  border-radius:0 !important;
  color:#38bdf8 !important;
  font-size:20px !important;
  margin-bottom:16px !important;
}

/* pricing card variants — featured gets deeper blue accent */
body .price-card.featured{
  border-top:2px solid #38bdf8 !important;
  box-shadow:0 12px 34px rgba(56,189,248,.28) !important;
}
body .price-card.featured::after{
  content:"MOST POPULAR";
  position:absolute; top:-2px; right:-2px;
  padding:5px 10px;
  background:#38bdf8; color:#000;
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:600; letter-spacing:.18em;
}
body .price-card .price-amount,
body .price-card .price-price{
  font-family:'Space Grotesk',sans-serif !important;
  font-size:36px !important; font-weight:700 !important; letter-spacing:-.03em !important;
  color:#ffffff !important; margin:12px 0 4px !important;
  font-variant-numeric:tabular-nums !important;
}
body .price-card .price-period{
  font-family:'IBM Plex Mono',monospace !important;
  font-size:11px !important; color:#c8c8cc !important; letter-spacing:.12em !important; text-transform:uppercase !important;
}
/* enable auto numbering across landing card groups */
body .features-grid,body .role-grid,body .features,body .roles,body .price-list,
body [class*="feat"][class*="grid"],body [class*="role"][class*="grid"],
body .grid,body .cards{ counter-reset:card !important; }
body .feat,body .feature-card,body .role-card{ counter-increment:card !important; }