/* ─────────────────────────────────────────────────────────────────────────
   docs.css — prose styles for the content pages only (about, privacy,
   compare, ai-history). Loaded AFTER chrome.css.

   index.html must not load this: it is an application with its own layout
   and these broad element selectors would fight with it.
   ───────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Mono', monospace;
  font-weight: 300;
  line-height: 1.75;
  min-height: 100vh;
}

body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 999; opacity: var(--noise-opacity);
}

/* ── Page ────────────────────────────────────────────────────────────── */
.page { max-width: 900px; margin: 0 auto; padding: 48px 20px 80px; position: relative; z-index: 1; }

.eyebrow {
  font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 14px;
}

h1 {
  font-family: 'DM Serif Display', serif; font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.12;
  letter-spacing: -.5px; text-wrap: balance; margin-bottom: 14px;
}
h1 em { color: var(--claude); font-style: italic; }

.lede { font-size: 1rem; color: var(--text-dim); max-width: 62ch; margin-bottom: 8px; }

.reviewed {
  display: inline-block; margin-top: 18px;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 100px; padding: 4px 12px;
}

h2 {
  font-family: 'DM Serif Display', serif; font-weight: 400;
  font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.2;
  margin: 52px 0 14px; text-wrap: balance;
}
h3 {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); margin: 30px 0 10px; font-weight: 500;
}

p { margin-bottom: 16px; max-width: 68ch; }
.page a { color: var(--gemini); text-underline-offset: 3px; }
strong { color: var(--text); font-weight: 500; }

ul, ol { margin: 0 0 18px 1.2em; max-width: 66ch; }
li { margin-bottom: 8px; }

hr { border: none; border-top: 1px solid var(--border); margin: 44px 0; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 16px;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.note {
  background: var(--surface-hi); border: 1px solid var(--border);
  border-left: 2px solid var(--warn);
  border-radius: var(--radius-sm); padding: 14px 16px; margin: 20px 0;
  font-size: .84rem; color: var(--text-dim);
}
.note strong { color: var(--text); }

/* wide content must scroll in its own box, never the page body */
.table-wrap { overflow-x: auto; margin: 20px 0; border: 1px solid var(--border); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .8rem; min-width: 560px; }
th, td { border-bottom: 1px solid var(--border); padding: 10px 14px; text-align: left; vertical-align: top; }
th { background: var(--surface); color: var(--text-dim); font-weight: 500; letter-spacing: .06em; }
tr:last-child td { border-bottom: none; }
td.c { color: var(--claude); }
td.g { color: var(--gemini); }
td.o { color: var(--openai); }

.pill {
  display: inline-block; font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 4px;
  border: 1px solid currentColor;
}
.pill-c { color: var(--claude); }
.pill-g { color: var(--gemini); }
.pill-o { color: var(--openai); }

@media (max-width: 600px) {
  .page { padding: 32px 16px 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}


/* The slot sits after prose here rather than between two cards, so it
   needs more air than the tool page's 14px card rhythm. */
.page .ad-slot { margin: 44px auto; }