/* ═══════════════════════════════════════════════════════════════════════
   OBG — Contact-Trace Cartography
   Design system for the PUBLIC pages (marketing, blog, legal, login, 404).

   Deliberately standalone: css/styles.css still powers the signed-in
   surfaces (dashboard, onboarding, interview, project) and the whole
   admin console, so this file must never be an override layer on top of
   it — public pages load THIS INSTEAD, and app surfaces are untouched.

   The language: an epidemic-intelligence console. Everything is built
   from hairline rules on an exposed coordinate grid, monospace data
   labels sit beside a tight display grotesk, corners are square, and
   registration ticks mark the panels. Nothing is decorative for its own
   sake — the network motif is the product (experts, spreading, traced).
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   1. Tokens
   ─────────────────────────────────────────────────────────────────────── */

:root {
  /* Ground — cold ink, not neutral black. Reads as instrument, not void. */
  --ink:        #080b11;
  --ink-2:      #0b1017;
  --panel:      #0e141d;
  --panel-2:    #131b26;
  --raise:      #1a2431;

  /* Rules. The whole system is drawn with these. */
  --rule:       rgba(146, 172, 200, 0.14);
  --rule-2:     rgba(146, 172, 200, 0.26);
  --rule-hot:   rgba(125, 250, 156, 0.42);

  /* Signal. Phosphor = live/confirmed. Amber = attention/rate. */
  --phos:       #7dfa9c;
  --phos-dim:   #4bbd6c;
  --phos-glow:  rgba(125, 250, 156, 0.16);
  --amber:      #ffb020;
  --amber-dim:  rgba(255, 176, 32, 0.16);
  --alert:      #ff5f56;

  /* Type colours — bone rather than pure white; easier at length. */
  --bone:       #e6eaf0;
  --bone-2:     #b7c2d0;
  --muted:      #7d8b9d;
  --dim:        #4d5867;

  --on-signal:  #05210f;

  /* Grid geometry — the coordinate lattice everything aligns to. */
  --cell:       88px;
  --gutter:     clamp(20px, 4vw, 56px);
  --maxw:       1280px;
  --nav-h:      66px;

  /* Type ramp */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Legacy token aliases ──────────────────────────────────────────
     Converted pages still carry inline styles written against the old
     styles.css variable names. Rather than strip inline styles (fragile,
     and easy to miss one), map every legacy name onto its console-palette
     equivalent so those declarations resolve correctly. Remove once no
     public page references them. */
  --surface:       var(--panel);
  --surface-2:     var(--ink-2);
  --border:        var(--rule);
  --border-strong: var(--rule-2);
  --text:          var(--bone);
  --text-muted:    var(--muted);
  --text-dim:      var(--dim);
  --primary:       var(--phos);
  --primary-glow:  var(--phos);
  --on-primary:    var(--on-signal);
  --accent:        var(--phos);
  --success:       var(--phos);
  --danger:        var(--alert);
  --radius-lg:     0px;
  --grad-aurora:   linear-gradient(135deg, var(--phos), var(--amber));
}


/* ───────────────────────────────────────────────────────────────────────
   2. Reset + ground
   ─────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; }

/* The coordinate lattice. Fixed behind everything, so scrolling reads as
   moving across a map rather than down a document. */
.grid-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  /* Fade the lattice at the edges so it reads as a field, not wallpaper. */
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 40%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 120% 90% at 50% 40%, #000 35%, transparent 100%);
  opacity: .55;
}

/* Live transmission canvas — nodes + edges drawn by obg.js.
   width/height are explicit because <canvas> is a replaced element: with
   width:auto, `inset:0` resolves to its intrinsic 300x150 rather than
   stretching to the viewport, and the field would draw into one corner. */
.trace-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
}

main, .site-header, .site-footer { position: relative; z-index: 2; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ───────────────────────────────────────────────────────────────────────
   3. Type
   ─────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -0.015em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  color: var(--bone-2);
  line-height: 1.7;
  max-width: 62ch;
}

