/* ============================================================================
 * Ferrite — ferritesec.com
 * Static marketing site · zero external dependencies · self-contained.
 * Design language: "Operator / Cold Industrial" (see DESIGN-LANGUAGE.md).
 *   - Cold gunmetal greyscale base; depth from value steps + 1px hairlines.
 *   - Accent is cold STEEL (a metal, not a color); saturated color = STATUS only
 *     (red blocked/threat, amber warning/bypass, green allowed).
 *   - Swiss-grid display type, uppercase mono "operator" labels, sharp corners.
 * Tokens lifted from the app's base-tokens.css + themes.css (ferrite-dark).
 * Fonts are SELF-HOSTED (assets/fonts/*.woff2) — no third-party origin is
 * fetched at runtime, so the CSP + zero-telemetry guarantees stay intact.
 * Display+body: Geist Variable · operator microcopy: Geist Mono Variable.
 * Each ships a metrics-matched local() fallback (overrides computed from the
 * real woff2 via xAvgCharWidth) so the font swap causes ~zero CLS.
 * ==========================================================================*/

/* ---- Self-hosted variable fonts -----------------------------------------*/
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Metrics-matched fallbacks — the local line box matches Geist before the
   webfont loads, so text doesn't reflow on swap. Values computed from the
   woff2 metrics (size-adjust from xAvgCharWidth; over­rides from hhea). */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  size-adjust: 131.62%; ascent-override: 76.35%; descent-override: 22.41%; line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Consolas"), local("Courier New");
  size-adjust: 135.93%; ascent-override: 73.94%; descent-override: 21.70%; line-gap-override: 0%;
}

