/* Reuse the home page hero unchanged; only the email form is page-specific. */
.recording-form {
  display: grid;
  gap: 0.75rem;
  max-width: 26rem;
  margin: clamp(2rem, 4vw, 2.6rem) auto 0;
  text-align: left;
}

.recording-form label {
  font-size: 0.85rem;
  font-weight: 700;
}

.recording-form input {
  width: 100%;
  min-height: 3.4rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.recording-form input::placeholder { color: #9a9a97; }
.recording-form input:focus { outline: none; border-color: var(--ink); background: var(--paper); }

.recording-form .button {
  width: 100%;
  margin: 0.25rem 0 0;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.recording-form .button:disabled { opacity: 0.45; cursor: wait; transform: none; }

.recording-hint,
.recording-error {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
}

.recording-error { color: #a1231c; }

.recording-done { max-width: 34rem; margin: clamp(2rem, 4vw, 2.6rem) auto 0; }
.recording-done .hero__support { margin-top: 1rem; }
.recording-done .event-details__date { max-width: none; margin: 0 auto; }

.recording-again {
  margin-top: 1.5rem;
  padding: 0.2rem 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

[hidden] { display: none !important; }