")`, mixBlendMode: 'overlay', }}/> {children}

); } function MarqueeStrip({ items, color = COLOR.acid, speed = 28, dark = true }) { return (

{[...Array(2)].map((_,i)=>( {items.map((t,j)=>( {t} ✦ ))} ))}

); } // ─── 1. HERO ───────────────────────────────────────────────────────────────── function ScreenHero({ go }) { const [count, setCount] = React.useState(1247892); React.useEffect(() => { const id = setInterval(() => setCount(c => c + Math.floor(Math.random()*3+1)), 1400); return () => clearInterval(id); }, []); return ( {/* top tag */}

● hiredAF.ai free tool

{/* hero stack */}

[ free tool · zero signup ]

your
resume
{VOICE.heroAccent}

Paste it in. We'll roast it raw, then build you one that actually gets opened.

{/* CTA card */}

⏱ avg roast time: 6.2s 🔥 brutal mode on

{/* live counter */}

roasts served → {count.toLocaleString()}

{/* social proof tiles */}

); } function TestimonialCard({ handle, body, stars, plat }) { return (

{handle} {plat}

{'★'.repeat(stars)}{'☆'.repeat(5-stars)}

{body}

); } // ─── 2. PASTE ──────────────────────────────────────────────────────────────── function ScreenPaste({ go, state, setState }) { const [text, setText] = React.useState(state.resume || ''); const [file, setFile] = React.useState(state.file || null); const [dragOver, setDragOver] = React.useState(false); const fileInputRef = React.useRef(null); const acceptFile = (f) => { if (!f) return; const name = (f.name || '').toLowerCase(); if (f.type === 'application/pdf' || name.endsWith('.pdf') || f.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || name.endsWith('.docx') || name.endsWith('.doc')) { setFile(f); setText(''); } }; const ready = file ? true : text.length >= 30; return (

STEP 01 / 02

drop the
{VOICE.pasteAccent}

Paste your resume below, or drop a PDF / DOCX.

{ e.preventDefault(); setDragOver(true); }} onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget)) setDragOver(false); }} onDrop={e => { e.preventDefault(); setDragOver(false); acceptFile(e.dataTransfer.files[0]); }} style={{ background: dragOver ? COLOR.ash : COLOR.smoke, border: `1px dashed ${dragOver ? COLOR.acid : COLOR.ash}`, borderRadius: 14, padding: 14, position: 'relative', transition: 'background 0.15s, border-color 0.15s', }} > {file ? (

{file.name.toLowerCase().endsWith('.pdf') ? '📄' : '📝'}

{file.name}

{(file.size / 1024).toFixed(0)} KB · ready to roast

) : (

setText(e.target.value)}
              placeholder="JANE DOE
Marketing Coordinator

EXPERIENCE
Marketing Intern, Big Corp Inc.
• Responsible for managing social media accounts
• Helped with campaigns and assisted the team
• Utilized various tools to facilitate workflows..."
              style={{
                width: '100%', boxSizing: 'border-box', minHeight: 200,
                background: 'transparent', border: 'none', resize: 'none', outline: 'none',
                color: COLOR.ink, fontFamily: fonts.mono, fontSize: 11.5, lineHeight: 1.55,
              }}
            />
          )}

<div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            paddingTop: 8, borderTop: `1px solid ${COLOR.ash}`,
            fontFamily: fonts.mono, fontSize: 10, color: COLOR.dim, letterSpacing: '0.06em',
          }}>
            <span>{file ? file.name.split('.').pop().toUpperCase() + ' attached' : `${text.length} chars`}</span>
            <button
              onClick={() => fileInputRef.current && fileInputRef.current.click()}
              style={{ background: 'none', border: 'none', color: COLOR.dim, cursor: 'pointer',
                fontFamily: fonts.mono, fontSize: 10, padding: 0 }}
            >
              📎 upload .pdf / .docx
            </button>
          </div>
        </div>

<input
          ref={fileInputRef}
          type="file"
          accept=".pdf,.docx,.doc"
          style={{ display: 'none' }}
          onChange={e => acceptFile(e.target.files[0])}
        />

