/* ============================================================
   PROOF - www.ikag.be/proof

   EEN EIGEN BESTAND EN NIET INLINE, en dat is hier meer dan smaak: deze stijl
   staat op /proof en op /proof/methode, dus zo haalt de browser hem een keer.
   Zelfde afweging als par.css. Versienummer in de link, want dit bestand
   wordt met een lange cachetijd geserveerd.

   DE TOKENS ZIJN DIE VAN IKAg en niet van PitchPoint: koppen in inkt met rood
   als accent. Zie CLAUDE.md, Huisstijl - en de skill ikag-design, die voorgaat
   op wat hier staat.

   DE LETTERTYPES KOMEN UIT /assets/fonts/ en niet bij Google; de iconen uit
   /assets/phosphor/ en niet van unpkg. Het prototype laadde allebei van
   buitenaf en dat zou check-conventies.sh rood zetten.
   ============================================================ */

:root{
  --ikag-red:#FC3D39; --ikag-red-ink:#C9211D; --ikag-bordeaux:#8D0402;
  --ikag-bordeaux-deep:#6E0301; --ikag-black:#140100;
  --ikag-purple:#B499FF; --ikag-purple-ink:#4b3a86; --ikag-violet:#ECE5FF;
  --ikag-cream:#F5F2EC; --ikag-cream-2:#EFEAE0; --ikag-white:#fff;
  --ikag-sage:#DEE8DA; --ikag-lavender:#ECE5FF; --ikag-pink:#FAE5E9; --ikag-sand:#F1E7D6;
  --text-body:#3a2422; --text-heading:var(--ikag-black); --text-muted:#7a5e5c;
  --text-on-dark:#fdeceb; --text-eyebrow:var(--ikag-red-ink);
  --border-hairline:rgba(20,1,0,.08); --accent-underline:var(--ikag-purple);
  --font-display:'Libre Caslon Display',Georgia,'Times New Roman',serif;
  --font-accent:'Instrument Serif',Georgia,serif;
  --font-body:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --text-hero:clamp(2.5rem,6.2vw,5rem); --text-h2:clamp(1.9rem,4.4vw,3.2rem);
  --text-h3:clamp(1.5rem,2.6vw,2rem); --text-lead:clamp(1.05rem,1.7vw,1.3rem);
  --radius-input:14px; --radius-card:22px; --radius-panel:30px; --radius-pill:999px;
  --shadow-header:0 6px 26px rgba(20,1,0,.09);
  --shadow-chip:0 8px 22px rgba(141,4,2,.10);
  --shadow-card-hover:0 18px 40px rgba(141,4,2,.12);
  --shadow-cta:0 22px 48px rgba(141,4,2,.28);
  --ease-out:cubic-bezier(.2,.7,.3,1);
  --container:1240px; --gutter:clamp(20px,6%,96px); --section-y:clamp(3.5rem,7vw,6rem);
}

/* ---- Basis ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ikag-cream);color:var(--text-body);
  font-family:var(--font-body);font-size:1.02rem;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;color:var(--text-heading);
  line-height:1.04;letter-spacing:-.01em;margin:0}
p{margin:0 0 1rem}
a{color:inherit}
.wrap{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sect{padding-block:var(--section-y)}
.eyebrow{font-weight:600;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-eyebrow);display:block}
h2.h2{font-size:var(--text-h2);margin:.8rem 0 .8rem;max-width:22ch}
.lead{font-size:var(--text-lead);line-height:1.55;max-width:60ch}
.muted{color:var(--text-muted)}
.mono-num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:60;background:#fff;padding:.7rem 1.1rem;border-radius:var(--radius-pill)}

/* Signatuur: een violette boog, exact een keer op de pagina. Zie CLAUDE.md,
   Iconen en illustraties - nooit twee keer in dezelfde kop. */
