:root{--showcase-ink:#123c40;--showcase-muted:#617779;--showcase-green:#087563;--showcase-mint:#7ee0c3;--showcase-line:#dbe8e4}
.vc-category-page{background:#f5f8f6;color:var(--showcase-ink)}
.vc-category-page .site-header{background:#063f3a;border-bottom:1px solid rgb(255 255 255 / 10%)}
.vc-category-page .header-inner{max-width:1344px}
.vc-category-page .brand{color:#fff}.vc-category-page .brand span{color:#66d7bf}
.vc-category-page .site-nav>a{color:#eefaf6;text-decoration:none;font-weight:650}
.vc-category-page .vc-nav-favorites{border:1px solid rgb(255 255 255 / 24%);border-radius:12px;padding:.55rem .9rem}
.category-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);align-items:center;min-height:390px;overflow:hidden;padding:3.5rem max(2rem,calc((100vw - 1180px)/2));background:radial-gradient(circle at 76% 30%,rgb(105 219 191 / 24%),transparent 28%),linear-gradient(118deg,#073f3a 0%,#07564b 54%,#0d7867 100%);color:#fff}
.category-hero::after{content:"";position:absolute;width:460px;height:460px;right:-150px;bottom:-300px;border:70px solid rgb(126 224 195 / 8%);border-radius:50%}
.category-back{position:absolute;top:1.4rem;left:max(2rem,calc((100vw - 1180px)/2));z-index:2;color:#c8eee3;text-decoration:none;font-size:.9rem;font-weight:700}
.category-hero-copy{position:relative;z-index:1;max-width:660px}.category-kicker{margin:0 0 .8rem;color:#9be8d2;font-size:.75rem;font-weight:800;letter-spacing:.15em}.category-hero h1{margin:0;font-size:clamp(3.2rem,6vw,5.8rem);line-height:.95;letter-spacing:-.055em}.category-hero-copy>p:last-child{max-width:590px;margin:1.25rem 0 0;color:#d8ece7;font-size:1.12rem;line-height:1.6}.category-hero>img{position:relative;z-index:1;width:min(100%,430px);height:280px;justify-self:end;object-fit:contain;filter:drop-shadow(0 24px 25px rgb(0 31 27 / 24%))}
.showcase-section{max-width:1240px;margin:0 auto;padding:3.6rem 2rem 5rem}.showcase-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:1.8rem}.showcase-heading p{margin:0 0 .45rem;color:#0b7b68;font-size:.72rem;font-weight:800;letter-spacing:.14em}.showcase-heading h2{margin:0;font-size:clamp(2rem,3vw,2.8rem);letter-spacing:-.04em}.showcase-heading>span{color:var(--showcase-muted);font-size:.92rem}
.tool-showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.35rem}.showcase-card{min-width:0;overflow:hidden;border:1px solid var(--showcase-line);border-radius:24px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 8px 28px rgb(9 53 47 / 6%);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.showcase-card:hover,.showcase-card:focus-visible{transform:translateY(-7px) scale(1.012);border-color:#7fcdb9;box-shadow:0 22px 48px rgb(9 53 47 / 16%);outline:none}.tool-preview{height:270px;padding:24px;background:linear-gradient(145deg,#dff3ed,#b9e5da);overflow:hidden}.preview-window{height:100%;overflow:hidden;border:1px solid rgb(15 79 68 / 14%);border-radius:15px;background:#fdfefe;box-shadow:0 20px 45px rgb(13 66 57 / 18%)}.preview-top{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid #e3ece9;background:#f6f8f7}.preview-top i{width:7px;height:7px;border-radius:50%;background:#bdd2cc}.preview-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;height:132px;margin:16px;border:2px dashed #a9d6c9;border-radius:13px;background:#f2faf7;color:#315d55}.preview-drop b{margin-top:8px;font-size:.9rem}.preview-drop small{margin-top:3px;color:#77928b}.file-chip{display:grid;place-items:center;width:54px;height:40px;border-radius:9px;background:#0c806b;color:#fff;font-size:.72rem;font-weight:900}.preview-convert{display:flex;align-items:center;justify-content:center;gap:14px;color:#35645b;font-size:.72rem}.preview-convert span{padding:5px 9px;border-radius:7px;background:#e8f5f1;font-weight:800}.preview-convert strong{color:#0a826c;font-size:1.2rem}
.preview-convert.tool-preview{background:linear-gradient(145deg,#e3f0fb,#c7e0f4)}.format-scene{display:grid;grid-template-columns:1fr auto .8fr;align-items:center;gap:12px;height:170px;padding:20px}.fake-photo{position:relative;height:112px;overflow:hidden;border-radius:12px;background:linear-gradient(#8bc7dd 0 48%,#70a86f 49% 100%)}.fake-photo::before{content:"";position:absolute;width:90px;height:70px;left:12px;bottom:17px;background:#406f66;clip-path:polygon(0 100%,43% 25%,60% 52%,76% 15%,100% 100%)}.fake-photo span{position:absolute;width:20px;height:20px;right:18px;top:18px;border-radius:50%;background:#f7d987}.format-arrow{color:#287e70;font-size:1.5rem;font-weight:900}.format-stack{display:grid;gap:7px}.format-stack b{padding:7px 9px;border:1px solid #cddfdc;border-radius:8px;background:#fff;color:#2f675e;font-size:.7rem}.preview-bar{height:7px;margin:0 20px;border-radius:10px;background:#e3ece9}.preview-bar span{display:block;width:72%;height:100%;border-radius:inherit;background:#2d9a85}
.preview-compress.tool-preview{background:linear-gradient(145deg,#e7f6e9,#cce8d0)}.compress-scene{padding:18px}.compress-scene .fake-photo{height:115px}.size-row{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:12px;color:#355f57;font-size:.8rem}.size-row b:last-child{color:#0a846c}.saving{width:max-content;margin:8px auto 0;padding:4px 9px;border-radius:99px;background:#dcf5e8;color:#13725f;font-size:.67rem;font-weight:800}
.preview-resize.tool-preview{background:linear-gradient(145deg,#f1ede2,#ded8c5)}.resize-scene{display:grid;grid-template-columns:1.2fr .8fr;gap:15px;padding:18px}.resize-photo{position:relative;height:150px;border-radius:11px;background:linear-gradient(#9bcbd8 0 48%,#7eac72 49% 100%)}.resize-photo::before{content:"";position:absolute;inset:14px;border:1px dashed rgb(255 255 255 / 85%)}.resize-photo span{position:absolute;inset:0;background:linear-gradient(140deg,transparent 45%,rgb(23 78 69 / 35%) 46% 62%,transparent 63%)}.resize-photo em{position:absolute;right:8px;bottom:7px;padding:3px 6px;border-radius:5px;background:rgb(0 0 0 / 55%);color:#fff;font-size:.58rem;font-style:normal}.resize-fields{display:flex;flex-direction:column;gap:8px}.resize-fields label{display:flex;justify-content:space-between;padding:7px;border:1px solid #dfe7e4;border-radius:7px;color:#71837e;font-size:.62rem}.resize-fields label b{color:#345e56}.resize-fields .preview-button{margin-top:auto;padding:8px;border:0;border-radius:7px;background:#0b806b;color:#fff;font-size:.62rem;font-weight:800}
.showcase-copy{padding:1.3rem 1.45rem 1.45rem}.showcase-copy>span{color:#0b806b;font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.showcase-copy h3{margin:.35rem 0 .45rem;font-size:1.5rem;letter-spacing:-.03em}.showcase-copy p{min-height:48px;margin:0;color:var(--showcase-muted);line-height:1.5}.showcase-copy>strong{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;color:#0a6f5e;font-size:.86rem}.showcase-copy>strong b{font-size:1.1rem}
@media(max-width:800px){.category-hero{grid-template-columns:1fr;padding:4.5rem 1.4rem 2rem}.category-back{left:1.4rem}.category-hero>img{width:260px;height:180px;justify-self:start}.showcase-section{padding:2.5rem 1rem 4rem}.showcase-heading{display:block}.showcase-heading>span{display:block;margin-top:.6rem}.tool-showcase-grid{grid-template-columns:1fr}.tool-preview{height:235px}.showcase-card:hover{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.showcase-card{transition:none}.showcase-card:hover{transform:none}}
/* Reusable visual previews for the remaining category pages. */
.preview-generic.tool-preview{display:grid;place-items:center;background:linear-gradient(145deg,#e1f3ee,#c6e7dd)}
.preview-generic .preview-window{width:100%}
.generic-scene{display:grid;place-items:center;align-content:center;gap:12px;height:calc(100% - 30px);padding:20px;text-align:center}
.generic-symbol{display:grid;place-items:center;min-width:86px;height:64px;padding:0 14px;border-radius:15px;background:#0b806b;color:#fff;font-size:1rem;font-weight:900;box-shadow:0 12px 24px rgb(11 128 107 / 18%)}
.generic-title{color:#244f48;font-size:.9rem;font-weight:850}.generic-lines{display:grid;gap:7px;width:min(82%,280px)}.generic-lines i{display:block;height:8px;border-radius:99px;background:#dcebe7}.generic-lines i:nth-child(2){width:72%;justify-self:center}.generic-action{padding:7px 16px;border-radius:9px;background:#e1f4ee;color:#08715f;font-size:.68rem;font-weight:850}
.preview-pdf.tool-preview{background:linear-gradient(145deg,#f8e9e7,#efd3cf)}.preview-pdf .generic-symbol{background:#b64b42}.preview-pdf .generic-action{background:#f7e3df;color:#963b34}
.preview-text.tool-preview{background:linear-gradient(145deg,#fbf5df,#f0e2b8)}.preview-text .generic-symbol{background:#9a741d}.preview-text .generic-action{background:#f8efcf;color:#7c5c14}
.preview-media.tool-preview{background:linear-gradient(145deg,#eee9f8,#dcd2ef)}.preview-media .generic-symbol{background:#7655a3}.preview-media .generic-action{background:#eee6fa;color:#65448f}
.preview-business.tool-preview{background:linear-gradient(145deg,#e4f4ed,#cde8dc)}.preview-business .generic-symbol{background:#087563}
.preview-work.tool-preview{background:linear-gradient(145deg,#e7f1f8,#d2e4f0)}.preview-work .generic-symbol{background:#2c6f91}.preview-work .generic-action{background:#e1eef6;color:#245f7d}

/* Direct category pages: category name first, tools immediately below. */
.showcase-section-direct{padding-top:2.1rem}
.category-direct-heading{margin:0 0 .7rem}
.category-direct-heading h1{margin:0;font-size:clamp(2.35rem,4vw,3.7rem);line-height:1;letter-spacing:-.045em;color:var(--showcase-ink)}
.showcase-heading-direct{margin-bottom:1.45rem}
.showcase-heading-direct h2{font-size:clamp(1.55rem,2.4vw,2.25rem)}
@media(max-width:800px){.showcase-section-direct{padding-top:1.6rem}.category-direct-heading{margin-bottom:.55rem}.showcase-heading-direct{margin-bottom:1.15rem}}

/* Compact category tool gallery: show the available tools at a glance. */
@media(min-width:801px){
  .showcase-section-direct{max-width:1180px;padding-top:1.65rem}
  .showcase-section-direct .category-direct-heading{margin-bottom:.45rem}
  .showcase-section-direct .showcase-heading-direct{margin-bottom:1rem}
  .showcase-section-direct .tool-showcase-grid{gap:1rem}
  .showcase-section-direct .tool-showcase-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .showcase-section-direct .tool-showcase-grid-2{grid-template-columns:repeat(3,minmax(0,1fr))}
  .showcase-section-direct .tool-showcase-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));width:calc((100% - 2rem)/3*2 + 1rem)}
  .showcase-section-direct .showcase-card{border-radius:18px}
  .showcase-section-direct .tool-preview{height:155px;padding:13px}
  .showcase-section-direct .preview-window{border-radius:11px}
  .showcase-section-direct .preview-top{height:22px;padding:0 9px}
  .showcase-section-direct .preview-top i{width:5px;height:5px}
  .showcase-section-direct .generic-scene{gap:7px;height:calc(100% - 22px);padding:10px}
  .showcase-section-direct .generic-symbol{min-width:64px;height:43px;padding:0 10px;border-radius:10px;font-size:.78rem}
  .showcase-section-direct .generic-title{font-size:.76rem}
  .showcase-section-direct .generic-lines{gap:5px}
  .showcase-section-direct .generic-lines i{height:5px}
  .showcase-section-direct .generic-action{padding:4px 10px;font-size:.58rem}
  .showcase-section-direct .showcase-copy{padding:.85rem 1rem 1rem}
  .showcase-section-direct .showcase-copy>span{font-size:.58rem}
  .showcase-section-direct .showcase-copy h3{margin:.25rem 0 .3rem;font-size:1.08rem}
  .showcase-section-direct .showcase-copy p{min-height:0;font-size:.82rem;line-height:1.35}
  .showcase-section-direct .showcase-copy>strong{margin-top:.55rem;font-size:.75rem}
  .showcase-section-direct .showcase-copy>strong b{font-size:.95rem}
  .showcase-section-direct .preview-drop{height:76px;margin:8px}
  .showcase-section-direct .file-chip{width:42px;height:30px}
  .showcase-section-direct .format-scene{height:105px;padding:10px}
  .showcase-section-direct .fake-photo{height:70px}
  .showcase-section-direct .compress-scene{padding:9px}
  .showcase-section-direct .compress-scene .fake-photo{height:68px}
  .showcase-section-direct .resize-scene{padding:9px}
  .showcase-section-direct .resize-photo{height:90px}
}
@media(max-width:800px) and (min-width:560px){
  .showcase-section-direct .tool-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.resize-fields .preview-button{text-align:center}
@media(min-width:801px){.showcase-section-direct .tool-showcase-grid-1{grid-template-columns:repeat(3,minmax(0,1fr))}}