:root {
  --ll-color-metal-025: #fdfefe;
  --ll-color-metal-050: #fafbfc;
  --ll-color-metal-100: #f5f7f8;
  --ll-color-metal-400: #dce3e7;
  --ll-color-metal-500: #ccd6dd;
  --ll-color-metal-700: #66757f;
  --ll-color-metal-950: #292f33;
  --ll-color-blue-800: #0b2d46;
  --ll-color-blue-700: #226699;
  --ll-color-blue-300: #9bc7e3;
  --ll-color-blue-200: #c0dff0;
  --ll-color-blue-100: #e8f1f7;
  --ll-color-red-800: #861122;
  --ll-color-red-700: #be1931;
  --ll-color-red-500: #ea596e;
  --ll-color-red-100: #fbe9ec;
  --ll-color-canvas: var(--ll-color-metal-050);
  --ll-color-surface-raised: var(--ll-color-metal-025);
  --ll-color-text: var(--ll-color-metal-950);
  --ll-color-text-muted: var(--ll-color-metal-700);
  --ll-color-border: var(--ll-color-metal-400);
  --ll-color-border-strong: var(--ll-color-metal-500);
  --ll-color-primary: var(--ll-color-blue-700);
  --ll-color-primary-depth: var(--ll-color-blue-800);
  --ll-color-brand: var(--ll-color-red-700);
  --ll-color-brand-bright: var(--ll-color-red-500);
  --ll-color-brand-ink: var(--ll-color-red-800);
  --ll-font-sans: "Instrument Sans", "Avenir Next", "Segoe UI", sans-serif;
  --ll-font-mono: "Commit Mono", "SFMono-Regular", Consolas, monospace;
  --page-pad: clamp(1.25rem, 3.3vw, 4rem);
  --content: 1440px;
  --radius-sm: 0.625rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ll-color-text);
  background: var(--ll-color-canvas);
  font-family: var(--ll-font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
::selection { color: white; background: var(--ll-color-brand); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
code { font-family: var(--ll-font-mono); }

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 100;
  padding: .65rem 1rem;
  border-radius: var(--radius-sm);
  color: white;
  background: var(--ll-color-primary-depth);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.brand { display: inline-flex; align-items: center; gap: .58rem; width: max-content; font-weight: 760; letter-spacing: -.035em; }
.brand-mark { display: grid; width: 2.65rem; height: 2.25rem; flex: none; place-items: center; }
.brand-mark img { width: 2.65rem; max-width: none; filter: drop-shadow(0 5px 5px rgba(41,47,51,.12)); }
.brand-wordmark { display: flex; flex-direction: column; font-size: .82rem; line-height: .86; }
.brand-wordmark > span:last-child { color: var(--ll-color-primary); }
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(28rem, .92fr);
  align-items: center;
  min-height: 100svh;
  padding: 8.5rem max(var(--page-pad), calc((100vw - var(--content)) / 2)) 6.5rem;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(11, 45, 70, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 45, 70, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black 30%, transparent 90%);
}
.hero::after {
  content: "";
  position: absolute;
  width: 42rem;
  height: 42rem;
  right: -12rem;
  top: -13rem;
  z-index: -1;
  border-radius: 50%;
  background: var(--ll-color-red-100);
  filter: blur(6px);
}
.eyebrow, .section-kicker { color: var(--ll-color-primary); font-size: .73rem; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.6rem; }
.eyebrow span { width: 2rem; height: 2px; background: var(--ll-color-brand); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { margin-bottom: 0; font-weight: 690; letter-spacing: -.062em; line-height: .98; }
h1 { max-width: 900px; font-size: clamp(4rem, 6.5vw, 7.3rem); }
h2 { font-size: clamp(3rem, 5.3vw, 6.2rem); }
h1 em { color: var(--ll-color-primary); font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.055em; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.5rem; padding: .95rem 1.15rem; border-radius: .72rem; font-size: .86rem; font-weight: 720; transition: transform .22s var(--ease-out), box-shadow .22s ease, background .22s ease; }
.button:hover { transform: translateY(-3px); }

/* Centered conversion hero */
.hero {
  display: flex;
  min-height: 100svh;
  padding: 9.5rem max(var(--page-pad), calc((100vw - var(--content)) / 2)) 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.hero::after {
  top: -36rem;
  right: auto;
  left: 50%;
  width: 78rem;
  height: 58rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--ll-color-red-100) 0, rgba(251, 233, 236, .7) 36%, transparent 72%);
  filter: none;
}
.hero-copy {
  position: relative;
  z-index: 4;
  display: flex;
  max-width: 1180px;
  flex-direction: column;
  align-items: center;
}
.hero h1 {
  max-width: 1180px;
  text-wrap: balance;
}

/* Compact hero: the product enters the first viewport */
.hero {
  min-height: clamp(25rem, 46svh, 29rem);
  padding-top: 4.9rem;
}
.hero::after {
  top: -31rem;
  width: 65rem;
  height: 48rem;
}
.hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(25rem, .9fr);
  width: 100%;
  min-height: clamp(23rem, 42svh, 26rem);
  align-items: center;
}
.title-orbit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 48%;
  height: 100%;
  border: 0;
  background: transparent;
  pointer-events: none;
}
.hero-copy { max-width: 680px; align-items: flex-start; justify-self: start; text-align: left; }
.hero h1 {
  max-width: 680px;
  font-size: clamp(3rem, 4.25vw, 4.45rem);
  line-height: .96;
}