.muted { color: var(--muted); }

/* Monospace data label — the connective tissue of the whole system. */
.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Live signal tag: ▨ blinking node + label */
.signal {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--phos);
  border: 1px solid var(--rule-hot);
  background: var(--phos-glow);
  padding: 7px 14px 7px 11px;
}

.signal::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--phos);
  box-shadow: 0 0 0 3px rgba(125, 250, 156, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 3px rgba(125, 250, 156, 0.18); }
  50%      { opacity: .45; box-shadow: 0 0 0 6px rgba(125, 250, 156, 0);    }
}

/* Phosphor emphasis inside display type. */
.hot { color: var(--phos); }
.amber { color: var(--amber); }

/* ───────────────────────────────────────────────────────────────────────
   4. Header
   ─────────────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  background: rgba(8, 11, 17, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}

.nav-bar {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 26px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  color: var(--bone);
  margin-right: auto;
}

/* Brand glyph: a traced node — square ring with a live centre. */
.mark-glyph {
  position: relative;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--phos);
  flex-shrink: 0;
}

.mark-glyph::before {
  content: '';
  position: absolute;
  inset: 6px;
  background: var(--phos);
}

.mark-glyph::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid var(--rule-hot);
  opacity: .5;
}

.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: block;
  padding: 8px 13px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bone-2);
  border: 1px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--phos);
  border-color: var(--rule);
  background: rgba(125, 250, 156, 0.05);
}

.nav-act { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule-2);
  color: var(--bone);
  cursor: pointer;
}

@media (max-width: 940px) {
  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--rule);
    padding: 10px var(--gutter) 20px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 0; border: none; border-bottom: 1px solid var(--rule); }
  .nav-toggle { display: inline-flex; order: 3; }
  .nav-act .btn-ghost { display: none; }
}

/* ───────────────────────────────────────────────────────────────────────
   5. Buttons
   ─────────────────────────────────────────────────────────────────────── */

.btn {
  --btn-pad: 14px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--btn-pad);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--rule-2);
  background: transparent;
  color: var(--bone);
  cursor: pointer;
  position: relative;
  transition: color .16s, background .16s, border-color .16s, transform .16s;
}

.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--phos);
  border-color: var(--phos);
  color: var(--on-signal);
  font-weight: 600;
}

.btn-primary:hover {
  background: #96ffb0;
  border-color: #96ffb0;
  box-shadow: 0 0 0 1px rgba(125,250,156,.3), 0 10px 30px -10px rgba(125,250,156,.5);
}

.btn-ghost:hover { border-color: var(--rule-hot); color: var(--phos); background: rgba(125,250,156,.05); }

.btn-sm { --btn-pad: 9px 15px; font-size: 0.72rem; }
.btn-lg { --btn-pad: 17px 30px; font-size: 0.82rem; }
.btn-block { width: 100%; }

/* Corner registration ticks on the primary CTA — marks it as the target. */
.btn-tick::before,
.btn-tick::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  opacity: .55;
}
.btn-tick::before { top: -3px;    left: -3px;  border-right: none; border-bottom: none; }
.btn-tick::after  { bottom: -3px; right: -3px; border-left: none;  border-top: none;    }

/* ───────────────────────────────────────────────────────────────────────
   6. Sections + numbered headers
   ─────────────────────────────────────────────────────────────────────── */

.band { padding: clamp(64px, 9vw, 128px) 0; position: relative; }
.band-tight { padding: clamp(44px, 6vw, 80px) 0; }
.band-rule { border-top: 1px solid var(--rule); }

/* Section header: "▸ 03 / TRANSMISSION VECTORS" then the display line. */
.band-head { margin-bottom: clamp(32px, 4vw, 56px); max-width: 74ch; }

.band-idx {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--phos);
  margin-bottom: 20px;
}

.band-idx::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--phos);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.band-idx::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--rule-2), transparent);
  min-width: 30px;
}

.band-head h2 { margin-bottom: 16px; }
.band-head .lede { margin-top: 14px; }

