// V.04 red-line — restructured/merged core slides (Fable-advised, Paul-approved).
// New: RL_WhyNow (lean "what changed"), RL_Beachhead (WhoFirst + expansion, Hyrox lead),
// RL_MoneyMachine (Flywheel + Economics merged), RL_Competition (5-col bundle matrix).
// Loaded after CoreSlides/CoreSlides2/V04Slides, so all primitives exist on window.

// ── FACT-CHECK CONSTANTS — verify against research before investor use ───────
// Hyrox growth headline stats (research pass 2026-07-17: Athletech News,
// hyroxbenelux.com global footprint; revenue arc reported via FT/PE coverage
// of the L Catterton talks — deck cites the trend, not the deal):
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' };
// Competitor annual cost to a consumer (verified 2026):
const PRICE = {
  strava: '€75 / yr',
  wearables: '€200–400 / yr',
  blueprint: '€90–450 / stack',
  clinics: '€8,000–20,000+',
  complete: '€249, test included',
};
// ─────────────────────────────────────────────────────────────────────────────

// 08 — WHY NOW: the wearable wave built a paying market, then stalled at description.
function RL_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' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32 }}>
          <h1 style={{ fontFamily: D.fontSans, fontSize: 72, fontWeight: 700, letterSpacing: -2.5, lineHeight: 1.0, margin: 0, color: D.textLight }}>
            Everyone measures. <span style={{ color: D.textSecLight }}>Nothing moves.</span>
          </h1>
          <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap', paddingBottom: 8 }}>WHY NOW · THE GAP</span>
        </div>
        <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}` }}>
          {/* THE WAVE */}
          <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>
          {/* THE GAP */}
          <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>
            <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. Nobody else does.</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>
  );
}

// 09 — BEACHHEAD → EXPANSION: Hyrox as standalone-viable first attack angle, then the arc.
function RL_Beachhead({ number, total }) {
  const rail = [
    { k: 'NOW', t: 'Hyrox · half · full marathon', d: 'Personalized plans, live in the app today.' },
    { k: 'NEXT', t: 'Blood', d: 'Panels already in the app.' },
    { 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' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32 }}>
          <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>
          <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap', paddingBottom: 8 }}>KNOWN CITY · DATE · AUDIENCE</span>
        </div>
        <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 }}>
          {/* Demand pair: Hyrox + marathon */}
          <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>
          {/* Expansion rail */}
          <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 · WIN THE RACER, KEEP THE HUMAN</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>
  );
}

// 10 — MONEY MACHINE: Flywheel razor/data/blades with the economics numbers embedded.
function RL_MoneyMachine({ number, total }) {
  const cols = [
    { n: '01', kicker: 'RAZOR · THE TEST', t: 'The test is the wedge', b: '€250 going rate standalone. Included in €249/yr Premium. Payback day one.' },
    { n: '02', kicker: 'DATA · THE MOAT', t: 'The data is the empire', b: 'Your n=1 record compounds. More sessions, sharper plan, harder to leave.' },
    { n: '03', kicker: 'BLADES · LOCKED IN', t: 'Only we build yours', b: 'Only we hold your profile, so only we build the right stack.' },
  ];
  const blades = [
    ['01', 'n=1 training', 'software · live'],
    ['02', 'Fuel + electrolytes', 'Berlin'],
    ['03', 'Apparel + racing kit', 'mid'],
    ['04', 'Testing + hardware', 'later'],
  ];
  const nums = [
    ['€100', 'COST PER TEST', 'partner rev-share · working assumption'],
    ['25%', 'TEST → PREMIUM', 'conversion · working assumption'],
    ['2–3×/YR', 'RACE-CYCLE RETESTS', 'testing pegs to the calendar'],
    ['€249', 'PREMIUM · INCL. TEST', 'the razor, priced below the test'],
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Money machine">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32 }}>
          <h1 style={{ fontFamily: D.fontSans, fontSize: 72, fontWeight: 700, letterSpacing: -2.5, lineHeight: 1.0, margin: 0, color: D.textLight }}>
            The test is the wedge. <span style={{ color: D.textSecLight }}>The data is the empire.</span>
          </h1>
          <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap', paddingBottom: 8 }}>SOFTWARE FIRST · CAPITAL-LIGHT</span>
        </div>
        <p style={{ fontFamily: D.fontSans, fontSize: 22, fontWeight: 500, color: D.textSecLight, margin: '14px 0 0 0', letterSpacing: -0.3, maxWidth: 1680, lineHeight: 1.3 }}>
          One test captures data nobody else has. Everything after it is <span style={{ color: D.textLight, fontWeight: 700 }}>personalised, and locked in.</span>
        </p>

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

        {/* Retained economics numbers */}
        <div style={{ flex: 1, marginTop: 16, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {nums.map(([v, k, s], i) => (
            <div key={i} style={{ padding: '22px 24px', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 5, borderRight: i !== 3 ? `1px solid ${D.borderLight}` : 'none', background: i === 3 ? D.textLight : 'transparent' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 64, fontWeight: 700, color: i === 3 ? D.coral : D.textLight, letterSpacing: -2, lineHeight: 1 }}>{v}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 13, fontWeight: 700, color: i === 3 ? D.bgLight : D.textLight, textTransform: 'uppercase', letterSpacing: 0.5, marginTop: 3 }}>{k}</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 10, fontWeight: 700, color: i === 3 ? D.bgLight : D.textSecLight, letterSpacing: 0.4, textTransform: 'uppercase' }}>{s}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 16, padding: '14px 28px', border: `1px solid ${D.borderLight}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 700, color: D.textLight, letterSpacing: -0.2 }}>Every Berlin facility we called: <span style={{ color: D.textSecLight, fontWeight: 500 }}>booked out for months. €250 for a PDF and no plan.</span></span>
          <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap' }}>REAL DEMAND · TODAY</span>
        </div>

        <div style={{ marginTop: 18, 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 test alone costs more than a year of Complete.</span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>MONEY MACHINE</span>
        </div>
      </div>
    </Slide>
  );
}

