.legal-hero {
  padding:
    var(--space-12)
    0
    var(--space-9);
}

.legal-hero-inner {
  max-width: 760px;
}

.legal-hero .heading-xl {
  margin-bottom: var(--space-5);
}

.legal-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: var(--space-3);

  margin-top: var(--space-6);

  color: var(--text-subtle);

  font-size: var(--font-xs);
}

.legal-meta-divider {
  width: 1px;
  height: 12px;

  background: var(--border-strong);
}

.legal-layout {
  display: grid;

  grid-template-columns:
    220px
    minmax(0, 760px);

  gap: var(--space-10);

  align-items: start;
}

.legal-sidebar {
  position: sticky;

  top:
    calc(
      var(--navbar-height) +
      var(--space-6)
    );
}

.legal-sidebar-title {
  margin-bottom: var(--space-4);

  color: var(--text-subtle);

  font-size: 10px;
  font-weight: var(--weight-semibold);

  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.legal-nav {
  display: flex;
  flex-direction: column;

  gap: 4px;
}

.legal-nav a {
  display: flex;
  align-items: center;

  min-height: 38px;

  padding-inline: var(--space-3);

  border-radius: var(--radius-sm);

  color: var(--text-muted);

  font-size: var(--font-sm);

  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.legal-nav a:hover {
  color: var(--text-primary);

  background: var(--surface-2);
}

.legal-content {
  min-width: 0;
}

.legal-section {
  padding:
    0
    0
    var(--space-9);

  margin-bottom: var(--space-9);

  border-bottom: 1px solid var(--border-subtle);
}

.legal-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;

  border-bottom: 0;
}

.legal-section h2 {
  margin-bottom: var(--space-4);

  color: var(--text-primary);

  font-size: var(--font-2xl);
  font-weight: var(--weight-semibold);

  letter-spacing: var(--tracking-tight);
}

.legal-section h3 {
  margin:
    var(--space-6)
    0
    var(--space-3);

  color: var(--text-secondary);

  font-size: var(--font-md);
  font-weight: var(--weight-medium);
}

.legal-section p {
  margin-bottom: var(--space-4);

  color: var(--text-muted);

  font-size: var(--font-sm);
  line-height: var(--leading-relaxed);
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section ul {
  display: flex;
  flex-direction: column;

  gap: var(--space-3);

  margin:
    var(--space-4)
    0;
}

.legal-section li {
  position: relative;

  padding-left: var(--space-5);

  color: var(--text-muted);

  font-size: var(--font-sm);
  line-height: var(--leading-relaxed);
}

.legal-section li::before {
  position: absolute;

  top: 0.7em;
  left: 0;

  width: 4px;
  height: 4px;

  border-radius: var(--radius-full);

  background: var(--text-subtle);

  content: "";
}

.legal-section a {
  color: var(--text-secondary);

  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;

  transition:
    color var(--transition-fast),
    text-decoration-color var(--transition-fast);
}

.legal-section a:hover {
  color: var(--text-primary);

  text-decoration-color: var(--text-muted);
}

.legal-note {
  padding: var(--space-5);

  margin:
    var(--space-5)
    0;

  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);

  background: var(--surface-1);
}

.legal-note strong {
  display: block;

  margin-bottom: var(--space-2);

  color: var(--text-primary);

  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
}

.legal-note p {
  margin: 0;

  font-size: var(--font-xs);
}

.legal-contact {
  display: flex;
  flex-direction: column;

  gap: var(--space-2);

  padding: var(--space-5);

  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);

  background: var(--surface-1);
}

.legal-contact span {
  color: var(--text-subtle);

  font-size: var(--font-xs);
}

.legal-contact strong {
  color: var(--text-primary);

  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
}

@media (max-width: 860px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-sidebar {
    position: static;
  }

  .legal-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .legal-hero {
    padding-top: var(--space-10);
  }

  .legal-section h2 {
    font-size: var(--font-xl);
  }
}