/* ── the five-gate flow diagram ──────────────────────────────────────────────────────────────
   Shared by door/ (hero aside) and experience/ (beat 01). Extracted from the door rather than
   copy-pasted: it is literally the argument both pages make, and two drifting copies of the
   argument is how a route stops feeling like one studio.

   Consumers supply the house tokens (--rule2, --fg, --orange, --accent, --glow, --dim, --mono).

   Geometry note: the rail sits at y=64 within a 110px box. Bars are bottom-anchored to it so the
   constrained one grows UPWARD, and labels are absolutely placed so a growing bar can never
   shunt one out of line with its neighbours. */

.flow{position:relative;height:110px;--gate-w:88px}
.rail{position:absolute;left:0;right:0;top:64px;height:1px;background:var(--rule2)}

.dot{
  position:absolute;top:60px;width:9px;height:9px;margin-left:-4.5px;
  background:var(--fg);border-radius:50%;opacity:.72;will-change:transform;
}
.dot.q{background:var(--orange);opacity:1}

.gate{position:absolute;top:0;bottom:0;transform:translateX(-50%);text-align:center;width:var(--gate-w)}
.gate .bar{
  position:absolute;left:50%;bottom:68px;margin-left:-1px;
  width:2px;height:34px;background:var(--rule2);
  transition:background .45s,box-shadow .45s,height .45s;
}
.gate .nm{
  position:absolute;left:0;right:0;top:86px;
  font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);transition:color .45s;
}
/* --accent, not --acid: acid is a 2px line here with no text on it, and acid-on-cream is barely
   visible. The token already re-maps to ink in light, which is exactly the intent. */
.gate.on .bar{background:var(--accent);height:50px;box-shadow:0 0 22px 3px var(--glow)}
.gate.on .nm{color:var(--fg)}

@media (max-width:900px){
  .flow{--gate-w:64px}
  .gate .nm{font-size:8px;letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){
  .dot,.gate .bar,.gate .nm{transition:none}
}