/* Sereia Visor materials; IRS blue from the approved seal. */
.flow-hero{--flow-blue:#0753bf;--flow-progress:0.125;padding-bottom:40px}
.flow-pin{padding-top:24px;padding-bottom:14px}
.flow-intro{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:25px}
.flow-eyebrow{font:500 10px/1.5 var(--s-ui);letter-spacing:.13em;margin-bottom:12px}
.flow-intro h1{font:400 clamp(40px,4.2vw,62px)/1.08 var(--s-display);letter-spacing:-.04em}
.flow-intro h1 span{color:var(--flow-blue)}
.flow-invitation p{font-size:13px;line-height:1.6;margin-bottom:16px}
.flow-invitation .button{min-height:46px;font-size:12px;padding:12px 18px}
.flow-machine{position:relative;padding-bottom:24px;isolation:isolate}
.flow-screen{border:9px solid #252c31;border-bottom-width:6px;border-radius:22px 22px 0 0;overflow:hidden;background:radial-gradient(ellipse at 12% 115%,#a6e6ee 0,transparent 53%),radial-gradient(ellipse at 110% 0,#078fec 0,transparent 59%),linear-gradient(135deg,#133c65,#43778f 65%,#a6cdd2);box-shadow:0 22px 38px -25px #12243b80,inset 0 0 0 1px #ffffff70}
.flow-topline{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:9px 20px;color:white;background:#09284240;font-size:12px}
.flow-topline>span:first-child{display:flex;align-items:center;gap:10px;font-weight:500}
.flow-topline>span:last-child{font-size:8px;letter-spacing:.1em;color:#e2edf6}
.flow-workspace{display:grid;grid-template-columns:100px minmax(0,1fr);gap:27px;padding:18px 34px 18px 16px;align-items:center}
.flow-nodes{display:grid;grid-template-columns:1fr 1fr;gap:8px 6px;padding:12px 7px;border:1px solid #ffffff66;background:#d8e6f23b;border-radius:19px;box-shadow:inset 0 1px 1px #ffffff66,0 12px 30px #06244830;backdrop-filter:blur(18px)}
.flow-node{position:relative;display:flex;align-items:center;flex-direction:column;gap:5px;border:0;background:none;color:#fff;padding:3px 0;min-height:64px;cursor:pointer}
.flow-node-icon{display:grid;place-items:center;width:35px;height:35px;border:1px solid #ecf9ffba;border-radius:10px;background:linear-gradient(145deg,#f1f9ff,#b8d2e5);box-shadow:inset 0 1px 2px #fff,0 3px 1px #15466b70,0 7px 10px #06254433;color:#174b71;transition:transform .22s}
.flow-node svg{width:23px;height:23px}
.flow-node strong{font:500 9px/1.2 var(--s-ui)}
.flow-node small{display:none}
.flow-node.is-active .flow-node-icon{color:white;background:linear-gradient(145deg,#46bbff,#0753bf 70%,#153764);box-shadow:inset 0 1px 2px #ccefff,0 3px 1px #062852,0 0 0 3px #d1efff66;transform:translateY(-2px)}
.flow-node.is-active:after{content:'';width:3px;height:3px;border-radius:50%;background:#fff;position:absolute;bottom:-2px}
.flow-node.is-complete strong{color:#d5f4ff}
.flow-node:focus-visible{outline:2px solid white;outline-offset:3px;border-radius:8px}
.flow-story{align-self:center;border:1px solid #fff9;border-radius:13px;overflow:hidden;background:#fafbf9f7;box-shadow:0 28px 50px -15px #03172c80,0 4px 7px #072a4b40,inset 0 1px white;transform:perspective(1300px) rotateY(-1deg)}
.flow-windowbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 17px;background:linear-gradient(#fff,#eaecea);border-bottom:1px solid #d4dadb;font-size:10px;color:#59636c}
.flow-window-lights{display:flex;gap:5px}
.flow-window-lights i{width:7px;height:7px;border:1px solid #adb9bf;border-radius:50%;background:#d5dce0}
.flow-scene{display:grid;grid-template-columns:1fr 1.07fr;gap:28px;padding:25px 28px;min-height:263px;align-items:center}
.flow-chapter{font:600 9px/1.5 var(--s-ui);letter-spacing:.09em;color:#526b7d;margin-bottom:12px}
.flow-copy h2{font:400 clamp(25px,2.5vw,36px)/1.12 var(--s-display);letter-spacing:-.03em;margin-bottom:13px}
.flow-copy>p#flow-description{font-size:12px;line-height:1.65;color:#495560}
.flow-handoff{font-size:10px;line-height:1.5;color:var(--flow-blue);margin-top:17px}
.flow-evidence{border-left:1px solid #d8e0e4;padding-left:24px}
.flow-evidence>p{font-size:9px;letter-spacing:.07em;color:#526b7d;margin-bottom:11px;font-weight:600}
.flow-feature-list>div{padding:9px 0;border-bottom:1px solid #dce3e5}
.flow-feature-list>div:last-child{border:0;padding-bottom:0}
.flow-feature-list strong{display:block;font:600 12px/1.4 var(--s-ui);color:#173955;margin-bottom:3px}
.flow-feature-list span{display:block;font-size:11px;line-height:1.55;color:#54616c}
.flow-windowfoot{padding:10px 18px;display:flex;align-items:center;gap:8px;border-top:1px solid #dce3e5;font-size:9px;color:#53616b;background:#f0f3f1}
.flow-status-dot{width:5px;height:5px;border-radius:50%;background:#398277;flex-shrink:0}
.flow-connection{margin-left:auto;color:#0753bf}
.flow-approval{padding:10px 0}
.flow-human-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#226b60;background:#e0ece7;margin-bottom:13px;font-size:22px}
.flow-approval strong{font-size:16px;line-height:1.3;display:block}
.flow-approval p{font-size:12px;line-height:1.6;color:#54616c;margin-top:10px}
.flow-approval-label{display:block;font-size:8px;letter-spacing:.07em;color:#226b60;margin-top:16px}
.flow-screenfoot{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#e4f3fc;padding:0 30px 12px 144px;font-size:9px}
.flow-progress{width:130px;height:2px;background:#ffffff45;flex-shrink:0}
.flow-progress>span{display:block;height:100%;width:100%;background:#d5f9ff;transform:scaleX(var(--flow-progress));transform-origin:left;transition:transform .25s}
.flow-chin{height:40px;display:grid;place-items:center;border-radius:0 0 13px 13px;background:linear-gradient(100deg,#c0ced4,#edf0f0 45%,#b9cbd3);box-shadow:inset 0 1px #ffffff99,0 14px 20px -16px #12243b}
.flow-chin img{opacity:.65;width:13px;height:23px}
.flow-stand{position:absolute;z-index:-1;bottom:0;left:41%;width:18%;height:34px;background:linear-gradient(#81969f,#e9eeef 78%,#93a4ac);clip-path:polygon(24% 0,76% 0,81% 85%,100% 94%,100% 100%,0 100%,0 94%,19% 85%)}
.flow-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:10px;font-size:11px}
.flow-bottom a{min-height:44px;display:flex;align-items:center;gap:10px}
.flow-scope{font-size:9px;line-height:1.5;color:var(--muted);text-align:center;margin-top:2px}
/* The desktop illustration becomes a touch-readable walkthrough on compact screens. */
@media(min-width:1101px){
 .flow-node strong{font-size:10px}
 .flow-copy>p#flow-description{font-size:13px}
 .flow-feature-list span{font-size:12px}
 .flow-feature-list strong{font-size:13px}
 .flow-handoff{font-size:11px}
 .flow-evidence>p,.flow-chapter{font-size:10px}
}
.flow-controls{display:none}
@media(max-width:1100px){
 .flow-pin{width:calc(100% - 40px);padding-top:28px;padding-bottom:8px}
 .flow-intro{display:block;margin-bottom:28px}
 .flow-eyebrow{font-size:11px;margin-bottom:12px}
 .flow-intro h1{font-size:clamp(34px,5.7vw,52px);line-height:1.14}
 .flow-invitation{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:22px}
 .flow-invitation p{font-size:15px;line-height:1.6;margin:0}
 .flow-invitation .button{min-height:48px;font-size:13px;padding:12px 16px;flex-shrink:0}
 .flow-machine{padding-bottom:22px}
 .flow-screen{border-width:6px;border-radius:20px 20px 0 0}
 .flow-topline{padding:12px 16px;font-size:13px}
 .flow-topline>span:last-child{display:none}
 .flow-topline img{width:24px;height:24px}
 .flow-workspace{display:flex;flex-direction:column;gap:18px;padding:16px}
 .flow-nodes{width:100%;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;padding:12px 6px;border-radius:14px;align-items:start;background:#133c65d9}
 .flow-node{min-width:44px;min-height:80px;gap:7px;padding:4px 0}
 .flow-node-icon{width:40px;height:40px;border-radius:11px}
 .flow-node svg{width:25px;height:25px}
 .flow-node strong{font-size:11px;line-height:1.3}
 .flow-node[title] small{display:block;font-size:11px;line-height:1.25;max-width:70px;color:#fff}
 .flow-node.is-active:after{bottom:-5px;width:4px;height:4px}
 .flow-story{width:100%;transform:none;border-radius:12px}
 .flow-windowbar{padding:12px 16px;font-size:11px;gap:12px}
 .flow-window-lights{gap:4px}
 .flow-window-lights i{width:6px;height:6px}
 .flow-scene{grid-template-columns:1fr 1fr;gap:24px;min-height:360px;padding:26px 24px;align-items:start}
 .flow-chapter{font-size:11px;line-height:1.5;margin-bottom:12px}
 .flow-copy h2{font-size:clamp(28px,3.8vw,36px);line-height:1.16;margin-bottom:16px}
 .flow-copy h2 br{display:none}
 .flow-copy>p#flow-description{font-size:16px;line-height:1.6}
 .flow-handoff{font-size:13px;line-height:1.55;margin-top:20px}
 .flow-evidence{padding-left:24px}
 .flow-evidence>p{font-size:11px;line-height:1.5;margin-bottom:8px}
 .flow-feature-list>div{padding:12px 0}
 .flow-feature-list strong{font-size:15px;line-height:1.4;margin-bottom:5px}
 .flow-feature-list span{font-size:14px;line-height:1.55}
 .flow-windowfoot{font-size:11px;line-height:1.5;padding:12px 16px;min-height:42px}
 .flow-screenfoot{padding:0 18px 16px;font-size:11px;line-height:1.5;gap:20px;color:#fff;text-shadow:0 1px 2px #164563}
 .flow-screenfoot>span:first-child{color:#fff;background:#133c65;padding:4px 8px;border-radius:4px}
 .flow-progress{width:70px;height:3px}
 .flow-chin{height:28px}
 .flow-chin img{height:19px;width:11px}
 .flow-stand{height:27px}
 .flow-bottom{font-size:12px;gap:18px;margin-top:12px;flex-wrap:wrap}
 .flow-bottom a{min-height:44px}
 .flow-scope{font-size:11px;line-height:1.6;text-align:left;margin-top:8px}
 .flow-approval{padding:8px 0}
 .flow-human-mark{width:40px;height:40px;font-size:22px;margin-bottom:16px}
 .flow-approval strong{font-size:20px;line-height:1.35}
 .flow-approval p{font-size:15px;line-height:1.6;margin-top:12px}
 .flow-approval-label{font-size:11px;line-height:1.5;margin-top:16px}
 .flow-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid #dce3e5;background:#f0f3f1}
 .flow-controls button{display:grid;place-items:center;width:48px;height:44px;border:1px solid #9baeb9;border-radius:8px;background:#fff;color:#173955;font-size:22px;line-height:1}
 .flow-controls button:disabled{opacity:.4;cursor:default}
 .flow-controls button:focus-visible{outline:3px solid #0753bf;outline-offset:2px}
 .flow-controls span{font-size:12px;color:#173955}
}
/* Below 820px, two readable columns no longer fit inside the monitor bezel. */
@media(max-width:819px){
 .flow-scene{display:block;min-height:0;padding:26px}
 .flow-copy h2{font-size:32px}
 .flow-evidence{border:0;border-top:1px solid #d8e0e4;padding:20px 0 0;margin-top:22px}
 .flow-feature-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
 .flow-feature-list>div{border:0;padding:8px 0 0}
 .flow-feature-list>div:last-child{padding-top:8px}
}
@media(max-width:600px){
 .flow-pin{width:calc(100% - 28px);padding-top:24px}
 .flow-intro{margin-bottom:24px}
 .flow-invitation{display:block;margin-top:18px}
 .flow-invitation p{font-size:16px}
 .flow-invitation p br{display:none}
 .flow-invitation .button{margin-top:16px;font-size:14px}
 .flow-screen{border-width:4px;border-radius:16px 16px 0 0}
 .flow-workspace{padding:12px 10px;gap:14px}
 .flow-topline{font-size:12px;padding:10px 12px}
 .flow-nodes{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 6px;padding:14px 8px}
 .flow-node{min-height:78px}
 .flow-node strong{font-size:12px}
 .flow-node[title] small{font-size:11px}
 .flow-windowbar{font-size:11px;padding:12px;gap:8px}
 .flow-window-lights{display:none}
 .flow-scene{padding:22px 18px}
 .flow-copy h2{font-size:28px}
 .flow-feature-list{display:block}
 .flow-feature-list>div{padding:12px 0;border-bottom:1px solid #dce3e5}
 .flow-feature-list span{font-size:15px}
 .flow-windowfoot{font-size:11px;padding:12px}
 .flow-controls{padding:12px}
 .flow-screenfoot{padding:0 10px 12px;font-size:11px;gap:12px}
 .flow-progress{width:32px}
 .flow-bottom,.flow-scope{padding-right:58px}
 .flow-bottom{gap:0;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){.flow-node-icon,.flow-progress>span{transition:none}}