/* pathwarden.org. Dark first, light on request. The tokens follow the
   Pathwarden report and local UI (crates/pathwarden-core/src/report/report.css)
   so the site feels like the same product: deep navy, brand violet for
   identity and action, electric sage green for progress and "fixed". */

/* Headlines: Barlow (SIL OFL 1.1, assets/fonts/Barlow-OFL.txt), self-hosted
   as Latin subsets so every system shows the same DIN-like face. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-700.woff2") format("woff2"); }

:root {
  --bg: #0b0e14; --bg-2: #0e131c; --card: #121925; --card-2: #172031; --line: #222c3c; --line-2: #2f3b52;
  --ink: #f2f4f8; --ink-2: #c8d0dc; --muted: #9aa7b8;
  --violet: #9d5cff; --violet-ink: #b48aff; --violet-deep: #6b00d6; --green: #7ce46b; --green-ink: #8fe97f;
  --accent: var(--violet-ink); --code-bg: #0d131d; --hl: rgba(157, 92, 255, 0.16);
  --critical: #f2557a; --high: #ff8a3d; --medium: #e9e05a; --low: #8b9ab0;
  --glow-a: rgba(157, 92, 255, 0.34); --glow-b: rgba(124, 228, 107, 0.16); --glow-c: rgba(107, 0, 214, 0.30);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 60px -24px rgba(0, 0, 0, 0.65);
  --header-bg: rgba(11, 14, 20, 0.72);
  --display: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --wrap: 1220px; --gutter: clamp(16px, 4vw, 40px); --radius: 16px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f6f6f9; --bg-2: #eef0f5; --card: #ffffff; --card-2: #f4f3fa; --line: #e1e4ea; --line-2: #cfd4de;
  --ink: #0b0e14; --ink-2: #2a3342; --muted: #556173;
  --violet: #6b00d6; --violet-ink: #6b00d6; --violet-deep: #6b00d6; --green: #1f7a33; --green-ink: #1f7a33;
  --accent: #6b00d6; --code-bg: #f3f2f8; --hl: rgba(107, 0, 214, 0.09);
  --critical: #ad1f40; --high: #a84600; --medium: #735900; --low: #5f6f86;
  --glow-a: rgba(140, 70, 240, 0.16); --glow-b: rgba(60, 170, 80, 0.12); --glow-c: rgba(107, 0, 214, 0.10);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 40px -22px rgba(30, 20, 60, 0.22);
  --header-bg: rgba(246, 246, 249, 0.78);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f6f6f9; --bg-2: #eef0f5; --card: #ffffff; --card-2: #f4f3fa; --line: #e1e4ea; --line-2: #cfd4de;
    --ink: #0b0e14; --ink-2: #2a3342; --muted: #556173;
    --violet: #6b00d6; --violet-ink: #6b00d6; --violet-deep: #6b00d6; --green: #1f7a33; --green-ink: #1f7a33;
    --accent: #6b00d6; --code-bg: #f3f2f8; --hl: rgba(107, 0, 214, 0.09);
    --critical: #ad1f40; --high: #a84600; --medium: #735900; --low: #5f6f86;
    --glow-a: rgba(140, 70, 240, 0.16); --glow-b: rgba(60, 170, 80, 0.12); --glow-c: rgba(107, 0, 214, 0.10);
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 40px -22px rgba(30, 20, 60, 0.22);
    --header-bg: rgba(246, 246, 249, 0.78);
    color-scheme: light;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 16px/1.65 var(--sans); overflow-x: hidden; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: 0.005em; line-height: 1.15; margin: 0; }
p { margin: 0 0 1rem; }
code, kbd, pre { font-family: var(--mono); }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0.05em 0.45em; border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: 6px; font-size: 0.78em; line-height: 1.5; text-align: center; color: var(--ink-2); background: var(--card);
}
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic .fill { fill: currentColor; stroke: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.small { font-size: 0.88rem; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
[hidden] { display: none !important; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px;
  background: var(--violet-deep); color: #fff; font-weight: 600; text-decoration: none; transition: top 0.15s;
}
.skip:focus { top: 12px; }
main { display: block; position: relative; z-index: 1; }
main:focus { outline: none; }

/* Theme-specific logos */
.logo-light { display: none; }
:root[data-theme="light"] .logo-light { display: block; }
:root[data-theme="light"] .logo-dark { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .logo-light { display: block; }
  :root:not([data-theme]) .logo-dark { display: none; }
}

/* ---------- Background glows: the logo's violet and green, blurred ---------- */
.glow { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.glow span { position: absolute; border-radius: 50%; will-change: transform; }
.glow .g1 { width: 72vmax; height: 72vmax; left: -26vmax; top: -34vmax; background: radial-gradient(closest-side, var(--glow-a), transparent 72%); animation: drift-a 46s ease-in-out 1 both; }
.glow .g2 { width: 56vmax; height: 56vmax; right: -24vmax; top: 18vh; background: radial-gradient(closest-side, var(--glow-b), transparent 70%); animation: drift-b 58s ease-in-out 1 both; }
.glow .g3 { width: 64vmax; height: 64vmax; left: 8vw; bottom: -46vmax; background: radial-gradient(closest-side, var(--glow-c), transparent 70%); animation: drift-c 64s ease-in-out 1 both; }
@keyframes drift-a { to { transform: translate3d(9vmax, 6vmax, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-8vmax, -5vmax, 0) scale(0.92); } }
@keyframes drift-c { to { transform: translate3d(10vmax, -4vmax, 0) scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .glow span, .pathviz .edge-line::after, .pulse { animation: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40; background: var(--header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.header-inner { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: flex; align-items: center; flex: none; padding: 4px 0; }
/* header-*.svg: the lockup with room above and below for the jewel's pulse,
   so 48px tall shows a 32px lockup. */
.brand img { height: 48px; width: auto; transition: filter 0.35s ease; }
.brand:hover img, .brand:focus-visible img { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--violet) 55%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--green) 22%, transparent)); }
.site-nav { flex: 1; min-width: 0; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0 0 0 12px; padding: 0; }
.nav-links a, .nav-links summary {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  color: var(--ink-2); font-weight: 600; font-size: 0.93rem; text-decoration: none; white-space: nowrap; list-style: none;
}
.nav-links summary::-webkit-details-marker { display: none; }
.nav-links a:hover, .nav-links summary:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-links a[aria-current="page"], .nav-links summary[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--violet); border-radius: 10px 10px 2px 2px; }
.nav-links summary .ic { width: 16px; height: 16px; transition: transform 0.2s; }
.menu { position: relative; }
.menu[open] summary .ic { transform: rotate(180deg); }
.menu-list {
  position: absolute; top: calc(100% + 8px); left: -8px; min-width: 290px; list-style: none; margin: 0; padding: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); z-index: 50;
}
.menu-list a { display: flex; gap: 12px; padding: 10px 12px; border-radius: 9px; width: 100%; font-weight: 600; }
.menu-list a .ic { color: var(--accent); }
.header-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.search-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px; border-radius: 11px;
  color: var(--muted); background: color-mix(in srgb, var(--card) 80%, transparent); border: 1px solid var(--line);
  text-decoration: none; font-size: 0.9rem; min-width: 168px;
}
.search-btn:hover { color: var(--ink); border-color: var(--line-2); }
.search-btn .ic { width: 17px; height: 17px; }
.search-btn .search-label { flex: 1; }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 11px; position: relative;
  color: var(--ink-2); background: transparent; border: 1px solid var(--line); cursor: pointer; text-decoration: none;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-2); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.icon-btn .ic { width: 18px; height: 18px; }
.gh-btn > span, .gh-btn > small { display: none; }
.gh-btn.is-soon { opacity: 0.6; cursor: default; }
.theme-toggle .i-sun { display: block; } .theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
.nav-toggle { display: none; }
.nav-toggle .i-close { display: none; }
.nav-open .nav-toggle .i-close { display: block; }
.nav-open .nav-toggle .i-menu { display: none; }

