/* A flat product diagram built from live HTML and SVG so extraction stays animated.
   The whole 1080px scene scales uniformly; all flight geometry shares this plane. */
body .ai-story--illustrated { background: #fafbfc; }
body .ai-story--illustrated .ai-computer__scene {
  width: 67.5rem;
  height: 44rem;
  left: max(0px, calc((100% - 67.5rem * var(--story-device-scale, 1)) / 2));
  zoom: 1;
  transform: scale(var(--story-device-scale, 1));
}
body .ai-story--illustrated .ai-story__board {
  position: absolute;
  top: 1rem;
  left: 1.125rem;
  width: 65.25rem;
  transform: none;
}
body .ai-story--illustrated .ai-computer__device {
  transform: none;
  transform-style: flat;
}
body .ai-story--illustrated .ai-computer__lid {
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid #dfe3e9;
  border-radius: .625rem;
  background: #fff;
  box-shadow: 0 .625rem 1.5rem rgb(31 41 55 / 8%);
  transform: none;
  transform-style: flat;
}
body .ai-story--illustrated .ai-computer__lid::after,
body .ai-story--illustrated :is(.ai-computer__camera,
  .ai-computer__glare, .ai-computer__aura, .ai-computer__glow, .ai-story-orb, .ai-story-spark) {
  display: none;
}
body .ai-story--illustrated .ai-browser-ui {
  border-radius: .5625rem;
  color: #343b45;
  background: #fafbfc;
}
body .ai-story--illustrated .ai-browser-ui__tabs {
  display: flex;
  height: 2rem;
  padding: .25rem .625rem 0;
  align-items: stretch;
  gap: .375rem;
  background: #e0e3e8;
  font-size: .625rem;
}
body .ai-story--illustrated .ai-browser-ui__brand {
  display: grid;
  width: 2.25rem;
  place-items: center;
  border-radius: .5rem .5rem 0 0;
  background: #fff;
}
body .ai-story--illustrated .ai-browser-ui__brand img { width: 1.25rem; height: 1.25rem; }
body .ai-story--illustrated .ai-browser-ui__tab {
  display: flex;
  min-width: 9rem;
  padding: .375rem .625rem;
  align-items: center;
  gap: .5rem;
  border-radius: .375rem .375rem 0 0;
  color: #858d98;
}
body .ai-story--illustrated .ai-browser-ui__tab img { width: 1rem; height: 1rem; }
body .ai-story--illustrated .ai-browser-ui__tab span { flex: 1; }
body .ai-story--illustrated .ai-browser-ui__tab em { color: #a1a8b2; font-size: .875rem; font-style: normal; }
body .ai-story--illustrated .ai-browser-ui__tab.is-active {
  min-width: 13rem;
  border-bottom: 2px solid #5b79c3;
  color: #414955;
  background: #f9fafb;
}
body .ai-story--illustrated .ai-browser-ui__tab-add { padding: .25rem .5rem; color: #929ba6; font-size: 1rem; }
body .ai-story--illustrated .ai-browser-ui__window-controls { width: 4.5rem; margin: auto 0 auto auto; color: #abb2bc; }
body .ai-story--illustrated .ai-browser-ui__bar {
  height: 2rem;
  padding-inline: .75rem;
  gap: .75rem;
  border-bottom: 1px solid #e9ebef;
  color: #949da8;
  background: #fff;
}
body .ai-story--illustrated .ai-browser-ui__navigation { flex: 0 0 4rem; width: 4rem; height: 1rem; color: #9fa7b2; }
body .ai-story--illustrated .ai-browser-ui__address {
  display: flex;
  width: auto;
  flex: 1;
  align-items: center;
  gap: .5rem;
  padding: .3rem .75rem;
  border-radius: 1rem;
  color: #9da5b0;
  background: #f1f3f5;
  font-size: .625rem;
}
body .ai-story--illustrated .ai-browser-ui__address svg { width: .75rem; height: .75rem; flex-shrink: 0; }
body .ai-story--illustrated .ai-browser-ui__toolbar-brand { width: 1.125rem; height: 1.125rem; }
body .ai-story--illustrated .ai-browser-ui__toolbar-more { color: #919ba7; letter-spacing: .125rem; }
body .ai-story--illustrated .ai-browser-ui__body {
  height: calc(100% - 4rem);
  grid-template-columns: minmax(0, 1fr) 30%;
  gap: .75rem;
  padding: .75rem;
  background: #fafbfc;
}
body .ai-story--illustrated .ai-browser-ui__body .ai-scrape-page {
  border-radius: .375rem;
  background: #fafbfc;
}
body .ai-story--illustrated .ai-scrape-page__nav {
  height: 2.25rem;
  padding-inline: .75rem;
  border-color: #e6e9ee;
  background: #fafbfc;
}
body .ai-story--illustrated .ai-scrape-page__nav b { color: #414955; font-family: inherit; }
body .ai-story--illustrated .ai-scrape-page__nav em { color: #6f7e97; background: #edf1f6; }
body .ai-story--illustrated .ai-scrape-page__title { padding: 1rem .75rem; }
body .ai-story--illustrated .ai-scrape-page__title strong { color: #414955; }
body .ai-story--illustrated .ai-scrape-page__title :is(small, span) { color: #9da5b0; }
body .ai-story--illustrated .ai-scrape-page__products { padding: 0 .5rem .75rem; gap: .625rem; }
body .ai-story--illustrated .ai-scrape-page__products article {
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  min-height: 3.5rem;
  padding: .5rem .75rem;
  border: 1px solid #e5e8ee;
  border-radius: .375rem;
  background: #fff;
  box-shadow: none;
}
body .ai-story--illustrated .ai-scrape-page__products article > i {
  width: 1.75rem;
  height: 2.25rem;
  border: 1px solid #e0e4eb;
  border-left: .1875rem solid #c7ced8;
  border-radius: .1875rem;
  color: #8591a3;
  background: #edf0f4;
  box-shadow: none;
  font-size: .5625rem;
}
body .ai-story--illustrated .ai-scrape-page__products article b { color: #414955; font-size: .75rem; }
body .ai-story--illustrated .ai-scrape-page__metrics strong { color: #69768b; font-size: .75rem; }
body .ai-story--illustrated .ai-scrape-page__products article small { color: #99a2af; font-size: .625rem; }
body .ai-story--illustrated .ai-scrape-page__metrics small { color: #a9b1be; }
body .ai-story--illustrated .ai-browser-ui__body .ai-scrape-sidepanel {
  border: 1px solid #e3e7ee;
  border-radius: .375rem;
  background: #f5f7fa;
  box-shadow: none;
  overflow: hidden;
}
body .ai-story--illustrated .ai-scrape-sidepanel > header { height: 2.75rem; padding-inline: .75rem; border-color: #e6e9ee; }
body .ai-story--illustrated .ai-scrape-sidepanel > header b { color: #4e5867; font-size: .75rem; }
body .ai-story--illustrated .ai-scrape-sidepanel > header small { color: #9aa4b2; font-size: .5625rem; }
body .ai-story--illustrated .ai-scrape-sidepanel__content { gap: .375rem; padding: .75rem .625rem .5rem; }
body .ai-story--illustrated .ai-scrape-sidepanel__heading { margin-bottom: .375rem; }
body .ai-story--illustrated .ai-scrape-sidepanel__heading h4 { color: #596577; font-size: .8125rem; }
body .ai-story--illustrated .ai-scrape-sidepanel__heading :is(small, span) { color: #9aa5b5; }
body .ai-story--illustrated .ai-scrape-sidepanel__heading > span { font-size: .5625rem; }
body .ai-story--illustrated .ai-scrape-field {
  position: relative;
  padding: .375rem .4375rem;
  border-color: #e4e8ef;
  border-radius: .3125rem;
  background: #fff;
  box-shadow: none;
}
body .ai-story--illustrated .ai-scrape-field b { color: #627087; font-size: .6875rem; }
body .ai-story--illustrated .ai-scrape-field small { color: #9da7b6; font-size: .5625rem; }
body .ai-story--illustrated .ai-scrape-field > i { border-radius: .1875rem; background: #a8beb4; box-shadow: none; }
body .ai-story--illustrated .ai-scrape-field > em { color: #a5afbd; border-color: #e6eaf0; font-size: .5rem; }
body .ai-story--illustrated .ai-scrape-sidepanel > footer { padding: .5rem .625rem; border-color: #e6e9ee; background: #fff; }
body .ai-story--illustrated .ai-scrape-sidepanel > footer strong { border-radius: .3125rem; background: #647eaf; box-shadow: none; }
body .ai-story--illustrated .ai-browser-ui__cursor path { fill: #657da5; stroke: #fff; }
body .ai-story--illustrated .ai-data-stream { inset: 0; overflow: visible; }
body .ai-story--illustrated .ai-data-packet {
  border-color: #ccd6e5;
  border-radius: .3125rem;
  color: #7487a5;
  background: #fff;
  box-shadow: 0 .25rem .625rem rgb(31 41 55 / 8%);
  backdrop-filter: none;
}
body .ai-story--illustrated .ai-data-packet > b { color: #536780; }
body .ai-story--illustrated .ai-computer__scan-beam { background: linear-gradient(90deg, transparent, rgb(94 121 162 / 8%), transparent); }
body .ai-story--illustrated .ai-computer__flow { opacity: .25; }
body .ai-story--illustrated .ai-computer__flow-path { stroke: #9cabbe; }
body .ai-story--illustrated .ai-computer__flow-dot { fill: #7c92b2; }
body .ai-story--illustrated .ai-story-results {
  position: absolute;
  top: 38.875rem;
  left: 1.125rem;
  display: grid;
  width: 65.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
}
body .ai-story--illustrated .ai-story-result-tile { position: static; min-width: 0; width: auto; transform: none; }
body .ai-story--illustrated .ai-story-results .ai-result-card {
  display: grid;
  min-height: 4rem;
  padding: .75rem 1rem;
  border: 1px solid #e2e7ee;
  border-radius: .375rem;
  background: #fff;
  box-shadow: 0 .25rem .75rem rgb(31 41 55 / 4%);
}
body .ai-story--illustrated .ai-result-card small { color: #9ba5b4; }
body .ai-story--illustrated .ai-result-card strong { color: #52637d; }
body .ai-story--illustrated .ai-result-formats i { color: #7f90a9; border-color: #e2e8f0; background: #f4f6f9; }
body:not(.has-story-motion) .ai-story--illustrated .ai-story-results { display: none; }
@media (min-width: 992px) {
  body.has-story-motion .ai-story--illustrated .ai-computer { max-width: 77.625rem; }
  body.has-story-motion .ai-story--illustrated.is-autoplay .ai-story__sticky,
  body.has-story-motion .ai-story--illustrated.is-autoplay .ai-story__stage { height: auto; }
}
@media (max-width: 600px) {
  body.has-story-motion .ai-story--illustrated .ai-story__stage { gap: .25rem; }
}
/* The same task can be driven by an outside agent (Skill / MCP) or built-in Chat. */
body .ai-story .ai-story-agents { display: flex; flex-wrap: wrap; gap: .75rem .875rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
body .ai-story .ai-story-agents li { display: grid; justify-items: center; gap: .375rem; min-width: 3rem; }
body .ai-story .ai-story-agents img { display: block; width: 2.25rem; height: 2.25rem; border-radius: .625rem; background: #fff; object-fit: contain; box-shadow: 0 0 0 1px #e3e7ee, 0 .25rem .75rem rgba(31, 48, 89, .06); }
body .ai-story .ai-story-agents span { color: #6e7191; font-size: .6875rem; line-height: 1.2; white-space: nowrap; }
body .ai-story .ai-scrape-sidepanel > header small .ai-story-driver-logo { display: block; flex: 0 0 auto; width: .8125rem; height: .8125rem; border-radius: .1875rem; object-fit: contain; }
/* Section 3 agentic scene: a signed-in store admin, and a side panel that follows each chapter. */
body .ai-story .ai-story-signed { display: inline-flex; align-items: center; gap: .3125rem; margin-left: .25rem; padding: .1875rem .5rem; border: 1px solid #d7e8df; border-radius: 1rem; color: #4f7a66; background: #f1f8f4; font-size: .5625rem; }
body .ai-story .ai-story-signed i { width: .375rem; height: .375rem; border-radius: 50%; background: #38bc80; }
/* Customer initials replace the former book-cover thumbnails. */
body .ai-story--illustrated .ai-story-shop .ai-scrape-page__products article > i { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; color: #5b6f93; background: #e8eef8; font-size: .5625rem; font-style: normal; font-weight: 600; }
/* Scenes share one grid cell, so the panel keeps the tallest scene's height
   and field targets keep their layout for the packet flight while hidden. */
body .ai-story .ai-story-scenes { display: grid; }
body .ai-story .ai-story-scene { display: grid; grid-area: 1 / 1; align-content: start; gap: .375rem; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
body .ai-story .ai-story-scene.is-active { opacity: 1; visibility: visible; }
body .ai-story .ai-story-request { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .5rem; align-items: start; padding: .625rem; border: 1px solid #e4e8ef; border-radius: .5rem; background: #fff; }
body .ai-story .ai-story-request img { width: 1.5rem; height: 1.5rem; border-radius: .375rem; object-fit: contain; box-shadow: 0 0 0 1px #e3e7ee; }
body .ai-story .ai-story-request p { margin: 0; color: #4e5867; font-size: .6875rem; line-height: 1.55; }
body .ai-story .ai-story-parsed { display: flex; align-items: center; gap: .375rem; margin: .125rem 0 0; color: #7d8796; font-size: .5625rem; }
body .ai-story :is(.ai-story-parsed, .ai-story-plan) i { display: grid; flex: 0 0 auto; place-items: center; width: .875rem; height: .875rem; border-radius: .1875rem; color: #fff; background: #7b9d8c; font-size: .5rem; font-style: normal; }
body .ai-story .ai-story-plan { display: grid; gap: .375rem; margin: 0; padding: 0; list-style: none; }
body .ai-story .ai-story-plan li { display: grid; grid-template-columns: .875rem minmax(0, 1fr); align-items: center; gap: .5rem; padding: .5rem .5625rem; border: 1px solid #e4e8ef; border-radius: .3125rem; color: #596577; background: #fff; font-size: .625rem; }
body .ai-story .ai-story-sheet { width: 100%; border: 1px solid #e4e8ef; border-collapse: separate; border-spacing: 0; border-radius: .3125rem; background: #fff; font-size: .5625rem; }
body .ai-story .ai-story-sheet td { padding: .4375rem .5rem; border-bottom: 1px solid #eef1f5; color: #596577; white-space: nowrap; }
body .ai-story .ai-story-sheet td:last-child { color: #414955; font-weight: 600; text-align: right; }
body .ai-story .ai-story-sheet tr:last-child td { border-bottom: 0; }
body .ai-story .ai-story-confirm { margin-top: .125rem; padding: .625rem; border: 1px solid #efe1c6; border-radius: .375rem; background: #fffaf1; }
body .ai-story .ai-story-confirm p { margin: 0 0 .5rem; color: #6b5a3a; font-size: .625rem; }
body .ai-story .ai-story-confirm div { display: flex; gap: .375rem; }
body .ai-story .ai-story-confirm :is(b, span) { display: inline-block; padding: .3125rem .75rem; border-radius: .25rem; font-size: .5625rem; }
body .ai-story .ai-story-confirm b { color: #fff; background: #647eaf; }
body .ai-story .ai-story-confirm span { border: 1px solid #e1e5ec; color: #7d8796; background: #fff; }
body .ai-story .ai-scrape-sidepanel > footer strong { display: flex; align-items: center; justify-content: center; gap: .25rem; }
body .ai-story .ai-scrape-sidepanel > footer strong em { font-style: normal; }

/* Real browser captures replace the drawn browser: one full window per chapter. */
body .ai-story--illustrated .ai-computer__lid { aspect-ratio: 1902 / 1112; overflow: hidden; }
body .ai-story--illustrated .ai-story-shots { position: relative; width: 100%; height: 100%; border-radius: .5625rem; overflow: hidden; background: #fafbfc; }
body .ai-story--illustrated .ai-story-shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .45s ease; }
body .ai-story--illustrated .ai-story-shot.is-active { opacity: 1; }
body .ai-story--illustrated .ai-story-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Desktop: the capture sits on the left, flush with the section title; the
   chapter copy follows on the right. */
@media (min-width: 992px) {
  body.has-story-motion .ai-story--illustrated .ai-story__stage {
    grid-template-columns: minmax(0, 1fr) minmax(15.625rem, .27fr);
  }
  body.has-story-motion .ai-story--illustrated .ai-computer__scene { left: 0; }
  body.has-story-motion .ai-story--illustrated .ai-story__board { left: 0; }
}

/* Chapter switcher: dashes above the copy. The active dash fills over its
   chapter; clicking one jumps the story there and autoplay carries on. */
body .ai-story .ai-story__chapters { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
body.has-story-motion .ai-story .ai-story__chapters { order: 2; }
body .ai-story .ai-story__switch { display: flex; gap: .5rem; margin: 0 0 1.25rem; }
body:not(.has-story-motion) .ai-story .ai-story__switch { display: none; }
body .ai-story .ai-story__switch button {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: .25rem;
  background: transparent;
  cursor: pointer;
}
body .ai-story .ai-story__switch i {
  position: absolute;
  inset: calc(50% - 2px) 0 auto;
  height: 4px;
  overflow: hidden;
  border-radius: 62.4375rem;
  background: #d9dcea;
  transition: background-color .18s ease, height .18s ease, top .18s ease;
}
body .ai-story .ai-story__switch i::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #4950d6;
  transform: scaleX(0);
  transform-origin: left center;
  content: "";
}
body .ai-story .ai-story__switch .is-done i::after { transform: scaleX(1); background: #9ea3e6; }
body .ai-story .ai-story__switch .is-active i::after { transform: scaleX(var(--story-fill, 0)); }
body .ai-story .ai-story__switch .is-active i { background: #c9ccf3; }
@media (hover: hover) {
  body .ai-story .ai-story__switch button:hover i { top: calc(50% - 3px); height: 6px; background: #b8bce8; }
}
body .ai-story .ai-story__switch button:focus-visible { outline: 2px solid #4950d6; outline-offset: 2px; }

/* The autoplay story sits in document flow on every width, so it takes its
   content's height. A full-viewport minimum stretched the stage on tall
   windows and opened a gap between the title and the story. */
@media (min-width: 992px) {
  body.has-story-motion .ai-story.is-autoplay,
  body.has-story-motion .ai-story.is-autoplay .ai-story__sticky { min-height: 0; height: auto; }
  body.has-story-motion .ai-story.is-autoplay .ai-story__sticky { align-content: start; }
}

/* Layout belongs to the section, not to optional animation capabilities.
   Keep the same capture/copy arrangement before JS, in reduced motion and
   when animation libraries fail. The ID also wins over legacy responsive
   rules that still describe the former pinned, illustrated browser. */
#ai-story.ai-story--illustrated { height: auto; min-height: 0; padding: 0; }
#ai-story.ai-story--illustrated .ai-story__sticky {
  position: relative;
  top: auto;
  height: auto;
  min-height: 0;
  padding: 6.25rem max(var(--site-gutter, 1.75rem), calc((100vw - var(--site-content-width, 82.5rem)) / 2)) 3rem;
  align-content: start;
}
#ai-story.ai-story--illustrated .ai-story__header {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  max-width: none;
  margin: 0 0 2rem;
}
#ai-story.ai-story--illustrated .ai-story__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  min-height: 0;
  padding-top: 0;
  gap: 1.5rem;
}
#ai-story.ai-story--illustrated .ai-story__chapters { order: 2; }
#ai-story.ai-story--illustrated .ai-story__switch { display: flex; }
#ai-story.ai-story--illustrated .ai-story__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  height: auto;
}
#ai-story.ai-story--illustrated .ai-story-step {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transform: none;
}
#ai-story.ai-story--illustrated .ai-story-step.is-active { opacity: 1; visibility: visible; }
#ai-story.ai-story--illustrated .ai-computer {
  order: 1;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}
/* Real screenshots scale natively; they do not need the old fixed-size
   diagram canvas or JS measurements to reserve their height. */
#ai-story.ai-story--illustrated .ai-computer__scene {
  position: relative;
  top: auto;
  left: 0;
  width: 100%;
  height: auto;
  transform: none;
}
#ai-story.ai-story--illustrated .ai-story__board {
  position: relative;
  top: auto;
  left: 0;
  width: 100%;
}
#ai-story.ai-story--illustrated .ai-computer__lid {
  padding: .375rem;
  border-radius: 1rem;
  border-color: rgba(41, 44, 67, .14);
  background: #282b43;
  box-shadow: 0 1.25rem 3rem rgba(35, 39, 75, .1), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
@media (min-width: 992px) {
  #ai-story.ai-story--illustrated .ai-story__stage {
    grid-template-columns: minmax(0, 1fr) minmax(15.625rem, .27fr);
    gap: clamp(1.5rem, 2vw, 2.75rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  #ai-story.ai-story--illustrated .ai-story-shot { transition: none; }
}