/* Steps Flow — kabdalis2 design system. */
.b-flow{
    list-style:none; margin:0; padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:clamp(18px,3vw,32px);
}
.b-flow__step{ position:relative; display:flex; flex-direction:column; gap:8px; }
/* Connector line between steps (desktop). */
.b-flow__step:not(:last-child)::after{
    content:""; position:absolute; top:21px; left:calc(50% + 24px); right:calc(-50% + 24px);
    height:2px; background:repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 13px);
}
.b-flow__num{
    width:42px; height:42px; border-radius:50%;
    display:grid; place-items:center;
    font-family:var(--font-display); font-weight:var(--display-w); font-size:1.1rem;
    color:var(--on-accent); background:var(--accent);
    box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.b-flow__title{ margin:.2em 0 0; font-size:1.1rem; line-height:1.2; color:var(--ink); }
.b-flow__text{ margin:0; font-size:.95rem; line-height:1.5; color:var(--ink-soft); }
.b-flow--editor .b-flow__step{ background:var(--surface2); padding:14px; border-radius:var(--radius-sm); }
.b-flow__rm{ position:absolute; top:6px; right:6px; min-width:24px; height:24px; padding:0; }
.b-flow__add{ grid-column:1 / -1; justify-self:start; }
@media (max-width:560px){ .b-flow__step:not(:last-child)::after{ display:none; } }