/* SergeBot Insights inline subscribe form, pages outside /blog/ (homepage card).
   Same field, sizes, states and colours as the v042 blog form (blog-v2.css .b2-sub-*),
   using the site.css tokens. Behaviour: /blog/blog-subscribe.js. */
.b2-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.b2-hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.b2-sub-form { position: relative; margin: 0; min-width: 0; width: 100%; max-width: 100%; container-type: inline-size; }
.b2-sub-row { display: flex; flex-direction: column; gap: 10px; }
.b2-sub-input { width: 100%; min-height: 48px; padding: 0 18px; border: 1px solid var(--line-active); border-radius: 999px; background: var(--bg-2); color: var(--text); font: 500 1rem/1.2 'Manrope', sans-serif; color-scheme: dark; transition: border-color .2s ease, box-shadow .2s ease; }
.b2-sub-input::placeholder { color: var(--muted); opacity: 1; }
.b2-sub-input:hover { border-color: var(--violet); }
.b2-sub-input:focus { outline: none; }
.b2-sub-input:focus-visible { outline: 3px solid var(--violet-soft); outline-offset: 2px; border-color: var(--violet); }
.b2-sub-input[aria-invalid="true"] { border-color: var(--danger); }
.b2-sub-form .subscribe-btn { min-height: 48px; padding: 12px 22px; font-size: .95rem; white-space: nowrap; }
.b2-sub-form .subscribe-btn:disabled { opacity: .6; cursor: progress; transform: none; }
.b2-sub-status { margin: 10px 4px 0; min-height: 1.5em; font-size: .95rem; color: #dcdbe8; }
.b2-sub-status:empty { margin-top: 0; min-height: 0; }
.b2-sub-status.is-ok { color: #34d399; }
.b2-sub-status.is-error { color: #ff8a8a; }
.b2-sub-note { margin: 10px 4px 0; font-size: .85rem; line-height: 1.5; color: var(--muted); }
@container (min-width: 400px) { .b2-sub-row { flex-direction: row; } .b2-sub-input { flex: 1 1 auto; min-width: 0; } .b2-sub-form .subscribe-btn { flex: 0 0 auto; } }
/* Homepage card: the action column holds the form instead of a single button. */
.home-subscribe-action { flex: 1 1 380px; min-width: 0; align-items: stretch; }
@media (forced-colors: active) { .b2-sub-input { border-color: CanvasText; } .b2-sub-input:focus-visible { outline-color: Highlight; } }
@media (prefers-reduced-motion: reduce) { .b2-sub-input { transition: none; } }