/* Rootina Nutri — shared site chrome: Nav, Footer, Icon set, layout helpers.
   Loaded on every page before the page's own script. Exports to window. */
const { Button: RNButton } = window.RootinaNutriDesignSystem_7af00c;

const DS = "_ds/rootina-nutri-design-system-7af00c5e-b44e-4355-8863-4c0008e4fc46";

/* ---------------------------------------------------------------- icons */
const ICONS = {
  leaf: 'M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z|M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12',
  sprout: 'M7 20h10|M10 20c5.5-2.5.8-6.4 3-10|M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z|M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z',
  factory: 'M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z|M17 18h1|M12 18h1|M7 18h1',
  shield: 'M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z|m9 12 2 2 4-4',
  truck: 'M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2|M15 18H9|M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14|@circle 17 18 2|@circle 7 18 2',
  recycle: 'M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5|M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12|m14 16-3 3 3 3|M8.293 13.596 7.196 9.5 3.1 10.598|m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 11.985 3a1.784 1.784 0 0 1 1.546.888l3.943 6.843|m13.378 9.633 4.096 1.098 1.097-4.096',
  globe: '@circle 12 12 10|M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20|M2 12h20',
  award: 'm15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526|@circle 12 8 6',
  flask: 'M10 2v7.31|M14 9.3V1.99|M8.5 2h7|M14 9.3a6.5 6.5 0 1 1-4 0|M5.58 16.5h12.85',
  users: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2|@circle 9 7 4|M22 21v-2a4 4 0 0 0-3-3.87|M16 3.13a4 4 0 0 1 0 7.75',
  package: 'M16.5 9.4 7.5 4.21|M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z|M3.29 7 12 12l8.71-5|M12 22V12',
  store: 'm2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7|M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8|M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4|M2 7h20',
  utensils: 'M3 2v7c0 1.1.9 2 2 2a2 2 0 0 0 2-2V2|M5 2v20|M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7',
  building: 'M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z|M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2|M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2|M10 6h4|M10 10h4|M10 14h4',
  droplet: 'M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z',
  micro: 'M6 18h8|M3 22h18|M14 22a7 7 0 1 0 0-14h-1|M9 14h2|M9 12a2 2 0 0 1-2-2V6h6v4a2 2 0 0 1-2 2Z|M12 6V3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3',
  target: '@circle 12 12 10|@circle 12 12 6|@circle 12 12 2',
  layers: 'm12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z|m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65|m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65',
  warehouse: 'M22 8.35V20a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8.35A2 2 0 0 1 3.26 6.5l8-3.2a2 2 0 0 1 1.48 0l8 3.2A2 2 0 0 1 22 8.35Z|M6 18h12|M6 14h12|M6 10h12',
  phone: 'M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z',
  mail: '@rect 2 4 20 16 2|m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7',
  upload: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4|m17 8-5-5-5 5|M12 3v12',
  pin: 'M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0|@circle 12 10 3',
  send: 'M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z|m21.854 2.147-10.94 10.939',
  chevron: 'm6 9 6 6 6-6',
  arrow: 'M5 12h14|m12 5 7 7-7 7',
  arrowUp: 'M12 19V5|m5 12 7-7 7 7',
  handshake: 'm11 17 2 2a1 1 0 1 0 3-3|m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4|m21 3 1 11h-2|M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3|M3 4h8',
  clock: '@circle 12 12 10|M12 6v6l4 2',
  check: 'M20 6 9 17l-5-5',
  badge: 'M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z|m9 12 2 2 4-4',
  route: '@circle 6 19 3|M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15|@circle 18 5 3',
  beaker: 'M4.5 3h15|M6 3v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V3|M6 14h12',
  sun: '@circle 12 12 4|M12 2v2|M12 20v2|m4.93 4.93 1.41 1.41|m17.66 17.66 1.41 1.41|M2 12h2|M20 12h2|m6.34 17.66-1.41 1.41|m19.07 4.93-1.41 1.41',
  thermometer: 'M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z',
  facebook: 'M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z',
  linkedin: 'M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z|@rect 2 9 4 12|@circle 4 4 0',
  instagram: '@rect 2 2 20 20 5|M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z|M17.5 6.5h.01',
};

function Icon({ name, size = 24, stroke = 1.8, color = 'currentColor', style }) {
  const data = ICONS[name];
  if (!data) return null;
  const parts = data.split('|');
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">
      {parts.map((p, i) => {
        if (p.startsWith('@circle')) { const [, cx, cy, r] = p.split(' '); return <circle key={i} cx={cx} cy={cy} r={r} />; }
        if (p.startsWith('@rect')) { const [, x, y, w, h, rx] = p.split(' '); return <rect key={i} x={x} y={y} width={w} height={h} rx={rx} />; }
        return <path key={i} d={p} />;
      })}
    </svg>
  );
}

