diff --git a/apps/web/__tests__/components/habits/habit-card.test.tsx b/apps/web/__tests__/components/habits/habit-card.test.tsx
index 4996f3c9a..4fbc47b5e 100644
--- a/apps/web/__tests__/components/habits/habit-card.test.tsx
+++ b/apps/web/__tests__/components/habits/habit-card.test.tsx
@@ -78,7 +78,7 @@ describe('HabitCard', () => {
     const habit = createMockHabit()
     render(<HabitCard habit={habit} />)
     const article = screen.getByLabelText('Exercise')
-    expect(article.tagName).toBe('ARTICLE')
+    expect(article.tagName).toBe('BUTTON')
   })
 
   it('calls onDetail when card is clicked', () => {
@@ -129,7 +129,7 @@ describe('HabitCard', () => {
   it('applies opacity-40 when habit is completed', () => {
     const habit = createMockHabit({ isCompleted: true })
     const { container } = render(<HabitCard habit={habit} />)
-    const article = container.querySelector('article')
+    const article = container.querySelector('button[aria-label]')
     expect(article?.className).toContain('opacity-40')
   })
 
@@ -352,21 +352,13 @@ describe('HabitCard', () => {
     expect(screen.getByText('habits.actions.openSubHabits')).toBeDefined()
   })
 
-  it('handles keyboard Enter to trigger card click', () => {
+  it('card button is focusable and clickable (Enter/Space handled natively)', () => {
     const onDetail = vi.fn()
     const habit = createMockHabit()
     render(<HabitCard habit={habit} onDetail={onDetail} />)
-    const article = screen.getByLabelText('Exercise')
-    fireEvent.keyDown(article, { key: 'Enter' })
-    expect(onDetail).toHaveBeenCalledOnce()
-  })
-
-  it('handles keyboard Space to trigger card click', () => {
-    const onDetail = vi.fn()
-    const habit = createMockHabit()
-    render(<HabitCard habit={habit} onDetail={onDetail} />)
-    const article = screen.getByLabelText('Exercise')
-    fireEvent.keyDown(article, { key: ' ' })
+    const card = screen.getByLabelText('Exercise')
+    expect(card.tagName).toBe('BUTTON')
+    fireEvent.click(card)
     expect(onDetail).toHaveBeenCalledOnce()
   })
 
@@ -380,14 +372,14 @@ describe('HabitCard', () => {
   it('uses child CSS classes at depth > 0', () => {
     const habit = createMockHabit()
     const { container } = render(<HabitCard habit={habit} depth={1} />)
-    const article = container.querySelector('article')
+    const article = container.querySelector('button[aria-label]')
     expect(article?.className).toContain('habit-card-child')
   })
 
   it('uses parent CSS classes at depth 0', () => {
     const habit = createMockHabit()
     const { container } = render(<HabitCard habit={habit} depth={0} />)
-    const article = container.querySelector('article')
+    const article = container.querySelector('button[aria-label]')
     expect(article?.className).toContain('habit-card-parent')
   })
 
@@ -396,7 +388,7 @@ describe('HabitCard', () => {
     const { container } = render(
       <HabitCard habit={habit} isSelectMode={true} isSelected={true} />,
     )
-    const article = container.querySelector('article')
+    const article = container.querySelector('button[aria-label]')
     expect(article?.className).toContain('ring-2')
   })
 
diff --git a/apps/web/app/(app)/page.tsx b/apps/web/app/(app)/page.tsx
index c27832430..032388395 100644
--- a/apps/web/app/(app)/page.tsx
+++ b/apps/web/app/(app)/page.tsx
@@ -278,7 +278,7 @@ export default function TodayPage() {
   const { tags } = useTags()
 
   // Show general on today preference (local storage)
-  const [showGeneralOnToday] = useState(() => {
+  const [showGeneralOnToday, _setShowGeneralOnToday] = useState(() => {
     if (typeof globalThis === 'undefined' || typeof globalThis.localStorage === 'undefined') return true // NOSONAR - SSR guard
     return localStorage.getItem('orbit_show_general_on_today') !== 'false'
   })
diff --git a/apps/web/app/(app)/upgrade/page.tsx b/apps/web/app/(app)/upgrade/page.tsx
index 746992a6c..5ddfcfd73 100644
--- a/apps/web/app/(app)/upgrade/page.tsx
+++ b/apps/web/app/(app)/upgrade/page.tsx
@@ -421,6 +421,348 @@ function PlanCards({ plans, hasProAccess, checkoutLoading, discountedAmount, onC
   )
 }
 
+// ---------------------------------------------------------------------------
+// Billing dashboard (S3776: extracted to reduce cognitive complexity)
+// ---------------------------------------------------------------------------
+
+interface BillingDashboardProps {
+  billing: ReturnType<typeof useBilling>['billing']
+  isBillingLoading: boolean
+  isBillingError: boolean
+  profile: { aiMessagesUsed: number; aiMessagesLimit: number; isLifetimePro?: boolean } | null
+  locale: string
+  dateFnsLocale: Locale
+  usagePercent: number
+  usageUrgent: boolean
+  portalError: string
+  onOpenPortal: () => void
+  onRetryBilling: () => void
+  t: ReturnType<typeof useTranslations>
+}
+
+function BillingDashboard({
+  billing, isBillingLoading, isBillingError, profile, locale, dateFnsLocale,
+  usagePercent, usageUrgent, portalError, onOpenPortal, onRetryBilling, t,
+}: Readonly<BillingDashboardProps>) {
+  return (
+    <div className="space-y-3">
+      {/* Loading */}
+      {isBillingLoading && (
+        <>
+          <div className="bg-surface rounded-[var(--radius-xl)] shadow-[var(--shadow-sm)] p-5">
+            <div className="flex items-center gap-4">
+              <div className="size-12 rounded-full bg-surface-elevated skeleton-shimmer shrink-0" />
+              <div className="space-y-2 flex-1">
+                <div className="h-4 w-28 bg-surface-elevated rounded skeleton-shimmer" />
+                <div className="h-3 w-44 bg-surface-elevated rounded skeleton-shimmer" />
+              </div>
+            </div>
+          </div>
+          <div className="bg-surface rounded-[var(--radius-xl)] shadow-[var(--shadow-sm)] p-5 space-y-3">
+            <div className="h-3 w-20 bg-surface-elevated rounded skeleton-shimmer" />
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <div className="h-3.5 w-24 bg-surface-elevated rounded skeleton-shimmer" />
+                <div className="h-3.5 w-16 bg-surface-elevated rounded skeleton-shimmer" />
+              </div>
+              <div className="h-1.5 w-full bg-surface-elevated rounded-full skeleton-shimmer" />
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Error */}
+      {isBillingError && !billing && !isBillingLoading && (
+        <div className="bg-surface rounded-[var(--radius-xl)] border border-border-muted p-8 text-center space-y-3">
+          <AlertTriangle className="size-8 text-text-muted mx-auto" />
+          <p className="text-sm text-text-secondary">{t('upgrade.billing.error')}</p>
+          <button className="text-primary text-sm font-semibold hover:underline" onClick={onRetryBilling}>
+            {t('upgrade.billing.retry')}
+          </button>
+        </div>
+      )}
+
+      {/* Loaded: billing data available (Stripe Pro) */}
+      {billing && (
+        <>
+          {/* Plan card */}
+          <div className="bg-surface rounded-[var(--radius-xl)] shadow-[var(--shadow-sm)] p-5">
+            <div className="flex items-center gap-4">
+              <div className="bg-primary/15 rounded-full size-12 flex items-center justify-center shrink-0">
+                <BadgeCheck className="size-6 text-primary" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <h2 className="text-base font-bold text-text-primary">
+                    {billing.interval === 'yearly' ? t('upgrade.billing.plan.yearly') : t('upgrade.billing.plan.monthly')}
+                  </h2>
+                  {billing.cancelAtPeriodEnd && (
+                    <span className="text-[10px] font-bold uppercase px-2 py-0.5 rounded-full bg-amber-500/15 text-amber-400 border border-amber-500/20">
+                      {t('upgrade.billing.plan.canceledBadge')}
+                    </span>
+                  )}
+                  {!billing.cancelAtPeriodEnd && billing.status === 'past_due' && (
+                    <span className="text-[10px] font-bold uppercase px-2 py-0.5 rounded-full bg-red-500/15 text-red-400 border border-red-500/20">
+                      {t('upgrade.billing.plan.pastDue')}
+                    </span>
+                  )}
+                </div>
+                <p className="text-sm text-text-secondary mt-0.5">
+                  {billing.cancelAtPeriodEnd
+                    ? t('upgrade.billing.plan.canceledHint', { date: formatBillingDate(billing.currentPeriodEnd, locale, dateFnsLocale) })
+                    : t('upgrade.billing.plan.renewsOn', { date: formatBillingDate(billing.currentPeriodEnd, locale, dateFnsLocale) })}
+                  {billing.amountPerPeriod > 0 && (
+                    <span className="text-text-muted">
+                      {' '}&middot;{' '}{formatPrice(billing.amountPerPeriod, billing.currency)}
+                      {billing.interval === 'yearly' ? t('upgrade.plans.yearly.period') : t('upgrade.plans.monthly.period')}
+                    </span>
+                  )}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Payment method */}
+          {billing.paymentMethod && (
+            <div className="bg-surface rounded-[var(--radius-xl)] shadow-[var(--shadow-sm)] p-5">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3 min-w-0">
+                  <CreditCard className="size-8 text-text-muted shrink-0" />
+                  <div className="min-w-0">
+                    <p className="text-sm font-medium text-text-primary">
+                      {t('upgrade.billing.payment.card', {
+                        brand: formatCardBrand(billing.paymentMethod.brand),
+                        last4: billing.paymentMethod.last4,
+                      })}
+                    </p>
+                    <p className="text-xs text-text-muted mt-0.5">
+                      {t('upgrade.billing.payment.expires', {
+                        month: String(billing.paymentMethod.expMonth).padStart(2, '0'),
+                        year: billing.paymentMethod.expYear,
+                      })}
+                    </p>
+                  </div>
+                </div>
+                <button
+                  className="px-3 py-1.5 rounded-[var(--radius-lg)] text-xs font-semibold text-text-secondary bg-surface-elevated border border-border hover:bg-surface-overlay transition-colors shrink-0"
+                  onClick={onOpenPortal}
+                >
+                  {t('upgrade.billing.payment.change')}
+                </button>
+              </div>
+            </div>
+          )}
+
+          <UsageStats usagePercent={usagePercent} usageUrgent={usageUrgent} profile={profile} t={t} />
+
+          {/* Invoice history */}
+          {billing.recentInvoices.length > 0 && (
+            <div className="bg-surface rounded-[var(--radius-xl)] shadow-[var(--shadow-sm)] overflow-hidden">
+              <div className="p-5 pb-3">
+                <h3 className="form-label">{t('upgrade.billing.invoices.title')}</h3>
+              </div>
+              <div className="divide-y divide-border-muted">
+                {billing.recentInvoices.map((invoice) => (
+                  <div key={invoice.id} className="px-5 py-3 flex items-center justify-between gap-2">
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <span className="text-sm text-text-primary font-medium">
+                          {formatBillingDate(invoice.date, locale, dateFnsLocale)}
+                        </span>
+                        <span className="text-[10px] font-medium uppercase px-1.5 py-0.5 rounded-full bg-surface-elevated text-text-muted border border-border-muted">
+                          {invoiceReasonLabelFn(invoice.billingReason, t)}
+                        </span>
+                      </div>
+                      <span
+                        className={`text-[10px] font-bold uppercase px-1.5 py-0.5 rounded-full ${invoiceStatusClassName(invoice.status)}`}
+                      >
+                        {invoiceStatusLabelFn(invoice.status, t)}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 shrink-0">
+                      <span className="text-sm font-semibold text-text-primary">
+                        {formatPrice(invoice.amountPaid, invoice.currency)}
+                      </span>
+                      {(invoice.invoicePdf ?? invoice.hostedInvoiceUrl) && (
+                        <a
+                          href={invoice.invoicePdf ?? invoice.hostedInvoiceUrl ?? undefined}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-text-muted hover:text-text-primary transition-colors"
+                          title={t('upgrade.billing.invoices.download')}
+                        >
+                          <Download className="size-4" />
+                        </a>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Manage subscription */}
+          <div className="space-y-2 pt-1">
+            <button
+              className="w-full py-3 rounded-[var(--radius-xl)] bg-surface-elevated text-text-primary text-sm font-semibold border border-border hover:bg-surface-overlay transition-all duration-200 active:scale-[0.98]"
+              onClick={onOpenPortal}
+            >
+              {t('upgrade.billing.actions.manage')}
+            </button>
+            <p className="text-xs text-text-muted text-center">{t('upgrade.billing.actions.manageHint')}</p>
+            {portalError && <p className="text-xs text-red-400 text-center">{portalError}</p>}
+          </div>
+        </>
+      )}
+
+      {/* Loaded: no billing data (lifetime Pro or no Stripe subscription) */}
+      {!isBillingLoading && !isBillingError && !billing && (
+        <>
+          {/* Plan card */}
+          <div className="bg-surface rounded-[var(--radius-xl)] shadow-[var(--shadow-sm)] p-5">
+            <div className="flex items-center gap-4">
+              <div className="bg-primary/15 rounded-full size-12 flex items-center justify-center shrink-0">
+                <Sparkles className="size-6 text-primary" />
+              </div>
+              <div className="min-w-0">
+                <h2 className="text-base font-bold text-text-primary">
+                  {profile?.isLifetimePro ? t('upgrade.billing.plan.lifetime') : t('upgrade.alreadyPro')}
+                </h2>
+                <p className="text-sm text-text-secondary mt-0.5">
+                  {profile?.isLifetimePro ? t('upgrade.billing.plan.lifetimeHint') : t('upgrade.manageHint')}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <UsageStats usagePercent={usagePercent} usageUrgent={usageUrgent} profile={profile} t={t} />
+        </>
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Pricing section (S3776: extracted to reduce cognitive complexity)
+// ---------------------------------------------------------------------------
+
+interface PricingSectionProps {
+  profile: { isTrialActive?: boolean } | null
+  plans: ReturnType<typeof useSubscriptionPlans>['plans']
+  isLoadingPlans: boolean
+  isPlansError: boolean
+  trialExpired: boolean
+  trialDaysLeft: number | null
+  trialUrgent: boolean
+  hasProAccess: boolean
+  checkoutLoading: string | null
+  checkoutError: string
+  discountedAmount: (amount: number) => number
+  onCheckout: (interval: 'monthly' | 'yearly') => void
+  onRetryPlans: () => void
+  t: ReturnType<typeof useTranslations>
+}
+
+function PricingSection({
+  profile, plans, isLoadingPlans, isPlansError, trialExpired, trialDaysLeft, trialUrgent,
+  hasProAccess, checkoutLoading, checkoutError, discountedAmount, onCheckout, onRetryPlans, t,
+}: Readonly<PricingSectionProps>) {
+  return (
+    <>
+      {/* Trial countdown banner */}
+      {profile?.isTrialActive && (
+        <div
+          className={`rounded-[var(--radius-xl)] p-4 mb-4 flex items-center gap-3 border ${
+            trialUrgent
+              ? 'bg-amber-500/10 border-amber-500/20'
+              : 'bg-primary/10 border-primary/20'
+          }`}
+        >
+          <Clock className={`size-5 shrink-0 ${trialUrgent ? 'text-amber-400' : 'text-primary'}`} />
+          <p className={`text-sm font-medium ${trialUrgent ? 'text-amber-400' : 'text-text-primary'}`}>
+            {trialDaysLeft === 0
+              ? t('trial.banner.lastDay')
+              : plural(t('trial.banner.daysLeft', { days: trialDaysLeft ?? 0 }), trialDaysLeft ?? 0)}
+          </p>
+        </div>
+      )}
+
+      {/* Trial expired emotional section */}
+      {trialExpired && (
+        <div className="bg-surface rounded-[var(--radius-xl)] shadow-[var(--shadow-sm)] p-5 mb-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Sparkles className="size-5 text-primary" />
+            <span className="text-sm font-bold text-text-primary">{t('trial.expired.title')}</span>
+          </div>
+          <p className="form-label">
+            {t('trial.expired.dontLose')}
+          </p>
+          <ul className="space-y-2">
+            {trialExpiredFeatures.map((feature) => (
+              <li key={feature} className="flex items-center gap-2.5">
+                <CheckCircle2 className="size-4 text-primary shrink-0" />
+                <span className="text-sm text-text-secondary">{t(feature)}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* PRICING PLAN CARDS */}
+
+      {/* Loading skeletons */}
+      {isLoadingPlans && (
+        <div className="space-y-3 mb-6">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="rounded-[var(--radius-xl)] p-5 border border-border-muted">
+              <div className="flex items-center justify-between mb-4">
+                <div className="h-4 w-20 bg-surface-elevated rounded skeleton-shimmer" />
+                <div className="h-6 w-16 bg-surface-elevated rounded-full skeleton-shimmer" />
+              </div>
+              <div className="space-y-2.5 mb-4">
+                <div className="h-3 w-3/4 bg-surface-elevated rounded skeleton-shimmer" />
+                <div className="h-3 w-1/2 bg-surface-elevated rounded skeleton-shimmer" />
+                <div className="h-3 w-2/3 bg-surface-elevated rounded skeleton-shimmer" />
+              </div>
+              <div className="h-10 w-full bg-surface-elevated rounded-[var(--radius-lg)] skeleton-shimmer" />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Error state */}
+      {isPlansError && !plans && !isLoadingPlans && (
+        <div className="bg-surface rounded-[var(--radius-xl)] border border-border-muted p-8 text-center space-y-3 mb-6">
+          <AlertTriangle className="size-8 text-text-muted mx-auto" />
+          <p className="text-sm text-text-secondary">{t('upgrade.plans.error')}</p>
+          <button className="text-primary text-sm font-semibold hover:underline" onClick={onRetryPlans}>
+            {t('upgrade.plans.retry')}
+          </button>
+        </div>
+      )}
+
+      {/* Plan cards */}
+      {plans && (
+        <PlanCards
+          plans={plans}
+          hasProAccess={hasProAccess}
+          checkoutLoading={checkoutLoading}
+          discountedAmount={discountedAmount}
+          onCheckout={onCheckout}
+          t={t}
+        />
+      )}
+
+      {checkoutError && (
+        <p className="text-xs text-red-400 text-center">{checkoutError}</p>
+      )}
+
+      {/* Feature comparison */}
+      <FeatureComparisonTable t={t} />
+    </>
+  )
+}
+
 // ---------------------------------------------------------------------------
 // Main page
 // ---------------------------------------------------------------------------
@@ -505,293 +847,37 @@ export default function UpgradePage() {
 
       {/* Already Pro: Billing Dashboard */}
       {hasProAccess && !profile?.isTrialActive ? (
-        <div className="space-y-3">
-          {/* Loading */}
-          {isBillingLoading && (
-            <>
-              <div className="bg-surface rounded-[var(--radius-xl)] shadow-[var(--shadow-sm)] p-5">
-                <div className="flex items-center gap-4">
-                  <div className="size-12 rounded-full bg-surface-elevated skeleton-shimmer shrink-0" />
-                  <div className="space-y-2 flex-1">
-                    <div className="h-4 w-28 bg-surface-elevated rounded skeleton-shimmer" />
-                    <div className="h-3 w-44 bg-surface-elevated rounded skeleton-shimmer" />
-                  </div>
-                </div>
-              </div>
-              <div className="bg-surface rounded-[var(--radius-xl)] shadow-[var(--shadow-sm)] p-5 space-y-3">
-                <div className="h-3 w-20 bg-surface-elevated rounded skeleton-shimmer" />
-                <div className="space-y-2">
-                  <div className="flex items-center justify-between">
-                    <div className="h-3.5 w-24 bg-surface-elevated rounded skeleton-shimmer" />
-                    <div className="h-3.5 w-16 bg-surface-elevated rounded skeleton-shimmer" />
-                  </div>
-                  <div className="h-1.5 w-full bg-surface-elevated rounded-full skeleton-shimmer" />
-                </div>
-              </div>
-            </>
-          )}
-
-          {/* Error */}
-          {isBillingError && !billing && !isBillingLoading && (
-            <div className="bg-surface rounded-[var(--radius-xl)] border border-border-muted p-8 text-center space-y-3">
-              <AlertTriangle className="size-8 text-text-muted mx-auto" />
-              <p className="text-sm text-text-secondary">{t('upgrade.billing.error')}</p>
-              <button className="text-primary text-sm font-semibold hover:underline" onClick={() => refetchBilling()}>
-                {t('upgrade.billing.retry')}
-              </button>
-            </div>
-          )}
-
-          {/* Loaded: billing data available (Stripe Pro) */}
-          {billing && (
-            <>
-              {/* Plan card */}
-              <div className="bg-surface rounded-[var(--radius-xl)] shadow-[var(--shadow-sm)] p-5">
-                <div className="flex items-center gap-4">
-                  <div className="bg-primary/15 rounded-full size-12 flex items-center justify-center shrink-0">
-                    <BadgeCheck className="size-6 text-primary" />
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <div className="flex items-center gap-2">
-                      <h2 className="text-base font-bold text-text-primary">
-                        {billing.interval === 'yearly' ? t('upgrade.billing.plan.yearly') : t('upgrade.billing.plan.monthly')}
-                      </h2>
-                      {billing.cancelAtPeriodEnd && (
-                        <span className="text-[10px] font-bold uppercase px-2 py-0.5 rounded-full bg-amber-500/15 text-amber-400 border border-amber-500/20">
-                          {t('upgrade.billing.plan.canceledBadge')}
-                        </span>
-                      )}
-                      {!billing.cancelAtPeriodEnd && billing.status === 'past_due' && (
-                        <span className="text-[10px] font-bold uppercase px-2 py-0.5 rounded-full bg-red-500/15 text-red-400 border border-red-500/20">
-                          {t('upgrade.billing.plan.pastDue')}
-                        </span>
-                      )}
-                    </div>
-                    <p className="text-sm text-text-secondary mt-0.5">
-                      {billing.cancelAtPeriodEnd
-                        ? t('upgrade.billing.plan.canceledHint', { date: formatBillingDate(billing.currentPeriodEnd, locale, dateFnsLocale) })
-                        : t('upgrade.billing.plan.renewsOn', { date: formatBillingDate(billing.currentPeriodEnd, locale, dateFnsLocale) })}
-                      {billing.amountPerPeriod > 0 && (
-                        <span className="text-text-muted">
-                          {' '}&middot;{' '}{formatPrice(billing.amountPerPeriod, billing.currency)}
-                          {billing.interval === 'yearly' ? t('upgrade.plans.yearly.period') : t('upgrade.plans.monthly.period')}
-                        </span>
-                      )}
-                    </p>
-                  </div>
-                </div>
-              </div>
-
-              {/* Payment method */}
-              {billing.paymentMethod && (
-                <div className="bg-surface rounded-[var(--radius-xl)] shadow-[var(--shadow-sm)] p-5">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-3 min-w-0">
-                      <CreditCard className="size-8 text-text-muted shrink-0" />
-                      <div className="min-w-0">
-                        <p className="text-sm font-medium text-text-primary">
-                          {t('upgrade.billing.payment.card', {
-                            brand: formatCardBrand(billing.paymentMethod.brand),
-                            last4: billing.paymentMethod.last4,
-                          })}
-                        </p>
-                        <p className="text-xs text-text-muted mt-0.5">
-                          {t('upgrade.billing.payment.expires', {
-                            month: String(billing.paymentMethod.expMonth).padStart(2, '0'),
-                            year: billing.paymentMethod.expYear,
-                          })}
-                        </p>
-                      </div>
-                    </div>
-                    <button
-                      className="px-3 py-1.5 rounded-[var(--radius-lg)] text-xs font-semibold text-text-secondary bg-surface-elevated border border-border hover:bg-surface-overlay transition-colors shrink-0"
-                      onClick={handleOpenPortal}
-                    >
-                      {t('upgrade.billing.payment.change')}
-                    </button>
-                  </div>
-                </div>
-              )}
-
-              <UsageStats usagePercent={usagePercent} usageUrgent={usageUrgent} profile={profile ?? null} t={t} />
-
-              {/* Invoice history */}
-              {billing.recentInvoices.length > 0 && (
-                <div className="bg-surface rounded-[var(--radius-xl)] shadow-[var(--shadow-sm)] overflow-hidden">
-                  <div className="p-5 pb-3">
-                    <h3 className="form-label">{t('upgrade.billing.invoices.title')}</h3>
-                  </div>
-                  <div className="divide-y divide-border-muted">
-                    {billing.recentInvoices.map((invoice) => (
-                      <div key={invoice.id} className="px-5 py-3 flex items-center justify-between gap-2">
-                        <div className="min-w-0">
-                          <div className="flex items-center gap-2 mb-1">
-                            <span className="text-sm text-text-primary font-medium">
-                              {formatBillingDate(invoice.date, locale, dateFnsLocale)}
-                            </span>
-                            <span className="text-[10px] font-medium uppercase px-1.5 py-0.5 rounded-full bg-surface-elevated text-text-muted border border-border-muted">
-                              {invoiceReasonLabelFn(invoice.billingReason, t)}
-                            </span>
-                          </div>
-                          <span
-                            className={`text-[10px] font-bold uppercase px-1.5 py-0.5 rounded-full ${invoiceStatusClassName(invoice.status)}`}
-                          >
-                            {invoiceStatusLabelFn(invoice.status, t)}
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-2 shrink-0">
-                          <span className="text-sm font-semibold text-text-primary">
-                            {formatPrice(invoice.amountPaid, invoice.currency)}
-                          </span>
-                          {(invoice.invoicePdf ?? invoice.hostedInvoiceUrl) && (
-                            <a
-                              href={invoice.invoicePdf ?? invoice.hostedInvoiceUrl ?? undefined}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="text-text-muted hover:text-text-primary transition-colors"
-                              title={t('upgrade.billing.invoices.download')}
-                            >
-                              <Download className="size-4" />
-                            </a>
-                          )}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Manage subscription */}
-              <div className="space-y-2 pt-1">
-                <button
-                  className="w-full py-3 rounded-[var(--radius-xl)] bg-surface-elevated text-text-primary text-sm font-semibold border border-border hover:bg-surface-overlay transition-all duration-200 active:scale-[0.98]"
-                  onClick={handleOpenPortal}
-                >
-                  {t('upgrade.billing.actions.manage')}
-                </button>
-                <p className="text-xs text-text-muted text-center">{t('upgrade.billing.actions.manageHint')}</p>
-                {portalError && <p className="text-xs text-red-400 text-center">{portalError}</p>}
-              </div>
-            </>
-          )}
-
-          {/* Loaded: no billing data (lifetime Pro or no Stripe subscription) */}
-          {!isBillingLoading && !isBillingError && !billing && (
-            <>
-              {/* Plan card */}
-              <div className="bg-surface rounded-[var(--radius-xl)] shadow-[var(--shadow-sm)] p-5">
-                <div className="flex items-center gap-4">
-                  <div className="bg-primary/15 rounded-full size-12 flex items-center justify-center shrink-0">
-                    <Sparkles className="size-6 text-primary" />
-                  </div>
-                  <div className="min-w-0">
-                    <h2 className="text-base font-bold text-text-primary">
-                      {profile?.isLifetimePro ? t('upgrade.billing.plan.lifetime') : t('upgrade.alreadyPro')}
-                    </h2>
-                    <p className="text-sm text-text-secondary mt-0.5">
-                      {profile?.isLifetimePro ? t('upgrade.billing.plan.lifetimeHint') : t('upgrade.manageHint')}
-                    </p>
-                  </div>
-                </div>
-              </div>
-
-              <UsageStats usagePercent={usagePercent} usageUrgent={usageUrgent} profile={profile ?? null} t={t} />
-            </>
-          )}
-        </div>
+        <BillingDashboard
+          billing={billing}
+          isBillingLoading={isBillingLoading}
+          isBillingError={isBillingError}
+          profile={profile ?? null}
+          locale={locale}
+          dateFnsLocale={dateFnsLocale}
+          usagePercent={usagePercent}
+          usageUrgent={usageUrgent}
+          portalError={portalError}
+          onOpenPortal={handleOpenPortal}
+          onRetryBilling={() => refetchBilling()}
+          t={t}
+        />
       ) : (
-        <>
-          {/* Trial countdown banner */}
-          {profile?.isTrialActive && (
-            <div
-              className={`rounded-[var(--radius-xl)] p-4 mb-4 flex items-center gap-3 border ${
-                trialUrgent
-                  ? 'bg-amber-500/10 border-amber-500/20'
-                  : 'bg-primary/10 border-primary/20'
-              }`}
-            >
-              <Clock className={`size-5 shrink-0 ${trialUrgent ? 'text-amber-400' : 'text-primary'}`} />
-              <p className={`text-sm font-medium ${trialUrgent ? 'text-amber-400' : 'text-text-primary'}`}>
-                {trialDaysLeft === 0
-                  ? t('trial.banner.lastDay')
-                  : plural(t('trial.banner.daysLeft', { days: trialDaysLeft ?? 0 }), trialDaysLeft ?? 0)}
-              </p>
-            </div>
-          )}
-
-          {/* Trial expired emotional section */}
-          {trialExpired && (
-            <div className="bg-surface rounded-[var(--radius-xl)] shadow-[var(--shadow-sm)] p-5 mb-4 space-y-3">
-              <div className="flex items-center gap-2">
-                <Sparkles className="size-5 text-primary" />
-                <span className="text-sm font-bold text-text-primary">{t('trial.expired.title')}</span>
-              </div>
-              <p className="form-label">
-                {t('trial.expired.dontLose')}
-              </p>
-              <ul className="space-y-2">
-                {trialExpiredFeatures.map((feature) => (
-                  <li key={feature} className="flex items-center gap-2.5">
-                    <CheckCircle2 className="size-4 text-primary shrink-0" />
-                    <span className="text-sm text-text-secondary">{t(feature)}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-
-          {/* PRICING PLAN CARDS */}
-
-          {/* Loading skeletons */}
-          {isLoadingPlans && (
-            <div className="space-y-3 mb-6">
-              {[1, 2, 3].map((i) => (
-                <div key={i} className="rounded-[var(--radius-xl)] p-5 border border-border-muted">
-                  <div className="flex items-center justify-between mb-4">
-                    <div className="h-4 w-20 bg-surface-elevated rounded skeleton-shimmer" />
-                    <div className="h-6 w-16 bg-surface-elevated rounded-full skeleton-shimmer" />
-                  </div>
-                  <div className="space-y-2.5 mb-4">
-                    <div className="h-3 w-3/4 bg-surface-elevated rounded skeleton-shimmer" />
-                    <div className="h-3 w-1/2 bg-surface-elevated rounded skeleton-shimmer" />
-                    <div className="h-3 w-2/3 bg-surface-elevated rounded skeleton-shimmer" />
-                  </div>
-                  <div className="h-10 w-full bg-surface-elevated rounded-[var(--radius-lg)] skeleton-shimmer" />
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* Error state */}
-          {isPlansError && !plans && !isLoadingPlans && (
-            <div className="bg-surface rounded-[var(--radius-xl)] border border-border-muted p-8 text-center space-y-3 mb-6">
-              <AlertTriangle className="size-8 text-text-muted mx-auto" />
-              <p className="text-sm text-text-secondary">{t('upgrade.plans.error')}</p>
-              <button className="text-primary text-sm font-semibold hover:underline" onClick={() => refetchPlans()}>
-                {t('upgrade.plans.retry')}
-              </button>
-            </div>
-          )}
-
-          {/* Plan cards */}
-          {plans && (
-            <PlanCards
-              plans={plans}
-              hasProAccess={hasProAccess}
-              checkoutLoading={checkoutLoading}
-              discountedAmount={discountedAmount}
-              onCheckout={handleCheckout}
-              t={t}
-            />
-          )}
-
-          {checkoutError && (
-            <p className="text-xs text-red-400 text-center">{checkoutError}</p>
-          )}
-
-          {/* Feature comparison */}
-          <FeatureComparisonTable t={t} />
-        </>
+        <PricingSection
+          profile={profile ?? null}
+          plans={plans}
+          isLoadingPlans={isLoadingPlans}
+          isPlansError={isPlansError}
+          trialExpired={trialExpired}
+          trialDaysLeft={trialDaysLeft}
+          trialUrgent={trialUrgent}
+          hasProAccess={hasProAccess}
+          checkoutLoading={checkoutLoading}
+          checkoutError={checkoutError}
+          discountedAmount={discountedAmount}
+          onCheckout={handleCheckout}
+          onRetryPlans={() => refetchPlans()}
+          t={t}
+        />
       )}
     </div>
   )
diff --git a/apps/web/app/(auth)/login/page.tsx b/apps/web/app/(auth)/login/page.tsx
index 08fb1d786..6ec9d85b0 100644
--- a/apps/web/app/(auth)/login/page.tsx
+++ b/apps/web/app/(auth)/login/page.tsx
@@ -252,6 +252,71 @@ function CodeStep({
   )
 }
 
+// ---------------------------------------------------------------------------
+// API helpers (S3776: extracted to reduce cognitive complexity)
+// ---------------------------------------------------------------------------
+
+async function fetchAuthEndpoint(
+  url: string,
+  body: Record<string, unknown>,
+): Promise<unknown> {
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  if (!response.ok) {
+    const data = await response.json().catch(() => null)
+    throw data ?? { error: 'Authentication failed' }
+  }
+  return response.json()
+}
+
+function handleVerifySuccess(
+  loginResponse: LoginResponse,
+  referralCode: string | undefined,
+  setAuth: (lr: LoginResponse) => void,
+  setSuccessMessage: (msg: string | null) => void,
+  t: ReturnType<typeof useTranslations>,
+  router: ReturnType<typeof useRouter>,
+  getReturnUrl: () => string,
+) {
+  setAuth(loginResponse)
+  if (referralCode) {
+    localStorage.setItem('orbit_referral_applied', '1')
+    document.cookie = 'referral_code=;max-age=0;path=/;samesite=strict;secure'
+  }
+  if (loginResponse.wasReactivated) {
+    setSuccessMessage(t('profile.deleteAccount.reactivated'))
+  }
+  router.push(getReturnUrl())
+}
+
+function handleCodeDigitInput(
+  index: number,
+  cleanValue: string,
+  codeDigits: string[],
+  setCodeDigits: (digits: string[]) => void,
+  codeInputRefs: React.RefObject<(HTMLInputElement | null)[]>,
+  verifyCode: (code: string) => void,
+) {
+  if (cleanValue.length > 1) {
+    const { digits: newCodeDigits, nextFocusIndex } = fillCodeDigits(index, cleanValue, codeDigits)
+    setCodeDigits(newCodeDigits)
+    codeInputRefs.current[nextFocusIndex]?.focus()
+    if (newCodeDigits.join('').length === 6) {
+      setTimeout(() => verifyCode(newCodeDigits.join('')), 0)
+    }
+    return
+  }
+  const newCodeDigits = [...codeDigits]
+  newCodeDigits[index] = cleanValue
+  setCodeDigits(newCodeDigits)
+  if (cleanValue && index < 5) {
+    codeInputRefs.current[index + 1]?.focus()
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Main component
 // ---------------------------------------------------------------------------
@@ -330,17 +395,7 @@ export default function LoginPage() {
     setErrorMessage(null)
 
     try {
-      const response = await fetch('/api/auth/send-code', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email, language: locale }),
-      })
-
-      if (!response.ok) {
-        const data = await response.json().catch(() => null)
-        throw data ?? { error: 'Authentication failed' }
-      }
-
+      await fetchAuthEndpoint('/api/auth/send-code', { email, language: locale })
       setStep('code')
       setSuccessMessage(t('auth.codeSent'))
       startResendCountdown()
@@ -359,36 +414,13 @@ export default function LoginPage() {
     setSuccessMessage(null)
 
     try {
-      const response = await fetch('/api/auth/verify-code', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          email,
-          code,
-          language: locale,
-          ...(referralCode ? { referralCode } : {}),
-        }),
-      })
-
-      if (!response.ok) {
-        const data = await response.json().catch(() => null)
-        throw data ?? { error: 'Authentication failed' }
-      }
-
-      const loginResponse = (await response.json()) as LoginResponse
-
-      setAuth(loginResponse)
-
-      if (referralCode) {
-        localStorage.setItem('orbit_referral_applied', '1')
-        document.cookie = 'referral_code=;max-age=0;path=/;samesite=strict;secure'
-      }
-
-      if (loginResponse.wasReactivated) {
-        setSuccessMessage(t('profile.deleteAccount.reactivated'))
-      }
-
-      router.push(getReturnUrl())
+      const loginResponse = await fetchAuthEndpoint('/api/auth/verify-code', {
+        email,
+        code,
+        language: locale,
+        ...(referralCode ? { referralCode } : {}),
+      }) as LoginResponse
+      handleVerifySuccess(loginResponse, referralCode, setAuth, setSuccessMessage, t, router, getReturnUrl)
     } catch (err: unknown) {
       setErrorMessage(extractError(err, t))
     } finally {
@@ -403,17 +435,7 @@ export default function LoginPage() {
     setSuccessMessage(null)
 
     try {
-      const response = await fetch('/api/auth/send-code', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email, language: locale }),
-      })
-
-      if (!response.ok) {
-        const data = await response.json().catch(() => null)
-        throw data ?? { error: 'Authentication failed' }
-      }
-
+      await fetchAuthEndpoint('/api/auth/send-code', { email, language: locale })
       setSuccessMessage(t('auth.codeSent'))
       startResendCountdown()
     } catch (err: unknown) {
@@ -432,24 +454,7 @@ export default function LoginPage() {
 
   function onCodeInput(index: number, value: string) {
     const cleanValue = value.replaceAll(/\D/g, '')
-
-    if (cleanValue.length > 1) {
-      const { digits: newCodeDigits, nextFocusIndex } = fillCodeDigits(index, cleanValue, codeDigits)
-      setCodeDigits(newCodeDigits)
-      codeInputRefs.current[nextFocusIndex]?.focus()
-      if (newCodeDigits.join('').length === 6) {
-        setTimeout(() => verifyCode(newCodeDigits.join('')), 0)
-      }
-      return
-    }
-
-    const newCodeDigits = [...codeDigits]
-    newCodeDigits[index] = cleanValue
-    setCodeDigits(newCodeDigits)
-
-    if (cleanValue && index < 5) {
-      codeInputRefs.current[index + 1]?.focus()
-    }
+    handleCodeDigitInput(index, cleanValue, codeDigits, setCodeDigits, codeInputRefs, (c) => verifyCode(c))
   }
 
   function onCodePaste(event: React.ClipboardEvent) {
diff --git a/apps/web/components/habits/habit-card.tsx b/apps/web/components/habits/habit-card.tsx
index 53a310d43..cac2dd85b 100644
--- a/apps/web/components/habits/habit-card.tsx
+++ b/apps/web/components/habits/habit-card.tsx
@@ -1086,16 +1086,10 @@ export function HabitCard({
   return (
     <>
       <div style={isChild ? indentStyle : undefined}>
-        <article
-          className={articleClassName}
-          tabIndex={0}
+        <button
+          type="button"
+          className={`${articleClassName} text-left w-full`}
           onClick={handleCardClick}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault()
-              handleCardClick()
-            }
-          }}
           aria-label={habit.title}
         >
           <div
@@ -1151,7 +1145,7 @@ export function HabitCard({
               />
             )}
           </div>
-        </article>
+        </button>
       </div>
 
       {showActionsMenu && (
diff --git a/apps/web/components/habits/habit-form-fields.tsx b/apps/web/components/habits/habit-form-fields.tsx
index e956607ba..9880ba6f5 100644
--- a/apps/web/components/habits/habit-form-fields.tsx
+++ b/apps/web/components/habits/habit-form-fields.tsx
@@ -408,6 +408,66 @@ function ScheduledReminderSection({
   )
 }
 
+// ---------------------------------------------------------------------------
+// Slip alert sub-component (S3776: extracted to reduce cognitive complexity)
+// ---------------------------------------------------------------------------
+
+interface SlipAlertSectionProps {
+  hasProAccess: boolean
+  slipAlertEnabled: boolean
+  slipAlertLabelId: string
+  slipAlertDescriptionId: string
+  onToggle: () => void
+  t: ReturnType<typeof useTranslations>
+}
+
+function SlipAlertSection({
+  hasProAccess, slipAlertEnabled, slipAlertLabelId, slipAlertDescriptionId, onToggle, t,
+}: Readonly<SlipAlertSectionProps>) {
+  return (
+    <div className="space-y-3 rounded-lg border border-border-muted p-4 bg-surface-ground">
+      {hasProAccess ? (
+        /* Pro unlocked state */
+        <div className="flex items-center justify-between">
+          <div className="flex flex-col gap-0.5">
+            <div className="flex items-center gap-2">
+              <ShieldAlert className="size-4 text-primary" />
+              <span id={slipAlertLabelId} className="text-sm font-medium text-text-primary">{t('habits.form.slipAlert')}</span>
+            </div>
+            <span id={slipAlertDescriptionId} className="text-xs text-text-muted ml-6">{t('habits.form.slipAlertDescription')}</span>
+          </div>
+          <button
+            type="button"
+            role="switch"
+            aria-checked={slipAlertEnabled}
+            aria-labelledby={slipAlertLabelId}
+            aria-describedby={slipAlertDescriptionId}
+            className={`relative w-10 h-5.5 rounded-full transition-colors duration-200 shrink-0 ml-3 ${slipAlertEnabled ? 'bg-primary' : 'bg-surface-elevated'}`}
+            onClick={onToggle}
+          >
+            <span className={`absolute top-0.5 left-0.5 w-4.5 h-4.5 bg-white rounded-full shadow transition-transform duration-200 ${slipAlertEnabled ? 'translate-x-4.5' : 'translate-x-0'}`} />
+          </button>
+        </div>
+      ) : (
+        /* Pro locked state */
+        <div className="flex items-center justify-between">
+          <div className="flex flex-col gap-0.5">
+            <div className="flex items-center gap-2">
+              <ShieldAlert className="size-4 text-text-muted" />
+              <span className="text-sm font-medium text-text-muted">{t('habits.form.slipAlert')}</span>
+              <span className="text-[10px] font-bold uppercase tracking-wider bg-primary/20 text-primary px-1.5 py-0.5 rounded-full">{t('common.proBadge')}</span>
+            </div>
+            <span className="text-xs text-text-muted ml-6">{t('habits.form.slipAlertDescription')}</span>
+          </div>
+          <div className="relative w-10 h-5.5 rounded-full bg-surface-elevated shrink-0 ml-3 opacity-50 cursor-not-allowed">
+            <span className="absolute top-0.5 left-0.5 w-4.5 h-4.5 bg-white rounded-full shadow" />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -1000,46 +1060,14 @@ export function HabitFormFields({
 
       {/* Slip alert toggle (only when bad habit) */}
       {watchedIsBadHabit && (
-        <div className="space-y-3 rounded-lg border border-border-muted p-4 bg-surface-ground">
-          {hasProAccess ? (
-            /* Pro unlocked state */
-            <div className="flex items-center justify-between">
-              <div className="flex flex-col gap-0.5">
-                <div className="flex items-center gap-2">
-                  <ShieldAlert className="size-4 text-primary" />
-                  <span id={slipAlertLabelId} className="text-sm font-medium text-text-primary">{t('habits.form.slipAlert')}</span>
-                </div>
-                <span id={slipAlertDescriptionId} className="text-xs text-text-muted ml-6">{t('habits.form.slipAlertDescription')}</span>
-              </div>
-              <button
-                type="button"
-                role="switch"
-                aria-checked={watchedSlipAlertEnabled}
-                aria-labelledby={slipAlertLabelId}
-                aria-describedby={slipAlertDescriptionId}
-                className={`relative w-10 h-5.5 rounded-full transition-colors duration-200 shrink-0 ml-3 ${watchedSlipAlertEnabled ? 'bg-primary' : 'bg-surface-elevated'}`}
-                onClick={() => setValue('slipAlertEnabled', !watchedSlipAlertEnabled, { shouldDirty: true })}
-              >
-                <span className={`absolute top-0.5 left-0.5 w-4.5 h-4.5 bg-white rounded-full shadow transition-transform duration-200 ${watchedSlipAlertEnabled ? 'translate-x-4.5' : 'translate-x-0'}`} />
-              </button>
-            </div>
-          ) : (
-            /* Pro locked state */
-            <div className="flex items-center justify-between">
-              <div className="flex flex-col gap-0.5">
-                <div className="flex items-center gap-2">
-                  <ShieldAlert className="size-4 text-text-muted" />
-                  <span className="text-sm font-medium text-text-muted">{t('habits.form.slipAlert')}</span>
-                  <span className="text-[10px] font-bold uppercase tracking-wider bg-primary/20 text-primary px-1.5 py-0.5 rounded-full">{t('common.proBadge')}</span>
-                </div>
-                <span className="text-xs text-text-muted ml-6">{t('habits.form.slipAlertDescription')}</span>
-              </div>
-              <div className="relative w-10 h-5.5 rounded-full bg-surface-elevated shrink-0 ml-3 opacity-50 cursor-not-allowed">
-                <span className="absolute top-0.5 left-0.5 w-4.5 h-4.5 bg-white rounded-full shadow" />
-              </div>
-            </div>
-          )}
-        </div>
+        <SlipAlertSection
+          hasProAccess={hasProAccess}
+          slipAlertEnabled={watchedSlipAlertEnabled}
+          slipAlertLabelId={slipAlertLabelId}
+          slipAlertDescriptionId={slipAlertDescriptionId}
+          onToggle={() => setValue('slipAlertEnabled', !watchedSlipAlertEnabled, { shouldDirty: true })}
+          t={t}
+        />
       )}
 
       {/* Slot for extra fields (e.g. sub-habits) */}
diff --git a/apps/web/components/ui/app-overlay.tsx b/apps/web/components/ui/app-overlay.tsx
index b8c258000..94b2cf925 100644
--- a/apps/web/components/ui/app-overlay.tsx
+++ b/apps/web/components/ui/app-overlay.tsx
@@ -201,16 +201,18 @@ export function AppOverlay({
   if (isEntering) panelClass = 'translate-y-full sm:translate-y-0 sm:scale-95 opacity-0'
   else if (isLeaving) panelClass = 'opacity-0'
 
-  const overlay = ( // NOSONAR - backdrop dismiss via pointer; keyboard equivalent handled by Escape key listener
+  const overlay = (
     <div
       className="fixed inset-0 z-[9999] flex items-end sm:items-center justify-center sm:p-4"
-      onPointerDown={handlePointerDown}
-      onClick={handleBackdropClick}
     >
-      {/* Backdrop */}
-      <div
-        aria-hidden="true"
-        className={`absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300 ease-[var(--ease-out)] ${backdropClass}`}
+      {/* Backdrop dismiss button -- covers the full overlay area behind the panel */}
+      <button
+        type="button"
+        className={`absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300 ease-[var(--ease-out)] cursor-default ${backdropClass}`}
+        aria-label="Close"
+        tabIndex={-1}
+        onPointerDown={handlePointerDown}
+        onClick={handleBackdropClick}
       />
 
       {/* Panel - bottom sheet on mobile, centered modal on desktop */}