/* phones: the sector name in the middle of the homepage stage between sectors (Batu 17 Oct 11:59) */
.m-sx{display:none}
@media (max-width:640px){
#hx-stage .hx-pans>.m-sx{display:block;position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;visibility:hidden;
  background:rgba(6,10,8,.72);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);transition:opacity .45s ease-in,visibility 0s .45s}
#hx-stage .hx-pans>.m-sx.on{opacity:1;visibility:visible;transition:opacity .35s ease-out}
.m-sx>div{position:absolute;left:16px;right:16px;top:var(--sy,50%);display:grid;justify-items:center;gap:14px;text-align:center;color:#fff;
  transform:translateY(-50%) translateY(12px) scale(.96);transition:transform .55s cubic-bezier(.2,.8,.2,1)}@media (max-width:640px){.m-sx>div{left:14.4px;right:14.4px;gap:12.6px;transform:translateY(-50%) translateY(10.8px) scale(.96)}}
.m-sx.on>div{transform:translateY(-50%)}
.m-sx>div[hidden]{display:none}
.m-sx i{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;background:#fff;color:var(--c);box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}@media (max-width:640px){.m-sx i{width:52.2px;height:52.2px;border-radius:15.3px}}
.m-sx i svg{width:28px;height:28px}@media (max-width:640px){.m-sx i svg{width:25.2px;height:25.2px}}
.m-sx b{font:800 32px/1.05 var(--f-display);letter-spacing:-.03em;text-wrap:balance}@media (max-width:640px){.m-sx b{font:800 28.8px/1.05 var(--f-display)}}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.m-sx>div,.m-sx.on>div{transform:translateY(-50%);transition:none}}