diff --git a/.env.example b/.env.example
index e26ea42..5450f77 100644
--- a/.env.example
+++ b/.env.example
@@ -5,8 +5,11 @@ VITE_WEEKLY_AI_ENDPOINT=
 VITE_WEEKLY_AI_TOKEN=
 
 # Optional Web Push (same Cloudflare Worker — see AGENTS.md)
-VITE_VAPID_PUBLIC_KEY=
-VITE_PUSH_API_BASE=
+VITE_VAPID_PUBLIC_KEY=
+VITE_PUSH_API_BASE=
+VITE_FEEDBACK_FORM_ENDPOINT=
+# Cloudflare Turnstile site key (public, optional override)
+VITE_FEEDBACK_TURNSTILE_SITE_KEY=
 
 # Optional Firebase sync + share links (Spark free tier — see docs/FIREBASE.md)
 VITE_ENABLE_FIREBASE=0
diff --git a/.env.local.example b/.env.local.example
index 61a5910..b2b3bf6 100644
--- a/.env.local.example
+++ b/.env.local.example
@@ -5,9 +5,11 @@
 # VITE_WEEKLY_AI_ENDPOINT=http://127.0.0.1:8787/weekly-summary
 # VITE_WEEKLY_AI_TOKEN="dev-local-token"
 
-# Web Push (optional — same worker origin as weekly AI)
-# VITE_VAPID_PUBLIC_KEY=<public key from npx web-push generate-vapid-keys>
-# VITE_PUSH_API_BASE=http://127.0.0.1:8787
+# Web Push (optional — same worker origin as weekly AI)
+# VITE_VAPID_PUBLIC_KEY=<public key from npx web-push generate-vapid-keys>
+# VITE_PUSH_API_BASE=http://127.0.0.1:8787
+# VITE_FEEDBACK_FORM_ENDPOINT=https://sillylittle.workflows.okta.com/api/flo/f76fd87ce1bcd200569e2e10fc636fae/invoke
+# VITE_FEEDBACK_TURNSTILE_SITE_KEY=0x4AAAAAADfOpVgdUWD5E_c1
 
 # Firebase (optional) — project men-tell-prod
 # VITE_ENABLE_FIREBASE=1
