/* ============================================================
   tools.css — InstantToolsPro Global Tool Components
   Version: 2.0
   Usage: Include in every PDF/Image/Utility tool page.
   All classes prefixed with  itp-  (no collision with page CSS).

   TABLE OF CONTENTS
   ──────────────────
   1.  CSS Custom Properties (Design Tokens)
   2.  Breadcrumb
   3.  Hero — Title, Subtitle, Trust Pills
   4.  Step Flow Indicator
   5.  Dropzone (Upload Zone)
   6.  Alert / Error Box
   7.  Processing State (Spinner + Progress Bar)
   8.  Success State Banner
   9.  Stat Cards (3-col result grid)
   10. Action Buttons
       10a. Primary Red (Convert/Remove)
       10b. Primary Blue (Download PDF)
       10c. Outline Red (Do Another)
       10d. Outline Grey (Secondary)
   11. Security Note Strip
   12. Section Title
   13. How-It-Works Steps
   14. Related Tools Grid
   15. FAQ Accordion
   16. Scroll Reveal
   17. Shimmer / Spin Animations
   18. Responsive Utilities
============================================================ */


/* ══════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES — Design Tokens
══════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --itp-accent        : #dc2626;
  --itp-accent-dark   : #b91c1c;
  --itp-accent-light  : #fef2f2;
  --itp-accent-border : #fecaca;

  /* Blue (download buttons) */
  --itp-blue          : #1d4ed8;
  --itp-blue-dark     : #1e40af;
  --itp-blue-light    : #eff6ff;
  --itp-blue-border   : #bfdbfe;

  /* Green (success) */
  --itp-green         : #16a34a;
  --itp-green-dark    : #15803d;
  --itp-green-light   : #f0fdf4;
  --itp-green-border  : #bbf7d0;

  /* Neutrals */
  --itp-text          : #111827;
  --itp-muted         : #6b7280;
  --itp-border        : #e5e7eb;
  --itp-bg            : #f9fafb;
  --itp-white         : #ffffff;

  /* Radii */
  --itp-r-sm          : 8px;
  --itp-r-md          : 12px;
  --itp-r-lg          : 14px;
  --itp-r-xl          : 20px;
  --itp-r-full        : 999px;

  /* Shadows */
  --itp-shadow-sm     : 0 1px 4px rgba(0,0,0,.06);
  --itp-shadow-md     : 0 4px 16px rgba(0,0,0,.08);
  --itp-shadow-accent : 0 6px 20px rgba(220,38,38,.32);
  --itp-shadow-blue   : 0 6px 20px rgba(29,78,216,.32);
}


/* ══════════════════════════════════════════════════════════
   2. BREADCRUMB
══════════════════════════════════════════════════════════ */
.itp-bc {
  background: var(--itp-white);
  border-bottom: 1px solid var(--itp-border);
  padding: 10px 0;
  margin-bottom: 0;
}
.itp-bc-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .79rem;
  color: var(--itp-muted);
  flex-wrap: wrap;
}
.itp-bc-inner a {
  color: var(--itp-muted);
  text-decoration: none;
  transition: color .15s;
}
.itp-bc-inner a:hover { color: var(--itp-accent); }
.itp-bc-sep { color: #9ca3af; display: flex; align-items: center; }
.itp-bc-active { color: var(--itp-accent); font-weight: 600; }


/* ══════════════════════════════════════════════════════════
   3. HERO — Title · Subtitle · Trust Pills
══════════════════════════════════════════════════════════ */
.itp-hero {
  text-align: center;
  padding: 28px 0 4px;
}
.itp-hero-title {
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  font-weight: 800;
  line-height: 1.18;
  color: var(--itp-text);
  letter-spacing: -.03em;
  margin: 0 0 10px;
}
.itp-hero-title .itp-accent { color: var(--itp-accent); }
.itp-hero-sub {
  font-size: .9rem;
  color: var(--itp-muted);
  margin: 0 auto;
  max-width: 480px;
  line-height: 1.6;
}

/* Trust Pills */
.itp-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.itp-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--itp-muted);
  background: var(--itp-bg);
  border: 1px solid var(--itp-border);
  border-radius: var(--itp-r-full);
  padding: 5px 11px;
  white-space: nowrap;
}
.itp-trust-pill svg { flex-shrink: 0; }
.itp-trust-pill.green { color: var(--itp-green-dark); background: var(--itp-green-light); border-color: var(--itp-green-border); }
.itp-trust-pill.blue  { color: var(--itp-blue);       background: var(--itp-blue-light);  border-color: var(--itp-blue-border); }
.itp-trust-pill.red   { color: var(--itp-accent);     background: var(--itp-accent-light); border-color: var(--itp-accent-border); }


