/* Shared styling for the legal pages (terms, privacy, contact).
   Design tokens live in tokens.css (single source of truth) — link it BEFORE
   this file. Mirrors the calm, editorial theme of the marketing site. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font: 16.5px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--prose); margin: 0 auto; padding: 44px 22px 84px; }

a { color: var(--accent); }
p { color: var(--ink-2); }

header.bar { border-bottom: 1px solid var(--line-soft); background-color: var(--bg); }
header.bar .wrap { padding: 16px 22px; display: flex; align-items: center; gap: 10px; }
header.bar img, header.bar svg { width: 22px; height: 22px; display: block; }
header.bar a.brand {
  color: var(--ink); text-decoration: none;
  font: 500 17px/1 var(--serif); letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 10px;
}

h1 { font: 500 32px/1.12 var(--serif); letter-spacing: -0.01em; margin: 12px 0 8px; }
h2 { font: 500 21px/1.2 var(--serif); letter-spacing: -0.01em; margin: 38px 0 8px; }

.muted { color: var(--muted); }
.updated { color: var(--faint); font: 12.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 30px; }

ul { padding-left: 20px; color: var(--ink-2); }
li { margin: 6px 0; }

code {
  font-family: var(--mono);
  font-size: 0.89em; background: var(--line-soft);
  padding: 1px 5px; border-radius: 4px;
}

table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 15px; }
th, td {
  border-bottom: 1px solid var(--line-soft);
  padding: 11px 12px; text-align: left; vertical-align: top;
  color: var(--ink-2);
}
thead th {
  border-bottom: 1px solid var(--line);
  color: var(--faint); font: 500 11px var(--mono);
  text-transform: uppercase; letter-spacing: 0.08em;
}

.note {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 1px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 15px;
  color: var(--ink-2);
}

footer.site { border-top: 1px solid var(--line-soft); }
footer.site .wrap {
  padding: 26px 22px; color: var(--muted); font: 12.5px var(--mono); letter-spacing: .02em;
  display: flex; gap: 18px; flex-wrap: wrap;
}
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--ink); }