/* ============================================================================
   newsletter.css — the Kit sign-up card at the end of articles (the footer form is footer-os.css)
   (owner 2026-10-05, cryptogames.gg only; Newsletter\Newsletter prints the markup).

   Palette = the homepage's: the blue-purple gradient, no orange. The band wears the gradient in
   light and dark alike (white text); the card follows the theme through body[data-theme].
   ============================================================================ */
.cg-nl {
  --nl-grad: linear-gradient(135deg, #06707f 0%, #4a28c4 62%, #7b2fc0 100%);
  --nl-accent: #9d8cff; --nl-bg: #212121; --nl-line: rgba(255,255,255,.1); --nl-text: #ffffff; --nl-muted: #b5b5b5;
  box-sizing: border-box; font: 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
}
body:not([data-theme="dark"]) .cg-nl { --nl-accent: #4a28c4; --nl-bg: #f4f4f6; --nl-line: rgba(0,0,0,.09); --nl-text: #191919; --nl-muted: #5f5f6a; }
.cg-nl *, .cg-nl *::before, .cg-nl *::after { box-sizing: border-box; }
.cg-nl-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cg-nl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.cg-nl-kick { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cg-nl-ico { display: inline-block; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1.6 2L12 12.6 19.4 7H4.6zM4 8.9V17h16V8.9l-8 6-8-6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1.6 2L12 12.6 19.4 7H4.6zM4 8.9V17h16V8.9l-8 6-8-6z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ------------------------------------------------------------------ the form */
.cg-nl .cg-nl-form { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; background: none; border: 0; }
.cg-nl .cg-nl-in-email { flex: 1 1 220px; min-width: 0; height: 50px; margin: 0; padding: 0 18px; font: inherit; font-size: 15px; border-radius: 12px; outline: none; box-shadow: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.cg-nl .cg-nl-btn { flex: 0 0 auto; height: 50px; margin: 0; padding: 0 26px; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .01em; line-height: 1; border: 0; border-radius: 12px; cursor: pointer; transition: transform .15s, box-shadow .15s, filter .15s; }
.cg-nl .cg-nl-btn:hover { transform: translateY(-1px); }
.cg-nl .cg-nl-btn:active { transform: translateY(0); }
.cg-nl .cg-nl-btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.cg-nl .cg-nl-msg { flex: 1 0 100%; min-height: 0; margin: 0; font-size: 13px; line-height: 1.4; }
.cg-nl .cg-nl-msg:empty { display: none; }
.cg-nl .cg-nl-form.is-done { display: block; }
.cg-nl .cg-nl-form.is-done .cg-nl-in-email, .cg-nl .cg-nl-form.is-done .cg-nl-btn { display: none; }

/* ------------------------------------------------------------------ the article card */
/* The author card's colours exactly (article-os.css .ar-author: s1 + a blue-purple glow from the top right),
   turned over: the glow comes from the bottom right. */
.cg-nl--card { --nl-glow: rgba(74,40,196,.22); position: relative; clear: both; margin: 36px 0; padding: 26px 28px 24px; border-radius: 16px; color: var(--nl-text);
  background: radial-gradient(120% 140% at 100% 100%, var(--nl-glow), transparent 60%), var(--nl-bg); overflow: hidden; }
body:not([data-theme="dark"]) .cg-nl--card { --nl-glow: rgba(74,40,196,.08); }
.cg-nl--card .cg-nl-kick { color: var(--nl-accent); }
.cg-nl--card .cg-nl-cardh { margin: 8px 0 8px; padding: 0; color: var(--nl-text); font: 800 clamp(21px, 2.6vw, 27px)/1.2 Inter, system-ui, sans-serif; letter-spacing: -.015em; }
.cg-nl--card .cg-nl-cardp { margin: 0 0 18px; color: var(--nl-muted); font-size: 15px; line-height: 1.5; }
.cg-nl--card .cg-nl-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; background: none; border: 0; position: relative; }
.cg-nl--card .cg-nl-in-email { flex: 1 1 220px; min-width: 0; height: 50px; margin: 0; padding: 0 18px; font: inherit; font-size: 15px; border-radius: 12px; outline: none; box-shadow: none; background: rgba(0,0,0,.18); border: 1.5px solid var(--nl-line); color: var(--nl-text); }
body:not([data-theme="dark"]) .cg-nl--card .cg-nl-in-email { background: #fff; }
.cg-nl--card .cg-nl-in-email::placeholder { color: var(--nl-muted); }
.cg-nl--card .cg-nl-in-email:focus { border-color: var(--nl-accent); box-shadow: 0 0 0 3px rgba(106,80,255,.2); }
.cg-nl--card .cg-nl-btn { flex: 0 0 auto; height: 50px; margin: 0; padding: 0 28px; border: 0; border-radius: 12px; background: var(--nl-grad); color: #fff; font: inherit; font-size: 15px; font-weight: 800; letter-spacing: .01em; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(74,40,196,.85); transition: transform .15s, filter .15s; }
.cg-nl--card .cg-nl-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.cg-nl--card .cg-nl-btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.cg-nl--card .cg-nl-msg { flex: 1 0 100%; margin: 0; color: var(--nl-text); font-size: 13px; font-weight: 600; line-height: 1.4; }
.cg-nl--card .cg-nl-msg:empty { display: none; }
.cg-nl--card .cg-nl-msg.is-err { color: #c9463e; }
.cg-nl--card .cg-nl-form.is-done .cg-nl-in-email, .cg-nl--card .cg-nl-form.is-done .cg-nl-btn { display: none; }

/* ------------------------------------------------------------------ small screens */
@media (max-width: 480px) {
  .cg-nl--card { padding: 20px 18px; }
  .cg-nl--card .cg-nl-btn { flex: 1 0 100%; }
}
@media (prefers-reduced-motion: reduce) { .cg-nl--card .cg-nl-btn { transition: none; } }