/* ══════════════════════════════════════════════════════════
   4. STEP FLOW INDICATOR
   Usage: <div class="itp-flow"> ... </div>
   Each step: <div class="itp-flow-step [active|done]">
     <div class="itp-flow-num"><svg/></div>
     <span class="itp-flow-label">Label</span>
   </div>
   Between steps: <div class="itp-flow-line"></div>
══════════════════════════════════════════════════════════ */
.itp-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 20px 0 16px;
  overflow: visible;
  width: 100%;
}
.itp-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  width: 72px;
  position: relative;
  opacity: .4;
  transition: opacity .25s;
  flex-shrink: 1;
}
.itp-flow-step.active { opacity: 1; }
.itp-flow-step.done   { opacity: .75; }
.itp-flow-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--itp-border);
  color: var(--itp-muted);
  font-size: .75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, color .25s, box-shadow .25s;
  position: relative;
  z-index: 1;
}
.itp-flow-step.active .itp-flow-num {
  background: var(--itp-accent);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(220,38,38,.15);
}
.itp-flow-step.done .itp-flow-num {
  background: var(--itp-green);
  color: #fff;
}
.itp-flow-label {
  font-size: .65rem;
  font-weight: 600;
  color: var(--itp-muted);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
.itp-flow-step.active .itp-flow-label { color: var(--itp-accent); }
.itp-flow-step.done   .itp-flow-label { color: var(--itp-green); }
.itp-flow-line {
  height: 2px;
  background: var(--itp-border);
  margin-bottom: 18px;
  flex-shrink: 1;
  min-width: 12px;
  width: 40px;
}
/* Mobile scaling */
@media (max-width: 400px) {
  .itp-flow { transform: scale(.78); transform-origin: center top; height: 56px; margin-bottom: 0; }
}
@media (min-width: 401px) and (max-width: 520px) {
  .itp-flow { transform: scale(.88); transform-origin: center top; height: 62px; }
}


/* ══════════════════════════════════════════════════════════
   5. DROPZONE (Upload Zone)
   Usage:
   <div class="itp-dropzone" id="..." role="button" tabindex="0">
     <input type="file" ...>
     <div class="itp-dz-icon-wrap">...</div>
     <div class="itp-dz-title">Drop your file here</div>
     <p class="itp-dz-sub">...</p>
     <span class="itp-dz-btn" role="button" aria-hidden="true">Select File</span>
     <p class="itp-dz-hint">...</p>
   </div>
══════════════════════════════════════════════════════════ */
.itp-dropzone {
  position: relative;
  border: 2.5px dashed #e5e7eb;
  border-radius: var(--itp-r-xl);
  background: var(--itp-white);
  padding: 36px 20px 28px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
  overflow: hidden;
  background-image: radial-gradient(ellipse at 50% 0%, rgba(220,38,38,.04) 0%, transparent 70%);
}
.itp-dropzone input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
  z-index: 10;
}
.itp-dropzone:hover,
.itp-dropzone.itp-drag-over {
  border-color: var(--itp-accent);
  background-color: #fff5f5;
  box-shadow: 0 0 0 4px rgba(220,38,38,.08);
}

/* Icon Wrapper */
.itp-dz-icon-wrap {
  width: 72px; height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  border: 1.5px solid var(--itp-accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.itp-dropzone:hover .itp-dz-icon-wrap { transform: translateY(-3px) scale(1.05); }

/* Title */
.itp-dz-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--itp-text);
  margin-bottom: 5px;
  line-height: 1.3;
  transition: color .2s;
}
.itp-dropzone:hover .itp-dz-title { color: var(--itp-accent); }

