/*
 * INTELLURIC — SITE STYLES
 * All component styles reference tokens exclusively.
 * tokens.css must be loaded first.
 */

/* ── RESET ───────────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--void);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── GLASS VIGNETTE ───────────────────────────────────────────────────────────── */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(ellipse 100% 6%  at 50%   0%,   rgba(255,255,255,.030) 0%, transparent 100%),
    radial-gradient(ellipse 120% 28% at 50%   112%,  rgba(0,0,0,.52)       0%, transparent 100%),
    radial-gradient(ellipse 18%  100% at -1%  50%,   rgba(0,0,0,.38)       0%, transparent 100%),
    radial-gradient(ellipse 18%  100% at 101% 50%,   rgba(0,0,0,.38)       0%, transparent 100%);
}

/* ── NOISE LAYER ──────────────────────────────────────────────────────────────── */

#noise {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ── TYPOGRAPHY ───────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-weight: 500;
  line-height: var(--line-height-tight);
  color: var(--text-bright);
}

a {
  color: var(--text-accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--p-core); }

.label {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--text-dim);
}

.section-heading {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--p-mid);
  margin-bottom: var(--space-7);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-dim);
}

/* ── LAYOUT ───────────────────────────────────────────────────────────────────── */

.container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.container--wide {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

section {
  padding: var(--space-10) 0;
  scroll-margin-top: 96px;
}
section + section {
  border-top: 1px solid var(--border-dim);
}

/* ── NAV ──────────────────────────────────────────────────────────────────────── */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: var(--space-4) var(--space-6);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: rgba(1,0,2,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-dim);
}

.nav-wordmark {
  font-size: var(--font-size-base);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--p-core);
  text-decoration: none;
}

.nav-links {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  gap: var(--space-6);
  list-style: none;
}
.nav-links a {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--text-dim);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--p-core); }

.nav-cta {
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(180, 100, 255, .28);
  border-radius: var(--radius-sm);
  color: rgba(192, 96, 255, .58);
  background: transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.nav-cta:hover {
  border-color: var(--border-p);
  color: var(--p-mid);
  background: var(--fill-p);
  box-shadow: var(--glow-p-sm);
}

/* ── HERO ─────────────────────────────────────────────────────────────────────── */

#hero {
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  padding-top: calc(var(--nav-height, 5rem) + 2rem);
  padding-bottom: clamp(4rem, 9vh, 7rem);
  background:
    radial-gradient(ellipse at 46% 42%, #0b0610 0%, #060308 45%, var(--void) 100%);
  position: relative;
  overflow: clip;
}

#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(106,18,255,.07), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255,100,20,.04), transparent 50%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 380px;
  grid-template-areas:
    "setup  owl"
    "title  owl"
    "bridge owl"
    "ctas   owl";
  column-gap: var(--space-8);
  align-items: start;
}

/* Beat 1 — Problem */
.hero-problem {
  font-size: clamp(1.2rem, 3.8vw, 2.1rem);
  font-weight: 400;
  color: var(--text-bright);
  max-width: 640px;
  margin-bottom: var(--space-7);
  line-height: 1.2;
}

/* Beat 2 — Situation recognition */
.hero-situations {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}
.situations-label {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--text-dim);
}
.situations-cycle {
  font-size: var(--font-size-sm);
  color: rgba(185, 158, 220, .65);
  line-height: 1.65;
}

/* Beat 3 — Service bridge */
.hero-bridge {
  grid-area: bridge;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
  margin-bottom: var(--space-6);
}

