/* Trinity Security Engine — landing page styles
   All colors/type/spacing/radius/shadow tokens come from colors_and_type.css.
   This file ONLY adds: layout, page-specific component composition,
   and a single page-local var (--heat-mix) for the Tweaks accent slider. */

:root {
  /* ─────────────────────────────────────────────────────────────
     Security sub-brand — LOCAL OVERRIDE ONLY
     Trinity's design system stays Trinity Blue. This file is
     loaded only by security.trinity.agency, so we re-bind the
     accent tokens to a Security Red palette built strictly from
     hex digits 3 / 6 / 9 (Tesla 369 constraint). Nothing leaves
     this page.
     ───────────────────────────────────────────────────────────── */
  --trinity:        #933;       /* #993333 — primary brick red */
  --trinity-light:  #966;       /* #996666 — soft rose lift on dark */
  --trinity-dark:   #633;       /* #663333 — pressed / deep accent */
  --trinity-hover:  #963;       /* #996633 — rust-amber transition */
  --trinity-steel:  #936;       /* #993366 — desaturated magenta-red */

  --border-glow:    #936;
  --focus-ring:     #933;
  --shadow-glow:
    0 0 12px #933,
    0 0 32px #663333;

  /* Tweakable accent intensity (0..1). Drives how much heat leaks in. */
  --heat-mix: 0.4;

  /* Severity hues — Security Red language. Strict 3/6/9 hex.
     Variety comes from blend modes + glows, not new pigments. */
  --sev-crit: #933;            /* vivid red — critical */
  --sev-high: #963;            /* rust amber — high */
  --sev-med:  var(--warning);
  --sev-low:  var(--info);
  --sev-info: var(--fg3);

  --pad: clamp(22px, 4vw, 60px);
  --maxw: 1280px;
}

