/* Promotional game art stays separate from the store copy, preserving faces and logos. */
.hero.hero-promotional{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);min-height:0;background:var(--panel2);box-shadow:0 12px 35px #46267406}
.hero-promotional .hero-art,.hero-promotional.aion .hero-art{position:relative;inset:auto;grid-column:2;grid-row:1;align-self:center;z-index:auto;aspect-ratio:16/9;min-width:0;background:none}
:root[data-theme] .hero.hero-promotional .hero-art{background:none}
.hero-promotional .hero-game-art{position:absolute;inset:0;display:block}
.hero-promotional .hero-game-art img{display:block;width:100%;height:100%;object-fit:contain}
.hero-promotional .hero-game-art-aion,.hero-promotional.aion .hero-game-art-albion{visibility:hidden}
.hero-promotional.aion .hero-game-art-aion{visibility:visible}
.hero-promotional .hero-art::after{content:"";position:absolute;inset:0 auto 0 0;width:clamp(56px,8vw,112px);background:linear-gradient(90deg,var(--panel2),transparent);pointer-events:none}
.hero-promotional .hero-content{grid-column:1;grid-row:1;width:auto;min-width:0;margin:0;padding:30px clamp(28px,3vw,44px);align-self:center}
.hero-promotional h1,.hero-promotional.aion h1{font-size:clamp(40px,3.7vw,58px);letter-spacing:-2px;max-width:none;margin:20px 0 18px}
.hero-promotional .hero-description{max-width:none;min-height:56px}
.hero-promotional .hero-actions{flex-wrap:wrap;gap:8px 18px;margin-top:20px}
.hero-promotional .hero-actions .primary,.hero-promotional .hero-actions .ghost-link{font-size:13px;padding:12px 16px;min-height:48px}
.hero-promotional .hero-actions .primary{padding-inline:20px;box-shadow:0 6px 18px #7b28ee24}
:root[data-theme] .hero-promotional .hero-actions .ghost-link{padding-inline:2px;background:transparent;border-color:transparent;box-shadow:none;color:var(--muted);gap:8px}
:root[data-theme] .hero-promotional .hero-actions .ghost-link:hover{color:var(--purple);text-decoration:underline;text-underline-offset:5px}
.hero-promotional .hero-actions .ghost-link svg{width:19px;height:19px}
.hero-promotional .hero-actions .ghost-link svg:last-child{display:none}
.hero-promotional .hero-actions a:focus-visible{outline:3px solid var(--purple);outline-offset:4px}
.hero-promotional .hero-selector{gap:14px;margin-top:24px}
.hero-promotional .hero-selector button{font-size:11px;min-height:40px}
.hero-promotional .hero-selector #hero-pause{font-size:10px;margin-left:0}
@media(max-width:1100px) and (min-width:901px){
 .hero-promotional .hero-content{padding:26px 24px}
 .hero-promotional h1,.hero-promotional.aion h1{font-size:39px;letter-spacing:-1.5px}
 .hero-promotional .eyebrow{letter-spacing:1.5px}
 .hero-promotional .hero-selector{gap:10px}
}
@media(max-width:900px){
 .hero.hero-promotional{grid-template-columns:minmax(0,1fr)}
 .hero-promotional .hero-art,.hero-promotional.aion .hero-art{grid-column:1;grid-row:1;width:100%;border-bottom:0}
 .hero-promotional .hero-art::after{inset:auto 0 -1px;width:100%;height:36px;background:linear-gradient(0deg,var(--panel2),transparent)}
 /* Fade below the Albion logo, not through it. */
 .hero-promotional:not(.aion) .hero-art::after{height:14px}
 .hero-promotional .hero-content{grid-column:1;grid-row:2;padding:24px;align-self:start}
 .hero-promotional h1,.hero-promotional.aion h1{font-size:clamp(34px,6vw,46px);letter-spacing:-1.3px;margin:16px 0}
 .hero-promotional .hero-description{font-size:14px;max-width:none}
 .hero-promotional .hero-actions{flex-direction:row;align-items:center;margin-top:18px}
 .hero-promotional .hero-selector{margin-top:16px}
}
@media(max-width:380px){
 .hero-promotional .hero-content{padding:22px 18px}
 .hero-promotional h1,.hero-promotional.aion h1{font-size:32px}
 .hero-promotional .hero-actions{flex-direction:column;align-items:stretch;gap:4px}
 .hero-promotional .hero-actions a{justify-content:center}
 .hero-promotional .hero-selector{column-gap:10px;row-gap:2px}
}