Match verifier bio and statement editors, narrow org steps

The org bio textarea now uses the same muted, borderless fill as the
'Your name' field on the identity step, starts at min-h-200, and
auto-grows as the user types. The verifier statement (Milkdown) editor
gets the same muted wrapper and a scoped 200px min-height so the two
steps match. The bio, statement, and how-to steps drop from max-w-3xl
to max-w-xl so the boxes and the tutorial's last step aren't oversized.

src/components/OnboardingGate.tsx

@@ -423,11 +423,12 @@ function CaptiveOverlay() {
           key={step}
           className={cn(
             'w-full mx-auto animate-in fade-in slide-in-from-bottom-2 duration-300',
-            // Bio, statement & how-to steps host a large text surface /
-            // markdown editor / two-column tutorial and need more room than
-            // the narrow base screens.
+            // Bio, statement & how-to steps host a text surface / markdown
+            // editor / tutorial and want a slightly roomier column than the
+            // narrow base screens — but not the full-width 3xl that left the
+            // text boxes and tutorial feeling oversized.
             step === 'orgBio' || step === 'orgStatement' || step === 'orgVerifyHowto'
-              ? 'max-w-3xl'
+              ? 'max-w-xl'
               : 'max-w-md',
           )}
         >

src/components/onboarding/VerifierBioStep.tsx

@@ -47,9 +47,28 @@ export function VerifierBioStep({
         <Textarea
           id="verifier-org-bio"
           value={draft.about}
-          onChange={(e) => onChange({ about: e.target.value })}
+          onChange={(e) => {
+            onChange({ about: e.target.value });
+            // Auto-grow: reset then size to content so the box expands
+            // downward as the user types instead of scrolling internally.
+            e.target.style.height = 'auto';
+            e.target.style.height = `${e.target.scrollHeight}px`;
+          }}
+          onFocus={(e) => {
+            e.target.style.height = 'auto';
+            e.target.style.height = `${e.target.scrollHeight}px`;
+          }}
           placeholder={t('onboarding.verifier.bio.placeholder')}
-          className="min-h-[400px] resize-none p-3 text-lg leading-7 md:text-lg"
+          className={cn(
+            'min-h-[200px] w-full resize-none overflow-hidden p-3',
+            'text-lg leading-7 md:text-lg',
+            // Match the muted, borderless look of the "Your name" field on
+            // the previous identity step (ProfileCard's editable inputs).
+            'rounded-lg border-2 border-transparent bg-muted/40',
+            'hover:bg-muted/60 hover:border-border',
+            'focus-visible:bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-offset-0',
+            'placeholder:text-muted-foreground/40 transition-colors duration-150',
+          )}
           aria-required
         />
       </div>

src/components/organizations/VerifierStatementEditor.tsx

@@ -62,10 +62,18 @@ export function VerifierStatementEditor({
 
   return (
     <div className={cn('space-y-4', className)}>
-      {/* Borderless WYSIWYG markdown editor — no surrounding card/box so it
-          blends into the step. */}
-      <div className="rounded-lg overflow-hidden focus-within:ring-1 focus-within:ring-ring">
+      {/* Muted, borderless WYSIWYG markdown editor that matches the "Tell us
+          about your organization" bio box on the previous step — same muted
+          fill, no border until focus, and the same min height. */}
+      <div
+        className={cn(
+          'rounded-lg border-2 border-transparent bg-muted/40 overflow-hidden transition-colors duration-150',
+          'hover:bg-muted/60 hover:border-border',
+          'focus-within:bg-transparent focus-within:border-primary',
+        )}
+      >
         <MilkdownEditor
+          className="verifier-statement-editor"
           value={value}
           onChange={onChange}
           placeholder={t('verifier.placeholder')}

src/index.css

@@ -690,6 +690,15 @@
   @apply min-h-[350px];
 }
 
+/* Verifier-statement instance: shorter, transparent fill so it matches the
+   muted bio textarea on the previous onboarding step. The muted background
+   and border live on the wrapper in VerifierStatementEditor, not here. */
+.milkdown-editor.verifier-statement-editor .editor,
+.milkdown-editor.verifier-statement-editor .ProseMirror,
+.milkdown-editor.verifier-statement-editor .milkdown-content .ProseMirror {
+  @apply min-h-[200px] bg-transparent;
+}
+
 /* Room navigation arrow nudge — subtle horizontal pulse */
 @keyframes room-arrow-nudge-left {
   0%, 100% { transform: translateX(0); }