/* ---------- Home — phone layout: FAQ (design "2b deck": one swipeable question card + an "up next" tab) ----------
 * Markup: components/home/mobile/faq-m.php. The card, tab and sliver are the shared deck (home-mobile-deck.css,
 * script home-mobile.js); this sheet styles the FAQ content on it. White mode lives in home-mobile-light.css.
 */
@media (max-width: 767px) {
    .hmf { display: flex; flex-direction: column; }
    .hmf .hm__glow { top: 90px; width: 560px; height: 560px; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 65%); }

    /* Eyebrow — the five topic renders, overlapping, then the counts */
    .hmf__eyebrow { position: relative; display: flex; align-items: center; gap: 12px; }
    .hmf__stack { display: flex; }
    .hmf__ava {
        width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        background: radial-gradient(circle at 35% 30%, #2a2a2f 0%, #0b0b0d 100%);
        box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    }
    .hmf__ava + .hmf__ava { margin-inline-start: -10px; }
    .hmf__ava img { width: 24px; height: 24px; object-fit: contain; pointer-events: none; }
    .hmf__count { font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }

    .hmf__title { position: relative; margin: 10px 0 0; font-family: var(--hm-display); font-size: 32px; line-height: 1.08; letter-spacing: -0.045em; font-weight: 600; color: #fff; text-wrap: balance; }
    .hmf__title span { color: rgba(255, 255, 255, 0.42); }
    html[dir="rtl"] .hmf__title { letter-spacing: 0; line-height: 1.25; }

    /* Card content */
    .hmf__deck { margin-top: 16px; }
    .hmf .hm-deck__item.is-in .hmf__coin { animation: hmfCoin .8s var(--hm-ease) both, hmFloatA 6s ease-in-out .8s infinite; }
    .hmf__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
    .hmf__tag { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
    .hmf__num { display: flex; align-items: flex-start; gap: 6px; font-family: var(--hm-display); font-size: 56px; line-height: .8; font-weight: 300; letter-spacing: -0.06em; color: #fff; }
    .hmf__num span { padding-top: 4px; font-size: 14px; line-height: 1; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, 0.32); }
    .hmf__coin-wrap { position: relative; flex-shrink: 0; width: 96px; height: 96px; margin-bottom: 6px; }
    .hmf__coin { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.75)); animation: hmFloatA 6s ease-in-out infinite; }
    .hmf__floor { position: absolute; left: 50%; bottom: -10px; width: 92px; height: 12px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%); }

    .hmf__q { margin: 16px 0 0; font-family: var(--hm-display); font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.04em; color: #fff; text-wrap: balance; }
    html[dir="rtl"] .hmf__q { letter-spacing: 0; line-height: 1.45; }
    .hmf__a { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.48); text-wrap: pretty; }
    .hmf__lead { font-weight: 500; color: rgba(255, 255, 255, 0.92); }

    /* Footer line */
    .hmf__foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 8px; margin-top: 10px; font-size: 13.5px; }
    .hmf__foot-q { color: rgba(255, 255, 255, 0.5); }
    .hmf__foot a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: #fff; text-decoration: none; }
    .hmf__foot a i { font-size: 15px; }
    .hmf__foot a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
}
@media (max-width: 360px) {
    .hmf .hm-deck__panel { padding: 18px 16px; }
    .hmf__num { font-size: 48px; }
    .hmf__coin-wrap { width: 84px; height: 84px; }
    .hmf__floor { width: 80px; }
    .hmf__q { font-size: 21px; }
    .hmf__a { font-size: 15px; }
}
@keyframes hmfCoin { from { opacity: 0; scale: .7; rotate: -25deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) {
    .hmf__coin, .hmf .hm-deck__item.is-in .hmf__coin { animation: none !important; }
}