:root {
  /* --- neutrals: deep ink, not generic navy-dashboard blue --- */
  --bg: #0a0b0f;
  --bg-panel: #121319;
  --bg-card: #171923;
  --bg-card-hi: #1c1f2b;
  --border: #262a38;
  --border-soft: #1b1e29;

  /* --- type --- */
  --text: #f1f2f6;
  --text-dim: #9aa1b4;
  --text-faint: #6b7288;

  /* --- brand accent: brass/gold replaces the generic teal --- */
  --accent: #cda869;
  --accent-hi: #e0c187;
  --accent-ink: #1c1509;
  --accent-soft: rgba(205, 168, 105, 0.14);
  --accent-border: rgba(205, 168, 105, 0.35);

  /* --- secondary accent: copper, for the threshold control + callouts --- */
  --accent-warm: #d98a53;
  --accent-warm-soft: rgba(217, 138, 83, 0.16);

  /* --- semantic (kept close to original so chart legibility/meaning holds) --- */
  --danger: #e6644d;
  --danger-soft: rgba(230, 100, 77, 0.14);
  --ok: #4fbf7a;
  --ok-soft: rgba(79, 191, 122, 0.14);

  --radius: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.45), 0 20px 48px -20px rgba(0, 0, 0, 0.65);

  /* --- paper tone: a second, genuinely distinct color family (warm
     parchment, not just a lighter grey) used to break the page's ink
     field into an alternating dark/light rhythm -- the way a long brand
     scroll breathes, instead of one unbroken dark surface start to
     finish. Themed on purpose: aged paper + gold leaf reads as
     "financial document," not a borrowed SaaS light-mode. --- */
  --paper: #f6f1e2;
  --paper-panel: #eee4c8;
  --paper-card: #fffdf7;
  --paper-border: #ddd0a6;
  --paper-border-soft: #e6dabb;
  --paper-text: #201a0d;
  --paper-text-dim: #5c5138;
  --paper-text-faint: #86794f;
  --paper-accent: #7d5f26;
  --paper-shadow-card: 0 1px 2px rgba(60, 45, 10, 0.08), 0 14px 30px -18px rgba(60, 45, 10, 0.22);

  font-size: 16px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  overflow-x: clip;
}
body {
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(1100px 520px at 84% -8%, rgba(205, 168, 105, 0.09), transparent 60%),
    radial-gradient(900px 480px at -6% 8%, rgba(217, 138, 83, 0.05), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  letter-spacing: 0.001em;
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, "Iowan Old Style", Cambria, serif;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  color: var(--text);
}

::selection { background: var(--accent-soft); color: var(--text); }

.screen {
  max-width: 960px;
  margin: 0 auto;
  padding: 108px 28px 76px;
  border-bottom: 1px solid var(--border-soft);
  scroll-margin-top: 78px;
  position: relative;
}
@media (max-width: 720px) {
  .screen { padding: 76px 20px 56px; }
}

/* --- persistent nav --- */
#persistent-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate;
  background: rgba(10, 11, 15, 0.86);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
  padding: 13px 24px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin-right: 4px;
}
.wordmark svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.wordmark .dot { color: var(--accent); }
#nav-toggle {
  display: none;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 11px;
  cursor: pointer;
  font-family: inherit;
}
#nav-list {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
#nav-list a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s ease;
}
#nav-list a:hover, #nav-list a.active { color: var(--accent-hi); }

@media (max-width: 780px) {
  /* #persistent-nav has no flex-wrap at any breakpoint, so a full-width
     #nav-list.open (a third flex child) was overflowing the row instead of
     dropping onto its own line -- the "Steps" menu opened into a jumbled,
     partially off-screen overlap rather than a clean stacked list. */
  #persistent-nav { flex-wrap: wrap; }
  #nav-toggle { display: inline-block; }
  #nav-list { display: none; flex-direction: column; width: 100%; margin-top: 10px; }
  #nav-list.open { display: flex; }
}

/* --- cover --- */
#cover.screen { max-width: 1120px; }
.cover { text-align: left; padding-top: 64px; }

