// Susu — public website (pre-launch).
// Forked from the landing UI kit. Hero → launch-list, values section added.

const useIsMobile = () => {
  const [m, setM] = React.useState(() => typeof window !== 'undefined' && window.innerWidth < 700);
  React.useEffect(() => {
    const f = () => setM(window.innerWidth < 700);
    window.addEventListener('resize', f);
    return () => window.removeEventListener('resize', f);
  }, []);
  return m;
};
const mix = (base, mobile, isMobile) => isMobile ? {...base, ...mobile} : base;

// ============================================================
// IMAGE MASKING — per-side fade controls.
// Each image has independent fade widths on left/right/top/bottom
// so we can obscure the text-side heavily and let the focal side
// stay sharper. Larger value = wider fade band on that side.
// ============================================================
// Per-image left/right fade widths (% of width). Bump the text-side
// (usually `left`) higher to obscure more behind text, keep the
// off-screen side (usually `right`) low so the focal subject reads
// through. Top/bottom edge blending is uniform across all images and
// handled separately via `STACK_OVERLAP` so adjacent images cross-fade.
const LEFT_FADE = 65;
const RIGHT_FADE = 15;
const MASK_OVERRIDES = {
  'assets/susu-rescue.jpg': { bottom: 50 },
};
const maskFor = (img) => {
  const p = MASK_OVERRIDES[img] || {};
  const layers = [
    `linear-gradient(to right, transparent, #000 ${LEFT_FADE}%)`,
    `linear-gradient(to left,  transparent, #000 ${RIGHT_FADE}%)`,
    `linear-gradient(to bottom, transparent, #000 ${STACK_OVERLAP}px)`,
  ];
  if (p.bottom) layers.push(`linear-gradient(to top, transparent, #000 ${p.bottom}%)`);
  const m = layers.join(', ');
  return {
    maskImage: m,
    WebkitMaskImage: m,
    maskComposite: 'intersect',
    WebkitMaskComposite: 'source-in',
  };
};

// ============================================================
// IMAGE STACK — all photographic background decor lives in a single
// absolutely-positioned overlay so we can place images at exact y
// coordinates independent of section/row layout. Banner is fixed at
// the hero, the last image sits at the launch list, and the rest are
// equidistant in between. Wrap App in `position:relative` so the
// overlay's absolute children measure against it.
// ============================================================
// Banner stays at the hero, rescue sits flush with the footer top, and
// the six images in between are uniformly spaced. Adjacent images share
// a `STACK_OVERLAP` px cross-fade region: image N is opaque to its real
// bottom edge, image N+1 fades in over that edge from transparent to
// opaque across the same band. There's no bottom fade — the bottom edge
// is always covered by the next image's fade-in, so the whole stack
// reads as one tall vertical mural with no double-dimming and no waste.
const STACK_OVERLAP = 400;
const STACK_HEIGHT  = 958;
const STACK_WIDTH   = 794;
const STACK_SPACING = STACK_HEIGHT - STACK_OVERLAP; // 558
// Cache-bust image URLs so swapping a file in `assets/` is picked up by
// browsers that have the old version cached. Bumped with the page-level
// `?v=N` cache-buster in `index.html`.
const ASSET_VERSION = '131';
const STACK_IMAGES = [
  { src: 'assets/susu-banner.jpg',       top:   99 },
  { src: 'assets/susu-mirror.png',       top:  657 },
  { src: 'assets/susu-goals.jpg',        top: 1215 },
  { src: 'assets/susu-paint.png',        top: 1773 },
  { src: 'assets/susu-health.png',       top: 2331 },
  { src: 'assets/susu-play-outside.png', top: 2889 },
  { src: 'assets/susu-court.png',        top: 3447 },
  { src: 'assets/susu-rescue.jpg',       top: 4005 },
];
const ImageStack = () => {
  const isMobile = useIsMobile();
  if (isMobile) return null;
  return (
    <div style={{position:'absolute', top:0, left:0, right:0, bottom:0,
                 pointerEvents:'none', zIndex:1, overflow:'hidden'}}>
      {STACK_IMAGES.map(({src, top}) => (
        <div key={src} style={{
          position:'absolute', top, right:56,
          width:STACK_WIDTH, height:STACK_HEIGHT,
          backgroundImage:`url(${src}?v=${ASSET_VERSION})`,
          backgroundSize:'cover',
          backgroundPosition:'center',
          backgroundRepeat:'no-repeat',
          ...maskFor(src),
        }} aria-hidden="true"/>
      ))}
    </div>
  );
};

// ============================================================
// NAV
// ============================================================
const Logo = ({size=32, color='var(--fluoro)'}) => (
  <span style={{
    fontFamily: "var(--font-marker)",
    fontWeight: 400,
    fontSize: size * 1.35,
    letterSpacing: '0.005em',
    color,
    lineHeight: 0.9,
    display: 'inline-block',
    transform: 'rotate(-3deg)',
    transformOrigin: 'left bottom',
  }}>Susu!</span>
);

const Nav = () => {
  const isMobile = useIsMobile();
  return (
    <header style={mix(navS.bar, navM.bar, isMobile)}>
      <a href="#top" style={{display:'flex',alignItems:'center',textDecoration:'none'}}>
        <Logo size={isMobile ? 24 : 32} />
      </a>
      <span style={navS.statusGroup}>
        <span style={navS.led}></span>
        <span style={navS.status}>pre-launch</span>
      </span>
      {!isMobile && (
        <nav style={navS.links}>
          {COPY.nav.links.map(({href, label}) => (
            <a key={href} href={href} style={navS.link}>{label}</a>
          ))}
        </nav>
      )}
      <span style={mix(navS.dots, navM.dots, isMobile)}></span>
      <span style={navS.status}>{COPY.banner.timing}</span>
    </header>
  );
};
const navS = {
  bar: { display:'flex', alignItems:'center', gap:'32px',
         padding:'20px 56px 40px',
         background:'rgba(0,0,0,0.92)', position:'sticky', top:0, zIndex:20,
         backdropFilter:'none' },
  links: { display:'flex', gap:'32px' },
  link: { fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.18em',
          textTransform:'uppercase', color:'var(--fg)', textDecoration:'none' },
  dots: { flex:1, borderBottom:'1px dashed var(--rule-strong)',
          minWidth:48, transform:'translateY(-1px)' },
  statusGroup: { display:'inline-flex', alignItems:'center', gap:10 },
  led: { width:8, height:8, background:'var(--lime)', display:'inline-block',
         boxShadow:'0 0 8px var(--lime)' },
  status: { fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.18em',
            textTransform:'uppercase', color:'var(--fg-soft)',
            whiteSpace:'nowrap' },
};
const navM = {
  bar: { gap:14, padding:'14px 20px 18px' },
  dots: { minWidth:16 },
};

