/*
  The document pages: privacy, terms, security.
  ── Why these do not use landing.css ─────────────────────────────────────

  The marketing stylesheet is built out of bands — a hero, a strip, a grid of cards, a
  tail — each of which sets its own padding and its own background so that a page reads as
  a sequence of pitches. A policy is the opposite shape: one column of continuous prose
  that somebody scrolls looking for a single answer, usually about their own data.

  Dressing that in card grids would make it look like more marketing, which is exactly the
  wrong signal on the page where the promise is that nothing is being dressed up.

  Shared by all three because they are the same object — a document with a date on it — and
  a second copy of these rules would drift.
*/

.doc {
  max-width: 68ch;
  margin: 0 auto;
  padding: 44px 26px 72px;
}

.doc-head { margin-bottom: 40px; }
.doc-head h1 { margin: 0 0 10px; font: 600 34px/1.2 var(--serif); letter-spacing: -.01em; }
.doc-head .eyebrow { margin: 0 0 14px; }

/* When it was last changed, which is the first thing a careful reader looks for. */
.doc-date {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-3);
}

/*
  The summary, before the detail.

  A policy nobody finishes is a policy nobody read. This carries the four things most
  people actually came to find out, and every one of them is repeated in full below —
  it is a way in, never the only place something is said.
*/
.doc-gist {
  margin: 26px 0 0;
  padding: 20px 24px;
  background: var(--accent-bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.doc-gist h2 { margin: 0 0 12px; font: 600 15px/1.3 var(--sans); letter-spacing: .02em; text-transform: uppercase; color: var(--accent-2); }
.doc-gist ul { margin: 0; padding-left: 20px; }
.doc-gist li { margin: 0 0 8px; color: var(--ink-2); }
.doc-gist li:last-child { margin-bottom: 0; }

.doc section { margin-top: 40px; scroll-margin-top: 24px; }
.doc h2 { margin: 0 0 14px; font: 600 22px/1.3 var(--serif); }
.doc h3 { margin: 26px 0 10px; font: 600 16px/1.35 var(--sans); }
.doc p { margin: 0 0 14px; color: var(--ink-2); line-height: 1.62; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 22px; color: var(--ink-2); line-height: 1.62; }
.doc li { margin-bottom: 7px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--accent); }

/* A table of what is collected. Scrolls inside itself rather than widening the page. */
.doc-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.doc table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 14.5px; }
.doc th, .doc td {
  text-align: left;
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-2);
}
.doc th { color: var(--ink); font-weight: 600; white-space: nowrap; }

/*
  A stated limit, rather than a reassurance.

  Used where the honest answer is "we do not have this yet". Deliberately not styled as a
  warning: it is a fact about the product, and a red box would make a straight answer look
  like an incident.
*/
.doc-limit {
  margin: 0 0 16px;
  padding: 16px 20px;
  background: var(--sunken);
  border-left: 3px solid var(--rule-2);
  border-radius: 0 8px 8px 0;
}
.doc-limit p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .doc { padding: 30px 20px 56px; }
  .doc-head h1 { font-size: 28px; }
}