/* Six illustrated workflows share the fine lines and layered surfaces of chapter 01. */
.case-diagram.case-workflow {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;
  position:relative;isolation:isolate;overflow:hidden;
  padding:22px 24px 25px;margin:8px 0 4px;
  border:1px solid #d7e7f0;border-radius:12px;
  background:radial-gradient(ellipse at 50% 30%,#d9edf780,transparent 68%),linear-gradient(145deg,#f8fcfe,#eff6fa);
}
.case-workflow::before {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(#b7d4e51a 1px,transparent 1px),linear-gradient(90deg,#b7d4e51a 1px,transparent 1px);
  background-size:24px 24px;mask-image:linear-gradient(transparent,#000 35%,transparent);
}
.workflow-stage{position:relative;min-width:0;display:flex;flex-direction:column;align-items:stretch}
.workflow-index{font:500 10px/1.4 'Golos Text',sans-serif;letter-spacing:.13em;color:#7c9bb0;align-self:flex-start;border-bottom:1px solid #adcedf;padding-bottom:5px;min-width:25px}
.workflow-art{display:block;width:100%;height:auto;max-height:162px;margin:0 auto 8px;overflow:visible;transition:transform .3s ease}
.workflow-stage:hover .workflow-art{transform:translateY(-3px)}
.workflow-caption{display:flex;flex-direction:column;gap:7px;padding:0 2px}
.workflow-label{font-size:14px;line-height:1.45;font-weight:500;color:#1b4d75;letter-spacing:-.025em}
.workflow-detail{font-size:11px;line-height:1.55;color:#6b879d;max-width:190px}
.workflow-stage:not(:last-child)::after{content:"";position:absolute;right:-28px;top:92px;width:30px;height:7px;background:#8cb9d2;clip-path:polygon(0 42%,80% 42%,80% 0,100% 50%,80% 100%,80% 58%,0 58%)}
.workflow-signal{stroke-dasharray:9 75;animation:workflow-transfer 5s linear infinite;animation-play-state:paused}
.case-workflow.diagram-in-view .workflow-signal{animation-play-state:running}
@keyframes workflow-transfer{to{stroke-dashoffset:-168}}
@media(min-width:1600px){.case-diagram.case-workflow{padding:26px 30px 30px;gap:40px}.workflow-art{max-height:175px}.workflow-stage:not(:last-child)::after{right:-38px;width:38px;top:105px}.workflow-label{font-size:16px}.workflow-detail{font-size:12px}}
@media(max-width:1100px) and (min-width:641px){.case-diagram.case-workflow{padding:20px 15px;gap:16px}.workflow-stage:not(:last-child)::after{right:-18px;width:20px;top:78px}.workflow-label{font-size:13px}.workflow-detail{font-size:11px}}
@media(max-width:640px){
  .case-diagram.case-workflow{grid-template-columns:1fr;gap:24px;padding:18px 15px 22px}
  .workflow-stage{display:grid;grid-template-columns:126px minmax(0,1fr);align-items:center;gap:0 14px;min-height:122px}
  .workflow-index{position:absolute;top:0;left:0;font-size:9px;min-width:18px;padding-bottom:3px}
  .workflow-art{width:126px;height:112px;margin:10px 0 0}
  .workflow-caption{padding:0;gap:8px}
  .workflow-label{font-size:14px;line-height:1.5}
  .workflow-detail{font-size:11px;line-height:1.55}
  .workflow-stage:not(:last-child)::after{left:61px;right:auto;top:auto;bottom:-24px;width:7px;height:24px;clip-path:polygon(42% 0,58% 0,58% 80%,100% 80%,50% 100%,0 80%,42% 80%)}
}
@media(max-width:360px){.case-diagram.case-workflow{padding-inline:12px}.workflow-stage{grid-template-columns:105px minmax(0,1fr);gap:10px}.workflow-art{width:105px}.workflow-stage:not(:last-child)::after{left:50px}.workflow-label{font-size:13px}}
@media(prefers-reduced-motion:reduce){.workflow-art{transition:none}.workflow-stage:hover .workflow-art{transform:none}.case-workflow .workflow-signal{animation:none}}