::selection { background: #933; color: var(--fg1); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    /* upper wash — soft dusty rose, low intensity */
    radial-gradient(120% 80% at 78% -10%, color-mix(in oklch, #966 calc(8% * (1 - var(--heat-mix))), transparent), transparent 60%),
    /* lower pole — Security Red, layered red+blood for depth */
    radial-gradient(70% 55% at 8% 115%, color-mix(in oklch, #933 calc(26% * var(--heat-mix)), transparent), transparent 60%),
    radial-gradient(40% 30% at 14% 108%, color-mix(in oklch, #936 calc(18% * var(--heat-mix)), transparent), transparent 70%),
    var(--bg);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

/* ──────────── NAV ──────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: var(--space-4) var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  background: linear-gradient(to bottom, oklch(8% 0.003 260 / .85), oklch(8% 0.003 260 / .1) 70%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: var(--space-3); height: 36px; min-width: 0; }
.brand img { height: 26px; width: auto; display: block; }
.brand .div { width: 1px; height: 18px; background: var(--border); }
.brand .sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-label);
  color: var(--fg1);
  text-transform: uppercase;
  font-weight: var(--font-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand .sub .blue {
  color: var(--trinity);
  text-shadow:
    0 0 6px color-mix(in oklch, var(--trinity) 70%, transparent),
    0 0 14px color-mix(in oklch, var(--trinity) 45%, transparent);
  filter: brightness(1.35) saturate(1.15);
}
.brand .sub .ver {
  color: var(--trinity-light);
  margin-left: var(--space-2);
  font-size: 10px;
}

.nav-links {
  display: flex; gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-p3);
  letter-spacing: var(--tracking-label);
  color: var(--fg2);
  text-transform: uppercase;
}
.nav-links a:hover { color: var(--fg1); }
.nav-right { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.nav-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-label);
  color: var(--fg3);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nav-status .dot {
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--success);
  box-shadow: 0 0 0 3px oklch(65% 0.18 145 / .25);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 3px oklch(65% 0.18 145 / .25); }
  50%     { box-shadow: 0 0 0 7px oklch(65% 0.18 145 / .02); }
}
@media (max-width: 880px) {
  .nav-links, .nav-status { display: none; }
  .nav { padding-left: var(--space-5); padding-right: var(--space-5); gap: var(--space-4); }
}
@media (max-width: 480px) {
  .nav { padding-left: var(--space-4); padding-right: var(--space-4); gap: var(--space-3); }
  .brand .div { display: none; }
  .brand .sub { font-size: 9.5px; letter-spacing: 0.06em; }
}

/* ──────────── PRIMARY CTA — cold→hot signature interaction ──────────── */
.cta-primary {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 13px 22px;
  border-radius: var(--radius-cta);
  font-family: var(--font-mono);
  font-size: var(--text-p3);
  letter-spacing: var(--tracking-label);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  color: var(--fg1);
  /* All-red ember sweep — left side deep maroon, hover sweeps to bright vivid red. */
  background:
    linear-gradient(90deg,
      #633                  0%,
      #933                 40%,
      #963                 70%,
      #936                100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  border: 1px solid #966;
  box-shadow: var(--shadow-glow), inset 0 1px 0 oklch(100% 0 0 / .08);
  transition: background-position .55s ease, transform .2s, box-shadow .35s, border-color .35s;
  isolation: isolate;
}
.cta-primary::after {
  /* screen-blend overlay — lifts the red into a glowing ember on hover */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 200% at 100% 50%, #936 0%, transparent 55%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  z-index: -1;
}
.cta-primary:hover {
  background-position: 100% 50%;
  border-color: #933;
  box-shadow: var(--shadow-heat), inset 0 1px 0 oklch(100% 0 0 / .12);
  transform: translateY(-1px);
}
.cta-primary:hover::after { opacity: 1; }
.cta-primary .arr { transition: transform .2s; }
.cta-primary:hover .arr { transform: translateX(3px); }

.cta-secondary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 13px 20px;
  border-radius: var(--radius-cta);
  font-family: var(--font-mono);
  font-size: var(--text-p3);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg1);
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--surface) 70%, transparent);
  transition: border-color .25s, background .25s, transform .2s;
}
.cta-secondary:hover {
  border-color: var(--trinity-light);
  background: color-mix(in oklch, var(--trinity) 8%, transparent);
  transform: translateY(-1px);
}

/* ──────────── HERO ──────────── */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 120px var(--pad) var(--space-20);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 60px);
  max-width: var(--maxw);
  margin: 0 auto;
  align-items: center;
}
@media (min-width: 980px) {
  .hero { grid-template-columns: 1.05fr 1fr; }
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-p3);
  letter-spacing: var(--tracking-label);
  color: var(--fg2);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}
.hero-eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: var(--trinity-light);
}
.hero-eyebrow .ver {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--trinity-light);
  font-size: 10px;
}

.hero h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-normal);
  font-size: clamp(40px, 5.6vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0 0 var(--space-6);
  text-wrap: balance;
  color: var(--fg1);
}
.hero h1 .em { color: #993333; }
.hero h1 .heat {
  color: color-mix(in oklch, var(--fg1) calc(100% - 60% * var(--heat-mix)), var(--heat) calc(60% * var(--heat-mix)));
}

.hero-sub {
  font-family: var(--font-body);
  font-size: 17px; line-height: var(--leading-body);
  color: var(--fg2);
  max-width: 52ch; margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.hero-sub em { font-style: normal; color: var(--fg1); font-weight: var(--font-medium); }

.hero-aphorism {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--text-p3);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg2);
  margin: 0 0 var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
}
.hero-aphorism .step {
  color: var(--fg1);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: color-mix(in oklch, var(--surface) 60%, transparent);
}
.hero-aphorism .step:last-of-type {
  color: var(--trinity-light);
  border-color: var(--border-glow);
  background: color-mix(in oklch, var(--trinity-light) 8%, transparent);
}
.hero-aphorism .arr {
  color: var(--fg3);
  font-weight: var(--font-normal);
}

