.hero-composition{position:relative;isolation:isolate}
.hero-workflow{--flow-accent:#c4a0ff;--flow-line:#715393;--flow-muted:#bcb0ca;position:absolute;z-index:3;right:4.5%;top:100px;width:238px;color:#f3ecff}
.hero-workflow ol{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:12px}
.hero-workflow ol:before{content:"";position:absolute;left:-14px;top:54px;bottom:54px;border-left:1px solid var(--flow-line)}
.hero-workflow li{position:relative;margin:0}
.hero-workflow li:before{content:"";position:absolute;left:-14px;top:50%;width:14px;border-top:1px solid var(--flow-line)}
.hero-flow-stage{position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;min-height:99px;padding:18px 15px;border:1px solid #534264;border-radius:12px;background:#0e0d17f2;color:inherit;text-align:left;cursor:pointer;font-family:inherit;transition:border-color .2s ease,background-color .2s ease}
.hero-flow-stage:before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--flow-accent);left:-3px;top:calc(50% - 2px)}
.hero-flow-stage:hover,.hero-flow-stage[aria-pressed=true]{border-color:var(--flow-accent);background:#171024f5}
.hero-flow-stage:focus-visible,.flow-walkthrough:focus-visible{outline:2px solid #dec8ff;outline-offset:5px}
.flow-glyph{width:31px;height:31px;display:grid;place-items:center;flex-shrink:0;color:#dabaff;border-radius:50%;background:radial-gradient(circle,#8650db44,transparent 73%)}
.flow-glyph svg{width:25px;height:25px;filter:drop-shadow(0 0 5px #a164ff66)}
.flow-stage-copy{display:block;min-width:0;padding-top:3px}
.flow-stage-copy strong{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--flow-accent);margin-bottom:8px}
.flow-stage-copy>span:not(.hero-apps){font-size:12px;line-height:1.55;display:block;color:#ded4e9}
.hero-apps{display:flex;align-items:center;gap:10px;margin:0 0 8px;min-height:23px}
.hero-apps img{object-fit:contain;flex-shrink:0}.hero-apps>span{font-size:8px;color:var(--flow-muted)}
#hero-flow-detail{font-size:11px;line-height:1.7;color:#d5c4e9;min-height:39px;margin:16px 0 8px;padding-left:2px}
.flow-walkthrough{display:inline-flex;gap:8px;align-items:center;font-size:11px;font-weight:500;color:#d4b5ff;text-decoration:none;padding:6px 0}
.flow-walkthrough svg{width:14px;height:14px}.flow-walkthrough:hover{text-decoration:underline;text-underline-offset:4px}
.hero-workflow .flow-demo-label{color:var(--flow-muted);font-size:9px;line-height:1.6;margin:7px 0 0}
.hero-flow-caption{background:#0e0d17f2;border-radius:10px;margin-top:12px;padding:2px 13px 12px}
.continuity .hero-composition .hero-note{display:none}
@media(min-width:1280px){
 .hero-composition:after{content:"";position:absolute;right:180px;top:0;bottom:0;width:100px;background:linear-gradient(90deg,transparent,#09090f);pointer-events:none;z-index:0}
 .continuity .hero-composition .hero-art{right:180px}
 .continuity .hero-composition .hero-copy{width:44%;padding-left:5%;padding-top:58px}
 .continuity .hero-composition .hero-copy h1{font-size:clamp(38px,3.5vw,56px);max-width:510px}
 .continuity .hero-composition .hero-description{max-width:370px}
 .continuity .hero-composition .hero-foot{right:4.5%}
}
@media(min-width:1600px){.hero-workflow{right:5%;top:130px;width:260px}.hero-flow-stage{min-height:108px;padding:21px 18px}.flow-stage-copy>span:not(.hero-apps){font-size:13px}.continuity .hero-composition .hero-art{right:230px}.hero-composition:after{right:230px}}
@media(max-width:1279px){
 .hero-workflow{position:relative;top:auto;right:auto;width:auto;margin:0 6%;padding:25px 0 30px;border-bottom:1px solid #30253e}
 .hero-workflow ol{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
 .hero-workflow ol:before,.hero-workflow li:before,.hero-flow-stage:before{display:none}
 .hero-flow-stage{min-height:155px;height:100%;display:block;padding:16px}
 .hero-flow-caption{background:transparent;padding:0;margin-top:0}
 .flow-glyph{margin-bottom:11px}.flow-stage-copy strong{font-size:9px}
 #hero-flow-detail{min-height:0;margin-top:18px;max-width:64ch}
 .flow-demo-label{display:inline-block;margin-left:20px!important}
}
@media(max-width:760px){
 .hero-workflow{margin:0 6%;padding:5px 0 26px}
 .hero-workflow ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .hero-flow-stage{min-height:177px;padding:17px 14px}
 .flow-stage-copy>span:not(.hero-apps){font-size:12px}
 .hero-apps{gap:8px;flex-wrap:wrap}.hero-apps>span{display:none}
 #hero-flow-detail{min-height:38px;font-size:12px}
 .hero-workflow .flow-demo-label{display:block;margin-left:0!important;font-size:10px}
}
@media(max-width:360px){.hero-workflow ol{grid-template-columns:1fr}.hero-flow-stage{min-height:100px;display:flex}.flow-glyph{margin-bottom:0}}
@media(prefers-reduced-motion:reduce){.hero-flow-stage{transition:none}}