/* ============================================================
 * user_ui — Landing page styles (Phase 7 Package K).
 * ============================================================
 *
 * Section-local CSS for the landing page sections only.
 * Loaded per-page via `{% block extra_css %}` in
 * `user_ui/templates/user_ui/landing/landing.html` — NOT
 * included in the global cascade in `base.html`. Other
 * pages do not pay this stylesheet's cost.
 *
 * Styles extracted VERBATIM from the landing-page mockup
 * per architecture rule §4 (mockup-verbatim canonical
 * classes). Mockup's chrome / shared CSS removed because
 * the equivalent surface is shipped elsewhere:
 *
 *   - Tokens / fonts / reset / body / headings / `.wrap` /
 *     `.lines` / theme-icon swap — Package B `shared/*`
 *   - Buttons (`.btn` + variants, `.icon-btn`, `.steam-login`) —
 *     Package B `buttons.css`
 *   - Header (`header.site`, `.head`, `.brand`,
 *     `nav.primary`, `.spacer`, `.hamburger`) — Package E
 *     `header.css`
 *   - Footer (`footer.site`, `.foot-grid`, `.foot-bottom`,
 *     `.copyright`, `.foot-tag`) — Package F `footer.css`
 *   - Mobile menu (`.mobile-menu`, `.scrim`) — Package G
 *     `mobile_menus.css`
 *   - Help FAB (`.help-fab`) — Package H `help.css`
 *
 * One mockup rename: `.faq-bunny` → `.faq-cat`. The image
 * asset (`mascot-cat-cartoon.webp`) is a stylized cat; the
 * mockup name was a misnomer flagged for renaming by
 * Package B and resolved here per its carry-forward.
 *
 * Mockup `!important` declarations in the 1100px / 760px
 * responsive blocks are preserved verbatim per architecture
 * rule §4 — flagged for scrub-without-visual-change in
 * Package NN (7.40), same precedent as Package F's
 * `.foot-grid` `!important` chain.
 * ============================================================ */

/* ---- Landing wrapper ----
   Section-local wrapper that hosts the `.lines` decoration
   plus the full set of landing sections. `position: relative`
   makes it the positioned ancestor for `.lines`
   (`position: absolute; inset: 0`) so the diagonal stripe
   SVG fills the landing body without bleeding into the
   header / footer chrome (each of which carries its own
   visual treatment — translucent blur on header, background
   image on footer).
*/
.landing-page {
    position: relative;
}

/* ============================================================
 * HERO
 * ============================================================ */

.hero {
    padding: 48px 0 8px;
    position: relative;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 32px;
    align-items: end;
}

h1.hero-title {
    font-family: var(--font-head);
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.005em;
    font-weight: 700;
    margin: 8px 0 18px;
    text-transform: uppercase;
}

.hero-sub {
    color: var(--text-dim);
    font-size: 20px;
    line-height: 1.5;
    max-width: 520px;
    margin: 0 0 28px;
    font-weight: 500;
}

.hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---- Hero art collage (crate + 2 keys + ticket) ---- */
.hero-art {
    position: relative;
    min-height: 320px;
    display: grid;
    place-items: center;
}
.hero-art img {
    position: absolute;
    user-select: none;
    -webkit-user-drag: none;
}
.hero-art .crate {
    width: 200px;
    height: auto;
    position: relative;
    filter: drop-shadow(0 20px 30px rgba(40, 20, 0, 0.25));
    transform: rotate(-2deg);
}
.hero-art .key-1  { width: 120px; top:  6%; right:  8%; transform: rotate(28deg);  }
.hero-art .key-2  { width: 100px; top: 28%; right: 24%; transform: rotate(-14deg); }
.hero-art .ticket { width: 130px; top: 48%; right:  6%; transform: rotate(10deg);  }

/* ============================================================
 * STATS
 * ============================================================ */

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 24px 0 0;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    padding: 18px 22px;
    text-align: center;
}
.stat b {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 600;
    display: block;
    letter-spacing: 0.01em;
}
.stat span {
    font-size: 14px;
    color: var(--text-dim);
    margin-top: 6px;
    display: block;
    font-weight: 500;
}

/* ============================================================
 * BANNER STRIPS (crypto / games)
 * ============================================================ */

