/*
 * verditnxtgen.css — Global Design System v7.0
 * ═══════════════════════════════════════════════════════════════════════
 *
 *  DESIGN LANGUAGE: "Enterprise Telemetry"
 *  DNA: Datadog data density  ×  Vercel monochrome precision  ×  Stripe
 *       editorial confidence. Dark-first. Signal-rich. Zero decoration
 *       that doesn't carry data.
 *
 *  SIGNATURE ELEMENT: The "telemetry grid" — a repeating dot-matrix
 *  texture on dark sections (SVG data-URI background-image) that reads
 *  as infrastructure substrate without adding visual weight.
 *
 *  PALETTE (6 tokens):
 *    --ink   #0d1b2a   Primary dark surface (nav, hero, code blocks)
 *    --surface #0f2035  Slightly lifted dark (cards on dark bg)
 *    --gold  #f29900   Primary accent — CTA, scores, live data
 *    --cyan  #00c2ff   Secondary data accent — latency, network signals
 *    --green #1e8e3e   Success / pass states
 *    --red   #d93025   Failure / warn states
 *
 *  Light surface system (pages, cards):
 *    --white  #ffffff
 *    --paper  #f8f9fa  Off-white sections
 *    --line   #e8eaed  Dividers
 *    --fog    #5f6368  Body text / labels
 *    --slate  #3c4043  Secondary text
 *
 *  TYPOGRAPHY (3 roles):
 *    Display : Instrument Serif — editorial authority, used sparingly
 *    Body    : Geist — clean modern sans, workhorse
 *    Data    : Geist Mono — ALL numbers, labels, badges, code
 *
 *  LAYOUT CONSTRAINTS:
 *    max-width 1200px, 24px gutter, 16px on mobile
 *    border-radius: 0 everywhere except pills (3px) and range inputs
 *    Shadow style: flat offset (brutal) on light, glow on dark
 *
 * ═══════════════════════════════════════════════════════════════════════
 */

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Dark palette */
  --ink:         #0d1b2a;
  --surface:     #0f2035;
  --surface-2:   #162a40;
  --rim:         rgba(255,255,255,0.08);   /* border on dark bg */

  /* Light palette */
  --white:       #ffffff;
  --paper:       #f8f9fa;
  --line:        #e8eaed;
  --slate:       #3c4043;
  --fog:         #5f6368;

  /* Brand accents */
  --gold:        #f29900;
  --gold-strong: #e37400;
  --gold-bg:     #fef7e0;
  --cyan:        #00c2ff;
  --cyan-bg:     rgba(0,194,255,0.08);
  --green:       #1e8e3e;
  --green-bg:    #e6f4ea;
  --red:         #d93025;
  --red-bg:      #fce8e6;
  --blue:        #1a73e8;
  --blue-dark:   #0d47a1;
  --blue-light:  #e8f0fe;
  --purple:      #7c4dff;

  /* Typography */
  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'Geist Mono', 'SF Mono', 'Fira Code', monospace;

  /* Layout */
  --max-w:  1200px;
  --nav-h:  60px;
  --r:      0px;         /* global border-radius = 0 (brutalist) */
  --r-pill: 3px;         /* only pills / badges */

  /* Shadows */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.12);
  --shadow-brutal: 4px 4px 0 var(--ink);
  --shadow-gold:   4px 4px 0 var(--gold);
  --glow-gold:     0 0 20px rgba(242,153,0,0.25);
  --glow-cyan:     0 0 16px rgba(0,194,255,0.2);

  /* Telemetry grid texture (dark sections) */
  --grid-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1' cy='1' r='0.8' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E");
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--sans);
  background: var(--white);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ── Layout ─────────────────────────────────────────────────────────── */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 768px) { .wrap { padding: 0 16px; } }

/* ── Header / Nav ────────────────────────────────────────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--ink);
  border-bottom: 1px solid var(--rim);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  overflow: visible;
  /* telemetry texture on nav */
  background-image: var(--grid-texture);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 24px;
}

/* ── Logo ─────────────────────────────────────────────────────────── */
.logo {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--white);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.logo:hover { text-decoration: none; color: var(--gold); }
.logo em { color: var(--gold); font-style: normal; }
.logo svg rect { transition: fill 0.2s; }
.logo:hover svg rect:nth-child(2) { fill: white; }

/* ── Live badge ──────────────────────────────────────────────────── */
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--green);
  border: 1px solid rgba(30,142,62,0.5);
  padding: 2px 7px;
  letter-spacing: 0.12em;
  margin-left: 6px;
  background: rgba(30,142,62,0.08);
}
.live-dot {
  width: 5px; height: 5px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse 2s infinite;
  box-shadow: 0 0 5px var(--green);
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }

/* ── Desktop nav links ────────────────────────────────────────────── */
header nav {
  display: flex;
  align-items: center;
  gap: 2px;
  /* PORTAL FIX: removed flex:1 — it was consuming all header space,
     leaving zero room for the nav-auth-container portal button */
}
header nav .link {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  padding: 6px 12px;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
header nav .link:hover,
header nav .link.active {
  background: rgba(255,255,255,0.07);
  color: var(--white);
  text-decoration: none;
}
header nav .link.active {
  color: var(--gold);
}

/* ── CTA button in nav ────────────────────────────────────────────── */
.nav-cta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--ink) !important;
  padding: 8px 16px;
  text-decoration: none !important;
  transition: background 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover {
  background: #ffaa1a;
  box-shadow: var(--glow-gold);
  text-decoration: none;
}

/* ── Hamburger ────────────────────────────────────────────────────── */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rim);
  padding: 6px 10px;
  font-size: 18px;
  cursor: pointer;
  color: var(--white);
  line-height: 1;
  flex-shrink: 0;
}

/* ── Mobile nav ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-toggle { display: block; }
  header nav {
    display: none;

    /* MOBILE-NAV-VANISH FIX (2026-07-13)
       Symptom: open the burger on a phone, scroll — the menu disappears but the
       dimmed backdrop stays, leaving a greyed-out page with no menu on it.

       Root cause (two bugs compounding):
         1. This dropdown was `position: absolute`, i.e. positioned against its
            nearest positioned ancestor — <header>, which is `position: sticky`.
         2. The scroll-lock rule (see body.vng-nav-open in the Mobile Hardening
            Layer) set `overflow: hidden` on <body>. A clipped overflow on an
            ancestor SILENTLY BREAKS `position: sticky` on its descendants — so
            the moment the menu opened, the header stopped sticking to the
            viewport. And `overflow:hidden` on <body> does NOT actually lock
            scrolling on iOS Safari, so the user could still scroll.
       Together: user scrolls → the no-longer-sticky header scrolls away → this
       absolutely-positioned dropdown rides off-screen with it → meanwhile
       .nav-backdrop (which is `position: fixed`) stays glued to the viewport.
       Dimmed screen, no menu. Exactly the reported bug.

       Fix: anchor the dropdown to the VIEWPORT (`position: fixed`) — the same
       coordinate space the backdrop already uses. The two can now never desync,
       no matter what happens to the header's sticky behaviour. The scroll-lock
       itself is also fixed properly (see body.vng-nav-open). */
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--ink);
    background-image: var(--grid-texture);
    border-bottom: 2px solid var(--gold);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
    z-index: 300;
    box-shadow: var(--shadow-lg);
    /* A long menu scrolls inside itself rather than running off-screen. dvh
       (dynamic viewport height) accounts for mobile browser chrome collapsing;
       the vh line is the fallback for engines without dvh support. */
    max-height: calc(100vh - var(--nav-h));
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Don't chain the menu's own scroll to the page underneath it. */
    overscroll-behavior: contain;
  }
  header nav.open { display: flex; }
  header nav .link {
    padding: 12px 20px;
    font-size: 12px;
    border-bottom: 1px solid var(--rim);
  }
  header nav .link:last-child { border-bottom: none; }
  .nav-cta { margin-left: 0; margin: 8px 16px 4px; }

  /* Backdrop: dims the rest of the page while the mobile menu is open so
     there's no visible seam between the dropdown and whatever content sits
     beneath it. Toggled via the same .open class as the nav (see JS below). */
  .nav-backdrop {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 290;   /* below header nav (300), above page content */
  }
  .nav-backdrop.open { display: block; }
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 20px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  white-space: nowrap;
  line-height: 1;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  background: #ffaa1a;
  box-shadow: 6px 6px 0 var(--gold-strong);
  transform: translate(-2px, -2px);
  color: var(--ink);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.25);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.4);
  color: var(--white);
}

.btn-ghost {
  background: transparent;
  color: var(--fog);
  border: 2px solid var(--line);
}
.btn-ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: var(--shadow-brutal);
  transform: translate(-2px,-2px);
}

.btn-ink {
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-brutal);
}
.btn-ink:hover {
  box-shadow: 6px 6px 0 var(--gold);
  transform: translate(-2px,-2px);
  color: var(--white);
}

/* ── Section ─────────────────────────────────────────────────────── */
.section {
  padding: 64px 0;
}
.section-sm { padding: 40px 0; }
.section-lg { padding: 96px 0; }

/* ── Eyebrow labels ───────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

.eyebrow-dark {
  color: var(--fog);
}
.eyebrow-dark::before { background: var(--fog); }

/* ── Section headings ─────────────────────────────────────────────── */
.section-title {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 16px;
}
.section-title em { color: var(--gold); font-style: normal; }

.section-sub {
  font-size: 15px;
  color: var(--fog);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 40px;
}

/* ── Cards ────────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line);
}

/* Brutal card (tools directory style) */
.card-brutal {
  background: var(--white);
  border: 2px solid var(--line);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
  box-shadow: 6px 6px 0 var(--ink);
}
.card-brutal:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
  border-color: var(--gold);
}

/* Dark card (on ink background) */
.card-dark {
  background: var(--surface);
  border: 1px solid var(--rim);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.card-dark:hover {
  border-color: rgba(242,153,0,0.4);
  box-shadow: var(--glow-gold);
}

/* KPI card — data-heavy stat blocks */
.kpi-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  padding: 20px 24px;
}
.kpi-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: 6px;
}
.kpi-value {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.kpi-unit {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fog);
  margin-left: 4px;
}
.kpi-delta {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kpi-delta.up   { color: var(--green); }
.kpi-delta.down { color: var(--red); }
.kpi-delta.flat { color: var(--fog); }

/* ── Score badge ──────────────────────────────────────────────────── */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  width: 48px;
  height: 48px;
  letter-spacing: -0.02em;
}
.score-badge.hi { background: var(--green-bg); color: var(--green); border: 2px solid var(--green); }
.score-badge.md { background: var(--gold-bg);  color: var(--gold-strong); border: 2px solid var(--gold); }
.score-badge.lo { background: var(--red-bg);   color: var(--red); border: 2px solid var(--red); }

/* ── Tag/badge pills ──────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--slate);
}
.tag-gold   { background: var(--gold-bg);  border-color: var(--gold);  color: var(--gold-strong); }
.tag-green  { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.tag-red    { background: var(--red-bg);   border-color: var(--red);   color: var(--red); }
.tag-cyan   { background: var(--cyan-bg);  border-color: var(--cyan);  color: var(--cyan); }
.tag-ink    { background: var(--ink);      border-color: var(--ink);   color: var(--gold); }

/* ── Bento grid (tools directory) ────────────────────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 64px;
}
.bento-card {
  background: var(--white);
  border: 2px solid var(--line);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s;
  box-shadow: 6px 6px 0 var(--ink);
}
.bento-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
  border-color: var(--gold);
}
.card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.card-link:hover { text-decoration: none; }
.bento-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.bento-name {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
}
.bento-count {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-strong);
}
.card-desc {
  font-size: 13px;
  color: var(--fog);
  margin: 0 0 20px 0;
  line-height: 1.6;
  flex-grow: 1;
}
.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: auto;
  color: var(--fog);
}

/* Mobile horizontal card scroll */
@media (max-width: 768px) {
  .bento-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 16px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .bento-grid::-webkit-scrollbar { height: 3px; }
  .bento-grid::-webkit-scrollbar-thumb { background: var(--gold); }
  .bento-grid > * {
    flex: 0 0 80vw;
    max-width: 320px;
    scroll-snap-align: start;
  }
}