.cover-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 48px;
  align-items: stretch;
}
@media (max-width: 880px) {
  .cover-grid { grid-template-columns: 1fr; gap: 28px; }
}
.cover-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
}
.cover-media {
  margin: 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  background: var(--bg-card);
}
.cover-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Single-pass duotone: grayscale first, then a warm brass/ink retint via
     sepia+hue-rotate+saturate -- the brand's own palette, not a generic
     sepia filter, and no mix-blend-mode overlay layer (removed on purpose:
     that technique's compositing order is not guaranteed stable while a
     backdrop-filter'd sticky nav scrolls above it). */
  filter: grayscale(1) sepia(0.45) hue-rotate(-12deg) saturate(1.9) contrast(1.12) brightness(0.86);
}

/* --- hero differentiator card: fills the vertical space beside the long
   left-column copy so the right column never trails off into empty void --- */
.cover-differentiators {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px 22px 22px;
  box-shadow: var(--shadow-card);
}
.cover-differentiators-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-faint);
  margin: 0 0 14px;
}
.cover-differentiators ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cover-differentiators li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.diff-mark {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-warm-soft);
  color: var(--accent-warm);
}
.diff-mark svg { width: 10px; height: 10px; }
.photo-chip {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: rgba(10, 11, 15, 0.82);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  padding: 10px 13px;
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.45;
  font-weight: 500;
}

