// Pages.jsx — Blog, BlogPost, Careers pages restyled to match remix-3's cB-* hero.

const PAGES_CSS = `
.pg{min-height:100vh;background:var(--ink-900);color:var(--cream-50);font-family:var(--font-sans);}

/* ---------- HERO (matches cB-hero look) ---------- */
.pg-hero{
  padding:160px 40px 96px;max-width:1280px;margin:0 auto;
  position:relative;overflow:hidden;
}
.pg-hero--compact{padding:104px 40px 32px;}
.pg-hero__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-color:#16141E;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(92,50,240,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(193,250,29,0.06) 0%, transparent 55%),
    url('/assets/galaxy-bg.png');
  background-size:cover,cover,cover;
  background-position:center,center,center;
}
.pg-hero__inner{position:relative;z-index:1;}
.pg-hero__chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 14px;border-radius:999px;
  background:rgba(193,250,29,0.08);border:1px solid rgba(193,250,29,0.25);
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;
  color:var(--lime-500);margin-bottom:28px;
}
.pg-hero__chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime-500);
  box-shadow:0 0 8px var(--lime-500);}
.pg-hero__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(48px,5.5vw,76px);line-height:1.02;letter-spacing:-0.035em;
  margin:0 0 24px;color:var(--cream-50);
}
.pg-hero__title em{
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  color:var(--cream-50);
}
.pg-hero__sub{
  font-size:18px;line-height:1.55;color:rgba(247,247,237,0.72);
  max-width:560px;margin:0 0 32px;
}
.pg-hero__actions{display:inline-flex;gap:12px;flex-wrap:wrap;}

/* ---------- HERO: ROLE MARQUEE (vertical, right side) ---------- */
/* ---------- HERO: CENTERED VARIANT (Carl) ---------- */
.pg-hero--center .pg-hero__inner{text-align:center;display:flex;flex-direction:column;align-items:center;}
.pg-hero--center .pg-hero__sub{margin-left:auto;margin-right:auto;}
.pg-hero--center .pg-hero__actions{justify-content:center;}
.pg-hero--full{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:96px;padding-bottom:48px;
}
.pg-stars{
  position:absolute;
  left:50%;top:50%;width:200vmax;height:200vmax;
  margin-left:-100vmax;margin-top:-100vmax;
  pointer-events:none;
  animation:pgOrbit 420s linear infinite;
  transform-origin:center center;
  overflow:visible;
}
@keyframes pgOrbit{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.pg-stars{animation:none;}}
.pg-hero--full .pg-paper{max-width:300px;margin:0 0 24px;}
.pg-hero--full .pg-hero__sub{margin-bottom:16px;}
.pg-hero--full .pg-paper figcaption{margin-top:10px;font-size:13px;white-space:nowrap;}

/* Carl hero: two-col layout, eyebrow, dye blobs, tilted paper with badge */
.pg-hero__inner--split{
  display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center;
  width:100%;
}
.pg-hero__col{display:flex;flex-direction:column;}
.pg-hero__col--paper{align-items:center;justify-content:center;}
.pg-hero--carl .pg-hero__eyebrow{
  font-family:var(--font-serif);font-style:italic;
  font-size:clamp(16px,1.4vw,22px);color:rgba(255,255,255,0.95);
  margin:0 0 clamp(14px,1.6vw,24px);
}
.pg-hero--carl .pg-paper{
  position:relative;max-width:460px;margin:0;
}
.pg-hero--carl .pg-paper img{
  display:block;width:100%;height:auto;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.7), 0 0 60px rgba(178,162,255,0.18);
}
.pg-hero--carl .pg-paper figcaption{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  margin-top:16px;font-family:var(--font-serif);font-style:italic;
  font-size:19px;color:var(--cream-50);
  white-space:nowrap;text-align:center;
}
.pg-paper__viewport{position:relative;display:block;border-radius:4px;overflow:hidden;}
.pg-paper--carousel .pg-paper__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(193,250,29,0.35);
  background:rgba(22,20,30,0.72);color:var(--lime-500);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  opacity:0;transition:opacity 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;z-index:2;
}
.pg-paper--carousel:hover .pg-paper__nav,
.pg-paper--carousel:focus-within .pg-paper__nav{opacity:1;}
.pg-paper__nav:hover{
  background:rgba(22,20,30,0.92);border-color:var(--lime-500);
  box-shadow:0 0 0 4px rgba(193,250,29,0.15);
}
.pg-paper__nav--prev{left:10px;}
.pg-paper__nav--next{right:10px;}
.pg-paper__counter{
  position:absolute;top:10px;right:10px;z-index:2;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;
  color:var(--lime-500);background:rgba(22,20,30,0.78);
  border:1px solid rgba(193,250,29,0.3);padding:4px 9px;border-radius:999px;
  opacity:0;transition:opacity 180ms ease;
}
.pg-paper--carousel:hover .pg-paper__counter,
.pg-paper--carousel:focus-within .pg-paper__counter{opacity:1;}
.dye{
  position:absolute;border-radius:50%;
  filter:blur(60px);opacity:0.6;pointer-events:none;z-index:0;
}
.dye--violet{
  width:480px;height:480px;
  background:radial-gradient(circle,rgba(92,50,240,0.45),transparent 70%);
  top:8%;left:55%;
  animation:pgDyeFloat1 22s ease-in-out infinite;
}
.dye--lime{
  width:360px;height:360px;
  background:radial-gradient(circle,rgba(193,250,29,0.18),transparent 70%);
  bottom:10%;left:5%;
  animation:pgDyeFloat2 26s ease-in-out infinite;
}
@keyframes pgDyeFloat1{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(-40px,30px);}
}
@keyframes pgDyeFloat2{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(50px,-30px);}
}
@media (max-width: 768px){
  .pg-hero__inner--split{grid-template-columns:1fr;gap:40px;}
}
@media (prefers-reduced-motion: reduce){
  .dye{animation:none;}
}
.pg-paper{max-width:480px;margin:32px 0 36px;}
.pg-paper img{
  width:100%;border-radius:var(--r-sm);
  box-shadow:0 40px 80px -20px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.08);display:block;
}
.pg-paper figcaption{
  margin-top:16px;font-family:var(--font-serif);font-style:italic;
  font-size:14px;color:rgba(247,247,237,0.55);
}

/* ---------- SECTION ---------- */
.pg-section{padding:80px 40px;max-width:1280px;margin:0 auto;scroll-margin-top:80px;}
.pg-section--tight{padding-top:32px;}
.pg-section--hairline{border-top:1px solid rgba(238,238,226,0.10);}
.pg-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:rgba(247,247,237,0.55);margin:0 0 20px;
}
.pg-h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(36px,4.4vw,56px);line-height:1.05;letter-spacing:-0.025em;
  margin:0 0 32px;color:var(--cream-50);
}
.pg-h2 em{font-family:var(--font-serif);font-style:italic;color:var(--cream-50);}
.pg-body{
  font-size:18px;line-height:1.55;color:rgba(247,247,237,0.72);
  max-width:720px;margin:0 0 16px;
}

/* ---------- STEPS (Carl how-it-works) ---------- */
.pg-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:32px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--r-md);overflow:hidden;
}
.pg-step{background:var(--ink-800);padding:28px;}
.pg-step__num{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;
  color:var(--lime-500);margin:0 0 14px;display:block;
}
.pg-step__title{
  font-family:var(--font-display);font-size:22px;font-weight:400;
  letter-spacing:-0.015em;color:var(--cream-50);margin:0 0 10px;
}
.pg-step__desc{
  font-size:14px;line-height:1.55;color:rgba(247,247,237,0.65);margin:0;
}
.pg-step__art{width:100%;height:64px;margin-top:20px;color:var(--lime-500);display:block;}
.pg-latex{
  font-family:var(--font-mono);font-size:11px;line-height:1.65;
  color:rgba(247,247,237,0.72);background:rgba(255,255,255,0.04);
  border-left:2px solid var(--violet-400);
  padding:12px 14px;border-radius:2px;margin:20px 0 0;
  white-space:pre;overflow:hidden;
}

/* ---------- FEATURES (Carl) ---------- */
.pg-features{display:flex;flex-direction:column;gap:1px;margin-top:32px;
  background:rgba(255,255,255,0.06);border-radius:var(--r-md);overflow:hidden;}
.pg-feature{
  background:var(--ink-900);padding:40px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
.pg-feature__h{
  font-family:var(--font-display);font-size:28px;font-weight:400;
  letter-spacing:-0.02em;color:var(--cream-50);margin:0 0 12px;
}
.pg-feature__h em{font-family:var(--font-serif);font-style:italic;color:var(--cream-50);}
.pg-feature__p{
  font-size:15px;line-height:1.55;color:rgba(247,247,237,0.68);margin:0;
}
.pg-feature__art{display:flex;justify-content:center;align-items:center;color:var(--lime-500);}
.pg-flow{display:flex;align-items:center;gap:18px;min-width:260px;color:#B2A2FF;}
.pg-flow__inputs{display:grid;grid-template-columns:repeat(3,28px);gap:10px;}
.pg-flow__page,.pg-flow__paper{
  position:relative;border-radius:4px;border:1px solid currentColor;
  background:rgba(178,162,255,0.08);
}
.pg-flow__page{width:28px;height:36px;opacity:0.58;}
.pg-flow__page::before,.pg-flow__paper::before{
  content:"";position:absolute;left:6px;right:6px;top:9px;height:1px;background:currentColor;
  box-shadow:0 7px 0 currentColor,0 14px 0 currentColor;opacity:0.75;
}
.pg-flow__arrow{font-family:var(--font-mono);font-size:24px;color:currentColor;}
.pg-flow__paper{
  width:58px;height:72px;
  box-shadow:0 0 28px rgba(178,162,255,0.16);
}
.pg-gaps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;min-width:180px;color:#B2A2FF;}
.pg-gaps__node{width:28px;height:28px;border-radius:50%;background:currentColor;}
.pg-gaps__node--gap{background:transparent;border:1px dashed currentColor;}

/* ---------- PROOF (Carl) ---------- */
.pg-section--proof{background:var(--ink-800);max-width:none;padding:80px 40px;}
.pg-section--proof > .pg-label,
.pg-section--proof > .pg-proof,
.pg-section--proof > .pg-proof__actions{max-width:1280px;margin-left:auto;margin-right:auto;}
.pg-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:24px 0 36px;}
.pg-proof__item{border-top:1px solid rgba(255,255,255,0.15);padding-top:20px;}
.pg-proof__value{
  display:block;font-family:var(--font-display);
  font-size:clamp(22px,2.6vw,28px);letter-spacing:-0.015em;
  color:var(--cream-50);margin-bottom:14px;
}
.pg-proof__desc{font-size:14px;line-height:1.5;color:rgba(247,247,237,0.65);margin:0;}
.pg-proof__actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- VALUES GRID (Careers) ---------- */
.pg-values{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px;}
.pg-value{
  background:var(--ink-800);border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--r-md);padding:28px;
}
.pg-value__h{
  font-family:var(--font-display);font-size:22px;font-weight:400;
  letter-spacing:-0.015em;color:var(--cream-50);margin:0 0 10px;
}
.pg-value__p{
  font-size:14px;line-height:1.55;color:rgba(247,247,237,0.68);margin:0;
}

/* ---------- BENEFITS (Careers) ---------- */
.pg-benefits{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start;}
.pg-benefits__list{display:flex;flex-direction:column;}
.pg-benefit{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  padding:20px 0;border-top:1px solid rgba(255,255,255,0.08);
}
.pg-benefit:last-child{border-bottom:1px solid rgba(255,255,255,0.08);}
.pg-benefit__t{font-size:16px;font-weight:500;color:var(--cream-50);}
.pg-benefit__d{font-size:14px;color:rgba(247,247,237,0.6);}

/* ---------- ROLES (Careers) ---------- */
.pg-roles{display:flex;flex-direction:column;gap:32px;margin-top:32px;}
.pg-role-group{display:flex;flex-direction:column;gap:8px;}
.pg-role-group__h{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:rgba(247,247,237,0.5);
  margin:0 0 4px;font-weight:500;
}
.pg-role{
  display:block;background:var(--ink-800);border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--r-md);padding:16px 20px;
  transition:border-color 200ms var(--ease-out), background 200ms var(--ease-out);
  scroll-margin-top:96px;
}
.pg-role--link{text-decoration:none;}
.pg-role:hover{border-color:rgba(238,238,226,0.22);}
.pg-role__head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;cursor:pointer;list-style:none;
  padding-left:22px;position:relative;
}
.pg-role__head::-webkit-details-marker{display:none;}
.pg-role__head::before{
  content:"";position:absolute;left:0;top:9px;
  width:0;height:0;
  border-left:6px solid var(--lime-500);
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  transition:transform 180ms ease;
}
.pg-role[open] .pg-role__head::before{transform:rotate(90deg);}
.pg-role[open] .pg-role__head{margin-bottom:14px;}
.pg-role__t{
  font-family:var(--font-display);font-size:22px;font-weight:400;
  letter-spacing:-0.015em;color:var(--cream-50);margin:0;
}
.pg-role__meta{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;
  color:rgba(247,247,237,0.5);
}
.pg-role__d{
  font-size:14px;line-height:1.55;color:rgba(247,247,237,0.7);margin:0 0 16px;
}
.pg-role__apply{
  display:inline-block;
  font-family:var(--font-mono);font-size:12px;color:var(--lime-500);
  letter-spacing:0.02em;text-decoration:none;
}
.pg-role__apply:hover{color:var(--cream-50);}
.pg-role__details{
  margin:8px 0 20px;border-top:1px solid rgba(255,255,255,0.06);padding-top:20px;
  display:flex;flex-direction:column;gap:18px;
}
.pg-role__about{
  font-size:14px;line-height:1.6;color:rgba(247,247,237,0.78);margin:0;
}
.pg-role__sub{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;
  color:var(--lime-500);margin:0 0 8px;
}
.pg-role__list{
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:6px;
}
.pg-role__list li{
  font-size:14px;line-height:1.55;color:rgba(247,247,237,0.7);
  padding-left:18px;position:relative;
}
.pg-role__list li::before{
  content:"";position:absolute;left:4px;top:9px;
  width:5px;height:5px;border-radius:50%;background:var(--lime-500);opacity:0.55;
}

/* ---------- BLOG LIST ---------- */
.pg-featured{
  display:grid;grid-template-columns:3fr 2fr;gap:48px;
  background:var(--ink-800);border:1px solid rgba(238,238,226,0.10);
  border-radius:var(--r-md);padding:40px;text-decoration:none;
  margin-top:32px;align-items:center;
  transition:transform 240ms var(--ease-out), border-color 240ms;
}
.pg-featured:hover{border-color:rgba(238,238,226,0.22);transform:translateY(-2px);}
.pg-featured__cat{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--lime-500);margin:0 0 16px;
}
.pg-featured__t{
  font-family:var(--font-display);font-size:30px;font-weight:400;
  letter-spacing:-0.02em;color:var(--cream-50);margin:0 0 16px;line-height:1.1;
}
.pg-featured__d{
  font-size:15px;line-height:1.5;color:rgba(247,247,237,0.68);margin:0 0 24px;
}
.pg-featured__date{
  font-family:var(--font-mono);font-size:11px;color:rgba(247,247,237,0.45);
  letter-spacing:0.04em;
}
.pg-featured__img{
  background:var(--ink-700);border-radius:var(--r-sm);
  aspect-ratio:4/3;overflow:hidden;
}
.pg-featured__img img{width:100%;height:100%;object-fit:cover;display:block;}

.pg-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;}
.pg-post{
  background:var(--ink-800);border:1px solid rgba(238,238,226,0.10);
  border-radius:var(--r-md);padding:24px;text-decoration:none;
  display:flex;flex-direction:column;gap:12px;
  transition:transform 240ms var(--ease-out), border-color 240ms;
}
.pg-post:hover{border-color:rgba(238,238,226,0.22);transform:translateY(-2px);}
.pg-post__cat{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--lime-500);
}
.pg-post__t{
  font-family:var(--font-display);font-size:19px;font-weight:400;
  letter-spacing:-0.015em;color:var(--cream-50);margin:0;line-height:1.25;
}
.pg-post__d{
  font-size:13px;line-height:1.5;color:rgba(247,247,237,0.6);margin:0;flex:1;
}
.pg-post__date{
  font-family:var(--font-mono);font-size:11px;color:rgba(247,247,237,0.4);
  letter-spacing:0.04em;
}

/* ---------- BLOG POST BODY ---------- */
.pg-post-body{max-width:760px;margin:0 auto;padding:120px 40px 96px;}
.pg-post-body__back{
  font-family:var(--font-mono);font-size:12px;color:rgba(247,247,237,0.6);
  letter-spacing:0.02em;margin-bottom:40px;display:inline-block;
  text-decoration:none;
}
.pg-post-body__back:hover{color:var(--violet-400);}
.pg-post-body__cat{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--lime-500);margin:0 0 16px;
}
.pg-post-body__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(36px,4vw,52px);line-height:1.05;letter-spacing:-0.025em;
  color:var(--cream-50);margin:0 0 20px;
}
.pg-post-body__meta{
  font-family:var(--font-mono);font-size:12px;color:rgba(247,247,237,0.5);
  margin:0 0 40px;padding-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.pg-post-body__subheading{
  font-family:var(--font-serif);font-style:italic;font-size:22px;
  line-height:1.35;color:rgba(247,247,237,0.72);margin:-20px 0 36px;
}
.pg-post-body__actions{display:flex;flex-wrap:wrap;gap:12px;margin:-16px 0 28px;}
.pg-post-body__paper{display:flex;justify-content:center;margin:0 0 28px;}
.pg-post-body__paper-embed{
  width:100%;height:min(82vh,860px);border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--r-md);background:rgba(255,255,255,0.04);
}
.pg-post-body__content{font-size:17px;line-height:1.65;color:rgba(247,247,237,0.78);}
.pg-post-body__content p{margin:0 0 20px;}
.pg-post-body__content h2{
  font-family:var(--font-display);font-size:26px;font-weight:400;
  letter-spacing:-0.015em;color:var(--cream-50);margin:48px 0 16px;
}
.pg-post-body__content hr{border:0;border-top:1px solid rgba(255,255,255,0.1);margin:36px 0;}
.pg-post-body__content a{color:var(--violet-400);text-decoration:underline;}
.pg-post-body__content a.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:-0.02em;
  border:1px solid var(--violet-700);background:var(--violet-700);
}
.pg-post-body__content a.btn,
.pg-post-body__content a.pill-btn{text-decoration:none;}
.pg-post-body__content a.btn-primary,
.pg-post-body__content a.pill-btn--violet{color:var(--cream-50);}
.pg-post-body__content blockquote{
  font-family:var(--font-serif);font-style:italic;font-size:22px;
  line-height:1.4;color:var(--cream-50);
  border-left:2px solid var(--violet-500);padding-left:24px;margin:32px 0;
}
.pg-post-body__content strong{color:var(--cream-50);}
.pg-post-body__content img{
  width:100%;border-radius:var(--r-md);margin:24px 0;
  border:1px solid rgba(255,255,255,0.08);
}

/* ---------- GET STARTED FORM ---------- */
.pg-form{
  max-width:640px;margin:0 auto;
  background:var(--ink-800);border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--r-md);padding:40px;
}
.pg-form__row{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;}
.pg-form__label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:#E6B86A;
}
.pg-form__input,.pg-form__select,.pg-form__textarea{
  width:100%;background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,255,255,0.08);border-radius:var(--r-sm);
  padding:12px 16px;color:var(--cream-50);
  font-family:var(--font-sans);font-size:15px;line-height:1.5;
  transition:border-color 180ms ease, background 180ms ease;
}
.pg-form__input::placeholder,.pg-form__textarea::placeholder{color:rgba(247,247,237,0.35);}
.pg-form__input:focus,.pg-form__select:focus,.pg-form__textarea:focus{
  outline:none;border-color:var(--violet-500);background:rgba(0,0,0,0.5);
}
.pg-form__textarea{min-height:130px;resize:vertical;font-family:inherit;}
.pg-form__select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,rgba(247,247,237,0.5) 50%),
                   linear-gradient(135deg,rgba(247,247,237,0.5) 50%,transparent 50%);
  background-position:calc(100% - 20px) 18px, calc(100% - 14px) 18px;
  background-size:6px 6px;background-repeat:no-repeat;padding-right:40px;}
.pg-form__submit{
  width:100%;justify-content:center;margin-top:8px;
  background:#E6B86A;color:var(--ink-900);border-color:#E6B86A;
  box-shadow:0 10px 32px rgba(230,184,106,0.18);
}
.pg-form__submit:hover{background:#F0C982;border-color:#F0C982;color:var(--ink-900);}
.pg-form__status{
  margin-top:24px;padding:16px 18px;border-radius:var(--r-sm);
  background:rgba(193,250,29,0.08);border:1px solid rgba(193,250,29,0.25);
  color:var(--cream-50);font-size:14px;line-height:1.5;text-align:center;
}
.pg-form__status--error{
  background:rgba(230,184,106,0.08);border-color:rgba(230,184,106,0.35);
}

/* ---------- CTA BAND ---------- */
.pg-cta{
  padding:96px 40px;background:var(--ink-800);
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
  text-align:center;
}
.pg-cta h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(32px,4vw,48px);letter-spacing:-0.02em;
  color:var(--cream-50);margin:0 0 16px;
}
.pg-cta h2 em{font-family:var(--font-serif);font-style:italic;color:var(--cream-50);}
.pg-cta p{font-size:16px;color:rgba(247,247,237,0.65);margin:0 0 28px;}
.pg-cta__btns{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center;}

@media(max-width:900px){
  .pg-posts,.pg-values,.pg-steps,.pg-proof{grid-template-columns:1fr;}
  .pg-featured,.pg-benefits{grid-template-columns:1fr;}
  .pg-feature{grid-template-columns:1fr;gap:24px;}
}

@media(max-width:640px){
  .pg-hero{padding:128px 20px 64px;}
  .pg-hero--compact{padding:96px 20px 24px;}
  .pg-hero__title{font-size:clamp(36px,9vw,48px);}
  .pg-hero__sub{font-size:16px;}
  .pg-hero__actions{width:100%;}
  .pg-hero__actions .pill-btn{flex:1 1 auto;justify-content:center;}

  .pg-section{padding:56px 20px;}
  .pg-section--tight{padding-top:24px;}
  .pg-h2{font-size:clamp(28px,8vw,36px);margin-bottom:24px;}
  .pg-body{font-size:16px;}
  .pg-label{margin-bottom:16px;}

  .pg-featured{padding:24px;gap:20px;}
  .pg-featured__t{font-size:24px;}
  .pg-post{padding:20px;}

  .pg-value,.pg-step{padding:22px;}
  .pg-feature{padding:28px 22px;}

  .pg-benefit{grid-template-columns:1fr;gap:6px;padding:16px 0;}
  .pg-benefit__t{font-size:15px;}

  .pg-role{padding:14px 16px;}
  .pg-role__head{padding-left:18px;gap:8px;}
  .pg-role__t{font-size:18px;}
  .pg-role__meta{font-size:10.5px;}

  .pg-cta{padding:72px 20px;}
  .pg-cta__btns{width:100%;}
  .pg-cta__btns .pill-btn{flex:1 1 auto;justify-content:center;}

  .pg-post-body{padding:96px 20px 64px;}
  .pg-post-body__title{font-size:clamp(28px,8vw,36px);}
}
`;

