/* ==========================================================================
   Curodis — gedeelde opmaak
   Gebruikt door index.html en alle detailpagina's.
   Pas hier aan, dan verandert het op elke pagina tegelijk.
   ========================================================================== */

  :root{
    --paper:#FFFFFF;
    --paper-raised:#F5FAFB;
    --paper-deep:#E9F1F3;
    --ink:#0F1A1E;
    --ink-soft:#4E6066;
    --ink-faint:#7C8D92;
    --line:#DAE4E7;
    --line-soft:#E8EFF1;
    --olive:#0E5563;
    --olive-deep:#093B47;
    --olive-tint:#DEEEF1;
    --clay:#9A6017;
    --clay-tint:#F6ECDC;
    --shadow:0 16px 36px -28px rgba(15,26,30,.5);
    --radius:6px;
    --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
    --serif:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  }
  *{box-sizing:border-box}
  [hidden]{display:none!important}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--serif);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4,h5,.sans{font-family:var(--sans);letter-spacing:-.015em;text-wrap:balance}
  h1,h2,h3,h4{margin:0}
  p{margin:0}
  a{color:inherit}
  img{max-width:100%}

  .shell{max-width:1120px;margin:0 auto;padding-inline:20px}
  section{padding-block:clamp(56px,8vw,96px)}
  .kicker{
    font-family:var(--sans);font-size:11.5px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--olive);
    margin-bottom:14px;
  }
  .kicker.olive{color:var(--olive)}
  h2{font-size:clamp(27px,4.2vw,40px);font-weight:600;line-height:1.12}
  .section-lead{font-size:clamp(17px,2.2vw,19px);color:var(--ink-soft);max-width:60ch;margin-top:14px;font-weight:400}

  /* ---------------- nav ---------------- */
  .topbar{
    position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
    background:rgba(255,255,255,.90);
    backdrop-filter:saturate(1.1) blur(8px);
    border-bottom:1px solid var(--line);
  }
  .topbar .shell{display:flex;align-items:center;gap:18px;padding-block:13px}
  .brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;margin-right:auto;min-width:0}
  .wordmark{font-family:var(--sans);font-weight:700;font-size:18px;letter-spacing:.15em;color:var(--olive)}
  .payoff{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--ink-faint);white-space:nowrap}
  .navlinks{display:flex;gap:22px;font-family:var(--sans);font-size:14px;font-weight:500}
  .navlinks a{text-decoration:none;color:var(--ink-soft);padding-block:4px;border-bottom:1.5px solid transparent}
  .navlinks a:hover{color:var(--olive);border-bottom-color:var(--olive)}
  .navlinks a[aria-current="page"]{color:var(--olive);border-bottom-color:var(--olive)}
  .navtools{display:flex;align-items:center;gap:12px}
  .lang{
    display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;
    font-family:var(--sans);font-size:12px;font-weight:600;background:var(--paper-raised);
  }
  .lang button{
    appearance:none;border:0;background:transparent;color:var(--ink-faint);
    padding:5px 9px;cursor:pointer;font:inherit;letter-spacing:.04em;
  }
  .lang button[aria-pressed="true"]{background:var(--olive);color:#FFFFFF}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--sans);font-size:14.5px;font-weight:600;
    padding:11px 18px;border-radius:6px;text-decoration:none;border:1px solid transparent;
    cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease;
  }
  .btn.primary{background:var(--olive);color:#FFFFFF}
  .btn.primary:hover{background:var(--olive-deep)}
  .btn.ghost{background:transparent;color:var(--olive);border-color:var(--line)}
  .btn.ghost:hover{border-color:var(--olive)}
  .btn.small{font-size:13px;padding:8px 14px}
  .btn.light{background:#E9F1F3;color:#0A3944}
  .btn.light:hover{background:#fff}
  :focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:3px}
  @media (max-width:880px){ .navlinks{display:none} .payoff{display:none} }

  /* ---------------- hero ---------------- */
  .hero{padding-block:clamp(44px,6vw,76px) clamp(48px,7vw,84px)}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);gap:clamp(30px,5vw,60px);align-items:center}
  .hero h1{font-size:clamp(34px,5.6vw,58px);font-weight:600;line-height:1.04}
  .hero .lead{margin-top:18px;font-size:clamp(17px,2.3vw,20px);color:var(--ink-soft);max-width:46ch;font-weight:400}
  .hero .cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}
  .hero .undernote{
    margin-top:22px;font-family:var(--sans);font-size:13px;color:var(--ink-faint);
    display:flex;align-items:center;gap:9px;
  }
  .hero .undernote .pip{width:6px;height:6px;border-radius:50%;background:var(--olive);flex:none}
  @media (max-width:860px){ .hero-grid{grid-template-columns:1fr} }

  /* ------------- faux-ui bouwstenen ------------- */
  .mock{
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    font-family:var(--sans);
    overflow:hidden;
  }
  .mock-head{
    display:flex;align-items:center;gap:8px;justify-content:space-between;
    padding:10px 13px;border-bottom:1px solid var(--line-soft);background:var(--paper-deep);
  }
  .mock-title{font-size:12.5px;font-weight:600;letter-spacing:-.005em}
  .mock-body{padding:13px}
  .chip{
    font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.04em;
    padding:3px 8px;border-radius:20px;white-space:nowrap;
  }
  .chip.olive{background:var(--olive-tint);color:var(--olive-deep)}
  .chip.clay{background:var(--clay-tint);color:#8A4222}
  .chip.plain{background:var(--paper-deep);color:var(--ink-soft)}
  .row{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap;padding-block:7px;font-size:13px}
  .row + .row{border-top:1px solid var(--line-soft)}
  .row .lbl{color:var(--ink-soft);min-width:0}
  .row .val{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
  .tick{color:var(--olive);font-weight:700}

  .flow{display:grid;gap:12px}
  .flow-step{display:grid;gap:12px}
  .arrow{
    display:flex;align-items:center;gap:9px;
    font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-faint);padding-left:6px;
  }
  .arrow .line{height:1px;background:var(--line);flex:1}
  .arrow svg{flex:none}

  /* ---------------- waarom ---------------- */
  .band{background:var(--paper-raised);border-block:1px solid var(--line)}
  .three{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(24px,4vw,40px);margin-top:36px}
  .three h3{font-size:19px;font-weight:600;margin-bottom:8px}
  .three p{color:var(--ink-soft);font-size:16px;font-weight:400}
  .three .num{
    font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--olive);margin-bottom:10px;display:block;
  }

  /* ---------------- stappen ---------------- */
  .steps{display:grid;gap:0;margin-top:40px}
  .step{
    display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.05fr);
    gap:clamp(16px,3vw,34px);
    padding-block:26px;border-top:1px solid var(--line);align-items:start;
  }
  .step:last-child{border-bottom:1px solid var(--line)}
  .step .no{
    font-family:var(--sans);font-size:13px;font-weight:700;color:#FFFFFF;
    background:var(--olive);width:28px;height:28px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;margin-top:3px;
  }
  .step h3{font-size:21px;font-weight:600;margin-bottom:7px}
  .step p{color:var(--ink-soft);font-weight:400;max-width:46ch}
  @media (max-width:820px){ .step{grid-template-columns:auto minmax(0,1fr)} .step .mock{grid-column:2} }

  /* ---------------- modules ---------------- */
  .modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:40px}
  .mod{background:var(--paper);padding:22px 20px;display:flex;flex-direction:column;gap:8px}
  .mod-top{display:flex;align-items:center;gap:10px}
  .mod svg{flex:none;color:var(--olive)}
  .mod h3{font-size:16.5px;font-weight:600}
  .mod p{font-size:15px;color:var(--ink-soft);font-weight:400;line-height:1.5}
  .mod .chip{align-self:flex-start;margin-top:2px}
  a.mod{text-decoration:none;color:inherit;transition:background .16s ease}
  a.mod:hover{background:var(--paper-raised)}
  a.mod:hover h3{color:var(--olive)}
  .mod .more{
    margin-top:auto;padding-top:8px;font-family:var(--sans);font-size:13px;
    font-weight:600;color:var(--olive);display:flex;align-items:center;gap:6px;
  }

  /* ---------------- split secties ---------------- */
  .split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(30px,5vw,58px);align-items:center}
  .split ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:11px}
  .split li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-soft);font-weight:400;font-size:16.5px}
  .split li svg{flex:none;margin-top:5px;color:var(--olive)}
  .split li b{color:var(--ink);font-weight:500;font-family:var(--sans);font-size:15.5px}

  .dark{background:#0A3944;color:#DFEAEC;border-block:1px solid #0A3944}
  .dark h2{color:#FFFFFF}
  .dark .kicker{color:#7FC1CE}
  .dark .section-lead,.dark li{color:#B6CCD1}
  .dark li b{color:#FFFFFF}
  .dark li svg{color:#7FC1CE}
  .dark .mock{background:#0E4653;border-color:#1D5A68;box-shadow:none}
  .dark .mock-head{background:#0A3944;border-bottom-color:#1D5A68}
  .dark .mock-title{color:#E6F1F3}
  .dark .row + .row{border-top-color:#1D5A68}
  .dark .row .lbl{color:#A6C0C6}
  .dark .row .val{color:#FFFFFF}
  .dark .chip.olive{background:#1D5A68;color:#CDE5EA}
  .dark .chip.clay{background:#5A4520;color:#F3D7AC}
  .dark .chip.plain{background:#1D5A68;color:#B6CCD1}
  .dark .tick{color:#7FC1CE}
  .dark .note-line{color:#A6C0C6}
  .dark .arrow{color:#A6C0C6}
  .dark .arrow .line{background:#1D5A68}

  /* ---------- herkenning: bon → gegevens ---------- */
  .scan{display:grid;gap:13px;justify-items:start}
  .slip{
    width:min(282px,100%);
    background:#FBFAF6;color:#2B2A27;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    font-size:11.5px;line-height:1.6;
    padding:16px 15px 15px;border-radius:2px;
    box-shadow:0 24px 36px -24px rgba(0,0,0,.7);
    transform:rotate(-1.8deg);transform-origin:left center;
  }
  .slip .shop{font-weight:700;letter-spacing:.07em;font-size:12.5px}
  .slip .sub{color:#7D786E;font-size:10.5px;letter-spacing:.02em}
  .slip .bd{border-top:1px dashed #CBC6BA;margin-block:8px}
  .slip .sr{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
  .slip .sr.tot{font-weight:700;font-size:13px;margin-top:2px}
  .slip .hl{
    outline:1.5px solid #3E9FB4;outline-offset:3px;border-radius:2px;
    background:rgba(62,159,180,.10);
  }
  .scan-legend{
    display:flex;gap:7px;flex-wrap:wrap;align-items:center;
    font-family:var(--sans);font-size:11px;color:#A6C0C6;letter-spacing:.02em;line-height:1.45;
  }
  .scan-legend .swatch{width:9px;height:9px;border-radius:2px;background:#3E9FB4;flex:none}
  .scan-legend > span:last-child{min-width:0;flex:1 1 180px}
  .scan > *{max-width:100%}
  .scan-legend{justify-self:stretch}
  .scan .arrow{padding-left:2px;justify-self:stretch}

  /* ---------------- branches ---------------- */
  .branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin-top:38px}
  .branch{
    background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);
    padding:20px 18px;display:flex;flex-direction:column;gap:7px;
  }
  .branch h3{font-size:16.5px;font-weight:600}
  .branch p{font-size:15px;color:var(--ink-soft);font-weight:400;line-height:1.5}
  .branch .tag{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--olive);font-weight:600}

  /* ---------------- sterke-punten banner ---------------- */
  .usp{background:var(--olive-deep);color:#DFEAEC}
  .usp .shell{display:flex;align-items:center;gap:18px;padding-block:11px;min-height:52px}
  .usp-slides{display:grid;flex:1 1 auto;min-width:0}
  .usp-slide{
    grid-area:1 / 1;opacity:0;transition:opacity .45s ease;
    font-size:14.5px;line-height:1.45;color:#B6CCD1;
  }
  .usp-slide[data-on="1"]{opacity:1}
  .usp-slide b{font-family:var(--sans);font-weight:600;color:#FFFFFF}
  .usp-dots{display:flex;gap:7px;flex:none}
  .usp-dots button{
    appearance:none;border:0;padding:0;width:7px;height:7px;border-radius:50%;
    background:#2C6674;cursor:pointer;
  }
  .usp-dots button[aria-selected="true"]{background:#7FC1CE}
  .usp-dots button:hover{background:#5CA5B4}
  @media (max-width:640px){ .usp-slide{font-size:13.5px} .usp-dots{display:none} }
  @media (prefers-reduced-motion:reduce){ .usp-slide{transition:none} }

  /* ---------------- voordelenbord ---------------- */
  .board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{
    border:1px solid var(--line);border-radius:6px;padding:13px;
    background:var(--paper);display:grid;gap:3px;align-content:start;
  }
  .tile .tl{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--ink-soft);line-height:1.3}
  .tile .tv{
    font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:-.015em;
    font-variant-numeric:tabular-nums;margin-top:3px;
  }
  .tile .ts{font-size:11.5px;color:var(--ink-faint);line-height:1.4}
  .tile.ok{background:#F1F8F4;border-color:#C2DFCE}
  .tile.ok .tv{color:#1E6A45}
  .tile.warn{background:var(--clay-tint);border-color:#E5CFB1}
  .tile.warn .tv{color:#8A5614}
  .tile.neutral .tv{color:var(--olive)}
  @media (max-width:520px){ .board{grid-template-columns:1fr} }
  .claim{
    margin-top:22px;border-left:2px solid var(--olive);padding-left:18px;
    font-size:17px;color:var(--ink);
  }
  .claim b{font-family:var(--sans);font-weight:600}
  .caveat{margin-top:18px;font-size:14px;color:var(--ink-faint);max-width:56ch}

  /* ---------------- archief ---------------- */
  .search-bar{
    display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:6px;
    padding:10px 12px;background:var(--paper);font-size:13.5px;color:var(--ink);
    font-family:var(--sans);
  }
  .search-bar svg{color:var(--ink-faint);flex:none}
  .search-bar .cursor{width:1px;height:15px;background:var(--olive);margin-left:-3px}
  .tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
  .tagrow .tg{
    font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.03em;
    background:var(--olive-tint);color:var(--olive-deep);padding:3px 8px;border-radius:3px;
  }
  .res{margin-top:13px;border-top:1px solid var(--line-soft)}
  .res .r{
    display:flex;justify-content:space-between;gap:12px;padding-block:9px;
    border-bottom:1px solid var(--line-soft);font-size:12.5px;
  }
  .res .r .f{font-family:var(--sans);font-weight:600;min-width:0}
  .res .r .f span{display:block;font-weight:400;color:var(--ink-faint);font-size:11px;margin-top:1px}
  .res .r .d{color:var(--ink-faint);white-space:nowrap;font-variant-numeric:tabular-nums}
  .path{
    margin-top:12px;display:flex;justify-content:space-between;gap:10px;align-items:center;
    flex-wrap:wrap;font-size:11.5px;color:var(--ink-faint);font-family:var(--sans);
  }

  /* ---------------- support ---------------- */
  .sw{
    font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.06em;
    padding:3px 9px;border-radius:20px;white-space:nowrap;
  }
  .sw.off{background:var(--paper-deep);color:var(--ink-faint)}
  .sw.on{background:var(--olive-tint);color:var(--olive-deep)}
  .hiddenbox{
    margin-top:12px;border:1px dashed var(--line);border-radius:6px;padding:11px 12px;
    font-family:var(--sans);font-size:12px;color:var(--ink-soft);line-height:1.5;
  }
  .hiddenbox b{
    display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:5px;font-weight:600;
  }

  /* ---------------- binnenkort ---------------- */
  .soon{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px}
  .soon .s{
    border:1px solid var(--line);border-radius:20px;padding:9px 15px;background:var(--paper);
    font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);
  }
  .soon .s b{color:var(--ink);font-weight:600}

  /* ---------------- koppelingen ---------------- */
  .kop{margin-top:36px;display:grid;gap:30px}
  .kop-group{
    display:grid;
    grid-template-columns:minmax(150px,.8fr) minmax(0,2fr) 132px;
    column-gap:0;
  }
  .kop-group h3{
    grid-column:1 / -1;
    font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--olive);margin-bottom:6px;
  }
  .kop-row{display:contents}
  .kop-row > *{padding-block:13px;border-top:1px solid var(--line)}
  .kop-group > .kop-row:last-child > *{border-bottom:1px solid var(--line)}
  .kop-row .nm{font-family:var(--sans);font-weight:600;font-size:15.5px;padding-right:22px}
  .kop-row .ds{color:var(--ink-soft);font-size:15px;line-height:1.5;padding-right:22px}
  .kop-row .st{display:flex;align-items:center;justify-content:flex-end}
  .kop-foot{
    margin-top:26px;display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;
    font-family:var(--sans);font-size:13px;color:var(--ink-faint);
  }
  .kop-foot .key{display:flex;align-items:center;gap:7px}
  .kop-note{margin-top:14px;color:var(--ink-soft);font-size:15.5px;max-width:62ch}
  @media (max-width:660px){
    .kop-group{display:block}
    .kop-row{
      display:grid;grid-template-columns:minmax(0,1fr) max-content;
      gap:4px 14px;align-items:center;
      padding-block:13px;border-top:1px solid var(--line);
    }
    .kop-group > .kop-row:last-child{border-bottom:1px solid var(--line)}
    .kop-row > *{padding-block:0;border-top:0;padding-right:0}
    .kop-group > .kop-row:last-child > *{border-bottom:0}
    .kop-row .nm{grid-column:1;grid-row:1}
    .kop-row .st{grid-column:2;grid-row:1}
    .kop-row .ds{grid-column:1 / -1;grid-row:2}
  }

  /* ---------------- over ---------------- */
  .about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(28px,5vw,56px)}
  .about p + p{margin-top:16px}
  .about .quote{
    font-size:clamp(20px,2.8vw,25px);line-height:1.32;font-weight:400;color:var(--ink);
    border-left:2px solid var(--olive);padding-left:20px;
  }
  .about .quote span{font-style:italic;color:var(--olive)}
  .facts{display:grid;gap:0;margin-top:26px;border-top:1px solid var(--line)}
  .facts .f{display:flex;justify-content:space-between;gap:16px;padding-block:11px;border-bottom:1px solid var(--line);font-size:15.5px}
  .facts .f dt{color:var(--ink-faint);font-family:var(--sans);font-size:13.5px;letter-spacing:.02em}
  .facts .f dd{margin:0;text-align:right;font-weight:400}

  /* ---------------- naamopbouw ---------------- */
  .namemark{
    margin-top:24px;background:var(--paper);border:1px solid var(--line);
    border-radius:var(--radius);padding:20px;display:grid;gap:9px;
  }
  .nmrow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
  .nmw{
    font-family:var(--sans);font-size:21px;font-weight:600;color:var(--olive);
    font-style:italic;letter-spacing:.01em;
  }
  .nmd{font-size:14.5px;color:var(--ink-soft);min-width:0}
  .nmop{font-family:var(--sans);font-size:13px;color:var(--ink-faint);letter-spacing:.12em}
  .nmres{
    margin-top:5px;padding-top:14px;border-top:1px solid var(--line-soft);
    font-family:var(--sans);font-size:22px;font-weight:700;letter-spacing:.17em;color:var(--olive-deep);
  }
  .nmres small{
    display:block;font-family:var(--serif);font-size:13.5px;font-weight:400;
    letter-spacing:0;color:var(--ink-faint);margin-top:5px;
  }

  /* ---------------- demo ---------------- */
  form{margin-top:30px;display:grid;gap:14px}
  .field{display:grid;gap:6px}
  .field label{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-soft);letter-spacing:.01em}
  .field input,.field select,.field textarea{
    font-family:var(--serif);font-size:16px;color:var(--ink);
    background:var(--paper-raised);border:1px solid var(--line);border-radius:6px;
    padding:11px 12px;width:100%;
  }
  .field textarea{min-height:96px;resize:vertical}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--olive);outline:none;box-shadow:0 0 0 3px rgba(14,85,99,.14)}
  .form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
  .form-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
  .form-foot .note-line{font-size:13.5px;color:var(--ink-faint);font-family:var(--sans);max-width:38ch}
  .sent{
    background:var(--olive-tint);border:1px solid #B6D6DC;border-radius:var(--radius);
    padding:20px;display:grid;gap:10px;
  }
  .sent h3{font-size:18px;font-weight:600;color:var(--olive-deep)}
  .sent p{font-size:15.5px;color:#2F545D;font-weight:400}
  .sent .sent-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

  /* ---------------- footer ---------------- */
  footer{background:var(--paper-deep);border-top:1px solid var(--line);padding-block:40px 34px}
  .foot-grid{display:flex;gap:26px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
  .foot-brand .wordmark{font-size:17px}
  .foot-brand p{font-size:14px;color:var(--ink-faint);margin-top:8px;font-style:italic}
  .foot-cols{display:flex;gap:44px;flex-wrap:wrap;font-family:var(--sans);font-size:14px}
  .foot-cols h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin-bottom:10px}
  .foot-cols a,.foot-cols span{display:block;color:var(--ink-soft);text-decoration:none;margin-bottom:6px}
  .foot-cols a:hover{color:var(--olive)}
  .foot-bottom{
    margin-top:30px;padding-top:18px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
    font-family:var(--sans);font-size:12.5px;color:var(--ink-faint);
  }

/* ==========================================================================
   Detailpagina's — aanvullingen
   ========================================================================== */

  /* kruimelpad */
  .crumb{
    font-family:var(--sans);font-size:12.5px;color:var(--ink-faint);
    display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px;
  }
  .crumb a{color:var(--ink-soft);text-decoration:none}
  .crumb a:hover{color:var(--olive)}
  .crumb .sep{color:var(--line)}

  /* subpagina-hero: smaller dan de homepage-hero */
  .subhero{padding-block:clamp(34px,5vw,54px) clamp(40px,6vw,64px)}
  .subhero h1{font-size:clamp(30px,4.8vw,46px);font-weight:600;line-height:1.08}
  .subhero .lead{margin-top:16px;font-size:clamp(17px,2.2vw,19.5px);color:var(--ink-soft);max-width:54ch;font-weight:400}
  .subhero .cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}

  /* kaartenraster voor schermen naast elkaar */
  .mocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-top:36px}

  /* tabbladenbalk in een nagebouwd scherm */
  .tabs{display:flex;gap:2px;flex-wrap:wrap;padding:9px 11px;background:var(--paper-deep);border-bottom:1px solid var(--line-soft)}
  .tabs span{
    font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--ink-soft);
    padding:4px 9px;border-radius:4px;white-space:nowrap;
  }
  .tabs span[data-on]{background:var(--paper);color:var(--olive-deep);font-weight:600;box-shadow:0 1px 0 rgba(15,26,30,.06)}

  /* tegelrooster zoals het magazijnbord */
  .grid-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
  .gt{
    border:1px solid var(--line);border-radius:6px;background:var(--paper);
    padding:11px 12px;display:grid;gap:2px;align-content:start;
  }
  .gt .n{font-family:var(--sans);font-size:12.5px;font-weight:600}
  .gt .d{font-size:11px;color:var(--ink-faint);line-height:1.4}
  .gt .c{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--olive);margin-top:3px;font-variant-numeric:tabular-nums}

  /* statuslijn (autopark, ticket) */
  .track{display:grid;gap:0;margin-top:2px}
  .tr{display:grid;grid-template-columns:18px minmax(0,1fr) max-content;gap:10px;align-items:center;padding-block:8px;font-size:12.5px}
  .tr + .tr{border-top:1px solid var(--line-soft)}
  .tr .dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--line);margin-left:3px}
  .tr .dot.done{background:var(--olive);border-color:var(--olive)}
  .tr .dot.now{border-color:var(--olive);background:var(--paper)}
  .tr .nm{font-family:var(--sans);font-weight:500;color:var(--ink);min-width:0}
  .tr .when{color:var(--ink-faint);font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
  .tr.todo .nm{color:var(--ink-faint);font-weight:400}

  /* telefoonscherm voor de app-pagina */
  .phone{
    width:min(268px,100%);border:1px solid var(--line);border-radius:22px;
    background:var(--paper);box-shadow:var(--shadow);overflow:hidden;font-family:var(--sans);
  }
  .phone .bar{
    background:var(--olive);color:#fff;padding:12px 15px 11px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  .phone .bar b{font-size:13.5px;font-weight:600}
  .phone .bar span{font-size:11px;color:#BFE0E7}
  .phone .pb{padding:13px 15px 16px;display:grid;gap:9px}
  .phone .pr{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding-block:6px;border-bottom:1px solid var(--line-soft)}
  .phone .pr .k{color:var(--ink-soft)}
  .phone .pr .v{font-weight:600;font-variant-numeric:tabular-nums}
  .phone .act{
    margin-top:4px;background:var(--olive-tint);color:var(--olive-deep);
    border-radius:6px;padding:9px 11px;font-size:12px;font-weight:600;text-align:center;
  }

  /* kentekenplaat */
  .plate{
    display:inline-flex;align-items:stretch;border-radius:4px;overflow:hidden;
    border:1px solid #B79A1E;font-family:var(--sans);font-weight:700;letter-spacing:.08em;
  }
  .plate .eu{background:#0A3A8F;color:#F5D311;font-size:9px;padding:4px 4px 3px;display:flex;align-items:flex-end;justify-content:center;min-width:16px}
  .plate .nr{background:#F5D311;color:#1A1A1A;font-size:13.5px;padding:4px 9px}

  /* veelgestelde vragen */
  .faq{margin-top:34px;border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{
    cursor:pointer;list-style:none;padding-block:16px;
    font-family:var(--sans);font-size:17px;font-weight:600;color:var(--ink);
    display:flex;justify-content:space-between;gap:16px;align-items:center;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:"+";font-weight:400;font-size:21px;color:var(--olive);flex:none;line-height:1;
  }
  .faq details[open] summary::after{content:"−"}
  .faq summary:hover{color:var(--olive)}
  .faq .a{padding-bottom:18px;color:var(--ink-soft);max-width:68ch}
  .faq .a p + p{margin-top:12px}

  /* afsluitend blok met oproep */
  .endcta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .endcta .t{min-width:0}
  .endcta h2{font-size:clamp(23px,3.2vw,31px)}
  .endcta p{color:#B6CCD1;margin-top:10px;max-width:52ch}
  .endcta .b{display:flex;gap:10px;flex-wrap:wrap}

  /* verwante pagina's */
  .related{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-top:32px}
  .rel{
    border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
    padding:16px 17px;text-decoration:none;color:inherit;display:grid;gap:5px;
    transition:border-color .16s ease,background .16s ease;
  }
  .rel:hover{border-color:var(--olive);background:var(--paper-raised)}
  .rel b{font-family:var(--sans);font-size:15.5px;font-weight:600}
  .rel span{font-size:14px;color:var(--ink-soft);line-height:1.45}

  /* losse opmerking onder een blok */
  .note-line{font-size:13.5px;color:var(--ink-faint);font-family:var(--sans)}