// Core slides 1–10 — Speedrun deck, 2026-05-12 source draft.
// Voice: <30 words body, brevity signals confidence. Warm white ground, dark title.

// 01 — Title. Three variants for Paul to pick from; S01_Title aliases to A so
// existing wiring (index.html references S01_Title by name) keeps working.

// Variant A — "We measure. Everyone else estimates." as the lead strapline,
// with a small longevity kicker line underneath.
function S01_TitleA({ number, total }) {
  return (
    <Slide number={number} total={total} dark={true} label="Title">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <span style={{
            fontFamily: D.fontSans, fontSize: 280, fontWeight: 700, letterSpacing: -10,
            lineHeight: 0.85, color: D.text,
          }}>Complete</span>
          <div style={{ marginTop: 56, fontFamily: D.fontSans, fontSize: 44, fontWeight: 700, lineHeight: 1.2, color: D.text, letterSpacing: -0.5, maxWidth: 1300 }}>
            We measure. Everyone else estimates.
          </div>
          <div style={{ marginTop: 18, fontFamily: D.fontSans, fontSize: 22, fontWeight: 700, color: D.coral, letterSpacing: -0.2 }}>
            More good years.
          </div>
          <div style={{ marginTop: 64, display: 'flex', alignItems: 'center', gap: 18, fontFamily: D.fontMono, fontSize: 18, fontWeight: 700, color: D.text, letterSpacing: 1 }}>
            <span>FITNESS.</span><span>HEALTH.</span><span>LONGEVITY.</span><span style={{ color: D.coral }}>COMPLETE.</span>
            <Cursor color={D.coral} size={20} />
          </div>
        </div>
        {/* Footer: founder line + TestFlight QR placeholder */}
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, paddingBottom: 8 }}>
          <div style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: D.textSec, letterSpacing: 0.6, lineHeight: 1.7 }}>
            <div style={{ color: D.text }}>PAUL SCHMIDT · FOUNDER</div>
            <div>paul@ccomplete.app · @qaulv</div>
            <div>BERLIN · JULY 2026 · V.04</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 18 }}>
            <div style={{ textAlign: 'right', fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSec, letterSpacing: 0.8, paddingBottom: 6 }}>
              TESTFLIGHT<br /><span style={{ color: D.text }}>SCAN TO INSTALL</span>
            </div>
            <QRPlaceholder size={140} dark={true} value="https://testflight.apple.com/join/u28FD21d" />
          </div>
        </div>
      </div>
    </Slide>
  );
}

// Variant B — keeps the current longevity lockup as the bold headline, swaps
// the sub-line for a measured-not-estimated strapline.
function S01_TitleB({ number, total }) {
  return (
    <Slide number={number} total={total} dark={true} label="Title">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <span style={{
            fontFamily: D.fontSans, fontSize: 280, fontWeight: 700, letterSpacing: -10,
            lineHeight: 0.85, color: D.text,
          }}>Complete</span>
          <div style={{ marginTop: 56, fontFamily: D.fontSans, fontSize: 44, fontWeight: 500, lineHeight: 1.2, color: D.text, letterSpacing: -0.5, maxWidth: 1300 }}>
            <span style={{ fontWeight: 700 }}>The longevity superapp.</span><br />
            <span style={{ color: D.textSec }}>We measure. Everyone else estimates.</span>
          </div>
          <div style={{ marginTop: 64, display: 'flex', alignItems: 'center', gap: 18, fontFamily: D.fontMono, fontSize: 18, fontWeight: 700, color: D.text, letterSpacing: 1 }}>
            <span>FITNESS.</span><span>HEALTH.</span><span>LONGEVITY.</span><span>COMPLETE.</span>
            <Cursor color={D.text} size={20} />
          </div>
        </div>
        {/* Footer: founder line + TestFlight QR placeholder */}
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, paddingBottom: 8 }}>
          <div style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: D.textSec, letterSpacing: 0.6, lineHeight: 1.7 }}>
            <div style={{ color: D.text }}>PAUL SCHMIDT · FOUNDER</div>
            <div>paul@ccomplete.app · @qaulv</div>
            <div>BERLIN · JULY 2026 · V.04</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 18 }}>
            <div style={{ textAlign: 'right', fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSec, letterSpacing: 0.8, paddingBottom: 6 }}>
              TESTFLIGHT<br /><span style={{ color: D.text }}>SCAN TO INSTALL</span>
            </div>
            <QRPlaceholder size={140} dark={true} value="https://testflight.apple.com/join/u28FD21d" />
          </div>
        </div>
      </div>
    </Slide>
  );
}

