/* Info hub (bare /, 26 Oct 2026). Loaded after site.css + landing.css + ui.css and reuses their
   hero, marquee, order form, plan cards, Kira Jimat, eSIM check, bubble and sticky bar. This file only
   adds the question tiles and the answer sheets. Mobile-first at 390px; every tappable >=44px. */

/* phones keep the SIM stage here (landing.css hides it on the sales page to reach the plans sooner),
   just shorter, since the hub's first screen is about Eastel itself */
@media(max-width:899px){
  .hub .u-stage{display:block;height:210px;margin:-6px -16px 0}
  .hub .u-orb{transform:scale(.8)}
  .hub .u-sim{width:200px;height:126px;margin:-63px 0 0 -100px;padding:14px}
  .hub .u-sim .brand{font-size:18px}
  .hub .u-float{padding:10px 12px}
  .hub .u-float.f1{left:16px}
  .hub .u-float.f2{right:16px}
}
.hub .u-hero h1{font-size:40px}
@media(min-width:900px){.hub .u-hero h1{font-size:clamp(48px,5vw,72px)}}

/* question tiles */
.hub-q{scroll-margin-top:64px}
.hub-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}
.hub-tile{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:128px;padding:16px 14px;border-radius:20px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);color:#fff;font:inherit;text-align:left;text-decoration:none;cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s}
.hub-tile:hover,.hub-tile:focus-visible{border-color:var(--gold);background:rgba(243,210,122,.07);outline:none}
.hub-tile svg{width:28px;height:28px;flex:none;color:var(--gold)}
.hub-tile img{width:28px;height:auto;border-radius:50%;box-shadow:0 0 0 2px rgba(243,210,122,.5)}
.hub-tile b{font-size:15.5px;line-height:1.25}
.hub-tile span{font-size:12.5px;line-height:1.4;color:var(--muted)}
/* passport tile: a full-width band under the 8 tiles, so the grid stays even (2 / 4 across) */
.hub-tile-wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px;min-height:76px;
  background:linear-gradient(120deg,rgba(243,210,122,.14),rgba(124,58,237,.22));border-color:rgba(243,210,122,.35)}
.hub-tw{display:flex;flex-direction:column;gap:3px;min-width:0}
.hub-act [hidden]{display:none} /* .u-ghost's display would beat [hidden] (pitfall 21) */
.hub-tile-biz{background:linear-gradient(150deg,rgba(124,58,237,.38),rgba(255,255,255,.04))}
@media(min-width:900px){
  .hub-q,.hub .order-col,.hub .home-more{max-width:1040px;margin-left:auto;margin-right:auto}
  .hub-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .hub-tile{min-height:160px;padding:20px}
  .hub-tile b{font-size:17px}
  .hub .order-col,.hub .home-more{max-width:560px}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.hub-tile:hover{transform:translateY(-3px)}}
@media(prefers-reduced-motion:no-preference){
  .hub-tile:nth-child(2){transition-delay:.05s}.hub-tile:nth-child(3){transition-delay:.1s}.hub-tile:nth-child(4){transition-delay:.15s}
  .hub-tile:nth-child(6){transition-delay:.05s}.hub-tile:nth-child(7){transition-delay:.1s}.hub-tile:nth-child(8){transition-delay:.15s}
  .hub-tile.in{transition-delay:0s} /* once shown, hover reacts at once */
}

/* answer sheets: bottom sheet on phones, centred dialog from 900px */
.hub-back{position:fixed;inset:0;z-index:55;background:rgba(5,2,8,.62)}
.hub-back[hidden],.hub-sheet[hidden]{display:none}
.hub-sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:56;width:100%;max-width:560px;box-sizing:border-box;
  max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,#24104A,#140726);border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;
  padding:8px 18px calc(22px + env(safe-area-inset-bottom))}
.hub-sh{position:sticky;top:-8px;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -18px 6px;padding:12px 18px 8px;
  background:#24104A}
.hub-sh h3{margin:0;font-size:23px;color:#fff}
.hub-x{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.hub-sb p,.hub-sb li{font-size:15px;line-height:1.55;color:#E9DEFF}
.hub-sb b{color:#fff}
.hub-sb p+p,.hub-sb ul,.hub-sb .hub-rs{margin-top:10px}
.hub-sb ul{padding-left:20px;display:grid;gap:6px}
.hub-sheet .u-q{margin:16px 0 8px}
.hub-sheet .u-esim-res{margin-top:10px}
.hub-sheet .hp-list{margin-top:4px}
.hub-sheet .u-kmini{max-width:none;margin-top:16px}
.hub-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hub-act>*{flex:1 1 200px}
.hub-act .u-cta{min-height:52px;font-size:16px}
.hub-rs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;text-align:center}
.hub-rs div{padding:10px 4px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:12px;color:var(--muted)}
.hub-rs b{display:block;font-size:18px;color:#fff}
@media(min-width:900px){
  .hub-sheet{bottom:auto;top:50%;transform:translate(-50%,-50%);border-bottom:1px solid var(--line);border-radius:24px;max-height:86vh}
}
@media(prefers-reduced-motion:no-preference){
  .hub-sheet:not([hidden]){animation:hub-up .28s cubic-bezier(.2,.8,.2,1)}
  @media(min-width:900px){.hub-sheet:not([hidden]){animation:hub-pop .22s ease-out}}
}
@keyframes hub-up{from{transform:translate(-50%,40px);opacity:0}}
@keyframes hub-pop{from{transform:translate(-50%,-46%);opacity:0}}
body.hub-open{overflow:hidden}
@media(min-width:900px){.hub-tile-wide{min-height:88px;padding:18px 22px}}
/* footer links to the foreign-worker pages /bn/ /ne/ */
.hub-fw{display:flex;justify-content:center;gap:8px}
.home-links .hub-fw a{min-width:64px}