.banner {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}
.banner-crypto { margin-top: 32px; }
.banner-games  { margin-top: 48px; }

/* ============================================================
 * FEATURES GRID
 * ============================================================ */

.features {
    margin-top: 64px;
    display: grid;
    grid-template-columns: 1fr 360px 1fr;
    gap: 48px;
    align-items: center;
}
.col-left,
.col-right {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.feat {
    display: flex;
    gap: 18px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    padding: 18px 20px;
}
.feat .ico {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--orange);
    color: #fff;
    display: grid;
    place-items: center;
    flex: none;
}
.feat .ico svg {
    width: 28px;
    height: 28px;
}
.col-left .feat {
    flex-direction: row-reverse;
    text-align: right;
}
.feat h4 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    font-family: var(--font-head);
}
.feat p {
    margin: 0;
    color: var(--text-dim);
    font-size: 15px;
    line-height: 1.55;
}
/* ---- Center emblem tile with three orbiting props ---- */
.feat-center {
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 50%, rgba(124, 91, 230, 0.3), transparent 60%),
        linear-gradient(180deg, #1c2533, #0e1420);
    color: #fff;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}
.feat-center::after {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.18);
}
.feat-center::before {
    content: "";
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    border: 2px solid var(--orange);
    border-right-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(-30deg);
}
.feat-center .emblem {
    width: 36%;
    max-width: 130px;
    aspect-ratio: 1 / 1;
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
}
.feat-center .orbit {
    position: absolute;
    width: 30%;
    max-width: 110px;
    object-fit: contain;
    z-index: 4;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}
.feat-center .orbit.tl { top: -2%;    left: -2%;  transform: rotate(-14deg); }
.feat-center .orbit.tr { top:  0%;    right: -2%; transform: rotate(16deg);  }
.feat-center .orbit.b  { bottom: -4%; left: 50%;  transform: translateX(-50%) rotate(-4deg); width: 36%; max-width: 130px; }

/* ============================================================
 * SECTION HEADERS
 * ============================================================ */

.section-title {
    font-family: var(--font-head);
    font-size: 40px;
    font-weight: 600;
    margin: 0 0 28px;
    letter-spacing: -0.005em;
    text-transform: capitalize;
}
.section {
    margin-top: 80px;
    position: relative;
}

/* ============================================================
 * HOT ITEMS
 * ============================================================ */

.hot {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.item-card {
    background: linear-gradient(180deg, #E8EBEF, #D9DDE3);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    aspect-ratio: 0.62 / 1;
    position: relative;
    border: 1px solid var(--line-2);
}
html[data-theme="dark"] .item-card {
    background: linear-gradient(180deg, #1B2230, #10161F);
    border-color: rgba(255, 255, 255, 0.06);
}
.item-card .top {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
}
.item-card .img {
    flex: 1;
    margin: 8px 0;
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0 6px, transparent 6px 12px);
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--text-mute);
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    border: 1px dashed var(--line);
}
.item-card .price {
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
}
.item-card .name {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
}

/* ---- Live hot-item cards (dashboard hookup pass) ----
 * The five placeholder <div class="item-card"> mockup cards are now
 * <a class="item-card"> deep links to the Trade page (`?q=<name>`).
 * Anchor reset + a subtle hover lift signal clickability; `.img.has-shot`
 * swaps the dashed placeholder treatment for a clean thumbnail backdrop
 * when the snapshot row carries a real image URL. Token-only colors. */
a.item-card {
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
    /* Owner feedback round — the mockup's 0.62/1 portrait reads far too
     * tall against a real item shot; live cards run squarer. Type+class
     * specificity outranks the .item-card aspect rules in every
     * breakpoint, so one declaration wins across all layouts. */
    aspect-ratio: 0.78 / 1;
}
a.item-card .top {
    /* Owner feedback round — the lock + "7 Days"/"Instant" badge is
     * dropped; the lone stock count right-aligns where it always sat. */
    justify-content: flex-end;
}
a.item-card:hover,
a.item-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--text-dim);
}
.item-card .img.has-shot {
    background: none;
    border-style: solid;
}
.item-card .img img {
    /* Owner feedback round — 92% (from 82%): the shot fills the art box. */
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
}

