:root {
  --bg: #07090c;
  --bg-alt: #0b0f14;
  --fg: #f4f6f8;
  --primary: #ff6b35; /* RustDesk-style orange */
  --primary-hover: #e55a2b;
  --secondary: #2d333b;
  --muted: rgba(244, 246, 248, 0.7);
  --border: rgba(255, 255, 255, 0.1);
  --card-bg: rgba(255, 255, 255, 0.03);
  /* Canonical page widths (2026-05-20).
     - WIDE: dashboard/listing pages — homepage, coverage, pricing,
       blog index, proofs index, vulnerability-library, standards, etc.
     - NARROW: prose pages — blog articles, docs articles, proof articles,
       sast-false-positives, individual library entries.
     The two CSS-variable names below (--max, --max-width) are kept as
     aliases for back-compat: .container in both styles.css and concept.css
     reads one of them. Source of truth is --page-max-wide. */
  --page-max-wide: 1100px;
  --page-max-narrow: 58rem;
  --max-width: var(--page-max-wide);
  --max: var(--page-max-wide);
  /* Canonical hero h1 size: one fluid clamp for narrative + dashboard pages.
     401/404 status pages intentionally use a smaller clamp inline. */
  --h1-fluid: clamp(2.25rem, 5vw, 4rem);
  /* Canonical hero h2 size: one fluid clamp for narrative pages.
     Card-internal h2 (proofs-card, etc.) intentionally stays smaller. */
  --h2-fluid: clamp(1.5rem, 3vw, 2.25rem);
  /* Canonical responsive breakpoints (2026-05-20). Documented as tokens
     here even though @media queries cannot read CSS vars — authors
     should pick from this set rather than inventing new ones:
       --bp-phone:   480px  (small portrait phone)
       --bp-tablet:  768px  (phone/tablet boundary — prose layouts collapse)
       --bp-desktop: 900px  (small desktop — multi-column grids start; nav switches to mobile)
     Documented exceptions (element-specific fine-tunes, kept after audit):
       680px - .cta vertical stack + pricing-compare table cell shrink
       980px - .header__cta hide so header doesn't overflow between
               nav-collapse (900) and full desktop (>980)
     New authoring should prefer the three canonical values. */
  --r: 12px;
  --transition: all 0.2s ease;
}

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

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Speed badge — diagonal callout for the speed-is-the-selling-point claim.
   Brand orange gradient on dark, rotated -3deg. Used sparingly: one per
   high-traffic page (homepage, /coverage, /sast-false-positives).
   Copy is sourced from today's real measurements:
   - 0.278s per single-file scan via deployed CLI (round-trip)
   - 38-45 files/sec sustained on Juliet/OWASP benchmark corpora
   - 2,011 documented checks (current site-wide claim)
   Anchored as inline-block so it flows next to prose without breaking
   layout; .speed-badge--block lifts it into its own row. */
.speed-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff6b35 0%, #ff9534 100%);
  color: #07090c;
  font-weight: 700;
  padding: 0.65rem 1.35rem;
  border-radius: 10px;
  transform: rotate(-3deg);
  box-shadow: 0 10px 28px rgba(255, 107, 53, 0.28),
              0 2px 6px rgba(0, 0, 0, 0.35);
  letter-spacing: -0.01em;
  font-size: 0.95rem;
  line-height: 1.3;
  text-decoration: none;
  transition: transform 200ms var(--transition), box-shadow 200ms var(--transition);
}
.speed-badge:hover {
  transform: rotate(-3deg) translateY(-2px);
  box-shadow: 0 14px 32px rgba(255, 107, 53, 0.38),
              0 3px 8px rgba(0, 0, 0, 0.4);
}
.speed-badge--block {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 2rem 0;
}
.speed-badge__num {
  display: block;
  font-size: 1.45em;
  line-height: 1.05;
  margin-bottom: 0.2rem;
  letter-spacing: -0.02em;
}
.speed-badge__why {
  display: block;
  font-size: 0.78em;
  font-weight: 600;
  opacity: 0.78;
  margin-top: 0.25rem;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

/* Typography */
h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  font-weight: 800;
}

h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.lead {
  font-size: 1.25rem;
  color: var(--muted);
  margin-bottom: 2rem;
  max-width: 600px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--r);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

.btn--primary {
  background-color: var(--primary);
  color: white;
}

.btn--primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
}

.btn--outline {
  border-color: var(--border);
  background-color: transparent;
}

.btn--outline:hover {
  background-color: var(--card-bg);
  border-color: var(--muted);
}

.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--fg);
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: var(--border);
}

