/* assets/css/pages/legal.css: the Legal page's own layout (plan.md, "Legal"); every color, size and corner from
   design\system.css's tokens. The client's texts are set as calm, readable prose. */

/* the header: a short, calm band */
.legal-top { min-height: min(460px, 60svh); }
@media (max-width: 1023px) { .legal-top { --band: clamp(200px, 40vw, 320px); } }

/* the parts beside their index, which stays in view on a computer */
.legal__grid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); max-width: 68rem; margin-inline: auto; align-items: start; }
.legal__nav { position: sticky; top: calc(var(--header-h) + 24px); padding: 20px; border-radius: var(--radius-l); background: var(--c-paper-alt); border: 1px solid var(--c-line); }
.legal__nav-title { margin: 0 0 10px; font-weight: 800; color: var(--c-brand-dark); }
.legal__nav ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.legal__nav a { display: block; padding: 8px 10px; border-radius: 10px; color: var(--c-brand-text); font-weight: 700; text-decoration: none; }
.legal__nav a:hover { background: var(--c-paper); }
.legal__parts { display: grid; gap: clamp(3rem, 7vw, 5rem); }
.legal__part { scroll-margin-top: calc(var(--header-h) + 24px); }
.legal__part + .legal__part { padding-top: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--c-line); }
.legal__part h2 { margin-bottom: var(--space-4); }
.legal__text { color: var(--c-ink); font-size: var(--fs-body); line-height: 1.7; }
.legal__text p, .legal__text ul, .legal__text ol { margin: 0 0 1em; }
.legal__text ul, .legal__text ol { padding-left: 1.4em; }
.legal__text li { margin-bottom: 0.4em; }
.legal__text h3 { margin: 2em 0 0.6em; font-size: var(--fs-h3); color: var(--c-brand-dark); }
.legal__text h4 { margin: 1.6em 0 0.5em; font-size: var(--fs-lead); color: var(--c-brand-dark); }
.legal__text a { color: var(--c-brand-text); text-decoration: underline; overflow-wrap: anywhere; }
.legal__lead { font-size: var(--fs-lead); }
@media (max-width: 899px) {
  .legal__grid { grid-template-columns: minmax(0, 1fr); }
  .legal__nav { position: static; }
}