/* ── Stat strip ───────────────────────────────────────────────────── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 28px;
}
.stat-cell {
  background: var(--white);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-cell-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--fog);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.stat-cell-value {
  font-family: var(--mono);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-cell-note {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--fog);
}

/* ── Dark stat bar (hero / banner stats) ─────────────────────────── */
.stat-bar-dark {
  background: var(--ink);
  background-image: var(--grid-texture);
  border-bottom: 1px solid var(--rim);
  padding: 20px 0;
}
.stat-bar-dark .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rim);
}
.stat-bar-cell {
  background: var(--ink);
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-bar-value {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--white);
}
.stat-bar-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  gap: 5px;
}
.stat-bar-cell.c-gold  .stat-bar-value { color: var(--gold); }
.stat-bar-cell.c-green .stat-bar-value { color: var(--green); }
.stat-bar-cell.c-cyan  .stat-bar-value { color: var(--cyan); }
.stat-bar-cell.c-red   .stat-bar-value { color: var(--red); }

@media (max-width: 768px) {
  .stat-bar-dark .wrap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stat-bar-dark .wrap { grid-template-columns: 1fr 1fr; }
}

/* ── Live pulse dot ───────────────────────────────────────────────── */
.pulse-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: pulse 2s infinite;
  box-shadow: 0 0 5px var(--green);
}

/* ── CSS-only bar charts ──────────────────────────────────────────── */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
}
.bar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fog);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-track {
  height: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--blue);
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.bar-fill.gold  { background: var(--gold); }
.bar-fill.green { background: var(--green); }
.bar-fill.cyan  { background: var(--cyan); }
.bar-fill.red   { background: var(--red); }
.bar-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate);
  text-align: right;
}

/* ── CSS-only sparkline (CSS transitions + clip-path) ─────────────── */
.sparkline {
  height: 48px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.spark-col {
  flex: 1;
  background: var(--blue);
  opacity: 0.65;
  border-radius: 1px 1px 0 0;
  transition: opacity 0.15s, height 0.6s cubic-bezier(0.16,1,0.3,1);
  min-width: 3px;
}
.spark-col:hover { opacity: 1; }
.spark-col.gold   { background: var(--gold); }
.spark-col.green  { background: var(--green); }
.spark-col.red    { background: var(--red); }

/* ── Bloat Index / Perf card ──────────────────────────────────────── */
.perf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 24px;
}
.perf-cell {
  background: var(--white);
  padding: 20px 24px;
}
.perf-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fog);
  margin-bottom: 8px;
}
.perf-value {
  font-family: var(--mono);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.perf-cell.memory .perf-value   { color: var(--cyan); }
.perf-cell.latency .perf-value  { color: var(--gold); }
.perf-cell.success .perf-value  { color: var(--green); }
.perf-cell.bloat .perf-value    { color: var(--red); }

.perf-bar {
  height: 4px;
  background: var(--paper);
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.perf-bar-fill {
  height: 100%;
  transition: width 1s cubic-bezier(0.16,1,0.3,1);
}

@media (max-width: 640px) {
  .perf-grid { grid-template-columns: 1fr; }
}

/* ── Score ring (CSS-only radial) ─────────────────────────────────── */
.score-ring-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
.score-ring {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  position: relative;
  flex-shrink: 0;
}
.score-ring::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--white);
}
.score-ring span { position: relative; z-index: 1; }
.score-ring.hi { background: conic-gradient(var(--green) var(--pct, 0%), var(--line) 0%); color: var(--green); }
.score-ring.md { background: conic-gradient(var(--gold) var(--pct, 0%), var(--line) 0%); color: var(--gold-strong); }
.score-ring.lo { background: conic-gradient(var(--red) var(--pct, 0%), var(--line) 0%); color: var(--red); }

/* ── Deploy / Tool detail page ────────────────────────────────────── */
.deploy-hero {
  background: var(--ink);
  background-image: var(--grid-texture);
  border-bottom: 2px solid var(--gold);
  padding: 40px 0 32px;
  color: var(--white);
}
.deploy-breadcrumb {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.deploy-breadcrumb a { color: rgba(255,255,255,0.4); }
.deploy-breadcrumb a:hover { color: var(--gold); text-decoration: none; }
.deploy-breadcrumb span { color: rgba(255,255,255,0.2); }

.deploy-name {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  line-height: 0.97;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 12px;
}

.deploy-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}

.deploy-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--rim);
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.04);
}
.deploy-badge.stars  { border-color: rgba(242,153,0,0.4); color: var(--gold); background: rgba(242,153,0,0.08); }
.deploy-badge.score-hi { border-color: rgba(30,142,62,0.5); color: var(--green); background: rgba(30,142,62,0.08); }
.deploy-badge.score-md { border-color: rgba(242,153,0,0.5); color: var(--gold);  background: rgba(242,153,0,0.08); }
.deploy-badge.score-lo { border-color: rgba(217,48,37,0.5); color: var(--red);   background: rgba(217,48,37,0.08); }
.deploy-badge.lang     { border-color: var(--rim); color: var(--cyan); background: var(--cyan-bg); }

/* Tool detail KPI strip (dark) */
.deploy-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rim);
  background: var(--surface);
}
.deploy-kpi-cell {
  padding: 16px 20px;
  border-right: 1px solid var(--rim);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.deploy-kpi-cell:last-child { border-right: none; }
.deploy-kpi-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.3);
}
.deploy-kpi-value {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
}
.deploy-kpi-value.gold  { color: var(--gold); }
.deploy-kpi-value.cyan  { color: var(--cyan); }
.deploy-kpi-value.green { color: var(--green); }
.deploy-kpi-value.red   { color: var(--red); }

@media (max-width: 640px) {
  .deploy-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .deploy-kpi-cell:nth-child(2) { border-right: none; }
}

.deploy-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.deploy-content h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fog);
  margin: 40px 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.deploy-content h2::before {
  content: '';
  width: 4px;
  height: 12px;
  background: var(--gold);
  display: inline-block;
  flex-shrink: 0;
}
.deploy-content p {
  font-size: 15px;
  color: var(--slate);
  line-height: 1.75;
  margin-bottom: 16px;
}
.deploy-content pre {
  background: var(--ink);
  background-image: var(--grid-texture);
  color: #e0e0e0;
  border: 1px solid var(--rim);
  border-left: 3px solid var(--gold);
  padding: 20px 24px;
  font-size: 12.5px;
  line-height: 1.7;
  overflow-x: auto;
  position: relative;
  font-family: var(--mono);
  margin-bottom: 16px;
}
.deploy-content a { color: var(--blue); }
.deploy-footer-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fog);
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* Install modal */
.install-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.install-modal-overlay.open { display: flex; }
.install-modal {
  background: var(--ink);
  border: 1px solid var(--rim);
  border-top: 2px solid var(--gold);
  max-width: 520px;
  width: 100%;
  padding: 28px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}