/* ---- Tokens --------------------------------------------------------------*/
:root {
  /* Surfaces — cold neutral gunmetal. Depth from value steps + 1px hairlines,
     like a spec sheet — NOT ambient glow (see DESIGN-LANGUAGE.md). */
  --bg:        hsl(220 16% 2.4%);
  --bg-2:      hsl(220 13% 4.4%);
  --bg-3:      hsl(218 11% 8.5%);
  --card:      hsl(220 13% 5.4%);
  --line:      hsl(216 12% 20%);
  --line-soft: hsl(216 11% 13%);

  /* Ink — neutral grey ramp */
  --fg:        hsl(210 14% 93%);
  --fg-muted:  hsl(214 9% 62%);
  --fg-faint:  hsl(214 9% 54%);  /* WCAG AA on cold bg/card (5.2:1) — was 44% (failed at 3.7:1) */

  /* Accent — cold STEEL ramp. The former molten wash is now a metal, not a
     color: used for display-type sheen, icons, primary action. Real color is
     reserved for status (intent, below). Token names kept for compatibility. */
  --molten-300: #d2d9e1;
  --molten-400: #aeb8c4;
  --molten-500: #8b97a6;
  --molten-600: #69747f;
  --molten-700: #4c555f;
  --molten: var(--molten-500);
  --molten-grad: linear-gradient(100deg, #d6dde4, #97a3b1 45%, #69747f);

  /* Semantic intent — the ONLY saturated color, used as STATUS not decoration:
     red = blocked/threat, amber = warning/bypass, green = allowed. */
  --allow: hsl(142 76% 46%);
  --deny:  hsl(0 84% 62%);
  --warn:  hsl(38 92% 54%);
  --info:  hsl(217 91% 64%);

  /* Type — self-hosted Geist + metrics-matched fallback, then system stack */
  --font-display: "Geist", "Geist Fallback", "Segoe UI Variable Display",
                  system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Geist", "Geist Fallback", system-ui, -apple-system,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "Geist Mono", "Geist Mono Fallback", ui-monospace,
                  "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  /* Rhythm */
  --maxw: 1160px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 3px;
  --radius-sm: 2px;

  --ease: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---- Reset ---------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -0.006em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Tabular figures where numbers must not jitter (prices, counts, hashes) */
.insp-title, .tier .price .amt, .tier .price .per, .proof-stat,
.claims b, .trust-strip, .dl-hashes, table.cmp .val {
  font-variant-numeric: tabular-nums;
}

/* Ambient molten light + faint operator grid, fixed behind everything.
   Anti-pattern on purpose: the light sources sit OFF-canvas (above, beside,
   below the viewport) and the page edges fall into a vignette — depth comes
   from glow bleeding in, not from surface elevation. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(64rem 44rem at 78% -12%, hsl(212 14% 50% / 0.22), transparent 62%),
    radial-gradient(52rem 42rem at -12% 6%, hsl(216 12% 26% / 0.17), transparent 58%),
    radial-gradient(72rem 48rem at 55% 115%, hsl(212 14% 42% / 0.10), transparent 62%),
    radial-gradient(140% 110% at 50% 38%, transparent 52%, hsl(224 70% 2% / 0.9) 100%);
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, hsl(225 24% 50% / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(225 24% 50% / 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
  pointer-events: none;
}

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

:focus-visible {
  outline: 2px solid var(--molten-400);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- Layout helpers ------------------------------------------------------*/
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.molten-text {
  background: var(--molten-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---- Buttons -------------------------------------------------------------*/
.btn {
  --b: 1px;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: -0.01em;
  padding: 0.82rem 1.35rem;
  border-radius: var(--radius-sm);
  border: var(--b) solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease),
              background 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary {
  color: #140a02;
  background: var(--molten-grad);
  box-shadow: 0 8px 30px -10px hsl(212 14% 50% / 0.6),
              inset 0 1px 0 hsl(210 14% 80% / 0.5);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 38px -10px hsl(212 14% 50% / 0.7); }
.btn-ghost {
  color: var(--fg);
  border-color: var(--line);
  background: hsl(220 40% 14% / 0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--molten-500); transform: translateY(-2px); }
.btn-sm { padding: 0.55rem 0.95rem; font-size: 0.88rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---- Pills / chips -------------------------------------------------------*/
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.34rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--fg-muted);
  background: hsl(220 40% 12% / 0.6);
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--allow);
  box-shadow: 0 0 0 3px hsl(142 76% 46% / 0.2);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .pill .dot { animation: none; } }

/* ---- Header / nav (zero-JS, checkbox-hack mobile) ------------------------*/
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: hsl(222 60% 3.2% / 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  transition: border-color 0.3s var(--ease);
}
.site-header:hover { border-bottom-color: var(--line-soft); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 68px;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; }
.brand .mark { width: 30px; height: 30px; }
.brand b { font-weight: 800; }
.nav-links { display: flex; align-items: center; gap: 0.4rem; }
.nav-links a:not(.btn) {
  font-size: 0.92rem;
  color: var(--fg-muted);
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm);
  transition: color 0.18s, background 0.18s;
}
.nav-links a:not(.btn):hover { color: var(--fg); background: hsl(220 40% 14% / 0.6); }
.nav-toggle, .nav-toggle-label { display: none; }

@media (max-width: 820px) {
  .nav-toggle-label {
    display: inline-flex; flex-direction: column; gap: 5px;
    padding: 10px; cursor: pointer; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: hsl(220 40% 12% / 0.6);
  }
  .nav-toggle-label span { width: 20px; height: 2px; background: var(--fg); transition: 0.25s var(--ease); }
  .nav-links {
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0.25rem;
    padding: 1rem var(--gutter) 1.5rem;
    background: hsl(220 52% 5.5% / 0.98);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: 0.25s var(--ease);
  }
  .nav-links a:not(.btn) { padding: 0.8rem; }
  .nav-links .btn { margin-top: 0.5rem; }
  .nav-toggle:checked ~ .nav-links { transform: none; opacity: 1; pointer-events: auto; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---- Hero ----------------------------------------------------------------*/
.hero { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5.5rem); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.6rem; }
.hero-eyebrow .badge {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--molten-300);
  padding: 0.22rem 0.55rem; border-radius: 100px;
  border: 1px solid hsl(210 12% 60% / 0.35); background: hsl(210 12% 48% / 0.08);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  /* asymmetric molten accent strip on the left edge */
  padding-left: clamp(0.9rem, 2vw, 1.4rem);
  border-left: 3px solid transparent;
  border-image: var(--molten-grad) 1;
  margin-bottom: 1.5rem;
}
.hero .sub {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--fg-muted);
  max-width: 34ch;
  margin-bottom: 2rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.6rem; }
.trust-strip {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--fg-faint);
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem;
}
.trust-strip span { white-space: nowrap; }
.trust-strip .sep { color: var(--molten-500); }