.hero-cta-row {
  display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
}
.hero-meta {
  margin-top: var(--space-10);
  display: flex; gap: var(--space-8); flex-wrap: wrap;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.hero-meta .m { display: flex; flex-direction: column; gap: 4px; }
.hero-meta .m .k {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: var(--tracking-label);
  color: var(--fg3); text-transform: uppercase;
}
.hero-meta .m .v {
  font-family: var(--font-mono);
  font-size: 13.5px; color: var(--fg1);
}
.hero-meta .m .v .blue { color: var(--trinity-light); }

/* ──────────── HERO TERMINAL (right side) ──────────── */
.hero-term {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--neutral-900), var(--neutral-950));
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--fg1);
  overflow: hidden;
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--border-glow), inset 0 1px 0 oklch(100% 0 0 / .04);
}
.hero-term::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 50% at 30% 0%,
    color-mix(in oklch, var(--trinity) 18%, transparent),
    transparent 60%);
  pointer-events: none;
}
.hero-term-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--neutral-950);
  position: relative;
}
.hero-term-bar .dots { display: flex; gap: 6px; }
.hero-term-bar .dots span {
  width: 9px; height: 9px; border-radius: var(--radius-full);
  background: var(--neutral-700);
}
.hero-term-bar .dots span:nth-child(1) { background: var(--error); opacity: .55; }
.hero-term-bar .dots span:nth-child(2) { background: var(--warning); opacity: .45; }
.hero-term-bar .dots span:nth-child(3) { background: var(--success); opacity: .55; }
.hero-term-bar .title {
  font-size: 11px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--fg2);
}
.hero-term-bar .live {
  font-size: 10px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--success);
  display: inline-flex; align-items: center; gap: 6px;
}
.hero-term-bar .live::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--success);
  box-shadow: 0 0 0 3px oklch(65% 0.18 145 / .25);
  animation: pulse 2.2s ease-in-out infinite;
}
.hero-term-body {
  position: relative;
  padding: var(--space-5) var(--space-6);
  min-height: 360px;
  max-height: 420px;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
}
.hero-term-body .line {
  white-space: pre-wrap;
  word-break: break-word;
  opacity: 0;
  transform: translateY(4px);
  animation: line-in .35s ease-out forwards;
}
@keyframes line-in { to { opacity: 1; transform: none; } }
.tl-prompt   { color: var(--trinity-light); }
.tl-cmd      { color: var(--fg1); }
.tl-meta     { color: var(--fg3); }
.tl-sub      { color: var(--fg2); }
.tl-ok       { color: var(--success); }
.tl-warn     { color: var(--sev-med); }
.tl-crit     { color: var(--sev-crit); font-weight: var(--font-medium); }
.tl-high     { color: var(--sev-high); }
.tl-info     { color: var(--sev-low); }
.tl-blue     { color: var(--trinity-light); }
.tl-sev {
  display: inline-block;
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  margin-right: var(--space-2);
}
.hero-term-body .cursor {
  display: inline-block;
  width: 8px; height: 14px;
  vertical-align: -2px;
  margin-left: 2px;
  background: var(--trinity-light);
  animation: blink .9s steps(2,end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.hero-term-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--neutral-950));
}
.hero-term-foot {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  background: var(--neutral-950);
}
.hero-term-foot .stat {
  padding: var(--space-3) var(--space-4);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px;
}
.hero-term-foot .stat:last-child { border-right: none; }
.hero-term-foot .stat .k {
  font-size: 9.5px; letter-spacing: var(--tracking-label);
  color: var(--fg3); text-transform: uppercase;
}
.hero-term-foot .stat .v {
  font-size: 13px; color: var(--fg1);
  font-variant-numeric: tabular-nums;
}
.hero-term-foot .stat .v.crit { color: var(--sev-crit); }
.hero-term-foot .stat .v.high { color: var(--sev-high); }
.hero-term-foot .stat .v.ok   { color: var(--success); }