.mark{position:relative;white-space:nowrap}
.mark svg{position:absolute;left:-1%;bottom:-.14em;width:102%;height:.24em;overflow:visible;pointer-events:none}
.mark path{stroke:var(--accent-underline);stroke-width:3.4;fill:none;stroke-linecap:round;
  stroke-dasharray:300;animation:draw 1s cubic-bezier(.3,.7,.3,1) .35s both}
@keyframes draw{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}

/* ---- Header ---- */
header{position:sticky;top:0;z-index:40;padding:14px var(--gutter)}
.nav{max-width:var(--container);margin:0 auto;background:#fff;border-radius:var(--radius-pill);
  box-shadow:var(--shadow-header);display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.5rem .7rem .5rem 1.3rem}
.nav img{height:24px;display:block}
.nav-left{display:flex;align-items:center;gap:.9rem}
.nav-tag{font-weight:700;font-size:.72rem;letter-spacing:.14em;color:var(--ikag-bordeaux);
  background:var(--ikag-sand);padding:.32rem .75rem;border-radius:var(--radius-pill)}
.nav-right{display:flex;align-items:center;gap:1.1rem}
.progress{display:flex;align-items:center;gap:.45rem}
.langs{display:flex;gap:2px;background:var(--ikag-cream-2);border-radius:var(--radius-pill);padding:3px}
/* Echte links en geen knoppen: elke taal is een eigen indexeerbare URL, en dat
   moet een crawler kunnen volgen. Zie de hreflang-set in index.php. */
.lang{font-family:var(--font-body);font-size:.78rem;font-weight:700;letter-spacing:.06em;
  padding:.34rem .62rem;border:0;border-radius:var(--radius-pill);background:transparent;
  color:var(--text-muted);cursor:pointer;text-decoration:none;
  min-height:38px;display:inline-flex;align-items:center;
  transition:background .18s var(--ease-out),color .18s var(--ease-out)}
.lang:hover{color:var(--ikag-red)}
.lang[aria-current="true"]{background:var(--ikag-red);color:#fff}
.lang:focus-visible{outline:3px solid var(--ikag-purple);outline-offset:2px}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(20,1,0,.14);transition:background .3s}
.dot.on{background:var(--ikag-red)}
.progress span{font-size:.8rem;color:var(--text-muted);margin-left:.3rem}

/* ---- Knoppen ---- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body);
  font-weight:600;font-size:1rem;padding:.85rem 1.5rem;border-radius:var(--radius-pill);
  border:0;text-decoration:none;cursor:pointer;min-height:44px;
  transition:background .2s var(--ease-out),transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.btn-primary{background:var(--ikag-red);color:#fff}
.btn-primary:hover{background:var(--ikag-red-ink);transform:translateY(-2px);box-shadow:var(--shadow-cta)}
.btn-secondary{background:var(--ikag-purple);color:#241a4d}
.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(75,58,134,.28)}
.btn-ghost{background:transparent;color:var(--ikag-black);border:1px solid var(--border-hairline)}
.btn-ghost:hover{border-color:var(--ikag-red);color:var(--ikag-red)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn:focus-visible,.chip:focus-visible,input:focus-visible{outline:3px solid var(--ikag-purple);outline-offset:2px}

/* ---- Hero ---- */
.hero{padding-block:clamp(1.5rem,4vw,3rem) clamp(2rem,4vw,3rem)}
.hero h1{font-size:var(--text-hero);margin:1rem 0 0;max-width:16ch}
.hero .lead{margin-top:1.5rem}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.ladder{background:#fff;border:1px solid var(--border-hairline);border-radius:var(--radius-panel);
  padding:1.6rem;box-shadow:var(--shadow-chip)}
.ladder h4{font-size:1rem;font-family:var(--font-body);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--text-muted);margin-bottom:1rem}
.rung{display:flex;gap:.9rem;align-items:flex-start;padding:.8rem 0;border-top:1px solid var(--border-hairline)}
.rung:first-of-type{border-top:0}
.rung b{font-family:var(--font-display);font-size:1.15rem;color:var(--ikag-red);min-width:1.6rem}
.rung div{font-size:.93rem}
.rung strong{display:block;color:var(--ikag-black);font-weight:600}