/* ---- Inspector card (hero visual, pure HTML/CSS — accurate to the app) ---*/
.inspector {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, hsl(216 44% 9%), hsl(220 52% 6%));
  box-shadow: 0 40px 80px -30px hsl(220 80% 2% / 0.9),
              inset 0 1px 0 hsl(220 40% 30% / 0.3);
  overflow: hidden;
}
.inspector::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40rem 20rem at 80% -20%, hsl(212 14% 50% / 0.1), transparent 60%);
}
.insp-bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.95rem; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--fg-faint);
}
.insp-dots { display: inline-flex; gap: 6px; }
.insp-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.insp-dots i:first-child { background: var(--molten-600); }
.insp-title { margin-left: auto; letter-spacing: 0.05em; }
.insp-body { padding: 0.5rem 0.4rem; }
.flow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  border: 1px solid transparent;
}
.flow:nth-child(odd) { background: hsl(220 40% 10% / 0.5); }
.flow .proc { color: var(--fg); }
.flow .arrow { color: var(--fg-faint); }
.flow .dest { color: var(--fg-muted); }
.flow .verdict {
  font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.16rem 0.5rem; border-radius: 5px; border: 1px solid;
}
.v-allow { color: var(--allow); border-color: hsl(142 76% 46% / 0.4); background: hsl(142 76% 46% / 0.1); }
.v-deny  { color: var(--deny);  border-color: hsl(0 84% 62% / 0.4);   background: hsl(0 84% 62% / 0.1); }
.v-flag  { color: var(--warn);  border-color: hsl(38 92% 54% / 0.45); background: hsl(38 92% 54% / 0.12); }
.flow.is-flagged {
  border-color: hsl(38 92% 54% / 0.4);
  background: hsl(38 92% 54% / 0.08);
  box-shadow: inset 3px 0 0 var(--warn);
}
.insp-foot {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 0.95rem; border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-faint);
}
.insp-foot .tag { color: var(--warn); }

/* ---- Logo strip / sub-claims --------------------------------------------*/
.claims {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem;
  padding-block: 1.5rem;
  border-block: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-faint);
  justify-content: space-between;
}
.claims b { color: var(--fg-muted); font-weight: 500; }

/* ---- Section heads -------------------------------------------------------*/
.sec-head { max-width: 56ch; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.sec-head h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.04;
  letter-spacing: -0.035em; margin-block: 0.7rem 0.8rem;
}
.sec-head p { color: var(--fg-muted); font-size: 1.08rem; max-width: 50ch; }
.sec-head.center { margin-inline: auto; text-align: center; }

/* ---- Feature cards (asymmetric bento) -----------------------------------*/
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.1rem);
}
.feat {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), hsl(220 52% 5.5%));
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.feat:hover { border-color: hsl(212 14% 50% / 0.45); transform: translateY(-3px); }
.feat::after {
  content: ""; position: absolute; right: -30%; top: -40%;
  width: 70%; height: 80%;
  background: radial-gradient(circle, hsl(212 14% 50% / 0.12), transparent 70%);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.feat:hover::after { opacity: 1; }
.feat-icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 11px; margin-bottom: 1.1rem;
  border: 1px solid hsl(212 14% 50% / 0.3);
  background: hsl(212 14% 50% / 0.08); color: var(--molten-400);
}
.feat-icon svg { width: 22px; height: 22px; }
.feat h3 { font-family: var(--font-display); font-size: 1.18rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.feat p { color: var(--fg-muted); font-size: 0.96rem; }
.feat .kbd { font-family: var(--font-mono); font-size: 0.74rem; color: var(--molten-300); }
/* spans */
.col-3 { grid-column: span 3; }
.col-2 { grid-column: span 2; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
@media (max-width: 820px) { .bento { grid-template-columns: 1fr 1fr; } .col-3,.col-2,.col-4 { grid-column: span 1; } .col-6 { grid-column: span 2; } }
@media (max-width: 520px) { .bento { grid-template-columns: 1fr; } .col-6 { grid-column: span 1; } }

/* PQC feature inner detail */
.pqc-algos { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; }
.pqc-algos code {
  font-family: var(--font-mono); font-size: 0.72rem;
  padding: 0.3rem 0.55rem; border-radius: 6px;
  border: 1px solid var(--line); color: var(--fg-muted);
  background: hsl(220 40% 10% / 0.6);
}

/* ---- Platform row --------------------------------------------------------*/
.platforms { display: flex; flex-wrap: wrap; gap: 1rem; }
.plat {
  display: flex; align-items: center; gap: 0.85rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.3rem; background: var(--card); flex: 1 1 220px;
}
.plat svg { width: 30px; height: 30px; color: var(--fg); flex-shrink: 0; }
.plat .pt { font-family: var(--font-display); font-weight: 700; }
.plat .ps { font-family: var(--font-mono); font-size: 0.74rem; color: var(--fg-faint); }

/* ---- Pricing -------------------------------------------------------------*/
.tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.9rem, 1.8vw, 1.3rem);
  align-items: stretch;
  max-width: 780px;
  margin-inline: auto;
}
@media (max-width: 680px) { .tiers { grid-template-columns: 1fr; max-width: 460px; } }
.tier {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), hsl(220 52% 5.5%));
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
}
.tier.featured {
  border-color: hsl(212 14% 50% / 0.55);
  box-shadow: 0 30px 70px -34px hsl(212 14% 50% / 0.5);
}
.tier.featured::before {
  content: "Most popular";
  position: absolute; top: -1px; right: 1.4rem; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #140a02; padding: 0.3rem 0.7rem; border-radius: 100px; background: var(--molten-grad);
}
.tier .tname { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; }
.tier .price { display: flex; align-items: baseline; gap: 0.35rem; margin-block: 0.9rem 0.2rem; }
.tier .price .amt { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3rem); letter-spacing: -0.04em; }
.tier .price .per { color: var(--fg-faint); font-family: var(--font-mono); font-size: 0.82rem; }
.tier .price-alt { font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-faint); min-height: 1.2em; }
.tier .tdesc { color: var(--fg-muted); font-size: 0.95rem; margin-block: 0.9rem 1.3rem; }
.tier .btn { margin-bottom: 1.4rem; }
.tier ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; padding: 0; font-size: 0.93rem; }
.tier li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--fg-muted); }
.tier li svg { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; color: var(--allow); }
.tier li.muted { color: var(--fg-faint); }
.tier li.muted svg { color: var(--fg-faint); }
.tier li b { color: var(--fg); font-weight: 600; }
.tier .feat-head {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-faint); margin-top: 0.3rem;
}

