.vid{margin-top:35px;padding-top:30px}
.vid[hidden],.vid [hidden]{display:none!important}
.vid-heading h2{font-size:clamp(27px,3.5vw,42px);line-height:1.2;margin:12px 0}
.vid-heading>p:last-child{color:#b7c9db;line-height:1.8;max-width:750px}
.vid-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);border:1px solid #294159;border-radius:20px;overflow:hidden;background:#101e30;margin-top:25px}
.vid-picture{align-self:start;background:#142b40}
.vid-picture>svg{display:block;width:100%;height:auto}
.vid-panel{padding:24px}
.vid-phone{max-width:290px;margin:auto;border:5px solid #31485d;border-radius:30px;background:#081321;padding:13px 18px 18px;box-shadow:0 15px 35px #0003;text-align:center}
.vid-phone-top{display:flex;justify-content:center;margin-bottom:14px}
.vid-phone-top span{width:48px;height:5px;background:#31485d;border-radius:5px}
.vid-phone-name{font-size:9px;letter-spacing:2px;color:#8fa9bf}
.vid-preview{display:none;overflow:hidden;border-radius:12px;background:#1d3549;margin-top:14px}
.vid-preview svg{display:block;width:100%;height:145px;object-fit:cover}
.vid-preview span{display:block;padding:6px;color:#9fbbcd;font-size:9px}
.vid.is-calling .vid-preview,.vid.is-connected .vid-preview{display:block}
.vid-phone h3{font-size:20px;line-height:1.4;margin:19px 0 10px;color:#edf4ff}
#vid-hint{font-size:12px;color:#b4c7d9;line-height:1.7}
.vid-controls{display:grid;gap:10px;margin-top:20px}
.vid-controls button{border:0;border-radius:10px;background:#2574ff;color:#fff;padding:13px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
#vid-answer{background:#167d66}
#vid-open{background:#65ccec;color:#082033}
.vid-controls button:disabled{opacity:.5;cursor:wait}
.vid-controls button:focus-visible{outline:3px solid white;outline-offset:4px}
.vid-phone-note{font-size:10px;color:#88a3bb;margin:15px 0 0}
#vid-gate{transform-box:view-box;transform-origin:390px 330px}
.vid.is-calling #vid-ring{opacity:1}
.vid.is-calling #vid-doorbell{fill:#65e9ff}
.vid.is-connected #vid-doorbell{fill:#70efb8}
@media(max-width:850px){.vid-layout{grid-template-columns:1fr}.vid-panel{padding:22px}.vid-phone{width:100%}}