/* =====================================================================
   PDFly tool-page style: flat, direct layout (inspired by PDF24's look).
   Loaded AFTER main.css on every /tools/* page (EN + zh-CN).
   To revert: delete this file or remove its <link> from the pages.
   To change colours: edit the 5 variables below.
   ===================================================================== */
:root {
  --ts-panel: #e8f4f2;          /* upload panel background            */
  --ts-panel-hover: #dcefeb;
  --ts-edge: #5fb0a6;           /* dashed border                       */
  --ts-cta: #c2410c;            /* "Choose files" button (white text 5:1) */
  --ts-cta-hover: #9a3412;
  /* PDF24-like blue variant:
     --ts-panel:#dbe9fb; --ts-panel-hover:#cfe0f7; --ts-edge:#3b82f6; */
}

/* ---- page + hero ---------------------------------------------------- */
html:not(.dark) body:has(.tool-hero-v2) { background: #fff; }

.tool-hero-v2 {
  background: none !important;
  overflow: visible;
  padding-top: 112px;
  padding-bottom: 28px;
}
.tool-hero-v2 .hero-blob,
.tool-hero-v2 .hero-float-icon,
.tool-hero-v2 .step-pill { display: none; }

/* one column; DOM order is: pill, h1, subtitle, byline, [drop zone], badges.
   We want:               title, subtitle, byline, badges, drop zone.       */
.tool-hero-v2 > .relative {
  display: flex; flex-direction: column; align-items: center;
  max-width: 760px;
}
.tool-hero-v2 > .relative > * { order: 3; }
.tool-hero-v2 > .relative > h1 {
  order: 1;
  font-size: clamp(2rem, 4.6vw, 2.8rem);
  font-weight: 700; letter-spacing: -.015em; line-height: 1.12;
  margin-bottom: .6rem;
}
.tool-hero-v2 > .relative > p:not(.pdfly-meta-byline) {
  order: 2; font-size: 1.1rem; max-width: 34rem; margin: 0 auto;
}
.tool-hero-v2 .pdfly-meta-byline { order: 3; margin-top: .6rem; }

/* ---- trust badges: plain check-list under the subtitle ----------------- */
.tool-hero-v2 .hero-badges-row {
  order: 4; width: 100%;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: 0; margin: 1.1rem 0 0; gap: 6px 22px;
}
.tool-hero-v2 .hero-badge-chip {
  padding: 0; font-size: 14.5px; font-weight: 500; color: var(--ink-700);
}
.dark .tool-hero-v2 .hero-badge-chip { color: #d8d2c6; }
.tool-hero-v2 .hero-badge-chip svg { width: 16px; height: 16px; color: #16a34a; }

/* ---- upload panel ------------------------------------------------------ */
.tool-hero-v2 .drop-zone-v2 {
  order: 5; width: 100%; max-width: 760px;
  margin: 1.5rem auto 0;
  background: var(--ts-panel);
  border: 2px dashed var(--ts-edge); border-radius: 14px;
  padding: 52px 24px 40px;
  box-shadow: none; transform: none;
}
.tool-hero-v2 .drop-zone-v2:hover,
.tool-hero-v2 .drop-zone-v2.drag-over {
  background: var(--ts-panel-hover); border-color: var(--forge-500);
  box-shadow: none; transform: none;
}
.dark .tool-hero-v2 .drop-zone-v2 {
  background: rgba(15,118,110,.12); border-color: rgba(45,212,191,.45);
}
.dark .tool-hero-v2 .drop-zone-v2:hover,
.dark .tool-hero-v2 .drop-zone-v2.drag-over { background: rgba(15,118,110,.2); }

/* inside the panel: big button first, then "drop files here" + hint */
.tool-hero-v2 .drop-zone-v2 > .pointer-events-none {
  display: flex; flex-direction: column; align-items: center;
}
.tool-hero-v2 .drop-zone-v2-icon { display: none; }
.tool-hero-v2 .drop-zone-v2 .btn-primary {
  order: 1; margin-bottom: 1.1rem;
  background: var(--ts-cta); box-shadow: none; border-radius: 999px;
  font-size: 1.3rem; font-weight: 600; padding: 16px 44px;
}
.tool-hero-v2 .drop-zone-v2:hover .btn-primary { background: var(--ts-cta-hover); transform: none; }
.tool-hero-v2 .drop-zone-v2 .btn-primary svg { width: 24px; height: 24px; }
.tool-hero-v2 .drop-zone-v2 p.font-display {
  order: 2; font-size: 1.05rem; font-weight: 500; margin-bottom: .2rem;
}
.tool-hero-v2 .drop-zone-v2 p.text-sm { order: 3; margin-bottom: 0; }

/* ---- below the hero ------------------------------------------------------ */
.tool-section { max-width: 760px; }
.feature-strip { gap: 0; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--ink-100); }
.dark .feature-strip { border-top-color: rgba(255,255,255,.08); }
.feature-strip-item,
.dark .feature-strip-item {
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.feature-strip-item:hover { transform: none; box-shadow: none; border-color: transparent; }

/* ---- mobile ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .tool-hero-v2 { padding-top: 96px; padding-bottom: 20px; }
  .tool-hero-v2 .drop-zone-v2 { padding: 36px 14px 28px; }
  .tool-hero-v2 .drop-zone-v2 .btn-primary { font-size: 1.15rem; padding: 14px 30px; }
  .tool-hero-v2 .hero-badges-row { gap: 6px 14px; }
}

/* Intro paragraph under the info tiles: same width and centering as the
   tiles above and the Best Practices card below (was a narrow, left-aligned block) */
section[data-pdfly-intro] { max-width: 64rem; }
section[data-pdfly-intro] > p {
  max-width: 46rem; margin: 0 auto; text-align: center;
  font-size: 1.0625rem; line-height: 1.7;
}

/* Info cards (Good to know / Troubleshooting / How to): proper hanging indent
   for wrapped bullet lines, and step titles on their own line */
.pdfly-cards ul.list-disc.list-inside { list-style-position: outside; padding-left: 1.25rem; }
.pdfly-cards ul.list-disc.list-inside > li { padding-left: .2rem; }
.pdfly-cards ol.list-none > li > span:last-child > strong:first-child { display: block; margin-bottom: 2px; }

/* Intro paragraph: closer in size to the info tiles above it */
section[data-pdfly-intro] > p {
  font-size: .9375rem; line-height: 1.7; max-width: 44rem; text-wrap: balance;
}

/* Hide the intro paragraph under the info tiles (it repeats the cards below) */
section[data-pdfly-intro] { display: none; }