.flow-mockup-section[hidden]{display:none!important}
.flow-mockup-section{position:relative;overflow:clip;border-block:1px solid #d3deec;background:linear-gradient(180deg,#f5f8fd 0%,#edf3fb 100%)}
.flow-controls{position:relative;z-index:3;display:flex;justify-content:flex-end;gap:12px;margin-top:auto;padding-top:32px}
.flow-controls[hidden]{display:none!important}
.flow-controls button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:112px;padding:12px 20px;border:1px solid var(--navy);border-radius:8px;font:700 1rem/1.3 var(--sans);cursor:pointer}
.flow-back-button{background:#fff;color:var(--navy)}
.flow-back-button:disabled{opacity:.4;cursor:default}
.flow-next-button{background:var(--navy);color:#fff}
.flow-controls button:not(:disabled):hover{box-shadow:0 5px 16px #102b5020}
.flow-scroll{position:relative;height:500vh}
.flow-sticky{position:sticky;top:0;display:flex;align-items:center;min-height:100vh;padding:92px 0 34px}
.flow-canvas{position:relative;min-height:690px;padding:45px 38px 40px;overflow:hidden;border:1px solid #c7d5e6;border-radius:16px;background:linear-gradient(145deg,#fff,#f5f8fc);box-shadow:0 28px 90px #102b5017}
.flow-canvas:before{content:'';position:absolute;right:-260px;top:-330px;width:580px;height:580px;border:1px solid #315ed211;border-radius:50%}
.flow-heading{position:relative;z-index:2;max-width:1060px;min-height:150px;margin:0 auto 34px;text-align:center;transition:min-height .6s ease,margin .6s ease}
.flow-heading h2{color:var(--navy);font:800 clamp(1.75rem,3vw,2.5rem)/1.22 var(--sans);letter-spacing:-.025em;transition:color .4s ease}
.flow-research{max-width:880px;margin:30px auto 0;color:var(--navy);font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:750;line-height:1.45;animation:flow-copy-in .45s ease both}
.flow-research strong{color:#b33832}
.flow-pipeline{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr) 38px minmax(0,.9fr);align-items:start;transition:grid-template-columns .7s cubic-bezier(.2,.75,.25,1),margin .5s ease}
.flow-stage{min-width:0;text-align:center}
.flow-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:172px;padding:24px 15px;border:1px solid;border-radius:18px;box-shadow:0 15px 34px #102b500b;transition:min-height .6s cubic-bezier(.2,.75,.25,1),transform .6s cubic-bezier(.2,.75,.25,1),box-shadow .5s ease}
.flow-card strong{font:400 1.95rem/1.1 var(--serif)}
.flow-card small{display:block;max-width:180px;margin-top:11px;color:#43576e;font-size:.8rem;line-height:1.42}
.flow-learn .flow-card{border-color:#6da9e0;background:linear-gradient(145deg,#f5fbff,#e0f1ff);color:#0d4c8d}
.flow-study .flow-card{border-color:#76b696;background:linear-gradient(145deg,#f5fff9,#e1f6ea);color:#0b6242}
.flow-perform .flow-card{border-color:#ad86d9;background:linear-gradient(145deg,#fdfaff,#f0e7fa);color:#652d9f}
.flow-result .flow-card{border-radius:0;border-color:#7890ad;background:#fff;color:var(--navy)}
.flow-arrow{display:grid;place-items:center;height:172px;color:#6f83a1;font:400 1.5rem/1 var(--serif);transition:height .6s ease,transform .6s ease}
.flow-result-arrow{font-size:1.85rem}
.flow-description{max-width:220px;margin:19px auto 0;color:#53667b;font:400 .92rem/1.5 var(--serif);transition:opacity .35s ease,max-height .45s ease,margin .45s ease}
.flow-barriers{max-height:0;margin-top:0;overflow:hidden;opacity:0;transform:translateY(-8px);transition:max-height .7s ease,margin .6s ease,opacity .45s ease,transform .6s ease}
.flow-barriers h3{margin:0 0 9px;color:var(--navy);font-size:.75rem;font-weight:800;letter-spacing:.04em;text-align:left}
.flow-barriers>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.flow-barriers span{display:grid;place-items:center;min-height:44px;padding:5px;border:1px solid #cbd8e7;border-radius:6px;background:#f3f7fb;color:#4e6279;font-size:.68rem;line-height:1.2;transition:transform .35s ease,box-shadow .35s ease}
.flow-barriers .flow-more{grid-column:1/-1;min-height:31px;border-style:dashed;background:transparent;color:#71849a;font-weight:700}
.flow-insight{display:none;margin-top:31px;color:#b33832;font-size:.88rem;font-weight:750;line-height:1.52;animation:flow-copy-in .45s ease both}
.flow-insight p{margin:0}.flow-insight p+p{margin-top:22px}
.flow-insight-struggle p:last-child{font-weight:800}
.flow-uncertainty{display:none;position:relative;z-index:2;width:76%;text-align:center}
.flow-scroll[data-state="uncertain"] .flow-uncertainty{display:block;animation:flow-copy-in .45s ease both}
.flow-scroll[data-state="uncertain"] .flow-heading{min-height:70px;margin-bottom:28px}
.flow-uncertainty-lines{display:block;width:100%;height:130px;margin-top:7px;overflow:visible}
.flow-uncertainty-copy{max-width:650px;margin:5px auto 0;color:var(--navy);font:400 1.13rem/1.45 var(--serif)}
.flow-uncertainty-copy p{margin:0}
.flow-uncertainty-copy p+p{margin-top:9px}
.flow-uncertainty-copy strong{font-family:var(--sans);font-size:1rem;font-weight:800}
@keyframes flow-copy-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.flow-scroll[data-state="2"] .flow-heading{min-height:220px;margin-bottom:18px;animation:flow-copy-in .45s ease both}
.flow-scroll[data-state="2"] .flow-research{animation:none}
.flow-scroll[data-state="4"] .flow-heading,.flow-scroll[data-state="5"] .flow-heading,.flow-scroll[data-state="6"] .flow-heading,.flow-scroll[data-state="7"] .flow-heading,.flow-scroll[data-state="8"] .flow-heading,.flow-scroll[data-state="9"] .flow-heading{min-height:70px;margin-bottom:22px}
.flow-scroll[data-state="4"] .flow-heading h2,.flow-scroll[data-state="5"] .flow-heading h2,.flow-scroll[data-state="6"] .flow-heading h2,.flow-scroll[data-state="7"] .flow-heading h2,.flow-scroll[data-state="8"] .flow-heading h2,.flow-scroll[data-state="9"] .flow-heading h2{color:#b33832}
.flow-scroll[data-state="4"] .flow-card,.flow-scroll[data-state="5"] .flow-card,.flow-scroll[data-state="6"] .flow-card,.flow-scroll[data-state="7"] .flow-card,.flow-scroll[data-state="8"] .flow-card,.flow-scroll[data-state="9"] .flow-card{min-height:128px;transform:scale(.95);box-shadow:0 10px 26px #102b500c}
.flow-scroll[data-state="4"] .flow-arrow,.flow-scroll[data-state="5"] .flow-arrow,.flow-scroll[data-state="6"] .flow-arrow,.flow-scroll[data-state="7"] .flow-arrow,.flow-scroll[data-state="8"] .flow-arrow,.flow-scroll[data-state="9"] .flow-arrow{height:128px}
.flow-scroll[data-state="4"] .flow-description,.flow-scroll[data-state="5"] .flow-description,.flow-scroll[data-state="6"] .flow-description,.flow-scroll[data-state="7"] .flow-description,.flow-scroll[data-state="8"] .flow-description,.flow-scroll[data-state="9"] .flow-description{max-height:0;margin:0;opacity:0;overflow:hidden}
.flow-scroll[data-state="4"] .flow-barriers,.flow-scroll[data-state="5"] .flow-barriers,.flow-scroll[data-state="6"] .flow-barriers,.flow-scroll[data-state="7"] .flow-barriers,.flow-scroll[data-state="8"] .flow-barriers,.flow-scroll[data-state="9"] .flow-barriers{max-height:345px;margin-top:18px;opacity:1;transform:none}
.flow-scroll[data-state="5"] .flow-insight-tutoring{display:block}
.flow-scroll[data-state="6"] .flow-insight-struggle{display:block}
.flow-scroll[data-state="7"] .flow-insight-pinpoint{display:block}
.flow-scroll[data-state="8"] .flow-insight-plan{display:block}

html[data-flowmock="2"] .flow-canvas{padding-inline:48px;border-left:5px solid var(--navy);border-radius:5px;background:#fff;box-shadow:14px 14px 0 #dfe7f1}
html[data-flowmock="2"] .flow-canvas:before{display:none}
html[data-flowmock="2"] .flow-heading{text-align:left;margin-left:0}
html[data-flowmock="2"] .flow-heading h2{max-width:900px;font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.4vw,3.25rem);line-height:1.1}
html[data-flowmock="2"] .flow-research{margin-left:0;text-align:left}
html[data-flowmock="2"] .flow-card{border-radius:8px;box-shadow:7px 7px 0 #e0e8f2}
html[data-flowmock="2"] .flow-result .flow-card{box-shadow:7px 7px 0 #d6dfe9}
html[data-flowmock="2"] .flow-barriers span{border-radius:3px;background:#fff}

/* Option 2A: preserve the pipeline and give its conclusion a generous reading area. */
html[data-flowmock="2"][data-flowtext="wide"] .flow-scroll[data-state="5"] .flow-pipeline,
html[data-flowmock="2"][data-flowtext="wide"] .flow-scroll[data-state="6"] .flow-pipeline{margin-bottom:145px}
html[data-flowmock="2"][data-flowtext="wide"] .flow-scroll[data-state="5"] .flow-insight,
html[data-flowmock="2"][data-flowtext="wide"] .flow-scroll[data-state="6"] .flow-insight{position:absolute;top:calc(100% + 28px);right:0;width:calc(50% - 12px);margin:0;padding:21px 24px;border-left:3px solid #b33832;background:#f8fafc;color:var(--navy);font-family:var(--serif);font-size:1.18rem;font-weight:400;line-height:1.52;text-align:left}
html[data-flowmock="2"][data-flowtext="wide"] .flow-scroll[data-state="5"] .flow-insight p:last-child,
html[data-flowmock="2"][data-flowtext="wide"] .flow-scroll[data-state="6"] .flow-insight p:last-child{color:#b33832;font-family:var(--sans);font-weight:800}

/* Option 2B: let the Result area become the visual destination of the pipeline. */
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="5"] .flow-pipeline,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="6"] .flow-pipeline,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="7"] .flow-pipeline,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="8"] .flow-pipeline,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="9"] .flow-pipeline{grid-template-columns:minmax(0,.72fr) 18px minmax(0,.72fr) 18px minmax(0,.72fr) 28px minmax(320px,1.65fr)}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="5"] .flow-result .flow-card,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="6"] .flow-result .flow-card,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="7"] .flow-result .flow-card,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="8"] .flow-result .flow-card,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="9"] .flow-result .flow-card{transform:none;border-color:#315ed2;box-shadow:10px 10px 0 #d6e1f3}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="5"] .flow-insight,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="6"] .flow-insight,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="7"] .flow-insight,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="8"] .flow-insight,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="9"] .flow-insight{margin-top:25px;padding:20px 22px;border-top:2px solid #b33832;color:var(--navy);font-family:var(--serif);font-size:1.13rem;font-weight:400;line-height:1.5;text-align:left}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="5"] .flow-insight p:last-child,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="6"] .flow-insight p:last-child{color:#b33832;font-family:var(--sans);font-weight:800}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="7"] .flow-insight,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="8"] .flow-insight,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="9"] .flow-insight{border-top-color:#315ed2;font-size:1.28rem;line-height:1.48}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="7"] .flow-heading h2,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="8"] .flow-heading h2{color:#315ed2}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="9"] .flow-heading h2{color:#2f7d5c}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="9"] .flow-insight{border-top-color:#2f7d5c}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="7"] .flow-barriers span,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="8"] .flow-barriers span,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="9"] .flow-barriers span{opacity:.17;filter:saturate(.35);transform:scale(.96);transition:opacity .55s ease,filter .55s ease,transform .55s ease,background .45s ease,border-color .45s ease,box-shadow .45s ease}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="7"] .flow-barriers .is-pinpointed,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="8"] .flow-barriers .is-pinpointed,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="9"] .flow-barriers .is-pinpointed{position:relative;z-index:2;opacity:1;filter:none;transform:translateY(-3px) scale(1.03);border:2px solid #315ed2;background:#eaf1ff;color:var(--navy);box-shadow:0 8px 20px #315ed22b;font-weight:800}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="7"] .flow-barriers .is-pinpointed:after,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="8"] .flow-barriers .is-pinpointed:after,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="9"] .flow-barriers .is-pinpointed:after{content:'';position:absolute;right:-5px;top:-5px;width:12px;height:12px;box-sizing:border-box;border:1px solid var(--navy);border-radius:50%;background:radial-gradient(circle,#315ed2 0 1.5px,transparent 2px),radial-gradient(circle,transparent 0 3px,#698ab9 3.5px 4px,transparent 4.5px),#fff;box-shadow:0 0 0 2px #fff}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="9"] .flow-barriers .is-pinpointed{border-color:#2f7d5c;background:#e8f5ef;box-shadow:0 8px 20px #2f7d5c26}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="9"] .flow-result .flow-card{border-color:#2f7d5c;box-shadow:10px 10px 0 #d8ebe2}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="9"] .flow-barriers{max-height:0;margin-top:0;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .5s ease .25s,transform .6s ease .2s,max-height .7s ease .45s,margin .7s ease .45s}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="9"] .flow-card{min-height:172px;transform:none}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="9"] .flow-arrow{height:172px;color:#2f7d5c}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll{height:1450vh}
.flow-bridge-answer{display:none;margin:22px 0 0;color:#315ed2;font:400 1.5rem/1.4 var(--serif)}
.flow-scroll[data-bridge="answer"] .flow-bridge-answer{display:block;animation:flow-copy-in .45s ease both}
.flow-scroll[data-bridge] .flow-insight{display:none!important}
.flow-scroll[data-bridge="manageable"] .flow-insight-bridge{display:block!important}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-bridge] .flow-heading h2{color:#315ed2}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-bridge] .flow-insight-bridge{border-top-color:#315ed2;font-family:var(--serif);font-size:1.4rem;font-weight:400;line-height:1.5}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-bridge] .flow-insight-bridge p{color:var(--navy);font-family:var(--serif);font-weight:400}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-bridge="simplify"] .flow-insight-bridge > p,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-bridge="manageable"] .flow-insight-bridge > p{color:#315ed2;font-size:2rem}
.flow-bridge-explanation{display:none;margin-top:24px}
.flow-scroll[data-bridge="manageable"] .flow-bridge-explanation{display:block;animation:flow-copy-in .45s ease both}
.flow-bridge-explanation p + p{margin-top:14px}

html[data-flowmock="3"] .flow-mockup-section{background:#eef3fa}
html[data-flowmock="3"] .flow-canvas{padding:0;border:0;border-radius:12px;background:#fff;box-shadow:0 26px 80px #102b5020}
html[data-flowmock="3"] .flow-canvas:before{display:none}
html[data-flowmock="3"] .flow-heading{max-width:none;min-height:165px;margin:0;padding:42px 45px 31px;border-bottom:1px solid #d8e2ee;background:var(--navy);color:#fff}
html[data-flowmock="3"] .flow-heading h2{color:#fff;font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.2vw,3rem)}
html[data-flowmock="3"] .flow-research{color:#e1ebf7}
html[data-flowmock="3"] .flow-pipeline{padding:38px 38px 42px}
html[data-flowmock="3"] .flow-scroll[data-state="4"] .flow-heading,html[data-flowmock="3"] .flow-scroll[data-state="5"] .flow-heading,html[data-flowmock="3"] .flow-scroll[data-state="6"] .flow-heading{min-height:116px;margin:0;padding-block:37px 25px}
html[data-flowmock="3"] .flow-scroll[data-state="4"] .flow-heading h2,html[data-flowmock="3"] .flow-scroll[data-state="5"] .flow-heading h2,html[data-flowmock="3"] .flow-scroll[data-state="6"] .flow-heading h2{color:#a9c7ff}
html[data-flowmock="3"] .flow-card{border-radius:10px}

@media(max-width:900px){
 .flow-scroll{height:auto}
 .flow-sticky{position:relative;top:auto;min-height:0;padding:70px 0}
 .flow-canvas{min-height:0;padding:38px 20px}
 .flow-heading,.flow-scroll[data-state="2"] .flow-heading,.flow-scroll[data-state="4"] .flow-heading,.flow-scroll[data-state="5"] .flow-heading,.flow-scroll[data-state="6"] .flow-heading,.flow-scroll[data-state="7"] .flow-heading,.flow-scroll[data-state="8"] .flow-heading,.flow-scroll[data-state="9"] .flow-heading{min-height:0;margin-bottom:34px}
 .flow-pipeline{grid-template-columns:1fr;gap:10px}
 .flow-arrow,.flow-scroll[data-state="4"] .flow-arrow,.flow-scroll[data-state="5"] .flow-arrow,.flow-scroll[data-state="6"] .flow-arrow,.flow-scroll[data-state="7"] .flow-arrow,.flow-scroll[data-state="8"] .flow-arrow,.flow-scroll[data-state="9"] .flow-arrow{height:26px;transform:rotate(90deg)}
 .flow-card,.flow-scroll[data-state="4"] .flow-card,.flow-scroll[data-state="5"] .flow-card,.flow-scroll[data-state="6"] .flow-card,.flow-scroll[data-state="7"] .flow-card,.flow-scroll[data-state="8"] .flow-card,.flow-scroll[data-state="9"] .flow-card{min-height:118px;transform:none}
 .flow-description{max-width:420px}
 .flow-barriers,.flow-scroll[data-state="4"] .flow-barriers,.flow-scroll[data-state="5"] .flow-barriers,.flow-scroll[data-state="6"] .flow-barriers,.flow-scroll[data-state="7"] .flow-barriers,.flow-scroll[data-state="8"] .flow-barriers,.flow-scroll[data-state="9"] .flow-barriers{max-height:none;margin-top:18px;opacity:1;transform:none}
 .flow-insight{max-width:520px;margin-inline:auto}
 .flow-uncertainty{width:100%;margin-top:28px}
 .flow-uncertainty-lines{display:none}
 .flow-scroll[data-state="uncertain"] .flow-heading{min-height:0}
 html[data-flowmock="2"] .flow-canvas{padding-inline:24px}
 html[data-flowmock="3"] .flow-pipeline{padding:30px 20px 35px}
 html[data-flowmock="2"][data-flowtext="wide"] .flow-scroll[data-state="5"] .flow-pipeline,html[data-flowmock="2"][data-flowtext="wide"] .flow-scroll[data-state="6"] .flow-pipeline{margin-bottom:0}
 html[data-flowmock="2"][data-flowtext="wide"] .flow-scroll[data-state="5"] .flow-insight,html[data-flowmock="2"][data-flowtext="wide"] .flow-scroll[data-state="6"] .flow-insight{position:static;width:auto;margin-top:25px}
 html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="5"] .flow-pipeline,html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="6"] .flow-pipeline,html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="7"] .flow-pipeline,html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="8"] .flow-pipeline,html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-state="9"] .flow-pipeline{grid-template-columns:1fr}
}

/* Spacing studies reuse the same content, elements, and progression. */
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll{
 --flow-card-height:140px;
 --flow-heading-size:2.875rem;
 --flow-result-weight:1.55fr;
 --flow-copy-size:1.2rem;
}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-sticky{padding:96px 0 28px}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-canvas{width:min(1320px,calc(100% - 80px));min-height:710px;padding:38px 44px 42px}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-heading{max-width:none;min-height:126px;margin:0 0 30px;display:flex;flex-direction:column;justify-content:center}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-heading h2{max-width:1040px;font-size:var(--flow-heading-size);line-height:1.15;letter-spacing:-.025em}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-research{max-width:920px;margin:20px 0 0;font-size:1.25rem;line-height:1.5}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-bridge-answer{margin-top:18px;font-size:1.5rem;line-height:1.4}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-pipeline{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 36px minmax(320px,var(--flow-result-weight));column-gap:0}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-card{min-height:var(--flow-card-height);padding:20px 16px;transform:none}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-card strong{font-size:2.125rem;line-height:1.12}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-card small{max-width:230px;margin-top:12px;font-size:.875rem;line-height:1.45}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-arrow{height:var(--flow-card-height);font-size:1.875rem}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-description{max-width:240px;font-size:1rem;line-height:1.5}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-barriers h3{margin-bottom:10px;font-size:.875rem;letter-spacing:.025em}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-barriers > div{gap:8px;padding:8px}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-barriers span{min-height:56px;padding:8px 6px;font-size:.875rem;line-height:1.3}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-barriers .flow-more{min-height:34px;font-size:.8125rem}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-insight{margin-top:28px;padding:22px 0 0;font-size:var(--flow-copy-size);line-height:1.5}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-insight p + p{margin-top:18px}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-bridge-explanation{margin-top:24px}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll[data-bridge="simplify"] .flow-insight-bridge > p,
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll[data-bridge="manageable"] .flow-insight-bridge > p{font-size:2rem}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-uncertainty{width:68%;margin-top:4px}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-uncertainty-copy{max-width:730px;font-size:1.25rem;line-height:1.5}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-uncertainty-copy strong{font-size:1.0625rem}

/* B: give the diagram the full width and the explanation a reading area below. */
html[data-flowmock="2"][data-flowtext="expand"]:is([data-flowspacing="b"],[data-flowspacing="hybrid"]) .flow-scroll{--flow-card-height:136px;--flow-heading-size:3rem;--flow-copy-size:1.3125rem}
html[data-flowmock="2"][data-flowtext="expand"]:is([data-flowspacing="b"],[data-flowspacing="hybrid"]) .flow-scroll .flow-canvas{min-height:740px;padding:36px 48px 44px}
html[data-flowmock="2"][data-flowtext="expand"]:is([data-flowspacing="b"],[data-flowspacing="hybrid"]) .flow-scroll .flow-heading{min-height:112px;text-align:center;align-items:center;margin-bottom:28px}
html[data-flowmock="2"][data-flowtext="expand"]:is([data-flowspacing="b"],[data-flowspacing="hybrid"]) .flow-scroll .flow-research{margin-inline:auto;text-align:center}
html[data-flowmock="2"][data-flowtext="expand"]:is([data-flowspacing="b"],[data-flowspacing="hybrid"]) .flow-scroll .flow-pipeline{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 36px minmax(0,1.12fr)}
html[data-flowmock="2"][data-flowtext="expand"]:is([data-flowspacing="b"],[data-flowspacing="hybrid"]) .flow-scroll .flow-barriers span{min-height:52px}
html[data-flowmock="2"][data-flowtext="expand"]:is([data-flowspacing="b"],[data-flowspacing="hybrid"]) .flow-scroll .flow-result{display:contents}
html[data-flowmock="2"][data-flowtext="expand"]:is([data-flowspacing="b"],[data-flowspacing="hybrid"]) .flow-scroll .flow-result .flow-card{grid-column:7;grid-row:1}
html[data-flowmock="2"][data-flowtext="expand"]:is([data-flowspacing="b"],[data-flowspacing="hybrid"]) .flow-scroll .flow-result .flow-description{grid-column:7;grid-row:2;margin-top:0}
html[data-flowmock="2"][data-flowtext="expand"]:is([data-flowspacing="b"],[data-flowspacing="hybrid"]) .flow-scroll .flow-insight{grid-column:1/-1;grid-row:3;width:min(880px,100%);justify-self:center;margin-top:26px;padding-top:24px;text-align:left}
html[data-flowmock="2"][data-flowtext="expand"]:is([data-flowspacing="b"],[data-flowspacing="hybrid"]) .flow-scroll .flow-uncertainty{width:73%;margin-top:0}

/* C: larger typography, with the longer explanations balanced across two columns. */
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll{--flow-card-height:144px;--flow-heading-size:3.25rem;--flow-copy-size:1.3125rem}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll .flow-canvas{min-height:750px;padding:40px 48px 46px}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll .flow-heading{min-height:116px;margin-bottom:32px}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll .flow-pipeline{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 36px minmax(0,1.12fr)}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll .flow-card strong{font-size:2.25rem}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll .flow-result{display:contents}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll .flow-result .flow-card{grid-column:7;grid-row:1}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll .flow-result .flow-description{grid-column:7;grid-row:2;margin-top:0}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll .flow-insight{grid-column:1/-1;grid-row:3;width:100%;margin-top:30px;padding-top:24px;grid-template-columns:1fr 1fr;column-gap:48px;row-gap:18px;text-align:left}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll[data-state="5"] .flow-insight-tutoring,
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll[data-state="6"] .flow-insight-struggle,
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll[data-state="8"] .flow-insight-plan{display:grid}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll .flow-insight p + p{margin-top:0}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll .flow-insight-struggle p:last-child{grid-column:1/-1}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll .flow-insight-pinpoint p{max-width:900px;font-size:1.5rem;line-height:1.45}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll[data-bridge="manageable"] .flow-bridge-explanation{display:grid;grid-template-columns:1fr 1fr;gap:48px}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="c"] .flow-scroll .flow-uncertainty{width:73%;margin-top:0}

/* Hybrid: A's alignment and proportions, with B's full-width diagram and lower copy. */
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="hybrid"] .flow-scroll{--flow-card-height:140px;--flow-heading-size:2.875rem;--flow-copy-size:1.25rem}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="hybrid"] .flow-scroll .flow-canvas{min-height:710px;padding:38px 44px 42px}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="hybrid"] .flow-scroll .flow-heading{min-height:126px;text-align:left;align-items:flex-start;margin-bottom:30px}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="hybrid"] .flow-scroll .flow-research{margin-inline:0;text-align:left}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="hybrid"] .flow-scroll .flow-pipeline{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 36px minmax(0,1.3fr)}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="hybrid"] .flow-scroll .flow-barriers span{min-height:56px}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="hybrid"] .flow-scroll .flow-insight{width:min(920px,100%);justify-self:start;margin-top:28px;padding-top:22px}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing="hybrid"] .flow-scroll .flow-uncertainty{width:70%}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll:is([data-state="1"],[data-state="uncertain"],[data-state="2"],[data-state="3"]) .flow-result{display:block}
html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll:is([data-state="1"],[data-state="uncertain"],[data-state="2"],[data-state="3"]) .flow-result .flow-description{margin-top:19px}

/* Let the crossed-out barriers remain visible until the viewer continues. */
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-resolution="crossed"] .flow-barriers{max-height:345px;margin-top:18px;opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease,max-height .6s ease,margin .6s ease}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-resolution="crossed"] .flow-barriers .is-pinpointed{color:#4e6279;box-shadow:none;transform:none}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-resolution="crossed"] .flow-barriers .is-pinpointed:before,
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-resolution="crossed"] .flow-barriers .is-pinpointed:after{content:'';position:absolute;top:50%;left:7px;right:auto;width:calc(100% - 14px);height:2px;border:0;border-radius:0;background:var(--navy);box-shadow:none;transform-origin:center;--cross-angle:24deg;transform:rotate(var(--cross-angle)) scaleX(1);animation:flow-cross-out .4s ease both}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-resolution="crossed"] .flow-barriers .is-pinpointed:after{--cross-angle:-24deg;animation-delay:.15s}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll .flow-insight-plan strong{color:var(--navy);font-weight:700}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll .flow-insight-plan em{color:#315ed2;font-style:italic}
@keyframes flow-cross-out{from{transform:rotate(var(--cross-angle)) scaleX(0)}to{transform:rotate(var(--cross-angle)) scaleX(1)}}

/* Alternate callback ending; the existing ending stays available for comparison. */
.flow-stage-check,.flow-final-copy{display:none}
html[data-flowending="callback"] .flow-card{position:relative}
html[data-flowending="callback"] .flow-scroll[data-resolution="supported"] .flow-stage-check{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:28px;height:28px;border:1px solid #9bc8b2;border-radius:50%;background:#fff;color:#2f7d5c;--check-delay:.6s;animation:flow-check-in .4s ease var(--check-delay) both}
html[data-flowending="callback"] .flow-scroll[data-resolution="supported"] .flow-study .flow-stage-check{--check-delay:.85s}
html[data-flowending="callback"] .flow-scroll[data-resolution="supported"] .flow-perform .flow-stage-check{--check-delay:1.1s}
.flow-stage-check svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow-stage-check path{stroke-dasharray:24;stroke-dashoffset:0;animation:flow-check-draw .4s ease calc(var(--check-delay) + .1s) both}
html[data-flowending="callback"] .flow-scroll[data-resolution="supported"] .flow-final-copy{position:relative;z-index:2;display:block;max-width:880px;margin:34px 0 0;color:#43576e;font:400 1.25rem/1.55 var(--sans);animation:flow-copy-in .6s ease .5s both}
.flow-scroll[data-bridge="emotional"] .flow-insight-emotional{display:block!important}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-bridge="emotional"] .flow-heading h2{color:#b33832}
html[data-flowmock="2"][data-flowtext="expand"] .flow-scroll[data-bridge="emotional"] .flow-insight-emotional p:last-child{color:var(--navy);font-family:var(--serif);font-weight:400}
@keyframes flow-check-in{from{opacity:0;transform:translateY(5px) scale(.9)}to{opacity:1;transform:none}}
@keyframes flow-check-draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}

@media(max-width:1000px){
 html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-canvas{width:calc(100% - 32px);padding:30px 24px;min-height:0}
 html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-heading{min-height:0;margin-bottom:28px;text-align:left;align-items:stretch}
 html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-heading h2{font-size:clamp(2rem,6vw,3rem)}
 html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-pipeline{grid-template-columns:1fr}
 html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-result{display:block}
 html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-arrow{height:26px;transform:rotate(90deg)}
 html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-insight{width:100%;grid-column:auto;grid-row:auto;grid-template-columns:1fr;column-gap:0}
 html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-insight p + p{margin-top:18px}
 html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll[data-bridge="manageable"] .flow-bridge-explanation{grid-template-columns:1fr;gap:0}
 html[data-flowmock="2"][data-flowtext="expand"][data-flowspacing] .flow-scroll .flow-uncertainty{width:100%}
}
/* A spacious, centered final payoff above the cleared pipeline. */
html[data-flowmock="2"][data-flowtext="expand"][data-flowending="outcome"] .flow-scroll[data-resolution="clear"] .flow-canvas{display:flex;flex-direction:column;justify-content:center}
html[data-flowmock="2"][data-flowtext="expand"][data-flowending="outcome"] .flow-scroll[data-resolution="clear"] .flow-heading{min-height:210px;margin:0 0 42px;text-align:center;align-items:center}
html[data-flowmock="2"][data-flowtext="expand"][data-flowending="outcome"] .flow-scroll[data-resolution="clear"] .flow-heading h2{max-width:960px;font-size:clamp(2.25rem,4vw,3.875rem);line-height:1.1;letter-spacing:-.025em;text-wrap:balance;animation:flow-copy-in .6s ease .15s both}
@media(max-width:1000px){
 html[data-flowmock="2"][data-flowtext="expand"][data-flowending="outcome"] .flow-scroll[data-resolution="clear"] .flow-heading{min-height:0;margin-bottom:36px}
 html[data-flowmock="2"][data-flowtext="expand"][data-flowending="outcome"] .flow-scroll[data-resolution="clear"] .flow-heading h2{font-size:clamp(2rem,6vw,3.25rem)}
}
@media(prefers-reduced-motion:reduce){
 .flow-scroll[data-state="2"] .flow-heading{animation:none!important}
 html[data-flowspacing] .flow-scroll *,html[data-flowspacing] .flow-scroll *:before,html[data-flowspacing] .flow-scroll *:after{transition:none!important;animation:none!important}
}

.flow-restored-leadin{padding-top:90px;margin-bottom:48px}
.flow-learn-why{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:8px 4px;color:var(--blue);font:600 1.125rem/1.4 var(--sans);text-decoration:none}
.flow-learn-why span{font-size:1.5rem;line-height:1}
.flow-learn-why:hover{color:var(--navy);text-decoration:underline;text-underline-offset:6px}
html[data-learnstyle="outlined"] .flow-learn-why{min-height:54px;padding:12px 28px;border:1px solid #8fa9cc;border-radius:999px;background:#ffffffb3;box-shadow:0 5px 18px #102b5007;font-size:1.125rem}
html[data-learnstyle="outlined"] .flow-learn-why:hover{border-color:var(--blue);background:#fff;text-decoration:none}
html[data-learnstyle="stacked"] .flow-learn-why{flex-direction:column;gap:12px;padding:6px 20px;font:italic 400 1.75rem/1.2 var(--serif)}
html[data-learnstyle="stacked"] .flow-learn-why span{display:grid;place-items:center;width:46px;height:46px;border:1px solid #b6c8e4;border-radius:50%;background:#ffffffa6;font:400 1.5rem/1 var(--sans)}
html[data-learnstyle="stacked"] .flow-learn-why:hover{text-decoration:none}
html[data-learnstyle="stacked"] .flow-learn-why:hover span{border-color:var(--blue);background:#fff}
html[data-flowinteraction="buttons"][data-flowmock] .flow-scroll{height:auto}
html[data-flowinteraction="buttons"][data-flowmock] .flow-canvas{display:flex;flex-direction:column}
html[data-flowinteraction="buttons"][data-flowmock][data-flowtext] .flow-scroll .flow-sticky{position:relative;top:auto;min-height:0;padding:0 0 70px}
@media(max-width:1000px){
 .flow-restored-leadin{padding-top:64px;margin-bottom:36px;text-align:center}
}
@media(max-width:900px){
 .flow-scroll:is([data-state="1"],[data-state="uncertain"],[data-state="2"],[data-state="3"]) .flow-barriers{display:none}
}