/* ============================================================
   CARL
   ============================================================ */
const PAPER_PAGES = Array.from({ length: 12 }, (_, i) => `/assets/paper-iclr2025-p${i + 1}.png`);

const PaperCarousel = () => {
  const [page, setPage] = React.useState(0);
  const total = PAPER_PAGES.length;
  const goPrev = (e) => { e.stopPropagation(); setPage((p) => (p - 1 + total) % total); };
  const goNext = (e) => { e.stopPropagation(); setPage((p) => (p + 1) % total); };
  return (
    <figure className="pg-paper pg-paper--carousel">
      <div className="pg-paper__viewport">
        <img src={PAPER_PAGES[page]} alt={`Investigating Alignment Signals in Initial Token Representations — page ${page + 1} of ${total}.`} />
        <button type="button" className="pg-paper__nav pg-paper__nav--prev" onClick={goPrev} aria-label="Previous page">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <polyline points="15 18 9 12 15 6" />
          </svg>
        </button>
        <button type="button" className="pg-paper__nav pg-paper__nav--next" onClick={goNext} aria-label="Next page">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <polyline points="9 18 15 12 9 6" />
          </svg>
        </button>
        <div className="pg-paper__counter">{page + 1} / {total}</div>
      </div>
      <figcaption>Accepted at an ICLR 2025 workshop.</figcaption>
    </figure>
  );
};

