.habi-hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:5%;padding-bottom:40px}
.habi-intro{min-width:0}
/* Convert the light background to alpha instead of relying on backdrop blending. */
body[data-brand-area="habi"] .brand-lockup__mark{mix-blend-mode:normal}
body[data-brand-area="habi"] .brand-lockup__mark img{filter:url(#habi-transparent);mix-blend-mode:normal}
.habi-hero h1{font-size:clamp(36px,3.9vw,58px);max-width:18ch}
.habi-hero .lead{max-width:39ch;margin:22px 0}
.habi-portrait{margin:0;width:100%;max-width:420px;justify-self:center}
.habi-portrait img{display:block;width:100%;height:auto;border-radius:28px}
.habi-caption{margin:18px 0 0;text-align:center}
.habi-quote{font:italic clamp(21px,2vw,28px)/1.35 Georgia,serif;letter-spacing:-.015em;text-wrap:balance;margin:0;color:var(--ink)}
.habi-hero .brand-lockup--intro{margin-bottom:22px}
.habi-hero .button{margin-top:4px}
.habi-game{scroll-margin-top:145px}
.habi-game h2{max-width:22ch;margin-top:0}
.habi-hero{min-height:calc(100svh - 108px);padding-top:42px;padding-bottom:64px}
.habi-game{background:#eeece4;border-top:1px solid var(--line)}
.habi-game-inner{max-width:1440px;padding-top:72px;padding-bottom:80px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:clamp(28px,4.5vw,64px)}
.habi-game-copy{min-width:0}
.habi-game-copy>p:last-child{margin-bottom:0}
.habi-game-art{margin:0;min-width:0;width:100%}
.habi-game-art img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:22px}
.habi-game h2{font-size:clamp(30px,3.4vw,46px);max-width:23ch;margin-bottom:24px}
.habi-game p:not(.eyebrow){max-width:58ch}
.habi-game .text-link{margin-top:20px}
@media(max-width:950px){.habi-game-inner{grid-template-columns:minmax(0,1fr);gap:28px}.habi-game-art{max-width:720px}}
@media(max-width:800px){.habi-hero{min-height:0;padding-bottom:48px}.habi-game-inner{padding-top:48px;padding-bottom:56px}}
@media(max-width:800px){
 .habi-hero{grid-template-columns:1fr;gap:28px}
 .habi-portrait{max-width:380px}
 .habi-hero h1{font-size:clamp(32px,7.2vw,50px)}
 .habi-hero .lead{max-width:46ch}
 .habi-quote{font-size:24px}
}
@media(max-width:440px){.habi-quote{font-size:22px}.habi-caption{margin-top:16px}}