.performance-card {
  margin: 8px 0 24px;
  padding: 20px;
  border: 1px solid #dce8e3;
  border-radius: 20px;
  background: linear-gradient(145deg, #082d26, #0d473a);
  color: #fff;
  box-shadow: 0 14px 32px rgba(6, 47, 39, .16);
}

.performance-card .performance-top { align-items: flex-start; margin: 0; }
.performance-card .eyebrow { color: #a8d8c9; }
.performance-card h2 { font-family: "Avenir Next Condensed", "Arial Narrow", sans-serif; font-size: 30px; letter-spacing: -.035em; }
.performance-period { margin: 5px 0 0; color: #b7cec6; font-size: 11px; font-weight: 650; }

.performance-net { margin: 18px 0 14px; padding: 15px 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(255,255,255,.1); }
.performance-net span, .performance-net small { display: block; color: #c0d6cf; font-size: 10px; }
.performance-net strong { display: block; margin: 3px 0; font-size: 31px; line-height: 1; letter-spacing: -.055em; }
.performance-net .positive, .performance-card .positive { color: #8fe1bd; }
.performance-net .negative, .performance-card .negative { color: #ffb7aa; }

.performance-card .metric-row { margin: 0; gap: 9px; }
.performance-card .metric-row > div { padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(255,255,255,.06); }
.performance-card .metric-row > div + div { border-left: 1px solid rgba(255,255,255,.12); padding-left: 12px; }
.performance-card .metric-row span { color: #bed2cb; }
.performance-card .metric-row strong { font-size: 21px; margin: 4px 0 3px; }
.performance-card .metric-row em { color: #a8c4bb; font-size: 9px; line-height: 1.3; }
.performance-note { margin: 13px 0 0; color: #a8c4bb; font-size: 9px; line-height: 1.4; }