/* ═══════════════════════════════════════════════════════════════
   imgavio — tool.css — Tool pages only
   Variables and base styles are inherited from main.css
   ═══════════════════════════════════════════════════════════════ */

/* ── BREADCRUMB ────────────────────────────────────────────────── */
.breadcrumb{margin-top:0;padding:14px 48px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--border);background:var(--bg)}
.breadcrumb a{color:var(--muted);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb span{color:var(--muted)}

/* ── TOOL HERO ─────────────────────────────────────────────────── */
.tool-hero{padding:28px 48px 8px;max-width:960px;margin:0 auto;text-align:center}
.tool-hero h1{font-family:var(--fd);font-size:clamp(28px,5vw,52px);font-weight:800;letter-spacing:-2px;line-height:1.05;margin-bottom:10px;color:var(--text)}
.tool-hero p{font-size:16px;color:var(--text2);max-width:580px;margin:0 auto 14px;line-height:1.6}
.tool-hero p a{color:var(--blue);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(37,99,235,.25);transition:border-color .15s}
.tool-hero p a:hover{border-bottom-color:var(--blue)}
.tool-badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:5px 14px;border-radius:100px;margin-bottom:16px;border:1px solid}
.trust-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.trust-pill{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text2);padding:5px 13px;border:1.5px solid var(--border);border-radius:100px;background:#fff}
.trust-pill .dot,.dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.trust-pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.pill{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);padding:6px 14px;border:1.5px solid var(--border);border-radius:100px;background:#fff}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}

/* ── TOOL ZONE — isolated band ─────────────────────────────────────
   Phase 3.19.6: tight padding all around. Top 20 (close to hero),
   bottom 20 (close to content). The tinted background + border-bottom
   provide visual separation; large vertical gaps were excessive. */
.tool-zone{
  background:var(--bg2);
  padding:20px 24px 20px;
  margin-bottom:0;
  border-bottom:1px solid var(--border);
}

/* Tool card inside the band — narrower than the content reading
   column below, so the tool feels focused and the content feels
   like a different mode. */
.tool-box,
.tool-container{
  max-width:720px;
  margin:0 auto;
  padding:28px;
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:16px;
  box-shadow:0 1px 3px rgba(15,23,42,.04),0 12px 32px rgba(15,23,42,.06);
}

/* Inner cards (result cards, broken-frame placeholders, etc.) drop their
   own outer chrome when nested inside .tool-box / .tool-container — the
   outer card now provides the boundary. */
.tool-box .hti-result,
.tool-box .gm-result,
.tool-box .vtg-result,
.tool-container .hti-result,
.tool-container .gm-result,
.tool-container .vtg-result{
  background:var(--bg2);
  border-color:var(--border);
  box-shadow:none;
}
.tool-box > .dropzone,
.tool-container > .dropzone{
  box-shadow:none;
}

/* Phase 3.19.5: trust strip — replaces the bulky pill row that used
   to sit ABOVE the tool. Now sits subtly BELOW the tool inside the
   tool-zone band, exactly when the user is deciding whether to
   click "Select Files" — which is when trust signals matter most. */
.trust-strip{
  max-width:720px;
  margin:18px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 18px;
  font-size:12px;
  color:var(--muted);
  font-weight:500;
}
.trust-strip span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.trust-strip svg{
  width:13px;
  height:13px;
  color:var(--green);
  flex-shrink:0;
}

