.legal { padding: 4rem 0 5rem; }

.legal h1 {
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

.legal .intro {
  text-align: center;
  color: var(--text2);
  max-width: 760px;
  margin: 0 auto 2.5rem;
}

.legal .panel {
  max-width: 900px;
  margin: 1.5rem auto;
}

.legal h2 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}

.legal p, .legal li { color: var(--text2); }

.legal ul {
  margin-left: 1.25rem;
  margin-top: 0.5rem;
}

.legal p a, .legal li a {
  color: var(--text1);
  text-decoration: none;
  border-bottom: 1px solid var(--text2);
  transition: all 0.2s ease;
}

.legal p a:hover, .legal li a:hover {
  border-bottom-color: var(--accent2);
}

.legal .kv {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0.6rem 1rem;
  margin-top: 0.75rem;
}

.legal .k {
  color: var(--text1);
  opacity: 0.9;
  white-space: nowrap;
}

.legal .v a {
  color: var(--text2);
  text-decoration: none;
}

.legal .v a:hover {
  color: var(--text1);
  text-decoration: underline;
}

.legal-divider {
  border-top: 1px solid var(--accent1);
  margin: 1.25rem 0 1.25rem;
}

@media (max-width: 500px) {
  .legal .kv { grid-template-columns: 1fr; }
  .legal .k { margin-top: 0.25rem; }
}