/* The illustration system uses the existing palette and keeps sales copy intact. */
.icon{display:block;width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.proof-strip .icon{width:24px;height:24px;color:var(--orange)}
.event-icon .icon{width:20px;height:20px}
.hero-visual{border-radius:10px}
.hero-event{border-radius:7px}
.problem-grid{align-items:center;gap:88px}
.problem-intro h2{max-width:520px}
.camera-wall{max-width:460px;margin-top:35px;position:relative;padding:18px 18px 30px;background:#e5e8df;border:1px solid #d5dacf;border-radius:10px}
.camera-wall-feeds{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.camera-wall-feeds>span{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:2.15;background:var(--dark)}
.camera-wall-feeds img{width:100%;height:100%;object-fit:cover;filter:saturate(.1) brightness(.7)}
.camera-wall-feeds>span:nth-child(2) img{object-position:10% 80%;transform:scale(1.7)}
.camera-wall-feeds>span:nth-child(3) img{object-position:80% 60%;transform:scale(1.9)}
.camera-wall-feeds>span:nth-child(4) img{object-position:40% 30%;transform:scale(1.4)}
.camera-wall-feeds i{position:absolute;width:4px;height:4px;border-radius:50%;background:#c2d59e;top:9px;left:9px}
.camera-wall-alert{position:relative;display:flex;gap:13px;align-items:center;width:90%;margin:-24px auto 0;background:var(--paper);border-left:3px solid var(--orange);padding:15px;border-radius:5px;box-shadow:0 9px 24px #14251b22;font-size:13px;font-weight:600}
.camera-wall-alert>.icon:first-child{color:var(--orange)}
.camera-wall-alert>.icon:last-child{margin-left:auto;width:20px}
.camera-wall-alert small{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:5px}
.camera-wall-caption{display:block;font-size:7px;letter-spacing:1px;color:#6c7766;text-align:center;margin-top:14px}

/* All three use cases are visible before visitors choose the detailed example. */
.scenario-tabs{gap:18px;border:0;margin-top:38px}
.scenario-tabs button,.scenario-tabs button+button{display:block;padding:0;min-width:0;border:1px solid #64725e;border-radius:9px;background:var(--paper);color:var(--ink);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.scenario-tabs button:hover{transform:translateY(-5px);border-color:var(--paper)}
.scenario-tabs button[aria-selected=true]{color:var(--ink);border-color:var(--orange);box-shadow:0 0 0 2px var(--orange)}
.scenario-tabs button[aria-selected=true]:after{display:none}
.scenario-tabs button span{font-size:inherit;opacity:1}
.scenario-tabs button .tab-art{position:relative;display:block;aspect-ratio:1024/688;overflow:hidden;background:#f3efe6}
.tab-art img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.scenario-tabs button:hover .tab-art img{transform:scale(1.035)}
.scenario-tabs button .tab-index{position:absolute;left:15px;top:14px;font-size:10px;color:#57614f;background:#f5f3edd9;width:28px;height:28px;display:grid;place-items:center;border:1px solid #b8c1af;border-radius:50%}
.scenario-tabs button .tab-body{display:block;padding:21px 23px 22px;border-top:1px solid #dbded3}
.scenario-tabs button .tab-title{display:flex;align-items:center;gap:12px}
.tab-title>.icon{color:var(--orange);width:26px;height:26px}
.tab-title strong{font-family:var(--display);font-size:22px;font-weight:650;letter-spacing:-.65px}
.scenario-tabs button .tab-title b{width:29px;height:29px;display:grid;place-items:center;border:1px solid #c4cabb;border-radius:50%;margin-left:auto;font-size:20px}
.scenario-tabs button[aria-selected=true] .tab-title b{background:var(--orange);border-color:var(--orange);color:#fff}
.scenario-tabs button .tab-description{display:block;font-size:12px;line-height:1.65;font-weight:400;color:#656f5e;min-height:40px;margin-top:13px;max-width:260px}
.scenario-tabs button .tab-action{font-size:10px;font-weight:600;display:flex;align-items:center;gap:10px;margin-top:19px}
.tab-action .icon{width:17px;height:17px;color:#6b765f}
.illustration-note{font-size:9px;letter-spacing:.4px;color:#adb8a6;margin-top:19px;text-align:center}
.scenario-panel{margin-top:38px;padding-top:43px;border-top:1px solid #4b5947;grid-template-columns:1fr 1.1fr;gap:70px}
.scenario-copy h3{font-size:32px}
.scenario-demo{background:#18251d;border:1px solid #53634e;border-radius:9px;align-self:center}
.demo-topline{padding:20px 22px}
.demo-bottom{padding:18px 22px;border-top:1px solid #384a36}
.event-flow{padding:15px 24px 24px}
.event-source{display:flex;align-items:center;gap:15px;position:relative;background:#26372a;border:1px solid #465b3d;border-radius:6px;padding:17px}
.flow-icon{width:43px;height:43px;border:1px solid #5d7252;display:grid;place-items:center;border-radius:6px;background:#32472c;color:var(--lime);flex-shrink:0}
.flow-icon .icon{width:24px;height:24px}
.flow-caption{font-size:7px;letter-spacing:1.2px;font-weight:600;color:#aebda2;display:block;margin-bottom:6px}
.event-source strong{font-size:12px;font-weight:500;line-height:1.4;display:block;max-width:210px}
.flow-tag{margin-left:auto;align-self:start;font-size:6px;letter-spacing:.5px;color:#b6c8a7;border:1px solid #596a4d;padding:4px;border-radius:2px}
.flow-connector{height:28px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;margin-left:38px;width:1px;background:#4e634330}
.flow-connector span{width:3px;height:3px;border-radius:50%;background:#8b9f73}
.flow-status{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px #d9ec9560}
.event-flow .demo-alert{position:relative;inset:auto;margin:0;padding:20px 18px;gap:15px;border-radius:6px;box-shadow:0 12px 24px #101b1340;min-height:85px}
.event-flow .alert-symbol{width:40px;height:40px;background:#f7e3d9;border:0;border-radius:50%}
.alert-symbol .icon{width:22px;height:22px}
.event-flow .demo-alert>div>span{font-size:7px;letter-spacing:.8px}
.event-flow .demo-alert strong{font-size:12px;line-height:1.45}
.flow-human{display:flex;align-items:center;gap:9px;font-size:9px;line-height:1.5;color:#b1bda9;margin-top:17px}
.flow-human .icon{width:16px;height:16px;color:var(--lime)}
.replaying .event-source:first-child{animation:flowReveal .45s ease both}
.replaying .ai-source{animation:flowReveal .45s .3s ease both}
.replaying .flow-connector span{animation:flowDot .65s .1s ease both}
.replaying .flow-connector span:nth-child(2){animation-delay:.2s}
.replaying .flow-connector span:nth-child(3){animation-delay:.3s}
.replaying .flow-human{animation:flowReveal .5s .75s ease both}
@keyframes flowReveal{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes flowDot{0%{background:#435337}70%{background:var(--lime)}100%{background:#8b9f73}}

/* Make the camera-to-alert explanation readable as a picture. */
.system-diagram{border-radius:10px;background:radial-gradient(ellipse at 50% 40%,#f4f5ee,#e5eade);border:1px solid #d6ddcd;min-height:280px}
.step-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid #c7d2bb;background:#e8eddf;color:#526749;margin-bottom:17px}
.steps article{position:relative}
.steps .step-number{position:absolute;right:4px;top:25px;font-family:var(--display);font-size:21px;color:#9eac90}
.steps h3{margin-top:0}
.compatibility-note .icon{width:23px;height:23px;color:var(--orange)}
.phone-dot>.icon{width:11px;height:11px;color:white;stroke-width:1.9;margin:1px}
.phone-dot:after{display:none}
.site-map-panel{border:1px solid #c4ccbb;border-radius:10px;background:#f3efe6;box-shadow:0 24px 60px -45px #26382166}
.map-header{border-color:#d5d9ce;background:var(--paper)}
.warehouse-map{aspect-ratio:1024/688;overflow:hidden}
.warehouse-map>img{width:100%;height:100%;object-fit:cover}
.map-zone{box-shadow:0 7px 15px #1b2e1924;border-color:#fff;z-index:1;transform:translate(-50%,-50%);border-radius:30px;padding:8px 13px;font-size:9px;background:#f5f3eef5}
.map-zone:hover{transform:translate(-50%,-50%) scale(1.04)}
.map-zone:after{content:'';position:absolute;top:100%;left:50%;width:1px;height:25px;background:#e9552f}
.map-zone:before{content:'';position:absolute;top:calc(100% + 23px);left:calc(50% - 3px);width:7px;height:7px;background:var(--orange);border-radius:50%;box-shadow:0 0 0 5px #e9552f22}
.map-zone.selected{background:var(--dark);border-color:var(--dark);box-shadow:0 6px 22px #15241445}
.zone-security{left:24%;top:58%}
.zone-safety{left:49%;top:28%}
.zone-operations{left:81%;top:41%}
.map-selection{border-color:#d5d9ce;padding:24px;background:var(--paper)}
.map-instruction{background:var(--paper);color:#6e7c61}

@media(max-width:1150px){
 .scenario-tabs{gap:14px}.scenario-tabs button .tab-body{padding:18px}.tab-title strong{font-size:19px}.tab-title>.icon{width:23px;height:23px}.scenario-tabs button .tab-title{gap:9px}.scenario-tabs button .tab-title b{width:25px;height:25px;font-size:17px}.scenario-panel{gap:36px}.event-flow{padding:13px 18px 19px}.event-source{gap:11px;padding:13px}.flow-tag{display:none}.problem-grid{gap:55px}
}
@media(max-width:850px){
 .scenario-tabs{gap:11px}.scenario-tabs button .tab-body{padding:15px}.tab-title strong{font-size:17px}.tab-title>.icon{width:20px;height:20px}.scenario-tabs button .tab-title b{display:none}.scenario-tabs button .tab-description{font-size:11px;min-height:53px}.scenario-tabs button .tab-action{font-size:9px;margin-top:14px}.scenario-panel{grid-template-columns:1fr;gap:30px}.scenario-demo{width:100%;max-width:620px;margin-inline:auto}.event-flow{padding:20px 28px 24px}.event-source strong{max-width:none;font-size:13px}.event-source{padding:17px}.event-flow .demo-alert strong{font-size:13px}.flow-tag{display:block}.problem-grid{gap:35px}.camera-wall{padding:12px}.camera-wall-alert{gap:8px;font-size:10px;padding:12px;width:96%;margin-top:-13px}.camera-wall-alert small{font-size:8px}.camera-wall-alert .icon{width:20px;height:20px}.camera-wall-alert>.icon:last-child{display:none}.camera-wall-caption{font-size:6px;margin-bottom:5px}.site-map-panel{max-width:700px}.map-zone{font-size:11px;padding:10px 13px}.steps .step-number{font-size:17px}.system-diagram{min-height:245px}
}
@media(max-width:560px){
 .hero-visual{border-radius:8px}.hero-event{border-radius:6px}.problem-grid{gap:29px}.camera-wall{max-width:100%;margin-top:25px;padding:16px 16px 20px}.camera-wall-alert{font-size:12px;gap:12px;padding:14px;width:91%;margin-top:-20px}.camera-wall-alert small{font-size:9px}.camera-wall-caption{font-size:6px;margin-bottom:0}.problem-intro h2{font-size:36px}
 .scenario-tabs{grid-template-columns:1fr;gap:13px;margin-top:28px}.scenario-tabs button,.scenario-tabs button+button{display:grid;grid-template-columns:43% 1fr;align-items:stretch;border-radius:8px}.scenario-tabs button .tab-art{aspect-ratio:auto;min-height:146px;height:100%}.tab-art img{object-fit:cover}.scenario-tabs button .tab-index{left:9px;top:9px;width:22px;height:22px;font-size:8px}.scenario-tabs button .tab-body{border-top:0;border-left:1px solid #dbded3;padding:17px 14px}.scenario-tabs button .tab-title{gap:8px}.tab-title strong{font-size:18px}.tab-title>.icon{width:21px;height:21px}.scenario-tabs button .tab-description{font-size:11px;min-height:0;line-height:1.5;margin-top:9px}.scenario-tabs button .tab-action{font-size:9px;gap:6px;margin-top:13px}.tab-action .icon{width:15px;height:15px}.illustration-note{font-size:8px;margin-top:17px}.scenario-panel{margin-top:28px;padding-top:29px}.scenario-copy h3{font-size:28px}
 .demo-topline{padding:17px 14px;font-size:6px;gap:10px}.event-flow{padding:12px 14px 17px}.event-source{padding:12px;gap:10px}.flow-icon{width:36px;height:36px}.flow-icon .icon{width:21px;height:21px}.flow-caption{font-size:6px;margin-bottom:5px;letter-spacing:.8px}.event-source strong{font-size:11px;max-width:195px}.flow-tag{display:none}.flow-connector{margin-left:29px;height:25px}.event-flow .demo-alert{padding:15px 12px;gap:10px;min-height:75px}.event-flow .demo-alert strong{font-size:11px}.event-flow .demo-alert>div>span{font-size:6px;letter-spacing:.6px}.event-flow .alert-symbol{width:34px;height:34px}.alert-symbol .icon{width:20px;height:20px}.flow-human{font-size:8px;gap:7px}.demo-bottom{padding:15px 14px;font-size:6px}.replay-button{font-size:10px}
 .system-diagram{min-height:210px;padding:26px 12px}.system-node>span{font-size:6px;letter-spacing:.5px}.connection>span{font-size:4.5px}.step-icon{width:42px;height:42px;grid-column:1;grid-row:1/3;margin:0}.step-icon .icon{width:22px;height:22px}.steps article{grid-template-columns:42px 1fr;gap:8px 15px;padding:20px 0 0}.steps .step-number{position:static;grid-column:2;grid-row:1;font-size:9px;justify-self:end;margin:3px 0 0;opacity:.7}.steps h3{grid-column:2;grid-row:1;font-size:18px;max-width:88%;margin:0}.steps p{grid-column:2;grid-row:2}.compatibility-note .icon{width:20px;height:20px}
 .map-zone{font-size:8px;padding:7px 10px;gap:5px}.map-zone>span{width:16px;height:16px;font-size:6px}.zone-security{left:23%;top:55%}.zone-safety{left:49%;top:24%}.zone-operations{left:80%;top:38%}.map-zone:after{height:20px}.map-zone:before{top:calc(100% + 18px);width:6px;height:6px}.map-selection{padding:20px 16px}.map-header{font-size:6px}
}
@media(prefers-reduced-motion:reduce){.scenario-tabs button:hover,.scenario-tabs button:hover .tab-art img{transform:none}.map-zone:hover{transform:translate(-50%,-50%)}}