/* Header */
.header {
  /* Pad the top inset so the sticky bar clears the notch / Dynamic Island on
     iPhones with viewport-fit=cover. env() falls back to 0 elsewhere. */
  padding: max(1.5rem, env(safe-area-inset-top, 1.5rem)) 0 1.5rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(7, 9, 12, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 100;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.5rem;
}

.brand__mark {
  color: var(--primary);
  width: 32px;
  height: 32px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__link {
  font-weight: 500;
  color: var(--muted);
  position: relative;
  /* 2026-05-20: removed `padding-bottom: 4px` which was overriding
     styles.css's symmetric `padding: 12px 10px` and producing visually
     off-center links (12 top / 4 bottom). The active-state underline
     uses text-underline-offset: 6px and sits inside the 12px bottom
     padding cleanly. */
}

.nav__link:hover {
  color: var(--fg);
}

/* Active-page indicator: orange underline directly under the link text.
   text-decoration is used here (not border-bottom) because styles.css gives
   .nav__link border-radius: 12px + padding: 10px — a border-bottom on a
   rounded-corner element renders a curved arc that LOOKS like a pill
   outline rather than a flat underline. text-decoration paints under the
   text glyphs themselves and is unaffected by the parent's border-radius. */
.nav__link[aria-current="page"] {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: #ff6b35;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Hover/focus dropdowns for top-level nav items that have subpages
   (Library, Proofs, Docs). CSS-only; no JS needed. Keyboard a11y via
   :focus-within.
   .nav__group is intentionally minimal — `position: relative` only — so
   the wrapped <a class="nav__link"> renders identically to its sibling
   direct-child links (Features / Why / Pricing). Adding display:flex or
   any padding here makes the wrapped items look "bubbled" relative to
   the bare anchors. */
.nav__group {
  position: relative;
}

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: rgba(7, 9, 12, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.4rem 0;
  margin-top: 0.5rem;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.nav__group:hover .nav__dropdown,
.nav__group:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown a {
  display: block;
  padding: 0.55rem 1rem;
  color: rgba(244, 246, 248, 0.82);
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

.nav__dropdown a:hover,
.nav__dropdown a:focus {
  background: rgba(255, 107, 53, 0.12);
  color: #fff;
  outline: none;
}

/* Mobile nav (reuse details.menu pattern used elsewhere) */
.menu {
  display: none;
  position: relative;
}

@media (max-width: 900px) {
  /* 2026-05-20: migrated from 860 -> 900 to align with canonical desktop
     breakpoint. Defensive duplicate of styles.css; if styles.css's 980
     rule for .header__cta ever changes, this keeps CTAs hidden alongside
     the collapsed nav. */
  .nav {
    display: none;
  }

  /* Below the desktop breakpoint, dropdowns are hidden too — mobile uses
     the existing details/menu pattern, which already enumerates the
     subpages inline (no hover surface available on touch). */
  .nav__dropdown {
    display: none;
  }

  .header__cta {
    display: none;
  }

  .menu {
    display: block;
  }
}

.menu__btn {
  padding: 0.5rem 1rem;
  gap: 0.5rem;
}

.menu__icon {
  width: 20px;
  height: 20px;
}

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: calc(100vw - 48px);
  max-width: 320px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.menu__link {
  padding: 0.75rem 1rem;
  border-radius: calc(var(--r) - 4px);
  font-weight: 600;
  color: var(--muted);
}

.menu__link:hover {
  background: var(--card-bg);
  color: var(--fg);
}

/* Active-page indicator in the mobile menu — mirrors the desktop nav's
   .nav__link[aria-current="page"] orange underline so the same signal works
   on touch. Whichever <a class="menu__link"> the renderer marks with
   aria-current="page" lights up. */
.menu__link[aria-current="page"] {
  color: var(--fg);
  border-left: 3px solid #ff6b35;
  background: rgba(255, 107, 53, 0.08);
}

.menu__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.menu__actions .btn {
  width: 100%;
}

/* Hero */
.hero {
  padding: 6rem 0;
  background: radial-gradient(circle at 80% 20%, rgba(255, 107, 53, 0.1), transparent 40%);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero__actions {
  display: flex;
  gap: 1rem;
}

.placeholder-graphic {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 2rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.window {
  background: #1e1e1e;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #333;
}

.window__header {
  background: #333;
  padding: 8px 12px;
  display: flex;
  gap: 6px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #555;
}

.window__body {
  padding: 1.5rem;
  font-family: ui-monospace, monospace;
  font-size: 0.9rem;
}

.keyword { color: #569cd6; }
.string { color: #ce9178; }
.error { color: #f44336; background: rgba(244, 67, 54, 0.1); padding: 2px 4px; border-radius: 4px; }

/* Why Section */
.why-section {
  padding: 6rem 0;
}

.why-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
}

.why-content h3 {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: var(--fg);
}

.why-item {
  margin-bottom: 2rem;
}

.why-item h4 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.why-img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Scanner pipeline proof visual */
.scanner-pipeline {
  padding: 6rem 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    linear-gradient(90deg, rgba(12, 74, 110, 0.16), rgba(7, 9, 12, 0) 32%, rgba(6, 95, 70, 0.12));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.scanner-pipeline__head {
  margin-bottom: 2rem;
}

.scanner-pipeline__head span {
  display: block;
  max-width: 760px;
  margin: 0.75rem auto 0;
  color: rgba(244, 246, 248, 0.78);
  font-size: 1.02rem;
  line-height: 1.7;
}

.scanner-pipeline__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto 1rem;
}

.scanner-pipeline__run {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.65rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(102, 194, 165, 0.42);
  border-radius: calc(var(--r) - 4px);
  background: rgba(102, 194, 165, 0.1);
  color: rgba(232, 255, 247, 0.95);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.scanner-pipeline__run:hover,
.scanner-pipeline__run:focus-visible {
  background: rgba(102, 194, 165, 0.16);
  border-color: rgba(102, 194, 165, 0.68);
  transform: translateY(-1px);
}

.scanner-pipeline__run[disabled] {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.scanner-pipeline__status {
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: calc(var(--r) - 4px);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(244, 246, 248, 0.72);
  font-size: 0.88rem;
  line-height: 1.45;
}

.scanner-pipeline__visual {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.45fr) minmax(220px, 0.9fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r);
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    rgba(5, 7, 10, 0.72);
  background-size: 32px 32px;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.scanner-pipeline__visual.is-running {
  border-color: rgba(102, 194, 165, 0.34);
}

.scanner-pipeline__lane,
.scanner-pipeline__core {
  position: relative;
  min-width: 0;
}

.scanner-pipeline__lane {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.scanner-pipeline__lane--ingress::after,
.scanner-pipeline__core::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1rem;
  width: 1rem;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 107, 53, 0.3), rgba(255, 107, 53, 0.9));
  transform: translateY(-50%);
}

.scanner-pipeline__core::before,
.scanner-pipeline__lane--output::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1rem;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid rgba(255, 107, 53, 0.9);
  transform: translateY(-50%);
}

.scanner-pipeline__label,
.scanner-core-card__eyebrow {
  color: rgba(244, 246, 248, 0.58);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.scanner-source,
.scanner-output,
.scanner-core-card,
.scanner-engine {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.scanner-source {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.scanner-source:hover,
.scanner-source:focus-visible,
.scanner-engine:hover,
.scanner-engine:focus-visible {
  border-color: rgba(255, 107, 53, 0.58);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

.scanner-source:focus-visible,
.scanner-engine:focus-visible,
.scanner-pipeline__run:focus-visible {
  outline: 2px solid rgba(102, 194, 165, 0.88);
  outline-offset: 3px;
}

.scanner-source.is-active,
.scanner-engine.is-active,
.scanner-output.is-active {
  border-color: rgba(255, 107, 53, 0.72);
  background:
    linear-gradient(135deg, rgba(255, 107, 53, 0.12), rgba(102, 194, 165, 0.055)),
    rgba(255, 255, 255, 0.065);
  box-shadow: 0 14px 32px rgba(255, 107, 53, 0.14);
}

.scanner-source:not(.is-active),
.scanner-engine:not(.is-active),
.scanner-output:not(.is-active) {
  opacity: 0.78;
}

.scanner-source__icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 10px;
  border: 1px solid currentColor;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8rem;
  font-weight: 800;
}

.scanner-source--editor .scanner-source__icon {
  color: #7dd3fc;
  background: rgba(14, 165, 233, 0.1);
}

.scanner-source--cli .scanner-source__icon {
  color: #86efac;
  background: rgba(34, 197, 94, 0.1);
}

.scanner-source--api .scanner-source__icon {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.1);
}

.scanner-source strong,
.scanner-output strong,
.scanner-engine strong {
  display: block;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.96rem;
  line-height: 1.35;
}

.scanner-source small,
.scanner-output small,
.scanner-engine small {
  display: block;
  margin-top: 0.25rem;
  color: rgba(244, 246, 248, 0.62);
  font-size: 0.82rem;
  line-height: 1.45;
}

.scanner-pipeline__core {
  display: grid;
  gap: 1rem;
}

.scanner-core-card {
  padding: 1.35rem;
  background:
    linear-gradient(135deg, rgba(255, 107, 53, 0.14), rgba(12, 74, 110, 0.08)),
    rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 107, 53, 0.28);
}

.scanner-core-card h3 {
  margin: 0.45rem 0 0.55rem;
  font-size: 1.35rem;
}

.scanner-core-card p {
  margin: 0;
  color: rgba(244, 246, 248, 0.75);
  line-height: 1.65;
}

.scanner-core-card__route {
  display: grid;
  gap: 0.28rem;
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--r) - 4px);
  background: rgba(0, 0, 0, 0.2);
}

.scanner-core-card__route span {
  color: rgba(102, 194, 165, 0.86);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scanner-core-card__route strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
  line-height: 1.4;
}

.scanner-engines {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
}

.scanner-engine {
  min-height: 8.2rem;
  padding: 0.85rem;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.scanner-engine span {
  display: inline-flex;
  margin-bottom: 0.65rem;
  color: rgba(244, 246, 248, 0.58);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.74rem;
  font-weight: 800;
}

.scanner-engine--regex {
  border-color: rgba(14, 165, 233, 0.34);
}

.scanner-engine--taint {
  border-color: rgba(255, 107, 53, 0.44);
}

.scanner-engine--heuristics {
  border-color: rgba(245, 158, 11, 0.36);
}

.scanner-engine--ai {
  border-color: rgba(139, 92, 246, 0.38);
}

.scanner-engine--project {
  border-color: rgba(34, 197, 94, 0.34);
}

.scanner-output {
  padding: 1rem;
}

.scanner-inspector {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--r);
  background: rgba(0, 0, 0, 0.22);
}

.scanner-inspector__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.scanner-inspector__topline span,
.scanner-inspector__topline strong {
  color: rgba(244, 246, 248, 0.58);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scanner-inspector__topline strong {
  color: rgba(255, 107, 53, 0.9);
}

.scanner-inspector h3 {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: 1.18rem;
}

.scanner-inspector p {
  margin: 0;
  color: rgba(244, 246, 248, 0.72);
  line-height: 1.6;
}

.scanner-inspector pre {
  min-height: 6.2rem;
  margin: 0;
  padding: 0.85rem;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: calc(var(--r) - 4px);
  background: rgba(0, 0, 0, 0.34);
  color: rgba(232, 255, 247, 0.86);
  font-size: 0.78rem;
  line-height: 1.55;
}

.scanner-inspector__evidence {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scanner-inspector__evidence li {
  position: relative;
  padding-left: 1rem;
  color: rgba(244, 246, 248, 0.68);
  font-size: 0.84rem;
  line-height: 1.45;
}

.scanner-inspector__evidence li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(102, 194, 165, 0.9);
}

.scanner-pipeline__note {
  max-width: 760px;
  margin: 1rem auto 0;
  color: rgba(244, 246, 248, 0.7);
  font-size: 0.94rem;
  line-height: 1.6;
  text-align: center;
}

/* Features */
.features {
  padding: 6rem 0;
  background-color: var(--bg-alt);
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-header p {
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

.feature-card {
  padding: 2.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: var(--transition);
}

.feature-card:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
}

.hero-picture {
  display: block;
}

.hero-img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.feature-icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* How it works */
.how-it-works {
  padding: 6rem 0;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.step {
  text-align: center;
}

.step__number {
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin: 0 auto 1.5rem;
}

/* Setup Section */
.setup-section {
  padding: 6rem 0;
  background-color: var(--bg-alt);
}

.setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.setup-step {
  margin-bottom: 2rem;
}

.setup-step p {
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.code-block {
  background: #1e1e1e;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #333;
  font-family: ui-monospace, monospace;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.setup-img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Stats */
.stats {
  padding: 4rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

.stat-value {
  font-size: 3rem;
  font-weight: 800;
  color: var(--primary);
}

.stat-label {
  color: var(--muted);
  font-weight: 600;
}

/* Scenarios */
.scenarios {
  padding: 6rem 0;
}

.scenarios-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.scenario-percent {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.scenario-label {
  font-weight: 600;
  color: var(--muted);
}

/* Community */
.community {
  padding: 6rem 0;
  text-align: center;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.social-link {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--muted);
}

.social-link:hover {
  color: var(--primary);
}

.social-link[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.65;
}

.social-link[aria-disabled="true"]:hover {
  color: var(--muted);
}

/* CTA Section */
.cta-section {
  padding: 6rem 0;
}

.cta-card {
  background: linear-gradient(135deg, var(--primary), #ff8c00);
  padding: 4rem;
  border-radius: 24px;
  text-align: center;
  color: white;
}

.cta-card h2 {
  margin-bottom: 1rem;
}

.cta-card p {
  font-size: 1.25rem;
  margin-bottom: 2.5rem;
  opacity: 0.9;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.cta-card .btn--primary {
  background: white;
  color: var(--primary);
}

.cta-card .btn--outline {
  border-color: white;
  color: white;
}

/* Footer */
/* Spotlights */
.spotlights {
  padding: 6rem 0;
  background-color: var(--bg-alt);
}

.spotlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.spotlight-card {
  padding: 2.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.spotlight-card h3 {
  margin-bottom: 1rem;
}

.spotlight-card p {
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.spotlight-link {
  color: var(--primary);
  font-weight: 700;
}

.spotlight-link:hover {
  text-decoration: underline;
}

/* Experience Section */
.experience-section {
  padding: 8rem 0;
  background:
    linear-gradient(rgba(7, 9, 12, 0.8), rgba(7, 9, 12, 0.8)),
    image-set(
      url('./assets/hero-concept-1408.avif') type('image/avif'),
      url('./assets/hero-concept-1408.webp') type('image/webp'),
      url('./assets/hero-concept.png?v=20260427a') type('image/png')
    ) center/cover no-repeat;
}

.experience-card {
  text-align: center;
}

.experience-card h2 {
  font-size: 3rem;
  margin-bottom: 3rem;
  color: white;
}

.experience-actions {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.footer {
  padding: 4rem 0 2rem;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
}

.footer__brand p {
  margin-top: 1rem;
  color: var(--muted);
  max-width: 300px;
}

.footer__links h4 {
  margin-bottom: 1.5rem;
}

.footer__links a {
  display: block;
  color: var(--muted);
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
}

.footer__links a:hover {
  color: var(--primary);
}

.footer__bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 900px) {
  .hero {
    padding: 4rem 0;
  }
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero__actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }
  .hero__actions .btn {
    width: 100%;
  }
  .why-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .why-section, .scanner-pipeline, .features, .setup-section, .scenarios, .community, .spotlights, .cta-section {
    padding: 4rem 0;
  }
  .scanner-pipeline__controls {
    align-items: stretch;
    flex-direction: column;
  }
  .scanner-pipeline__run {
    width: 100%;
  }
  .scanner-pipeline__visual {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0.85rem;
  }
  .scanner-pipeline__lane--ingress::after,
  .scanner-pipeline__core::before,
  .scanner-pipeline__core::after,
  .scanner-pipeline__lane--output::before {
    display: none;
  }
  .scanner-engines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .scanner-engine {
    min-height: 7rem;
  }
  .setup-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .scenarios-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .spotlights-grid {
    grid-template-columns: 1fr;
  }
  .cta-card {
    padding: 2.5rem 1.5rem;
  }
  .cta-actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .cta-actions .btn {
    width: 100%;
  }
  .experience-section {
    padding: 5rem 0;
  }
  .experience-card h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  .experience-actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .experience-actions .btn {
    width: 100%;
  }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }
  .footer__brand p {
    margin: 1rem auto 0;
  }
  .footer__links a {
    margin-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  .scanner-engines {
    grid-template-columns: 1fr;
  }
  .scanner-source,
  .scanner-output,
  .scanner-core-card,
  .scanner-engine {
    padding: 0.9rem;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2.25rem;
  }
  h2 {
    font-size: 1.75rem;
  }
  .container {
    padding: 0 20px;
  }
  .scenarios-grid {
    grid-template-columns: 1fr;
  }
  /* Phone tier (incl. 390px iPhone Pro): the 900px tablet tier leaves the hero
     at 4rem top/bottom, which on the shorter 844px Pro pushes the headline up
     under the sticky header and drops the second CTA below the fold. Tighten the
     vertical rhythm and reserve the home-indicator inset so both CTAs stay in
     view. The taller Pro Max (932px) was unaffected and stays fine. */
  .hero {
    padding: 2.25rem 0 calc(2.25rem + env(safe-area-inset-bottom, 0px));
  }
  .hero__inner {
    gap: 1.5rem;
  }
  /* Compact the sticky header on phones: keep just enough top inset to
     clear the Dynamic Island, trim the rest so the pinned bar does not
     eat the short iOS visible area. */
  .header {
    padding: max(0.75rem, env(safe-area-inset-top, 0.75rem)) 0 0.75rem;
  }
  .lead {
    font-size: 1.0625rem;
    margin-bottom: 1.25rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Legacy docs pages (styles.css markup)                                       */
/* Goal: keep existing docs HTML, but make it look like the concept theme.     */
/* -------------------------------------------------------------------------- */

/* Remove the old “glow grid” background layer used by styles.css pages. */
.bg {
  display: none !important;
}

/* Unify links to the concept accent. */
a:hover {
  color: var(--fg);
}

/* Cards / grids used by standards, library, privacy, terms. */
.card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--r) + 2px) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45) !important;
}

.card p,
.list,
.note,
.fineprint,
.muted {
  color: var(--muted) !important;
}

.card h2,
.card h3 {
  color: var(--fg) !important;
}

/* Make pill/subnav links feel consistent. */
.subnav__link {
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(244, 246, 248, 0.92) !important;
}

.subnav__link[aria-current="page"] {
  border-color: rgba(255, 107, 53, 0.35) !important;
  background: rgba(255, 107, 53, 0.1) !important;
}

.subnav__link:hover {
  border-color: rgba(255, 107, 53, 0.45) !important;
}

/* FAQ/accordion styling reused on vulnerability library page. */
.faq__item,
.faq__item[open] {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--r) + 4px) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4) !important;
}

.faq__item summary {
  color: rgba(244, 246, 248, 0.95) !important;
}

.faq__body {
  color: var(--muted) !important;
}

/* -------------------------------------------------------------------------- */
/* Doc-prose components (2026-05-26).                                         */
/* Lifted verbatim from inline <style> blocks formerly duplicated across      */
/* ~200 library entry index.html files plus the multi-hop SQL injection      */
/* proof page and the SAST false positives guide page. Pure consolidation:    */
/* values preserved exactly so rendering is unchanged. .library-doc uses     */
/* fixed sizes; .proof-doc and .guide-doc share fluid sizes plus the         */
/* eyebrow/lead/actions/callout sub-elements, with their own stats grid /    */
/* card grid respectively.                                                   */
/* -------------------------------------------------------------------------- */

.library-doc { max-width: 54rem; margin: 0 auto; padding: 4rem 1.5rem; }
.library-doc h1 { font-size: 2.25rem; margin: 0 0 1rem; }
.library-doc h2 { color: #ff6b35; margin: 2.5rem 0 .75rem; }
.library-doc h3 { margin: 2rem 0 .5rem; }
.library-doc p, .library-doc li { line-height: 1.7; }
.library-doc code { background: rgba(255, 255, 255, .08); padding: 2px 6px; border-radius: 4px; }
.library-doc pre { overflow-x: auto; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; padding: 1rem; }
.library-doc pre code { background: transparent; padding: 0; }
.library-doc a { color: #ff6b35; }
.library-doc__back { display: inline-block; margin-bottom: 1.5rem; opacity: .7; text-decoration: none; }
.library-doc__cta { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, .12); }

/* "Detected by [engine] (tier)" metadata block at the top of each
   library entry. Set per-page by tools/build-library-pages.py via
   slug-pattern inference. Turns every dry library entry into a product
   touchpoint without adding new editorial work. */
.library-doc__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.75rem;
  padding: .65rem 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  font-size: .9rem;
  color: rgba(255, 255, 255, .72);
  max-width: none;
}
.library-doc__meta-label {
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .7rem;
  color: rgba(255, 255, 255, .5);
}
.library-doc__meta-engine {
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
}
.library-doc__meta-tier {
  display: inline-block;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.library-doc__meta-tier--free {
  background: rgba(102, 194, 165, .14);
  color: #66c2a5;
}
.library-doc__meta-tier--pro {
  background: rgba(255, 107, 53, .14);
  color: #ff6b35;
}

/* Strong tier-aware CTA block at the bottom of each library entry.
   Replaces the older weak "Request access | View coverage" pair.
   The Free variant routes to the dashboard signup; the Pro variant
   routes to /get-started for the three-tier on-ramp page. */
.library-doc__cta--strong {
  margin-top: 3rem;
  padding: 1.75rem;
  border: 1px solid rgba(255, 107, 53, .25);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 107, 53, .06), rgba(255, 255, 255, .02));
  max-width: none;
}
.library-doc__cta--strong.library-doc__cta--free {
  border-color: rgba(102, 194, 165, .3);
  background: linear-gradient(180deg, rgba(102, 194, 165, .07), rgba(255, 255, 255, .02));
}
.library-doc__cta--strong h3 {
  margin: 0 0 .5rem;
  color: rgba(255, 255, 255, .96);
  font-size: 1.2rem;
}
.library-doc__cta--strong p {
  margin: 0 0 1.25rem;
  color: rgba(255, 255, 255, .78);
  max-width: 60ch;
}
.library-doc__cta--strong .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* "In your editor" preview block — Sprint 7. Mocks a VS Code Problems-
   panel diagnostic so every library entry shows readers what a
   SiteShadow finding actually looks like at the moment of detection.
   Per-page content (rule ID, engine, severity, message, filename) is
   generated by tools/build-library-pages.py via slug-pattern
   inference + the slug's frontmatter `summary` field. */
.library-doc__editor {
  margin: 1.75rem 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  overflow: hidden;
  background: #1e1e1e;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  max-width: none;
}
.library-doc__editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .9rem;
  background: #2d2d30;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .55);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.library-doc__editor-header-eyebrow {
  font-weight: 600;
}
.library-doc__editor-header-file {
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  color: rgba(255, 255, 255, .7);
  text-transform: none;
  letter-spacing: 0;
}
.library-doc__editor-body {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: .95rem 1.05rem 1.1rem;
}
.library-doc__editor-row {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.library-doc__editor-severity {
  flex: 0 0 auto;
  display: inline-block;
  margin-top: .15rem;
  padding: .12rem .55rem;
  border-radius: 3px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.library-doc__editor-severity--critical { background: rgba(244, 135, 113, .22); color: #f48771; }
.library-doc__editor-severity--high     { background: rgba(255, 184, 108, .2);  color: #ffb86c; }
.library-doc__editor-severity--medium   { background: rgba(241, 250, 140, .18); color: #f1fa8c; }
.library-doc__editor-severity--low      { background: rgba(139, 233, 253, .18); color: #8be9fd; }
.library-doc__editor-content {
  flex: 1 1 auto;
  min-width: 0;
}
.library-doc__editor-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .3rem;
  font-size: .92rem;
  color: rgba(255, 255, 255, .95);
  font-weight: 600;
}
.library-doc__editor-title code {
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: .78rem;
  padding: 1px 6px;
  background: rgba(108, 182, 255, .12);
  border-radius: 3px;
  color: #6cb6ff;
}
.library-doc__editor-message {
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: .9rem;
  line-height: 1.55;
}
.library-doc__editor-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding-top: .55rem;
  margin-top: .15rem;
  border-top: 1px dashed rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .55);
  font-size: .8rem;
}
.library-doc__editor-footer-engine {
  color: rgba(255, 255, 255, .82);
  font-weight: 600;
}
.library-doc__editor-footer-fix {
  margin-left: auto;
  color: #ff6b35;
  font-weight: 600;
}

/* Per-CWE coverage badge auto-generated by tools/generate-coverage-metadata.py.
   Two states keyed off data-coverage:
     data-coverage="N" (N > 0)  -> green-tinted "currently checked" panel
     data-coverage="0"          -> neutral muted "background only" panel
   The green matches the scanner-pipeline active accent (102,194,165). */
.library-doc__coverage {
  display: block;
  margin: 0 0 2rem;
  padding: .85rem 1.1rem;
  border-radius: 8px;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: none;
}
.library-doc__coverage[data-coverage]:not([data-coverage="0"]) {
  background: rgba(102, 194, 165, .07);
  border-left: 3px solid rgba(102, 194, 165, .6);
}
.library-doc__coverage[data-coverage="0"] {
  background: rgba(255, 255, 255, .04);
  border-left: 3px solid rgba(244, 246, 248, .25);
}
.library-doc__coverage strong {
  color: var(--fg);
}
.library-doc__coverage a {
  color: rgba(255, 107, 53, .95);
}

/* Engine-attribution pills inside the coverage block. Two rows:
   1. .lib-engines = the per-engine breakdown of registry rules
      (Regex / Secret-detect / Other-pattern). These sum to the
      headline total.
   2. .lib-engine-also = engines outside the registry: AI-context
      pill (if the AI engine attributes this CWE) and the
      Taint/Heuristic "may also" caveat as muted text. */
.lib-engines,
.lib-engine-also {
  display: block;
  margin-top: .45rem;
}
.lib-engine-also {
  font-size: .88rem;
  color: var(--muted);
}
.lib-engine {
  display: inline-block;
  margin: 0 .35rem .25rem 0;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--fg);
}
.lib-engine--regex {
  border-color: rgba(14, 165, 233, .42);
  background: rgba(14, 165, 233, .08);
  color: rgba(186, 230, 253, .95);
}
.lib-engine--secret {
  border-color: rgba(245, 158, 11, .42);
  background: rgba(245, 158, 11, .09);
  color: rgba(254, 215, 170, .95);
}
.lib-engine--ai {
  border-color: rgba(139, 92, 246, .42);
  background: rgba(139, 92, 246, .09);
  color: rgba(216, 180, 254, .95);
}
.lib-engine--other {
  border-color: rgba(244, 246, 248, .2);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
}
.lib-engine-note {
  display: inline;
  margin-left: .25rem;
  color: var(--muted);
  font-weight: 400;
}
.lib-engine-caveat {
  display: block;
  margin-top: .4rem;
  color: var(--muted);
  font-size: .85rem;
  font-style: italic;
  line-height: 1.55;
}
.lib-engine-caveat a {
  color: rgba(255, 107, 53, .95);
  font-style: normal;
}

/* Guided-journey cards on /evidence (Sprint 4). Sits between the
   hero and the 6-card "six routes" grid. Each journey is a small
   ordered-list of links: audience label + 3 sequenced steps. Visually
   subdued vs the main 6 cards so it complements rather than competes. */
.evidence-journeys {
  padding: 1rem 0 3rem;
}
.evidence-journeys__head {
  max-width: 720px;
  margin: 0 auto 2rem;
  text-align: center;
}
.evidence-journeys__head h2 {
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  margin: 0 0 .5rem;
  color: var(--fg);
}
.evidence-journeys__head p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}
.evidence-journeys__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: var(--page-max-wide);
  margin: 0 auto;
}
.evidence-journey {
  padding: 1.25rem 1.4rem 1.4rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  transition: border-color 160ms ease, background 160ms ease;
}
.evidence-journey:hover {
  border-color: rgba(255, 107, 53, .35);
  background: rgba(255, 255, 255, .045);
}
.evidence-journey__audience {
  margin: 0 0 .75rem;
  color: rgba(255, 107, 53, .9);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
}
.evidence-journey__steps {
  margin: 0;
  padding-left: 1.4rem;
  display: grid;
  gap: .55rem;
  color: var(--muted);
}
.evidence-journey__steps li {
  font-size: .95rem;
  line-height: 1.45;
}
.evidence-journey__steps li::marker {
  color: rgba(255, 107, 53, .65);
  font-weight: 700;
}
.evidence-journey__steps a {
  color: rgba(244, 246, 248, .92);
  border-bottom: 1px solid rgba(255, 107, 53, .35);
  text-decoration: none;
  transition: border-color 140ms ease, color 140ms ease;
}
.evidence-journey__steps a:hover,
.evidence-journey__steps a:focus-visible {
  color: rgba(255, 255, 255, 1);
  border-bottom-color: rgba(255, 107, 53, .9);
}

@media (max-width: 768px) {
  .evidence-journeys__grid {
    grid-template-columns: 1fr;
  }
}

.proof-doc,
.guide-doc {
  max-width: var(--page-max-wide);
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.proof-doc h1,
.guide-doc h1 {
  font-size: var(--h1-fluid);
  line-height: 1.05;
  margin: 0 0 1rem;
}

.proof-doc h2,
.guide-doc h2 {
  color: #ff6b35;
  font-size: var(--h2-fluid);
  margin: 3rem 0 .85rem;
}

.proof-doc p, .proof-doc li,
.guide-doc p, .guide-doc li {
  line-height: 1.75;
  max-width: var(--page-max-narrow);
}

.proof-doc pre,
.guide-doc pre {
  overflow-x: auto;
  background: rgba(0, 0, 0, .48);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  padding: 1rem;
}

.proof-doc code,
.guide-doc code {
  background: rgba(255, 255, 255, .08);
  border-radius: 4px;
  padding: 2px 6px;
}

.proof-doc pre code,
.guide-doc pre code {
  background: transparent;
  padding: 0;
}

.proof-doc a:not(.btn),
.guide-doc a:not(.btn) {
  color: #ff6b35;
}

.proof-doc__eyebrow,
.guide-doc__eyebrow {
  color: #ff6b35;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 .75rem;
  text-transform: uppercase;
}

.proof-doc__lead,
.guide-doc__lead {
  color: rgba(255, 255, 255, .82);
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.proof-doc__actions,
.guide-doc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 2rem 0 3rem;
}

.proof-doc__callout,
.guide-doc__callout {
  border-left: 3px solid #ff6b35;
  background: rgba(255, 107, 53, .08);
  margin: 2rem 0;
  padding: 1rem 1.25rem;
}

/* Proof-doc-only: stats grid */
.proof-doc__stats {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 2rem 0;
}

.proof-doc__stat {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  padding: 1rem;
}

.proof-doc__stat strong {
  display: block;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.1;
}

.proof-doc__stat span {
  color: rgba(255, 255, 255, .68);
  display: block;
  font-size: .9rem;
  margin-top: .35rem;
}

/* Guide-doc-only: card grid */
.guide-doc__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 2rem 0;
}

.guide-doc__card {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  padding: 1rem;
}

.guide-doc__card strong {
  color: #fff;
  display: block;
  margin-bottom: .35rem;
}

@media (max-width: 768px) {
  .proof-doc,
  .guide-doc {
    padding-top: 3rem;
  }
  .proof-doc__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .guide-doc__grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------- */
/* Library search + facet filter (2026-05-26)                                 */
/* Used by vulnerability-library.html to filter the ~200 entries across the   */
/* Browse accordion sections and the CWE spotlights card.                     */
/* -------------------------------------------------------------------------- */

.lib-search {
  margin: 2rem 0 2.5rem;
}

.lib-search__bar {
  display: flex;
  gap: .75rem;
  margin-bottom: 1rem;
}

.lib-search__input {
  flex: 1;
  min-width: 0;
  padding: .75rem 1rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
}

.lib-search__input:focus-visible {
  outline: 2px solid rgba(255, 107, 53, .55);
  outline-offset: 2px;
  border-color: rgba(255, 107, 53, .5);
}

.lib-search__input::placeholder {
  color: rgba(244, 246, 248, .45);
}

.lib-search__clear {
  padding: .75rem 1.25rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.lib-search__clear:hover {
  border-color: rgba(255, 107, 53, .5);
  color: var(--fg);
}

.lib-search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}

.lib-search__chip {
  padding: .4rem .9rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease, opacity 120ms ease;
}

.lib-search__chip:hover {
  border-color: rgba(255, 107, 53, .45);
}

.lib-search__chip[aria-pressed="true"] {
  border-color: rgba(255, 107, 53, .55);
  background: rgba(255, 107, 53, .1);
  color: var(--fg);
}

.lib-search__chip[aria-pressed="false"] {
  opacity: .55;
}

.lib-search__counter {
  color: var(--muted);
  font-size: .9rem;
  margin: 0;
}

.lib-search__counter[data-empty="true"] {
  color: rgba(255, 107, 53, .85);
}

.lib-search__empty {
  margin: 1rem 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 107, 53, .35);
  border-radius: var(--r);
  background: rgba(255, 107, 53, .06);
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.5;
}

.lib-search__empty-clear {
  background: transparent;
  border: none;
  padding: 0;
  color: rgba(255, 107, 53, .95);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lib-search__empty-clear:hover,
.lib-search__empty-clear:focus-visible {
  color: rgb(255, 130, 60);
}

/* ========================================================================== */
/* Marketing homepage: scroll-reactive Earth background + glassmorphism.        */
/* Added 2026-05-29 (design handoff v2). Scoped to body.has-earth (homepage     */
/* only) so the shared marketing CSS leaves every other page untouched. The     */
/* fixed Earth canvas sits behind everything; section bands stay TRANSPARENT    */
/* and frosted-glass cards (translucent fill + backdrop blur) carry the         */
/* surface. Earth behavior lives in earth-bg.js. */
/* ========================================================================== */

/* Fixed, full-viewport canvas behind all page content. */
.bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

/* The homepage backdrop IS the Earth canvas. Make the body transparent so the
   z-index:-1 canvas shows through; html keeps the dark base color (styles.css:
   html{background:var(--bg)}), which covers the globe night side. */
body.has-earth {
  background: transparent;
}

/* Section bands stay transparent so the Earth shows across the whole strip.
   Do NOT wash a section band (it blocks the Earth); the frosted cards carry
   the surface instead. These three sections ship an opaque --bg-alt fill in
   the base CSS, so reset them to transparent here. */
.has-earth .features,
.has-earth .setup-section,
.has-earth .spotlights {
  background: transparent;
}

/* ---- Frosted-glass panels: translucent fill + backdrop blur, per-surface
   blur values from the handoff. Each pairs the -webkit- prefix for Safari. ---- */

.has-earth .feature-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
  -webkit-backdrop-filter: blur(13px) saturate(140%);
  backdrop-filter: blur(13px) saturate(140%);
  box-shadow: var(--shadowA);
}

.has-earth .spotlight-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadowB), var(--shadowGlow);
}

/* Closing CTA + "Stop guessing" cards: glass panels over the globe (the CTA
   was a solid orange block; the experience card dropped its opaque image). */
.has-earth .cta-card,
.has-earth .experience-card {
  padding: 3rem 2rem;
  border-radius: calc(var(--r2) + 6px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadowB), var(--shadowGlow);
  color: var(--fg);
}
.has-earth .cta-card p { color: var(--muted); opacity: 1; }
.has-earth .experience-section { background: transparent; }
.has-earth .experience-card h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 0.75rem; color: #fff; }

/* Trust strip (hero) + its stat tiles. */
.has-earth .trust-strip {
  -webkit-backdrop-filter: blur(13px) saturate(140%);
  backdrop-filter: blur(13px) saturate(140%);
}
.has-earth .trust-strip__stat {
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Setup steps: frost the step blocks so their text stays legible over the now
   transparent section band (rather than washing the band). */
.has-earth .setup-step {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
  box-shadow: var(--shadowA);
}

/* Scanner pipeline panel: lighter base fill (.34) + strong frost so the globe
   glows through the blueprint grid. Re-declare background-size (the shorthand
   resets it). */
.has-earth .scanner-pipeline__visual {
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    rgba(5, 7, 10, 0.34);
  background-size: 32px 32px;
  -webkit-backdrop-filter: blur(15px) saturate(130%);
  backdrop-filter: blur(15px) saturate(130%);
}
/* Frost every entry/engine/output tile; bump only the NON-active fill so the
   orange active-state fill is preserved. */
.has-earth .scanner-source,
.has-earth .scanner-engine,
.has-earth .scanner-output {
  -webkit-backdrop-filter: blur(9px) saturate(130%);
  backdrop-filter: blur(9px) saturate(130%);
}
.has-earth .scanner-source:not(.is-active),
.has-earth .scanner-engine:not(.is-active),
.has-earth .scanner-output:not(.is-active) {
  background: rgba(255, 255, 255, 0.06);
}
.has-earth .scanner-core-card {
  -webkit-backdrop-filter: blur(11px) saturate(135%);
  backdrop-filter: blur(11px) saturate(135%);
}

/* Primary CTA button: translucent orange gradient (the only intentionally
   solid-reading accent), not glass. Canonical #ff6b35 expressed as rgba. */
.has-earth .btn--primary {
  background: linear-gradient(180deg, rgba(255, 107, 53, 0.32), rgba(255, 107, 53, 0.18));
  border-color: rgba(255, 107, 53, 0.5);
  color: #fff;
}
.has-earth .btn--primary:hover {
  background: linear-gradient(180deg, rgba(255, 107, 53, 0.42), rgba(255, 107, 53, 0.24));
}

/* Feature-card icons: Lucide line glyphs in an accent-tinted chip, replacing
   the previous emoji (handoff: Lucide icon set, no emoji). */
.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 107, 53, 0.12);
  color: var(--primary);
  margin-bottom: 1.25rem;
}
.feature-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

/* Hero product screenshot: semi-transparent so the globe bleeds through it,
   consistent with the glass panels. High enough that the evidence still reads. */
.has-earth .hero-img {
  opacity: 0.8;
}

/* Accessibility and performance: backdrop-filter is GPU-costly. Under reduced
   transparency or reduced motion, drop the blur and fall back to a solid panel
   fill so the same surfaces stay legible and cheap to paint. */
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
  .has-earth .feature-card,
  .has-earth .spotlight-card,
  .has-earth .cta-card,
  .has-earth .experience-card,
  .has-earth .trust-strip,
  .has-earth .trust-strip__stat,
  .has-earth .setup-step,
  .has-earth .scanner-pipeline__visual,
  .has-earth .scanner-source,
  .has-earth .scanner-engine,
  .has-earth .scanner-output,
  .has-earth .scanner-core-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(11, 15, 20, 0.9);
  }
}

/* ========================================================================== */
/* Site-wide Earth + glass (2026-05-29): the homepage template applied to every */
/* page. earth-bg.js self-injects the canvas + the has-earth body class on every */
/* page that loads it; this frosts content containers and cards across BOTH the  */
/* styles.css and concept.css component systems so copy stays readable over the  */
/* globe. Homepage-specific surfaces are handled in the block above. */
/* ========================================================================== */

/* Long-form content wrappers become one readable frosted-glass column. Prose
   must not sit directly on the rotating globe. */
.has-earth .library-doc,
.has-earth .proof-doc,
.has-earth .guide-doc {
  background: linear-gradient(180deg, rgba(10, 13, 18, 0.66), rgba(10, 13, 18, 0.6));
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid var(--border);
  border-radius: 18px;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Card / panel components across both design systems: frost so the globe shows
   through blurred behind a readable surface. */
.has-earth :is(
  .card, .faq__item, .callout, .step, .diagram,
  .coverage-table-wrap, .coverage-stat, .coverage-callout,
  .evidence-journey,
  .library-doc__meta, .library-doc__coverage,
  .library-doc__cta, .library-doc__cta--strong,
  .proof-doc__stat, .proof-doc__callout, .guide-doc__card
) {
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
}

/* Coverage / standards data tables: give the wrapper a readable translucent
   fill so dense tabular data does not fight the globe. */
.has-earth .coverage-table-wrap {
  background: rgba(8, 11, 16, 0.62);
  border-radius: 14px;
}

/* Footer: translucent frosted bar instead of the solid --bg-alt fill. */
.has-earth .footer {
  background: rgba(8, 11, 16, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Reduced transparency / motion: drop the blur, fall back to a solid readable
   fill for the site-wide surfaces too. */
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
  .has-earth :is(
    .library-doc, .proof-doc, .guide-doc, .card, .faq__item, .callout, .step,
    .diagram, .coverage-table-wrap, .coverage-stat, .coverage-callout,
    .evidence-journey, .footer
  ) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(11, 15, 20, 0.92);
  }
}