/* =========================================================================
   Shared category landing page styles — reused by every category hub
   (Website & SEO, Network & DNS, Security, ...). Everything is scoped under
   .category-page so it never leaks into the rest of the site. Swap the
   `.theme-*` class on the root element to re-skin a new category; the
   structural rules (grid, cards, sidebar, directory, filters) stay the same.
   ========================================================================= */

/* ---- shared FAQ component ------------------------------------------------
   The admin-driven FAQ section renders inside .category-page, which means two
   of this file's own reset rules reach it: the container's width cap would
   inset it from the sections above, and `.category-page a` strips link colour
   and underline at equal specificity while loading later in the cascade.
   Both are undone here rather than by raising specificity in site.css, so the
   general rule stays readable. */
.category-page .qdt-faq{ padding: 4px 0 20px; }
.category-page .qdt-faq-shell{ width: 100%; }
.category-page .qdt-faq-a a{ color: var(--mark); text-decoration: underline; text-underline-offset: 2px; }

.category-page{
  --cat-ink:#172033;
  --cat-muted:#697386;
  --cat-line:#e6e8ec;
  --cat-white:#ffffff;
  --cat-shadow:0 16px 45px rgba(38,43,57,.08);

  /* theme-amber (default / Website & SEO) accent tokens */
  --cat-accent:#f4b400;
  --cat-accent-deep:#d99000;
  --cat-accent-soft:#fff4bd;
  --cat-accent2:#ff8a00;

  box-sizing:border-box;
  max-width:none;width:min(calc(100% - 36px),1460px);margin:14px auto 32px;padding:0;
  color:var(--cat-ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  position:relative;
}

.category-page *{box-sizing:border-box}
.category-page a{text-decoration:none;color:inherit}
.category-page button,.category-page input,.category-page select{font:inherit}
.category-page button{cursor:pointer}

/* ---------- breadcrumb ---------- */
.category-page .cat-breadcrumb{display:flex;gap:8px;align-items:center;color:#7a8392;font-size:13px;margin:0 0 18px;flex-wrap:wrap}
.category-page .cat-breadcrumb a{color:#2459d7;font-weight:700}

/* ---------- hero ---------- */
.category-page .category-hero{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  padding:54px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);
  gap:46px;
  align-items:center;
  color:#fff;
  background:
    radial-gradient(circle at 85% 18%,rgba(245,190,70,.18),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(55,108,255,.16),transparent 26%),
    linear-gradient(135deg,#0f172a 0%,#18233d 58%,#233054 100%);
  box-shadow:0 28px 70px rgba(15,23,42,.22);
  isolation:isolate;
}

.category-page .category-hero:before{
  content:"";
  position:absolute;
  width:360px;height:360px;
  right:-130px;top:-150px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(250,204,21,.22),rgba(245,158,11,.04));
  filter:blur(2px);
  z-index:-1;
}

.category-page .category-hero:after{
  content:"";
  position:absolute;
  left:52px;right:52px;bottom:0;height:5px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,var(--cat-accent-soft,#f9d86b),var(--cat-accent),var(--cat-accent2));
}

.category-page .hero-copy{position:relative;z-index:2;max-width:820px}

.category-page .category-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);
  color:#f9dc7b;font-size:12px;font-weight:850;letter-spacing:.2px;
  backdrop-filter:blur(8px);
}

.category-page .category-hero h1{
  margin:18px 0 0;font-size:58px;line-height:1.02;letter-spacing:-2.2px;max-width:840px;color:#fff;
}

.category-page .category-hero h1 span{
  display:inline-block;
  background:linear-gradient(90deg,#ffe68b,#f6b80b);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.category-page .category-hero p{margin:18px 0 0;max-width:760px;color:rgba(255,255,255,.72);font-size:17px;line-height:1.72}

.category-page .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

.category-page .btn{
  border:1px solid var(--cat-line);background:#fff;color:#344054;
  border-radius:13px;padding:13px 18px;font-weight:800;
  display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 7px 18px rgba(15,23,42,.08);
}

.category-page .btn.primary{
  background:linear-gradient(135deg,#f8c73d,#f1a900);
  color:#3a2a00;border-color:var(--cat-accent-deep);
  box-shadow:0 12px 26px rgba(244,180,0,.22);
}

.category-page .btn.sun{
  background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.18);
  box-shadow:none;backdrop-filter:blur(8px);
}

.category-page .hero-points{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;color:rgba(255,255,255,.72);font-size:12px;font-weight:760}
.category-page .hero-points span{display:inline-flex;align-items:center;gap:6px}

.category-page .hero-board{
  position:relative;z-index:2;padding:18px;border-radius:24px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 50px rgba(0,0,0,.16);backdrop-filter:blur(14px);
}

.category-page .hero-board-title{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:2px 3px 12px}
.category-page .hero-board-title strong{font-size:14px;color:#fff}
.category-page .hero-board-title span{color:#f5cf64;font-size:11px;font-weight:850}

.category-page .hero-topic{
  min-height:82px;padding:14px 15px;border-radius:16px;
  display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;
  background:rgba(255,255,255,.95);color:var(--cat-ink);
  border:1px solid rgba(255,255,255,.75);box-shadow:0 10px 24px rgba(0,0,0,.10);
  transition:.2s ease;
}

.category-page .hero-topic + .hero-topic{margin-top:10px}
.category-page .hero-topic:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(0,0,0,.14)}

.category-page .hero-topic .emoji{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:22px;
  background:linear-gradient(145deg,#fff7cf,#ffe69b);border:1px solid #f5d368;
}

.category-page .hero-topic strong{display:block;font-size:14px}
.category-page .hero-topic small{display:block;margin-top:4px;color:#7a8392;line-height:1.42;font-size:10px}

.category-page .hero-topic .arrow{
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:#f4f6f8;color:#7a5a00;font-weight:900;
}

/* ---------- summary strips ---------- */
.category-page .category-summary{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px;margin-top:20px}

.category-page .summary-strip{
  border:1px solid var(--cat-line);border-radius:16px;background:#fff;padding:16px 18px;
  display:flex;align-items:center;gap:12px;box-shadow:0 8px 25px rgba(15,23,42,.04);
}

.category-page .summary-strip .icon{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;
  background:var(--cat-accent-soft);
}
.category-page .summary-strip .icon.is-blue{background:#edf3ff}
.category-page .summary-strip .icon.is-green{background:#eaf8f0}

.category-page .summary-strip strong{display:block;font-size:18px}
.category-page .summary-strip span{display:block;color:#7a8392;font-size:12px;margin-top:3px}

/* ---------- layout: sidebar + content ---------- */
.category-page .layout{display:grid;grid-template-columns:255px minmax(0,1fr);gap:22px;margin-top:30px;align-items:start}

.category-page .sidebar{
  position:sticky;top:92px;
  border:1px solid var(--cat-line);border-radius:18px;background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.05);padding:14px;
}

.category-page .sidebar-title{padding:8px 9px 12px;color:#8b6700;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.8px}

.category-page .side-link{
  display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:11px;
  color:#596173;font-size:13px;font-weight:700;transition:.18s ease;
}

.category-page .side-link:hover,.category-page .side-link.active{background:#fff7d6;color:#9a6200}

.category-page .side-count{
  margin-left:auto;min-width:24px;height:24px;border-radius:999px;
  display:grid;place-items:center;background:#f2f3f5;color:#7b8391;font-size:10px;
}

.category-page .sidebar-note{
  margin-top:12px;padding:13px;border-radius:12px;background:#fff8e5;color:#745a17;
  font-size:12px;line-height:1.55;border:1px solid #f1dfad;
}

.category-page .content{min-width:0}
.category-page .section{scroll-margin-top:95px;margin-bottom:24px}

.category-page .section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:13px}
.category-page .heading-left{display:flex;align-items:center;gap:12px}
.category-page .heading-icon{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:21px;
  background:#fff4c5;border:1px solid #eedb93;
}

.category-page .section-heading h2{margin:0;font-size:25px;letter-spacing:-.5px}
.category-page .section-heading p{margin:4px 0 0;color:#7a8392;font-size:13px}
.category-page .view-all{color:#a36800;font-size:12px;font-weight:850}

/* ---------- featured rail ---------- */
.category-page .featured-rail{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:14px}

.category-page .feature-card{
  min-height:210px;border-radius:20px;padding:22px;
  border:1px solid var(--cat-line);position:relative;overflow:hidden;
  transition:.22s ease;box-shadow:0 10px 28px rgba(15,23,42,.05);
}

.category-page .feature-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(15,23,42,.09)}
.category-page .feature-card.main{background:linear-gradient(140deg,#1f2937,#364152);color:#fff}
.category-page .feature-card.light{background:linear-gradient(145deg,#fff,#fff8df)}
.category-page .feature-card.blue{background:linear-gradient(145deg,#fff,#eef4ff)}

.category-page .feature-card .big-emoji{font-size:34px}
.category-page .feature-card h3{margin:20px 0 8px;font-size:21px}
.category-page .feature-card p{margin:0;line-height:1.6;font-size:13px;color:#697386}
.category-page .feature-card.main p{color:rgba(255,255,255,.72)}

.category-page .feature-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px}
.category-page .feature-tags span{
  padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.72);
  border:1px solid rgba(225,225,225,.8);font-size:10px;font-weight:800;color:#5d6574;
}
.category-page .feature-card.main .feature-tags span{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.16);color:#fff}

/* ---------- tool list rows ---------- */
.category-page .tool-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

.category-page .tool-row{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:14px;border:1px solid var(--cat-line);border-radius:15px;background:#fff;transition:.18s ease;
}

.category-page .tool-row:hover{
  border-color:#e7c86b;background:#fffdf5;transform:translateX(3px);box-shadow:0 8px 20px rgba(118,87,0,.07);
}

.category-page .tool-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:20px;background:#f7f8fa}
.category-page .tool-row h3{margin:0;font-size:14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.category-page .tool-row p{margin:4px 0 0;color:#7a8392;font-size:11px;line-height:1.45}
.category-page .tool-arrow{color:#b07400;font-weight:900}

/* "not built yet" badge — keeps roadmap links visible without pretending they work */
.category-page .cat-soon{
  display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;
  background:#f2f3f5;color:#7b8391;font-size:9px;font-weight:900;letter-spacing:.3px;text-transform:uppercase;
}
.category-page .compact-tool[data-status="soon"],.category-page .tool-row[data-status="soon"]{cursor:pointer}

/* ---------- directory panel ---------- */
.category-page .directory-panel{
  margin-top:28px;border:1px solid #e4dfcf;border-radius:22px;background:#fff;
  box-shadow:var(--cat-shadow);overflow:hidden;
}

.category-page .directory-top{padding:22px;border-bottom:1px solid var(--cat-line);background:linear-gradient(90deg,#fffdf7,#fff8df)}
.category-page .directory-top h2{margin:0;font-size:27px}
.category-page .directory-top p{margin:6px 0 0;color:#7a8392}

.category-page .toolbar{display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:16px}

.category-page .search-box{
  display:flex;align-items:center;gap:10px;border:1px solid #ddd7c6;border-radius:12px;padding:0 14px;background:#fff;
}
.category-page .search-box input{width:100%;border:0;outline:none;padding:12px 0;background:transparent}

.category-page .filters{display:flex;gap:8px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--cat-line)}
.category-page .filter{
  border:1px solid var(--cat-line);background:#fff;color:#697386;
  border-radius:999px;padding:8px 12px;font-size:11px;font-weight:850;
}
.category-page .filter.active{background:#1f2937;color:#fff;border-color:#1f2937}

.category-page .all-tools{padding:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

.category-page .compact-tool{
  border:1px solid var(--cat-line);border-radius:14px;padding:13px;
  display:flex;align-items:center;gap:10px;background:#fff;transition:.18s ease;
}

.category-page .compact-tool:hover{border-color:#e0bd54;background:#fffdf4}
.category-page .compact-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px;background:#f7f8fa;flex:none}
.category-page .compact-tool strong{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}
.category-page .compact-tool small{display:block;color:#8a92a0;margin-top:3px;font-size:10px}

.category-page .empty{display:none;padding:38px;text-align:center;color:#7a8392}

/* ---------- bottom CTA ---------- */
.category-page .bottom-cta{
  margin-top:26px;padding:28px;border-radius:22px;
  background:linear-gradient(120deg,#fff5c4,#ffe17c);
  border:1px solid #ecc85e;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.category-page .bottom-cta h2{margin:0;font-size:27px}
.category-page .bottom-cta p{margin:6px 0 0;color:#745a17}

/* ---------- toast (matches the pattern used on every other tool page) ---------- */
.category-page .cat-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:#1f2937;color:#fff;padding:12px 18px;border-radius:12px;
  font-size:13px;font-weight:700;box-shadow:0 14px 30px rgba(15,23,42,.28);
  opacity:0;pointer-events:none;transition:.22s ease;z-index:80;max-width:min(90vw,420px);text-align:center;
}
.category-page .cat-toast.is-show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .category-page .category-hero{grid-template-columns:1fr;padding:42px}
  .category-page .hero-board{max-width:760px;width:100%}
  .category-page .featured-rail{grid-template-columns:1fr 1fr}
  .category-page .feature-card.main{grid-column:1/-1}
  .category-page .all-tools{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:900px){
  .category-page .layout{grid-template-columns:1fr}
  .category-page .sidebar{position:relative;top:auto;display:flex;gap:8px;overflow:auto}
  .category-page .sidebar-title,.category-page .sidebar-note{display:none}
  .category-page .side-link{white-space:nowrap}
  .category-page .side-count{display:none}
  .category-page .category-summary{grid-template-columns:1fr}
}

@media(max-width:680px){
  .category-page{width:min(calc(100% - 24px),1460px)}
  .category-page .category-hero{padding:30px 22px}
  .category-page .category-hero h1{font-size:40px}
  .category-page .hero-board{grid-template-columns:1fr}
  .category-page .featured-rail,.category-page .tool-list,.category-page .all-tools{grid-template-columns:1fr}
  .category-page .toolbar{grid-template-columns:1fr}
  .category-page .bottom-cta{display:block}
  .category-page .bottom-cta .btn{margin-top:16px}
}

/* dark/contrast theme override, matching the pattern used by other tool pages */
:root[data-theme="contrast"] .category-page .feature-card.light,
:root[data-theme="contrast"] .category-page .feature-card.blue,
:root[data-theme="contrast"] .category-page .summary-strip,
:root[data-theme="contrast"] .category-page .sidebar,
:root[data-theme="contrast"] .category-page .tool-row,
:root[data-theme="contrast"] .category-page .compact-tool,
:root[data-theme="contrast"] .category-page .directory-panel,
:root[data-theme="contrast"] .category-page .search-box,
:root[data-theme="contrast"] .category-page .filter{
  background:#12151c;border-color:#2a2f3a;color:#e8eaef;
}
:root[data-theme="contrast"] .category-page .directory-top{background:#161a24}

/* =========================================================================
   Theme: cyan (Network & DNS). Swap the accent tokens + hero/gradient
   colors; structural rules above stay untouched.
   ========================================================================= */
.category-page.theme-cyan{
  --cat-accent:#22d3ee;
  --cat-accent-deep:#0891b2;
  --cat-accent-soft:#cffafe;
  --cat-accent2:#84cc16;
}
.category-page.theme-cyan .category-hero{
  background:
    radial-gradient(circle at 85% 18%,rgba(34,211,238,.20),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(132,204,22,.16),transparent 26%),
    linear-gradient(135deg,#082f49 0%,#0f3f52 58%,#115e59 100%);
}
.category-page.theme-cyan .category-hero:before{background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(132,204,22,.05))}
.category-page.theme-cyan .category-hero:after{background:linear-gradient(90deg,#67e8f9,#22d3ee,#84cc16)}
.category-page.theme-cyan .category-pill{color:#a5f3fc}
.category-page.theme-cyan .category-hero h1 span{
  background:linear-gradient(90deg,#a5f3fc,#67e8f9,#bef264);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.category-page.theme-cyan .btn.primary{background:linear-gradient(135deg,#67e8f9,#22d3ee);color:#083344;border-color:#22d3ee;box-shadow:0 12px 26px rgba(34,211,238,.24)}
.category-page.theme-cyan .hero-board-title span{color:#bef264}
.category-page.theme-cyan .hero-topic .emoji{background:linear-gradient(145deg,#ecfeff,#a5f3fc);border-color:#67e8f9}
.category-page.theme-cyan .hero-topic .arrow{color:#0e7490}
.category-page.theme-cyan .sidebar-title{color:#0e7490}
.category-page.theme-cyan .side-link:hover,.category-page.theme-cyan .side-link.active{background:#ecfeff;color:#0e7490}
.category-page.theme-cyan .sidebar-note{background:#ecfeff;color:#155e75;border-color:#a5f3fc}
.category-page.theme-cyan .heading-icon{background:#cffafe;border-color:#67e8f9}
.category-page.theme-cyan .view-all{color:#0e7490}
.category-page.theme-cyan .tool-row:hover{border-color:#67e8f9;background:#f0fdff;box-shadow:0 8px 20px rgba(8,145,178,.08)}
.category-page.theme-cyan .directory-panel{border-color:#cdeff4}
.category-page.theme-cyan .directory-top{background:linear-gradient(90deg,#f8feff,#ecfeff)}
.category-page.theme-cyan .search-box{border-color:#bfe7ed}
.category-page.theme-cyan .compact-tool:hover{border-color:#22d3ee;background:#f0fdff}
.category-page.theme-cyan .bottom-cta{background:linear-gradient(120deg,#cffafe,#a5f3fc 55%,#d9f99d);border-color:#67e8f9}
.category-page.theme-cyan .bottom-cta p{color:#0e5a68}

/* =========================================================================
   Theme: emerald (Security). Emerald + violet accents on a slate/indigo hero.
   ========================================================================= */
.category-page.theme-emerald{
  --cat-accent:#34d399;
  --cat-accent-deep:#059669;
  --cat-accent-soft:#d1fae5;
  --cat-accent2:#8b5cf6;
}
.category-page.theme-emerald .category-hero{
  background:
    radial-gradient(circle at 85% 18%,rgba(52,211,153,.20),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(139,92,246,.18),transparent 26%),
    linear-gradient(135deg,#111827 0%,#1f2937 58%,#312e81 100%);
}
.category-page.theme-emerald .category-hero:before{background:linear-gradient(135deg,rgba(52,211,153,.22),rgba(139,92,246,.05))}
.category-page.theme-emerald .category-hero:after{background:linear-gradient(90deg,#6ee7b7,#34d399,#8b5cf6)}
.category-page.theme-emerald .category-pill{color:#a7f3d0}
.category-page.theme-emerald .category-hero h1 span{
  background:linear-gradient(90deg,#a7f3d0,#6ee7b7,#c4b5fd);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.category-page.theme-emerald .btn.primary{background:linear-gradient(135deg,#6ee7b7,#34d399);color:#064e3b;border-color:#34d399;box-shadow:0 12px 26px rgba(52,211,153,.24)}
.category-page.theme-emerald .hero-board-title span{color:#c4b5fd}
.category-page.theme-emerald .hero-topic .emoji{background:linear-gradient(145deg,#ecfdf5,#a7f3d0);border-color:#6ee7b7}
.category-page.theme-emerald .hero-topic .arrow{color:#047857}
.category-page.theme-emerald .sidebar-title{color:#047857}
.category-page.theme-emerald .side-link:hover,.category-page.theme-emerald .side-link.active{background:#ecfdf5;color:#047857}
.category-page.theme-emerald .sidebar-note{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.category-page.theme-emerald .heading-icon{background:#d1fae5;border-color:#6ee7b7}
.category-page.theme-emerald .view-all{color:#047857}
.category-page.theme-emerald .tool-row:hover{border-color:#6ee7b7;background:#f6fffb;box-shadow:0 8px 20px rgba(5,150,105,.08)}
.category-page.theme-emerald .directory-panel{border-color:#d8e9e2}
.category-page.theme-emerald .directory-top{background:linear-gradient(90deg,#fbfffd,#ecfdf5)}
.category-page.theme-emerald .search-box{border-color:#c7e8d7}
.category-page.theme-emerald .compact-tool:hover{border-color:#34d399;background:#f6fffb}
.category-page.theme-emerald .bottom-cta{background:linear-gradient(120deg,#d1fae5,#a7f3d0 55%,#ddd6fe);border-color:#6ee7b7}
.category-page.theme-emerald .bottom-cta p{color:#065f46}

/* =========================================================================
   Theme: indigo (JSON, XML & Data). Cyan + indigo + rose accents on a deep
   indigo hero.
   ========================================================================= */
.category-page.theme-indigo{
  --cat-accent:#6366f1;
  --cat-accent-deep:#4338ca;
  --cat-accent-soft:#eef2ff;
  --cat-accent2:#fb7185;
}
.category-page.theme-indigo .category-hero{
  background:
    radial-gradient(circle at 85% 18%,rgba(34,211,238,.22),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(251,113,133,.18),transparent 26%),
    linear-gradient(135deg,#1e1b4b 0%,#312e81 56%,#164e63 100%);
}
.category-page.theme-indigo .category-hero:before{background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(251,113,133,.06))}
.category-page.theme-indigo .category-hero:after{background:linear-gradient(90deg,#67e8f9,#6366f1,#fb7185)}
.category-page.theme-indigo .category-pill{color:#a5f3fc}
.category-page.theme-indigo .category-hero h1 span{
  background:linear-gradient(90deg,#a5f3fc,#c7d2fe,#fecdd3);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.category-page.theme-indigo .btn.primary{background:linear-gradient(135deg,#67e8f9,#6366f1);color:#172554;border-color:#6366f1;box-shadow:0 12px 26px rgba(99,102,241,.24)}
.category-page.theme-indigo .hero-board-title span{color:#fecdd3}
.category-page.theme-indigo .hero-topic .emoji{background:linear-gradient(145deg,#eef2ff,#c7d2fe);border-color:#a5b4fc}
.category-page.theme-indigo .hero-topic .arrow{color:#4338ca}
.category-page.theme-indigo .sidebar-title{color:#4338ca}
.category-page.theme-indigo .side-link:hover,.category-page.theme-indigo .side-link.active{background:#eef2ff;color:#4338ca}
.category-page.theme-indigo .sidebar-note{background:#eef2ff;color:#4338ca;border-color:#c7d2fe}
.category-page.theme-indigo .heading-icon{background:#cffafe;border-color:#a5b4fc}
.category-page.theme-indigo .view-all{color:#4338ca}
.category-page.theme-indigo .tool-row:hover{border-color:#a5b4fc;background:#f7f8ff;box-shadow:0 8px 20px rgba(99,102,241,.08)}
.category-page.theme-indigo .directory-panel{border-color:#dddff4}
.category-page.theme-indigo .directory-top{background:linear-gradient(90deg,#fbfbff,#eef2ff)}
.category-page.theme-indigo .search-box{border-color:#d7daf1}
.category-page.theme-indigo .compact-tool:hover{border-color:#6366f1;background:#f7f8ff}
.category-page.theme-indigo .bottom-cta{background:linear-gradient(120deg,#cffafe,#c7d2fe 55%,#fecdd3);border-color:#a5b4fc}
.category-page.theme-indigo .bottom-cta p{color:#3730a3}

/* =========================================================================
   Theme: violet (Code & Development). Blue + fuchsia accents on a deep
   navy/purple hero.
   ========================================================================= */
.category-page.theme-violet{
  --cat-accent:#3b82f6;
  --cat-accent-deep:#2563eb;
  --cat-accent-soft:#dbeafe;
  --cat-accent2:#d946ef;
}
.category-page.theme-violet .category-hero{
  background:
    radial-gradient(circle at 85% 18%,rgba(96,165,250,.22),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(217,70,239,.18),transparent 26%),
    linear-gradient(135deg,#0f172a 0%,#1e3a8a 54%,#581c87 100%);
}
.category-page.theme-violet .category-hero:before{background:linear-gradient(135deg,rgba(96,165,250,.22),rgba(236,72,153,.06))}
.category-page.theme-violet .category-hero:after{background:linear-gradient(90deg,#93c5fd,#60a5fa,#d946ef)}
.category-page.theme-violet .category-pill{color:#bfdbfe}
.category-page.theme-violet .category-hero h1 span{
  background:linear-gradient(90deg,#bfdbfe,#c4b5fd,#f5d0fe);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.category-page.theme-violet .btn.primary{background:linear-gradient(135deg,#93c5fd,#3b82f6);color:#172554;border-color:#3b82f6;box-shadow:0 12px 26px rgba(59,130,246,.24)}
.category-page.theme-violet .hero-board-title span{color:#f5d0fe}
.category-page.theme-violet .hero-topic .emoji{background:linear-gradient(145deg,#eff6ff,#bfdbfe);border-color:#93c5fd}
.category-page.theme-violet .hero-topic .arrow{color:#2563eb}
.category-page.theme-violet .sidebar-title{color:#2563eb}
.category-page.theme-violet .side-link:hover,.category-page.theme-violet .side-link.active{background:#eff6ff;color:#2563eb}
.category-page.theme-violet .sidebar-note{background:#eff6ff;color:#2563eb;border-color:#bfdbfe}
.category-page.theme-violet .heading-icon{background:#dbeafe;border-color:#93c5fd}
.category-page.theme-violet .view-all{color:#2563eb}
.category-page.theme-violet .tool-row:hover{border-color:#93c5fd;background:#f8faff;box-shadow:0 8px 20px rgba(59,130,246,.08)}
.category-page.theme-violet .directory-panel{border-color:#dbe4f3}
.category-page.theme-violet .directory-top{background:linear-gradient(90deg,#fbfdff,#eff6ff)}
.category-page.theme-violet .search-box{border-color:#d7e3f6}
.category-page.theme-violet .compact-tool:hover{border-color:#3b82f6;background:#f8faff}
.category-page.theme-violet .bottom-cta{background:linear-gradient(120deg,#dbeafe,#c4b5fd 55%,#f5d0fe);border-color:#93c5fd}
.category-page.theme-violet .bottom-cta p{color:#1e3a8a}

/* =========================================================================
   Theme: rose (Text & Encoding). Amber + rose + purple accents on a deep
   plum hero.
   ========================================================================= */
.category-page.theme-rose{
  --cat-accent:#fb7185;
  --cat-accent-deep:#be123c;
  --cat-accent-soft:#fef3c7;
  --cat-accent2:#a855f7;
}
.category-page.theme-rose .category-hero{
  background:
    radial-gradient(circle at 85% 18%,rgba(245,158,11,.22),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(244,63,94,.20),transparent 26%),
    linear-gradient(135deg,#2e1065 0%,#4a044e 54%,#831843 100%);
}
.category-page.theme-rose .category-hero:before{background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(244,63,94,.06))}
.category-page.theme-rose .category-hero:after{background:linear-gradient(90deg,#fcd34d,#fb7185,#c084fc)}
.category-page.theme-rose .category-pill{color:#fde68a}
.category-page.theme-rose .category-hero h1 span{
  background:linear-gradient(90deg,#fde68a,#fecdd3,#e9d5ff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.category-page.theme-rose .btn.primary{background:linear-gradient(135deg,#fcd34d,#fb7185);color:#4c0519;border-color:#fb7185;box-shadow:0 12px 26px rgba(244,63,94,.24)}
.category-page.theme-rose .hero-board-title span{color:#e9d5ff}
.category-page.theme-rose .hero-topic .emoji{background:linear-gradient(145deg,#fff7ed,#fed7aa);border-color:#fdba74}
.category-page.theme-rose .hero-topic .arrow{color:#be123c}
.category-page.theme-rose .sidebar-title{color:#be123c}
.category-page.theme-rose .side-link:hover,.category-page.theme-rose .side-link.active{background:#fff7ed;color:#be123c}
.category-page.theme-rose .sidebar-note{background:#fff7ed;color:#be123c;border-color:#fed7aa}
.category-page.theme-rose .heading-icon{background:#fef3c7;border-color:#fdba74}
.category-page.theme-rose .view-all{color:#be123c}
.category-page.theme-rose .tool-row:hover{border-color:#fdba74;background:#fffafb;box-shadow:0 8px 20px rgba(190,24,93,.08)}
.category-page.theme-rose .directory-panel{border-color:#f0dce3}
.category-page.theme-rose .directory-top{background:linear-gradient(90deg,#fffdfd,#fff1f2)}
.category-page.theme-rose .search-box{border-color:#f0d9e0}
.category-page.theme-rose .compact-tool:hover{border-color:#fb7185;background:#fffafb}
.category-page.theme-rose .bottom-cta{background:linear-gradient(120deg,#fef3c7,#fecdd3 55%,#e9d5ff);border-color:#fdba74}
.category-page.theme-rose .bottom-cta p{color:#831843}

/* =========================================================================
   Theme: mint (Date, Math & Conversion). Green + blue + amber accents on
   a deep forest/navy hero.
   ========================================================================= */
.category-page.theme-mint{
  --cat-accent:#22c55e;
  --cat-accent-deep:#15803d;
  --cat-accent-soft:#dcfce7;
  --cat-accent2:#2563eb;
}
.category-page.theme-mint .category-hero{
  background:
    radial-gradient(circle at 85% 18%,rgba(34,197,94,.20),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(37,99,235,.18),transparent 26%),
    linear-gradient(135deg,#052e16 0%,#064e3b 52%,#1e3a8a 100%);
}
.category-page.theme-mint .category-hero:before{background:linear-gradient(135deg,rgba(34,197,94,.20),rgba(37,99,235,.06))}
.category-page.theme-mint .category-hero:after{background:linear-gradient(90deg,#86efac,#22c55e,#60a5fa)}
.category-page.theme-mint .category-pill{color:#bbf7d0}
.category-page.theme-mint .category-hero h1 span{
  background:linear-gradient(90deg,#bbf7d0,#bfdbfe,#fde68a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.category-page.theme-mint .btn.primary{background:linear-gradient(135deg,#86efac,#22c55e);color:#052e16;border-color:#22c55e;box-shadow:0 12px 26px rgba(34,197,94,.24)}
.category-page.theme-mint .hero-board-title span{color:#bfdbfe}
.category-page.theme-mint .hero-topic .emoji{background:linear-gradient(145deg,#ecfdf5,#bbf7d0);border-color:#86efac}
.category-page.theme-mint .hero-topic .arrow{color:#15803d}
.category-page.theme-mint .sidebar-title{color:#15803d}
.category-page.theme-mint .side-link:hover,.category-page.theme-mint .side-link.active{background:#ecfdf5;color:#15803d}
.category-page.theme-mint .sidebar-note{background:#ecfdf5;color:#15803d;border-color:#bbf7d0}
.category-page.theme-mint .heading-icon{background:#dcfce7;border-color:#86efac}
.category-page.theme-mint .view-all{color:#15803d}
.category-page.theme-mint .tool-row:hover{border-color:#86efac;background:#f8fffb;box-shadow:0 8px 20px rgba(21,128,61,.08)}
.category-page.theme-mint .directory-panel{border-color:#dbe9df}
.category-page.theme-mint .directory-top{background:linear-gradient(90deg,#fbfffd,#ecfdf5)}
.category-page.theme-mint .search-box{border-color:#d9e7dd}
.category-page.theme-mint .compact-tool:hover{border-color:#22c55e;background:#f8fffb}
.category-page.theme-mint .bottom-cta{background:linear-gradient(120deg,#dcfce7,#bfdbfe 55%,#fde68a);border-color:#86efac}
.category-page.theme-mint .bottom-cta p{color:#14532d}

/* =========================================================================
   Theme: sky (Image & PDF). Cyan + sky-blue + rose accents on a deep
   navy/indigo hero.
   ========================================================================= */
.category-page.theme-sky{
  --cat-accent:#0ea5e9;
  --cat-accent-deep:#0369a1;
  --cat-accent-soft:#cffafe;
  --cat-accent2:#fb7185;
}
.category-page.theme-sky .category-hero{
  background:
    radial-gradient(circle at 85% 18%,rgba(34,211,238,.22),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(251,113,133,.18),transparent 26%),
    linear-gradient(135deg,#0f172a 0%,#0c4a6e 54%,#312e81 100%);
}
.category-page.theme-sky .category-hero:before{background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(251,113,133,.06))}
.category-page.theme-sky .category-hero:after{background:linear-gradient(90deg,#67e8f9,#22d3ee,#fb7185)}
.category-page.theme-sky .category-pill{color:#a5f3fc}
.category-page.theme-sky .category-hero h1 span{
  background:linear-gradient(90deg,#a5f3fc,#bfdbfe,#fecdd3);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.category-page.theme-sky .btn.primary{background:linear-gradient(135deg,#67e8f9,#0ea5e9);color:#082f49;border-color:#0ea5e9;box-shadow:0 12px 26px rgba(14,165,233,.24)}
.category-page.theme-sky .hero-board-title span{color:#fecdd3}
.category-page.theme-sky .hero-topic .emoji{background:linear-gradient(145deg,#ecfeff,#a5f3fc);border-color:#67e8f9}
.category-page.theme-sky .hero-topic .arrow{color:#0369a1}
.category-page.theme-sky .sidebar-title{color:#0369a1}
.category-page.theme-sky .side-link:hover,.category-page.theme-sky .side-link.active{background:#ecfeff;color:#0369a1}
.category-page.theme-sky .sidebar-note{background:#ecfeff;color:#0369a1;border-color:#a5f3fc}
.category-page.theme-sky .heading-icon{background:#cffafe;border-color:#67e8f9}
.category-page.theme-sky .view-all{color:#0369a1}
.category-page.theme-sky .tool-row:hover{border-color:#67e8f9;background:#f8fdff;box-shadow:0 8px 20px rgba(3,105,161,.08)}
.category-page.theme-sky .directory-panel{border-color:#d9e7ed}
.category-page.theme-sky .directory-top{background:linear-gradient(90deg,#fbfeff,#ecfeff)}
.category-page.theme-sky .search-box{border-color:#d8e7ec}
.category-page.theme-sky .compact-tool:hover{border-color:#0ea5e9;background:#f8fdff}
.category-page.theme-sky .bottom-cta{background:linear-gradient(120deg,#cffafe,#bfdbfe 55%,#fecdd3);border-color:#67e8f9}
.category-page.theme-sky .bottom-cta p{color:#0c4a6e}

/* =========================================================================
   Theme: azure (Server & API). Sky blue + indigo accents on a deep
   slate hero.
   ========================================================================= */
.category-page.theme-azure{
  --cat-accent:#2563eb;
  --cat-accent-deep:#1d4ed8;
  --cat-accent-soft:#e0f2fe;
  --cat-accent2:#6366f1;
}
.category-page.theme-azure .category-hero{
  background:
    radial-gradient(circle at 85% 18%,rgba(56,189,248,.22),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(99,102,241,.18),transparent 26%),
    linear-gradient(135deg,#111827 0%,#1e293b 52%,#1e3a8a 100%);
}
.category-page.theme-azure .category-hero:before{background:linear-gradient(135deg,rgba(56,189,248,.22),rgba(99,102,241,.06))}
.category-page.theme-azure .category-hero:after{background:linear-gradient(90deg,#7dd3fc,#38bdf8,#6366f1)}
.category-page.theme-azure .category-pill{color:#bae6fd}
.category-page.theme-azure .category-hero h1 span{
  background:linear-gradient(90deg,#bae6fd,#bfdbfe,#c7d2fe);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.category-page.theme-azure .btn.primary{background:linear-gradient(135deg,#7dd3fc,#2563eb);color:#172554;border-color:#2563eb;box-shadow:0 12px 26px rgba(37,99,235,.24)}
.category-page.theme-azure .hero-board-title span{color:#c7d2fe}
.category-page.theme-azure .hero-topic .emoji{background:linear-gradient(145deg,#eff6ff,#bfdbfe);border-color:#93c5fd}
.category-page.theme-azure .hero-topic .arrow{color:#1d4ed8}
.category-page.theme-azure .sidebar-title{color:#1d4ed8}
.category-page.theme-azure .side-link:hover,.category-page.theme-azure .side-link.active{background:#eff6ff;color:#1d4ed8}
.category-page.theme-azure .sidebar-note{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.category-page.theme-azure .heading-icon{background:#e0f2fe;border-color:#93c5fd}
.category-page.theme-azure .view-all{color:#1d4ed8}
.category-page.theme-azure .tool-row:hover{border-color:#93c5fd;background:#f8faff;box-shadow:0 8px 20px rgba(37,99,235,.08)}
.category-page.theme-azure .directory-panel{border-color:#dbe4f1}
.category-page.theme-azure .directory-top{background:linear-gradient(90deg,#fbfdff,#eff6ff)}
.category-page.theme-azure .search-box{border-color:#d7e2f1}
.category-page.theme-azure .compact-tool:hover{border-color:#2563eb;background:#f8faff}
.category-page.theme-azure .bottom-cta{background:linear-gradient(120deg,#e0f2fe,#bfdbfe 55%,#c7d2fe);border-color:#93c5fd}
.category-page.theme-azure .bottom-cta p{color:#1e3a8a}

/* =========================================================================
   Theme: lime (Developer Utilities). Lime + cyan accents on a deep slate
   hero.
   ========================================================================= */
.category-page.theme-lime{
  --cat-accent:#65a30d;
  --cat-accent-deep:#4d7c0f;
  --cat-accent-soft:#ecfccb;
  --cat-accent2:#22d3ee;
}
.category-page.theme-lime .category-hero{
  background:
    radial-gradient(circle at 85% 18%,rgba(132,204,22,.22),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(34,211,238,.18),transparent 26%),
    linear-gradient(135deg,#0f172a 0%,#1f2937 52%,#164e63 100%);
}
.category-page.theme-lime .category-hero:before{background:linear-gradient(135deg,rgba(132,204,22,.22),rgba(34,211,238,.06))}
.category-page.theme-lime .category-hero:after{background:linear-gradient(90deg,#bef264,#84cc16,#22d3ee)}
.category-page.theme-lime .category-pill{color:#d9f99d}
.category-page.theme-lime .category-hero h1 span{
  background:linear-gradient(90deg,#d9f99d,#a5f3fc,#bfdbfe);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.category-page.theme-lime .btn.primary{background:linear-gradient(135deg,#bef264,#65a30d);color:#1a2e05;border-color:#65a30d;box-shadow:0 12px 26px rgba(101,163,13,.24)}
.category-page.theme-lime .hero-board-title span{color:#a5f3fc}
.category-page.theme-lime .hero-topic .emoji{background:linear-gradient(145deg,#f7fee7,#d9f99d);border-color:#bef264}
.category-page.theme-lime .hero-topic .arrow{color:#4d7c0f}
.category-page.theme-lime .sidebar-title{color:#4d7c0f}
.category-page.theme-lime .side-link:hover,.category-page.theme-lime .side-link.active{background:#f7fee7;color:#4d7c0f}
.category-page.theme-lime .sidebar-note{background:#f7fee7;color:#4d7c0f;border-color:#d9f99d}
.category-page.theme-lime .heading-icon{background:#ecfccb;border-color:#bef264}
.category-page.theme-lime .view-all{color:#4d7c0f}
.category-page.theme-lime .tool-row:hover{border-color:#bef264;background:#fbfef7;box-shadow:0 8px 20px rgba(77,124,15,.08)}
.category-page.theme-lime .directory-panel{border-color:#e2e9d5}
.category-page.theme-lime .directory-top{background:linear-gradient(90deg,#fdfff9,#f7fee7)}
.category-page.theme-lime .search-box{border-color:#e0e7d3}
.category-page.theme-lime .compact-tool:hover{border-color:#65a30d;background:#fbfef7}
.category-page.theme-lime .bottom-cta{background:linear-gradient(120deg,#ecfccb,#d9f99d 55%,#a5f3fc);border-color:#bef264}
.category-page.theme-lime .bottom-cta p{color:#365314}

/* =========================================================================
   Compact mode — a tighter, denser variant for category pages that don't
   need the full premium hero treatment. Same structure, smaller everything.
   ========================================================================= */
.category-page.is-compact{width:min(calc(100% - 36px),1320px)}

.category-page.is-compact .category-hero{border-radius:22px;padding:30px 34px;gap:32px}
.category-page.is-compact .category-hero h1{font-size:36px;letter-spacing:-1.1px;margin-top:12px}
.category-page.is-compact .category-hero p{font-size:14.5px;line-height:1.62;margin-top:12px}
.category-page.is-compact .category-pill{padding:6px 11px;font-size:11px}
.category-page.is-compact .hero-actions{margin-top:18px;gap:10px}
.category-page.is-compact .btn{padding:10px 15px;border-radius:11px;font-size:13px}
.category-page.is-compact .hero-points{margin-top:13px;gap:13px;font-size:11px}
.category-page.is-compact .hero-board{padding:13px;border-radius:18px}
.category-page.is-compact .hero-board-title{padding:2px 3px 9px}
.category-page.is-compact .hero-board-title strong{font-size:13px}
.category-page.is-compact .hero-topic{min-height:60px;padding:9px 11px;border-radius:13px;gap:10px;grid-template-columns:36px minmax(0,1fr) auto}
.category-page.is-compact .hero-topic + .hero-topic{margin-top:7px}
.category-page.is-compact .hero-topic .emoji{width:36px;height:36px;font-size:17px;border-radius:11px}
.category-page.is-compact .hero-topic strong{font-size:12.5px}
.category-page.is-compact .hero-topic small{font-size:9.5px}
.category-page.is-compact .hero-topic .arrow{width:24px;height:24px;border-radius:8px}

.category-page.is-compact .category-summary{gap:10px;margin-top:14px}
.category-page.is-compact .summary-strip{padding:12px 14px;border-radius:13px;gap:10px}
.category-page.is-compact .summary-strip .icon{width:34px;height:34px;font-size:16px;border-radius:10px}
.category-page.is-compact .summary-strip strong{font-size:15px}
.category-page.is-compact .summary-strip span{font-size:11px}

.category-page.is-compact .layout{margin-top:20px;gap:16px;grid-template-columns:225px minmax(0,1fr)}
.category-page.is-compact .sidebar{padding:10px;border-radius:14px;top:80px}
.category-page.is-compact .sidebar-title{padding:6px 7px 9px;font-size:11px}
.category-page.is-compact .side-link{padding:8px 8px;font-size:12.5px;gap:8px}
.category-page.is-compact .sidebar-note{margin-top:9px;padding:10px;font-size:11px}

.category-page.is-compact .section{margin-bottom:16px}
.category-page.is-compact .section-heading{margin-bottom:9px;gap:14px}
.category-page.is-compact .heading-icon{width:36px;height:36px;font-size:17px;border-radius:11px}
.category-page.is-compact .section-heading h2{font-size:18.5px;letter-spacing:-.3px}
.category-page.is-compact .section-heading p{font-size:12px}

.category-page.is-compact .featured-rail{gap:10px}
.category-page.is-compact .feature-card{min-height:auto;padding:16px;border-radius:15px}
.category-page.is-compact .feature-card .big-emoji{font-size:24px}
.category-page.is-compact .feature-card h3{margin:12px 0 5px;font-size:15.5px}
.category-page.is-compact .feature-card p{font-size:11.5px;line-height:1.5}
.category-page.is-compact .feature-tags{margin-top:11px;gap:5px}
.category-page.is-compact .feature-tags span{padding:4px 7px;font-size:9px}

.category-page.is-compact .tool-list{gap:9px}
.category-page.is-compact .tool-row{padding:10px 11px;gap:10px;border-radius:12px;grid-template-columns:36px minmax(0,1fr) auto}
.category-page.is-compact .tool-icon{width:36px;height:36px;font-size:16px;border-radius:10px}
.category-page.is-compact .tool-row h3{font-size:12.5px}
.category-page.is-compact .tool-row p{font-size:10.5px;margin-top:2px}

.category-page.is-compact .directory-panel{margin-top:18px;border-radius:16px}
.category-page.is-compact .directory-top{padding:16px}
.category-page.is-compact .directory-top h2{font-size:19px}
.category-page.is-compact .directory-top p{font-size:12.5px}
.category-page.is-compact .toolbar{margin-top:11px;gap:9px}
.category-page.is-compact .search-box{border-radius:10px}
.category-page.is-compact .search-box input{padding:9px 0;font-size:13px}
.category-page.is-compact .filters{padding:10px 14px;gap:6px}
.category-page.is-compact .filter{padding:6px 10px;font-size:10.5px}
.category-page.is-compact .all-tools{padding:12px;gap:9px}
.category-page.is-compact .compact-tool{padding:10px;border-radius:11px;gap:8px}
.category-page.is-compact .compact-icon{width:32px;height:32px;font-size:15px;border-radius:9px}
.category-page.is-compact .compact-tool strong{font-size:12px}
.category-page.is-compact .compact-tool small{font-size:9.5px}

.category-page.is-compact .bottom-cta{margin-top:16px;padding:18px 20px;border-radius:16px}
.category-page.is-compact .bottom-cta h2{font-size:19px}
.category-page.is-compact .bottom-cta p{font-size:12.5px}

@media(max-width:1180px){
  .category-page.is-compact .category-hero{padding:26px 24px}
}
@media(max-width:680px){
  .category-page.is-compact .category-hero h1{font-size:28px}
}