/* ============================================================
   Tesseron AI Academy — deck styles
   Tokens from ds/tokens.css · Type scale calibrated for 1920×1080
   ============================================================ */

/* ── Type scale (pt → px, targets 1920×1080) ────────────── */
:root {
  --fs-hero:     128px;   /* hero display */
  --fs-title:     72px;   /* slide title */
  --fs-subtitle:  44px;   /* large pull copy */
  --fs-body:      30px;   /* default body */
  --fs-body-l:    36px;   /* large body */
  --fs-small:     24px;   /* small body */
  --fs-eyebrow:   24px;   /* mono eyebrows */
  --fs-meta:      24px;   /* mono meta */
  --fs-big-num:  260px;   /* big statistic */

  --pad-x: 120px;
  --pad-y: 96px;
  --pad-bot: 88px;
  --title-gap: 56px;
  --item-gap: 32px;
  --rail-w: 240px;
}

html, body {
  margin: 0; padding: 0;
  background: var(--bg1);
  color: var(--fg1);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

deck-stage { background: #0a0c10; }

/* Slide container ---------------------------------------- */
.slide {
  background: var(--bg1);
  color: var(--fg1);
  font-family: var(--sans);
  position: relative;
  overflow: hidden;
}
/* Hard override of DS .tsr typography defaults (which target small web sizes) */
.tsr .slide p, .tsr .slide .body { font-size: var(--fs-body); line-height: 1.45; color: var(--fg2); }
.tsr .slide .body-l { font-size: var(--fs-body-l); line-height: 1.35; }
.tsr .slide .body-s { font-size: var(--fs-small); line-height: 1.45; }
.tsr .slide .eyebrow, .tsr .slide .label {
  font-family: var(--mono); font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-muted);
}
.tsr .slide h1, .tsr .slide h2, .tsr .slide h3, .tsr .slide h4 { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.slide.dark {
  background: var(--t-dark);
  color: var(--t-dark-ink);
  --fg1: var(--t-dark-ink);
  --fg2: var(--t-dark-ink-2);
  --fg-muted: oklch(0.60 0.007 250);
  --line: var(--t-dark-line);
  --line-soft: oklch(0.26 0.008 260);
  --bg1: var(--t-dark);
  --bg2: var(--t-dark-2);
  --surface: var(--t-dark-surf);
}
.slide.alt { background: var(--bg2); }

/* Editorial chrome: top rail with wordmark + meta, bottom rail with page id */
.chrome {
  position: absolute; inset: 0;
  pointer-events: none;
  display: grid;
  grid-template-rows: 64px 1fr 56px;
  padding: 32px var(--pad-x);
}
.chrome .top,
.chrome .bot {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--fg-muted);
}
.chrome .top > span,
.chrome .bot > span {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}
.chrome .wm {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.04em;
  text-transform: none;
  font-size: 32px;
  color: var(--fg1);
}
.chrome .wm .dot { color: var(--fg1); }

.chrome .rule {
  grid-row: 2;
  align-self: end;
  border-bottom: 1px solid var(--line-soft);
  margin: 0 calc(-1 * var(--pad-x));
}

/* Content region sits inside chrome padding */
.content {
  position: absolute;
  inset: 120px var(--pad-x) var(--pad-bot) var(--pad-x);
  display: flex; flex-direction: column;
}

/* Utility */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.kicker {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}
.title {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-size: var(--fs-title);
  color: var(--fg1);
  margin: 0;
  text-wrap: balance;
}
.subtitle {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: var(--fs-subtitle);
  color: var(--fg2);
  margin: 0;
  text-wrap: pretty;
}
.body {
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.45;
  font-size: var(--fs-body);
  color: var(--fg2);
  margin: 0;
  text-wrap: pretty;
}
.body-l { font-size: var(--fs-body-l); line-height: 1.35; }
.body-s { font-size: var(--fs-small); line-height: 1.45; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Textures */
.tex-grid { background-image: var(--t-tex-grid); }
.tex-dot  { background-image: var(--t-tex-dot); }
.tex-hatch{ background-image: var(--t-tex-hatch); }
.slide.dark .tex-grid { background-image: var(--t-tex-grid-dark); }

/* Big rule helpers */
.hr { border: 0; border-top: 1px solid var(--line); }
.hr-soft { border: 0; border-top: 1px solid var(--line-soft); }

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 80px;
  align-items: end;
  height: 100%;
}
.hero__left { padding-bottom: 40px; }
.hero__mark { font-family: var(--mono); font-size: 26px; letter-spacing: 0.2em; color: var(--fg-muted); margin-bottom: 32px; text-transform: uppercase; }
.hero__h {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.9;
  font-size: var(--fs-hero);
  margin: 0 0 40px;
}
.hero__h em { letter-spacing: -0.01em; }
.hero__sub {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.12;
  font-size: 40px;
  color: var(--fg2);
  max-width: 900px;
}
.hero__tess {
  width: 520px; height: 520px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg1);
  position: relative;
}
.hero__tess svg { width: 100%; height: 100%; }
.hero__meta {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.2em;
  color: var(--fg-muted);
  text-transform: uppercase;
  display: flex; gap: 32px;
  margin-top: 40px;
}

