/* The schematic and its explanations share one vertical reading order. */
.method-flow{display:grid;gap:36px;margin:0 0 44px}
.method-flow .process-step{display:grid;grid-template-columns:minmax(210px,280px) minmax(0,1fr);align-items:stretch;gap:clamp(28px,4vw,64px);min-width:0}
.method-flow .process-stage{position:relative;display:grid;min-width:0}
.method-flow .process-block{min-height:168px;padding:24px;gap:14px;transition:border-color .18s ease,background-color .18s ease}
.method-flow .process-block h3{font-size:23px}
.method-flow .process-block p{font-size:12px;line-height:1.8}
.method-flow .construction-options{gap:10px}
.method-flow .construction-options>span{font-size:12px;line-height:1.6;padding:10px 12px}
.method-flow .process-repeated-heading{display:none}
.method-flow .method-row{display:block;align-self:center;min-width:0;padding:18px 0;border:0}
.method-flow .method-row p{font-size:14px;line-height:1.85;max-width:75ch}
.method-flow .output-block{background:var(--paper-lift)}
.method-flow .process-step.is-active .process-block{border-color:var(--primary);background:var(--signal)}
.method-flow .process-connector{position:absolute;top:calc(100% + 4px);left:calc(50% - 8px);display:block;width:16px;height:28px;color:var(--line);pointer-events:none}
.method-flow .process-connector svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.method-flow .process-step.is-active .process-connector{color:var(--primary)}
.method-flow .process-step.is-complete .process-connector{color:var(--primary);opacity:.45}
.method-flow.is-playing .process-step.is-active .process-connector-line{stroke-dasharray:3 5;animation:method-flow-travel 1.2s linear infinite}
@keyframes method-flow-travel{to{stroke-dashoffset:-24}}
@media(max-width:1000px){.method-flow .process-step{grid-template-columns:220px minmax(0,1fr);gap:30px}.method-flow .process-block{padding:22px}.method-flow .process-block h3{font-size:21px}}
@media(max-width:760px){
  .method-flow{gap:30px;margin-bottom:36px}
  .method-flow .process-step{position:relative;grid-template-columns:minmax(0,1fr);gap:16px;padding-left:22px;border-left:1px solid var(--line)}
  .method-flow .process-step:not(:last-child)::after{content:"";position:absolute;left:-1px;top:100%;height:30px;border-left:1px solid var(--line)}
  .method-flow .process-step::before{content:"";position:absolute;left:-4px;top:20px;width:7px;height:7px;border:1px solid var(--line);border-radius:50%;background:var(--paper)}
  .method-flow .process-step.is-active{border-left-color:var(--primary)}
  .method-flow .process-step.is-active::before{background:var(--primary);border-color:var(--primary)}
  .method-flow .process-block{min-height:0;padding:22px}
  .method-flow .process-block h3{font-size:23px}
  .method-flow .construction-options{grid-template-columns:minmax(0,1fr)}
  .method-flow .method-row{padding:0}
  .method-flow .process-connector{display:none}
}
@media(prefers-reduced-motion:reduce){.method-flow .process-block{transition:none}.method-flow .process-connector-line{animation:none!important;stroke-dasharray:none}}