const Carl = () => (
  <div className="pg">
    <style dangerouslySetInnerHTML={{ __html: PAGES_CSS }} />
    <Nav accent="#C1FA1D" ctaLabel="Book a demo" ctaVariant="violet" />

    <section className="pg-hero pg-hero--full pg-hero--carl">
      <div className="pg-hero__bg">
        <svg className="pg-stars" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <circle cx="28%" cy="38%" r="14" fill="#fff" fillOpacity="0.3" />
          <circle cx="65%" cy="62%" r="11" fill="#fff" fillOpacity="0.3" />
          <circle cx="35%" cy="60%" r="8" fill="#fff" fillOpacity="0.3" />
          <circle cx="28%" cy="38%" r="2" fill="#fff" />
          <circle cx="65%" cy="62%" r="2" fill="#fff" />
          <circle cx="35%" cy="60%" r="2" fill="#fff" />
          <circle cx="17%" cy="21%" r="2" fill="#fff" />
          <circle cx="32%" cy="14%" r="2" fill="#fff" />
          <circle cx="48%" cy="28%" r="2" fill="#fff" />
          <circle cx="64%" cy="18%" r="2" fill="#fff" />
          <circle cx="12%" cy="38%" r="2" fill="#fff" />
          <circle cx="25%" cy="52%" r="2" fill="#fff" />
          <circle cx="42%" cy="45%" r="2" fill="#fff" />
          <circle cx="58%" cy="55%" r="2" fill="#fff" />
          <circle cx="72%" cy="42%" r="2" fill="#fff" />
          <circle cx="86%" cy="50%" r="2" fill="#fff" />
          <circle cx="8%" cy="65%" r="2" fill="#fff" />
          <circle cx="38%" cy="82%" r="2" fill="#fff" />
          <circle cx="52%" cy="72%" r="2" fill="#fff" />
          <circle cx="68%" cy="85%" r="2" fill="#fff" />
          <circle cx="82%" cy="78%" r="2" fill="#fff" />
          <circle cx="92%" cy="35%" r="2" fill="#fff" />
          <circle cx="6%" cy="88%" r="2" fill="#fff" />
          <circle cx="56%" cy="8%" r="2" fill="#fff" />
          <circle cx="88%" cy="12%" r="2" fill="#fff" />
          <circle cx="14%" cy="8%" r="2" fill="#fff" />
          <circle cx="36%" cy="92%" r="2" fill="#fff" />
          <circle cx="76%" cy="92%" r="2" fill="#fff" />
          <circle cx="21%" cy="31%" r="2" fill="#fff" />
          <circle cx="39%" cy="22%" r="2" fill="#fff" />
          <circle cx="55%" cy="38%" r="2" fill="#fff" />
          <circle cx="70%" cy="32%" r="2" fill="#fff" />
          <circle cx="84%" cy="38%" r="2" fill="#fff" />
          <circle cx="18%" cy="48%" r="2" fill="#fff" />
          <circle cx="80%" cy="65%" r="2" fill="#fff" />
          <circle cx="94%" cy="70%" r="2" fill="#fff" />
          <circle cx="4%" cy="50%" r="2" fill="#fff" />
          <circle cx="30%" cy="5%" r="2" fill="#fff" />
          <circle cx="44%" cy="88%" r="2" fill="#fff" />
          <circle cx="60%" cy="95%" r="2" fill="#fff" />
          <circle cx="28%" cy="88%" r="2" fill="#fff" />
          <circle cx="72%" cy="12%" r="2" fill="#fff" />
          <circle cx="4%" cy="22%" r="2" fill="#fff" />
          <circle cx="96%" cy="22%" r="2" fill="#fff" />
          <circle cx="16%" cy="92%" r="2" fill="#fff" />
          <circle cx="96%" cy="90%" r="2" fill="#fff" />
          <circle cx="48%" cy="62%" r="2" fill="#fff" />
        </svg>
      </div>
      <div className="dye dye--violet" aria-hidden="true" />
      <div className="dye dye--lime" aria-hidden="true" />
      <div className="pg-hero__inner pg-hero__inner--split">
        <div className="pg-hero__col">
          <p className="pg-hero__eyebrow">Carl &mdash;</p>
          <h1 className="pg-hero__title">
            <em>Original Research</em>.<br />
            Authored by AI.
          </h1>
          <p className="pg-hero__sub">
            The first AI system to produce academically peer-reviewed research.
          </p>
          <div className="pg-hero__actions">
            <a className="pill-btn pill-btn--violet" href="https://drive.google.com/file/d/1XOkAgdg7OjIYeSClijrhMC2i7ijdnD7Y/view" target="_blank" rel="noopener noreferrer">Read the paper <span style={{ opacity: 0.7 }}>→</span></a>
            <a className="pill-btn" href="/get-started">Try Carl</a>
          </div>
        </div>
        <div className="pg-hero__col pg-hero__col--paper">
          <PaperCarousel />
        </div>
      </div>
    </section>

    <section className="pg-section">
      <p className="pg-label">The Problem</p>
      <h2 className="pg-h2">ML research shouldn't take <em>months</em>.</h2>
      <p className="pg-body">
        Creating ML research requires reading dozens of papers, tracking citations, running experiments, and synthesizing findings into coherent narratives.
      </p>
      <p className="pg-body">
        The problem is not any single task; it is the coordination cost between them. Researchers spend much of their time keeping context, experiments, citations, and drafts aligned instead of testing the next idea.
      </p>
    </section>

    <section className="pg-section">
      <p className="pg-label">Solution</p>
      <h2 className="pg-h2">How Carl <em>works</em>.</h2>
      <div className="pg-steps">
        <div className="pg-step">
          <span className="pg-step__num">01 — IDEATION</span>
          <h3 className="pg-step__title">Read &amp; hypothesize</h3>
          <p className="pg-step__desc">Starting with existing literature, Carl explores future research directions, generates candidate ideas, and formulates testable hypotheses.</p>
          <svg className="pg-step__art" viewBox="0 0 140 72" fill="none" aria-hidden="true">
            <line x1="22" y1="18" x2="72" y2="18" stroke="currentColor" strokeOpacity="0.35"/>
            <line x1="22" y1="18" x2="52" y2="50" stroke="currentColor" strokeOpacity="0.35"/>
            <line x1="52" y1="50" x2="100" y2="50" stroke="currentColor" strokeOpacity="0.35"/>
            <circle cx="22" cy="18" r="5" fill="currentColor" fillOpacity="0.35"/>
            <circle cx="72" cy="18" r="5" fill="currentColor" fillOpacity="0.35"/>
            <circle cx="52" cy="50" r="7" fill="currentColor"/>
            <circle cx="100" cy="50" r="5" fill="currentColor" fillOpacity="0.35"/>
          </svg>
        </div>
        <div className="pg-step">
          <span className="pg-step__num">02 — EXECUTION</span>
          <h3 className="pg-step__title">Run experiments</h3>
          <p className="pg-step__desc">Carl writes the code, runs the experiments, and produces the figures that test each hypothesis end-to-end.</p>
          <svg className="pg-step__art" viewBox="0 0 140 72" fill="currentColor" aria-hidden="true">
            <rect x="18" y="48" width="16" height="24" rx="2" fillOpacity="0.35"/>
            <rect x="46" y="32" width="16" height="40" rx="2" fillOpacity="0.35"/>
            <rect x="74" y="20" width="16" height="52" rx="2" fillOpacity="0.35"/>
            <rect x="102" y="8"  width="16" height="64" rx="2"/>
          </svg>
        </div>
        <div className="pg-step">
          <span className="pg-step__num">03 — PRESENTATION</span>
          <h3 className="pg-step__title">Write the paper</h3>
          <p className="pg-step__desc">Carl synthesizes the results into a full-length LaTeX paper, structured for conference submission.</p>
          <pre className="pg-latex">
{`\\section{Introduction}
Recent advances in...
\\begin{figure}
  \\includegraphics{fig1}
\\end{figure}`}
          </pre>
        </div>
      </div>
    </section>

    <section className="pg-section">
      <p className="pg-label">Features</p>
      <div className="pg-features">
        <div className="pg-feature">
          <div>
            <h3 className="pg-feature__h">Weeks to <em>days</em>.</h3>
            <p className="pg-feature__p">Transform months of reading into comprehensive synthesis in a fraction of the time. Start your research from a position of deep understanding.</p>
          </div>
          <div className="pg-feature__art">
            <div className="pg-flow" aria-hidden="true">
              <div className="pg-flow__inputs">
                {[0,1,2,3,4,5].map(i => <span key={i} className="pg-flow__page" />)}
              </div>
              <span className="pg-flow__arrow">→</span>
              <span className="pg-flow__paper" />
            </div>
          </div>
        </div>
        <div className="pg-feature">
          <div>
            <h3 className="pg-feature__h">Find the <em>gaps</em>.</h3>
            <p className="pg-feature__p">Carl identifies what's been studied and what hasn't. Discover unexplored intersections and underexamined assumptions in your field.</p>
          </div>
          <div className="pg-feature__art">
            <div className="pg-gaps">
              {[0,1,2,3,4,5,6,7].map(i => (
                <span key={i} className={i === 4 ? "pg-gaps__node pg-gaps__node--gap" : "pg-gaps__node"}/>
              ))}
            </div>
          </div>
        </div>
        <div className="pg-feature">
          <div>
            <h3 className="pg-feature__h">Research-paper <em>output</em>.</h3>
            <p className="pg-feature__p">Generate structured LaTeX that serves as a starting point for standalone papers — complete with citations, figures, and experimental results.</p>
          </div>
          <div className="pg-feature__art">
            <pre className="pg-latex">
{`\\title{An Autonomous...}
\\author{Carl}
\\begin{abstract}
  We propose...
\\end{abstract}`}
            </pre>
          </div>
        </div>
      </div>
    </section>

    <section className="pg-cta">
      <h2>Start researching with <em>Carl</em>.</h2>
      <p>Complete your academic ML research in days, not months.</p>
      <div className="pg-cta__btns">
        <a className="pill-btn pill-btn--violet" href="/get-started">Request access <span style={{ opacity: 0.7 }}>→</span></a>
        <a className="pill-btn" href="/blog">Read research</a>
      </div>
    </section>

    <Footer accent="#C1FA1D" />
  </div>
);

