/* Ancha decks: the same faces, tokens and components as ancha.io, on a 16:9 slide frame. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: block; src: url("../assets/fonts/fraunces-500-soft.woff2") format("woff2"); }
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: block; src: url("../assets/fonts/young-serif.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: block; src: url("../assets/fonts/hanken-grotesk.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: block; src: url("../assets/fonts/jetbrains-mono.woff2") format("woff2"); }

:root {
  --bg: #FAF9F5; --bg-panel: #FFFFFF; --bg-panel-2: #F3F1EA; --bg-dark: #1F1E1D;
  --text: #141413; --text-mid: #5E5D59; --text-mute: #87867F; --text-faint: #B0AEA5;
  --rule: #E8E6DC; --rule-strong: #D9D6CB; --square: #EEEBE2;
  --accent: #D97757; --accent-deep: #BF5F3E; --accent-bg: rgba(217, 119, 87, 0.11);
  --green: #3F8F5E; --green-bg: rgba(63, 143, 94, 0.10); --red: #C9463D; --red-bg: rgba(201, 70, 61, 0.09);
  --agent: #4F7DAA; --agent-bg: rgba(106, 155, 204, 0.16);
  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wordmark: "Young Serif", "Fraunces", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max: 1200px; --slide-h: 100vh; --slide-h: 100svh;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-snap-type: y mandatory; scroll-behavior: smooth; overflow-x: clip; }
html.flat { scroll-snap-type: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
p { margin: 0; color: var(--text-mid); text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code { font-family: var(--mono); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(217, 119, 87, 0.28); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 32px; }
@media screen and (max-width: 720px) { .wrap { padding: 0 20px; } }

h1, h2 { margin: 0; font-family: var(--display); font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--text); text-wrap: balance; }
h1 { font-size: clamp(42px, 6.3vw, 82px); line-height: 1.04; letter-spacing: -0.012em; }
h1 .dot, h2 .dot { color: var(--accent); }
h2 { font-size: clamp(29px, 3.1vw, 40px); line-height: 1.12; letter-spacing: -0.008em; }
.lede { margin-top: 16px; max-width: 54ch; font-size: 17px; line-height: 1.6; }
@media screen and (max-width: 720px) { .lede { font-size: 16px; } }
.cat { margin-top: 22px; font-size: 19px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; }

/* ─── frame: one slide per screen or page, titles at the same height on every slide, arrows to move ─── */
.slide { min-height: var(--slide-h); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-start; padding: 72px 0 64px; position: relative; }
.slide.cover { justify-content: center; }
@media screen and (max-width: 720px) { .slide { padding: 40px 0 52px; } }
.brand-top { position: absolute; top: 44px; left: 0; right: 0; }
.brand { font: 400 24px/1 var(--wordmark); letter-spacing: 0; color: var(--text); }
.brand .dot { color: var(--accent); }
@media screen and (max-width: 720px) { .brand-top { top: 24px; } .brand { font-size: 20px; } }
.slide > .wrap > h2 + p, .slide > .wrap > h2 + .lede { margin-top: 14px; }
.slide .fig { margin: 36px 0 0; }
@media screen and (max-width: 720px) { .slide .fig { margin-top: 24px; } }
.foot { position: absolute; left: 0; right: 0; bottom: 18px; font-size: 12.5px; color: var(--text-faint); }
.foot .wrap { display: flex; justify-content: space-between; gap: 16px; }
.w-caption { margin-top: 14px; font-size: 13px; color: var(--text-mute); max-width: 80ch; }
.label { display: block; font: 500 11px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }
/* Numbers and quotes the team still has to supply. */
.todo { color: var(--accent-deep); background: var(--accent-bg); border: 1px dashed rgba(191, 95, 62, 0.55); border-radius: 6px; padding: 0 6px; }

/* ─── cover ─── */
.cover { isolation: isolate; }
.cover::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: -240px; left: -22vw; width: min(1100px, 92vw); height: 780px; background: radial-gradient(closest-side, rgba(217, 119, 87, 0.10), rgba(217, 119, 87, 0.04) 45%, transparent 72%); }
.logo-row { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 44px; }
.logo-row li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-mid); white-space: nowrap; }
.logo-row img { width: 18px; height: 18px; object-fit: contain; }
@media screen and (max-width: 520px) { .logo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; margin-top: 36px; } }

