/* Workflow builder — page-scoped additions on top of capability.css.
   Owner: page-agent/workflow-builder (storytelling fix pass, 2026-07-31).
   Everything scoped to .p-capability--workflow-builder so it never bleeds to
   sibling capability pages sharing capability.css.

   The cap-walk yellow placeholders are now built out as light, wireframe-style
   DASHBOARD mockups (white bg · grey skeleton shapes · hairlines · a single
   blue accent each), so Nacim sees the intended screenshot in place. Each tile
   keeps its data-ph id and carries a small "Mockup" corner chip so it stays
   identifiable + greppable until final product art lands. Tokens only. */

/* ---- placeholder identity: greppable + unmistakably a mockup ---- */
.p-capability--workflow-builder .wfb-mock__chip {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-placeholder-yellow);
  color: var(--color-black);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}
/* the designer-intent description (the old "Imagen (…)" tag) is kept in the DOM
   for grep + the VISUALS-TODO barrido, but visually hidden behind the mockup */
.p-capability--workflow-builder .wfb-mock__intent {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- mockup frame: the cap-tile becomes a light dashboard window ----
   Keep cap-tile on the slot so capability.css's :nth-child(even) row swap
   still alternates the media left/right, but replace its dot-grid frame with a
   clean window (bar + body). */
.p-capability--workflow-builder .cap-tile.wfb-mock {
  padding: 0;
  gap: 0;
  aspect-ratio: var(--ph-ar, 16 / 11);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: var(--color-white);
  background-image: none;
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  /* soft resting elevation so each mock reads as a real product window */
  box-shadow: none;
}

/* window title bar (traffic lights + a tab) */
.p-capability--workflow-builder .wfbm-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 13px;
  background: var(--color-grey-50);
  border-bottom: 1px solid var(--color-border-light);
}
.p-capability--workflow-builder .wfbm-lights { display: inline-flex; gap: 5px; }
.p-capability--workflow-builder .wfbm-lights i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-grey-200);
}
.p-capability--workflow-builder .wfbm-tab {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  font-size: 11px;
  color: var(--color-grey-400);
}

/* window body */
.p-capability--workflow-builder .wfbm-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px;
}
.p-capability--workflow-builder .wfbm-body--canvas {
  background-color: var(--color-white);
  background-image: radial-gradient(
    color-mix(in oklab, var(--color-grey-200) 55%, transparent) 1.1px,
    transparent 1.3px
  );
  background-size: 17px 17px;
}
.p-capability--workflow-builder .wfbm-body--split {
  display: grid;
  gap: 16px;
  align-items: center;
}

/* ---- skeleton primitives ---- */
.p-capability--workflow-builder .wfbm-sk {
  height: 6px;
  border-radius: 3px;
  background: var(--color-grey-100);
}
.p-capability--workflow-builder .wfbm-sk--w90 { width: 90%; }
.p-capability--workflow-builder .wfbm-sk--w70 { width: 70%; }
.p-capability--workflow-builder .wfbm-sk--w50 { width: 52%; }
.p-capability--workflow-builder .wfbm-sk--w40 { width: 40%; }

/* ============================================================
   v1 · the canvas — a KYC flow laid left → right (WYSIWYG nodes)
   ============================================================ */
.p-capability--workflow-builder .wfbm-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.p-capability--workflow-builder .wfbm-wire {
  flex: 0 0 auto;
  width: 22px;
  height: 2px;
  background: var(--color-grey-200);
}
.p-capability--workflow-builder .wfbm-pill {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
}
.p-capability--workflow-builder .wfbm-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-grey-300);
}
.p-capability--workflow-builder .wfbm-pill--result .wfbm-dot {
  border-color: var(--color-grey-400);
  background: var(--color-grey-100);
}
.p-capability--workflow-builder .wfbm-pill__lbl {
  font-size: 10px;
  color: var(--color-grey-400);
}
.p-capability--workflow-builder .wfbm-node {
  flex: 0 0 auto;
  width: 116px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 13px;
  padding: 9px;
  box-shadow: none;
}
.p-capability--workflow-builder .wfbm-node.is-selected {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-blue) 18%, transparent);
}
.p-capability--workflow-builder .wfbm-node__head {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.p-capability--workflow-builder .wfbm-node__type {
  font-size: 9px;
  color: var(--color-grey-400);
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-grey-50);
  border: 1px solid var(--color-border-light);
}
.p-capability--workflow-builder .wfbm-node.is-selected .wfbm-node__type {
  color: var(--color-blue);
  background: var(--color-blue-100);
  border-color: color-mix(in oklab, var(--color-blue) 30%, var(--color-white));
}
.p-capability--workflow-builder .wfbm-node__name {
  margin-top: 8px;
  text-align: center;
  font-size: 10px;
  color: var(--color-grey-400);
}
/* the inline phone screen inside a node (WYSIWYG) */
.p-capability--workflow-builder .wfbm-phone {
  width: 100%;
  aspect-ratio: 62 / 88;
  border-radius: 10px;
  background: var(--color-grey-50);
  border: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 11px 13px;
}
.p-capability--workflow-builder .wfbm-phone .wfbm-sk { width: 70%; }
/* canonical person treatment (ronda 3): the site user glyph inside a light
   circular chip — replaces the old bare oval silhouette Nacim disliked. Kept
   neutral grey so it never adds a 2nd blue accent to a mock (WB = one accent). */
.p-capability--workflow-builder .wfbm-face {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-grey-100);
  color: var(--color-grey-400);
}
.p-capability--workflow-builder .wfbm-face svg {
  width: 60%;
  height: 60%;
}
.p-capability--workflow-builder .wfbm-doc {
  width: 78%;
  height: 30px;
  border-radius: 5px;
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-200);
}
.p-capability--workflow-builder .wfbm-consent-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 82%;
}
.p-capability--workflow-builder .wfbm-consent-row i {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1.5px solid var(--color-grey-300);
}
.p-capability--workflow-builder .wfbm-consent-row .wfbm-sk { width: 100%; }

/* ============================================================
   v2 · the add-step menu open over the canvas + a dragged tile
   ============================================================ */