@media (max-width: 1060px) {
  .search-btn { min-width: 0; padding: 0; width: 38px; justify-content: center; }
  .search-btn .search-label, .search-btn kbd { display: none; }
}
@media (max-width: 920px) {
  .nav-toggle { display: inline-grid; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 66px; max-height: calc(100vh - 66px); overflow-y: auto;
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 12px var(--gutter) 22px;
  }
  .nav-open .site-nav { display: block; }
  .nav-links { flex-direction: column; align-items: stretch; margin: 0; gap: 2px; }
  .nav-links a, .nav-links summary { padding: 12px 10px; font-size: 1.02rem; }
  .menu-list { position: static; box-shadow: none; border: 0; padding: 0 0 0 10px; min-width: 0; background: transparent; }
  .nav-links a[aria-current="page"], .nav-links summary[aria-current="page"] { box-shadow: inset 3px 0 0 var(--violet); border-radius: 4px; }
}
@media (max-width: 420px) { .gh-btn { display: none; } .brand img { height: 42px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px;
  border-radius: 12px; font: 600 0.98rem/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  color: var(--ink); background: color-mix(in srgb, var(--card) 85%, transparent); border: 1px solid var(--line-2);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s, background 0.15s;
}
.btn:hover { border-color: var(--violet); transform: translateY(-1px); }
.btn .ic { width: 18px; height: 18px; }
.btn.primary {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #7a1ff0 0%, #6b00d6 55%, #5a00b8 100%);
  box-shadow: 0 10px 30px -10px rgba(120, 40, 240, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn.primary:hover { box-shadow: 0 14px 38px -10px rgba(140, 60, 255, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn.is-soon { opacity: 0.75; cursor: default; transform: none; }
.btn small, .footer-gh small {
  font: 700 0.62rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px;
  color: var(--green-ink); background: color-mix(in srgb, var(--green) 14%, transparent);
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.more .ic { width: 17px; height: 17px; transition: transform 0.15s; }
.more:hover .ic { transform: translateX(3px); }

/* ---------- Type helpers ---------- */
.eyebrow, .kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 24px; color: var(--green-ink);
  font: 700 0.76rem/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--violet), var(--green)); }
@media (max-width: 600px) { .eyebrow, .kicker { margin-bottom: 18px; } }
.lead { font-size: 1.16rem; line-height: 1.6; color: var(--ink-2); max-width: 66ch; }
.grad {
  /* Brand violet straight into brand green: no pale midpoint. */
  background: linear-gradient(100deg, #b26bff 0%, #9d5cff 38%, #5fd970 82%, #7ce46b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(157, 92, 255, 0.35));
}
:root[data-theme="light"] .grad {
  background-image: linear-gradient(100deg, #7a1cff 0%, #6b00d6 40%, #1f9d3a 85%, #1f7a33 100%);
  filter: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .grad {
    background-image: linear-gradient(100deg, #7a1cff 0%, #6b00d6 40%, #1f9d3a 85%, #1f7a33 100%);
    filter: none;
  }
}

/* ---------- Home hero ---------- */
.hero { position: relative; padding: clamp(48px, 9vw, 112px) 0 clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px 56px; align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1.02; letter-spacing: -0.01em; margin-bottom: 24px; }
.hero .lead { font-size: clamp(1.08rem, 1.6vw, 1.25rem); margin-bottom: 30px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 28px 0 0; color: var(--muted); font-size: 0.9rem; }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts .ic { width: 16px; height: 16px; color: var(--green-ink); }
.hero-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 540px; width: 100%; justify-self: center; }
.hero-art::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--violet) 34%, transparent), transparent 70%),
              radial-gradient(closest-side at 70% 75%, color-mix(in srgb, var(--green) 24%, transparent), transparent 70%);
  filter: blur(18px);
}
.hero-art > * { grid-area: 1 / 1; }
.hero-still { position: relative; width: 48%; }
.hero-still img { width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35)); }
.hero-art.is-live .hero-still { display: none; }
.hero-art:not(.is-live) .hero-graph { display: none; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 560px; aspect-ratio: 600 / 380; margin-bottom: -8px; }
  .hero-art::before { inset: 4% 14%; }
  .hero-still { width: 28%; }
}

/* The scene fades behind the text column so the headline, lead and buttons
   never sit on lines and icons; it stays vivid on the art side, and the
   paths emerge from the dark toward the crown. */
@media (min-width: 901px) {
  .hero.is-live .hero-canvas, .page-hero.is-live .hero-canvas {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.32) 44%, #000 64%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.32) 44%, #000 64%);
  }
}
@media (max-width: 900px) {
  .hero.is-live .hero-canvas, .page-hero.is-live .hero-canvas {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0, 0, 0, 0.3) 52%);
    mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0, 0, 0, 0.3) 52%);
  }
}

/* The hero canvas (static/js/hero.js; hero-sweep.js for ?style=a) sits behind
   the whole hero. Colours only here; the scripts read these properties. */
.hero-canvas { display: none; }
.hero.is-live { isolation: isolate; }
.hero.is-live .hero-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero.is-sweep .hero-canvas {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 84%, transparent 100%); }
.hero.is-sweep .hero-art::before { display: none; }
.hero-canvas {
  /* Compromised: a rose-red ring and caption that sit with the violet. */
  --hx-red: #ff4d6d;
  --hx-path: #a873ff; --hx-head: #f4ecff; --hx-grid: #3a475e; --hx-trace: #2c374b; --hx-ghost: #556175;
  --hx-a: #6b00d6; --hx-b: #b98cff; --hx-hot: #f6eeff; --hx-safe: #7ce46b; --hx-safe-hot: #d9ffd0;
  --hx-edge: #2f3b52; --hx-far: #6d7d98; --hx-disc: #121925; --hx-disc-line: #33405a; --hx-icon: #9aa7b8;
  --hx-ink: #f2f4f8; --hx-label-bg: #0e131c; --hx-muted: #7f8ca0; --hx-bg: #0b0e14;
  /* The Crown W at Tier Zero. The alarm stays on the brand's violet, never red. */
  --hx-alarm: #b57bff; --hx-cw-a: #9d5cff; --hx-cw-b: #7ce46b; --hx-cw-ink: #f7f7f7; --hx-cw-band: #f7f7f7; --hx-cw-idle: #c8d0dc;
  --hx-blend: lighter; --hx-glow: 1; }
:root[data-theme="light"] .hero-canvas {
  --hx-red: #d6264a;
  --hx-path: #6b00d6; --hx-head: #6b00d6; --hx-grid: #c3c9d6; --hx-trace: #d3d8e2; --hx-ghost: #a3abba;
  --hx-a: #9a5cf0; --hx-b: #6b00d6; --hx-hot: #4a0099; --hx-safe: #2f9e44; --hx-safe-hot: #1f7a33;
  --hx-edge: #c9cfdb; --hx-far: #a9b2c3; --hx-disc: #ffffff; --hx-disc-line: #cfd4de; --hx-icon: #556173;
  --hx-ink: #0b0e14; --hx-label-bg: #ffffff; --hx-muted: #6b7587; --hx-bg: #f6f6f9;
  --hx-alarm: #6b00d6; --hx-cw-a: #6b00d6; --hx-cw-b: #1f8a3a; --hx-cw-ink: #0b0e14; --hx-cw-idle: #8a94a6;
  /* The crown band, softened from navy to a deep violet ink at hero size. */
  --hx-cw-band: #2e2257;
  --hx-blend: source-over; --hx-glow: 0.55; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hero-canvas {
  --hx-red: #d6264a;
  --hx-path: #6b00d6; --hx-head: #6b00d6; --hx-grid: #c3c9d6; --hx-trace: #d3d8e2; --hx-ghost: #a3abba;
  --hx-a: #9a5cf0; --hx-b: #6b00d6; --hx-hot: #4a0099; --hx-safe: #2f9e44; --hx-safe-hot: #1f7a33;
  --hx-edge: #c9cfdb; --hx-far: #a9b2c3; --hx-disc: #ffffff; --hx-disc-line: #cfd4de; --hx-icon: #556173;
  --hx-ink: #0b0e14; --hx-label-bg: #ffffff; --hx-muted: #6b7587; --hx-bg: #f6f6f9;
  --hx-alarm: #6b00d6; --hx-cw-a: #6b00d6; --hx-cw-b: #1f8a3a; --hx-cw-ink: #0b0e14; --hx-cw-idle: #8a94a6;
  /* The crown band, softened from navy to a deep violet ink at hero size. */
  --hx-cw-band: #2e2257;
  --hx-blend: source-over; --hx-glow: 0.55; } }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(44px, 6vw, 80px) 0; }
.section.tight { padding-top: clamp(24px, 4vw, 48px); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.12; margin-bottom: 18px; }
.section-head p:not(.eyebrow) { color: var(--ink-2); font-size: 1.08rem; margin: 0; }
.band { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-2) 70%, transparent) 18%, color-mix(in srgb, var(--bg-2) 70%, transparent) 82%, transparent); }