/* ---------------------------------------------------------------- nav */
const NAV = [
  { key: 'home', label: 'Home', href: 'index.html' },
  { key: 'about', label: 'About Us', children: [
    { key: 'company', label: 'The Company', sub: 'Story, vision & mission', href: 'about-company.html' },
    { key: 'foundation', label: 'Our Foundation', sub: 'Purpose & values', href: 'about-foundation.html' },
  ] },
  { key: 'products', label: 'Products', href: 'products.html' },
  { key: 'services', label: 'Services', href: 'services.html' },
  { key: 'divisions', label: 'Distribution', href: 'divisions.html' },
];

function Nav({ active, overlay }) {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    if (!overlay) return;
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll(); window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [overlay]);
  const isAbout = active === 'company' || active === 'foundation';
  // overlay = transparent nav with white text, used over the home slideshow
  const onDark = overlay && !scrolled;
  const linkStyle = (on) => ({
    fontSize: 15.5, fontWeight: on ? 700 : 500, cursor: 'pointer',
    color: onDark ? (on ? '#fff' : 'rgba(255,255,255,0.82)') : (on ? 'var(--color-root-green)' : 'var(--color-text)'),
    letterSpacing: 'var(--tracking-tight)', display: 'inline-flex', alignItems: 'center', gap: 5,
    padding: '6px 0', transition: 'color .15s ease', whiteSpace: 'nowrap',
  });
  return (
    <header style={{ position: overlay ? 'fixed' : 'sticky', top: 0, left: 0, right: 0, zIndex: 50,
      background: onDark ? 'transparent' : 'rgba(255,255,255,0.92)',
      backdropFilter: onDark ? 'none' : 'saturate(140%) blur(10px)',
      boxShadow: onDark ? 'none' : 'var(--shadow-nav)', transition: 'background .3s ease, box-shadow .3s ease' }}>
      <div className="wrap-w" style={{ height: 76, display: 'flex', alignItems: 'center', gap: 30 }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', background: '#fff',
          borderRadius: 12, padding: '7px 14px', boxShadow: onDark ? '0 2px 14px rgba(0,0,0,0.18)' : 'var(--shadow-card)' }}>
          <img src="assets/rotina-logo.png" alt="RotinaNutri" style={{ height: 30, display: 'block' }} />
        </a>
        <nav className="rn-navlinks" style={{ display: 'flex', gap: 28, flex: 1, marginLeft: 14 }}>
          {NAV.map((item) => item.children ? (
            <div key={item.key} className="rn-drop" style={linkStyle(isAbout)} tabIndex={0}>
              <span>{item.label}</span><Icon name="chevron" size={15} stroke={2.2} />
              <div className="rn-drop-menu">
                {item.children.map((c) => (
                  <a key={c.key} className="rn-drop-item" href={c.href}>
                    <div style={{ fontSize: 15, fontWeight: 700, color: active === c.key ? 'var(--color-root-green)' : 'var(--color-text)' }}>{c.label}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--color-text-soft)', marginTop: 2 }}>{c.sub}</div>
                  </a>
                ))}
              </div>
            </div>
          ) : (
            <a key={item.key} href={item.href} style={linkStyle(active === item.key)}>{item.label}</a>
          ))}
        </nav>
        <a className="rn-nav-cta" href="contact.html" style={{ marginLeft: 'auto' }}>
          <RNButton variant={onDark ? 'inverted' : 'primary'} size="sm">Contact us</RNButton>
        </a>
        <button className="rn-burger" onClick={() => setOpen(!open)} aria-label="Menu"
          style={{ marginLeft: 'auto', background: 'none', border: 0, cursor: 'pointer', color: onDark ? '#fff' : 'var(--color-root-green)', alignItems: 'center' }}>
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            {open ? <g><path d="M18 6 6 18" /><path d="m6 6 12 12" /></g> : <g><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></g>}
          </svg>
        </button>
      </div>
      <div className={'rn-mobile-panel' + (open ? ' open' : '')} style={{ background: '#fff', borderTop: '1px solid var(--color-hairline)', padding: '12px 22px 22px' }}>
        {NAV.flatMap((item) => item.children ? item.children : [item]).map((l) => (
          <a key={l.key} href={l.href} style={{ display: 'block', padding: '13px 0', fontSize: 17, fontWeight: 600,
            borderBottom: '1px solid var(--color-hairline)', color: active === l.key ? 'var(--color-root-green)' : 'var(--color-text)' }}>{l.label}</a>
        ))}
        <a href="contact.html" style={{ display: 'block', marginTop: 16 }}><RNButton variant="primary" fullWidth>Contact us</RNButton></a>
      </div>
    </header>
  );
}

