// content-benefits.jsx -- Benefits and health guide pages for InfraredSaunaSpot
// Depends on: components.jsx globals (React CDN, no build step)

const { useState } = React;

// ============================================================
// SHARED SUB-COMPONENTS
// ============================================================

function QuickAnswerBox({ children }) {
  return (
    <div style={{
      padding: '22px 26px',
      background: 'var(--paper-2)',
      border: '1px solid var(--line)',
      borderLeft: '4px solid var(--ember-deep)',
      borderRadius: 14,
      margin: '28px 0',
    }}>
      <div className="eyebrow" style={{ marginBottom: 10 }}>Quick answer</div>
      <div style={{ fontFamily: 'var(--serif)', fontSize: 17, lineHeight: 1.65, color: 'var(--text)' }}>
        {children}
      </div>
    </div>
  );
}

function EvidenceBadge({ level }) {
  const styles = {
    'Strong evidence': { background: 'var(--ember-deep)', color: '#fff' },
    'Moderate evidence': { background: 'var(--ember)', color: '#fff' },
    'Promising - limited trials': { background: 'var(--line)', color: 'var(--text-2)' },
    'Real - overstated online': { background: 'var(--line)', color: 'var(--text-2)' },
    'Modest effect': { background: 'var(--line)', color: 'var(--text-2)' },
    'Moderate evidence (recovery)': { background: 'var(--ember)', color: '#fff' },
  };
  const s = styles[level] || { background: 'var(--line)', color: 'var(--text-2)' };
  return (
    <span className="chip" style={{ background: s.background, color: s.color, fontSize: 10, letterSpacing: '0.06em' }}>
      {level}
    </span>
  );
}

function ProtocolStep({ number, label, children }) {
  return (
    <div style={{ display: 'flex', gap: 18, paddingBottom: 22 }}>
      <div style={{
        flexShrink: 0, width: 34, height: 34, borderRadius: 999,
        background: 'var(--ink)', color: 'var(--paper)',
        fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.06em',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>{number}</div>
      <div style={{ flex: 1, paddingTop: 4 }}>
        <div style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 14.5, marginBottom: 6 }}>{label}</div>
        <div style={{ fontSize: 14.5, color: 'var(--text-2)', lineHeight: 1.6 }}>{children}</div>
      </div>
    </div>
  );
}

function RailNewsletter() {
  return (
    <div style={{
      padding: '22px 20px',
      background: 'var(--ink)',
      borderRadius: 14,
      marginBottom: 22,
    }}>
      <div className="eyebrow" style={{ color: 'var(--ember)', marginBottom: 10 }}>The Heat Lab</div>
      <div style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.25, marginBottom: 10, letterSpacing: '-0.012em', color: 'var(--paper)' }}>
        New research, once a week.
      </div>
      <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', lineHeight: 1.5, marginBottom: 14 }}>
        We read the sauna literature so you don't have to. No supplements to sell. No brand deals.
      </p>
      <input placeholder="Your email" style={{
        width: '100%', boxSizing: 'border-box', padding: '10px 14px',
        border: '1px solid rgba(255,255,255,0.15)', borderRadius: 8, fontSize: 13.5,
        background: 'rgba(255,255,255,0.08)', color: 'var(--paper)', marginBottom: 8,
        outline: 'none', fontFamily: 'var(--sans)',
      }} />
      <button className="btn btn-ember" style={{ width: '100%', justifyContent: 'center', padding: '10px 0' }}>
        Subscribe
      </button>
    </div>
  );
}

function RailShare() {
  return (
    <div style={{ padding: '18px 20px', border: '1px solid var(--line)', borderRadius: 14, marginBottom: 22 }}>
      <div className="eyebrow" style={{ marginBottom: 12 }}>Share this guide</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
          { label: 'Copy link', icon: 'L' },
          { label: 'Share on X', icon: 'X' },
          { label: 'Share on Facebook', icon: 'F' },
        ].map((s, i) => (
          <button key={i} className="btn btn-ghost" style={{ justifyContent: 'flex-start', gap: 10, padding: '8px 12px', fontSize: 13 }}>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ember-deep)', width: 16 }}>{s.icon}</span>
            {s.label}
          </button>
        ))}
      </div>
    </div>
  );
}

function MobStickyBar({ href, label }) {
  return (
    <div style={{
      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 30,
      background: 'var(--ink)', borderTop: '1px solid rgba(255,255,255,0.1)',
      padding: '12px 18px',
      display: 'flex', alignItems: 'center', gap: 14,
    }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 14, color: 'var(--paper)', letterSpacing: '-0.01em' }}>
          InfraredSaunaSpot
        </div>
        <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.1em', color: 'var(--ember)', textTransform: 'uppercase' }}>
          Top-tested picks
        </div>
      </div>
      <a href={href || '/best/best-infrared-saunas/'} className="btn btn-ember" style={{ padding: '10px 18px', whiteSpace: 'nowrap', fontSize: 13 }}>
        {label || 'Read the buyers guide →'}
      </a>
    </div>
  );
}

// ============================================================
// DATA
// ============================================================

const detoxTocItems = [
  'How the detox mechanism works',
  'What sweat actually contains',
  'Heavy metals: the real data',
  'A closer look at sweat composition',
  'BPA, phthalates, and organic pollutants',
  'Does an infrared sauna really detox you',
  'Science-backed benefits beyond detox',
  'What one session does vs consistent practice',
  'Who benefits most - and who should be cautious',
  'Session protocol for detox goals',
  'How to support natural detoxification',
  'FAQ',
];

const detoxTimeline = [
  { period: 'Session 1-3', change: '600-800 ml fluid loss, relaxation response, temporary skin appearance improvement' },
  { period: 'Week 1-2', change: 'Adaptation - some initial fatigue, body adjusting to thermal load' },
  { period: 'Week 3-4', change: 'Sleep quality improvement common (subjective)' },
  { period: 'Week 4-6', change: 'Cardiovascular markers begin shifting' },
  { period: 'Week 8-12', change: 'Pain scores measurably reduced in research protocols, BP improvement detectable' },
  { period: '6+ months', change: 'Sustained conditioning, collagen changes measurable' },
];

const detoxFaq = [
  {
    q: 'Does infrared sauna really detox your body?',
    a: 'Partially. Infrared sauna does facilitate heavy metal elimination through sweat - lead at 10-30x blood concentration, mercury detectable in sweat even when absent from blood. As a secondary detox pathway (primary being liver and kidneys), consistent sessions may reduce circulating heavy metal burden over weeks and months. For other toxins, the evidence is weaker.',
  },
  {
    q: 'How long does it take to see detox benefits from infrared sauna?',
    a: 'For heavy metal reduction: weeks to months of consistent 3-4x/week use. For the broader benefits (cardiovascular, pain, cortisol) that run alongside detox: 4-8 weeks is the typical research timeframe for measurable changes.',
  },
  {
    q: 'Can infrared sauna remove heavy metals from the body?',
    a: 'It appears to contribute meaningfully to heavy metal clearance - particularly lead, mercury, and cadmium. The amounts per session are small (1-5 mcg of lead is a reasonable estimate), but over consistent practice the cumulative effect is plausible. It is not a substitute for chelation therapy in cases of clinical heavy metal toxicity.',
  },
  {
    q: 'Is sweating in an infrared sauna the same as detoxing?',
    a: 'Not the same - but related. Sweating is one mechanism the body uses to eliminate trace minerals and metals. Infrared sauna produces more sweat at lower ambient temperature than steam or traditional sauna, which may make it a more efficient sweat-based clearance method. It is not the same as liver-based detoxification.',
  },
  {
    q: 'How many sessions per week for detox benefits?',
    a: 'Research protocols showing measurable changes typically use 3-5 sessions per week, 30-45 minutes each, over 6-12 weeks. Two sessions per week will produce some effect but slower than the studied dose.',
  },
  {
    q: 'Is infrared sauna better than regular sauna for detox?',
    a: 'Possibly. Infrared sauna produces more sweat at lower ambient temperatures - which means less cardiovascular strain per unit of sweat output. Whether the sweat composition differs meaningfully from traditional sauna in terms of toxin concentration has not been definitively studied in head-to-head trials.',
  },
  {
    q: 'What toxins are actually released when you sweat?',
    a: 'Mostly nothing dramatic. Sweat is about 99% water plus electrolytes like sodium, potassium, and chloride, with trace urea and lactate. The compounds people label toxins - heavy metals such as lead, cadmium, arsenic, and mercury, plus small amounts of BPA and phthalates - show up only in micrograms or nanograms per session. Real, but a small fraction of what the liver and kidneys clear over the same period.',
  },
  {
    q: 'Can an infrared sauna remove BPA and plastic-related chemicals?',
    a: 'Some studies have detected BPA and phthalate metabolites in sweat, sometimes when they were low or undetectable in blood, which shows sweat is one exit route for them. The amounts are small next to what leaves through urine, and no controlled trial has shown sauna use meaningfully lowers total body burden of these chemicals. Treat it as a minor supportive pathway, not a cleanse.',
  },
  {
    q: 'How can I support natural detox beyond the sauna?',
    a: 'The daily basics matter more than any single session: drink enough water so urine stays pale yellow, protect deep sleep so the brain can clear waste, eat soluble fiber to carry bile-bound compounds out through stool, and reduce exposure through filtered water and less food stored in plastic. Infrared sauna adds a modest sweat-based route on top of these, not a replacement for them.',
  },
];

const detoxRelated = [
  { href: '/compare/infrared-sauna-vs-steam-sauna/', cat: 'Compare', title: 'Infrared sauna vs steam sauna: which is worth it', read: '9 min read' },
  { href: '/how-to/how-long-to-stay-in-infrared-sauna/', cat: 'How-To', title: 'How long to stay in an infrared sauna by goal', read: '7 min read' },
  { href: '/best/best-low-emf-infrared-sauna/', cat: 'Best Of', title: 'Best low-EMF infrared saunas tested and ranked', read: '14 min read' },
];