/* ── DROPZONE ──────────────────────────────────────────────────── */
.dropzone{border:2px dashed var(--blue-bd);border-radius:16px;padding:48px 32px;text-align:center;cursor:pointer;transition:all .25s;background:#fff;position:relative;overflow:hidden;box-shadow:0 2px 12px rgba(37,99,235,.06)}

/* Hide native file input visually but keep it functional */
.dropzone input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:5;}
.dropzone:hover,.dropzone.drag-over{border-color:var(--blue);background:rgba(37,99,235,.04);border-style:solid;box-shadow:0 0 0 4px rgba(37,99,235,.06)}
.dropzone.files-loaded{border-color:var(--blue);border-style:solid}
.dz-icon{width:52px;height:52px;background:var(--blue);border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 4px 14px rgba(37,99,235,.35)}
.dz-icon svg{color:#fff;stroke:#fff}
.dz-title{font-family:var(--fd);font-size:18px;font-weight:700;margin-bottom:6px;color:var(--text)}
.dropzone p{font-size:14px;color:var(--muted);margin-bottom:16px}
.fmt-chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.fmt{font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px;background:rgba(255,255,255,.8);border:1px solid var(--border);color:var(--text2)}
.dropzone-icon{width:52px;height:52px;background:var(--blue-lt);border:1px solid var(--blue-bd);border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.dropzone-formats{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.fmt-tag{font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px;background:var(--blue-lt);border:1px solid var(--border);color:var(--text2)}
.upload-btn,.pick-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fb);font-size:13px;font-weight:600;padding:10px 22px;border-radius:100px;border:none;cursor:pointer;transition:all .2s;margin-top:12px}
.upload-btn:hover,.pick-btn:hover{transform:translateY(-1px);opacity:.9}

/* ── CONTROLS BAR ──────────────────────────────────────────────── */
.ctrl-bar,.controls-bar{display:none;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;background:var(--bg2);border:1.5px solid var(--border);border-radius:12px;margin-top:12px}
.ctrl-bar.show,.controls-bar.visible{display:flex}
#ctrl-bar.show{display:flex}
.ctrl-group,.control-group{display:flex;align-items:center;gap:10px;flex:1;min-width:180px}
.ctrl-label,.control-label{font-size:13px;color:var(--text2);white-space:nowrap;font-weight:500}
.slider,.quality-slider{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:2px;background:var(--bg3);outline:none;cursor:pointer}
.slider::-webkit-slider-thumb,.quality-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--blue);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px rgba(37,99,235,.3)}
.slider-val,.quality-value{font-family:var(--fd);font-size:15px;font-weight:700;color:var(--blue);min-width:36px;text-align:right}

/* ── PROCESS BUTTON ────────────────────────────────────────────── */
.action-btn,.compress-all-btn,#process-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fb);font-size:14px;font-weight:700;padding:11px 28px;border-radius:100px;border:none;cursor:pointer;transition:all .22s;white-space:nowrap}
.action-btn:hover,.compress-all-btn:hover{transform:translateY(-1px);opacity:.92}
#process-btn:disabled{opacity:.55;cursor:not-allowed}

/* ── STATS ─────────────────────────────────────────────────────── */
.stats-row,.stats-bar{display:none;background:var(--bg2);border:1.5px solid var(--border);border-radius:12px;margin-top:12px;overflow:hidden}
.stats-row.show,.stats-bar.show{display:flex}
#stats.show{display:flex}
.stat-cell,.stat-item{flex:1;text-align:center;padding:14px 8px;border-right:1px solid var(--border)}
.stat-cell:last-child,.stat-item:last-child{border-right:none}
.stat-n,.stat-num{font-family:var(--fd);font-size:22px;font-weight:800;color:var(--blue);line-height:1}
.stat-l,.stat-lbl{font-size:11px;color:var(--muted);margin-top:3px;font-weight:500}
.stats-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.stat-card{padding:20px;background:var(--bg2);border:1.5px solid var(--border);border-radius:12px;text-align:center}
.stat-card-n{font-family:var(--fd);font-size:32px;font-weight:800;color:var(--blue);letter-spacing:-1px}
.stat-card-l{font-size:12px;color:var(--muted);margin-top:4px;font-weight:500}

/* ── DOWNLOAD ALL ──────────────────────────────────────────────── */
.dl-all-wrap,.download-all-wrap{display:none;justify-content:center;margin-top:14px}
.dl-all-wrap.show,.download-all-wrap.show{display:flex}
#dl-all.show{display:flex!important}
.dl-all-btn,.download-all-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fb);font-size:14px;font-weight:700;padding:12px 32px;border-radius:100px;border:none;cursor:pointer;transition:all .22s}
.dl-all-btn:hover,.download-all-btn:hover{transform:translateY(-1px);opacity:.9}
#dl-all-btn{display:none}
#dl-all-btn.show{display:inline-flex}

/* ── FILES LIST ────────────────────────────────────────────────── */
#files-list{display:none;flex-direction:column;gap:10px;margin-top:14px}
#files-list.show{display:flex}
.file-item{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;padding:14px;background:var(--bg2);border:1.5px solid var(--border);border-radius:10px;transition:border-color .2s;margin-bottom:8px}
.file-item:hover{border-color:var(--blue-bd)}
.file-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px;background:var(--blue-lt);flex-shrink:0}
.file-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.file-meta{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.file-info{min-width:0}
.dl-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--fb);font-size:12px;font-weight:600;padding:7px 16px;border-radius:100px;background:transparent;color:var(--blue);border:1.5px solid var(--blue-bd);cursor:pointer;transition:all .2s;text-decoration:none}
.dl-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.progress-bar{height:3px;background:var(--bg3);border-radius:2px;margin-top:8px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--blue3));border-radius:2px;transition:width .3s ease;width:0}
#before-after-wrap{margin-top:20px}

