/* Source-to-answer motion, shared with the original workflow sequence.
   Layout remains in landing.css; paths use unscaled artboard coordinates. */
.live-flow {
  --flow-highlight: #d9d4d4;
  --flow-pale: #9c9797;
  isolation: isolate;
}
.live-flow-sources { visibility: hidden; }
.live-flow-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.live-flow-lines path {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow-line-base { stroke: var(--flow-pale); }
.flow-line-lit { stroke: var(--flow-highlight); }
.live-flow-input, .live-flow-answer, .flow-chip { z-index: 2; }
.answer-border-svg {
  position: absolute;
  inset: -1.2px;
  width: calc(100% + 2.4px);
  height: calc(100% + 2.4px);
  pointer-events: none;
  overflow: visible;
}
.answer-border, .answer-border-dashed { fill: none; stroke: var(--flow-highlight); stroke-width: 1.2; }
.answer-border { stroke-dasharray: 1; stroke-dashoffset: 0; }
.answer-border-dashed { stroke-dasharray: 4 4; opacity: 0; }
.flow-ready .answer-border { stroke-dashoffset: 1; }
.flow-ready .answer-border-dashed { opacity: .45; }
.flow-ready .flow-line-lit { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* The complete flow is readable immediately; highlights still trace its order. */
.flow-playing .flow-links-first .flow-line-lit { animation: flow-connect 650ms cubic-bezier(.42,0,.28,1) both; }
.flow-playing .flow-links-second .flow-line-lit { animation: flow-connect 650ms cubic-bezier(.42,0,.28,1) 500ms both; }
.flow-playing .answer-border { animation: flow-connect 650ms linear 1100ms both; }
.flow-playing .answer-border-dashed { animation: flow-dashes-fade 180ms cubic-bezier(.42,0,.28,1) 1570ms both; }
@keyframes flow-connect { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes flow-dashes-fade { from { opacity: .45; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .live-flow path, .live-flow rect {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
  .live-flow .answer-border-dashed { opacity: 0 !important; }
}

/* Match the result card’s finished border on both workflow cards. */
.live-flow .live-flow-input,
.live-flow .live-flow-answer {
  border-color: var(--flow-highlight);
  border-width: 1.2px;
}