/* ---------------------------------------------------------------- footer */
function Footer() {
  const cols = [
    { h: 'Company', items: [['The Company', 'about-company.html'], ['Our Foundation', 'about-foundation.html'], ['Services', 'services.html'], ['Distribution', 'divisions.html']] },
    { h: 'Products', items: [['Fruit powders', 'products.html'], ['Vegetable powders', 'products.html'], ['Smoothie mixes', 'products.html'], ['Full catalogue', 'products.html']] },
    { h: 'Work with us', items: [['Become a distributor', 'contact.html'], ['Export partnerships', 'contact.html'], ['Bulk & private label', 'contact.html'], ['Contact us', 'contact.html']] },
  ];
  return (
    <footer style={{ background: 'var(--color-forest)', color: '#fff' }}>
      <div className="wrap-w" style={{ padding: '64px 40px 36px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48 }} className="rn-foot-grid">
          <div>
            <span style={{ display: 'inline-flex', background: '#fff', borderRadius: 12, padding: '8px 16px', boxShadow: 'var(--shadow-card)' }}>
              <img src="assets/rotina-logo.png" alt="RotinaNutri" style={{ height: 34, display: 'block' }} />
            </span>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--color-text-white-soft)', maxWidth: 280, marginTop: 18 }}>
              Premium dehydrated fruit &amp; vegetable powders and smoothie mixes — crafted for the world's food, beverage and wellness makers.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
              {['linkedin', 'instagram', 'facebook'].map((s) => (
                <a key={s} href="contact.html" style={{ width: 38, height: 38, borderRadius: '50%', border: '1px solid var(--white-20)',
                  display: 'grid', placeItems: 'center', color: '#fff' }}><Icon name={s} size={17} /></a>
              ))}
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: 'var(--tracking-looser)', textTransform: 'uppercase', color: 'var(--color-mint-light)', marginBottom: 18 }}>{c.h}</div>
              {c.items.map((i) => (
                <a key={i[0]} href={i[1]} style={{ display: 'block', fontSize: 14.5, color: 'var(--color-text-white-soft)', marginBottom: 12, transition: 'color .15s' }}
                  onMouseEnter={(e) => e.currentTarget.style.color = '#fff'} onMouseLeave={(e) => e.currentTarget.style.color = 'var(--color-text-white-soft)'}>{i[0]}</a>
              ))}
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid var(--white-20)', marginTop: 48, paddingTop: 24,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12,
          fontSize: 13.5, color: 'var(--color-text-white-soft)' }}>
          <span>© 2026 Rootina Nutri. All rights reserved.</span>
          <span style={{ fontFamily: 'var(--font-script)', fontSize: 18, color: 'var(--color-mint-light)' }}>Rooted in nature, refined by science.</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------------------------------------------------------------- helpers */
function Img({ id, h = 320, tone = '', shape = 'rounded', radius = 16, placeholder = 'Drop an image', style = {}, fit = 'cover' }) {
  return (
    <image-slot id={id} class={tone} shape={shape} radius={String(radius)} fit={fit}
      placeholder={placeholder} style={{ height: typeof h === 'number' ? h + 'px' : h, ...style }}></image-slot>
  );
}

function Eyebrow({ children, style }) { return <div className="eyebrow reveal" style={style}>{children}</div>; }

function SectionHead({ eyebrow, title, intro, center, light, max = 640 }) {
  const c = light ? '#fff' : 'var(--color-root-green)';
  return (
    <div style={{ textAlign: center ? 'center' : 'left', maxWidth: center ? max : 'none', margin: center ? '0 auto' : 0 }}>
      {eyebrow && <div className="eyebrow reveal" style={{ color: light ? 'var(--color-mint-light)' : 'var(--color-green-accent)' }}>{eyebrow}</div>}
      <h2 className="reveal d1" style={{ fontSize: 'clamp(30px, 4vw, 42px)', lineHeight: 1.1, fontWeight: 800,
        letterSpacing: '-0.5px', color: c, margin: '14px 0 0' }}>{title}</h2>
      {!center && <div className="rule reveal d1" style={{ margin: '20px 0 0', background: light ? 'var(--color-mint-light)' : 'var(--color-green-accent)' }} />}
      {center && <div className="rule reveal d2" style={{ margin: '20px auto 0', background: light ? 'var(--color-mint-light)' : 'var(--color-green-accent)' }} />}
      {intro && <p className="reveal d2" style={{ fontSize: 18, lineHeight: 1.7, color: light ? 'var(--color-text-white-soft)' : 'var(--color-text-soft)',
        margin: center ? '22px auto 0' : '22px 0 0', maxWidth: center ? max : 560 }}>{intro}</p>}
    </div>
  );
}

