Newsletter Card

<!--
  aria-labelledby ties the <section> to its own heading, so a screen reader
  announces "Subscribe to the changelog, region" instead of an anonymous
  landmark. Cheaper than aria-label and it cannot drift from the visible text.

  The privacy note is a real <p> under the form, not a tooltip. It is the answer
  to the only question the visitor is actually asking.
-->
<section class="nl-card" aria-labelledby="nl-card-title">
  <h2 class="nl-card__title" id="nl-card-title">Subscribe to the changelog</h2>
  <p class="nl-card__copy">
    Every shipped feature, once a fortnight. Written by the people who built it.
  </p>

  <form class="nl-card__form" action="/api/subscribe" method="post">
    <label class="nl-card__label" for="nl-card-email">Email address</label>
    <input
      class="nl-card__input"
      id="nl-card-email"
      name="email"
      type="email"
      autocomplete="email"
      placeholder="you@company.com"
      required
    />
    <button class="nl-card__submit" type="submit">Subscribe</button>
  </form>

  <p class="nl-card__note">No spam. Unsubscribe in one click.</p>
</section>