/* ------------------------------------------------------------------
   Shared chrome for the legal pages. Tokens are copied from index.html
   rather than extracted out of it: the landing page is a single
   self-contained file on purpose, and splitting it to save four
   declarations would cost more than it saves.
   ------------------------------------------------------------------ */
:root{
  --bg:#FDFBF6;
  --ink:#101014;
  --secondary:#8A8A93;
  --tertiary:#B6B6BE;
  --hairline:#ECE6DA;
  --surface:#ffffff;
  --accent:#EF2773;
  --capture:#E8590C;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hairline)}
a:hover{border-color:var(--ink)}

.header{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,40px);
  background:rgba(253,251,246,.72);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
}
.wordmark{font-weight:900;font-size:20px;letter-spacing:-.02em;border:none}
.backLink{font-size:14px;font-weight:700;color:var(--secondary);border:none}
.backLink:hover{color:var(--ink)}

.doc{
  max-width:720px;margin:0 auto;
  padding:clamp(40px,7vw,72px) clamp(20px,5vw,40px) 0;
}
.doc h1{
  font-size:clamp(30px,5vw,44px);font-weight:900;letter-spacing:-.03em;
  line-height:1.06;margin-bottom:10px;text-wrap:balance;
}
/* `.doc p.updated`, not `.updated`: this is a <p> inside .doc, so the plain
   class selector loses to `.doc p` below and the margin here never applied.
   The gap is deliberately wider than one line so the date reads as part of the
   heading block and then hands over to the body with clear air. */
.doc p.updated{font-size:14px;font-weight:700;color:var(--secondary);margin-bottom:52px}
.doc h2{
  font-size:clamp(19px,2.6vw,23px);font-weight:900;letter-spacing:-.02em;
  margin:38px 0 12px;text-wrap:balance;
}
.doc h3{font-size:16px;font-weight:800;margin:22px 0 8px}
.doc p{font-size:16.5px;font-weight:500;color:#33333a;margin-bottom:14px;text-wrap:pretty}
.doc ul{margin:0 0 16px 20px}
.doc li{font-size:16.5px;font-weight:500;color:#33333a;margin-bottom:9px}
.doc strong{font-weight:800;color:var(--ink)}
.doc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14.5px;background:#F2ECE0;padding:2px 6px;border-radius:6px;
}

/* A boxed aside for the things that actually matter to a reader. */
.note{
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:18px 20px;margin:22px 0;
}
.note p:last-child{margin-bottom:0}
.note.warn{border-color:#F3D2C0;background:#FFF6F0}

.footer{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:clamp(56px,9vw,96px) 20px 48px;
  color:var(--secondary);font-weight:700;font-size:14px;
}
.footerMeta{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:10px}
.footerMeta span:first-child{font-weight:900;color:var(--ink)}
.footerDot{opacity:.5}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}