/* ---------- Cards and grids ---------- */
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.card {
  position: relative; display: block; padding: 26px; border-radius: var(--radius); color: var(--ink); text-decoration: none;
  background: color-mix(in srgb, var(--card) 82%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
a.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--violet) 55%, var(--line)); }
.card h3 { font-size: 1.24rem; margin: 0 0 10px; }
.card p { color: var(--ink-2); margin: 0; font-size: 0.98rem; }
.card .more { margin-top: 16px; color: var(--accent); }
.card-icon {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; margin-bottom: 18px;
  color: var(--accent); background: color-mix(in srgb, var(--violet) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--violet) 28%, transparent);
}
.card-icon.green { color: var(--green-ink); background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 28%, transparent); }
.card-icon .ic { width: 22px; height: 22px; }
.card.glass::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 60%, transparent), transparent 40%, transparent 60%, color-mix(in srgb, var(--green) 50%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.25s;
}
a.card.glass:hover::after { opacity: 1; }

/* Audience cards */
.aud-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.aud-card { display: flex; flex-direction: column; min-height: 100%; padding: 22px 22px 20px; }
.aud-card h3 { font-size: 1.12rem; }
.aud-card p { font-size: 0.92rem; flex: 1; }
.aud-card .more { font-size: 0.92rem; }

/* ---------- Attack path visual ({{pathmap}} in build.py) ----------
   Stations on the hero's transit grid: 90 and 45 degree segments in an SVG
   behind HTML stations placed on the same grid (wide: 1000 x 270, tall:
   340 x 600). The resting state is the end of the story: the path lit to the
   cut, the cut made, Tier Zero protected. With scroll-driven animation the
   story plays as the card scrolls in (see "The breach, as you scroll"). */
.pathviz-card { padding: clamp(22px, 4vw, 40px); overflow: clip; } /* clip, not hidden: a scroll container would freeze the view timeline */
.pv { position: relative; aspect-ratio: 1000 / 270; margin: 4px 0 28px; }
.prose .pv-box, .kb-sec .pv-box { margin: 1.6rem 0 2.2rem; }
.pv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pv-tall { display: none; }
.pv-base, .pv-gap, .pv-lit { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pv-base { stroke: color-mix(in srgb, var(--violet) 26%, var(--line-2)); stroke-width: 3px; }
.pv-gap { stroke: var(--muted); stroke-width: 2px; stroke-dasharray: 5 7; opacity: 0; }
.pv-lit {
  stroke: var(--violet); stroke-width: 3.5px; stroke-dasharray: 1 1; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--violet) 65%, transparent));
}
.pv-story .pv-base.b2 { opacity: 0; }
.pv-story .pv-gap { opacity: 1; }
.pv-story .pv-lit.l2, .pv-story .pv-lit.l3 { opacity: 0; }

.pathviz { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.pathviz .node {
  position: absolute; z-index: 1; width: 168px; display: grid; justify-items: center; gap: 2px; text-align: center;
  transform: translate(-50%, -28px);
}
.pathviz .n1 { left: 7%; top: 70.37%; }
.pathviz .n2 { left: 33%; top: 25.93%; }
.pathviz .n3 { left: 65%; top: 70.37%; }
.pathviz .goal { left: 92%; top: 25.93%; transform: translate(-50%, -34px); }
.node-dot {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; color: var(--ink);
  background: var(--card-2); border: 2px solid var(--line-2); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
}
.node-dot .bi { width: 30px; height: 30px; }
.pathviz .n1 .node-dot, .pathviz .n2 .node-dot, .pv:not(.pv-story) .n3 .node-dot {
  border-color: var(--violet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 16%, transparent), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
}
.pathviz .goal .node-dot { width: 68px; height: 68px; border-color: var(--violet); box-shadow: 0 0 0 6px color-mix(in srgb, var(--violet) 16%, transparent), 0 16px 40px -12px color-mix(in srgb, var(--violet) 60%, transparent); }
.pathviz .goal .node-dot img { width: 40px; height: auto; }
.pv-story .goal .node-dot {
  border-color: var(--green);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 22%, transparent), 0 16px 44px -10px color-mix(in srgb, var(--green) 55%, transparent);
}
.pathviz .node strong { font: 600 1rem/1.25 var(--display); color: var(--ink); }
.pathviz .node > span:not(.node-dot):not(.pv-state) { color: var(--muted); font-size: 0.82rem; line-height: 1.3; }
.pv-state { display: grid; margin-top: 6px; font: 700 0.68rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.pv-state > span { grid-area: 1 / 1; }
.st-bad { color: var(--critical); opacity: 0; }
.st-good { color: var(--green-ink); }

.pathviz .edge { position: absolute; z-index: 2; transform: translate(-50%, -50%); }
.pathviz .e1 { left: 21%; top: 48.15%; }
.pathviz .e2 { left: 47%; top: 48.15%; }
.pathviz .e3 { left: 77%; top: 48.15%; }
.edge-label {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font: 600 0.74rem/1.3 var(--mono); white-space: nowrap;
  color: var(--ink-2); background: var(--card); border: 1px solid var(--line-2);
}
.edge.cut .edge-label { text-decoration: line-through; color: var(--muted); }
.cut-mark {
  position: absolute; top: calc(50% + 40px); right: calc(50% - 27px); display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px; white-space: nowrap; font: 700 0.74rem/1 var(--sans); letter-spacing: 0.02em;
  color: var(--green-ink); background: color-mix(in srgb, var(--green) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
}
.cut-mark .bi { width: 15px; height: 15px; }
.pathviz-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.94rem; }
.pathviz-foot p { margin: 0; max-width: 70ch; }
.pathviz-foot strong { color: var(--ink); }

/* Tall layout, when the diagram's own box is narrow (a phone, or the
   article column): the line runs down, stations left, words right. */
.pv-box { container: pvbox / inline-size; }
@container pvbox (max-width: 820px) {
  .pv { aspect-ratio: 340 / 600; max-width: 360px; margin: 0 auto 24px; }
  .prose .pv, .kb-sec .pv { max-width: 320px; margin: 0; }
  .pv-wide { display: none; }
  .pv-tall { display: block; }
  .pathviz .node { width: max-content; max-width: 220px; grid-template-columns: 56px auto; justify-items: start; column-gap: 14px; row-gap: 0; text-align: left; align-items: center; transform: translate(-28px, -28px); }
  .pathviz .node .node-dot { grid-row: 1 / span 3; margin: 0; }
  .pathviz .node > :not(.node-dot) { grid-column: 2; }
  .pathviz .goal { grid-template-columns: 68px auto; transform: translate(-34px, -34px); }
  .pathviz .n1 { left: 12.94%; top: 7.33%; }
  .pathviz .n2 { left: 30.59%; top: 33.33%; }
  .pathviz .n3 { left: 12.94%; top: 61.67%; }
  .pathviz .goal { left: 30.59%; top: 90%; }
  .pathviz .edge { transform: translate(0, -50%); }
  .pathviz .e1 { left: 35.29%; top: 22.5%; }
  .pathviz .e2 { left: 35.29%; top: 45%; }
  .pathviz .e3 { left: 35.29%; top: 75%; }
  .cut-mark { top: calc(50% + 22px); left: 0; right: auto; }
}

/* The breach, as you scroll: the path lights hop by hop to Tier Zero, which
   turns red; the cut lands on AdminTo, the path drains back to the cut, and
   Tier Zero turns green. Without scroll-driven animation, or with reduced
   motion, the resting state above shows the outcome. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pv-story { view-timeline: --pv block; }
    .pv-story .pv-lit, .pv-story .node-dot, .pv-story .st-bad, .pv-story .st-good, .pv-story .cut-mark,
    .pv-story .edge.cut .edge-label, .pv-story .pv-base.b2, .pv-story .pv-gap {
      animation-duration: auto; animation-timeline: --pv; animation-fill-mode: both; animation-timing-function: linear;
    }
    .pv-story .n1 .node-dot { animation-name: pv-reach; animation-range: cover 18% cover 20%; }
    .pv-story .pv-lit.l1 { animation-name: pv-draw; animation-range: cover 19% cover 25%; }
    .pv-story .n2 .node-dot { animation-name: pv-reach; animation-range: cover 24.5% cover 26%; }
    .pv-story .pv-lit.l2 { animation-name: pv-run; animation-range: cover 26% cover 47%; }
    .pv-story .n3 .node-dot { animation-name: pv-pass; animation-range: cover 31.5% cover 50%; }
    .pv-story .pv-lit.l3 { animation-name: pv-run-late; animation-range: cover 33% cover 50%; }
    .pv-story .goal .node-dot { animation-name: pv-goal; animation-range: cover 38% cover 53%; }
    .pv-story .st-bad { animation-name: pv-bad; animation-range: cover 38% cover 53%; }
    .pv-story .st-good { animation-name: pv-in; animation-range: cover 50% cover 53%; }
    .pv-story .cut-mark { animation-name: pv-pop; animation-range: cover 42% cover 45%; }
    .pv-story .edge.cut .edge-label { animation-name: pv-strike; animation-range: cover 43% cover 45%; }
    .pv-story .pv-base.b2 { animation-name: pv-out; animation-range: cover 45% cover 47%; }
    .pv-story .pv-gap { animation-name: pv-in; animation-range: cover 45% cover 47%; }
    @keyframes pv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    @keyframes pv-run { 0% { stroke-dashoffset: 1; opacity: 1; } 28.6% { stroke-dashoffset: 0; } 90.5% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
    @keyframes pv-run-late { 0% { stroke-dashoffset: 1; opacity: 1; } 29% { stroke-dashoffset: 0; } 82% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
    @keyframes pv-reach { from { border-color: var(--line-2); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6); } }
    @keyframes pv-pass {
      0%, 100% { border-color: var(--line-2); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6); }
      8%, 81% { border-color: var(--violet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 16%, transparent), 0 10px 24px -14px rgba(0, 0, 0, 0.6); }
    }
    @keyframes pv-goal {
      0% { border-color: var(--line-2); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5); }
      13%, 80% { border-color: var(--critical); box-shadow: 0 0 0 6px color-mix(in srgb, var(--critical) 20%, transparent), 0 16px 44px -10px color-mix(in srgb, var(--critical) 50%, transparent); }
    }
    @keyframes pv-bad { 0% { opacity: 0; } 13%, 80% { opacity: 1; } 90%, 100% { opacity: 0; } }
    @keyframes pv-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes pv-out { from { opacity: 1; } to { opacity: 0; } }
    @keyframes pv-pop { from { opacity: 0; transform: translateY(6px) scale(0.7); } to { opacity: 1; transform: none; } }
    @keyframes pv-strike { from { text-decoration-color: transparent; color: var(--ink-2); } }
  }
}

/* ---------- Steps / flows ---------- */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.steps > li { position: relative; padding: 22px 22px 22px; border-radius: var(--radius); background: color-mix(in srgb, var(--card) 80%, transparent); border: 1px solid var(--line); }
.steps > li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero); display: block; margin-bottom: 12px;
  font: 700 0.82rem/1 var(--mono); color: var(--accent); letter-spacing: 0.06em;
}
.steps h3 { font-size: 1.08rem; margin-bottom: 6px; }
.steps p { color: var(--ink-2); font-size: 0.94rem; margin: 0; }
.steps a { font-weight: 600; }

