/* Legal and safety pages. A plain reading column on the app's own palette. */

.legal { max-width: 660px; margin: 0 auto; padding: 30px 20px 90px; }

.legal .wordmark { margin-bottom: 34px; }
.legal .wordmark span { color: var(--pink); }

.legal h1 { font-size: clamp(30px, 7vw, 40px); font-weight: 700; margin-bottom: 10px; }

.legal .updated {
  font-size: 13.5px; color: var(--muted); margin-bottom: 32px;
  padding-bottom: 22px; border-bottom: 1px solid var(--border);
}

.legal h2 { font-size: 21px; margin: 36px 0 12px; }
.legal h3 { font-size: 16.5px; margin: 24px 0 8px; font-weight: 600; }

.legal p, .legal li { font-size: 16px; line-height: 1.68; color: var(--text); }
.legal p + p { margin-top: 14px; }

.legal ul {
  margin: 12px 0 0; padding-left: 22px;
  display: flex; flex-direction: column; gap: 9px;
}
.legal li::marker { color: var(--pink); }

.legal strong { color: var(--ink); font-weight: 800; }
.legal a { font-weight: 700; }

.legal .box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px 22px; margin: 22px 0;
  box-shadow: var(--shadow-sm);
}
.legal .box.alert {
  background: var(--pink-soft); border-color: transparent;
}
.legal .box p:first-child { margin-top: 0; }

.legal .backlink {
  display: inline-block; margin-top: 46px; padding-top: 24px;
  border-top: 1px solid var(--border); width: 100%;
  font-size: 14.5px; color: var(--muted); font-weight: 700;
}
.legal .backlink:hover { color: var(--purple); }