#main-content .dw-flow {
  --flow-ink: #191c30;
  --flow-muted: #494e64;
  --flow-accent: #8b3053;
  --flow-bright: #ad4c72;
  padding-block: clamp(38px, 6vw, 76px);
  background: #f0eef7;
  color: var(--flow-ink);
  scroll-margin-top: 92px;
}
.dw-flow-intro { max-width: 760px; margin-bottom: 20px; }
.dw-flow-intro h2 { margin: 0; font-size: clamp(1.85rem, 3.9vw, 3.55rem); font-weight: 800; line-height: 1.13; letter-spacing: -.045em; }
.dw-flow-intro p { margin: 9px 0 0; color: var(--flow-muted); font-size: clamp(.98rem, 1.5vw, 1.14rem); }
.dw-flow-board { margin: 0; border: 1px solid #dad4e6; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 16px 42px #3426530f; }
.dw-flow-bar, .dw-flow-summary { padding: 12px clamp(15px, 2.5vw, 29px); }
.dw-flow-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; border-bottom: 1px solid #e3ddeb; }
.dw-flow-bar figcaption { font-weight: 800; }
.dw-flow-bar small { margin-inline-start: 7px; color: var(--flow-muted); font-weight: 500; white-space: nowrap; }
.dw-flow [hidden] { display: none !important; }
.dw-flow button { cursor: pointer; font: inherit; color: var(--flow-ink); }
.dw-flow-replay { min-height: 44px; padding: 7px 12px; border: 1px solid #bdb3cf; border-radius: 7px; background: #fbf9fe; font-weight: 700 !important; }
.dw-flow-replay:hover { background: #f0e7f4; }
.dw-flow button:focus-visible { outline: 3px solid #943b64; outline-offset: 3px; }
.dw-flow-map {
  position: relative;
  height: clamp(480px, 40vw, 540px);
  background: radial-gradient(circle at 48% 49%, #eee7fa 0%, transparent 62%), radial-gradient(circle, #d4cce4 1px, transparent 1.5px) #f8f7fc;
  background-size: auto, 17px 17px;
}
.dw-flow-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dw-flow-map path { fill: none; stroke: #b4a9c5; stroke-width: 2; stroke-dasharray: 1.2 1.1; vector-effect: non-scaling-stroke; }
.dw-flow[data-source="0"] .dw-flow-in-0, .dw-flow[data-source="1"] .dw-flow-in-1,
.dw-flow[data-source="2"] .dw-flow-in-2, .dw-flow[data-source="3"] .dw-flow-in-3,
.dw-flow[data-source="4"] .dw-flow-in-4, .dw-flow[data-source="5"] .dw-flow-in-5,
.dw-flow[data-source="6"] .dw-flow-in-6, .dw-flow[data-outcome="0"] .dw-flow-out-0,
.dw-flow[data-outcome="1"] .dw-flow-out-1, .dw-flow[data-outcome="2"] .dw-flow-out-2,
.dw-flow .dw-flow-shared { stroke: var(--flow-bright); stroke-width: 3; stroke-dasharray: 100; }
.dw-flow.is-running path.is-current { animation: dw-flow-draw .42s ease-out calc(var(--flow-step) * .36s) both; }
@keyframes dw-flow-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.dw-flow-map :is(ul,ol) { margin: 0; padding: 0; list-style: none; }
.dw-flow-sources > li, .dw-flow-stages > li, .dw-flow-results > li {
  position: absolute; left: var(--flow-x); top: var(--flow-y, 50%); width: var(--flow-width);
  translate: -50% -50%;
}
.dw-flow-sources > li { --flow-x: 86%; --flow-width: 20%; }
.dw-flow-stages > li { --flow-width: 15%; }
.dw-flow-landing { --flow-x: 65%; }
.dw-flow-capture { --flow-x: 45%; }
.dw-flow-crm { --flow-x: 25%; }
.dw-flow-results > li { --flow-x: 8%; --flow-width: 14%; }
.dw-flow-node {
  display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 57px;
  padding: 7px 10px; border: 1px solid #cfc6df; border-radius: 9px;
  background: #fff; text-align: start; color: var(--flow-ink);
  box-shadow: 0 4px 14px #2918420b;
}
.dw-flow-source { width: 100%; }
.dw-flow-node strong { font-size: clamp(.84rem, 1.35vw, 1.04rem); line-height: 1.3; }
.dw-flow-node small { color: var(--flow-muted); font-size: .75rem; line-height: 1.35; }
.dw-flow-node[aria-pressed=true], .dw-flow-stages .dw-flow-node, .dw-flow-result.is-selected { border-color: #a65579; background: #fff7fb; }
.dw-flow-node[aria-pressed=true] strong, .dw-flow-result.is-selected strong { color: var(--flow-accent); }
.dw-flow.is-running .dw-flow-node.is-current { animation: dw-flow-pulse .5s ease-out calc(var(--flow-step, 0) * .36s + .25s) both; }
@keyframes dw-flow-pulse { 0%, 100% { box-shadow: 0 4px 14px #2918420b; } 55% { box-shadow: 0 0 0 5px #ad4c7247; } }
.dw-flow-summary { background: #fff; border-top: 1px solid #e3ddeb; }
.dw-flow-summary strong { color: var(--flow-accent); }
.dw-flow-summary p { color: var(--flow-muted); margin: 3px 0 0; }
@media (max-width: 830px) {
  .dw-flow-map { height: auto; padding: 13px; }
  .dw-flow-map svg { display: none; }
  .dw-flow-sources > li, .dw-flow-stages > li, .dw-flow-results > li { position: relative; inset: auto; width: auto; translate: none; }
  .dw-flow-map :is(ul,ol) { display: grid; gap: 7px; }
  .dw-flow-map .dw-flow-sources { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dw-flow-map .dw-flow-stages { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dw-flow-map .dw-flow-results { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dw-flow-map :is(.dw-flow-stages,.dw-flow-results) { position: relative; margin-top: 22px; }
  .dw-flow-map :is(.dw-flow-stages,.dw-flow-results)::before { content: '↓'; position: absolute; top: -23px; inset-inline-start: 50%; color: var(--flow-accent); font-weight: 800; }
}
@media (max-width: 510px) {
  .dw-flow-map .dw-flow-stages { grid-template-columns: minmax(0,1fr); }
  .dw-flow-map .dw-flow-results { grid-template-columns: minmax(0,1fr); }
  .dw-flow-map :is(.dw-flow-stages,.dw-flow-results) { gap: 5px; }
  .dw-flow-stages > li, .dw-flow-results > li { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .dw-flow.is-running :is(path,.dw-flow-node).is-current { animation: none; }
}