/* Follow-up block — added after the first Samsung meeting.
   Opens the deck: follow-up cover + answers to their three questions + one
   closing point. The original cover follows this block. */

function FollowupCover() {
  const chips = [
    { id: 'q-scope', t: '01 \u00B7 Scope clarity' },
    { id: 'q-rights', t: '02 \u00B7 Usage rights' },
    { id: 'q-perf', t: '03 \u00B7 Performance data' },
    { id: 'q-cleanroom', t: '04 \u00B7 The clean room' },
  ];
  return (
    <section className="section full ink" id="fu-cover" data-rail="Follow-up" data-tone="dark" data-screen-label="Follow-up · Cover"
      style={{ overflow: 'hidden', paddingTop: 120, paddingBottom: 90 }}>
      {/* background orbit, mirrored to the left so the original cover still feels fresh later */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', left: '-15%', top: '52%', transform: 'translateY(-50%)', width: 'min(58vw, 660px)', height: 'min(58vw, 660px)', opacity: 0.55, filter: 'blur(0.4px)' }}>
          <OrbitSVG ring="rgba(255,255,255,0.20)" />
        </div>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 120% at 12% 52%, rgba(145,209,11,0.10) 0%, rgba(145,209,11,0.03) 24%, rgba(0,0,0,0) 46%)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(270deg, var(--ink) 0%, rgba(8,8,8,0.62) 34%, rgba(8,8,8,0) 60%)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(0deg, var(--ink) 0%, rgba(8,8,8,0) 28%, rgba(8,8,8,0) 72%, var(--ink) 100%)' }} />
      </div>
      <div className="wrap" style={{ position: 'relative', zIndex: 2, alignSelf: 'stretch', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 'clamp(40px,8vh,90px)' }}>
        <div>
          <p className="kicker"><Reveal as="span">The follow-up &middot; Flywheel &times; Samsung</Reveal></p>
          <Split tag="h1" className="display" delay={200} text={'Answers at the'} style={{ color: '#fff' }} />
          <Split tag="h1" className="display" delay={360} text={'speed of business.'} style={{ color: '#fff' }} />
        </div>
        <Reveal delay={980}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 'clamp(8px,1.2vw,14px)', flexWrap: 'wrap' }}>
            {chips.map((c) => (
              <a key={c.id} className="chip-pill" href={'#' + c.id} style={{ textDecoration: 'none' }}>{c.t}</a>
            ))}
            <a className="chip-pill" href="#q-eighty" style={{ textDecoration: 'none', borderColor: 'rgba(145,209,11,0.5)', color: 'var(--lime)' }}>+ 20 is not 80</a>
          </div>
        </Reveal>
      </div>
      <div style={{ position: 'absolute', bottom: 34, left: 0, right: 0, display: 'flex', justifyContent: 'center', zIndex: 2 }}>
        <div className="scrollcue" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, color: 'rgba(255,255,255,0.5)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase' }}>
          Scroll
          <span style={{ animation: 'floaty 2s ease-in-out infinite' }}><Ico name="arrowDown" size={18} color="var(--lime)" /></span>
        </div>
      </div>
    </section>
  );
}