/* ---- Comparison table ----------------------------------------------------*/
.cmp-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; overflow-x: auto; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 620px; }
table.cmp th, table.cmp td { padding: 0.85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.cmp thead th { font-family: var(--font-display); font-weight: 700; background: var(--bg-2); position: sticky; top: 0; }
table.cmp thead th:not(:first-child) { text-align: center; }
table.cmp td:not(:first-child) { text-align: center; }
table.cmp tbody tr:hover { background: hsl(220 40% 10% / 0.5); }
table.cmp .grp td {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--molten-300); background: hsl(220 40% 9%); border-bottom-color: var(--line);
}
table.cmp .yes { color: var(--allow); }
table.cmp .no { color: var(--fg-faint); }
table.cmp .val { font-family: var(--font-mono); font-size: 0.8rem; color: var(--fg-muted); }
.col-pro { background: hsl(212 14% 50% / 0.04); }

/* ---- FAQ -----------------------------------------------------------------*/
.faq { display: grid; gap: 0.7rem; max-width: 760px; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); padding: 0 1.2rem;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--molten-400); font-size: 1.4rem; transition: transform 0.25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--fg-muted); font-size: 0.96rem; padding-bottom: 1.2rem; max-width: 64ch; }

/* ---- CTA band ------------------------------------------------------------*/
.cta-band {
  position: relative;
  border: 1px solid hsl(212 14% 50% / 0.3);
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(60rem 30rem at 50% 120%, hsl(212 14% 50% / 0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
  overflow: hidden;
}
.cta-band h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 4.5vw, 3.2rem); letter-spacing: -0.04em; line-height: 1.02; margin-bottom: 0.9rem; }
.cta-band p { color: var(--fg-muted); max-width: 48ch; margin: 0 auto 2rem; }
.cta-band .hero-cta { justify-content: center; }

/* ---- Footer --------------------------------------------------------------*/
.site-footer { border-top: 1px solid var(--line-soft); padding-block: 3rem 2.5rem; margin-top: 2rem; }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.foot-brand { max-width: 30ch; }
.foot-brand p { color: var(--fg-faint); font-size: 0.9rem; margin-top: 0.8rem; }
.foot-cols { display: flex; flex-wrap: wrap; gap: 3rem; }
.foot-col h4 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 0.9rem; }
.foot-col a { display: block; color: var(--fg-muted); font-size: 0.92rem; padding: 0.28rem 0; transition: color 0.18s; }
.foot-col a:hover { color: var(--molten-400); }
.foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--fg-faint);
}

/* ---- Scroll-driven reveal (progressive; visible by default) --------------*/
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    @keyframes reveal-in {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ---- Download page -------------------------------------------------------*/
.dl-card {
  position: relative;
  border: 1px solid hsl(212 14% 50% / 0.32);
  border-radius: calc(var(--radius) + 4px);
  background:
    radial-gradient(50rem 26rem at 50% -30%, hsl(212 14% 50% / 0.16), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  padding: clamp(1.6rem, 4vw, 2.6rem);
  overflow: hidden;
}
.dl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; }
.dl-os { display: flex; align-items: center; gap: 0.9rem; }
.dl-os svg { width: 40px; height: 40px; color: var(--fg); }
.dl-os .name { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; }
.dl-os .meta { font-family: var(--font-mono); font-size: 0.76rem; color: var(--fg-faint); }
.dl-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.dl-hashes {
  margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--line-soft);
  display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1rem;
  font-family: var(--font-mono); font-size: 0.78rem;
}
.dl-hashes dt { color: var(--fg-faint); }
.dl-hashes dd { color: var(--fg-muted); margin: 0; word-break: break-all; }
.dl-hashes .pending { color: var(--warn); }

