/* Program screenshots, tour video and Microsoft Store links (home page) */
.store{display:inline-flex;align-items:center;gap:12px;background:#000;color:#fff;border:1px solid #5a5a5e;border-radius:12px;padding:9px 18px 9px 14px;text-decoration:none;font:600 17px/1.05 var(--font);transition:border-color .2s,transform .2s}
.store:hover{border-color:var(--tape);transform:translateY(-1px)}
.store svg{width:26px;height:26px;flex:none}
.store small{display:block;font:500 11px var(--font);letter-spacing:.02em;opacity:.8;margin-bottom:2px}
.cta .store{vertical-align:middle}
.win{background:#1b1c1f;border:1px solid #2f3034;border-radius:14px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(242,183,5,.18),0 30px 80px rgba(0,0,0,.6)}
.wbar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#232427;border-bottom:1px solid #2f3034;font:500 12px var(--font);color:var(--mut)}
.wbar i{width:11px;height:11px;border-radius:50%;background:#3a3b3f}
.wbar span{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win img{display:block;width:100%;height:auto;aspect-ratio:2/1;background:#f4f4f2}
.hshot{max-width:1180px;margin:64px auto 0;padding:0 22px;perspective:1600px}
.hshot .win{transform:rotateX(6deg);transform-origin:50% 0;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hshot.in .win{transform:none}
.hcap{margin:18px auto 0;color:var(--mut);font-size:14px}
#inside .lead{margin-bottom:46px}
.show{display:grid;grid-template-columns:300px 1fr;gap:28px;text-align:left;align-items:start;max-width:1320px;margin:0 auto;padding:0 22px}
.tabs{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.tabs button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:30px 1fr;gap:2px 10px;width:100%;padding:13px 14px;border-radius:14px;cursor:pointer;color:var(--mut);transition:background .2s,color .2s}
.tabs button:hover{background:#151619;color:var(--fg)}
.tabs button:focus-visible{outline:2px solid var(--line);outline-offset:2px}
.tabs button[aria-selected=true]{background:var(--bg2);color:var(--fg);box-shadow:inset 3px 0 0 var(--tape)}
.tabs b{font:700 15px var(--num);color:var(--tape);grid-row:span 2;padding-top:2px}
.tabs strong{font:600 16px var(--font);color:inherit}
.tabs span{font-size:13.5px;line-height:1.4;display:none}
.tabs button[aria-selected=true] span{display:block}
.shstage{position:relative}
.shstage figure{margin:0}
.shstage figcaption{margin-top:14px;color:var(--mut);font-size:14px;display:flex;justify-content:space-between;gap:16px}
.shstage .bar{height:3px;background:var(--rule);border-radius:2px;overflow:hidden;margin-top:12px}
.shstage .bar i{display:block;height:100%;width:0;background:var(--tape)}
.shstage .bar.run i{animation:shbar 7s linear forwards}
@keyframes shbar{to{width:100%}}
.shstage img{transition:opacity .35s}
.shstage img.fade{opacity:.15}
.tour{max-width:1180px;margin:0 auto;padding:0 22px}
.tour video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:0}
.pts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:26px 0 0;padding:0;list-style:none;color:var(--mut);font-size:15px}
.pts li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--tape);margin-right:9px;vertical-align:2px}
#contact .cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
@media(max-width:860px){
  .show{grid-template-columns:1fr;gap:16px;padding:0 16px}
  .tabs{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs li{flex:none}
  .tabs button{display:flex;gap:8px;padding:9px 14px;border-radius:980px;background:var(--bg2);box-shadow:none!important;white-space:nowrap}
  .tabs button[aria-selected=true]{background:var(--tape);color:var(--ti)}
  .tabs button[aria-selected=true] b{color:var(--ti)}
  .tabs strong{font-size:14px}
  .tabs b{font-size:14px;padding:0}
  .tabs button[aria-selected=true] span{display:none}
  .shstage .mdesc{display:block}
  .hshot{margin-top:44px;padding:0 16px}
  .hshot .win{transform:none}
  .wbar{height:26px}.wbar i{width:8px;height:8px}
  .tour{padding:0 16px}
}
.mdesc{display:none;color:var(--fg);font-size:15px;line-height:1.45;margin:0 0 12px}
@media(prefers-reduced-motion:reduce){.hshot .win{transform:none;transition:none}.shstage .bar.run i{animation:none}}
.shstage a{display:block;cursor:zoom-in}
.nstore{display:inline-flex;align-items:center;gap:8px}
.nstore svg{width:15px;height:15px;flex:none;background:#fff;border-radius:2px;padding:1px}
.nms{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.nms svg{width:14px;height:14px;flex:none}
.hst{margin:18px 0 6px}
/* Early feedback: two rows of cards gliding in opposite directions (pause on hover; still for reduced motion) */
.qts{margin:44px 0 0;display:flex;flex-direction:column;gap:18px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.qrow{overflow:visible}
.qtrack{display:flex;gap:18px;width:max-content;animation:qmove 140s linear infinite;will-change:transform}
.qrow.rev .qtrack{animation-direction:reverse;animation-duration:110s}
.qts:hover .qtrack,.qts:focus-within .qtrack{animation-play-state:paused}
@keyframes qmove{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - 9px),0,0)}}
.qt{margin:0;width:380px;flex:none;border:1px solid var(--rule);border-radius:22px;padding:26px 26px 22px;display:flex;flex-direction:column;gap:16px;position:relative;text-align:left;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),rgba(242,183,5,.16),transparent 45%),var(--bg2);
  animation:qfloat 7s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -1.3s);transition:scale .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.qt:nth-child(4n+1){--i:0}.qt:nth-child(4n+2){--i:2}.qt:nth-child(4n+3){--i:1}.qt:nth-child(4n){--i:3}
.qt:hover{scale:1.035;border-color:rgba(242,183,5,.75);box-shadow:0 18px 50px -18px rgba(242,183,5,.35)}
@keyframes qfloat{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
.qt::before{content:"\201C";position:absolute;top:8px;left:22px;font:700 60px/1 Georgia,serif;color:var(--tape);transition:transform .35s}
.qt:hover::before{transform:translateY(-3px) rotate(-6deg)}
.qt blockquote{margin:30px 0 0;font-size:16.5px;line-height:1.5;color:var(--fg)}
.qt figcaption{margin-top:auto;font:600 13px var(--num);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
/* rows slide in from the sides the first time the section comes into view */
.qrow{opacity:0;transform:translateX(-60px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.qrow.rev{transform:translateX(60px);transition-delay:.15s}
.qts.in .qrow{opacity:1;transform:none}
@media(max-width:860px),(hover:none) and (pointer:coarse){.qt{animation:none}}
@media(max-width:640px){.qts{margin-top:30px;gap:12px}.qtrack{gap:12px;animation-duration:100s}.qrow.rev .qtrack{animation-duration:80s}.qt{width:280px;padding:22px 20px 18px}.qt blockquote{font-size:15.5px}
  @keyframes qmove{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - 6px),0,0)}}}
@media(prefers-reduced-motion:reduce){.qt{animation:none}.qrow{opacity:1!important;transform:none!important}.qtrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.qt[aria-hidden]{display:none}.qts{-webkit-mask-image:none;mask-image:none}}
/* Phones and tablets: the live 3D scene is too heavy to redraw while scrolling, so it is replaced by
   pictures of the same building at six stages, switched as you scroll. The priced bill beside it still updates live. */
.mst{display:none}
@media (max-width:860px),(hover:none) and (pointer:coarse){
  #stg .rig,#stg .vt{display:none}
  #stg .mst{display:block;position:relative;width:100%;max-width:412px;aspect-ratio:412/286;margin:0 auto}
  #stg .mst img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .25s}
  #stg .mst[data-s="0"] img:nth-child(1),#stg .mst[data-s="1"] img:nth-child(2),#stg .mst[data-s="2"] img:nth-child(3),
  #stg .mst[data-s="3"] img:nth-child(4),#stg .mst[data-s="4"] img:nth-child(5),#stg .mst[data-s="5"] img:nth-child(6){opacity:1}
  .scene{height:460vh}
  .tilt.big.glow{animation:none}
  .win{box-shadow:0 20px 50px rgba(0,0,0,.5)}
}