/* Rally — early access form. Layered on styles.css for the tokens. */

.form-page {
  display: grid;
  grid-template-columns: 1fr calc(620 * var(--px));
  gap: calc(110 * var(--px));
  align-items: start;
  padding: calc(120 * var(--px)) calc(64 * var(--px)) calc(160 * var(--px));
}

.form-page__intro h1 {
  font-size: calc(96 * var(--px));
  line-height: 0.96;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--forest);
  margin: 0 0 calc(28 * var(--px));
}

.next-steps {
  list-style: none;
  margin: calc(48 * var(--px)) 0 0;
  padding: 0;
  counter-reset: n;
  max-width: calc(520 * var(--px));
}
.next-steps li {
  counter-increment: n;
  display: grid;
  grid-template-columns: calc(34 * var(--px)) 1fr;
  gap: calc(18 * var(--px));
  padding: calc(20 * var(--px)) 0;
  border-top: 1px solid var(--line);
  font-size: calc(17 * var(--px));
  color: var(--ink-soft);
}
.next-steps li::before {
  content: counter(n, decimal-leading-zero);
  font-size: calc(13 * var(--px));
  letter-spacing: 0.1em;
  color: var(--amber-ink);
  padding-top: calc(3 * var(--px));
}

/* ---------- the card ---------- */

.form-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: calc(40 * var(--px));
  padding: calc(56 * var(--px));
  box-shadow: 0 calc(20 * var(--px)) calc(60 * var(--px)) rgba(28, 25, 23, 0.06);
}

.field { margin-bottom: calc(28 * var(--px)); }

.field > label,
.fieldset__legend {
  display: block;
  font-size: calc(16 * var(--px));
  color: var(--ink);
  margin-bottom: calc(10 * var(--px));
}
.field .hint {
  display: block;
  font-size: calc(14.5 * var(--px));
  color: var(--ink-faint);
  margin: calc(-4 * var(--px)) 0 calc(10 * var(--px));
}
.req { color: var(--amber-ink); }

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  font: inherit;
  font-size: calc(17 * var(--px));
  color: var(--ink);
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: calc(16 * var(--px));
  padding: calc(16 * var(--px)) calc(20 * var(--px));
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}
.field textarea {
  min-height: calc(150 * var(--px));
  resize: vertical;
  line-height: 1.5;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }

.field input:hover,
.field textarea:hover { border-color: rgba(28, 25, 23, 0.24); }

.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--forest);
  box-shadow: 0 0 0 calc(3 * var(--px)) rgba(20, 83, 45, 0.14);
}

/* Validation only after the field has been interacted with, so the form does
   not greet you in red before you have typed anything. */
.field[data-invalid] input,
.field[data-invalid] textarea {
  border-color: #a1341b;
  background: rgba(161, 52, 27, 0.05);
}
.field-error {
  display: none;
  font-size: calc(14.5 * var(--px));
  color: #8c2d17;
  margin-top: calc(8 * var(--px));
}
.field[data-invalid] .field-error { display: block; }

/* ---------- audience choice ---------- */

.fieldset { border: 0; padding: 0; margin: 0 0 calc(28 * var(--px)); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--px)); }

.choice { position: relative; }
.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.choice span {
  display: block;
  padding: calc(18 * var(--px)) calc(20 * var(--px));
  border-radius: calc(18 * var(--px));
  border: 1px solid var(--line);
  background: var(--wash);
  font-size: calc(16 * var(--px));
  color: var(--ink-soft);
  transition: all 0.2s var(--ease);
}
.choice span small {
  display: block;
  font-size: calc(13.5 * var(--px));
  color: var(--ink-faint);
  margin-top: calc(3 * var(--px));
}
.choice input:hover + span { border-color: rgba(28, 25, 23, 0.24); }
.choice input:checked + span {
  border-color: var(--forest);
  background: rgba(20, 83, 45, 0.07);
  color: var(--forest);
}
.choice input:focus-visible + span {
  outline: calc(3 * var(--px)) solid var(--forest);
  outline-offset: calc(2 * var(--px));
}

/* ---------- submit + states ---------- */

.form-card .btn { width: 100%; height: calc(60 * var(--px)); font-size: calc(18 * var(--px)); }
.form-card .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.form-foot {
  margin: calc(20 * var(--px)) 0 0;
  font-size: calc(14.5 * var(--px));
  color: var(--ink-faint);
  line-height: 1.5;
}
.form-foot a { color: var(--forest); text-decoration: underline; text-underline-offset: 0.18em; }

.form-status {
  margin-top: calc(22 * var(--px));
  padding: calc(20 * var(--px)) calc(24 * var(--px));
  border-radius: calc(18 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: 1.5;
  display: none;
}
.form-status[data-state] { display: block; }
.form-status[data-state="pending"] {
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.35);
  color: #6d3d05;
}
.form-status[data-state="ok"] {
  background: rgba(20, 83, 45, 0.07);
  border: 1px solid rgba(20, 83, 45, 0.3);
  color: var(--forest);
}
.form-status[data-state="error"] {
  background: rgba(161, 52, 27, 0.06);
  border: 1px solid rgba(161, 52, 27, 0.35);
  color: #8c2d17;
}
.form-status a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }

/* ---------- success replaces the form ---------- */

.form-done { display: none; text-align: center; padding: calc(24 * var(--px)) 0; }
.form-done[data-shown] { display: block; }
.form-done__mark {
  width: calc(64 * var(--px));
  height: calc(64 * var(--px));
  margin: 0 auto calc(24 * var(--px));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(20, 83, 45, 0.1);
  color: var(--forest);
}
.form-done__mark svg { width: calc(28 * var(--px)); height: calc(28 * var(--px)); }
.form-done h2 {
  font-size: calc(34 * var(--px));
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--forest);
  margin: 0 0 calc(12 * var(--px));
}
.form-done p { font-size: calc(17 * var(--px)); color: var(--ink-soft); margin: 0 auto; max-width: calc(420 * var(--px)); }

@media (max-width: 1024px) {
  .form-page { grid-template-columns: 1fr; gap: calc(70 * var(--px)); }
}

@media (max-width: 720px) {
  .form-page { padding: calc(56 * var(--px)) calc(24 * var(--px)) calc(90 * var(--px)); }
  .form-page__intro h1 { font-size: calc(52 * var(--px)); }
  .form-card { padding: calc(32 * var(--px)) calc(26 * var(--px)); border-radius: calc(30 * var(--px)); }
  .choices { grid-template-columns: 1fr; }
  /* 16px minimum stops iOS Safari zooming the viewport on focus */
  .field input[type="text"],
  .field input[type="email"],
  .field textarea { font-size: max(16px, calc(17 * var(--px))); }
}