Now I can see the StatPill component. I need to make it more compact with reduced sizes. Let me update the component:

Updated the StatPill component to be more compact and understated. The pills now have: max height of 72px, reduced padding (10px 8px), smaller icon size (1.2rem), smaller value font (1.4rem), and smaller label font (0.7rem). This ensures the summary card remains the dominant hero element while the stat pills serve as supporting information without competing visually.

Now I can see the issues. The main problems are:

1. Results screen uses max-w-2xl (672px) instead of 860px, and the stats pills use grid-cols-2 which doesn't change for desktop
2. Form screen uses max-w-2xl (672px) instead of 860px
3. Timeline uses window.innerWidth < 768 for mobile detection, but needs to also check the container width

Let me fix all these issues:

Now let me fix the Timeline component to properly detect desktop layout based on container width, not just window width:

Fixed the responsive layout issues:

1. Main container max-width: Changed from max-w-2xl (672px) to max-w-[860px] on both form and results screens, ensuring the container reaches 860px on desktop.
2. Stats pills grid: Added md:grid-cols-4 so on screens 768px+ the 4 stats pills appear in a single row instead of 2x2.
3. Timeline mobile detection: Changed from window.innerWidth < 768 to containerWidth < 768 so the timeline uses desktop layout when the container is wide enough, regardless of the v0 preview panel width. This ensures proper scaling at 860px+ container width.