/* --- proof bar: real held-out numbers, elevated to the fold --- */
.proof-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 30px 0 6px;
}
@media (max-width: 560px) {
  .proof-bar { grid-template-columns: 1fr; }
}
.stat-tile {
  background: var(--ok-soft);
  border: 1px solid rgba(79, 191, 122, 0.28);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-tile-alt { background: var(--accent-soft); border-color: var(--accent-border); }
.stat-tile-warm { background: var(--accent-warm-soft); border-color: rgba(217, 138, 83, 0.32); }
.stat-num {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.05;
  color: var(--text);
}
.stat-tile .stat-label {
  color: var(--text-dim);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* --- trust bar: the enterprise-credibility answer to a client-logo wall --
   real institutions (Treasury/FinCEN, a GSE, a peer-reviewed IEEE paper,
   scikit-learn), presented as verification badges instead of a vendor's
   self-issued client-logo strip. Every badge is a live outbound link to the
   primary source -- nothing here is asserted, everything is checkable. --- */
.trust-bar {
  margin: 34px 0 8px;
  padding: 20px 22px 22px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.trust-bar-label {
  color: var(--text-faint);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  margin: 0 0 14px;
}
.trust-badges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 880px) {
  .trust-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .trust-badges { grid-template-columns: 1fr; }
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.trust-badge:hover {
  transform: translateY(-2px);
  border-color: var(--accent-border);
  background: var(--bg-card-hi);
}
.trust-badge-mark {
  flex: none;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-hi);
}
.trust-badge-mark svg { width: 16px; height: 16px; }
.trust-badge-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.trust-badge-org {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trust-badge-sub {
  font-size: 0.72rem;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- proof-section photo --- */
.proof-visual {
  margin: 22px 0 18px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  position: relative;
}
.proof-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  filter: grayscale(1) sepia(0.45) hue-rotate(-12deg) saturate(1.9) contrast(1.12) brightness(0.86);
}
.proof-visual figcaption {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  background: linear-gradient(0deg, rgba(10,11,15,0.92), rgba(10,11,15,0));
  color: var(--text);
  font-size: 0.86rem;
  padding: 34px 20px 14px;
  font-weight: 500;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  color: var(--accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--accent);
  display: inline-block;
}
.hook {
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.18;
  margin: 20px 0 26px;
  font-weight: 500;
  max-width: 920px;
}
.stakes {
  color: var(--text-dim);
  font-size: 1.1rem;
  max-width: 720px;
  line-height: 1.7;
}

/* decorative signal-graph divider */
.signal-divider {
  display: block;
  width: 100%;
  max-width: 920px;
  height: auto;
  margin: 44px 0 8px;
  opacity: 0.85;
}
.signal-divider .edge { stroke: var(--border); stroke-width: 1; }
.signal-divider .node { fill: var(--bg-card); stroke: var(--accent-border); stroke-width: 1.3; }
.signal-divider .node.hot { fill: var(--accent-soft); stroke: var(--accent); }
.signal-divider .verdict { fill: var(--accent); }
.signal-divider .squiggle { stroke: var(--accent-warm); stroke-width: 2; fill: none; stroke-linecap: round; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 36px 0 20px;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tile:hover {
  transform: translateY(-3px);
  border-color: var(--accent-border);
  background: var(--bg-card-hi);
}
.pictogram {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-hi);
  margin-bottom: 2px;
}
.pictogram svg { width: 18px; height: 18px; }
.tile-title { font-weight: 700; font-size: 1rem; }
.tile-hook { color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; }

.start-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 0.96rem;
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  margin-top: 10px;
  box-shadow: 0 10px 26px -10px rgba(205, 168, 105, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.start-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(205, 168, 105, 0.65); }
.chevron { font-size: 1.2rem; }

/* --- sections --- */
h2 {
  font-size: 1.9rem;
  font-weight: 500;
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  gap: 13px;
}
.step-num {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--accent);
  letter-spacing: 0.06em;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 11px;
  flex: none;
}
.section-intro { color: var(--text-dim); max-width: 700px; font-size: 1.03rem; }
.control-instruction {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent);
  padding: 13px 16px;
  border-radius: 8px;
  margin: 22px 0 12px;
  font-size: 0.95rem;
  color: var(--text-dim);
}
.control-instruction.secondary { border-left-color: var(--text-faint); }
.control-instruction strong { color: var(--accent-hi); }

.primary-btn {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: var(--accent-ink);
  border: none;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
  box-shadow: 0 8px 20px -10px rgba(205, 168, 105, 0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.primary-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.link-btn {
  background: none;
  border: none;
  color: var(--accent-hi);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  font-size: 0.9rem;
  font-family: inherit;
}

.card, .result-panel, .evidence-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin: 16px 0;
  box-shadow: var(--shadow-card);
}
.card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 10px 0 0; }
.card dt { color: var(--text-dim); font-size: 0.85rem; }
.card dd { margin: 0; font-weight: 600; }
.narrative-note { margin-top: 14px; color: var(--text-dim); font-size: 0.93rem; border-top: 1px solid var(--border-soft); padding-top: 12px; }

.verdict { font-weight: 800; padding: 4px 12px; border-radius: 999px; display: inline-block; font-size: 0.82rem; letter-spacing: 0.02em; }
.verdict.flag { background: var(--danger-soft); color: var(--danger); }
.verdict.clear { background: var(--ok-soft); color: var(--ok); }

.next-link {
  display: inline-block;
  margin-top: 26px;
  color: var(--accent-hi);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
}
.next-link:hover { text-decoration: underline; }

/* --- threshold chart --- */
#threshold-chart-wrap, #explore-chart-wrap {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 10px;
}
#threshold-chart, #explore-chart { width: 100%; height: auto; touch-action: none; cursor: grab; }
.readout-row { display: flex; gap: 32px; margin: 18px 0; flex-wrap: wrap; }
.readout { text-align: center; }
.readout span {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--accent-hi);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--accent-warm-soft);
  text-underline-offset: 7px;
  text-decoration-thickness: 1.5px;
}
.readout label { color: var(--text-dim); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* --- precision/recall trade-off panel (threshold section) --- */
.tradeoff-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 22px 24px 24px;
  margin: 22px 0 8px;
}
.tradeoff-label {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.tradeoff-copy { color: var(--text-dim); font-size: 0.9rem; line-height: 1.55; margin: 0 0 18px; max-width: 62ch; }
.tradeoff-body { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 28px; align-items: center; }
#pr-curve {
  width: 100%;
  height: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.tradeoff-numbers { display: flex; flex-direction: column; gap: 16px; }
.tradeoff-stat { border-left: 3px solid var(--accent-border); padding-left: 14px; }
.ts-num {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--accent-hi);
  line-height: 1.1;
}
.ts-label { display: block; color: var(--text); font-size: 0.82rem; font-weight: 600; margin-top: 2px; }
.ts-sub { display: block; color: var(--text-faint); font-size: 0.76rem; margin-top: 2px; }
@media (max-width: 640px) {
  .tradeoff-body { grid-template-columns: 1fr; }
}

/* --- weight sliders --- */
#weight-sliders { display: flex; flex-direction: column; gap: 16px; margin: 22px 0; }
.weight-row { display: grid; grid-template-columns: 220px 1fr 56px; gap: 14px; align-items: center; }
.weight-row label { font-size: 0.9rem; color: var(--text-dim); }
.weight-row input[type=range] { width: 100%; accent-color: var(--accent); }
.weight-row .wval { text-align: right; font-weight: 700; color: var(--accent-hi); }

