/* Shared styles for /privacy.html and /terms.html — matches the homepage look. */
:root {
  --paper: #fff8e7;
  --ink: #111111;
  --ink-2: #3b3b3b;
  --ink-3: #6b6b6b;
  --white: #ffffff;
  --lime: #c6ff3d;
  --purple: #8b5cf6;
  --border: 3px solid var(--ink);
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-display);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(17,17,17,.09) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px dashed var(--purple); outline-offset: 3px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

/* nav */
.nav { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: var(--border); }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--lime); border: var(--border); box-shadow: 3px 3px 0 var(--ink);
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
  transform: rotate(-6deg);
}
.back {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: inherit;
  text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--white);
}
.back:hover { background: var(--lime); }

/* document */
.doc { max-width: 760px; margin: 0 auto; padding: 72px 32px 112px; }
@media (max-width: 640px) { .doc { padding: 48px 16px 80px; } }
.eyebrow {
  display: inline-block; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px;
  background: var(--white); border: var(--border);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
}
h1 { font-weight: 800; font-size: clamp(44px, 7vw, 76px); line-height: .98; letter-spacing: -.04em; margin: 0 0 16px; }
.updated { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); margin: 0 0 40px; }
.summary {
  background: var(--lime); border: var(--border); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink);
  padding: 22px 26px; margin: 0 0 48px; font-size: 17px;
}
.summary p { margin: 0; }
h2 { font-weight: 800; font-size: 26px; letter-spacing: -.02em; line-height: 1.15; margin: 48px 0 12px; }
p, li { font-size: 17px; color: var(--ink-2); }
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 6px; }
li::marker { color: var(--purple); }
b, strong { color: var(--ink); }
.doc a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doc a:hover { background: var(--lime); }

/* footer */
footer { background: var(--ink); color: var(--paper); border-top: var(--border); padding: 28px 0; }
.foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 13px; }
.foot-row a { color: var(--paper); text-decoration: none; margin-left: 16px; }
.foot-row a:first-child { margin-left: 0; }
.foot-row a:hover { color: var(--lime); }