.flow { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.flow::before { content: ""; position: absolute; left: 23px; top: 26px; bottom: 26px; width: 2px; background: linear-gradient(180deg, var(--violet), var(--green)); opacity: 0.55; }
.flow > li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding: 0 0 30px; }
.flow > li:last-child { padding-bottom: 0; }
.flow-ic {
  position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line-2); color: var(--accent);
}
.flow-ic .ic { width: 22px; height: 22px; }
.flow h3 { font-size: 1.2rem; margin: 10px 0 8px; }
.flow p { color: var(--ink-2); margin-bottom: 10px; }
.flow .links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.94rem; }
.flow .links a { font-weight: 600; }
.flow .code { margin: 12px 0 6px; }

/* ---------- Split / media ---------- */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.split.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.split.flip > :first-child { order: 2; }
.split h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.12; margin-bottom: 18px; }
.split p { color: var(--ink-2); }
@media (max-width: 860px) { .split, .split.flip { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }
.checks { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 30px; color: var(--ink-2); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 6px;
  background: color-mix(in srgb, var(--green) 16%, transparent) no-repeat center/12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ce46b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .checks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7a33' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.checks strong { color: var(--ink); }

figure.shot { margin: 28px 0; }
.shot-frame {
  position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.02);
}
:root[data-theme="light"] .shot-frame { box-shadow: 0 24px 60px -28px rgba(30, 20, 70, 0.35); }
.shot-dots { display: flex; gap: 7px; padding: 11px 14px; background: var(--card-2); border-bottom: 1px solid var(--line); }
.shot-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
.shot-dots i:first-child { background: color-mix(in srgb, var(--violet) 70%, var(--line-2)); }
.shot-dots i:last-child { background: color-mix(in srgb, var(--green) 60%, var(--line-2)); }
.shot img { display: block; width: 100%; height: auto; }
figure.shot figcaption { margin-top: 12px; color: var(--muted); font-size: 0.88rem; text-align: center; }
.shot.tilt .shot-frame { transform: perspective(1600px) rotateY(-5deg) rotateX(2deg); transition: transform 0.5s; }
.shot.tilt:hover .shot-frame { transform: none; }
@media (max-width: 860px) { .shot.tilt .shot-frame { transform: none; } }

/* Terminal card */
.terminal { border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: #0a0d13; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.75); }
.terminal .shot-dots { background: #121825; border-color: #1f2838; }
.terminal pre { margin: 0; padding: 18px 20px 22px; overflow-x: auto; font: 0.88rem/1.75 var(--mono); color: #d7deea; }
.terminal .p { color: #7ce46b; user-select: none; }
.terminal .c { color: #7d8aa0; }
.terminal .o { color: #b48aff; }

/* ---------- Page hero (index pages, hubs) ---------- */
.page-hero { padding: clamp(40px, 7vw, 84px) 0 clamp(24px, 4vw, 40px); }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.08; margin-bottom: 18px; max-width: 22ch; }
.page-hero .lead { margin-bottom: 0; }
.hub-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.hub-badge {
  display: grid; place-items: center; width: 132px; height: 132px; border-radius: 36px; color: #fff;
  background: linear-gradient(140deg, #8b3dff, #4c00a4 70%); box-shadow: 0 0 0 10px color-mix(in srgb, var(--violet) 12%, transparent), 0 30px 60px -20px rgba(110, 30, 230, 0.8);
}
.hub-badge .ic { width: 58px; height: 58px; stroke-width: 1.5; }
@media (max-width: 760px) { .hub-hero { grid-template-columns: 1fr; } .hub-badge { width: 84px; height: 84px; border-radius: 24px; order: -1; } .hub-badge .ic { width: 38px; height: 38px; } }
.hub-hero .cta-row { margin-top: 26px; }
/* Audience pages: a small scene (scene.js + scene-*.js) on the right of the
   header, on the same canvas as the home hero, behind the whole section. */
.page-hero.has-scene { position: relative; }
.page-hero.is-live { isolation: isolate; }
.page-hero.is-live .hero-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hub-hero.has-scene { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 24px 40px; }
.hub-art { position: relative; display: grid; place-items: center; width: 100%; max-width: 500px; aspect-ratio: 5 / 4; justify-self: end; }
.hub-art::before {
  content: ""; position: absolute; inset: 10% 6%; border-radius: 50%; opacity: 0.6;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--violet) 26%, transparent), transparent 70%),
              radial-gradient(closest-side at 72% 72%, color-mix(in srgb, var(--green) 16%, transparent), transparent 70%);
  filter: blur(18px);
}
.hub-art > * { grid-area: 1 / 1; }
.hub-art.is-live .hub-badge { display: none; }
@media (max-width: 760px) {
  .hub-hero.has-scene { grid-template-columns: 1fr; gap: 8px; }
  .hub-art { order: -1; justify-self: stretch; max-width: 460px; margin: -12px auto 0; }
}

.story { font-size: 1.08rem; color: var(--ink-2); max-width: 72ch; }
.story p:first-child::first-letter { font-family: var(--display); }
.pullquote {
  margin: 0; padding: 26px 30px; border-radius: var(--radius); font: 600 clamp(1.2rem, 2.2vw, 1.5rem)/1.4 var(--display); color: var(--ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 14%, transparent), color-mix(in srgb, var(--green) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--violet) 30%, var(--line));
}

/* ---------- Docs / KB layout ---------- */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 56px; padding-top: 34px; padding-bottom: 80px; }
.doc-layout.has-side { grid-template-columns: 250px minmax(0, 1fr) 210px; gap: 44px; }
.doc { min-width: 0; max-width: 800px; }
.doc-aside { position: relative; }
.side { position: relative; }
.side-details { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding-right: 6px; }
.side-details > summary { display: none; }
.side-group { margin-bottom: 22px; }
.side-group h2 { font: 700 0.7rem/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px 10px; }
.side-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.side-group a {
  display: block; padding: 6px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 0.9rem; line-height: 1.35;
}
.side-group a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.side-group a[aria-current="page"] { color: var(--ink); background: var(--hl); box-shadow: inset 2px 0 0 var(--violet); font-weight: 600; }
.sid { font: 600 0.74rem/1 var(--mono); color: var(--accent); margin-right: 4px; }
.toc { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: thin; }
.toc h2 { font: 700 0.7rem/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.toc ol { list-style: none; margin: 0; padding: 0 0 0 1px; border-left: 1px solid var(--line); }
.toc li a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; font-size: 0.86rem; line-height: 1.35; }
.toc li.l3 a { padding-left: 26px; font-size: 0.82rem; }
.toc li a:hover { color: var(--ink); }
.toc li a.active { color: var(--ink); border-left-color: var(--violet); }
.toc-mobile { display: none; margin: 0 0 26px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--card) 80%, transparent); }
.toc-mobile > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; font-weight: 600; list-style: none; }
.toc-mobile > summary::-webkit-details-marker { display: none; }
.toc-mobile .toc { position: static; max-height: none; padding: 0 16px 14px; }
.toc-mobile .toc h2 { display: none; }
@media (max-width: 1200px) {
  .doc-layout, .doc-layout.has-side { grid-template-columns: 240px minmax(0, 1fr); }
  .doc-layout:not(.has-side) { grid-template-columns: minmax(0, 1fr); }
  .doc-aside { display: none; }
  .toc-mobile { display: block; }
}
@media (max-width: 900px) {
  .doc-layout.has-side { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 18px; }
  .side-details { position: static; max-height: none; overflow: visible; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--card) 80%, transparent); padding: 0; }
  .side-details > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; font-weight: 600; list-style: none; }
  .side-details > summary::-webkit-details-marker { display: none; }
  .side-details > summary span { flex: 1; }
  .side-details[open] > summary { border-bottom: 1px solid var(--line); }
  .side-nav { padding: 14px 8px 4px; }
}
.toc-mobile[open] > summary .ic, .side-details[open] > summary .ic-chevron-down { transform: rotate(180deg); }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0 0 18px; padding: 0; font-size: 0.84rem; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin: 0 8px; opacity: 0.6; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-2); }
.doc-head { margin-bottom: 30px; }
.doc-head h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.12; margin-bottom: 18px; }
.doc-head .lead { margin-bottom: 0; }

