* { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #0f0f23;
            color: #e0e0e0;
            min-height: 100vh;
            line-height: 1.6;
        }
        a { color: #10B981; }

        /* ---- Nav (mirrors index.html) ---- */
        .fx-nav {
            position: sticky; top: 0; z-index: 1000;
            background: rgba(15,15,35,0.95); backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255,255,255,0.06); padding: 12px 0;
        }
        .fx-nav__inner {
            max-width: 1100px; margin: 0 auto; padding: 0 24px;
            display: flex; align-items: center; justify-content: space-between;
            gap: 16px; flex-wrap: wrap;
        }
        .fx-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
        .fx-brand img { width: 36px; height: 36px; border-radius: 8px; }
        .fx-brand span { color: white; font-size: 18px; font-weight: 800; }
        /* .fx-nav__group wraps the links + CTA + hamburger together (mirrors
           index.html's inner flex wrapper), as siblings — NOT with the CTA
           nested inside .fx-nav__links — so the CTA can stay visible in the
           bar even when .fx-nav__links collapses into a dropdown on phones. */
        .fx-nav__group { display: flex; align-items: center; gap: 24px; }
        /* #fx-primary-nav sits after #fx-nav-toggle in the HTML source (see
           fixes.html's own comment there) so Tab reaches the open menu
           immediately after the button that opens it. `order` restores the
           desktop visual order (links, then CTA, then hamburger) without
           touching source/tab order. */
        .fx-nav__links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; order: 1; }
        .fx-nav__cta { order: 2; }
        .fx-nav__toggle { order: 3; }
        .fx-nav__links a {
            color: rgba(255,255,255,0.6); text-decoration: none;
            font-size: 14px; font-weight: 500;
        }
        .fx-nav__links a:hover { color: #10B981; }
        .fx-nav__cta {
            padding: 8px 20px;
            background: linear-gradient(135deg, #047857, #065f46);
            color: white; text-decoration: none; border-radius: 8px;
            font-size: 14px; font-weight: 700;
        }
        /* Mobile-only hamburger toggle — hidden on desktop by this base rule,
           shown at <=640px below. Color comes from this button (ancestor),
           not the svg itself, per the site's high-contrast convention. */
        .fx-nav__toggle {
            display: none; align-items: center; justify-content: center;
            width: 40px; height: 40px; padding: 0;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.14);
            border-radius: 8px; color: #fff; cursor: pointer;
        }
        .fx-nav__toggle:focus-visible {
            outline: 3px solid #6ee7b7; outline-offset: 2px;
        }

        /* ---- Header ---- */
        .fx-hero {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #0f766e 100%);
            padding: 56px 20px 48px; text-align: center;
        }
        .fx-hero h1 {
            color: white; font-size: 40px; font-weight: 900;
            margin: 0 0 14px; letter-spacing: -1px; line-height: 1.15;
        }
        .fx-hero p {
            color: rgba(255,255,255,0.7); font-size: 17px;
            max-width: 640px; margin: 0 auto 12px;
        }
        .fx-hero .fx-app-note { color: #fbbf24; font-weight: 600; font-size: 15px; }
        .fx-cta {
            display: inline-flex; align-items: center; justify-content: center;
            gap: 10px; margin-top: 22px; padding: 14px 34px;
            background: linear-gradient(135deg, #047857, #065f46);
            color: white; text-decoration: none; border-radius: 12px;
            font-size: 16px; font-weight: 800;
            box-shadow: 0 10px 35px rgba(16,185,129,0.35);
        }
        .fx-cta:hover { transform: translateY(-2px); }
        .fx-cta--ghost {
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.2);
            box-shadow: none; margin-left: 8px;
        }
        /* <button> elements reusing the .fx-cta pill need the native button
           chrome reset (border/font) and a visible keyboard focus ring. */
        button.fx-cta {
            border: none; cursor: pointer; font-family: inherit;
        }
        .fx-cta:focus-visible {
            outline: 3px solid #6ee7b7; outline-offset: 2px;
        }

        /* ---- Main / search ---- */
        .fx-main { max-width: 900px; margin: 0 auto; padding: 40px 20px 60px; }

        /* ---- Recently viewed (client-side, localStorage only) ---- */
        .fx-recent { margin: 0 0 22px; }
        .fx-recent[hidden] { display: none; }
        .fx-recent__label {
            color: rgba(255,255,255,0.55); font-size: 13px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 8px;
        }
        .fx-recent__list {
            list-style: none; margin: 0; padding: 0 0 4px; display: flex;
            gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
        }
        .fx-recent__item { flex: 0 0 auto; }
        .fx-recent__item a {
            display: flex; flex-direction: column; justify-content: center;
            min-height: 44px; padding: 8px 14px; max-width: 240px;
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px; color: white; text-decoration: none;
            font-size: 13px; font-weight: 600;
        }
        .fx-recent__item a:hover { border-color: rgba(16,185,129,0.4); color: #6ee7b7; }
        .fx-recent__item a:focus-visible { outline: 3px solid #6ee7b7; outline-offset: 2px; }
        .fx-recent__title {
            display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .fx-recent__cat {
            display: block; color: rgba(255,255,255,0.45); font-size: 11px;
            font-weight: 500; margin-top: 2px; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis;
        }

        /* ---- Popular fixes showcase (server-side, fed by live search
           telemetry — see #fx-popular's markup comment). Auto-hides the
           same way #fx-recent does: [hidden] until the fetch below actually
           appends >= 1 real item. ---- */
        .fx-popular { margin: 0 0 26px; }
        .fx-popular[hidden] { display: none; }
        .fx-popular__label {
            color: white; font-size: 15px; font-weight: 800; margin: 0 0 4px;
        }
        .fx-popular__sub {
            color: rgba(255,255,255,0.55); font-size: 13px; margin: 0 0 12px;
        }
        .fx-popular__list { list-style: none; margin: 0; padding: 0; }
        .fx-popular__item { margin: 0 0 8px; }
        .fx-popular__item a {
            display: block; min-height: 44px; padding: 12px 14px;
            background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08);
            border-radius: 10px; color: white; text-decoration: none;
            font-size: 14px; font-weight: 600; line-height: 1.35;
        }
        .fx-popular__item a:hover { border-color: rgba(16,185,129,0.4); color: #6ee7b7; }
        .fx-popular__item a:focus-visible { outline: 3px solid #6ee7b7; outline-offset: 2px; }

        .fx-search {
            position: sticky; top: 61px; z-index: 900;
            background: #0f0f23; padding: 14px 0 18px; margin-bottom: 8px;
        }
        /* Slim sticky-bar echo of the topic heading's title (FIX 3) — see
           #fx-search-topic-label in the markup + showTopicHeading()/
           hideTopicHeading() in the inline script. Shown in BOTH the
           collapsed and expanded states of the box (it tracks isTopicLanding,
           not the collapsed class) so the collection name ("WiFi & Network")
           stays visible in the pinned bar the whole time the visitor scrolls
           a long list, even after the real heading above has scrolled away. */
        .fx-search__topic-label {
            margin: 0 0 8px; color: rgba(255,255,255,0.75);
            font-size: 13px; font-weight: 800; text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .fx-search__topic-label[hidden] { display: none; }
        .fx-search__label {
            display: block; color: rgba(255,255,255,0.75);
            font-size: 14px; font-weight: 600; margin-bottom: 8px;
        }
        .fx-search__input {
            width: 100%; max-width: 100%;
            padding: 14px 16px; font-size: 16px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 12px; color: white; outline: none;
        }
        .fx-search__input:focus {
            border-color: #10B981;
            box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
        }
        .fx-search__input::placeholder { color: rgba(255,255,255,0.62); }
        /* max-height/opacity (not display:none) so collapsing/revealing this
           line (see .fx-search--collapsed .fx-count below) never pops in/out
           instantly — it can animate smoothly instead. See the
           collapse/expand transition block further down. */
        .fx-count {
            margin-top: 10px; color: rgba(255,255,255,0.5);
            font-size: 13px; font-weight: 600;
            max-height: 40px; opacity: 1; overflow: hidden;
        }

        /* ---- Collapsed/subtle search (topic-collection landing) ----
           Applied ONLY while isTopicLanding is true (a tile's ?q= deep
           link, before the visitor has typed or focused anything) — see
           setSearchCollapsed() in the inline script. The box itself stays
           fully present, labelled and keyboard-reachable (the label is
           only visually hidden via .sr-only, never removed from the
           accessibility tree), it just stops competing with the topic
           heading above it for attention: no big "Search the fix library"
           label, no evergreen count line repeating what the heading
           already says. The instant the visitor types or focuses the box,
           this class is removed and the search UI returns to its normal,
           full-prominence size. Collapsing/expanding is a short smooth
           transition rather than an instant pop — see the transition
           block below. Visitors who opt into "Reduce motion" in the
           accessibility panel still get the same instant change as
           before, via the site-wide html.a11y-reduce-motion rule in
           a11y.css (which zeroes every transition-duration). */
        .fx-search--collapsed { padding: 6px 0 10px; }
        /* Same visually-hidden-but-announced technique as the site-wide
           .sr-only utility (a11y.css) — kept local here since inlining it
           avoids a load-order dependency on that stylesheet for this one
           rule. The <label for="fx-search-input"> stays in the DOM and
           in the accessibility tree; only the visible text is removed. */
        .fx-search--collapsed .fx-search__label {
            position: absolute; width: 1px; height: 1px; padding: 0;
            margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
            white-space: nowrap; border: 0;
        }
        .fx-search--collapsed .fx-search__input {
            padding: 11px 14px; font-size: 15px;
        }
        .fx-search--collapsed .fx-count {
            max-height: 0; opacity: 0; margin-top: 0;
        }
        /* Smooth collapse<->expand (FIX 2): the box/input padding, the
           input's font-size, and the count line's reveal/hide all animate
           over a short, quiet 150ms instead of popping instantly — avoids
           the visible layout jump on focus/typing/Enter. On by default
           for everyone (motion is opt-OUT, not opt-in-by-OS — see
           a11y.js); anyone who turns on "Reduce motion" in the
           accessibility panel gets the exact same instant change as
           before via the site-wide html.a11y-reduce-motion rule in
           a11y.css, which zeroes every transition-duration. */
        .fx-search { transition: padding 150ms ease; }
        .fx-search__input { transition: padding 150ms ease, font-size 150ms ease; }
        .fx-count { transition: max-height 150ms ease, opacity 150ms ease, margin-top 150ms ease; }
        .fx-search-status {
            margin-top: 6px; color: #fbbf24;
            font-size: 12px; font-weight: 600;
        }
        .fx-search-status[hidden] { display: none; }

        /* ---- Search-as-you-type suggestions dropdown ----
           .fx-search__input-wrap gives the popover a positioning context
           scoped to just the input (not the whole sticky .fx-search box,
           which also stacks the label/count/status around it) — see
           computeSuggestions()/renderSuggestions() in the inline script.
           Reuses the same dark popover treatment as the mobile nav dropdown
           (.fx-nav__links.open below) for visual consistency. */
        .fx-search__input-wrap { position: relative; }
        .fx-suggest {
            position: absolute; top: calc(100% + 6px); left: 0; right: 0;
            z-index: 20; margin: 0; padding: 6px; list-style: none;
            background: rgba(15,15,35,0.98); backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.15); border-radius: 12px;
            box-shadow: 0 16px 40px rgba(0,0,0,0.45);
            max-height: min(60vh, 420px); overflow-y: auto;
        }
        .fx-suggest[hidden] { display: none; }
        .fx-suggest__item {
            display: flex; flex-direction: column; justify-content: center;
            min-height: 44px; padding: 8px 12px; margin: 2px 0;
            border-radius: 8px; cursor: pointer;
        }
        .fx-suggest__item:hover,
        .fx-suggest__item.is-active { background: rgba(16,185,129,0.14); }
        .fx-suggest__title {
            color: white; font-size: 14px; font-weight: 700;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .fx-suggest__cat {
            color: rgba(255,255,255,0.5); font-size: 12px; margin-top: 2px;
        }

        /* ---- Topic-collection heading (a ?q= deep-link landing, e.g.
           tapping a homepage tile like "Blue Screen Fixes") ----
           Sits ABOVE the search box (see the HTML order below) and reuses
           the SAME size/weight as .fx-h1 — the per-category page's own
           title (see build_category_page() in the generator) — so a tile
           tap leads with a title exactly as prominent as a real
           /category/<slug> page, not a heading buried under a search hero.
           See isTopicLanding/showTopicHeading() in the inline script. */
        .fx-topic-heading { margin: 4px 0 20px; }
        .fx-topic-heading[hidden] { display: none; }
        .fx-topic-heading__title {
            color: white; font-size: 30px; font-weight: 900;
            letter-spacing: -0.5px; line-height: 1.2; margin: 0 0 6px;
        }
        .fx-topic-heading__count {
            color: rgba(255,255,255,0.62); font-size: 15px; font-weight: 700; margin: 0;
        }

        /* ---- Empty state ---- */
        .fx-empty {
            display: none; text-align: center; padding: 48px 20px;
            color: rgba(255,255,255,0.6);
        }
        .fx-empty.is-visible { display: block; }
        .fx-empty__icon { font-size: 40px; margin-bottom: 12px; }
        .fx-empty__cta { margin-top: 0; }

        /* ---- Smarter no-results help (Did you mean / Closest matches) ----
           See renderNoResultsHelp() in the inline script — populated only
           for a genuine zero-result search, never the stopword-guidance
           state or a topic-collection landing. */
        .fx-empty__suggest { margin: 16px 0 4px; }
        .fx-empty__suggest[hidden] { display: none; }
        .fx-empty__suggest-label {
            color: rgba(255,255,255,0.55); font-size: 13px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 8px;
        }
        .fx-empty__suggest-label[hidden] { display: none; }
        .fx-empty__didyoumean {
            display: inline-flex; align-items: center; min-height: 44px;
            padding: 10px 20px; margin: 0 0 4px;
            background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.4);
            border-radius: 10px; color: #6ee7b7; font-size: 15px; font-weight: 700;
            text-decoration: none;
        }
        .fx-empty__didyoumean:hover { background: rgba(16,185,129,0.18); text-decoration: underline; }
        .fx-empty__didyoumean:focus-visible { outline: 3px solid #6ee7b7; outline-offset: 2px; }
        .fx-empty__didyoumean[hidden] { display: none; }
        .fx-empty__closest-list {
            list-style: none; margin: 0 auto; padding: 0; max-width: 420px;
            display: flex; flex-direction: column; gap: 6px; text-align: left;
        }
        .fx-empty__closest-list[hidden] { display: none; }
        .fx-empty__closest-list a {
            display: flex; align-items: center; min-height: 44px;
            padding: 10px 14px; background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
            color: white; text-decoration: none; font-size: 14px; font-weight: 600;
        }
        .fx-empty__closest-list a:hover { border-color: rgba(16,185,129,0.4); color: #6ee7b7; }
        .fx-empty__closest-list a:focus-visible { outline: 3px solid #6ee7b7; outline-offset: 2px; }
        .fx-empty__actions {
            display: flex; flex-wrap: wrap; align-items: center;
            justify-content: center; gap: 10px; margin-top: 18px;
        }

        /* ---- Ranked search results (Best match + More matches) ----
           Global, cross-category ranking — see doSearch()/renderResults().
           Reuses .fx-list/.fx-item/.fx-title/.fx-desc/.fx-badges so a
           result looks identical whether it's browsed by category or
           surfaced by search; only the "Best match" card gets a distinct,
           more prominent treatment (bigger border + soft glow) so it reads
           as THE answer, not just the first item in a list. */
        .fx-results { margin-bottom: 8px; }
        .fx-best-match { margin-bottom: 18px; }
        .fx-best-match[hidden], .fx-more-matches[hidden] { display: none; }
        .fx-best-match__label,
        .fx-more-matches__label {
            color: white; font-size: 15px; font-weight: 800;
            margin: 0 0 8px; display: flex; align-items: center; gap: 8px;
        }
        .fx-more-matches__label {
            color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.04em;
        }
        .fx-best-match__list { padding: 0; }
        .fx-best-match__list .fx-item {
            padding: 18px;
            background: rgba(16,185,129,0.07);
            border: 1px solid rgba(16,185,129,0.45);
            border-radius: 14px;
            box-shadow: 0 0 0 3px rgba(16,185,129,0.08);
        }
        .fx-best-match__list .fx-title { font-size: 17px; }
        .fx-results-list { padding: 0; }

        /* ---- Request-a-fix compose form ----
           A subtle toggle sits under the search; the empty state also exposes a
           prominent "Request this fix" button. Both reveal the same compose
           panel (kept ABOVE the category list so live suggestions stay in view).
           Submissions POST to the /api/request-fix serverless gatekeeper
           (validate -> honeypot -> rate-limit -> store). If that endpoint is
           unreachable (static preview) or fails closed (503), the form shows a
           graceful "email support" fallback. */
        .fx-request-toggle {
            display: inline-block; margin-top: 12px;
            background: none; border: none; padding: 4px 0;
            color: #6ee7b7; font-size: 13px; font-weight: 600;
            cursor: pointer; font-family: inherit;
        }
        .fx-request-toggle:hover { text-decoration: underline; }
        .fx-request-toggle:focus-visible {
            outline: 2px solid #10B981; outline-offset: 3px; border-radius: 4px;
        }
        .fx-request {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(16,185,129,0.25);
            border-radius: 12px; padding: 18px 16px; margin: 0 0 16px;
        }
        .fx-request[hidden] { display: none; }
        .fx-request__title {
            color: white; font-weight: 700; font-size: 15px; margin: 0 0 4px;
        }
        .fx-request__sub {
            color: rgba(255,255,255,0.55); font-size: 13px; margin: 0 0 12px;
        }
        .fx-request__label {
            display: block; color: rgba(255,255,255,0.75);
            font-size: 13px; font-weight: 600; margin: 14px 0 6px;
        }
        .fx-request__textarea,
        .fx-request__input {
            width: 100%; max-width: 100%;
            padding: 12px 14px; font-size: 15px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 10px; color: white; outline: none;
            font-family: inherit;
        }
        .fx-request__textarea { resize: vertical; min-height: 72px; }
        .fx-request__textarea:focus,
        .fx-request__input:focus {
            border-color: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
        }
        .fx-request__textarea[aria-invalid="true"] { border-color: #f87171; }
        .fx-request__textarea::placeholder,
        .fx-request__input::placeholder { color: rgba(255,255,255,0.62); }
        .fx-request__hint { color: #fca5a5; font-size: 13px; margin: 8px 0 0; }
        .fx-request__hint[hidden] { display: none; }
        .fx-request__actions { margin-top: 16px; }
        .fx-request__send { margin-top: 0; }
        .fx-request__success {
            margin-top: 16px; color: #6ee7b7; font-size: 14px; line-height: 1.5;
            background: rgba(16,185,129,0.08);
            border: 1px solid rgba(16,185,129,0.25);
            border-radius: 10px; padding: 12px 14px;
        }
        .fx-request__success[hidden] { display: none; }
        .fx-request__success a { color: #6ee7b7; font-weight: 700; }
        /* Error / fallback variant of the status box (invalid input, rate
           limit, or the graceful "email us" fallback when the API is down). */
        .fx-request__success.is-error {
            color: #fca5a5;
            background: rgba(248,113,113,0.08);
            border-color: rgba(248,113,113,0.3);
        }
        .fx-request__success.is-error a { color: #fca5a5; }
        /* HONEYPOT wrapper — visually hidden + off-screen, but still in the DOM
           and submitted. Real (human) users never see or tab to it; bots that
           auto-fill every field trip it and get silently dropped server-side.
           Uses off-screen positioning (not display:none) so headless bots that
           skip display:none fields still fill it. */
        .fx-hp {
            position: absolute !important;
            left: -9999px !important; top: auto !important;
            width: 1px; height: 1px; overflow: hidden;
        }

        /* ---- Category sections ---- */
        .fx-cat {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px; margin-bottom: 8px; overflow: hidden;
        }
        .fx-cat[hidden] { display: none; }
        /* Single horizontal row: [caret + name] left, count pinned right,
           both vertically centered on ONE line. The name shrinks/ellipsises
           so the count never drops to its own line (even on a 375px phone). */
        .fx-cat__summary {
            list-style: none; cursor: pointer;
            padding: 13px 16px; display: flex; align-items: center;
            justify-content: space-between; gap: 12px;
            color: white; font-weight: 700;
            transition: background 0.15s ease;
        }
        .fx-cat__summary:hover { background: rgba(255,255,255,0.04); }
        .fx-cat__summary::-webkit-details-marker { display: none; }
        /* Name takes the available width; caret is its inline prefix so the
           disclosure affordance stays glued to the name, not the count. */
        .fx-cat__name {
            flex: 1 1 auto; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            font-size: 16px; line-height: 1.3;
        }
        .fx-cat__name::before {
            content: '▸'; color: #10B981; font-size: 13px;
            margin-right: 8px; display: inline-block;
        }
        .fx-cat[open] > .fx-cat__summary .fx-cat__name::before { content: '▾'; }
        .fx-cat__count {
            flex: 0 0 auto;
            color: #10B981; font-size: 13px; font-weight: 700;
            background: rgba(16,185,129,0.1);
            border: 1px solid rgba(16,185,129,0.25);
            border-radius: 999px; padding: 3px 12px; white-space: nowrap;
        }
        /* Keep the numeral; drop the "fixes" word on narrow phones so the
           pill stays compact and never forces a wrap. */
        .fx-list { list-style: none; padding: 0 14px 10px; margin: 0; }
        .fx-item {
            padding: 14px; margin: 8px 0;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 10px;
        }
        .fx-item[hidden] { display: none; }
        .fx-title {
            display: block; color: white; font-size: 15px;
            font-weight: 700; margin-bottom: 6px;
        }
        .fx-title a { color: white; text-decoration: none; }
        .fx-title a:hover { color: #10B981; text-decoration: underline; }
        .fx-cat__viewall { margin: 0 14px 4px; padding: 4px 0 2px; }
        .fx-cat__viewall a {
            color: #6ee7b7; font-size: 13px; font-weight: 600;
            text-decoration: none;
        }
        .fx-cat__viewall a:hover { text-decoration: underline; }
        /* "Show N more" — a real <button> so it's keyboard/screen-reader
           operable like the rest of this page's interactive controls. */
        .fx-more {
            display: flex; align-items: center; justify-content: center;
            width: calc(100% - 28px); min-height: 44px; margin: 4px 14px 12px;
            padding: 10px 14px; background: rgba(16,185,129,0.06);
            border: 1px dashed rgba(16,185,129,0.35); border-radius: 10px;
            color: #6ee7b7; font-size: 13px; font-weight: 700;
            cursor: pointer; font-family: inherit;
        }
        .fx-more:hover { background: rgba(16,185,129,0.12); }
        .fx-more:disabled { cursor: default; opacity: 0.7; }
        .fx-more[hidden] { display: none; }
        .fx-desc {
            color: rgba(255,255,255,0.6); font-size: 14px; margin: 0 0 10px;
        }
        .fx-badges { display: flex; flex-wrap: wrap; gap: 8px; }
        .fx-badge {
            font-size: 11px; font-weight: 700; padding: 3px 10px;
            border-radius: 999px; white-space: nowrap;
        }
        .fx-badge--difficulty {
            color: #6ee7b7; background: rgba(16,185,129,0.1);
            border: 1px solid rgba(16,185,129,0.2);
        }
        .fx-badge--time {
            color: #93c5fd; background: rgba(59,130,246,0.1);
            border: 1px solid rgba(59,130,246,0.2);
        }

        /* ---- Bottom CTA ---- */
        .fx-bottom-cta {
            background: linear-gradient(135deg, #052e16 0%, #064e3b 50%, #0f766e 100%);
            padding: 56px 20px; text-align: center;
        }
        .fx-bottom-cta h2 { color: white; font-size: 28px; font-weight: 900; margin: 0 0 10px; }
        .fx-bottom-cta p { color: rgba(255,255,255,0.7); font-size: 15px; margin: 0 0 8px; }

        /* ---- Footer (mirrors index.html) ---- */
        .fx-footer {
            background: #0a0a1a; padding: 40px 20px;
            border-top: 1px solid rgba(255,255,255,0.06);
        }
        .fx-footer__inner {
            max-width: 900px; margin: 0 auto; display: flex;
            justify-content: space-between; align-items: center;
            flex-wrap: wrap; gap: 20px;
        }
        .fx-footer__brand { display: flex; align-items: center; gap: 10px; }
        .fx-footer__brand .badge {
            width: 32px; height: 32px;
            background: linear-gradient(135deg, #047857, #065f46);
            border-radius: 8px; display: flex; align-items: center;
            justify-content: center; font-size: 16px; color: #fff;
        }
        .fx-footer__brand span { color: rgba(255,255,255,0.5); font-size: 14px; font-weight: 600; }
        .wh-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
        .fx-footer__links { display: flex; gap: 24px; flex-wrap: wrap; }
        .fx-footer__links a { color: rgba(255,255,255,0.62); text-decoration: none; font-size: 13px; }
        .fx-footer__copy { color: rgba(255,255,255,0.62); font-size: 12px; margin: 0; }

        @media (max-width: 640px) {
            .fx-hero h1 { font-size: 30px; }
            .fx-topic-heading__title { font-size: 24px; }
            .fx-search { top: 0; }
            .fx-cat__summary { padding: 12px 14px; }
            .fx-cat__name { font-size: 15px; }
            /* Drop the trailing "fixes" word; keep the number so the pill
               stays compact and stays pinned on the header line. */
            .fx-cat__count-label { display: none; }
            /* Match the homepage: the links (Features, How It Works, Fixes,
               FAQ) no longer fit in the sticky header on a narrow phone, so
               they move into a hamburger dropdown instead of being hidden
               outright (hiding them left NO way to reach the other pages
               from a phone — see responsive.css's .nav-links comment for the
               same fix on index.html). Hidden by default; NAV_TOGGLE_SCRIPT
               below adds/removes the "open" class on click. The brand/logo
               and "Get Started" CTA are siblings of .fx-nav__links (see
               .fx-nav__group above), not nested inside it, so they stay
               visible in the bar even while the dropdown is collapsed.
               CASCADE: .fx-nav__links{display:none} here has the same
               specificity (one class) as the base rule above but comes
               later in the stylesheet, so it wins at <=640px; .open then
               wins outright via TWO classes (higher specificity) regardless
               of order — no !important needed since nothing here is set via
               an inline style attribute (unlike index.html's nav-links). */
            .fx-nav__toggle { display: inline-flex; }
            .fx-nav__links {
                display: none;
                position: absolute;
                top: 100%; left: 0; right: 0;
                margin: 0;
                flex-direction: column;
                align-items: stretch;
                gap: 2px;
                background: rgba(15,15,35,0.98);
                border-bottom: 1px solid rgba(255,255,255,0.06);
                padding: 8px 20px 14px;
                box-shadow: 0 16px 30px rgba(0,0,0,0.35);
            }
            .fx-nav__links.open { display: flex; }
            .fx-nav__links a {
                display: flex; align-items: center; min-height: 44px;
                font-size: 16px;
                border-bottom: 1px solid rgba(255,255,255,0.06);
            }
            .fx-nav__links a:last-child { border-bottom: none; }

            /* Tap targets — interactive links meet a ~44px min touch height
               on mobile, matching the same display:flex + min-height
               pattern already used for .fx-nav__links a above: each fix
               card's title link and the "View all in <category>" link.
               .fx-more and .fx-cta already clear ~44px via their own
               padding on every viewport, so they aren't repeated here. */
            .fx-title a { display: flex; align-items: center; min-height: 44px; }
            .fx-cat__viewall a { display: flex; align-items: center; min-height: 44px; }
        }