/* D-044 pipeline flow, D-047 step scenes. One illustrative opportunity travels the line as the page scrolls.
   Layout is anchored to one point on the pipe (--fx, --py); flow.js measures from it. */
.flow{--bg:#0b120e;--panel:#131d17;--panel-line:#2a3a2f;--lime:#c0ee83;--lime-ink:#2f5a22;--text:#eef3ea;--soft:#a9b7ab;--dim:#7d8e81;--card:#fbfcf9;--ink:#17201d;--label:#5f6c63;
  --fx:63%;--py:72%;--k:1;--lift:44px;--card-w:330px;--seal-w:206px;--gap:10px;--obj-h:266px;--pair:calc(var(--card-w) + var(--gap) + var(--seal-w));
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position:relative;background:var(--grain),var(--bg);color:var(--text);isolation:isolate}
.flow{border-radius:36px;padding:44px 0;margin:0 clamp(0px,1.2vw,18px)}
@media (max-width:899px){.flow{border-radius:26px;padding:28px 0;margin:0}}
.close-steps{max-width:460px;margin:-6px auto 28px;font-size:16px;line-height:1.6;color:var(--muted)}
.flow-pin{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden;background:var(--grain),radial-gradient(90% 75% at var(--fx) 58%,#14231b 0%,var(--bg) 62%)}
/* Measures the viewport's small height for flow.js; never visible. */
.flow-probe{position:absolute;left:0;top:0;width:1px;height:100vh;height:100svh;visibility:hidden;pointer-events:none}

/* No script: an ordinary readable list. */
.flow:not(.flow-ready) .flow-pin{height:auto;min-height:0;padding:40px clamp(24px,5vw,72px) 80px}
.flow:not(.flow-ready) .flow-scene,.flow:not(.flow-ready) .flow-rail{display:none}
.flow:not(.flow-ready) .flow-step{margin-top:36px}

/* Copy column */
.flow-copy{position:absolute;z-index:4;left:clamp(24px,5vw,72px);top:clamp(64px,11vh,112px);width:min(34vw,470px)}
.flow:not(.flow-ready) .flow-copy{position:static;width:auto;max-width:640px}
.flow-copy h2{font-size:clamp(32px,2.95vw,44px);line-height:1.06;letter-spacing:-.052em;font-weight:560;color:#f4f8f1}
.flow-lede{margin-top:16px;font-size:16px;line-height:1.6;color:var(--soft);max-width:360px}
.flow-steps{list-style:none;margin:clamp(36px,9vh,92px) 0 0;padding:0;position:relative;min-height:230px}
.flow-ready .flow-step{position:absolute;inset:0 0 auto 0}
.flow-step-name{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--lime)}
.flow-step-name::before{content:'';width:22px;height:2px;border-radius:2px;background:currentColor}
.flow-step h3{margin-top:14px;font-size:clamp(24px,2.05vw,30px);line-height:1.16;letter-spacing:-.035em;font-weight:600;color:#f4f8f1;max-width:420px}
.flow-step p{margin-top:14px;font-size:16px;line-height:1.62;color:var(--soft);max-width:400px}

.flow-cta{margin-top:22px;color:var(--lime);font-size:15px}
.flow-cta:hover{color:#d4f6aa}
.flow-ready:not([data-flow-stage="5"]) .flow-cta{visibility:hidden}

/* Stage rail: orientation and keyboard/pointer navigation */
.flow-rail{position:absolute;z-index:4;left:clamp(24px,5vw,72px);bottom:clamp(20px,4.5vh,44px);width:min(34vw,470px)}
.flow-rail-track{position:absolute;left:6px;right:6px;top:21px;height:2px;background:#26352b;border-radius:2px}
.flow-rail-fill{position:absolute;inset:0;background:var(--lime);border-radius:inherit;transform-origin:0 50%;transform:scaleX(0)}
.flow-rail ol{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;position:relative}
.flow-rail li{position:relative}
.flow-rail button{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;min-height:44px;padding:16px 0 0;border:0;background:none;color:var(--dim);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.flow-rail button::before{content:'';position:absolute;top:17px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#26352b;box-shadow:0 0 0 3px var(--bg);transition:background .2s,transform .2s}
.flow-rail button span{padding-top:12px}
.flow-rail li:first-child button{align-items:flex-start}.flow-rail li:first-child button::before{left:6px}
.flow-rail li:last-child button{align-items:flex-end}.flow-rail li:last-child button::before{left:auto;right:1px}
.flow-rail button.is-past::before{background:var(--lime)}
.flow-rail button[aria-current]{color:var(--text)}
.flow-rail button[aria-current]::before{background:var(--lime);transform:scale(1.35)}
.flow-rail button:hover{color:var(--text)}
.flow-rail button:focus-visible{outline:3px solid #5983fd;outline-offset:4px;border-radius:4px}
.flow-disclaimer{position:absolute;z-index:4;right:clamp(24px,5vw,72px);bottom:clamp(20px,4.5vh,44px);font-size:11px;line-height:1.5;color:#83958a;text-align:right;max-width:260px}
.flow:not(.flow-ready) .flow-disclaimer{position:static;margin-top:30px;text-align:left}

/* Scene */
.flow-scene{position:absolute;inset:0;pointer-events:none;user-select:none}
.flow-ground{position:absolute;left:0;right:0;top:var(--py);bottom:0;background:linear-gradient(#0e1813,var(--bg) 75%)}
.flow-pipe{position:absolute;left:0;right:0;top:var(--py);height:26px;margin-top:-13px;background:linear-gradient(#22332a 0%,#121d16 38%,#0a110d 70%,#050806 100%);border-top:1px solid #34483b;border-bottom:1px solid #030504;overflow:hidden;box-shadow:0 22px 40px -14px #000,inset 0 2px 0 rgba(255,255,255,.05)}
.flow-pipe-core{position:absolute;left:0;right:0;top:11px;height:3px;background:rgba(192,238,131,.14)}
.flow-pipe-joints{position:absolute;top:0;bottom:0;left:0;width:calc(100% + 9000px);background:repeating-linear-gradient(90deg,transparent 0 146px,rgba(214,232,204,.12) 146px 150px)}
.flow-pipe-pulses{position:absolute;top:9px;left:0;height:7px;border-radius:4px;animation:flow-run 2.6s linear infinite;width:calc(100% + 16000px);background:repeating-linear-gradient(90deg,transparent 0 90px,rgba(203,245,145,.9) 90px 116px,transparent 116px 270px);filter:drop-shadow(0 0 4px rgba(192,238,131,.75))}
.flow-stage{position:absolute;inset:0;transform:scale(var(--k));transform-origin:var(--fx) var(--py)}
.flow-anchor{position:absolute;left:var(--fx);top:var(--py);width:0;height:0}
.flow-scrim{position:absolute;inset:0 auto 0 0;width:40%;background:linear-gradient(90deg,var(--bg) 0%,rgba(11,18,14,.92) 62%,rgba(11,18,14,0) 100%)}

/* Depth: a light pool under the opportunity and fine grain to keep the dark gradients from banding. */
.flow-glow{position:absolute;left:-320px;top:-70px;width:640px;height:140px;border-radius:50%;background:radial-gradient(closest-side,rgba(192,238,131,.16),rgba(192,238,131,0));pointer-events:none}

/* Stations travel with the line, carrying their apparatus */
.flow-station{position:absolute;left:0;top:0;width:0;height:0}
.flow-collar{position:absolute;left:-34px;top:-21px;width:68px;height:42px;border-radius:9px;background:linear-gradient(#24342b,#151f19);border:1px solid #34483b;box-shadow:0 12px 22px -10px #000}
.flow-collar::after{content:'';position:absolute;left:16px;right:16px;top:19px;height:2px;border-radius:2px;background:var(--lime);box-shadow:0 0 9px var(--lime)}
.flow-station-label{position:absolute;left:-100px;width:200px;top:40px;text-align:center;font-size:12px;font-weight:650;color:#8fa293;white-space:nowrap}

/* Shared panel material for process steps */
.flow-panel{position:absolute;padding:16px 18px;border-radius:14px;background:rgba(19,29,23,.94);border:1px solid var(--panel-line);box-shadow:0 30px 60px -30px #000;color:var(--text);opacity:0}
.flow-panel-title{display:block;font-size:12px;font-weight:700;color:#9fb3a3;margin-bottom:8px;white-space:nowrap}
.flow-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;white-space:nowrap}
.flow-head>b{font-size:14px;font-weight:700;letter-spacing:-.01em;color:#e7efe4}
.flow-pill{display:inline-flex;align-items:center;height:24px;margin-left:auto;padding:0 10px;border-radius:999px;background:#1c2a21;border:1px solid #2c3d31;font-size:12px;font-weight:650;color:#a9b9ad}
.flow-head-more{display:none}
.flow-stack{display:inline-grid}
.flow-stack>*{grid-area:1/1}
.flow-tick{display:grid;place-items:center;flex:none;width:19px;height:19px;border-radius:50%;border:1px solid #3c5143}
.flow-tick svg{width:11px;height:11px;fill:none;stroke:#0b120e;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
/* The followed requirement: a quiet ring that travels from its row into the line and the operations queue.
   It marks which one the story follows, not its status. */
.flow-follow{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px rgba(192,238,131,.62)}

/* Identified: possible needs, unverified and not published */
.flow-feed{left:-196px;bottom:var(--lift);width:392px}
.flow-feed ul{list-style:none;margin:0;padding:0}
.flow-feed li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 0;border-top:1px solid #1f2c24}
.flow-feed li:first-child{border-top:0;padding-top:2px}
.flow-feed-skel{position:absolute;left:0;right:0;top:8px;bottom:8px;display:block;background:linear-gradient(#1f2c24,#1f2c24) 0 50%/10px 10px no-repeat,linear-gradient(#1f2c24,#1f2c24) 22px 3px/40% 11px no-repeat,linear-gradient(#18231d,#18231d) 22px calc(100% - 3px)/54% 9px no-repeat}
.flow-feed li:first-child .flow-feed-skel{top:2px}
.flow-feed-skel::after{content:'';position:absolute;right:0;top:50%;width:84px;height:24px;margin-top:-12px;border-radius:999px;border:1px dashed #27362d}
.flow-feed li>i{width:10px;height:10px;border-radius:3px;background:#dfe8da;box-shadow:0 0 10px rgba(223,232,218,.35)}
.flow-feed li>i.flow-follow{box-shadow:0 0 0 2px #131d17,0 0 0 3.5px rgba(192,238,131,.62),0 0 10px rgba(223,232,218,.35)}
.flow-feed li>span{display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.35;color:#9fb0a3;white-space:nowrap}
.flow-feed li>span b{font-size:14px;font-weight:650;letter-spacing:-.01em;color:#eef3ea}
.flow-feed li>em{height:24px;display:inline-flex;align-items:center;padding:0 9px;border-radius:999px;border:1px dashed #50665a;font-style:normal;font-size:12px;font-weight:650;color:#b4c2b7}

/* The bead train: each possible need queued for a check */
.flow-train{position:absolute;left:0;top:0}
.flow-bead{position:absolute;left:0;top:0;width:22px;height:10px;border-radius:4px;background:#dfe8da;opacity:0;box-shadow:0 0 10px rgba(223,232,218,.35)}
.flow-bead.flow-follow{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px rgba(192,238,131,.62),0 0 10px rgba(223,232,218,.35)}

/* Confirmed: the Operations checkpoint and its panel: first the queue of checks, then the confirmation */
.flow-gate{position:absolute;left:-42px;top:-29px;width:84px;height:58px;border-radius:13px;border:1.5px solid var(--lime);box-shadow:0 0 18px rgba(192,238,131,.55),inset 0 0 14px rgba(192,238,131,.18);opacity:0}
.flow-call{left:-176px;bottom:calc(var(--lift) + 62px);width:352px;padding:16px 18px 12px}
.flow-call-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px}
.flow-call-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--lime);color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.02em}
.flow-call-who{display:flex;flex-direction:column;gap:1px;font-size:12.5px;line-height:1.35;color:#9fb0a3;white-space:nowrap;min-width:0}
.flow-call-who b{font-size:14px;font-weight:650;letter-spacing:-.01em;color:#eef3ea}
.flow-call-body{display:grid;margin-top:14px}
.flow-call-body>*{grid-area:1/1;min-width:0}
.flow-log{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:1.3;color:#93a296;white-space:nowrap}
.flow-log li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 0}
.flow-log li>span{display:flex;align-items:center;gap:8px;color:#c4d0c6;font-weight:600}
.flow-log em{font-style:normal}
.flow-log li.is-next{margin-top:4px}
.flow-log li.is-next>span{color:#eef3ea}
.flow-log li.is-next i{width:8px;height:8px;border-radius:2px;background:#dfe8da}
.flow-log li.is-next em{font-weight:700;color:#dfe9dc}
.flow-log-foot{margin-top:7px;padding-top:7px;border-top:1px solid #26352b;font-size:12.5px;font-weight:650;color:#a9b7ab;white-space:nowrap}
.flow-call-state{flex:none}
.flow-call-state>span{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.flow-call-state .is-on{background:rgba(192,238,131,.14);color:var(--lime)}
.flow-call-state .is-on i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);animation:flow-live 1.2s ease-in-out infinite}
.flow-call-state [data-call-off]{background:#1c2a21;color:#a9b9ad}
.flow-call-audio{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:#0c1410;border:1px solid #1f2c24}
.flow-call-wave{flex:1;height:30px}
.flow-call-wave>span{display:flex;align-items:center;justify-content:space-between;height:30px}
.flow-call-wave i{display:block;width:3px;height:30px;border-radius:2px;background:var(--lime);transform:scaleY(var(--h));transform-origin:50% 50%}
.flow-call-wave .is-live i{animation:flow-wave .95s ease-in-out var(--d) infinite}
.flow-call-wave .is-flat i{background:#3c5143;transform:scaleY(.12)}
.flow-call-time{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:#dfe9dc}
.flow-call-protected{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;font-weight:600;color:#9fb0a3}
.flow-call-protected svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--lime);stroke-width:1.8}
.flow-call-checks{list-style:none;margin:12px 0 0;padding:8px 0 0;border-top:1px solid #223128}
.flow-call-checks li{display:flex;align-items:center;gap:11px;padding:5px 0;font-size:14px;line-height:1.3;color:#7f9184}
@keyframes flow-wave{0%,100%{transform:scaleY(calc(var(--h) * .3))}50%{transform:scaleY(var(--h))}}
@keyframes flow-live{50%{opacity:.35}}

/* The opportunity */
.flow-token{position:absolute;left:-18px;top:-5px;width:36px;height:10px;border-radius:5px;background:var(--lime);box-shadow:0 0 16px 2px rgba(192,238,131,.75);opacity:0}
.flow-tether{position:absolute;left:-1px;top:calc(var(--lift) * -1);width:2px;height:var(--lift);background:linear-gradient(rgba(192,238,131,.15),var(--lime));transform-origin:50% 100%;opacity:0}
.flow-chip{position:absolute;left:-134px;bottom:var(--lift);width:268px;height:48px;opacity:0}
.flow-chip>span{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:12px;font-size:15px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.flow-chip-q{border:1px dashed #6f8a77;background:#141f19;color:#d9e3da;justify-content:center}
.flow-chip-ok{border:1px solid var(--lime);background:var(--card);color:var(--ink);opacity:0;box-shadow:0 18px 40px -18px rgba(192,238,131,.55)}
.flow-chip-ok .flow-tick{border:0;background:var(--lime)}.flow-chip-ok .flow-tick svg{opacity:1}
.flow-chip-ok em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--lime-ink)}

.flow-card,.flow-seal{position:absolute;bottom:var(--lift);height:var(--obj-h);border-radius:14px;opacity:0}
.flow-card{left:calc(var(--pair) / -2);width:var(--card-w);z-index:2;padding:18px 20px;background:var(--card);color:var(--ink);box-shadow:0 34px 70px -30px #000,0 0 0 1px rgba(255,255,255,.08)}
.flow-card-head{display:flex;align-items:center;gap:6px;height:24px}
.flow-tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:#e8f3db;color:var(--lime-ink);white-space:nowrap}
.flow-tag.is-live{background:var(--ink);color:var(--lime);opacity:0}
.flow-card-kind{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--label);justify-items:end}
.flow-slot{position:relative}
.flow-slot b{display:block;font-weight:inherit;opacity:0}
.flow-skel{position:absolute;left:0;top:50%;height:10px;margin-top:-5px;width:70%;border-radius:5px;background:#e4eae0}
.flow-card-title{margin-top:18px;font-size:27px;line-height:1.15;font-weight:600;letter-spacing:-.04em}
.flow-card-title .flow-skel{height:16px;margin-top:-8px;width:78%}
.flow-card-area{margin-top:6px;font-size:13px;color:var(--label)}
.flow-card-area .flow-skel{width:46%}
.flow-card-scope{display:grid;grid-template-columns:.7fr 1fr 1fr;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid #e3e8df}
.flow-card-scope>div>span{display:block;font-size:11.5px;color:var(--label)}
.flow-card-scope .flow-slot{margin-top:4px;font-size:18px;font-weight:600;letter-spacing:-.02em;min-height:24px}
.flow-card-scope .flow-skel{width:84%}
.flow-card-scope .is-unknown{font-size:13px;font-weight:600;color:var(--label);padding-top:3px}
.flow-avail{position:relative;margin-top:16px;height:32px;opacity:0}
.flow-avail>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;border-radius:8px;background:#f1f5ee;font-size:12px;color:var(--label);white-space:nowrap}
.flow-avail b{color:var(--ink);font-weight:700}
.flow-avail-b{opacity:0}

.flow-seal{left:calc(var(--pair) / -2 + var(--card-w) + var(--gap));width:var(--seal-w);z-index:1}
.flow-seal>div{position:absolute;inset:0;border-radius:inherit;padding:18px}
/* Before the split: the business details are part of the same white record, behind a dashed join. */
.flow-seal-raw{background:var(--card);color:var(--ink);border-left:1.5px dashed #c3cdbf;box-shadow:0 34px 70px -30px #000}
.flow-seal-raw .flow-seal-head{color:#33413a}
.flow-seal .flow-seal-raw li>span{color:var(--label)} /* (0,2,2): beats the later .flow-seal li>span on the white record */
.flow-fact{display:block;height:9px;margin-top:6px;border-radius:5px;background:#34413a;transform-origin:0 50%}
.flow-seal-locked{background:#060a08;border:1px solid #2c3b30;color:#cbd8cd}
.flow-seal-open{background:var(--card);color:var(--ink);opacity:0;box-shadow:0 34px 70px -30px #000}
.flow-seal-head{display:flex;align-items:center;gap:9px;height:24px;font-size:13px;font-weight:700}
.flow-lock{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#16231b;opacity:0}
.flow-seal-open .flow-lock{background:#e8f3db;opacity:1}
.flow-lock svg{width:15px;height:15px;fill:none;stroke:var(--lime);stroke-width:1.8;overflow:visible}
.flow-seal-open .flow-lock svg{stroke:var(--lime-ink)}
.flow-seal ul{list-style:none;margin:18px 0 0;padding:0}
.flow-seal li{padding:7px 0}
.flow-seal li>span{display:block;font-size:12px;font-weight:600;color:#8ea092}
.flow-seal-open li>span{color:var(--label)}
.flow-redact,.flow-reveal{display:block;height:9px;margin-top:6px;border-radius:5px;transform-origin:0 50%}
.flow-redact{background:#1c2a21}
.flow-seal li:nth-child(1) i{width:86%}.flow-seal li:nth-child(2) i{width:94%}.flow-seal li:nth-child(3) i{width:72%}
.flow-reveal{background:linear-gradient(90deg,#cfe9b3,#e6f3d9);transform:scaleX(0)}
.flow-seal-foot{position:absolute;left:18px;right:18px;bottom:16px;font-size:11.5px;font-weight:600;color:#7f9184}
.flow-seal-locked .flow-seal-foot{opacity:0}
.flow-seal-open .flow-seal-foot{color:var(--lime-ink)}

/* Published: the preview reaches companies serving the territory */
.flow-companies{left:-320px;bottom:calc(var(--lift) + var(--obj-h) + 12px);width:640px;padding:14px 16px}
.flow-companies .flow-head{margin-bottom:8px}
.flow-company-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 56px;gap:10px}
.flow-company-more{display:grid;place-content:center;justify-items:center;gap:2px;border-radius:10px;border:1px dashed #2f4235;font-size:12px;font-weight:650;color:#8fa293}
.flow-company-more span{font-size:16px;line-height:1;color:var(--lime)}
.flow-company{position:relative;padding:7px 8px;border-radius:10px;border:1px solid #2b3c31;background:#0f1813}
.flow-company-name{display:flex;align-items:center;gap:8px;height:18px;font-size:12.5px;font-weight:650;color:#b8c6bb;white-space:nowrap}
.flow-company.is-you .flow-company-name{color:var(--text)}
.flow-company-name::before{content:'';width:14px;height:14px;border-radius:4px;background:#26352b;flex:none}
.flow-company.is-you .flow-company-name::before{background:var(--lime)}
.flow-notice{display:flex;flex-direction:column;gap:1px;margin-top:7px;padding:6px 10px;border-radius:8px;background:var(--card);color:var(--label);font-size:12.5px;font-weight:600;line-height:1.3;white-space:nowrap;box-shadow:0 10px 22px -12px #000}
.flow-notice b{font-size:12.5px;font-weight:750;color:var(--ink)}

/* Purchase */
.flow-buy{left:-40px;bottom:calc(var(--lift) + var(--obj-h) + 24px);width:316px}
.flow-option{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 10px;padding:9px 10px;border-radius:9px;font-size:12px;color:var(--soft)}
.flow-option b{color:var(--text);font-size:14px}
.flow-option-hl{position:absolute;inset:0;border-radius:inherit;border:1px solid var(--lime);background:rgba(192,238,131,.09);opacity:0;transform-origin:0 50%}
.flow-slots{display:flex;gap:5px}
.flow-slots i{position:relative;width:16px;height:16px;border-radius:50%;border:1px solid #4a604f}
.flow-slots i b{position:absolute;inset:3px;border-radius:50%;background:var(--lime);transform:scale(0)}
.flow-swap{position:relative;display:block;height:16px;grid-column:2/4}
.flow-swap>span{position:absolute;inset:0;white-space:nowrap}
.flow-swap>span+span{opacity:0}
.flow-option.is-exclusive{grid-template-columns:auto 1fr}
.flow-pay{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding:9px 10px 0;border-top:1px solid #26352b;font-size:12px;font-weight:650;color:var(--soft)}
.flow-pay .flow-swap{flex:1;height:16px}
.flow-pay .flow-tick{transform:scale(0);border:0;background:var(--lime)}.flow-pay .flow-tick svg{opacity:1}
.flow-beam{position:absolute;z-index:6;left:0;top:0;width:3px;margin-left:-1px;border-radius:3px;background:linear-gradient(rgba(192,238,131,.35),var(--lime));box-shadow:0 0 14px 1px var(--lime);transform-origin:50% 0;opacity:0}
.flow-beam::after{content:'';position:absolute;left:50%;bottom:-5px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:#e6fbc9;box-shadow:0 0 16px 4px var(--lime)}

/* My Leads */
.flow-board{position:absolute;left:-322px;bottom:var(--lift);width:644px;height:var(--obj-h);padding:16px 18px;border-radius:14px;background:var(--card);color:var(--ink);opacity:0;box-shadow:0 34px 70px -30px #000}
.flow-board-head{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;color:var(--label)}
.flow-board-head b{font-size:16px;color:var(--ink);letter-spacing:-.02em}
.flow-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px;height:calc(100% - 38px)}
.flow-board-foot{display:none}
.flow-illus{display:none}
.flow-col{border-radius:10px;background:#f2f5ef;padding:9px 9px 0}
.flow-col>span{display:block;font-size:11.5px;font-weight:700;color:var(--label);white-space:nowrap}
.flow-col.is-end{background:transparent;border:1px dashed #d6ddd2}
.flow-col-body{display:block;height:88px;margin-top:10px}
.flow-tile{position:absolute;z-index:5;left:0;top:0;width:110px;padding:9px 10px 10px;border-radius:9px;background:#fff;color:var(--ink);box-shadow:0 10px 22px -10px rgba(23,32,29,.45),0 0 0 1px #dde5d8;opacity:0}
.flow-tile b{display:block;font-size:12px;line-height:1.25}
.flow-tile span{display:block;margin-top:4px;font-size:11.5px;color:var(--label)}
.flow-avatar{display:inline-grid;place-items:center;margin-top:8px;height:20px;padding:0 7px;border-radius:999px;background:var(--ink);color:var(--lime);font-size:11.5px;font-style:normal;font-weight:700}

/* D-046: the pipe keeps flowing left to right; it rests offscreen, when paused and for reduced motion.
   D-047: the call waveform and live dot run only while the Confirmed stage is showing. */
@keyframes flow-run{from{transform:translateX(-270px)}to{transform:translateX(0)}}
.flow:not(.is-visible) .flow-pipe-pulses,.motion-paused .flow-pipe-pulses,
.flow:not(.is-visible) .flow-call-wave i,.motion-paused .flow-call-wave i,.flow:not([data-flow-stage="1"]) .flow-call-wave i,
.flow:not(.is-visible) .flow-call-state i,.motion-paused .flow-call-state i,.flow:not([data-flow-stage="1"]) .flow-call-state i{animation-play-state:paused}
/* Touch: a 44px-tall hit area centred on the 32px pill. It grows only up and down, never toward the rail. */
@media (min-width:1600px) and (min-height:900px){
  .flow-copy,.flow-rail{width:min(32vw,560px)}
  .flow-copy h2{font-size:54px}
  .flow-lede{font-size:18px;max-width:420px}
  .flow-step h3{font-size:36px;max-width:500px}
  .flow-step p{font-size:18px;max-width:470px}
  .flow-step-name{font-size:14px}
  .flow-rail button{font-size:13px}
  .flow-steps{min-height:270px}
}
/* Short laptop screens: the copy starts higher so the last step stays clear of the pipe. */
@media (min-width:900px) and (max-height:820px){.flow-copy{top:clamp(44px,7vh,112px)}.flow-steps{margin-top:clamp(24px,5vh,92px)}}
/* Laptops and landscape tablets: a narrower copy column leaves the scene room to stay readable. */
@media (min-width:900px) and (max-width:1399px){.flow{--fx:65%}.flow-copy{width:min(30vw,420px)}}
@media (min-width:900px) and (max-width:1099px){.flow{--fx:68%}}

/* Compact: copy above, scene below; the pipe sits on a band that holds the station label and the rail. */
@media (max-width:899px){
  .flow{--fx:50%;--band:124px;--py:calc(100% - var(--band));--lift:34px;--card-w:300px;--seal-w:300px;--gap:8px;--obj-h:196px;--seal-h:90px}
  .flow-copy{left:22px;right:22px;top:22px;width:auto;max-width:600px}
  .flow-copy h2{font-size:27px;letter-spacing:-.045em}
  .flow-lede{display:none}
  .flow-steps{margin-top:18px;min-height:150px}
  .flow-step-name{font-size:12px}
  .flow-step h3{margin-top:9px;font-size:20px;line-height:1.2;max-width:none}
  .flow-step p{margin-top:8px;font-size:14px;line-height:1.55;max-width:none}
  .flow-cta{margin-top:12px;font-size:14px;padding:6px 0}
  .flow-rail{left:22px;right:154px;width:auto;bottom:14px}
  .flow-rail ol{min-height:52px}
  .flow-rail button{font-size:11px;min-width:32px}
  .flow-rail button span{position:absolute;top:36px;left:50%;padding:0;transform:translateX(-50%);white-space:nowrap;opacity:0;pointer-events:none}
  .flow-rail li:first-child button span{left:0;transform:none}
  .flow-rail li:last-child button span{left:auto;right:0;transform:none}
  .flow-rail button[aria-current] span{opacity:1}
  .flow-disclaimer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .flow-illus{display:block;position:relative;height:0}
  .flow-illus span{position:absolute;right:0;top:18px;line-height:16px;font-size:11px;font-weight:650;color:#93a296}
  .flow-scrim{display:none}
  .flow-card{left:calc(var(--card-w) / -2);bottom:calc(var(--lift) + var(--seal-h) + var(--gap));padding:12px 16px}
  .flow-seal{left:calc(var(--seal-w) / -2);height:var(--seal-h)}
  .flow-seal>div{padding:11px 14px}
  .flow-seal-raw{border-left:0;border-top:1.5px dashed #c3cdbf}
  .flow-seal ul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:7px}
  .flow-seal li{padding:0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end}.flow-seal li>span{font-size:11px;line-height:1.25}
  .flow-card{z-index:2}.flow-seal{z-index:3}
  .flow-seal-foot{display:none}
  .flow-seal-head{height:22px;font-size:12px}
  .flow-card-title{margin-top:9px;font-size:21px}
  .flow-card-area{margin-top:2px;font-size:12px}
  .flow-card-scope{grid-template-columns:.6fr 1fr 1fr;gap:8px;margin-top:9px;padding-top:8px}
  .flow-card-scope>div>span{font-size:11px}
  .flow-card-scope .flow-slot{margin-top:2px;font-size:15px;min-height:20px}
  .flow-card-scope .is-unknown{font-size:11.5px;padding-top:2px;white-space:nowrap}
  .flow-avail{margin-top:9px;height:26px}
  .flow-avail>span{font-size:11px;padding:0 10px}
  .flow-buy{left:-160px;width:320px;bottom:calc(var(--lift) + var(--seal-h) + var(--gap) + var(--obj-h) + 12px)}
  .flow-buy{padding:10px 12px}
  .flow-buy .flow-panel-title{margin-bottom:3px}
  .flow-option{padding:5px 9px}
  .flow-pay{margin-top:3px;padding-top:6px}
  .flow-board{left:-160px;width:320px;height:calc(var(--obj-h) + var(--seal-h) + var(--gap));padding:14px}
  .flow-cols{grid-template-columns:repeat(3,1fr);height:calc(100% - 60px)}
  .flow-board-foot{display:block;margin-top:8px;font-size:11px;font-weight:600;color:var(--label)}
  .flow-col.is-end{display:none}
  .flow-tile{width:92px;padding:8px 6px}
  .flow-tile b,.flow-tile span,.flow-avatar,.flow-tag,.flow-card-kind{font-size:11px}
  .flow-station-label{display:none} /* D-049: the rail label below already names the stage */

  /* D-047 compact scenes */
  .flow-head{margin-bottom:8px}
  .flow-head>b{font-size:13px}
  .flow-pill{height:22px;padding:0 8px;font-size:11px}
  .flow-feed{left:-160px;width:320px;padding:12px 14px}
  .flow-feed li{gap:10px;padding:6px 0}
  .flow-feed li>span{font-size:11.5px}
  .flow-feed li>span b{font-size:13px}
  .flow-feed li>em{height:22px;padding:0 7px;font-size:11px}
  .flow-gate{left:-40px;top:-27px;width:80px;height:54px}
  .flow-call{left:-150px;width:300px;padding:12px 14px 9px}
  .flow-call-head{gap:9px}
  .flow-call-avatar{width:32px;height:32px;font-size:11px}
  .flow-call-who{font-size:11.5px}
  .flow-call-who b{font-size:13px}
  .flow-call-body{margin-top:10px}
  .flow-log{font-size:11.5px}
  .flow-log li{padding:2px 0}
  .flow-log-foot{margin-top:5px;padding-top:5px;font-size:11.5px}
  .flow-call-state>span{height:22px;padding:0 8px;font-size:11px}
  .flow-call-audio{padding:8px 10px}
  .flow-call-wave,.flow-call-wave>span,.flow-call-wave i{height:24px}
  .flow-call-protected{margin-top:9px;font-size:11.5px}
  .flow-call-checks{margin-top:9px;padding-top:5px}
  .flow-call-checks li{padding:3px 0;font-size:13px}
  .flow-companies{left:-160px;width:320px;bottom:calc(var(--lift) + var(--seal-h) + var(--gap) + var(--obj-h) + 12px);padding:10px 12px}
  .flow-companies .flow-head{margin-bottom:6px}
  .flow-companies .flow-pill{display:none}
  .flow-head-more{display:inline;margin-left:auto;font-size:11.5px;font-weight:650;color:var(--lime)}
  .flow-company-row{grid-template-columns:1fr;gap:4px}
  .flow-company{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 5px 3px 9px}
  .flow-company-name{font-size:12px;gap:7px}
  .flow-company-name::before{width:11px;height:11px;border-radius:3px}
  .flow-company-more{display:none}
  .flow-notice{flex-direction:row;margin:0;padding:3px 8px;border-radius:6px;font-size:11.5px}
  .flow-notice b{font-size:11.5px}
  .flow-notice span{display:none}
}

@media (min-width:600px) and (max-width:899px){
  .flow{--band:136px}
  .flow-copy{left:40px;top:40px}
  .flow-copy h2{font-size:36px}
  .flow-steps{margin-top:24px}
  .flow-illus span{top:26px;font-size:12px}
  .flow-step h3{font-size:25px}
  .flow-step p{font-size:16px}
  .flow-rail{left:40px;right:178px;bottom:24px}
  .flow-rail button{font-size:12px}
  .flow-rail button span,.flow-rail li:first-child button span,.flow-rail li:last-child button span{position:static;transform:none;padding-top:12px;opacity:1}
}

/* Short phones: the stage copy carries the story; the heading stays available to assistive technology.
   The station names and rail labels repeat the step name, so the band under the pipe shrinks to the rail. */
@media (max-width:899px) and (max-height:759px){
  .flow{--band:80px}
  .flow-ready .flow-copy h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .flow-ready .flow-steps{margin-top:0}
  .flow-ready .flow-illus span{top:0}
  .flow-step h3{font-size:18px}
  .flow-step p{font-size:13px;line-height:1.5}
  .flow-station-label{display:none}
  .flow-rail{bottom:14px}
  .flow-rail ol{min-height:44px}
  .flow-rail button span{display:none}
}

/* Static stepper: reduced motion and very short screens. flow.js sizes the compact pin to its tallest stage. */
.flow-static .flow-pin{height:auto;min-height:0;aspect-ratio:auto}
.flow-static.flow-wide-layout .flow-pin{height:max(560px,100vh);height:max(560px,100svh)}
.flow-static:not(.flow-wide-layout) .flow-pin{height:var(--static-h,860px)}

@media (prefers-reduced-motion:reduce){.flow-pipe-pulses,.flow-call-wave i,.flow-call-state i{animation:none}}