/* app.html only */
/* 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 app page */
.nd-note{margin-top:12px;font-size:13.5px;color:var(--muted)}
.nd-concepts,.nd-door{margin-top:clamp(32px,4vw,56px)}
.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}}
.stage.shots2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,28px);align-items:start;justify-items:center}
.stage.shots2 img{width:100%;max-width:250px;border-radius:16px}
/* before / after: one task, two structures */
.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:28px;overflow:hidden}
.cmp-side{display:flex;flex-direction:column;gap:20px;padding:clamp(22px,3vw,40px);min-width:0}
.cmp-after{border-left:1px solid var(--line);background:color-mix(in srgb,var(--accent-tint) 60%,var(--surface))}
.cmp-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.cmp-count{display:flex;align-items:baseline;gap:8px}
.cmp-count b{font-size:clamp(52px,5.4vw,80px);font-weight:600;line-height:.85;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.cmp-before .cmp-count b{color:var(--muted)}
.cmp-after .cmp-count b{color:var(--accent)}
.cmp-count span{font-size:16px;color:var(--muted)}
.cmp-side>p{font-size:16px;line-height:1.5;color:var(--muted);max-width:40ch;min-height:3em}
.cmp-side>p b{color:var(--fg);font-weight:600}
/* V1 screens and two-sided problem */
.v1pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-block:auto}
.v1pair .stage{border-radius:18px;box-shadow:0 18px 36px -24px rgba(15,18,24,.35)}
.v1pair img{display:block;width:100%;height:auto}
.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}}
.taps{display:flex;gap:8px}
.taps i{width:12px;height:12px;border-radius:50%;border:2px solid var(--accent);transition:background-color .25s}
.taps i.done{background:var(--accent)}
.v2screen{position:relative;width:min(100%,256px);align-self:center;margin-block:auto;aspect-ratio:780/1574;border-radius:18px;overflow:hidden;background:#F1F5F1;box-shadow:0 18px 36px -24px rgba(15,18,24,.35)}
.v2screen img{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .35s var(--ease)}
.v2screen img.on{opacity:1}
.v2hot{position:absolute;z-index:1;padding:0;border:0;border-radius:6px;background:transparent;cursor:pointer}
.v2hot.round{border-radius:50%}
.v2hot[hidden]{display:none}
.hint{animation:hint 1.6s ease-in-out infinite}
@keyframes hint{0%,100%{box-shadow:inset 0 0 0 2px #04CB6A,0 0 0 0 rgba(4,203,106,.5)}50%{box-shadow:inset 0 0 0 2px #04CB6A,0 0 0 8px rgba(4,203,106,0)}}
@media (prefers-reduced-motion:reduce){.hint{animation:none;box-shadow:inset 0 0 0 2px #04CB6A}.v2screen img{transition:none}}
.v2foot{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
.v2again{height:34px;padding:0 16px;border-radius:999px;border:1.5px solid var(--fg);background:transparent;color:var(--fg);font:500 14px var(--f-sans);cursor:pointer}
.v2again[hidden]{display:none}
@media (max-width:760px){
  .cmp{grid-template-columns:1fr;border-radius:22px}
  .cmp-after{border-left:0;border-top:1px solid var(--line)}
  .stage.shots2 img{border-radius:10px}
}
/* ---------- 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)}}