/* ============================================================
   MediaOS · Walkthrough deck — global design system
   ============================================================ */

:root {
  /* Surfaces */
  --ink:        #0A0D10;
  --ink-2:      #0E1216;
  --surface:    #12161B;
  --surface-2:  #181D23;
  --surface-3:  #1F252C;
  --border:     #242B33;
  --border-2:   #2E363F;
  --hairline:   rgba(244, 241, 234, 0.08);

  /* Text */
  --cream:      #F4F1EA;
  --cream-dim:  #C9C5BD;
  --muted:      #8A9099;
  --muted-2:    #5E656E;

  /* Brand accents */
  --pacific:    #4E8FCC;          /* oklch(0.62 0.13 235) */
  --pacific-2:  #6FA8DF;
  --coral:      #E89970;          /* oklch(0.72 0.13 40)  */
  --coral-2:    #F2B795;
  --kelp:       #4F8C7B;          /* tertiary teal-green  */
  --signal:     #DA3C3C;          /* live / record dot    */

  /* Type */
  --sans: "Geist", "Inter", -apple-system, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Instrument Serif", "Times New Roman", serif;
}

/* Reset / baseline ------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #000; }
body { font-family: var(--sans); color: var(--cream); -webkit-font-smoothing: antialiased; }

deck-stage > section {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 18px;
  letter-spacing: -0.005em;
  overflow: hidden;
}

/* ============================================================
   Reusable slide chrome
   ============================================================ */

.slide-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.slide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 64px;
  border-bottom: 1px solid var(--hairline);
}

.brandmark {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--cream);
  text-transform: uppercase;
}
.brandmark .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(232,153,112,0.18);
}
.brandmark .div { color: var(--muted-2); margin: 0 4px; }

.crumbs {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.crumbs .sep { color: var(--muted-2); margin: 0 10px; }

.slide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 64px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--hairline);
}
.slide-footer .conf { color: var(--muted-2); }
.slide-footer .pg .num { color: var(--cream); }

.slide-body {
  flex: 1;
  display: flex;
  padding: 0 64px;
  min-height: 0;
}

/* ============================================================
   Type
   ============================================================ */

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--coral);
}

.h-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 128px;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--cream);
}
.h-display em { font-style: italic; color: var(--coral); }

.h-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--cream);
}
.h-section {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.h-screen {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--cream);
}
.h-screen .serif { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--cream-dim); }

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.lead {
  font-size: 22px;
  line-height: 1.45;
  color: var(--cream-dim);
  max-width: 60ch;
  text-wrap: pretty;
}
.body-text {
  font-size: 17px;
  line-height: 1.5;
  color: var(--cream-dim);
  text-wrap: pretty;
}

/* ============================================================
   Bullet / feature list
   ============================================================ */

.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.feature-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  font-size: 16px;
  line-height: 1.45;
  color: var(--cream-dim);
}
.feature-list li:last-child { border-bottom: 1px solid var(--hairline); }
.feature-list li .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
}
.feature-list b { color: var(--cream); font-weight: 500; }

/* Tag chips on bottom of screen slides */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.tag.accent { color: var(--coral); border-color: rgba(232,153,112,0.4); }
.tag.pacific { color: var(--pacific-2); border-color: rgba(110,168,223,0.4); }

/* ============================================================
   Big numerals for section dividers
   ============================================================ */

.bignum {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: 640px;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--cream);
}
.bignum.outline {
  -webkit-text-stroke: 1px var(--border-2);
  color: transparent;
}

/* ============================================================
   Misc utilities
   ============================================================ */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-48 { gap: 48px; }
.gap-64 { gap: 64px; }
.flex1 { flex: 1; }
.center { display: flex; align-items: center; justify-content: center; }
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.muted { color: var(--muted); }
.dim { color: var(--cream-dim); }
.coral { color: var(--coral); }
.pacific { color: var(--pacific-2); }

.divider-v { width: 1px; background: var(--hairline); align-self: stretch; }
.divider-h { height: 1px; background: var(--hairline); width: 100%; }

/* Cell-block backgrounds that hint at editorial structure */
.surface { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.surface-2 { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }

/* Pill */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--cream-dim);
}
.pill .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(218,60,60,0.18); }
.pill.live { color: var(--cream); border-color: rgba(218,60,60,0.45); }

/* Mode badge — Bula / Sports */
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--cream-dim);
}
.mode-badge.bula::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.mode-badge.sports::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--pacific); }