/* ---- Hot-items callout (Sniper + Trade-now CTA) ---- */
.hot-callout {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}
.hot-callout .sniper {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.25));
    transform: rotate(-4deg);
}
.hot-callout .txt {
    font-size: 17px;
    line-height: 1.5;
    color: var(--text);
    margin: 0 0 18px;
    max-width: 480px;
}

/* ============================================================
 * EASY TO USE
 * ============================================================ */

.easy {
    margin-top: 80px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 42px;
    align-items: start;
}
.easy ol {
    margin: 18px 0 0;
    padding-left: 22px;
    font-family: var(--font-head);
    font-size: 28px;
    line-height: 1.8;
    font-weight: 600;
    color: var(--text-dim);
}
.easy ol li::marker {
    color: var(--text);
    font-weight: 700;
}

/* `.mocks` is an empty container in the mockup — children
   (screenshot mockups of the trade page) not yet shipped.
   Rules below take effect once content is added.            */
.mocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.mock {
    aspect-ratio: 5 / 3;
    border-radius: 12px;
    background:
        radial-gradient(circle at 30% 50%, rgba(255, 140, 0, 0.25), transparent 60%),
        linear-gradient(135deg, #1B1F26, #0B0E14);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.45);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    position: relative;
    overflow: hidden;
}
.mock::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.4px);
    background-size: 6px 6px;
}
.mock.book {
    background: linear-gradient(135deg, #1B1F26, #0B0E14);
}
.mock .lbl {
    position: relative;
    z-index: 2;
}

/* ============================================================
 * FAQ ROW
 * ============================================================ */

.faq-row {
    margin-top: 80px;
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.faq-row h2 {
    font-family: var(--font-head);
    font-size: 36px;
    font-weight: 600;
    margin: 0 0 8px;
}
.faq-row p {
    margin: 0;
    color: var(--text-dim);
    font-size: 18px;
}
/* Renamed from mockup's `.faq-bunny` — the image asset is a
   stylized cat, not a bunny. Package B → K carry-forward.   */
.faq-cat {
    width: 200px;
    height: auto;
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.18));
    transform: rotate(8deg);
}

/* ============================================================
 * LEVEL UP CTA
 * ============================================================ */

.levelup {
    margin-top: 80px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 36px;
    align-items: center;
}
.levelup h2 {
    font-family: var(--font-head);
    font-size: 40px;
    font-weight: 600;
    margin: 0 0 14px;
}
.levelup h3 {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--text);
}
.levelup p {
    color: var(--text-dim);
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 22px;
    max-width: 560px;
    font-weight: 500;
}
.levelup .actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.cat-mascot {
    /* Sized for the rotating vector mascot (img/mascot/scale/ — intrinsic
       ratio ~0.62 W:H). `contain` shows the full artwork (cap + tail);
       the former photo used `cover`, which crops the taller SVG. The SVG
       background is transparent, so letterboxing is invisible. */
    width: 260px;
    height: 340px;
    margin-left: auto;
    object-fit: contain;
    display: block;
}

/* ============================================================
 * RESPONSIVE — values mirror the mockup verbatim.
 * ============================================================ */

