/* Supplemental styles for the PDF tools (classes not already in the image site's
   style.css). Loaded AFTER style.css so it only adds, never overrides branding. */
.opts{display:grid;gap:14px;margin-top:18px}
.opt{display:flex;flex-direction:column;gap:6px}
.opt label{font-weight:600;font-size:13.5px}
.opt input,.opt select,.opt textarea{font-family:inherit;font-size:16px;padding:12px;border:1px solid var(--line);
  border-radius:10px;background:#fff;width:100%}
.opt .row{display:flex;gap:10px;flex-wrap:wrap}
.opt .chip{border:1px solid var(--line);border-radius:9px;padding:10px 16px;cursor:pointer;font-size:14px;
  background:#fff;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.opt .chip.active{border-color:var(--brand);background:#eef4ff;color:var(--brand);font-weight:700}
.hint{font-size:12.5px;color:var(--muted)}
.hero-art{width:100%;max-width:440px;height:auto;margin:16px auto 0;display:block;border-radius:16px;box-shadow:var(--shadow)}
/* dropzone + thumbnail placeholder icons (our SVGs have no intrinsic size) */
.dropzone .big{font-size:0;line-height:1;margin-bottom:12px}
.dropzone .big svg{width:54px;height:54px;color:#c3cbd6}
.file-item .thumb .ph svg{width:40px;height:40px;color:#b9c1cd}
.ico svg{width:58%;height:58%;display:block}
.tool-hero .ico svg{width:54%;height:54%}
.next-tools{margin-top:26px;border-top:1px solid var(--line);padding-top:18px}
.next-tools .section-title{margin:0 0 12px}
.next-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
/* ---------------- Mobile-first polish (PDF tool pages) ---------------- */
@media(max-width:560px){
  /* tighter hero so the actual TOOL is reachable sooner */
  .tool-hero{padding:18px 0 4px}
  .tool-hero h1{font-size:22px}
  .tool-hero p{font-size:14.5px}
  .hero-art{max-width:300px;margin-top:12px;border-radius:14px}
  /* roomier tool panel + dropzone on small screens */
  .panel{padding:14px;border-radius:14px;margin:14px auto}
  .dropzone{padding:26px 12px}
  .dropzone h3{font-size:17px}
  /* primary CTA + action buttons full-width & thumb-reachable */
  .actionbar{flex-direction:column;gap:10px}
  .actionbar .btn,.dropzone .btn.lg,.result .btn.lg{width:100%}
  .opt .row{gap:8px}
  .opt .chip{flex:1 1 auto}
  /* how-it-works + related stack cleanly */
  .how-steps{gap:10px}
  .next-row{flex-direction:column}
  .next-row .btn{width:100%}
  /* body copy a touch larger for readability */
  .seo p,.seo li,.faq summary,.faq p{font-size:15px}
}
@media(max-width:380px){
  .tool-hero h1{font-size:20px}
  .panel{padding:12px}
}