/* Standalone document pages — privacy, support.
 *
 * The landing page is a sequence of full-bleed sections; these are one column
 * of prose. Rather than bend `page.css`'s section classes into something they
 * are not, this is a small sheet of its own that takes the same tokens, so the
 * type, colour and spacing stay identical without the layout pretending to be
 * the same shape.
 */
@import url("tokens.css");

.doc {
  max-width: 68ch;
  margin-inline: auto;
  padding-block: calc(var(--space-2xl) + 3rem) var(--space-2xl);
}

.doc__head {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--rule);
}

.doc h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-sm);
}

.doc__lede { color: var(--ink-quiet); margin: 0; }

.doc h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-xl) 0 var(--space-sm);
}

.doc h3 {
  font-size: 1.02rem;
  font-weight: 600;
  margin: var(--space-lg) 0 var(--space-xs);
}

.doc p,
.doc li { line-height: var(--leading-body); color: var(--ink); }
.doc p { margin: 0 0 var(--space-md); }

.doc ul { margin: 0 0 var(--space-md); padding-left: 1.15rem; }
.doc li { margin-bottom: var(--space-sm); }

.doc code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

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

.doc__trailing {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule);
}

/* Question-and-answer blocks. Used by the FAQ on the landing page too, which is
 * why this lives here rather than inside `.doc`. */
.qa { border-top: 1px solid var(--rule); }

.qa__item { border-bottom: 1px solid var(--rule); padding-block: var(--space-lg); }

.qa__q {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-sm);
}

.qa__a { margin: 0; color: var(--ink-quiet); line-height: var(--leading-body); }
.qa__a + .qa__a { margin-top: var(--space-sm); }
.qa__a code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--ink);
}