/* Newsletter signup (footer, #newsletter). Uses the page's own tokens, so light/dark follow data-theme. */
.nl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px 60px;align-items:end;
  margin-top:72px;padding-top:32px;border-top:1px solid var(--gh-border);scroll-margin-top:96px}
.nl-h{font:500 32px/1.1 var(--mono);letter-spacing:-.04em;text-transform:uppercase}
.nl-h .us{color:var(--red)}
.nl-sub{margin-top:12px;max-width:44ch;font:400 16px/24px var(--mono);letter-spacing:-.02em;color:var(--gh-muted)}

.nl-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:12px;align-items:end}
.nl-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.nl-field > span{font:400 12px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--gh-muted)}
.nl-field input{width:100%;height:56px;padding:0 16px;border:1px solid var(--gh-btn-border);border-radius:6px;
  background:var(--gh-bg);color:var(--vc-fg);font:400 16px/1 var(--mono);letter-spacing:-.02em;
  transition:border-color .15s,background-color .15s}
.nl-field input::placeholder{color:var(--gh-muted);opacity:.7}
.nl-field input:hover{border-color:var(--gh-muted)}
.nl-field input:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-color:var(--red)}
.nl-field input[aria-invalid="true"]{border-color:var(--red)}

/* .gbtn.primary is a tall CTA elsewhere; here it sits in line with the inputs */
.nl .gbtn.nl-btn{height:56px;padding:0 16px;align-items:center;min-width:180px;border:0}
.nl .gbtn.nl-btn:focus-visible{outline:2px solid var(--vc-fg);outline-offset:4px}
.nl .gbtn.nl-btn:disabled{cursor:progress;opacity:.75}
.nl .gbtn.nl-btn:disabled::before{transform:none}

.nl-msg{min-height:24px;margin-top:12px;font:400 14px/24px var(--mono);letter-spacing:-.02em}
.nl-msg[data-state="ok"]{color:var(--vc-fg)}
.nl-msg[data-state="ok"]::before{content:"✓ ";color:var(--red)}
.nl-msg[data-state="error"]{color:var(--red)}

/* honeypot: off-screen for people, still in the form for bots */
.nl-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

@media (max-width:1100px){
  .nl{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nl{margin-top:48px}
  .nl-h{font-size:26px}
  .nl-fields{grid-template-columns:1fr}
  .nl .gbtn.nl-btn{width:100%}
}