/* HOMESTAT — the Akubela HyPanel Ultra screen, rebuilt in code for the product page (13 Oct 2026).
   Layout measured off Akubela's own picture of the Ultra's home screen. The screen is drawn at 1000 x 600
   design pixels (the panel is 2000 x 1200) and scaled to the width it is given, so it stays sharp at any size. */
.hpx{--hp-scale:1;position:relative;width:100%;max-width:1040px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Roboto,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;color:#F2F2F4}
.hpx *,.hpx *::before,.hpx *::after{box-sizing:border-box}
:where(.hpx) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hpx button:focus-visible{outline:2px solid #FF8A1F;outline-offset:2px;border-radius:10px}

/* the panel: dark grey metal frame around one sheet of glass; the frame is thicker below, with the glass dipping into it */
.hp-device{position:relative;width:100%;aspect-ratio:2061/1307;background:#3E3F42;border-radius:.5%/.8%;padding:.24% .24% 2.6%;box-shadow:0 30px 60px -28px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.06) inset}
.hp-glass{position:relative;width:100%;height:100%;background:#000;border-radius:.3%/.5%;overflow:hidden}
.hp-notch{position:absolute;left:24.3%;right:24.3%;bottom:.9%;height:3.5%;background:#000;clip-path:polygon(0 0,100% 0,94.6% 100%,5.4% 100%)}
.hp-cam{position:absolute;right:2.5%;top:6.4%;width:1.9%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#2A2D33 0,#0B0C0E 55%,#000 100%);box-shadow:0 0 0 1px #17181B;z-index:4;pointer-events:none}
.hp-screen{position:absolute;inset:0}
.hp-ui{position:absolute;left:0;top:0;width:1000px;height:600px;transform:scale(var(--hp-scale));transform-origin:0 0;overflow:hidden;background:#000;user-select:none;-webkit-user-select:none;touch-action:manipulation}

/* the glow behind the cards; it follows the house mode */
.hp-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hp-bg i{position:absolute;border-radius:50%;filter:blur(46px);opacity:.9;transition:background 900ms ease,opacity 900ms ease,transform 1200ms ease}
.hp-bg .b1{left:395px;top:120px;width:330px;height:330px;background:radial-gradient(circle,#FF6A00 0,#E8401C 45%,transparent 70%)}
.hp-bg .b2{left:330px;top:260px;width:250px;height:260px;background:radial-gradient(circle,#5B3FD6 0,#3A2C9C 50%,transparent 72%)}
.hp-bg .b3{left:560px;top:300px;width:230px;height:220px;background:radial-gradient(circle,#C5362A 0,#7A2A70 50%,transparent 72%);opacity:.75}
.hp-ui[data-mode="night"] .hp-bg .b1{background:radial-gradient(circle,#3D4FD6 0,#26308F 45%,transparent 70%)}
.hp-ui[data-mode="night"] .hp-bg .b3{background:radial-gradient(circle,#6B3FD6 0,#2C2C7A 50%,transparent 72%)}
.hp-ui[data-mode="away"] .hp-bg i{opacity:.35}

/* left rail */
.hp-rail{position:absolute;left:46px;top:62px;width:84px;display:flex;flex-direction:column;gap:22px;z-index:3}
.hp-rail button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:6px 0;border-radius:14px;color:#E9E9EC;font-size:10.5px;letter-spacing:.1px;transition:background .2s}
.hp-rail button svg{width:28px;height:28px}
.hp-rail button[aria-current="page"]{background:rgba(255,255,255,.08)}
.hp-rail button[aria-current="page"] span{color:#FFB24A}
.hp-sos{position:absolute;right:62px;top:51px;z-index:3;height:39px;padding:0 15px;border-radius:20px;background:#E8401C;color:#fff;font-weight:700;font-size:17.5px;letter-spacing:.4px;box-shadow:0 6px 18px -6px rgba(232,64,28,.7)}

/* pages */
.hp-page{position:absolute;left:145px;top:111px;width:795px;height:430px;z-index:2}
.hp-page[hidden]{display:none}
.hp-h{position:absolute;left:145px;top:52px;z-index:2;font-size:21px;font-weight:500;letter-spacing:.2px}
.hp-h small{display:block;font-size:11.5px;font-weight:400;color:#A9A9B0;margin-top:3px}
.hp-dots{position:absolute;left:510px;top:566px;width:71px;height:4px;border-radius:3px;background:#3A3A3E;z-index:2}
.hp-dots i{position:absolute;left:0;top:0;height:4px;width:14px;border-radius:3px;background:#FF9B1F;transition:left .3s}

/* cards */
.hp-card{position:absolute;border-radius:16px;background:rgba(48,48,52,.66);border:1px solid rgba(255,255,255,.10);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);overflow:hidden;text-align:left;transition:background .35s,transform .15s}
.hp-card:active{transform:scale(.985)}
.hp-t{font-size:13.5px;font-weight:500;letter-spacing:.1px;display:block}
.hp-s{font-size:10px;color:#B3B3B9;display:block;margin-top:2px}
.hp-menu{position:absolute;right:14px;top:10px;font-size:16px;letter-spacing:1.5px;color:#D8D8DC}

.hp-time{left:0;top:0;width:255px;height:256px;padding:26px 0 0 28px}
.hp-time .hp-clock{font-size:59px;font-weight:300;line-height:1.02;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.hp-time .hp-date{position:absolute;left:28px;top:177px;font-size:14px;color:#ECECEF}
.hp-time .hp-temp{position:absolute;left:28px;top:203px;font-size:19px}
.hp-wx{position:absolute;right:20px;top:34px;width:118px;height:86px}

.hp-stats{left:0;top:272px;width:255px;height:121px;display:grid;grid-template-columns:repeat(3,1fr);padding:22px 0 0}
.hp-stats button{display:flex;flex-direction:column;align-items:center;gap:19px;border-left:1px solid rgba(255,255,255,.12);height:80px}
.hp-stats button:first-child{border-left:0}
.hp-stats svg{width:26px;height:26px}
.hp-stats b{font-size:19px;font-weight:400;font-variant-numeric:tabular-nums}

.hp-mode{left:270px;top:0;width:255px;height:121px;padding:17px 0 0 28px;background:linear-gradient(118deg,#FFB43A 0,#FFA126 52%,#FF8E12 100%)!important;border-color:rgba(255,224,170,.5)!important}
.hp-mode::before{content:"";position:absolute;right:-30px;top:-50px;width:230px;height:130px;border-radius:50%;background:radial-gradient(ellipse at 40% 60%,rgba(255,236,190,.55),transparent 65%);pointer-events:none}
.hp-ui[data-mode="night"] .hp-mode{background:linear-gradient(118deg,#5D6BFF 0,#4A55E6 55%,#3B44C9 100%)!important;border-color:rgba(190,196,255,.5)!important}
.hp-ui[data-mode="away"] .hp-mode{background:linear-gradient(118deg,#5E6470 0,#4B505A 55%,#3C4049 100%)!important;border-color:rgba(255,255,255,.2)!important}
.hp-mode .hp-t{font-size:13.5px;color:#FFF8EC}
.hp-mode .hp-bell{position:absolute;right:20px;top:14px;width:30px;height:20px;color:#fff}
.hp-pill{position:absolute;left:10px;right:10px;top:57px;height:54px;border-radius:27px;background:rgba(120,64,0,.32);display:grid;grid-template-columns:repeat(3,1fr);align-items:center}
.hp-ui[data-mode="night"] .hp-pill{background:rgba(20,24,90,.35)}
.hp-ui[data-mode="away"] .hp-pill{background:rgba(0,0,0,.28)}
.hp-pill button{justify-self:center;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;transition:background .25s,color .25s}
.hp-pill button svg{width:27px;height:27px}
.hp-pill button[aria-pressed="true"]{background:linear-gradient(160deg,#FFE7B8,#FFC15A);color:#E8590C;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.hp-ui[data-mode="night"] .hp-pill button[aria-pressed="true"]{background:linear-gradient(160deg,#E3E6FF,#AEB6FF);color:#3B44C9}
.hp-ui[data-mode="away"] .hp-pill button[aria-pressed="true"]{background:linear-gradient(160deg,#F2F3F5,#C9CDD3);color:#3C4049}

.hp-scenes4{left:270px;top:136px;width:255px;height:257px;padding:13px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:13px}
.hp-sc{position:relative;border-radius:11px;background:rgba(38,38,42,.85);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 6px 13px;color:#E6E6EA;font-size:10.5px;line-height:1.25;text-align:center;transition:background .3s}
.hp-sc .hp-ring{position:absolute;left:10px;top:10px;width:24px;height:16px;color:#8E8E96}
.hp-sc .hp-ico{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:28px;height:28px;color:#8E8E96}
.hp-sc[aria-pressed="true"]{background:linear-gradient(160deg,#7B73FF 0,#5A5CF0 55%,#4C55E8 100%);color:#fff}
.hp-sc[aria-pressed="true"] .hp-ring,.hp-sc[aria-pressed="true"] .hp-ico{color:#fff}

.hp-curtain{left:540px;top:0;width:255px;height:121px;padding:14px 0 0 16px}
.hp-cthumb{position:absolute;right:23px;bottom:20px;width:50px;height:42px;border-radius:3px;background:#E9E3DA;box-shadow:0 0 0 2px #C9C3BA inset,0 4px 10px -4px rgba(0,0,0,.5);overflow:hidden}
.hp-cthumb::before,.hp-cthumb::after{content:"";position:absolute;top:5px;bottom:4px;width:calc(var(--cl,0) * 50%);background:repeating-linear-gradient(90deg,#F7F0E4 0 3px,#E4D9C8 3px 6px);transition:width .5s ease}
.hp-cthumb::before{left:3px} .hp-cthumb::after{right:3px}
.hp-cthumb i{position:absolute;left:3px;right:3px;top:3px;height:2px;background:#8E8578}
.hp-cpos{position:absolute;left:16px;bottom:16px;font-size:11px;color:#C9C9CF}

.hp-scenecard{left:540px;top:136px;width:255px;height:121px;padding:14px 0 0 16px}
.hp-scenecard .hp-heart{position:absolute;right:20px;bottom:18px;width:46px;height:46px;border-radius:13px;background:linear-gradient(160deg,#FFE3A3 0,#FFB547 60%,#FF9A2E 100%);display:grid;place-items:center;color:#1E1E1E;box-shadow:0 6px 14px -6px rgba(255,150,40,.8)}
.hp-scenecard .hp-heart svg{width:24px;height:24px}
.hp-scenecard .hp-last{position:absolute;left:16px;bottom:18px;font-size:11px;color:#C9C9CF}

.hp-dimmer{left:540px;top:272px;width:255px;height:121px;padding:14px 0 0 16px;transition:background .35s}
.hp-dimmer[data-on="true"]{background:linear-gradient(185deg,rgba(84,76,62,.92) 0,rgba(var(--dim-rgb,176,158,122),.95) 100%)}
.hp-bright{position:absolute;left:10px;bottom:10px;width:132px;height:49px;border-radius:12px;background:rgba(0,0,0,.28);overflow:hidden;display:flex;align-items:center;gap:9px;padding-left:12px;font-size:11px;color:#F1F1F3;touch-action:none;cursor:ew-resize}
.hp-bright .hp-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--lv,0) * 1%);background:rgba(255,255,255,.16);transition:width .12s}
.hp-bright svg{position:relative;width:20px;height:20px;color:#FFB24A}
.hp-bright span{position:relative}
.hp-lamp{position:absolute;right:24px;top:40px;width:62px;height:72px}
.hp-lamp .glow{transition:opacity .3s}

/* other pages: a grid of plain cards */
.hp-grid{display:grid;gap:13px}
.hp-tile{position:relative;border-radius:16px;background:rgba(48,48,52,.66);border:1px solid rgba(255,255,255,.10);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);padding:14px 16px;text-align:left;min-height:84px;transition:background .3s}
.hp-tile[aria-pressed="true"]{background:linear-gradient(160deg,#7B73FF 0,#4C55E8 100%);border-color:rgba(200,200,255,.4)}
.hp-tile .hp-ico{width:26px;height:26px;color:#E9E9EC;margin-bottom:10px;display:block}
.hp-tile p{margin:6px 0 0;font-size:10px;line-height:1.35;color:#B9B9C0;max-width:none}
.hp-tile[aria-pressed="true"] p{color:#E7E8FF}
.hp-rooms{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.hp-rooms button{height:30px;padding:0 13px;border-radius:15px;background:rgba(255,255,255,.08);font-size:11px;color:#D9D9DE}
.hp-rooms button[aria-pressed="true"]{background:#F2F2F4;color:#111}
.hp-dev{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.hp-dev .hp-tile{min-height:150px}
.hp-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.hp-sw{width:42px;height:24px;border-radius:12px;background:#4A4A50;position:relative;transition:background .25s;flex:none}
.hp-sw::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .25s}
.hp-sw[aria-checked="true"]{background:#FF9B1F}
.hp-sw[aria-checked="true"]::after{transform:translateX(18px)}
.hp-slider{position:relative;height:30px;border-radius:15px;background:rgba(255,255,255,.08);overflow:hidden;touch-action:none;cursor:ew-resize;margin-top:14px}
.hp-slider .hp-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--lv,0) * 1%);background:linear-gradient(90deg,rgba(255,180,74,.55),rgba(255,180,74,.9));transition:width .12s}
.hp-slider span{position:absolute;left:12px;top:0;line-height:30px;font-size:10.5px;color:#fff}
.hp-ac{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.hp-ac b{font-size:28px;font-weight:300;font-variant-numeric:tabular-nums}
.hp-round{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:18px}
.hp-chip{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:13px;background:rgba(255,255,255,.08);font-size:10.5px;color:#E4E4E8}
.hp-chip[aria-pressed="true"]{background:#F2F2F4;color:#111}

.hp-sec{display:grid;grid-template-columns:300px 1fr;gap:13px;height:100%}
.hp-shield{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100%;padding:20px 22px}
.hp-shield svg{width:84px;height:84px;margin-bottom:12px}
.hp-shield b{font-size:20px;font-weight:500}
.hp-shield span{font-size:11px;color:#B9B9C0;margin-top:4px}
.hp-ui[data-alarm="away"] .hp-shield svg,.hp-ui[data-alarm="night"] .hp-shield svg,.hp-ui[data-alarm="home"] .hp-shield svg{color:#FF9B1F}
.hp-zones{list-style:none;margin:0;padding:0;max-width:none}
.hp-zones li{display:flex;justify-content:space-between;font-size:11.5px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);margin:0}
.hp-zones li span{color:#9FE3A8}
.hp-arm{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:18px;width:100%}
.hp-arm button{height:40px;border-radius:12px;background:rgba(255,255,255,.08);font-size:11px}
.hp-arm button[aria-pressed="true"]{background:#FF9B1F;color:#111;font-weight:600}

.hp-calls{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}

/* sheets: a panel that rises over the page */
.hp-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:8;opacity:0;pointer-events:none;transition:opacity .2s}
.hp-scrim.on{opacity:1;pointer-events:auto}
.hp-sheet{position:absolute;left:50%;top:50%;width:520px;transform:translate(-50%,-46%);opacity:0;pointer-events:none;z-index:9;border-radius:20px;background:rgba(40,40,44,.96);border:1px solid rgba(255,255,255,.12);padding:22px 24px;transition:opacity .2s,transform .2s;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.hp-sheet.on{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.hp-sheet h3{font-family:inherit;font-size:17px;font-weight:500;margin:0 0 4px;color:#fff}
.hp-sheet .hp-x{position:absolute;right:16px;top:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:15px}
.hp-btns{display:flex;gap:10px;margin-top:18px}
.hp-btns button{flex:1;height:44px;border-radius:13px;background:rgba(255,255,255,.1);font-size:12.5px}
.hp-btns button.go{background:#FF9B1F;color:#111;font-weight:600}
.hp-btns button.red{background:#E8401C;color:#fff;font-weight:600}
.hp-win{position:relative;height:150px;margin-top:16px;border-radius:12px;background:linear-gradient(180deg,#1E2F4A 0,#3F6C8E 60%,#C9B48F 100%);overflow:hidden}
.hp-win::before,.hp-win::after{content:"";position:absolute;top:0;bottom:0;width:calc((100 - var(--pos,0)) * .5%);background:repeating-linear-gradient(90deg,#F4EDE1 0 7px,#E2D6C2 7px 14px);transition:width .6s ease;box-shadow:0 0 18px rgba(0,0,0,.35)}
.hp-win::before{left:0} .hp-win::after{right:0}
.hp-cam-view{position:relative;aspect-ratio:520/220;margin-top:14px;border-radius:12px;overflow:hidden;background:#0E141C}
.hp-cam-view svg{width:100%;height:100%;display:block}
.hp-pin{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.hp-pin button{height:40px;border-radius:12px;background:rgba(255,255,255,.08);font-size:15px}
.hp-code{display:flex;gap:10px;justify-content:center;margin-top:12px}
.hp-code i{width:12px;height:12px;border-radius:50%;border:1.5px solid #CFCFD4}
.hp-code i.f{background:#fff;border-color:#fff}
.hp-toast{position:absolute;left:50%;bottom:44px;transform:translate(-50%,20px);opacity:0;z-index:10;background:rgba(250,250,252,.96);color:#111;font-size:12px;padding:10px 16px;border-radius:14px;transition:opacity .25s,transform .25s;pointer-events:none;max-width:560px;text-align:center;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.hp-toast.on{opacity:1;transform:translate(-50%,0)}

/* beside the screen: the guided steps */
.hpx-tour{list-style:none;margin:0;padding:0;counter-reset:hpstep;max-width:none}
.hpx-tour li{position:relative;padding:11px 0 11px 40px;border-bottom:1px solid var(--line,#E2E2E2);margin:0;font-size:14px;line-height:1.5}
.hpx-tour li::before{counter-increment:hpstep;content:counter(hpstep);position:absolute;left:0;top:10px;width:26px;height:26px;border-radius:50%;border:1px solid #BDBDBD;display:grid;place-items:center;font-size:12px;color:#5F5F5F;transition:all .25s}
.hpx-tour li.done::before{content:"✓";background:#0A0A0A;border-color:#0A0A0A;color:#fff}
.hpx-tour li.done{color:#5F5F5F}
.hpx-progress{font-size:13px;color:#5F5F5F;margin:12px 0 0}

/* small screens: the panel can open full screen, sideways */
.hpx-full-btn{display:none}
@media (max-width:700px){.hpx-full-btn{display:inline-flex}}
.hpx.full{position:fixed;inset:0;z-index:1000;max-width:none;margin:0;background:#111;display:flex;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.hpx.full .hp-device{width:min(100%,calc((100vh - 24px) * 2061 / 1307));width:min(100%,calc((100dvh - 24px) * 2061 / 1307))}
.hpx-close{display:none;position:fixed;right:14px;top:12px;z-index:1001;height:36px;padding:0 14px;border-radius:18px;background:#fff;color:#111;font-family:var(--mono,monospace);font-size:12px}
.hpx.full .hpx-close{display:block}
.hpx-turn{display:none;position:fixed;left:0;right:0;bottom:16px;text-align:center;color:#DADADA;font-size:13px;z-index:1001}
@media (orientation:portrait){.hpx.full .hpx-turn{display:block}}
@media (prefers-reduced-motion:reduce){.hpx *{transition:none!important}}
.hp-lamp,.hp-menu,.hp-cthumb,.hp-cpos,.hp-last{pointer-events:none}
.hp-gate.open{transform:translateX(292px)}