/* Home — phone sections, white mode (monochrome).
 * The .hm sections (pulse, why, how-it-works, reviews, FAQ) hard-code white-on-black; this
 * re-colours them with the light theme tokens. White page, black content: text, icons, numbers,
 * buttons, chips and nodes are black; coins keep their black finish. Load last on the home page. */
@media (max-width: 767px) {
    html[data-theme="light"] {
        --hml-ink-a: rgba(0, 0, 0, 0.4);
        --hml-ink-b: rgba(0, 0, 0, 0.22);
        --hml-panel: radial-gradient(ellipse 90% 70% at 30% 0%, oklch(98.6% 0.003 80) 0%, var(--theme-surface) 60%, var(--theme-surface-2) 100%);
        --hml-frame: linear-gradient(180deg, var(--theme-line-strong) 0%, var(--theme-line) 50%, var(--theme-line) 100%);
        /* coins keep their original black finish — just a lighter shadow for the white page */
        --hml-coin: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.35));
    }

    html[data-theme="light"] body.home-bw-theme :is(.mp, .hw2, .hx-hiw, .hx-rev, .hx-faq) { background: var(--theme-paper) !important; }
    /* home-why-v2.css pins this one black in light mode (same selector, so this later one wins) */
    html[data-theme="light"] body.home-bw-theme .home-why.hw2 {
        color: var(--theme-ink) !important;
        background: var(--theme-paper) !important;
        border-color: var(--theme-line) !important;
    }

    /* ── Shared primitives ── */
    html[data-theme="light"] .hm { background: var(--theme-paper); color: var(--theme-ink); }
    html[data-theme="light"] .hm__glow { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0) 70%); }
    html[data-theme="light"] .hm__title { color: var(--theme-ink); }
    html[data-theme="light"] :is(.hm__title-dim, .hm__sub, .hm__label, .hm__mono, .hm__mono--caps) { color: var(--theme-muted); }
    html[data-theme="light"] .hm__badge { border-color: var(--theme-ink); background: var(--theme-ink); color: #fff; }
    html[data-theme="light"] .hm__frame { background: var(--hml-frame); }
    html[data-theme="light"] :is(.hm__panel, .hm-deck__panel) { background: var(--hml-panel); }
    html[data-theme="light"] .hmp__coin { filter: var(--hml-coin); }

    /* Pill CTA → black pill, white arrow chip (the dark design inverted) */
    html[data-theme="light"] .hm-cta { background: linear-gradient(180deg, #4a4a4f 0%, var(--theme-ink) 45%, #2c2c30 100%); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22); }
    html[data-theme="light"] .hm-cta__in { background: var(--mono-ink-bg, var(--theme-ink)); }
    html[data-theme="light"] .hm-cta:active .hm-cta__in { background: var(--mono-ink-bg-hover, var(--theme-ink)); }
    html[data-theme="light"] .hm-cta__txt { color: #fff; }
    html[data-theme="light"] .hm-cta__ico { background: var(--theme-surface); color: var(--theme-ink); }

    html[data-theme="light"] :is(.hm-cta, .hmp__sold, .hmo__node, .hmh__tab, .hm-deck__card, .hm-deck__next, .hm-rev__score, .hmf__foot a):focus-visible { outline-color: var(--theme-ink) !important; }

    /* ── Shared deck (Reviews + FAQ) — the card and its "up next" tab turn to paper, the arrow chip goes black ── */
    html[data-theme="light"] .hm-deck__card { background: var(--theme-line-strong); }
    html[data-theme="light"] .hm-deck__panel { box-shadow: none; }
    html[data-theme="light"] .hm-deck__pill { border-color: var(--theme-line); background: var(--theme-surface-2); color: var(--theme-ink); }
    html[data-theme="light"] .hm-deck__next { border-color: var(--theme-line); background: linear-gradient(180deg, var(--theme-surface-2) 0%, var(--theme-surface) 100%); }
    html[data-theme="light"] .hm-deck__next-label { color: var(--theme-muted); }
    html[data-theme="light"] .hm-deck__next-q { color: var(--theme-ink); }
    html[data-theme="light"] :is(.hm-deck__next-ico, .hm-rev__go) { background: var(--mono-ink-bg, var(--theme-ink)); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22); color: #fff; }
    html[data-theme="light"] .hm-deck__bar { background: var(--hml-ink-a); }
    html[data-theme="light"] .hm-deck__sliver { border-color: var(--theme-line); background: var(--theme-surface-2); }

    /* ── Reviews ── */
    html[data-theme="light"] .hm-rev .hm__glow { background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 65%); }
    html[data-theme="light"] :is(.hm-rev__title, .hm-rev__avg, .hm-rev__stars, .hm-rev__text, .hm-rev__name) { color: var(--theme-ink); }
    html[data-theme="light"] :is(.hm-rev__title span, .hm-rev__lead, .hm-rev__all, .hm-rev__date) { color: var(--theme-muted); }
    html[data-theme="light"] :is(.hm-rev__avg span, .hm-rev__stars .is-off, .hm-rev__mark) { color: var(--hml-ink-a); }
    html[data-theme="light"] .hm-rev__score { border-color: var(--theme-line); background: var(--hml-panel); box-shadow: none; }
    html[data-theme="light"] .hm-rev__rule { background: var(--theme-line); }
    html[data-theme="light"] .hm-rev__floor { background: radial-gradient(ellipse, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0) 70%); }
    html[data-theme="light"] .hm-rev__by { border-top-color: var(--theme-line); }
    html[data-theme="light"] .hm-rev__avatar { background: var(--theme-ink); color: #fff; }

    /* ── Live Market Pulse ── */
    html[data-theme="light"] .hmp__live { border-color: var(--theme-ink); background: var(--theme-ink); color: #fff; }
    html[data-theme="light"] .hmp__dot,
    html[data-theme="light"] .hmp__dot::after { background: #fff; }
    html[data-theme="light"] :is(.hmp__title, .hmp__vol, .hmp__sold-t, .hmp__sold-go, .hmp__stars) { color: var(--theme-ink); }
    html[data-theme="light"] :is(.hmp__title span, .hmp__intro, .hmp__label, .hmp__axis, .hmp__sold-all, .hmp__chev) { color: var(--theme-muted); }
    html[data-theme="light"] :is(.hmp__chg, .hmp__tip) { background: var(--theme-ink); color: #fff; }
    html[data-theme="light"] .hmp__tip span { color: rgba(255, 255, 255, 0.6); }
    html[data-theme="light"] .hmp__tip { box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.35); }
    html[data-theme="light"] .hmp__grid { border-top-color: var(--hml-ink-b); }
    html[data-theme="light"] .hmp__bar { background: linear-gradient(180deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.07) 100%); }
    html[data-theme="light"] .hmp__bar.is-now { background: linear-gradient(180deg, var(--theme-ink) 0%, #4a4a50 100%); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
    html[data-theme="light"] .hmp__sold { border-color: var(--theme-line); background: var(--hml-panel); box-shadow: none; }
    html[data-theme="light"] .hmp__sold-n { background-image: linear-gradient(180deg, #000 0%, var(--theme-ink) 60%, #4a4a50 100%); }
    html[data-theme="light"] .hmp__sold-cta { border-top-color: var(--theme-line); background: var(--theme-surface-2); }
    html[data-theme="light"] .hmp__pl { color: #fff; background: var(--mono-ink-bg, var(--theme-ink)); box-shadow: 0 0 0 2px var(--theme-surface); }

    /* ── Why choose us (rings + dial) ── */
    html[data-theme="light"] .hmo .hm__glow { background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 65%); }
    html[data-theme="light"] :is(.hmo__title, .hmo__item-title, .hmo__lead) { color: var(--theme-ink); }
    html[data-theme="light"] :is(.hmo__title span, .hmo__item-line) { color: var(--theme-muted); }
    /* rings and arc: dark lines on the white page; the travelling light turns ink */
    html[data-theme="light"] .hmo__ring--outer { border-color: rgba(0, 0, 0, 0.18); background: radial-gradient(circle, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 70%); }
    html[data-theme="light"] :is(.hmo__ring--dash, .hmo__arc) { border-color: rgba(0, 0, 0, 0.3); }
    html[data-theme="light"] .hmo__dot { background: var(--theme-ink); box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.3); }
    html[data-theme="light"] .hmo__spark { background: radial-gradient(ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 70%); }
    html[data-theme="light"] .hmo__floor { background: radial-gradient(ellipse, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 70%); }
    /* dial discs stay black like the other phone chips, so the white renders read */
    html[data-theme="light"] .hmo__disc { border-color: var(--theme-ink); background: var(--mono-ink-bg, var(--theme-ink)); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); }
    html[data-theme="light"] .hmo__node.is-active .hmo__disc { border-color: var(--theme-ink); background: var(--theme-ink); box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1), 0 12px 26px rgba(0, 0, 0, 0.35); }
    html[data-theme="light"] .hmo__prog circle { stroke: var(--theme-ink); }
    html[data-theme="light"] .hmo__node:focus-visible .hmo__disc { outline-color: var(--theme-ink); }

    /* ── How it works ── */
    html[data-theme="light"] .hmh .hm__glow { background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 65%); }
    html[data-theme="light"] :is(.hmh__title, .hmh__count, .hmh__step-title, .hmh__pill, .hmh__tab) { color: var(--theme-ink); }
    html[data-theme="light"] :is(.hmh__title span, .hmh__step-desc, .hmh__pill i) { color: var(--theme-muted); }
    html[data-theme="light"] .hmh__of { color: var(--hml-ink-a); }
    html[data-theme="light"] .hmh__num { background-image: linear-gradient(180deg, #000 0%, var(--theme-ink) 60%, #2a2a2e 100%); }
    html[data-theme="light"] .hmh__pill { border-color: var(--theme-line); background: var(--theme-surface-2); }
    /* step cards: paper, the active one lifted with the panel gradient and a stronger edge */
    html[data-theme="light"] .hmh__tab { border-color: var(--theme-line); background: var(--theme-surface); }
    html[data-theme="light"] .hmh__tab.is-active { border-color: var(--theme-line-strong); background: var(--hml-panel); }
    html[data-theme="light"] .hmh__tab.is-active .hmh__tab-art { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25)); }
    html[data-theme="light"] .hmh__tab-check { background: rgba(0, 0, 0, 0.08); color: var(--theme-ink); }
    html[data-theme="light"] :is(.hmh__tab-name, .hmh__tab-no) { color: var(--hml-ink-a); }
    html[data-theme="light"] .hmh__tab.is-done .hmh__tab-name { color: rgba(0, 0, 0, 0.65); }
    html[data-theme="light"] .hmh__tab.is-active .hmh__tab-name { color: var(--theme-ink); }
    html[data-theme="light"] .hmh__tab.is-active .hmh__bar { background: var(--hml-ink-b); }
    html[data-theme="light"] .hmh__bar::after { background: var(--theme-ink); }

    /* ── FAQ — topic avatars stay black like the orbit nodes; the deck itself is styled above ── */
    html[data-theme="light"] .hmf .hm__glow { background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 65%); }
    html[data-theme="light"] .hmf__ava { background: var(--mono-ink-bg, var(--theme-ink)); box-shadow: 0 0 0 2px var(--theme-paper), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
    html[data-theme="light"] :is(.hmf__title, .hmf__q, .hmf__num, .hmf__lead, .hmf__foot a) { color: var(--theme-ink); }
    html[data-theme="light"] :is(.hmf__count, .hmf__title span, .hmf__a, .hmf__foot-q) { color: var(--theme-muted); }
    html[data-theme="light"] .hmf__num span { color: var(--hml-ink-a); }
    html[data-theme="light"] .hmf__floor { background: radial-gradient(ellipse, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0) 70%); }
}