/* Shared building blocks of the solution pages (hero, property map, events phone, zone states, incident journey,
   remote control, "when things don't go to plan", recommended kit). Each page sets its own picture-specific values:
   --pm-ratio / --zs-ratio (picture aspect ratios) and the left/top of every marker and overlay. */
*{box-sizing:border-box}
body{background:#fff;color:#0a2346}
html,body{margin:0;padding:0}
img{display:block;max-width:100%}
main{display:block}
/* Standard shell: every band shares the site width (1240px, 1120px up to 1180px) and the 36px -> 18px gutters,
   so the content edges line up with the header and with the other pages. Later rules win over the per-band widths above. */
:root{--vs-shell:1240px;--vs-gutter:36px}
@media(max-width:1180px){
:root{--vs-shell:1120px}
}
@media(max-width:680px){
:root{--vs-gutter:18px}
}

/* Hero — same standard as the About pages: picture masked into an ambient background on the left, copy on the right */
.vh{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:stretch;min-height:min(43.8303vw,631.16px);background:linear-gradient(90deg,#e4eefb 0%,#eef4fc 55%,#f7faff 100%);color:#0b2038}
.vh__img{position:absolute;z-index:-1;top:0;bottom:0;left:0;width:min(62%,1000px);height:100%;object-fit:cover;object-position:left center;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 50%,transparent 94%);mask-image:linear-gradient(90deg,#000 0%,#000 50%,transparent 94%)}
.vh::after{content:"";position:absolute;z-index:-2;inset:0 0 0 auto;width:55%;pointer-events:none;background:radial-gradient(rgba(32,107,238,.15) 1.1px,transparent 1.6px) 0 0/22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%);mask-image:linear-gradient(90deg,transparent 0%,#000 45%)}
.vh__inner{position:relative;z-index:1;width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;display:grid;grid-template-rows:auto 1fr;padding:30px 0 48px;direction:rtl}
.vh__breadcrumb{display:flex;gap:8px;align-items:center;color:#5f7183;font-size:13px;font-weight:600}
.vh__breadcrumb a{color:inherit;text-decoration:none}.vh__breadcrumb a:hover{color:var(--brand,#206bee)}
.vh__copy{align-self:center;max-width:500px;text-align:right}
.vh__badge{display:inline-flex;margin:0 0 11px;color:var(--brand,#206bee);font-size:14px;font-weight:750}
.vh h1{margin:0;color:#0b2038;font-size:min(2.9vw,42px);font-weight:850;line-height:1.3;letter-spacing:-.018em}
.vh__lead{margin:min(1.4vw,20px) 0 0;max-width:34em;color:#45536b;font-size:min(1.32vw,19px);line-height:1.6;font-weight:700}
/* The first band after the hero always starts the same distance below it, whatever that band is */
main > .vh + section{margin-top:120px}
@media(max-width:1040px){main > .vh + section{margin-top:64px}}
@media(max-width:860px){
.vh{min-height:0;flex-direction:column}
.vh::after{display:none}
.vh__inner{padding:20px 0 8px;display:block}
.vh__copy{margin-top:18px}
.vh__copy{margin-inline:auto;text-align:center;max-width:none}
.vh__badge{margin-bottom:10px}
.vh h1{font-size:30px}
.vh h1 br{display:none}
.vh__lead{margin-inline:auto;font-size:16.5px}
.vh__img{position:static;order:2;width:100%;height:240px;margin-top:18px;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%);mask-image:linear-gradient(180deg,transparent 0%,#000 24%)}
}
@media(max-width:680px){
.vh h1{font-size:26px;line-height:1.35}
.vh__lead{font-size:15px}
}
/* S02 — property map: copy + 3D property on top, the five care areas as a fixed strip below (the height never depends on the filter) */
.property-map{position:relative;isolation:isolate;margin-top:120px;padding:72px 0;background:linear-gradient(180deg,#f5f9fd 0%,#fff 100%);overflow:hidden}
/* very quiet dot pattern that fades out towards the edges, plus a soft glow behind the picture */
.property-map::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(32,107,238,.24) 1.4px,transparent 1.6px) 0 0/26px 26px;-webkit-mask-image:radial-gradient(ellipse 62% 70% at 30% 42%,#000 0%,transparent 78%);mask-image:radial-gradient(ellipse 62% 70% at 30% 42%,#000 0%,transparent 78%)}
.property-map::after{content:"";position:absolute;z-index:-1;left:6%;top:6%;width:56%;height:62%;background:radial-gradient(closest-side,rgba(32,107,238,.1),transparent);pointer-events:none}
@media(max-width:1040px){
.property-map{margin-top:64px;padding:48px 0}
}
.property-map__inner{width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:40px 56px;align-items:center;direction:rtl}
.property-map__content{min-width:0}
.property-map__heading h2{margin:0;color:#0b223f;font-size:clamp(25px,2.35vw,35px);line-height:1.35;font-weight:850;letter-spacing:-.02em}
.property-map__heading p{margin:14px 0 22px;color:#45536b;font-size:15px;line-height:1.85;font-weight:700}
.property-map__filters{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;border-radius:12px;background:#e9eff7}
.pm-filter{border:0;background:transparent;color:#3d4f69;border-radius:9px;padding:10px 6px;font:inherit;font-size:13px;font-weight:750;cursor:pointer;white-space:nowrap;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.pm-filter:hover{background:#fff;color:#075dca}
.pm-filter.is-active{background:var(--brand);color:#fff;box-shadow:0 4px 10px rgba(32,107,238,.25)}
.pm-filter:focus-visible{outline:3px solid #8fb8ff;outline-offset:2px}
.property-map__legend{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pm-legend-item{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px;min-height:76px;padding:12px;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(16,38,74,.07);direction:rtl;transition:background-color .2s ease,box-shadow .2s ease,opacity .25s ease}
.pm-legend-item:hover{background:#eaf5ff;box-shadow:0 10px 24px rgba(8,58,119,.12)}
.pm-legend-item.is-dim{opacity:.38}
.pm-legend-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#eaf3ff;color:var(--brand)}
.pm-legend-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pm-legend-copy{text-align:right;min-width:0}
.pm-legend-copy strong{display:block;color:#0b223f;font-size:14.5px;line-height:1.5;font-weight:800}
.pm-legend-copy small{display:block;color:#5f7183;font-size:12px;line-height:1.6;font-weight:600;margin-top:1px}
.property-map__visual{position:relative;direction:ltr;min-width:0;width:100%;aspect-ratio:var(--pm-ratio,3/2)}
.property-map__image{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(16,38,74,.16));user-select:none;-webkit-user-drag:none}
.property-map__markers{position:absolute;inset:0;pointer-events:none}
.pm-marker{position:absolute;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--brand);box-shadow:0 0 0 4px rgba(255,255,255,.7),0 8px 18px rgba(16,38,74,.3);transform:translate(-50%,-50%) scale(1);opacity:1;transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease}
.pm-marker svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pm-marker--environmental{color:#0b8eff}
.pm-marker.is-hidden{opacity:0;transform:translate(-50%,-50%) scale(.6)}
.pm-marker.is-focus{transform:translate(-50%,-50%) scale(1.18);box-shadow:0 0 0 5px var(--brand),0 10px 22px rgba(32,107,238,.4)}
/* Pick mode: the legend items are buttons that select a part; the selected part's system is shown in .pm-detail */
.pm-pick .pm-legend-item{width:100%;border:0;font:inherit;cursor:pointer;text-align:right}
.pm-pick .pm-legend-item.is-active{background:#eaf3ff;box-shadow:0 0 0 2px var(--brand),0 10px 24px rgba(8,58,119,.12)}
.pm-pick .pm-legend-item.is-active .pm-legend-icon{background:var(--brand);color:#fff}
.pm-pick .pm-legend-item:focus-visible{outline:3px solid #8fb8ff;outline-offset:2px}
.pm-pick .pm-marker{pointer-events:auto;cursor:pointer}
.pm-pick .pm-marker:not(.is-active){opacity:.82}
.pm-pick .pm-marker.is-active{background:var(--brand);color:#fff;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 6px rgba(32,107,238,.25),0 10px 22px rgba(32,107,238,.4)}
/* fixed height = the tallest part's text, so switching parts never moves the heading above it */
.pm-detail{min-height:292px;padding:20px 22px;border-radius:16px;background:#fff;box-shadow:0 10px 26px rgba(16,38,74,.09)}
@media(max-width:1180px){.pm-detail{min-height:342px}}
.pm-detail h3{margin:0 0 12px;color:#0b223f;font-size:18px;font-weight:850;line-height:1.5}
.pm-detail dl{margin:0;display:grid;gap:10px}
.pm-detail dl>div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;padding-top:10px;border-top:1px solid #e6edf5}
.pm-detail dt{color:var(--brand);font-size:13px;font-weight:800;line-height:1.85}
.pm-detail dd{margin:0;color:#33475f;font-size:14px;font-weight:650;line-height:1.85}
/* phones: the five parts become one compact row of tabs above the detail */
@media(max-width:860px){
.pm-pick .property-map__legend{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.pm-pick .pm-legend-item{grid-template-columns:1fr;justify-items:center;gap:6px;min-height:0;padding:10px 4px}
.pm-pick .pm-legend-copy{text-align:center}
.pm-pick .pm-legend-copy small{display:none}
.pm-pick .pm-legend-copy strong{font-size:11.5px;line-height:1.45}
.pm-pick .pm-legend-icon{width:34px;height:34px}
.pm-pick .pm-legend-icon svg{width:19px;height:19px}
}
/* positions are percentages of the picture box (same aspect ratio as the picture) */
/* load animation: the picture settles in, then the markers pop one by one */
.pm-js:not(.is-in) .property-map__image{opacity:0;transform:scale(.94)}
.pm-js:not(.is-in) .pm-marker{opacity:0}
.property-map__image{transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
@keyframes pm-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}}
@keyframes pm-rise{from{opacity:0;transform:translateY(14px)}}
.pm-js.is-in .pm-marker{animation:pm-pop .5s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(.5s + var(--i) * .09s)}
.pm-js.is-in .property-map__heading, .pm-js.is-in .property-map__filters{animation:pm-rise .6s ease backwards}
.pm-js.is-in .property-map__filters{animation-delay:.1s}
.pm-js:not(.is-in) .pm-legend-item{opacity:0}
.pm-js.is-in .pm-legend-item{animation:pm-rise .5s ease backwards;animation-delay:calc(.7s + var(--k) * .07s)}
@media(prefers-reduced-motion:reduce){
.pm-js:not(.is-in) .property-map__image{opacity:1;transform:none}
.pm-js:not(.is-in) .pm-marker, .pm-js:not(.is-in) .pm-legend-item{opacity:1}
.pm-js:not(.is-in) .pm-legend-item.is-dim{opacity:.38}
.property-map__image{transition:none}
.pm-js.is-in .pm-marker, .pm-js.is-in .property-map__heading, .pm-js.is-in .property-map__filters, .pm-js.is-in .pm-legend-item{animation:none}
}
@media(max-width:1180px){
.property-map__inner{grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:32px 36px}
.property-map__legend{gap:10px}
.pm-legend-item{grid-template-columns:1fr;justify-items:start;gap:8px}
}
@media(max-width:860px){
.property-map__inner{display:flex;flex-direction:column;gap:18px}
.property-map__content{display:contents}
.property-map__heading{order:1;width:100%}
.property-map__heading p{margin-bottom:0}
.property-map__visual{order:2;width:100%}
.property-map__filters{order:3;width:100%;display:flex;overflow-x:auto;scrollbar-width:none}
.property-map__filters::-webkit-scrollbar{display:none}
.pm-filter{flex:1 0 auto;min-width:74px;padding:10px 14px}
.property-map__legend{order:4;width:100%;grid-template-columns:1fr;gap:8px}
.pm-detail{order:5;width:100%;min-height:340px}
.pm-legend-item{grid-template-columns:44px 1fr;justify-items:stretch;min-height:64px;gap:10px}
.pm-marker{width:34px;height:34px}
.pm-marker svg{width:18px;height:18px}
}
/* S03 — events that matter while nobody is there: two plain sentences on the right, a phone receiving the alerts on the left */
.ev{margin-top:0;padding:72px 0;background:#e2ecf8}
@media(max-width:1040px){
.ev{padding:48px 0}
}
.ev__inner{width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:56px;align-items:center;direction:rtl}
.ev__copy h2{margin:0;color:#0b223f;font-size:clamp(25px,2.35vw,35px);line-height:1.35;font-weight:850;letter-spacing:-.02em}
.ev__lead{margin:14px 0 24px;color:#45536b;font-size:15px;line-height:1.85;font-weight:700}
.ev__rule{display:flex;gap:14px;align-items:flex-start;margin-top:14px;padding:16px 18px;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(16,38,74,.07)}
.ev__rule p{margin:0;color:#45536b;font-size:15px;line-height:1.9;font-weight:600}
.ev__rule b{color:#0b223f;font-weight:800}
.ev__dot{flex:0 0 auto;width:12px;height:12px;margin-top:9px;border-radius:50%;background:#d9482f;box-shadow:0 0 0 5px rgba(217,72,47,.14)}
.ev__rule--always .ev__dot{background:#0b7fe0;box-shadow:0 0 0 5px rgba(11,127,224,.14)}
.ev-phone{position:relative;justify-self:center;width:min(100%,330px);padding:12px;border-radius:44px;background:#0e1b2b;box-shadow:0 30px 60px rgba(16,38,74,.28),inset 0 0 0 2px #2a3a52}
.ev-phone::before{content:"";position:absolute;top:18px;left:50%;width:84px;height:20px;border-radius:12px;background:#0e1b2b;transform:translateX(-50%);z-index:2}
.ev-phone__screen{position:relative;height:500px;border-radius:34px;overflow:hidden;background:linear-gradient(180deg,#eef4fb,#e2ebf6);padding:48px 14px 14px;direction:rtl}
.ev-phone__bar{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;padding:0 4px}
.ev-phone__bar b{color:#0b223f;font-size:17px;font-weight:850}
.ev-phone__bar span{color:#5f7183;font-size:12px;font-weight:700}
.ev-phone__feed{display:flex;flex-direction:column;gap:10px}
.ev-note{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:0 4px 14px rgba(16,38,74,.09);max-height:84px;overflow:hidden;transition:max-height .6s cubic-bezier(.22,1,.36,1),opacity .6s ease,padding .6s ease,margin .6s ease}
.ev-note.is-new{max-height:0;opacity:0;padding-block:0}
.ev-note.is-old{opacity:.55}
.ev-note.is-gone{max-height:0;opacity:0;padding-block:0;margin-top:-10px}
.ev-note__icon{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--bg);color:var(--c)}
.ev-note__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* two colours, the same as the dots in the text: red = only with the system armed, blue = always */
.ev-note--security{--c:#d9482f;--bg:#fde9e5}
.ev-note--env, .ev-note--tech{--c:#0b7fe0;--bg:#e1f1ff}
.ev-note{border-inline-start:4px solid var(--c)}
.ev__rule{transition:box-shadow .4s ease,background-color .4s ease}
.ev__rule.is-hit{box-shadow:0 0 0 2px var(--c),0 10px 24px rgba(16,38,74,.12)}
.ev__rule--armed{--c:#d9482f}
.ev__rule--always{--c:#0b7fe0}
.ev-note__txt{display:grid;gap:1px;min-width:0}
.ev-note__txt b{color:#0b223f;font-size:14px;font-weight:800;line-height:1.5}
.ev-note__txt small{color:#5f7183;font-size:12px;font-weight:600;line-height:1.5}
@media(max-width:1180px){
.ev__inner{grid-template-columns:1fr;gap:40px}
.ev__copy{max-width:720px}
.ev-phone{margin-top:30px}
}
@media(prefers-reduced-motion:reduce){
.ev-note{transition:none}
}
/* S04 — zone states (dark band): copy, tabs and status on the right, the property with its zones on the left */
.zone-state{margin-top:0;padding:72px 0;background:radial-gradient(circle at 50% 0%,rgba(16,79,159,.22),transparent 30%),linear-gradient(180deg,#07172f 0%,#061120 100%);color:#fff;overflow:hidden}
@media(max-width:1040px){
.zone-state{padding:48px 0}
}
.zone-state__inner{width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;align-items:center;direction:rtl}
.zone-state__panel{min-width:0}
.zone-state__panel h2{margin:0;color:#fff;font-size:clamp(25px,2.35vw,35px);line-height:1.35;font-weight:850;letter-spacing:-.02em}
.zone-state__lead{margin:14px 0 24px;color:rgba(225,235,248,.86);font-size:15px;line-height:1.85;font-weight:700}
.zone-state__controls{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.08);margin-bottom:16px}
.zone-tab{min-height:42px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:rgba(241,247,255,.88);font-family:inherit;font-size:14px;font-weight:760;cursor:pointer;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.zone-tab:hover{background:rgba(255,255,255,.1)}
.zone-tab.is-active{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(32,107,238,.35)}
.zone-tab:focus-visible{outline:3px solid #8fb8ff;outline-offset:2px}
.zone-status{padding:18px 20px 8px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.zone-status h3{margin:0 0 6px;color:#fff;font-size:16px;line-height:1.6;font-weight:840;text-align:right}
.zone-status__list{list-style:none;padding:0;margin:0}
.zone-status__list li{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;border-top:1px solid rgba(255,255,255,.1)}
.zone-status__list span{font-size:15px;line-height:1.5;font-weight:760;color:rgba(241,247,255,.95)}
.zone-status__list em{position:relative;flex:0 0 auto;display:inline-block;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.2);transition:background-color .25s ease}
.zone-status__list li.is-active em{background:#47c774}
.zone-status__list li.is-active em::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.zone-status__list li.is-inactive em{background:#ff6b6b}
.zone-status__list li.is-inactive em::before, .zone-status__list li.is-inactive em::after{content:"";position:absolute;top:8px;left:4px;width:10px;height:2px;background:#fff;border-radius:2px}
.zone-status__list li.is-inactive em::before{transform:rotate(45deg)}
.zone-status__list li.is-inactive em::after{transform:rotate(-45deg)}
.zone-state__stage{min-width:0;display:grid;gap:16px}
/* the scene has exactly the picture's aspect ratio, so every overlay percentage lands on the same spot at any width */
.zone-scene{position:relative;direction:ltr;aspect-ratio:var(--zs-ratio,16/9);border-radius:20px;overflow:hidden;background:#081425;box-shadow:0 22px 44px rgba(0,0,0,.35)}
.zone-scene__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s ease,transform 1.1s cubic-bezier(.22,1,.36,1)}
.zone-overlay{position:absolute;transition:opacity .3s ease,background-color .3s ease;border:2px solid transparent;border-radius:14px}
.zone-overlay.is-inactive{opacity:0}
.zone-overlay.is-active{opacity:1}
.zone-marker{position:absolute;display:flex;flex-direction:column;gap:1px;min-width:112px;padding:8px 14px 8px;border-radius:12px;background:rgba(8,18,30,.78);color:#fff;backdrop-filter:blur(6px);box-shadow:0 8px 20px rgba(0,0,0,.35);transform:translate(-50%,-100%);transition:opacity .3s ease,transform .3s ease;direction:rtl;text-align:right}
.zone-marker::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:rgba(8,18,30,.78);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.zone-marker span{font-size:14px;line-height:1.5;font-weight:820}
.zone-marker b{font-size:13px;line-height:1.5;font-weight:750;color:#58e38a}
.zone-marker.is-inactive{opacity:.45}
.zone-marker.is-inactive b{color:#9fb0c7}
.zone-state__features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.feature-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);transition:background-color .2s ease}
.feature-card:hover{background:rgba(255,255,255,.12)}
.feature-card__icon{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:#8fc0ff}
.feature-card__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feature-card__copy{display:grid;gap:2px;text-align:right}
.feature-card__copy strong{color:#fff;font-size:16px;line-height:1.5;font-weight:830}
.feature-card__copy small{color:rgba(225,235,248,.78);font-size:13px;line-height:1.7;font-weight:600}
/* load animation: the picture settles in, then the zone markers pop one by one */
.zone-state:not(.is-revealed) .zone-scene__media{opacity:0;transform:scale(1.05)}
@keyframes zs-pop{from{opacity:0;transform:translate(-50%,-90%) scale(.85)}}
@media(prefers-reduced-motion:no-preference){
.zone-state.is-revealed .zone-marker{animation:zs-pop .5s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(.6s + var(--i) * .12s)}
.zone-state.is-revealed .zone-overlay{animation:zs-fade .8s ease backwards;animation-delay:.5s}
}
@keyframes zs-fade{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
.zone-state:not(.is-revealed) .zone-scene__media{opacity:1;transform:none}
.zone-scene__media{transition:none}
}
@media(max-width:1180px){
.zone-state__inner{grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:32px}
.zone-marker{min-width:96px;padding:6px 10px}
.zone-marker span{font-size:13px}
.zone-marker b{font-size:12px}
.zone-state__features{grid-template-columns:1fr}
}
@media(max-width:900px){
.zone-state__inner{display:flex;flex-direction:column;gap:18px}
.zone-state__panel, .zone-state__stage{display:contents}
.zone-state__panel h2{order:1;width:100%}
.zone-state__lead{order:2;width:100%;margin-bottom:6px}
.zone-state__controls{order:3;width:100%;margin-bottom:0}
.zone-scene{order:4;width:100%}
.zone-status{order:5;width:100%}
.zone-state__features{order:6;width:100%;grid-template-columns:1fr}
.zone-marker{min-width:84px;padding:5px 8px;border-radius:9px}
.zone-marker span{font-size:11.5px}
.zone-marker b{font-size:11px}
}
@media(max-width:700px){
.zone-marker b{display:none}
.zone-marker{min-width:0;padding:4px 8px}
.zone-marker.is-inactive span{color:#9fb0c7}
}
/* S05 — the story of one incident: event -> news reaches you -> someone acts (three steps on a timeline) */
.jr{margin-top:0;padding:72px 0;background:#fff}
@media(max-width:1040px){
.jr{padding:48px 0}
}
.jr__inner{width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;direction:rtl}
.jr__head{max-width:760px;margin-inline:auto;text-align:center}
.jr__head h2{margin:0;color:#0b223f;font-size:clamp(25px,2.35vw,35px);line-height:1.35;font-weight:850;letter-spacing:-.02em}
.jr__head p{margin:14px 0 0;color:#45536b;font-size:15px;line-height:1.85;font-weight:700}
.jr__steps{position:relative;list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
/* the line behind the three dots; the travelling signal runs along it */
.jr__steps::before{content:"";position:absolute;top:27px;right:calc(100% / 6);left:calc(100% / 6);height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,#b7cbe6 0 8px,transparent 8px 16px)}
.jr-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 14px}
.jr-step__dot{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;color:#8aa3c7;box-shadow:0 0 0 3px #d5e2f3,0 8px 18px rgba(16,38,74,.1);transition:background-color .4s ease,color .4s ease,box-shadow .4s ease,transform .4s cubic-bezier(.34,1.56,.64,1)}
.jr-step__dot svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jr-step.is-on .jr-step__dot,.jr-step__dot{background:var(--brand);color:#fff;box-shadow:0 0 0 5px rgba(32,107,238,.22),0 10px 22px rgba(32,107,238,.35);transform:scale(1.08)}
.jr-step[data-step="1"] .jr-step__dot{background:#e8772e;box-shadow:0 0 0 5px rgba(232,119,46,.22),0 10px 22px rgba(232,119,46,.35)}
.jr-step h3{margin:18px 0 12px;color:#0b223f;font-size:19px;font-weight:850;line-height:1.5}
.jr-step p{margin:14px 0 0;max-width:340px;color:#45536b;font-size:14.5px;line-height:1.85;font-weight:600}
.jr-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.jr-chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;border-radius:999px;background:#f3f7fb;color:#0e377b;font-size:13.5px;font-weight:800;line-height:1.5;transition:background-color .2s ease}
.jr-chips li:hover{background:#eaf5ff}
.jr-chips span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--brand)}
.jr-chips svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:860px){
.jr__steps{grid-template-columns:1fr;gap:34px;margin-top:40px}
.jr__steps::before{top:28px;bottom:28px;right:27px;left:auto;width:3px;height:auto;background:repeating-linear-gradient(180deg,#b7cbe6 0 8px,transparent 8px 16px)}
.jr-step{display:grid;grid-template-columns:56px 1fr;column-gap:16px;align-items:start;text-align:right;padding:0}
.jr-step__dot{grid-row:1/4}
.jr-step h3{margin:6px 0 10px}
.jr-step p{max-width:none;margin-top:10px}
.jr-chips{justify-content:flex-start;justify-self:start}
}
@media(prefers-reduced-motion:reduce){
.jr-step__dot{transition:none}
}

/* S07 — when things don't go to plan: three "if this -> then that" cards (power cut, SIM failure, owner unreachable) */
.rs{margin-top:0;padding:72px 0;background:#fff}
@media(max-width:1040px){.rs{padding:48px 0}}
.rs__inner{width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;direction:rtl}
.rs__head{max-width:760px;margin:0 auto 36px;text-align:center}
.rs__head h2{margin:0;color:#0b223f;font-size:clamp(25px,2.35vw,35px);line-height:1.35;font-weight:850;letter-spacing:-.02em}
.rs__head p{margin:12px 0 0;color:#45536b;font-size:15px;line-height:1.85;font-weight:700}
.rs__cases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rs-case{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#f3f7fb;transition:box-shadow .2s ease,transform .2s ease}
.rs-case:hover{box-shadow:0 14px 30px rgba(8,58,119,.12);transform:translateY(-2px)}
.rs-case__if{display:flex;align-items:center;gap:12px;padding:22px 22px 18px}
.rs-case__if h3{margin:0;color:#0b223f;font-size:17px;font-weight:850;line-height:1.5}
.rs-case__ic{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
.rs-case__ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rs-case__ic--off{background:#fde9e5;color:#d9482f}
.rs-case__ic--on{background:#e3f5ea;color:#1c9a55}
/* the arrow sits on the seam between the two boxes, in the same column as the red and green icons (RTL: right side) */
.rs-case__arrow{position:relative;z-index:2;height:0}
.rs-case__arrow svg{position:absolute;top:0;right:44px;width:32px;height:32px;padding:6px;border-radius:50%;background:#fff;color:var(--brand);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;box-shadow:0 0 0 1px #e3eaf3,0 4px 12px rgba(16,38,74,.12);transform:translate(50%,-50%)}
.rs-case__then{flex:1;display:flex;align-items:flex-start;gap:12px;padding:24px 22px 24px;background:#fff;border:1px solid #e3eaf3;border-top:0;border-radius:0 0 18px 18px}
.rs-case__then p{margin:0;color:#45536b;font-size:14.5px;line-height:1.9;font-weight:650}
@keyframes rs-rise{from{opacity:0;transform:translateY(16px)}}
@media(prefers-reduced-motion:no-preference){.rs.is-revealed .rs-case{animation:rs-rise .55s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.1s + var(--k) * .1s)}}
@media(max-width:900px){.rs__cases{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}

/* S06 — control and comfort from the Alerto app (PGM outputs: remote commands and schedules) */
.vc{margin-top:0;padding:72px 0;background:#e2ecf8}
@media(max-width:1040px){.vc{padding:48px 0}}
.vc__inner{width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:56px;align-items:center;direction:rtl}
.vc__copy h2{margin:0;color:#0b223f;font-size:clamp(25px,2.35vw,35px);line-height:1.35;font-weight:850;letter-spacing:-.02em}
.vc__copy p{margin:14px 0 0;color:#45536b;font-size:15px;line-height:1.85;font-weight:700}
.vc-app{justify-self:center;width:min(100%,420px);padding:22px;border-radius:24px;background:#fff;box-shadow:0 24px 50px rgba(16,38,74,.16);direction:rtl}
.vc-app__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.vc-app__head b{color:#0b223f;font-size:18px;font-weight:850}
.vc-app__head span{color:#5f7183;font-size:12.5px;font-weight:700}
.vc-app__state{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:#eaf6ef}
.vc-app__dot{width:14px;height:14px;border-radius:50%;background:#20a35a;box-shadow:0 0 0 5px rgba(32,163,90,.18)}
.vc-app__state b{display:block;color:#0b223f;font-size:15px;font-weight:850}
.vc-app__state small{display:block;color:#3d6b52;font-size:12.5px;font-weight:700}
.vc-app__label{margin:18px 4px 10px;color:#5f7183;font-size:13px;font-weight:800}
.vc-app__outs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vc-out{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#f3f7fb}
.vc-out__ic{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--brand)}
.vc-out__ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vc-out__txt{display:grid;gap:1px;flex:1;min-width:0}
.vc-out__txt b{color:#0b223f;font-size:14.5px;font-weight:800}
.vc-out__txt small{color:#5f7183;font-size:12.5px;font-weight:600}
.vc-switch{position:relative;flex:0 0 auto;width:46px;height:26px;padding:0;border:0;border-radius:999px;background:#c9d5e4;cursor:pointer;transition:background-color .2s ease}
.vc-switch i{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(16,38,74,.25);transition:right .2s ease}
.vc-switch.is-on{background:var(--brand)}
.vc-switch.is-on i{right:23px}
.vc-switch:focus-visible{outline:3px solid #8fb8ff;outline-offset:2px}
@media(max-width:1180px){.vc__inner{grid-template-columns:1fr;gap:36px}.vc__copy{max-width:720px}}

/* S08 — recommended kit (same carousel as "related products" on product pages) */
.vk{margin-top:0;padding:72px 0;background:#f3f7fb}
@media(max-width:1040px){.vk{padding:48px 0}}
.vk__inner{width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;direction:rtl}
.vk__head{max-width:760px;margin:0 auto 28px;text-align:center}
.vk__head h2{margin:0;color:#0b223f;font-size:clamp(25px,2.35vw,35px);line-height:1.35;font-weight:850;letter-spacing:-.02em}
.vk__head p{margin:12px 0 0;color:#45536b;font-size:15px;line-height:1.85;font-weight:700}
.vk .rel-tile{display:block;text-decoration:none;color:inherit;min-width:0}
.vk .rel-tile__in{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;padding:20px 12px 18px;text-align:center;border-radius:14px;background:#e3e9f0;transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease}
.vk .rel-tile:hover .rel-tile__in{background:#eaf5ff;box-shadow:0 10px 26px rgba(8,58,119,.13);transform:translateY(-2px)}
.vk .rel-tile__img{width:100%;height:120px;display:flex;align-items:center;justify-content:center}
.vk .rel-tile__img img{display:block;max-width:86%;max-height:120px;width:auto;height:auto;object-fit:contain;transition:transform .25s ease}
.vk .rel-tile:hover .rel-tile__img img{transform:scale(1.1)}
.vk .rel-tile strong{margin-top:6px;color:#123f70;font-size:15px;font-weight:850}
.vk .rel-tile small{color:#5b7088;font-size:12.5px;font-weight:650;line-height:1.5}
/* gap above the closing banner */
main > .gs-final-cta{margin-top:clamp(40px,5.2vw,88px)}