/* Interactive KNX demo (#knx-demo). Loaded only on pages that render the section. */
.kd{padding:5.5rem 0 4.5rem;background:#f1f5f9;color:#334155;isolation:isolate}
.kd .section-title{color:#0f172a}
.kd .lede{color:#475569;max-width:38rem}
.kd-head{display:grid;gap:1.25rem;align-items:end}
@media (min-width:1024px){.kd-head{grid-template-columns:1.1fr .9fr;gap:3rem}}
.kd-kicker{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.9rem;font:600 .72rem/1 'Geist Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#0e7490}
.kd button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kd button:focus-visible,.kd input:focus-visible,.kd [tabindex]:focus-visible{outline:2px solid #67e8f9;outline-offset:2px}

/* Building tabs */
.kd-tabs{margin-top:2.5rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;padding:.4rem;border-radius:1rem;background:rgba(15,23,42,.05);border:1px solid rgba(15,23,42,.08)}
.kd-tabs button{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-radius:.7rem;text-align:left;color:#475569;font-weight:650;transition:background-color .25s,color .25s,transform .15s}
.kd-tabs button:active{transform:scale(.97)}
.kd-tabs button i{font-size:1.05rem;width:1.25rem;text-align:center}
.kd-tabs button small{display:block;margin-top:.2rem;font-weight:400;font-size:.75rem;color:#64748b}
.kd-tabs button:hover{color:#0f172a}
.kd-tabs button[aria-selected="true"]{background:#2563eb;color:#fff;box-shadow:0 10px 26px -14px rgba(37,99,235,.9)}
.kd-tabs button[aria-selected="true"] small{color:#dbeafe}
@media (max-width:767px){.kd-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.kd-tabs button small{display:none}}

/* Device: rail, stage, control sheet */
.kd-device{margin-top:1rem;display:grid;gap:.75rem;padding:.75rem;border-radius:1.4rem;background:#ffffff;border:1px solid rgba(15,23,42,.09);box-shadow:0 30px 60px -30px rgba(15,23,42,.25)}
@media (min-width:1024px){.kd-device{grid-template-columns:6.4rem minmax(0,1fr) minmax(0,23rem);align-items:stretch}.kd-rail{grid-column:1;grid-row:1}.kd-stage{grid-column:2;grid-row:1}.kd-sheet{grid-column:3;grid-row:1}}

.kd-rail{display:flex;gap:.3rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-bottom:.1rem}
.kd-rail::-webkit-scrollbar{display:none}
.kd-rail button{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;min-width:5.2rem;padding:.6rem .4rem;border-radius:.8rem;color:#475569;font-size:.7rem;font-weight:600;line-height:1.15;text-align:center;transition:background-color .2s,color .2s,transform .15s}
.kd-rail button i{font-size:1.05rem}
.kd-rail button:hover{color:#0f172a;background:rgba(15,23,42,.05)}
.kd-rail button:active{transform:scale(.95)}
.kd-rail button[aria-selected="true"]{color:#0b1220;background:#e2e8f0}
@media (min-width:1024px){.kd-rail{flex-direction:column;overflow-x:hidden;overflow-y:auto;max-height:40rem}.kd-rail button{min-width:0;width:100%}}

.kd-stage{position:relative;overflow:hidden;border-radius:1rem;background:#cbd5e1;aspect-ratio:16/10}
@media (min-width:1024px){.kd-stage{aspect-ratio:auto;min-height:34rem}}
.kd-photo,.kd-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kd-photo{opacity:0;transition:opacity .7s cubic-bezier(.22,1,.36,1)}
.kd-photo.is-on{opacity:1}
.kd-photo img{transition:filter .6s cubic-bezier(.22,1,.36,1)}
.kd-fx{position:absolute;inset:0;pointer-events:none;transition:opacity .6s cubic-bezier(.22,1,.36,1),background .6s}
.kd-fx-light{mix-blend-mode:soft-light}
.kd-fx-tint{mix-blend-mode:screen}
.kd-fx-blind{bottom:auto;height:20%;background:repeating-linear-gradient(180deg,rgba(226,232,240,.92) 0 var(--slat,6px),rgba(148,163,184,.55) var(--slat,6px) calc(var(--slat,6px) + 3px));box-shadow:0 6px 18px rgba(0,0,0,.25);transition:height .12s linear}
.kd-fx-alarm{opacity:0;box-shadow:inset 0 0 0 4px #ef4444,inset 0 0 120px rgba(239,68,68,.55)}
.kd-stage.is-alarm .kd-fx-alarm{opacity:1;animation:kdPulse 1.2s ease-in-out infinite}
@keyframes kdPulse{50%{opacity:.35}}
.kd-status{position:absolute;left:.75rem;right:.75rem;top:.75rem;z-index:2;display:flex;flex-wrap:wrap;gap:.4rem}
.kd-status>span{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .65rem;border-radius:.6rem;font-size:.75rem;color:#1e293b;background:rgba(255,255,255,.9);border:1px solid rgba(15,23,42,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.kd-status b{color:#0f172a}
.kd-toast{position:absolute;left:.75rem;right:.75rem;bottom:.75rem;z-index:3;padding:.75rem .9rem;border-radius:.8rem;font-size:.85rem;line-height:1.45;color:#0f172a;background:rgba(255,255,255,.9);border:1px solid rgba(15,23,42,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:kdIn .35s cubic-bezier(.22,1,.36,1)}
.kd-toast.is-bad{background:rgba(127,29,29,.88);border-color:rgba(254,202,202,.35)}

.kd-sheet{border-radius:1rem;background:#ffffff;border:1px solid rgba(15,23,42,.07);padding:1rem;display:flex;flex-direction:column;gap:.75rem}
@media (min-width:1024px){.kd-sheet{max-height:40rem;overflow-y:auto;overscroll-behavior:contain}}
.kd-sheet-h h3{font-size:1.1rem;font-weight:700;color:#0f172a}
.kd-sheet-h p{margin-top:.15rem;font-size:.78rem;color:#64748b}
.kd-static{display:grid;gap:.5rem;font-size:.85rem;color:#475569}
.kd-static b{color:#1e293b}
.kd-alert{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .8rem;border-radius:.7rem;font-size:.82rem;line-height:1.45;color:#991b1b;background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.45)}
.kd-alert i{margin-top:.2rem;color:#f87171}

.kd-row{display:flex;flex-direction:column;gap:.45rem}
.kd-label{display:flex;justify-content:space-between;gap:.5rem;font-size:.72rem;font-weight:600;letter-spacing:.04em;color:#475569}
.kd-label b{color:#0f172a;font-variant-numeric:tabular-nums}
.kd-scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.kd-scenes button{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.6rem .3rem;border-radius:.7rem;font-size:.72rem;font-weight:600;color:#334155;background:rgba(15,23,42,.05);border:1px solid rgba(15,23,42,.08);transition:background-color .2s,transform .15s}
.kd-scenes button:active,.kd-act:active,.kd-seg button:active,.kd-sw:active{transform:scale(.96)}
.kd-scenes button[aria-pressed="true"]{background:#2563eb;border-color:#2563eb;color:#fff}
.kd input[type=range]{width:100%;accent-color:#38bdf8;height:1.5rem}
.kd input.kd-cct{accent-color:#fbbf24}

.kd-r-toggle,.kd-r-motor{flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem .7rem;border-radius:.75rem;background:rgba(15,23,42,.04);border:1px solid rgba(15,23,42,.06)}
.kd-tt{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1}
.kd-tt b{font-size:.84rem;font-weight:600;color:#1e293b}
.kd-tt small{font-size:.72rem;color:#64748b;line-height:1.35}
.kd-sw{flex:0 0 auto;min-width:4.6rem;padding:.4rem .7rem;border-radius:999px;font-size:.74rem;font-weight:700;color:#475569;background:rgba(15,23,42,.07);border:1px solid rgba(15,23,42,.1);transition:background-color .2s,color .2s,transform .15s}
.kd-sw[aria-pressed="true"]{color:#052e16;background:#4ade80;border-color:#4ade80}
.kd-seg{display:flex;gap:.3rem;padding:.25rem;border-radius:.7rem;background:rgba(15,23,42,.05)}
.kd-seg button{flex:1;padding:.45rem .3rem;border-radius:.5rem;font-size:.75rem;font-weight:600;color:#475569;transition:background-color .2s,color .2s,transform .15s}
.kd-seg button[aria-pressed="true"]{background:#e2e8f0;color:#0b1220}
.kd-stepper{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.3rem;border-radius:.7rem;background:rgba(15,23,42,.05)}
.kd-stepper b{font-size:1.4rem;font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums}
.kd-step{width:2.6rem;height:2.6rem;border-radius:.6rem;font-size:1.2rem;color:#0f172a;background:rgba(15,23,42,.08)}
.kd-swatch{display:flex;flex-wrap:wrap;gap:.45rem}
.kd-swatch button{width:2rem;height:2rem;border-radius:999px;border:2px solid rgba(15,23,42,.2)}
.kd-swatch button[aria-pressed="true"]{outline:2px solid #2563eb;outline-offset:2px}
.kd-r-tiles,.kd-r-cams,.kd-r-meters,.kd-r-people{flex-direction:row;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.kd-tile,.kd-meter,.kd-person{padding:.55rem .65rem;border-radius:.65rem;background:rgba(15,23,42,.04);border:1px solid rgba(15,23,42,.06);display:flex;flex-direction:column;gap:.15rem;min-width:0}
.kd-tile small,.kd-meter small,.kd-person small{font-size:.68rem;color:#64748b}
.kd-tile b,.kd-meter b,.kd-person b{font-size:.82rem;color:#1e293b}
.kd-tile.is-ok b{color:#15803d}.kd-tile.is-bad,.kd-meter.is-bad{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.12)}.kd-tile.is-bad b{color:#b91c1c}
.kd-meter i,.kd-pos{display:block;height:.35rem;border-radius:9px;background:rgba(15,23,42,.08);overflow:hidden;margin-top:.25rem}
.kd-meter em,.kd-pos em{display:block;height:100%;background:#38bdf8;border-radius:9px;transition:width .5s cubic-bezier(.22,1,.36,1)}
.kd-meter.is-ok em{background:#4ade80}.kd-meter.is-bad em{background:#f87171}
.kd-pos em{transition:none;background:#fbbf24}
.kd-mbtn{display:flex;gap:.3rem;flex:0 0 auto}
.kd-mbtn button{width:2.3rem;height:2.3rem;border-radius:.55rem;color:#1e293b;background:rgba(15,23,42,.08);transition:background-color .2s,transform .15s}
.kd-mbtn button:hover{background:rgba(15,23,42,.16)}.kd-mbtn button:active{transform:scale(.92)}
.kd-act{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem .8rem;border-radius:.75rem;font-size:.82rem;font-weight:650;color:#1e293b;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.35);transition:background-color .2s,transform .15s}
.kd-act:hover{background:rgba(56,189,248,.2)}
.kd-act.is-danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.45);color:#b91c1c}
.kd-act.is-danger:hover{background:rgba(239,68,68,.22)}

.kd-r-cams .kd-act{grid-column:1/-1}
.kd-cam{position:relative;aspect-ratio:16/10;padding:.5rem;border-radius:.65rem;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(160deg,#e2e8f0,#cbd5e1);border:1px solid rgba(15,23,42,.08)}
.kd-cam b{font-size:.78rem;color:#0f172a}.kd-cam small{font-size:.68rem;color:#475569}
.kd-cam.is-alert{border-color:#ef4444;box-shadow:inset 0 0 0 1px #ef4444}.kd-cam.is-alert small{color:#b91c1c}
.kd-rec{position:absolute;top:.45rem;left:.45rem;font-size:.62rem;font-weight:700;letter-spacing:.06em;color:#b91c1c;display:flex;align-items:center;gap:.3rem}
.kd-rec::before{content:"";width:.45rem;height:.45rem;border-radius:9px;background:#ef4444}
.kd-person{flex-direction:row;align-items:center;gap:.5rem;grid-column:1/-1}
.kd-person i{color:#38bdf8}.kd-person small{margin-left:auto;text-align:right}

.kd-r-note{font-size:.78rem;color:#475569;line-height:1.5;padding:.6rem .7rem;border-radius:.65rem;background:rgba(15,23,42,.04)}

/* Bus monitor */
.kd-bus{margin-top:1rem;padding:1rem 1.1rem;border-radius:1.1rem;background:#ffffff;border:1px solid rgba(15,23,42,.08);font-family:'Geist Mono',monospace}
.kd-bus-h{display:flex;justify-content:space-between;gap:1rem;font-size:.75rem;color:#0e7490}
.kd-bus-h small{color:#64748b}
.kd-log{list-style:none;padding:0;margin-top:.6rem;min-height:11rem}
.kd-log li{display:grid;grid-template-columns:4.6rem 4.4rem minmax(0,1fr) auto;gap:.6rem;padding:.3rem 0;font-size:.76rem;color:#475569;border-top:1px solid rgba(15,23,42,.05);animation:kdIn .45s cubic-bezier(.22,1,.36,1)}
.kd-log li:first-child{color:#1e293b}
.kd-ga{color:#0e7490}
.kd-gn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kd-log b{font-weight:600;color:#15803d;text-align:right}
@media (max-width:520px){.kd-log li{grid-template-columns:4rem minmax(0,1fr) auto}.kd-ts{display:none}}
@keyframes kdIn{from{opacity:0;transform:translateY(-4px)}}
.kd>.container>.kd-note{margin-top:1rem;font-size:.8rem;color:#64748b}
.kd-rm *,.kd-rm *::before{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.kd *{animation:none!important;transition:none!important}}
@media (max-width:639px){.kd-stage{aspect-ratio:4/3}.kd-status>span:nth-child(n+3){display:none}.kd-toast{font-size:.78rem;padding:.6rem .7rem}.kd-device{padding:.5rem}}

/* Audit fixes 2026-11-11: touch targets, equal heights, voice row, camera states, phone stage stays in view */
.kd-sw{min-height:2.75rem}
.kd-swatch button{width:2.5rem;height:2.5rem}
.kd input[type=range]{height:2.5rem}
.kd-mbtn button{width:2.75rem;height:2.75rem}
.kd-tabs button{min-height:4.25rem}
.kd-tabs button small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kd-tabs button span{min-width:0}
.kd-voice{display:grid;gap:.4rem}
.kd-cam.is-off{background:#f1f5f9}
.kd-rec.is-live{color:#475569}.kd-rec.is-live::before{background:#64748b}
@media (max-width:1023px){.kd-sheet{max-height:min(56vh,32rem);overflow-y:auto;overscroll-behavior:contain}}
.kd-seg button{min-height:2.5rem}

/* ---- Demo upgrade 2026-11-12: every system shows on the photo ---- */
/* Venetian slats: the gap closes as the slat angle rises */
.kd-fx-blind{background:repeating-linear-gradient(180deg,rgba(241,245,249,.97) 0 var(--slat,6px),rgba(148,163,184,var(--gap,.5)) var(--slat,6px) calc(var(--slat,6px) + 3px));box-shadow:0 6px 18px rgba(15,23,42,.18)}
/* Curtains draw in from both sides */
.kd-fx-curtain{right:auto;width:0;background:repeating-linear-gradient(90deg,#efe7da 0 14px,#e4d9c7 14px 22px,#f4ede2 22px 34px);box-shadow:0 0 24px rgba(15,23,42,.18);transition:width .12s linear}
.kd-fx-curtain-r{left:auto;right:0}
/* Air-con cool wash from the ceiling */
.kd-fx-cool{opacity:0;background:radial-gradient(ellipse 70% 35% at 50% 0%,rgba(125,211,252,.55),transparent 70%);mix-blend-mode:screen}
/* Rain streaks and a grey sky */
.kd-fx-rain{opacity:0;background:linear-gradient(rgba(100,116,139,.18),rgba(100,116,139,.18)),repeating-linear-gradient(105deg,transparent 0 9px,rgba(255,255,255,.35) 9px 10px,transparent 10px 23px);background-size:auto,240px 240px;animation:kdRain .5s linear infinite}
@keyframes kdRain{to{background-position:0 0,-40px 240px}}
/* Smoke haze during a fire alarm */
.kd-fx-smoke{opacity:0;background:radial-gradient(ellipse 80% 45% at 50% 10%,rgba(148,163,184,.75),transparent 70%),linear-gradient(rgba(203,213,225,.35),rgba(203,213,225,.1))}
/* Live readout for the selected system */
.kd-live{position:absolute;left:.75rem;bottom:.75rem;z-index:2;max-width:calc(100% - 1.5rem);display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:.7rem;font-size:.8rem;font-weight:600;color:#0f172a;background:rgba(255,255,255,.92);border:1px solid rgba(15,23,42,.12);box-shadow:0 10px 24px -14px rgba(15,23,42,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.kd-live>i{color:#2563eb}
.kd-live span[data-live-tx]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kd-eq{display:none;align-items:flex-end;gap:2px;height:.85rem}
.kd-eq.is-on{display:inline-flex}
.kd-eq i{width:3px;background:#2563eb;border-radius:2px;animation:kdEq .9s ease-in-out infinite}
.kd-eq i:nth-child(2){animation-delay:-.3s}.kd-eq i:nth-child(3){animation-delay:-.6s}
@keyframes kdEq{0%,100%{height:30%}50%{height:100%}}
.kd-toast{bottom:3.9rem}
/* Alarm toast: white text on red */
.kd-toast.is-bad{color:#fff;background:rgba(185,28,28,.94);border-color:rgba(254,202,202,.5)}
/* Sliders: light track filled to the value */
.kd input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.kd input[type=range]::-webkit-slider-runnable-track{height:.4rem;border-radius:9px;background:linear-gradient(90deg,#38bdf8 var(--p,50%),#e2e8f0 var(--p,50%))}
.kd input.kd-cct::-webkit-slider-runnable-track{background:linear-gradient(90deg,#fbbf24,#f8fafc 50%,#93c5fd)}
.kd input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.35rem;height:1.35rem;margin-top:-.48rem;border-radius:50%;background:#fff;border:2px solid #2563eb;box-shadow:0 2px 6px rgba(15,23,42,.25)}
.kd input[type=range]::-moz-range-track{height:.4rem;border-radius:9px;background:#e2e8f0}
.kd input[type=range]::-moz-range-progress{height:.4rem;border-radius:9px;background:#38bdf8}
.kd input.kd-cct::-moz-range-track{background:linear-gradient(90deg,#fbbf24,#f8fafc 50%,#93c5fd)}
.kd input.kd-cct::-moz-range-progress{background:transparent}
.kd input[type=range]::-moz-range-thumb{width:1.2rem;height:1.2rem;border-radius:50%;background:#fff;border:2px solid #2563eb}
/* Selected rail item and segment read as selected on white */
.kd-rail button[aria-selected="true"]{color:#1d4ed8;background:#eff6ff;box-shadow:inset 0 0 0 1px #bfdbfe}
.kd-seg button[aria-pressed="true"]{background:#fff;color:#1d4ed8;box-shadow:0 1px 3px rgba(15,23,42,.15)}
.kd-sw[aria-pressed="true"]{color:#fff;background:#16a34a;border-color:#16a34a}
/* Desktop rail: all 13 systems fit beside the photo without hidden scrolling */
@media (min-width:1024px){
  .kd-rail{max-height:none;overflow:visible;gap:.15rem}
  .kd-rail button{padding:.42rem .3rem;gap:.2rem;font-size:.66rem}
  .kd-rail button i{font-size:.95rem}
  .kd-stage{min-height:0}
  .kd-sheet{max-height:none;height:0;min-height:100%}
}
@media (max-width:639px){.kd-live{font-size:.72rem;padding:.4rem .6rem}.kd-live span[data-live-tx]{white-space:normal}.kd-toast{bottom:3.6rem}}

/* ---- Real state photos and camera stills (2026-11-12) ---- */
.kd-photo.kd-sphoto{opacity:0;transition:opacity .4s ease}
.kd-fx-rain.is-photo{background:repeating-linear-gradient(105deg,transparent 0 9px,rgba(255,255,255,.22) 9px 10px,transparent 10px 23px);background-size:240px 240px;animation:kdRain2 .5s linear infinite}
@keyframes kdRain2{to{background-position:-40px 240px}}
.kd-cam{background-size:cover;background-position:center;overflow:hidden;isolation:isolate}
.kd-cam:not(.is-off)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(6,10,20,.72),transparent 55%)}
.kd-cam:not(.is-off) b{color:#fff}.kd-cam:not(.is-off) small{color:#e2e8f0}
.kd-cam:not(.is-off) .kd-rec{color:#fff;background:rgba(6,10,20,.55);padding:.15rem .4rem;border-radius:.35rem}
.kd-cam.is-alert:not(.is-off) small{color:#fecaca}