/* The privacy notice, the terms of use and any other plain document page.
   site.css carries the tokens, the type and the colour scheme; this is layout only. */

body.doc {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  margin: 0;
  padding: 0 20px 80px;
  line-height: 1.65;
}

.doc-head,
.doc-body,
.doc-foot { max-width: 760px; margin: 0 auto; }

.doc-head { padding: 48px 0 8px; }
.doc-brand { display: inline-block; margin-bottom: 28px; }
.doc-head h1 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.1; margin: 6px 0 16px; }
.doc-head .lede { font-size: 1.08rem; color: var(--ink); opacity: .9; margin: 0 0 10px; }

.doc-body section { padding: 20px 0 16px; }
.doc-body h2 { font-size: 1.35rem; margin: 0 0 12px; }
.doc-body p { margin: 0 0 12px; }
.doc-body ul { margin: 0 0 12px; padding-left: 20px; }
.doc-body li { margin-bottom: 8px; }
.doc-body code { font-family: var(--mono); font-size: .9em; background: var(--bg-2); padding: 1px 5px; border-radius: var(--r-sm); }

/* The transfer table is the part a reader is most likely to come for, so it is the one
   element given a border of its own rather than left to run as prose. */
.doc-table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: .95rem; }
.doc-table th,
.doc-table td { text-align: left; vertical-align: top; padding: 10px 12px; border: 1px solid var(--rule); }
.doc-table th { background: var(--bg-2); font-weight: 600; }

.contact-line.pending { color: var(--ink); opacity: .85; }

.doc-foot { padding: 40px 0 0; }
.doc-foot a { color: inherit; }

@media (max-width: 560px) {
  .doc-head { padding-top: 32px; }
  .doc-table,
  .doc-table thead,
  .doc-table tbody,
  .doc-table tr,
  .doc-table th,
  .doc-table td { display: block; width: 100%; box-sizing: border-box; }
  .doc-table thead { display: none; }
  .doc-table tr { margin-bottom: 10px; }
  .doc-table td { border-top: none; }
  .doc-table tr td:first-child { border-top: 1px solid var(--rule); font-weight: 600; }
}