/* steps list */
.steps { list-style: none; counter-reset: s; padding: 0; display: grid; gap: 1.1rem; max-width: 70ch; }
.steps li { counter-increment: s; position: relative; padding-left: 3.2rem; color: var(--fg-muted); }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -0.1rem;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem;
  color: var(--molten-300); border: 1px solid hsl(212 14% 50% / 0.35);
  border-radius: 9px; background: hsl(212 14% 50% / 0.08);
}
.steps li b { color: var(--fg); }

/* spec list */
.specs { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.specs div { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--line-soft); }
.specs div:last-child { border-bottom: 0; }
.specs div:nth-child(odd) { background: hsl(220 40% 9% / 0.5); }
.specs dt { font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-faint); margin: 0; }
.specs dd { margin: 0; color: var(--fg-muted); font-size: 0.92rem; }
@media (max-width: 540px) { .specs div { grid-template-columns: 1fr; gap: 0.2rem; } }

/* ---- Use-case cards + honest-scope block --------------------------------*/
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 1.8vw, 1.2rem); }
@media (max-width: 860px) { .uc-grid { grid-template-columns: 1fr; } }
.uc {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), hsl(220 52% 5.5%));
  padding: clamp(1.4rem, 2.4vw, 1.8rem);
}
.uc .q { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; margin-bottom: 0.7rem; color: var(--fg); }
.uc p { color: var(--fg-muted); font-size: 0.95rem; }
.uc a.more { display: inline-block; margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--molten-400); }

.honest {
  border: 1px solid var(--line);
  border-left: 3px solid var(--info);
  border-radius: var(--radius);
  background: hsl(217 91% 60% / 0.05);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.honest h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.honest ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.honest li { display: flex; gap: 0.7rem; color: var(--fg-muted); align-items: flex-start; }
.honest li svg { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; color: var(--deny); }
.honest .yes-line li svg { color: var(--allow); }
.honest p { color: var(--fg-muted); margin-top: 1rem; max-width: 64ch; }

/* divider label between audiences */
.aud-split { display: flex; align-items: center; gap: 1rem; margin-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.aud-split::before, .aud-split::after { content: ""; height: 1px; background: var(--line-soft); flex: 1; }
.aud-split span { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--molten-300); }

/* ---- Account page --------------------------------------------------------*/
.acct-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), hsl(220 52% 5.5%));
  padding: clamp(1.5rem, 3vw, 2.2rem); max-width: 540px;
}
.signin-form { display: grid; gap: 0.8rem; margin-top: 1.4rem; }
.signin-form input {
  font: inherit; color: var(--fg); padding: 0.85rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: hsl(220 40% 9%);
}
.signin-form input::placeholder { color: var(--fg-faint); }
.signin-form input:focus-visible { border-color: var(--molten-500); outline: none; }

/* ---- Blog ----------------------------------------------------------------*/
.blog-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.4rem); }
@media (max-width: 740px) { .blog-list { grid-template-columns: 1fr; } }
.post-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), hsl(220 52% 5.5%));
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.post-card:hover { border-color: hsl(212 14% 50% / 0.45); transform: translateY(-3px); }
.post-card.feature { grid-column: 1 / -1; }
.post-meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--fg-faint); display: flex; gap: 0.7rem; flex-wrap: wrap; }
.post-meta .tag { color: var(--molten-300); }
.post-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; margin-block: 0.7rem 0.5rem; }
.post-card.feature h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.post-card p { color: var(--fg-muted); font-size: 0.96rem; }
.post-card .read { margin-top: auto; padding-top: 1rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--molten-400); }