/* ============================================================
   CAREERS
   ============================================================ */
const CAREER_VALUES = [
  { title: "Depth over breadth", desc: "We'd rather do one thing exceptionally well than many things adequately." },
  { title: "Research-grade rigor", desc: "We hold ourselves to the highest level of scientific rigor. Proper experimental design is a core tenet of our work." },
  { title: "Ship and iterate", desc: "Perfect is the enemy of good. We get things in front of users early and improve from there." },
  { title: "Transparency", desc: "We share context generously. Better decisions come from better information." },
];

const CAREER_BENEFITS = [
  { title: "Competitive cash and equity", desc: "Meaningful ownership in an early-stage company." },
  { title: "Retirement benefits", desc: "401(k) plan." },
  { title: "Relocation support", desc: "Assistance if you're moving to the Bay Area." },
  { title: "Unlimited PTO", desc: "Work in the way that works for you." },
];

const CAREER_ROLES = [
  {
    category: "Research",
    title: "Machine Learning Research Scientist",
    type: "Full-time", location: "In-person (San Mateo)",
    desc: "Work directly with the founding team to build autonomous research systems that ideate, experiment, and improve customer models.",
    about: "At Autoscience Institute we build AI systems that autonomously conduct AI research — including the first agent to produce peer-reviewed literature at an ICLR 2025 workshop. As a Machine Learning Research Scientist, you'll work directly with the founding team on the autonomous research systems that ideate, run experiments, and improve customer models. You'll RL post-train and fine-tune reasoning models to automate parts of the ML research process, collaborate closely with engineering to push that research into production, and keep the team ahead of what's happening across the field.",
    goodFit: [
      "Have a PhD or equivalent research experience in CS, ML, AI, or a related field — exceptional candidates with strong research contributions are welcome regardless of formal degree",
      "Have published at top-tier AI/ML venues (NeurIPS, ICML, ICLR, etc.) or hold equivalent experience at a corporate AI research lab (Microsoft, Google, NVIDIA, etc.)",
      "Have real expertise training ML models — deep learning, reinforcement learning, or genetic algorithms (not multi-agent LLM API orchestration or RAG agents)",
      "Are driven to accelerate scientific discovery and comfortable exploring uncharted directions with minimal supervision",
    ],
    bonus: [
      "Experience building scalable, production-ready ML pipelines or large-scale model training (distributed training across >64 GPUs)",
      "A background or demonstrated interest in automated scientific research",
    ],
    url: "https://jobs.ashbyhq.com/autoscience/323b577d-3150-4696-be85-b25e488fc2f5/application",
  },
  {
    category: "Engineering",
    title: "Software Engineer",
    type: "Full-time", location: "In-person (San Mateo)",
    desc: "Build and maintain the back-end systems and production infrastructure that power Autoscience's automated research agents.",
    about: "At Autoscience Institute we build AI systems that autonomously conduct AI research — including the first agent to produce peer-reviewed literature at an ICLR 2025 workshop. As a Software Engineer, you'll develop and maintain our back-end systems, design and ship software solutions, and build the production infrastructure our research agents run on. You'll work closely with the research teams to keep our automated research pipeline fast, reliable, and easy to extend.",
    goodFit: [
      "Have worked in 24/7 production environments",
      "Have demonstrable experience with Google Cloud Platform",
      "Are strong in Python and comfortable writing design docs for the systems you build",
      "Have a solid background across backend and production environments",
      "Work well collaboratively, including with Agile workflows",
      "Hold a Bachelor's degree in Computer Science, Math, or a related field",
    ],
    bonus: [
      "Experience with AI and machine learning",
    ],
    url: "https://jobs.ashbyhq.com/autoscience/00843b73-a6d2-4e8e-894c-d823c77e70e3/application",
  },
  {
    category: "Engineering",
    title: "Software Engineer, AI Observability",
    type: "Full-time", location: "In-person (San Mateo)",
    url: "https://jobs.ashbyhq.com/autoscience/00843b73-a6d2-4e8e-894c-d823c77e70e3/application",
  },
  {
    category: "Engineering",
    title: "Senior Software Engineer",
    type: "Full-time", location: "In-person (San Mateo)",
    desc: "Lead the design and delivery of the core systems behind Autoscience's automated research platform — from agent fleets to training and experiment infrastructure.",
    about: "As a Senior Software Engineer at Autoscience, you'll own end-to-end system design and delivery for the infrastructure powering our autonomous research agents. You'll drive architectural decisions, raise the engineering bar across the team, and partner closely with researchers to ship reliable, scalable systems that make automated science tractable. We're looking for engineers with deep experience designing production systems who are excited to go deep on ML alongside our research team.",
    goodFit: [
      "Have 7+ years of software engineering experience, including senior or staff-level scope",
      "Have led the design and delivery of large, production-grade systems end-to-end",
      "Default to outcomes over process and move fast when the path is unclear",
      "Pick up work that no one owns yet, regardless of job title",
      "Like sitting next to teammates and building together — we pair often",
      "Care about how AI shows up in the world",
    ],
    bonus: [
      "Production-grade, large-scale ML systems",
      "Distributed systems and infrastructure at scale",
      "Internals of PyTorch, JAX, or similar frameworks",
      "GPU and accelerator programming",
      "Transformer-based language modeling",
    ],
    url: "https://jobs.ashbyhq.com/autoscience/8608b950-0779-4a09-90fb-a5c8587cb69e/application",
  },
  {
    category: "Research",
    title: "Research Engineer / Scientist, Pre-training",
    type: "Full-time", location: "In-person (San Mateo)",
    url: "https://jobs.ashbyhq.com/autoscience/323b577d-3150-4696-be85-b25e488fc2f5/application",
  },
  {
    category: "Research",
    title: "Research Engineer, Post-Training",
    type: "Full-time", location: "In-person (San Mateo)",
    url: "https://jobs.ashbyhq.com/autoscience/323b577d-3150-4696-be85-b25e488fc2f5/application",
  },
  {
    category: "Research",
    title: "Research Engineer, Post-Training Scaling",
    type: "Full-time", location: "In-person (San Mateo)",
    url: "https://jobs.ashbyhq.com/autoscience/323b577d-3150-4696-be85-b25e488fc2f5/application",
  },
  {
    category: "Research",
    title: "Research Engineer, Performance RL",
    type: "Full-time", location: "In-person (San Mateo)",
    url: "https://jobs.ashbyhq.com/autoscience/323b577d-3150-4696-be85-b25e488fc2f5/application",
  },
  {
    category: "Research",
    title: "Research Engineer, ML (Reinforcement Learning)",
    type: "Full-time", location: "In-person (San Mateo)",
    url: "https://jobs.ashbyhq.com/autoscience/323b577d-3150-4696-be85-b25e488fc2f5/application",
  },
];