/* ──────────── SECTION SHELL ──────────── */
.sec {
  padding: clamp(80px, 10vw, 140px) var(--pad);
  max-width: var(--maxw); margin: 0 auto;
  border-top: 1px solid var(--border);
  /* RND-2: skip render work for off-screen sections (audit 2026-05-15).
     Hero is excluded by selector (it's not `.sec`); only below-fold panes
     pay the rendering cost lazily as the user scrolls. */
  content-visibility: auto;
  contain-intrinsic-size: 0 800px;
}
.sec-head {
  margin-bottom: var(--space-16);
  max-width: 920px;
  display: grid; gap: var(--space-5);
}
.eye-tag {
  display: inline-flex; gap: var(--space-3); align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--text-p3);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg3);
  width: fit-content;
}
.eye-tag .num { color: var(--trinity-light); }
.eye-tag .label { color: var(--fg2); }
.eye-tag::after {
  content: ""; display: inline-block; width: 36px; height: 1px;
  background: var(--trinity-light); margin-left: var(--space-2); align-self: center;
}
.sec-title {
  font-family: var(--font-heading);
  font-weight: var(--font-normal);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0; text-wrap: balance;
  color: var(--fg1);
}
.sec-title .em { color: var(--trinity-light); }
.sec-title .heat {
  color: color-mix(in oklch, var(--fg1) calc(100% - 60% * var(--heat-mix)), var(--heat) calc(60% * var(--heat-mix)));
}
.sec-lede {
  font-family: var(--font-body);
  font-size: var(--text-p1); color: var(--fg2);
  line-height: var(--leading-body);
  max-width: 64ch; margin: 0;
}
.sec-lede em { font-style: normal; color: var(--trinity-light); }

/* ──────────── HOW IT WORKS — pipeline ──────────── */
.pipe {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--trinity) 3%, var(--surface));
  padding: clamp(var(--space-8), 5vw, var(--space-16)) clamp(var(--space-6), 5vw, var(--space-12));
}
.pipe-hd {
  max-width: 720px; margin: 0 auto var(--space-12);
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-p3); letter-spacing: var(--tracking-label);
  color: var(--fg3); text-transform: uppercase;
  padding-bottom: var(--space-3); border-bottom: 1px dashed var(--border);
}
.pipe-hd .live-tag {
  display: inline-flex; gap: var(--space-2); align-items: center;
  color: var(--trinity-light);
}
.pipe-hd .live-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--trinity-light);
  box-shadow: 0 0 0 3px var(--border-glow);
}
/* Vertical lifecycle rail — one column, centered, generous whitespace.
   Five steps (01A/01B modes → 02 → 03 → 04) flow top-to-bottom; a single
   spine links each node to the next. Identical layout desktop → mobile. */
.pipe-rail {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.pipe-step {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: var(--space-6);
  align-items: start;
}
.pipe-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 52px;
  height: calc(100% - 52px + var(--space-12));
  width: 1px;
  background: linear-gradient(to bottom,
    color-mix(in oklch, var(--trinity-light) 55%, transparent),
    color-mix(in oklch, var(--trinity-light) 10%, transparent));
}
.pipe-step .node {
  position: relative; z-index: 1;
  width: 52px; height: 52px;
  display: grid; place-items: center;
}
.pipe-step .node svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  fill: var(--surface);
  stroke: color-mix(in oklch, var(--trinity-light) 55%, var(--border));
  stroke-width: 3.5;
  stroke-linejoin: miter;
  filter: drop-shadow(0 0 5px #933) drop-shadow(0 0 12px #663333);
}
/* A point-up triangle fills less of its box than the hexagon/square, so scale
   it up (overflowing the cell) to read as the largest node on the rail. */
