/* Newsletter sign-up: the checkbox line used on the /newsletter page, and the compact box on the blog and home pages (nlbox). */
.nl-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--text);font-weight:400;cursor:pointer}
.nl-check input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--orange)}
.nl-check a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.nlbox-s{padding:0 0 24px}
.nlbox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px 48px;align-items:center;padding:32px;border-radius:var(--r-card);background:var(--card);box-shadow:0 0 0 1px var(--line)}
.nlbox h2{margin:0 0 6px;font:600 24px/1.2 "Inter Tight",system-ui,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.nlbox .nlb-t p{margin:0;font-size:15px;line-height:1.5;color:var(--text)}
.nlb-r{display:flex;gap:10px}
.nlb-r input[type=email]{flex:1;min-width:0;height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:15px}
.nlb-r input[type=email]:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.nlbox .nl-check{margin-top:12px;font-size:13px;color:var(--muted)}
.nlbox .ctf-e{display:block;margin-top:6px;font-size:13px;color:var(--orange-text-aa)}
.nlbox .ctf-s{margin-top:10px;font-size:14px;line-height:1.5;color:var(--text)}
.nlbox .cthp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:760px){.nlbox{grid-template-columns:1fr;padding:24px}.nlb-r{flex-direction:column}.nlb-r .btn{width:100%;justify-content:center}}
/* the contact-form field styles size every input in .ctf: keep the checkbox a checkbox, and its text regular weight */
.ctf .nl-check{flex-direction:row;font-weight:400;gap:10px}
.ctf .nl-check input[type=checkbox]{width:18px;height:18px;min-height:0;padding:0;margin:2px 0 0;border-radius:4px;box-shadow:none;appearance:auto;-webkit-appearance:checkbox;background:none}
/* the heading takes focus when a state appears so screen readers announce it; it is not a control, so no ring around it */
.nl-state h1:focus,.nl-state h1:focus-visible{outline:none}