/* ============================================================
   Datylux — Step 2 "Explore your KPIs" graphic (rebuilt from PNG)
   Reuses .connect (left column + panel) and .dash (KPI/chart) systems.
   ============================================================ */
.kpiview{grid-template-columns:minmax(0,.6fr) minmax(0,1fr);}
.kpiview .connect__arrow{left:35%;top:34%;}

/* inner dashboard: no sidebar, blue glowing frame like the original */
.kpiview .connect__right{gap:16px;}
.kpiview .dash{
  grid-template-columns:1fr;
  border-color:rgba(42,150,255,.38);
  box-shadow:0 30px 64px rgba(0,0,0,.5),0 0 0 1px rgba(42,150,255,.10),0 0 34px rgba(33,120,240,.16),inset 0 1px 0 rgba(255,255,255,.04);
}
.kpiview .dash__main{padding:18px 20px 22px;gap:16px;}
.kpiview .dash__brand{padding:0 0 2px;}

/* KPI cards sit in their own bordered section in this layout */
.kpi-section{padding:16px 16px 18px;}
.kpi-section .dash__sec-h{margin-bottom:14px;}

/* bottom caption bar spans the full graphic width */
.kpi-caption{
  grid-column:1 / -1;margin-top:6px;
  display:flex;align-items:center;gap:13px;
  padding:17px 22px;border-radius:14px;max-width:62%;
  background:linear-gradient(165deg,rgba(13,30,58,.55),rgba(6,14,28,.5));
  border:1px solid rgba(42,150,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.kpi-caption .cap-ic{width:24px;height:24px;flex:none;color:var(--accent,#1677ff);}
.kpi-caption .cap-ic svg{width:100%;height:100%;fill:currentColor;}
.kpi-caption p{color:#cdddf0;font-size:clamp(14px,1.15vw,17px);line-height:1.4;font-weight:500;}

@media(max-width:860px){
  .kpiview{grid-template-columns:1fr;}
  .kpi-caption{max-width:none;grid-column:auto;}
}