/* Beat 4a — Tagline setup */
.hero-setup {
  grid-area: setup;
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

/* Beat 4b — Tagline payoff */
.hero-headline {
  grid-area: title;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 300;
  color: var(--text-bright);
  margin-bottom: var(--space-5);
  line-height: 1.1;
}
.hero-headline em {
  color: var(--p-core);
  font-style: normal;
}

.hero-warn {
  color: var(--a-mid);
}

.hero-actions {
  grid-area: ctas;
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--p-glow);
  color: var(--p-core);
  border: 1px solid var(--border-p);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-soft);
  box-shadow: var(--glow-p-md), var(--shadow-card);
}
.btn-primary:hover {
  background: #7a1aff;
  box-shadow: 0 0 40px rgba(106,18,255,.6), var(--shadow-card);
  color: var(--w-core);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.btn-secondary:hover {
  border-color: var(--border-p);
  color: var(--p-core);
}

.btn-emergency {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: transparent;
  color: var(--a-glow);
  border: 1px solid var(--a-glow);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.btn-emergency:hover {
  background: var(--a-glow);
  color: var(--bg);
}

.hero-support {
  margin-top: var(--space-5);
  font-size: var(--font-size-xs);
  color: var(--text-dim);
}

.hero-owl-panel {
  grid-area: owl;
  align-self: center;
  width: 100%;
  margin: 0;
}

.hero-owl-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── CONVERSION STRIP ─────────────────────────────────────────────────────────── */

/* ── SITUATION FORK ───────────────────────────────────────────────────────── */

#situations {
  padding: var(--space-8) 0;
  background: var(--glass);
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
}

.situation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.situation-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--glass-2);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.situation-tile:hover {
  border-color: var(--border-a);
  box-shadow: var(--glow-a-sm);
}

.situation-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}

.situation-dest {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
}

.situation-fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-dim);
}

.fork-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.fork-option--bestiary {
  border-color: var(--border-a);
}
.fork-option--bestiary:hover {
  box-shadow: var(--glow-a-sm);
}

.fork-option--quiz {
  border-color: var(--border-p);
}
.fork-option--quiz:hover {
  box-shadow: var(--glow-p-sm);
}

.fork-label {
  font-size: var(--font-size-md);
  color: var(--text-bright);
  font-weight: 500;
}

.fork-sub {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
}

/* ── SELF-DIAGNOSIS ───────────────────────────────────────────────────────────── */

#diagnose {
  position: relative;
}

.diagnose-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-8);
  align-items: start;
}

.quiz-panel {
  position: relative;
}

.quiz-progress {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  flex-wrap: wrap;
}

.progress-step {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  border: 1px solid var(--border-dim);
  transition: all var(--duration-fast) var(--ease-out);
}
.progress-step.active {
  color: var(--p-mid);
  border-color: var(--border-p);
  background: var(--fill-p);
}
.progress-step.done {
  color: var(--text-dim);
  border-color: transparent;
  opacity: .55;
}

.question-block {
  display: none;
  animation: fadeUp var(--duration-base) var(--ease-soft) both;
}
.question-block.active { display: block; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.question-text {
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: var(--text-bright);
  margin-bottom: var(--space-2);
}

.question-subtext {
  font-size: var(--font-size-sm);
  color: var(--text-dim);
  margin-bottom: var(--space-5);
  line-height: var(--line-height-loose);
}

.option-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.option-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-align: left;
  width: 100%;
  text-decoration: none;
}
.option-item * { text-decoration: none; }
.option-item:hover {
  border-color: var(--border-p);
  background: var(--fill-hover);
  color: var(--p-core);
}
.option-item.selected {
  border-color: var(--p-mid);
  background: var(--fill-p);
  color: var(--p-core);
}

.option-check {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-dim);
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-out);
  font-size: 10px;
}
.option-item.selected .option-check {
  border-color: var(--p-mid);
  background: var(--p-mid);
  color: var(--void);
}

.quiz-nav {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.btn-back {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.btn-back:hover {
  color: var(--text-secondary);
  border-color: var(--border-w);
}

.quiz-hint {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  margin-left: auto;
  letter-spacing: 0.03em;
  opacity: .75;
}

/* ── DIAGNOSIS SIDE PANEL ─────────────────────────────────────────────────────── */

.diagnosis-panel {
  position: sticky;
  top: calc(80px + var(--space-5));
  background: var(--glass);
  border: 1px solid var(--border-p);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--glow-p-sm), var(--shadow-card);
}

.panel-title {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--p-mid);
  margin-bottom: var(--space-5);
}