/* ── HOWTO ─────────────────────────────────────────────────────── */
.howto-wrap{max-width:860px;margin:0 auto;padding:32px 48px 0}
.howto-wrap>h2{font-family:var(--fd);font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:18px;color:var(--text)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step-card{padding:22px;background:#fff;border:1.5px solid var(--border);border-radius:14px;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(37,99,235,.05);transition:border-color .2s}
.step-num-big{font-family:var(--fd);font-size:52px;font-weight:800;color:var(--blue);opacity:.07;position:absolute;top:8px;right:12px;line-height:1}
.step-icon-wrap{width:40px;height:40px;background:var(--blue-lt);border:1px solid var(--blue-bd);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.step-icon-wrap svg{color:var(--blue)}
.step-title{font-family:var(--fd);font-size:14px;font-weight:700;margin-bottom:6px;color:var(--text)}
.step-desc{font-size:13px;color:var(--text2);line-height:1.6}

/* ── PAGE SECTIONS — unified block structure ────────────────────
   Every major section (.content, .faq-section, .related-section)
   is its own independent block with:
     - same max-width family (content narrower, faq+related wider)
     - same vertical padding (creates the gap between blocks)
     - same h2 styling (24px, 800, -.5 letter-spacing)
     - h2 sits at the TOP of the block padding (no extra gap above)
   The .tool-zone band above + the consistent block-spacing below
   creates a clear "tool → content → faq → related" rhythm. */

/* Spacing tokens */
:root{
  --section-gap: 40px;       /* vertical padding for content blocks (Phase 3.19.5: was 56) */
  --section-h2-size: 24px;
  --section-h2-mb: 20px;     /* space below an h2 before its body text */
}

/* ── CONTENT (the SEO/educational reading column) ─────────────── */
.content,
.content-section{
  max-width:680px;
  margin:0 auto;
  padding:28px 24px var(--section-gap);
}
.content-block{padding-top:32px}
.content-block:first-child{padding-top:0}
/* Phase 3.19.6: removed the decorative blue line — h2 alone is
   sufficient as section opener; no extra visual marker needed. */
.content-block h2{
  font-family:var(--fd);
  font-size:var(--section-h2-size);
  font-weight:800;
  letter-spacing:-.5px;
  line-height:1.25;
  margin:0 0 var(--section-h2-mb);
  color:var(--text);
}
.content-block h3{font-family:var(--fd);font-size:16px;font-weight:700;margin:20px 0 9px;color:var(--text)}
.content-block p{font-size:15px;color:var(--text2);margin-bottom:14px;line-height:1.75}
.content-block ol,.content-block ul{color:var(--text2);padding-left:20px;margin-bottom:14px}
.content-block li{margin-bottom:7px;font-size:15px;line-height:1.65}
.content-block pre{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:16px;overflow-x:auto;font-size:13px;margin:16px 0}

/* ── STEPS — modern grid cards ──────────────────────────────────
   Phase 3.19.5: was a vertical stacked list with faint number text.
   Now a 3-column grid of cards: each card has a colored numeric
   badge in the corner, a bold title, and a short description.
   Cards stack to 1 column on mobile via the .content max-width
   constraint (since they sit inside the 680px reading column,
   they naturally wrap). */
.steps-list{
  list-style:none;
  padding:0;
  margin:24px 0 8px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.step-item{
  position:relative;
  display:block;
  padding:22px 18px 18px;
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:12px;
  transition:all .18s;
}
.step-item:hover{
  border-color:rgba(37,99,235,.35);
  box-shadow:0 6px 20px rgba(37,99,235,.08);
  transform:translateY(-2px);
}
.step-item + .step-item{border-top:1.5px solid var(--border)}  /* override the old vertical-list rule for back-compat */
.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue2) 100%);
  color:#fff;
  font-family:var(--fd);
  font-size:14px;
  font-weight:800;
  border-radius:50%;
  margin:0 0 12px;
  opacity:1;
  box-shadow:0 3px 8px rgba(37,99,235,.3);
}
.step-content{display:block}
.step-content h3{
  font-family:var(--fd);
  font-size:15px;
  font-weight:700;
  margin:0 0 6px;
  color:var(--text);
  line-height:1.35;
}
.step-content p{
  font-size:13.5px;
  color:var(--text2);
  line-height:1.65;
  margin:0;
}

/* Mobile: stack to single column */
@media(max-width:680px){
  .steps-list{grid-template-columns:1fr;gap:12px}
}

.data-table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.data-table th{padding:9px 13px;background:var(--bg3);font-weight:600;border-bottom:1px solid var(--border);color:var(--text2);text-align:left;font-size:12px;text-transform:uppercase}
.data-table td{padding:9px 13px;border-bottom:1px solid var(--border);color:var(--text2)}
.data-table tr:last-child td{border-bottom:none}

/* ── TIP BOX — professional callout ─────────────────────────────
   Phase 3.19.5: previously had no CSS at all (used browser defaults
   = looked like an unstyled paragraph). Now a proper callout card
   with a vertical accent bar on the left, light blue background,
   and a 💡 icon to signal "tip / note". Used across 33 tool pages. */
.tip-box{
  position:relative;
  background:linear-gradient(135deg,rgba(37,99,235,.04) 0%,rgba(37,99,235,.07) 100%);
  border:1px solid rgba(37,99,235,.15);
  border-left:3px solid var(--blue);
  border-radius:10px;
  padding:18px 20px 18px 52px;
  margin:24px 0;
  font-size:14px;
  line-height:1.7;
  color:var(--text2);
}
.tip-box::before{
  content:"";
  position:absolute;
  left:18px;
  top:18px;
  width:24px;
  height:24px;
  background:var(--blue);
  border-radius:50%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M12 2a7 7 0 0 0-4 12.7c.7.5 1 1.3 1 2.1V18h6v-1.2c0-.8.3-1.6 1-2.1A7 7 0 0 0 12 2z'/></svg>");
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px;
  box-shadow:0 2px 8px rgba(37,99,235,.25);
}
.tip-box p{margin:0;color:var(--text2)}
.tip-box p + p{margin-top:8px}
.tip-box strong{color:var(--text);font-weight:700}
.tip-box a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

/* ── FAQ — independent block ───────────────────────────────────
   Same vertical padding as .content for consistent block rhythm.
   Tinted background separates it visually from the content above
   without needing margins or borders. */
.faq-section{max-width:760px;margin:0 auto;padding:8px 24px 24px}
section.faq-section{max-width:none;padding-left:0;padding-right:0;background:transparent;border:none}
section.faq-section > h2,
section.faq-section > .faq-list,
section.faq-section > ul{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  padding-left:24px;
  padding-right:24px;
}
.faq-section h2{
  font-family:var(--fd);
  font-size:clamp(22px,3vw,28px);
  font-weight:800;
  letter-spacing:-.6px;
  line-height:1.25;
  margin:0 auto 16px;
  color:var(--text);
}

/* ── TOOL CONCLUSION — uses .content-block styles, no extra rules needed ─── */
/* The wrap-up paragraphs render with the same typography as the rest of */
/* the educational content. Links inside conclusion use blog-link style. */
.content-block a:not(.related-all a):not(.cta-btn){
  color:var(--blue);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(37,99,235,.25);
  transition:border-color .15s;
}
.content-block a:hover{border-bottom-color:var(--blue)}

/* ── RELATED TOOLS — independent block ───────────────────────── */
.related-section{max-width:860px;margin:0 auto;padding:24px 24px 16px}
.related-section h2{
  font-family:var(--fd);
  font-size:var(--section-h2-size);
  font-weight:800;
  letter-spacing:-.5px;
  line-height:1.25;
  margin:0 0 8px;
  color:var(--text);
}
.related-section>p{font-size:13px;color:var(--muted);margin:0 0 24px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:0}
.related-grid .rel-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:24px 18px;background:var(--bg);border:1.5px solid var(--border);border-radius:14px;text-decoration:none;color:var(--text);transition:all .22s;box-shadow:0 1px 3px rgba(37,99,235,.04)}
.related-grid .rel-card:hover{border-color:var(--blue);background:var(--blue-lt);transform:translateY(-3px);box-shadow:0 8px 20px rgba(37,99,235,.12)}
.rel-icon{width:44px;height:44px;border-radius:12px;background:var(--blue-lt);border:1px solid var(--blue-bd);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .22s;margin-bottom:4px}
.rel-icon svg{color:var(--blue);transition:color .22s;width:18px;height:18px}
.related-grid .rel-card:hover .rel-icon{background:var(--blue);border-color:var(--blue)}
.related-grid .rel-card:hover .rel-icon svg{color:#fff}
.rel-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px;line-height:1.3;transition:color .22s}
.rel-sub{font-size:12px;color:var(--muted);line-height:1.4}
.related-grid .rel-card:hover .rel-name{color:var(--blue)}

