</PTField>
      </div>

{/* ── Row 2: Online presence ── */}
      <div style={{ ...G, marginTop: 16 }}>
        <PTField label="Website URL">
          <input style={INP_STYLE} type="url" placeholder="https://yourbusiness.com" value={fields.website} onChange={set('website')}/>
        </PTField>
        <PTField label="Instagram handle">
          <input style={INP_STYLE} type="text" placeholder="@yourbusiness" value={fields.instagram} onChange={set('instagram')}/>
        </PTField>
      </div>

{/* ── Row 3: Numbers ── */}
      <div style={{ ...G, marginTop: 16 }}>
        <PTField label="Monthly revenue" req>
          <select style={INP_STYLE} value={fields.revenue} onChange={set('revenue')}>
            <option value="">Select range</option>
            <option value="under-5k">Under $5,000 CAD / month</option>
            <option value="5k-20k">$5,000 – $20,000 CAD / month</option>
            <option value="20k-50k">$20,000 – $50,000 CAD / month</option>
            <option value="50k+">$50,000+ CAD / month</option>
          </select>
        </PTField>

{/* Q3 — ticket size as dropdown */}
        <PTField label="What does a client pay you? (average deal size)" req>
          <select style={INP_STYLE} value={fields.ticketSize} onChange={set('ticketSize')}>
            <option value="">Select range</option>
            <option value="under-500">Under $500</option>
            <option value="500-2k">$500 – $2,000</option>
            <option value="2k-10k">$2,000 – $10,000</option>
            <option value="10k-plus">$10,000+</option>
          </select>
        </PTField>

<PTField label="Ad budget for the 10-day trial" req>
          <select style={INP_STYLE} value={fields.adBudget} onChange={set('adBudget')}>
            <option value="">Select range</option>
            <option value="under-500">Under $500 CAD</option>
            <option value="500-1000">$500 – $1,000 CAD</option>
            <option value="1000-2500">$1,000 – $2,500 CAD</option>
            <option value="2500+">$2,500+ CAD</option>
          </select>
        </PTField>
      </div>

{/* ── Row 4: Ad experience ── */}
      <div style={{ ...G, marginTop: 16 }}>
        <PTField label="Have you run Meta ads before?" req>
          <select style={INP_STYLE} value={fields.metaAds} onChange={set('metaAds')}>
            <option value="">Select</option>
            <option value="never">Never</option>
            <option value="under-6mo">Yes – under 6 months</option>
            <option value="6-12mo">Yes – 6 to 12 months</option>
            <option value="1yr+">Yes – over a year</option>
          </select>
        </PTField>
        <PTField label="Approx. cost per lead from past Meta ads">
          <input style={INP_STYLE} type="text" placeholder="e.g. $12 CAD (leave blank if never run)" value={fields.cpl} onChange={set('cpl')}/>
        </PTField>
        <PTField label="Current lead generation method" req>
          <input style={INP_STYLE} type="text" placeholder="e.g. Referrals, Google, cold outreach, none" value={fields.leadGenMethod} onChange={set('leadGenMethod')}/>
        </PTField>
      </div>

{/* ── Row 5: Q4, Q7, Q8 ── */}
      <div style={{ ...G, marginTop: 16 }}>

{/* Q4 */}
        <PTField label="Do you post content regularly and have an active social presence?" req>
          <select style={INP_STYLE} value={fields.contentPresence} onChange={set('contentPresence')}>
            <option value="">Select</option>
            <option value="weekly-plus">Yes, weekly+</option>
            <option value="occasionally">Occasionally</option>
            <option value="no">No</option>
          </select>
        </PTField>

{/* Q7 */}
        <PTField label="Who handles your sales calls and follow-up?" req>
          <select style={INP_STYLE} value={fields.salesHandler} onChange={set('salesHandler')}>
            <option value="">Select</option>
            <option value="dedicated">Dedicated sales person</option>
            <option value="me">I do it</option>
            <option value="no-one">No one</option>
          </select>
        </PTField>

{/* Q8 */}
        <PTField label="Do you have testimonials or case studies?" req>
          <select style={INP_STYLE} value={fields.testimonials} onChange={set('testimonials')}>
            <option value="">Select</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
          </select>
        </PTField>

