/* ============================================================
   Deck-level type scale & spacing (1920x1080).
   Everything sizes off these so one number rescales the deck.
   ============================================================ */
:root{
  --type-mult: 1;
  --spark: var(--cyan-glow);

  --type-hero:     calc(150px * var(--type-mult));
  --type-title:    calc(88px  * var(--type-mult));
  --type-h2:       calc(66px  * var(--type-mult));
  --type-h3:       calc(40px  * var(--type-mult));
  --type-subtitle: calc(34px  * var(--type-mult));
  --type-body:     calc(28px  * var(--type-mult));
  --type-small:    calc(24px  * var(--type-mult));
  --type-eyebrow:  calc(24px  * var(--type-mult));
  --type-stat:     calc(108px * var(--type-mult));

  --pad-x: 112px;
  --pad-top: 92px;
  --pad-bottom: 84px;
  --gap-title: 38px;
  --gap-item: 26px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; height:100%; background:#0a0620; }
deck-stage:not(:defined){ visibility:hidden; }
deck-stage{ font-family: var(--font-body); }

/* ---- Slide frame ---- */
.frame{
  position:absolute; inset:0;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.s-deep .frame{ background: var(--grad-deep); color: var(--white); }
.s-light .frame{ background: var(--grad-wash); color: var(--ink-900); }
.s-pop .frame{ background: var(--grad-deep); color: var(--white); }

/* subtle brand glow blobs on deep slides */
.s-deep .frame::before, .s-pop .frame::before{
  content:""; position:absolute; width:760px; height:760px; border-radius:50%;
  background: radial-gradient(circle, rgba(138,63,230,0.42) 0%, rgba(138,63,230,0) 68%);
  top:-260px; right:-180px; pointer-events:none;
}
.s-deep .frame::after{
  content:""; position:absolute; width:560px; height:560px; border-radius:50%;
  background: radial-gradient(circle, rgba(79,214,232,0.18) 0%, rgba(79,214,232,0) 70%);
  bottom:-220px; left:-160px; pointer-events:none;
}
.s-light .frame::after{
  content:""; position:absolute; width:620px; height:620px; border-radius:50%;
  background: radial-gradient(circle, rgba(138,63,230,0.16) 0%, rgba(138,63,230,0) 70%);
  bottom:-260px; right:-200px; pointer-events:none;
}
.frame > *{ position:relative; z-index:1; }

/* ---- Eyebrow ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:16px;
  font-family: var(--font-ui); font-weight: var(--fw-semibold);
  font-size: var(--type-eyebrow); letter-spacing: var(--ls-label);
  text-transform:uppercase; color: var(--spark); margin:0;
}
.eyebrow::before{
  content:""; width:42px; height:2px; border-radius:2px;
  background: currentColor; box-shadow: 0 0 18px currentColor;
}
.eyebrow.violet{ color: var(--violet-bright); }
.eyebrow.violet::before{ box-shadow:none; }

/* ---- Headings ---- */
.title, .h2, .h3, .hero{
  font-family: var(--font-display); font-weight: var(--fw-bold);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  margin:0; text-wrap: balance;
}
.hero{ font-size: var(--type-hero); }
.title{ font-size: var(--type-title); }
.h2{ font-size: var(--type-h2); }
.h3{ font-size: var(--type-h3); letter-spacing: -0.01em; }
.glow{ text-shadow: var(--text-glow); }
.ink{ color: var(--ink-900); }
.violet-text{ color: var(--violet-bright); }

/* ---- Body text ---- */
.lead{ font-size: var(--type-subtitle); line-height: 1.42; margin:0; }
.body{ font-size: var(--type-body); line-height: 1.5; margin:0; }
.small{ font-size: var(--type-small); line-height: 1.45; margin:0; }
.muted{ color: var(--ink-400); }
.dim{ color: rgba(255,255,255,0.82); }
.maxw{ max-width: 56ch; }

/* slide title block spacing */
.head{ display:flex; flex-direction:column; gap:18px; }
.head + *{ margin-top: var(--gap-title); }

/* ---- Glass panel (deep bg) ---- */
.glass{
  position:relative;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding: 40px 42px;
  color: var(--white);
}
.glass.strong{ background: var(--glass-fill-strong); }
.glass.glow{ box-shadow: var(--glass-shadow), var(--glow-violet); }

/* ---- Light card ---- */
.card{
  position:relative;
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(138,63,230,0.16);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 38px 40px;
}
.card .card-k{
  font-family: var(--font-display); font-weight:600;
  font-size: var(--type-h3); color: var(--ink-900); margin:0; letter-spacing:-0.01em;
}

/* pill chips */
.chip{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-ui); font-weight:600; font-size: var(--type-small);
  padding:12px 22px; border-radius: var(--radius-pill);
  background: rgba(138,63,230,0.10); color: var(--purple-600);
  border:1.5px solid rgba(138,63,230,0.22);
}
.s-deep .chip, .s-pop .chip{
  background: var(--glass-fill); color:#fff; border-color: var(--glass-stroke);
}

/* number badge */
.numbadge{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  font-family: var(--font-display); font-weight:700; font-size:30px;
  background: var(--glass-fill-strong); color:#fff;
  border:1.5px solid var(--glass-stroke);
}

/* grids */
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap:34px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:30px; }
.grid-5{ display:grid; grid-template-columns: repeat(5,1fr); gap:22px; }
.row{ display:flex; }
.fill{ flex:1; min-height:0; }

