/* legal.css — clean, readable document styling for the legal pages
   (privacy / terms / refund). Sea-tinted background to stay on-brand, with a
   white reading card for legibility. */
:root {
  --deep-blue: #013a63;
  --medium-blue: #2a6f97;
  --sun-gold: #ffb703;
}
* { box-sizing: border-box; }
body { margin: 0; }
.legal-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #0077be 0%, #00a6e8 100%);
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  padding: 0 1rem 3rem;
}
.legal-top { max-width: 780px; margin: 0 auto; padding: 1.1rem 0; }
.legal-home {
  color: #fff; font-weight: 800; text-decoration: none; font-size: 1.05rem;
  font-family: 'Baloo 2', sans-serif; text-shadow: 1px 1px 4px rgba(0,0,0,0.25);
  /* The only way back out of a legal page, and it measured 27px tall.
     (legal.css does not pull in tokens.css, so the fallback is the value.) */
  display: inline-flex; align-items: center;
  min-height: var(--tap-min, 44px);
}
.legal-home:hover { text-decoration: underline; }
.legal-doc {
  max-width: 780px; margin: 0 auto; background: #fff; border-radius: 18px;
  padding: clamp(1.4rem, 5vw, 2.6rem);
  box-shadow: 0 14px 40px rgba(1, 58, 99, 0.25);
  color: #26343f; line-height: 1.62;
}
.legal-doc h1 {
  font-family: 'Baloo 2', sans-serif; color: var(--deep-blue);
  margin: 0 0 0.25rem; font-size: clamp(1.7rem, 6vw, 2.2rem);
}
.legal-doc h2 {
  font-family: 'Baloo 2', sans-serif; color: var(--deep-blue);
  margin: 1.9rem 0 0.5rem; font-size: 1.2rem;
  border-bottom: 2px solid rgba(255, 183, 3, 0.5); padding-bottom: 0.3rem;
}
.legal-updated { color: var(--medium-blue); font-weight: 700; margin: 0 0 1.4rem; font-size: 0.9rem; }
.legal-doc a { color: var(--medium-blue); font-weight: 700; }
.legal-doc ul { padding-left: 1.2rem; }
.legal-doc li { margin: 0.35rem 0; }
.legal-links {
  margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid #e6eef4;
  text-align: center; font-weight: 700; color: var(--medium-blue);
}
/* Terms / Refunds / FAQ / Contact is the footer nav of the legal pages, not
   running prose — each link gets the touch minimum. */
.legal-links a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min, 44px);
  margin: 0 0.15rem; padding: 0 0.35rem;
}