Hero With Email Capture

<!--
  A real <form> with a real <label>. The label is visually hidden, not absent -
  placeholder text is not a label: it vanishes the moment you type, it is not
  reliably announced, and it leaves the field nameless to a screen reader.

  type="email" gets the right mobile keyboard and free browser validation;
  autocomplete="email" lets the browser fill it. Neither is optional polish on
  the one field standing between a visitor and a signup.
-->
<section class="hero-form">
  <p class="hero-form__kicker">Launching this autumn</p>
  <h1 class="hero-form__title">Get on the list</h1>
  <p class="hero-form__copy">
    One email when we open the doors. No drip campaign, no spam.
  </p>

  <form class="hero-form__form" action="/api/subscribe" method="post">
    <label class="hero-form__label" for="hero-form-email">Email address</label>
    <div class="hero-form__row">
      <input
        class="hero-form__input"
        id="hero-form-email"
        name="email"
        type="email"
        autocomplete="email"
        placeholder="you@company.com"
        required
      />
      <button class="hero-form__submit" type="submit">Get early access</button>
    </div>
  </form>

  <p class="hero-form__note">We only email once. Unsubscribe any time.</p>
</section>