.aitsy-cat{
    /* ── Blue palette (design.md §2.1) ───────────────────────────── */
    --ez-red:#3680ED;          /* aits-blue          */
    --ez-red-dark:#2060C0;     /* aits-blue-dark     */
    --ez-red-soft:#60A4F5;     /* aits-blue-soft     */
    --ez-tint:#EAF2FD;         /* aits-blue-tint      */
    --ez-tint-2:#F4F8FE;       /* aits-blue-tint-2    */
    --ez-line-blue:#CFE0FA;    /* aits-blue-line      */

    /* ── Neutrals ────────────────────────────────────────────────── */
    --ez-white:#FFFFFF;
    --ez-bg:#FAFAFA;
    --ez-bg-2:#F7F7F8;
    --ez-line:#ECECEC;
    --ez-line-2:#DADADA;
    --ez-mut:#888888;
    --ez-txt-2:#444444;
    --ez-ink:#111111;

    /* ── Colour tints — one pair per hue, cycled across tool icons and
          used by the badge set. Kept as bg/ink pairs so the dark layer can
          remap both halves in one place. ────────────────────────────── */
    --t-blue-bg:rgba(54,128,237,.12);    --t-blue-ink:#2060C0;    --t-blue-ln:rgba(54,128,237,.26);
    --t-violet-bg:rgba(139,92,246,.12);  --t-violet-ink:#6D28D9;  --t-violet-ln:rgba(139,92,246,.26);
    --t-emerald-bg:rgba(16,185,129,.13); --t-emerald-ink:#047857; --t-emerald-ln:rgba(16,185,129,.28);
    --t-amber-bg:rgba(245,158,11,.14);   --t-amber-ink:#B45309;   --t-amber-ln:rgba(245,158,11,.30);
    --t-rose-bg:rgba(244,63,94,.12);     --t-rose-ink:#BE123C;    --t-rose-ln:rgba(244,63,94,.26);
    --t-cyan-bg:rgba(6,182,212,.13);     --t-cyan-ink:#0E7490;    --t-cyan-ln:rgba(6,182,212,.28);
    --t-indigo-bg:rgba(99,102,241,.12);  --t-indigo-ink:#4338CA;  --t-indigo-ln:rgba(99,102,241,.26);
    --t-pink-bg:rgba(236,72,153,.12);    --t-pink-ink:#BE185D;    --t-pink-ln:rgba(236,72,153,.26);

    --ez-radius:20px;
    --ez-radius-sm:14px;
    --ez-gap:32px;
    --ez-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
    --ez-shadow-lg:0 10px 40px rgba(54,128,237,.16);   /* aits-blue card-hover glow */
    --ez-trans:.25s cubic-bezier(.4,0,.2,1);

    /* Horizontal geometry belongs to the layout container. This page renders
       into layouts.seo-page's `.page-body > .container`, which already caps at
       --seo-shell-max (1600px) and pads with --seo-shell-pad (the header's
       24/20/14/11 ramp). Re-capping at 1320px and re-padding 20px on top put
       the hero ~136px inside the breadcrumb directly above it. Vertical only. */
    margin:0 auto;
    padding:22px 0 0;
    color:var(--ez-ink);
    font-feature-settings:"cv02","cv03","cv04","cv11";
    -webkit-font-smoothing:antialiased;
}
.aitsy-cat *{box-sizing:border-box}
.aitsy-cat a{text-decoration:none;color:inherit}

/* ═══════════════════ HERO ═══════════════════ */
.aitsy-hero{
    position:relative;isolation:isolate;overflow:hidden;
    display:grid;
    grid-template-columns:1fr 340px;
    gap:28px;
    align-items:stretch;
    background:
        radial-gradient(90% 130% at 4% 0%,rgba(54,128,237,.16) 0%,transparent 58%),
        radial-gradient(70% 120% at 96% 100%,rgba(139,92,246,.13) 0%,transparent 60%),
        linear-gradient(180deg,var(--ez-tint) 0%,var(--ez-tint-2) 100%);
    border:1px solid var(--ez-line-blue);
    border-radius:var(--ez-radius);
    padding:36px;
    margin-bottom:22px;
}
/* Fine dot mesh, faded out toward the edges */
.aitsy-hero::before{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:radial-gradient(circle,rgba(54,128,237,.14) 1px,transparent 1.5px);
    background-size:22px 22px;
    -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 25%,transparent 100%);
    mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 25%,transparent 100%);
    opacity:.55;
}
.hero-main{display:flex;gap:22px;align-items:flex-start}
.hero-icon{
    position:relative;
    width:78px;height:78px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(140deg,var(--ez-red) 0%,var(--ez-red-dark) 100%);
    border:0;
    border-radius:20px;
    color:#fff;
    box-shadow:0 14px 30px -12px rgba(54,128,237,.65),inset 0 1px 0 rgba(255,255,255,.32);
    transition:transform var(--ez-trans),box-shadow var(--ez-trans);
}
/* Soft outer halo */
.hero-icon::after{
    content:'';position:absolute;inset:-6px;border-radius:26px;z-index:-1;
    background:radial-gradient(circle,rgba(54,128,237,.30),transparent 70%);
    filter:blur(8px);
}
.hero-icon img{width:44px;height:44px;object-fit:contain}
.hero-icon svg{width:38px;height:38px}
.hero-text{min-width:0}
.hero-text h1{
    font-size:clamp(28px,3.4vw,40px);
    font-weight:800;
    line-height:1.1;
    letter-spacing:-.02em;
    margin:2px 0 10px;
    color:var(--ez-ink);
}
.hero-text>p{
    font-size:15.5px;line-height:1.65;color:var(--ez-txt-2);
    max-width:60ch;margin:0 0 18px;
}
/* Meta pills — one hue each so the row scans as distinct facts, not a
   repeated blue chip. Tone is assigned by position via :nth-child. */
.hero-meta{display:flex;flex-wrap:wrap;gap:10px}
.hero-meta .hm{
    display:inline-flex;align-items:center;gap:7px;
    background:var(--ez-white);
    box-shadow:inset 0 0 0 1px var(--hm-ln,var(--t-blue-ln)),0 1px 2px rgba(15,23,42,.04);
    border:0;
    color:var(--hm-ink,var(--t-blue-ink));
    font-size:12.5px;font-weight:700;
    padding:8px 14px;border-radius:50px;
    transition:transform var(--ez-trans),box-shadow var(--ez-trans),background var(--ez-trans);
}
.hero-meta .hm svg{color:currentColor;flex:none}
.hero-meta .hm:nth-child(1){--hm-ink:var(--t-blue-ink);   --hm-ln:var(--t-blue-ln)}
.hero-meta .hm:nth-child(2){--hm-ink:var(--t-emerald-ink);--hm-ln:var(--t-emerald-ln)}
.hero-meta .hm:nth-child(3){--hm-ink:var(--t-violet-ink); --hm-ln:var(--t-violet-ln)}
.hero-meta .hm:nth-child(4){--hm-ink:var(--t-amber-ink);  --hm-ln:var(--t-amber-ln)}
@media(hover:hover){
    .hero-meta .hm:hover{
        transform:translateY(-2px);
        box-shadow:inset 0 0 0 1px var(--hm-ln),0 10px 20px -12px currentColor;
    }
    .aitsy-hero:hover .hero-icon{transform:translateY(-2px) rotate(-2deg)}
}

/* Why AIToolsay card (hero right) */
.why-card{
    background:var(--ez-white);
    border:1px solid var(--ez-line-blue);
    border-radius:18px;
    padding:20px;
    display:flex;flex-direction:column;gap:2px;
    box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 40px -30px rgba(54,128,237,.6);
}
.why-card h4{
    display:flex;align-items:center;gap:8px;
    font-size:13px;font-weight:800;letter-spacing:-.01em;
    margin:0 0 8px;color:var(--ez-ink);
}
/* Accent tick before the card title */
.why-card h4::before{
    content:'';width:4px;height:14px;border-radius:3px;flex:none;
    background:linear-gradient(180deg,var(--ez-red),var(--ez-red-dark));
}
.why-row{
    display:flex;gap:12px;align-items:flex-start;
    padding:9px 8px;margin:0 -8px;border-radius:12px;
    border-top:1px solid var(--ez-bg-2);
    transition:background var(--ez-trans);
}
.why-row:first-of-type{border-top:0}
.why-ic{
    width:34px;height:34px;flex-shrink:0;border-radius:11px;
    display:flex;align-items:center;justify-content:center;
    background:var(--wi-bg,var(--t-blue-bg));
    color:var(--wi-ink,var(--t-blue-ink));
    box-shadow:inset 0 0 0 1px var(--wi-ln,var(--t-blue-ln));
    transition:transform var(--ez-trans);
}
.why-ic svg{width:18px;height:18px}
/* A different hue per benefit row */
.why-row:nth-of-type(1) .why-ic{--wi-bg:var(--t-blue-bg);   --wi-ink:var(--t-blue-ink);   --wi-ln:var(--t-blue-ln)}
.why-row:nth-of-type(2) .why-ic{--wi-bg:var(--t-violet-bg); --wi-ink:var(--t-violet-ink); --wi-ln:var(--t-violet-ln)}
.why-row:nth-of-type(3) .why-ic{--wi-bg:var(--t-amber-bg);  --wi-ink:var(--t-amber-ink);  --wi-ln:var(--t-amber-ln)}
.why-row:nth-of-type(4) .why-ic{--wi-bg:var(--t-emerald-bg);--wi-ink:var(--t-emerald-ink);--wi-ln:var(--t-emerald-ln)}
@media(hover:hover){
    .why-row:hover{background:var(--ez-tint-2)}
    .why-row:hover .why-ic{transform:scale(1.07)}
}
.why-tx b{display:block;font-size:13px;font-weight:700;color:var(--ez-ink);line-height:1.2}
.why-tx span{display:block;font-size:11.5px;color:var(--ez-mut);margin-top:2px;line-height:1.35}
.hero-art{display:none}

