.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:42px}
.collaboration-demo{width:100%;min-width:0;align-self:center;font-family:var(--font-body)}
.flow-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;margin-bottom:22px;color:#dce6f7}
.flow-heading small{font-size:10px;padding:4px 8px;border:1px solid #31415b;border-radius:99px;color:#94a6c0;white-space:nowrap}
.role-map{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #293a55;background:#121e31;border-radius:15px;padding:16px}
.role-map>span{display:grid;grid-template-columns:22px auto;column-gap:7px;row-gap:3px;align-items:center;opacity:.5;transition:opacity .4s}
.role-map svg,.role-map img{width:21px;height:21px;grid-row:1/3}.role-map b{font-size:12px;line-height:1.3;font-weight:500}.role-map small{font-size:9px;line-height:1.3;color:#9caec6}.role-map i{font-style:normal;color:#627a9e;font-size:18px}
.shop-symbol{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:#dce6d6;color:#5b734f;font:600 12px var(--font-body)}
.role-map .shop-symbol{grid-row:1/3;width:21px;height:21px}
[data-view=muse] .role-map [data-role=muse],[data-view=frontvia] .role-map [data-role=frontvia],[data-view=merchant] .role-map [data-role=merchant],[data-view=network] .role-map>span{opacity:1}
.flow-canvas{position:relative;height:460px;margin-top:10px;isolation:isolate}
.network-grid{position:absolute;inset:30px 0 10px;border-radius:22px;background:radial-gradient(circle,#2a3a55 1px,transparent 1px);background-size:20px 20px;opacity:.16}
.actor{position:absolute;top:57px;left:5%;width:90%;height:350px;transform-origin:center center;transition:transform .85s cubic-bezier(.22,.8,.2,1),opacity .55s,filter .6s;z-index:2;opacity:1}
.actor-muse{transform:translateX(-37%) translateY(0) scale(.27)}
.actor-frontvia{transform:translateY(0) scale(.27)}
.actor-merchant{transform:translateX(37%) translateY(0) scale(.27)}
[data-view=muse] .actor-muse,[data-view=frontvia] .actor-frontvia,[data-view=merchant] .actor-merchant{transform:translate(0,0) scale(1);z-index:4;filter:drop-shadow(0 20px 35px #0004)}
[data-view=muse] .actor:not(.actor-muse),[data-view=frontvia] .actor:not(.actor-frontvia),[data-view=merchant] .actor:not(.actor-merchant){opacity:0;pointer-events:none}
[data-view=network] .actor{opacity:1;filter:drop-shadow(0 9px 15px #0005);pointer-events:none}
.message-routes{position:absolute;inset:0;width:100%;height:100%;z-index:5;overflow:visible;pointer-events:none;opacity:0;transition:opacity .45s}
[data-view=network] .message-routes{opacity:1}
.route-track{fill:none;stroke:#456080;stroke-width:1.4;stroke-dasharray:4 7;opacity:.55}
.return-track{stroke:#38635a}
.route-active{fill:none;stroke:#86adff;stroke-width:2.7;opacity:0;filter:drop-shadow(0 0 5px #528eff);marker-end:url(#flow-arrow);color:#86adff}
.route-active.route-return{stroke:#79d9b4;filter:drop-shadow(0 0 5px #4ec9a4);color:#79d9b4}
.route-active.is-active{opacity:1}
.message-packet circle{fill:#152a52;stroke:#8fb7ff;stroke-width:1.7;filter:drop-shadow(0 0 10px #628dff)}
.message-packet rect{fill:#99beff;stroke:none}.message-packet path{stroke:#294775;stroke-width:1.5;fill:none}
.message-packet.is-return circle{fill:#143b34;stroke:#92e6c4;filter:drop-shadow(0 0 10px #64dcb0)}
.message-packet.is-return rect{fill:#92e6c4}
.travel-label{position:absolute;left:0;right:0;top:77px;text-align:center;font:12px/1.6 var(--font-body);color:#a9c4ff;opacity:0;transition:opacity .3s;z-index:6}
[data-view=network] .travel-label{opacity:1}.is-returning .travel-label{top:368px;color:#8bddbc}
.actor-captions{display:grid;grid-template-columns:repeat(3,1fr);position:absolute;top:298px;left:0;right:0;gap:12px;opacity:0;transition:opacity .35s;text-align:center;pointer-events:none}
.actor-captions>span{font-size:14px;color:#e3ecfb;font-weight:600}.actor-captions small{display:block;font-size:10px;color:#93a6c2;font-weight:400;margin-top:7px}
[data-view=network] .actor-captions{opacity:1}
.computer-lid{height:100%;padding:12px 8px 8px;border-radius:15px 15px 0 0;background:linear-gradient(135deg,#424b5a,#111823);border:1px solid #7c8a9e;position:relative}
.computer-camera{position:absolute;top:4px;left:50%;width:4px;height:4px;border-radius:50%;background:#7a8fa8}
.computer-screen{height:100%;display:flex;flex-direction:column;background:#faf9f5;border-radius:7px;overflow:hidden;color:#28312e}
.window-toolbar{display:flex;justify-content:space-between;align-items:center;background:#eeeee7;padding:5px 11px;color:#8a969b;font-size:8px;height:22px;flex:none}
.window-toolbar>span:first-child{letter-spacing:3px;color:#adb6ba}.window-toolbar small{font-size:8px}
.muse-window-title{display:flex;align-items:center;gap:8px;padding:10px 15px;border-bottom:1px solid #e4e6dd;flex:none;height:47px}.muse-window-title img{width:23px;height:23px}.muse-window-title b{font-size:17px}.muse-window-title span{font-size:10px;color:#8b9489;margin-left:auto}
.muse-conversation{padding:12px 17px;display:grid;gap:11px;flex:1;align-content:start}
.buyer-line{background:#eeedf8;border-radius:0 10px 10px 10px;padding:10px 12px;margin-left:24px;position:relative}.buyer-line small{font-size:9px;color:#8a8ca6}.buyer-line p{font:12px/1.6 var(--font-body);margin:4px 0 0;color:#2b3047}.sent-mark{position:absolute;right:8px;top:9px;font-size:8px;color:#969cb1}
.muse-line{display:flex;gap:10px;align-items:flex-start}.muse-line img{width:18px;height:18px;margin-top:2px}.muse-line p{font:11px/1.7 var(--font-body);color:#54604f;margin:0;flex:1}
.muse-product{display:flex;align-items:center;gap:11px;border:1px solid #dde4d7;border-radius:9px;padding:8px;margin-left:28px;background:#f0f4ec;min-height:64px}
.muse-product>img{width:48px;height:51px;object-fit:cover;border-radius:6px;flex:none}.muse-product small{display:block;font:7px/1.5 var(--font-mono);letter-spacing:.06em;color:#84927c}.muse-product strong{display:block;font:500 11px/1.4 var(--font-body);color:#344c34;margin:3px 0}.muse-product span{font:10px/1.5 var(--font-body);color:#74816c;display:block}
.muse-bottom{display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid #e3e6dc;font-size:10px;min-height:42px;color:#87927e;flex:none}.muse-bottom>span:first-child{flex:1}.send-icon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#e3eadc;color:#6e8662;font-size:15px;flex:none}
.muse-bottom button{background:#4267ee;color:white;border:0;border-radius:6px;padding:8px;font:10px/1.4 var(--font-body);max-width:47%;cursor:pointer}.muse-bottom button:disabled{background:#6a8a6d}
.computer-base{height:13px;margin-inline:-15px;border-radius:0 0 40% 40% / 0 0 100% 100%;background:linear-gradient(#bac4d2,#7e8b9c 60%,#354255);position:relative;border:1px solid #69798f}.computer-base span{position:absolute;width:20%;height:5px;top:-1px;left:40%;border-radius:0 0 8px 8px;background:#607085}
.service-card{height:100%;border:1px solid #6f91de;border-radius:17px;background:#14243e;overflow:hidden;display:flex;flex-direction:column;color:#e8eef7}
.service-brand{padding:20px 24px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #2c4264}.service-brand svg{width:37px;height:37px;flex:none}.service-brand strong{display:block;font-size:21px}.service-brand small{display:block;font-size:10px;color:#97adce;margin-top:4px}.service-tag{margin-left:auto;font-size:9px;color:#99b9ff;border:1px solid #405f90;padding:4px 7px;border-radius:5px}
.service-content{padding:20px 25px;flex:1}.request-label{font:9px/1.5 var(--font-mono);letter-spacing:.07em;color:#779ad0}.service-content h3{font-family:var(--font-body);font-size:23px;line-height:1.4;margin:10px 0;font-weight:500}.service-content>p{font-size:12px;line-height:1.7;color:#9cafd0;margin:0}
.service-checks{margin-top:17px;display:grid;gap:9px}.service-checks>div{display:flex;gap:9px;align-items:center;font-size:11px}.service-checks span{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#244371;color:#9dbeff;font-size:10px;flex:none}.service-checks b{font-weight:400;color:#c4d5f2}
.service-foot{padding:12px 24px;background:#102039;color:#7898c8;font-size:9px;flex:none}
.merchant-system{height:100%;background:#fcfaf4;border:1px solid #b2baaa;border-radius:17px;overflow:hidden;color:#2f3a2d;display:flex;flex-direction:column}
.merchant-system-head{padding:18px 22px;display:flex;gap:10px;align-items:center;border-bottom:1px solid #e1e5d9}.merchant-system-head .shop-symbol{width:34px;height:34px;font-size:17px}.merchant-system-head strong{display:block;font-size:17px}.merchant-system-head small{display:block;font-size:10px;color:#859078;margin-top:4px}.merchant-system-head>span:last-child{margin-left:auto;font-size:9px;color:#8d967e}
.merchant-system-body{padding:18px 22px;flex:1}.merchant-item{display:flex;gap:17px;align-items:center}.merchant-item img{width:92px;height:104px;object-fit:cover;border-radius:9px;flex:none}.merchant-item small{font-size:8px;color:#8a947d;letter-spacing:.04em}.merchant-item h3{font:500 22px/1.4 var(--font-body);margin:7px 0;color:#2f442c}.merchant-item p{font-size:11px;line-height:1.7;color:#829276}
.merchant-facts{margin:16px 0 0}.merchant-facts>div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid #e3e7dc;font-size:11px}.merchant-facts dt{color:#8b947f;flex:none}.merchant-facts dd{margin:0;text-align:right;color:#5a6f4d}.merchant-facts dd strong{font-size:20px;color:#3b5932}.merchant-facts dd small{font-size:9px;margin-left:8px;color:#8a957c}.merchant-receipt{font-size:10px;margin-top:7px;color:#6d8560}
.story-caption{display:flex;gap:14px;align-items:start;margin-top:0;min-height:76px}.step-number{font:10px/1.8 var(--font-mono);color:#7fa6ff;border:1px solid #2f4567;padding:5px 8px;border-radius:6px;flex:none}.story-caption strong{font-size:15px;font-weight:500;color:#e1ebfb}.story-caption p{font-size:12px;line-height:1.7;color:#8fa5c3;margin-top:7px}
.flow-controls{display:flex;gap:10px;margin-top:16px;align-items:center}.flow-controls button{border:1px solid #354b6c;background:transparent;color:#bfcee4;border-radius:99px;padding:10px 16px;min-height:40px;font:12px/1.3 var(--font-body);cursor:pointer}.flow-controls [data-flow-play]{background:#365ad1;border-color:#4268ef;color:white;min-width:110px}.flow-controls button:disabled{opacity:.4;cursor:default}.flow-controls button:hover:not(:disabled){border-color:#86a8ff}
.flow-chapters{display:flex;justify-content:space-between;gap:8px;margin-top:18px}.flow-chapters button{font:10px/1.4 var(--font-body);color:#6f86a7;border:0;border-top:2px solid #263954;padding:9px 0;background:none;flex:1;cursor:pointer}.flow-chapters button[aria-current=step]{border-color:#93b6ff;color:#c5d8fa}
.flow-disclaimer{font:10px/1.7 var(--font-body);color:#6f85a4;margin-top:15px}
.collaboration-demo.is-running [data-flow-play]{background:#203a7b}
.flow-canvas:focus-visible{outline:2px solid #8eb2ff;outline-offset:4px}
@media(max-width:1100px){.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:25px}.role-map{gap:7px;padding:12px}.role-map b{font-size:10px}.role-map small{font-size:8px}.service-content{padding:17px}.service-content h3{font-size:21px}.service-brand{padding:17px}.merchant-system-body{padding:16px}.merchant-item img{width:76px;height:90px}.merchant-item h3{font-size:20px}.muse-conversation{padding:10px 12px;gap:9px}}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}.collaboration-demo{max-width:650px;justify-self:center}.flow-heading{margin-top:10px}.role-map b{font-size:12px}.role-map small{font-size:9px}.service-content{padding:20px 25px}.service-content h3{font-size:23px}}
@media(max-width:620px){
 .flow-heading{font-size:12px;gap:10px}.flow-heading small{font-size:8px}.role-map{gap:5px;padding:12px 8px}.role-map>span{grid-template-columns:1fr;justify-items:center;gap:5px;text-align:center}.role-map img,.role-map svg,.role-map .shop-symbol{grid-row:auto;width:23px;height:23px}.role-map b{font-size:10px}.role-map small{font-size:8px}.role-map i{font-size:14px}
 .flow-canvas{height:490px}.actor{left:3%;width:94%;height:388px;top:48px}.actor-muse{transform:translateX(-34%) scale(.27)}.actor-merchant{transform:translateX(34%) scale(.27)}.actor-frontvia{transform:scale(.27)}
 .message-routes{height:490px}.actor-captions{top:313px;gap:6px}.actor-captions>span{font-size:11px}.actor-captions small{font-size:8px;line-height:1.6}.travel-label{font-size:11px;top:85px}.is-returning .travel-label{top:390px}
 .computer-lid{padding:11px 5px 6px}.computer-base{margin-inline:-7px;height:10px}.window-toolbar{font-size:7px;padding-inline:8px}.window-toolbar small{font-size:7px}.muse-window-title{padding:9px 10px;gap:6px}.muse-window-title b{font-size:16px}.muse-window-title span{font-size:8px}
 .muse-conversation{padding:12px 10px;gap:12px}.buyer-line{padding:9px;margin-left:14px}.buyer-line p{font-size:12px;line-height:1.7;padding-top:4px}.buyer-line small{font-size:8px}.sent-mark{font-size:7px;top:7px}.muse-line{gap:7px}.muse-line p{font-size:11px}.muse-product{margin-left:0;gap:8px}.muse-product strong{font-size:11px}.muse-product span{font-size:9px}.muse-bottom{font-size:9px;padding:9px;gap:5px}.muse-bottom button{font-size:9px;max-width:50%}
 .service-brand{padding:18px 15px}.service-brand strong{font-size:20px}.service-brand small{font-size:9px}.service-tag{font-size:8px}.service-content{padding:20px 16px}.service-content h3{font-size:22px}.service-content>p{font-size:12px}.service-checks{gap:12px}.service-checks>div{font-size:10px}.service-foot{padding:12px 16px;font-size:8px}
 .merchant-system-head{padding:17px 14px;gap:8px}.merchant-system-head strong{font-size:15px}.merchant-system-head small{font-size:8px}.merchant-system-head>span:last-child{font-size:8px}.merchant-system-body{padding:18px 14px}.merchant-item{gap:11px}.merchant-item img{width:76px;height:100px}.merchant-item h3{font-size:20px}.merchant-item small{font-size:7px}.merchant-item p{font-size:10px}.merchant-facts>div{font-size:10px;padding:12px 0;gap:8px}.merchant-facts dd small{display:block;font-size:8px;margin:3px 0 0}.merchant-receipt{font-size:9px}
 .story-caption{gap:9px;min-height:90px}.story-caption strong{font-size:13px}.story-caption p{font-size:11px}.step-number{font-size:9px;padding:4px 6px}.flow-controls{gap:7px;flex-wrap:wrap}.flow-controls button{font-size:11px;padding:9px 12px}.flow-controls [data-flow-play]{min-width:95px}.flow-chapters button{font-size:9px}.flow-disclaimer{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.collaboration-demo *{transition:none!important;animation:none!important}}
/* Focused cards remain readable; compact cards serve as endpoints in the wide shot. */
.flow-canvas{height:500px}.actor{height:420px;top:40px}.actor-captions{top:326px}
.is-returning .travel-label{top:422px}
.merchant-system-head{padding:14px 20px}.merchant-system-body{padding:14px 20px}
.merchant-item img{width:110px;height:118px}.merchant-facts{margin-top:12px}.merchant-facts>div{padding:6px 0}.merchant-receipt{margin-top:5px}
.muse-product>img{width:74px;height:79px}
@media(max-width:620px){
 .flow-canvas{height:600px}.actor{height:500px;top:48px}.message-routes{height:600px}
 .actor-captions{top:380px}.travel-label{top:105px}.is-returning .travel-label{top:505px}
 .merchant-system-head{padding:17px 14px}.merchant-system-body{padding:18px 14px}
 .merchant-item img{width:76px;height:100px}.merchant-facts{margin-top:16px}.merchant-facts>div{padding:12px 0}
 .service-content{padding:15px 16px}.service-brand{padding:15px}
 html[lang=en] .service-content h3{font-size:20px;line-height:1.35}
}