<div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
          {['BRUTAL', 'HONEST', 'KIND'].map((m,i)=>(
            <button key={m} onClick={()=>setState(s=>({...s, mode: m}))} style={{
              flex: 1, padding: '10px 0',
              background: state.mode === m ? COLOR.red : COLOR.smoke,
              color: state.mode === m ? COLOR.ink : COLOR.dim,
              border: `1px solid ${state.mode === m ? COLOR.red : COLOR.ash}`,
              borderRadius: 10, fontFamily: fonts.display, fontWeight: 700, fontSize: 12,
              letterSpacing: '0.04em', cursor: 'pointer',
            }}>
              {i === 0 && '🔥 '}{i === 1 && '🎯 '}{i === 2 && '🌸 '}{m}
            </button>
          ))}
        </div>
      </div>

<div style={{ padding: '22px 20px' }}>
        <button
          onClick={() => { setState(s=>({...s, resume: text, file: file})); go('roasting'); }}
          disabled={!ready}
          style={{
            width: '100%', padding: '20px', border: 'none',
            background: !ready ? COLOR.ash : COLOR.red,
            color: !ready ? COLOR.dim : COLOR.ink,
            borderRadius: 18, cursor: !ready ? 'not-allowed' : 'pointer',
            fontFamily: fonts.display, fontWeight: 700, fontSize: 20,
            letterSpacing: '-0.02em',
            boxShadow: !ready ? 'none' : `0 20px 40px -16px ${COLOR.red}aa`,
          }}>
          {!ready ? (file ? 'processing…' : 'paste at least 30 chars…') : VOICE.ctaPaste}
        </button>
        <p style={{
          textAlign: 'center', marginTop: 10, fontFamily: fonts.mono,
          fontSize: 10, color: COLOR.dim, letterSpacing: '0.05em',
        }}>
          we never sell your data. we will however clown on it.
        </p>
      </div>
    </NoiseBg>
  );
}

// ─── 3. ROASTING (loading) ───────────────────────────────────────────────────
function ScreenRoasting({ go, state, setState }) {
  const lines = [
    'parsing your tragedy…',
    'counting buzzwords…',
    'flagging "responsible for"…',
    'detecting recruiter eye-rolls…',
    'measuring vibe deficit…',
    'forging your reality check…',
  ];
  const [i, setI] = React.useState(0);
  const [pct, setPct] = React.useState(0);
  const calledRef = React.useRef(false);
  // Always hold the latest go so the async callback doesn't capture a stale closure
  const goRef = React.useRef(go);
  goRef.current = go;

React.useEffect(() => {
    const id = setInterval(() => setI(x => (x+1) % lines.length), 900);
    return () => clearInterval(id);
  }, []);

React.useEffect(() => {
    const id = setInterval(() => setPct(p => p >= 95 ? 95 : p + 2.5), 130);
    return () => clearInterval(id);
  }, []);

// Call the API once; navigate directly from the callback — no effect chain
  React.useEffect(() => {
    if (calledRef.current) return;
    calledRef.current = true;

const finish = (roastText) => {
      setState(s => ({ ...s, roast: roastText }));
      setPct(100);
      setTimeout(() => goRef.current('email'), 500);
    };

const fallback = setTimeout(() => {
      finish("Our roast engine timed out. Your resume's mediocrity broke the internet.");
    }, 30000);

let fetchBody, fetchHeaders;
    if (state.file) {
      const fd = new FormData();
      fd.append('resume', state.file);
      fd.append('mode', state.mode || 'BRUTAL');
      fetchBody = fd;
      fetchHeaders = {}; // let browser set Content-Type with boundary
    } else {
      fetchBody = JSON.stringify({ resumeText: state.resume, mode: state.mode || 'BRUTAL' });
      fetchHeaders = { 'Content-Type': 'application/json' };
    }

fetch('/api/resume/roast', {
      method: 'POST',
      headers: fetchHeaders,
      body: fetchBody,
    })
      .then(r => r.json())
      .then(json => {
        clearTimeout(fallback);
        finish(json.success
          ? json.data.roast
          : 'The roast engine hit a snag — but your resume probably needed the break.');
      })
      .catch(() => {
        clearTimeout(fallback);
        finish('Something went sideways. Your resume was so mid it broke the server.');
      });

return () => clearTimeout(fallback);
  }, []);

return (
    <NoiseBg color="#0a0a09">
      <div style={{
        height: '100%', display: 'flex', flexDirection: 'column',
        justifyContent: 'center', padding: 26, paddingTop: 60,
      }}>
        <div style={{
          fontFamily: fonts.mono, fontSize: 11, color: COLOR.acid,
          letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 24,
        }}>
          ▌ROAST ENGINE RUNNING
        </div>

<div style={{
          fontFamily: fonts.display, fontWeight: fonts.displayWeight, fontStyle: fonts.displayStyle, fontSize: 56,
          lineHeight: 0.9, letterSpacing: '-0.045em', color: COLOR.ink,
        }}>
          cooking<br/>
          <span style={{ color: COLOR.red }}>your</span><br/>
          <span style={{ fontFamily: fonts.serif, fontStyle: 'italic', fontWeight: 400 }}>résumé.</span>
        </div>

<div style={{ marginTop: 38 }}>
          <div style={{ height: 4, background: COLOR.ash, borderRadius: 999, overflow: 'hidden' }}>
            <div style={{
              height: '100%', width: `${pct}%`, background: COLOR.acid,
              transition: 'width 0.13s linear',
            }}/>
          </div>
          <div style={{
            marginTop: 12, fontFamily: fonts.mono, fontSize: 12,
            color: COLOR.dim, display: 'flex', justifyContent: 'space-between',
          }}>
            <span key={i} style={{ animation: 'flick 0.4s' }}>› {lines[i]}</span>
            <span>{pct.toFixed(0)}%</span>
          </div>
        </div>

<div style={{ marginTop: 48, fontFamily: fonts.mono, fontSize: 10, color: COLOR.dim, lineHeight: 1.7 }}>
          <div>{'>'} resume.txt ✓</div>
          <div>{'>'} llm: llama-3.1-8b ✓</div>
          <div>{'>'} tone: {state.mode || 'BRUTAL'}</div>
          <div>{'>'} max_sympathy: 0.04</div>
          <div style={{ color: COLOR.acid }}>{'>'} status: SEND IT</div>
        </div>
      </div>
    </NoiseBg>
  );
}

