// V.05 slides, 2026-08-25. One story: status needs proof.
// Spec: docs/v05-spec.md. Loaded only by v05.html; V.04 components untouched.
// Revision wave 2 (Paul review 2026-08-25): LastLuxury, Solution, Beachhead,
// HowWeGrow, Axes, Ask, StagedPlan, Bowerman, Blueprint added; Problem, Product,
// MeasurementLoop, Vision, Competition reworked/edited. See docs/v05-spec.md
// "Revision wave 2" section for the full change log.

// 01: Title. Product one-liner leads; "longevity superapp" moved to V05_Vision.
// UNCHANGED in this wave: headline is pending a separate decision with Paul.
function V05_Title({ 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: 1400 }}>
            Fitness is social. Complete makes it real.
          </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>SOCIAL.</span><span>MEASURED.</span><span>YOURS.</span><span style={{ color: D.coral }}>COMPLETE.</span>
            <Cursor color={D.coral} size={20} />
          </div>
        </div>
        <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 · AUGUST 2026 · V.05</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>
  );
}

// 02: The last luxury. Copied from S01c_LastLuxury (CoreSlides.jsx), Post-AGI
// kicker dropped, status line + bolded paragraph added per Paul 2026-08-25.
function V05_LastLuxury({ number, total }) {
  return (
    <Slide number={number} total={total} dark={false} label="Last luxury">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <h1 style={{ fontFamily: D.fontSans, fontSize: 132, fontWeight: 700, letterSpacing: -5, lineHeight: 0.98, margin: 0, color: D.textLight, maxWidth: 1500 }}>
            A healthy body is<br />the <span style={{ color: D.coral }}>last status symbol</span>.
          </h1>

          <p style={{ fontFamily: D.fontSans, fontSize: 34, fontWeight: 500, lineHeight: 1.35, margin: '44px 0 0 0', color: D.textSecLight, maxWidth: 1280, letterSpacing: -0.6 }}>
            Money can't buy it. AI can't do it for you.
            <br />
            In a world of abundance, the divide that remains is physical. <span style={{ color: D.textLight, fontWeight: 700 }}>You have to do the work.</span>
          </p>
        </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 }}>
            Complete is the social app where you train, share, and prove it.
          </span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>MORE GOOD YEARS</span>
        </div>
      </div>
    </Slide>
  );
}

// 03: Problem, reworked 08-25: the wave is real, the tools underneath aren't.
// Four-column grid: the wave (culture/demand) -> social (cardio only) ->
// wearables (all estimates, canonical 59/53/54 vs 61.3 lab read) -> testing
// (locked away, pros only). Closing band unchanged (carbon shoes / cost of guessing).
// Reworked again 08-25 (evening, Paul review): one-line h1, columns get a large
// mono numeral each and move body copy to full-contrast text, wearables column
// gets a proper aligned number row instead of an inline sentence.
function V05_Problem({ number, total }) {
  const wearRow = [
    { v: '59', l: 'WHOOP' },
    { v: '53', l: 'GARMIN' },
    { v: '54', l: 'APPLE' },
    { v: '61.3', l: 'LAB', 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, whiteSpace: 'nowrap' }}>
          The biggest fitness wave ever.
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 500, marginTop: 18, marginBottom: 0, color: D.textSecLight, maxWidth: 1680, lineHeight: 1.3 }}>
          More people train and race than ever. <span style={{ color: D.textLight, fontWeight: 700 }}>The tools under them haven't kept up.</span>
        </p>

        <div style={{ flex: 1, marginTop: 26, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          <div style={{ padding: '24px 24px', display: 'flex', flexDirection: 'column', gap: 10, borderRight: `1px solid ${D.borderLight}` }}>
            <span style={{ fontFamily: D.fontMono, fontSize: 54, fontWeight: 700, color: D.textLight, letterSpacing: -2, lineHeight: 1 }}>01</span>
            <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>THE WAVE</span>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 6 }}>
              <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 700, color: D.textLight, lineHeight: 1.35 }}>Racing is the new status hobby:</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textLight, lineHeight: 1.35 }}>Marathon ballots break records, Hyrox sells out in hours.</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textLight, lineHeight: 1.35 }}>Run clubs everywhere, people want community.</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textLight, lineHeight: 1.35 }}>Longevity has gone mainstream. New products flood the space: fueling, gear, recovery.</span>
            </div>
          </div>
          <div style={{ padding: '24px 24px', display: 'flex', flexDirection: 'column', gap: 10, borderRight: `1px solid ${D.borderLight}` }}>
            <span style={{ fontFamily: D.fontMono, fontSize: 54, fontWeight: 700, color: D.textLight, letterSpacing: -2, lineHeight: 1 }}>02</span>
            <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>SOCIAL</span>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 6 }}>
              <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textLight, lineHeight: 1.35 }}>The biggest social fitness app is Strava.</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textLight, lineHeight: 1.35 }}>Lifts, Hyrox, padel: invisible.</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textLight, lineHeight: 1.35 }}>You can't compete there.</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 700, color: D.coral, lineHeight: 1.35 }}>Up for the taking.</span>
            </div>
          </div>
          <div style={{ padding: '24px 24px', display: 'flex', flexDirection: 'column', gap: 10, borderRight: `1px solid ${D.borderLight}` }}>
            <span style={{ fontFamily: D.fontMono, fontSize: 54, fontWeight: 700, color: D.textLight, letterSpacing: -2, lineHeight: 1 }}>03</span>
            <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>WEARABLES</span>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6, marginTop: 6 }}>
              {wearRow.map((w, wi) => (
                <div key={wi} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                  <span style={{ fontFamily: D.fontMono, fontSize: 26, fontWeight: 700, color: w.lab ? D.coral : D.textLight, letterSpacing: -0.6, lineHeight: 1 }}>{w.v}</span>
                  <span style={{ fontFamily: D.fontMono, fontSize: 9, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.4 }}>{w.l}</span>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8 }}>
              <span style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 500, color: D.textLight, lineHeight: 1.35 }}>Same athlete, same week, three answers. All estimates.</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 500, color: D.textLight, lineHeight: 1.35 }}>Zones are worse: 220 − age, the same heart for every 26-year-old. Her cycle isn't in the model at all.</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 700, color: D.textLight, lineHeight: 1.35, marginTop: 6 }}>The result: whole seasons ground out in the dead zone. Too hard to build the base, too easy to raise the ceiling. <span style={{ color: D.coral }}>Complete fixes this.</span></span>
            </div>
          </div>
          <div style={{ padding: '24px 24px', display: 'flex', flexDirection: 'column', gap: 10 }}>
            <span style={{ fontFamily: D.fontMono, fontSize: 54, fontWeight: 700, color: D.textLight, letterSpacing: -2, lineHeight: 1 }}>04</span>
            <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>PERFORMANCE TESTING</span>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 6 }}>
              <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 700, color: D.textLight, lineHeight: 1.35 }}>Real performance testing exists.</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textLight, lineHeight: 1.35 }}>Actual athletes live by it: tested four times a season.</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textLight, lineHeight: 1.35 }}>The consumer has no easy, digital access.</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 }}>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>
  );
}