.p-capability--workflow-builder .wfbm-canvas-hint {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}
.p-capability--workflow-builder .wfbm-canvas-hint .wfbm-pill { width: 46px; height: 46px; }
.p-capability--workflow-builder .wfbm-wire--long { width: 64px; }
.p-capability--workflow-builder .wfbm-plus {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1.5px solid var(--color-grey-300);
  color: var(--color-grey-400);
  font-size: 15px;
  line-height: 1;
}
.p-capability--workflow-builder .wfbm-menu {
  position: relative;
  z-index: 2;
  width: 244px;
  margin: 44px auto 0;
  padding: 9px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 13px;
  box-shadow: none;
}
.p-capability--workflow-builder .wfbm-menu__title {
  font-size: 10px;
  color: var(--color-grey-400);
  padding: 4px 8px 9px;
}
.p-capability--workflow-builder .wfbm-menu__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px;
  border-radius: 9px;
}
.p-capability--workflow-builder .wfbm-menu__row.is-active { background: var(--color-blue-100); }
.p-capability--workflow-builder .wfbm-menu__ico {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--color-grey-100);
}
.p-capability--workflow-builder .wfbm-menu__row.is-active .wfbm-menu__ico {
  background: color-mix(in oklab, var(--color-blue) 26%, var(--color-white));
}
.p-capability--workflow-builder .wfbm-menu__txt { display: flex; flex-direction: column; gap: 3px; }
.p-capability--workflow-builder .wfbm-menu__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-grey-500);
}
.p-capability--workflow-builder .wfbm-menu__row.is-active .wfbm-menu__name { color: var(--color-blue); }
.p-capability--workflow-builder .wfbm-menu__sub {
  font-size: 10px;
  color: var(--color-grey-400);
}
.p-capability--workflow-builder .wfbm-ghost {
  position: absolute;
  right: 34px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 96px;
  padding: 9px;
  background: var(--color-white);
  border: 1px dashed var(--color-grey-300);
  border-radius: 11px;
  box-shadow: none;
  transform: rotate(-3deg);
}
.p-capability--workflow-builder .wfbm-ghost .wfbm-sk { width: 72%; }

/* ============================================================
   v3 · a Condition node + its config panel (If / AND / Then / Otherwise)
   ============================================================ */
.p-capability--workflow-builder .wfbm-body--cond { grid-template-columns: 0.82fr 1.18fr; }
.p-capability--workflow-builder .wfbm-mini-canvas {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 11px;
  border: 1px solid var(--color-border-light);
  background-color: var(--color-white);
  background-image: radial-gradient(
    color-mix(in oklab, var(--color-grey-200) 50%, transparent) 1.1px,
    transparent 1.3px
  );
  background-size: 15px 15px;
  padding: 16px 10px;
}
.p-capability--workflow-builder .wfbm-mininode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
}
.p-capability--workflow-builder .wfbm-mininode .wfbm-node__type { border-color: var(--color-border-light); }
.p-capability--workflow-builder .wfbm-diamond {
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--color-grey-300);
  border-radius: 4px;
  transform: rotate(45deg);
}
.p-capability--workflow-builder .wfbm-fork { width: 2px; height: 22px; background: var(--color-grey-200); }
.p-capability--workflow-builder .wfbm-mini-pills { display: flex; gap: 9px; }
.p-capability--workflow-builder .wfbm-mini-pill {
  font-size: 10px;
  color: var(--color-grey-400);
  padding: 5px 10px;
  border-radius: 9px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
}
.p-capability--workflow-builder .wfbm-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 13px;
  box-shadow: none;
}
.p-capability--workflow-builder .wfbm-panel__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-grey-500);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--color-border-light);
}
.p-capability--workflow-builder .wfbm-panel__label { font-size: 10px; color: var(--color-grey-400); }
.p-capability--workflow-builder .wfbm-rule {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--color-border-light);
  border-radius: 9px;
  background: var(--color-grey-50);
}
.p-capability--workflow-builder .wfbm-chip-sk {
  height: 13px;
  width: 78px;
  border-radius: 4px;
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-200);
}
.p-capability--workflow-builder .wfbm-chip-sk--sm { width: 46px; }
.p-capability--workflow-builder .wfbm-op { font-size: 10px; color: var(--color-grey-400); }
.p-capability--workflow-builder .wfbm-and {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-blue);
  background: var(--color-blue-100);
  padding: 4px 10px;
  border-radius: 999px;
}
.p-capability--workflow-builder .wfbm-branch {
  display: flex;
  align-items: center;
  gap: 10px;
}
.p-capability--workflow-builder .wfbm-branch__tag {
  flex: 0 0 auto;
  width: 62px;
  font-size: 10px;
  color: var(--color-grey-500);
}
.p-capability--workflow-builder .wfbm-branch .wfbm-sk { flex: 1 1 auto; }

/* ============================================================
   v4 · test → publish, and the flow live on a phone (split composite)
   ============================================================ */
.p-capability--workflow-builder .wfbm-body--publish { grid-template-columns: 1.05fr 0.95fr; }
.p-capability--workflow-builder .wfbm-publish {
  display: flex;
  flex-direction: column;
  gap: 13px;
  justify-content: center;
}
.p-capability--workflow-builder .wfbm-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.p-capability--workflow-builder .wfbm-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--color-grey-500);
  padding: 7px 11px;
  border-radius: 9px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
}
.p-capability--workflow-builder .wfbm-btn__ico {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--color-grey-300);
}
.p-capability--workflow-builder .wfbm-btn--publish {
  color: var(--color-white);
  background: var(--color-blue);
  border-color: var(--color-blue);
}
.p-capability--workflow-builder .wfbm-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--color-border-light);
  border-radius: 11px;
  background: var(--color-grey-50);
}
.p-capability--workflow-builder .wfbm-check-row { display: flex; align-items: center; gap: 10px; }
.p-capability--workflow-builder .wfbm-check {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-200);
}
.p-capability--workflow-builder .wfbm-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2.5px;
  width: 3.5px;
  height: 7px;
  border: solid var(--color-grey-400);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.p-capability--workflow-builder .wfbm-check-row .wfbm-sk { flex: 1 1 auto; }
.p-capability--workflow-builder .wfbm-check--lg { width: 19px; height: 19px; }
.p-capability--workflow-builder .wfbm-check--lg::after { left: 6.5px; top: 3.5px; width: 4px; height: 9px; }
.p-capability--workflow-builder .wfbm-published {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 1px;
}
/* right: QR + a phone running the published flow */
.p-capability--workflow-builder .wfbm-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.p-capability--workflow-builder .wfbm-qr {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 9px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
}
.p-capability--workflow-builder .wfbm-qr::before {
  content: "";
  position: absolute;
  inset: 8px;
  background-image: conic-gradient(
    var(--color-grey-400) 25%,
    transparent 0 50%,
    var(--color-grey-400) 0 75%,
    transparent 0
  );
  background-size: 7px 7px;
  opacity: 0.5;
}
.p-capability--workflow-builder .wfbm-qr__f {
  position: absolute;
  width: 17px;
  height: 17px;
  border: 3px solid var(--color-grey-500);
  border-radius: 3px;
  background: var(--color-white);
}
.p-capability--workflow-builder .wfbm-qr__f--tl { top: 8px; left: 8px; }
.p-capability--workflow-builder .wfbm-qr__f--tr { top: 8px; right: 8px; }
.p-capability--workflow-builder .wfbm-qr__f--bl { bottom: 8px; left: 8px; }
.p-capability--workflow-builder .wfbm-scan-lbl { font-size: 10px; color: var(--color-grey-400); }
.p-capability--workflow-builder .wfbm-device {
  position: relative;
  width: 98px;
  aspect-ratio: 98 / 176;
  border-radius: 18px;
  background: var(--color-white);
  border: 5px solid var(--color-grey-500);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 15px 13px 14px;
}
.p-capability--workflow-builder .wfbm-device__notch {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 4px;
  border-radius: 3px;
  background: var(--color-grey-200);
}
.p-capability--workflow-builder .wfbm-face--lg { width: 52px; height: 52px; margin-top: 6px; }
.p-capability--workflow-builder .wfbm-device .wfbm-sk { width: 66%; }
.p-capability--workflow-builder .wfbm-capture {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--color-grey-300);
  margin-top: auto;
}