.pipe-step .node.tri svg { transform: scale(1.2); stroke-width: 2.9; }
.pipe-step .node .n {
  position: relative; z-index: 1;
  font-family: var(--font-mono);
  font-size: 15px; font-weight: var(--font-medium);
  letter-spacing: 0.02em;
  color: var(--fg1);
}
/* drop the label into the triangle's wider lower body */
.pipe-step .node.tri .n { font-size: 13px; transform: translateY(40%); }
.pipe-step .node.hex .n { font-size: 14px; }
.pipe-step .content { padding-top: 2px; min-width: 0; }
.pipe-step .meta {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: var(--tracking-label);
  color: var(--trinity-light); text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.pipe-step h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-normal);
  font-size: var(--text-h5); letter-spacing: -0.005em;
  color: var(--fg1); margin: 0 0 var(--space-3);
}
.pipe-step p {
  font-family: var(--font-body);
  font-size: 14px; line-height: var(--leading-body);
  color: var(--fg2);
  margin: 0; max-width: 58ch;
}
@media (max-width: 540px) {
  .pipe-step { grid-template-columns: 44px 1fr; column-gap: var(--space-4); }
  .pipe-step:not(:last-child)::before { left: 22px; top: 44px; height: calc(100% - 44px + var(--space-12)); }
  .pipe-step .node { width: 44px; height: 44px; }
  .pipe-step .node .n { font-size: 13px; }
  .pipe-step .node.tri .n { font-size: 12px; }
  .pipe-step .node.hex .n { font-size: 12.5px; }
}

/* ──────────── SCANNERS GRID ──────────── */
.scan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
@media (max-width: 900px) { .scan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .scan-grid { grid-template-columns: 1fr; } }

.scan-card {
  position: relative;
  background: var(--surface);
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  min-height: 260px;
  cursor: default;
  transition: background .25s;
}
.scan-card:hover {
  background: color-mix(in oklch, var(--surface) 88%, var(--trinity) 12%);
}
.scan-card .top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-3);
}
.scan-card .name {
  font-family: var(--font-heading);
  font-weight: var(--font-medium);
  font-size: var(--text-h5);
  color: var(--fg1); margin: 0;
}
.scan-card .name .nm-arr {
  color: var(--trinity-light); margin-right: var(--space-3); opacity: .7;
}
.scan-card .status {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 4px 8px; border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.scan-card .status.impl { color: var(--success); }
.scan-card .status.stub { color: var(--fg3); }
.scan-card .desc {
  font-family: var(--font-body);
  font-size: 13.5px; line-height: var(--leading-body);
  color: var(--fg2); margin: 0;
}
.scan-card .tools {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.scan-card .tools .t {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg1); padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--trinity) 5%, transparent);
}
.scan-card .deps {
  margin-top: auto; padding-top: var(--space-3);
  border-top: 1px dashed var(--border);
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: var(--tracking-label);
  color: var(--fg3); text-transform: uppercase;
}
.scan-card .deps .v { color: var(--fg1); }
.scan-card .deps .v.dim { color: var(--fg3); }

