/* Gedeeld door de SEO-pagina's (seo-en-geo, technische-seo, lokale-seo): de sectie Opvolgen (.opv-*).
   Uit de inline <style> van docs/prototype/technische-seo.html (gelijk op de drie pagina's). */
/* opvolgen: links hoe we meten, rechts een voorbeeldverslag met een tegel per meting (voorbeeldcijfers, geen klantdata) */
.opv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
/* per tool: de naam als korte kop, de uitleg eronder, met een lijn ertussen: één rechte kolom */
.opv-li{list-style:none;margin:22px 0 0;padding:0;border-bottom:1px solid var(--color-rule)}
.opv-li li{padding:10px 0;border-top:1px solid var(--color-rule)}
.opv-li b{display:block;font-size:15px;font-weight:700;color:var(--color-ink)}
.opv-li span{display:block;margin-top:2px;color:var(--color-ink-2);font-size:15px;line-height:1.45}
.opv-alt{margin-top:14px;font-size:14px;color:var(--color-ink-3)}
.opv-rep{position:relative;padding:20px;border-radius:20px;background:#fff;box-shadow:var(--shadow-lift)}
.opv-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid #F0EBE2}
.opv-hd b{font-family:var(--font-serif);font-size:18px}
.opv-hd span{padding:3px 10px;border-radius:999px;background:var(--color-warn-soft);color:var(--color-warn);font-size:11px;font-weight:700}
.opv-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.opv-t{padding:14px;border-radius:14px;background:var(--color-card);min-width:0}
.opv-t.wide{grid-column:1 / -1}
.opv-t small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-3)}
.opv-t p.l{margin-top:2px;font-size:14px;font-weight:600;color:var(--color-ink)}
.opv-big{display:flex;align-items:baseline;gap:8px;margin-top:8px;font-family:var(--font-serif);font-size:30px;font-weight:600;line-height:1}
.opv-big em{font-family:var(--font-sans);font-style:normal;font-size:13px;font-weight:700;color:var(--color-ok)}
.opv-spark{display:block;width:100%;height:46px;margin-top:8px}
.opv-spark path{fill:none;stroke:var(--color-accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1) .3s}
.opv-spark .area{fill:var(--color-accent-soft);stroke:none;opacity:0;transition:opacity .8s 1.2s}
.opv-bars{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.opv-bars li{display:grid;grid-template-columns:7.5em minmax(0,1fr) 2.6em;align-items:center;gap:8px;font-size:12px;color:var(--color-ink-2)}
.opv-bars li > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opv-bars i{display:block;height:8px;border-radius:4px;background:#ECE6DA;overflow:hidden}
.opv-bars i i{height:100%;width:0;background:var(--color-ink);transition:width 1.2s cubic-bezier(.2,.8,.2,1) .4s}
.opv-bars b{text-align:right;font-weight:700;color:var(--color-ink)}
.opv-gauge{display:flex;align-items:center;gap:12px;margin-top:8px}
.opv-gauge svg{width:64px;height:64px;flex:none;transform:rotate(-90deg)}
.opv-gauge circle{fill:none;stroke-width:7}
.opv-gauge .bg{stroke:#ECE6DA}
.opv-gauge .fg{stroke:var(--color-ok);stroke-linecap:round;stroke-dasharray:163;stroke-dashoffset:163;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1) .4s}
.opv-gauge .num{font-family:var(--font-serif);font-size:28px;font-weight:600;line-height:1}
.opv-gauge .was{display:block;margin-top:4px;font-size:12px;color:var(--color-ink-3)}
.opv-dots{display:flex;gap:6px;margin-top:10px}
.opv-dots i{width:16px;height:16px;border-radius:50%;background:#ECE6DA}
.opv-dots i.on{background:var(--color-accent)}
.opv-q{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.opv-q li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--color-ink-2)}
.opv-q li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opv-q li b{flex:none;min-width:1.9em;padding:1px 6px;border-radius:999px;background:var(--color-ink);color:var(--color-paper);font-size:11px;text-align:center}
.opv-hand{margin-top:14px;font-family:var(--font-hand);font-size:19px;color:var(--color-accent-dark)}
.opv-rep.in .opv-spark path{stroke-dashoffset:0}
.opv-rep.in .opv-spark .area{opacity:1}
.opv-rep.in .opv-bars i i{width:var(--w)}
.opv-rep.in .opv-gauge .fg{stroke-dashoffset:var(--o)}
@media (max-width:1023px){
.opv{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:420px){
.opv-tiles{grid-template-columns:minmax(0,1fr)}
.opv-t.wide{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
.opv-spark path,.opv-spark .area,.opv-bars i i,.opv-gauge .fg{transition:none}
}

/* omzetting naar Wagtail: de uitleg per tool komt uit rich text */
.opv-li .opv-d{display:block;margin-top:2px;color:var(--color-ink-2);font-size:15px;line-height:1.45}