/* The legal pages — /terms, /refund-policy, /privacy, /sms-terms (REQ-066):
   one document each under the website's own header (landing.css renders
   that; this file styles what is below it). Plain reading pages, no islands.
   REQ-043: the documents; REQ-065: the October 6, 2026 text. */
.legal {
  min-height: 60dvh;
  background: var(--bg);
  color: var(--fg);
  padding: 20px 16px 8px;
}
.legal__wrap {
  max-width: 760px;
  margin: 0 auto;
}
/* The website's toggle is two buttons; here it is two links to ?lang=, in the
   same pill (landing.css .lang-toggle styles the pill and swaps the full
   sentence for EN/ES below 720px). */
.lang-toggle a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  color: var(--fg-muted);
  text-decoration: none;
  transition: all 200ms var(--ease-bounce);
}
.lang-toggle a.on {
  background: var(--brand-teal);
  color: #fff;
}
/* The document starts right under the header: no tabs, no row of the other
   documents (REQ-076 — "cant have it tabbed"); the footer's four links are
   how the pages link each other. */
.legal__doc {
  padding: 12px 0 12px;
}
.legal__doc h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--brand-teal);
  text-transform: uppercase;
}
.legal__effective {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #6b7a7e;
}
.legal__notice {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 4px solid #519843;
  background: rgba(81, 152, 67, 0.08);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
}
.legal__doc p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.65;
}
.legal__doc h2 {
  margin: 30px 0 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--brand-teal);
  letter-spacing: -0.01em;
}
.legal__doc ul {
  margin: 10px 0 0;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.65;
}
.legal__doc li + li {
  margin-top: 4px;
}
.legal__label {
  display: block;
  margin-top: 16px;
  font-weight: 800;
  font-size: 15px;
  color: var(--fg);
}
.legal__label + p {
  margin-top: 4px;
}
.legal__doc a {
  color: var(--brand-teal);
}
@media (max-width: 560px) {
  .legal__doc h1 {
    font-size: 24px;
  }
}