/* The six product concepts share a level browser frame and neutral palette. */
body .ai-ecosystem--illustrated .ai-ecosystem__progress li { margin-left: 0; }
@media (max-width: 991px), (pointer: coarse) {
  body .ai-ecosystem--illustrated .ai-ecosystem__progress ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Loading is a usable static layout, including before the module executes. */
body .ai-ecosystem--illustrated:not(.is-webgl-ready) .ai-ecosystem__stage {
  height: auto;
  min-height: 0;
  padding: 6.25rem 0 3rem;
}

body .ai-ecosystem--illustrated:not(.is-webgl-ready) .ai-ecosystem__heading,
body .ai-ecosystem--illustrated:not(.is-webgl-ready) .ai-ecosystem__fallback,
body .ai-ecosystem--illustrated:not(.is-webgl-ready) .ai-ecosystem__progress {
  position: relative;
  inset: auto;
  margin: 0 auto 1.75rem;
  transform: none;
}

body .ai-ecosystem--illustrated:not(.is-webgl-ready) .ai-ecosystem__phase-copy {
  display: none;
}

body .ai-ecosystem--illustrated:not(.is-webgl-ready) .ai-ecosystem__heading {
  opacity: 1 !important;
}

body .ai-ecosystem--illustrated:not(.is-webgl-ready) .ai-ecosystem__status {
  position: relative;
  inset: auto;
  margin: 0 auto;
  text-align: center;
  transform: none;
}

/* Keep ready artwork visible while approaching and leaving its scroll range.
   Native sticky positioning avoids counter-translating the entire stage on
   every scroll frame, which can lag behind compositor scrolling. */
body .ai-ecosystem--illustrated.is-webgl-ready {
  height: calc(100svh + var(--workspace-tour-distance, 0px));
}

/* Do not crossfade the static gallery underneath the live canvas. The base
   gallery transition can otherwise remain visible on a fast scroll entry. */
body .ai-ecosystem--illustrated.is-webgl-ready .ai-ecosystem__fallback {
  display: none;
}

body .ai-ecosystem--illustrated.is-webgl-ready .ai-ecosystem__stage {
  position: sticky;
  top: 0;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: clamp(1.5rem, 4vh, 3rem);
}

/* The feature route shares the sticky stage, so it never scrolls across the
   artwork. Loading, touch and reduced-motion layouts keep it in normal flow. */
body .ai-ecosystem--illustrated .overview-motion-link {
  display: flex;
  justify-content: center;
  padding: 0 1.5rem;
}

body .ai-ecosystem--illustrated .overview-motion-link .overview-text-link {
  min-height: max(2.75rem, 44px);
  margin: 0;
  padding: .5rem .75rem;
  border: 0;
  border-radius: .375rem;
  background: transparent;
  color: #737b90;
  font-size: .8125rem;
  font-weight: 500;
}

body .ai-ecosystem--illustrated .overview-motion-link .overview-text-link:hover {
  color: #474dc8;
}

body .ai-ecosystem--illustrated.is-webgl-ready .overview-motion-link {
  position: absolute;
  z-index: 16;
  inset: auto 0 1rem;
  pointer-events: none;
}

body .ai-ecosystem--illustrated.is-webgl-ready .overview-motion-link a {
  pointer-events: auto;
}

body .ai-ecosystem--illustrated.is-webgl-ready .ai-ecosystem__status {
  pointer-events: none;
}

/* Outrank the later responsive inset so the link has its own 44px row. */
body #ai-ops.ai-ecosystem--illustrated.is-webgl-ready .ai-ecosystem__progress {
  bottom: 5.25rem;
}

@media (max-width: 600px) and (max-height: 679px) {
  body #ai-ops.ai-ecosystem--illustrated.is-webgl-ready .ai-ecosystem__phase-copy {
    top: var(--workspace-copy-top, 55%);
  }
}

/* The WebGL artwork measures this copy column on resize/refresh so both
   surfaces share one center line and a bounded gap at every desktop size. */
@media (min-width: 601px) {
  body .ai-ecosystem--illustrated.is-webgl-ready .ai-ecosystem__phase-copy {
    top: var(--workspace-copy-top, 55.5%);
    left: var(--workspace-copy-left, auto);
    right: max(5vw, calc((100% - 1600px) / 2));
    width: clamp(15rem, 25vw, 21.25rem);
  }
}