const farIRTocItems = [
  'What far infrared means and why wavelength matters',
  'Benefit-by-benefit evidence review',
  'Far infrared vs full spectrum - does the upgrade matter',
  'Optimal session protocol by goal',
  'Timeline - when to expect results',
  'FAQ',
];

const farIRProtocol = [
  { goal: 'Cardiovascular', temp: '140-155°F (60-68°C)', duration: '30-45 min', frequency: '3-5x/week' },
  { goal: 'Chronic pain', temp: '130-145°F (54-63°C)', duration: '20-35 min', frequency: '3-4x/week' },
  { goal: 'Skin and collagen', temp: '120-140°F (49-60°C)', duration: '20-30 min', frequency: '3-4x/week' },
  { goal: 'Relaxation / stress', temp: '120-135°F (49-57°C)', duration: '20-30 min', frequency: 'As needed' },
];

const farIRFaq = [
  {
    q: 'What does far infrared sauna do for the body?',
    a: 'At 5.6-1000 microns, far infrared penetrates 1.5-3 inches into tissue, raising core temperature and triggering thermoregulatory sweating. The best-documented effects are cardiovascular conditioning (BP reduction, improved cardiac output), chronic pain management, and cortisol reduction. Skin and mental health benefits have solid preliminary data.',
  },
  {
    q: 'Is far infrared better than regular sauna?',
    a: 'For most home use, yes - practically speaking. Far infrared heats tissue directly at lower ambient temperatures (120-155°F vs 175-220°F / 49-68°C vs 79-104°C traditional), requiring less electrical infrastructure, producing more sweat with less cardiovascular strain, and fitting a standard indoor space. The cardiovascular and pain evidence was largely generated using infrared saunas.',
  },
  {
    q: 'How often should I use far infrared sauna to see benefits?',
    a: 'Research protocols showing measurable results use 3-5 sessions per week, 30-45 minutes each, for 6-12 weeks. Twice a week produces some benefit but slower. For maintenance after initial adaptation, 3x/week appears to be the sustainable minimum for ongoing cardiovascular effect.',
  },
  {
    q: 'Does far infrared sauna help with weight loss?',
    a: 'Indirectly. A 30-45 minute session produces approximately 200-600 kcal equivalent heat expenditure. This is real caloric output - roughly equivalent to a moderate-pace walk - but it is not a substitute for exercise, which provides muscular adaptation and metabolic changes infrared cannot replicate. As a supplement to exercise, the additional caloric output is meaningful over months.',
  },
  {
    q: 'What is the difference between far infrared and full spectrum sauna?',
    a: 'Full spectrum adds near infrared (0.76-1.4 microns) and mid infrared (1.4-3 microns) to the standard far infrared output. Near infrared specifically drives collagen synthesis and skin surface improvement - far infrared alone doesn\'t reach this effectively. For cardiovascular and pain benefits, far infrared alone is sufficient. Full spectrum costs $500-$2,000 more typically.',
  },
  {
    q: 'How long to sit in far infrared sauna?',
    a: 'For beginners: 15-20 minutes at 110-125°F (43-52°C). After 2-3 weeks of adaptation: 30-45 minutes at 130-155°F (54-68°C). Research protocols showing measurable cardiovascular and pain benefits consistently use 30-45 minute sessions. Beyond 45 minutes shows diminishing returns for most goals and increasing dehydration risk.',
  },
];

const farIRRelated = [
  { href: '/guides/infrared-sauna-detox/', cat: 'Guide', title: 'Infrared sauna detox: what the evidence actually says', read: '12 min read' },
  { href: '/compare/far-infrared-vs-full-spectrum/', cat: 'Compare', title: 'Far infrared vs full spectrum sauna: is the upgrade worth it', read: '9 min read' },
  { href: '/best/best-infrared-saunas/', cat: 'Best Of', title: 'Best infrared saunas of 2026 - tested and ranked', read: '14 min read' },
];

// ============================================================
// COMPONENT 1: InfraredSaunaDetox - Desktop
// ============================================================

