/* The pitch deck: one full-screen slide per section, each on one of the dashboard themes. */
:root { --text: #F4EDE1; --muted: #D8CFC2; --accent: #F2C14E; --panel: rgba(20, 16, 13, 0.82); --border: #4A3F35; }
* { box-sizing: border-box; }
html { scroll-snap-type: y mandatory; }
body { margin: 0; background: #1B1714; color: var(--text); font: 20px/1.5 "Rubik", system-ui, sans-serif; }
a { color: inherit; }
.slide { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; scroll-snap-align: start; overflow: hidden; }
.slide canvas.bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: 0; }
.body { position: relative; z-index: 1; max-width: 900px; width: 100%; background: var(--panel); border: 3px solid var(--border); padding: 36px 44px; }
.body.wide { width: auto; max-width: 96vw; padding: 24px 28px; }
.slide canvas.work { position: relative; z-index: 1; image-rendering: pixelated; align-self: center; margin-top: -3px; }
.body.center { text-align: center; max-width: 760px; }
.kicker { margin: 0 0 6px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px; }
h1 { font-size: clamp(48px, 9vw, 88px); line-height: 1; margin: 12px 0 18px; }
h1.brand { font: 400 clamp(48px, 9vw, 96px)/1 'Tiny5', monospace; text-transform: uppercase; letter-spacing: -0.04em; }
h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin: 0 0 22px; }
.lead { font-size: clamp(22px, 3vw, 30px); margin: 0 0 22px; }
.meta { color: var(--muted); margin: 0; font-size: 18px; }
.meta.by { margin-top: 10px; color: var(--text); font-weight: 600; }
.logo-mark { image-rendering: pixelated; height: 0.86em; width: auto; vertical-align: -0.06em; margin-right: 0.18em; }
ul.big { margin: 0; padding-left: 1.1em; font-size: clamp(19px, 2.2vw, 24px); }
ul.big li { margin: 10px 0; }
ul.big b { color: var(--accent); }
/* Bullets drawn as pixel icons from the board (src/deck.js). */
ul.icons { list-style: none; padding: 0; }
ul.icons li { display: flex; align-items: center; gap: 18px; margin: 16px 0; }
ul.icons canvas { flex: none; width: 72px; height: 64px; image-rendering: pixelated; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chips span { border: 2px solid var(--accent); padding: 8px 16px; font-weight: 600; font-size: clamp(18px, 2vw, 22px); }
ol.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; counter-reset: step; }
ol.steps li { border: 2px solid var(--border); padding: 14px 16px; font-size: 17px; color: var(--muted); counter-increment: step; }
ol.steps b { display: block; color: var(--text); font-size: 21px; margin-bottom: 4px; }
ol.steps b::before { content: counter(step) ". "; color: var(--accent); }
/* What you see: the labelled funnel picture, as tall as the screen allows. */
.guide-shot { display: block; height: calc(100vh - 220px); height: calc(100svh - 220px); min-height: 320px; width: auto; max-width: 100%; margin: 0 auto; }
@media (max-width: 760px) { .guide-shot { height: auto; width: 100%; } }
.cta { margin: 26px 0 0; }
/* It's real: the text beside a phone showing the live demo (an iframe at 375×771, scaled down to fill the frame). */
.body.wide-real { max-width: 1120px; }
.real { display: flex; gap: 36px; align-items: center; }
.real > div:first-child { flex: 1; }
.phone { flex: none; width: 260px; height: 513px; border: 10px solid #0E0C0B; border-radius: 30px; overflow: hidden; background: #1B1714; box-shadow: 0 0 0 2px #4A3F35; }
.phone iframe { width: 375px; height: 771px; border: 0; transform: scale(0.64); transform-origin: 0 0; }
.btn { display: inline-block; background: var(--accent); color: #1B1714; font-weight: 700; text-decoration: none; padding: 12px 24px; border: 2px solid var(--accent); }
.btn:hover { background: #FFD866; }
#counter { position: fixed; right: 16px; bottom: 12px; color: var(--muted); font-size: 14px; z-index: 2; text-shadow: 0 1px 2px #000; }
@media (max-width: 760px) {
  .body { padding: 24px 20px; }
  .real { flex-direction: column; }
}
@media print {
  html { scroll-snap-type: none; }
  .slide { min-height: 100vh; break-after: page; }
  #counter { display: none; }
}