/* Subtitle */
.itp-dz-sub {
  font-size: .8rem;
  color: var(--itp-muted);
  margin-bottom: 20px;
}

/* CTA button inside dropzone */
.itp-dz-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  background: var(--itp-accent);
  color: #fff;
  border-radius: 11px;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: -.01em;
  pointer-events: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(220,38,38,.30);
  transition: transform .2s, box-shadow .2s;
}
.itp-dz-btn::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: itp-shimmer 2.6s ease-in-out infinite;
}
.itp-dropzone:hover .itp-dz-btn {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(220,38,38,.35);
}

/* Hint text below button */
.itp-dz-hint {
  font-size: .7rem;
  color: #9ca3af;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}


/* ══════════════════════════════════════════════════════════
   6. ALERT / ERROR BOX
   Usage: <div class="itp-alert itp-alert-error [show]" role="alert">
            <svg/> <span>message</span>
          </div>
══════════════════════════════════════════════════════════ */
.itp-alert {
  display: none;
  align-items: flex-start;
  gap: 8px;
  font-size: .8rem;
  font-weight: 600;
  border-radius: var(--itp-r-md);
  padding: 12px 16px;
  margin-bottom: 18px;
  line-height: 1.5;
}
.itp-alert.show { display: flex; }
.itp-alert svg  { flex-shrink: 0; margin-top: 1px; }

.itp-alert-error {
  color: var(--itp-accent);
  background: var(--itp-accent-light);
  border: 1px solid var(--itp-accent-border);
}
.itp-alert-success {
  color: var(--itp-green-dark);
  background: var(--itp-green-light);
  border: 1px solid var(--itp-green-border);
}
.itp-alert-info {
  color: var(--itp-blue);
  background: var(--itp-blue-light);
  border: 1px solid var(--itp-blue-border);
}


/* ══════════════════════════════════════════════════════════
   7. PROCESSING STATE
   Usage:
   <div class="itp-processing [itp-show]" aria-live="polite">
     <div class="itp-spinner"></div>
     <div class="itp-proc-label" id="...">Loading…</div>
     <div class="itp-proc-sub"   id="...">Please wait…</div>
     <div class="itp-prog-track"><div class="itp-prog-fill" id="..."></div></div>
     <div class="itp-prog-pct"   id="...">0%</div>
   </div>
══════════════════════════════════════════════════════════ */
.itp-processing {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 52px 0 16px;
  text-align: center;
}
.itp-processing.itp-show { display: flex; }

.itp-spinner {
  width: 54px; height: 54px;
  border: 3.5px solid var(--itp-accent-border);
  border-top-color: var(--itp-accent);
  border-radius: 50%;
  animation: itp-spin .7s linear infinite;
}
@keyframes itp-spin { to { transform: rotate(360deg); } }

.itp-proc-label {
  font-size: .95rem;
  font-weight: 700;
  color: var(--itp-text);
}
.itp-proc-sub {
  font-size: .8rem;
  color: var(--itp-muted);
  margin-top: -8px;
}
.itp-prog-track {
  width: 100%; max-width: 420px;
  height: 7px;
  background: var(--itp-border);
  border-radius: var(--itp-r-full);
  overflow: hidden;
}
.itp-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--itp-accent), #f87171);
  border-radius: var(--itp-r-full);
  width: 0;
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
.itp-prog-pct {
  font-size: .75rem;
  font-weight: 700;
  color: var(--itp-accent);
}


/* ══════════════════════════════════════════════════════════
   8. SUCCESS STATE BANNER
   Usage:
   <div class="itp-suc-banner">
     <div class="itp-suc-circle"><svg checkmark/></div>
     <div>
       <div class="itp-suc-title">Done!</div>
       <div class="itp-suc-sub" id="...">Details here</div>
     </div>
   </div>
══════════════════════════════════════════════════════════ */
.itp-suc-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--itp-green-light);
  border: 1.5px solid var(--itp-green-border);
  border-radius: var(--itp-r-lg);
  padding: 18px 22px;
}
.itp-suc-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--itp-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.itp-suc-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--itp-green-dark);
}
.itp-suc-sub {
  font-size: .79rem;
  color: var(--itp-muted);
  margin-top: 3px;
}