function FollowupIntro() {
  const items = [
    { n: '01', id: 'q-scope', t: 'Scope clarity', d: 'This engagement is production, at scale. Origination lives upstream.' },
    { n: '02', id: 'q-rights', t: 'Usage rights', d: 'Cleared upstream, at origination. Production inherits them, already settled.' },
    { n: '03', id: 'q-perf', t: 'Performance data', d: 'Welcome. Feed the system and it learns. Knowledge compounds.' },
    { n: '04', id: 'q-cleanroom', t: 'The clean room', d: 'Fully offline and air-gapped. Local GPUs, open-source models.' },
  ];
  return (
    <section className="section full warm" id="followup" data-rail="Thank you" data-tone="light" data-screen-label="Follow-up · Thank you">
      <div className="wrap">
        <p className="kicker"><Reveal as="span">First, thank you</Reveal></p>
        <Split tag="h2" className="head" text={'It was great to meet you.'} style={{ maxWidth: '16ch' }} />
        <Reveal delay={220} style={{ marginTop: 'clamp(20px,3.2vh,32px)', maxWidth: 720 }}>
          <p className="lead">Sharp questions deserve fast answers. Rather than a recap email, we added them to the front of the deck, so everything lives in one place.</p>
        </Reveal>

        <div style={{ marginTop: 'clamp(36px,6vh,64px)', maxWidth: 860 }}>
          <Reveal><p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--tan-deep)', margin: '0 0 6px' }}>You asked &middot; we answered, in the slides that follow</p></Reveal>
          {items.map((it, i) => (
            <Reveal key={it.n} delay={140 + i * 120} style={{ display: 'block' }}>
              <a href={'#' + it.id} style={{ display: 'grid', gridTemplateColumns: 'auto minmax(140px,0.5fr) 1fr auto', gap: 'clamp(14px,2vw,28px)', alignItems: 'center', padding: 'clamp(16px,2.2vh,22px) 0', borderTop: '1px solid var(--tan-border)', textDecoration: 'none' }}>
                <span className="agenda-n" style={{ fontSize: 'clamp(26px,2.6vw,38px)', color: 'var(--lime-deep)' }}>{it.n}</span>
                <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(19px,1.9vw,26px)', letterSpacing: '-0.015em', color: 'var(--ink)', lineHeight: 1.1 }}>{it.t}</span>
                <span className="body" style={{ fontSize: 'clamp(14px,1.2vw,16.5px)', color: 'var(--text-muted)' }}>{it.d}</span>
                <Ico name="arrowRight" size={18} color="var(--lime-deep)" />
              </a>
            </Reveal>
          ))}
          <Reveal delay={520} style={{ display: 'block' }}>
            <a href="#q-eighty" style={{ display: 'flex', alignItems: 'center', gap: 'clamp(14px,2vw,24px)', padding: 'clamp(16px,2.2vh,22px) 0', borderTop: '1px solid var(--tan-border)', borderBottom: '1px solid var(--tan-border)', textDecoration: 'none' }}>
              <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(17px,1.7vw,23px)', letterSpacing: '-0.01em', color: 'var(--ink)' }}>&hellip;and one point worth repeating: <span className="hl">20 is not 80.</span></span>
              <Ico name="arrowRight" size={18} color="var(--lime-deep)" style={{ marginLeft: 'auto' }} />
            </a>
          </Reveal>
        </div>

        <Reveal delay={640} style={{ marginTop: 'clamp(24px,4vh,36px)' }}>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 'clamp(11px,0.95vw,12.5px)', letterSpacing: '0.04em', color: 'var(--tan-deep)', margin: 0 }}>Answered and updated in days, not weeks.</p>
        </Reveal>
      </div>
    </section>
  );
}

