/* Subscribe, ask, confirm and unsubscribe: one centred card on a quiet backdrop. Loaded after /styles.css. */
main.form-page { max-width: 60rem; padding-block: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
main.form-page.narrow { max-width: 34rem; }
main.form-page .page-head { text-align: center; margin-inline: auto; max-width: 36rem; }
main.form-page .page-head .lead { margin-inline: auto; }

.form-page .card.form,
.form-page .form-card {
  position: relative;
  padding: clamp(1.25rem, 0.75rem + 2.5vw, 2.25rem);
  border-radius: calc(var(--radius) * 1.8);
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.12), 0 24px 60px -30px hsl(var(--glow) / 0.35), 0 12px 32px -18px hsl(0 0% 0% / 0.5);
  overflow: hidden;
}
.form-page .card.form::before,
.form-page .form-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, hsl(var(--gradient-start)), hsl(var(--gradient-end)));
}
.form-page .form-card { display: grid; gap: var(--s-4); text-align: center; justify-items: center; }
.form-page .form-card .btn { min-width: 12rem; }

.form-page .form input[type="email"],
.form-page .form input[type="text"] { width: 100%; min-height: 2.875rem; }
.form-page .form input:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.form-page .form button[type="submit"] { width: 100%; min-height: 3rem; font-size: var(--text-base); }
.form-page .form .check { align-items: start; }
.form-page .form .check label { font-size: var(--text-sm); line-height: 1.5; }

.form-page .split { align-items: stretch; }
.form-page .split .side { padding: var(--s-5); border: 1px dashed hsl(var(--border)); border-radius: calc(var(--radius) * 1.8); align-content: center; }
@media (min-width: 48rem) { .form-page .split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }