.demo-page{min-height:100vh;background:radial-gradient(circle at 50% -10%,#1c3b55 0,transparent 42%),#07111f;color:#eef5fb}.demo-app{width:min(100%,470px);min-height:100vh;margin:auto;padding:20px clamp(18px,5vw,28px) 36px;display:flex;flex-direction:column}.demo-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.demo-header img{width:140px;height:auto}.demo-chip{padding:7px 10px;border:1px solid rgba(218,174,84,.45);border-radius:999px;color:#e7c77c;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.visitor-card,.call-card,.connected-card,.chat-card{padding:26px 22px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:linear-gradient(160deg,rgba(18,40,59,.96),rgba(8,20,34,.98));box-shadow:0 24px 70px rgba(0,0,0,.35);text-align:center}.access-visual{position:relative;width:92px;height:92px;margin:0 auto 20px;display:grid;place-items:center;border:1px solid rgba(218,174,84,.5);border-radius:26px;background:#0a1929;color:#dcae54;font-weight:900;font-size:1.55rem}.access-visual i{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border:5px solid #0b1828;border-radius:50%;background:#45d483}.demo-kicker{margin:0 0 8px;color:#dcae54;font-size:.68rem;font-weight:900;letter-spacing:.18em}.demo-page h1,.demo-page h2{margin:0;font-size:clamp(1.7rem,8vw,2.35rem);letter-spacing:-.04em}.access-name{color:#9fb0c2}.availability{display:inline-flex;align-items:center;gap:7px;margin:10px 0 24px;padding:8px 12px;border-radius:999px;background:rgba(69,212,131,.1);color:#8ce3b3;font-size:.78rem}.availability i{width:7px;height:7px;border-radius:50%;background:#45d483;box-shadow:0 0 10px #45d483}.ring-button{width:100%;padding:22px;border:0;border-radius:20px;background:linear-gradient(135deg,#e7c77c,#b9842f);color:#07111f;box-shadow:0 14px 32px rgba(196,145,53,.22);cursor:pointer}.ring-button span{display:block;font-size:2.2rem}.ring-button strong,.ring-button small{display:block}.ring-button strong{font-size:1.12rem}.ring-button small{margin-top:3px;opacity:.72}.privacy-note,.security-note{margin:18px 0 0;color:#98aabd;font-size:.78rem;line-height:1.55}.call-animation{position:relative;width:110px;height:110px;margin:10px auto 28px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#dcae54,#8f6828);color:#07111f;font-weight:900;font-size:1.5rem}.call-animation i{position:absolute;inset:-8px;border:1px solid rgba(220,174,84,.7);border-radius:50%;animation:ring 1.8s infinite}.call-animation i:nth-child(2){animation-delay:.4s}.call-animation i:nth-child(3){animation-delay:.8s}.call-card>p:not(.demo-kicker),.connected-card>p:not(.demo-kicker){color:#a9bac9;line-height:1.6}.call-progress{height:5px;margin:24px 0;border-radius:99px;background:#162a3d;overflow:hidden}.call-progress span{display:block;width:45%;height:100%;border-radius:inherit;background:#dcae54;animation:progress 2s ease-in-out infinite}.demo-primary,.demo-secondary{padding:13px 18px;border-radius:13px;font:inherit;font-weight:800;cursor:pointer}.demo-primary{border:0;background:#dcae54;color:#07111f}.demo-secondary{border:1px solid rgba(255,255,255,.18);background:transparent;color:#dce7ef}.resident-avatar{position:relative;width:90px;height:90px;margin:4px auto 20px;display:grid;place-items:center;border-radius:50%;background:#1a405a;color:#fff;font-size:1.4rem;font-weight:900}.resident-avatar span{position:absolute;right:3px;bottom:3px;width:20px;height:20px;border:5px solid #0c1d2d;border-radius:50%;background:#45d483}.quick-response{margin:20px 0;padding:15px;border-left:3px solid #dcae54;border-radius:0 12px 12px 0;background:#0b1928;color:#e6edf3;text-align:left}.demo-actions{display:flex;gap:10px;justify-content:center}.security-note{padding:13px;border-radius:12px;background:rgba(220,174,84,.08);color:#c4d0da}.chat-card{padding:0;overflow:hidden;text-align:left}.chat-card header{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid rgba(255,255,255,.1)}.chat-card header button{border:0;background:transparent;color:#dcae54;font-size:1.4rem}.chat-card header strong,.chat-card header span{display:block}.chat-card header span{color:#8fa3b5;font-size:.76rem}.messages{height:245px;padding:18px;overflow:auto;background:#081421}.message{width:fit-content;max-width:82%;margin:0 0 12px;padding:11px 13px;border-radius:15px;font-size:.9rem;line-height:1.4}.incoming{background:#173047;border-bottom-left-radius:4px}.outgoing{margin-left:auto;background:#b88938;color:#07111f;border-bottom-right-radius:4px}.quick-messages{display:flex;gap:7px;padding:12px;overflow:auto}.quick-messages button{flex:0 0 auto;padding:8px 10px;border:1px solid rgba(220,174,84,.35);border-radius:999px;background:transparent;color:#d9c07f;font-size:.72rem}.chat-card form{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.08)}.chat-card input{min-width:0;flex:1;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#0a1827;color:white}.chat-card form button{border:0;border-radius:12px;background:#dcae54;color:#07111f;font-weight:800}.simulation-note{margin-top:18px;padding:13px;border-radius:13px;background:rgba(255,255,255,.05);color:#93a7b8;font-size:.74rem;line-height:1.5}.simulation-note strong{color:#d5e0e7}.demo-exit{margin:22px auto 0;color:#dcae54;font-size:.84rem}
.demo-header{flex-wrap:wrap}.sound-toggle{flex:1 0 100%;padding:8px 12px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:transparent;color:#cfdbe6;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}.sound-toggle[aria-pressed="true"]{color:#8fa3b5;border-style:dashed}.sound-toggle:focus-visible{outline:2px solid #dcae54;outline-offset:2px}
@keyframes ring{from{transform:scale(.8);opacity:1}to{transform:scale(1.45);opacity:0}}@keyframes progress{0%,100%{transform:translateX(-100%)}50%{transform:translateX(220%)}}@media(prefers-reduced-motion:reduce){.call-animation i,.call-progress span{animation:none}}
.sim-controls{margin:18px 0 0;padding:14px;border:1px dashed rgba(220,174,84,.45);border-radius:14px;background:rgba(255,255,255,.03);text-align:left}.sim-controls .demo-kicker{margin-bottom:10px}.sim-buttons{display:flex;flex-wrap:wrap;gap:8px}.sim-button{flex:1 1 auto;padding:10px 12px;border:1px solid rgba(255,255,255,.2);border-radius:11px;background:transparent;color:#dce7ef;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer}.sim-button[aria-pressed="true"]{border-color:#dcae54;background:rgba(220,174,84,.18);color:#f0d999}.sim-button:focus-visible,.demo-primary:focus-visible,.demo-secondary:focus-visible,.ring-button:focus-visible{outline:3px solid #dcae54;outline-offset:3px}.sim-status{margin:12px 0 0;color:#c4d0da;font-size:.8rem;line-height:1.5}.sim-warning{margin:8px 0 0;color:#e7c77c;font-size:.74rem;font-weight:800}
.sim-video-panel{margin:12px 0 0}.sim-video-panel[hidden]{display:none}.sim-video:focus-visible{outline:3px solid #dcae54;outline-offset:3px}.sim-video{display:block;width:100%;max-width:100%;aspect-ratio:16/9;border-radius:12px;background:#000;object-fit:cover}.sim-caption{margin:8px 0 0;color:#c4d0da;font-size:.74rem;font-style:italic}
/* Two perspectives: side by side on desktop, tabs on small screens */
.demo-app{width:min(100%,960px)}.demo-intro{margin:0 0 16px;color:#a9bac9;font-size:.9rem;line-height:1.55}.demo-tabs{display:none}.tab-hint[hidden],.tab-dot[hidden],.door-banner[hidden],.r-actions[hidden],.confirm-overlay[hidden],.r-idle[hidden],.r-call[hidden]{display:none}
.demo-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start;width:100%}.demo-page .phone-label{margin:0 0 10px;color:#dcae54;font-size:.74rem;font-weight:900;letter-spacing:.14em;text-align:center;text-transform:uppercase}
.phone-frame{position:relative;min-height:640px;padding:14px;overflow:hidden;border:1px solid rgba(220,174,84,.38);border-radius:36px;background:#050d17;box-shadow:0 24px 70px rgba(0,0,0,.4)}.phone-frame .visitor-card,.phone-frame .call-card,.phone-frame .connected-card,.phone-frame .chat-card{border:0;border-radius:24px;box-shadow:none}.demo-page .phone h3{margin:0;font-size:1.5rem;letter-spacing:-.03em}.demo-page .phone h3.demo-kicker{font-size:.68rem;letter-spacing:.18em}
.door-banner{margin:0 0 12px;padding:12px;border:1px solid rgba(69,212,131,.55);border-radius:14px;background:rgba(69,212,131,.14);color:#9be8bf;font-weight:800;text-align:center}
.ring-button:disabled{opacity:.4;filter:grayscale(.7);box-shadow:none;cursor:not-allowed}
.connected-card>p.call-mode{margin:12px 0 0;color:#f0d999;font-weight:800}.demo-primary:disabled{opacity:.5}
.r-body{padding:6px 6px 10px}.r-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.r-head strong,.r-head span{display:block}.r-head span{color:#8fa3b5;font-size:.78rem}.r-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#1a405a;font-size:.9rem;font-weight:900}
.r-idle{margin:0 0 12px;padding:24px 16px;border:1px dashed rgba(255,255,255,.18);border-radius:16px;color:#a9bac9;text-align:center;line-height:1.55}.r-idle p{margin:0}.r-idle:focus-visible{outline:3px solid #dcae54;outline-offset:3px}
.r-call{padding:16px;border:1px solid rgba(220,174,84,.4);border-radius:20px;background:linear-gradient(160deg,rgba(18,40,59,.96),rgba(8,20,34,.98));text-align:left}.r-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.r-actions>button{flex:1 1 auto;min-height:44px}.r-actions>.r-door{flex:1 1 100%}.demo-page .r-actions .sim-button{min-height:44px}
.r-log{margin-top:16px}.r-log ul{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}.r-log li{padding:9px 11px;border-radius:10px;background:#0b1928;color:#dce7ef;font-size:.8rem;line-height:1.4}.r-log .log-empty{color:#8fa3b5}
.confirm-overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:18px;background:rgba(3,8,14,.8)}.confirm-box{width:100%;padding:22px 18px;border:1px solid rgba(220,174,84,.55);border-radius:20px;background:#10263a;text-align:center}.confirm-box p{margin:10px 0 0;color:#c4d0da;font-size:.88rem;line-height:1.5}.demo-primary:focus-visible,.demo-secondary:focus-visible,.demo-tab:focus-visible{outline:3px solid #dcae54;outline-offset:3px}
.demo-tab{position:relative;min-height:44px;padding:10px 14px;border:0;border-radius:999px;background:transparent;color:#cfdbe6;font:inherit;font-weight:800;cursor:pointer}.demo-tab[aria-selected="true"]{background:#dcae54;color:#07111f}.tab-dot{position:absolute;top:9px;right:16px;width:10px;height:10px;border:2px solid #07111f;border-radius:50%;background:#45d483}.tab-hint{margin:10px 0 0;padding:11px 13px;border-left:3px solid #dcae54;border-radius:0 12px 12px 0;background:rgba(220,174,84,.1);color:#e7d7a8;font-size:.82rem;line-height:1.5}
@media(min-width:721px){.sound-toggle{flex:0 0 auto}.demo-header{justify-content:flex-start}.demo-chip{margin-left:auto}}
@media(max-width:720px){.demo-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:#0b1928}.demo-stage{display:block}.demo-stage[data-active="visitor"] .phone-resident,.demo-stage[data-active="resident"] .phone-visitor{display:none}.demo-page .phone-label{display:none}.phone-frame{min-height:0;margin-top:14px;padding:10px;border-radius:30px}}
/* Scenario demos: directory of units/sectors, chosen target, links between scenarios */
.scenario-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.scenario-nav a{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#cfdbe6;font-size:.84rem;font-weight:800}.scenario-nav a[aria-current="page"]{border-color:#dcae54;background:rgba(220,174,84,.18);color:#f0d999}.scenario-nav a:focus-visible{outline:3px solid #dcae54;outline-offset:3px}
.picker[hidden],.ring-wrap[hidden],.chosen-label[hidden],.change-target[hidden],.picker-group[hidden],.picker-option[hidden],.picker-empty[hidden]{display:none}
.picker{margin:0 0 4px;text-align:left}.demo-page .picker-title{margin:0;font-size:1.2rem;letter-spacing:-.02em;text-align:center}.picker-hint{margin:8px 0 14px;color:#a9bac9;font-size:.8rem;line-height:1.5;text-align:center}
.picker-search{width:100%;min-height:46px;padding:11px 14px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:#0a1827;color:#fff;font-size:1rem}.picker-search::placeholder{color:#7f93a6}.picker-search:focus-visible{outline:3px solid #dcae54;outline-offset:2px}
.picker-count{min-height:1.2em;margin:6px 0 0;color:#8fa3b5;font-size:.76rem}
.picker-list{margin-top:6px}@media(min-width:721px){.picker-list{max-height:290px;padding-right:4px;overflow-y:auto}}.picker-group{margin:0 0 10px}.demo-page .picker-group h4{margin:0 0 6px;color:#dcae54;font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.picker-options{display:flex;flex-wrap:wrap;gap:8px}
.picker-option{flex:1 1 calc(50% - 8px);min-height:44px;padding:9px 12px;border:1px solid rgba(255,255,255,.2);border-radius:11px;background:rgba(255,255,255,.03);color:#e8f0f6;font:inherit;font-weight:800;cursor:pointer}.picker-option:hover{border-color:rgba(220,174,84,.7);background:rgba(220,174,84,.12)}.picker-option:focus-visible{outline:3px solid #dcae54;outline-offset:2px}
.picker-empty{margin:10px 0 0;padding:12px;border-radius:12px;background:rgba(242,120,120,.12);color:#f5b3b3;font-size:.84rem;line-height:1.45}
.chosen-label{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:rgba(220,174,84,.12);color:#f0d999;font-weight:800}.change-target{width:100%;min-height:44px;margin-top:10px}