/* ═══════════════════ TOOLBAR (search + chips) ═══════════════════ */
.aitsy-toolbar{
    position:sticky;top:0;z-index:30;
    background:rgba(255,255,255,.86);
    backdrop-filter:saturate(180%) blur(16px);
    -webkit-backdrop-filter:saturate(180%) blur(16px);
    border:1px solid var(--ez-line);
    border-radius:var(--ez-radius);
    padding:16px 18px;
    margin-bottom:26px;
    box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 34px -26px rgba(15,23,42,.4);
}
.tb-top{display:flex;gap:12px;align-items:center;margin-bottom:14px}
/* Premium search field — soft inset base, brand glow + lift on focus. */
.tb-search{
    flex:1;display:flex;align-items:center;gap:11px;
    background:linear-gradient(180deg,var(--ez-white),var(--ez-bg-2));
    border:1.5px solid var(--ez-line);
    border-radius:14px;
    padding:13px 16px;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.03);
    transition:border-color var(--ez-trans),box-shadow var(--ez-trans),background var(--ez-trans);
}
.tb-search:focus-within{
    border-color:var(--ez-red);
    background:var(--ez-white);
    box-shadow:0 0 0 4px rgba(54,128,237,.12),0 8px 20px rgba(54,128,237,.10);
}
.tb-search-ic{color:var(--ez-mut);flex-shrink:0;transition:color var(--ez-trans)}
.tb-search:focus-within .tb-search-ic{color:var(--ez-red)}
.tb-search input{
    flex:1;min-width:0;border:0;outline:0;background:transparent;
    font-size:15px;color:var(--ez-ink);font-family:inherit;font-weight:500;
}
.tb-search input::placeholder{color:var(--ez-mut);font-weight:400}
/* Clear button — only rendered while there's a query */
.tb-search-x{
    flex:none;width:26px;height:26px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--ez-bg-2);border:0;color:var(--ez-mut);cursor:pointer;
    transition:background var(--ez-trans),color var(--ez-trans),transform var(--ez-trans);
}
.tb-search-x:hover{background:var(--ez-tint);color:var(--ez-red-dark)}
.tb-search-x:active{transform:scale(.9)}
.tb-search-x:focus-visible{outline:2px solid var(--ez-red);outline-offset:2px}
/* Debounced-search spinner */
.tb-search-busy{
    flex:none;width:16px;height:16px;border-radius:50%;
    border:2px solid var(--ez-line-2);border-top-color:var(--ez-red);
    animation:tb-spin .6s linear infinite;
}
@keyframes tb-spin{to{transform:rotate(360deg)}}
.tb-right{flex-shrink:0}

/* ── Sort listbox — replaces the native <select>, whose option list the OS
      draws and CSS cannot touch. Trigger pill + floating panel. ── */
.tb-sortbox{position:relative}
.tb-sort-btn{
    display:inline-flex;align-items:center;gap:11px;
    background:linear-gradient(180deg,var(--ez-white) 0%,var(--ez-bg-2) 100%);
    border:1.5px solid var(--ez-line);border-radius:14px;
    padding:8px 14px 8px 9px;min-height:52px;
    font-family:inherit;color:var(--ez-ink);
    cursor:pointer;white-space:nowrap;
    box-shadow:0 1px 2px rgba(15,23,42,.04),inset 0 1px 0 rgba(255,255,255,.7);
    transition:border-color var(--ez-trans),box-shadow var(--ez-trans),transform var(--ez-trans),background var(--ez-trans);
}
.tb-sort-btn:hover{
    background:var(--ez-white);
    border-color:var(--ez-red-soft);
    box-shadow:0 10px 20px -12px rgba(54,128,237,.8),inset 0 1px 0 rgba(255,255,255,.8);
    transform:translateY(-1px);
}
.tb-sort-btn:focus-visible{outline:none;border-color:var(--ez-red);box-shadow:0 0 0 4px rgba(54,128,237,.14)}
.tb-sortbox.is-open .tb-sort-btn{
    background:var(--ez-white);
    border-color:var(--ez-red);
    box-shadow:0 0 0 4px rgba(54,128,237,.12);
}
/* Two-line label: static caption over the live value */
.ts-lb{flex:1;display:flex;flex-direction:column;gap:1px;text-align:left;min-width:0}
.ts-cap{
    font-size:10px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
    color:var(--ez-mut);line-height:1.1;
}
.ts-val{font-size:14px;font-weight:750;letter-spacing:-.012em;color:var(--ez-ink);line-height:1.2}
.tb-sortbox.is-open .ts-val,.tb-sort-btn:hover .ts-val{color:var(--ez-red-dark)}
.ts-cv{width:15px;height:15px;color:var(--ez-mut);flex:none;transition:transform var(--ez-trans),color var(--ez-trans)}
.tb-sort-btn:hover .ts-cv{color:var(--ez-red)}

/* Panel header — labels the list so the panel isn't a bare sheet */
.ts-head{
    display:flex;align-items:center;
    padding:8px 12px 9px;margin:0 0 4px;
    border-bottom:1px solid var(--ez-line);
}
.ts-head span{
    font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
    color:var(--ez-mut);
}
.tb-sortbox.is-open .ts-cv{transform:rotate(180deg);color:var(--ez-red)}

/* Tinted icon chip, shared by the trigger and each option */
.ts-ic,.ts-opt-ic{
    width:30px;height:30px;border-radius:9px;flex:none;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--so-bg,var(--t-blue-bg));color:var(--so-ink,var(--t-blue-ink));
    box-shadow:inset 0 0 0 1px var(--so-ln,var(--t-blue-ln));
    transition:transform var(--ez-trans);
}
.ts-ic svg,.ts-opt-ic svg{width:16px;height:16px}
/* Scoped — the site header also emits data-tone on its mega-menu items.
   Only the cool, on-brand hues are wired up here; the warm tints stay
   reserved for the status badges, where the colour carries meaning. */
.aitsy-cat .ts-ic[data-tone="blue"],   .aitsy-cat .ts-opt-ic[data-tone="blue"]   {--so-bg:var(--t-blue-bg);   --so-ink:var(--t-blue-ink);   --so-ln:var(--t-blue-ln)}
.aitsy-cat .ts-ic[data-tone="cyan"],   .aitsy-cat .ts-opt-ic[data-tone="cyan"]   {--so-bg:var(--t-cyan-bg);   --so-ink:var(--t-cyan-ink);   --so-ln:var(--t-cyan-ln)}
.aitsy-cat .ts-ic[data-tone="indigo"], .aitsy-cat .ts-opt-ic[data-tone="indigo"] {--so-bg:var(--t-indigo-bg); --so-ink:var(--t-indigo-ink); --so-ln:var(--t-indigo-ln)}
.aitsy-cat .ts-ic[data-tone="violet"], .aitsy-cat .ts-opt-ic[data-tone="violet"] {--so-bg:var(--t-violet-bg); --so-ink:var(--t-violet-ink); --so-ln:var(--t-violet-ln)}

/* ── Panel ── */
.tb-sort-menu{
    position:absolute;z-index:60;top:calc(100% + 10px);right:0;
    width:312px;padding:8px;
    background:linear-gradient(180deg,var(--ez-tint-2) 0%,var(--ez-white) 34%);
    border:1px solid var(--ez-line);
    border-radius:20px;
    box-shadow:
        0 2px 6px rgba(15,23,42,.06),
        0 28px 60px -24px rgba(15,23,42,.42),
        inset 0 1px 0 rgba(255,255,255,.9);
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;
    transition:opacity .2s var(--ez-trans),transform .22s cubic-bezier(.4,0,.2,1),visibility .22s;
}
/* Pointer notch tying the panel back to the trigger */
.tb-sort-menu::before{
    content:'';position:absolute;top:-6px;right:22px;
    width:11px;height:11px;transform:rotate(45deg);
    background:var(--ez-tint-2);
    border-left:1px solid var(--ez-line);border-top:1px solid var(--ez-line);
    border-radius:2px;
}
.tb-sortbox.is-open .tb-sort-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.ts-list{display:flex;flex-direction:column;gap:2px}

.ts-opt{
    position:relative;
    display:flex;align-items:center;gap:12px;width:100%;
    padding:9px 11px;min-height:50px;
    background:transparent;border:0;border-radius:14px;
    font-family:inherit;font-size:14px;font-weight:600;color:var(--ez-txt-2);
    text-align:left;cursor:pointer;
    transition:background var(--ez-trans),color var(--ez-trans),box-shadow var(--ez-trans),transform var(--ez-trans);
}
.ts-opt-lb{flex:1;min-width:0}
/* Check sits in its own disc so the selected row has a clear terminal mark */
.ts-opt-ck{
    width:22px;height:22px;flex:none;padding:3px;border-radius:50%;
    color:#fff;background:var(--ez-red);
    box-shadow:0 4px 10px -4px rgba(54,128,237,.9);
    opacity:0;transform:scale(.6);
    transition:opacity var(--ez-trans),transform var(--ez-trans);
}
.ts-opt.is-on{
    background:var(--ez-tint);color:var(--ez-red-dark);font-weight:750;
    box-shadow:inset 0 0 0 1px var(--ez-line-blue);
}
.ts-opt.is-on .ts-opt-ck{opacity:1;transform:scale(1)}
/* Accent bar on the selected row, matching the rail and FAQ language */
.ts-opt.is-on::before{
    content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:3px;height:22px;border-radius:3px;
    background:linear-gradient(180deg,var(--ez-red),var(--ez-red-dark));
}
@media(hover:hover){
    .ts-opt:hover{background:var(--ez-tint-2);color:var(--ez-ink);transform:translateX(2px)}
    .ts-opt:hover .ts-opt-ic{transform:scale(1.08)}
    .ts-opt.is-on:hover{background:var(--ez-tint);color:var(--ez-red-dark);transform:none}
}
.ts-opt:active{transform:translateX(0) scale(.99)}
.ts-opt:focus-visible{outline:2px solid var(--ez-red);outline-offset:-2px}

/* ── Context footer — says what the current sort actually does.
      White card: a solid blue block closed the panel too heavily against
      the light surface above it. Colour now lives in the icon tile. ── */
.ts-foot{
    position:relative;overflow:hidden;
    display:flex;align-items:center;gap:13px;
    margin-top:8px;padding:14px 13px;border-radius:16px;
    background:var(--ez-white);
    box-shadow:
        inset 0 0 0 1px var(--ez-line-blue),
        0 10px 22px -16px rgba(54,128,237,.8);
}
/* Soft brand wash rising from the bottom-left corner */
.ts-foot::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(110% 130% at 0% 100%,var(--ez-tint) 0%,transparent 62%);
}
.ts-foot-ic{
    position:relative;
    width:38px;height:38px;border-radius:12px;flex:none;
    display:inline-flex;align-items:center;justify-content:center;
    background:linear-gradient(140deg,var(--ez-red) 0%,var(--ez-red-dark) 100%);
    color:#fff;
    box-shadow:0 8px 16px -8px rgba(54,128,237,.85),inset 0 1px 0 rgba(255,255,255,.3);
}
.ts-foot-ic svg{width:19px;height:19px}
.ts-foot-tx{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0}
/* Title carries the weight; the description drops to regular so the two
   don't compete — at 800/800 the whole card read as one bold block. */