/* Interior page lead — the hero band on every non-home page. Capped below
   the global h1 ramp so a long headline doesn't dominate the fold. */
.page-lead { padding: clamp(52px, 7vw, 104px) 0 clamp(30px, 4vw, 52px); }
.page-lead h1 { font-size: clamp(2.3rem, 4.6vw, 4rem); margin-bottom: 20px; }
.page-lead .lede { margin-top: 20px; }
.page-lead .band-idx { margin-bottom: 22px; }

/* ───────────────────────────────────────────────────────────────────────
   7. Panels — the core surface. Hairline box + registration ticks.
   ─────────────────────────────────────────────────────────────────────── */

.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 28px 26px;
  transition: border-color .2s, background .2s, transform .2s;
}

.panel-tick::before,
.panel-tick::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--rule-2);
  pointer-events: none;
}
.panel-tick::before { top: 7px;    left: 7px;  border-right: none; border-bottom: none; }
.panel-tick::after  { bottom: 7px; right: 7px; border-left: none;  border-top: none;    }

.panel-live:hover {
  border-color: var(--rule-hot);
  background: var(--panel-2);
  transform: translateY(-2px);
}

.panel-live:hover::before,
.panel-live:hover::after { border-color: var(--phos); }

/* Grids */
.cols { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
/* Cells inside a .cols share hairlines — the 1px gap IS the rule. */
.cols > * { background: var(--ink-2); border: none; }

.stack { display: grid; gap: 18px; }
.stack-sm { display: grid; gap: 10px; }

/* ───────────────────────────────────────────────────────────────────────
   8. Node cards — the recurring "traced entity" object
   ─────────────────────────────────────────────────────────────────────── */

.node {
  position: relative;
  padding: 30px 26px 28px;
  background: var(--ink-2);
  transition: background .2s, transform .2s;
}

.node:hover { background: var(--panel-2); }

.node-id {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--dim);
  margin-bottom: 16px;
  display: block;
}

.node-ico {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-2);
  color: var(--phos);
  margin-bottom: 18px;
}

.node-ico svg { width: 19px; height: 19px; }

/* A card is often an anchor itself (blog posts) or contains one. Both need
   the underline off, or the whole cell reads as link soup. */
a.node, .node a { color: inherit; text-decoration: none; }
a.node:hover h3, .node a:hover h3 { color: var(--phos); }

.node h3 { margin-bottom: 10px; transition: color .15s; }
.node p { color: var(--muted); font-size: 0.93rem; line-height: 1.62; }

/* Rate readout — amber, monospace, sits at the foot of a node. */
.readout {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--amber);
  border-top: 1px solid var(--amber-dim);
  padding-top: 10px;
}

/* ───────────────────────────────────────────────────────────────────────
   9. Metric readouts
   ─────────────────────────────────────────────────────────────────────── */

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.metric { background: var(--ink); padding: 22px 20px; }

.metric-v {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--bone);
}

.metric-v span { font-size: 0.5em; color: var(--phos); margin-left: 3px; }

.metric-k {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 9px;
}

/* ───────────────────────────────────────────────────────────────────────
   10. Steps — numbered transmission chain
   ─────────────────────────────────────────────────────────────────────── */

.chain { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: lnk; }

.link {
  position: relative;
  background: var(--ink-2);
  padding: 34px 24px 30px;
  counter-increment: lnk;
}

/* The step marker is generated, so a converted page gets numbering for
   free and hand-authored pages don't have to repeat it in markup. */
.link::before {
  content: 'STEP ' counter(lnk, decimal-leading-zero);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--phos);
  margin-bottom: 18px;
}

.link-n {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--phos);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.link-n::after {
  content: '';
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--rule-2) 0 4px, transparent 4px 8px);
}

.link h3 { margin-bottom: 9px; }
.link p { color: var(--muted); font-size: 0.92rem; }

