/* ============================================================
   Slim Sparen — visual / infographic component library
   Pairs with slimsparen.css. Icons via inline <svg> sprite (#icon-*).
   ============================================================ */

/* ---- icon system ---- */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic-2{width:1.4em;height:1.4em}
.icocirc{width:54px;height:54px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.icocirc .ic{width:26px;height:26px}
.icocirc--teal{background:var(--teal-light);color:var(--ink)}
.icocirc--coral{background:var(--coral-soft);color:var(--coral-2)}
.icocirc--ink{background:var(--ink);color:#fff}
.icocirc--gold{background:#F5E9CE;color:#9A7A2E}
.icocirc--sm{width:40px;height:40px;border-radius:11px}
.icocirc--sm .ic{width:20px;height:20px}

/* ---- meta badges (effort / impact / revenue) ---- */
.meta-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.mb{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:7px;letter-spacing:.01em}
.mb .k{opacity:.7;font-weight:600}
.mb-eff{background:#EAF1F4;color:#345a68}
.mb-imp-hoog{background:#E1EFE4;color:#2E6B45}
.mb-imp-middel{background:#FBF1DE;color:#9A6A14}
.mb-imp-laag{background:#F0ECE4;color:#776b58}
.mb-rev{background:var(--coral-soft);color:var(--coral-2)}
.mb-time{background:#E9EEF1;color:#4a5a64}

/* ---- stat tiles ---- */
.tiles{display:grid;gap:16px}
.tile{background:#fff;border:1px solid #ece6dc;border-radius:14px;padding:20px;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.tile .big{font-family:var(--serif);font-weight:800;font-size:2.3rem;line-height:1;color:var(--ink)}
.tile .big.coral{color:var(--coral)}
.tile .lbl{font-size:.86rem;color:var(--body-soft);margin-top:6px}
.tile .ic{position:absolute;top:14px;right:14px;width:26px;height:26px;color:var(--teal);opacity:.45}

/* ---- horizontal flow with arrows ---- */
.flowx{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.flowx .node{flex:1;min-width:130px;background:#fff;border:1px solid #ece6dc;border-radius:12px;padding:16px 14px;text-align:center;box-shadow:var(--shadow-soft)}
.flowx .node .ic{width:24px;height:24px;color:var(--teal)}
.flowx .node .t{font-weight:700;color:var(--ink);font-size:.95rem;margin-top:6px}
.flowx .node .s{font-size:.8rem;color:var(--body-soft)}
.flowx .arr{align-self:center;color:var(--coral);flex:0 0 34px;display:flex;justify-content:center}
.flowx .arr .ic{width:24px;height:24px;stroke-width:2.2}
@media(max-width:720px){.flowx{flex-direction:column}.flowx .arr{transform:rotate(90deg);height:26px}}

/* ---- funnel (SVG-free, CSS trapezoids) ---- */
.funnel{display:flex;flex-direction:column;align-items:center;gap:8px}
.funnel .seg{color:#fff;text-align:center;padding:14px 18px;font-weight:700;border-radius:8px;width:100%;display:flex;justify-content:space-between;align-items:center}
.funnel .seg .v{font-family:var(--serif);font-weight:800}
.funnel .seg.s1{background:var(--teal-bg);color:var(--ink);max-width:100%}
.funnel .seg.s2{background:var(--teal);max-width:82%}
.funnel .seg.s3{background:var(--teal-dark);max-width:64%}
.funnel .seg.s4{background:var(--ink);max-width:46%}
.funnel .drop{font-size:.75rem;color:var(--body-soft)}

/* ---- staircase (scaling) ---- */
.stair{display:flex;align-items:flex-end;gap:10px;min-height:230px}
.stair .step{flex:1;background:linear-gradient(180deg,var(--teal) 0%,var(--teal-dark) 100%);border-radius:10px 10px 0 0;padding:14px 12px;color:#EAF6F9;display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.stair .step:nth-child(1){height:42%}
.stair .step:nth-child(2){height:60%}
.stair .step:nth-child(3){height:80%}
.stair .step:nth-child(4){height:100%;background:linear-gradient(180deg,var(--coral) 0%,#c63d2c 100%)}
.stair .step .amt{font-family:var(--serif);font-weight:800;font-size:1.15rem}
.stair .step .cap{font-size:.78rem;opacity:.9;margin-top:4px}

/* ---- CSS bar chart ---- */
.bars{display:flex;flex-direction:column;gap:12px}
.bars .row{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:12px;font-size:.92rem}
.bars .row .name{color:var(--ink);font-weight:600}
.bars .track{background:#EDE7DD;border-radius:6px;height:14px;overflow:hidden}
.bars .fill{height:100%;border-radius:6px;background:var(--teal)}
.bars .fill.coral{background:var(--coral)}
.bars .val{font-weight:700;color:var(--ink-soft);font-size:.86rem}

/* ---- effort/impact quadrant ---- */
.quad{position:relative;aspect-ratio:1.5/1;background:#fff;border:1px solid #ece6dc;border-radius:14px;box-shadow:var(--shadow-soft);padding:14px}
.quad .axis-x,.quad .axis-y{position:absolute;font-size:.72rem;color:var(--body-soft);font-weight:600}
.quad .grid{position:absolute;inset:34px 34px 30px 60px;border-left:2px solid var(--line);border-bottom:2px solid var(--line)}
.quad .grid::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed var(--line)}
.quad .grid::after{content:"";position:absolute;top:50%;left:0;right:0;border-top:1px dashed var(--line)}
.quad .dot{position:absolute;transform:translate(-50%,50%);background:var(--coral);color:#fff;font-size:.66rem;font-weight:700;padding:3px 7px;border-radius:100px;white-space:nowrap}
.quad .dot.teal{background:var(--teal)}

/* ---- timeline ---- */
.timeline{position:relative;padding-left:30px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline .tl{position:relative;padding:0 0 22px 14px}
.timeline .tl::before{content:"";position:absolute;left:-26px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--coral);border:3px solid var(--cream)}
.timeline .tl .when{font-weight:700;color:var(--coral-2);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}

/* ---- icon card (idea / feature) ---- */
.icard{background:#fff;border:1px solid #ece6dc;border-radius:14px;padding:20px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;height:100%;transition:transform .15s ease,box-shadow .15s ease}
.icard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.icard .top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.icard h4{margin:0;font-size:1.06rem;line-height:1.2}
.icard .desc{font-size:.9rem;color:var(--body);margin:0 0 12px}
.icard .why{font-size:.82rem;color:var(--teal-dark);background:#EDF5F7;border-radius:8px;padding:8px 11px;margin:0 0 12px}

/* ---- connector tree (account structure) ---- */
.tree{display:flex;flex-direction:column;gap:0}
.tree .root{background:var(--ink);color:#fff;border-radius:12px;padding:14px 18px;font-weight:700;text-align:center;align-self:center;min-width:230px}
.tree .branches{display:grid;gap:14px;margin-top:18px;position:relative}
.tree .branch{background:#fff;border:1px solid #ece6dc;border-left:5px solid var(--teal);border-radius:0 12px 12px 0;padding:14px 16px;box-shadow:var(--shadow-soft)}
.tree .branch.coral{border-left-color:var(--coral)}
.tree .branch h5{margin:0 0 3px;font-family:var(--serif);font-size:1.05rem;color:var(--ink)}
.tree .branch p{margin:0;font-size:.86rem;color:var(--body)}

/* ---- pill row legend ---- */
.legend2{display:flex;flex-wrap:wrap;gap:12px;font-size:.82rem;color:var(--body);align-items:center}

/* section number chip */
.snum{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--coral);color:#fff;font-family:var(--serif);font-weight:800;margin-right:10px;font-size:1rem}