// Variant C — hybrid: measured-not-estimated leads bold, longevity lockup +
// "More good years." kicker folded into the sub-line.
function S01_TitleC({ number, total }) {
  return (
    <Slide number={number} total={total} dark={true} label="Title">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <span style={{
            fontFamily: D.fontSans, fontSize: 280, fontWeight: 700, letterSpacing: -10,
            lineHeight: 0.85, color: D.text,
          }}>Complete</span>
          <div style={{ marginTop: 56, fontFamily: D.fontSans, fontSize: 44, fontWeight: 500, lineHeight: 1.2, color: D.text, letterSpacing: -0.5, maxWidth: 1300 }}>
            <span style={{ fontWeight: 700 }}>We measure. Everyone else estimates.</span><br />
            <span style={{ color: D.textSec }}>The longevity superapp. More good years.</span>
          </div>
          <div style={{ marginTop: 64, display: 'flex', alignItems: 'center', gap: 18, fontFamily: D.fontMono, fontSize: 18, fontWeight: 700, color: D.text, letterSpacing: 1 }}>
            <span>FITNESS.</span><span>HEALTH.</span><span>LONGEVITY.</span><span>COMPLETE.</span>
            <Cursor color={D.text} size={20} />
          </div>
        </div>
        {/* Footer: founder line + TestFlight QR placeholder */}
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, paddingBottom: 8 }}>
          <div style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: D.textSec, letterSpacing: 0.6, lineHeight: 1.7 }}>
            <div style={{ color: D.text }}>PAUL SCHMIDT · FOUNDER</div>
            <div>paul@ccomplete.app · @qaulv</div>
            <div>BERLIN · JULY 2026 · V.04</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 18 }}>
            <div style={{ textAlign: 'right', fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSec, letterSpacing: 0.8, paddingBottom: 6 }}>
              TESTFLIGHT<br /><span style={{ color: D.text }}>SCAN TO INSTALL</span>
            </div>
            <QRPlaceholder size={140} dark={true} value="https://testflight.apple.com/join/u28FD21d" />
          </div>
        </div>
      </div>
    </Slide>
  );
}

// Default export used by index.html's slide wiring — points at variant A.
const S01_Title = S01_TitleA;

// 01b — Orientation: what Complete is, the longevity anchor, and the arc.
// Lands right after the title, before the zone-formula hook: say what we are
// in one breath, plant the #1-predictor stat, and point at where the
// measured data goes. Fixes the old "drops into the weeds" open.
function S01b_Reframe({ number, total }) {
  const beats = [
    { t: 'MEASURE', d: 'A lab test or the free in-app test finds your real numbers.' },
    { t: 'TRAIN', d: 'Your plan is built on them, and adapts as you go.' },
    { t: 'MORE GOOD YEARS', d: 'Every measurement compounds into the longevity platform.' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Orientation">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: D.fontSans, fontSize: 88, fontWeight: 700, letterSpacing: -3, lineHeight: 1.05, margin: 0, color: D.textLight }}>
          Fitness is the way in. <span style={{ color: D.textSecLight }}>Longevity is why.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 26, fontWeight: 500, marginTop: 28, marginBottom: 0, color: D.textSecLight, maxWidth: 1680, lineHeight: 1.3 }}>
          Complete is the personalized health brain for your body. Measured numbers, a plan built on them.
        </p>

        <div style={{ flex: 1, marginTop: 32, display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 56, alignItems: 'stretch' }}>
          {/* LEFT: the longevity anchor — VO₂max leads */}
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 14 }}>
            <span style={{ fontFamily: D.fontSans, fontSize: 148, fontWeight: 700, color: D.coral, lineHeight: 0.9, letterSpacing: -6 }}>VO₂max</span>
            <span style={{ fontFamily: D.fontSans, fontSize: 42, fontWeight: 700, color: D.textLight, letterSpacing: -1, lineHeight: 1.1 }}>
              The #1 predictor of all-cause mortality.
            </span>
            <span style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 600, letterSpacing: -0.4, lineHeight: 1.3, marginTop: 4, maxWidth: 900 }}>
              <span style={{ color: D.textSecLight }}>The same number that makes you faster </span>
              <span style={{ color: D.coral, fontWeight: 700 }}>predicts how long you live.</span>
            </span>
            <span style={{ fontFamily: D.fontSans, fontSize: 20, fontWeight: 700, color: D.textLight, letterSpacing: -0.2, lineHeight: 1.3, borderTop: `1px solid ${D.borderLight}`, paddingTop: 16, marginTop: 6 }}>
              That's the number we measure. And build on.
            </span>
          </div>

          {/* RIGHT: the arc — plain flow, no box */}
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 6 }}>
            {beats.map((b, i) => (
              <React.Fragment key={i}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <span style={{ fontFamily: D.fontSans, fontSize: 44, fontWeight: 700, color: D.textLight, letterSpacing: -1.2, lineHeight: 1 }}>{b.t.charAt(0) + b.t.slice(1).toLowerCase()}</span>
                  <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textSecLight, lineHeight: 1.35, maxWidth: 620 }}>{b.d}</span>
                </div>
                {i < beats.length - 1 && (
                  <span style={{ fontFamily: D.fontMono, fontSize: 30, fontWeight: 700, color: D.textLight, lineHeight: 1, margin: '10px 0' }}>↓</span>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 24, padding: '22px 32px', background: D.textLight, color: D.bgLight, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, letterSpacing: -0.3 }}>The measured n=1 data compounds into the longevity platform. <span style={{ color: D.coral }}>More good years.</span></span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>THE ARC</span>
        </div>
      </div>
    </Slide>
  );
}

