/* pdfpagekit.com — the workbench.

   The category's layout convention is strong and worth adopting wholesale,
   because people navigate these tools by muscle memory: one tool per URL with
   the keyword as the H1, a drop zone filling the fold, then a three-zone
   workspace — thumbnails centre, options right, action bottom-right in the
   brand colour, labelled verb-plus-noun.

   Innovate on the upload, not the layout.

   THE POSITIONING IS THE ABSENCE OF AN UPLOAD. Four of the five incumbents
   send your document to a server and promise to delete it in an hour or two;
   a retention promise is proof of upload. So the trust line goes in the exact
   slot where they put "deleted after one hour", and it says something strictly
   stronger. It is stated once, plainly, and never as a badge.

   Colour: red, blue, orange, green and greyscale are each taken by an
   incumbent (iLovePDF #E5322D, Smallpdf #0055FF, PDF24 #D97D0D, Sejda
   #00BB88, Stirling greyscale). Indigo is the open lane, so that is what this
   uses.

   No progress bar for anything that never left the machine — that is the
   category's most dishonest habit and this site's clearest tell.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  color-scheme: light dark;

  --bg:#FFFFFF;
  --surface:#F7F8FC;
  --sunk:#EEF0F8;
  --line:#DDE0EC;
  --line-2:#BFC4DA;
  --ink:#181B2A;
  --ink-2:#4E5470;
  --ink-3:#5C6488;         /* was #71789A — 4.08:1 on white, failed */

  --brand:#4338CA;          /* indigo — the one lane no incumbent holds */
  --brand-dark:#312BA0;
  --brand-wash:#EEEDFB;
  --on-brand:#FFFFFF;

  --ok:#1A7A45;
  --warn:#8A5300;
  --danger:#A32032;

  --r:8px;                  /* the category sits at 4-8px; 16+ reads consumer */
  --max:1180px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0F1118; --surface:#171A24; --sunk:#1E222E; --line:#2B3040; --line-2:#3D445A;
    --ink:#EEF0F7; --ink-2:#AFB5CC; --ink-3:#868DA8;
    --brand:#A5A0F5; --brand-dark:#C4C0FF; --brand-wash:#1D1B3A;
    --on-brand:#0F1118;   /* dark ink on the light dark-mode brand */
    --ok:#63CE93; --warn:#E0AC5C; --danger:#F08894;
  }
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.6 Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0;font-weight:600;line-height:1.25;letter-spacing:-.02em}
h1{font-size:33px}
h2{font-size:21px;margin:32px 0 10px}
h3{font-size:16.5px;margin:20px 0 5px}
p{margin:0 0 13px}
a{color:var(--brand)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.prose{max-width:720px}
.prose p,.prose li{color:var(--ink-2);font-size:15.5px;line-height:1.72}
.prose li{margin-bottom:7px}

/* ---------- chrome: navigation BY VERB, because that is what people search - */
header{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:30}
.bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:11px 0}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;
  text-decoration:none;color:var(--ink);letter-spacing:-.03em}
.brand svg{display:block}
nav.verbs{display:flex;gap:1px;flex-wrap:wrap;font-size:14px;margin-left:auto}
nav.verbs a{text-decoration:none;color:var(--ink-2);padding:6px 10px;border-radius:6px}
nav.verbs a:hover{background:var(--surface);color:var(--ink)}
nav.verbs a[aria-current="page"]{background:var(--brand-wash);color:var(--brand-dark);font-weight:600}

/* ---------- the trust line, in the slot the incumbents use for retention --- */
.trust{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);
  padding:9px 0;border-bottom:1px solid var(--line);background:var(--surface)}
.trust b{color:var(--ink);font-weight:600}
.trust svg{flex:none;color:var(--ok)}

