Chart Prompts

Restyle my chart in the "Pricing Tiers" style described below. Keep my data, chart type, title meaning and units; change only the presentation. Use the charting library this project already uses (plain SVG if there is none). If the library can't express a detail, draw it in a custom layer instead of dropping it. Measurements assume a 960 x 600 chart; scale them proportionally.

Mood: a dark SaaS pricing page. Three plan cards side by side; the recommended middle card is raised, lit from above and ringed by a warm gradient. Each card holds a small chart of its own.

Colors (use these exact values):
- Background: #1A1026 (deep plum). Cards: #221533 with a 1px white stroke at 9%; the raised card #2A1A3E.
- Ring and pill: a gradient from #F0479C (magenta) to #FF9A4D (warm orange).
- Series: #B9A4FF (lilac), #F0479C (magenta), #FF9A4D (orange), in time or rank order with the latest or most important in orange.
- Text: #FBEFF6 (soft pink-white) primary, #B8A6C4 secondary, #8A7896 tertiary.

Typography (Google Fonts):
- Red Hat Display 700 for the title (26px, -0.4px letter-spacing, centered), tier names (22px), the card's big number (40px, -1px letter-spacing, tabular) and the pill (12.5px).
- Red Hat Text for everything else: subtitle 14px 400, group labels 12px 500, bar values 11.5px 600 tabular, bullets 12.5px 500, legend 12.5px 500, source 11.5px 400.

Layout:
- Title and subtitle centered at the top, then a small centered legend of 16 x 10px rounded swatches.
- Three cards, 272px wide with 24px gaps, 18px radius, content aligned across all three. The middle card extends 18px higher than the others, has a 1.5px gradient ring, a black drop shadow (0 18px 20px at 45%), a magenta radial glow inside its top half (34% fading out) and a blurred magenta halo (ellipse at 35%, 28px blur) above it. A "Most Popular" pill (26px tall, fully rounded, gradient fill, white text) straddles its top edge, centered.
- Inside each card: tier name, a small price line, the big number with its unit beside it, a hairline divider (white at 10%), the bars, then two check-mark bullets (16px circle at 8% white, or 22% magenta on the popular card, with a 1.8px check in lilac or orange).

Axes and grid:
- No axes or gridlines; every card shares one value scale, stated in the source line. Group labels sit above each group of bars.

Marks:
- Bar chart: horizontal grouped bars, 10px tall with 4px gaps inside a group and fully rounded right ends (square at the baseline), a minimum drawn length of 10px. Only the latest bar in each group carries its value, 8px past the bar end.
- Line chart: one small line chart per card, 2.5px lines in the three series colors with round caps, 4px end dots, and the latest value labelled at the end; the popular card's line in the magenta-to-orange gradient.

Avoid: light backgrounds, a raised card that breaks alignment of the content rows, more than one highlighted card, cool blues, and gridlines.

When you're done, render the chart and check that all three cards use the same scale, the bullets' numbers are computed from the data, and the Most Popular pill is centered on the raised card's top edge.