/* 📜 legal.css: the look of /privacy and /terms. Same palette as the front page (index.html),
   quieter, built for READING: narrower column, bigger line height. Nothing animates. */
:root {
  --midnight_purple: #140a24;
  --card_purple:     #221338;
  --edge_purple:     #3b2560;
  --octopus_violet:  #b77cf0;
  --lagoon_teal:     #4fd6c8;
  --treasure_gold:   #f0c75e;
  --moonlight_text:  #efe8fb;
  --soft_text:       #c4b6dc;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--midnight_purple); color: var(--moonlight_text);
  font-family: "Nunito", system-ui, sans-serif; font-size: 17px; line-height: 1.7;
}
a { color: var(--lagoon_teal); }
a:focus-visible { outline: 3px solid var(--treasure_gold); outline-offset: 3px; }
.legal_page { max-width: 780px; margin: 0 auto; padding: 24px 16px 56px; }
.back_link { margin: 0 0 8px; }
h1 { font-family: "Lobster Two", cursive; color: var(--octopus_violet); font-size: clamp(34px, 6vw, 48px); margin: 8px 0; }
h2 {
  font-family: "Lobster Two", cursive; color: var(--lagoon_teal); font-size: 30px;
  margin: 48px 0 8px; padding-top: 16px; border-top: 1px solid var(--edge_purple);
}
h3 { font-size: 19px; margin: 26px 0 4px; color: var(--moonlight_text); }
p, li { color: var(--moonlight_text); }
.effective { color: var(--soft_text); font-size: 15px; }
/* 🐙 the short version gets its own little card, because it's the part most people read */
.short_version {
  background: var(--card_purple); border: 1px solid var(--treasure_gold);
  border-radius: 14px; padding: 16px 18px;
}
.caps { font-size: 15px; }
.legal_footer { margin-top: 48px; color: var(--soft_text); font-size: 15px; text-align: center; }