.panel-field {
  margin-bottom: var(--space-4);
}
.panel-field-label {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--space-1);
}
.panel-field-value {
  font-size: var(--font-size-sm);
  color: var(--p-core);
  min-height: 1.4em;
  transition: color var(--duration-base) var(--ease-soft);
}
.panel-field-value.dim { color: var(--text-dim); }

.panel-artifacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.panel-artifact-tag {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  display: inline-block;
}
.panel-artifact-tag.will {
  border-color: rgba(190,80,255,.3);
  color: var(--p-core);
}

.ambiguity-signal {
  font-size: var(--font-size-xs);
  color: var(--a-mid);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--fill-a);
  border: 1px solid var(--border-a);
  border-radius: var(--radius-sm);
  display: none;
}
.ambiguity-signal.visible { display: block; }

/* ── RESULT PAGE ──────────────────────────────────────────────────────────────── */

#result {
  display: none;
}
#result.visible { display: block; }

.result-header {
  margin-bottom: var(--space-7);
}

.result-you-need {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
}

.result-artifact-name {
  font-size: var(--font-size-2xl);
  font-weight: 300;
  color: var(--text-bright);
  margin-bottom: var(--space-3);
}

.result-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--fill-a);
  border: 1px solid var(--border-a);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--a-mid);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.result-card {
  background: var(--glass);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-inset), var(--shadow-card);
}

.result-card-title {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--p-mid);
  margin-bottom: var(--space-4);
}

.result-diagnosis-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
}

.result-why-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.result-why-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
}
.result-why-label {
  color: var(--text-dim);
}
.result-why-value {
  color: var(--text-secondary);
}

.result-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.result-list li {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding-left: var(--space-4);
  position: relative;
}
.result-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--text-dim);
}

.result-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-7);
}

.result-secondary-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.btn-ghost {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out);
}
.btn-ghost:hover { color: var(--text-bright); }

/* ── RESULT ARTIFACT ITEMS ────────────────────────────────────────────────────── */

.result-artifact-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  background: var(--glass);
}
.result-artifact-item.will_need {
  border-color: rgba(190,80,255,.25);
  background: var(--fill-p);
}
.result-artifact-certainty {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--text-dim);
  grid-row: 1;
  grid-column: 1;
  align-self: center;
}
.result-artifact-item.will_need .result-artifact-certainty {
  color: var(--p-mid);
}
.result-artifact-name-sm {
  font-size: var(--font-size-sm);
  color: var(--text-bright);
  font-weight: 500;
  grid-row: 1;
  grid-column: 2;
}
.result-artifact-rationale {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  grid-row: 2;
  grid-column: 2;
  line-height: var(--line-height-loose);
}

/* ── ARTIFACT LIBRARY ─────────────────────────────────────────────────────────── */

#artifacts {
  position: relative;
}

.gate-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.gate-tab {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  letter-spacing: var(--letter-spacing-wide);
  transition: all var(--duration-fast) var(--ease-out);
}
.gate-tab:hover { color: var(--p-core); border-color: var(--border-p); }
.gate-tab.active {
  color: var(--p-mid);
  border-color: var(--border-p);
  background: var(--fill-p);
}

.artifact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.artifact-card {
  background: var(--glass);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-soft);
  box-shadow: var(--shadow-card);
}
.artifact-card:hover {
  border-color: var(--border-p);
  box-shadow: var(--glow-p-sm), var(--shadow-card);
}

.artifact-card-gate {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--space-2);
}
.artifact-card-name {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--text-bright);
  margin-bottom: var(--space-3);
  line-height: var(--line-height-tight);
}
.artifact-card-resolves {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
  margin-bottom: var(--space-4);
}