{fields.testimonials === 'yes' && (
          <PTField label="Paste a link to your testimonials or case study">
            <input style={INP_STYLE} type="url" placeholder="https://" value={fields.testimonialLink} onChange={set('testimonialLink')}/>
          </PTField>
        )}
      </div>

{/* ── Row 6: Q9 + Q10 + referral ── */}
      <div style={{ ...G, marginTop: 16 }}>

{/* Q9 */}
        <PTField label="How soon do you want leads coming in?" req>
          <select style={INP_STYLE} value={fields.leadsTimeline} onChange={set('leadsTimeline')}>
            <option value="">Select</option>
            <option value="this-week">This week</option>
            <option value="within-2-weeks">Within 2 weeks</option>
            <option value="this-month">This month</option>
            <option value="just-exploring">Just exploring</option>
          </select>
        </PTField>

{/* Q10 */}
        <PTField label="On a scale of 1–10, how ready are you to start — and what's driving that?">
          <input style={INP_STYLE} type="text" placeholder="e.g. 8 — we just lost our main referral source" value={fields.readinessScore} onChange={set('readinessScore')}/>
        </PTField>

<PTField label="How did you hear about us?">
          <select style={INP_STYLE} value={fields.referral} onChange={set('referral')}>
            <option value="">Select</option>
            <option value="meta-ad">Meta or Instagram Ad</option>
            <option value="instagram">Instagram Profile or Posts</option>
            <option value="word-of-mouth">Word of mouth</option>
            <option value="referral">Referred by someone</option>
            <option value="google">Google Search</option>
            <option value="other">Other</option>
          </select>
        </PTField>
      </div>

{/* ── Why now ── */}
      <div style={{ marginTop: 16 }}>
        <PTField label="Why now? What's changed or what's the pressure to grow leads?" req>
          <textarea
            style={{ ...INP_STYLE, minHeight: 100, resize: 'vertical', lineHeight: 1.6 }}
            placeholder="Be specific. What changed recently, or what's the pressure right now?"
            value={fields.whyNow}
            onChange={set('whyNow')}
          />
        </PTField>
      </div>

{formError && (
        <p style={{ fontSize: 14, color: '#c0392b', marginTop: 14, marginBottom: 0 }}>
          {formError}
        </p>
      )}

<div style={{ marginTop: 24 }}>
        <Button size="lg" disabled={submitting}>
          {submitting ? 'Submitting...' : <>Submit application <span aria-hidden>→</span></>}
        </Button>
        <p style={{ fontSize: 12, color: 'var(--fg-subtle)', marginTop: 10, marginBottom: 0 }}>
          We reply either way, within 24 hours.
        </p>
      </div>
    </form>
  );
}

/* ── Application modal (right-side drawer) ── */
function PTModal({ onClose }) {
  useEffectPT(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';

// Push a history entry so the browser back button closes the modal
    // instead of navigating away from the Proof Trial page.
    history.pushState({ ptModal: true }, '');

const onPop = () => { onClose(); };
    const onKey = e => { if (e.key === 'Escape') closeModal(); };

window.addEventListener('popstate', onPop);
    document.addEventListener('keydown', onKey);

return () => {
      document.body.style.overflow = prev;
      window.removeEventListener('popstate', onPop);
      document.removeEventListener('keydown', onKey);
    };
  }, []);

// Closing via × or backdrop: consume the pushed history state first,
  // which triggers popstate → onClose. Falls back to onClose directly
  // if the state is already gone for any reason.
  const closeModal = () => {
    if (history.state && history.state.ptModal) {
      history.back(); // fires popstate → onClose
    } else {
      onClose();
    }
  };

return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 9000, display: 'flex', justifyContent: 'flex-end' }}>
      <style>{`
        @keyframes pt-fade  { from { opacity: 0 } to { opacity: 1 } }
        @keyframes pt-slide { from { transform: translateX(100%) } to { transform: translateX(0) } }
      `}</style>

{/* Backdrop */}
      <div
        onClick={closeModal}
        style={{
          position: 'absolute', inset: 0,
          background: 'rgba(10,10,10,0.5)', backdropFilter: 'blur(3px)',
          animation: 'pt-fade 200ms ease both',
        }}
      />

