/*
 * Homepage v2 (design/homepage-v2). Its own stylesheet: nothing here is in
 * the Vite build, so there is no compiled-class trap, and every rule is
 * scoped under .hv2 or a .hv2-* class so the shared chrome (comments drawer,
 * profile sheet, Activity panel) keeps its own look.
 *
 * Themes are CSS custom properties keyed on the <html> class written by
 * components/theme-init and the page's toggle: html.dark is dark, anything
 * else is light. Never Tailwind dark:, which follows the OS here.
 */

/* ------------------------------------------------------------ fonts */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/figtree-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/figtree-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/figtree-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/figtree-latin-700-normal.woff2') format('woff2'); }
/* Prices (2026-09-29): Figtree ExtraBold with fixed-width digits, not the
   display face, whose quirky numerals slow the one thing read at a glance. */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/figtree-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/geist-mono-latin-600-normal.woff2') format('woff2'); }
/* Metric-matched fallbacks, so the swap to the web font moves nothing. */
@font-face { font-family: 'Figtree Fallback'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); size-adjust: 96%; ascent-override: 99%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Fallback'; src: local('Arial Bold'), local('Arial'), local('Liberation Sans'); size-adjust: 102%; ascent-override: 91%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: 'Geist Mono Fallback'; src: local('Courier New'), local('Liberation Mono'); size-adjust: 100%; ascent-override: 100%; descent-override: 29%; line-gap-override: 0%; }

/* ----------------------------------------------------------- tokens */
:root {
    --hv2-font: 'Figtree', 'Figtree Fallback', ui-sans-serif, system-ui, sans-serif;
    --hv2-display: 'Bricolage Grotesque', 'Bricolage Fallback', 'Figtree', ui-sans-serif, sans-serif;
    --hv2-mono: 'Geist Mono', 'Geist Mono Fallback', ui-monospace, monospace;
    --hv2-ease: cubic-bezier(.2, .8, .2, 1);

    /* Light: designed light, not the dark theme inverted (owner, 2026-09-27,
       "harder to look at than amazon.com"). White page and cards, one soft
       hairline, no shadows, neutral vote pills and code boxes, and colour kept
       for the few things that need it: the price, the heat number, the CTA.
       2026-09-27 ("plain, boring, sharp on the eyes at night"): warm paper
       instead of stark white, ink text at ~15:1 instead of ~19:1, heat pills
       tinted by temperature again, a warm code chip, soft warm shadows and a
       hero glow. Every text colour
       is at least 4.5:1 on the surface it sits on; the accents are darker
       than the dark theme's so they read on a pale ground. */
    --bg: #F4F1EC;
    --bg-raised: #F7F4EF;
    --bg-sunken: #EFEBE4;
    --surface: #FFFDF9;
    --surface-inset: #FAF7F2;
    --surface-2: #F2EEE7;
    --border: #E6E0D6;
    --border-strong: #D6CEC1;
    --divider: #EDE7DD;
    --text: #1E2430;
    --text-muted: #555C68;
    --text-faint: #666C77;
    --cta: #2566C9;
    --cta-hover: #1E58B0;
    --cta-text: #FFFFFF;
    --price: #0B7A3E;
    --pct-bg: #EAF5EE;
    --pct-text: #0A6634;
    --brand: #E8650A;
    --code: #A5480A;
    --code-border: rgba(232, 101, 10, .38);
    --code-bg: #FFF6EE;
    --code-btn: #FDE8D6;
    --gold: #8A6100;
    --gold-fill: #F5C451;
    --gold-ink: #1A1305;
    --gold-soft: rgba(245, 196, 81, .16);
    --gold-edge: rgba(176, 124, 0, .40);
    --ok: #116B37;
    --ok-soft: rgba(17, 107, 55, .08);
    --ok-edge: rgba(17, 107, 55, .30);
    --heat-hot: #BA3115;
    --heat-warm: #A04A00;
    --heat-mild: #8C6400;
    --heat-hot-bg: #FDECE7;
    --heat-warm-bg: #FDF0E3;
    --heat-mild-bg: #FBF3E1;
    --heat-hot-edge: rgba(186, 49, 21, .30);
    --heat-warm-edge: rgba(160, 74, 0, .26);
    --heat-mild-edge: rgba(140, 100, 0, .24);
    --vote-down: #2F63C8;
    --admin-edit: #2F63C8;
    --admin-expire: #B83232;
    --admin-confirm: #0E7F5A;
    --danger: #B42323;
    --tab-active: #FFFDF9;
    --tab-active-shadow: 0 1px 2px rgba(20, 25, 34, .10), 0 0 0 1px rgba(20, 25, 34, .06);
    --disclosure-bg: #EFEBE4;
    --overlay-chip: rgba(255, 253, 249, .94);
    --notice-bg: #FFF6E5;
    --notice-text: #7A4B00;
    --shadow: 0 1px 2px rgba(60, 40, 20, .05), 0 8px 20px -10px rgba(60, 40, 20, .14);
    --shadow-lift: 0 2px 4px rgba(60, 40, 20, .06), 0 16px 32px -12px rgba(60, 40, 20, .22);
    /* A faint warm glow behind the hero, so the page is not grey on grey. */
    --hero-glow: radial-gradient(900px 340px at 50% -8%, rgba(255, 122, 26, .10), transparent 70%);
    --focus: #2566C9;
    --admin-bar-bg: #1C222D;
    --admin-bar-text: #C9D0DB;
    color-scheme: light;
}

html.dark {
    --bg: #0A0D13;
    --bg-raised: #0C1017;
    --bg-sunken: #06080C;
    --surface: #141A26;
    --surface-inset: #10151F;
    --surface-2: #1C2433;
    --border: #252E40;
    --border-strong: #2C3547;
    --divider: #1A2130;
    --text: #E9EDF4;
    --text-muted: #A7B0C0;
    --text-faint: #8A94A7;
    --cta: #2F74DB;
    --cta-hover: #3B80E6;
    --cta-text: #FFFFFF;
    --price: #5BE38E;
    --pct-bg: #5BE38E;
    --pct-text: #062612;
    --brand: #FF7A1A;
    --code: #FFB070;
    --code-border: rgba(255, 122, 26, .55);
    --code-bg: rgba(255, 122, 26, .06);
    --code-btn: rgba(255, 122, 26, .16);
    --gold: #F5C451;
    --gold-fill: #F5C451;
    --gold-ink: #1A1305;
    --gold-soft: rgba(245, 196, 81, .08);
    --gold-edge: rgba(245, 196, 81, .35);
    --ok: #4ADE80;
    --ok-soft: rgba(74, 222, 128, .10);
    --ok-edge: rgba(74, 222, 128, .30);
    --heat-hot: #FF5436;
    --heat-warm: #FF8A1F;
    --heat-mild: #F5B43C;
    --heat-hot-bg: rgba(255, 84, 54, .12);
    --heat-warm-bg: rgba(255, 138, 31, .10);
    --heat-mild-bg: rgba(245, 180, 60, .08);
    --heat-hot-edge: rgba(255, 84, 54, .45);
    --heat-warm-edge: rgba(255, 138, 31, .40);
    --heat-mild-edge: rgba(245, 180, 60, .32);
    --vote-down: #8FB8FF;
    --admin-edit: #6B9BFF;
    --admin-expire: #F07A7A;
    --admin-confirm: #4FD1A0;
    --danger: #F87171;
    --tab-active: #232B3B;
    --tab-active-shadow: none;
    --disclosure-bg: #0E121A;
    --overlay-chip: rgba(10, 13, 19, .86);
    --notice-bg: rgba(245, 180, 60, .10);
    --notice-text: #F5C77A;
    /* Depth: a 1px top highlight and a soft drop, so cards sit above the page
       instead of lying flat on it (2026-09-27). */
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 10px 26px -16px rgba(0, 0, 0, .75);
    --shadow-lift: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 34px -14px rgba(0, 0, 0, .8);
    --hero-glow: radial-gradient(900px 340px at 50% -8%, rgba(255, 122, 26, .09), transparent 70%);
    --focus: #8FB8FF;
    --admin-bar-bg: #06080C;
    --admin-bar-text: #A3ACBD;
    color-scheme: dark;
}