// ─── 4. EMAIL GATE ───────────────────────────────────────────────────────────
function ScreenEmail({ go }) {
  const [email, setEmail] = React.useState('');
  const ok = /\S+@\S+\.\S+/.test(email);
  return (
    <NoiseBg>
      <div style={{ padding: '54px 20px 0' }}>
        <div style={{
          fontFamily: fonts.mono, fontSize: 11, color: COLOR.acid,
          letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 14,
        }}>
          ▌ROAST READY
        </div>
        <h2 style={{
          fontFamily: fonts.display, fontWeight: fonts.displayWeight, fontStyle: fonts.displayStyle, fontSize: 50,
          lineHeight: 0.88, letterSpacing: '-0.045em', margin: 0,
        }}>
          one last<br/>
          thing.
        </h2>
        <p style={{ marginTop: 16, fontSize: 15, lineHeight: 1.4, color: '#cfcbbc' }}>
          Where should we send your <em style={{ fontFamily: fonts.serif }}>reality check?</em>
          <br/>
          <span style={{ color: COLOR.dim, fontSize: 13 }}>(We'll also email the roast so you can cry about it later.)</span>
        </p>
      </div>

<div style={{ padding: '24px 20px 0' }}>
        <div style={{
          background: COLOR.smoke, border: `1px solid ${COLOR.ash}`,
          borderRadius: 14, padding: '4px 14px',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ fontFamily: fonts.mono, color: COLOR.acid, fontSize: 14 }}>@</span>
          <input
            value={email} onChange={e => setEmail(e.target.value)}
            placeholder="you@aboutto.cry"
            style={{
              flex: 1, padding: '16px 0', background: 'transparent',
              border: 'none', outline: 'none', color: COLOR.ink,
              fontFamily: fonts.body, fontSize: 16,
            }}
          />
        </div>

<button
          onClick={() => ok && go('roast')}
          disabled={!ok}
          style={{
            width: '100%', marginTop: 14, padding: 20, border: 'none',
            background: ok ? COLOR.acid : COLOR.ash,
            color: ok ? COLOR.bg : COLOR.dim,
            borderRadius: 18, cursor: ok ? 'pointer' : 'not-allowed',
            fontFamily: fonts.display, fontWeight: 700, fontSize: 20,
            boxShadow: ok ? `0 18px 40px -18px ${COLOR.acid}aa` : 'none',
          }}>
          show me the damage →
        </button>
        <p style={{
          marginTop: 10, fontFamily: fonts.mono, fontSize: 10,
          color: COLOR.dim, lineHeight: 1.6, textAlign: 'center',
        }}>
          no spam. no recruiters. just one email when you<br/>
          inevitably come back for the rewrite.
        </p>
      </div>

<div style={{ padding: '28px 20px', marginTop: 20 }}>
        <div style={{
          border: `1px dashed ${COLOR.ash}`, padding: 14, borderRadius: 12,
          display: 'flex', gap: 12, alignItems: 'center',
        }}>
          <div style={{
            width: 38, height: 38, borderRadius: 10, flexShrink: 0,
            background: COLOR.red, display: 'flex', alignItems: 'center',
            justifyContent: 'center', fontSize: 18,
          }}>🔒</div>
          <div style={{ fontSize: 12, color: COLOR.dim, lineHeight: 1.45 }}>
            Your resume is encrypted, never trained on, and deleted after 30 days.
            <br/>The trauma, however, is forever.
          </div>
        </div>
      </div>
    </NoiseBg>
  );
}

// ─── 5. ROAST REVEAL ─────────────────────────────────────────────────────────
function splitRoast(text) {
  if (!text) return [];
  const parts = text.split(/\n\n+/).filter(p => p.trim());
  if (parts.length >= 2) return parts;
  const sentences = text.match(/[^.!?]+[.!?]+\s*/g) || [text];
  const third = Math.ceil(sentences.length / 3);
  return [
    sentences.slice(0, third).join(''),
    sentences.slice(third, third * 2).join(''),
    sentences.slice(third * 2).join(''),
  ].filter(p => p.trim());
}

function ScreenRoast({ go, state }) {
  const roastText = (state && state.roast) || '';
  const parasRef = React.useRef([]);
  const paras = React.useMemo(() => {
    const result = splitRoast(roastText);
    parasRef.current = result;
    return result;
  }, [roastText]);

const [revealed, setRevealed] = React.useState([0, 0, 0]);

React.useEffect(() => {
    if (!parasRef.current.length) return;
    setRevealed(Array(parasRef.current.length).fill(0));
    const tick = (i) => {
      const p = parasRef.current;
      if (!p[i]) return;
      setRevealed(r => {
        if (r[i] >= p[i].length) {
          if (i < p.length - 1) setTimeout(() => tick(i + 1), 250);
          return r;
        }
        const next = [...r];
        next[i] = Math.min(p[i].length, r[i] + 6);
        setTimeout(() => tick(i), 14);
        return next;
      });
    };
    tick(0);
  }, [roastText]);

const score = roastText ? 20 + (roastText.length % 36) : 31;
  return (
    <NoiseBg>
      <div style={{ padding: '54px 20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontFamily: fonts.mono, fontSize: 11, color: COLOR.red, letterSpacing: '0.1em' }}>
          ▌YOUR ROAST
        </span>
        <span style={{ fontFamily: fonts.mono, fontSize: 11, color: COLOR.dim }}>
          shareable ↗
        </span>
      </div>

{/* score brick */}
      <div style={{ padding: '16px 20px 0' }}>
        <div style={{
          background: COLOR.red, color: COLOR.ink, padding: '18px 20px',
          borderRadius: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          boxShadow: `0 20px 50px -22px ${COLOR.red}`,
        }}>
          <div>
            <div style={{ fontFamily: fonts.mono, fontSize: 10, opacity: 0.8, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
              HiredAF score
            </div>
            <div style={{
              fontFamily: fonts.display, fontWeight: fonts.displayWeight, fontStyle: fonts.displayStyle, fontSize: 64,
              lineHeight: 0.9, letterSpacing: '-0.05em', marginTop: 4,
            }}>
              {score}<span style={{ fontSize: 28, opacity: 0.6 }}>/100</span>
            </div>
          </div>
          <div style={{ textAlign: 'right', fontFamily: fonts.serif, fontStyle: 'italic', fontSize: 22, opacity: 0.95 }}>
            {VOICE.scoreLabel}
          </div>
        </div>
      </div>

{/* paragraphs */}
      <div style={{ padding: '20px 20px 0' }}>
        {paras.length === 0 ? (
          <div style={{ padding: 16, background: COLOR.smoke, border: `1px solid ${COLOR.ash}`, borderRadius: 14 }}>
            <div style={{ fontFamily: fonts.mono, fontSize: 12, color: COLOR.acid, letterSpacing: '0.1em' }}>loading roast...</div>
          </div>
        ) : paras.map((p, i) => (
          <div key={i} style={{
            marginBottom: 14, padding: 16,
            background: COLOR.smoke, border: `1px solid ${COLOR.ash}`,
            borderRadius: 14,
          }}>
            <div style={{
              fontFamily: fonts.mono, fontSize: 10, color: COLOR.acid,
              letterSpacing: '0.1em', marginBottom: 8,
            }}>
              › PARAGRAPH 0{i+1}
            </div>
            <p style={{
              margin: 0, fontFamily: fonts.serif, fontSize: 18,
              lineHeight: 1.32, color: COLOR.ink, fontWeight: 400,
              minHeight: 80,
            }}>
              {p.slice(0, revealed[i] || 0)}
              {(revealed[i] || 0) < p.length && <span style={{ color: COLOR.acid }}>▍</span>}
            </p>
          </div>
        ))}
      </div>

{/* sticky CTA */}
      <div style={{ padding: '8px 20px 100px' }}>
        <div style={{
          background: `linear-gradient(180deg, transparent, ${COLOR.bg} 30%)`,
          paddingTop: 20,
        }}>
          <button onClick={() => go('paywall')} style={{
            width: '100%', padding: '22px', border: 'none',
            background: COLOR.acid, color: COLOR.bg, borderRadius: 18,
            fontFamily: fonts.display, fontWeight: fonts.displayWeight, fontStyle: fonts.displayStyle, fontSize: 22,
            letterSpacing: '-0.02em', cursor: 'pointer',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            boxShadow: `0 24px 50px -20px ${COLOR.acid}`,
          }}>
            <span>{VOICE.ctaFix}</span>
            <span style={{ fontFamily: fonts.mono, fontSize: 11, background: COLOR.bg, color: COLOR.acid, padding: '4px 8px', borderRadius: 6 }}>
              $4.99
            </span>
          </button>
          <div style={{ display: 'flex', gap: 6, marginTop: 10, justifyContent: 'center' }}>
            <ShareChip icon="↗" label="share roast" />
            <ShareChip icon="↻" label="roast again" />
          </div>
        </div>
      </div>
    </NoiseBg>
  );
}

function ShareChip({ icon, label }) {
  return (
    <button style={{
      background: 'transparent', border: `1px solid ${COLOR.ash}`,
      color: COLOR.dim, padding: '8px 12px', borderRadius: 999,
      fontFamily: fonts.mono, fontSize: 11, letterSpacing: '0.05em',
      cursor: 'pointer', display: 'flex', gap: 6, alignItems: 'center',
    }}>
      <span style={{ color: COLOR.acid }}>{icon}</span>{label}
    </button>
  );
}

// ─── 6. PAYWALL ──────────────────────────────────────────────────────────────
function ScreenPaywall({ go }) {
  return (
    <NoiseBg>
      <div style={{ padding: '54px 20px 0', display: 'flex', justifyContent: 'space-between' }}>
        <button onClick={() => go('roast')} style={{
          background: 'none', border: `1px solid ${COLOR.ash}`,
          color: COLOR.ink, fontFamily: fonts.mono, fontSize: 11, padding: '6px 10px',
          borderRadius: 8, letterSpacing: '0.06em', cursor: 'pointer',
        }}>← BACK</button>
        <span style={{ fontFamily: fonts.mono, fontSize: 11, color: COLOR.dim }}>
          checkout · 1 of 2
        </span>
      </div>

<div style={{ padding: '20px 20px 0' }}>
        <h2 style={{
          fontFamily: fonts.display, fontWeight: fonts.displayWeight, fontStyle: fonts.displayStyle, fontSize: 44,
          lineHeight: 0.9, letterSpacing: '-0.045em', margin: 0,
        }}>
          unlock the<br/>
          <span style={{ fontFamily: fonts.serif, fontStyle: 'italic', fontWeight: 400, color: COLOR.acid }}>
            real one.
          </span>
        </h2>
      </div>

{/* blurred preview */}
      <div style={{ padding: '20px 20px 0', position: 'relative' }}>
        <div style={{
          background: COLOR.ink, color: COLOR.bg, padding: 18, borderRadius: 14,
          filter: 'blur(5px)', userSelect: 'none', pointerEvents: 'none',
          fontFamily: fonts.body, height: 220, overflow: 'hidden',
        }}>
          <div style={{ fontWeight: 700, fontSize: 18 }}>JANE DOE</div>
          <div style={{ fontSize: 11, color: '#555' }}>Senior Growth Marketing · jane@email.com</div>
          <hr style={{ margin: '10px 0', borderColor: '#bbb' }}/>
          <div style={{ fontWeight: 700, fontSize: 11 }}>EXPERIENCE</div>
          <div style={{ fontSize: 10, marginTop: 4 }}>Growth Lead, AcmeCo (2023–Pres.)</div>
          <div style={{ fontSize: 9 }}>• Drove 312% MoM signup growth via 14 paid+organic experiments</div>
          <div style={{ fontSize: 9 }}>• Cut CAC 47% by rebuilding attribution stack across 6 channels</div>
          <div style={{ fontSize: 9 }}>• Owned $1.2M quarterly budget; landed 18% under at 134% target</div>
          <div style={{ fontSize: 9 }}>• Shipped lifecycle program lifting D30 retention from 22% → 41%</div>
        </div>
        <div style={{
          position: 'absolute', inset: '20px 20px 0', display: 'flex',
          alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 8,
        }}>
          <div style={{
            background: COLOR.bg, border: `1px solid ${COLOR.ash}`,
            padding: '10px 14px', borderRadius: 999,
            fontFamily: fonts.mono, fontSize: 11, color: COLOR.acid, letterSpacing: '0.08em',
          }}>
            🔒 LOCKED
          </div>
          <div style={{ fontFamily: fonts.serif, fontStyle: 'italic', fontSize: 14, color: COLOR.dim }}>
            the version that actually gets you hired
          </div>
        </div>
      </div>

{/* what you get */}
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{
          background: COLOR.smoke, border: `1px solid ${COLOR.ash}`,
          borderRadius: 14, padding: 16,
        }}>
          {[
            ['6-question AI deep dive', 'extracts metrics you forgot you had'],
            ['ATS-optimized rewrite', 'parses cleanly in every tracker'],
            ['Styled PDF + plain text', 'paste-ready for any portal'],
            ['Unlimited tweaks for 7 days', 'change roles, change tone, redo'],
          ].map(([t,s],i)=>(
            <div key={i} style={{ display: 'flex', gap: 12, padding: '10px 0', borderBottom: i<3?`1px dashed ${COLOR.ash}`:'none' }}>
              <span style={{ color: COLOR.acid, fontFamily: fonts.mono, fontSize: 12, paddingTop: 2 }}>0{i+1}</span>
              <div>
                <div style={{ fontFamily: fonts.body, fontWeight: 600, fontSize: 14, color: COLOR.ink }}>{t}</div>
                <div style={{ fontSize: 12, color: COLOR.dim, marginTop: 2 }}>{s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

{/* checkout */}
      <div style={{ padding: '20px 20px 100px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
          <div style={{ fontFamily: fonts.display, fontWeight: fonts.displayWeight, fontStyle: fonts.displayStyle, fontSize: 44, letterSpacing: '-0.04em' }}>
            $4.99
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontFamily: fonts.mono, fontSize: 10, color: COLOR.dim, textDecoration: 'line-through' }}>
              $29 lifetime
            </div>
            <div style={{ fontFamily: fonts.mono, fontSize: 10, color: COLOR.acid, letterSpacing: '0.06em' }}>
              FOUNDERS PRICE · 312 LEFT
            </div>
          </div>
        </div>
        <button onClick={() => go('hero')} style={{
          width: '100%', padding: 22, border: 'none',
          background: COLOR.red, color: COLOR.ink, borderRadius: 18,
          fontFamily: fonts.display, fontWeight: 700, fontSize: 20,
          letterSpacing: '-0.02em', cursor: 'pointer',
          boxShadow: `0 24px 50px -20px ${COLOR.red}`,
        }}>
          Pay $4.99 · Build my resume
        </button>
        <div style={{
          marginTop: 10, display: 'flex', justifyContent: 'center', gap: 10,
          fontFamily: fonts.mono, fontSize: 10, color: COLOR.dim,
        }}>
          <span>🍎 Pay</span><span>·</span><span>G Pay</span><span>·</span><span>Card</span><span>·</span><span>Stripe</span>
        </div>
      </div>
    </NoiseBg>
  );
}

// expose
Object.assign(window, {
  ScreenHero, ScreenPaste, ScreenRoasting, ScreenEmail, ScreenRoast, ScreenPaywall,
  COLOR, fonts, VOICE, PALETTES, FONT_THEMES, VOICE_PRESETS,
});

your resume {VOICE.heroAccent}

drop the {VOICE.pasteAccent}

your
resume
{VOICE.heroAccent}

drop the
{VOICE.pasteAccent}