/* ============================================================================
   Shared email-capture component.
   ----------------------------------------------------------------------------
   The .ax-optin block was originally copy-pasted into each page's inline
   <style>, which is why it only ever existed on 3 tool pages and the blog —
   adding it anywhere else meant duplicating ~20 rules. This file makes it one
   <link> plus one block of markup.

   Every colour falls back to a literal, so it renders correctly on pages that
   don't define the AlgoX CSS variables. Pages that DO define them win the
   cascade via their inline <style>, so nothing existing changes appearance.

   track.js binds the submit handler globally on .ax-optin-form — it intercepts,
   posts JSON to /api/subscribe (Beehiiv), and swaps .ax-optin-note for a
   confirmation. No per-page JS needed.
   ========================================================================== */

.ax-optin{
  margin:26px auto 0; max-width:820px;
  border:1px solid color-mix(in srgb, var(--gold,#e7b400) 40%, transparent);
  border-radius:16px; padding:20px 22px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--gold,#e7b400) 9%, transparent), transparent);
  display:flex; gap:20px; align-items:center; flex-wrap:wrap;
  font-family:var(--font, system-ui,-apple-system,"Segoe UI",sans-serif);
}
.ax-optin .c{flex:1; min-width:230px}
.ax-optin .eb{
  color:var(--gold,#e7b400); font-size:11px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
}
.ax-optin h3{margin:4px 0; font-size:17px; font-weight:800; color:var(--ink,#fff)}
.ax-optin p{margin:0; color:var(--ink-2,#c3c2b7); font-size:13.5px; line-height:1.5}
.ax-optin-form{flex:1; min-width:230px; display:flex; gap:9px; flex-wrap:wrap}
.ax-optin-form input[type=email]{
  flex:1; min-width:160px;
  background:var(--page,var(--bg,#0d0d0d));
  border:1px solid var(--border,rgba(255,255,255,.10));
  border-radius:10px; color:var(--ink,#fff); padding:11px 13px;
  font:600 15px var(--font, system-ui,-apple-system,"Segoe UI",sans-serif);
}
.ax-optin-form input[type=email]:focus{
  outline:none; border-color:var(--gold,#e7b400);
}
.ax-optin-form button{
  white-space:nowrap; background:var(--gold,#e7b400); color:#231a00;
  font-weight:800; border:0; border-radius:10px; padding:11px 18px;
  font-size:14px; cursor:pointer; transition:filter .12s;
}
.ax-optin-form button:hover{filter:brightness(1.06)}
.ax-hp{position:absolute; left:-9999px}
.ax-optin-note{
  color:var(--muted,#898781); font-size:12px; font-weight:700;
  margin:9px 0 0; width:100%;
}

@media (prefers-color-scheme: light){
  .ax-optin h3{color:var(--ink,#0b0b0b)}
  .ax-optin p{color:var(--ink-2,#52514e)}
  .ax-optin-form input[type=email]{
    background:var(--page,var(--bg,#f9f9f7));
    color:var(--ink,#0b0b0b);
    border-color:var(--border,rgba(11,11,11,.10));
  }
}