/* ---------- iPad / tablet (≤ 1100px) ---------- */
@media (max-width: 1100px) {
    .hero { padding: 36px 0 4px; }
    .hero-grid { grid-template-columns: 1.05fr 0.85fr; gap: 24px; }
    h1.hero-title { font-size: clamp(28px, 4.4vw, 44px); }
    .hero-sub { font-size: 17px; margin-bottom: 22px; }
    .hero-art { min-height: 280px; }
    .hero-art .crate  { width: 170px; }
    .hero-art .key-1  { width: 100px; }
    .hero-art .key-2  { width:  84px; }
    .hero-art .ticket { width: 110px; }

    .stats { gap: 14px; }
    .stat b { font-size: 24px; }

    /* iPad: features = single flex column, equal spacing */
    .features {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 22px !important;
        align-items: stretch !important;
    }
    .col-left,
    .col-right {
        display: flex !important;
        flex-direction: column !important;
        gap: 22px !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .col-left .feat,
    .col-right .feat {
        flex-direction: row-reverse !important;
        text-align: left !important;
        align-items: center !important;
        background: var(--surface) !important;
        border: 1px solid var(--line-2) !important;
        border-radius: 14px !important;
        padding: 18px 20px !important;
        gap: 18px !important;
    }
    .col-left .feat > div:not(.ico),
    .col-right .feat > div:not(.ico) {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .col-left .feat p,
    .col-right .feat p {
        margin: 0 !important;
        max-width: none !important;
        text-align: left !important;
    }
    .feat .ico {
        width: 54px !important;
        height: 54px !important;
        border-radius: 13px !important;
        flex: none;
    }
    .feat .ico svg {
        width: 24px !important;
        height: 24px !important;
    }
    .feat h4 {
        font-size: 18px !important;
        margin: 0 0 6px !important;
        line-height: 1.2 !important;
    }
    .feat p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    /* Center emblem — flex item at the top, big hero tile */
    .feat-center {
        display: grid !important;
        order: 0 !important;
        position: relative !important;
        width: 340px !important;
        max-width: 60vw !important;
        height: 340px !important;
        max-height: 60vw !important;
        min-width: 280px !important;
        min-height: 280px !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 auto 18px !important;
        border-radius: 22px !important;
        overflow: visible !important;
        flex: none !important;
        align-self: center !important;
        box-sizing: border-box !important;
    }
    .feat-center .emblem { width: 42% !important; max-width: 160px !important; }
    .feat-center .orbit  { width: 32% !important; max-width: 130px !important; height: auto !important; }
    .feat-center .orbit.tl { top: -6% !important; left: -6% !important; right: auto !important; }
    .feat-center .orbit.tr { top: -4% !important; right: -6% !important; left: auto !important; }
    .feat-center .orbit.b  { bottom: -8% !important; left: 46% !important; transform: translateX(-50%) rotate(-4deg) !important; width: 36% !important; max-width: 140px !important; }

    .hot { grid-template-columns: repeat(4, 1fr); }
    .hot-callout { gap: 20px; }
    .hot-callout .txt { font-size: 16px; }

    .section-title { font-size: 34px; }
    .easy ol { font-size: 24px; line-height: 1.7; }
    .faq-row h2 { font-size: 30px; }
    .levelup { grid-template-columns: 1.2fr 0.9fr; gap: 24px; }
    .levelup h2 { font-size: 32px; }
    .levelup h3 { font-size: 22px; }
    .cat-mascot { width: 220px; height: 300px; }
}

/* ---------- Mobile / phone (≤ 760px) ---------- */
@media (max-width: 760px) {
    /* Hero: stack but keep the art visible (smaller) */
    .hero { padding: 24px 0 4px; }
    .hero-grid { grid-template-columns: 1fr; gap: 18px; }
    h1.hero-title { font-size: 30px; line-height: 1.08; margin: 4px 0 14px; }
    .hero-sub { font-size: 15px; line-height: 1.5; margin-bottom: 18px; }
    .hero-cta .btn { height: 48px; padding: 0 22px; font-size: 16px; }
    .hero-art {
        min-height: 200px;
        order: 0;
        margin: 6px auto 0;
        width: 100%;
        max-width: 360px;
    }
    .hero-art .crate  { width: 150px; transform: rotate(-2deg) translateY(-6px); }
    .hero-art .key-1  { width:  84px; top:  4%; right:  6%; }
    .hero-art .key-2  { width:  70px; top: 34%; right: 22%; }
    .hero-art .ticket { width:  96px; top: 52%; right:  0%; }

    /* Stats: keep 3 across */
    .stats { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
    .stat { padding: 12px 6px; }
    .stat b { font-size: 16px; }
    .stat span { font-size: 11px; margin-top: 3px; }

    .banner-crypto { margin-top: 22px; }
    .banner-games  { margin-top: 32px; }

    /* Features: PHONE — single flex column, equal spacing between all 5 cards. */
    .features {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 14px !important;
        align-items: stretch !important;
        margin-top: 32px;
    }
    .col-left,
    .col-right {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .col-left .feat,
    .col-right .feat {
        flex-direction: row-reverse !important;
        text-align: left !important;
        align-items: center !important;
        background: var(--surface) !important;
        border: 1px solid var(--line-2) !important;
        border-radius: 14px !important;
        padding: 14px 16px !important;
        gap: 14px !important;
    }
    .col-left .feat > div:not(.ico),
    .col-right .feat > div:not(.ico) {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .col-left .feat p,
    .col-right .feat p {
        margin: 0 !important;
        max-width: none !important;
        text-align: left !important;
    }
    .feat .ico {
        width: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
        flex: none;
    }
    .feat .ico svg {
        width: 22px !important;
        height: 22px !important;
    }
    .feat h4 {
        font-size: 16px !important;
        margin: 0 0 4px !important;
        line-height: 1.2 !important;
    }
    .feat p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* Center emblem — flex item at the top, hero tile */
    .feat-center {
        display: grid !important;
        order: 0 !important;
        position: relative !important;
        width: 280px !important;
        max-width: 80vw !important;
        height: 280px !important;
        max-height: 80vw !important;
        min-width: 240px !important;
        min-height: 240px !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 auto 18px !important;
        border-radius: 22px !important;
        overflow: visible !important;
        flex: none !important;
        align-self: center !important;
        box-sizing: border-box !important;
    }
    .feat-center .emblem { width: 42% !important; max-width: 140px !important; }
    .feat-center .orbit  { width: 32% !important; max-width: 110px !important; height: auto !important; }
    .feat-center .orbit.tl { top: -6% !important; left: -6% !important; right: auto !important; }
    .feat-center .orbit.tr { top: -4% !important; right: -6% !important; left: auto !important; }
    .feat-center .orbit.b  { bottom: -8% !important; left: 46% !important; transform: translateX(-50%) rotate(-4deg) !important; width: 36% !important; max-width: 120px !important; }

    /* Section spacing & titles */
    .section { margin-top: 48px; }
    .section-title { font-size: 26px; margin-bottom: 18px; }

    /* Hot items: 2 cols, scaled cards */
    .hot { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .item-card { aspect-ratio: 0.62 / 1; padding: 10px; }
    .item-card .img { margin: 6px 0; }
    .item-card .price { font-size: 18px; }
    .item-card .name { font-size: 11px; }

    .hot-callout { grid-template-columns: 1fr; gap: 14px; margin-top: 30px; }
    .hot-callout .sniper { order: -1; max-height: 130px; transform: rotate(-4deg); }
    .hot-callout .txt { font-size: 15px; }

    .easy { grid-template-columns: 1fr; gap: 22px; }
    .easy ol { font-size: 20px; line-height: 1.7; padding-left: 22px; }
    .mocks { grid-template-columns: 1fr 1fr; gap: 12px; }

    .faq-row {
        margin-top: 48px;
        gap: 16px;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
    }
    .faq-row h2 { font-size: 26px; margin-bottom: 4px; }
    .faq-row p { font-size: 15px; }
    .faq-cat {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 120px;
    }

    .levelup { grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
    .levelup h2 { font-size: 28px; }
    .levelup h3 { font-size: 18px; }
    .levelup p { font-size: 14px; line-height: 1.6; }
    .levelup .actions .btn {
        height: 48px;
        padding: 0 22px;
        font-size: 15px;
        flex: 1;
        min-width: 140px;
    }
    .cat-mascot { margin: 0 auto; width: 180px; height: 240px; }
}

/* ---------- Small / narrow phone (≤ 420px) ---------- */
@media (max-width: 420px) {
    h1.hero-title { font-size: 26px; }
    .hero-sub { font-size: 14px; }
    .stat b { font-size: 14px; }
    .stat span { font-size: 10px; }
    .section-title { font-size: 22px; }
    .easy ol { font-size: 17px; }
    .faq-cat { width: 100px; }
}


/* ---- Killstreak kit overlay (killstreak pass) ----
   Every killstreak kit and fabricator in TF2 is drawn with the SAME
   generic icon, so a hot-item row holding one is unreadable without the
   target weapon laid over it.

   `.item-card .img` is a `display: grid` centring box, so an absolutely
   positioned child is required — left in flow the overlay becomes a
   SECOND grid row and squashes both images. The sizing selector also
   has to outrank `.item-card .img img` (0,2,1), which caps every image
   at 92%: without `img.thumb-overlay` (0,2,1 plus the element+class)
   the overlay would inherit that cap and lose its own geometry. */

.item-card .img { position: relative; }

.item-card .img img.thumb-overlay {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  opacity: 0.8;
  pointer-events: none;
}