/* ==========================================================================
   DualQuant design system

   The look is a research house, not a software dashboard: a dark desk, a
   serif for what we say, a mono for what we measured, and one ivory sheet of
   paper on the page -- the verdict -- because the report is the product.

   No web fonts and no external asset of any kind. The operator reviews this
   by opening the folder, and `test_every_page_opens_from_the_filesystem`
   fails on anything that needs the network. These are stacks every platform
   already carries, and the page must look right with nothing downloaded.
   ========================================================================== */

:root {
  --bg-primary: #0B0F15;
  --bg-secondary: #10161F;
  --bg-tertiary: #18202C;
  --bg-card: #131A24;

  --paper: #F5F1E7;
  --paper-rule: #DAD3C2;
  --ink: #171A1F;
  --ink-muted: #565B63;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(52, 211, 153, 0.38);

  --text-main: #F3F1EA;
  --text-muted: #A9B2BF;
  --text-dim: #7D8896;

  --accent-green: #34D399;
  --accent-green-glow: rgba(52, 211, 153, 0.12);
  --accent-amber: #F59E0B;
  --accent-amber-glow: rgba(245, 158, 11, 0.13);
  --accent-red: #EF4444;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  color-scheme: dark;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Visible only when tabbed to. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent-green);
  color: #06140E;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}

.skip-link:focus { left: 0; }

a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

/* -- header --------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 15, 21, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-main);
}

.brand-icon {
  width: 32px;
  height: 32px;
  background: var(--accent-green);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #06140E;
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.nav-link:hover { color: var(--text-main); }

/* -- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-large {
  padding: 13px 26px;
  font-size: 16px;
}

.btn-primary {
  background: var(--accent-green);
  color: #06140E;
}

.btn-primary:hover { background: #6EE7B7; }

.btn-secondary {
  background: transparent;
  color: var(--text-main);
  border-color: var(--border-medium);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
}

/* -- shared type ---------------------------------------------------------- */

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 14px;
}

.section {
  padding: 96px 0;
  border-top: 1px solid var(--border-subtle);
}

.section-tight { padding: 80px 0; }

.section-band { background: var(--bg-secondary); }

.section-header {
  max-width: 720px;
  margin-bottom: 52px;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.section-desc {
  margin-top: 14px;
  font-size: 18px;
  color: var(--text-muted);
}

/* -- 1. the hero ---------------------------------------------------------- */

.hero-section { padding: 76px 0 64px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 3.6vw, 51px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin-bottom: 24px;
}

.hero-title span { display: block; }

.hero-subtitle {
  max-width: 540px;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* -- the verdict, set as a sheet of paper --------------------------------- */

.report {
  background: var(--paper);
  color: var(--ink);
  border-radius: 6px;
  padding: 28px 30px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--paper-rule);
  margin-bottom: 16px;
}

.report-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.report-subject {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.report-line {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.24;
  margin-bottom: 22px;
}

.report-compare-label {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.report-bar-row { margin-bottom: 11px; }

.report-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  margin-bottom: 4px;
}

.report-bar-label strong {
  font-family: var(--font-mono);
  font-size: 14px;
}

.report-bar-track { height: 8px; }

.report-bar {
  height: 100%;
  border-radius: 0 4px 4px 0;
}

.report-bar.bar-0 { background: #9A9486; }
.report-bar.bar-1 { background: #1F6F54; }

.report-gap {
  font-size: 13px;
  font-weight: 600;
  color: #A32020;
  margin: 12px 0 16px;
}

/* The ladder's result on this one run. The word carries the meaning; the
   colour only repeats it, so nothing depends on seeing red from green. */
.report-checks {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--paper-rule);
}

.report-checks li {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.check-name {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.check-result {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #1F6F54;
}

.check-failed .check-result { color: #A32020; font-weight: 700; }
.check-not-run .check-result { color: var(--ink-muted); }
.check-not-run .check-name { color: var(--ink-muted); }

.report-meta {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 14px;
}

.report-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1F6F54;
  text-decoration: none;
}

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

.report-moral {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 18px;
}

/* The chip colours are the verdict's own meaning, not decoration: green is
   the only pass, red is a disproof, amber is "could not run" and grey is
   "we could not show the data was the data". Four states that must not read
   as each other, which is the same reason the schema keeps them apart. */
.verdict-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 5px 11px;
  border-radius: 4px;
  white-space: nowrap;
}

.v-CHECKED     { background: var(--accent-green); color: #06140E; }
.v-REJECTED    { background: #B42318; color: #FFF7F5; }
.v-BLOCKED     { background: var(--accent-amber); color: #1A1003; }
.v-UNCHECKABLE { background: var(--text-dim); color: #0B0F15; }

/* -- facts under the hero ------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
}

.fact-value {
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.fact-detail {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.hero-status {
  max-width: 820px;
  margin-top: 28px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-dim);
}

/* -- three steps ---------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
}

.step { display: flex; flex-direction: column; }

.step-num {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 1;
  color: var(--accent-green);
  margin-bottom: 14px;
}

.step-title {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 8px;
}

.step-desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.step-link {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-green);
  text-decoration: none;
}

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

/* -- 2. the two modes ----------------------------------------------------- */

.modes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.mode-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 32px;
}

.mode-number {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-green);
  margin-bottom: 10px;
}

.mode-name {
  font-family: var(--font-serif);
  font-size: 29px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.mode-tagline {
  font-size: 17px;
  color: var(--text-main);
  margin-bottom: 14px;
}

.mode-desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.mode-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 10px;
}

.mode-ladder { list-style: none; }

.mode-rung {
  padding: 10px 0;
  border-top: 1px solid var(--border-subtle);
}

.mode-rung-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 1px;
}

.mode-rung-name {
  font-size: 14.5px;
  font-weight: 600;
}

.rung-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

.mode-rung-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.mode-note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.mode-label-row {
  padding: 10px 0;
  border-top: 1px solid var(--border-subtle);
}

.mode-label-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent-green);
}

.mode-label-desc {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Pushed to the bottom of the card, so the two cards' buttons line up however
   their copy runs. The limit is last on purpose: what a mode will not do
   belongs with the mode, not in a disclaimer nobody reaches. */
.mode-foot {
  margin-top: auto;
  padding-top: 26px;
}

.mode-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.mode-limit {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* -- 3. the benefits ------------------------------------------------------ */

.benefit {
  display: grid;
  grid-template-columns: 130px minmax(0, 340px) minmax(0, 1fr);
  gap: 28px;
  align-items: baseline;
  padding: 24px 0;
  border-top: 1px solid var(--border-subtle);
}

.benefit-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-green);
}

.benefit-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.benefit-desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.guarantees {
  margin-top: 28px;
  padding: 30px 32px;
  background: var(--bg-secondary);
  border-radius: 10px;
}

.guarantees-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
}

.guarantees-list {
  list-style: none;
  columns: 2;
  column-gap: 44px;
}

.guarantee-item {
  break-inside: avoid;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  padding: 6px 0;
}

.guarantee-item strong {
  color: var(--text-main);
  font-weight: 600;
}

.paper-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 32px;
}

.paper-label {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
}

.paper-text {
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* -- pricing -------------------------------------------------------------- */

.price-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.price-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-accent);
  border-radius: 10px;
  padding: 34px;
}

