/* Selected landing-page hero. Styles stay scoped to this section. */
.hero.flow-hero{display:block;position:relative;isolation:isolate;overflow:hidden;height:auto;min-height:calc(100svh - 74px);padding:clamp(112px,14svh,164px) 0 22px}
.flow-hero .hero-copy{position:relative;z-index:2;text-align:center;max-width:1100px;margin:auto;padding:0 20px;pointer-events:none}
.flow-hero .hero-copy a{pointer-events:auto}
.hero.flow-hero h1{font-size:clamp(48px,5.5vw,78px);line-height:.99;letter-spacing:-.015em;margin-bottom:21px}
.flow-hero .support{max-width:760px;margin-inline:auto;font-size:17px;line-height:1.65;color:var(--soft)}
.flow-hero .hero-actions{display:flex;justify-content:center;gap:15px;margin-top:25px}
.flow-hero .btn{min-height:52px;padding:12px 24px}
.flow-hero .proof{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 25px;margin-top:19px}
.flow-hero .proof-tag{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);box-shadow:2px 2px 0 var(--ink);font:600 12px/1.3 var(--body);color:var(--ink)}
.flow-hero #flow-animation{position:relative;width:100%;height:295px;margin-top:32px;z-index:1;pointer-events:none}
.flow-hero .stream-svg{width:100%;height:100%;display:block;overflow:hidden}
.flow-hero .stream-svg text{font:600 23px var(--disp);letter-spacing:0;fill:var(--paper)}
.flow-hero .stream-svg .out-text{fill:var(--ink);font-weight:700}
.flow-hero .incoming-edge,.flow-hero .incoming-ribbon{stroke:var(--ink)}
.flow-hero .outgoing-edge{stroke:var(--line)}
.flow-hero .outgoing-ribbon{stroke:white}
.flow-hero .stream-processor{position:absolute;z-index:2;display:grid;place-items:center;width:88px;height:88px;border:0;background:transparent;box-shadow:none;transform:translate(-50%,-50%)}
.flow-hero .stream-processor img{width:100%;height:100%}
.flow-hero .flow-fix-badge{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 32px);padding:7px 12px 7px 8px;border:1.5px solid var(--ink);border-radius:999px;background:#FFF1A8;box-shadow:2px 2px 0 var(--ink);font:600 12px/1.3 var(--body);color:var(--ink);pointer-events:none;opacity:0;will-change:opacity,transform}
.flow-hero .fix-check{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--ok-bg);color:var(--ok-ink);font-size:12px}
.flow-hero .demo-label{font:700 10px var(--body);letter-spacing:1.7px}
.flow-hero .flow-static{position:relative;z-index:2;max-width:940px;margin:46px auto 24px;display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;gap:24px;padding:0 24px}
.flow-hero .flow-static>div{background:white;border:2px solid var(--ink);border-radius:16px;padding:24px;box-shadow:var(--sh);min-height:180px}
.flow-hero .flow-static>div:first-child{background:var(--ink);color:var(--paper)}
.flow-hero .flow-static p{font:600 23px/1.45 var(--disp);margin-top:18px}
.flow-hero .flow-static img{margin:auto}
.flow-hero .static-fix-label{display:inline-block;margin-top:14px;font:600 12px/1.4 var(--body);padding:5px 9px;border:1.5px solid var(--ink);border-radius:999px;background:#FFF1A8;color:var(--ink)}
.hero.flow-hero.is-reduced,.hero.flow-hero:has(.flow-static:not([hidden])){height:auto;min-height:0}
@media(max-width:1100px) and (min-width:761px){
 .hero.flow-hero h1{font-size:64px}
 .flow-hero .hero-copy{max-width:1000px}
}
@media(max-width:760px){
 .hero.flow-hero{height:auto;min-height:0;padding:92px 0 30px}
 .flow-hero .hero-copy{padding-inline:24px}
 .hero.flow-hero h1{font-size:clamp(34px,9.6vw,52px);letter-spacing:-.015em;line-height:1.04;margin-bottom:26px}
 .flow-hero .support{font-size:16px;line-height:1.65;max-width:35ch;margin:auto}
 .flow-hero .support br{display:none}
 .flow-hero .hero-actions{gap:12px;margin-top:28px;flex-wrap:wrap}
 .flow-hero .btn{font-size:14px;padding:12px 17px}
 .flow-hero .proof{gap:10px;margin-top:22px}
 .flow-hero .proof-tag{font-size:10px;gap:7px;padding:5px 8px 5px 6px}
 .flow-hero .flow-fix-badge{font-size:11px}
 .flow-hero #flow-animation{height:230px;margin-top:52px}
 .flow-hero .stream-svg text{font-size:20px}
 .flow-hero .stream-svg .incoming-text text{font-size:18px}
 .flow-hero .stream-processor{width:72px;height:72px}
 .flow-hero .flow-static{grid-template-columns:1fr;gap:17px;margin:32px auto}
 .flow-hero .flow-static>div{min-height:155px}
 .flow-hero .flow-static p{font-size:21px}
}
@media(max-width:360px){.hero.flow-hero h1{font-size:clamp(31px,9.7vw,35px)}}
/* Fit the full sweep and correction badge in shorter laptop windows. Keep the
   original spacious layout on taller desktops, including the 16-inch MacBook. */
@media(min-width:761px) and (max-height:900px){
 .hero.flow-hero{padding-top:clamp(16px,calc(15svh - 65px),70px)}
 .hero.flow-hero h1{font-size:clamp(42px,8svh,72px);margin-bottom:16px}
 .flow-hero .hero-actions{margin-top:18px}
 .flow-hero .proof{margin-top:14px}
 .flow-hero #flow-animation{height:clamp(170px,calc(100svh - 470px),295px);margin-top:16px}
}
@media(max-width:760px) and (max-height:800px){
 .hero.flow-hero{padding-top:80px}
 .flow-hero .hero-actions{margin-top:24px}
 .flow-hero .proof{margin-top:18px}
 .flow-hero #flow-animation{height:200px;margin-top:44px}
}