/* Rung 1 opt-in card (frontend/optin.js). Self-contained: it sits on the
   home page (style.css) and on the splitter pages (marketing + splitter.css),
   so it defines its own few values instead of borrowing either palette. */
.cg-optin {
  margin: 1.25rem 0 0; padding: 1rem 1.1rem; border-radius: 10px;
  border: 1px solid rgba(23, 23, 26, 0.14); background: rgba(23, 23, 26, 0.03);
  color: inherit; font-size: 0.95rem; line-height: 1.45; box-sizing: border-box;
}
.cg-optin-title { margin: 0 0 0.6rem; font-weight: 600; }
.cg-optin-form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cg-optin-input {
  flex: 1 1 14rem; min-width: 0; padding: 0.55rem 0.7rem; border-radius: 8px;
  border: 1px solid rgba(23, 23, 26, 0.28); background: #fff; color: #17171a; font: inherit;
}
.cg-optin-input:focus { outline: 2px solid #0a7ab8; outline-offset: 1px; }
.cg-optin-btn {
  flex: 0 0 auto; padding: 0.55rem 1rem; border-radius: 8px; border: 1px solid #0a7ab8;
  background: #0a7ab8; color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.cg-optin-btn:hover { background: #095e8e; border-color: #095e8e; }
.cg-optin-btn[disabled], .cg-optin-input[disabled] { opacity: 0.6; cursor: default; }
.cg-optin-note { margin: 0.55rem 0 0; font-size: 0.82rem; opacity: 0.75; }
.cg-optin-link { color: inherit; text-decoration: underline; }
.cg-optin-kofi {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.7rem;
  padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid rgba(23, 23, 26, 0.22);
  color: inherit; text-decoration: none; font-size: 0.86rem;
}
.cg-optin-kofi:hover { border-color: currentColor; }
.cg-optin-status { margin: 0.55rem 0 0; font-size: 0.9rem; min-height: 1.2em; }
.cg-optin[data-status="error"] .cg-optin-status { color: #b42318; }
.cg-optin[data-status="done"] .cg-optin-status { color: #1a7f37; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .cg-optin { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); }
  .cg-optin-input { background: rgba(255, 255, 255, 0.06); color: inherit; border-color: rgba(255, 255, 255, 0.28); }
  .cg-optin-kofi { border-color: rgba(255, 255, 255, 0.24); }
  .cg-optin[data-status="error"] .cg-optin-status { color: #ff7b72; }
  .cg-optin[data-status="done"] .cg-optin-status { color: #3fb950; }
}

/* The email gate dialog (cgOptin.gate) */
.cg-gate {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(10, 12, 16, 0.55); backdrop-filter: blur(2px);
}
.cg-gate-box {
  position: relative; width: 100%; max-width: 26rem; padding: 1.4rem 1.4rem 1.2rem; border-radius: 12px;
  background: #fff; color: #17171a; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); font-size: 0.95rem; line-height: 1.45;
}
.cg-gate-close {
  position: absolute; top: 0.5rem; right: 0.6rem; border: 0; background: transparent; font-size: 1.4rem;
  line-height: 1; color: #6a737d; cursor: pointer; padding: 0.2rem 0.4rem;
}
.cg-gate-close:hover { color: #17171a; }
.cg-gate-title { margin: 0 1.5rem 0.4rem 0; font-size: 1.15rem; font-weight: 700; }
.cg-gate-why { margin: 0 0 0.6rem; font-size: 0.9rem; color: #7a4a00; }
.cg-gate-lead { margin: 0 0 0.9rem; color: #444; }
.cg-gate .cg-optin-note { opacity: 0.8; }
.cg-gate[data-status="error"] .cg-optin-status { color: #b42318; }
@media (prefers-color-scheme: dark) {
  .cg-gate-box { background: #161b22; color: #e6e6e6; }
  .cg-gate-why { color: #e3b341; }
  .cg-gate-lead { color: #b8bcc2; }
  .cg-gate-close { color: #8b949e; }
  .cg-gate-close:hover { color: #e6e6e6; }
  .cg-gate[data-status="error"] .cg-optin-status { color: #ff7b72; }
}
.cg-gate-wait-text { margin: 0 0 0.6rem; font-size: 1rem; }
.cg-gate-resend {
  display: inline-block; margin: 0.6rem 0.6rem 0 0; padding: 0.45rem 0.8rem; border-radius: 8px;
  border: 1px solid rgba(23, 23, 26, 0.28); background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.cg-gate-resend:hover { border-color: currentColor; }
.cg-gate[data-status="waiting"] .cg-optin-status { color: #1848c8; }
@media (prefers-color-scheme: dark) { .cg-gate-resend { border-color: rgba(255, 255, 255, 0.28); } }
/* Inline variant shown while a separation runs */
.cg-gate.cg-gate-inline { position: static; inset: auto; display: block; padding: 0; margin: 1rem 0 0; background: none; backdrop-filter: none; }
.cg-gate-inline .cg-gate-box { max-width: none; box-shadow: none; border: 1px solid rgba(23, 23, 26, 0.14); background: rgba(23, 23, 26, 0.03); color: inherit; }
.cg-gate-inline .cg-gate-lead { color: inherit; opacity: 0.85; }
.cg-gate-inline[data-status="done"] .cg-optin-status { color: #1a7f37; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .cg-gate-inline .cg-gate-box { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); }
  .cg-gate-inline[data-status="done"] .cg-optin-status { color: #3fb950; }
}