const roleSlug = (title) => `role-${title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')}`;

const Careers = () => (
  <div className="pg">
    <style dangerouslySetInnerHTML={{ __html: PAGES_CSS }} />
    <Nav accent="#C1FA1D" ctaLabel="Book a demo" ctaVariant="violet" />

    <section className="pg-hero pg-hero--compact pg-hero--center">
      <div className="pg-hero__bg" />
      <div className="pg-hero__inner">
        <h1 className="pg-hero__title">
          Invent automated<br />
          research.
        </h1>
        <p className="pg-hero__sub">
          We're a group of AI researchers and software engineers dedicated to pushing the frontier of automated science.
        </p>
        <div className="pg-hero__actions">
          <a
            href="#open-roles"
            className="pill-btn pill-btn--violet"
            onClick={(e) => {
              e.preventDefault();
              const el = document.getElementById('open-roles');
              if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }}
          >
            See open roles <span style={{ opacity: 0.7 }}>→</span>
          </a>
        </div>
      </div>
    </section>

    <section className="pg-section">
      <p className="pg-label">How we work</p>
      <h2 className="pg-h2">Values we hire for.</h2>
      <div className="pg-values">
        {CAREER_VALUES.map(v => (
          <div key={v.title} className="pg-value">
            <h3 className="pg-value__h">{v.title}</h3>
            <p className="pg-value__p">{v.desc}</p>
          </div>
        ))}
      </div>
    </section>

    <section className="pg-section pg-section--hairline">
      <div className="pg-benefits">
        <div>
          <p className="pg-label">What we offer</p>
          <h2 className="pg-h2">Competitive hiring.</h2>
        </div>
        <div className="pg-benefits__list">
          {CAREER_BENEFITS.map(b => (
            <div key={b.title} className="pg-benefit">
              <span className="pg-benefit__t">{b.title}</span>
              <span className="pg-benefit__d">{b.desc}</span>
            </div>
          ))}
        </div>
      </div>
    </section>

    <section className="pg-section pg-section--hairline" id="open-roles">
      <p className="pg-label">Open roles</p>
      <h2 className="pg-h2">Join us.</h2>
      <div className="pg-roles">
        {["Research", "Engineering"].map(cat => (
          <div key={cat} className="pg-role-group">
            <h3 className="pg-role-group__h">{cat}</h3>
            {CAREER_ROLES.filter(r => r.category === cat).map(r => {
              const hasDetails = r.desc || r.about || r.responsibilities || r.goodFit || r.bonus;
              if (!hasDetails) {
                return (
                  <a key={r.title} id={roleSlug(r.title)} className="pg-role pg-role--link" href={r.url} target="_blank" rel="noopener noreferrer">
                    <div className="pg-role__head">
                      <h3 className="pg-role__t">{r.title}</h3>
                      <div className="pg-role__meta">{r.type} · {r.location}</div>
                    </div>
                  </a>
                );
              }

              return (
                <details key={r.title} id={roleSlug(r.title)} className="pg-role">
                  <summary className="pg-role__head">
                    <h3 className="pg-role__t">{r.title}</h3>
                    <div className="pg-role__meta">{r.type} · {r.location}</div>
                  </summary>
                  {r.desc && <p className="pg-role__d">{r.desc}</p>}
                  {(r.about || r.responsibilities || r.goodFit || r.bonus) && (
                    <div className="pg-role__details">
                      {r.about && <p className="pg-role__about">{r.about}</p>}
                      {r.responsibilities && (
                        <div>
                          <p className="pg-role__sub">RESPONSIBILITIES</p>
                          <ul className="pg-role__list">
                            {r.responsibilities.map(b => <li key={b}>{b}</li>)}
                          </ul>
                        </div>
                      )}
                      {r.goodFit && (
                        <div>
                          <p className="pg-role__sub">{r.goodFitLabel || "YOU MAY BE A GOOD FIT IF YOU"}</p>
                          <ul className="pg-role__list">
                            {r.goodFit.map(b => <li key={b}>{b}</li>)}
                          </ul>
                        </div>
                      )}
                      {r.bonus && (
                        <div>
                          <p className="pg-role__sub">BONUS EXPERIENCE</p>
                          <ul className="pg-role__list">
                            {r.bonus.map(b => <li key={b}>{b}</li>)}
                          </ul>
                        </div>
                      )}
                    </div>
                  )}
                  <a className="pg-role__apply" href={r.url} target="_blank" rel="noopener noreferrer">Apply →</a>
                </details>
              );
            })}
          </div>
        ))}
      </div>
    </section>

    <section className="pg-cta">
      <h2>Don't see a perfect <em>fit</em>?</h2>
      <p>We're always looking for exceptional people. Send us a note about what you'd bring to Autoscience.</p>
      <div className="pg-cta__btns">
        <a className="pill-btn pill-btn--violet" href="mailto:hiring@autoscience.ai?subject=General Application">Get in touch <span style={{ opacity: 0.7 }}>→</span></a>
      </div>
    </section>

    <Footer accent="#C1FA1D" />
  </div>
);

