/* Keep the hero centred in the viewport below the navigation. */
.landing-mode main{margin-top:0}
.landing-mode .hero{min-height:calc(100dvh - 82px);padding:64px 0;box-sizing:border-box;justify-content:center}
.landing-intro h1,.landing-intro h1 *{cursor:default}
@media(min-width:1280px){
 .landing-mode .hero{width:min(1600px,calc(100vw - 64px));left:50%;translate:-50% 0}
 .landing-mode .landing-intro{max-width:calc(100% - 280px)}
 .landing-intro h1{font-size:clamp(80px,6.25vw,120px)}
 .landing-intro p{font-size:clamp(14px,1vw,18px)}
 .hero .hero-photo{width:clamp(112px,8.2vw,156px);height:clamp(112px,8.2vw,156px)}
 .hero .hero-pepe{left:1%;top:calc(50% - clamp(250px,18vw,340px))}
 .hero .hero-refrescos{right:1%;top:calc(50% - clamp(230px,16.8vw,320px))}
 .hero .hero-paloma{left:7%}
 .hero .hero-devonian{right:7%}
}
@media(min-width:701px){
 .hero-pepe{top:calc(50% - 250px)}
 .hero-refrescos{top:calc(50% - 230px)}
 .hero-devonian{top:calc(50% + 70px);bottom:auto}
 .hero-paloma{top:calc(50% + 60px);bottom:auto}
}
/* Selected mobile card row stays in the centred content flow. */
@media(max-width:700px){
 .landing-mode main{margin-top:0}
 .landing-mode .generation-motion-toggle{position:absolute;top:88px;right:50%;translate:50% 0;font-size:10px;padding:8px 10px}
 .landing-mode .hero[data-mobile-layout]{min-height:calc(100dvh - 76px);padding:54px 0;justify-content:center;box-sizing:border-box}
 .landing-mode .hero[data-mobile-layout] .landing-intro{order:0;width:100%;margin:0 auto 28px}
 .landing-mode .hero[data-mobile-layout]>.note{order:2}
 .hero[data-mobile-layout] .hero-photo{width:clamp(64px,19vw,84px);height:clamp(64px,19vw,84px);flex:0 0 auto;transform:rotate(var(--card-angle));border-radius:12px}
 .landing-mode .hero[data-mobile-layout=b] .hero-examples{position:relative;inset:auto;order:1;display:flex;justify-content:center;gap:0;margin:6px 0 36px;pointer-events:auto}
 .hero[data-mobile-layout=b] .hero-photo{position:relative;inset:auto;width:clamp(68px,22vw,104px);height:clamp(68px,22vw,104px);--card-entry-angle:calc(var(--card-angle) - 6deg);--card-overshoot-angle:calc(var(--card-angle) + 2deg)}
 .hero[data-mobile-layout=b] .hero-photo+ .hero-photo{margin-left:-5px}
 .hero[data-mobile-layout=b] .hero-photo:nth-child(even){top:-7px;--card-entry-angle:calc(var(--card-angle) + 6deg);--card-overshoot-angle:calc(var(--card-angle) - 2deg)}
 .hero[data-mobile-layout=b] .hero-pepe{--card-angle:-4deg}
 .hero[data-mobile-layout=b] .hero-refrescos{--card-angle:3deg}
 .hero[data-mobile-layout=b] .hero-devonian{--card-angle:-3deg}
 .hero[data-mobile-layout=b] .hero-paloma{--card-angle:4deg}
 .hero[data-mobile-layout=b] .hero-photo:focus-visible{z-index:3}
}