/* ============================================================
   11Tactics — terms and privacy
   Loaded after landing.css, which supplies the tokens, the header
   and the footer. Only the prose column is new.
   ============================================================ */

.docPage {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}

.docPage h1 {
  font-size: clamp(28px, 5vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.docMeta {
  color: var(--text-faint);
  font-size: 14px;
  margin: 0 0 36px;
}

/* The one-paragraph summary above each document. People do not read
   terms; they skim for the answer to "what are you doing with my
   stuff". Answering that in plain words at the top is worth more than
   any amount of careful drafting further down. */
.docSummary {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 0 0 40px;
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.65;
}
.docSummary strong { color: var(--text); font-weight: 600; }

.docPage h2 {
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.docPage h2:first-of-type { border-top: 0; padding-top: 0; }

.docPage h3 {
  font-size: 16px;
  margin: 24px 0 8px;
  color: var(--text);
}

.docPage p,
.docPage li {
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.7;
}

.docPage ul { padding-left: 20px; margin: 12px 0; }
.docPage li { margin-bottom: 8px; }
.docPage li strong { color: var(--text); font-weight: 600; }

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

/* Who gets what data. A table because the alternative is six
   paragraphs saying the same thing less clearly. */
.docTable {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 8px;
  font-size: 14.5px;
}
.docTable th,
.docTable td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-dim);
  line-height: 1.55;
}
.docTable th {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--border-hi);
  white-space: nowrap;
}
.docTable td:first-child { color: var(--text); }

/* Wide content must scroll inside itself rather than pushing the page
   sideways on a phone. */
.tableScroll { overflow-x: auto; margin: 16px 0; }
.tableScroll .docTable { margin: 0; min-width: 460px; }

.docNote {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 13.5px;
  line-height: 1.65;
}

@media (max-width: 640px) {
  .docPage { padding: 36px 16px 60px; }
  .docPage h2 { margin-top: 32px; }
}