.legal-hero {
  padding: clamp(7rem, 12vw, 10rem) var(--spacing-lg) clamp(3rem, 6vw, 5rem);
  color: var(--color-on-primary);
  background: linear-gradient(135deg, #0b3225, var(--color-primary));
}
.legal-hero-inner, .legal-content {
  width: min(100%, var(--content-max-width));
  margin: 0 auto;
}
.legal-hero h1 { max-width: 18ch; margin-bottom: 1rem; font-family: var(--font-family-heading); font-size: var(--font-size-4xl); }
.legal-hero p { max-width: 70ch; font-size: var(--font-size-lg); }
.legal-content { padding: clamp(2.5rem, 6vw, 5rem) var(--spacing-lg); }
.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.legal-card {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-card);
  color: var(--color-on-surface);
  background: var(--color-surface);
  box-shadow: var(--shadow-level-1);
}
.legal-card h2 { margin-bottom: 1rem; color: var(--color-primary); font-family: var(--font-family-heading); font-size: var(--font-size-2xl); }
.legal-card h3 { margin: 1.5rem 0 0.65rem; font-size: var(--font-size-xl); }
.legal-card p, .legal-card li { line-height: 1.75; }
.legal-card p + p { margin-top: 1rem; }
.legal-card ul, .legal-card ol { margin: 1rem 0 0; padding-left: 1.4rem; }
.legal-card li + li { margin-top: 0.65rem; }
.legal-contact { padding: 1.25rem; border-left: 4px solid var(--color-secondary); background: var(--color-surface-elevated); }
.legal-back { display: inline-flex; margin-top: 2rem; padding: 0.85rem 1.2rem; border-radius: var(--border-radius-control); color: #fff; background: var(--color-primary); font-weight: 700; }
.legal-back:hover { background: #0b3d2c; }
@media (max-width: 768px) {
  .legal-hero { padding-inline: 1rem; }
  .legal-content { padding-inline: 1rem; }
  .legal-card { padding: 1.15rem; }
  .legal-card h2 { overflow-wrap: anywhere; }
}