/* ---- Article (blog post) prose ------------------------------------------*/
.article { max-width: 720px; margin-inline: auto; }
.article .post-meta { margin-bottom: 1rem; }
.article h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.04; letter-spacing: -0.04em; margin-bottom: 1.1rem; }
.article .lede { font-size: 1.2rem; color: var(--fg-muted); margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line-soft); }
.article h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.03em; margin-block: 2.4rem 0.9rem; }
.article p { margin-bottom: 1.2rem; color: hsl(220 30% 86%); }
.article a { color: var(--molten-400); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: hsl(212 14% 50% / 0.4); }
.article ul, .article ol { margin: 0 0 1.4rem 1.2rem; color: hsl(220 30% 86%); display: grid; gap: 0.5rem; }
.article strong { color: var(--fg); }
.article blockquote {
  margin: 1.6rem 0; padding: 0.4rem 0 0.4rem 1.3rem;
  border-left: 3px solid transparent; border-image: var(--molten-grad) 1;
  color: var(--fg); font-size: 1.08rem;
}
.article code {
  font-family: var(--font-mono); font-size: 0.85em;
  padding: 0.12rem 0.4rem; border-radius: 5px;
  background: hsl(220 40% 12%); border: 1px solid var(--line-soft); color: var(--molten-300);
}
.article .callout {
  border: 1px solid var(--line); border-left: 3px solid var(--info);
  background: hsl(217 91% 60% / 0.06); border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem; margin: 1.6rem 0; font-size: 0.96rem; color: var(--fg-muted);
}
.article .author {
  display: flex; align-items: center; gap: 0.9rem; margin-top: 2.5rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft); font-size: 0.9rem; color: var(--fg-faint);
}
.article .author .av { width: 42px; height: 42px; border-radius: 50%; background: var(--molten-grad); flex-shrink: 0; }
.article .author b { color: var(--fg); font-family: var(--font-display); }

/* ---- Misc utility --------------------------------------------------------*/
.lede { font-size: 1.15rem; color: var(--fg-muted); max-width: 60ch; }
.note { font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-faint); }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--molten-500); color: #140a02; padding: 0.6rem 1rem; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---- Figure / media slot (real program captures + honest placeholder) ----
 * Anduril-style: hairline frame, mono designation code, HUD crop-ticks, a
 * dimension readout. Holds a real <img> when available; otherwise shows a
 * clearly-marked placeholder. NO fabricated product UI — material honesty. */
.figure { position: relative; }
.figure-slot {
  position: relative;
  aspect-ratio: 16 / 11;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, hsl(216 12% 22% / 0.18) 11px 12px),
    var(--card);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.figure-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.figure-slot video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* reduced-motion: hide the autoplay loop, show the static still instead (no JS) */
.figure-slot .fig-rm { display: none; }
@media (prefers-reduced-motion: reduce) {
  .figure-slot video { display: none; }
  .figure-slot .fig-rm { display: block; }
}

/* Scroll-scrub — a tall track pins the figure while scrub.js maps scroll position
 * to video.currentTime. No-JS / reduced-motion: collapses to a normal block. */
.scrub-track { position: relative; height: 220vh; }
.scrub-stick { position: sticky; top: 7vh; }
.scrub-hint  { font-family: var(--font-mono); font-size: 0.82em; color: var(--fg-faint); letter-spacing: 0.04em; }
@media (max-width: 760px) { .scrub-track { height: 175vh; } .scrub-stick { top: 9vh; } }
@media (prefers-reduced-motion: reduce) { .scrub-track { height: auto; } .scrub-stick { position: static; } }
/* HUD corner crop-ticks */
.figure-slot::before, .figure-slot::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--fg-faint); opacity: 0.45; pointer-events: none;
}
.figure-slot::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.figure-slot::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.figure-tag {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-faint);
}
.figure-ph {
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-muted); text-align: center;
  line-height: 1.7; padding: 1.2rem;
}
.figure-ph-sub { display: block; font-size: 0.66rem; color: var(--fg-faint); }
.figure figcaption {
  margin-top: 0.65rem; font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.06em; color: var(--fg-faint); line-height: 1.5;
}
.figure figcaption b { color: var(--fg-muted); font-weight: 500; }

/* ---- Blueprint schematic art (honest technical illustration of the real
 * engine; NOT a product mock — see DESIGN-LANGUAGE.md). One drafting language:
 * hairline strokes, designation codes, leader annotations, status-only color. */