/* ─── three cards: the problem ─── */
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media screen and (max-width: 900px) { .three { grid-template-columns: minmax(0, 1fr); } }
.three li { min-width: 0; padding: 26px 28px 28px; border-radius: 20px; background: var(--bg-panel-2); }
.three b { display: block; font: 500 26px/1.15 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -0.01em; color: var(--text); }
.three p { margin-top: 12px; font-size: 14.5px; line-height: 1.55; max-width: 34ch; }
@media screen and (max-width: 720px) { .three li { padding: 20px; } .three b { font-size: 22px; } }

/* ─── the world, drawn out (same figure as the site) ─── */
figure.world { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 56px 248px; align-items: center; }
@media screen and (max-width: 1000px) { figure.world { grid-template-columns: minmax(0, 1fr); } }
.w-world { min-width: 0; padding: 20px 22px 22px; border-radius: 20px; background: var(--bg-panel-2); }
.w-bar { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; font-size: 14px; color: var(--text-mute); }
.w-bar b { font-weight: 600; color: var(--text); }
.w-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; }
@media screen and (max-width: 720px) { .w-body { grid-template-columns: minmax(0, 1fr); } }
.w-agent { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 20px; border-radius: 14px; background: var(--agent-bg); }
.w-mark { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--agent); color: #fff; }
.w-mark svg { width: 18px; height: 18px; }
.w-agent b { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--text); }
.w-agent p { margin-top: 3px; font-size: 14px; color: var(--text-mid); }
.w-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media screen and (max-width: 480px) { .w-tools { grid-template-columns: minmax(0, 1fr); } }
.w-tools li { min-width: 0; padding: 20px; border-radius: 14px; background: var(--bg-panel); }
.w-tool { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--text); }
.w-tool img { width: 20px; height: 20px; object-fit: contain; }
.w-tools p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-mid); }
.w-people { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 13.5px; color: var(--text); }
.w-people li { display: inline-flex; align-items: center; gap: 8px; }
.w-people em { font-style: normal; color: var(--text-mute); }
.w-av { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-panel); color: var(--text-mid); font-size: 11.5px; font-weight: 600; }
.w-link { position: relative; height: 1px; margin: 0 8px; background: var(--text-faint); }
.w-link::after { content: ""; position: absolute; right: -1px; top: -4px; border-style: solid; border-width: 4.5px 0 4.5px 7px; border-color: transparent transparent transparent var(--text-faint); }
.w-link span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-size: 12px; color: var(--text-mute); white-space: nowrap; }
@media screen and (max-width: 1000px) {
  .w-link { width: 1px; height: 40px; margin: 6px auto; }
  .w-link::after { right: auto; top: auto; left: -4px; bottom: -1px; border-width: 7px 4.5px 0 4.5px; border-color: var(--text-faint) transparent transparent transparent; }
  .w-link span { left: 14px; bottom: auto; top: 50%; transform: translateY(-50%); }
}
.w-checks { padding: 20px 22px 22px; border-radius: 20px; background: var(--bg-panel-2); }
.w-checks > b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.w-checks > span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-mute); }
.w-checks ul { display: grid; gap: 9px; margin-top: 14px; font-size: 14px; line-height: 1.4; color: var(--text); }
.w-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); }
.w-checks li::before { content: "✓"; color: var(--green); font-weight: 600; }

/* ─── state before and after one attempt ─── */
.diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media screen and (max-width: 900px) { .diff { grid-template-columns: minmax(0, 1fr); } }
.diff > li { min-width: 0; padding: 20px 22px 22px; border-radius: 20px; background: var(--bg-panel-2); }
.diff .w-bar { margin-bottom: 12px; }
.part-list li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; background: var(--bg-panel); font-size: 13.5px; color: var(--text); }
.part-list li + li { margin-top: 6px; }
.part-list img { width: 16px; height: 16px; object-fit: contain; flex: none; }
.part-list em { margin-left: auto; padding-left: 12px; font-style: normal; color: var(--text-mute); white-space: nowrap; }
.part-list .new { box-shadow: inset 0 0 0 1px var(--accent); }
.part-list .new em { color: var(--accent-deep); }