/* ============================================================
   BLOG
   ============================================================ */
const BLOG_POSTS = [
  {
    slug: "autoscience-autonomous-ai-lab",
    title: "Autoscience Raises $14M to Build Automated AI Research Lab",
    description: "Backed by General Catalyst, Perplexity Fund, S32, MaC Ventures and Toyota Ventures.",
    date: "March 2026", category: "Company Update", featured: true,
    postDate: "March 18, 2026",
    subheading: "Backed by General Catalyst, Perplexity Fund, S32, MaC Ventures and Toyota Ventures.",
    image: "assets/fundraising.png",
    body: `
      <img src="/assets/fundraising.png" alt="Autoscience raises $14M" style="width:100%; border-radius:8px; margin:0 0 1.5em;" />

      <p>For many machine learning teams, the primary bottleneck in artificial intelligence development is no longer compute or data, but the human capacity to create and test new ideas at scale. Just as AI systems have exceeded human performance on competitive chess, programming, and mathematics, we believe that AI systems can outperform human researchers at inventing more capable AI models.</p>

      <p>Today, we are proud to announce that Autoscience has raised $14 million in seed funding to break the human bottleneck in AI discovery. Led by General Catalyst, with participation from Perplexity Fund, Toyota Ventures, S32 and MaC Ventures, this capital will accelerate our mission: Automating AI Research and Development.</p>

      <blockquote>"I think the biggest thing to watch is this issue of AI systems building AI systems."<br><strong>Dario Amodei, CEO Anthropic @ Davos 2026</strong></blockquote>

      <h2>The Automated AI Research Lab</h2>

      <p>With more than 2,000 machine learning papers published every week, no human research team can effectively evaluate and implement every new breakthrough while advancing their own original hypotheses.</p>

      <img src="/assets/arxiv_ml_ai_papers_per_month_light.png" alt="ML and AI papers published per month on arXiv" style="width:100%; border-radius:8px; margin:1.5em 0;" />

      <p>We've built a research organization where the researcher is driven by AI systems. We aim to compress years of machine learning research into months, unlocking new AI capabilities for scientists and building a competitive edge for our customers.</p>

      <p>Our managed service deploys hundreds of automated AI Research Scientists that continuously generate and ship improvements to our customers' machine learning models at the same time, enabling companies to discover, test, and serve better models.</p>

      <p>Autoscience first gained recognition when its autonomous lab became the first AI system to produce a peer-reviewed scientific research paper (<a href="/blog/carl-full-paper">ICLR 2025 workshop</a>). Soon after, its system secured a Silver Medal in a machine learning competition (<a href="/blog/introducing-mira">Kaggle Santa 2025</a>) against 3,300 teams, marking the first time a fully-autonomous system has placed in a featured Kaggle competition.</p>

      <h2>What's Next?</h2>

      <p>We're expanding our engineering team and deepening our partnerships with a select group of large enterprises. If your organization is tired of operating with understaffed ML teams or falling behind the curve of model performance, we're here to help you advance your ML models at the speed of AI.</p>

      <p>The future of discovery is driven by AI systems. We're excited to be along for the ride.</p>

      <div style="display:flex; gap:16px; margin-top:2em;">
        <a href="/careers" class="btn btn-primary">Join us &rarr;</a>
        <a href="/get-started" class="btn btn-primary">Get in Touch &rarr;</a>
      </div>
    `,
  },
  {
    slug: "introducing-mira",
    title: "Introducing Mira: Your ML Research Agent",
    description: "How we built an AI that automates AI research and development.",
    date: "January 2026", category: "Product",
    postDate: "Posted: January 29, 2026. Updated: March 18, 2026",
    subheading: "We built an AI system that won a silver medal in a public Machine Learning competition.",
    body: `
      <h2>What is Mira</h2>

      <p>We're excited to introduce Mira, an automated machine learning research scientist built for algorithmic discovery.</p>

      <p>Mira is designed to invent entirely new models and architectures, not just tune or ensemble existing ones.</p>

      <p>Offline benchmarks like MLE-Bench are useful, but can’t capture the volatility of a live leaderboard or the challenge of competing on a completely out-of-distribution problem. At Autoscience, we believe that one of the most critical tests for an AI Scientist is its performance in the wild.</p>

      <p>So, we entered Mira – a system powered by our Automated Academic Researcher Carl that works without human intervention beyond an initial setup – into a live $50k Kaggle competition. Through iterative improvements, Mira has won a Silver Medal.</p>

      <p>But we are just getting started: if you’ve used automated systems to score highly on live ML tasks and haven't heard from us yet, please send us a description of what you’ve built to talent@autoscience.ai and we'll be in contact with you shortly.</p>

      <p>We'll continue to share updates on Mira's leaderboard performance as it evolves.</p>

      <hr>

      <h2>Get access</h2>

      <p>Mira doesn't just compete in Kaggle – it accelerates your team's machine learning research.</p>

      <p>From discovering new architectures to pushing performance beyond what human researchers can do alone, Mira expands what's possible in applied ML.</p>

      <p>Click below to contact our team about trying Mira or email sales@autoscience.ai.</p>

      <p><a href="/get-started" class="btn btn-primary">Get Started</a></p>

      <h2>Build with us</h2>

      <p>Define the future of research with us. Apply below or email hiring@autoscience.ai.</p>

      <p><a href="https://jobs.ashbyhq.com/autoscience" class="btn btn-primary" target="_blank">Apply Here</a></p>

      <h2>Stay in the loop</h2>

      <p>Follow us on <a href="https://x.com/AutoScienceAI" target="_blank">X</a> and <a href="https://www.linkedin.com/company/autoscienceai/" target="_blank">LinkedIn</a> for more updates.</p>
    `,
  },
  {
    slug: "carl-full-paper",
    title: "Carl Generates First Full-Length Peer-Reviewed Paper",
    description: "An AI-generated full-length paper accepted by an ICLR 2025 workshop.",
    date: "March 2025", category: "Research",
    paperCarousel: true,
    buttons: [
      {
        label: "Read the Paper",
        url: "https://drive.google.com/file/d/1BI9vDZWcke9Z9duc8GzgMiN29S1-1G25/view?usp=drive_link",
      },
    ],
    body: `
      <p>We're excited to share Carl's first full-length paper generated end-to-end to pass peer review. This builds on our work from last week where we announced the first AI-generated paper to pass peer review.</p>
      <p>Carl, our new AI system, successfully ideated novel scientific hypotheses, designed and performed experiments, and wrote multiple academic papers that passed peer review at workshops in the International Conference on Learning Representations (ICLR). This milestone marked Carl as the first AI system to produce academically peer-reviewed research. Carl now also has passed a full-length research paper through peer review, further demonstrating the potential of AI in advancing scientific knowledge.</p>
      <p>The concept for this paper originated with Carl and was initially introduced in the "first paper," referenced in our Carl Technical Report. This new paper is built on the same idea, but the code was developed and executed by a more advanced version of Carl. In the original version of the first paper, some text was human-written, with one specific section authored by AI. In this newly accepted paper, the only human edits were limited to citations and formatting. Leveraging Carl's enhanced capabilities, the paper was submitted to a full-length track at an ICLR workshop—which has far more stringent acceptance standards—rather than a Tiny Paper track. Every review for the paper exceeded the acceptance threshold, marking a significant milestone in automated AI research.</p>
      <p>Please take a look at our Technical Report for a description of the limitations and ethical considerations for the Carl system.</p>
      <h2>Looking Forward</h2>
      <p>As we continue to develop more sophisticated AI systems, the possibilities for research automation become increasingly exciting. The future holds promise for even more efficient and effective scientific discovery processes.</p>
      <p>Stay tuned for more updates on the latest developments in AI research automation.</p>
    `,
  },
  {
    slug: "meet-carl",
    title: "Meet Carl: The First AI System To Produce Academically Peer-Reviewed Research",
    description: "Introducing Carl, the AI system that authored academically peer-reviewed research.",
    date: "March 2025", category: "Research",
    paperEmbedUrl: "https://drive.google.com/file/d/1XOkAgdg7OjIYeSClijrhMC2i7ijdnD7Y/preview",
    buttons: [
      {
        label: "Technical Report",
        url: "https://drive.google.com/file/d/1iVedOdZDuEdjS4lcm9Z7i8oEDGWfzVJq/view",
      },
      {
        label: "Link to Research",
        url: "https://drive.google.com/file/d/1XOkAgdg7OjIYeSClijrhMC2i7ijdnD7Y/view",
      },
    ],
    body: `
      <p>We are launching the Autoscience Institute, a research lab that builds AI systems to improve AI systems. Our first step towards that vision, Carl, generated research papers accepted through double-blind peer reviews at a workshop in the International Conference on Learning Representations (ICLR) with no substantive human involvement.</p>

      <p>We're excited to introduce Carl, our new AI system that successfully ideated novel scientific hypotheses, designed and performed experiments, and wrote multiple academic papers that passed peer review at workshops in the International Conference on Learning Representations (ICLR) on the Tiny Papers track. This milestone marks Carl as the first AI system to produce academically peer-reviewed research, demonstrating the potential of AI in advancing scientific knowledge.</p>

      <h2>What is Carl</h2>
      <p>Carl is an automated research scientist designed to conduct novel academic research in the field of artificial intelligence. Building on recently released language models, Carl can ideate, hypothesize, cite, and draw connections across a wide array of research topics in the field of Artificial Intelligence. Unlike human researchers, Carl can read any published paper in seconds, so is always up to date on the latest science. Carl also works nonstop, monitoring ongoing projects at all times of day, reducing experimental costs, and shortening iteration time.</p>

      <h2>Carl's Research Process</h2>
      <p>Carl operates through a meticulous three-stage research process:</p>
      <p><strong>Ideation and Hypothesis Formation:</strong> Starting with existing research papers, Carl explores potential future research directions. He generates ideas based on related literature and formulates research hypotheses.</p>
      <p><strong>Experimentation:</strong> Carl writes code that tests his hypotheses and creates figures to visualize his results.</p>
      <p><strong>Presentation:</strong> Carl uses these results to write an academic paper that details his findings.</p>

      <h2>Limited Human Intervention</h2>
      <p>While Carl is capable of operating autonomously, there are specific points in his research process where human intervention is recommended:</p>
      <p><strong>Greenlighting:</strong> To reduce computational costs associated with generating papers, we require that Carl get a human to provide a "continue" signal (or a "stop" signal) at various points in the process before proceeding. At these checkpoints, humans did not provide feedback on his research in any way except for this signal.</p>
      <p><strong>Citations and Formatting:</strong> The Autoscience team manually edited the citations and LaTeX formatting in the papers to provide the highest possible standard of academic attribution and to match the venue's style guide.</p>
      <p><strong>Pre-API Models:</strong> OpenAI's o1-pro and Deep Research models which offer clear improvements to Carl's work do not have APIs available yet. We provided Carl with manual copy/paste assistance so he could access these models. This will become unnecessary when APIs are made available for these models.</p>
      <p><strong>Carl's First Paper:</strong> In Carl's first paper, researchers needed to write the related works section and add polish to the final language. After applying an update, his following papers didn't have this intervention.</p>

      <h2>Verification and Validation</h2>
      <p>Before submitting Carl's papers, we rigorously reviewed Carl's research to ensure respect for the standards of research submissions for the ICLR workshops. This included reading every line of code, rerunning experiments to ensure reproducibility, and conducting novelty checks to evaluate the originality of the ideas presented compared to existing publications. A hackathon with community members from institutions including the Massachusetts Institute of Technology, Stanford University, and U.C. Berkeley then verified Carl's AI-generated results. The papers also passed two plagiarism checkers and a citation checker to reduce the likelihood of accidental academic violations.</p>

      <h2>What's Next</h2>
      <p>We expect that Carl's submission of peer-reviewed papers will raise questions about the role of AI-generated research in academic settings. At Autoscience, we believe that legitimate results should be added to the public knowledge base, regardless of where they originated. If research meets the scientific standards set by the academic community, then who – or what – created it should not lead to automatic disqualification. We also believe, however, that proper attribution is necessary for transparent science, and work purely generated by AI systems should be discernible from that produced by humans.</p>
      <p>Recognizing that the organizers of the upcoming ICLR workshops may not have sufficient time to thoughtfully establish and implement new standards and procedures appropriately geared toward autonomous AI scientists, Autoscience has since withdrawn its accepted papers from the ICLR workshops. To accommodate AI-generated research at future conferences, we plan to propose a workshop at NeurIPS 2025 that accommodates submissions from autonomous research systems.</p>

      <h2>Join Us</h2>
      <p>Join us in shaping the future of AI research! We are hiring human research scientists and engineers, with expertise in automated research, custom reasoning models, and scaling ML systems. If our work excites you, please apply below or email us at hiring@autoscience.ai.</p>
      <p><a href="https://jobs.ashbyhq.com/autoscience" class="btn btn-primary" target="_blank">Apply Here</a></p>
      <p><em>The Autoscience Team</em></p>
    `,
  },
];

