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

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

.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;
  
  box-shadow: none;
}

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

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

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

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

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

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

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

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

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

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

@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; }
}

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

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

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

.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;
  }
  
  .p-capability--workflow-builder .wfbm-node.is-selected {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-blue) 18%, transparent);
  }
}

.p-wfh .wfh { display: flex; justify-content: center; align-items: center; }
.p-wfh .wfh__slot {
  display: flex;
  align-items: center; 
  width: min(100%, 540px);
  height: var(--wfh-slot-h, auto);
}
.p-wfh .wfh__deck { flex: 1; }

.p-wfh .wfh__deck {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  
  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; 
  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; }

.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;
  
  opacity: 0;
  pointer-events: none;
}
.p-wfh .wfh-menu__icon--tpl { color: var(--color-blue-500); }

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

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

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

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

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

.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; 
  transform-box: fill-box;
  transform-origin: center;
  animation: wfh-fauth-ring 3.2s linear infinite; 
}
@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;
}

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

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

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

@keyframes wfs-pill {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

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

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

.p-solution.p-wfh .sol-flow-wrap.is-float .sol-how__step.is-active .sol-how__reveal {
  height: var(--wfh-reveal-h, 78px);
}

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

.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; 
  width: 100%;
  
  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;
  }
  
  .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; 
    margin-top: 0;
    justify-self: end;
  }
}

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

.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; 
}
.p-capability--workflow-builder .wfbh-green-s {
  fill: none;
  stroke: var(--color-green-600);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.p-capability--workflow-builder .wfbh-hl {
  fill: none;
  stroke: var(--color-blue-500);
  stroke-width: 3;
  opacity: 0;
}

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

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

.p-capability--workflow-builder .wfbh-phone {
  position: absolute;
  left: 67.08%;
  top: 12.31%;
  width: 25.56%;
  display: grid; 
  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; }

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

.p-capability--workflow-builder .wfbh .s3-caption-ready { display: none; }

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

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

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

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

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