/* ──────────── MANIFEST DRIFT (interactive) ──────────── */
.drift {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
@media (max-width: 900px) { .drift { grid-template-columns: 1fr; } }
.drift-pane {
  background: var(--surface);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  min-height: 380px;
}
.drift-pane .ph {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: var(--tracking-label);
  color: var(--fg3); text-transform: uppercase;
}
.drift-pane .ph .label { color: var(--trinity-light); }
.drift-svc {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--bg) 50%, transparent);
  font-family: var(--font-mono);
  font-size: 12px;
  transition: border-color .25s, background .25s, opacity .25s;
}
.drift-svc.detected {
  border-color: color-mix(in oklch, var(--trinity-light) 40%, var(--border));
}
.drift-svc.drift {
  border-color: #933;
  background:
    linear-gradient(90deg,
      color-mix(in oklch, #933 14%, transparent) 0%,
      color-mix(in oklch, #633 8%, transparent) 60%,
      transparent 100%);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, #936 35%, transparent),
    0 0 24px -6px #933,
    0 0 48px -12px #663333;
}
.drift-svc.drift .marker {
  background: #933;
  box-shadow:
    0 0 0 3px color-mix(in oklch, #933 35%, transparent),
    0 0 14px #933;
}
.drift-svc.drift .meta { color: #936; }
.drift-svc.missing {
  opacity: .35;
  text-decoration: line-through;
  text-decoration-color: var(--fg3);
}
.drift-svc .marker {
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--fg3);
  flex-shrink: 0;
}
.drift-svc.detected .marker {
  background: var(--trinity-light);
  box-shadow: 0 0 0 3px var(--border-glow);
}
.drift-svc .name { color: var(--fg1); }
.drift-svc .meta {
  color: var(--fg3); font-size: 10.5px;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.drift-svc .toggle {
  font-size: 10px; letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg3);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.drift-svc .toggle:hover { border-color: var(--trinity-light); color: var(--fg1); }

.drift-findings {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: 4px;
}
.drift-finding {
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid #933;
  background:
    linear-gradient(90deg,
      color-mix(in oklch, #933 12%, transparent) 0%,
      color-mix(in oklch, #633 5%, transparent) 50%,
      transparent 100%);
  box-shadow: inset 0 0 22px -8px #933;
  display: grid; gap: 4px;
  animation: line-in .35s ease-out;
}
.drift-finding .ftitle {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--fg1);
  display: flex; align-items: center; gap: var(--space-3);
}
.drift-finding .sev {
  font-size: 9.5px; letter-spacing: var(--tracking-label);
  padding: 2px 6px; text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
}
.drift-finding .sev.crit { color: var(--sev-crit); }
.drift-finding .sev.high { color: var(--sev-high); }
.drift-finding .sev.med  { color: var(--sev-med);  }
.drift-finding .sev.info { color: var(--sev-info); }
.drift-finding .fdesc {
  font-family: var(--font-body);
  font-size: 12.5px; color: var(--fg2);
  line-height: var(--leading-snug);
}
.drift-finding.empty {
  border-left-color: var(--trinity-light);
  background: color-mix(in oklch, var(--trinity) 5%, transparent);
}
.drift-finding.empty .ftitle { color: var(--trinity-light); }

.drift-hint {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: var(--tracking-label);
  color: var(--fg3); text-transform: uppercase;
}

/* ──────────── REPORT specimen ──────────── */
.report {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--neutral-950);
  font-family: var(--font-mono);
  overflow: hidden;
}
.report-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--neutral-900);
}
.report-bar .left {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: var(--tracking-label);
  color: var(--fg2); text-transform: uppercase;
}
.report-bar .left .file { color: var(--fg1); }
.report-bar .right {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: var(--tracking-label);
  color: var(--fg3); text-transform: uppercase;
  display: flex; gap: var(--space-3);
}
.report-body {
  padding: var(--space-8) var(--space-10);
  font-size: 13px;
  line-height: var(--leading-relaxed);
  color: var(--fg1);
  max-height: 540px;
  overflow: auto;
}
.report-body .h1 {
  font-size: var(--text-h5); margin: 0 0 4px;
  letter-spacing: -0.01em; color: var(--fg1);
  font-weight: var(--font-medium);
}
.report-body .h1::before { content: "# "; color: var(--fg3); }
.report-body .h2 {
  font-size: 15px; margin: var(--space-8) 0 var(--space-2);
  color: var(--trinity-light); font-weight: var(--font-medium);
}
.report-body .h2::before { content: "## "; color: var(--fg3); }
.report-body .h3 {
  font-size: 13px; margin: var(--space-5) 0 4px;
  color: var(--fg1); font-weight: var(--font-medium);
}
.report-body .h3::before { content: "### "; color: var(--fg3); }
.report-body .meta { color: var(--fg2); font-size: 12px; }
.report-body .tag {
  display: inline-block; padding: 1px 7px;
  font-size: 10px; letter-spacing: var(--tracking-label);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  margin-right: var(--space-2);
}
.report-body .tag.crit { color: var(--sev-crit); }
.report-body .tag.high { color: var(--sev-high); }
.report-body .tag.med  { color: var(--sev-med); }
.report-body .tag.low  { color: var(--sev-low); }
.report-body .kv { color: var(--fg2); }
.report-body .kv .k { color: var(--fg3); display: inline-block; min-width: 11ch; }
.report-body .diff-add   { color: var(--success); }
.report-body .diff-del   { color: var(--sev-crit); text-decoration: line-through; }
.report-body .diff-drift { color: var(--heat); }
.report-body .rule {
  border: 0; border-top: 1px dashed var(--border); margin: var(--space-6) 0;
}
.report-body .quote {
  border-left: 2px solid var(--trinity-light);
  padding: 4px var(--space-4); color: var(--fg2);
  font-style: italic;
  background: color-mix(in oklch, var(--trinity) 4%, transparent);
}
.report-body code {
  color: var(--trinity-light); font-size: 11.5px;
  background: transparent; border: none; padding: 0;
}

/* ──────────── TIERS ──────────── */
.tiers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  background: var(--surface);
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.tier .tn {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: var(--tracking-label);
  color: var(--trinity-light); text-transform: uppercase;
}
.tier h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-normal);
  font-size: var(--text-h3);
  letter-spacing: -0.01em; margin: 0;
  color: var(--fg1);
}
.tier .price {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: var(--tracking-label);
  color: var(--fg3); text-transform: uppercase;
  padding: 4px 8px; border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: fit-content;
}
.tier p {
  font-family: var(--font-body);
  font-size: 13.5px; line-height: var(--leading-body);
  color: var(--fg2); margin: 0;
}
.tier ul {
  list-style: none; padding: var(--space-3) 0 0; margin: 0;
  display: flex; flex-direction: column; gap: 7px;
  border-top: 1px dashed var(--border);
}
.tier li {
  font-family: var(--font-mono);
  font-size: 11.5px; color: var(--fg1);
  padding-left: var(--space-5); position: relative;
  letter-spacing: 0.02em;
}
.tier li::before {
  content: "▸"; position: absolute; left: 0; top: 0;
  color: var(--trinity-light); font-size: 10px;
}
.tier li.off {
  color: var(--fg-disabled);
  text-decoration: line-through;
  text-decoration-color: var(--fg-disabled);
}
.tier li.off::before { color: var(--fg-disabled); }