{/* Panel */}
      <div style={{
        position: 'relative', zIndex: 1,
        width: '100%', maxWidth: 580,
        background: 'var(--bg)', height: '100%',
        display: 'flex', flexDirection: 'column',
        boxShadow: '-12px 0 48px rgba(0,0,0,0.15)',
        animation: 'pt-slide 280ms var(--ease-out, cubic-bezier(.16,1,.3,1)) both',
      }}>

{/* Sticky header */}
        <div style={{
          padding: '24px 28px 20px',
          borderBottom: '1px solid var(--border)',
          display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16,
          position: 'sticky', top: 0, background: 'var(--bg)', zIndex: 2,
        }}>
          <div>
            <Eyebrow style={{ marginBottom: 8 }}>Proof Trial</Eyebrow>
            <div style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(20px, 2.4vw, 28px)',
              fontWeight: 400, letterSpacing: '-0.015em', color: 'var(--fg)', lineHeight: 1.1,
            }}>
              Apply for a Proof Trial
            </div>
          </div>
          <button
            onClick={closeModal}
            aria-label="Close"
            style={{
              background: 'none', border: '1px solid var(--border)', borderRadius: 4,
              cursor: 'pointer', padding: '8px 9px', flexShrink: 0, marginTop: 2,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--fg-muted)',
            }}
          >
            <svg viewBox="0 0 24 24" width={15} height={15} fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round">
              <path d="M18 6L6 18M6 6l12 12"/>
            </svg>
          </button>
        </div>

{/* Scrollable body */}
        <div style={{ padding: '28px', overflowY: 'auto', flex: 1 }}>
          <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--fg-muted)', marginTop: 0, marginBottom: 24 }}>
            Under 60 seconds to fill out. We review every application and reply either way, within 24 hours.
            If it's a fit, we'll schedule a 30-minute revenue audit call.
          </p>
          <PTApplicationForm/>
        </div>
      </div>
    </div>
  );
}

/* ── Main page component ── */
function ProofTrial({ onCaseStudy }) {
  const [showForm, setShowForm] = useStatePT(false);

const handleApply = (e) => {
    if (e) e.preventDefault();
    if (typeof fbq !== 'undefined') fbq('track', 'Lead', { content_name: 'Proof Trial Apply Click' });
    setShowForm(true);
  };

const handleCaseStudy = (e) => {
    if (e) e.preventDefault();
    if (onCaseStudy) onCaseStudy();
    else if (window.daeNav) window.daeNav('detail', null, 'protein-pals');
  };

return (
    <article>
      {showForm && <PTModal onClose={() => setShowForm(false)}/>}

{/* ── HERO ── */}
      <Section pad={100}>
        <Container>
          <Reveal>
            <Eyebrow>For service businesses in Canada that are done being someone's experiment.</Eyebrow>
          </Reveal>

<Reveal delay={60} y={16}>
            <h1 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3.6vw, 58px)',
              lineHeight: 1.1, letterSpacing: '-0.022em', margin: '20px 0 0', fontWeight: 400,
              maxWidth: 1120,
            }}>
              We'll build your lead system and prove it in 10 days.{' '}
              <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>
                You pay after — and only what it was worth.
              </em>
            </h1>
          </Reveal>

<Reveal delay={130}>
            <p style={{
              fontSize: 20, lineHeight: 1.6, color: 'var(--fg-muted)',
              maxWidth: 780, marginTop: 32,
            }}>
              No contract. No big promises. A working acquisition system, running live on your business,
              judged on one number we agree before we start. Hit it, you decide what the 10 days were worth.
              Miss it, your deposit comes straight back.
            </p>
          </Reveal>

