/* Slim token + font subset for the ConvergeCELL webinar page — only what this page uses. */
@font-face { font-family: 'Rethink Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../_ds/converge-bio-marketing-design-system-019e16a2-70dc-7484-98b2-8694bada2da1/fonts/RethinkSans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Rethink Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../_ds/converge-bio-marketing-design-system-019e16a2-70dc-7484-98b2-8694bada2da1/fonts/RethinkSans-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Rethink Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../_ds/converge-bio-marketing-design-system-019e16a2-70dc-7484-98b2-8694bada2da1/fonts/RethinkSans-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Rethink Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../_ds/converge-bio-marketing-design-system-019e16a2-70dc-7484-98b2-8694bada2da1/fonts/RethinkSans-Bold.ttf') format('truetype'); }

:root {
  /* ---------- Brand pixel-gradient palette ----------
     These are sampled from the rainbow motifs (bird,
     rhombus, hexagon) and the wordmark wordbar. Use them
     for accents, charts, illustration recolors. */
  /* Official Converge BrandBook 2024 palette */
  --c-black-100:  #12111C;   /* primary ink — text, hero backgrounds */
  --c-black-50:   #272630;   /* secondary ink — elevated dark surfaces */
  --c-grey-200:   #DEDEDE;   /* hairlines, dividers */
  --c-grey-100:   #F7F7F7;   /* page wash, muted cards */
  --c-red:        #FF0022;   /* primary CTA accent */
  --c-yellow:     #FFBF00;   /* highlight, callouts */
  --c-blue:       #034EC2;   /* link, focus, data accent */
  --c-orange:     #FD4902;   /* warning, secondary accent */
  --c-pink:       #FC92CC;   /* soft accent */
  --c-green:      #016B42;   /* success */

  /* ---------- Foreground (text/icons) ----------
     The site flips between dark hero sections (light fg)
     and light content sections (dark fg). Use fg-on-light
     by default; fg-on-dark inside .surface-ink containers. */
  --fg-1:         #12111C;   /* primary text on light (C Black 100) */
  --fg-2:         #272630;   /* secondary text (C Black 50) */
  --fg-3:         #6E6E76;   /* tertiary / captions */
  --fg-mute:      #9A9AA3;   /* placeholder, disabled */
  --fg-on-ink-1: #F7F7F8;    /* primary text on dark */
  --fg-on-ink-2: #B9B9C0;    /* secondary on dark */
  --fg-on-ink-3: #76767E;    /* tertiary on dark */

  /* ---------- Surface (backgrounds) ---------- */
  --bg-paper:    #FFFFFF;    /* canvas / cards on light */
  --bg-mute:     #F7F7F7;    /* page wash (C Grey 100) */
  --bg-cool:     #DEDEDE;    /* secondary panel (C Grey 200) */
  --bg-ink:      #12111C;    /* hero / footer (C Black 100) */
  --bg-ink-soft: #272630;    /* card on dark (C Black 50) */
  --bg-ink-2:    #2E2D38;    /* elevated on dark */

  /* ---------- Borders ---------- */
  --border-1:     rgba(10, 10, 11, 0.10);
  --border-2:     rgba(10, 10, 11, 0.06);
  --border-ink-1: rgba(255, 255, 255, 0.10);
  --border-ink-2: rgba(255, 255, 255, 0.06);

  /* ---------- Semantic ---------- */
  --accent:       var(--c-red);          /* primary CTA accent */
  --accent-fg:    #FFFFFF;
  --accent-2:     var(--c-blue);
  --success:      var(--c-green);
  --warning:      var(--c-orange);
  --danger:       var(--c-red);
  --link:         var(--c-blue);

  /* ---------- Type family ---------- */
  --font-sans: 'Rethink Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  /* Display headings also use Rethink Sans — the brand has a single
     sans family across UI and headlines. */
  --font-display: 'Rethink Sans', 'Inter Display', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* ---------- Type scale (1.20 ratio, ~minor-third) ---------- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-96: 6rem;

  /* ---------- Radii ---------- */
  --r-0:  0px;
  --r-2:  2px;
  --r-4:  4px;
  --r-8:  8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-24: 24px;
  --r-pill: 999px;

  /* ---------- Spacing (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(10,10,11,0.06), 0 1px 1px rgba(10,10,11,0.04);
  --shadow-2: 0 4px 10px rgba(10,10,11,0.06), 0 1px 2px rgba(10,10,11,0.04);
  --shadow-3: 0 12px 32px rgba(10,10,11,0.10), 0 2px 6px rgba(10,10,11,0.04);
  --shadow-ink: 0 24px 60px rgba(0,0,0,0.45);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;
}


html { color: var(--fg-1); background: var(--bg-paper); font-family: var(--font-sans); }
body { font-size: var(--fs-16); line-height: 1.55; -webkit-font-smoothing: antialiased; }