/* The supporter page. Calm, plain, and deliberately unremarkable.
   Nothing here signals what the app is for. Matches the public pages on the
   apex so that arriving from one to the other does not feel like two products. */

:root {
  --ground: #F7F9FA;
  --surface: #FFFFFF;
  --ink: #1B2429;
  --ink-2: #4E5C66;
  --ink-3: #78868F;
  --line: #DFE6EA;
  --accent: #2C6B7A;
  --err: #8C3A2E;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #12181C;
    --surface: #192126;
    --ink: #E6EDF1;
    --ink-2: #A6B4BD;
    --ink-3: #7B8992;
    --line: #2A353D;
    --accent: #7CB8C6;
    --err: #E39184;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 40px 20px 80px;
  background: var(--ground);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 560px; margin: 0 auto; }

h1 { font-size: 24px; line-height: 1.3; margin: 0 0 14px; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: 16px; margin: 28px 0 8px; }
p { margin: 0 0 14px; color: var(--ink-2); }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--accent); }
.muted { color: var(--ink-3); }
[hidden] { display: none !important; }

.field { margin: 0 0 20px; }
label { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 5px; }
input[type="tel"], input[type="text"], input[type="password"] {
  width: 100%;
  padding: 12px;
  font: inherit;
  font-size: 16px; /* 16px or iOS zooms the page on focus */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.hint { font-size: 13.5px; color: var(--ink-3); margin: 5px 0 0; }
.err { font-size: 13.5px; color: var(--err); margin: 5px 0 0; }

.terms {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 16px;
  margin: 0 0 18px;
  font-size: 14px;
}
.terms ul { margin: 0; padding-left: 18px; }
.terms li { margin-bottom: 6px; color: var(--ink-2); }
.terms li:last-child { margin-bottom: 0; }

.consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  margin: 0 0 18px;
  background: var(--surface);
}
.consent input[type="checkbox"] {
  flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent);
}
.consent label { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; font-weight: 400; }

.submit {
  display: block; width: 100%;
  padding: 14px 16px;
  font: inherit; font-size: 16px; font-weight: 500;
  color: var(--surface); background: var(--accent);
  border: 0; border-radius: 4px; cursor: pointer;
}
/* Consent gates the control in CSS, not script, so that turning JavaScript off
   leaves the button inert rather than making it clickable. */
#join-form:not(:has(#consent:checked)) .submit { opacity: 0.45; pointer-events: none; }
#join-form:has(#consent:checked) .gate { visibility: hidden; }
.submit[disabled] { opacity: 0.45; pointer-events: none; }
.gate { font-size: 13.5px; color: var(--ink-3); margin: 10px 0 0; text-align: center; }
.foot { font-size: 13.5px; color: var(--ink-3); margin: 20px 0 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }