html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body[data-theme], body {
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--page-text);
}

main.wrap { width: min(860px, calc(100% - 40px)); padding: clamp(32px, 6vw, 72px) 0; }
.legal-card {
  padding: clamp(24px, 5vw, 48px);
  border: 3px solid var(--frame);
  background: var(--card-bg);
  color: var(--page-text);
  box-shadow: 7px 7px 0 var(--frame);
}
.legal-card h1 { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 3.2rem); line-height: 1.15; }
.legal-card h2 { margin: 34px 0 10px; color: var(--page-text); font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.45rem); line-height: 1.3; }
.legal-card p, .legal-card li { color: var(--text-soft); line-height: 1.7; }
.legal-card ul { padding-left: 22px; }
.legal-card .eyebrow { margin: 0 0 8px; color: var(--page-text); font-family: var(--font-mono); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.legal-card .meta { margin: 0 0 28px; color: var(--text-muted); font-family: var(--font-mono); font-size: .88rem; }
.legal-card a { color: var(--page-text); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.legal-card .button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--frame); box-shadow: 3px 3px 0 var(--frame); color: var(--on-bright); background: var(--green); font-family: var(--font-mono); font-weight: 700; text-decoration: none; }
.legal-card .button.secondary { color: var(--page-text); background: var(--page-bg); }
.legal-card a:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }

.legal-card a:not(.button) { text-decoration: underline; text-underline-offset: 3px; }
.legal-card code { overflow-wrap: anywhere; }