/* ───────────────────────────────────────────────────────────────────────
   11. Ledger rows (FAQ, spec lists, data tables)
   ─────────────────────────────────────────────────────────────────────── */

.ledger { border-top: 1px solid var(--rule); }

.row {
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  align-items: start;
}

.row-k {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--dim);
  padding-top: 4px;
}

.row-v h3 { margin-bottom: 8px; }
.row-v p { color: var(--muted); font-size: 0.94rem; }

@media (max-width: 560px) {
  .row { grid-template-columns: 1fr; gap: 8px; }
}

/* FAQ disclosure built on the ledger row */
.qa { border-bottom: 1px solid var(--rule); }

.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--bone);
  transition: color .15s;
}

.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--phos); }

.qa summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--phos);
  transition: transform .2s;
}

.qa[open] summary::after { content: '\2212'; }
.qa-body { padding: 0 40px 24px 0; color: var(--muted); font-size: 0.95rem; line-height: 1.7; }

/* ───────────────────────────────────────────────────────────────────────
   12. Forms
   ─────────────────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.field label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--ink);
  border: 1px solid var(--rule-2);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color .15s, background .15s;
}

.field textarea { resize: vertical; min-height: 128px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--phos);
  background: var(--ink-2);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--dim); }

.field-row { display: flex; gap: 16px; }
.field-row .field { flex: 1; min-width: 0; }
@media (max-width: 560px) { .field-row { flex-wrap: wrap; gap: 0; } .field-row .field { flex: 1 1 100%; } }

.hint { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--dim); }

.notice { padding: 13px 15px; font-size: 0.9rem; line-height: 1.55; border: 1px solid var(--rule-2); display: none; }
.notice.ok  { display: block; border-color: var(--rule-hot); background: var(--phos-glow); color: var(--phos); }
.notice.err { display: block; border-color: rgba(255,95,86,.4); background: rgba(255,95,86,.08); color: var(--alert); }

/* ───────────────────────────────────────────────────────────────────────
   13. Prose (legal + blog bodies)
   ─────────────────────────────────────────────────────────────────────── */

.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 48px 0 16px; }
.prose h3 { margin: 32px 0 12px; }
.prose p, .prose li { color: var(--bone-2); font-size: 0.98rem; line-height: 1.78; }
.prose ul, .prose ol { padding-left: 0; list-style: none; margin: 0 0 20px; }
.prose ul li { position: relative; padding-left: 24px; margin-bottom: 10px; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border: 1px solid var(--phos);
  transform: rotate(45deg);
}
.prose ol { counter-reset: p; }
.prose ol li { position: relative; padding-left: 34px; margin-bottom: 10px; counter-increment: p; }
.prose ol li::before {
  content: counter(p, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--phos);
}
.prose a { color: var(--phos); text-underline-offset: 3px; }
.prose strong { color: var(--bone); }

/* ───────────────────────────────────────────────────────────────────────
   14. Callout / CTA slab
   ─────────────────────────────────────────────────────────────────────── */

.slab {
  position: relative;
  border: 1px solid var(--rule-2);
  background:
    linear-gradient(180deg, rgba(125,250,156,.05), transparent 60%),
    var(--panel);
  padding: clamp(38px, 6vw, 68px) clamp(24px, 5vw, 60px);
  text-align: center;
  overflow: hidden;
}

.slab::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%);
  opacity: .6;
  pointer-events: none;
}

.slab > * { position: relative; }
.slab h2 { margin-bottom: 16px; }
.slab .lede { margin-inline: auto; margin-bottom: 30px; }

.slab-acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 520px) { .slab-acts .btn { width: 100%; } }

