.article-signup { padding: 30px; border: 1px solid rgba(63, 207, 142, .32); border-radius: 16px; background: #10251b; }
.article-signup h2 { margin-bottom: 16px; }
.article-signup > p { font-size: 17px; }
.signup-form { display: grid; gap: 14px; }
.signup-form label { color: #eaf0ec; font-size: 15px; font-weight: 600; }
.signup-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.signup-fields input { flex: 1 1 210px; width: 100%; min-width: 0; border: 1px solid #758f80; border-radius: 8px; padding: 13px 15px; background: #07130c; color: #eaf0ec; font: inherit; font-size: 16px; }
.signup-fields input::placeholder { color: #9bac9f; }
.signup-fields button { flex: 1 1 220px; min-height: 48px; border: 0; border-radius: 8px; padding: 13px 18px; background: #3fcf8e; color: #06210f; cursor: pointer; font: 600 15px/1.5 "IBM Plex Sans", sans-serif; }
.signup-fields button:hover:not(:disabled) { background: #70dfac; }
.signup-fields button:disabled { cursor: wait; opacity: .7; }
.signup-fields :focus-visible { outline: 3px solid #85d9aa; outline-offset: 3px; }
.signup-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup-success { align-items: center; padding: 20px; border: 1px solid #3fcf8e; border-radius: 10px; color: #eaf0ec; font-size: 17px; }
.article-signup .signup-note { margin: 16px 0 0; color: #b6c4bb; font-size: 13px; line-height: 1.7; }
.article-signup .signup-error { margin-top: 12px; color: #ffb5b5; font-size: 15px; }
@media (max-width: 640px) {
  .article-signup { padding: 22px 18px; }
}