.product-peek {
  position: relative;
  z-index: 3;
  padding: 1.2rem max(var(--page-pad), calc((100vw - var(--content)) / 2)) 0;
  overflow: hidden;
  border-top: 1px solid var(--ll-color-border);
  background: var(--ll-color-surface-raised);
}
.product-peek-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: .8rem;
  color: var(--ll-color-text-muted);
  font-family: var(--ll-font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.product-window {
  height: clamp(36rem, 48vw, 45rem);
  overflow: hidden;
  border: 1px solid var(--ll-color-border);
  border-bottom: 0;
  border-radius: 1.25rem 1.25rem 0 0;
  background: var(--ll-color-metal-050);
  box-shadow: 0 22px 65px rgba(41, 47, 51, .11);
}
.product-window-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 2.7rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--ll-color-border);
  background: var(--ll-color-metal-100);
  color: var(--ll-color-text-muted);
  font-size: .7rem;
}
.product-window-bar > span:nth-child(2) { font-weight: 700; }
.product-window-bar code { justify-self: end; font-size: .6rem; }
.product-window-dots { display: flex; gap: .35rem; }
.product-window-dots i { width: .48rem; height: .48rem; border-radius: 50%; background: var(--ll-color-metal-500); }
.product-window-dots i:first-child { background: var(--ll-color-brand-bright); }
.product-window-dots i:nth-child(2) { background: var(--ll-color-blue-300); }
.product-app { display: grid; grid-template-columns: 4.2rem 1fr; min-height: calc(100% - 2.7rem); }
.product-sidebar {
  display: flex;
  align-items: center;
  padding: 1rem .6rem;
  flex-direction: column;
  gap: .9rem;
  border-right: 1px solid var(--ll-color-border);
  background: var(--ll-color-surface-raised);
  color: var(--ll-color-text-muted);
}
.product-sidebar img { width: 3.15rem; height: 2.45rem; margin: -.15rem 0 .55rem; object-fit: contain; filter: drop-shadow(0 4px 3px rgba(41,47,51,.15)); }
.product-sidebar span { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .65rem; }
.product-sidebar svg { width: 1.15rem; height: 1.15rem; }
.product-sidebar span.is-active { color: var(--ll-color-primary-depth); background: var(--ll-color-blue-100); }
.product-sidebar span:last-child { margin-top: .35rem; box-shadow: 0 -1.05rem 0 -.98rem var(--ll-color-border); }
.product-content { min-width: 0; padding: 1rem 2rem 3rem; }
.product-toolbar { display: flex; align-items: center; gap: .65rem; color: var(--ll-color-text-muted); font-family: var(--ll-font-mono); font-size: .58rem; }
.product-toolbar > span:not(:last-child)::after { content: "·"; margin-left: .65rem; color: var(--ll-color-border-strong); }
.product-toolbar .product-live { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem; border-radius: 99px; color: #147653; background: #e5f6ef; font-family: var(--ll-font-sans); font-weight: 750; }
.product-toolbar .product-live::after { content: none; }
.product-toolbar .product-live i { width: .38rem; height: .38rem; border-radius: 50%; background: #1ea672; box-shadow: 0 0 0 3px rgba(30,166,114,.12); animation: live-pulse 1.8s ease-in-out infinite; }
.product-title-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; padding: 1.35rem 0 1.25rem; }
.product-title-row small { color: var(--ll-color-primary); font-size: .65rem; font-weight: 700; }
.product-title-row h2 { margin: .4rem 0 .3rem; font-size: clamp(1.8rem, 2.7vw, 2.65rem); line-height: 1; letter-spacing: -.05em; }
.product-title-row p { margin: 0; color: var(--ll-color-text-muted); font-size: .85rem; }
.product-runtime { display: grid; grid-template-columns: 1.1fr 1fr .8fr 1.25fr; overflow: hidden; margin-bottom: 1rem; border: 1px solid #16415e; border-radius: .8rem; color: #f7fcff; background: linear-gradient(112deg, #071f32, #0b3957); box-shadow: 0 10px 28px rgba(11,45,70,.16); }
.product-runtime span { display: flex; padding: .72rem .85rem; flex-direction: column; gap: .22rem; border-right: 1px solid rgba(192,223,240,.2); font-family: var(--ll-font-mono); font-size: .65rem; font-weight: 650; line-height: 1.25; }
.product-runtime span:last-child { border: 0; }
.product-runtime b { color: #bfe5fa; font-size: .55rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.product-runtime-tool i { display: flex; align-items: center; gap: .38rem; font-style: normal; }
.product-runtime-tool img { width: 1.05rem; height: 1.05rem; object-fit: contain; }
.product-canvas { position: relative; min-height: 24rem; padding: 2.25rem 2rem; overflow: hidden; border: 1px solid rgba(192,223,240,.65); border-radius: 2.25rem 2.25rem .8rem .8rem; background: radial-gradient(circle at 50% 0, rgba(231,244,251,.82), transparent 35%), white; text-align: center; }
.product-canvas::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(var(--ll-color-blue-300) .7px, transparent .7px); background-size: 16px 16px; pointer-events: none; }
.product-canvas > * { position: relative; }
.product-canvas-label { position: absolute; top: .72rem; left: 1rem; padding: .24rem .52rem; border-radius: 99px; color: var(--ll-color-primary); background: var(--ll-color-blue-100); font-size: .58rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.product-input { display: inline-flex; padding: .38rem .75rem; border: 1px dashed var(--ll-color-border-strong); border-radius: 99px; font-size: .66rem; }
.product-connector { display: block; height: 2rem; color: var(--ll-color-blue-300); line-height: 2rem; }
.product-flow { display: grid; grid-template-columns: 1fr auto 1fr auto .82fr; align-items: stretch; gap: .7rem; max-width: 1040px; margin: auto; }
.product-flow > span { align-self: center; color: var(--ll-color-primary); }
.product-flow article { display: flex; min-height: 11.6rem; padding: 1rem; flex-direction: column; align-items: flex-start; justify-content: space-between; border: 1px solid var(--ll-color-border); border-radius: 1rem; background: rgba(247,249,250,.96); box-shadow: 0 10px 22px rgba(41,47,51,.055); text-align: left; }
.product-flow article small { color: var(--ll-color-text-muted); font-family: var(--ll-font-mono); font-size: .55rem; text-transform: uppercase; }
.product-flow article strong { max-width: 12rem; font-size: 1rem; line-height: 1.15; letter-spacing: -.03em; }
.product-flow article p { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.product-flow article p span { padding: .3rem .48rem; border: 1px solid #c5ddea; border-radius: 99px; color: #0b2d46; background: #eef7fc; font-size: .58rem; font-weight: 700; line-height: 1; }
.product-flow article p .product-chip { display: inline-flex; align-items: center; gap: .28rem; }
.product-flow article p .product-chip img { width: .78rem; height: .78rem; object-fit: contain; }
.product-flow article p .product-chip-model { border-color: #bfd4e0; background: #fff; }
.product-flow article p .product-chip-done { color: #0b6043; border-color: #9ed4c0; background: #e6f7f0; }
.product-flow article p .product-chip-live { color: #0b4f7c; border-color: #9bc9e4; background: #e4f3fb; }
.product-flow article p .product-chip-waiting { color: #7d2938; border-color: #efb5bf; background: #fff; }
.product-flow article p .product-chip-required { color: #fff; border-color: #9b1730; background: #9b1730; }
.product-flow .product-step-done { border-color: #9fd8c4; }
.product-flow .product-step-live { border-color: var(--ll-color-primary); box-shadow: 0 0 0 3px rgba(34,102,153,.1), 0 14px 28px rgba(34,102,153,.1); }
.product-flow .product-gate { border-color: var(--ll-color-red-500); background: var(--ll-color-red-100); }
.product-flow .product-gate p span { color: var(--ll-color-brand-ink); background: white; }
.product-agent { display: flex; align-items: center; gap: .55rem; }
.product-agent > b { display: grid; width: 2rem; height: 2rem; overflow: hidden; place-items: center; border: 1px solid var(--ll-color-border); border-radius: .58rem; color: white; background: white; font-size: .54rem; letter-spacing: .04em; }
.product-step-done .product-agent > b { background: #18845f; }
.product-agent > b.product-model-icon { background: #f8fbff; }
.product-agent > b.product-model-anthropic { background: #f3f1e8; }
.product-model-icon img { width: 1.45rem; height: 1.45rem; object-fit: contain; }
.product-agent > span { display: flex; flex-direction: column; }
.product-agent em { font-style: normal; font-size: .74rem; font-weight: 800; }
.product-agent small { margin-top: .08rem; color: #536a78 !important; font-size: .5rem !important; text-transform: none !important; }
.product-reviewers { display: flex !important; flex-direction: row !important; padding-left: .35rem; }
.product-reviewers i { display: grid; width: 2rem; height: 2rem; margin-left: -.35rem; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--ll-color-primary); box-shadow: 0 2px 7px rgba(55,4,12,.16); font-size: .52rem; font-style: normal; font-weight: 800; }
.product-reviewers i:last-child { color: var(--ll-color-brand-ink); background: var(--ll-color-brand-bright); }
.product-outcomes { display: flex; justify-content: center; gap: .5rem; margin-top: 1.2rem; }
.product-outcomes span { padding: .3rem .55rem; border: 1px solid var(--ll-color-border); border-radius: 99px; color: var(--ll-color-text-muted); background: var(--ll-color-metal-050); font-size: .55rem; }
.product-outcomes .is-current { color: var(--ll-color-primary); border-color: var(--ll-color-blue-300); background: var(--ll-color-blue-100); }

@keyframes live-pulse { 50% { opacity: .45; transform: scale(.82); } }

.section { padding: clamp(6rem, 10vw, 10rem) max(var(--page-pad), calc((100vw - var(--content)) / 2)); }
.section-kicker { padding-bottom: 1.2rem; border-bottom: 1px solid var(--ll-color-border); }
.closing { position: relative; display: flex; min-height: 85vh; padding: 8rem var(--page-pad); flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: white; background: var(--ll-color-primary-depth); text-align: center; }
.closing::before { content: ""; position: absolute; width: min(70vw, 55rem); aspect-ratio: 1; border: 1px dashed rgba(155,199,227,.25); border-radius: 50%; }
.closing::after { content: ""; position: absolute; width: min(45vw, 34rem); aspect-ratio: 1; border: 1px solid rgba(155,199,227,.12); border-radius: 50%; }
.closing > * { position: relative; z-index: 1; }
.closing .eyebrow { color: var(--ll-color-blue-300); }
.closing h2 { font-size: clamp(3.5rem, 7.8vw, 8.5rem); }
.closing-emphasis { max-width: 760px; margin: 1.5rem 0 2.5rem; color: var(--ll-color-blue-200); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.3rem, 2.4vw, 2.1rem); font-style: italic; }
.button-light { color: var(--ll-color-primary-depth); background: white; }

footer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2rem; padding: 1.6rem max(var(--page-pad), calc((100vw - var(--content)) / 2)); border-top: 1px solid var(--ll-color-border); background: var(--ll-color-surface-raised); }
footer p { margin: 0; color: var(--ll-color-text-muted); font-family: var(--ll-font-mono); font-size: .58rem; }
.brand-footer { font-size: .84rem; }

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.hero .reveal { opacity: 1; transform: none; }
.hero .reveal:nth-child(2) { transition-delay: .12s; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr .78fr; }
  .hero-stage { grid-template-columns: minmax(0, 1fr) minmax(20rem, .9fr); }
}

@media (max-width: 780px) {
  .brand { font-size: .88rem; }
  .brand-mark { width: 2.35rem; height: 2rem; }
  .brand-mark img { width: 2.35rem; }
  .brand-wordmark { font-size: .76rem; }
  .hero { display: flex; min-height: auto; padding-top: 5.1rem; flex-direction: column; align-items: stretch; }
  h1 { font-size: clamp(3.25rem, 14vw, 5.3rem); }
  h2 { font-size: clamp(3rem, 13.5vw, 4.7rem); }
  .hero-stage { grid-template-columns: 1fr; min-height: 23rem; }
  .title-orbit { top: -2rem; right: -18%; bottom: auto; width: 44%; height: 15rem; opacity: .9; }
  .hero-copy { width: 100%; max-width: none; align-items: flex-start; }
  .hero h1 { max-width: calc(100vw - 1.5rem); font-size: clamp(2.02rem, 8.55vw, 2.48rem); letter-spacing: -.06em; text-align: left; }
  .product-peek { padding: .9rem .75rem 0; }
  .product-peek-heading span:last-child { display: none; }
  .product-window { height: 29rem; border-radius: .9rem .9rem 0 0; }
  .product-app { width: 181.82%; min-height: 49rem; transform: scale(.55); transform-origin: top left; }
  .section { padding-block: 6rem; }
  .closing { min-height: 80vh; }
  footer { grid-template-columns: 1fr; gap: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}


/* Simple product story */
.steps-section,
.simple-features {
  padding-block: clamp(4.5rem, 7vw, 7rem);
}
.steps-section { background: var(--ll-color-metal-100); }
.simple-features { background: var(--ll-color-surface-raised); }
.simple-section-heading { max-width: 54rem; }
.simple-section-heading .section-kicker {
  width: min(100%, 32rem);
  margin: 0 0 1.15rem;
  padding-bottom: .7rem;
  color: var(--ll-color-primary);
  font-size: .6rem;
}
.simple-section-heading h2 {
  max-width: 50rem;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
}
.steps-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  margin: clamp(3rem, 5vw, 5rem) 0 0;
  padding: 0;
  list-style: none;
}
.steps-list li {
  padding-top: 1.2rem;
  border-top: 1px solid var(--ll-color-border);
}
.steps-list li > span {
  color: var(--ll-color-primary);
  font-family: var(--ll-font-mono);
  font-size: 1.2rem;
  font-weight: 850;
  letter-spacing: -.04em;
}
.steps-list h3 {
  margin: 1.35rem 0 .6rem;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}
.steps-list p,
.simple-feature-grid p {
  margin: 0;
  color: #4c606c;
  font-size: .9rem;
  line-height: 1.55;
}
.simple-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2.5rem, 7vw, 7rem);
  margin-top: clamp(3rem, 5vw, 5rem);
  border-bottom: 1px solid var(--ll-color-border);
}
.simple-feature-grid article {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 8.5rem;
  padding: 1.55rem 0;
  border-top: 1px solid var(--ll-color-border);
}
.simple-feature-grid h3 {
  margin: 0 0 .55rem;
  font-size: clamp(1.08rem, 1.55vw, 1.35rem);
  line-height: 1.18;
  letter-spacing: -.035em;
}
.closing {
  min-height: clamp(28rem, 55vh, 38rem);
  padding-block: 6rem;
}
.closing::before,
.closing::after { display: none; }
.closing h2 { font-size: clamp(3rem, 6vw, 6rem); }

@media (max-width: 780px) {
  .steps-list,
  .simple-feature-grid { grid-template-columns: 1fr; }
  .steps-list { gap: 2.25rem; }
  .simple-feature-grid { border-bottom: 0; }
  .simple-feature-grid article { min-height: 0; }
  .simple-section-heading h2 { font-size: clamp(2rem, 9vw, 3.15rem); }
}

/* Interactive feature pairs: copy + a small, functional visual */
.simple-feature-grid {
  column-gap: clamp(2rem, 4.5vw, 4.5rem);
}
.simple-feature-grid .feature-item {
  grid-template-columns: minmax(0, 1.12fr) minmax(10.5rem, .88fr);
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.8rem);
  min-height: 12.25rem;
}
.feature-text { min-width: 0; }
.feature-demo {
  position: relative;
  min-height: 8.8rem;
  overflow: hidden;
  border: 1px solid var(--ll-color-blue-200);
  border-radius: .9rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(238, 246, 251, .72)),
    var(--ll-color-blue-100);
  box-shadow: 0 8px 22px rgba(12, 51, 76, .045);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease-out);
}
.feature-item:hover .feature-demo {
  border-color: var(--ll-color-blue-300);
  box-shadow: 0 16px 34px rgba(12, 51, 76, .1);
  transform: translateY(-3px);
}

/* Harnesses */
.demo-harnesses {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(3.7rem, 1fr);
  gap: .6rem;
  padding: .68rem;
}
.harness-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  place-items: center;
  gap: .42rem;
}
.harness-option {
  position: relative;
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  box-sizing: border-box;
  overflow: hidden;
  place-items: center;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--ll-color-metal-950);
  box-shadow: 0 0 0 1px var(--ll-color-border);
  opacity: .5;
}
.harness-option img,
.harness-option b {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}
.harness-option img {
  z-index: 1;
  display: block;
  object-fit: cover;
  filter: grayscale(1);
}
.harness-option b {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--ll-color-primary-depth);
  font-size: .58rem;
  letter-spacing: -.03em;
}
.harness-option-openclaw { background: var(--ll-color-metal-100); }
.harness-option:first-child { opacity: 1; box-shadow: 0 0 0 2px var(--ll-color-primary); transform: scale(1.08); }
.harness-option:first-child img { filter: none; }
.harness-selection {
  display: flex;
  min-width: 0;
  padding: .55rem 0 .55rem .8rem;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--ll-color-border);
  color: var(--ll-color-text);
  background: transparent;
}
.harness-selection > small { color: #617681; font-family: var(--ll-font-mono); font-size: .48rem; text-transform: uppercase; letter-spacing: .08em; }
.harness-selection > div { position: relative; display: grid; min-height: 3.2rem; margin-top: .35rem; align-items: center; }
.harness-selection strong { grid-area: 1 / 1; color: var(--ll-color-primary-depth); opacity: 0; font-size: clamp(.72rem, 1vw, .92rem); line-height: 1.05; letter-spacing: -.035em; }
.harness-selection strong:first-child { opacity: 1; }
.feature-item:hover .harness-option {
  animation: harness-option-cycle 4.5s linear calc(var(--slot) * .75s) infinite;
}
.feature-item:hover .harness-option:first-child { box-shadow: 0 0 0 1px var(--ll-color-border); transform: none; }
.feature-item:hover .harness-option img { animation: harness-image-cycle 4.5s linear calc(var(--slot) * .75s) infinite; }
.feature-item:hover .harness-selection strong { animation: harness-name-cycle 4.5s linear calc(var(--slot) * .75s) infinite; }
@keyframes harness-option-cycle {
  0%, 14% { opacity: 1; box-shadow: 0 0 0 2px var(--ll-color-primary); transform: scale(1.08); }
  17%, 100% { opacity: .5; box-shadow: 0 0 0 1px var(--ll-color-border); transform: none; }
}
@keyframes harness-image-cycle {
  0%, 14% { filter: none; }
  17%, 100% { filter: grayscale(1); }
}
@keyframes harness-name-cycle {
  0%, 14% { opacity: 1; transform: translateY(0); }
  17%, 100% { opacity: 0; transform: translateY(4px); }
}

/* Expert routing */
.demo-expert {
  display: flex;
  padding: .72rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .52rem;
}
.expert-task {
  padding: .27rem .48rem;
  border-radius: 99px;
  color: #405865;
  background: rgba(155, 199, 223, .2);
  font-family: var(--ll-font-mono);
  font-size: .52rem;
}
.expert-models { display: flex; align-items: center; gap: .42rem; }
.expert-models > span {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  box-sizing: border-box;
  overflow: hidden;
  place-items: center;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--ll-color-metal-950);
  box-shadow: 0 0 0 1px var(--ll-color-border);
  opacity: .48;
}
.expert-models img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.expert-models > span:first-child { opacity: 1; box-shadow: 0 0 0 2px var(--ll-color-primary); transform: scale(1.08); }
.expert-models > span:first-child img { filter: none; }
.expert-selection { position: relative; display: grid; width: 100%; min-height: 2rem; place-items: center; text-align: center; }
.expert-selection > span { grid-area: 1 / 1; display: flex; opacity: 0; flex-direction: column; }
.expert-selection > span:first-child { opacity: 1; }
.expert-selection strong { color: var(--ll-color-primary-depth); font-size: .68rem; letter-spacing: -.02em; }
.expert-selection small { color: #536a77; font-size: .46rem; }
.feature-item:hover .expert-models > span { animation: expert-option-cycle 4s linear calc(var(--slot) * .8s) infinite; }
.feature-item:hover .expert-models > span:first-child { box-shadow: 0 0 0 1px var(--ll-color-border); transform: none; }
.feature-item:hover .expert-models img { animation: expert-image-cycle 4s linear calc(var(--slot) * .8s) infinite; }
.feature-item:hover .expert-selection > span { animation: expert-name-cycle 4s linear calc(var(--slot) * .8s) infinite; }
@keyframes expert-option-cycle {
  0%, 17% { opacity: 1; box-shadow: 0 0 0 2px var(--ll-color-primary); transform: scale(1.08); }
  20%, 100% { opacity: .48; box-shadow: 0 0 0 1px var(--ll-color-border); transform: none; }
}
@keyframes expert-image-cycle {
  0%, 17% { filter: none; }
  20%, 100% { filter: grayscale(1); }
}
@keyframes expert-name-cycle {
  0%, 17% { opacity: 1; transform: none; }
  20%, 100% { opacity: 0; transform: translateY(3px); }
}

/* Runtime targets */
.demo-runtime::before,
.demo-runtime::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 5.6rem);
  height: 1px;
  background: rgba(18, 77, 115, .18);
  transform-origin: center;
}
.demo-runtime::before { transform: translate(-50%, -50%) rotate(28deg); }
.demo-runtime::after { transform: translate(-50%, -50%) rotate(-28deg); }
.demo-runtime span {
  position: absolute;
  z-index: 1;
  min-width: 4.25rem;
  padding: .38rem .48rem;
  border: 1px solid rgba(104, 151, 179, .25);
  border-radius: .5rem;
  color: #405865;
  background: rgba(255, 255, 255, .82);
  font-size: .53rem;
  font-weight: 750;
  text-align: center;
}
.demo-runtime span:nth-of-type(1) { top: .75rem; left: .75rem; }
.demo-runtime span:nth-of-type(2) { top: .75rem; right: .75rem; }
.demo-runtime span:nth-of-type(3) { right: .75rem; bottom: .75rem; }
.demo-runtime span:nth-of-type(4) { bottom: .75rem; left: .75rem; }
.demo-runtime b {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: 3.35rem;
  height: 3.35rem;
  box-sizing: border-box;
  padding: .28rem;
  place-items: center;
  border: 2px solid white;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 1px var(--ll-color-blue-300), 0 7px 18px rgba(18, 77, 115, .15);
  transform: translate(-50%, -50%);
}
.demo-runtime b::after { content: ""; position: absolute; inset: -.18rem; z-index: -1; border: 1px solid var(--ll-color-blue-300); border-radius: 50%; opacity: 0; }
.demo-runtime b img { display: block; width: 100%; height: 100%; object-fit: contain; }
.feature-item:hover .demo-runtime span { border-color: var(--ll-color-primary); color: var(--ll-color-primary); background: white; transition: border-color .3s ease, color .3s ease, background .3s ease; }
.feature-item:hover .demo-runtime b::after { animation: runtime-pulse 1.15s ease-out infinite; }
@keyframes runtime-pulse {
  0% { opacity: .55; transform: scale(.94); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* Recovery */
.demo-resume {
  display: flex;
  padding: 1rem;
  flex-direction: column;
  justify-content: center;
}
.checkpoint-line { position: relative; display: flex; justify-content: space-between; margin-bottom: 1.15rem; }
.checkpoint-line::before,
.checkpoint-line::after { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 2px; background: var(--ll-color-blue-200); transform: translateY(-50%); }
.checkpoint-line::after { right: 68%; background: var(--ll-color-primary); transition: right .7s var(--ease-out); }
.checkpoint-line i { position: relative; z-index: 1; width: .68rem; height: .68rem; border: 2px solid white; border-radius: 50%; background: var(--ll-color-primary); box-shadow: 0 0 0 1px var(--ll-color-blue-300); }
.checkpoint-line .is-failed { background: var(--ll-color-brand-bright); box-shadow: 0 0 0 1px var(--ll-color-brand-bright); }
.demo-resume p { display: flex; align-items: center; justify-content: space-between; }
.demo-resume p span,
.demo-resume small { color: #536a77; font-family: var(--ll-font-mono); font-size: .52rem; }
.demo-resume p strong { color: var(--ll-color-primary); font-size: .7rem; }
.demo-resume > small { margin-top: .3rem; }
.feature-item:hover .checkpoint-line::after { right: 0; }
.feature-item:hover .checkpoint-line .is-failed { background: var(--ll-color-primary); box-shadow: 0 0 0 1px var(--ll-color-primary); transition: background .25s .4s ease, box-shadow .25s .4s ease; }

/* Notifications */
.demo-notifications { padding: .75rem; }
.demo-notifications > div {
  position: absolute;
  right: .75rem;
  left: .75rem;
  display: grid;
  grid-template-columns: 1.65rem 1fr;
  align-items: center;
  gap: .55rem;
  padding: .65rem;
  border: 1px solid var(--ll-color-border);
  border-radius: .65rem;
  background: white;
  box-shadow: 0 6px 16px rgba(12, 51, 76, .06);
  transition: transform .42s var(--ease-out), opacity .3s ease;
}
.demo-notifications > div:first-child { top: .75rem; }
.demo-notifications > div:last-child { top: 4.65rem; opacity: 0; transform: translateY(4.5rem); }
.demo-notifications i { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 50%; color: white; background: var(--ll-color-primary); font-size: .62rem; font-style: normal; font-weight: 850; }
.demo-notifications > div:last-child i { background: var(--ll-color-brand); }
.demo-notifications span { display: flex; min-width: 0; flex-direction: column; }
.demo-notifications small { color: #536a77; font-size: .49rem; }
.demo-notifications strong { overflow: hidden; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.feature-item:hover .demo-notifications > div:last-child { opacity: 1; transform: translateY(0); }

/* Four-eye approval */
.demo-human {
  display: flex;
  padding: .9rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ll-color-text);
}
.gate-state { position: relative; display: grid; width: 2.7rem; height: 2.7rem; margin-bottom: .45rem; place-items: center; color: var(--ll-color-brand); }
.gate-state svg { grid-area: 1 / 1; width: 2.35rem; height: 2.35rem; transition: opacity .28s ease, transform .32s var(--ease-out); }
.gate-checks { color: var(--ll-color-primary); opacity: 0; transform: scale(.65) rotate(-8deg); }
.demo-reviewers { display: flex; margin-bottom: .42rem; }
.demo-reviewers i { display: grid; width: 1.65rem; height: 1.65rem; margin-left: -.23rem; place-items: center; border: 2px solid white; border-radius: 50%; color: white; background: var(--ll-color-primary); font-size: .48rem; font-style: normal; font-weight: 850; }
.demo-reviewers i:last-child { background: var(--ll-color-brand); }
.human-status { display: grid; min-height: 1rem; place-items: center; }
.human-status > span { grid-area: 1 / 1; font-size: .62rem; font-weight: 750; transition: opacity .25s ease, transform .25s var(--ease-out); }
.human-approved { color: var(--ll-color-primary); opacity: 0; transform: translateY(5px); }
.feature-item:hover .gate-palm { opacity: 0; transform: scale(.65) rotate(8deg); }
.feature-item:hover .gate-checks { opacity: 1; transform: none; transition-delay: .12s; }
.feature-item:hover .human-waiting { opacity: 0; transform: translateY(-5px); }
.feature-item:hover .human-approved { opacity: 1; transform: none; transition-delay: .2s; }

/* Run history */
.demo-history { padding: .62rem .72rem; }
.demo-history > div { display: grid; grid-template-columns: 2.8rem 1fr; gap: .4rem; padding: .38rem .42rem; border-bottom: 1px solid rgba(104, 151, 179, .18); border-radius: .35rem; transition: background .25s ease, transform .25s var(--ease-out); }
.demo-history > div:last-child { border-bottom: 0; }
.demo-history span { color: #657985; font-family: var(--ll-font-mono); font-size: .48rem; }
.demo-history strong { overflow: hidden; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.feature-item:hover .demo-history > div { background: white; transform: translateX(3px); }
.feature-item:hover .demo-history > div:nth-child(2) { transition-delay: .09s; }
.feature-item:hover .demo-history > div:nth-child(3) { transition-delay: .18s; }
.feature-item:hover .demo-history > div:nth-child(4) { transition-delay: .27s; }

/* Policy */
.demo-policy { padding: .72rem; }
.demo-policy > div { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 2.25rem; padding: .35rem .45rem; border-bottom: 1px solid rgba(104, 151, 179, .18); }
.demo-policy > div:last-child { border-bottom: 0; }
.demo-policy span { color: #405865; font-size: .56rem; font-weight: 700; }
.demo-policy i { position: relative; width: 1.7rem; height: .92rem; border-radius: 99px; background: #b8c7cf; transition: background .25s ease; }
.demo-policy i::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .62rem; height: .62rem; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(12, 51, 76, .2); transition: left .25s var(--ease-out); }
.feature-item:hover .demo-policy i { background: var(--ll-color-primary); }
.feature-item:hover .demo-policy i::after { left: .93rem; }
.feature-item:hover .demo-policy > div:nth-child(2) i { transition-delay: .12s; }
.feature-item:hover .demo-policy > div:nth-child(2) i::after { transition-delay: .12s; }
.feature-item:hover .demo-policy > div:nth-child(3) i { transition-delay: .24s; }
.feature-item:hover .demo-policy > div:nth-child(3) i::after { transition-delay: .24s; }

@media (max-width: 1120px) {
  .simple-feature-grid { grid-template-columns: 1fr; column-gap: 0; }
  .simple-feature-grid .feature-item { grid-template-columns: minmax(0, 1fr) minmax(12rem, .72fr); }
}

@media (max-width: 620px) {
  .simple-feature-grid .feature-item {
    grid-template-columns: 1fr;
    gap: 1.15rem;
    padding-block: 1.45rem;
  }
  .feature-demo { width: 100%; min-height: 8.2rem; }
}

@media (hover: none) {
  .feature-item.is-visible .feature-demo { animation: demo-arrive .7s var(--ease-out) both; }
}
@keyframes demo-arrive { from { opacity: .72; transform: translateY(8px); } }