/* "Browse all 35+ tools" CTA — sits below the related grid as a tertiary action */
.related-all{
  margin:24px 0 0;
  padding-top:20px;
  border-top:1px solid var(--border);
  text-align:center;
  font-size:14px;
}
.related-all a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 22px;
  border-radius:100px;
  background:#fff;
  border:1.5px solid var(--border);
  color:var(--text);
  font-weight:600;
  text-decoration:none;
  transition:all .18s;
}
.related-all a:hover{
  border-color:var(--blue);
  color:var(--blue);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(37,99,235,.10);
}

/* ── STICKY DOWNLOAD BAR ───────────────────────────────────────── */
.sticky-dl-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:2px solid var(--border);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:200;transform:translateY(100%);transition:transform .3s;box-shadow:0 -4px 20px rgba(0,0,0,.08)}
.sticky-dl-bar.visible{transform:translateY(0)}
.sticky-dl-bar p{font-size:14px;margin:0;color:var(--text)}
.sticky-dl-btn{font-family:var(--fb);font-size:13px;font-weight:700;padding:10px 22px;border-radius:100px;background:var(--blue);color:#fff;border:none;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}

/* ── REVEAL ────────────────────────────────────────────────────── */
.reveal{opacity:1!important;transform:none!important}
.reveal.visible{opacity:1;transform:none}

/* ── NAV ───────────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:64px;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
/* .logo rules now centralized in main.css */
/* removed conflicting .logo span rule */
.nav-right{display:flex;align-items:center;gap:8px}
.nav-link{font-size:14px;font-weight:500;color:var(--text2);text-decoration:none;padding:6px 12px;border-radius:8px;transition:all .2s}
.nav-link:hover{color:var(--blue);background:var(--blue-lt)}
.nav-cta{font-size:13px;font-weight:600;padding:8px 20px;border-radius:100px;background:var(--blue);color:#fff;text-decoration:none;transition:all .2s;box-shadow:0 2px 8px rgba(37,99,235,.3)}
.nav-cta:hover{background:var(--blue2);transform:translateY(-1px)}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:11px 16px;font-size:14px;font-weight:500;color:var(--text2);text-decoration:none;border-radius:8px;transition:all .2s}
.mobile-menu a:hover{background:var(--blue-lt);color:var(--blue)}
.mobile-menu a.cta{background:var(--blue);color:#fff;text-align:center;margin-top:8px;border-radius:8px}
.mobile-menu a.cta:hover{background:var(--blue2);color:#fff}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── FOOTER ────────────────────────────────────────────────────── */
footer{width:100%;border-top:1px solid var(--border);background:#fff;margin-top:24px}
.footer-inner{max-width:1280px;margin:0 auto;padding:40px 48px 0;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.footer-brand{display:flex;flex-direction:column;gap:0}
.footer-brand p{font-size:13px;color:var(--muted);max-width:230px;line-height:1.65;margin-top:10px}
.footer-col{display:block}
.footer-col h4{font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text2);margin-bottom:14px}
.footer-col a{display:block;font-size:13px;color:var(--text2);text-decoration:none;margin-bottom:9px;transition:color .2s}
.footer-col a:hover{color:var(--blue)}
.footer-bottom{max-width:1280px;margin:0 auto;padding:18px 48px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}
.footer-links{display:flex;gap:18px}
.footer-links a{color:var(--muted);text-decoration:none;font-size:12px;transition:color .2s}
.footer-links a:hover{color:var(--blue)}

/* ── ANIMATIONS ────────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes dzFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
h2[id],h3[id]{scroll-margin-top:80px}

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media(max-width:1024px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:768px){
  nav{padding:0 20px;height:60px}
  .related-section{padding:40px 20px 20px}
  .tool-hero{padding:20px 20px 12px}
  .tool-zone{padding:32px 16px 20px}
  .tool-box,.tool-container{padding:16px;margin:0 auto;border-radius:14px;max-width:100%}
  .content,.content-section{padding:24px 20px;max-width:100%}
  .howto-wrap{padding:24px 20px 0}
  .breadcrumb{padding:12px 20px}
  .steps-grid{grid-template-columns:1fr}
  /* Phase 3.19.8: file-item on mobile — match desktop 3-column layout
     (thumb / info / button), but with smaller dimensions. The previous
     2-column layout broke because .file-thumb (72px) overflowed the
     56px column, and .file-btns had nowhere to land. */
  .file-item{
    grid-template-columns:56px 1fr auto;
    gap:10px;
    padding:10px;
  }
  .file-item .file-thumb{width:56px;height:56px;border-radius:6px}
  .file-item .file-name{font-size:12.5px}
  .file-item .file-meta{font-size:11px;gap:6px}
  .file-item .dl-btn{padding:6px 12px;font-size:11px}
  .file-item .dl-btn svg{width:14px;height:14px}
  .stats-3{grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .footer-inner{padding:32px 20px 0;grid-template-columns:1fr 1fr;gap:20px}
  .footer-bottom{padding:14px 20px;flex-direction:column;gap:8px;text-align:center}
  .dropzone{padding:36px 20px}
  .sticky-dl-bar{padding:12px 16px}
}
@media(max-width:560px){
  /* Phase 3.19.8: related cards stay 2-column on mobile (was 1).
     Smaller padding, smaller icon, smaller text. */
  .related-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .rel-card{padding:14px 10px}
  .rel-icon{width:32px;height:32px;margin-bottom:8px}
  .rel-icon svg{width:14px;height:14px}
  .rel-name{font-size:12.5px}
  .rel-sub{font-size:11px;line-height:1.35}
  .stats-3{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
}
@media(max-width:480px){
  .steps-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════
   UX PHASE — Missing classes + UX improvements
   ═══════════════════════════════════════════════════════════════ */

/* ── FILE ITEM INTERNALS (were missing) ────────────────────────── */
.prog-wrap{height:3px;background:var(--bg3);border-radius:2px;margin-top:8px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--blue3));border-radius:2px;transition:width .4s ease;width:0}
.size-new{font-weight:600;color:var(--text)}
.saving-badge{font-size:11px;font-weight:700;padding:2px 7px;border-radius:100px;background:rgba(16,185,129,.12);color:var(--green)}
.file-btns{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}

/* ── RESULT AREA — appears in place ───────────────────────────── */
.result-area{
  margin-top:16px;
  border:2px solid var(--green);
  border-radius:16px;
  padding:20px;
  background:rgba(16,185,129,.03);
  animation:resultAppear .3s ease;
}
@keyframes resultAppear{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── AI PROGRESS ───────────────────────────────────────────────── */
.ai-progress-wrap{
  margin-top:16px;
  padding:20px;
  background:var(--bg2);
  border:1.5px solid var(--border);
  border-radius:12px;
  text-align:center;
}
.ai-progress-bar{
  height:6px;
  background:var(--bg3);
  border-radius:3px;
  margin:12px 0 8px;
  overflow:hidden;
}
.ai-progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--blue),var(--purple));
  border-radius:3px;
  transition:width .5s ease;
  width:0;
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer{
  0%{filter:brightness(1)}
  50%{filter:brightness(1.3)}
  100%{filter:brightness(1)}
}
.ai-progress-label{font-size:13px;color:var(--text2);font-weight:500}

/* ── BEFORE/AFTER INLINE ───────────────────────────────────────── */
.ba-inline{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
  border-radius:12px;
  overflow:hidden;
}
.ba-panel{position:relative;border-radius:10px;overflow:hidden}
.ba-panel img{width:100%;display:block;border-radius:10px}
.ba-label{
  position:absolute;top:8px;left:8px;
  background:rgba(0,0,0,.6);color:#fff;
  font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:4px;
  letter-spacing:.5px;pointer-events:none
}
.ba-size{
  position:absolute;bottom:8px;right:8px;
  background:rgba(0,0,0,.6);color:#fff;
  font-size:11px;font-weight:600;
  padding:2px 7px;border-radius:4px;
}
@media(max-width:480px){
  .ba-inline{grid-template-columns:1fr}
}

/* ── DOWNLOAD RESULT CTA ───────────────────────────────────────── */
.dl-result-cta{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  margin-top:14px;
  padding:14px 16px;
  background:var(--blue-lt);
  border:1.5px solid var(--blue-bd);
  border-radius:12px;
}
.dl-result-info{font-size:13px;color:var(--text2)}
.dl-result-info strong{color:var(--green);font-size:16px}
.dl-result-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 22px;background:var(--blue);color:#fff;
  border:none;border-radius:100px;font-size:14px;
  font-weight:700;cursor:pointer;font-family:inherit;
  transition:all .2s;white-space:nowrap;text-decoration:none;
}
.dl-result-btn:hover{background:var(--blue2);transform:translateY(-1px)}

/* ── PROCESS BTN STATES ────────────────────────────────────────── */
#process-btn.processing{
  background:var(--blue)!important;
  pointer-events:none;
  position:relative;
  overflow:hidden;
}
#process-btn.processing::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.25) 50%,transparent 100%);
  animation:btnShimmer 1.2s infinite;
}
@keyframes btnShimmer{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}
#process-btn.done{background:var(--green)!important}