/* ──────────── PHILOSOPHY ──────────── */
.phi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
@media (max-width: 820px) { .phi-grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.phi-card {
  border-left: 1px solid var(--trinity-light);
  padding: 6px 0 6px var(--space-6);
}
.phi-card .pn {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: var(--tracking-label);
  color: var(--trinity-light); text-transform: uppercase;
  margin-bottom: 6px;
}
.phi-card h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-normal);
  font-size: var(--text-h5); letter-spacing: -0.005em;
  color: var(--fg1); margin: 0 0 var(--space-3);
}
.phi-card h4 .em { color: var(--trinity-light); }
.phi-card p {
  font-family: var(--font-body);
  font-size: 13.5px; line-height: var(--leading-body);
  color: var(--fg2); margin: 0;
}

.phi-aphorism {
  margin: var(--space-16) 0 0;
  padding: var(--space-6) var(--space-8);
  border-left: 2px solid var(--trinity-light);
  background: color-mix(in oklch, var(--trinity-light) 4%, transparent);
}
.phi-aphorism p {
  font-family: var(--font-body);
  font-weight: var(--font-normal);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: var(--leading-tight);
  color: var(--fg1); margin: 0 0 var(--space-2);
  max-width: 60ch;
}
.phi-aphorism cite {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: var(--tracking-label);
  color: var(--fg3); text-transform: uppercase; font-style: normal;
}

/* ──────────── REGISTER ──────────── */
.reg {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--trinity) 6%, var(--surface)) 0%,
    var(--surface) 100%);
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 64px);
}
@media (max-width: 900px) { .reg { grid-template-columns: 1fr; } }
.reg h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-normal);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  text-wrap: balance; color: var(--fg1);
}
.reg h2 .em { color: var(--trinity-light); }
.reg p {
  font-family: var(--font-body);
  font-size: var(--text-p1); color: var(--fg2);
  line-height: var(--leading-body);
  margin: 0 0 var(--space-6); max-width: 48ch;
}
.reg .reg-meta {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: var(--tracking-label);
  color: var(--fg2); text-transform: uppercase;
}
.reg .reg-meta .row { display: flex; justify-content: space-between; gap: var(--space-3); }
.reg .reg-meta .v { color: var(--fg1); }
.reg .reg-meta .v.blue { color: var(--trinity-light); }

