<!-- source-hash: b039cee3855a4c8e259a4c0cd027fea4 -->
A client-side React component providing styled benefit/feature cards with multiple visual variants and a responsive grid layout container.

## Key Components

### `BenefitCard`
Renders a single benefit card with an optional icon, title, and description. Supports three visual variants:

| Variant | Description |
|---|---|
| `default` | Light background with standard body typography |
| `dark` | Transparent background with monospace heading and shadow |
| `auth-figma` | Transparent with larger padding and heading-scale typography |

**Props:**
- `icon` — optional React node rendered before the text content
- `title` — required card heading
- `description` — required supporting text
- `variant` — visual style (`'default'` | `'dark'` | `'auth-figma'`)
- `className` — additional Tailwind classes

### `BenefitCardGrid`
A responsive grid container that wraps multiple `BenefitCard` instances and automatically applies divider borders between items.

**Props:**
- `children` — one or more `BenefitCard` nodes
- `columns` — grid column count: `2` | `3` | `4` (default: `2`)
- `className` — additional Tailwind classes

## Usage Example

```typescript
import { BenefitCard, BenefitCardGrid } from './benefit-card'
import { ShieldIcon } from 'lucide-react'

export function Features() {
  return (
    <BenefitCardGrid columns={3}>
      <BenefitCard
        icon={<ShieldIcon />}
        title="Secure by Default"
        description="End-to-end encryption across all endpoints."
        variant="default"
      />
      <BenefitCard
        icon={<ShieldIcon />}
        title="AI-Powered"
        description="Mingo AI resolves tickets before they escalate."
        variant="dark"
      />
      <BenefitCard
        title="Open Source"
        description="Built on trusted open-source foundations."
        variant="auth-figma"
      />
    </BenefitCardGrid>
  )
}
```