/* ─── a real product screenshot ─── */
.shot { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule-strong); background: var(--bg-panel); box-shadow: 0 1px 2px rgba(20, 20, 19, 0.04), 0 12px 32px rgba(20, 20, 19, 0.07); }
.shot img { display: block; width: 100%; height: auto; }

/* ─── what teams test: one card per demo test ─── */
.uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media screen and (max-width: 1000px) { .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 560px) { .uses { grid-template-columns: minmax(0, 1fr); } }
.uses > li { min-width: 0; padding: 20px 20px 22px; border-radius: 20px; background: var(--bg-panel-2); }
.uses h3 { margin: 0; font: 500 21px/1.2 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--text); }
.uses .tools { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 12.5px; color: var(--text-mid); }
.uses .tools span { display: inline-flex; align-items: center; gap: 6px; }
.uses .tools img { width: 15px; height: 15px; object-fit: contain; }
.uses ol { display: grid; gap: 6px; margin-top: 14px; }
.uses ol li { padding: 9px 12px; border-radius: 10px; background: var(--bg-panel); font-size: 13.5px; line-height: 1.4; color: var(--text); }
.uses .count { margin-top: 12px; font: 12px var(--mono); color: var(--text-mute); }

/* ─── where it runs: sandboxes, playground runs, CI ─── */
.surfaces { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
@media screen and (max-width: 900px) { .surfaces { grid-template-columns: minmax(0, 1fr); } }
.surface { min-width: 0; padding: 18px 20px 20px; border-radius: 20px; background: var(--bg-panel-2); }
.s-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 12px; }
.s-head b { font-size: 15px; font-weight: 600; color: var(--text); }
.s-head span { font-size: 13.5px; color: var(--text-mute); }
.s-code { position: relative; overflow: hidden; border-radius: 12px; background: var(--bg-panel); }
.s-code + .s-code { margin-top: 8px; }
.s-code pre { margin: 0; padding: 14px 16px; font: 12.5px/1.75 var(--mono); font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; color: var(--text); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.s-code code { font-family: inherit; }
@media screen and (max-width: 520px) { .s-code::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bg-panel)); pointer-events: none; } }
.s-code .k { color: var(--accent-deep); }
.s-code .s { color: var(--text-mid); }
.s-code .c { color: var(--text-mute); }
.s-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px; border-radius: 12px; background: var(--bg-panel); font-size: 13.5px; color: var(--text-mid); }
.s-row + .s-row { margin-top: 8px; }
.s-row code { font: 12.5px var(--mono); color: var(--text); }
.s-row b { font-weight: 600; color: var(--text); }

/* ─── tools ─── */
.catalog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
@media screen and (max-width: 900px) { .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.catalog li { background: var(--bg); padding: 18px 20px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; min-width: 0; }
.catalog .tile { grid-row: span 2; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--bg-panel); border: 1px solid var(--rule-strong); }
.catalog .tile img { width: 24px; height: 24px; object-fit: contain; }
.catalog b { font: 600 15.5px var(--sans); letter-spacing: -0.01em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog span:last-child { font-size: 12px; color: var(--text-mute); }
.catalog .ask .tile { color: var(--text-mute); font: 400 20px var(--mono); border-style: dashed; background: transparent; }
.catalog .ask b { color: var(--text-mid); }
@media screen and (max-width: 520px) { .catalog li { padding: 14px; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; } .catalog .tile { width: 36px; height: 36px; } .catalog .tile img { width: 20px; height: 20px; } .catalog b { font-size: 14px; white-space: normal; } }
.roadmap { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: 13.5px; color: var(--text-mid); align-items: center; }
.roadmap li { display: inline-flex; align-items: center; gap: 8px; }
.roadmap img { width: 16px; height: 16px; object-fit: contain; }
.roadmap .label { color: var(--text-mute); margin-right: 4px; font: inherit; letter-spacing: 0; text-transform: none; }

/* ─── how an attempt runs ─── */
.boxes { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; max-width: 900px; }
@media screen and (max-width: 720px) { .boxes { grid-template-columns: minmax(0, 1fr); } }
.box { padding: 20px 22px 22px; border-radius: 20px; background: var(--bg-panel-2); }
.box > b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.box > span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-mute); }
.box ul { display: grid; gap: 8px; margin-top: 14px; }
.box li { padding: 10px 14px; border-radius: 10px; background: var(--bg-panel); font-size: 13.5px; color: var(--text); }
.box li em { font-style: normal; color: var(--text-mute); }
.box.agent { background: var(--agent-bg); }
.box.agent li { background: rgba(255, 255, 255, 0.78); }
.facts { border-top: 1px solid var(--rule-strong); margin-top: 24px; max-width: 900px; }
.facts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--text); }
.facts li span { font-size: 13.5px; color: var(--text-mute); text-align: right; }

