/*
  The two legal pages, which are the same page twice with different words.

  Shared rather than inlined, unlike `index.html` — that one inlines
  deliberately, because it has to paint before anything is downloaded. A legal
  page is reached by a deliberate click and can afford one request; two copies
  of this that have to be kept in step cannot.

  Tokens are the app's own (design/tokens.json), the same ones the landing page
  uses, so the three do not read as three products.
*/
:root {
  --ground: #fbeed6;
  --ink: #3a2a18;
  --owe: #e5484d;
  --muted: rgba(0, 0, 0, .55);
  --hairline: rgba(0, 0, 0, .08);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 56px 24px 72px; }

.legal h1 {
  font: 700 clamp(28px, 5vw, 34px)/1.1 system-ui;
  letter-spacing: -.03em;
  margin: 0 0 1rem;
}
.legal .lead { color: var(--muted); margin: 0 0 1rem; }
.legal h2 {
  font: 600 17px/1.3 system-ui;
  margin: 1.9rem 0 .5rem;
}
.legal p { margin: 0 0 .75rem; }
.legal ul { margin: 0 0 .75rem; padding-left: 1.25rem; }
.legal li { margin: .25rem 0; }
.legal a { color: var(--owe); }
.legal code {
  font-size: .9em;
  background: rgba(0, 0, 0, .04);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  padding: .05rem .35rem;
}
.legal .muted { color: var(--muted); }
.legal .stand { font-size: .85rem; color: var(--muted); margin-top: 2rem; }

.legal .back {
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
  margin-top: 2.5rem;
  font-size: 13px;
}
.legal .back a { color: rgba(0, 0, 0, .45); }