// 02 — All that data. Still the wrong numbers. One problem statement: personal
// data is partially solved, but the numbers underneath are formula-derived,
// not measured, and even right numbers don't close the knowing-doing gap.
function S02_Problem({ number, total }) {
  const reads = [
    { v: '59', d: 'WHOOP' },
    { v: '55', d: 'COROS' },
    { v: '54', d: 'APPLE WATCH' },
    { v: '61.3', d: 'LAB TEST', lab: true },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Problem">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: D.fontSans, fontSize: 88, fontWeight: 700, letterSpacing: -3, lineHeight: 1.05, margin: 0, color: D.textLight }}>
          Built for the average. <span style={{ color: D.textSecLight }}>Almost nobody is.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 25, fontWeight: 500, marginTop: 20, marginBottom: 0, color: D.textSecLight, maxWidth: 1680, lineHeight: 1.3 }}>
          Medicine and training start from a 180cm reference man. Formulas built on him, never measurements of you. <span style={{ color: D.textLight, fontWeight: 700 }}>My VO₂max, same week, four answers:</span>
        </p>

        <div style={{ flex: 1, marginTop: 36, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {reads.map((r, i) => (
            <div key={i} style={{ padding: '40px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 20, borderRight: i !== 3 ? `1px solid ${D.borderLight}` : 'none', background: r.lab ? D.textLight : 'transparent' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 170, fontWeight: 700, lineHeight: 0.85, letterSpacing: -7, color: r.lab ? D.coral : D.textLight }}>{r.v}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 20, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase', color: r.lab ? D.bgLight : D.textSecLight }}>{r.d}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 22, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 24 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 20, fontWeight: 700, color: D.textLight, letterSpacing: -0.3, lineHeight: 1.3, maxWidth: 1420 }}>
            Zones, paces, and plans hang off LT1, LT2, and your real max. <span style={{ color: D.textSecLight, fontWeight: 500 }}>No formula finds any of the three.</span>
          </span>
          <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap' }}>MEASURED, NOT MODELED</span>
        </div>

        {/* Closer band — the cost of guessing */}
        <div style={{ marginTop: 'auto', padding: '22px 32px', background: D.textLight, color: D.bgLight, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, letterSpacing: -0.3 }}>Athletes spend hundreds on carbon racing shoes. <span style={{ color: D.coral }}>Then train on numbers that are wrong.</span></span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>THE COST OF GUESSING</span>
        </div>
      </div>
    </Slide>
  );
}

// 03 — One body. One engine.
function S03_Solution({ number, total }) {
  return (
    <Slide number={number} total={total} dark={false} label="Solution">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: D.fontSans, fontSize: 88, fontWeight: 700, letterSpacing: -3, lineHeight: 1.05, margin: 0, color: D.textLight }}>
          One body. <span style={{ color: D.textSecLight }}>One engine.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 28, fontWeight: 500, marginTop: 32, color: D.textSecLight, maxWidth: 1680, lineHeight: 1.35 }}>
          <span style={{ color: D.textLight, fontWeight: 700 }}>A protocol for one person.</span> Personalized planning, estimation that sharpens with every session, and measured tests where they matter most. <span style={{ color: D.textLight, fontWeight: 700 }}>n=1, for life.</span>
        </p>

        {/* Archetype grid — breadth of n=1 */}
        <div style={{ flex: 1, marginTop: 36, display: 'grid', gridTemplateColumns: '0.7fr 2.3fr', gap: 32 }}>
          <div style={{ border: `1px solid ${D.borderLight}`, padding: '28px 26px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <SLabel color={D.textLight}>One engine</SLabel>
            <span style={{ fontFamily: D.fontMono, fontSize: 200, fontWeight: 700, color: D.coral, lineHeight: 0.85, letterSpacing: -10 }}>n=1</span>
            <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textSecLight, lineHeight: 1.4 }}>
              A protocol for one person. Built on their real numbers, measured and learned, recomposed daily.
            </span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: '1fr 1fr', gap: 0, border: `1px solid ${D.borderLight}` }}>
            {[
              { t: 'Hyrox', g: 'Compromised running, station pacing', d: 'RPE · threshold · taper' },
              { t: 'Half + full marathon', g: '21.1K to 42.2K, paced off your real base', d: 'LT1 base · LT2 pace · taper' },
              { t: 'Return from injury', g: 'Rebuild load without the re-injury spiral', d: 'load caps · graded ramp · re-test' },
              { t: 'Chase a Road', g: 'VO₂max · Platinum to Elite', d: 'Rungs · cohort · streak' },
              { t: 'Life stages', g: 'Pre-conception through postpartum', d: 'Cycle · HRV · pelvic floor' },
              { t: 'Lifelong fit', g: 'Decades, not cycles', d: 'VO₂ · strength · longevity' },
            ].map((a, i) => (
              <div key={i} style={{
                padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 8,
                borderRight: i % 3 !== 2 ? `1px solid ${D.borderLight}` : 'none',
                borderBottom: i < 3 ? `1px solid ${D.borderLight}` : 'none',
              }}>
                <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{`0${i + 1}`}</span>
                <span style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 700, color: D.textLight, letterSpacing: -0.4, lineHeight: 1.1 }}>{a.t}</span>
                <span style={{ fontFamily: D.fontSans, fontSize: 15, fontWeight: 500, color: D.textSecLight, lineHeight: 1.3 }}>{a.g}</span>
                <span style={{ fontFamily: D.fontMono, fontSize: 11, color: D.textSecLight, letterSpacing: 0.6, marginTop: 'auto' }}>{a.d.toUpperCase()}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 24, padding: '22px 32px', background: D.textLight, color: D.bgLight, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, letterSpacing: -0.3 }}>
            No two plans are the same, because no two bodies are. <span style={{ color: D.coral }}>That's n=1.</span>
          </span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>ONE ENGINE</span>
        </div>
      </div>
    </Slide>
  );
}

