/* site/pages.css — the document pages: about, contact, privacy, terms.
 *
 * Four pages that were a headline and a column of prose. They share a banded
 * page header, a card grid, and — for the two long legal documents — a sticky
 * contents rail beside the text. Loaded after each page's own <style>, like
 * site/chrome.css, so plain element selectors here win.
 */

/* ── the page header band ────────────────────────────────────────────────── */
.pagehead {
  padding: 64px 72px 40px;
  background: var(--sunk);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 16px;
}
.pagehead .inner { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.pagehead h1 { font-size: 42px; line-height: 1.08; font-weight: 600; letter-spacing: -.022em; max-width: 20ch; }
.pagehead .lede { font-size: 17.5px; line-height: 1.6; color: var(--soft); max-width: 62ch; }
.pagehead .meta {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px;
  font: 400 11.5px/1 var(--mono); color: var(--faint);
}
.pagehead .meta span { border: 1px solid var(--rule); border-radius: var(--r-pill); padding: 7px 12px; background: var(--paper); }

/* ── shared page furniture ───────────────────────────────────────────────── */
.section { padding: 56px 72px; border-bottom: 1px solid var(--rule); }
.section:last-of-type { border-bottom: 0; }
.section .inner { max-width: 1180px; }
.section h2 { font-size: 22px; font-weight: 600; letter-spacing: -.012em; margin-top: 0; }
.section > .inner > p { font-size: 16px; line-height: 1.7; color: var(--soft); max-width: 70ch; margin-top: 12px; }

/* card grid — company facts, contact routes, the other products */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 28px; }
.card {
  border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--paper);
  padding: 22px; display: flex; flex-direction: column; gap: 9px;
}
.card .tag { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.card h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.card p { font-size: 14.5px; line-height: 1.65; color: var(--soft); }
.card .val { font: 400 13.5px/1.6 var(--mono); color: var(--ink); word-break: break-word; }
.card .go { font-size: 14px; font-weight: 500; margin-top: auto; padding-top: 6px; }
.card address { font-style: normal; font: 400 13.5px/1.75 var(--mono); color: var(--ink); }

/* ── the two legal documents ─────────────────────────────────────────────── */
.doc { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; align-items: start;
       max-width: 1180px; padding: 48px 72px 88px; }
.doc-body { max-width: 74ch; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.doc-body h2 {
  font-size: 20px; font-weight: 600; letter-spacing: -.012em;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule);
  scroll-margin-top: 92px;
}
.doc-body h2:first-of-type { margin-top: 6px; }
.doc-body p { font-size: 15.5px; line-height: 1.75; color: var(--soft); }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body ul { margin: 0; padding-left: 20px; color: var(--soft); font-size: 15.5px; line-height: 1.7;
               display: flex; flex-direction: column; gap: 9px; }
.doc-body table { border-collapse: collapse; font-size: 14.5px; color: var(--soft); width: 100%; }
.doc-body th, .doc-body td { border: 1px solid var(--rule); padding: 10px 14px; text-align: left; vertical-align: top; }
.doc-body th { background: var(--sunk); color: var(--ink); font-weight: 600; font-size: 13.5px; }

/* the contents rail. Built from the headings by site/chrome.js, so it cannot
   drift out of step with the document it lists. */
.toc { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 3px; }
.toc .head { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
             color: var(--faint); padding: 0 0 10px 11px; }
.toc a {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: baseline;
  font-size: 13.5px; line-height: 1.45; color: var(--soft);
  padding: 7px 10px; border-left: 2px solid transparent; border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
}
.toc a:hover { color: var(--ink); background: var(--sunk); }
.toc a .n { font: 400 11px/1.55 var(--mono); color: var(--faint); }
.toc a.on { color: var(--ink); font-weight: 500; border-left-color: var(--acc); background: var(--sunk); }
.toc a.on .n { color: var(--acc); }

/* ── footer ──────────────────────────────────────────────────────────────
   Its layout is chrome.css's now - one footer, one place. These pages only
   add the rule that separates it from a document that runs to the bottom. */
footer { border-top: 1px solid var(--rule); }

@media (max-width: 980px) {
  .doc { grid-template-columns: 1fr; gap: 28px; padding: 36px 28px 72px; }
  /* the rail becomes a plain block above the text — sticky is no use with nowhere to stick */
  .toc { position: static; border: 1px solid var(--rule); border-radius: var(--r-card); padding: 16px 12px; }
  .toc .head { padding-left: 10px; }
}
@media (max-width: 1024px) {
  .pagehead, .section, footer { padding-left: 28px; padding-right: 28px; }
  .pagehead h1 { font-size: 32px; }
}
@media (max-width: 560px) {
  .pagehead, .section, footer { padding-left: 16px; padding-right: 16px; }
  .doc { padding-left: 16px; padding-right: 16px; }
  .pagehead { padding-top: 40px; padding-bottom: 30px; }
  .pagehead h1 { font-size: 27px; }
  .section { padding-top: 40px; padding-bottom: 40px; }
  /* the sub-processor table becomes labelled blocks rather than a squeezed grid */
  .doc-body table, .doc-body tbody, .doc-body tr, .doc-body td { display: block; }
  .doc-body table tr:first-child { display: none; }
  .doc-body table tr { border: 1px solid var(--rule); border-radius: var(--r-card); margin-bottom: 10px; }
  .doc-body table td { border: 0; border-top: 1px solid var(--rule); padding: 10px 14px; }
  .doc-body table td:first-child { border-top: 0; color: var(--ink); font-weight: 500; }
  .doc-body table td::before { content: attr(data-label); display: block;
    font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
    color: var(--faint); margin-bottom: 5px; }
  .doc-body table td:first-child::before { content: none; }
}