<Reveal delay={200}>
            <div style={{ marginTop: 40, display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
              <Button size="lg" onClick={handleApply}>
                Apply for a Proof Trial <span aria-hidden>→</span>
              </Button>
              <a href={PT_CASE_STUDY_URL} onClick={handleCaseStudy} style={{
                fontSize: 14, color: 'var(--fg-muted)', textDecoration: 'none',
                borderBottom: '1px solid var(--border-strong)', paddingBottom: 1,
              }}>
                See what it produced for Protein Pals →
              </a>
            </div>
            <p style={{ fontSize: 13, color: 'var(--fg-subtle)', marginTop: 14 }}>
              We take on 3 to 4 businesses at a time. Not everyone gets a call — and that's the point.
            </p>
          </Reveal>

{/* ── VIDEO ── */}
      <Section pad={72} topRule>
        <Container>
          <Reveal>
            <Eyebrow>§ The 60-second overview</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(22px, 2.6vw, 40px)',
              lineHeight: 1.12, letterSpacing: '-0.018em', margin: '20px 0 32px', fontWeight: 400, maxWidth: 600,
            }}>
              Hear it from Saad before you read any further.
            </h2>
          </Reveal>
          <Reveal delay={80}>
            <div style={{ maxWidth: 760, borderRadius: 4, overflow: 'hidden' }}>
              {PT_VIDEO_URL ? (
                PT_VIDEO_URL.includes('youtube') || PT_VIDEO_URL.includes('youtu.be')
                  ? <iframe src={PT_VIDEO_URL} style={{ width: '100%', aspectRatio: '16/9', border: 'none', display: 'block' }} allow="autoplay; encrypted-media" allowFullScreen/>
                  : <video src={PT_VIDEO_URL} controls style={{ width: '100%', aspectRatio: '16/9', display: 'block', background: '#000' }}/>
              ) : (
                <div style={{
                  aspectRatio: '16/9', background: 'var(--bg-elevated)',
                  border: '1px solid var(--border)', borderRadius: 4,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16,
                }}>
                  <div style={{
                    width: 56, height: 56, borderRadius: 999,
                    border: '1.5px solid var(--border-strong)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <svg viewBox="0 0 24 24" width={18} height={18} fill="none" stroke="var(--fg-muted)" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
                      <polygon points="5 3 19 12 5 21 5 3"/>
                    </svg>
                  </div>
                  <span style={{ fontSize: 14, color: 'var(--fg-subtle)' }}>Saad explains the Proof Trial — video coming soon</span>
                </div>
              )}
            </div>
          </Reveal>
        </Container>
      </Section>

{/* ── PROBLEM ── */}
      <Section pad={96} topRule>
        <Container>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.35fr', gap: 96 }}>
            <Reveal>
              <Eyebrow>§ The problem</Eyebrow>
              <h2 style={{
                fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3.2vw, 50px)',
                lineHeight: 1.08, letterSpacing: '-0.02em', margin: '20px 0 0', fontWeight: 400,
              }}>
                You don't have an ads problem. You have a{' '}
                <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>system problem.</em>
              </h2>
            </Reveal>

<Reveal delay={80}>
              <div style={{ paddingTop: 40 }}>
                <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-muted)', marginTop: 0 }}>
                  You've probably paid an agency before. They ran ads, sent you a dashboard full of impressions,
                  and asked you to renew. The leads were thin, the good ones rare, and when you asked what was
                  actually working, you got jargon.
                </p>
                <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-muted)' }}>
                  Here's what was really happening: they were running ads <em>at</em> your business, not building
                  a system <em>for</em> it. Ads without an offer, a funnel, qualification, and a way to turn a
                  lead into a paying client is just spend. That's not a marketing failure. It's a structural one.
                </p>
                <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-muted)', marginBottom: 0 }}>
                  So we do the opposite of everything that burned you. We build the system first, we run it on
                  your business before you commit, and we let the result decide the price.
                </p>
              </div>
            </Reveal>
          </div>
        </Container>
      </Section>

{/* ── WHAT WE DO ── */}
      <Section pad={96} topRule>
        <Container>
          <Reveal>
            <Eyebrow>§ What we actually do</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3.2vw, 50px)',
              lineHeight: 1.08, letterSpacing: '-0.02em', margin: '20px 0 24px', fontWeight: 400,
              maxWidth: 820,
            }}>
              We don't run ads. We build the engine that turns strangers into paying clients.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 720, margin: '0 0 48px' }}>
              A real acquisition system isn't a campaign. It's a loop, and every part has a job:
            </p>
          </Reveal>