// 04: Why now (skippable). New 08-25 (evening): based on RL_WhyNow
// (V04RedlineSlides.jsx), restored to core per Paul's wave-2 decision. Header
// kicker removed (sweep), adds a bold "even more of an issue for women" line
// on the knowing-doing gap.
function V05_WhyNow({ number, total }) {
  const 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 · 2026' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Why now">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: D.fontSans, fontSize: 72, fontWeight: 700, letterSpacing: -2.5, lineHeight: 1.0, margin: 0, color: D.textLight }}>
          Everyone measures. <span style={{ color: D.textSecLight }}>Nothing moves.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 25, fontWeight: 500, color: D.textSecLight, margin: '20px 0 0 0', letterSpacing: -0.3, maxWidth: 1680, lineHeight: 1.3 }}>
          A decade of capital taught millions to pay to know their body. <span style={{ color: D.textLight, fontWeight: 700 }}>Knowing changed nothing.</span>
        </p>

        <div style={{ flex: 1, marginTop: 36, display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 0, border: `1px solid ${D.borderLight}` }}>
          <div style={{ padding: '32px 36px', display: 'flex', flexDirection: 'column', borderRight: `1px solid ${D.borderLight}` }}>
            <SLabel color={D.textLight}>The wave · built the market</SLabel>
            <div style={{ flex: 1, marginTop: 18, display: 'flex', flexDirection: 'column' }}>
              {stats.map((st, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 6, borderTop: `1px solid ${D.borderLight}` }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
                    <span style={{ fontFamily: D.fontMono, fontSize: 54, fontWeight: 700, color: D.textLight, letterSpacing: -1.5, 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: 16, fontWeight: 500, color: D.textSecLight, lineHeight: 1.3 }}>{st.d}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ padding: '32px 36px', display: 'flex', flexDirection: 'column', gap: 20, justifyContent: 'center' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <SLabel color={D.textLight}>The knowing-doing gap</SLabel>
              <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.coral, letterSpacing: 1 }}>WIDE OPEN</span>
            </div>
            <span style={{ fontFamily: D.fontSans, fontSize: 44, fontWeight: 700, color: D.coral, letterSpacing: -1, lineHeight: 1.1 }}>"Recovery is low. Now what?"</span>
            <span style={{ fontFamily: D.fontSans, fontSize: 21, fontWeight: 500, color: D.textSecLight, lineHeight: 1.4 }}>Nothing converts the number into today's session. Knowing was never the hard part. Acting is. <span style={{ color: D.textLight, fontWeight: 700 }}>Even more of an issue for women:</span> the models are built on male data, so the number is even less actionable.</span>
            <span style={{ fontFamily: D.fontSans, fontSize: 21, fontWeight: 700, color: D.textLight, letterSpacing: -0.2, lineHeight: 1.4, borderTop: `1px solid ${D.borderLight}`, paddingTop: 18 }}>Complete closes it: your numbers rewrite tomorrow's training.</span>
          </div>
        </div>

        <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 }}>Everyone sells you knowing. <span style={{ color: D.coral }}>Complete closes the gap, and nobody closes it socially.</span></span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>KNOWING → DOING</span>
        </div>
      </div>
    </Slide>
  );
}

// 05: Product, social-first. Reworked 08-25: headline pivots to "built like a
// skill tree"; the right panel becomes a breadth panel (63 live Roads) instead
// of a narrow "also chasing" list; the wedge case stays on V05_Beachhead.
function V05_Product({ number, total }) {
  const TIER = { elite: '#FFB3C6', platinum: D.coral, gold: '#707070', silver: '#9A9A9A', bronze: '#B5B5B5', muted: '#888888' };
  const rungs = [
    { tier: 'ELITE',    label: 'Elite Aerobic',  th: '≥55', sw: TIER.elite,    you: true,  cleared: false, cohort: ['JK', 'ML'],       more: 5, rank: 'TOP 24%', sub: '61.3 · LAB' },
    { tier: 'PLATINUM', label: 'High Performer', th: '≥50', sw: TIER.platinum, you: false, cleared: true,  cohort: ['SV', 'TN', 'AR'], more: 5 },
    { tier: 'GOLD',     label: 'Strong Engine',  th: '≥45', sw: TIER.gold,     you: false, cleared: true,  cohort: ['DM', 'LP'],       more: 4 },
    { tier: 'SILVER',   label: 'Fit',            th: '≥38', sw: TIER.silver,   you: false, cleared: true,  cohort: ['RK', 'JB', 'EM'], more: 0 },
    { tier: 'BRONZE',   label: 'Active',         th: '≥30', sw: TIER.bronze,   you: false, cleared: true,  cohort: ['NF', 'EW'],       more: 0 },
  ];
  const roads = [
    { t: 'VO₂MAX', sub: null },
    { t: '10K RUNNING', sub: null },
    { t: 'MARATHON', sub: null },
    { t: 'HYROX', sub: null },
    { t: 'STEPS', sub: null },
    { t: 'HIP THRUST × BODYWEIGHT', sub: null },
    { t: 'DEAD HANG', sub: null },
    { t: 'PADEL RATING', sub: null },
    { t: 'GOLF HANDICAP', sub: null },
    { t: 'WEEKLY CHALLENGES', sub: null },
  ];
  const hooks = [
    { t: 'THE FEED',       b: 'Every session shareable: runs, lifts, Hyrox, padel, yoga, pilates, golf. Any sport.' },
    { 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: 'REAL RUNGS',     b: 'The ladder runs on measured numbers, not vibes. Hit a rung, it\'s true.' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Product">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: D.fontSans, fontSize: 74, fontWeight: 700, letterSpacing: -3, lineHeight: 1.0, margin: 0, color: D.textLight, whiteSpace: 'nowrap' }}>
          Social fitness. <span style={{ color: D.textSecLight }}>Built like a skill tree.</span>
        </h1>

        <p style={{ fontFamily: D.fontSans, fontSize: 23, fontWeight: 500, color: D.textSecLight, margin: '18px 0 0 0', letterSpacing: -0.3, maxWidth: 1620, 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, climbed with your friends, <span style={{ color: D.textLight, fontWeight: 700 }}>on measured numbers.</span>
        </p>

        <div style={{ flex: 1, marginTop: 24, display: 'grid', gridTemplateColumns: '1.45fr 1fr', gap: 28, minHeight: 0 }}>
          <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 34</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 }}>ELITE · 8 OF 34 ON THIS RUNG</span></span>
              <span style={{ color: D.textLight, letterSpacing: 1, whiteSpace: 'nowrap' }}>YOUR MEASURED VO₂MAX · THE NUMBER YOU CLIMB</span>
            </div>
          </div>

          <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 }}>EVERY SPORT IS A ROAD · 63 LIVE</div>
            <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}>
              {roads.map((r, i) => (
                <div key={i} style={{
                  padding: '14px 22px', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 4,
                  borderRight: i % 2 === 0 ? `1px solid ${D.borderLight}` : 'none',
                  borderBottom: i < roads.length - 2 ? `1px solid ${D.borderLight}` : 'none',
                }}>
                  <span style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 700, color: D.textLight, letterSpacing: -0.2, lineHeight: 1.2 }}>{r.t}</span>
                  {r.sub ? <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>{r.sub}</span> : null}
                </div>
              ))}
            </div>
          </div>
        </div>

        <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 }}>Competition gets people out the door. <span style={{ color: D.coral }}>Rungs to climb, friends to chase: that is why they keep training.</span></span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>WHY IT STICKS</span>
        </div>
      </div>
    </Slide>
  );
}

// 05: Solution. Copied from S03_Solution (CoreSlides.jsx); sub-paragraph
// replaced per Paul 2026-08-25 (Olympian framing: n=1, for life, not a race).
// Archetype grid + closing band unchanged.
function V05_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, for life.</span> You don't need a race. An Olympian doesn't train for next week's meet; they train for the Games, four years out. And the body that runs your marathon is the body that plays padel on Saturday. <span style={{ color: D.textLight, fontWeight: 700 }}>One body. n=1, for life.</span>
        </p>

        <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, strength, a 10K · 63 Roads live', 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 training philosophies 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>
  );
}