/* ══════════════════════════════════════════════════════════
   9. STAT CARDS (3-column result grid)
   Usage:
   <div class="itp-stats">
     <div class="itp-stat">
       <div class="itp-stat-val" id="...">—</div>
       <div class="itp-stat-key">Label</div>
     </div>
     ...
   </div>
══════════════════════════════════════════════════════════ */
.itp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.itp-stat {
  background: var(--itp-bg);
  border: 1px solid var(--itp-border);
  border-radius: var(--itp-r-md);
  padding: 14px 10px;
  text-align: center;
}
.itp-stat-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--itp-green);
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 5px;
}
.itp-stat-val.red  { color: var(--itp-accent); }
.itp-stat-val.blue { color: var(--itp-blue); }
.itp-stat-key {
  font-size: .68rem;
  font-weight: 500;
  color: var(--itp-muted);
}
@media (max-width: 400px) {
  .itp-stats { grid-template-columns: repeat(3, 1fr); }
  .itp-stat-val { font-size: 1rem; }
}

/* Size comparison bar (compress-style) */
.itp-size-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.itp-size-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--itp-muted);
}
.itp-size-bar-track {
  width: 100%;
  height: 10px;
  background: #fecaca;
  border-radius: var(--itp-r-full);
  overflow: hidden;
}
.itp-size-bar-fill {
  height: 100%;
  background: var(--itp-green);
  border-radius: var(--itp-r-full);
  transition: width .6s cubic-bezier(.4,0,.2,1);
}


/* ══════════════════════════════════════════════════════════
   10. ACTION BUTTONS
══════════════════════════════════════════════════════════ */

/* Wrapper */
.itp-suc-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.itp-suc-actions > * { flex: 1; min-width: 140px; }

/* ── 10a. Primary Red — Convert / Remove (full-width, shimmer) ── */
.itp-btn-red {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 17px 24px;
  background: var(--itp-accent);
  color: #fff;
  border: none;
  border-radius: var(--itp-r-lg);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: var(--itp-shadow-accent);
  position: relative;
  overflow: hidden;
  transition: background .18s, transform .15s, box-shadow .18s, opacity .15s;
  text-decoration: none;
}
.itp-btn-red::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: itp-shimmer 2.8s ease-in-out infinite;
}
.itp-btn-red:hover:not(:disabled) {
  background: var(--itp-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(220,38,38,.4);
}
.itp-btn-red:active:not(:disabled) { transform: translateY(0); }
.itp-btn-red:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── 10b. Primary Blue — Download PDF ── */
.itp-btn-blue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  background: var(--itp-blue);
  color: #fff;
  border: none;
  border-radius: var(--itp-r-lg);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: var(--itp-shadow-blue);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: background .18s, transform .15s, box-shadow .18s;
}
.itp-btn-blue::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  animation: itp-shimmer 2.8s ease-in-out infinite;
}
.itp-btn-blue:hover {
  background: var(--itp-blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(29,78,216,.42);
}
.itp-btn-blue:active { transform: translateY(0); }

/* Downloading state */
.itp-btn-blue.downloading {
  opacity: .75;
  pointer-events: none;
}

/* ── 10c. Outline Red — "Do Another" / secondary CTA ── */
.itp-btn-outline-red {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background: var(--itp-white);
  color: var(--itp-accent);
  border: 2px solid var(--itp-accent);
  border-radius: var(--itp-r-lg);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, transform .15s;
}
.itp-btn-outline-red:hover {
  background: var(--itp-accent-light);
  transform: translateY(-2px);
}
.itp-btn-outline-red:active { transform: translateY(0); }

/* ── 10d. Outline Grey — soft secondary ── */
.itp-btn-outline-grey {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background: var(--itp-white);
  color: var(--itp-muted);
  border: 1.5px solid var(--itp-border);
  border-radius: var(--itp-r-lg);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .18s, color .18s, transform .15s;
}
.itp-btn-outline-grey:hover {
  border-color: var(--itp-accent);
  color: var(--itp-accent);
  transform: translateY(-2px);
}

/* Spinning download icon */
@keyframes itp-dl-rotate { to { transform: rotate(360deg); } }
.itp-dl-spin {
  display: inline-block;
  animation: itp-dl-rotate .75s linear infinite;
  vertical-align: middle;
  margin-top: -2px;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════
   11. SECURITY NOTE STRIP
   Usage: <div class="itp-sec-note"><svg/>Text</div>
══════════════════════════════════════════════════════════ */
.itp-sec-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  color: var(--itp-muted);
  background: var(--itp-green-light);
  border: 1px solid var(--itp-green-border);
  border-radius: var(--itp-r-sm);
  padding: 10px 14px;
  margin-top: 16px;
}
.itp-sec-note svg { flex-shrink: 0; color: var(--itp-green); }


/* ══════════════════════════════════════════════════════════
   12. SECTION TITLE
══════════════════════════════════════════════════════════ */
.itp-section-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 20px;
  color: var(--itp-text);
  text-align: center;
}


