// live-c.jsx — VARIANT C "Buy With Confidence" — BOLD CONFIDENCE-APP
// Deep warm-espresso hero, heavy geometric sans, warm stone body with floating white cards,
// a connected vertical timeline, a strong guarantee card. Single-column (mobile look), centered on desktop.

const C = {
  espresso: '#241C17', espresso2: '#322720', stone: '#ECE5D9', card: '#FFFFFF',
  ink: '#231D18', sub: '#6E655A', cream: '#F4EDE1', creamSub: 'rgba(244,237,225,0.66)',
  red: '#E63B2E', redDeep: '#C42E22', redBg: '#FBE7E2', yellow: '#F5A623',
  line: '#DBD3C5', green: '#2E7D55'
};

function CChip({ children, dark }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 14px', borderRadius: 999, background: dark ? 'rgba(244,237,225,0.1)' : C.card, border: '1px solid ' + (dark ? 'rgba(244,237,225,0.18)' : C.line) }}>
      <Icon d={ICON.shieldCheck} size={14} color={dark ? C.yellow : C.green} />
      <span style={{ fontSize: 12.5, fontWeight: 800, color: dark ? C.cream : C.ink, letterSpacing: '0.01em' }}>{children}</span>
    </div>);

}

function CHeader() {
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 40, padding: '13px 20px', background: C.espresso, borderBottom: '1px solid rgba(244,237,225,0.08)' }}>
      <div style={{ maxWidth: 820, margin: '0 auto', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <a href="https://www.lemonsquad.com" aria-label="Lemon Squad home" data-track="varC-logo">
        <img src={window.LS_LOGO_WHITE} alt="Lemon Squad" style={{ height: 24, display: 'block' }} />
      </a>
      <a href={`tel:${phoneNumber.replace(/[^0-9]/g, '')}`} data-track="varC-call" style={{ display: 'flex', alignItems: 'center', gap: 6, textDecoration: 'none', color: C.cream, fontWeight: 700, fontSize: 13.5 }}>
        <Icon d={ICON.phone} size={15} color={C.yellow} /> {phoneNumber}
      </a>
      </div>
    </header>);

}

function CRedButton({ children, onClick, track, sub }) {
  return (
    <button data-track={track} onClick={onClick} style={{ width: '100%', border: 'none', cursor: 'pointer', fontFamily: FONT, padding: '12px 18px', borderRadius: 16, background: C.red, color: '#fff', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, boxShadow: '0 16px 34px -14px rgba(230,59,46,0.7)' }}>
      <span style={{ display: 'flex', alignItems: 'center', gap: 9, fontWeight: 800, fontSize: 16.5, whiteSpace: 'nowrap' }}>{children} <Icon d={ICON.arrow} size={18} color="#fff" /></span>
      <span style={{ fontSize: 11.5, fontWeight: 600, opacity: 0.9, whiteSpace: 'nowrap' }}>{sub || COPY.ctaSub}</span>
    </button>);

}

const C_INSPECTORS = [
{ name: 'Marcus T.', region: 'Southeast', years: 18, insp: '4,200+', note: 'Former BMW master tech' },
{ name: 'Diane W.', region: 'Midwest', years: 12, insp: '3,100+', note: 'ASE-certified specialist' },
{ name: 'Raymond K.', region: 'West', years: 23, insp: '6,800+', note: 'Former dealership lead' }];


function CFAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{ background: C.card, borderRadius: 22, padding: '4px 18px', border: '1px solid ' + C.line, boxShadow: '0 14px 34px -26px rgba(60,45,25,0.5)' }}>
      {FAQ_ITEMS.map((it, i) =>
      <div key={i} style={{ borderBottom: i < FAQ_ITEMS.length - 1 ? '1px solid ' + C.line : 'none' }}>
          <button data-track={`varC-faq-${i}`} onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', background: 'none', border: 'none', cursor: 'pointer', fontFamily: FONT, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '17px 2px', textAlign: 'left' }}>
            <span style={{ fontWeight: 800, fontSize: 14.5, color: C.ink, lineHeight: 1.35 }}>{it.q}</span>
            <div style={{ width: 24, height: 24, borderRadius: '50%', background: open === i ? C.red : C.stone, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'background .2s' }}>
              <Icon d={ICON.chevronDown} size={15} color={open === i ? '#fff' : C.sub} style={{ transform: open === i ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }} />
            </div>
          </button>
          <div style={{ maxHeight: open === i ? 360 : 0, overflow: 'hidden', transition: 'max-height .28s ease' }}>
            <div style={{ fontSize: 13.5, lineHeight: 1.6, color: C.sub, padding: '0 2px 17px' }}>{it.a}</div>
          </div>
        </div>
      )}
    </div>);

}

