/* Self-hosted brand faces (2026-07-30). Replaces the render-blocking
   fonts.googleapis.com import, which cost ~836ms of blocking time on mobile
   plus a third-party DNS + TLS handshake. These are the latin-subset
   VARIABLE files, so one file per family covers every weight the site uses
   (including the 650 and 800 that a static set would have missed).
   font-display: swap keeps text visible during load. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/fira-code.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   SynapseThreat — shared public stylesheet
   Canonical brand tokens; matte void; forensic case-file system.
   ============================================================ */

:root {
  /* ===== CANONICAL BRAND TOKENS — single source of truth ===== */
  --void: #0B0B0F;           /* page background */
  --raised: #15161B;         /* panels, cards, surfaces */
  --line: #23242B;           /* borders, dividers */
  --output: #F2F2F0;         /* primary text */
  --platinum: #C7CAD1;       /* secondary text, structure, hairlines */
  --platinum-dim: #8A8E97;   /* tertiary text */
  --crimson: #B5172E;        /* accent / "signal" — use rarely */
  --crimson-deep: #7C1020;   /* crimson fields carrying white text */
  --crimson-bright: #D7263D; /* hover lift + large display text on void */
  --crimson-text: #E0526A;   /* small crimson text on void (5:1) */
  --error: #FF5A5F;          /* form validation only */

  /* ===== Legacy --st-* aliases → canonical ===== */
  --st-void: var(--void);
  --st-output: var(--output);
  --st-truth: var(--crimson);
  --st-framework: var(--platinum-dim);
  --st-operation: var(--platinum);
  --st-truth-glow: rgba(181, 23, 46, 0.3);
  --st-error: var(--error);

  --font-headline: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'IBM Plex Sans', Arial, sans-serif;
  --font-mono: 'Fira Code', monospace;

  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --nav-h: 72px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--output);
  background-color: var(--void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

a { color: var(--platinum); text-decoration: none; transition: color 0.2s var(--ease-smooth); }
a:hover { color: var(--output); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--platinum);
  outline-offset: 2px;
}

button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
ul, ol { list-style: none; }
input, textarea, select { font-family: inherit; font-size: 16px; }
::selection { background: var(--crimson-deep); color: var(--output); }

/* ===== Wordmark (one joined unit) ===== */
.wm { font-family: var(--font-headline); font-weight: 700; color: var(--output); }
.wm-threat { font-family: var(--font-mono); font-weight: 400; font-size: 1.05em; color: var(--crimson); }

/* ===== Utilities ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

.skip-link {
  position: absolute; top: -100%; left: 16px;
  background: var(--crimson-deep); color: var(--output);
  padding: 12px 24px; z-index: 100000;
  font-family: var(--font-mono); font-size: 14px;
  border-radius: 0 0 4px 4px; transition: top 0.2s;
}
.skip-link:focus { top: 0; }

.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px)  { .container { padding: 0 48px; } }
@media (min-width: 1280px) { .container { padding: 0 48px; } }

.scroll-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 1px;
  background: var(--crimson); z-index: 10001;
  transform: scaleX(0); transform-origin: left; will-change: transform;
}

.grain { position: fixed; inset: 0; pointer-events: none; z-index: 10000; opacity: 0.03; }

.section-divider { height: 1px; background: var(--line); margin: 0 auto; max-width: 1320px; }

/* ===== Type system ===== */
.eyebrow {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--platinum-dim); margin-bottom: 20px;
}

.section-marker {
      text-transform: uppercase;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--platinum-dim); margin-bottom: 28px;
}

.section-headline {
  font-family: var(--font-headline); font-weight: 800;
  font-size: clamp(28px, 4.6vw, 46px); line-height: 1.08;
  letter-spacing: -0.015em; text-transform: uppercase;
  color: var(--output); max-width: 21ch; margin-bottom: 24px;
}
.section-headline--wide { max-width: 28ch; }

.lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; color: var(--platinum); max-width: 62ch; }
.body-copy { color: var(--platinum); max-width: 66ch; }
.body-copy strong { color: var(--output); font-weight: 600; }

.mono-note { font-family: var(--font-mono); font-size: 13px; color: var(--platinum-dim); letter-spacing: 0.04em; }

section { padding: clamp(72px, 10vw, 140px) 0; position: relative; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 16px 32px; min-height: 48px; border-radius: 4px;
  transition: background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth);
}
.btn--primary { background: var(--crimson); color: var(--output); }
.btn--primary:hover { background: var(--crimson-bright); color: var(--output); }
.btn--ghost { border: 1px solid var(--line); color: var(--platinum); background: transparent; }
.btn--ghost:hover { border-color: var(--platinum-dim); color: var(--output); }
.btn:active { scale: 0.98; }
.text-link:active, a.chip:active { scale: 0.98; }

.text-link {
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--platinum); border-bottom: 1px solid var(--line);
  padding-bottom: 3px; display: inline-flex; align-items: center; gap: 8px; min-height: 24px;
}
.text-link:hover { color: var(--output); border-color: var(--platinum-dim); }

/* ===== Navigation ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: transparent;
  transition: background-color 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth);
  border-bottom: 1px solid transparent;
}
.nav--scrolled { background: rgba(11, 11, 15, 0.92); border-bottom-color: var(--line); backdrop-filter: blur(8px); }

.nav__inner {
  max-width: none; margin: 0 auto; height: var(--nav-h);
  padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
@media (min-width: 768px)  { .nav__inner { padding: 0 32px; } }
@media (min-width: 1280px) { .nav__inner { padding: 0 40px; } }

.nav__wordmark { font-size: 19px; letter-spacing: 0.01em; display: inline-flex; align-items: baseline; }

.nav__links { display: none; align-items: center; gap: 8px; }
@media (min-width: 1080px) { .nav__links { display: flex; } }

.nav__link {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--platinum); padding: 12px 14px; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
}
.nav__link:hover { color: var(--output); }
.nav__link[aria-current="page"] { color: var(--output); box-shadow: inset 0 -2px 0 var(--crimson); border-radius: 0; }

.nav__cta {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--output); background: var(--crimson);
  padding: 12px 20px; min-height: 44px; border-radius: 4px; margin-left: 10px;
  display: inline-flex; align-items: center;
  transition: background-color 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth);
}
.nav__cta:hover { background: var(--crimson-bright); color: var(--output); }

/* Use-cases dropdown (disclosure pattern) */
.nav__dropdown { position: relative; }
.nav__chevron { transition: transform 0.2s var(--ease-smooth); }
.nav__dropdown-btn[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.nav__dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 8px; min-width: 240px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px; z-index: 1001;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  /* visibility flips after the fade on close, instantly on open — items must
     be focusable the moment the menu opens */
  transition: opacity 0.18s var(--ease-smooth), transform 0.18s var(--ease-smooth), visibility 0s 0.18s;
}
.nav__dropdown-menu.open {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.18s var(--ease-smooth), transform 0.18s var(--ease-smooth), visibility 0s;
}

