/* Legal texts and UhrHealth help (generated by scripts/render-legal.mjs): a quiet reading room in one column of
   --layout-reading (44rem), mobile first in the shared steps (S under 640px, M from 640px, L from 1024px).
   - Head: the h1 in Pixelify at the title step on S and M (40 · 48px); on L one step below the page titles (48px
     instead of 64px), since a legal title is a label for long reading, not a stage. Then the introduction as a lead and
     the date as a small meta line. No eyebrows.
   - Sections between 1px rules, each opening with its h2 at the subheading step (Manrope 800, 18 · 20px), so ten
     sections read as a calm list under the one title; body text at 16px with 1.7 leading for long passages.
   - Links in the accent colour, always underlined. */
.legal-content {
  width: min(var(--layout-reading), calc(100% - var(--layout-gutter) * 2));
  padding-block: 2rem 0;
  line-height: 1.7;
}
.legal-head { padding-bottom: 2rem; }
.legal-content h1 { margin: 0; font-size: var(--fs-title); line-height: 1.1; }
.legal-content .legal-intro { margin: 1rem 0 0; color: var(--text-secondary); font-size: var(--fs-lead); line-height: 1.6; }
.legal-content .legal-date { margin: .75rem 0 0; color: var(--text-secondary); font-size: var(--fs-small); font-weight: 650; line-height: 1.5; }
.legal-content section { padding-block: 1.75rem; border-top: 1px solid var(--separator); }
.legal-content section:last-child { padding-bottom: 0; }
.legal-content h2 { margin: 0 0 .5rem; font-size: var(--fs-h3); font-weight: 800; line-height: 1.35; letter-spacing: -.02em; }
.legal-content p { margin: 0; }
.legal-content a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  overflow-wrap: break-word;
}
.legal-content [hidden] { display: none; }
/* UhrHealth's information pages, the current one marked. */
.legal-more { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.legal-more a { display: inline-block; min-width: 0; max-width: 100%; padding-block: .625rem; font-weight: 650; }
.legal-more a[aria-current="page"] { color: var(--text); text-decoration: none; }

@media (min-width: 640px) {
  .legal-content { padding-top: 3rem; }
  .legal-head { padding-bottom: 2.5rem; }
  .legal-content section { padding-block: 2rem; }
}
@media (min-width: 1024px) {
  .legal-content { padding-top: 4rem; }
  .legal-content h1 { font-size: 3rem; }
}
@media (hover: hover) {
  .legal-content a:hover { text-decoration-thickness: 2px; }
}