/* ── Generic 2-column layout ────────────────────────────── */
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  height: 100%;
}
.two--rail {
  grid-template-columns: 420px 1fr;
}

/* ── Bulleted list (mono index + body) ──────────────────── */
.mod-list { display: flex; flex-direction: column; gap: var(--item-gap); margin: 0; padding: 0; list-style: none; }
.mod-list__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: baseline;
  padding-bottom: var(--item-gap);
  border-bottom: 1px solid var(--line-soft);
}
.mod-list__item:last-child { border-bottom: 0; }
.mod-list__n {
  font-family: var(--mono);
  font-size: 26px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.mod-list__t {
  font-family: var(--sans);
  font-weight: 450;
  font-size: 28px;
  line-height: 1.25;
  color: var(--fg1);
  letter-spacing: -0.01em;
}

/* ── KPI / big stat block ────────────────────────────────── */
.stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--fg1);
  padding-top: 28px;
}
.stat__n {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-size: 180px;
  color: var(--fg1);
}
.stat__label {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.stat__desc {
  font-size: 28px;
  line-height: 1.3;
  color: var(--fg2);
  max-width: 520px;
  margin-top: 8px;
}

/* ── Section rule (chapter slides) ──────────────────────── */
.chapter {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}
.chapter__eye {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.chapter__h {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-size: 160px;
  margin: 0;
  align-self: end;
}
.chapter__sub {
  font-family: var(--display);
  font-weight: 300;
  font-size: 44px;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--fg2);
  max-width: 1200px;
  margin-top: 32px;
}

/* ── Table ────────────────────────────────────────────────── */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 26px;
  color: var(--fg1);
}
.tbl thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 400;
  padding: 18px 20px;
  border-bottom: 1px solid var(--fg1);
}
.tbl tbody td {
  padding: 26px 20px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.3;
}
.tbl tbody tr:last-child td { border-bottom: 1px solid var(--fg1); }
.tbl td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--fg1); }
.tbl td.primary { font-weight: 500; letter-spacing: -0.01em; }
.tbl tfoot td {
  padding: 28px 20px;
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg1);
  background: var(--bg2);
}

/* ── Track grid (3-up) ───────────────────────────────────── */
.tracks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  height: 100%;
  border-top: 1px solid var(--fg1);
  border-bottom: 1px solid var(--fg1);
}
.track {
  padding: 48px 48px 48px 0;
  padding-right: 48px;
  padding-left: 48px;
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 24px;
  position: relative;
}
.track:first-child { padding-left: 0; }
.track:last-child  { border-right: 0; padding-right: 0; }
.track__kicker {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.track__role {
  font-family: var(--mono);
  font-size: 26px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg1);
}
.track__h {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: 64px;
  margin: 0;
}
.track__tool {
  font-family: var(--mono);
  font-size: 26px;
  color: var(--fg-muted);
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  margin-top: auto;
}
.track__tool b { color: var(--fg1); font-weight: 500; }

