// ============================================================
// LedProofStripMobile — "Proof in numbers" (LED Lighting · Wise Blue)
// Desktop section is the approved infographic, reproduced verbatim
// from src/led-hero-process.jsx. A purpose-built MOBILE layout
// (< 900px) is added beneath it, mirroring the house pattern
// established on the Energy Audit page (AuditFinancial) and the
// Commercial Solar page (SolProofStrip).
//
// Same fonts (Inter / JetBrains Mono), same brand palette
// (Wise Blue #0F2133, Sage #5E8F6D, Gold #D4A24C), same monogram
// watermark, same spacing language. Nothing reinterpreted.
// ============================================================
const LED_AMBER_M = '#D4A24C';
const LED_SAGE = 'var(--gi-sage-accent)';

const LedProofStripMobile = () => {
  // Lifecycle proportions: 15-yr commercial LED fixture life. Payback (1–3 yrs)
  // shown at its upper bound so the segment honestly visualizes the worst case.
  // Net savings = remainder of fixture life.
  const TOTAL_YEARS = 15;
  const PAYBACK_END = 3;
  const paybackPct = (PAYBACK_END / TOTAL_YEARS) * 100; // 20
  const savingsPct = 100 - paybackPct; // 80
  const yearTicks = [0, 3, 6, 9, 12, 15];

  return (
  <>
    {/* ============================================================
        DESKTOP / TABLET (≥ 900px) — approved infographic, unchanged
       ============================================================ */}
    <section className="led-fin-desktop" style={{
      background: 'var(--gi-wise-blue)', color: '#fff',
      padding: '128px 0',
      position: 'relative',
      overflow: 'hidden'
    }}>
      {/* faint amber sweep — top edge */}
      <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, ${LED_AMBER_M} 50%, transparent)`,
          animation: 'led-amber-sweep 6.5s var(--gi-ease) infinite'
        }} />
      </div>

      {/* Decorative monogram — faint, anchored bottom-right */}
      <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>

      {/* Decorative thin vertical hairlines — top-right, mirrors panel-row motif */}
      <div aria-hidden="true" style={{
        position: 'absolute',
        top: 64, right: 48,
        display: 'flex', gap: 8,
        opacity: 0.42,
        pointerEvents: 'none',
        zIndex: 0
      }}>
        {[0, 1, 2, 3, 4, 5, 6, 7].map((n) =>
        <span key={n} style={{
          width: 1,
          height: n % 2 === 0 ? 24 : 14,
          background: 'rgba(159,189,174,0.95)',
          display: 'block'
        }} />
        )}
      </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: 80
        }}>
          <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'
            }}>
              Pay it back in three.{' '}
              <span style={{ color: LED_AMBER_M }}>Save for fifteen.</span>
            </h2>
          </div>
          <p style={{
            font: '400 16px/26px var(--ff-sans)',
            color: 'rgba(255,255,255,0.7)', margin: 0, textWrap: 'pretty',
            maxWidth: 480, paddingBottom: 6
          }}>
            The economics of a commercial LED retrofit, visualized across the fixture
            lifecycle. Real reductions from completed GI installations.
          </p>
        </div>

        {/* ============================================================
            PRIMARY VISUAL — 15-year fixture lifecycle ribbon.
           ============================================================ */}
        <div data-gi-reveal style={{ marginBottom: 72 }}>
          {/* Year axis */}
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            font: '500 11px var(--ff-mono)',
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.42)',
            marginBottom: 14
          }}>
            {yearTicks.map((y, i) => (
              <span key={y}>{i === 0 ? 'Year 0' : i === yearTicks.length - 1 ? 'Year 15' : `Yr ${y}`}</span>
            ))}
          </div>

          {/* Tick marks above bar */}
          <svg viewBox="0 0 1344 12" preserveAspectRatio="none"
            style={{ width: '100%', height: 12, display: 'block', marginBottom: 6 }}>
            {yearTicks.map((y) => {
              const x = (y / TOTAL_YEARS) * 1344;
              return (
                <line key={y} x1={x} y1="0" x2={x} y2="10"
                  stroke="rgba(255,255,255,0.32)" strokeWidth="1" />
              );
            })}
          </svg>

          {/* The bar itself */}
          <div style={{
            display: 'flex', height: 96,
            border: '1px solid rgba(255,255,255,0.18)',
            borderRadius: 2, overflow: 'hidden',
            position: 'relative'
          }}>
            {/* Payback segment — amber, with subtle diagonal stripe */}
            <div style={{
              width: `${paybackPct}%`,
              background: LED_AMBER_M,
              position: 'relative'
            }}>
              <svg width="100%" height="100%" preserveAspectRatio="none"
                style={{ position: 'absolute', inset: 0 }}>
                <defs>
                  <pattern id="led-amber-stripe" patternUnits="userSpaceOnUse"
                    width="10" height="10" patternTransform="rotate(45)">
                    <line x1="0" y1="0" x2="0" y2="10" stroke="#0F2133"
                      strokeWidth="1" strokeOpacity="0.18" />
                  </pattern>
                </defs>
                <rect width="100%" height="100%" fill="url(#led-amber-stripe)" />
              </svg>
            </div>
            {/* Savings segment — sage, solid */}
            <div style={{
              width: `${savingsPct}%`,
              background: 'var(--gi-sage-accent)'
            }} />
            {/* Boundary marker — vertical line at the payback/savings split */}
            <div style={{
              position: 'absolute',
              left: `${paybackPct}%`, top: -8, bottom: -8,
              width: 1, background: '#fff', opacity: 0.85
            }} />
          </div>

          {/* Caption row — numerals aligned with segments */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: `${paybackPct}% ${savingsPct}%`,
            marginTop: 28
          }}>
            <div style={{ paddingRight: 28 }}>
              <div style={{
                font: '500 11px var(--ff-mono)',
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: LED_AMBER_M, marginBottom: 14,
                display: 'flex', alignItems: 'center', gap: 8
              }}>
                <span style={{ width: 8, height: 8, background: LED_AMBER_M, display: 'inline-block' }} />
                Payback
              </div>
              <div style={{
                font: '500 64px/1 var(--ff-sans)', letterSpacing: '-0.035em',
                color: '#fff', fontFeatureSettings: '"tnum" 1', marginBottom: 14,
                display: 'flex', alignItems: 'baseline', gap: 10
              }}>
                1–3
                <span style={{ font: '500 22px var(--ff-sans)', color: 'rgba(255,255,255,0.55)' }}>yrs</span>
              </div>
              <div style={{
                font: '400 13px/20px var(--ff-sans)',
                color: 'rgba(255,255,255,0.62)', maxWidth: 240
              }}>
                Retrofit pays for itself through energy savings and saveONenergy incentives.
              </div>
            </div>

            <div style={{ paddingLeft: 28, borderLeft: '1px solid rgba(255,255,255,0.18)' }}>
              <div style={{
                font: '500 11px var(--ff-mono)',
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--gi-sage-accent)', marginBottom: 14,
                display: 'flex', alignItems: 'center', gap: 8
              }}>
                <span style={{ width: 8, height: 8, background: 'var(--gi-sage-accent)', display: 'inline-block' }} />
                Net savings · over fixture life
              </div>
              <div style={{
                font: '500 64px/1 var(--ff-sans)', letterSpacing: '-0.035em',
                color: '#fff', fontFeatureSettings: '"tnum" 1', marginBottom: 14,
                display: 'flex', alignItems: 'baseline', gap: 10
              }}>
                15
                <span style={{ font: '500 22px var(--ff-sans)', color: 'rgba(255,255,255,0.55)' }}>year rated fixture life</span>
              </div>
              <div style={{
                font: '400 13px/20px var(--ff-sans)',
                color: 'rgba(255,255,255,0.62)', maxWidth: 420
              }}>
                Commercial-grade LED fixtures continuing to deliver reduced
                lighting load and demand charges well past payback.
              </div>
            </div>
          </div>
        </div>

        {/* ============================================================
            SUPPORTING ROW — two compact visual stats
           ============================================================ */}
        <div data-gi-reveal style={{
          display: 'grid', gridTemplateColumns: '1.35fr 1fr', gap: 72,
          paddingTop: 56,
          borderTop: '1px solid rgba(255,255,255,0.18)'
        }}>
          {/* (1) Aryzta load reduction — stacked bar carries the meaning */}
          <div>
            <div style={{
              font: '500 11px var(--ff-mono)',
              letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.42)', marginBottom: 18
            }}>
              Aryzta Foods · lighting demand · 115.15 → 38.97 kW
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 20 }}>
              <span style={{
                font: '500 72px/1 var(--ff-sans)', letterSpacing: '-0.035em',
                color: LED_AMBER_M, fontFeatureSettings: '"tnum" 1'
              }}>66.2%</span>
              <span style={{ font: '500 18px/24px var(--ff-sans)', color: '#fff' }}>
                lighting load eliminated
              </span>
            </div>
            <div style={{
              display: 'flex', height: 44,
              border: '1px solid rgba(255,255,255,0.18)',
              borderRadius: 2, overflow: 'hidden'
            }}>
              <div style={{
                width: '66.2%', background: LED_AMBER_M,
                display: 'flex', alignItems: 'center', paddingLeft: 16,
                font: '500 11px var(--ff-mono)', color: '#0F2133',
                letterSpacing: '0.14em'
              }}>SAVED · 66</div>
              <div style={{
                width: '33.8%', background: 'rgba(255,255,255,0.06)',
                display: 'flex', alignItems: 'center', paddingLeft: 16,
                font: '500 11px var(--ff-mono)', color: 'rgba(255,255,255,0.55)',
                letterSpacing: '0.14em'
              }}>LED · 34</div>
            </div>
          </div>

          {/* (2) Typical reduction range — range bar placed on a 0–100% scale */}
          <div>
            <div style={{
              font: '500 11px var(--ff-mono)',
              letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.42)', marginBottom: 18
            }}>
              Typical lighting reduction · completed GI retrofits
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 20 }}>
              <span style={{
                font: '500 72px/1 var(--ff-sans)', letterSpacing: '-0.035em',
                color: 'var(--gi-sage-accent)', fontFeatureSettings: '"tnum" 1'
              }}>40–70%</span>
            </div>
            <div style={{ position: 'relative', height: 44 }}>
              {/* Track */}
              <div style={{
                position: 'absolute', left: 0, right: 0, top: 20, height: 4,
                background: 'rgba(255,255,255,0.08)', borderRadius: 2
              }} />
              {/* 40–70 of a 0–100 scale → left 40%, right 30% */}
              <div style={{
                position: 'absolute',
                left: '40%', right: '30%', top: 17, height: 10,
                background: 'var(--gi-sage-accent)', borderRadius: 2
              }} />
              {/* Endpoint dots */}
              <div style={{
                position: 'absolute', left: 'calc(40% - 4px)', top: 14, width: 16, height: 16,
                background: 'var(--gi-wise-blue)',
                border: '2px solid var(--gi-sage-accent)', borderRadius: '50%'
              }} />
              <div style={{
                position: 'absolute', left: 'calc(70% - 12px)', top: 14, width: 16, height: 16,
                background: 'var(--gi-wise-blue)',
                border: '2px solid var(--gi-sage-accent)', borderRadius: '50%'
              }} />
              {/* Scale labels */}
              <div style={{
                position: 'absolute', top: 32, left: 0, right: 0,
                display: 'flex', justifyContent: 'space-between',
                font: '500 10px var(--ff-mono)',
                color: 'rgba(255,255,255,0.4)',
                letterSpacing: '0.14em'
              }}>
                <span>0%</span>
                <span>25%</span>
                <span>50%</span>
                <span>75%</span>
                <span>100%</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes led-amber-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
        Mirrors the AuditFinancial / SolProofStrip mobile pattern:
        monogram wash, eyebrow + 2-line headline, blocked sections
        with mono labels, accent-edged cards, the desktop's split-bar
        + range-bar visuals.
       ============================================================ */}
    <section className="led-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">
            Pay it back in three.<br />
            <span style={{ color: LED_SAGE }}>Save for fifteen.</span>
          </h2>
          <p className="m-fin-lede">
            The economics of a commercial LED retrofit, shown with real
            reductions from completed GI installations.
          </p>
        </header>

        {/* Lifecycle — compact proportional ribbon + two accent-edged cards */}
        <div className="m-fin-block">
          <div className="m-fin-blocklabel">
            <span>15-year lifecycle</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: `${paybackPct}%`, transform: 'translateX(-50%)' }}>Yr 3</span>
              <span style={{ right: 0 }}>Yr 15</span>
            </div>
            <div className="m-ribbon-bar">
              <div className="m-ribbon-pay" style={{ width: `${paybackPct}%` }} />
              <div className="m-ribbon-gen" style={{ width: `${savingsPct}%` }} />
              <div className="m-ribbon-split" style={{ left: `${paybackPct}%` }} />
            </div>
          </div>

          <div className="m-life-cards" data-gi-reveal-stagger>
            <div className="m-life-card pay">
              <div className="m-life-label" style={{ color: LED_AMBER_M }}>
                <span className="m-life-chip" style={{ background: LED_AMBER_M }} />
                Payback
              </div>
              <div className="m-life-fig">
                <span className="m-life-num">1–3</span>
                <span className="m-life-unit">yrs</span>
              </div>
              <p className="m-life-note">
                Retrofit pays for itself through energy savings and saveONenergy incentives.
              </p>
            </div>

            <div className="m-life-card gen">
              <div className="m-life-label" style={{ color: 'var(--gi-sage-accent)' }}>
                <span className="m-life-chip" style={{ background: 'var(--gi-sage-accent)' }} />
                Net savings · over fixture life
              </div>
              <div className="m-life-fig">
                <span className="m-life-num">15</span>
                <span className="m-life-unit">year rated fixture life</span>
              </div>
              <p className="m-life-note">
                Commercial-grade LED fixtures continuing to deliver reduced
                lighting load and demand charges well past payback.
              </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">Aryzta Foods · lighting demand · 115.15 → 38.97 kW</div>
              <div className="m-proof-figure" style={{ color: LED_AMBER_M }}>66.2%</div>
              <div className="m-proof-desc">lighting load eliminated</div>
              <div className="m-proof-split" role="img" aria-label="66 percent saved, 34 percent remaining LED load">
                <div className="m-proof-saved">SAVED · 66</div>
                <div className="m-proof-grid">LED · 34</div>
              </div>
            </div>

            <div className="m-proof">
              <div className="m-proof-label">Typical lighting reduction · completed GI retrofits</div>
              <div className="m-proof-figure" style={{ color: 'var(--gi-sage-accent)' }}>40–70%</div>
              <div className="m-proof-desc">across completed GI retrofits</div>
              <div className="m-proof-bar" role="img" aria-label="40 to 70 percent on a 0 to 100 percent scale">
                <div className="m-proof-track" />
                <div className="m-proof-fill" style={{ left: '40%', width: '30%', background: 'var(--gi-sage-accent)' }} />
                <div className="m-proof-dot" style={{ left: '40%' }} />
                <div className="m-proof-dot" style={{ left: '70%' }} />
              </div>
              <div className="m-proof-scale"><span>0%</span><span>50%</span><span>100%</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>

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

      .led-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: ${LED_AMBER_M}; }

      /* 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: ${LED_AMBER_M};
        background-image: repeating-linear-gradient(135deg, rgba(15,33,51,0.18) 0 6px, transparent 6px 14px);
      }
      .m-ribbon-gen { background: var(--gi-sage-accent); }
      .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: ${LED_AMBER_M}; }
      .m-life-card.gen { border-left-color: var(--gi-sage-accent); }
      .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;
      }

      /* 66.2% — saved / remaining LED 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-saved {
        width: 66.2%; background: ${LED_AMBER_M};
        display: flex; align-items: center; padding-left: 16px;
        font: 500 11px var(--ff-mono); color: #0F2133; letter-spacing: 0.14em;
      }
      .m-proof-grid {
        width: 33.8%; 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;
      }

      /* 40–70% — range bar on a 0–100% 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 var(--gi-sage-accent);
      }
      .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);
      }

      /* 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>
  </>);

};