.nav__dropdown-link {
  display: block; padding: 12px 14px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--platinum); min-height: 44px;
}
.nav__dropdown-link:hover { background: var(--void); color: var(--output); }
.nav__dropdown-link[aria-current="page"] { color: var(--output); box-shadow: inset 2px 0 0 var(--crimson); }

.nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--output); }
@media (min-width: 1080px) { .nav__toggle { display: none; } }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 999;
  background: var(--void);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 96px 32px 48px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth), visibility 0s 0.25s;
}
.mobile-menu--open {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth), visibility 0s;
}

.mobile-menu__group-label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--platinum-dim); margin-bottom: 8px;
}
.mobile-menu__link {
  font-family: var(--font-headline); font-weight: 700; font-size: 28px;
  color: var(--output); padding: 10px 0; min-height: 48px; display: flex; align-items: center;
}
.mobile-menu__link:hover { color: var(--platinum); }
.mobile-menu__link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--crimson); padding-left: 14px; }
.mobile-menu__rule { height: 1px; background: var(--line); margin: 20px 0; }
.mobile-menu__cta {
  margin-top: 20px; background: var(--crimson); color: var(--output);
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 16px 24px; min-height: 48px; border-radius: 4px; text-align: center;
}
.mobile-menu__cta:hover { background: var(--crimson-bright); color: var(--output); }

/* ===== Interior page hero ===== */
.page-hero { padding: calc(var(--nav-h) + clamp(56px, 9vw, 110px)) 0 clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.page-hero__headline {
  font-family: var(--font-headline); font-weight: 800;
  font-size: clamp(32px, 5.4vw, 62px); line-height: 1.04; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--output); max-width: 18ch; margin-bottom: 28px;
}
.page-hero .lede { margin-bottom: 14px; }

/* Breadcrumbs */
.breadcrumbs { padding: 0 0 24px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumbs li { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--platinum-dim); display: flex; align-items: center; gap: 8px; }
.breadcrumbs li + li::before { content: "/"; color: var(--line); }
.breadcrumbs a { color: var(--platinum-dim); }
.breadcrumbs a:hover { color: var(--output); }
.breadcrumbs [aria-current="page"] { color: var(--platinum); }

/* ===== Status + evidence-state chips (color-independent glyphs) ===== */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 4px; padding: 6px 12px; color: var(--platinum);
}
.chip::before { content: "○"; font-size: 10px; color: var(--platinum-dim); }
a.chip { transition: color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth); }
a.chip:hover { color: var(--output); border-color: var(--platinum-dim); }
.chip--signal { border-color: var(--crimson-deep); color: var(--output); background: rgba(124, 16, 32, 0.18); }
.chip--signal::before { content: "●"; color: var(--crimson); }
.chip--dim { color: var(--platinum-dim); border-style: dashed; }
.chip--dim::before { content: "◌"; }
.chip--struck { color: var(--platinum-dim); text-decoration: line-through; text-decoration-color: var(--platinum-dim); }
.chip--struck::before { content: "×"; text-decoration: none; }

.status-line {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--platinum-dim);
}

/* ===== Case-file panel ===== */
.casefile { background: var(--raised); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.casefile__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--platinum-dim);
}
.casefile__body { padding: 28px 20px; }
@media (min-width: 768px) { .casefile__body { padding: 32px 28px; } }

/* Ledger rows (principles, decisions) */
.ledger { border-top: 1px solid var(--line); }
.ledger__row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .ledger__row { grid-template-columns: 320px 1fr; gap: 40px; } }
.ledger__key { font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--output); }
.ledger__val { color: var(--platinum); max-width: 62ch; }

/* ===== Lifecycle rail (OBSERVE → RECONSTRUCT → ASSESS) ===== */
.rail { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .rail { grid-template-columns: repeat(3, 1fr); gap: 0; } }

.rail__step { padding: 28px 24px 32px; border: 1px solid var(--line); border-radius: 6px; position: relative; background: transparent; }
@media (min-width: 900px) {
  .rail__step { border-radius: 0; border-right: none; }
  .rail__step:first-child { border-radius: 6px 0 0 6px; }
  .rail__step:last-child { border-right: 1px solid var(--line); border-radius: 0 6px 6px 0; }
  .rail__step + .rail__step::before {
    content: "→"; position: absolute; left: -13px; top: 30px;
    font-family: var(--font-mono); font-size: 18px; color: var(--platinum-dim);
    background: var(--void); padding: 2px 4px; z-index: 1;
  }
}
.rail__name { font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--output); margin-bottom: 14px; }
.rail__copy { color: var(--platinum); font-size: 15px; margin-bottom: 18px; }
.rail__status { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--platinum-dim); border-top: 1px solid var(--line); padding-top: 12px; }

/* ===== Validation lifecycle (SCOPE → AUTHORIZE → TEST → COMPARE) — deliberately distinct ===== */
.vrail { counter-reset: vstep; display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--raised); overflow: hidden; }
@media (min-width: 900px) { .vrail { grid-template-columns: repeat(4, 1fr); } }

.vrail__step { counter-increment: vstep; padding: 28px 24px 32px; border-bottom: 1px solid var(--line); position: relative; }
@media (min-width: 900px) { .vrail__step { border-bottom: none; border-right: 1px solid var(--line); } .vrail__step:last-child { border-right: none; } }
.vrail__step::before {
  content: "0" counter(vstep); display: block;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--platinum-dim); margin-bottom: 16px;
}
.vrail__name { font-family: var(--font-mono); font-size: 15px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--output); margin-bottom: 12px; }
.vrail__copy { color: var(--platinum); font-size: 14.5px; }