.artifact-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.artifact-card-next {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
}
.artifact-card-diagnose {
  font-size: var(--font-size-xs);
  color: var(--p-mid);
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-mono);
  padding: 0;
  transition: color var(--duration-fast) var(--ease-out);
}
.artifact-card-diagnose:hover { color: var(--p-core); }

.artifact-card-detail {
  display: none;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-dim);
}
.artifact-card.expanded .artifact-card-detail { display: block; }

.artifact-contents-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.artifact-contents-list li {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  padding-left: var(--space-3);
  position: relative;
}
.artifact-contents-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--p-glow);
}

/* ── TIER SECTION ─────────────────────────────────────────────────────────────── */

#tiers {
  position: relative;
}

.tier-intro {
  margin-bottom: var(--space-7);
  max-width: 620px;
}
.tier-intro-headline {
  font-size: var(--font-size-xl);
  font-weight: 300;
  color: var(--text-bright);
  margin-bottom: var(--space-3);
}
.tier-intro-sub {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.tier-card {
  background: var(--glass);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: all var(--duration-base) var(--ease-soft);
}
.tier-card:hover {
  border-color: var(--border-a);
  box-shadow: var(--glow-a-sm), var(--shadow-card);
}

.tier-name {
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--a-mid);
  margin-bottom: var(--space-3);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.tier-distance {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  margin-bottom: var(--space-3);
  line-height: var(--line-height-loose);
}

.tier-use-when {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
  margin-bottom: var(--space-4);
  border-left: 2px solid var(--border-a);
  padding-left: var(--space-3);
}

.tier-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tier-row-label {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--space-1);
}
.tier-row-value {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.tier-price-note {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-dim);
  font-size: var(--font-size-xs);
  color: var(--a-mid);
}
.tier-budget {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.tier-grid-note {
  margin-top: var(--space-5);
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  opacity: 0.7;
}

/* ── METHOD PIPELINE ──────────────────────────────────────────────────────────── */

#method {
  position: relative;
}

.method-intro {
  max-width: 580px;
  margin-bottom: var(--space-7);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
}

.pipeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  position: relative;
}

.pipeline::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--border-p) 10%, var(--border-p) 90%, transparent);
}

.station {
  position: relative;
  padding-top: var(--space-8);
  padding-right: var(--space-4);
}

.station-number {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass);
  border: 1px solid var(--border-p);
  border-radius: 50%;
  font-size: var(--font-size-xs);
  color: var(--p-mid);
  z-index: 1;
  box-shadow: var(--glow-p-sm);
}

.station-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-bright);
  margin-bottom: var(--space-4);
}

.station-schema {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.station-field {}
.station-field-label {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--space-1);
}
.station-field-value {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
}
.station-field-value.fault {
  color: var(--a-mid);
}
.station-field-value.output {
  color: var(--p-core);
}

/* ── PROOF SECTION ────────────────────────────────────────────────────────────── */

#proof {
  position: relative;
}

.proof-intro {
  max-width: 580px;
  margin-bottom: var(--space-7);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.proof-card {
  background: var(--glass);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.proof-gate-tag {
  display: inline-block;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--a-mid);
  border: 1px solid var(--border-a);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--fill-a);
}

.proof-card-name {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--text-bright);
  line-height: var(--line-height-tight);
}

.proof-card-schema {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.proof-schema-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
}
.proof-schema-label { color: var(--text-dim); }
.proof-schema-value { color: var(--text-secondary); }

.proof-card-link {
  margin-top: auto;
  font-size: var(--font-size-xs);
  color: var(--p-mid);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: color var(--duration-fast) var(--ease-out);
}
.proof-card-link:hover { color: var(--p-core); }

/* ── INTAKE SECTION ───────────────────────────────────────────────────────────── */

#intake {
  position: relative;
}

.intake-diagnosis-summary {
  background: var(--glass);
  border: 1px solid var(--border-p);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  box-shadow: var(--glow-p-sm);
}