function InfraredSaunaDetoxDesktop() {
  return (
    <div style={{ fontFamily: 'var(--sans)', color: 'var(--text)', background: 'var(--paper)' }}>
      <SiteHeader />

      {/* Article header */}
      <div style={{ padding: '40px 40px 0', maxWidth: 760, margin: '0 auto' }}>

        {/* Breadcrumb */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
          <a href="/guides/" className="mono" style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ember-deep)', textDecoration: 'none' }}>Guides</a>
          <span style={{ width: 3, height: 3, borderRadius: 999, background: 'var(--text-3)' }} />
          <span className="mono" style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-3)' }}>Infrared Sauna Detox</span>
        </div>

        <h1 style={{ margin: 0, fontSize: 60, lineHeight: 1.0, letterSpacing: '-0.025em' }}>
          What Infrared Sauna Detox Actually Does - and What It Doesn't
        </h1>

        <p style={{ marginTop: 22, fontSize: 19, color: 'var(--text-2)', lineHeight: 1.55, fontFamily: 'var(--serif)' }}>
          Most detox claims around infrared sauna collapse under scrutiny. A few don't. Here is what the peer-reviewed data actually shows about sweating, toxin elimination, and why consistent sessions still produce measurable health benefits.
        </p>

        {/* Author row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 26, paddingBottom: 24, borderBottom: '1px solid var(--line)' }}>
          <Ph w={44} h={44} label="MB" style={{ borderRadius: 999, flexShrink: 0 }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 14, letterSpacing: '-0.005em' }}>Dr. Mira Brandt, PhD</div>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.08em', color: 'var(--text-3)', marginTop: 2 }}>
              Integrative Medicine - Reviewed by Dr. Mark Chen
            </div>
          </div>
          <Disclose />
          <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.08em', color: 'var(--text-3)' }}>May 2026</div>
        </div>

      </div>

      {/* 3-column grid body */}
      <div style={{ padding: '40px 40px 100px' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '240px minmax(0, 760px) 280px',
          gap: 52,
          maxWidth: 1380,
          margin: '0 auto',
        }}>

          {/* Left: TOC */}
          <aside>
            <TOC active={0} items={detoxTocItems} />
          </aside>

          {/* Center: article body */}
          <div>

            <QuickAnswerBox>
              Infrared sauna supports detoxification through sweating - but as a secondary pathway, not a primary one. The liver and kidneys handle 90%+ of toxin clearance. Where infrared sauna adds measurable value: lead concentrations in sweat run 10-30x higher than blood levels, and mercury appears in sweat even when blood levels are undetectable. Combined with strong cardiovascular and pain-reduction data, the case for regular sessions is solid - just not for the reasons most wellness content claims.
            </QuickAnswerBox>

            {/* Section 1: How the detox mechanism works */}
            <h2 style={{ margin: '40px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>How the Detox Mechanism Works</h2>

            <p style={{ fontSize: 16.5, lineHeight: 1.65, marginBottom: 16 }}>
              Far infrared wavelengths (5.6-1000 microns) penetrate 1.5-3 inches below the skin surface. Core temperature rises 1-2°C during a typical 30-45 minute session at 140-155°F (60-68°C). The body responds with thermoregulatory sweating - the same mechanism as exercise, triggered at lower ambient temperature than steam or traditional sauna.
            </p>

            <Ph w="100%" h={280} label="DIAGRAM - INFRARED PENETRATION DEPTH vs CONVECTIVE HEAT" style={{ borderRadius: 12, margin: '8px 0 22px' }} />

            <p style={{ fontSize: 16.5, lineHeight: 1.65 }}>
              The distinction from steam sauna matters here. Steam heats the air to 110-120°F (43-49°C) at 95-100% humidity - your body struggles to dissipate heat through evaporation. Infrared heats tissue directly at 120-150°F (49-65°C) with 10-20% humidity. You sweat more, at lower ambient temperature, with less cardiovascular strain.
            </p>

            {/* Section 2: What sweat actually contains */}
            <h2 style={{ margin: '48px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>What Sweat Actually Contains</h2>

            <p style={{ fontSize: 16.5, lineHeight: 1.65, marginBottom: 22 }}>
              Water and electrolytes - sodium, potassium, chloride - account for over 99% of sweat by composition. This is not a meaningful detox pathway for most substances. The relevant question is whether the remaining trace fractions contain anything useful.
            </p>

            {/* 3-column stat cards */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14, margin: '0 0 22px' }}>
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 12, padding: 18, textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 38, letterSpacing: '-0.025em', color: 'var(--text)', lineHeight: 1.1, marginBottom: 8 }}>99%+</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-3)', lineHeight: 1.4 }}>water and electrolytes in sweat</div>
              </div>
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 12, padding: 18, textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 38, letterSpacing: '-0.025em', color: 'var(--ember-deep)', lineHeight: 1.1, marginBottom: 8 }}>10-30x</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-3)', lineHeight: 1.4 }}>lead concentration in sweat vs blood (2022 PMC)</div>
              </div>
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 12, padding: 18, textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 38, letterSpacing: '-0.025em', color: 'var(--text)', lineHeight: 1.1, marginBottom: 8 }}>100%</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-3)', lineHeight: 1.4 }}>of tested subjects showed mercury in sweat</div>
              </div>
            </div>

            <p style={{ fontSize: 16.5, lineHeight: 1.65 }}>
              These concentrations are real. They represent milligrams per session, not grams. Context matters: you are not replacing liver and kidney function by sweating. You are adding a secondary clearance pathway that, over consistent sessions, may meaningfully reduce circulating heavy metal burden.
            </p>

            {/* Section 3: Heavy metals - the real data */}
            <h2 style={{ margin: '48px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>Heavy Metals: the Real Data</h2>

            <p style={{ fontSize: 16.5, lineHeight: 1.65, marginBottom: 18 }}>
              The strongest evidence for sweat-based detox involves heavy metals specifically. A 2022 PMC study found lead concentrations in sweat running 10-30x higher than blood levels in the same participants. Cadmium was detectable in the sweat of 80% of participants who showed no measurable cadmium in blood. Mercury appeared in 100% of sweat samples tested, regardless of blood levels. These findings have been replicated in multiple independent labs.
            </p>

            <div style={{ padding: '20px 24px', background: 'var(--paper-2)', border: '1px solid var(--line)', borderLeft: '3px solid var(--ember-deep)', borderRadius: 10, margin: '0 0 18px' }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>The honest caveat</div>
              <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.65, color: 'var(--text-2)' }}>
                The absolute quantities remain small. A single 45-minute session at maximum sweat output removes perhaps 1-5 mcg of lead - meaningful over weeks and months of consistent practice, not significant in a single session. Anyone presenting infrared sauna as a primary treatment for heavy metal toxicity is misrepresenting the data.
              </p>
            </div>

            {/* Section: A closer look at sweat composition */}
            <h2 style={{ margin: '48px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>A Closer Look at Sweat Composition</h2>

            <p style={{ fontSize: 16.5, lineHeight: 1.65, marginBottom: 18 }}>
              Break sweat down by mass and the picture is unambiguous. It is overwhelmingly water and salt. Everything marketed as a toxin sits in fractions far below one percent. Here is roughly what leaves the body in a liter of sweat during a session.
            </p>

            <div style={{ overflowX: 'auto', margin: '0 0 18px', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ background: 'var(--paper-2)' }}>
                    <th style={{ padding: '12px 16px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)', width: '46%' }}>Component</th>
                    <th style={{ padding: '12px 16px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)' }}>Approximate share</th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    ['Water', 'about 99%'],
                    ['Sodium, potassium, chloride, magnesium', '0.5-1% (electrolytes)'],
                    ['Urea, ammonia, lactate', 'trace nitrogen waste'],
                    ['Heavy metals (lead, cadmium, arsenic, mercury)', 'micrograms per liter'],
                    ['BPA and phthalate metabolites', 'nanograms to micrograms per liter'],
                  ].map((row, i, arr) => (
                    <tr key={i} style={{ borderBottom: i < arr.length - 1 ? '1px solid var(--line)' : 'none' }}>
                      <td style={{ padding: '13px 16px', fontSize: 14, lineHeight: 1.5, color: 'var(--text)', verticalAlign: 'top' }}>{row[0]}</td>
                      <td style={{ padding: '13px 16px', fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.04em', color: 'var(--ember-deep)', lineHeight: 1.5 }}>{row[1]}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <p style={{ fontSize: 16.5, lineHeight: 1.65 }}>
              This is why the framing matters. The liver transforms fat-soluble compounds into water-soluble forms the kidneys can excrete in urine, and the gut clears the rest through bile and stool. Sweat is a minor exit route by comparison. For nearly every compound studied, urine and feces carry far more out of the body over the same window than sweat does.
            </p>

            {/* Section: BPA, phthalates, and organic pollutants */}
            <h2 style={{ margin: '48px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>BPA, Phthalates, and Organic Pollutants</h2>

            <p style={{ fontSize: 16.5, lineHeight: 1.65, marginBottom: 16 }}>
              Heavy metals are not the only compounds that show up in sweat. Biomonitoring work has detected bisphenol A (BPA), phthalate metabolites, and a handful of persistent organic pollutants in sweat samples. In some analyses BPA appeared in sweat when it was low or undetectable in matched blood or urine, which points to sweat as a genuine exit route for it. Phthalate metabolites have shown a similar pattern in smaller studies.
            </p>

            <p style={{ fontSize: 16.5, lineHeight: 1.65 }}>
              The honest reading is narrow. Detection is not the same as meaningful clearance. The quantities leaving through sweat are small next to what the kidneys and liver process, and no controlled trial has shown that sauna use lowers the total body burden of these chemicals in a way that changes health outcomes. What the data supports is that sweat is a real, if minor, secondary route for a few synthetic compounds. Nothing more, and nothing to build a treatment plan around.
            </p>

            {/* Section: Myth vs reality */}
            <h2 style={{ margin: '48px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>Does an Infrared Sauna Really Detox You? Myth vs Reality</h2>

            <p style={{ fontSize: 16.5, lineHeight: 1.65, marginBottom: 18 }}>
              The word detox gets stretched to mean almost anything in wellness marketing. Held against the evidence, the common claims separate cleanly into what holds up and what does not.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, margin: '0 0 18px' }}>
              {[
                ['A session flushes toxins and resets your system', 'Sweating is thermoregulation. It carries trace compounds along with the water, but it does not scrub your bloodstream the way the liver and kidneys do every minute of the day.'],
                ['You can sweat out a bad diet, alcohol, or a hangover', 'Alcohol and most dietary compounds are broken down by the liver, not pushed out through skin. A session after drinking mostly adds dehydration risk, which is covered in our guide to infrared sauna side effects.'],
                ['For specific heavy metals, sweat is a real secondary exit route', 'This one holds. Consistent sessions may lower circulating lead, mercury, and cadmium over months. The effect is modest and cumulative, not a single-session cleanse.'],
              ].map((row, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 6, padding: '16px 20px', background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 10 }}>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'baseline' }}>
                    <span className="mono" style={{ fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: i < 2 ? 'var(--text-3)' : 'var(--ember-deep)', flexShrink: 0 }}>{i < 2 ? 'Claim' : 'Holds up'}</span>
                    <span style={{ fontFamily: 'var(--serif)', fontSize: 16.5, lineHeight: 1.35, color: 'var(--text)' }}>{row[0]}</span>
                  </div>
                  <div style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--text-2)' }}>Reality: {row[1]}</div>
                </div>
              ))}
            </div>

            <p style={{ fontSize: 16.5, lineHeight: 1.65 }}>
              The measured verdict: infrared sauna is a supportive input with a narrow, evidence-backed detox role for a few metals, wrapped inside a stronger set of cardiovascular and pain benefits. Read the section below on <a href="/guides/infrared-sauna-side-effects/" style={{ color: 'var(--ember-deep)', textDecoration: 'underline' }}>side effects</a> before ramping up frequency.
            </p>

            {/* Section 4: Science-backed benefits beyond detox */}
            <h2 style={{ margin: '48px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>Science-Backed Benefits Beyond Detox</h2>

            <p style={{ fontSize: 16.5, lineHeight: 1.65, marginBottom: 22 }}>
              The stronger case for regular infrared sauna isn't detox - it's the cardiovascular, pain, and mental health data.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, margin: '0 0 28px' }}>

              {/* Cardiovascular */}
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.2, letterSpacing: '-0.012em' }}>Cardiovascular</div>
                  <EvidenceBadge level="Strong evidence" />
                </div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 30, letterSpacing: '-0.022em', color: 'var(--ember-deep)', marginBottom: 8, lineHeight: 1 }}>-12.3 / -7.8 mmHg</div>
                <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.55 }}>
                  Systolic BP reduced 12.3 mmHg, diastolic 7.8 mmHg after 8 weeks at 3x/week (n=102, 2022). Cardiac output rises from 5-7 L/min at rest to up to 13 L/min during session - equivalent to moderate aerobic exercise load.
                </div>
              </div>

              {/* Chronic Pain */}
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.2, letterSpacing: '-0.012em' }}>Chronic Pain</div>
                  <EvidenceBadge level="Strong evidence" />
                </div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 30, letterSpacing: '-0.022em', color: 'var(--ember-deep)', marginBottom: 8, lineHeight: 1 }}>52% pain reduction</div>
                <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.55 }}>
                  52% pain reduction vs 14% in sham group (2024 RCT, n=127). Pain Medicine meta-analysis: 12 RCTs, 1,047 participants, 40-50% pain reduction at 8-12 weeks.
                </div>
              </div>

              {/* Skin and Collagen */}
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.2, letterSpacing: '-0.012em' }}>Skin and Collagen</div>
                  <EvidenceBadge level="Moderate evidence" />
                </div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 30, letterSpacing: '-0.022em', color: 'var(--ember-deep)', marginBottom: 8, lineHeight: 1 }}>+31% collagen density</div>
                <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.55 }}>
                  31% increase in collagen density, 23% reduction in wrinkle depth after 12 weeks (2023 photochemistry journal). Near-infrared wavelengths specifically drive fibroblast activation.
                </div>
              </div>

              {/* Mental Health */}
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.2, letterSpacing: '-0.012em' }}>Mental Health</div>
                  <EvidenceBadge level="Promising - limited trials" />
                </div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 30, letterSpacing: '-0.022em', color: 'var(--ember-deep)', marginBottom: 8, lineHeight: 1 }}>86.2%</div>
                <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.55 }}>
                  UCSF trial: 86.2% of MDD patients no longer met diagnostic criteria after whole-body hyperthermia protocol combined with CBT. Larger independent trials pending.
                </div>
              </div>

              {/* Cortisol */}
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.2, letterSpacing: '-0.012em' }}>Cortisol / Stress</div>
                  <EvidenceBadge level="Moderate evidence" />
                </div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 30, letterSpacing: '-0.022em', color: 'var(--ember-deep)', marginBottom: 8, lineHeight: 1 }}>-24% cortisol</div>
                <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.55 }}>
                  24% reduction in cortisol after 8 weeks of regular sauna (2023 RCT). Parasympathetic rebound post-session reliably observed.
                </div>
              </div>

              {/* HSP70 */}
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.2, letterSpacing: '-0.012em' }}>HSP70 / Heat Shock Proteins</div>
                  <EvidenceBadge level="Real - overstated online" />
                </div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 30, letterSpacing: '-0.022em', color: 'var(--ember-deep)', marginBottom: 8, lineHeight: 1 }}>~1.8x baseline</div>
                <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.55 }}>
                  Induction is real: approximately 1.8x baseline, lasting ~36 hours. The frequently cited "3x" claim traces to a 2007 study with N=8. Don't dismiss the effect - but don't extrapolate from that sample size.
                </div>
              </div>

            </div>

            {/* Section 5: One session vs consistent practice */}
            <h2 style={{ margin: '48px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>What One Session Does vs Consistent Practice</h2>

            <div style={{ overflowX: 'auto', margin: '18px 0 28px', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ background: 'var(--paper-2)' }}>
                    <th style={{ padding: '12px 16px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)', width: '22%' }}>Period</th>
                    <th style={{ padding: '12px 16px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)' }}>What changes</th>
                  </tr>
                </thead>
                <tbody>
                  {detoxTimeline.map((row, i) => (
                    <tr key={i} style={{ borderBottom: i < detoxTimeline.length - 1 ? '1px solid var(--line)' : 'none' }}>
                      <td style={{ padding: '13px 16px', fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.06em', color: 'var(--ember-deep)', whiteSpace: 'nowrap', verticalAlign: 'top' }}>{row.period}</td>
                      <td style={{ padding: '13px 16px', fontSize: 14, lineHeight: 1.55, color: 'var(--text)' }}>{row.change}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Section 6: Who benefits */}
            <h2 style={{ margin: '48px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>Who Benefits Most - and Who Should Be Cautious</h2>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, margin: '18px 0 28px' }}>
              <div>
                <div className="eyebrow" style={{ color: 'var(--text-2)', marginBottom: 14 }}>Good candidates</div>
                <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {[
                    'Athletes with recovery needs',
                    'Chronic pain patients (especially fibromyalgia and arthritis)',
                    'Cardiovascular conditioning seekers',
                    'Those with elevated heavy metal exposure history',
                    'Stress and cortisol management goals',
                  ].map((item, i) => (
                    <li key={i} style={{ display: 'flex', gap: 10, fontSize: 14, lineHeight: 1.5 }}>
                      <span style={{ color: 'var(--ember-deep)', fontFamily: 'var(--mono)', fontSize: 12, marginTop: 1 }}>+</span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <div className="eyebrow" style={{ color: 'var(--text-2)', marginBottom: 14 }}>Consult physician first or avoid</div>
                <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {[
                    'Pregnancy (core temperature elevation risk to fetus)',
                    'Active cardiovascular disease',
                    'Medications affecting heat tolerance (beta blockers, diuretics, anticholinergics)',
                    'MS (heat sensitivity can worsen symptoms)',
                    'Active fever or infection',
                  ].map((item, i) => (
                    <li key={i} style={{ display: 'flex', gap: 10, fontSize: 14, lineHeight: 1.5 }}>
                      <span style={{ color: 'var(--text-3)', fontFamily: 'var(--mono)', fontSize: 12, marginTop: 1 }}>!</span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            {/* Section 7: Protocol */}
            <h2 style={{ margin: '48px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>Session Protocol for Detox Goals</h2>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 0, margin: '18px 0 28px', borderTop: '1px solid var(--line)' }}>
              <ProtocolStep number="01" label="Pre-session">
                16-20 oz water 30-60 minutes before. Light meal 1-2 hours prior or fast.
              </ProtocolStep>
              <ProtocolStep number="02" label="Temperature">
                Begin at 120-130°F (49-54°C) for first 2-3 weeks. Build to 140-155°F (60-68°C).
              </ProtocolStep>
              <ProtocolStep number="03" label="Duration">
                20-30 minutes early weeks, 35-45 minutes once acclimated.
              </ProtocolStep>
              <ProtocolStep number="04" label="During">
                Sip water. Exit if dizzy or nauseous.
              </ProtocolStep>
              <ProtocolStep number="05" label="Post-session">
                Cold shower or brief cold plunge. 20-32 oz water plus electrolytes within 30 minutes.
              </ProtocolStep>
              <ProtocolStep number="06" label="Frequency">
                3-4x/week for measurable benefit. Daily is fine for most people - monitor resting HR and sleep quality.
              </ProtocolStep>
            </div>

            {/* Section: How to support natural detoxification */}
            <h2 style={{ margin: '48px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>How to Support Your Body's Natural Detoxification</h2>

            <p style={{ fontSize: 16.5, lineHeight: 1.65, marginBottom: 18 }}>
              Sauna is one supportive input, not the engine. The body's clearance systems respond far more to daily habits than to any single session. If reducing your toxic load is the real goal, these four levers move more than time in the heat.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, margin: '0 0 20px' }}>
              {[
                ['Hydration', 'The kidneys need adequate water to concentrate and excrete waste. Aim for pale-yellow urine through the day, not clear and not dark.'],
                ['Sleep', 'The brain clears metabolic waste most actively during deep sleep. Chronically short sleep measurably slows that process, no supplement required to fix it.'],
                ['Fiber', 'Soluble fiber binds bile-bound compounds in the gut so they leave in stool instead of being reabsorbed and recirculated.'],
                ['Limit exposure', 'The largest lever is taking less in: filtered water, less food stored and heated in plastic, and fewer alcohol and tobacco insults for the liver to process.'],
              ].map((row, i) => (
                <div key={i} style={{ display: 'flex', gap: 16, padding: '15px 18px', background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 10 }}>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ember-deep)', flexShrink: 0, minWidth: 92, paddingTop: 2 }}>{row[0]}</div>
                  <div style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text-2)' }}>{row[1]}</div>
                </div>
              ))}
            </div>

            <p style={{ fontSize: 16.5, lineHeight: 1.65 }}>
              Positioned this way, infrared sauna earns its place. It adds a modest sweat-based clearance route and supports circulation, and pairing sessions with light movement or manual work on the lymphatic system can help the body move fluid. Our guide to <a href="/guides/infrared-sauna-lymphatic-drainage/" style={{ color: 'var(--ember-deep)', textDecoration: 'underline' }}>infrared sauna and lymphatic drainage</a> covers that pairing in detail. Treat the sauna as a useful complement to the organs already doing the heavy lifting, not a shortcut around them.
            </p>

            {/* FAQ */}
            <h2 style={{ margin: '52px 0 18px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>FAQ</h2>
            <FAQ items={detoxFaq} />

            {/* CTA Block */}
            <div style={{ margin: '44px 0' }}>
              <CTABlock
                product="Lumen Heritage 4"
                price="$5,990"
                score="9.4"
                best="Best overall"
                merchant="Lumen Direct"
              />
            </div>

            {/* Author Box */}
            <div style={{ margin: '40px 0' }}>
              <AuthorBox />
            </div>

            {/* Related */}
            <Related items={detoxRelated.map(r => ({ ...r, label: r.cat.toUpperCase(), date: 'May 2026', read: r.read }))} title="More on infrared sauna science" />

          </div>

          {/* Right rail */}
          <aside>
            <div style={{ position: 'sticky', top: 90, display: 'flex', flexDirection: 'column', gap: 0 }}>
              <RailNewsletter />
              <RailShare />
            </div>
          </aside>

        </div>
      </div>

      <SiteFooter />
    </div>
  );
}

// ============================================================
// COMPONENT 1: InfraredSaunaDetox - Mobile
// ============================================================

function InfraredSaunaDetoxMobile() {
  return (
    <div style={{ fontFamily: 'var(--sans)', color: 'var(--text)', background: 'var(--paper)', paddingBottom: 80 }}>
      <MobHeader />

      {/* Header */}
      <div style={{ padding: '28px 18px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
          <a href="/guides/" className="mono" style={{ fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ember-deep)', textDecoration: 'none' }}>Guides</a>
          <span style={{ width: 3, height: 3, borderRadius: 999, background: 'var(--text-3)' }} />
          <span className="mono" style={{ fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-3)' }}>Infrared Sauna Detox</span>
        </div>

        <h1 style={{ margin: 0, fontSize: 32, lineHeight: 1.08, letterSpacing: '-0.02em' }}>
          What Infrared Sauna Detox Actually Does - and What It Doesn't
        </h1>

        <p style={{ marginTop: 14, fontSize: 16, color: 'var(--text-2)', lineHeight: 1.55, fontFamily: 'var(--serif)' }}>
          The evidence is real but narrower than most wellness content claims. Here is what the peer-reviewed data shows.
        </p>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 18, paddingBottom: 18, borderBottom: '1px solid var(--line)' }}>
          <Ph w={34} h={34} label="MB" style={{ borderRadius: 999, flexShrink: 0 }} />
          <div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 13 }}>Dr. Mira Brandt, PhD</div>
            <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.08em', color: 'var(--text-3)' }}>Reviewed - Dr. Mark Chen - May 2026</div>
          </div>
        </div>
      </div>

      <Ph w="100%" h={200} label="INFRARED SAUNA SESSION" style={{ margin: '18px 0 0' }} />

      <div style={{ padding: '0 18px' }}>

        {/* Quick Answer */}
        <div style={{ padding: '18px 20px', background: 'var(--paper-2)', border: '1px solid var(--line)', borderLeft: '4px solid var(--ember-deep)', borderRadius: 12, margin: '20px 0 0' }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Quick answer</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 15, lineHeight: 1.6 }}>
            Infrared sauna supports detox through sweating as a secondary pathway. Liver and kidneys handle 90%+. Where it adds real value: lead at 10-30x blood concentration in sweat, mercury detectable when blood levels are zero. The cardiovascular and pain data are stronger than the detox data.
          </div>
        </div>

        {/* Section 1 */}
        <h2 style={{ margin: '34px 0 10px', fontSize: 26, letterSpacing: '-0.018em' }}>How the Mechanism Works</h2>
        <p style={{ fontSize: 15, lineHeight: 1.65 }}>
          Far infrared wavelengths (5.6-1000 microns) penetrate 1.5-3 inches into tissue, raising core temperature 1-2°C and triggering thermoregulatory sweating. At 140-155°F (60-68°C) with 10-20% humidity, you sweat more with less cardiovascular strain than steam sauna at 110-120°F (43-49°C) at 95-100% humidity.
        </p>

        <Ph w="100%" h={160} label="DIAGRAM - INFRARED PENETRATION DEPTH vs CONVECTIVE HEAT" style={{ borderRadius: 10, margin: '14px 0' }} />

        <p style={{ fontSize: 15, lineHeight: 1.65 }}>
          The "flushing toxins" framing is inaccurate. Sweating is thermoregulation that also carries trace compounds. It is not a replacement for liver or kidney function.
        </p>

        {/* Section 2 */}
        <h2 style={{ margin: '34px 0 10px', fontSize: 26, letterSpacing: '-0.018em' }}>What Sweat Actually Contains</h2>
        <p style={{ fontSize: 15, lineHeight: 1.65, marginBottom: 14 }}>
          Water and electrolytes account for 99%+ of sweat. The heavy-metal trace data:
        </p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, margin: '0 0 14px' }}>
          {[
            ['99%+', 'water and electrolytes in sweat'],
            ['10-30x', 'lead concentration in sweat vs blood (2022 PMC)'],
            ['100%', 'of tested subjects showed mercury in sweat'],
          ].map(([stat, label], i) => (
            <div key={i} style={{ display: 'flex', gap: 14, padding: '14px 16px', background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 10 }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 26, letterSpacing: '-0.02em', color: 'var(--ember-deep)', flexShrink: 0, minWidth: 64, lineHeight: 1 }}>{stat}</div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', color: 'var(--text-3)', textTransform: 'uppercase', lineHeight: 1.45, alignSelf: 'center' }}>{label}</div>
            </div>
          ))}
        </div>

        <p style={{ fontSize: 15, lineHeight: 1.65 }}>
          These concentrations are real - milligrams per session, not grams. The liver and kidneys do not stop working when you sweat.
        </p>

        {/* Section 3 */}
        <h2 style={{ margin: '34px 0 10px', fontSize: 26, letterSpacing: '-0.018em' }}>Heavy Metals: the Real Data</h2>
        <p style={{ fontSize: 15, lineHeight: 1.65, marginBottom: 14 }}>
          A 2022 PMC study found lead at 10-30x blood concentration in sweat. Cadmium detectable in sweat for 80% of participants with no blood cadmium. Mercury in 100% of sweat samples regardless of blood levels. Findings replicated in multiple independent labs.
        </p>
        <div style={{ padding: '16px 18px', background: 'var(--paper-2)', border: '1px solid var(--line)', borderLeft: '3px solid var(--ember-deep)', borderRadius: 10, fontSize: 14, lineHeight: 1.6, color: 'var(--text-2)' }}>
          A single 45-minute session removes perhaps 1-5 mcg of lead. Meaningful over months of consistent practice - not significant in a single session.
        </div>

        {/* Section 4 */}
        <h2 style={{ margin: '34px 0 10px', fontSize: 26, letterSpacing: '-0.018em' }}>Science-Backed Benefits Beyond Detox</h2>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, margin: '14px 0' }}>
          {[
            { title: 'Cardiovascular', badge: 'Strong evidence', stat: '-12.3/-7.8 mmHg', detail: 'BP reduction after 8 weeks 3x/week (n=102). Cardiac output rises to 13 L/min during session.' },
            { title: 'Chronic Pain', badge: 'Strong evidence', stat: '52% pain reduction', detail: '2024 RCT (n=127) vs 14% sham. Meta-analysis: 40-50% across 12 RCTs, 1,047 participants.' },
            { title: 'Skin and Collagen', badge: 'Moderate evidence', stat: '+31% collagen density', detail: '23% wrinkle depth reduction after 12 weeks (2023 photochemistry journal).' },
            { title: 'Mental Health', badge: 'Promising - limited trials', stat: '86.2%', detail: 'No longer met MDD criteria post whole-body hyperthermia + CBT (UCSF). One trial.' },
          ].map((item, i) => (
            <div key={i} style={{ padding: '16px 18px', background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8, marginBottom: 8 }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 17 }}>{item.title}</div>
                <EvidenceBadge level={item.badge} />
              </div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 24, letterSpacing: '-0.018em', color: 'var(--ember-deep)', marginBottom: 6, lineHeight: 1 }}>{item.stat}</div>
              <div style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.5 }}>{item.detail}</div>
            </div>
          ))}
        </div>

        {/* Section 5 - Timeline */}
        <h2 style={{ margin: '34px 0 10px', fontSize: 26, letterSpacing: '-0.018em' }}>One Session vs Consistent Practice</h2>
        <div style={{ border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden', margin: '14px 0' }}>
          {detoxTimeline.map((row, i) => (
            <div key={i} style={{ padding: '13px 16px', borderBottom: i < detoxTimeline.length - 1 ? '1px solid var(--line)' : 'none', background: 'var(--paper-2)' }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ember-deep)', marginBottom: 4 }}>{row.period}</div>
              <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.5 }}>{row.change}</div>
            </div>
          ))}
        </div>

        {/* Section 6 - Who benefits */}
        <h2 style={{ margin: '34px 0 10px', fontSize: 26, letterSpacing: '-0.018em' }}>Who Benefits - Who Should Be Cautious</h2>
        <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 12, padding: '16px 18px', marginBottom: 12 }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Good candidates</div>
          {['Athletes with recovery needs', 'Chronic pain patients (fibromyalgia, arthritis)', 'Cardiovascular conditioning seekers', 'Elevated heavy metal exposure history', 'Stress and cortisol management goals'].map((item, i) => (
            <div key={i} style={{ display: 'flex', gap: 10, fontSize: 14, lineHeight: 1.5, marginBottom: 8 }}>
              <span style={{ color: 'var(--ember-deep)', fontFamily: 'var(--mono)', fontSize: 11 }}>+</span>
              <span>{item}</span>
            </div>
          ))}
        </div>
        <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 12, padding: '16px 18px' }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Consult physician first or avoid</div>
          {['Pregnancy', 'Active cardiovascular disease', 'Medications affecting heat tolerance (beta blockers, diuretics)', 'Multiple sclerosis', 'Active fever or infection'].map((item, i) => (
            <div key={i} style={{ display: 'flex', gap: 10, fontSize: 14, lineHeight: 1.5, marginBottom: 8 }}>
              <span style={{ color: 'var(--text-3)', fontFamily: 'var(--mono)', fontSize: 11 }}>!</span>
              <span>{item}</span>
            </div>
          ))}
        </div>

        {/* Section 7 - Protocol */}
        <h2 style={{ margin: '34px 0 10px', fontSize: 26, letterSpacing: '-0.018em' }}>Session Protocol</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0, borderTop: '1px solid var(--line)' }}>
          {[
            ['Pre-session', '16-20 oz water, 1-2 hours post meal. No alcohol.'],
            ['Temperature', 'Start 120-130°F (49-54°C), build to 140-155°F (60-68°C).'],
            ['Duration', '30-45 min target. Beginners: 20-30 min. Exit if dizzy or nauseous.'],
            ['During', 'Sip water. Monitor how you feel.'],
            ['Post-session', 'Cold shower if available. 20-32 oz water plus electrolytes.'],
            ['Frequency', '3-4x/week for consistent benefit. Daily is fine - monitor resting HR.'],
          ].map(([label, text], i) => (
            <div key={i} style={{ display: 'flex', gap: 14, padding: '14px 0', borderBottom: '1px solid var(--line)' }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ember-deep)', flexShrink: 0, paddingTop: 2 }}>{String(i + 1).padStart(2, '0')}</div>
              <div>
                <div style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 14, marginBottom: 4 }}>{label}</div>
                <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.5 }}>{text}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Section - Myth vs reality */}
        <h2 style={{ margin: '34px 0 10px', fontSize: 26, letterSpacing: '-0.018em' }}>Does It Really Detox You?</h2>
        <p style={{ fontSize: 15, lineHeight: 1.65, marginBottom: 14 }}>
          Held against the evidence, the common claims split cleanly. Sweating is thermoregulation, not a bloodstream reset, and you cannot sweat out a bad diet or alcohol - the liver handles those. What holds up is narrow: for lead, mercury, and cadmium, sweat is a real secondary exit route, and consistent sessions may lower circulating levels over months. Ramp up slowly and read our <a href="/guides/infrared-sauna-side-effects/" style={{ color: 'var(--ember-deep)', textDecoration: 'underline' }}>side effects guide</a> first.
        </p>

        {/* Section - Support natural detox */}
        <h2 style={{ margin: '34px 0 10px', fontSize: 26, letterSpacing: '-0.018em' }}>Support Your Natural Detox</h2>
        <p style={{ fontSize: 15, lineHeight: 1.65, marginBottom: 14 }}>
          The sauna is one input, not the engine. Daily habits move more:
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, margin: '0 0 14px' }}>
          {[
            ['Hydration', 'Kidneys need water to excrete waste. Aim for pale-yellow urine.'],
            ['Sleep', 'The brain clears waste during deep sleep. Short sleep slows it.'],
            ['Fiber', 'Soluble fiber carries bile-bound compounds out in stool.'],
            ['Limit exposure', 'Filtered water, less food in plastic, less alcohol for the liver.'],
          ].map(([label, text], i) => (
            <div key={i} style={{ display: 'flex', gap: 12, padding: '13px 15px', background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 10 }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ember-deep)', flexShrink: 0, minWidth: 78, paddingTop: 2 }}>{label}</div>
              <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.5 }}>{text}</div>
            </div>
          ))}
        </div>
        <p style={{ fontSize: 15, lineHeight: 1.65 }}>
          Pairing sessions with light movement or lymphatic work helps the body move fluid - see our <a href="/guides/infrared-sauna-lymphatic-drainage/" style={{ color: 'var(--ember-deep)', textDecoration: 'underline' }}>lymphatic drainage guide</a>. It complements the organs doing the heavy lifting, not a shortcut around them.
        </p>

        {/* FAQ */}
        <h2 style={{ margin: '34px 0 14px', fontSize: 26, letterSpacing: '-0.018em' }}>FAQ</h2>
        <FAQ items={detoxFaq} />

        {/* CTA */}
        <div style={{ margin: '32px 0', padding: '20px', background: 'var(--ink)', borderRadius: 14 }}>
          <div className="eyebrow" style={{ color: 'var(--ember)', marginBottom: 8 }}>Our top pick</div>
          <Ph w="100%" h={140} label="PRODUCT" style={{ borderRadius: 10, marginBottom: 12 }} />
          <div style={{ fontFamily: 'var(--serif)', fontSize: 20, marginBottom: 6, color: 'var(--paper)' }}>Lumen Heritage 4</div>
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', marginBottom: 14, lineHeight: 1.5 }}>Full-spectrum, ultra-low EMF, Canadian cedar. Tested 24 weeks.</div>
          <a href="/best/best-infrared-saunas/" className="btn btn-ember" style={{ width: '100%', justifyContent: 'center', padding: '12px 0' }}>
            Read the buyers guide →
          </a>
        </div>

        <AuthorBox />

        <div style={{ marginTop: 36, paddingTop: 28, borderTop: '1px solid var(--line)' }}>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginBottom: 18, letterSpacing: '-0.015em' }}>More on infrared sauna science</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {detoxRelated.map((a, i) => (
              <a key={i} href={a.href} style={{ textDecoration: 'none', color: 'inherit', display: 'flex', gap: 14 }}>
                <Ph w={80} h={64} label={a.cat.toUpperCase()} style={{ borderRadius: 8, flexShrink: 0 }} />
                <div>
                  <div className="eyebrow">{a.cat}</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 16, marginTop: 4, lineHeight: 1.25, letterSpacing: '-0.01em' }}>{a.title}</div>
                </div>
              </a>
            ))}
          </div>
        </div>

      </div>

      <MobStickyBar />
      <SiteFooter />
    </div>
  );
}

