/* ============================================================
 * Alphavant · blog re-skin → Framer brand system (2026-08-29)
 * Loaded AFTER the per-page inline <style>, scoped to blog pages only.
 * Maps the legacy B&W/coral token names onto the alphavant.com
 * (ex-Framer) dark system: bg #09070d, ink #f3effa, accent #a855f7,
 * Erode serif display, Inter body, IBM Plex Sans labels.
 * Fonts are self-hosted from /fassets + /gfonts (GDPR-safe).
 * ============================================================ */

@font-face {
  font-family: 'Erode';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fassets/third-party-assets/fontshare/wf/W4KADQUTXSBS5JFKL5R6O3OD5Y2HUMPK/FUANNLITZ24BKB6NQZP3QPJP2PCYZG4I/4MK6ECKUA53PDOTLFHJC57TECDKREBGM.woff2) format('woff2');
}
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url(/gfonts/s/ibmplexsans/v23/zYXGKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1swZSAXcomDVmadSDtFlzBaI5loa26g.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/gfonts/s/ibmplexsans/v23/zYXGKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1swZSAXcomDVmadSD6llzBaI5loa26g.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/gfonts/s/ibmplexsans/v23/zYXGKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1swZSAXcomDVmadSD2FlzBaI5loa26g.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/gfonts/s/ibmplexsans/v23/zYXGKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1swZSAXcomDVmadSDNF5zBaI5loa26g.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/gfonts/s/ibmplexsans/v23/zYXGKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1swZSAXcomDVmadSDDV5zBaI5loa26g.woff2) format('woff2'); }

:root {
  /* surfaces */
  --cream:            #09070d; /* page background */
  --snow:             #121018; /* cards / stat blocks */
  --bone:             #f3effa; /* text-on-dark */
  --bone-deep:        #1a1524;
  --bone-translucent: rgba(9, 7, 13, 0.78); /* nav glass */
  --night:            #121018; /* CTA band card */

  /* ink */
  --ink:       #f3effa;
  --ink-hover: #ffffff;
  --mute:      #bdb7c8;
  --quiet:     #8d8698;

  /* lines */
  --rule:  #332b40;
  --faint: #221c2d;

  /* accent: coral slots now carry the purple */
  --coral:      #a855f7;
  --coral-soft: rgba(168, 85, 247, 0.14);
  --coral-ink:  #c79bf8; /* readable purple on dark */
  --coral-glow: 168 85 247;

  /* teal slots (blockquote/trust) fold into the purple system */
  --teal:      #a855f7;
  --teal-soft: rgba(168, 85, 247, 0.10);
  --teal-ink:  #c79bf8;

  /* footer ramp on dark */
  --footer-tagline:   #bdb7c8;
  --footer-col-title: #8d8698;
  --footer-link:      #bdb7c8;
  --footer-rule:      #332b40;
  --footer-bottom:    #8d8698;

  /* shadows read as glow-less on dark */
  --shadow-color-1: rgba(0, 0, 0, 0.5);
  --shadow-color-2: rgba(0, 0, 0, 0.35);

  /* typography */
  --display: 'Erode', Georgia, 'Times New Roman', serif;
  --sans:    'Inter', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:    'IBM Plex Sans', 'Inter', system-ui, sans-serif;
}

html { color-scheme: dark; }
body { background: var(--cream); color: var(--ink); }

/* Erode ships only in 700 — keep display elements from faux-bolding */
h1, h2, h3, .brand,
article h2, article h3, .qa h4, .band h2 { font-weight: 700; }

/* nav: dark glass pill look */
nav { background: var(--bone-translucent); border-bottom: 1px solid var(--faint); }
nav a.top { border-color: var(--rule); color: var(--ink); }
nav a.top:hover { border-color: var(--coral); color: var(--coral-ink); }
.brand { color: var(--ink); }

/* CTA: purple pill, dark label (Framer "Book a call") */
.cta { background: var(--coral); color: #0b0713; box-shadow: 0 0 24px rgba(168, 85, 247, 0.35); }
.cta:hover { background: #b76ef9; }

/* CTA band: card on dark, not black-on-white inversion */
.band { background: var(--night); border: 1px solid var(--rule); }
.band h2 { color: var(--bone); }
.band p { color: var(--mute); }

/* stat block: purple-edged card */
.stat { background: var(--snow); border-color: var(--rule); border-left-color: var(--coral); color: var(--mute); }
.stat b { color: var(--coral-ink); }

blockquote { border-left-color: var(--coral); color: var(--mute); }

/* eyebrow chip */
.eyebrow { background: var(--coral-soft); color: var(--coral-ink); }

/* article images (screenshots etc.) get a frame on dark */
article img { border-radius: 12px; border: 1px solid var(--rule); max-width: 100%; height: auto; }

/* tables inside articles */
article table { border-color: var(--rule); }
article th, article td { border-color: var(--faint); }
article thead th { background: var(--snow); }

/* cookie banner */
.cc { background: #121018; border-top: 1px solid var(--rule); }
.ccb #ccAccept { background: var(--coral); border-color: var(--coral); color: #0b0713; }

/* blog index cards */
.post { background: var(--snow); border-color: var(--rule); }
.post:hover { border-color: var(--coral); }

/* selection + focus in brand purple */
::selection { background: rgba(168, 85, 247, 0.35); color: #fff; }

/* nav wordmark is sans in the Framer system (Erode stays for headings) */
.brand { font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; }

/* ============================================================
 * Home-design nav: floating dark pill (matches alphavant.com /)
 * `nav.av-pill` overrides the legacy sticky-bar rules above.
 * ============================================================ */
nav.av-pill {
  position: sticky; top: 14px; z-index: 30;
  background: transparent; border: none; backdrop-filter: none;
}
nav.av-pill .wrap {
  display: flex; align-items: center; gap: 22px;
  width: fit-content; max-width: calc(100% - 24px); margin: 0 auto; height: auto;
  padding: 10px 12px 10px 22px;
  background: rgba(18, 16, 24, 0.82); backdrop-filter: blur(12px);
  border: 1px solid var(--rule); border-radius: 100px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
nav.av-pill .brand {
  font-family: var(--mono); font-weight: 600; font-size: 13px;
  letter-spacing: 0.4px; text-transform: none;
  color: var(--ink); text-decoration: none;
}
nav.av-pill .av-links { display: flex; align-items: center; gap: 18px; }
nav.av-pill .av-links a {
  font-family: var(--mono); font-weight: 500; font-size: 13px;
  color: var(--ink); text-decoration: none; opacity: 0.92;
}
nav.av-pill .av-links a:hover { color: var(--coral-ink); opacity: 1; }
nav.av-pill a.top {
  font-family: var(--mono); font-weight: 500; font-size: 13px;
  color: #0b0713; background: var(--coral);
  border: none; border-radius: 100px; padding: 8px 16px;
  text-decoration: none; box-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
}
nav.av-pill a.top:hover { background: #b76ef9; border-color: var(--coral); color: #0b0713; }
@media (max-width: 640px) {
  nav.av-pill .av-links { display: none; }
  nav.av-pill .wrap { gap: 14px; padding-left: 16px; }
}