/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:1rem}
.kpi{background:var(--charcoal);border-radius:1.5rem;padding:1.25rem 1.75rem 1.25rem;position:relative;overflow:hidden}
.kpi .eyebrow{color:var(--smoke);letter-spacing:.2em;font-size:.68rem}
.kpi .num{font-family:var(--bac);font-size:2.1rem;color:var(--white);margin:.9rem 0 .5rem;line-height:1.05;white-space:nowrap}
.kpi .delta{font-weight:500;font-size:.9rem;color:var(--cyan)}
.kpi::after{content:"";position:absolute;left:0;bottom:0;height:8px;width:100%;background:var(--cobalt);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-out)}
.kpi.seen::after{transform:scaleX(1)}

/* chart frame */
.chart-card{background:var(--black);border:2px solid var(--charcoal);border-radius:1.5rem;padding:1.75rem 2rem 1.5rem;margin-top:1rem}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.chart-head h4{font-weight:500;font-size:1rem;color:var(--white)}
.legend{display:flex;gap:1.25rem;font-size:.85rem;color:var(--smoke)}
.legend span{display:inline-flex;align-items:center;gap:.5rem}
.legend i{width:.75rem;height:.75rem;border-radius:.2rem;display:inline-block}
.chart{width:100%;position:relative}
.chart svg{display:block;width:100%;overflow:visible}
.chart text{font-family:var(--rob);fill:var(--smoke);font-size:12px}
.chart .val{fill:var(--white);font-weight:500}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .bar{transition:opacity .2s}
.chart.hovering .bar{opacity:.45}.chart.hovering .bar.on{opacity:1}
.tip{position:fixed;z-index:1000;pointer-events:none;background:var(--white);color:#000;border-radius:.5rem;padding:.5rem .75rem;font-size:.8rem;line-height:1.3;
  opacity:0;transform:translate(-50%,calc(-100% - 12px));transition:opacity .15s;white-space:nowrap;font-weight:400}
.tip b{font-weight:700}
.tip.show{opacity:1}
/* modules */
.m-list ol{list-style:none;margin-top:2rem;counter-reset:li}
.m-list li{display:grid;grid-template-columns:3.25rem 1fr;align-items:baseline;padding:1.05rem 0;border-bottom:2px solid var(--charcoal);font-size:1.4rem;color:var(--white);line-height:1.3}
.m-list li::before{counter-increment:li;content:counter(li,decimal-leading-zero);font-family:var(--rob);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:0.8rem;color:var(--magenta)}
.m-kpis .kpis{--cols:2;margin-top:1.5rem}
.m-text p{font-size:1.35rem;color:var(--white);line-height:1.4;margin-top:1.5rem;padding-left:1.5rem;border-left:8px solid var(--cobalt)}
.pl{width:100%;border-collapse:collapse;margin-top:1.5rem;font-size:1rem}
.pl th{background:var(--indigo);color:var(--white);font-weight:700;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;padding:.9rem 1rem;text-align:right}
.pl th:first-child{text-align:left;border-radius:.75rem 0 0 .75rem}.pl th:last-child{border-radius:0 .75rem .75rem 0}
.pl td{padding:.85rem 1rem;border-bottom:2px solid var(--charcoal);text-align:right;font-variant-numeric:tabular-nums;color:var(--smoke)}
.pl td:first-child{text-align:left}
.pl tr.tot td{color:var(--white);font-weight:500}
.pl tr:hover td{background:var(--charcoal)}
.cards{display:grid;grid-template-columns:repeat(var(--cols,2),1fr);gap:1rem;margin-top:1.5rem}
.card{background:var(--charcoal);border-radius:1.5rem;padding:1.75rem 1.75rem 2rem;position:relative;overflow:hidden;min-height:11rem}
.card::before{content:"";position:absolute;left:0;top:0;height:8px;width:100%;background:var(--cyan)}
.card .eyebrow{font-size:.65rem;letter-spacing:.25em}
.card h4{font-weight:400;font-size:1.5rem;color:var(--white);margin:.9rem 0 .5rem;line-height:1.15}
.card p{font-size:.95rem}
.matrix{width:100%;border-collapse:separate;border-spacing:0;margin-top:1.5rem;font-size:.9rem}
.matrix th{font-weight:500;color:var(--smoke);font-size:.8rem;padding:.5rem;text-align:center;vertical-align:bottom}
.matrix td{padding:.42rem .5rem;text-align:center;border-bottom:2px solid var(--charcoal)}
.matrix td:first-child{text-align:left;color:var(--white);white-space:nowrap;padding-right:1.5rem}
.dot{display:inline-block;border-radius:50%;vertical-align:middle;transition:transform .2s}
.dot.v0{width:.5rem;height:.5rem;background:var(--charcoal)}
.dot.v1{width:.95rem;height:.95rem;background:transparent;box-shadow:inset 0 0 0 3px var(--cyan)}
.dot.v2{width:1.1rem;height:1.1rem;background:var(--cyan)}
.matrix td:hover .dot{transform:scale(1.3)}
.mlegend{display:flex;gap:1.5rem;margin-top:1.25rem;font-size:.85rem}
.mlegend span{display:inline-flex;align-items:center;gap:.5rem}
.tl{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:1rem;margin-top:2.5rem;position:relative}
.tl::before{content:"";position:absolute;left:0;right:0;top:.55rem;height:2px;background:var(--charcoal)}
.tl div{position:relative;padding-top:2.25rem}
.tl div::before{content:"";position:absolute;left:0;top:0;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--cyan)}
.tl b{display:block;font-family:var(--bac);font-weight:400;font-size:1.25rem;color:var(--white)}
.tl h4{font-weight:500;font-size:1.1rem;color:var(--white);margin:.9rem 0 .4rem}
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.5rem}
.person{display:flex;align-items:center;gap:1.25rem;background:var(--charcoal);border-radius:1.5rem;padding:1.25rem}
.avatar{width:4rem;height:4rem;border-radius:50%;background:var(--indigo);display:grid;place-items:center;font-family:var(--rob);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:0.8rem;color:var(--white);flex-shrink:0}
.person b{display:block;font-weight:500;color:var(--white);font-size:1.1rem}
.statement{background:var(--cyan);border-radius:1.5rem;padding:3rem;color:#000}
.statement .bac{font-size:2.1rem;line-height:1.02;color:#000}
.statement ul{list-style:none;margin-top:2rem}
.statement li{font-size:1.25rem;padding:.75rem 0;border-top:2px solid var(--black);font-weight:400}