<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            {[
              { num: '01', title: 'The offer and funnel', body: 'So a stranger understands what you sell and how to buy it in one scroll.' },
              { num: '02', title: 'Meta ads with qualification built in', body: 'So you get leads who can actually answer for themselves, not form-fillers.' },
              { num: '03', title: 'Automated qualification (ManyChat / WhatsApp)', body: 'So every lead is scored and routed in under a minute, and the junk is filtered before it reaches your team.' },
              { num: '04', title: 'CRM pipeline (Zoho)', body: 'So every lead has a stage, nothing leaks, and you can see revenue coming.' },
              { num: '05', title: 'Conversion API feedback loop', body: 'So the algorithm learns from who actually pays, and your cost per lead drops over time instead of climbing.' },
            ].map((item, i) => (
              <Reveal key={i} delay={i * 50}>
                <div style={{
                  padding: '28px 24px',
                  background: 'var(--bg-elevated)', border: '1px solid var(--border)', borderRadius: 4,
                  height: '100%', boxSizing: 'border-box',
                }}>
                  <div style={{
                    fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em',
                    color: 'var(--accent)', fontFamily: 'var(--font-sans)', marginBottom: 12,
                  }}>{item.num}</div>
                  <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--fg)', marginBottom: 8 }}>{item.title}</div>
                  <div style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--fg-muted)' }}>{item.body}</div>
                </div>
              </Reveal>
            ))}

<Reveal delay={260}>
              <div style={{
                padding: '28px 24px', background: 'var(--accent)', borderRadius: 4,
                display: 'flex', flexDirection: 'column', justifyContent: 'center',
                height: '100%', boxSizing: 'border-box',
              }}>
                <div style={{
                  fontSize: 18, fontWeight: 600, color: 'var(--accent-fg)',
                  fontFamily: 'var(--font-display)', letterSpacing: '-0.01em', marginBottom: 10,
                }}>Built right, once. Then it compounds.</div>
                <div style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--accent-fg)', opacity: 0.88 }}>
                  Every month's data feeds the next campaign. The system gets sharper without you lifting a finger.
                </div>
              </div>
            </Reveal>
          </div>
        </Container>
      </Section>

{/* ── PROOF ── */}
      <Section pad={96} topRule>
        <Container>
          <Reveal>
            <Eyebrow>§ Proof — in the wild</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3.2vw, 50px)',
              lineHeight: 1.08, letterSpacing: '-0.02em', margin: '20px 0 0', fontWeight: 400,
            }}>
              We've already built this engine. Here's what it did.
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--fg-muted)', marginTop: 20, maxWidth: 780 }}>
              Protein Pals — a high-protein meal delivery startup in the Toronto GTA. Great product. Fifteen subscribers. No engine to sell it.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg-muted)', maxWidth: 780, marginBottom: 0 }}>
              We built the engine: Meta Ads → ManyChat → Zoho CRM → Conversion API. Then we ran it.
            </p>
          </Reveal>

<Reveal delay={140}>
            <div style={{
              marginTop: 32, padding: '28px 32px',
              background: 'var(--paper-100)', border: '1px solid var(--border)', borderRadius: 4,
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32,
            }}>
              <div>
                <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--accent)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8, fontFamily: 'var(--font-sans)' }}>Detail that matters most</div>
                <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--fg)', margin: 0 }}>
                  <strong>45 subscribers in the first 15 days — before a single dollar of ad spend.</strong>{' '}
                  The foundation was built to convert before we ever turned the ads on.
                </p>
              </div>
              <div>
                <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--accent)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8, fontFamily: 'var(--font-sans)' }}>The outcome you actually want</div>
                <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--fg)', margin: 0 }}>
                  <strong>The paid campaigns got paused — because the kitchen couldn't keep up with demand.</strong>{' '}
                  That's the real measure of a system that works.
                </p>
              </div>
            </div>
          </Reveal>

<Reveal delay={180}>
            <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--fg-subtle)', marginTop: 20, maxWidth: 760, fontStyle: 'italic' }}>
              Meal delivery runs a low cost per lead. Your business will run higher — we'll set your real number together on the call.
              Protein Pals isn't a promise of $1.13. It's proof the system works, compounds, and holds up under pressure.
            </p>
            <div style={{ marginTop: 20 }}>
              <a href={PT_CASE_STUDY_URL} onClick={handleCaseStudy} style={{
                fontSize: 15, color: 'var(--fg)', textDecoration: 'none',
                borderBottom: '1px solid var(--border-strong)', paddingBottom: 2,
              }}>
                Read the full Protein Pals breakdown →
              </a>
            </div>
          </Reveal>
        </Container>
      </Section>

