/* ============================================================
   Hundred OS website — long-form juridische pagina's (/privacy)
   Laadt ná home.css + site.css.
   ============================================================ */

.legal { padding: 76px 0 0; }
.legal .wrap { max-width: 780px; }

.legal-head { text-align: center; margin-bottom: 40px; }
.legal-head h1 { font: 800 44px/1.1 var(--font); letter-spacing: -0.025em; margin: 0; }
.legal-head .legal-meta { font: 400 14px/1.5 var(--font); color: var(--fg-muted); margin-top: 14px; }

.legal-body { font: 400 16px/1.7 var(--font); color: var(--fg); }
.legal-body h2 {
  font: 700 22px/1.3 var(--font); letter-spacing: -0.01em;
  margin: 44px 0 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.legal-body h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.legal-body h3 { font: 600 17px/1.4 var(--font); margin: 28px 0 8px; }
.legal-body p { margin: 0 0 16px; text-wrap: pretty; }
.legal-body a { color: var(--blue); }
.legal-body a:hover { color: var(--fg); }

.legal-body ul { margin: 0 0 16px; padding-left: 22px; }
.legal-body li { margin: 0 0 8px; }
.legal-body li::marker { color: #A8B2BC; }

.legal-table-wrap { overflow-x: auto; margin: 0 0 20px; }
.legal-body table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14px; }
.legal-body th, .legal-body td {
  text-align: left; vertical-align: top; padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.legal-body th { font-weight: 600; color: var(--fg); background: var(--gray); white-space: nowrap; }
.legal-body td { color: var(--fg-muted); }

.legal-updated {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border);
  font: 500 15px/1.5 var(--font); color: var(--fg-muted);
}

@media (max-width: 640px) {
  .legal-head h1 { font-size: 34px; }
  .legal-body { font-size: 15px; }
}