@font-face{
  font-family:"Archivo";
  src:url("/fonts/archivo-var.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
/* ScanReviver — Shinobi Tools tegel-systeem, eigen accent (staalblauw #8fb6c9).
   paper/steel light tokens · ink borders · blade-rule accent · Archivo type.
   Document previews (crop/deskew/thumbnails) sit on light steel/paper — papier op papier. */
:root{
  --ac:#8fb6c9;
  --paper: color-mix(in oklab, var(--ac) 5%, oklch(98.5% 0 0));
  --steel: color-mix(in oklab, var(--ac) 10%, oklch(97% 0 0));
  --steel-line: color-mix(in oklab, var(--ac) 25%, oklch(86% 0 0));
  --ink: oklch(22% 0.018 95);
  --txt: oklch(24% 0.015 95);
  --muted: oklch(42% 0.02 95);
  --foot-bg: oklch(24% 0.016 95);
  --txt-on-ink: oklch(95% 0.01 95);
  --mut-on-ink: oklch(76% 0.02 95);
  --on-ac: oklch(22% 0.018 95);
  --sans:"Archivo",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
:root[data-theme="dark"]{
    --paper: color-mix(in oklab, var(--ac) 9%, oklch(27% 0.012 95));
    --steel: color-mix(in oklab, var(--ac) 12%, oklch(32% 0.012 95));
    --steel-line: color-mix(in oklab, var(--ac) 22%, oklch(44% 0.015 95));
    --ink: oklch(92% 0.012 95);
    --txt: oklch(92% 0.01 95);
    --muted: oklch(75% 0.015 95);
  }
*{box-sizing:border-box}
[hidden]{display:none !important}   /* wint van .editor{display:grid} e.d. */
html,body{margin:0}
body{font:16px/1.6 var(--sans);background:var(--paper);color:var(--txt);font-kerning:normal}
h1,h2{line-height:1.15;margin:0;font-stretch:112%;font-weight:820;letter-spacing:-.005em}
h2{font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:1.2rem}
img{max-width:100%}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
main mark,h1 mark{background:var(--ac);color:var(--on-ac);padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* blade-rule — the brand divider, accent only, CSS-only (no markup added) */
.site-head{position:relative}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;
  background:repeating-linear-gradient(115deg,var(--ac) 0 26px,transparent 26px 32px)}
.site-foot{position:relative}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;
  background:repeating-linear-gradient(115deg,var(--ac) 0 26px,transparent 26px 32px)}

/* header/footer — paper letterhead, ink footer */
.site-head{display:flex;align-items:center;gap:1rem;padding:.9rem 1.2rem 1rem;background:var(--paper);color:var(--ink)}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--ink);text-decoration:none}
.brand img{width:30px;height:30px}
.brand b{font-size:1.16rem;letter-spacing:.2px;font-stretch:118%;font-weight:800}
.brand b span{color:var(--ac)}
.tagline{color:var(--muted);font-size:.85rem;margin-left:auto}
@media(max-width:560px){.tagline{display:none}}
.site-foot{text-align:center;background:var(--foot-bg);color:var(--mut-on-ink);font-size:.85rem;padding:1.5rem 1.4rem 1.4rem}
.site-foot .foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:center;margin-bottom:.5rem}
.site-foot .foot-nav a{color:var(--txt-on-ink);text-decoration:none}
.site-foot .foot-nav a:hover{text-decoration:underline;color:var(--ac)}

main{max-width:960px;margin:0 auto;padding:1.6rem 1.1rem 3rem}

/* hero + upload */
.hero{text-align:center;padding:1.5rem 0 .5rem}
h1{font-size:clamp(1.7rem,4vw,2.5rem);margin-bottom:.7rem;text-wrap:balance}
.lead{color:var(--muted);font-size:1.1rem;max-width:640px;margin:0 auto 1.6rem}
.dropzone{background:var(--steel);border:2px dashed var(--steel-line);
  padding:2.4rem 1.2rem;max-width:620px;margin:0 auto;cursor:pointer;color:var(--muted);
  transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone:focus,.dropzone.drag{border-color:var(--ink);background:color-mix(in oklab,var(--ac) 12%,var(--steel));outline:none;color:var(--txt)}
.dropzone svg{color:var(--ac)}
.dz-title{font-weight:700;color:var(--txt);margin:.6rem 0 .2rem}
.dz-title .link{color:var(--txt);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ac);text-decoration-thickness:3px}
.dz-sub{font-size:.86rem;margin:0}
.privacy-note{color:var(--muted);font-size:.85rem;max-width:620px;margin:1rem auto 0}