// 06: The measurement loop. Edited 08-25: step 02 drops the €50 figure (our
// cost, never published) in favor of a plan-tier framing; step 04 broadens
// from "the plan adapts" to the whole app retuning; capital-light box gets a
// "Yet." hedge; boxes row grows to three (adds THE MOMENT). Edited again
// 08-25 (evening): step 02 rewritten, THE MOMENT box drops the carbon-shoes
// sentence (now lives on V05_Problem's closer band).
function V05_MeasurementLoop({ number, total }) {
  const steps = [
    { n: '01', k: 'FREE · YOUR HISTORY',   t: 'Best estimate, day one', b: 'We read every run you\'ve ever logged and estimate your zones better than 220 − age ever could.' },
    { n: '02', k: 'COMPLETE TEST · INCLUDED', t: 'A test anyone can run', b: 'Guided in the app, athlete-grade math. Included in the paid plan.' },
    { n: '03', k: 'LAB TRUTH · INCLUDED',  t: 'The real number',        b: '€250 standalone at partner labs, included in €249 Premium. The test pays for the subscription.' },
    { n: '04', k: 'THE APP ADAPTS',        t: 'Everything rewrites',    b: 'Not just the plan: zones, Roads, recovery, the coach. The whole app retunes to the measurement.' },
    { n: '05', k: 'RETEST · 3–6 MONTHS',   t: 'The number moves',       b: 'You watch your VO₂max climb the Road. Then the loop runs again.', coral: true },
  ];
  const boxes = [
    { k: 'CAPITAL-LIGHT', t: 'Partner labs run the tests. First Berlin lab signed, first athlete tests underway. No clinics on our balance sheet. Yet.' },
    { k: 'THE MOMENT', t: 'Performance testing today is blood testing five years ago: everyone who trains seriously will do it.' },
    { k: 'WHY NOBODY ELSE CLOSES IT', t: 'Wearables estimate once and drift. Labs hand you a PDF and never call back. Nobody re-measures you on a cadence and retrains you on the result.' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Truth layer">
      <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 }}>
          Test. Train. <span style={{ color: D.coral }}>Retest.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 500, marginTop: 18, marginBottom: 0, color: D.textSecLight, maxWidth: 1680, lineHeight: 1.3 }}>
          Three doors into your real numbers: free, self-test, or the full lab. <span style={{ color: D.textLight, fontWeight: 700 }}>Then the part nobody else does: every 3–6 months you retest, and the plan retrains you on what actually changed.</span>
        </p>

        <div style={{ flex: 1, marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              padding: '28px 24px', display: 'flex', flexDirection: 'column', gap: 12,
              borderRight: i !== steps.length - 1 ? `1px solid ${D.borderLight}` : 'none',
              background: s.coral ? D.textLight : 'transparent',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: s.coral ? D.coral : D.textSecLight, letterSpacing: 1 }}>{s.n}</span>
                {i < steps.length - 1 && (
                  <span style={{ fontFamily: D.fontMono, fontSize: 18, fontWeight: 700, color: s.coral ? D.bgLight : D.textSecLight }}>→</span>
                )}
                {i === steps.length - 1 && (
                  <span style={{ fontFamily: D.fontMono, fontSize: 18, fontWeight: 700, color: D.coral }}>↺ 01</span>
                )}
              </div>
              <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: s.coral ? D.coral : D.textLight, letterSpacing: 0.8 }}>{s.k}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 27, fontWeight: 700, color: s.coral ? D.bgLight : D.textLight, letterSpacing: -0.6, lineHeight: 1.1 }}>{s.t}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 500, color: s.coral ? D.bgLight : D.textSecLight, lineHeight: 1.4, opacity: s.coral ? 0.85 : 1 }}>{s.b}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {boxes.map((b, i) => (
            <div key={i} style={{ border: `1px solid ${D.borderLight}`, padding: '16px 24px', display: 'flex', flexDirection: 'column', gap: 4 }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{b.k}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, color: D.textLight, letterSpacing: -0.2, lineHeight: 1.3 }}>{b.t}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 16, 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 }}>Free to be social. <span style={{ color: D.coral }}>Paid to get faster.</span></span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>RETEST EVERY 3–6 MONTHS</span>
        </div>
      </div>
    </Slide>
  );
}

// 07: Beachhead. Copied from RL_Beachhead (V04RedlineSlides.jsx). Expansion
// rail edited 08-25: blood markers promoted from NEXT to LIVE (blood import
// already ships), and cycling + triathlon added as the new NEXT step, gated
// on Hyrox being owned first.
function V05_Beachhead({ number, total }) {
  const HYROX_STAT = { v: '1.5M+', d: 'athletes in the 2025/26 season, more than doubling again; 2M+ projected next season', s: 'HYROX · 2026' };
  const HYROX_REV = { v: '€40M → €200M+', d: 'revenue 2023 → 2026E. Participation ~2.3×, revenue ~3.5×: spend per athlete is rising.', s: 'REPORTED · 2026' };
  const rail = [
    { k: 'NOW',  t: 'Hyrox · half · full marathon', d: 'Personalized plans, live in the app today.' },
    { k: 'LIVE', t: 'Blood',                         d: 'Panels already in the app: ships today, not a promise.' },
    { k: 'NEXT', t: 'Cycling + triathlon',           d: '2027 · once Hyrox is owned.' },
    { k: 'THEN', t: 'DNA · glucose',                 d: 'The deeper biomarker stack.' },
    { k: 'LONG', t: 'Life events + longevity',       d: 'The whole-body record.' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Beachhead">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: D.fontSans, fontSize: 88, fontWeight: 700, letterSpacing: -3, lineHeight: 1.0, margin: 0, color: D.textLight }}>
          Hyrox + marathon <span style={{ color: D.textSecLight }}>first.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 500, color: D.textSecLight, margin: '18px 0 0 0', letterSpacing: -0.3, maxWidth: 1680, lineHeight: 1.3 }}>
          A market compounding on both axes: <span style={{ color: D.textLight, fontWeight: 700 }}>more athletes every season, each spending more.</span>
        </p>

        <div style={{ flex: 1, marginTop: 32, display: 'flex', gap: 28 }}>
          <div style={{ flex: 1.05, border: `1px solid ${D.borderLight}`, padding: '28px 34px', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <SLabel color={D.textLight}>Hyrox</SLabel>
              <span style={{ fontFamily: D.fontMono, fontSize: 10, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>{HYROX_STAT.s}</span>
            </div>
            <span style={{ fontFamily: D.fontMono, fontSize: 96, fontWeight: 700, color: D.coral, lineHeight: 0.85, letterSpacing: -5 }}>{HYROX_STAT.v}</span>
            <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textSecLight, lineHeight: 1.35 }}>{HYROX_STAT.d}. Concentrated at every regional. The founder races Pro.</span>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: `1px solid ${D.borderLight}`, paddingTop: 12, marginTop: 4 }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 30, fontWeight: 700, color: D.textLight, letterSpacing: -0.8, lineHeight: 1 }}>{HYROX_REV.v}</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 10, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>{HYROX_REV.s}</span>
            </div>
            <span style={{ fontFamily: D.fontSans, fontSize: 15, fontWeight: 500, color: D.textSecLight, lineHeight: 1.35 }}>{HYROX_REV.d}</span>
            <div style={{ flex: 1 }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: `1px solid ${D.borderLight}`, paddingTop: 16 }}>
              <SLabel color={D.textLight}>Marathon</SLabel>
              <span style={{ fontFamily: D.fontMono, fontSize: 10, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>LONDON · 2026 BALLOT</span>
            </div>
            <span style={{ fontFamily: D.fontMono, fontSize: 96, fontWeight: 700, color: D.coral, lineHeight: 0.85, letterSpacing: -5 }}>1.1M+</span>
            <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textSecLight, lineHeight: 1.35 }}>ballot entries for one race, a world record and a third straight one. Demand outruns the start line.</span>
            <div style={{ flex: 1 }} />
            <span style={{ fontFamily: D.fontSans, fontSize: 20, fontWeight: 700, color: D.textLight, letterSpacing: -0.3, lineHeight: 1.3, borderTop: `1px solid ${D.borderLight}`, paddingTop: 16 }}>€1,500+ a year already spent on the sport. Plans alone are a business.</span>
          </div>
          <div style={{ flex: 1.35, display: 'flex', flexDirection: 'column', border: `1px solid ${D.borderLight}` }}>
            <div style={{ padding: '12px 24px', borderBottom: `1px solid ${D.borderLight}`, fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>THE EXPANSION ARC · EACH ONE ONLY WHEN THE TIME IS RIGHT</div>
            {rail.map((r, i) => (
              <div key={i} style={{ flex: 1, display: 'grid', gridTemplateColumns: '0.5fr 1.4fr 1.6fr', gap: 0, alignItems: 'center', padding: '0 24px', borderBottom: i !== rail.length - 1 ? `1px solid ${D.borderLight}` : 'none', background: i === 0 ? '#CFCFCF' : 'transparent' }}>
                <span style={{ fontFamily: D.fontMono, fontSize: 15, fontWeight: 700, color: D.textLight, letterSpacing: 0.6 }}>{r.k}</span>
                <span style={{ fontFamily: D.fontSans, fontSize: 26, fontWeight: 700, color: D.textLight, letterSpacing: -0.4 }}>{r.t}</span>
                <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textSecLight, lineHeight: 1.3 }}>{r.d}</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 }}>"12 weeks to Berlin. Do you know your paces?" <span style={{ color: D.coral }}>Win the racer, keep the human.</span></span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>BEACHHEAD → EXPANSION</span>
        </div>
      </div>
    </Slide>
  );
}