/* ---- narrow screens: let the mockups shrink gracefully ---- */
@media (max-width: 600px) {
  .p-capability--workflow-builder .wfbm-node { width: 96px; }
  .p-capability--workflow-builder .wfbm-wire { width: 12px; }
  .p-capability--workflow-builder .wfbm-pill { width: 50px; height: 50px; }
  .p-capability--workflow-builder .wfbm-body--split { gap: 10px; padding: 14px; }
}

/* ============================================================
   RONDA 2 — interactions (Nacim: "interacciones si suman, p.ej.
   hover states en los mocks del walk"). The mock windows respond
   on hover and the canvas reads as a LIVE flow via one subtle
   ambient signal that echoes the interactive builder's blue
   spotlight above. Motion is scoped to this page, uses only
   design-system blue, and is fully disabled under reduced motion.
   No transforms on the reveal element — hover uses shadow/border/
   accent only, so it never fights the data-reveal transform. */

/* the mock window lifts on hover — deeper + bluer than the shared
   cap-tile hover, because these read as real product windows */
.p-capability--workflow-builder .cap-walk__row:hover .cap-tile.wfb-mock {
  border-color: color-mix(in oklab, var(--color-blue) 32%, var(--color-border-light));
  box-shadow: none;
}

/* v1 · the selected node's ring gently breathes so the canvas reads
   as live even at rest (mirrors the builder's pulsing spotlight);
   the whole node warms a touch when the row is hovered */
.p-capability--workflow-builder .wfbm-node.is-selected {
  animation: wfb-breathe 2.8s var(--ease-out-expo) infinite;
}
.p-capability--workflow-builder .cap-walk__row:hover .wfbm-node.is-selected .wfbm-node__type {
  background: color-mix(in oklab, var(--color-blue) 20%, var(--color-white));
}

/* v1 · a blue signal ripples through the flow on hover, staggered per
   wire so it travels Start → Result (the wires are span children 2–5
   of .wfbm-flow: pill, wire, wire, wire, wire, result-pill) */
.p-capability--workflow-builder .wfbm-flow .wfbm-wire { position: relative; overflow: hidden; }
.p-capability--workflow-builder .wfbm-flow .wfbm-wire::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-blue);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}
.p-capability--workflow-builder .cap-walk__row:hover .wfbm-flow .wfbm-wire::after {
  animation: wfb-flow 2s var(--ease-out-expo) infinite;
}
.p-capability--workflow-builder .cap-walk__row:hover .wfbm-flow .wfbm-wire:nth-of-type(3)::after { animation-delay: 0.26s; }
.p-capability--workflow-builder .cap-walk__row:hover .wfbm-flow .wfbm-wire:nth-of-type(4)::after { animation-delay: 0.52s; }
.p-capability--workflow-builder .cap-walk__row:hover .wfbm-flow .wfbm-wire:nth-of-type(5)::after { animation-delay: 0.78s; }

/* v4 · the publish button warms when its row is hovered */
.p-capability--workflow-builder .wfbm-btn--publish { transition: box-shadow 0.3s ease; }
.p-capability--workflow-builder .cap-walk__row:hover .wfbm-btn--publish {
  box-shadow: none;
}

@keyframes wfb-breathe {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-blue) 18%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--color-blue) 26%, transparent); }
}
@keyframes wfb-flow {
  0% { transform: scaleX(0); opacity: 0; }
  38% { transform: scaleX(1); opacity: 0.9; }
  70% { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .p-capability--workflow-builder .wfbm-node.is-selected,
  .p-capability--workflow-builder .cap-walk__row:hover .wfbm-flow .wfbm-wire::after {
    animation: none;
  }
  /* keep the selected node's resting blue ring identical to the static design */
  .p-capability--workflow-builder .wfbm-node.is-selected {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-blue) 18%, transparent);
  }
}

/* ══════════════════════════════════════════════════════════════════
   How-it-works · the morphing product card (.wfh) — Arturo 2026-08-04/05.
   Round 4 (Arturo 2026-08-05: "three backgrounds is too much — simplify
   and animate to create a story · one element per view"): the white deck
   card and the head rows are GONE — two layers only, the sol-how stage
   wash + the DS components themselves. Screen 1 = start from a template:
   the picker card hands off to the KYC template's assembled journey
   (Arturo 2026-08-05: templates lead the story; the old morphing
   node-card retired — steps 1+2 were too similar). Screen 2 = the
   add-step story, now also the node-vocabulary lesson: the + ripples
   ("clicked"), glides up, the real AddNodeMenu pops in under it
   (Modules / Processes / Conditions — no Results row; not a
   product menu entry). Screens 3–4 = the SVG scenes floating on the wash.
   Anatomy source: ms-incode-dashboard @ workflows-papercuts-fixes
   (PR #6231, .context/wfb-real-design-spec.md); product colors → site
   tokens (then-green #138855→green-600, red #E71111→red-500, pink
   #EB60C4→pink-500). Rail mechanic = agentic-trust at-how clone.
   ══════════════════════════════════════════════════════════════════ */

