.flow-diagram { position: relative; isolation: isolate; margin-top: 50px; }
.flow-diagram .flow-list { margin-top: 0; }
.flow-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; pointer-events: none; }
.flow-route path { fill: none; stroke: #b7d6cf; stroke-width: 64px; stroke-linecap: round; stroke-linejoin: round; }
.flow-marker strong { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .is-flow-animated .flow-route path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--route-progress,1)); opacity: clamp(0,calc(var(--route-progress,1) * 20),1); }
  .is-flow-animated .flow-marker, .is-flow-animated .flow-copy, .is-flow-animated .flow-photo { opacity: var(--step-reveal,1); }
  .is-flow-animated .flow-marker { scale: calc(.84 + var(--step-reveal,1) * .16); }
  .is-flow-animated .flow-photo { scale: calc(.86 + var(--step-reveal,1) * .14); }
  .is-flow-animated .flow-copy { translate: 0 calc((1 - var(--step-reveal,1)) * 20px); }
  .is-flow-animated li:focus-within > * { opacity: 1; scale: 1; translate: none; }
}
@media (max-width: 1100px) { .flow-route path { stroke-width: 44px; } }
@media (max-width: 780px) {
  .flow-diagram { margin-top: 36px; }
  .flow-route path { stroke-width: 12px; }
  .flow-marker > div { padding: 8px; }
}
@media print {
  .is-flow-animated .flow-route path { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; }
  .is-flow-animated .flow-marker, .is-flow-animated .flow-copy, .is-flow-animated .flow-photo { opacity: 1; scale: none; translate: none; }
}