/* ---- Formulier ---- */
.form-sect{background:var(--ikag-cream-2)}
.qgroup{background:#fff;border:1px solid var(--border-hairline);border-radius:var(--radius-card);
  padding:clamp(1.3rem,2.5vw,2rem);margin-bottom:1.4rem}
.qgroup > .eyebrow{margin-bottom:1.3rem}
.q{padding:1.1rem 0;border-top:1px dashed rgba(180,153,255,.55)}
.q:first-of-type{border-top:0;padding-top:0}
.q label.qlabel,.q .qlabel{display:block;font-weight:600;color:var(--ikag-black);margin-bottom:.15rem}
.q .hint{font-size:.88rem;color:var(--text-muted);margin-bottom:.7rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-family:var(--font-body);font-size:.92rem;font-weight:500;padding:.5rem 1rem;
  border-radius:var(--radius-pill);border:1px solid var(--border-hairline);background:#fff;
  color:var(--text-body);cursor:pointer;min-height:38px;
  transition:background .18s var(--ease-out),border-color .18s var(--ease-out),color .18s var(--ease-out)}
.chip:hover{border-color:var(--ikag-red);color:var(--ikag-red)}
.chip[aria-pressed="true"]{background:var(--ikag-red);border-color:var(--ikag-red);color:#fff}
.numrow{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
/* 16px en niet kleiner: Safari zoomt de pagina in zodra je een kleiner veld
   aanraakt, en zoomt daarna niet terug. Zie www/CLAUDE.md, Mobiel. */
input[type=number],input[type=email]{font-family:var(--font-body);font-size:1.15rem;font-weight:600;
  padding:.7rem 1rem;border-radius:var(--radius-input);border:1px solid var(--border-hairline);
  background:#fff;color:var(--ikag-black);min-height:44px}
input[type=number]{width:150px}
.submitbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.5rem}

/* ---- Kernuitkomst ---- */
.verdict{background:var(--ikag-bordeaux);color:var(--text-on-dark);border-radius:var(--radius-panel);
  padding:clamp(1.8rem,4vw,3rem);position:relative;overflow:hidden}
.verdict .ghost{position:absolute;right:-1.5rem;bottom:-4rem;font-family:var(--font-display);
  font-size:15rem;line-height:1;opacity:.11;pointer-events:none}
.verdict .eyebrow{color:#f5b9b7}
.bignum{font-family:var(--font-display);font-size:clamp(3.5rem,10vw,7rem);line-height:.95;
  color:#fff;margin:.6rem 0 .3rem}
.verdict p{max-width:56ch}
.verdict .sub{color:#fff;font-family:var(--font-accent);font-style:italic;font-size:clamp(1.2rem,2.4vw,1.7rem)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem;
  margin-top:2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.22)}
.vgrid b{display:block;font-family:var(--font-display);font-size:1.9rem;color:#fff;line-height:1}
.vgrid span{font-size:.88rem;opacity:.85}

/* ---- Methodekaarten ---- */
.methods{display:grid;gap:1.1rem;margin-top:1.8rem}
.method{border-radius:var(--radius-card);padding:1.4rem 1.6rem;border:1px solid var(--border-hairline);
  display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:start}
.method.v-haalbaar{background:var(--ikag-sage)}
.method.v-marginaal{background:var(--ikag-sand)}
.method.v-niet{background:var(--ikag-pink)}
.medal{width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--shadow-chip);
  display:grid;place-items:center;font-size:1.25rem;color:var(--ikag-red)}
.method h3{font-size:1.25rem;margin-bottom:.15rem}
.method .niveau{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);display:block;margin-bottom:.5rem}
.method p{margin:0;font-size:.95rem}
/* align-self, anders rekt de pil over de volle hoogte van haar rasterkolom. */
.badge{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.4rem .85rem;border-radius:var(--radius-pill);white-space:nowrap;align-self:start}
.badge.b-haalbaar{background:var(--ikag-black);color:#fff}
.badge.b-marginaal{background:#fff;color:var(--ikag-bordeaux);border:1px solid rgba(141,4,2,.3)}
.badge.b-niet{background:var(--ikag-bordeaux);color:#fff}
.method .weeks{margin-top:.7rem;font-size:.88rem;font-weight:600;color:var(--ikag-bordeaux)}

/* ---- Rekenmodule ---- */
.calc{display:grid;grid-template-columns:.9fr 1.1fr;gap:2rem;align-items:start;margin-top:1.8rem}
.panel{background:#fff;border:1px solid var(--border-hairline);border-radius:var(--radius-card);padding:1.6rem}
/* min-width:0 op het rasteritem, en dat is geen overbodige regel.
   Een grid item staat standaard op min-width:auto, dus het GROEIT tot zijn
   inhoud past - hier tot de 420px die de matrix als minimum vraagt. Het gevolg
   staat niet in het paneel maar in de hele pagina: gemeten op 375 duwde dit de
   documentbreedte naar 495 en schoof de héle site 120px horizontaal. De
   overflow-x op .tabelkaart hieronder kan dat niet tegenhouden, want die doos
   is dan zelf al te breed. Zie www/CLAUDE.md, Mobiel. */
.calc > .panel{min-width:0}
.slider{margin-bottom:1.6rem}
.slider .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.slider .top label{font-weight:600;color:var(--ikag-black)}
.slider .top output{font-family:var(--font-display);font-size:1.5rem;color:var(--ikag-red)}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--ikag-purple),rgba(180,153,255,.28));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--ikag-red);border:3px solid #fff;box-shadow:var(--shadow-chip);cursor:pointer}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--ikag-red);
  border:3px solid #fff;box-shadow:var(--shadow-chip);cursor:pointer;border-color:#fff}
.readout{background:var(--ikag-violet);border-radius:var(--radius-input);padding:1.2rem 1.4rem;margin-top:.4rem}
.readout .big{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;
  color:var(--ikag-purple-ink)}
.readout .cap{font-size:.9rem;color:var(--ikag-purple-ink);opacity:.85}

/* De matrix SCHUIFT en wordt niet afgekapt. Zes kolommen passen op 390px niet,
   en overflow:hidden houdt er daar twee over. Zie www/CLAUDE.md, Mobiel. */
.tabelkaart{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
table.matrix{width:100%;min-width:420px;border-collapse:separate;border-spacing:4px;font-size:.9rem}
table.matrix caption{text-align:left;font-size:.88rem;color:var(--text-muted);padding-bottom:.8rem}
table.matrix th{font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);padding:.5rem .3rem;text-align:center}
table.matrix th[scope=row]{text-align:left;text-transform:none;letter-spacing:0;font-size:.9rem;
  color:var(--ikag-black);white-space:nowrap;padding-right:.8rem}
table.matrix td{text-align:center;padding:.6rem .3rem;font-weight:600;font-variant-numeric:tabular-nums;
  border-radius:8px}
.c-fast{background:var(--ikag-sage);color:#20401c}
.c-mid{background:var(--ikag-sand);color:#6b4a15}
.c-slow{background:var(--ikag-pink);color:var(--ikag-bordeaux)}
.togglerow{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.4rem}

/* ---- Poort ---- */
.gate{background:var(--ikag-violet);border-radius:var(--radius-panel);
  padding:clamp(1.8rem,4vw,2.8rem);text-align:center;border:1px dashed var(--ikag-purple)}
.gate h3{font-size:var(--text-h3);margin-bottom:.7rem}
.gate p{max-width:52ch;margin-inline:auto}
.gate ul{text-align:left;max-width:52ch;margin:1.4rem auto 0;padding-left:1.1rem}
.gate li{margin-bottom:.5rem}
.gatecta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}

/* .gated is hier ALLEEN een haak voor de structured data en voor de opmaak.
   Wie niet binnen is, krijgt dat blok server-side WEGGEKNIPT en niet verborgen:
   een lezer die de broncode opent hoort de gegate inhoud niet te vinden. Zie
   www/ikag-gate-lib.php. Vandaar geen display:none: dat zou beloven wat het
   niet waarmaakt. */

/* ---- Bewijsafspraak ---- */
.pact{background:#fff;border:1px solid var(--border-hairline);border-radius:var(--radius-panel);
  padding:clamp(1.6rem,3.5vw,2.6rem)}
.pact h3{font-size:var(--text-h3);margin-bottom:.3rem}
.pact .sub{color:var(--text-muted);font-size:.92rem;margin-bottom:1.6rem}
.pact section{padding:1.1rem 0;border-top:1px solid var(--border-hairline)}
.pact section h4{font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ikag-red-ink);margin-bottom:.6rem}
.pact ul{margin:0;padding-left:1.1rem}
.pact li{margin-bottom:.35rem}
.pact li.no{color:var(--ikag-bordeaux)}
.sign{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.6rem}
.sign div{border-top:1px solid var(--ikag-black);padding-top:.5rem;font-size:.85rem;color:var(--text-muted)}

/* ---- Kosten ---- */
.costgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin-top:1.6rem}
.cost{background:#fff;border:1px solid var(--border-hairline);border-radius:var(--radius-card);padding:1.4rem}
.cost .k{font-family:var(--font-display);font-size:2.1rem;color:var(--ikag-red);line-height:1;margin-bottom:.35rem}
.cost .l{font-weight:600;color:var(--ikag-black);font-size:.95rem}
.cost .d{font-size:.87rem;color:var(--text-muted);margin-top:.4rem}
.note{background:var(--ikag-lavender);border-radius:var(--radius-input);padding:1rem 1.2rem;
  font-size:.9rem;color:var(--ikag-purple-ink);margin-top:1.2rem}

/* ---- De methodepagina ---- */
.doc{max-width:74ch}
.doc h3{font-size:var(--text-h3);margin:2.4rem 0 .6rem}
.doc h4{font-family:var(--font-body);font-weight:700;font-size:1.02rem;margin:1.6rem 0 .3rem}
.doc .formule{background:#fff;border:1px solid var(--border-hairline);border-radius:var(--radius-input);
  padding:1rem 1.2rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.94rem;
  overflow-x:auto;margin-bottom:1.2rem}
.doc table.par{width:100%;border-collapse:collapse;font-size:.94rem;margin-bottom:1.4rem}
.doc table.par th,.doc table.par td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--border-hairline)}
.doc table.par th{font-weight:600;color:var(--ikag-black)}

/* ---- Footer ---- */
footer{background:var(--ikag-bordeaux);color:var(--text-on-dark);padding:var(--section-y) var(--gutter) 2rem}
footer .fwrap{max-width:var(--container);margin:0 auto}
footer h2{color:#fff;font-size:var(--text-h2);max-width:18ch}
footer .fmeta{margin-top:3rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.2);
  font-size:.82rem;opacity:.8}
footer img{height:22px;margin-bottom:1.4rem}
footer a{color:#fff}

/* ---- Responsief en toegankelijkheid ---- */
@media (max-width:900px){
  .hero-grid,.calc{grid-template-columns:1fr}
  .method{grid-template-columns:auto 1fr;gap:.9rem}
  .method .badge{grid-column:2}
  .sign{grid-template-columns:1fr}
  .progress{display:none}
  .nav-right{gap:.5rem}
}
@media (max-width:520px){
  .nav{padding-left:1rem}
  .nav-tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .mark path{stroke-dasharray:none;animation:none}
}
/* Printen levert de bewijsafspraak op en niets anders: dat is het enige stuk
   van deze pagina dat op tafel komt te liggen. */
@media print{
  header,.form-sect,.gate,#hero,#kern,#m1,#m2,#uitleg,.noprint,footer,
  #m4>.eyebrow,#m4>h2,#m4>.lead{display:none !important}
  body{background:#fff}
  .pact{border:0;padding:0}
}