.intake-summary-label {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--p-mid);
  margin-bottom: var(--space-3);
}

.intake-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.intake-summary-field {}
.intake-field-label {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  margin-bottom: var(--space-1);
}
.intake-field-value {
  font-size: var(--font-size-sm);
  color: var(--p-core);
}

.intake-no-diagnosis {
  display: none;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}

/* Page-local section subnav (homepage only) */
.page-subnav {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-2) var(--space-8);
  background: var(--glass);
  border-bottom: 1px solid var(--border-dim);
  overflow-x: auto;
  position: sticky;
  top: var(--nav-height, 56px);
  z-index: 80;
}
.page-subnav a {
  font-family: var(--mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  padding: var(--space-2) 0;
  transition: color 0.2s;
}
.page-subnav a:hover { color: var(--text-secondary); }
@media (max-width: 768px) {
  .page-subnav { padding: var(--space-2) var(--space-4); gap: var(--space-4); }
}

.intake-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 560px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--text-dim);
}

.form-input,
.form-textarea {
  background: var(--glass);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--p-core);
  transition: border-color var(--duration-fast) var(--ease-out);
  width: 100%;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-dim); }
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--border-p);
  box-shadow: var(--glow-p-sm);
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
}

.form-submit {
  margin-top: var(--space-4);
}

.intake-scope-note {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  line-height: var(--line-height-loose);
}

/* ── FOOTER ───────────────────────────────────────────────────────────────────── */

footer {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-dim);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.footer-wordmark {
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--p-core);
  margin-bottom: var(--space-2);
}

.footer-tagline {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
}
.footer-links a {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
}
.footer-links a:hover { color: var(--p-mid); }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .site-nav {
    padding: var(--space-3) var(--space-4) var(--space-2);
    flex-wrap: wrap;
    min-height: 0;
  }
  .nav-cta {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .nav-links {
    display: flex;
    order: 3;
    flex: 0 0 100%;
    justify-content: flex-start;
    gap: var(--space-3);
    border-top: 1px solid var(--border-dim);
    padding-top: var(--space-2);
    margin-top: var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  #hero {
    min-height: auto;
    padding-bottom: 3rem;
  }
  .hero-inner {
    display: flex;
    flex-direction: column;
  }
  .hero-owl-panel {
    max-width: 320px;
    width: 100%;
    margin: var(--space-4) auto;
  }
  section {
    scroll-margin-top: 110px;
  }
  .hero-problem  { margin-bottom: var(--space-4); }
  .hero-bridge   { margin-bottom: var(--space-5); }
  .hero-headline { margin-bottom: var(--space-5); }
  .diagnose-layout { grid-template-columns: 1fr; }
  .diagnosis-panel { display: none; }
  .tier-grid { grid-template-columns: repeat(2, 1fr); }
  .pipeline { grid-template-columns: repeat(3, 1fr); }
  .pipeline::before { display: none; }
  .station { padding-top: var(--space-5); padding-left: 72px; }
  .station-number { left: 0; }
  .result-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hero-problem  { margin-bottom: var(--space-3); }
  .hero-bridge   { margin-bottom: var(--space-4); }
  .hero-headline { margin-bottom: var(--space-4); }
  .hero-owl-panel {
    max-width: 240px;
    margin: var(--space-3) auto;
  }
  .hero-owl-img {
    max-height: 30vh;
    object-fit: contain;
  }
  .hero-headline {
    font-size: 2rem;
    line-height: 1.1;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary,
  .hero-actions .btn-emergency {
    justify-content: center;
  }
  .tier-grid { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: 1fr; }
  .situation-grid { grid-template-columns: 1fr; }
  .situation-fork  { grid-template-columns: 1fr; }
  .quiz-hint { display: none; }
  .site-nav {
    padding: var(--space-3);
  }
  .nav-cta {
    padding-inline: var(--space-3);
  }
}

@media (max-height: 760px) {
  #hero {
    min-height: auto;
    padding-bottom: 3.5rem;
  }
  .hero-headline {
    font-size: clamp(2rem, 7vh, var(--font-size-2xl));
  }
}