/* editor layout */
.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1rem;align-items:start}
@media(max-width:820px){.editor-grid{grid-template-columns:1fr}}

/* multi-page thumbnail strip */
.pagestrip{display:flex;gap:.6rem;overflow-x:auto;padding:.6rem;background:var(--steel);
  border:1px solid var(--steel-line);margin-top:1rem}
.thumb{position:relative;flex:0 0 auto;width:88px;border:2px solid var(--steel-line);
  overflow:hidden;cursor:pointer;background:var(--paper)}
.thumb.active{border-color:var(--ac)}
.thumb img{width:100%;height:104px;object-fit:cover;display:block}
.thumb .num{position:absolute;top:3px;left:3px;background:rgba(15,34,51,.8);color:#fff;
  font-size:.72rem;padding:1px 6px}
.thumb .del{position:absolute;top:3px;right:3px;width:20px;height:20px;border:none;border-radius:50%;
  background:rgba(179,38,30,.92);color:#fff;font-size:.8rem;line-height:1;cursor:pointer;padding:0}
.thumb .moves{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;
  background:rgba(15,34,51,.72)}
.thumb .moves button{flex:1;border:none;background:none;color:#fff;font-size:.85rem;cursor:pointer;padding:2px}
.thumb .moves button:disabled{opacity:.3;cursor:default}
.addtile{flex:0 0 auto;width:88px;height:auto;border:2px dashed var(--steel-line);background:var(--paper);
  color:var(--txt);font-size:.8rem;font-weight:700;cursor:pointer;display:grid;place-items:center;text-align:center;padding:.4rem}
.addtile:hover{border-color:var(--ink);background:color-mix(in oklab,var(--ac) 10%,var(--paper))}
.pageind{font-size:.85rem;font-weight:400;color:var(--muted);margin-left:auto}
.panel{background:var(--steel);border:1px solid var(--steel-line);border-top:3px solid var(--ac);
  padding:1.1rem 1.15rem}
.panel h2{font-size:1.12rem;display:flex;align-items:center;gap:.5rem;text-transform:none;letter-spacing:0}
.step{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--ac);color:var(--on-ac);border:2px solid var(--ink);font-size:.85rem;font-weight:800}
.panel-hint{color:var(--muted);font-size:.9rem;margin:.5rem 0 .8rem}

/* corner canvas — light backdrop, document previews work best on paper */
.canvas-wrap{position:relative;display:inline-block;max-width:100%;line-height:0;
  background:var(--steel);overflow:hidden;touch-action:none;user-select:none}
.canvas-wrap img{display:block;max-width:100%;max-height:56vh;width:auto}
.quad{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.quad polygon{fill:color-mix(in oklab,var(--ac) 20%,transparent);stroke:var(--ac);stroke-width:2;vector-effect:non-scaling-stroke}
.handle{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:#fff;border:3px solid var(--ac);box-shadow:0 1px 4px rgba(0,0,0,.4);
  cursor:grab;touch-action:none}
.handle:active{cursor:grabbing;background:var(--ac)}

/* modes + controls */
.row{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.8rem}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.4rem 0 .2rem}
.mode-btn{padding:.7rem .5rem;border:1.5px solid var(--steel-line);background:var(--paper);
  color:var(--txt);font-size:.92rem;font-weight:700;cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.mode-btn.active{border-color:var(--ink);background:color-mix(in oklab,var(--ac) 20%,var(--paper));color:var(--txt)}
.adjust{margin-top:.9rem;border-top:1px solid var(--steel-line);padding-top:.4rem}
.adjust summary{cursor:pointer;color:var(--muted);font-size:.9rem;padding:.35rem 0}
.adjust label{display:block;font-size:.85rem;color:var(--muted);margin:.5rem 0}
.adjust input[type=range]{width:100%;accent-color:var(--ac)}

.btn{appearance:none;border:1.5px solid var(--steel-line);background:var(--paper);color:var(--txt);
  padding:.62rem 1.05rem;font-size:.9rem;font-weight:700;cursor:pointer;
  text-transform:uppercase;letter-spacing:.02em;transition:border-color .15s}
.btn:hover{border-color:var(--ink)}
.btn.ghost{background:var(--paper);color:var(--txt);border-color:var(--steel-line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.primary{border:2px solid var(--ink);background:var(--ac);color:var(--on-ac);
  box-shadow:3px 3px 0 var(--ink);transition:box-shadow .12s,transform .12s}
.btn.primary:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.btn.primary:hover{transform:none;box-shadow:3px 3px 0 var(--ink)}}
.btn.primary{font-size:1rem;padding:.72rem 1.2rem}
.btn:disabled{opacity:.5;cursor:default}
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

/* before/after */
.result-view{margin-top:1rem}
.ba-tabs{display:flex;gap:.3rem;margin-bottom:.5rem}
.ba-tab{padding:.35rem .8rem;border:1px solid var(--steel-line);background:var(--paper);
  font-size:.85rem;cursor:pointer;color:var(--muted)}
.ba-tab.active{background:var(--ink);color:var(--txt-on-ink);border-color:var(--ink)}
.ba-stage{background:var(--steel);padding:.4rem;text-align:center;min-height:120px}
.ba-stage img{max-height:50vh}
.downloads{margin-top:.9rem}
.ocr-opt{display:flex;align-items:flex-start;gap:.5rem;margin:.9rem 0 .2rem;
  font-size:.85rem;color:var(--muted);cursor:pointer;line-height:1.35}
.ocr-opt input[type=checkbox]{margin-top:.15rem;accent-color:var(--ac);flex:none}
.pdfopts{margin-top:.6rem;border-top:1px solid var(--steel-line);padding-top:.4rem}
.pdfopts summary{cursor:pointer;color:var(--muted);font-size:.9rem;padding:.35rem 0}
.pdfopts label{display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  font-size:.85rem;color:var(--muted);margin:.5rem 0}
.pdfopts select{flex:0 0 auto;min-width:150px;padding:.35rem .5rem;border:1px solid var(--steel-line);
  background:var(--paper);color:inherit;font-size:.85rem}

/* done view */
.done-panel{max-width:520px;margin:1.5rem auto;text-align:center}
.check{width:56px;height:56px;border-radius:50%;background:color-mix(in oklab,var(--ac) 24%,var(--paper));
  color:var(--txt);border:2px solid var(--ink);font-size:2rem;display:grid;place-items:center;margin:0 auto .6rem}
.done .downloads{justify-content:center}
.done .row{justify-content:center}

/* banners */
.banner{padding:.6rem .8rem;font-size:.9rem;margin:.2rem 0 .6rem;border:1px solid var(--steel-line)}
.banner.error{background:color-mix(in oklab, oklch(58% 0.19 25) 14%, var(--paper));color:oklch(48% 0.18 28);border-color:oklch(70% 0.12 25)}
.banner.warn{background:color-mix(in oklab, oklch(80% 0.14 80) 22%, var(--paper));color:oklch(38% 0.09 70);border-color:oklch(62% 0.12 80)}
.banner.ok{background:color-mix(in oklab, var(--ac) 16%, var(--paper));color:var(--txt);border-color:var(--steel-line)}

/* busy overlay */
.busy{position:fixed;inset:0;background:rgba(15,34,51,.45);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.9rem;color:#fff;z-index:50;backdrop-filter:blur(1px)}
.spinner{width:44px;height:44px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}

/* info */
.info{margin-top:2.4rem;color:var(--txt)}
.info h2{font-size:1.15rem;margin:1.4rem 0 .5rem}
.how{color:var(--muted);padding-left:1.2rem}
.how li{margin:.3rem 0}
.fine{color:var(--muted);font-size:.9rem;max-width:680px}

/* thema-toggle (licht default, keuze in localStorage) */
.theme-toggle{font:inherit;background:none;border:1.5px solid var(--steel-line);color:var(--muted);padding:6px 11px;cursor:pointer;font-size:1rem;line-height:1;transition:border-color .15s,color .15s}
.theme-toggle:hover{border-color:var(--ink);color:var(--txt)}

/* ── homepage content-secties (features / use-cases / faq) ── */
.info h2{font-size:1.4rem;font-stretch:112%;font-weight:820;text-transform:uppercase;letter-spacing:.005em;margin:2.4rem 0 .9rem}
.info .sub{color:var(--muted);max-width:65ch;margin:0 0 1.3rem}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:12px;margin:1rem 0 0}
.feature{border:1px solid var(--steel-line);border-top:3px solid var(--ac);background:color-mix(in oklab,var(--ac) 5%,var(--card,#fff));padding:15px 16px 14px}
.feature h3{margin:0 0 5px;font-size:1.02rem;font-weight:780;text-transform:none}
.feature p{margin:0;color:var(--muted);font-size:.92rem}
.usecases{display:flex;flex-wrap:wrap;gap:8px;margin:.6rem 0 0}
.usecases li{list-style:none;border:1px solid var(--steel-line);padding:7px 13px;font-size:.92rem;color:var(--txt)}
.usecases{padding:0}
.info .faq{margin-top:.6rem}