.fig-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.4rem; }
.fig-kicker { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--molten-400); white-space: nowrap; }
.fig-kicker.dim { color: var(--fg-faint); }
.fig-rule { flex: 1; height: 1px; background: var(--line); }
.schematic {
  width: 100%; height: auto; display: block;
  --gl: hsl(216 12% 22% / 0.16);
  background:
    linear-gradient(var(--gl) 1px, transparent 1px),
    linear-gradient(90deg, var(--gl) 1px, transparent 1px), transparent;
  background-size: 22px 22px;
}
.schematic .s-frame { fill: none; stroke: var(--line); stroke-width: 1; }
.schematic .s-grid  { stroke: var(--line-soft); stroke-width: 1; }
.schematic .s-node  { fill: var(--card); stroke: var(--fg-faint); stroke-width: 1; }
.schematic .s-sub   { fill: none; stroke: var(--line); stroke-width: 1; }
.schematic .s-flow  { fill: none; stroke: var(--fg-muted); stroke-width: 1.25; }
.schematic .s-allow { stroke: var(--allow); }
.schematic .s-block { stroke: var(--deny); }
.schematic .s-lead  { fill: none; stroke: var(--fg-faint); stroke-width: 1; stroke-dasharray: 2 3; }
.schematic .s-tick  { stroke: var(--fg-faint); stroke-width: 1; }
.schematic text { font-family: var(--font-mono); fill: var(--fg-muted); }
.schematic .t-code  { fill: var(--molten-300); font-size: 9px; letter-spacing: 0.14em; }
.schematic .t-lab   { fill: var(--fg-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
.schematic .t-faint { fill: var(--fg-faint); font-size: 9px; letter-spacing: 0.06em; }
.schematic .t-allow { fill: var(--allow); font-size: 10px; letter-spacing: 0.1em; }
.schematic .t-block { fill: var(--deny);  font-size: 10px; letter-spacing: 0.1em; }
.schematic .t-title { fill: var(--fg); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; }
.fig-cap { margin-top: 0.7rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--fg-faint); }

/* Sheet-rule — drafting-document divider between sections (hairline + mono label
 * + a small verdict-diamond glyph from the schematic vocabulary). */
.sheet-rule { display: flex; align-items: center; gap: 1.1rem; }
.sheet-rule::before, .sheet-rule::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.sheet-rule span {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--fg-faint); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.7rem;
}
.sheet-rule span::before {
  content: ""; width: 7px; height: 7px; flex-shrink: 0;
  border: 1px solid var(--fg-faint); transform: rotate(45deg);
}

/* Spec table — hairline "enforcement matrix" readout (capability · status). */
.spec { border: 1px solid var(--line); }
.spec-head {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--bg-2);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-faint);
}
.spec dl { margin: 0; }
.spec dl > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--line-soft); }
.spec dl > div:last-child { border-bottom: 0; }
.spec dl > div:hover { background: hsl(216 12% 12% / 0.5); }
.spec dt { color: var(--fg-muted); font-size: 0.95rem; margin: 0; }
.spec dd { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; white-space: nowrap; }
.spec dd.ok { color: var(--allow); }
.spec dd.pending { color: var(--warn); }

/* ---- Moats (homepage "why Ferrite" — numbered feature cards) -------------*/
.moats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.9rem, 1.8vw, 1.3rem);
}
@media (max-width: 760px) { .moats { grid-template-columns: 1fr; } }
.moat {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), hsl(220 52% 5.5%));
  padding: clamp(1.5rem, 2.8vw, 2.2rem);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.moat:hover { border-color: hsl(212 14% 50% / 0.45); transform: translateY(-3px); }
.moat-no {
  position: absolute; top: clamp(1.1rem, 2.4vw, 1.7rem); right: clamp(1.2rem, 2.6vw, 1.9rem);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 3.6rem); letter-spacing: -0.05em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px hsl(225 26% 24%);
  pointer-events: none; user-select: none;
}
.moat-icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 12px; margin-bottom: 1.2rem;
  border: 1px solid hsl(212 14% 50% / 0.3);
  background: hsl(212 14% 50% / 0.08); color: var(--molten-400);
}
.moat-icon svg { width: 24px; height: 24px; }
.moat h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem); letter-spacing: -0.025em;
  margin-bottom: 0.6rem; max-width: 22ch;
}
.moat p { color: var(--fg-muted); font-size: 0.98rem; }
.moat em { color: var(--fg); font-style: normal; font-weight: 600; }
.moat b { color: var(--fg); font-weight: 600; }

/* (How-it-works step-rail CSS removed 2026-06-15 — replaced by FIG. B schematic.) */

/* ---- Check list (used in enforcement + tier feature blocks) -------------*/
.check-list { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.check-list li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--fg-muted); font-size: 0.95rem; }
.check-list li svg { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; color: var(--allow); }
.check-list li b { color: var(--fg); font-weight: 600; }