/* renders */
.render{ position:absolute; pointer-events:none; }
.float-r{ filter: drop-shadow(0 26px 54px rgba(1,0,129,0.45)); }

/* ---- Comparison / data table ---- */
.tbl{ width:100%; border-collapse:collapse; font-family: var(--font-body); }
.tbl th, .tbl td{ text-align:left; padding:24px 28px; font-size: var(--type-small); }
.tbl thead th{
  font-family: var(--font-display); font-weight:700; font-size: var(--type-body);
}
.s-deep .tbl thead th, .s-pop .tbl thead th{ color:#fff; }
.s-deep .tbl, .s-pop .tbl{ color: rgba(255,255,255,0.9); }
.s-deep .tbl tbody tr, .s-pop .tbl tbody tr{ border-top:1px solid rgba(255,255,255,0.14); }
.s-deep .tbl .rowlabel{ color: var(--spark); font-weight:600; }
.tblwrap{
  border-radius: var(--radius-lg); overflow:hidden;
  background: var(--glass-fill); backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}
.tbl .colhi{ background: rgba(79,214,232,0.10); }

/* prompt / code block */
.codeblock{
  font-family: 'Space Grotesk', ui-monospace, monospace;
  background: rgba(22,12,67,0.78); color:#EDE9FF;
  border:1.5px solid rgba(138,63,230,0.4);
  border-radius: var(--radius-md); padding:32px 36px;
  font-size: var(--type-small); line-height:1.55; white-space:pre-wrap;
}
.codeblock .ck{ color: var(--cyan-glow); }

/* workflow steps */
.flow{ display:flex; align-items:stretch; gap:0; }
.flow .step{ flex:1; }
.flow .arrow{
  display:flex; align-items:center; justify-content:center; padding:0 18px;
  color: var(--violet-bright); font-size:42px; font-weight:700;
}
.s-deep .flow .arrow, .s-pop .flow .arrow{ color: var(--spark); }

/* cost bars */
.bars{ display:flex; align-items:flex-end; gap:30px; height:300px; }
.bars .bar{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:16px; }
.bars .bar .col{
  width:100%; border-radius:14px 14px 6px 6px;
  background: linear-gradient(180deg, #B98CF5 0%, #6246EA 100%);
  box-shadow: 0 0 26px rgba(138,63,230,0.4);
}
.bars .bar:last-child .col{ background: linear-gradient(180deg, #4FD6E8 0%, #8A3FE6 70%, #E14BC0 100%); }
.bars .bar .yr{ font-family: var(--font-ui); font-size: var(--type-small); color: rgba(255,255,255,0.78); }

/* footer line */
.footline{
  display:flex; align-items:center; gap:14px;
  font-family: var(--font-ui); font-size: var(--type-small); color: rgba(255,255,255,0.55);
  letter-spacing:0.04em;
}
.s-light .footline{ color: var(--ink-400); }

/* image slots */
image-slot{ display:block; box-shadow: var(--shadow-card); }

/* entrance animation */
@media (prefers-reduced-motion: no-preference){
  [data-deck-active] .anim{ animation: rise .6s var(--ease-out); animation-delay:.04s; }
  [data-deck-active] .anim.d1{ animation-delay:.12s; }
  [data-deck-active] .anim.d2{ animation-delay:.20s; }
  [data-deck-active] .anim.d3{ animation-delay:.28s; }
  [data-deck-active] .anim.d4{ animation-delay:.36s; }
  [data-deck-active] .anim.d5{ animation-delay:.44s; }
}
/* Transform-only so content is ALWAYS visible (safe for print, PDF export,
   reduced-motion and capture harnesses that freeze the animation clock). */
@keyframes rise{ from{ transform: translateY(20px); } to{ transform: translateY(0); } }

/* ============================================================
   Vocabulary icon tiles
   ============================================================ */
.ic-tile{
  width:66px; height:66px; flex:none; border-radius:18px;
  background: var(--grad-violet);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 20px rgba(98,70,234,0.32);
}
.ic-tile svg{ width:34px; height:34px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ic-tile svg .ac{ stroke: var(--cyan-glow); }
.card .card-sub{
  font-family: var(--font-ui); font-weight:600; font-size:24px;
  color: var(--purple-600); margin:16px 0 0; letter-spacing:0.01em; line-height:1.35;
}

/* ============================================================
   AI vs me — two-column compare
   ============================================================ */
.vs-list{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; }
.vs-list li{
  display:flex; align-items:flex-start; gap:16px;
  font-size: var(--type-body); line-height:1.4; color: rgba(255,255,255,0.9);
}
.vs-list li::before{
  content:""; flex:none; width:12px; height:12px; margin-top:11px; border-radius:50%;
  background: var(--violet-bright);
}
.vs-list.me li::before{ background: var(--spark); box-shadow:0 0 12px var(--spark); }

/* ============================================================
   What are AI agents? v2 — LLM / Workflow / Agent layout
   ============================================================ */
.wa-grid{ flex:1; min-height:0; display:grid; grid-template-columns: 1fr 1.05fr; margin-top:26px; }
.wa-left{ display:flex; flex-direction:column; padding-right:66px; border-right:2.5px dotted rgba(255,255,255,0.38); }
.wa-right{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding-left:66px; }
.wa-q{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:18px 0; }
.wa-q.top{ border-bottom:2.5px dotted rgba(255,255,255,0.38); }
.wa-qh{
  font-family:var(--font-display); font-weight:700; font-size:36px; color:#fff; margin:0;
  text-decoration:underline; text-underline-offset:9px; text-decoration-thickness:3px;
}
.wa-flow{ display:flex; align-items:center; gap:22px; }
.wa-io{ font-family:var(--font-display); font-weight:600; font-size:30px; color:#fff; }
.wa-arr{ color:#fff; font-size:40px; font-weight:800; line-height:1; }
.wa-llm{
  width:158px; height:118px; border-radius:18px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:36px; color:var(--indigo-900);
  box-shadow: 0 12px 28px rgba(1,0,90,0.42);
}
.wf-toolsvg{ width:104px; height:104px; margin-top:6px; }
/* right: agent */
.wa-vlabel{ font-family:var(--font-display); font-weight:600; font-size:30px; color:#fff; margin:0; }
.wa-varr{ color:var(--spark); font-size:40px; line-height:0.8; font-weight:700; }
.wa-agent{
  width:100%; border:2.5px dashed rgba(255,255,255,0.62); border-radius:30px;
  padding:26px 30px; display:flex; flex-direction:column; align-items:center; gap:14px;
}
.wa-brain{ display:flex; align-items:center; gap:14px; }
.wa-bbox{
  width:150px; height:104px; border-radius:20px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-weight:600; font-size:25px; color:var(--ink-900);
  box-shadow:0 8px 20px rgba(1,0,90,0.35);
}
.wa-cc{ color:var(--spark); font-size:32px; font-weight:700; line-height:1; }
.wa-toolbox{
  border:2.5px dashed rgba(255,255,255,0.5); border-radius:22px;
  padding:18px 22px; display:flex; gap:18px; align-items:center; justify-content:center;
}
.wa-tile{
  width:66px; height:66px; border-radius:16px; background:var(--grad-violet);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(98,70,234,0.36);
}
.wa-tile svg{ width:34px; height:34px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* tweaks mount */
#tweaks-root{ position:fixed; z-index:2147483000; }