/* ─── get started ─── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media screen and (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.steps li { min-width: 0; padding: 22px 24px 24px; border-radius: 20px; background: var(--bg-panel-2); }
.steps b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.steps p { margin-top: 6px; font-size: 14px; line-height: 1.55; }
.steps .s-code { margin-top: 14px; }
.steps .num { display: inline-flex; width: 26px; height: 26px; border-radius: 8px; align-items: center; justify-content: center; margin-bottom: 14px; background: var(--bg-panel); color: var(--text-mid); font: 600 12.5px var(--sans); }
.contact { display: flex; flex-wrap: wrap; gap: 10px 40px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule-strong); font-size: 15px; color: var(--text); }
.contact li { display: flex; align-items: baseline; gap: 10px; }
.contact span { font-size: 13px; color: var(--text-mute); }
.contact code { font-size: 13.5px; }

/* ─── a figure beside a column of text ─── */
.split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.split.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media screen and (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.hub { display: block; width: 100%; height: auto; overflow: visible; }
.hub text { font-family: var(--sans); fill: var(--text); }
.hub .t { font-size: 15px; font-weight: 600; }
.hub .d { font-size: 12.5px; fill: var(--text-mid); }
.hub .k { font: 500 10.5px var(--mono); letter-spacing: 0.08em; fill: var(--accent-deep); }
.hub .n { fill: var(--bg-panel); stroke: var(--rule-strong); }
.hub .p { fill: rgba(217, 119, 87, 0.12); stroke: rgba(191, 95, 62, 0.35); }
.hub .line { fill: none; stroke: var(--text-faint); stroke-width: 1.5; }
.hub .head { fill: var(--text-faint); }
.hub .agent { fill: var(--text); }
.hub .agent-t { font: 600 16px var(--sans); fill: #FAF9F5; }
.hub .edge { fill: none; stroke: rgba(191, 95, 62, 0.5); stroke-width: 1.5; stroke-dasharray: 6 5; }
.hub .edge-t { font: 500 12px var(--mono); fill: var(--accent-deep); }
.hub .foot-t { font-size: 12.5px; fill: var(--text-mute); }
.hub .ic { fill: none; stroke: var(--accent-deep); stroke-width: 1.6; stroke-linecap: round; }
.reasons { display: grid; gap: 16px; margin-top: 18px; }
.reasons li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--text); }
.reasons svg { width: 20px; height: 20px; margin-top: 1px; color: var(--accent-deep); }
.side-title { font: 500 24px/1.2 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--text); }
.callout { margin-top: 22px; padding: 18px 22px; border-radius: 16px; background: var(--accent-bg); font: 500 19px/1.35 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--text); }
.callout.wide { margin-top: 36px; font-size: 22px; padding: 22px 26px; }
.points li { padding: 14px 0; border-top: 1px solid var(--rule); }
.points li:last-child { border-bottom: 1px solid var(--rule); }
.points b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.points p { margin-top: 3px; font-size: 14px; line-height: 1.5; }