/* ───────────────────────────────────────────────────────────────────────
   15. Footer
   ─────────────────────────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--rule); background: var(--ink-2); padding: clamp(48px, 6vw, 76px) 0 30px; }

.foot-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(130px, 1fr));
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }

.foot-grid h4 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 16px;
}

.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 10px; }

.foot-grid a {
  text-decoration: none;
  color: var(--bone-2);
  font-size: 0.9rem;
  transition: color .15s;
}

.foot-grid a:hover { color: var(--phos); }
.foot-blurb { color: var(--muted); font-size: 0.9rem; line-height: 1.65; margin: 16px 0; max-width: 40ch; }
.foot-addr { font-style: normal; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.05em; color: var(--dim); line-height: 1.8; }
.foot-addr a { color: var(--phos); text-decoration: none; }

.foot-base {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--dim);
  text-transform: uppercase;
}

/* ───────────────────────────────────────────────────────────────────────
   16. Reveal on scroll
   ─────────────────────────────────────────────────────────────────────── */

.rise { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; } }

/* ───────────────────────────────────────────────────────────────────────
   17. Floating widgets (contact FAB + its modal, support-chat launcher)
   Ported here because public pages no longer load styles.css. Restyled
   to the console language; app.js/support-chat.js class names unchanged.
   ─────────────────────────────────────────────────────────────────────── */

.contact-fab {
  position: fixed;
  right: 22px;
  bottom: 86px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px 11px 12px;
  background: var(--panel);
  color: var(--bone);
  border: 1px solid var(--rule-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s, transform .18s, background .18s;
}

.contact-fab:hover { transform: translateY(-2px); border-color: var(--rule-hot); background: var(--panel-2); }
.contact-fab:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; }

.contact-fab-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--rule-2); color: var(--phos); flex-shrink: 0; }
.contact-fab-icon svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .contact-fab { right: 14px; bottom: 72px; padding: 11px; }
  .contact-fab-label { display: none; }
}

.cfm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 6, 10, .8);
  backdrop-filter: blur(5px);
  overflow-y: auto;
}

.cfm-backdrop.open { display: flex; }

.cfm-panel {
  width: 100%;
  max-width: 520px;
  background: var(--panel);
  border: 1px solid var(--rule-2);
  padding: 28px 26px 24px;
  margin: auto;
  position: relative;
}

.cfm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cfm-head h2 { font-size: 1.4rem; }
.cfm-close { background: none; border: none; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.cfm-close:hover { color: var(--phos); }
.cfm-sub { color: var(--muted); font-size: 0.9rem; margin: 0 0 20px; line-height: 1.6; }

.cfm-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cfm-field label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cfm-field input, .cfm-field select, .cfm-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--ink);
  border: 1px solid var(--rule-2);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 0.93rem;
}
.cfm-field textarea { resize: vertical; min-height: 104px; }
.cfm-field input:focus, .cfm-field select:focus, .cfm-field textarea:focus { outline: none; border-color: var(--phos); }

.cfm-row { display: flex; gap: 14px; }
.cfm-row .cfm-field { flex: 1; min-width: 0; }

.cfm-status { font-size: 0.88rem; line-height: 1.5; padding: 11px 13px; margin-top: 12px; display: none; border: 1px solid var(--rule-2); }
.cfm-status.ok  { display: block; border-color: var(--rule-hot); background: var(--phos-glow); color: var(--phos); }
.cfm-status.err { display: block; border-color: rgba(255,95,86,.4); background: rgba(255,95,86,.08); color: var(--alert); }

.cfm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

@media (max-width: 560px) {
  .cfm-panel { padding: 22px 18px 20px; }
  .cfm-row { flex-wrap: wrap; gap: 0; }
  .cfm-row .cfm-field { flex: 1 1 100%; }
  .cfm-actions { flex-direction: column-reverse; }
  .cfm-actions .btn { width: 100%; }
}

/* Support-chat launcher (support-chat.js owns the panel markup; these are
   the launcher + shell rules the public pages need). */
.sc-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px 11px 12px;
  background: var(--phos);
  color: var(--on-signal);
  border: 1px solid var(--phos);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}

.sc-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(125,250,156,.55); }
.sc-launcher.hidden { opacity: 0; pointer-events: none; }
.sc-launcher-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: rgba(5,33,15,.14); flex-shrink: 0; }