/* Prose */
.prose, .kb-sec { font-size: 1.01rem; line-height: 1.72; color: var(--ink-2); overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose h2, .kb-sec > h2 {
  position: relative; font-size: 1.62rem; color: var(--ink); margin: 2.8rem 0 1rem; padding-top: 0.2rem;
}
.prose h3, .kb-sec h3 { font-size: 1.2rem; color: var(--ink); margin: 2rem 0 0.7rem; }
.prose h4, .kb-sec h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 1.6rem 0 0.5rem; }
.prose strong, .kb-sec strong { color: var(--ink); font-weight: 650; }
.prose ul, .prose ol, .kb-sec ul, .kb-sec ol { padding-left: 1.4em; margin: 0 0 1.1rem; }
.prose li, .kb-sec li { margin: 0.35rem 0; }
.prose li > ul, .prose li > ol, .kb-sec li > ul, .kb-sec li > ol { margin: 0.3rem 0; }
.prose li::marker, .kb-sec li::marker { color: var(--muted); }
.prose ol > li::marker, .kb-sec ol > li::marker { font-family: var(--mono); font-size: 0.86em; color: var(--accent); }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.4rem 0; }
.prose blockquote, .kb-sec blockquote {
  margin: 1.4rem 0; padding: 14px 20px; border-left: 3px solid var(--violet); border-radius: 0 12px 12px 0;
  background: var(--hl); color: var(--ink-2);
}
.prose blockquote p:last-child { margin: 0; }
:not(pre) > code {
  font-size: 0.86em; padding: 0.14em 0.42em; border-radius: 6px; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  overflow-wrap: anywhere;
}
.code { position: relative; margin: 1.2rem 0 1.4rem; border-radius: 12px; background: var(--code-bg); border: 1px solid var(--line); }
.code pre { margin: 0; padding: 18px 20px; overflow-x: auto; font-size: 0.86rem; line-height: 1.65; color: var(--ink); tab-size: 4; scrollbar-width: thin; }
.code-lang + pre { padding-top: 34px; }
.code-lang { position: absolute; top: 9px; left: 20px; font: 700 0.64rem/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.code .c { color: var(--muted); font-style: italic; }
.copy-btn {
  position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px;
  font: 600 0.74rem/1 var(--sans); color: var(--muted); background: var(--card); border: 1px solid var(--line); cursor: pointer; opacity: 0;
  transition: opacity 0.15s;
}
.code:hover .copy-btn, .copy-btn:focus-visible, .copy-btn.done { opacity: 1; }
.copy-btn .ic { width: 14px; height: 14px; }
.copy-btn.done { color: var(--green-ink); border-color: color-mix(in srgb, var(--green) 50%, transparent); }
@media (hover: none) { .copy-btn { opacity: 1; } }
.table-wrap { margin: 1.4rem 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--card) 70%, transparent); scrollbar-width: thin; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.9rem; line-height: 1.55; }
.table-wrap th { text-align: left; padding: 11px 14px; font: 700 0.72rem/1.3 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: color-mix(in srgb, var(--card-2) 80%, transparent); border-bottom: 1px solid var(--line); }
.table-wrap td { padding: 11px 14px; vertical-align: top; border-top: 1px solid var(--line); color: var(--ink-2); min-width: 120px; }
.table-wrap tr:first-child td { border-top: 0; }
.table-wrap td:first-child { color: var(--ink); }
.mark { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; margin-right: 4px; border-radius: 6px; font-weight: 700; font-size: 0.85em; vertical-align: -0.1em; }
.mark.yes { color: var(--green-ink); background: color-mix(in srgb, var(--green) 16%, transparent); }
.mark.part { color: var(--medium); background: color-mix(in srgb, var(--medium) 16%, transparent); }
.mark.no { color: var(--critical); background: color-mix(in srgb, var(--critical) 14%, transparent); }
.repo-ref { border-bottom: 1px dotted var(--muted); }
a.ext::after { content: "↗"; display: inline-block; margin-left: 2px; font-size: 0.78em; opacity: 0.6; text-decoration: none; }
.code a.ext::after, .chip.attck::after, .refs a.ext::after { content: none; }
/* Task tabs (build.py task_tabs, site.js): "In the app" / "On the command line".
   Until site.js runs, both panels show under their own headings. */
.tabs { margin: 1.4rem 0 1.8rem; }
.tab-list { display: none; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
.tabs-on > .tab-list { display: flex; }
.tabs-on > .tab-panel > .tab-heading, .tabs-on > .tab-panel.is-off { display: none; }
.tab-list [role="tab"] {
  position: relative; margin: 0 0 -1px; padding: 9px 14px 10px; border: 0; border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0; background: none; color: var(--muted); cursor: pointer;
  font: 600 0.95rem/1.2 var(--display); letter-spacing: 0.01em;
}
.tab-list [role="tab"]:hover { color: var(--ink); background: var(--hl); }
.tab-list [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--violet); }
.tab-list [role="tab"]:focus-visible { outline-offset: -2px; }
.tab-panel:focus-visible { outline-offset: 6px; }
.tab-panel > :last-child { margin-bottom: 0; }
.doc-source { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }

