/* Document pages (privacy, terms, support, 404): a single readable column on
 * the design system's tokens — light and dark both come from tokens/dark.css
 * via [data-theme]. Loaded after styles.css. */

body.doc {
  background: var(--surface-0);
  color: var(--text-body);
  font-family: var(--font-body);
  line-height: var(--lh-relaxed);
}

.doc__header {
  background: var(--dis-navy-900);
  padding: 22px 24px;
}
.doc__header-inner,
.doc__main,
.doc__footer-inner {
  max-width: 760px;
  margin: 0 auto;
}
.doc__header a { display: inline-block; }
.doc__header img { height: 26px; display: block; }

.doc__main { padding: 48px 24px 72px; }
.doc__main h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 40px);
  line-height: var(--lh-tight);
  color: var(--text-strong);
  margin: 0 0 8px;
}
.doc__updated {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 32px;
}
.doc__main h2 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: var(--lh-snug);
  color: var(--text-strong);
  margin: 40px 0 12px;
}
.doc__main h3 {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--text-strong);
  margin: 24px 0 8px;
}
.doc__main p,
.doc__main li { font-size: 16px; }
.doc__main p { margin: 0 0 14px; }
.doc__main ul { margin: 0 0 16px; padding-left: 22px; }
.doc__main li { margin-bottom: 8px; }
.doc__main a { color: var(--text-accent); text-underline-offset: 3px; }
.doc__main strong { color: var(--text-strong); }

.doc__callout {
  background: var(--surface-2);
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin: 0 0 24px;
}
.doc__callout p:last-child { margin-bottom: 0; }

.doc__footer {
  background: var(--dis-navy-900);
  padding: 28px 24px;
}
.doc__footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.doc__footer a { color: rgba(255, 255, 255, 0.8); }

@media (max-width: 760px) {
  .doc__main { padding: 32px 16px 56px; }
  .doc__header,
  .doc__footer { padding-left: 16px; padding-right: 16px; }
}