Chart Prompts

Restyle my chart in the "Headcount Plan" 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 people-planning dashboard from a modern HR platform. Friendly, precise and quietly optimistic: a row of KPI numbers on white, then the chart sitting in a soft warm gray card.

Colors (use these exact values):
- Page: #FFFFFF. Chart card: #F4F1EC with 14px corner radius.
- Actual (primary series): #4338CA (indigo), also used for the headline KPI numeral and the hire-count row.
- Plan (comparison series): #F29E74 (peach), dashed. Its text labels use the darker #B95B2E so they stay legible.
- Gap shading between plan and actual: #FAD3BD at 75% opacity.
- Text: #1F2233 ink, #6E6960 secondary. Gridlines and dividers: #E2DCD3.

Typography (Google Fonts):
- Rubik throughout, with tabular figures for all numbers.
- Eyebrow: 11px 500 uppercase, 1.8px letter-spacing, #6E6960 (organization and report name).
- Title: 28px 600, -0.3px letter-spacing, ink, stating the finding in sentence case. Subtitle: 15px 400 #6E6960 with measure, unit and period.
- KPI labels 11px 500 uppercase with 1.2px letter-spacing; KPI numerals 36px 600; KPI notes 13px 400 #6E6960 set beside the numeral on its baseline.
- Legend 13px 500 ink; axis labels 12px #6E6960; end labels 14px 600; annotations 13px italic.

Layout:
- 40px side margins. Eyebrow, title and subtitle at the top left.
- A KPI row under the header: four equal columns 220px wide (the headline value in indigo, then context such as open roles, offers out, starts this month), separated by 1px #E2DCD3 vertical dividers about 54px tall.
- The chart card spans the full width below the KPI row (about 340px tall). A one-line legend sits in the card's top left; the plot sits inside with about 64px left padding for y labels and about 90px right padding for end labels.
- A small source line at the very bottom of the page, outside the card, 11.5px #6E6960.

Axes and grid:
- Horizontal gridlines only, 1px #E2DCD3, every 5 units; y labels right-aligned 12px left of the plot. No y-axis line.
- A 1px #6E6960 baseline. Period labels centered in each period band 20px below it.
- Under the period labels, a thin 1px divider and a table-like "Starts" row: the per-period increase printed as "+2" in 13px 600 indigo, or an en dash in #6E6960 when zero.

Marks:
- Line chart: step lines (step-after, horizontal across each period, vertical risers at period boundaries). Actual is a 3px solid indigo step with round joins; plan is a 2.5px dashed peach step (6 on, 4 off). Fill the area between the two steps with the gap shading. At every riser where actual increases, place a hire-wave marker: a 4.5px radius white circle with a 2px indigo ring. Label both series at the right end ("Plan 62" in #B95B2E, "Actual 57" in indigo, 14px 600).
- Bar chart: square-ended indigo bars about 55% of the period band for actual, with the plan value drawn as a 2.5px dashed peach horizontal tick spanning the bar plus 6px each side; shade any shortfall between bar top and plan tick with #FAD3BD. Keep the KPI row, card and Starts row.

Labels and annotation:
- Mark the widest gap with a 1px #B95B2E I-beam bracket (4px caps) centered in that period, and a short italic note above the plan line ending just left of it ("Widest gap: 8 in October").

Avoid: drop shadows, gradients, avatars or people icons, more than two data colors, a boxed legend, and filling the whole plot with color.

When you're done, render the chart and check that the KPI numerals match the data (latest actual, starts in the latest period), the gap shading only covers where plan exceeds actual, the hire-wave markers sit exactly on the risers, and the end labels do not collide.