Post a Job

Submit a vacancy from your employer cabinet. We'll review it and publish shortly.

Your account hiring@monzo.com will be used as the owner of this job posting and for moderation updates.

* Required fields

Remote OK

Full description *

<span style={{ display: 'block', marginTop: 6, fontSize: 13, color: SJ.muted }}>
              Markdown is supported. Headings, lists and bold render automatically on the job page.
            </span>
          </div>

{/* Preview hint */}
          <div style={{
            marginTop: 8, marginBottom: 22, padding: 14,
            background: SJ.page, border: `1px solid ${SJ.line}`, borderRadius: 10,
            display: 'flex', gap: 12, alignItems: 'center',
          }}>
            <span style={{ fontSize: 18 }}>👀</span>
            <div style={{ fontSize: 13, color: '#4b5563', flex: 1 }}>
              You'll see a preview of your listing on the next step. Average moderation time: <strong>under 24 hours</strong>.
            </div>
            <a style={{ color: SJ.blue, fontSize: 13, fontWeight: 600, textDecoration: 'none' }}>Preview →</a>
          </div>

<button style={{
            width: '100%', padding: 16, background: SJ.blue, color: '#fff',
            border: 'none', borderRadius: 12, fontSize: 15, fontWeight: 600,
            cursor: 'pointer', fontFamily: SJ.font, marginTop: 4,
          }}>Submit Job Posting</button>
        </div>
      </main>
      <Footer />
    </div>
  );
}