/* ── OBSIDIAN SURFACE ─────────────────────────────────────────────────────── */
/* True-black embedded panel with plasma-lit border and corner brackets.       */
/* Used for the Artifact Bestiary and Tier Calculator surfaces.                */

.obsidian-surface {
  background: var(--void-true);
  border: 1px solid var(--border-p);
  box-shadow: var(--glow-p-sm), var(--shadow-card);
  position: relative;
}

/* Corner bracket decorations */
.surface-frame::before,
.surface-frame::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--a-mid);
  border-style: solid;
  z-index: 2;
}
.surface-frame::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
}
.surface-frame::after {
  bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0;
}

/* Tab bar */
.surface-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-dim);
  background: rgba(0,0,0,.4);
  overflow-x: auto;
  scrollbar-width: none;
}
.surface-tabs::-webkit-scrollbar { display: none; }

.surface-tab {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--text-dim);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
  user-select: none;
}
.surface-tab:hover { color: var(--text-secondary); }
.surface-tab.active {
  color: var(--a-mid);
  border-bottom-color: var(--a-mid);
  background: rgba(255,170,34,.06);
}

/* Audience filter bar */
.surface-audience-bar {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-dim);
  flex-wrap: wrap;
}

.audience-box {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--text-dim);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  user-select: none;
}
.audience-box:hover { color: var(--text-secondary); border-color: var(--border-p); }
.audience-box.active {
  color: var(--a-mid);
  border-color: var(--border-a);
  background: rgba(255,170,34,.08);
}

/* Two-panel body */
.surface-body {
  display: flex;
  min-height: 380px;
}

/* List panel */
.surface-list {
  width: 35%;
  min-width: 180px;
  border-right: 1px solid var(--border-dim);
  overflow-y: auto;
  flex-shrink: 0;
}

.surface-list-item {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,.03);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
}
.surface-list-item:hover { color: var(--text-secondary); background: rgba(255,255,255,.02); }

/* Selected: amber box */
.surface-list-item.selected {
  color: var(--a-mid);
  border-left: 2px solid var(--a-mid);
  background: rgba(255,170,34,.06);
  padding-left: calc(var(--space-4) - 2px);
}

/* Highlighted: must-have for active audience (distinct from selected) */
.surface-list-item.highlighted {
  border-left: 3px solid var(--a-glow);
  color: var(--text-secondary);
  padding-left: calc(var(--space-4) - 3px);
}
.surface-list-item.highlighted.selected {
  color: var(--a-mid);
  border-left: 3px solid var(--a-mid);
  background: rgba(255,170,34,.06);
}

/* Tagged indicator dot */
.surface-list-item .tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--a-mid);
  flex-shrink: 0;
  display: none;
}
.surface-list-item.tagged .tag-dot { display: block; }
.surface-list-item.tagged { color: var(--a-core); }

/* Detail panel */
.surface-detail {
  flex: 1;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.detail-empty {
  color: var(--text-dim);
  font-size: var(--font-size-xs);
  margin: auto;
  opacity: .5;
}

.detail-name {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--p-core);
  margin-bottom: var(--space-5);
  line-height: var(--line-height-tight);
}

.detail-one-line {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
  line-height: var(--line-height-loose);
}

.detail-block {
  margin-bottom: var(--space-5);
}
.detail-block-label {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--p-dim);
  margin-bottom: var(--space-2);
}
.detail-block-text {
  font-size: var(--font-size-sm);
  color: var(--text-dim);
  line-height: var(--line-height-loose);
}

.detail-actions {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.detail-emergency {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--a-glow);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity var(--duration-fast);
}
.detail-emergency:hover { opacity: 1; }

