/* Sign-up and contact forms */
.su { display: grid; gap: 12px; text-align: left; }
.su-fields { display: grid; gap: 10px; }
.su-f { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: #334155; }
.su-f input, .su-f select, .su-f textarea { width: 100%; padding: 11px 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; font-weight: 400; font-size: 15px; color: #0b1a2b; background: #fff; }
.su-f textarea { min-height: 120px; resize: vertical; }
.su-f input:focus, .su-f select:focus, .su-f textarea:focus { outline: 2px solid #34d399; outline-offset: 1px; border-color: #059669; }
.su .invalid { border-color: #dc2626 !important; background: #fef2f2 !important; }
/* The spam trap field sits in a wrapper that is not rendered at all, so a phone cannot autofill it (an autofilled trap made real sign-ups fail silently). */
.su-hp { display: none !important; }
.su-consent { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.5; color: #475569; font-weight: 400; }
.su-consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #059669; }
.su-consent a { color: #047857; text-decoration: underline; text-underline-offset: 3px; }
.su-send { width: 100%; justify-content: center; }
.su-msg { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 14px; }
.su-done { padding: 18px; border-radius: 14px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #064e3b; }
.su-done h3 { margin: 0 0 6px; font-size: 19px; }
.su-done p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.su-done .su-done-small { font-size: 13px; margin: 0; }
.su-done a { color: #047857; text-decoration: underline; text-underline-offset: 3px; }
.su-dark { max-width: 640px; margin: 28px auto 0; padding: 22px; border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.su-dark .su-fields { grid-template-columns: 1fr 1fr; }
.su-dark .su-consent { grid-column: 1 / -1; }
@media (max-width: 640px) { .su-dark .su-fields { grid-template-columns: 1fr; } .su-dark { padding: 16px; } }
.atp-form .su-f input, .atp-form .su-f select { color: #0b1a2b; background: #fff; }

.su [hidden], .su-done[hidden], .su-msg[hidden] { display: none !important; }

/* Account calls to action (9 Nov 2026): replace the updates form. Two links to the login host, no box around any label. */
.su-cta { display: grid; gap: 12px; justify-items: start; }
.su-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.su-cta-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: #475569; }
.su-cta-dark { justify-items: center; text-align: center; margin: 24px auto 0; }
.su-cta-dark .su-cta-btns { justify-content: center; }
.su-cta-dark .su-cta-note { color: rgba(255, 255, 255, .85); max-width: 520px; }
.su-cta-dark .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .7); background: transparent; }
.su-cta:not(.su-cta-dark) .btn-outline { background: #fff; }
.su-cta-dark .btn-outline:hover { color: #fff; border-color: #fff; }
.atp-form .su-cta { justify-items: stretch; }
.atp-form .su-cta-btns .btn, .atp-form .su-cta-btns .btn-outline { flex: 1 1 100%; justify-content: center; }
.nav-login { font-size: 14px; font-weight: 600; color: inherit; padding: 6px 10px; }
.nav-login:hover { text-decoration: underline; }
.nav-menu-cta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.footer-login { display: inline-flex; margin: 12px 0 0 14px; font-size: 14px; font-weight: 600; color: var(--brand-dark, var(--brand)); }
.footer-login:hover { text-decoration: underline; }