/* ═══════════════════════════════════════════════════════════════
   Splitlight × SWC — Pitch design tokens (LIGHT MODE)
   Splitlight DS, recoloured for paper. SWC accents in data + Playfair.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Playfair+Display:ital,wght@1,900&display=swap');

:root {
  /* ── PAPER (light Splitlight) ── */
  --paper:        #F6F5F1;   /* warm off-white page */
  --paper-2:      #FFFFFF;   /* card */
  --paper-3:      #EFEDE7;   /* raised / subtle band */
  --ink:          #0E1116;   /* near-black text */
  --ink-2:        #3E474E;   /* SWC dark grey — secondary text */
  --ink-3:        #6B7280;   /* tertiary */
  --rule:         rgba(14,17,22,0.10);
  --rule-soft:    rgba(14,17,22,0.06);

  /* ── SPLITLIGHT BRAND (kept) ── */
  --sl-blue:      #2F4DD8;   /* darker for AA on light */
  --sl-blue-bright:#5274ff;  /* for chips */
  --sl-green:     #47B300;   /* muted go on light bg */
  --sl-green-bright:#66FF00;
  --sl-purple:    #7848e8;

  /* ── SWC ── */
  --swc-teal:     #54C0D3;
  --swc-green:    #00A58B;
  --swc-grey:     #3E474E;
  --swc-mint:     #E5F6F4;
  --swc-mint-2:   #CCEDE8;
  --swc-sky:      #DDF2F6;

  /* ── SEMANTIC ── */
  --warn:         #C0392B;
  --warn-soft:    #FFE5E0;

  /* ── TYPE ── */
  --sans: "Space Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Playfair Display", Georgia, serif;

  --grad-rule: linear-gradient(90deg, var(--sl-blue), var(--swc-teal));
  --grad-warm: linear-gradient(135deg, var(--sl-blue) 0%, var(--swc-teal) 60%, var(--swc-green) 100%);
}

/* ═══ SLIDE BASE ═══ */
.slide {
  width: 1920px;
  height: 1080px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 80px 96px;
  font-size: 22px;
  line-height: 1.5;
}

/* eyebrow */
.eyebrow {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--sl-blue);
}
.eyebrow.teal  { color: var(--swc-green); }
.eyebrow.dark  { color: var(--ink-2); }

/* type */
.display {
  font-family: var(--sans);
  font-size: 120px;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
}
h1.title {
  font-family: var(--sans);
  font-size: 84px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0;
}
h2.title {
  font-family: var(--sans);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.kicker {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--swc-teal);
}
.kicker.green { color: var(--swc-green); }
.kicker.blue  { color: var(--sl-blue); }
.kicker.warn  { color: var(--warn); }

.body {
  font-size: 26px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 1100px;
  text-wrap: pretty;
}
.body.lg { font-size: 32px; line-height: 1.4; }
.mono { font-family: var(--mono); }

/* layout */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-12 { gap: 48px; }

/* footer chrome */
.deck-foot {
  position: absolute;
  left: 96px; right: 96px; bottom: 36px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 13px; color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.deck-foot .rule { flex: 1; height: 1px; background: var(--rule); margin: 0 24px; }

/* lockup */
.lockup {
  display: inline-flex; align-items: center; gap: 18px;
  font-family: var(--sans); font-weight: 600; font-size: 22px;
  color: var(--ink);
}
.lockup .x { font-family: var(--serif); font-style: italic; font-weight: 900; color: var(--swc-teal); font-size: 28px; line-height: 1; transform: translateY(-2px); }

/* sl mark (light variant) */
.sl-mark { width: 60px; height: 34px; flex-shrink: 0; }

/* swc mark (text wordmark) */
.swc-mark {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--swc-grey);
  font-size: 18px;
  text-transform: uppercase;
}
.swc-mark .dot { color: var(--swc-teal); }

/* card */
.card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 36px;
}
.card.tinted { background: var(--swc-mint); border-color: rgba(0,165,139,0.14); }
.card.deep { background: var(--ink); color: #fff; border: none; }
.card.deep .body { color: rgba(255,255,255,0.72); }

/* tag */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 2px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(47,77,216,0.08); color: var(--sl-blue);
  border: 1px solid rgba(47,77,216,0.18);
}
.tag.teal { background: rgba(84,192,211,0.12); color: var(--swc-green); border-color: rgba(0,165,139,0.22); }
.tag.warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(192,57,43,0.18); }
.tag .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* button-ish */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 18px;
  background: var(--ink); color: var(--paper-2);
  border: none;
}

/* divider */
.div-rule { height: 4px; width: 120px; background: var(--grad-rule); border-radius: 2px; }

/* ═══ SCROLLING PAGE BASE ═══ */
.page {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
}

/* shared mark glyph (Splitlight) */
.sl-glyph line, .sl-glyph circle { vector-effect: non-scaling-stroke; }