@font-face{font-family:"Raleway";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/raleway-300.woff2) format("woff2")}
  @font-face{font-family:"Raleway";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/raleway-500.woff2) format("woff2")}
  @font-face{font-family:"Raleway";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/raleway-600.woff2) format("woff2")}
  @font-face{font-family:"Raleway";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/raleway-800.woff2) format("woff2")}
  @font-face{font-family:"Spectral";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/spectral-500.woff2) format("woff2")}
  @font-face{font-family:"Spectral";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/spectral-600.woff2) format("woff2")}

  /* Croan huisstijl — green + blush-pink, organic blobs, speech bubble, Raleway display + Spectral quote.
     Standalone reader (no site chrome) that carries the real brand. Deliberate single light world. */
  :root{
    --ink:#03281d;          /* donkergroen */
    --green:#00a776;        /* groen */
    --green-deep:#019268;
    --green-mid:#55c4a4;     /* middengroen */
    --pink:#fad2cf;          /* roze */
    --pink-tint:#fcebea;     /* lichtroze */
    --mint:#d8ece8;          /* mint */
    --mint-tint:#ebf4f3;
    --yellow:#fdeebd;        /* lichtgeel */
    --coral:#ee7e75;         /* signaalroze */
    --body:#3c4b45;
    --muted:#516a60;
    --muted-dim:#93a89f;
    --panel:#ffffff;
    --panel-tint:#f4faf8;
    --hair:rgba(3,40,29,.10);
    --hair-strong:rgba(3,40,29,.16);
    --paper:#ffffff;
    --sans:"Raleway",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --serif:"Spectral",Georgia,"Times New Roman",serif;
    --r-btn:13px;
    --shadow-book:0 1px 3px rgba(3,40,29,.10),0 18px 40px rgba(3,40,29,.16),0 40px 90px rgba(3,40,29,.10);
    --shadow-soft:0 1px 2px rgba(3,40,29,.05),0 6px 20px rgba(3,40,29,.07);
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;font-family:var(--sans);font-weight:300;color:var(--body);
    background:radial-gradient(130% 100% at 50% -10%,#f6fbf9 0%,var(--mint-tint) 62%,var(--mint) 100%);
    -webkit-font-smoothing:antialiased;overflow:hidden;
  }

  .stage{position:relative;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;isolation:isolate;
    opacity:0;transition:opacity .6s ease .05s}
  .stage.lit{opacity:1}

  /* soft brand blobs living in the reading room corners */
  /* One soft light middengroen wave (the Croan header shape), bleeding from a corner. */
  .deco{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
  .deco .wave{position:absolute;right:0;bottom:0;width:min(70vw,620px);aspect-ratio:2.216;
    transform:translate(60%,22%);
    background:url("wave-mid.svg") left top/contain no-repeat;opacity:.1}

  /* ---------- Top bar ---------- */
  .topbar{position:relative;z-index:3;display:flex;align-items:center;gap:1rem;
    padding:.8rem clamp(.9rem,3vw,1.7rem);border-bottom:1px solid var(--hair)}
  .brand{display:flex;align-items:center}
  .logo{height:30px;width:auto;display:block}
  .doc-title{margin-inline:auto;display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:1rem;color:var(--ink);letter-spacing:.01em}
  .tag{font-weight:600;text-transform:uppercase;font-size:.58rem;letter-spacing:.15em;color:var(--green-deep);
    background:var(--mint);border-radius:999px;padding:.22rem .55rem}
  .top-actions{display:flex;align-items:center;gap:.5rem}

  .btn{font-weight:600;font-size:.85rem;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;
    background:var(--panel);border:1px solid var(--hair-strong);border-radius:var(--r-btn);padding:.5rem .85rem;cursor:pointer;
    box-shadow:var(--shadow-soft);transition:border-color .18s,background .18s,color .18s,transform .06s}
  .btn:hover{border-color:var(--green);background:var(--panel-tint);color:var(--green-deep)}
  .btn:active{transform:translateY(1px)}
  .btn svg{width:16px;height:16px;flex:none}
  .btn.icon{padding:.5rem;border-radius:50%}
  .btn.primary{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 6px 18px rgba(0,167,118,.28)}
  .btn.primary:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff}

  /* ---------- Reader ---------- */
  .reader{position:relative;z-index:1;min-height:0;display:flex;align-items:center;justify-content:center;
    gap:clamp(.25rem,2vw,1.5rem);padding:clamp(.6rem,2.4vh,1.5rem) clamp(.5rem,2vw,1.4rem)}
  .book-wrap{flex:1 1 auto;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;
    transition:transform .28s ease;transform-origin:center center}
  #book{margin:auto;filter:drop-shadow(var(--shadow-book))}
  #book .stf__item,#book .pg{background:var(--paper)}
  #book .pg img{width:100%;height:100%;object-fit:cover;display:block}
  .stage.maximized{position:fixed;inset:0;z-index:9999;background:var(--mint-tint)}

  .nav{z-index:3;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
    color:var(--ink);background:var(--panel);border:1px solid var(--hair-strong);box-shadow:var(--shadow-soft);
    opacity:.65;transition:opacity .18s,border-color .18s,color .18s,background .18s}
  .reader:hover .nav{opacity:1}
  .nav:hover{border-color:var(--green);color:var(--green-deep);background:var(--panel-tint)}
  .nav svg{width:20px;height:20px}
  .nav:disabled{opacity:.2;cursor:default}

  /* ---------- Control bar ---------- */
  .controlbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:.9rem;padding:.4rem 1rem 1rem}
  .cluster{display:flex;align-items:center;gap:.3rem;background:var(--panel);border:1px solid var(--hair);border-radius:999px;
    padding:.32rem .42rem;box-shadow:var(--shadow-soft)}
  .cluster .ib{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;
    cursor:pointer;transition:background .16s,color .16s}
  .cluster .ib:hover{background:var(--mint);color:var(--green-deep)}
  .cluster .ib:disabled{opacity:.3;cursor:default;background:transparent}
  .cluster .ib svg{width:17px;height:17px}
  .pageind{font-size:.82rem;color:var(--muted);min-width:7.5rem;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.02em;padding:0 .35rem}
  .pageind b{color:var(--ink);font-weight:600}

  .hint{position:absolute;left:50%;bottom:calc(100% + .55rem);transform:translateX(-50%);white-space:nowrap;font-size:.74rem;color:var(--muted);z-index:6;
    background:var(--panel);border:1px solid var(--hair);border-radius:999px;padding:.3rem .7rem;box-shadow:var(--shadow-soft);opacity:0;transition:opacity .4s;pointer-events:none}
  .hint.show{opacity:1}

  /* ---------- Email gate ---------- */
  .gate{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:1.5rem;overflow:hidden;
    background:radial-gradient(120% 90% at 50% 6%,#f8fcfa,#eef6f3 80%);
    transition:opacity .5s ease,visibility .5s}
  .gate.hidden{opacity:0;visibility:hidden}
  .gate-wave{position:absolute;right:0;bottom:0;width:min(86vw,640px);aspect-ratio:2.216;z-index:0;pointer-events:none;
    transform:translate(58%,20%);
    background:url("wave-mid.svg") left top/contain no-repeat;opacity:.16}
  .gate-inner{position:relative;z-index:1;width:min(31rem,100%)}
  .gate-card{position:relative;z-index:1;background:var(--panel);border:1px solid var(--hair);border-radius:26px;
    padding:clamp(1.6rem,4vw,2.5rem);box-shadow:0 30px 70px rgba(3,40,29,.18),0 4px 14px rgba(3,40,29,.08);text-align:left;
    transform:translateY(0) scale(1);transition:transform .5s ease,opacity .5s}
  .gate.hidden .gate-card{transform:translateY(10px) scale(.98);opacity:0}
  .gate-logo{height:34px;width:auto;display:block;margin-bottom:1.3rem}

  .gate-title{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:-.012em;line-height:1.04;
    font-size:clamp(1.4rem,5vw,2.2rem);margin:0 0 .6rem;white-space:nowrap;color:var(--ink)}
  .gate-sub{margin:0 0 1.4rem;max-width:26rem;color:var(--muted);line-height:1.55;font-size:1rem;font-weight:400}
  .gate-form{display:flex;flex-direction:column;gap:.6rem}
  .gate-form input{font-family:var(--sans);font-weight:400;font-size:1rem;color:var(--ink);background:var(--panel-tint);
    border:1px solid var(--hair-strong);border-radius:12px;padding:.85rem 1rem;width:100%;transition:border-color .16s,box-shadow .16s,background .16s}
  .gate-form input::placeholder{color:var(--muted-dim)}
  .gate-form input:focus{outline:none;background:var(--panel);border-color:var(--green);box-shadow:0 0 0 3px rgba(0,167,118,.2)}
  .gate-form input[aria-invalid="true"]{border-color:var(--coral);box-shadow:0 0 0 3px rgba(238,126,117,.22)}
  .gate-form .btn.primary{justify-content:center;padding:.9rem;font-size:.98rem}
  .gate-err{min-height:1.1rem;font-size:.8rem;color:#d64a3f;text-align:left;padding-left:.2rem;font-weight:500}
  .gate-fineprint{margin:1.25rem 0 0;font-size:.72rem;color:var(--muted-dim);line-height:1.55}
  .gate-fineprint b{color:var(--muted);font-weight:600}

  @media (max-width:620px){
    .doc-title{display:none}
    .btn .lbl{display:none}
    .btn{padding:.5rem}
    .pageind{min-width:6rem}
  }
  @media (prefers-reduced-motion:reduce){*{transition-duration:.001ms !important}}
  :focus-visible{outline:2px solid var(--green);outline-offset:2px}

  .dx--gids-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
  .gate-form .btn.primary[disabled]{opacity:.6;cursor:default}
  .logo svg,.gate-logo svg{height:100%;width:auto;display:block}
  .gate-inner{width:min(28rem,100%)}
  .gate-fineprint{color:var(--muted)}
  .gate-fineprint a{color:var(--green-deep);text-decoration:underline}
  html.gids-unlocked .gate{display:none}
  /* Reading view — mirrors the site's content typography (Theme Options tokens: h2 700, h3 600,
     Raleway/300 body, heading #02281d, primary #00A776, site blockquote = green left border + italic). */
  .gids-tekst{position:fixed;inset:0;z-index:30;background:#fff;display:none;flex-direction:column;font-family:var(--sans)}
  .gids-tekst.open{display:flex}
  .gids-tekst-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem clamp(.9rem,3vw,1.6rem);border-bottom:1px solid var(--hair);background:var(--panel)}
  .gids-tekst-title{font-weight:700;color:var(--ink);font-size:1rem}
  .gids-tekst-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:clamp(1.6rem,5vw,3.5rem) 1.2rem clamp(3rem,7vw,5rem)}
  .gids-tekst-col{max-width:42rem;margin:0 auto;color:var(--body);font-weight:300;font-size:clamp(1.02rem,2.3vw,1.12rem);line-height:1.72}
  .gids-tekst-h1{font-weight:800;color:var(--ink);font-size:clamp(1.95rem,5.5vw,3rem);line-height:1.08;letter-spacing:-.015em;text-wrap:balance;margin:0 0 1.5rem}
  .gids-tekst-col>section:first-of-type>p:first-child{font-size:1.2em;line-height:1.6;color:var(--ink)}
  .gids-tekst-col section+section{margin-top:2.6rem;padding-top:2.6rem;border-top:1px solid var(--hair)}
  .gids-tekst h2{font-weight:800;color:var(--ink);font-size:clamp(1.5rem,4vw,2rem);line-height:1.18;letter-spacing:-.01em;text-wrap:balance;margin:0 0 1rem}
  .gids-tekst h2::after{content:"";display:block;width:2.4rem;height:3px;border-radius:2px;background:var(--green);margin-top:.55rem}
  .gids-tekst h3{font-weight:700;color:var(--green-deep);font-size:clamp(1.15rem,2.8vw,1.35rem);line-height:1.35;margin:1.9rem 0 .5rem}
  .gids-tekst p{margin:0 0 1.05rem}
  .gids-tekst strong{color:var(--ink);font-weight:700}
  .gids-tekst a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}
  .gids-tekst ul{list-style:none;margin:0 0 1.2rem;padding:0}
  .gids-tekst li{position:relative;padding-left:1.6rem;margin:.45rem 0;line-height:1.6}
  .gids-tekst li::before{content:"";position:absolute;left:.15rem;top:.6em;width:.5rem;height:.5rem;border-radius:50%;background:var(--green-mid)}
  .gids-tekst blockquote{margin:1.9rem 0;padding:.4rem 0 .4rem 1.4rem;border-left:4px solid var(--green);color:var(--ink);font-size:1.18em;font-style:italic;line-height:1.5}
  .gids-tekst blockquote cite{display:block;margin-top:.6rem;font-size:.72em;font-style:normal;font-weight:600;color:var(--muted)}
  .gids-tekst-foot{margin-top:2.8rem;padding-top:1.3rem;border-top:1px solid var(--hair);font-size:.95rem;font-weight:400}