function PostField({ label, defaultValue, hint, type = 'text', select, options, prefix }) {
  return (
    <div style={{ marginBottom: 22 }}>
      <label style={{ display: 'block', fontWeight: 600, color: SJ.ink2, marginBottom: 8, fontSize: 14 }}>{label}</label>
      <div style={{ position: 'relative' }}>
        {prefix && (
          <span style={{
            position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)',
            color: SJ.muted, fontSize: 14, fontWeight: 500,
          }}>{prefix}</span>
        )}
        {select ? (
          <select defaultValue={options[0]} style={{
            width: '100%', padding: '12px 16px', border: `2px solid ${SJ.line}`,
            borderRadius: 10, fontSize: 14, outline: 'none', fontFamily: SJ.font, background: '#fff',
          }}>
            {options.map((o) => <option key={o}>{o}</option>)}
          </select>
        ) : (
          <input type={type} defaultValue={defaultValue} style={{
            width: '100%', padding: prefix ? '12px 16px 12px 28px' : '12px 16px',
            border: `2px solid ${SJ.line}`, borderRadius: 10, fontSize: 14,
            outline: 'none', fontFamily: SJ.font, boxSizing: 'border-box',
          }} />
        )}
      </div>
      {hint && <span style={{ display: 'block', marginTop: 6, fontSize: 13, color: SJ.muted }}>{hint}</span>}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// JOB POST SUCCESS
// ─────────────────────────────────────────────────────────────────────────
function PostSuccessScreen() {
  return (
    <div style={{ background: '#fff', fontFamily: SJ.font, color: SJ.ink2, minHeight: '100%' }}>
      <Header active="" />
      <main style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 28px 0' }}>
        <div style={{
          maxWidth: 640, margin: '60px auto 0',
          background: '#fff', border: `1px solid ${SJ.line}`, borderRadius: 24,
          padding: '64px 44px', textAlign: 'center',
        }}>
          {/* Confetti / check */}
          <div style={{
            width: 96, height: 96, borderRadius: '50%',
            background: `linear-gradient(135deg, ${SJ.greenBg}, #ecfdf5)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            margin: '0 auto 26px', fontSize: 44,
            boxShadow: 'inset 0 0 0 4px #bbf7d0',
          }}>✅</div>
          <h1 style={{ fontSize: 32, fontWeight: 700, color: SJ.ink, marginBottom: 16, letterSpacing: '-0.02em' }}>
            Job Submitted Successfully!
          </h1>
          <p style={{ color: '#4b5563', fontSize: 16, lineHeight: 1.6, marginBottom: 14 }}>
            Thank you for submitting your job posting. We've received it and will review it shortly.
          </p>
          <p style={{ color: '#4b5563', fontSize: 16, lineHeight: 1.6, marginBottom: 14 }}>
            You'll receive a confirmation email at <strong>hiring@monzo.com</strong> once your job is approved and published.
          </p>

{/* Moderation status timeline */}
          <div style={{
            margin: '32px auto', maxWidth: 460, padding: 22,
            background: SJ.page, borderRadius: 16, textAlign: 'left',
          }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: SJ.muted, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 14 }}>
              Moderation timeline
            </div>
            {[
              { dot: 'done', label: 'Submitted', sub: 'Just now' },
              { dot: 'active', label: 'In review', sub: 'Usually under 24 hours' },
              { dot: 'pending', label: 'Published', sub: 'Will appear in search and email alerts' },
            ].map((s, i, arr) => (
              <div key={s.label} style={{ display: 'flex', gap: 14, position: 'relative' }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
                  <span style={{
                    width: 14, height: 14, borderRadius: '50%',
                    background: s.dot === 'done' ? SJ.green : s.dot === 'active' ? '#ca8a04' : SJ.line,
                    boxShadow: s.dot === 'active' ? '0 0 0 4px #fef9c3' : 'none',
                    marginTop: 4,
                  }} />
                  {i < arr.length - 1 && (
                    <span style={{ width: 2, height: 38, background: SJ.line, marginTop: 2 }} />
                  )}
                </div>
                <div style={{ paddingBottom: i < arr.length - 1 ? 18 : 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: SJ.ink2 }}>{s.label}</div>
                  <div style={{ fontSize: 12.5, color: SJ.muted, marginTop: 2 }}>{s.sub}</div>
                </div>
              </div>
            ))}
          </div>

<div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a style={{
              padding: '14px 26px', borderRadius: 10, background: SJ.blue, color: '#fff',
              fontSize: 14.5, fontWeight: 600, textDecoration: 'none',
            }}>Open Employer Cabinet</a>
            <a style={{
              padding: '14px 26px', borderRadius: 10, background: '#fff', color: SJ.blue,
              border: `2px solid ${SJ.blue}`, fontSize: 14.5, fontWeight: 600, textDecoration: 'none',
            }}>Post Another Job</a>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// PRICING (Boost/Sponsored)
// ─────────────────────────────────────────────────────────────────────────
function PricingScreen() {
  const plans = [
    {
      tier: 'Standard', name: 'Standard Listing', price: 'Free',
      tone: 'plain', highlight: false,
      desc: 'Regular placement in search and email alerts. Live for 30 days.',
      features: ['1 active job posting', 'Listed in search results', 'Included in daily/weekly alerts', '30-day visibility window'],
      cta: 'Post a free listing',
    },
    {
      tier: 'Featured', name: 'Featured', price: '$79', period: '/mo',
      tone: 'blue', highlight: true,
      desc: 'Pinned to the top of search results and highlighted in swipe stack.',
      features: ['Pinned to top of search', 'Premium ★ badge', 'Featured in daily alerts', '4.2× more views on average', 'Real-time view analytics'],
      cta: 'Upgrade to Featured',
    },
    {
      tier: 'Sponsored', name: 'Sponsored + Boost', price: '$249', period: '/mo',
      tone: 'purple', highlight: false,
      desc: 'Top placement everywhere + dedicated email slot + branded company page.',
      features: ['All Featured benefits', 'Top of swipe-stack rotation', 'Dedicated email blast (1×/mo)', 'Custom-branded company page', 'Priority moderation (≤2h SLA)', 'Dedicated account manager'],
      cta: 'Talk to sales',
    },
  ];
  return (
    <div style={{ background: '#fff', fontFamily: SJ.font, color: SJ.ink2, minHeight: '100%' }}>
      <Header active="Pricing" />
      <main style={{ maxWidth: 1200, margin: '0 auto', padding: '48px 28px 0' }}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <h1 style={{ fontSize: 38, fontWeight: 800, color: SJ.ink, marginBottom: 12, letterSpacing: '-0.02em' }}>
            Boost your job listing
          </h1>
          <p style={{ fontSize: 18, color: SJ.muted, maxWidth: 640, margin: '0 auto', lineHeight: 1.5 }}>
            Get more visibility for your openings with Featured and Sponsored placements on ScrollJob.
          </p>
        </div>

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, maxWidth: 1000, margin: '0 auto 60px' }}>
          {plans.map((p) => <PricingCard key={p.tier} p={p} />)}
        </div>

{/* Comparison strip */}
        <div style={{
          maxWidth: 1000, margin: '0 auto 60px',
          background: SJ.page, border: `1px solid ${SJ.line}`, borderRadius: 20, padding: 32,
        }}>
          <h3 style={{ fontSize: 20, fontWeight: 700, color: SJ.ink2, margin: '0 0 6px' }}>
            Why placements matter
          </h3>
          <p style={{ color: SJ.muted, fontSize: 14, margin: '0 0 22px' }}>
            Average performance across 1,200 paid listings in the last 90 days.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
            <BoostStat label="More views vs standard" value="4.2×" tone={SJ.blue} />
            <BoostStat label="More applies vs standard" value="3.1×" tone="#7c3aed" />
            <BoostStat label="Days to first qualified applicant" value="2.4 days" tone={SJ.green} delta="vs 9.8 for standard" />
          </div>
        </div>

{/* Trust strip */}
        <div style={{
          maxWidth: 1000, margin: '0 auto 60px',
          padding: 28, borderTop: `1px solid ${SJ.line}`,
          borderBottom: `1px solid ${SJ.line}`, textAlign: 'center',
        }}>
          <p style={{ fontSize: 13, color: SJ.muted, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 18 }}>
            Trusted by hiring teams at
          </p>
          <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', gap: 24, flexWrap: 'wrap', color: '#94a3b8', fontWeight: 700, fontSize: 17 }}>
            <span>monzo</span>
            <span>Wise</span>
            <span>● Octopus Energy</span>
            <span>starling</span>
            <span>Deliveroo</span>
            <span>Cleo</span>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}

function PricingCard({ p }) {
  const accent = p.tone === 'blue' ? SJ.blue : p.tone === 'purple' ? SJ.purple : SJ.muted;
  return (
    <div style={{
      background: p.tone === 'purple' ? 'linear-gradient(180deg, #faf5ff 0%, #fff 40%)' : '#fff',
      border: `2px solid ${p.highlight ? SJ.blue : p.tone === 'purple' ? SJ.purple : SJ.line}`,
      borderRadius: 20, padding: '32px 26px',
      position: 'relative', display: 'flex', flexDirection: 'column',
      boxShadow: p.highlight ? '0 12px 32px rgba(37,99,235,0.12)' : 'none',
      transform: p.highlight ? 'translateY(-8px)' : 'none',
    }}>
      {p.highlight && (
        <div style={{
          position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
          padding: '5px 14px', background: SJ.blue, color: '#fff',
          borderRadius: 999, fontSize: 11, fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>Most popular</div>
      )}
      <span style={{
        display: 'inline-block', padding: '4px 12px', borderRadius: 999,
        background: p.tone === 'blue' ? SJ.blueRing : p.tone === 'purple' ? SJ.purpleBg : '#f1f5f9',
        color: accent, fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em',
        marginBottom: 14, alignSelf: 'flex-start',
      }}>{p.tier}</span>
      <h2 style={{ fontSize: 22, fontWeight: 700, color: SJ.ink, margin: '0 0 8px' }}>{p.name}</h2>
      <div style={{ fontSize: 38, fontWeight: 800, color: SJ.ink, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
        {p.price}{p.period && <span style={{ fontSize: 17, fontWeight: 600, color: SJ.muted }}>{p.period}</span>}
      </div>
      <p style={{ color: SJ.muted, fontSize: 13.5, margin: '14px 0 22px', lineHeight: 1.6 }}>{p.desc}</p>
      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px', flex: 1 }}>
        {p.features.map((f) => (
          <li key={f} style={{
            padding: '8px 0 8px 26px', position: 'relative',
            fontSize: 13.5, color: SJ.text, lineHeight: 1.5,
          }}>
            <span style={{
              position: 'absolute', left: 0, top: 8, width: 18, height: 18, borderRadius: '50%',
              background: accent + '20', color: accent,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 11, fontWeight: 800,
            }}>✓</span>
            {f}
          </li>
        ))}
      </ul>
      <button style={{
        padding: '13px 16px', borderRadius: 10,
        background: p.tone === 'purple' ? SJ.purple : p.tone === 'blue' ? SJ.blue : '#fff',
        color: p.tone === 'plain' ? SJ.ink : '#fff',
        border: p.tone === 'plain' ? `1px solid ${SJ.line}` : 'none',
        fontSize: 14.5, fontWeight: 600, cursor: 'pointer', fontFamily: SJ.font,
      }}>{p.cta}</button>
    </div>
  );
}

function BoostStat({ value, label, tone, delta }) {
  return (
    <div style={{ textAlign: 'center' }}>
      <div style={{ fontSize: 36, fontWeight: 800, color: tone, letterSpacing: '-0.02em' }}>{value}</div>
      <div style={{ fontSize: 13.5, color: SJ.text, marginTop: 4 }}>{label}</div>
      {delta && <div style={{ fontSize: 12, color: SJ.muted, marginTop: 4 }}>{delta}</div>}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// FOR ADVERTISERS
// ─────────────────────────────────────────────────────────────────────────
function ForAdvertisersScreen() {
  const plans = [
    {
      tier: 'STARTER', name: 'Starter', price: 'Free',
      sub: 'Forever, no card required', featured: false,
      features: ['1 active job posting', 'Standard placement', 'Email alerts inclusion'],
      cta: 'Get Started', tone: 'plain',
    },
    {
      tier: 'PRO', name: 'Pro', price: '$149', period: '/mo', betaFree: true,
      sub: 'or $1,490/yr', featured: true,
      features: ['10 active job postings', '5 featured listings/mo', 'Analytics dashboard', 'Priority support'],
      cta: 'Subscribe to Pro', tone: 'blue',
    },
    {
      tier: 'GROWTH', name: 'Growth', price: '$399', period: '/mo', betaFree: true,
      sub: 'or $3,990/yr', featured: false,
      features: ['Unlimited job postings', '20 featured listings/mo', 'Custom branding', 'Analytics + CSV export', 'Priority support'],
      cta: 'Subscribe to Growth', tone: 'plain',
    },
    {
      tier: 'ENTERPRISE', name: 'Enterprise', price: 'Custom',
      sub: 'Volume pricing, SSO, dedicated CSM', featured: false,
      features: ['Unlimited postings', 'Unlimited featured', 'Dedicated account manager', 'SLA & SSO/SAML', 'White-glove migration'],
      cta: 'Talk to sales', tone: 'plain',
    },
  ];
  return (
    <div style={{ background: '#fff', fontFamily: SJ.font, color: SJ.ink2, minHeight: '100%' }}>
      <Header active="" />
      <main style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 28px 0' }}>
        {/* Hero */}
        <section style={{ textAlign: 'center', padding: '56px 24px 32px', maxWidth: 920, margin: '0 auto' }}>
          <span style={{
            display: 'inline-block',
            background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
            color: '#fff', padding: '8px 18px', borderRadius: 999,
            fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
            marginBottom: 18,
          }}>Free during beta — no credit card</span>
          <h1 style={{ fontSize: 44, lineHeight: 1.1, margin: '0 0 18px', color: '#0f172a', letterSpacing: '-0.02em' }}>
            Hire smarter across 12 regions
          </h1>
          <p style={{ fontSize: 18, color: '#475569', maxWidth: 640, margin: '0 auto', lineHeight: 1.55 }}>
            Reach millions of job seekers across the US, UK, EU and India. Post jobs directly, get featured placement, and track applications — all from a single dashboard.
          </p>
        </section>

{/* Plans */}
        <section style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18,
          maxWidth: 1100, margin: '24px auto 80px',
        }}>
          {plans.map((p) => <AdvertiserCard key={p.tier} p={p} />)}
        </section>

{/* Channels strip */}
        <section style={{ maxWidth: 1100, margin: '0 auto 64px' }}>
          <h3 style={{ fontSize: 24, fontWeight: 700, color: SJ.ink2, textAlign: 'center', marginBottom: 8 }}>
            Where your jobs appear
          </h3>
          <p style={{ color: SJ.muted, fontSize: 15, textAlign: 'center', maxWidth: 600, margin: '0 auto 32px' }}>
            One submission, four distribution surfaces. We send candidates to your apply URL, you keep the relationship.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
            {[
              { i: '🔍', t: 'Search results', d: 'Primary discovery. Featured listings stick to the top for 30 days.' },
              { i: '🔥', t: 'Swipe feed',     d: "ScrollJob's signature mobile flow. Premium pins surface first." },
              { i: '📧', t: 'Email alerts',   d: 'Daily and weekly recommendation emails for ~140k active accounts.' },
              { i: '🌍', t: 'Regional hubs',  d: '12 region-specific subdomains with native-language landing pages.' },
            ].map((c) => (
              <div key={c.t} style={{
                background: '#fff', border: `1px solid ${SJ.line}`,
                borderRadius: 16, padding: 22,
              }}>
                <div style={{ fontSize: 32, marginBottom: 12 }}>{c.i}</div>
                <h4 style={{ fontSize: 16, fontWeight: 700, color: SJ.ink2, margin: '0 0 8px' }}>{c.t}</h4>
                <p style={{ fontSize: 13.5, color: SJ.muted, margin: 0, lineHeight: 1.55 }}>{c.d}</p>
              </div>
            ))}
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}

function AdvertiserCard({ p }) {
  return (
    <div style={{
      background: '#fff',
      border: `1px solid ${p.featured ? '#6366f1' : '#e2e8f0'}`,
      boxShadow: p.featured ? '0 0 0 2px rgba(99,102,241,0.18)' : 'none',
      borderRadius: 16, padding: '26px 22px', display: 'flex', flexDirection: 'column',
      position: 'relative',
    }}>
      <div style={{
        fontSize: 11.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
        color: '#6366f1', marginBottom: 6,
      }}>{p.tier}</div>
      <h3 style={{ fontSize: 22, margin: '0 0 8px', color: '#0f172a', fontWeight: 700 }}>{p.name}</h3>
      {p.betaFree && (
        <span style={{
          display: 'inline-block', background: '#ecfdf5', color: '#047857',
          border: '1px solid #a7f3d0', padding: '4px 10px', borderRadius: 999,
          fontSize: 11.5, fontWeight: 600, marginBottom: 10, alignSelf: 'flex-start',
        }}>Free during Beta</span>
      )}
      <div style={{ fontSize: 32, fontWeight: 800, color: '#0f172a', margin: '10px 0 4px', letterSpacing: '-0.02em' }}>
        {p.price}{p.period && <span style={{ fontSize: 16, fontWeight: 600, color: '#64748b' }}>{p.period}</span>}
      </div>
      <div style={{ color: '#64748b', fontSize: 12.5, marginBottom: 18 }}>{p.sub}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 22px', color: '#334155', fontSize: 13.5, flex: 1 }}>
        {p.features.map((f) => (
          <li key={f} style={{ padding: '6px 0 6px 22px', position: 'relative' }}>
            <span style={{ position: 'absolute', left: 0, color: '#10b981', fontWeight: 800 }}>✓</span>
            {f}
          </li>
        ))}
      </ul>
      <button style={{
        background: p.tone === 'plain' ? '#f1f5f9' : '#6366f1',
        color: p.tone === 'plain' ? '#0f172a' : '#fff',
        border: 'none', borderRadius: 10, padding: '11px 16px', fontSize: 14, fontWeight: 600,
        cursor: 'pointer', fontFamily: SJ.font,
      }}>{p.cta}</button>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// JOB EXPIRED
// ─────────────────────────────────────────────────────────────────────────
function JobExpiredScreen() {
  return (
    <div style={{ background: '#fff', fontFamily: SJ.font, color: SJ.ink2, minHeight: '100%' }}>
      <Header active="Browse Jobs" />
      <main style={{ maxWidth: 1200, margin: '0 auto', padding: '32px 28px 0' }}>
        <a style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: SJ.muted, textDecoration: 'none', fontSize: 14, marginBottom: 18 }}>
          ← Back to all jobs
        </a>

{/* Expired header */}
        <div style={{
          background: SJ.page, borderRadius: 20, padding: 32, marginBottom: 32,
        }}>
          <span style={{
            display: 'inline-block', padding: '6px 12px', marginBottom: 16,
            background: '#fee2e2', color: '#991b1b',
            borderRadius: 8, fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>Expired · No longer accepting applications</span>

<h1 style={{ fontSize: 32, fontWeight: 700, color: SJ.ink, margin: '0 0 16px', letterSpacing: '-0.02em' }}>
            This job is no longer active
          </h1>
          <div style={{ fontSize: 19, color: '#374151', fontWeight: 600, marginBottom: 14 }}>
            Senior Python Engineer at Monzo Bank
          </div>
          <div style={{ display: 'flex', gap: 16, color: SJ.muted, fontSize: 14, marginBottom: 22, flexWrap: 'wrap' }}>
            <span>📍 London, UK</span>
            <span>📅 Originally posted 14.03.2026</span>
            <span>🚫 Removed 09.05.2026</span>
          </div>
          <p style={{ fontSize: 16, color: '#4b5563', maxWidth: 760, marginBottom: 26, lineHeight: 1.65 }}>
            The employer or source has marked this vacancy as unavailable. We removed it from active discovery and from Google-facing job markup on 09.05.2026.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a style={{
              padding: '13px 24px', borderRadius: 10, background: SJ.blue, color: '#fff',
              fontSize: 14.5, fontWeight: 600, textDecoration: 'none',
            }}>Browse current jobs</a>
            <a style={{
              padding: '13px 24px', borderRadius: 10, background: '#fff', color: SJ.blue,
              border: `2px solid ${SJ.blue}`, fontSize: 14.5, fontWeight: 600, textDecoration: 'none',
            }}>More jobs from Monzo</a>
          </div>
        </div>

{/* Related open roles */}
        <h2 style={{ fontSize: 22, fontWeight: 700, color: SJ.ink2, marginBottom: 16 }}>Related open roles</h2>
        {[
          { mark: 'S', title: 'Backend Engineer · Python', co: 'Starling Bank', loc: 'London, UK', remote: false, salary: '£85k', src: 'starling' },
          { mark: 'R', title: 'Staff Engineer · Platform', co: 'Revolut',        loc: 'Remote, UK', remote: true,  salary: '£140k', src: 'greenhouse' },
          { mark: 'C', title: 'Senior Python Engineer',    co: 'Cleo AI',        loc: 'London, UK', remote: true,  salary: '£105k', src: 'cleo' },
          { mark: 'G', title: 'Senior Software Engineer',  co: 'GoCardless',     loc: 'London · Hybrid', remote: false, salary: '£95k', src: 'lever' },
        ].map((j, i) => (
          <a key={i} style={{
            display: 'block', background: '#fff', border: `1px solid ${SJ.line}`,
            borderRadius: 16, padding: 22, marginBottom: 14, textDecoration: 'none',
            color: 'inherit',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, marginBottom: 10 }}>
              <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: `linear-gradient(135deg, ${SJ.blueRing}, ${SJ.blueSoft})`,
                  color: SJ.blueDark, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 18, fontWeight: 800,
                }}>{j.mark}</div>
                <div>
                  <h3 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: SJ.ink2 }}>{j.title}</h3>
                  <div style={{ marginTop: 4, fontSize: 14, color: SJ.muted }}>{j.co}</div>
                </div>
              </div>
              <span style={{
                padding: '4px 10px', background: '#f3f4f6', color: '#4b5563',
                borderRadius: 8, fontSize: 12, fontWeight: 500,
              }}>{j.src}</span>
            </div>
            <div style={{ display: 'flex', gap: 14, fontSize: 13.5, color: SJ.muted }}>
              <span>📍 {j.loc}</span>
              {j.remote && <span>🏠 Remote</span>}
              <span>💰 {j.salary}</span>
            </div>
          </a>
        ))}
      </main>
      <Footer />
    </div>
  );
}

Object.assign(window, {
  PostJobScreen, PostSuccessScreen, PricingScreen, ForAdvertisersScreen, JobExpiredScreen,
});