Coming Soon Roll Pill

Build a disabled "coming soon" pill. It looks like a normal link pill, but it can't be clicked, and on hover its label rolls up and is replaced by "Coming soon".

Stack: Next.js (App Router), React, TypeScript and Tailwind CSS v4.

DESIGN SYSTEM (use exactly):
- Page background #edeef2. Surface (light cards, light pills) #f6f6f8. Muted (gray cards) #d9d9dc. Border #dcdde2.
- Ink #1e1e1e for text, dark cards and primary buttons. Muted text #8a8a8f. Text on dark: #ffffff.
- Accents: purple #c084fc, lime #a3f207.
- Font: Geist Sans. Headings semibold with tight tracking (-0.04em) and tight leading (0.95–1.05).
- Cards: 28px corner radius. Buttons and chips: fully rounded pills (9999px).
- When a card wraps pills, its radius = pill radius + card padding (e.g. 40px pills + 8px padding → 28px card).
- Side gutter: 30px from 768px up, 20px on phones.
- Links and buttons never change color, background or opacity on hover.

COMPONENT: ComingSoon({ label, className }) — a server component (CSS only). className sets the pill's look so it matches its neighbors, e.g. "flex h-10 items-center justify-center rounded-full bg-[#edeef2]".

MARKUP
- Outer <span>: role="link", aria-disabled="true", aria-label="{label} — coming soon", cursor not-allowed, user-select none. Make it a named group (group/soon).
  - It is a span, not an <a> or <button>, so it can't be focused or clicked.
- Inside, an aria-hidden <span> that is a CSS grid with overflow hidden and line-height 1.2.
- Two children stacked in the same grid cell (col 1 / row 1). The grid sizes itself to the wider of the two, so the pill's width never jumps.
  1. The label, text centered: translateY 0, and translateY -100% on group hover.
  2. "Coming soon", text centered: translateY 100%, and translateY 0 on group hover.
- Both use transition-transform, 300ms, ease-out.

TOUCH SCREENS
- Touch screens can't hover, so inside the label add a small tag: margin-left 6px, fully rounded, lime #a3f207, text #1e1e1e, 10px semibold uppercase, padding 2px 6px, text "Soon".
- It is hidden by default and shown only under @media (hover: none).

USAGE
- In a dropdown: the same class as the other pills (40px, #edeef2).
- In a chip row or mobile menu: the same chip classes plus a dashed border, to hint that it's not available yet.

Motion only — no color, background or opacity change on hover.