// 11 — COMPETITION: 5-column bundle matrix. Everyone sells a piece at a premium.
function RL_Competition({ number, total }) {
  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: 'Measured VO₂max + LT', vals: ['—', 'estimated', 'his, not yours', '✓', '✓'] },
    { k: 'Training plan', vals: ['—', '—', 'his protocol', 'rarely', '✓ n=1'] },
    { k: 'AI coach', vals: ['—', '—', '—', 'consult fees', '✓'] },
    { k: 'Social', vals: ['✓', 'partial', '—', '—', '✓'] },
    { 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="Competition">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32 }}>
          <h1 style={{ fontFamily: D.fontSans, fontSize: 72, fontWeight: 700, letterSpacing: -2.5, lineHeight: 1.0, margin: 0, color: D.textLight }}>
            Everyone sells you a piece. <span style={{ color: D.textSecLight }}>At a premium.</span>
          </h1>
          <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap', paddingBottom: 8 }}>THEY ESTIMATE · WE MEASURE</span>
        </div>
        <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 }}>
          Social, wearables, a founder's stack, a clinic. Each sells one slice. <span style={{ color: D.textLight, fontWeight: 700 }}>We measure your body and bundle the whole protocol.</span>
        </p>

        <div style={{ flex: 1, marginTop: 26, display: 'flex', flexDirection: 'column', border: `1px solid ${D.borderLight}` }}>
          {/* header */}
          <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 */}
          {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>

        {/* Blueprint jab + moat */}
        <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, and no software-only player will build the physical testing layer.</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>
  );
}