/* ===== Behavior sequence (mission pages) ===== */
.seq { position: relative; padding-left: 28px; max-width: 720px; }
.seq::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.seq__step { position: relative; padding: 0 0 26px; }
.seq__step:last-child { padding-bottom: 0; }
.seq__step::before {
  content: ""; position: absolute; left: -25px; top: 8px; width: 9px; height: 9px;
  border: 1px solid var(--platinum-dim); border-radius: 50%; background: var(--void);
}
.seq__step--signal::before { background: var(--crimson); border-color: var(--crimson); }
.seq__name { font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--output); margin-bottom: 4px; }
.seq__copy { color: var(--platinum-dim); font-size: 14.5px; max-width: 58ch; }

/* ===== Use-case blocks (deliberately asymmetric) ===== */
.uc { display: grid; grid-template-columns: 1fr; gap: 32px; padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--line); }
.uc:first-of-type { border-top: none; padding-top: 0; }
@media (min-width: 980px) {
  .uc--a { grid-template-columns: 7fr 5fr; gap: 64px; }
  .uc--b { grid-template-columns: 5fr 7fr; gap: 64px; }
  .uc--b .uc__aside { order: -1; }
}
.uc__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--platinum-dim); margin-bottom: 16px; }
.uc__headline { font-family: var(--font-headline); font-weight: 800; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; color: var(--output); max-width: 24ch; margin-bottom: 16px; }
.uc__copy { color: var(--platinum); max-width: 58ch; margin-bottom: 24px; }
.uc__aside { align-self: center; }

/* Mini evidence strip used inside use-case asides */
.estrip { border: 1px solid var(--line); border-radius: 6px; background: var(--raised); padding: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--platinum-dim); line-height: 2; overflow-x: auto; }
.estrip b { color: var(--platinum); font-weight: 500; }
.estrip .sig { color: var(--output); background: rgba(124, 16, 32, 0.35); padding: 1px 6px; border-radius: 3px; }

/* ===== Evidence states grid ===== */
.states { display: flex; flex-wrap: wrap; gap: 10px; }

/* ===== Delivery lists ===== */
.twocol { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) { .twocol { grid-template-columns: 1fr 1fr; gap: 64px; } }
.plainlist li { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--platinum); display: flex; align-items: baseline; gap: 12px; }
.plainlist li::before { content: "▸"; font-family: var(--font-mono); font-size: 11px; color: var(--platinum-dim); }
.list-title { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--platinum-dim); margin-bottom: 12px; }

/* ===== FAQ ===== */
.faq__list { border-top: 1px solid var(--line); max-width: 1000px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  text-align: left; padding: 22px 4px; min-height: 48px;
  font-family: var(--font-headline); font-weight: 600; font-size: 17px; color: var(--output);
}
.faq__toggle:hover { color: var(--platinum); }
.faq__icon { flex: 0 0 auto; transition: transform 0.25s var(--ease-smooth); color: var(--platinum-dim); }
.faq__item--open .faq__icon { transform: rotate(45deg); }
.faq__answer { overflow: hidden; max-height: 0; transition: max-height 0.3s var(--ease-smooth); }
.faq__item--open .faq__answer { max-height: 640px; }
.faq__answer-inner { padding: 0 4px 24px; color: var(--platinum); max-width: 68ch; }
.faq__answer-inner p + p { margin-top: 12px; }

/* ===== Final CTA + form ===== */
.briefing { border-top: 1px solid var(--line); }
.briefing__inner { max-width: 860px; }
.briefing__headline {
  font-family: var(--font-headline); font-weight: 800;
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -0.015em;
  text-transform: uppercase; color: var(--output); max-width: 20ch; margin-bottom: 20px;
}
.briefing__subtext { color: var(--platinum); max-width: 58ch; margin-bottom: 44px; }

.form { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 768px) { .form { grid-template-columns: 1fr 1fr; gap: 24px 28px; } .form__group--full { grid-column: 1 / -1; } }

.form__label {
  display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--platinum); margin-bottom: 10px;
}
.form__label .required { color: var(--crimson-bright); }

.form__input, .form__select, .form__textarea {
  width: 100%; background: var(--raised); border: 1px solid var(--line); border-radius: 4px;
  color: var(--output); padding: 14px 16px; min-height: 48px;
  transition: border-color 0.2s var(--ease-smooth);
}
.form__textarea { resize: vertical; min-height: 96px; }
.form__input:focus, .form__select:focus, .form__textarea:focus { border-color: var(--platinum-dim); outline: none; }
.form__input:focus-visible, .form__select:focus-visible, .form__textarea:focus-visible { outline: 2px solid var(--platinum); outline-offset: 1px; }
.form__input.error, .form__select.error, .form__textarea.error { border-color: var(--error); }
.form__input::placeholder, .form__textarea::placeholder { color: var(--platinum-dim); opacity: 0.75; }

.form__select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8E97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}

.form__hint { font-size: 13px; color: var(--platinum-dim); margin-top: 8px; }
.form__error { color: var(--error); font-family: var(--font-mono); font-size: 12px; margin-top: 8px; min-height: 0; }

.form__submit { width: 100%; position: relative; }
.form__submit:disabled { opacity: 0.55; cursor: not-allowed; }
@media (min-width: 768px) { .form__submit { width: auto; min-width: 320px; } }

.form__submit .spinner {
  width: 14px; height: 14px; border: 2px solid rgba(242, 242, 240, 0.35); border-top-color: var(--output);
  border-radius: 50%; display: none;
}
.form__submit.loading .spinner { display: inline-block; animation: spin 0.8s linear infinite; }
.form__submit.loading .btn-text { opacity: 0.6; }
@keyframes spin { to { transform: rotate(360deg); } }

.form__success {
  display: none; margin-top: 8px; padding: 24px 28px;
  border: 1px solid var(--crimson-deep); border-radius: 6px; background: var(--raised);
  font-family: var(--font-mono); font-size: 14px; color: var(--output); letter-spacing: 0.02em;
}
.form__success.visible { display: block; }

