/*
 * Vexis Bundelstudio 2.0 — een rustige documentwerkplaats.
 * Warm papier, inkt en een klein retro-accent vervangen de generieke SaaS-look.
 */
:root {
  color-scheme: only light;
  --bg: #f3efe5;
  --surface: #fffdf8;
  --surface-2: #eee8dc;
  --line: #d8d0c3;
  --line-strong: #b9afa0;
  --text: #182033;
  --muted: #69727b;
  --accent: #d9573b;
  --accent-2: #b94029;
  --teal: #287c78;
  --gold: #d4a62d;
  --denim: #496c9f;
  --danger: #a9363c;
  --radius: 10px;
  font-family: Inter, "Segoe UI Variable", Aptos, "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

html {
  min-height: 100%;
  background-color: #f3efe5;
  color-scheme: only light;
  scroll-behavior: smooth;
}
body {
  min-height: 100%;
  background-color: var(--bg);
  background-image: linear-gradient(rgba(24, 32, 51, .026) 1px, transparent 1px);
  background-size: 100% 28px;
  color: var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 4px;
  z-index: 30;
  background: linear-gradient(90deg, var(--accent) 0 25%, var(--gold) 25% 50%, var(--teal) 50% 75%, var(--denim) 75%);
}

h1, h2, h3 {
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
}

h1 {
  font-size: clamp(38px, 5vw, 54px);
  line-height: 1.02;
  letter-spacing: -.035em;
}

h2 { letter-spacing: -.02em; }
p { color: var(--muted); }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 11px 15px;
  border-radius: 6px;
  background: var(--text);
  color: #fff;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  min-height: 72px;
  max-width: 1320px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(243, 239, 229, .96);
}

.brand {
  gap: 11px;
  color: var(--text);
  font-size: 17px;
  letter-spacing: -.018em;
}

.brand-mascot {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(24, 32, 51, .14));
}

.brand-name { white-space: nowrap; }
.brand-name strong { font-weight: 800; }
.brand-mark { display: none; }

.site-nav { gap: 4px; }
.site-nav a {
  position: relative;
  padding: 9px 12px;
  border-radius: 6px;
  color: #4f5963;
  font-size: 14px;
  font-weight: 650;
}
.site-nav a::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 4px;
  left: 12px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--text);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}
.header-cta:hover { background: var(--text); color: #fff; }
.privacy-chip { display: none; }

.eyebrow, .kicker {
  color: var(--accent);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .025em;
  text-transform: none;
}

.button {
  min-height: 48px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 750;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.button.primary, .studio-page .button.primary {
  background: var(--text);
  color: #fff;
  box-shadow: 4px 4px 0 var(--accent);
}
.button.primary:hover, .studio-page .button.primary:hover {
  background: #2a3348;
  transform: translate(-1px, -1px);
}
.button.secondary {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--text);
}

.mascot-portrait {
  position: relative;
  width: 220px;
  height: 184px;
  margin: 0 0 24px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #e9dfce;
  box-shadow: 6px 6px 0 #d4c8b6;
}
.mascot-portrait::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--accent) 0 25%, var(--gold) 25% 50%, var(--teal) 50% 75%, var(--denim) 75%);
}
.mascot-portrait img {
  width: 190px;
  height: 190px;
  object-fit: contain;
  transform: translateY(9px);
}
.mascot-portrait.compact { width: 176px; height: 150px; }
.mascot-portrait.compact img { width: 156px; height: 156px; }

/* PDF samenvoegen: intro links, werkvlak rechts. */
body.studio-page {
  min-height: 100%;
  background-color: var(--bg);
  background-image: linear-gradient(rgba(24, 32, 51, .026) 1px, transparent 1px);
  background-size: 100% 28px;
  color: var(--text);
}
.studio-page .studio-header { max-width: 1320px; border-color: var(--line); }
.merge-main {
  max-width: 1320px;
  padding: 54px 28px 90px;
  display: grid;
  grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
  grid-template-areas:
    "intro workspace"
    "trust workspace"
    "faq faq";
  align-items: start;
  gap: 36px 64px;
}
.merge-intro {
  grid-area: intro;
  max-width: none;
  margin: 0;
  text-align: left;
}
.merge-intro h1 {
  max-width: 310px;
  margin: 12px 0 16px;
  font-size: clamp(42px, 5vw, 54px);
}
.merge-intro > p:not(.eyebrow) {
  max-width: 325px;
  margin: 0;
  color: #59636d;
  font-size: 17px;
  line-height: 1.6;
}
.intro-facts {
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
  color: #505b66;
  font-size: 13px;
}
.intro-facts li { display: flex; align-items: center; gap: 9px; }
.intro-facts li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(40, 124, 120, .13);
}

