body{margin:0}
a{color:#111214}a:hover{color:#55554F}
.navLinks{display:flex}
.menuBtn{display:none}
.guideInner{display:block}
.barX{display:inline}
.heroBg{background:#06120E url(../../assets/img/backgrounds/hero-stadium.jpg) 50% 42% / cover no-repeat}
.gSerene{background:#1C2340 url(../../assets/img/backgrounds/serene.webp) center / cover no-repeat}
.gStargaze{background:#151827 url(../../assets/img/backgrounds/stargaze.webp) center / cover no-repeat}
.gFlux{background:#1A1B2A url(../../assets/img/backgrounds/flux.webp) center / cover no-repeat}
.gMorning{background:#E9E4DC url(../../assets/img/backgrounds/morning.webp) center / cover no-repeat}
.gHaze{background:#E6E6E2 url(../../assets/img/backgrounds/haze.webp) center / cover no-repeat}
.gFT{background:#FF6A2C url(../../assets/img/backgrounds/full-time-orange.webp) center / cover no-repeat}
.bento{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:180px;gap:14px;grid-auto-flow:dense}
.L1{grid-column:1 / 3;grid-row:1}
.L2{grid-column:1 / 3;grid-row:2 / 4}
.L3{grid-column:1 / 2;grid-row:4}
.L4{grid-column:2 / 3;grid-row:4}
.L5{grid-column:1 / 3;grid-row:5 / 7}
.M1{grid-column:3 / 7;grid-row:1 / 3}
.M2{grid-column:3 / 7;grid-row:3 / 6}
.M3{grid-column:3 / 7;grid-row:6}
.R1{grid-column:7 / 9;grid-row:1 / 3}
.R2{grid-column:7 / 9;grid-row:3}
.R5{grid-column:7 / 9;grid-row:4 / 7}
.steps{display:flex;gap:24px}
.m1Row{transform:none}
@container (max-width: 1100px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(180px,auto)}
  .bento > *{grid-column:span 2;grid-row:auto}
  .bento > .sm{grid-column:span 1}
  .bento > .wide{grid-column:span 4}
}
@container (max-width: 760px){
  .navLinks{display:none}
  .menuBtn{display:flex}
  .guideInner{display:none}
  .barX{display:none}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento > .wide{grid-column:span 2}
  .steps{flex-direction:column;gap:16px}
  .m1Row{transform:scale(.68);transform-origin:50% 0}
  .heroBg{background-position:58% 50%}
}

/* ---------- Interaction states (static by default; short colour/scale feedback only) ---------- */
:root{--ink:#111214;--stone:#F2F2EF;--orange:#FF5C20}
html{scroll-behavior:auto}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:8px}
.skipLink{position:absolute;left:16px;top:-60px;z-index:50;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;font:700 14px 'Plus Jakarta Sans',system-ui,sans-serif;text-decoration:none}
.skipLink:focus{top:12px;color:#fff}
.navLink{transition:opacity 120ms ease}
.navLink:hover{opacity:.6;color:var(--ink)}
.navLink:active{opacity:.4}
.pillBtn{transition:background-color 120ms ease,color 120ms ease,transform 120ms ease}
.pillBtn:hover{background:var(--ink);color:#fff}
.pillBtn:active{transform:scale(.97)}
.roundBtn{transition:background-color 120ms ease,transform 120ms ease}
.roundBtn:hover{background:rgba(255,255,255,.14)}
.roundBtn:active{transform:scale(.95)}
.badgeBtn{transition:opacity 120ms ease,transform 120ms ease}
.badgeBtn:hover{opacity:.85}
.badgeBtn:active{transform:scale(.97)}
.solidBtn{transition:background-color 120ms ease,transform 120ms ease}
.solidBtn:hover{background:var(--stone) !important;color:var(--ink) !important}
.solidBtn:active{transform:scale(.98)}
.footLink{transition:color 120ms ease}
.footLink:hover{color:#FF8A5C !important}
.barLink:hover{color:var(--ink) !important;text-decoration:underline !important;text-underline-offset:3px}
.menuBtn{cursor:pointer;border-radius:12px}
.menuBtn:hover{background:rgba(17,18,20,.06) !important}
.menuBtn:active{transform:scale(.94)}
.mobileMenu{position:absolute;right:16px;top:74px;z-index:20;min-width:220px;box-sizing:border-box;padding:8px;background:#fff;color:var(--ink);border-radius:16px;box-shadow:0 18px 40px -16px rgba(0,0,0,.55);display:flex;flex-direction:column;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.mobileMenu[hidden]{display:none}
.mobileMenu a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;font-size:16px;font-weight:600;text-decoration:none;color:var(--ink)}
.mobileMenu a:hover{background:var(--stone)}
.mobileMenu .mobileMenuCta{margin-top:4px;background:var(--ink);color:#fff;justify-content:center}
.mobileMenu .mobileMenuCta:hover{background:#2a2b2f;color:#fff}
.screenFrame{width:393px;height:852px;border:0;display:block;pointer-events:none;background:var(--stone)}
@container (min-width: 761px){.mobileMenu{display:none !important}}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}