// KNOWING-DOING GAP — reinstated per Paul's 2026-07-16 review: the wearable
// world solved knowing; nobody converts numbers into the next session. The
// slide is the differentiator beat between Why-now and Solution.
function RL_KnowingDoing({ number, total }) {
  const cols = [
    {
      k: 'KNOWING', state: 'SOLVED', coral: false,
      t: 'You know your numbers.',
      lines: ['Scores, rings, dashboards, readiness.', 'A decade of hardware made your state visible.'],
    },
    {
      k: 'THE GAP', state: 'WIDE OPEN', coral: true,
      t: '"Recovery is low. Now what?"',
      lines: ['Nothing converts the number into today\'s session.', 'Knowing has never been the hard part. Acting is.'],
    },
    {
      k: 'DOING', state: 'COMPLETE', coral: false,
      t: 'The plan changes.',
      lines: ['Your numbers rewrite tomorrow\'s training, automatically.', 'Measured input, adapted output, every day.'],
    },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="The gap">
      <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 }}>
          Knowing <span style={{ color: D.textSecLight }}>isn't doing.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 25, fontWeight: 500, marginTop: 20, marginBottom: 0, color: D.textSecLight, maxWidth: 1680, lineHeight: 1.3 }}>
          The gap between your data and your next session is wide open. <span style={{ color: D.textLight, fontWeight: 700 }}>Nobody closes it. That is the product.</span>
        </p>

        <div style={{ flex: 1, marginTop: 34, display: 'grid', gridTemplateColumns: '1fr 1.3fr 1fr', gap: 24, alignItems: 'stretch' }}>
          {cols.map((c, i) => (
            <div key={i} style={{
              border: `${c.coral ? 2 : 1}px solid ${c.coral ? D.coral : D.borderLight}`,
              padding: '30px 32px', display: 'flex', flexDirection: 'column', gap: 16,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: D.textLight, letterSpacing: 1.5 }}>{c.k}</span>
                <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: c.coral ? D.coral : D.textSecLight, letterSpacing: 1 }}>{c.state}</span>
              </div>
              <span style={{ fontFamily: D.fontSans, fontSize: c.coral ? 46 : 34, fontWeight: 700, color: c.coral ? D.coral : D.textLight, letterSpacing: -1, lineHeight: 1.08 }}>{c.t}</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {c.lines.map((l, j) => (
                  <span key={j} style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 500, color: D.textSecLight, lineHeight: 1.4 }}>{l}</span>
                ))}
              </div>
              <div style={{ flex: 1 }} />
              <div style={{ paddingTop: 14, borderTop: `1px solid ${c.coral ? D.coral : D.borderLight}`, fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: c.coral ? D.coral : D.textSecLight, letterSpacing: 1 }}>
                {i === 0 ? 'EVERY WEARABLE' : i === 1 ? 'WHERE EVERYONE STOPS' : 'ONLY COMPLETE'}
              </div>
            </div>
          ))}
        </div>

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

// 09b — HOW WE GROW: three compounding channels + token closer. Added 2026-07-17
// (gf deck review): the deck answered WHO first (Beachhead) but never HOW we
// reach them. Jordan-model = sign hybrid athletes early, exposure gated on
// metrics, grow with the niche — a growth story with no cash-sponsorship burn.
function RL_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',
    },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Growth">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32 }}>
          <h1 style={{ fontFamily: D.fontSans, fontSize: 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>
          <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap', paddingBottom: 8 }}>HOW WE GROW</span>
        </div>
        <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: 30, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {channels.map((d, i) => (
            <div key={i} style={{
              padding: '28px 32px', display: 'flex', flexDirection: 'column', gap: 14,
              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: 36, fontWeight: 700, color: D.textLight, letterSpacing: -0.8, lineHeight: 1.05 }}>{d.title}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 20, 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: 17, fontWeight: 500, color: D.textSecLight, lineHeight: 1.4 }}>{line}</span>
                ))}
              </div>
              <div style={{ flex: 1 }} />
              <div style={{ paddingTop: 14, 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: '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 }}>Unfair advantage: a second-time token founder. $COMPLETE puts real stakes on every challenge — <span style={{ color: D.coral }}>the bet is the marketing.</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>
  );
}

Object.assign(window, { RL_WhyNow, RL_Beachhead, RL_MoneyMachine, RL_Competition, RL_KnowingDoing, RL_HowWeGrow });