// 04 — Why Now: the MARKET slide. Three-beat arc: the wearable wave built a
// paying market for body data (sourced stats), the wave plateaued at
// description (scores, no intervention), and the next wave is moving the
// number, with a physical layer (testing rig, physical touchpoints,
// community) that software-only players won't copy. Medicine 3.0 carried by
// the sub, col 02, and the closer band.
function S04_WhyNow({ number, total }) {
  const cols = [
    { n: '01', label: 'THE WAVE · BUILT THE MARKET', lines: [
      'A decade of wellness capital went into measurement hardware.',
    ], stats: [
      { v: '13% → 46%', d: 'US adults with a wearable, 2015 to 2025', s: 'ROCK HEALTH 2025' },
      { v: '5.5M+', d: 'Oura rings sold', s: 'OURA · REPORTED' },
      { v: '$10.1B', d: 'WHOOP valuation', s: 'SERIES G · MARCH 2026' },
    ], accent: 'Millions of people now pay to know their body.' },
    { n: '02', label: 'THE PLATEAU · DESCRIPTION ONLY', lines: [
      'All that hardware describes your state. It does not change it.',
      '"My recovery is low. Now what?" Scores estimated from wrist proxies, no plan underneath, nothing moves.',
    ], accent: 'Medicine 3.0 demands intervention, not observation.' },
    { n: '03', label: 'THE NEXT WAVE · MOVING THE NUMBER', lines: [
      'Measured truth: a lab test or the free in-app test, and a plan built on your real numbers.',
      "Plus a physical layer software-only players won't copy: a testing rig on the race calendar, physical touchpoints, community.",
      'And the stack goes deeper. Blood panels are already in the app; DNA, glucose, and hormones are next. Everyone gets their own protocol, not the 180cm-male default.',
    ], accent: "A dashboard on someone else's sensor is a few months of engineering. A physical testing layer plus community is not.", accentColor: D.coral },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Why now">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32 }}>
          <h1 style={{ fontFamily: D.fontSans, fontSize: 58, fontWeight: 700, letterSpacing: -2.2, lineHeight: 1.03, margin: 0, color: D.textLight }}>
            Fitness is becoming longevity. <span style={{ color: D.textSecLight }}>Built for where it lands.</span>
          </h1>
          <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap', paddingBottom: 6 }}>
            MEDICINE 3.0 · WHERE THIS GOES
          </span>
        </div>

        <p style={{ fontFamily: D.fontSans, fontSize: 23, fontWeight: 500, color: D.textSecLight, margin: '16px 0 0 0', letterSpacing: -0.3, maxWidth: 1680, lineHeight: 1.3 }}>
          The shift is from treating sickness to building health. Exercise is the highest-leverage lever we have, and the category above it is longevity.
        </p>

        <div style={{ flex: 1, marginTop: 26, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {cols.map((c, i) => (
            <div key={i} style={{
              padding: '26px 30px', display: 'flex', flexDirection: 'column', gap: 18,
              borderRight: i < 2 ? `1px solid ${D.borderLight}` : 'none',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{c.n}</span>
                <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>{c.label}</span>
              </div>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', gap: 20 }}>
                {c.lines.map((line, j) => (
                  <span key={j} style={{ fontFamily: D.fontSans, fontSize: 19, fontWeight: 500, color: D.textSecLight, letterSpacing: -0.2, lineHeight: 1.4 }}>{line}</span>
                ))}
                {c.stats ? (
                  <div style={{ display: 'flex', flexDirection: 'column' }}>
                    {c.stats.map((st, k) => (
                      <div key={k} style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '12px 0', borderTop: `1px solid ${D.borderLight}` }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
                          <span style={{ fontFamily: D.fontMono, fontSize: 32, fontWeight: 700, color: D.textLight, letterSpacing: -0.6, lineHeight: 1 }}>{st.v}</span>
                          <span style={{ fontFamily: D.fontMono, fontSize: 10, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8, whiteSpace: 'nowrap' }}>{st.s}</span>
                        </div>
                        <span style={{ fontFamily: D.fontSans, fontSize: 14, fontWeight: 500, color: D.textSecLight, lineHeight: 1.3 }}>{st.d}</span>
                      </div>
                    ))}
                  </div>
                ) : null}
                {c.accent ? (
                  <span style={{ fontFamily: D.fontSans, fontSize: 19, fontWeight: 700, color: c.accentColor || D.textLight, letterSpacing: -0.2, lineHeight: 1.35, borderTop: `1px solid ${c.accentColor || D.textLight}`, paddingTop: 16, marginTop: 4 }}>{c.accent}</span>
                ) : null}
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 24, padding: '22px 32px', background: D.textLight, color: D.bgLight, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, letterSpacing: -0.3 }}>Medicine 3.0 isn't the band-aid. The goal is healthy at 100, <span style={{ color: D.coral }}>more good years, earned.</span></span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>WHY NOW</span>
        </div>
      </div>
    </Slide>
  );
}

// 03 — The VO₂max wedge, single message. Pros test it, hobby athletes never have.
// Right panel adds LT1/LT2: the ceiling (VO₂max) plus the two thresholds
// training actually hangs off, none of which a formula can find.
function S04b_VO2maxWedge({ number, total }) {
  return (
    <Slide number={number} total={total} dark={false} label="VO₂max">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: D.fontSans, fontSize: 72, fontWeight: 700, letterSpacing: -2.5, lineHeight: 1.05, margin: 0, color: D.textLight }}>
          Elite athletes know their VO₂max. <span style={{ color: D.textSecLight }}>You don't.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 26, fontWeight: 500, color: D.textSecLight, margin: '20px 0 0 0', letterSpacing: -0.3, maxWidth: 1500, lineHeight: 1.3 }}>
          Professional athletes test it every season. <span style={{ color: D.textLight, fontWeight: 700 }}>Almost no hobby athlete ever has.</span>
        </p>

        <div style={{ flex: 1, marginTop: 20, display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 40, alignItems: 'stretch' }}>
          {/* LEFT: the #1 predictor punch, unchanged */}
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 16, maxWidth: 1100 }}>
            <span style={{ fontFamily: D.fontMono, fontSize: 280, fontWeight: 700, color: D.coral, lineHeight: 0.82, letterSpacing: -12 }}>#1</span>
            <span style={{ fontFamily: D.fontSans, fontSize: 52, fontWeight: 700, color: D.textLight, letterSpacing: -1.5, lineHeight: 1.1 }}>Predictor of all-cause mortality.</span>
            <span style={{ fontFamily: D.fontSans, fontSize: 30, fontWeight: 600, letterSpacing: -0.5, lineHeight: 1.25, marginTop: 4, maxWidth: 1000 }}>
              <span style={{ color: D.textSecLight }}>The same number that makes you faster </span>
              <span style={{ color: D.coral, fontWeight: 700 }}>also predicts how long you live.</span>
            </span>
          </div>

          {/* RIGHT: LT1/LT2 panel */}
          <div style={{ border: `1px solid ${D.borderLight}`, padding: '32px 36px', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 18 }}>
            <SLabel color={D.textLight}>LT1 · LT2</SLabel>
            <span style={{ fontFamily: D.fontSans, fontSize: 34, fontWeight: 700, color: D.textLight, letterSpacing: -0.6, lineHeight: 1.15 }}>
              Where training actually happens.
            </span>
            <p style={{ margin: 0, fontFamily: D.fontSans, fontSize: 19, fontWeight: 500, color: D.textSecLight, lineHeight: 1.45 }}>
              VO₂max is your ceiling and your lifespan signal. LT1 and LT2 are where the work happens. Zones, paces, and plans all hang off them.
            </p>
            <span style={{ fontFamily: D.fontSans, fontSize: 19, fontWeight: 700, color: D.textLight, letterSpacing: -0.2, lineHeight: 1.35, borderTop: `1px solid ${D.borderLight}`, paddingTop: 16, marginTop: 4 }}>
              No formula can find any of the three.
            </span>
          </div>
        </div>
      </div>
    </Slide>
  );
}

