.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); }

.c-act__movement { display: flex; flex-direction: column; gap: var(--space-lg); align-items: center; width: 100%; }
.c-act__note { color: var(--text-dim); font-size: var(--text-sm); line-height: var(--lh-cell); max-width: var(--measure); text-wrap: pretty; }

.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; }
/* The two rules below restyle c-pipeline's own elements from outside it, so an element renamed
   there has to be renamed here in the same change. */
.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;
}

/* The pattern-language word a diagram sits under (`for`), drawn above its row. */
.c-act__eyebrow { margin: 0; color: var(--text-dim); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; }