/* Shared styling for the legal pages. Same tokens as index.html. */

:root{
  --ink:#333a1e;
  --ink-soft:#6c714e;
  --ink-faint:#71745c;
  --cream:#fdfaf1;
  --cream-deep:#f6f1df;
  --lime:#d9ef5e;
  --olive:#3f471f;
  --moss:#7a8a3e;
  --card:#ffffff;
  --line:#eae7d6;
  --display:'Bricolage Grotesque', ui-sans-serif, sans-serif;
  --body:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--olive)}
a:hover{color:var(--moss)}
:focus-visible{outline:3px solid var(--moss);outline-offset:2px;border-radius:6px}

.top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 24px;border-bottom:1px solid var(--line);
  max-width:1280px;margin:0 auto;
}
.wordmark{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.02em;color:var(--olive);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.top a.back{font-weight:600;font-size:14.5px;text-decoration:none}

main{max-width:720px;margin:0 auto;padding:56px 24px 96px}

h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,6vw,42px);letter-spacing:-.02em;line-height:1.1;margin-bottom:10px}
.updated{color:var(--ink-faint);font-size:14.5px;margin-bottom:8px}
.intro{color:var(--ink-soft);margin-bottom:40px}

h2{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.01em;margin:38px 0 10px;color:var(--olive)}
h3{font-family:var(--display);font-weight:800;font-size:17px;margin:22px 0 6px}
p{margin-bottom:14px}
ul{margin:0 0 14px 22px}
li{margin-bottom:7px}
strong{font-weight:600}

.callout{
  background:var(--card);
  border:2px solid var(--ink);
  border-radius:16px;
  padding:22px 24px;
  margin:28px 0;
}
.callout p:last-child{margin-bottom:0}
.callout h2{margin-top:0}

footer{
  border-top:1px solid var(--line);
  max-width:720px;margin:0 auto;
  padding:28px 24px 56px;
  color:var(--ink-faint);font-size:14px;
  display:flex;flex-wrap:wrap;gap:18px;
}
footer a{color:var(--ink-soft);display:inline-flex;align-items:center;min-height:44px}

@media (max-width:620px){
  .top{padding:10px 20px}
  main{padding:36px 20px 72px}
}