// 08: How we grow. Copied from RL_HowWeGrow (V04RedlineSlides.jsx). Token
// closer dropped entirely per Paul 2026-08-25; adds a MEDIA-FOR-EQUITY block
// (established creators take equity, distribution without burn) and a ROAD
// TO HYROX content-engine block (funded by this raise).
function V05_HowWeGrow({ number, total }) {
  const channels = [
    {
      n: '01', kicker: 'REACH · ATHLETES', title: 'Sign them before they\'re stars',
      lede: 'The Jordan playbook.',
      lines: [
        'Hybrid athletes signed early: exposure and product, unlocked by hitting metrics.',
        'The niche grows, they grow, we own the faces.',
      ],
      tag: 'FOUNDER RACES PRO',
    },
    {
      n: '02', kicker: 'PROOF · OVERLAYS', title: 'Overlays made for everyone',
      lede: 'Every user a billboard.',
      lines: [
        'Every finished session renders a share-ready overlay.',
        'Posted proof recruits the next athlete. Zero paid acquisition.',
      ],
      tag: 'SHIPPED · IN APP',
    },
    {
      n: '03', kicker: 'HOME · COMMUNITY', title: 'The hybrid home',
      lede: 'Strength + running, unserved.',
      lines: [
        'Run clubs run. Gyms lift. Hybrid athletes have no home.',
        'Monthly in-app challenges and leaderboards make Complete theirs.',
      ],
      tag: 'MONTHLY CHALLENGES',
    },
  ];
  const boxes = [
    { k: 'MEDIA-FOR-EQUITY', t: 'Established creators take equity, not cash. Distribution without burn: everybody can build an app; not everybody has distribution.' },
    { k: 'ROAD TO HYROX · THE CONTENT ENGINE', t: 'We film athletes training on Complete: Road to Hyrox, Road to Berlin. A content engine around the product. Part of what this raise funds.' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Growth">
      <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 }}>
          The workout <span style={{ color: D.textSecLight }}>is the marketing.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 25, fontWeight: 500, marginTop: 20, marginBottom: 0, color: D.textSecLight, maxWidth: 1620, lineHeight: 1.3 }}>
          Every session produces something worth posting. <span style={{ color: D.textLight, fontWeight: 700 }}>Three channels, one loop: social proof compounds.</span>
        </p>

        <div style={{ flex: 1, marginTop: 24, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {channels.map((d, i) => (
            <div key={i} style={{
              padding: '24px 30px', display: 'flex', flexDirection: 'column', gap: 12,
              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 }}>{d.n}</span>
                <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>{d.kicker}</span>
              </div>
              <span style={{ fontFamily: D.fontSans, fontSize: 32, fontWeight: 700, color: D.textLight, letterSpacing: -0.7, lineHeight: 1.05 }}>{d.title}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 19, fontWeight: 700, color: D.coral, letterSpacing: -0.2 }}>{d.lede}</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 4 }}>
                {d.lines.map((line, j) => (
                  <span key={j} style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 500, color: D.textSecLight, lineHeight: 1.4 }}>{line}</span>
                ))}
              </div>
              <div style={{ flex: 1 }} />
              <div style={{ paddingTop: 12, borderTop: `1px solid ${D.borderLight}`, fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textLight, letterSpacing: 1 }}>
                {d.tag}
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {boxes.map((b, i) => (
            <div key={i} style={{ border: `1px solid ${D.borderLight}`, padding: '16px 24px', display: 'flex', flexDirection: 'column', gap: 4 }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{b.k}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, color: D.textLight, letterSpacing: -0.2, lineHeight: 1.3 }}>{b.t}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 16, 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 }}>Every session is proof, posted for free. <span style={{ color: D.coral }}>Athletes and creators grow it with us.</span></span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>GROWTH ENGINE</span>
        </div>
      </div>
    </Slide>
  );
}