/* --- explore --- */
.axis-controls { display: flex; gap: 22px; margin: 14px 0; flex-wrap: wrap; align-items: center; }
.axis-controls label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.88rem; font-weight: 600; color: var(--text-dim);
}
/* Fully custom-styled <select> -- appearance:none strips every OS default
   (the native white pill / system font / system arrow that broke the
   dark+gold design system) and replaces it with a chevron drawn in the
   brand's own accent color, so the closed control, the hover state, and
   the focus ring all match the rest of the page. Native browsers still own
   the *open* listbox chrome (unavoidable without a full custom widget),
   but that is not what a user sees at rest or while scanning the page. */
.axis-controls select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0c187' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 38px 9px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 200px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.axis-controls select:hover { border-color: var(--accent-border); background-color: var(--bg-card-hi); }
.axis-controls select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-card), 0 0 0 3px var(--accent-soft);
}
.axis-controls select option { background: var(--bg-card); color: var(--text); }
@media (max-width: 480px) {
  .axis-controls select { min-width: 0; width: 100%; }
}
.honesty-note { color: var(--text-faint); font-size: 0.85rem; margin-top: 10px; }

/* --- evidence / proof --- */
.evidence-panel dl { display: grid; grid-template-columns: 240px 1fr; gap: 10px 18px; }
@media (max-width: 560px) {
  .evidence-panel dl { grid-template-columns: 1fr; gap: 2px 0; }
  .evidence-panel dt { margin-top: 8px; }
}
math { max-width: 100%; }
#formula-full { overflow-x: auto; }
.evidence-panel dt { color: var(--text-dim); font-size: 0.9rem; }
.evidence-panel dd { margin: 0; }
.pass-badge, .fail-badge {
  font-weight: 800; padding: 5px 15px; border-radius: 999px; font-size: 0.95rem; display: inline-block;
  letter-spacing: 0.02em;
}
.pass-badge { background: var(--ok-soft); color: var(--ok); }
.fail-badge { background: var(--danger-soft); color: var(--danger); }

/* --- evidence stats + confusion matrix + chance-baseline compare
   (Step 5, "Verify the Proof") -- the answer to a vendor's bare stat
   tile: every number here carries its own sample size and 95% Wilson CI,
   and the headline recall is compared explicitly to a same-size random
   baseline rather than left to look impressive on its own. --- */
.evidence-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .evidence-stats-row { grid-template-columns: 1fr; }
}
.evidence-stat {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  text-align: center;
}
.es-num {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.05;
  color: var(--accent-hi);
}
.es-label {
  display: block;
  margin-top: 6px;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.es-label a { color: inherit; }
.es-ci {
  display: block;
  margin-top: 6px;
  font-size: 0.76rem;
  color: var(--text-faint);
}

.confusion-wrap { margin: 4px 0 22px; }
.confusion-label {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0 0 10px;
}
.confusion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.cm-cell {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cm-n {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
}
.cm-l { font-size: 0.75rem; line-height: 1.35; opacity: 0.92; }
.cm-tp { background: var(--ok-soft); color: var(--ok); }
.cm-fn { background: var(--danger-soft); color: var(--danger); }
.cm-fp { background: var(--accent-warm-soft); color: var(--accent-warm); }
.cm-tn { background: var(--bg-panel); color: var(--text-dim); }
@media (max-width: 480px) {
  .confusion-grid { grid-template-columns: 1fr; }
}

.baseline-compare {
  background: linear-gradient(160deg, var(--accent-soft), var(--bg-panel) 60%);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 22px;
}
.baseline-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent-hi);
  margin: 0 0 8px;
}
.baseline-copy { margin: 0; font-size: 0.92rem; color: var(--text-dim); line-height: 1.6; }
.baseline-copy strong { color: var(--text); }

