/* A four-stage, synchronized presentation of one demonstration. */
.flow-section { padding-top: 64px; padding-bottom: 66px; background: #fafafb; border-top: 1px solid #f0f1f3; }
.flow-heading { text-align: center; margin: 0 auto 32px; }
.flow-eyebrow { color: #7a8088; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 14px; }
.flow-heading h2 { color: #24272c; font-size: clamp(32px, 4vw, 48px); font-weight: 650; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.flow-heading > p:last-child { color: #757b84; font-size: 17px; margin: 17px 0 0; }
.motion-flow { --flow-accent: #3b718c; max-width: 1080px; margin: 0 auto; }
.motion-flow[data-stage="3"] { --flow-accent: #bb734f; }
.flow-screen { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #f4f5f7; border: 1px solid #e8e9ed; border-radius: 22px; isolation: isolate; box-shadow: 0 12px 40px -22px #242b3833; }
.flow-view { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 260ms ease-out; }
.flow-view.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.flow-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #f4f5f7; }
.flow-badge { position: absolute; top: 18px; left: 18px; z-index: 3; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 13px 6px 8px; background: #ffffffd9; backdrop-filter: blur(18px) saturate(160%); border: 1px solid #ffffffd9; border-radius: 22px; box-shadow: 0 2px 12px #2633420d; pointer-events: none; color: #3d444d; font-size: 12px; font-weight: 600; }
.flow-stage-number { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #edf0f3; color: var(--flow-accent); font-size: 10px; font-variant-numeric: tabular-nums; }
.flow-controls { display: flex; align-items: center; gap: 15px; padding: 12px 6px 15px; }
.flow-controls button, .flow-tab, .flow-retry { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.flow-controls button:active, .flow-retry:active { transform: scale(.96); }
.flow-icon-button { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid #e4e7ec; border-radius: 50%; background: white; color: #343b43; }
.flow-icon-button svg { width: 19px; height: 19px; fill: currentColor; }
.flow-toggle .flow-play-icon { margin-left: 2px; }
.flow-toggle .flow-pause-icon { display: none; }
.motion-flow.is-playing .flow-toggle .flow-play-icon { display: none; }
.motion-flow.is-playing .flow-toggle .flow-pause-icon { display: block; }
.flow-scrub { appearance: none; -webkit-appearance: none; min-width: 0; width: 100%; height: 44px; background: transparent; margin: 0; cursor: ew-resize; accent-color: var(--flow-accent); touch-action: pan-y; }
.flow-scrub::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--flow-accent) var(--played, 0%), #dfe3e9 var(--played, 0%)); }
.flow-scrub::-moz-range-track { height: 4px; border-radius: 4px; background: #dfe3e9; }
.flow-scrub::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--flow-accent); }
.flow-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; margin-top: -5.5px; border: 3px solid white; background: var(--flow-accent); border-radius: 50%; box-shadow: 0 1px 5px #26344235; }
.flow-scrub::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid white; background: var(--flow-accent); border-radius: 50%; box-shadow: 0 1px 5px #26344235; }
.flow-scrub:focus-visible { outline: 2px solid #489cdc; outline-offset: 3px; border-radius: 8px; }
.flow-clock { flex: 0 0 auto; font-size: 11px; color: #858b93; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow-current-time { color: #424953; }
.flow-replay { display: flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 13px; flex: 0 0 auto; border: 1px solid #e4e7ec; border-radius: 24px; color: #565f6a; background: #fff; font-size: 12px !important; }
.flow-replay svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.flow-tabs { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px; padding: 6px; border-radius: 20px; background: #eaecef; }
.flow-selection { position: absolute; left: 0; top: 0; width: calc((100% - 24px) / 4); height: calc(100% - 12px); background: white; border: 1px solid #ffffff; border-radius: 15px; box-shadow: 0 2px 10px #27334112; pointer-events: none; will-change: transform; }
.flow-tab { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 99px; padding: 13px 12px 17px; border: 0; border-radius: 15px; background: transparent; color: #636c77; text-align: left; }
.flow-tab:hover { background: #ffffff40; }
.flow-tab:active { background: #ffffff99; }
.flow-tab img { width: 66px; height: 50px; object-fit: cover; border-radius: 7px; background: #f4f5f7; filter: saturate(.65); opacity: .72; }
.flow-tab-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.flow-tab-number { font-size: 10px; font-weight: 600; color: #9299a3; letter-spacing: .05em; }
.flow-tab strong { font-size: 13px; line-height: 1.25; font-weight: 600; color: #59626e; white-space: nowrap; letter-spacing: -.015em; }
.flow-tab-detail { font-size: 10px; line-height: 1.5; color: #8a919b; white-space: nowrap; }
.flow-tab[aria-selected="true"] strong { color: #242b34; }
.flow-tab[aria-selected="true"] .flow-tab-number { color: var(--flow-accent); }
.flow-tab[aria-selected="true"] img { opacity: 1; filter: none; }
.flow-tab-progress { position: absolute; bottom: 8px; left: 12px; right: 12px; height: 2px; border-radius: 2px; overflow: hidden; }
.flow-tab-progress i { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: #a8b4bd; }
.flow-tab[aria-selected="true"] .flow-tab-progress { background: #e9edf0; }
.flow-tab[aria-selected="true"] .flow-tab-progress i { background: var(--flow-accent); }
.flow-hint { text-align: center; color: #8b9199; font-size: 11px; margin: 15px 0 0; line-height: 1.65; }
.flow-error { position: absolute; z-index: 5; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 12px 18px; border-radius: 12px; background: #fffffff2; color: #414952; font-size: 13px; box-shadow: 0 4px 24px #0001; white-space: nowrap; }
.flow-error[hidden] { display: none; }
.flow-retry { padding: 4px 8px; border: 0; background: transparent; color: #24658e; text-decoration: underline; }
.flow-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1050px) {
  .flow-tab { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .flow-tab img { width: 45px; height: 40px; }
  .flow-tab strong { font-size: 12px; }
  .flow-tab-detail { font-size: 9px; }
}
@media (max-width: 760px) {
  .flow-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .flow-tab { min-height: 90px; gap: 12px; padding: 11px 14px 17px; }
  .flow-tab img { width: 64px; height: 48px; }
  .flow-tab strong { font-size: 13px; }
  .flow-tab-detail { font-size: 10px; }
  .flow-selection { width: calc((100% - 16px) / 2); height: calc((100% - 16px) / 2); }
}
@media (max-width: 480px) {
  .flow-section { padding-top: 42px; padding-bottom: 42px; }
  .flow-heading { margin-bottom: 24px; }
  .flow-heading h2 { font-size: 34px; }
  .flow-heading > p:last-child { font-size: 14px; margin-top: 14px; }
  .flow-eyebrow { font-size: 10px; }
  .flow-screen { border-radius: 15px; }
  .flow-badge { top: 9px; left: 9px; min-height: 30px; padding: 3px 10px 3px 5px; gap: 6px; font-size: 10px; }
  .flow-stage-number { width: 22px; height: 22px; font-size: 9px; }
  .flow-controls { gap: 10px; padding-left: 0; padding-right: 0; }
  .flow-clock { font-size: 10px; }
  .flow-replay { width: 44px; padding: 0; }
  .flow-replay span { display: none; }
  .flow-tabs { padding: 5px; border-radius: 17px; }
  .flow-tab { gap: 8px; min-height: 87px; padding: 11px 9px 17px; }
  .flow-tab img { width: 40px; height: 40px; }
  .flow-tab strong { font-size: 11px; white-space: normal; }
  .flow-tab-detail { font-size: 9px; white-space: normal; }
  .flow-hint { max-width: 280px; margin-left: auto; margin-right: auto; }
  .flow-error { bottom: 10px; padding: 7px 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .flow-view { transition: none; } .flow-controls button:active { transform: none; } }
@media (prefers-reduced-transparency: reduce) { .flow-badge { background: white; backdrop-filter: none; } }
@media (prefers-contrast: more) { .flow-badge, .flow-selection, .flow-screen { border-color: #58626d; } .flow-tab-detail, .flow-hint { color: #505a65; } }