/* ── DROPZONE AFTER UPLOAD ─────────────────────────────────────── */
.dropzone.has-files{
  border-style:solid;
  border-color:var(--blue);
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.dropzone.has-files .dz-main-content{display:none}
.dz-add-more{
  font-size:13px;color:var(--text2);
  display:flex;align-items:center;gap:8px;
}
.dz-add-more-btn{
  font-size:12px;font-weight:600;padding:6px 14px;
  border-radius:100px;border:1.5px solid var(--border);
  background:var(--bg);color:var(--text2);cursor:pointer;
  font-family:inherit;transition:all .2s;
}
.dz-add-more-btn:hover{border-color:var(--blue);color:var(--blue)}

/* ── TOOL HINT ─────────────────────────────────────────────────── */
.tool-hint{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:var(--blue-lt);
  border:1.5px solid var(--blue-bd);
  border-radius:10px;
  margin-top:10px;
  font-size:13px;color:var(--text2);
  animation:fadeHint .4s ease;
}
@keyframes fadeHint{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.tool-hint-icon{font-size:16px;flex-shrink:0}

/* ── FAVICON SPECIFIC ──────────────────────────────────────────── */
.fav-result-wrap{
  margin-top:16px;
  border:1.5px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.fav-result-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
}
.fav-result-title{font-size:15px;font-weight:700;color:var(--text)}
.fav-dl-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 20px;background:var(--blue);color:#fff;
  border:none;border-radius:100px;font-size:13px;
  font-weight:700;cursor:pointer;font-family:inherit;
  transition:all .2s;
}
.fav-dl-btn:hover{background:var(--blue2)}
.fav-sizes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(70px,1fr));
  gap:10px;
  padding:16px;
}
.fav-size-item{text-align:center;cursor:pointer}
.fav-size-item img{
  display:block;margin:0 auto 4px;
  border-radius:8px;border:1.5px solid var(--border);
  transition:border-color .2s;
}
.fav-size-item:hover img{border-color:var(--blue)}
.fav-size-label{font-size:10px;color:var(--muted);font-weight:500}
.fav-html-wrap{
  padding:14px 18px;
  border-top:1px solid var(--border);
  background:var(--bg3);
}
.fav-html-title{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.fav-html-code{
  font-size:11px;color:var(--text2);
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:8px;padding:10px 12px;
  overflow-x:auto;line-height:1.8;
  font-family:'SFMono-Regular','Consolas',monospace;
}
.fav-copy-btn{
  margin-top:8px;font-size:12px;padding:5px 14px;
  border-radius:100px;border:1.5px solid var(--border);
  background:var(--bg);color:var(--text2);cursor:pointer;
  font-family:inherit;transition:all .2s;
}
.fav-copy-btn:hover{border-color:var(--blue);color:var(--blue)}

/* ── QR MOBILE FIX ─────────────────────────────────────────────── */
#qr-builder .qr-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
@media(max-width:640px){
  #qr-builder .qr-grid{grid-template-columns:1fr}
  #qr-canvas{max-width:100%!important}
}

/* ── SCROLL TO RESULT ──────────────────────────────────────────── */
.scroll-anchor{scroll-margin-top:80px}

/* ── MOBILE: ctrl-bar wrapping ─────────────────────────────────── */
@media(max-width:640px){
  .ctrl-bar,.controls-bar{gap:10px;padding:12px 14px}
  .ctrl-group{min-width:140px;flex:1 1 auto}
  .action-btn{width:100%;justify-content:center}
  #process-btn{width:100%}
}

/* ── PHOTO EDITOR MOBILE ───────────────────────────────────────── */
@media(max-width:640px){
  .pe-main{flex-direction:column!important}
  .pe-panels{width:100%!important;margin-left:0!important;margin-top:12px!important}
  #pe-canvas{max-height:55vw!important}
  .pe-topbar{gap:6px!important;flex-wrap:wrap!important}
  .pe-topbar-actions{flex-wrap:wrap!important}
}

/* ── FILE COUNT BADGE ──────────────────────────────────────────── */
.dz-file-count{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--blue);
  background:var(--blue-lt);padding:4px 12px;border-radius:100px;
  border:1px solid var(--blue-bd);
}

