/* Additions on top of styles.css (the approved design): waitlist form states and legal pages. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notify button[disabled] { opacity: .6; cursor: progress; }
.notify-msg[data-state="ok"] { color: #1F7A4F; }
.notify-msg[data-state="error"] { color: #B3361A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .notify-msg[data-state="ok"] { color: var(--mint); }
  :root:not([data-theme="light"]) .notify-msg[data-state="error"] { color: #FF9B7A; }
}
.notify .cf-turnstile { flex-basis: 100%; }
.notify-for { flex-basis: 100%; font-size: 14px; color: var(--ink-3); }

.doc { max-width: 720px; padding-block: 24px 64px; display: flex; flex-direction: column; gap: 16px; }
.doc h1 { font-size: clamp(36px, 5vw, 52px); margin-bottom: 8px; }
.doc h2 { font-size: 26px; margin-top: 20px; }
.doc ul { margin: 0; padding-left: 22px; }
.doc p, .doc li { color: var(--ink-2); }
.doc .updated { color: var(--ink-3); font-size: 14px; font-weight: 600; }
.doc .draft { color: var(--orange); font-weight: 700; }
.doc section { display: flex; flex-direction: column; gap: 10px; }
.doc li { margin-block: 4px; }

/* contact page */
.contact { max-width: 640px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; color: var(--ink); }
.contact-form input, .contact-form select, .contact-form textarea { font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); background: var(--paper); border: 2px solid var(--line); border-radius: 18px; padding: 12px 16px; }
.contact-form input, .contact-form select { height: 52px; padding-block: 0; }
.contact-form textarea { resize: vertical; min-height: 160px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--violet); outline: none; }
.contact-form button { align-self: flex-start; height: 54px; padding: 0 28px; border-radius: 999px; border: none; background: var(--violet); color: var(--violet-ink); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.contact-form button:hover { filter: brightness(1.08); }
.contact-form button[disabled] { opacity: .6; cursor: progress; }
.contact-small { font-size: 14px; color: var(--ink-3); }