// ============================================================
// PRE-LAUNCH BANNER — sits above hero, status-line register
// ============================================================
const Banner = () => (
  <div style={bnS.bar}>
    <span style={bnS.dot}></span>
    <span style={bnS.txt}>{COPY.banner.status}</span>
    <span style={bnS.dots}></span>
    <span style={bnS.txt}>{COPY.banner.timing}</span>
  </div>
);
const bnS = {
  bar: { display:'flex', alignItems:'center', gap:12, padding:'10px 56px',
         background:'var(--bg-sunken)',
         fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.18em',
         textTransform:'uppercase', color:'var(--fg-soft)' },
  dot: { width:8, height:8, background:'var(--lime)', display:'inline-block',
         boxShadow:'0 0 8px var(--lime)' },
  txt: { color:'var(--fg-soft)' },
  dots: { flex:1, borderBottom:'1px dashed var(--rule-strong)' },
};

// ============================================================
// JOIN LINK — low-key fluoro text link at the foot of each
// content section, scrolling to and focusing the launch-list
// email input. Marker font, slight tilt, no button chrome.
// ============================================================
const JoinLink = () => (
  <a href="#list" style={joinS.link} onClick={(e) => {
    e.preventDefault();
    const input = document.getElementById('launch-email');
    input?.scrollIntoView({behavior:'smooth', block:'center'});
    input?.focus({preventScroll:true});
  }}>
    <span style={joinS.arrow}>→</span>
    <span>i love it already</span>
  </a>
);
const joinS = {
  link: { display:'inline-flex', alignItems:'center', gap:10,
          fontFamily:'var(--font-mono)', fontSize:14, letterSpacing:'.18em',
          textTransform:'uppercase', color:'var(--fg-soft)', fontWeight:600,
          textDecoration:'underline', textDecorationColor:'var(--fg-mute)',
          textUnderlineOffset:6, marginTop:28,
          position:'relative', zIndex:1 },
  arrow: { fontSize:16, lineHeight:1 },
};