/* ══════════════════════════════════════════════════════════
   13. HOW-IT-WORKS STEPS
   Usage:
   <section class="itp-how">
     <div class="itp-how-inner">
       <h2 class="itp-section-title">How It Works</h2>
       <div class="itp-steps">
         <div class="itp-step">
           <div class="itp-step-num">1</div>
           <h3>Title</h3>
           <p>Description</p>
         </div>
       </div>
     </div>
   </section>
══════════════════════════════════════════════════════════ */
.itp-how { padding: 56px 16px 64px; }
.itp-how-inner { max-width: 860px; margin: 0 auto; }
.itp-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.itp-step {
  background: var(--itp-white);
  border: 1px solid var(--itp-border);
  border-radius: var(--itp-r-lg);
  padding: 22px 18px;
  text-align: center;
  box-shadow: var(--itp-shadow-sm);
}
.itp-step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--itp-accent-light);
  border: 2px solid var(--itp-accent-border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 13px;
  font-size: .84rem;
  font-weight: 800;
  color: var(--itp-accent);
}
.itp-step h3 { font-size: .86rem; font-weight: 700; color: var(--itp-text); margin-bottom: 5px; }
.itp-step p  { font-size: .76rem; color: var(--itp-muted); line-height: 1.55; }
@media (max-width: 768px) { .itp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .itp-steps { grid-template-columns: 1fr; } }


/* ══════════════════════════════════════════════════════════
   14. RELATED TOOLS GRID
   Usage:
   <section class="itp-related">
     <div class="itp-related-head">
       <h2 class="itp-section-title">More Tools</h2>
       <a href="/pdf-tools/" class="itp-view-all">View All →</a>
     </div>
     <div class="itp-related-grid">
       <a href="..." class="itp-rel-card">
         <div class="itp-rel-icon"><svg/></div>
         <div><h3>Title</h3><p>Desc</p></div>
         <span class="itp-rel-cta">CTA <svg arrow/></span>
       </a>
     </div>
   </section>
══════════════════════════════════════════════════════════ */
.itp-related {
  background: var(--itp-white);
  border-top: 1px solid var(--itp-border);
  border-bottom: 1px solid var(--itp-border);
  padding: 52px 16px;
}
.itp-related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.itp-view-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--itp-blue);
  padding: 6px 14px;
  border-radius: var(--itp-r-sm);
  text-decoration: none;
  transition: background .2s;
}
.itp-view-all:hover { background: var(--itp-blue-light); }
.itp-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
}
.itp-rel-card {
  background: var(--itp-bg);
  border: 1px solid var(--itp-border);
  border-radius: var(--itp-r-md);
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--itp-shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.itp-rel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,.13);
  border-color: transparent;
}
.itp-rel-icon {
  width: 40px; height: 40px;
  border-radius: var(--itp-r-sm);
  background: var(--itp-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.itp-rel-card h3  { font-size: .88rem; font-weight: 600; color: var(--itp-text); margin: 0; }
.itp-rel-card p   { font-size: .76rem; color: var(--itp-muted); line-height: 1.4; flex: 1; margin: 0; }
.itp-rel-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--itp-blue);
}
.itp-rel-cta svg { transition: transform .2s; }
.itp-rel-card:hover .itp-rel-cta svg { transform: translateX(3px); }
@media (max-width: 640px) { .itp-related-grid { grid-template-columns: repeat(2, 1fr); } }


