/* Benefit Calculator result, shared by /updates, /benefit-calculator and the demo. */
/* One benefit result, as the web app draws it. The rules are copied from the
   app's BenefitResultCard.razor.css so the two never differ. Keep them in step. */
.benefit {
  max-inline-size: 34rem;
  margin: var(--space-8) 0 var(--space-16);
  font-size: var(--type-body-s);
}
.benefit figcaption { color: var(--color-stone-60); line-height: var(--lh-label); margin-block-end: var(--space-12); }
.benefit-result { border: 1px solid var(--color-stone-20); border-radius: var(--radius-default); background: var(--color-paper); padding: var(--space-24); }
.benefit-result-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-16); margin-block-end: var(--space-24); }
.benefit-item-badge { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; color: var(--color-royal); background: color-mix(in srgb, var(--color-royal) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-royal) 20%, transparent); border-radius: 8px; padding: 0.15rem 0.75rem; letter-spacing: 0.04em; line-height: 1.4; }
.benefit-amount-block { display: flex; flex-direction: column; gap: var(--space-4); margin-block-end: var(--space-24); }
.benefit-amount-label { font-size: var(--type-label-s); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-stone-60); }
.benefit-amount { font-family: var(--font-mono); font-size: var(--type-hero-num); font-weight: 700; line-height: 1.1; color: var(--color-royal); font-variant-numeric: tabular-nums; }
.benefit-amount-note { font-size: var(--type-body-s); color: var(--color-stone-60); font-variant-numeric: tabular-nums; }
.benefit-figures { display: flex; flex-wrap: wrap; margin: 0; border: 1px solid var(--color-stone-20); border-radius: 8px; overflow: hidden; }
.benefit-figure { flex: 1 1 10rem; padding: 0.75rem 1rem; border-inline-end: 1px solid var(--color-stone-20); }
.benefit-figure:last-child { border-inline-end: 0; }
.benefit-figure dt { font-size: var(--type-label-m); font-weight: 600; color: var(--color-stone-60); margin-block-end: 0.15rem; }
.benefit-figure dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; margin: 0; font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; color: var(--color-midnight); font-variant-numeric: tabular-nums; }
.benefit-figure-unit { font-family: var(--font-sans); font-size: var(--type-label-m); font-weight: 400; color: var(--color-stone-60); }
.benefit-reason { margin: var(--space-16) 0 0; font-size: var(--type-body-s); line-height: 1.6; color: var(--color-stone-60); }