function FollowupScope() {
  return (
    <section className="section full ink" id="q-scope" data-rail="Scope" data-tone="dark" data-screen-label="Follow-up · Scope clarity">
      <div className="wrap">
        <p className="kicker"><Reveal as="span">You asked &middot; 01 / 04</Reveal></p>
        <Split tag="h2" className="display sm" text={'\u201CSo, what exactly is the scope?\u201D'} style={{ color: '#fff', maxWidth: '17ch' }} />
        <div className="splitgrid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.05fr) minmax(0,0.95fr)', gap: 'clamp(28px,4.5vw,64px)', alignItems: 'center', marginTop: 'clamp(28px,4.5vh,44px)' }}>
          <div>
            <Reveal delay={240}>
              <p className="lead"><span className="hl">AI-enabled Production.</span> This engagement runs the operating system that versions, adapts and delivers roughly <span className="hl">20,000 assets a year</span>.</p>
            </Reveal>
            <Reveal delay={360} style={{ marginTop: 'clamp(16px,2.6vh,24px)' }}>
              <p className="body" style={{ fontSize: 'clamp(15px,1.25vw,18px)' }}>Many of the questions in the room were really about <span className="hl">origination</span>: net-new ideas, original creative. That work lives upstream, before an asset ever enters the flywheel.</p>
            </Reveal>
            <Reveal delay={480} style={{ marginTop: 'clamp(24px,4vh,38px)' }}>
              <p style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(22px,2.3vw,32px)', lineHeight: 1.15, letterSpacing: '-0.015em', color: '#fff', margin: 0 }}>Origination creates. <span className="hl">Production multiplies.</span></p>
            </Reveal>
          </div>
          <Reveal variant="scale" delay={300}>
            <div className="fcard" style={{ padding: 'clamp(18px,2vw,26px)', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)' }}>That said</span>
                <p style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(18px,1.7vw,24px)', lineHeight: 1.2, letterSpacing: '-0.01em', color: '#fff', margin: 0 }}>The team has already produced <span className="hl">high-quality origination</span> for Samsung.</p>
              </div>
              <VideoFrame src="assets/video_04.mp4" badge="AI-generated" fitVideo />
              <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.45)', margin: 0 }}>Video sample &middot; made by this team</p>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function FollowupRights() {
  return (
    <section className="section full ink" id="q-rights" data-rail="Usage rights" data-tone="dark" data-screen-label="Follow-up · Usage rights">
      <div className="wrap">
        <p className="kicker"><Reveal as="span">You asked &middot; 02 / 04</Reveal></p>
        <Split tag="h2" className="display sm" text={'\u201CHow are usage rights handled?\u201D'} style={{ color: '#fff', maxWidth: '17ch' }} />
        <Reveal delay={260} style={{ marginTop: 'clamp(22px,3.5vh,34px)', maxWidth: 700 }}>
          <p className="lead">This engagement is <span className="hl">production</span>. Usage rights are secured upstream, in the origination exercise, so by the time an asset reaches Flywheel, its rights are already settled.</p>
        </Reveal>

        <Reveal delay={400} variant="rise" style={{ marginTop: 'clamp(36px,6vh,60px)' }}>
          <div className="rightsflow" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) auto minmax(0,1fr)', gap: 'clamp(14px,2vw,26px)', alignItems: 'stretch', maxWidth: 980 }}>
            <div className="fcard" style={{ padding: 'clamp(20px,2.2vw,30px)', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)' }}>Upstream &middot; origination</span>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(20px,2vw,28px)', lineHeight: 1.1, letterSpacing: '-0.015em', color: '#fff' }}>Assets are born. Rights are cleared.</div>
              <p className="body" style={{ fontSize: 'clamp(14px,1.15vw,16px)', margin: 0 }}>Talent, photography, music, licensing: all negotiated and settled where the master assets are made.</p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
              <Ico name="arrowRight" size={24} color="var(--lime)" />
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--lime)', whiteSpace: 'nowrap' }}>arrives cleared</span>
            </div>
            <div style={{ border: '1px solid var(--lime)', background: 'rgba(145,209,11,0.06)', borderRadius: 18, padding: 'clamp(20px,2.2vw,30px)', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--lime)' }}>This scope &middot; Flywheel</span>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(20px,2vw,28px)', lineHeight: 1.1, letterSpacing: '-0.015em', color: '#fff' }}>Production, at scale.</div>
              <p className="body" style={{ fontSize: 'clamp(14px,1.15vw,16px)', margin: 0 }}>The operating system versions, adapts and delivers rights-cleared masters. No new rights questions are created downstream.</p>
            </div>
          </div>
        </Reveal>
        <Reveal delay={560} style={{ marginTop: 'clamp(26px,4vh,40px)' }}>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(18px,1.8vw,25px)', lineHeight: 1.35, letterSpacing: '-0.01em', color: '#fff', margin: 0, maxWidth: '40ch' }}>A clean line: <span className="hl">origination owns rights. Flywheel runs production.</span></p>
        </Reveal>
      </div>
      <style>{`@media (max-width: 900px){ .rightsflow{ grid-template-columns: 1fr !important; } .rightsflow > div:nth-child(2){ transform: rotate(90deg); padding: 6px 0; } }`}</style>
    </section>
  );
}