.p-wfh .wfh { display: flex; justify-content: center; align-items: center; }
.p-wfh .wfh__slot {
  display: flex;
  align-items: center; /* the deck centers in the reserved height, so
                          morphs grow/shrink around the middle (Arturo:
                          "center it so it doesn't move to the top") */
  width: min(100%, 540px);
  height: var(--wfh-slot-h, auto);
}
.p-wfh .wfh__deck { flex: 1; }
/* transparent stack — the stage wash is the only background */
.p-wfh .wfh__deck {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* the stacked screens size the implicit row to the TALLEST screen;
     when the deck morphs shorter, that row would overflow downward and
     seat the active scene ~80px below the stage's center. Centering the
     row makes the overflow split evenly, so every screen shares the
     deck's midline (Arturo 2026-08-05: "center it better"). */
  align-content: center;
  width: 100%;
  height: var(--wfh-screen-h, auto);
  transition: height 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-wfh .wfh__screen {
  grid-area: 1 / 1;
  align-self: center; /* morphs grow/shrink around the middle */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.p-wfh .wfh__screen.is-active {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.35s ease 0.05s;
}
.p-wfh .wfh__scene { display: block; width: 100%; height: auto; }

/* ── screen 01 · start from a template (picker → assembled journey) ──
   One-shot 5.2s timeline replaying per activation: the picker card
   rises, "KYC onboarding" flash-picks, the picker hands off to that
   template's journey — wires draw ahead of staggered node rises down
   the chain, Session Pass pops last (overshoot). Rest state = the
   flow, assembled. Easings per the animations.dev blueprint:
   entrances ease-out-cubic, wire draws ease-out-quad. The morphing
   node-card that lived here retired 2026-08-05 (Arturo: old steps 1+2
   too similar; the AddNodeMenu story on screen 02 carries the node
   vocabulary alone). */
.p-wfh .wfh-tpl {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 8px 0;
}
.p-wfh .wfh-tpl__swap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  width: 100%;
}
.p-wfh .wfh-tpl__swap > * { grid-area: 1 / 1; }
.p-wfh .wfh-tpl__menu {
  width: min(100%, 320px);
  padding: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-100);
  border-radius: 14px;
  box-shadow: none;
  transform-origin: top center;
  /* rest state = the story's end: picker gone, journey assembled */
  opacity: 0;
  pointer-events: none;
}
.p-wfh .wfh-menu__icon--tpl { color: var(--color-blue-500); }
/* the mini canvas: scene vocabulary + neutral wires and node-type dots */
.p-wfh .wfs-wire { stroke: var(--color-grey-300); stroke-width: 2.2; }
.p-wfh .wfs-dot-module { fill: var(--color-blue-500); }
.p-wfh .wfs-dot-process { fill: var(--color-purple-500); }
.p-wfh .wfs-t-spin {
  fill: none;
  stroke: var(--color-blue-500);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 0.78 0.22; /* the session-start spinner glyph, open arc */
}
@keyframes wfh-tpl-menu {
  0% { opacity: 0; transform: translateY(10px) scale(0.98); }
  7%, 33% { opacity: 1; transform: none; }
  40%, 100% { opacity: 0; transform: translateY(-6px) scale(0.985); }
}
@keyframes wfh-tpl-pick {
  0%, 17% { background: transparent; }
  23%, 29% { background: var(--color-blue-100); }
  35%, 100% { background: transparent; }
}
.p-wfh .is-active .wfh-tpl__menu { animation: wfh-tpl-menu 5.2s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
.p-wfh .is-active .wfh-tpl__pick { animation: wfh-tpl-pick 5.2s ease both; }
/* the journey assembles at ~1.9s, wire draws chasing node rises */
.p-wfh .wfs-t-pass { transform-box: fill-box; transform-origin: center; }
.p-wfh .is-active .wfs-t-start { animation: wfs-rise 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1.9s both; }
.p-wfh .is-active .wfs-t-w1 { animation: wfs-draw 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.25s both; }
.p-wfh .is-active .wfs-t-na { animation: wfs-rise 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 2.5s both; }
.p-wfh .is-active .wfs-t-w2 { animation: wfs-draw 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.85s both; }
.p-wfh .is-active .wfs-t-nb { animation: wfs-rise 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 3.1s both; }
.p-wfh .is-active .wfs-t-w3 { animation: wfs-draw 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3.5s both; }
.p-wfh .is-active .wfs-t-nc { animation: wfs-rise 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 3.95s both; }
.p-wfh .is-active .wfs-t-w4 { animation: wfs-draw 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 4.3s both; }
.p-wfh .is-active .wfs-t-pass { animation: wfs-pop 0.65s cubic-bezier(0, 0.75, 0.25, 1) 4.55s both; }

/* type pill + node name — shared by screen 02's placed Face Auth node */
.p-wfh .wfh-typepill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
}
.p-wfh .wfh-typepill--module { background: var(--color-blue-100); color: var(--color-blue-500); }
.p-wfh .wfh-mnode__name {
  margin: 12px 0 0;
  width: 240px;
  text-align: center;
  font-size: var(--fs-body, 16px);
  font-weight: 500;
  color: var(--color-black);
}

/* ── screen 02 · the add-step story (+ ripple → glide up → menu) ── */
.p-wfh .wfh-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
}
.p-wfh .wfh-add__plus {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-blue-500);
  color: var(--color-white);
}
.p-wfh .wfh-add__ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-blue-500);
  opacity: 0;
}
.p-wfh .wfh-add__stem {
  width: 2px;
  height: 26px;
  background: var(--color-grey-200);
}
.p-wfh .wfh-add__menu {
  width: min(100%, 320px);
  padding: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-100);
  border-radius: 14px;
  box-shadow: none;
  transform-origin: top center;
}
.p-wfh .wfh-menu__search {
  margin-bottom: 10px;
  padding: 11px 14px;
  border: 1px solid var(--color-grey-100);
  border-radius: var(--radius-md);
  background: var(--color-grey-50);
  font-size: var(--fs-sm);
  color: var(--color-grey-400);
}
.p-wfh .wfh-menu__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
}
.p-wfh .wfh-menu__row--pick { background: var(--color-grey-50); }
.p-wfh .wfh-menu__icon { display: grid; place-items: center; flex-shrink: 0; }
.p-wfh .wfh-menu__icon--module { color: var(--color-blue-500); }
.p-wfh .wfh-menu__icon--process { color: var(--color-purple-500); }
.p-wfh .wfh-menu__icon--cond { color: var(--color-pink-500); }
.p-wfh .wfh-menu__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-wfh .wfh-menu__txt b {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-grey-500);
}
.p-wfh .wfh-menu__txt small { font-size: var(--fs-xs); color: var(--color-grey-400); }
.p-wfh .wfh-menu__go {
  display: grid;
  place-items: center;
  margin-left: auto;
  color: var(--color-grey-400);
  flex-shrink: 0;
}
/* the story timeline — 5.2s, replays on every activation:
   click (ripple) → the + glides up → menu pops → Modules picked →
   menu hands off to the Face Auth node. Entrances ease-out, the +'s
   on-screen move ease-in-out (animations.dev blueprint). */
