/* ============================================================
   LEGAL — one page, three sections, reached by anchor.
   Loaded after tokens.css and landing.css, which already supply
   the shell, the top bar and the footer.

   Deliberately plain. This is the page somebody reads when they
   are annoyed or worried, and the kindest thing it can be is
   easy to scan and short enough to finish.
   ============================================================ */

.legal-head { padding: 56px 0 8px; }
.legal-head h1 { font-size: clamp(30px, 5vw, 40px); letter-spacing: -.022em; margin-bottom: 12px; }
.legal-head p { color: var(--ink-soft); font-size: 16px; max-width: 56ch; }
.legal-updated { margin-top: 14px; font-size: 13.5px; color: var(--ink-faint); }

/* Jump links. Three sections is few enough that a list beats a
   sidebar, and it works on a phone without becoming furniture. */
.legal-jump {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 26px 0 10px; padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.legal-jump a {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 16px; font-size: 13.5px; font-weight: 650;
  text-decoration: none; color: var(--ink-soft);
}
.legal-jump a:hover { border-color: var(--accent-2); color: var(--accent); }

.legal { padding-bottom: 80px; }
/* scroll-margin so an anchor jump doesn't tuck the heading under
   the sticky top bar. */
.legal section { padding-top: 44px; scroll-margin-top: 76px; }
.legal h2 {
  font-size: 25px; letter-spacing: -.02em; margin-bottom: 6px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.legal h3 { font-size: 17px; letter-spacing: -.012em; margin: 26px 0 7px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; }
.legal p { margin-bottom: 12px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 7px; }
.legal b { color: var(--ink); font-weight: 650; }
.legal a { color: var(--accent); font-weight: 600; }

/* The one thing on this page a customer most often needs: the
   short version, before the long version. */
.legal-gist {
  background: color-mix(in oklab, var(--accent-2) 7%, transparent);
  border-left: 3px solid var(--accent-2);
  border-radius: 4px 10px 10px 4px;
  padding: 15px 18px; margin: 16px 0 20px;
}
.legal-gist p { margin: 0; color: var(--ink); font-size: 15px; }
.legal-gist p + p { margin-top: 8px; }

.legal-who {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px 20px; margin-top: 30px;
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.6;
}
.legal-who b { display: block; color: var(--ink); margin-bottom: 4px; }

@media (max-width: 560px) {
  .legal-head { padding-top: 36px; }
  .legal section { padding-top: 34px; }
}