.running-stats { display: flex; gap: 26px; flex-wrap: wrap; font-weight: 700; margin-bottom: 12px; }
.run-all-strip { display: flex; flex-wrap: wrap; gap: 3px; }
.run-all-strip span { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.run-all-strip .tp { background: var(--ok); }
.run-all-strip .fn { background: var(--danger); }
.run-all-strip .fp { background: var(--accent-warm); }
.run-all-strip .tn { background: #2c3140; }

.devon-payoff {
  background: linear-gradient(160deg, var(--accent-soft), var(--bg-panel) 55%);
  border: 1px solid var(--accent-border); border-radius: var(--radius-lg);
  padding: 20px 24px; margin: 24px 0;
}
.devon-payoff h3 { margin: 0 0 8px; font-size: 1.15rem; }

.derivation { margin: 30px 0; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 6px 22px 22px; }
.derivation summary { cursor: pointer; padding: 16px 0; font-weight: 700; color: var(--accent-hi); list-style: none; }
.derivation summary::-webkit-details-marker { display: none; }
.derivation summary::before { content: "＋ "; color: var(--accent); }
.derivation[open] summary::before { content: "－ "; }
.formula-visual { font-family: "Fraunces", "iowan old style", Cambria, Georgia, serif; font-size: 1.08rem; background: var(--bg-card); border: 1px solid var(--border-soft); padding: 12px 16px; border-radius: 8px; }
math { font-size: 1.05rem; }
#formula-full code { background: var(--bg-card); padding: 1px 7px; border-radius: 5px; border: 1px solid var(--border-soft); }
.download-link { color: var(--accent-hi); font-weight: 700; }

.trust-signal { margin-top: 30px; padding: 18px 20px; border: 1px solid var(--border-soft); border-left: 3px solid var(--accent-warm); background: var(--bg-panel); border-radius: 8px; color: var(--text-dim); }
.trust-signal strong { color: var(--text); }

/* --- Know the Limits (step 6) --- */
.algo-choice-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-hi);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: 18px 0;
  box-shadow: var(--shadow-card);
}
.algo-choice-label {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--accent-hi);
  font-size: 0.95rem;
}
.algo-choice-compare { margin: 0 0 12px; color: var(--text); line-height: 1.6; }
.algo-choice-rationale {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.65;
}

.limits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.limit-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}
.limit-mark {
  flex: none;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--danger-soft);
  color: var(--danger);
  margin-top: 1px;
}
.limit-mark svg { width: 17px; height: 17px; }
.limit-copy { display: flex; flex-direction: column; gap: 4px; }
.limit-title { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.limit-desc { color: var(--text-dim); font-size: 0.87rem; line-height: 1.55; }

.trust-signal.limits-closing { border-left-color: var(--accent-hi); }

a { color: var(--accent-hi); }
a:hover { color: var(--accent); }

footer {
  border-top: 1px solid var(--border-soft);
  background: var(--bg-panel);
  margin-top: 20px;
}
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 28px 40px;
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(140px, 1fr));
  gap: 32px;
}
@media (max-width: 880px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-inner { grid-template-columns: 1fr; padding: 44px 20px 32px; }
}
.footer-brand .wordmark { margin-bottom: 12px; }
.footer-tagline {
  color: var(--text-dim);
  font-size: 0.87rem;
  line-height: 1.6;
  max-width: 320px;
  margin: 0 0 12px;
}
.footer-transparency {
  color: var(--text-faint);
  font-size: 0.79rem;
  line-height: 1.6;
  max-width: 320px;
  border-left: 2px solid var(--accent-border);
  padding-left: 12px;
  margin: 0;
}
.footer-col-head {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-faint);
  margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--text-dim); text-decoration: none; font-size: 0.87rem; }
.footer-col a:hover { color: var(--accent-hi); }
.footer-legal { color: var(--text-faint); font-size: 0.79rem; line-height: 1.65; margin: 0; }
.footer-bottom {
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 28px 32px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-faint);
  font-size: 0.76rem;
}
@media (max-width: 560px) {
  .footer-bottom { padding: 16px 20px 28px; }
}

.loading { color: var(--text-dim); font-style: italic; }

/* --- paper band: full-bleed warm-parchment section, the counterweight to
   the ink field everywhere else. This is what gives the page a genuine
   multi-tone rhythm (dark -> light -> dark -> light) instead of one
   unbroken dark surface with a single accent color from top to bottom. --- */
.paper-band {
  background: var(--paper);
  border-top: 1px solid var(--paper-border-soft);
  border-bottom: 1px solid var(--paper-border-soft);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  color: var(--paper-text);
}
.paper-band .screen { border-bottom: none; }
.paper-band .eyebrow { color: var(--paper-accent); }
.paper-band .eyebrow::before { background: var(--paper-accent); }
.paper-band .section-intro { color: var(--paper-text-dim); }
.paper-band a { color: var(--paper-accent); }
.paper-band a:hover { color: var(--accent-warm); }

