/* Three illustrated barriers and antidotes. Shared rows keep the dividers aligned. */
.flow-visual-heading{max-width:760px;margin:0 auto 25px;text-align:center}
.flow-visual-heading h3{font-size:clamp(32px,4vw,42px);margin:0 0 22px}
.flow-definition{margin:0;padding:22px 28px;border-left:4px solid #59958e;border-radius:0 14px 14px 0;background:#e8f0e6;color:#354e43}
.foundation .flow-definition p{margin:0 0 12px;color:#354e43;font:400 clamp(21px,2.6vw,27px)/1.6 var(--serif);text-wrap:balance}
.flow-definition cite{display:block;color:#54705d;font:600 14px/1.5 var(--sans)}
.flow-visual-heading h4{margin:30px 0 0;color:#4e3521;font:400 clamp(25px,3vw,31px)/1.4 var(--serif)}
.flow-vignettes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;column-gap:15px;row-gap:0}
.flow-vignette{--flow-accent:#438e91;--flow-ink:#245b60;--flow-paper:#e7f3f0;--flow-answer:#f1f9f3;display:grid;grid-template-rows:subgrid;grid-row:span 2;min-width:0;overflow:hidden;border:2px solid var(--flow-accent);border-radius:16px;background:var(--flow-paper);box-shadow:0 5px 14px #3c2a1710}
.flow-challenge{--flow-accent:#cc8454;--flow-ink:#895022;--flow-paper:#fff0dc;--flow-answer:#fff7e8}
.flow-feedback{--flow-accent:#9b7cb4;--flow-ink:#694b84;--flow-paper:#efe8f6;--flow-answer:#f7f1fb}
.flow-obstacle,.flow-remedy{display:grid;grid-template-rows:auto minmax(64px,auto) 210px auto;align-content:start;gap:12px;padding:20px 17px 23px;text-align:center;min-width:0}
.flow-remedy{border-top:2px solid var(--flow-accent);background:var(--flow-answer)}
.foundation .flow-state{margin:0;color:var(--flow-ink);font:700 12px/1.5 var(--sans);letter-spacing:1.2px;text-transform:uppercase}
.flow-vignette h5{align-self:center;margin:0;color:var(--flow-ink);font:600 23px/1.4 var(--serif);text-wrap:balance}
.flow-vignette .flow-scene{display:block;width:100%;height:210px;object-fit:contain;margin:0 auto;filter:none}
.foundation .flow-explanation{margin:0;color:#4f463e;font:400 15px/1.7 var(--sans);text-wrap:pretty}
@media(max-width:1000px){
 .flow-vignettes{column-gap:10px}
 .flow-obstacle,.flow-remedy{padding-inline:12px}
 .flow-vignette h5{font-size:21px}
}
@media(max-width:900px){
 .flow-vignettes{display:block;max-width:540px;margin:0 auto}
 .flow-vignette{display:block;margin-bottom:20px}
 .flow-vignette:last-child{margin-bottom:0}
 .flow-obstacle,.flow-remedy{grid-template-rows:auto auto 230px auto;gap:13px;padding:22px}
 .flow-vignette .flow-scene{height:230px}
 .flow-vignette h5{font-size:25px}
 .foundation .flow-explanation{font-size:16px;line-height:1.7}
}
@media(max-width:600px){
 .flow-definition{padding:18px 17px}
 .foundation .flow-definition p{font-size:22px;text-wrap:pretty}
 .flow-visual-heading h3{font-size:32px}
 .flow-visual-heading h4{font-size:27px}
 .flow-obstacle,.flow-remedy{padding:20px 16px;grid-template-rows:auto auto 210px auto}
 .flow-vignette .flow-scene{height:210px}
 .flow-vignette h5{font-size:24px}
 .foundation .flow-explanation{font-size:15px}
}