/* Site v2 utility layout. Pages this short are centred in round 4: the
   hero's label, title, lead and actions over the page glow, and the page's
   one block under them (a form card, price tables, a grid of cards). */

.v2-utility {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  padding-block: clamp(48px, 6vw, 72px) var(--section);
  min-height: calc(100vh - var(--header-h) - 160px);
  align-content: start;
}
.v2-utility__head {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}
.v2-utility__head > .v2-display {
  max-width: 22ch;
}
.v2-utility__head > .v2-lead {
  max-width: 560px;
}
.v2-utility__head > .v2-utility__actions {
  justify-content: center;
  margin-top: var(--space-4);
}
/* A form on a card (.v2-utility__panel), centred under the head. On phones
   its submit button spans the card. */
.v2-util-form {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}
@media (max-width: 639px) {
  .v2-utility__panel [type="submit"],
  .v2-utility__panel [data-unsubscribe-submit] {
    width: 100%;
  }
}
/* The panel: round 4's white card, a 1px inset ring and 12px corners. */
.v2-utility__panel {
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--ring), var(--shadow-card);
}
/* The panel already frames a form's success row: no second ring inside it. */
.v2-utility__panel .v2-form-success {
  padding: 0;
  box-shadow: none;
}
.v2-utility__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}