/* ─── one sentence that carries the slide ─── */
.statement { max-width: 23ch; font: 500 54px/1.12 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -0.012em; color: var(--text); text-wrap: balance; }
.statement em { font-style: normal; color: var(--accent-deep); }
.slide.center { justify-content: center; }
.statement + p { margin-top: 26px; max-width: 62ch; font-size: 17px; }
@media screen and (max-width: 720px) { .statement { font-size: 34px; } }

/* ─── two rows of steps: web apps, then agents ─── */
.flow { display: grid; gap: 10px; }
.flow-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; }
.flow-row > span { font: 500 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.flow-row.ours > span { color: var(--accent-deep); }
.flow-row ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; }
.flow-row li { position: relative; min-height: 72px; display: flex; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--bg-panel-2); font-size: 14.5px; line-height: 1.35; color: var(--text); }
.flow-row li + li::before { content: "→"; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--text-faint); }
.flow-row li.key { font-weight: 600; background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.flow-row.ours li.key { background: var(--accent); color: #fff; box-shadow: none; }
.flow-note { margin-left: calc(110px + (100% - 214px) * 0.4 + 52px); font-size: 13px; line-height: 1.4; color: var(--text-mute); max-width: 44ch; }
.flow-note.ours { color: var(--accent-deep); font-weight: 600; }
@media screen and (max-width: 900px) { .flow-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } .flow-row ol { grid-template-columns: minmax(0, 1fr); gap: 8px; } .flow-row li { min-height: 0; } .flow-row li + li::before { content: none; } .flow-note { margin-left: 0; } }

/* ─── the lifecycle, and the use cases under each step ─── */
.cycle { position: relative; padding-top: 44px; }
.cycle-steps, .cycle-uses { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); }
.cycle-steps > b { padding: 18px 16px; border-radius: 14px; background: var(--bg-panel-2); text-align: center; font: 500 19px/1.2 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--text); }
.cycle-steps > b.us { background: var(--text); color: #FAF9F5; }
.cycle-steps > i { align-self: center; justify-self: center; font-style: normal; color: var(--text-faint); }
.cycle-loop { position: absolute; top: 12px; height: 32px; left: calc((100% - 84px) * 0.375 + 28px); right: calc((100% - 84px) * 0.125); border: 1.5px solid var(--accent-deep); border-bottom: 0; border-radius: 10px 10px 0 0; }
.cycle-loop::after { content: ""; position: absolute; left: -6px; bottom: -2px; border-style: solid; border-width: 8px 5px 0 5px; border-color: var(--accent-deep) transparent transparent transparent; }
.cycle-loop span { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); padding: 0 10px; background: var(--bg); font-size: 13px; color: var(--accent-deep); white-space: nowrap; }
.cycle-uses { margin-top: 18px; }
.cycle-uses > ul { display: grid; gap: 14px; align-content: start; }
.cycle-uses > ul:nth-child(1) { grid-column: 1; } .cycle-uses > ul:nth-child(2) { grid-column: 3; } .cycle-uses > ul:nth-child(3) { grid-column: 5; } .cycle-uses > ul:nth-child(4) { grid-column: 7; }
.cycle-uses b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
.cycle-uses p { margin-top: 2px; font-size: 13.5px; line-height: 1.45; }
@media screen and (max-width: 900px) { .cycle-steps, .cycle-uses { grid-template-columns: minmax(0, 1fr); gap: 8px; } .cycle-steps > i, .cycle-loop { display: none; } .cycle { padding-top: 0; } .cycle-uses > ul:nth-child(n) { grid-column: 1; } }