body .ai-ecosystem--illustrated.is-webgl-ready .ai-ecosystem__copy-face {
  border-color: rgba(255, 255, 255, .8);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(6px) saturate(125%);
  backdrop-filter: blur(6px) saturate(125%);
  box-shadow:
    inset 1px 1.5px 1.5px rgba(255, 255, 255, .9),
    inset -1px -1.5px 2.5px rgba(55, 62, 76, .1),
    inset 0 0 6px rgba(255, 255, 255, .32),
    0 10px 28px rgba(29, 32, 42, .09);
}

body .ai-ecosystem--illustrated.is-webgl-ready .ai-ecosystem__copy-face.has-liquid-glass-refraction {
  backdrop-filter: url("#workspace-liquid-glass") blur(2px) saturate(125%);
}

body .ai-ecosystem--illustrated.is-webgl-ready .ai-ecosystem__copy-face > span {
  color: #626879;
}

body .ai-ecosystem--illustrated.is-webgl-ready .ai-ecosystem__copy-face > em {
  color: #798092;
}

/* Specular light follows the rounded rim, leaving the center untinted. */
body .ai-ecosystem--illustrated.is-webgl-ready .ai-ecosystem__copy-face::after {
  position: absolute;
  inset: 0;
  padding: 1.25px;
  border-radius: inherit;
  background: linear-gradient(145deg, #fff, rgba(255, 255, 255, .12) 32%, rgba(68, 75, 89, .15) 55%, rgba(255, 255, 255, .85) 80%, #fff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  content: "";
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .ai-ecosystem--illustrated.is-webgl-ready .ai-ecosystem__copy-face {
    background: rgba(248, 250, 255, .96);
  }
}

body .ai-ecosystem--illustrated.is-webgl-ready .ai-ecosystem__canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: visible;
  transition: none;
}

.ai-ecosystem--illustrated [data-screen-format="illustration"] .ai-ecosystem__screen-media {
  aspect-ratio: var(--screen-aspect);
  overflow: visible;
  background: #fff;
}

.ai-ecosystem--illustrated [data-screen-format="illustration"] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.ai-ecosystem--illustrated .ai-ecosystem__fallback figure {
  border-color: #e5e7eb;
  box-shadow: 0 16px 44px rgb(31 41 55 / 5%);
}

.ai-ecosystem--illustrated .ai-ecosystem__fallback figcaption small {
  color: #7c8591;
}