/* ── Filter bar ───────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 24px 0 40px;
  background: var(--ink);
  border: 1px solid var(--rim);
  padding: 16px 20px;
  background-image: var(--grid-texture);
}
.filter-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.4);
}
.filter-select {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--rim);
  background: var(--surface);
  color: var(--white);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.filter-select:hover, .filter-select:focus {
  border-color: var(--gold);
  background: var(--surface-2);
}
.search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 280px;
}
.search-input {
  width: 100%;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 8px 32px 8px 14px;
  border: 1px solid var(--rim);
  background: var(--surface);
  outline: none;
  color: var(--white);
  letter-spacing: 0.05em;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.search-input::placeholder { color: rgba(255,255,255,0.3); text-transform: uppercase; font-size: 10px; }
.search-input:focus { border-color: var(--gold); }
.search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px;
  display: none;
}
.result-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
#resetBtn {
  background: transparent;
  color: rgba(255,255,255,0.4);
  border: 1px solid var(--rim);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#resetBtn:hover { color: var(--white); border-color: rgba(255,255,255,0.3); }

/* ── No results / empty state ─────────────────────────────────────── */
.no-results {
  display: none;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--fog);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 48px 0;
  text-align: center;
  border: 2px dashed var(--line);
  margin-bottom: 32px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  border: 2px dashed var(--line);
  background: var(--paper);
  text-align: center;
  gap: 12px;
}
.empty-state__icon { font-size: 32px; opacity: 0.3; }
.empty-state__title {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.empty-state__sub { font-family: var(--mono); font-size: 11px; color: var(--fog); max-width: 320px; line-height: 1.6; }

/* ── Table ────────────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--line);
}
.data-table th {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fog);
  background: var(--paper);
  border-bottom: 2px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
}
.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--slate);
  vertical-align: middle;
}
.data-table tr:hover td { background: var(--paper); }
.data-table tr:last-child td { border-bottom: none; }
@media (max-width: 768px) {
  .data-table th:nth-child(n+4),
  .data-table td:nth-child(n+4) { display: none; }
}

/* ── Tab bar ──────────────────────────────────────────────────────── */
.tab-bar {
  background: var(--white);
  border-bottom: 2px solid var(--line);
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab-bar::-webkit-scrollbar { height: 0; }
.tab-bar .wrap { display: flex; gap: 0; min-width: max-content; }
.tab-bar a {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 20px;
  text-decoration: none;
  color: var(--fog);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.tab-bar a:hover { color: var(--ink); text-decoration: none; }
.tab-bar a.active-tab { color: var(--blue); border-bottom-color: var(--blue); }

/* ── Dashboard: signal banner ─────────────────────────────────────── */
.signal-banner {
  background: var(--ink);
  background-image: var(--grid-texture);
  border-bottom: 2px solid var(--gold);
}
.signal-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 24px 24px 28px;
}
.signal-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.signal-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  animation: pulse 2s infinite;
  box-shadow: 0 0 6px var(--green);
}
.signal-row {
  display: grid;
  grid-template-columns: 110px 1fr 90px 90px 90px;
  align-items: center;
  gap: 24px;
}
.signal-pct {
  font-family: var(--mono);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.04em;
}
.signal-bar-label {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.signal-bar-label span:last-child { color: var(--green); }
.signal-bar-track {
  height: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
}
.signal-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue) 0%, var(--gold) 70%, var(--green) 100%);
  width: 0%;
  transition: width 1.4s cubic-bezier(0.16,1,0.3,1);
}
.signal-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--rim);
  background: rgba(255,255,255,0.03);
  gap: 4px;
  text-align: center;
}
.signal-stat-val {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.signal-stat-lbl {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .1em;
}
@media (max-width: 768px) {
  .signal-row { grid-template-columns: 1fr; gap: 16px; }
  .signal-stat-pill { display: inline-flex; flex-direction: row; gap: 8px; align-items: center; }
}

/* ── Flywheel KPI bar ─────────────────────────────────────────────── */
.flywheel-banner {
  background: var(--ink);
  border-bottom: 1px solid var(--rim);
}
.flywheel-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.flywheel-stat {
  padding: 16px 20px;
  border-right: 1px solid var(--rim);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.flywheel-stat:last-child { border-right: none; }
.flywheel-number {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
}
.flywheel-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .1em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.flywheel-alert-stat .flywheel-number { color: var(--red); }
.flywheel-warn-stat  .flywheel-number { color: var(--gold); }
@media (max-width: 640px) {
  .flywheel-inner { grid-template-columns: 1fr 1fr; }
  .flywheel-stat:nth-child(2n) { border-right: none; }
  .flywheel-stat { border-bottom: 1px solid var(--rim); }
}

/* ── Taxonomy grid ────────────────────────────────────────────────── */
.taxonomy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
.taxonomy-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.15s;
}
.taxonomy-card:hover { border-color: var(--gold); }
.taxonomy-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
@media (max-width: 640px) { .taxonomy-grid { grid-template-columns: 1fr 1fr; } }

/* ── Roadmap / phases ─────────────────────────────────────────────── */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 2px solid var(--line);
}
.phase-card {
  padding: 28px 24px;
  border-right: 2px solid var(--line);
  position: relative;
  overflow: hidden;
}
.phase-card:last-child { border-right: none; }
.phase-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.phase-card.p1::before { background: var(--blue); }
.phase-card.p2::before { background: var(--cyan); }
.phase-card.p3::before { background: var(--gold); }
.phase-card.p4::before { background: var(--green); }
.phase-card.active { background: var(--paper); }
.phase-num {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: 10px;
}
.phase-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 10px;
}
.phase-desc {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fog);
  line-height: 1.65;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.phase-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 16px;
  padding: 3px 8px;
  border: 1px solid var(--line);
}
.phase-status.live   { color: var(--green); border-color: rgba(30,142,62,0.4); background: var(--green-bg); }
.phase-status.active { color: var(--gold);  border-color: rgba(242,153,0,0.4); background: var(--gold-bg); }
.phase-status.planned{ color: var(--fog);   background: var(--paper); }
@media (max-width: 900px) { .roadmap-grid:not(#pipelineGrid) { grid-template-columns: 1fr 1fr; } .phase-card { border-bottom: 2px solid var(--line); } }
@media (max-width: 480px) { .roadmap-grid:not(#pipelineGrid) { grid-template-columns: 1fr; } }

/* ── Newsletter section ───────────────────────────────────────────── */
.nl-section {
  background: var(--ink);
  background-image: var(--grid-texture);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  padding: 56px 0;
  text-align: center;
}
.nl-inner { max-width: 560px; margin: 0 auto; }
.nl-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.nl-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 12px;
}
.nl-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin-bottom: 28px;
}
.nl-form {
  display: flex;
  gap: 0;
  max-width: 440px;
  margin: 0 auto;
}
.nl-input {
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  border-right: none;
  color: var(--white);
  outline: none;
  transition: border-color 0.15s;
}
.nl-input::placeholder { color: rgba(255,255,255,0.3); }
.nl-input:focus { border-color: var(--gold); }
.nl-btn {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 20px;
  background: var(--gold);
  color: var(--ink);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.nl-btn:hover { background: #ffaa1a; }
@media (max-width: 480px) {
  .nl-form { flex-direction: column; }
  .nl-input { border-right: 1px solid rgba(255,255,255,0.2); border-bottom: none; }
}

/* ── Footer ───────────────────────────────────────────────────────── */
footer {
  background: var(--ink);
  background-image: var(--grid-texture);
  border-top: 1px solid var(--rim);
  color: rgba(255,255,255,0.4);
  padding-top: 48px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rim);
}
.footer-brand p {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  margin-top: 12px;
  max-width: 280px;
  line-height: 1.6;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.footer-col-title {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 12px;
}
footer a {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
  transition: color 0.15s;
}
footer a:hover { color: var(--white); text-decoration: none; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255,255,255,0.2);
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-links { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .footer-links { grid-template-columns: 1fr 1fr; }
}

/* ── Breadcrumb (light pages) ─────────────────────────────────────── */
.breadcrumb {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--fog);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.breadcrumb a { color: var(--fog); }
.breadcrumb a:hover { color: var(--blue); text-decoration: none; }
.breadcrumb span { color: var(--line); }

/* ── Compare page ─────────────────────────────────────────────────── */
.compare-box {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  padding: 32px;
  max-width: 1080px;
  margin: 12px auto 54px;
}
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.cmp-result { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cmp-card { border: 1px solid var(--line); overflow: hidden; }
.cmp-card-head { background: var(--paper); padding: 20px; border-bottom: 1px solid var(--line); }
.sig-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.sig-name { color: var(--slate); font-size: 12px; font-family: var(--mono); }
.sig-bar  { width: 60px; height: 4px; background: var(--line); overflow: hidden; }
.sig-fill { height: 100%; }
.sig-val  { font-family: var(--mono); font-size: 11px; color: var(--fog); min-width: 24px; text-align: right; }
.winner-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  background: var(--gold-bg); border: 1px solid var(--gold); color: var(--gold-strong);
  padding: 3px 8px; letter-spacing: 0.06em;
}
@media (max-width: 768px) { .cmp-grid { grid-template-columns: 1fr; } .cmp-result { grid-template-columns: 1fr; } }

/* ── Hero page ────────────────────────────────────────────────────── */
.page-hero {
  background: var(--ink);
  background-image: var(--grid-texture);
  color: var(--white);
  border-bottom: 2px solid var(--gold);
  padding: 56px 0 48px;
}
.hero-grid-wrap {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .hero-grid-wrap { grid-template-columns: 1fr; gap: 32px; }
  #hero-widget { margin-top: 0; }
}

/* Hero widget (dark glass card) */
.hero-widget {
  background: var(--surface);
  border: 1px solid var(--rim);
  border-top: 2px solid var(--gold);
  padding: 20px;
}

/* ── Hero search autocomplete ─────────────────────────────────────── */
#hero-ac {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--ink);
  border: 1px solid var(--rim);
  border-top: 1px solid var(--gold);
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

/* ── Misc utilities ───────────────────────────────────────────────── */
.c-blue   { color: var(--blue)  !important; }
.c-green  { color: var(--green) !important; }
.c-gold   { color: var(--gold)  !important; }
.c-red    { color: var(--red)   !important; }
.c-cyan   { color: var(--cyan)  !important; }
.c-white  { color: var(--white) !important; }
.c-fog    { color: var(--fog)   !important; }

.mono { font-family: var(--mono); }
.serif{ font-family: var(--serif); }

.hide-mobile { }
@media (max-width: 768px) { .hide-mobile { display: none !important; } }

/* ── Skeleton loading ─────────────────────────────────────────────── */
.skeleton-card {
  background: linear-gradient(90deg, var(--paper) 0%, var(--line) 50%, var(--paper) 100%);
  background-size: 200% 100%;
  border: 2px solid var(--line) !important;
  box-shadow: none !important;
  height: 180px;
  animation: skeleton-sweep 1.6s ease-in-out infinite;
}
@keyframes skeleton-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Error / alert states ─────────────────────────────────────────── */
.error-state {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fog);
  padding: 32px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  background: var(--paper);
  line-height: 1.8;
}
.error-state code { background: var(--line); padding: 2px 6px; font-size: 11px; color: var(--ink); }

/* ── Report / audit page ──────────────────────────────────────────── */
.hero-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 6px 12px;
  border: 1px solid var(--rim);
  background: var(--ink);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.hero-tag.optimized { background: var(--green); color: var(--white); border-color: var(--green); }

/* ── Chip filters (dashboard) ─────────────────────────────────────── */
.wh-chip {
  font-family: var(--mono);
  font-size: 10px;
  padding: 5px 10px;
  border: 1px solid var(--rim);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  user-select: none;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.1s;
  white-space: nowrap;
}
.wh-chip.on {
  background: rgba(242,153,0,0.15);
  border-color: var(--gold);
  color: var(--white);
  font-weight: 700;
}

/* ── MCP chip ─────────────────────────────────────────────────────── */
.mcp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--ink);
  color: var(--gold);
  padding: 6px 12px;
  border: 1px solid var(--rim);
}

/* ── Dashboard content panes ──────────────────────────────────────── */
/* pane layout — display toggled by JS, not CSS */
.pane-section { max-width: var(--max-w); margin: 0 auto; padding: 28px 24px; overflow-x: hidden; box-sizing: border-box; }

/* Dash section head */
.dash-section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0 14px;
}
.dash-section-title {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fog);
  white-space: nowrap;
}
.dash-section-rule { flex: 1; height: 1px; background: var(--line); }

/* ── Print ────────────────────────────────────────────────────────── */
@media print {
  header, .nl-section, footer, .nav-cta { display: none; }
  .card, .bento-card, .card-brutal { break-inside: avoid; box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════════
   LIVE THREAT FEED TICKER
   Sprint: CISO Conversion Hooks
   Long-term notes:
   - CSS-only animation via @keyframes ticker-scroll. No JS timer.
   - Animation duration is set dynamically by JS based on item count.
   - :hover pauses the ticker (accessibility + usability).
   - prefers-reduced-motion: stops animation for users who need it.
   ═══════════════════════════════════════════════════════════════ */
.threat-feed-section {
  background:     var(--ink);
  border-top:     1px solid var(--rim);
  border-bottom:  2px solid var(--gold);
  padding:        10px 0;
  overflow:       hidden;
}

.threat-feed-header {
  display:         flex;
  align-items:     center;
  gap:             10px;
  margin-bottom:   8px;
  font-family:     var(--mono);
  font-size:       9px;
  font-weight:     700;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  color:           rgba(255,255,255,0.35);
}

.threat-feed-label { color: var(--gold); }
.threat-feed-timestamp { margin-left: auto; color: rgba(255,255,255,0.2); }

.threat-feed-dot {
  width:           6px;
  height:          6px;
  background:      var(--red);
  border-radius:   50%;
  flex-shrink:     0;
  animation:       pulse-threat 1.2s ease-in-out infinite;
}

@keyframes pulse-threat {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(217,48,37,0.6); }
  50%       { opacity: 0.4; box-shadow: 0 0 0 4px rgba(217,48,37,0); }
}

.threat-feed-marquee {
  overflow:  hidden;
  position:  relative;
  width:     100%;
  /* Soft fade at edges so items don't hard-clip */
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

.threat-feed-track {
  display:    flex;
  width:      max-content;
  animation:  ticker-scroll 35s linear infinite;
}

.threat-feed-track:hover {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.threat-item {
  display:      inline-flex;
  align-items:  center;
  gap:          10px;
  padding:      4px 20px;
  font-family:  var(--mono);
  font-size:    11px;
  border-right: 1px solid var(--rim);
  white-space:  nowrap;
  flex-shrink:  0;
}

.threat-item .threat-time {
  color:     rgba(255,255,255,0.25);
  font-size: 9px;
  min-width: 48px;
}

.threat-item.threat .threat-msg { color: var(--red);   font-weight: 600; }
.threat-item.clean  .threat-msg { color: var(--green); font-weight: 600; }

/* Reduced motion: replace scroll with static display */
@media (prefers-reduced-motion: reduce) {
  .threat-feed-track {
    animation:   none;
    flex-wrap:   wrap;
    width:       100%;
  }
  .threat-item { border-right: none; padding: 4px 12px; }
}


/* ═══════════════════════════════════════════════════════════════
   SOC2 / ISO27001 / NIST AI RMF COMPLIANCE MATRIX
   Sprint: CISO Conversion Hooks
   Design: 3-framework CSS toggle (radio :checked state, zero JS).
   Long-term: add new frameworks by adding a radio + label + panel.
   ═══════════════════════════════════════════════════════════════ */
.compliance-section {
  background:     var(--paper);
  border-top:     2px solid var(--line);
  border-bottom:  2px solid var(--line);
  padding:        64px 0;
}

.compliance-sub {
  font-size:    16px;
  color:        var(--fog);
  margin:       0 0 36px;
  max-width:    560px;
  line-height:  1.6;
}

/* ── Tab toggle (CSS-only, radio buttons hidden) ─────────── */
.compliance-radio { display: none; }

.compliance-tab-labels {
  display:        flex;
  gap:            4px;
  margin-bottom:  28px;
  border-bottom:  2px solid var(--line);
  padding-bottom: 0;
}

.compliance-tab-label {
  font-family:     var(--mono);
  font-size:       11px;
  font-weight:     700;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  padding:         10px 20px 12px;
  cursor:          pointer;
  color:           var(--fog);
  border:          2px solid transparent;
  border-bottom:   none;
  margin-bottom:   -2px;
  transition:      color 0.15s, background 0.15s;
  user-select:     none;
}
.compliance-tab-label:hover { color: var(--ink); background: rgba(0,0,0,0.03); }

/* Show active tab */
#tab-soc2:checked  ~ .compliance-tab-labels label[for="tab-soc2"],
#tab-iso:checked   ~ .compliance-tab-labels label[for="tab-iso"],
#tab-nist:checked  ~ .compliance-tab-labels label[for="tab-nist"] {
  color:      var(--ink);
  border:     2px solid var(--line);
  border-bottom-color: var(--paper);
  background: var(--paper);
}

/* Hide all panels by default */
.compliance-panel { display: none; }

/* Show active panel */
#tab-soc2:checked  ~ .compliance-panels #panel-soc2,
#tab-iso:checked   ~ .compliance-panels #panel-iso,
#tab-nist:checked  ~ .compliance-panels #panel-nist {
  display: block;
}

/* ── Compliance card layout ──────────────────────────────── */
.compliance-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   24px;
  max-width:             1000px;
}

.compliance-card {
  background:  var(--white);
  border:      2px solid var(--line);
  padding:     32px;
  box-shadow:  6px 6px 0 var(--ink);
  transition:  transform 0.15s ease, box-shadow 0.15s ease;
}
.compliance-card:hover {
  transform:  translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink);
}

