/* ────────────────────────────────────────────────────────────────
           Reset + tokens (scoped to .aitshd)
           ──────────────────────────────────────────────────────────────── */
        .aitshd, .aitshd * { box-sizing: border-box; }
        .aitshd {
            /* --hd-h-base is the resting height per breakpoint; --hd-h is what
               the bar actually uses, so the scrolled state can shave it. */
            --hd-h-base: 76px;
            --hd-h: var(--hd-h-base);
            /* Was never defined, so every use fell back to 1280px — narrower
               than the 1400px the footer used to run at, and too narrow for
               brand + the six-item nav + the full account chip, which is what
               pushed the row past its container. Now matches the 1600px shell
               cap that seo-page's `--seo-shell-max` gives every content band,
               so on a 2560px monitor the header, content grid and footer all
               share the same edge — no 200-px shoulder on either side of the
               page. Drop back to 1400px if the header ever needs to tighten. */
            --container-hd: 1920px;
            --hd-r: 20px;
            --hd-r-lg: 24px;
            --hd-glass: rgba(255,255,255,.75);
            --hd-glass-line: rgba(255,255,255,.45);
            --hd-shadow: 0 8px 32px -18px rgba(15,23,42,.14), 0 1px 0 rgba(15,23,42,.04);
            --hd-pop: 0 40px 80px -28px rgba(15,23,42,.28), 0 12px 32px -12px rgba(15,23,42,.14);

            /* Segmented action-rail surfaces. The rail is a single recessed
               pill; each control only earns a raised chip on hover/open, so
               four icons read as one object instead of four loose circles. */
            --hd-rail-bg:      rgba(15,23,42,.045);
            --hd-rail-line:    rgba(15,23,42,.075);
            --hd-rail-chip:    #FFFFFF;
            --hd-rail-chip-sh: 0 1px 2px rgba(15,23,42,.10), 0 8px 18px -10px rgba(15,23,42,.30);
            --hd-rail-inset:   inset 0 1px 0 rgba(255,255,255,.6);
            /* Edge treatments — a flat 1px grey rule reads cheap under glass,
               so both bar edges fade out toward the viewport sides. */
            --hd-sheen:    linear-gradient(90deg, transparent, rgba(255,255,255,.75) 15%, rgba(255,255,255,.75) 85%, transparent);
            --hd-hairline: linear-gradient(90deg, transparent, rgba(15,23,42,.10) 12%, rgba(15,23,42,.10) 88%, transparent);
            --hd-wash:     radial-gradient(150% 240% at 0% 0%, rgba(54,128,237,.055), transparent 58%);

            /* Colorful icon tint pairs (bg, ink) — soft in light mode */
            --tint-blue-bg:    rgba(54,128,237,.13);   --tint-blue-ink:    #2060C0;
            --tint-indigo-bg:  rgba(99,102,241,.13);   --tint-indigo-ink:  #4338CA;
            --tint-violet-bg:  rgba(139,92,246,.13);   --tint-violet-ink:  #6D28D9;
            --tint-emerald-bg: rgba(16,185,129,.14);   --tint-emerald-ink: #047857;
            --tint-amber-bg:   rgba(245,158,11,.14);   --tint-amber-ink:   #B45309;
            --tint-rose-bg:    rgba(244,63,94,.13);    --tint-rose-ink:    #BE123C;
            --tint-cyan-bg:    rgba(6,182,212,.14);    --tint-cyan-ink:    #0E7490;
            --tint-pink-bg:    rgba(236,72,153,.13);   --tint-pink-ink:    #BE185D;
            --tint-slate-bg:   rgba(100,116,139,.14);  --tint-slate-ink:   #334155;

            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            color: var(--aits-ink);
            display: block;
            position: relative;
            z-index: 60;
        }
        body.theme-dark .aitshd {
            --hd-glass: rgba(17,17,20,.72);
            --hd-glass-line: rgba(255,255,255,.06);
            --hd-shadow: 0 8px 32px -18px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.03);
            --hd-pop: 0 40px 80px -28px rgba(0,0,0,.75), 0 12px 32px -12px rgba(0,0,0,.5);

            --hd-rail-bg:      rgba(255,255,255,.05);
            --hd-rail-line:    rgba(255,255,255,.08);
            --hd-rail-chip:    rgba(255,255,255,.10);
            --hd-rail-chip-sh: 0 1px 2px rgba(0,0,0,.55), 0 8px 18px -10px rgba(0,0,0,.75);
            --hd-rail-inset:   inset 0 1px 0 rgba(255,255,255,.05);
            --hd-sheen:    linear-gradient(90deg, transparent, rgba(255,255,255,.10) 15%, rgba(255,255,255,.10) 85%, transparent);
            --hd-hairline: linear-gradient(90deg, transparent, rgba(255,255,255,.11) 12%, rgba(255,255,255,.11) 88%, transparent);
            --hd-wash:     radial-gradient(150% 240% at 0% 0%, rgba(54,128,237,.10), transparent 58%);

            --tint-blue-bg: rgba(96,164,245,.16);
            --tint-blue-ink: #93BEFF;
            --tint-indigo-bg: rgba(129,140,248,.16); --tint-indigo-ink: #A5B4FC;
            --tint-violet-bg: rgba(167,139,250,.16); --tint-violet-ink: #C4B5FD;
            --tint-emerald-bg: rgba(52,211,153,.18); --tint-emerald-ink: #6EE7B7;
            --tint-amber-bg: rgba(251,191,36,.18);   --tint-amber-ink: #FCD34D;
            --tint-rose-bg: rgba(251,113,133,.16);   --tint-rose-ink: #FDA4AF;
            --tint-cyan-bg: rgba(34,211,238,.16);    --tint-cyan-ink: #67E8F9;
            --tint-pink-bg: rgba(244,114,182,.16);   --tint-pink-ink: #F9A8D4;
            --tint-slate-bg: rgba(148,163,184,.16);  --tint-slate-ink: #CBD5E1;
        }

        /* Neutralise site-wide a:hover underline/color inside the header */
        .aitshd a,
        .aitshd a:link,
        .aitshd a:visited,
        .aitshd a:hover,
        .aitshd a:focus,
        .aitshd a:active { text-decoration: none !important; }
        /* Tabler ships `a:hover { color: var(--tblr-link-hover-color) }`, which
           resolves to the red primary on the public site. At (0,1,1) it beats
           every single-class colour rule in this header, so any link whose
           colour comes from one class turned RED on hover — that is what made
           "View all providers" red while the unhovered "View all benchmarks"
           stayed blue. This re-asserts the brand colour at equal specificity
           but later in the cascade. Components that need a different hover
           colour already declare it with two classes (or !important on the
           dark surfaces), so they still win. */
        .aitshd a:hover,
        .aitshd a:focus { color: var(--aits-blue-dark); }
        body.theme-dark .aitshd a:hover,
        body.theme-dark .aitshd a:focus { color: var(--aits-blue-light); }
        .aitshd button { font-family: inherit; }
        .aitshd :focus-visible {
            outline: 2px solid var(--aits-blue);
            outline-offset: 2px;
            border-radius: 8px;
        }

        /* ────────────────────────────────────────────────────────────────
           Announcement bar
           ──────────────────────────────────────────────────────────────── */
        .aitshd-ann {
            position: relative;
            background:
                radial-gradient(120% 180% at 8% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%),
                linear-gradient(105deg, var(--aits-blue) 0%, var(--aits-blue-dark) 55%, #1B347F 100%);
            color: #fff;
            display: flex; align-items: center; justify-content: center;
            /* Right padding always reserves the dismiss hit-area so long copy
               can never slide underneath it. */
            padding: 10px calc(20px + var(--ann-x, 0px)) 10px 20px;
            isolation: isolate;
        }
        /* Hairline highlight along the bottom edge — separates the bar from
           the frosted header without a hard border. */
        .aitshd-ann::after {
            content: '';
            position: absolute; inset: auto 0 0 0; height: 1px;
            background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.38), rgba(255,255,255,0));
            pointer-events: none;
        }
        .aitshd-ann[data-dismissible="1"] { --ann-x: 26px; }

        .aitshd-ann-inner {
            display: flex; align-items: center; justify-content: center;
            flex-wrap: wrap;
            gap: 6px 12px;
            max-width: var(--container-hd, 1280px);
            font-size: 13.5px; font-weight: 500;
            line-height: 1.4; letter-spacing: -0.01em;
            text-align: center;
        }
        .aitshd-ann-spark {
            display: inline-flex; align-items: center; justify-content: center;
            width: 24px; height: 24px; flex: none;
            border-radius: 8px;
            background: rgba(255,255,255,.16);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
            color: #fff;
        }
        .aitshd-ann-text { color: rgba(255,255,255,.94); }

        /* Glass CTA pill — the arrow nudges right on hover. */
        .aitshd-ann-cta {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 4px 12px 4px 13px;
            border-radius: 999px;
            background: rgba(255,255,255,.14);
            border: 1px solid rgba(255,255,255,.26);
            color: #fff !important;
            font-weight: 600; font-size: 13px; white-space: nowrap;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
            transition: background-color .2s var(--ease,ease), border-color .2s var(--ease,ease), box-shadow .2s var(--ease,ease), transform .2s var(--ease,ease);
        }
        .aitshd-ann-cta:hover,
        .aitshd-ann-cta:focus-visible {
            background: rgba(255,255,255,.96);
            border-color: rgba(255,255,255,.96);
            color: var(--aits-blue-dark) !important;
            box-shadow: 0 8px 18px -8px rgba(2,12,45,.55);
            transform: translateY(-1px);
        }
        .aitshd-ann-cta:active { transform: translateY(0); }
        .aitshd-ann-arrow { width: 13px; height: 13px; flex: none; transition: transform .2s var(--ease,ease); }
        .aitshd-ann-cta:hover .aitshd-ann-arrow { transform: translateX(3px); }

        .aitshd-ann .aitshd-ann-x {
            position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
            background: rgba(255,255,255,.10); color: #fff;
            border: 1px solid rgba(255,255,255,.18);
            padding: 0; cursor: pointer;
            border-radius: 999px;
            width: 30px; height: 30px; flex: none;
            display: inline-flex; align-items: center; justify-content: center;
            transition: background-color .18s var(--ease,ease), border-color .18s var(--ease,ease), transform .18s var(--ease,ease);
        }
        .aitshd-ann .aitshd-ann-x:hover {
            background: rgba(255,255,255,.24);
            border-color: rgba(255,255,255,.4);
        }
        .aitshd-ann .aitshd-ann-x:active { transform: translateY(-50%) scale(.9); }
        .aitshd-ann :focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 2px; }

        /* Tablet — trim the horizontal rhythm before anything wraps. */
        @media (max-width: 900px) {
            .aitshd-ann { padding: 9px calc(16px + var(--ann-x, 0px)) 9px 16px; }
            .aitshd-ann-inner { font-size: 13px; gap: 6px 10px; }
        }

        /* Phone — sparkle stays inline with the copy (it lives inside
           .aitshd-ann-inner), the CTA drops to its own centered row. */
        @media (max-width: 640px) {
            .aitshd-ann { padding: 9px calc(12px + var(--ann-x, 0px)) 9px 12px; }
            .aitshd-ann[data-dismissible="1"] { --ann-x: 28px; }
            .aitshd-ann-inner { font-size: 12.5px; gap: 6px 8px; line-height: 1.35; }
            .aitshd-ann-spark { width: 20px; height: 20px; border-radius: 6px; }
            .aitshd-ann-spark svg { width: 12px; height: 12px; }
            .aitshd-ann-cta { flex-basis: 100%; justify-content: center; font-size: 12.5px; padding: 4px 12px; }
            .aitshd-ann .aitshd-ann-x { right: 6px; width: 28px; height: 28px; }
        }
        /* Very small — drop the decorative chip, keep the message readable. */
        @media (max-width: 380px) {
            .aitshd-ann-spark { display: none; }
            .aitshd-ann-inner { font-size: 12px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-ann-cta, .aitshd-ann-arrow, .aitshd-ann .aitshd-ann-x { transition: none; }
            .aitshd-ann-cta:hover { transform: none; }
            .aitshd-ann-cta:hover .aitshd-ann-arrow { transform: none; }
        }

        /* ────────────────────────────────────────────────────────────────
           Sticky bar — glassmorphism
           ──────────────────────────────────────────────────────────────── */
        .aitshd-bar {
            width: 100%;
            /* colour + wash are set separately so the [data-style="solid"]
               variant can swap the colour without dropping the gradient. */
            background-color: var(--hd-glass);
            background-image: var(--hd-wash);
            backdrop-filter: saturate(180%) blur(24px);
            -webkit-backdrop-filter: saturate(180%) blur(24px);
            border-bottom: 0;
            box-shadow: var(--hd-shadow);
            z-index: 60;
        }
        /* Both edges are fading gradient rules, not solid borders: ::before is
           the top sheen that sells the glass, ::after the bottom hairline that
           firms up once the page scrolls under it. */
        .aitshd-bar::before,
        .aitshd-bar::after {
            content: ''; position: absolute; left: 0; right: 0;
            height: 1px; pointer-events: none;
        }
        .aitshd-bar::before { top: 0; background: var(--hd-sheen); }
        .aitshd-bar::after {
            bottom: 0; background: var(--hd-hairline);
            opacity: .7;
            transition: opacity .25s var(--ease,ease);
        }
        .aitshd[data-scrolled="1"] .aitshd-bar::after { opacity: 1; }
        .aitshd-bar { position: relative; }
        /* Sticky sits on <header>, NOT on the bar.
           A sticky box can only travel inside its own containing block, and
           .aitshd-bar's is <header class="aitshd"> — a normal-flow block only
           as tall as the announcement strip plus the bar itself. Pinned there
           the bar could move at most the announcement's ~40px before its
           parent scrolled out from under it and carried it off screen, so the
           header read as "not sticky at all" even though the rule was live.
           Sticking the HEADER at a negative offset equal to the announcement
           height preserves the original intent — the announcement scrolls
           away, the bar lands flush against the viewport top and stays.
           --hd-ann-h is measured at the foot of this component rather than
           hard-coded: the strip wraps to two lines on narrow screens and can
           be dismissed. It falls back to 0px so a JS-less render still pins,
           just with the announcement along for the ride. */
        .aitshd[data-sticky="1"] { position: sticky; top: calc(-1 * var(--hd-ann-h, 0px)); }
        .aitshd[data-style="solid"] .aitshd-bar {
            background-color: var(--aits-card);
            backdrop-filter: none; -webkit-backdrop-filter: none;
        }
        /* Scrolled state — deeper frost + a touch more lift, and the bar
           tightens by 6px so the page gains vertical room as you read.
           Toggled by the scroll observer at the foot of this component. */
        .aitshd .aitshd-bar {
            transition: box-shadow .25s var(--ease,ease), background-color .25s var(--ease,ease);
        }
        .aitshd[data-scrolled="1"] {
            --hd-h: calc(var(--hd-h-base) - 6px);
            --hd-glass: rgba(255,255,255,.86);
            --hd-shadow: 0 10px 34px -14px rgba(15,23,42,.22), 0 1px 0 rgba(15,23,42,.05);
        }
        body.theme-dark .aitshd[data-scrolled="1"] {
            --hd-glass: rgba(17,17,20,.88);
            --hd-shadow: 0 10px 34px -14px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04);
        }

        .aitshd-inner {
            max-width: var(--container-hd, 1280px);
            margin: 0 auto;
            padding: 0 24px;
            height: var(--hd-h);
            /* 3-column grid keeps the nav visually centered inside the
               container regardless of how wide brand vs. actions get. */
            display: grid;
            /* `1fr auto 1fr` made both side tracks equal, so the brand column
               was padded out to match the ACTIONS column (329px with the full
               account chip) — 187px of dead space that pushed the row past its
               own 1280px container and put a horizontal scrollbar on every
               page of the site.
               Sizing the sides to their content and letting the middle absorb
               the slack keeps the nav centred between them without the row
               ever being able to exceed the container. */
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            column-gap: 24px;
            transition: height .25s var(--ease,ease);
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-inner, .aitshd .aitshd-bar { transition: none; }
        }
        .aitshd-inner > .aitshd-brand   { justify-self: start;  min-width: 0; }
        .aitshd-inner > .aitshd-nav     { justify-self: center; min-width: 0; }
        .aitshd-inner > .aitshd-actions { justify-self: end;    min-width: 0; }
        /* Below the nav breakpoint the nav is hidden — switch to a flex
           row so the brand hugs left and the actions hug right cleanly. */
        @media (max-width: 1279.98px) {
            .aitshd-inner {
                display: flex;
                justify-content: space-between;
                gap: 12px;
            }
        }
        @media (max-width: 1200px) { .aitshd-inner { padding: 0 20px; column-gap: 16px; } }

        /* Responsive height + gutters. Landscape notches get safe-area padding
           so the brand never sits under the sensor housing. */
        @media (max-width: 1279.98px) { .aitshd { --hd-h-base: 68px; } }
        @media (max-width: 640px) {
            .aitshd { --hd-h-base: 62px; }
            .aitshd-inner {
                padding-left:  max(14px, env(safe-area-inset-left));
                padding-right: max(14px, env(safe-area-inset-right));
                gap: 8px;
            }
        }
        @media (max-width: 380px) { .aitshd-inner { padding-left: max(11px, env(safe-area-inset-left)); padding-right: max(11px, env(safe-area-inset-right)); } }

        /* ────────────────────────────────────────────────────────────────
           Brand lockup — renders the admin-uploaded logo at natural
           width when present; falls back to a gradient mark + wordmark
           only when no logo image has been uploaded yet.
           ──────────────────────────────────────────────────────────────── */
        .aitshd-brand {
            display: inline-flex; align-items: center; gap: 12px;
            text-decoration: none; color: var(--aits-ink);
            flex: none;
            min-height: 44px;
        }
        /* Uploaded logo — free-standing image, no background chip */
        .aitshd-brand-logo {
            display: inline-flex; align-items: center;
        }
        .aitshd-brand-logo img {
            display: block;
            height: 44px;
            width: auto;
            max-width: 240px;
            object-fit: contain;
        }
        /* Theme-aware logo swap. BOTH images are in the DOM; CSS decides which
           one paints, so the lockup follows a client-side theme change with no
           reload and can never go stale against the cookie. Mirrors the
           footer's .aitsft-logo-l / .aitsft-logo-d pair. When the admin has
           only uploaded a light logo, .aitshd-brand-logo-d is simply absent
           and the `:only-child` rule keeps it visible in both themes.

           SPECIFICITY: every selector here qualifies the class with `img` AND
           the parent, giving (0,2,1)+. A bare `.aitshd-brand-logo-d` is only
           (0,1,0) and LOSES to `.aitshd-brand-logo img { display: block }`
           above at (0,1,1) — that rendered both logos side by side. Keep the
           `.aitshd-brand-logo img.…` shape on any rule added here. */
        .aitshd-brand-logo img.aitshd-brand-logo-d { display: none; }
        body.theme-dark .aitshd-brand-logo img.aitshd-brand-logo-l { display: none; }
        body.theme-dark .aitshd-brand-logo img.aitshd-brand-logo-d { display: block; }
        /* Single-logo sites: never hide the only logo there is. */
        body.theme-dark .aitshd-brand-logo img.aitshd-brand-logo-l:only-child { display: block; }

        /* Theme-toggle icon + label swap — same rationale as the logo. In light
           mode the button offers the moon ("go dark"); in dark mode the sun.
           Both are in the DOM so the button relabels itself the instant the
           body class flips, with no reload.
           The classes sit directly on the <svg> (via $aitshdIcon's 3rd arg)
           rather than on a wrapper span, so the `.aitshd-icon-btn > svg`
           direct-child rules above still match and the icon keeps its
           transition and its 640/380px responsive sizing. */
        .aitshd-theme-ic-sun,
        .aitshd-theme-lbl-sun  { display: none; }
        body.theme-dark .aitshd-theme-ic-moon,
        body.theme-dark .aitshd-theme-lbl-moon { display: none; }
        body.theme-dark .aitshd-theme-ic-sun   { display: block; }
        body.theme-dark .aitshd-theme-lbl-sun  { display: inline; }
        /* Fallback mark chip — used only when no admin logo is uploaded */
        .aitshd-brand-mark {
            display: inline-flex; align-items: center; justify-content: center;
            width: 44px; height: 44px; border-radius: 12px;
            background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark));
            box-shadow: 0 8px 20px -6px rgba(54,128,237,.45), inset 0 1px 0 rgba(255,255,255,.35);
            color: #fff;
            flex: none;
        }
        .aitshd-brand-mark-glyph { display: inline-flex; align-items: center; justify-content: center; }
        .aitshd-brand-mark-glyph svg { width: 22px; height: 22px; }
        .aitshd-brand-copy { display: inline-flex; flex-direction: column; line-height: 1; }
        .aitshd-brand-name {
            font-weight: 800; font-size: 20px; letter-spacing: -0.02em;
            display: inline-flex; align-items: baseline; gap: 1px;
            color: var(--aits-ink);
        }
        .aitshd-brand-name .aitshd-brand-accent { color: var(--aits-blue); }
        .aitshd-brand-tag {
            display: none; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
            color: var(--aits-blue); font-weight: 700; margin-top: 4px;
        }
        @media (min-width: 1200px) { .aitshd-brand-tag { display: block; } }
        /* The brand is the one element allowed to shrink — actions keep their
           full touch targets, so the logo steps down instead of squeezing them.
           The min-width:0 chain is the safety valve: on a 360px screen the
           stepped max-widths still leave the row a couple of pixels over, and
           without it flex:none would push the burger off the edge. */
        @media (max-width: 1279.98px) {
            .aitshd-brand      { flex: 0 1 auto; min-width: 0; }
            .aitshd-brand-logo { min-width: 0; }
            .aitshd-brand-logo img { height: 38px; max-width: min(200px, 100%); }
        }
        @media (max-width: 640px) {
            .aitshd-brand { gap: 9px; min-height: 40px; }
            .aitshd-brand-logo img { height: 34px; max-width: min(160px, 100%); }
            .aitshd-brand-mark { width: 38px; height: 38px; border-radius: 11px; }
            .aitshd-brand-name { font-size: 18px; }
        }
        @media (max-width: 380px) {
            .aitshd-brand-logo img { height: 30px; max-width: min(124px, 100%); }
            .aitshd-brand-name { font-size: 16.5px; }
        }
        /* Pointer feedback on the lockup. A plain opacity fade reads like a
           broken link, so instead the mark lifts a hair and a soft brand halo
           blooms behind it — the wordmark itself never dims. */
        .aitshd-brand {
            position: relative;
            padding: 4px 10px 4px 6px;
            margin-left: -6px;
            border-radius: 14px;
            transition: transform .22s var(--ease,ease);
        }
        .aitshd-brand::before {
            content: ''; position: absolute; inset: 0;
            border-radius: inherit;
            background: var(--aits-blue-tint-2);
            opacity: 0; transform: scale(.9);
            transition: opacity .22s var(--ease,ease), transform .28s var(--ease,ease);
        }
        .aitshd-brand > * { position: relative; z-index: 1; }
        @media (hover: hover) {
            .aitshd-brand:hover::before { opacity: 1; transform: scale(1); }
            .aitshd-brand:hover .aitshd-brand-mark {
                transform: translateY(-1px) rotate(-4deg);
                box-shadow: 0 12px 26px -8px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.4);
            }
        }
        .aitshd-brand-mark { transition: transform .28s var(--ease,ease), box-shadow .28s var(--ease,ease); }
        .aitshd-brand:active { transform: scale(.982); }
        @media (max-width: 640px) { .aitshd-brand { padding: 4px 6px; margin-left: -4px; } }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-brand, .aitshd-brand::before, .aitshd-brand-mark { transition: none; }
            .aitshd-brand:hover .aitshd-brand-mark, .aitshd-brand:active { transform: none; }
        }

        /* ────────────────────────────────────────────────────────────────
           Primary nav
           ──────────────────────────────────────────────────────────────── */
        .aitshd-nav {
            display: none;
            align-items: center; gap: 4px;
            justify-content: center;
        }
        /* 1280, not 1024. Seven pills + brand + Sign in + Get Started need
           ~1190px of row before any compression, so below 1280 the nav simply
           cannot fit and the burger + drawer carry navigation instead. The
           mega rules keep their own 1024 gate on purpose — a mega only opens
           from a nav link, so they are inert while the nav is hidden. */
        @media (min-width: 1280px) { .aitshd-nav { display: flex; } }
        /* Tight window between the nav appearing and the row having slack.

           ⚠️ THE 1279px FIGURE WAS MEASURED WITH **SIX** PILLS. A seventh was
           added later — AI Tools · Tools · AI Models · AI Learn · Deals ·
           Discover · Resources — and it is ~130px wide, so from ~1280 up to
           ~1500 the full-size nav no longer fitted. `auto minmax(0,1fr) auto`
           lets the middle TRACK shrink, but the pills are `white-space:
           nowrap`, so they overflow the track instead of compressing: the
           first pill ran under the brand and the last ran under the search
           icon. That is the reported "header truncate / menu misalignment".

           Whenever a nav section is added or removed, RE-MEASURE these two
           breakpoints — and check the longest *translated* label, not the
           English one, since the labels are admin- and locale-driven. */
        @media (min-width: 1280px) and (max-width: 1559.98px) {
            .aitshd-nav { gap: 0; }
        }

        /* Drop each pill's leading glyph — 16px icon + 7px gap across seven
           links is ~161px, comfortably more than the worst overlap, and the
           label plus its caret still say everything the icon did. The caret
           survives: it lives inside .aitshd-caret, not here. Above 1500 the
           row has enough slack to keep the glyphs. */
        @media (min-width: 1280px) and (max-width: 1499.98px) {
            .aitshd-navlink > svg { display: none; }
        }
        /* Nav pills — premium, brand-cohesive treatment that echoes the
           blue→violet accent used across the mega panels. Text always
           reads at ink weight; hover paints a soft gradient wash + a
           gradient underline that wipes out from centre. Open/current
           states firm up into a tinted pill with a persistent underline
           and a subtle ring. All state colors go through --aits-* so
           the dark-mode variants inherit automatically. */
        .aitshd-navlink {
            position: relative;
            display: inline-flex; align-items: center; gap: 7px;
            padding: 9px 14px 10px;
            border-radius: 12px;
            font-size: 14.5px; font-weight: 600; letter-spacing: -.008em;
            color: var(--aits-ink-soft);
            text-decoration: none; white-space: nowrap; line-height: 1.15;
            transition: color .2s var(--ease,ease), transform .2s var(--ease,ease);
            background: transparent; border: 0; cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            isolation: isolate;
        }
        /* Continuous compression across the same window, so a longer translated
           label degrades smoothly instead of falling off a cliff at one
           breakpoint: 1024 → 9px/13.5px · 1456 → ~12.4px/13.8px · 1560 → hands
           back to the base rule's 14px/14.5px. Padding shrinks before type
           does, because whitespace is the cheaper thing to lose. */
        @media (min-width: 1280px) and (max-width: 1559.98px) {
            .aitshd-navlink {
                padding-left: clamp(9px, 0.85vw, 14px);
                padding-right: clamp(9px, 0.85vw, 14px);
                font-size: clamp(13.5px, 0.95vw, 14.5px);
            }
        }
        /* Hover surface — gradient blue→violet wash that scales up out of
           the label. Matches the mega row hover wash so hovering into a
           mega feels like the same interaction. Children ride above via
           position:relative + z-index:1. */
        .aitshd-navlink::before {
            content: '';
            position: absolute; inset: 0;
            border-radius: inherit;
            background: linear-gradient(90deg, rgba(54,128,237,.10), rgba(139,92,246,.08));
            box-shadow: inset 0 0 0 1px transparent;
            opacity: 0; transform: scale(.88);
            transition: opacity .22s var(--ease,ease), transform .3s var(--ease,ease),
                        background .2s var(--ease,ease), box-shadow .2s var(--ease,ease);
            z-index: 0;
        }
        body.theme-dark .aitshd-navlink::before {
            background: linear-gradient(90deg, rgba(96,164,245,.14), rgba(167,139,250,.10));
        }
        .aitshd-navlink > svg,
        .aitshd-navlink > span,
        .aitshd-navlink .aitshd-caret { position: relative; z-index: 1; }
        .aitshd-navlink > svg {
            color: var(--aits-mut); flex: none;
            transition: color .2s var(--ease,ease), transform .28s var(--ease,ease);
        }
        /* Gradient underline — brand blue→violet, matches the mega header
           accent bars so the pill and the mega read as one system. Wipes
           out from centre; sits low enough not to compete with descenders. */
        .aitshd-navlink::after {
            content: '';
            position: absolute; left: 50%; bottom: 3px;
            width: 0; height: 2.5px; border-radius: 999px;
            transform: translateX(-50%);
            background: linear-gradient(90deg, #3B82F6, #8B5CF6);
            opacity: 0; z-index: 2;
            transition: width .3s var(--ease,ease), opacity .2s var(--ease,ease);
            pointer-events: none;
        }

        @media (hover: hover) {
            .aitshd-navlink:hover {
                color: var(--aits-blue-dark);
                transform: translateY(-1px);
            }
            .aitshd-navlink:hover::before { opacity: 1; transform: scale(1); }
            .aitshd-navlink:hover::after  { width: 22px; opacity: .55; }
            .aitshd-navlink:hover > svg   { color: var(--aits-blue); transform: scale(1.1); }
            .aitshd-navlink:hover .aitshd-caret { opacity: 1; }
        }
        .aitshd-navlink:active { transform: scale(.97); }

        /* Open menu — the pill firms up into a tinted surface with a soft
           blue→violet ring and glow, and the underline stays visible so
           the pill locks onto the open panel below. */
        .aitshd-navlink[aria-expanded="true"] { color: var(--aits-blue-dark); transform: none; }
        .aitshd-navlink[aria-expanded="true"]::before {
            opacity: 1; transform: scale(1);
            background: linear-gradient(90deg, rgba(54,128,237,.14), rgba(139,92,246,.10));
            box-shadow:
                inset 0 0 0 1px rgba(54,128,237,.18),
                0 8px 20px -12px rgba(99,102,241,.55);
        }
        body.theme-dark .aitshd-navlink[aria-expanded="true"]::before {
            background: linear-gradient(90deg, rgba(96,164,245,.20), rgba(167,139,250,.14));
            box-shadow:
                inset 0 0 0 1px rgba(96,164,245,.28),
                0 8px 20px -12px rgba(99,102,241,.65);
        }
        .aitshd-navlink[aria-expanded="true"] > svg { color: var(--aits-blue); }
        .aitshd-navlink[aria-expanded="true"]::after { width: 24px; opacity: 1; }

        /* Current page — same underline treatment, softer bg */
        .aitshd-navlink.is-current { color: var(--aits-blue-dark); }
        .aitshd-navlink.is-current > svg { color: var(--aits-blue); }
        .aitshd-navlink.is-current::after { width: 22px; opacity: 1; }

        /* Dark mode: #2060C0 goes muddy on near-black — step every
           accent-on-tint label up to the light blue. */
        body.theme-dark .aitshd-navlink { color: var(--aits-txt); }
        body.theme-dark .aitshd-navlink:hover,
        body.theme-dark .aitshd-navlink.is-current,
        body.theme-dark .aitshd-navlink[aria-expanded="true"] { color: var(--aits-blue-light); }
        body.theme-dark .aitshd-navlink:hover > svg,
        body.theme-dark .aitshd-navlink.is-current > svg,
        body.theme-dark .aitshd-navlink[aria-expanded="true"] > svg { color: var(--aits-blue-light); }

        .aitshd-navlink .aitshd-caret {
            display: inline-flex; margin-left: -2px; opacity: .5;
            color: var(--aits-mut);
            transition: transform .28s var(--ease,ease), opacity .2s var(--ease,ease), color .2s var(--ease,ease);
        }
        .aitshd-navlink:hover .aitshd-caret,
        .aitshd-navlink[aria-expanded="true"] .aitshd-caret { color: var(--aits-blue); }
        .aitshd-navlink[aria-expanded="true"] .aitshd-caret { transform: rotate(180deg); opacity: 1; }

        @media (prefers-reduced-motion: reduce) {
            .aitshd-navlink, .aitshd-navlink::before, .aitshd-navlink::after,
            .aitshd-navlink > svg, .aitshd-navlink .aitshd-caret { transition: none; }
            .aitshd-navlink:hover, .aitshd-navlink:active { transform: none; }
            .aitshd-navlink:hover > svg { transform: none; }
        }

        /* ────────────────────────────────────────────────────────────────
           Right actions row
           ──────────────────────────────────────────────────────────────── */
        .aitshd-actions {
            display: flex; align-items: center; gap: 10px;
            margin-left: auto;
            flex: none;
        }

        /* ── Segmented tool rail ──────────────────────────────────────────
           Search / theme / notifications / language live inside one recessed
           pill. At rest each control is invisible chrome; hover or open lifts
           a single chip out of the rail. Four identical outlined circles read
           as clutter — one rail reads as a control. */
        .aitshd-tools {
            display: inline-flex; align-items: center; gap: 2px;
            padding: 3px;
            border-radius: 999px;
            background: var(--hd-rail-bg);
            border: 1px solid var(--hd-rail-line);
            box-shadow: var(--hd-rail-inset);
            flex: none;
        }
        .aitshd-tools-sep {
            width: 1px; height: 18px; flex: none;
            margin: 0 3px;
            background: var(--hd-rail-line);
        }
        /* Config can switch off search + theme; never lead the rail with a rule. */
        .aitshd-tools-sep:first-child { display: none; }
        .aitshd-tools .aitshd-icon-btn {
            width: 36px; height: 36px;
            background: transparent;
            border-color: transparent;
            box-shadow: none;
            color: var(--aits-txt);
        }
        /* Deliberately NOT gated behind @media (hover:hover): the base
           .aitshd-icon-btn:hover isn't gated either, so a touch tap would
           otherwise leave a stray outlined circle sitting inside the rail. */
        .aitshd-tools .aitshd-icon-btn:hover,
        .aitshd-tools .aitshd-icon-btn:focus-visible,
        .aitshd-tools .aitshd-icon-btn.active,
        .aitshd-tools .aitshd-icon-btn[aria-expanded="true"] {
            background: var(--hd-rail-chip);
            border-color: transparent;
            box-shadow: var(--hd-rail-chip-sh);
            color: var(--aits-blue-dark);
            transform: none;               /* the chip does the lifting, not a nudge */
        }
        .aitshd-tools .aitshd-icon-btn:active { transform: scale(.9); }
        body.theme-dark .aitshd-tools .aitshd-icon-btn:hover,
        body.theme-dark .aitshd-tools .aitshd-icon-btn.active,
        body.theme-dark .aitshd-tools .aitshd-icon-btn[aria-expanded="true"] { color: var(--aits-blue-light); }
        /* Notifications + language keep their own positioning context inside
           the rail so their popovers still anchor to the button. */
        .aitshd-tools > .aitshd-notif,
        .aitshd-tools > .aitshd-lang { display: inline-flex; }
        /* Bell + language are drawer-side controls on small screens — the bar
           keeps only what a thumb reaches for. */
        @media (max-width: 1279.98px) {
            .aitshd-tools > .aitshd-notif,
            .aitshd-tools > .aitshd-lang,
            .aitshd-tools .aitshd-tools-sep { display: none; }
        }
        @media (max-width: 640px) {
            .aitshd-tools { padding: 2px; }
            .aitshd-tools .aitshd-icon-btn { width: 34px; height: 34px; }
        }
        @media (max-width: 380px) {
            .aitshd-tools .aitshd-icon-btn { width: 32px; height: 32px; }
        }

        /* Filled search pill (opens ezsx overlay) */
        .aitshd-search {
            display: none;
            align-items: center; gap: 10px;
            height: 42px; padding: 0 8px 0 16px;
            min-width: 240px; max-width: 320px;
            border-radius: 999px;
            background: var(--aits-surface-3);
            border: 1px solid var(--aits-line);
            color: var(--aits-mut);
            font-size: 13.5px; font-weight: 500;
            cursor: pointer;
            text-decoration: none;
            transition: background-color .18s, border-color .18s, box-shadow .18s;
        }
        @media (min-width: 900px) { .aitshd-search { display: inline-flex; } }
        @media (min-width: 1360px) { .aitshd-search { min-width: 320px; max-width: 380px; } }
        .aitshd-search:hover,
        .aitshd-search:focus {
            background: var(--aits-card);
            border-color: var(--aits-blue-line);
            box-shadow: 0 6px 18px -10px rgba(54,128,237,.35);
        }
        .aitshd-search-ico { color: var(--aits-mut); flex: none; }
        .aitshd-search:hover .aitshd-search-ico { color: var(--aits-blue); }
        .aitshd-search-text { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .aitshd-search-kbd {
            flex: none;
            display: inline-flex; align-items: center; gap: 3px;
            padding: 4px 8px; border-radius: 8px;
            background: var(--aits-card);
            border: 1px solid var(--aits-line);
            font-family: var(--font-mono, ui-monospace);
            font-size: 11px; font-weight: 600;
            color: var(--aits-mut);
            letter-spacing: .02em;
        }
        body.theme-dark .aitshd-search-kbd { background: var(--aits-surface-2); }

        /* A keyboard hint on a device with no keyboard is dead pixels. The
           header bar only shows from 900px, but that catches tablets too. */
        @media (hover: none) {
            .aitshd-search-kbd { display: none; }
        }

        /* ── Drawer search — the mobile one ────────────────────────────────
           Full-width and touch-sized (50px clears the 44px minimum with
           room), with the magnifier promoted to a tinted chip and a solid
           brand chip on the right standing in for ⌘K. It reads as something
           you TAP rather than a disabled input, which is what the flat pill
           with a keyboard badge looked like on a phone. */
        .aitshd-drawer .aitshd-search {
            display: flex;
            width: 100%;
            min-width: 0;
            max-width: none;
            height: 50px;
            margin: 0 0 14px;
            padding: 0 7px 0 7px;
            gap: 11px;
            border-radius: 15px;
            font-size: 14.5px;
            background: var(--aits-surface-3);
            border: 1px solid var(--aits-line);
            box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
            transition: border-color .18s var(--ease,ease), box-shadow .18s var(--ease,ease), transform .18s var(--ease,ease);
        }
        .aitshd-drawer .aitshd-search-ico {
            width: 34px; height: 34px;
            border-radius: 11px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--aits-blue-tint);
            color: var(--aits-blue);
            box-shadow: inset 0 0 0 1px var(--aits-blue-line);
        }
        .aitshd-drawer .aitshd-search-text {
            font-weight: 500;
            color: var(--aits-mut);
        }
        .aitshd-drawer .aitshd-search-go {
            flex: none;
            width: 34px; height: 34px;
            border-radius: 11px;
            display: inline-flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark));
            color: #fff;
            box-shadow: 0 6px 14px -8px var(--aits-blue-dark);
            transition: transform .2s var(--ease,ease);
        }
        /* :active, not :hover — this control never sees a hover. */
        .aitshd-drawer .aitshd-search:active {
            transform: scale(.995);
            border-color: var(--aits-blue-line);
        }
        .aitshd-drawer .aitshd-search:active .aitshd-search-go { transform: scale(.93); }
        .aitshd-drawer .aitshd-search:focus-visible {
            outline: none;
            border-color: var(--aits-blue);
            box-shadow: 0 0 0 3px rgba(54, 128, 237, .28);
        }
        body.theme-dark .aitshd-drawer .aitshd-search {
            background: var(--aits-surface-2);
            box-shadow: none;
        }
        body.theme-dark .aitshd-drawer .aitshd-search-ico {
            background: rgba(96, 164, 245, .16);
            color: #93BEFF;
            box-shadow: inset 0 0 0 1px rgba(96, 164, 245, .28);
        }

        /* Icon buttons: theme toggle, notifications, language, hamburger */
        .aitshd-icon-btn {
            width: 42px; height: 42px; border-radius: 999px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--aits-surface-3);
            border: 1px solid var(--aits-line);
            color: var(--aits-ink-soft);
            cursor: pointer; text-decoration: none;
            position: relative;
            transition: background-color .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
        }
        .aitshd-icon-btn:hover,
        .aitshd-icon-btn:focus-visible {
            background: var(--aits-card);
            border-color: var(--aits-blue-line);
            color: var(--aits-blue-dark);
            box-shadow: 0 8px 20px -10px rgba(54,128,237,.45);
            transform: translateY(-1px);
        }
        /* Press feedback — reads as a physical button on touch too. */
        .aitshd-icon-btn:active { transform: translateY(0) scale(.93); box-shadow: none; }
        .aitshd-icon-btn > svg { transition: transform .2s var(--ease,ease); }
        .aitshd-icon-btn:hover > svg { transform: scale(1.06); }
        .aitshd-icon-btn.active,
        .aitshd-icon-btn[aria-expanded="true"] {
            background: var(--aits-blue-tint);
            border-color: var(--aits-blue-line);
            color: var(--aits-blue-dark);
        }
        body.theme-dark .aitshd-icon-btn:hover,
        body.theme-dark .aitshd-icon-btn:focus-visible { color: var(--aits-blue-light); }
        /* Coarse pointers get no hover-lift (it sticks after a tap) but keep
           the press state. */
        @media (hover: none) {
            .aitshd-icon-btn:hover { transform: none; box-shadow: none; }
            .aitshd-icon-btn:hover > svg { transform: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-icon-btn, .aitshd-icon-btn > svg { transition: none; }
            .aitshd-icon-btn:hover, .aitshd-icon-btn:active { transform: none; }
            .aitshd-icon-btn:hover > svg { transform: none; }
        }
        /* Compact on phones — 38px keeps four actions + logo on a 360px screen
           while staying above the 44px tap target once padding is counted. */
        @media (max-width: 640px) {
            .aitshd-actions { gap: 6px; }
            .aitshd-icon-btn { width: 38px; height: 38px; }
            .aitshd-icon-btn > svg { width: 17px; height: 17px; }
        }
        @media (max-width: 380px) {
            .aitshd-actions { gap: 4px; }
            .aitshd-icon-btn { width: 35px; height: 35px; }
            .aitshd-icon-btn > svg { width: 16px; height: 16px; }
        }
        .aitshd-theme-form { display: inline-flex; margin: 0; padding: 0; border: 0; }

        /* Notification dot/badge */
        .aitshd-icon-btn .aitshd-badge {
            position: absolute;
            top: 4px; right: 4px;
            min-width: 16px; height: 16px;
            padding: 0 4px;
            border-radius: 999px;
            background: #E11D48;
            color: #fff;
            font-size: 10px; font-weight: 700;
            display: inline-flex; align-items: center; justify-content: center;
            box-shadow: 0 0 0 2px var(--aits-card);
            line-height: 1;
        }
        body.theme-dark .aitshd-icon-btn .aitshd-badge { box-shadow: 0 0 0 2px var(--aits-bg); }

        /* Sign-in / Register pills */
        .aitshd-cta-outline, .aitshd-cta-primary, .aitshd-cta-coffee {
            display: inline-flex; align-items: center; gap: 8px;
            height: 42px;
            padding: 0 18px;
            border-radius: 999px;
            font-size: 14px; font-weight: 600;
            white-space: nowrap; line-height: 1.2;
            text-decoration: none;
            transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
        }
        .aitshd-cta-outline {
            color: var(--aits-ink);
            background: var(--aits-card);
            border: 1.5px solid var(--aits-line-strong);
        }
        .aitshd-cta-outline:hover {
            border-color: var(--aits-blue);
            color: var(--aits-blue-dark);
            transform: translateY(-1px);
            box-shadow: 0 6px 16px -10px rgba(54,128,237,.5);
        }
        .aitshd-cta-outline svg { color: var(--aits-blue); }
        .aitshd-cta-primary {
            position: relative;
            overflow: hidden;
            color: #fff;
            background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark));
            border: 1px solid var(--aits-blue);
            box-shadow: 0 10px 24px -10px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.2);
        }
        /* Light sweeps across the fill on hover — the one place in the bar
           that earns a flourish, because it is the single primary action. */
        .aitshd-cta-primary::after {
            content: '';
            position: absolute; top: 0; bottom: 0; left: -60%;
            width: 45%;
            background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
            transform: skewX(-18deg);
            opacity: 0;
            transition: left .6s var(--ease,ease), opacity .2s;
            pointer-events: none;
        }
        .aitshd-cta-primary > * { position: relative; z-index: 1; }
        .aitshd-cta-primary:hover,
        .aitshd-cta-primary:focus {
            color: #fff !important;
            transform: translateY(-1px);
            box-shadow: 0 14px 28px -10px rgba(54,128,237,.6), inset 0 1px 0 rgba(255,255,255,.25);
        }
        @media (hover: hover) {
            .aitshd-cta-primary:hover::after { left: 115%; opacity: 1; }
        }
        .aitshd-cta-primary:active { transform: translateY(0) scale(.97); }
        .aitshd-cta-outline:active { transform: translateY(0) scale(.97); }
        .aitshd-cta-primary svg,
        .aitshd-cta-outline svg { transition: transform .24s var(--ease,ease); }
        @media (hover: hover) {
            .aitshd-cta-primary:hover svg { transform: translateX(3px); }
            .aitshd-cta-outline:hover svg { transform: scale(1.08); }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-cta-primary, .aitshd-cta-outline, .aitshd-cta-primary::after,
            .aitshd-cta-primary svg, .aitshd-cta-outline svg { transition: none; }
            .aitshd-cta-primary:hover, .aitshd-cta-outline:hover,
            .aitshd-cta-primary:active, .aitshd-cta-outline:active { transform: none; }
            .aitshd-cta-primary:hover::after { left: -60%; opacity: 0; }
            .aitshd-cta-primary:hover svg, .aitshd-cta-outline:hover svg { transform: none; }
        }
        .aitshd-cta-coffee {
            color: #111 !important;
            background: linear-gradient(135deg, #FFD16A, #F09E00);
            border: 1px solid #F09E00;
            box-shadow: 0 8px 20px -8px rgba(217,119,6,.55);
        }
        .aitshd-cta-coffee:hover,
        .aitshd-cta-coffee:focus {
            color: #111 !important;
            transform: translateY(-1px);
            box-shadow: 0 12px 24px -8px rgba(217,119,6,.65);
        }

        /* Hamburger only on small screens */
        .aitshd-burger { display: inline-flex; }
        @media (min-width: 1280px) { .aitshd-burger { display: none; } }

        /* Language dropdown */
        .aitshd-lang { position: relative; }
        .aitshd-lang-menu {
            position: absolute; right: 0; top: calc(100% + 10px);
            background: var(--aits-card);
            border: 1px solid var(--aits-line);
            box-shadow: var(--sh-lg);
            border-radius: 14px; padding: 6px;
            min-width: 210px;
            display: none;
            z-index: 90;
        }
        .aitshd-lang.open .aitshd-lang-menu { display: block; }
        .aitshd-lang-menu a {
            display: flex; align-items: center; gap: 10px;
            padding: 8px 12px; border-radius: 10px;
            font-size: 14px; font-weight: 500;
            color: var(--aits-ink-soft); text-decoration: none;
        }
        .aitshd-lang-menu a:hover {
            background: var(--aits-blue-tint-2);
            color: var(--aits-blue-dark);
        }

        /* Notifications dropdown */
        .aitshd-notif { position: relative; }
        .aitshd-notif-menu {
            position: absolute; right: 0; top: calc(100% + 10px);
            background: var(--aits-card);
            border: 1px solid var(--aits-line);
            box-shadow: var(--hd-pop);
            border-radius: 18px;
            width: 340px;
            padding: 8px;
            display: none;
            z-index: 90;
            overflow: hidden;
        }
        .aitshd-notif.open .aitshd-notif-menu { display: block; }
        .aitshd-notif-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 12px 10px;
            border-bottom: 1px solid var(--aits-line);
        }
        .aitshd-notif-head strong {
            font-size: 14px; font-weight: 700; color: var(--aits-ink);
            letter-spacing: -0.01em;
        }
        .aitshd-notif-head a {
            font-size: 12px; font-weight: 600;
            color: var(--aits-blue);
        }
        .aitshd-notif-list { padding: 6px 0; max-height: 320px; overflow-y: auto; }
        .aitshd-notif-item {
            display: flex; align-items: flex-start; gap: 10px;
            padding: 12px; border-radius: 12px;
            text-decoration: none; color: var(--aits-ink-soft);
            transition: background-color .12s;
        }
        .aitshd-notif-item:hover { background: var(--aits-surface-2); }
        .aitshd-notif-item .aitshd-notif-dot {
            width: 8px; height: 8px; border-radius: 999px;
            background: var(--aits-blue); flex: none; margin-top: 6px;
        }
        .aitshd-notif-item.read .aitshd-notif-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--aits-line-strong); }
        .aitshd-notif-body { flex: 1; min-width: 0; }
        .aitshd-notif-title {
            font-size: 13.5px; font-weight: 600;
            color: var(--aits-ink); margin: 0 0 3px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-notif-meta { font-size: 11.5px; color: var(--aits-mut); display: inline-flex; align-items: center; gap: 4px; }
        .aitshd-notif-empty {
            padding: 32px 20px;
            text-align: center;
            color: var(--aits-mut); font-size: 13px;
        }
        .aitshd-notif-empty .aitshd-notif-empty-ico {
            width: 52px; height: 52px; border-radius: 14px;
            background: var(--aits-blue-tint-2); color: var(--aits-blue);
            display: inline-flex; align-items: center; justify-content: center;
            margin-bottom: 10px;
        }
        .aitshd-notif-foot {
            border-top: 1px solid var(--aits-line);
            padding: 10px;
        }
        .aitshd-notif-foot a {
            display: block; text-align: center;
            padding: 9px 12px; border-radius: 10px;
            background: var(--aits-blue-tint-2);
            color: var(--aits-blue-dark);
            font-size: 13px; font-weight: 600;
        }
        .aitshd-notif-foot a:hover { background: var(--aits-blue-tint); }

        /* ────────────────────────────────────────────────────────────────
           Account chip + menu
           The signed-in control used to be a bare Tabler dropdown (raw
           avatar + two lines of unstyled text), which was the one element
           in the bar that didn't belong to the design system. It is now a
           first-class chip that collapses to avatar-only on small screens.
           ──────────────────────────────────────────────────────────────── */
        .aitshd-user { position: relative; flex: none; }
        .aitshd-user-btn {
            display: inline-flex; align-items: center; gap: 10px;
            height: 44px;
            padding: 3px 14px 3px 3px;
            border-radius: 999px;
            background: var(--hd-rail-bg);
            border: 1px solid var(--hd-rail-line);
            box-shadow: var(--hd-rail-inset);
            color: var(--aits-ink);
            cursor: pointer;
            text-decoration: none;
            transition: background-color .2s var(--ease,ease), border-color .2s var(--ease,ease),
                        box-shadow .2s var(--ease,ease), transform .2s var(--ease,ease);
        }
        @media (hover: hover) {
            .aitshd-user-btn:hover {
                background: var(--aits-card);
                border-color: var(--aits-blue-line);
                box-shadow: 0 10px 24px -14px rgba(54,128,237,.6);
                transform: translateY(-1px);
            }
        }
        .aitshd-user-btn:active { transform: translateY(0) scale(.97); }
        .aitshd-user.open > .aitshd-user-btn {
            background: var(--aits-blue-tint);
            border-color: var(--aits-blue-line);
        }
        .aitshd-user-av {
            position: relative; flex: none;
            width: 38px; height: 38px; border-radius: 999px;
            display: inline-flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark));
            color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -.02em;
            box-shadow: 0 0 0 2px var(--aits-card), 0 0 0 3px var(--aits-blue-line);
            transition: box-shadow .24s var(--ease,ease);
        }
        .aitshd-user-av img {
            width: 100%; height: 100%; border-radius: inherit;
            object-fit: cover; display: block;
        }
        .aitshd-user-btn:hover .aitshd-user-av,
        .aitshd-user.open .aitshd-user-av {
            box-shadow: 0 0 0 2px var(--aits-card), 0 0 0 3px var(--aits-blue);
        }
        .aitshd-user-copy {
            display: none; flex-direction: column; align-items: flex-start;
            line-height: 1.1; min-width: 0;
        }
        .aitshd-user-name {
            font-size: 13.5px; font-weight: 700; letter-spacing: -.012em;
            color: var(--aits-ink);
            max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-user-role {
            margin-top: 3px;
            font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
            color: var(--aits-blue);
        }
        body.theme-dark .aitshd-user-role { color: var(--aits-blue-light); }
        .aitshd-user-caret {
            display: none; color: var(--aits-faint); margin-left: -2px;
            transition: transform .28s var(--ease,ease), color .2s;
        }
        .aitshd-user.open .aitshd-user-caret { transform: rotate(180deg); color: var(--aits-blue); }
        /* Progressive disclosure: full chip on wide desktops, avatar + caret
           on laptops, avatar only once the hamburger appears. */
        @media (min-width: 1280px) { .aitshd-user-caret { display: inline-flex; } }
        /* 1460, not 1200. The name+role block adds ~132px to the actions column,
           and below this the 1400px container cannot hold brand + nav + chip at
           once — the nav would run underneath the search icon. Showing the
           avatar alone until there is genuinely room is what keeps the row from
           colliding with itself. */
        @media (min-width: 1460px) { .aitshd-user-copy  { display: inline-flex; } }
        @media (max-width: 1199px) { .aitshd-user-btn { padding-right: 8px; } }
        @media (max-width: 1279.98px) {
            .aitshd-user-btn { padding: 2px; gap: 0; height: auto; }
            .aitshd-user-av { width: 34px; height: 34px; font-size: 13px; }
        }
        @media (max-width: 380px) {
            .aitshd-user-av { width: 31px; height: 31px; font-size: 12px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-user-btn, .aitshd-user-av, .aitshd-user-caret { transition: none; }
            .aitshd-user-btn:hover, .aitshd-user-btn:active { transform: none; }
        }

        /* Menu panel */
        .aitshd-user-menu {
            position: absolute; right: 0; top: calc(100% + 12px);
            width: 302px; padding: 8px;
            background: var(--aits-card);
            border: 1px solid var(--aits-line);
            border-radius: 20px;
            box-shadow: var(--hd-pop);
            z-index: 95;
            opacity: 0; visibility: hidden;
            transform: translateY(-8px) scale(.97);
            transform-origin: top right;
            transition: opacity .2s var(--ease,ease), transform .26s var(--ease,ease), visibility .2s;
        }
        .aitshd-user.open .aitshd-user-menu { opacity: 1; visibility: visible; transform: none; }
        @media (prefers-reduced-motion: reduce) { .aitshd-user-menu { transition: none; } }
        .aitshd-user-card {
            display: flex; align-items: center; gap: 12px;
            padding: 13px; margin-bottom: 6px;
            border-radius: 15px;
            background: linear-gradient(135deg, var(--aits-blue-tint), var(--aits-blue-tint-2));
            border: 1px solid var(--aits-blue-line);
        }
        .aitshd-user-card .aitshd-user-av { width: 42px; height: 42px; font-size: 15px; box-shadow: 0 6px 16px -8px rgba(54,128,237,.7); }
        .aitshd-user-card-copy { min-width: 0; flex: 1; }
        /* These are <span>s — without display:block the ellipsis never kicks in
           on a long name or address. */
        .aitshd-user-card-name {
            display: block;
            font-size: 14.5px; font-weight: 700; letter-spacing: -.012em;
            color: var(--aits-ink);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-user-card-mail {
            display: block;
            margin-top: 2px;
            font-size: 12px; color: var(--aits-mut);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-user-pill {
            display: inline-flex; align-items: center; gap: 4px;
            margin-top: 6px; padding: 2px 8px;
            border-radius: 999px;
            background: var(--aits-card);
            border: 1px solid var(--aits-blue-line);
            font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
            color: var(--aits-blue-dark);
        }
        body.theme-dark .aitshd-user-pill { color: var(--aits-blue-light); background: var(--aits-surface-2); }
        .aitshd-user-item {
            display: flex; align-items: center; gap: 11px;
            padding: 9px 10px;
            border-radius: 13px;
            font-size: 14px; font-weight: 600;
            color: var(--aits-ink-soft);
            text-decoration: none;
            transition: background-color .16s var(--ease,ease), color .16s var(--ease,ease);
        }
        .aitshd-user-item-ico {
            width: 32px; height: 32px; border-radius: 10px; flex: none;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            transition: transform .24s var(--ease,ease);
        }
        .aitshd-user-item-ico svg { width: 17px; height: 17px; }
        .aitshd-user-item[data-tone="violet"]  .aitshd-user-item-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-user-item[data-tone="amber"]   .aitshd-user-item-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-user-item[data-tone="emerald"] .aitshd-user-item-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-user-item[data-tone="rose"]    .aitshd-user-item-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-user-item-arrow {
            margin-left: auto; color: var(--aits-faint); flex: none;
            opacity: 0; transform: translateX(-5px);
            transition: opacity .2s var(--ease,ease), transform .24s var(--ease,ease);
        }
        @media (hover: hover) {
            .aitshd-user-item:hover { background: var(--aits-surface-2); color: var(--aits-ink); }
            .aitshd-user-item:hover .aitshd-user-item-ico { transform: scale(1.08); }
            .aitshd-user-item:hover .aitshd-user-item-arrow { opacity: 1; transform: none; }
            .aitshd-user-item[data-tone="rose"]:hover { color: var(--tint-rose-ink); }
        }
        .aitshd-user-item:active { background: var(--aits-blue-tint-2); }
        .aitshd-user-sep { height: 1px; margin: 6px 10px; background: var(--aits-line); }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-user-item, .aitshd-user-item-ico, .aitshd-user-item-arrow { transition: none; }
            .aitshd-user-item:hover .aitshd-user-item-ico { transform: none; }
        }
        /* Never let a fixed 302px panel outgrow a narrow phone. */
        @media (max-width: 460px) {
            .aitshd-user-menu { width: min(300px, calc(100vw - 24px)); right: -4px; }
        }

        /* ────────────────────────────────────────────────────────────────
           MEGA MENU (Categories) — 5-column premium panel
           ──────────────────────────────────────────────────────────────── */
        .aitshd-mega-backdrop {
            position: fixed; inset: 0;
            background: rgba(15,23,42,.14);
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            opacity: 0; pointer-events: none;
            transition: opacity .22s var(--ease,ease);
            z-index: 55;
        }
        body.theme-dark .aitshd-mega-backdrop { background: rgba(0,0,0,.5); }
        /* Every mega dims the page, not just the first two that shipped. */
        .aitshd[data-mega-open="1"]           .aitshd-mega-backdrop,
        .aitshd[data-mega-aitools-open="1"]   .aitshd-mega-backdrop,
        .aitshd[data-mega-blog-open="1"]      .aitshd-mega-backdrop,
        .aitshd[data-mega-models-open="1"]    .aitshd-mega-backdrop,
        .aitshd[data-mega-learn-open="1"]     .aitshd-mega-backdrop,
        .aitshd[data-mega-deals-open="1"]     .aitshd-mega-backdrop,
        .aitshd[data-mega-discover-open="1"]  .aitshd-mega-backdrop,
        .aitshd[data-mega-resources-open="1"] .aitshd-mega-backdrop { opacity: 1; pointer-events: auto; }

        .aitshd-mega-panel {
            display: none;
            position: absolute;
            left: 50%; top: 100%;
            transform: translate(-50%, 10px);
            width: min(1440px, calc(100vw - 32px));
            background: var(--aits-card);
            border: 1px solid var(--aits-line);
            box-shadow: var(--hd-pop);
            border-radius: var(--hd-r-lg);
            z-index: 65;
            overflow: hidden;
            opacity: 0;
            transition: opacity .22s var(--ease,ease), transform .22s var(--ease,ease);
        }
        /* AI Tools panel — shown when [data-mega-open="1"] */
        .aitshd[data-mega-open="1"] .aitshd-mega-panel-tools {
            display: block;
            opacity: 1;
            transform: translate(-50%, 12px);
        }
        /* AI Tools (external directory) panel — shares .aitshd-mega-panel-
           tools styling by class-composition, so nothing else here is needed
           to make it look identical. This selector JUST drives the open
           state so the tools panel doesn't show up when the aitools nav
           button is clicked — .aitshd-mega-panel-tools is now on BOTH
           panels, and the earlier rule would match either one.
           `:not(.aitshd-mega-panel-aitools)` on the tools rule and
           `.aitshd-mega-panel-aitools` scoping on the aitools rule keep
           each open state pinned to the panel it names. */
        .aitshd[data-mega-open="1"] .aitshd-mega-panel-tools.aitshd-mega-panel-aitools {
            display: none;
        }
        .aitshd[data-mega-aitools-open="1"] .aitshd-mega-panel-aitools {
            display: block;
            opacity: 1;
            transform: translate(-50%, 12px);
        }
        /* AI Models panel — shown when [data-mega-models-open="1"] */
        .aitshd[data-mega-models-open="1"] .aitshd-mega-panel-models {
            display: block;
            opacity: 1;
            transform: translate(-50%, 12px);
        }
        /* Backdrop covers any open mega */
        .aitshd[data-mega-models-open="1"] .aitshd-mega-backdrop { opacity: 1; pointer-events: auto; }

        .aitshd-mega-wrap {
            display: grid;
            grid-template-columns: 260px minmax(0,1fr) minmax(0,1fr) 380px;
            gap: 0;
        }
        @media (max-width: 1240px) {
            .aitshd-mega-wrap { grid-template-columns: 240px minmax(0,1fr) minmax(0,1fr) 340px; }
        }
        @media (max-width: 1080px) {
            .aitshd-mega-wrap { grid-template-columns: 240px minmax(0,1fr) 320px; }
            .aitshd-mega-col-freetools { display: none; }
        }
        @media (max-width: 900px) {
            .aitshd-mega-wrap { grid-template-columns: 1fr; }
            .aitshd-mega-featured-col { display: none; }
        }

        /* Column 1: BROWSE — big colorful items with title + subtitle */
        .aitshd-mega-browse {
            padding: 26px 16px 20px 26px;
            border-right: 1px solid var(--aits-line);
            background: var(--aits-card);
            display: flex; flex-direction: column;
        }
        .aitshd-mega-browse .aitshd-mega-item + .aitshd-mega-item { margin-top: 2px; }
        .aitshd-mega-browse-sep {
            height: 1px; background: var(--aits-line);
            margin: 12px 4px 10px;
        }
        .aitshd-mega-browse-label {
            font-size: 11px; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
            color: var(--aits-mut);
            padding: 0 8px 8px;
        }

        /* Column 1 (legacy): rail — kept for admin configs that still
           reference the old .aitshd-mega-rail block; unused in default layout */
        .aitshd-mega-rail {
            padding: 24px 14px 18px 22px;
            border-right: 1px solid var(--aits-line);
            background: linear-gradient(180deg, var(--aits-surface-2), var(--aits-card));
        }
        .aitshd-mega-colh {
            font-size: 11px; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
            color: var(--aits-blue);
            padding: 4px 8px 14px;
        }
        .aitshd-mega-rail-item {
            display: flex; align-items: center; justify-content: flex-start;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 12px; cursor: pointer; user-select: none;
            font-size: 14px; font-weight: 500;
            color: var(--aits-ink-soft); text-decoration: none;
            transition: background-color .16s var(--ease,ease), color .16s;
        }
        .aitshd-mega-rail-icon {
            width: 34px; height: 34px; border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            transition: transform .18s var(--ease,ease);
        }
        .aitshd-mega-rail-item[data-tone="indigo"]  .aitshd-mega-rail-icon { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-mega-rail-item[data-tone="violet"]  .aitshd-mega-rail-icon { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-mega-rail-item[data-tone="emerald"] .aitshd-mega-rail-icon { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-mega-rail-item[data-tone="amber"]   .aitshd-mega-rail-icon { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-mega-rail-item[data-tone="rose"]    .aitshd-mega-rail-icon { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-mega-rail-item[data-tone="cyan"]    .aitshd-mega-rail-icon { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-mega-rail-item[data-tone="pink"]    .aitshd-mega-rail-icon { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-mega-rail-item[data-tone="slate"]   .aitshd-mega-rail-icon { background: var(--tint-slate-bg);   color: var(--tint-slate-ink); }
        .aitshd-mega-rail-label {
            flex: 1; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-mega-rail-count {
            font-size: 11.5px; font-weight: 600;
            color: var(--aits-mut);
            padding: 3px 8px;
            border-radius: 999px;
            background: var(--aits-surface-3);
            border: 1px solid var(--aits-line);
        }
        .aitshd-mega-rail-item.active,
        .aitshd-mega-rail-item:hover {
            background: var(--aits-blue-tint);
            color: var(--aits-blue-dark);
        }
        .aitshd-mega-rail-item.active .aitshd-mega-rail-icon,
        .aitshd-mega-rail-item:hover .aitshd-mega-rail-icon {
            transform: scale(1.05);
        }
        .aitshd-mega-rail-item.active .aitshd-mega-rail-count,
        .aitshd-mega-rail-item:hover .aitshd-mega-rail-count {
            background: var(--aits-card);
            color: var(--aits-blue-dark);
            border-color: var(--aits-blue-line);
        }
        .aitshd-mega-rail-view {
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            width: calc(100% - 4px); margin: 14px 2px 0;
            padding: 11px 14px;
            border-radius: 12px;
            border: 1px dashed var(--aits-blue-line);
            background: var(--aits-blue-tint-2);
            color: var(--aits-blue-dark);
            font-size: 13px; font-weight: 600;
            text-decoration: none;
            transition: background-color .18s, color .18s, border-color .18s;
        }
        .aitshd-mega-rail-view:hover,
        .aitshd-mega-rail-view:focus {
            background: var(--aits-blue); color: #fff !important;
            border-style: solid;
        }

        /* Column 2 & 3: category + use case */
        .aitshd-mega-col {
            padding: 26px 22px 22px;
            min-width: 0;
            display: flex; flex-direction: column;
        }
        .aitshd-mega-col + .aitshd-mega-col { border-left: 1px solid var(--aits-line); }
        .aitshd-mega-col-cat, .aitshd-mega-col-freetools {
            gap: 2px;
        }
        .aitshd-mega-col .aitshd-mega-item + .aitshd-mega-item { margin-top: 1px; }
        .aitshd-mega-view-all-link {
            display: inline-flex; align-items: center; gap: 6px;
            margin-top: 12px;
            padding: 12px;
            font-size: 13px; font-weight: 600;
            color: var(--aits-blue-dark);
            text-decoration: none;
            border-radius: 12px;
            transition: background-color .16s, color .16s, padding .16s;
        }
        .aitshd-mega-view-all-link:hover {
            background: var(--aits-blue-tint-2);
            padding-left: 16px;
        }
        .aitshd-mega-view-all-link svg { transition: transform .18s; }
        .aitshd-mega-view-all-link:hover svg { transform: translateX(3px); }
        .aitshd-mega-panel-body { min-height: 0; }
        .aitshd-mega-subcols {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px 22px;
        }
        @media (max-width: 1180px) { .aitshd-mega-subcols { grid-template-columns: 1fr 1fr; } }
        .aitshd-mega-item {
            display: flex; align-items: center; gap: 12px;
            padding: 10px 12px;
            border-radius: 14px;
            text-decoration: none;
            color: var(--aits-ink-soft);
            font-size: 13.5px; font-weight: 500;
            transition: background-color .18s var(--ease,ease), color .18s var(--ease,ease), transform .18s;
            min-width: 0;
            position: relative;
        }
        /* Larger, richer item used in Browse column */
        .aitshd-mega-item.is-lg { padding: 12px; }
        .aitshd-mega-item.is-lg .aitshd-mega-item-icon { width: 44px; height: 44px; border-radius: 12px; }
        .aitshd-mega-item-icon {
            width: 40px; height: 40px; border-radius: 12px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            transition: transform .22s var(--ease,ease), box-shadow .22s var(--ease,ease);
        }
        .aitshd-mega-item[data-tone="indigo"]  .aitshd-mega-item-icon { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-mega-item[data-tone="violet"]  .aitshd-mega-item-icon { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-mega-item[data-tone="emerald"] .aitshd-mega-item-icon { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-mega-item[data-tone="amber"]   .aitshd-mega-item-icon { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-mega-item[data-tone="rose"]    .aitshd-mega-item-icon { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-mega-item[data-tone="cyan"]    .aitshd-mega-item-icon { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-mega-item[data-tone="pink"]    .aitshd-mega-item-icon { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-mega-item[data-tone="slate"]   .aitshd-mega-item-icon { background: var(--tint-slate-bg);   color: var(--tint-slate-ink); }
        .aitshd-mega-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
        .aitshd-mega-item-title {
            font-weight: 600; color: var(--aits-ink);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            font-size: 14.5px;
            line-height: 1.25;
            letter-spacing: -0.01em;
            display: inline-flex; align-items: center; gap: 6px;
        }
        .aitshd-mega-item.is-lg .aitshd-mega-item-title { font-size: 15px; font-weight: 700; }
        .aitshd-mega-item-desc {
            font-size: 12.5px; font-weight: 400;
            color: var(--aits-mut);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            margin-top: 2px;
            line-height: 1.35;
        }
        /* Count pill "156+" on the right of category rows */
        .aitshd-mega-item-count {
            flex: none;
            font-size: 11.5px; font-weight: 700;
            color: var(--aits-mut);
            padding: 4px 10px;
            border-radius: 999px;
            background: var(--aits-surface-3);
            border: 1px solid var(--aits-line);
            letter-spacing: 0;
            transition: all .18s var(--ease,ease);
        }
        .aitshd-mega-item:hover .aitshd-mega-item-count {
            background: var(--aits-card);
            color: var(--aits-blue-dark);
            border-color: var(--aits-blue-line);
        }
        /* Right chevron on Use-Case rows */
        .aitshd-mega-item-arrow {
            flex: none;
            color: var(--aits-faint);
            display: inline-flex; align-items: center;
            opacity: .5;
            transition: color .18s, opacity .18s, transform .18s;
        }
        .aitshd-mega-item:hover .aitshd-mega-item-arrow {
            color: var(--aits-blue);
            opacity: 1;
            transform: translateX(2px);
        }
        /* Inline pill badges shown inside item titles (NEW / For You / Trending) */
        .aitshd-mega-badge-inline {
            display: inline-flex; align-items: center;
            flex: none;              /* never grow — never steal width from the label */
            white-space: nowrap;     /* "For you" must never split across lines */
            font-size: 10px; font-weight: 700;
            letter-spacing: .06em;
            padding: 3px 7px;
            border-radius: 999px;
            background: var(--tint-emerald-bg); color: var(--tint-emerald-ink);
            line-height: 1;
        }
        .aitshd-mega-badge-inline[data-tone="amber"]   { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-mega-badge-inline[data-tone="rose"]    { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-mega-badge-inline[data-tone="violet"]  { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-mega-badge-inline[data-tone="blue"]    { background: var(--tint-blue-bg);    color: var(--tint-blue-ink); }
        .aitshd-mega-badge-inline[data-tone="emerald"] { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }

        /* Universal title-label rule — makes the text span shrink first so a
           trailing badge can never wrap to its own line. Every mega uses the
           same markup pattern `<span class="mega-item-title"><span>label</span>
           <span class="badge-inline">…</span></span>`, and the base title is
           `display: inline-flex`. Without this, a badge in a narrow column
           (Discover browse rail on a 1320px laptop, Deals lanes, etc.)
           bumps to a new line — that was the "Recently Added / NEW / Latest
           tools & models" 3-row stack visible in the Discover mega. Panels
           that need a multi-line title (Discover, Resources) already set
           `white-space: normal` on the title container, so the label span
           will still wrap up to their `max-height` cap — only the badge is
           held on the last flow line. Panels that want single-line ellipsis
           (Tools, Models) add their own `white-space: nowrap; overflow:
           hidden; text-overflow: ellipsis` at (0,3,0), which wins. */
        .aitshd-mega-item-title > span:first-child {
            flex: 1 1 auto;
            min-width: 0;
        }

        .aitshd-mega-item:hover {
            background: var(--aits-blue-tint-2);
            color: var(--aits-blue-dark);
        }
        .aitshd-mega-item:hover .aitshd-mega-item-icon {
            transform: scale(1.06);
            box-shadow: 0 8px 20px -8px currentColor;
        }
        .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-dark); }

        /* Column: popular tools */
        .aitshd-mega-col-popular {
            padding: 24px 22px;
            border-left: 1px solid var(--aits-line);
            background: linear-gradient(180deg, var(--aits-surface-2) 0%, var(--aits-card) 60%);
            min-width: 0;
        }
        .aitshd-mega-col-popular .aitshd-mega-item { padding: 8px 10px; }

        /* Column 4: featured hero + latest article card */
        .aitshd-mega-featured-col {
            padding: 24px 24px 22px 4px;
            display: flex; flex-direction: column; gap: 14px;
            min-width: 0;
            border-left: 1px solid var(--aits-line);
        }
        .aitshd-mega-hero {
            position: relative;
            display: block;
            border-radius: 20px;
            padding: 22px 22px 20px;
            color: #fff !important;
            background:
                radial-gradient(circle at 100% 0%, rgba(96,164,245,.55) 0%, transparent 55%),
                radial-gradient(circle at 0% 100%, rgba(126,34,206,.35) 0%, transparent 55%),
                linear-gradient(135deg, #0F172A, #1E1B4B 70%, #0B1120);
            box-shadow: 0 20px 40px -20px rgba(15,23,42,.5), inset 0 1px 0 rgba(255,255,255,.08);
            overflow: hidden;
            text-decoration: none !important;
            min-height: 260px;
        }
        /* Big radial glow orb (upper-right) */
        .aitshd-mega-hero::after {
            content: '';
            position: absolute;
            right: -20px; top: 40%;
            width: 200px; height: 200px;
            border-radius: 999px;
            background: radial-gradient(circle at 30% 30%, rgba(147,197,253,.6) 0%, rgba(59,130,246,.35) 40%, transparent 70%);
            filter: blur(2px);
            pointer-events: none;
        }
        .aitshd-mega-hero-head {
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: 12px;
            position: relative; z-index: 1;
        }
        .aitshd-mega-hero-pill {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 10.5px; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
            color: #93BEFF;
            padding: 5px 10px;
            border-radius: 999px;
            border: 1px solid rgba(96,164,245,.35);
            background: rgba(96,164,245,.10);
        }
        .aitshd-mega-hero-pill svg { color: #FCD34D; }
        .aitshd-mega-hero-shield {
            width: 34px; height: 34px; border-radius: 10px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.12);
            display: inline-flex; align-items: center; justify-content: center;
            color: #FCD34D;
            flex: none;
        }
        .aitshd-mega-hero-avatar {
            display: inline-flex; align-items: center; gap: 10px;
            margin-top: 18px;
            position: relative; z-index: 1;
        }
        .aitshd-mega-hero-avatar-mark {
            width: 44px; height: 44px; border-radius: 12px;
            background: #fff;
            color: var(--aits-blue-dark);
            display: inline-flex; align-items: center; justify-content: center;
            font-weight: 900; font-size: 22px;
            letter-spacing: -0.02em;
            box-shadow: 0 6px 16px -6px rgba(0,0,0,.4);
            flex: none;
        }
        .aitshd-mega-hero-avatar-name {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 17px; font-weight: 800;
            letter-spacing: -0.01em;
            color: #fff;
        }
        .aitshd-mega-hero-verified {
            width: 18px; height: 18px; border-radius: 999px;
            background: #3B82F6;
            display: inline-flex; align-items: center; justify-content: center;
            color: #fff;
        }
        .aitshd-mega-hero-verified svg { width: 11px; height: 11px; }
        .aitshd-mega-hero-title {
            display: block;
            font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
            line-height: 1.35;
            margin: 12px 0 6px;
            color: #fff;
            max-width: 75%;
            position: relative; z-index: 1;
        }
        .aitshd-mega-hero-sub {
            display: block;
            font-size: 12.5px; font-weight: 400;
            color: rgba(255,255,255,.7);
            line-height: 1.45;
            max-width: 78%;
            position: relative; z-index: 1;
        }
        .aitshd-mega-hero-cta {
            display: inline-flex; align-items: center; gap: 6px;
            margin-top: 14px;
            padding: 9px 16px;
            border-radius: 10px;
            background: #3B82F6;
            color: #fff !important;
            font-size: 13px; font-weight: 600;
            box-shadow: 0 10px 22px -10px rgba(59,130,246,.7);
            position: relative; z-index: 1;
        }
        .aitshd-mega-hero-cta:hover { background: var(--aits-blue-dark); }
        .aitshd-mega-hero-cta svg { transition: transform .18s; }
        .aitshd-mega-hero-cta:hover svg { transform: translateX(2px); }
        /* Carousel indicator dots */
        .aitshd-mega-hero-dots {
            display: inline-flex; align-items: center; gap: 6px;
            margin-top: 14px;
            position: relative; z-index: 1;
        }
        .aitshd-mega-hero-dot {
            width: 22px; height: 4px; border-radius: 999px;
            background: rgba(255,255,255,.24);
            transition: background .18s, width .18s;
        }
        .aitshd-mega-hero-dot.active {
            background: rgba(255,255,255,.85);
            width: 28px;
        }

        /* Latest Article card in the featured column */
        .aitshd-mega-article {
            display: flex; align-items: center; gap: 12px;
            padding: 14px;
            border-radius: 18px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            text-decoration: none;
            color: var(--aits-ink);
            transition: border-color .18s, box-shadow .18s, transform .18s;
        }
        .aitshd-mega-article:hover {
            border-color: var(--aits-blue-line);
            box-shadow: 0 12px 24px -14px rgba(54,128,237,.35);
            transform: translateY(-1px);
        }
        .aitshd-mega-article-thumb {
            width: 84px; height: 84px; border-radius: 14px;
            flex: none;
            background: linear-gradient(135deg, rgba(54,128,237,.24), rgba(139,92,246,.22));
            overflow: hidden;
            display: inline-flex; align-items: center; justify-content: center;
            color: rgba(255,255,255,.7);
            font-size: 22px; font-weight: 900; letter-spacing: -0.02em;
        }
        .aitshd-mega-article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .aitshd-mega-article-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
        .aitshd-mega-article-label {
            font-size: 10.5px; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
            color: var(--aits-blue);
        }
        .aitshd-mega-article-title {
            font-size: 13.5px; font-weight: 700;
            color: var(--aits-ink);
            line-height: 1.35;
            letter-spacing: -0.01em;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-mega-article-meta {
            font-size: 11.5px; color: var(--aits-mut);
            display: inline-flex; align-items: center; gap: 6px;
        }
        .aitshd-mega-article-meta .dot { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .5; }
        .aitshd-mega-article-more {
            font-size: 12px; font-weight: 700;
            color: var(--aits-blue-dark);
            display: inline-flex; align-items: center; gap: 4px;
            margin-top: 2px;
        }

        /* ────────────────────────────────────────────────────────────────
           POPULAR RIGHT NOW strip — full-width row below the mega panel
           ──────────────────────────────────────────────────────────────── */
        .aitshd-mega-popular {
            border-top: 1px solid var(--aits-line);
            padding: 18px 24px 22px;
            background: linear-gradient(0deg, var(--aits-surface-2), var(--aits-card));
        }
        .aitshd-mega-popular-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 4px 12px;
        }
        .aitshd-mega-popular-head strong {
            font-size: 11px; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
            color: var(--aits-blue);
        }
        .aitshd-mega-popular-head a {
            font-size: 13px; font-weight: 600;
            color: var(--aits-blue-dark);
            text-decoration: none;
            display: inline-flex; align-items: center; gap: 4px;
        }
        .aitshd-mega-popular-head a svg { transition: transform .18s; }
        .aitshd-mega-popular-head a:hover svg { transform: translateX(2px); }
        .aitshd-mega-popular-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }
        .aitshd-mega-pop-chip {
            display: flex; align-items: center; gap: 10px;
            padding: 12px 14px;
            border-radius: 14px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            color: var(--aits-ink);
            text-decoration: none;
            font-size: 13px; font-weight: 600;
            transition: border-color .18s, background-color .18s, transform .18s, box-shadow .18s;
            min-width: 0;
        }
        .aitshd-mega-pop-chip:hover {
            border-color: var(--aits-blue-line);
            background: var(--aits-blue-tint-2);
            color: var(--aits-blue-dark);
            transform: translateY(-1px);
            box-shadow: 0 10px 20px -14px rgba(54,128,237,.35);
        }
        .aitshd-mega-pop-chip-ico {
            width: 34px; height: 34px; border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
        }
        .aitshd-mega-pop-chip[data-tone="indigo"]  .aitshd-mega-pop-chip-ico { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-mega-pop-chip[data-tone="violet"]  .aitshd-mega-pop-chip-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-mega-pop-chip[data-tone="emerald"] .aitshd-mega-pop-chip-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-mega-pop-chip[data-tone="amber"]   .aitshd-mega-pop-chip-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-mega-pop-chip[data-tone="rose"]    .aitshd-mega-pop-chip-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-mega-pop-chip[data-tone="cyan"]    .aitshd-mega-pop-chip-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-mega-pop-chip[data-tone="pink"]    .aitshd-mega-pop-chip-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-mega-pop-chip-title {
            flex: 1; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            letter-spacing: -0.01em;
        }

        /* Legacy mini-card selectors kept for backwards compat with any
           saved admin JSON referencing the older layout */
        .aitshd-mega-mini { display: none; }

        /* ════════════════════════════════════════════════════════════════
           AI TOOLS MEGA — premium pass
           EVERYTHING below is scoped to .aitshd-mega-panel-tools. The base
           .aitshd-mega-* classes are shared by six other megas (Models,
           Learn, Deals, Discover, Resources, Blog); scoping keeps this
           redesign from leaking into them.
           ════════════════════════════════════════════════════════════════ */

        /* ── Pointer notch ──────────────────────────────────────────────── */
        /* A rotated square showing only its two upper borders. It sits in the
           gap between bar and panel, with its lower half tucked behind the
           panel's top edge so the seam disappears. --tip-x is written by JS
           from the nav button's centre, so it tracks the item that opened it. */
        .aitshd-mega-tip {
            position: absolute;
            top: 100%; left: var(--tip-x, 50%);
            width: 17px; height: 17px;
            border-radius: 5px 0 0 0;
            background: var(--aits-card);
            border-left: 1px solid var(--aits-line);
            border-top: 1px solid var(--aits-line);
            transform: translate(-50%, 5px) rotate(45deg) scale(.55);
            transform-origin: center;
            opacity: 0;
            pointer-events: none;
            z-index: 66;
            transition: left .3s var(--ease,ease), opacity .18s var(--ease,ease), transform .26s var(--ease,ease);
        }
        .aitshd[data-mega-open="1"] .aitshd-mega-tip,
        .aitshd[data-mega-aitools-open="1"] .aitshd-mega-tip,
        .aitshd[data-mega-models-open="1"] .aitshd-mega-tip {
            opacity: 1;
            transform: translate(-50%, 5px) rotate(45deg) scale(1);
        }
        @media (max-width: 1023px) { .aitshd-mega-tip { display: none; } }
        @media (prefers-reduced-motion: reduce) { .aitshd-mega-tip { transition: none; } }

        /* ── Shell ──────────────────────────────────────────────────────── */
        .aitshd-mega-panel-tools {
            /* A 9-category + 8-use-case panel is taller than a 1024x600 laptop
               viewport; cap it and let the panel scroll rather than clipping. */
            max-height: calc(100vh - var(--hd-h) - 36px);
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-width: thin;
        }
        .aitshd-mega-panel-tools::-webkit-scrollbar { width: 10px; }
        .aitshd-mega-panel-tools::-webkit-scrollbar-thumb {
            background: var(--aits-line-strong);
            border: 3px solid var(--aits-card);
            border-radius: 999px;
        }

        /* Column surfaces — the rail is recessed, the editorial column picks
           up a whisper of brand, so the four columns read as one composition
           instead of four boxes butted together. */
        /* Gradient runs card → surface so the panel's whole top edge is card
           coloured; the pointer notch can then match it wherever it lands. */
        .aitshd-mega-panel-tools .aitshd-mega-browse {
            padding: 24px 16px 20px 22px;
            background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2) 55%);
        }
        .aitshd-mega-panel-tools .aitshd-mega-col { padding: 24px 18px 20px; }
        .aitshd-mega-panel-tools .aitshd-mega-featured-col {
            padding: 24px 22px 22px 20px;
            gap: 12px;
            background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-card) 50%);
        }

        /* Solid 1px column borders read as hard seams. Replace them with a
           vertical rule that fades out at both ends. */
        .aitshd-mega-panel-tools .aitshd-mega-browse,
        .aitshd-mega-panel-tools .aitshd-mega-col,
        .aitshd-mega-panel-tools .aitshd-mega-featured-col {
            position: relative;
            border-left: 0; border-right: 0;
        }
        .aitshd-mega-panel-tools .aitshd-mega-wrap > * + *::before {
            content: '';
            position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px;
            background: linear-gradient(180deg, transparent, var(--aits-line) 14%, var(--aits-line) 86%, transparent);
            pointer-events: none;
        }

        /* Wider rail: at 260px "Trending This Week" was being clipped mid-word. */
        .aitshd-mega-panel-tools .aitshd-mega-wrap {
            grid-template-columns: 296px minmax(0,1fr) minmax(0,1fr) 384px;
        }
        @media (max-width: 1240px) {
            .aitshd-mega-panel-tools .aitshd-mega-wrap { grid-template-columns: 274px minmax(0,1fr) minmax(0,1fr) 348px; }
            .aitshd-mega-panel-tools .aitshd-mega-col { padding: 22px 14px 18px; }
        }
        @media (max-width: 1080px) {
            .aitshd-mega-panel-tools .aitshd-mega-wrap { grid-template-columns: 266px minmax(0,1fr) 336px; }
        }

        /* ── Column headings ────────────────────────────────────────────── */
        .aitshd-mega-panel-tools .aitshd-mega-colh {
            display: flex; align-items: center; gap: 8px;
            padding: 2px 8px 14px;
            font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
        }
        .aitshd-mega-panel-tools .aitshd-mega-colh::before {
            content: ''; flex: none;
            width: 14px; height: 3px; border-radius: 999px;
            background: linear-gradient(90deg, var(--aits-blue), var(--aits-blue-light));
        }
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-colh { color: var(--aits-blue-light); }

        /* ── Rows ───────────────────────────────────────────────────────── */
        /* One tone pair per row drives the icon tile AND the accent bar, so
           they can never drift apart the way eight duplicated rules can. */
        .aitshd-mega-panel-tools .aitshd-mega-item                    { --it-bg: var(--tint-blue-bg);    --it-ink: var(--tint-blue-ink); }
        .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="indigo"]  { --it-bg: var(--tint-indigo-bg);  --it-ink: var(--tint-indigo-ink); }
        .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="violet"]  { --it-bg: var(--tint-violet-bg);  --it-ink: var(--tint-violet-ink); }
        .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="emerald"] { --it-bg: var(--tint-emerald-bg); --it-ink: var(--tint-emerald-ink); }
        .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="amber"]   { --it-bg: var(--tint-amber-bg);   --it-ink: var(--tint-amber-ink); }
        .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="rose"]    { --it-bg: var(--tint-rose-bg);    --it-ink: var(--tint-rose-ink); }
        .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="cyan"]    { --it-bg: var(--tint-cyan-bg);    --it-ink: var(--tint-cyan-ink); }
        .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="pink"]    { --it-bg: var(--tint-pink-bg);    --it-ink: var(--tint-pink-ink); }
        .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="slate"]   { --it-bg: var(--tint-slate-bg);   --it-ink: var(--tint-slate-ink); }

        .aitshd-mega-panel-tools .aitshd-mega-item {
            border-radius: 14px;
            padding: 9px 12px;
            transition: background-color .2s var(--ease,ease), color .2s var(--ease,ease);
        }
        .aitshd-mega-panel-tools .aitshd-mega-item.is-lg { padding: 11px 12px; }
        /* Accent bar lives inside the row's own left padding and is fully
           rounded, so it never pokes through the corner radius on the short
           rows in the category column. */
        .aitshd-mega-panel-tools .aitshd-mega-item::before {
            content: '';
            position: absolute; left: 3px; top: 50%;
            width: 3px; height: 58%;
            border-radius: 999px;
            background: var(--it-ink);
            transform: translateY(-50%) scaleY(0);
            transition: transform .26s var(--ease,ease);
        }
        .aitshd-mega-panel-tools .aitshd-mega-item-icon {
            border-radius: 13px;
            background-color: var(--it-bg);
            background-image: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);
            color: var(--it-ink);
            box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
        }
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item-icon {
            background-image: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,0) 65%);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
        }
        .aitshd-mega-panel-tools .aitshd-mega-item.is-lg .aitshd-mega-item-icon { width: 42px; height: 42px; }
        .aitshd-mega-panel-tools .aitshd-mega-item-icon svg { width: 19px; height: 19px; }
        .aitshd-mega-panel-tools .aitshd-mega-item.is-lg .aitshd-mega-item-icon svg { width: 21px; height: 21px; }

        /* THE CLIPPING FIX. The title is an inline-flex box holding a label
           and an optional badge; with neither `min-width:0` on the label nor
           `flex:none` on the badge, the badge got crushed and sliced off
           ("For yo"). Truncation now happens on the label only. */
        .aitshd-mega-panel-tools .aitshd-mega-item-title { overflow: hidden; gap: 7px; }
        .aitshd-mega-panel-tools .aitshd-mega-item-title > span:first-child {
            min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        /* Right-edge badge (NEW / For you) — a sibling of the body, so it can
           never steal width from the label or be clipped by it. */
        .aitshd-mega-panel-tools .aitshd-mega-badge-inline {
            flex: none;
            align-self: center;
            font-size: 10px; font-weight: 800; letter-spacing: .07em;
            padding: 4px 8px;
            border-radius: 999px;
            box-shadow: inset 0 0 0 1px currentColor;
        }
        .aitshd-mega-panel-tools .aitshd-mega-item.is-lg .aitshd-mega-item-title { font-size: 14.5px; }
        .aitshd-mega-panel-tools .aitshd-mega-item-desc { font-size: 12px; margin-top: 3px; }

        @media (hover: hover) {
            .aitshd-mega-panel-tools .aitshd-mega-item:hover::before { transform: translateY(-50%) scaleY(1); }
            .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-icon {
                transform: scale(1.08) rotate(-4deg);
                box-shadow: inset 0 0 0 1px rgba(15,23,42,.05), 0 10px 22px -10px var(--it-ink);
            }
            body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-icon {
                box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 10px 22px -10px var(--it-ink);
            }
        }
        .aitshd-mega-panel-tools .aitshd-mega-item:active { background: var(--aits-blue-tint); }
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item:hover,
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-light); }

        /* Count pill */
        .aitshd-mega-panel-tools .aitshd-mega-item-count {
            font-size: 11px; padding: 3px 9px;
            font-variant-numeric: tabular-nums;
        }
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-count { color: var(--aits-blue-light); }

        /* Separator + "For you" group in the rail */
        .aitshd-mega-panel-tools .aitshd-mega-browse-sep {
            background: linear-gradient(90deg, var(--aits-line), transparent);
            margin: 14px 6px 12px;
        }

        /* View-all footer — layout only; the button skin lives in the shared
           "Mega buttons" block below so both panels stay identical. */
        .aitshd-mega-panel-tools .aitshd-mega-view-all-link {
            margin: auto 0 0;
            align-self: flex-start;
        }

        /* ── Editorial column: hero ─────────────────────────────────────── */
        /* Brand-aligned background: the base `.aitshd-mega-hero` at line ~2517
           uses a dark-navy `#0F172A → #1E1B4B → #0B1120` gradient that reads
           off-brand next to the light blue theme. Scoped override pushes the
           whole card into the brand blue family. --aits-blue-dark (#2060C0)
           is the mid-tone; the two edge stops keep depth without going navy. */
        .aitshd-mega-panel-tools .aitshd-mega-hero {
            flex: 1 1 auto;
            display: flex; flex-direction: column;
            min-height: 296px;
            border-radius: 22px;
            padding: 20px 20px 18px;
            background:
                radial-gradient(circle at 100% 0%, rgba(147,190,255,.32) 0%, transparent 60%),
                radial-gradient(circle at 0% 100%, rgba(37,99,235,.45) 0%, transparent 55%),
                linear-gradient(135deg, #1E4FB8, var(--aits-blue-dark) 55%, #143C90);
            box-shadow:
                0 22px 44px -22px rgba(32,96,192,.55),
                inset 0 1px 0 rgba(255,255,255,.12),
                inset 0 0 0 1px rgba(147,190,255,.14);
        }
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-hero {
            background:
                radial-gradient(circle at 100% 0%, rgba(147,190,255,.28) 0%, transparent 60%),
                radial-gradient(circle at 0% 100%, rgba(37,99,235,.40) 0%, transparent 55%),
                linear-gradient(135deg, #133672, #0F2C5D 55%, #0A1E44);
            box-shadow:
                0 22px 44px -22px rgba(0,0,0,.65),
                inset 0 1px 0 rgba(255,255,255,.06),
                inset 0 0 0 1px rgba(147,190,255,.10);
        }
        /* Slow aurora that drifts on hover — the card is the one surface in
           the panel that can carry a flourish. */
        .aitshd-mega-panel-tools .aitshd-mega-hero::before {
            content: '';
            position: absolute; left: -25%; right: -25%; top: -35%; height: 85%;
            background: radial-gradient(55% 55% at 32% 45%, rgba(147,190,255,.35), transparent 72%);
            pointer-events: none;
            transition: transform .7s var(--ease,ease);
        }
        @media (hover: hover) {
            .aitshd-mega-panel-tools .aitshd-mega-hero:hover::before { transform: translate3d(7%, 8%, 0) scale(1.12); }
            .aitshd-mega-panel-tools .aitshd-mega-hero:hover .aitshd-mega-hero-avatar-mark { transform: rotate(-5deg) scale(1.05); }
        }
        /* Decorative sparkle artwork, bled off the card's right edge. Sits
           under the copy (z-index 0 vs the content's 1) and is hidden from
           assistive tech. */
        .aitshd-mega-panel-tools .aitshd-mega-hero-art {
            position: absolute;
            right: -34px; top: 50%;
            width: 210px; height: 210px;
            transform: translateY(-46%);
            opacity: .95;
            pointer-events: none;
            z-index: 0;
            transition: transform .8s var(--ease,ease), opacity .4s var(--ease,ease);
        }
        .aitshd-mega-panel-tools .aitshd-mega-hero-art svg { width: 100%; height: 100%; display: block; }
        @media (hover: hover) {
            .aitshd-mega-panel-tools .aitshd-mega-hero:hover .aitshd-mega-hero-art {
                transform: translateY(-49%) scale(1.05) rotate(4deg);
                opacity: 1;
            }
        }
        /* Copy is capped so it never runs under the artwork. */
        .aitshd-mega-panel-tools .aitshd-mega-hero-head,
        .aitshd-mega-panel-tools .aitshd-mega-hero-avatar,
        .aitshd-mega-panel-tools .aitshd-mega-hero-title { max-width: 74%; }
        .aitshd-mega-panel-tools .aitshd-mega-hero-head { max-width: 100%; }

        /* Reference shows a plain caps label, not a bordered pill. Colour lifts
           to a near-white blue-tint so it reads cleanly on the brand-blue
           background (the old #7FB2FF was designed for the darker navy). */
        .aitshd-mega-panel-tools .aitshd-mega-hero-pill {
            padding: 0; border: 0; background: none;
            color: #C7DDFB;
            font-size: 11px; letter-spacing: .18em; font-weight: 800;
        }
        .aitshd-mega-panel-tools .aitshd-mega-hero-shield {
            width: 32px; height: 32px; border-radius: 9px;
            background: rgba(252,211,77,.18);
            border-color: rgba(252,211,77,.42);
            color: #FCD34D;
        }
        .aitshd-mega-panel-tools .aitshd-mega-hero-avatar { margin-top: 20px; align-items: center; }
        .aitshd-mega-panel-tools .aitshd-mega-hero-avatar-mark {
            width: 42px; height: 42px; border-radius: 13px; font-size: 20px;
            transition: transform .28s var(--ease,ease);
        }
        .aitshd-mega-panel-tools .aitshd-mega-hero-avatar-copy {
            display: flex; flex-direction: column; gap: 3px;
            min-width: 0;
        }
        .aitshd-mega-panel-tools .aitshd-mega-hero-avatar-name {
            font-size: 16px;
            min-width: 0;
        }
        .aitshd-mega-panel-tools .aitshd-mega-hero-avatar-name > span:first-child {
            min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-mega-panel-tools .aitshd-mega-hero-verified { flex: none; }
        .aitshd-mega-panel-tools .aitshd-mega-hero-count {
            font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
            color: rgba(147,197,253,.95);
            font-variant-numeric: tabular-nums;
        }
        .aitshd-mega-panel-tools .aitshd-mega-hero-title {
            font-size: 16px; line-height: 1.4;
            margin: 14px 0 0;
            max-width: 100%;
            display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        /* Anchors the CTA + dots to the bottom, so the card can stretch to
           the height of the taller list columns without leaving dead space. */
        .aitshd-mega-panel-tools .aitshd-mega-hero-foot {
            margin-top: auto;
            padding-top: 18px;
            display: flex; flex-direction: column; align-items: flex-start; gap: 13px;
            position: relative; z-index: 1;
        }
        /* Hero CTA — a solid white pill on the dark card. Reads as a proper
           button (not a dark blob on a dark card) and lifts the arrow into
           its own tint disc on hover. Uses brand tokens so light/dark auto-
           swap the arrow tint. */
        .aitshd-mega-panel-tools .aitshd-mega-hero-cta {
            margin-top: 0;
            padding: 10px 12px 10px 18px;
            border-radius: 12px;
            background: #fff;
            color: var(--aits-blue-dark) !important;
            box-shadow:
                0 12px 24px -12px rgba(15,23,42,.35),
                inset 0 -1px 0 rgba(15,23,42,.05);
            max-width: 100%;
            gap: 10px;
            transition: background-color .2s var(--ease,ease),
                        box-shadow .2s var(--ease,ease),
                        transform .2s var(--ease,ease),
                        color .2s var(--ease,ease);
        }
        .aitshd-mega-panel-tools .aitshd-mega-hero-cta > span {
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            font-weight: 700; letter-spacing: -.005em;
        }
        /* The chevron rides in a small tinted disc so the button reads as a
           control (label + affordance) rather than a link with a glyph. */
        .aitshd-mega-panel-tools .aitshd-mega-hero-cta svg {
            flex: none;
            padding: 6px; width: 26px; height: 26px;
            border-radius: 999px;
            background: var(--aits-blue-tint);
            color: var(--aits-blue-dark);
            box-sizing: border-box;
            transition: transform .22s var(--ease,ease), background-color .2s var(--ease,ease);
        }
        @media (hover: hover) {
            .aitshd-mega-panel-tools .aitshd-mega-hero:hover .aitshd-mega-hero-cta {
                background: #fff;
                transform: translateY(-1px);
                box-shadow:
                    0 18px 32px -14px rgba(15,23,42,.5),
                    inset 0 -1px 0 rgba(15,23,42,.05);
            }
            .aitshd-mega-panel-tools .aitshd-mega-hero:hover .aitshd-mega-hero-cta svg {
                background: var(--aits-blue);
                color: #fff;
                transform: translateX(3px);
            }
        }
        .aitshd-mega-panel-tools .aitshd-mega-hero-cta:active { transform: translateY(0) scale(.98); }
        /* One dot per category now, driven by the same hover that swaps the
           card — the old four were decorative and implied a carousel. */
        .aitshd-mega-panel-tools .aitshd-mega-hero-dots {
            margin-top: 0; gap: 5px; flex-wrap: wrap;
        }
        .aitshd-mega-panel-tools .aitshd-mega-hero-dot {
            width: 14px; height: 3px;
            background: rgba(255,255,255,.24);
            transition: background-color .22s var(--ease,ease), width .26s var(--ease,ease);
        }
        .aitshd-mega-panel-tools .aitshd-mega-hero-dot.active { width: 26px; background: #fff; }

        /* ── Editorial column: latest article ───────────────────────────── */
        /* Label spans the card, thumb + copy sit on the row below it. */
        .aitshd-mega-panel-tools .aitshd-mega-article {
            flex: none;
            display: flex; flex-direction: column; align-items: stretch;
            gap: 11px; padding: 15px;
            border-radius: 18px;
        }
        .aitshd-mega-panel-tools .aitshd-mega-article-row {
            display: flex; align-items: flex-start; gap: 13px;
            min-width: 0;
        }
        .aitshd-mega-panel-tools .aitshd-mega-article-label { letter-spacing: .18em; font-size: 10.5px; }
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-article-label { color: var(--aits-blue-light); }
        .aitshd-mega-panel-tools .aitshd-mega-article-title {
            font-size: 14px; -webkit-line-clamp: 3;
        }
        .aitshd-mega-panel-tools .aitshd-mega-article-thumb {
            width: 78px; height: 78px; border-radius: 13px;
        }
        /* Empty state — a branded gradient tile, not a grey initials box. */
        .aitshd-mega-panel-tools .aitshd-mega-article.is-empty .aitshd-mega-article-thumb {
            background: linear-gradient(140deg, var(--aits-blue), var(--aits-blue-dark));
            color: #fff;
            box-shadow: 0 10px 22px -12px rgba(54,128,237,.85), inset 0 1px 0 rgba(255,255,255,.28);
            transition: transform .3s var(--ease,ease);
        }
        @media (hover: hover) {
            .aitshd-mega-panel-tools .aitshd-mega-article.is-empty:hover .aitshd-mega-article-thumb { transform: rotate(-4deg) scale(1.05); }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-mega-panel-tools .aitshd-mega-article.is-empty .aitshd-mega-article-thumb { transition: none; }
            .aitshd-mega-panel-tools .aitshd-mega-article.is-empty:hover .aitshd-mega-article-thumb { transform: none; }
        }
        .aitshd-mega-panel-tools .aitshd-mega-article-thumb img { transition: transform .4s var(--ease,ease); }
        @media (hover: hover) {
            .aitshd-mega-panel-tools .aitshd-mega-article:hover .aitshd-mega-article-thumb img { transform: scale(1.07); }
            .aitshd-mega-panel-tools .aitshd-mega-article:hover .aitshd-mega-article-more svg { transform: translateX(3px); }
        }
        .aitshd-mega-panel-tools .aitshd-mega-article-more svg { transition: transform .22s var(--ease,ease); }
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-article-more { color: var(--aits-blue-light); }

        /* ── Popular Right Now strip ────────────────────────────────────── */
        /* An inset bordered card rather than a full-bleed footer band, so the
           panel closes on a contained shape (reference). */
        .aitshd-mega-panel-tools .aitshd-mega-popular {
            position: relative;
            border-top: 0;
            background: none;
            padding: 14px 20px 20px;
        }
        .aitshd-mega-panel-tools .aitshd-mega-popular > * { position: relative; z-index: 1; }
        .aitshd-mega-panel-tools .aitshd-mega-popular::before {
            content: '';
            position: absolute; inset: 14px 20px 20px;
            border: 1px solid var(--aits-line);
            border-radius: 18px;
            background: linear-gradient(180deg, var(--aits-surface-2), var(--aits-card));
        }
        .aitshd-mega-panel-tools .aitshd-mega-popular-head { padding: 16px 18px 12px; }
        .aitshd-mega-panel-tools .aitshd-mega-popular-head strong {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 10.5px; letter-spacing: .16em; font-weight: 800;
        }
        .aitshd-mega-panel-tools .aitshd-mega-popular-head strong::before {
            content: ''; flex: none;
            width: 14px; height: 3px; border-radius: 999px;
            background: linear-gradient(90deg, var(--aits-blue), var(--aits-blue-light));
        }
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-popular-head strong,
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-popular-head a { color: var(--aits-blue-light); }
        /* Flex, not grid: the trending link is the last item in the row and
           should size to its text instead of taking a full chip column. */
        .aitshd-mega-panel-tools .aitshd-mega-popular-row {
            display: flex; flex-wrap: wrap; align-items: stretch;
            gap: 8px;
            padding: 0 18px 18px;
        }
        /* Deliberately NOT nowrap like the Models strip: this row is driven by
           the DB `popular_limit` (8 today), and eight chips on one line leaves
           ~78px of label — every tool name would clip. It wraps instead. */
        .aitshd-mega-panel-tools .aitshd-mega-pop-chip {
            flex: 1 1 186px;
            max-width: 300px;
        }

        /* ── Mega buttons ─────────────────────────────────────────────────
           One button style for every "View all …" in the Tools and Models
           panels — the column footers and the popular-strip tail. Scoped to
           the two panels because .aitshd-mega-view-all-link is also used by
           Learn / Deals / Discover / Resources, which are out of scope.
           NOTE: any new shared class must list BOTH panel scopes. Scoped to
           tools alone, the Models strip inherited nothing and fell back to
           the site's default anchor colour — that was the red
           "View all models →" at the end of a blue row. */
        .aitshd-mega-panel-tools  .aitshd-mega-pop-more,
        .aitshd-mega-panel-models .aitshd-mega-pop-more,
        .aitshd-mega-panel-tools  .aitshd-mega-view-all-link,
        .aitshd-mega-panel-models .aitshd-mega-view-all-link {
            display: inline-flex; align-items: center; justify-content: center; gap: 10px;
            flex: 0 0 auto;
            padding: 9px 10px 9px 16px;
            border-radius: 12px;
            border: 1px solid var(--aits-blue-line);
            background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2));
            box-shadow:
                0 1px 0 rgba(15,23,42,.03),
                0 8px 20px -14px rgba(54,128,237,.35),
                inset 0 1px 0 rgba(255,255,255,.7);
            font-size: 12.5px; font-weight: 700; letter-spacing: -.005em;
            color: var(--aits-blue-dark);
            text-decoration: none;
            white-space: nowrap;
            transition: background .22s var(--ease,ease), color .2s var(--ease,ease),
                        border-color .2s var(--ease,ease), box-shadow .22s var(--ease,ease),
                        transform .2s var(--ease,ease);
        }
        body.theme-dark .aitshd-mega-panel-tools  .aitshd-mega-pop-more,
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-pop-more,
        body.theme-dark .aitshd-mega-panel-tools  .aitshd-mega-view-all-link,
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-view-all-link {
            background: linear-gradient(180deg, var(--aits-surface-3), var(--aits-blue-tint-2));
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.05),
                0 8px 20px -14px rgba(0,0,0,.6);
            color: var(--aits-blue-light);
        }
        /* The arrow rides in its own tinted disc so the button reads as a
           control (label + affordance) rather than "text and a chevron". The
           disc always shows; on hover the whole button flips to solid brand
           blue and the disc inverts to sit as a knock-out on the fill. */
        .aitshd-mega-panel-tools  .aitshd-mega-pop-more svg,
        .aitshd-mega-panel-models .aitshd-mega-pop-more svg,
        .aitshd-mega-panel-tools  .aitshd-mega-view-all-link svg,
        .aitshd-mega-panel-models .aitshd-mega-view-all-link svg {
            flex: none;
            width: 24px; height: 24px;
            padding: 5px;
            border-radius: 999px;
            background: var(--aits-blue-tint);
            color: var(--aits-blue-dark);
            box-sizing: border-box;
            transition: transform .24s var(--ease,ease), background-color .22s var(--ease,ease), color .2s var(--ease,ease);
        }
        body.theme-dark .aitshd-mega-panel-tools  .aitshd-mega-pop-more svg,
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-pop-more svg,
        body.theme-dark .aitshd-mega-panel-tools  .aitshd-mega-view-all-link svg,
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-view-all-link svg {
            background: rgba(147,190,255,.14);
            color: var(--aits-blue-light);
        }
        @media (hover: hover) {
            .aitshd-mega-panel-tools  .aitshd-mega-pop-more:hover,
            .aitshd-mega-panel-models .aitshd-mega-pop-more:hover,
            .aitshd-mega-panel-tools  .aitshd-mega-view-all-link:hover,
            .aitshd-mega-panel-models .aitshd-mega-view-all-link:hover {
                background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark));
                border-color: transparent;
                color: #fff;
                box-shadow: 0 14px 26px -12px rgba(54,128,237,.85), inset 0 1px 0 rgba(255,255,255,.28);
                transform: translateY(-1px);
            }
            .aitshd-mega-panel-tools  .aitshd-mega-pop-more:hover svg,
            .aitshd-mega-panel-models .aitshd-mega-pop-more:hover svg,
            .aitshd-mega-panel-tools  .aitshd-mega-view-all-link:hover svg,
            .aitshd-mega-panel-models .aitshd-mega-view-all-link:hover svg {
                background: rgba(255,255,255,.20);
                color: #fff;
                transform: translateX(3px);
            }
        }
        .aitshd-mega-panel-tools  .aitshd-mega-pop-more:active,
        .aitshd-mega-panel-models .aitshd-mega-pop-more:active,
        .aitshd-mega-panel-tools  .aitshd-mega-view-all-link:active,
        .aitshd-mega-panel-models .aitshd-mega-view-all-link:active { transform: translateY(0) scale(.97); }
        /* Tail button in the popular strip hugs the right edge of the row. */
        .aitshd-mega-panel-tools  .aitshd-mega-pop-more,
        .aitshd-mega-panel-models .aitshd-mega-pop-more { margin-left: auto; }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-mega-panel-tools  .aitshd-mega-pop-more,
            .aitshd-mega-panel-models .aitshd-mega-pop-more,
            .aitshd-mega-panel-tools  .aitshd-mega-view-all-link,
            .aitshd-mega-panel-models .aitshd-mega-view-all-link,
            .aitshd-mega-panel-tools  .aitshd-mega-pop-more svg,
            .aitshd-mega-panel-models .aitshd-mega-pop-more svg,
            .aitshd-mega-panel-tools  .aitshd-mega-view-all-link svg,
            .aitshd-mega-panel-models .aitshd-mega-view-all-link svg { transition: none; }
            .aitshd-mega-panel-tools  .aitshd-mega-pop-more:hover,
            .aitshd-mega-panel-models .aitshd-mega-pop-more:hover,
            .aitshd-mega-panel-tools  .aitshd-mega-view-all-link:hover,
            .aitshd-mega-panel-models .aitshd-mega-view-all-link:hover,
            .aitshd-mega-panel-tools  .aitshd-mega-pop-more:active,
            .aitshd-mega-panel-models .aitshd-mega-pop-more:active,
            .aitshd-mega-panel-tools  .aitshd-mega-view-all-link:active,
            .aitshd-mega-panel-models .aitshd-mega-view-all-link:active { transform: none; }
            .aitshd-mega-panel-tools  .aitshd-mega-pop-more:hover svg,
            .aitshd-mega-panel-models .aitshd-mega-pop-more:hover svg,
            .aitshd-mega-panel-tools  .aitshd-mega-view-all-link:hover svg,
            .aitshd-mega-panel-models .aitshd-mega-view-all-link:hover svg { transform: none; }
        }
        .aitshd-mega-panel-tools .aitshd-mega-pop-chip {
            padding: 10px 12px;
            border-radius: 13px;
            gap: 11px;
            transition: border-color .18s var(--ease,ease),
                        background-color .18s var(--ease,ease),
                        color .18s var(--ease,ease),
                        transform .22s var(--ease,ease),
                        box-shadow .22s var(--ease,ease);
        }
        .aitshd-mega-panel-tools .aitshd-mega-pop-chip-ico {
            width: 32px; height: 32px; border-radius: 10px;
            background-image: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);
            box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
            transition: transform .24s var(--ease,ease), box-shadow .22s var(--ease,ease);
        }
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-pop-chip-ico {
            background-image: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,0) 65%);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
        }
        @media (hover: hover) {
            /* Chip lifts onto brand-blue border ring; icon tips and drops a
               tone-tinted glow so the colour of the chip echoes the tile. */
            .aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover {
                transform: translateY(-2px);
                box-shadow: 0 14px 26px -14px rgba(54,128,237,.55);
            }
            .aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-ico {
                transform: scale(1.09) rotate(-4deg);
                box-shadow: inset 0 0 0 1px rgba(15,23,42,.05),
                            0 10px 18px -10px currentColor;
            }
        }
        .aitshd-mega-panel-tools .aitshd-mega-pop-chip:active { transform: translateY(0) scale(.985); }
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover { color: var(--aits-blue-light); }
        @media (hover: none) {
            .aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover { transform: none; box-shadow: none; }
        }

        /* ── Motion opt-out ─────────────────────────────────────────────── */
        @media (prefers-reduced-motion: reduce) {
            .aitshd-mega-panel-tools .aitshd-mega-item,
            .aitshd-mega-panel-tools .aitshd-mega-item::before,
            .aitshd-mega-panel-tools .aitshd-mega-item-icon,
            .aitshd-mega-panel-tools .aitshd-mega-hero::before,
            .aitshd-mega-panel-tools .aitshd-mega-hero-avatar-mark,
            .aitshd-mega-panel-tools .aitshd-mega-hero-dot,
            .aitshd-mega-panel-tools .aitshd-mega-article-thumb img,
            .aitshd-mega-panel-tools .aitshd-mega-article-more svg,
            .aitshd-mega-panel-tools .aitshd-mega-pop-chip-ico { transition: none; }
            .aitshd-mega-panel-tools .aitshd-mega-item::before { transform: translateY(-50%) scaleY(1); }
            .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-icon,
            .aitshd-mega-panel-tools .aitshd-mega-hero:hover::before,
            .aitshd-mega-panel-tools .aitshd-mega-hero:hover .aitshd-mega-hero-avatar-mark,
            .aitshd-mega-panel-tools .aitshd-mega-article:hover .aitshd-mega-article-thumb img,
            .aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-ico { transform: none; }
        }

        /* ══════════════════════════════════════════════════════════════════
           AI TOOLS MEGA — 2026-07-31 system alignment
           Completes the set: Resources, Discover, Deals, Learn and Models are
           all on this system now. The July pass already had this panel on
           brand blue, so this block only adds the shared behaviours and fixes
           the clipping the new "Free AI Tools" column would hit.

           Appended (not merged) on purpose: several rules below repeat a
           selector declared earlier at equal specificity, so source order is
           what makes them win. Keep this block LAST in the tools region.
           ══════════════════════════════════════════════════════════════════ */
        .aitshd-mega-panel-tools {
            /* Tools is the flagship directory — pure brand ramp, same as the
               Models panel, so the two directory megas read as a pair. */
            --tm-a1: #3680ED;
            --tm-a2: #60A4F5;
            --tm-a1-soft: rgba(54,128,237,.06);
            --tm-a2-soft: rgba(96,164,245,.05);
            max-height: calc(100vh - var(--hd-h) - 30px);
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-width: thin; scrollbar-color: var(--aits-blue-line) transparent;
        }
        body.theme-dark .aitshd-mega-panel-tools {
            --tm-a1: #60A4F5;
            --tm-a2: #93BEFF;
            --tm-a1-soft: rgba(96,164,245,.10);
            --tm-a2-soft: rgba(147,190,255,.07);
        }
        .aitshd-mega-panel-tools::-webkit-scrollbar { width: 10px; }
        .aitshd-mega-panel-tools::-webkit-scrollbar-thumb {
            background: var(--aits-blue-line);
            border-radius: 999px;
            border: 3px solid var(--aits-card);
        }
        .aitshd-mega-panel-tools::-webkit-scrollbar-thumb:hover { background: var(--aits-blue-light); }

        /* Breakpoints aligned with the sibling megas. The Free-AI-Tools lane
           is the one that drops first at ≤1140 (it is the most repeatable
           content — every row is reachable from /tools). */
        @media (max-width: 1320px) {
            .aitshd-mega-panel-tools .aitshd-mega-wrap {
                grid-template-columns: 274px minmax(0,1fr) minmax(0,1fr) 348px;
            }
        }
        @media (max-width: 1140px) {
            .aitshd-mega-panel-tools .aitshd-mega-wrap {
                grid-template-columns: 262px minmax(0,1fr) 330px;
            }
            .aitshd-mega-panel-tools .aitshd-mega-col-freetools { display: none; }
        }
        @media (max-width: 900px) {
            .aitshd-mega-panel-tools .aitshd-mega-wrap { grid-template-columns: 1fr; }
            .aitshd-mega-panel-tools .aitshd-mega-featured-col { display: none; }
        }

        /* Columns flex so the view-all pill pins to the bottom. */
        .aitshd-mega-panel-tools .aitshd-mega-col,
        .aitshd-mega-panel-tools .aitshd-mega-browse {
            display: flex; flex-direction: column;
            min-width: 0;
        }

        /* TITLES WRAP (were nowrap + ellipsis). "Request a Free Tool",
           "Writing & Content" and "A–Z Tool Index" all ellipsized in a 1fr
           column at 1280px. */
        .aitshd-mega-panel-tools .aitshd-mega-item-title {
            overflow: hidden;
            gap: 7px;
            flex-wrap: wrap;
            white-space: normal;
            line-height: 1.22;
            max-height: 2.44em;
        }
        .aitshd-mega-panel-tools .aitshd-mega-item-title > span:first-child {
            min-width: 0;
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
        }
        /* DESCS clamp to 2 lines (were one nowrap line from the base rule) —
           "2,000+ tools · always free" and "Every tool, alphabetically"
           overflowed the narrower lanes. */
        .aitshd-mega-panel-tools .aitshd-mega-item-desc {
            font-size: 11.5px;
            margin-top: 2px;
            line-height: 1.34;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: clip;
        }
        /* The FREE pill is a right-edge sibling of the body, so it must never
           grow or wrap. */
        .aitshd-mega-panel-tools .aitshd-mega-badge-inline {
            flex: none;
            align-self: center;
            font-size: 9px;
            padding: 3px 6px;
            letter-spacing: .05em;
        }

        /* Icon tiles — shared sheen + tone-glow. */
        .aitshd-mega-panel-tools .aitshd-mega-item .aitshd-mega-item-icon {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.55);
        }
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item .aitshd-mega-item-icon {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
        }
        @media (hover: hover) {
            .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-icon {
                transform: scale(1.07) translateY(-1px);
                box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 22px -8px currentColor;
            }
            body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-icon {
                box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px -8px currentColor;
            }
        }

        /* View-all — the shared brand pill with arrow-in-disc, pinned bottom. */
        .aitshd-mega-panel-tools .aitshd-mega-view-all-link {
            margin: auto 0 0;
            align-self: stretch;
            display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 10px 10px 10px 14px;
            border-radius: 12px;
            font-size: 12.5px; font-weight: 700;
            letter-spacing: -0.005em;
            color: var(--aits-blue-dark);
            border: 1px solid var(--aits-blue-line);
            background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2));
            box-shadow: 0 1px 0 rgba(15,23,42,.03), inset 0 1px 0 rgba(255,255,255,.6);
            transition: background .22s var(--ease,ease), border-color .2s, box-shadow .22s, color .2s, transform .18s;
        }
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-view-all-link {
            color: var(--aits-blue-light);
            background: linear-gradient(180deg, var(--aits-surface-3), var(--aits-blue-tint-2));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
        }
        .aitshd-mega-panel-tools .aitshd-mega-view-all-link svg {
            flex: none;
            width: 24px; height: 24px; padding: 5px;
            border-radius: 999px;
            background: var(--aits-blue-tint);
            color: var(--aits-blue);
            transition: background .2s, color .2s, transform .2s;
        }
        .aitshd-mega-panel-tools .aitshd-mega-view-all-link:hover,
        .aitshd-mega-panel-tools .aitshd-mega-view-all-link:focus {
            color: var(--aits-blue-dark);
            border-color: var(--aits-blue);
            background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-blue-tint));
            box-shadow: 0 10px 22px -14px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.7);
            transform: translateY(-1px);
        }
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-view-all-link:hover,
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-view-all-link:focus {
            color: var(--aits-blue-light);
        }
        .aitshd-mega-panel-tools .aitshd-mega-view-all-link:hover svg {
            background: var(--aits-blue);
            color: #fff;
            transform: translateX(3px);
        }

        /* Popular Right Now strip — same fix as the Models popular strip: the
           chips + tail button only fit one line at a ~1440px panel, so at
           1280px "AI Prompt Generator" clipped to "AI Prompt Genera…". The row
           may now wrap and each name may take two lines. */
        .aitshd-mega-panel-tools .aitshd-mega-popular-row {
            flex-wrap: wrap;
        }
        .aitshd-mega-panel-tools .aitshd-mega-pop-chip {
            flex: 1 1 168px;
        }
        .aitshd-mega-panel-tools .aitshd-mega-pop-chip-title {
            white-space: normal;
            line-height: 1.2;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: clip;
        }

        /* Category count pills go on-brand on hover, like the sibling megas. */
        .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-count {
            background: var(--aits-blue-tint);
            color: var(--aits-blue-dark);
            border-color: transparent;
        }
        body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-count {
            color: var(--aits-blue-light);
        }

        /* ────────────────────────────────────────────────────────────────
           AI MODELS mega — reuses .aitshd-mega-panel + wrap. Adds
           provider text-mark chips, small count numbers, popular-model
           cards (logo mark + name + provider subline).
           ──────────────────────────────────────────────────────────────── */
        .aitshd-mega-models {
            /* Same panel styling as .aitshd-mega-panel — inherits via markup class */
        }
        /* Provider row — text mark instead of svg icon */
        .aitshd-mmg-mark {
            font-weight: 800;
            font-size: 14px;
            letter-spacing: -0.02em;
            font-family: 'Inter', system-ui, sans-serif;
            line-height: 1;
        }
        /* Small count number (right side, plain — no pill background) */
        .aitshd-mmg-count {
            flex: none;
            font-size: 13px; font-weight: 700;
            color: var(--aits-mut);
            padding: 4px 8px;
            border-radius: 8px;
            transition: color .18s, background-color .18s;
        }
        .aitshd-mega-item:hover .aitshd-mmg-count {
            color: var(--aits-blue-dark);
            background: var(--aits-card);
        }
        /* Benchmark row description — same as item-desc, ensures wrap */
        .aitshd-mmg-desc { white-space: normal !important; }

        /* Popular Models strip card — logo + name + provider subline */
        .aitshd-mmg-pop-chip {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 14px;
            border-radius: 14px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            color: var(--aits-ink);
            text-decoration: none;
            transition: border-color .18s, background-color .18s, transform .18s, box-shadow .18s;
            min-width: 0;
        }
        .aitshd-mmg-pop-chip:hover {
            border-color: var(--aits-blue-line);
            background: var(--aits-blue-tint-2);
            transform: translateY(-1px);
            box-shadow: 0 10px 20px -14px rgba(54,128,237,.35);
        }
        .aitshd-mmg-pop-mark {
            width: 36px; height: 36px; border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            font-weight: 800; font-size: 13px; letter-spacing: -0.02em;
            flex: none;
        }
        .aitshd-mmg-pop-chip[data-tone="indigo"]  .aitshd-mmg-pop-mark { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-mmg-pop-chip[data-tone="violet"]  .aitshd-mmg-pop-mark { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-mmg-pop-chip[data-tone="emerald"] .aitshd-mmg-pop-mark { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-mmg-pop-chip[data-tone="amber"]   .aitshd-mmg-pop-mark { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-mmg-pop-chip[data-tone="rose"]    .aitshd-mmg-pop-mark { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-mmg-pop-chip[data-tone="cyan"]    .aitshd-mmg-pop-mark { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-mmg-pop-chip[data-tone="pink"]    .aitshd-mmg-pop-mark { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-mmg-pop-chip[data-tone="slate"]   .aitshd-mmg-pop-mark { background: var(--tint-slate-bg);   color: var(--tint-slate-ink); }
        .aitshd-mmg-pop-body {
            display: flex; flex-direction: column; min-width: 0; flex: 1;
        }
        .aitshd-mmg-pop-name {
            font-size: 13.5px; font-weight: 700;
            color: var(--aits-ink);
            line-height: 1.2;
            letter-spacing: -0.01em;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-mmg-pop-provider {
            font-size: 11.5px; font-weight: 400;
            color: var(--aits-mut);
            margin-top: 1px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-mmg-pop-arrow {
            color: var(--aits-mut);
            flex: none;
            transition: color .18s, transform .18s;
        }
        .aitshd-mmg-pop-chip:hover .aitshd-mmg-pop-arrow {
            color: var(--aits-blue);
            transform: translateX(2px);
        }
        .aitshd-mmg-pop-chip:hover .aitshd-mmg-pop-name { color: var(--aits-blue-dark); }
        /* Reuse the .aitshd-mega-popular strip container for the row */
        .aitshd-mega-models-popular-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 10px;
        }

        /* ════════════════════════════════════════════════════════════════
           AI MODELS MEGA — premium pass
           Scoped to .aitshd-mega-panel-models for the same reason the tools
           block is scoped: .aitshd-mega-* is shared by six other megas.
           ════════════════════════════════════════════════════════════════ */

        /* ── Shell ──────────────────────────────────────────────────────── */
        .aitshd-mega-panel-models {
            max-height: calc(100vh - var(--hd-h) - 36px);
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-width: thin;
        }
        .aitshd-mega-panel-models::-webkit-scrollbar { width: 10px; }
        .aitshd-mega-panel-models::-webkit-scrollbar-thumb {
            background: var(--aits-line-strong);
            border: 3px solid var(--aits-card);
            border-radius: 999px;
        }
        /* Explore column at 260px cut "Open Source Models" to "Open Source
           Mode"; the copy in this mega runs longer than the tools one. */
        .aitshd-mega-panel-models .aitshd-mega-wrap {
            grid-template-columns: 302px minmax(0,1fr) minmax(0,1fr) 380px;
        }
        @media (max-width: 1240px) {
            .aitshd-mega-panel-models .aitshd-mega-wrap { grid-template-columns: 278px minmax(0,1fr) minmax(0,1fr) 344px; }
            .aitshd-mega-panel-models .aitshd-mega-col { padding: 22px 14px 18px; }
        }
        @media (max-width: 1080px) {
            .aitshd-mega-panel-models .aitshd-mega-wrap { grid-template-columns: 270px minmax(0,1fr) 332px; }
        }
        .aitshd-mega-panel-models .aitshd-mega-browse {
            padding: 24px 16px 20px 22px;
            background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2) 55%);
        }
        .aitshd-mega-panel-models .aitshd-mega-col { padding: 24px 18px 20px; }
        .aitshd-mega-panel-models .aitshd-mega-featured-col {
            padding: 24px 22px 22px 20px;
            gap: 12px;
            background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-card) 50%);
        }
        .aitshd-mega-panel-models .aitshd-mega-browse,
        .aitshd-mega-panel-models .aitshd-mega-col,
        .aitshd-mega-panel-models .aitshd-mega-featured-col {
            position: relative;
            border-left: 0; border-right: 0;
        }
        .aitshd-mega-panel-models .aitshd-mega-wrap > * + *::before {
            content: '';
            position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px;
            background: linear-gradient(180deg, transparent, var(--aits-line) 14%, var(--aits-line) 86%, transparent);
            pointer-events: none;
        }

        /* ── Column headings ────────────────────────────────────────────── */
        .aitshd-mega-panel-models .aitshd-mega-colh {
            display: flex; align-items: center; gap: 8px;
            padding: 2px 8px 14px;
            font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
        }
        .aitshd-mega-panel-models .aitshd-mega-colh::before {
            content: ''; flex: none;
            width: 14px; height: 3px; border-radius: 999px;
            background: linear-gradient(90deg, var(--aits-blue), var(--aits-blue-light));
        }
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-colh { color: var(--aits-blue-light); }

        /* ── Rows ───────────────────────────────────────────────────────── */
        .aitshd-mega-panel-models .aitshd-mega-item                     { --it-bg: var(--tint-blue-bg);    --it-ink: var(--tint-blue-ink); }
        .aitshd-mega-panel-models .aitshd-mega-item[data-tone="indigo"]  { --it-bg: var(--tint-indigo-bg);  --it-ink: var(--tint-indigo-ink); }
        .aitshd-mega-panel-models .aitshd-mega-item[data-tone="violet"]  { --it-bg: var(--tint-violet-bg);  --it-ink: var(--tint-violet-ink); }
        .aitshd-mega-panel-models .aitshd-mega-item[data-tone="emerald"] { --it-bg: var(--tint-emerald-bg); --it-ink: var(--tint-emerald-ink); }
        .aitshd-mega-panel-models .aitshd-mega-item[data-tone="amber"]   { --it-bg: var(--tint-amber-bg);   --it-ink: var(--tint-amber-ink); }
        .aitshd-mega-panel-models .aitshd-mega-item[data-tone="rose"]    { --it-bg: var(--tint-rose-bg);    --it-ink: var(--tint-rose-ink); }
        .aitshd-mega-panel-models .aitshd-mega-item[data-tone="cyan"]    { --it-bg: var(--tint-cyan-bg);    --it-ink: var(--tint-cyan-ink); }
        .aitshd-mega-panel-models .aitshd-mega-item[data-tone="pink"]    { --it-bg: var(--tint-pink-bg);    --it-ink: var(--tint-pink-ink); }
        .aitshd-mega-panel-models .aitshd-mega-item[data-tone="slate"]   { --it-bg: var(--tint-slate-bg);   --it-ink: var(--tint-slate-ink); }

        .aitshd-mega-panel-models .aitshd-mega-item {
            border-radius: 14px;
            padding: 9px 12px;
            transition: background-color .2s var(--ease,ease), color .2s var(--ease,ease);
        }
        .aitshd-mega-panel-models .aitshd-mega-item.is-lg { padding: 11px 12px; }
        .aitshd-mega-panel-models .aitshd-mega-item::before {
            content: '';
            position: absolute; left: 3px; top: 50%;
            width: 3px; height: 58%;
            border-radius: 999px;
            background: var(--it-ink);
            transform: translateY(-50%) scaleY(0);
            transition: transform .26s var(--ease,ease);
        }
        .aitshd-mega-panel-models .aitshd-mega-item-icon {
            border-radius: 13px;
            background-color: var(--it-bg);
            background-image: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);
            color: var(--it-ink);
            box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
        }
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item-icon {
            background-image: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,0) 65%);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
        }
        .aitshd-mega-panel-models .aitshd-mega-item.is-lg .aitshd-mega-item-icon { width: 42px; height: 42px; }
        .aitshd-mega-panel-models .aitshd-mega-item-icon svg { width: 19px; height: 19px; }
        .aitshd-mega-panel-models .aitshd-mega-item.is-lg .aitshd-mega-item-icon svg { width: 21px; height: 21px; }
        /* Provider marks are text, not icons — size them to the tile. */
        .aitshd-mega-panel-models .aitshd-mmg-mark { font-size: 13px; }

        .aitshd-mega-panel-models .aitshd-mega-item-title { overflow: hidden; gap: 7px; }
        .aitshd-mega-panel-models .aitshd-mega-item-title > span:first-child {
            min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-mega-panel-models .aitshd-mega-badge-inline {
            flex: none;
            align-self: center;
            font-size: 10px; font-weight: 800; letter-spacing: .07em;
            padding: 4px 8px;
            border-radius: 999px;
            box-shadow: inset 0 0 0 1px currentColor;
        }
        .aitshd-mega-panel-models .aitshd-mega-item.is-lg .aitshd-mega-item-title { font-size: 14.5px; }
        .aitshd-mega-panel-models .aitshd-mega-item-desc { font-size: 12px; margin-top: 3px; }

        @media (hover: hover) {
            .aitshd-mega-panel-models .aitshd-mega-item:hover::before { transform: translateY(-50%) scaleY(1); }
            .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-icon {
                transform: scale(1.08) rotate(-4deg);
                box-shadow: inset 0 0 0 1px rgba(15,23,42,.05), 0 10px 22px -10px var(--it-ink);
            }
            body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-icon {
                box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 10px 22px -10px var(--it-ink);
            }
        }
        .aitshd-mega-panel-models .aitshd-mega-item:active { background: var(--aits-blue-tint); }
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item:hover,
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-light); }

        /* Provider count — a pill, matching the category counts in AI Tools,
           instead of a bare floating number. */
        .aitshd-mega-panel-models .aitshd-mmg-count {
            font-size: 11px; font-weight: 700;
            padding: 3px 9px;
            border-radius: 999px;
            background: var(--aits-surface-3);
            border: 1px solid var(--aits-line);
            color: var(--aits-mut);
            font-variant-numeric: tabular-nums;
        }
        .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mmg-count {
            background: var(--aits-card);
            border-color: var(--aits-blue-line);
            color: var(--aits-blue-dark);
        }
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mmg-count { color: var(--aits-blue-light); }

        /* Layout only — button skin comes from the shared "Mega buttons"
           block in the AI Tools section above. */
        .aitshd-mega-panel-models .aitshd-mega-view-all-link {
            margin: auto 0 0;
            align-self: flex-start;
        }

        /* ── Editorial column: hero ─────────────────────────────────────── */
        /* Same brand-blue treatment as the Tools hero, so the two editorial
           cards read as one family instead of dark-navy odd-ones-out. */
        .aitshd-mega-panel-models .aitshd-mega-hero {
            flex: 0 0 auto;
            display: flex; flex-direction: column;
            min-height: 250px;
            border-radius: 22px;
            padding: 20px 20px 18px;
            background:
                radial-gradient(circle at 100% 0%, rgba(147,190,255,.32) 0%, transparent 60%),
                radial-gradient(circle at 0% 100%, rgba(37,99,235,.45) 0%, transparent 55%),
                linear-gradient(135deg, #1E4FB8, var(--aits-blue-dark) 55%, #143C90);
            box-shadow:
                0 22px 44px -22px rgba(32,96,192,.55),
                inset 0 1px 0 rgba(255,255,255,.12),
                inset 0 0 0 1px rgba(147,190,255,.14);
        }
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-hero {
            background:
                radial-gradient(circle at 100% 0%, rgba(147,190,255,.28) 0%, transparent 60%),
                radial-gradient(circle at 0% 100%, rgba(37,99,235,.40) 0%, transparent 55%),
                linear-gradient(135deg, #133672, #0F2C5D 55%, #0A1E44);
            box-shadow:
                0 22px 44px -22px rgba(0,0,0,.65),
                inset 0 1px 0 rgba(255,255,255,.06),
                inset 0 0 0 1px rgba(147,190,255,.10);
        }
        .aitshd-mega-panel-models .aitshd-mega-hero::before {
            content: '';
            position: absolute; left: -25%; right: -25%; top: -35%; height: 85%;
            background: radial-gradient(55% 55% at 32% 45%, rgba(147,190,255,.35), transparent 72%);
            pointer-events: none;
            transition: transform .7s var(--ease,ease);
        }
        .aitshd-mega-panel-models .aitshd-mega-hero-art {
            position: absolute;
            right: -34px; top: 50%;
            width: 200px; height: 200px;
            transform: translateY(-46%);
            opacity: .95;
            pointer-events: none;
            z-index: 0;
            transition: transform .8s var(--ease,ease), opacity .4s var(--ease,ease);
        }
        .aitshd-mega-panel-models .aitshd-mega-hero-art svg { width: 100%; height: 100%; display: block; }
        @media (hover: hover) {
            .aitshd-mega-panel-models .aitshd-mega-hero:hover::before { transform: translate3d(7%, 8%, 0) scale(1.12); }
            .aitshd-mega-panel-models .aitshd-mega-hero:hover .aitshd-mega-hero-art {
                transform: translateY(-49%) scale(1.05) rotate(4deg);
                opacity: 1;
            }
            .aitshd-mega-panel-models .aitshd-mega-hero:hover .aitshd-mega-hero-avatar-mark { transform: rotate(-5deg) scale(1.05); }
        }
        .aitshd-mega-panel-models .aitshd-mega-hero-avatar,
        .aitshd-mega-panel-models .aitshd-mega-hero-title { max-width: 74%; }
        .aitshd-mega-panel-models .aitshd-mega-hero-pill {
            padding: 0; border: 0; background: none;
            color: #C7DDFB;
            font-size: 11px; letter-spacing: .18em; font-weight: 800;
        }
        .aitshd-mega-panel-models .aitshd-mega-hero-shield {
            width: 32px; height: 32px; border-radius: 9px;
            background: rgba(252,211,77,.18);
            border-color: rgba(252,211,77,.42);
            color: #FCD34D;
        }
        .aitshd-mega-panel-models .aitshd-mega-hero-avatar { margin-top: 18px; align-items: center; }
        .aitshd-mega-panel-models .aitshd-mega-hero-avatar-mark {
            width: 42px; height: 42px; border-radius: 13px; font-size: 20px;
            transition: transform .28s var(--ease,ease);
        }
        .aitshd-mega-panel-models .aitshd-mega-hero-avatar-copy {
            display: flex; flex-direction: column; gap: 3px; min-width: 0;
        }
        .aitshd-mega-panel-models .aitshd-mega-hero-avatar-name { font-size: 16px; min-width: 0; }
        .aitshd-mega-panel-models .aitshd-mega-hero-avatar-name > span:first-child {
            min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-mega-panel-models .aitshd-mega-hero-count {
            font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
            color: rgba(147,197,253,.95);
        }
        /* Badge sitting on the dark hero needs its own palette — this used to
           be an inline style attribute on the element. */
        .aitshd-mega-panel-models .aitshd-mega-badge-inline.is-on-dark {
            background: rgba(52,211,153,.22);
            color: #6EE7B7;
            box-shadow: inset 0 0 0 1px rgba(110,231,183,.35);
        }
        .aitshd-mega-panel-models .aitshd-mega-hero-title {
            font-size: 16px; line-height: 1.4;
            margin: 14px 0 0;
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-mega-panel-models .aitshd-mega-hero-foot {
            margin-top: auto;
            padding-top: 18px;
            display: flex; align-items: flex-start;
            position: relative; z-index: 1;
        }
        /* Mirror the AI Tools hero CTA: white pill with a tinted chevron disc
           that fills with brand blue on hover. */
        .aitshd-mega-panel-models .aitshd-mega-hero-cta {
            margin-top: 0;
            padding: 10px 12px 10px 18px;
            border-radius: 12px;
            background: #fff;
            color: var(--aits-blue-dark) !important;
            box-shadow:
                0 12px 24px -12px rgba(15,23,42,.35),
                inset 0 -1px 0 rgba(15,23,42,.05);
            max-width: 100%;
            gap: 10px;
            transition: background-color .2s var(--ease,ease),
                        box-shadow .2s var(--ease,ease),
                        transform .2s var(--ease,ease),
                        color .2s var(--ease,ease);
        }
        .aitshd-mega-panel-models .aitshd-mega-hero-cta > span {
            font-weight: 700; letter-spacing: -.005em;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-mega-panel-models .aitshd-mega-hero-cta svg {
            flex: none;
            padding: 6px; width: 26px; height: 26px;
            border-radius: 999px;
            background: var(--aits-blue-tint);
            color: var(--aits-blue-dark);
            box-sizing: border-box;
            transition: transform .22s var(--ease,ease), background-color .2s var(--ease,ease);
        }
        @media (hover: hover) {
            .aitshd-mega-panel-models .aitshd-mega-hero:hover .aitshd-mega-hero-cta {
                background: #fff;
                transform: translateY(-1px);
                box-shadow:
                    0 18px 32px -14px rgba(15,23,42,.5),
                    inset 0 -1px 0 rgba(15,23,42,.05);
            }
            .aitshd-mega-panel-models .aitshd-mega-hero:hover .aitshd-mega-hero-cta svg {
                background: var(--aits-blue);
                color: #fff;
                transform: translateX(3px);
            }
        }
        .aitshd-mega-panel-models .aitshd-mega-hero-cta:active { transform: translateY(0) scale(.98); }

        /* ── Editorial column: action cards ─────────────────────────────── */
        /* Previously `.aitshd-mega-mini-card` etc., which have NO stylesheet
           rules at all — the cards rendered as bare inline spans in the site's
           default link red, with title and description run together. */
        .aitshd-mmg-acts { display: flex; flex-direction: column; gap: 10px; }
        .aitshd-mmg-act {
            --ac-bg: var(--tint-violet-bg); --ac-ink: var(--tint-violet-ink);
            position: relative;
            display: flex; align-items: flex-start; gap: 12px;
            padding: 13px;
            border-radius: 16px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            color: var(--aits-ink);
            text-decoration: none;
            min-width: 0;
            transition: border-color .2s var(--ease,ease), box-shadow .2s var(--ease,ease), transform .2s var(--ease,ease);
        }
        .aitshd-mmg-act[data-tone="blue"]    { --ac-bg: var(--tint-blue-bg);    --ac-ink: var(--tint-blue-ink); }
        .aitshd-mmg-act[data-tone="indigo"]  { --ac-bg: var(--tint-indigo-bg);  --ac-ink: var(--tint-indigo-ink); }
        .aitshd-mmg-act[data-tone="emerald"] { --ac-bg: var(--tint-emerald-bg); --ac-ink: var(--tint-emerald-ink); }
        .aitshd-mmg-act[data-tone="amber"]   { --ac-bg: var(--tint-amber-bg);   --ac-ink: var(--tint-amber-ink); }
        .aitshd-mmg-act[data-tone="rose"]    { --ac-bg: var(--tint-rose-bg);    --ac-ink: var(--tint-rose-ink); }
        .aitshd-mmg-act[data-tone="cyan"]    { --ac-bg: var(--tint-cyan-bg);    --ac-ink: var(--tint-cyan-ink); }
        .aitshd-mmg-act-ico {
            width: 38px; height: 38px; border-radius: 12px; flex: none;
            display: inline-flex; align-items: center; justify-content: center;
            background-color: var(--ac-bg);
            background-image: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);
            color: var(--ac-ink);
            box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
            transition: transform .24s var(--ease,ease);
        }
        body.theme-dark .aitshd-mmg-act-ico {
            background-image: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,0) 65%);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
        }
        .aitshd-mmg-act-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
        .aitshd-mmg-act-title {
            font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
            color: var(--aits-ink);
            line-height: 1.25;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-mmg-act-desc {
            margin-top: 3px;
            font-size: 12px; font-weight: 400; line-height: 1.4;
            color: var(--aits-mut);
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-mmg-act-arrow {
            flex: none; margin-top: 2px;
            color: var(--aits-faint);
            transition: color .2s var(--ease,ease), transform .22s var(--ease,ease);
        }
        @media (hover: hover) {
            .aitshd-mmg-act:hover {
                border-color: var(--aits-blue-line);
                box-shadow: 0 14px 28px -18px rgba(54,128,237,.55);
                transform: translateY(-1px);
            }
            .aitshd-mmg-act:hover .aitshd-mmg-act-ico { transform: scale(1.08) rotate(-4deg); }
            .aitshd-mmg-act:hover .aitshd-mmg-act-arrow { color: var(--aits-blue); transform: translateX(3px); }
            .aitshd-mmg-act:hover .aitshd-mmg-act-title { color: var(--aits-blue-dark); }
            body.theme-dark .aitshd-mmg-act:hover .aitshd-mmg-act-title { color: var(--aits-blue-light); }
        }
        .aitshd-mmg-act:active { transform: translateY(0) scale(.99); }

        /* ── Popular Models strip ───────────────────────────────────────── */
        .aitshd-mega-panel-models .aitshd-mega-popular {
            position: relative;
            border-top: 0;
            background: none;
            padding: 14px 20px 20px;
        }
        .aitshd-mega-panel-models .aitshd-mega-popular > * { position: relative; z-index: 1; }
        .aitshd-mega-panel-models .aitshd-mega-popular::before {
            content: '';
            position: absolute; inset: 14px 20px 20px;
            border: 1px solid var(--aits-line);
            border-radius: 18px;
            background: linear-gradient(180deg, var(--aits-surface-2), var(--aits-card));
        }
        .aitshd-mega-panel-models .aitshd-mega-popular-head { padding: 16px 18px 12px; }
        .aitshd-mega-panel-models .aitshd-mega-popular-head strong {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 10.5px; letter-spacing: .16em; font-weight: 800;
        }
        .aitshd-mega-panel-models .aitshd-mega-popular-head strong::before {
            content: ''; flex: none;
            width: 14px; height: 3px; border-radius: 999px;
            background: linear-gradient(90deg, var(--aits-blue), var(--aits-blue-light));
        }
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-popular-head strong { color: var(--aits-blue-light); }
        /* Single row, always. `flex: 1 1 0` makes all six chips share the space
           equally with the tail button; nowrap keeps them on one line. The
           budget at a 1440px panel: ~1364px of row, minus a ~150px button and
           6×8px gaps, leaves ~194px per chip. With a 30px mark, 10px gap and
           11px padding each side that is ~132px of label — enough for the
           longest name here ("Claude 3.5 Sonnet", ~123px at 13px/700). Dropping
           the per-chip chevron is what freed the last 24px. Redo this sum
           before adding a seventh chip or a longer button label. */
        .aitshd-mega-panel-models .aitshd-mega-models-popular-row {
            display: flex; flex-wrap: nowrap; align-items: stretch;
            gap: 8px;
            padding: 0 18px 18px;
        }
        .aitshd-mega-panel-models .aitshd-mmg-pop-chip {
            flex: 1 1 0;
            min-width: 0;
            max-width: none;
            padding: 9px 11px;
            gap: 10px;
            border-radius: 13px;
        }
        .aitshd-mega-panel-models .aitshd-mmg-pop-name { font-size: 13px; }
        .aitshd-mega-panel-models .aitshd-mmg-pop-provider { font-size: 11px; }
        .aitshd-mega-panel-models .aitshd-mmg-pop-mark {
            width: 30px; height: 30px; border-radius: 10px; font-size: 11.5px;
            background-image: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);
            box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
            transition: transform .24s var(--ease,ease);
        }
        body.theme-dark .aitshd-mega-panel-models .aitshd-mmg-pop-mark {
            background-image: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,0) 65%);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
        }
        /* Hover: the whole chip lifts onto a brand-tinted ring, the mark tips
           and drops a tone-tinted glow (`currentColor` inherits the tone
           attribute via the mark's own ink). Gated so a tap on a touch laptop
           doesn't stick. */
        @media (hover: hover) {
            .aitshd-mega-panel-models .aitshd-mmg-pop-chip:hover {
                border-color: var(--aits-blue-line);
                background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2));
                transform: translateY(-2px);
                box-shadow: 0 16px 28px -14px rgba(54,128,237,.55);
            }
            .aitshd-mega-panel-models .aitshd-mmg-pop-chip:hover .aitshd-mmg-pop-mark {
                transform: scale(1.09) rotate(-4deg);
                box-shadow: inset 0 0 0 1px rgba(15,23,42,.05),
                            0 10px 18px -10px currentColor;
            }
        }
        .aitshd-mega-panel-models .aitshd-mmg-pop-chip:active { transform: translateY(0) scale(.985); }
        /* The unscoped base rule lifts on :hover without a pointer guard, which
           sticks after a tap on a touch laptop. */
        @media (hover: none) {
            .aitshd-mega-panel-models .aitshd-mmg-pop-chip:hover { transform: none; box-shadow: none; }
        }
        body.theme-dark .aitshd-mega-panel-models .aitshd-mmg-pop-chip:hover .aitshd-mmg-pop-name { color: var(--aits-blue-light); }
        body.theme-dark .aitshd-mega-panel-models .aitshd-mmg-pop-chip:hover { background: var(--aits-surface-3); }

        /* ── Motion opt-out ─────────────────────────────────────────────── */
        @media (prefers-reduced-motion: reduce) {
            .aitshd-mega-panel-models .aitshd-mega-item,
            .aitshd-mega-panel-models .aitshd-mega-item::before,
            .aitshd-mega-panel-models .aitshd-mega-item-icon,
            .aitshd-mega-panel-models .aitshd-mega-hero::before,
            .aitshd-mega-panel-models .aitshd-mega-hero-art,
            .aitshd-mega-panel-models .aitshd-mega-hero-avatar-mark,
            .aitshd-mega-panel-models .aitshd-mmg-pop-mark,
            .aitshd-mega-panel-models .aitshd-mmg-pop-chip,
            .aitshd-mmg-act, .aitshd-mmg-act-ico, .aitshd-mmg-act-arrow { transition: none; }
            .aitshd-mega-panel-models .aitshd-mmg-pop-chip:hover,
            .aitshd-mega-panel-models .aitshd-mmg-pop-chip:active { transform: none; }
            .aitshd-mega-panel-models .aitshd-mega-item::before { transform: translateY(-50%) scaleY(1); }
            .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-icon,
            .aitshd-mega-panel-models .aitshd-mega-hero:hover::before,
            .aitshd-mega-panel-models .aitshd-mega-hero:hover .aitshd-mega-hero-art,
            .aitshd-mega-panel-models .aitshd-mega-hero:hover .aitshd-mega-hero-avatar-mark,
            .aitshd-mega-panel-models .aitshd-mmg-pop-chip:hover .aitshd-mmg-pop-mark,
            .aitshd-mmg-act:hover, .aitshd-mmg-act:hover .aitshd-mmg-act-ico,
            .aitshd-mmg-act:hover .aitshd-mmg-act-arrow { transform: none; }
        }

        /* ══════════════════════════════════════════════════════════════════
           AI MODELS MEGA — 2026-07-31 system alignment
           The July premium pass already put this panel on brand blue, so
           this block does NOT restyle it from scratch — it brings the four
           behaviours the Resources / Discover / Deals / Learn redesigns
           standardised on, and fixes the clipping the new "By Capability"
           column would otherwise hit.

           Appended (not merged) on purpose: every rule below repeats a
           selector declared earlier in this file at equal specificity, so
           source order is what makes it win. Keep this block LAST in the
           models region.
           ══════════════════════════════════════════════════════════════════ */
        .aitshd-mega-panel-models {
            /* Models is the core directory, so it keeps the pure brand ramp
               rather than a coloured tail like its four siblings. */
            --mm-a1: #3680ED;
            --mm-a2: #60A4F5;
            --mm-a1-soft: rgba(54,128,237,.06);
            --mm-a2-soft: rgba(96,164,245,.05);
            /* Dense 4-lane panel needs a scroll cap on short laptops. */
            max-height: calc(100vh - var(--hd-h) - 30px);
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-width: thin; scrollbar-color: var(--aits-blue-line) transparent;
        }
        body.theme-dark .aitshd-mega-panel-models {
            --mm-a1: #60A4F5;
            --mm-a2: #93BEFF;
            --mm-a1-soft: rgba(96,164,245,.10);
            --mm-a2-soft: rgba(147,190,255,.07);
        }
        .aitshd-mega-panel-models::-webkit-scrollbar { width: 10px; }
        .aitshd-mega-panel-models::-webkit-scrollbar-thumb {
            background: var(--aits-blue-line);
            border-radius: 999px;
            border: 3px solid var(--aits-card);
        }
        .aitshd-mega-panel-models::-webkit-scrollbar-thumb:hover { background: var(--aits-blue-light); }

        /* Breakpoints aligned with the sibling megas (was 1240 / 1080). */
        @media (max-width: 1320px) {
            .aitshd-mega-panel-models .aitshd-mega-wrap {
                grid-template-columns: 278px minmax(0,1fr) minmax(0,1fr) 344px;
            }
        }
        @media (max-width: 1140px) {
            .aitshd-mega-panel-models .aitshd-mega-wrap {
                grid-template-columns: 262px minmax(0,1fr) 322px;
            }
        }
        @media (max-width: 900px) {
            .aitshd-mega-panel-models .aitshd-mega-wrap { grid-template-columns: 1fr; }
            .aitshd-mega-panel-models .aitshd-mega-featured-col { display: none; }
        }

        /* Columns become flex so the view-all pill can pin to the bottom and
           the three lanes end on the same baseline. */
        .aitshd-mega-panel-models .aitshd-mega-col,
        .aitshd-mega-panel-models .aitshd-mega-browse {
            display: flex; flex-direction: column;
            min-width: 0;
        }

        /* TITLES WRAP (were nowrap+ellipsis). The By-Capability lane carries
           "Chat & Assistants" / "Image Generation" / "Freemium Models", which
           ellipsized in a 1fr column at 1280px. */
        .aitshd-mega-panel-models .aitshd-mega-item-title {
            overflow: hidden;
            gap: 7px;
            flex-wrap: wrap;
            white-space: normal;
            line-height: 1.22;
            max-height: 2.44em;
        }
        .aitshd-mega-panel-models .aitshd-mega-item-title > span:first-child {
            min-width: 0;
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
        }
        /* DESCS clamp to 2 lines (were a single nowrap line from the base
           rule) — "Voice, music & transcription", "See, read & understand
           images" and "Search, RAG & similarity" all overflowed. */
        .aitshd-mega-panel-models .aitshd-mega-item-desc {
            font-size: 11.5px;
            margin-top: 2px;
            line-height: 1.34;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: clip;
        }

        /* Icon tiles — the sheen + tone-glow the sibling megas use. */
        .aitshd-mega-panel-models .aitshd-mega-item .aitshd-mega-item-icon {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.55);
        }
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item .aitshd-mega-item-icon {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
        }
        @media (hover: hover) {
            .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-icon {
                transform: scale(1.07) translateY(-1px);
                box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 22px -8px currentColor;
            }
            body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-icon {
                box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px -8px currentColor;
            }
        }

        /* View-all — the shared brand pill with an arrow-in-disc, pinned to
           the column bottom so the lanes end level. */
        .aitshd-mega-panel-models .aitshd-mega-view-all-link {
            margin: auto 0 0;
            display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 10px 10px 10px 14px;
            border-radius: 12px;
            font-size: 12.5px; font-weight: 700;
            letter-spacing: -0.005em;
            color: var(--aits-blue-dark);
            border: 1px solid var(--aits-blue-line);
            background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2));
            box-shadow: 0 1px 0 rgba(15,23,42,.03), inset 0 1px 0 rgba(255,255,255,.6);
            white-space: nowrap;
            transition: background .22s var(--ease,ease), border-color .2s, box-shadow .22s, color .2s, transform .18s;
        }
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-view-all-link {
            color: var(--aits-blue-light);
            background: linear-gradient(180deg, var(--aits-surface-3), var(--aits-blue-tint-2));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
        }
        .aitshd-mega-panel-models .aitshd-mega-view-all-link svg {
            flex: none;
            width: 24px; height: 24px; padding: 5px;
            border-radius: 999px;
            background: var(--aits-blue-tint);
            color: var(--aits-blue);
            transition: background .2s, color .2s, transform .2s;
        }
        .aitshd-mega-panel-models .aitshd-mega-view-all-link:hover,
        .aitshd-mega-panel-models .aitshd-mega-view-all-link:focus {
            color: var(--aits-blue-dark);
            border-color: var(--aits-blue);
            background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-blue-tint));
            box-shadow: 0 10px 22px -14px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.7);
            transform: translateY(-1px);
        }
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-view-all-link:hover,
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-view-all-link:focus {
            color: var(--aits-blue-light);
        }
        .aitshd-mega-panel-models .aitshd-mega-view-all-link:hover svg {
            background: var(--aits-blue);
            color: #fff;
            transform: translateX(3px);
        }

        /* Popular Models strip — the six chips + tail button only fit one
           line at a ~1440px panel; at 1280px "Claude 3.5 Sonnet" clipped to
           "Claude 3.5 S…". The row may now wrap and each name may take two
           lines, so no model name is ever truncated at any width. (Supersedes
           the single-line arithmetic noted in the 2026-07-25 pass.) */
        .aitshd-mega-panel-models .aitshd-mega-models-popular-row {
            flex-wrap: wrap;
        }
        .aitshd-mega-panel-models .aitshd-mmg-pop-chip {
            flex: 1 1 176px;
        }
        .aitshd-mega-panel-models .aitshd-mmg-pop-name {
            white-space: normal;
            line-height: 1.2;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: clip;
        }
        .aitshd-mega-panel-models .aitshd-mmg-pop-provider {
            white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis;
        }

        /* Provider rows keep their count pill on-brand on hover. */
        .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-count {
            background: var(--aits-blue-tint);
            color: var(--aits-blue-dark);
            border-color: transparent;
        }
        body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-count {
            color: var(--aits-blue-light);
        }

        /* ══════════════════════════════════════════════════════════════════
           AI LEARN MEGA — premium learning hub (2026-07-31 redesign)
           Four learning lanes (Courses / Projects / Prompts / Templates) +
           a Featured-Course hero with side cards, then a Popular Right Now
           strip and a trust-badge footer.

           Identity: BRAND-BLUE led (#3680ED → violet #8B5CF6) — the fourth
           sibling of the redesigned set (Resources blue→indigo, Discover
           blue→cyan, Deals blue→rose). Violet is the education tail; the
           chrome and every CTA are brand blue.

           Fixes shipped here (live bugs in the screenshot):
             · row descriptions no longer clip at one line ("Optimized
               for…" → "Optimized for ChatGPT").
             · Popular Right Now chip names wrap instead of ellipsizing.
             · the hero's BESTSELLER badge can never be stranded on its own
               line by the wrapping title (the Discover badge trap).
             · view-all links pin to the column bottoms.
           All rules scoped under .aitshd-mega-panel-learn (or the
           .aitshd-lm-* / .aitshd-drawer-learn-* namespaces) so nothing
           leaks into the six sibling megas.
           ══════════════════════════════════════════════════════════════════ */

        /* Panel-local accent tokens — retune the whole identity here. */
        .aitshd-mega-panel-learn {
            --lm-a1: #3680ED;   /* brand blue */
            --lm-a2: #8B5CF6;   /* violet     */
            --lm-a1-soft: rgba(54,128,237,.06);
            --lm-a2-soft: rgba(139,92,246,.05);
            --lm-grad: linear-gradient(90deg, var(--lm-a1), var(--lm-a2));
        }
        body.theme-dark .aitshd-mega-panel-learn {
            --lm-a1: #60A4F5;
            --lm-a2: #A78BFA;
            --lm-a1-soft: rgba(96,164,245,.10);
            --lm-a2-soft: rgba(167,139,250,.08);
        }

        .aitshd[data-mega-learn-open="1"] .aitshd-mega-panel-learn {
            display: block;
            opacity: 1;
            transform: translate(-50%, 12px);
        }
        .aitshd[data-mega-learn-open="1"] .aitshd-mega-backdrop { opacity: 1; pointer-events: auto; }

        /* Panel shell — brand-blue ambient wash toward the featured rail,
           scroll-capped with a branded scrollbar so four dense lanes fit a
           short laptop/tablet. */
        .aitshd-mega-panel-learn {
            background:
                radial-gradient(120% 90% at 100% 0%, rgba(54,128,237,.05) 0%, transparent 52%),
                radial-gradient(90% 120% at 100% 100%, rgba(139,92,246,.045) 0%, transparent 55%),
                var(--aits-card);
            max-height: calc(100vh - var(--hd-h) - 30px);
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-width: thin; scrollbar-color: var(--aits-blue-line) transparent;
        }
        body.theme-dark .aitshd-mega-panel-learn {
            background:
                radial-gradient(120% 90% at 100% 0%, rgba(96,164,245,.10) 0%, transparent 52%),
                radial-gradient(90% 120% at 100% 100%, rgba(167,139,250,.07) 0%, transparent 55%),
                var(--aits-card);
        }
        .aitshd-mega-panel-learn::-webkit-scrollbar { width: 10px; }
        .aitshd-mega-panel-learn::-webkit-scrollbar-thumb {
            background: var(--aits-blue-line);
            border-radius: 999px;
            border: 3px solid var(--aits-card);
        }
        .aitshd-mega-panel-learn::-webkit-scrollbar-thumb:hover { background: var(--aits-blue-light); }

        /* ── Grid — four equal lanes + the featured rail. */
        .aitshd-mega-panel-learn .aitshd-mega-wrap {
            grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 326px;
        }
        @media (max-width: 1320px) {
            .aitshd-mega-panel-learn .aitshd-mega-wrap {
                grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 296px;
            }
        }
        @media (max-width: 1140px) {
            .aitshd-mega-panel-learn .aitshd-mega-wrap {
                grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 296px;
            }
            .aitshd-mega-panel-learn .aitshd-mega-col-templates { display: none; }
        }
        @media (max-width: 900px) {
            .aitshd-mega-panel-learn .aitshd-mega-wrap { grid-template-columns: 1fr; }
            .aitshd-mega-panel-learn .aitshd-mega-featured-col { display: none; }
        }

        /* Columns — flex-column so the view-all pill can pin to the bottom. */
        .aitshd-mega-panel-learn .aitshd-mega-col {
            padding: 24px 14px 18px;
            position: relative;
            display: flex; flex-direction: column;
            min-width: 0;
        }
        .aitshd-mega-panel-learn .aitshd-mega-col + .aitshd-mega-col {
            border-left: 1px solid transparent;
            background-image: linear-gradient(180deg, transparent, var(--aits-line) 12%, var(--aits-line) 88%, transparent);
            background-repeat: no-repeat;
            background-size: 1px 100%;
            background-position: left center;
        }
        .aitshd-mega-panel-learn .aitshd-mega-featured-col {
            padding: 24px 22px 20px 8px;
            gap: 12px;
        }

        /* Column headers — brand accent bar + tidy label */
        .aitshd-mega-panel-learn .aitshd-mega-colh {
            font-size: 10.5px; font-weight: 800;
            letter-spacing: .16em; text-transform: uppercase;
            color: var(--aits-blue-dark);
            padding: 2px 6px 12px;
            position: relative;
            display: flex; align-items: center; gap: 8px;
        }
        body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-colh { color: var(--aits-blue-light); }
        .aitshd-mega-panel-learn .aitshd-mega-colh::before {
            content: '';
            width: 18px; height: 3px; border-radius: 999px;
            background: var(--lm-grad);
            flex: none;
        }

        /* ── Row items — accent bar wipes in, icon lifts with a tone glow,
           title wraps to 2 lines, desc clamps at 2 (was 1 — the clip). */
        .aitshd-mega-panel-learn .aitshd-mega-item,
        .aitshd-mega-panel-learn .aitshd-mega-item.is-lg {
            padding: 9px 8px 9px 14px;
            gap: 10px;
            border-radius: 13px;
            align-items: center;
            transition: background-color .2s var(--ease,ease), transform .18s var(--ease,ease);
        }
        .aitshd-mega-panel-learn .aitshd-mega-item::before {
            content: '';
            position: absolute;
            left: 4px; top: 50%;
            width: 3px; height: 22px;
            border-radius: 999px;
            background: var(--lm-grad);
            transform: translateY(-50%) scaleY(.2);
            transform-origin: center;
            opacity: 0;
            transition: transform .22s var(--ease,ease), opacity .22s var(--ease,ease);
        }
        .aitshd-mega-panel-learn .aitshd-mega-item:hover {
            background: linear-gradient(90deg, var(--lm-a1-soft), var(--lm-a2-soft));
        }
        .aitshd-mega-panel-learn .aitshd-mega-item:hover::before {
            transform: translateY(-50%) scaleY(1);
            opacity: 1;
        }
        .aitshd-mega-panel-learn .aitshd-mega-item .aitshd-mega-item-icon,
        .aitshd-mega-panel-learn .aitshd-mega-item.is-lg .aitshd-mega-item-icon {
            width: 38px; height: 38px; border-radius: 11px;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.55);
        }
        body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-item .aitshd-mega-item-icon,
        body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-item.is-lg .aitshd-mega-item-icon {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
        }
        .aitshd-mega-panel-learn .aitshd-mega-item-icon svg { width: 18px; height: 18px; }
        .aitshd-mega-panel-learn .aitshd-mega-item:hover .aitshd-mega-item-icon {
            transform: scale(1.07) translateY(-1px);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 22px -8px currentColor;
        }
        body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-item:hover .aitshd-mega-item-icon {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px -8px currentColor;
        }
        /* Title — wraps to 2 lines; the FREE badge is held on the last flow
           line by the universal label-shrink rule + flex:none below. */
        .aitshd-mega-panel-learn .aitshd-mega-item-title,
        .aitshd-mega-panel-learn .aitshd-mega-item.is-lg .aitshd-mega-item-title {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            white-space: normal;
            overflow: hidden;
            text-overflow: clip;
            line-height: 1.22;
            font-size: 13.5px;
            font-weight: 700;
            letter-spacing: -0.01em;
            max-height: 2.44em;
        }
        .aitshd-mega-panel-learn .aitshd-mega-badge-inline {
            flex: none;
            font-size: 9px;
            padding: 3px 6px;
            letter-spacing: .05em;
        }
        /* Desc — TWO-line clamp (was 1: that clipped "Optimized for
           ChatGPT", "Blogs, articles & more", "Plans, docs & more"). */
        .aitshd-mega-panel-learn .aitshd-mega-item-desc {
            font-size: 11.5px;
            font-weight: 400;
            color: var(--aits-mut);
            line-height: 1.34;
            margin-top: 2px;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-mega-panel-learn .aitshd-mega-item:hover .aitshd-mega-item-title {
            color: var(--aits-blue-dark);
        }
        body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-item:hover .aitshd-mega-item-title {
            color: var(--aits-blue-light);
        }
        .aitshd-mega-panel-learn .aitshd-mega-item:hover .aitshd-mega-item-arrow { color: var(--aits-blue); }

        /* View-all — brand pill pinned to the column bottom, arrow-in-disc
           slides on hover. Kills the ragged column tails. */
        .aitshd-mega-panel-learn .aitshd-mega-view-all-link {
            margin: auto 0 0;
            display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 10px 10px 10px 14px;
            border-radius: 12px;
            font-size: 12.5px; font-weight: 700;
            letter-spacing: -0.005em;
            color: var(--aits-blue-dark);
            border: 1px solid var(--aits-blue-line);
            background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2));
            box-shadow: 0 1px 0 rgba(15,23,42,.03), inset 0 1px 0 rgba(255,255,255,.6);
            transition: background .22s var(--ease,ease), border-color .2s, box-shadow .22s, color .2s, transform .18s;
        }
        body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-view-all-link {
            color: var(--aits-blue-light);
            background: linear-gradient(180deg, var(--aits-surface-3), var(--aits-blue-tint-2));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
        }
        .aitshd-mega-panel-learn .aitshd-mega-view-all-link svg {
            flex: none;
            width: 24px; height: 24px; padding: 5px;
            border-radius: 999px;
            background: var(--aits-blue-tint);
            color: var(--aits-blue);
            transition: background .2s, color .2s, transform .2s;
        }
        .aitshd-mega-panel-learn .aitshd-mega-view-all-link:hover,
        .aitshd-mega-panel-learn .aitshd-mega-view-all-link:focus {
            color: var(--aits-blue-dark);
            border-color: var(--aits-blue);
            background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-blue-tint));
            box-shadow: 0 10px 22px -14px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.7);
            transform: translateY(-1px);
        }
        body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-view-all-link:hover,
        body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-view-all-link:focus {
            color: var(--aits-blue-light);
        }
        .aitshd-mega-panel-learn .aitshd-mega-view-all-link:hover svg {
            background: var(--aits-blue);
            color: #fff;
            transform: translateX(3px);
        }

        /* Usage-count pill (10K+, 2.1K+ …) — slim capsule that promotes to
           brand tint on hover. */
        .aitshd-lm-count {
            flex: none;
            font-size: 10.5px; font-weight: 800;
            letter-spacing: .02em;
            color: var(--aits-mut);
            padding: 3px 7px;
            border-radius: 999px;
            background: var(--aits-surface-3);
            border: 1px solid transparent;
            transition: color .2s, background-color .2s, border-color .2s, transform .2s;
        }
        .aitshd-mega-panel-learn .aitshd-mega-item:hover .aitshd-lm-count {
            background: var(--aits-blue-tint);
            color: var(--aits-blue-dark);
            border-color: var(--aits-blue-line);
            transform: translateX(-2px);
        }
        body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-item:hover .aitshd-lm-count {
            color: var(--aits-blue-light);
        }

        /* ═══════ Featured Course hero ═══════
           Deep-navy glass in the shared hero family (same base as the
           Resources / Discover / Deals heroes) with a brand-blue halo and
           a violet education glow. */
        .aitshd-mega-panel-learn .aitshd-mega-hero {
            padding: 22px;
            min-height: 276px;
            background:
                radial-gradient(120% 90% at 100% 0%, rgba(96,164,245,.42) 0%, transparent 55%),
                radial-gradient(90% 120% at 0% 100%, rgba(167,139,250,.36) 0%, transparent 55%),
                linear-gradient(140deg, #0E1B3A 0%, #122152 52%, #0B1226 100%);
            box-shadow:
                0 24px 48px -22px rgba(15,23,42,.55),
                inset 0 1px 0 rgba(255,255,255,.10),
                inset 0 0 0 1px rgba(255,255,255,.05);
        }
        .aitshd-mega-panel-learn .aitshd-mega-hero::before {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
            background-size: 14px 14px;
            opacity: .06;
            pointer-events: none;
        }
        .aitshd-mega-panel-learn .aitshd-mega-hero::after {
            right: -40px; top: 30%;
            width: 240px; height: 240px;
            background: radial-gradient(circle at 30% 30%, rgba(147,197,253,.42) 0%, rgba(96,164,245,.20) 45%, transparent 72%);
        }
        .aitshd-mega-panel-learn .aitshd-mega-hero-head {
            align-items: center;
            gap: 8px; flex-wrap: wrap;
        }
        .aitshd-mega-panel-learn .aitshd-mega-hero-pill {
            padding: 6px 11px;
            font-size: 10px; letter-spacing: .16em;
            background: linear-gradient(135deg, rgba(147,190,255,.18), rgba(167,139,250,.12));
            border-color: rgba(147,190,255,.32);
            color: #BFE0FF;
            backdrop-filter: blur(6px);
        }
        .aitshd-mega-panel-learn .aitshd-mega-hero-shield {
            width: 32px; height: 32px; border-radius: 999px;
            background: linear-gradient(135deg, rgba(252,211,77,.22), rgba(251,146,60,.18));
            border-color: rgba(252,211,77,.35);
        }
        .aitshd-mega-panel-learn .aitshd-mega-hero-avatar {
            margin-top: 22px;
            align-items: center;
            min-width: 0;
        }
        .aitshd-mega-panel-learn .aitshd-mega-hero-avatar-mark {
            width: 46px; height: 46px; border-radius: 14px;
            background: linear-gradient(135deg, #ffffff, #EAF2FD);
            color: var(--aits-blue-dark);
            box-shadow: 0 10px 24px -8px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.35);
            transition: transform .28s var(--ease,ease);
        }
        .aitshd-mega-panel-learn .aitshd-mega-hero:hover .aitshd-mega-hero-avatar-mark {
            transform: scale(1.05) rotate(-3deg);
        }
        /* NO flex-wrap here — with wrap on, the flex algorithm wraps the
           badge to its own line BEFORE it will shrink the label, which is
           exactly what stranded "BESTSELLER" under the title (the Discover
           badge trap, re-hit here). Single flex line + a shrinkable label
           lets the TEXT reflow internally while the badge stays inline. */
        .aitshd-mega-panel-learn .aitshd-mega-hero-avatar-name {
            font-size: 17px; font-weight: 800; letter-spacing: -0.015em;
            display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 7px;
            min-width: 0;
            line-height: 1.18;
        }
        .aitshd-mega-panel-learn .aitshd-mega-hero-avatar-name > span:first-child {
            flex: 1 1 auto; min-width: 0;
        }

        .aitshd-lm-hero-sub {
            display: block;
            position: relative; z-index: 1;
            font-size: 13px; font-weight: 500;
            color: rgba(255,255,255,.82);
            line-height: 1.5;
            margin-top: 14px;
        }

        .aitshd-lm-rating {
            display: inline-flex; align-items: center; gap: 6px;
            margin-top: 14px;
            padding: 5px 10px;
            border-radius: 999px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.12);
            position: relative; z-index: 1;
            font-size: 12.5px; font-weight: 700;
            color: rgba(255,255,255,.92);
            backdrop-filter: blur(6px);
        }
        .aitshd-lm-rating svg { color: #FCD34D; width: 13px; height: 13px; }
        .aitshd-lm-rating .students {
            color: rgba(255,255,255,.6);
            font-weight: 500;
        }
        /* Sits in the hero head between the pill and the award shield;
           margin-right:auto keeps the shield pinned right under the
           head's space-between. */
        .aitshd-lm-badge {
            display: inline-flex; align-items: center;
            flex: none;
            margin-right: auto;
            white-space: nowrap;
            font-size: 9.5px; font-weight: 800;
            letter-spacing: .10em; text-transform: uppercase;
            padding: 3px 8px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(96,164,245,.38), rgba(167,139,250,.30));
            color: #DBEAFE;
            border: 1px solid rgba(147,190,255,.32);
            line-height: 1;
        }

        /* Hero CTA — the BRAND gradient, matching every other mega's
           primary button. */
        .aitshd-mega-panel-learn .aitshd-mega-hero-cta {
            margin-top: 18px;
            padding: 12px 20px;
            border-radius: 12px;
            background: linear-gradient(135deg, #3680ED, #4F46E5);
            font-size: 13.5px; font-weight: 800;
            letter-spacing: -0.01em;
            box-shadow:
                0 14px 28px -10px rgba(54,128,237,.62),
                inset 0 1px 0 rgba(255,255,255,.22);
            transition: transform .2s, box-shadow .2s, background .2s, filter .2s;
        }
        .aitshd-mega-panel-learn .aitshd-mega-hero-cta:hover,
        .aitshd-mega-panel-learn .aitshd-mega-hero:hover .aitshd-mega-hero-cta {
            background: linear-gradient(135deg, #2060C0, #4338CA);
            transform: translateY(-1px);
            filter: saturate(1.05);
            box-shadow:
                0 20px 32px -12px rgba(54,128,237,.78),
                inset 0 1px 0 rgba(255,255,255,.26);
        }
        .aitshd-mega-panel-learn .aitshd-mega-hero-cta svg { transition: transform .2s; }
        .aitshd-mega-panel-learn .aitshd-mega-hero-cta:hover svg,
        .aitshd-mega-panel-learn .aitshd-mega-hero:hover .aitshd-mega-hero-cta svg { transform: translateX(4px); }

        /* ═══════ Stacked side cards (Trending Project / Popular Prompt) ═══════ */
        .aitshd-lm-side {
            position: relative;
            display: flex; flex-direction: column;
            gap: 10px;
            padding: 14px 15px;
            border-radius: 16px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            text-decoration: none;
            color: var(--aits-ink);
            overflow: hidden;
            transition: border-color .2s, box-shadow .2s, transform .2s;
        }
        .aitshd-lm-side::before {
            content: '';
            position: absolute; left: 0; right: 0; top: 0; height: 3px;
            background: linear-gradient(90deg, var(--tint-blue-ink), rgba(139,92,246,.6));
            opacity: .5;
            transition: opacity .2s;
        }
        .aitshd-lm-side[data-tone="violet"]::before  { background: linear-gradient(90deg, var(--tint-violet-ink),  rgba(139,92,246,.6)); }
        .aitshd-lm-side[data-tone="emerald"]::before { background: linear-gradient(90deg, var(--tint-emerald-ink), rgba(16,185,129,.6)); }
        .aitshd-lm-side[data-tone="amber"]::before   { background: linear-gradient(90deg, var(--tint-amber-ink),   rgba(245,158,11,.6)); }
        .aitshd-lm-side[data-tone="rose"]::before    { background: linear-gradient(90deg, var(--tint-rose-ink),    rgba(244,63,94,.6)); }
        .aitshd-lm-side:hover {
            border-color: var(--aits-blue-line);
            box-shadow: 0 16px 30px -18px rgba(54,128,237,.42);
            transform: translateY(-2px);
        }
        .aitshd-lm-side:hover::before { opacity: 1; }
        .aitshd-lm-side-head {
            display: flex; align-items: center; justify-content: space-between;
            gap: 8px;
            font-size: 10px; font-weight: 800;
            letter-spacing: .16em; text-transform: uppercase;
            color: var(--aits-blue-dark);
        }
        body.theme-dark .aitshd-lm-side-head { color: var(--aits-blue-light); }
        .aitshd-lm-side-head svg {
            flex: none;
            color: var(--aits-faint);
            transition: color .2s, transform .2s;
        }
        .aitshd-lm-side:hover .aitshd-lm-side-head svg {
            color: var(--aits-blue);
            transform: translateX(4px);
        }
        .aitshd-lm-side-body {
            display: flex; gap: 12px; align-items: flex-start;
        }
        .aitshd-lm-side-ico {
            width: 42px; height: 42px; border-radius: 12px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5);
            transition: transform .2s, box-shadow .2s;
        }
        body.theme-dark .aitshd-lm-side-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
        .aitshd-lm-side:hover .aitshd-lm-side-ico {
            transform: scale(1.06);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 18px -8px currentColor;
        }
        .aitshd-lm-side[data-tone="violet"]  .aitshd-lm-side-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-lm-side[data-tone="emerald"] .aitshd-lm-side-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-lm-side[data-tone="amber"]   .aitshd-lm-side-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-lm-side[data-tone="rose"]    .aitshd-lm-side-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-lm-side-title {
            font-size: 13.5px; font-weight: 700;
            color: var(--aits-ink);
            line-height: 1.3;
            letter-spacing: -0.01em;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-lm-side:hover .aitshd-lm-side-title { color: var(--aits-blue-dark); }
        body.theme-dark .aitshd-lm-side:hover .aitshd-lm-side-title { color: var(--aits-blue-light); }
        .aitshd-lm-side-desc {
            font-size: 11.5px; font-weight: 400;
            color: var(--aits-mut);
            line-height: 1.4;
            margin-top: 4px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* ═══════ Popular Right Now strip ═══════ */
        .aitshd-mega-panel-learn .aitshd-mega-popular {
            padding: 18px 24px 20px;
            background: linear-gradient(0deg, var(--aits-surface-2) 0%, var(--aits-card) 80%);
        }
        .aitshd-mega-panel-learn .aitshd-mega-popular-head {
            padding: 0 4px 14px;
            gap: 12px; flex-wrap: wrap;
        }
        .aitshd-mega-panel-learn .aitshd-mega-popular-head strong {
            font-size: 10.5px; font-weight: 800;
            letter-spacing: .16em; text-transform: uppercase;
            color: var(--aits-blue-dark);
            display: inline-flex; align-items: center; gap: 8px;
        }
        body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-popular-head strong { color: var(--aits-blue-light); }
        .aitshd-mega-panel-learn .aitshd-mega-popular-head strong::before {
            content: '';
            width: 6px; height: 6px; border-radius: 999px;
            background: var(--aits-blue);
            box-shadow: 0 0 0 3px rgba(54,128,237,.22);
            animation: aitshdLmPulse 2.2s ease-in-out infinite;
        }
        @keyframes aitshdLmPulse {
            0%, 100% { box-shadow: 0 0 0 3px rgba(54,128,237,.22); }
            50%      { box-shadow: 0 0 0 6px rgba(54,128,237,.05); }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-mega-panel-learn .aitshd-mega-popular-head strong::before { animation: none; }
        }
        .aitshd-mega-panel-learn .aitshd-mega-popular-head a {
            font-size: 12.5px; font-weight: 700;
            color: var(--aits-blue-dark);
            text-decoration: none;
            display: inline-flex; align-items: center; gap: 5px;
            padding: 6px 10px; border-radius: 999px;
            transition: background .18s, color .18s;
        }
        body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-popular-head a { color: var(--aits-blue-light); }
        .aitshd-mega-panel-learn .aitshd-mega-popular-head a:hover { background: var(--aits-blue-tint); }
        .aitshd-mega-panel-learn .aitshd-mega-popular-head a svg { transition: transform .2s; }
        .aitshd-mega-panel-learn .aitshd-mega-popular-head a:hover svg { transform: translateX(3px); }
        .aitshd-lm-pop-chip {
            position: relative;
            display: flex; align-items: center; gap: 12px;
            padding: 12px 14px;
            border-radius: 16px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            color: var(--aits-ink);
            text-decoration: none;
            transition: border-color .2s, transform .2s, box-shadow .2s;
            min-width: 0;
            box-shadow: 0 1px 0 rgba(15,23,42,.03);
        }
        .aitshd-lm-pop-chip:hover {
            border-color: var(--aits-blue-line);
            transform: translateY(-2px);
            box-shadow:
                0 16px 28px -18px rgba(54,128,237,.42),
                0 2px 4px rgba(15,23,42,.04);
        }
        .aitshd-lm-pop-mark {
            width: 40px; height: 40px; border-radius: 12px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            font-weight: 900; font-size: 14px; letter-spacing: -0.02em;
            flex: none;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5);
            transition: transform .2s, box-shadow .2s;
        }
        body.theme-dark .aitshd-lm-pop-mark { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
        .aitshd-lm-pop-chip:hover .aitshd-lm-pop-mark {
            transform: scale(1.06);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 18px -8px currentColor;
        }
        .aitshd-lm-pop-chip[data-tone="indigo"]  .aitshd-lm-pop-mark { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-lm-pop-chip[data-tone="violet"]  .aitshd-lm-pop-mark { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-lm-pop-chip[data-tone="emerald"] .aitshd-lm-pop-mark { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-lm-pop-chip[data-tone="amber"]   .aitshd-lm-pop-mark { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-lm-pop-chip[data-tone="rose"]    .aitshd-lm-pop-mark { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-lm-pop-chip[data-tone="cyan"]    .aitshd-lm-pop-mark { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-lm-pop-chip[data-tone="pink"]    .aitshd-lm-pop-mark { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-lm-pop-chip[data-tone="slate"]   .aitshd-lm-pop-mark { background: var(--tint-slate-bg);   color: var(--tint-slate-ink); }
        .aitshd-lm-pop-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
        /* Name wraps to 2 lines — "AI Image Generator Prompts" and
           "Midjourney Prompt Pack" ellipsized at 220px chip width. */
        .aitshd-lm-pop-name {
            font-size: 13px; font-weight: 700;
            color: var(--aits-ink);
            line-height: 1.22;
            letter-spacing: -0.01em;
            white-space: normal;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-lm-pop-chip:hover .aitshd-lm-pop-name { color: var(--aits-blue-dark); }
        body.theme-dark .aitshd-lm-pop-chip:hover .aitshd-lm-pop-name { color: var(--aits-blue-light); }
        .aitshd-lm-pop-meta {
            display: inline-flex; align-items: center; gap: 6px;
            flex-wrap: wrap;
            font-size: 11.5px; font-weight: 500;
            color: var(--aits-mut);
            margin-top: 3px;
        }
        .aitshd-lm-pop-meta svg { color: #F59E0B; width: 12px; height: 12px; flex: none; }
        .aitshd-lm-pop-meta .rating {
            font-weight: 700; color: var(--aits-ink);
        }
        .aitshd-lm-popular-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
            gap: 10px;
        }

        /* ═══════ Trust badges strip ═══════ */
        .aitshd-lm-trust {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 0;
            padding: 16px 24px 20px;
            border-top: 1px solid var(--aits-line);
            background: linear-gradient(0deg, var(--aits-surface-2), var(--aits-card));
        }
        .aitshd-lm-trust-item {
            display: flex; align-items: center; gap: 12px;
            padding: 6px 20px;
            font-size: 13px; font-weight: 600;
            color: var(--aits-ink);
            position: relative;
        }
        .aitshd-lm-trust-item + .aitshd-lm-trust-item::before {
            content: '';
            position: absolute; left: 0; top: 20%; bottom: 20%;
            width: 1px;
            background: var(--aits-line);
        }
        .aitshd-lm-trust-item:first-child { padding-left: 4px; }
        .aitshd-lm-trust-ico {
            width: 34px; height: 34px; border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5);
        }
        body.theme-dark .aitshd-lm-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
        .aitshd-lm-trust-item[data-tone="emerald"] .aitshd-lm-trust-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-lm-trust-item[data-tone="amber"]   .aitshd-lm-trust-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-lm-trust-item[data-tone="violet"]  .aitshd-lm-trust-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-lm-trust-item[data-tone="rose"]    .aitshd-lm-trust-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-lm-trust-item[data-tone="pink"]    .aitshd-lm-trust-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-lm-trust-item[data-tone="cyan"]    .aitshd-lm-trust-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-lm-trust-item[data-tone="indigo"]  .aitshd-lm-trust-ico { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }

        /* ═══════ Mobile drawer — AI Learn section ═══════
           On-brand rebuild for phones/tablets (<1024px, where the mega is
           unreachable): navy hero in the shared family + brand CTA, chip
           grid, wrap-capable chip titles. */
        .aitshd-drawer-learn-hero {
            display: block;
            position: relative;
            margin: 6px 0 14px;
            padding: 16px 16px 18px;
            border-radius: 18px;
            color: #fff !important;
            text-decoration: none !important;
            background:
                radial-gradient(100% 90% at 100% 0%, rgba(96,164,245,.42) 0%, transparent 55%),
                radial-gradient(90% 120% at 0% 100%, rgba(167,139,250,.36) 0%, transparent 55%),
                linear-gradient(140deg, #0E1B3A, #122152 52%, #0B1226);
            box-shadow: 0 18px 34px -20px rgba(15,23,42,.55), inset 0 1px 0 rgba(255,255,255,.10);
            overflow: hidden;
        }
        .aitshd-drawer-learn-hero::before {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(rgba(255,255,255,.20) 1px, transparent 1px);
            background-size: 12px 12px;
            opacity: .06; pointer-events: none;
        }
        .aitshd-drawer-learn-hero-head {
            display: flex; align-items: center; justify-content: space-between;
            gap: 10px; flex-wrap: wrap;
            position: relative; z-index: 1;
        }
        .aitshd-drawer-learn-hero-pill {
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 9.5px; font-weight: 800;
            letter-spacing: .14em; text-transform: uppercase;
            color: #BFE0FF;
            padding: 5px 9px;
            border-radius: 999px;
            border: 1px solid rgba(147,190,255,.32);
            background: rgba(147,190,255,.12);
        }
        .aitshd-drawer-learn-hero-pill svg { color: #FCD34D; }
        .aitshd-drawer-learn-hero-title {
            display: block; position: relative; z-index: 1;
            margin-top: 12px;
            font-size: 16px; font-weight: 800; letter-spacing: -0.015em;
            color: #fff;
        }
        .aitshd-drawer-learn-hero-sub {
            display: block; position: relative; z-index: 1;
            margin-top: 4px;
            font-size: 12.5px; font-weight: 500;
            color: rgba(255,255,255,.78);
            line-height: 1.45;
        }
        .aitshd-drawer-learn-hero-cta {
            display: inline-flex; align-items: center; gap: 6px;
            margin-top: 14px;
            padding: 9px 16px;
            border-radius: 10px;
            background: linear-gradient(135deg, #3680ED, #4F46E5);
            color: #fff !important;
            font-size: 12.5px; font-weight: 800;
            letter-spacing: -0.01em;
            box-shadow:
                0 10px 22px -8px rgba(54,128,237,.7),
                inset 0 1px 0 rgba(255,255,255,.20);
            position: relative; z-index: 1;
            transition: transform .18s var(--ease,ease), box-shadow .18s var(--ease,ease), filter .18s var(--ease,ease);
        }
        .aitshd-drawer-learn-hero-cta:active {
            transform: scale(.97);
            filter: saturate(1.05);
        }
        .aitshd-drawer-learn-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin: 8px 0 4px;
        }
        .aitshd-drawer-learn-chip {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            color: var(--aits-ink);
            text-decoration: none;
            font-size: 12.5px; font-weight: 600;
            min-width: 0;
            transition: border-color .18s, background-color .18s, transform .18s;
        }
        .aitshd-drawer-learn-chip:hover,
        .aitshd-drawer-learn-chip:active {
            border-color: var(--aits-blue-line);
            background: var(--aits-blue-tint-2);
            transform: translateY(-1px);
        }
        .aitshd-drawer-learn-chip-ico {
            width: 32px; height: 32px; border-radius: 9px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
        }
        .aitshd-drawer-learn-chip[data-tone="indigo"]  .aitshd-drawer-learn-chip-ico { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-drawer-learn-chip[data-tone="violet"]  .aitshd-drawer-learn-chip-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-drawer-learn-chip[data-tone="emerald"] .aitshd-drawer-learn-chip-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-drawer-learn-chip[data-tone="amber"]   .aitshd-drawer-learn-chip-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-drawer-learn-chip[data-tone="rose"]    .aitshd-drawer-learn-chip-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-drawer-learn-chip[data-tone="cyan"]    .aitshd-drawer-learn-chip-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-drawer-learn-chip-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
        /* Chip titles wrap to 2 lines — same fix as the Discover/Deals chips. */
        .aitshd-drawer-learn-chip-title {
            font-size: 13px; font-weight: 700; color: var(--aits-ink);
            white-space: normal; line-height: 1.2;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-drawer-learn-chip-count {
            font-size: 10.5px; font-weight: 600;
            color: var(--aits-mut);
            margin-top: 2px;
            letter-spacing: .02em;
        }

        /* ══════════════════════════════════════════════════════════════════
           DEALS MEGA — premium savings hub (2026-07-31 redesign)
           Browse Deals rail + promo / By Category / By Discount / Popular
           Deals + a Deal-of-the-Day hero, mini grid, alerts, quicklinks,
           then a full-width trust strip.

           Identity: BRAND-BLUE led (#3680ED → rose #F43F5E) — blue-first
           chrome so Deals reads unmistakably AIToolsay, with a rose tail
           for commerce heat. Semantic color stays semantic: the discount
           ladder (rose→slate pct pills), the OFF pills, and the red
           countdown pulse keep their meaning-carrying warm hues.

           Fixes shipped here (live bugs in the screenshot):
             · popular deal cards no longer clip ("Jaspe…", "SEMru…",
               "$89.95/mo 9.95/m…") — the always-on arrow left the grid
               (now a hover reveal), the mark slimmed 48→40px, names may
               wrap 2 lines and the price row wraps instead of clipping.
             · the Deal-of-the-Day countdown ("12h : 45m : 3…") wraps
               below the pill on narrow rails instead of running off.
             · category labels ("AI Productivity") + browse descs
               ("Browse all 150+ deals") wrap instead of ellipsizing.
             · view-all links pin to the column bottoms.
           All rules scoped under .aitshd-mega-panel-deals (or the
           .aitshd-dm-* / .aitshd-drawer-deals-* namespaces).
           ══════════════════════════════════════════════════════════════════ */

        /* Panel-local accent tokens. Light: brand blue → rose. Dark: lifted
           twins so accents glow on the dark surface. */
        .aitshd-mega-panel-deals {
            --dm-a1: #3680ED;   /* brand blue */
            --dm-a2: #F43F5E;   /* rose       */
            --dm-a1-soft: rgba(54,128,237,.06);
            --dm-a2-soft: rgba(244,63,94,.045);
            --dm-grad: linear-gradient(90deg, var(--dm-a1), var(--dm-a2));
        }
        body.theme-dark .aitshd-mega-panel-deals {
            --dm-a1: #60A4F5;
            --dm-a2: #FB7185;
            --dm-a1-soft: rgba(96,164,245,.10);
            --dm-a2-soft: rgba(251,113,133,.07);
        }

        .aitshd[data-mega-deals-open="1"] .aitshd-mega-panel-deals {
            display: block;
            opacity: 1;
            transform: translate(-50%, 12px);
        }
        .aitshd[data-mega-deals-open="1"] .aitshd-mega-backdrop { opacity: 1; pointer-events: auto; }

        /* Panel shell — blue ambient wash with a rose counter-glow, scroll-
           capped with a branded scrollbar so the dense hub fits short
           laptops/tablets. */
        .aitshd-mega-panel-deals {
            background:
                radial-gradient(120% 90% at 100% 0%, rgba(54,128,237,.05) 0%, transparent 52%),
                radial-gradient(90% 120% at 0% 100%, rgba(244,63,94,.04) 0%, transparent 55%),
                var(--aits-card);
            max-height: calc(100vh - var(--hd-h) - 30px);
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-width: thin; scrollbar-color: var(--aits-blue-line) transparent;
        }
        body.theme-dark .aitshd-mega-panel-deals {
            background:
                radial-gradient(120% 90% at 100% 0%, rgba(96,164,245,.10) 0%, transparent 52%),
                radial-gradient(90% 120% at 0% 100%, rgba(251,113,133,.06) 0%, transparent 55%),
                var(--aits-card);
        }
        .aitshd-mega-panel-deals::-webkit-scrollbar { width: 10px; }
        .aitshd-mega-panel-deals::-webkit-scrollbar-thumb {
            background: var(--aits-blue-line);
            border-radius: 999px;
            border: 3px solid var(--aits-card);
        }
        .aitshd-mega-panel-deals::-webkit-scrollbar-thumb:hover { background: var(--aits-blue-light); }

        /* ── Grid — browse rail + 3 lanes + hero rail. */
        .aitshd-mega-panel-deals .aitshd-mega-wrap {
            grid-template-columns: 258px minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr) 352px;
        }
        @media (max-width: 1320px) {
            .aitshd-mega-panel-deals .aitshd-mega-wrap {
                grid-template-columns: 240px minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr) 318px;
            }
        }
        @media (max-width: 1140px) {
            .aitshd-mega-panel-deals .aitshd-mega-wrap {
                grid-template-columns: 236px minmax(0,1fr) minmax(0,1fr) 300px;
            }
            .aitshd-mega-panel-deals .aitshd-mega-col-deals-popular { display: none; }
        }
        @media (max-width: 900px) {
            .aitshd-mega-panel-deals .aitshd-mega-wrap { grid-template-columns: 1fr; }
            .aitshd-mega-panel-deals .aitshd-mega-featured-col { display: none; }
        }

        /* Fading hairline column dividers */
        .aitshd-mega-panel-deals .aitshd-mega-col + .aitshd-mega-col {
            border-left: 1px solid transparent;
            background-image: linear-gradient(180deg, transparent, var(--aits-line) 12%, var(--aits-line) 88%, transparent);
            background-repeat: no-repeat;
            background-size: 1px 100%;
            background-position: left center;
        }
        .aitshd-mega-panel-deals .aitshd-mega-browse {
            padding: 24px 14px 18px 20px;
            display: flex; flex-direction: column;
            min-width: 0;
        }
        .aitshd-mega-panel-deals .aitshd-mega-col {
            padding: 24px 14px 18px;
            display: flex; flex-direction: column;
            min-width: 0;
        }
        .aitshd-mega-panel-deals .aitshd-mega-featured-col {
            padding: 24px 22px 20px 8px;
            gap: 12px;
        }

        /* Column headers — brand accent bar + tidy label */
        .aitshd-mega-panel-deals .aitshd-mega-colh {
            font-size: 10.5px; font-weight: 800;
            letter-spacing: .16em; text-transform: uppercase;
            color: var(--aits-blue-dark);
            padding: 2px 6px 12px;
            display: flex; align-items: center; gap: 8px;
        }
        body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-colh { color: var(--aits-blue-light); }
        .aitshd-mega-panel-deals .aitshd-mega-colh::before {
            content: '';
            width: 18px; height: 3px; border-radius: 999px;
            background: var(--dm-grad);
            flex: none;
        }

        /* ── Row items — accent bar wipes in, icon lifts with a tone glow,
           titles + descs wrap instead of ellipsizing. */
        .aitshd-mega-panel-deals .aitshd-mega-item,
        .aitshd-mega-panel-deals .aitshd-mega-item.is-lg {
            padding: 9px 8px 9px 14px;
            border-radius: 13px;
            transition: background-color .2s var(--ease,ease), transform .18s var(--ease,ease);
        }
        .aitshd-mega-panel-deals .aitshd-mega-item::before {
            content: '';
            position: absolute;
            left: 4px; top: 50%;
            width: 3px; height: 22px;
            border-radius: 999px;
            background: var(--dm-grad);
            transform: translateY(-50%) scaleY(.2);
            transform-origin: center;
            opacity: 0;
            transition: transform .22s var(--ease,ease), opacity .22s var(--ease,ease);
        }
        .aitshd-mega-panel-deals .aitshd-mega-item:hover {
            background: linear-gradient(90deg, var(--dm-a1-soft), var(--dm-a2-soft));
        }
        .aitshd-mega-panel-deals .aitshd-mega-item:hover::before {
            transform: translateY(-50%) scaleY(1);
            opacity: 1;
        }
        .aitshd-mega-panel-deals .aitshd-mega-item .aitshd-mega-item-icon {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.55);
        }
        body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-item .aitshd-mega-item-icon {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
        }
        .aitshd-mega-panel-deals .aitshd-mega-item:hover .aitshd-mega-item-icon {
            transform: scale(1.07) translateY(-1px);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 22px -8px currentColor;
        }
        body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-item:hover .aitshd-mega-item-icon {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px -8px currentColor;
        }
        /* Titles wrap to 2 lines everywhere in this panel — kills the
           "AI Productivi" clip; the badge label span still shrinks first
           per the universal base rule. */
        .aitshd-mega-panel-deals .aitshd-mega-item-title,
        .aitshd-mega-panel-deals .aitshd-mega-item.is-lg .aitshd-mega-item-title {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            white-space: normal;
            overflow: hidden;
            text-overflow: clip;
            line-height: 1.22;
            font-size: 13.5px;
            font-weight: 700;
            letter-spacing: -0.012em;
            max-height: 2.44em;
        }
        /* Descs (browse rail) wrap to 2 lines — "Browse all 150+ deals" /
           "Recently added deals" read in full. */
        .aitshd-mega-panel-deals .aitshd-mega-item-desc {
            font-size: 11.5px;
            font-weight: 400;
            color: var(--aits-mut);
            line-height: 1.34;
            margin-top: 2px;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-mega-panel-deals .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-dark); }
        body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-light); }
        .aitshd-mega-panel-deals .aitshd-mega-item:hover .aitshd-mega-item-count {
            background: var(--aits-blue-tint);
            color: var(--aits-blue-dark);
            border-color: transparent;
        }
        body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-item:hover .aitshd-mega-item-count {
            color: var(--aits-blue-light);
        }

        /* Category rows — slim chrome so 2-word labels + count pills share
           the row comfortably. */
        .aitshd-mega-panel-deals .aitshd-mega-col .aitshd-mega-item {
            gap: 10px;
        }
        .aitshd-mega-panel-deals .aitshd-mega-col .aitshd-mega-item-icon {
            width: 34px; height: 34px; border-radius: 10px;
        }
        .aitshd-mega-panel-deals .aitshd-mega-item-count {
            padding: 3px 8px;
            font-size: 10.5px;
            font-weight: 800;
        }

        /* ── Discount rows — the pct ladder KEEPS its semantic heat
           gradient (rose = deepest cut → slate = smallest); hover adds a
           scale + deeper glow in the pill's own tone. */
        .aitshd-dm-pct-badge {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 52px; height: 34px;
            padding: 0 8px;
            border-radius: 10px;
            background: linear-gradient(135deg, #F43F5E, #E11D48);
            color: #fff;
            font-weight: 900; font-size: 11.5px;
            letter-spacing: -0.02em;
            flex: none;
            box-shadow: 0 8px 18px -10px rgba(244,63,94,.5), inset 0 0 0 1px rgba(255,255,255,.14);
            transition: transform .2s var(--ease,ease), box-shadow .2s var(--ease,ease);
        }
        .aitshd-mega-item[data-tone="rose"]    .aitshd-dm-pct-badge { background: linear-gradient(135deg, #F43F5E, #E11D48); box-shadow: 0 8px 18px -10px rgba(244,63,94,.5), inset 0 0 0 1px rgba(255,255,255,.14); }
        .aitshd-mega-item[data-tone="amber"]   .aitshd-dm-pct-badge { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 8px 18px -10px rgba(245,158,11,.5), inset 0 0 0 1px rgba(255,255,255,.14); }
        .aitshd-mega-item[data-tone="emerald"] .aitshd-dm-pct-badge { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 8px 18px -10px rgba(16,185,129,.5), inset 0 0 0 1px rgba(255,255,255,.14); }
        .aitshd-mega-item[data-tone="blue"]    .aitshd-dm-pct-badge { background: linear-gradient(135deg, #3680ED, #2060C0); box-shadow: 0 8px 18px -10px rgba(54,128,237,.5), inset 0 0 0 1px rgba(255,255,255,.14); }
        .aitshd-mega-item[data-tone="slate"]   .aitshd-dm-pct-badge { background: linear-gradient(135deg, #64748B, #334155); box-shadow: 0 8px 18px -10px rgba(100,116,139,.45), inset 0 0 0 1px rgba(255,255,255,.14); }
        .aitshd-mega-item:hover .aitshd-dm-pct-badge {
            transform: scale(1.06);
        }
        .aitshd-mega-panel-deals .aitshd-mega-item:has(.aitshd-dm-pct-badge) {
            align-items: center;
        }

        /* View-all — brand pill pinned to each column's bottom. */
        .aitshd-mega-panel-deals .aitshd-mega-view-all-link {
            margin: auto 0 0;
            display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 10px 10px 10px 14px;
            border-radius: 12px;
            font-size: 12.5px; font-weight: 700;
            letter-spacing: -0.005em;
            color: var(--aits-blue-dark);
            border: 1px solid var(--aits-blue-line);
            background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2));
            box-shadow: 0 1px 0 rgba(15,23,42,.03), inset 0 1px 0 rgba(255,255,255,.6);
            transition: background .22s var(--ease,ease), border-color .2s, box-shadow .22s, color .2s, transform .18s;
        }
        body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-view-all-link {
            color: var(--aits-blue-light);
            background: linear-gradient(180deg, var(--aits-surface-3), var(--aits-blue-tint-2));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
        }
        .aitshd-mega-panel-deals .aitshd-mega-view-all-link svg {
            flex: none;
            width: 24px; height: 24px; padding: 5px;
            border-radius: 999px;
            background: var(--aits-blue-tint);
            color: var(--aits-blue);
            transition: background .2s, color .2s, transform .2s;
        }
        .aitshd-mega-panel-deals .aitshd-mega-view-all-link:hover,
        .aitshd-mega-panel-deals .aitshd-mega-view-all-link:focus {
            color: var(--aits-blue-dark);
            border-color: var(--aits-blue);
            background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-blue-tint));
            box-shadow: 0 10px 22px -14px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.7);
            transform: translateY(-1px);
        }
        body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-view-all-link:hover,
        body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-view-all-link:focus {
            color: var(--aits-blue-light);
        }
        .aitshd-mega-panel-deals .aitshd-mega-view-all-link:hover svg {
            background: var(--aits-blue);
            color: #fff;
            transform: translateX(3px);
        }

        /* ═══════ "Have a Deal to Share?" promo (browse-rail tail) ═══════
           Gradient-border card, brand chip + CTA; pinned to the rail's
           bottom so the column never leaves dead space. */
        .aitshd-dm-promo {
            position: relative;
            margin-top: auto;
            padding: 16px;
            border-radius: 18px;
            border: 1px solid transparent;
            background:
                linear-gradient(var(--aits-card), var(--aits-card)) padding-box,
                linear-gradient(135deg, rgba(54,128,237,.55), rgba(244,63,94,.45)) border-box;
            display: flex; flex-direction: column; gap: 10px;
            box-shadow: 0 10px 24px -18px rgba(54,128,237,.4);
            overflow: hidden;
        }
        .aitshd-dm-promo::before {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(140% 100% at 100% 0%, rgba(54,128,237,.09), transparent 55%),
                radial-gradient(140% 100% at 0% 100%, rgba(244,63,94,.06), transparent 55%);
            pointer-events: none;
        }
        .aitshd-dm-promo > * { position: relative; z-index: 1; }
        .aitshd-dm-promo-ico {
            width: 40px; height: 40px; border-radius: 12px;
            background: linear-gradient(135deg, #3680ED, #4F46E5);
            color: #fff;
            display: inline-flex; align-items: center; justify-content: center;
            flex: none;
            box-shadow: 0 8px 18px -8px rgba(54,128,237,.6), inset 0 1px 0 rgba(255,255,255,.35);
            transition: transform .3s var(--ease,ease);
        }
        .aitshd-dm-promo:hover .aitshd-dm-promo-ico { transform: rotate(-6deg) scale(1.05); }
        .aitshd-dm-promo-body {
            display: flex; flex-direction: column; gap: 4px;
            min-width: 0;
        }
        .aitshd-dm-promo-title {
            font-size: 13.5px; font-weight: 800;
            color: var(--aits-ink);
            line-height: 1.3;
            letter-spacing: -0.01em;
        }
        .aitshd-dm-promo-desc {
            font-size: 11.5px; font-weight: 400;
            color: var(--aits-mut);
            line-height: 1.45;
        }
        .aitshd-dm-promo-cta {
            display: inline-flex; align-items: center; justify-content: center; gap: 5px;
            width: 100%;
            padding: 9px 14px;
            border-radius: 10px;
            background: linear-gradient(135deg, #3680ED, #4F46E5);
            color: #fff !important;
            font-size: 12.5px; font-weight: 800;
            letter-spacing: .01em;
            text-decoration: none;
            box-shadow: 0 10px 20px -8px rgba(54,128,237,.6), inset 0 1px 0 rgba(255,255,255,.2);
            transition: transform .2s, box-shadow .2s, background .2s;
        }
        .aitshd-dm-promo-cta:hover {
            background: linear-gradient(135deg, #2060C0, #4338CA);
            transform: translateY(-1px);
            box-shadow: 0 14px 26px -10px rgba(54,128,237,.75), inset 0 1px 0 rgba(255,255,255,.24);
        }
        .aitshd-dm-promo-cta svg { transition: transform .2s; }
        .aitshd-dm-promo-cta:hover svg { transform: translateX(3px); }

        /* ═══════ Popular Deals — pricing cards ═══════
           THE CLIPPING FIX: the always-on 30px arrow left the grid flow
           (it now floats in bottom-right and reveals on hover), the mark
           slimmed 48→40px, names may wrap to 2 lines, and the price row
           wraps so "$89.95/mo $139.95/mo" can never overflow the card. */
        .aitshd-dm-deal {
            position: relative;
            display: grid;
            grid-template-columns: 40px minmax(0,1fr);
            align-items: center;
            gap: 11px;
            padding: 12px;
            border-radius: 16px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            text-decoration: none;
            color: var(--aits-ink);
            transition: border-color .2s, background-color .2s, transform .2s, box-shadow .2s;
            box-shadow: 0 1px 0 rgba(15,23,42,.03);
        }
        .aitshd-dm-deal + .aitshd-dm-deal { margin-top: 6px; }
        .aitshd-dm-deal:hover {
            border-color: var(--aits-blue-line);
            background: linear-gradient(90deg, var(--dm-a1-soft, rgba(54,128,237,.04)), var(--dm-a2-soft, rgba(244,63,94,.03)));
            transform: translateY(-2px);
            box-shadow: 0 14px 24px -18px rgba(54,128,237,.32), 0 2px 4px rgba(15,23,42,.04);
        }
        .aitshd-dm-deal-mark {
            width: 40px; height: 40px; border-radius: 12px;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            display: inline-flex; align-items: center; justify-content: center;
            font-weight: 900; font-size: 14px; letter-spacing: -0.02em;
            flex: none;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5);
            transition: transform .2s, box-shadow .2s;
        }
        body.theme-dark .aitshd-dm-deal-mark { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
        .aitshd-dm-deal:hover .aitshd-dm-deal-mark {
            transform: scale(1.06);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 18px -8px currentColor;
        }
        .aitshd-dm-deal[data-tone="rose"]    .aitshd-dm-deal-mark { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-dm-deal[data-tone="amber"]   .aitshd-dm-deal-mark { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-dm-deal[data-tone="violet"]  .aitshd-dm-deal-mark { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-dm-deal[data-tone="emerald"] .aitshd-dm-deal-mark { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-dm-deal[data-tone="pink"]    .aitshd-dm-deal-mark { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-dm-deal[data-tone="cyan"]    .aitshd-dm-deal-mark { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-dm-deal-body { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
        .aitshd-dm-deal-name {
            font-size: 13.5px; font-weight: 700;
            color: var(--aits-ink);
            line-height: 1.2;
            letter-spacing: -0.01em;
            white-space: normal;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-dm-deal:hover .aitshd-dm-deal-name { color: var(--aits-blue-dark); }
        body.theme-dark .aitshd-dm-deal:hover .aitshd-dm-deal-name { color: var(--aits-blue-light); }
        .aitshd-dm-deal-price-row {
            display: inline-flex; align-items: baseline;
            flex-wrap: wrap;
            gap: 2px 8px;
            font-size: 12.5px; font-weight: 500;
            min-width: 0;
        }
        .aitshd-dm-deal-price {
            color: var(--aits-ink);
            font-weight: 800;
            letter-spacing: -0.01em;
        }
        .aitshd-dm-deal-was {
            color: var(--aits-mut);
            text-decoration: line-through;
            font-weight: 500;
        }
        .aitshd-dm-deal-off {
            display: inline-flex; align-items: center;
            font-size: 10px; font-weight: 800;
            letter-spacing: .08em; text-transform: uppercase;
            padding: 3px 8px;
            border-radius: 999px;
            background: linear-gradient(135deg, #F43F5E, #E11D48);
            color: #fff;
            line-height: 1;
            width: fit-content;
            margin-top: 3px;
            box-shadow: 0 6px 12px -6px rgba(244,63,94,.5);
        }
        /* Arrow floats bottom-right, revealed on hover — no longer steals
           ~40px of every row's width. */
        .aitshd-dm-deal-arrow {
            position: absolute;
            right: 10px; bottom: 10px;
            width: 26px; height: 26px;
            border-radius: 999px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--aits-blue);
            color: #fff;
            opacity: 0;
            transform: translateX(-4px);
            transition: opacity .2s var(--ease,ease), transform .2s var(--ease,ease);
            box-shadow: 0 6px 12px -6px rgba(54,128,237,.5);
            pointer-events: none;
        }
        .aitshd-dm-deal:hover .aitshd-dm-deal-arrow {
            opacity: 1;
            transform: translateX(0);
        }

        /* ═══════ Deal of the Day hero ═══════
           Deep-navy glass (same family as the Resources/Discover heroes)
           with a brand-blue halo + rose commerce glow. The gold pill,
           red countdown pulse and rose OFF pill stay — they carry deal
           semantics against the on-brand canvas. */
        .aitshd-dm-hero {
            position: relative;
            display: block;
            border-radius: 20px;
            padding: 22px;
            color: #fff !important;
            background:
                radial-gradient(120% 90% at 100% 0%, rgba(96,164,245,.40) 0%, transparent 55%),
                radial-gradient(90% 120% at 0% 100%, rgba(244,63,94,.26) 0%, transparent 55%),
                linear-gradient(140deg, #0E1B3A 0%, #122152 52%, #0B1226 100%);
            box-shadow:
                0 24px 48px -22px rgba(15,23,42,.55),
                inset 0 1px 0 rgba(255,255,255,.10),
                inset 0 0 0 1px rgba(255,255,255,.05);
            text-decoration: none !important;
            overflow: hidden;
        }
        .aitshd-dm-hero::before {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
            background-size: 14px 14px;
            opacity: .06;
            pointer-events: none;
        }
        .aitshd-dm-hero::after {
            content: '';
            position: absolute;
            right: -40px; bottom: -30px;
            width: 220px; height: 220px;
            border-radius: 999px;
            background: radial-gradient(circle at 30% 30%, rgba(125,211,252,.36) 0%, rgba(96,164,245,.20) 45%, transparent 72%);
            filter: blur(2px);
            pointer-events: none;
        }
        /* Head WRAPS — on narrow rails the countdown drops below the pill
           instead of clipping to "12h : 45m : 3…". */
        .aitshd-dm-hero-head {
            display: flex; align-items: center; justify-content: space-between;
            gap: 8px;
            position: relative; z-index: 1;
            flex-wrap: wrap;
            min-width: 0;
        }
        .aitshd-dm-hero-pill {
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 9.5px; font-weight: 800;
            letter-spacing: .1em; text-transform: uppercase;
            color: #FCD34D;
            padding: 5px 10px;
            border-radius: 999px;
            border: 1px solid rgba(252,211,77,.35);
            background: linear-gradient(135deg, rgba(252,211,77,.16), rgba(251,146,60,.10));
            backdrop-filter: blur(6px);
            white-space: nowrap;
            flex: 0 0 auto;
        }
        .aitshd-dm-hero-pill svg { color: #FCD34D; flex: none; }
        .aitshd-dm-hero-countdown {
            position: relative;
            display: inline-flex; align-items: center; gap: 6px;
            font-family: var(--font-mono, ui-monospace);
            font-size: 11.5px; font-weight: 700;
            color: rgba(255,255,255,.92);
            padding: 5px 11px 5px 9px;
            border-radius: 999px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.14);
            backdrop-filter: blur(6px);
            white-space: nowrap;
            flex: 0 0 auto;
            letter-spacing: .01em;
        }
        .aitshd-dm-hero-countdown::before {
            content: '';
            width: 6px; height: 6px; border-radius: 999px;
            background: #EF4444;
            box-shadow: 0 0 0 3px rgba(239,68,68,.22);
            animation: aitshdDmPulse 2.2s ease-in-out infinite;
        }
        @keyframes aitshdDmPulse {
            0%, 100% { box-shadow: 0 0 0 3px rgba(239,68,68,.22); }
            50%      { box-shadow: 0 0 0 6px rgba(239,68,68,.05); }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-dm-hero-countdown::before { animation: none; }
        }

        .aitshd-dm-hero-body {
            display: flex; align-items: center; gap: 14px;
            margin-top: 18px;
            position: relative; z-index: 1;
        }
        .aitshd-dm-hero-copy { flex: 1; min-width: 0; }
        .aitshd-dm-hero-brand {
            width: 62px; height: 62px; border-radius: 16px;
            background: linear-gradient(135deg, #34D399, #10B981);
            display: inline-flex; align-items: center; justify-content: center;
            color: #fff;
            font-weight: 900; font-size: 13px;
            letter-spacing: -0.02em;
            box-shadow:
                0 10px 22px -8px rgba(16,185,129,.55),
                inset 0 1px 0 rgba(255,255,255,.28);
            flex: none;
            text-align: center;
            padding: 4px;
            line-height: 1.1;
        }
        .aitshd-dm-hero-title {
            font-size: 20px; font-weight: 800;
            letter-spacing: -0.02em;
            line-height: 1.15;
            color: #fff;
        }
        .aitshd-dm-hero-sub {
            display: block;
            font-size: 12.5px; font-weight: 400;
            color: rgba(255,255,255,.72);
            line-height: 1.45;
            margin-top: 4px;
        }

        /* Benefits list — 2-col check grid */
        .aitshd-dm-hero-benefits {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 14px;
            margin-top: 18px;
            position: relative; z-index: 1;
        }
        .aitshd-dm-hero-benefit {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 12px; font-weight: 500;
            color: rgba(255,255,255,.88);
        }
        .aitshd-dm-hero-benefit svg {
            color: #7DD3FC;
            flex: none;
            padding: 3px;
            width: 20px; height: 20px;
            border-radius: 999px;
            background: rgba(125,211,252,.14);
            box-sizing: border-box;
        }

        /* Pricing row + OFF pill (rose stays — it IS the discount) */
        .aitshd-dm-hero-pricing {
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid rgba(255,255,255,.10);
            position: relative; z-index: 1;
        }
        .aitshd-dm-hero-discount {
            display: inline-flex; align-items: center; justify-content: center;
            padding: 6px 13px;
            border-radius: 999px;
            background: linear-gradient(135deg, #F43F5E, #E11D48);
            color: #fff;
            font-size: 11px; font-weight: 900;
            letter-spacing: .08em; text-transform: uppercase;
            line-height: 1;
            box-shadow: 0 8px 18px -6px rgba(225,29,72,.6), inset 0 1px 0 rgba(255,255,255,.2);
            flex: none;
        }
        .aitshd-dm-hero-price-block {
            display: inline-flex; align-items: baseline; gap: 8px;
            font-family: 'Inter', sans-serif;
        }
        .aitshd-dm-hero-price {
            font-size: 24px; font-weight: 900;
            color: #fff;
            letter-spacing: -0.02em;
            line-height: 1;
        }
        .aitshd-dm-hero-was {
            font-size: 13px; font-weight: 500;
            color: rgba(255,255,255,.55);
            text-decoration: line-through;
        }
        /* Primary CTA — the BRAND gradient, consistent with every other
           mega's primary button. */
        .aitshd-dm-hero-cta {
            display: flex; align-items: center; justify-content: center; gap: 6px;
            margin-top: 16px;
            padding: 12px 18px;
            border-radius: 12px;
            background: linear-gradient(135deg, #3680ED, #4F46E5);
            color: #fff !important;
            font-size: 14px; font-weight: 800;
            letter-spacing: -0.01em;
            text-decoration: none;
            box-shadow:
                0 14px 28px -10px rgba(54,128,237,.62),
                inset 0 1px 0 rgba(255,255,255,.22);
            transition: transform .2s, box-shadow .2s, background .2s, filter .2s;
            position: relative; z-index: 1;
        }
        .aitshd-dm-hero-cta:hover,
        .aitshd-dm-hero:hover .aitshd-dm-hero-cta {
            background: linear-gradient(135deg, #2060C0, #4338CA);
            transform: translateY(-1px);
            filter: saturate(1.05);
            box-shadow:
                0 20px 32px -12px rgba(54,128,237,.78),
                inset 0 1px 0 rgba(255,255,255,.26);
        }
        .aitshd-dm-hero-cta svg { transition: transform .2s; }
        .aitshd-dm-hero-cta:hover svg,
        .aitshd-dm-hero:hover .aitshd-dm-hero-cta svg { transform: translateX(4px); }

        /* ═══════ 2×2 mini card grid ═══════ */
        .aitshd-dm-mini {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .aitshd-dm-mini-card {
            position: relative;
            display: flex; align-items: center; gap: 10px;
            padding: 12px;
            border-radius: 14px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            color: var(--aits-ink);
            text-decoration: none;
            overflow: hidden;
            transition: border-color .2s, transform .2s, box-shadow .2s;
        }
        .aitshd-dm-mini-card::before {
            content: '';
            position: absolute; left: 0; right: 0; top: 0; height: 2px;
            background: linear-gradient(90deg, var(--tint-blue-ink), rgba(54,128,237,.6));
            opacity: .5;
            transition: opacity .2s;
        }
        .aitshd-dm-mini-card[data-tone="amber"]::before   { background: linear-gradient(90deg, var(--tint-amber-ink),   rgba(245,158,11,.6)); }
        .aitshd-dm-mini-card[data-tone="emerald"]::before { background: linear-gradient(90deg, var(--tint-emerald-ink), rgba(16,185,129,.6)); }
        .aitshd-dm-mini-card[data-tone="violet"]::before  { background: linear-gradient(90deg, var(--tint-violet-ink),  rgba(139,92,246,.6)); }
        .aitshd-dm-mini-card[data-tone="rose"]::before    { background: linear-gradient(90deg, var(--tint-rose-ink),    rgba(244,63,94,.6)); }
        .aitshd-dm-mini-card:hover {
            border-color: var(--aits-blue-line);
            transform: translateY(-2px);
            box-shadow: 0 14px 24px -16px rgba(54,128,237,.4);
        }
        .aitshd-dm-mini-card:hover::before { opacity: 1; }
        .aitshd-dm-mini-ico {
            width: 34px; height: 34px; border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5);
            transition: transform .2s, box-shadow .2s;
        }
        body.theme-dark .aitshd-dm-mini-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
        .aitshd-dm-mini-card:hover .aitshd-dm-mini-ico {
            transform: scale(1.06);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 16px -8px currentColor;
        }
        .aitshd-dm-mini-card[data-tone="amber"]   .aitshd-dm-mini-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-dm-mini-card[data-tone="emerald"] .aitshd-dm-mini-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-dm-mini-card[data-tone="violet"]  .aitshd-dm-mini-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-dm-mini-card[data-tone="rose"]    .aitshd-dm-mini-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-dm-mini-body { display: flex; flex-direction: column; min-width: 0; }
        .aitshd-dm-mini-title {
            font-size: 12.5px; font-weight: 800;
            color: var(--aits-ink);
            line-height: 1.2;
            letter-spacing: -0.01em;
        }
        .aitshd-dm-mini-card:hover .aitshd-dm-mini-title { color: var(--aits-blue-dark); }
        body.theme-dark .aitshd-dm-mini-card:hover .aitshd-dm-mini-title { color: var(--aits-blue-light); }
        .aitshd-dm-mini-sub {
            font-size: 11px; font-weight: 500;
            color: var(--aits-mut);
            margin-top: 2px;
        }
        .aitshd-dm-mini-arrow {
            margin-left: auto;
            color: var(--aits-mut);
            flex: none;
            transition: color .2s, transform .2s;
        }
        .aitshd-dm-mini-card:hover .aitshd-dm-mini-arrow { color: var(--aits-blue); transform: translateX(3px); }

        /* ═══════ Deal alerts tile ═══════ */
        .aitshd-dm-alerts {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 14px;
            border-radius: 14px;
            border: 1px solid transparent;
            background:
                linear-gradient(var(--aits-card), var(--aits-card)) padding-box,
                linear-gradient(135deg, rgba(54,128,237,.55), rgba(244,63,94,.40)) border-box;
            text-decoration: none !important;
            transition: transform .2s var(--ease,ease), box-shadow .2s var(--ease,ease);
        }
        .aitshd-dm-alerts:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 24px -16px rgba(54,128,237,.45);
        }
        .aitshd-dm-alerts-ico {
            width: 36px; height: 36px; border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #3680ED, #4F46E5);
            color: #fff;
            flex: none;
            box-shadow: 0 6px 14px -6px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.28);
        }
        .aitshd-dm-alerts-body {
            display: flex; flex-direction: column;
            min-width: 0; flex: 1; gap: 2px;
        }
        .aitshd-dm-alerts-title {
            font-size: 12.5px; font-weight: 800;
            color: var(--aits-ink);
            letter-spacing: -0.01em;
            line-height: 1.2;
        }
        .aitshd-dm-alerts-sub {
            font-size: 10.5px; font-weight: 500;
            color: var(--aits-mut);
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-dm-alerts-cta {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 11.5px; font-weight: 800;
            letter-spacing: .01em;
            color: var(--aits-blue-dark);
            padding: 6px 10px;
            border-radius: 8px;
            background: var(--aits-blue-tint-2);
            border: 1px solid var(--aits-blue-line);
            flex: none;
            white-space: nowrap;
            transition: background-color .2s var(--ease,ease), color .2s var(--ease,ease), border-color .2s var(--ease,ease), transform .2s var(--ease,ease);
        }
        body.theme-dark .aitshd-dm-alerts-cta {
            color: var(--aits-blue-light);
            background: var(--aits-blue-tint-2);
            border-color: var(--aits-blue-line);
        }
        .aitshd-dm-alerts:hover .aitshd-dm-alerts-cta {
            background: linear-gradient(135deg, #3680ED, #4F46E5);
            color: #fff;
            border-color: transparent;
        }
        .aitshd-dm-alerts-cta svg { transition: transform .2s; }
        .aitshd-dm-alerts:hover .aitshd-dm-alerts-cta svg { transform: translateX(2px); }

        /* ═══════ Quick-access chip row ═══════ */
        .aitshd-dm-quick {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 2px;
        }
        .aitshd-dm-quick-chip {
            display: inline-flex; align-items: center; justify-content: center;
            gap: 6px;
            flex: 1 1 auto;
            min-width: 0;
            padding: 7px 10px;
            border-radius: 10px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            color: var(--aits-ink);
            font-size: 11px; font-weight: 700;
            letter-spacing: -0.005em;
            line-height: 1.2;
            text-decoration: none;
            white-space: nowrap;
            transition: border-color .18s var(--ease,ease), transform .18s var(--ease,ease), background-color .18s var(--ease,ease), color .18s var(--ease,ease);
        }
        .aitshd-dm-quick-chip:hover {
            transform: translateY(-1px);
            border-color: var(--aits-blue-line);
            background: var(--aits-blue-tint-2);
            color: var(--aits-blue-dark);
        }
        body.theme-dark .aitshd-dm-quick-chip:hover {
            color: var(--aits-blue-light);
        }
        .aitshd-dm-quick-ico {
            width: 20px; height: 20px; border-radius: 6px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            transition: transform .18s var(--ease,ease);
        }
        .aitshd-dm-quick-chip:hover .aitshd-dm-quick-ico { transform: scale(1.06); }
        .aitshd-dm-quick-chip[data-tone="rose"]    .aitshd-dm-quick-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-dm-quick-chip[data-tone="amber"]   .aitshd-dm-quick-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-dm-quick-chip[data-tone="emerald"] .aitshd-dm-quick-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-dm-quick-chip[data-tone="blue"]    .aitshd-dm-quick-ico { background: var(--tint-blue-bg);    color: var(--tint-blue-ink); }
        .aitshd-dm-quick-chip[data-tone="violet"]  .aitshd-dm-quick-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-dm-quick-label {
            min-width: 0;
        }

        /* ═══════ Assurance rail (trust strip) — 2026-08-02 premium rebuild ═══════
           The old band was flat dividers, and its title + desc were two INLINE
           spans inside an inline body, so every promise rendered as one run-on
           paragraph ("100% Safe Deals All deals are verified and authentic") with
           the desc's margin-top silently a no-op. Each promise is now a glass
           card: block title over a wrapping desc (no clamp anywhere — nothing is
           ever hidden), a tone-tinted medallion with a sheen sweep and a
           tone-matched glow, the shared brand accent-bar wipe on hover, and a
           staggered rise when the panel opens. Losing the hairlines also kills
           the orphan divider that hung in space on a wrapped row. */
        .aitshd-dm-trust {
            position: relative;
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 10px;
            padding: 16px 20px 20px;
            border-top: 1px solid var(--aits-line);
            background:
                radial-gradient(120% 180% at 0% 0%, var(--dm-a1-soft), transparent 58%),
                radial-gradient(120% 180% at 100% 100%, var(--dm-a2-soft), transparent 58%),
                linear-gradient(0deg, var(--aits-surface-2), var(--aits-card));
        }
        /* Brand hairline riding the band's top edge — blue→rose, faded at both ends. */
        .aitshd-dm-trust::before {
            content: '';
            position: absolute; left: 0; right: 0; top: -1px; height: 1px;
            background: linear-gradient(90deg, transparent, var(--dm-a1) 20%, var(--dm-a2) 80%, transparent);
            opacity: .5;
            pointer-events: none;
        }

        .aitshd-dm-trust-item {
            position: relative;
            display: flex; align-items: flex-start; gap: 11px;
            min-width: 0;
            padding: 12px 13px 13px;
            border-radius: 14px;
            border: 1px solid var(--aits-line);
            background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
            overflow: hidden;
            transition: transform .26s var(--ease,ease), border-color .2s var(--ease,ease),
                        box-shadow .26s var(--ease,ease);
        }
        body.theme-dark .aitshd-dm-trust-item {
            background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
        }
        /* Accent bar wipe — the signature shared by every card in this pass. */
        .aitshd-dm-trust-item::after {
            content: '';
            position: absolute; left: 0; right: 0; top: 0; height: 2px;
            background: var(--dm-grad);
            transform: scaleX(0); transform-origin: left center;
            opacity: 0;
            transition: transform .38s var(--ease,ease), opacity .22s var(--ease,ease);
            pointer-events: none;
        }

        .aitshd-dm-trust-ico {
            position: relative;
            width: 40px; height: 40px; border-radius: 13px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            overflow: hidden;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5);
            transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .28s var(--ease,ease);
        }
        .aitshd-dm-trust-ico > svg { position: relative; z-index: 1; }
        body.theme-dark .aitshd-dm-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
        /* Sheen that sweeps the medallion on hover (parked off-frame at rest). */
        .aitshd-dm-trust-ico::after {
            content: '';
            position: absolute; inset: -25%;
            background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%);
            transform: translateX(-130%);
            opacity: 0;
            pointer-events: none;
        }
        body.theme-dark .aitshd-dm-trust-ico::after {
            background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.2) 50%, transparent 62%);
        }
        .aitshd-dm-trust-item[data-tone="emerald"] .aitshd-dm-trust-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-dm-trust-item[data-tone="amber"]   .aitshd-dm-trust-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-dm-trust-item[data-tone="violet"]  .aitshd-dm-trust-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-dm-trust-item[data-tone="rose"]    .aitshd-dm-trust-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-dm-trust-item[data-tone="pink"]    .aitshd-dm-trust-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-dm-trust-item[data-tone="cyan"]    .aitshd-dm-trust-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-dm-trust-item[data-tone="indigo"]  .aitshd-dm-trust-ico { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-dm-trust-item[data-tone="slate"]   .aitshd-dm-trust-ico { background: var(--tint-slate-bg);   color: var(--tint-slate-ink); }

        /* The body was an inline span — the whole reason title and desc ran
           together. It is a column now, so each part owns its own line. */
        .aitshd-dm-trust-body {
            min-width: 0;
            display: flex; flex-direction: column;
            padding-top: 1px;
        }
        .aitshd-dm-trust-title {
            display: block;
            font-size: 13px; font-weight: 800;
            color: var(--aits-ink);
            line-height: 1.25;
            letter-spacing: -0.01em;
            white-space: normal;
            transition: color .18s var(--ease,ease);
        }
        .aitshd-dm-trust-desc {
            display: block;
            font-size: 11.5px; font-weight: 500;
            color: var(--aits-mut);
            line-height: 1.45;
            margin-top: 4px;
            white-space: normal;
            overflow-wrap: break-word;
        }

        @media (hover: hover) {
            .aitshd-dm-trust-item:hover {
                transform: translateY(-3px);
                border-color: var(--aits-blue-line);
                box-shadow: 0 20px 34px -24px rgba(15,23,42,.45), inset 0 1px 0 rgba(255,255,255,.7);
            }
            body.theme-dark .aitshd-dm-trust-item:hover {
                box-shadow: 0 20px 34px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
            }
            .aitshd-dm-trust-item:hover::after { transform: scaleX(1); opacity: 1; }
            .aitshd-dm-trust-item:hover .aitshd-dm-trust-ico {
                transform: translateY(-2px) scale(1.07) rotate(-4deg);
                /* currentColor is the tone ink, so each medallion glows its own hue. */
                box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 12px 20px -12px currentColor;
            }
            body.theme-dark .aitshd-dm-trust-item:hover .aitshd-dm-trust-ico {
                box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 22px -12px currentColor;
            }
            .aitshd-dm-trust-item:hover .aitshd-dm-trust-ico::after {
                opacity: 1;
                transform: translateX(130%);
                transition: transform .7s var(--ease,ease), opacity .2s var(--ease,ease);
            }
            .aitshd-dm-trust-item:hover .aitshd-dm-trust-title { color: var(--aits-blue-dark); }
            body.theme-dark .aitshd-dm-trust-item:hover .aitshd-dm-trust-title { color: var(--aits-blue-light); }
        }

        /* Staggered rise as the panel opens — the band lands last, so the eye
           finishes on the reassurance instead of arriving to a static footer. */
        @keyframes aitshdDmTrustIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: none; }
        }
        .aitshd[data-mega-deals-open="1"] .aitshd-dm-trust-item {
            animation: aitshdDmTrustIn .46s var(--ease,ease) backwards;
        }
        .aitshd[data-mega-deals-open="1"] .aitshd-dm-trust-item:nth-child(1) { animation-delay: .05s; }
        .aitshd[data-mega-deals-open="1"] .aitshd-dm-trust-item:nth-child(2) { animation-delay: .10s; }
        .aitshd[data-mega-deals-open="1"] .aitshd-dm-trust-item:nth-child(3) { animation-delay: .15s; }
        .aitshd[data-mega-deals-open="1"] .aitshd-dm-trust-item:nth-child(4) { animation-delay: .20s; }
        .aitshd[data-mega-deals-open="1"] .aitshd-dm-trust-item:nth-child(5) { animation-delay: .25s; }

        /* Responsive ladder 5 → 3+2 → 2 → 1. The 3+2 step runs on a 6-track
           grid so the trailing pair splits its row evenly instead of hanging
           left; the quantity guards keep that trick to the exact-5 case. */
        @media (max-width: 1280px) {
            .aitshd-dm-trust { grid-template-columns: repeat(6, minmax(0, 1fr)); }
            .aitshd-dm-trust-item { grid-column: span 2; }
            .aitshd-dm-trust-item:nth-child(4):nth-last-child(2),
            .aitshd-dm-trust-item:nth-child(5):nth-last-child(1) { grid-column: span 3; }
        }
        /* 1023 and below the burger has already taken over and this band is
           unreachable — the 2-up and 1-up steps are defensive only, which is
           why 3+2 is allowed to run all the way down to the 1024 mega floor
           (a 992px panel still gives each of the three ~310px). */
        @media (max-width: 1023px) {
            .aitshd-dm-trust {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                padding: 14px 16px 18px;
            }
            .aitshd-dm-trust-item,
            .aitshd-dm-trust-item:nth-child(4):nth-last-child(2),
            .aitshd-dm-trust-item:nth-child(5):nth-last-child(1) { grid-column: auto; }
        }
        @media (max-width: 720px) {
            .aitshd-dm-trust { grid-template-columns: 1fr; }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-dm-trust-item,
            .aitshd-dm-trust-item::after,
            .aitshd-dm-trust-ico,
            .aitshd-dm-trust-ico::after,
            .aitshd-dm-trust-title { transition: none; }
            .aitshd[data-mega-deals-open="1"] .aitshd-dm-trust-item { animation: none; }
            .aitshd-dm-trust-item:hover { transform: none; }
            .aitshd-dm-trust-item:hover .aitshd-dm-trust-ico { transform: none; }
        }

        /* ═══════ Mobile drawer — Deals section ═══════
           On-brand rebuild: navy hero in the shared family, brand CTA,
           blue chip hovers. Red/rose stays only where it means "deal". */
        .aitshd-drawer-deals-hero {
            display: block;
            position: relative;
            margin: 6px 0 14px;
            padding: 16px 16px 18px;
            border-radius: 18px;
            color: #fff !important;
            text-decoration: none !important;
            background:
                radial-gradient(100% 90% at 100% 0%, rgba(96,164,245,.40) 0%, transparent 55%),
                radial-gradient(90% 120% at 0% 100%, rgba(244,63,94,.26) 0%, transparent 55%),
                linear-gradient(140deg, #0E1B3A, #122152 52%, #0B1226);
            box-shadow: 0 18px 34px -20px rgba(15,23,42,.55), inset 0 1px 0 rgba(255,255,255,.10);
            overflow: hidden;
        }
        .aitshd-drawer-deals-hero::before {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(rgba(255,255,255,.20) 1px, transparent 1px);
            background-size: 12px 12px;
            opacity: .06; pointer-events: none;
        }
        .aitshd-drawer-deals-hero-head {
            display: flex; align-items: center; justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            position: relative; z-index: 1;
        }
        .aitshd-drawer-deals-hero-pill {
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 9.5px; font-weight: 800;
            letter-spacing: .14em; text-transform: uppercase;
            color: #FCD34D;
            padding: 5px 9px;
            border-radius: 999px;
            border: 1px solid rgba(252,211,77,.35);
            background: rgba(252,211,77,.10);
        }
        .aitshd-drawer-deals-hero-pill svg { color: #FCD34D; }
        .aitshd-drawer-deals-hero-count {
            display: inline-flex; align-items: center; gap: 6px;
            font-family: var(--font-mono, ui-monospace);
            font-size: 11px; font-weight: 700;
            color: rgba(255,255,255,.9);
            padding: 4px 9px;
            border-radius: 999px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.14);
        }
        .aitshd-drawer-deals-hero-count::before {
            content: '';
            width: 5px; height: 5px; border-radius: 999px;
            background: #EF4444;
            box-shadow: 0 0 0 2.5px rgba(239,68,68,.20);
            animation: aitshdDmPulse 2.2s ease-in-out infinite;
        }
        .aitshd-drawer-deals-hero-title {
            display: block; position: relative; z-index: 1;
            margin-top: 12px;
            font-size: 16px; font-weight: 800; letter-spacing: -0.015em;
            color: #fff;
        }
        .aitshd-drawer-deals-hero-sub {
            display: block; position: relative; z-index: 1;
            margin-top: 4px;
            font-size: 12.5px; font-weight: 500;
            color: rgba(255,255,255,.75);
            line-height: 1.45;
        }
        .aitshd-drawer-deals-hero-price {
            display: inline-flex; align-items: baseline; gap: 8px;
            margin-top: 10px;
            position: relative; z-index: 1;
        }
        .aitshd-drawer-deals-hero-price .amt {
            font-size: 20px; font-weight: 900;
            color: #fff; letter-spacing: -0.02em; line-height: 1;
        }
        .aitshd-drawer-deals-hero-price .was {
            font-size: 12px; font-weight: 500;
            color: rgba(255,255,255,.55);
            text-decoration: line-through;
        }
        .aitshd-drawer-deals-hero-price .off {
            display: inline-flex; align-items: center;
            font-size: 9.5px; font-weight: 900;
            letter-spacing: .08em; text-transform: uppercase;
            padding: 3px 8px;
            border-radius: 999px;
            background: linear-gradient(135deg, #F43F5E, #E11D48);
            color: #fff;
            line-height: 1;
            box-shadow: 0 6px 12px -6px rgba(244,63,94,.5);
        }
        .aitshd-drawer-deals-hero-cta {
            display: inline-flex; align-items: center; gap: 6px;
            margin-top: 14px;
            padding: 9px 16px;
            border-radius: 10px;
            background: linear-gradient(135deg, #3680ED, #4F46E5);
            color: #fff !important;
            font-size: 12.5px; font-weight: 800;
            box-shadow: 0 10px 22px -10px rgba(54,128,237,.7), inset 0 1px 0 rgba(255,255,255,.20);
            position: relative; z-index: 1;
            transition: transform .18s var(--ease,ease), filter .18s var(--ease,ease);
        }
        .aitshd-drawer-deals-hero-cta:active {
            transform: scale(.97);
            filter: saturate(1.05);
        }
        .aitshd-drawer-deals-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin: 8px 0 4px;
        }
        .aitshd-drawer-deals-chip {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            color: var(--aits-ink);
            text-decoration: none;
            font-size: 12.5px; font-weight: 600;
            min-width: 0;
            transition: border-color .18s, background-color .18s, transform .18s;
        }
        .aitshd-drawer-deals-chip:hover,
        .aitshd-drawer-deals-chip:active {
            border-color: var(--aits-blue-line);
            background: var(--aits-blue-tint-2);
            transform: translateY(-1px);
        }
        .aitshd-drawer-deals-chip-ico {
            width: 32px; height: 32px; border-radius: 9px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
        }
        .aitshd-drawer-deals-chip[data-tone="rose"]    .aitshd-drawer-deals-chip-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-drawer-deals-chip[data-tone="amber"]   .aitshd-drawer-deals-chip-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-drawer-deals-chip[data-tone="emerald"] .aitshd-drawer-deals-chip-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-drawer-deals-chip[data-tone="violet"]  .aitshd-drawer-deals-chip-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-drawer-deals-chip[data-tone="pink"]    .aitshd-drawer-deals-chip-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-drawer-deals-chip[data-tone="cyan"]    .aitshd-drawer-deals-chip-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-drawer-deals-chip-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
        /* Chip titles wrap to 2 lines — same fix as the Discover chips. */
        .aitshd-drawer-deals-chip-title {
            font-size: 13px; font-weight: 700; color: var(--aits-ink);
            white-space: normal; line-height: 1.2;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-drawer-deals-chip-count {
            font-size: 10.5px; font-weight: 700;
            color: var(--aits-blue-dark);
            margin-top: 2px;
            letter-spacing: .02em;
        }
        body.theme-dark .aitshd-drawer-deals-chip-count { color: var(--aits-blue-light); }
        .aitshd-drawer-deals-chip[data-tone="amber"]   .aitshd-drawer-deals-chip-count { color: var(--tint-amber-ink); }
        .aitshd-drawer-deals-chip[data-tone="emerald"] .aitshd-drawer-deals-chip-count { color: var(--tint-emerald-ink); }
        .aitshd-drawer-deals-chip[data-tone="violet"]  .aitshd-drawer-deals-chip-count { color: var(--tint-violet-ink); }
        .aitshd-drawer-deals-chip[data-tone="rose"]    .aitshd-drawer-deals-chip-count { color: var(--tint-rose-ink); }

        /* ── Drawer assurance rail — the mega's trust band restacked for touch.
           The mega is desktop-only (burger takes over under 1024px), so without
           this the whole mobile + tablet funnel lost the reassurance. Stays
           1-up at every width on purpose: the drawer sheet caps at 390px from
           430px viewport upward, so a viewport-driven 2-up would hand each card
           ~170px and wrap "Your payment information is always protected" over
           three lines on a tablet. The accent bar and lift fire on :active so
           touch gets the feedback hover gives on desktop. The --dm-* tokens
           live on the mega panel, so the gradient is spelled out here exactly
           like the drawer hero's brand CTA above. */
        .aitshd-drawer-deals-trust {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            margin: 8px 0 4px;
        }
        .aitshd-drawer-deals-trust-item {
            position: relative;
            display: flex; align-items: flex-start; gap: 10px;
            min-width: 0;
            padding: 10px 12px 11px;
            border-radius: 12px;
            border: 1px solid var(--aits-line);
            background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2));
            overflow: hidden;
            transition: border-color .18s var(--ease,ease), transform .18s var(--ease,ease);
        }
        body.theme-dark .aitshd-drawer-deals-trust-item {
            background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
        }
        .aitshd-drawer-deals-trust-item::after {
            content: '';
            position: absolute; left: 0; right: 0; top: 0; height: 2px;
            background: linear-gradient(90deg, #3680ED, #F43F5E);
            transform: scaleX(0); transform-origin: left center;
            transition: transform .3s var(--ease,ease);
            pointer-events: none;
        }
        body.theme-dark .aitshd-drawer-deals-trust-item::after {
            background: linear-gradient(90deg, #60A4F5, #FB7185);
        }
        .aitshd-drawer-deals-trust-item:active,
        .aitshd-drawer-deals-trust-item:hover {
            border-color: var(--aits-blue-line);
            transform: translateY(-1px);
        }
        .aitshd-drawer-deals-trust-item:active::after,
        .aitshd-drawer-deals-trust-item:hover::after { transform: scaleX(1); }
        .aitshd-drawer-deals-trust-ico {
            width: 30px; height: 30px; border-radius: 9px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
            transition: transform .24s cubic-bezier(.34,1.56,.64,1);
        }
        body.theme-dark .aitshd-drawer-deals-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
        .aitshd-drawer-deals-trust-item:active .aitshd-drawer-deals-trust-ico,
        .aitshd-drawer-deals-trust-item:hover .aitshd-drawer-deals-trust-ico { transform: scale(1.08); }
        .aitshd-drawer-deals-trust-item[data-tone="emerald"] .aitshd-drawer-deals-trust-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-drawer-deals-trust-item[data-tone="amber"]   .aitshd-drawer-deals-trust-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-drawer-deals-trust-item[data-tone="violet"]  .aitshd-drawer-deals-trust-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-drawer-deals-trust-item[data-tone="rose"]    .aitshd-drawer-deals-trust-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-drawer-deals-trust-item[data-tone="pink"]    .aitshd-drawer-deals-trust-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-drawer-deals-trust-item[data-tone="cyan"]    .aitshd-drawer-deals-trust-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-drawer-deals-trust-item[data-tone="indigo"]  .aitshd-drawer-deals-trust-ico { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-drawer-deals-trust-item[data-tone="slate"]   .aitshd-drawer-deals-trust-ico { background: var(--tint-slate-bg);   color: var(--tint-slate-ink); }
        .aitshd-drawer-deals-trust-copy { min-width: 0; display: flex; flex-direction: column; }
        .aitshd-drawer-deals-trust-title {
            display: block;
            font-size: 12.5px; font-weight: 800;
            color: var(--aits-ink);
            line-height: 1.25; letter-spacing: -0.01em;
            white-space: normal;
        }
        .aitshd-drawer-deals-trust-desc {
            display: block;
            font-size: 11px; font-weight: 500;
            color: var(--aits-mut);
            line-height: 1.4;
            margin-top: 3px;
            white-space: normal;
            overflow-wrap: break-word;
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-drawer-deals-trust-item,
            .aitshd-drawer-deals-trust-item::after,
            .aitshd-drawer-deals-trust-ico { transition: none; }
            .aitshd-drawer-deals-trust-item:active,
            .aitshd-drawer-deals-trust-item:hover { transform: none; }
        }

        /* ══════════════════════════════════════════════════════════════════
           DISCOVER MEGA — premium exploration hub (2026-07-31 redesign)
           Explore Directory rail + promo / Compare & Alternatives / Curated
           Collections / Community & Insights + Trending-Collection hero and
           the VS compare card, then Trending Searches + trust footer.

           Identity: BRAND-BLUE led (#3680ED → cyan #06B6D4) — blue-first so
           Discover reads unmistakably AIToolsay, with a cyan tail for the
           "exploration" register. Sibling of the Resources blue→indigo pass.

           Fixes shipped here (live bugs in the screenshot):
             · descriptions no longer clip at one line ("Side-by-side tool…",
               "Curated GPT…", "Use without…") — clamp is now 2 lines.
             · NEW badges no longer wrap onto their own line — moved out of
               the wrapping title to the row's right edge (markup change).
             · view-all links pin to the column bottoms, killing the dead
               space under short columns (Curated Collections).
           All rules scoped under .aitshd-mega-panel-discover (or the
           .aitshd-dc-* / .aitshd-drawer-disc-* namespaces) so nothing leaks
           into the six sibling megas.
           ══════════════════════════════════════════════════════════════════ */

        /* Panel-local accent tokens — retune the whole identity here.
           Light: brand blue → cyan. Dark: lifted twins so accents glow. */
        .aitshd-mega-panel-discover {
            --dc-a1: #3680ED;   /* brand blue */
            --dc-a2: #06B6D4;   /* cyan       */
            --dc-a1-soft: rgba(54,128,237,.06);
            --dc-a2-soft: rgba(6,182,212,.05);
            --dc-grad: linear-gradient(90deg, var(--dc-a1), var(--dc-a2));
        }
        body.theme-dark .aitshd-mega-panel-discover {
            --dc-a1: #60A4F5;
            --dc-a2: #22D3EE;
            --dc-a1-soft: rgba(96,164,245,.10);
            --dc-a2-soft: rgba(34,211,238,.08);
        }

        .aitshd[data-mega-discover-open="1"] .aitshd-mega-panel-discover {
            display: block;
            opacity: 1;
            transform: translate(-50%, 12px);
        }
        .aitshd[data-mega-discover-open="1"] .aitshd-mega-backdrop { opacity: 1; pointer-events: auto; }

        /* Panel shell — brand-blue ambient wash toward the featured rail,
           scroll-capped with a slim branded scrollbar so the dense hub can
           never run off a short laptop/tablet. */
        .aitshd-mega-panel-discover {
            background:
                radial-gradient(120% 90% at 100% 0%, rgba(54,128,237,.05) 0%, transparent 52%),
                radial-gradient(90% 120% at 0% 100%, rgba(6,182,212,.045) 0%, transparent 55%),
                var(--aits-card);
            max-height: calc(100vh - var(--hd-h) - 30px);
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-width: thin; scrollbar-color: var(--aits-blue-line) transparent;
        }
        body.theme-dark .aitshd-mega-panel-discover {
            background:
                radial-gradient(120% 90% at 100% 0%, rgba(96,164,245,.10) 0%, transparent 52%),
                radial-gradient(90% 120% at 0% 100%, rgba(34,211,238,.07) 0%, transparent 55%),
                var(--aits-card);
        }
        .aitshd-mega-panel-discover::-webkit-scrollbar { width: 10px; }
        .aitshd-mega-panel-discover::-webkit-scrollbar-thumb {
            background: var(--aits-blue-line);
            border-radius: 999px;
            border: 3px solid var(--aits-card);
        }
        .aitshd-mega-panel-discover::-webkit-scrollbar-thumb:hover { background: var(--aits-blue-light); }

        /* ── Grid — explore rail + 3 lanes + featured rail. Browse rail is
           wide enough that "AI Models Directory" + a NEW badge fit. */
        .aitshd-mega-panel-discover .aitshd-mega-wrap {
            grid-template-columns: 268px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 316px;
        }
        @media (max-width: 1320px) {
            .aitshd-mega-panel-discover .aitshd-mega-wrap {
                grid-template-columns: 248px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 298px;
            }
        }
        @media (max-width: 1140px) {
            .aitshd-mega-panel-discover .aitshd-mega-wrap {
                grid-template-columns: 236px minmax(0,1fr) minmax(0,1fr) 292px;
            }
            .aitshd-mega-panel-discover .aitshd-mega-col-usecase { display: none; }
        }
        @media (max-width: 900px) {
            .aitshd-mega-panel-discover .aitshd-mega-wrap { grid-template-columns: 1fr; }
            .aitshd-mega-panel-discover .aitshd-mega-featured-col { display: none; }
        }

        /* Fading hairline column dividers */
        .aitshd-mega-panel-discover .aitshd-mega-col + .aitshd-mega-col {
            border-left: 1px solid transparent;
            background-image: linear-gradient(180deg, transparent, var(--aits-line) 12%, var(--aits-line) 88%, transparent);
            background-repeat: no-repeat;
            background-size: 1px 100%;
            background-position: left center;
        }
        .aitshd-mega-panel-discover .aitshd-mega-browse {
            padding: 24px 12px 18px 18px;
            display: flex; flex-direction: column;
            min-width: 0;
        }
        .aitshd-mega-panel-discover .aitshd-mega-col {
            padding: 24px 14px 18px;
            display: flex; flex-direction: column;
            min-width: 0;
        }
        .aitshd-mega-panel-discover .aitshd-mega-featured-col {
            padding: 24px 22px 20px 8px;
            gap: 14px;
        }

        /* Column headers — brand accent bar + tidy label */
        .aitshd-mega-panel-discover .aitshd-mega-colh {
            font-size: 10.5px; font-weight: 800;
            letter-spacing: .16em; text-transform: uppercase;
            color: var(--aits-blue-dark);
            padding: 2px 6px 12px;
            display: flex; align-items: center; gap: 8px;
        }
        body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-colh { color: var(--aits-blue-light); }
        .aitshd-mega-panel-discover .aitshd-mega-colh::before {
            content: '';
            width: 18px; height: 3px; border-radius: 999px;
            background: var(--dc-grad);
            flex: none;
        }

        /* ── Row items — accent bar wipes in, icon lifts with a tone glow,
           title wraps to 2 lines, desc clamps at 2 (was 1 — the clip). */
        .aitshd-mega-panel-discover .aitshd-mega-item,
        .aitshd-mega-panel-discover .aitshd-mega-item.is-lg {
            padding: 9px 8px 9px 14px;
            gap: 10px;
            border-radius: 13px;
            align-items: center;
            transition: background-color .2s var(--ease,ease), transform .18s var(--ease,ease);
        }
        .aitshd-mega-panel-discover .aitshd-mega-item::before {
            content: '';
            position: absolute;
            left: 4px; top: 50%;
            width: 3px; height: 22px;
            border-radius: 999px;
            background: var(--dc-grad);
            transform: translateY(-50%) scaleY(.2);
            transform-origin: center;
            opacity: 0;
            transition: transform .22s var(--ease,ease), opacity .22s var(--ease,ease);
        }
        .aitshd-mega-panel-discover .aitshd-mega-item:hover {
            background: linear-gradient(90deg, var(--dc-a1-soft), var(--dc-a2-soft));
        }
        .aitshd-mega-panel-discover .aitshd-mega-item:hover::before {
            transform: translateY(-50%) scaleY(1);
            opacity: 1;
        }
        .aitshd-mega-panel-discover .aitshd-mega-item .aitshd-mega-item-icon,
        .aitshd-mega-panel-discover .aitshd-mega-item.is-lg .aitshd-mega-item-icon {
            width: 38px; height: 38px; border-radius: 11px;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.55);
        }
        body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-item .aitshd-mega-item-icon,
        body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-item.is-lg .aitshd-mega-item-icon {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
        }
        .aitshd-mega-panel-discover .aitshd-mega-item-icon svg { width: 18px; height: 18px; }
        .aitshd-mega-panel-discover .aitshd-mega-item:hover .aitshd-mega-item-icon {
            transform: scale(1.07) translateY(-1px);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 22px -8px currentColor;
        }
        body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-item:hover .aitshd-mega-item-icon {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px -8px currentColor;
        }
        /* Title — wraps to 2 lines (badges now live OUTSIDE at the right
           edge, so the wrap can never strand a pill on its own line). */
        .aitshd-mega-panel-discover .aitshd-mega-item-title,
        .aitshd-mega-panel-discover .aitshd-mega-item.is-lg .aitshd-mega-item-title {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            white-space: normal;
            overflow: hidden;
            text-overflow: clip;
            line-height: 1.22;
            font-size: 13.5px;
            font-weight: 700;
            letter-spacing: -0.01em;
            max-height: 2.44em;
        }
        /* Desc — TWO-line clamp (was 1: that clipped "Side-by-side tool
           comparison", "Curated GPT shortlists", "Use without registration"). */
        .aitshd-mega-panel-discover .aitshd-mega-item-desc {
            font-size: 11.5px;
            font-weight: 400;
            color: var(--aits-mut);
            line-height: 1.34;
            margin-top: 2px;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        /* Right-edge badge — compact so it never crowds the arrow */
        .aitshd-mega-panel-discover .aitshd-mega-badge-inline {
            flex: none;
            font-size: 9px;
            padding: 3px 6px;
            letter-spacing: .05em;
        }
        /* When a row carries a badge, the badge IS the right-edge
           affordance — hide the chevron so the body keeps the ~24px it
           needs and "AI extensions for your browser" / "Recent product
           launches" fit their 2-line clamp instead of ellipsizing. */
        .aitshd-mega-panel-discover .aitshd-mega-badge-inline + .aitshd-mega-item-arrow { display: none; }
        .aitshd-mega-panel-discover .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-dark); }
        body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-light); }
        .aitshd-mega-panel-discover .aitshd-mega-item:hover .aitshd-mega-item-arrow { color: var(--aits-blue); }

        /* View-all — brand pill pinned to the column bottom, arrow-in-disc
           slides on hover. Kills the dead space under short columns. */
        .aitshd-mega-panel-discover .aitshd-mega-view-all-link {
            margin: auto 0 0;
            display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 10px 10px 10px 14px;
            border-radius: 12px;
            font-size: 12.5px; font-weight: 700;
            letter-spacing: -0.005em;
            color: var(--aits-blue-dark);
            border: 1px solid var(--aits-blue-line);
            background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2));
            box-shadow: 0 1px 0 rgba(15,23,42,.03), inset 0 1px 0 rgba(255,255,255,.6);
            transition: background .22s var(--ease,ease), border-color .2s, box-shadow .22s, color .2s, transform .18s;
        }
        body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-view-all-link {
            color: var(--aits-blue-light);
            background: linear-gradient(180deg, var(--aits-surface-3), var(--aits-blue-tint-2));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
        }
        .aitshd-mega-panel-discover .aitshd-mega-view-all-link svg {
            flex: none;
            width: 24px; height: 24px; padding: 5px;
            border-radius: 999px;
            background: var(--aits-blue-tint);
            color: var(--aits-blue);
            transition: background .2s, color .2s, transform .2s;
        }
        .aitshd-mega-panel-discover .aitshd-mega-view-all-link:hover,
        .aitshd-mega-panel-discover .aitshd-mega-view-all-link:focus {
            color: var(--aits-blue-dark);
            border-color: var(--aits-blue);
            background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-blue-tint));
            box-shadow: 0 10px 22px -14px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.7);
            transform: translateY(-1px);
        }
        body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-view-all-link:hover,
        body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-view-all-link:focus {
            color: var(--aits-blue-light);
        }
        .aitshd-mega-panel-discover .aitshd-mega-view-all-link:hover svg {
            background: var(--aits-blue);
            color: #fff;
            transform: translateX(3px);
        }

        /* ═══════ "List Your AI Tool" promo tile (browse-rail tail) ═══════
           Gradient-border CTA card in brand blue→cyan; rocket chip nudges
           up-right on hover like it's about to launch. */
        .aitshd-dc-promo {
            position: relative;
            margin-top: auto;
            padding: 16px 16px 14px;
            border-radius: 18px;
            border: 1px solid transparent;
            background:
                linear-gradient(var(--aits-card), var(--aits-card)) padding-box,
                linear-gradient(135deg, rgba(54,128,237,.55), rgba(6,182,212,.45)) border-box;
            overflow: hidden;
            box-shadow: 0 10px 24px -18px rgba(54,128,237,.4);
        }
        .aitshd-dc-promo::before {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(140% 100% at 100% 0%, rgba(54,128,237,.10), transparent 55%),
                radial-gradient(140% 100% at 0% 100%, rgba(6,182,212,.07), transparent 55%);
            pointer-events: none;
        }
        .aitshd-dc-promo::after {
            content: '';
            position: absolute;
            right: -20px; top: -20px;
            width: 90px; height: 90px;
            background: radial-gradient(circle at 30% 30%, rgba(96,164,245,.30) 0%, transparent 65%);
            border-radius: 999px;
            pointer-events: none;
        }
        .aitshd-dc-promo > * { position: relative; z-index: 1; }
        .aitshd-dc-promo-body { position: relative; z-index: 1; }
        .aitshd-dc-promo-title {
            font-size: 13.5px; font-weight: 800;
            color: var(--aits-ink);
            line-height: 1.25;
            letter-spacing: -0.01em;
        }
        .aitshd-dc-promo-desc {
            font-size: 11.5px; font-weight: 500;
            color: var(--aits-mut);
            line-height: 1.4;
            margin-top: 4px;
            max-width: 72%;
        }
        .aitshd-dc-promo-cta {
            display: inline-flex; align-items: center; gap: 6px;
            margin-top: 12px;
            padding: 9px 16px;
            border-radius: 999px;
            background: linear-gradient(135deg, #3680ED, #06B6D4);
            color: #fff !important;
            font-size: 12.5px; font-weight: 800;
            letter-spacing: -0.005em;
            text-decoration: none;
            box-shadow:
                0 12px 22px -8px rgba(54,128,237,.6),
                inset 0 1px 0 rgba(255,255,255,.22);
            transition: transform .2s, box-shadow .2s, background .2s, filter .2s;
            position: relative; z-index: 1;
        }
        .aitshd-dc-promo-cta:hover {
            background: linear-gradient(135deg, #2060C0, #0891B2);
            transform: translateY(-1px);
            filter: saturate(1.05);
            box-shadow:
                0 16px 28px -10px rgba(54,128,237,.75),
                inset 0 1px 0 rgba(255,255,255,.26);
        }
        .aitshd-dc-promo-cta svg { transition: transform .2s; }
        .aitshd-dc-promo-cta:hover svg { transform: translateX(3px); }
        .aitshd-dc-promo-rocket {
            position: absolute;
            right: 12px; top: 12px;
            width: 44px; height: 44px;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 12px;
            background: linear-gradient(135deg, #3680ED, #06B6D4);
            color: #fff;
            box-shadow:
                0 10px 20px -8px rgba(54,128,237,.55),
                inset 0 1px 0 rgba(255,255,255,.28);
            z-index: 2;
            transition: transform .3s var(--ease,ease);
        }
        .aitshd-dc-promo:hover .aitshd-dc-promo-rocket {
            transform: translate(2px, -2px) rotate(-8deg);
        }

        /* ═══════ Trending Collection hero ═══════
           Deep-navy glass with brand blue + cyan aurora halos, dot-grid
           texture, and a brand-gradient CTA — sibling of the Resources
           newsletter hero so the featured rails read as one family. */
        .aitshd-dc-hero {
            position: relative;
            display: block;
            border-radius: 20px;
            padding: 22px;
            color: #fff !important;
            background:
                radial-gradient(120% 90% at 100% 0%, rgba(96,164,245,.42) 0%, transparent 55%),
                radial-gradient(90% 120% at 0% 100%, rgba(34,211,238,.34) 0%, transparent 55%),
                linear-gradient(140deg, #0E1B3A 0%, #122152 52%, #0B1226 100%);
            box-shadow:
                0 24px 48px -22px rgba(15,23,42,.55),
                inset 0 1px 0 rgba(255,255,255,.10),
                inset 0 0 0 1px rgba(255,255,255,.05);
            text-decoration: none !important;
            min-height: 250px;
            overflow: hidden;
        }
        .aitshd-dc-hero::before {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
            background-size: 14px 14px;
            opacity: .06;
            pointer-events: none;
        }
        .aitshd-dc-hero::after {
            content: '';
            position: absolute;
            right: -40px; bottom: -30px;
            width: 240px; height: 240px;
            border-radius: 999px;
            background: radial-gradient(circle at 30% 30%, rgba(125,211,252,.42) 0%, rgba(96,164,245,.22) 45%, transparent 72%);
            filter: blur(2px);
            pointer-events: none;
        }
        .aitshd-dc-hero-head {
            display: flex; align-items: center; justify-content: space-between;
            gap: 8px;
            position: relative; z-index: 1;
        }
        .aitshd-dc-hero-pill {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 10px; font-weight: 800;
            letter-spacing: .16em; text-transform: uppercase;
            color: #BFE0FF;
            padding: 6px 11px;
            border-radius: 999px;
            border: 1px solid rgba(147,190,255,.32);
            background: linear-gradient(135deg, rgba(147,190,255,.18), rgba(34,211,238,.10));
            backdrop-filter: blur(6px);
        }
        .aitshd-dc-hero-pill svg { color: #FCD34D; }
        .aitshd-dc-hero-flame {
            width: 32px; height: 32px;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(252,211,77,.22), rgba(251,146,60,.18));
            border: 1px solid rgba(252,211,77,.30);
            color: #FCD34D;
        }
        .aitshd-dc-hero-title {
            display: block;
            font-size: 22px; font-weight: 900;
            letter-spacing: -0.02em;
            line-height: 1.15;
            margin: 20px 0 8px;
            color: #fff;
            position: relative; z-index: 1;
        }
        .aitshd-dc-hero-sub {
            display: block;
            font-size: 13px; font-weight: 500;
            color: rgba(255,255,255,.80);
            line-height: 1.5;
            position: relative; z-index: 1;
        }
        .aitshd-dc-hero-cta {
            display: inline-flex; align-items: center; gap: 6px;
            margin-top: 18px;
            padding: 12px 20px;
            border-radius: 12px;
            background: linear-gradient(135deg, #3680ED, #06B6D4);
            color: #fff !important;
            font-size: 13.5px; font-weight: 800;
            letter-spacing: -0.01em;
            text-decoration: none;
            box-shadow:
                0 14px 28px -10px rgba(54,128,237,.62),
                inset 0 1px 0 rgba(255,255,255,.22);
            position: relative; z-index: 1;
            transition: transform .2s, box-shadow .2s, background .2s, filter .2s;
        }
        .aitshd-dc-hero-cta:hover,
        .aitshd-dc-hero:hover .aitshd-dc-hero-cta {
            background: linear-gradient(135deg, #2060C0, #0891B2);
            transform: translateY(-1px);
            filter: saturate(1.05);
            box-shadow:
                0 20px 32px -12px rgba(54,128,237,.78),
                inset 0 1px 0 rgba(255,255,255,.26);
        }
        .aitshd-dc-hero-cta svg { transition: transform .2s; }
        .aitshd-dc-hero-cta:hover svg,
        .aitshd-dc-hero:hover .aitshd-dc-hero-cta svg { transform: translateX(4px); }

        /* ═══════ Popular Comparison card — dual avatar + VS ═══════
           Gradient border warms to brand on hover; the avatars pull apart
           and the rose VS pill pops — the head-to-head lands physically. */
        .aitshd-dc-compare {
            position: relative;
            display: block;
            padding: 18px 18px 16px;
            border-radius: 18px;
            border: 1px solid transparent;
            background:
                linear-gradient(var(--aits-card), var(--aits-card)) padding-box,
                linear-gradient(135deg, var(--aits-line), var(--aits-line)) border-box;
            text-decoration: none;
            color: var(--aits-ink);
            transition: border-color .2s, box-shadow .2s, transform .2s, background .2s;
            text-align: center;
            overflow: hidden;
        }
        .aitshd-dc-compare::before {
            content: '';
            position: absolute; inset: 0;
            background: radial-gradient(120% 80% at 50% 100%, rgba(54,128,237,.06), transparent 55%);
            pointer-events: none;
        }
        .aitshd-dc-compare > * { position: relative; z-index: 1; }
        .aitshd-dc-compare:hover {
            transform: translateY(-2px);
            background:
                linear-gradient(var(--aits-card), var(--aits-card)) padding-box,
                linear-gradient(135deg, rgba(54,128,237,.55), rgba(6,182,212,.45)) border-box;
            box-shadow: 0 18px 32px -18px rgba(54,128,237,.4);
        }
        .aitshd-dc-compare-label {
            font-size: 10px; font-weight: 800;
            letter-spacing: .16em; text-transform: uppercase;
            color: var(--aits-blue-dark);
            text-align: left;
            margin-bottom: 14px;
            display: flex; align-items: center; gap: 8px;
        }
        body.theme-dark .aitshd-dc-compare-label { color: var(--aits-blue-light); }
        .aitshd-dc-compare-label::before {
            content: '';
            width: 14px; height: 3px; border-radius: 999px;
            background: linear-gradient(90deg, #3680ED, #06B6D4);
            flex: none;
        }
        .aitshd-dc-compare-versus {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            margin-bottom: 14px;
            position: relative;
        }
        .aitshd-dc-compare-avatar {
            width: 58px; height: 58px; border-radius: 999px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            font-weight: 900; font-size: 22px; letter-spacing: -0.02em;
            box-shadow:
                0 8px 18px -8px rgba(15,23,42,.20),
                inset 0 0 0 1px rgba(255,255,255,.35);
            transition: transform .2s, box-shadow .2s;
        }
        body.theme-dark .aitshd-dc-compare-avatar {
            box-shadow:
                0 8px 18px -8px rgba(0,0,0,.6),
                inset 0 0 0 1px rgba(255,255,255,.06);
        }
        .aitshd-dc-compare:hover .aitshd-dc-compare-avatar:first-of-type {
            transform: translateX(-3px) scale(1.04);
            box-shadow: 0 10px 22px -8px currentColor, inset 0 0 0 1px rgba(255,255,255,.4);
        }
        .aitshd-dc-compare:hover .aitshd-dc-compare-avatar:last-of-type {
            transform: translateX(3px) scale(1.04);
            box-shadow: 0 10px 22px -8px currentColor, inset 0 0 0 1px rgba(255,255,255,.4);
        }
        .aitshd-dc-compare-versus [data-tone="emerald"] { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-dc-compare-versus [data-tone="amber"]   { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-dc-compare-versus [data-tone="violet"]  { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-dc-compare-versus [data-tone="rose"]    { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-dc-compare-versus [data-tone="blue"]    { background: var(--tint-blue-bg);    color: var(--tint-blue-ink); }
        .aitshd-dc-compare-versus [data-tone="cyan"]    { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-dc-compare-vs {
            display: inline-flex; align-items: center; justify-content: center;
            width: 30px; height: 30px; border-radius: 999px;
            background: linear-gradient(135deg, #F43F5E, #E11D48);
            color: #fff;
            font-weight: 900; font-size: 10.5px;
            letter-spacing: 0.06em;
            box-shadow:
                0 8px 16px -6px rgba(244,63,94,.6),
                inset 0 1px 0 rgba(255,255,255,.2);
            margin: 0 -8px;
            z-index: 2;
            transition: transform .2s;
        }
        .aitshd-dc-compare:hover .aitshd-dc-compare-vs { transform: scale(1.12); }
        .aitshd-dc-compare-title {
            display: block;
            font-size: 16px; font-weight: 800;
            color: var(--aits-ink);
            letter-spacing: -0.02em;
            line-height: 1.2;
        }
        .aitshd-dc-compare:hover .aitshd-dc-compare-title { color: var(--aits-blue-dark); }
        body.theme-dark .aitshd-dc-compare:hover .aitshd-dc-compare-title { color: var(--aits-blue-light); }
        .aitshd-dc-compare-sub {
            display: block;
            font-size: 12px; font-weight: 400;
            color: var(--aits-mut);
            line-height: 1.4;
            margin-top: 4px;
            margin-bottom: 12px;
        }
        .aitshd-dc-compare-cta {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 6px 14px;
            border-radius: 999px;
            font-size: 12px; font-weight: 800;
            letter-spacing: .02em;
            color: var(--aits-blue-dark);
            background: var(--aits-blue-tint);
            transition: background .2s, color .2s;
        }
        body.theme-dark .aitshd-dc-compare-cta {
            color: var(--aits-blue-light);
            background: var(--aits-blue-tint);
        }
        .aitshd-dc-compare:hover .aitshd-dc-compare-cta {
            background: var(--aits-blue);
            color: #fff;
        }
        .aitshd-dc-compare-cta svg { transition: transform .2s; }
        .aitshd-dc-compare:hover .aitshd-dc-compare-cta svg { transform: translateX(4px); }

        /* ═══════ Trending Searches strip ═══════
           Live-pulse dot on the label, chips lift with an icon tone-glow,
           hot flames tilt with heat. */
        .aitshd-dc-trending {
            border-top: 1px solid var(--aits-line);
            padding: 18px 24px 20px;
            background: linear-gradient(0deg, var(--aits-surface-2) 0%, var(--aits-card) 80%);
        }
        .aitshd-dc-trending-head {
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px; flex-wrap: wrap;
            padding: 0 4px 14px;
        }
        .aitshd-dc-trending-head strong {
            font-size: 10.5px; font-weight: 800;
            letter-spacing: .16em; text-transform: uppercase;
            color: var(--aits-blue-dark);
            display: inline-flex; align-items: center; gap: 8px;
        }
        body.theme-dark .aitshd-dc-trending-head strong { color: var(--aits-blue-light); }
        .aitshd-dc-trending-head strong::before {
            content: '';
            width: 6px; height: 6px; border-radius: 999px;
            background: var(--aits-blue);
            box-shadow: 0 0 0 3px rgba(54,128,237,.22);
            animation: aitshdDcPulse 2.2s ease-in-out infinite;
        }
        @keyframes aitshdDcPulse {
            0%, 100% { box-shadow: 0 0 0 3px rgba(54,128,237,.22); }
            50%      { box-shadow: 0 0 0 6px rgba(54,128,237,.05); }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-dc-trending-head strong::before { animation: none; }
        }
        .aitshd-dc-trending-head a {
            font-size: 12.5px; font-weight: 700;
            color: var(--aits-blue-dark);
            text-decoration: none;
            display: inline-flex; align-items: center; gap: 5px;
            padding: 6px 10px; border-radius: 999px;
            transition: background .18s, color .18s;
        }
        body.theme-dark .aitshd-dc-trending-head a { color: var(--aits-blue-light); }
        .aitshd-dc-trending-head a:hover { background: var(--aits-blue-tint); }
        .aitshd-dc-trending-head a svg { transition: transform .2s; }
        .aitshd-dc-trending-head a:hover svg { transform: translateX(3px); }
        .aitshd-dc-trending-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
            gap: 10px;
        }
        .aitshd-dc-trending-chip {
            position: relative;
            display: flex; align-items: center; gap: 10px;
            padding: 11px 14px;
            border-radius: 14px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            color: var(--aits-ink);
            text-decoration: none;
            font-size: 13px; font-weight: 600;
            transition: border-color .2s, transform .2s, box-shadow .2s;
            min-width: 0;
            box-shadow: 0 1px 0 rgba(15,23,42,.03);
        }
        .aitshd-dc-trending-chip:hover {
            border-color: var(--aits-blue-line);
            transform: translateY(-2px);
            color: var(--aits-blue-dark);
            box-shadow:
                0 14px 24px -16px rgba(54,128,237,.4),
                0 2px 4px rgba(15,23,42,.04);
        }
        body.theme-dark .aitshd-dc-trending-chip:hover { color: var(--aits-blue-light); }
        .aitshd-dc-trending-ico {
            width: 32px; height: 32px; border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5);
            transition: transform .2s, box-shadow .2s;
        }
        body.theme-dark .aitshd-dc-trending-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
        .aitshd-dc-trending-chip[data-tone="emerald"] .aitshd-dc-trending-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-dc-trending-chip[data-tone="amber"]   .aitshd-dc-trending-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-dc-trending-chip[data-tone="violet"]  .aitshd-dc-trending-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-dc-trending-chip[data-tone="rose"]    .aitshd-dc-trending-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-dc-trending-chip[data-tone="pink"]    .aitshd-dc-trending-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-dc-trending-chip[data-tone="cyan"]    .aitshd-dc-trending-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-dc-trending-chip[data-tone="indigo"]  .aitshd-dc-trending-ico { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-dc-trending-chip:hover .aitshd-dc-trending-ico {
            transform: scale(1.06);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 18px -8px currentColor;
        }
        .aitshd-dc-trending-label {
            flex: 1; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            letter-spacing: -0.01em;
        }
        .aitshd-dc-trending-hot {
            display: inline-flex; align-items: center; justify-content: center;
            width: 22px; height: 22px; border-radius: 999px;
            background: linear-gradient(135deg, rgba(249,115,22,.16), rgba(244,63,94,.14));
            color: #F97316;
            flex: none;
            transition: transform .3s var(--ease,ease), color .2s;
        }
        .aitshd-dc-trending-chip:hover .aitshd-dc-trending-hot {
            color: #EA580C;
            transform: rotate(-8deg) scale(1.1);
        }

        /* ═══════ Assurance rail (trust footer) — 2026-08-02 premium rebuild ═══════
           Same rebuild the Deals band got, in Discover's blue→cyan identity.
           The bug fixed here is the one all four trust strips shipped with: the
           title and desc were inline spans inside an inline body whose only rule
           was min-width, so each promise rendered as one run-on paragraph
           ("Unbiased & Independent 100% unbiased tool reviews") and the desc's
           margin-top did nothing. Card layout also retires the hairline
           dividers, and with them the orphan divider on a wrapped row. */
        .aitshd-dc-trust {
            position: relative;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            padding: 16px 20px 20px;
            border-top: 1px solid var(--aits-line);
            background:
                radial-gradient(120% 180% at 0% 0%, var(--dc-a1-soft), transparent 58%),
                radial-gradient(120% 180% at 100% 100%, var(--dc-a2-soft), transparent 58%),
                linear-gradient(0deg, var(--aits-surface-2), var(--aits-card));
        }
        /* Brand hairline riding the band's top edge — blue→cyan, faded at both ends. */
        .aitshd-dc-trust::before {
            content: '';
            position: absolute; left: 0; right: 0; top: -1px; height: 1px;
            background: linear-gradient(90deg, transparent, var(--dc-a1) 20%, var(--dc-a2) 80%, transparent);
            opacity: .5;
            pointer-events: none;
        }

        .aitshd-dc-trust-item {
            position: relative;
            display: flex; align-items: flex-start; gap: 11px;
            min-width: 0;
            padding: 12px 13px 13px;
            border-radius: 14px;
            border: 1px solid var(--aits-line);
            background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
            overflow: hidden;
            transition: transform .26s var(--ease,ease), border-color .2s var(--ease,ease),
                        box-shadow .26s var(--ease,ease);
        }
        body.theme-dark .aitshd-dc-trust-item {
            background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
        }
        .aitshd-dc-trust-item::after {
            content: '';
            position: absolute; left: 0; right: 0; top: 0; height: 2px;
            background: var(--dc-grad);
            transform: scaleX(0); transform-origin: left center;
            opacity: 0;
            transition: transform .38s var(--ease,ease), opacity .22s var(--ease,ease);
            pointer-events: none;
        }

        .aitshd-dc-trust-ico {
            position: relative;
            width: 40px; height: 40px; border-radius: 13px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            overflow: hidden;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5);
            transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .28s var(--ease,ease);
        }
        .aitshd-dc-trust-ico > svg { position: relative; z-index: 1; }
        body.theme-dark .aitshd-dc-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
        .aitshd-dc-trust-ico::after {
            content: '';
            position: absolute; inset: -25%;
            background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%);
            transform: translateX(-130%);
            opacity: 0;
            pointer-events: none;
        }
        body.theme-dark .aitshd-dc-trust-ico::after {
            background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.2) 50%, transparent 62%);
        }
        .aitshd-dc-trust-item[data-tone="emerald"] .aitshd-dc-trust-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-dc-trust-item[data-tone="amber"]   .aitshd-dc-trust-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-dc-trust-item[data-tone="rose"]    .aitshd-dc-trust-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-dc-trust-item[data-tone="violet"]  .aitshd-dc-trust-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-dc-trust-item[data-tone="pink"]    .aitshd-dc-trust-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-dc-trust-item[data-tone="cyan"]    .aitshd-dc-trust-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-dc-trust-item[data-tone="indigo"]  .aitshd-dc-trust-ico { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-dc-trust-item[data-tone="slate"]   .aitshd-dc-trust-ico { background: var(--tint-slate-bg);   color: var(--tint-slate-ink); }

        /* Inline body → column, so title and desc stop sharing a line. */
        .aitshd-dc-trust-body {
            min-width: 0;
            display: flex; flex-direction: column;
            padding-top: 1px;
        }
        .aitshd-dc-trust-title {
            display: block;
            font-size: 13px; font-weight: 800;
            color: var(--aits-ink);
            line-height: 1.25;
            letter-spacing: -0.01em;
            white-space: normal;
            transition: color .18s var(--ease,ease);
        }
        .aitshd-dc-trust-desc {
            display: block;
            font-size: 11.5px; font-weight: 500;
            color: var(--aits-mut);
            line-height: 1.45;
            margin-top: 4px;
            white-space: normal;
            overflow-wrap: break-word;
        }

        @media (hover: hover) {
            .aitshd-dc-trust-item:hover {
                transform: translateY(-3px);
                border-color: var(--aits-blue-line);
                box-shadow: 0 20px 34px -24px rgba(15,23,42,.45), inset 0 1px 0 rgba(255,255,255,.7);
            }
            body.theme-dark .aitshd-dc-trust-item:hover {
                box-shadow: 0 20px 34px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
            }
            .aitshd-dc-trust-item:hover::after { transform: scaleX(1); opacity: 1; }
            .aitshd-dc-trust-item:hover .aitshd-dc-trust-ico {
                transform: translateY(-2px) scale(1.07) rotate(-4deg);
                /* currentColor is the tone ink, so each medallion glows its own hue. */
                box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 12px 20px -12px currentColor;
            }
            body.theme-dark .aitshd-dc-trust-item:hover .aitshd-dc-trust-ico {
                box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 22px -12px currentColor;
            }
            .aitshd-dc-trust-item:hover .aitshd-dc-trust-ico::after {
                opacity: 1;
                transform: translateX(130%);
                transition: transform .7s var(--ease,ease), opacity .2s var(--ease,ease);
            }
            .aitshd-dc-trust-item:hover .aitshd-dc-trust-title { color: var(--aits-blue-dark); }
            body.theme-dark .aitshd-dc-trust-item:hover .aitshd-dc-trust-title { color: var(--aits-blue-light); }
        }

        /* Staggered rise as the panel opens, so the eye finishes on the
           reassurance instead of arriving to a static footer. */
        @keyframes aitshdDcTrustIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: none; }
        }
        .aitshd[data-mega-discover-open="1"] .aitshd-dc-trust-item {
            animation: aitshdDcTrustIn .46s var(--ease,ease) backwards;
        }
        .aitshd[data-mega-discover-open="1"] .aitshd-dc-trust-item:nth-child(1) { animation-delay: .05s; }
        .aitshd[data-mega-discover-open="1"] .aitshd-dc-trust-item:nth-child(2) { animation-delay: .11s; }
        .aitshd[data-mega-discover-open="1"] .aitshd-dc-trust-item:nth-child(3) { animation-delay: .17s; }
        .aitshd[data-mega-discover-open="1"] .aitshd-dc-trust-item:nth-child(4) { animation-delay: .23s; }

        /* Responsive ladder 4 → 2×2 → 1. Four promises halve cleanly, so this
           band needs no span trick — it steps at 1140 with the panel's own
           column drop. 1023 and below the burger owns the header and this band
           is unreachable, so the 1-up step is defensive only. */
        @media (max-width: 1140px) {
            .aitshd-dc-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 1023px) {
            .aitshd-dc-trust { padding: 14px 16px 18px; }
        }
        @media (max-width: 720px) {
            .aitshd-dc-trust { grid-template-columns: 1fr; }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-dc-trust-item,
            .aitshd-dc-trust-item::after,
            .aitshd-dc-trust-ico,
            .aitshd-dc-trust-ico::after,
            .aitshd-dc-trust-title { transition: none; }
            .aitshd[data-mega-discover-open="1"] .aitshd-dc-trust-item { animation: none; }
            .aitshd-dc-trust-item:hover { transform: none; }
            .aitshd-dc-trust-item:hover .aitshd-dc-trust-ico { transform: none; }
        }

        /* ═══════ Mobile drawer — Discover section ═══════
           On-brand blue rebuild for phones/tablets (<1024px, where the mega
           is unreachable): Trending-Collection hero, 2-col chip grid, VS
           compare tile, trending pills. Opt-in via .aitshd-drawer-disc-*. */
        .aitshd-drawer-disc-hero {
            display: block;
            position: relative;
            margin: 6px 0 14px;
            padding: 16px 16px 18px;
            border-radius: 18px;
            color: #fff !important;
            text-decoration: none !important;
            background:
                radial-gradient(100% 90% at 100% 0%, rgba(96,164,245,.42) 0%, transparent 55%),
                radial-gradient(90% 120% at 0% 100%, rgba(34,211,238,.34) 0%, transparent 55%),
                linear-gradient(140deg, #0E1B3A, #122152 52%, #0B1226);
            box-shadow: 0 18px 34px -20px rgba(15,23,42,.55), inset 0 1px 0 rgba(255,255,255,.10);
            overflow: hidden;
        }
        .aitshd-drawer-disc-hero::before {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(rgba(255,255,255,.20) 1px, transparent 1px);
            background-size: 12px 12px;
            opacity: .06; pointer-events: none;
        }
        .aitshd-drawer-disc-hero-head {
            display: flex; align-items: center; justify-content: space-between;
            gap: 10px;
            position: relative; z-index: 1;
        }
        .aitshd-drawer-disc-hero-pill {
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 9.5px; font-weight: 800;
            letter-spacing: .16em; text-transform: uppercase;
            color: #BFE0FF;
            padding: 5px 9px;
            border-radius: 999px;
            border: 1px solid rgba(147,190,255,.32);
            background: rgba(147,190,255,.12);
        }
        .aitshd-drawer-disc-hero-pill svg { color: #FCD34D; }
        .aitshd-drawer-disc-hero-flame {
            width: 26px; height: 26px;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 999px;
            background: rgba(252,211,77,.14);
            border: 1px solid rgba(252,211,77,.30);
            color: #FCD34D;
        }
        .aitshd-drawer-disc-hero-title {
            display: block; position: relative; z-index: 1;
            margin-top: 12px;
            font-size: 16px; font-weight: 800; letter-spacing: -0.015em;
            color: #fff;
        }
        .aitshd-drawer-disc-hero-sub {
            display: block; position: relative; z-index: 1;
            margin-top: 4px;
            font-size: 12.5px; font-weight: 500;
            color: rgba(255,255,255,.78);
            line-height: 1.45;
        }
        .aitshd-drawer-disc-hero-cta {
            display: inline-flex; align-items: center; gap: 6px;
            margin-top: 14px;
            padding: 9px 16px;
            border-radius: 10px;
            background: linear-gradient(135deg, #3680ED, #06B6D4);
            color: #fff !important;
            font-size: 12.5px; font-weight: 800;
            letter-spacing: -0.01em;
            box-shadow:
                0 10px 22px -8px rgba(54,128,237,.7),
                inset 0 1px 0 rgba(255,255,255,.20);
            position: relative; z-index: 1;
            transition: transform .18s var(--ease,ease), box-shadow .18s var(--ease,ease), filter .18s var(--ease,ease);
        }
        .aitshd-drawer-disc-hero-cta:active {
            transform: scale(.97);
            filter: saturate(1.05);
        }
        .aitshd-drawer-disc-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin: 8px 0 4px;
        }
        .aitshd-drawer-disc-chip {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            color: var(--aits-ink);
            text-decoration: none;
            font-size: 12.5px; font-weight: 600;
            min-width: 0;
            transition: border-color .18s, background-color .18s, transform .18s;
        }
        .aitshd-drawer-disc-chip:hover,
        .aitshd-drawer-disc-chip:active {
            border-color: var(--aits-blue-line);
            background: var(--aits-blue-tint-2);
            transform: translateY(-1px);
        }
        .aitshd-drawer-disc-chip-ico {
            width: 32px; height: 32px; border-radius: 9px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
        }
        .aitshd-drawer-disc-chip[data-tone="cyan"]    .aitshd-drawer-disc-chip-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-drawer-disc-chip[data-tone="violet"]  .aitshd-drawer-disc-chip-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-drawer-disc-chip[data-tone="emerald"] .aitshd-drawer-disc-chip-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-drawer-disc-chip[data-tone="amber"]   .aitshd-drawer-disc-chip-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-drawer-disc-chip[data-tone="rose"]    .aitshd-drawer-disc-chip-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-drawer-disc-chip[data-tone="pink"]    .aitshd-drawer-disc-chip-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-drawer-disc-chip[data-tone="indigo"]  .aitshd-drawer-disc-chip-ico { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-drawer-disc-chip-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
        /* Title wraps to 2 lines — "Explore Directory" clipped to
           "Explore Direct…" in a ~150px chip under nowrap-ellipsis. */
        .aitshd-drawer-disc-chip-title {
            font-size: 13px; font-weight: 700; color: var(--aits-ink);
            white-space: normal; line-height: 1.2;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-drawer-disc-chip-sub {
            font-size: 10.5px; font-weight: 600;
            color: var(--aits-mut);
            margin-top: 2px;
            letter-spacing: .02em;
        }

        /* Mobile compare card — compact horizontal VS layout */
        .aitshd-drawer-disc-compare {
            display: flex; align-items: center; gap: 12px;
            margin: 10px 0 6px;
            padding: 12px 14px;
            border-radius: 14px;
            border: 1px solid transparent;
            background:
                linear-gradient(var(--aits-card), var(--aits-card)) padding-box,
                linear-gradient(135deg, rgba(54,128,237,.45), rgba(6,182,212,.35)) border-box;
            text-decoration: none;
            color: var(--aits-ink);
        }
        .aitshd-drawer-disc-compare-avs {
            display: inline-flex; align-items: center; gap: 4px;
            flex: none;
        }
        .aitshd-drawer-disc-compare-avs > span {
            width: 34px; height: 34px; border-radius: 999px;
            display: inline-flex; align-items: center; justify-content: center;
            font-weight: 900; font-size: 13px; letter-spacing: -0.02em;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
        }
        body.theme-dark .aitshd-drawer-disc-compare-avs > span { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
        .aitshd-drawer-disc-compare-avs [data-tone="emerald"] { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-drawer-disc-compare-avs [data-tone="amber"]   { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-drawer-disc-compare-avs [data-tone="violet"]  { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-drawer-disc-compare-avs [data-tone="rose"]    { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-drawer-disc-compare-vs {
            font-size: 9.5px; font-weight: 900;
            color: #fff;
            padding: 3px 7px; border-radius: 999px;
            background: linear-gradient(135deg, #F43F5E, #E11D48);
            letter-spacing: .06em;
            box-shadow: 0 4px 10px -4px rgba(244,63,94,.5);
        }
        .aitshd-drawer-disc-compare-copy { flex: 1; min-width: 0; }
        .aitshd-drawer-disc-compare-title {
            font-size: 13px; font-weight: 800;
            color: var(--aits-ink);
            letter-spacing: -0.01em;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-drawer-disc-compare-sub {
            font-size: 11.5px; font-weight: 500;
            color: var(--aits-mut);
            margin-top: 2px;
            line-height: 1.3;
        }

        /* Trending searches — inline flex-wrap pill row */
        .aitshd-drawer-disc-trending {
            display: flex; flex-wrap: wrap; gap: 6px;
            margin: 4px 0 6px;
        }
        .aitshd-drawer-disc-trending > a {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 6px 10px 6px 8px;
            border-radius: 999px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            color: var(--aits-ink);
            text-decoration: none;
            font-size: 11.5px; font-weight: 700;
            transition: border-color .18s, background-color .18s;
        }
        .aitshd-drawer-disc-trending > a:hover,
        .aitshd-drawer-disc-trending > a:active {
            border-color: var(--aits-blue-line);
            background: var(--aits-blue-tint-2);
            color: var(--aits-blue-dark);
        }
        body.theme-dark .aitshd-drawer-disc-trending > a:hover,
        body.theme-dark .aitshd-drawer-disc-trending > a:active {
            color: var(--aits-blue-light);
        }
        .aitshd-drawer-disc-trending svg { flex: none; }
        .aitshd-drawer-disc-trending .hot { color: #F97316; }

        /* ── Drawer assurance rail — the mega's trust band restacked for touch.
           The mega never renders under 1024px, so mobile and tablet had none of
           these promises. Deliberately 1-up at every width: .aitshd-drawer-panel
           caps at 390px from a 430px viewport up, so a viewport-driven 2-up
           would leave each card ~170px and wrap the descs to three lines. The
           --dc-* tokens live on the mega panel, so the gradient is spelled out
           here the same way the drawer hero's brand CTA is. */
        .aitshd-drawer-disc-trust {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            margin: 8px 0 4px;
        }
        .aitshd-drawer-disc-trust-item {
            position: relative;
            display: flex; align-items: flex-start; gap: 10px;
            min-width: 0;
            padding: 10px 12px 11px;
            border-radius: 12px;
            border: 1px solid var(--aits-line);
            background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2));
            overflow: hidden;
            transition: border-color .18s var(--ease,ease), transform .18s var(--ease,ease);
        }
        body.theme-dark .aitshd-drawer-disc-trust-item {
            background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
        }
        .aitshd-drawer-disc-trust-item::after {
            content: '';
            position: absolute; left: 0; right: 0; top: 0; height: 2px;
            background: linear-gradient(90deg, #3680ED, #06B6D4);
            transform: scaleX(0); transform-origin: left center;
            transition: transform .3s var(--ease,ease);
            pointer-events: none;
        }
        body.theme-dark .aitshd-drawer-disc-trust-item::after {
            background: linear-gradient(90deg, #60A4F5, #22D3EE);
        }
        .aitshd-drawer-disc-trust-item:active,
        .aitshd-drawer-disc-trust-item:hover {
            border-color: var(--aits-blue-line);
            transform: translateY(-1px);
        }
        .aitshd-drawer-disc-trust-item:active::after,
        .aitshd-drawer-disc-trust-item:hover::after { transform: scaleX(1); }
        .aitshd-drawer-disc-trust-ico {
            width: 30px; height: 30px; border-radius: 9px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
            transition: transform .24s cubic-bezier(.34,1.56,.64,1);
        }
        body.theme-dark .aitshd-drawer-disc-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
        .aitshd-drawer-disc-trust-item:active .aitshd-drawer-disc-trust-ico,
        .aitshd-drawer-disc-trust-item:hover .aitshd-drawer-disc-trust-ico { transform: scale(1.08); }
        .aitshd-drawer-disc-trust-item[data-tone="emerald"] .aitshd-drawer-disc-trust-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-drawer-disc-trust-item[data-tone="amber"]   .aitshd-drawer-disc-trust-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-drawer-disc-trust-item[data-tone="rose"]    .aitshd-drawer-disc-trust-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-drawer-disc-trust-item[data-tone="violet"]  .aitshd-drawer-disc-trust-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-drawer-disc-trust-item[data-tone="pink"]    .aitshd-drawer-disc-trust-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-drawer-disc-trust-item[data-tone="cyan"]    .aitshd-drawer-disc-trust-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-drawer-disc-trust-item[data-tone="indigo"]  .aitshd-drawer-disc-trust-ico { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-drawer-disc-trust-item[data-tone="slate"]   .aitshd-drawer-disc-trust-ico { background: var(--tint-slate-bg);   color: var(--tint-slate-ink); }
        .aitshd-drawer-disc-trust-copy { min-width: 0; display: flex; flex-direction: column; }
        .aitshd-drawer-disc-trust-title {
            display: block;
            font-size: 12.5px; font-weight: 800;
            color: var(--aits-ink);
            line-height: 1.25; letter-spacing: -0.01em;
            white-space: normal;
        }
        .aitshd-drawer-disc-trust-desc {
            display: block;
            font-size: 11px; font-weight: 500;
            color: var(--aits-mut);
            line-height: 1.4;
            margin-top: 3px;
            white-space: normal;
            overflow-wrap: break-word;
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-drawer-disc-trust-item,
            .aitshd-drawer-disc-trust-item::after,
            .aitshd-drawer-disc-trust-ico { transition: none; }
            .aitshd-drawer-disc-trust-item:active,
            .aitshd-drawer-disc-trust-item:hover { transform: none; }
        }

        /* ══════════════════════════════════════════════════════════════════
           RESOURCES MEGA — premium reference library (2026-07-31 redesign)
           4 reference lanes (Learn & Read / Tools & Help / Community /
           Legal & Policies) + a newsletter + Popular Resources rail, then a
           Featured Guides strip and a trust footer.

           Identity: BRAND-BLUE led (#3680ED → indigo #6366F1) so Resources
           reads unmistakably as AIToolsay — no off-brand green. Every accent
           bar, hover wash, view-all pill and CTA is on-brand in BOTH themes.

           Fixes shipped here (were live bugs in the screenshot):
             · titles no longer ellipsis-clip ("AI Tools Commu…" etc.) — the
               base .aitshd-mega-item-title is nowrap+ellipsis and Resources
               never overrode it. It now wraps to 2 clean lines.
             · descriptions wrap to 2 lines instead of truncating mid-word.
             · Popular Resources titles wrap ("ChatGPT Prompts Libr…" fixed).
           All rules are scoped under .aitshd-mega-panel-resources (or the
           .aitshd-rc-* / .aitshd-drawer-res-* namespaces) so nothing leaks
           into the six sibling megas.
           ══════════════════════════════════════════════════════════════════ */

        /* Panel-local accent tokens — one place to retune the whole identity.
           Light: brand blue → indigo. Dark: lifted twins so accents glow. */
        .aitshd-mega-panel-resources {
            --rc-a1: #3680ED;   /* brand blue  */
            --rc-a2: #6366F1;   /* indigo      */
            --rc-a1-soft: rgba(54,128,237,.06);
            --rc-a2-soft: rgba(99,102,241,.05);
            --rc-grad: linear-gradient(90deg, var(--rc-a1), var(--rc-a2));
        }
        body.theme-dark .aitshd-mega-panel-resources {
            --rc-a1: #60A4F5;
            --rc-a2: #818CF8;
            --rc-a1-soft: rgba(96,164,245,.10);
            --rc-a2-soft: rgba(129,140,248,.08);
        }

        .aitshd[data-mega-resources-open="1"] .aitshd-mega-panel-resources {
            display: block;
            opacity: 1;
            transform: translate(-50%, 12px);
        }
        .aitshd[data-mega-resources-open="1"] .aitshd-mega-backdrop { opacity: 1; pointer-events: auto; }

        /* Panel shell — brand-blue ambient wash toward the featured rail,
           capped in height with a slim branded scrollbar so a dense library
           can never run off a short laptop/tablet. */
        .aitshd-mega-panel-resources {
            background:
                radial-gradient(120% 90% at 100% 0%, rgba(54,128,237,.05) 0%, transparent 52%),
                radial-gradient(90% 120% at 0% 100%, rgba(99,102,241,.045) 0%, transparent 55%),
                var(--aits-card);
            max-height: calc(100vh - var(--hd-h) - 30px);
            overflow-y: auto;
            overscroll-behavior: contain;
        }
        body.theme-dark .aitshd-mega-panel-resources {
            background:
                radial-gradient(120% 90% at 100% 0%, rgba(96,164,245,.10) 0%, transparent 52%),
                radial-gradient(90% 120% at 0% 100%, rgba(129,140,248,.08) 0%, transparent 55%),
                var(--aits-card);
        }
        .aitshd-mega-panel-resources::-webkit-scrollbar { width: 10px; }
        .aitshd-mega-panel-resources::-webkit-scrollbar-thumb {
            background: var(--aits-blue-line);
            border-radius: 999px;
            border: 3px solid var(--aits-card);
        }
        .aitshd-mega-panel-resources::-webkit-scrollbar-thumb:hover { background: var(--aits-blue-light); }
        .aitshd-mega-panel-resources { scrollbar-width: thin; scrollbar-color: var(--aits-blue-line) transparent; }

        /* ── Grid — 4 reference lanes + a wider featured rail.
           Steps down cleanly from a 1440px desktop to a 1024px touch tablet
           (where the panel opens on tap, not hover). */
        .aitshd-mega-panel-resources .aitshd-mega-wrap {
            grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 344px;
        }
        @media (max-width: 1320px) {
            .aitshd-mega-panel-resources .aitshd-mega-wrap {
                grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 312px;
            }
        }
        @media (max-width: 1140px) {
            .aitshd-mega-panel-resources .aitshd-mega-wrap {
                grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 300px;
            }
            .aitshd-mega-panel-resources .aitshd-mega-col-legal { display: none; }
        }
        @media (max-width: 900px) {
            .aitshd-mega-panel-resources .aitshd-mega-wrap { grid-template-columns: 1fr; }
            .aitshd-mega-panel-resources .aitshd-mega-featured-col { display: none; }
        }

        /* Column dividers — fading hairlines pull the lanes into one sheet. */
        .aitshd-mega-panel-resources .aitshd-mega-col + .aitshd-mega-col {
            border-left: 1px solid transparent;
            background-image: linear-gradient(180deg, transparent, var(--aits-line) 12%, var(--aits-line) 88%, transparent);
            background-repeat: no-repeat;
            background-size: 1px 100%;
            background-position: left center;
        }
        .aitshd-mega-panel-resources .aitshd-mega-col {
            padding: 24px 16px 18px;
            display: flex; flex-direction: column;
            min-width: 0;
        }
        .aitshd-mega-panel-resources .aitshd-mega-featured-col {
            padding: 24px 22px 20px 8px;
            gap: 14px;
        }

        /* Column headers — brand accent bar + tidy label. */
        .aitshd-mega-panel-resources .aitshd-mega-colh {
            font-size: 10.5px; font-weight: 800;
            letter-spacing: .16em; text-transform: uppercase;
            color: var(--aits-blue-dark);
            padding: 2px 6px 12px;
            display: flex; align-items: center; gap: 8px;
        }
        body.theme-dark .aitshd-mega-panel-resources .aitshd-mega-colh { color: var(--aits-blue-light); }
        .aitshd-mega-panel-resources .aitshd-mega-colh::before {
            content: '';
            width: 18px; height: 3px; border-radius: 999px;
            background: var(--rc-grad);
            flex: none;
        }

        /* ── Row items — the heart of the fix.
           A left accent bar wipes in on hover, the icon tile lifts with a
           tone-tinted glow, and the title/desc WRAP instead of clipping. */
        .aitshd-mega-panel-resources .aitshd-mega-item,
        .aitshd-mega-panel-resources .aitshd-mega-item.is-lg {
            padding: 9px 11px 9px 15px;
            border-radius: 13px;
            align-items: flex-start;
            transition: background-color .2s var(--ease,ease), transform .18s var(--ease,ease);
        }
        .aitshd-mega-panel-resources .aitshd-mega-item::before {
            content: '';
            position: absolute;
            left: 5px; top: 50%;
            width: 3px; height: 22px;
            border-radius: 999px;
            background: var(--rc-grad);
            transform: translateY(-50%) scaleY(.2);
            transform-origin: center;
            opacity: 0;
            transition: transform .22s var(--ease,ease), opacity .22s var(--ease,ease);
        }
        .aitshd-mega-panel-resources .aitshd-mega-item:hover {
            background: linear-gradient(90deg, var(--rc-a1-soft), var(--rc-a2-soft));
        }
        body.theme-dark .aitshd-mega-panel-resources .aitshd-mega-item:hover {
            background: linear-gradient(90deg, var(--rc-a1-soft), var(--rc-a2-soft));
        }
        .aitshd-mega-panel-resources .aitshd-mega-item:hover::before {
            transform: translateY(-50%) scaleY(1);
            opacity: 1;
        }

        /* Icon tile — sits at the top of the (now possibly 2-line) row. */
        .aitshd-mega-panel-resources .aitshd-mega-item .aitshd-mega-item-icon,
        .aitshd-mega-panel-resources .aitshd-mega-item.is-lg .aitshd-mega-item-icon {
            width: 40px; height: 40px; border-radius: 11px;
            margin-top: 1px;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.55);
        }
        body.theme-dark .aitshd-mega-panel-resources .aitshd-mega-item .aitshd-mega-item-icon,
        body.theme-dark .aitshd-mega-panel-resources .aitshd-mega-item.is-lg .aitshd-mega-item-icon {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
        }
        .aitshd-mega-panel-resources .aitshd-mega-item-icon svg { width: 19px; height: 19px; }
        .aitshd-mega-panel-resources .aitshd-mega-item:hover .aitshd-mega-item-icon {
            transform: scale(1.07) translateY(-1px);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 22px -8px currentColor;
        }
        body.theme-dark .aitshd-mega-panel-resources .aitshd-mega-item:hover .aitshd-mega-item-icon {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px -8px currentColor;
        }

        /* THE CLIPPING FIX — titles wrap to 2 lines (badge stays inline),
           matching how Learn/Discover already behave. */
        .aitshd-mega-panel-resources .aitshd-mega-item-title,
        .aitshd-mega-panel-resources .aitshd-mega-item.is-lg .aitshd-mega-item-title {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            white-space: normal;
            overflow: hidden;
            text-overflow: clip;
            font-size: 13.5px;
            font-weight: 700;
            line-height: 1.24;
            letter-spacing: -0.01em;
            max-height: 2.5em;
        }
        .aitshd-mega-panel-resources .aitshd-mega-item-desc {
            font-size: 11.5px;
            font-weight: 400;
            color: var(--aits-mut);
            line-height: 1.34;
            margin-top: 2px;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-mega-panel-resources .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-dark); }
        body.theme-dark .aitshd-mega-panel-resources .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-light); }

        /* View-all footer link — pushed to the bottom of each lane, brand pill
           with an arrow-in-disc that slides on hover. */
        .aitshd-mega-panel-resources .aitshd-mega-view-all-link {
            margin: auto 0 0;
            display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 10px 10px 10px 14px;
            border-radius: 12px;
            font-size: 12.5px; font-weight: 700;
            letter-spacing: -0.005em;
            color: var(--aits-blue-dark);
            border: 1px solid var(--aits-blue-line);
            background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2));
            box-shadow: 0 1px 0 rgba(15,23,42,.03), inset 0 1px 0 rgba(255,255,255,.6);
            transition: background .22s var(--ease,ease), border-color .2s, box-shadow .22s, color .2s, transform .18s;
        }
        body.theme-dark .aitshd-mega-panel-resources .aitshd-mega-view-all-link {
            color: var(--aits-blue-light);
            background: linear-gradient(180deg, var(--aits-surface-3), var(--aits-blue-tint-2));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
        }
        .aitshd-mega-panel-resources .aitshd-mega-view-all-link svg {
            flex: none;
            width: 24px; height: 24px; padding: 5px;
            border-radius: 999px;
            background: var(--aits-blue-tint);
            color: var(--aits-blue);
            transition: background .2s, color .2s, transform .2s;
        }
        .aitshd-mega-panel-resources .aitshd-mega-view-all-link:hover {
            border-color: var(--aits-blue);
            background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-blue-tint));
            box-shadow: 0 10px 22px -14px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.7);
            transform: translateY(-1px);
        }
        .aitshd-mega-panel-resources .aitshd-mega-view-all-link:hover svg {
            background: var(--aits-blue);
            color: #fff;
            transform: translateX(3px);
        }

        /* ═══════ Newsletter subscribe hero ═══════
           Deep-navy glass with on-brand blue→indigo halos + a cyan spark,
           dot-grid texture, and a brand-gradient CTA. */
        .aitshd-rc-newsletter {
            position: relative;
            border-radius: 20px;
            padding: 22px;
            color: #fff;
            background:
                radial-gradient(120% 90% at 100% 0%, rgba(96,164,245,.42) 0%, transparent 55%),
                radial-gradient(90% 120% at 0% 100%, rgba(129,140,248,.36) 0%, transparent 55%),
                linear-gradient(140deg, #0E1B3A 0%, #122152 52%, #0B1226 100%);
            box-shadow:
                0 24px 48px -22px rgba(15,23,42,.55),
                inset 0 1px 0 rgba(255,255,255,.10),
                inset 0 0 0 1px rgba(255,255,255,.05);
            overflow: hidden;
        }
        .aitshd-rc-newsletter::before {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
            background-size: 14px 14px;
            opacity: .06;
            pointer-events: none;
        }
        .aitshd-rc-newsletter::after {
            content: '';
            position: absolute;
            right: -46px; top: 34%;
            width: 220px; height: 220px;
            border-radius: 999px;
            background: radial-gradient(circle at 32% 30%, rgba(125,211,252,.42) 0%, rgba(96,164,245,.24) 44%, transparent 72%);
            filter: blur(2px);
            pointer-events: none;
        }
        .aitshd-rc-nl-label {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 10px; font-weight: 800;
            letter-spacing: .16em; text-transform: uppercase;
            color: #BFE0FF;
            padding: 6px 11px;
            border-radius: 999px;
            border: 1px solid rgba(147,190,255,.32);
            background: linear-gradient(135deg, rgba(147,190,255,.18), rgba(129,140,248,.12));
            backdrop-filter: blur(6px);
            position: relative; z-index: 1;
        }
        .aitshd-rc-nl-label svg { color: #FCD34D; }
        .aitshd-rc-nl-title {
            display: block;
            font-size: 22px; font-weight: 900;
            letter-spacing: -0.02em;
            line-height: 1.15;
            margin: 14px 0 8px;
            color: #fff;
            position: relative; z-index: 1;
        }
        .aitshd-rc-nl-sub {
            display: block;
            font-size: 13px; font-weight: 500;
            color: rgba(255,255,255,.80);
            line-height: 1.5;
            margin-bottom: 16px;
            position: relative; z-index: 1;
        }
        .aitshd-rc-nl-form {
            display: flex; flex-direction: column; gap: 8px;
            position: relative; z-index: 1;
        }
        .aitshd-rc-nl-input {
            width: 100%;
            height: 42px;
            padding: 0 14px;
            border-radius: 12px;
            background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.15);
            color: #fff;
            font-family: inherit; font-size: 13px; font-weight: 500;
            transition: border-color .2s, background-color .2s, box-shadow .2s;
            appearance: none;
            backdrop-filter: blur(6px);
        }
        .aitshd-rc-nl-input::placeholder { color: rgba(255,255,255,.52); }
        .aitshd-rc-nl-input:focus {
            outline: none;
            border-color: rgba(96,164,245,.65);
            background: rgba(255,255,255,.10);
            box-shadow: 0 0 0 3px rgba(54,128,237,.26);
        }
        .aitshd-rc-nl-btn {
            height: 44px;
            padding: 0 18px;
            border-radius: 12px;
            border: 0;
            background: linear-gradient(135deg, #3680ED, #4F46E5);
            color: #fff;
            font-family: inherit; font-size: 13.5px; font-weight: 800;
            letter-spacing: -0.01em;
            cursor: pointer;
            box-shadow:
                0 14px 28px -10px rgba(54,128,237,.62),
                inset 0 1px 0 rgba(255,255,255,.20);
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            transition: background .2s, transform .2s, box-shadow .2s;
        }
        .aitshd-rc-nl-btn:hover {
            background: linear-gradient(135deg, #2060C0, #4338CA);
            transform: translateY(-1px);
            box-shadow:
                0 20px 34px -12px rgba(54,128,237,.78),
                inset 0 1px 0 rgba(255,255,255,.24);
        }
        .aitshd-rc-nl-btn svg { transition: transform .2s; }
        .aitshd-rc-nl-btn:hover svg { transform: translateX(4px); }
        .aitshd-rc-nl-status {
            display: none;
            margin-top: 10px;
            padding: 8px 12px;
            border-radius: 10px;
            font-size: 12px; font-weight: 700;
            text-align: center;
            position: relative; z-index: 1;
        }
        .aitshd-rc-nl-status.is-ok  { display: block; background: rgba(96,164,245,.16); color: #BFE0FF; border: 1px solid rgba(96,164,245,.30); }
        .aitshd-rc-nl-status.is-err { display: block; background: rgba(239,68,68,.14);  color: #FCA5A5; border: 1px solid rgba(239,68,68,.25); }

        /* ═══════ Popular Resources compact list ═══════ */
        .aitshd-rc-popular {
            padding: 16px 14px;
            border-radius: 18px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            display: flex; flex-direction: column;
            box-shadow: 0 1px 0 rgba(15,23,42,.03);
        }
        .aitshd-rc-popular-h {
            font-size: 10.5px; font-weight: 800;
            letter-spacing: .16em; text-transform: uppercase;
            color: var(--aits-blue-dark);
            padding: 0 4px 10px;
            display: flex; align-items: center; gap: 8px;
        }
        body.theme-dark .aitshd-rc-popular-h { color: var(--aits-blue-light); }
        .aitshd-rc-popular-h::before {
            content: '';
            width: 14px; height: 3px; border-radius: 999px;
            background: var(--rc-grad, linear-gradient(90deg,#3680ED,#6366F1));
            flex: none;
        }
        .aitshd-rc-popular-item {
            position: relative;
            display: flex; align-items: center; gap: 12px;
            padding: 10px 8px;
            border-radius: 12px;
            text-decoration: none;
            color: var(--aits-ink);
            transition: background-color .2s, transform .18s;
        }
        .aitshd-rc-popular-item + .aitshd-rc-popular-item {
            border-top: 1px solid var(--aits-line-soft, var(--aits-line));
        }
        .aitshd-rc-popular-item:hover {
            background: linear-gradient(90deg, rgba(54,128,237,.07), rgba(99,102,241,.05));
        }
        body.theme-dark .aitshd-rc-popular-item:hover {
            background: linear-gradient(90deg, rgba(96,164,245,.11), rgba(129,140,248,.08));
        }
        .aitshd-rc-popular-ico {
            width: 36px; height: 36px; border-radius: 11px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5);
        }
        body.theme-dark .aitshd-rc-popular-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
        .aitshd-rc-popular-item[data-tone="amber"]   .aitshd-rc-popular-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-rc-popular-item[data-tone="rose"]    .aitshd-rc-popular-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-rc-popular-item[data-tone="violet"]  .aitshd-rc-popular-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-rc-popular-item[data-tone="emerald"] .aitshd-rc-popular-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-rc-popular-item[data-tone="cyan"]    .aitshd-rc-popular-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-rc-popular-item[data-tone="pink"]    .aitshd-rc-popular-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-rc-popular-item[data-tone="indigo"]  .aitshd-rc-popular-ico { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-rc-popular-item:hover .aitshd-rc-popular-ico {
            transform: scale(1.06);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 18px -8px currentColor;
        }
        .aitshd-rc-popular-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
        .aitshd-rc-popular-title {
            font-size: 13px; font-weight: 700;
            color: var(--aits-ink);
            line-height: 1.24;
            letter-spacing: -0.01em;
            white-space: normal;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-rc-popular-desc {
            font-size: 11.5px; font-weight: 400;
            color: var(--aits-mut);
            margin-top: 2px;
            white-space: normal;
            display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-rc-popular-arrow {
            width: 26px; height: 26px;
            border-radius: 999px;
            display: inline-flex; align-items: center; justify-content: center;
            background: transparent;
            color: var(--aits-faint);
            flex: none;
            transition: background .2s, color .2s, transform .2s;
        }
        .aitshd-rc-popular-item:hover .aitshd-rc-popular-arrow {
            color: var(--aits-blue);
            background: var(--aits-blue-tint);
            transform: translateX(3px);
        }
        body.theme-dark .aitshd-rc-popular-item:hover .aitshd-rc-popular-arrow {
            color: var(--aits-blue-light);
            background: var(--aits-blue-tint);
        }
        .aitshd-rc-popular-item:hover .aitshd-rc-popular-title { color: var(--aits-blue-dark); }
        body.theme-dark .aitshd-rc-popular-item:hover .aitshd-rc-popular-title { color: var(--aits-blue-light); }

        /* ═══════ Featured Guides strip ═══════
           Guide cards with a brand top-accent line; lift + glow on hover. */
        .aitshd-rc-guides {
            border-top: 1px solid var(--aits-line);
            padding: 20px 24px 22px;
            background: linear-gradient(0deg, var(--aits-surface-2) 0%, var(--aits-card) 80%);
        }
        .aitshd-rc-guides-head {
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px; flex-wrap: wrap;
            padding: 0 4px 14px;
        }
        .aitshd-rc-guides-head strong {
            font-size: 10.5px; font-weight: 800;
            letter-spacing: .16em; text-transform: uppercase;
            color: var(--aits-blue-dark);
            display: inline-flex; align-items: center; gap: 8px;
        }
        body.theme-dark .aitshd-rc-guides-head strong { color: var(--aits-blue-light); }
        .aitshd-rc-guides-head strong::before {
            content: '';
            width: 14px; height: 3px; border-radius: 999px;
            background: var(--rc-grad, linear-gradient(90deg,#3680ED,#6366F1));
            flex: none;
        }
        .aitshd-rc-guides-head a {
            font-size: 12.5px; font-weight: 700;
            color: var(--aits-blue-dark);
            text-decoration: none;
            display: inline-flex; align-items: center; gap: 5px;
            padding: 6px 10px; border-radius: 999px;
            transition: background .18s, color .18s;
        }
        body.theme-dark .aitshd-rc-guides-head a { color: var(--aits-blue-light); }
        .aitshd-rc-guides-head a:hover { background: var(--aits-blue-tint); }
        .aitshd-rc-guides-head a svg { transition: transform .2s; }
        .aitshd-rc-guides-head a:hover svg { transform: translateX(3px); }
        .aitshd-rc-guides-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
            gap: 10px;
        }
        .aitshd-rc-guide {
            position: relative;
            display: flex; align-items: center; gap: 12px;
            padding: 14px;
            border-radius: 16px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            color: var(--aits-ink);
            text-decoration: none;
            overflow: hidden;
            transition: border-color .2s, transform .2s, box-shadow .2s;
            min-width: 0;
            box-shadow: 0 1px 0 rgba(15,23,42,.03);
        }
        .aitshd-rc-guide::before {
            content: '';
            position: absolute; left: 0; right: 0; top: 0; height: 3px;
            background: linear-gradient(90deg, var(--tint-blue-ink), rgba(99,102,241,.6));
            opacity: .5;
            transition: opacity .2s;
        }
        .aitshd-rc-guide[data-tone="emerald"]::before { background: linear-gradient(90deg, var(--tint-emerald-ink), rgba(16,185,129,.6)); }
        .aitshd-rc-guide[data-tone="amber"]::before   { background: linear-gradient(90deg, var(--tint-amber-ink),   rgba(245,158,11,.6)); }
        .aitshd-rc-guide[data-tone="violet"]::before  { background: linear-gradient(90deg, var(--tint-violet-ink),  rgba(139,92,246,.6)); }
        .aitshd-rc-guide[data-tone="rose"]::before    { background: linear-gradient(90deg, var(--tint-rose-ink),    rgba(244,63,94,.6)); }
        .aitshd-rc-guide[data-tone="pink"]::before    { background: linear-gradient(90deg, var(--tint-pink-ink),    rgba(236,72,153,.6)); }
        .aitshd-rc-guide[data-tone="cyan"]::before    { background: linear-gradient(90deg, var(--tint-cyan-ink),    rgba(6,182,212,.6)); }
        .aitshd-rc-guide:hover {
            border-color: var(--aits-blue-line);
            transform: translateY(-3px);
            box-shadow:
                0 18px 30px -18px rgba(54,128,237,.42),
                0 2px 4px rgba(15,23,42,.04);
        }
        .aitshd-rc-guide:hover::before { opacity: 1; }
        .aitshd-rc-guide-ico {
            width: 44px; height: 44px; border-radius: 12px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5);
            transition: transform .2s, box-shadow .2s;
        }
        body.theme-dark .aitshd-rc-guide-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
        .aitshd-rc-guide[data-tone="emerald"] .aitshd-rc-guide-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-rc-guide[data-tone="amber"]   .aitshd-rc-guide-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-rc-guide[data-tone="violet"]  .aitshd-rc-guide-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-rc-guide[data-tone="rose"]    .aitshd-rc-guide-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-rc-guide[data-tone="pink"]    .aitshd-rc-guide-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-rc-guide[data-tone="cyan"]    .aitshd-rc-guide-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-rc-guide:hover .aitshd-rc-guide-ico {
            transform: scale(1.06);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 20px -10px currentColor;
        }
        .aitshd-rc-guide-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
        .aitshd-rc-guide-title {
            font-size: 13.5px; font-weight: 800;
            color: var(--aits-ink);
            line-height: 1.3;
            letter-spacing: -0.01em;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-rc-guide:hover .aitshd-rc-guide-title { color: var(--aits-blue-dark); }
        body.theme-dark .aitshd-rc-guide:hover .aitshd-rc-guide-title { color: var(--aits-blue-light); }
        .aitshd-rc-guide-desc {
            font-size: 11.5px; font-weight: 500;
            color: var(--aits-mut);
            margin-top: 3px;
            line-height: 1.4;
            display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* ═══════ Assurance rail (trust footer) — 2026-08-02 premium rebuild ═══════
           Third and last of the trust-band rebuilds (after Deals and Discover),
           in Resources' blue→indigo identity. The bug all three shipped with:
           the title and desc were inline spans inside an inline body whose only
           rule was min-width, so each promise rendered as one run-on paragraph
           ("100% Free Resources No paywalls, ever") and the desc's margin-top
           was a no-op. Cards also retire the hairline dividers, and with them
           the orphan divider that hung in space on a wrapped row. */
        .aitshd-rc-trust {
            position: relative;
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 10px;
            padding: 16px 20px 20px;
            border-top: 1px solid var(--aits-line);
            background:
                radial-gradient(120% 180% at 0% 0%, var(--rc-a1-soft), transparent 58%),
                radial-gradient(120% 180% at 100% 100%, var(--rc-a2-soft), transparent 58%),
                linear-gradient(0deg, var(--aits-surface-2), var(--aits-card));
        }
        /* Brand hairline riding the band's top edge — blue→indigo, faded at both ends. */
        .aitshd-rc-trust::before {
            content: '';
            position: absolute; left: 0; right: 0; top: -1px; height: 1px;
            background: linear-gradient(90deg, transparent, var(--rc-a1) 20%, var(--rc-a2) 80%, transparent);
            opacity: .5;
            pointer-events: none;
        }

        .aitshd-rc-trust-item {
            position: relative;
            display: flex; align-items: flex-start; gap: 11px;
            min-width: 0;
            padding: 12px 13px 13px;
            border-radius: 14px;
            border: 1px solid var(--aits-line);
            background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
            overflow: hidden;
            transition: transform .26s var(--ease,ease), border-color .2s var(--ease,ease),
                        box-shadow .26s var(--ease,ease);
        }
        body.theme-dark .aitshd-rc-trust-item {
            background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
        }
        .aitshd-rc-trust-item::after {
            content: '';
            position: absolute; left: 0; right: 0; top: 0; height: 2px;
            background: var(--rc-grad);
            transform: scaleX(0); transform-origin: left center;
            opacity: 0;
            transition: transform .38s var(--ease,ease), opacity .22s var(--ease,ease);
            pointer-events: none;
        }

        .aitshd-rc-trust-ico {
            position: relative;
            width: 40px; height: 40px; border-radius: 13px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            overflow: hidden;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5);
            transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .28s var(--ease,ease);
        }
        .aitshd-rc-trust-ico > svg { position: relative; z-index: 1; }
        body.theme-dark .aitshd-rc-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
        .aitshd-rc-trust-ico::after {
            content: '';
            position: absolute; inset: -25%;
            background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%);
            transform: translateX(-130%);
            opacity: 0;
            pointer-events: none;
        }
        body.theme-dark .aitshd-rc-trust-ico::after {
            background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.2) 50%, transparent 62%);
        }
        .aitshd-rc-trust-item[data-tone="emerald"] .aitshd-rc-trust-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-rc-trust-item[data-tone="amber"]   .aitshd-rc-trust-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-rc-trust-item[data-tone="rose"]    .aitshd-rc-trust-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-rc-trust-item[data-tone="violet"]  .aitshd-rc-trust-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-rc-trust-item[data-tone="pink"]    .aitshd-rc-trust-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-rc-trust-item[data-tone="cyan"]    .aitshd-rc-trust-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-rc-trust-item[data-tone="indigo"]  .aitshd-rc-trust-ico { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-rc-trust-item[data-tone="slate"]   .aitshd-rc-trust-ico { background: var(--tint-slate-bg);   color: var(--tint-slate-ink); }

        /* Inline body → column, so title and desc stop sharing a line. */
        .aitshd-rc-trust-body {
            min-width: 0;
            display: flex; flex-direction: column;
            padding-top: 1px;
        }
        .aitshd-rc-trust-title {
            display: block;
            font-size: 13px; font-weight: 800;
            color: var(--aits-ink);
            line-height: 1.25;
            letter-spacing: -0.01em;
            white-space: normal;
            transition: color .18s var(--ease,ease);
        }
        .aitshd-rc-trust-desc {
            display: block;
            font-size: 11.5px; font-weight: 500;
            color: var(--aits-mut);
            line-height: 1.45;
            margin-top: 4px;
            white-space: normal;
            overflow-wrap: break-word;
        }

        @media (hover: hover) {
            .aitshd-rc-trust-item:hover {
                transform: translateY(-3px);
                border-color: var(--aits-blue-line);
                box-shadow: 0 20px 34px -24px rgba(15,23,42,.45), inset 0 1px 0 rgba(255,255,255,.7);
            }
            body.theme-dark .aitshd-rc-trust-item:hover {
                box-shadow: 0 20px 34px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
            }
            .aitshd-rc-trust-item:hover::after { transform: scaleX(1); opacity: 1; }
            .aitshd-rc-trust-item:hover .aitshd-rc-trust-ico {
                transform: translateY(-2px) scale(1.07) rotate(-4deg);
                /* currentColor is the tone ink, so each medallion glows its own hue. */
                box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 12px 20px -12px currentColor;
            }
            body.theme-dark .aitshd-rc-trust-item:hover .aitshd-rc-trust-ico {
                box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 22px -12px currentColor;
            }
            .aitshd-rc-trust-item:hover .aitshd-rc-trust-ico::after {
                opacity: 1;
                transform: translateX(130%);
                transition: transform .7s var(--ease,ease), opacity .2s var(--ease,ease);
            }
            .aitshd-rc-trust-item:hover .aitshd-rc-trust-title { color: var(--aits-blue-dark); }
            body.theme-dark .aitshd-rc-trust-item:hover .aitshd-rc-trust-title { color: var(--aits-blue-light); }
        }

        /* Staggered rise as the panel opens, so the eye finishes on the
           reassurance instead of arriving to a static footer. */
        @keyframes aitshdRcTrustIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: none; }
        }
        .aitshd[data-mega-resources-open="1"] .aitshd-rc-trust-item {
            animation: aitshdRcTrustIn .46s var(--ease,ease) backwards;
        }
        .aitshd[data-mega-resources-open="1"] .aitshd-rc-trust-item:nth-child(1) { animation-delay: .05s; }
        .aitshd[data-mega-resources-open="1"] .aitshd-rc-trust-item:nth-child(2) { animation-delay: .10s; }
        .aitshd[data-mega-resources-open="1"] .aitshd-rc-trust-item:nth-child(3) { animation-delay: .15s; }
        .aitshd[data-mega-resources-open="1"] .aitshd-rc-trust-item:nth-child(4) { animation-delay: .20s; }
        .aitshd[data-mega-resources-open="1"] .aitshd-rc-trust-item:nth-child(5) { animation-delay: .25s; }

        /* Responsive ladder 5 → 3+2 → 2 → 1. Five promises do not halve, so the
           3+2 step runs on a 6-track grid (span 2 ×3, then span 3 ×2) and the
           trailing pair splits its row evenly instead of hanging left; the
           quantity guards keep that to the exact-5 case. 1023 and below the
           burger owns the header, so those steps are defensive only. */
        @media (max-width: 1280px) {
            .aitshd-rc-trust { grid-template-columns: repeat(6, minmax(0, 1fr)); }
            .aitshd-rc-trust-item { grid-column: span 2; }
            .aitshd-rc-trust-item:nth-child(4):nth-last-child(2),
            .aitshd-rc-trust-item:nth-child(5):nth-last-child(1) { grid-column: span 3; }
        }
        @media (max-width: 1023px) {
            .aitshd-rc-trust {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                padding: 14px 16px 18px;
            }
            .aitshd-rc-trust-item,
            .aitshd-rc-trust-item:nth-child(4):nth-last-child(2),
            .aitshd-rc-trust-item:nth-child(5):nth-last-child(1) { grid-column: auto; }
        }
        @media (max-width: 720px) {
            .aitshd-rc-trust { grid-template-columns: 1fr; }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-rc-trust-item,
            .aitshd-rc-trust-item::after,
            .aitshd-rc-trust-ico,
            .aitshd-rc-trust-ico::after,
            .aitshd-rc-trust-title { transition: none; }
            .aitshd[data-mega-resources-open="1"] .aitshd-rc-trust-item { animation: none; }
            .aitshd-rc-trust-item:hover { transform: none; }
            .aitshd-rc-trust-item:hover .aitshd-rc-trust-ico { transform: none; }
        }

        /* ═══════ Mobile drawer — Resources section ═══════
           On-brand blue rebuild for phones/tablets (<1024px, where the mega
           is unreachable): newsletter card, 2-col chip grid, Popular list,
           Featured Guides. Opt-in via .aitshd-drawer-res-* so nothing leaks. */
        .aitshd-drawer-res-hero {
            display: block;
            position: relative;
            margin: 6px 0 12px;
            padding: 16px 16px 18px;
            border-radius: 18px;
            color: #fff !important;
            text-decoration: none;
            background:
                radial-gradient(100% 90% at 100% 0%, rgba(96,164,245,.42) 0%, transparent 55%),
                radial-gradient(90% 120% at 0% 100%, rgba(129,140,248,.36) 0%, transparent 55%),
                linear-gradient(140deg, #0E1B3A, #122152 52%, #0B1226);
            box-shadow: 0 18px 34px -20px rgba(15,23,42,.55), inset 0 1px 0 rgba(255,255,255,.10);
            overflow: hidden;
        }
        .aitshd-drawer-res-hero::before {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(rgba(255,255,255,.20) 1px, transparent 1px);
            background-size: 12px 12px;
            opacity: .06; pointer-events: none;
        }
        .aitshd-drawer-res-hero-pill {
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 9.5px; font-weight: 800;
            letter-spacing: .16em; text-transform: uppercase;
            color: #BFE0FF;
            padding: 5px 9px;
            border-radius: 999px;
            border: 1px solid rgba(147,190,255,.32);
            background: rgba(147,190,255,.12);
            position: relative; z-index: 1;
        }
        .aitshd-drawer-res-hero-pill svg { color: #FCD34D; }
        .aitshd-drawer-res-hero-title {
            display: block; position: relative; z-index: 1;
            margin-top: 10px;
            font-size: 16px; font-weight: 800; letter-spacing: -0.015em;
            color: #fff;
        }
        .aitshd-drawer-res-hero-sub {
            display: block; position: relative; z-index: 1;
            margin-top: 4px;
            font-size: 12.5px; font-weight: 500;
            color: rgba(255,255,255,.78);
            line-height: 1.45;
        }
        .aitshd-drawer-res-hero-form {
            display: flex; flex-direction: column; gap: 8px;
            margin-top: 12px;
            position: relative; z-index: 1;
        }
        .aitshd-drawer-res-hero-form input {
            width: 100%; height: 38px;
            padding: 0 12px;
            border-radius: 10px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.15);
            color: #fff;
            font-family: inherit; font-size: 12.5px; font-weight: 500;
            appearance: none;
        }
        .aitshd-drawer-res-hero-form input::placeholder { color: rgba(255,255,255,.52); }
        .aitshd-drawer-res-hero-form input:focus {
            outline: none;
            border-color: rgba(96,164,245,.65);
            box-shadow: 0 0 0 3px rgba(54,128,237,.22);
        }
        .aitshd-drawer-res-hero-form button {
            height: 40px; padding: 0 16px;
            border: 0; border-radius: 10px;
            background: linear-gradient(135deg, #3680ED, #4F46E5);
            color: #fff;
            font-family: inherit; font-size: 12.5px; font-weight: 800;
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            cursor: pointer;
            box-shadow: 0 10px 22px -10px rgba(54,128,237,.7);
        }
        .aitshd-drawer-res-hero-form button:active { transform: translateY(1px); }
        .aitshd-drawer-res-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin: 8px 0 4px;
        }
        .aitshd-drawer-res-chip {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            color: var(--aits-ink);
            text-decoration: none;
            font-size: 12.5px; font-weight: 600;
            min-width: 0;
            transition: border-color .18s, background-color .18s, transform .18s;
        }
        .aitshd-drawer-res-chip:hover,
        .aitshd-drawer-res-chip:active {
            border-color: var(--aits-blue-line);
            background: var(--aits-blue-tint-2);
            transform: translateY(-1px);
        }
        .aitshd-drawer-res-chip-ico {
            width: 32px; height: 32px; border-radius: 9px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
        }
        .aitshd-drawer-res-chip[data-tone="emerald"] .aitshd-drawer-res-chip-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-drawer-res-chip[data-tone="violet"]  .aitshd-drawer-res-chip-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-drawer-res-chip[data-tone="amber"]   .aitshd-drawer-res-chip-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-drawer-res-chip[data-tone="rose"]    .aitshd-drawer-res-chip-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-drawer-res-chip[data-tone="cyan"]    .aitshd-drawer-res-chip-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-drawer-res-chip[data-tone="pink"]    .aitshd-drawer-res-chip-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-drawer-res-chip-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
        .aitshd-drawer-res-chip-title {
            font-size: 13px; font-weight: 700; color: var(--aits-ink);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-drawer-res-chip-sub {
            font-size: 10.5px; font-weight: 600;
            color: var(--aits-mut);
            margin-top: 2px;
            letter-spacing: .02em;
        }

        /* ── Drawer assurance rail — the mega's trust band restacked for touch.
           The mega never renders under 1024px, so mobile and tablet had none of
           these promises. Deliberately 1-up at every width: .aitshd-drawer-panel
           caps at 390px from a 430px viewport up, so a viewport-driven 2-up
           would leave each card ~170px and wrap the descs to three lines. The
           --rc-* tokens live on the mega panel, so the gradient is spelled out
           here the same way the drawer hero's brand CTA is. */
        .aitshd-drawer-res-trust {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            margin: 8px 0 4px;
        }
        .aitshd-drawer-res-trust-item {
            position: relative;
            display: flex; align-items: flex-start; gap: 10px;
            min-width: 0;
            padding: 10px 12px 11px;
            border-radius: 12px;
            border: 1px solid var(--aits-line);
            background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2));
            overflow: hidden;
            transition: border-color .18s var(--ease,ease), transform .18s var(--ease,ease);
        }
        body.theme-dark .aitshd-drawer-res-trust-item {
            background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
        }
        .aitshd-drawer-res-trust-item::after {
            content: '';
            position: absolute; left: 0; right: 0; top: 0; height: 2px;
            background: linear-gradient(90deg, #3680ED, #6366F1);
            transform: scaleX(0); transform-origin: left center;
            transition: transform .3s var(--ease,ease);
            pointer-events: none;
        }
        body.theme-dark .aitshd-drawer-res-trust-item::after {
            background: linear-gradient(90deg, #60A4F5, #818CF8);
        }
        .aitshd-drawer-res-trust-item:active,
        .aitshd-drawer-res-trust-item:hover {
            border-color: var(--aits-blue-line);
            transform: translateY(-1px);
        }
        .aitshd-drawer-res-trust-item:active::after,
        .aitshd-drawer-res-trust-item:hover::after { transform: scaleX(1); }
        .aitshd-drawer-res-trust-ico {
            width: 30px; height: 30px; border-radius: 9px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
            transition: transform .24s cubic-bezier(.34,1.56,.64,1);
        }
        body.theme-dark .aitshd-drawer-res-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
        .aitshd-drawer-res-trust-item:active .aitshd-drawer-res-trust-ico,
        .aitshd-drawer-res-trust-item:hover .aitshd-drawer-res-trust-ico { transform: scale(1.08); }
        .aitshd-drawer-res-trust-item[data-tone="emerald"] .aitshd-drawer-res-trust-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-drawer-res-trust-item[data-tone="amber"]   .aitshd-drawer-res-trust-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-drawer-res-trust-item[data-tone="rose"]    .aitshd-drawer-res-trust-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-drawer-res-trust-item[data-tone="violet"]  .aitshd-drawer-res-trust-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-drawer-res-trust-item[data-tone="pink"]    .aitshd-drawer-res-trust-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-drawer-res-trust-item[data-tone="cyan"]    .aitshd-drawer-res-trust-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-drawer-res-trust-item[data-tone="indigo"]  .aitshd-drawer-res-trust-ico { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-drawer-res-trust-item[data-tone="slate"]   .aitshd-drawer-res-trust-ico { background: var(--tint-slate-bg);   color: var(--tint-slate-ink); }
        .aitshd-drawer-res-trust-copy { min-width: 0; display: flex; flex-direction: column; }
        .aitshd-drawer-res-trust-title {
            display: block;
            font-size: 12.5px; font-weight: 800;
            color: var(--aits-ink);
            line-height: 1.25; letter-spacing: -0.01em;
            white-space: normal;
        }
        .aitshd-drawer-res-trust-desc {
            display: block;
            font-size: 11px; font-weight: 500;
            color: var(--aits-mut);
            line-height: 1.4;
            margin-top: 3px;
            white-space: normal;
            overflow-wrap: break-word;
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-drawer-res-trust-item,
            .aitshd-drawer-res-trust-item::after,
            .aitshd-drawer-res-trust-ico { transition: none; }
            .aitshd-drawer-res-trust-item:active,
            .aitshd-drawer-res-trust-item:hover { transform: none; }
        }

        /* Full-width footer bar: trust strip */
        .aitshd-mega-trust {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            padding: 16px 24px 20px;
            border-top: 1px solid var(--aits-line);
            background: linear-gradient(0deg, var(--aits-surface-2), var(--aits-card));
        }
        .aitshd-mega-trust-item {
            display: flex; align-items: center; gap: 12px;
            font-size: 13px;
        }
        .aitshd-mega-trust-ico {
            width: 36px; height: 36px; border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-emerald-bg); color: var(--tint-emerald-ink);
            flex: none;
        }
        .aitshd-mega-trust-item:nth-child(2) .aitshd-mega-trust-ico { background: var(--tint-blue-bg);   color: var(--tint-blue-ink); }
        .aitshd-mega-trust-item:nth-child(3) .aitshd-mega-trust-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); }
        .aitshd-mega-trust-item:nth-child(4) .aitshd-mega-trust-ico { background: var(--tint-amber-bg);  color: var(--tint-amber-ink); }
        .aitshd-mega-trust-item strong {
            color: var(--aits-ink); font-weight: 700; display: block; font-size: 13.5px;
            line-height: 1.2;
        }
        .aitshd-mega-trust-item span {
            color: var(--aits-mut); font-size: 12px;
        }

        /* Category-panel toggles (drives per-cat subcol swap) */
        .aitshd-mega-panel-cat { display: none; }
        .aitshd-mega-panel-cat.active { display: block; }
        .aitshd-mega-panel-cat-head {
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            padding-bottom: 12px; margin-bottom: 12px;
            border-bottom: 1px dashed var(--aits-line);
        }
        .aitshd-mega-panel-cat-head h3 {
            margin: 0; font-size: 14px; font-weight: 700;
            color: var(--aits-ink);
            text-transform: uppercase; letter-spacing: .1em;
        }
        .aitshd-mega-badge {
            font-size: 11px; padding: 3px 9px; border-radius: 999px;
            background: var(--aits-blue-tint); color: var(--aits-blue-dark);
            font-weight: 700;
            letter-spacing: .04em;
        }
        .aitshd-mega-panel-cat-empty {
            padding: 14px 12px;
            color: var(--aits-mut); font-size: 13.5px;
            border-radius: 12px; background: var(--aits-surface-2);
            border: 1px dashed var(--aits-line);
        }

        /* ────────────────────────────────────────────────────────────────
           BLOG MEGA — editorial 3-column dropdown
           ──────────────────────────────────────────────────────────────── */
        .aitshd-mega-blog {
            display: none;
            position: absolute;
            top: 100%; left: 50%;
            transform: translate(-50%, 10px);
            width: min(1440px, calc(100vw - 32px));
            margin-top: 0;
            background: var(--aits-card);
            border: 1px solid var(--aits-line);
            border-radius: var(--hd-r-lg);
            box-shadow: var(--hd-pop);
            overflow: hidden;
            z-index: 65;
            opacity: 0;
            pointer-events: none;
            transition: opacity .22s var(--ease,ease), transform .22s var(--ease,ease);
        }
        .aitshd[data-mega-blog-open="1"] .aitshd-mega-blog {
            display: block;
            opacity: 1;
            transform: translate(-50%, 12px);
            pointer-events: auto;
        }
        /* Editorial 4-col grid — matches AI Tools mega grammar */
        .aitshd-bmg-grid {
            display: grid;
            grid-template-columns: 260px minmax(0,1fr) minmax(0,1fr) 360px;
            gap: 0;
            align-items: stretch;
        }
        @media (max-width: 1240px) {
            .aitshd-bmg-grid { grid-template-columns: 240px minmax(0,1fr) minmax(0,1fr) 340px; }
        }
        @media (max-width: 1080px) {
            .aitshd-bmg-grid { grid-template-columns: 240px minmax(0,1fr) 320px; }
            .aitshd-bmg-col-popular { display: none; }
        }
        .aitshd-bmg-col {
            padding: 26px 22px 22px;
            border-right: 1px solid var(--aits-line);
            min-width: 0;
            display: flex; flex-direction: column;
        }
        .aitshd-bmg-col:last-child { border-right: 0; }
        .aitshd-bmg-col-browse { background: var(--aits-card); }
        .aitshd-bmg-col-featured {
            padding: 24px 24px 22px 4px;
            gap: 14px;
            border-right: 0;
        }
        .aitshd-bmg-colh {
            font-size: 11px; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
            color: var(--aits-blue);
            padding: 0 8px 12px;
        }
        .aitshd-bmg-h {
            display: flex; align-items: center; gap: 10px;
            font-size: 11px; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
            color: var(--aits-blue);
            margin: 0 0 14px;
        }
        .aitshd-bmg-h-ico {
            width: 24px; height: 24px; border-radius: 8px;
            background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark));
            color: #fff;
            display: grid; place-items: center;
            flex: 0 0 auto;
        }
        .aitshd-bmg-h-ico svg { width: 12px; height: 12px; }
        .aitshd-bmg-cats { display: flex; flex-direction: column; gap: 3px; }
        .aitshd-bmg-cat {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 12px;
            border-radius: 12px;
            text-decoration: none;
            color: var(--aits-ink);
            font-size: 13.5px; font-weight: 500;
            transition: all .16s var(--ease,ease);
            cursor: pointer;
        }
        .aitshd-bmg-cat:hover, .aitshd-bmg-cat.active {
            background: var(--aits-blue-tint);
            color: var(--aits-blue-dark);
        }
        .aitshd-bmg-cat-ico {
            width: 32px; height: 32px; border-radius: 10px;
            background: var(--tint-blue-bg);
            color: var(--tint-blue-ink);
            display: grid; place-items: center;
            flex: 0 0 auto;
            transition: all .16s var(--ease,ease);
        }
        .aitshd-bmg-cat[data-tone="indigo"]  .aitshd-bmg-cat-ico { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-bmg-cat[data-tone="violet"]  .aitshd-bmg-cat-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-bmg-cat[data-tone="emerald"] .aitshd-bmg-cat-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-bmg-cat[data-tone="amber"]   .aitshd-bmg-cat-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-bmg-cat[data-tone="rose"]    .aitshd-bmg-cat-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-bmg-cat[data-tone="cyan"]    .aitshd-bmg-cat-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-bmg-cat[data-tone="pink"]    .aitshd-bmg-cat-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-bmg-cat[data-tone="slate"]   .aitshd-bmg-cat-ico { background: var(--tint-slate-bg);   color: var(--tint-slate-ink); }
        .aitshd-bmg-cat-name {
            flex: 1; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-bmg-cat-count {
            font-size: 11.5px; font-weight: 600;
            color: var(--aits-mut);
            background: var(--aits-surface-3);
            padding: 3px 8px;
            border-radius: 999px;
            transition: all .16s;
        }
        .aitshd-bmg-cat.active .aitshd-bmg-cat-count,
        .aitshd-bmg-cat:hover .aitshd-bmg-cat-count {
            background: var(--aits-card);
            color: var(--aits-blue-dark);
        }
        .aitshd-bmg-cat-arrow {
            opacity: 0; transform: translateX(-4px);
            transition: all .16s var(--ease,ease);
            color: var(--aits-blue);
            display: inline-flex;
        }
        .aitshd-bmg-cat:hover .aitshd-bmg-cat-arrow,
        .aitshd-bmg-cat.active .aitshd-bmg-cat-arrow { opacity: 1; transform: translateX(0); }
        .aitshd-bmg-viewall {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 14px;
            margin-top: 8px;
            border-radius: 12px;
            border: 1px dashed var(--aits-blue-line);
            background: var(--aits-blue-tint-2);
            color: var(--aits-blue-dark);
            font-weight: 600; font-size: 12.5px;
            text-decoration: none;
            transition: all .16s;
        }
        .aitshd-bmg-viewall:hover {
            background: var(--aits-blue); color: #fff !important;
            border-style: solid; border-color: var(--aits-blue);
        }
        .aitshd-bmg-panel { display: none; }
        .aitshd-bmg-panel[data-active="1"] { display: block; }
        .aitshd-bmg-posts { display: flex; flex-direction: column; gap: 4px; }
        .aitshd-bmg-post {
            display: flex; align-items: center; gap: 10px;
            padding: 10px;
            border-radius: 12px;
            text-decoration: none;
            color: var(--aits-ink);
            transition: background-color .12s;
        }
        .aitshd-bmg-post:hover { background: var(--aits-surface-2); }
        .aitshd-bmg-post-thumb {
            width: 44px; height: 44px; border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--aits-blue-tint-2); color: var(--aits-blue-dark);
            font-weight: 700; font-size: 14px;
            flex: 0 0 auto;
            overflow: hidden;
        }
        .aitshd-bmg-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .aitshd-bmg-post-body { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 3px; }
        .aitshd-bmg-post-title {
            font-size: 13.5px; font-weight: 600;
            color: var(--aits-ink);
            line-height: 1.3;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-bmg-post-meta { font-size: 11.5px; color: var(--aits-mut); display: inline-flex; align-items: center; gap: 4px; }
        .aitshd-bmg-post-arrow { color: var(--aits-mut); flex: none; }
        .aitshd-bmg-post:hover .aitshd-bmg-post-arrow { color: var(--aits-blue); }
        .aitshd-bmg-viewpop {
            display: inline-flex; align-items: center; gap: 4px;
            margin-top: 8px;
            padding: 8px 10px;
            border-radius: 8px;
            font-size: 12.5px; font-weight: 600;
            color: var(--aits-blue-dark);
            text-decoration: none;
        }
        .aitshd-bmg-viewpop:hover { background: var(--aits-blue-tint-2); }
        .aitshd-bmg-empty {
            padding: 30px 16px;
            text-align: center;
            font-size: 13px; color: var(--aits-mut);
            border-radius: 14px; background: var(--aits-surface-2);
        }
        .aitshd-bmg-empty a { color: var(--aits-blue-dark); font-weight: 600; }

        .aitshd-bmg-featured {
            position: relative;
            display: block;
            border-radius: 20px;
            overflow: hidden;
            padding: 22px;
            color: #fff !important;
            text-decoration: none !important;
            min-height: 220px;
            background:
                radial-gradient(circle at 100% 0%, rgba(96,164,245,.55) 0%, transparent 55%),
                radial-gradient(circle at 0% 100%, rgba(126,34,206,.35) 0%, transparent 55%),
                linear-gradient(135deg, #0F172A, #1E1B4B 70%, #0B1120);
            box-shadow: 0 20px 40px -20px rgba(15,23,42,.5), inset 0 1px 0 rgba(255,255,255,.08);
        }
        .aitshd-bmg-featured.has-media {
            background:
                linear-gradient(135deg, rgba(15,23,42,.72), rgba(30,27,75,.7)),
                var(--aitshd-bmg-feat-img) center/cover no-repeat;
        }
        .aitshd-bmg-featured-mark {
            position: absolute; right: -12px; top: -12px;
            width: 92px; height: 92px;
            display: grid; place-items: center;
            border-radius: 999px;
            background: radial-gradient(circle at 30% 30%, rgba(147,197,253,.55) 0%, rgba(59,130,246,.35) 40%, transparent 70%);
            font-size: 36px; font-weight: 900;
            letter-spacing: -0.02em;
            color: rgba(255,255,255,.4);
            pointer-events: none;
        }
        .aitshd-bmg-featured-pill {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 10.5px; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
            color: #FCD34D;
            padding: 5px 10px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.18);
            background: rgba(255,255,255,.04);
        }
        .aitshd-bmg-featured-title {
            display: block;
            font-size: 18px; font-weight: 800;
            line-height: 1.25; letter-spacing: -0.02em;
            margin: 14px 0 6px;
            color: #fff;
            max-width: 90%;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .aitshd-bmg-featured-sub {
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 12.5px; color: rgba(255,255,255,.72);
            line-height: 1.45;
            max-width: 92%;
        }
        .aitshd-bmg-featured-meta {
            margin-top: 14px;
            display: flex; flex-wrap: wrap; gap: 12px;
            font-size: 11.5px; color: rgba(255,255,255,.7);
        }
        .aitshd-bmg-featured-meta span { display: inline-flex; align-items: center; gap: 5px; }

        .aitshd-bmg-values {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 14px;
        }
        .aitshd-bmg-value {
            padding: 14px;
            border-radius: 14px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
        }
        .aitshd-bmg-value-ico {
            width: 34px; height: 34px;
            border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--aits-blue-tint); color: var(--aits-blue-dark);
            margin-bottom: 10px;
        }
        .aitshd-bmg-value-title {
            font-size: 13px; font-weight: 700;
            color: var(--aits-ink);
            margin-bottom: 3px;
        }
        .aitshd-bmg-value-desc {
            font-size: 11.5px; color: var(--aits-mut);
            line-height: 1.4;
        }

        .aitshd-bmg-quick {
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid var(--aits-line);
            display: flex; flex-wrap: wrap; gap: 6px;
            align-items: center;
        }
        .aitshd-bmg-quick-label {
            font-size: 11px; font-weight: 700;
            text-transform: uppercase; letter-spacing: .14em;
            color: var(--aits-mut);
            margin-right: 4px;
        }
        .aitshd-bmg-chip {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 12px;
            border-radius: 999px;
            background: var(--aits-surface-2);
            border: 1px solid var(--aits-line);
            font-size: 12px; font-weight: 600;
            color: var(--aits-ink); text-decoration: none;
            transition: all .16s;
        }
        .aitshd-bmg-chip:hover {
            background: var(--aits-blue-tint-2);
            border-color: var(--aits-blue-line);
            color: var(--aits-blue-dark);
            transform: translateY(-1px);
        }
        .aitshd-bmg-chip svg { width: 13px; height: 13px; color: var(--aits-blue); }

        /* Rich item row shared by Browse / By Category / By Use Case columns */
        .aitshd-bmg-row {
            display: flex; align-items: center; gap: 12px;
            padding: 10px 12px;
            border-radius: 14px;
            text-decoration: none;
            color: var(--aits-ink-soft);
            font-size: 13.5px; font-weight: 500;
            transition: background-color .18s var(--ease,ease), color .18s;
            min-width: 0;
        }
        .aitshd-bmg-row.is-lg { padding: 12px; }
        .aitshd-bmg-row-ico {
            width: 40px; height: 40px; border-radius: 12px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--tint-blue-bg); color: var(--tint-blue-ink);
            flex: none;
            transition: transform .22s var(--ease,ease), box-shadow .22s var(--ease,ease);
        }
        .aitshd-bmg-row.is-lg .aitshd-bmg-row-ico { width: 44px; height: 44px; }
        .aitshd-bmg-row[data-tone="indigo"]  .aitshd-bmg-row-ico { background: var(--tint-indigo-bg);  color: var(--tint-indigo-ink); }
        .aitshd-bmg-row[data-tone="violet"]  .aitshd-bmg-row-ico { background: var(--tint-violet-bg);  color: var(--tint-violet-ink); }
        .aitshd-bmg-row[data-tone="emerald"] .aitshd-bmg-row-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); }
        .aitshd-bmg-row[data-tone="amber"]   .aitshd-bmg-row-ico { background: var(--tint-amber-bg);   color: var(--tint-amber-ink); }
        .aitshd-bmg-row[data-tone="rose"]    .aitshd-bmg-row-ico { background: var(--tint-rose-bg);    color: var(--tint-rose-ink); }
        .aitshd-bmg-row[data-tone="cyan"]    .aitshd-bmg-row-ico { background: var(--tint-cyan-bg);    color: var(--tint-cyan-ink); }
        .aitshd-bmg-row[data-tone="pink"]    .aitshd-bmg-row-ico { background: var(--tint-pink-bg);    color: var(--tint-pink-ink); }
        .aitshd-bmg-row[data-tone="slate"]   .aitshd-bmg-row-ico { background: var(--tint-slate-bg);   color: var(--tint-slate-ink); }
        .aitshd-bmg-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
        .aitshd-bmg-row-title {
            font-weight: 600; color: var(--aits-ink);
            font-size: 14.5px;
            line-height: 1.25;
            letter-spacing: -0.01em;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            display: inline-flex; align-items: center; gap: 6px;
        }
        .aitshd-bmg-row.is-lg .aitshd-bmg-row-title { font-size: 15px; font-weight: 700; }
        .aitshd-bmg-row-desc {
            font-size: 12.5px; font-weight: 400;
            color: var(--aits-mut);
            margin-top: 2px;
            line-height: 1.35;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-bmg-row-count {
            flex: none;
            font-size: 11.5px; font-weight: 700;
            color: var(--aits-mut);
            padding: 4px 10px;
            border-radius: 999px;
            background: var(--aits-surface-3);
            border: 1px solid var(--aits-line);
            transition: all .18s var(--ease,ease);
        }
        .aitshd-bmg-row:hover {
            background: var(--aits-blue-tint-2);
            color: var(--aits-blue-dark);
        }
        .aitshd-bmg-row:hover .aitshd-bmg-row-ico { transform: scale(1.06); }
        .aitshd-bmg-row:hover .aitshd-bmg-row-title { color: var(--aits-blue-dark); }
        .aitshd-bmg-row:hover .aitshd-bmg-row-count {
            background: var(--aits-card);
            color: var(--aits-blue-dark);
            border-color: var(--aits-blue-line);
        }

        /* Popular posts column — vertical list of thumb + meta */
        .aitshd-bmg-col-popular-body { display: flex; flex-direction: column; gap: 4px; }
        .aitshd-bmg-col-popular .aitshd-bmg-post { padding: 10px 10px; border-radius: 14px; }
        .aitshd-bmg-view-all {
            display: inline-flex; align-items: center; gap: 6px;
            margin-top: 10px;
            padding: 12px;
            font-size: 13px; font-weight: 600;
            color: var(--aits-blue-dark);
            text-decoration: none;
            border-radius: 12px;
            transition: background-color .16s, padding .16s;
        }
        .aitshd-bmg-view-all:hover { background: var(--aits-blue-tint-2); padding-left: 16px; }
        .aitshd-bmg-view-all svg { transition: transform .18s; }
        .aitshd-bmg-view-all:hover svg { transform: translateX(3px); }

        /* Readers Also Liked strip beneath the blog mega */
        .aitshd-bmg-popular {
            border-top: 1px solid var(--aits-line);
            padding: 18px 24px 22px;
            background: linear-gradient(0deg, var(--aits-surface-2), var(--aits-card));
        }
        .aitshd-bmg-popular-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 4px 12px;
        }
        .aitshd-bmg-popular-head strong {
            font-size: 11px; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
            color: var(--aits-blue);
        }
        .aitshd-bmg-popular-head a {
            font-size: 13px; font-weight: 600;
            color: var(--aits-blue-dark);
            text-decoration: none;
            display: inline-flex; align-items: center; gap: 4px;
        }
        .aitshd-bmg-popular-head a svg { transition: transform .18s; }
        .aitshd-bmg-popular-head a:hover svg { transform: translateX(2px); }
        .aitshd-bmg-popular-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 10px;
        }
        .aitshd-bmg-pop-chip {
            display: flex; align-items: center; gap: 10px;
            padding: 12px 14px;
            border-radius: 14px;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            color: var(--aits-ink);
            text-decoration: none;
            font-size: 13px; font-weight: 600;
            transition: border-color .18s, background-color .18s, transform .18s, box-shadow .18s;
            min-width: 0;
        }
        .aitshd-bmg-pop-chip:hover {
            border-color: var(--aits-blue-line);
            background: var(--aits-blue-tint-2);
            color: var(--aits-blue-dark);
            transform: translateY(-1px);
            box-shadow: 0 10px 20px -14px rgba(54,128,237,.35);
        }
        .aitshd-bmg-pop-chip-thumb {
            width: 34px; height: 34px; border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            overflow: hidden;
            background: linear-gradient(135deg, var(--aits-blue-tint), var(--tint-violet-bg));
            color: var(--aits-blue-dark);
            font-weight: 800; font-size: 12px;
            flex: none;
        }
        .aitshd-bmg-pop-chip-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .aitshd-bmg-pop-chip-title {
            flex: 1; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            letter-spacing: -0.01em;
        }

        @media (max-width: 900px) {
            .aitshd-mega-blog { display: none !important; }
        }

        /* ────────────────────────────────────────────────────────────────
           Mobile drawer
           ──────────────────────────────────────────────────────────────── */
        .aitshd-drawer {
            position: fixed; inset: 0; z-index: 90;
            display: none;
        }
        .aitshd[data-drawer-open="1"] .aitshd-drawer { display: block; }
        .aitshd-drawer-backdrop {
            position: absolute; inset: 0;
            background: rgba(15,23,42,.55);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
        }
        body.theme-dark .aitshd-drawer-backdrop { background: rgba(0,0,0,.7); }
        .aitshd-drawer-panel {
            position: absolute; right: 0; top: 0; bottom: 0;
            width: min(390px, 92vw);
            background: var(--aits-card);
            background-image: var(--hd-wash);
            border-radius: 26px 0 0 26px;
            box-shadow: var(--hd-pop);
            display: flex; flex-direction: column;
            transform: translateX(100%);
            transition: transform .32s var(--ease,ease);
            /* Notched phones in landscape put the panel under the sensor bar. */
            padding-right: env(safe-area-inset-right);
        }
        .aitshd[data-drawer-open="1"] .aitshd-drawer-panel { transform: translateX(0); }
        @media (prefers-reduced-motion: reduce) { .aitshd-drawer-panel { transition: none; } }
        .aitshd-drawer-head {
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px;
            padding: 16px 18px 14px;
            border-bottom: 1px solid var(--aits-line-soft);
        }
        .aitshd-drawer-body {
            padding: 14px 14px 6px;
            overflow-y: auto; flex: 1;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        /* Account block — mirrors the desktop chip so a signed-in phone user
           gets the same entry points instead of a lone "My Account" button. */
        .aitshd-drawer-acct {
            display: flex; align-items: center; gap: 12px;
            padding: 13px; margin-bottom: 12px;
            border-radius: 16px;
            background: linear-gradient(135deg, var(--aits-blue-tint), var(--aits-blue-tint-2));
            border: 1px solid var(--aits-blue-line);
            text-decoration: none;
        }
        .aitshd-drawer-acct .aitshd-user-av { width: 42px; height: 42px; font-size: 15px; }
        .aitshd-drawer-acct-copy { min-width: 0; flex: 1; }
        .aitshd-drawer-acct-name {
            display: block;
            font-size: 14.5px; font-weight: 700; color: var(--aits-ink);
            letter-spacing: -.012em;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-drawer-acct-role {
            display: block;
            margin-top: 3px;
            font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
            color: var(--aits-blue);
        }
        body.theme-dark .aitshd-drawer-acct-role { color: var(--aits-blue-light); }
        .aitshd-drawer-acct-go { color: var(--aits-blue); flex: none; }

        /* Quick-actions strip — theme, language and notifications relocate
           here from the bar so the phone header keeps only three controls. */
        .aitshd-drawer-quick {
            /* auto-flow:column gives however many chips render an equal share
               without hard-coding a count (language can be switched off). */
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: 1fr;
            gap: 8px;
            margin-bottom: 4px;
        }
        .aitshd-drawer-quick > form { display: block; margin: 0; }
        .aitshd-drawer-qbtn {
            width: 100%;
            display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 6px;
            padding: 12px 6px;
            border-radius: 15px;
            background: var(--aits-surface-3);
            border: 1px solid var(--aits-line);
            color: var(--aits-ink-soft);
            font-size: 11.5px; font-weight: 700; letter-spacing: -.005em;
            cursor: pointer; text-decoration: none;
            transition: background-color .18s var(--ease,ease), border-color .18s var(--ease,ease), color .18s var(--ease,ease);
        }
        .aitshd-drawer-qbtn svg { color: var(--aits-blue); }
        .aitshd-drawer-qbtn img { border-radius: 3px; }
        .aitshd-drawer-qbtn:hover,
        .aitshd-drawer-qbtn:focus-visible {
            background: var(--aits-blue-tint-2);
            border-color: var(--aits-blue-line);
            color: var(--aits-blue-dark);
        }
        body.theme-dark .aitshd-drawer-qbtn:hover { color: var(--aits-blue-light); }
        .aitshd-drawer-qbtn:active { transform: scale(.96); }

        .aitshd-drawer-link {
            position: relative;
            display: flex; align-items: center; gap: 12px;
            padding: 10px 12px;
            border-radius: 14px;
            font-size: 14.5px; font-weight: 600;
            color: var(--aits-ink-soft);
            text-decoration: none;
            transition: background-color .16s var(--ease,ease), color .16s var(--ease,ease);
        }
        /* Brand accent bar echoes the desktop mega rows — a tiny vertical
           rule inside the row's own left padding, revealed on hover. Fully
           rounded so it never pokes through the row's own corner radius. */
        .aitshd-drawer-link::before {
            content: '';
            position: absolute; left: 3px; top: 50%;
            width: 3px; height: 58%;
            border-radius: 999px;
            background: var(--aits-blue);
            transform: translateY(-50%) scaleY(0);
            transition: transform .24s var(--ease,ease);
            pointer-events: none;
        }
        .aitshd-drawer-link:hover::before,
        .aitshd-drawer-link:focus-visible::before { transform: translateY(-50%) scaleY(1); }
        /* A SOLID tone fill with a white glyph, so a long list of links stays
           scannable — the same plate the homepage bands carry. The per-tone
           rules below therefore set the tile to `--tint-*-INK` (the saturated
           hue) rather than `--tint-*-BG` (the pale wash), and the glyph goes
           white instead of taking the hue. */
        .aitshd-drawer-link-ico {
            flex: none;
            width: 34px; height: 34px;
            border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            background-color: var(--tint-blue-ink);
            color: #fff;
            background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.26) 100%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 5px 12px -7px currentColor;
            transition: transform .22s var(--ease,ease), box-shadow .22s var(--ease,ease);
        }
        /* The dark `--tint-*-ink` twins are LIGHTENED so they can serve as ink
           on a dark surface — white on #93BEFF measures 2.0:1 — so the fill
           takes a scrim. .52, not the homepage's .45: these glyphs are 18px
           strokes in a 34px tile, and .45 left four of the nine tones short of
           AA (cyan 4.06:1). At .52 the worst is 4.94:1. */
        body.theme-dark .aitshd-drawer-link-ico {
            background-image:
                linear-gradient(0deg, rgba(9,18,33,.52), rgba(9,18,33,.52)),
                linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 100%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 5px 12px -7px rgba(0,0,0,.8);
        }
        /* `currentColor` is now WHITE, so it can no longer tint the glow the
           way it did on a tinted tile — the hue has to come from the fill. */
        .aitshd-drawer-link:hover .aitshd-drawer-link-ico {
            box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 9px 18px -9px rgba(15,23,42,.5);
        }
        body.theme-dark .aitshd-drawer-link:hover .aitshd-drawer-link-ico {
            box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 9px 18px -9px rgba(0,0,0,.9);
        }
        .aitshd-drawer-link-ico svg { width: 18px; height: 18px; }
        .aitshd-drawer-link-ico[data-tone="indigo"]  { background-color: var(--tint-indigo-ink); }
        .aitshd-drawer-link-ico[data-tone="violet"]  { background-color: var(--tint-violet-ink); }
        .aitshd-drawer-link-ico[data-tone="emerald"] { background-color: var(--tint-emerald-ink); }
        .aitshd-drawer-link-ico[data-tone="amber"]   { background-color: var(--tint-amber-ink); }
        .aitshd-drawer-link-ico[data-tone="rose"]    { background-color: var(--tint-rose-ink); }
        .aitshd-drawer-link-ico[data-tone="cyan"]    { background-color: var(--tint-cyan-ink); }
        .aitshd-drawer-link-ico[data-tone="pink"]    { background-color: var(--tint-pink-ink); }
        .aitshd-drawer-link-ico[data-tone="slate"]   { background-color: var(--tint-slate-ink); }
        .aitshd-drawer-link .aitshd-drawer-link-label { flex: 1; min-width: 0; }
        /* Two-line drawer row — used by the AI Tools quick-access lanes,
           which carry the same title + subtitle as the desktop mega. */
        .aitshd-drawer-sub {
            display: block;
            margin-top: 2px;
            font-size: 11.5px; font-weight: 500;
            color: var(--aits-mut);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aitshd-drawer-link:hover .aitshd-drawer-sub { color: var(--aits-mut); }
        .aitshd-drawer-link .aitshd-mega-badge-inline { flex: none; }

        /* Use-case chips — a two-up grid keeps eight lanes to four rows. */
        .aitshd-drawer-uc {
            display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
            padding: 0 2px;
        }
        .aitshd-drawer-ucchip {
            --uc-bg: var(--tint-blue-bg); --uc-ink: var(--tint-blue-ink);
            display: inline-flex; align-items: center; gap: 8px;
            min-width: 0;
            padding: 9px 10px;
            border-radius: 12px;
            border: 1px solid var(--aits-line);
            background: var(--aits-surface-3);
            font-size: 12.5px; font-weight: 600;
            color: var(--aits-ink-soft);
            text-decoration: none;
            transition: background-color .16s var(--ease,ease), border-color .16s var(--ease,ease), color .16s var(--ease,ease);
        }
        .aitshd-drawer-ucchip > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .aitshd-drawer-ucchip[data-tone="indigo"]  { --uc-bg: var(--tint-indigo-bg);  --uc-ink: var(--tint-indigo-ink); }
        .aitshd-drawer-ucchip[data-tone="violet"]  { --uc-bg: var(--tint-violet-bg);  --uc-ink: var(--tint-violet-ink); }
        .aitshd-drawer-ucchip[data-tone="emerald"] { --uc-bg: var(--tint-emerald-bg); --uc-ink: var(--tint-emerald-ink); }
        .aitshd-drawer-ucchip[data-tone="amber"]   { --uc-bg: var(--tint-amber-bg);   --uc-ink: var(--tint-amber-ink); }
        .aitshd-drawer-ucchip[data-tone="rose"]    { --uc-bg: var(--tint-rose-bg);    --uc-ink: var(--tint-rose-ink); }
        .aitshd-drawer-ucchip[data-tone="cyan"]    { --uc-bg: var(--tint-cyan-bg);    --uc-ink: var(--tint-cyan-ink); }
        .aitshd-drawer-ucchip[data-tone="pink"]    { --uc-bg: var(--tint-pink-bg);    --uc-ink: var(--tint-pink-ink); }
        .aitshd-drawer-ucchip-ico {
            width: 26px; height: 26px; border-radius: 8px; flex: none;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--uc-bg); color: var(--uc-ink);
            background-image: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);
            box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
            transition: transform .22s var(--ease,ease), box-shadow .22s var(--ease,ease);
        }
        body.theme-dark .aitshd-drawer-ucchip-ico {
            background-image: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,0) 65%);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
        }
        /* Provider chips carry a text mark ("OA", "DS") rather than an icon. */
        .aitshd-drawer-ucchip-ico.is-mark {
            font-size: 10.5px; font-weight: 800; letter-spacing: -.02em;
        }
        .aitshd-drawer-ucchip {
            transition: background-color .18s var(--ease,ease),
                        border-color .18s var(--ease,ease),
                        color .18s var(--ease,ease),
                        transform .18s var(--ease,ease),
                        box-shadow .22s var(--ease,ease);
        }
        .aitshd-drawer-ucchip:hover,
        .aitshd-drawer-ucchip:focus-visible {
            background: var(--aits-card);
            border-color: var(--aits-blue-line);
            color: var(--aits-blue-dark);
            transform: translateY(-1px);
            box-shadow: 0 10px 18px -12px rgba(54,128,237,.45);
        }
        .aitshd-drawer-ucchip:hover .aitshd-drawer-ucchip-ico,
        .aitshd-drawer-ucchip:focus-visible .aitshd-drawer-ucchip-ico {
            transform: scale(1.07) rotate(-4deg);
            box-shadow: inset 0 0 0 1px rgba(15,23,42,.05), 0 6px 14px -8px var(--uc-ink);
        }
        body.theme-dark .aitshd-drawer-ucchip:hover { color: var(--aits-blue-light); }
        body.theme-dark .aitshd-drawer-ucchip:hover,
        body.theme-dark .aitshd-drawer-ucchip:focus-visible { background: var(--aits-surface-3); }
        .aitshd-drawer-ucchip:active { transform: translateY(0) scale(.985); background: var(--aits-blue-tint); }
        @media (hover: none) {
            .aitshd-drawer-ucchip:hover { transform: none; box-shadow: none; }
            .aitshd-drawer-ucchip:hover .aitshd-drawer-ucchip-ico { transform: none; box-shadow: inset 0 0 0 1px rgba(15,23,42,.05); }
        }
        .aitshd-drawer-count {
            flex: none;
            padding: 3px 9px; border-radius: 999px;
            background: var(--aits-surface-3);
            border: 1px solid var(--aits-line);
            font-size: 11px; font-weight: 700;
            color: var(--aits-mut);
            font-variant-numeric: tabular-nums;
            transition: background-color .18s var(--ease,ease),
                        border-color .18s var(--ease,ease),
                        color .18s var(--ease,ease);
        }
        .aitshd-drawer-link:hover .aitshd-drawer-count {
            background: var(--aits-card);
            border-color: var(--aits-blue-line);
            color: var(--aits-blue-dark);
        }
        body.theme-dark .aitshd-drawer-link:hover .aitshd-drawer-count { color: var(--aits-blue-light); }
        .aitshd-drawer-link:hover,
        .aitshd-drawer-link:focus-visible {
            background: var(--aits-blue-tint-2);
            color: var(--aits-blue-dark);
        }
        .aitshd-drawer-link:hover .aitshd-drawer-link-ico { transform: scale(1.06); }
        body.theme-dark .aitshd-drawer-link:hover { color: var(--aits-blue-light); }
        .aitshd-drawer-link:active { background: var(--aits-blue-tint); }
        .aitshd-drawer-chev {
            flex: none; color: var(--aits-faint);
            display: inline-flex;
            opacity: 0; transform: translateX(-4px);
            transition: opacity .2s var(--ease,ease), transform .22s var(--ease,ease);
        }
        .aitshd-drawer-link:hover .aitshd-drawer-chev,
        .aitshd-drawer-link:focus-visible .aitshd-drawer-chev { opacity: 1; transform: none; }
        /* Touch has no hover — show the affordance permanently instead. */
        @media (hover: none) {
            .aitshd-drawer-chev { opacity: .5; transform: none; }
        }

        /* Language list — the bar's flag dropdown relocates here on mobile. */
        .aitshd-drawer-langs {
            display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
        }
        .aitshd-drawer-lang {
            display: inline-flex; align-items: center; gap: 9px;
            padding: 9px 11px;
            border-radius: 12px;
            border: 1px solid var(--aits-line);
            background: var(--aits-surface-3);
            font-size: 13px; font-weight: 600;
            color: var(--aits-ink-soft);
            text-decoration: none;
            min-width: 0;
            transition: background-color .16s var(--ease,ease), border-color .16s var(--ease,ease), color .16s var(--ease,ease);
        }
        .aitshd-drawer-lang span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .aitshd-drawer-lang img { border-radius: 3px; flex: none; }
        .aitshd-drawer-lang:hover {
            background: var(--aits-blue-tint-2);
            border-color: var(--aits-blue-line);
            color: var(--aits-blue-dark);
        }
        .aitshd-drawer-lang.is-current {
            background: var(--aits-blue-tint);
            border-color: var(--aits-blue-line);
            color: var(--aits-blue-dark);
        }
        body.theme-dark .aitshd-drawer-lang:hover,
        body.theme-dark .aitshd-drawer-lang.is-current { color: var(--aits-blue-light); }
        .aitshd-drawer-section {
            display: flex; align-items: center; gap: 10px;
            margin: 18px 6px 8px;
            font-size: 10.5px; text-transform: uppercase;
            letter-spacing: .16em; color: var(--aits-blue);
            font-weight: 800;
            white-space: nowrap;
        }
        body.theme-dark .aitshd-drawer-section { color: var(--aits-blue-light); }
        /* Rule that runs out from the label to the panel edge. */
        .aitshd-drawer-section::after {
            content: ''; flex: 1; height: 1px;
            background: linear-gradient(90deg, var(--aits-blue-line), transparent);
        }
        .aitshd-drawer-cta {
            display: flex; gap: 8px;
            padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
            border-top: 1px solid var(--aits-line-soft);
            background: var(--aits-card);
        }
        .aitshd-drawer-cta > * { flex: 1; justify-content: center; }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-drawer-link, .aitshd-drawer-link-ico, .aitshd-drawer-qbtn { transition: none; }
            .aitshd-drawer-link:hover .aitshd-drawer-link-ico, .aitshd-drawer-qbtn:active { transform: none; }
        }

        /* Hosted search-box livewire wrapper — keep the internal icon hidden so
           only the pill trigger is visible; the ezsx overlay is what actually opens. */
        .aitshd-search-host { display: none !important; }
        .aitshd-search-host .btn.btn-icon {
            width: 42px; height: 42px; border-radius: 999px !important;
            background: var(--aits-surface-3); border: 1px solid var(--aits-line);
            color: var(--aits-ink-soft);
        }

        /* Print/reset */
        @media print { .aitshd { display: none; } }

        /* Dark-mode surface polish */
        body.theme-dark .aitshd-mega-panel,
        body.theme-dark .aitshd-mega-blog { background: var(--aits-card); }
        body.theme-dark .aitshd-bmg-post-thumb {
            background: linear-gradient(135deg, var(--aits-surface-3), var(--aits-bg-deep));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
        }
        body.theme-dark .aitshd-cta-outline { background: var(--aits-surface-2); }

        /* ═════════════════════════════════════════════════════════════════
           AI TOOLS mega — bespoke premium reskin
           -----------------------------------------------------------------
           Scoped to .aitshd-mega-panel-aitools only, so the sibling "Tools"
           panel and every other mega keep their current design. Zero markup
           changes — the reskin runs entirely on CSS overrides that transform
           the four generic columns into four distinctly-styled zones:
             1. BROWSE     → glass "quick launch" pill tiles
             2. BY CATEGORY→ two-column capability grid with rank pills
             3. BY PRICING → vertical list with a walking left-accent bar
             4. EDITOR PICK→ aurora-glass spotlight card
             5. POPULAR    → numbered leaderboard chips (rank medals)
           ═════════════════════════════════════════════════════════════════ */
        .aitshd-mega-panel-aitools {
            /* Mesh-gradient stage — three soft radial glows in the BRAND-BLUE
               family (matches the sibling Tools hero at line ~3367). No
               violet/indigo — the site's brand palette is `--aits-blue*` only. */
            background:
                radial-gradient(56% 60% at 6% 4%,  rgba(54, 128, 237, .13),  transparent 62%),
                radial-gradient(50% 55% at 96% 4%, rgba(96, 164, 245, .11),  transparent 60%),
                radial-gradient(48% 58% at 100% 100%, rgba(30, 79, 184, .12), transparent 62%),
                var(--aits-card) !important;
            overflow: hidden;
        }
        body.theme-dark .aitshd-mega-panel-aitools {
            background:
                radial-gradient(56% 60% at 6% 4%,  rgba(96, 164, 245, .18),  transparent 62%),
                radial-gradient(50% 55% at 96% 4%, rgba(147, 190, 255, .14), transparent 60%),
                radial-gradient(48% 58% at 100% 100%, rgba(96, 164, 245, .12),transparent 62%),
                var(--aits-card) !important;
        }
        /* Constellation of tiny stars floating in the top-right corner —
           purely decorative, generated in CSS. Tinted with brand blue. */
        .aitshd-mega-panel-aitools::before {
            content: '';
            position: absolute; top: 8px; right: 18px; width: 220px; height: 90px;
            pointer-events: none; opacity: .55; z-index: 0;
            background-image:
                radial-gradient(circle at 12% 40%, currentColor 1px, transparent 1.4px),
                radial-gradient(circle at 34% 68%, currentColor .8px, transparent 1.2px),
                radial-gradient(circle at 58% 28%, currentColor 1.2px, transparent 1.6px),
                radial-gradient(circle at 78% 62%, currentColor .8px, transparent 1.2px),
                radial-gradient(circle at 92% 40%, currentColor 1.1px, transparent 1.4px);
            color: rgba(54, 128, 237, .45);
        }
        body.theme-dark .aitshd-mega-panel-aitools::before { color: rgba(147, 190, 255, .55); }
        .aitshd-mega-panel-aitools .aitshd-mega-wrap {
            position: relative; z-index: 1;
            grid-template-columns: 280px minmax(0,1fr) minmax(0,1fr) 360px;
        }
        @media (max-width: 1240px) {
            .aitshd-mega-panel-aitools .aitshd-mega-wrap {
                grid-template-columns: 240px minmax(0,1fr) minmax(0,1fr) 320px;
            }
        }

        /* ── Icon tiles — boost the tone opacity from the base 13-14% to
              ~30% so the mesh-gradient panel background doesn't drown out
              the icon tiles. Applies to EVERY icon in this panel: Browse
              tiles, category tiles, pricing rows. Keeps the same tone tokens
              (--tint-*-ink) so brand colours stay consistent. */
        .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="blue"]    .aitshd-mega-item-icon { background: rgba(37, 99, 235, .16);  color: #2060C0; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .20); }
        .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="indigo"]  .aitshd-mega-item-icon { background: rgba(99, 102, 241, .18); color: #4338CA; box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .24); }
        .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="violet"]  .aitshd-mega-item-icon { background: rgba(139, 92, 246, .16); color: #6D28D9; box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .22); }
        .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="emerald"] .aitshd-mega-item-icon { background: rgba(16, 185, 129, .18); color: #047857; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .24); }
        .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="amber"]   .aitshd-mega-item-icon { background: rgba(245, 158, 11, .18);  color: #B45309; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .26); }
        .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="rose"]    .aitshd-mega-item-icon { background: rgba(244, 63, 94, .18);   color: #BE123C; box-shadow: inset 0 0 0 1px rgba(244, 63, 94, .24); }
        .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="cyan"]    .aitshd-mega-item-icon { background: rgba(6, 182, 212, .18);   color: #0E7490; box-shadow: inset 0 0 0 1px rgba(6, 182, 212, .26); }
        .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="pink"]    .aitshd-mega-item-icon { background: rgba(236, 72, 153, .16);  color: #BE185D; box-shadow: inset 0 0 0 1px rgba(236, 72, 153, .22); }
        .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="slate"]   .aitshd-mega-item-icon { background: rgba(100, 116, 139, .16); color: #334155; box-shadow: inset 0 0 0 1px rgba(100, 116, 139, .22); }
        /* Default (no data-tone) — blue.
           NOTE: `.aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-icon`
           used to be grouped into this selector. It has the same specificity
           (0,4,0) as the per-tone rules above but sits LATER in the sheet, so
           it won every tie and painted all nine category tiles brand blue —
           while the Browse column beside it cycled nine colours. The category
           rows already carry a real `data-tone`; they just needed to be let
           through. Do not re-add a blanket colour here. */
        .aitshd-mega-panel-aitools .aitshd-mega-item:not([data-tone]) .aitshd-mega-item-icon {
            background: rgba(37, 99, 235, .16); color: #2060C0;
            box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .20);
        }
        /* Force the SVG glyphs to render solid: some icons (send, sparkles)
           use `currentColor` for their stroke — ensuring the color inherits
           makes them fully visible instead of ghosted. */
        .aitshd-mega-panel-aitools .aitshd-mega-item-icon svg {
            color: inherit;
            stroke: currentColor;
        }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="blue"]    .aitshd-mega-item-icon { background: rgba(96, 164, 245, .22); color: #93BEFF; box-shadow: inset 0 0 0 1px rgba(96, 164, 245, .30); }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="indigo"]  .aitshd-mega-item-icon { background: rgba(129, 140, 248, .22); color: #A5B4FC; box-shadow: inset 0 0 0 1px rgba(129, 140, 248, .30); }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="violet"]  .aitshd-mega-item-icon { background: rgba(167, 139, 250, .22); color: #C4B5FD; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .30); }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="emerald"] .aitshd-mega-item-icon { background: rgba(52, 211, 153, .24); color: #6EE7B7; box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .32); }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="amber"]   .aitshd-mega-item-icon { background: rgba(251, 191, 36, .24); color: #FCD34D; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .32); }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="rose"]    .aitshd-mega-item-icon { background: rgba(251, 113, 133, .22); color: #FDA4AF; box-shadow: inset 0 0 0 1px rgba(251, 113, 133, .30); }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="cyan"]    .aitshd-mega-item-icon { background: rgba(34, 211, 238, .22); color: #67E8F9; box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .30); }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="pink"]    .aitshd-mega-item-icon { background: rgba(244, 114, 182, .22); color: #F9A8D4; box-shadow: inset 0 0 0 1px rgba(244, 114, 182, .30); }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="slate"]   .aitshd-mega-item-icon { background: rgba(148, 163, 184, .22); color: #CBD5E1; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .30); }

        /* The "For you" and "NEW" inline badges also need a brand-brighter
           background so they read like buttons rather than faint watermarks. */
        .aitshd-mega-panel-aitools .aitshd-mega-badge-inline[data-tone="emerald"] {
            background: rgba(16, 185, 129, .16); color: #047857;
            box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .35);
        }
        .aitshd-mega-panel-aitools .aitshd-mega-badge-inline[data-tone="amber"] {
            background: rgba(245, 158, 11, .16); color: #B45309;
            box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .38);
        }
        .aitshd-mega-panel-aitools .aitshd-mega-badge-inline[data-tone="rose"] {
            background: rgba(244, 63, 94, .16); color: #BE123C;
            box-shadow: inset 0 0 0 1px rgba(244, 63, 94, .35);
        }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-badge-inline[data-tone="emerald"] {
            background: rgba(52, 211, 153, .18); color: #6EE7B7;
            box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .40);
        }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-badge-inline[data-tone="amber"] {
            background: rgba(251, 191, 36, .18); color: #FCD34D;
            box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .40);
        }

        /* "View all 9 categories" pill — brand-blue outlined chip that
           becomes solid on hover (mirrors the ez-red/blue CTA pattern the
           site uses everywhere). */
        .aitshd-mega-panel-aitools .aitshd-mega-view-all-link {
            background: var(--aits-blue-tint) !important;
            border: 1px solid var(--aits-blue-line) !important;
            color: var(--aits-blue-dark) !important;
            font-weight: 800 !important;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-view-all-link:hover {
            background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark)) !important;
            color: #fff !important;
            border-color: transparent !important;
            transform: translateY(-1px);
        }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-view-all-link {
            background: rgba(96, 164, 245, .14) !important;
            border-color: rgba(96, 164, 245, .30) !important;
            color: #93BEFF !important;
        }

        /* ── 1. BROWSE column — "quick launch" pill tiles ──────────────── */
        .aitshd-mega-panel-aitools .aitshd-mega-browse {
            background: linear-gradient(180deg, rgba(255,255,255,.55), transparent 60%);
            border-right: 1px solid rgba(37, 99, 235, .10);
            padding: 22px 14px 18px 20px;
        }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-browse {
            background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 60%);
            border-right-color: rgba(160, 190, 255, .12);
        }
        .aitshd-mega-panel-aitools .aitshd-mega-browse .aitshd-mega-colh {
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--aits-blue-dark);
            padding-bottom: 12px;
            font-size: 10.5px; letter-spacing: .13em;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-browse .aitshd-mega-colh::before {
            content: '';
            width: 6px; height: 6px; border-radius: 999px; flex: none;
            background: var(--aits-blue);
            box-shadow: 0 0 0 3px rgba(54, 128, 237, .20);
        }
        .aitshd-mega-panel-aitools .aitshd-mega-browse .aitshd-mega-item {
            position: relative; overflow: hidden;
            background: var(--aits-card);
            border: 1px solid var(--aits-line);
            border-radius: 14px !important;
            padding: 10px 12px !important;
            margin-top: 6px !important;
            transition: transform .22s cubic-bezier(.22,.61,.36,1),
                        border-color .22s, box-shadow .22s;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-browse .aitshd-mega-item:hover {
            transform: translateY(-2px);
            border-color: var(--aits-blue-line);
            box-shadow: 0 14px 26px -18px var(--aits-blue);
        }
        /* Diagonal shine that sweeps once across the tile on hover. */
        .aitshd-mega-panel-aitools .aitshd-mega-browse .aitshd-mega-item::after {
            content: '';
            position: absolute; top: 0; bottom: 0; left: -60%; width: 55%;
            background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
            transform: skewX(-18deg); pointer-events: none;
            transition: left .55s ease;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-browse .aitshd-mega-item:hover::after { left: 130%; }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-browse .aitshd-mega-item::after {
            background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.10) 50%, transparent 80%);
        }
        /* Left accent bar that appears on hover. */
        .aitshd-mega-panel-aitools .aitshd-mega-browse .aitshd-mega-item::before {
            content: '';
            position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px;
            background: var(--tint-blue-ink, var(--aits-blue));
            border-radius: 0 999px 999px 0;
            opacity: 0; transform: scaleY(.5);
            transition: opacity .22s, transform .22s;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-browse .aitshd-mega-item[data-tone="violet"]::before  { background: var(--tint-violet-ink); }
        .aitshd-mega-panel-aitools .aitshd-mega-browse .aitshd-mega-item[data-tone="emerald"]::before { background: var(--tint-emerald-ink); }
        .aitshd-mega-panel-aitools .aitshd-mega-browse .aitshd-mega-item[data-tone="amber"]::before   { background: var(--tint-amber-ink); }
        .aitshd-mega-panel-aitools .aitshd-mega-browse .aitshd-mega-item[data-tone="rose"]::before    { background: var(--tint-rose-ink); }
        .aitshd-mega-panel-aitools .aitshd-mega-browse .aitshd-mega-item:hover::before {
            opacity: 1; transform: scaleY(1);
        }

        /* ── 2. BY CATEGORY — two-column capability grid ─────────────── */
        .aitshd-mega-panel-aitools .aitshd-mega-col-cat {
            padding: 22px 18px 18px;
            border-left: 1px solid rgba(37, 99, 235, .08) !important;
        }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-col-cat {
            border-left-color: rgba(160, 190, 255, .10) !important;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-col-cat .aitshd-mega-colh {
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--aits-blue-dark);
            font-size: 10.5px; letter-spacing: .13em;
            padding-bottom: 12px;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-col-cat .aitshd-mega-colh::before {
            content: '';
            width: 6px; height: 6px; border-radius: 999px; flex: none;
            background: var(--aits-blue);
            box-shadow: 0 0 0 3px rgba(54, 128, 237, .20);
        }
        /* Stacked single-column list of capability tiles — each tile spans
           the full inner width, so titles like "AI Chatbots & Assistants"
           and "AI APIs & Infrastructure" render on ONE line. */
        .aitshd-mega-panel-aitools .aitshd-mega-col-cat {
            display: flex; flex-direction: column;
            gap: 6px;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-col-cat > .aitshd-mega-view-all-link {
            margin-top: 6px !important;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-col-cat > .aitshd-mega-item {
            position: relative;
            margin-top: 0 !important;
            border: 1px solid var(--aits-line);
            background: var(--aits-card);
            border-radius: 12px;
            padding: 9px 10px 9px 10px !important;
            padding-right: 32px !important;   /* leave a lane for the absolutely-positioned count */
            min-width: 0;
            transition: transform .22s cubic-bezier(.22,.61,.36,1),
                        border-color .22s, box-shadow .22s;
        }
        /* Float the count pill into the top-right corner — a category name
           like "AI Chatbots & Assistants" only wraps to two lines when the
           title has the full inner width, not the sliver that a right-hand
           flex sibling leaves it. */
        .aitshd-mega-panel-aitools .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-count,
        .aitshd-mega-panel-aitools .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-rail-count {
            position: absolute; top: 6px; right: 6px;
            font-size: 9.5px !important;
            padding: 2px 6px !important;
            border-radius: 999px;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-col-cat > .aitshd-mega-item:hover {
            transform: translateY(-2px);
            border-color: var(--aits-blue-line);
            box-shadow: 0 12px 24px -18px var(--aits-blue);
        }
        .aitshd-mega-panel-aitools .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-icon {
            width: 30px; height: 30px; border-radius: 9px;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-body {
            min-width: 0; flex: 1 1 auto; align-self: center;
        }
        /* Single-line titles. The parent rule at line ~3293 already gives
           the inner span `white-space: nowrap; text-overflow: ellipsis` —
           that's exactly what we want here, we just need to make sure it
           reaches the full row width. */
        .aitshd-mega-panel-aitools .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-title {
            font-size: 12.5px !important;
            font-weight: 700 !important;
            gap: 6px !important;
            align-items: center !important;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-title > span:first-child,
        .aitshd-mega-panel-aitools .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-rail-label {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            line-height: 1.3 !important;
            display: block !important;
        }
        /* The count pill is what makes this feel like a capability grid — turn
           it into a strong, accent-tinted chip that sits on the tile. */
        .aitshd-mega-panel-aitools .aitshd-mega-col-cat .aitshd-mega-rail-count {
            background: var(--aits-blue-tint);
            color: var(--aits-blue-dark);
            border-color: var(--aits-blue-line);
            font-weight: 800; font-size: 10.5px;
            padding: 3px 8px;
        }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-col-cat .aitshd-mega-rail-count {
            background: rgba(96, 164, 245, .18);
            color: #93BEFF;
            border-color: rgba(96, 164, 245, .30);
        }

        /* ── 3. BY PRICING — vertical list with brand-blue hover ─────── */
        .aitshd-mega-panel-aitools .aitshd-mega-col-freetools {
            padding: 22px 18px 18px;
            border-left: 1px solid var(--aits-blue-line) !important;
        }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-col-freetools {
            border-left-color: rgba(96, 164, 245, .18) !important;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-col-freetools .aitshd-mega-colh {
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--aits-blue-dark);
            font-size: 10.5px; letter-spacing: .13em;
            padding-bottom: 12px;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-col-freetools .aitshd-mega-colh::before {
            content: '';
            width: 6px; height: 6px; border-radius: 999px; flex: none;
            background: var(--aits-blue);
            box-shadow: 0 0 0 3px rgba(54, 128, 237, .20);
        }
        .aitshd-mega-panel-aitools .aitshd-mega-col-freetools .aitshd-mega-item {
            position: relative;
            border-radius: 12px !important;
            padding: 10px 12px 10px 14px !important;
            transition: background-color .18s, transform .18s;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-col-freetools .aitshd-mega-item::before {
            content: '';
            position: absolute; left: 2px; top: 18%; bottom: 18%; width: 3px;
            background: var(--aits-blue);
            border-radius: 999px;
            opacity: 0; transform: scaleY(.4);
            transition: opacity .2s, transform .2s;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-col-freetools .aitshd-mega-item:hover {
            background: var(--aits-blue-tint);
            transform: translateX(2px);
        }
        .aitshd-mega-panel-aitools .aitshd-mega-col-freetools .aitshd-mega-item:hover::before {
            opacity: 1; transform: scaleY(1);
        }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-col-freetools .aitshd-mega-item:hover {
            background: rgba(96, 164, 245, .10);
        }

        /* ── 4. EDITOR SPOTLIGHT — brand-blue hero ─────────────────── */
        .aitshd-mega-panel-aitools .aitshd-mega-featured-col {
            padding: 22px 22px 22px 18px;
            border-left: 1px solid var(--aits-blue-line) !important;
            display: flex; flex-direction: column; gap: 14px;
        }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-featured-col {
            border-left-color: rgba(96, 164, 245, .18) !important;
        }
        /* Same base gradient as the sibling Tools mega hero (line ~3367) —
           two glow overlays + a mid-blue linear base. Keeps the AI Tools
           panel's spotlight card 100% on-brand blue while my other zone
           changes (numbered leaderboard, glass Browse tiles, capability
           grid) still make the panel read as premium and distinct. */
        .aitshd-mega-panel-aitools .aitshd-mega-hero {
            position: relative; overflow: hidden; isolation: isolate;
            border-radius: 20px;
            padding: 20px 20px 18px;
            background:
                radial-gradient(circle at 100% 0%, rgba(147, 190, 255, .32) 0%, transparent 60%),
                radial-gradient(circle at 0% 100%, rgba(37, 99, 235, .45)  0%, transparent 55%),
                linear-gradient(135deg, #1E4FB8, var(--aits-blue-dark) 55%, #143C90) !important;
            box-shadow:
                0 22px 44px -22px rgba(32, 96, 192, .55),
                inset 0 1px 0 rgba(255, 255, 255, .12),
                inset 0 0 0 1px rgba(147, 190, 255, .14);
        }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-hero {
            background:
                radial-gradient(circle at 100% 0%, rgba(147, 190, 255, .28) 0%, transparent 60%),
                radial-gradient(circle at 0% 100%, rgba(37, 99, 235, .40)  0%, transparent 55%),
                linear-gradient(135deg, #133672, #0F2C5D 55%, #0A1E44) !important;
            box-shadow:
                0 22px 44px -22px rgba(0, 0, 0, .65),
                inset 0 1px 0 rgba(255, 255, 255, .06),
                inset 0 0 0 1px rgba(147, 190, 255, .10);
        }
        /* Aurora bokeh — two slow-drifting soft blue circles behind the
           content (kept in brand blue family only — no violet). */
        .aitshd-mega-panel-aitools .aitshd-mega-hero::before,
        .aitshd-mega-panel-aitools .aitshd-mega-hero::after {
            content: ''; position: absolute; z-index: -1; border-radius: 999px;
            filter: blur(30px); pointer-events: none;
            animation: aitsAitAurora 14s ease-in-out infinite alternate;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-hero::before {
            top: -40px; right: -20px; width: 160px; height: 160px;
            background: rgba(147, 190, 255, .40);
        }
        .aitshd-mega-panel-aitools .aitshd-mega-hero::after {
            bottom: -50px; left: -30px; width: 160px; height: 160px;
            background: rgba(37, 99, 235, .40);
            animation-delay: -6s;
        }
        @keyframes aitsAitAurora {
            0%   { transform: translate(0, 0)   scale(1); opacity: .8; }
            100% { transform: translate(14px, -8px) scale(1.15); opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-mega-panel-aitools .aitshd-mega-hero::before,
            .aitshd-mega-panel-aitools .aitshd-mega-hero::after { animation: none !important; }
        }
        /* The existing SVG artwork blends nicely against the blue — keep it
           at full opacity now that the palette matches. */
        .aitshd-mega-panel-aitools .aitshd-mega-hero-art { opacity: .55; }
        /* Retint the "Editor's Pick" chip so it reads as a bright inline pill
           over the blue hero. */
        .aitshd-mega-panel-aitools .aitshd-mega-hero-pill {
            background: rgba(255, 255, 255, .22) !important;
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
            border: 1px solid rgba(255, 255, 255, .28) !important;
            color: #fff !important;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-hero-shield { color: #FDE68A !important; }
        .aitshd-mega-panel-aitools .aitshd-mega-hero-avatar-mark {
            background: rgba(255, 255, 255, .96) !important;
            color: var(--aits-blue-dark) !important;
            box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .35),
                        inset 0 -3px 0 rgba(0, 0, 0, .08);
        }
        .aitshd-mega-panel-aitools .aitshd-mega-hero-avatar-name,
        .aitshd-mega-panel-aitools .aitshd-mega-hero-title { color: #fff !important; }
        .aitshd-mega-panel-aitools .aitshd-mega-hero-count { color: rgba(255, 255, 255, .85) !important; }
        /* Primary CTA — matches the site's blue pill (`#3B82F6` / hover to
           --aits-blue-dark) exactly like the sibling Tools hero CTA at
           line ~2987. */
        .aitshd-mega-panel-aitools .aitshd-mega-hero-cta {
            background: #fff !important;
            color: var(--aits-blue-dark) !important;
            box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .55);
        }
        .aitshd-mega-panel-aitools .aitshd-mega-hero:hover .aitshd-mega-hero-cta {
            transform: translateX(2px);
            box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .6);
        }
        .aitshd-mega-panel-aitools .aitshd-mega-hero-dot {
            background: rgba(255, 255, 255, .35) !important;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-hero-dot.active {
            background: #fff !important;
        }

        /* Second featured tile — dashed outline in the brand blue family. */
        .aitshd-mega-panel-aitools .aitshd-mega-article.is-empty {
            border: 1.5px dashed var(--aits-blue-line) !important;
            background: linear-gradient(180deg,
                var(--aits-blue-tint), var(--aits-blue-tint-2) 60%, transparent) !important;
            border-radius: 16px;
            padding: 14px 14px 12px !important;
            transition: border-color .2s, background .2s, transform .2s;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-article.is-empty:hover {
            border-color: var(--aits-blue) !important;
            transform: translateY(-2px);
        }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-article.is-empty {
            border-color: rgba(96, 164, 245, .30) !important;
            background: linear-gradient(180deg,
                rgba(96, 164, 245, .12), rgba(96, 164, 245, .06) 60%, transparent) !important;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-article-label {
            font-size: 10px !important; font-weight: 900 !important;
            letter-spacing: .11em !important; text-transform: uppercase !important;
            color: var(--aits-blue-dark) !important;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-article-thumb {
            background: linear-gradient(140deg, var(--aits-blue), var(--aits-blue-dark)) !important;
            color: #fff !important;
            box-shadow: 0 8px 18px -10px var(--aits-blue-dark);
        }
        .aitshd-mega-panel-aitools .aitshd-mega-article-more {
            color: var(--aits-blue-dark) !important; font-weight: 800;
        }

        /* ── 5. POPULAR RIGHT NOW — numbered leaderboard row ─────────── */
        .aitshd-mega-panel-aitools .aitshd-mega-popular {
            background: linear-gradient(90deg,
                var(--aits-blue-tint),
                var(--aits-blue-tint-2) 60%,
                transparent) !important;
            border-top: 1px solid var(--aits-blue-line) !important;
        }
        body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-popular {
            background: linear-gradient(90deg,
                rgba(96, 164, 245, .12),
                rgba(96, 164, 245, .05) 60%,
                transparent) !important;
            border-top-color: rgba(96, 164, 245, .18) !important;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-popular-head strong {
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--aits-blue-dark) !important;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-popular-head strong::before {
            content: '';
            width: 8px; height: 8px; border-radius: 999px;
            background: #ef4444;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, .22);
            animation: aitsAitPulse 2s ease-in-out infinite;
        }
        @keyframes aitsAitPulse {
            0%, 100% { transform: scale(1);    opacity: 1; }
            50%      { transform: scale(1.25); opacity: .7; }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-mega-panel-aitools .aitshd-mega-popular-head strong::before { animation: none; }
        }
        /* Popular chips carry NO rank badge. This block used to number them
           01–06 with a counter() ::before plus gold/silver/bronze medals for
           the first three, and reserved 46px of left padding for it. Removed
           on request — the row is "Popular Right Now", not a leaderboard, and
           the ordering already communicates rank. Keeping the card treatment
           (radius, surface, border, lift-on-hover) that came with it. */
        .aitshd-mega-panel-aitools .aitshd-mega-pop-chip {
            position: relative;
            border-radius: 14px !important;
            background: var(--aits-card) !important;
            border: 1px solid var(--aits-line) !important;
            transition: transform .22s cubic-bezier(.22,.61,.36,1),
                        border-color .22s, box-shadow .22s;
        }
        .aitshd-mega-panel-aitools .aitshd-mega-pop-chip:hover {
            transform: translateY(-2px);
            border-color: var(--aits-blue-line) !important;
            box-shadow: 0 12px 26px -18px var(--aits-blue);
        }
        /* Existing chip icon becomes a compact logo pill instead of the big
           circle it defaults to. */
        .aitshd-mega-panel-aitools .aitshd-mega-pop-chip-ico {
            width: 24px !important; height: 24px !important; border-radius: 7px !important;
            font-size: 12px !important;
        }
        /* "View all trending" pill on the popular row — solid brand blue,
           matches the site CTA colour (--aits-blue → --aits-blue-dark). */
        .aitshd-mega-panel-aitools .aitshd-mega-pop-more {
            background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark)) !important;
            color: #fff !important;
            border: 0 !important;
            box-shadow: 0 10px 22px -12px var(--aits-blue-dark);
        }
        .aitshd-mega-panel-aitools .aitshd-mega-pop-more:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 26px -12px var(--aits-blue-dark);
        }

        /* ═══════════════════════════════════════════════════════════════
           6. PREMIUM TILE SYSTEM — every mega panel, every list row
           ═══════════════════════════════════════════════════════════════
           Applies to all seven panels: Tools, AI Tools (directory), AI
           Models, AI Learn, Deals, Discover and Resources. Each had grown
           its own row treatment — the AI Tools mega alone ran three, and
           Learn/Deals/Discover/Resources were flat link rows with a single
           panel-gradient accent bar. This section makes every row in every
           panel ONE component with one hover language, driven by the row's
           own `data-tone` (already present on 100% of rows in all panels,
           so nothing in the markup changed).

           SELECTOR SHAPE — read before editing:
             .aitshd-mega-panel:is(<7 panel classes>)   ← compound, TWO classes
             :is(.aitshd-mega-browse, .aitshd-mega-col) ← every row container
             .aitshd-mega-item
           That lands the base rules at (0,4,0) and their :hover variants at
           (0,5,0). Both numbers are deliberate: each panel still ships a
           `body.theme-dark .aitshd-mega-panel-X .aitshd-mega-item:hover`
           rule at (0,4,1), and a (0,4,0) hover would silently lose to it in
           dark mode only. Do not "simplify" the compound panel selector to a
           single class without re-checking those.

           A new mega panel must be added to the :is() list to inherit this.

           How the colour works — three custom properties per tone, nothing
           else. Every surface below derives from them, so adding a tone or
           retuning a hue is a one-line change instead of a hunt through
           nine hard-coded rgba() rules:

             --t      brand RGB triplet, space separated, so any alpha can
                      be mixed on the fly with rgb(var(--t) / .18)
             --t-ink  glyph/label colour — the DARK end of the ramp in light
                      mode, the LIGHT end in dark mode, so it always reads
                      against the card surface
             --t-on   ink that sits ON a solid --t-ink fill (hover pill)

           --t-ink is deliberately never used as a fill and --t is never used
           as ink: that inversion is exactly what put 24 buttons below AA in
           the ai-contrast-fix pass. Amber and cyan are the tones that punish
           getting this backwards.                                          */

        /* ── 6a. Tone ramps ─────────────────────────────────────────────
           `:is()` so the column tiles and the Popular-strip chips share ONE
           ramp — specificity is unchanged (both arms are a single class), so
           nothing downstream shifts by adding the chip here. */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip) {
            --t: 37 99 235;    --t-ink: #1D4ED8; --t-on: #fff;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="indigo"]  { --t:  99 102 241; --t-ink: #4338CA; }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="violet"]  { --t: 139  92 246; --t-ink: #6D28D9; }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="emerald"] { --t:  16 185 129; --t-ink: #047857; }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="amber"]   { --t: 245 158  11; --t-ink: #B45309; }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="rose"]    { --t: 244  63  94; --t-ink: #BE123C; }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="cyan"]    { --t:   6 182 212; --t-ink: #0E7490; }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="pink"]    { --t: 236  72 153; --t-ink: #BE185D; }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="slate"]   { --t: 100 116 139; --t-ink: #334155; }

        /* Dark mode swaps to the light end of each ramp. --t-on flips to
           near-black because a solid --t-ink fill is now a BRIGHT colour. */
        body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)                    { --t:  96 164 245; --t-ink: #A9CCFF; --t-on: #0A1020; }
        body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="indigo"]  { --t: 129 140 248; --t-ink: #BFC7FE; }
        body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="violet"]  { --t: 167 139 250; --t-ink: #D3C6FE; }
        body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="emerald"] { --t:  52 211 153; --t-ink: #8CF0C4; }
        body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="amber"]   { --t: 251 191  36; --t-ink: #FDDC7A; }
        body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="rose"]    { --t: 251 113 133; --t-ink: #FEBAC3; }
        body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="cyan"]    { --t:  34 211 238; --t-ink: #8FEDFA; }
        body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="pink"]    { --t: 244 114 182; --t-ink: #FBBCDA; }
        body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="slate"]   { --t: 148 163 184; --t-ink: #D6DEE8; }

        /* ── 6b. The tile ─────────────────────────────────────────────── */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            background-color: var(--aits-card);
            background-image: linear-gradient(135deg, rgb(var(--t) / .07), rgb(var(--t) / 0) 58%);
            border: 1px solid var(--aits-line);
            border-radius: 15px !important;
            transition: transform .26s cubic-bezier(.22,.61,.36,1),
                        border-color .26s var(--ease,ease),
                        box-shadow .26s var(--ease,ease),
                        background-image .26s var(--ease,ease);
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover {
            transform: translateY(-3px);
            border-color: rgb(var(--t) / .48);
            background-image: linear-gradient(135deg, rgb(var(--t) / .14), rgb(var(--t) / 0) 62%);
            box-shadow: 0 18px 32px -20px rgb(var(--t) / .85),
                        0 3px 10px -6px rgb(var(--t) / .35);
        }
        /* Keyboard parity — the mega is fully tabbable and the hover state
           was previously invisible to it. */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:focus-visible {
            outline: none;
            transform: translateY(-3px);
            border-color: rgb(var(--t) / .65);
            box-shadow: 0 0 0 3px rgb(var(--t) / .30),
                        0 18px 32px -20px rgb(var(--t) / .85);
        }

        /* Left accent bar — grows out of the tone on hover/focus. */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item::before {
            content: '';
            position: absolute; left: 0; top: 16%; bottom: 16%;
            width: 3px; height: auto;
            background: var(--t-ink);
            border-radius: 0 999px 999px 0;
            opacity: 0; transform: scaleY(.35); transform-origin: center;
            transition: opacity .24s var(--ease,ease), transform .24s var(--ease,ease);
            z-index: 2;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover::before,
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:focus-visible::before {
            opacity: 1; transform: scaleY(1);
        }

        /* Sheen sweep. Pinned to z-index 0 with the content lifted to 1 —
           the old Browse-only version painted a 45%-white bar OVER the
           label, dropping it under AA for the length of the sweep. It now
           travels behind the text and is half the strength. */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item::after {
            content: '';
            position: absolute; top: 0; bottom: 0; left: -60%; width: 52%;
            background: linear-gradient(120deg, transparent 18%, rgba(255,255,255,.26) 50%, transparent 82%);
            transform: skewX(-18deg);
            pointer-events: none;
            transition: left .62s var(--ease,ease);
            z-index: 0;
        }
        body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item::after {
            background: linear-gradient(120deg, transparent 18%, rgba(255,255,255,.07) 50%, transparent 82%);
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover::after { left: 135%; }

        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item-icon,
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item-body,
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item-count,
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-rail-count,
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-badge-inline { position: relative; z-index: 1; }

        /* ── 6c. Icon tile ────────────────────────────────────────────── */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item .aitshd-mega-item-icon {
            background-color: rgb(var(--t) / .15);
            background-image: linear-gradient(158deg, rgba(255,255,255,.55), rgba(255,255,255,0) 62%);
            color: var(--t-ink);
            box-shadow: inset 0 0 0 1px rgb(var(--t) / .26);
            transition: transform .3s cubic-bezier(.34,1.56,.64,1),
                        background-color .24s var(--ease,ease),
                        box-shadow .24s var(--ease,ease);
        }
        body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item .aitshd-mega-item-icon {
            background-color: rgb(var(--t) / .20);
            background-image: linear-gradient(158deg, rgba(255,255,255,.10), rgba(255,255,255,0) 62%);
            box-shadow: inset 0 0 0 1px rgb(var(--t) / .34);
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover .aitshd-mega-item-icon,
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:focus-visible .aitshd-mega-item-icon {
            transform: translateY(-1px) scale(1.07) rotate(-4deg);
            background-color: rgb(var(--t) / .26);
            box-shadow: inset 0 0 0 1px rgb(var(--t) / .42),
                        0 9px 18px -11px rgb(var(--t) / .95);
        }

        /* ── 6d. Type ─────────────────────────────────────────────────── */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover .aitshd-mega-item-title {
            color: var(--t-ink);
        }

        /* ── 6e. Count pill — tone-matched, solid on hover ────────────── */
        /* Every column, not just By Category — the Models By-Company
           and Deals By-Category/By-Discount pills were the last grey
           chips left in the system. Colour only; the corner positioning
           below stays col-cat specific because only that column has a
           description line to keep clear of. */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item :is(.aitshd-mega-item-count,.aitshd-mega-rail-count) {
            background: rgb(var(--t) / .14) !important;
            color: var(--t-ink) !important;
            border: 1px solid rgb(var(--t) / .30) !important;
            transition: background-color .22s var(--ease,ease),
                        color .22s var(--ease,ease),
                        border-color .22s var(--ease,ease),
                        transform .22s var(--ease,ease);
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover :is(.aitshd-mega-item-count,.aitshd-mega-rail-count),
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:focus-visible :is(.aitshd-mega-item-count,.aitshd-mega-rail-count) {
            background: var(--t-ink) !important;
            color: var(--t-on) !important;
            border-color: transparent !important;
            transform: scale(1.06);
        }

        /* ── 6f. By Category — layout that lets the text breathe ──────────
           The previous rules here were built for a one-line "capability
           grid": 30px tiles, 12.5px titles and `white-space: nowrap` +
           ellipsis on the label. Now that each row carries a description,
           the title is allowed to wrap instead of being cut — a category
           name must never arrive as "AI Transcription & Subtit…".         */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 10px 42px 10px 11px !important;   /* right lane = count pill */
            /* The column is a flex box with a max-height (below), which makes
               every tile a shrinkable flex item — they collapsed to 48px and
               their own 38px icon overflowed the padding box. Tiles keep their
               intrinsic height and the COLUMN scrolls instead. */
            flex: 0 0 auto;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-colh,
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-view-all-link { flex: 0 0 auto; }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-icon {
            width: 36px !important; height: 36px !important;
            border-radius: 11px !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-icon svg {
            width: 19px !important; height: 19px !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-title {
            font-size: 13px !important;
            font-weight: 700 !important;
            display: block !important;
            transition: color .2s var(--ease,ease);
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-title > span:first-child,
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-rail-label {
            white-space: normal !important;
            overflow: visible !important;
            text-overflow: clip !important;
            display: block !important;
            line-height: 1.3 !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-desc {
            font-size: 11.5px !important;
            line-height: 1.38 !important;
            margin-top: 3px !important;
        }
        /* The count pill keeps its own corner lane so a long category name
           gets the full row width instead of the sliver a flex sibling
           would leave it. */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-count,
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-rail-count {
            position: absolute; top: 8px; right: 8px;
            font-size: 10px !important;
            font-weight: 800 !important;
            padding: 2px 7px !important;
            border-radius: 999px;
        }

        /* Tall taxonomies scroll inside the column rather than pushing the
           panel past the fold — rail_limit is admin-editable and this mega
           sits under a 68px sticky header. */
        @media (min-width: 1024px) {
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat {
                /* Viewport-derived, not a fixed cap: a laptop scrolls, a
                   desktop shows all nine rows outright. The absolute ceiling
                   only stops a 4K screen from rendering an absurdly tall
                   panel once rail_limit is raised. */
                max-height: min(860px, calc(100vh - 196px));
                overflow-y: auto;
                overscroll-behavior: contain;
                scrollbar-width: thin;
                scrollbar-color: rgb(var(--aits-blue-rgb, 54 128 237) / .45) transparent;
                padding-right: 12px;
            }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat::-webkit-scrollbar { width: 8px; }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat::-webkit-scrollbar-track { background: transparent; }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat::-webkit-scrollbar-thumb {
                background: rgba(54,128,237,.28); border-radius: 999px;
                border: 2px solid transparent; background-clip: content-box;
            }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat:hover::-webkit-scrollbar-thumb { background: rgba(54,128,237,.5); background-clip: content-box; }
            /* Keeps the CTA reachable without scrolling to the bottom. The
               spread shadow paints an opaque gutter in the panel's own
               surface colour, so rows sliding underneath are masked instead
               of ghosting through the pill's translucent tint. */
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-view-all-link {
                position: sticky; bottom: -2px; z-index: 3;
                margin-top: 8px !important;
                box-shadow: 0 0 0 6px var(--aits-card), 0 -10px 16px -6px var(--aits-card);
            }
        }

        /* ── 6g. Responsive ──────────────────────────────────────────────
           The mega grid already reflows at 1240 / 1080 / 900 and the whole
           header collapses to the drawer at 1023. These steps keep the
           tiles legible as their column narrows — they shrink the chrome,
           never the text, and no rule here hides a label. */
        @media (max-width: 1240px) {
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item {
                padding: 10px 38px 10px 11px !important;
                gap: 10px;
            }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-icon {
                width: 34px !important; height: 34px !important; border-radius: 10px !important;
            }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-icon svg {
                width: 17px !important; height: 17px !important;
            }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-title { font-size: 12.5px !important; }
            /* 314px is the narrowest this column ever gets — the grid runs
               `240px 1fr 1fr 340px` here, and below 1080 By Pricing is hidden
               so the column gets WIDER again, not narrower. Two descriptions
               need a third line at exactly this width; giving it to them means
               nothing is clamped away at any real breakpoint. The column
               scrolls, so the extra height costs nothing. */
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-desc {
                -webkit-line-clamp: 3;
            }
        }
        @media (max-width: 1080px) {
            /* By Pricing is hidden at this width, so By Category inherits the
               freed space and can run two tiles per row. */
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
                align-content: start;
            }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat .aitshd-mega-colh,
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-view-all-link { grid-column: 1 / -1; }
        }
        @media (max-width: 900px) {
            /* Single-column mega — full-width tiles read better than a
               cramped 2-up, and the sticky-scroll cap is pointless once the
               panel itself is the scrolling surface. */
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat {
                grid-template-columns: 1fr;
                max-height: none; overflow: visible;
            }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-view-all-link { position: static; }
        }
        /* Coarse pointers get no hover transform — it fires on tap and
           leaves the tile stuck in its lifted state until the next paint. */
        @media (hover: none) {
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover { transform: none; }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item:hover .aitshd-mega-item-icon { transform: none; }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item::after { display: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item,
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item-icon { transition: none !important; }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item:hover { transform: none !important; }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item:hover .aitshd-mega-item-icon { transform: none !important; }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item::after { display: none !important; }
        }

        /* ── 6h. Mobile drawer — same tone language, tile treatment ─────
           Below 1023px the mega is gone and these rows ARE the navigation,
           so they get the card + tone rather than being left as flat links. */
        .aitshd-drawer .aitshd-drawer-link {
            border-radius: 12px;
            transition: background-color .2s var(--ease,ease),
                        border-color .2s var(--ease,ease),
                        transform .2s var(--ease,ease);
        }
        .aitshd-drawer .aitshd-drawer-link:active { transform: scale(.985); }
        .aitshd-drawer .aitshd-drawer-link-ico {
            transition: transform .24s cubic-bezier(.34,1.56,.64,1);
        }
        .aitshd-drawer .aitshd-drawer-link:active .aitshd-drawer-link-ico { transform: scale(1.06); }

        /* ═══════════════════════════════════════════════════════════════
           6j. BESPOKE POPULAR-STRIP CHIPS — the other five panels
           ═══════════════════════════════════════════════════════════════
           Only Tools and AI Tools use `.aitshd-mega-pop-chip`. AI Models,
           AI Learn, Deals and Discover each grew their own chip class with
           its own mark/label children. All four already carry `data-tone`
           on every chip, so they only ever needed wiring — nothing in the
           markup changed here either.

             chip   .aitshd-{mmg,lm}-pop-chip · .aitshd-dm-quick-chip
                    .aitshd-dc-trending-chip
             mark   -pop-mark · -quick-ico · -trending-ico
             label  -pop-name · -quick-label · -trending-label            */

        .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover)
        :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip) {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            border: 1px solid var(--aits-line) !important;
            border-radius: 14px !important;
            background-color: var(--aits-card) !important;
            background-image: linear-gradient(135deg, rgb(var(--t) / .08), rgb(var(--t) / 0) 60%) !important;
            transition: transform .26s cubic-bezier(.22,.61,.36,1),
                        border-color .26s var(--ease,ease),
                        box-shadow .26s var(--ease,ease),
                        background-image .26s var(--ease,ease) !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover)
        :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):hover,
        .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover)
        :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):focus-visible {
            transform: translateY(-3px);
            border-color: rgb(var(--t) / .48) !important;
            background-image: linear-gradient(135deg, rgb(var(--t) / .16), rgb(var(--t) / 0) 64%) !important;
            box-shadow: 0 16px 30px -18px rgb(var(--t) / .85),
                        0 3px 10px -6px rgb(var(--t) / .35) !important;
            outline: none;
        }
        /* Accent bar + sheen */
        .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover)
        :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)::before {
            content: '';
            position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
            background: var(--t-ink);
            border-radius: 0 999px 999px 0;
            opacity: 0; transform: scaleY(.35);
            transition: opacity .24s var(--ease,ease), transform .24s var(--ease,ease);
            z-index: 2;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover)
        :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):hover::before { opacity: 1; transform: scaleY(1); }

        /* Mark / logo pill — tone tint, ring, and the same spring on hover. */
        .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover)
        :is(.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-quick-ico,.aitshd-dc-trending-ico) {
            background-color: rgb(var(--t) / .15) !important;
            color: var(--t-ink) !important;
            box-shadow: inset 0 0 0 1px rgb(var(--t) / .26) !important;
            transition: transform .3s cubic-bezier(.34,1.56,.64,1),
                        background-color .24s var(--ease,ease),
                        box-shadow .24s var(--ease,ease) !important;
        }
        body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover)
        :is(.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-quick-ico,.aitshd-dc-trending-ico) {
            background-color: rgb(var(--t) / .20) !important;
            box-shadow: inset 0 0 0 1px rgb(var(--t) / .34) !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover)
        :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):hover
        :is(.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-quick-ico,.aitshd-dc-trending-ico) {
            transform: translateY(-1px) scale(1.08) rotate(-4deg);
            background-color: rgb(var(--t) / .26) !important;
            box-shadow: inset 0 0 0 1px rgb(var(--t) / .42),
                        0 8px 16px -10px rgb(var(--t) / .95) !important;
        }
        /* Label takes the tone on hover, same as every other row. */
        .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover)
        :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):hover
        :is(.aitshd-mmg-pop-name,.aitshd-lm-pop-name,.aitshd-dm-quick-label,.aitshd-dc-trending-label) {
            color: var(--t-ink) !important;
        }

        @media (hover: none) {
            .aitshd-mega-panel :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):hover { transform: none !important; }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-mega-panel :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip),
            .aitshd-mega-panel :is(.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-quick-ico,.aitshd-dc-trending-ico) { transition: none !important; }
            .aitshd-mega-panel :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):hover { transform: none !important; }
        }

        /* ═══════════════════════════════════════════════════════════════
           6k. METRIC NORMALISATION — one size system across all panels
           ═══════════════════════════════════════════════════════════════
           Giving every panel the same tile made the SIZING differences
           obvious: the treatment matched but the measurements did not.
           Measured before this block — six icon sizes (34/36/38/40/42/44),
           four icon radii (10/11/12/13), four glyph sizes (18–21), three
           title sizes (13/13.5/14.5) at two weights (600/700), and row
           heights from 54px to 73.6px.

           The worst offender was `padding: 9px 8px 9px 14px` on Learn,
           Deals, Discover and Resources. That 14-left / 8-right asymmetry
           was correct for their OLD flat rows, where a `left: 4px` accent
           bar needed clearance and there was no border to sit inside. On a
           bordered card it just reads as content shoved right and cramped
           against the right edge.

           TWO TIERS, keyed on the column — not on `.is-lg`, which the
           panels apply inconsistently (Learn/Resources/Discover put it on
           every row, Deals only on Browse). What actually distinguishes a
           row is whether it carries a description, and that correlates 1:1
           with the column it lives in:

             lead tile  — .aitshd-mega-browse   42px icon · 14.5px title
             row tile   — every other column    36px icon · 13px title

           `.aitshd-mega-col-cat` is EXCLUDED: §6f already gives it this
           exact metric set plus the 42px right lane its absolutely
           positioned count pill needs, and a blanket padding here would
           collapse that lane and drop the pill onto the title.            */

        /* ── Row tile — every column except By Category ────────────────── */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources)
        .aitshd-mega-col:not(.aitshd-mega-col-cat) .aitshd-mega-item {
            padding: 10px 12px !important;
            gap: 11px !important;
            align-items: center !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources)
        .aitshd-mega-col:not(.aitshd-mega-col-cat) .aitshd-mega-item .aitshd-mega-item-icon {
            width: 36px !important; height: 36px !important;
            border-radius: 11px !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources)
        .aitshd-mega-col:not(.aitshd-mega-col-cat) .aitshd-mega-item .aitshd-mega-item-icon svg {
            width: 19px !important; height: 19px !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources)
        .aitshd-mega-col:not(.aitshd-mega-col-cat) .aitshd-mega-item .aitshd-mega-item-title {
            font-size: 13px !important;
            font-weight: 700 !important;
            line-height: 1.3 !important;
        }

        /* ── Lead tile — the Browse rail ───────────────────────────────── */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources)
        .aitshd-mega-browse .aitshd-mega-item {
            padding: 10px 12px !important;
            gap: 12px !important;
            align-items: center !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources)
        .aitshd-mega-browse .aitshd-mega-item .aitshd-mega-item-icon {
            width: 42px !important; height: 42px !important;
            border-radius: 12px !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources)
        .aitshd-mega-browse .aitshd-mega-item .aitshd-mega-item-icon svg {
            width: 21px !important; height: 21px !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources)
        .aitshd-mega-browse .aitshd-mega-item .aitshd-mega-item-title {
            font-size: 14.5px !important;
            font-weight: 700 !important;
            line-height: 1.25 !important;
        }

        /* ── Description — one scale everywhere ───────────────────────── */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources)
        :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item .aitshd-mega-item-desc {
            font-size: 11.5px !important;
            line-height: 1.38 !important;
            margin-top: 3px !important;
        }

        /* Inline count pills sit in the flex row here (only By Category
           floats one into the corner), so they need their own breathing
           room rather than inheriting the corner treatment. */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources)
        .aitshd-mega-col:not(.aitshd-mega-col-cat) .aitshd-mega-item :is(.aitshd-mega-item-count,.aitshd-mega-rail-count) {
            font-size: 10.5px !important;
            font-weight: 800 !important;
            padding: 3px 8px !important;
            border-radius: 999px !important;
        }

        /* ═══════════════════════════════════════════════════════════════
           6m. CARD SPACING — one gap across every mega
           ═══════════════════════════════════════════════════════════════
           Once the rows became bordered cards they needed air between them,
           and they had almost none: measured 1px in most columns (a bare
           `.aitshd-mega-item + .aitshd-mega-item { margin-top: 1px }`), 2px
           in the Browse rails, 3px in By Pricing and 6px only in the AI
           Tools By Category column. Cards that close to each other read as
           one continuous block instead of a stack.

           Every column is already `display: flex` (verified across all
           seven panels), so `gap` is the single mechanism — and the legacy
           per-item `margin-top` is zeroed so the two cannot compound into
           an uneven 8/9/14px depending on which column you land in. */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources)
        :is(.aitshd-mega-browse,.aitshd-mega-col,.aitshd-mega-subcols) {
            gap: 8px !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources)
        :is(.aitshd-mega-browse,.aitshd-mega-col,.aitshd-mega-subcols) .aitshd-mega-item {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        /* ═══════════════════════════════════════════════════════════════
           6i. POPULAR RIGHT NOW — same tile language as the columns
           ═══════════════════════════════════════════════════════════════
           The strip was the last flat surface in the panel: plain white
           chips on a plain panel, one shared blue hover, no relationship to
           the nine-tone system running directly above it. It now reuses the
           SAME --t / --t-ink / --t-on ramp, so a chip and a category tile
           are visibly the same component at two sizes.                    */

        /* Panel — brand-tinted glass with a hairline top highlight rather
           than a flat two-stop gradient. */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-popular::before {
            background:
                radial-gradient(120% 180% at 100% 0%, rgba(54,128,237,.10), transparent 62%),
                radial-gradient(90% 160% at 0% 100%, rgba(139,92,246,.07), transparent 58%),
                linear-gradient(180deg, var(--aits-surface-2), var(--aits-card));
            border-radius: 20px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
        }
        body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-popular::before {
            background:
                radial-gradient(120% 180% at 100% 0%, rgba(96,164,245,.14), transparent 62%),
                radial-gradient(90% 160% at 0% 100%, rgba(167,139,250,.10), transparent 58%),
                linear-gradient(180deg, var(--aits-surface-2), var(--aits-card));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
        }

        /* Chip */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            padding: 11px 13px !important;
            gap: 11px !important;
            border-radius: 14px !important;
            border: 1px solid var(--aits-line) !important;
            background-color: var(--aits-card) !important;
            background-image: linear-gradient(135deg, rgb(var(--t) / .08), rgb(var(--t) / 0) 60%) !important;
            transition: transform .26s cubic-bezier(.22,.61,.36,1),
                        border-color .26s var(--ease,ease),
                        box-shadow .26s var(--ease,ease),
                        background-image .26s var(--ease,ease);
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover,
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:focus-visible {
            transform: translateY(-3px);
            border-color: rgb(var(--t) / .48) !important;
            background-image: linear-gradient(135deg, rgb(var(--t) / .16), rgb(var(--t) / 0) 64%) !important;
            box-shadow: 0 16px 30px -18px rgb(var(--t) / .85),
                        0 3px 10px -6px rgb(var(--t) / .35) !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgb(var(--t) / .30),
                        0 16px 30px -18px rgb(var(--t) / .85) !important;
        }
        /* Accent bar + sheen, matching the column tiles. */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip::before {
            content: '';
            position: absolute; left: 0; top: 18%; bottom: 18%;
            width: 3px;
            background: var(--t-ink);
            border-radius: 0 999px 999px 0;
            opacity: 0; transform: scaleY(.35);
            transition: opacity .24s var(--ease,ease), transform .24s var(--ease,ease);
            z-index: 2;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover::before,
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:focus-visible::before { opacity: 1; transform: scaleY(1); }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip::after {
            content: '';
            position: absolute; top: 0; bottom: 0; left: -60%; width: 52%;
            background: linear-gradient(120deg, transparent 18%, rgba(255,255,255,.26) 50%, transparent 82%);
            transform: skewX(-18deg);
            pointer-events: none;
            transition: left .62s var(--ease,ease);
            z-index: 0;
        }
        body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip::after {
            background: linear-gradient(120deg, transparent 18%, rgba(255,255,255,.07) 50%, transparent 82%);
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover::after { left: 135%; }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip-ico,
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip-title { position: relative; z-index: 1; }

        /* Logo pill. The tint only shows for the single-letter fallback —
           a real logo <img> covers it edge to edge — so the ring is what
           actually reads on branded chips, and it carries the tone. */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip-ico {
            width: 30px !important; height: 30px !important;
            border-radius: 9px !important;
            font-size: 12.5px !important; font-weight: 800 !important;
            background-color: rgb(var(--t) / .15) !important;
            color: var(--t-ink) !important;
            box-shadow: inset 0 0 0 1px rgb(var(--t) / .26),
                        0 1px 2px rgba(15,23,42,.06) !important;
            transition: transform .3s cubic-bezier(.34,1.56,.64,1),
                        box-shadow .24s var(--ease,ease),
                        background-color .24s var(--ease,ease);
        }
        body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip-ico {
            background-color: rgb(var(--t) / .20) !important;
            box-shadow: inset 0 0 0 1px rgb(var(--t) / .34) !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-ico,
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:focus-visible .aitshd-mega-pop-chip-ico {
            transform: translateY(-1px) scale(1.08) rotate(-4deg);
            background-color: rgb(var(--t) / .26) !important;
            box-shadow: inset 0 0 0 1px rgb(var(--t) / .42),
                        0 8px 16px -10px rgb(var(--t) / .95) !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip-title {
            font-size: 12.5px; font-weight: 700;
            transition: color .2s var(--ease,ease);
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-title,
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:focus-visible .aitshd-mega-pop-chip-title { color: var(--t-ink); }

        /* "View all trending" — brand CTA with an arrow that leads. */
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more {
            border-radius: 13px !important;
            font-weight: 800 !important;
            transition: transform .24s cubic-bezier(.22,.61,.36,1),
                        box-shadow .24s var(--ease,ease),
                        filter .24s var(--ease,ease) !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more:hover {
            transform: translateY(-3px);
            filter: saturate(1.12);
            box-shadow: 0 18px 30px -14px var(--aits-blue-dark) !important;
        }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more svg { transition: transform .24s var(--ease,ease); }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more:hover svg { transform: translateX(3px); }
        .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(54,128,237,.35),
                        0 18px 30px -14px var(--aits-blue-dark) !important;
        }

        @media (hover: none) {
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover { transform: none; }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-ico { transform: none; }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip::after { display: none; }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more:hover { transform: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip,
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip-ico,
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more { transition: none !important; }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover,
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-ico,
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more:hover { transform: none !important; }
            .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip::after { display: none !important; }
        }