/* ---------- THE DROP ZONE fills the fold ---------- */
.drop{
  border:2px dashed var(--line-2);border-radius:14px;background:var(--surface);
  min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:34px 22px;margin:20px 0;cursor:pointer;
  transition:border-color .12s,background .12s;
}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-wash)}
.drop h2{margin:0;font-size:21px;font-weight:600}
.drop p{margin:0;color:var(--ink-3);font-size:14.5px}
.drop .or{font-size:13.5px;color:var(--ink-3)}
.btn{
  font:600 15px/1.3 inherit;padding:12px 24px;border-radius:var(--r);cursor:pointer;
  border:1px solid var(--brand);background:var(--brand);color:var(--on-brand);
}
.btn:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--brand);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--brand-wash)}
.btn.sm{font-size:13.5px;padding:7px 13px}
.btn.danger{background:transparent;color:var(--danger);border-color:var(--line-2)}

/* ---------- the workspace: thumbnails centre, options right, action low --- */
.work{display:grid;grid-template-columns:1fr 268px;gap:20px;margin:18px 0}
@media (max-width:860px){.work{grid-template-columns:1fr}}
.sheet{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  padding:16px;min-height:300px}
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
.pg{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--surface);cursor:grab;aspect-ratio:1/1.414}
.pg canvas{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.pg[data-sel="1"]{outline:2px solid var(--brand);outline-offset:-2px}
.pg[data-cut="1"]{opacity:.34}
.pg .no{position:absolute;left:5px;top:5px;font-size:11px;font-weight:600;
  background:rgba(24,27,42,.78);color:#fff;padding:1px 6px;border-radius:20px}
.pg .acts{position:absolute;right:4px;top:4px;display:flex;gap:3px;opacity:0}
.pg:hover .acts{opacity:1}
.pg .acts button{border:0;background:rgba(24,27,42,.78);color:#fff;border-radius:5px;
  width:24px;height:24px;font-size:13px;cursor:pointer;padding:0;line-height:1}
.pg.drag{opacity:.4}
.pg.dropbefore{box-shadow:-3px 0 0 var(--brand)}

.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:15px;align-self:start;position:sticky;top:70px}
.panel h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);font-weight:600}
.panel label{display:block;font-size:13px;color:var(--ink-2);margin:11px 0 4px;font-weight:500}
.panel input,.panel select{width:100%;font:400 14.5px/1.3 inherit;padding:8px 10px;
  border:1px solid var(--line-2);border-radius:6px;background:var(--bg);color:var(--ink)}
.panel .go{width:100%;margin-top:15px}
.hint{font-size:12.5px;color:var(--ink-3);margin-top:9px;line-height:1.5}

.bar-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.count{font-size:13.5px;color:var(--ink-2);margin-right:auto}

/* ---------- results / notices ---------- */
.notice{border:1px solid var(--line);border-left:3px solid var(--brand);background:var(--surface);
  border-radius:var(--r);padding:12px 15px;margin:15px 0;font-size:14.5px}
.notice p{margin:0 0 8px;color:var(--ink)}
.notice p:last-child{margin:0}
.notice.warn{border-left-color:var(--warn)}
.notice.bad{border-left-color:var(--danger)}
.done{border:1px solid var(--line);border-left:3px solid var(--ok);background:var(--surface);
  border-radius:var(--r);padding:16px;margin:16px 0}
.done b{font-size:17px}

/* ---------- home ---------- */
.intro{padding:34px 0 6px}
.intro p{font-size:17.5px;color:var(--ink-2);max-width:660px}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:11px;margin:20px 0}
.tool{display:flex;gap:11px;align-items:flex-start;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;background:var(--bg)}
.tool:hover{border-color:var(--brand);background:var(--brand-wash)}
.tool .ic{flex:none;width:30px;height:30px;border-radius:7px;background:var(--brand-wash);
  color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.tool b{display:block;font-size:14.5px;font-weight:600;margin-bottom:1px}
.tool span{display:block;font-size:13px;color:var(--ink-2);line-height:1.45}

table{border-collapse:collapse;width:100%;font-size:14.5px;margin:14px 0}
th,td{padding:8px 11px;text-align:left;border-bottom:1px solid var(--line)}
thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);font-weight:600}
.tw{overflow-x:auto}

footer{border-top:1px solid var(--line);margin-top:44px;padding:20px 0 54px;
  font-size:13.5px;color:var(--ink-3)}
footer a{color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:640px){h1{font-size:26px}.drop{min-height:240px}}