@import url('/css/mobile-android.css');
/* ==========================================================
   WattWorks Two-View Demo Mockups (laptop + phone)
   Mirrors VitalCoach demo.html structure. WattWorks-namespaced
   (ww-pd-*, ww-cd-*) so it never collides with other verticals.
   Brand: electric yellow #FACC15 + midnight #0F172A.
   ========================================================== */

/* Section + intro */
.ww-pd-section{max-width:1100px;margin:0 auto;padding:64px 24px 0}
.ww-pd-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 14px;border-radius:50px;margin-bottom:16px;color:#0F172A;background:rgba(250,204,21,0.18);border:1px solid rgba(250,204,21,0.5)}
.ww-pd-h2{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;letter-spacing:-.03em;margin-bottom:8px;text-align:center;color:#0F172A}
.ww-pd-sub{font-size:1rem;line-height:1.55;margin-bottom:36px;text-align:center;max-width:620px;margin-left:auto;margin-right:auto;color:#475569}
.ww-pd-grid{display:grid;grid-template-columns:1fr 320px 1fr;gap:48px;align-items:center;margin-top:24px}
@media(max-width:900px){.ww-pd-grid{grid-template-columns:1fr;gap:32px}}
.ww-pd-side{font-size:.92rem;line-height:1.6;color:#3A3A3A}
.ww-pd-side h3{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0F172A;margin-bottom:14px}
.ww-pd-side ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.ww-pd-side li{display:flex;align-items:flex-start;gap:10px}
.ww-pd-chk{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:800;background:rgba(250,204,21,0.2);border:1px solid rgba(250,204,21,0.45);color:#B45309}
.ww-pd-side b{display:block;font-weight:800;color:#0F172A;margin-bottom:2px}

/* Phone (homeowner) */
.ww-pd-phone{position:relative;width:320px;height:660px;margin:0 auto;background:#060B14;border-radius:48px;padding:10px;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 2px rgba(255,255,255,0.06) inset}
.ww-pd-phone::before{content:'';position:absolute;top:18px;left:50%;transform:translateX(-50%);width:96px;height:26px;background:#000;border-radius:14px;z-index:5}
.ww-pd-phone::after{content:'';position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:120px;height:4px;background:rgba(255,255,255,0.6);border-radius:2px;z-index:5}
.ww-pd-screen{position:relative;width:100%;height:100%;background:#0F172A;border-radius:38px;overflow:hidden;color:#F1F5F9;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.ww-pd-statusbar{position:absolute;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:space-between;padding:14px 28px 0;font-size:13px;font-weight:700;z-index:3;color:#F1F5F9}
.ww-pd-time{font-variant-numeric:tabular-nums}
.ww-pd-icons{display:flex;gap:5px;align-items:center;font-size:11px;letter-spacing:1px}
.ww-pd-viewport{position:absolute;top:48px;left:0;right:0;bottom:62px;overflow:hidden}
.ww-pd-screen-page{position:absolute;inset:0;padding:14px 16px;overflow:hidden;opacity:0;transform:translateX(20px);transition:opacity .35s ease, transform .35s ease;pointer-events:none}
.ww-pd-screen-page.active{opacity:1;transform:translateX(0);pointer-events:auto}
.ww-pd-app-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ww-pd-greet{font-size:11px;color:#94A3B8;font-weight:600;letter-spacing:0.04em}
.ww-pd-name{font-size:18px;font-weight:900;color:#fff;letter-spacing:-0.01em}
.ww-pd-accent{color:#FACC15}
.ww-pd-avatar{width:34px;height:34px;border-radius:50%;background:#FACC15;color:#0F172A;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ww-pd-h-back{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px;font-weight:800;color:#fff}
.ww-pd-arrow{font-size:18px;color:#FACC15}
.ww-pd-checkin-hdr{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ww-pd-checkin-hdr .ww-pd-rav{width:38px;height:38px;font-size:14px}
.ww-pd-checkin-hdr h4{font-size:13px;font-weight:800;color:#fff}
.ww-pd-checkin-hdr p{font-size:9px;margin-top:1px}
.ww-pd-rav{width:28px;height:28px;border-radius:50%;background:rgba(250,204,21,0.2);color:#FACC15;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(250,204,21,0.4)}
.ww-pd-tabbar{position:absolute;bottom:0;left:0;right:0;height:62px;background:rgba(15,23,42,0.96);border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:flex-start;justify-content:space-around;padding:8px 8px 0;z-index:4;backdrop-filter:blur(10px)}
.ww-pd-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;cursor:pointer;color:#64748B;transition:color .2s}
.ww-pd-tab.active{color:#FACC15}
.ww-pd-tab-icon{font-size:17px;line-height:1}
.ww-pd-tab-lbl{font-size:8px;font-weight:700;letter-spacing:0.04em}
.ww-pd-dots{display:flex;gap:7px;justify-content:center;margin-top:18px}
.ww-pd-dot{width:8px;height:8px;border-radius:50%;background:rgba(15,23,42,0.18);cursor:pointer;transition:all .25s;border:none}
.ww-pd-dot.active{background:#0F172A;width:24px;border-radius:8px}
.ww-pd-cap{text-align:center;font-size:11px;color:#475569;margin-top:10px;font-weight:600}
.ww-pd-cta{display:block;text-decoration:none;border-radius:10px;padding:14px 24px;font-size:.95rem;font-weight:800;text-align:center;transition:opacity .2s;margin-top:24px;background:#FACC15;color:#0F172A}
.ww-pd-cta:hover{opacity:.88}
.ww-pd-cta-sub{text-align:center;font-size:11px;margin-top:8px;color:#64748B}
.ww-pd-divider{max-width:800px;margin:64px auto 0;padding:0 24px;display:flex;align-items:center;gap:16px}
.ww-pd-divider::before,.ww-pd-divider::after{content:'';flex:1;height:1px;background:rgba(15,23,42,0.08)}
.ww-pd-divider span{font-size:12px;white-space:nowrap;color:#64748B;font-weight:600}

/* Laptop (electrician) */
.ww-cd-section{max-width:1180px;margin:0 auto;padding:32px 24px 0}
.ww-cd-laptop-wrap{margin:0 auto;max-width:920px;position:relative}
.ww-cd-laptop{position:relative;background:#1a1a1a;border-radius:14px 14px 6px 6px;padding:18px 18px 28px;box-shadow:0 30px 90px rgba(0,0,0,0.5),0 2px 0 rgba(255,255,255,0.04) inset}
.ww-cd-laptop::after{content:'';display:block;position:absolute;left:-3%;right:-3%;bottom:-12px;height:14px;background:linear-gradient(180deg,#2a2a2a,#0a0a0a);border-radius:0 0 14px 14px;box-shadow:0 8px 18px rgba(0,0,0,0.35)}
.ww-cd-laptop::before{content:'';position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);width:120px;height:6px;background:#0a0a0a;border-radius:0 0 6px 6px;z-index:2}
.ww-cd-browser{background:#0F172A;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,0.06)}
.ww-cd-browser-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#1E293B;border-bottom:1px solid rgba(255,255,255,0.06)}
.ww-cd-dot{width:11px;height:11px;border-radius:50%}
.ww-cd-dot.r{background:#FF5F57}.ww-cd-dot.y{background:#FEBC2E}.ww-cd-dot.g{background:#28C840}
.ww-cd-url{flex:1;background:#0F172A;border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:5px 12px;font-size:11px;color:#94A3B8;font-family:-apple-system,sans-serif}
.ww-cd-lock{color:#22C55E;margin-right:6px}
.ww-cd-app{display:flex;height:540px;color:#F1F5F9;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
@media(max-width:768px){.ww-cd-app{height:auto;flex-direction:column}}
.ww-cd-sb{width:200px;background:#111827;border-right:1px solid rgba(255,255,255,0.06);padding:14px 10px;display:flex;flex-direction:column;flex-shrink:0}
@media(max-width:768px){.ww-cd-sb{width:100%;flex-direction:row;overflow-x:auto;padding:8px 10px}}
.ww-cd-sb-logo{font-size:14px;font-weight:900;color:#fff;padding:6px 10px 14px;border-bottom:1px solid rgba(255,255,255,0.05);margin-bottom:10px}
.ww-cd-sb-logo .a{color:#FACC15}
.ww-cd-sb-lbl{font-size:8px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:#475569;padding:8px 10px 4px}
.ww-cd-nav{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;color:#64748B;text-decoration:none;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.ww-cd-nav.active{background:rgba(250,204,21,0.14);color:#fff;border:1px solid rgba(250,204,21,0.4)}
.ww-cd-nav-i{font-size:13px;width:14px;text-align:center;flex-shrink:0}
.ww-cd-main{flex:1;overflow-y:auto;background:#0F172A}
.ww-cd-top{padding:11px 18px;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;justify-content:space-between;align-items:center;background:rgba(15,23,42,0.96)}
.ww-cd-top-title{font-size:13px;font-weight:800}
.ww-cd-btn-mini{background:#FACC15;color:#0F172A;font-size:10px;font-weight:800;padding:5px 11px;border-radius:6px}
.ww-cd-pane{padding:0;display:none}
.ww-cd-pane.active{display:block}
.ww-cd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.ww-cd-stat{background:#1E293B;border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:10px 11px}
.ww-cd-stat.electric{border-color:rgba(250,204,21,0.4);background:rgba(250,204,21,0.07)}
.ww-cd-stat-i{font-size:11px;margin-bottom:3px}
.ww-cd-stat-v{font-size:18px;font-weight:900;line-height:1;color:#fff}
.ww-cd-stat.electric .ww-cd-stat-v{color:#FACC15}
.ww-cd-stat-l{font-size:9px;color:#64748B;text-transform:uppercase;letter-spacing:0.05em;font-weight:700;margin-top:3px}
.ww-cd-sec{font-size:9px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:#94A3B8;margin:14px 0 8px;display:flex;justify-content:space-between}
.ww-cd-tbl{background:#1E293B;border:1px solid rgba(255,255,255,0.06);border-radius:8px;overflow:hidden}
.ww-cd-tbl-h{display:grid;grid-template-columns:1.4fr 1fr 1.7fr 70px;gap:8px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.06);background:#141C2C;font-size:8px;font-weight:800;letter-spacing:0.08em;color:#64748B;text-transform:uppercase}
.ww-cd-tbl-r{display:grid;grid-template-columns:1.4fr 1fr 1.7fr 70px;gap:8px;padding:9px 12px;align-items:center;border-bottom:1px solid rgba(255,255,255,0.05)}
.ww-cd-tbl-r:last-child{border-bottom:none}
.ww-cd-r-name{font-size:11px;font-weight:700;color:#fff}
.ww-cd-r-sub{font-size:9px;color:#64748B;margin-top:1px}
.ww-cd-r-meta{font-size:10px;color:#CBD5E1;font-variant-numeric:tabular-nums}
.ww-cd-mods{display:flex;gap:5px;flex-wrap:wrap}
.ww-cd-mod{font-size:8px;font-weight:700;padding:2px 6px;border-radius:50px;text-transform:uppercase;letter-spacing:0.04em}
.ww-cd-mod.on{background:rgba(250,204,21,0.2);color:#FACC15}
.ww-cd-mod.off{background:rgba(255,255,255,0.04);color:#475569}
.ww-cd-mod.warn{background:rgba(249,115,22,0.18);color:#F97316}
.ww-cd-tag{font-size:9px;font-weight:800;padding:3px 8px;border-radius:50px;text-align:center;letter-spacing:0.04em}
.ww-cd-tag.go{background:rgba(34,197,94,0.18);color:#22C55E}
.ww-cd-tag.due{background:rgba(249,115,22,0.18);color:#F97316}
.ww-cd-tag.code{background:rgba(239,68,68,0.18);color:#F87171}
.ww-cd-builder{display:grid;grid-template-columns:240px 1fr;gap:12px}
@media(max-width:768px){.ww-cd-builder{grid-template-columns:1fr}}
.ww-cd-pick{background:#1E293B;border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:10px}
.ww-cd-day{background:#1E293B;border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:10px;margin-bottom:8px}
.ww-cd-day-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ww-cd-day-name{font-size:10px;font-weight:800;color:#FACC15;letter-spacing:0.04em}
.ww-cd-day-actions{font-size:9px;color:#64748B}
.ww-cd-ex{display:grid;grid-template-columns:1.5fr 50px 50px 60px;gap:6px;padding:5px 0;font-size:10px;color:#CBD5E1;align-items:center;border-bottom:1px solid rgba(255,255,255,0.04)}
.ww-cd-ex:last-child{border-bottom:none}
.ww-cd-ex-input{font-size:9px;color:#94A3B8;background:rgba(255,255,255,0.03);padding:2px 5px;border-radius:4px;text-align:center}
.ww-cd-payout-h{background:linear-gradient(135deg,rgba(250,204,21,0.14),rgba(250,204,21,0.04));border:1px solid rgba(250,204,21,0.3);border-radius:10px;padding:14px;margin-bottom:12px}
.ww-cd-payout-bal{font-size:30px;font-weight:900;color:#FACC15;line-height:1}
.ww-cd-payout-sub{font-size:11px;color:#CBD5E1;margin-top:5px}
.ww-cd-formgrp{margin-bottom:8px}
.ww-cd-formgrp label{display:block;font-size:8px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:#94A3B8;margin-bottom:4px}
.ww-cd-formgrp input{width:100%;background:#0F172A;border:1px solid rgba(255,255,255,0.08);border-radius:6px;padding:7px 10px;font-size:10px;color:#fff}
.ww-cd-cap{text-align:center;font-size:12px;color:#3A3A3A;margin-top:18px;font-weight:600}
.ww-cd-pane-dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.ww-cd-pane-dot{width:8px;height:8px;border-radius:50%;background:rgba(15,23,42,0.18);cursor:pointer;transition:all .25s;border:none}
.ww-cd-pane-dot.active{background:#0F172A;width:24px;border-radius:8px}
.ww-cd-bridge{max-width:920px;margin:36px auto 0;text-align:center;font-size:13px;color:#3A3A3A;font-weight:600;line-height:1.5}
.ww-cd-bridge-arrow{display:inline-block;font-size:24px;color:#FACC15;margin:0 8px;animation:wwbob 1.6s ease-in-out infinite}
@keyframes wwbob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}