const Blog = () => {
  const featured = BLOG_POSTS.find(p => p.featured);
  const others = BLOG_POSTS.filter(p => !p.featured);
  return (
    <div className="pg">
      <style dangerouslySetInnerHTML={{ __html: PAGES_CSS }} />
      <Nav accent="#C1FA1D" ctaLabel="Book a demo" ctaVariant="violet" />

      <section className="pg-hero pg-hero--compact pg-hero--center">
        <div className="pg-hero__bg" />
        <div className="pg-hero__inner">
          <h1 className="pg-hero__title">
            Insights &amp; updates.
          </h1>
          <p className="pg-hero__sub">
            Thoughts on AI research, machine learning, and building tools for discovery.
          </p>
        </div>
      </section>

      <section className="pg-section pg-section--tight">
        <a href={`/blog/${featured.slug}`} className="pg-featured">
          <div>
            <p className="pg-featured__cat">{featured.category}</p>
            <h2 className="pg-featured__t">{featured.title}</h2>
            <p className="pg-featured__d">{featured.description}</p>
            <span className="pg-featured__date">{featured.date}</span>
          </div>
          <div className="pg-featured__img">
            <img src={featured.image} alt={featured.title} />
          </div>
        </a>
      </section>

      <section className="pg-section">
        <p className="pg-label">Past posts</p>
        <div className="pg-posts">
          {others.map(p => (
            <a key={p.slug} href={`/blog/${p.slug}`} className="pg-post">
              <span className="pg-post__cat">{p.category}</span>
              <h3 className="pg-post__t">{p.title}</h3>
              <p className="pg-post__d">{p.description}</p>
              <span className="pg-post__date">{p.date}</span>
            </a>
          ))}
        </div>
      </section>

      <Footer accent="#C1FA1D" />
    </div>
  );
};

