/* The newsletter signup at the foot of the home, apps and FAQ pages, on the
   static export only (app/views/pages/_newsletter.html.erb, public/newsletter.js).

   It replaced the early-access offer on 2026-10-11, and these rules replaced its
   .early / .early-panel / .early-tag / .early-lead / .earlyform / .earlymsg /
   .earlydone / .earlytick rules in application.css.

   ⚠ Deliberately SMALLER than every section above it: the newsletter is never
   the headline action (product-email skill). Less padding than .mk-band, a
   heading below the rail headings' size, and a ghost button beside the field. */

.newsletter { padding: clamp(1.75rem, 4vw, 2.5rem) 0; border-top: 1px solid var(--line); scroll-margin-top: 4.5rem; }
.newsletter-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: 1.1rem 3rem; align-items: end; }
@media (max-width: 760px) { .newsletter-row { grid-template-columns: minmax(0, 1fr); } }

.newsletter-kicker { margin: 0 0 .4rem; font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.newsletter h2 { margin: 0 0 .3rem; font-family: var(--mono); font-weight: 700; font-size: clamp(1.08rem, 2vw, 1.28rem); letter-spacing: -.045em; }
.newsletter-lead { margin: 0; max-width: 34rem; color: var(--ink-2); font-size: .95rem; }

.newsletter-label { display: block; margin: 0 0 .35rem; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
/* Field and button in one row at every width, at one height (form-controls rule 1). */
.newsletter-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.newsletter-field input[type="email"] { height: 2.75rem; }
.newsletter-field .btn { height: 2.75rem; min-width: 7.25rem; }

/* Answered in place by newsletter.js. Feedback sits below the field. */
.newsletter-msg { margin: .55rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
/* --bad is a fill color and reads at 3.4:1 on paper; text needs the darker red, and the
   token again in dark mode, where the dark red would vanish. */
.newsletter-msg.is-bad { color: #b3261e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .newsletter-msg.is-bad { color: var(--bad); } }
:root[data-theme="dark"] .newsletter-msg.is-bad { color: var(--bad); }
.newsletter-msg .nw { overflow-wrap: normal; }
.newsletter-done { display: flex; gap: .7rem; align-items: flex-start; font-size: .98rem; line-height: 1.5; color: var(--ink-2); outline: 0; animation: newsletter-in .28s ease both; }
.newsletter-done strong { color: var(--ink); }
.newsletter-tick { flex: 0 0 auto; width: 1.35em; height: 1.35em; margin-top: .05em; color: var(--ok-ink); }
@keyframes newsletter-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .newsletter-done { animation: none; } }