.btn-tag {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--a-glow);
  border: 1px solid var(--a-glow);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.btn-tag:hover {
  background: var(--a-glow);
  color: var(--void);
}
.btn-tag.tagged {
  background: rgba(255,68,0,.12);
  color: var(--a-mid);
  border-color: var(--a-mid);
}
.btn-tag.tagged:hover {
  background: rgba(255,170,34,.18);
}

/* Tier calculator surface (below bestiary) */
.tier-calc-surface {
  margin-top: var(--space-6);
}

.tier-calc-empty {
  padding: var(--space-7);
  text-align: center;
  color: var(--text-dim);
  font-size: var(--font-size-xs);
}

.tier-calc-body {
  padding: var(--space-6);
}

.tagged-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.tagged-chip {
  font-size: var(--font-size-xs);
  color: var(--a-mid);
  border: 1px solid var(--border-a);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,170,34,.06);
}
.tagged-chip-remove {
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9em;
  line-height: 1;
  transition: color var(--duration-fast) var(--ease-out);
}
.tagged-chip-remove:hover { color: var(--a-glow); }

.tier-calc-result {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  flex-wrap: wrap;
}

.tier-badge-lg {
  font-size: var(--font-size-xl);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}
.tier-badge-lg.beeline   { color: var(--p-core); }
.tier-badge-lg.hawkeye   { color: var(--a-mid); }
.tier-badge-lg.sharktank { color: var(--a-glow); }
.tier-badge-lg.skunkworks { color: #ff2266; }

.tier-rationale-text {
  font-size: var(--font-size-sm);
  color: var(--text-dim);
  line-height: var(--line-height-loose);
  max-width: 420px;
}

.tier-calc-details {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.tier-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--border-dim);
  padding-bottom: var(--space-2);
}

.tier-calc-label {
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.tier-calc-value {
  color: var(--text-base);
  text-align: right;
}

.tier-calc-type-note {
  margin-top: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  line-height: var(--line-height-loose);
  font-style: italic;
  max-width: 420px;
}

.tier-calc-cta {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

/* Skip-to-bestiary anchor link in quiz section */
.skip-to-bestiary {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  text-decoration: none;
  letter-spacing: var(--letter-spacing-wide);
  transition: color var(--duration-fast) var(--ease-out);
}
.skip-to-bestiary:hover { color: var(--text-bright); }

/* ── BESTIARY RESPONSIVE ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .surface-body {
    flex-direction: column;
    min-height: 0;
  }
  .surface-list {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-dim);
    max-height: 200px;
  }
  .surface-detail {
    padding: var(--space-5);
  }
  .tier-calc-result {
    flex-direction: column;
    gap: var(--space-4);
  }
}

/* ── NAV HAMBURGER + DRAWER ───────────────────────────────────────────────── */

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--p-mid);
  border-radius: 1px;
  transition: background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.nav-burger:hover span {
  background: var(--p-core);
  box-shadow: 0 0 6px var(--p-mid);
}

.nav-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 280px;
  height: 100vh;
  background: rgba(1, 0, 2, .97);
  border-left: 1px solid var(--border-p);
  box-shadow: var(--glow-p-sm), -8px 0 32px rgba(0, 0, 0, .7);
  transform: translateX(100%);
  transition: transform 0.26s var(--ease-out);
  z-index: 500;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 499;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s var(--ease-out);
}
.nav-drawer-overlay.active { opacity: 1; pointer-events: all; }

.nav-drawer-close {
  align-self: flex-end;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1.375rem;
  line-height: 1;
  padding: var(--space-1);
  margin-bottom: var(--space-6);
  appearance: none;
  -webkit-appearance: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.nav-drawer-close:hover { color: var(--text-secondary); }

.nav-drawer-emergency {
  display: block;
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--a-mid);
  text-decoration: none;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: var(--space-5);
}
.nav-drawer-emergency:hover { color: var(--a-core); }
.nav-drawer-emergency .drawer-tag {
  font-size: var(--font-size-xs);
  color: var(--a-glow);
  margin-left: var(--space-2);
}