/* ── Workshop flow (5-step) ──────────────────────────────── */
.flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--fg1);
  border-bottom: 1px solid var(--fg1);
  min-height: 440px;
}
.flow__step {
  padding: 40px 32px;
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 18px;
}
.flow__step:last-child { border-right: 0; }
.flow__n {
  font-family: var(--mono);
  font-size: 26px;
  letter-spacing: 0.2em;
  color: var(--fg-muted);
}
.flow__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: 44px;
  letter-spacing: -0.02em;
  line-height: 0.98;
  color: var(--fg1);
}
.flow__role {
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: auto;
}
.flow__body {
  font-size: 26px;
  line-height: 1.4;
  color: var(--fg2);
}

/* ── Why-us grid (2x2) ───────────────────────────────────── */
.why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  height: 100%;
  border-top: 1px solid var(--fg1);
}
.why__cell {
  padding: 32px;
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 12px;
}
.why__body {
  font-size: 24px;
  line-height: 1.35;
  color: var(--fg2);
  max-width: 520px;
}
.why__h {
  font-family: var(--display);
  font-weight: 300;
  font-size: 44px;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--fg1);
}
.why__cell:nth-child(2n) { border-right: 0; padding-right: 0; }
.why__cell:nth-child(1), .why__cell:nth-child(2) { padding-top: 32px; }
.why__cell:nth-child(3), .why__cell:nth-child(4) { border-bottom: 0; padding-bottom: 16px; }
.why__n {
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: 0.2em;
  color: var(--fg-muted);
}

/* ── Challenge (3 rows) ──────────────────────────────────── */
.pain {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--fg1);
}
.pain__row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  padding: 40px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.pain__role {
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg1);
}
.pain__body {
  font-family: var(--display);
  font-weight: 300;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--fg1);
}
.pain__body em { color: var(--fg2); }

/* ── CTA ────────────────────────────────────────────────── */
.cta {
  display: grid;
  grid-template-columns: 1fr 540px;
  gap: 80px;
  height: 100%;
  align-items: end;
}
.cta__tess {
  width: 540px; height: 540px;
  color: var(--fg1);
  align-self: end;
}
.cta__tess svg { width: 100%; height: 100%; }
.cta__h {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-size: 140px;
  margin: 0;
}
.cta__sub {
  font-family: var(--display);
  font-weight: 300;
  font-size: 40px;
  letter-spacing: -0.015em;
  color: var(--fg2);
  line-height: 1.15;
  margin-top: 40px;
  max-width: 900px;
}
.cta__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  margin-top: 72px;
  padding-top: 32px;
  border-top: 1px solid var(--fg1);
  max-width: 1100px;
}
.cta__meta-label {
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.cta__meta-value {
  font-family: var(--display);
  font-weight: 300;
  font-size: 38px;
  letter-spacing: -0.015em;
  color: var(--fg1);
}

/* ── Solution overview (3-up + workshop band) ───────────── */
.solution {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  gap: 0;
}
.solution__band {
  border-top: 1px solid var(--fg1);
  padding: 36px 0;
  display: grid;
  grid-template-columns: 260px 1fr auto;
  gap: 48px;
  align-items: baseline;
}
.solution__band .kicker { color: var(--fg1); }
.solution__band .lbl {
  font-family: var(--display);
  font-weight: 300;
  font-size: 40px;
  letter-spacing: -0.02em;
  color: var(--fg1);
}
.solution__band .meta {
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ── Tesseract glyph accents ─────────────────────────────── */
.tess-sm { width: 96px; height: 96px; color: var(--fg1); }
.tess-sm svg { width: 100%; height: 100%; }

/* ── Tweaks panel ────────────────────────────────────────── */
#tweaks-panel {
  position: fixed;
  bottom: 64px;
  right: 24px;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fg1);
  font-family: var(--sans);
  padding: 20px;
  z-index: 99999;
  display: none;
  font-size: 14px;
}
#tweaks-panel[data-open] { display: block; }
#tweaks-panel h4 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 12px;
  font-weight: 400;
}
#tweaks-panel .row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
#tweaks-panel label { font-size: 13px; color: var(--fg2); font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
#tweaks-panel .opts { display: flex; gap: 0; border: 1px solid var(--line); }
#tweaks-panel .opts button {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 8px;
  color: var(--fg2);
  cursor: pointer;
}
#tweaks-panel .opts button:last-child { border-right: 0; }
#tweaks-panel .opts button[data-active] { background: var(--fg1); color: var(--bg1); }