Radio Card Group

<!--
  Selectable cards, one choice. Same trick as the checkbox card - the card IS the
  label and the radio inside it is clipped, not removed - so the group keeps the
  behaviour people forget to rebuild: arrow keys move the selection between
  cards, Tab enters and leaves the group as one stop, and the form posts `plan`.

  The <fieldset>/<legend> names the group. The dot on the right marks the choice,
  so the ring and tint are reinforcement rather than the only signal.
-->
<fieldset class="radio-cards">
  <legend class="radio-cards__legend">Choose a plan</legend>

  <label class="radio-card" for="plan-starter">
    <input class="radio-card__input" type="radio" id="plan-starter" name="plan" value="starter" checked />
    <span class="radio-card__body">
      <span class="radio-card__title">Starter</span>
      <span class="radio-card__meta">$12 / month · 3 projects</span>
    </span>
    <span class="radio-card__dot" aria-hidden="true"></span>
  </label>

  <label class="radio-card" for="plan-growth">
    <input class="radio-card__input" type="radio" id="plan-growth" name="plan" value="growth" />
    <span class="radio-card__body">
      <span class="radio-card__title">Growth</span>
      <span class="radio-card__meta">$29 / month · Unlimited projects</span>
    </span>
    <span class="radio-card__dot" aria-hidden="true"></span>
  </label>

  <label class="radio-card" for="plan-scale">
    <input class="radio-card__input" type="radio" id="plan-scale" name="plan" value="scale" />
    <span class="radio-card__body">
      <span class="radio-card__title">Scale</span>
      <span class="radio-card__meta">$79 / month · SSO and audit log</span>
    </span>
    <span class="radio-card__dot" aria-hidden="true"></span>
  </label>
</fieldset>