/* Sectie 5 — Kennisdekking-curve: eerlijk over het inwerken (kennisdekking-strategie.md).
   Curve tekent zichzelf via stroke-dashoffset; mijlpalen poppen na de lijn. */

.curve-card{padding:clamp(1.4rem,3vw,2.6rem);display:grid;grid-template-columns:1.4fr auto;gap:clamp(1.5rem,3vw,3rem);align-items:center;margin-top:2rem}
@media (max-width:760px){.curve-card{grid-template-columns:1fr}}

.curve-wrap svg{width:100%;height:auto;display:block}
.curve-wrap .lijn{fill:none;stroke:var(--neon);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.curve-card.play .lijn{transition:stroke-dashoffset 1.2s var(--ease) .2s;stroke-dashoffset:0}
.curve-wrap .mijl{opacity:0;transition:opacity .35s var(--ease)}
.curve-card.play .mijl{opacity:1}
.curve-card.play .mijl.m1{transition-delay:.5s}
.curve-card.play .mijl.m2{transition-delay:.9s}
.curve-card.play .mijl.m3{transition-delay:1.35s}
.curve-wrap text{font-family:var(--sans);font-size:11px;fill:var(--ink-2)}
.curve-wrap text.pct{font-weight:600;fill:var(--ink)}

.ninety .big{font-family:var(--serif);font-weight:700;font-size:var(--text-huge);line-height:1;letter-spacing:-.03em}
.ninety .big em{font-style:italic;color:var(--neon)}
.ninety .cap{font-size:.82rem;color:var(--ink-2);margin-top:.4rem;max-width:20ch}
.foot-honest{font-size:.8rem;color:var(--ink-3);margin-top:1.2rem;grid-column:1/-1}

@media (prefers-reduced-motion:reduce){
  .curve-wrap .lijn{transition:none;stroke-dashoffset:0}
  .curve-wrap .mijl{transition:none;opacity:1}
}