/* ------------------------------------------------------------- base */
/* theme-init paints html.dark body with !important; v2 owns its grounds. */
html.dark body, html body { background-color: var(--bg) !important; }
body { color: var(--text); }
.hv2 { font-family: var(--hv2-font); color: var(--text); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; -webkit-font-smoothing: antialiased; }
:where(.hv2) *, :where(.hv2) *::before, :where(.hv2) *::after { box-sizing: border-box; }
:where(.hv2) a { color: inherit; }
:where(.hv2) button { font: inherit; color: inherit; }
.hv2 :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.hv2 img { content-visibility: visible; }
.hv2-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hv2-wrap { width: 100%; max-width: 1248px; margin: 0 auto; padding: 0 24px; }
.hv2-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.hv2-on-light { display: none !important; }
html:not(.dark) .hv2-on-dark { display: none !important; }
html:not(.dark) .hv2-on-light { display: inline-block !important; }
[x-cloak] { display: none !important; }

/* Buttons */
.hv2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid transparent; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; background: transparent; transition: background-color .15s var(--hv2-ease), border-color .15s var(--hv2-ease), color .15s var(--hv2-ease), transform .15s var(--hv2-ease); }
.hv2-btn:active { transform: scale(.98); }
.hv2-btn--cta { background: var(--cta); color: var(--cta-text) !important; }
.hv2-btn--cta:hover { background: var(--cta-hover); }
.hv2-btn--ghost { border-color: var(--border); color: var(--text-muted) !important; }
.hv2-btn--ghost:hover { color: var(--text) !important; border-color: var(--border-strong); }
.hv2-btn--outline { border-color: var(--border); color: var(--text-muted) !important; background: transparent; font-weight: 500; }
.hv2-btn--outline:hover { color: var(--text) !important; border-color: var(--border-strong); }
.hv2-btn--outline[aria-pressed="true"] { color: var(--text) !important; background: var(--surface-2); }
.hv2-iconbtn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer; transition: color .15s var(--hv2-ease), border-color .15s var(--hv2-ease); }
.hv2-iconbtn:hover { color: var(--text); border-color: var(--border-strong); }
.hv2-theme-moon { display: none; }
html:not(.dark) .hv2-theme-sun { display: none; }
html:not(.dark) .hv2-theme-moon { display: block; }

