.legal-overview {
  max-width: 980px;
}

.legal-intro {
  max-width: 720px;
  margin: 22px 0 52px;
  font-size: 18px;
}

.legal-groups {
  display: grid;
  gap: 46px;
}

.legal-group {
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.legal-group h2 {
  margin: 0 0 18px;
  font-size: clamp(24px, 4vw, 34px);
}

.legal-card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-card-list a {
  display: block;
  min-height: 100%;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
}

.legal-card-list a:hover,
.legal-card-list a:focus-visible {
  border-color: rgba(214, 108, 234, .62);
  background: rgba(255, 255, 255, .07);
}

.legal-note,
.legal-load-status {
  margin: 28px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
}

.legal-load-status.success {
  border-color: rgba(142, 230, 170, .35);
  color: #a9ecc0;
}

.legal-load-status.error {
  border-color: rgba(255, 170, 165, .35);
  color: #ffc0bc;
}

.legal-metadata {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 32px 0 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--border);
}

.legal-metadata > div {
  min-width: 0;
  padding: 15px 17px;
  background: var(--panel);
}

.legal-metadata dt {
  color: #918a94;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.legal-metadata dd {
  margin: 5px 0 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.legal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.legal-actions .button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.legal-document-content {
  margin-top: 38px;
  color: var(--muted);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.legal-document-content:empty {
  display: none;
}

.legal-document-content h2,
.legal-document-content h3,
.legal-document-content h4 {
  color: var(--text);
  letter-spacing: -.02em;
}

.legal-document-content h2 { margin-top: 44px; font-size: 28px; }
.legal-document-content h3 { margin-top: 34px; font-size: 23px; }
.legal-document-content h4 { margin-top: 28px; font-size: 19px; }
.legal-document-content p { white-space: pre-line; }
.legal-document-content li { margin: 8px 0; }
.legal-document-content strong { color: var(--text); font-weight: 800; }
.legal-document-content a { color: #e4a5ee; text-underline-offset: 3px; }
.legal-document-content blockquote {
  margin: 24px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--accent-strong);
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
}

.legal-secondary {
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.legal-secondary h2 {
  margin: 0 0 12px;
  font-size: 21px;
}

.legal-canonical {
  color: #e4a5ee;
  overflow-wrap: anywhere;
}

.legal-related {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-related a {
  display: inline-flex;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}

.legal-related a:hover,
.legal-related a:focus-visible {
  color: var(--text);
  border-color: rgba(214, 108, 234, .62);
}

.legal-contact {
  margin-top: 38px;
}

@media (max-width: 640px) {
  .legal-card-list,
  .legal-metadata {
    grid-template-columns: 1fr;
  }
}

@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #000; }
  .site-header,
  .legal-actions,
  .legal-load-status,
  .legal-related-block,
  .legal-contact,
  .legal-back,
  noscript { display: none !important; }
  .legal-page { width: 100%; max-width: none; min-height: 0; padding: 0; }
  .legal-page h1,
  .legal-document-content h2,
  .legal-document-content h3,
  .legal-document-content h4,
  .legal-metadata dd { color: #000; }
  .legal-metadata { border-color: #bbb; background: #bbb; }
  .legal-metadata > div { background: #fff; }
  .legal-document-content,
  .legal-document-content strong,
  .legal-document-content a { color: #111; }
  .legal-document-content { font-size: 11pt; }
  .legal-canonical { color: #000; }
}