/* ══════════════════════════════════════════════════════════
   15. FAQ ACCORDION
   Usage:
   <div class="itp-faq-item">
     <button class="itp-faq-q" type="button">
       Question
       <span class="itp-faq-icon" aria-hidden="true"><svg plus/></span>
     </button>
     <div class="itp-faq-a">Answer text here.</div>
   </div>
   JS: toggle class  itp-open  on .itp-faq-item
══════════════════════════════════════════════════════════ */
.itp-faq-item {
  border: 1px solid var(--itp-border);
  border-radius: var(--itp-r-md);
  overflow: hidden;
  margin-bottom: 10px;
}
.itp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 18px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--itp-text);
  background: var(--itp-white);
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 10px;
  transition: background .2s;
}
.itp-faq-q:hover { background: var(--itp-bg); }
.itp-faq-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--itp-bg);
  border: 1.5px solid var(--itp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--itp-muted);
  transition: background .2s, transform .3s;
}
.itp-faq-item.itp-open .itp-faq-icon {
  background: var(--itp-accent);
  border-color: var(--itp-accent);
  color: #fff;
  transform: rotate(45deg);
}
.itp-faq-a {
  display: none;
  padding: 0 18px 16px;
  font-size: .84rem;
  color: var(--itp-muted);
  line-height: 1.7;
  border-top: 1px solid var(--itp-border);
}
.itp-faq-item.itp-open .itp-faq-a { display: block; padding-top: 14px; }


/* ══════════════════════════════════════════════════════════
   16. SCROLL REVEAL
   Elements with class  itp-reveal  fade-slide in on scroll.
   JS adds class  itp-visible  via IntersectionObserver.
══════════════════════════════════════════════════════════ */
.itp-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.itp-reveal.itp-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ══════════════════════════════════════════════════════════
   17. ANIMATIONS
══════════════════════════════════════════════════════════ */
@keyframes itp-shimmer {
  0%   { left: -100%; }
  60%  { left: 160%;  }
  100% { left: 160%;  }
}
@keyframes itp-fadein {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.itp-fadein  { animation: itp-fadein .4s ease both; }
.itp-fadein2 { animation: itp-fadein .4s .08s ease both; }
.itp-fadein3 { animation: itp-fadein .4s .16s ease both; }


/* ══════════════════════════════════════════════════════════
   18. RESPONSIVE UTILITIES
══════════════════════════════════════════════════════════ */

/* Wrapper & centre */
.itp-tool-wrap   { padding: 0 16px 100px; }
.itp-tool-center { max-width: 860px; margin: 0 auto; }
@media (min-width: 641px) {
  .itp-tool-wrap  { padding: 0 20px 80px; }
}

/* Mobile flex order helpers (hero moves below upload on small screens) */
@media (max-width: 640px) {
  .itp-tool-center { display: flex; flex-direction: column; }
  .itp-hero        { order: 10; padding: 22px 0 6px; }
  .itp-flow        { order: 1;  margin: 14px 0 12px; }
  .itp-suc-actions { flex-direction: column; }
  .itp-stats       { grid-template-columns: repeat(3, 1fr); }
  .itp-steps       { grid-template-columns: repeat(2, 1fr); }
}

/* Sticky remove/convert button on mobile */
.itp-sticky-btn-wrap {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--itp-white) 80%, transparent);
  padding: 14px 0 16px;
  margin-top: 4px;
  z-index: 10;
}
@media (min-width: 641px) {
  .itp-sticky-btn-wrap { position: static; background: none; padding: 0; margin-top: 8px; }
}

/* SEO text section */
.itp-seo { padding: 52px 16px; }
.itp-seo-inner { max-width: 860px; margin: 0 auto; }
.itp-seo-inner h2 { font-size: 1.08rem; font-weight: 700; margin-bottom: 12px; color: var(--itp-text); }
.itp-seo-inner p  { font-size: .875rem; color: var(--itp-muted); line-height: 1.8; margin-bottom: 12px; }