/* panels.html only */
/* token overrides for this page */
:root{ --warn:#C2410C; --scrim:rgba(244,245,247,.86); --glow:rgba(255,160,40,.8); --glow2:rgba(255,196,110,.38); }
:root[data-mode="dark"]{ --dot:#2E3440; --shadow:rgba(0,0,0,.5); --lens:#3DF08B; --on-lens:#04140A; --warn:#FB923C; --scrim:rgba(11,13,17,.86); --glow:rgba(255,176,70,.7); --glow2:rgba(255,200,120,.24); }
@media (prefers-color-scheme: dark){ :root:not([data-mode]){ --dot:#2E3440; --shadow:rgba(0,0,0,.5); --lens:#3DF08B; --on-lens:#04140A; --warn:#FB923C; --scrim:rgba(11,13,17,.86); --glow:rgba(255,176,70,.7); --glow2:rgba(255,200,120,.24); } }
/* client portal page */
.flow3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.flow3 li{display:flex;flex-direction:column;min-width:0}
.flow3 .stage img{aspect-ratio:4/3;object-fit:cover}
.step{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.step h3{font-size:clamp(19px,1.6vw,22px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.step p{font-size:15.5px;line-height:1.55;color:var(--muted);max-width:36ch}
.res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--line-strong);border-bottom:1px solid var(--line)}
.res>div{display:flex;flex-direction:column;gap:10px;padding:28px 24px 30px 0;min-width:0}
.res>div+div{padding-left:24px;border-left:1px solid var(--line)}
.res h3{font-size:clamp(24px,2.2vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums}
.res h3 .plus{color:var(--accent)}
.pair2 .stage.flat{padding:0}
.cs-cover .stage.flat img{aspect-ratio:16/10;object-fit:cover;object-position:50% 30%}
.res p{font-size:var(--t-small);line-height:1.5;color:var(--muted);max-width:30ch}
.learn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.learn li{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1.5px solid var(--line-strong)}
.learn .num{font-family:var(--f-mono);font-size:13px;color:var(--accent)}
.learn h3{font-size:clamp(19px,1.6vw,22px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.learn p{font-size:15.5px;line-height:1.55;color:var(--muted)}
@media (max-width:760px){
  .flow3,.learn{grid-template-columns:1fr;gap:36px}
  .res{grid-template-columns:1fr}
  .res>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .res>div{padding:22px 0}
}
/* smart home control panel page */
.decision .stage.flat{padding:0}
.decision.flip .stage{grid-column:1 / span 7;grid-row:1}
.decision.flip .d-text{grid-column:9 / span 4;grid-row:1}
a.inl{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;transition:color .2s}
a.inl:hover{color:var(--accent)}
@media (max-width:1024px){.decision.flip .stage,.decision.flip .d-text{grid-column:span 12;grid-row:auto}}
.hcp-gap{margin-top:clamp(40px,5vw,72px)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.two>div{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1.5px solid var(--line-strong)}
.two h3{font-size:var(--t-h4);font-weight:600;letter-spacing:-.022em;line-height:1.2}
.two p{font-size:16px;line-height:1.6;color:var(--muted);max-width:52ch}
@media (max-width:760px){.two{grid-template-columns:1fr;gap:32px}}
.decision .sides{margin-top:6px}
/* working panel demo */
.hcp-live{padding:clamp(14px,3vw,48px);background:var(--stone);border-radius:20px}
.hcp-svg{display:block;width:100%;height:auto;max-width:1100px;margin-inline:auto;border-radius:clamp(10px,1.6vw,22px);box-shadow:0 30px 60px -30px rgba(1,40,39,.55);font-family:'Roboto',system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.hs-date{fill:#fff;font-size:22px;font-weight:500}
.hs-time{fill:#fff;font-size:42px;font-weight:700;letter-spacing:-.5px}
.hs-rail *{fill:none;stroke:#6B8C88;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hs-rail .on{stroke:#fff}
.hs-h{fill:#012827;font-size:34px;text-anchor:middle}
.hs-card{fill:none;stroke:#012827;stroke-width:2}
.hs-lbl{font-size:22px;font-weight:700;text-anchor:middle;fill:#012827;transition:fill .25s}
.hs-lbl.lit{fill:#04CB6A}
.hs-temp{font-size:30px;font-weight:700;text-anchor:middle;fill:#012827;font-variant-numeric:tabular-nums}
.hs-c{fill:none;stroke:#D4EBDD;stroke-width:2.5;transition:stroke .25s}
.hs-c.lit{stroke:#04CB6A}
.hs-light{cursor:ns-resize;outline:none}
.hs-light.drag .hs-arrows{transition:opacity .25s}
.hs-light:focus-visible .hs-arrows path{stroke-width:4}
.hs-arrows path{fill:none;stroke:#012827;stroke-width:2;stroke-linejoin:round}
.hs-arrows{transition:transform .3s var(--ease),opacity .25s}
.hs-btn{cursor:pointer;outline:none}
.hs-btn:focus-visible .hs-c,.hs-btn:focus-visible .hs-card{stroke-width:4}
.hs-btn:focus-visible text{text-decoration:underline}
.hs-btn:focus-visible circle[stroke]{stroke-width:4}
.hs-shade{cursor:ns-resize;outline:none}
.hs-shade:focus-visible #hcpHandle circle{stroke-width:4}
.hs-dot{fill:#04CB6A;stroke:#012827;stroke-width:1.5;transition:fill .25s}
.hs-dot.off{fill:#F1F5F1}
.hs-acctl{transition:opacity .3s}
.hs-acctl.off{opacity:.3;pointer-events:none}
#hcpDots circle{fill:none;stroke:#012827;stroke-width:1.2}
#hcpDots circle.on{fill:#04CB6A;stroke:#04CB6A}
.hcp-state{margin-top:14px;font-variant-numeric:tabular-nums}
@media (max-width:760px){.hcp-live{padding:10px;border-radius:14px}}
/* before / after: gestures and taps */
.nd-note{margin-top:12px;font-size:13.5px;color:var(--muted)}
.gcmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:28px;overflow:hidden}
.gside{display:flex;flex-direction:column;gap:18px;padding:clamp(22px,3vw,40px);min-width:0}
.gafter{border-left:1px solid var(--line);background:color-mix(in srgb,var(--accent-tint) 60%,var(--surface))}
.gtop{display:flex;flex-direction:column;gap:6px}
.gtask{font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.gsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.gsteps li{display:flex;flex-direction:column;gap:10px}
.gsteps .stage{border-radius:14px}
.gsteps p{display:flex;align-items:baseline;gap:10px;font-size:16px;line-height:1.45;color:var(--fg)}
.gsteps p b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);font:500 12px var(--f-mono);transform:translateY(-1px)}
.gafter .gsteps{margin-block:auto}
.gnote{font-size:15.5px;line-height:1.5;color:var(--muted);max-width:44ch}
.gtab{margin-top:clamp(28px,3.5vw,44px);border-top:1.5px solid var(--line-strong)}
.gr{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr);gap:24px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5}
.gr>span:first-child{font-weight:600}
.gr>span:nth-child(2){color:var(--muted)}
.gh{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gh>span:first-child{font-weight:400}
@media (max-width:760px){
  .gcmp{grid-template-columns:1fr;border-radius:22px}
  .gafter{border-left:0;border-top:1px solid var(--line)}
  .gh{display:none}
  .gr{grid-template-columns:1fr;gap:4px}
  .gr>span:nth-child(2)::before{content:"Before: "}
  .gr>span:nth-child(3)::before{content:"After: ";color:var(--muted)}
}
/* the babysitter test: a playable comparison of the old and new panel */
.bst{overflow-x:clip;display:flex;flex-direction:column;gap:20px}
.bst [hidden]{display:none!important}
.bs-head{display:flex;flex-direction:column;gap:12px;max-width:62ch;margin-bottom:6px}
.bs-head h3{font-size:clamp(26px,2.4vw,34px);font-weight:600;line-height:1.1;letter-spacing:-.03em}
.bs-head p{font-size:16px;line-height:1.55;color:var(--muted)}
.bs-hud{scroll-margin-top:96px}
.bst .btn{align-self:flex-start}
@media (prefers-reduced-motion:reduce){.bst *,.bst *::before,.bst *::after{animation:none!important;transition:none!important}}
/* HUD */
.bs-hud{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:14px 18px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.bs-tasks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;min-width:0}
.bs-tasks li{display:flex;align-items:center;gap:9px;font-size:15px;line-height:1.35}
.bs-tasks i{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--muted);display:grid;place-items:center;transition:background-color .25s,border-color .25s}
.bs-tasks li.bs-done i{background:var(--ok);border-color:var(--ok)}
.bs-tasks li.bs-done i::after{content:"";width:8px;height:4px;border:2px solid var(--surface);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.bs-tasks li.bs-skipped i{border-style:dashed}
.bs-tasks li.bs-done span,.bs-tasks li.bs-skipped span{color:var(--muted)}
.bs-tasks li.bs-now span{font-weight:600}
.bs-tasks li.bs-now i{border-color:var(--accent)}
.bs-meter{display:flex;align-items:baseline;gap:18px;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.bs-meter b{font-size:22px;font-weight:500;letter-spacing:-.02em}
.bs-meter small{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-left:6px}
.bs-round{display:flex;align-items:center;gap:10px}
.bs-round .bs-pill{padding:3px 10px;border-radius:999px;border:1px solid var(--line);font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.bs-round .bs-pill.bs-on{border-color:var(--accent);color:var(--accent)}
/* stage */
.bs-arena{position:relative;isolation:isolate;width:min(100%,calc(58vh * 1.78));margin-inline:auto}
.bs-stage{position:relative;width:100%;border-radius:22px;overflow:hidden;background:#1d1d2b;aspect-ratio:16/9;max-width:100%;box-shadow:0 30px 60px -34px rgba(15,18,24,.6);transition:aspect-ratio .4s var(--ease)}
.bs-stage.bs-v2{aspect-ratio:1500/780;background:#012827}
.bs-stage svg[hidden],.bs-stage g[hidden]{display:none}
.bs-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.bs-feedback{min-height:3.1em;transition:color .2s;font-size:15.5px;color:var(--muted)}
.bs-feedback b{color:var(--fg);font-weight:600}
.bs-feedback.bs-warn{color:var(--warn)}
.bs-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.bs-note{font-size:13.5px;color:var(--muted);max-width:70ch}
/* overlays */
.bs-ov{position:absolute;inset:0;z-index:5;border-radius:22px;display:grid;place-items:center;padding:clamp(14px,3vw,40px);background:var(--scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:bs-k-fade .35s var(--ease)}
.bs-ov[hidden]{display:none}
@keyframes bs-k-fade{from{opacity:0}to{opacity:1}}
.bs-card{width:min(560px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:14px;padding:clamp(18px,3vw,32px);border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.bs-card h2{margin:0;font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.bs-card p{color:var(--muted);font-size:15.5px}
.bs-card ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:15.5px}
.bs-res{display:flex;flex-direction:column;gap:12px;margin:4px 0}
.bs-res-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:12px;font-size:14.5px}
.bs-res-row .bs-bar{height:12px;border-radius:6px;background:var(--stone);overflow:hidden}
.bs-res-row .bs-bar i{display:block;height:100%;width:0;border-radius:6px;background:var(--muted);transition:width .9s var(--ease)}
.bs-res-row.bs-new .bs-bar i{background:var(--accent)}
.bs-res-row span:last-child{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:13.5px;text-align:right;white-space:nowrap}
.bs-big{font-size:clamp(26px,3.2vw,36px);font-weight:600;letter-spacing:-.035em;line-height:1.05;color:var(--fg)}
.bs-big em{font-style:normal;color:var(--accent)}
/* V1 panel (agency) */
.bs-v1 text{font-family:'Jost','Futura','Century Gothic',sans-serif;fill:#fff;text-anchor:middle}
.bs-v1 .bs-dim{transition:opacity .35s}
.bs-v1.bs-taking .bs-dim{opacity:.07}
.bs-v1 .bs-qt rect{fill:none;stroke:#8D8B99;stroke-width:2}
.bs-v1 .bs-qt text{fill:#A9A7B5;font-weight:300}
.bs-v1 .bs-ico{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bs-v1 #bs-v1Menu{transition:transform .35s var(--ease)}
.bs-v1 #bs-v1Menu.bs-drag{transition:none}
.bs-v1 .bs-card1{fill:none;stroke:#8D8B99;stroke-width:1.5}
.bs-v1 .bs-k{fill:#A9A7B5;font-size:24px;text-anchor:start;font-weight:300}
.bs-v1 .bs-v{font-size:44px;text-anchor:start;font-weight:300}
/* V2 panel */
.bs-v2s text{font-family:'Roboto',system-ui,sans-serif}
.bs-hs-rail *{fill:none;stroke:#6B8C88;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bs-hs-rail .bs-on{stroke:#fff}
.bs-hs-h{fill:#012827;font-size:34px;text-anchor:middle}
.bs-hs-card{fill:none;stroke:#012827;stroke-width:2}
.bs-hs-lbl{font-size:22px;font-weight:700;text-anchor:middle;fill:#012827;transition:fill .25s}
.bs-hs-lbl.bs-lit{fill:#04CB6A}
.bs-hs-c{fill:none;stroke:#D4EBDD;stroke-width:2.5;transition:stroke .2s}
.bs-hs-c.bs-lit{stroke:#04CB6A}
.bs-hs-arrows path{fill:none;stroke:#012827;stroke-width:2;stroke-linejoin:round}
.bs-hs-arrows{transition:opacity .25s}
/* room light spilling onto the wall, and the effects layer that runs past the screen edges */
.bs-aura{position:absolute;inset:-80px -100px;z-index:-1;pointer-events:none;opacity:0;filter:blur(26px);
  background:radial-gradient(ellipse 62% 78% at var(--ax,30%) 50%,var(--glow),var(--glow2) 50%,transparent 76%)}
.bs-fx{position:absolute;left:-90px;top:-90px;width:calc(100% + 180px);height:calc(100% + 180px);pointer-events:none;z-index:4}
#bs-v1TakeBg,#bs-v1Lvl{transition:opacity .22s ease}
#bs-v1PebL{transform-box:fill-box;transform-origin:center;transition:transform .25s var(--ease)}
.bs-v1.bs-pressing #bs-v1PebL{transform:scale(.94)}
.bs-fadein{animation:bs-k-fadein .28s ease both}
@keyframes bs-k-fadein{from{opacity:0}to{opacity:1}}
.bs-tasks li.bs-done i{animation:bs-k-pop .45s var(--ease)}
@keyframes bs-k-pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
/* on-screen guide */
.bs-guide .bs-ring{fill:none;stroke:#FFB020;stroke-width:6;transform-box:fill-box;transform-origin:center;animation:bs-k-pulse 1.3s ease-out infinite}
.bs-guide .bs-ring2{fill:rgba(255,176,32,.16);stroke:#FFB020;stroke-width:3}
.bs-guide .bs-trail{fill:none;stroke:#FFB020;stroke-width:6;stroke-linecap:round;stroke-dasharray:14 12;animation:bs-k-dash .9s linear infinite}
.bs-guide .bs-head{fill:#FFB020}
.bs-guide .bs-tip{fill:#FFB020}
.bs-guide .bs-tipt{fill:#1D1B12;font-family:var(--f-sans);font-weight:600;text-anchor:middle}
@keyframes bs-k-pulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes bs-k-dash{to{stroke-dashoffset:-26}}
.bs-ripple{fill:none;stroke:#FF7A59;stroke-width:3;animation:bs-k-rip .5s ease-out forwards;pointer-events:none}
@keyframes bs-k-rip{from{opacity:.9;r:8}to{opacity:0;r:46}}
@media (max-width:640px){
  .bs-aura{inset:-64px -24px}
  .bs-fx{left:-40px;top:-40px;width:calc(100% + 80px);height:calc(100% + 80px)}
  .bs-arena{width:100%}
  .bs-stage{border-radius:16px}
  .bs-tasks li{font-size:14px}
  .bs-ov{position:relative;inset:auto;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .bs-arena:has(.bs-ov:not([hidden])) .bs-stage{display:none}
  .bs-hud{padding:12px 14px}
  .bs-meter b{font-size:19px}
  .bs-res-row{grid-template-columns:76px minmax(0,1fr);}
  .bs-res-row span:last-child{grid-column:1 / -1;text-align:left}
}
/* ---------- QA polish: comfortable touch targets, tidy footer and nav at mid widths ---------- */
@media (pointer:coarse){
  .logo{padding-block:10px;margin-block:-10px}
  .ulink{padding-block:10px;margin-block:-10px}
  .crumb a{display:inline-block;padding-block:12px;margin-block:-12px}
  .seg button{height:36px}
  .email a{padding-block:6px;margin-block:-6px}
}
@media (max-width:900px){.nav-right .status{display:none}}
@media (max-width:760px){.foot{flex-direction:column;align-items:flex-start;gap:12px}}
/* ---------- theme transition: the new mode spreads from the toggle like ink in water ---------- */
@property --vr{syntax:'<length>';inherits:true;initial-value:0px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.vt-ink::view-transition-new(root){
  -webkit-mask-image:
    radial-gradient(circle at var(--vx) var(--vy),#000 var(--vr),transparent calc(var(--vr) + 160px)),
    radial-gradient(circle at calc(var(--vx) - var(--vr) * .2) calc(var(--vy) + var(--vr) * .14),#000 calc(var(--vr) * .86),transparent calc(var(--vr) * .86 + 140px)),
    radial-gradient(circle at calc(var(--vx) + var(--vr) * .06) calc(var(--vy) + var(--vr) * .3),#000 calc(var(--vr) * .74),transparent calc(var(--vr) * .74 + 120px));
  mask-image:
    radial-gradient(circle at var(--vx) var(--vy),#000 var(--vr),transparent calc(var(--vr) + 160px)),
    radial-gradient(circle at calc(var(--vx) - var(--vr) * .2) calc(var(--vy) + var(--vr) * .14),#000 calc(var(--vr) * .86),transparent calc(var(--vr) * .86 + 140px)),
    radial-gradient(circle at calc(var(--vx) + var(--vr) * .06) calc(var(--vy) + var(--vr) * .3),#000 calc(var(--vr) * .74),transparent calc(var(--vr) * .74 + 120px));
  animation:vt-ink 1100ms cubic-bezier(.4,.15,.2,1) both;
}
@keyframes vt-ink{from{--vr:0px}to{--vr:var(--vR)}}