// 06 — Roads: fitness as a skill tree (repurposed from the product-screenshots slide)
function S05_Product({ number, total }) {
  // Coral ramp, not a rainbow badge set: grey = cleared tiers behind you, full coral = where you are, light coral = next.
  const TIER = { elite: '#FFB3C6', platinum: D.coral, gold: '#707070', silver: '#9A9A9A', bronze: '#B5B5B5', muted: '#888888' };
  // VO₂max Road — the app's real catalog tiers (ml/kg/min). YOU sits at Platinum (54.8, just shy of Elite).
  const rungs = [
    { tier: 'ELITE',    label: 'Elite Aerobic',  th: '≥55', sw: TIER.elite,    you: false, cleared: false, cohort: ['JK', 'ML', 'RT'], more: 6 },
    { tier: 'PLATINUM', label: 'High Performer', th: '≥50', sw: TIER.platinum, you: true,  cleared: false, cohort: ['SV', 'TN'],       more: 0, rank: 'TOP 22%', sub: '#31 / 142' },
    { tier: 'GOLD',     label: 'Strong Engine',  th: '≥45', sw: TIER.gold,     you: false, cleared: true,  cohort: ['AR', 'DM', 'LP'], more: 35 },
    { tier: 'SILVER',   label: 'Fit',            th: '≥38', sw: TIER.silver,   you: false, cleared: true,  cohort: ['RK', 'JB', 'EM'], more: 49 },
    { tier: 'BRONZE',   label: 'Active',         th: '≥30', sw: TIER.bronze,   you: false, cleared: true,  cohort: ['NF', 'EW'],       more: 11 },
  ];
  const chasing = [
    { cap: 'IRON · BENCH 2× BW',       move: 'SILVER → GOLD',   c: TIER.gold },
    { cap: 'MOBILITY · FRONT SPLITS',  move: 'BRONZE → SILVER', c: TIER.silver },
    { cap: 'HYROX · SUB-1:30',         move: 'BRONZE ✓',        c: TIER.bronze },
  ];
  const hooks = [
    { t: 'PROGRESSION',    b: 'Cohort-percentile rungs, Bronze (75th) → Elite. Always a next rung.' },
    { t: 'COHORT LADDERS', b: 'You vs. the people on the same Road. A leaderboard per capability.' },
    { t: 'STREAKS',        b: 'Consistency is the 5th discipline. Weekly, 3+ sessions. Shareable.' },
    { t: 'MARQUEE UNLOCKS', b: 'Hit a rung → a full-screen achievement moment.' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Roads">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32 }}>
          <h1 style={{ fontFamily: D.fontSans, fontSize: 76, fontWeight: 700, letterSpacing: -2.5, lineHeight: 1.0, margin: 0, color: D.textLight }}>
            Fitness as a <span style={{ color: D.textSecLight }}>skill tree.</span>
          </h1>
          <div style={{ textAlign: 'right', fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textLight, letterSpacing: 1, lineHeight: 1.7, whiteSpace: 'nowrap' }}>
            LIVE ON iOS · ALPHA PHASE
          </div>
        </div>

        <p style={{ fontFamily: D.fontSans, fontSize: 23, fontWeight: 500, color: D.textSecLight, margin: '18px 0 0 0', letterSpacing: -0.3, maxWidth: 1560, lineHeight: 1.3 }}>
          Strava shows what you did. Roads shows what you're <span style={{ color: D.textLight, fontWeight: 700 }}>becoming.</span> Every capability is a Road with tiered rungs. The engine routes you up the tree.
        </p>

        {/* Main: the Road ladder (hero) + ALSO CHASING stack */}
        <div style={{ flex: 1, marginTop: 24, display: 'grid', gridTemplateColumns: '1.45fr 1fr', gap: 28, minHeight: 0 }}>
          {/* Road ladder — VO₂max, the hero road */}
          <div style={{ border: `1px solid ${D.borderLight}`, display: 'flex', flexDirection: 'column' }}>
            <div style={{ padding: '14px 24px', borderBottom: `1px solid ${D.borderLight}`, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 15, fontWeight: 700, color: D.textLight, letterSpacing: 1 }}>ROAD · VO₂MAX</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>ML/KG/MIN · COHORT OF 142</span>
            </div>
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
              {rungs.map((r, i) => {
                const fg = r.you ? D.bgLight : (r.cleared ? D.textLight : TIER.muted);
                const sub = r.you ? D.bgLight : (r.cleared ? D.textSecLight : TIER.muted);
                return (
                  <div key={i} style={{
                    flex: 1, display: 'grid', gridTemplateColumns: '1.4fr 0.5fr 1.3fr', alignItems: 'center', gap: 12,
                    padding: '0 24px',
                    borderBottom: i < rungs.length - 1 ? `1px solid ${D.borderLight}` : 'none',
                    background: r.you ? D.textLight : 'transparent',
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                      <span style={{ width: 16, height: 16, background: r.sw, border: r.you ? `1px solid ${D.bgLight}` : `1px solid ${D.borderLight}`, display: 'block', flexShrink: 0 }} />
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                        <span style={{ fontFamily: D.fontSans, fontSize: 26, fontWeight: 700, letterSpacing: -0.4, lineHeight: 1, color: fg }}>{r.tier}</span>
                        <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, letterSpacing: 0.6, color: sub }}>{r.label.toUpperCase()}</span>
                      </div>
                    </div>
                    <span style={{ fontFamily: D.fontMono, fontSize: 26, fontWeight: 700, letterSpacing: -0.6, color: fg }}>{r.th}</span>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8 }}>
                      {r.you ? (
                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2 }}>
                          <span style={{ fontFamily: D.fontMono, fontSize: 18, fontWeight: 700, letterSpacing: 0.5, color: D.bgLight }}>{r.rank}</span>
                          <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, letterSpacing: 0.8, color: D.bgLight, opacity: 0.75 }}>YOU · {r.sub}</span>
                        </div>
                      ) : (
                        <>
                          {r.cohort.map((u, k) => (
                            <span key={k} style={{
                              width: 26, height: 26, display: 'flex', alignItems: 'center', justifyContent: 'center',
                              border: `1px solid ${r.cleared ? D.borderLight : TIER.muted}`,
                              fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, letterSpacing: -0.3,
                              color: r.cleared ? D.textLight : TIER.muted, flexShrink: 0,
                            }}>{u}</span>
                          ))}
                          {r.more > 0 ? (
                            <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, letterSpacing: 0.4, color: sub }}>+{r.more}</span>
                          ) : null}
                        </>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
            <div style={{ padding: '14px 24px', borderTop: `1px solid ${D.borderLight}`, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16, fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, letterSpacing: 0.8 }}>
              <span style={{ color: D.textLight }}>YOU · <span style={{ color: D.textSecLight }}>PLATINUM · #31 / 142</span></span>
              <span style={{ color: D.textLight, letterSpacing: 1, whiteSpace: 'nowrap' }}>YOUR MEASURED VO₂MAX · THE NUMBER YOU CLIMB</span>
            </div>
          </div>

          {/* ALSO CHASING */}
          <div style={{ border: `1px solid ${D.borderLight}`, display: 'flex', flexDirection: 'column' }}>
            <div style={{ padding: '14px 22px', borderBottom: `1px solid ${D.borderLight}`, fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 1.2 }}>ALSO CHASING · 3 ROADS</div>
            {chasing.map((c, i) => (
              <div key={i} style={{
                flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 8,
                padding: '0 22px', borderBottom: i < chasing.length - 1 ? `1px solid ${D.borderLight}` : 'none',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{ width: 12, height: 12, background: c.c, border: `1px solid ${D.borderLight}`, display: 'block', flexShrink: 0 }} />
                  <span style={{ fontFamily: D.fontSans, fontSize: 19, fontWeight: 700, color: D.textLight, letterSpacing: -0.2 }}>{c.cap}</span>
                </div>
                <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8, paddingLeft: 24 }}>{c.move}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Gaming-hooks row — the retention best-practices thesis */}
        <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {hooks.map((h, i) => (
            <div key={i} style={{
              padding: '18px 22px', display: 'flex', flexDirection: 'column', gap: 8,
              borderRight: i !== 3 ? `1px solid ${D.borderLight}` : 'none',
            }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textLight, letterSpacing: 1 }}>{h.t}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 15, fontWeight: 500, color: D.textSecLight, lineHeight: 1.35 }}>{h.b}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 24, padding: '22px 32px', background: D.textLight, color: D.bgLight, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, letterSpacing: -0.2 }}>The hooks that make games impossible to put down, applied to the one game that matters.</span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>ROADS</span>
        </div>
      </div>
    </Slide>
  );
}