.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; }
.pn { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.94rem; line-height: 1.35; }
.pn span { color: var(--muted); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.pn.next { text-align: right; }
.pn:hover { border-color: color-mix(in srgb, var(--violet) 60%, var(--line)); }
@media (max-width: 600px) { .prevnext { grid-template-columns: 1fr; } .pn.next { text-align: left; } }

/* ---------- KB article ---------- */
.kb-head { margin-bottom: 34px; }
.kb-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.rid-badge, .cat-badge, .group-badge {
  display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; text-decoration: none;
}
.rid-badge { font-family: var(--mono); color: #fff; background: linear-gradient(135deg, #7a1ff0, #5a00b8); }
.cat-badge.is-path { color: var(--accent); background: var(--hl); }
.cat-badge.is-hyg { color: var(--medium); background: color-mix(in srgb, var(--medium) 14%, transparent); }
.group-badge { color: var(--ink-2); border: 1px solid var(--line-2); }
.group-badge:hover { color: var(--ink); border-color: var(--violet); }
.kb-head h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.12; margin-bottom: 18px; }
.kb-head .lead { margin-bottom: 24px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1px; margin: 0 0 18px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.facts > div { padding: 13px 16px; background: color-mix(in srgb, var(--card) 96%, transparent); }
.facts dt { font: 700 0.68rem/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.facts dd { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.chips-label { font: 700 0.68rem/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--card) 70%, transparent);
}
.chip:hover { color: var(--ink); border-color: var(--violet); }
.chip.attck { font-family: var(--mono); color: var(--accent); }
.callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 22px 24px; border-radius: var(--radius); }
.callout > .ic { width: 24px; height: 24px; margin-top: 2px; }
.callout p:last-child { margin-bottom: 0; }
.callout.plain {
  position: relative; color: var(--ink); font-size: 1.06rem; line-height: 1.7;
  background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 12%, var(--card)), color-mix(in srgb, var(--green) 5%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--violet) 32%, var(--line));
}
.callout.plain > .ic { color: var(--green-ink); }
.callout.plain p { color: var(--ink-2); }
.callout.note { background: var(--hl); border: 1px solid color-mix(in srgb, var(--violet) 25%, var(--line)); color: var(--ink-2); }
.callout.note > .ic { color: var(--accent); }
.callout.warn { background: color-mix(in srgb, var(--high) 9%, transparent); border: 1px solid color-mix(in srgb, var(--high) 30%, var(--line)); color: var(--ink-2); }
.callout.warn > .ic { color: var(--high); }
.callout.good { background: color-mix(in srgb, var(--green) 8%, transparent); border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line)); color: var(--ink-2); }
.callout.good > .ic { color: var(--green-ink); }
.kb-sec { scroll-margin-top: 90px; }
.kb-sec:first-child > h2, .kb-plain > h2 { margin-top: 0; }
.kb-sec > h2::before {
  content: ""; display: block; width: 28px; height: 3px; border-radius: 3px; margin-bottom: 14px;
  background: linear-gradient(90deg, var(--violet), var(--green));
}
.refs { padding-left: 1.4em; }
.refs li { margin: 0.5rem 0; }
.refs a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.ref-host { display: block; color: var(--muted); font-size: 0.8rem; font-family: var(--mono); }

/* ---------- KB index ---------- */
.index-body { padding-bottom: 80px; }
.kb-group { margin: 0 0 64px; scroll-margin-top: 90px; }
.kb-group-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 22px; max-width: 820px; }
.kb-group-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--accent); background: var(--hl); border: 1px solid color-mix(in srgb, var(--violet) 25%, transparent); }
.kb-group-icon .ic { width: 22px; height: 22px; }
.kb-group h2 { font-size: 1.6rem; line-height: 1.15; margin: 2px 0 8px; }
.kb-group-head p { margin: 0; color: var(--ink-2); }
.kb-rules-intro { max-width: 820px; margin: 0 0 40px; padding-top: 8px; border-top: 1px solid var(--line); }
.kb-rules-intro .kicker { font-size: 0.76rem; margin-top: 40px; }
.kb-rules-intro p { color: var(--ink-2); font-size: 1.04rem; }
.rule-grid, .concept-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rule-card, .concept-card {
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 18px 18px 16px; border-radius: 14px; color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 80%, transparent); transition: transform 0.18s, border-color 0.18s;
}
.rule-card:hover, .concept-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--violet) 55%, var(--line)); }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rc-top .bi { width: 22px; height: 22px; }
.rc-id { font: 700 0.78rem/1 var(--mono); color: var(--accent); }
.rc-title { font: 600 1.02rem/1.35 var(--display); flex: 1; }
.rc-cat { align-self: flex-start; font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.rc-cat.is-path { color: var(--accent); background: var(--hl); }
.rc-cat.is-hyg { color: var(--medium); background: color-mix(in srgb, var(--medium) 13%, transparent); }
.cc-title { font: 600 1.1rem/1.3 var(--display); }
.cc-desc { color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; }
.rid { font-family: var(--mono); font-size: 0.9em; font-weight: 600; white-space: nowrap; }

/* ---------- Glossary ---------- */
.glossary { margin: 1.6rem 0 0; display: grid; gap: 12px; }
.gl-entry { padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 75%, transparent); scroll-margin-top: 90px; }
.gl-entry dt { font: 600 1.12rem/1.3 var(--display); color: var(--ink); margin-bottom: 6px; }
.gl-entry dd { margin: 0; }
.gl-entry dd p:last-child { margin: 0; }
.gl-entry:target { border-color: var(--violet); box-shadow: 0 0 0 3px var(--hl); }

/* ---------- Scorecard, FAQ, stats ---------- */
.scorecard { display: grid; gap: 1px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.score-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 18px; padding: 18px 22px; background: color-mix(in srgb, var(--card) 96%, transparent); align-items: baseline; }
.score-row.head { background: color-mix(in srgb, var(--card-2) 96%, transparent); font: 700 0.7rem/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-top: 13px; padding-bottom: 13px; }
.score-row strong { font: 600 1.04rem/1.3 var(--display); color: var(--ink); }
.score-row .target { font: 600 1.02rem/1.3 var(--display); color: var(--green-ink); }
.score-row p { margin: 0; color: var(--ink-2); font-size: 0.94rem; }
@media (max-width: 760px) { .score-row { grid-template-columns: 1fr; gap: 4px; } .score-row.head { display: none; } }
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 80%, transparent); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font: 600 1.06rem/1.35 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--muted); transition: transform 0.2s; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq .a { padding: 0 22px 18px; color: var(--ink-2); }
.faq .a p:last-child { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.stat { padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 80%, transparent); }
.stat b { display: block; font: 600 2.3rem/1.05 var(--display); color: var(--ink); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.stat b.g { color: var(--green-ink); } .stat b.v { color: var(--accent); }
.stat span { color: var(--ink-2); font-size: 0.92rem; }

/* Meters: exposure and Tier Zero protected bars */
.meters { display: grid; gap: 16px; }
.meter { display: grid; gap: 8px; }
.meter-top { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; color: var(--ink-2); }
.meter-top b { font-family: var(--display); color: var(--ink); }
.meter-bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.meter-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--green)); }
.meter-bar i.bad { background: linear-gradient(90deg, var(--high), var(--critical)); }
.w-37 { width: 37%; } .w-40 { width: 40%; } .w-19 { width: 19%; } .w-4 { width: 4%; } .w-2 { width: 2%; } .w-90 { width: 90%; } .w-93 { width: 93%; } .w-95 { width: 95%; } .w-98 { width: 98%; } .w-100 { width: 100%; }

/* Download */
.dl-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.dl-card h3 { display: flex; align-items: center; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; color: var(--accent); background: var(--hl); }
.pill.green { color: var(--green-ink); background: color-mix(in srgb, var(--green) 13%, transparent); }

/* CTA banner */
.cta-banner {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center;
  padding: clamp(28px, 5vw, 52px); border-radius: 24px; border: 1px solid color-mix(in srgb, var(--violet) 35%, var(--line));
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--violet) 26%, transparent), transparent 55%),
              radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--green) 16%, transparent), transparent 55%),
              color-mix(in srgb, var(--card) 85%, transparent);
}
.cta-banner h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.12; margin-bottom: 16px; }
.cta-banner p { margin: 0; color: var(--ink-2); max-width: 60ch; }
@media (max-width: 760px) { .cta-banner { grid-template-columns: 1fr; } }

