Phone formatting works, start card moved, registration styling changed

src/components/registration/DynamicFormField.js

@@ -47,6 +47,15 @@ const DynamicFormField = ({
   const hasError = errors.length > 0;
   const errorMessage = errors[0];
 
+  const formatPhoneNumber = (rawValue) => {
+    const digits = String(rawValue || '').replace(/\D/g, '').slice(0, 10);
+    if (digits.length <= 3) return digits;
+    if (digits.length <= 6) {
+      return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+    }
+    return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+  };
+
   // Common input className
   const inputClassName = `h-14 rounded-xl border-2 ${
     hasError
@@ -59,6 +68,11 @@ const DynamicFormField = ({
     const { value: newValue, type: inputType, checked } = e.target;
     if (inputType === 'checkbox') {
       onChange(id, checked);
+      return;
+    }
+    if (type === 'phone') {
+      onChange(id, formatPhoneNumber(newValue));
+      return;
     } else {
       onChange(id, newValue);
     }
@@ -111,6 +125,8 @@ const DynamicFormField = ({
             value={value || ''}
             onChange={handleInputChange}
             placeholder={placeholder}
+            inputMode={type === 'phone' ? 'numeric' : undefined}
+            maxLength={type === 'phone' ? 14 : undefined}
             className={inputClassName}
             data-testid={`field-${id}`}
           />