// 07 — The flywheel: test (razor) → data (moat) → personalised stack (blades) → lock-in → tiers.
// The load-bearing business-model slide. Software is the wedge; the data is the empire.
function S05b_Flywheel({ number, total }) {
  const cols = [
    { n: '01', kicker: 'RAZOR · THE TEST', t: 'VO₂max + LT + blood',
      b: 'Your real thresholds and blood markers in one visit. Sweat and DNA next.' },
    { n: '02', kicker: 'DATA · THE MOAT', t: 'Your n=1, compounding', accent: true,
      b: 'Your deviations and training history. More sessions → sharper plan → harder to leave.' },
    { n: '03', kicker: 'BLADES · PERSONALISED', t: 'Locked-in, staged',
      b: 'Only we have your profile. So only we build the right one.' },
  ];
  const blades = [
    ['01', 'n=1 training', 'software · live'],
    ['02', 'Fuel + electrolytes', 'Berlin'],
    ['03', 'Apparel + racing kit', 'mid'],
    ['04', 'Testing + hardware', 'later'],
  ];
  const tiers = [
    ['FREE', 'Social + in-app Complete Test', 'race-week re-anchor'],
    ['PLANS', '€5.99/wk · €14.99/mo', 'the athlete'],
    ['YEARLY', '€99 · plan only, no test', 'committed'],
    ['PREMIUM', '€249/yr · one lab test, block start', 'the razor'],
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Flywheel">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32 }}>
          <h1 style={{ fontFamily: D.fontSans, fontSize: 72, fontWeight: 700, letterSpacing: -2.5, lineHeight: 1.0, margin: 0, color: D.textLight }}>
            The test is the wedge. <span style={{ color: D.textSecLight }}>The data is the empire.</span>
          </h1>
          <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap', paddingBottom: 6 }}>
            SOFTWARE FIRST · CAPITAL-LIGHT
          </span>
        </div>

        <p style={{ fontFamily: D.fontSans, fontSize: 22, fontWeight: 500, color: D.textSecLight, margin: '14px 0 0 0', letterSpacing: -0.3, maxWidth: 1680, lineHeight: 1.3 }}>
          One test captures data nobody else has. Everything after it is <span style={{ color: D.textLight, fontWeight: 700 }}>personalised, and locked in.</span> Whoop bundles the strap. We bundle the lab test.
        </p>

        <div style={{ flex: 1, marginTop: 20, display: 'grid', gridTemplateColumns: '1fr 1fr 1.1fr', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {cols.map((c, i) => (
            <div key={i} style={{
              padding: '22px 26px', display: 'flex', flexDirection: 'column', gap: 11,
              borderRight: i < 2 ? `1px solid ${D.borderLight}` : 'none',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{c.n}</span>
                <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: c.accent ? D.coral : D.textSecLight, letterSpacing: 0.8 }}>{c.kicker}</span>
              </div>
              <span style={{ fontFamily: D.fontSans, fontSize: 28, fontWeight: 700, color: c.accent ? D.coral : D.textLight, letterSpacing: -0.5, lineHeight: 1.05 }}>{c.t}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 15, fontWeight: 500, color: D.textSecLight, lineHeight: 1.4 }}>{c.b}</span>
              {i === 2 ? (
                <div style={{ marginTop: 2, display: 'flex', flexDirection: 'column' }}>
                  {blades.map(([bn, bt, bw], j) => (
                    <div key={j} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '6px 0', borderTop: `1px solid ${D.borderLight}` }}>
                      <span style={{ fontFamily: D.fontSans, fontSize: 15, fontWeight: 700, color: D.textLight, letterSpacing: -0.2 }}>
                        <span style={{ fontFamily: D.fontMono, fontSize: 10, fontWeight: 700, color: D.textSecLight, marginRight: 8 }}>{bn}</span>{bt}
                      </span>
                      <span style={{ fontFamily: D.fontMono, fontSize: 10, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.6, textTransform: 'uppercase' }}>{bw}</span>
                    </div>
                  ))}
                </div>
              ) : null}
              <div style={{ flex: 1 }} />
            </div>
          ))}
        </div>

        <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: '0.55fr repeat(4, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          <div style={{ padding: '14px 18px', borderRight: `1px solid ${D.borderLight}`, display: 'flex', alignItems: 'center', fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, lineHeight: 1.3 }}>
            TIERS · THE WHOOP MOVE
          </div>
          {tiers.map(([tt, td, tw], i) => (
            <div key={i} style={{
              padding: '14px 18px', display: 'flex', flexDirection: 'column', gap: 5,
              borderRight: i < 3 ? `1px solid ${D.borderLight}` : 'none',
              background: i === 3 ? D.textLight : 'transparent',
            }}>
              <span style={{ fontFamily: D.fontSans, fontSize: 19, fontWeight: 700, color: i === 3 ? D.coral : D.textLight, letterSpacing: -0.3 }}>{tt}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 13, fontWeight: 500, color: i === 3 ? D.bgLight : D.textSecLight, lineHeight: 1.25 }}>{td}</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 10, fontWeight: 700, color: i === 3 ? D.bgLight : D.textSecLight, letterSpacing: 0.6, textTransform: 'uppercase' }}>{tw}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 24, padding: '22px 32px', background: D.textLight, color: D.bgLight, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, letterSpacing: -0.3 }}>Measure once. Personalise everything after, for life. The empire is staged behind Berlin.</span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>FLYWHEEL</span>
        </div>
      </div>
    </Slide>
  );
}

Object.assign(window, { S01_Title, S01_TitleA, S01_TitleB, S01_TitleC, S01b_Reframe, S02_Problem, S03_Solution, S04b_VO2maxWedge, S04_WhyNow, S05_Product, S05b_Flywheel });