.form__submit-error { color: var(--error); font-family: var(--font-mono); font-size: 12px; margin-top: 12px; }

/* ===== Footer ===== */
.footer { border-top: 1px solid var(--line); padding: clamp(48px, 7vw, 88px) 0 36px; }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 56px; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; } }
.footer__wordmark { font-size: 20px; margin-bottom: 14px; }
.footer__boilerplate { color: var(--platinum-dim); font-size: 14px; max-width: 34ch; }
.footer__col-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--platinum-dim); margin-bottom: 16px; }
.footer__link { display: block; color: var(--platinum); font-size: 14.5px; padding: 6px 0; min-height: 32px; }
.footer__link:hover { color: var(--output); }
.footer__bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: baseline; }
.footer__copy { color: var(--platinum-dim); font-size: 13px; }
.footer__copy a { color: var(--platinum-dim); text-decoration: underline; text-underline-offset: 3px; }
.footer__copy a:hover { color: var(--output); }
.footer__tagline { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--platinum-dim); }
.footer__tagline-thr { color: var(--crimson); }

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.revealed { opacity: 1; transform: none; }
.section-marker { opacity: 0; transition: opacity 0.7s var(--ease-out); }
.section-marker.revealed { opacity: 1; }

/* ===== Legal / policy page ===== */
.container--narrow { max-width: 860px; }
.policy { padding: 24px 0 120px; color: var(--platinum-dim); line-height: 1.7; }
.policy h2 { font-family: var(--font-headline); font-size: 20px; font-weight: 700; color: var(--output); margin: 48px 0 16px; }
.policy h3 { font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--output); margin: 32px 0 12px; }
.policy p { margin-bottom: 16px; }
.policy ul { margin-bottom: 16px; }
.policy li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.policy li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border: 1px solid var(--crimson); border-radius: 1px; }
.policy strong { color: var(--platinum); }
.policy a { text-decoration: underline; text-underline-offset: 3px; }
.policy table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; display: block; overflow-x: auto; }
.policy th, .policy td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.policy th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--platinum); font-weight: 500; }
.policy td { color: var(--platinum-dim); }

/* ===== 404 ===== */
.notfound { min-height: calc(100svh - var(--nav-h) - 240px); display: flex; align-items: center; padding: calc(var(--nav-h) + 48px) 0 64px; }
.notfound__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.notfound__code { font-family: var(--font-mono); font-size: clamp(4rem, 15vw, 8rem); font-weight: 700; letter-spacing: 0.08em; color: var(--platinum-dim); opacity: 0.3; margin-bottom: 16px; }
.notfound__title { font-family: var(--font-headline); font-size: clamp(18px, 3vw, 28px); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 16px; }
.notfound__copy { font-size: 15px; color: var(--platinum-dim); margin-bottom: 32px; max-width: 400px; }
.notfound__btn { border-color: var(--crimson-deep); }
.notfound__btn:hover { border-color: var(--crimson); color: var(--output); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .section-marker { opacity: 1 !important; transform: none !important; }
  .faq__answer { transition: none; }
}

/* ===== Small-screen guards ===== */
@media (max-width: 480px) {
  .btn { width: 100%; }
  .estrip { font-size: 11px; }
}

/* ============================================================
   index02 port — homepage sections + painting glitch hero
   (extracted verbatim from index02.html's stylesheet, comments
   stripped; shared chrome selectors excluded — nav/footer/form
   stay canonical)
   ============================================================ */

.section {
      position: relative;
      padding: 128px 0;
      border-top: 1px solid var(--line);
    }

#staging, #case-file {
      padding-top: 96px;
    }

.section--raised {
      background: var(--raised);
    }

.section-title {
      max-width: 920px;
      margin: 0;
      color: var(--output);
      font-family: var(--font-headline);
      font-size: clamp(28px, 4.6vw, 46px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.015em;
      text-transform: uppercase;
    }

.section-lede {
      max-width: 720px;
      margin: 28px 0 0;
      color: var(--platinum);
      font-size: clamp(1rem, 1.5vw, 1.22rem);
      line-height: 1.7;
    }

.section-copy {
      color: var(--platinum-dim);
      font-size: 16px;
      line-height: 1.75;
    }

.hero {
      min-height: 100svh;
      padding: calc(var(--nav-height) + 76px) 0 72px;
      display: flex;
      align-items: center;
    }

.hero__grid {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
      gap: clamp(48px, 7vw, 104px);
      align-items: center;
    }

.hero__headline {
      max-width: 840px;
      margin: 0;
      color: var(--output);
      font-family: var(--font-headline);
      font-size: clamp(3rem, 7.2vw, 7.5rem);
      font-weight: 700;
      line-height: 0.94;
      letter-spacing: -0.055em;
    }

.hero__headline span {
      color: var(--platinum);
    }

.hero__subtext {
      max-width: 720px;
      margin: 34px 0 0;
      color: var(--platinum);
      font-size: clamp(1.05rem, 1.55vw, 1.3rem);
      line-height: 1.7;
    }

.hero__problem {
      max-width: 700px;
      margin: 26px 0 0;
      padding-left: 18px;
      border-left: 2px solid var(--crimson);
      color: var(--platinum-dim);
      font-size: 15px;
      line-height: 1.7;
    }

.hero__missions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 30px;
    }

.hero__mission {
      padding: 6px 9px;
      border: 1px solid var(--line);
      border-radius: 4px;
      color: var(--platinum-dim);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

.hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 38px;
    }

