/* The interactive house: the tabs over it, the Wi-Fi floor and the intercom house. The cameras tab keeps its own stylesheet (offers-home.css). */
.hx-r{position:absolute;opacity:0;pointer-events:none}
.hx{scroll-margin-top:calc(var(--header-h) + 4px)}
/* The glow behind every panel was a box wider and taller than the panel (offers-home.css), so the panel could be scrolled
   sideways — by focus, by an animation. Here it is the same glow painted inside the panel's own box, and the panel cannot scroll. */
.hx .oh-hero{overflow:hidden;overflow:clip}
.hx .oh-hero::after{inset:70% 0 0 0;height:auto;background:radial-gradient(closest-side,rgba(84,186,167,.2),transparent) 50% 0/150% 250% no-repeat}
/* The systems' buttons sit inside the top of the navy panel: the lit one is the panel's own, the others are quiet outlines. */
.hx-tabs{position:relative;z-index:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin:12px 12px 0}
.hx-tabs label{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:0 4px;border-radius:12px;font-size:var(--fs-small);font-weight:700;color:#C9D4E5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);cursor:pointer;white-space:nowrap}
.hx-tabs .ico{width:18px;height:18px}
@media (max-width:340px){.hx-tabs label{font-size:var(--fs-small);gap:3px}.hx-tabs .ico{width:16px;height:16px}}
.hx-cctv .hx-tabs label[for=hx-cctv],.hx-wifi .hx-tabs label[for=hx-wifi],.hx-intercom .hx-tabs label[for=hx-intercom]{background:var(--teal);color:#1F2A4B;box-shadow:none}
#hx-cctv:focus-visible~.hx-p label[for=hx-cctv],#hx-wifi:focus-visible~.hx-p label[for=hx-wifi],#hx-intercom:focus-visible~.hx-p label[for=hx-intercom]{outline:3px solid #fff;outline-offset:2px}
.hx-p{display:none}
.hx.solo .hx-p,#hx-cctv:checked~.hx-cctv,#hx-wifi:checked~.hx-wifi{display:block}
#hx-intercom:checked~.hx-intercom{display:block}
.oh-hero h2{color:#fff;font-size:var(--fs-h2);line-height:1.4;margin-top:6px}
.oh-hero h2 em{font-style:normal;color:var(--teal)}
.hw-top{padding-top:8px}
.hw-in{grid-template-areas:none;gap:10px}
.hw-in>*{grid-area:auto}
.hw h1,.hw h2{font-size:var(--fs-h1)}
.hw-scene{margin-inline:-4px}
.hw-plan{display:block;width:100%;height:auto}
.hw-room{stroke-width:1.2;stroke-linejoin:round}
.hw-c{fill:rgba(84,186,167,.25);stroke:rgba(84,186,167,.8)}
.hw-c.off{fill:url(#hw-blind);stroke:rgba(255,107,107,.55)}
.hw-n{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.22)}
.hw-wall{fill:none;stroke:rgba(255,255,255,.62);stroke-width:2}
.hw-steps{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.2}
.hw-lbl{font:600 var(--fs-small) Alexandria,Montserrat,sans-serif;fill:#fff;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:rgba(31,42,75,.7);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.hw-lbl.dim{fill:rgba(255,255,255,.55);font-size:var(--fs-small)}
.hw-ring{fill:rgba(84,186,167,.28);stroke:rgba(159,224,207,.9);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
.hw-ring.ping{animation:hw-ping .9s ease-out 1}
@keyframes hw-ping{0%{opacity:.9;transform:scale(.08)}70%{opacity:.5}100%{opacity:0;transform:scale(1)}}
.hw-ap{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:opacity .25s ease,transform .25s ease}
.hw-ap.on{opacity:1;transform:none;filter:drop-shadow(0 0 5px rgba(84,186,167,.9))}
.hw-ap .badge{fill:var(--teal);stroke:#fff;stroke-width:1.4}
.hw-ap .glyph{fill:none;stroke:#1F2A4B;stroke-width:1.8;stroke-linecap:round}
.hw-ap .dotg{fill:#1F2A4B}
.hw-count{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font-size:var(--fs-num);font-weight:700;color:#FFB3B3}
.hw-count::before{content:"";width:9px;height:9px;border-radius:50%;background:#FF6B6B}
.hw-count.ok{color:#9FE0CF}
.hw-count.ok::before{background:var(--teal)}
.hw-ctl{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px}
.hw-ctl button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:14px;font-weight:700;font-size:var(--fs-btn);color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2)}
.hw-ctl .ico{width:22px;height:22px}
.hw-add{background:var(--teal)!important;color:#1F2A4B!important;box-shadow:0 10px 22px -12px rgba(84,186,167,.9)!important}
.hw-ctl button:disabled{opacity:.45;cursor:default}
.hw-add:disabled{background:rgba(84,186,167,.22)!important;color:#9FE0CF!important;box-shadow:none!important;opacity:1}
.hw-add:disabled .ico{display:none}
.hw-ctl button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hw-note{margin:0;text-align:center;font-size:var(--fs-small);color:rgba(201,212,229,.8)}
.hw-deal{display:grid;gap:8px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.hw-price{display:flex;align-items:end;justify-content:space-between;gap:10px}
.hw-what{font-size:var(--fs-small);color:#C9D4E5;line-height:1.5}
.hw-what b{display:block;color:var(--teal);font-weight:600}
.hw-price .oh-amount b{font-size:var(--fs-price-card)}
.hw-price .oh-amount small{font-size:var(--fs-small);color:#C9D4E5}
.hw-ask{font-size:var(--fs-h3);font-weight:700;color:#fff}
.hw-fine{margin:0;font-size:var(--fs-small);line-height:1.6;color:rgba(201,212,229,.72)}
.hi-scene{position:relative}
.hi-ground{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.5;stroke-linecap:round}
.hi-roof{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.62);stroke-width:2;stroke-linejoin:round}
.hi-place{fill:rgba(84,186,167,.25);stroke:rgba(84,186,167,.8);stroke-width:1.2;stroke-linejoin:round}
.hi-place.off{fill:url(#hi-blind);stroke:rgba(255,107,107,.55)}
.hi-phone{stroke-width:2}
.hi-door{fill:#9FE0CF}
.hi-bell{fill:#1F2A4B;stroke:#fff;stroke-width:1.6}
.hi-press{fill:var(--teal)}
.hi-eye{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round}
.hi-wave{fill:none;stroke:rgba(159,224,207,.95);stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
.hi.rung .hi-wave{animation:hi-wave 1s ease-out 1}
@keyframes hi-wave{0%{opacity:1;transform:scale(.04)}75%{opacity:.5}100%{opacity:0;transform:scale(1)}}
.hi-screen{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:opacity .25s ease,transform .25s ease}
.hi-screen.on{opacity:1;transform:none;filter:drop-shadow(0 0 5px rgba(84,186,167,.9))}
.hi.rung .hi-screen.on{animation:hi-lit 1s ease-out 1}
@keyframes hi-lit{0%,35%{opacity:.25}60%{opacity:1;transform:scale(1.18)}100%{transform:none}}
.hi-screen .glass{fill:var(--teal);stroke:#fff;stroke-width:1.4}
.hi-screen .who{fill:#1F2A4B}
.hi-screen.app .who{fill:#9FE0CF}
.hi-ring{position:absolute;left:88.33%;top:76.7%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:transparent;cursor:pointer}
.hi-ring:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (min-width:900px){.hx-tabs{max-width:420px;margin:20px 38px 0}.hw-in{grid-template-columns:1.15fr .85fr;column-gap:28px;align-items:center}.hw-in .hw-scene{grid-row:1/span 6;grid-column:1}.hw-in>*:not(.hw-scene){grid-column:2}}
@media (prefers-reduced-motion:reduce){.hw-ring.ping,.hi.rung .hi-wave,.hi.rung .hi-screen.on{animation:none}.hw-ap,.hi-screen{transition:none}}

/* 1.29.0: Wi-Fi and intercom in the same two cards as the cameras — the picture (navy), and beside it the panel (white) */
.oh-dark .hw-in{grid-template-areas:none;grid-template-columns:minmax(0,1fr);padding-bottom:16px}
.oh-split .oh-dark .hw-in>*{grid-column:auto;grid-row:auto}
.hw-pack{align-content:center}
.hw-pack .hw-ctl button{color:var(--navy);background:var(--tone-plain);box-shadow:none}
.hw-pack .hw-add:disabled{background:var(--teal-soft)!important;color:var(--teal-800)!important}
.hw-pack .hw-ctl button:focus-visible{outline-color:var(--navy)}
.hw-pack .hw-note{color:var(--muted)}
.hw-pack .hw-deal{background:var(--teal-soft);box-shadow:none}
.hw-pack .hw-what{color:var(--muted)}
.hw-pack .hw-what b{color:var(--teal-800)}
.hw-pack .hw-price .oh-amount b{font-size:var(--fs-price-hero)}
.hw-pack .hw-price .oh-amount small{color:var(--muted)}
.hw-pack .hw-ask{color:var(--navy)}
.hw-pack .hw-fine{color:var(--muted)}