/* ==========================================================================
   Homepage component details (appended)
   ========================================================================== */

.stat-num em, .stat-band em { font-style: normal; }
.section-title { font-size: 32px; }

.mm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 10px; }

/* laptop mini dashboard */
.mini-dash { display: flex; height: 154px; background: #fbfdff; }
.md-side { width: 24%; border-right: 1px solid #e8f1fc; padding: 7px 5px; display: flex; flex-direction: column; gap: 5px; background: #fdfeff; }
.md-side b { display: block; height: 5px; border-radius: 3px; background: #e3eefb; }
.md-side b:nth-child(1) { background: #2f6bff; opacity: .55; width: 82%; }
.md-side b:nth-child(3) { width: 76%; }
.md-side b:nth-child(5) { width: 62%; }
.md-main { flex: 1; padding: 7px; display: flex; flex-direction: column; gap: 5px; }
.md-kpis { display: flex; gap: 4px; }
.md-kpis span { flex: 1; border: 1px solid #e9f1fc; border-radius: 3px; padding: 2px 3px; font-size: 5px; color: #8ea2bd; line-height: 1.3; }
.md-kpis b { display: block; font-size: 10px; color: #22304a; }
.md-donut { height: 66px; border: 1px solid #edf4fd; border-radius: 4px; display: grid; place-items: center; background: #fff; }
.md-donut i {
  display: block; width: 46px; height: 46px; border-radius: 50%;
  background: conic-gradient(#2f6bff 0 46%, #65c9ff 46% 72%, #7ff0d4 72% 88%, #e6f1ff 88% 100%);
  position: relative;
}
.md-donut i::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #fff; }
.md-bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; border: 1px solid #edf4fd; border-radius: 4px; padding: 4px; background: #fff; }
.md-bars span { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #9fd0ff, #5b9bf0); }
.md-bars span:nth-child(1) { height: 40%; }
.md-bars span:nth-child(2) { height: 72%; }
.md-bars span:nth-child(3) { height: 54%; }
.md-bars span:nth-child(4) { height: 90%; }
.md-bars span:nth-child(5) { height: 62%; }

.ui-title { margin-left: 4px; font-size: 6px; color: #93a8c4; letter-spacing: .5px; }
.ui-shot .ui-main .row { height: 12px; }
.ui-shot .ui-main .row span { background: #f0f6fe; border: 1px solid #e8f1fc; }

.ap-chart { width: 100%; height: auto; display: block; margin-top: 4px; }
.ap-stats b { font-size: 12px; }

/* advantage card tuning */
.b-b { padding: 34px 26px 24px; }
.b-b h3 { font-size: 23px; }
.b-b p { margin-bottom: 20px; }
.b-b .analytic-panel { margin-top: auto; flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; padding: 18px 16px 14px; }
.b-b .ap-chart { flex: 1; min-height: 190px; height: 100%; margin-top: 8px; }
.b-c .ui-shot, .b-d .ui-shot { margin-top: auto; }

@media (max-width: 1080px) {
  .b-b {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px 26px;
    align-items: center; text-align: left; padding: 30px 30px 26px;
  }
  .b-b h3 { grid-column: 1; grid-row: 1; font-size: 22px; }
  .b-b p { grid-column: 1; grid-row: 2; margin: 4px 0 0; }
  .b-b .analytic-panel { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; min-height: 0; }
  .b-b .ap-chart { min-height: 140px; max-height: 240px; }
}
@media (max-width: 860px) {
  .b-b { grid-template-columns: 1fr; text-align: center; }
  .b-b h3, .b-b p, .b-b .analytic-panel { grid-column: 1; grid-row: auto; }
  .b-b p { margin-bottom: 18px; }
}