.hero__reassurance {
      margin: 20px 0 0;
      color: var(--platinum-dim);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

.problem__layout {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: clamp(48px, 8vw, 120px);
      align-items: start;
    }

.problem__headline {
      margin: 0;
      color: var(--output);
      font-family: var(--font-headline);
      font-size: clamp(30px, 3.6vw, 52px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.02em;
      text-transform: uppercase;
    }

.problem__headline em {
      /* crimson-bright clears the 3:1 large-text ratio on void; base crimson is 2.9:1 */
      color: var(--crimson-bright);
      font-style: normal;
    }

.problem__body {
      padding-top: 8px;
    }

.problem__body p {
      margin: 0 0 22px;
      color: var(--platinum);
      font-size: clamp(1.05rem, 1.45vw, 1.22rem);
      line-height: 1.75;
    }

.problem__body p:last-child {
      margin-bottom: 0;
    }

.problem__statement {
      margin-top: 40px;
      padding: 24px 0 0;
      border-top: 1px solid var(--line);
      color: var(--output);
      font-family: var(--font-headline);
      font-size: clamp(1.35rem, 2.6vw, 2.3rem);
      font-weight: 600;
      line-height: 1.35;
    }

.opath {
      margin-top: 72px;
      padding: 22px 0 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

.opath__header {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 24px;
      align-items: center;
      color: var(--platinum-dim);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

.opath__header span:first-child { margin-right: auto; color: var(--platinum); }
.opath__header span { display: inline-flex; gap: 8px; align-items: center; }
.opath__key { width: 22px; height: 1px; background: var(--platinum); }
.opath__key--gap { background: var(--crimson); }

.opath__svg { width: 100%; margin-top: 14px; overflow: visible; }
.opath__svg--mobile { display: none; }
.opath__controls rect { fill: rgba(11, 11, 15, 0.58); stroke: var(--line); stroke-width: 1; }
.opath__labels, .opath__note {
      fill: var(--platinum-dim);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.09em;
      text-anchor: middle;
    }
.opath__note { text-anchor: start; }
.opath__note--signal { fill: var(--crimson-text); }
.opath__fragments path, .opath__gaps path {
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      transition: stroke-dashoffset 0.68s var(--ease-smooth);
      transition-delay: calc(var(--i) * 70ms);
    }
.opath__fragments path { stroke: var(--platinum); }
.opath__gaps path { stroke: var(--crimson); }
.opath.revealed .opath__fragments path, .opath.revealed .opath__gaps path { stroke-dashoffset: 0; }
.opath__sightlines line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }

.opath__captions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      border-top: 1px solid var(--line);
    }
.opath__caption { padding: 24px 26px 28px 0; }
.opath__caption + .opath__caption { padding-left: 26px; border-left: 1px solid var(--line); }
.opath__caption h3 {
      color: var(--output);
      font-family: var(--font-headline);
      font-size: 18px;
      font-weight: 650;
    }
.opath__caption p { max-width: 58ch; margin-top: 9px; color: var(--platinum-dim); font-size: 13px; line-height: 1.65; }

.lifecycle {
      margin-top: 64px;
      border-top: 1px solid var(--line);
    }

.lifecycle__step {
      display: grid;
      grid-template-columns: 52px 128px minmax(0, 0.72fr) minmax(0, 1.28fr);
      gap: 28px;
      align-items: center;
      padding: 30px 0;
      border-bottom: 1px solid var(--line);
    }

.lifecycle__number {
      color: var(--crimson-text);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.08em;
    }

.lifecycle__title {
      margin: 0;
      color: var(--output);
      font-family: var(--font-headline);
      font-size: clamp(1.35rem, 2.1vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
    }

.lifecycle__copy {
      margin: 0;
      color: var(--platinum-dim);
      font-size: 15px;
      line-height: 1.7;
    }

.lifecycle__glyph { width: 128px; height: 64px; }
.lifecycle__frame, .lifecycle__link, .lifecycle__signal, .lifecycle__reference {
      fill: none;
      stroke: var(--platinum-dim);
      stroke-width: 1.25;
      stroke-linecap: square;
      stroke-linejoin: miter;
    }
.lifecycle__signal { stroke: var(--crimson); }
.lifecycle__reference { stroke: var(--line); stroke-dasharray: 3 4; }
.lifecycle__node { fill: var(--void); stroke: var(--platinum); stroke-width: 1.25; }
.lifecycle__node--signal { fill: var(--crimson); stroke: var(--crimson); }
.lifecycle__control { fill: rgba(199, 202, 209, 0.025); stroke: var(--line); stroke-width: 1; }
.lifecycle__control--signal { stroke: var(--crimson); }
.lifecycle__stop { stroke: var(--crimson); stroke-width: 2; }
.lifecycle__draw {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      transition: stroke-dashoffset 0.9s var(--ease-smooth) 0.18s;
    }
.lifecycle__step.revealed .lifecycle__draw { stroke-dashoffset: 0; }

.deliverables {
      display: grid;
      grid-template-columns: 0.8fr 1.2fr;
      gap: 48px;
      margin-top: 70px;
      padding-top: 48px;
      border-top: 1px solid var(--line);
    }

.deliverables h3 {
      margin: 0;
      color: var(--output);
      font-family: var(--font-headline);
      font-size: 28px;
      font-weight: 700;
      line-height: 1.2;
    }

.deliverables__list {
      display: grid;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid var(--line);
    }

.deliverables__list li {
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 12px;
      padding: 16px 0;
      border-bottom: 1px solid var(--line);
      color: var(--platinum);
    }

.deliverables__list li::before {
      content: "→";
      color: var(--crimson-text);
      font-family: var(--font-mono);
    }

.atlas-defs {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }

.usecases-stage {
      display: grid;
      grid-template-columns: minmax(400px, 0.88fr) minmax(0, 1.12fr);
      gap: clamp(52px, 6vw, 88px);
      align-items: start;
      margin-top: 62px;
    }

.operation-atlas {
      position: sticky;
      top: calc(var(--nav-height) + 28px);
      min-width: 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

.operation-atlas__header {
      display: flex;
      justify-content: space-between;
      padding: 16px 0;
      color: var(--platinum-dim);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }
.operation-atlas__index { color: var(--crimson-text); }
.operation-atlas__frame {
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background:
        linear-gradient(rgba(35, 36, 43, 0.32) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35, 36, 43, 0.32) 1px, transparent 1px),
        var(--void);
      background-size: 32px 32px;
      border: 1px solid var(--line);
    }
.operation-atlas__frame::before, .mission__atlas::before {
      content: "";
      position: absolute;
      inset: 12px;
      z-index: 2;
      border-top: 1px solid rgba(138, 142, 151, 0.18);
      border-left: 1px solid rgba(138, 142, 151, 0.18);
      pointer-events: none;
    }
.operation-atlas__note {
      padding: 14px 0 16px;
      color: var(--platinum-dim);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

.atlas-scene {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transform: translate3d(0, 10px, 0);
      transition: opacity 0.42s var(--ease-smooth), transform 0.52s var(--ease-smooth);
      pointer-events: none;
    }
.operation-atlas[data-active-scene="account-takeover"] .atlas-scene[data-scene="account-takeover"],
.operation-atlas[data-active-scene="platform-abuse"] .atlas-scene[data-scene="platform-abuse"],
.operation-atlas[data-active-scene="loyalty-abuse"] .atlas-scene[data-scene="loyalty-abuse"],
.operation-atlas[data-active-scene="cybercrime-red-team"] .atlas-scene[data-scene="cybercrime-red-team"] {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

.trace-figure {
      margin: 64px 0 0;
      max-width: 880px;
      border: 1px solid var(--line);
      background: var(--raised);
      padding: 20px 20px 14px;
    }
.trace-figure--wide { max-width: 1096px; margin: 48px 0 56px; }
.trace-figure svg { display: block; width: 100%; height: auto; }
.trace-figure svg .atlas__route,
.trace-figure svg .atlas__fragment {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      transition: stroke-dashoffset 1.1s var(--ease-smooth) 0.3s;
    }
.trace-figure.revealed svg .atlas__route,
.trace-figure.revealed svg .atlas__fragment {
      stroke-dashoffset: 0;
    }
@media (prefers-reduced-motion: reduce) {
  .trace-figure svg .atlas__route,
  .trace-figure svg .atlas__fragment { transition: none; stroke-dashoffset: 0; }
}
.trace-figure__note {
      margin: 12px 4px 0;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--platinum-dim);
    }
@media (max-width: 760px) {
  .trace-figure--wide { display: none; }
}

.atlas__grid { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 8; }
.atlas__kicker, .atlas__labels, .atlas__rail-label, .atlas__annotations {
      fill: var(--platinum-dim);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.08em;
    }
.atlas__kicker { fill: var(--platinum); }
.atlas__rail-label { font-size: 8px; }
.atlas__label--signal { fill: var(--crimson-text); }
.atlas__links, .atlas__annotations { fill: none; stroke: var(--line); stroke-width: 1; }
.atlas__annotations text { fill: var(--platinum-dim); stroke: none; font-size: 8px; }
.atlas__route, .atlas__fragment {
      fill: none;
      stroke: var(--crimson);
      stroke-width: 2;
      stroke-linecap: square;
      stroke-linejoin: miter;
    }
.atlas__fragment { stroke: var(--platinum); }
.atlas__nodes circle { fill: var(--void); stroke: var(--platinum); stroke-width: 1.25; }
.atlas__nodes .atlas__node--signal { fill: var(--crimson); stroke: var(--crimson); }
.atlas__value-blocks rect, .atlas__control-bars rect {
      fill: rgba(199, 202, 209, 0.025);
      stroke: var(--line);
      stroke-width: 1;
    }
.atlas__control-bars .atlas__control-bar--signal { stroke: var(--crimson); }
.atlas__stop { stroke: var(--crimson); stroke-width: 3; }

.missions { border-top: 1px solid var(--line); }

.mission {
      display: grid;
      grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
      grid-template-areas:
        "title copy"
        "title questions"
        "title footer";
      gap: 18px 38px;
      align-content: center;
      min-height: 430px;
      padding: 52px 0;
      border-bottom: 1px solid var(--line);
    }
.mission > div:first-child { grid-area: title; }
.mission__copy { grid-area: copy; }
.mission__questions { grid-area: questions; }
.mission__footer { grid-area: footer; }
.mission__atlas { display: none; }

.mission__label {
      margin: 0;
      color: var(--platinum-dim);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

.mission__title {
      margin: 10px 0 0;
      color: var(--output);
      font-family: var(--font-headline);
      font-size: clamp(20px, 2.1vw, 30px);
      font-weight: 800;
      line-height: 1.16;
      letter-spacing: -0.01em;
      text-transform: uppercase;
    }

.mission__copy {
      margin: 0;
      color: var(--platinum);
      font-size: 16px;
      line-height: 1.75;
    }

.mission__questions {
      margin: 0;
      padding: 0;
      list-style: none;
    }

.mission__questions li {
      position: relative;
      padding: 0 0 12px 18px;
      color: var(--platinum-dim);
      font-size: 13px;
      line-height: 1.55;
    }

.mission__questions li::before {
      content: "";
      position: absolute;
      top: 0.62em;
      left: 0;
      width: 6px;
      height: 1px;
      background: var(--crimson);
    }

.mission__footer {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 4px;
    }

.decision-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
      gap: 60px;
      align-items: start;
      margin-top: 60px;
    }

.decision-summary {
      position: sticky;
      top: calc(var(--nav-height) + 28px);
    }

.decision-summary__title {
      margin: 0;
      color: var(--output);
      font-family: var(--font-headline);
      font-size: clamp(28px, 4vw, 46px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.015em;
      text-transform: uppercase;
      letter-spacing: -0.035em;
    }

.decision-summary__copy {
      margin: 24px 0 0;
      color: var(--platinum);
      font-size: 17px;
      line-height: 1.75;
    }

.decision-record {
      border-top: 1px solid var(--line);
    }

.decision-record__row {
      display: grid;
      grid-template-columns: 190px 1fr;
      gap: 28px;
      padding: 24px 0;
      border-bottom: 1px solid var(--line);
    }

.decision-record__label {
      color: var(--platinum-dim);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

.decision-record__value {
      color: var(--platinum);
      font-size: 15px;
      line-height: 1.7;
    }

.decision-record__value strong {
      color: var(--output);
      font-weight: 600;
    }

.evidence-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

.evidence-tag {
      padding: 5px 8px;
      border: 1px solid var(--line);
      border-radius: 4px;
      color: var(--platinum-dim);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

.evidence-tag--signal {
      color: var(--crimson-text);
      border-color: rgba(181, 23, 46, 0.55);
    }

.evidence-layout {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
      gap: 64px;
      align-items: start;
      margin-top: 60px;
    }

.evidence-principles {
      margin: 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid var(--line);
    }

.evidence-principles li {
      padding: 18px 0;
      border-bottom: 1px solid var(--line);
      color: var(--platinum);
      font-size: 15px;
    }

.claim-states {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

.claim-state {
      min-height: 112px;
      padding: 18px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

.claim-state__name {
      margin: 0;
      color: var(--platinum);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

.claim-state__copy {
      margin: 12px 0 0;
      color: var(--platinum-dim);
      font-size: 12px;
      line-height: 1.55;
    }

.claim-state--signal {
      border-top: 2px solid var(--crimson);
    }

.claim-state--signal .claim-state__name {
      color: var(--crimson-text);
    }

.validation-layout {
      display: grid;
      grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
      gap: 72px;
      align-items: start;
      margin-top: 58px;
    }

.validation-intro {
      position: sticky;
      top: calc(var(--nav-height) + 28px);
    }

.validation-intro p {
      margin: 22px 0 0;
      color: var(--platinum);
      line-height: 1.75;
    }

.validation-steps {
      border-top: 1px solid var(--line);
    }

.validation-step {
      display: grid;
      grid-template-columns: 46px 1fr;
      gap: 22px;
      padding: 22px 0;
      border-bottom: 1px solid var(--line);
    }

.validation-step__number {
      color: var(--crimson-text);
      font-family: var(--font-mono);
      font-size: 11px;
    }

.validation-step h3 {
      margin: 0;
      color: var(--output);
      font-family: var(--font-headline);
      font-size: 19px;
      font-weight: 700;
    }

.validation-step p {
      margin: 8px 0 0;
      color: var(--platinum-dim);
      font-size: 14px;
      line-height: 1.65;
    }

.validation-boundaries {
      margin-top: 44px;
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--void);
    }

.validation-boundaries h3 {
      margin: 0;
      color: var(--output);
      font-family: var(--font-headline);
      font-size: 20px;
      font-weight: 700;
    }

.validation-boundaries ul {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 28px;
      margin: 20px 0 0;
      padding: 0;
      list-style: none;
    }

.validation-boundaries li {
      position: relative;
      padding-left: 16px;
      color: var(--platinum-dim);
      font-size: 13px;
      line-height: 1.55;
    }

.validation-boundaries li::before {
      content: "×";
      position: absolute;
      left: 0;
      color: var(--platinum);
      font-family: var(--font-mono);
    }

.machine-summary {
      display: grid;
      grid-template-columns: 190px 1fr;
      gap: 36px;
      margin-top: 54px;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--void);
    }

.machine-summary__label {
      color: var(--platinum-dim);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

.machine-summary__body {
      margin: 0;
      color: var(--platinum);
      font-size: 15px;
      line-height: 1.75;
    }

.contact__layout {
      display: grid;
      grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
      gap: 76px;
      align-items: start;
      margin-top: 56px;
    }

.contact__headline {
      margin: 0;
      color: var(--output);
      font-family: var(--font-headline);
      font-size: clamp(28px, 4.6vw, 48px);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -0.015em;
      text-transform: uppercase;
      letter-spacing: -0.045em;
    }

.contact__subtext {
      margin: 24px 0 0;
      color: var(--platinum);
      font-size: 17px;
      line-height: 1.75;
    }

.contact__direct {
      margin: 28px 0 0;
      color: var(--platinum-dim);
      font-family: var(--font-mono);
      font-size: 11px;
      line-height: 1.8;
      text-transform: uppercase;
    }

.contact__direct a {
      color: var(--platinum);
      border-bottom: 1px solid var(--line);
    }

.contact__privacy {
      margin: 14px 0 0;
      color: var(--platinum-dim);
      font-size: 12px;
      line-height: 1.6;
    }

.contact__privacy a {
      color: var(--platinum);
      border-bottom: 1px solid var(--line);
    }

@media (max-width: 1080px) {
  .hero__grid, .problem__layout, .decision-grid, .evidence-layout, .validation-layout, .contact__layout {
        grid-template-columns: 1fr;
      }
  .hero__grid {
        gap: 58px;
      }
  .problem__body, .validation-intro, .decision-summary {
        position: static;
      }
  .usecases-stage { display: block; }
  .operation-atlas { display: none; }
  .mission {
        grid-template-columns: minmax(180px, 0.62fr) minmax(0, 1.38fr);
        grid-template-areas:
          "title visual"
          "copy copy"
          "questions questions"
          "footer footer";
        min-height: 0;
      }
  .mission__atlas {
        position: relative;
        display: block;
        grid-area: visual;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background:
          linear-gradient(rgba(35, 36, 43, 0.32) 1px, transparent 1px),
          linear-gradient(90deg, rgba(35, 36, 43, 0.32) 1px, transparent 1px),
          var(--void);
        background-size: 28px 28px;
        border: 1px solid var(--line);
      }
  .mission__atlas svg { width: 100%; height: 100%; }
}

@media (max-width: 760px) {
  .section {
        padding: 80px 0;
      }
  .hero {
        min-height: auto;
        padding-top: calc(var(--nav-height) + 52px);
      }
  .hero__headline {
        font-size: clamp(2.85rem, 14vw, 5rem);
      }
  .hero__actions {
        align-items: stretch;
        flex-direction: column;
      }
  .hero__actions .button {
        width: 100%;
      }
  .opath { margin-top: 52px; padding-top: 18px; }
  .opath__header { gap: 8px 18px; }
  .opath__header span:first-child { width: 100%; margin-bottom: 4px; }
  .opath__svg--desktop { display: none; }
  .opath__svg--mobile { display: block; width: min(100%, 360px); margin: 18px auto 0; }
  .opath__captions { grid-template-columns: 1fr; }
  .opath__caption { padding: 22px 0; }
  .opath__caption + .opath__caption { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .lifecycle__step {
        grid-template-columns: 44px 1fr;
        gap: 14px 16px;
        align-items: start;
      }
  .lifecycle__glyph, .lifecycle__title, .lifecycle__copy, .lifecycle__step .status {
        grid-column: 2;
      }
  .lifecycle__glyph { width: 112px; height: 56px; }
  .deliverables {
        grid-template-columns: 1fr;
      }
  .mission {
        grid-template-columns: 1fr;
        grid-template-areas:
          "title"
          "visual"
          "copy"
          "questions"
          "footer";
        gap: 18px;
        padding: 48px 0;
      }
  .mission__atlas { width: 100%; margin: 8px 0 6px; }
  .decision-record__row {
        grid-template-columns: 1fr;
        gap: 9px;
      }
  .claim-states {
        grid-template-columns: 1fr;
      }
  .validation-boundaries ul {
        grid-template-columns: 1fr;
      }
  .machine-summary {
        grid-template-columns: 1fr;
        gap: 12px;
      }
}

@media print {
  .nav, .mobile-menu, .scroll-progress, .hero__actions, .contact-form {
        display: none !important;
      }
  .section, .footer {
        color: #111;
        background: #fff;
        border-color: #ddd;
      }
}

.hero {
      position: relative;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 0;
      overflow: hidden;
    }

.hero__canvas-wrap {
      position: relative;
      width: 100%;
      height: 42vh;
      flex-shrink: 0;
    }

.hero__canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

.hero__content {
      position: relative;
      z-index: 2;
      width: min(100% - 40px, 820px);
      margin: 0 auto;
      padding: 30px 0 64px;
    }

.hero__content .eyebrow {
      margin-bottom: 18px;
    }

.hero__headline {
      max-width: 820px;
      margin: 0;
      color: var(--output);
      font-family: var(--font-headline);
      font-size: clamp(2.7rem, 8vw, 7.25rem);
      font-weight: 700;
      line-height: 0.96;
      letter-spacing: -0.052em;
    }

.hero__headline span {
      color: var(--platinum);
    }

.hero__subtext {
      max-width: 700px;
      margin: 28px 0 0;
      color: var(--platinum);
      font-size: clamp(1.03rem, 1.55vw, 1.25rem);
      line-height: 1.68;
    }

.hero__problem {
      max-width: 680px;
      margin: 22px 0 0;
      padding-left: 16px;
      border-left: 2px solid var(--crimson);
      color: var(--platinum-dim);
      font-size: 14px;
      line-height: 1.65;
    }

.hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 34px;
    }

.painting-label {
      position: absolute;
      left: 12px;
      bottom: 10px;
      z-index: 3;
      display: block;
      padding: 9px 12px;
      color: var(--output);
      background: rgba(11, 11, 15, 0.92);
      border: 1px solid var(--line);
      border-radius: 4px;
      font-family: var(--font-mono);
      transition: opacity 0.35s ease, background-color 0.35s ease;
    }

.painting-label--hidden {
      opacity: 0;
      pointer-events: none;
    }

.painting-label--revealed {
      background: rgba(21, 22, 27, 0.96);
      border-color: rgba(181, 23, 46, 0.45);
    }

.painting-label__title {
      margin-bottom: 3px;
      color: var(--output);
      font-size: 11px;
      letter-spacing: 0.04em;
    }

.painting-label__meta {
      margin-bottom: 5px;
      color: var(--platinum-dim);
      font-size: 9px;
      letter-spacing: 0.06em;
    }

.painting-label__detection {
      color: var(--crimson-text);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      opacity: 0;
      transition: opacity 0.35s ease;
    }

.typosquat {
      position: relative;
      color: var(--crimson);
    }

.typosquat::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: -2px;
      left: 0;
      height: 1px;
      background: var(--crimson);
    }

.hero__hud, .hero__scroll {
      display: none;
    }

@media (min-width: 1024px) {
  .hero {
        flex-direction: row;
        align-items: center;
      }
  .hero__canvas-wrap {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
  .hero__content {
        width: min(760px, calc(100% - 128px));
        margin: 0;
        margin-left: 64px;
        padding: 34px;
        background: rgba(11, 11, 15, 0.88);
      }
  .painting-label {
        right: 6%;
        bottom: 116px;
        left: auto;
        padding: 12px 15px;
        text-align: right;
      }
  .painting-label__title { font-size: 13px; }
  .painting-label__meta { font-size: 10px; margin-bottom: 8px; }
  .painting-label__detection { font-size: 10px; }
  .hero__hud {
        position: absolute;
        z-index: 3;
        display: block;
        color: var(--platinum-dim);
        font-family: var(--font-mono);
        font-size: 9px;
        letter-spacing: 0.1em;
        opacity: 0.62;
      }
  .hero__hud--tl { top: 98px; left: 48px; }
  .hero__hud--tr { top: 98px; right: 48px; text-align: right; }
  .hero__hud--bl { bottom: 72px; left: 48px; }
  .hero__hud--br { right: 48px; bottom: 72px; text-align: right; }
  .hero__scroll {
        position: absolute;
        bottom: 28px;
        left: 50%;
        z-index: 3;
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
        color: var(--platinum-dim);
        transform: translateX(-50%);
        opacity: 0.58;
        animation: scrollBounce 2s var(--ease) infinite;
      }
  .hero__scroll-text {
        font-family: var(--font-mono);
        font-size: 9px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
  @keyframes scrollBounce {
        0%, 100% { transform: translateX(-50%) translateY(0); }
        50% { transform: translateX(-50%) translateY(7px); }
      }
}

@media (min-width: 761px) and (max-width: 820px) {
  #approach .lifecycle__step {
        grid-template-columns: 44px 112px 1fr;
      }
  #approach .lifecycle__glyph { grid-column: 2; grid-row: 1 / span 2; }
  #approach .lifecycle__title, #approach .lifecycle__copy { grid-column: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll {
        animation: none;
      }
  .opath__fragments path, .opath__gaps path, .lifecycle__draw {
        stroke-dashoffset: 0 !important;
        transition: none !important;
      }
  .atlas-scene {
        transition: none !important;
        transform: none !important;
      }
}

/* ===== Port fit adjustments (QA 2026-07-23) =====
   index02's hero panel assumed taller viewports; clear the fixed nav and cap
   the display size so the panel never overflows 900px-class screens. The
   ported mobile rules reference index02's --nav-height name. */
:root { --nav-height: var(--nav-h); }
@media (min-width: 1024px) {
  .hero { padding: calc(var(--nav-h) + 16px) 0 72px; }
  .hero__headline { font-size: clamp(2.7rem, 6vw, 5.6rem); }
}