/* Small product stories: movement carries the meaning, not just the decoration. */
.z-difference-scene{overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#123a5480,transparent 75%),#081b2b;border-color:#28516d}
.z-difference-panel{min-height:408px}
.z-scene-top,.z-scene-caption{position:relative;z-index:3}
.z-motion-stage{position:relative;height:240px;isolation:isolate}
.z-motion-stage::before{content:'';position:absolute;inset:20px 15%;border-radius:50%;background:#159ff512;filter:blur(25px);animation:zAtmosphere 7s ease-in-out infinite;pointer-events:none}

/* Fan memory: details arrive, collect, and pass to the next shift. */
.z-crm-card{position:absolute;left:50%;top:29px;width:154px;height:158px;margin-left:-77px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding:18px 12px;border:1px solid #3b89ae;border-radius:16px;background:linear-gradient(145deg,#173d58,#0b2439);box-shadow:0 18px 35px #020b1566,inset 0 1px #7ccfff25;overflow:hidden;animation:zProfileHandoff 7s cubic-bezier(.45,0,.2,1) infinite}
.z-crm-avatar{position:relative;display:grid;place-items:center;width:39px;height:39px;margin-bottom:9px;border-radius:50%;color:#d9f5ff;font:700 16px 'Bricolage Grotesque',sans-serif;background:linear-gradient(140deg,#259cca,#164165);box-shadow:0 0 0 5px #3198c511}
.z-crm-avatar>span{position:absolute;right:0;bottom:0;width:8px;height:8px;background:#54e5b3;border:2px solid #15394f;border-radius:50%}
.z-crm-card>strong{font:700 14px 'Bricolage Grotesque',sans-serif;color:#e0f5ff}.z-crm-card>span{font-size:9px;color:#83b6d0;margin-top:3px}
.z-crm-data{display:flex;align-items:center;gap:5px;margin-top:14px}.z-crm-data i{display:block;width:27px;height:4px;border-radius:4px;background:#52bde7;transform-origin:left;animation:zDataLoad 7s ease infinite}.z-crm-data i:nth-child(2){animation-delay:.25s}.z-crm-data i:nth-child(3){animation-delay:.5s;background:#54d9b2}
.z-crm-scan{position:absolute;inset:0;border-top:2px solid #71d9ff66;background:linear-gradient(#47c8ff12,transparent 35%);animation:zScanProfile 3.5s linear infinite;pointer-events:none}
.z-memory-note{position:absolute;z-index:2;width:106px;padding:9px 12px;box-sizing:border-box;border:1px solid #346383;border-radius:9px;background:#112d43;box-shadow:0 8px 20px #020c1740;color:#74b5d9;font-size:9px;line-height:1.5;animation:zMemoryCollect 7s cubic-bezier(.22,1,.36,1) infinite}
.z-memory-note b{display:block;font-size:11px;font-weight:600;color:#d4ebf8}
.z-memory-note-1{left:1%;top:4px;--entry-x:-50px;--collect-x:70px;--collect-y:65px;transform:rotate(-6deg)}
.z-memory-note-2{right:0;top:22px;--entry-x:50px;--collect-x:-70px;--collect-y:45px;animation-delay:.3s;transform:rotate(5deg)}
.z-memory-note-3{left:0;top:127px;--entry-x:-50px;--collect-x:70px;--collect-y:-50px;animation-delay:.6s;transform:rotate(-4deg)}
.z-memory-note-4{right:0;top:144px;--entry-x:50px;--collect-x:-70px;--collect-y:-65px;animation-delay:.9s;transform:rotate(5deg)}
.z-shift-transfer{position:absolute;left:5px;right:5px;bottom:0;display:flex;align-items:center;gap:12px;font-size:9px;color:#82a8c1}
.z-shift-transfer>span{display:flex;align-items:center;gap:7px;white-space:nowrap}.z-shift-transfer>span>i{display:grid;place-items:center;width:25px;height:25px;border:1px solid #376382;border-radius:50%;font-style:normal;color:#91c9e7;background:#102b40;animation:zShiftReceive 7s ease infinite}.z-shift-transfer>span:last-child>i{animation-delay:3.5s}
.z-shift-track{position:relative;flex:1;height:1px;background:#2c526a}.z-shift-track>b{position:absolute;left:0;right:0;top:-17px;font-size:8px;font-weight:500;text-align:center;color:#6596b2;white-space:nowrap}.z-shift-track>i{position:absolute;left:0;top:-3px;width:28px;height:6px;border-radius:6px;background:linear-gradient(90deg,transparent,#62d5ff);box-shadow:5px 0 12px #1aa3f550;animation:zShiftTravel 3.5s ease-in-out infinite}

/* Retention: a visible orbit, a beating heart, and a relationship that builds. */
.z-relationship-rings{position:absolute;left:50%;top:9px;width:192px;height:192px;margin-left:-96px;border:1px solid #33719466;border-radius:50%;box-shadow:0 0 0 21px #2b7b9b09,0 0 0 42px #2b7b9b05}
.z-relationship-rings::before{content:'';position:absolute;inset:17px;border:1px dashed #4986a055;border-radius:50%;animation:zOrbit 30s linear infinite reverse}
.z-retention-core{position:absolute;left:50%;top:55px;width:108px;height:108px;margin-left:-54px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #337a87;border-radius:50%;background:radial-gradient(circle at 35% 25%,#1b5460,#0d2c3f);box-shadow:0 10px 40px #020d1855,0 0 30px #36d39910}
.z-retention-core svg{width:28px;height:28px;color:#65e9bd;margin-bottom:4px;animation:zHeartBeat 2.5s ease-in-out infinite}.z-retention-core strong{font:700 13px 'Bricolage Grotesque',sans-serif;color:#d5f8ed}.z-retention-core>span{font-size:8px;color:#7badac;margin-top:2px}
.z-fan-orbiter{position:absolute;left:50%;top:9px;width:192px;height:192px;margin-left:-96px;border-radius:50%;animation:zOrbit 12s linear infinite}
.z-fan-orbiter>span{position:absolute;left:50%;top:-7px;margin-left:-42px;width:84px;height:29px;display:grid;place-items:center;border:1px solid #3b7087;border-radius:8px;background:#133447;box-shadow:0 8px 20px #020d184d;color:#bfebf5;font-size:10px;font-weight:600;animation:zCounterOrbit 12s linear infinite}
.z-fan-orbiter:nth-of-type(4),.z-fan-orbiter:nth-of-type(4)>span{animation-delay:-4s}.z-fan-orbiter:nth-of-type(5),.z-fan-orbiter:nth-of-type(5)>span{animation-delay:-8s}
.z-relationship-meter{position:absolute;left:4%;right:4%;bottom:2px;display:flex;align-items:center;gap:10px;color:#81a6bc;font-size:9px}.z-relationship-meter>span{white-space:nowrap}.z-relationship-meter>i{position:relative;flex:1;height:4px;border-radius:3px;background:#234257;overflow:hidden}.z-relationship-meter>i::after{content:'';position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,#239dda,#61e2b4);animation:zRelationshipBuild 6s cubic-bezier(.4,0,.2,1) infinite}

/* Outreach: real travel through a queue, with a reply appearing at the end. */
.z-message-window{position:absolute;inset:0 0 18px;overflow:hidden;mask-image:linear-gradient(transparent,#000 13%,#000 82%,transparent)}
.z-moving-message{position:absolute;left:5%;right:5%;top:85px;min-height:72px;box-sizing:border-box;padding:14px 42px 14px 17px;border:1px solid #346a8c;border-radius:12px 12px 12px 3px;background:linear-gradient(120deg,#173d57,#102a40);box-shadow:0 12px 22px #030f1c55;animation:zMessageQueue 9s cubic-bezier(.6,0,.2,1) infinite}
.z-moving-message:nth-child(2){animation-delay:-3s}.z-moving-message:nth-child(3){animation-delay:-6s}
.z-moving-message>span{display:block;font-size:9px;color:#66bce9;letter-spacing:.04em;margin-bottom:5px}.z-moving-message strong{display:block;font-size:12px;font-weight:500;color:#d3ebf7;line-height:1.4}.z-moving-message>i{position:absolute;right:16px;top:25px;font-size:21px;font-style:normal;color:#58bde9;animation:zMessageSend 9s ease infinite}.z-moving-message:nth-child(2)>i{animation-delay:-3s}.z-moving-message:nth-child(3)>i{animation-delay:-6s}
.z-reply-bubble{position:absolute;right:1%;bottom:0;display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid #317e70;border-radius:12px 12px 3px 12px;background:#103b3a;box-shadow:0 10px 20px #020c1740;animation:zReplyArrives 4.5s cubic-bezier(.22,1,.36,1) infinite}
.z-reply-bubble strong{font-size:10px;font-weight:600;color:#aff0d9}.z-reply-bubble>span{display:flex;gap:3px}.z-reply-bubble i{width:4px;height:4px;background:#6ee1b7;border-radius:50%;animation:zTyping .9s ease-in-out infinite}.z-reply-bubble i:nth-child(2){animation-delay:.12s}.z-reply-bubble i:nth-child(3){animation-delay:.24s}

/* Operator experience: content, conversations and learning form a live loop. */
.z-operator-circuit{position:absolute;inset:0;width:100%;height:100%;stroke:#31596e;stroke-width:1.2}
.z-circuit-signal{stroke:#6dd7f7;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:12 88;animation:zCircuit 5s linear infinite;filter:drop-shadow(0 0 4px #20bafa)}
.z-operator-stations{position:absolute;left:3%;right:3%;top:23px;display:grid;grid-template-columns:repeat(3,1fr);gap:15px;text-align:center}
.z-operator-stations>div{display:flex;flex-direction:column;align-items:center;gap:12px}.z-operator-stations strong{font-size:10px;font-weight:600;color:#a8d4e9;background:#0b2233;padding:0 5px;position:relative}
.z-content-stack,.z-sales-bubble,.z-learning-bars{position:relative;width:60px;height:62px;box-sizing:border-box;border:1px solid #326685;border-radius:13px;background:linear-gradient(145deg,#153c55,#0d263c);box-shadow:0 8px 20px #040f1a55}
.z-content-stack i{position:absolute;inset:15px 16px;border:1px solid #70b4db;border-radius:4px;background:linear-gradient(150deg,#3184ab,#19415b);animation:zContentShuffle 5s cubic-bezier(.45,0,.2,1) infinite;--card-turn:-13deg;--card-x:-6px}
.z-content-stack i:nth-child(2){--card-turn:11deg;--card-x:6px;animation-delay:.17s}.z-content-stack i:nth-child(3){--card-turn:0deg;--card-x:0px;animation-delay:.34s;background:linear-gradient(150deg,#66c1de,#226c94)}
.z-sales-bubble{display:flex;align-items:center;justify-content:center;gap:4px;animation:zConversationBounce 5s ease-in-out infinite}.z-sales-bubble::after{content:'';position:absolute;bottom:-6px;left:12px;width:10px;height:10px;background:#102d43;border-left:1px solid #326685;border-bottom:1px solid #326685;transform:skewY(-30deg)}
.z-sales-bubble i{width:5px;height:5px;border-radius:50%;background:#74cdf3;animation:zTyping 1.2s ease-in-out infinite}.z-sales-bubble i:nth-child(2){animation-delay:.15s}.z-sales-bubble i:nth-child(3){animation-delay:.3s}
.z-learning-bars{display:flex;align-items:end;justify-content:center;gap:5px;padding:14px 12px}.z-learning-bars i{width:7px;height:18px;border-radius:2px;background:#59c6bf;transform-origin:bottom;animation:zLearningGrow 5s ease-in-out infinite}.z-learning-bars i:nth-child(2){height:26px;animation-delay:.2s}.z-learning-bars i:nth-child(3){height:34px;animation-delay:.4s;background:#79eac2}
.z-operator-insight{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);text-align:center;white-space:nowrap;background:#0c2536;padding:8px 20px}.z-operator-insight span{display:block;font-size:9px;letter-spacing:.04em;color:#6eafa8;margin-bottom:5px}.z-operator-insight strong{display:block;font:700 18px/1.25 'Bricolage Grotesque',sans-serif;color:#c7f2e4;animation:zInsightArrives 5s ease-in-out infinite}

/* Replace the boxed chips with a single, open handover diagram. */
.z-handoff{position:relative;margin-top:24px;padding:32px 28px;grid-template-columns:1fr 1fr;gap:50px;border:0;border-top:1px solid #285052;border-bottom:1px solid #1f4247;border-radius:0;background:radial-gradient(ellipse at 78% 50%,#36d3990d,transparent 70%)}
.z-handoff h3{font-size:clamp(27px,2.8vw,34px)}.z-handoff p{max-width:400px;font-size:13px}.z-handoff-flow{position:relative;height:170px;min-width:0}
.z-handoff-scope{position:absolute;left:0;top:9px;bottom:9px;display:flex;flex-direction:column;justify-content:space-between;z-index:2}.z-handoff-scope>span{font-size:13px;color:#b8d6de;line-height:32px;background:#0b1b29;padding-right:10px}.z-handoff-scope i{font-style:normal;color:#527e87;margin:0 3px}
.z-handoff-lines{position:absolute;left:120px;right:50px;top:8px;width:calc(100% - 170px);height:154px;stroke:#315956;stroke-width:1}
.z-handoff-stream{stroke:#65dfba;stroke-width:2;stroke-linecap:round;stroke-dasharray:9 91;stroke-dashoffset:100;opacity:0}
.z-handoff.is-revealed .z-handoff-stream{animation:zHandoffStream 3.2s cubic-bezier(.4,0,.2,1) both}.z-handoff.is-revealed .z-handoff-stream:nth-child(3){animation-delay:.3s}.z-handoff.is-revealed .z-handoff-stream:nth-child(4){animation-delay:.6s}
.z-handoff-hub{position:absolute;right:0;top:55px;width:90px;text-align:center}.z-handoff-hub>span{position:relative;display:grid;place-items:center;width:60px;height:60px;margin:0 auto 12px;border-radius:50%;background:#123338;box-shadow:0 0 0 9px #36d39907,0 0 0 19px #36d39903;border:1px solid #377c6b}.z-handoff-hub img{width:35px;height:35px}.z-handoff-hub strong{font-size:11px;line-height:1.4;font-weight:500;display:block;color:#99d7c4}.z-handoff.is-revealed .z-handoff-hub>span{animation:zHandoffReceive 3.8s ease both}

.z-difference-shell:not([data-animated='true']) .z-difference-scene *,.z-difference-shell:not([data-animated='true']) .z-difference-scene *::before,.z-difference-shell:not([data-animated='true']) .z-difference-scene *::after{animation-play-state:paused}
@keyframes zAtmosphere{0%,100%{transform:translate(-15px,10px) scale(.8)}50%{transform:translate(20px,-10px) scale(1.15)}}
@keyframes zProfileHandoff{0%,100%{transform:translate(-12px,12px) rotate(-4deg)}25%,48%{transform:translate(0,-5px) rotate(0)}68%,88%{transform:translate(14px,3px) rotate(4deg)}}
@keyframes zDataLoad{0%,12%{transform:scaleX(.15);opacity:.3}35%,85%{transform:scaleX(1);opacity:1}100%{transform:scaleX(.15);opacity:.3}}
@keyframes zScanProfile{0%{transform:translateY(-100%);opacity:0}15%,75%{opacity:1}100%{transform:translateY(100%);opacity:0}}
@keyframes zMemoryCollect{0%{translate:var(--entry-x) 20px;scale:.8;opacity:0}12%,45%{translate:0 0;scale:1;opacity:1}60%,73%{translate:var(--collect-x) var(--collect-y);scale:.6;opacity:0}85%,100%{translate:0 0;scale:1;opacity:1}}
@keyframes zShiftTravel{0%{left:0;opacity:0}15%,80%{opacity:1}100%{left:calc(100% - 28px);opacity:0}}
@keyframes zShiftReceive{0%,40%,100%{transform:scale(1);background:#102b40;box-shadow:none}55%,80%{transform:scale(1.16);background:#1c4e58;border-color:#6ce3ba;box-shadow:0 0 0 5px #36d39910}}
@keyframes zOrbit{to{transform:rotate(360deg)}}@keyframes zCounterOrbit{to{transform:rotate(-360deg)}}
@keyframes zHeartBeat{0%,40%,100%{transform:scale(1)}15%{transform:scale(1.2)}25%{transform:scale(1.05)}32%{transform:scale(1.15)}}
@keyframes zRelationshipBuild{0%,8%{transform:scaleX(.08)}70%,88%{transform:scaleX(1)}100%{transform:scaleX(.08)}}
@keyframes zMessageQueue{0%{transform:translate(24px,128px) rotate(4deg);opacity:0}8%{opacity:1}27%,33%{transform:translate(0,54px) rotate(0);opacity:1}60%,66%{transform:translate(0,-32px) rotate(0);opacity:1}92%,100%{transform:translate(-14px,-122px) rotate(-3deg);opacity:0}}
@keyframes zMessageSend{0%,30%{transform:translate(0,0);opacity:.6}45%{transform:translate(21px,-21px);opacity:0}46%{transform:translate(-10px,10px);opacity:0}60%,100%{transform:translate(0,0);opacity:.6}}
@keyframes zReplyArrives{0%,10%{transform:translate(35px,14px) scale(.9);opacity:0}25%,80%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(0,-14px);opacity:0}}
@keyframes zTyping{0%,65%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
@keyframes zCircuit{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes zContentShuffle{0%,100%{transform:translateX(var(--card-x)) rotate(var(--card-turn))}30%,50%{transform:translate(var(--card-x),-12px) rotate(calc(var(--card-turn)*2))}75%{transform:translate(0,0) rotate(0)}}
@keyframes zConversationBounce{0%,100%{transform:translateY(0) rotate(0)}35%,55%{transform:translateY(-10px) rotate(-6deg)}70%{transform:translateY(2px) rotate(3deg)}}
@keyframes zLearningGrow{0%,100%{transform:scaleY(.25)}45%,75%{transform:scaleY(1)}}
@keyframes zInsightArrives{0%,20%{transform:translateY(10px);opacity:.35}55%,85%{transform:translateY(0);opacity:1}100%{transform:translateY(10px);opacity:.35}}
@keyframes zHandoffStream{0%{stroke-dashoffset:100;opacity:0}15%,75%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes zHandoffReceive{0%{transform:scale(.85);opacity:.5}60%{transform:scale(.9);opacity:.8}82%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}

@media(max-width:900px){.z-handoff{gap:25px;padding:28px 20px}.z-handoff-scope>span{font-size:11px}.z-handoff-lines{left:102px;width:calc(100% - 152px)}.z-memory-note{width:91px;padding:8px}.z-memory-note b{font-size:10px}.z-crm-card{width:132px;margin-left:-66px}.z-handoff-flow{height:164px}}
@media(max-width:680px){
 .z-difference-panel{min-height:570px}.z-difference-scene{padding:16px 12px}.z-scene-top{font-size:8px;margin-bottom:17px}.z-scene-badge{font-size:8px;padding:3px 6px}.z-scene-caption{gap:7px;font-size:8px}.z-scene-caption span:last-child{font-size:7px}
 .z-motion-stage{height:240px}.z-memory-note{font-size:8px;width:91px}.z-memory-note-1{left:0;--collect-x:40px}.z-memory-note-2{--collect-x:-40px}.z-memory-note-3{--collect-x:40px}.z-memory-note-4{--collect-x:-40px}.z-memory-note b{font-size:9px}
 .z-crm-card{top:39px;width:126px;height:146px;margin-left:-63px;padding:15px 9px}.z-crm-avatar{width:32px;height:32px}.z-crm-card>strong{font-size:12px}.z-crm-card>span{font-size:8px}
 .z-shift-transfer{left:0;right:0;gap:8px;font-size:8px}.z-shift-transfer>span{gap:4px}.z-shift-transfer>span>i{width:21px;height:21px}.z-shift-track>b{font-size:7px}
 .z-moving-message{left:1%;right:1%;padding:14px 33px 14px 13px}.z-moving-message strong{font-size:11px}.z-moving-message>i{right:12px}.z-reply-bubble{font-size:9px;padding:10px 12px}
 .z-operator-stations{left:0;right:0;gap:8px}.z-content-stack,.z-sales-bubble,.z-learning-bars{width:52px;height:59px}.z-operator-stations strong{font-size:9px}.z-operator-insight strong{font-size:17px}.z-operator-insight{padding:7px 12px}
 .z-handoff{grid-template-columns:1fr!important;gap:20px;padding:28px 2px;background:radial-gradient(ellipse at 80% 75%,#36d3990e,transparent 65%)}.z-handoff h3{font-size:29px}.z-handoff p{font-size:13px;max-width:330px}.z-handoff-flow{height:153px;max-width:420px;width:100%;justify-self:center}.z-handoff-scope{top:7px;bottom:7px}.z-handoff-scope>span{font-size:12px}.z-handoff-lines{left:117px;top:0;width:calc(100% - 167px);height:153px}.z-handoff-hub{top:47px;width:79px}
}
@media(max-width:380px){.z-memory-note{width:78px;padding:7px;font-size:7px}.z-memory-note b{font-size:8px}.z-crm-card{width:114px;margin-left:-57px}.z-shift-transfer>span{font-size:7px}.z-shift-transfer{gap:5px}.z-shift-track>b{font-size:6px}.z-scene-top{letter-spacing:.06em}.z-scene-badge{font-size:7px}.z-relationship-rings,.z-fan-orbiter{width:152px;height:152px;margin-left:-76px;top:27px}.z-retention-core{top:56px;width:96px;height:96px;margin-left:-48px}.z-fan-orbiter>span{width:68px;margin-left:-34px;font-size:8px}.z-relationship-meter{font-size:8px;gap:7px}.z-handoff-scope>span{font-size:10px}.z-handoff-lines{left:95px;width:calc(100% - 145px)}.z-content-stack,.z-sales-bubble,.z-learning-bars{width:47px}.z-content-stack i{inset:15px 13px}}
@media(prefers-reduced-motion:reduce){
 .z-handoff *, .z-handoff *::before,.z-handoff *::after{animation:none!important}
 .z-memory-note{translate:0 0;scale:1;opacity:1}.z-crm-scan{display:none}.z-moving-message{animation:none!important;transform:none;position:relative;inset:auto;margin-bottom:8px;min-height:54px;padding-top:9px;padding-bottom:9px}.z-message-window{mask-image:none;overflow:visible;inset:0 0 30px}.z-moving-message>i{animation:none!important;top:15px}.z-reply-bubble{bottom:0;padding:8px 11px}.z-fan-orbiter:nth-of-type(4){transform:rotate(120deg)}.z-fan-orbiter:nth-of-type(4)>span{transform:rotate(-120deg)}.z-fan-orbiter:nth-of-type(5){transform:rotate(240deg)}.z-fan-orbiter:nth-of-type(5)>span{transform:rotate(-240deg)}
}