/* ============================================================================
   Subscribe page + Subscribe Result page (SubscribePage.cshtml, SubscribeResultPage.cshtml).
   Loaded after BrochurePage.css, whose hero, form, alert, result-card, steps and "next"
   tiles these pages reuse - only what differs is here, scoped under .hp2.subscribe-page.
   ============================================================================ */

.hp2.subscribe-page .subscribe-form__title {
  margin: 0 0 18px;
  font-size: 20px;
  color: var(--home-primary-deep);
}

/* Email takes two thirds of the row, Postcode the rest. */
.hp2.subscribe-page .brochure-field--wide {
  grid-column: span 4;
}

.hp2.subscribe-page .brochure-form__consent .brochure-field__error {
  margin-left: 28px;
}

.hp2.subscribe-page .subscribe-form__note {
  margin: 14px 0 0;
  color: var(--home-text-muted);
  font-size: 13px;
  text-align: center;
}

.hp2.subscribe-page .subscribe-form__note a {
  color: var(--home-link);
  text-decoration: underline;
}

/* Result page: a single centred card (no brochure cover beside it). */
.hp2.subscribe-page .subscribe-result__card {
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .hp2.subscribe-page .brochure-field--wide {
    grid-column: 1 / -1;
  }
}