/* Material-only adapter: preserve the legacy page's layout, controls and focus. */
.join-card.liquid-glass,
.landing-hero.liquid-glass,
.landing-step-card.liquid-glass {
    --join-glass-highlight: color-mix(in srgb, var(--text-primary) 18%, transparent);
    --join-glass-top: color-mix(in srgb, var(--card) 70%, color-mix(in srgb, var(--text-primary) 12%, transparent));
    --join-glass-bottom: color-mix(in srgb, var(--card) 62%, color-mix(in srgb, var(--text-primary) 5%, transparent));
    background:
        linear-gradient(180deg, var(--join-glass-highlight), transparent 1px),
        linear-gradient(180deg, var(--join-glass-top), var(--join-glass-bottom));
    border-color: color-mix(in srgb, var(--text-primary) 10%, transparent);
    backdrop-filter: var(--liquid-glass-backdrop, blur(16px) saturate(132%) contrast(100%));
    -webkit-backdrop-filter: var(--liquid-glass-backdrop, blur(16px) saturate(132%) contrast(100%));
}

@media (prefers-reduced-transparency: reduce) {
    .join-card.liquid-glass,
    .landing-hero.liquid-glass,
    .landing-step-card.liquid-glass {
        background: var(--card-solid);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@supports not (backdrop-filter: blur(1px)) {
    .join-card.liquid-glass,
    .landing-hero.liquid-glass,
    .landing-step-card.liquid-glass {
        background: var(--card-solid);
    }
}