/* Founding Beta application — form styling layered on redesign.css tokens, so the apply page reads as
   the same product as the rest of the site. No new colours: everything below comes from :root. */

/* Left edge matches the copy sections above (which sit at max-width:760px inside .wrap), so the page
   reads as one column rather than a centred form bolted under left-aligned prose. */
.beta-form { max-width: 100%; margin: 0; }
.beta-form fieldset {
  border: 1px solid var(--line); border-radius: 14px; background: var(--white);
  margin: 0 0 18px; padding: 8px 22px 22px;
  box-shadow: 0 1px 2px rgba(10, 74, 88, .04);
}
.beta-form legend {
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--water-500); padding: 0 8px;
}
.beta-form label {
  display: block; font-size: 14px; font-weight: 600; color: var(--ink-900);
  margin: 18px 0 6px; letter-spacing: -.005em;
}
.beta-form .req::after { content: " *"; color: var(--water-500); font-weight: 700; }
.beta-form input, .beta-form select, .beta-form textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 16px; line-height: 1.4;
  color: var(--ink-900); background: var(--white);
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.beta-form textarea { resize: vertical; min-height: 72px; }
.beta-form input:focus, .beta-form select:focus, .beta-form textarea:focus {
  outline: none; border-color: var(--water-500);
  box-shadow: 0 0 0 3px rgba(14, 116, 144, .14);
}
.beta-form .row { display: flex; gap: 14px; }
.beta-form .row > div { flex: 1; min-width: 0; }
@media (max-width: 560px) { .beta-form .row { display: block; } }

.beta-form .check {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 500; color: var(--ink-700); margin-top: 12px;
}
.beta-form .check input { width: auto; flex: none; accent-color: var(--water-700); }
.beta-form .check span { font-weight: 500; }

.beta-form button[type="submit"] {
  width: 100%; margin-top: 6px; padding: 15px;
  font: inherit; font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  color: #fff; background: var(--water-900);
  border: 0; border-radius: 999px; cursor: pointer;
  transition: background .2s, transform .15s;
}
.beta-form button[type="submit"]:hover:not(:disabled) { background: var(--water-700); transform: translateY(-1px); }
.beta-form button[type="submit"]:disabled { opacity: .6; cursor: default; }

/* Honeypot. Moved off-canvas rather than display:none — a hidden-by-display field is trivially skipped,
   an off-canvas one still looks fillable to automation. Never shown, never focusable, never announced. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.beta-note { font-size: 14px; line-height: 1.6; color: var(--ink-500); margin: 16px 0 0; max-width: 60ch; }
.beta-note a { color: var(--ink-500); text-decoration: underline; }

#ok {
  display: none; max-width: 100%; margin: 0;
  background: var(--water-100); border: 1px solid rgba(14, 116, 144, .35);
  border-radius: 14px; padding: 26px 28px; color: var(--water-900); line-height: 1.6;
}
#ok b { display: block; font-size: 22px; letter-spacing: -.02em; margin-bottom: 8px; }
#err {
  display: none; color: #9a2c2c; font-size: 15px; font-weight: 500;
  margin-top: 12px;
}

/* The "what happens next" steps — numbered, quiet, no bullet glyphs. */
.beta-steps { list-style: none; margin: 22px 0 0; padding: 0; counter-reset: s; max-width: 60ch; }
.beta-steps li {
  counter-increment: s; position: relative; padding-left: 44px; margin: 0 0 16px;
  font-size: 18px; line-height: 1.55; color: var(--ink-700);
}
.beta-steps li::before {
  content: counter(s); position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--water-100); color: var(--water-900);
  font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}