/* The reading pages: support, privacy, terms. Same material as the home page,
 * set for long text rather than a statement. */

header.bar { display: flex; align-items: center; gap: 14px; height: 104px; }
/* The file fills the mark off-white; opacity quiets it to the app's 30%. */
header.bar .mark { width: 22px; height: 22px; opacity: 0.30; display: block; }
header.bar .back { color: var(--tertiary); transition: color 200ms var(--ease-out); }
header.bar .back:hover { color: var(--primary); }

main.doc {
  max-width: var(--measure);
  padding: clamp(24px, 6vh, 64px) 0 96px;
}
main.doc .lede { margin: 10px 0 44px; }
main.doc .updated { margin: 10px 0 44px; }

main.doc section { margin-top: 44px; }
main.doc h2.kicker { margin: 0 0 14px; }
main.doc h3 { font-size: 17px; line-height: 24px; font-weight: 500; margin: 26px 0 6px; }
main.doc p, main.doc li { color: var(--secondary); margin: 0 0 14px; }
main.doc strong { color: var(--primary); font-weight: 500; }
main.doc ul { padding-left: 1.1em; margin: 0 0 14px; }
main.doc li { margin-bottom: 8px; }
main.doc li::marker { color: var(--tertiary); }

main.doc .contact { padding: 24px 24px 20px; margin: 0 0 8px; }
main.doc .contact .kicker { margin: 0 0 10px; }
main.doc .contact .value { margin: 0 0 8px; }
main.doc .contact .caption { margin: 0; }

main.doc.missing { padding-top: 28vh; }

footer.foot { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; padding: 28px 0 40px; border-top: 1px solid rgba(255,255,255,0.06); }
footer.foot a { color: var(--tertiary); transition: color 200ms var(--ease-out); }
footer.foot a:hover, footer.foot a[aria-current="page"] { color: var(--primary); }
footer.foot .spacer { flex: 1; }
@media (max-width: 480px) {
  footer.foot .spacer { flex-basis: 100%; height: 0; }
  footer.foot { gap: 10px 24px; }
}

/* Left-anchored and deliberately off-centre on wide screens, as the app is:
 * the text starts one column in rather than sitting in the middle. */
@media (min-width: 900px) {
  main.doc { margin-left: 8.33%; }
}