/* Add to style.css */

.legal-inner {
  max-width: 44rem;
  margin: 0 auto;
}

.legal-header {
  margin-bottom: var(--space-5);
}

.legal-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h2);
}

.legal-updated {
  margin: 0;
  font-size: var(--text-small);
  opacity: 0.8;
}

/* "The short version" card */
.legal-summary {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
}

.legal-summary h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h3);
}

.legal-summary ul {
  margin: 0;
  padding-left: 1.25rem;
}

.legal-summary li {
  padding: var(--space-1) 0;
}

.legal-summary li::marker {
  color: var(--color-accent);
}

/* Policy body */
.legal section {
  margin-bottom: var(--space-5);
}

.legal section h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h3);
}

.legal p,
.legal li {
  max-width: 40rem;
}

.legal section p {
  margin: 0 0 var(--space-3);
}

.legal section ul {
  margin: 0 0 var(--space-3);
  padding-left: 1.25rem;
}

.legal section li {
  padding: var(--space-1) 0;
}

.legal section li::marker {
  color: var(--color-accent);
}

.legal a {
  color: var(--color-heading);
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

.legal a:hover {
  color: var(--color-accent);
}

.legal-back {
  margin: var(--space-5) 0 0;
  font-weight: var(--weight-medium);
}

mark.todo {
  padding: 0 4px;
  background: rgba(199, 123, 90, 0.25);
  color: var(--color-text);
  border-radius: 4px;
}


.legal a {
  color: var(--color-heading);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.legal a:hover {
  color: var(--color-accent);
}