/* Support-only mobile layout. Desktop retains the existing wide service banner. */
@media (max-width: 767px) {
    .support-page { background: #f5f5f5; }
    .support-page #site-nav > div:first-child { padding-inline: 16px; }
    .support-page #header-logo { height: 20px; max-width: 86px; }
    .support-page #lang-toggle { padding-inline: 8px; gap: 0; }
    .support-page #lang-toggle svg { display: none; }
    .support-page #mobile-menu-btn { margin-left: 8px; }

    .support-page .support-hero {
        height: clamp(420px, 123.2vw, 620px);
        overflow: hidden;
        background: linear-gradient(#f5f5f5, #ebebeb);
    }
    .support-page .support-hero picture > img {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 88%;
        max-width: 440px;
        height: auto;
        aspect-ratio: 1;
        object-fit: contain;
        transform: translateX(-50%);
    }
    .support-page .support-hero-shade,
    .support-page .support-desktop-description { display: none; }
    .support-page .support-hero-copy { inset: 40px 0 auto; padding: 0 20px; justify-content: start; }
    .support-page .support-hero-copy > div { text-align: center; }
    .support-page .support-hero h1 { margin-bottom: 16px; font-size: 24px; line-height: 34px; font-weight: 600; color: #333; letter-spacing: 0; }
    .support-page .support-mobile-description[hidden] { display: block; margin: 0 auto; max-width: 420px; font-size: 16px; line-height: 26px; color: #444; }

    .support-page .support-faq { padding: 42px 0 20px; background: #f5f5f5; }
    .support-page .support-faq > div { max-width: 640px; padding: 0 16px; }
    .support-page .support-faq h2 { margin-bottom: 24px; font-size: 21px; line-height: 30px; font-weight: 600; color: #333; letter-spacing: 0; }
    .support-page .support-faq .space-y-4 > div {
        border: 1px solid #d9d9d9;
        border-radius: 9px;
        background: white;
        box-shadow: none;
        transform: none;
    }
    .support-page .support-faq .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 16px; }
    .support-page .support-faq button[aria-controls^="support-answer-"] { padding: 13px 14px; gap: 12px; min-height: 48px; align-items: center; }
    .support-page .support-faq button > span { min-width: 0; padding: 0; font-size: 14px; line-height: 25px; font-weight: 400; color: #444; overflow-wrap: break-word; }
    .support-page .support-faq button > svg { width: 18px; height: 18px; color: #999; }
    .support-page .support-faq [role="region"] { padding: 0 14px 16px; font-size: 14px; line-height: 24px; overflow-wrap: break-word; }
    .support-page .support-faq [role="region"] > div { padding-top: 12px; }
    .support-page .support-faq button:focus-visible { outline: 2px solid #1a73e8; outline-offset: -3px; }
    .support-page #show-more-container { margin-top: 12px; }
    .support-page #show-more-container button { min-height: 44px; padding: 8px 16px; }

    .support-page footer { padding: 28px 0 32px; border: 0; }
    .support-page footer > div { padding: 0 16px; }
    .support-page .site-footer-main { gap: 24px; margin-bottom: 0; }
    .support-page #footer-logo { height: 30px; }
    .support-page .site-footer-links { gap: 16px 20px; font-size: 13px; line-height: 22px; }
    .support-page .site-footer-links a[href="shop.html"] { display: none; }
    .support-page .site-footer-links a[href="support.html"] { flex-basis: 100%; text-align: center; }
    .support-page .site-footer-social { width: 100%; padding-top: 20px; border-top: 1px solid #272727; justify-content: center; gap: 20px; }
    .support-page .site-footer-social > .group:first-child > .absolute { left: 0; }
    .support-page .site-footer-social > .group:last-child > .absolute { right: 0; }
    .support-page .site-footer-main + div { display: none; }
    .support-page .site-footer-legal { margin-top: 40px; font-size: 12px; line-height: 22px; text-align: center; }
    .support-page .site-footer-policy { flex-wrap: wrap; justify-content: center; gap: 24px 40px; margin-top: 20px; }
    .support-page .site-footer-policy > * { margin: 0; }
    .support-page .site-footer-policy > :not([hidden]) ~ :not([hidden]) { margin: 0; }
    .support-page #icp-info { flex-basis: 100%; }
}

@media (max-width: 359px) {
    .support-page .support-mobile-description[hidden] { font-size: 14px; line-height: 24px; }
    .support-page .site-footer-links { gap: 16px 12px; }
    .support-page .site-footer-social { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .support-page .support-faq button > svg { transition: none; }
}