.conversion-grid { align-items: start; }
.conversion-metric {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(8, 10, 47, .12);
  border-radius: 24px;
  background: #fff;
}
.conversion-metric[open] { border-color: rgba(255, 106, 28, .5); }
.conversion-metric summary {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 205px;
  padding: 24px;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}
.conversion-metric summary::-webkit-details-marker { display: none; }
.conversion-metric summary::marker { content: ''; }
.conversion-metric summary:focus-visible { outline: 3px solid var(--purple); outline-offset: -5px; border-radius: 24px; }
.conversion-metric summary small { padding-right: 24px; color: var(--purple); font-size: .875rem; font-weight: 900; line-height: 1.5; letter-spacing: .035em; text-transform: uppercase; }
.conversion-metric summary b { color: var(--ink); font-size: 3rem; font-weight: 900; line-height: 1.1; letter-spacing: -.055em; }
.conversion-metric summary span { color: var(--muted); font-size: .9rem; font-weight: 500; line-height: 1.5; }
.conversion-metric summary i { position: absolute; top: 24px; right: 20px; color: var(--purple); font-size: 1.3rem; font-style: normal; font-weight: 700; line-height: 1; pointer-events: none; }
.conversion-metric summary i::before { content: '+'; }
.conversion-metric[open] summary i::before { content: '−'; }
.conversion-explanation {
  padding: 22px 24px 24px;
  border-top: 1px solid rgba(8, 10, 47, .1);
  background: linear-gradient(135deg, rgba(59, 0, 180, .06), rgba(255, 106, 28, .07));
}
.conversion-explanation h3 { font-size: 1.1rem; line-height: 1.3; font-weight: 800; }
.conversion-explanation p { margin-top: 10px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.conversion-explanation .meter-track { margin-top: 20px; }
@media (max-width: 800px) {
  .conversion-grid { grid-template-columns: minmax(0, 1fr); }
  .conversion-metric summary { grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 0; padding: 20px; gap: 12px 16px; }
  .conversion-metric summary small { grid-column: 1 / -1; }
  .conversion-metric summary span { grid-column: 1; grid-row: 2; }
  .conversion-metric summary b { grid-column: 2; grid-row: 2; font-size: 2.4rem; }
  .conversion-metric summary i { top: 22px; }
  .conversion-explanation { padding: 20px; }
}
@media (max-width: 380px) {
  .conversion-metric summary { grid-template-columns: minmax(0, 1fr); }
  .conversion-metric summary b { grid-column: 1; grid-row: 2; }
  .conversion-metric summary span { grid-column: 1; grid-row: 3; }
}