.newsletter-invitation{padding:32px;border:1px solid var(--border-2);border-radius:12px;background:var(--bg-surface-1)}
.newsletter-invitation h2,.newsletter-dialog h2{color:var(--fg-1);font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.15;margin:12px 0 16px}
.newsletter-invitation>p,.newsletter-dialog>p{max-width:60ch;color:var(--fg-2)}
.newsletter-form{margin-top:24px;max-width:680px}
.newsletter-form label{display:block;margin-bottom:8px;color:var(--fg-1);font-weight:600}
.newsletter-fields{display:flex;gap:12px;align-items:stretch}
.newsletter-fields input{min-width:0;flex:1;background:var(--bg-canvas);border:1px solid var(--grid-600);border-radius:6px;color:var(--fg-1);padding:12px;font:inherit;min-height:48px}
.newsletter-fields input::placeholder{color:var(--fg-3)}
.newsletter-submit{min-height:48px;border:1px solid var(--accent);border-radius:6px;padding:12px 20px;background:var(--accent);color:var(--fg-on-accent);font:inherit;font-weight:600;cursor:pointer}
.newsletter-submit:hover{background:var(--accent-hover)}
.newsletter-submit:disabled{opacity:.65;cursor:wait}
.newsletter-help{font-size:.875rem;color:var(--fg-3);line-height:1.6;margin:12px 0 0}
.newsletter-help a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.newsletter-status{color:var(--fg-2);font-size:.9rem;line-height:1.5;margin:12px 0 0}
.newsletter-status:empty{display:none}
.newsletter-retry{background:transparent;border:1px solid var(--border-2);border-radius:6px;color:var(--fg-1);padding:10px 16px;min-height:44px;font:inherit;cursor:pointer;margin-top:12px}
.newsletter-dialog{box-sizing:border-box;width:min(600px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:40px 32px 32px;background:var(--bg-surface-1);color:var(--fg-2);border:1px solid var(--border-2);border-radius:12px}
.newsletter-dialog::backdrop{background:rgba(8,14,24,.85)}
.newsletter-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:6px;background:transparent;color:var(--fg-1);font-size:28px;cursor:pointer}
.newsletter-form :focus-visible,.newsletter-close:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.newsletter-fields input[aria-invalid=true]{border-color:var(--defcon-300)}
@media(max-width:600px){.newsletter-invitation{padding:24px 20px}.newsletter-dialog{padding:40px 20px 24px}.newsletter-fields{flex-direction:column}.newsletter-submit{width:100%}}