.legal {
  max-width: 1180px;
  margin-inline: auto;
  padding-block: var(--sp-12) var(--sp-16);
  padding-inline: var(--sp-6);
  columns: 2;
  column-gap: clamp(2.5rem, 5vw, 5rem);
}

.legal h2,
.legal h3 { break-after: avoid; break-inside: avoid; }
.legal ul,
.legal__block { break-inside: avoid; }

.legal__lead {
  column-span: all;
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--line);
  max-width: 70ch;
}

.legal h2 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--laiton);
}

.legal h2:first-of-type { margin-top: 0; }

.legal h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}

.legal p { margin-bottom: var(--sp-4); color: var(--ink-soft); }

.legal a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--brass); }

.legal ul { margin: 0 0 var(--sp-4) var(--sp-6); }
.legal li { margin-bottom: var(--sp-2); color: var(--ink-soft); }

.legal__block {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.legal__block p { margin-bottom: var(--sp-2); }
.legal__block p:last-child { margin-bottom: 0; }
.legal__block strong { color: var(--ink); font-weight: 600; }

.legal__update { column-span: all; margin-top: var(--sp-12); font-size: .85rem; color: var(--ink-mute); }

@media (max-width: 860px) {
  .legal { columns: 1; max-width: 760px; }
}
@media (max-width: 640px) {
  .legal { padding-block: var(--sp-8) var(--sp-12); }
  .legal h2 { font-size: 1.2rem; }
}