function FollowupPerformance() {
  return (
    <section className="section full ink" id="q-perf" data-rail="Performance" data-tone="dark" data-screen-label="Follow-up · Performance data">
      <div className="wrap">
        <p className="kicker"><Reveal as="span">You asked &middot; 03 / 04</Reveal></p>
        <Split tag="h2" className="display sm" text={'\u201CShould performance data feed the system?\u201D'} style={{ color: '#fff', maxWidth: '17ch' }} />
        <Reveal delay={260} style={{ marginTop: 'clamp(22px,3.5vh,34px)', maxWidth: 700 }}>
          <p className="lead">In a production scope, performance should first shape <span className="hl">origination</span>: what gets made next. But yes: send it. A learning system thrives on knowledge, and performance data enriches the <span className="hl">knowledge graph</span> at the platform&rsquo;s core. The more you send, the better.</p>
        </Reveal>

        <div className="perfgrid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(16px,2.2vw,28px)', marginTop: 'clamp(36px,6vh,60px)', maxWidth: 980 }}>
          <Reveal variant="rise" delay={380}>
            <div className="fcard" style={{ padding: 'clamp(20px,2.2vw,30px)', height: '100%', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)' }}>Where it must flow</span>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(20px,2vw,28px)', lineHeight: 1.1, letterSpacing: '-0.015em', color: '#fff' }}>Upstream, to origination.</div>
              <p className="body" style={{ fontSize: 'clamp(14px,1.15vw,16px)', margin: 0 }}>What worked should steer the next brief, the next shoot, the next master asset. That&rsquo;s where performance pays first.</p>
            </div>
          </Reveal>
          <Reveal variant="rise" delay={500}>
            <div style={{ border: '1px solid var(--lime)', background: 'rgba(145,209,11,0.06)', borderRadius: 18, padding: 'clamp(20px,2.2vw,30px)', height: '100%', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--lime)' }}>And where we welcome it</span>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(20px,2vw,28px)', lineHeight: 1.1, letterSpacing: '-0.015em', color: '#fff' }}>Into the flywheel.</div>
              <p className="body" style={{ fontSize: 'clamp(14px,1.15vw,16px)', margin: 0 }}>Load it in and the system learns what works, for versioning, adaptation and channel choices. Knowledge that <span className="hl">compounds with every cycle</span>.</p>
            </div>
          </Reveal>
        </div>
        <Reveal delay={620} style={{ marginTop: 'clamp(26px,4vh,40px)' }}>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(18px,1.8vw,25px)', lineHeight: 1.35, letterSpacing: '-0.01em', color: '#fff', margin: 0, maxWidth: '42ch' }}>Every signal you share makes the flywheel <span className="hl">turn smarter</span>.</p>
        </Reveal>
      </div>
      <style>{`@media (max-width: 900px){ .perfgrid{ grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function FollowupCleanroom() {
  const inside = ['NVIDIA GPUs, running locally', 'Open-source models, on-prem', 'Flywheel workflow, self-contained'];
  const outside = ['The internet', 'Cloud APIs', 'External models'];
  return (
    <section className="section full ink" id="q-cleanroom" data-rail="Clean room" data-tone="dark" data-screen-label="Follow-up · Clean room">
      <div className="wrap">
        <p className="kicker"><Reveal as="span">You asked &middot; 04 / 04</Reveal></p>
        <Split tag="h2" className="display sm" text={'\u201CHow does the clean room work?\u201D'} style={{ color: '#fff', maxWidth: '16ch' }} />
        <Reveal delay={240} style={{ marginTop: 'clamp(22px,3.5vh,34px)', maxWidth: 720 }}>
          <p className="lead">For each of your three embargoed launches, we run the workflow in a <span className="hl">completely offline, secure environment</span>, set up locally, inside the clean room, connected to nothing.</p>
        </Reveal>

        <Reveal delay={400} variant="scale" style={{ marginTop: 'clamp(36px,6vh,60px)' }}>
          <div className="cleangrid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.25fr) auto minmax(0,0.75fr)', gap: 'clamp(18px,2.4vw,36px)', alignItems: 'stretch', maxWidth: 1020 }}>
            <div style={{ border: '1px solid var(--lime)', background: 'rgba(145,209,11,0.05)', borderRadius: 18, padding: 'clamp(22px,2.4vw,32px)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--lime)' }}></span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--lime)' }}>Inside the clean room</span>
              </div>
              {inside.map((s, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 0', borderTop: '1px solid rgba(255,255,255,0.12)' }}>
                  <span style={{ width: 26, height: 26, borderRadius: 999, background: 'rgba(145,209,11,0.12)', border: '1px solid rgba(145,209,11,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Ico name="check" size={13} color="var(--lime)" /></span>
                  <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(16px,1.5vw,21px)', letterSpacing: '-0.01em', color: '#fff' }}>{s}</span>
                </div>
              ))}
            </div>
            <div className="airgap" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
              <span style={{ flex: 1, width: 0, borderLeft: '2px dashed rgba(255,255,255,0.3)' }}></span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#fff', border: '1px solid rgba(255,255,255,0.3)', borderRadius: 999, padding: '6px 12px', whiteSpace: 'nowrap' }}>Air gap</span>
              <span style={{ flex: 1, width: 0, borderLeft: '2px dashed rgba(255,255,255,0.3)' }}></span>
            </div>
            <div style={{ border: '1px solid rgba(255,255,255,0.12)', borderRadius: 18, padding: 'clamp(22px,2.4vw,32px)', opacity: 0.6 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 18 }}>Outside world</div>
              {outside.map((s, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 0', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
                  <span style={{ width: 26, height: 26, borderRadius: 999, border: '1px solid rgba(255,255,255,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, color: 'rgba(255,255,255,0.55)', fontSize: 13, lineHeight: 1 }}>&#10005;</span>
                  <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(16px,1.5vw,21px)', letterSpacing: '-0.01em', color: 'rgba(255,255,255,0.6)', textDecoration: 'line-through', textDecorationColor: 'rgba(255,255,255,0.35)' }}>{s}</span>
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        <Reveal delay={560} style={{ marginTop: 'clamp(26px,4vh,40px)', display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
          <span className="chip-pill">3 embargo windows / year</span>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(17px,1.6vw,23px)', letterSpacing: '-0.01em', color: '#fff', margin: 0 }}>Stood up per launch. <span className="hl">Nothing in, nothing out</span>, until you say go.</p>
        </Reveal>
      </div>
      <style>{`@media (max-width: 900px){ .cleangrid{ grid-template-columns: 1fr !important; } .cleangrid .airgap{ flex-direction: row !important; } .cleangrid .airgap span:first-child, .cleangrid .airgap span:last-child{ width: auto !important; height: 0 !important; border-left: none !important; border-top: 2px dashed rgba(255,255,255,0.3) !important; flex: 1 !important; } }`}</style>
    </section>
  );
}

function FollowupEighty() {
  return (
    <section className="section full ink" id="q-eighty" data-rail="The 80%" data-tone="dark" data-screen-label="Follow-up · 20 is not 80" style={{ overflow: 'hidden' }}>
      <div style={{ position: 'absolute', right: '-12%', top: '50%', transform: 'translateY(-50%)', width: 'min(50vw,600px)', height: 'min(50vw,600px)', opacity: 0.3, pointerEvents: 'none' }}>
        <OrbitSVG />
      </div>
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <p className="kicker"><Reveal as="span">One point worth repeating</Reveal></p>
        <Split tag="h2" className="display" text={'Only an AI-native operating system delivers anything near 80%.'} style={{ color: '#fff', maxWidth: '16ch' }} />
        <Reveal delay={420} style={{ marginTop: 'clamp(28px,4.5vh,44px)', maxWidth: 720 }}>
          <p className="lead">Bolting tools onto yesterday&rsquo;s model tops out around 20. The other 60 points aren&rsquo;t a feature you buy. They&rsquo;re an <span className="hl">operating model, built agentic and AI-native</span>. The rest of this deck shows the difference.</p>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { FollowupCover, FollowupIntro, FollowupScope, FollowupRights, FollowupPerformance, FollowupCleanroom, FollowupEighty });
