@layer components {
  .sales-recovery {
    --funnel-sales: #e8ecef;
    --funnel-returns: #bac4ca;
    --funnel-recovered: #72aaa7;
    margin-bottom: var(--spacing-xl);
    padding: clamp(20px, 3vw, 36px);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .sales-recovery-header { display: flex; justify-content: space-between; align-items: start; gap: 16px; flex-wrap: wrap; }
  .sales-recovery-header h2 { margin: 0; font-size: 1.5rem; letter-spacing: -0.035em; }
  .sales-recovery-header p { margin: 4px 0 0; color: var(--color-text-muted); font-size: 0.875rem; }
  .sales-recovery-badge { font-size: 0.75rem; color: var(--color-text-muted); padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 999px; }
  .sales-recovery-chart { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; max-width: 920px; margin: 36px auto 20px; }
  .sales-recovery-shape { height: 320px; }
  .sales-recovery-shape svg { width: 100%; height: 100%; display: block; }
  .sales-recovery-stages { display: grid; grid-template-rows: 1fr 1fr 1fr; margin: 0; }
  .sales-recovery-stage { position: relative; align-self: center; }
  .sales-recovery-stage::before { content: ""; position: absolute; top: 5px; right: calc(100% + 8px); width: 10px; height: 10px; border-radius: 50%; background: var(--funnel-sales); }
  .sales-recovery-stage-1::before { background: var(--funnel-returns); }
  .sales-recovery-stage-2::before { background: var(--funnel-recovered); }
  .sales-recovery-stage dt { font-size: 0.875rem; font-weight: 500; }
  .sales-recovery-stage dd { margin: 3px 0 0; font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 600; overflow-wrap: anywhere; }
  .sales-recovery-stage .sales-recovery-share { font-size: 0.8125rem; font-weight: 400; color: var(--color-text-muted); }
  .sales-recovery-caption { color: var(--color-text-muted); font-size: 0.75rem; margin: 0 0 24px; }
  .sales-recovery-result { border-top: 1px solid var(--color-border); padding-top: 20px; }
  .sales-recovery-headline { display: flex; align-items: baseline; gap: 16px; margin: 0 0 16px; }
  .sales-recovery-headline strong { font-size: clamp(2.5rem, 5vw, 3.5rem); letter-spacing: -0.055em; line-height: 1.1; }
  .sales-recovery-headline span { color: var(--color-text-muted); font-size: 0.9375rem; }
  .sales-recovery-bar { height: 12px; border-radius: 4px; overflow: hidden; display: flex; background: var(--funnel-sales); }
  .sales-recovery-bar span:first-child { background: var(--funnel-recovered); }
  .sales-recovery-bar span:last-child { background: var(--funnel-returns); }
  .sales-recovery-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 16px 0 24px; }
  .sales-recovery-breakdown dt { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; }
  .sales-recovery-breakdown dd { margin: 4px 0 0 18px; font-size: 1rem; overflow-wrap: anywhere; }
  .sales-recovery-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--funnel-recovered); flex-shrink: 0; }
  .sales-recovery-dot-gift { background: var(--funnel-returns); }
  .sales-recovery-notes { border-top: 1px solid var(--color-border); padding-top: 12px; color: var(--color-text-muted); font-size: 0.75rem; }
  .sales-recovery-notes p { margin: 4px 0; }
  .sales-recovery-notes [role="status"] { color: var(--color-text); }

  @media (max-width: 640px) {
    .sales-recovery-chart { gap: 20px; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); margin-top: 24px; }
    .sales-recovery-shape { height: 270px; }
    .sales-recovery-headline { gap: 12px; }
    .sales-recovery-badge { display: none; }
  }
}