/* ---- "how it works" flow: a curve that draws as you scroll, with a pulse travelling to each step ---- */
h1 em, h2 em { font-style: italic; color: var(--brand); font-weight: 500; }
.flow-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.flow-head h2 { font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.05; max-width: 14em; margin: .3rem 0 0; }
.flow-tag { font: 500 .8rem var(--mono); letter-spacing: .06em; color: var(--mute); padding-bottom: .6rem; }
.flow-tag::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-right: .5rem; animation: ping 1.8s infinite; box-shadow: 0 0 0 0 rgba(45,190,175,.6); }
.flow-box { position: relative; margin-top: 1.2rem; }
.flow-svg { display: block; width: 100%; height: 130px; overflow: visible; }
.flow-svg .rail { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 2 6; }
.flow-svg .line { fill: none; stroke: url(#flowgrad); stroke-width: 3; stroke-linecap: round; }
.flow-svg .dot { fill: var(--card); stroke: var(--line); stroke-width: 2; transition: fill .4s, stroke .4s, r .3s; }
.flow-svg .dot.on { fill: var(--brand); stroke: var(--brand); }
.flow-svg .pulse-c { fill: #f2b84b; filter: drop-shadow(0 0 8px rgba(242,184,75,.9)); }
.flow-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 1.2rem; }
.fstep { padding: 0 1.1rem 0 1.2rem; border-left: 1px solid var(--line); opacity: .5; transform: translateY(8px); transition: opacity .5s, transform .5s, border-color .5s; cursor: default; }
.fstep.on { opacity: 1; transform: none; border-left-color: var(--brand); }
.fstep .n { font: 500 .78rem var(--mono); color: var(--mute); letter-spacing: .08em; transition: color .4s; }
.fstep.on .n { color: var(--brand); }
.fstep h3 { font-size: 1.28rem; margin: .5rem 0 .5rem; }
.fstep p { font-size: .96rem; color: var(--ink2); margin: 0; }
.fstep:hover { opacity: 1; }
@media (max-width: 900px) {
  .flow-svg { display: none; }
  .flow-steps { grid-template-columns: 1fr; gap: 1.2rem; }
  .fstep { opacity: 1; transform: none; border-left: 3px solid var(--brand); }
}
@media (prefers-reduced-motion: reduce) { .fstep { opacity: 1; transform: none; } .flow-tag::before { animation: none; } }