// ============================================================
// BessProofMobile — "Proof in numbers" (Commercial Battery Storage · Wise Blue)
// Desktop section reproduces the approved Battery Storage infographic
// (payback vs. long-term resiliency timeline, demand-charge share bar,
// project IRR range slider). A purpose-built MOBILE layout mirrors the
// approved AuditFinancial / SolProofStrip mobile pattern: monogram wash,
// eyebrow + 2-line headline, blocked sections with mono labels,
// accent-edged cards, and the desktop's split-bar + range-bar visuals.
// ============================================================
const BESS_AMBER = '#D4A24C';
const BESS_GREEN = '#7FA88A';

const BessProofMobile = () => {
  // Timeline: YEAR 0 → YEAR 10
  //   Payback band                 0 → 6 yrs  (60% of bar, amber stripe)
  //   Longterm operational resil.  6 → 10 yrs (40% of bar, green)
  const PAYBACK_PCT = 40;
  const TICKS = [
    { label: 'YEAR 0',  pos: 0 },
    { label: 'YR 2',    pos: 20 },
    { label: 'YR 4',    pos: 40 },
    { label: 'YR 6',    pos: 60 },
    { label: 'YR 8',    pos: 80 },
    { label: 'YEAR 15', pos: 100 }
  ];

  return (
    <>
    {/* ============================================================
        DESKTOP / TABLET (≥ 900px) — approved editorial dashboard
       ============================================================ */}
    <section className="bess-fin-desktop" style={{ background: 'var(--gi-wise-blue)', color: '#fff', padding: '128px 0', position: 'relative', overflow: 'hidden' }}>
      {/* Faint monogram watermark */}
      <div aria-hidden="true" style={{
        position: 'absolute', right: -160, bottom: -160, opacity: 0.045,
        pointerEvents: 'none', zIndex: 0
      }}>
        <img src={`${window.GI_BASE}assets/logos/monogram-white.svg`} alt="" style={{ width: 620, height: 620 }} />
      </div>

      {/* Charge-pulse strip — animated horizontal line, runs across the top */}
      <div aria-hidden="true" style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 2,
        background: 'rgba(255,255,255,0.06)', overflow: 'hidden', zIndex: 0
      }}>
        <div style={{
          position: 'absolute', top: 0, left: 0, height: 2, width: 220,
          background: `linear-gradient(90deg, transparent, ${BESS_AMBER} 50%, transparent)`,
          animation: 'bess-charge-sweep 6.5s var(--gi-ease) infinite'
        }} />
      </div>

      <div style={{ position: 'relative', zIndex: 1, maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>

        {/* Header */}
        <div data-gi-reveal style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 96, alignItems: 'end', marginBottom: 96 }}>
          <div>
            <div style={{ marginBottom: 22 }}><Eyebrow onDark>Proof in numbers</Eyebrow></div>
            <h2 style={{ font: '500 48px/54px var(--ff-sans)', letterSpacing: '-0.026em', color: '#fff', margin: 0, textWrap: 'balance' }}>
              Short pay-back.{' '}
              <span style={{ color: BESS_GREEN }}>Long-term resilience.</span>
            </h2>
          </div>
          <p style={{ font: '400 16px/26px var(--ff-sans)', color: 'rgba(255,255,255,0.7)', margin: 0, maxWidth: 480, paddingBottom: 6, textWrap: 'pretty' }}>
            Commercial battery storage reduces operating costs, improves
            energy flexibility, and generates attractive long-term returns
            under current Canadian utility and incentive structures.
          </p>
        </div>

        {/* ============================================================
            TIMELINE — Payback vs. Longterm operational resiliency
           ============================================================ */}
        <div data-gi-reveal style={{ marginBottom: 56 }}>
          {/* Tick labels */}
          <div style={{ position: 'relative', height: 28, marginBottom: 6 }}>
            {TICKS.map((t) =>
              <div key={t.label} style={{
                position: 'absolute',
                left: `${t.pos}%`,
                transform: t.pos === 0 ? 'translateX(0)' : t.pos === 100 ? 'translateX(-100%)' : 'translateX(-50%)',
                fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', fontWeight: 500,
                whiteSpace: 'nowrap'
              }}>{t.label}</div>
            )}
          </div>

          {/* Tick marks */}
          <div style={{ position: 'relative', height: 8, marginBottom: 10 }}>
            {TICKS.map((t) =>
              <div key={t.label} aria-hidden="true" style={{
                position: 'absolute',
                left: `${t.pos}%`,
                top: 0,
                width: 1, height: 8,
                background: 'rgba(255,255,255,0.32)'
              }} />
            )}
          </div>

          {/* Bar */}
          <div style={{
            position: 'relative', height: 84,
            display: 'flex',
            border: '1px solid rgba(255,255,255,0.12)'
          }}>
            {/* Payback (amber, diagonal stripe) */}
            <div style={{
              width: `${PAYBACK_PCT}%`,
              background: BESS_AMBER,
              backgroundImage: `repeating-linear-gradient(135deg, rgba(15,33,51,0.18) 0 6px, transparent 6px 14px)`,
              position: 'relative'
            }} />
            {/* Longterm operational resiliency (green) */}
            <div style={{
              width: `${100 - PAYBACK_PCT}%`,
              background: BESS_GREEN
            }} />
          </div>

          {/* Legend + stats */}
          <div style={{
            marginTop: 36,
            display: 'grid',
            gridTemplateColumns: `${PAYBACK_PCT}% 1fr`,
            gap: 0
          }}>
            {/* Payback stat */}
            <div style={{ paddingRight: 32, borderRight: '1px solid rgba(255,255,255,0.14)' }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 18
              }}>
                <span aria-hidden="true" style={{ width: 10, height: 10, background: BESS_AMBER, display: 'inline-block' }} />
                <span style={{
                  fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                  textTransform: 'uppercase', color: BESS_AMBER, fontWeight: 500
                }}>Payback</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 18 }}>
                <div style={{
                  font: '500 88px/1 var(--ff-sans)', letterSpacing: '-0.035em',
                  color: '#fff', fontFeatureSettings: '"tnum" 1'
                }}>4–6</div>
                <div style={{
                  font: '400 18px/24px var(--ff-sans)', color: 'rgba(255,255,255,0.7)'
                }}>yrs</div>
              </div>
              <p style={{
                font: '400 14px/22px var(--ff-sans)', color: 'rgba(255,255,255,0.68)',
                margin: 0, maxWidth: 320, textWrap: 'pretty'
              }}>Payback driven by peak-demand reduction, grid-service revenue, and stacked Canadian incentives.</p>
            </div>

            {/* Resiliency stat */}
            <div style={{ paddingLeft: 32 }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 18
              }}>
                <span aria-hidden="true" style={{ width: 10, height: 10, background: BESS_GREEN, display: 'inline-block' }} />
                <span style={{
                  fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                  textTransform: 'uppercase', color: BESS_GREEN, fontWeight: 500
                }}>Longterm operational resiliency</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 18 }}>
                <div style={{
                  font: '500 88px/1 var(--ff-sans)', letterSpacing: '-0.035em',
                  color: '#fff', fontFeatureSettings: '"tnum" 1'
                }}>10–15</div>
                <div style={{
                  font: '400 18px/24px var(--ff-sans)', color: 'rgba(255,255,255,0.7)'
                }}>year cycle warranty</div>
              </div>
              <p style={{
                font: '400 14px/22px var(--ff-sans)', color: 'rgba(255,255,255,0.68)',
                margin: 0, maxWidth: 480, textWrap: 'pretty'
              }}>Battery systems are designed for daily cycling and long-term operational use, with warranty-backed performance across the project lifecycle.</p>
            </div>
          </div>
        </div>

        {/* Divider */}
        <div style={{ height: 1, background: 'rgba(255,255,255,0.14)', margin: '72px 0 64px' }} />

        {/* ============================================================
            BOTTOM ROW — Demand-charge bar + Project IRR slider
           ============================================================ */}
        <div data-gi-reveal style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'start'
        }}>
          {/* LEFT — Demand-charge share bar */}
          <div>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', fontWeight: 500,
              marginBottom: 24
            }}>Demand charges · share of C&amp;I bill</div>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 28 }}>
              <div style={{
                font: '500 88px/1 var(--ff-sans)', letterSpacing: '-0.035em',
                color: BESS_AMBER, fontFeatureSettings: '"tnum" 1'
              }}>30–50%</div>
              <div style={{
                font: '400 18px/24px var(--ff-sans)', color: 'rgba(255,255,255,0.78)'
              }}>targeted by storage</div>
            </div>

            <div style={{
              display: 'grid', gridTemplateColumns: '40% 60%',
              height: 56, border: '1px solid rgba(255,255,255,0.18)'
            }}>
              <div style={{
                background: BESS_AMBER,
                display: 'flex', alignItems: 'center',
                padding: '0 18px',
                fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: 'var(--gi-deep-ink)', fontWeight: 600
              }}>Demand · 40</div>
              <div style={{
                background: 'rgba(255,255,255,0.05)',
                display: 'flex', alignItems: 'center',
                padding: '0 18px',
                fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', fontWeight: 500,
                borderLeft: '1px solid rgba(255,255,255,0.18)'
              }}>Energy · 60</div>
            </div>
          </div>

          {/* RIGHT — Project IRR slider */}
          <div>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', fontWeight: 500,
              marginBottom: 24
            }}>Project IRR · modelled returns</div>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 28 }}>
              <div style={{
                font: '500 88px/1 var(--ff-sans)', letterSpacing: '-0.035em',
                color: BESS_GREEN, fontFeatureSettings: '"tnum" 1'
              }}>12–25%</div>
            </div>

            {/* Slider track */}
            <div style={{ position: 'relative', height: 56 }}>
              {/* Base track */}
              <div style={{
                position: 'absolute', top: 22, left: 0, right: 0, height: 4,
                background: 'rgba(255,255,255,0.10)'
              }} />
              {/* Active range — 12% to 25% on a 0–30% scale → 40% to 83.3% */}
              <div style={{
                position: 'absolute', top: 22, left: '40%', width: '43.33%', height: 4,
                background: BESS_GREEN
              }} />
              {/* Left handle */}
              <div style={{
                position: 'absolute', top: 12, left: '40%', transform: 'translateX(-50%)',
                width: 24, height: 24, borderRadius: '50%',
                background: 'var(--gi-wise-blue)',
                border: `2px solid ${BESS_GREEN}`
              }} />
              {/* Right handle */}
              <div style={{
                position: 'absolute', top: 12, left: '83.33%', transform: 'translateX(-50%)',
                width: 24, height: 24, borderRadius: '50%',
                background: 'var(--gi-wise-blue)',
                border: `2px solid ${BESS_GREEN}`
              }} />
              {/* Scale labels */}
              <div style={{
                position: 'absolute', top: 38, left: 0, right: 0, height: 18,
                fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', fontWeight: 500
              }}>
                {[
                  { label: '0%', pos: 0 },
                  { label: '10%', pos: 33.33 },
                  { label: '20%', pos: 66.66 },
                  { label: '30%', pos: 100 }
                ].map((t) =>
                  <span key={t.label} style={{
                    position: 'absolute',
                    left: `${t.pos}%`,
                    transform: t.pos === 0 ? 'translateX(0)' : t.pos === 100 ? 'translateX(-100%)' : 'translateX(-50%)'
                  }}>{t.label}</span>
                )}
              </div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 64 }}>
          <a href="#" style={{
            font: '500 14px/22px var(--ff-sans)', color: BESS_AMBER,
            borderBottom: '1px solid currentColor', paddingBottom: 2, display: 'inline-flex', gap: 8
          }}>See the full Canadian incentives guide →</a>
        </div>
      </div>

      {/* keyframes */}
      <style>{`
        @keyframes bess-charge-sweep {
          0%   { transform: translateX(-220px); }
          50%  { transform: translateX(calc(100vw + 220px)); }
          100% { transform: translateX(calc(100vw + 220px)); }
        }
      `}</style>
    </section>

    {/* ============================================================
        MOBILE (< 900px) — purpose-built vertical layout
       ============================================================ */}
    <section className="bess-fin-mobile" aria-label="Proof in numbers">
      {/* Subtle monogram watermark, dialled way back for small screens */}
      <div aria-hidden="true" className="m-fin-watermark">
        <img src={`${window.GI_BASE}assets/logos/monogram-white.svg`} alt="" />
      </div>

      <div className="m-fin-inner">
        {/* Header */}
        <header className="m-fin-head" data-gi-reveal>
          <div className="m-fin-eyebrow"><Eyebrow onDark>Proof in numbers</Eyebrow></div>
          <h2 className="m-fin-title">
            Short pay-back.<br />
            <span style={{ color: BESS_GREEN }}>Long-term resilience.</span>
          </h2>
          <p className="m-fin-lede">
            Commercial battery storage reduces operating costs, improves
            energy flexibility, and generates attractive long-term returns
            under current Canadian utility and incentive structures.
          </p>
        </header>

        {/* Lifecycle — compact proportional ribbon + two accent-edged cards */}
        <div className="m-fin-block">
          <div className="m-fin-blocklabel">
            <span>15-year window</span>
            <span className="m-fin-total">Yr 0 → 15</span>
          </div>

          {/* Compact ribbon — same chart logic as desktop, scaled for mobile */}
          <div className="m-ribbon" data-gi-reveal>
            <div className="m-ribbon-ticks">
              <span style={{ left: '0%', transform: 'translateX(0)' }}>Yr 0</span>
              <span style={{ left: `${PAYBACK_PCT}%`, transform: 'translateX(-50%)' }}>Yr 6</span>
              <span style={{ right: 0 }}>Yr 15</span>
            </div>
            <div className="m-ribbon-bar">
              <div className="m-ribbon-pay" style={{ width: `${PAYBACK_PCT}%` }} />
              <div className="m-ribbon-gen" style={{ width: `${100 - PAYBACK_PCT}%` }} />
              <div className="m-ribbon-split" style={{ left: `${PAYBACK_PCT}%` }} />
            </div>
          </div>

          <div className="m-life-cards" data-gi-reveal-stagger>
            <div className="m-life-card pay">
              <div className="m-life-label" style={{ color: BESS_AMBER }}>
                <span className="m-life-chip" style={{ background: BESS_AMBER }} />
                Payback
              </div>
              <div className="m-life-fig">
                <span className="m-life-num">4–6</span>
                <span className="m-life-unit">yrs</span>
              </div>
              <p className="m-life-note">
                Payback driven by peak-demand reduction, grid-service
                revenue, and stacked Canadian incentives.
              </p>
            </div>

            <div className="m-life-card gen">
              <div className="m-life-label" style={{ color: BESS_GREEN }}>
                <span className="m-life-chip" style={{ background: BESS_GREEN }} />
                Longterm operational resiliency
              </div>
              <div className="m-life-fig">
                <span className="m-life-num">10–15</span>
                <span className="m-life-unit">year cycle warranty</span>
              </div>
              <p className="m-life-note">
                Battery systems are built for daily cycling and long-term use,
                with warranty-backed performance across the project lifecycle.
              </p>
            </div>
          </div>
        </div>

        {/* Proof points — two stacked cards */}
        <div className="m-fin-block">
          <div className="m-fin-blocklabel"><span>What it returns</span></div>

          <div className="m-proofs" data-gi-reveal-stagger>
            <div className="m-proof">
              <div className="m-proof-label">Demand charges · share of C&amp;I bill</div>
              <div className="m-proof-figure" style={{ color: BESS_AMBER }}>30–50%</div>
              <div className="m-proof-desc">targeted by storage</div>
              <div className="m-proof-split" role="img" aria-label="40 percent demand, 60 percent energy">
                <div className="m-proof-demand">Demand · 40</div>
                <div className="m-proof-energy">Energy · 60</div>
              </div>
            </div>

            <div className="m-proof">
              <div className="m-proof-label">Project IRR · modelled returns</div>
              <div className="m-proof-figure" style={{ color: BESS_GREEN }}>12–25%</div>
              <div className="m-proof-desc">internal rate of return</div>
              <div className="m-proof-bar" role="img" aria-label="12 to 25 percent on a 0 to 30 percent scale">
                <div className="m-proof-track" />
                <div className="m-proof-fill" style={{ left: '40%', width: '43.33%', background: BESS_GREEN }} />
                <div className="m-proof-dot" style={{ left: '40%' }} />
                <div className="m-proof-dot" style={{ left: '83.33%' }} />
              </div>
              <div className="m-proof-scale"><span>0%</span><span>10%</span><span>20%</span><span>30%</span></div>
            </div>
          </div>
        </div>

        {/* CTA */}
        <a href="#" className="m-fin-cta">See the full Canadian incentives guide →</a>
      </div>
    </section>

    {/* Display toggle + mobile styles */}
    <style>{`
      .bess-fin-mobile { display: none; }
      @media (max-width: 900px) {
        .bess-fin-desktop { display: none; }
        .bess-fin-mobile { display: block; }
      }

      .bess-fin-mobile {
        background: var(--gi-wise-blue);
        color: #fff;
        position: relative;
        overflow: hidden;
        padding: 72px 0 84px;
      }
      .m-fin-watermark {
        position: absolute; right: -150px; bottom: -120px;
        opacity: 0.035; pointer-events: none; z-index: 0;
      }
      .m-fin-watermark img { width: 360px; height: 360px; display: block; }

      .m-fin-inner {
        position: relative; z-index: 1;
        padding: 0 24px;
        max-width: 520px; margin: 0 auto;
      }

      /* Header */
      .m-fin-eyebrow { margin-bottom: 18px; }
      .m-fin-title {
        font: 600 33px/40px var(--ff-sans);
        letter-spacing: -0.022em;
        color: #fff; margin: 0;
        text-wrap: balance;
      }
      .m-fin-lede {
        font: 400 16px/26px var(--ff-sans);
        color: rgba(255,255,255,0.68);
        margin: 20px 0 0;
        text-wrap: pretty;
      }

      /* Block scaffolding */
      .m-fin-block { margin-top: 52px; }
      .m-fin-blocklabel {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: 12px;
        font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
        letter-spacing: 0.18em; text-transform: uppercase;
        color: rgba(255,255,255,0.55);
        padding-bottom: 16px; margin-bottom: 24px;
        border-bottom: 1px solid rgba(255,255,255,0.12);
      }
      .m-fin-total { color: ${BESS_AMBER}; }

      /* Compact lifecycle ribbon */
      .m-ribbon { margin-bottom: 22px; }
      .m-ribbon-ticks {
        position: relative; height: 18px; margin-bottom: 10px;
      }
      .m-ribbon-ticks span {
        position: absolute; top: 0;
        font-family: var(--ff-mono); font-size: 10.5px; font-weight: 500;
        letter-spacing: 0.14em; text-transform: uppercase;
        color: rgba(255,255,255,0.5); white-space: nowrap;
      }
      .m-ribbon-bar {
        position: relative; display: flex; height: 56px;
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 2px; overflow: hidden;
      }
      .m-ribbon-pay {
        background: ${BESS_AMBER};
        background-image: repeating-linear-gradient(135deg, rgba(15,33,51,0.18) 0 6px, transparent 6px 14px);
      }
      .m-ribbon-gen { background: ${BESS_GREEN}; }
      .m-ribbon-split {
        position: absolute; top: -6px; bottom: -6px; width: 1px;
        background: #fff; opacity: 0.85;
      }

      /* Lifecycle cards — left accent edge keeps the two-colour language */
      .m-life-cards { display: grid; gap: 14px; }
      .m-life-card {
        border: 1px solid rgba(255,255,255,0.12);
        border-left-width: 3px;
        background: rgba(255,255,255,0.02);
        padding: 20px 22px 22px;
      }
      .m-life-card.pay { border-left-color: ${BESS_AMBER}; }
      .m-life-card.gen { border-left-color: ${BESS_GREEN}; }
      .m-life-label {
        display: flex; align-items: center; gap: 9px;
        font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
        letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5;
        margin-bottom: 16px;
      }
      .m-life-chip { width: 8px; height: 8px; display: inline-block; flex: none; }
      .m-life-fig { display: flex; align-items: baseline; gap: 10px; }
      .m-life-num {
        font: 500 46px/1 var(--ff-sans); letter-spacing: -0.03em;
        color: #fff; font-feature-settings: "tnum" 1; white-space: nowrap;
      }
      .m-life-unit { font: 400 14px/20px var(--ff-sans); color: rgba(255,255,255,0.6); }
      .m-life-note {
        font: 400 14px/21px var(--ff-sans);
        color: rgba(255,255,255,0.62);
        margin: 14px 0 0; text-wrap: pretty;
      }

      /* Proof cards */
      .m-proofs { display: grid; gap: 16px; }
      .m-proof {
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.02);
        padding: 26px 24px 28px;
      }
      .m-proof-label {
        font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
        letter-spacing: 0.16em; text-transform: uppercase;
        color: rgba(255,255,255,0.55); margin-bottom: 16px;
        line-height: 1.5;
      }
      .m-proof-figure {
        font: 500 64px/1 var(--ff-sans); letter-spacing: -0.035em;
        font-feature-settings: "tnum" 1; white-space: nowrap;
      }
      .m-proof-desc {
        font: 400 15px/22px var(--ff-sans);
        color: rgba(255,255,255,0.72); margin-top: 12px;
      }

      /* 30–50% — demand / energy split bar (matches desktop) */
      .m-proof-split {
        display: flex; height: 44px; margin-top: 22px;
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 2px; overflow: hidden;
      }
      .m-proof-demand {
        width: 40%; background: ${BESS_AMBER};
        display: flex; align-items: center; padding-left: 16px;
        font: 500 11px var(--ff-mono); color: #0F2133; letter-spacing: 0.14em;
        text-transform: uppercase; white-space: nowrap; overflow: hidden;
      }
      .m-proof-energy {
        width: 60%; background: rgba(255,255,255,0.06);
        display: flex; align-items: center; padding-left: 16px;
        font: 500 11px var(--ff-mono); color: rgba(255,255,255,0.55); letter-spacing: 0.14em;
        text-transform: uppercase; white-space: nowrap; overflow: hidden;
      }

      /* IRR — range bar on a 0–30% scale (matches desktop) */
      .m-proof-bar { position: relative; height: 16px; margin-top: 26px; }
      .m-proof-track {
        position: absolute; top: 6px; left: 0; right: 0; height: 4px;
        background: rgba(255,255,255,0.08); border-radius: 2px;
      }
      .m-proof-fill {
        position: absolute; top: 3px; height: 10px; border-radius: 2px;
      }
      .m-proof-dot {
        position: absolute; top: 0; width: 16px; height: 16px;
        transform: translateX(-50%); border-radius: 50%;
        background: var(--gi-wise-blue); border: 2px solid ${BESS_GREEN};
      }
      .m-proof-scale {
        display: flex; justify-content: space-between;
        margin-top: 14px;
        font-family: var(--ff-mono); font-size: 10.5px; font-weight: 500;
        letter-spacing: 0.18em; text-transform: uppercase;
        color: rgba(255,255,255,0.5);
      }

      /* CTA */
      .m-fin-cta {
        display: inline-flex; gap: 8px; margin-top: 52px;
        font: 500 15px/22px var(--ff-sans); color: ${BESS_AMBER};
        border-bottom: 1px solid currentColor; padding-bottom: 3px;
      }

      /* Narrow phones (~360px and below) */
      @media (max-width: 360px) {
        .m-fin-title { font-size: 30px; line-height: 37px; }
        .m-proof-figure { font-size: 56px; }
        .m-life-num { font-size: 40px; }
      }
    `}</style>
    </>);

};

Object.assign(window, { BessProofMobile });