/* 06-components/_act.css */
/* ── c-act — the numbered-act section wrapper. A big phosphor act number styled like a
   boot-sequence step marker, a short imperative title, room for a supporting line or two,
   then the act's "scene" slot. Every numbered act reuses this frame. */
.c-act { display: flex; flex-direction: column; gap: var(--space-xl); align-items: center; text-align: center; }
.c-act__head { display: flex; flex-direction: column; gap: var(--space-sm); align-items: center; }
.c-act__title { font-size: var(--text-3xl); font-weight: var(--fw-bold); color: var(--text-bright); letter-spacing: var(--tracking-wide); }
.c-act__lead { color: var(--text-muted); font-size: var(--text-lg); line-height: var(--lh-cell); max-width: var(--measure); }

/* a movement — one paragraph of a compressed mode section, with its own box(es) and agent cards */
.c-act__movement { display: flex; flex-direction: column; gap: var(--space-lg); align-items: center; width: 100%; }
/* a movement's caveat/disclaimer — smaller and dimmer than the lead, sits under its box(es) */
.c-act__note { color: var(--text-dim); font-size: var(--text-sm); line-height: var(--lh-cell); max-width: var(--measure); text-wrap: pretty; }

/* the act's infographics — one or more horizontal sequence flows illustrating the stage */
.c-act__flows { display: flex; flex-direction: column; gap: var(--space-md); align-items: center; }
.c-act__flow { display: flex; flex-direction: column; gap: var(--space-2xs); align-items: center; }
.c-act__flow .c-pipeline { font-size: var(--text-md); }
.c-act__flow--branch .c-pipeline__stage { border-style: dashed; }
.c-act__flowcap {
  color: var(--text-dim);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}