Onboarding: use ocean background image, show full expertise tag names

- Replace blue gradient with ocean.png background (matches email templates)
- Display expertise tags one per line with full names (no truncation)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/(auth)/onboarding/page.tsx

@@ -221,7 +221,7 @@ export default function OnboardingPage() {
   // Show loading while session hydrates or fetching user data
   if (sessionStatus === 'loading' || userLoading || !initialized) {
     return (
-      <div className="absolute inset-0 -m-4 flex items-center justify-center p-4 md:p-8 bg-gradient-to-br from-[#053d57] to-[#557f8c]">
+      <div className="absolute inset-0 -m-4 flex items-center justify-center p-4 md:p-8 bg-[#053d57] bg-[url('https://s3.monaco-opc.com/public/ocean.png')] bg-cover bg-center bg-no-repeat">
         <AnimatedCard>
         <Card className="w-full max-w-lg shadow-2xl overflow-hidden">
           <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
@@ -236,7 +236,7 @@ export default function OnboardingPage() {
   }
 
   return (
-    <div className="absolute inset-0 -m-4 flex items-center justify-center p-4 md:p-8 bg-gradient-to-br from-[#053d57] to-[#557f8c]">
+    <div className="absolute inset-0 -m-4 flex items-center justify-center p-4 md:p-8 bg-[#053d57] bg-[url('https://s3.monaco-opc.com/public/ocean.png')] bg-cover bg-center bg-no-repeat">
       <AnimatedCard>
       <Card className="w-full max-w-lg max-h-[85vh] overflow-y-auto overflow-hidden shadow-2xl">
         <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />

src/components/shared/expertise-select.tsx

@@ -212,7 +212,7 @@ export function ExpertiseSelect({
                 </button>
 
                 {isExpanded && (
-                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-1 p-2">
+                  <div className="grid grid-cols-1 gap-1 p-2">
                     {categoryTags.map((tag) => {
                       const isSelected = value.includes(tag.name)
                       const isLocked = isTagLocked(tag.name)
@@ -261,7 +261,7 @@ export function ExpertiseSelect({
                                 <Check className="h-2 w-2 text-white" />
                               ))}
                           </div>
-                          <span className="text-xs truncate">{tag.name}</span>
+                          <span className="text-xs">{tag.name}</span>
                         </Button>
                       )
                     })}