/* Toasts */
.hv2-toasts { position: fixed; right: 16px; top: 16px; z-index: 70; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.hv2-toast { padding: 10px 14px; border-radius: 12px; background: #141922; color: #F3F5F9; font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); max-width: calc(100vw - 32px); }
html.dark .hv2-toast { background: #F3F5F9; color: #0A0D13; }

/* -------------------------------------------------------- admin bar */
.hv2-adminbar { background: var(--admin-bar-bg); border-bottom: 1px solid var(--divider); font-size: 13px; color: var(--admin-bar-text); }
html:not(.dark) .hv2-adminbar { border-bottom-color: #10141B; }
.hv2-adminbar__in { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px; }
.hv2-adminbar__links { display: flex; align-items: center; gap: 20px; min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.hv2-adminbar__links::-webkit-scrollbar { display: none; }
.hv2-adminbar__links a { color: var(--admin-bar-text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hv2-adminbar__links a:hover { color: #F3F5F9; }
.hv2-adminbar__title { font-weight: 600; color: #F3F5F9 !important; }
.hv2-adminbar__count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: #D63638; }
.hv2-adminbar__count.is-amber { background: #B7860F; }
.hv2-adminbar__status { display: inline-flex; align-items: center; gap: 6px; color: #4ADE80; white-space: nowrap; }
.hv2-adminbar__status .hv2-dot { background: #4ADE80; }
.hv2-adminbar__status.is-alert { color: #FF8085; }
.hv2-adminbar__status.is-alert .hv2-dot { background: #FF5A5F; }
.hv2-adminbar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hv2-adminbar__btn { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; border: 1px solid #2C3547; background: transparent; color: var(--admin-bar-text) !important; font-size: 13px; cursor: pointer; white-space: nowrap; }
.hv2-adminbar__btn:hover { color: #F3F5F9 !important; }
.hv2-adminbar__btn.is-primary { background: #F3F5F9; border: 0; color: #0A0D13 !important; font-weight: 600; }

/* ------------------------------------------------------- disclosure */
.hv2-disclosure.is-pinned { position: sticky; top: 0; z-index: 60; }
.hv2-disclosure { min-height: 34px; padding: 8px 16px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--disclosure-bg); border-bottom: 1px solid var(--divider); color: var(--text-muted); font-size: 12.5px; line-height: 1.4; }

/* ----------------------------------------------------------- header */
.hv2-header { border-bottom: 1px solid var(--divider); background: var(--bg); position: relative; z-index: 45; }
.hv2-header__in { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hv2-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.hv2-logo__img { height: 40px; width: auto; }
.hv2-header__tools { display: flex; align-items: center; gap: 8px; }
/* The Activity heart is components/notification-bell as-is; only its
   trigger is restyled to sit in this row. */
.hv2-header__bell > .relative > button[aria-haspopup] { width: 40px !important; height: 40px !important; border: 1px solid var(--border) !important; border-radius: 10px !important; color: var(--text-muted) !important; background: transparent !important; }
.hv2-header__bell > .relative > button[aria-haspopup]:hover { color: var(--text) !important; border-color: var(--border-strong) !important; }
.hv2-header__bell > .relative > button[aria-haspopup] svg { width: 18px; height: 18px; }
.hv2-header__bell > .relative > button.heart-unread svg { color: var(--heat-hot) !important; }
/* A guest's heart is a <button>/<a> of its own; let it match. */
.hv2-header__bell > .relative > a, .hv2-header__bell > .relative > button:not([aria-label="Activity"]) { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; }
.hv2-aura { height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--gold-edge); background: var(--gold-soft); border-radius: 10px; color: var(--gold) !important; text-decoration: none; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; transition: border-color .15s var(--hv2-ease); }
.hv2-aura:hover { border-color: var(--gold); }
.hv2-aura__short { display: none; }
.hv2-aura__tag { font-size: 10.5px; letter-spacing: .08em; padding: 2px 6px; border-radius: 5px; background: var(--gold-fill); color: var(--gold-ink); text-transform: uppercase; }
.hv2-aura.is-guest { font-weight: 600; }
.hv2-account { position: relative; }
.hv2-account__btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--code); font-size: 14px; font-weight: 700; cursor: pointer; overflow: hidden; padding: 0; }
.hv2-account__btn img { width: 100%; height: 100%; object-fit: cover; }
.hv2-account__btn--guest { display: none; color: var(--text-muted); }
.hv2-account__guest { display: flex; gap: 8px; }
.hv2-menu-scrim { display: none; }
.hv2-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lift); z-index: 60; }
.hv2-menu__who { padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--divider); margin-bottom: 4px; min-width: 0; }
.hv2-menu__who strong { font-size: 14px; }
.hv2-menu__who span { font-size: 12.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv2-menu__item { width: 100%; min-height: 44px; padding: 0 10px; display: flex; align-items: center; gap: 10px; border-radius: 9px; background: transparent; border: 0; text-align: left; color: var(--text) !important; text-decoration: none; font-size: 14px; font-weight: 500; cursor: pointer; }
.hv2-menu__item:hover { background: var(--surface-2); }
.hv2-menu__item svg { color: var(--text-faint); }
.hv2-menu__item.is-cta { background: var(--cta); color: var(--cta-text) !important; justify-content: center; font-weight: 600; margin-bottom: 4px; }
.hv2-menu__item.is-danger { color: var(--danger) !important; }
.hv2-menu__meta { margin-left: auto; color: var(--gold); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.hv2-menu__section { border-top: 1px solid var(--divider); margin-top: 4px; padding-top: 4px; }
.hv2-menu__label { margin: 6px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.hv2-menu__row { display: flex; gap: 8px; padding: 4px 10px 8px; }
.hv2-menu__chip { flex: 1; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--surface-2); text-decoration: none; font-size: 17px; }
.hv2-only-sm { display: none; }
.hv2-t-enter, .hv2-t-leave { transition: opacity .2s var(--hv2-ease), transform .2s var(--hv2-ease); }
.hv2-t-from { opacity: 0; transform: translateY(-4px); }
.hv2-t-to { opacity: 1; transform: none; }

/* ------------------------------------------------------------- hero */
.hv2-hero { background: var(--hero-glow), var(--bg-raised); border-bottom: 1px solid var(--divider); position: relative; z-index: 40; }
.hv2-hero__in { padding-top: 64px; padding-bottom: 52px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hv2-online { margin: 0 0 20px; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hv2-online[hidden] { display: none; }
.hv2-hero__title { margin: 0; font-family: var(--hv2-display); font-size: 54px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.hv2-hero__sub { margin: 16px 0 0; font-size: 18px; color: var(--text-muted); }
.hv2-search { margin-top: 32px; width: 100%; max-width: 680px; }
/* x-search-bar, dressed as the design's search box. Its own behaviour (the
   suggestions, the phone overlay) is untouched. */
.hv2-search > div { height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 6px 0 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; transition: border-color .15s var(--hv2-ease), box-shadow .15s var(--hv2-ease); box-shadow: var(--shadow); }
.hv2-search > div:focus-within { border-color: var(--cta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cta) 18%, transparent); }
.hv2-search .df-search-field { flex: 1; min-width: 0; height: 100%; padding: 0; background: none !important; box-shadow: none !important; border-radius: 0; animation: none !important; }
.hv2-search .df-search-input { height: 100%; background: transparent !important; color: var(--text) !important; padding: 0 36px 0 52px; border-radius: 0; font-family: var(--hv2-font); }
.hv2-search .df-search-input::placeholder { color: var(--text-faint); opacity: 1; }
.hv2-search .df-search-ic { left: 20px !important; color: var(--text-muted) !important; }
.hv2-search .df-search-spark { display: none !important; }
.hv2-search .df-search-submit { height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--cta); color: var(--cta-text); font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; transition: background-color .15s var(--hv2-ease), transform .15s var(--hv2-ease); }
.hv2-search .df-search-submit:hover { background: var(--cta-hover); }
.hv2-search .df-search-submit:active { transform: scale(.98); }
.hv2-search .df-search-submit-ic { width: 19px; height: 19px; display: none; }
.hv2-hero__meta { margin-top: 20px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 20px; }
.hv2-promo-pill { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--ok-soft); border: 1px solid var(--ok-edge); color: var(--ok) !important; text-decoration: none; font-size: 14px; font-weight: 600; transition: background-color .15s var(--hv2-ease); }
.hv2-promo-pill:hover { background: color-mix(in srgb, var(--ok) 16%, transparent); }
.hv2-hero__counts { font-size: 14px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- toolbar */
.hv2-toolbar { border-bottom: 1px solid var(--divider); scroll-margin-top: 0; }
.hv2-toolbar__in { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 860px; }
.hv2-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.hv2-tab { height: 38px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted) !important; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; transition: background-color .15s var(--hv2-ease), color .15s var(--hv2-ease); }
.hv2-tab:hover { color: var(--text) !important; }
.hv2-tab.is-active { background: var(--tab-active); color: var(--text) !important; font-weight: 600; box-shadow: var(--tab-active-shadow); }
.hv2-tab__hot { display: none; color: var(--brand); }
.hv2-tab.is-active .hv2-tab__hot { display: block; }
.hv2-toolbar__right { display: flex; align-items: center; gap: 12px; }
.hv2-toolbar__count { font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hv2-toolbar__count-sm { display: none; }
.hv2-viewtoggle { display: flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.hv2-viewtoggle__btn { width: 38px; height: 34px; border: 0; border-radius: 7px; background: transparent; color: var(--text-faint); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s var(--hv2-ease), color .15s var(--hv2-ease); }
.hv2-viewtoggle__btn:hover { color: var(--text); }
.hv2-viewtoggle__btn.is-active { background: var(--tab-active); color: var(--text); box-shadow: var(--tab-active-shadow); }

/* ------------------------------------------------------------- feed */
.hv2-feedwrap { flex: 1; }
.hv2-feedwrap__in { width: 100%; max-width: 860px; margin: 0 auto; padding: 28px 24px 80px; }
.hv2-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; transition: opacity .15s var(--hv2-ease); }
.hv2-feed.is-fading { opacity: 0; }
.hv2-feed.is-rows { grid-template-columns: minmax(0, 1fr); gap: 12px; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* The deal: one DOM, three layouts. Base = desktop card. */
.hv2-deal { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); scroll-margin-top: 16px; transition: transform .15s var(--hv2-ease), box-shadow .15s var(--hv2-ease), border-color .15s var(--hv2-ease); }
@media (hover: hover) and (pointer: fine) {
    .hv2-deal:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
}
.hv2-deal.is-expired { opacity: .6; }
.hv2-deal.is-expired .hv2-deal__img img { filter: grayscale(1); }
.hv2-deal.is-expired .hv2-price { text-decoration: line-through; }
.hv2-deal__top { display: block; }
.hv2-deal__media { display: flex; flex-direction: column; }
.hv2-deal__img { position: relative; display: block; height: 230px; background: #FFFFFF; }
.hv2-deal__img img { width: 100%; height: 100%; object-fit: contain; padding: 18px; display: block; content-visibility: visible; }
.hv2-deal__stamp { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.hv2-deal__stamp svg { color: var(--ok); flex-shrink: 0; }
.hv2-deal__stamp.is-overlay { position: absolute; top: 12px; left: 12px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--overlay-chip); color: #F3F5F9; font-size: 12.5px; font-weight: 600; }
.hv2-deal__stamp.is-overlay svg { color: #4ADE80; }
.hv2-deal__stamp.is-inline { display: none; }
.hv2-deal__expired { position: absolute; top: 12px; right: 12px; height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 8px; background: rgba(220, 38, 38, .92); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hv2-pct { height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 6px; background: var(--pct-bg); color: var(--pct-text); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hv2-pct.is-overlay { display: none; }
.hv2-deal__media .hv2-vote { margin: 12px 14px 0; }
.hv2-deal__main { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 0; min-width: 0; }
.hv2-deal__title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hv2-deal__title a { text-decoration: none; }
.hv2-deal__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hv2-deal__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hv2-chip { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; background: var(--surface-2); color: var(--text-muted); font-size: 11.5px; font-weight: 600; }
.hv2-chip.is-gem { color: #7C4DDB; background: rgba(124, 77, 219, .10); cursor: help; }
html:not(.dark) .hv2-deal__img { border-bottom: 1px solid var(--divider); }
html:not(.dark) .hv2-feed.is-rows .hv2-deal__img { border: 1px solid var(--divider); }
.hv2-chip.is-resale { height: 26px; padding: 0 10px; font-size: 12.5px; color: #5B3DB8; background: rgba(110, 76, 220, .12); border: 1px solid rgba(110, 76, 220, .35); font-weight: 700; gap: 5px; }
html.dark .hv2-chip.is-resale { color: #C9B8FF; background: rgba(150, 120, 255, .16); border-color: rgba(150, 120, 255, .45); }
.hv2-cta--inline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; }
html.dark .hv2-chip.is-gem { color: #C4B0FF; background: rgba(160, 120, 255, .14); }
/* App exclusive, shown only to staff (components/staff-app-exclusive-tag). */
.hv2-chip.is-app { color: #A1480A; background: rgba(249, 115, 22, .12); border: 1px dashed rgba(249, 115, 22, .55); cursor: help; gap: 5px; }
html.dark .hv2-chip.is-app { color: #FDBA74; background: rgba(249, 115, 22, .16); border-color: rgba(249, 115, 22, .55); }
.hv2-deal__price { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.hv2-price { font-family: var(--hv2-font); font-size: 36px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--price); font-variant-numeric: tabular-nums; }
.hv2-was { font-size: 15px; color: var(--text-faint); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.hv2-listprice { height: 26px; padding: 0 8px; border: 1px dashed var(--border-strong); border-radius: 6px; background: transparent; color: var(--text-faint); font-size: 12px; cursor: pointer; }
.hv2-listprice:hover { color: var(--text); }
.hv2-listprice__busy { font-size: 12px; color: var(--text-faint); }
.hv2-cta { height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; background: var(--cta); color: var(--cta-text) !important; font-weight: 700; font-size: 15px; border-radius: 12px; text-decoration: none; white-space: nowrap; transition: background-color .15s var(--hv2-ease), transform .15s var(--hv2-ease); }
.hv2-cta:hover { background: var(--cta-hover); }
.hv2-cta:active { transform: scale(.98); }
.hv2-cta--inline { display: none; }

/* Code chip, other offers, redemption */
.hv2-deal__extras { display: flex; flex-direction: column; gap: 8px; padding: 10px 18px 0; }
/* Compact code chip under the price (owner call 2026-09-27). ~32px to look
   at, shrink-wrapped rather than full width; Copy keeps a 44px hit area via
   ::before (WCAG 2.5.8 needs 24px; 44px is Apple's and the comfortable one).
   A long code wraps rather than truncating: a cut-off code is a broken code. */
.hv2-code { position: relative; align-self: flex-start; max-width: 100%; min-height: 32px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 2px 3px 2px 10px; border: 1px dashed var(--code-border); border-radius: 8px; background: var(--code-bg); }
.hv2-code__body { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; }
.hv2-code__label { font-size: 12px; color: var(--text-muted); }
.hv2-code__value { font-family: var(--hv2-mono); font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--code); word-break: break-all; }
.hv2-code__amount { font-size: 12.5px; font-weight: 600; color: var(--code); }
.hv2-code__copy { position: relative; height: 26px; min-width: 52px; padding: 0 10px; margin-left: auto; border: 0; border-radius: 6px; background: var(--code-btn); color: var(--code) !important; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .2s var(--hv2-ease), color .2s var(--hv2-ease); flex-shrink: 0; }
@media (max-width: 640px) {
    /* The dashed code style already says what it is; the word "Code" stays
       for screen readers so the chip fits one line in a phone's column. */
    .hv2-code__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .hv2-code { padding-left: 8px; }
}
.hv2-code__copy::before { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
.hv2-code.is-copied .hv2-code__copy { background: var(--ok); color: #fff !important; }
html.dark .hv2-code.is-copied .hv2-code__copy { color: #062612 !important; }
.hv2-deal__offers { display: flex; flex-wrap: wrap; gap: 6px; }
.hv2-offer { min-height: 28px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
.hv2-offer.is-coupon { border-style: dashed; border-color: var(--code-border); color: var(--code); background: var(--code-bg); }
.hv2-offer.is-redeem { cursor: pointer; color: var(--text-muted); }
.hv2-offer.is-redeem:hover { color: var(--text); }
.hv2-offer__chev { transition: transform .2s var(--hv2-ease); }
.hv2-offer.is-redeem[aria-expanded="true"] .hv2-offer__chev { transform: rotate(180deg); }
.hv2-redeem { padding: 10px 12px; border-radius: 10px; background: var(--surface-inset); border: 1px solid var(--border); color: var(--text-muted); font-size: 13px; line-height: 1.5; white-space: pre-line; }
.hv2-tip { position: relative; display: inline-flex; }
.hv2-tip__btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-faint); cursor: pointer; }
.hv2-tip__btn:hover { color: var(--text); }
/* Centred with `translate`, not `transform`: Alpine's fade writes transform
   while it runs, which drew the bubble off to one side and then snapped it
   back (it looked like two tooltips in two places). */
.hv2-tip__bubble { position: absolute; z-index: 20; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; width: max-content; max-width: 260px; padding: 8px 10px; border-radius: 8px; background: #141922; color: #F3F5F9; font-size: 12.5px; font-weight: 500; line-height: 1.45; text-align: left; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
html.dark .hv2-tip__bubble { background: #2A3344; }
.hv2-notice { margin: 10px 18px 0; padding: 8px 12px; display: flex; gap: 6px; align-items: flex-start; border-radius: 10px; background: var(--notice-bg); color: var(--notice-text); font-size: 12.5px; line-height: 1.45; }

/* CTA, comments, report */
.hv2-deal__actions { margin-top: auto; padding: 14px 18px 10px; display: flex; flex-direction: column; gap: 10px; }
.hv2-deal__secondary { display: flex; align-items: center; justify-content: flex-start; gap: 4px; }
/* The comment count and the flag keep their size; the reactions give way. */
.hv2-deal__secondary > .hv2-textbtn { flex-shrink: 0; }
.hv2-deal__time { font-size: 12.5px; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The posting time: the card's top-right corner at every width. On a
   desktop card it is a chip over the image corner (the Expired badge steps
   down beneath it); on a desktop row it is plain text in the row's corner;
   on a phone it ends the card's top line, beside "Confirmed". */
.hv2-deal__topmeta { display: contents; }
.hv2-deal__topmeta .hv2-deal__time { position: absolute; top: 12px; right: 12px; z-index: 2; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 7px; background: var(--overlay-chip); color: var(--text-muted); font-weight: 600; }
.hv2-deal__img .hv2-deal__expired { top: 44px; }
.hv2-feed.is-rows .hv2-deal__topmeta .hv2-deal__time { top: 14px; right: 16px; height: auto; padding: 0; background: none; font-weight: 500; }
.hv2-feed.is-rows .hv2-deal__img .hv2-deal__expired { top: 12px; }
@media (max-width: 640px) {
    .hv2-deal__topmeta, .hv2-feed.is-rows .hv2-deal__topmeta { display: flex; align-items: center; gap: 8px; min-height: 18px; }
    .hv2-deal__topmeta .hv2-deal__time, .hv2-feed.is-rows .hv2-deal__topmeta .hv2-deal__time { position: static; margin-left: auto; height: auto; padding: 0; background: none; font-weight: 500; }
    .hv2-deal__img .hv2-deal__expired, .hv2-feed.is-rows .hv2-deal__img .hv2-deal__expired { top: 6px; }
}
.hv2-textbtn { min-height: 36px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-variant-numeric: tabular-nums; transition: color .15s var(--hv2-ease), background-color .15s var(--hv2-ease); }
.hv2-textbtn:hover { color: var(--text); background: var(--surface-2); }
.hv2-textbtn.is-comments { margin-left: auto; margin-right: 0; }
/* The flag after the comment count: a 44px square target, icon only. */
.hv2-iconbtn { min-width: 40px; justify-content: center; padding: 0; margin-right: -10px; }
.hv2-textbtn.is-report { margin-right: -6px; color: var(--text-faint); }
.hv2-textbtn.is-report:hover { color: var(--danger); }
.hv2-textbtn.is-done { color: var(--ok) !important; cursor: default; }
.hv2-textbtn__short { display: none; }

/* Admin strip */
.hv2-deal__admin { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 18px; border-top: 1px solid var(--border); background: var(--surface-inset); }
.hv2-deal__admin-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text-faint); }
.hv2-deal__admin-meta { font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv2-deal__admin-btns { margin-left: auto; display: flex; gap: 4px; }
.hv2-adminbtn { width: 40px; height: 34px; border: 0; border-radius: 8px; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s var(--hv2-ease); }
.hv2-adminbtn:active { transform: scale(.96); }
.hv2-adminbtn.is-edit { color: var(--admin-edit); }
.hv2-adminbtn.is-expire { color: var(--admin-expire); }
.hv2-adminbtn.is-confirm { color: var(--admin-confirm); }
.hv2-adminbtn:disabled { opacity: .5; cursor: default; }

/* Vote control: up · temperature · down, the temperature always centred. */
.hv2-vote { height: 42px; display: grid; grid-template-columns: minmax(28px, 48px) minmax(max-content, 1fr) minmax(28px, 48px); align-items: center; padding: 2px; border-radius: 12px; border: 1.5px solid var(--heat-edge); background: var(--heat-bg); --heat: var(--heat-mild); --heat-bg: var(--heat-mild-bg); --heat-edge: var(--heat-mild-edge); transition: border-color .25s var(--hv2-ease), background-color .25s var(--hv2-ease); }
.hv2-vote.is-warm { --heat: var(--heat-warm); --heat-bg: var(--heat-warm-bg); --heat-edge: var(--heat-warm-edge); }
.hv2-vote.is-hot { --heat: var(--heat-hot); --heat-bg: var(--heat-hot-bg); --heat-edge: var(--heat-hot-edge); }
.hv2-vote.is-up { border-color: var(--heat); }
.hv2-vote.is-down { border-color: var(--vote-down); }
.hv2-vote__btn { height: 100%; width: 100%; min-height: 35px; border: 0; border-radius: 9px; background: transparent; color: var(--text-faint); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .2s var(--hv2-ease), background-color .15s var(--hv2-ease), transform .15s var(--hv2-ease); }
.hv2-vote__btn:hover { background: color-mix(in srgb, var(--heat) 10%, transparent); }
.hv2-vote__btn:active { transform: scale(.92); }
/* Your vote: the cast arrow's outline arrowhead fills in (same shape). */
.hv2-vote__cast { display: none; }
.hv2-vote.is-up .hv2-vote__btn.is-up .hv2-vote__idle, .hv2-vote.is-down .hv2-vote__btn.is-down .hv2-vote__idle { display: none; }
.hv2-vote.is-up .hv2-vote__btn.is-up .hv2-vote__cast, .hv2-vote.is-down .hv2-vote__btn.is-down .hv2-vote__cast { display: inline; animation: hv2Bump .25s var(--hv2-ease); }
@media (prefers-reduced-motion: reduce) { .hv2-vote__cast { animation: none !important; } }
/* Your vote is the button that is filled, so it reads apart from the bar. */
.hv2-vote.is-up .hv2-vote__btn.is-up { color: var(--heat); }
.hv2-vote.is-down .hv2-vote__btn.is-down { color: var(--vote-down); }
.hv2-vote__temp { text-align: center; white-space: nowrap; padding: 0 3px; font-size: 17px; font-weight: 700; color: var(--heat); font-variant-numeric: tabular-nums; transition: color .25s var(--hv2-ease); background: none; border: 0; }
.hv2-vote__temp > span { display: inline-block; }
.hv2-vote__temp.is-admin { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.hv2-vote__temp .is-bump { animation: hv2Bump .25s var(--hv2-ease); }
@keyframes hv2Bump { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Row view (desktop): image and vote on the left, details in the middle,
   the CTA and two equal buttons on the right. */
.hv2-feed.is-rows .hv2-deal { display: grid; grid-template-columns: 140px minmax(0, 1fr) 216px; grid-template-rows: auto auto auto 1fr auto; grid-template-areas: "media main actions" "media extras actions" "media notice actions" "media fill actions" "admin admin admin"; column-gap: 22px; padding: 16px 16px 0; border-radius: 18px; }
.hv2-feed.is-rows .hv2-deal__top { display: contents; }
.hv2-feed.is-rows .hv2-deal__media { grid-area: media; gap: 8px; padding-bottom: 16px; }
.hv2-feed.is-rows .hv2-deal__img { height: 140px; border-radius: 12px; overflow: hidden; }
.hv2-feed.is-rows .hv2-deal__img img { padding: 10px; }
.hv2-feed.is-rows .hv2-deal__stamp.is-overlay { display: none; }
.hv2-feed.is-rows .hv2-deal__stamp.is-inline { display: inline-flex; }
.hv2-feed.is-rows .hv2-deal__media .hv2-vote { margin: 0; height: 38px; grid-template-columns: minmax(26px, 40px) minmax(max-content, 1fr) minmax(26px, 40px); }
.hv2-feed.is-rows .hv2-vote__btn { min-height: 31px; }
.hv2-feed.is-rows .hv2-vote__temp { font-size: 15px; }
.hv2-feed.is-rows .hv2-deal__main { grid-area: main; padding: 4px 0 0; }
.hv2-feed.is-rows .hv2-deal__title { font-size: 18px; line-height: 25px; }
.hv2-feed.is-rows .hv2-price { font-size: 34px; }
.hv2-feed.is-rows .hv2-deal__extras { grid-area: extras; padding: 10px 0 0; align-items: flex-start; }
.hv2-feed.is-rows .hv2-code { gap: 10px; }
.hv2-feed.is-rows .hv2-code__value { font-size: 14px; }

.hv2-feed.is-rows .hv2-redeem { align-self: stretch; }
.hv2-feed.is-rows .hv2-notice { grid-area: notice; margin: 10px 0 0; }
.hv2-feed.is-rows .hv2-deal__actions { grid-area: actions; align-self: center; margin: 0; padding: 26px 0 16px; gap: 8px; }
/* 26px on top keeps the column clear of the posting time in the row's top-right
   corner: a deal with a lot of reactions makes the column taller, and centred it
   used to climb into the timestamp. */
.hv2-feed.is-rows .hv2-deal__secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hv2-feed.is-rows .hv2-textbtn { min-height: 38px; margin: 0; justify-content: center; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; font-weight: 600; }
.hv2-feed.is-rows .hv2-textbtn__long { display: none; }
.hv2-feed.is-rows .hv2-deal__secondary { display: flex; align-items: center; justify-content: flex-start; }
.hv2-feed.is-rows .hv2-textbtn__short { display: inline; }
.hv2-feed.is-rows .hv2-deal__admin { grid-area: admin; margin: 0 -16px; padding-left: 16px; min-height: 44px; }

/* More / caught up / empty */
.hv2-more { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hv2-btn--more { height: 48px; padding: 0 24px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text) !important; font-size: 15px; }
.hv2-btn--more:hover { border-color: var(--text-faint); }
.hv2-btn--more:disabled { cursor: wait; opacity: .7; }
.hv2-more__note { font-size: 13px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.hv2-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: hv2Spin .8s linear infinite; }
@keyframes hv2Spin { to { transform: rotate(360deg); } }
.hv2-caughtup, .hv2-empty { margin: 40px auto 0; max-width: 420px; text-align: center; }
.hv2-caughtup__title, .hv2-empty__title { margin: 0 0 6px; font-family: var(--hv2-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.hv2-caughtup__text, .hv2-empty__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.hv2-caughtup__apps { margin-top: 16px; display: flex; justify-content: center; gap: 10px; }
.hv2-empty .hv2-btn { margin-top: 16px; }

/* -------------------------------------------------------------- FAQ */
.hv2-faq { border-top: 1px solid var(--divider); background: var(--bg-raised); }
.hv2-faq__in { padding-top: 88px; padding-bottom: 88px; display: flex; gap: 80px; }
.hv2-faq__intro { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.hv2-faq__title { margin: 0; font-family: var(--hv2-display); font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
.hv2-faq__sub { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-muted); }
.hv2-faq__list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hv2-faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color .15s var(--hv2-ease); }
.hv2-faq__item[open] { border-color: var(--border-strong); }
.hv2-faq__item summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 24px; font-size: 16px; font-weight: 500; line-height: 1.35; cursor: pointer; list-style: none; }
.hv2-faq__item summary::-webkit-details-marker { display: none; }
.hv2-faq__item summary:focus-visible { outline-offset: -2px; border-radius: 14px; }
.hv2-faq__icon { position: relative; width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--surface-2); }
.hv2-faq__icon::before, .hv2-faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--text-muted); transition: transform .25s var(--hv2-ease); }
.hv2-faq__icon::after { transform: rotate(90deg); }
.hv2-faq__item[open] .hv2-faq__icon::after { transform: rotate(0deg); }
.hv2-faq__answer { padding: 0 24px 20px; }
.hv2-faq__answer p { margin: 0; padding-top: 14px; border-top: 1px solid var(--divider); font-size: 15px; line-height: 1.6; color: var(--text-muted); white-space: pre-line; }
.hv2-faq__item[open] .hv2-faq__answer { animation: hv2FaqIn .25s var(--hv2-ease); }
@keyframes hv2FaqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@supports (interpolate-size: allow-keywords) {
    .hv2-faq__item { interpolate-size: allow-keywords; }
    .hv2-faq__item::details-content { height: 0; overflow: clip; transition: height .25s var(--hv2-ease), content-visibility .25s allow-discrete; }
    .hv2-faq__item[open]::details-content { height: auto; }
}

/* ----------------------------------------------------------- footer */
.hv2-footer { background: var(--bg-sunken); border-top: 1px solid var(--divider); padding-top: 64px; }
.hv2-footer__in { display: flex; flex-direction: column; gap: 48px; padding-bottom: 32px; }
.hv2-footer__top { display: flex; gap: 48px; }
.hv2-footer__brand { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.hv2-footer__logo img { height: 28px; width: auto; }
.hv2-footer__brand p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.hv2-region { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; }
.hv2-region a { min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 8px; color: var(--text-muted) !important; font-size: 13px; text-decoration: none; }
.hv2-region a:hover { color: var(--text) !important; }
.hv2-region a.is-active { background: var(--tab-active); color: var(--text) !important; font-weight: 600; box-shadow: var(--tab-active-shadow); }
.hv2-footer__cols { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.hv2-footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.hv2-footer__heading { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.hv2-footer__col a { color: var(--text-muted) !important; text-decoration: none; }
.hv2-footer__col a:hover { color: var(--text) !important; }
.hv2-footer__bottom { display: flex; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--divider); font-size: 13px; color: var(--text-faint); }

/* The comments drawer's own keyframes, which the current page declares in
   its page stylesheet rather than the drawer's. */
@keyframes commentFlashIn { 0% { background: rgba(59, 130, 246, .12); } 100% { background: transparent; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ rail */
:root { --rank-1: #9A6B00; --rank-2: #5F6B7D; --rank-3: #A45A22; --ticket-off: #B8C0CC; --ticket-off-text: #7B8494; }
html.dark { --rank-1: #F5C451; --rank-2: #C9D1DE; --rank-3: #E3A06B; --ticket-off: #3A4458; --ticket-off-text: #5C667A; }

/* The page body: feed and rail side by side at 1200px, one column below. */
.hv2-body { max-width: 1248px; margin: 0 auto; padding: 28px 24px 80px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.hv2-body .hv2-feedwrap__in { max-width: none; padding: 0; }
.hv2-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: var(--hv2-rail-top, 16px); }

.hv2-rcard { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; display: flex; flex-direction: column; gap: 16px; }
.hv2-rcard__head { display: flex; align-items: center; justify-content: space-between; }
.hv2-rcard__title { margin: 0; font-family: var(--hv2-display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.hv2-rcard__title.is-lg { font-size: 22px; line-height: 1.15; letter-spacing: -.015em; }
.hv2-rcard__intro { display: flex; flex-direction: column; gap: 6px; }
.hv2-rcard__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.hv2-rcard__link { align-self: center; font-size: 13px; color: var(--text-muted) !important; text-decoration: none; }
.hv2-rcard__link:hover { color: var(--text) !important; }
.hv2-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: var(--text-muted); }
.hv2-eyebrow.is-code { color: var(--code); }
.hv2-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ok); }
.hv2-live__dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }

/* Tier */
.hv2-tier { gap: 20px; }
.hv2-tier__head { display: flex; align-items: center; gap: 18px; }
.hv2-emblem { width: 84px; height: 84px; flex-shrink: 0; border-radius: 50%; padding: 3px; box-sizing: border-box; color: var(--tier);
    background: conic-gradient(from 210deg, var(--tier), color-mix(in srgb, var(--tier) 35%, #fff), color-mix(in srgb, var(--tier) 70%, #000), var(--tier)); }
.hv2-emblem__in { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--tier) 14%, var(--surface)); }
.hv2-emblem__icon { font-size: 36px; line-height: 1; }
.hv2-tier__who { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hv2-tier__name { font-family: var(--hv2-display); font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--gold); }
.hv2-tier__stats { font-size: 14px; color: var(--text-muted); }
.hv2-tier__stats strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.hv2-tier__cta { display: flex; flex-direction: column; gap: 10px; }
.hv2-btn--gold { height: 48px; background: var(--gold-fill); color: var(--gold-ink) !important; font-size: 15px; font-weight: 700; }
.hv2-btn--gold:hover { filter: brightness(1.05); }

/* Draw */
.hv2-draw { padding: 16px; border-radius: 14px; background: var(--surface-inset); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.hv2-draw__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hv2-draw__title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.hv2-draw__days { font-weight: 500; color: var(--text-faint); }
.hv2-draw__count { font-size: 13px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hv2-draw__count.is-on { color: var(--gold); }
.hv2-draw__progress { display: flex; flex-direction: column; gap: 8px; }
.hv2-draw__sub { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hv2-draw__sub strong { color: var(--text); }
.hv2-meter { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.hv2-meter__fill { height: 100%; border-radius: 4px; background: var(--gold-fill); transition: width .25s var(--hv2-ease); }
.hv2-meter__fill.is-done { background: var(--ok); }
.hv2-tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hv2-ticketwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hv2-ticket { max-width: 100%; height: auto; }
.hv2-ticket__body { fill: transparent; stroke: var(--ticket-off); stroke-width: 1.5; stroke-dasharray: 5 4; }
.hv2-ticket__frame { fill: none; stroke: var(--ticket-off); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.hv2-ticket__num { fill: var(--ticket-off-text); font-family: var(--hv2-display); font-size: 28px; font-weight: 800; }
.hv2-ticket.is-on .hv2-ticket__body { fill: var(--gold-fill); stroke: var(--gold-fill); stroke-dasharray: 0; }
.hv2-ticket.is-on .hv2-ticket__frame { stroke: rgba(26, 19, 5, .4); opacity: 1; }
.hv2-ticket.is-on .hv2-ticket__num { fill: var(--gold-ink); }
.hv2-ticket__label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.hv2-ticket__label.is-on { color: var(--text); }
.hv2-ticket__label--link { color: #5865F2 !important; text-decoration: none; }
html.dark .hv2-ticket__label--link { color: #8C95FF !important; }
.hv2-ticket__label--link:hover { text-decoration: underline; }

.hv2-ticket__mini { width: 100%; max-width: 132px; display: flex; flex-direction: column; gap: 4px; }
.hv2-ticket__mini .hv2-meter { height: 5px; }
.hv2-ticket__mini span { font-size: 11.5px; color: var(--text-faint); text-align: center; font-variant-numeric: tabular-nums; }

/* Leaderboard */
.hv2-board { gap: 6px; }
.hv2-board .hv2-rcard__head { margin-bottom: 8px; }
.hv2-board__list { list-style: none; margin: 0; padding: 0; }
.hv2-board__row { height: 44px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--divider); }
.hv2-board__rank { width: 22px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hv2-board__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv2-board__xp { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.hv2-board__xp.is-gold { color: var(--gold); }
.hv2-board__tag { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 3px 6px; border-radius: 5px; color: var(--tag); background: color-mix(in srgb, var(--tag) 14%, transparent); }
.hv2-board__staff { margin-top: 8px; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 12px; background: var(--gold-soft); border: 1px solid var(--gold-edge); }
.hv2-board__stafftag { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--gold); }
.hv2-board__you { color: var(--text-faint); font-weight: 400; }
.hv2-board .hv2-rcard__link { margin-top: 10px; align-self: flex-start; }

/* App */
.hv2-app { gap: 18px; }
.hv2-notif { position: relative; height: 118px; }
.hv2-notif__back { position: absolute; top: 0; left: 16px; right: 16px; height: 64px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); opacity: .6; }
.hv2-notif__front { position: absolute; top: 18px; left: 0; right: 0; display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 16px 32px rgba(15, 23, 42, .12); }
html.dark .hv2-notif__front { background: #202939; border-color: #334057; box-shadow: 0 16px 32px rgba(0, 0, 0, .45); }
.hv2-notif__icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; background: #0A0D13; display: inline-flex; align-items: center; justify-content: center; }
.hv2-notif__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hv2-notif__meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
.hv2-notif__meta span:first-child { font-weight: 600; }
.hv2-notif__title { font-size: 14.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv2-notif__body { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv2-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hv2-store { height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; background: #000; border: 1px solid #3A4458; color: #fff !important; text-decoration: none; transition: transform .15s var(--hv2-ease); }
.hv2-store:active { transform: scale(.98); }
.hv2-store__txt { display: flex; flex-direction: column; line-height: 1.1; }
.hv2-store__small { font-size: 10.5px; color: #C7CDD8; }
.hv2-store__big { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.hv2-app__note { font-size: 12.5px; color: var(--text-faint); text-align: center; }

/* Community */
.hv2-social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hv2-social__tile { padding: 16px; border-radius: 14px; background: var(--surface-inset); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; color: var(--text) !important; text-decoration: none; transition: border-color .15s var(--hv2-ease); min-width: 0; }
.hv2-social__tile:hover { border-color: var(--border-strong); }
.hv2-social__top { display: flex; align-items: center; justify-content: space-between; }
.hv2-social__logo { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.hv2-social__logo.is-x { background: #000; border: 1px solid #3A4458; }
.hv2-social__logo.is-discord { background: #5865F2; }
.hv2-social__arrow { color: var(--text-faint); }
.hv2-social__num { display: flex; flex-direction: column; gap: 2px; }
.hv2-social__num > span:first-child { font-family: var(--hv2-display); font-size: 26px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.hv2-social__lbl { font-size: 13px; color: var(--text-muted); }
.hv2-social__live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }

@media (max-width: 1100px) {
    .hv2-body { grid-template-columns: minmax(0, 1fr); }
    .hv2-rail { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 639px) {
    /* Full-bleed stacked sections, like the cards above them. */
    .hv2-body { padding: 8px 0 32px; gap: 24px; }
    .hv2-rail { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
    .hv2-rcard { border-radius: 0; border-left: 0; border-right: 0; padding: 22px 16px; }
    .hv2-board { padding: 20px 16px; }
    .hv2-emblem { width: 76px; height: 76px; }
    .hv2-tier__name { font-size: 28px; }
    .hv2-rcard__title { font-size: 19px; }
    .hv2-rcard__title.is-lg { font-size: 20px; }
}

/* ------------------------------------------------------ breakpoints */
@media (max-width: 1024px) {
    .hv2-faq__in { gap: 48px; }
    .hv2-faq__intro { width: 260px; }
    .hv2-footer__brand { width: 300px; }
}

@media (max-width: 760px) {
    .hv2-toolbar__in { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
    .hv2-feed.is-rows .hv2-deal { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "media main" "media extras" "media notice" "media fill" "actions actions" "admin admin"; }
    .hv2-feed.is-rows .hv2-deal__img { height: 120px; }
    .hv2-feed.is-rows .hv2-deal__actions { padding-top: 0; }
}

.hv2-deal__info { display: contents; }

/* Phone: full-bleed cards, 16px gutters, 44px targets. */
@media (max-width: 639px) {
    .hv2-wrap { padding: 0 16px; }
    .hv2-hide-sm { display: none; }
    .hv2-only-sm { display: block; }

    .hv2-adminbar__in { height: 44px; padding: 0 16px; }
    .hv2-adminbar__links { gap: 14px; }
    .hv2-adminbar__status-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .hv2-adminbar__btn { height: 32px; padding: 0 10px; }
    .hv2-adminbar__label { display: none; }

    .hv2-disclosure { font-size: 11.5px; padding: 8px 16px; }

    .hv2-header__in { height: 60px; padding: 0 12px 0 16px; }
    .hv2-logo__img { height: 32px; }
    .hv2-header__tools { gap: 4px; }
    .hv2-header__theme { display: none; }
    .hv2-aura { order: 1; height: 36px; padding: 0 10px; font-size: 13px; }
    .hv2-aura__full, .hv2-aura__tag { display: none; }
    .hv2-aura__short { display: inline; }
    .hv2-aura.is-guest { width: 36px; padding: 0; justify-content: center; }
    .hv2-aura.is-guest span { display: none; }
    .hv2-header__bell { order: 2; }
    .hv2-header__bell > .relative > button[aria-haspopup] { width: 44px !important; height: 44px !important; border: 0 !important; }
    .hv2-account { order: 3; }
    .hv2-account__btn { width: 36px; height: 36px; border: 0; font-size: 13px; }
    .hv2-account__guest { display: none; }
    .hv2-account__btn--guest { display: inline-flex; }
    /* The account menu becomes a sheet from the bottom. */
    .hv2-menu-scrim { display: block; position: fixed; inset: 0; background: rgba(6, 8, 12, .5); z-index: 59; }
    .hv2-menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 85vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
    .hv2-t-from { transform: translateY(16px); }

    .hv2-hero__in { padding-top: 28px; padding-bottom: 24px; }
    .hv2-online { height: 28px; font-size: 12.5px; margin-bottom: 14px; }
    .hv2-hero__title { font-size: 34px; line-height: 1.1; }
    .hv2-hero__sub { margin-top: 10px; font-size: 15px; }
    .hv2-search { margin-top: 20px; }
    .hv2-search > div { height: 52px; border-radius: 14px; padding-right: 4px; gap: 8px; }
    .hv2-search .df-search-input { padding: 0 32px 0 44px; }
    .hv2-search .df-search-ic { left: 16px !important; }
    .hv2-search .df-search-submit { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 11px; }
    .hv2-search .df-search-submit-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .hv2-search .df-search-submit-ic { display: block; }
    .hv2-hero__meta { margin-top: 12px; }
    .hv2-hero__counts { display: none; }

    .hv2-toolbar { border-bottom: 0; background: var(--bg); }
    .hv2-toolbar__in { min-height: 0; padding: 12px 16px 8px; flex-direction: column; align-items: stretch; gap: 6px; }
    .hv2-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hv2-tab { height: 40px; padding: 0 8px; }
    .hv2-tab__hot { display: none !important; }
    .hv2-toolbar__right { justify-content: space-between; gap: 8px; }
    .hv2-toolbar__count { display: none; }
    .hv2-toolbar__count-sm { display: inline; font-size: 13px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
    .hv2-viewtoggle { display: none; }
    .hv2-expired-toggle { height: 44px; padding: 0 2px; border: 0; font-size: 13px; }

    .hv2-feedwrap__in { padding: 8px 0 48px; }
    /* Whatever the desktop choice, a phone gets the one phone card. */
    .hv2-feed, .hv2-feed.is-rows { display: flex; flex-direction: column; gap: 8px; }
    .hv2-deal, .hv2-feed.is-rows .hv2-deal { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 6px; border-radius: 0; border-left: 0; border-right: 0; border-color: var(--border); box-shadow: none; }
    .hv2-deal:hover { transform: none; }
    .hv2-deal__top, .hv2-feed.is-rows .hv2-deal__top { display: flex; gap: 14px; align-items: stretch; }
    .hv2-deal__media, .hv2-feed.is-rows .hv2-deal__media { width: 116px; flex-shrink: 0; gap: 8px; padding: 0; }
    .hv2-deal__img, .hv2-feed.is-rows .hv2-deal__img { height: 116px; width: 116px; border-radius: 12px; overflow: hidden; }
    html:not(.dark) .hv2-deal__img { border: 1px solid var(--divider); }
    .hv2-deal__img img, .hv2-feed.is-rows .hv2-deal__img img { padding: 8px; }
    .hv2-deal__stamp.is-overlay, .hv2-feed.is-rows .hv2-deal__stamp.is-overlay { display: none; }
    .hv2-deal__stamp.is-inline, .hv2-feed.is-rows .hv2-deal__stamp.is-inline { display: inline-flex; font-size: 12px; }
    .hv2-pct.is-overlay { display: inline-flex; position: absolute; top: 6px; left: 6px; height: 22px; padding: 0 7px; font-size: 12px; }
    .hv2-deal__price .hv2-pct { display: none; }
    .hv2-deal__expired { top: 6px; right: 6px; height: 22px; padding: 0 7px; font-size: 10.5px; }
    /* The number always gets its full width; the buttons give way. A fixed
       40/1fr/40 left ~29px, and "1,234°" ran under the highlighted button. */
    .hv2-deal__media .hv2-vote, .hv2-feed.is-rows .hv2-deal__media .hv2-vote { margin: 0; height: 40px; grid-template-columns: minmax(24px, 40px) minmax(max-content, 1fr) minmax(24px, 40px); }
    .hv2-vote__btn { min-height: 34px; }
    .hv2-vote__temp, .hv2-feed.is-rows .hv2-vote__temp { font-size: 14px; }
    .hv2-deal__main, .hv2-feed.is-rows .hv2-deal__main { flex: 1; min-width: 0; gap: 6px; padding: 0; }
    .hv2-deal__title, .hv2-feed.is-rows .hv2-deal__title { font-size: 15.5px; line-height: 21px; }
    .hv2-deal__price { align-items: baseline; gap: 4px 8px; }
    .hv2-price, .hv2-feed.is-rows .hv2-price { font-size: 28px; }
    .hv2-was { font-size: 13.5px; }
    /* Get Deal sits at the foot of the right column, level with the vote bar. */
    .hv2-cta--inline { display: flex; margin-top: auto; height: 40px; font-size: 14.5px; }
    .hv2-deal__extras, .hv2-feed.is-rows .hv2-deal__extras { padding: 0; align-items: stretch; }



    .hv2-notice, .hv2-feed.is-rows .hv2-notice { margin: 0; }
    .hv2-deal__actions, .hv2-feed.is-rows .hv2-deal__actions { margin: 0; padding: 0; gap: 0; }
    .hv2-deal__actions > .hv2-cta { display: none; }
    .hv2-feed.is-rows .hv2-deal__secondary { display: flex; }
    .hv2-feed.is-rows .hv2-textbtn { border: 0; justify-content: flex-start; font-weight: 500; }
    .hv2-feed.is-rows .hv2-textbtn__long { display: inline; }
    .hv2-feed.is-rows .hv2-textbtn__short { display: none; }
    .hv2-feed.is-rows .hv2-textbtn.is-comments { margin-left: auto; margin-right: 0; }
/* The flag after the comment count: a 44px square target, icon only. */
.hv2-iconbtn { min-width: 40px; justify-content: center; padding: 0; margin-right: -10px; }
    .hv2-feed.is-rows .hv2-textbtn.is-report { margin-right: -6px; }
    .hv2-textbtn { min-height: 44px; font-size: 13px; }
    .hv2-deal__admin, .hv2-feed.is-rows .hv2-deal__admin { margin: 0 -16px -6px; padding: 0 16px; min-height: 46px; }
    .hv2-hide-xs { display: none; }

    .hv2-more { padding: 8px 16px 0; margin-top: 8px; }
    .hv2-btn--more { width: 100%; }
    .hv2-caughtup, .hv2-empty { padding: 0 16px; }

    .hv2-faq__in { flex-direction: column; gap: 10px; padding-top: 36px; padding-bottom: 36px; }
    .hv2-faq__intro { width: auto; gap: 6px; margin-bottom: 12px; }
    .hv2-faq__title { font-size: 30px; }
    .hv2-faq__sub { font-size: 15px; }
    .hv2-faq__item summary { min-height: 60px; padding: 10px 10px 10px 16px; font-size: 15px; }
    .hv2-faq__icon { width: 36px; height: 36px; }
    .hv2-faq__answer { padding: 0 16px 16px; }

    .hv2-footer { padding-top: 36px; }
    .hv2-footer__in { gap: 28px; padding-bottom: 28px; }
    .hv2-footer__top { flex-direction: column; gap: 28px; }
    .hv2-footer__brand { width: auto; gap: 14px; }
    .hv2-region { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .hv2-region a { min-height: 44px; justify-content: center; }
    .hv2-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
    .hv2-footer__heading { font-size: 11.5px; }
    .hv2-footer__col a { min-height: 32px; display: flex; align-items: center; }
    .hv2-footer__bottom { flex-direction: column; gap: 6px; padding-top: 20px; font-size: 12.5px; }

    .hv2-toasts { left: 16px; right: 16px; top: 12px; align-items: center; }
}

@media (max-width: 359px) {
    .hv2-deal__media, .hv2-feed.is-rows .hv2-deal__media { width: 104px; }
    .hv2-deal__img, .hv2-feed.is-rows .hv2-deal__img { width: 104px; height: 104px; }
    .hv2-deal__media .hv2-vote, .hv2-feed.is-rows .hv2-deal__media .hv2-vote { grid-template-columns: minmax(22px, 34px) minmax(max-content, 1fr) minmax(22px, 34px); }
    .hv2-price, .hv2-feed.is-rows .hv2-price { font-size: 25px; }
    .hv2-adminbar__links { gap: 10px; }
}

/* ---------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hv2 *, .hv2 *::before, .hv2 *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .hv2-deal:hover { transform: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------------------------------------------- light, calmer detail */
/* A dark design's bold, saturated numbers look intense on white. In light
   mode the price is a medium weight in the body face, the heat colour sits on
   the number only, and the overlay chip is white with dark text. */
html:not(.dark) .hv2-price { font-family: var(--hv2-font); font-weight: 600; letter-spacing: -.01em; }
html:not(.dark) .hv2-pct { font-weight: 700; }
html:not(.dark) .hv2-deal__stamp.is-overlay { color: var(--text); box-shadow: 0 0 0 1px var(--border); }
html:not(.dark) .hv2-deal__stamp.is-overlay svg { color: #0A7A3B; }
html:not(.dark) .hv2-code { border-style: solid; }
/* The vote control in light mode (2026-09-29, "totally bland... washed out"):
   a touch deeper tint and a firmer edge per heat level, arrows in a muted
   heat colour instead of grey, a heavier number, and a cast vote shown on
   the whole pill. Still quieter than the price: it repeats on every card. */
html:not(.dark) .hv2-vote {
    --heat-mild-bg: #F8EBCB; --heat-warm-bg: #FBE1C9; --heat-hot-bg: #FBD9CF;
    --heat-mild-edge: rgba(140, 100, 0, .42); --heat-warm-edge: rgba(160, 74, 0, .42); --heat-hot-edge: rgba(186, 49, 21, .42);
}
html:not(.dark) .hv2-vote__btn.is-up { color: color-mix(in srgb, var(--heat) 72%, #6B7280); }
html:not(.dark) .hv2-vote__btn.is-down { color: color-mix(in srgb, var(--vote-down) 55%, #6B7280); }
html:not(.dark) .hv2-vote__temp { font-weight: 800; }
/* A cast vote does NOT fill its button (2026-09-29): a block inset in a
   rounded pill never sits flush and makes the pill look lopsided. The whole
   pill takes the vote instead: a full-strength edge (above) and a slightly
   deeper tint, with the cast arrow solid and the other one muted. */
html:not(.dark) .hv2-vote.is-up { background: color-mix(in srgb, var(--heat) 10%, var(--heat-bg)); }
html:not(.dark) .hv2-vote.is-down { background: color-mix(in srgb, var(--vote-down) 11%, var(--surface)); }
html:not(.dark) .hv2-deal:hover { border-color: var(--border-strong); }
@media (min-width: 640px) {
    html:not(.dark) .hv2-price { font-size: 31px; }
    html:not(.dark) .hv2-feed.is-rows .hv2-price { font-size: 30px; }
}

/* ------------------------------------- light: break up the white (2) */
/* Measured against amazon.com (2026-09-27): the same white and near-black,
   but 84% of our screen was near-white against Amazon's 42%, with card edges
   at 1.27:1 that the eye kept searching for. So: a grey page with white
   cards lifted by a soft shadow instead of hairlines, a tighter hero, and one
   dark band across the top, as Amazon's nav is. */
.hv2-tier__name.is-tiered { color: var(--tier); }
html:not(.dark) .hv2-tier__name.is-tiered { color: color-mix(in srgb, var(--tier) 55%, #000); }
html:not(.dark) .hv2-board__tag { color: color-mix(in srgb, var(--tag) 62%, #000); }
html:not(.dark) .hv2-deal,
html:not(.dark) .hv2-rcard { border-color: transparent; box-shadow: var(--shadow); }
html:not(.dark) .hv2-hero { border-bottom: 0; }
html:not(.dark) .hv2-hero__title { font-weight: 700; color: var(--text); }
@media (min-width: 640px) {
    html:not(.dark) .hv2-hero__in { padding-top: 42px; padding-bottom: 34px; }
    html:not(.dark) .hv2-hero__title { font-size: 52px; }
}
html:not(.dark) .hv2-toolbar { background: var(--bg); }

/* The top band (admin bar, disclosure, header) stays dark in light mode: it
   re-declares the dark tokens so everything inside it reads as on dark. */
html:not(.dark) .hv2-adminbar,
html:not(.dark) .hv2-disclosure,
html:not(.dark) .hv2-header {
    --bg: #1A1D23; --surface: #232833; --surface-2: #2C3342; --border: #343B4A; --border-strong: #414A5C; --divider: #2A303C;
    --text: #F3F5F9; --text-muted: #B3BBC9; --text-faint: #97A0B0;
    --gold: #F5C451; --gold-soft: rgba(245, 196, 81, .10); --gold-edge: rgba(245, 196, 81, .35);
    --tab-active: #2C3342; --disclosure-bg: #14171C;
    color-scheme: dark;
}
html:not(.dark) .hv2-header { background: #1A1D23; border-bottom-color: #1A1D23; }
html:not(.dark) .hv2-disclosure { background: #14171C; border-bottom-color: #14171C; color: #B3BBC9; }
html:not(.dark) .hv2-header .hv2-on-light { display: none !important; }
html:not(.dark) .hv2-header .hv2-on-dark { display: inline-block !important; }

/* Phone card grid (owner report 2026-09-27: the image's bottom and the code's
   bottom did not sit flush). Row 1: image | title, price and code, bottom-
   aligned to the image. Row 2: vote pill | button, on one line. The media and
   main columns dissolve (display: contents) so their children join one grid. */
@media (max-width: 640px) {
    .hv2-deal__top, .hv2-feed.is-rows .hv2-deal__top {
        display: grid; grid-template-columns: 116px minmax(0, 1fr);
        grid-template-areas: "img info" "vote cta"; column-gap: 14px; row-gap: 8px; align-items: stretch;
    }
    .hv2-deal__media, .hv2-feed.is-rows .hv2-deal__media,
    .hv2-deal__main, .hv2-feed.is-rows .hv2-deal__main { display: contents; }
    .hv2-deal__img, .hv2-feed.is-rows .hv2-deal__img { grid-area: img; align-self: end; }
    .hv2-deal__media .hv2-vote, .hv2-feed.is-rows .hv2-deal__media .hv2-vote { grid-area: vote; align-self: center; }
    .hv2-deal__info { grid-area: info; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    /* The top line and the title stay at the top; the price and code sink
       to the image's bottom. The spare height used to sit above the title,
       which left a short title floating far from its own top line. */
    .hv2-deal__info > .hv2-deal__price { margin-top: auto; }
    .hv2-cta--inline, .hv2-feed.is-rows .hv2-cta--inline { grid-area: cta; align-self: center; }
}
@media (max-width: 359px) {
    .hv2-deal__top, .hv2-feed.is-rows .hv2-deal__top { grid-template-columns: 104px minmax(0, 1fr); }
}