.hero-animation { --media-image: none; position: relative; overflow: hidden; isolation: isolate; padding: 0; background: #14231f; }
.hero-animation iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.integrations { display: grid; grid-template-columns: 1fr 1.65fr; align-items: center; gap: 64px; padding-block: 80px 88px; }
.integrations-copy h2 { font-size: 28px; line-height: 1.12; letter-spacing: -.02em; }
.integrations-copy p { max-width: 35ch; margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.integration-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 28px 24px; list-style: none; margin: 0; padding: 12px 0 12px 40px; border-left: 1px solid var(--line); }
.integration-tools li { display: flex; align-items: center; justify-content: center; min-width: 0; height: 58px; }
.integration-logo { width: 132px; height: 42px; object-fit: contain; filter: grayscale(1); }
.logo-salesforce { width: 82px; height: 58px; }
.logo-sap { width: 80px; }
.logo-powerbi, .logo-arcgis { width: 48px; height: 48px; }
.logo-aws { width: 72px; height: 44px; }
.logo-ibm { width: 82px; height: 34px; }
@media (max-width: 1000px) {
  .integrations { gap: 28px; grid-template-columns: 1fr; }
  .integrations-copy h2 br { display: none; }
  .integrations-copy p { max-width: 54ch; }
  .integration-tools { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; }
}
@media (max-width: 700px) {
  .integrations { grid-template-columns: 1fr; gap: 28px; padding-block: 56px 64px; }
  .integrations-copy h2 { font-size: 26px; }
  .integrations-copy h2 br { display: none; }
  .integrations-copy p { max-width: 38ch; margin-top: 12px; }
  .integration-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
}

@media (min-width: 701px) and (min-height: 741px) and (prefers-reduced-motion: no-preference) {
  /* Give the final folder a pinned interval before the whole stack exits. */
  .panel-stack { display: flow-root; }
  .panel-stack::after { content: ''; display: block; height: clamp(300px, 50vh, 600px); }
  .panel-stack .capability-panel { margin-bottom: var(--folder-tail, 26px); }
}