@media (max-width: 640px) {
  .sc-launcher { right: 14px; bottom: 14px; padding: 11px; }
  .sc-launcher-label { display: none; }
}

.spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid var(--rule-2);
  border-top-color: var(--phos);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -2px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 14px);
  background: var(--panel-2);
  border: 1px solid var(--rule-2);
  color: var(--bone);
  padding: 13px 20px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  z-index: 200;
  opacity: 0;
  transition: opacity .25s, transform .25s;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.success { border-color: var(--rule-hot); color: var(--phos); }
.toast.error { border-color: rgba(255,95,86,.4); color: var(--alert); }

/* ───────────────────────────────────────────────────────────────────────
   18. Utilities
   ─────────────────────────────────────────────────────────────────────── */

.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.hide { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ───────────────────────────────────────────────────────────────────────
   19. Page-specific components
   Carried over from the pages themselves (auth shell, contact, team,
   blog, role posting, platform rows) and re-expressed in the console
   language. Kept here rather than inline so every page shares one source.
   ─────────────────────────────────────────────────────────────────────── */

/* Icon tints used by converted node icons. */
.node-ico.accent { border-color: var(--rule-hot); color: var(--phos); }
.node-ico.sunset { border-color: rgba(255,176,32,.4); color: var(--amber); }

/* ── Auth shell (login, 404) ──────────────────────────────────────── */
.auth-shell {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 8vw, 90px) var(--gutter);
  position: relative;
  z-index: 2;
}

.auth-card {
  width: 100%;
  max-width: 430px;
  background: var(--panel);
  border: 1px solid var(--rule-2);
  padding: clamp(30px, 5vw, 44px) clamp(24px, 4vw, 38px);
  position: relative;
}

.auth-card::before,
.auth-card::after {
  content: '';
  position: absolute;
  width: 11px; height: 11px;
  border: 1px solid var(--rule-hot);
  pointer-events: none;
}
.auth-card::before { top: 9px;    left: 9px;  border-right: none; border-bottom: none; }
.auth-card::after  { bottom: 9px; right: 9px; border-left: none;  border-top: none;    }

.auth-card h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom: 12px; }
.auth-card .lead,
.lead { color: var(--bone-2); font-size: 0.97rem; line-height: 1.7; margin-bottom: 26px; }

.auth-error {
  display: none;
  border: 1px solid rgba(255,95,86,.4);
  background: rgba(255,95,86,.08);
  color: var(--alert);
  padding: 11px 13px;
  font-size: 0.88rem;
  margin-bottom: 16px;
}
.auth-error.show { display: block; }

.auth-foot {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--dim);
  line-height: 1.8;
}
.auth-foot a { color: var(--phos); text-decoration: none; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

.btn-google { background: var(--bone); border-color: var(--bone); color: #10151c; font-weight: 600; }
.btn-google:hover { background: #fff; border-color: #fff; }

/* Legacy brand lockup (login header) mapped to the new mark. */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; color: var(--bone); }
.brand-mark { position: relative; width: 24px; height: 24px; border: 1.5px solid var(--phos); flex-shrink: 0; }
.brand-mark::before { content: ''; position: absolute; inset: 5px; background: var(--phos); }

/* ── Contact page ─────────────────────────────────────────────────── */
.contact-shell { padding: clamp(48px, 7vw, 90px) 0 clamp(48px, 7vw, 96px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-lede { color: var(--bone-2); font-size: 1rem; line-height: 1.72; margin-bottom: 28px; max-width: 46ch; }

/* The aside holds the page headline AND the channel panels, so it must
   stay a plain block — giving it a rule-coloured grid background paints a
   slab behind the h1. Each channel carries its own frame instead. */
.contact-aside { display: block; }
.contact-aside h1 { margin-bottom: 18px; }
.contact-channel { background: var(--ink-2); border: 1px solid var(--rule); padding: 20px 22px; }
.contact-channel-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.contact-channel-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule-2); color: var(--phos); flex-shrink: 0; }
.contact-channel-icon svg { width: 16px; height: 16px; }
.contact-channel-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.contact-channel-link { display: block; color: var(--bone); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.contact-channel-link:hover { color: var(--phos); }
.contact-channel-note { color: var(--muted); font-size: 0.85rem; margin-top: 6px; line-height: 1.55; }

.contact-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 24px; }
.contact-trust > div { background: var(--ink-2); padding: 18px 16px; }
.contact-trust-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--bone); }
.contact-trust-unit { font-size: 0.55em; color: var(--phos); margin-left: 3px; }
.contact-trust-label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

