/* "Get updates" control on the homepage; the blog form (.subscribe-form) reuses .sub-msg and .sub-hp.
   The wrapper inherits justify-content / text-align from the CTA row, so it follows whatever alignment the row has. */
.sub-wrap { display: flex; flex-wrap: wrap; justify-content: inherit; text-align: inherit; }
.sub-wrap.open { flex: 0 0 100%; }
.sub-toggle {
  padding: 14px 12px; border-radius: 8px; cursor: pointer;
  font-size: 14.5px; font-weight: 500; color: var(--text-dim);
  text-decoration: underline; text-decoration-color: var(--border-bright); text-underline-offset: 5px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.sub-toggle:hover { color: var(--accent); text-decoration-color: var(--accent); }
.sub-wrap.open .sub-toggle { display: none; }
.sub-form { display: none; gap: 10px; flex: 0 1 440px; flex-wrap: wrap; }
.sub-wrap.open .sub-form { display: flex; }
.sub-form input[type="email"] {
  flex: 1 1 200px; min-width: 0; padding: 13px 14px; font: inherit; font-size: 15px;
  color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-bright); border-radius: 8px;
}
.sub-form input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.sub-form button[type="submit"] {
  padding: 13px 20px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  color: var(--accent); background: var(--bg-elev); border: 1px solid var(--accent); border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.sub-form button[type="submit"]:hover:not(:disabled) { background: var(--accent); color: #fff; }
.sub-form button:disabled { opacity: 0.6; cursor: wait; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sub-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sub-wrap .sub-note { display: none; flex: 0 0 100%; max-width: none; margin: 8px 0 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--text-mute); }
.sub-wrap.open .sub-note { display: block; }
.sub-wrap .sub-msg { flex: 0 0 100%; max-width: none; margin: 8px 0 0; font-size: 13.5px; }
.sub-msg:empty { display: none; }
.sub-msg.ok { color: #15803d; }
.sub-msg.err { color: #c0392b; }