diff --git a/VERSION b/VERSION
index 6e6f3e6..b0f139e 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-1.12.0
+1.13.7
diff --git a/package-lock.json b/package-lock.json
index df58fb8..022c754 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "mentell",
-  "version": "1.12.0",
+  "version": "1.13.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mentell",
-      "version": "1.12.0",
+      "version": "1.13.7",
       "dependencies": {
         "date-fns": "^4.2.1",
         "dexie": "^4.4.2",
diff --git a/package.json b/package.json
index 836001b..6a1d82c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mentell",
   "private": true,
-  "version": "1.12.0",
+  "version": "1.13.7",
   "type": "module",
   "scripts": {
     "sync:assets": "node scripts/sync-assets.mjs",
diff --git a/src/App.tsx b/src/App.tsx
index fab2d2c..a32a004 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,11 +28,13 @@ import { publicUrl } from './shared/publicUrl'
 import { SCORE_CHANGED_EVENT } from './features/score/scoreEvents'
 import { ShareDashboardPage } from './features/share/ShareDashboardPage'
 import { SyncOnboardingBanner } from './features/settings/SyncOnboardingBanner'
-import { AppLegalFooter } from './components/AppLegalFooter'
-import { PrivacyPolicyPage } from './features/legal/PrivacyPolicyPage'
-import { CharacterLabPage } from './features/character/CharacterLabPage'
-import { CharacterNavIcon } from './features/character/CharacterNavIcon'
-import { DeskCharacterLayout } from './features/character/DeskCharacterLayout'
+import { AppLegalFooter } from './components/AppLegalFooter'
+import { PrivacyPolicyPage } from './features/legal/PrivacyPolicyPage'
+import { FeedbackPage, FeedbackThankYouPage } from './features/feedback/FeedbackPage'
+import { SpeechBubbleIcon } from './components/SpeechBubbleIcon'
+import { CharacterLabPage } from './features/character/CharacterLabPage'
+import { CharacterNavIcon } from './features/character/CharacterNavIcon'
+import { DeskCharacterLayout } from './features/character/DeskCharacterLayout'
 import { LeftDeskMascot } from './features/character/LeftDeskMascot'
 import { MobileHeaderMascot } from './features/character/MobileHeaderMascot'
 import { CharacterTabIconSync } from './features/character/CharacterTabIconSync'
@@ -198,12 +200,14 @@ function App() {
             path="/shop"
             element={<ShopPlaceholder onScoreChange={handleScoreChange} />}
           />
-          <Route path="/settings" element={<SettingsPage />} />
-          <Route path="/character-lab" element={<CharacterLabPage />} />
-          <Route path="/privacy" element={<PrivacyPolicyPage />} />
-          {isShareLinksEnabled() ? (
-            <Route path="/share/:code" element={<ShareDashboardPage />} />
-          ) : null}
+          <Route path="/settings" element={<SettingsPage />} />
+          <Route path="/character-lab" element={<CharacterLabPage />} />
+          <Route path="/privacy" element={<PrivacyPolicyPage />} />
+          <Route path="/feedback" element={<FeedbackPage />} />
+          <Route path="/feedback/thanks" element={<FeedbackThankYouPage />} />
+          {isShareLinksEnabled() ? (
+            <Route path="/share/:code" element={<ShareDashboardPage />} />
+          ) : null}
           <Route path="/archive" element={<ArchivePlaceholder />} />
           <Route path="*" element={<Navigate to="/" replace />} />
         </AnimatedRoutes>
@@ -279,23 +283,32 @@ function TopBar({
               </div>
             </div>
 
-            {!settings.disablePoints ? (
-              <div className="paper flex flex-wrap items-center gap-2 rounded-2xl px-3 py-2">
-                <ScoreTicker
-                  total={score.total}
-                  streak={score.streak}
+            {!settings.disablePoints ? (
+              <div className="paper flex flex-wrap items-center gap-2 rounded-2xl px-3 py-2">
+                <ScoreTicker
+                  total={score.total}
+                  streak={score.streak}
                   streakFreezes={score.streakFreezes}
                   hint={incomingHint}
                   streakOutcome={streakOutcome}
-                />
-                <MobileHeaderMascot />
-              </div>
-            ) : (
-              <div className="paper flex items-center rounded-2xl px-2 py-1 md:hidden">
-                <MobileHeaderMascot />
-              </div>
-            )}
-          </div>
+                />
+                <MobileHeaderMascot />
+              </div>
+            ) : (
+              <div className="paper flex items-center rounded-2xl px-2 py-1 md:hidden">
+                <MobileHeaderMascot />
+              </div>
+            )}
+
+            <Link
+              to="/feedback"
+              className="paper focus-ring flex h-12 w-12 items-center justify-center rounded-2xl transition hover:-translate-y-[1px] hover:shadow-[0_16px_26px_rgba(0,0,0,0.14)]"
+              aria-label="Open feedback form"
+              title="Feedback form"
+            >
+              <SpeechBubbleIcon className="h-5 w-5" />
+            </Link>
+          </div>
 
           <div className="flex items-center gap-2 md:hidden">
             <button
diff --git a/src/components/SpeechBubbleIcon.tsx b/src/components/SpeechBubbleIcon.tsx
new file mode 100644
index 0000000..74300c8
--- /dev/null
+++ b/src/components/SpeechBubbleIcon.tsx
@@ -0,0 +1,20 @@
+export function SpeechBubbleIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d="M6 5.75h12a3.25 3.25 0 0 1 3.25 3.25v5a3.25 3.25 0 0 1-3.25 3.25h-4.9l-4.1 3.25v-3.25H6A3.25 3.25 0 0 1 2.75 14v-5A3.25 3.25 0 0 1 6 5.75Z"
+        stroke="currentColor"
+        strokeWidth="1.7"
+        strokeLinejoin="round"
+      />
+      <circle cx="9" cy="11.5" r="1.15" fill="currentColor" />
+      <circle cx="12" cy="11.5" r="1.15" fill="currentColor" />
+      <circle cx="15" cy="11.5" r="1.15" fill="currentColor" />
+    </svg>
+  )
+}
diff --git a/src/features/feedback/FeedbackPage.tsx b/src/features/feedback/FeedbackPage.tsx
new file mode 100644
index 0000000..d30cc8b
--- /dev/null
+++ b/src/features/feedback/FeedbackPage.tsx
@@ -0,0 +1,1211 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  type FormEvent,
+  type PointerEvent,
+  type ReactNode,
+} from 'react'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { ContactForQuestions } from '../legal/contactEmails'
+import { scrollToTop } from '../../shared/motion/scroll'
+import {
+  feedbackFormConfigured,
+  feedbackTurnstileSiteKey,
+  submitFeedbackForm,
+  type FeedbackFormInput,
+  type FeedbackSubmissionType,
+} from './feedbackSubmission'
+import { FeedbackTurnstile, type FeedbackTurnstileHandle } from './FeedbackTurnstile'
+
+const SUBMISSION_TYPES: Array<{
+  value: FeedbackSubmissionType
+  title: string
+  description: string
+}> = [
+  {
+    value: 'Feedback',
+    title: 'Feedback',
+    description: 'Share a suggestion, a reaction to the app, or a new idea.',
+  },
+  {
+    value: 'Bug Report',
+    title: 'Bug report',
+    description: 'Report broken behavior, missing content, or a reproduction path.',
+  },
+  {
+    value: 'Privacy Inquiry',
+    title: 'Privacy inquiry',
+    description: 'Request access, correction, deletion, migration, or another privacy action.',
+  },
+  {
+    value: 'Security Concern',
+    title: 'Security concern',
+    description: 'Report a vulnerability or a sensitive issue that should be handled carefully.',
+  },
+]
+
+const BUG_FEATURES = [
+  'AI Summaries',
+  'Cloud Sync',
+  'Drafting a Letter',
+  'Viewing a Projection',
+  'Sharing data',
+  'Shoppe',
+  'Other Settings',
+  'Character',
+  'Other',
+] as const
+
+const BUG_FREQUENCIES = ['Once', 'Rarely', 'Sometimes', 'Always'] as const
+
+const FEEDBACK_PROMPTS = ['AI Summary', 'App Experience', 'New Feature', 'Other'] as const
+
+const SECURITY_PRIORITIES = [
+  { value: 0, label: 'P0', description: 'Urgent and active.' },
+  { value: 1, label: 'P1', description: 'High impact.' },
+  { value: 2, label: 'P2', description: 'Important, but not urgent.' },
+  { value: 3, label: 'P3', description: 'Routine.' },
+  { value: 4, label: 'P4', description: 'Low priority.' },
+] as const
+
+const PRIVACY_TYPES = [
+  'Data Download Request',
+  'Data Correction Request',
+  'Data Deletion Request',
+  'Account Deletion Request',
+  'Account Migration Request',
+  'Other',
+] as const
+
+type SignatureSnapshot = {
+  dataUrl: string
+  stampedAt: string | null
+  hasInk: boolean
+}
+
+const selectFieldClassName =
+  'focus-ring rounded-2xl border border-[var(--paper-border)] bg-[var(--paper-bg)] px-4 py-3 text-[var(--paper-ink)]'
+
+function FieldLabel({
+  children,
+  required = false,
+}: {
+  children: ReactNode
+  required?: boolean
+}) {
+  return (
+    <span className="text-sm font-medium">
+      {children}
+      {required ? <span aria-hidden="true" className="ml-1 text-[var(--danger)]">*</span> : null}
+    </span>
+  )
+}
+
+export function FeedbackPage() {
+  const { pathname } = useLocation()
+  const navigate = useNavigate()
+  const formRef = useRef<HTMLFormElement | null>(null)
+  const turnstileRef = useRef<FeedbackTurnstileHandle | null>(null)
+  const turnstileFieldRef = useRef<HTMLInputElement | null>(null)
+  const turnstileResponseRef = useRef('')
+
+  const [title, setTitle] = useState('')
+  const [submissionType, setSubmissionType] = useState<FeedbackSubmissionType>('Feedback')
+
+  const [brDetails, setBrDetails] = useState('')
+  const [brFeature, setBrFeature] = useState('')
+  const [brFeatureOther, setBrFeatureOther] = useState('')
+  const [brFrequency, setBrFrequency] = useState(2)
+  const [brFiles, setBrFiles] = useState<File[]>([])
+
+  const [fbDetails, setFbDetails] = useState('')
+  const [fbPrompt, setFbPrompt] = useState('')
+  const [fbPromptOther, setFbPromptOther] = useState('')
+  const [fbSentiment, setFbSentiment] = useState(3)
+
+  const [scPriority, setScPriority] = useState(2)
+  const [scTarget, setScTarget] = useState('')
+  const [scSensitive, setScSensitive] = useState<'Yes' | 'No' | ''>('')
+
+  const [prEmail, setPrEmail] = useState('')
+  const [prType, setPrType] = useState<string[]>([])
+  const [prTarget, setPrTarget] = useState('')
+  const [prRecipient, setPrRecipient] = useState('')
+  const [prOther, setPrOther] = useState('')
+
+  const [genOpEmail, setGenOpEmail] = useState('')
+
+  const [signatureDataUrl, setSignatureDataUrl] = useState('')
+  const [signatureStampedAt, setSignatureStampedAt] = useState<string | null>(null)
+
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [turnstileResponse, setTurnstileResponse] = useState('')
+
+  useEffect(() => {
+    scrollToTop()
+  }, [pathname])
+
+  const endpointReady = feedbackFormConfigured()
+  const turnstileSiteKey = feedbackTurnstileSiteKey()
+  const showPrivacyFields = submissionType === 'Privacy Inquiry'
+  const showBugFields = submissionType === 'Bug Report'
+  const showFeedbackFields = submissionType === 'Feedback'
+  const showSecurityFields = submissionType === 'Security Concern'
+
+  const selectedPrTypes = prType.join(', ')
+  const selectedBugFeature = summarizeOtherAwareChoice(brFeature, brFeatureOther)
+  const selectedFeedbackPrompt = summarizeOtherAwareChoice(fbPrompt, fbPromptOther)
+
+  const getCurrentTurnstileResponse = () => {
+    const hiddenTurnstileValue = turnstileFieldRef.current?.value.trim() ?? ''
+    if (hiddenTurnstileValue) return hiddenTurnstileValue
+
+    const widgetResponse = turnstileRef.current?.getResponse().trim() ?? ''
+    if (widgetResponse) return widgetResponse
+
+    const domTurnstileResponse =
+      formRef.current
+        ?.querySelector<HTMLInputElement>('input[name="cf-turnstile-response"]')
+        ?.value.trim() ?? ''
+
+    return domTurnstileResponse || turnstileResponseRef.current.trim() || turnstileResponse.trim()
+  }
+
+  const validationError = () => {
+    const currentTurnstileResponse = getCurrentTurnstileResponse()
+
+    if (!title.trim()) return 'Add a title for your submission.'
+
+    if (showBugFields) {
+      if (!brDetails.trim()) return 'Describe the bug you ran into.'
+      if (!brFeature) return 'Choose the affected feature.'
+      if (brFeature === 'Other' && !brFeatureOther.trim()) {
+        return 'Describe the other feature that was affected.'
+      }
+      if (brFiles.length > 3) {
+        return 'Attach no more than 3 files.'
+      }
+    }
+
+    if (showFeedbackFields) {
+      if (!fbDetails.trim()) return 'Describe your feedback or suggestion.'
+    }
+
+    if (showSecurityFields) {
+      if (scSensitive !== 'Yes' && scSensitive !== 'No') {
+        return 'Choose whether this issue is sensitive.'
+      }
+    }
+
+    if (showPrivacyFields) {
+      if (!prEmail.trim()) return 'Add the account email for this privacy request.'
+      if (prType.length === 0) return 'Choose at least one privacy request type.'
+      if (prType.includes('Account Migration Request')) {
+        if (!prTarget.trim()) return 'Add the target email for the migration request.'
+        if (!prRecipient.trim()) return 'Add the new account email for the migration request.'
+      }
+      if (prType.includes('Other') && !prOther.trim()) {
+        return 'Describe the other privacy request.'
+      }
+      if (!signatureDataUrl) return 'Draw your signature before submitting the privacy request.'
+    }
+
+    if (!currentTurnstileResponse) {
+      return 'Complete the Cloudflare verification before submitting.'
+    }
+
+    return null
+  }
+
+  const handleFileChange = (files: FileList | null) => {
+    setError(null)
+    if (!files) {
+      setBrFiles([])
+      return
+    }
+
+    const next = Array.from(files)
+    if (next.length > 3) {
+      setBrFiles([])
+      setError('Attach no more than 3 files.')
+      return
+    }
+
+    const tooLarge = next.find((file) => file.size > 12 * 1024 * 1024)
+    if (tooLarge) {
+      setBrFiles([])
+      setError(`"${tooLarge.name}" is larger than the 12 MB file limit.`)
+      return
+    }
+
+    setBrFiles(next)
+  }
+
+  const handlePrTypeToggle = (value: string) => {
+    setError(null)
+    setPrType((current) =>
+      current.includes(value) ? current.filter((item) => item !== value) : [...current, value],
+    )
+  }
+
+  const handleTurnstileTokenChange = (token: string) => {
+    turnstileResponseRef.current = token
+    if (turnstileFieldRef.current) {
+      turnstileFieldRef.current.value = token
+    }
+    setTurnstileResponse(token)
+    if (token) setError(null)
+  }
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    setError(null)
+
+    const reportable = formRef.current?.reportValidity()
+    if (reportable === false) return
+
+    const customError = validationError()
+    if (customError) {
+      setError(customError)
+      return
+    }
+
+    if (!endpointReady) {
+      setError('Configure VITE_FEEDBACK_FORM_ENDPOINT in your local or GitHub environment.')
+      return
+    }
+
+    const currentTurnstileResponse = getCurrentTurnstileResponse()
+
+    const payload: FeedbackFormInput = {
+      title,
+      submissionType,
+      brDetails,
+      brFiles,
+      brFeature,
+      brFeatureOther,
+      brFrequency,
+      fbDetails,
+      fbPrompt,
+      fbPromptOther,
+      fbSentiment,
+      scPriority,
+      scTarget,
+      scSensitive,
+      prEmail,
+      prType,
+      prTarget,
+      prRecipient,
+      prOther,
+      genOpEmail,
+      prSigBox: signatureDataUrl,
+      turnstileResponse: currentTurnstileResponse,
+    }
+
+    setIsSubmitting(true)
+    try {
+      await submitFeedbackForm(payload, signatureStampedAt ?? new Date().toISOString())
+      navigate('/feedback/thanks', { replace: true })
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : 'Unable to submit the form.')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <section className="paper rounded-3xl p-6">
+        <div className="font-paper text-2xl">Feedback and requests</div>
+        <p className="ink-muted mt-2 text-sm leading-relaxed">
+          Use this form for bug reports, feature requests, privacy requests, and security concerns.
+          The fields below expand based on the type of submission you choose.
+        </p>
+        <p className="ink-muted mt-3 text-sm leading-relaxed">
+          If you need direct help instead, reach the Mentell team using the contact details on the
+          privacy page or the direct email links below.
+        </p>
+        <div className="mt-4">
+          <ContactForQuestions />
+        </div>
+        {!endpointReady ? (
+          <div className="mt-5 rounded-2xl border border-[var(--paper-border)] bg-[rgba(198,29,29,0.08)] p-4 text-sm">
+            Feedback submission is not enabled in this build yet. Set
+            <code className="mx-1 font-mono text-[0.95em]">VITE_FEEDBACK_FORM_ENDPOINT</code>
+            in your local environment and GitHub Actions variables to activate the workflow.
+          </div>
+        ) : null}
+      </section>
+
+      <form
+        ref={formRef}
+        className="space-y-4"
+        onSubmit={handleSubmit}
+        onInputCapture={() => {
+          if (error) setError(null)
+        }}
+      >
+        <CollapsibleCard
+          title="Submission details"
+          subtitle="Start with a clear title and choose what kind of request this is."
+          summary={
+            <div className="space-y-1">
+              <div>
+                <span className="font-medium">Type:</span> {submissionType}
+              </div>
+              <div className="ink-muted text-xs">
+                {title.trim() ? `Title: ${title.trim()}` : 'The title is still blank.'}
+              </div>
+            </div>
+          }
+        >
+          <div className="grid gap-4">
+            <label className="grid gap-2">
+                <FieldLabel required>Title</FieldLabel>
+              <input
+                type="text"
+                className="focus-ring rounded-2xl border border-[var(--paper-border)] bg-transparent px-4 py-3"
+                placeholder="A concise summary of what you want to send"
+                maxLength={120}
+                required
+                value={title}
+                onChange={(event) => setTitle(event.target.value)}
+              />
+              <span className="ink-muted text-xs">
+                Keep it specific enough to sort quickly on the workflow side.
+              </span>
+            </label>
+
+            <fieldset className="grid gap-3">
+              <legend className="text-sm font-medium">What is the reason for your submission?</legend>
+              <div className="grid gap-3 md:grid-cols-2">
+                {SUBMISSION_TYPES.map((option) => {
+                  const active = submissionType === option.value
+                  return (
+                    <button
+                      key={option.value}
+                      type="button"
+                      className={`focus-ring rounded-2xl border px-4 py-3 text-left transition ${
+                        active
+                          ? 'border-[rgba(42,155,88,0.55)] bg-[rgba(42,155,88,0.12)]'
+                          : 'border-[var(--paper-border)] bg-transparent hover:-translate-y-[1px]'
+                      }`}
+                      aria-pressed={active}
+                      onClick={() => {
+                        setSubmissionType(option.value)
+                        setError(null)
+                      }}
+                    >
+                      <div className="font-medium">{option.title}</div>
+                      <div className="ink-muted mt-1 text-xs leading-relaxed">
+                        {option.description}
+                      </div>
+                    </button>
+                  )
+                })}
+              </div>
+            </fieldset>
+          </div>
+        </CollapsibleCard>
+
+        {showBugFields ? (
+          <CollapsibleCard
+            title="Bug report details"
+            subtitle="Describe what broke, what feature was affected, and how often it happens."
+            summary={
+              <div className="space-y-1 text-sm">
+                <div>
+                  <span className="font-medium">Feature:</span> {selectedBugFeature || 'Not set'}
+                </div>
+                <div>
+                  <span className="font-medium">Frequency:</span>{' '}
+                  {BUG_FREQUENCIES[brFrequency]}
+                </div>
+                <div className="ink-muted text-xs">
+                  {brFiles.length ? `${brFiles.length} file(s) attached.` : 'No files attached.'}
+                </div>
+              </div>
+            }
+          >
+            <div className="grid gap-4">
+              <label className="grid gap-2">
+                <FieldLabel required>Describe the bug</FieldLabel>
+                <textarea
+                  className="focus-ring min-h-[150px] rounded-2xl border border-[var(--paper-border)] bg-transparent px-4 py-3"
+                  placeholder="Include steps to reproduce, screenshots, and error messages if you have them."
+                  required
+                  value={brDetails}
+                  onChange={(event) => setBrDetails(event.target.value)}
+                />
+              </label>
+
+              <label className="grid gap-2">
+                <span className="text-sm font-medium">File upload</span>
+                <input
+                  type="file"
+                  className="focus-ring rounded-2xl border border-[var(--paper-border)] bg-transparent px-4 py-3 text-sm"
+                  accept="image/*,video/*"
+                  multiple
+                  onChange={(event) => handleFileChange(event.currentTarget.files)}
+                />
+                <span className="ink-muted text-xs">
+                  Up to 3 files. Images and short video clips are the most useful.
+                </span>
+              </label>
+
+              {brFiles.length ? (
+                <div className="rounded-2xl border border-[var(--paper-border)] p-4">
+                  <div className="text-sm font-medium">Selected files</div>
+                  <ul className="mt-2 grid gap-2 text-sm">
+                    {brFiles.map((file) => (
+                      <li key={`${file.name}-${file.lastModified}`} className="ink-muted">
+                        {file.name}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ) : null}
+
+              <div className="grid gap-2">
+                <FieldLabel required>Which feature was affected?</FieldLabel>
+                <select
+                  className={selectFieldClassName}
+                  value={brFeature}
+                  required
+                  onChange={(event) => {
+                    setBrFeature(event.target.value)
+                    setError(null)
+                    if (event.target.value !== 'Other') setBrFeatureOther('')
+                  }}
+                >
+                  <option className="bg-[var(--paper-bg)] text-[var(--paper-ink)]" value="">
+                    Select a feature
+                  </option>
+                  {BUG_FEATURES.map((feature) => (
+                    <option
+                      key={feature}
+                      className="bg-[var(--paper-bg)] text-[var(--paper-ink)]"
+                      value={feature}
+                    >
+                      {feature}
+                    </option>
+                  ))}
+                </select>
+                {brFeature === 'Other' ? (
+                  <label className="grid gap-2">
+                    <FieldLabel required>Describe the feature</FieldLabel>
+                    <input
+                      type="text"
+                      className="focus-ring rounded-2xl border border-[var(--paper-border)] bg-transparent px-4 py-3"
+                      placeholder="Describe the feature"
+                      required
+                      value={brFeatureOther}
+                      onChange={(event) => setBrFeatureOther(event.target.value)}
+                    />
+                  </label>
+                ) : null}
+              </div>
+
+              <div className="grid gap-2">
+                <div className="flex items-end justify-between gap-3">
+                  <span className="text-sm font-medium">How often does the bug occur?</span>
+                  <span className="ink-muted text-xs">{BUG_FREQUENCIES[brFrequency]}</span>
+                </div>
+                <input
+                  type="range"
+                  min={0}
+                  max={3}
+                  step={1}
+                  className="w-full accent-[var(--accent)]"
+                  value={brFrequency}
+                  onChange={(event) => setBrFrequency(Number(event.target.value))}
+                />
+                <div className="flex justify-between text-[10px] font-medium uppercase tracking-wide text-[var(--paper-ink-muted)]">
+                  {BUG_FREQUENCIES.map((item) => (
+                    <span key={item}>{item}</span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </CollapsibleCard>
+        ) : null}
+
+        {showFeedbackFields ? (
+          <CollapsibleCard
+            title="Feedback details"
+            subtitle="Tell us what sparked the idea and how Mentell feels from your side."
+            summary={
+              <div className="space-y-1 text-sm">
+                <div>
+                  <span className="font-medium">Prompt:</span> {selectedFeedbackPrompt || 'Not set'}
+                </div>
+                <div>
+                  <span className="font-medium">Sentiment:</span> {fbSentiment}/5
+                </div>
+              </div>
+            }
+          >
+            <div className="grid gap-4">
+              <label className="grid gap-2">
+                <FieldLabel required>Describe your feedback or suggestion</FieldLabel>
+                <textarea
+                  className="focus-ring min-h-[150px] rounded-2xl border border-[var(--paper-border)] bg-transparent px-4 py-3"
+                  placeholder="Feature requests, rough edges, or ideas that would make the app better."
+                  required
+                  value={fbDetails}
+                  onChange={(event) => setFbDetails(event.target.value)}
+                />
+              </label>
+
+              <div className="grid gap-2">
+                <FieldLabel>What prompted your feedback?</FieldLabel>
+                <select
+                  className={selectFieldClassName}
+                  value={fbPrompt}
+                  onChange={(event) => {
+                    setFbPrompt(event.target.value)
+                    setError(null)
+                    if (event.target.value !== 'Other') setFbPromptOther('')
+                  }}
+                >
+                  <option className="bg-[var(--paper-bg)] text-[var(--paper-ink)]" value="">
+                    Select a prompt
+                  </option>
+                  {FEEDBACK_PROMPTS.map((prompt) => (
+                    <option
+                      key={prompt}
+                      className="bg-[var(--paper-bg)] text-[var(--paper-ink)]"
+                      value={prompt}
+                    >
+                      {prompt}
+                    </option>
+                  ))}
+                </select>
+                <span className="ink-muted text-xs">
+                  Please select an option, or leave this blank.
+                </span>
+                {fbPrompt === 'Other' ? (
+                  <label className="grid gap-2">
+                    <FieldLabel required>Describe what prompted it</FieldLabel>
+                    <input
+                      type="text"
+                      className="focus-ring rounded-2xl border border-[var(--paper-border)] bg-transparent px-4 py-3"
+                      placeholder="Describe what prompted it"
+                      required
+                      value={fbPromptOther}
+                      onChange={(event) => setFbPromptOther(event.target.value)}
+                    />
+                  </label>
+                ) : null}
+              </div>
+
+              <div className="grid gap-2">
+                <span className="text-sm font-medium">How satisfied are you with Mentell?</span>
+                <div className="grid grid-cols-5 gap-2">
+                  {[1, 2, 3, 4, 5].map((value) => {
+                    const active = fbSentiment === value
+                    return (
+                      <button
+                        key={value}
+                        type="button"
+                        className={`focus-ring rounded-2xl border px-3 py-3 text-sm font-semibold transition ${
+                          active
+                            ? 'border-[rgba(42,155,88,0.55)] bg-[rgba(42,155,88,0.12)]'
+                            : 'border-[var(--paper-border)] bg-transparent hover:-translate-y-[1px]'
+                        }`}
+                        aria-pressed={active}
+                        aria-label={`${value} star${value === 1 ? '' : 's'}`}
+                        onClick={() => {
+                          setFbSentiment(value)
+                          setError(null)
+                        }}
+                      >
+                        <div className="text-base">{value}</div>
+                        <div className="mt-1 text-[10px] uppercase tracking-wide text-[var(--paper-ink-muted)]">
+                          {value <= 2 ? 'Negative' : value === 3 ? 'Neutral' : 'Positive'}
+                        </div>
+                      </button>
+                    )
+                  })}
+                </div>
+                <div className="flex justify-between text-[10px] font-medium uppercase tracking-wide text-[var(--paper-ink-muted)]">
+                  <span>Negative</span>
+                  <span>Positive</span>
+                </div>
+              </div>
+            </div>
+          </CollapsibleCard>
+        ) : null}
+
+        {showSecurityFields ? (
+          <CollapsibleCard
+            title="Security concern details"
+            subtitle="Use this for vulnerabilities or other sensitive reports that need careful handling."
+            summary={
+              <div className="space-y-1 text-sm">
+                <div>
+                  <span className="font-medium">Priority:</span> P{scPriority}
+                </div>
+                <div>
+                  <span className="font-medium">Sensitive:</span>{' '}
+                  {scSensitive || 'Not set'}
+                </div>
+              </div>
+            }
+          >
+            <div className="grid gap-4">
+              <div className="grid gap-2">
+                <div className="flex items-end justify-between gap-3">
+                  <FieldLabel>Priority level</FieldLabel>
+                  <span className="ink-muted text-xs">P{scPriority}</span>
+                </div>
+                <input
+                  type="range"
+                  min={0}
+                  max={4}
+                  step={1}
+                  className="w-full accent-[var(--accent)]"
+                  value={scPriority}
+                  onChange={(event) => setScPriority(Number(event.target.value))}
+                />
+                <div className="flex justify-between text-[10px] font-medium uppercase tracking-wide text-[var(--paper-ink-muted)]">
+                  {SECURITY_PRIORITIES.map((item) => (
+                    <span key={item.value}>{item.label}</span>
+                  ))}
+                </div>
+              </div>
+
+              <label className="grid gap-2">
+                <FieldLabel>Target date</FieldLabel>
+                <input
+                  type="date"
+                  className="focus-ring rounded-2xl border border-[var(--paper-border)] bg-transparent px-4 py-3"
+                  value={scTarget}
+                  onChange={(event) => setScTarget(event.target.value)}
+                />
+                <span className="ink-muted text-xs">Optional, if you want us to prioritize by date.</span>
+              </label>
+
+              <fieldset className="grid gap-2">
+                <legend className="text-sm font-medium">
+                  Is this issue sensitive?
+                  <span aria-hidden="true" className="ml-1 text-[var(--danger)]">
+                    *
+                  </span>
+                </legend>
+                <div className="grid gap-3 sm:grid-cols-2">
+                  {[
+                    { value: 'Yes' as const, title: 'Sensitive', description: 'Handle carefully and keep access limited.' },
+                    { value: 'No' as const, title: 'Not sensitive', description: 'Safe to discuss normally.' },
+                  ].map((option) => {
+                    const active = scSensitive === option.value
+                    return (
+                      <button
+                        key={option.value}
+                        type="button"
+                        className={`focus-ring rounded-2xl border px-4 py-3 text-left transition ${
+                          active
+                            ? 'border-[rgba(198,29,29,0.55)] bg-[rgba(198,29,29,0.1)]'
+                            : 'border-[var(--paper-border)] bg-transparent hover:-translate-y-[1px]'
+                        }`}
+                        aria-pressed={active}
+                        onClick={() => {
+                          setScSensitive(option.value)
+                          setError(null)
+                        }}
+                      >
+                        <div className="font-medium">{option.title}</div>
+                        <div className="ink-muted mt-1 text-xs leading-relaxed">
+                          {option.description}
+                        </div>
+                      </button>
+                    )
+                  })}
+                </div>
+              </fieldset>
+            </div>
+          </CollapsibleCard>
+        ) : null}
+
+        {showPrivacyFields ? (
+          <CollapsibleCard
+            title="Privacy request details"
+            subtitle="Use the same email address tied to the account, then choose one or more request types."
+            summary={
+              <div className="space-y-1 text-sm">
+                <div>
+                  <span className="font-medium">Types:</span> {selectedPrTypes || 'Not set'}
+                </div>
+                <div>
+                  <span className="font-medium">Signature:</span>{' '}
+                  {signatureDataUrl ? 'Captured' : 'Missing'}
+                </div>
+              </div>
+            }
+          >
+            <div className="grid gap-4">
+              <label className="grid gap-2">
+                <FieldLabel required>Email</FieldLabel>
+                <input
+                  type="email"
+                  className="focus-ring rounded-2xl border border-[var(--paper-border)] bg-transparent px-4 py-3"
+                  placeholder="name@example.com"
+                  required
+                  value={prEmail}
+                  onChange={(event) => setPrEmail(event.target.value)}
+                />
+              </label>
+
+              <fieldset className="grid gap-3">
+                <legend className="text-sm font-medium">
+                  Type of inquiry
+                  <span aria-hidden="true" className="ml-1 text-[var(--danger)]">
+                    *
+                  </span>
+                </legend>
+                <div className="grid gap-3">
+                  {PRIVACY_TYPES.map((value) => {
+                    const active = prType.includes(value)
+                    return (
+                      <label
+                        key={value}
+                        className={`focus-ring flex cursor-pointer items-start gap-3 rounded-2xl border px-4 py-3 transition ${
+                          active
+                            ? 'border-[rgba(42,155,88,0.55)] bg-[rgba(42,155,88,0.12)]'
+                            : 'border-[var(--paper-border)] bg-transparent hover:-translate-y-[1px]'
+                        }`}
+                      >
+                        <input
+                          type="checkbox"
+                          className="mt-1 h-4 w-4 accent-[var(--accent)]"
+                          checked={active}
+                          onChange={() => handlePrTypeToggle(value)}
+                        />
+                        <span className="text-sm">{value}</span>
+                      </label>
+                    )
+                  })}
+                </div>
+              </fieldset>
+
+              {prType.includes('Account Migration Request') ? (
+                <div className="grid gap-4 rounded-2xl border border-[var(--paper-border)] p-4">
+                  <div className="text-sm font-medium">Migration request details</div>
+                  <label className="grid gap-2">
+                    <FieldLabel required>Target email</FieldLabel>
+                    <input
+                      type="email"
+                      className="focus-ring rounded-2xl border border-[var(--paper-border)] bg-transparent px-4 py-3"
+                      placeholder="target@example.com"
+                      required
+                      value={prTarget}
+                      onChange={(event) => setPrTarget(event.target.value)}
+                    />
+                  </label>
+                  <label className="grid gap-2">
+                    <FieldLabel required>New account email</FieldLabel>
+                    <input
+                      type="email"
+                      className="focus-ring rounded-2xl border border-[var(--paper-border)] bg-transparent px-4 py-3"
+                      placeholder="new-account@example.com"
+                      required
+                      value={prRecipient}
+                      onChange={(event) => setPrRecipient(event.target.value)}
+                    />
+                  </label>
+                </div>
+              ) : null}
+
+              {prType.includes('Other') ? (
+                <label className="grid gap-2">
+                  <FieldLabel required>Other inquiry</FieldLabel>
+                  <textarea
+                    className="focus-ring min-h-[130px] rounded-2xl border border-[var(--paper-border)] bg-transparent px-4 py-3"
+                    placeholder="Please specify the privacy request."
+                    required
+                    value={prOther}
+                    onChange={(event) => setPrOther(event.target.value)}
+                  />
+                </label>
+              ) : null}
+
+              <div className="grid gap-2">
+                <FieldLabel required>Signature</FieldLabel>
+                <SignaturePad
+                  onChange={(snapshot) => {
+                    setSignatureDataUrl(snapshot.dataUrl)
+                    setSignatureStampedAt(snapshot.stampedAt)
+                    if (snapshot.dataUrl) setError(null)
+                  }}
+                />
+              </div>
+            </div>
+          </CollapsibleCard>
+        ) : null}
+
+        {!showPrivacyFields ? (
+          <CollapsibleCard
+            title="Contact info"
+            subtitle="Leave your email if you want a direct reply."
+            summary={
+              <div className="space-y-1 text-sm">
+                <div>
+                  <span className="font-medium">Reply email:</span>{' '}
+                  {genOpEmail.trim() || 'Optional'}
+                </div>
+              </div>
+            }
+          >
+            <label className="grid gap-2">
+              <span className="text-sm font-medium">Your email (optional)</span>
+              <input
+                type="email"
+                className="focus-ring rounded-2xl border border-[var(--paper-border)] bg-transparent px-4 py-3"
+                placeholder="name@example.com"
+                value={genOpEmail}
+                onChange={(event) => setGenOpEmail(event.target.value)}
+              />
+              <span className="ink-muted text-xs">
+                Leave this blank if you do not want a direct response.
+              </span>
+            </label>
+          </CollapsibleCard>
+        ) : null}
+
+        <section className="paper rounded-3xl p-6">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div>
+              <div className="font-paper text-xl">Submit</div>
+              <div className="ink-muted mt-1 text-sm">
+                The form posts to the configured workflow endpoint and then redirects to a thank-you page.
+              </div>
+            </div>
+            <div className="ink-muted text-xs">
+              {showPrivacyFields ? 'Signature required.' : 'Optional reply email available.'}
+            </div>
+          </div>
+
+          <div className="mt-5">
+            <FeedbackTurnstile
+              ref={turnstileRef}
+              key={turnstileSiteKey}
+              siteKey={turnstileSiteKey}
+              onTokenChange={handleTurnstileTokenChange}
+            />
+            <input
+              ref={turnstileFieldRef}
+              type="hidden"
+              name="cf-turnstile-response"
+              value={turnstileResponse}
+              readOnly
+            />
+          </div>
+
+          {error ? (
+            <div className="mt-4 rounded-2xl border border-[rgba(198,29,29,0.35)] bg-[rgba(198,29,29,0.08)] p-4 text-sm text-[var(--paper-ink)]">
+              {error}
+            </div>
+          ) : null}
+
+          <button
+            type="submit"
+            disabled={isSubmitting || !endpointReady || !turnstileResponse.trim()}
+            className="focus-ring mt-5 w-full rounded-2xl bg-[var(--accent)] px-4 py-3 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {isSubmitting ? 'Sending...' : 'Submit inquiry'}
+          </button>
+          <p className="ink-muted mt-3 text-xs leading-relaxed">
+            By submitting, you agree that Mentell may process the information you provide through
+            the configured workflow. Please avoid including more personal data than is necessary for
+            the request.
+          </p>
+        </section>
+      </form>
+    </div>
+  )
+}
+
+export function FeedbackThankYouPage() {
+  const { pathname } = useLocation()
+
+  useEffect(() => {
+    scrollToTop()
+  }, [pathname])
+
+  return (
+    <div className="space-y-4">
+      <section className="paper rounded-3xl p-6 text-center">
+        <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full border border-[var(--paper-border)] bg-[rgba(42,155,88,0.1)]">
+          <PaperPlaneIcon className="h-10 w-10 text-[var(--success)]" />
+        </div>
+        <div className="mt-5 font-paper text-2xl">Thanks for the feedback</div>
+        <p className="ink-muted mt-3 text-sm leading-relaxed">
+          Feedback helps us improve. We appreciate the time you took to send us a bug report,
+          request, or privacy note.
+        </p>
+        <div className="mt-6 flex flex-wrap justify-center gap-3">
+          <Link
+            to="/feedback"
+            className="focus-ring rounded-2xl border border-[var(--paper-border)] px-4 py-3 text-sm font-semibold"
+          >
+            Send another response
+          </Link>
+          <Link
+            to="/"
+            className="focus-ring rounded-2xl bg-[var(--accent)] px-4 py-3 text-sm font-semibold text-white"
+          >
+            Back to journal
+          </Link>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function CollapsibleCard({
+  title,
+  subtitle,
+  summary,
+  children,
+}: {
+  title: string
+  subtitle: string
+  summary: ReactNode
+  children: ReactNode
+}) {
+  const [open, setOpen] = useState(true)
+
+  return (
+    <section className="paper rounded-3xl p-6">
+      <button
+        type="button"
+        className="flex w-full items-start justify-between gap-4 text-left"
+        aria-expanded={open}
+        onClick={() => setOpen((current) => !current)}
+      >
+        <div>
+          <div className="font-paper text-xl">{title}</div>
+          <div className="ink-muted mt-1 text-sm">{subtitle}</div>
+        </div>
+        <div className="rounded-full border border-[var(--paper-border)] px-3 py-1 text-xs font-semibold uppercase tracking-wide">
+          {open ? 'Collapse' : 'Edit'}
+        </div>
+      </button>
+
+      {open ? (
+        <div className="mt-5">{children}</div>
+      ) : (
+        <div className="mt-5 rounded-2xl border border-[var(--paper-border)] bg-[rgba(255,255,255,0.22)] p-4">
+          {summary}
+        </div>
+      )}
+    </section>
+  )
+}
+
+function SignaturePad({
+  onChange,
+}: {
+  onChange: (snapshot: SignatureSnapshot) => void
+}) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  const onChangeRef = useRef(onChange)
+  const drawingRef = useRef(false)
+  const hasInkRef = useRef(false)
+  const lastPointRef = useRef<{ x: number; y: number } | null>(null)
+  const stampedAtRef = useRef<string | null>(null)
+  const [hasInk, setHasInk] = useState(false)
+  const [stampedAt, setStampedAt] = useState<string | null>(null)
+
+  useEffect(() => {
+    onChangeRef.current = onChange
+  }, [onChange])
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const resize = () => {
+      const rect = canvas.getBoundingClientRect()
+      const width = Math.max(280, rect.width)
+      const height = 180
+      const dpr = window.devicePixelRatio || 1
+
+      canvas.width = Math.round(width * dpr)
+      canvas.height = Math.round(height * dpr)
+
+      const ctx = canvas.getContext('2d')
+      if (!ctx) return
+
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx.clearRect(0, 0, width, height)
+      ctx.lineWidth = 2.4
+      ctx.lineCap = 'round'
+      ctx.lineJoin = 'round'
+      ctx.strokeStyle =
+        getComputedStyle(document.documentElement).getPropertyValue('--paper-ink').trim() || '#19181f'
+      ctx.fillStyle = ctx.strokeStyle
+    }
+
+    resize()
+    onChangeRef.current({ dataUrl: '', stampedAt: null, hasInk: false })
+  }, [])
+
+  const syncSnapshot = () => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const dataUrl = hasInkRef.current ? canvas.toDataURL('image/png') : ''
+    onChangeRef.current({
+      dataUrl,
+      stampedAt: stampedAtRef.current,
+      hasInk: hasInkRef.current,
+    })
+  }
+
+  const getPoint = (event: PointerEvent<HTMLCanvasElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect()
+    return {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top,
+    }
+  }
+
+  const drawDot = (ctx: CanvasRenderingContext2D, point: { x: number; y: number }) => {
+    ctx.beginPath()
+    ctx.arc(point.x, point.y, 1.2, 0, Math.PI * 2)
+    ctx.fill()
+  }
+
+  const drawLine = (ctx: CanvasRenderingContext2D, start: { x: number; y: number }, end: { x: number; y: number }) => {
+    ctx.beginPath()
+    ctx.moveTo(start.x, start.y)
+    ctx.lineTo(end.x, end.y)
+    ctx.stroke()
+  }
+
+  const handlePointerDown = (event: PointerEvent<HTMLCanvasElement>) => {
+    if (event.button !== 0) return
+    const canvas = canvasRef.current
+    const ctx = canvas?.getContext('2d')
+    if (!canvas || !ctx) return
+
+    event.currentTarget.setPointerCapture(event.pointerId)
+    drawingRef.current = true
+    const point = getPoint(event)
+    lastPointRef.current = point
+    if (!stampedAtRef.current) {
+      stampedAtRef.current = new Date().toISOString()
+      setStampedAt(stampedAtRef.current)
+    }
+    hasInkRef.current = true
+    setHasInk(true)
+    drawDot(ctx, point)
+    syncSnapshot()
+  }
+
+  const finishStroke = () => {
+    if (!drawingRef.current) return
+    drawingRef.current = false
+    lastPointRef.current = null
+    syncSnapshot()
+  }
+
+  const handlePointerMove = (event: PointerEvent<HTMLCanvasElement>) => {
+    if (!drawingRef.current) return
+    const canvas = canvasRef.current
+    const ctx = canvas?.getContext('2d')
+    if (!canvas || !ctx || !lastPointRef.current) return
+
+    const point = getPoint(event)
+    drawLine(ctx, lastPointRef.current, point)
+    lastPointRef.current = point
+    hasInkRef.current = true
+    setHasInk(true)
+    syncSnapshot()
+  }
+
+  const clear = () => {
+    const canvas = canvasRef.current
+    const ctx = canvas?.getContext('2d')
+    if (!canvas || !ctx) return
+
+    const rect = canvas.getBoundingClientRect()
+    ctx.clearRect(0, 0, rect.width, rect.height)
+    drawingRef.current = false
+    lastPointRef.current = null
+    stampedAtRef.current = null
+    hasInkRef.current = false
+    setHasInk(false)
+    setStampedAt(null)
+    onChangeRef.current({ dataUrl: '', stampedAt: null, hasInk: false })
+  }
+
+  return (
+    <section className="rounded-2xl border border-[var(--paper-border)] p-4">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <div className="text-sm font-medium">Signature</div>
+          <div className="ink-muted mt-1 text-xs leading-relaxed">
+            Draw a simple signature to confirm the privacy request. The timestamp is captured when
+            you start signing.
+          </div>
+        </div>
+        <button
+          type="button"
+          className="focus-ring rounded-xl border border-[var(--paper-border)] px-3 py-2 text-xs font-semibold disabled:opacity-50"
+          onClick={clear}
+          disabled={!hasInk}
+        >
+          Clear
+        </button>
+      </div>
+
+      <canvas
+        ref={canvasRef}
+        className="focus-ring mt-4 h-[180px] w-full rounded-2xl border border-[var(--paper-border)] bg-[rgba(255,255,255,0.18)]"
+        style={{ touchAction: 'none' }}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={finishStroke}
+        onPointerCancel={finishStroke}
+        onPointerLeave={finishStroke}
+      />
+
+      <div className="ink-muted mt-2 text-xs">
+        {stampedAt ? `Signed at ${new Date(stampedAt).toLocaleString()}` : 'No signature captured yet.'}
+      </div>
+    </section>
+  )
+}
+
+function PaperPlaneIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d="m4 11.75 15.75-6.2c.45-.18.92.25.74.7l-5.62 14.2c-.17.43-.78.42-.93-.02l-1.55-4.57-4.57-1.55-3.8-1.3a.6.6 0 0 1-.02-.98Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="m19.1 5.93-8.78 8.79"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
+
+function summarizeOtherAwareChoice(value: string, other: string) {
+  if (!value) return ''
+  if (value === 'Other' && other.trim()) return `Other: ${other.trim()}`
+  return value
+}
diff --git a/src/features/feedback/FeedbackTurnstile.tsx b/src/features/feedback/FeedbackTurnstile.tsx
new file mode 100644
index 0000000..71ac0f0
--- /dev/null
+++ b/src/features/feedback/FeedbackTurnstile.tsx
@@ -0,0 +1,363 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
+
+type TurnstileStatus = 'loading' | 'ready' | 'solved' | 'error'
+
+type TurnstileRenderOptions = {
+  sitekey: string
+  theme?: 'auto' | 'light' | 'dark'
+  size?: 'normal' | 'compact' | 'flexible'
+  retry?: 'auto' | 'never'
+  callback?: (token: string) => void
+  'error-callback'?: (errorCode?: number | string) => void
+  'expired-callback'?: () => void
+  'timeout-callback'?: () => void
+}
+
+type TurnstileApi = {
+  render: (container: HTMLElement, options: TurnstileRenderOptions) => string | number
+  getResponse: (widgetId?: string | number) => string
+  reset: (widgetId?: string | number) => void
+  remove?: (widgetId?: string | number) => void
+}
+
+export type FeedbackTurnstileHandle = {
+  getResponse: () => string
+}
+
+declare global {
+  interface Window {
+    turnstile?: TurnstileApi
+  }
+}
+
+const TURNSTILE_SCRIPT_SRC = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit'
+
+let turnstileScriptPromise: Promise<void> | null = null
+
+function loadTurnstileScript() {
+  if (window.turnstile) return Promise.resolve()
+  if (!turnstileScriptPromise) {
+    turnstileScriptPromise = new Promise((resolve, reject) => {
+      const existingScript = document.querySelector<HTMLScriptElement>(
+        'script[data-feedback-turnstile="true"]',
+      )
+      if (existingScript) {
+        existingScript.addEventListener('load', () => resolve(), { once: true })
+        existingScript.addEventListener('error', () => reject(new Error('Failed to load Turnstile.')), {
+          once: true,
+        })
+        return
+      }
+
+      const script = document.createElement('script')
+      script.src = TURNSTILE_SCRIPT_SRC
+      script.async = true
+      script.defer = true
+      script.dataset.feedbackTurnstile = 'true'
+      script.onload = () => resolve()
+      script.onerror = () => reject(new Error('Failed to load Turnstile.'))
+      document.head.appendChild(script)
+    })
+  }
+
+  return turnstileScriptPromise
+}
+
+export const FeedbackTurnstile = forwardRef<
+  FeedbackTurnstileHandle,
+  {
+    siteKey: string
+    onTokenChange: (token: string) => void
+  }
+>(function FeedbackTurnstile({ siteKey, onTokenChange }, ref) {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const widgetIdRef = useRef<string | number | null>(null)
+  const onTokenChangeRef = useRef(onTokenChange)
+  const retryTimerRef = useRef<number | null>(null)
+  const retryCountRef = useRef(0)
+  const [status, setStatus] = useState<TurnstileStatus>(() => (siteKey ? 'loading' : 'error'))
+  const [message, setMessage] = useState(() =>
+    siteKey
+      ? 'Loading Cloudflare verification...'
+      : 'Cloudflare verification is not configured for this build.',
+  )
+
+  useEffect(() => {
+    onTokenChangeRef.current = onTokenChange
+  }, [onTokenChange])
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getResponse: () => {
+        if (!window.turnstile || widgetIdRef.current === null) return ''
+
+        try {
+          return window.turnstile.getResponse(widgetIdRef.current).trim()
+        } catch {
+          return ''
+        }
+      },
+    }),
+    [],
+  )
+
+  const clearRetryTimer = () => {
+    if (retryTimerRef.current !== null) {
+      window.clearTimeout(retryTimerRef.current)
+      retryTimerRef.current = null
+    }
+  }
+
+  const resetWidget = (nextMessage: string) => {
+    clearRetryTimer()
+    retryCountRef.current = 0
+    onTokenChangeRef.current('')
+
+    if (!window.turnstile || widgetIdRef.current === null) {
+      setStatus('error')
+      setMessage(nextMessage)
+      return
+    }
+
+    setStatus('loading')
+    setMessage(nextMessage)
+    try {
+      window.turnstile.reset(widgetIdRef.current)
+    } catch {
+      setStatus('error')
+      setMessage('Could not restart Cloudflare verification. Please refresh the page.')
+    }
+  }
+
+  useEffect(() => {
+    let active = true
+    const container = containerRef.current
+
+    widgetIdRef.current = null
+    clearRetryTimer()
+    retryCountRef.current = 0
+    onTokenChangeRef.current('')
+
+    if (!siteKey) return () => {}
+    if (!container) return () => {}
+
+    void loadTurnstileScript()
+      .then(() => {
+        if (!active || !container.isConnected || !window.turnstile) return
+
+        container.innerHTML = ''
+        widgetIdRef.current = window.turnstile.render(container, {
+          sitekey: siteKey,
+          theme: 'auto',
+          size: 'normal',
+          retry: 'auto',
+          callback: (token: string) => {
+            if (!active) return
+            clearRetryTimer()
+            retryCountRef.current = 0
+            setStatus('solved')
+            setMessage('Verification complete.')
+            onTokenChangeRef.current(token)
+          },
+          'error-callback': (errorCode?: number | string) => {
+            if (!active) return
+            const normalizedCode = normalizeTurnstileErrorCode(errorCode)
+
+            if (isTurnstileConfigError(normalizedCode)) {
+              clearRetryTimer()
+              retryCountRef.current = 0
+              setStatus('error')
+              setMessage(getTurnstileConfigMessage(normalizedCode))
+              onTokenChangeRef.current('')
+              return
+            }
+
+            if (normalizedCode === 110600 || normalizedCode === 110620) {
+              clearRetryTimer()
+              retryCountRef.current = 0
+              setStatus('error')
+              setMessage(getTurnstileTimeoutMessage(normalizedCode))
+              onTokenChangeRef.current('')
+              return
+            }
+
+            if (retryCountRef.current < 1) {
+              retryCountRef.current += 1
+              setStatus('loading')
+              setMessage('Verification hit a temporary error. Retrying...')
+              clearRetryTimer()
+              retryTimerRef.current = window.setTimeout(() => {
+                if (!active || widgetIdRef.current === null || !window.turnstile) return
+                try {
+                  window.turnstile.reset(widgetIdRef.current)
+                } catch {
+                  setStatus('error')
+                  setMessage('Verification could not restart. Please refresh the page.')
+                }
+              }, 750)
+              return
+            }
+
+            clearRetryTimer()
+            retryCountRef.current = 0
+            setStatus('error')
+            setMessage(getTurnstileRetryMessage(normalizedCode))
+            onTokenChangeRef.current('')
+          },
+          'expired-callback': () => {
+            if (!active) return
+            clearRetryTimer()
+            retryCountRef.current = 0
+            setStatus('ready')
+            setMessage('Verification expired. Please solve it again.')
+            onTokenChangeRef.current('')
+            if (widgetIdRef.current !== null) {
+              window.turnstile?.reset(widgetIdRef.current)
+            }
+          },
+          'timeout-callback': () => {
+            if (!active) return
+            clearRetryTimer()
+            retryCountRef.current = 0
+            setStatus('ready')
+            setMessage('Verification timed out. Please solve it again.')
+            onTokenChangeRef.current('')
+            if (widgetIdRef.current !== null) {
+              window.turnstile?.reset(widgetIdRef.current)
+            }
+          },
+        })
+        setStatus('ready')
+        setMessage('Complete the check to unlock submission.')
+      })
+      .catch(() => {
+        if (!active) return
+        setStatus('error')
+        setMessage('Could not load Cloudflare verification. Check your network or content blockers.')
+      })
+
+    return () => {
+      active = false
+      clearRetryTimer()
+      onTokenChangeRef.current('')
+      if (widgetIdRef.current !== null && window.turnstile?.remove) {
+        try {
+          window.turnstile.remove(widgetIdRef.current)
+        } catch {
+          /* best effort */
+        }
+      }
+      if (container) container.innerHTML = ''
+    }
+  }, [siteKey])
+
+  return (
+    <section className="rounded-2xl border border-[var(--paper-border)] p-4">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <div className="text-sm font-medium">Cloudflare verification</div>
+          <div className="ink-muted mt-1 text-xs leading-relaxed">
+            Required before submitting this form.
+          </div>
+        </div>
+        <div className="ink-muted text-xs font-medium uppercase tracking-wide">
+          {status === 'solved' ? 'Verified' : status === 'error' ? 'Needs attention' : 'Pending'}
+        </div>
+      </div>
+
+      <div ref={containerRef} className="mt-4 overflow-hidden" />
+
+      <div
+        className={`mt-3 text-xs leading-relaxed ${
+          status === 'error' ? 'text-[var(--danger)]' : 'ink-muted'
+        }`}
+        aria-live="polite"
+      >
+        {message}
+      </div>
+
+      {siteKey && status === 'error' ? (
+        <button
+          type="button"
+          className="focus-ring mt-3 rounded-xl border border-[var(--paper-border)] px-3 py-2 text-xs font-semibold"
+          onClick={() => resetWidget('Retrying Cloudflare verification...')}
+        >
+          Try again
+        </button>
+      ) : null}
+    </section>
+  )
+})
+
+function normalizeTurnstileErrorCode(errorCode?: number | string) {
+  if (typeof errorCode === 'number' && Number.isFinite(errorCode)) return errorCode
+  if (typeof errorCode === 'string') {
+    const normalized = Number.parseInt(errorCode, 10)
+    return Number.isFinite(normalized) ? normalized : undefined
+  }
+  return undefined
+}
+
+function getTurnstileConfigMessage(errorCode?: number) {
+  switch (errorCode) {
+    case 110100:
+    case 110110:
+    case 400020:
+    case 400070:
+      return 'Cloudflare verification is misconfigured for this site key.'
+    case 110200:
+      return 'This hostname is not authorized for the configured site key.'
+    default:
+      return 'Cloudflare verification is misconfigured. Please check the site key and host settings.'
+  }
+}
+
+function isTurnstileConfigError(errorCode?: number) {
+  switch (errorCode) {
+    case 110100:
+    case 110110:
+    case 110200:
+    case 400020:
+    case 400070:
+      return true
+    default:
+      return false
+  }
+}
+
+function getTurnstileTimeoutMessage(errorCode?: number) {
+  switch (errorCode) {
+    case 110600:
+      return 'Verification timed out. Please solve it again.'
+    case 110620:
+      return 'Interaction timed out. Please try again.'
+    default:
+      return 'Verification expired. Please solve it again.'
+  }
+}
+
+function getTurnstileRetryMessage(errorCode?: number) {
+  const family = getTurnstileErrorFamily(errorCode)
+  if (family === 300 || family === 600) {
+    return 'Verification failed. Turnstile likely blocked the request. Disable ad blockers, VPNs, or strict privacy settings and try again.'
+  }
+
+  switch (errorCode) {
+    case 200100:
+      return 'Verification could not load. Check your connection or content blockers.'
+    case 200500:
+      return 'The verification iframe could not load. Check your network or content blockers.'
+    case 110600:
+      return 'Verification timed out. Please solve it again.'
+    case 110620:
+      return 'Interaction timed out. Please try again.'
+    default:
+      return 'Verification failed. Check extensions, VPNs, or browser privacy settings, then try again.'
+  }
+}
+
+function getTurnstileErrorFamily(errorCode?: number) {
+  if (typeof errorCode !== 'number' || !Number.isFinite(errorCode)) return undefined
+  return Math.floor(errorCode / 1000)
+}
diff --git a/src/features/feedback/feedbackSubmission.ts b/src/features/feedback/feedbackSubmission.ts
new file mode 100644
index 0000000..b709de0
--- /dev/null
+++ b/src/features/feedback/feedbackSubmission.ts
@@ -0,0 +1,257 @@
+export type FeedbackSubmissionType =
+  | 'Feedback'
+  | 'Bug Report'
+  | 'Privacy Inquiry'
+  | 'Security Concern'
+
+export type FeedbackFormInput = {
+  title: string
+  submissionType: FeedbackSubmissionType
+  brDetails: string
+  brFiles: File[]
+  brFeature: string
+  brFeatureOther: string
+  brFrequency: number
+  fbDetails: string
+  fbPrompt: string
+  fbPromptOther: string
+  fbSentiment: number
+  scPriority: number
+  scTarget: string
+  scSensitive: 'Yes' | 'No' | ''
+  prEmail: string
+  prType: string[]
+  prTarget: string
+  prRecipient: string
+  prOther: string
+  genOpEmail: string
+  prSigBox: string
+  turnstileResponse: string
+}
+
+const DEFAULT_TURNSTILE_SITE_KEY = '0x4AAAAAADfOpVgdUWD5E_c1'
+
+export function normalizeEndpointUrl(raw: string) {
+  const endpoint = raw.trim()
+  if (!endpoint) return endpoint
+  if (/^https?:\/\//i.test(endpoint)) return endpoint.replace(/\/$/, '')
+  if (endpoint.startsWith('/')) return endpoint.replace(/\/$/, '')
+  return `https://${endpoint}`.replace(/\/$/, '')
+}
+
+export function feedbackFormEndpoint() {
+  const raw = import.meta.env.VITE_FEEDBACK_FORM_ENDPOINT?.trim() ?? ''
+  return normalizeEndpointUrl(raw)
+}
+
+export function feedbackFormConfigured() {
+  return feedbackFormEndpoint().length > 0
+}
+
+export function feedbackTurnstileSiteKey() {
+  return import.meta.env.VITE_FEEDBACK_TURNSTILE_SITE_KEY?.trim() || DEFAULT_TURNSTILE_SITE_KEY
+}
+
+function trimOrEmpty(value: string) {
+  return value.trim()
+}
+
+function selectedFeatureLabel(feature: string, other: string) {
+  if (feature === 'Other' && other.trim()) return `Other: ${trimOrEmpty(other)}`
+  return feature
+}
+
+function selectedPromptLabel(prompt: string, other: string) {
+  if (prompt === 'Other' && other.trim()) return `Other: ${trimOrEmpty(other)}`
+  return prompt
+}
+
+function selectedPrivacyTypes(types: string[], other: string) {
+  return types
+    .map((type) => {
+      if (type !== 'Other') return type
+      return other.trim() ? `Other: ${trimOrEmpty(other)}` : 'Other'
+    })
+    .join(', ')
+}
+
+function bugFrequencyLabel(freq: number) {
+  return ['Once', 'Rarely', 'Sometimes', 'Always'][Math.max(0, Math.min(3, freq))]
+}
+
+function feedbackSentimentLabel(sentiment: number) {
+  return String(Math.max(1, Math.min(5, sentiment)))
+}
+
+function priorityLabel(priority: number) {
+  return `P${Math.max(0, Math.min(4, priority))}`
+}
+
+function appendHiddenInput(form: HTMLFormElement, name: string, value: string) {
+  const input = document.createElement('input')
+  input.type = 'hidden'
+  input.name = name
+  input.value = trimOrEmpty(value)
+  form.appendChild(input)
+}
+
+function appendFileInput(form: HTMLFormElement, name: string, files: File[]) {
+  if (files.length === 0) return
+
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.name = name
+  input.multiple = true
+
+  const transfer = new DataTransfer()
+  files.slice(0, 3).forEach((file) => {
+    transfer.items.add(file)
+  })
+  input.files = transfer.files
+  form.appendChild(input)
+}
+
+function createSubmissionForm(
+  endpoint: string,
+  input: FeedbackFormInput,
+  dateStamp: string,
+  targetName: string,
+) {
+  const form = document.createElement('form')
+  form.action = endpoint
+  form.method = 'post'
+  form.enctype =
+    input.submissionType === 'Bug Report' && input.brFiles.length > 0
+      ? 'multipart/form-data'
+      : 'application/x-www-form-urlencoded'
+  form.target = targetName
+  form.style.position = 'fixed'
+  form.style.left = '-9999px'
+  form.style.top = '0'
+  form.style.width = '1px'
+  form.style.height = '1px'
+  form.style.opacity = '0'
+  form.style.pointerEvents = 'none'
+
+  appendHiddenInput(form, 'title', input.title)
+  appendHiddenInput(form, 'submissionType', input.submissionType)
+  appendHiddenInput(form, 'brDetails', input.submissionType === 'Bug Report' ? input.brDetails : '')
+  appendHiddenInput(
+    form,
+    'brFeature',
+    input.submissionType === 'Bug Report'
+      ? selectedFeatureLabel(input.brFeature, input.brFeatureOther)
+      : '',
+  )
+  appendHiddenInput(
+    form,
+    'brFrequency',
+    input.submissionType === 'Bug Report' ? bugFrequencyLabel(input.brFrequency) : '',
+  )
+  appendHiddenInput(form, 'fbDetails', input.submissionType === 'Feedback' ? input.fbDetails : '')
+  appendHiddenInput(
+    form,
+    'fbPrompt',
+    input.submissionType === 'Feedback'
+      ? selectedPromptLabel(input.fbPrompt, input.fbPromptOther)
+      : '',
+  )
+  appendHiddenInput(
+    form,
+    'fbSentiment',
+    input.submissionType === 'Feedback' ? feedbackSentimentLabel(input.fbSentiment) : '',
+  )
+  appendHiddenInput(
+    form,
+    'scPriority',
+    input.submissionType === 'Security Concern' ? priorityLabel(input.scPriority) : '',
+  )
+  appendHiddenInput(
+    form,
+    'scTarget',
+    input.submissionType === 'Security Concern' ? input.scTarget : '',
+  )
+  appendHiddenInput(
+    form,
+    'scSensitive',
+    input.submissionType === 'Security Concern' ? input.scSensitive : '',
+  )
+  appendHiddenInput(form, 'prEmail', input.submissionType === 'Privacy Inquiry' ? input.prEmail : '')
+  appendHiddenInput(
+    form,
+    'prType',
+    input.submissionType === 'Privacy Inquiry'
+      ? selectedPrivacyTypes(input.prType, input.prOther)
+      : '',
+  )
+  appendHiddenInput(
+    form,
+    'prTarget',
+    input.submissionType === 'Privacy Inquiry' ? input.prTarget : '',
+  )
+  appendHiddenInput(
+    form,
+    'prRecipient',
+    input.submissionType === 'Privacy Inquiry' ? input.prRecipient : '',
+  )
+  appendHiddenInput(form, 'prOther', input.submissionType === 'Privacy Inquiry' ? input.prOther : '')
+  appendHiddenInput(
+    form,
+    'genOpEmail',
+    input.submissionType === 'Privacy Inquiry' ? '' : input.genOpEmail,
+  )
+  appendHiddenInput(
+    form,
+    'prSigBox',
+    input.submissionType === 'Privacy Inquiry' ? input.prSigBox : '',
+  )
+  appendHiddenInput(form, 'DateStamp', dateStamp)
+  appendHiddenInput(form, 'cf-turnstile-response', input.turnstileResponse)
+
+  if (input.submissionType === 'Bug Report') {
+    appendFileInput(form, 'brFile', input.brFiles)
+  }
+
+  return form
+}
+
+export async function submitFeedbackForm(input: FeedbackFormInput, dateStamp: string) {
+  const endpoint = feedbackFormEndpoint()
+  if (!endpoint) {
+    throw new Error('Configure VITE_FEEDBACK_FORM_ENDPOINT to enable feedback submissions.')
+  }
+  if (!input.turnstileResponse.trim()) {
+    throw new Error('Complete the Cloudflare verification before submitting.')
+  }
+
+  const targetName = `feedback-submit-${Date.now()}-${Math.random().toString(36).slice(2)}`
+  const iframe = document.createElement('iframe')
+  iframe.name = targetName
+  iframe.title = 'Feedback submission target'
+  iframe.setAttribute('aria-hidden', 'true')
+  iframe.style.position = 'fixed'
+  iframe.style.left = '-9999px'
+  iframe.style.top = '0'
+  iframe.style.width = '1px'
+  iframe.style.height = '1px'
+  iframe.style.border = '0'
+  iframe.style.opacity = '0'
+  iframe.style.pointerEvents = 'none'
+
+  const form = createSubmissionForm(endpoint, input, dateStamp, targetName)
+
+  document.body.appendChild(iframe)
+  document.body.appendChild(form)
+
+  try {
+    form.submit()
+    await new Promise<void>((resolve) => {
+      window.setTimeout(resolve, 0)
+    })
+  } finally {
+    window.setTimeout(() => {
+      iframe.remove()
+      form.remove()
+    }, 1000)
+  }
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 00681cc..3658c8a 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -16,10 +16,12 @@ declare module 'virtual:pwa-register' {
 
 interface ImportMetaEnv {
   readonly VITE_APP_VERSION: string
-  readonly VITE_ENABLE_WEEKLY_AI_SUMMARY?: string
-  readonly VITE_WEEKLY_AI_ENDPOINT?: string
-  readonly VITE_WEEKLY_AI_TOKEN?: string
-  readonly VITE_ENABLE_FIREBASE?: string
+  readonly VITE_ENABLE_WEEKLY_AI_SUMMARY?: string
+  readonly VITE_WEEKLY_AI_ENDPOINT?: string
+  readonly VITE_WEEKLY_AI_TOKEN?: string
+  readonly VITE_FEEDBACK_FORM_ENDPOINT?: string
+  readonly VITE_FEEDBACK_TURNSTILE_SITE_KEY?: string
+  readonly VITE_ENABLE_FIREBASE?: string
   readonly VITE_ENABLE_FIREBASE_SYNC?: string
   readonly VITE_ENABLE_SHARE_LINKS?: string
   readonly VITE_FIREBASE_API_KEY?: string