/* ---------- Home — phone "deck" primitive (FAQ + Reviews) ----------
 * One card at a time on a stack: the card follows the finger and tilts (--dx, set by home-mobile.js), an "up next"
 * tab is tucked under its bottom edge (with an optional autoplay progress bar), and a thin sliver below reads as
 * the rest of the deck. Section-specific content styles live with each section; white mode in home-mobile-light.css.
 */
@media (max-width: 767px) {
    .hm-deck { position: relative; isolation: isolate; display: flex; flex-direction: column; }
    .hm-deck__card {
        position: relative; z-index: 2; display: flex; border-radius: 28px; padding: 1px; background: rgba(255, 255, 255, 0.1);
        touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
        transform: translateX(calc(var(--dx, 0) * 1px)) rotate(calc(var(--dx, 0) * .025deg)); transition: transform .45s var(--hm-ease);
    }
    .hm-deck__card.is-drag { cursor: grabbing; transition: none; }
    .hm-deck__card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    .hm-deck__panel { flex: 1; border-radius: 27px; overflow: hidden; padding: 20px; background: linear-gradient(180deg, #121214 0%, #0d0d0f 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
    .hm-deck__items { display: grid; align-items: start; }
    .hm-deck__item { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; }
    .hm-deck__item.is-active { visibility: visible; opacity: 1; }
    .hm-deck__item.is-in { animation: hmIn .6s var(--hm-ease) both; }

    .hm-deck__pill {
        display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 13px; border-radius: 999px;
        background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
        font-family: var(--hm-display); font-size: 12.5px; font-weight: 500; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.88);
    }
    html[dir="rtl"] .hm-deck__pill { letter-spacing: 0; }

    /* "Up next" tab under the card */
    .hm-deck__next {
        position: relative; z-index: 1; overflow: hidden; margin: -26px 12px 0; padding: 38px 12px 12px; padding-inline-start: 16px;
        display: flex; align-items: center; gap: 12px; border-radius: 0 0 22px 22px; border: 1px solid rgba(255, 255, 255, 0.09); border-top: 0;
        background: linear-gradient(180deg, #0e0e10 0%, #0a0a0b 100%); font: inherit; color: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .hm-deck__next:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    .hm-deck__next-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
    .hm-deck__next-label { font-family: var(--hm-display); font-size: 11.5px; font-weight: 500; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.45); }
    .hm-deck__next-q { font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hm-deck__next-ico {
        flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        background: linear-gradient(180deg, #ffffff 0%, #d6d6dc 100%); box-shadow: 0 6px 16px rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.14);
        color: #0a0a0a; font-size: 11px; transition: scale .2s ease;
    }
    .hm-deck__next:active .hm-deck__next-ico { scale: .9; }
    /* time left until the next autoplay step */
    .hm-deck__bar { position: absolute; inset-inline-start: 0; bottom: 0; width: 0; height: 2px; background: rgba(255, 255, 255, 0.35); pointer-events: none; }
    .hm-deck__bar.is-run { animation: hmDeckBar var(--hm-deck-t, 4800ms) linear forwards; }
    .hm-deck__sliver { position: relative; z-index: 0; display: block; height: 10px; margin: 0 28px; border: 1px solid rgba(255, 255, 255, 0.05); border-top: 0; border-radius: 0 0 18px 18px; background: #070708; }
}
@keyframes hmDeckBar { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .hm-deck__card, .hm-deck__next-ico { transition: none !important; }
    .hm-deck__item.is-in { animation: none !important; }
    .hm-deck__bar { display: none; }
}