.compliance-badge {
  display:         inline-block;
  font-family:     var(--mono);
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  padding:         6px 14px;
  margin-bottom:   24px;
  color:           #fff;
}
.compliance-badge-soc  { background: var(--cyan); }
.compliance-badge-iso  { background: var(--gold); }
.compliance-badge-nist { background: var(--ink);  }

.compliance-control {
  display:               grid;
  grid-template-columns: 80px 1fr;
  gap:                   6px 16px;
  padding:               14px 0;
  border-bottom:         1px solid var(--line);
}
.compliance-control:last-child { border-bottom: none; padding-bottom: 0; }

.compliance-code {
  font-family:  var(--mono);
  font-size:    11px;
  font-weight:  700;
  color:        var(--ink);
  grid-row:     1 / 3;
  align-self:   center;
}
.compliance-desc {
  font-family:     var(--mono);
  font-size:       10px;
  font-weight:     700;
  color:           var(--slate);
  text-transform:  uppercase;
  letter-spacing:  0.06em;
}
.compliance-check {
  font-family:  var(--mono);
  font-size:    12px;
  color:        var(--fog);
  line-height:  1.55;
}

/* ── Evidence column ─────────────────────────────────────── */
.compliance-evidence {
  background:  var(--white);
  border:      1px solid var(--line);
  padding:     28px 32px;
}

.compliance-evidence-title {
  font-family:     var(--mono);
  font-size:       9px;
  font-weight:     700;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  color:           var(--fog);
  margin-bottom:   20px;
}

.compliance-evidence-item {
  display:       flex;
  gap:           14px;
  margin-bottom: 16px;
  font-family:   var(--mono);
  font-size:     12px;
  color:         var(--slate);
  line-height:   1.6;
}
.compliance-evidence-item:last-child { margin-bottom: 0; }

.compliance-evidence-icon {
  font-size:   16px;
  flex-shrink: 0;
  margin-top:  1px;
}

.compliance-evidence-item code {
  font-family:  var(--mono);
  font-size:    11px;
  background:   var(--line);
  padding:      1px 5px;
  border-radius: 2px;
  color:        var(--ink);
}

/* ── CTA below matrix ────────────────────────────────────── */
.compliance-cta {
  display:      flex;
  align-items:  center;
  gap:          20px;
  margin-top:   36px;
  flex-wrap:    wrap;
}
.compliance-cta-note {
  font-family:  var(--mono);
  font-size:    11px;
  color:        var(--fog);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .compliance-grid          { grid-template-columns: 1fr; }
  .compliance-tab-label     { padding: 8px 12px 10px; font-size: 10px; }
  .compliance-control       { grid-template-columns: 64px 1fr; }
  .threat-feed-section      { padding: 8px 0; }
}

/* ── Portal nav button (account.html conversion hook) ───────────────────── */
/* PORTAL FIX: Added base styles. Previously only :hover existed — no base style
   meant the button used the inline dark-on-dark color (--ink text on --surface bg)
   which was nearly invisible against the --ink header background.
   Now: gold border + white text on transparent = clearly visible on dark header. */
.btn-portal {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-family:     var(--mono);
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--gold) !important;
  background:      rgba(242,153,0,0.1);
  border:          1px solid rgba(242,153,0,0.5);
  padding:         7px 14px;
  text-decoration: none !important;
  transition:      background 0.15s, color 0.15s, border-color 0.15s;
  white-space:     nowrap;
  flex-shrink:     0;
  cursor:          pointer;
}
.btn-portal:hover {
  background:    rgba(242,153,0,0.2) !important;
  color:         #fff !important;
  border-color:  var(--gold) !important;
  text-decoration: none !important;
}
.btn-portal:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 2px;
}
/* FIX (mobile nav): the desktop Portal button (.nav-auth-container, fixed top-right
   position) is hidden on mobile because there's no room for it next to the
   hamburger icon. Previously NOTHING replaced it inside the dropdown menu — the
   Portal link was entirely absent from mobile navigation. Each page's <nav
   id="navLinks"> now includes a dedicated .link.link-portal entry (see HTML),
   styled distinctly below so it doesn't look like a near-duplicate of the
   orange "MCP API" CTA block beneath it. */
/* BUGFIX (duplicate "PORTAL" on desktop): .link-portal previously had NO default
   display rule — it only gained `display:flex` inside the mobile media query
   below, on the wrong assumption that something already hid it by default.
   Nothing did. header nav .link has no display property either, so the element
   rendered as a normal flex item on every screen size, appearing as a second,
   plain-text "PORTAL" sitting next to the real gold .btn-portal button on
   desktop. Fixed: hidden by default, only shown (display:flex) inside the
   mobile breakpoint where it's the sole Portal entry point. */
header nav .link-portal {
  display: none;
}
@media (max-width: 768px) {
  .nav-auth-container {
    display: none;  /* hides the top-right fixed-position button on mobile */
  }
  header nav .link-portal {
    display:        flex;
    align-items:    center;
    gap:            8px;
    color:          var(--gold) !important;
    font-weight:    700;
  }
  header nav .link-portal svg { flex-shrink: 0; }
}

/* ── Phase Pipeline cards (homepage "Proprietary Evaluation Standard" section) ─
   FIX: .pipeline-grid / .pipeline-card / .pipeline-status had ZERO CSS rules
   anywhere in this stylesheet — the entire section rendered with browser
   default block flow only, which is why status badges ("Live Telemetry",
   "In Progress", "Paywall Live", "Live") never lined up across cards: there
   was no grid forcing equal card heights and no flex column pinning the
   badge to a consistent bottom position regardless of description length. */