{/* ── THE OFFER ── */}
      <Section pad={96} topRule>
        <Container>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.35fr', gap: 96 }}>
            <Reveal>
              <Eyebrow>§ The offer</Eyebrow>
              <h2 style={{
                fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3.2vw, 50px)',
                lineHeight: 1.08, letterSpacing: '-0.02em', margin: '20px 0 0', fontWeight: 400,
              }}>
                The Daee Proof Trial
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-muted)', marginTop: 24 }}>
                For 10 days, we build and run your acquisition system on your business. You watch qualified leads
                come in against a target we agree in writing. Then you decide.
              </p>
              <GuaranteeStrip/>
            </Reveal>

<Reveal delay={80}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 0, paddingTop: 40 }}>
                {[
                  { num: 'Step 01', title: 'You apply.', body: 'Quick form. It tells us if we can actually win for you — if we can\'t, we\'ll say so.' },
                  { num: 'Step 02', title: 'We get on a call.', body: 'Not a pitch — a diagnosis. We look at your offer, your numbers, and your capacity, and we set the one target that would make the next 10 days a clear win for you.' },
                  { num: 'Step 03', title: 'You put down a refundable deposit.', body: '$300–350 CAD, card on file. You also fund your own ad budget. The deposit is your skin in the game — and it\'s credited to month one if we continue.' },
                  { num: 'Step 04', title: 'We build and run the system for 10 days.', body: 'Three checkpoints: within 72 hours, mid-trial, and on the final day.' },
                  { num: 'Step 05', title: 'You decide.', body: 'Hit the target and you either continue on a retainer, or pay what the 10 days were worth — above the floor — and we part clean. Miss the target, and your deposit comes back.' },
                ].map((step, i) => (
                  <OfferStep key={i} {...step}/>
                ))}
                <div style={{ paddingTop: 28 }}>
                  <p style={{ fontSize: 14, color: 'var(--fg-subtle)', fontStyle: 'italic', marginBottom: 24, marginTop: 0 }}>
                    No contract. A plain-language agreement, not a trap. You're never locked into anything by a signature — only by results.
                  </p>
                  <Button size="lg" onClick={handleApply}>
                    Apply for a Proof Trial <span aria-hidden>→</span>
                  </Button>
                </div>
              </div>
            </Reveal>
          </div>
        </Container>
      </Section>

{/* ── LINE THAT DOESN'T MOVE ── */}
      <Section pad={96} topRule bg="var(--paper-100)">
        <Container>
          <Reveal>
            <Eyebrow>§ Read this twice</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3.2vw, 50px)',
              lineHeight: 1.08, letterSpacing: '-0.02em', margin: '20px 0 0', fontWeight: 400, maxWidth: 820,
            }}>
              We fill your pipeline. You close it. That line doesn't move.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-muted)', marginTop: 20, maxWidth: 740 }}>
              This trial — and everything we do — is built to do one thing: deliver <strong>pre-qualified leads.</strong>{' '}
              People who are already looking for what you offer, and who match the parameters we set together on the call. That's the job.
            </p>
          </Reveal>

<Reveal delay={80}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 48 }}>
              {[
                { label: 'Our side', body: 'Put pre-qualified demand in front of you, consistently, across the trial\'s ad-spend period.' },
                { label: 'Your side', body: 'The sales conversations and the closing. The revenue is yours, entirely.' },
                { label: 'How we\'re judged', body: 'By the number of pre-qualified leads the system produces against your ad spend — not by your close rate or your revenue.' },
              ].map((item, i) => (
                <div key={i} style={{
                  padding: '28px 24px', background: 'var(--bg-elevated)',
                  border: '1px solid var(--border)', borderRadius: 4,
                }}>
                  <div style={{
                    fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em',
                    color: 'var(--accent)', fontFamily: 'var(--font-sans)', marginBottom: 12,
                  }}>{item.label}</div>
                  <div style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--fg)' }}>{item.body}</div>
                </div>
              ))}
            </div>

