Now let me check available UI components and set up the project structure:

Let me read the badge and progress components to understand their structure:

Now I have full context. Let me build this multi-step flow. I'll start by updating the theme, layout, and then create all the components.

Now add the custom color tokens to the @theme inline block:

Now update the layout with DM Sans font:

Now let me create the stepper component and the survey screen:

Now create the types file:

Now let me create the mock data and the main page component:

Now create the main page:

Your multi-step AI course recommendation flow is complete. The app ("Pathwise") features a warm cream/teal/amber design system using DM Sans typography and includes all three screens: a conversational survey with selectable cards and toggles, an AI recommendation results page showing 3 ranked courses with circular fit-score visualizations and expandable "why this fits" sections, and a detailed course view with a life-compatibility checklist, ROI snapshot, and confidence prompt with hand-crafted SVG face icons. Screen transitions are animated with smooth fade/slide effects, and the progress stepper in the sticky header tracks your position through the flow.