// 09: Axes. New 08-25: a 2x2 quadrant (estimated<->measured, single-player
// <->social) replacing the bundle-matrix table as the core competitive slide.
// Complete owns the top-right (measured + social); the table itself moves to
// the appendix as V05_Competition.
function V05_Axes({ number, total }) {
  const cellBase = { padding: '28px 32px', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 10 };
  return (
    <Slide number={number} total={total} dark={false} label="Axes">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: D.fontSans, fontSize: 82, fontWeight: 700, letterSpacing: -3, lineHeight: 1.0, margin: 0, color: D.textLight }}>
          Two axes matter. <span style={{ color: D.textSecLight }}>One app holds both.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 22, fontWeight: 500, color: D.textSecLight, margin: '16px 0 0 0', letterSpacing: -0.3, maxWidth: 1680, lineHeight: 1.3 }}>
          Are the numbers measured, and are your friends on it? <span style={{ color: D.textLight, fontWeight: 700 }}>Everyone else picks one axis.</span>
        </p>

        <div style={{ flex: 1, marginTop: 26, display: 'flex', border: `1px solid ${D.borderLight}` }}>
          <div style={{ width: 64, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', alignItems: 'center', borderRight: `1px solid ${D.borderLight}`, padding: '20px 0' }}>
            <span style={{ fontFamily: D.fontMono, fontSize: 17, fontWeight: 700, color: D.textLight, letterSpacing: 2, writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>SOCIAL</span>
            <span style={{ fontFamily: D.fontMono, fontSize: 17, fontWeight: 700, color: D.textLight, letterSpacing: 2, writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>SINGLE-PLAYER</span>
          </div>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 24px', borderBottom: `1px solid ${D.borderLight}` }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 17, fontWeight: 700, color: D.textLight, letterSpacing: 1.5 }}>ESTIMATED</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 17, fontWeight: 700, color: D.textLight, letterSpacing: 1.5 }}>MEASURED</span>
            </div>
            <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', borderBottom: `1px solid ${D.borderLight}` }}>
              <div style={{ ...cellBase, borderRight: `1px solid ${D.borderLight}` }}>
                <span style={{ fontFamily: D.fontSans, fontSize: 30, fontWeight: 700, color: D.textLight, letterSpacing: -0.6 }}>STRAVA</span>
                <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>CARDIO ONLY</span>
              </div>
              <div style={{ ...cellBase, background: D.coral }}>
                <span style={{ fontFamily: D.fontSans, fontSize: 56, fontWeight: 700, color: D.textLight, letterSpacing: -2, lineHeight: 1 }}>COMPLETE</span>
                <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textLight, letterSpacing: 0.8 }}>EVERY SPORT, MEASURED</span>
              </div>
            </div>
            <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
              <div style={{ ...cellBase, borderRight: `1px solid ${D.borderLight}` }}>
                <span style={{ fontFamily: D.fontSans, fontSize: 26, fontWeight: 700, color: D.textLight, letterSpacing: -0.4 }}>WEARABLES + AI PLANS</span>
                <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>WHOOP · OURA · GARMIN · RUNNA</span>
              </div>
              <div style={cellBase}>
                <span style={{ fontFamily: D.fontSans, fontSize: 30, fontWeight: 700, color: D.textLight, letterSpacing: -0.6 }}>LABS &amp; CLINICS</span>
                <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>A PDF, ONCE</span>
              </div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 16, border: `1px solid ${D.borderLight}`, padding: '16px 24px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>THE MOAT</span>
          <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, color: D.textLight, letterSpacing: -0.2, lineHeight: 1.3 }}>Every tested athlete feeds the engine, nobody else has built the social layer, and no software-only player will build the physical one.</span>
        </div>

        <div style={{ marginTop: 16, 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 }}>Everyone sells you a piece. <span style={{ color: D.coral }}>Complete is alone where the axes meet.</span></span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>THE QUADRANT</span>
        </div>
      </div>
    </Slide>
  );
}

// 11: Product · live. New 08-25 (evening), base RE_ProductLive
// (RestlessEggCompactSlides.jsx). Kicker removed (sweep). Adds a compact
// traction strip (4,443 progressions moved here from V05_Product; 79/101 and
// 57/101 verified against docs/v05-spec.md "Revision wave 2" line 37, the
// 08-20 prod baseline, not requeried: both sources already agree).
function V05_ProductLive({ number, total }) {
  const phones = [
    { src: 'assets/re-social.png', label: 'Social', accent: true },
    { src: 'assets/re-plan.png', label: 'Training Plan' },
    { src: 'assets/re-coach.png', label: 'Coach' },
    { src: 'assets/re-progress.png', label: 'Progress' },
    { src: 'assets/re-profile.png', label: 'Workouts' },
    { src: 'assets/re-leaderboard.png', label: 'Leaderboard' },
    { src: 'assets/re-vo2ladder.png', label: 'VO₂max' },
  ];
  const stats = [
    { v: '4,443', d: 'Road progressions logged in 30 days' },
    { v: '57 / 101', d: 'users on a Road' },
    { v: '79 / 101', d: 'users took a social action' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Product · live">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <REHead>Live on TestFlight today.</REHead>
        <RESub>Used daily by a friends-and-family alpha: personalised training, an AI coach, progress and longevity tracking, and a real social feed they post to.</RESub>

        <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {stats.map((s, i) => (
            <div key={i} style={{ padding: '14px 22px', display: 'flex', alignItems: 'baseline', gap: 12, borderRight: i < 2 ? `1px solid ${D.borderLight}` : 'none' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 30, fontWeight: 700, color: D.coral, letterSpacing: -0.6 }}>{s.v}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 15, fontWeight: 500, color: D.textSecLight, lineHeight: 1.3 }}>{s.d}</span>
            </div>
          ))}
        </div>

        <div style={{ flex: 1, marginTop: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 18 }}>
          {phones.map((p, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <REPhone src={p.src} h={440} accent={p.accent} />
              <div style={{ width: '100%', borderTop: `1px solid ${p.accent ? D.coral : D.borderLight}`, paddingTop: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textLight, letterSpacing: 0.8, textTransform: 'uppercase' }}>{p.label}</span>
                {p.accent && <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.coral, letterSpacing: 0.6 }}>LIVE</span>}
              </div>
            </div>
          ))}
        </div>

      </div>
    </Slide>
  );
}

// 12: Vision, once, before the ask. Edited 08-25: beats get mono status
// stamps, an ecosystem strip is added above the closer, and the sub-paragraph
// gets a "community first" line (Paul: build the community, it decides what
// we sell next).
function V05_Vision({ number, total }) {
  const beats = [
    { t: 'Every sport',         d: 'Today. Hyrox, marathon, gym, padel: one social layer, one measured engine.', stamp: 'IN PROGRESS · NOW' },
    { t: 'Every stage of life', d: 'Her cycle and hormones in the model. Pregnancy, return from injury, your parents\' first plan.', stamp: '2027' },
    { t: 'The longevity superapp', d: 'Blood, DNA, wearables, testing: one health brain for your body, across every year of it.', stamp: 'END 2027 →' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Vision">
      <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 }}>
          Everything so far is one race season. The engine underneath is built for a whole life. <span style={{ color: D.textLight, fontWeight: 700 }}>Build the community first: once it trusts us, there is a lot we can sell it.</span>
        </p>

        <div style={{ flex: 1, marginTop: 28, display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 56, alignItems: 'stretch' }}>
          <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 well 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 }}>
              The race number and the longevity number are the same number. We already measure it.
            </span>
          </div>

          <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 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
                    <span style={{ fontFamily: D.fontSans, fontSize: 44, fontWeight: 700, color: i === beats.length - 1 ? D.coral : D.textLight, letterSpacing: -1.2, lineHeight: 1 }}>{b.t}</span>
                    <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: i === beats.length - 1 ? D.coral : D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap' }}>{b.stamp}</span>
                  </div>
                  <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>

        {/* Vision enacted (absorbed from the old core Blueprint slide, Paul 08-25:
            "13 is also vision, vision nr 2, the enactment of the superapp vision"):
            the N=1 contrast + the sell-list live here now; the full Blueprint
            slide stays in the appendix for Q&A. */}
        <div style={{ marginTop: 16, border: `1px solid ${D.borderLight}`, display: 'grid', gridTemplateColumns: 'auto 1fr', alignItems: 'center', gap: 28, padding: '16px 24px' }}>
          <span style={{ fontFamily: D.fontMono, fontSize: 16, fontWeight: 700, color: D.coral, letterSpacing: 1.5, whiteSpace: 'nowrap' }}>N=1, NOT N=BRYAN JOHNSON</span>
          <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 500, color: D.textSecLight, lineHeight: 1.35 }}>
            Complete at <span style={{ color: D.textLight, fontWeight: 700 }}>€249 with a lab test included.</span> Then the add-ons: <span style={{ color: D.textLight, fontWeight: 700 }}>your custom fueling + your custom healthstack, built from your data and your DNA.</span>
          </span>
        </div>

        <div style={{ marginTop: 16, 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>
  );
}