/* --- natural-color photography: the dark screens use a bespoke ink/brass
   duotone (see .cover-media, .proof-visual); the paper band deliberately
   breaks from that with real color + a faint warm wash, so the page reads
   two photographic treatments deep, not one filter reused everywhere. --- */
.natural-media {
  margin: 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--paper-border);
  box-shadow: var(--paper-shadow-card);
  background: var(--paper-card);
}
.natural-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.natural-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(125, 95, 38, 0.1), transparent 55%);
  pointer-events: none;
}
.photo-chip-paper {
  background: rgba(255, 253, 247, 0.92);
  border-color: var(--paper-border);
  color: var(--paper-text);
}

/* --- principles band: the Feedzai-style "named concept" explainer, but
   grounded in what this specific build actually does -- no invented
   product capabilities. --- */
.principles-inner.screen { padding-top: 80px; padding-bottom: 68px; }
.principles-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 880px) {
  .principles-grid { grid-template-columns: 1fr; gap: 28px; }
}
.principles-head {
  font-size: clamp(1.6rem, 2.8vw, 2.15rem);
  font-weight: 500;
  margin: 14px 0 12px;
  max-width: 640px;
  color: var(--paper-text);
}
.principles-inner .section-intro { max-width: 600px; }
.principle-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.principle-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--paper-card);
  border: 1px solid var(--paper-border);
  border-radius: var(--radius);
  padding: 15px 18px;
  box-shadow: var(--paper-shadow-card);
}
.principle-mark {
  flex: none;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(125, 95, 38, 0.12);
  color: var(--paper-accent);
  margin-top: 1px;
}
.principle-mark svg { width: 18px; height: 18px; }
.principle-copy { display: flex; flex-direction: column; gap: 3px; }
.principle-title { font-weight: 700; font-size: 0.97rem; color: var(--paper-text); }
.principle-desc { color: var(--paper-text-dim); font-size: 0.87rem; line-height: 1.55; }

/* --- foundations: closing credibility section, now paired with its own
   header photo so the light band carries real photography too, not just
   text cards. --- */
.foundations-inner.screen { padding-top: 76px; padding-bottom: 84px; }
.foundations-header {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 34px;
}
@media (max-width: 880px) {
  .foundations-header { grid-template-columns: 1fr; gap: 24px; }
}
.foundations-head {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  margin: 14px 0 12px;
  max-width: 560px;
  color: var(--paper-text);
}
.foundations-header .section-intro { max-width: 560px; margin: 0; }

.foundation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 30px 0 8px;
}
.foundation-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--paper-card);
  border: 1px solid var(--paper-border);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  text-decoration: none;
  color: var(--paper-text);
  box-shadow: var(--paper-shadow-card);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.foundation-card:hover {
  transform: translateY(-3px);
  border-color: var(--paper-accent);
  background: #fffef9;
}
.foundation-mark {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(125, 95, 38, 0.12);
  color: var(--paper-text-dim);
  margin-bottom: 4px;
  transition: color 0.15s ease;
}
.foundation-card:hover .foundation-mark { color: var(--paper-accent); }
.foundation-mark svg { width: 18px; height: 18px; }
.foundation-org {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  color: var(--paper-text);
}
.foundation-sub {
  color: var(--paper-text-faint);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.foundation-desc {
  color: var(--paper-text-dim);
  font-size: 0.87rem;
  line-height: 1.5;
  margin-top: 2px;
}
.foundation-desc code {
  background: var(--paper-panel);
  padding: 0 5px;
  border-radius: 4px;
  font-size: 0.85em;
}
.foundation-link {
  color: var(--paper-accent);
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 8px;
}

.foundation-quote {
  margin: 42px 0 4px;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--paper-accent);
  max-width: 680px;
}
.foundation-quote p {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.4;
  color: var(--paper-text);
  margin: 0 0 10px;
}
.foundation-quote cite {
  font-style: normal;
  color: var(--paper-text-dim);
  font-size: 0.88rem;
}
@media (max-width: 560px) {
  .foundations-inner.screen { padding-top: 56px; padding-bottom: 60px; }
  .principles-inner.screen { padding-top: 52px; padding-bottom: 44px; }
}