.p-wfh .wfh-add__swap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.p-wfh .wfh-add__swap > * { grid-area: 1 / 1; }
.p-wfh .wfh-add__menu { align-self: start; }
.p-wfh .wfh-add__module {
  align-self: start;
  width: 288px;
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-100);
  border-radius: 22px;
  box-shadow: none;
}
.p-wfh .wfh-fauth {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 240px;
  margin-top: 12px;
  padding: 16px 14px 14px;
  border: 1px solid var(--color-grey-100);
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: none;
}
.p-wfh .wfh-fauth__h {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-black);
}
.p-wfh .wfh-fauth__face { width: 128px; height: 128px; margin-top: 8px; }
/* real product illustration, retinted: product #006AFF → blue-500, neutral
   greys → the grey ramp (stops styled here so no hex rides in the markup) */
.p-wfh .wfh-fa__disc { fill: var(--color-blue-100); }
.p-wfh .wfh-fa__shirt { fill: var(--color-white); }
.p-wfh .wfh-fa__shade { fill: var(--color-grey-200); }
.p-wfh .wfh-fa__jacket { fill: var(--color-blue-500); }
.p-wfh .wfh-fa-stop--blue { stop-color: var(--color-blue-500); }
.p-wfh .wfh-fa-stop--white { stop-color: var(--color-white); }
.p-wfh .wfh-fa-stop--grey1 { stop-color: var(--color-grey-100); }
.p-wfh .wfh-fa-stop--grey2 { stop-color: var(--color-grey-200); }
.p-wfh .wfh-fa-stop--grey3 { stop-color: var(--color-grey-300); }
.p-wfh .wfh-fauth__ring {
  fill: none;
  stroke-width: 9; /* asset-native; ≈4px at the 128px render */
  transform-box: fill-box;
  transform-origin: center;
  animation: wfh-fauth-ring 3.2s linear infinite; /* gradient tail sweeps = the product scan */
}
@keyframes wfh-fauth-ring { to { transform: rotate(360deg); } }
.p-wfh .wfh-fauth__cap {
  margin-top: 10px;
  font-size: 10px;
  color: var(--color-grey-400);
  text-align: center;
}
.p-wfh .wfh-fauth__btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 30px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--color-blue-500);
}
.p-wfh .wfh-fauth__btn i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--color-white) 35%, transparent);
  border-top-color: var(--color-white);
  animation: wfh-fauth-ring 1.1s linear infinite;
}
/* rest state = the story's end: menu gone, Face Auth placed */
.p-wfh .wfh-add__menu { opacity: 0; pointer-events: none; }

