.about-visual[data-interactive] { position: relative; container-type: inline-size; }
.clutch-flow { position: relative; width: 100%; aspect-ratio: 878 / 574; color: var(--color-primary-text); }
.clutch-flow > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.flow-line { fill: none; stroke: currentColor; stroke-width: 1.3; opacity: .55; }
.flow-return { stroke-dasharray: 5 7; opacity: .3; }
.flow-particle { fill: var(--color-primary-text); }
.flow-particles { pointer-events: none; }
.flow-motion-toggle { position: absolute; top: 0; right: 0; background: transparent; border: 0; padding: .6rem 0; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-body); cursor: pointer; text-decoration: underline; text-underline-offset: .3em; }
.flow-motion-toggle:focus-visible { outline: 2px solid var(--color-primary-text); outline-offset: 3px; }
.flow-node { fill: var(--color-surface); stroke: currentColor; stroke-width: 1.3; }
.flow-label { fill: var(--color-text); font-family: var(--font-family-base); font-weight: 700; font-size: 27px; text-anchor: middle; }
.flow-small { fill: var(--color-text-muted); font-size: 20px; }
.flow-choice {
  position: absolute; left: 46.697%; width: 20.501%; height: 31.359%;
  border: 1px solid var(--color-primary-text); border-radius: 50%;
  background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-family-base); font-weight: 700;
  font-size: clamp(11px, 2.7cqw, 24px); line-height: 1.6; padding: 0;
  cursor: pointer; transition: background-color .2s, box-shadow .2s;
}
.flow-choice-existing { top: 9.582%; }
.flow-choice-fde { top: 56.620%; }
.flow-choice small { display: block; font-size: .65em; }
.flow-choice:hover,.flow-choice[aria-pressed=true] { background: var(--color-primary-hover); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 12%, transparent); }
.flow-choice:focus-visible { outline: 2px solid var(--color-primary-text); outline-offset: 5px; }
[data-route=existing] .flow-route-fde,[data-route=fde] .flow-route-existing { opacity: .18; }
.about-visual .clutch-diagram-detail {
  position: absolute; top: 100%; left: 0; width: 100%; min-height: 3.3em;
  margin: 1.2rem 0 0; color: var(--color-text);
  font-family: var(--font-family-base); font-size: var(--font-size-body);
  font-weight: 700; letter-spacing: var(--letter-spacing-body); line-height: 1.65;
}
@media (max-width: 767px) {
  .about-visual[data-interactive] { margin-bottom: 7rem; }
  .flow-choice small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-choice { transition: none; }
}