/* ── SUCCESS STATE ─────────────────────────────────────────────── */
.stat-n.success{color:var(--green)!important;animation:countUp .5s ease}
@keyframes countUp{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}

/* ═══════════════════════════════════════════════════════════════
   ABOVE THE FOLD FIX — Hero compact + dropzone always visible
   Higher-specificity selectors used to win the cascade — no !important.
   ═══════════════════════════════════════════════════════════════ */

/* Compact hero */
section.tool-hero, .tool-hero {
  padding: 16px 48px 12px;
}
.tool-hero h1 {
  font-size: clamp(22px, 3.5vw, 38px);
  margin-bottom: 7px;
  letter-spacing: -1.5px;
}
.tool-hero p {
  font-size: 14px;
  margin-bottom: 10px;
}
.tool-hero .tool-badge {
  margin-bottom: 10px;
  font-size: 10px;
  padding: 4px 12px;
}
.tool-hero .trust-row {
  gap: 6px;
  margin-top: 6px;
}
.tool-hero .trust-pill {
  font-size: 11px;
  padding: 4px 10px;
}

/* Mobile: hide breadcrumb + trust pills to save vertical space */
@media(max-width: 768px) {
  .breadcrumb { display: none; }
  .tool-hero .trust-row { display: none; }
  section.tool-hero, .tool-hero {
    padding: 12px 16px 8px;
  }
  .tool-hero h1 {
    font-size: clamp(22px, 6.5vw, 32px);
    letter-spacing: -.8px;
    line-height: 1.15;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .tool-hero p {
    display: block;
    font-size: 14px;
    margin-bottom: 0;
    line-height: 1.55;
    padding: 0 8px;
  }
  .tool-hero .tool-badge { display: none; }
  .tool-box, .tool-container { padding: 14px; }

  .data-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 12.5px;
    -webkit-overflow-scrolling: touch;
  }
  .data-table th, .data-table td { padding: 8px 10px; }

  .trust-strip {
    margin-top: 14px;
    gap: 4px 12px;
    font-size: 11px;
  }
  .trust-strip svg { width: 12px; height: 12px; }
}