const BlogPost = () => {
  const slug = window.location.pathname.replace(/^\/blog\//, "").replace(/\/$/, "");
  const post = BLOG_POSTS.find(p => p.slug === slug);
  if (!post) {
    return (
      <div className="pg">
        <style dangerouslySetInnerHTML={{ __html: PAGES_CSS }} />
        <Nav accent="#C1FA1D" ctaLabel="Book a demo" ctaVariant="violet" />
        <div className="pg-post-body">
          <a href="/blog" className="pg-post-body__back">← Back to blog</a>
          <h1 className="pg-post-body__title">Post not found.</h1>
        </div>
        <Footer accent="#C1FA1D" />
      </div>
    );
  }
  return (
    <div className="pg">
      <style dangerouslySetInnerHTML={{ __html: PAGES_CSS }} />
      <Nav accent="#C1FA1D" ctaLabel="Book a demo" ctaVariant="violet" />
      <article className="pg-post-body">
        <a href="/blog" className="pg-post-body__back">← Back to blog</a>
        <p className="pg-post-body__cat">{post.category}</p>
        <h1 className="pg-post-body__title">{post.title}</h1>
        <p className="pg-post-body__meta">{post.postDate || post.date}</p>
        {post.subheading && <p className="pg-post-body__subheading">{post.subheading}</p>}
        {post.buttons && post.buttons.length > 0 && (
          <div className="pg-post-body__actions">
            {post.buttons.map((b) => (
              <a
                key={b.url}
                className="pill-btn pill-btn--violet"
                href={b.url}
                target="_blank"
                rel="noopener noreferrer"
              >
                {b.label} <span style={{ opacity: 0.7 }}>→</span>
              </a>
            ))}
          </div>
        )}
        {post.paperCarousel && (
          <div className="pg-post-body__paper">
            <PaperCarousel />
          </div>
        )}
        {post.paperEmbedUrl && (
          <div className="pg-post-body__paper">
            <iframe
              className="pg-post-body__paper-embed"
              src={post.paperEmbedUrl}
              title={`${post.title} paper`}
              allow="autoplay"
            />
          </div>
        )}
        <div className="pg-post-body__content" dangerouslySetInnerHTML={{ __html: post.body }} />
      </article>
      <Footer accent="#C1FA1D" />
    </div>
  );
};

/* ============================================================
   GET STARTED
   ============================================================ */
const GetStarted = ({ emailjsServiceId, emailjsTemplateId, emailjsUserId }) => {
  const [status, setStatus] = React.useState("idle");
  const onSubmit = async (e) => {
    e.preventDefault();
    const form = e.currentTarget;
    const fields = form.elements;
    setStatus("sending");

    const templateParams = {
      from_name: fields.name.value,
      from_email: fields.email.value,
      company: fields.company.value,
      role: fields.role.value,
      interest: fields.interest.value,
      message: fields.message.value,
      reply_to: fields.email.value,
    };

    try {
      window.emailjs.init(emailjsUserId);
      await window.emailjs.send(emailjsServiceId, emailjsTemplateId, templateParams);
      form.reset();
      setStatus("sent");
    } catch (error) {
      console.error("EmailJS error:", error);
      setStatus("error");
    }
  };
  return (
    <div className="pg">
      <style dangerouslySetInnerHTML={{ __html: PAGES_CSS }} />
      <Nav accent="#C1FA1D" ctaLabel="Book a demo" ctaVariant="violet" />

      <section className="pg-hero pg-hero--center">
        <div className="pg-hero__bg" />
        <div className="pg-hero__inner">
          <h1 className="pg-hero__title"><em>Get started</em>.</h1>
          <p className="pg-hero__sub">
            Give the best AI tools to your AI teams.
          </p>
        </div>
      </section>

      <section className="pg-section">
        {status === "sent" ? (
          <div className="pg-form">
            <div className="pg-form__status">
              Thank you. Your message has been sent — we'll be in touch soon.
            </div>
          </div>
        ) : (
          <form className="pg-form" onSubmit={onSubmit}>
            <div className="pg-form__row">
              <label className="pg-form__label" htmlFor="gs-name">Name</label>
              <input className="pg-form__input" id="gs-name" name="name" type="text" required />
            </div>
            <div className="pg-form__row">
              <label className="pg-form__label" htmlFor="gs-email">Email</label>
              <input className="pg-form__input" id="gs-email" name="email" type="email" required />
            </div>
            <div className="pg-form__row">
              <label className="pg-form__label" htmlFor="gs-company">Company / Institution</label>
              <input className="pg-form__input" id="gs-company" name="company" type="text" />
            </div>
            <div className="pg-form__row">
              <label className="pg-form__label" htmlFor="gs-role">Your Role</label>
              <input className="pg-form__input" id="gs-role" name="role" type="text" placeholder="e.g., Research Scientist, ML Engineer" />
            </div>
            <div className="pg-form__row">
              <label className="pg-form__label" htmlFor="gs-interest">What are you interested in?</label>
              <select className="pg-form__select" id="gs-interest" name="interest" defaultValue="">
                <option value="" disabled>Select an option</option>
                <option value="mira">Mira — ML Research Agent</option>
                <option value="carl">Carl — Research Synthesis</option>
                <option value="both">Both products</option>
                <option value="other">Other / General inquiry</option>
              </select>
            </div>
            <div className="pg-form__row">
              <label className="pg-form__label" htmlFor="gs-message">What are you trying to model</label>
              <textarea className="pg-form__textarea" id="gs-message" name="message" rows="5" placeholder="What research challenges are you looking to solve?" />
            </div>
            <button type="submit" className="pill-btn pill-btn--violet pg-form__submit" disabled={status === "sending"}>
              {status === "sending" ? "Sending..." : "Submit"} <span style={{ opacity: 0.7 }}>→</span>
            </button>
            {status === "error" && (
              <div className="pg-form__status pg-form__status--error" role="alert">
                Oops. Something went wrong. Please try again or email us directly.
              </div>
            )}
          </form>
        )}
      </section>

      <Footer accent="#C1FA1D" />
    </div>
  );
};

Object.assign(window, { Blog, BlogPost, Careers, Carl, GetStarted });