// 13: Ask. Copied from S10_Ask (CoreSlides2.jsx). Use-of-funds item 01
// replaced 08-25: the mobile testing rig is dropped (not doing it) for the
// Road-to-Hyrox content engine, which is what this raise actually funds.
function V05_Ask({ number, total }) {
  return (
    <Slide number={number} total={total} dark={false} label="Ask">
      <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 }}>
          €500K <span style={{ color: D.textSecLight }}>on a SAFE.</span>
        </h1>

        <p style={{ fontFamily: D.fontSans, fontSize: 26, fontWeight: 500, margin: '22px 0 0 0', color: D.textSecLight, letterSpacing: -0.2, maxWidth: 1620 }}>
          24 months to prove the wedge in Berlin, <span style={{ color: D.textLight, fontWeight: 700 }}>plus the first hire: a health-data and medicine lead.</span> Candidates already being scoped.
        </p>

        <div style={{ flex: 1, marginTop: 18, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>
          <div style={{ border: `1px solid ${D.borderLight}`, padding: '18px 22px', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <SLabel color={D.textLight}>The round</SLabel>
              <span style={{ fontFamily: D.fontMono, fontSize: 10, color: D.textSecLight, letterSpacing: 0.6 }}>SAFE</span>
            </div>
            <div style={{ marginTop: 14, paddingBottom: 12, borderBottom: `1px solid ${D.borderLight}`, display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 56, fontWeight: 700, color: D.coral, letterSpacing: -2, lineHeight: 0.9 }}>€50K</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textLight, letterSpacing: 1 }}>ANGEL SOFT COMMITS · IN</span>
            </div>
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
              {[
                ['Lead', 'Looking for the lead to close it out.'],
                ['Timeline', 'The company incorporates in October 2026. The raise opens with it.'],
                ['Structure', 'SAFE, valued at the next priced round.'],
              ].map(([k, v], i, arr) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '10px 0', borderBottom: i === arr.length - 1 ? 'none' : `1px solid ${D.borderLight}` }}>
                  <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{k.toUpperCase()}</span>
                  <div style={{ marginTop: 4, fontFamily: D.fontSans, fontSize: 15, fontWeight: 500, color: D.textLight, lineHeight: 1.3, letterSpacing: -0.1 }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 14, paddingTop: 12, borderTop: `1px solid ${D.borderLight}`, display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>ANGELS FIRST · NO VCs ON THE CAP TABLE</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 15, fontWeight: 700, color: D.textLight, letterSpacing: -0.1, lineHeight: 1.3 }}>Happy to split it: <span style={{ color: D.coral }}>cash from investors, equity to creators and influencers who bring distribution.</span></span>
            </div>
          </div>

          <div style={{ border: `1px solid ${D.borderLight}`, padding: '18px 22px', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <SLabel color={D.textLight}>Monthly burn</SLabel>
              <span style={{ fontFamily: D.fontMono, fontSize: 10, fontWeight: 700, color: D.coral, letterSpacing: 0.6 }}>WORKING ASSUMPTIONS</span>
            </div>

            <div style={{ marginTop: 12, padding: '8px 0', borderTop: `1px solid ${D.borderLight}`, borderBottom: `1px solid ${D.borderLight}`, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>TODAY · SELF-FUNDED</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 20, fontWeight: 700, color: D.textLight, letterSpacing: -0.4 }}>€0</span>
            </div>

            <div style={{ marginTop: 12, fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>RAISE · €500K / 24 MO · AVERAGE MONTHLY</div>

            <div style={{ marginTop: 4, display: 'flex', flexDirection: 'column' }}>
              {[
                ['Founder', '€4.5K'],
                ['First hire, health data', '€5.5K'],
                ['Product / contract', '€3.5K'],
                ['Testing ops', '€2.5K'],
                ['Marketing + race pop-ups', '€3.0K'],
                ['Infra / tools', '€1.0K'],
                ['Legal / misc', '€0.8K'],
              ].map(([k, v], i, arr) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', borderBottom: i === arr.length - 1 ? 'none' : `1px solid ${D.borderLight}`, fontFamily: D.fontSans, fontSize: 13, fontWeight: 500, color: D.textLight, letterSpacing: -0.1 }}>
                  <span style={{ color: D.textSecLight }}>{k}</span>
                  <span style={{ fontFamily: D.fontMono, fontWeight: 700 }}>{v}</span>
                </div>
              ))}
            </div>

            <div style={{ flex: 1 }} />
            <div style={{ marginTop: 12, paddingTop: 10, borderTop: `1px solid ${D.borderLight}`, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 11, color: D.textSecLight, letterSpacing: 0.6 }}>~€20.8K / MO · 24 MO =</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 20, fontWeight: 700, color: D.textLight, letterSpacing: -0.4 }}>€500K</span>
            </div>
            <div style={{ marginTop: 6, fontFamily: D.fontSans, fontSize: 11, fontStyle: 'italic', color: D.textSecLight, letterSpacing: -0.1 }}>
              Line items are working assumptions, not commitments.
            </div>
          </div>

          <div style={{ border: `1px solid ${D.borderLight}`, padding: '18px 22px', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <SLabel color={D.textLight}>Use of funds</SLabel>
              <span style={{ fontFamily: D.fontMono, fontSize: 10, fontWeight: 700, color: D.coral, letterSpacing: 0.8 }}>WORKING ASSUMPTIONS</span>
            </div>
            <div style={{ marginTop: 12, flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                ['01', 'Content production', 'The Road-to-Hyrox content engine: filming, editing, creator partnerships.'],
                ['02', 'First hire: health data / medicine', 'Builds the measurement-to-protocol systems.'],
                ['03', 'Race pop-up program', 'Testing stations at start lines, pegged to the race calendar. Where the free in-app test meets the paid lab upsell.'],
                ['04', 'Lean ops, 24 months', 'Founder-led, plus the first hire. Product, testing ops, and distribution run lean.'],
              ].map(([n, t, b], i) => (
                <div key={i} style={{ flex: 1, display: 'grid', gridTemplateColumns: '24px 1fr', gap: 8, padding: '8px 0', borderBottom: `1px solid ${D.borderLight}`, alignItems: 'center' }}>
                  <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{n}</span>
                  <div>
                    <div style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 700, color: D.textLight, letterSpacing: -0.2 }}>{t}</div>
                    <div style={{ fontFamily: D.fontSans, fontSize: 13, color: D.textSecLight, lineHeight: 1.35 }}>{b}</div>
                  </div>
                </div>
              ))}
              <span style={{ fontFamily: D.fontSans, fontSize: 15, fontWeight: 500, fontStyle: 'italic', color: D.textSecLight, letterSpacing: -0.1, paddingTop: 4 }}>
                A small round is easier to fill.
              </span>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 22, paddingTop: 16, borderTop: `1px solid ${D.borderLight}`, display: 'grid', gridTemplateColumns: '1.5fr 1fr 0.55fr', gap: 24, alignItems: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div style={{ fontFamily: D.fontSans, fontSize: 22, fontWeight: 700, color: D.textLight, letterSpacing: -0.3, lineHeight: 1.2 }}>
              Movement is the lever. Healthy life is the outcome. Complete is the system.
            </div>
            <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>€5.99/WK · €14.99/MO · €99/YR · €249 PREMIUM INCL. TEST · STOREKIT 2 LIVE</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-end' }}>
            <a href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ0G0PuMUD60aD8HnnMzGmHmGwurTc2E6NFbseJjDFqFxLhJOhzwQCj-g9qi_VMlthf8CMmSHzfH" style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textLight, letterSpacing: 0.8, textDecoration: 'none', borderBottom: `1px solid ${D.textLight}`, paddingBottom: 2 }}>BOOK A MEETING →</a>
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <QRPlaceholder size={110} dark={false} label={false} value="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ0G0PuMUD60aD8HnnMzGmHmGwurTc2E6NFbseJjDFqFxLhJOhzwQCj-g9qi_VMlthf8CMmSHzfH" />
          </div>
        </div>
      </div>
    </Slide>
  );
}

