:root {
  color-scheme: dark;
  --bg: #080808;
  --panel: #111113;
  --line: #303036;
  --text: #f2f2f3;
  --muted: #a4a4ad;
  --link: #d8d8de;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

body { padding: 24px 14px 48px; }

main {
  width: min(860px, 100%);
  margin: 0 auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

h1 { margin: 0 0 8px; font-size: clamp(26px, 5vw, 38px); }
h2 { margin: 28px 0 10px; font-size: 20px; }
h3 { margin: 20px 0 8px; font-size: 16px; }
p, li, td, th, label, input, textarea, select, button { font-size: 14px; line-height: 1.55; }
p, ul, ol { margin: 10px 0; }
ul, ol { padding-left: 22px; }
.meta, .hint { color: var(--muted); }
a { color: var(--link); text-underline-offset: 3px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 24px; }
.legal-callout { margin: 16px 0; padding: 12px 14px; border-left: 3px solid #777783; background: #18181b; }

table { width: 100%; border-collapse: collapse; margin: 12px 0; }
th, td { padding: 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #19191d; }

.legal-form { display: grid; gap: 14px; margin-top: 20px; }
.legal-form label { display: grid; gap: 6px; }
.legal-form input, .legal-form textarea, .legal-form select, .legal-form button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  background: #0b0b0d;
  color: var(--text);
  font: inherit;
}
.legal-form textarea { min-height: 140px; resize: vertical; }
.legal-form button { cursor: pointer; background: #232327; }
.legal-form button:disabled { cursor: wait; opacity: .6; }
.legal-check { grid-template-columns: 18px 1fr !important; align-items: start; gap: 9px !important; }
.legal-check input { width: 16px; height: 16px; margin-top: 3px; padding: 0; }
.form-status { min-height: 22px; margin: 0; }
.form-status[data-state="error"] { color: #ffb0b0; }
.form-status[data-state="success"] { color: #bde7c2; }
.privacy-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

@media (max-width: 620px) {
  body { padding: 0; }
  main { min-height: 100vh; border: 0; border-radius: 0; padding: 20px 16px 36px; }
  table, thead, tbody, tr, th, td { display: block; }
  th { border-bottom: 0; }
  td { margin-bottom: 8px; }
}