.contact-form-card { background: var(--panel); border: 1px solid var(--rule-2); padding: clamp(24px, 4vw, 36px); position: relative; }
.contact-form-head { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 8px; }
.contact-form-sub { color: var(--muted); font-size: 0.92rem; margin-bottom: 24px; }
.contact-form-disclaimer { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--dim); margin-top: 14px; line-height: 1.7; }
.contact-form-disclaimer.error { color: var(--alert); }
.contact-form-disclaimer.success { color: var(--phos); }

/* Legacy .form wrapper — its children are already .field / .field-row. */
.form { display: block; }

/* ── About: team + quotes + stats ─────────────────────────────────── */
.hero-stat-num { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; line-height: 1; color: var(--bone); }
.hero-stat-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

.team-avatar { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--rule-2); filter: grayscale(1) contrast(1.05); margin-bottom: 16px; }
.node:hover .team-avatar { filter: none; border-color: var(--rule-hot); }
.team-linkedin { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--phos); text-decoration: none; }
.team-linkedin:hover { text-decoration: underline; text-underline-offset: 3px; }

.quote-text { color: var(--bone-2); font-size: 0.97rem; line-height: 1.72; margin-bottom: 20px; }
.quote-author { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--rule); padding-top: 16px; }
.quote-avatar { width: 38px; height: 38px; object-fit: cover; border: 1px solid var(--rule-2); flex-shrink: 0; }
.quote-name { display: block; font-size: 0.88rem; font-weight: 600; color: var(--bone); }
.quote-role { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

/* ── Fields: platform rows ────────────────────────────────────────── */
.platform-logo { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule-2); color: var(--phos); margin-bottom: 16px; font-family: var(--font-display); font-weight: 700; }
.platform-meta { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }

/* ── Blog cards ───────────────────────────────────────────────────── */
.post-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: grayscale(.55) contrast(1.05); border-bottom: 1px solid var(--rule); }
.node:hover .post-card-img { filter: none; }
.post-card-body { padding: 22px 22px 0; }
.post-card-meta { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.post-card-foot { padding: 16px 22px 22px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--phos); }

/* ── Role posting (expertise) ─────────────────────────────────────── */
.role-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 34px; }
.role-fact { background: var(--ink-2); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.role-fact-label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.role-fact-value { font-size: 0.94rem; color: var(--bone); font-weight: 500; }

.role-body { max-width: 800px; background: var(--panel); border: 1px solid var(--rule); padding: clamp(26px, 4vw, 40px); }
.role-body h3 { margin: 32px 0 14px; color: var(--bone); }
.role-body h3:first-child { margin-top: 0; }
.role-body p { color: var(--bone-2); line-height: 1.75; margin-bottom: 14px; }
.role-body ul { list-style: none; padding: 0; margin: 0 0 18px; }
.role-body ul li { position: relative; padding-left: 24px; margin-bottom: 9px; color: var(--bone-2); line-height: 1.68; }
.role-body ul li::before { content: ''; position: absolute; left: 4px; top: 0.68em; width: 6px; height: 6px; border: 1px solid var(--phos); transform: rotate(45deg); }

.role-notice { border: 1px solid rgba(255,176,32,.34); background: rgba(255,176,32,.07); padding: 14px 16px; color: var(--bone) !important; font-size: 0.92rem; }
.role-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); }
@media (max-width: 560px) { .role-cta .btn { width: 100%; } }