<p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)', marginTop: 28, maxWidth: 740 }}>
              If your offer and your sales process are solid, qualified leads turn into revenue. But the closing stays
              in your hands — and we'd never promise a result that depends on a call we're not on.
            </p>
          </Reveal>
        </Container>
      </Section>

{/* ── FAQ / CLARITY ── */}
      <Section pad={96} topRule>
        <Container narrow>
          <Reveal>
            <Eyebrow>§ The honest answer</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3.2vw, 50px)',
              lineHeight: 1.08, letterSpacing: '-0.02em', margin: '20px 0 48px', fontWeight: 400,
            }}>
              "What's the catch?" — fair question.
            </h2>
          </Reveal>
          <Reveal delay={60}>
            <div style={{ borderTop: '1px solid var(--border)' }}>
              {FAQ_ITEMS.map((item, i) => (
                <AccordionItem key={i} q={item.q} a={item.a}/>
              ))}
            </div>
          </Reveal>
        </Container>
      </Section>

{/* ── WHO IT'S FOR ── */}
      <Section pad={96} topRule bg="var(--paper-100)">
        <Container>
          <Reveal>
            <Eyebrow>§ Fit check</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3.2vw, 50px)',
              lineHeight: 1.08, letterSpacing: '-0.02em', margin: '20px 0 48px', fontWeight: 400,
            }}>
              Who this is for
            </h2>
          </Reveal>

<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
            <Reveal>
              <div style={{ border: '1px solid var(--border)', borderRadius: 4, overflow: 'hidden' }}>
                <div style={{ padding: '14px 24px', background: 'var(--accent)' }}>
                  <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--accent-fg)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                    This is for you if
                  </span>
                </div>
                <div style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {[
                    'You run a service business with a proven offer and happy clients.',
                    'You have testimonials or results you can point to.',
                    'Someone on your team actually works the leads — you\'re not expecting us to close for you.',
                    'You already post content regularly and have an active social presence.',
                    'You\'ve run ads before and know the difference between spend and a system.',
                    'You\'re ready to start this week or next — not "sometime."',
                  ].map((item, i) => <FitCheck key={i} yes>{item}</FitCheck>)}
                </div>
              </div>
            </Reveal>

<Reveal delay={80}>
              <div style={{ border: '1px solid var(--border)', borderRadius: 4, overflow: 'hidden' }}>
                <div style={{ padding: '14px 24px', background: 'var(--paper-200)', borderBottom: '1px solid var(--border)' }}>
                  <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                    This is not for you if
                  </span>
                </div>
                <div style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {[
                    'You\'re shopping for the cheapest ad guy.',
                    'You don\'t have anyone to answer the leads.',
                    'You need us to save a business that isn\'t working yet.',
                    'You want a contract that locks us in and a discount that locks you out of accountability.',
                  ].map((item, i) => <FitCheck key={i} yes={false}>{item}</FitCheck>)}
                </div>
                <div style={{ padding: '16px 24px', borderTop: '1px solid var(--border)', background: 'var(--paper-100)' }}>
                  <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--fg-subtle)', margin: 0, fontStyle: 'italic' }}>
                    We only work with businesses that deserve to grow. If that's you, we should talk.
                  </p>
                </div>
              </div>
            </Reveal>
          </div>
        </Container>
      </Section>

{/* ── FINAL CTA ── */}
      <Section pad={120} topRule>
        <Container narrow>
          <Reveal>
            <Eyebrow>§ Ready?</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 4vw, 64px)',
              lineHeight: 1.05, letterSpacing: '-0.025em', margin: '20px 0 0', fontWeight: 400,
            }}>
              Stop paying to be someone's experiment.
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--fg-muted)', marginTop: 28, maxWidth: 620 }}>
              Apply for a Proof Trial. If it's a fit, we'll build your system, run it for 10 days,
              and let the result set the price.
            </p>
          </Reveal>

<Reveal delay={80}>
            <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 14 }}>
              <Button size="lg" onClick={handleApply}>
                Apply for a Proof Trial <span aria-hidden>→</span>
              </Button>
              <p style={{ fontSize: 13, color: 'var(--fg-subtle)', margin: 0 }}>
                3 to 4 spots. We reply either way within 24 hours.
              </p>
            </div>
          </Reveal>

</article>
  );
}

window.ProofTrialPage = ProofTrial;