/* Home only: loaded after styles.css. */
/* in dark mode the day ground above the closing band is the same night as the band, so a hairline marks the seam */
.mq-close{border-top:1px solid var(--line)}
/* the Main Street name links to Games: a 44 px tall target whose negative margins keep the 28 px line, so nothing moves */
.mq .mq-lt .mq-namelink{display:inline-flex;align-items:center;min-height:44px;margin:-8px 0}

/* Main Street as the brand stage (the he- classes): one section. A full-width band of the game's sunset crew
   (main-street-motorcycles.webp, blurred like the cover, under a scrim that is darkest behind the words) carries the
   brand pitch in the poster face, set left so
   the stage shows on the right; then Main Street's own card (the same frame sharp at 640 px, its name, line and Play
   on Roblox) pops out of the band's foot onto the day ground, the way the number panels pop out of the cover. The
   stage is night in both colour modes, like the cover; the card is a panel, like the numbers. */
.he-stage{position:relative;isolation:isolate;overflow:hidden;background:#0E1016;padding:128px 0 272px}
.he-stage .mq-bd::after{background:linear-gradient(90deg,rgba(14,16,22,.90) 0%,rgba(14,16,22,.80) 45%,rgba(14,16,22,.46) 100%)}
.he-in{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.he-h{color:#F4F6FA}
.mq .he-copy{color:#DCE1EA;font-size:20px;line-height:1.5;max-width:38em;text-wrap:balance}
.he-in .mq-actions{margin-top:8px}
.he-foot{position:relative;z-index:2;display:flow-root;padding-bottom:128px}
.mq .he-card{margin-top:-176px;border:1px solid var(--pbd);border-radius:6px;background:var(--panel);box-shadow:0 5px 0 var(--pbase)}
/* from 1024 to 1279 a 640 px picture would leave the words too little room, so the two columns share the card evenly;
   the picture keeps its 21:10 crop and sits centred beside the words */
@media (min-width:1024px) and (max-width:1279.98px){
.mq .he-card{grid-template-columns:repeat(2,minmax(0,1fr))}
.mq .he-card>.mq-game-media{align-self:center}
}
/* on tablets the copy stops at 30em, on the darker side of the scrim, so it keeps 7.8:1 contrast or more */
@media (min-width:768px) and (max-width:1023.98px){
.mq .he-copy{max-width:30em}
}
@media (max-width:767.98px){
.he-stage{padding:64px 0 168px}
.he-stage .mq-bd::after{background:linear-gradient(180deg,rgba(14,16,22,.88) 0%,rgba(14,16,22,.82) 60%,rgba(14,16,22,.66) 100%)}
.he-in{gap:20px}
.mq .he-card{margin-top:-104px}
.he-foot{padding-bottom:64px}
}