<!-- source-hash: 0a0456d4a0a372cdfeb0bc7afca3a55f -->
A Next.js client component that renders a numbered list section highlighting the key value propositions of the OpenFrame/Flamingo platform.

## Key Components

### `WhyItMattersItem` (internal)
A list item component rendering a numbered entry with title and description. Accepts:
- `number` — display number string (e.g. `"1."`)
- `title` — short benefit headline
- `description` — supporting copy
- `isLast?` — omits bottom border on the final item

### `WhyItMatters` (default export)
The parent section component containing four hardcoded value propositions:

| # | Title | Description |
|---|-------|-------------|
| 1 | Cut Costs | Eliminate vendor fees with proven open-source alternatives |
| 2 | Stay in Control | Full visibility and data ownership |
| 3 | Build What You Need | Customize without vendor limitations |
| 4 | Scale Freely | Designed for multi-tenant MSP environments |

## Usage Example

```typescript
import WhyItMatters from '@/components/why-it-matters';

export default function LandingPage() {
  return (
    <main>
      <WhyItMatters />
    </main>
  );
}
```

## Notes

- Marked `"use client"` — requires a Next.js App Router client boundary.
- Styled with Tailwind CSS using `ods-` design tokens (`ods-accent`, `ods-border`, `ods-text-primary`, `ods-card`).
- Items hover to `#2A2A2A` with a smooth transition for subtle interactivity.
- Layout is responsive: stacks vertically on mobile (`flex-col`), switches to row on `md+`.