/* The traceability story continues the open layout below the about divider. */
.product-story--editorial,
.product-story--editorial * { box-sizing: border-box; }

.product-story--editorial {
  height: auto;
  min-height: 0;
  /* Occupy the preceding About section's empty space below its divider. */
  margin-top: calc(-1 * clamp(64px, 6vw, 112px));
  overflow: visible;
  color: var(--color-heading);
  background: var(--color-background-soft);
}

.hero-about-bridge.is-bridge-ready + .product-story--editorial { margin-top: -115px; }

.product-story--editorial .product-story__stage {
  position: relative;
  /* Keep rotating corners above the preceding section's empty padding. */
  z-index: 4;
  inset: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  /* Media margins tighten the gap below the divider without adding pin spacing. */
  padding: 30px 0 120px;
  overflow: visible;
  color: var(--color-heading);
  background: var(--color-background-soft);
}

.product-story__container {
  width: min(calc(100% - 2 * var(--page-gutter)), var(--content-max));
  margin-inline: auto;
}

.product-story--editorial .product-story__media {
  position: relative;
  inset: auto;
  width: min(90%, 1224px);
  height: clamp(396px, 36vw, 576px);
  aspect-ratio: auto;
  margin: -30px auto 20px;
  transform: none;
  /* Keep the transparent SVG on the same surface as its section. */
  background: var(--color-background-soft);
}

.product-story--editorial .product-story__visual {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  /* Reveal only after its native animation clock is paused and synchronized. */
  visibility: hidden;
}

.product-story--editorial .product-story__visual.is-ready { visibility: visible; }

.product-story--editorial .product-story__intro {
  position: relative;
  inset: auto;
  width: 100%;
  text-align: center;
}

.product-story--editorial .product-story__eyebrow { width: 100%; justify-content: center; }
.product-story--editorial .product-story__intro h2 { max-width: 800px; margin: 0 auto; }
.product-story--editorial .product-story__intro h2 > span { display: block; }
.product-story--editorial .product-story__accent { font-style: normal; }

.product-story__overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 40px;
  margin-top: clamp(80px, 7vw, 132px);
}

.product-story__lead {
  --fs-body: clamp(1.5rem, 2vw, 2rem);
  --lh-body: var(--lh-h4);
  --ls-body: var(--ls-h4);
  --text-on-surface: var(--color-heading);
  max-width: 460px;
  margin: 0;
  color: var(--color-heading);
  text-wrap: pretty;
}

.product-story__description {
  max-width: 600px;
  margin: 0 0 0 auto;
  color: var(--color-text);
}
.product-story--editorial .product-story__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  max-width: 600px;
  margin-inline-start: auto;
  margin-top: 32px;
}

@media (max-width: 1023px) {
  .product-story--editorial { margin-top: -64px; }
  .product-story--editorial .product-story__stage { padding-bottom: 80px; }
  .product-story__overview { grid-template-columns: 1fr; gap: 48px; margin-top: 64px; }
  .product-story__description,
  .product-story--editorial .product-story__actions { max-width: none; margin-inline: 0; }
}

@media (max-width: 600px) {
  .product-story--editorial .product-story__media { margin-block: -20px 20px; }
  .product-story__overview { gap: 40px; margin-top: 48px; }
}