.with-info {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.info {
  display: inline-block;
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
}

.info summary {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid #9fb1c0;
  border-radius: 50%;
  color: var(--blue);
  font-size: .7rem;
  line-height: 1;
  list-style: none;
  cursor: pointer;
}

.info summary::-webkit-details-marker { display: none; }

.info[open] p {
  position: absolute;
  z-index: 12;
  right: 0;
  top: 24px;
  width: 290px;
  margin: 0;
  padding: .75rem;
  background: var(--navy);
  color: #fff;
  border-radius: 9px;
  box-shadow: var(--shadow);
  font-size: .76rem;
  font-weight: 400;
}

.chart-row { grid-template-columns: 145px 1fr 52px; }
.compact-row { grid-template-columns: 135px 1fr 48px; }
.metrics span { grid-template-columns: auto auto; align-items: center; gap: .2rem; }
.metrics strong { grid-column: 1 / -1; }
.matrix th .info { vertical-align: middle; }
.matrix td b { min-width: 42px; }
.reader-metrics dt { margin-top: 1rem; color: var(--muted); font-size: .82rem; }
.reader-metrics dd { margin: .1rem 0; }
.reader-metrics dd strong { font-size: 2rem; color: var(--navy); }
.table-note { color: var(--muted); font-size: .78rem; }
.comparison-table th:nth-child(4),
.comparison-table td:nth-child(4) { background: #f2f7f2; }

@media (max-width: 720px) {
  .info[open] p { right: auto; left: 0; width: min(280px, 80vw); }
  .chart-row, .compact-row { grid-template-columns: 105px 1fr 48px; }
}