/* A native scroll tour stays available while WebGL loads or fails. */
body .ai-ecosystem--illustrated.is-native-tour {
  height: calc(100svh + var(--workspace-tour-distance, 0px));
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 100svh;
  min-height: 0;
  padding: calc(var(--ai-header-height, 80px) + 1.5rem) 1.25rem 1.5rem;
  box-sizing: border-box;
}
body .ai-ecosystem--illustrated.is-native-tour :is(.ai-ecosystem__heading, .ai-ecosystem__progress, .ai-ecosystem__fallback, .ai-ecosystem__status) {
  position: relative;
  inset: auto;
  transform: none;
  margin: 0;
  flex: none;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__heading h2 {
  font-size: clamp(1.5rem, 3.3vw, 2.875rem);
  margin-bottom: 0;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__heading p,
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__phase-copy { display: none; }
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__fallback {
  flex: 1 1 auto;
  min-height: 0;
  width: min(64rem, 100%);
  opacity: 1;
  visibility: visible;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__fallback-track {
  display: block;
  height: 100%;
  overflow: hidden;
  padding: 0;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__fallback figure {
  display: none;
  transform: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  aspect-ratio: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__fallback figure.is-native-selected {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__screen-media {
  flex: 1;
  min-height: 0;
  width: 100%;
  aspect-ratio: auto;
  background: transparent;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__screen-media img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__fallback figcaption {
  position: static;
  flex: none;
  background: transparent;
  color: #343b45;
  text-align: center;
  padding: .5rem;
  backdrop-filter: none;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__fallback figcaption :is(small, span) { display: none; }
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress { width: min(64rem, 100%); }
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__status { font-size: .75rem; }

/* Native tour: every capture stays laid out and decoded; switching only
   cross-fades opacity, so a page turn never triggers layout or decoding. */
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__fallback-track { position: relative; }
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__fallback figure {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility 0s linear .22s;
  will-change: opacity;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__fallback figure.is-native-selected {
  opacity: 1;
  visibility: visible;
  transition: opacity .22s ease, visibility 0s;
}
/* The scroll hint replaces the small status line as the visible cue. */
body .ai-ecosystem--illustrated:is(.is-native-tour, .is-webgl-ready) .ai-ecosystem__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Scroll hint: says that scrolling turns the page and shows the position. */
body .ai-ecosystem--illustrated .ai-ecosystem__hint { display: none; }
body .ai-ecosystem--illustrated:is(.is-native-tour, .is-webgl-ready) .ai-ecosystem__hint {
  display: flex;
  width: max-content;
  margin: 0 auto .75rem;
  padding: .375rem .875rem .375rem .625rem;
  align-items: center;
  gap: .5rem;
  border-radius: 62.4375rem;
  background: #eef0ff;
  color: #3844b5;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: inset 0 0 0 1px #d6d9fb;
}
body .ai-ecosystem--illustrated .ai-ecosystem__hint i {
  position: relative;
  width: 1rem;
  height: 1rem;
  flex: none;
}
body .ai-ecosystem--illustrated .ai-ecosystem__hint i::before {
  position: absolute;
  inset: .125rem .25rem .375rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  content: "";
  animation: ecosystem-hint-nudge 1.4s ease-in-out infinite;
}
body .ai-ecosystem--illustrated .ai-ecosystem__hint b {
  padding-left: .5rem;
  border-left: 1px solid #c9cdf6;
  color: #6a70c9;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body .ai-ecosystem--illustrated.is-tour-last .ai-ecosystem__hint i::before { animation-duration: 2.4s; }
@keyframes ecosystem-hint-nudge {
  0%, 100% { transform: translateY(-1px) rotate(45deg); opacity: .65; }
  50% { transform: translateY(3px) rotate(45deg); opacity: 1; }
}

/* Tabs: an obvious hover and a filled selected state. */
body .ai-ecosystem--illustrated .ai-ecosystem__progress button {
  font-weight: 500;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
@media (hover: hover) {
  body .ai-ecosystem--illustrated .ai-ecosystem__progress button:hover:not([aria-current="step"]) {
    color: #3844b5;
    background: #eef0ff;
    box-shadow: inset 0 0 0 1px #c7cbf6, 0 .375rem .875rem rgba(73, 80, 214, .14);
    transform: translateY(-2px);
  }
}
body .ai-ecosystem--illustrated .ai-ecosystem__progress button[aria-current="step"] {
  color: #fff;
  background: linear-gradient(135deg, #4950d6, #6a5cf0);
  box-shadow: 0 .5rem 1.25rem rgba(73, 80, 214, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  body .ai-ecosystem--illustrated .ai-ecosystem__hint i::before { animation: none; }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__fallback figure { transition: none; }
}

/* The capture box hugs the screenshot (plus caption) instead of filling the
   stage, so tall windows centre the whole tour rather than opening a gap under
   the tabs. Short windows still shrink it to the space available. */
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__fallback { flex: 0 1 auto; aspect-ratio: 1.575; }

/* Native tour tabs: one compact segmented control instead of six large cards,
   so the capture keeps the height. The scroll hint already shows the position
   (03 / 06), so the separate progress line is hidden here. */
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress { width: min(72rem, 100%); }
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress > span { display: none; }
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress ol {
  width: max-content;
  max-width: 100%;
  gap: .25rem;
  margin: 0 auto;
  padding: .25rem;
  overflow-x: auto;
  border-radius: 62.4375rem;
  background: #f1f2fa;
  box-shadow: inset 0 0 0 1px #e3e5f3;
  scrollbar-width: none;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress li,
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress li:nth-child(5) { flex: none; margin-left: 0; }
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress button {
  min-height: 2.25rem;
  padding: .375rem 1.125rem;
  border-radius: 62.4375rem;
  background: transparent;
  box-shadow: none;
  font-size: .8125rem;
  white-space: nowrap;
}
@media (hover: hover) {
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress button:hover:not([aria-current="step"]) {
    background: #fff;
    box-shadow: 0 1px 2px rgba(39, 42, 92, .08);
    transform: none;
  }
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress button[aria-current="step"] {
  color: #fff;
  background: linear-gradient(135deg, #4950d6, #6a5cf0);
  box-shadow: 0 .25rem .625rem rgba(73, 80, 214, .25);
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__fallback { width: min(72rem, 100%); }

/* All windows use the same left rail and right capture composition. */
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__stage {
  display: grid;
  grid-template-columns: clamp(8rem, 25vw, 17.5rem) minmax(0, 66rem);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "heading heading" "nav media" "copy media" "link link";
  justify-content: center;
  align-items: start;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 1.25rem;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__heading { grid-area: heading; justify-self: center; }
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress { grid-area: nav; width: 100%; }
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__hint {
  width: auto;
  max-width: 100%;
  margin: 0 0 .875rem;
  padding-inline: .5rem .75rem;
  font-size: .6875rem;
  white-space: nowrap;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress ol {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: .375rem;
  overflow: visible;
  border-radius: 1rem;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress li {
  width: 100%;
  margin: 0;
  padding: 0;
  transform: none;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress button {
  width: 100%;
  min-height: 2.25rem;
  padding: .4375rem 1rem;
  justify-content: flex-start;
  border-radius: .75rem;
  text-align: left;
}
body .ai-ecosystem--3d.ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__phase-copy {
  grid-area: copy;
  position: static;
  margin: 0;
  display: block;
  width: auto;
  padding: .25rem .25rem 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  pointer-events: auto;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__phase-copy::before,
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__phase-copy em { display: none; }
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__phase-copy [data-ecosystem-copy="cards"] {
  position: static;
  gap: .5rem;
  opacity: 1;
  visibility: visible;
  transform: none;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__phase-copy strong { font-size: 1.25rem; }
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__fallback {
  grid-area: media;
  align-self: stretch;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__fallback figcaption { display: none; }
body .ai-ecosystem--3d.ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__screen-media { align-items: flex-start; justify-content: flex-start; }
body .ai-ecosystem--illustrated.is-native-tour .overview-motion-link { grid-area: link; padding-bottom: 0; }

/* Size the image element to the picture itself, so its rounded corners follow
   the capture instead of a wider empty box. */
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__screen-media {
  display: flex;
  align-items: center;
  justify-content: center;
}
body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__screen-media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
/* Narrow and short windows keep the rail while tightening spacing. */
@media (max-width: 991px) {
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__stage {
    padding-inline: .75rem;
    column-gap: .75rem;
    row-gap: .875rem;
  }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__hint {
    flex-wrap: wrap;
    gap: .25rem;
    white-space: normal;
    border-radius: .75rem;
  }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__hint span { flex: 1; min-width: 0; }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__hint b { white-space: nowrap; }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress button {
    padding-inline: .5rem;
    font-size: .75rem;
    white-space: normal;
  }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__phase-copy strong { font-size: 1rem; }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__phase-copy span { font-size: .75rem; }
}
@media (max-width: 600px) {
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__hint {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
  }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__hint b {
    grid-column: 2;
    padding-left: 0;
    border-left: 0;
  }
}
@media (max-height: 720px) {
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__stage {
    padding-top: calc(var(--ai-header-height, 80px) + .5rem);
    padding-bottom: .5rem;
    row-gap: .625rem;
  }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress ol { gap: 0; }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__progress button {
    min-height: 1.875rem;
    padding-block: .25rem;
    font-size: .75rem;
  }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__hint { margin-bottom: .5rem; }
}
@media (max-width: 600px) and (max-height: 720px) {
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__stage {
    grid-template-columns: 9rem minmax(0, 1fr);
  }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__heading h2 {
    font-size: 1.25rem;
    line-height: 1.35;
  }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__hint { font-size: .625rem; }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__phase-copy [data-ecosystem-copy="cards"] { gap: .375rem; }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__phase-copy strong { line-height: 1.35; }
  body .ai-ecosystem--illustrated.is-native-tour .ai-ecosystem__phase-copy span { line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  body .ai-ecosystem--illustrated.is-native-tour { height: 100svh; }
}