/* ---- Social-proof grid (stat tiles, honest-by-default) ------------------*/
.proof-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.8vw, 1.3rem); max-width: 920px; margin-inline: auto;
}
@media (max-width: 760px) { .proof-grid { grid-template-columns: 1fr; max-width: 460px; } }
.proof {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), hsl(220 52% 5.5%));
  padding: clamp(1.5rem, 2.8vw, 2rem); text-align: center;
}
.proof-stat { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.04em; margin-bottom: 0.6rem; }
.proof p { color: var(--fg-muted); font-size: 0.92rem; }

/* ---- Pricing: billing toggle (zero-JS, :checked-driven) -----------------*/
.bill-toggle { display: flex; justify-content: center; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.bill-switch {
  display: inline-flex; align-items: center; gap: 0.2rem;
  border: 1px solid var(--line); border-radius: 100px; padding: 0.3rem;
  background: hsl(220 40% 9% / 0.7);
}
.bill-switch label {
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  padding: 0.5rem 1.2rem; border-radius: 100px; cursor: pointer;
  color: var(--fg-muted); transition: color 0.2s var(--ease), background 0.2s var(--ease);
  white-space: nowrap;
}
.bill-switch label .save { font-family: var(--font-mono); font-size: 0.68rem; color: var(--molten-300); margin-left: 0.4rem; }
#bill-monthly, #bill-annual { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); overflow: hidden; }
#bill-monthly:checked ~ .bill-toggle label[for="bill-monthly"],
#bill-annual:checked ~ .bill-toggle label[for="bill-annual"] {
  color: #140a02; background: var(--molten-grad);
}
#bill-monthly:checked ~ .bill-toggle label[for="bill-monthly"] .save,
#bill-annual:checked ~ .bill-toggle label[for="bill-annual"] .save { color: hsl(28 90% 18%); }
/* price swap: show monthly by default, annual when #bill-annual checked */
.price-annual, .cta-annual { display: none; }
#bill-annual:checked ~ * .price-monthly,
#bill-annual:checked ~ * .cta-monthly { display: none; }
#bill-annual:checked ~ * .price-annual,
#bill-annual:checked ~ * .cta-annual { display: inline; }
#bill-annual:checked ~ * .cta-annual.btn { display: flex; }

/* ---- Pricing: three-tier grid + enterprise card -------------------------*/
.tiers.three { grid-template-columns: repeat(3, 1fr); max-width: 1080px; }
@media (max-width: 940px) { .tiers.three { grid-template-columns: 1fr; max-width: 460px; } }
.tier .per-device { font-family: var(--font-mono); font-size: 0.72rem; color: var(--molten-300); letter-spacing: 0.03em; margin-top: 0.1rem; }
.tier.enterprise { border-color: var(--line); }
.tier.enterprise .price .amt { font-size: clamp(1.6rem, 3vw, 2rem); }

/* ---- Legal / prose pages (reuse .article, add page header) --------------*/
.legal-meta {
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--fg-faint);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-bottom: 1.6rem;
}
.legal-meta b { color: var(--fg-muted); font-weight: 500; }

/* ============================================================================
 * Ambient-glow pass — deeper void, molten light bleeding through components.
 * Deliberate anti-patterns of the "elevation" school: glow instead of
 * lighter surfaces, off-canvas light sources, halos that escape their card.
 * ==========================================================================*/

/* Hero headline radiates faint heat into the void */
.hero h1 { text-shadow: 0 0 90px hsl(212 14% 50% / 0.28); }

/* The inspector mock floats on its own molten halo, not a drop shadow */
.inspector {
  box-shadow:
    0 40px 90px -30px hsl(222 80% 1% / 0.95),
    0 0 110px -24px hsl(212 14% 50% / 0.30),
    inset 0 1px 0 hsl(225 30% 60% / 0.10);
}

/* Feature cards: a halo that overflows the card on hover */
.feat:hover,
.moat:hover {
  box-shadow:
    0 28px 64px -32px hsl(212 14% 50% / 0.38),
    0 0 70px -28px hsl(212 14% 50% / 0.30);
}

/* Featured tier glows even at rest — the one lit object in the dark */
.tier.featured {
  box-shadow:
    0 30px 70px -34px hsl(212 14% 50% / 0.55),
    0 0 130px -40px hsl(212 14% 50% / 0.45);
}

/* CTA band: ambient ember light pooling behind it */
.cta-band {
  box-shadow:
    0 0 150px -40px hsl(212 14% 50% / 0.38),
    inset 0 1px 0 hsl(210 14% 80% / 0.06);
}

/* Platform + download cards pick up a faint rim of warmth on hover */
.plat:hover,
.dl-card:hover {
  border-color: hsl(212 14% 50% / 0.4);
  box-shadow: 0 0 60px -24px hsl(212 14% 50% / 0.30);
}