.mock-brand {
  padding: 2px 8px 16px;
  color: #fff;
  font: 800 13px Manrope;
  letter-spacing: .6px;
}

.mock-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -13px -12px 18px;
  padding: 0 0 13px;
  border-bottom: 1px solid #e1eaf1;
  color: #718398;
  font-size: 8px;
}

.mock-topbar > span:last-child {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #18304a;
}

.mock-topbar i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e1f3ff;
  color: #087ee7;
  font: 800 8px Manrope;
}

.real-chart > div:first-child { align-items: center; }
.real-chart > div:first-child > div { display: flex; flex-direction: column; gap: 3px; }
.real-chart small { color: #0c91eb; font-size: 7px; letter-spacing: .8px; }
.mock-chart-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 13px; }
.mock-comparison { display: flex !important; flex-direction: column; padding: 13px; border: 1px solid #d4e7f3; border-radius: 10px; background: #eef8ff; }
.mock-comparison strong { font-size: 16px; margin: 7px 0; }
.mock-comparison b { padding: 7px; border-radius: 8px; background: #fff3df; color: #ae6b12; font-size: 8px; }
.mock-comparison span { margin-top: 10px; font-size: 7px; color: #718398; }

@media (max-width: 760px) {
  .mock-topbar > span:last-child { display: none; }
  .mock-brand { font-size: 9px; padding: 2px 4px 12px; }
  .mock-chart-layout { grid-template-columns: 1fr; }
  .mock-comparison { display: none !important; }
}