/* Dropzone: tighter padding to fit above fold */
.tool-container .dropzone, .dropzone {
  padding: 32px 24px;
}
@media(max-width: 768px) {
  .tool-container .dropzone, .dropzone { padding: 24px 16px; }
  .dropzone .dz-icon { width: 42px; height: 42px; margin-bottom: 10px; }
  .dropzone .dz-title { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════
   UPLOAD PREVIEW + BEFORE/AFTER COMPARE — Phase 1
   ═══════════════════════════════════════════════════════ */

#upload-preview-wrap {
  animation: fadeInUp .25s ease;
}

#upload-preview-wrap img {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  background: var(--bg3);
}

/* Before/After compare wrapper */
[id$="-ba-wrap"] {
  animation: fadeInUp .3s ease;
}

[id$="-ba-wrap"] [id$="-container"] {
  position: relative;
  cursor: col-resize;
  overflow: hidden;
  line-height: 0;
}

[id$="-ba-wrap"] [id$="-container"] img {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  background: var(--bg3);
}

/* Resize original dims badge */
#resize-orig-dims {
  animation: fadeInUp .2s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Large file warning */
#large-file-warn {
  animation: fadeInUp .2s ease;
}

/* ═══════════════════════════════════════════════════════
   TOOL HERO v2 — TIGHT spacing (raise tool zone up)
   ═══════════════════════════════════════════════════════ */