// ============================================================
// HERO — strike-through-and-handwrite motif
// ============================================================
const Hero = () => {
  const isMobile = useIsMobile();
  return (
    <section style={mix(heroS.wrap, heroM.wrap, isMobile)} id="top">
      {isMobile && (
        <div aria-hidden="true" style={{
          position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
          zIndex: 0, opacity: 0.3,
          backgroundImage: `url(assets/susu-banner.jpg?v=${ASSET_VERSION})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat',
          maskImage: 'linear-gradient(to bottom, #000 70%, transparent 100%)',
          WebkitMaskImage: 'linear-gradient(to bottom, #000 70%, transparent 100%)',
        }}/>
      )}
      {COPY.hero.eyebrow && <div style={heroS.eyebrow}>{COPY.hero.eyebrow}</div>}
      <h1 style={mix(heroS.headline, heroM.headline, isMobile)}>
        <span style={heroS.overlayWrap}>
          <span style={heroS.under}>{COPY.hero.headlineStrike}</span>
          <span style={mix(heroS.tag, heroM.tag, isMobile)}>{COPY.hero.headlineTag}</span>
        </span>
        <br/>
        {COPY.hero.headlineAfter}
      </h1>
      <p style={mix(heroS.lede, heroM.lede, isMobile)}>
        {COPY.hero.ledeBefore}<span style={{color:'var(--fg)', fontWeight:700}}>{COPY.hero.ledeCircled}</span>{COPY.hero.ledeAfter}
      </p>
      <div style={mix(heroS.ctaRow, heroM.ctaRow, isMobile)}>
        <a href="#list" style={mix(heroS.ctaPrimary, heroM.ctaPrimary, isMobile)}
           onClick={(e) => {
             e.preventDefault();
             const input = document.getElementById('launch-email');
             input?.scrollIntoView({behavior:'smooth', block:'center'});
             input?.focus({preventScroll:true});
           }}>
          {COPY.hero.ctaPrimaryLabel}
        </a>
      </div>
      {COPY.hero.foots.length > 0 && (
        <div style={heroS.footRow}>
          {COPY.hero.foots.map(f => <span key={f} style={heroS.foot}>{f}</span>)}
        </div>
      )}
    </section>
  );
};
const heroS = {
  wrap: { padding:'96px 56px 48px', position:'relative', overflow:'hidden' },
  bgDecor: { position:'absolute', top:0, right:0, width:853, height:747,
             zIndex:0, pointerEvents:'none',
             backgroundImage: 'url(assets/susu-banner.jpg)',
             backgroundSize: 'cover',
             backgroundPosition: 'center',
             backgroundRepeat: 'no-repeat' },
  eyebrow: { fontFamily:'var(--font-mono)', fontSize:13, letterSpacing:'.22em',
             textTransform:'uppercase', color:'var(--fg-soft)', marginBottom:32, fontWeight:600 },
  headline: { fontFamily:'var(--font-display)', fontSize:168, lineHeight:.92,
              letterSpacing:'-.04em', margin:'0 0 72px', maxWidth:1200, fontWeight:500,
              color:'var(--fg)', position:'relative', zIndex:1,
              textShadow:'0 0 32px #000, 0 0 64px #000' },
  brand: { fontFamily:'var(--font-marker)', color:'var(--fluoro)',
           display:'inline-block', transform:'rotate(-3deg)',
           transformOrigin:'left bottom', letterSpacing:'.005em',
           lineHeight:.85 },
  is: { fontSize:64, color:'var(--fg-mute)', fontWeight:300,
        letterSpacing:'-.02em', marginLeft:28, display:'inline-block',
        verticalAlign:'baseline' },
  overlayWrap: { position:'relative', display:'inline-block' },
  under: { color:'var(--fg-faint)', fontStyle:'italic', display:'inline-block' },
  tag: { fontFamily:'var(--font-marker)', fontSize:200, color:'var(--fluoro)',
         position:'absolute', left:'22%', top:'11%',
         transform:'rotate(-12deg)', transformOrigin:'left bottom',
         letterSpacing:'-.01em',
         lineHeight:1, pointerEvents:'none', whiteSpace:'nowrap' },
  lede: { fontFamily:'var(--font-sans)', fontSize:24, lineHeight:1.4,
          color:'var(--fg-soft)', maxWidth:680, margin:'0 0 64px',
          position:'relative', zIndex:1, whiteSpace:'pre-line' },
  circled: { position:'relative', display:'inline-block', padding:'0 .3em', color:'var(--fluoro)' },
  ctaRow: { display:'flex', flexDirection:'row', alignItems:'center',
            gap:48, marginBottom:64, flexWrap:'wrap',
            position:'relative', zIndex:1 },
  ctaPrimary: { fontFamily:'var(--font-marker)', fontSize:34, fontWeight:400,
                padding:'24px 36px', background:'var(--fluoro)', color:'var(--bg)',
                textDecoration:'none',
                boxShadow:'6px 6px 0 var(--lime), 12px 12px 0 var(--fg)',
                position:'relative', display:'inline-flex',
                alignItems:'center', justifyContent:'center', lineHeight:1,
                transform:'rotate(-1.5deg)', letterSpacing:'-.005em',
                marginTop:-14 },
  ctaKicker: { fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.22em',
               textTransform:'uppercase', color:'var(--bg)', opacity:.7,
               fontWeight:500 },
  ctaLabel: { display:'inline-flex', alignItems:'baseline', gap:14 },
  ctaArrow: { fontFamily:'var(--font-display)', fontSize:30, fontWeight:700,
              transform:'translateY(2px)' },
  ctaGhost: { fontFamily:'var(--font-sans)', fontSize:14, color:'var(--fg)',
              textDecoration:'underline', textUnderlineOffset:6, marginLeft:24 },
  equation: { display:'grid', gridTemplateColumns:'auto 1fr',
              columnGap:18, rowGap:2, alignItems:'baseline',
              paddingTop:4 },
  eqOp: { fontFamily:'var(--font-marker)', fontSize:36, color:'var(--fluoro)',
          lineHeight:.9, textAlign:'right', minWidth:24 },
  eqTerm: { fontFamily:'var(--font-display)', fontSize:24, color:'var(--fg)',
            textDecoration:'none',
            fontWeight:500, letterSpacing:'-.02em', lineHeight:1.1,
            transition:'color 120ms ease' },
  eqRule: { gridColumn:'1 / -1', borderTop:'2px solid var(--fluoro)',
            margin:'13px 0 4px 0' },
  footRow: { display:'flex', gap:24, paddingTop:20, marginTop:8, flexWrap:'wrap' },
  foot: { fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.12em',
          textTransform:'uppercase', color:'var(--fg-mute)' },
};
const heroM = {
  wrap: { padding:'24px 20px 32px' },
  bgDecor: { display:'none' },
  headline: { fontSize:72, marginBottom:24, letterSpacing:'-.03em' },
  tag: { fontSize:88, left:'18%', top:'8%' },
  lede: { fontSize:17, marginBottom:28 },
  ctaRow: { gap:24, marginBottom:32, flexDirection:'column', alignItems:'flex-start' },
  ctaPrimary: { fontSize:24, padding:'18px 24px',
                boxShadow:'4px 4px 0 var(--lime), 8px 8px 0 var(--fg)',
                marginTop:0 },
  eqTerm: { fontSize:20 },
};

// ============================================================
// EQUATION — grade-school math glyph that links V + T = B.
// Used as a section connector. Big, hand-drawn, fluoro.
// ============================================================
const EqGlyph = ({ symbol }) => {
  const isMobile = useIsMobile();
  return (
    <div style={mix(eqS.wrap, eqM.wrap, isMobile)} aria-hidden="true">
      <span style={mix(eqS.sym, eqM.sym, isMobile)}>{symbol}</span>
    </div>
  );
};
const eqS = {
  wrap: { display:'flex', justifyContent:'flex-start', alignItems:'center',
          padding:'8px 56px', background:'var(--bg)' },
  sym: { fontFamily:'var(--font-marker)', fontSize:96, lineHeight:.85,
         color:'var(--fluoro)', display:'block' },
};
const eqM = {
  wrap: { padding:'4px 20px' },
  sym: { fontSize:56 },
};

// ============================================================
// VALUES (a.k.a. the manifesto) — § I. five things we believe.
// Declarative, big type, marker register. No standalone manifesto block.
// ============================================================
const VALUES_MARKER_TWEAKS = [
  { rot: -8, dy: -4, size: 36 },
  { rot: 5,  dy: 2,  size: 32 },
  { rot: -5, dy: -2, size: 30 },
  { rot: 7,  dy: 0,  size: 34 },
  { rot: -9, dy: -2, size: 36 },
];

const Values = () => {
  const isMobile = useIsMobile();
  return (
    <section style={mix(vS.wrap, vM.wrap, isMobile)} id="values">
      <h2 style={mix(vS.h, vM.h, isMobile)}>
        <span style={vS.hLogo}><Logo size={isMobile ? 18 : 28} /></span>
        {COPY.values.headlineBefore && <>{COPY.values.headlineBefore}<br/></>}<span style={vS.markerH}>{COPY.values.headlineMarker}</span>{COPY.values.headlineAfter}
      </h2>
      <ol style={vS.list}>
        {COPY.values.items.map((v, i) => {
          const t = VALUES_MARKER_TWEAKS[i % VALUES_MARKER_TWEAKS.length];
          const mSize = isMobile ? 20 : 26;
          return (
            <li key={v.n} style={mix(vS.row, vM.row, isMobile)}>
              <h3 style={mix(vS.rowH, vM.rowH, isMobile)}>
                <span>{v.prefix}</span>{' '}
                <span style={vS.strikeWrap}>
                  <span style={vS.strike}>{v.strike}</span>
                  <span style={{
                    ...vS.marker,
                    fontSize: mSize,
                    transform: `rotate(${t.rot}deg) translate(0, ${t.dy}px)`,
                  }}>{v.marker}</span>
                </span>
                {v.suffix && <span>{' '}{v.suffix}</span>}
              </h3>
              <p style={mix(vS.rowBody, vM.rowBody, isMobile)}>{renderRefs(v.body)}</p>
            </li>
          );
        })}
      </ol>
      <JoinLink/>
    </section>
  );
};
const vS = {
  wrap: { padding:'32px 56px 40px', background:'var(--bg)', position:'relative' },
  h: { position:'relative', zIndex:1,
       fontFamily:'var(--font-display)', fontSize:80, lineHeight:.95, letterSpacing:'-.035em',
       margin:'0 0 32px', fontWeight:500, color:'var(--fg)',
       textShadow:'0 0 24px #000, 0 0 48px #000' },
  hLogo: { display:'block', marginBottom:8, whiteSpace:'nowrap' },
  markerH: { fontFamily:'var(--font-display)', color:'var(--fg)',
             display:'inline-block', fontWeight:700 },
  list: { listStyle:'none', padding:0, margin:0, position:'relative', zIndex:1 },
  row: { padding:'32px 0', position:'relative' },
  rowBg: { position:'absolute', top:0, right:-56, width:853, height:747, zIndex:0, pointerEvents:'none',
           backgroundSize:'cover', backgroundPosition:'center', backgroundRepeat:'no-repeat' },
  numCol: { display:'flex', position:'relative', zIndex:1 },
  num: { fontFamily:'var(--font-mono)', fontSize:14, color:'var(--fg-mute)',
         letterSpacing:'.18em', paddingTop:14 },
  bodyCol: { maxWidth:560, position:'relative', zIndex:1 },
  rowH: { fontFamily:'var(--font-display)', fontSize:40, lineHeight:1.1,
          letterSpacing:'-.025em', margin:'0 0 16px', fontWeight:500, color:'var(--fg)' },
  rowBody: { fontFamily:'var(--font-sans)', fontSize:18, lineHeight:1.55,
             color:'var(--fg-soft)', margin:0, maxWidth:560 },
  strikeWrap: { display:'inline-grid', alignItems:'center', justifyItems:'center', verticalAlign:'baseline' },
  strike: { gridArea:'1 / 1', color:'var(--fg-mute)', fontStyle:'italic' },
  marker: { gridArea:'1 / 1', fontFamily:'var(--font-marker)', color:'var(--fluoro)',
            transformOrigin:'center center', whiteSpace:'nowrap',
            textTransform:'uppercase', lineHeight:.95, zIndex:2,
            pointerEvents:'none' },
};
const vM = {
  wrap: { padding:'16px 20px 32px' },
  h: { fontSize:48, marginBottom:16, letterSpacing:'-.025em' },
  row: { padding:'18px 0' },
  rowH: { fontSize:24, lineHeight:1.2, marginBottom:10 },
  rowBody: { fontSize:15, lineHeight:1.5 },
};

// ============================================================
// TECHNOLOGY — § II. five capabilities. spec-sheet register.
// Spec strings parse on `->` (sequence) and `+` (combination) into
// pill-boxes joined by marker glyphs.
// ============================================================
const renderSpec = (spec) => {
  const tokens = spec.split(/(\s*->\s*|\s*\+\s*|\s*=\s*)/).filter(Boolean);
  return tokens.map((tok, i) => {
    const t = tok.trim();
    if (t === '->') return <span key={i} style={tS.specArrow}>→</span>;
    if (t === '+')  return <span key={i} style={tS.specPlus}>+</span>;
    if (t === '=')  return <span key={i} style={tS.specEquals}>=</span>;
    return <span key={i} style={tS.specPill}>{t}</span>;
  });
};
const Technology = () => {
  const isMobile = useIsMobile();
  return (
    <section style={mix(tS.wrap, tM.wrap, isMobile)} id="technology">
      <div style={tS.head}>
        {COPY.technology.eyebrow && <div style={tS.eyebrow}>{COPY.technology.eyebrow}</div>}
        <h2 style={mix(tS.h, tM.h, isMobile)}>
          <span style={tS.hLogo}><Logo size={isMobile ? 18 : 28} /></span>
          {COPY.technology.headlineBefore && <>{COPY.technology.headlineBefore}<br/></>}{COPY.technology.headlineAfter}
        </h2>
        <p style={tS.intro}>
          {COPY.technology.intro}
        </p>
      </div>
      <ol style={tS.list}>
        {COPY.technology.items.map((t) => {
          return (
            <li key={t.n} style={mix(tS.row, tM.row, isMobile)}>
              <h3 style={mix(tS.cardH, tM.cardH, isMobile)}>
                {t.strike ? (
                  <>
                    {t.prefix && <><span>{t.prefix}</span>{' '}</>}
                    <span style={vS.strikeWrap}>
                      <span style={vS.strike}>{t.strike}</span>
                      <span style={{
                        ...vS.marker,
                        fontSize: isMobile ? 22 : 30,
                        transform: `rotate(${VALUES_MARKER_TWEAKS[(parseInt(t.n,10)-1) % VALUES_MARKER_TWEAKS.length].rot}deg)`,
                      }}>{t.marker}</span>
                    </span>
                    {t.suffix && <span>{' '}{t.suffix}</span>}
                  </>
                ) : t.head}
              </h3>
              <div style={tS.specRow}>{renderSpec(t.spec)}</div>
              <p style={mix(tS.cardBody, tM.cardBody, isMobile)}>{renderRefs(t.body)}</p>
            </li>
          );
        })}
      </ol>
    </section>
  );
};
const tS = {
  wrap: { padding:'32px 56px 40px', background:'var(--bg)', position:'relative' },
  head: { display:'flex', flexDirection:'column', alignItems:'flex-start',
          gap:16, marginBottom:32, maxWidth:560,
          position:'relative', zIndex:1 },
  eyebrow: { fontFamily:'var(--font-mono)', fontSize:13, letterSpacing:'.22em',
             textTransform:'uppercase', color:'var(--lime)', marginBottom:16,
             fontWeight:600 },
  h: { position:'relative',
       fontFamily:'var(--font-display)', fontSize:80, lineHeight:.95, letterSpacing:'-.035em',
       margin:0, fontWeight:500, color:'var(--fg)',
       textShadow:'0 0 24px #000, 0 0 48px #000' },
  hLogo: { display:'block', marginBottom:8, whiteSpace:'nowrap' },
  intro: { fontFamily:'var(--font-sans)', fontSize:18, lineHeight:1.5,
           color:'var(--fg-soft)', margin:0, maxWidth:560 },
  list: { listStyle:'none', padding:0, margin:0, position:'relative', zIndex:1 },
  row: { padding:'32px 0', position:'relative' },
  rowBg: { position:'absolute', top:0, right:-56, width:853, height:747, zIndex:0, pointerEvents:'none',
           backgroundSize:'cover', backgroundPosition:'center', backgroundRepeat:'no-repeat' },
  bigN: { fontFamily:'var(--font-mono)', fontSize:14, lineHeight:1,
          letterSpacing:'.18em', color:'var(--fg-mute)', fontWeight:400,
          paddingTop:14,
          position:'relative', zIndex:1 },
  bodyCol: { minWidth:0, position:'relative', zIndex:1 },
  cardH: { fontFamily:'var(--font-display)', fontSize:40, lineHeight:1.05,
           letterSpacing:'-.025em', margin:'0 0 18px', fontWeight:500, color:'var(--fg)',
           textShadow:'0 0 24px #000, 0 0 48px #000' },
  specRow: { display:'flex', alignItems:'center', flexWrap:'wrap',
             gap:10, marginBottom:24 },
  specPill: { fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.18em',
              textTransform:'uppercase', color:'var(--lime)',
              border:'1px solid var(--lime)', padding:'6px 12px',
              borderRadius:0, lineHeight:1 },
  specArrow: { fontFamily:'var(--font-marker)', fontSize:24, color:'var(--fluoro)',
               lineHeight:1, display:'inline-flex', alignItems:'center',
               height:25, transform:'translateY(-3px)' },
  specPlus: { fontFamily:'var(--font-marker)', fontSize:24, color:'var(--fluoro)',
              lineHeight:1, display:'inline-flex', alignItems:'center',
              height:25, transform:'translateY(-3px)' },
  specEquals: { fontFamily:'var(--font-marker)', fontSize:24, color:'var(--fluoro)',
                lineHeight:1, display:'inline-flex', alignItems:'center',
                height:25, transform:'translateY(-3px)' },
  cardBody: { fontFamily:'var(--font-sans)', fontSize:18, lineHeight:1.7,
              color:'var(--fg-soft)', margin:0, maxWidth:560 },
};
const tM = {
  wrap: { padding:'24px 20px 32px' },
  h: { fontSize:56, lineHeight:.95 },
  row: { padding:'20px 0' },
  cardH: { fontSize:28, marginBottom:14, letterSpacing:'-.02em' },
  cardBody: { fontSize:15, lineHeight:1.55 },
};

// ============================================================
// BENEFITS — § III. what you actually get out of it.
// Stamped, written-by-hand register. The "answer" of the equation.
// {{v:...}} marks a value reference (fluoro marker), {{t:...}} a tech
// reference (lime marker), {{?}} a known-unknown placeholder.
// ============================================================
const refBase = { fontFamily:'var(--font-marker)', display:'inline-block',
                   padding:'0 .15em', lineHeight:1 };
const refColor = { v:'var(--lime)', t:'var(--lime)', b:'var(--lime)', q:'var(--fg-mute)' };
// Wider refs get less tilt -- a 30-char phrase rotated 5deg looks broken;
// a 6-char one needs the swing to read as marker.
const refAngle = (text, kind, flip) => {
  const seed = [...text].reduce((a,c)=>a+c.charCodeAt(0), 0);
  const mag = Math.min(5, 11 / Math.sqrt(Math.max(text.length, 4)));
  const sign = (kind === 'v' ? -1 : 1) * (flip ? -1 : 1);
  const jitter = ((seed % 7) - 3) * 0.25;
  return (sign * mag + jitter).toFixed(2);
};
const renderRefs = (str) => {
  const parts = [];
  const re = /\{\{(v|t|b|s|\?)(-)?:?([^}]*)\}\}/g;
  let last = 0, m, key = 0;
  while ((m = re.exec(str)) !== null) {
    if (m.index > last) parts.push(str.slice(last, m.index));
    const kind = m[1], flip = m[2] === '-', text = m[3];
    if (kind === '?') {
      parts.push(<span key={key++} style={{...refBase, color:refColor.q}}>?</span>);
    } else if (kind === 's') {
      parts.push(<span key={key++} style={{
        textDecoration:'line-through',
        textDecorationThickness:'2px',
        textDecorationColor:'var(--fluoro)',
        color:'var(--fg-mute)',
      }}>{text}</span>);
    } else {
      parts.push(<span key={key++} style={{
        ...refBase,
        color: refColor[kind],
        transform: `rotate(${refAngle(text, kind, flip)}deg)`,
      }}>{text}</span>);
    }
    last = m.index + m[0].length;
  }
  if (last < str.length) parts.push(str.slice(last));
  return parts;
};

const Benefits = () => {
  const isMobile = useIsMobile();
  return (
    <section style={mix(bS.wrap, bM.wrap, isMobile)} id="benefits">
      <div style={mix(bS.head, bM.head, isMobile)}>
        {COPY.benefits.eyebrow && <div style={bS.eyebrow}>{COPY.benefits.eyebrow}</div>}
        <h2 style={mix(bS.h, bM.h, isMobile)}>
          <span style={bS.hLogo}><Logo size={isMobile ? 18 : 28} /></span>
          {COPY.benefits.headlineBefore && <>{COPY.benefits.headlineBefore}<br/></>}<span style={bS.markerH}>{COPY.benefits.headlineMarker}</span>{COPY.benefits.headlineAfter}
        </h2>
        {COPY.benefits.intro && <p style={mix(bS.intro, bM.intro, isMobile)}>{COPY.benefits.intro}</p>}
      </div>
      <ol style={bS.list}>
        {COPY.benefits.items.map((b, i) => {
          const rot = [-8, 5, -4][i % 3];
          return (
            <li key={b.n} style={mix(bS.row, bM.row, isMobile)}>
              <div style={bS.rowContent}>
                <h3 style={mix(bS.rowH, bM.rowH, isMobile)}>
                  {b.prefix && <><span>{b.prefix}</span>{' '}</>}
                  <span style={vS.strikeWrap}>
                    <span style={vS.strike}>{b.strike}</span>
                    <span style={{
                      ...vS.marker,
                      fontSize: isMobile ? 28 : 38,
                      transform: `rotate(${rot}deg)`,
                    }}>{b.marker}</span>
                  </span>
                  {b.suffix && <span>{' '}{b.suffix}</span>}
                </h3>
                <p style={mix(bS.rowBody, bM.rowBody, isMobile)}>{renderRefs(b.body)}</p>
              </div>
            </li>
          );
        })}
      </ol>
      <JoinLink/>
    </section>
  );
};
const bS = {
  wrap: { padding:'16px 56px 40px', background:'var(--bg)', position:'relative' },
  headBgDecor: { position:'absolute', top:0, right:0, width:853, height:569, zIndex:0,
                 pointerEvents:'none', backgroundImage:'url(assets/susu-health.png)',
                 backgroundSize:'cover', backgroundPosition:'center', backgroundRepeat:'no-repeat' },
  bgDecor: { position:'absolute', top:0, left:0, width:'70%', aspectRatio:'1280 / 853',
             zIndex:0, pointerEvents:'none',
             backgroundSize:'cover', backgroundPosition:'center', backgroundRepeat:'no-repeat',
             maskImage:'radial-gradient(ellipse 50% 60% at 50% 50%, #000 55%, transparent 100%)',
             WebkitMaskImage:'radial-gradient(ellipse 50% 60% at 50% 50%, #000 55%, transparent 100%)' },
  head: { position:'relative', zIndex:1, marginBottom:8 },
  eyebrow: { fontFamily:'var(--font-mono)', fontSize:13, letterSpacing:'.22em',
             textTransform:'uppercase', color:'var(--fluoro)', marginBottom:16,
             fontWeight:600 },
  h: { position:'relative',
       fontFamily:'var(--font-display)', fontSize:80, lineHeight:.95, letterSpacing:'-.035em',
       margin:0, fontWeight:500, color:'var(--fg)',
       textShadow:'0 0 24px #000, 0 0 48px #000' },
  hLogo: { display:'block', marginBottom:8, whiteSpace:'nowrap' },
  markerH: { fontFamily:'var(--font-display)', color:'var(--fg)',
             display:'inline-block', fontWeight:700 },
  intro: { fontFamily:'var(--font-sans)', fontSize:20, lineHeight:1.5,
           color:'var(--fg-soft)', margin:'24px 0 0', maxWidth:680 },
  list: { listStyle:'none', padding:0, margin:0 },
  row: { padding:'32px 0', position:'relative' },
  rowBg: { position:'absolute', top:0, right:-56, width:853, height:747, zIndex:0, pointerEvents:'none',
           backgroundSize:'cover', backgroundPosition:'center', backgroundRepeat:'no-repeat' },
  rowContent: { position:'relative', zIndex:1, maxWidth:520 },
  numLine: { display:'flex', alignItems:'center', gap:16, marginBottom:14 },
  num: { fontFamily:'var(--font-mono)', fontSize:14, color:'var(--fg-mute)',
         letterSpacing:'.18em' },
  rowH: { fontFamily:'var(--font-display)', fontSize:40, lineHeight:1.05,
          letterSpacing:'-.025em', margin:'0 0 18px', fontWeight:500, color:'var(--fg)',
          textShadow:'0 0 24px #000, 0 0 48px #000' },
  rowBody: { fontFamily:'var(--font-sans)', fontSize:18, lineHeight:1.7,
             color:'var(--fg-soft)', margin:0,
             textShadow:'0 0 16px #000, 0 0 32px #000' },
  stampWrap: { marginTop:24 },
  stamp: { fontFamily:'var(--font-marker)', fontSize:34, color:'var(--lime)',
           display:'inline-block', lineHeight:1.05, transformOrigin:'left center' },
};
const bM = {
  wrap: { padding:'24px 20px 32px' },
  bgDecor: { display:'none' },
  head: { marginBottom:24 },
  h: { fontSize:48, marginBottom:16, letterSpacing:'-.025em' },
  intro: { fontSize:15, lineHeight:1.5, paddingBottom:14 },
  row: { padding:'24px 0' },
  rowH: { fontSize:28, marginBottom:12, letterSpacing:'-.02em' },
  rowBody: { fontSize:15, lineHeight:1.6 },
};

// ============================================================
// HOW IT WORKS — § III
// ============================================================
const HowItWorks = () => (
  <section style={howS.wrap} id="how">
    <div style={howS.head}>
      <div style={howS.eyebrow}>{COPY.howItWorks.eyebrow}</div>
      <h2 style={howS.h}>{COPY.howItWorks.headlineBefore}<br/>{COPY.howItWorks.headlineAfter}</h2>
    </div>
    <ol style={{listStyle:'none',padding:0,margin:0}}>
      {COPY.howItWorks.items.map(([n, ttl, sub]) => (
        <li key={n} style={howS.row}>
          <span style={howS.n}>{n}</span>
          <span style={howS.ttl}>{ttl}</span>
          <span style={howS.dots}></span>
          <span style={howS.sub}>{sub}</span>
        </li>
      ))}
    </ol>
  </section>
);
const howS = {
  wrap: { padding:'120px 56px', borderBottom:'1px solid var(--rule)',
          background:'var(--bg-elev)' },
  head: { display:'flex', alignItems:'flex-end', justifyContent:'space-between',
          marginBottom:64, gap:48, flexWrap:'wrap' },
  eyebrow: { fontFamily:'var(--font-mono)', fontSize:13, letterSpacing:'.22em',
             textTransform:'uppercase', color:'var(--fluoro)', marginBottom:16, fontWeight:600 },
  h: { fontFamily:'var(--font-display)', fontSize:80, lineHeight:1, letterSpacing:'-.035em',
       margin:0, fontWeight:500, color:'var(--fg)' },
  row: { display:'flex', alignItems:'baseline', gap:24, padding:'24px 0',
         borderBottom:'1px solid var(--rule)' },
  n: { fontFamily:'var(--font-mono)', fontSize:14, color:'var(--fg-mute)',
       letterSpacing:'.1em', width:40 },
  ttl: { fontFamily:'var(--font-display)', fontSize:32, color:'var(--fg)', flexShrink:0,
         letterSpacing:'-.02em', fontWeight:500 },
  dots: { flex:1, borderBottom:'1px dashed var(--rule-strong)', transform:'translateY(-6px)',
          minWidth:40 },
  sub: { fontFamily:'var(--font-sans)', fontSize:14, color:'var(--fg-mute)',
         maxWidth:340, textAlign:'right' },
};


// ============================================================
// FAQ — § VI
// ============================================================
const Faq = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={fS.wrap} id="faq">
      {COPY.faq.eyebrow && <div style={fS.eyebrow}>{COPY.faq.eyebrow}</div>}
      <h2 style={fS.h}>{COPY.faq.headline}</h2>
      <ul style={{listStyle:'none',padding:0,margin:0,maxWidth:920}}>
        {COPY.faq.items.map(([q, a], i) => (
          <li key={i} style={fS.item} onClick={()=>setOpen(open===i?-1:i)}>
            <div style={fS.q}>
              <span style={fS.qNum}>{String(i+1).padStart(2,'0')}</span>
              <span style={fS.qText}>{q}</span>
              <span style={{...fS.qMark, transform:open===i?'rotate(0deg)':'rotate(8deg)'}}>{open===i ? 'x' : '+'}</span>
            </div>
            {open===i && <div style={fS.a}>{a}</div>}
          </li>
        ))}
      </ul>
    </section>
  );
};
const fS = {
  wrap: { padding:'56px 56px', background:'var(--bg)' },
  eyebrow: { fontFamily:'var(--font-mono)', fontSize:13, letterSpacing:'.22em',
             textTransform:'uppercase', color:'var(--fluoro)', marginBottom:24, fontWeight:600 },
  h: { fontFamily:'var(--font-display)', fontSize:72, lineHeight:1, letterSpacing:'-.035em',
       margin:'0 0 32px', fontWeight:500, color:'var(--fg)' },
  item: { padding:'14px 0', cursor:'pointer' },
  q: { display:'flex', alignItems:'baseline', gap:24 },
  qNum: { fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.18em',
          color:'var(--fg-mute)', width:32 },
  qText: { fontFamily:'var(--font-display)', fontSize:32, flex:1, color:'var(--fg)',
           letterSpacing:'-.02em', fontWeight:500 },
  qMark: { fontFamily:'var(--font-display)', fontSize:32, color:'var(--fluoro)',
           lineHeight:.8, display:'inline-block', minWidth:32, textAlign:'center', fontWeight:700 },
  a: { marginTop:14, marginLeft:56, fontFamily:'var(--font-sans)', fontSize:18,
       lineHeight:1.55, color:'var(--fg-soft)', maxWidth:680 },
};

// ============================================================
// LAUNCH LIST — sign up. perks listed clearly.
// ============================================================
const Perk = ({n, head, body, isMobile, isLast}) => (
  <div style={mix(lS.perk, isMobile ? {...lM.perk, ...(isLast ? {borderBottom:'none'} : {})} : {}, true)}>
    <div style={lS.perkHead}>
      <span style={lS.perkN}>{n}</span>
      <span style={lS.perkH}>{head}</span>
    </div>
    <p style={lS.perkBody}>{body}</p>
  </div>
);

const LaunchList = () => {
  const isMobile = useIsMobile();
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [use, setUse] = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (!email.trim() || submitting) return;
    setSubmitting(true);
    setError('');
    try {
      const res = await fetch('/api/launch-list', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({email: email.trim(), use: use.trim()}),
      });
      if (res.ok) { setSubmitted(true); return; }
      const body = await res.json().catch(() => ({}));
      setError(body.error || 'something went wrong - try again?');
    } catch {
      setError('network error - try again?');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section style={mix(lS.wrap, lM.wrap, isMobile)} id="list">
      {isMobile && (
        <div aria-hidden="true" style={{
          position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
          zIndex: 0, opacity: 0.28,
          backgroundImage: `url(assets/susu-rescue.jpg?v=${ASSET_VERSION})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat',
          maskImage: 'linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%)',
          WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%)',
        }}/>
      )}
      <div style={lS.head}>
        {COPY.launchList.tag && <div style={lS.tag}>{COPY.launchList.tag}</div>}
        <h2 style={mix(lS.h, lM.h, isMobile)}>{COPY.launchList.headlineBefore}<br/>{COPY.launchList.headlineAfter}</h2>
        <p style={mix(lS.lede, lM.lede, isMobile)}>
          {COPY.launchList.lede}
        </p>
      </div>

      {!submitted ? (
        <form style={mix(lS.form, lM.form, isMobile)} onSubmit={submit}>
          <div style={lS.field}>
            <label style={lS.lbl}>{COPY.launchList.formEmailLabel}</label>
            <input id="launch-email" style={lS.input} placeholder={COPY.launchList.formEmailPlaceholder}
                   value={email} onChange={e=>setEmail(e.target.value)}
                   type="email" required/>
          </div>
          <div style={lS.field}>
            <label style={lS.lbl}>{COPY.launchList.formUseLabel} <span style={lS.optional}>{COPY.launchList.formUseOptional}</span></label>
            <input style={lS.input}
                   placeholder={COPY.launchList.formUsePlaceholder}
                   value={use} onChange={e=>setUse(e.target.value)}/>
          </div>
          <button style={mix(lS.submit, lM.submit, isMobile)} type="submit" disabled={submitting}>
            {submitting ? 'sending...' : COPY.launchList.submit}
          </button>
          {error && <div style={lS.error}>{error}</div>}
        </form>
      ) : (
        <div style={mix(lS.confirmWrap, lM.confirmWrap, isMobile)}>
          <div style={lS.confirmStamp}>
            <div style={lS.stampLine1}>{COPY.launchList.confirmStampLine1}</div>
            <div style={lS.stampLine2}>No. {String(Math.floor(Math.random()*900)+100).padStart(3,'0')} - {new Date().toISOString().slice(0,10)}</div>
          </div>
          <div style={lS.confirmBody}>
            <h3 style={mix(lS.confirmH, lM.confirmH, isMobile)}>{COPY.launchList.confirmH}</h3>
            <p style={lS.confirmP}>
              {COPY.launchList.confirmPBefore}<span style={{color:'var(--fg)',fontFamily:'var(--font-mono)'}}>{email}</span>{COPY.launchList.confirmPAfter}
            </p>
            <button style={lS.again} onClick={()=>{setSubmitted(false);setEmail('');setUse('');}}>
              {COPY.launchList.addAnother}
            </button>
          </div>
        </div>
      )}

      <div style={lS.fine}>
        {COPY.launchList.fine}
      </div>
    </section>
  );
};
const lS = {
  wrap: { padding:'48px 56px', background:'var(--bg-sunken)',
          position:'relative' },
  head: { marginBottom:40, maxWidth:1100, position:'relative', zIndex:1 },
  tag: { fontFamily:'var(--font-hand)', fontSize:34, color:'var(--fluoro)',
         transform:'rotate(-6deg)', display:'inline-block', marginBottom:16 },
  h: { fontFamily:'var(--font-display)', fontSize:88, lineHeight:.95, letterSpacing:'-.04em',
       margin:'0 0 24px', fontWeight:500, color:'var(--fg)' },
  lede: { fontFamily:'var(--font-sans)', fontSize:18, lineHeight:1.4,
          color:'var(--fg-soft)', maxWidth:620, margin:0 },
  perksRow: { display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0,
              border:'1px solid var(--rule-strong)', marginBottom:40,
              background:'var(--bg)' },
  perk: { padding:'32px 32px 36px', borderRight:'1px solid var(--rule-strong)' },
  perkHead: { display:'flex', alignItems:'baseline', gap:12, marginBottom:14 },
  perkN: { fontFamily:'var(--font-display)', fontSize:34, color:'var(--fluoro)',
           lineHeight:1, fontWeight:500 },
  perkH: { fontFamily:'var(--font-display)', fontSize:22, lineHeight:1.15,
           color:'var(--fg)', fontWeight:500, letterSpacing:'-.02em' },
  perkBody: { fontFamily:'var(--font-sans)', fontSize:14, lineHeight:1.55,
              color:'var(--fg-soft)', margin:0 },
  form: { display:'grid', gridTemplateColumns:'1.4fr 1.6fr auto', gap:32,
          alignItems:'flex-end', maxWidth:1100, marginBottom:24,
          position:'relative', zIndex:1 },
  field: { display:'flex', flexDirection:'column', gap:6 },
  lbl: { fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.22em',
         textTransform:'uppercase', color:'var(--fg-mute)' },
  optional: { color:'var(--fg-faint)', textTransform:'none', letterSpacing:'.05em' },
  input: { background:'transparent', border:'none', borderBottom:'1.5px solid var(--fg)',
           padding:'10px 0', fontFamily:'var(--font-sans)', fontSize:18,
           color:'var(--fg)', outline:'none', width:'100%' },
  submit: { fontFamily:'var(--font-marker)', fontSize:26, fontWeight:400,
            padding:'16px 28px 18px', background:'var(--fluoro)', color:'var(--bg)',
            border:0, boxShadow:'5px 5px 0 var(--lime), 10px 10px 0 var(--fg)',
            cursor:'pointer', whiteSpace:'nowrap', letterSpacing:'.005em',
            transform:'rotate(-1.5deg)', textTransform:'lowercase', lineHeight:1 },
  error: { gridColumn:'1 / -1', fontFamily:'var(--font-mono)', fontSize:13,
           color:'var(--fg)', background:'var(--fluoro)', padding:'8px 12px',
           letterSpacing:'.03em', marginTop:8 },
  fine: { fontFamily:'var(--font-mono)', fontSize:11, color:'var(--fg-mute)',
          maxWidth:680, letterSpacing:'.05em',
          position:'relative', zIndex:1 },
  confirmWrap: { display:'grid', gridTemplateColumns:'auto 1fr', gap:48,
                 alignItems:'flex-start', marginBottom:32, maxWidth:880,
                 position:'relative', zIndex:1 },
  confirmStamp: { border:'2.5px solid var(--lime)', padding:'18px 24px',
                  transform:'rotate(-4deg)', display:'inline-block',
                  fontFamily:'var(--font-mono)', textTransform:'uppercase',
                  letterSpacing:'.18em', color:'var(--lime)' },
  stampLine1: { fontFamily:'var(--font-marker)', fontSize:32, letterSpacing:'.04em',
                lineHeight:1, marginBottom:6, color:'var(--lime)',
                textTransform:'lowercase' },
  stampLine2: { fontSize:10, letterSpacing:'.18em', color:'var(--lime)' },
  confirmBody: { paddingTop:8 },
  confirmH: { fontFamily:'var(--font-display)', fontSize:48, lineHeight:1,
              letterSpacing:'-.03em', margin:'0 0 16px', color:'var(--fg)', fontWeight:500 },
  confirmP: { fontFamily:'var(--font-sans)', fontSize:18, lineHeight:1.5,
              color:'var(--fg-soft)', margin:'0 0 20px', maxWidth:540 },
  again: { background:'transparent', border:'none', padding:0,
           fontFamily:'var(--font-sans)', fontSize:14, color:'var(--fluoro)',
           textDecoration:'underline', textUnderlineOffset:6, cursor:'pointer' },
};
const lM = {
  wrap: { padding:'40px 20px 32px' },
  h: { fontSize:56, letterSpacing:'-.03em', marginBottom:18 },
  lede: { fontSize:15, lineHeight:1.5 },
  perksRow: { gridTemplateColumns:'1fr', marginBottom:32 },
  perk: { padding:'24px 20px', borderRight:'none',
          borderBottom:'1px solid var(--rule-strong)' },
  form: { gridTemplateColumns:'1fr', gap:24, alignItems:'stretch' },
  submit: { fontSize:22, padding:'14px 22px 16px', justifySelf:'flex-start',
            boxShadow:'4px 4px 0 var(--lime), 8px 8px 0 var(--fg)' },
  confirmWrap: { gridTemplateColumns:'1fr', gap:24 },
  confirmH: { fontSize:36 },
};