// 15 (appendix): Staged plan. Rebuilt from A7_PhysicalLayer (AppendixSlides.jsx)
// 08-25; its phase content (testing / apparel-timeline / life-centers / token)
// is what the requested edits describe, not S09b_StagedPlan's stage-0..Z table
// (see docs/v05-spec.md "Revision wave 2" for the note). Three phases now:
// testing marked done/live, fuel+apparel merged into one phase at END 2026,
// and the token phase is replaced outright by Complete Life Centers.
function V05_StagedPlan({ number, total }) {
  const phases = [
    {
      n: 'PHASE 1', when: 'live now', title: 'Testing',
      lines: [
        'Lab collaboration in Berlin, unnamed; first paid trials live.',
        'In talks with additional labs.',
        'Premium, €249/yr: one lab test per training block.',
        'Free in-app Complete Test re-anchors race pace, race week.',
      ],
      state: 'DONE · LIVE',
    },
    {
      n: 'PHASE 2', when: 'end 2026 · in work', title: 'Fuel + apparel',
      lines: [
        'Pop-ups, fuel and electrolytes alongside training.',
        'Purpose-made cotton, for lifestyle and movement.',
        'Anti-synthetic gymslop: things that don\'t exist yet.',
      ],
      state: 'IN WORK',
    },
    {
      n: 'PHASE 3', when: 'next round', title: 'Complete Life Centers',
      lines: [
        '1–2 flagship locations, our own longevity clinics.',
        'Gym + recovery + bloodwork + clinic.',
        'The Apple Store of body optimization.',
      ],
      state: 'WHEN SCALE IS EARNED',
    },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Staged plan">
      <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 }}>
          The Complete ecosystem.
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 500, marginTop: 24, color: D.textSecLight, maxWidth: 1660, lineHeight: 1.35 }}>
          Staged, not speculative. Testing runs in Berlin via an unnamed lab collaboration; first paid trials are underway, and we're in talks with additional labs. The lifestyle brand and our own clinics follow: <span style={{ color: D.textLight, fontWeight: 700 }}>each one only when the last has earned it.</span>
        </p>

        <div style={{ flex: 1, marginTop: 36, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {phases.map((p, i) => (
            <div key={i} style={{
              padding: '26px 30px', display: 'flex', flexDirection: 'column', gap: 16,
              borderRight: i < phases.length - 1 ? `1px solid ${D.borderLight}` : 'none',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <SLabel color={D.textLight}>{p.n}</SLabel>
                <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>{p.when.toUpperCase()}</span>
              </div>
              <span style={{ fontFamily: D.fontSans, fontSize: 38, fontWeight: 700, color: D.textLight, letterSpacing: -0.5, lineHeight: 1 }}>{p.title}</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {p.lines.map((line, j) => (
                  <span key={j} style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textSecLight, lineHeight: 1.35 }}>{line}</span>
                ))}
              </div>
              <div style={{ flex: 1 }} />
              <div style={{ paddingTop: 12, borderTop: `1px solid ${D.borderLight}`, fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textLight, letterSpacing: 1 }}>
                {p.state}
              </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 }}>
            Three stages. <span style={{ color: D.coral }}>Each one earns the next.</span>
          </span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>THE PLAN</span>
        </div>
      </div>
    </Slide>
  );
}


// 20 (appendix): Bowerman precedent. RECOVERED VERBATIM from git history:
// commit 667d7fc "feat(deck): merge Why-now + Posture into one Bowerman-
// anchored slide (18→17)", slides/CoreSlides.jsx, function S04_WhyNow (as it
// existed at that commit; later superseded by 977e26c's non-Bowerman rework).
// No helper calls needed adjusting; renamed function + Slide untouched otherwise.
function V05_Bowerman({ number, total }) {
  const cols = [
    { n: '01', label: 'THE PRECEDENT · 1962', lines: [
      'Bowerman brought New Zealand running culture to Oregon.',
      'Wrote Jogging in 1962: made every body an athlete.',
      'Rode the jogging boom to build Nike.',
    ] },
    { n: '02', label: 'THE WAVE · NOW, BIGGER', lines: [
      'Hyrox +140% in a year: 175k → 425k athletes.',
      'Marathons oversubscribed; longevity is culture.',
      'Biomarkers mainstream: Function, Levels.',
    ], accent: "Post-Ozempic, a strong body can't be faked. Being fit is the new status." },
    { n: '03', label: 'BUILDABLE NOW', lines: [
      'AI gives every body a pro-grade n=1 protocol.',
      'HealthKit + wearables: one neutral data layer.',
      'VO₂max predicts lifespan better than any biomarker.',
      "First time it's all buildable, by a tiny team.",
    ] },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Why now">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: D.fontSans, fontSize: 72, fontWeight: 700, letterSpacing: -2.5, lineHeight: 1.03, margin: 0, color: D.textLight }}>
          "If you have a body, <span style={{ color: D.textSecLight }}>you are an athlete."</span>
        </h1>
        <div style={{ marginTop: 12, fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>BILL BOWERMAN · JOGGING · 1962</div>

        <p style={{ fontFamily: D.fontSans, fontSize: 23, fontWeight: 500, color: D.textSecLight, margin: '16px 0 0 0', letterSpacing: -0.3, maxWidth: 1640, lineHeight: 1.3 }}>
          Bowerman rode the jogging boom to build Nike. The fitness × longevity wave is bigger, and <span style={{ color: D.textLight, fontWeight: 700 }}>now it's buildable for every body.</span>
        </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.accent ? (
                  <span style={{ fontFamily: D.fontSans, fontSize: 19, fontWeight: 700, color: D.textLight, letterSpacing: -0.2, lineHeight: 1.35, borderTop: `1px solid ${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 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 22, fontWeight: 700, letterSpacing: -0.3 }}>Bowerman made every body an athlete. Complete makes pro-grade n=1, for every body, for every decade.</span>
        </div>
      </div>
    </Slide>
  );
}

// 13 (core): Blueprint precedent. New 08-25, moved from appendix into the
// core sequence (right after Vision) per Paul's 08-25 evening review. h1
// collapsed to one line; "N=1, NOT N=HIM" promoted out of the header kicker
// (removed there per sweep) into a prominent coral thesis line under the h1:
// it's the thesis of the slide, not a footnote. Closer band keeps its own
// copy of the tag (band kickers are exempt from the sweep); adds a
// WHAT €249 OPENS UP add-ons block.
function V05_Blueprint({ number, total }) {
  return (
    <Slide number={number} total={total} dark={false} label="N=1, not n=him">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: D.fontSans, fontSize: 56, fontWeight: 700, letterSpacing: -2, lineHeight: 1.05, margin: 0, color: D.textLight, whiteSpace: 'nowrap' }}>
          One man measured everything. <span style={{ color: D.textSecLight }}>Then sold you his answer.</span>
        </h1>
        <span style={{ display: 'block', marginTop: 14, fontFamily: D.fontMono, fontSize: 20, fontWeight: 700, color: D.coral, letterSpacing: 2 }}>N=1, NOT N=HIM</span>

        <p style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 500, margin: '20px 0 0 0', color: D.textSecLight, maxWidth: 1560, lineHeight: 1.3 }}>
          Bryan Johnson pours a reported $2M a year into optimising one body, then sells you his protocol. <span style={{ color: D.textLight, fontWeight: 700 }}>We measure yours and build yours.</span>
        </p>

        <div style={{ flex: 1, marginTop: 26, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: `1px solid ${D.borderLight}` }}>
          <div style={{ padding: '26px 32px', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 8, borderRight: `1px solid ${D.borderLight}` }}>
            <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>HIS STACK</span>
            <span style={{ fontFamily: D.fontMono, fontSize: 76, fontWeight: 700, color: D.textLight, letterSpacing: -3, lineHeight: 0.9 }}>€999+</span>
            <span style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 500, color: D.textSecLight, lineHeight: 1.35 }}>Per year. Bryan Johnson's Blueprint protocol, built for one body, not yours.</span>
          </div>
          <div style={{ padding: '26px 32px', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 8, background: D.coral }}>
            <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textLight, letterSpacing: 1 }}>COMPLETE</span>
            <span style={{ fontFamily: D.fontMono, fontSize: 76, fontWeight: 700, color: D.textLight, letterSpacing: -3, lineHeight: 0.9 }}>€249</span>
            <span style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 700, color: D.textLight, lineHeight: 1.35 }}>Per year, with a lab test included. Your protocol, built on your numbers.</span>
          </div>
        </div>

        <div style={{ marginTop: 16, border: `1px solid ${D.borderLight}`, padding: '16px 24px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>WHAT €249 OPENS UP</span>
          <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, color: D.textLight, letterSpacing: -0.2, lineHeight: 1.3 }}>Complete at €249 with a lab test included. Then the add-ons: your custom fueling + your custom healthstack, built from your data and your DNA.</span>
        </div>

        <div style={{ marginTop: 16, 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 }}>He built his own protocol. <span style={{ color: D.coral }}>We build yours, for a fraction of the price.</span></span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>N=1, NOT N=HIM</span>
        </div>
      </div>
    </Slide>
  );
}

// 19 (appendix): Competition, two-axis table. Moved from core to appendix
// 08-25 (V05_Axes takes its place up front); label retitled, content unchanged.
function V05_Competition({ number, total }) {
  const PRICE = { strava: '€75', wearables: '€230–430', blueprint: '€999+', clinics: '€2,000+', complete: '€249' };
  const heads = ['STRAVA', 'WEARABLES', 'BLUEPRINT', 'LONGEVITY CLINICS', 'COMPLETE'];
  const rows = [
    { k: 'PRICE / YR', vals: [PRICE.strava, PRICE.wearables, PRICE.blueprint, PRICE.clinics, PRICE.complete], price: true },
    { k: 'Social · every sport', vals: ['✓ cardio only', 'partial', '—', '—', '✓ all of it'] },
    { k: 'Measured VO₂max + LT', vals: ['—', 'estimated', 'his, not yours', '✓', '✓'] },
    { k: 'Training plan', vals: ['—', '—', 'his protocol', 'rarely', '✓ n=1'] },
    { k: 'Retest cadence', vals: ['—', '—', '—', 'ad hoc', '✓ 3–6 mo'] },
    { k: 'Longevity markers', vals: ['—', 'scores', '✓ his', '✓', '✓ yours'] },
  ];
  const GT = '1.15fr 1fr 1fr 1fr 1.15fr 1.15fr';
  const cell = (v, accent) => ({
    fontFamily: D.fontSans, fontSize: v === '✓' ? 22 : 16, fontWeight: v.startsWith('✓') ? 700 : 500,
    color: accent ? D.coral : (v === '—' ? D.textTer : D.textSecLight), letterSpacing: -0.1, lineHeight: 1.25,
  });
  return (
    <Slide number={number} total={total} dark={false} label="Appendix · The full table">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: D.fontSans, fontSize: 72, fontWeight: 700, letterSpacing: -2.5, lineHeight: 1.0, margin: 0, color: D.textLight }}>
          Everyone sells you a piece. <span style={{ color: D.textSecLight }}>Nobody holds both.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 22, fontWeight: 500, color: D.textSecLight, margin: '16px 0 0 0', letterSpacing: -0.3, maxWidth: 1680, lineHeight: 1.3 }}>
          Two axes matter: are the numbers measured, and are your friends on it? Strava has the friends and fake numbers. Wearables and clinics have numbers and nobody to show. <span style={{ color: D.textLight, fontWeight: 700 }}>Complete is alone in the quadrant that has both.</span>
        </p>

        <div style={{ flex: 1, marginTop: 26, display: 'flex', flexDirection: 'column', border: `1px solid ${D.borderLight}` }}>
          <div style={{ display: 'grid', gridTemplateColumns: GT, borderBottom: `1px solid ${D.borderLight}` }}>
            <div style={{ padding: '14px 20px' }} />
            {heads.map((h, i) => (
              <div key={i} style={{ padding: '16px 18px', borderLeft: `1px solid ${D.borderLight}`, background: i === 4 ? D.textLight : 'transparent' }}>
                <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: i === 4 ? D.coral : D.textLight, letterSpacing: 0.6 }}>{h}</span>
              </div>
            ))}
          </div>
          {rows.map((r, ri) => (
            <div key={ri} style={{ flex: 1, display: 'grid', gridTemplateColumns: GT, borderBottom: ri !== rows.length - 1 ? `1px solid ${D.borderLight}` : 'none', alignItems: 'center' }}>
              <div style={{ padding: '0 20px' }}>
                <span style={{ fontFamily: D.fontSans, fontSize: r.price ? 15 : 17, fontWeight: 700, color: D.textLight, letterSpacing: -0.2 }}>{r.k}</span>
              </div>
              {r.vals.map((v, ci) => (
                <div key={ci} style={{ padding: '0 18px', height: '100%', display: 'flex', alignItems: 'center', borderLeft: `1px solid ${D.borderLight}`, background: ci === 4 ? D.textLight : 'transparent' }}>
                  {r.price ? (
                    <span style={{ fontFamily: D.fontMono, fontSize: ci === 4 ? 22 : 16, fontWeight: 700, color: ci === 4 ? D.coral : D.textLight, letterSpacing: -0.4, lineHeight: 1.15 }}>{v}</span>
                  ) : (
                    <span style={cell(v, ci === 4)}>{v}</span>
                  )}
                </div>
              ))}
            </div>
          ))}
        </div>

        <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 16 }}>
          <div style={{ border: `1px solid ${D.borderLight}`, padding: '16px 24px', display: 'flex', flexDirection: 'column', gap: 4 }}>
            <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>BLUEPRINT</span>
            <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, color: D.textLight, letterSpacing: -0.2, lineHeight: 1.3 }}>Bryan Johnson pours a reported $2M a year into optimising one body, then sells you his protocol. We measure yours and build yours.</span>
          </div>
          <div style={{ border: `1px solid ${D.borderLight}`, padding: '16px 24px', display: 'flex', flexDirection: 'column', gap: 4 }}>
            <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>THE MOAT</span>
            <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, color: D.textLight, letterSpacing: -0.2, lineHeight: 1.3 }}>Every tested athlete feeds the engine, nobody else has built the social layer, and no software-only player will build the physical one.</span>
          </div>
        </div>

        <div style={{ marginTop: 16, 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 democratised blueprint. <span style={{ color: D.coral }}>What clinics charge thousands for, bundled at €249.</span></span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>UNDERCUT + BUNDLE</span>
        </div>
      </div>
    </Slide>
  );
}

Object.assign(window, {
  V05_Title, V05_LastLuxury, V05_Problem, V05_WhyNow, V05_Product, V05_Solution, V05_MeasurementLoop,
  V05_Beachhead, V05_HowWeGrow, V05_Axes, V05_ProductLive, V05_Vision, V05_Ask, V05_StagedPlan, V05_Bowerman, V05_Blueprint, V05_Competition,
});