/* ---------- Brand page ---------- */
.prose .brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0 0 1.4rem; }
.brand-grid li { margin: 0; }
.brand-grid p { margin: 8px 0 0; font-size: 0.93rem; }
.brand-tile { display: grid; place-items: center; height: 150px; padding: 20px; border-radius: 14px; border: 1px solid var(--line); }
.brand-tile img { max-width: 100%; height: auto; max-height: 110px; }
.brand-tile.on-dark { background: #0b0e14; }
.brand-tile.on-light { background: #f7f7f7; box-shadow: inset 0 0 0 1px rgba(11, 14, 20, 0.05), 0 12px 30px -22px rgba(30, 20, 60, 0.4); }
.prose .brand-dl { display: flex; gap: 14px; margin-top: 2px; font-weight: 600; }
.prose .brand-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; list-style: none; padding: 0; }
.brand-swatches li { white-space: nowrap; display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.93rem; }
.brand-swatches strong { margin-right: 2px; }
.sw { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-2); }
.sw-violet { background: #9d5cff; } .sw-deep { background: #6b00d6; } .sw-green { background: #7ce46b; }
.sw-forest { background: #1f8a3a; } .sw-navy { background: #0b0e14; } .sw-white { background: #f7f7f7; }
@media (max-width: 560px) { .prose .brand-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { position: relative; z-index: 1; margin-top: 40px; padding: 56px 0 30px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 70%, transparent); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-brand img { height: 38px; width: auto; margin-bottom: 14px; }
.footer-tag { font: 600 0.8rem/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.site-footer h2 { font: 700 0.72rem/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 6px 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer nav a, .footer-gh { color: var(--ink-2); text-decoration: none; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 8px; }
.footer-gh .ic { width: 16px; height: 16px; }
.site-footer nav a:hover { color: var(--ink); text-decoration: underline; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.84rem; }
.footer-base p { margin: 0; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ---------- Search ---------- */
.search-dialog {
  width: min(680px, calc(100vw - 24px)); max-height: min(640px, calc(100vh - 80px)); margin: 10vh auto auto; padding: 0;
  border-radius: 18px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.7);
  overflow: hidden; flex-direction: column;
}
.search-dialog[open] { display: flex; }
.search-dialog::backdrop { background: rgba(5, 7, 12, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.search-box { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.search-box .ic { color: var(--muted); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 1.1rem/1.4 var(--sans); padding: 6px 0; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-close { border: 1px solid var(--line-2); background: var(--bg); color: var(--muted); border-radius: 8px; font: 600 0.74rem/1 var(--sans); padding: 6px 8px; cursor: pointer; }
.search-results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; }
.search-results li a { display: grid; gap: 3px; padding: 11px 14px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.search-results li a .r-top { display: flex; align-items: baseline; gap: 10px; }
.search-results li a .r-title { font-weight: 650; flex: 1; }
.search-results li a .r-sec { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.search-results li a .r-snip { font-size: 0.86rem; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-results li a[aria-selected="true"], .search-results li a:hover { background: var(--hl); }
.search-results mark { background: color-mix(in srgb, var(--violet) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-results .empty { padding: 26px 14px; color: var(--muted); text-align: center; }
.search-foot { display: flex; gap: 18px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--muted); }
@media (max-width: 600px) { .search-foot { display: none; } .search-dialog { margin-top: 12px; max-height: calc(100vh - 24px); } }
.search-page .search-box { border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); }
.search-page .search-results { padding: 14px 0; }

/* 404 */
.notfound { text-align: center; padding: clamp(60px, 12vw, 140px) 0; }
.notfound .code404 { font: 600 clamp(5rem, 16vw, 9rem)/1 var(--display); margin-bottom: 12px; }
.notfound .cta-row { justify-content: center; margin-top: 28px; }

/* ---------- Small page-specific pieces ---------- */
.split .steps { grid-template-columns: 1fr; gap: 10px; margin: 22px 0 18px; }
.split .steps > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding: 16px 18px; }
.split .steps > li::before { grid-row: span 2; margin: 3px 0 0; }
.split .steps h3 { margin-bottom: 2px; }
.kb-more { margin-top: 26px; gap: 20px; }
.dl-cta { margin-top: 22px; }
.dl-card .pill { margin-bottom: 14px; }
.dl-card h3 .ic { color: var(--accent); }
.dl-card .checks { margin-bottom: 0; }
.center-lead { margin-left: auto; margin-right: auto; }
.journey { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.journey a { display: inline-block; margin-top: 6px; }
.doc-links { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.doc-links a { font-weight: 600; text-decoration: none; }
.doc-links a:hover { text-decoration: underline; }
.docs-groups .card { scroll-margin-top: 90px; }
.links-inline { line-height: 2; }
.flow .links .rid { padding: 2px 8px; border-radius: 6px; background: var(--hl); text-decoration: none; }
.flow .links .rid:hover { text-decoration: underline; }
.search-page .search-box { margin-top: 26px; max-width: 760px; }
.search-page .search-results { max-width: 760px; }
.search-page .search-results li a { padding: 14px 16px; }
.split > .card h3 { margin-bottom: 4px; }
.story p { margin-bottom: 1.1rem; }
.page-hero .crumbs ol { margin-bottom: 22px; }

/* ---------- Refinements ---------- */
.card .meters { margin-top: 20px; }
.card + .muted, .grid + .muted { margin-top: 18px; }
.split.top { align-items: start; }
.split > *, .hero-grid > *, .flow > li > div { min-width: 0; }
.table-wrap td:first-child code { white-space: nowrap; }
.meters.card { margin: 1.4rem 0; }
.meters.card p { margin: 4px 0 0; }

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .glow, .side, .doc-aside, .toc-mobile, .copy-btn, .search-dialog, .prevnext, .cta-row { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .doc-layout, .doc-layout.has-side { display: block; padding: 0; }
  a { color: #000; }
  .card, .score-row, .faq details { break-inside: avoid; }
  .faq details:not([open]) .a { display: block; }
}

/* ---------- Brand icons (pw-*, build/brand_icons.py) ----------
   Siblings of the Crown W: gradient node paths, violet nodes, a green jewel.
   Colours come from these variables so one inline SVG follows the theme.
   The mark's glow is for large icons in dark mode only; small icons in
   buttons, pills and navigation take the text colour. */
.bi { --bi-a: #9d5cff; --bi-b: #7ce46b; --bi-i: #f7f7f7; flex: none; overflow: visible; }
:root[data-theme="light"] .bi { --bi-a: #6b00d6; --bi-b: #1f8a3a; --bi-i: #0b0e14; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .bi { --bi-a: #6b00d6; --bi-b: #1f8a3a; --bi-i: #0b0e14; }
  :root:not([data-theme]) .bi .bi-g { filter: none; }
}
:root[data-theme="light"] .bi .bi-g, :not(.card-icon.brand):not(.hub-badge) > .bi .bi-g { filter: none; }
.bi .bi-sa { stop-color: var(--bi-a); }
.bi .bi-sb { stop-color: var(--bi-b); }
.bi .bi-n { fill: var(--bi-a); }
.bi .bi-j { fill: var(--bi-b); }
.bi .bi-i { fill: var(--bi-i); }
.bi .bi-is { stroke: var(--bi-i); }
/* :root lifts these to the light palette's specificity, so a primary
   button's icon never turns deep violet on violet. */
:root .btn .bi, :root .more .bi, :root .cut-mark .bi, :root .side-details summary .bi, :root .search-btn .bi, :root .icon-btn .bi {
  --bi-a: currentColor; --bi-b: currentColor; --bi-i: currentColor;
}
.card-icon .bi { width: 28px; height: 28px; }
.node-dot .bi { width: 34px; height: 34px; }
.flow-ic .bi, .kb-group-icon .bi { width: 28px; height: 28px; }
.hero-facts .bi { width: 18px; height: 18px; }
.callout > .bi { width: 26px; height: 26px; }
.card-icon.brand { width: auto; height: auto; align-self: flex-start; justify-self: start; margin-bottom: 16px; background: none; border: 0; border-radius: 0; }
.card-icon.brand .bi { width: 52px; height: 52px; }
.card-icon.brand.sm { margin-bottom: 12px; }
.card-icon.brand.sm .bi { width: 40px; height: 40px; }
.hub-badge.brand {
  color: inherit; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--violet) 16%, var(--card)), var(--card) 72%);
  border: 1px solid color-mix(in srgb, var(--violet) 34%, var(--line));
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--violet) 8%, transparent), 0 30px 60px -24px color-mix(in srgb, var(--violet) 55%, transparent);
}
.hub-badge.brand .bi { width: 76px; height: 76px; }
@media (max-width: 760px) { .hub-badge.brand .bi { width: 50px; height: 50px; } }
/* Lists with an icon per item instead of the check */
.checks.icons li { padding-left: 34px; }
.checks.icons li::before { display: none; }
.checks.icons li > .bi { position: absolute; left: 0; top: 2px; width: 22px; height: 22px; }
.steps > li > .bi { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; }
@media (prefers-reduced-motion: no-preference) {
  .bi .bi-j { transform-box: fill-box; transform-origin: center; transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .card:hover .bi .bi-j, .rule-card:hover .bi .bi-j { transform: scale(1.2); }
  .card:hover .bi .bi-p, .rule-card:hover .bi .bi-p { animation: bi-draw 0.7s cubic-bezier(0.4, 0, 0.2, 1) both; }
  @keyframes bi-draw { from { stroke-dasharray: 1 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1 1; stroke-dashoffset: 0; } }
}

/* {{new}}: a superscript asterisk on very new features, and the note it points to */
.new-mark-wrap { font-size: 0.7em; line-height: 0; vertical-align: super; margin-left: 1px; }
.new-mark { color: var(--accent); font-weight: 700; text-decoration: none; padding: 0 1px; border-radius: 4px; }
.new-mark:hover, .new-mark:focus-visible { background: var(--hl); text-decoration: none; }
.new-note { margin: 32px 0 48px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; line-height: 1.55; max-width: 72ch; }
.new-note strong { color: var(--ink-2); font-weight: 600; }
.new-note > span { color: var(--accent); font-weight: 700; }
.new-note:target { background: var(--hl); border-radius: 8px; padding: 14px 16px; }
.doc .new-note { margin: 40px 0 0; }

/* ---------- Home: "What Pathwarden does" as a route ----------
   Four stations on one line, Find, Fix, Prove, Keep, ending on the green
   jewel. Numbered at every width; on wide screens the line runs above the
   cards and fills violet to green as it scrolls in. */
.value-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); counter-reset: stop; }
.value-grid > .card { counter-increment: stop; padding: 28px 26px; }
.value-grid .card-icon { margin: 0 0 16px; }
.value-grid .card h3 { margin: 0 0 10px; font-size: 1.3rem; line-height: 1.15; }
.value-grid > .card h3::before {
  content: counter(stop, decimal-leading-zero); display: block; margin-bottom: 8px;
  font: 700 0.74rem/1 var(--mono); letter-spacing: 0.12em; color: var(--accent);
}
.value-grid > .card:last-child h3::before { color: var(--green-ink); }
@media (max-width: 600px) {
  /* Phones: the icon sits beside the number and title, not above them. */
  .value-grid > .card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 20px 18px; }
  .value-grid .card-icon { grid-row: 1; margin: 2px 0 0; }
  .value-grid .card-icon .bi { width: 38px; height: 38px; }
  .value-grid .card h3 { align-self: center; margin: 0; font-size: 1.2rem; }
  .value-grid .card p { grid-column: 1 / -1; margin-top: 10px; }
}
@media (min-width: 1100px) {
  .value-grid { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 70px; }
  .value-grid::before, .value-grid::after {
    content: ""; position: absolute; top: 40px; left: calc(12.5% - 6px); right: calc(12.5% - 6px); height: 3px; border-radius: 3px;
  }
  .value-grid::before { background: color-mix(in srgb, var(--violet) 22%, var(--line)); }
  .value-grid::after { background: linear-gradient(90deg, var(--violet), var(--violet) 55%, var(--green)); transform-origin: 0 50%; }
  .value-grid > .card::before {
    content: ""; position: absolute; top: -38px; left: calc(50% - 9.5px); z-index: 1; width: 19px; height: 19px; border-radius: 50%;
    background: var(--bg); border: 3px solid var(--violet);
  }
  /* On the line, each station names its step: Find, Fix, Retest, Monitor.
     The step names replace the 01-04 counters at this width. */
  .value-grid > .card h3::before { display: none; }
  .value-grid > .card.glass::after {
    content: attr(data-stop); position: absolute; inset: auto; top: -68px; left: 50%; transform: translateX(-50%); z-index: 1;
    opacity: 1; -webkit-mask: none; mask: none; pointer-events: none;
    padding: 2px 10px; border-radius: 999px; background: var(--bg);
    font: 700 0.78rem/15px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  }
  .value-grid > .card.glass:last-child::after { color: var(--green-ink); }
  .value-grid > .card:last-child::before {
    width: 23px; height: 23px; top: -40px; left: calc(50% - 11.5px); border: 0; background: var(--green);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 18%, transparent), 0 0 18px color-mix(in srgb, var(--green) 60%, transparent);
  }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .value-grid { view-timeline: --route block; }
      .value-grid::after { animation: route-fill linear both; animation-timeline: --route; animation-range: entry 70% contain 30%; }
      .value-grid > .card::before { animation: stop-on linear both; animation-timeline: --route; }
      .value-grid > .card:nth-child(1)::before { animation-range: entry 60% entry 75%; }
      .value-grid > .card:nth-child(2)::before { animation-range: entry 85% entry 100%; }
      .value-grid > .card:nth-child(3)::before { animation-range: contain 6% contain 16%; }
      .value-grid > .card:nth-child(4)::before { animation-range: contain 24% contain 32%; }
      @keyframes route-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
      @keyframes stop-on { from { transform: scale(0.4); opacity: 0.3; } to { transform: none; opacity: 1; } }
    }
  }
}

/* ---------- Home: the editorial statement ---------- */
.statement { position: relative; z-index: 1; padding: clamp(64px, 10vw, 128px) 0; }
.statement::before, .statement::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--violet) 55%, transparent) 30%, color-mix(in srgb, var(--green) 50%, transparent) 70%, transparent);
}
.statement::before { top: 0; }
.statement::after { bottom: 0; }
.statement-quote { margin: 0; }
.statement-quote blockquote { margin: 0; }
.statement-quote p {
  position: relative; max-width: 20ch; margin: 0; font: 600 clamp(2rem, 5.2vw, 4rem)/1.08 var(--display); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance;
}
.statement-quote p::before {
  content: "\201C"; position: absolute; left: -0.55em; top: -0.08em; color: var(--violet); opacity: 0.9;
}
.statement-quote figcaption { margin-top: 24px; color: var(--muted); font-size: 0.9rem; }
.statement-quote figcaption a { color: inherit; }
/* Split: Lambert's observation on the left (the list half struck out),
   Pathwarden's promise on the right, divided by a violet-to-green rule. */