.nav-drawer-links {
  display: flex;
  flex-direction: column;
}
.nav-drawer-links a {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--text-dim);
  text-decoration: none;
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: color var(--duration-fast) var(--ease-out);
}
.nav-drawer-links a:last-child { border-bottom: none; }
.nav-drawer-links a:hover { color: var(--p-core); }

@media (max-width: 768px) {
  .nav-burger { display: flex; }
  .nav-links   { display: none !important; }
  .nav-cta     { display: none !important; }
  .nav-status  { display: none !important; }
}

/* ── TRUST STRIP ─────────────────────────────────────────────────────────── */
.trust-strip {
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-top: var(--space-4);
  line-height: 1.8;
}

/* ── WHO THIS IS FOR ─────────────────────────────────────────────────────── */
#who-for {
  padding: var(--space-7) 0;
  border-top: 1px solid var(--border-dim);
}
.who-for-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
@media (max-width: 640px) {
  .who-for-block { grid-template-columns: 1fr; gap: var(--space-5); }
}
.who-for-label {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--p-mid);
  margin-bottom: var(--space-3);
}
.who-for-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
}

/* ── ROUTE GRID ──────────────────────────────────────────────────────────── */
.route-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
@media (max-width: 768px) {
  .route-grid { grid-template-columns: 1fr; }
}
.route-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--border-dim);
  background: var(--glass);
  text-decoration: none;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.route-card:hover {
  border-color: var(--p-mid);
  background: rgba(255,255,255,0.03);
}
.route-card--urgent {
  border-color: var(--a-mid);
}
.route-card--urgent:hover {
  border-color: var(--a-core);
  background: rgba(255,160,80,0.04);
}
.route-signal {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: 1.4;
}
.route-dest {
  font-size: var(--font-size-base);
  color: var(--text-bright);
  font-weight: 500;
}
.route-card--urgent .route-dest {
  color: var(--a-mid);
}
.route-sub {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  line-height: 1.6;
}
.use-cases-label {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-5);
}

/* ── CASE CARDS ──────────────────────────────────────────────────────────── */
#case-studies {
  padding: var(--space-10) 0;
  border-top: 1px solid var(--border-dim);
}
.case-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) {
  .case-card-grid { grid-template-columns: 1fr; }
}
.case-card {
  border: 1px solid var(--border-dim);
  background: var(--glass);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.case-gate-tag {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--p-mid);
}
.case-schema {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.case-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-dim);
  font-size: var(--font-size-xs);
  line-height: 1.6;
}
.case-row:last-child { border-bottom: none; }
.case-row--repair .case-val { color: var(--text-bright); }
.case-label {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6rem;
  padding-top: 0.1em;
}
.case-val { color: var(--text-secondary); }
.case-card-link {
  font-size: var(--font-size-xs);
  color: var(--text-accent);
  letter-spacing: 0.04em;
  margin-top: auto;
}
.case-card-link:hover { color: var(--p-core); }

/* ── OPERATOR BLOCK ──────────────────────────────────────────────────────── */
#operator {
  padding: var(--space-10) 0;
  border-top: 1px solid var(--border-dim);
}
.operator-block {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.operator-lede {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
  max-width: 64ch;
}
.operator-domains {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 640px) {
  .operator-domains { grid-template-columns: 1fr; }
}
.operator-domain-label {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--p-mid);
  margin-bottom: var(--space-3);
}
.operator-domain-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.operator-domain-list li {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.6;
  padding-left: var(--space-4);
  position: relative;
}
.operator-domain-list li::before {
  content: '\00b7';
  position: absolute;
  left: 0;
  color: var(--text-dim);
}
.operator-contact {
  font-size: var(--font-size-sm);
  color: var(--text-dim);
}
.operator-contact a { color: var(--text-accent); }