/* The /newsletter page (dist/newsletter.html): the site's dark look and pressed buttons (owner picked option B,
   2026-10-25). The form itself is styled by newsletter-signup.css, which the blog pages use too. */
:root{
  --bg:#050507;
  --ink:#f4f1ea;
  --ink-dim:#a09bae;
  --line:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.14);
  --accent:#b14bff;
  --sans:Arial,'Helvetica Neue',Helvetica,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.nl-top{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:760px;width:100%;margin:0 auto;padding:22px 24px}
.nav-brand{display:flex;align-items:center;gap:10px}
.nav-brand img{width:28px;height:28px}
.nl-back{font-size:14px;color:var(--ink-dim)}
.nl-back:hover{color:var(--ink)}

.nl-main{flex:1;max-width:760px;width:100%;margin:0 auto;padding:56px 24px 72px}
.nl-main h1{font-weight:700;letter-spacing:-0.03em;line-height:1.02;font-size:clamp(40px,7vw,72px);margin:0 0 18px}
.nl-lead{font-size:18px;color:var(--ink-dim);max-width:56ch;margin:0 0 30px}

.nl-list{list-style:none;margin:40px 0 0;display:grid;gap:14px;max-width:60ch}
.nl-list li{border-top:1px solid var(--line);padding-top:14px;color:var(--ink-dim)}
.nl-list strong{color:var(--ink);font-weight:700}

.nl-foot{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;padding:26px 24px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-dim)}
.nl-foot a:hover{color:var(--ink)}
/* Footer social logos (server/features/social-links.js): each company's own logo in its own color (owner, 2026-10-25) */
.foot-social{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;padding:4px;border-radius:6px;transition:opacity .2s}
.foot-social a:hover{opacity:.75}
.foot-social a:focus-visible{outline:2px solid var(--accent,#b14bff);outline-offset:2px}
.foot-social svg{display:block;width:20px;height:20px}
.foot-social .s-tt svg,.foot-social .s-x svg{color:#fff}
.foot-social .s-ig svg{color:#ff0069}
.foot-social .s-yt svg{color:#f00}