.statement-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.statement-then { position: relative; margin: 0; padding-right: clamp(28px, 5vw, 72px); }
.statement-then::after { content: ""; position: absolute; top: 4%; bottom: 4%; right: 0; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--violet), var(--green)); }
.statement-then blockquote { margin: 0; }
.statement-then p { margin: 0; font: 600 clamp(1.25rem, 2.4vw, 1.75rem)/1.3 var(--display); color: var(--muted); }
.statement-then s { text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--violet) 70%, transparent); }
.statement-then figcaption { margin-top: 16px; font: 400 0.88rem/1.5 var(--sans); color: var(--muted); }
.statement-then figcaption::before { content: "\2014\00a0"; }
.statement-then figcaption a { color: inherit; }
@media (max-width: 760px) {
  .statement-split { grid-template-columns: 1fr; gap: 28px; }
  .statement-then { padding: 0 0 28px; }
  .statement-then::after { top: auto; bottom: 0; left: 0; right: auto; width: 64px; height: 2px; background: linear-gradient(90deg, var(--violet), var(--green)); }
}
.statement-big {
  max-width: 22ch; margin: 0; font: 600 clamp(2rem, 5.2vw, 4rem)/1.08 var(--display); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance;
}
.statement-credit { display: block; margin-top: 14px; font: 400 0.9rem/1.5 var(--sans); color: var(--muted); }
.statement-credit a { color: inherit; }
.statement-answer {
  max-width: 46ch; margin: clamp(32px, 4vw, 48px) 0 0 auto; padding-left: 22px; border-left: 3px solid var(--green);
  font: 600 clamp(1.15rem, 2vw, 1.45rem)/1.4 var(--display); color: var(--ink-2);
}
@media (max-width: 760px) { .statement-quote p::before { position: static; display: block; height: 0.55em; } .statement-answer { margin-left: 0; } }

/* ---------- Home: the product, large ---------- */
.showcase .shot.wide { max-width: 1040px; margin: 0 auto; }
.showcase .shot.wide .shot-frame {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--violet) 22%, transparent), 0 40px 120px -40px color-mix(in srgb, var(--violet) 55%, transparent), 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}
.showcase-notes { list-style: none; max-width: 1040px; margin: 30px auto 0; padding: 0; display: grid; gap: 14px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.showcase-notes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
.showcase-notes .bi { width: 26px; height: 26px; margin-top: 1px; }
.showcase-notes strong { color: var(--ink); }

/* ---------- Home: private by design, as a statement ---------- */
.private-head { max-width: 860px; margin-bottom: clamp(28px, 4vw, 44px); }
.private-head h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.08; margin-bottom: 18px; }

/* ---------- Home on phones: shorter, nothing out of reach ----------
   Roles become a swipeable row, the knowledge base shows three rules (the
   button opens all of them), the value cards set the icon beside the title,
   and the terminal, the demo GIF and the report tour step aside: the Explore
   GIF stays as the one product moment, and every step is still in the text. */
@media (max-width: 600px) {
  .section { padding: 40px 0; }
  .section.tight { padding-top: 20px; }
  .aud-grid {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; scroll-padding: 0 var(--gutter); scrollbar-width: thin;
  }
  .aud-grid > .aud-card { flex: 0 0 80%; scroll-snap-align: start; }
  .section-home .rule-grid > li:nth-child(n+4) { display: none; }
  .private .terminal, .report-shot, #demo .shot { display: none; }
  .statement { padding: 52px 0; }
  .showcase-notes { margin-top: 22px; }
}

/* ---------- Cross-page view transitions ----------
   Same-origin navigations crossfade; the header stays put and the page title
   glides into place. Ignored where unsupported; off with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.site-header { view-transition-name: site-header; }
.glow { view-transition-name: glow; }
main h1 { view-transition-name: page-title; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
::view-transition-group(page-title) { animation-duration: 0.32s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-old(page-title), ::view-transition-new(page-title) { height: 100%; object-fit: none; object-position: left top; }