/* Invest8X hero metrics. A divider is a separate grid track, never an overlay. */
.ix-metrics-grid {
  display: grid;
  grid-template-columns: max-content 1px max-content 1px max-content 1px max-content;
  justify-content: space-between;
  align-items: center;
  column-gap: 20px;
  min-height: 72px;
  padding-block: 11px;
}
.ix-metric {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.ix-metric-symbol {
  flex: 0 0 22px;
  width: 22px;
  text-align: center;
  font-size: 20px;
  line-height: 1.55;
  color: #e0b85d;
}
.ix-metric-value {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: #efc866;
  white-space: nowrap;
}
.ix-metric--capital .ix-metric-value {font-size: 23px;}
.ix-metric-copy {min-width: 0;}
.ix-metric-copy strong {
  display: block;
  color: #f3f7f9;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.ix-metric-copy small {
  display: block;
  color: #8fa3b0;
  font-size: 9px;
  line-height: 1.35;
  margin-top: 2px;
  white-space: nowrap;
}
.ix-metric-divider {
  display: block;
  width: 1px;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(116,147,166,0), rgba(116,147,166,.38) 20%, rgba(116,147,166,.38) 80%, rgba(116,147,166,0));
}
/* Two rows while there is no longer space for the complete, untruncated strip. */
@media (max-width: 1199px) {
  .ix-metrics-grid {
    grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr);
    column-gap: 24px;
    row-gap: 0;
    padding-block: 4px;
  }
  .ix-metric {min-height: 62px;}
  .ix-metric-divider--middle {display: none;}
  .ix-metric-copy strong,.ix-metric-copy small {white-space: normal;}
}
/* Single column keeps the long capital metric readable at narrow phone widths. */
@media (max-width: 799px) {
  .ix-metrics-grid {grid-template-columns: minmax(0,1fr);gap: 0;}
  .ix-metric {min-height: 62px;padding-block: 10px;}
  .ix-metric-divider,.ix-metric-divider--middle {
    display: block;
    height: 1px;
    width: 100%;
    background: rgba(116,147,166,.22);
  }
}