/* ─── market: nested circles beside the numbers ─── */
.market { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 56px; align-items: center; }
@media screen and (max-width: 900px) { .market { grid-template-columns: minmax(0, 1fr); } }
.rings { position: relative; width: 360px; height: 360px; margin: 0 auto; }
.rings > div { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; }
.rings .tam { width: 360px; height: 360px; background: var(--bg-panel-2); padding-top: 30px; }
.rings .sam { width: 232px; height: 232px; background: #E7E3D6; padding-top: 26px; }
.rings .som { width: 104px; height: 104px; background: var(--accent); justify-content: center; }
.rings span { font: 500 11px var(--mono); letter-spacing: 0.1em; color: var(--text-mute); }
.rings b { font: 500 44px/1.05 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--text); }
.rings .sam b { font-size: 38px; }
.rings .som span { color: rgba(255, 255, 255, 0.85); }
.rings .som b { font-size: 24px; color: #fff; }
.sizes li { padding: 14px 0; border-top: 1px solid var(--rule); }
.sizes li:last-child { border-bottom: 1px solid var(--rule); }
.sizes .label { margin-bottom: 5px; }
.sizes p { font-size: 15px; color: var(--text-mid); }
.sizes p b { font-weight: 600; color: var(--text); }
.method { margin-top: 18px; font-size: 12.5px; line-height: 1.5; color: var(--text-mute); max-width: 82ch; }

/* ─── competition: two questions, one map ─── */
.map { position: relative; height: 420px; }
.map::before, .map::after { content: ""; position: absolute; background: var(--rule-strong); }
.map::before { left: 0; right: 0; top: 50%; height: 1px; }
.map::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.map .ax { position: absolute; font-size: 12.5px; color: var(--text-mute); white-space: nowrap; }
.map .ax.l { left: 0; top: calc(50% + 8px); }
.map .ax.r { right: 0; top: calc(50% + 8px); }
.map .ax.t { left: calc(50% + 12px); top: 0; }
.map .ax.b { left: calc(50% + 12px); bottom: 0; }
.map li { position: absolute; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
.map li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.map li.near::before { background: var(--accent); }
.map .us { position: absolute; padding: 14px 18px; border-radius: 14px; background: var(--text); }
.map .us b { display: block; font: 400 24px/1 var(--wordmark); color: #FAF9F5; }
.map .us b .dot { color: var(--accent); }
.map .us > span { display: block; margin-top: 6px; font-size: 13px; color: rgba(250, 249, 245, 0.75); }

/* ─── why we win, and the loop that compounds it ─── */
.wins li + li { margin-top: 20px; }
.wins b { display: block; margin-top: 4px; font: 500 22px/1.2 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--text); }
.wins p { margin-top: 5px; font-size: 14.5px; line-height: 1.5; }
.wheel { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); grid-template-rows: auto 64px auto; align-items: center; }
.wheel > div { padding: 16px 18px; border-radius: 14px; background: var(--bg-panel-2); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text); min-height: 82px; display: flex; align-items: center; }
.wheel > div.hl { background: var(--accent-bg); }
.wheel > i { justify-self: center; font-style: normal; font-size: 18px; color: var(--accent-deep); }
.wheel > em { justify-self: center; font: 500 12.5px var(--mono); font-style: normal; color: var(--accent-deep); white-space: nowrap; }

