/* Systeem page: the Flow B2 · labels animation fills the page hero, the copy sits on top of it (D87).
   In v3 only the home page (section 03) loads this copy; the Systeem page loads assets/media/layers/flow/. Values follow outputs/hero-animations-v2/flow-sources/src/common.css. */
.page-hero.sys-flow {
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(calc(100svh - var(--nav-h)), 700px);
  --hero-mobile-room: 370px;
}
.sys-flow .flow-stage,
.sys-flow .flow-veil,
.sys-flow .flow-top {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.sys-flow .flow-stage {
  z-index: 0;
}
.sys-flow canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* the veil keeps the copy at full contrast: canvas colour behind the text column, clear on the right */
.sys-flow .flow-veil {
  background: linear-gradient(
    90deg,
    rgba(250, 249, 252, 0.94) 0%,
    rgba(250, 249, 252, 0.86) 38%,
    rgba(250, 249, 252, 0) 58%
  );
}
.page-hero.sys-flow > .wrap {
  z-index: 2;
  display: block;
  width: 100%;
}
.sys-flow .flow-copy {
  max-width: 620px;
}
.sys-flow .page-lead {
  max-width: 44ch;
}

/* section 01: the coded flow diagram, then the four layer cards; site.css hides the diagram on a phone, the cards stay */
.sec-flow .flow-figure + .grid-2 {
  margin-top: var(--s-7);
}

@media (max-width: 900px) {
  .page-hero.sys-flow {
    display: block;
    min-height: 0;
  }
  .page-hero.sys-flow > .wrap {
    padding-bottom: var(--hero-mobile-room);
  }
  /* the veil covers the copy and stops where the animation room under the buttons starts */
  .sys-flow .flow-veil {
    background: linear-gradient(
      180deg,
      rgba(250, 249, 252, 0.92) 0,
      rgba(250, 249, 252, 0.88) calc(100% - var(--hero-mobile-room) - 30px),
      rgba(250, 249, 252, 0) calc(100% - var(--hero-mobile-room) + 10px)
    );
  }
}