/* =====================================================================
   Laptop and tablet: a real website, not a phone in the middle of the screen.
   Phones (under 760px) keep the app layout: bottom tabs, one column.
   Loaded last.
   ===================================================================== */
.bar__nav,.bar__acts{display:none}
.show__stack{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s var(--ease)}

@media (min-width:760px){
  :root{--pad:28px;--max:1200px}
  html{background:var(--bg)}
  body{max-width:none;box-shadow:none;padding-bottom:48px}
  body.no-wabar{padding-bottom:48px}
  main{min-height:calc(100vh - 72px)}
  .tabs{display:none}

  /* top navigation */
  .bar{height:72px;gap:28px;padding:0 max(28px,calc((100% - var(--max)) / 2 + 28px))}
  .bar__nav{display:flex;align-items:center;gap:4px;margin-left:12px}
  .bar__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:99px;color:var(--ink-2);font-weight:600;text-decoration:none;transition:color .2s,background .2s}
  .bar__nav a:hover{color:var(--ink);background:rgba(160,180,255,.08)}
  .bar__nav a[aria-current="page"]{color:var(--neon)}
  .bar__acts{display:flex;align-items:center;gap:10px;margin-left:auto}
  .bar__acts .tk{position:relative;min-height:44px;padding:0 1.15rem;font-size:.95rem}
  .bar__brand{font-size:1.5rem}

  /* floating actions go back to labelled pills */
  .wabar{right:28px;bottom:28px;width:auto;height:56px;padding:0 22px;border-radius:99px;font-size:1rem;gap:10px;color:#fff}
  .wabar .ico{width:24px;height:24px}
  .cartpill{left:auto;right:28px;bottom:96px;transform:none}
  .toast{bottom:32px}

  /* home */
  .intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);column-gap:64px;align-items:center;padding:84px max(28px,calc((100% - var(--max)) / 2 + 28px)) 40px}
  .intro::before{width:640px;height:640px;left:-200px;top:-200px}
  .intro::after{width:560px;height:560px;right:-120px;top:120px}
  .intro__h{grid-column:1;max-width:11ch;font-size:clamp(3.4rem,6.2vw,5.6rem);line-height:.98}
  .intro__p{grid-column:1;max-width:40ch;font-size:1.15rem}
  .intro__acts{grid-column:1;margin-top:30px}
  .intro__acts .tk{flex:0 0 auto}
  .show{grid-column:2;grid-row:1 / span 3;margin-top:0}
  .show__stack{height:min(40vw,520px)}
  .show__i{border-radius:24px}
  .work{max-width:var(--max);margin:0 auto;padding:84px 28px 0}
  .work__hd{padding:0;margin-bottom:22px}
  .work__hd h2{font-size:2.2rem!important}
  .rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;overflow:visible;padding:0;scroll-snap-type:none}
  .rail .sc{flex:none}
  .rail .sc:hover{transform:translateY(-6px)!important}
  .howto{padding:84px 28px 0}
  .back{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:20px 56px;padding:44px}
  .back h2{grid-row:span 2;font-size:2.4rem!important;max-width:10ch}
  .steps{margin:0}
  .back .tk{justify-self:start}
  .denoms{padding:84px 0 0}
  .denoms__hd{padding:0 28px}
  .denoms__hd h2{font-size:2.2rem!important}
  .denoms__row{grid-template-columns:1fr 1fr!important;padding:0 28px;gap:22px}
  .denom{padding:28px}
  .denom__amt{font-size:4rem!important}
  .care{padding:84px 28px 28px}
  .care__card{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:4px 40px;padding:40px}
  .care__card > *{grid-column:1}
  .care__acts,.care__links{grid-column:2}
  .care__acts{grid-row:1 / span 2;align-self:center;margin:0}
  .care__links{grid-row:3 / span 2;align-self:start}
  .care__num{font-size:2.6rem!important}

  /* pages */
  .deck__hd,.pagehd{padding:0 28px}
  .pagehd{padding-top:44px}
  .deck__hd h2,.pagehd h1{font-size:2.8rem!important}
  .series{flex-wrap:wrap;overflow:visible;padding:2px 28px 18px;max-width:var(--max);-webkit-mask:none;mask:none}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px;padding:0 28px}
  .grid .sc:hover{transform:translateY(-6px)!important}
  .packs{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px;padding:0 28px}
  .tickets{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px;padding:0 28px}
  .serieshd,.others{padding:0 28px}
  .cardview{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;gap:44px;padding:44px 28px}
  .cardview > *{margin-bottom:0}
  .detail{position:sticky!important;top:96px}
  .card--big .bigtitle{font-size:2.4rem!important}
  .opts{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .bases{grid-template-columns:repeat(4,minmax(0,1fr))!important}

  /* menu is a side drawer again */
  .menu__panel{right:0;width:min(440px,100%);transform:translateX(104%);border-left:1px solid var(--line)}
  .menu.open .menu__panel{transform:none}
}
@media (min-width:1180px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media (hover:hover) and (min-width:760px){
  .sc,.pack,.denom{transition:transform .35s var(--ease),box-shadow .3s}
}