/* ─── go to market: three ways in, one paid path ─── */
.gtm { display: grid; grid-template-columns: minmax(0, 1.2fr) 52px minmax(0, 0.85fr) 40px minmax(0, 0.85fr); grid-template-rows: repeat(3, 100px); row-gap: 12px; align-items: center; }
.gtm > div { height: 100%; padding: 16px 18px; border-radius: 14px; background: var(--bg-panel-2); display: flex; flex-direction: column; justify-content: center; }
.gtm > div p { margin-top: 4px; font-size: 14.5px; line-height: 1.4; color: var(--text); }
.gtm .in1 { grid-area: 1 / 1; } .gtm .in2 { grid-area: 2 / 1; } .gtm .in3 { grid-area: 3 / 1; }
.gtm .merge { grid-area: 1 / 2 / 4 / 3; width: 100%; height: 100%; }
.gtm .merge path { fill: none; stroke: var(--text-faint); stroke-width: 1.5; }
.gtm .merge polygon { fill: var(--text-faint); }
.gtm .paid { grid-area: 2 / 3; background: var(--accent-bg); }
.gtm .to { grid-area: 2 / 4; justify-self: center; font-style: normal; color: var(--text-faint); }
.gtm .ent { grid-area: 2 / 5; background: var(--text); }
.gtm .ent .label { color: #F0B49E; }
.gtm .ent p { color: #FAF9F5; }
.gtm .later { grid-area: 3 / 5; background: transparent; border: 1.5px dashed var(--rule-strong); }
.gtm .later .label { color: var(--text-mute); }
.gtm .later p { color: var(--text-mid); }
@media screen and (max-width: 900px) { .gtm { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .gtm > div, .gtm .in1, .gtm .in2, .gtm .in3, .gtm .paid, .gtm .ent, .gtm .later { grid-area: auto; } .gtm .merge, .gtm .to { display: none; } }

/* ─── traction: what is shipped, and the numbers still to fill ─── */
.traction { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
@media screen and (max-width: 900px) { .traction { grid-template-columns: minmax(0, 1fr); } }
.shipped { padding: 20px 22px; border-radius: 20px; background: var(--bg-panel-2); }
.shipped h3, .signals h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--text); }
.shipped li { display: grid; grid-template-columns: 18px minmax(0, 1fr); padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.45; color: var(--text); }
.shipped li::before { content: "✓"; color: var(--green); font-weight: 600; }
.shipped li span { color: var(--text-mute); }
.signals { display: grid; grid-template-rows: auto auto 1fr; gap: 12px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stats li { padding: 16px; border-radius: 14px; background: var(--bg-panel-2); }
.stats b { display: inline-block; font: 500 30px/1.1 var(--display); }
.stats span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--text-mid); }
.quote { padding: 20px 22px; border-radius: 16px; background: var(--accent-bg); }
.quote p { font: 500 19px/1.35 var(--display); color: var(--text); }
.quote span { display: inline-block; margin-top: 10px; font-size: 13px; }

/* ─── team ─── */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media screen and (max-width: 900px) { .team { grid-template-columns: minmax(0, 1fr); } }
.team > li { display: flex; flex-direction: column; padding: 24px 26px; border-radius: 20px; background: var(--bg-panel-2); }
.person { display: flex; align-items: center; gap: 14px; }
.person .av { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-panel); font: 500 24px var(--display); color: var(--text-mid); }
.person b { display: block; font: 500 26px/1.1 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--text); }
.person span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--accent-deep); font-weight: 600; }
.bio { display: grid; gap: 9px; margin-top: 18px; }
.bio li { font-size: 14px; line-height: 1.5; color: var(--text-mid); }
.bio li b { font-weight: 600; color: var(--text); }
.orgs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule-strong); }
.bio + .orgs { margin-top: 18px; }
.orgs li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-mid); white-space: nowrap; }
.orgs img { height: 20px; width: auto; }
.orgs img.mark { height: 20px; width: 20px; object-fit: contain; }
.orgs img.word { height: 16px; }

/* ─── the ask ─── */
.round { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
@media screen and (max-width: 900px) { .round { grid-template-columns: minmax(0, 1fr); } }
.raise b { display: inline-block; margin-top: 10px; font: 500 64px/1.05 var(--display); }
.raise p { margin-top: 12px; font-size: 15px; }
.funds li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--rule); }
.funds li:last-child { border-bottom: 1px solid var(--rule); }
.funds b { font: 500 28px var(--display); }
.funds strong { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.funds p { font-size: 14px; }
.closing { margin-top: 40px; padding: 24px 28px; border-radius: 16px; background: var(--text); font: 500 26px/1.25 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0; color: #FAF9F5; }

/* Slides are laid out on a 1280-wide canvas and zoomed 1.2×, so type reads at presentation size on wide screens and in the PDF. */
@media print, screen and (min-width: 1280px) {
  :root { --max: 1120px; }
  .slide { zoom: 1.2; min-height: calc(var(--slide-h) / 1.2); }
  .logo-row { gap: 14px 18px; }
}
/* Breakpoints above are screen-only, so a PDF gets the 16:9 desktop layout whatever window prints it. */
@media print {
  @page { size: 16in 9in; margin: 0; }
  html { scroll-snap-type: none; }
  .slide { height: 7.5in; min-height: 0; page-break-after: always; break-after: page; overflow: hidden; }
}