.merge-workspace {
  grid-area: workspace;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(49, 43, 35, .07);
}
.workspace-topline {
  min-height: 76px;
  padding: 17px 22px;
  border-color: var(--line);
  background: #f8f3e9;
}
.workspace-topline strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 600;
}
.workspace-topline small { margin-top: 4px; }
.workspace-index { display: none; }
.secure-note { color: var(--teal); }
.merge-empty { padding: clamp(24px, 4.5vw, 50px); }
.merge-dropzone {
  min-height: 310px;
  padding: 28px;
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  background: #fffcf6;
}
#merge-file-input,
#merge-more-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
}
.merge-dropzone:hover, .merge-dropzone.is-dragover {
  border-color: var(--accent);
  background: #fff8f2;
}
.merge-dropzone strong {
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 600;
}
.file-symbol {
  width: 58px;
  height: 70px;
  border-radius: 3px 8px 3px 3px;
  background: var(--text);
  box-shadow: 6px 6px 0 #edb4a6;
}
.limit-note { color: #717982; }

.arrange-toolbar, .merge-actionbar { padding: 16px 20px; }
.arrange-toolbar { border-color: var(--line); background: #fffcf7; }
.tool-button {
  border-color: var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.tool-button:hover { border-color: var(--accent); color: var(--accent-2); }
.reorder-hint { margin: 18px 20px 0; }
.merge-file-list { padding: 16px 20px 22px; }
.merge-file-card {
  border-color: var(--line);
  border-radius: 8px;
  background: #fffefb;
  box-shadow: 0 1px 2px rgba(24, 32, 51, .04);
}
.merge-file-card:hover { border-color: var(--line-strong); }
.file-order { color: var(--accent-2); }
.pdf-sheet { border-radius: 2px 6px 2px 2px; background: #e7e2d8; }
.file-controls button { border-color: var(--line); border-radius: 6px; background: #fffdf8; }
.file-controls button:hover { border-color: var(--accent); color: var(--accent-2); }
.merge-actionbar {
  position: sticky;
  bottom: 0;
  border-color: var(--line);
  background: #f4eee3;
  box-shadow: 0 -8px 18px rgba(49, 43, 35, .04);
}
.merge-status { min-height: 460px; }
.progress-line i { background: var(--accent); }
.success-mark { border-color: #a8cbc3; background: #e3f1ec; color: #246a62; }

.trust-strip {
  grid-area: trust;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-color: var(--line);
}
.trust-strip article {
  padding: 17px 0;
  display: grid;
  grid-template-columns: 82px 1fr;
  align-items: baseline;
  gap: 10px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}
.trust-strip article:last-child { border-bottom: 0; }
.trust-strip span { display: none; }
.trust-strip h2 { margin: 0; font-size: 16px; }
.trust-strip p { margin: 0; }
.studio-page .seo-section { grid-area: faq; }

/* OCR-startpagina: dezelfde werkplaats, zonder marketinghero boven de tool. */
.home-main {
  max-width: 1320px;
  padding: 54px 28px 90px;
  display: grid;
  grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
  grid-template-areas:
    "hero steps"
    "hero panel"
    "seo seo"
    "faq faq";
  align-items: start;
  gap: 18px 64px;
}
.home-main > .hero {
  grid-area: hero;
  max-width: none;
  padding: 0;
}
.home-main .hero h1 { margin: 12px 0 17px; font-size: clamp(40px, 5vw, 52px); }
.home-main .lede { margin-bottom: 22px; font-size: 17px; }
.hero-actions { margin: 0; }
.micro-proof { margin-top: 16px; font-size: 12px; line-height: 1.5; }
.home-main > .steps {
  grid-area: steps;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.home-main .step {
  padding: 10px 7px 12px;
  border: 0;
  color: #767e86;
  text-align: left;
  font-size: 12px;
}
.home-main .step b {
  width: 20px;
  height: 20px;
  background: #ded8ce;
  font-size: 11px;
}
.home-main .step.active { background: transparent; color: var(--text); }
.home-main .step.active b { background: var(--accent); }
.home-main > .panel {
  grid-area: panel;
  min-width: 0;
  border-color: var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(49, 43, 35, .07);
}
.home-main > .seo-section:first-of-type { grid-area: seo; }
.home-main > .seo-section:last-of-type { grid-area: faq; }
.dropzone {
  border-color: var(--line-strong);
  border-radius: 8px;
  background: #fbf7ef;
}
.dropzone:hover { border-color: var(--accent); background: #fff8f2; }
.upload-icon { border-color: #dfb3a7; border-radius: 6px; background: #f8e5df; color: var(--accent-2) !important; }
.reference-grid label { color: #394251; }
select, input[type="number"] { border-color: var(--line); border-radius: 6px; background: #fffefa; }
select:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217, 87, 59, .12); }
.canvas-grid article { border-color: var(--line); border-radius: 8px; background: #f7f2e9; }
.spinner { border-color: #d9d1c5; border-top-color: var(--accent); }
.result-card { border-color: var(--line); border-radius: 8px; box-shadow: 0 1px 2px rgba(24, 32, 51, .04); }

/* Redactionele onderbouw in plaats van een rij identieke SaaS-kaarten. */
.seo-section {
  margin-top: 82px;
  padding-top: 56px;
  border-color: var(--line);
}
.seo-section > h2 { max-width: 720px; }
.feature-grid { gap: 28px; }
.feature-grid article {
  padding: 19px 0 0;
  border: 0;
  border-top: 2px solid var(--text);
  border-radius: 0;
  background: transparent;
}
.feature-grid article:nth-child(2) { border-top-color: var(--accent); }
.feature-grid article:nth-child(3) { border-top-color: var(--teal); }
.faq details { border-color: var(--line); }
.faq summary { font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 600; }

.content-page {
  max-width: 1080px;
  padding-top: 78px;
}
.content-page > h1 { max-width: 780px; }
.content-page > .lede { max-width: 720px; }
.article-body {
  max-width: 900px;
  margin-top: 64px;
  padding-left: min(8vw, 88px);
  border-left: 1px solid var(--line);
}
.article-body h2 { max-width: 650px; }

footer {
  max-width: 1320px;
  padding: 28px;
  border-color: var(--line);
}

@media (max-width: 960px) {
  .merge-main, .home-main {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    column-gap: 34px;
  }
  .merge-intro h1, .home-main .hero h1 { font-size: 42px; }
  .mascot-portrait { width: 188px; height: 160px; }
  .mascot-portrait img { width: 166px; height: 166px; }
}

@media (max-width: 780px) {
  body::before { height: 3px; }
  .site-header {
    min-height: 0;
    padding: 9px 16px 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
  }
  .brand-mascot { width: 40px; height: 40px; }
  .brand { font-size: 16px; }
  .header-cta { display: none; }
  .site-nav {
    grid-column: 1 / -1;
    order: initial;
    width: 100%;
    padding: 2px 0 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: 0 0 auto; padding: 7px 9px; font-size: 13px; }

  .merge-main, .home-main {
    padding: 30px 16px 64px;
    display: block;
  }
  .merge-intro, .home-main > .hero { margin-bottom: 26px; }
  .merge-intro {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 18px;
    align-items: center;
  }
  .merge-intro .mascot-portrait { grid-row: 1 / span 4; }
  .merge-intro .intro-facts { grid-column: 1 / -1; }
  .mascot-portrait, .mascot-portrait.compact {
    width: 112px;
    height: 104px;
    margin-bottom: 0;
    box-shadow: 4px 4px 0 #d4c8b6;
  }
  .mascot-portrait img, .mascot-portrait.compact img { width: 106px; height: 106px; }
  .merge-intro h1, .home-main .hero h1 {
    margin: 7px 0 9px;
    font-size: clamp(34px, 10vw, 40px);
  }
  .merge-intro > p:not(.eyebrow) { font-size: 15px; line-height: 1.5; }
  .intro-facts { grid-template-columns: repeat(3, 1fr); gap: 7px; font-size: 11px; }
  .intro-facts li { align-items: flex-start; }
  .home-main .mascot-portrait.compact { margin-bottom: 18px; }
  .home-main > .steps { margin-bottom: 14px; }
  .home-main > .panel { margin-bottom: 0; }
  .workspace-topline { min-height: 68px; }
  .merge-dropzone { min-height: 245px; }
  .merge-workspace { border-radius: 10px; }
  .trust-strip { margin-top: 30px; }
  .trust-strip article { grid-template-columns: 70px 1fr; }
  .studio-page .seo-section, .home-main > .seo-section { margin-top: 58px; }
  .article-body { padding-left: 0; border-left: 0; }
}

@media (max-width: 520px) {
  .brand-name { font-size: 15px; }
  .site-nav a { padding-inline: 8px; }
  .merge-intro { grid-template-columns: 92px minmax(0, 1fr); column-gap: 14px; }
  .mascot-portrait, .mascot-portrait.compact { width: 92px; height: 90px; }
  .mascot-portrait img, .mascot-portrait.compact img { width: 92px; height: 92px; }
  .intro-facts { grid-template-columns: 1fr; }
  .merge-empty { padding: 14px; }
  .merge-dropzone { padding: 18px; }
  .merge-dropzone strong { font-size: 21px; }
  .workspace-topline, .arrange-toolbar, .merge-actionbar { padding-inline: 15px; }
  .merge-file-list { padding-inline: 15px; }
  .merge-actionbar .button { width: 100%; }
  .feature-grid, .feature-grid.compact { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* PDF-werkplaats 1.3.2: natuurlijke verticale documentflow. */
.merge-main {
  max-width: 1120px;
  padding-top: 46px;
  display: block;
}

.merge-intro {
  max-width: 760px;
  margin: 0 auto 36px;
  display: block;
  text-align: center;
}

.merge-intro .mascot-portrait {
  width: 126px;
  height: 108px;
  margin: 0 auto 18px;
  box-shadow: 4px 4px 0 #d4c8b6;
}

.merge-intro .mascot-portrait img {
  width: 116px;
  height: 116px;
  transform: translateY(5px);
}

.merge-intro h1 {
  max-width: none;
  margin: 10px 0 14px;
}

.merge-intro > p:not(.eyebrow) {
  max-width: 640px;
  margin: 0 auto;
}

.merge-intro .intro-facts {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
}

.merge-workspace {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.trust-strip {
  max-width: 1040px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 253, 248, .56);
}

.trust-strip article {
  padding: 22px 24px;
  display: block;
  border-right: 1px solid var(--line);
  border-bottom: 0;
}

.trust-strip article:last-child { border-right: 0; }
.trust-strip h2 { margin-bottom: 7px; }

.studio-page .seo-section {
  max-width: 1040px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 780px) {
  .merge-main { padding-top: 30px; }

  .merge-intro {
    margin-bottom: 26px;
    display: block;
    text-align: center;
  }

  .merge-intro .mascot-portrait {
    width: 104px;
    height: 94px;
    margin: 0 auto 16px;
  }

  .merge-intro .mascot-portrait img {
    width: 98px;
    height: 98px;
  }

  .merge-intro h1 { font-size: clamp(36px, 10vw, 44px); }

  .merge-intro > p:not(.eyebrow) {
    max-width: 560px;
    margin: 0 auto;
  }

  .merge-intro .intro-facts {
    display: flex;
    justify-content: center;
    gap: 8px 16px;
  }

  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip article {
    padding: 17px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .trust-strip article:last-child { border-bottom: 0; }
}