/* Interior page hero band */
function PageHero({ eyebrow, title, intro }) {
  return (
    <section style={{ background: 'var(--color-forest)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', inset: 0, opacity: 0.5,
        background: 'radial-gradient(640px 360px at 82% -10%, rgba(31,138,82,0.55), transparent 70%), radial-gradient(520px 320px at 8% 120%, rgba(47,90,74,0.6), transparent 70%)' }} />
      <div className="wrap" style={{ position: 'relative', padding: '88px 40px 96px', textAlign: 'center' }}>
        {eyebrow && <div className="eyebrow" style={{ color: 'var(--color-mint-light)' }}>{eyebrow}</div>}
        <h1 style={{ fontSize: 'clamp(38px, 6vw, 64px)', lineHeight: 1.04, fontWeight: 800, letterSpacing: '-1px', margin: '16px auto 0', maxWidth: 900 }}>{title}</h1>
        <div className="rule" style={{ margin: '26px auto 0', background: 'var(--color-mint-light)' }} />
        {intro && <p style={{ fontSize: 19, lineHeight: 1.7, color: 'var(--color-text-white-soft)', margin: '26px auto 0', maxWidth: 660 }}>{intro}</p>}
      </div>
    </section>
  );
}

/* CTA band reused across pages */
function CTABand({ title, text, primary = ['Request a business inquiry', 'contact.html'], secondary }) {
  return (
    <section className="reveal" style={{ background: 'var(--color-forest)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', inset: 0, opacity: 0.6,
        background: 'radial-gradient(700px 380px at 85% 120%, rgba(31,138,82,0.5), transparent 70%)' }} />
      <div className="wrap" style={{ position: 'relative', padding: '76px 40px', textAlign: 'center' }}>
        <h2 style={{ fontSize: 'clamp(28px, 4vw, 44px)', fontWeight: 800, letterSpacing: '-0.5px', margin: 0, maxWidth: 760, marginInline: 'auto', lineHeight: 1.1 }}>{title}</h2>
        {text && <p style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--color-text-white-soft)', margin: '20px auto 0', maxWidth: 600 }}>{text}</p>}
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 32, flexWrap: 'wrap' }}>
          <a href={primary[1]}><RNButton variant="inverted">{primary[0]}</RNButton></a>
          {secondary && <a href={secondary[1]}><RNButton variant="ghostDark">{secondary[0]}</RNButton></a>}
        </div>
      </div>
    </section>
  );
}

/* checkmark list item */
function CheckItem({ title, children }) {
  return (
    <li style={{ display: 'flex', gap: 14, alignItems: 'flex-start', marginBottom: 18 }}>
      <span style={{ flex: '0 0 26px', width: 26, height: 26, borderRadius: '50%', background: 'var(--color-mint-light)',
        display: 'grid', placeItems: 'center', marginTop: 2 }}><Icon name="check" size={15} stroke={2.6} color="var(--color-green-accent)" /></span>
      <div>
        {title && <div style={{ fontSize: 16.5, fontWeight: 700, color: 'var(--color-text)' }}>{title}</div>}
        <div style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--color-text-soft)', marginTop: title ? 3 : 0 }}>{children}</div>
      </div>
    </li>
  );
}

/* ---------------------------------------------------------------- reveal engine */
function initReveal() {
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) return;
  const io = new IntersectionObserver((entries) => {
    entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
  }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
  const scan = () => document.querySelectorAll('.reveal:not(.in)').forEach((el) => io.observe(el));
  scan();
  const mo = new MutationObserver(scan);
  mo.observe(document.body, { childList: true, subtree: true });
  // safety: reveal everything still hidden after 2.5s so nothing can stay
  // permanently invisible (long pages, automated captures, PDF export).
  setTimeout(() => document.querySelectorAll('.reveal:not(.in)').forEach((el) => el.classList.add('in')), 2500);
}

window.Chrome = { Nav, Footer, Icon, Img, Eyebrow, SectionHead, PageHero, CTABand, CheckItem, initReveal, DS };