/* ================================================================
   doc.css — chrome for standalone document pages
   (privacy, terms, contact, about)

   The homepage nav starts transparent over a dark hero and frosts on
   scroll. These pages have no hero, so the nav is solid from the first
   pixel and the logo is the navy one. Everything else — colour, type,
   spacing — comes from tokens.css / components.css.
   ================================================================ */

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-text); }

/* ---------- nav ---------- */
.doc-nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(0,45,98,.06);
  padding: 12px 0;
}
.doc-nav__in { display: flex; align-items: center; gap: var(--space-6); }
.doc-nav__logo img { height: 17px; width: auto; display: block; }
.doc-nav__links { display: flex; gap: var(--space-6); margin-left: auto; align-items: center; flex-wrap: wrap; }
.doc-nav__links a {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.doc-nav__links a:hover { color: var(--color-text-strong); }

/* ---------- document body ---------- */
.doc { padding-block: var(--space-16) var(--space-20); }
.doc__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.doc h1 {
  font-family: var(--font-display);
  font-size: var(--text-display-m);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
}
.doc__lede {
  font-size: var(--text-body-lg);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-10);
  max-width: 60ch;
}
.doc h2 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
  margin: var(--space-12) 0 var(--space-4);
  scroll-margin-top: 80px;
}
.doc h3 {
  font-size: var(--text-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
  margin: var(--space-8) 0 var(--space-2);
}
.doc p, .doc li { font-size: var(--text-body); line-height: 1.7; color: var(--color-text); }
.doc p { margin: 0 0 var(--space-4); }
.doc ul, .doc ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.doc li { margin-bottom: var(--space-2); }
/* :not(.rl-btn) — a button inside the prose keeps its own colour, otherwise
   this rule paints navy link text onto a navy button and it disappears. */
.doc a:not(.rl-btn) { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 2px; }
.doc strong { font-weight: var(--fw-semibold); color: var(--color-text-strong); }
.doc hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-12) 0; }

/* ---------- the "what this page is" note under the title ---------- */
.doc__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6);
  font-family: var(--font-mono); font-size: var(--text-caption);
  color: var(--color-text-muted);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

/* ---------- table (subprocessors, contact rows) ---------- */
.doc-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-6); font-size: var(--text-body-sm); }
.doc-table th, .doc-table td {
  text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border); vertical-align: top;
}
.doc-table th { color: var(--color-text-strong); font-weight: var(--fw-semibold); white-space: nowrap; }
.doc-table td { color: var(--color-text); }
.doc-table--scroll { display: block; overflow-x: auto; }

/* ---------- company identity block ---------- */
.doc-company {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  padding: var(--space-6);
  margin: 0 0 var(--space-8);
}
.doc-company dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); }
.doc-company dt { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.doc-company dd { margin: 0; font-size: var(--text-body-sm); color: var(--color-text-strong); }
@media (max-width: 560px) {
  .doc-company dl { grid-template-columns: 1fr; gap: var(--space-1) 0; }
  .doc-company dd { margin-bottom: var(--space-3); }
}

/* ---------- footer ---------- */
.doc-footer { padding: var(--space-12) 0 var(--space-10); background: var(--color-bg-subtle); }
.doc-footer__grid { display: flex; flex-wrap: wrap; gap: var(--space-8); justify-content: space-between; align-items: start; }
.doc-footer__logo img { height: 15px; width: auto; display: block; }
.doc-footer a { color: var(--color-text-muted); text-decoration: none; font-size: var(--text-body-sm); }
.doc-footer a:hover { color: var(--color-text-strong); }
.doc-footer__links { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.doc-footer__legal { color: var(--color-text-muted); font-size: var(--text-body-sm); line-height: 1.6; margin: var(--space-3) 0 0; max-width: 46ch; }
.doc-footer__copy { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-caption); margin: var(--space-8) 0 0; }