/*
  Public reading pages: /responsible-gambling (and the account-deletion page). Classes, not inline
  styles, so the layout can answer the viewport. Headings sit two classes deep because
  body.hallmark h1, h2, h3 (0,1,1) beats a single-class rule.
*/
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 24px;
  color: var(--text-primary);
}
.legal-page .legal-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--text-primary);
}
.legal-page .legal-lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 32px;
}
.legal-page .legal-section { margin: 0 0 32px; }
.legal-page .legal-h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px;
  color: var(--text-primary);
}
.legal-page .legal-h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 22px 0 10px;
}
.legal-page .legal-p,
.legal-page .legal-list li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.legal-page .legal-p { margin: 0 0 12px; }
/* Tailwind's preflight strips list markers; a reading list needs them back. */
.legal-page .legal-list { margin: 0; padding-left: 20px; list-style: disc; }
.legal-page .legal-list li::marker { color: var(--text-muted); }
.legal-page ol.legal-list { list-style: decimal; }
.legal-page .legal-list li + li { margin-top: 6px; }
.legal-page .legal-list strong { color: var(--text-primary); }
.legal-page a { color: var(--hh-accent, var(--accent-primary)); }

/* Help services: one card each, as many columns as fit. The track minimum is explicit, never auto. */
.legal-page .legal-help {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}
.legal-page .legal-help-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--bg-secondary, transparent);
}
.legal-page .legal-help-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.legal-page .legal-help-num {
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-primary);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 6px;
  /* A comfortable tap target on a phone without changing how the number reads. */
  padding: 4px 0;
}
.legal-page .legal-help-num:hover { text-decoration: underline; }
.legal-page .legal-help-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  overflow-wrap: anywhere;
}
.legal-page .legal-crisis {
  margin: 20px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--hh-accent, var(--accent-primary));
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.legal-page .legal-meta {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 8px 0 0;
}

@media (max-width: 560px) {
  .legal-page { padding: 24px 16px 16px; }
  .legal-page .legal-title { font-size: 24px; }
}