/* Shared styling for the two legal pages.
   Same tokens as index.html, set for long-form reading rather than selling:
   one column at a comfortable measure, generous leading, headings that are
   scannable because these are documents people search rather than read. */
:root {
  --ink: #F3F7F5;
  --ink-dim: #A8B6B0;
  --ink-faint: #6F817A;
  --ground: #070D0B;
  --ground-2: #0C1512;
  --surface: #111C18;
  --line: #1E2E28;
  --green: #17B377;
  --green-lift: #30D98B;
  --sans: ui-rounded, -apple-system, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.wrap { width: min(46rem, 100% - 2.5rem); margin-inline: auto; }

header {
  border-bottom: 1px solid var(--line);
  background: var(--ground-2);
  padding-block: 1rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 700; letter-spacing: -0.02em; text-decoration: none; color: var(--ink);
}
.brand svg { width: 28px; height: 28px; border-radius: 7px; display: block; }

main { padding-block: 3.5rem 5rem; }
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 .75rem; }
h2 {
  font-size: 1.28rem; letter-spacing: -0.02em; margin: 3rem 0 .85rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
h2:first-of-type { border-top: 0; padding-top: 0; }
h3 { font-size: 1.02rem; margin: 1.75rem 0 .5rem; }
p, li { color: var(--ink-dim); }
p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.2rem; }
li { margin-bottom: .5rem; }
strong { color: var(--ink); font-weight: 700; }
a { color: var(--green-lift); }
.updated { color: var(--ink-faint); font-size: .9rem; margin-bottom: 2.5rem; }

/* The one thing on either page nobody should be able to skim past. */
.callout {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--green); border-radius: 12px;
  padding: 1.25rem 1.4rem; margin: 0 0 2rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout p { color: var(--ink); }

table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .93rem; }
th, td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink); font-weight: 700; }
td { color: var(--ink-dim); }
.scroller { overflow-x: auto; }

footer { border-top: 1px solid var(--line); padding-block: 2rem 3rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1rem; }
.foot-links a { color: var(--ink-dim); text-decoration: none; font-size: .93rem; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.copyright { color: var(--ink-faint); font-size: .85rem; }
:where(a, button):focus-visible { outline: 2px solid var(--green-lift); outline-offset: 3px; border-radius: 4px; }