.legal-page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-surface);
}
.legal-main { flex: 1 0 auto; width: 100%; background: var(--color-surface); }
.legal-hero {
  padding: clamp(4rem, 8vw, 7rem) var(--spacing-lg) var(--spacing-3xl);
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 96%, black), var(--color-primary));
  color: var(--color-on-primary);
}
.legal-container { width: min(var(--content-max-width), 100%); margin-inline: auto; }
.legal-hero .section-title { color: var(--color-on-primary); max-width: 18ch; }
.legal-lead { max-width: 72ch; margin-top: var(--spacing-md); color: color-mix(in srgb, var(--color-on-primary) 88%, transparent); }
.legal-updated { margin-top: var(--spacing-md); color: var(--color-secondary); font-weight: var(--font-weight-medium); }
.legal-company-card {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl);
  background: color-mix(in srgb, var(--color-on-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-on-primary) 24%, transparent);
  border-radius: var(--border-radius-lg);
}
.legal-company-card .section-subtitle { color: var(--color-on-primary); margin-bottom: var(--spacing-md); }
.legal-company-card .company-detail-item span { color: var(--color-on-primary); }
.legal-content-section { padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-4xl); background: var(--color-surface); }
.legal-article { display: grid; gap: var(--spacing-xl); }
.legal-section {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-level-1);
}
.legal-section .section-subtitle { margin-bottom: var(--spacing-sm); color: var(--color-primary); }
.legal-section p, .legal-section li, .legal-section a { overflow-wrap: anywhere; }
.legal-page-body a,
.legal-page-body a:visited { color: inherit; text-decoration: none; }
.legal-page-body .legal-main a { color: var(--color-primary); font-weight: 600; }
.legal-page-body .legal-main a:hover { color: var(--color-accent); }
.legal-page-body footer { margin: 0; width: 100%; }
@media (max-width: 767px) {
  .legal-hero { padding-inline: var(--spacing-md); padding-top: 3rem; }
  .legal-content-section { padding-inline: var(--spacing-md); }
  .legal-company-card { padding: var(--spacing-lg); }
  .legal-section { padding: var(--spacing-lg); }
}