.reg-form {
  display: flex; flex-direction: column; gap: var(--space-4);
  align-self: start;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: var(--tracking-label);
  color: var(--fg3); text-transform: uppercase;
}
.field input, .field select, .field textarea {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--fg1);
  background: var(--neutral-950);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--trinity-light);
  background: var(--neutral-900);
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-disabled); }
.field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
}
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }
.field-tier {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.field-tier .pick {
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--neutral-950);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--fg2);
  cursor: pointer; transition: all .2s;
}
.field-tier .pick:hover { color: var(--fg1); border-color: var(--trinity-light); }
.field-tier .pick.on {
  border-color: var(--trinity-light);
  background: color-mix(in oklch, var(--trinity) 14%, transparent);
  color: var(--fg1);
}

.reg-success {
  padding: var(--space-5) var(--space-6);
  border: 1px solid color-mix(in oklch, var(--trinity-light) 40%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--trinity) 8%, transparent);
  font-family: var(--font-mono);
  font-size: 13px; color: var(--fg1);
  line-height: var(--leading-body);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.reg-success .ok {
  color: var(--success);
  font-size: 10.5px; letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.reg-success .ok::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--success);
  box-shadow: 0 0 0 3px oklch(65% 0.18 145 / .25);
}
.reg-success .meta { color: var(--fg2); font-size: 11.5px; }

/* ──────────── FAQ ──────────── */
.faq {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) 4px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: var(--font-normal);
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: -0.005em;
  color: var(--fg1);
  transition: color .2s;
}
.faq-q:hover { color: var(--trinity-light); }
.faq-q .sign {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-h5); line-height: 1;
  color: var(--trinity-light);
  flex-shrink: 0;
  transition: transform .25s, border-color .2s;
}
.faq-item.open .faq-q .sign {
  transform: rotate(45deg);
  border-color: var(--trinity-light);
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  font-family: var(--font-body);
  font-size: 14.5px; line-height: var(--leading-body);
  color: var(--fg2);
  margin: 0 0 var(--space-6); max-width: 70ch;
}
.faq-a code {
  font-family: var(--font-mono);
  color: var(--trinity-light);
  font-size: 12.5px;
  padding: 1px 5px;
  background: color-mix(in oklch, var(--trinity) 8%, transparent);
  border: none;
}

/* ──────────── FOOTER ──────────── */
.foot {
  margin-top: var(--space-20);
  padding: var(--space-16) var(--pad) var(--space-10);
  border-top: 1px solid var(--border);
  background: var(--neutral-950);
}
.foot-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; gap: var(--space-12);
  grid-template-columns: 1.6fr 1fr 1fr;
}
@media (max-width: 900px) { .foot-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .foot-inner { grid-template-columns: 1fr; } }
.foot .col h5 {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: var(--tracking-label);
  color: var(--fg3); text-transform: uppercase;
  margin: 0 0 var(--space-4);
  font-weight: var(--font-medium);
}
.foot .col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.foot .col a {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg2);
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: var(--space-2);
  transition: color .2s;
}
.foot .col a:hover { color: var(--fg1); }
.foot .col .foot-soon {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg3);
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.foot .col a .stat-dot, .foot .col .foot-soon .stat-dot {
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--success);
  box-shadow: 0 0 0 3px oklch(65% 0.18 145 / .25);
}
.foot-brand .brand { margin-bottom: var(--space-4); }
.foot-brand p {
  font-family: var(--font-body);
  font-size: 13px; line-height: var(--leading-body);
  color: var(--fg2);
  margin: var(--space-3) 0 0; max-width: 36ch;
}
.foot-bottom {
  max-width: var(--maxw); margin: var(--space-16) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: var(--tracking-label);
  color: var(--fg3); text-transform: uppercase;
}
.foot-bottom .blue {
  color: var(--trinity);
  text-shadow:
    0 0 6px color-mix(in oklch, var(--trinity) 70%, transparent),
    0 0 14px color-mix(in oklch, var(--trinity) 45%, transparent);
  filter: brightness(1.35) saturate(1.15);
}