.price-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 8px;
}

.price-amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.price-figure {
  font-family: var(--font-serif);
  font-size: 66px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.price-per {
  font-size: 16px;
  color: var(--text-muted);
}

.price-name {
  font-size: 19px;
  font-weight: 600;
  margin: 6px 0 18px;
}

.price-features {
  list-style: none;
  margin-bottom: 26px;
}

.price-features li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
  padding: 8px 0;
  border-top: 1px solid var(--border-subtle);
}

.price-action { width: 100%; }

.price-note {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
  text-align: center;
}

.price-aside + .price-aside {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--border-subtle);
}

.price-aside-label {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 8px;
}

.price-aside-text {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* -- footer --------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--border-subtle);
  padding: 52px 0 38px;
}

.footer-contact {
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.4;
  margin-bottom: 18px;
}

.footer-contact a {
  color: var(--accent-green);
  text-decoration: none;
}

.footer-contact a:hover { text-decoration: underline; }

.footer-contact-note {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

.footer-disclaimer {
  max-width: 820px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 18px;
}

.footer-copy {
  font-size: 12.5px;
  color: var(--text-dim);
}

/* -- narrower screens ----------------------------------------------------- */

@media (max-width: 1080px) {
  .status-badge { display: none; }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero-title { font-size: clamp(34px, 7.4vw, 60px); }
  .modes-grid { grid-template-columns: minmax(0, 1fr); }
  .price-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .benefit { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* THE HEADER AT PHONE WIDTH. The links stay reachable in a scrollable row
   rather than disappearing: on a page this long they are the only way to
   reach a section directly. The one action moves to the top row. */
@media (max-width: 760px) {
  .section { padding: 68px 0; }
  .section-tight { padding: 60px 0; }
  .hero-section { padding: 48px 0 44px; }
  .section-header { margin-bottom: 36px; }

  .nav-wrap {
    height: auto;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding-top: 10px;
    padding-bottom: 8px;
  }

  .nav-links {
    width: 100%;
    margin-left: 0;
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar { display: none; }

  #nav-cta { display: none; }

  .facts, .steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .facts { margin-top: 44px; }
  .guarantees { padding: 24px 22px; }
  .guarantees-list { columns: 1; }
  .mode-card, .price-card { padding: 24px 22px; }
  .paper-bar { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 480px) {
  .report { padding: 22px 20px 20px; }
  .report-line { font-size: 21px; }
  .report-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .hero-actions .btn { width: 100%; }
  .mode-actions .btn { width: 100%; }
}


/* ==========================================================================
   DOCUMENT PAGES -- the white paper, the terms, the privacy notice
   Long-form prose, so the constraints are different from the landing page:
   a measure that does not run past about 70 characters, a heading scale that
   survives ten levels of nesting, and nothing that moves. These pages are
   read, not scanned.
   ========================================================================== */

.doc-header {
  border-bottom: 1px solid var(--border-subtle);
  padding: 18px 0;
  margin-bottom: 48px;
}

.doc-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.doc-back {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
}

.doc-back:hover { color: var(--accent-green); }

.doc-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

.doc-title {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 14px;
}

.doc-wrap .doc-standfirst {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.doc-wrap .doc-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 36px;
}

.doc-toc {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 48px;
}

.doc-toc-title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 12px;
}

.doc-toc ol {
  margin: 0;
  padding-left: 20px;
  color: var(--text-dim);
}

.doc-toc li { margin: 5px 0; font-size: 14.5px; }

.doc-wrap .doc-toc a {
  color: var(--text-muted);
  text-decoration: none;
}

.doc-wrap .doc-toc a:hover { color: var(--accent-green); }

.doc-wrap h2 {
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 52px 0 14px;
  scroll-margin-top: 24px;
}

.doc-wrap h3 {
  font-size: 17px;
  font-weight: 650;
  color: var(--text-main);
  margin: 30px 0 10px;
}

.doc-wrap p {
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.doc-wrap li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 9px;
}

.doc-wrap ul, .doc-wrap ol { padding-left: 22px; margin-bottom: 18px; }

.doc-wrap strong { color: var(--text-main); font-weight: 650; }

.doc-wrap a { color: var(--accent-green); }

.doc-wrap code {
  font-family: var(--font-mono);
  font-size: 13.5px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 5px;
}

/* A claim the reader should be able to hold us to, set apart from the prose
   around it so it cannot be skimmed past. */
.doc-pull {
  border-left: 3px solid var(--accent-green);
  background: var(--accent-green-glow);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 26px 0;
}

.doc-pull p:last-child { margin-bottom: 0; }

/* An admission. Same weight as a promise, deliberately: a page that styles
   its good news louder than its gaps is doing the thing this service exists
   to catch. */
.doc-gap {
  border-left: 3px solid var(--accent-amber);
  background: var(--accent-amber-glow);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 26px 0;
}

.doc-gap p:last-child { margin-bottom: 0; }

.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0 26px;
  font-size: 14.5px;
}

.doc-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-green);
  border-bottom: 1px solid var(--border-medium);
  padding: 8px 12px 8px 0;
  vertical-align: bottom;
}

.doc-table td {
  border-bottom: 1px solid var(--border-subtle);
  padding: 11px 12px 11px 0;
  color: var(--text-muted);
  line-height: 1.6;
  vertical-align: top;
}

.doc-table td:first-child { color: var(--text-main); font-weight: 600; }

.doc-foot {
  border-top: 1px solid var(--border-subtle);
  margin-top: 64px;
  padding-top: 24px;
  font-size: 14px;
  color: var(--text-dim);
}

.doc-foot a { color: var(--accent-green); text-decoration: none; }

.footer-docs {
  font-size: 14px;
  margin-bottom: 14px;
}

.footer-docs a {
  color: var(--text-muted);
  text-decoration: none;
}

.footer-docs a:hover { color: var(--accent-green); }

.footer-sep { color: var(--text-dim); margin: 0 10px; }

/* ---------------------------------------------------------------------------
   DOCUMENT PROSE THAT HAD NO STYLES AT ALL

   `.doc-quote`, `.doc-code`, `.doc-list` and `.doc-note` were being used by
   the examples page and were defined NOWHERE in this file -- found
   2026-11-06 while splitting that page in two. The markup looked considered
   and rendered as browser defaults, which on a dark page means a <pre> with
   no panel, a <blockquote> that is only indented, and a closing note at the
   same weight as the body. Nothing fails when a class does not exist, which
   is why this survived.

   The same page also wrote `.doc-footer`/`.doc-fine` while the white paper
   wrote `.doc-foot`. One of the two had styles. Both example pages now use
   `.doc-foot`, so there is one spelling.
   --------------------------------------------------------------------------- */

.doc-quote {
  border-left: 3px solid var(--border-medium);
  padding: 2px 0 2px 20px;
  margin: 24px 0;
  font-size: 16px;
  line-height: 1.8;
  font-style: italic;
  color: var(--text-main);
}

.doc-code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.85;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 24px 0;
  overflow-x: auto;
  color: var(--text-muted);
  white-space: pre;
}

.doc-list { margin: 18px 0 26px; }

.doc-list li { margin-bottom: 13px; }

.doc-wrap .doc-note {
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-dim);
  border-top: 1px solid var(--border-subtle);
  padding-top: 18px;
  margin-top: 40px;
}

@media (max-width: 640px) {
  .doc-title { font-size: 30px; }
}