/* All Sign Customizer — newsletter sign-up: band above the footer, box in help articles, compact form in dark heroes. */

.asc-nl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: center; }
.asc-nl h2 { margin: 0; color: #0B132B; font-size: clamp(1.3rem, 2.2vw, 1.6rem); letter-spacing: -.02em; line-height: 1.2; }
.asc-nl-text p { margin: 6px 0 0; color: #4B5563; }
.asc-nl-form { display: grid; gap: 8px; margin: 0; }
.asc-nl-row { display: flex; gap: 10px; }
.asc-nl-row input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #D1D5DB;
  border-radius: 999px;
  background: #fff;
  color: #0B132B;
  font: inherit;
  font-size: 16px;
}
/* The framework styles every input with a long :not() chain: only !important wins. */
.asc-nl-row input[type="email"] { padding: 0 18px !important; border-radius: 999px !important; box-shadow: none !important; }
.asc-nl-row input[type="email"]:focus { border-color: var(--asc-teal); outline: none; box-shadow: 0 0 0 3px rgb(0 184 156 / .2); }
.asc-nl-row input[aria-invalid="true"] { border-color: #B42318; }
.asc-nl-row button { flex: none; min-height: 48px; }
.asc-nl-row button[aria-busy="true"] { opacity: .6; pointer-events: none; }
.asc-nl-status { margin: 0; font-size: 14px; font-weight: 500; }
.asc-nl-status:empty { display: none; }
.asc-nl-status.is-ok { color: #00775F; }
.asc-nl-status.is-error { color: #B42318; }
.asc-nl-consent { margin: 0; color: #6B7280; font-size: 13px; }
.asc-nl-consent a { color: #00775F; }
.asc-nl-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Band above the footer */
.asc-nl-band { padding: 56px 0; border-top: 1px solid #E5E7EB; background: #F6F8FA; }

/* Box at the end of a help article */
.asc-nl--box { grid-template-columns: 1fr; gap: 16px; margin: 40px 0 0; padding: 26px; border: 1px solid #E5E7EB; border-radius: var(--asc-r-card, 24px); background: #F6F8FA; }
.asc-nl--box h2 { font-size: 1.2rem; }

/* Compact form in a dark hero (changelog) */
.asc-nl--dark { grid-template-columns: 1fr; gap: 10px; max-width: 520px; margin: 28px auto 0; text-align: left; }
.asc-nl--dark h2 { color: #E2E8F0; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.asc-nl--dark .asc-nl-text p { display: none; }
.asc-cl-hero--group .asc-nl--dark { margin: 24px 0 0; }
.asc-nl--dark .vpf-btn-primary { border-color: var(--vpf-accent); background: var(--vpf-accent); color: var(--vpf-primary); box-shadow: none; }
.asc-nl--dark .vpf-btn-primary:hover { border-color: #fff; background: #fff; }
.asc-nl--dark .asc-nl-consent { color: #94A3B8; }
/* Hero paragraphs are large and centered: the form's own lines stay small. */
.asc-cl-hero .asc-nl--dark p.asc-nl-consent, .asc-cl-hero .asc-nl--dark p.asc-nl-status { max-width: none; margin: 0; font-size: 13px; }
.asc-nl--dark .asc-nl-consent a { color: #CBD5E1; }
.asc-nl--dark .asc-nl-status.is-ok { color: var(--asc-green); }
.asc-nl--dark .asc-nl-status.is-error { color: #FDA29B; }

/* Roadmap: "also send me product news" */
.asc-nl-check { display: flex; gap: 10px; align-items: flex-start; color: #374151; font-size: 14px; line-height: 1.45; cursor: pointer; }
.asc-nl-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #00876F; }

@media (max-width: 760px) {
  .asc-nl { grid-template-columns: 1fr; }
  .asc-nl-band { padding: 44px 0; }
}
@media (max-width: 420px) {
  .asc-nl-row { flex-direction: column; }
  .asc-nl-row button { width: 100%; }
}