@keyframes wfh-add-plus {
  0%, 20% { transform: translateY(170px); }
  34%, 100% { transform: translateY(0); }
}
@keyframes wfh-add-ripple {
  0%, 8% { opacity: 0; transform: scale(1); }
  14% { opacity: 0.5; transform: scale(1.1); }
  30%, 100% { opacity: 0; transform: scale(2.4); }
}
@keyframes wfh-add-stem {
  0%, 34% { transform: scaleY(0); }
  42%, 100% { transform: scaleY(1); }
}
@keyframes wfh-add-menu {
  0%, 36% { opacity: 0; transform: translateY(-8px) scale(0.98); }
  46%, 62% { opacity: 1; transform: none; }
  70%, 100% { opacity: 0; transform: translateY(-4px) scale(0.985); }
}
@keyframes wfh-add-pick {
  0%, 52% { background: var(--color-grey-50); }
  58%, 64% { background: var(--color-blue-100); }
  70%, 100% { background: var(--color-grey-50); }
}
@keyframes wfh-add-module {
  0%, 68% { opacity: 0; transform: translateY(10px) scale(0.96); }
  82%, 100% { opacity: 1; transform: none; }
}
.p-wfh .is-active .wfh-add__plus { animation: wfh-add-plus 5.2s cubic-bezier(0.645, 0.045, 0.355, 1) both; }
.p-wfh .is-active .wfh-add__ripple { animation: wfh-add-ripple 5.2s ease-out both; }
.p-wfh .is-active .wfh-add__ripple--late { animation-delay: 0.14s; }
.p-wfh .wfh-add__stem { transform-origin: top; }
.p-wfh .is-active .wfh-add__stem { animation: wfh-add-stem 5.2s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
.p-wfh .is-active .wfh-add__menu { animation: wfh-add-menu 5.2s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
.p-wfh .is-active .wfh-menu__row--pick { animation: wfh-add-pick 5.2s ease both; }
.p-wfh .is-active .wfh-add__module { animation: wfh-add-module 5.2s cubic-bezier(0.215, 0.61, 0.355, 1) both; }

/* ── screens 03–04 · SVG scene vocabulary (fills/strokes, tokens) ── */
.p-wfh .wfs-node { fill: var(--color-white); stroke: var(--color-grey-200); stroke-width: 1.7; }
.p-wfh .wfs-node-ok { fill: var(--color-white); stroke: var(--color-green-600); stroke-width: 1.5; }
.p-wfh .wfs-card { fill: var(--color-white); stroke: var(--color-grey-100); stroke-width: 1.5; }
.p-wfh .wfs-pill-cond-bg { fill: var(--color-pink-100); }
.p-wfh .wfs-pill-cond-s { stroke: var(--color-pink-500); stroke-width: 1.7; stroke-linejoin: round; }
.p-wfh .wfs-branch-then { fill: var(--color-white); stroke: var(--color-green-600); stroke-width: 1.5; }
.p-wfh .wfs-branch-otherwise { fill: var(--color-white); stroke: var(--color-red-500); stroke-width: 1.5; }
.p-wfh .wfs-wire-then { stroke: var(--color-green-600); stroke-width: 2.2; }
.p-wfh .wfs-wire-otherwise { stroke: var(--color-red-500); stroke-width: 2.2; }
.p-wfh .wfs-handle { fill: var(--color-blue-500); }
.p-wfh .wfs-white-s { stroke: var(--color-white); stroke-width: 2.2; stroke-linecap: round; }
.p-wfh .wfs-green-s { stroke: var(--color-green-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-wfh .wfs-red-s { stroke: var(--color-red-500); stroke-width: 1.8; stroke-linecap: round; }
.p-wfh .wfs-okbg { fill: var(--color-green-600); }
.p-wfh .wfs-ctabg { fill: var(--color-blue-500); }
.p-wfh .wfs-qr-frame { fill: var(--color-white); stroke: var(--color-grey-100); }
.p-wfh .wfs-qr-ink rect { fill: var(--color-black); }
.p-wfh .wfs-qr-ink .wfs-qr-gap { fill: var(--color-white); }
.p-wfh .wfh__scene text { font-family: var(--font-sans); }
.p-wfh .wfs-label { font-size: 22px; font-weight: 500; fill: var(--color-grey-600); }
.p-wfh .wfs-typelabel { font-size: 17px; font-weight: 500; }
.p-wfh .wfs-fill-pink { fill: var(--color-pink-500); }
.p-wfh .wfs-fill-green { fill: var(--color-green-600); }
.p-wfh .wfs-fill-red { fill: var(--color-red-500); }
.p-wfh .wfs-desc { font-size: 16px; fill: var(--color-grey-400); }
.p-wfh .wfs-rule { font-size: 20px; fill: var(--color-grey-500); }
.p-wfh .wfs-rule-if { font-weight: 700; fill: var(--color-grey-600); }
.p-wfh .wfs-branchlabel { font-size: 18px; font-weight: 500; }
.p-wfh .wfs-oklabel { font-size: 20px; font-weight: 700; fill: var(--color-grey-600); }
.p-wfh .wfs-ctalabel { font-size: 19px; font-weight: 600; fill: var(--color-white); }

/* scene motion (site idioms; replay on activation) */
@keyframes wfs-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes wfs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wfs-draw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@keyframes wfs-pop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}
/* soft pop for the branch pills sitting on the wires — starts near
   rest (0.85, not 0) per the animations.dev enter rule */
@keyframes wfs-pill {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
/* ─────────────────────────────────────────────────────────
 * SCREEN 03 STORYBOARD — decision logic, one branch at a time.
 * The fork used to draw both wires at once (the red wire started
 * while Session Failed was still landing), so IF → Then → Otherwise
 * read as simultaneous noise. Each branch now resolves fully, with
 * a beat between them.
 *
 *     0ms  condition card rises
 *   550ms  green wire draws toward Then
 *   700ms  Then pill pops as the wire passes it
 *   950ms  wire lands — handle dot
 *  1050ms  Session Failed pops
 *          · beat — the Then branch is resolved ·
 *  1800ms  red wire draws toward Otherwise (longer path)
 *  2100ms  Otherwise pill pops as the wire passes it
 *  2450ms  wire lands — handle dot
 *  2550ms  Session Pass pops (settled ~3.1s into the 6s hold)
 * ───────────────────────────────────────────────────────── */
.p-wfh .wfs-s3-fail, .p-wfh .wfs-s3-pass,
.p-wfh .wfs-s3-then, .p-wfh .wfs-s3-otherwise {
  transform-box: fill-box;
  transform-origin: center;
}
.p-wfh .is-active .wfs-s3-cond { animation: wfs-rise 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
.p-wfh .is-active .wfs-s3-w1 { animation: wfs-draw 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.55s both; }
.p-wfh .is-active .wfs-s3-then { animation: wfs-pill 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s both; }
.p-wfh .is-active .wfs-s3-d1 { animation: wfs-fade 0.25s ease 0.95s both; }
.p-wfh .is-active .wfs-s3-fail { animation: wfs-pop 0.6s cubic-bezier(0, 0.75, 0.25, 1) 1.05s both; }
.p-wfh .is-active .wfs-s3-w2 { animation: wfs-draw 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.8s both; }
.p-wfh .is-active .wfs-s3-otherwise { animation: wfs-pill 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) 2.1s both; }
.p-wfh .is-active .wfs-s3-d2 { animation: wfs-fade 0.25s ease 2.45s both; }
.p-wfh .is-active .wfs-s3-pass { animation: wfs-pop 0.6s cubic-bezier(0, 0.75, 0.25, 1) 2.55s both; }
.p-wfh .wfs-s4-pop { transform-box: fill-box; transform-origin: center; }
.p-wfh .is-active .wfs-s4-check { animation: wfs-fade 0.5s ease 0.2s both; }
.p-wfh .is-active .wfs-s4-pop { animation: wfs-pop 0.7s cubic-bezier(0, 0.75, 0.25, 1) 0.7s both; }
.p-wfh .is-active .wfs-s4-cta { animation: wfs-rise 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1.2s both; }
.p-wfh .is-active .wfs-s4-qr { animation: wfs-rise 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1.65s both; }

/* jump-free rail (agentic-trust override) */
.p-wfh .sol-how__reveal {
  display: block;
  height: 0;
  overflow: hidden;
  transition: height 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-wfh .sol-how__step.is-active .sol-how__reveal {
  height: var(--wfh-reveal-h, 78px);
}
.p-wfh .sol-how__line { padding-top: 10px; }

/* scroll-walk (.is-float, set by workflow-builder-how.js) — the pin, the
   scrubbed underline and the band math come from solution.css verbatim
   (it loads after this sheet); two carve-outs where its float rules
   assume the solution pages' phone walk:
   1 · descriptions open to the MEASURED height, not solution.css's fixed
       78px — ours vary, --wfh-reveal-h is the tallest line (set by JS) */
.p-solution.p-wfh .sol-flow-wrap.is-float .sol-how__step.is-active .sol-how__reveal {
  height: var(--wfh-reveal-h, 78px);
}
/* 2 · seat: solution.css's base stage rides the traveler's settled
       translateY(24px); this walk centers via the pin, so it seats at
       true 0. Visibility itself is NOT this rule's job anymore — the
       wrap's data-sol-standalone opts the stage out of the traveling-
       phone handoff (its :not() guards), so the normal [data-reveal]
       reveal runs regardless of this rule (opacity kept as a second
       layer only). */
.p-wfh .sol-flow-wrap.is-float .sol-how__stage.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .p-wfh .wfh__deck,
  .p-wfh .wfh__screen,
  .p-wfh .sol-how__reveal { transition: none; }
  /* .wfh-tpl__menu keeps its rest-state opacity 0 — the static frame is
     the assembled journey (.wfh__scene * already covers its elements) */
  .p-wfh .wfh__scene *,
  .p-wfh .wfh-tpl__menu,
  .p-wfh .wfh-tpl__pick,
  .p-wfh .wfh-add__plus,
  .p-wfh .wfh-add__ripple,
  .p-wfh .wfh-add__stem,
  .p-wfh .wfh-add__menu,
  .p-wfh .wfh-add__module,
  .p-wfh .wfh-menu__row--pick,
  .p-wfh .wfh-fauth__ring,
  .p-wfh .wfh-fauth__btn i { animation: none !important; }
}

@media (max-width: 1023px) {
  .p-wfh .wfh { margin-top: 34px; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO visual (.wfbh) — Arturo 2026-08-07, feat/wfb-hero-visual.
   The hero splits copy | visual (the uicb-hero precedent) and the
   visual plays the page's promise as a ~12.6s loop. TWO layers: the
   720×520 SVG scene (.wfbh__scene — canvas, publish button, Live pill)
   and a DOM phone bezel (.wfbh-phone) laid over it in % of that box.

     phase .is-run     the canvas assembles itself (wire draws chasing
                       node rises — the shipped wfs recipe), then
                       Save & Publish pops and takes the click
     phase .is-docked  publish IS the morph: the whole canvas group
                       transitions to a small flow docked left while
                       the phone rises right; the Live pill lands
     phase .is-live    the phone steps the four REAL end-user screens
                       (ID Capture → Face Capture → Face Match →
                       Session Pass) and the MATCHING canvas node rings
                       blue in sync — the WYSIWYG translation, the one
                       story the interactive demo below never shows
     phase .is-void    0.4s fade, then the machine restarts

   The screens are the canonical vector product components the rest of
   the site runs (IdCapture3 · Selfie3 · FaceMatch1 · Selfie7), all
   showing the same person so the journey reads as one identity —
   Nacim's 2026-08-10 note, "in the hero visual let's use the real ui
   for the core part". They replaced hand-drawn SVG screens; they can't
   nest inside .wfbh__scene because each ships its own <svg>.

   Phase classes set by /js/behaviors/workflow-builder-hero.js (runs
   only in view; loops). Base state (no JS) = the assembled canvas.
   Reduced motion (.is-still, set by JS + the media block as backup)
   = the composed docked frame resting on Session pass. Canvas geometry
   mirrors the how-it-works wfs scenes (720-wide viewBox, 22px labels).
   Tokens only.
   ══════════════════════════════════════════════════════════════════ */

/* --- split the family hero: copy left · visual right (≥1024) --- */
.p-capability--workflow-builder .wfbh-hero { display: grid; gap: 40px; align-items: center; }
.p-capability--workflow-builder .wfbh-copy { min-width: 0; }
.p-capability--workflow-builder .wfbh {
  position: relative; /* positioning context for the DOM phone bezel */
  width: 100%;
  /* platform hero visuals share one 520px envelope (Sofia 2026-08-17:
     unify the real estate across /platform/) */
  max-width: 520px;
  margin-top: 8px;
}
@media (min-width: 1024px) {
  .p-capability--workflow-builder .wfbh-hero {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    column-gap: 48px;
  }
  /* The copy column narrows beside the visual, so the 24ch clamp comes off
     and the title takes the column. It KEEPS the family 56px: the size
     step-down that used to live here (40px @1024 / 44px @1440) was retired
     2026-08-10 (Arturo — "I don't like the inconsistency of a smaller
     typography size") by shortening the h1 instead. Every /platform/ page
     now shares one scale: 36 / 48 / 56 from capability.css.
     If you retitle this page, re-measure — the h1 has to hold 2 lines at
     1024, 1280 AND 1440. 1280 is the tightest gate (453px column), and the
     limit is rendered width, not character count: 37 chars can fail here
     while 37 chars pass on case-management. */
  .p-capability--workflow-builder .wfbh-copy .cap-hero__title { max-width: 100%; }
  .p-capability--workflow-builder .wfbh-copy .cap-hero__sub { max-width: 100%; }
  .p-capability--workflow-builder .wfbh {
    max-width: 520px; /* was 640 — the one visual that outgrew the family */
    margin-top: 0;
    justify-self: end;
  }
}

/* --- the scene --- */
.p-capability--workflow-builder .wfbh__scene {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.4s ease;
}
.p-capability--workflow-builder .wfbh.is-void .wfbh__scene { opacity: 0; }
.p-capability--workflow-builder .wfbh__scene text { font-family: var(--font-sans); }

/* canvas vocabulary (mirrors the wfs scene classes) */
.p-capability--workflow-builder .wfbh-node { fill: var(--color-white); stroke: var(--color-grey-200); stroke-width: 1.7; }
.p-capability--workflow-builder .wfbh-handle { fill: var(--color-blue-500); }
.p-capability--workflow-builder .wfbh-wire { stroke: var(--color-grey-300); stroke-width: 2.2; }
.p-capability--workflow-builder .wfbh-dot--module { fill: var(--color-blue-500); }
.p-capability--workflow-builder .wfbh-dot--process { fill: var(--color-purple-500); }
.p-capability--workflow-builder .wfbh-label { font-size: 22px; font-weight: 500; fill: var(--color-grey-600); }
.p-capability--workflow-builder .wfbh-spin {
  fill: none;
  stroke: var(--color-blue-500);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 0.78 0.22; /* the session-start spinner glyph, open arc */
}
.p-capability--workflow-builder .wfbh-green-s {
  fill: none;
  stroke: var(--color-green-600);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* sync rings — lit one at a time during .is-live */
.p-capability--workflow-builder .wfbh-hl {
  fill: none;
  stroke: var(--color-blue-500);
  stroke-width: 3;
  opacity: 0;
}

/* Save & Publish */
.p-capability--workflow-builder .wfbh-pub { opacity: 0; }
.p-capability--workflow-builder .wfbh-pub__btn { fill: var(--color-blue-500); }
.p-capability--workflow-builder .wfbh-pub__lbl { font-size: 19px; font-weight: 600; fill: var(--color-white); }
.p-capability--workflow-builder .wfbh-pub__ripple {
  fill: none;
  stroke: var(--color-blue-500);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* Live pill */
.p-capability--workflow-builder .wfbh-livepill { opacity: 0; transition: opacity 0.5s ease; }
.p-capability--workflow-builder .wfbh-livepill__bg { fill: var(--color-white); stroke: var(--color-green-600); stroke-width: 1.5; }
.p-capability--workflow-builder .wfbh-livepill__dot { fill: var(--color-green-600); }
.p-capability--workflow-builder .wfbh-livepill__lbl { font-size: 18px; font-weight: 600; fill: var(--color-grey-600); }

/* the phone — a DOM bezel holding the four canonical vector product screens
   (IdCapture3 · Selfie3 · FaceMatch1 · Selfie7). It sits OUTSIDE .wfbh__scene
   because each screen component ships its own <svg>; the bezel is placed in
   % of the scene box so it tracks the SVG at every breakpoint. Geometry
   inherited from the retired SVG frame (x483 y64 184×392 of a 720×520 box):
   left 483/720 · top 64/520 · width 184/720. Bezel recipe = the site's house
   frame (solution.css sol-stage__frame / accessibility axh-phone). */
.p-capability--workflow-builder .wfbh-phone {
  position: absolute;
  left: 67.08%;
  top: 12.31%;
  width: 25.56%;
  display: grid; /* stacks the four screens so they crossfade in place */
  padding: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 26px;
  box-shadow: none;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.p-capability--workflow-builder .wfbh-scr {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  opacity: 0;
}
.p-capability--workflow-builder .wfbh-scr--1 { opacity: 1; }
/* the baked iOS status bars retire at this scale — they'd read as noise in a
   ~155px-wide phone (same call accessibility.css makes for .s3-status) */
.p-capability--workflow-builder .wfbh .idc-status,
.p-capability--workflow-builder .wfbh .s3-status,
.p-capability--workflow-builder .wfbh .s7-status,
.p-capability--workflow-builder .wfbh .fm-status { display: none; }
/* Selfie3Screen ships BOTH captions visible — every consumer has to hide one
   per instance or they superimpose (see the same note in
   reusable-identity.css § .ri-s2-screen). We hold the capture instruction and
   keep .s3-ring-scan, so the screen reads mid-capture next to the ringed
   Face Capture node. */
.p-capability--workflow-builder .wfbh .s3-caption-ready { display: none; }

/* --- phase .is-run · the canvas assembles, publish pops --- */
.p-capability--workflow-builder .wfbh-b { transform-box: fill-box; transform-origin: center; }
.p-capability--workflow-builder .wfbh.is-run .wfbh-b--start { animation: wfbh-rise 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s both; }
.p-capability--workflow-builder .wfbh.is-run .wfbh-w--1 { animation: wfbh-draw 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both; }
.p-capability--workflow-builder .wfbh.is-run .wfbh-b--id { animation: wfbh-rise 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s both; }
.p-capability--workflow-builder .wfbh.is-run .wfbh-w--2 { animation: wfbh-draw 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.05s both; }
.p-capability--workflow-builder .wfbh.is-run .wfbh-b--selfie { animation: wfbh-rise 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 1.25s both; }
.p-capability--workflow-builder .wfbh.is-run .wfbh-w--3 { animation: wfbh-draw 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s both; }
.p-capability--workflow-builder .wfbh.is-run .wfbh-b--match { animation: wfbh-rise 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 2.1s both; }
.p-capability--workflow-builder .wfbh.is-run .wfbh-w--4 { animation: wfbh-draw 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.45s both; }
.p-capability--workflow-builder .wfbh.is-run .wfbh-b--pass { animation: wfbh-pop 0.65s cubic-bezier(0, 0.75, 0.25, 1) 2.7s both; }
.p-capability--workflow-builder .wfbh.is-run .wfbh-pub { animation: wfbh-rise 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 3.4s both; }
.p-capability--workflow-builder .wfbh.is-run .wfbh-pub__btn {
  transform-box: fill-box;
  transform-origin: center;
  animation: wfbh-press 0.35s ease 4.1s both;
}
.p-capability--workflow-builder .wfbh.is-run .wfbh-pub__ripple { animation: wfbh-ripple 0.7s ease-out 4.1s both; }

/* --- phase .is-docked · publish is the morph --- */
.p-capability--workflow-builder .wfbh-canvas {
  transform-box: view-box;
  transform-origin: 0 0;
  transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-capability--workflow-builder .wfbh.is-docked .wfbh-canvas { transform: translate(-13px, 111px) scale(0.62); }
/* later than the .is-run rule at equal specificity, so the fade wins */
.p-capability--workflow-builder .wfbh.is-docked .wfbh-pub { animation: wfbh-out 0.4s ease both; }
.p-capability--workflow-builder .wfbh.is-docked .wfbh-phone {
  opacity: 1;
  transform: none;
  transition-delay: 0.25s, 0.25s;
}
.p-capability--workflow-builder .wfbh.is-docked .wfbh-livepill { opacity: 1; transition-delay: 1s; }

/* --- phase .is-live · the phone steps, the canvas rings in sync ---
   One 5.6s clock, four ~25% windows with 4%-wide crossfades:
   ID 0–25 · selfie 25–50 · verifying 50–75 · pass 75–100 (stays). */
.p-capability--workflow-builder .wfbh.is-live .wfbh-scr--1 { animation: wfbh-scr1 5.6s linear both; }
.p-capability--workflow-builder .wfbh.is-live .wfbh-scr--2 { animation: wfbh-scr2 5.6s linear both; }
.p-capability--workflow-builder .wfbh.is-live .wfbh-scr--3 { animation: wfbh-scr3 5.6s linear both; }
.p-capability--workflow-builder .wfbh.is-live .wfbh-scr--4 { animation: wfbh-scr4 5.6s linear both; }
.p-capability--workflow-builder .wfbh.is-live .wfbh-hl--1 { animation: wfbh-hl1 5.6s linear both; }
.p-capability--workflow-builder .wfbh.is-live .wfbh-hl--2 { animation: wfbh-hl2 5.6s linear both; }
.p-capability--workflow-builder .wfbh.is-live .wfbh-hl--3 { animation: wfbh-hl3 5.6s linear both; }
.p-capability--workflow-builder .wfbh.is-live .wfbh-hl--4 { animation: wfbh-hl4 5.6s linear both; }

@keyframes wfbh-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes wfbh-draw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@keyframes wfbh-pop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes wfbh-press {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(0.955); }
}
@keyframes wfbh-ripple {
  0% { opacity: 0.5; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes wfbh-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(6px); }
}
@keyframes wfbh-scr1 { 0%, 21% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes wfbh-scr2 { 0%, 21% { opacity: 0; } 25%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes wfbh-scr3 { 0%, 46% { opacity: 0; } 50%, 71% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes wfbh-scr4 { 0%, 71% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes wfbh-hl1 { 0% { opacity: 0; } 3%, 21% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes wfbh-hl2 { 0%, 21% { opacity: 0; } 25%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes wfbh-hl3 { 0%, 46% { opacity: 0; } 50%, 71% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes wfbh-hl4 { 0%, 71% { opacity: 0; } 75%, 100% { opacity: 1; } }

/* --- reduced motion / .is-still · the composed docked frame --- */
.p-capability--workflow-builder .wfbh.is-still .wfbh-canvas {
  transition: none;
  transform: translate(-13px, 111px) scale(0.62);
}
.p-capability--workflow-builder .wfbh.is-still .wfbh-phone { transition: none; opacity: 1; transform: none; }
.p-capability--workflow-builder .wfbh.is-still .wfbh-livepill { transition: none; opacity: 1; }
.p-capability--workflow-builder .wfbh.is-still .wfbh-scr--1 { opacity: 0; }
.p-capability--workflow-builder .wfbh.is-still .wfbh-scr--4 { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* .wfbh-phone * covers the real screen components now that they live in the
     DOM — they ship their own idle animations (e.g. the s3 scan ring) */
  .p-capability--workflow-builder .wfbh__scene *,
  .p-capability--workflow-builder .wfbh-phone * { animation: none !important; }
  .p-capability--workflow-builder .wfbh__scene,
  .p-capability--workflow-builder .wfbh-canvas,
  .p-capability--workflow-builder .wfbh-phone,
  .p-capability--workflow-builder .wfbh-livepill { transition: none; }
}