.callout, .updates {
  width: min(100%, 620px);
  margin: 2.5rem auto;
}
.callout { padding: 1.5rem; border-block: 1px solid #cfc3cf; }
.eyebrow { color: var(--purple); font: 0.75rem/1.4 Arial, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.callout h2, .updates h2 { font-size: clamp(1.65rem, 3vw, 2rem); font-weight: 500; margin: 0.6rem 0 1rem; }
audio { display: block; width: 100%; margin-top: 1rem; }
.updates p { color: var(--muted); font-size: 1.125rem; line-height: 1.45; }
form { text-align: left; }
form label { display: block; font: 0.875rem/1.5 Arial, sans-serif; margin-bottom: 0.5rem; }
.signup-row { display: flex; gap: 0.6rem; }
input, button { min-height: 48px; border-radius: 4px; font: 1rem/1.4 Arial, sans-serif; }
input { min-width: 0; flex: 1; border: 1px solid #9a8d9e; background: #fffaf3; color: var(--ink); padding: 0.7rem 0.8rem; }
button { cursor: pointer; background: var(--purple); border: 1px solid var(--purple); color: #fffaf3; padding: 0.7rem 1rem; }
button:hover { background: #302040; }
button:disabled { opacity: 0.65; cursor: wait; }
input:focus-visible, button:focus-visible, audio:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
#subscribe-status { min-height: 1.5em; font: 0.875rem/1.5 Arial, sans-serif; }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 600px) {
  .signup-row { flex-direction: column; }
  .callout { padding: 1rem 0; }
  .callout, .updates { margin-block: 2rem; }
}

.signup-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }