$60K
$0
<!-- Y-axis labels (right: coverage) -->
<div style="position: absolute; right: 0; top: 0; font-size: 14px; color: var(--dk-text-muted);">100%</div>
<div style="position: absolute; right: 0; bottom: 0; font-size: 14px; color: var(--dk-text-muted);">0%</div>
<!-- Chart area -->
<div style="margin: 0 60px; height: 280px; position: relative; border-left: 1px solid var(--dk-border); border-bottom: 1px solid var(--dk-border);">
<!-- Storage cost line (red) -->
<svg style="position: absolute; width: 100%; height: 100%;">
<line x1="0" y1="280" x2="100%" y2="0" stroke="var(--dk-negative)" stroke-width="3" opacity="0.8"/>
</svg>
<!-- Detection coverage line (green) -->
<svg style="position: absolute; width: 100%; height: 100%;">
<path d="M 0 280 Q 10% 100, 20% 20 L 100% 10" stroke="var(--dk-positive)" stroke-width="3" fill="none" opacity="0.8"/>
</svg>
<!-- Operating point marker -->
<div style="position: absolute; left: 10%; bottom: 75%; width: 20px; height: 20px; background: var(--dk-accent); border-radius: 50%; border: 3px solid var(--dk-bg); box-shadow: 0 0 0 2px var(--dk-accent), 0 0 16px rgba(217,119,6,0.4);"></div>
<div style="position: absolute; left: 12%; bottom: 77%; font-size: 15px; color: var(--dk-accent-light); font-weight: 700; white-space: nowrap;">10% sampling</div>
<div style="position: absolute; left: 12%; bottom: 70%; font-size: 14px; color: var(--dk-text-secondary); white-space: nowrap;">$6,000/month, 95% coverage</div>
<!-- X-axis label -->
<div style="position: absolute; bottom: -24px; left: 0; font-size: 14px; color: var(--dk-text-muted);">0%</div>
<div style="position: absolute; bottom: -24px; right: 0; font-size: 14px; color: var(--dk-text-muted);">100%</div>
<div style="position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); font-size: 14px; color: var(--dk-text-secondary);">Sampling Rate</div>
</div>
<!-- Legend -->
<div style="margin-top: 16px; display: flex; gap: 32px; justify-content: center;">
<div style="display: flex; align-items: center; gap: 8px;">
<div style="width: 24px; height: 3px; background: var(--dk-negative);"></div>
<span style="font-size: 14px; color: var(--dk-text-secondary);">Platform cost</span>
</div>
<div style="display: flex; align-items: center; gap: 8px;">
<div style="width: 24px; height: 3px; background: var(--dk-positive);"></div>
<span style="font-size: 14px; color: var(--dk-text-secondary);">Detection coverage</span>
</div>
</div>