Separate account deletion from the routine profile options so it reads as a destructive action.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(app)/profile/_components/ProfilePage.view.tsx

@@ -237,17 +237,8 @@ export function ProfilePageView({
         leadingIcon: "mail",
         showDescription: false,
       },
-      {
-        id: "delete-account",
-        title: t("deleteAccount"),
-        description: "",
-        onClick: onOpenDeleteAccount,
-        leadingIcon: "warning",
-        variant: "danger",
-        showDescription: false,
-      },
     ];
-  }, [t, onSignOut, onOpenDeleteAccount, onOpenEmailChange, onStartNewCustomRule]);
+  }, [t, onSignOut, onOpenEmailChange, onStartNewCustomRule]);
 
   const ruleCardShellClass =
     "w-full !max-w-full cursor-default !gap-3 !rounded-[12px] shadow-[0_0_48px_rgba(0,0,0,0.1)] lg:!rounded-[24px] lg:shadow-[0_0_24px_rgba(0,0,0,0.1)]";
@@ -408,6 +399,31 @@ export function ProfilePageView({
               </nav>
             </section>
           </div>
+
+          <section
+            className="flex w-full flex-col items-start gap-3 rounded-[12px] border border-[var(--color-border-default-negative-primary)] bg-[var(--color-surface-default-negative-secondary)] px-4 py-4 lg:px-6 lg:py-6"
+            aria-labelledby="profile-delete-heading"
+          >
+            <h2
+              id="profile-delete-heading"
+              className="text-small-label text-[var(--color-content-default-negative-primary)]"
+            >
+              {t("deleteAccount")}
+            </h2>
+            <p className="max-w-[640px] text-small-paragraph text-[var(--color-content-default-secondary)]">
+              {t("deleteAccountIntro")}
+            </p>
+            <Button
+              type="button"
+              size="small"
+              buttonType="danger"
+              palette="default"
+              className="self-start"
+              onClick={onOpenDeleteAccount}
+            >
+              {t("deleteAccountConfirm")}
+            </Button>
+          </section>
         </div>
       </div>
 
@@ -502,7 +518,7 @@ export function ProfilePageView({
             <Button
               type="button"
               size="medium"
-              buttonType="filled"
+              buttonType="danger"
               palette="default"
               onClick={onConfirmDeleteAccount}
               disabled={accountDeleteBusy}