/* Inherits colours from the theme so it blends with light/dark styling. */
.newsletter { margin: 3rem 0 1rem; padding: 1.25rem 1.25rem 1rem; border: 1px solid rgba(128,128,128,.4); border-radius: 6px; color: inherit; }
.newsletter h2 { margin: 0 0 .4rem; font-size: 1.2rem; }
.newsletter p { margin: .4rem 0; }
.newsletter label { display: block; font-size: .9rem; margin-bottom: .25rem; }
.newsletter-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.newsletter-row input { flex: 1 1 14rem; min-width: 0; padding: .5rem .6rem; font: inherit; color: inherit; background: transparent; border: 1px solid rgba(128,128,128,.7); border-radius: 4px; }
.newsletter-row button { padding: .5rem 1rem; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 4px; cursor: pointer; }
.newsletter-row button:disabled { opacity: .6; cursor: progress; }
.newsletter input:focus-visible, .newsletter button:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
.newsletter-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.newsletter-status { min-height: 1.4em; font-size: .95rem; }
.newsletter-status[data-state="error"] { color: #c0392b; }
.newsletter-note { font-size: .82rem; opacity: .8; }