.ts-foot-tx b{font-size:13.5px;font-weight:800;color:var(--ez-ink);letter-spacing:-.014em;line-height:1.25}
.ts-foot-tx>span{font-size:12.5px;font-weight:500;line-height:1.5;color:var(--ez-mut)}

@media(prefers-reduced-motion:reduce){
    .tb-sort-menu{transition:opacity .01s}
}
/* ── Filter chips — horizontally scrollable, with edge fades so a cut-off
      row reads as "more this way" instead of a clipped list. ── */
.tb-chips-wrap{position:relative}
.tb-chips-wrap::before,
.tb-chips-wrap::after{
    content:'';position:absolute;top:0;bottom:0;width:56px;z-index:2;
    pointer-events:none;opacity:0;transition:opacity var(--ez-trans);
}
.tb-chips-wrap::before{left:0;background:linear-gradient(90deg,var(--ez-white) 12%,transparent 100%)}
.tb-chips-wrap::after{right:0;background:linear-gradient(270deg,var(--ez-white) 12%,transparent 100%)}
.tb-chips-wrap[data-at-start="0"]::before{opacity:1}
.tb-chips-wrap[data-at-end="0"]::after{opacity:1}

/* Desktop nudge arrows — hidden until the row actually overflows */
.tb-chip-nav{
    position:absolute;top:50%;transform:translateY(-50%);z-index:3;
    width:30px;height:30px;border-radius:50%;
    display:none;align-items:center;justify-content:center;
    background:var(--ez-white);border:1px solid var(--ez-line);
    color:var(--ez-ink);cursor:pointer;
    box-shadow:0 6px 16px -8px rgba(15,23,42,.5);
    transition:background var(--ez-trans),color var(--ez-trans),border-color var(--ez-trans),transform var(--ez-trans);
}
.tb-chip-nav.prev{left:-6px}
.tb-chip-nav.next{right:-6px}
.tb-chip-nav:hover{background:var(--ez-red);border-color:var(--ez-red);color:#fff}
.tb-chip-nav:active{transform:translateY(-50%) scale(.9)}
.tb-chip-nav:focus-visible{outline:2px solid var(--ez-red);outline-offset:2px}
@media(min-width:861px) and (hover:hover){
    .tb-chips-wrap[data-at-start="0"] .tb-chip-nav.prev,
    .tb-chips-wrap[data-at-end="0"]   .tb-chip-nav.next{display:inline-flex}
}

.tb-chips{display:flex;align-items:center;gap:9px;overflow-x:auto;padding:2px;scrollbar-width:none;scroll-behavior:smooth}
.tb-chips::-webkit-scrollbar{display:none}

/* Divider between the built-in status filters and the topic tags */
.chip-sep{
    flex:none;width:1px;height:22px;margin:0 3px;
    background:var(--ez-line-2);border-radius:1px;
}

.chip{
    flex-shrink:0;
    display:inline-flex;align-items:center;gap:7px;
    background:var(--ez-white);
    border:1.5px solid var(--ez-line);
    color:var(--ez-txt-2);
    font-size:13px;font-weight:600;font-family:inherit;
    padding:8px 15px 8px 12px;border-radius:50px;cursor:pointer;
    transition:background var(--ez-trans),border-color var(--ez-trans),color var(--ez-trans),box-shadow var(--ez-trans),transform var(--ez-trans);
    white-space:nowrap;
}
/* Each status filter owns a hue, matching its card badge. The icon is
   always tinted; the rest of the chip only picks up the hue on hover/active,
   so the resting row stays calm rather than a wall of colour. */
.chip[data-chip-tone="blue"]   {--c-bg:var(--t-blue-bg);   --c-ink:var(--t-blue-ink);   --c-ln:var(--t-blue-ln);   --c-solid:#3680ED}
.chip[data-chip-tone="rose"]   {--c-bg:var(--t-rose-bg);   --c-ink:var(--t-rose-ink);   --c-ln:var(--t-rose-ln);   --c-solid:#F43F5E}
.chip[data-chip-tone="amber"]  {--c-bg:var(--t-amber-bg);  --c-ink:var(--t-amber-ink);  --c-ln:var(--t-amber-ln);  --c-solid:#F59E0B}
.chip[data-chip-tone="emerald"]{--c-bg:var(--t-emerald-bg);--c-ink:var(--t-emerald-ink);--c-ln:var(--t-emerald-ln);--c-solid:#10B981}
.chip[data-chip-tone="cyan"]   {--c-bg:var(--t-cyan-bg);   --c-ink:var(--t-cyan-ink);   --c-ln:var(--t-cyan-ln);   --c-solid:#06B6D4}
.chip[data-chip-tone="violet"] {--c-bg:var(--t-violet-bg); --c-ink:var(--t-violet-ink); --c-ln:var(--t-violet-ln); --c-solid:#8B5CF6}

.chip-ic{
    display:inline-flex;flex:none;
    color:var(--c-ink,var(--ez-mut));
    transition:color var(--ez-trans),transform var(--ez-trans);
}
.chip-ic svg{width:14px;height:14px}
@media(hover:hover){
    .chip[data-chip-tone]:hover{
        background:var(--c-bg);
        border-color:var(--c-ln);
        color:var(--c-ink);
    }
    .chip[data-chip-tone]:hover .chip-ic{transform:scale(1.12)}
}
/* Active: solid hue with a matching glow */
.chip.is-active[data-chip-tone]{
    background:var(--c-solid);
    border-color:transparent;color:#fff;
    box-shadow:0 8px 18px -8px var(--c-solid),inset 0 1px 0 rgba(255,255,255,.28);
}
.chip.is-active[data-chip-tone]:hover{background:var(--c-solid);color:#fff}
.chip.is-active .chip-ic{color:#fff}

/* Topic tags carry no icon — a cycling dot gives the row colour without
   turning every tag into a coloured pill. */
.chip-tag{padding:8px 15px}
.chip-tag::before{
    content:'';width:6px;height:6px;border-radius:50%;flex:none;
    background:var(--tag-dot,var(--ez-line-2));
    transition:background var(--ez-trans),box-shadow var(--ez-trans);
}
.chip-tag:nth-of-type(8n+1){--tag-dot:#3680ED}
.chip-tag:nth-of-type(8n+2){--tag-dot:#8B5CF6}
.chip-tag:nth-of-type(8n+3){--tag-dot:#10B981}
.chip-tag:nth-of-type(8n+4){--tag-dot:#F59E0B}
.chip-tag:nth-of-type(8n+5){--tag-dot:#F43F5E}
.chip-tag:nth-of-type(8n+6){--tag-dot:#06B6D4}
.chip-tag:nth-of-type(8n+7){--tag-dot:#6366F1}
.chip-tag:nth-of-type(8n+8){--tag-dot:#EC4899}
@media(hover:hover){
    .chip-tag:hover{border-color:var(--tag-dot);color:var(--ez-ink)}
    .chip-tag:hover::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--tag-dot) 22%,transparent)}
}
.chip-tag.is-active{
    background:var(--tag-dot);border-color:transparent;color:#fff;
    box-shadow:0 8px 18px -8px var(--tag-dot),inset 0 1px 0 rgba(255,255,255,.28);
}
.chip-tag.is-active::before{background:rgba(255,255,255,.9);box-shadow:none}
.chip:hover{border-color:var(--ez-red-soft);color:var(--ez-red-dark);transform:translateY(-1px)}
.chip:active{transform:translateY(0) scale(.97)}
.chip.is-active{
    background:linear-gradient(140deg,var(--ez-red),var(--ez-red-dark));
    border-color:transparent;color:#fff;
    box-shadow:0 8px 18px -8px rgba(54,128,237,.75),inset 0 1px 0 rgba(255,255,255,.22);
}
.chip.is-active:hover{color:#fff;transform:translateY(-1px)}
.chip:focus-visible{outline:2px solid var(--ez-red);outline-offset:2px}

/* ═══════════════════ SECTION HEADS ═══════════════════ */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;gap:16px}
.sec-head h2{
    display:flex;align-items:center;gap:11px;
    font-size:clamp(20px,2.1vw,24px);font-weight:800;letter-spacing:-.024em;
    margin:0;color:var(--ez-ink);line-height:1.2;
}
/* Accent tick that anchors every section title */
.sec-head h2::before{
    content:'';width:5px;height:20px;border-radius:3px;flex:none;
    background:linear-gradient(180deg,var(--ez-red),var(--ez-red-dark));
}
.sec-sub{font-size:14px;color:var(--ez-mut);margin:8px 0 0}
.sec-link{
    display:inline-flex;align-items:center;gap:6px;
    color:var(--ez-red);font-size:13.5px;font-weight:700;white-space:nowrap;
    padding:8px 14px;border-radius:999px;
    background:var(--ez-white);
    box-shadow:inset 0 0 0 1px var(--ez-line-blue);
    transition:background var(--ez-trans),color var(--ez-trans),box-shadow var(--ez-trans),transform var(--ez-trans);
}
.sec-link:hover{
    background:var(--ez-red);color:#fff;
    box-shadow:0 10px 22px -10px rgba(54,128,237,.9);
    transform:translateY(-1px);
}
.pill{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--ez-tint);color:var(--ez-red-dark);
    box-shadow:inset 0 0 0 1px var(--ez-line-blue);
    font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
    padding:5px 13px;border-radius:50px;margin-bottom:10px;
}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85}

/* ═══════════════════ FEATURED SLIDER ═══════════════════ */
.aitsy-featured{margin-bottom:34px}
.feat-wrap{position:relative}
.feat-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 10px;scrollbar-width:none}
.feat-track::-webkit-scrollbar{display:none}
.feat-arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:5;
    width:40px;height:40px;border-radius:50%;
    background:var(--ez-white);border:1px solid var(--ez-line);
    color:var(--ez-ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 18px rgba(15,23,42,.12);transition:all var(--ez-trans);
}
.feat-arrow:hover{background:var(--ez-red);border-color:var(--ez-red);color:#fff}
.feat-arrow.left{left:-14px}
.feat-arrow.right{right:-14px}
.feat-card{
    position:relative;overflow:hidden;
    flex:0 0 300px;scroll-snap-align:start;
    background:var(--ez-white);
    border:1px solid var(--ez-line);
    border-radius:var(--ez-radius);
    padding:22px;
    display:flex;flex-direction:column;
    transition:transform var(--ez-trans),box-shadow var(--ez-trans),border-color var(--ez-trans);
}
/* Accent bar that wipes in along the top edge on hover */
.feat-card::before,.tool-card::before{
    content:'';position:absolute;left:0;right:0;top:0;height:3px;
    background:linear-gradient(90deg,var(--ez-red),var(--ez-red-soft));
    transform:scaleX(0);transform-origin:left;
    transition:transform .32s cubic-bezier(.4,0,.2,1);
}
@media(hover:hover){
    .feat-card:hover{transform:translateY(-6px);box-shadow:var(--ez-shadow-lg);border-color:var(--ez-line-blue)}
    .feat-card:hover::before,.tool-card:hover::before{transform:scaleX(1)}
    .feat-card:hover .tool-icon,.tool-card:hover .tool-icon{transform:scale(1.06) rotate(-3deg)}
    .feat-card:hover .badge,.tool-card:hover .badge{transform:translateY(-1px);filter:saturate(1.15)}
}
.feat-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.feat-card h3{font-size:17px;font-weight:700;margin:0 0 8px;letter-spacing:-.01em;color:var(--ez-ink)}
.feat-card>p{font-size:13.5px;line-height:1.6;color:var(--ez-mut);margin:0 0 16px;flex:1;
    display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.feat-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.feat-actions{display:flex;gap:9px;margin-top:auto}

/* ═══════════════════ TOOL ICON ═══════════════════
   Each card gets a tone from the blade's cycling palette, so a grid of
   tools reads as colourful rather than a wall of blue. */
.tool-icon{
    position:relative;
    width:52px;height:52px;flex-shrink:0;border-radius:15px;
    background:var(--ti-bg,var(--t-blue-bg));
    color:var(--ti-ink,var(--t-blue-ink));
    box-shadow:inset 0 0 0 1px var(--ti-ln,var(--t-blue-ln));
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    transition:transform var(--ez-trans),box-shadow var(--ez-trans);
}
.tool-icon img{width:32px;height:32px;object-fit:contain}
.tool-icon svg{width:28px;height:28px;color:currentColor}
.ti-fallback{font-size:22px;font-weight:800;color:currentColor}
.ti-fallback.sm{font-size:14px}

.tool-icon[data-tone="blue"]   {--ti-bg:var(--t-blue-bg);   --ti-ink:var(--t-blue-ink);   --ti-ln:var(--t-blue-ln)}
.tool-icon[data-tone="violet"] {--ti-bg:var(--t-violet-bg); --ti-ink:var(--t-violet-ink); --ti-ln:var(--t-violet-ln)}
.tool-icon[data-tone="emerald"]{--ti-bg:var(--t-emerald-bg);--ti-ink:var(--t-emerald-ink);--ti-ln:var(--t-emerald-ln)}
.tool-icon[data-tone="amber"]  {--ti-bg:var(--t-amber-bg);  --ti-ink:var(--t-amber-ink);  --ti-ln:var(--t-amber-ln)}
.tool-icon[data-tone="rose"]   {--ti-bg:var(--t-rose-bg);   --ti-ink:var(--t-rose-ink);   --ti-ln:var(--t-rose-ln)}
.tool-icon[data-tone="cyan"]   {--ti-bg:var(--t-cyan-bg);   --ti-ink:var(--t-cyan-ink);   --ti-ln:var(--t-cyan-ln)}
.tool-icon[data-tone="indigo"] {--ti-bg:var(--t-indigo-bg); --ti-ink:var(--t-indigo-ink); --ti-ln:var(--t-indigo-ln)}
.tool-icon[data-tone="pink"]   {--ti-bg:var(--t-pink-bg);   --ti-ink:var(--t-pink-ink);   --ti-ln:var(--t-pink-ln)}

/* ═══════════════════ BADGES ═══════════════════
   One hue per meaning so a card's status is readable at a glance:
   featured=amber · popular=rose · new=emerald · premium=violet · free=blue.
   The leading dot is a pseudo-element, so no extra markup. */
/* Scoped to .aitsy-cat — `.badge` is a generic Tabler class and ad markup
   injected into the between_cards slot must not inherit these.

   Build: soft vertical gradient over a white base, a hairline ring in the
   badge's own hue, a top highlight for the glass edge, and a saturated dot
   with a matching glow. --bd-solid is the vivid hue used for the dot and
   shadow; --bd-ink is the darkened version used for text contrast. */
.aitsy-cat .badge{
    display:inline-flex;align-items:center;gap:6px;
    font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
    padding:5px 11px 5px 9px;border-radius:50px;white-space:nowrap;line-height:1;
    background:
        linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 100%),
        var(--bd-bg);
    color:var(--bd-ink);
    box-shadow:
        inset 0 0 0 1px var(--bd-ln),
        inset 0 1px 0 rgba(255,255,255,.7),
        0 2px 6px -3px var(--bd-solid);
    transition:transform var(--ez-trans),box-shadow var(--ez-trans),filter var(--ez-trans);
}
.aitsy-cat .badge::before{
    content:'';width:5px;height:5px;border-radius:50%;flex:none;
    background:var(--bd-solid);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--bd-solid) 22%,transparent),
               0 0 6px color-mix(in srgb,var(--bd-solid) 60%,transparent);
}
.aitsy-cat .b-featured{--bd-bg:var(--t-amber-bg);  --bd-ink:var(--t-amber-ink);  --bd-ln:var(--t-amber-ln);  --bd-solid:#F59E0B}
.aitsy-cat .b-popular {--bd-bg:var(--t-rose-bg);   --bd-ink:var(--t-rose-ink);   --bd-ln:var(--t-rose-ln);   --bd-solid:#F43F5E}
.aitsy-cat .b-new     {--bd-bg:var(--t-emerald-bg);--bd-ink:var(--t-emerald-ink);--bd-ln:var(--t-emerald-ln);--bd-solid:#10B981}

/* Dark: drop the white glass base, brighten the ring instead. */
body.theme-dark .aitsy-cat .badge{
    background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 100%),var(--bd-bg);
    box-shadow:
        inset 0 0 0 1px var(--bd-ln),
        inset 0 1px 0 rgba(255,255,255,.10),
        0 2px 8px -4px var(--bd-solid);
}

/* ═══════════════════ BUTTONS ═══════════════════ */
.aitsy-cat .btn-primary{
    position:relative;overflow:hidden;
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    background:linear-gradient(140deg,var(--ez-red) 0%,var(--ez-red-dark) 100%);
    color:#fff;
    font-size:13.5px;font-weight:700;font-family:inherit;
    padding:12px 18px;border-radius:12px;border:0;cursor:pointer;
    box-shadow:0 6px 16px -8px rgba(54,128,237,.7),inset 0 1px 0 rgba(255,255,255,.22);
    transition:transform var(--ez-trans),box-shadow var(--ez-trans),filter var(--ez-trans);
    flex:1;text-align:center;
}
/* Sheen that sweeps across on hover */
.aitsy-cat .btn-primary::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
    transform:translateX(-120%);
    transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(54,128,237,.85),inset 0 1px 0 rgba(255,255,255,.26)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.aitsy-cat .btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    background:var(--ez-white);color:var(--ez-red);
    font-size:13.5px;font-weight:700;font-family:inherit;
    padding:11px 18px;border-radius:12px;border:1.5px solid var(--ez-line);cursor:pointer;
    transition:all var(--ez-trans);
}
.btn-ghost:hover{border-color:var(--ez-red);color:var(--ez-red-dark);background:var(--ez-tint-2)}
.btn-light{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    background:var(--ez-red);color:#fff;font-weight:700;font-size:13.5px;
    padding:11px 18px;border-radius:12px;transition:all var(--ez-trans);
}
.btn-light:hover{background:var(--ez-red-dark);color:#fff}

/* ═══════════════════ BODY: sidebar + grid + rail ═══════════════════ */
.aitsy-body{display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:start;margin-bottom:38px}
/* Static by default: the full category list makes the rail taller than most
   viewports, and a sticky element taller than the screen traps its own bottom
   rows — you can never scroll to them. Pin it only when it genuinely fits. */
.rail-left{display:flex;flex-direction:column;gap:18px}
@media(min-height:1000px){
    .rail-left{position:sticky;top:96px}
}
.rail-card{
    background:var(--ez-white);border:1px solid var(--ez-line);
    border-radius:var(--ez-radius);padding:20px;
    box-shadow:0 1px 2px rgba(15,23,42,.03);
    transition:border-color var(--ez-trans),box-shadow var(--ez-trans);
}
@media(hover:hover){
    .rail-card:hover{border-color:var(--ez-line-blue);box-shadow:0 18px 40px -32px rgba(54,128,237,.8)}
}
.rail-card h4{
    display:flex;align-items:center;gap:9px;
    font-size:14px;font-weight:800;margin:0 0 14px;letter-spacing:-.01em;color:var(--ez-ink);
}
.rail-card:not(.rt-card) h4::before{
    content:'';width:4px;height:15px;border-radius:3px;flex:none;
    background:linear-gradient(180deg,var(--ez-red),var(--ez-red-dark));
}
/* Count chip pushed to the end of the flex title row */
.rail-count{
    margin-left:auto;
    font-size:11.5px;font-weight:800;line-height:1;
    color:var(--ez-red-dark);background:var(--ez-tint);
    box-shadow:inset 0 0 0 1px var(--ez-line-blue);
    padding:4px 9px;border-radius:50px;
}
/* Full height — every category is visible at once, no inner scrollbar.
   The rail is only pinned when the viewport is tall enough to hold it
   (see the min-height query below); otherwise it scrolls with the page,
   so the bottom entries are always reachable. */
.rail-list{
    list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
}
.rail-list li a{
    position:relative;
    display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:11px;
    transition:background var(--ez-trans),box-shadow var(--ez-trans),transform var(--ez-trans);
}
/* Chevron affordance — hidden until hover so the resting list stays calm */
.ri-go{
    width:15px;height:15px;flex:none;margin-left:auto;
    color:var(--ez-red);opacity:0;transform:translateX(-4px);
    transition:opacity var(--ez-trans),transform var(--ez-trans);
}
/* Current category (or the top-level ancestor of a deeper page) */
.rail-list li a.is-current{
    background:var(--ez-tint);
    box-shadow:inset 0 0 0 1px var(--ez-line-blue);
}
.rail-list li a.is-current .ri-name{color:var(--ez-red-dark);font-weight:750}
.rail-list li a.is-current .ri-go{opacity:1;transform:none}
/* Marker sits inside the link — the list is an overflow container, so a
   negatively-offset child would be clipped or trigger sideways scroll. */
.rail-list li a.is-current::before{
    content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:3px;height:20px;border-radius:3px;
    background:linear-gradient(180deg,var(--ez-red),var(--ez-red-dark));
}
/* Category rail icons cycle the same tint palette as the tool cards */
.ri-icon{
    width:30px;height:30px;flex-shrink:0;border-radius:9px;
    background:var(--ri-bg,var(--t-blue-bg));color:var(--ri-ink,var(--t-blue-ink));
    box-shadow:inset 0 0 0 1px var(--ri-ln,var(--t-blue-ln));
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    transition:transform var(--ez-trans);
}
.rail-list li:nth-child(8n+1) .ri-icon{--ri-bg:var(--t-blue-bg);   --ri-ink:var(--t-blue-ink);   --ri-ln:var(--t-blue-ln)}
.rail-list li:nth-child(8n+2) .ri-icon{--ri-bg:var(--t-violet-bg); --ri-ink:var(--t-violet-ink); --ri-ln:var(--t-violet-ln)}
.rail-list li:nth-child(8n+3) .ri-icon{--ri-bg:var(--t-emerald-bg);--ri-ink:var(--t-emerald-ink);--ri-ln:var(--t-emerald-ln)}
.rail-list li:nth-child(8n+4) .ri-icon{--ri-bg:var(--t-amber-bg);  --ri-ink:var(--t-amber-ink);  --ri-ln:var(--t-amber-ln)}
.rail-list li:nth-child(8n+5) .ri-icon{--ri-bg:var(--t-rose-bg);   --ri-ink:var(--t-rose-ink);   --ri-ln:var(--t-rose-ln)}
.rail-list li:nth-child(8n+6) .ri-icon{--ri-bg:var(--t-cyan-bg);   --ri-ink:var(--t-cyan-ink);   --ri-ln:var(--t-cyan-ln)}
.rail-list li:nth-child(8n+7) .ri-icon{--ri-bg:var(--t-indigo-bg); --ri-ink:var(--t-indigo-ink); --ri-ln:var(--t-indigo-ln)}
.rail-list li:nth-child(8n+8) .ri-icon{--ri-bg:var(--t-pink-bg);   --ri-ink:var(--t-pink-ink);   --ri-ln:var(--t-pink-ln)}
.ri-icon img{width:18px;height:18px;object-fit:contain}
.ri-icon svg{width:16px;height:16px;color:currentColor}
.ti-dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.ri-name{font-size:13.5px;font-weight:600;color:var(--ez-txt-2);line-height:1.3;transition:color var(--ez-trans)}
@media(hover:hover){
    .rail-list li a:hover{background:var(--ez-tint-2);transform:translateX(2px)}
    .rail-list li a:hover .ri-icon{transform:scale(1.08)}
    .rail-list li a:hover .ri-name{color:var(--ez-red-dark)}
    .rail-list li a:hover .ri-go{opacity:1;transform:none}
    .rail-list li a.is-current:hover{background:var(--ez-tint)}
}
.rail-list li a:focus-visible{outline:2px solid var(--ez-red);outline-offset:-2px}
/* The list is the whole card now — no trailing link to leave room for. */
.rail-cats-card{padding-bottom:16px}

/* Sidebar Request Tool CTA (added 2026-07-06) — subtle red-tinted rail-card
   with a filled brand-red pill button. Uses --ez-* tokens where possible so
   the sitewide dark theme layer picks it up automatically; hardcoded reds
   here match the design.md logo palette (#3680ED / #2060C0). */
.rt-card{
    /* isolate so the icon's z-index:-1 halo paints above this card's own
       background instead of disappearing behind it */
    position:relative;overflow:hidden;isolation:isolate;
    background:
        radial-gradient(120% 100% at 50% 0%,rgba(54,128,237,.14) 0%,transparent 62%),
        linear-gradient(180deg,var(--ez-white) 0%,#F4F8FE 100%);
    border:1px solid var(--ez-line-blue);
    text-align:center;
    padding:24px 20px
}
/* .rail-card h4 is a flex row (for its accent tick); this card is centred,
   so its title has to centre its own flex content or it hangs left. */
.rt-card h4{justify-content:center;margin:0 0 7px;font-size:15px;letter-spacing:-.015em}
.rt-ico{
    position:relative;
    width:46px;height:46px;border-radius:14px;margin:0 auto 13px;
    background:linear-gradient(140deg,#3680ED 0%,#2060C0 100%);
    color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 24px -10px rgba(54,128,237,.7),inset 0 1px 0 rgba(255,255,255,.28);
    transition:transform var(--ez-trans)
}
/* Soft halo behind the plus tile */
.rt-ico::after{
    content:'';position:absolute;inset:-6px;border-radius:20px;z-index:-1;
    background:radial-gradient(circle,rgba(54,128,237,.35),transparent 70%);
    filter:blur(8px);
}
.rt-copy{font-size:12.8px;line-height:1.55;color:var(--ez-mut);margin:0 auto 15px;max-width:30ch}
@media(hover:hover){
    .rt-card:hover .rt-ico{transform:translateY(-2px) rotate(-4deg)}
}
.rt-btn{
    position:relative;overflow:hidden;
    display:inline-flex;align-items:center;gap:7px;
    background:linear-gradient(140deg,#3680ED 0%,#2060C0 100%);
    color:#fff !important;font-weight:700;font-size:13px;
    padding:10px 20px;border-radius:999px;
    box-shadow:0 10px 20px -8px rgba(54,128,237,.75),inset 0 1px 0 rgba(255,255,255,.24);
    transition:transform var(--ez-trans),box-shadow var(--ez-trans)
}
/* Sheen sweep, matching the other primary buttons on the page */
.rt-btn::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);
    transform:translateX(-120%);transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.rt-btn svg{position:relative;z-index:1;transition:transform var(--ez-trans)}
.rt-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 30px -10px rgba(54,128,237,.9),inset 0 1px 0 rgba(255,255,255,.28)
}
.rt-btn:hover::after{transform:translateX(120%)}
.rt-btn:hover svg{transform:translateX(3px)}
.rt-btn:active{transform:translateY(0) scale(.985)}
/* Dark-mode: swap the milky pink gradient for a warm near-black tint that
   sits well against the sitewide dark canvas ([[eiztools-sitewide-theme-layer]]). */
body.theme-dark .rt-card{
    background:linear-gradient(180deg,#1A1A1D 0%,#141C2A 100%);
    border-color:rgba(54,128,237,.35)
}
body.theme-dark .rt-copy{color:#9A9AA2}

/* Grid zone */
.grid-zone{min-width:0}
.grid-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:14px}
.gh-left{display:flex;align-items:center;gap:12px;min-width:0}
.gh-left h2{
    display:flex;align-items:center;gap:11px;
    font-size:clamp(20px,2.1vw,24px);font-weight:800;letter-spacing:-.024em;
    margin:0;color:var(--ez-ink);line-height:1.2;
}
.gh-left h2::before{
    content:'';width:5px;height:20px;border-radius:3px;flex:none;
    background:linear-gradient(180deg,var(--ez-red),var(--ez-red-dark));
}
.grid-count{
    font-size:12.5px;font-weight:700;color:var(--ez-red-dark);
    background:var(--ez-tint);box-shadow:inset 0 0 0 1px var(--ez-line-blue);
    padding:5px 13px;border-radius:50px;white-space:nowrap;
}
.view-toggle{display:flex;gap:4px;background:var(--ez-bg-2);border-radius:13px;padding:4px;box-shadow:inset 0 0 0 1px var(--ez-line)}
.vt-btn{
    width:36px;height:32px;border:0;background:transparent;border-radius:10px;
    color:var(--ez-mut);cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background var(--ez-trans),color var(--ez-trans),box-shadow var(--ez-trans),transform var(--ez-trans);
}
.vt-btn:hover{color:var(--ez-red-dark)}
.vt-btn:active{transform:scale(.93)}
.vt-btn.is-active{background:var(--ez-white);color:var(--ez-red);box-shadow:0 2px 6px rgba(15,23,42,.14)}
.vt-btn:focus-visible{outline:2px solid var(--ez-red);outline-offset:2px}

.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tool-card{
    position:relative;overflow:hidden;
    background:var(--ez-white);border:1px solid var(--ez-line);border-radius:var(--ez-radius);
    padding:20px;display:flex;flex-direction:column;
    transition:transform var(--ez-trans),box-shadow var(--ez-trans),border-color var(--ez-trans);
}
@media(hover:hover){
    .tool-card:hover{transform:translateY(-6px);box-shadow:var(--ez-shadow-lg);border-color:var(--ez-line-blue)}
}
.tool-card--ad::before{display:none}
.tc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.tc-top-right{display:flex;align-items:center;gap:8px}
.fav-btn{width:32px;height:32px;border:0;background:var(--ez-bg-2);border-radius:9px;color:var(--ez-mut);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--ez-trans)}
.fav-btn:hover{background:var(--ez-tint);color:var(--ez-red)}
.fav-btn.on{background:var(--ez-tint);color:var(--ez-red)}
.tc-name{font-size:16.5px;font-weight:700;margin:0 0 7px;letter-spacing:-.01em;line-height:1.25}
.tc-name a{color:var(--ez-ink)}
.tc-name a:hover{color:var(--ez-red)}
.tc-desc{font-size:13.5px;line-height:1.6;color:var(--ez-mut);margin:0 0 14px;
    display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.tc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.tag{
    font-size:11px;font-weight:600;color:var(--ez-txt-2);
    background:var(--ez-bg-2);padding:5px 11px;border-radius:50px;
    box-shadow:inset 0 0 0 1px var(--ez-line);
    transition:background var(--ez-trans),color var(--ez-trans),box-shadow var(--ez-trans);
}
@media(hover:hover){
    .tool-card:hover .tag,.feat-card:hover .tag{
        background:var(--ez-tint-2);color:var(--ez-red-dark);
        box-shadow:inset 0 0 0 1px var(--ez-line-blue);
    }
}
.tc-stats{display:flex;gap:14px;margin-bottom:16px;padding-top:2px}
.tc-stats span{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--ez-mut)}
.tc-actions{display:flex;gap:9px;margin-top:auto}

/* ═══════════════ LIST VIEW (grid ⇆ list toggle — bug fix) ═══════════════
   The toggle JS adds `.is-list` to `.tool-grid`; previously no CSS reacted to
   it, so the button did nothing. These rules turn each card into an aligned
   horizontal row (icon · name/desc/tags · action). */
.tool-grid.is-list{grid-template-columns:1fr;gap:14px}
.tool-grid.is-list .tool-card{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
        "icon name   action"
        "icon desc   action"
        "icon tags   action";
    align-content:center;
    column-gap:22px;
    padding:16px 22px;
}
.tool-grid.is-list .tool-card:hover{transform:none}
.tool-grid.is-list .tc-top{
    grid-area:icon;margin:0;align-self:center;
    flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
.tool-grid.is-list .tc-name{grid-area:name;margin:0 0 2px;align-self:end}
.tool-grid.is-list .tc-desc{
    grid-area:desc;margin:0;align-self:start;flex:none;
    -webkit-line-clamp:2;
}
.tool-grid.is-list .tc-tags{grid-area:tags;margin:6px 0 0;align-self:start}
.tool-grid.is-list .tc-actions{grid-area:action;margin:0;align-self:center}
.tool-grid.is-list .tc-actions .btn-primary{flex:none;white-space:nowrap;padding:11px 24px}
/* On phones the 3-column row is too tight — stack the action full-width below. */
@media(max-width:560px){
    .tool-grid.is-list .tool-card{
        grid-template-columns:auto minmax(0,1fr);
        grid-template-areas:
            "icon name"
            "icon desc"
            "icon tags"
            "action action";
        column-gap:16px;row-gap:4px;
    }
    .tool-grid.is-list .tc-actions{align-self:stretch;margin-top:10px}
    .tool-grid.is-list .tc-actions .btn-primary{width:100%}
}

.load-more-wrap{display:flex;justify-content:center;margin-top:30px}
.load-more{
    background:var(--ez-white);border:1.5px solid var(--ez-line);color:var(--ez-red);
    font-size:14px;font-weight:700;font-family:inherit;
    padding:14px 34px;border-radius:50px;cursor:pointer;
    transition:border-color var(--ez-trans),background var(--ez-trans),transform var(--ez-trans),box-shadow var(--ez-trans);
}
.load-more:hover{
    border-color:var(--ez-red);background:var(--ez-tint-2);
    transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(54,128,237,.9);
}
.load-more:active{transform:translateY(0) scale(.98)}
.load-more:focus-visible{outline:2px solid var(--ez-red);outline-offset:3px}
.load-more:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.empty-state{
    text-align:center;padding:60px 20px;color:var(--ez-mut);font-size:15px;
    background:linear-gradient(180deg,var(--ez-tint-2),var(--ez-bg-2));
    box-shadow:inset 0 0 0 1px var(--ez-line);
    border-radius:var(--ez-radius);
}

/* Sidebar newsletter styles (.news-card / .news-form / .news-msg / .news-fine)
   removed 2026-07-06 with the `.rail-card.news-card` markup. Blog + footer
   surfaces have their own scoped styles. */

/* ═══════════════════ EXPLORE CTA BANNER ═══════════════════ */
.aitsy-explore{
    position:relative;isolation:isolate;overflow:hidden;
    display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
    background:
        radial-gradient(80% 140% at 2% 0%,rgba(54,128,237,.18) 0%,transparent 58%),
        radial-gradient(70% 130% at 98% 100%,rgba(139,92,246,.15) 0%,transparent 60%),
        linear-gradient(120deg,var(--ez-tint) 0%,var(--ez-tint-2) 100%);
    border:1px solid var(--ez-line-blue);border-radius:var(--ez-radius);
    padding:32px 36px;margin-bottom:38px;
}
.aitsy-explore::before{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:radial-gradient(circle,rgba(54,128,237,.14) 1px,transparent 1.5px);
    background-size:22px 22px;
    -webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 50%,#000 20%,transparent 100%);
    mask-image:radial-gradient(ellipse 80% 90% at 50% 50%,#000 20%,transparent 100%);
    opacity:.5;
}
.ex-copy{display:flex;align-items:center;gap:20px}
.ex-ic{
    position:relative;
    width:60px;height:60px;flex-shrink:0;border-radius:18px;
    background:linear-gradient(140deg,var(--ez-red),var(--ez-red-dark));
    display:flex;align-items:center;justify-content:center;color:#fff;
    box-shadow:0 14px 28px -12px rgba(54,128,237,.7),inset 0 1px 0 rgba(255,255,255,.3);
    transition:transform var(--ez-trans);
}
.ex-ic svg{width:30px;height:30px}
.ex-eyebrow{
    display:inline-flex;align-items:center;gap:6px;
    font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
    color:var(--ez-red-dark);margin-bottom:8px;
}
.ex-eyebrow::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.ex-tx h2{font-size:clamp(20px,2.2vw,25px);font-weight:800;letter-spacing:-.026em;margin:0 0 6px;color:var(--ez-ink);line-height:1.15}
.ex-tx p{font-size:14.5px;line-height:1.6;color:var(--ez-txt-2);margin:0;max-width:62ch}
.aitsy-cat .ex-btn{
    position:relative;overflow:hidden;
    display:inline-flex;align-items:center;gap:8px;
    background:linear-gradient(140deg,var(--ez-red),var(--ez-red-dark));color:#fff;
    font-size:14.5px;font-weight:700;padding:14px 30px;border-radius:14px;white-space:nowrap;
    box-shadow:0 12px 26px -12px rgba(54,128,237,.8),inset 0 1px 0 rgba(255,255,255,.24);
    transition:transform var(--ez-trans),box-shadow var(--ez-trans);
}
.aitsy-cat .ex-btn::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);
    transform:translateX(-120%);transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.ex-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(54,128,237,.9)}
.ex-btn:hover::after{transform:translateX(120%)}
@media(hover:hover){
    .aitsy-explore:hover .ex-ic{transform:translateY(-2px) rotate(-3deg)}
}

/* ═══════════════════ BLOGS SLIDER ═══════════════════ */
.aitsy-blogs{margin-bottom:38px}
.blog-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 10px;scrollbar-width:none}
.blog-track::-webkit-scrollbar{display:none}
.blog-card{flex:0 0 320px;scroll-snap-align:start;background:var(--ez-white);border:1px solid var(--ez-line);border-radius:var(--ez-radius);overflow:hidden;transition:transform var(--ez-trans),box-shadow var(--ez-trans),border-color var(--ez-trans)}
.blog-img{position:relative;aspect-ratio:16/9;background:var(--ez-bg-2);overflow:hidden}
.blog-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
/* Gradient scrim so the category chip stays legible on any image */
.blog-img::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(9,16,32,.28) 0%,transparent 42%);
}
.blog-cat{
    position:absolute;top:12px;left:12px;z-index:2;
    background:rgba(255,255,255,.92);color:var(--ez-red-dark);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    font-size:11px;font-weight:800;letter-spacing:.03em;
    padding:5px 12px;border-radius:50px;
    box-shadow:0 4px 12px rgba(9,16,32,.20);
}
.blog-body{padding:18px}
.blog-body h3{font-size:16px;font-weight:700;margin:0 0 8px;line-height:1.3;letter-spacing:-.01em;color:var(--ez-ink);transition:color var(--ez-trans)}
.blog-body p{font-size:13px;color:var(--ez-mut);line-height:1.55;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-meta{display:flex;gap:8px;font-size:12px;color:var(--ez-mut);font-weight:600}
@media(hover:hover){
    .blog-card:hover{transform:translateY(-6px);box-shadow:var(--ez-shadow-lg);border-color:var(--ez-line-blue)}
    .blog-card:hover .blog-img img{transform:scale(1.06)}
    .blog-card:hover .blog-body h3{color:var(--ez-red-dark)}
}

/* ═══════════════════ FAQ ═══════════════════
   Native <details> accordion — pure CSS, so keyboard/AT behaviour and
   browser in-page-find come for free. Shared by every category depth
   (root, sub and sub-sub) since they all render category.blade.php. */
.aitsy-faq{margin-bottom:38px}

/* ── Centred intro ── */
.faq-head{text-align:center;max-width:640px;margin:0 auto 26px}
.faq-eyebrow{
    display:inline-flex;align-items:center;gap:7px;
    padding:6px 14px;margin-bottom:12px;
    background:var(--ez-tint);color:var(--ez-red-dark);
    border-radius:999px;
    font-size:11.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
}
.faq-eyebrow svg{flex-shrink:0}
.aitsy-faq>.faq-head h2{
    font-size:clamp(21px,2.2vw,26px);font-weight:800;letter-spacing:-.025em;
    line-height:1.15;margin:0 0 10px;color:var(--ez-ink);
}
.faq-head>p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ez-mut)}

/* ── Single column spanning the full page container, like every other
      section on the page. One column keeps the vertical rhythm even and
      avoids the ragged gaps a 2-up grid leaves when one card opens; the
      answer text is measure-capped separately so wide rows stay readable. ── */
.faq-grid{display:grid;grid-template-columns:1fr;gap:12px}

/* ── Item card ── */
.faq-item{
    position:relative;
    background:var(--ez-white);
    border:1px solid var(--ez-line);
    border-radius:16px;
    transition:border-color var(--ez-trans),box-shadow var(--ez-trans),transform var(--ez-trans),background var(--ez-trans);
}
/* Accent spine — grows on hover, stays while open */
.faq-item::before{
    content:'';position:absolute;left:0;top:14px;
    width:3px;height:0;border-radius:0 3px 3px 0;
    background:linear-gradient(180deg,var(--ez-red),var(--ez-red-dark));
    transition:height .3s cubic-bezier(.4,0,.2,1);
}
.faq-item[open]{
    border-color:var(--ez-line-blue);
    background:linear-gradient(180deg,var(--ez-tint) 0%,var(--ez-white) 44%);
    box-shadow:0 18px 40px -30px rgba(54,128,237,.85);
}
.faq-item[open]::before{height:calc(100% - 28px)}

/* ── Question row ── */
.faq-item summary{
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:19px 22px;min-height:64px;
    cursor:pointer;list-style:none;user-select:none;border-radius:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:''}
.faq-item summary:focus-visible{outline:2px solid var(--ez-red);outline-offset:-2px}
.aitsy-cat .faq-q{
    flex:1 1 auto;margin:0;
    font-size:15.5px;font-weight:700;line-height:1.45;letter-spacing:-.014em;
    color:var(--ez-ink);transition:color var(--ez-trans);
}

/* Plus → minus, drawn in CSS so there's no icon dependency */
.faq-mark{
    flex:none;width:32px;height:32px;border-radius:10px;
    background:
        linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,
        linear-gradient(currentColor,currentColor) center/2px 12px no-repeat,
        var(--ez-tint);
    color:var(--ez-red);
    transition:transform .3s cubic-bezier(.4,0,.2,1),background-color var(--ez-trans),color var(--ez-trans),box-shadow var(--ez-trans);
}
.faq-item[open] .faq-mark{
    transform:rotate(135deg);          /* the plus becomes a minus */
    background:
        linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,
        linear-gradient(currentColor,currentColor) center/2px 12px no-repeat,
        var(--ez-red);
    color:#fff;
    box-shadow:0 8px 18px -8px rgba(54,128,237,.9);
}

/* ── Answer — the hairline rule spans the full card; only the text
      inside is measure-capped. ── */
.faq-ans{
    margin:0 22px;padding:14px 0 18px;
    border-top:1px solid var(--ez-line);
    animation:ez-faq-reveal .3s cubic-bezier(.32,.72,.4,1) both;
}
.faq-item[open] .faq-ans{border-top-color:var(--ez-line-blue)}
.faq-ans-in{
    font-size:15.5px;line-height:1.75;color:var(--ez-txt-2);
}
@keyframes ez-faq-reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── Hover — only where a real pointer exists; on touch it sticks
      after a tap and reads as broken. ── */
@media(hover:hover){
    .faq-item:hover{
        border-color:var(--ez-line-blue);
        transform:translateY(-2px);
        box-shadow:0 16px 34px -28px rgba(54,128,237,.8);
    }
    .faq-item:hover::before{height:calc(100% - 28px)}
    .aitsy-cat .faq-item:hover .faq-q{color:var(--ez-red-dark)}
    .faq-item:not([open]):hover .faq-mark{background-color:rgba(54,128,237,.18)}
}
.faq-item summary:active{transform:scale(.996)}

/* ── Contact nudge under the grid ── */
.faq-more{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    margin-top:18px;padding:16px 22px;
    background:var(--ez-tint-2);
    border:1px solid var(--ez-line-blue);
    border-radius:16px;
}
.faq-more-ic{
    flex:none;width:38px;height:38px;border-radius:11px;
    display:inline-flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--ez-red),var(--ez-red-dark));color:#fff;
    box-shadow:0 8px 18px -8px rgba(54,128,237,.7);
}
.faq-more-tx{flex:1 1 220px;min-width:0;font-size:13.8px;line-height:1.55;color:var(--ez-txt-2)}
.faq-more-btn{
    flex:none;display:inline-flex;align-items:center;gap:7px;
    padding:9px 16px;border-radius:999px;
    background:var(--ez-white);border:1px solid var(--ez-line-blue);
    color:var(--ez-red-dark)!important;font-size:13.5px;font-weight:700;
    transition:background var(--ez-trans),color var(--ez-trans),box-shadow var(--ez-trans),transform var(--ez-trans);
}
.faq-more-btn svg{transition:transform var(--ez-trans)}
.faq-more-btn:hover{
    background:var(--ez-red);border-color:var(--ez-red);color:#fff!important;
    box-shadow:0 10px 22px -10px rgba(54,128,237,.9);transform:translateY(-1px);
}
.faq-more-btn:hover svg{transform:translateX(3px)}

/* ── Desktop — rows are now container-wide, so the type, padding and
      control scale up to match. ── */
@media(min-width:900px){
    .faq-head{max-width:720px;margin-bottom:30px}
    .faq-grid{gap:13px}
    .faq-item summary{padding:22px 26px;min-height:70px;gap:22px}
    .aitsy-cat .faq-q{font-size:16.5px;line-height:1.4}
    .faq-mark{width:36px;height:36px;border-radius:11px;background-size:13px 2px,2px 13px,auto}
    .faq-ans{margin:0 26px;padding:16px 0 22px}
    .faq-ans-in{font-size:16.5px;line-height:1.8}
    .faq-more{padding:18px 26px}
}

/* Full-width newsletter section (.aitsy-newsletter / .nl-inner / .nl-copy /
   .nl-form) removed 2026-07-06 alongside the markup. The footer newsletter
   at `.ezft-news-*` is the sole capture surface on category pages now. */

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media(max-width:1080px){
    .aitsy-body{grid-template-columns:1fr;}
    .rail-left{position:static;flex-direction:row;flex-wrap:wrap}
    .rail-left .rail-card{flex:1 1 240px}
}
@media(max-width:860px){
    .aitsy-hero{grid-template-columns:1fr;padding:26px 22px}
    .why-card{max-width:none}
    .tool-grid{grid-template-columns:repeat(2,1fr)}
    .feat-arrow{display:none}
    /* On mobile/tablet, guarantee the FAQ is the LAST section (bug 8).
       Turning the page into a flex column lets `order` force it to the end
       regardless of where the other optional sections render. */
    .aitsy-cat{display:flex;flex-direction:column}
    .aitsy-cat > .aitsy-faq{order:99;margin-bottom:26px}
    .faq-head{margin-bottom:20px}

    /* Rail cards (All Categories + Request a Tool) belong at the very END of
       the stacked page, under the FAQ — in the sidebar layout they sit beside
       the grid, but stacked they'd interrupt the tool list.
       `display:contents` lifts them out of .aitsy-body so they can take part
       in .aitsy-cat's flex ordering; 100 puts them past the FAQ's 99. */
    .aitsy-body{display:contents}
    .grid-zone{margin-bottom:38px}
    .rail-left{order:100;margin:0 0 38px}
}
@media(max-width:560px){
    .faq-head{margin-bottom:18px}
    .faq-head>p{font-size:13.5px}
    .faq-grid{gap:10px}
    .faq-item{border-radius:14px}
    .faq-item summary{padding:15px 14px;gap:12px;min-height:58px;border-radius:14px}
    .aitsy-cat .faq-q{font-size:14.2px;line-height:1.42}
    .faq-mark{width:28px;height:28px;border-radius:9px;background-size:11px 2px,2px 11px,auto}
    .faq-ans{margin:0 14px;padding:12px 0 15px}
    .faq-ans-in{font-size:14.4px;line-height:1.72}
    .faq-more{padding:13px 14px;gap:12px;border-radius:14px}
    .faq-more-tx{flex-basis:100%;font-size:13.2px}
    .faq-more-btn{width:100%;justify-content:center}
    /* Hover-lift would stick after a tap on touch devices. */
    .faq-item:hover{transform:none}
}
@media(max-width:560px){
    .aitsy-cat{padding:16px 14px 0}
    .aitsy-hero{padding:22px 18px;border-radius:18px}
    .hero-main{flex-direction:column;gap:16px}
    .hero-icon{width:62px;height:62px;border-radius:17px}
    .hero-icon svg{width:30px;height:30px}
    .hero-icon img{width:34px;height:34px}
    .hero-text h1{font-size:26px}
    .hero-meta{gap:8px}
    .hero-meta .hm{font-size:11.8px;padding:7px 12px}
    .sec-head h2::before,.gh-left h2::before{height:17px;width:4px}
    .tool-icon{width:46px;height:46px;border-radius:13px}
    .tool-icon svg{width:25px;height:25px}
    .tool-card,.feat-card{padding:17px;border-radius:17px}
    .aitsy-cat .btn-primary{padding:12px 16px}
    .grid-head{flex-wrap:wrap;gap:10px}
    .tool-grid{grid-template-columns:1fr}
    .tb-top{flex-direction:column;align-items:stretch}
    .tb-right,.tb-sortbox,.tb-sort-btn{width:100%}
    .tb-sort-btn{justify-content:flex-start}
    /* Full-bleed panel under a full-width trigger, with roomier rows for touch */
    .tb-sort-menu{left:0;right:0;width:auto;transform-origin:top center;border-radius:18px}
    .tb-sort-menu::before{right:auto;left:26px}
    .ts-opt{min-height:54px;font-size:14.5px}
    .ts-opt-ic,.ts-ic{width:32px;height:32px;border-radius:10px}
    .ts-foot-tx>span{font-size:12.5px}
    .rail-left{flex-direction:column}
    .aitsy-explore{flex-direction:column;text-align:center;padding:26px 22px}
    .ex-copy{flex-direction:column;text-align:center}
}

/* ═══════════════════ ANIMATIONS ═══════════════════ */
@keyframes ez-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.aitsy-featured,.aitsy-body,.aitsy-explore,.aitsy-faq{animation:ez-fade-up .4s ease both}
@media(prefers-reduced-motion:reduce){
    .aitsy-cat *{animation:none!important;transition:none!important}
    /* Transitions are off above, so any hover transform would jump straight
       to its end state — suppress the movement entirely. */
    .aitsy-cat :hover,
    .aitsy-cat :active,
    .aitsy-cat :hover > *,
    .aitsy-cat :hover svg{transform:none!important}
    .aitsy-cat .btn-primary::after,.aitsy-cat .ex-btn::after{display:none}
    .feat-card::before,.tool-card::before{transform:scaleX(0)!important}
}

/* ═══════════════════ DARK MODE ═══════════════════ */
body.theme-dark .aitsy-cat{
    --ez-white:#17171A;--ez-bg:#0F0F11;--ez-bg-2:#1C1C1F;
    --ez-line:rgba(255,255,255,.09);--ez-line-2:rgba(255,255,255,.14);
    --ez-line-blue:rgba(96,164,245,.30);
    --ez-ink:#F5F5F6;--ez-txt-2:#C9C9CE;--ez-mut:#A0A0A6;
    --ez-tint:rgba(54,128,237,.16);--ez-tint-2:rgba(54,128,237,.10);
    --ez-shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.5);
    --ez-shadow-lg:0 10px 40px rgba(54,128,237,.35);   /* aits-blue card-hover glow (dark) */

    /* Tints go brighter-on-dark: lift the ink, keep the wash low-alpha. */
    --t-blue-bg:rgba(96,164,245,.16);    --t-blue-ink:#93BEFF;    --t-blue-ln:rgba(96,164,245,.32);
    --t-violet-bg:rgba(167,139,250,.16); --t-violet-ink:#C4B5FD;  --t-violet-ln:rgba(167,139,250,.32);
    --t-emerald-bg:rgba(52,211,153,.17); --t-emerald-ink:#6EE7B7; --t-emerald-ln:rgba(52,211,153,.34);
    --t-amber-bg:rgba(251,191,36,.17);   --t-amber-ink:#FCD34D;   --t-amber-ln:rgba(251,191,36,.34);
    --t-rose-bg:rgba(251,113,133,.16);   --t-rose-ink:#FDA4AF;    --t-rose-ln:rgba(251,113,133,.32);
    --t-cyan-bg:rgba(34,211,238,.16);    --t-cyan-ink:#67E8F9;    --t-cyan-ln:rgba(34,211,238,.32);
    --t-indigo-bg:rgba(129,140,248,.16); --t-indigo-ink:#A5B4FC;  --t-indigo-ln:rgba(129,140,248,.32);
    --t-pink-bg:rgba(244,114,182,.16);   --t-pink-ink:#F9A8D4;    --t-pink-ln:rgba(244,114,182,.32);
}
body.theme-dark .aitsy-hero{border-color:rgba(96,164,245,.28)}
body.theme-dark .aitsy-toolbar{background:rgba(23,23,26,.85);border-color:rgba(255,255,255,.09)}
body.theme-dark .b-new{background:#3A3A40;color:#F5F5F6}
body.theme-dark .why-card,body.theme-dark .aitsy-explore{border-color:rgba(96,164,245,.28)}
/* The gradient icon tiles keep their own fill in dark mode — only the halo
   and the dot mesh need toning down against the dark canvas. */
body.theme-dark .hero-icon::after{opacity:.5}
body.theme-dark .aitsy-hero::before,body.theme-dark .aitsy-explore::before{opacity:.3}
body.theme-dark .blog-cat{background:rgba(23,23,26,.9);color:var(--ez-red-soft)}
body.theme-dark .sec-link{background:var(--ez-white);color:var(--ez-red-soft)}
body.theme-dark .sec-link:hover{background:var(--ez-red);color:#fff}
body.theme-dark .grid-count{color:var(--ez-red-soft)}
body.theme-dark .empty-state{background:var(--ez-bg-2);color:var(--ez-mut)}
body.theme-dark .aitsy-toolbar{box-shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -26px rgba(0,0,0,.9)}
body.theme-dark .aitsy-hero,body.theme-dark .aitsy-explore{background:linear-gradient(180deg,rgba(54,128,237,.10) 0%,rgba(54,128,237,.06) 100%)}
body.theme-dark .tb-search,body.theme-dark .tb-sort-btn,body.theme-dark .chip,body.theme-dark .load-more{border-color:rgba(255,255,255,.14)}
/* Chip-row fades must blend into the toolbar surface, not stay white */
body.theme-dark .tb-chips-wrap::before{background:linear-gradient(90deg,var(--ez-white) 12%,transparent 100%)}
body.theme-dark .tb-chips-wrap::after{background:linear-gradient(270deg,var(--ez-white) 12%,transparent 100%)}
body.theme-dark .tb-chip-nav{background:var(--ez-bg-2);border-color:rgba(255,255,255,.14);color:var(--ez-ink);box-shadow:0 6px 16px -8px rgba(0,0,0,.9)}
body.theme-dark .tb-chip-nav:hover{background:var(--ez-red);border-color:var(--ez-red);color:#fff}
body.theme-dark .chip-sep{background:rgba(255,255,255,.14)}
/* Chip icons and tag dots keep their own hue in dark mode — the --t-*-ink
   tokens are already remapped bright, so no override is wanted here. */
body.theme-dark .tb-search-x{background:var(--ez-bg-2)}
body.theme-dark .tb-search-x:hover{color:var(--ez-red-soft)}
body.theme-dark .tb-search-busy{border-color:rgba(255,255,255,.16);border-top-color:var(--ez-red-soft)}
body.theme-dark .tb-search:focus-within{border-color:#60A4F5;box-shadow:0 0 0 3px rgba(96,164,245,.28)}
body.theme-dark .tb-sort-btn{
    background:linear-gradient(180deg,var(--ez-white) 0%,var(--ez-bg-2) 100%);
    box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
}
body.theme-dark .tb-sort-btn:hover{background:var(--ez-bg-2);box-shadow:0 10px 20px -12px rgba(0,0,0,.9)}
body.theme-dark .tb-sortbox.is-open .tb-sort-btn{background:var(--ez-bg-2)}
body.theme-dark .tb-sortbox.is-open .ts-val,
body.theme-dark .tb-sort-btn:hover .ts-val{color:var(--ez-red-soft)}
body.theme-dark .tb-sort-menu{
    background:linear-gradient(180deg,var(--ez-bg-2) 0%,var(--ez-white) 34%);
    border-color:rgba(255,255,255,.10);
    box-shadow:0 2px 6px rgba(0,0,0,.6),0 28px 60px -24px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);
}
body.theme-dark .tb-sort-menu::before{
    background:var(--ez-bg-2);
    border-left-color:rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.10);
}
body.theme-dark .ts-head{border-bottom-color:rgba(255,255,255,.09)}
body.theme-dark .ts-opt.is-on{box-shadow:inset 0 0 0 1px rgba(96,164,245,.30)}
body.theme-dark .ts-opt-ck{box-shadow:none}
body.theme-dark .ts-opt.is-on{color:var(--ez-red-soft)}
body.theme-dark .ts-opt-ck{color:var(--ez-red-soft)}
/* "White" card in dark mode = the elevated surface, not literal white */
body.theme-dark .ts-foot{
    background:var(--ez-bg-2);
    box-shadow:inset 0 0 0 1px rgba(96,164,245,.26),0 10px 22px -16px rgba(0,0,0,.9);
}
body.theme-dark .ts-foot-ic{box-shadow:0 8px 16px -10px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.22)}
/* Active chips carry their own hue in both themes — only soften the glow,
   which reads as a smudge on a dark canvas. */
body.theme-dark .chip.is-active[data-chip-tone],
body.theme-dark .chip-tag.is-active{box-shadow:0 6px 14px -8px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.18)}
body.theme-dark .feat-arrow{box-shadow:0 6px 18px rgba(0,0,0,.5);border-color:rgba(255,255,255,.14)}
body.theme-dark .feat-card:hover,body.theme-dark .tool-card:hover{border-color:rgba(96,164,245,.28)}
body.theme-dark .vt-btn.is-active{background:rgba(54,128,237,.16);color:#60A4F5;box-shadow:0 1px 3px rgba(0,0,0,.5)}
body.theme-dark .faq-item[open]{
    border-color:rgba(96,164,245,.32);
    background:linear-gradient(180deg,rgba(54,128,237,.14) 0%,var(--ez-white) 46%);
    box-shadow:none;
}
body.theme-dark .faq-item:hover{border-color:rgba(96,164,245,.28);box-shadow:none}
body.theme-dark .faq-mark{color:var(--ez-red-soft)}
body.theme-dark .faq-item[open] .faq-mark{color:#fff;box-shadow:none}
body.theme-dark .aitsy-cat .faq-item:hover .faq-q{color:var(--ez-red-soft)}
body.theme-dark .faq-more{background:rgba(54,128,237,.10);border-color:rgba(96,164,245,.28)}
body.theme-dark .faq-more-btn{background:var(--ez-white);border-color:rgba(96,164,245,.28);color:var(--ez-red-soft)!important}
body.theme-dark .faq-more-btn:hover{background:var(--ez-red);border-color:var(--ez-red);color:#fff!important;box-shadow:none}
body.theme-dark .faq-more-ic{box-shadow:none}
body.theme-dark .btn-ghost{border-color:rgba(255,255,255,.14)}
body.theme-dark .btn-ghost:hover{background:rgba(54,128,237,.10);border-color:#60A4F5;color:#60A4F5}
body.theme-dark .btn-primary:hover{box-shadow:0 6px 16px rgba(54,128,237,.40)}
body.theme-dark .ex-btn:hover{box-shadow:0 8px 22px rgba(54,128,237,.40)}
/* Dark theme: --ez-red-dark (#2060C0) is far too dark to read on the near-black
   canvas, so every accented label switches to the light blue instead. */
body.theme-dark .rail-list li a:hover{background:rgba(54,128,237,.10)}
body.theme-dark .rail-list li a:hover .ri-name,
body.theme-dark .rail-list li a.is-current .ri-name{color:var(--ez-red-soft)}
body.theme-dark .rail-list li a.is-current{background:rgba(54,128,237,.16)}
body.theme-dark .ri-go{color:var(--ez-red-soft)}
body.theme-dark .rail-count{color:var(--ez-red-soft)}
body.theme-dark .ts-opt:hover{color:var(--ez-ink)}
body.theme-dark .ex-eyebrow{color:var(--ez-red-soft)}
/* Remaining accent-on-tint labels — same swap, collected in one rule. */
body.theme-dark .chip:hover,
body.theme-dark .btn-ghost:hover,
body.theme-dark .vt-btn:hover,
body.theme-dark .tool-card:hover .tag,
body.theme-dark .feat-card:hover .tag,
body.theme-dark .blog-card:hover .blog-body h3,
body.theme-dark .aitsy-cat .faq-item:hover .faq-q,
body.theme-dark .sec-sub a{color:var(--ez-red-soft)}
body.theme-dark .faq-eyebrow{color:var(--ez-red-soft)}
body.theme-dark .pill{color:var(--ez-red-soft)}
body.theme-dark .rail-more{color:var(--ez-red-soft)}
body.theme-dark .empty-state{background:#1C1C1F;color:#A0A0A6}
body.theme-dark .hero-meta .hm{border-color:rgba(96,164,245,.28);color:#60A4F5;background:rgba(255,255,255,.04)}
body.theme-dark .hero-meta .hm svg{color:#60A4F5}