.pipeline-grid {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   16px;
  margin-top:            32px;
}
.pipeline-card {
  display:        flex;
  flex-direction: column;
  background:     var(--surface-1, #f7f5f0);
  border:         1px solid var(--line);
  border-top:     3px solid var(--cyan, #1b9aaa);
  padding:        20px;
  min-height:     280px;   /* equal card height regardless of description length */
}
/* Each phase gets a distinct top-border accent so the eye can track progress
   left-to-right at a glance, independent of the status badge color below. */
.pipeline-card.p1 { border-top-color: var(--green, #2e7d52); }
.pipeline-card.p2 { border-top-color: var(--cyan,  #1b9aaa); }
.pipeline-card.p3 { border-top-color: var(--gold,  #f29900); }
.pipeline-card.p4 { border-top-color: var(--cyan,  #1b9aaa); }
.pipeline-card.p5 { border-top-color: var(--green, #2e7d52); }

.pipeline-num {
  font-family:    var(--mono);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text-muted, #6b7280);
  margin-bottom:  10px;
}
.pipeline-title {
  font-family:   var(--serif);
  font-size:     22px;
  line-height:   1.15;
  margin-bottom: 12px;
  color:         var(--ink);
}
.pipeline-desc {
  font-size:   13px;
  line-height: 1.6;
  color:       var(--text-secondary, #4b5563);
  flex:        1;   /* fills remaining card height so every status badge below
                        lands on the same row regardless of description length */
  margin-bottom: 16px;
}

/* Status badge: shared base, color set per state below. The previous markup
   used inconsistent classes (ps-live vs ps-active for genuinely different
   states like "In Progress" and "Paywall Live") — normalized to four
   explicit, distinctly-colored states so status is unambiguous at a glance. */
.pipeline-status {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  align-self:      flex-start;   /* prevents badge from stretching full-width */
  font-family:     var(--mono);
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  padding:         6px 12px;
  border-radius:   3px;
  border:          1px solid currentColor;
  white-space:     nowrap;
}
.pipeline-status .live-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    currentColor;
  flex-shrink:   0;
}

/* Live & shipped — fully operational, no caveats */
.pipeline-status.ps-live {
  color:       var(--green, #2e7d52);
  background:  rgba(46,125,82,0.08);
}
/* Actively running, in active development this cycle — distinct from "live" */
.pipeline-status.ps-progress {
  color:       var(--cyan, #1b9aaa);
  background:  rgba(27,154,170,0.08);
}
/* Functioning but gated behind payment — distinct color from both live and
   in-progress so a visitor immediately understands "this works, but costs" */
.pipeline-status.ps-paywall {
  color:       var(--gold, #f29900);
  background:  rgba(242,153,0,0.08);
}
/* Planned / not yet started — clearly de-emphasized, muted gray */
.pipeline-status.ps-planned {
  color:       var(--text-muted, #6b7280);
  background:  rgba(107,114,128,0.08);
}

@media (max-width: 1024px) {
  .pipeline-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .pipeline-grid { grid-template-columns: 1fr; }
  .pipeline-card { min-height: auto; }
}

/* ── Code terminal blocks (Enterprise API "Bring the Swarm" + GitHub Actions
   "Block PRs that..." sections) ────────────────────────────────────────────
   FIX: .api-section-grid / .code-terminal / .code-body / .code-term-* / .c-*
   syntax-highlight spans had ZERO CSS rules anywhere in this stylesheet. The
   multi-line code content was rendering as plain inline HTML with the
   browser's default text flow — no monospace font, no white-space:pre, no
   preserved indentation — which collapsed the carefully source-formatted
   code into an unreadable single run of text with broken spacing. */
.api-section-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   48px;
  align-items:           center;
}
@media (max-width: 900px) {
  .api-section-grid { grid-template-columns: 1fr; gap: 28px; }
}

.code-terminal {
  background:    #1e1e1e;
  border-radius: 8px;
  overflow:      hidden;
  box-shadow:    var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.25));
  border:        1px solid rgba(255,255,255,0.08);
}
.code-term-bar {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         10px 14px;
  background:      #2a2a2a;
  border-bottom:   1px solid rgba(255,255,255,0.06);
}
.code-term-dots { display: flex; gap: 6px; flex-shrink: 0; }
.code-term-dot {
  width:         11px;
  height:        11px;
  border-radius: 50%;
}
.code-term-dot.r { background: #ff5f56; }
.code-term-dot.y { background: #ffbd2e; }
.code-term-dot.g { background: #27c93f; }
.code-term-title {
  flex:           1;
  font-family:    var(--mono);
  font-size:      11px;
  color:          rgba(255,255,255,0.45);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.code-term-copy {
  font-family:     var(--mono);
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  color:           rgba(255,255,255,0.55);
  background:      rgba(255,255,255,0.06);
  border:          1px solid rgba(255,255,255,0.1);
  border-radius:   4px;
  padding:         4px 10px;
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background 0.15s, color 0.15s;
}
.code-term-copy:hover {
  background: rgba(255,255,255,0.12);
  color:      #fff;
}

/* The actual code content. This is the critical fix: white-space:pre-wrap
   preserves the exact line breaks and leading-space indentation written in
   the HTML source, font-family is monospace, and line-height/padding give
   each line breathing room instead of the previous cramped default flow. */
.code-body {
  font-family:   var(--mono, 'JetBrains Mono', monospace);
  font-size:     12px;
  line-height:   1.65;
  color:         #d4d4d4;
  padding:       18px 20px;
  white-space:   pre-wrap;
  word-break:    break-word;
  overflow-x:    auto;
  margin:        0;
}

/* Syntax-highlight token colors — VS Code "Dark+" inspired palette, chosen
   for contrast against the #1e1e1e terminal background. */
.code-body .c-comment { color: #6a9955; font-style: italic; }
.code-body .c-key      { color: #9cdcfe; }
.code-body .c-str       { color: #ce9178; }
.code-body .c-num      { color: #b5cea8; }
.code-body .c-bool      { color: #569cd6; font-weight: 600; }
.code-body .c-fn         { color: #dcdcaa; }

@media (max-width: 600px) {
  .code-body { font-size: 11px; padding: 14px 16px; }
}

/* ── Score bars (score-methodology.html signal weight charts) ─────────────────
   FIX: .score-bar / .score-bar-fill had ZERO CSS rules anywhere in this
   stylesheet — same missing-module pattern as .pipeline-grid and
   .code-terminal found in earlier audits. The signal weight bars on the
   methodology page were rendering as collapsed, near-invisible default divs. */
.score-bar {
  height:        8px;
  background:    var(--paper, #f5f3ee);
  border:        1px solid var(--line);
  overflow:      hidden;
  border-radius: 2px;
}
.score-bar-fill {
  height:     100%;
  background: var(--gold);
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
}

/* ── Category weight selector (score-methodology.html "The 12 Signals") ───────
   FIX (deep audit — methodology page underselling its own system): the
   previous static chart showed one universal weight set, even though the
   real scoring engine (scraper.py CATEGORY_WEIGHTS) uses 8 distinct
   category-specific weight profiles plus a base fallback — already correctly
   described in this page's own "How It Works" step 3, just never reflected
   in the chart itself. Replaced with a real interactive selector below. */
.weight-cat-btn {
  font-family:     var(--mono);
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  padding:         7px 13px;
  border:          1px solid var(--line);
  background:      var(--paper, #f5f3ee);
  color:           var(--slate);
  cursor:          pointer;
  transition:      background 0.15s, color 0.15s, border-color 0.15s;
}
.weight-cat-btn:hover {
  border-color: var(--gold);
  color:        var(--ink);
}
.weight-cat-btn.active {
  background:   var(--ink);
  color:        #fff;
  border-color: var(--ink);
}
.weight-row {
  display:             grid;
  grid-template-columns: 150px 1fr 44px;
  align-items:         center;
  gap:                 12px;
  margin-bottom:       10px;
}
.weight-row-label {
  font-family: var(--mono);
  font-size:   10px;
  color:       var(--fog);
}
.weight-row-pct {
  font-family: var(--mono);
  font-size:   10px;
  text-align:  right;
  color:       var(--slate);
}

/* ── Utility: 3-column responsive grid ─────────────────────────────────────────
   FIX: .grid-3 was referenced in score-methodology.html's "How It Works" section
   but had ZERO CSS rules anywhere — same missing-module pattern found repeatedly
   across this site (.pipeline-grid, .code-terminal, .score-bar all had the same
   issue in earlier audits). Without this rule the 6 step-cards fell back to
   default block stacking — one per line on every screen size. Now genuinely
   3-per-row on desktop/tablet, collapsing to 1-per-row on mobile. */
.grid-3 {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* ── Utility: 2-column responsive grid ─────────────────────────────────────────
   FIX: same missing-module bug as .grid-3 above — .grid-2 is used 7 times on
   score-methodology.html (the "Manual Habit vs Cryptographic Provenance"
   comparison pairs, and the "12 Signals vs Score Tiers" side-by-side layout)
   but had zero CSS rules anywhere, falling back to default block stacking.
   Not explicitly reported in this round's bug list, but caught while fixing
   the identical pattern in .grid-3 within the same file — left unfixed it
   would have been the next bug report. */
.grid-2 {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 700px) {
  .grid-2 { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   VERDITNXTGEN CSS — v8.0 ADDITIONS
   ─────────────────────────────────────────────────────────────────────
   Addendum to the v7.0 base system. All rules here extend or override
   the base without modifying it, preserving full rollback capability.

   Scope:
     1. Section spacing — halved across the board (mentor directive)
     2. data-vng live state — loading skeleton + live pulse ring
     3. OWASP pill component — full LLM01–LLM10 dynamic state system
     4. Bloat Index bar — extended perf-bar for tool cards
     5. Tool card — GitHub stars, latency, memory inline signals
     6. Mobile swipe indicators — dots + edge-fade for card rows
     7. Dashboard — D1 live polling state, p95 latency cell
     8. Pricing — tier card component + feature row + toggle
     9. Connect-MCP — endpoint doc row, key generator, auth header callout
    10. Ghost Swarm — responsive SVG container + terminal sizing
    11. Score delta — leaderboard change badges
    12. Nav injection — shared nav JS compatibility state
    13. OWASP finding detail card
    14. Mobile card swipe — category row improvements
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. SECTION SPACING — 50% reduction ───────────────────────────────── */
/* Override the v7 defaults. All inline padding values on pages must be    */
/* eliminated and replaced with these classes — no more style="padding:…"  */
.section         { padding: 32px 0; }
.section-sm      { padding: 20px 0; }
.section-lg      { padding: 48px 0; }
.page-hero       { padding: 32px 0 24px; }

/* Hero padding variants used on specific pages */
.hero-compact    { padding: 24px 0 18px; }
.hero-standard   { padding: 36px 0 28px; }

/* Section dividers — replaces inline border-bottom styles */
.section-divider { border-bottom: 1px solid var(--line); }
.section-divider-gold { border-bottom: 2px solid var(--gold); }
.section-dark     { background: var(--ink); background-image: var(--grid-texture); color: var(--white); }
.section-paper    { background: var(--paper); }


/* ── 2. DATA-VNG LIVE STATE ────────────────────────────────────────────── */
/* Applied to any [data-vng] element by vng-live.js before the fetch        */
/* resolves so the user sees activity instead of a static dash placeholder. */

/* Loading shimmer — shown while fetch is in-flight */
[data-vng].vng-loading {
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(242,153,0,0.12) 50%,
    rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: vng-sweep 1.4s ease-in-out infinite;
  border-radius: 2px;
  min-width: 40px;
  display: inline-block;
}
@keyframes vng-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Live pulse ring — wraps a [data-vng] cell that is actively updating     */
/* Add class .vng-live to the wrapper container, not the value element.    */
.vng-live {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vng-live::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(30,142,62,0.5);
  animation: vng-ring 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes vng-ring {
  0%   { box-shadow: 0 0 0 0 rgba(30,142,62,0.5); }
  60%  { box-shadow: 0 0 0 6px rgba(30,142,62,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,142,62,0); }
}

/* Timestamp label for last-updated cells */
.vng-timestamp {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.06em;
}
.vng-timestamp.light { color: var(--fog); }

/* Stale indicator — when polling has not refreshed within threshold */
.vng-stale { opacity: 0.45; }
.vng-stale::after { background: var(--gold) !important; box-shadow: none !important; animation: none !important; }


/* ── 3. OWASP PILL COMPONENT ───────────────────────────────────────────── */
/* Dynamic mapping to harness_classifier.py output categories.             */
/* Usage: <span class="owasp-pill owasp-LLM01">LLM01</span>               */
/* JS maps API field "owasp_flags": ["LLM01","LLM06"] → adds pill per item */

.owasp-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid currentColor;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Default state — clean / no flag */
.owasp-pill.clean {
  color: var(--green);
  background: var(--green-bg);
  border-color: rgba(30,142,62,0.4);
}

/* Flagged state — any OWASP LLM risk detected */
.owasp-pill.flagged {
  color: var(--red);
  background: var(--red-bg);
  border-color: rgba(217,48,37,0.4);
}

/* Per-category severity mapping — mirrors harness_classifier.py risk tiers */
/* Critical: direct code execution / data exfiltration vectors */
.owasp-pill.owasp-LLM01, /* Prompt Injection */
.owasp-pill.owasp-LLM02  /* Insecure Output Handling */
{
  color: var(--red);
  background: rgba(217,48,37,0.08);
  border-color: rgba(217,48,37,0.5);
}

/* High: supply chain, data poisoning, excessive agency */
.owasp-pill.owasp-LLM03, /* Training Data Poisoning */
.owasp-pill.owasp-LLM06, /* Excessive Agency */
.owasp-pill.owasp-LLM08  /* Excessive Permissions / Model Theft */
{
  color: #c44d00;
  background: rgba(196,77,0,0.08);
  border-color: rgba(196,77,0,0.4);
}

/* Medium: information disclosure, over-reliance, insecure plugin */
.owasp-pill.owasp-LLM04, /* Model Denial of Service */
.owasp-pill.owasp-LLM05, /* Supply Chain Vulnerabilities */
.owasp-pill.owasp-LLM07, /* System Prompt Leakage */
.owasp-pill.owasp-LLM09, /* Misinformation */
.owasp-pill.owasp-LLM10  /* Unbounded Consumption */
{
  color: var(--gold-strong);
  background: var(--gold-bg);
  border-color: rgba(242,153,0,0.4);
}

/* OWASP pill group — wraps multiple pills for a tool card */
.owasp-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Compact clean badge — shown when 0 flags detected */
.owasp-clean-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid rgba(30,142,62,0.3);
}
.owasp-clean-badge::before {
  content: '✓';
  font-size: 10px;
}


/* ── 4. BLOAT INDEX BAR — extended ────────────────────────────────────── */
/* Extended from existing .perf-bar to support named tiers and tooltips.   */

.bloat-index-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bloat-index-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.bloat-index-name {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bloat-index-value {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}
.bloat-index-value.tier-ok   { color: var(--green); }       /* < 100MB  */
.bloat-index-value.tier-warn { color: var(--gold-strong); } /* 100-500MB */
.bloat-index-value.tier-bad  { color: var(--red); }         /* > 500MB  */

.bloat-track {
  height: 5px;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.bloat-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  transition: width 0.9s cubic-bezier(0.16,1,0.3,1);
}
.bloat-fill.tier-ok   { background: var(--green); }
.bloat-fill.tier-warn { background: var(--gold); }
.bloat-fill.tier-bad  { background: var(--red); }

/* Bloat tier legend */
.bloat-legend {
  display: flex;
  gap: 16px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog);
  margin-top: 6px;
}
.bloat-legend span::before {
  content: '▪ ';
}
.bloat-legend .ok   { color: var(--green); }
.bloat-legend .warn { color: var(--gold-strong); }
.bloat-legend .bad  { color: var(--red); }


/* ── 5. TOOL CARD — inline signal row ─────────────────────────────────── */
/* Extends .bento-card for the live tool directory. Each card shows        */
/* score, memory, latency, stars, and OWASP status inline.                 */

.tool-card {
  background: var(--white);
  border: 2px solid var(--line);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s;
  box-shadow: 4px 4px 0 var(--ink);
  position: relative;
}
.tool-card:hover {
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 var(--ink);
  border-color: var(--gold);
}

.tool-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.tool-card-name {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tool-card-cat {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
  margin-top: 4px;
}
.tool-card-desc {
  font-size: 13px;
  color: var(--fog);
  line-height: 1.55;
  flex: 1;
}

/* Signal strip — memory, latency, stars inline */
.tool-signal-strip {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}
.tool-signal-cell {
  flex: 1;
  padding: 8px 10px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tool-signal-cell:last-child { border-right: none; }
.tool-signal-label {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
}
.tool-signal-value {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tool-signal-value.cyan  { color: var(--cyan); }
.tool-signal-value.gold  { color: var(--gold-strong); }
.tool-signal-value.green { color: var(--green); }
.tool-signal-value.red   { color: var(--red); }
.tool-signal-value.muted { color: var(--fog); }

/* Card footer — OWASP status + deploy verdict */
.tool-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  gap: 8px;
  flex-wrap: wrap;
}
.tool-deploy-verdict {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
}
.tool-deploy-verdict.yes  { color: var(--green); background: var(--green-bg); border: 1px solid rgba(30,142,62,0.3); }
.tool-deploy-verdict.no   { color: var(--red);   background: var(--red-bg);   border: 1px solid rgba(217,48,37,0.3); }
.tool-deploy-verdict.warn { color: var(--gold-strong); background: var(--gold-bg); border: 1px solid rgba(242,153,0,0.4); }

/* Stars badge */
.tool-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--gold-strong);
}
.tool-stars::before { content: '★'; }


/* ── 6. MOBILE SWIPE INDICATORS ───────────────────────────────────────── */
/* Dots below card rows + edge fade so users know cards are swipeable.     */

.swipe-row-wrap {
  position: relative;
}
/* Edge fade — indicates more content to the right */
.swipe-row-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 48px; height: calc(100% - 20px);
  background: linear-gradient(to right, transparent, var(--white));
  pointer-events: none;
}
.swipe-row-wrap.on-dark::after {
  background: linear-gradient(to right, transparent, var(--ink));
}

/* Dot indicators below swipe rows */
.swipe-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding-bottom: 4px;
}
.swipe-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s, transform 0.2s;
}
.swipe-dot.active {
  background: var(--gold);
  transform: scale(1.4);
}

/* Swipe hint label — shown once, fades after first interaction */
.swipe-hint {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
  text-align: center;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  animation: swipe-hint-fade 3s ease forwards 2s;
}
@keyframes swipe-hint-fade { to { opacity: 0; pointer-events: none; } }
.swipe-hint::before { content: '←'; }
.swipe-hint::after  { content: '→'; }
@media (min-width: 769px) { .swipe-hint, .swipe-dots { display: none; } }


/* ── 7. DASHBOARD — D1 live polling state ─────────────────────────────── */
/* Cells that are connected to a live D1 endpoint via vng-live.js polling. */

.d1-cell {
  position: relative;
  overflow: hidden;
}
/* Sweeping bar that plays while a D1 poll is in-flight */
.d1-cell.polling::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation: d1-sweep 1.2s ease-in-out;
}
@keyframes d1-sweep { 0%{left:-100%} 100%{left:200%} }

/* P95 latency cell — specific to dashboard's latency column */
.p95-cell { border-left: 3px solid var(--cyan); }
.p95-value {
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--cyan);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Run count ticker — animates when new batch comes in */
.run-ticker {
  font-family: var(--mono);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -0.04em;
  line-height: 1;
  transition: color 0.3s;
}
.run-ticker.flash { color: var(--white); }

/* Dashboard grid — 4-column KPI row over two pages */
.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rim);
  border: 1px solid var(--rim);
  margin-bottom: 24px;
}
.dash-kpi-cell {
  background: var(--ink);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (max-width: 640px) {
  .dash-kpi-row { grid-template-columns: 1fr 1fr; }
}

/* Ghost Swarm log row */
.swarm-log-row {
  display: grid;
  grid-template-columns: 22px 1fr auto auto 90px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: var(--mono);
  font-size: 11px;
}
.swarm-log-row:last-child { border-bottom: none; }
.swarm-log-status {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin: 0 auto;
}
.swarm-log-status.pass { background: var(--green); box-shadow: 0 0 5px var(--green); }
.swarm-log-status.fail { background: var(--red);   box-shadow: 0 0 5px var(--red); }
.swarm-log-status.run  { background: var(--gold);  box-shadow: 0 0 5px var(--gold); animation: pulse 1s infinite; }
.swarm-log-name  { color: rgba(255,255,255,0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swarm-log-mem   { color: var(--cyan); font-size: 10px; font-weight: 700; text-align: right; white-space: nowrap; }
.swarm-log-lat   { color: var(--gold); font-size: 10px; font-weight: 700; text-align: right; white-space: nowrap; }
.swarm-log-phase { color: rgba(255,255,255,0.25); font-size: 9px; text-align: right; white-space: nowrap; }

@media (max-width: 640px) {
  .swarm-log-row { grid-template-columns: 16px 1fr auto; }
  .swarm-log-mem, .swarm-log-lat { display: none; }
}


/* ── 8. PRICING TIER CARDS ─────────────────────────────────────────────── */

/* Billing toggle */
.billing-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fog);
}
.billing-toggle {
  position: relative;
  width: 44px; height: 24px;
  cursor: pointer;
}
.billing-toggle input { opacity: 0; width: 0; height: 0; }
.billing-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--line);
  border: 2px solid var(--line);
  transition: background 0.2s;
}
.billing-toggle input:checked + .billing-toggle-track { background: var(--gold); border-color: var(--gold); }
.billing-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--white);
  transition: transform 0.2s;
}
.billing-toggle input:checked + .billing-toggle-track + .billing-toggle-thumb { transform: translateX(20px); }
.billing-save-badge {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  background: var(--green-bg);
  border: 1px solid var(--green);
  color: var(--green);
}

/* Tier grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 2px solid var(--line);
}
.pricing-tier {
  padding: 28px 24px;
  border-right: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
}
.pricing-tier:last-child { border-right: none; }
.pricing-tier.featured {
  background: var(--ink);
  background-image: var(--grid-texture);
  border-color: var(--gold);
  z-index: 1;
  margin: -2px;
}

/* Featured label */
.pricing-featured-label {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 14px;
  white-space: nowrap;
}

.pricing-tier-name {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: 12px;
}
.pricing-tier.featured .pricing-tier-name { color: rgba(255,255,255,0.4); }

.pricing-price {
  font-family: var(--mono);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 4px;
}
.pricing-tier.featured .pricing-price { color: var(--gold); }
.pricing-price-unit {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fog);
  margin-bottom: 20px;
}
.pricing-tier.featured .pricing-price-unit { color: rgba(255,255,255,0.35); }

.pricing-desc {
  font-size: 13px;
  color: var(--fog);
  line-height: 1.55;
  margin-bottom: 24px;
  flex: 1;
}
.pricing-tier.featured .pricing-desc { color: rgba(255,255,255,0.5); }

.pricing-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.pricing-feature-list li {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.pricing-tier.featured .pricing-feature-list li { color: rgba(255,255,255,0.6); }
.pricing-feature-list li::before {
  content: '→';
  color: var(--gold);
  flex-shrink: 0;
  font-weight: 700;
  font-size: 10px;
  margin-top: 1px;
}
.pricing-feature-list li.unavail { opacity: 0.35; }
.pricing-feature-list li.unavail::before { content: '—'; color: var(--fog); }

/* Feature comparison table */
.pricing-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 11px;
  border: 2px solid var(--line);
  margin-top: 32px;
}
.pricing-compare-table th {
  background: var(--paper);
  border-bottom: 2px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 10px 16px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fog);
  text-align: center;
}
.pricing-compare-table th:first-child { text-align: left; }
.pricing-compare-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  color: var(--slate);
  text-align: center;
}
.pricing-compare-table td:last-child { border-right: none; }
.pricing-compare-table td:first-child { text-align: left; color: var(--ink); font-weight: 600; }
.pricing-compare-table tr:hover td { background: var(--paper); }
.pricing-compare-table .check { color: var(--green); font-weight: 700; }
.pricing-compare-table .cross { color: var(--red); }
.pricing-compare-table .tier-col { background: rgba(242,153,0,0.04); }

@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-tier { border-right: none; border-bottom: 2px solid var(--line); }
  .pricing-tier.featured { margin: 0; }
}


/* ── 9. CONNECT-MCP — endpoint docs, key gen, auth callout ────────────── */

/* Security callout — mentor directive: X-VerditNxtGen-Key header only */
.auth-callout {
  background: rgba(242,153,0,0.07);
  border: 2px solid rgba(242,153,0,0.4);
  border-left: 4px solid var(--gold);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.auth-callout-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.auth-callout-body {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--slate);
}
.auth-callout-body strong {
  color: var(--ink);
  font-weight: 700;
}
.auth-callout-body code {
  background: rgba(242,153,0,0.12);
  border: 1px solid rgba(242,153,0,0.3);
  padding: 1px 6px;
  font-size: 11px;
  color: var(--gold-strong);
  border-radius: 2px;
}

/* Security warning — for deprecated/insecure patterns */
.security-warning {
  background: rgba(217,48,37,0.05);
  border: 1px solid rgba(217,48,37,0.3);
  border-left: 4px solid var(--red);
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--red);
  line-height: 1.6;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.security-warning::before { content: '⚠'; flex-shrink: 0; font-size: 14px; margin-top: 1px; }

/* Endpoint doc row */
.endpoint-row {
  display: grid;
  grid-template-columns: 64px auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
}
.endpoint-row:last-child { border-bottom: none; }
.endpoint-row:hover { background: var(--paper); }
.endpoint-method {
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 3px 0;
}
.endpoint-method.GET  { color: var(--green); }
.endpoint-method.POST { color: var(--gold-strong); }
.endpoint-path {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.endpoint-desc { color: var(--fog); font-size: 11px; }
.endpoint-auth {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  white-space: nowrap;
}
.endpoint-auth.required { color: var(--gold-strong); background: var(--gold-bg); border: 1px solid rgba(242,153,0,0.3); }
.endpoint-auth.free     { color: var(--green); background: var(--green-bg); border: 1px solid rgba(30,142,62,0.3); }

/* HMAC signature helper block — mentor directive: show exact signature generation */
.hmac-example {
  background: var(--ink);
  background-image: var(--grid-texture);
  border: 1px solid var(--rim);
  border-top: 2px solid var(--cyan);
  padding: 20px;
}
.hmac-example-title {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hmac-example-title::before {
  content: '';
  width: 12px; height: 1px;
  background: var(--cyan);
}

/* API key display block */
.api-key-display {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  margin-bottom: 16px;
}
.api-key-prefix {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fog);
  background: var(--line);
  padding: 10px 14px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.api-key-value {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  padding: 10px 16px;
  flex: 1;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--white);
}
.api-key-copy {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--gold);
  border: none;
  cursor: pointer;
  border-left: 1px solid var(--line);
  transition: background 0.15s;
  white-space: nowrap;
}
.api-key-copy:hover { background: var(--surface); }
.api-key-copy.copied { color: var(--green); }

/* Rate limit table */
.rate-limit-table {
  width: 100%;
  font-family: var(--mono);
  font-size: 11px;
  border-collapse: collapse;
  border: 1px solid var(--line);
}
.rate-limit-table th {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
  background: var(--paper);
  border-bottom: 2px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 8px 14px;
  text-align: left;
}
.rate-limit-table td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  color: var(--slate);
}
.rate-limit-table td:last-child { border-right: none; }
.rate-limit-table tr:last-child td { border-bottom: none; }
.rate-limit-table .tier-free    { color: var(--green); font-weight: 700; }
.rate-limit-table .tier-pro     { color: var(--gold-strong); font-weight: 700; }
.rate-limit-table .tier-ent     { color: var(--blue); font-weight: 700; }


/* ── 10. GHOST SWARM — responsive SVG container ───────────────────────── */

.swarm-container {
  background: var(--ink);
  background-image: var(--grid-texture);
  border: 1px solid var(--rim);
  border-top: 2px solid var(--gold);
  overflow: hidden;
  position: relative;
}
.swarm-container-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rim);
  background: rgba(0,0,0,0.3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.swarm-container-title { color: var(--gold); }
.swarm-container-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: 8px;
  letter-spacing: 0.12em;
}

/* SVG visualization area — aspect-ratio locked */
.swarm-svg-wrap {
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 200px;
  max-height: 340px;
  overflow: hidden;
}
.swarm-svg-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Node topology SVG elements */
.swarm-node {
  fill: var(--surface);
  stroke: var(--gold);
  stroke-width: 1;
  transition: fill 0.3s;
}
.swarm-node.active { fill: rgba(242,153,0,0.15); }
.swarm-node.fail   { stroke: var(--red); fill: rgba(217,48,37,0.1); }
.swarm-edge {
  stroke: rgba(255,255,255,0.06);
  stroke-width: 1;
  fill: none;
}
.swarm-edge.active {
  stroke: var(--cyan);
  stroke-dasharray: 4 3;
  animation: swarm-flow 2.6s linear infinite;
}
@keyframes swarm-flow { to { stroke-dashoffset: -28; } }


/* ── 11. SCORE DELTA — leaderboard change badges ──────────────────────── */

.score-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  letter-spacing: 0.06em;
}
.score-delta.up {
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid rgba(30,142,62,0.3);
}
.score-delta.up::before { content: '↑ '; }
.score-delta.down {
  color: var(--red);
  background: var(--red-bg);
  border: 1px solid rgba(217,48,37,0.3);
}
.score-delta.down::before { content: '↓ '; }
.score-delta.flat {
  color: var(--fog);
  background: var(--paper);
  border: 1px solid var(--line);
}
.score-delta.flat::before { content: '— '; }

/* Bus factor warning */
.bus-factor-warn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--red-bg);
  border: 1px solid rgba(217,48,37,0.3);
  padding: 3px 8px;
}
.bus-factor-warn::before { content: '⚠ '; }


/* ── 12. NAV INJECTION COMPATIBILITY ──────────────────────────────────── */
/* All pages share one nav HTML injected by nav.js.                        */
/* These rules handle the transition state so the page doesn't flash.      */

/* Pre-injection: prevents layout shift while nav.js loads */
body:not(.nav-ready) header { min-height: var(--nav-h); }

/* Inject target — the shared nav mounts into #site-nav */
#site-nav { display: contents; }

/* Active page indicator — nav.js adds .active based on window.location */
header nav .link[aria-current="page"],
header nav .link.active {
  color: var(--gold);
  background: rgba(242,153,0,0.07);
}

/* Submit Tool CTA in nav — only shown on tools/directory pages */
.nav-submit-cta {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan) !important;
  border: 1px solid rgba(0,194,255,0.4);
  padding: 5px 10px;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.nav-submit-cta:hover {
  background: rgba(0,194,255,0.08);
  color: var(--white) !important;
  text-decoration: none !important;
}


/* ── 13. OWASP FINDING DETAIL CARD ───────────────────────────────────── */

.finding-card {
  background: var(--white);
  border: 2px solid var(--line);
  border-left: 4px solid var(--red);
  padding: 20px;
  margin-bottom: 16px;
}
.finding-card.warn { border-left-color: var(--gold); }
.finding-card.info { border-left-color: var(--cyan); }
.finding-card.clean { border-left-color: var(--green); }

.finding-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 12px;
  flex-wrap: wrap;
}
.finding-card-id {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.finding-card-severity {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
}
.finding-card-severity.critical { color: var(--red); background: var(--red-bg); border: 1px solid rgba(217,48,37,0.3); }
.finding-card-severity.high     { color: #c44d00; background: rgba(196,77,0,0.08); border: 1px solid rgba(196,77,0,0.3); }
.finding-card-severity.medium   { color: var(--gold-strong); background: var(--gold-bg); border: 1px solid rgba(242,153,0,0.3); }
.finding-card-desc {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--slate);
  line-height: 1.65;
}
.finding-evidence {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fog);
  line-height: 1.6;
}
.finding-evidence code {
  background: var(--line);
  padding: 1px 5px;
  color: var(--ink);
  font-size: 11px;
}


/* ── 14. MOBILE — category row improvements ───────────────────────────── */

/* Category header row on tool directory */
.cat-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cat-row-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cat-row-count {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--gold-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cat-row-link {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}
.cat-row-link:hover { color: var(--blue); text-decoration: none; }
.cat-row-link::after { content: ' →'; }

/* Tool card scroll row per category */
.tool-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  .tool-card-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 4px 0 16px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: none;
  }
  .tool-card-row::-webkit-scrollbar { display: none; }
  .tool-card-row > .tool-card {
    flex: 0 0 82vw;
    max-width: 300px;
    scroll-snap-align: start;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   END v8.0 ADDITIONS
   ═══════════════════════════════════════════════════════════════════════ */


/* ── v8.1 INDEX PAGE COMPONENTS ──────────────────────────────────────────
   Ticker strip and hero swarm terminal — used by index.html and about.html
   ═══════════════════════════════════════════════════════════════════════ */

/* Live ticker strip */
.ticker-wrap {
  background: var(--ink);
  border-bottom: 1px solid var(--rim);
  overflow: hidden;
  padding: 7px 0;
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 37s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 20px;
  font-family: var(--mono);
  font-size: 11px;
  border-right: 1px solid var(--rim);
  white-space: nowrap;
  flex-shrink: 0;
}
.ticker-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.ticker-dot.g { background:var(--green); box-shadow:0 0 4px var(--green); }
.ticker-dot.r { background:var(--red); }
.ticker-dot.y { background:var(--gold); }
.ticker-name { color:rgba(255,255,255,0.7); font-weight:600; }
.ticker-val  { color:rgba(255,255,255,0.3); font-size:10px; }

/* Hero swarm terminal widget */
.swarm-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.swarm-visual { background:rgba(0,0,0,0.3); border:1px solid var(--rim); padding:10px 14px; }
.swarm-terminal { display:flex; flex-direction:column; gap:6px; }
.swarm-bar {
  display: grid;
  grid-template-columns: 10px 1fr auto 80px;
  gap: 8px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
}
.swarm-status {
  width: 7px; height: 7px;
  border-radius: 50%; flex-shrink:0;
}
.swarm-status.pass { background:var(--green); box-shadow:0 0 4px var(--green); }
.swarm-status.fail { background:var(--red); }
.swarm-status.run  { background:var(--gold); animation:pulse 1s infinite; }
.swarm-tool   { color:rgba(255,255,255,0.75); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.swarm-metric { color:var(--cyan); font-size:10px; text-align:right; white-space:nowrap; }
.swarm-phase  { color:rgba(255,255,255,0.25); font-size:9px; text-align:right; white-space:nowrap; }

/* Hero widget responsive */
@media (max-width: 768px) {
  .swarm-bar { grid-template-columns: 10px 1fr auto; }
  .swarm-phase { display:none; }
}

/* about.html grid fix */
@media (max-width: 768px) {
  .section .wrap[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }
}


/* ── v8.2 BUG FIXES ───────────────────────────────────────────────────────
   Fixes from live review: methodology 5-col, tab pane, billing toggle
   ═══════════════════════════════════════════════════════════════════════ */

/* 5-column pipeline on methodology — scroll on mobile */
@media (max-width: 1100px) {
  #pipelineGrid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  #pipelineGrid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px !important;
    padding-bottom: 16px;
    margin: 0 -16px;
    padding-left: 16px;
    scrollbar-width: none;
  }
  #pipelineGrid::-webkit-scrollbar { display: none; }
  #pipelineGrid > .phase-card {
    flex: 0 0 80vw;
    max-width: 280px;
    scroll-snap-align: start;
    border-bottom: none !important;
    min-height: auto;
  }
}

/* Roadmap grid responsive (existing .roadmap-grid without id) */
@media (max-width: 768px) {
  .roadmap-grid:not(#pipelineGrid) {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Phase card — ensure status badge always at bottom */
.phase-card { display: flex; flex-direction: column; }
.phase-desc { flex: 1; }
.phase-status { margin-top: auto !important; align-self: flex-start; }

/* Dashboard tab pane: hidden by default, shown by JS */
/* pane hide/show handled purely by JS — no CSS rule needed */

/* Billing toggle separator */
.billing-toggle-wrap { justify-content: center; }

/* Score tier cards equal height in grid */
.grid-3 .card { height: 100%; }


/* ── v8.3 LAYOUT FIXES ─────────────────────────────────────────────────────
   Pipeline grid, MCP alignment, mobile improvements
   ═══════════════════════════════════════════════════════════════════════ */

/* 5-phase pipeline — horizontal scroll on all sizes, never wraps */
#pipelineGrid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  gap: 0 !important;
  border: 2px solid var(--line);
  border-radius: 0;
  padding-bottom: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--line);
}
#pipelineGrid::-webkit-scrollbar { height: 3px; }
#pipelineGrid::-webkit-scrollbar-thumb { background: var(--gold); }
#pipelineGrid > .phase-card {
  flex: 0 0 calc(20% - 0px);
  min-width: 200px;
  border-right: 2px solid var(--line);
  border-bottom: none !important;
  scroll-snap-align: start;
}
#pipelineGrid > .phase-card:last-child { border-right: none; }

@media (max-width: 1024px) {
  #pipelineGrid > .phase-card { flex: 0 0 250px; }
}
@media (max-width: 768px) {
  #pipelineGrid > .phase-card { flex: 0 0 82vw; max-width: 280px; }
}

/* MCP page: api-section-grid vertical alignment fix */
.api-section-grid { align-items: start; }
.api-section-grid > div { min-width: 0; } /* prevent overflow */

/* endpoint-row responsive: hide desc on small screens */
@media (max-width: 640px) {
  .endpoint-row { grid-template-columns: 52px 1fr 64px; gap: 8px; }
  .endpoint-desc { display: none; }
  .endpoint-path { font-size: 11px; }
}

/* auth-callout — ensure text wraps correctly */
.auth-callout-body {
  font-size: 13px;
  font-family: var(--sans);
  line-height: 1.65;
  color: var(--slate);
  min-width: 0;
  flex: 1;
}
.auth-callout-body strong { color: var(--ink); }
.auth-callout-body code {
  background: rgba(242,153,0,0.12);
  border: 1px solid rgba(242,153,0,0.3);
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold-strong);
}

/* Dashboard SVG - further slow the scan beam */
.swarm-container svg .scan { animation-duration: 3.6s !important; }

/* Flywheel banner on index — hide duplicate when hero stats visible */
.flywheel-banner { display: none; }


/* ── v8.4 GLOBAL ROUND BORDERS + UNIVERSAL MOBILE SWIPE ──────────────────
   Consistent card radius across all pages + swipe-right-to-left on mobile
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Global card radius ──────────────────────────────────────────── */
:root { --card-r: 12px; --card-r-sm: 8px; }

.card,
.card-dark,
.kpi-card,
.bento-card,
.tool-card,
.surface-card,
.posture-card,
.compliance-card,
.compliance-evidence,
.venture-card-item,
.location-card,
.finding-card,
.hero-widget,
.contact-form-container,
.install-modal,
.pricing-tier,
.swarm-container,
.code-terminal { border-radius: var(--card-r) !important; }

.phase-card,
.phase-card.p1,
.phase-card.p2,
.phase-card.p3,
.phase-card.p4 { border-radius: var(--card-r-sm); }

/* Brutalist card keeps its shadow with rounded corners */
.card-brutal { border-radius: var(--card-r); }

/* Stat cells & KPI rows */
.stat-cell,
.stat-bar-cell,
.flywheel-stat,
.deploy-kpi-cell,
.dash-kpi-cell,
.signal-stat-pill { border-radius: var(--card-r-sm); }

/* Buttons keep pill or 0 as designed — don't override */
/* Tags: soften slightly */
.tag, .owasp-pill, .deploy-badge, .score-delta, .pipeline-status,
.phase-status, .wh-chip, .mcp-chip { border-radius: 4px; }

/* Code terminal top corners only */
.code-terminal { overflow: hidden; }
.code-term-bar { border-radius: var(--card-r) var(--card-r) 0 0; }

/* Pricing tier featured: extra glow with radius */
.pricing-tier.featured { border-radius: var(--card-r); }


/* ── Universal mobile swipe grids ────────────────────────────────── */
/* Any .swipe-grid becomes a horizontal scroll row on mobile */
@media (max-width: 768px) {
  /* Tool cards, bento grids, category grids */
  .bento-grid,
  .grid-3,
  .grid-2,
  .posture-grid,
  .roadmap-grid,
  .ethos-grid,
  .locations-grid,
  .tool-card-row,
  .pricing-grid,
  .ecosystem-teaser-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
    gap: 14px !important;
    scrollbar-width: none;
  }
  .bento-grid::-webkit-scrollbar,
  .grid-3::-webkit-scrollbar,
  .grid-2::-webkit-scrollbar,
  .posture-grid::-webkit-scrollbar,
  .pricing-grid::-webkit-scrollbar { display: none; }

  /* Card children become snap targets */
  .bento-grid > *,
  .grid-3 > *,
  .grid-2 > *,
  .posture-grid > *,
  .pricing-grid > .pricing-tier,
  .ecosystem-teaser-grid > * {
    flex: 0 0 82vw !important;
    max-width: 320px !important;
    scroll-snap-align: start;
    border-radius: var(--card-r) !important;
  }

  /* Pricing featured - no negative margin on mobile */
  .pricing-tier.featured { margin: 0 !important; }

  /* Data table scrollable on mobile */
  .data-table-wrap,
  div[style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }
}

/* ── Swipe edge-fade indicator ───────────────────────────────────── */
@media (max-width: 768px) {
  .section .wrap { position: relative; }

  /* Padding trick so first card isn't flush against edge */
  .bento-grid,
  .grid-3,
  .grid-2,
  .posture-grid,
  .pricing-grid {
    padding-left: 0;
    padding-right: 24px;
  }
}

/* ── Fix pane display for dashboard ─────────────────────────────── */
/* ── Phase card status always at bottom ─────────────────────────── */
.phase-card .phase-status { margin-top: auto !important; }

/* ── MCP rate table mobile ───────────────────────────────────────── */
.rate-limit-table { min-width: 440px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE HARDENING LAYER (2026-07)
   Appended last on purpose: at equal specificity, later rules win, so this
   layer acts as a site-wide safety net without rewriting component CSS.
   Goal: no content ever escapes the page border on a phone, the hamburger
   contract works everywhere, and forms behave on iOS.
   ═══════════════════════════════════════════════════════════════════════ */

/* Belt-and-braces: nothing may create a horizontal page scroll. `clip` rather
   than `hidden` so position:sticky inside the page keeps working. */
html, body { overflow-x: clip; }

/* Media can never be wider than its container. SVG kept aspect-safe via
   max-width only — inline icons size themselves via width/height attrs. */
img, video, canvas { max-width: 100%; height: auto; }
svg { max-width: 100%; }

/* Code: blocks scroll inside their own box; inline code wraps anywhere so a
   long slug or URL can't push the page wide. */
pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
:not(pre) > code { overflow-wrap: anywhere; }

/* Bento grid: minmax(320px, 1fr) forces overflow on ≤352px viewports
   (320 content + 2×16 padding). min(100%, 320px) lets the card yield. */
.bento-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

/* Scroll-lock while the mobile menu is open (class toggled by vng-nav.js).
   The menu itself still scrolls via its own max-height + overflow-y.

   MOBILE-NAV-VANISH FIX (2026-07-13): this was `body.vng-nav-open { overflow:
   hidden; }`, which failed in two ways at once:
     1. `overflow:hidden` on <body> does NOT reliably lock scrolling on iOS
        Safari — the page keeps scrolling regardless, so the "lock" was fiction.
     2. It gave <body> a clipped overflow, which silently breaks
        `position: sticky` on <header>. With the header no longer sticking, it
        (and the absolutely-positioned dropdown inside it) scrolled away, while
        the position:fixed backdrop stayed put — producing the reported
        "burger open + scroll = menu gone, page still dimmed" bug.
   `position: fixed` genuinely locks scroll on every mobile engine, and can't
   break sticky because the header isn't relied on for the menu's placement any
   more (the dropdown is now viewport-fixed too — see the mobile nav block).
   vng-nav.js sets `top: -<scrollY>px` inline when opening so the page doesn't
   visually jump to the top, and restores the exact scroll position on close. */
body.vng-nav-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* Kill the 300ms double-tap-zoom delay on primary controls. */
.nav-toggle, .btn, .link, button { touch-action: manipulation; }

@media (max-width: 768px) {
  /* Any table not already inside a scroll wrapper becomes self-scrolling
     instead of stretching the page. Harmless double-wrap where a wrapper
     already exists (dashboard, api, compare). */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  td { overflow-wrap: break-word; }

  /* Thumb-sized nav targets (Apple HIG 44px floor). */
  header nav .link { min-height: 44px; display: flex; align-items: center; }

  /* iOS Safari zooms the page when a focused field's font-size < 16px.
     Forcing 16px on small screens keeps the viewport still while typing. */
  input, select, textarea { font-size: 16px; }

  /* Long headings (tool names, slugs) wrap instead of clipping. */
  h1, h2, h3 { overflow-wrap: break-word; }

  /* Respect notched-phone safe areas without changing the desktop gutter. */
  .wrap { padding-left: max(16px, env(safe-area-inset-left));
          padding-right: max(16px, env(safe-area-inset-right)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIVERSAL STRUCTURE (2026-07) — the system the UI/UX team follows
   ───────────────────────────────────────────────────────────────────────────
   Appended last, on purpose (same doctrine as the hardening layer above): at
   equal specificity later rules win, so this extends the system WITHOUT
   editing a single existing rule. Nothing above changes; nothing can break.

   Two jobs:
     1. Fill the systematic tokens the codebase was missing — a spacing scale,
        a fluid type scale, a z-index ladder — so pages stop hand-rolling
        one-off px values that drift. USE THESE, don't invent new numbers.
     2. Ship the Decision Console kit (`.vng-*`) — the one flagship surface
        still to be built (dashboard.html). It renders POST /v1/verdict in the
        brutalist house style so the product demo can't wander off-brand.

   Rules of the road for every page author:
     • Space with --space-* (8-pt rhythm). Size text with --text-*.
     • Layer with --z-* (the sticky header owns 200 — don't outrank it ad hoc).
     • Tap targets ≥ var(--touch-min). Never a fixed width > 320px without a
       scroll wrapper (the hardening layer catches page-escape, not internal).
     • Verdict vocabulary is fixed and colour-locked: APPROVED=green,
       REJECTED=red, FLAGGED_FOR_REVIEW=gold. Same word, same colour, in the
       API, the UI, and the ledger.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1a. Scale tokens (additive — merges with the :root defined above) ─────── */
:root {
  /* Spacing — 8-pt rhythm on a 16px root. Compose padding/margin/gap from these. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Fluid type — scales with viewport, no media queries needed. Data/numerals
     use --mono; body uses --sans; --serif stays reserved for display headings. */
  --text-xs:   clamp(0.72rem, 0.68rem + 0.2vw, 0.80rem);
  --text-sm:   clamp(0.82rem, 0.78rem + 0.2vw, 0.90rem);
  --text-base: clamp(0.94rem, 0.90rem + 0.2vw, 1.00rem);
  --text-lg:   clamp(1.08rem, 1.00rem + 0.4vw, 1.25rem);
  --text-xl:   clamp(1.30rem, 1.15rem + 0.7vw, 1.60rem);
  --text-2xl:  clamp(1.70rem, 1.40rem + 1.4vw, 2.40rem);
  --text-3xl:  clamp(2.20rem, 1.70rem + 2.4vw, 3.40rem);

  /* Z-index ladder — one source of truth. header{} already sits at 200; these
     name the stack around it so overlays don't fight with magic numbers. */
  --z-base:      1;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;   /* the site header */
  --z-backdrop:  900;   /* nav / modal scrim */
  --z-modal:     1000;
  --z-toast:     1100;

  /* Ergonomics */
  --touch-min: 44px;                                   /* Apple HIG floor */
  --focus-ring: 0 0 0 3px rgba(0,194,255,0.55);        /* cyan, brand-locked */
}

/* ── 1b. Quality floor: a visible keyboard-focus ring everywhere ──────────── */
/* Many pages predate :focus-visible. This gives every interactive element a
   consistent, on-brand ring for keyboard users without affecting mouse users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ═══ 2. DECISION CONSOLE KIT — renders POST /v1/verdict (dashboard.html) ═══ */
/* Namespaced `vng-` so it collides with none of the 339 existing classes.
   Build the console from these; do not restyle inline. */

/* 2a. The ruling banner — the headline of the whole product. */
.vng-verdict {
  border: 2px solid var(--ink);
  border-left-width: 10px;                 /* status colour rides the left edge */
  background: var(--white);
  box-shadow: var(--shadow-brutal);
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.vng-verdict--approved { border-left-color: var(--green); background: var(--green-bg); }
.vng-verdict--rejected { border-left-color: var(--red);   background: var(--red-bg); }
.vng-verdict--flagged  { border-left-color: var(--gold);  background: var(--gold-bg); }

.vng-verdict__status {
  font-family: var(--mono);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.vng-verdict--approved .vng-verdict__status { color: var(--green); }
.vng-verdict--rejected .vng-verdict__status { color: var(--red); }
.vng-verdict--flagged  .vng-verdict__status { color: var(--gold-strong); }

/* A small square status glyph (no icon font needed). */
.vng-verdict__status::before {
  content: "";
  width: 0.7em; height: 0.7em;
  background: currentColor;
  flex: 0 0 auto;
}

/* contextual_reason — print VERBATIM from the API. Readable measure. */
.vng-verdict__reason {
  font-family: var(--sans);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ink);
  max-width: 68ch;
}

/* Provenance stamp (swarm_run_id) — corner, quiet, monospace. */
.vng-verdict__stamp {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--fog);
  letter-spacing: 0.02em;
  word-break: break-all;
}

/* 2b. Evidence ledger — the auditable row under the banner. */
.vng-ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  background: var(--white);
}
.vng-ledger__cell { display: grid; gap: var(--space-1); align-content: start; }
.vng-ledger__label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fog);
}
.vng-ledger__value {
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
}

/* Big numeral — the raw trust score. */
.vng-stat { display: grid; gap: var(--space-1); align-content: start; }
.vng-stat__num {
  font-family: var(--mono);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.vng-stat__label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fog);
}

/* 2c. Chips — CVE severity + certificate tier. Square, brutalist, mono. */
.vng-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 2px var(--space-2);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  white-space: nowrap;
  line-height: 1.6;
}
.vng-chip--crit        { color: var(--red);         background: var(--red-bg); }
.vng-chip--high        { color: var(--gold-strong); background: var(--gold-bg); }
.vng-chip--med         { color: var(--slate);       background: var(--paper); }
.vng-chip--verified    { color: var(--blue);        background: var(--blue-light); }
.vng-chip--hardened    { color: var(--gold-strong); background: var(--gold-bg); }
.vng-chip--sovereign   { color: var(--purple);      background: rgba(124,77,255,0.10); }
.vng-chip--uncertified { color: var(--fog);         background: var(--paper); border-style: dashed; }

/* Freshness stamp — relative time, muted; ISO goes in title=""(hover). */
.vng-freshness {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--fog);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.vng-freshness--stale { color: var(--gold-strong); }   /* > freshness window */

/* 2d. Suggested alternative — appears only when the API returns one. */
.vng-alt {
  border: 2px solid var(--ink);
  border-left: 10px solid var(--green);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.vng-alt__eyebrow {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
}
.vng-alt__name { font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.vng-alt__row  { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.vng-alt__note { font-size: var(--text-sm); color: var(--fog); }
/* The "no clean alternative" empty state carries no green accent. */
.vng-alt--none { border-left-color: var(--fog); }
.vng-alt--none .vng-alt__eyebrow { color: var(--fog); }

/* 2e. "Why?" disclosure — the machine_reasons table an auditor screenshots. */
.vng-why { margin-top: var(--space-4); }
.vng-why > summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--blue);
  padding: var(--space-2) 0;
  list-style: none;
}
.vng-why > summary::-webkit-details-marker { display: none; }
.vng-why > summary::before { content: "▸ "; }
.vng-why[open] > summary::before { content: "▾ "; }
.vng-why__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}
.vng-why__table th,
.vng-why__table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.vng-why__table th {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fog);
  font-weight: 600;
}
.vng-why__sev--block  { color: var(--red);         font-weight: 700; }
.vng-why__sev--review { color: var(--gold-strong); font-weight: 700; }
@media (max-width: 768px) {
  /* Reasons table self-scrolls rather than stretching the console. */
  .vng-why__table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 2f. Loading skeleton — brutalist shimmer, honours reduced-motion. */
.vng-skeleton {
  background: linear-gradient(90deg, var(--line) 25%, var(--paper) 37%, var(--line) 63%);
  background-size: 400% 100%;
  animation: vng-shimmer 1.4s ease infinite;
  border-radius: var(--r);
  min-height: 1em;
}
.vng-skeleton--banner { height: 132px; }
.vng-skeleton--row    { height: 88px; margin-top: var(--space-4); }
@keyframes vng-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .vng-skeleton { animation: none; } }

/* 2g. Environment badge — persistent when meta.mode === "mock". Never let a
   staging screenshot masquerade as live data. */
.vng-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: repeating-linear-gradient(45deg, var(--gold-bg), var(--gold-bg) 8px, var(--white) 8px, var(--white) 16px);
  border: 2px solid var(--gold);
  padding: var(--space-1) var(--space-2);
}

/* 2h. Console shell — keeps the form + result readable on every width. */
.vng-console { display: grid; gap: var(--space-5); max-width: 860px; }
.vng-console__form {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end;
}
.vng-console__form label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fog);
  display: grid;
  gap: var(--space-2);
}
/* 2h-i. Form controls — the kit above styled the shell but never the actual
   inputs, so browser defaults (white boxes) rendered against the dark card.
   Bring them in line with the rest of the site's dark theme + gold accent. */
.vng-console__form input[type="text"],
.vng-console__form select {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line);
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vng-console__form input[type="text"]:focus,
.vng-console__form select:focus {
  border-color: var(--gold-strong);
  box-shadow: 3px 3px 0 var(--ink);
}
.vng-console__form select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.vng-console__form fieldset label {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink);
  display: inline-flex;
}
.vng-console__form input[type="radio"] {
  accent-color: var(--gold-strong);
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}
.vng-console__form button[type="submit"] {
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--shadow-gold, 4px 4px 0 var(--gold-strong));
}
.vng-console__form button[type="submit"]:hover {
  background: #ffaa1a;
  box-shadow: 6px 6px 0 var(--gold-strong);
  transform: translate(-2px, -2px);
}
@media (max-width: 480px) {
  .vng-verdict { padding: var(--space-4) var(--space-4) var(--space-3); border-left-width: 8px; }
  .vng-stat__num { font-size: var(--text-2xl); }
}