function VariantC() {
  const book = () => openLead({ v: 'C' });
  const wide = useIsWide(920);
  const W = wide ? 820 : MAXW;
  const steps = COPY.steps.map((s) => ({ t: s[0], d: s[1] }));
  const scenarios = [
  { ic: ICON.eye, t: 'A quick once-over', d: 'Have a pro scan the car with you before you commit.' },
  { ic: ICON.wallet, t: 'Negotiate with facts', d: 'Use what they spot to ask for a better price.' },
  { ic: ICON.clock, t: 'At the lot or driveway', d: 'Book ahead, tap the link when you’re at the car.' },
  { ic: ICON.user, t: 'Not a “car person”?', d: 'A specialist asks the seller the right questions for you.' }];

  const rows = [['Format', 'Live video on your phone', 'Inspector on-site'], ['Coverage', 'Guided visual + drive', 'Full diagnostics'], ['When', 'While you’re at the car', 'Final deep-dive'], ['Price', '$59.99', 'From $220']];
  return (
    <div style={{ fontFamily: FONT, background: C.stone, color: C.ink, minHeight: '100%' }}>
      <LeadSheet theme={{ accent: C.red, eyebrow: 'Get ready' }} />
      <CHeader />

      {/* HERO — espresso block */}
      <section style={{ background: C.espresso, padding: '26px 20px 40px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -60, right: -80, width: 260, height: 260, borderRadius: '50%', background: 'radial-gradient(circle, rgba(245,166,35,0.16), transparent 70%)' }} />
        <div style={{ maxWidth: W, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
          <div style={{ marginBottom: 18 }}><CChip dark>America’s Largest &amp; Most Trusted · since 2005</CChip></div>
          <h1 style={{ fontSize: wide ? 34 : 31, lineHeight: 1.13, fontWeight: 800, letterSpacing: '-0.03em', color: C.cream, margin: '0 auto 14px', maxWidth: 760 }}>
            {COPY.heroLead}<span style={{ color: C.yellow }}>{COPY.heroAccent}</span>
          </h1>
          <p style={{ fontSize: wide ? 16.5 : 15.5, lineHeight: 1.55, color: C.creamSub, margin: '0 auto 20px', maxWidth: 600 }}>
            {COPY.heroSub}
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 11, maxWidth: 520, margin: '0 auto', textAlign: 'left' }}>
            {COPY.bullets.map((b, i) =>
            <div key={i} style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
                <div style={{ width: 24, height: 24, borderRadius: '50%', background: 'rgba(245,166,35,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                  <Icon d={ICON.check} size={14} color={C.yellow} sw={2.5} />
                </div>
                <div style={{ fontSize: 14.5, lineHeight: 1.45, color: C.cream }}><strong>{b[0]}</strong>{b[1]}</div>
              </div>
            )}
          </div>
        </div>
        <div style={{ maxWidth: W, margin: '30px auto 0', position: 'relative', zIndex: 5 }}>
          <div style={{ background: C.card, borderRadius: 24, padding: 22, border: '1px solid ' + C.line, boxShadow: '0 24px 50px -26px rgba(45,30,15,0.45)' }}>
            <CRedButton onClick={book} track="varC-cta-hero">Get an expert ready</CRedButton>
            <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginTop: 18, paddingTop: 18, borderTop: '1px solid ' + C.line }}>
              <div style={{ width: 52, height: 52, borderRadius: '50%', flexShrink: 0, background: C.redBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon d={ICON.shieldCheck} size={26} color={C.red} />
              </div>
              <div>
                <div style={{ fontWeight: 800, fontSize: 14.5, color: C.ink }}>100% satisfaction guarantee</div>
                <div style={{ fontSize: 12.5, color: C.sub, lineHeight: 1.45, marginTop: 2 }}>Not happy with your session? Get your money back.</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* HOW IT WORKS — vertical timeline */}
      <section style={{ padding: '38px 20px 24px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.red, marginBottom: 6 }}>How it works</div>
          <h2 style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.025em', color: C.ink, margin: '0 0 22px' }}>Three steps, zero stress.</h2>
          <div style={{ position: 'relative', paddingLeft: 6 }}>
            <div style={{ position: 'absolute', left: 23, top: 14, bottom: 14, width: 2, background: C.line }} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {steps.map((s, i) =>
              <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', position: 'relative' }}>
                  <div style={{ width: 36, height: 36, borderRadius: '50%', background: C.espresso, color: C.cream, fontWeight: 800, fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, zIndex: 1, boxShadow: '0 0 0 5px ' + C.stone }}>{i + 1}</div>
                  <div style={{ background: C.card, borderRadius: 16, padding: '14px 16px', border: '1px solid ' + C.line, flex: 1, boxShadow: '0 10px 26px -22px rgba(60,45,25,0.5)' }}>
                    <div style={{ fontWeight: 800, fontSize: 15.5, color: C.ink, marginBottom: 3 }}>{s.t}</div>
                    <div style={{ fontSize: 13.5, lineHeight: 1.5, color: C.sub }}>{s.d}</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* SEE IT IN ACTION */}
      <section style={{ padding: '14px 20px 36px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.red, marginBottom: 6 }}>See it in action</div>
          <h2 style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', color: C.ink, margin: '0 0 8px' }}>See how it works.</h2>
          <p style={{ fontSize: 14, lineHeight: 1.55, color: C.sub, margin: 0 }}>A quick explainer on how a Live Video Inspection works — it plays on its own; tap for sound.</p>
          <div style={{ marginTop: 16, borderRadius: 20, overflow: 'hidden', boxShadow: '0 26px 60px -28px rgba(60,45,25,0.55)' }}>
            <ExplainerVideo mode="ambient" rounded={20} variant="C" />
          </div>
        </div>
      </section>

      {/* WHEN IT HELPS — 2x2 grid */}
      <section style={{ padding: '20px 20px 36px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <h2 style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', color: C.ink, margin: '0 0 16px' }}>Made for moments like these</h2>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {scenarios.map((s, i) =>
            <div key={i} style={{ background: C.card, borderRadius: 18, padding: 16, border: '1px solid ' + C.line }}>
                <div style={{ width: 40, height: 40, borderRadius: 12, background: C.stone, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 11 }}>
                  <Icon d={s.ic} size={20} color={C.red} />
                </div>
                <div style={{ fontWeight: 800, fontSize: 14.5, color: C.ink, marginBottom: 4, lineHeight: 1.2 }}>{s.t}</div>
                <div style={{ fontSize: 12.5, lineHeight: 1.45, color: C.sub }}>{s.d}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* PAYS FOR ITSELF */}
      <section style={{ padding: '0 20px 36px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.red, marginBottom: 8 }}>Pays for itself</div>
          <h2 style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', color: C.ink, margin: '0 0 12px', lineHeight: 1.2 }}>{COPY.valueHead}</h2>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: C.sub, margin: 0 }}><strong style={{ color: C.ink, textDecoration: 'underline' }}>{COPY.valueLead}</strong>{COPY.valueBody}</p>
          <div style={{ display: 'flex', alignItems: 'stretch', gap: 14, marginTop: 18, padding: '16px 18px', borderRadius: 16, background: C.card, border: '1px solid ' + C.line, boxShadow: '0 12px 30px -24px rgba(60,45,25,0.5)' }}>
            <div style={{ textAlign: 'center', flexShrink: 0 }}>
              <div style={{ fontSize: 28, fontWeight: 800, color: C.red, lineHeight: 1, letterSpacing: '-0.02em' }}>$59.99</div>
              <div style={{ fontSize: 10.5, color: C.sub, marginTop: 4 }}>Live session</div>
            </div>
            <div style={{ width: 1, background: C.line }} />
            <div style={{ fontSize: 13.5, lineHeight: 1.5, color: C.sub }}>vs. a single missed issue — a repaint, a leak, worn tires — that can cost <strong style={{ color: C.ink }}>hundreds or thousands</strong> after you’ve signed.</div>
          </div>
        </div>
      </section>

      {/* ASK ANYTHING — assistant (dark espresso) */}
      <section style={{ padding: '0 20px 38px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.red, marginBottom: 8 }}>New to this?</div>
          <h2 style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', color: C.ink, margin: '0 0 8px' }}>Ask us anything.</h2>
          <p style={{ fontSize: 14, lineHeight: 1.55, color: C.sub, margin: '0 0 16px' }}>Tap a question — the assistant explains it and sets you up when you’re ready.</p>
          <LiveAssistant variant="C" theme={{ accent: C.red, panelBg: C.espresso, headerBg: C.espresso2, botBg: 'rgba(244,237,225,0.1)', botText: C.cream, botBorder: 'rgba(244,237,225,0.16)', ink: C.cream, sub: C.creamSub, border: 'rgba(244,237,225,0.14)', online: C.yellow, chipBg: 'rgba(244,237,225,0.08)', chipBorder: 'rgba(244,237,225,0.2)', chipText: C.cream, fieldBg: 'rgba(244,237,225,0.08)', fieldText: C.cream }} />
        </div>
      </section>

      {/* STATS band — espresso */}
      <section style={{ background: C.espresso, padding: '30px 20px' }}>
        <div style={{ maxWidth: W, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '22px 12px' }}>
          {[['America’s #1', 'largest & most trusted'], ['Since 2005', '20 years on buyers’ side'], ['All 50 states', 'nationwide coverage'], ['Specialists', 'it’s all they do']].map((s, i) =>
          <div key={i} style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', color: C.yellow }}>{s[0]}</div>
              <div style={{ fontSize: 12, color: C.creamSub, marginTop: 3 }}>{s[1]}</div>
            </div>
          )}
        </div>
      </section>

      {/* INSPECTOR ROSTER */}
      <section style={{ padding: '36px 0 14px' }}>
        <div style={{ maxWidth: W, margin: '0 auto', padding: '0 20px' }}>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.red, marginBottom: 6 }}>The people behind the call</div>
          <h2 style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', color: C.ink, margin: '0 0 8px' }}>Specialists who do only this</h2>
          <p style={{ fontSize: 14, lineHeight: 1.55, color: C.sub, margin: 0 }}>Not general mechanics — professional inspection specialists. Pre-purchase inspections are <strong style={{ color: C.ink }}>all they do</strong>.</p>
        </div>
        <div style={{ maxWidth: W, margin: '0 auto', display: 'flex', gap: 12, overflowX: 'auto', padding: '18px 20px 6px' }}>
          {C_INSPECTORS.map((p, i) =>
          <div key={i} style={{ flex: '0 0 192px', background: C.card, border: '1px solid ' + C.line, borderRadius: 18, overflow: 'hidden', boxShadow: '0 12px 30px -24px rgba(60,45,25,0.5)' }}>
              <PhotoSlot warm label={`${p.name} — headshot`} tag="INSPECTOR PHOTO" ratio="1 / 1" radius={0} icon={ICON.user} />
              <div style={{ padding: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
                  <div style={{ fontWeight: 800, fontSize: 15, color: C.ink }}>{p.name}</div>
                  <Icon d={ICON.shieldCheck} size={15} color={C.green} />
                </div>
                <div style={{ fontSize: 11.5, color: C.red, fontWeight: 700, marginBottom: 9 }}>Certified Specialist</div>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  <span style={{ fontSize: 11, fontWeight: 700, color: C.sub, background: C.stone, padding: '3px 8px', borderRadius: 7 }}>{p.years} yrs</span>
                  <span style={{ fontSize: 11, fontWeight: 700, color: C.sub, background: C.stone, padding: '3px 8px', borderRadius: 7 }}>{p.insp}</span>
                </div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section style={{ padding: '26px 20px 36px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <h2 style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', color: C.ink, margin: '0 0 16px' }}>Confidence, in their words</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {TESTIMONIALS.slice(0, 3).map((t, i) =>
            <div key={i} style={{ background: C.card, borderRadius: 18, padding: 18, border: '1px solid ' + C.line }}>
                <Stars value={t.stars} size={14} />
                <div style={{ fontSize: 14.5, lineHeight: 1.55, color: C.ink, margin: '10px 0 14px' }}>“{t.text}”</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Avatar name={t.name} size={36} />
                  <div><div style={{ fontWeight: 800, fontSize: 13.5, color: C.ink }}>{t.name}</div><div style={{ fontSize: 12, color: C.sub }}>{t.loc} · Verified buyer</div></div>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* LIVE VS FULL — bold card */}
      <section style={{ padding: '0 20px 36px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <h2 style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', color: C.ink, margin: '0 0 16px' }}>Live vs. Full Inspection</h2>
          <div style={{ background: C.card, borderRadius: 20, overflow: 'hidden', border: '1px solid ' + C.line, boxShadow: '0 14px 34px -26px rgba(60,45,25,0.5)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>
              <div style={{ padding: '14px 12px' }} />
              <div style={{ padding: '14px 10px', textAlign: 'center', background: C.red }}>
                <div style={{ fontWeight: 800, fontSize: 14, color: '#fff' }}>Live</div>
                <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.8)', fontWeight: 600 }}>this page</div>
              </div>
              <a href="https://www.lemonsquad.com/services" data-track="varC-full-link" style={{ padding: '14px 10px', textAlign: 'center', background: C.stone, textDecoration: 'none', display: 'block' }}>
                <div style={{ fontWeight: 800, fontSize: 14, color: C.sub }}>Full</div>
                <div style={{ fontSize: 10, color: C.sub, fontWeight: 600 }}>on-site ↗</div>
              </a>
            </div>
            {rows.map((r, i) =>
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderTop: '1px solid ' + C.line }}>
                <div style={{ padding: '13px 12px', fontSize: 12, fontWeight: 800, color: C.sub, textTransform: 'uppercase', letterSpacing: '0.03em' }}>{r[0]}</div>
                <div style={{ padding: '13px 10px', fontSize: 13, color: C.ink, fontWeight: 800, textAlign: 'center', background: 'rgba(230,59,46,0.05)' }}>{r[1]}</div>
                <div style={{ padding: '13px 10px', fontSize: 13, color: C.sub, fontWeight: 600, textAlign: 'center' }}>{r[2]}</div>
              </div>
            )}
          </div>
          <a href="https://www.lemonsquad.com/services" data-track="varC-full-link2" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 14, fontSize: 13, fontWeight: 700, color: C.red, textDecoration: 'none' }}>Want a full hands-on inspection? See options ↗</a>
        </div>
      </section>

      {/* BOOK CTA — espresso card */}
      <section style={{ padding: '0 20px 36px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <div style={{ background: C.espresso, borderRadius: 24, padding: 26, textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', bottom: -70, left: -40, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, rgba(230,59,46,0.22), transparent 70%)' }} />
            <div style={{ position: 'relative' }}>
              <h2 style={{ fontSize: 25, fontWeight: 800, letterSpacing: '-0.025em', color: C.cream, margin: '0 0 8px' }}>Get your inspection link</h2>
              <p style={{ fontSize: 14, color: C.creamSub, lineHeight: 1.5, margin: '0 auto 18px', maxWidth: 320 }}>Get your link now and use it whenever you go to see the car. Backed by our 100% satisfaction guarantee.</p>
              <CRedButton onClick={book} track="varC-cta-book">Get an expert ready</CRedButton>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: '0 20px 40px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <h2 style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', color: C.ink, margin: '0 0 16px' }}>Questions, answered</h2>
          <CFAQ />
        </div>
      </section>

      <LiveFooter />
      <FloatingCTA onClick={book} track="varC-sticky-cta" />
    </div>);

}

window.VariantC = VariantC;