/* AstralWorld card surfaces. Motion and the illustrated atlases stay owned by
   the existing card controller; this sheet only changes visual presentation. */
body.aw-redesign.immersive-home :is(.flip-card__front,.flip-card__back) {
    border: 1px solid #bcb3c026;
    border-radius: 0;
    box-shadow: 0 16px 35px #00000026;
    text-shadow: none;
}
body.aw-redesign.immersive-home .flip-card__front {
    padding: 0;
    background-color: #17151d;
}
body.aw-redesign.immersive-home .flip-card__front::before { content: none; }
body.aw-redesign.immersive-home .flip-card__front::after,
body.aw-redesign.immersive-home .flip-card:hover .flip-card__front::after {
    inset: 0;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: #11101912;
}
body.aw-redesign.immersive-home .flip-card:hover .flip-card__front,
body.aw-redesign.immersive-home .flip-card:focus-visible .flip-card__front {
    border-color: #e4bdcf80;
    box-shadow: 0 16px 35px #00000026;
}
body.aw-redesign.immersive-home .studio-card-title {
    position: absolute;
    inset: auto 0 0;
    min-height: 28%;
    display: flex;
    align-items: center;
    padding: 18px 24px;
    border-top: 1px solid #bcb3c01c;
    background: #17151d;
    font-family: 'Oswald',sans-serif;
    font-size: clamp(24px,2.3vw,34px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.015em;
    text-align: left;
    text-transform: none;
    color: #f3eaf0;
    text-shadow: none;
}
body.aw-redesign.immersive-home .flip-card__back {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: clamp(24px,2.4vw,34px);
    background: #17151d;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: #6b5262 #17151d;
}
body.aw-redesign.immersive-home .flip-card__badge {
    margin: 0 0 24px;
    padding: 0 0 10px;
    border: 0;
    border-bottom: 1px solid #e4bdcf40;
    border-radius: 0;
    background: none;
    color: #e4bdcf;
    font-family: 'Unbounded',sans-serif;
    font-size: 8px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .03em;
}
body.aw-redesign.immersive-home .flip-card__back h3 {
    margin: 0 0 18px;
    color: #f3eaf0;
    font-family: 'Oswald',sans-serif;
    font-size: clamp(28px,2.6vw,38px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.015em;
}
body.aw-redesign.immersive-home .flip-card__back p {
    margin: 0;
    color: #c5bbc7;
    font-family: 'Onest',sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
}
body.aw-redesign.immersive-home .step-card,
body.aw-redesign.immersive-home .step-card:hover {
    padding: 0 24px 24px;
    border: 1px solid #bcb3c026;
    border-radius: 0;
    background: #17151d;
    box-shadow: 0 16px 35px #00000026;
    text-shadow: none;
}
body.aw-redesign.immersive-home .step-card::before {
    width: calc(100% + 48px);
    margin: 0 -24px 18px;
    height: auto;
    aspect-ratio: 1.85;
    background-size: 200% auto;
    background-position: 0 25%;
    mask-image: none;
    -webkit-mask-image: none;
    border-bottom: 1px solid #bcb3c026;
}
body.aw-redesign.immersive-home .step-card:nth-of-type(3)::before { background-position: 100% 25%; }
body.aw-redesign.immersive-home .step-card:nth-of-type(5)::before { background-position: 0 75%; }
body.aw-redesign.immersive-home .step-card:nth-of-type(7)::before { background-position: 100% 75%; }
body.aw-redesign.immersive-home .step-card__num {
    margin: 0 0 10px;
    color: #e4bdcf;
    font-family: 'Unbounded',sans-serif;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
}
body.aw-redesign.immersive-home .step-card h3 {
    margin: 0 0 10px;
    color: #f3eaf0;
    font-family: 'Oswald',sans-serif;
    font-size: clamp(25px,2.1vw,32px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.015em;
}
body.aw-redesign.immersive-home .step-card p {
    min-height: 0;
    margin: 0 0 16px;
    color: #c5bbc7;
    font-family: 'Onest',sans-serif;
    font-size: 13px;
    line-height: 1.6;
}
body.aw-redesign.immersive-home .step-card__highlight {
    align-self: flex-start;
    color: #e4bdcf;
    font-family: 'Onest',sans-serif;
    font-size: 14px;
    font-weight: 500;
}
/* The cinematic stack has a fixed outer size: reserve enough room for its
   live RU/EN labels and the unchanged raster action below the illustration. */
body.aw-redesign.immersive-home .cinematic-journey .step-card::before {
    height: min(175px,20svh);
    max-height: 175px;
}
@media (max-width:640px) {
    body.aw-redesign.immersive-home .studio-card-title { padding: 16px 20px; font-size: 28px; }
    body.aw-redesign.immersive-home .flip-card__back { padding: 24px; }
    body.aw-redesign.immersive-home .flip-card__back h3 { font-size: 30px; }
    body.aw-redesign.immersive-home .flip-card__badge { margin-bottom: 18px; }
    body.aw-redesign.immersive-home .step-card,
    body.aw-redesign.immersive-home .step-card:hover { padding: 0 20px 24px; }
    body.aw-redesign.immersive-home .step-card::before { width: calc(100% + 40px); margin-inline: -20px; }
    body.aw-redesign.immersive-home .step-card h3 { font-size: 29px; }
    body.aw-redesign.immersive-home .step-card p { font-size: 14px; }
}
@media (max-height:700px) and (min-width:700px) {
    body.aw-redesign.immersive-home .cinematic-journey .step-card::before { height: 130px; }
    body.aw-redesign.immersive-home .cinematic-journey .step-card h3 { font-size: 25px; }
    body.aw-redesign.immersive-home .cinematic-journey .step-card p { font-size: 12px; margin-bottom: 12px; }
}
/* Static chapters keep their content close to the heading once pinning is off. */
body.aw-redesign.immersive-home .steps:not(.cinematic-journey) .steps__grid{margin-top:48px}
body.aw-redesign.immersive-home .steps:not(.cinematic-journey) .step-card{min-height:360px}