/* Single-site business page — picture-specific values and the sections only this page has
   (staff and their log, the moment of a threat). The other sections live in /shared/css/solution-page.css. */

/* Hero: the picture already fades into a light sky on its right, so only a gentle eased edge is added */
.vh__img{width:min(78%,1300px);object-position:left center;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 58%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.3) 86%,transparent 98%);mask-image:linear-gradient(90deg,#000 0%,#000 58%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.3) 86%,transparent 98%)}
@media(max-width:860px){.vh__img{width:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%);mask-image:linear-gradient(180deg,transparent 0%,#000 24%)}}

/* Working hours: four rooms of the shop in the isometric picture. Each overlay covers the whole picture and is
   clipped to the room's floor polygon (percentages of the picture), so it follows the isometric walls exactly. */
.zone-state{--zs-ratio:1425/879}
.zone-scene{background:#fff}
.zone-scene .zone-overlay{inset:0;border:0;border-radius:0}
.zone-overlay--shop{background:rgba(44,147,255,.3);clip-path:polygon(5% 34%,44% 3%,56% 10%,56.5% 38%,61% 45.5%,54% 86%,26% 64%)}
.zone-overlay--office{background:rgba(150,110,255,.34);clip-path:polygon(56% 21%,64% 13%,70% 21%,62% 34%)}
.zone-overlay--storage{background:rgba(42,190,150,.34);clip-path:polygon(68% 29%,80% 16%,96% 25%,85% 39%)}
.zone-overlay--tech{background:rgba(255,160,60,.34);clip-path:polygon(65% 44%,79% 36%,88% 48%,74% 60%)}
.zone-marker--shop{left:27%;top:33%}
.zone-marker--office{left:62.5%;top:18%}
.zone-marker--storage{left:82%;top:23%}
.zone-marker--tech{left:76%;top:44%}

/* Band colours alternate down the page: alerts (blue) > control (white) > "when things go wrong" (light grey) > kit (white) */
.vc{background:#fff}
.rs{background:#f3f7fb}
.rs-case{background:#e8eef6}
.vk{background:#fff}

/* Staff: every person has a code or a remote, and the log shows who opened and closed */
.sb-staff{margin-top:0;padding:80px 0;background:#fff}
@media(max-width:1040px){.sb-staff{padding:52px 0}}
.sb-staff__inner{width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:56px;align-items:center;direction:rtl}
.sb-staff__copy h2{margin:0;color:#0b223f;font-size:clamp(25px,2.35vw,35px);line-height:1.35;font-weight:850;letter-spacing:-.02em}
.sb-staff__copy>p{margin:14px 0 22px;color:#45536b;font-size:15px;line-height:1.85;font-weight:700}
.sb-staff__points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sb-staff__points li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:#f3f7fb}
.sb-staff__points li>span{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--brand)}
.sb-staff__points svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sb-staff__points div{display:grid;gap:1px}
.sb-staff__points b{color:#0b223f;font-size:15px;font-weight:820}
.sb-staff__points small{color:#5f7183;font-size:13px;font-weight:650;text-align:right}
.sb-log{justify-self:center;width:min(100%,440px);padding:22px;border-radius:24px;background:#fff;box-shadow:0 24px 50px rgba(16,38,74,.16);direction:rtl}
.sb-log__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.sb-log__head b{color:#0b223f;font-size:18px;font-weight:850}
.sb-log__head span{color:#5f7183;font-size:12.5px;font-weight:700}
.sb-log__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sb-log__row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:#f3f7fb}
.sb-log__row time{flex:0 0 auto;min-width:44px;direction:ltr;unicode-bidi:isolate;color:#0b223f;font-size:14px;font-weight:850}
.sb-log__txt{display:grid;gap:1px;flex:1;min-width:0}
.sb-log__txt b{color:#0b223f;font-size:14px;font-weight:800}
.sb-log__txt small{color:#5f7183;font-size:12.5px;font-weight:650}
/* green = armed, grey = disarmed, as on the system's own status */
.sb-log__row i{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:#9fb0c7;box-shadow:0 0 0 4px rgba(159,176,199,.2)}
.sb-log__row--on i{background:#20a35a;box-shadow:0 0 0 4px rgba(32,163,90,.16)}
@keyframes sb-rise{from{opacity:0;transform:translateY(12px)}}
@media(prefers-reduced-motion:no-preference){.sb-staff.is-revealed .sb-log__row{animation:sb-rise .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.15s + var(--k) * .08s)}}
@media(max-width:1180px){.sb-staff__inner{grid-template-columns:1fr;gap:36px}.sb-staff__copy{max-width:720px}.sb-staff__copy h2 br{display:none}}

/* Threat: the emergency button under the counter */
.sb-threat{margin-top:0;padding:72px 0;background:#f3f7fb}
@media(max-width:1040px){.sb-threat{padding:48px 0}}
.sb-threat__inner{width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:56px;align-items:center;direction:rtl}
.sb-threat__copy h2{margin:0;color:#0b223f;font-size:clamp(25px,2.35vw,35px);line-height:1.35;font-weight:850;letter-spacing:-.02em}
.sb-threat__copy p{margin:14px 0 22px;color:#45536b;font-size:15px;line-height:1.85;font-weight:700}
.sb-threat__steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sb-threat__steps li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:#fff;color:#0b223f;font-size:14.5px;font-weight:800;box-shadow:0 4px 14px rgba(16,38,74,.06)}
.sb-threat__steps span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#eaf3ff;color:var(--brand)}
.sb-threat__steps li:first-child span{background:#fde9e5;color:#d9482f}
.sb-threat__steps svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sb-threat__media{position:relative;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 24px 50px rgba(16,38,74,.2)}
.sb-threat__media>img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.sb-threat__device{position:absolute;right:20px;bottom:20px;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 10px 24px rgba(0,0,0,.25);direction:rtl}
.sb-threat__device img{width:auto;height:56px;object-fit:contain}
.sb-threat__device span{display:grid;gap:1px}
.sb-threat__device b{color:#0b223f;font-size:14.5px;font-weight:850}
.sb-threat__device small{color:#5f7183;font-size:12.5px;font-weight:650}
@media(max-width:1180px){.sb-threat__inner{grid-template-columns:1fr;gap:32px}.sb-threat__copy{max-width:720px}}
@media(max-width:560px){.sb-threat__device{right:12px;bottom:12px;padding:8px 12px 8px 10px}.sb-threat__device img{height:44px}}