/* Support, privacy and terms. Loaded after base.css, which carries the tokens,
   the face, the nav and the closing band shared with the marketing page.

   These are documents, so the composition is the opposite of the landing page's:
   one measured column, no imagery, no motion beyond what base.css already does.
   What they share with it is the voice, not the layout. */

/* ------------------------------------------------------------------ page -- */
.doc {
  max-width: 46rem;          /* ~72ch at this size; prose, not a landing width */
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: clamp(40px, 6vw, 72px) clamp(64px, 9vw, 104px);
}

/* --------------------------------------------------------------- masthead -- */
/* Left-aligned rather than centred like the old pages: the body below is
   left-aligned, and a centred title over a ragged-left column never sat right. */
.doc-head {
  padding-bottom: clamp(24px, 3vw, 36px);
  margin-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.doc-head h1 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.025em;
}
.doc-head .tagline {
  margin-top: 12px;
  color: var(--muted);
  font-size: 1.0625rem;
  max-width: 34em;
}
.doc-head .updated {
  margin-top: 14px;
  font-size: .875rem;
  color: var(--muted);
}

/* ------------------------------------------------------------------ prose -- */
.doc h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  margin-top: clamp(40px, 5vw, 60px);
  margin-bottom: 14px;
  letter-spacing: -.015em;
}
/* A hairline above each h2 gives the long documents a scannable rhythm without
   a table of contents, which none of them are long enough to earn. */
.doc h2::before {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  background: var(--accent);
  margin-bottom: 18px;
}
.doc h3 {
  font-size: 1.125rem;
  margin-top: 30px;
  margin-bottom: 8px;
  color: var(--ink);
}
.doc p, .doc li {
  color: var(--ink-soft);
  max-width: 38em;
}
.doc p { margin-bottom: 15px; }
.doc ul, .doc ol { padding-left: 20px; margin: 0 0 15px; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--muted); }
.doc a { text-decoration: underline; }

/* ------------------------------------------------------------------- card -- */
/* The one panel these pages use: the thing to do first, before the prose. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: clamp(20px, 3vw, 28px);
  margin-bottom: clamp(28px, 4vw, 40px);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ table -- */
/* Privacy carries one table. It scrolls inside its own box rather than widening
   the page, which is the only way a three-column table survives a phone. */
.doc-table {
  overflow-x: auto;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.doc-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  min-width: 30rem;
}
.doc-table th, .doc-table td {
  text-align: left;
  padding: 13px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.doc-table tr:last-child th,
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table th { color: var(--ink); font-weight: 600; }
.doc-table td { color: var(--ink-soft); }