.workflow{--workflow-gap:clamp(4rem,7vw,7rem);padding-block:4rem}
.workflow__canvas{border:1px solid var(--c-line);border-radius:var(--hero-radius);background:radial-gradient(var(--c-hero-dot) .75px,transparent .75px) 0 0/5px 5px var(--c-surface);padding:2rem}
.workflow__intro{text-align:center;max-width:43rem;margin:0 auto 3rem}
.workflow__intro h2{font-size:var(--fs-h2);letter-spacing:var(--track-tight);line-height:1.1}
.workflow__intro p{color:var(--c-ink-2);font-size:var(--fs-base);text-wrap:pretty;margin-top:1.25rem}
.workflow__diagram{column-gap:var(--workflow-gap);grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);align-items:center;display:grid}
.workflow__hub{min-width:0;translate:0 -2rem}
.workflow__sources{text-align:center;color:var(--c-ink-2);justify-content:center;align-items:center;gap:.6rem;margin:auto;font-size:.75rem;display:flex}
.workflow__sources .visual-icon{color:var(--c-accent);width:1.125rem;height:1.125rem}
.workflow__source-arrow{height:2.75rem;color:var(--c-accent);place-items:center;display:grid}
.workflow__source-arrow svg{rotate:90deg}
.workflow__bank {
  --bank-padding: 1.75rem;
  --bank-radius: 1.25rem;
  position: relative;
  padding: var(--bank-padding);
  border: 1px solid #e7c9ae;
  border-radius: var(--bank-radius);
  background: var(--c-bank-surface);
  box-shadow: var(--hero-card-shadow);
}
.workflow__bank:after{content:"";width:calc(var(--workflow-gap)/2);border-top:1px dashed #9ebde3;position:absolute;top:50%;left:100%}
.workflow__bank h3{font-size:1.125rem;line-height:1.3}
.workflow__bank-title{font-family:var(--font-heading);letter-spacing:var(--track-tight);margin:.75rem 0 1rem;font-size:1.75rem;font-weight:700;line-height:1.1}
.workflow__bank>p:not(.workflow__bank-title){font-size:.875rem;line-height:1.55}
.bank-answer {
  display: grid;
  gap: .6rem;
  margin-top: 1.25rem;
  color: var(--c-ink);
  font-size: .875rem;
}

.bank-answer__ask {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem .95rem;
  border-radius: .8rem;
  background: #fff;
  box-shadow: 0 2px 6px #5d3a1a14;
  font-weight: 500;
}

.bank-answer__ask .visual-icon,
.bank-answer__source .visual-icon { flex: none; width: 1.125rem; height: 1.125rem; color: var(--c-accent); }

.bank-answer__reply {
  padding: 1rem .95rem;
  border-radius: .8rem;
  background: #fff;
  box-shadow: 0 2px 6px #5d3a1a14;
}

.workflow__bank .bank-answer__reply p { margin: 0; font-size: .9375rem; line-height: 1.5; }
.bank-answer__reply small { display: block; margin: .8rem 0 .4rem; color: var(--c-ink-2); font-size: .75rem; font-weight: 600; }

.bank-answer__source {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .7rem;
  border: 1px solid #efe2d4;
  border-radius: .6rem;
  background: #fffaf5;
}

.bank-answer__source span { min-width: 0; }
.bank-answer__source b { display: block; font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.bank-answer__source i { display: block; color: var(--c-ink-2); font-size: .75rem; font-style: normal; line-height: 1.3; }

.workflow__private{color:var(--c-ink-2);align-items:center;gap:.5rem;display:flex;margin-top:.85rem}
.workflow__private .visual-icon{color:var(--c-accent)}
.workflow__branches{grid-auto-rows:1fr;gap:1.25rem;display:grid;position:relative}
.workflow__branches:before{content:"";left:calc(var(--workflow-gap)/-2);border-left:1px dashed #9ebde3;position:absolute;top:calc(16.6667% - .416667rem);bottom:calc(16.6667% - .416667rem)}
.workflow__branch{border:1px solid var(--c-line);background:var(--c-surface);min-width:0;min-height:9rem;box-shadow:var(--hero-card-shadow);border-radius:1.25rem;grid-template-columns:minmax(0,1fr) 8rem;align-items:center;gap:1.5rem;padding:1rem 1.5rem;display:grid;position:relative}
.workflow__branch:before{content:"";width:calc(var(--workflow-gap)/2);border-top:1px dashed #9ebde3;position:absolute;top:50%;right:100%}
.workflow__arrow{position:absolute;top:50%;left:-.75rem;transform:translateY(-50%);width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;color:var(--c-accent);background:var(--c-surface)}
.workflow__arrow svg{width:1rem;height:1rem}
.workflow__branch h3{align-items:center;gap:.55rem;font-size:1.375rem;line-height:1.2;display:flex}
.workflow__branch h3 .visual-icon{flex:none;box-sizing:border-box;width:2.25rem;height:2.25rem;padding:.55rem;border-radius:.55rem;background:linear-gradient(135deg,#1979eb,#7a4fe0);color:#fff}
.workflow__branch--create h3 .visual-icon{background:linear-gradient(135deg,#7a4fe0,#d6309a)}
.workflow__branch--review h3 .visual-icon{background:linear-gradient(135deg,#e0520f,#d62f6a)}
.workflow__branch--chatbot h3 .visual-icon{background:linear-gradient(135deg,#0a8a7c,#1979eb)}
.workflow__branch p{color:var(--c-ink-2);margin:.35rem 0;font-size:.875rem;line-height:1.5}
.workflow__output{color:var(--c-ink-3);flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.75rem;line-height:1.5;display:flex}
.workflow__output .visual-icon{width:.8rem;height:.8rem}
.workflow__output strong{color:var(--c-ink);font-weight:500}
.workflow__story{gap:.45rem;display:grid;rotate:4deg}
.workflow__story span{border:1px solid var(--c-line);background:var(--c-surface);box-shadow:var(--shadow);border-left:3px solid #1db9df;border-radius:.45rem;padding:.5rem .65rem;font-size:.6875rem;position:relative}
.workflow__story span:nth-child(2){border-left-color:#aa75e7;margin-left:.65rem}
.workflow__story span:nth-child(3){border-left-color:#eb9449}
.workflow__mini .review-mini{box-shadow:var(--shadow);margin:0;rotate:-3deg}
.workflow__mini .review-mini__row{min-height:2.4rem;padding:.55rem;font-size:.625rem}
.workflow__mini .review-mini b{padding:.25rem .4rem;font-size:.5625rem}
.workflow__chat{gap:.65rem;font-size:.6875rem;line-height:1.4;display:grid;rotate:3deg}
.workflow__chat span{box-shadow:var(--shadow);background:#eee7fa;border-radius:.7rem;padding:.65rem .75rem}
.workflow__chat span:first-child{background:var(--c-hero-blue);color:#fff;margin-left:1rem}
.workflow__note{text-align:center;max-width:38rem;color:var(--c-ink-2);text-wrap:pretty;margin:2rem auto 0;font-size:.8125rem}

@media (prefers-reduced-motion: no-preference) {
  .workflow__branches--arrive .workflow__branch {
    animation: workflow-card-arrive .7s linear var(--workflow-card-delay, .12s);
  }

  .workflow__branch--review { --workflow-card-delay: .38s; }
  .workflow__branch--chatbot { --workflow-card-delay: .64s; }

  .workflow__bank::after,
  .workflow__branches::before,
  .workflow__branches::after,
  .workflow__branch::before {
    animation: workflow-connector-pulse 5s ease-in-out infinite;
  }
}

@keyframes workflow-card-arrive {
  0% {
    transform: none;
    box-shadow: var(--hero-card-shadow);
    animation-timing-function: cubic-bezier(.2, .75, .3, 1);
  }
  38% {
    transform: translateY(-5px) scale(1.022);
    box-shadow: 0 0 0 1px #1979eb38, 0 12px 25px #16396c27;
    animation-timing-function: cubic-bezier(.25, .65, .35, 1);
  }
  100% {
    transform: none;
    box-shadow: var(--hero-card-shadow);
  }
}

@keyframes workflow-connector-pulse {
  0%, 100% { border-color: #9ebde3; }
  50% { border-color: var(--c-accent); }
}

@media (width<=1050px){
.workflow__branch{grid-template-columns:minmax(0,1fr) 6.5rem;gap:1rem;padding:1.25rem}
.workflow__bank{--bank-padding:1.5rem}
.workflow__bank-title{font-size:1.5rem}
}
@media (width<=850px){
.workflow__diagram{grid-template-columns:minmax(0,1fr);row-gap:4rem}
.workflow__hub{justify-self:center;width:100%;max-width:24rem;translate:none}
.workflow__bank:after{border-top:0;border-left:1px dashed #9ebde3;width:0;height:2rem;top:100%;left:50%}
.workflow__branches:before{top:-2rem;bottom:calc(16.6667% - .416667rem);left:1rem}
.workflow__branches:after{content:"";border-top:1px dashed #9ebde3;width:calc(50% - 1rem);position:absolute;top:-2rem;left:1rem}
.workflow__branch{grid-template-columns:minmax(0,1fr) 8rem;gap:1.5rem;margin-left:2rem}
.workflow__branch:before{width:1rem}
.workflow__intro{margin-bottom:2.5rem}
}
@media (width<=540px){.workflow{padding-block:2.5rem}
.workflow__canvas{border-radius:1.5rem;padding:1.5rem 1.25rem}
.workflow__intro h2{font-size:2rem}
.workflow__bank{--bank-padding:1.35rem}
.workflow__sources{font-size:.6875rem}
.workflow__branch{grid-template-columns:minmax(0,1fr);padding:1.25rem}
.workflow__mini{display:none}
.workflow__branch h3{font-size:1.25rem}
}