// ============================================================
// FOOTER
// ============================================================
const Footer = () => {
  const isMobile = useIsMobile();
  return (
    <footer style={mix(ftS.wrap, ftM.wrap, isMobile)}>
      <div style={mix(ftS.row, ftM.row, isMobile)}>
        <Logo size={28} />
        <div style={mix(ftS.linksRow, ftM.linksRow, isMobile)}>
          <a href="#values" style={ftS.link}>values</a>
          <a href="/privacy.html" style={ftS.link}>privacy</a>
          <a href="mailto:susu@susu.support" style={ftS.link}>susu@susu.support</a>
        </div>
      </div>
      <div style={ftS.legal}>
        <span>{COPY.footer.legalLeft}</span>
        <span style={ftS.legalRight}>{COPY.footer.legalRight}</span>
      </div>
    </footer>
  );
};
const ftS = {
  wrap: { padding:'32px 56px 32px', background:'var(--bg)', position:'relative' },
  row: { display:'flex', justifyContent:'space-between', alignItems:'center',
         gap:48, marginBottom:32, flexWrap:'wrap',
         position:'relative', zIndex:1 },
  linksRow: { display:'flex', gap:32, alignItems:'center' },
  link: { fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.18em',
          textTransform:'uppercase', color:'var(--fg)', textDecoration:'none' },
  legal: { display:'flex', justifyContent:'space-between', paddingTop:8,
           fontFamily:'var(--font-mono)',
           fontSize:11, color:'var(--fg-mute)', flexWrap:'wrap', gap:16,
           letterSpacing:'.05em' },
  legalRight: { color:'var(--fluoro)' },
};
const ftM = {
  wrap: { padding:'24px 20px' },
  row: { gap:20, marginBottom:20, flexDirection:'column', alignItems:'flex-start' },
  linksRow: { gap:18, flexWrap:'wrap' },
};

Object.assign(window, {
  Nav, Logo, Banner, Hero, Values, EqGlyph, Technology, Benefits, HowItWorks, Faq, LaunchList, Footer, ImageStack
});