// ---- Exported shell ----------------------------------------
function InfraredSaunaDetox({ mobile = false }) {
  return mobile ? <InfraredSaunaDetoxMobile /> : <InfraredSaunaDetoxDesktop />;
}

// ============================================================
// COMPONENT 2: FarInfraredBenefits - Desktop
// ============================================================

function FarInfraredBenefitsDesktop() {
  return (
    <div style={{ fontFamily: 'var(--sans)', color: 'var(--text)', background: 'var(--paper)' }}>
      <SiteHeader />

      {/* Article header */}
      <div style={{ padding: '40px 40px 0', maxWidth: 760, margin: '0 auto' }}>

        {/* Breadcrumb */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
          <a href="/guides/" className="mono" style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ember-deep)', textDecoration: 'none' }}>Guides</a>
          <span style={{ width: 3, height: 3, borderRadius: 999, background: 'var(--text-3)' }} />
          <span className="mono" style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-3)' }}>Far Infrared Sauna Benefits</span>
        </div>

        <h1 style={{ margin: 0, fontSize: 58, lineHeight: 1.0, letterSpacing: '-0.025em' }}>
          Far Infrared Sauna Benefits: What the Evidence Actually Shows in 2026
        </h1>

        <p style={{ marginTop: 22, fontSize: 19, color: 'var(--text-2)', lineHeight: 1.55, fontFamily: 'var(--serif)' }}>
          Far infrared sits at 5.6-1000 microns - the band that penetrates deepest into tissue. Here is a benefit-by-benefit review of what the peer-reviewed literature actually supports, with evidence quality rated honestly.
        </p>

        {/* Author byline */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 26, paddingBottom: 24, borderBottom: '1px solid var(--line)' }}>
          <Ph w={44} h={44} label="MB" style={{ borderRadius: 999, flexShrink: 0 }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 14, letterSpacing: '-0.005em' }}>Dr. Mira Brandt, PhD</div>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.08em', color: 'var(--text-3)', marginTop: 2 }}>
              Integrative Medicine - Reviewed by Dr. Mark Chen
            </div>
          </div>
          <Disclose />
          <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.08em', color: 'var(--text-3)' }}>May 2026</div>
        </div>

      </div>

      {/* 3-column grid body */}
      <div style={{ padding: '40px 40px 100px' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '240px minmax(0, 760px) 280px',
          gap: 52,
          maxWidth: 1380,
          margin: '0 auto',
        }}>

          {/* Left: TOC */}
          <aside>
            <TOC active={0} items={farIRTocItems} />
          </aside>

          {/* Center: article body */}
          <div>

            <QuickAnswerBox>
              Far infrared sauna - 5.6-1000 micron range - penetrates 1.5-3 inches into tissue and reliably improves cardiovascular markers, reduces chronic pain scores, and supports skin remodeling. The strongest evidence is for cardiovascular conditioning and pain management. Skin and mental health data are solid preliminary findings awaiting larger-scale replication.
            </QuickAnswerBox>

            {/* Section 1: What far infrared means */}
            <h2 style={{ margin: '40px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>What Far Infrared Means - and Why Wavelength Matters</h2>

            <p style={{ fontSize: 16.5, lineHeight: 1.65, marginBottom: 20 }}>
              The infrared spectrum spans 0.76 to 1,000 microns. Consumer saunas use three sub-bands:
            </p>

            {/* 3-column spectrum cards */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0, border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden', margin: '0 0 24px' }}>
              {[
                {
                  band: 'Near IR',
                  range: '0.76-1.4 microns',
                  depth: 'Skin surface',
                  note: 'Primarily skin surface and superficial blood vessels. Drives collagen synthesis, skin texture improvement.',
                  accent: '#f59e0b',
                },
                {
                  band: 'Mid IR',
                  range: '1.4-3 microns',
                  depth: 'Soft tissue',
                  note: 'Penetrates approximately 5mm into soft tissue. Affects muscle tissue directly.',
                  accent: '#e07b30',
                },
                {
                  band: 'Far IR',
                  range: '5.6-1000 microns',
                  depth: '1.5-3 inches',
                  note: 'Affects deep muscle, joint tissue, and triggers core temperature elevation. All major RCT data.',
                  accent: '#b85a20',
                },
              ].map((b, i) => (
                <div key={i} style={{
                  padding: '22px 20px',
                  background: 'var(--ink)',
                  borderRight: i < 2 ? '1px solid rgba(255,255,255,0.1)' : 'none',
                  color: 'var(--paper)',
                }}>
                  <div style={{ borderLeft: `3px solid ${b.accent}`, paddingLeft: 10, marginBottom: 12 }}>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 20, letterSpacing: '-0.01em' }}>{b.band}</div>
                    <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginTop: 3 }}>{b.range}</div>
                  </div>
                  <div style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 13, marginBottom: 6, color: 'rgba(255,255,255,0.8)' }}>Penetration: {b.depth}</div>
                  <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', lineHeight: 1.5 }}>{b.note}</div>
                </div>
              ))}
            </div>

            <Ph w="100%" h={260} label="INFRARED SPECTRUM - WAVELENGTH PENETRATION DEPTH DIAGRAM" style={{ borderRadius: 12, margin: '0 0 24px' }} />

            <p style={{ fontSize: 16.5, lineHeight: 1.65 }}>
              Most home saunas marketed as "infrared" emit primarily far infrared. Full-spectrum adds near and mid bands. The cardiovascular and pain evidence that most people cite was generated with far infrared saunas specifically - full spectrum is a meaningful upgrade for skin and surface-layer benefits, not for the core cardiovascular mechanism.
            </p>

            {/* Section 2: Benefit-by-benefit */}
            <h2 style={{ margin: '48px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>Benefit-by-Benefit Evidence Review</h2>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, margin: '18px 0 28px' }}>

              {/* Card 1: Cardiovascular */}
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.012em', marginBottom: 8 }}>Cardiovascular conditioning</div>
                <EvidenceBadge level="Strong evidence" />
                <div style={{ marginTop: 14 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 17, color: 'var(--ember-deep)', lineHeight: 1.3, marginBottom: 4 }}>12.3 mmHg systolic / 7.8 mmHg diastolic reduction (n=102, 2022)</div>
                  <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.55, marginBottom: 6 }}>Cardiac output: 5-7 L/min resting → 13 L/min during session</div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)' }}>Consistent across multiple independent cohorts</div>
                </div>
              </div>

              {/* Card 2: Chronic Pain */}
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.012em', marginBottom: 8 }}>Chronic pain management</div>
                <EvidenceBadge level="Strong evidence" />
                <div style={{ marginTop: 14 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 17, color: 'var(--ember-deep)', lineHeight: 1.3, marginBottom: 4 }}>52% pain reduction vs 14% sham (n=127, 2024 RCT)</div>
                  <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.55, marginBottom: 6 }}>Meta-analysis: 12 RCTs, 1,047 participants, 40-50% reduction at 8-12 weeks</div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)' }}>Strongest data in fibromyalgia and lower back pain populations</div>
                </div>
              </div>

              {/* Card 3: Skin */}
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.012em', marginBottom: 8 }}>Skin and collagen remodeling</div>
                <EvidenceBadge level="Moderate evidence" />
                <div style={{ marginTop: 14 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 17, color: 'var(--ember-deep)', lineHeight: 1.3, marginBottom: 4 }}>31% increased collagen density after 12 weeks</div>
                  <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.55, marginBottom: 6 }}>23% wrinkle depth reduction (2023 photochemistry journal)</div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)' }}>Near-infrared wavelengths specifically drive fibroblast activation - full spectrum adds this</div>
                </div>
              </div>

              {/* Card 4: Mental Health */}
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.012em', marginBottom: 8 }}>Depression and mood</div>
                <EvidenceBadge level="Promising - limited trials" />
                <div style={{ marginTop: 14 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 17, color: 'var(--ember-deep)', lineHeight: 1.3, marginBottom: 4 }}>86.2% of MDD patients no longer met diagnostic criteria (UCSF, whole-body hyperthermia + CBT)</div>
                  <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.55, marginBottom: 6 }}>24% cortisol reduction after 8 weeks regular sauna (2023 RCT)</div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)' }}>Mechanism: parasympathetic rebound + possible endorphin release</div>
                </div>
              </div>

              {/* Card 5: Metabolism */}
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.012em', marginBottom: 8 }}>Calorie expenditure</div>
                <EvidenceBadge level="Modest effect" />
                <div style={{ marginTop: 14 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 17, color: 'var(--ember-deep)', lineHeight: 1.3, marginBottom: 4 }}>~200-600 kcal equivalent per 30-45 min session (heat expenditure)</div>
                  <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.55, marginBottom: 6 }}>Not equivalent to exercise - cardiovascular load lower, muscular adaptation absent</div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)' }}>Supports weight management as a supplement to exercise, not a replacement</div>
                </div>
              </div>

              {/* Card 6: Recovery */}
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.012em', marginBottom: 8 }}>Athletic recovery</div>
                <EvidenceBadge level="Moderate evidence" />
                <div style={{ marginTop: 14 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 17, color: 'var(--ember-deep)', lineHeight: 1.3, marginBottom: 4 }}>Muscle soreness reduction data mixed depending on timing</div>
                  <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.55, marginBottom: 6 }}>Post-endurance: positive effect on recovery markers</div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)' }}>Post-strength: wait 2-3 hours to avoid blunting protein synthesis signal</div>
                </div>
              </div>

            </div>

            {/* Section 3: Far IR vs full spectrum */}
            <h2 style={{ margin: '48px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>Far Infrared vs Full Spectrum - Does the Upgrade Matter?</h2>

            <p style={{ fontSize: 16.5, lineHeight: 1.65, marginBottom: 20 }}>
              Full-spectrum saunas add near and mid infrared bands to the standard far infrared output. The core cardiovascular and deep-tissue benefits run on far infrared - adding near and mid doesn't improve those meaningfully. Near infrared adds collagen synthesis and skin surface benefits, which far infrared alone doesn't reach effectively.
            </p>

            {/* Decision table */}
            <div style={{ overflowX: 'auto', margin: '0 0 20px', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ background: 'var(--paper-2)' }}>
                    <th style={{ padding: '12px 16px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)', width: '30%' }}>Goal</th>
                    <th style={{ padding: '12px 16px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)' }}>Far infrared sufficient?</th>
                    <th style={{ padding: '12px 16px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)' }}>Full spectrum adds value?</th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    ['Cardiovascular conditioning', 'Yes', 'No meaningful difference'],
                    ['Chronic pain management', 'Yes', 'No meaningful difference'],
                    ['Skin and collagen', 'Partial', 'Yes - near IR adds fibroblast activation'],
                    ['Muscle recovery', 'Yes', 'No meaningful difference'],
                    ['Cost', 'Typically $500-$2,000 less', '-'],
                  ].map(([goal, far, full], i) => (
                    <tr key={i} style={{ borderBottom: i < 4 ? '1px solid var(--line)' : 'none' }}>
                      <td style={{ padding: '12px 16px', fontFamily: 'var(--sans)', fontWeight: 500, fontSize: 14 }}>{goal}</td>
                      <td style={{ padding: '12px 16px', fontSize: 13.5, color: 'var(--text-2)' }}>{far}</td>
                      <td style={{ padding: '12px 16px', fontSize: 13.5, color: 'var(--text-2)' }}>{full}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <p style={{ fontSize: 16.5, lineHeight: 1.65 }}>
              If skin quality is a primary goal, full spectrum is worth the premium. If cardiovascular conditioning, pain management, and recovery drive your purchase, far infrared alone delivers the studied protocol.
            </p>

            {/* Section 4: Protocol by goal */}
            <h2 style={{ margin: '48px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>Optimal Session Protocol by Goal</h2>

            <div style={{ overflowX: 'auto', margin: '18px 0 28px', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ background: 'var(--paper-2)' }}>
                    {['Goal', 'Temperature', 'Duration', 'Frequency'].map((h, i) => (
                      <th key={i} style={{ padding: '12px 16px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)' }}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {farIRProtocol.map((r, i) => (
                    <tr key={i} style={{ borderBottom: i < farIRProtocol.length - 1 ? '1px solid var(--line)' : 'none' }}>
                      <td style={{ padding: '12px 16px', fontFamily: 'var(--sans)', fontWeight: 500, fontSize: 14 }}>{r.goal}</td>
                      <td style={{ padding: '12px 16px', fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--text-2)' }}>{r.temp}</td>
                      <td style={{ padding: '12px 16px', fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--text-2)' }}>{r.duration}</td>
                      <td style={{ padding: '12px 16px', fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--text-2)' }}>{r.frequency}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Section 5: Timeline */}
            <h2 style={{ margin: '48px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>Timeline - When to Expect Results</h2>

            <div style={{ borderLeft: '2px solid var(--ember-deep)', paddingLeft: 24, margin: '18px 0 28px', display: 'flex', flexDirection: 'column', gap: 28 }}>
              {[
                { period: 'Session 1-3', title: 'Acute effects', detail: 'Profuse sweating, parasympathetic relaxation, temporary skin improvement.' },
                { period: 'Week 2-3', title: 'Sleep quality', detail: 'Sleep quality often improves first (subjective).' },
                { period: 'Week 4-6', title: 'Cardiovascular begins', detail: 'Resting heart rate may begin dropping. Chronic pain score shifts in regular users.' },
                { period: 'Week 8-12', title: 'Measurable BP and pain', detail: 'BP improvement measurable in hypertensive individuals. Pain reduction documented in research protocols.' },
                { period: '6+ months', title: 'Sustained outcomes', detail: 'Sustained cardiovascular conditioning. Collagen changes measurable. Accumulated heavy metal clearance.' },
              ].map((item, i) => (
                <div key={i}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                    <div style={{ width: 10, height: 10, borderRadius: 999, background: 'var(--ember-deep)', marginLeft: -30, flexShrink: 0 }} />
                    <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ember-deep)' }}>{item.period}</div>
                  </div>
                  <div style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 14.5, marginBottom: 4 }}>{item.title}</div>
                  <div style={{ fontSize: 14.5, color: 'var(--text-2)', lineHeight: 1.6 }}>{item.detail}</div>
                </div>
              ))}
            </div>

            {/* FAQ */}
            <h2 style={{ margin: '52px 0 18px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>FAQ</h2>
            <FAQ items={farIRFaq} />

            {/* CTA Block */}
            <div style={{ margin: '44px 0' }}>
              <CTABlock
                product="Lumen Heritage 4"
                price="$5,990"
                score="9.4"
                best="Best overall"
                merchant="Lumen Direct"
              />
            </div>

            {/* Author Box */}
            <div style={{ margin: '40px 0' }}>
              <AuthorBox />
            </div>

            {/* Related */}
            <Related items={farIRRelated.map(r => ({ ...r, label: r.cat.toUpperCase(), date: 'May 2026', read: r.read }))} title="Continue reading" />

          </div>

          {/* Right rail */}
          <aside>
            <div style={{ position: 'sticky', top: 90, display: 'flex', flexDirection: 'column', gap: 0 }}>
              <RailNewsletter />
              <RailShare />
            </div>
          </aside>

        </div>
      </div>

      <SiteFooter />
    </div>
  );
}

// ============================================================
// COMPONENT 2: FarInfraredBenefits - Mobile
// ============================================================

function FarInfraredBenefitsMobile() {
  return (
    <div style={{ fontFamily: 'var(--sans)', color: 'var(--text)', background: 'var(--paper)', paddingBottom: 80 }}>
      <MobHeader />

      {/* Header */}
      <div style={{ padding: '28px 18px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
          <a href="/guides/" className="mono" style={{ fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ember-deep)', textDecoration: 'none' }}>Guides</a>
          <span style={{ width: 3, height: 3, borderRadius: 999, background: 'var(--text-3)' }} />
          <span className="mono" style={{ fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-3)' }}>Far Infrared Benefits</span>
        </div>

        <h1 style={{ margin: 0, fontSize: 30, lineHeight: 1.08, letterSpacing: '-0.02em' }}>
          Far Infrared Sauna Benefits: What the Evidence Actually Shows in 2026
        </h1>

        <p style={{ marginTop: 14, fontSize: 15, color: 'var(--text-2)', lineHeight: 1.55, fontFamily: 'var(--serif)' }}>
          Far infrared sits at 5.6-1000 microns - the band that penetrates deepest into tissue. Evidence quality rated honestly on every claim.
        </p>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 18, paddingBottom: 18, borderBottom: '1px solid var(--line)' }}>
          <Ph w={34} h={34} label="MB" style={{ borderRadius: 999, flexShrink: 0 }} />
          <div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 13 }}>Dr. Mira Brandt, PhD</div>
            <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.08em', color: 'var(--text-3)' }}>Reviewed - Dr. Mark Chen - May 2026</div>
          </div>
        </div>
      </div>

      <Ph w="100%" h={200} label="FAR INFRARED SAUNA INTERIOR" style={{ margin: '18px 0 0' }} />

      <div style={{ padding: '0 18px' }}>

        {/* Quick Answer */}
        <div style={{ padding: '18px 20px', background: 'var(--paper-2)', border: '1px solid var(--line)', borderLeft: '4px solid var(--ember-deep)', borderRadius: 12, margin: '20px 0 0' }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Quick answer</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 15, lineHeight: 1.6 }}>
            Far IR (5.6-1000 microns) penetrates 1.5-3 inches into tissue. Strongest evidence: cardiovascular conditioning and chronic pain reduction. Skin and mental health data are solid but need more large-scale RCTs.
          </div>
        </div>

        {/* Section 1 - Wavelengths */}
        <h2 style={{ margin: '34px 0 10px', fontSize: 26, letterSpacing: '-0.018em' }}>What Far Infrared Means</h2>
        <p style={{ fontSize: 15, lineHeight: 1.65, marginBottom: 14 }}>
          Infrared divides into three bands - each penetrates tissue to different depths:
        </p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, margin: '0 0 14px' }}>
          {[
            { band: 'Near IR', range: '0.76-1.4 microns', depth: 'Skin surface', note: 'Collagen synthesis, skin repair', accent: '#f59e0b' },
            { band: 'Mid IR', range: '1.4-3 microns', depth: 'Soft tissue (~5mm)', note: 'Muscle tissue, pain modulation', accent: '#e07b30' },
            { band: 'Far IR', range: '5.6-1000 microns', depth: '1.5-3 inches', note: 'Deep muscle, joints, core temp elevation', accent: '#b85a20' },
          ].map((b, i) => (
            <div key={i} style={{ padding: '14px 16px', background: 'var(--paper-2)', border: `1.5px solid ${b.accent}`, borderRadius: 12 }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 18, marginBottom: 2 }}>{b.band}</div>
              <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)' }}>{b.range}</div>
              <div style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 12.5, marginTop: 8, color: 'var(--text-2)' }}>Penetration: {b.depth}</div>
              <div style={{ fontSize: 12.5, color: 'var(--text-3)', marginTop: 3 }}>{b.note}</div>
            </div>
          ))}
        </div>

        <Ph w="100%" h={140} label="INFRARED SPECTRUM - WAVELENGTH PENETRATION DEPTH DIAGRAM" style={{ borderRadius: 10, margin: '14px 0' }} />

        <p style={{ fontSize: 15, lineHeight: 1.65 }}>
          Most home far-IR saunas emit in the 7-14 micron range, matching human tissue resonance frequency. Air temperature stays at 120-155°F (49-68°C) because the IR waves do the heating work directly in the tissue.
        </p>

        {/* Section 2 - Evidence */}
        <h2 style={{ margin: '34px 0 10px', fontSize: 26, letterSpacing: '-0.018em' }}>Benefit-by-Benefit Evidence</h2>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, margin: '14px 0' }}>
          {[
            { title: 'Cardiovascular', badge: 'Strong evidence', stat: '-12.3/-7.8 mmHg', detail: '8-week RCT (n=102). Cardiac output rises to 13 L/min during session. Consistent across cohorts.' },
            { title: 'Chronic pain', badge: 'Strong evidence', stat: '52% pain reduction', detail: '2024 RCT (n=127) vs 14% sham. 12-RCT meta-analysis: 40-50% at 8-12 weeks.' },
            { title: 'Skin and collagen', badge: 'Moderate evidence', stat: '+31% collagen density', detail: '23% wrinkle reduction after 12 weeks (2023 study). Near IR adds additional fibroblast activation.' },
            { title: 'Depression / mood', badge: 'Promising - limited trials', stat: '86.2%', detail: 'No longer met MDD criteria post UCSF protocol. 24% cortisol reduction (2023 RCT, 8 weeks).' },
            { title: 'Calorie expenditure', badge: 'Modest effect', stat: '~200-600 kcal', detail: 'Heat expenditure per 30-45 min session. Not exercise equivalent. Meaningful as a supplement.' },
            { title: 'Athletic recovery', badge: 'Moderate evidence', stat: 'Mixed - timing matters', detail: 'Post-endurance: positive. Post-strength: wait 2-3 hours to avoid blunting protein synthesis.' },
          ].map((item, i) => (
            <div key={i} style={{ padding: '16px 18px', background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8, marginBottom: 8 }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 17 }}>{item.title}</div>
                <EvidenceBadge level={item.badge} />
              </div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--ember-deep)', marginBottom: 6, letterSpacing: '-0.015em', lineHeight: 1 }}>{item.stat}</div>
              <div style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.5 }}>{item.detail}</div>
            </div>
          ))}
        </div>

        {/* Section 3 - Full Spectrum */}
        <h2 style={{ margin: '34px 0 10px', fontSize: 26, letterSpacing: '-0.018em' }}>Far IR vs Full Spectrum</h2>
        <p style={{ fontSize: 15, lineHeight: 1.65, marginBottom: 14 }}>
          Full spectrum adds near IR (0.76-1.4 microns) and mid IR (1.4-3 microns). Typical cost difference: $500-$2,000.
        </p>
        <div style={{ padding: '18px 20px', background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 12, fontSize: 14, lineHeight: 1.65, color: 'var(--text-2)' }}>
          <div style={{ marginBottom: 10 }}><strong style={{ color: 'var(--text)' }}>Far IR only is sufficient for:</strong> cardiovascular, pain, detox support, HSP70, relaxation. All major RCTs used far-IR protocols.</div>
          <div style={{ marginBottom: 10 }}><strong style={{ color: 'var(--text)' }}>Full spectrum adds real benefit for:</strong> skin collagen (near IR at 630-850nm), surface healing, red light therapy overlap.</div>
          <div><strong style={{ color: 'var(--ember-deep)' }}>Verdict:</strong> if skin is not a primary goal, far IR only is sufficient and $500-$2,000 less expensive.</div>
        </div>

        {/* Section 4 - Protocol */}
        <h2 style={{ margin: '34px 0 10px', fontSize: 26, letterSpacing: '-0.018em' }}>Session Protocol by Goal</h2>

        <div style={{ overflowX: 'auto', margin: '0 -18px', padding: '0 18px 4px' }}>
          <table style={{ minWidth: 520, width: '100%', borderCollapse: 'collapse', border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden', fontSize: 13 }}>
            <thead>
              <tr style={{ background: 'var(--paper-2)' }}>
                {['Goal', 'Temp', 'Duration', 'Frequency'].map((h, i) => (
                  <th key={i} style={{ padding: '10px 12px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {farIRProtocol.map((r, i) => (
                <tr key={i} style={{ borderBottom: i < farIRProtocol.length - 1 ? '1px solid var(--line)' : 'none' }}>
                  <td style={{ padding: '10px 12px', fontWeight: 500 }}>{r.goal}</td>
                  <td style={{ padding: '10px 12px', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--text-2)' }}>{r.temp}</td>
                  <td style={{ padding: '10px 12px', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--text-2)' }}>{r.duration}</td>
                  <td style={{ padding: '10px 12px', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--text-2)' }}>{r.frequency}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Section 5 - Timeline */}
        <h2 style={{ margin: '34px 0 10px', fontSize: 26, letterSpacing: '-0.018em' }}>How Long Before Results?</h2>

        <div style={{ border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden', margin: '14px 0' }}>
          {[
            ['Session 1-3', 'Acute perspiration, relaxation, temporary skin flush. Some users: better sleep within week 1.'],
            ['Week 2-3', 'Sleep quality improvements commonly reported. Subjective but consistent.'],
            ['Week 4-6', 'Cardiovascular markers begin responding. Resting HR often drops.'],
            ['Week 8-12', 'Pain scores measurably reduced. BP improvement visible in hypertensive subjects.'],
            ['6+ months', 'Sustained cardiovascular conditioning, measurable skin changes, cortisol regulation.'],
          ].map(([period, detail], i) => (
            <div key={i} style={{ padding: '13px 16px', borderBottom: i < 4 ? '1px solid var(--line)' : 'none', background: 'var(--paper-2)' }}>
              <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ember-deep)', marginBottom: 4 }}>{period}</div>
              <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.5 }}>{detail}</div>
            </div>
          ))}
        </div>

        {/* FAQ */}
        <h2 style={{ margin: '34px 0 14px', fontSize: 26, letterSpacing: '-0.018em' }}>FAQ</h2>
        <FAQ items={farIRFaq} />

        {/* CTA */}
        <div style={{ margin: '32px 0', padding: '20px', background: 'var(--ink)', borderRadius: 14 }}>
          <div className="eyebrow" style={{ color: 'var(--ember)', marginBottom: 8 }}>Our top pick</div>
          <Ph w="100%" h={140} label="PRODUCT" style={{ borderRadius: 10, marginBottom: 12 }} />
          <div style={{ fontFamily: 'var(--serif)', fontSize: 20, marginBottom: 6, color: 'var(--paper)' }}>Lumen Heritage 4</div>
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', marginBottom: 14, lineHeight: 1.5 }}>Full-spectrum, ultra-low EMF, Canadian cedar. 24 weeks of testing.</div>
          <a href="/best/best-infrared-saunas/" className="btn btn-ember" style={{ width: '100%', justifyContent: 'center', padding: '12px 0' }}>
            See all ranked picks →
          </a>
        </div>

        <AuthorBox />

        <div style={{ marginTop: 36, paddingTop: 28, borderTop: '1px solid var(--line)' }}>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginBottom: 18, letterSpacing: '-0.015em' }}>Continue reading</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {farIRRelated.map((a, i) => (
              <a key={i} href={a.href} style={{ textDecoration: 'none', color: 'inherit', display: 'flex', gap: 14 }}>
                <Ph w={80} h={64} label={a.cat.toUpperCase()} style={{ borderRadius: 8, flexShrink: 0 }} />
                <div>
                  <div className="eyebrow">{a.cat}</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 16, marginTop: 4, lineHeight: 1.25, letterSpacing: '-0.01em' }}>{a.title}</div>
                </div>
              </a>
            ))}
          </div>
        </div>

      </div>

      <MobStickyBar />
      <SiteFooter />
    </div>
  );
}

// ---- Exported shell ----------------------------------------
function FarInfraredBenefits({ mobile = false }) {
  return mobile ? <FarInfraredBenefitsMobile /> : <FarInfraredBenefitsDesktop />;
}

// ---- Expose to window --------------------------------------
Object.assign(window, { InfraredSaunaDetox, FarInfraredBenefits });