.tool-hero{
  padding:32px 24px 12px;
  max-width:860px;
  margin:0 auto;
  text-align:center;
}
.tool-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  font-weight:800;
  color:var(--blue);
  background:var(--blue-lt);
  border:1px solid rgba(37,99,235,.15);
  padding:5px 13px;
  border-radius:100px;
  margin-bottom:10px;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.tool-hero h1{
  font-family:var(--fd);
  font-size:clamp(26px,4vw,42px);
  font-weight:800;
  letter-spacing:-1.5px;
  line-height:1.1;
  margin:0 0 10px;
  color:var(--text);
}
.tool-hero p{
  font-size:clamp(14.5px,1.8vw,16px);
  color:var(--text2);
  max-width:640px;
  margin:0 auto 12px;
  line-height:1.55;
}
.tool-hero p a{color:var(--blue);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(37,99,235,.25);transition:border-color .15s}
.tool-hero p a:hover{border-bottom-color:var(--blue)}

/* Tool zone — connected, no visual fragmentation */
.tool-zone{
  background:transparent;
  padding:8px 24px 24px;
  margin-top:0;
  border:none;
}

/* Content section header improvement */
.content{padding:32px 24px 16px;
  max-width:760px;
  margin:0 auto;
}
.content-block{margin-bottom:24px}
.content-block:last-child{margin-bottom:0}
.content-block h2{
  font-family:var(--fd);
  font-size:clamp(22px,3vw,28px);
  font-weight:800;
  letter-spacing:-.6px;
  margin:0 0 14px;
  color:var(--text);
}
.content-block p{
  font-size:15.5px;
  line-height:1.75;
  color:var(--text2);
  margin:0 0 12px;
}

@media(max-width:768px){
  .tool-hero{padding:24px 16px 8px}
  .tool-zone{padding:16px 16px 28px;margin-top:4px}
  .content{padding:36px 16px}
}