/* "Every tool uses the same documents" diagram, live version (9 Nov 2026, Jordan).
   One 14s loop: a question is typed into Clarity Bank, the incident policy is found,
   then a document dot travels to each tool, and each tool's window works on that policy.
   Base styles are the finished frame, so reduce motion shows every window complete.
   Built by a script; keep the timings in step if you edit by hand. */
.workflow__branch--create { --w-accent: #7b5cd6; --w-line: #d9ccf5; --w-bar: linear-gradient(90deg, #ece4fd, #f7f3ff); --w-soft: #f7f3ff; --w-ink: #4a3590; }
.workflow__branch--review { --w-accent: #d9482b; --w-line: #f5cdc2; --w-bar: linear-gradient(90deg, #fde4dc, #fff3ef); --w-soft: #fff4f1; --w-ink: #8f2e19; }
.workflow__branch--chatbot { --w-accent: #0a8a7c; --w-line: #bfe6df; --w-bar: linear-gradient(90deg, #dbf3ee, #effaf7); --w-soft: #e6f6f2; --w-ink: #0b5d54; }

/* Bank: searched documents */
.wfl-type { display: inline-block; }
.wfl-docs { display: flex; flex-wrap: wrap; gap: .35rem; }
.wfl-doc { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem .3rem .45rem; border: 1px solid #efe2d4; border-radius: 100px; background: #fff8f1; color: var(--c-ink-2); font-size: .6875rem; font-weight: 500; line-height: 1.2; }
.wfl-doc .visual-icon { width: .8rem; height: .8rem; }
.wfl-doc--1, .wfl-doc--3 { opacity: .55; }
.wfl-doc--hit { border-color: #1979eb; background: #eaf3fe; color: #0f4e9a; font-weight: 600; }

/* travelling document dot and arrival glow */
.workflow__branch { --dot-run: calc(var(--workflow-gap) / -2 + 1.6rem); }
.wfl-dot { position: absolute; top: 50%; right: calc(100% + .9rem); z-index: 1; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-top: -.65rem; border: 1px solid var(--w-accent); border-radius: 50%; background: #fff; color: var(--w-accent); box-shadow: 0 2px 6px rgba(10,14,28,.12); opacity: 0; pointer-events: none; }
.wfl-dot .visual-icon { width: .7rem; height: .7rem; }
.workflow__branch::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 1.5px var(--w-accent), 0 14px 30px -14px var(--w-accent); opacity: 0; pointer-events: none; }

/* tool windows */
.workflow__branch { grid-template-columns: minmax(0, 1fr) 14.5rem; }
.wfw { border: 1px solid var(--w-line); border-radius: .8rem; background: #fff; box-shadow: 0 1px 2px rgba(10,14,28,.05), 0 18px 32px -20px rgba(25,39,65,.4); overflow: hidden; font-family: var(--font-heading); }
.wfw__bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--w-line); background: var(--w-bar); color: var(--w-ink); font-size: .625rem; font-weight: 600; line-height: 1.2; }
.wfw__bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--w-line); }
.wfw__bar span { flex: 1; margin-left: 4px; }
.wfw__bar b { padding: 2px 7px; border-radius: 100px; background: var(--w-accent); color: #fff; font-size: .5625rem; font-weight: 600; }
.wfw__body { display: grid; gap: 5px; margin: 0; padding: 8px; list-style: none; }

/* Create */
.wfw--create li { display: grid; gap: 1px; padding: 5px 8px; border-left: 2px solid var(--w-accent); border-radius: 6px; background: var(--w-soft); color: var(--c-ink); font-size: .6875rem; line-height: 1.3; }
.wfw--create li em { color: var(--w-accent); font-size: .5625rem; font-style: normal; font-weight: 600; }
.wfw--create li.wfl-c2 { border-left-color: #1db9df; }
.wfw--create li.wfl-c3 { border-left-color: #eb9449; }

/* Review */
.wfr { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) 2.6rem; align-items: center; gap: 6px; color: var(--c-ink); font-size: .625rem; font-weight: 500; }
.wfr > i { height: 5px; border-radius: 5px; background: #f1ede9; overflow: hidden; }
.wfr u { display: block; width: var(--v); height: 100%; border-radius: inherit; background: #5f9d76; transform-origin: left; }
.wfl-r2 u { background: #e0a21b; }
.wfl-r3 u { background: #d9482b; }
.wfg { justify-self: end; padding: 2px 6px; border-radius: 100px; font-size: .5625rem; font-weight: 600; line-height: 1.3; }
.wfg--pass { background: #e6f4ea; color: #2f6b45; }
.wfg--almost { background: #fff1d1; color: #85570a; }
.wfg--fail { background: #fde2dc; color: #a3311b; }
.wfw__fix { display: flex; align-items: center; gap: 6px; margin: 2px 0 0 !important; padding: 5px 7px; border-radius: 6px; background: var(--w-soft); color: var(--c-ink) !important; font-size: .625rem !important; line-height: 1.3 !important; }
.wfw__fix b { flex: none; padding: 1px 6px; border-radius: 100px; background: var(--w-accent); color: #fff; font-size: .5625rem; font-weight: 600; }

/* Chatbot */
.wfw--chatbot .wfw__body { gap: 6px; }
.wfc { max-width: 88%; margin: 0 !important; padding: 6px 9px; border-radius: 10px; font-size: .6875rem !important; line-height: 1.35 !important; overflow: hidden; }
.wfc--me { justify-self: end; border-bottom-right-radius: 3px; background: #1979eb; color: #fff !important; }
.wfc--bot { justify-self: start; border-bottom-left-radius: 3px; background: var(--w-soft); color: var(--c-ink) !important; }
.wfc--bot small { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--w-ink); font-size: .5625rem; font-weight: 600; }
.wfc--bot small .visual-icon { width: .65rem; height: .65rem; flex: none; }
.wfc--typing { display: none; gap: 3px; justify-self: start; background: var(--w-soft); }
.wfc--typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--w-accent); }

/* trust strip (replaces the closing line) */
.workflow__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.75rem; margin: 2.25rem auto 0; padding: 0; list-style: none; color: var(--c-ink-2); font-size: .8125rem; }
.workflow__trust li { display: inline-flex; align-items: center; gap: .45rem; }
.workflow__trust .visual-icon { width: 1rem; height: 1rem; color: var(--c-accent); }

@media (width <= 1050px) {
  .workflow__branch { grid-template-columns: minmax(0, 1fr) 12rem; }
}
@media (width <= 850px) {
  .wfl-dot { display: none; }
  .workflow__branch { grid-template-columns: minmax(0, 1fr) 13rem; }
}
@media (width <= 540px) {
  .workflow__branch { grid-template-columns: minmax(0, 1fr); }
  .workflow__branch .workflow__mini { display: block; }
  .wfw { rotate: 0deg !important; }
  .workflow__trust { flex-direction: column; align-items: flex-start; width: fit-content; }
}

/* Live loop. Shown when motion is on: the media query, or ?motion=1 (html.cw-motion-on).
   With reduce motion the windows rest on their finished frame. */
@media (prefers-reduced-motion: no-preference) {
html:not(.cw-motion-off) .wfl-type { animation: wfl-type 14s steps(28, end) infinite both; }
html:not(.cw-motion-off) .wfl-docs { animation: wfl-docs 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .wfl-doc--hit { animation: wfl-hit 14s ease infinite both; }
html:not(.cw-motion-off) .wfl-doc--1, html:not(.cw-motion-off) .wfl-doc--3 { animation: wfl-miss 14s ease infinite both; }
html:not(.cw-motion-off) .workflow__bank .bank-answer__reply { animation: wfl-reply 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .workflow__branch--create .wfl-dot { animation: wfl-dot-create 14s cubic-bezier(.45,0,.25,1) infinite both; }
html:not(.cw-motion-off) .workflow__branch--create::after { animation: wfl-glow-create 14s ease infinite both; }
html:not(.cw-motion-off) .workflow__branch--create .workflow__arrow { animation: wfl-arrow-create 14s ease infinite both; }
html:not(.cw-motion-off) .workflow__branch--review .wfl-dot { animation: wfl-dot-review 14s cubic-bezier(.45,0,.25,1) infinite both; }
html:not(.cw-motion-off) .workflow__branch--review::after { animation: wfl-glow-review 14s ease infinite both; }
html:not(.cw-motion-off) .workflow__branch--review .workflow__arrow { animation: wfl-arrow-review 14s ease infinite both; }
html:not(.cw-motion-off) .workflow__branch--chatbot .wfl-dot { animation: wfl-dot-chatbot 14s cubic-bezier(.45,0,.25,1) infinite both; }
html:not(.cw-motion-off) .workflow__branch--chatbot::after { animation: wfl-glow-chatbot 14s ease infinite both; }
html:not(.cw-motion-off) .workflow__branch--chatbot .workflow__arrow { animation: wfl-arrow-chatbot 14s ease infinite both; }
html:not(.cw-motion-off) .wfl-c1 { animation: wfl-c1 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .wfl-c2 { animation: wfl-c2 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .wfl-c3 { animation: wfl-c3 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .wfl-r1 u { animation: wfl-bar1 14s cubic-bezier(.45,0,.25,1) infinite both; }
html:not(.cw-motion-off) .wfl-r1 .wfg { animation: wfl-g1 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .wfl-r2 u { animation: wfl-bar2 14s cubic-bezier(.45,0,.25,1) infinite both; }
html:not(.cw-motion-off) .wfl-r2 .wfg { animation: wfl-g2 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .wfl-r3 u { animation: wfl-bar3 14s cubic-bezier(.45,0,.25,1) infinite both; }
html:not(.cw-motion-off) .wfl-r3 .wfg { animation: wfl-g3 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .wfl-r4 { animation: wfl-r4 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .wfl-h1 { animation: wfl-h1 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .wfl-h2 { display: flex; animation: wfl-h2 14s ease infinite both; }
html:not(.cw-motion-off) .wfl-h3 { animation: wfl-h3 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html:not(.cw-motion-off) .wfc--typing i { animation: wfl-blink 1s ease-in-out infinite; }
html:not(.cw-motion-off) .wfc--typing i:nth-child(2) { animation-delay: .15s; }
html:not(.cw-motion-off) .wfc--typing i:nth-child(3) { animation-delay: .3s; }
}
html.cw-motion-on .wfl-type { animation: wfl-type 14s steps(28, end) infinite both; }
html.cw-motion-on .wfl-docs { animation: wfl-docs 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .wfl-doc--hit { animation: wfl-hit 14s ease infinite both; }
html.cw-motion-on .wfl-doc--1, html.cw-motion-on .wfl-doc--3 { animation: wfl-miss 14s ease infinite both; }
html.cw-motion-on .workflow__bank .bank-answer__reply { animation: wfl-reply 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .workflow__branch--create .wfl-dot { animation: wfl-dot-create 14s cubic-bezier(.45,0,.25,1) infinite both; }
html.cw-motion-on .workflow__branch--create::after { animation: wfl-glow-create 14s ease infinite both; }
html.cw-motion-on .workflow__branch--create .workflow__arrow { animation: wfl-arrow-create 14s ease infinite both; }
html.cw-motion-on .workflow__branch--review .wfl-dot { animation: wfl-dot-review 14s cubic-bezier(.45,0,.25,1) infinite both; }
html.cw-motion-on .workflow__branch--review::after { animation: wfl-glow-review 14s ease infinite both; }
html.cw-motion-on .workflow__branch--review .workflow__arrow { animation: wfl-arrow-review 14s ease infinite both; }
html.cw-motion-on .workflow__branch--chatbot .wfl-dot { animation: wfl-dot-chatbot 14s cubic-bezier(.45,0,.25,1) infinite both; }
html.cw-motion-on .workflow__branch--chatbot::after { animation: wfl-glow-chatbot 14s ease infinite both; }
html.cw-motion-on .workflow__branch--chatbot .workflow__arrow { animation: wfl-arrow-chatbot 14s ease infinite both; }
html.cw-motion-on .wfl-c1 { animation: wfl-c1 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .wfl-c2 { animation: wfl-c2 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .wfl-c3 { animation: wfl-c3 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .wfl-r1 u { animation: wfl-bar1 14s cubic-bezier(.45,0,.25,1) infinite both; }
html.cw-motion-on .wfl-r1 .wfg { animation: wfl-g1 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .wfl-r2 u { animation: wfl-bar2 14s cubic-bezier(.45,0,.25,1) infinite both; }
html.cw-motion-on .wfl-r2 .wfg { animation: wfl-g2 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .wfl-r3 u { animation: wfl-bar3 14s cubic-bezier(.45,0,.25,1) infinite both; }
html.cw-motion-on .wfl-r3 .wfg { animation: wfl-g3 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .wfl-r4 { animation: wfl-r4 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .wfl-h1 { animation: wfl-h1 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .wfl-h2 { display: flex; animation: wfl-h2 14s ease infinite both; }
html.cw-motion-on .wfl-h3 { animation: wfl-h3 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .wfc--typing i { animation: wfl-blink 1s ease-in-out infinite; }
html.cw-motion-on .wfc--typing i:nth-child(2) { animation-delay: .15s; }
html.cw-motion-on .wfc--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wfl-type { 0%, 2% { clip-path: inset(0 100% 0 0); } 10%, 92% { clip-path: inset(0 0 0 0); } 96%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes wfl-docs { 0%, 9% { opacity: 0; } 12%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes wfl-hit { 0%, 15% { background: #fff8f1; border-color: #efe2d4; color: var(--c-ink-2); } 18%, 92% { background: #eaf3fe; border-color: #1979eb; color: #0f4e9a; } 97%, 100% { background: #fff8f1; border-color: #efe2d4; color: var(--c-ink-2); } }
@keyframes wfl-miss { 0%, 12% { opacity: 1; } 14%, 15% { opacity: .5; } 18%, 92% { opacity: .55; } 97%, 100% { opacity: 1; } }
@keyframes wfl-reply { 0%, 19% { opacity: 0; transform: translateY(6px); } 22%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes wfl-dot-create { 0%, 26% { opacity: 0; transform: translateX(var(--dot-run)); } 27% { opacity: 1; transform: translateX(var(--dot-run)); } 33% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; transform: none; } }
@keyframes wfl-glow-create { 0%, 33% { opacity: 0; } 35% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes wfl-arrow-create { 0%, 33% { color: var(--c-accent); } 35%, 42% { color: var(--w-accent); } 46%, 100% { color: var(--c-accent); } }
@keyframes wfl-dot-review { 0%, 46% { opacity: 0; transform: translateX(var(--dot-run)); } 47% { opacity: 1; transform: translateX(var(--dot-run)); } 53% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; transform: none; } }
@keyframes wfl-glow-review { 0%, 53% { opacity: 0; } 55% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes wfl-arrow-review { 0%, 53% { color: var(--c-accent); } 55%, 62% { color: var(--w-accent); } 66%, 100% { color: var(--c-accent); } }
@keyframes wfl-dot-chatbot { 0%, 66% { opacity: 0; transform: translateX(var(--dot-run)); } 67% { opacity: 1; transform: translateX(var(--dot-run)); } 73% { opacity: 1; transform: none; } 75%, 100% { opacity: 0; transform: none; } }
@keyframes wfl-glow-chatbot { 0%, 73% { opacity: 0; } 75% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes wfl-arrow-chatbot { 0%, 73% { color: var(--c-accent); } 75%, 82% { color: var(--w-accent); } 86%, 100% { color: var(--c-accent); } }
@keyframes wfl-c1 { 0%, 33% { opacity: 0; transform: translateX(-8px); } 36%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateX(-8px); } }
@keyframes wfl-c2 { 0%, 37% { opacity: 0; transform: translateX(-8px); } 40%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateX(-8px); } }
@keyframes wfl-c3 { 0%, 41% { opacity: 0; transform: translateX(-8px); } 44%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateX(-8px); } }
@keyframes wfl-bar1 { 0%, 54% { transform: scaleX(0); } 59%, 92% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }
@keyframes wfl-g1 { 0%, 57% { opacity: 0; transform: scale(.7); } 60%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.7); } }
@keyframes wfl-bar2 { 0%, 56% { transform: scaleX(0); } 61%, 92% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }
@keyframes wfl-g2 { 0%, 59% { opacity: 0; transform: scale(.7); } 62%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.7); } }
@keyframes wfl-bar3 { 0%, 58% { transform: scaleX(0); } 63%, 92% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }
@keyframes wfl-g3 { 0%, 61% { opacity: 0; transform: scale(.7); } 64%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.7); } }
@keyframes wfl-r4 { 0%, 64% { opacity: 0; transform: translateY(6px); } 67%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes wfl-h1 { 0%, 73% { opacity: 0; transform: translateY(6px); } 76%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes wfl-h2 { 0%, 77% { opacity: 0; max-height: 0; padding-block: 0; margin-top: 0; } 79%, 83% { opacity: 1; max-height: 2rem; padding-block: 6px; } 85%, 100% { opacity: 0; max-height: 0; padding-block: 0; margin-top: 0; } }
@keyframes wfl-h3 { 0%, 84% { opacity: 0; max-height: 0; padding-block: 0; transform: translateY(6px); } 87%, 92% { opacity: 1; max-height: 6rem; padding-block: 6px; transform: none; } 97%, 100% { opacity: 0; max-height: 0; padding-block: 0; transform: translateY(6px); } }
@keyframes wfl-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Clarity Bank card: warm grainy gradient (9 Nov 2026, Jordan), same style as the main
   site's course panels. Pale at the top left behind the heading. */
.workflow__bank {
  border-color: #efc9a8;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .38 -.16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 200px 200px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px,
    radial-gradient(70% 45% at 0% 0%, rgba(255,246,236,.95), transparent 75%),
    radial-gradient(60% 50% at 100% 30%, rgba(255,170,120,.75), transparent 72%),
    radial-gradient(70% 55% at 0% 75%, rgba(255,200,140,.8), transparent 72%),
    radial-gradient(70% 50% at 100% 100%, rgba(240,128,150,.7), transparent 72%),
    radial-gradient(50% 40% at 30% 100%, rgba(190,160,245,.55), transparent 72%),
    linear-gradient(170deg, #fde9da, #f9cfb1 55%, #f4b8a6);
}

/* Sources label above Clarity Bank (9 Nov 2026, Jordan): a white pill with three small
   file tiles (Word, PDF, SCORM zip), then a dashed line down into the Bank card. */
.workflow__sources { width: fit-content; margin-inline: auto !important; gap: .7rem; padding: .4rem .95rem .4rem .45rem; border: 1px solid var(--c-line); border-radius: 100px; background: #fff; box-shadow: 0 1px 2px rgba(10,14,28,.04), 0 8px 20px -14px rgba(25,39,65,.35); color: var(--c-ink); font-size: .8125rem; font-weight: 500; }
.wfs-files { display: inline-flex; }
.wfs-f { position: relative; display: grid; place-items: end center; width: 1.6rem; height: 1.95rem; padding-bottom: .22rem; box-sizing: border-box; border-radius: .25rem .5rem .25rem .25rem; color: #fff; font: 700 .45rem/1 var(--font-heading); font-style: normal; letter-spacing: .02em; box-shadow: 0 0 0 2px #fff; }
.wfs-f::before { content: ""; position: absolute; top: 0; right: 0; width: .5rem; height: .5rem; border-radius: 0 .45rem 0 .2rem; background: rgba(255,255,255,.45); }
.wfs-files { gap: .2rem; }
.wfs-f--doc { background: #2b6fd6; rotate: -6deg; }
.wfs-f--pdf { z-index: 1; background: #d9482b; }
.wfs-f--scorm { background: #7b5cd6; rotate: 6deg; }
.workflow__source-arrow { position: relative; height: 3rem; }
.workflow__source-arrow::before { content: ""; position: absolute; top: .35rem; bottom: .9rem; left: 50%; border-left: 1px dashed #9ebde3; }
.workflow__source-arrow svg { position: relative; align-self: end; width: .95rem; height: .95rem; }
.workflow__source-arrow::after { content: ""; position: absolute; top: .35rem; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--c-accent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.cw-motion-off) .workflow__source-arrow::after { animation: wfs-drop 2.4s cubic-bezier(.45,0,.25,1) infinite; }
}
html.cw-motion-on .workflow__source-arrow::after { animation: wfs-drop 2.4s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes wfs-drop { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 70% { opacity: 1; transform: translateY(1.3rem); } 85%, 100% { opacity: 0; transform: translateY(1.3rem); } }

/* Connector alignment (9 Nov 2026, Jordan): the sources pill and its arrow sit above the
   Bank card out of the flow, so the Bank card is centred on the branch column and its
   line meets the spine exactly where the Clarity Review line leaves it. */
@media (min-width: 851px) {
  .workflow__hub { position: relative; translate: none !important; }
  .workflow__hub > .workflow__sources { position: absolute; left: 50%; bottom: calc(100% + 3rem); transform: translateX(-50%); margin: 0 !important; white-space: nowrap; }
  .workflow__hub > .workflow__source-arrow { position: absolute; left: 50%; bottom: 100%; width: 1rem; transform: translateX(-50%); }
}
@media (min-width: 851px) { .workflow__intro { margin-bottom: calc(3rem + 5rem) !important; } }

/* Tool cards restyled like the use case cards (9 Nov 2026, Jordan): a flat warm grey
   card, copy on the left, and on the right a rounded grainy colour panel in the tool's
   colour holding the animated window. */
.workflow__branch { --wf-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .38 -.16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 200px 200px;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 17.5rem); align-items: stretch; gap: 1.25rem; padding: 10px 10px 10px 1.5rem; border: 0 !important; background: #f4f3f1 !important; box-shadow: none !important; }
.workflow__branch-copy { align-self: center; padding-block: .75rem; }
.workflow__branch .workflow__mini { display: flex; align-items: center; justify-content: center; min-height: 11rem; padding: 1rem; border-radius: 14px; overflow: hidden; background: var(--wf-grain), radial-gradient(60% 70% at 15% 15%, var(--p1), transparent 70%), radial-gradient(60% 70% at 90% 90%, var(--p3), transparent 72%), linear-gradient(150deg, var(--p1), var(--p2) 55%, var(--p3)); }
.workflow__branch--create { --p1: #b9a6f5; --p2: #7b5cd6; --p3: #5b8def; }
.workflow__branch--review { --p1: #ffc98a; --p2: #e0552f; --p3: #c2244a; }
.workflow__branch--chatbot { --p1: #a6ecd0; --p2: #0a8a7c; --p3: #1979eb; }
.workflow__branch .wfw { width: 100%; border-color: rgba(255,255,255,.7); box-shadow: 0 18px 34px -18px rgba(20,20,40,.45); }
.workflow__arrow { background: #fdfcfc; }
@media (width <= 540px) {
  .workflow__branch { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .workflow__branch-copy { padding: .75rem .75rem .25rem; }
}

/* Spacing inside the tool cards and the Bank card (9 Nov 2026, Jordan). */
.workflow__branch-copy { display: flex; flex-direction: column; align-items: flex-start; }
.workflow__branch-copy h3 { margin: 0 0 .75rem !important; }
.workflow__branch-copy > p { margin: 0 0 .6rem !important; }
.workflow__branch-copy .workflow__output { margin: 0 0 1.25rem; }
.workflow__branch-copy .btn { margin-top: 0; }
.workflow__bank > h3 { margin: 0 !important; }
.workflow__bank .workflow__bank-title { margin: .6rem 0 .9rem !important; }
.workflow__bank > p:not(.workflow__bank-title):not(.workflow__private) { margin: 0 0 1.25rem !important; }
.workflow__bank > .btn { margin: 0 0 1.25rem; }
.workflow__bank .workflow__private { margin: 0 0 .25rem !important; }

/* Tool card buttons on one line (9 Nov 2026, Jordan). */
.workflow__branch-copy .btn, .workflow__bank > .btn { white-space: nowrap; }

/* Tool card headings styled like the hub cards (9 Nov 2026, Jordan): a white
   bordered icon tile, then the tool name as the small grey label. */
.workflow .workflow__branch-copy h3 { flex-direction: column; align-items: flex-start !important; gap: 28px !important; margin: 0 0 6.4px !important; font: 400 14px/1.4 "Inter", var(--font-heading), sans-serif !important; letter-spacing: 0 !important; color: rgba(10, 14, 28, 0.55) !important; }
.workflow .workflow__branch-copy h3 .visual-icon { width: 36px !important; height: 36px !important; padding: 8px !important; border-radius: 10px !important; background: #ffffff !important; border: 1px solid rgb(227, 227, 225); color: rgb(10, 14, 28) !important; stroke-width: 1.75; }
.workflow .workflow__branch-copy > p { font-size: 15px !important; line-height: 1.45 !important; color: rgb(10, 14, 28) !important; }

/* "More about…" as text links, not buttons (9 Nov 2026, Jordan). */
.workflow .workflow__branch-copy .btn, .workflow .workflow__bank > .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 0; height: auto; padding: 0 !important; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; color: #1979eb !important; font-size: 15px; font-weight: 500; text-decoration: none; }
.workflow .workflow__branch-copy .btn::after, .workflow .workflow__bank > .btn::after { content: "\2192"; transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1); }
.workflow .workflow__branch-copy .btn:hover, .workflow .workflow__bank > .btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.workflow .workflow__branch-copy .btn:hover::after, .workflow .workflow__bank > .btn:hover::after { transform: translateX(3px); }

/* Clarity Bank demo as the app's Ctrl+K search window (9 Nov 2026, Jordan).
   Same 14s loop as before: the query types, results appear, the matching
   document lights up, then the answer rises in. */
.workflow__bank .bank-cmdk { display: block; margin-top: 1rem; padding: 0; border: 1px solid rgba(10, 14, 28, 0.08); border-radius: 16px; background: #ffffff; box-shadow: 0 2px 4px rgba(23, 24, 26, 0.04), 0 18px 40px rgba(120, 60, 20, 0.14); overflow: hidden; }
.bank-cmdk .cmdk__search { display: flex; align-items: center; gap: 10px; padding: 14px 14px 13px; border-bottom: 1px solid #eeede9; font-size: .9375rem; color: var(--c-ink); }
.bank-cmdk .cmdk__search > .visual-icon { flex: none; width: 1.05rem; height: 1.05rem; color: rgba(10, 14, 28, 0.45); }
.bank-cmdk .cmdk__query { display: inline-flex; align-items: center; flex: 1; min-width: 0; white-space: nowrap; }
.bank-cmdk .cmdk__caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; background: #1979eb; }
.bank-cmdk kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid #e3e3e1; border-bottom-width: 2px; border-radius: 6px; background: #fafaf9; color: rgba(10, 14, 28, 0.55); font: 500 .625rem/1 "Inter", system-ui, sans-serif; white-space: nowrap; }
.bank-cmdk .cmdk__group { margin: 0 0 4px !important; padding: 0 6px; color: rgba(10, 14, 28, 0.45); font-size: .6875rem !important; font-weight: 500; }
.bank-cmdk .cmdk__list { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px 8px; }
.bank-cmdk .cmdk__row { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--c-ink); font-size: .8125rem; font-weight: 500; }
.bank-cmdk .cmdk__row .visual-icon { width: .95rem; height: .95rem; color: rgba(10, 14, 28, 0.45); }
.bank-cmdk .cmdk__row span { flex: 1; min-width: 0; }
.bank-cmdk .cmdk__row small { color: rgba(10, 14, 28, 0.45); font-size: .6875rem; font-weight: 400; }
.bank-cmdk .cmdk__row.wfl-doc--hit { border-color: transparent; background: #eaf3fe; color: #0f4e9a; }
.bank-cmdk .cmdk__row.wfl-doc--hit .visual-icon { color: #1979eb; }
.bank-cmdk .cmdk__answer { margin: 0 8px; padding: 12px 12px 12px; border-top: 1px solid #eeede9; border-radius: 0; background: none; box-shadow: none; }
.bank-cmdk .cmdk__answer .cmdk__group { padding: 0; }
.workflow__bank .bank-cmdk .cmdk__answer > p:not(.cmdk__group) { margin: 0 0 10px; font-size: .875rem; line-height: 1.45; }
.bank-cmdk .bank-answer__source { padding: 8px 10px; border-radius: 10px; }
.bank-cmdk .cmdk__foot { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid #eeede9; background: #fafaf9; color: rgba(10, 14, 28, 0.5); font-size: .6875rem; }
.bank-cmdk .cmdk__foot span { display: inline-flex; align-items: center; gap: 4px; }
/* Hit row: a soft blue select instead of the old pill outline. */
@keyframes cmdk-hit { 0%, 15% { background: transparent; color: var(--c-ink); } 18%, 92% { background: #eaf3fe; color: #0f4e9a; } 97%, 100% { background: transparent; color: var(--c-ink); } }
@keyframes cmdk-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes cmdk-pop { 0%, 1% { transform: translateY(6px) scale(.985); opacity: .0; } 5%, 94% { transform: none; opacity: 1; } 99%, 100% { transform: translateY(6px) scale(.985); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.cw-motion-off) .bank-cmdk .cmdk__row.wfl-doc--hit { animation-name: cmdk-hit; }
  html:not(.cw-motion-off) .bank-cmdk .cmdk__caret { animation: cmdk-caret 1s steps(1) infinite; }
  html:not(.cw-motion-off) .workflow__bank .bank-cmdk { animation: cmdk-pop 14s cubic-bezier(.2,.7,.3,1) infinite both; }
}
html.cw-motion-on .bank-cmdk .cmdk__row.wfl-doc--hit { animation-name: cmdk-hit; }
html.cw-motion-on .bank-cmdk .cmdk__caret { animation: cmdk-caret 1s steps(1) infinite; }
html.cw-motion-on .workflow__bank .bank-cmdk { animation: cmdk-pop 14s cubic-bezier(.2,.7,.3,1) infinite both; }
/* Type by width so the caret follows the text. */
.bank-cmdk .wfl-type { overflow: hidden; white-space: nowrap; vertical-align: bottom; }
@keyframes cmdk-type { 0%, 2% { max-width: 0; } 10%, 92% { max-width: 15em; } 96%, 100% { max-width: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.cw-motion-off) .bank-cmdk .wfl-type { animation: cmdk-type 14s steps(30, end) infinite both; }
}
html.cw-motion-on .bank-cmdk .wfl-type { animation: cmdk-type 14s steps(30, end) infinite both; }