diff --git a/apps/web/.env.example b/apps/web/.env.example
index 9738b62..ea30833 100644
--- a/apps/web/.env.example
+++ b/apps/web/.env.example
@@ -16,11 +16,6 @@ ZENPDF_FREE_ACCOUNT_MAX_MB_PER_FILE=
 ZENPDF_FREE_ACCOUNT_MAX_CONCURRENT_JOBS=
 ZENPDF_FREE_ACCOUNT_MAX_JOBS_PER_DAY=
 ZENPDF_FREE_ACCOUNT_MAX_DAILY_MINUTES=
-ZENPDF_PREMIUM_MAX_FILES_PER_JOB=
-ZENPDF_PREMIUM_MAX_MB_PER_FILE=
-ZENPDF_PREMIUM_MAX_CONCURRENT_JOBS=
-ZENPDF_PREMIUM_MAX_JOBS_PER_DAY=
-ZENPDF_PREMIUM_MAX_DAILY_MINUTES=
 ZENPDF_GLOBAL_MAX_CONCURRENT_JOBS=
 ZENPDF_GLOBAL_MAX_JOBS_PER_DAY=
 ZENPDF_GLOBAL_MAX_DAILY_MINUTES=
@@ -28,6 +23,14 @@ ZENPDF_GLOBAL_JOB_MAX_ATTEMPTS=
 ZENPDF_GLOBAL_LEASE_DURATION_MS=
 ZENPDF_GLOBAL_ARTIFACT_TTL_HOURS=
 ZENPDF_WORKER_TOKEN=
+NEXT_PUBLIC_DONATE_UPI_ID=
+NEXT_PUBLIC_DONATE_PAYEE_NAME=ZenPDF
+# Legacy key still supported by app fallback: NEXT_PUBLIC_DONATE_UPI_NAME
+NEXT_PUBLIC_DONATE_UPI_NOTE="Support ZenPDF"
+NEXT_PUBLIC_DONATE_UPI_QR_URL=
+NEXT_PUBLIC_DONATE_ICON_LIGHT=
+NEXT_PUBLIC_DONATE_ICON_DARK=
+NEXT_PUBLIC_DONATE_CARD_EMBED_URL=
 NEXT_PUBLIC_COMPRESS_TIMEOUT_BASE_SECONDS=120
 NEXT_PUBLIC_COMPRESS_TIMEOUT_MAX_SECONDS=900
 NEXT_PUBLIC_COMPRESS_TIMEOUT_PER_MB_SECONDS=3
diff --git a/apps/web/convex/capacity.ts b/apps/web/convex/capacity.ts
index 31321fd..30131f8 100644
--- a/apps/web/convex/capacity.ts
+++ b/apps/web/convex/capacity.ts
@@ -35,26 +35,28 @@ export const getUsageSnapshot = query({
     const { userId, tier } = await resolveUser(ctx);
     const anonId = args.anonId?.trim() || undefined;
     const resolvedAnonId = userId ? undefined : anonId;
-    const [planLimits, anonLimits, freeLimits, premiumLimits, budget, usageResult] =
+    const [planLimits, anonLimits, freeLimits, globalLimits, budget, usageResult, globalUsageResult] =
       await Promise.all([
         resolvePlanLimits(ctx, tier),
         resolvePlanLimits(ctx, "ANON"),
         resolvePlanLimits(ctx, "FREE_ACCOUNT"),
-        resolvePlanLimits(ctx, "PREMIUM"),
+        resolveGlobalLimits(ctx),
         resolveBudgetState(ctx, now),
         resolveUsageCounter(ctx, userId, resolvedAnonId, now),
+        resolveGlobalUsageCounter(ctx, now),
       ]);
     const planSnapshot = {
       ANON: anonLimits,
       FREE_ACCOUNT: freeLimits,
-      PREMIUM: premiumLimits,
     };
     const { counter, periodStart } = usageResult;
+    const { counter: globalCounter, periodStart: globalPeriodStart } = globalUsageResult;
 
     return {
       tier,
       planLimits,
       plans: planSnapshot,
+      globalLimits,
       budget,
       usage: counter ?? {
         periodStart,
@@ -62,6 +64,12 @@ export const getUsageSnapshot = query({
         minutesUsed: 0,
         bytesProcessed: 0,
       },
+      globalUsage: globalCounter ?? {
+        periodStart: globalPeriodStart,
+        jobsUsed: 0,
+        minutesUsed: 0,
+        bytesProcessed: 0,
+      },
     };
   },
 });
diff --git a/apps/web/convex/lib/auth.ts b/apps/web/convex/lib/auth.ts
index 155c772..4bb1285 100644
--- a/apps/web/convex/lib/auth.ts
+++ b/apps/web/convex/lib/auth.ts
@@ -10,48 +10,22 @@ type Ctx = MutationCtx | QueryCtx;
 export type ResolvedUser = {
   identity: UserIdentity | null;
   userId: Id<"users"> | undefined;
-  tier: "ANON" | "FREE_ACCOUNT" | "PREMIUM";
-  adsFree: boolean;
+  tier: "ANON" | "FREE_ACCOUNT";
 };
 
-const parseEnvList = (value: string | undefined) =>
-  value
-    ?.split(",")
-    .map((entry) => entry.trim())
-    .filter(Boolean) ?? [];
-
 const resolveTier = (identity: UserIdentity | null, storedTier?: ResolvedUser["tier"]) => {
   if (!identity) {
-    return { tier: "ANON" as const, adsFree: false };
-  }
-
-  const premiumEmails = parseEnvList(process.env.ZENPDF_PREMIUM_EMAILS).map((email) =>
-    email.toLowerCase(),
-  );
-  const premiumClerkIds = parseEnvList(process.env.ZENPDF_PREMIUM_CLERK_IDS);
-  const hasAllowlist = premiumEmails.length > 0 || premiumClerkIds.length > 0;
-  const email = normalizeOptionalEmail(identity.email);
-  const isPremium =
-    (email ? premiumEmails.includes(email) : false) ||
-    premiumClerkIds.includes(identity.subject);
-
-  if (isPremium) {
-    return { tier: "PREMIUM" as const, adsFree: true };
+    return { tier: "ANON" as const };
   }
-
-  if (hasAllowlist) {
-    return { tier: "FREE_ACCOUNT" as const, adsFree: false };
-  }
-
   const tier = storedTier ?? "FREE_ACCOUNT";
-  return { tier, adsFree: tier === "PREMIUM" };
+  return { tier };
 };
 
 export const resolveUser = async (ctx: Ctx): Promise<ResolvedUser> => {
   const identity = await ctx.auth.getUserIdentity();
 
   if (!identity) {
-    return { identity: null, userId: undefined, tier: "ANON", adsFree: false };
+    return { identity: null, userId: undefined, tier: "ANON" };
   }
 
   const clerkUserId = identity.subject;
@@ -60,13 +34,13 @@ export const resolveUser = async (ctx: Ctx): Promise<ResolvedUser> => {
     .withIndex("by_clerk_id", (q) => q.eq("clerkUserId", clerkUserId))
     .unique();
 
-  const { tier, adsFree } = resolveTier(identity, existing?.tier);
+  const { tier } = resolveTier(identity, existing?.tier);
 
   if (existing) {
-    return { identity, userId: existing._id, tier, adsFree };
+    return { identity, userId: existing._id, tier };
   }
 
-  return { identity, userId: undefined, tier, adsFree };
+  return { identity, userId: undefined, tier };
 };
 
 export const resolveOrCreateUser = async (
@@ -84,7 +58,6 @@ export const resolveOrCreateUser = async (
       email: normalizeOptionalEmail(resolved.identity.email),
       name: resolved.identity.name ?? resolved.identity.nickname,
       tier: resolved.tier,
-      adsFree: resolved.adsFree,
       createdAt: now,
       updatedAt: now,
     });
@@ -93,11 +66,9 @@ export const resolveOrCreateUser = async (
   }
 
   const existing = await ctx.db.get(resolved.userId);
-  const storedAdsFree = existing?.adsFree ?? false;
-  if (existing && (existing.tier !== resolved.tier || storedAdsFree !== resolved.adsFree)) {
+  if (existing && existing.tier !== resolved.tier) {
     await ctx.db.patch(resolved.userId, {
       tier: resolved.tier,
-      adsFree: resolved.adsFree,
       updatedAt: now,
     });
   }
diff --git a/apps/web/convex/lib/limits.ts b/apps/web/convex/lib/limits.ts
index 3659f12..c7553f9 100644
--- a/apps/web/convex/lib/limits.ts
+++ b/apps/web/convex/lib/limits.ts
@@ -1,6 +1,6 @@
 import type { MutationCtx, QueryCtx } from "../_generated/server";
 
-export type PlanTier = "ANON" | "FREE_ACCOUNT" | "PREMIUM";
+export type PlanTier = "ANON" | "FREE_ACCOUNT";
 
 export type PlanLimits = {
   maxFilesPerJob: number;
@@ -22,31 +22,24 @@ export type GlobalLimits = {
 const DEFAULT_PLAN_LIMITS: Record<PlanTier, PlanLimits> = {
   ANON: {
     maxFilesPerJob: 1,
-    maxMbPerFile: 10,
+    maxMbPerFile: 25,
     maxConcurrentJobs: 1,
-    maxJobsPerDay: 3,
+    maxJobsPerDay: 5,
     maxDailyMinutes: 10,
   },
   FREE_ACCOUNT: {
     maxFilesPerJob: 3,
-    maxMbPerFile: 50,
+    maxMbPerFile: 75,
     maxConcurrentJobs: 2,
-    maxJobsPerDay: 25,
+    maxJobsPerDay: 30,
     maxDailyMinutes: 60,
   },
-  PREMIUM: {
-    maxFilesPerJob: 10,
-    maxMbPerFile: 250,
-    maxConcurrentJobs: 4,
-    maxJobsPerDay: 200,
-    maxDailyMinutes: 240,
-  },
 };
 
 const DEFAULT_GLOBAL_LIMITS: GlobalLimits = {
-  maxConcurrentJobs: 20,
-  maxJobsPerDay: 1500,
-  maxDailyMinutes: 12000,
+  maxConcurrentJobs: 3,
+  maxJobsPerDay: 200,
+  maxDailyMinutes: 120,
   jobMaxAttempts: 3,
   leaseDurationMs: 2 * 60 * 1000,
   artifactTtlHours: 24,
diff --git a/apps/web/convex/schema.ts b/apps/web/convex/schema.ts
index d0b13fc..cee0b20 100644
--- a/apps/web/convex/schema.ts
+++ b/apps/web/convex/schema.ts
@@ -4,7 +4,6 @@ import { v } from "convex/values";
 const tier = v.union(
   v.literal("ANON"),
   v.literal("FREE_ACCOUNT"),
-  v.literal("PREMIUM"),
 );
 
 const jobStatus = v.union(
@@ -20,8 +19,9 @@ export default defineSchema({
     clerkUserId: v.string(),
     email: v.optional(v.string()),
     name: v.optional(v.string()),
-    tier,
+    // Legacy field kept optional so existing records remain schema-valid.
     adsFree: v.optional(v.boolean()),
+    tier,
     createdAt: v.number(),
     updatedAt: v.number(),
   })
diff --git a/apps/web/convex/users.ts b/apps/web/convex/users.ts
index 08106d8..8d5b2d9 100644
--- a/apps/web/convex/users.ts
+++ b/apps/web/convex/users.ts
@@ -5,10 +5,9 @@ import { resolveUser } from "./lib/auth";
 export const getViewer = query({
   args: {},
   handler: async (ctx) => {
-    const { identity, tier, adsFree } = await resolveUser(ctx);
+    const { identity, tier } = await resolveUser(ctx);
     return {
       tier,
-      adsFree,
       signedIn: Boolean(identity),
     };
   },
diff --git a/apps/web/eslint.config.mjs b/apps/web/eslint.config.mjs
index 05e726d..3349011 100644
--- a/apps/web/eslint.config.mjs
+++ b/apps/web/eslint.config.mjs
@@ -12,6 +12,8 @@ const eslintConfig = defineConfig([
     "out/**",
     "build/**",
     "next-env.d.ts",
+    // Convex generated code should not be linted.
+    "convex/_generated/**",
   ]),
 ]);
 
diff --git a/apps/web/package-lock.json b/apps/web/package-lock.json
index e87a3c9..fd5d7b6 100644
--- a/apps/web/package-lock.json
+++ b/apps/web/package-lock.json
@@ -11,12 +11,14 @@
         "@clerk/nextjs": "^6.36.10",
         "convex": "^1.31.7",
         "next": "16.1.4",
+        "qrcode": "^1.5.4",
         "react": "19.2.3",
         "react-dom": "19.2.3"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
         "@types/node": "^20",
+        "@types/qrcode": "^1.5.6",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "convex-test": "^0.0.41",
@@ -2458,6 +2460,16 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+      "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.2.9",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.9.tgz",
@@ -3167,11 +3179,19 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -3557,6 +3577,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001766",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz",
@@ -3610,11 +3639,21 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -3627,7 +3666,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/concat-map": {
@@ -3788,6 +3826,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3850,6 +3897,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -4821,6 +4874,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -5307,6 +5369,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
@@ -6428,6 +6499,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -6445,7 +6525,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -6494,6 +6573,15 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -6580,6 +6668,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6673,6 +6778,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -6871,6 +6991,12 @@
       "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==",
       "license": "MIT"
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -7137,6 +7263,26 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -7250,6 +7396,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -8009,6 +8167,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/which-typed-array": {
       "version": "1.1.20",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.20.tgz",
@@ -8058,6 +8222,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -8065,6 +8249,93 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/apps/web/package.json b/apps/web/package.json
index c2d1289..8cef548 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -14,12 +14,14 @@
     "@clerk/nextjs": "^6.36.10",
     "convex": "^1.31.7",
     "next": "16.1.4",
+    "qrcode": "^1.5.4",
     "react": "19.2.3",
     "react-dom": "19.2.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "convex-test": "^0.0.41",
diff --git a/apps/web/public/icons/chai-fab-dark.png b/apps/web/public/icons/chai-fab-dark.png
new file mode 100644
index 0000000..5b52403
Binary files /dev/null and b/apps/web/public/icons/chai-fab-dark.png differ
diff --git a/apps/web/public/icons/chai-fab-light.png b/apps/web/public/icons/chai-fab-light.png
new file mode 100644
index 0000000..6827fa7
Binary files /dev/null and b/apps/web/public/icons/chai-fab-light.png differ
diff --git a/apps/web/public/icons/chai.png b/apps/web/public/icons/chai.png
new file mode 100644
index 0000000..4afc646
Binary files /dev/null and b/apps/web/public/icons/chai.png differ
diff --git a/apps/web/src/app/api/download/route.ts b/apps/web/src/app/api/download/route.ts
index b71f0f6..c11d5e4 100644
--- a/apps/web/src/app/api/download/route.ts
+++ b/apps/web/src/app/api/download/route.ts
@@ -38,9 +38,11 @@ export async function GET(request: NextRequest): Promise<Response> {
 
   const convexUrl = process.env.NEXT_PUBLIC_CONVEX_URL ?? "http://localhost:3210";
   const convex = new ConvexHttpClient(convexUrl);
-  const disableAuth =
+  const bypassAllowed =
     process.env.ZENPDF_DISABLE_AUTH === "1" &&
     process.env.NODE_ENV !== "production";
+  const disableAuth =
+    bypassAllowed && request.headers.get("x-zenpdf-auth-bypassed") === "1";
   if (!disableAuth) {
     try {
       const { getToken } = getAuth(request);
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 651f8c0..797ecbb 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -1,263 +1,935 @@
 @import "tailwindcss";
 
 :root {
-  --paper-50: 248 243 232;
-  --paper-100: 242 232 214;
-  --paper-200: 229 213 187;
-  --paper-300: 214 191 154;
-  --ink-900: 52 40 30;
-  --ink-700: 90 72 58;
-  --ink-500: 119 101 85;
-  --forest-700: 46 78 55;
-  --forest-600: 63 98 70;
-  --forest-500: 83 125 86;
-  --sage-200: 210 224 206;
-  --rose-100: 246 235 224;
-  --gold-200: 229 210 179;
-  --wood-800: 84 56 36;
-  --wood-700: 101 68 43;
-  --wood-600: 123 84 55;
-  --wood-500: 145 104 71;
-  --wood-400: 171 130 96;
-  --leaf-300: 199 214 188;
-  --leaf-500: 108 149 112;
-  --leaf-700: 73 111 77;
-  --paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.25'/></svg>");
-  --leaf-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%23c6d7c0' stroke-width='2' opacity='0.6'><path d='M24 42c18 2 26 12 28 28-16-2-26-12-28-28Z'/><path d='M130 22c-14 7-19 20-16 36 15-7 20-19 16-36Z'/><path d='M98 118c-18 1-27 11-30 29 17-2 27-11 30-29Z'/></g></svg>");
-  --leaf-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='%23f2ead6' d='M5 13c5-6 10-7 14-6 0 7-4 11-10 12-2-1-3-3-4-6z'/><path fill='none' stroke='%2383a26a' stroke-width='1.4' d='M7 13c4-4 7-5 11-5-1 6-4 9-9 10'/></svg>");
+  color-scheme: light;
+  --paper-50: 249 251 250;
+  --paper-100: 243 247 245;
+  --paper-200: 229 235 232;
+  --paper-300: 211 221 215;
+  --ink-900: 15 23 42;
+  --ink-700: 51 65 85;
+  --ink-500: 100 116 139;
+  --forest-700: 18 105 74;
+  --forest-600: 22 136 95;
+  --forest-500: 52 173 127;
+  --sage-200: 220 246 233;
+  --rose-100: 254 242 242;
+  --rose-200: 254 226 226;
+  --gold-200: 254 243 199;
+  --wood-800: 55 65 81;
+  --wood-700: 71 85 105;
+  --wood-600: 100 116 139;
+  --wood-500: 148 163 184;
+  --wood-400: 203 213 225;
+  --leaf-300: 187 247 208;
+  --leaf-500: 34 197 94;
+  --leaf-700: 21 128 61;
+  --page-bg-top: 248 252 250;
+  --page-bg-bottom: 255 255 255;
+  --page-accent: 220 246 233;
+  --shadow-ink: 15 23 42;
 }
 
-body {
-  min-height: 100%;
-  background-color: rgb(var(--paper-50));
-  background-image:
-    radial-gradient(
-      circle at top,
-      rgb(252 246 234 / 0.9),
-      transparent 55%
-    ),
-    radial-gradient(
-      circle at 12% 25%,
-      rgb(229 212 186 / 0.55),
-      transparent 45%
-    ),
-    var(--leaf-pattern);
-  background-size: auto, auto, 260px 260px;
-  background-repeat: no-repeat, no-repeat, repeat;
-  background-attachment: fixed;
-  color: rgb(var(--ink-900));
-  font-family: var(--font-body), serif;
-  position: relative;
-  isolation: isolate;
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  /* Dark theme surface ladder: page < primary surface < nested surface */
+  --paper-50: 40 40 40;
+  --paper-100: 48 48 48;
+  --paper-200: 67 67 67;
+  --paper-300: 98 98 98;
+  --ink-900: 246 246 246;
+  --ink-700: 208 208 208;
+  --ink-500: 165 165 165;
+  /* Single Supabase green accent */
+  --forest-700: 63 207 142;
+  --forest-600: 63 207 142;
+  --forest-500: 63 207 142;
+  --sage-200: 48 48 48;
+  --rose-100: 78 38 38;
+  --rose-200: 96 44 44;
+  --gold-200: 78 62 30;
+  --wood-800: 22 22 22;
+  --wood-700: 28 28 28;
+  --wood-600: 36 36 36;
+  --wood-500: 48 48 48;
+  --wood-400: 72 72 72;
+  --leaf-300: 169 241 202;
+  --leaf-500: 63 207 142;
+  --leaf-700: 63 207 142;
+  --page-bg-top: 25 25 25;
+  --page-bg-bottom: 31 31 31;
+  --page-accent: 42 42 42;
+  --shadow-ink: 10 10 10;
 }
 
-body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  background-image: var(--paper-noise);
-  opacity: 0.22;
-  pointer-events: none;
-  z-index: 0;
-}
-
-body::after {
-  content: "";
-  position: fixed;
-  inset: 12px;
-  border-radius: 26px;
-  border: 6px solid rgb(var(--wood-500) / 0.35);
-  box-shadow:
-    inset 0 0 0 2px rgb(255 255 255 / 0.35),
-    0 22px 45px -30px rgba(84, 56, 36, 0.65);
-  pointer-events: none;
-  z-index: 1;
+html,
+body {
+  min-height: 100%;
 }
 
-body > * {
-  position: relative;
-  z-index: 2;
+body {
+  background:
+    radial-gradient(circle at top right, rgb(var(--page-accent) / 0.28), transparent 35%),
+    linear-gradient(180deg, rgb(var(--page-bg-top)), rgb(var(--page-bg-bottom)));
+  color: rgb(var(--ink-900));
+  font-family: var(--font-body), sans-serif;
+  line-height: 1.5;
 }
 
 a {
   color: inherit;
+  text-decoration: none;
 }
 
 h1,
 h2,
 h3,
 h4 {
-  font-family: var(--font-display), serif;
+  font-family: var(--font-display), sans-serif;
   color: rgb(var(--ink-900));
-  letter-spacing: -0.01em;
+  letter-spacing: -0.015em;
+}
+
+:focus-visible {
+  outline: 2px solid rgb(var(--forest-600));
+  outline-offset: 2px;
 }
 
 .paper-card {
-  background:
-    linear-gradient(
-      165deg,
-      rgb(var(--paper-50)),
-      rgb(var(--paper-100))
-    ),
-    var(--leaf-pattern);
-  background-size: auto, 220px 220px;
-  background-repeat: no-repeat, repeat;
-  border-radius: 26px;
-  border: 2px solid rgb(var(--wood-400) / 0.55);
+  background: rgb(var(--paper-50) / 0.96);
+  border: 1px solid rgb(var(--paper-200));
+  border-radius: 16px;
   box-shadow:
-    0 18px 40px -28px rgba(60, 40, 22, 0.65),
-    0 8px 16px -10px rgba(60, 40, 22, 0.35),
-    inset 0 1px 0 rgba(255, 255, 255, 0.75);
+    0 1px 2px rgb(var(--shadow-ink) / 0.2),
+    0 12px 24px -20px rgb(var(--shadow-ink) / 0.45);
 }
 
 .paper-stack {
-  background: linear-gradient(
-    160deg,
-    rgb(var(--paper-100)),
-    rgb(var(--paper-200))
-  );
-  border-radius: 32px;
-  border: 2px solid rgb(var(--wood-400) / 0.4);
+  background: rgb(var(--paper-100));
+  border: 1px solid rgb(var(--paper-200));
+  border-radius: 18px;
   box-shadow:
-    0 28px 60px -40px rgba(60, 40, 22, 0.55),
-    0 10px 22px -16px rgba(60, 40, 22, 0.3);
+    inset 0 1px 0 rgb(255 255 255 / 0.08),
+    0 16px 30px -24px rgb(var(--shadow-ink) / 0.6);
 }
 
-.paper-button {
+.paper-button,
+.paper-button--ghost,
+.paper-button--danger {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.45rem;
-  background: linear-gradient(
-    180deg,
-    rgb(var(--forest-500)),
-    rgb(var(--forest-700))
-  );
-  color: rgb(var(--paper-50));
-  border-radius: 999px;
-  padding: 0.7rem 1.6rem;
+  border-radius: 10px;
+  padding: 0.625rem 0.95rem;
+  font-size: 0.875rem;
   font-weight: 600;
-  letter-spacing: 0.01em;
-  box-shadow:
-    0 12px 24px -18px rgba(40, 62, 38, 0.75),
-    inset 0 1px 0 rgba(255, 255, 255, 0.25);
-  transition: transform 0.2s ease, box-shadow 0.2s ease,
-    background 0.2s ease;
+  line-height: 1;
+  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
+    box-shadow 0.18s ease, transform 0.12s ease;
+}
+
+.paper-button {
+  border: 1px solid rgb(var(--forest-700));
+  background: rgb(var(--forest-600));
+  color: rgb(255 255 255);
+  box-shadow: 0 10px 22px -16px rgb(18 105 74 / 0.6);
 }
 
 .paper-button::before {
-  content: "";
-  width: 16px;
-  height: 16px;
-  background-image: var(--leaf-icon);
-  background-size: contain;
-  background-repeat: no-repeat;
-  display: inline-block;
+  content: none;
 }
 
 .paper-button:hover {
-  background: linear-gradient(
-    180deg,
-    rgb(var(--forest-500)),
-    rgb(var(--forest-600))
-  );
-  transform: translateY(-1px);
+  background: rgb(var(--forest-700));
+}
+
+.paper-button:active {
+  transform: translateY(1px);
+}
+
+.paper-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
 }
 
 .paper-button--ghost {
+  border: 1px solid rgb(var(--paper-300));
   background: rgb(var(--paper-50));
   color: rgb(var(--ink-700));
-  border-radius: 999px;
-  padding: 0.55rem 1.3rem;
-  border: 2px solid rgb(var(--wood-400) / 0.5);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.75),
-    0 8px 16px -12px rgba(60, 40, 22, 0.35);
-  transition: background 0.2s ease, color 0.2s ease;
 }
 
 .paper-button--ghost:hover {
-  background: rgb(var(--paper-100));
-  color: rgb(var(--ink-900));
+  border-color: rgb(var(--forest-500) / 0.5);
+  color: rgb(var(--forest-700));
+}
+
+.paper-button--ghost[aria-pressed="true"] {
+  border-color: rgb(var(--forest-500) / 0.5);
+  background: rgb(var(--sage-200) / 0.65);
+  color: rgb(var(--forest-700));
+}
+
+.paper-button--danger {
+  border: 1px solid rgb(var(--rose-200) / 0.8);
+  background: rgb(var(--rose-100));
+  color: rgb(153 27 27);
+}
+
+.paper-button--danger:hover {
+  background: rgb(var(--rose-200));
 }
 
 .ink-label {
   text-transform: uppercase;
-  letter-spacing: 0.24em;
-  font-size: 0.65rem;
+  letter-spacing: 0.16em;
+  font-size: 0.68rem;
+  font-weight: 600;
   color: rgb(var(--ink-500));
 }
 
 .ink-divider {
   height: 1px;
-  background: linear-gradient(
-    90deg,
-    rgb(var(--ink-900) / 0),
-    rgb(var(--wood-600) / 0.35),
-    rgb(var(--ink-900) / 0)
-  );
+  background: rgb(var(--paper-200));
 }
 
 .wood-nav {
-  background:
-    linear-gradient(
-      180deg,
-      rgb(var(--wood-500)),
-      rgb(var(--wood-700))
-    );
-  border-radius: 999px;
-  border: 2px solid rgb(var(--wood-800) / 0.6);
+  border: 1px solid rgb(var(--paper-200));
+  background: rgb(var(--paper-50) / 0.9);
+  border-radius: 14px;
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.25),
-    0 14px 24px -18px rgba(60, 40, 22, 0.6);
-  padding: 0.65rem 1.25rem;
+    0 1px 2px rgb(var(--shadow-ink) / 0.24),
+    0 10px 24px -22px rgb(var(--shadow-ink) / 0.6);
 }
 
 .wood-nav a,
 .wood-nav button {
-  color: rgb(var(--paper-50));
+  color: inherit;
 }
 
 .wood-nav .paper-button--ghost {
-  background: rgb(var(--paper-50) / 0.16);
-  color: rgb(var(--paper-50));
-  border-color: rgb(255 255 255 / 0.25);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  background: transparent;
 }
 
 .wood-nav .paper-button {
-  background: linear-gradient(
-    180deg,
-    rgb(var(--leaf-500)),
-    rgb(var(--leaf-700))
-  );
+  color: rgb(255 255 255);
+}
+
+.wood-nav .paper-button:hover,
+.wood-nav .paper-button:focus-visible {
+  color: rgb(255 255 255);
+}
+
+.nav-link {
+  border: 1px solid transparent;
+  border-radius: 10px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(var(--ink-700));
+  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
+}
+
+.nav-link:hover {
+  border-color: rgb(var(--paper-300));
+  background: rgb(var(--paper-50) / 0.85);
+}
+
+.nav-link--active {
+  border-color: rgb(var(--forest-500) / 0.5);
+  background: rgb(var(--sage-200) / 0.7);
+  color: rgb(var(--forest-700));
 }
 
 .tool-card {
+  border-color: rgb(var(--paper-200));
+}
+
+.tool-card:hover {
+  border-color: rgb(var(--forest-500) / 0.5);
+}
+
+.tool-group-label {
+  margin-top: 0.9rem;
+  margin-bottom: 0.35rem;
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: rgb(var(--ink-500));
+}
+
+.task-step {
+  border-radius: 10px;
+  border: 1px solid rgb(var(--paper-200));
+  background: rgb(var(--paper-50) / 0.95);
+  padding: 0.75rem;
+}
+
+.task-step-index {
+  display: inline-flex;
+  height: 1.5rem;
+  width: 1.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid rgb(var(--paper-300));
+  background: rgb(var(--paper-100));
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: rgb(var(--forest-700));
+}
+
+.surface-muted {
+  border: 1px solid rgb(var(--paper-200));
+  background: rgb(var(--paper-100));
+  border-radius: 12px;
+}
+
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  border: 1px solid rgb(var(--paper-300));
+  padding: 0.35rem 0.7rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: rgb(var(--ink-700));
+}
+
+.status-pill--success {
+  border-color: rgb(var(--forest-500) / 0.4);
+  background: rgb(var(--sage-200));
+  color: rgb(var(--forest-700));
+}
+
+.status-pill--warning {
+  border-color: rgb(202 138 4 / 0.35);
+  background: rgb(var(--gold-200) / 0.35);
+  color: rgb(133 77 14);
+}
+
+.status-pill--error {
+  border-color: rgb(220 38 38 / 0.35);
+  background: rgb(var(--rose-100));
+  color: rgb(153 27 27);
+}
+
+.alert {
+  border-radius: 12px;
+  border: 1px solid rgb(var(--paper-300));
+  background: rgb(var(--paper-100));
+  padding: 0.75rem 0.9rem;
+  font-size: 0.82rem;
+  color: rgb(var(--ink-700));
+}
+
+.alert--success {
+  border-color: rgb(var(--forest-500) / 0.4);
+  background: rgb(var(--sage-200));
+  color: rgb(var(--forest-700));
+}
+
+.alert--error {
+  border-color: rgb(220 38 38 / 0.35);
+  background: rgb(var(--rose-100));
+  color: rgb(153 27 27);
+}
+
+.field-label {
+  display: block;
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: rgb(var(--ink-500));
+}
+
+.field-input {
+  margin-top: 0.45rem;
+  width: 100%;
+  border-radius: 10px;
+  border: 1px solid rgb(var(--paper-300));
+  background: rgb(var(--paper-50));
+  padding: 0.67rem 0.75rem;
+  font-size: 0.875rem;
+  color: rgb(var(--ink-900));
+}
+
+.field-input::placeholder {
+  color: rgb(var(--ink-500));
+}
+
+.field-input:focus {
+  border-color: rgb(var(--forest-500));
+  box-shadow: 0 0 0 3px rgb(var(--forest-500) / 0.15);
+  outline: none;
+}
+
+.field-helper {
+  margin-top: 0.35rem;
+  font-size: 0.74rem;
+  color: rgb(var(--ink-500));
+}
+
+/* Clerk user profile popover readability overrides */
+.cl-userButtonPopoverCard {
+  overflow: hidden;
+}
+
+.cl-userButtonPopoverMain,
+.cl-userButtonPopoverActions,
+.cl-userButtonPopoverFooter {
+  background: rgb(var(--paper-50)) !important;
+}
+
+.cl-userButtonPopoverActions {
+  border-top: 1px solid rgb(var(--paper-200)) !important;
+}
+
+.cl-userButtonPopoverActionButton {
+  min-height: 3.25rem;
+  font-weight: 600;
+  color: rgb(var(--ink-900)) !important;
+  opacity: 1 !important;
+  transition: background-color 0.18s ease, color 0.18s ease;
+}
+
+.cl-userButtonPopoverActionButton + .cl-userButtonPopoverActionButton {
+  border-top: 1px solid rgb(var(--paper-200));
+}
+
+.cl-userButtonPopoverActionButton:hover,
+.cl-userButtonPopoverActionButton:focus-visible {
+  background: rgb(var(--paper-100)) !important;
+  color: rgb(var(--ink-900)) !important;
+}
+
+.cl-userButtonPopoverActionButton * {
+  color: inherit !important;
+  opacity: 1 !important;
+}
+
+.cl-userButtonPopoverActionButtonIcon,
+.cl-userButtonPopoverActionButtonIconBox,
+.cl-userButtonPopoverActionButton svg {
+  color: rgb(var(--ink-700)) !important;
+}
+
+.cl-userPreviewMainIdentifier,
+.cl-userPreviewMainIdentifierText {
+  color: rgb(var(--ink-900)) !important;
+  opacity: 1 !important;
+}
+
+.cl-userPreviewSecondaryIdentifier {
+  color: rgb(var(--ink-700)) !important;
+  opacity: 1 !important;
+}
+
+.cl-userButtonPopoverFooter {
+  border-top: 1px solid rgb(var(--paper-200)) !important;
+  background: rgb(var(--paper-100)) !important;
+  color: rgb(var(--ink-700)) !important;
+}
+
+.cl-userButtonPopoverFooter * {
+  color: inherit !important;
+  opacity: 1 !important;
+}
+
+.theme-toggle {
+  width: 2rem;
+  height: 2rem;
+  min-width: 2rem;
+  border-radius: 999px;
+  padding: 0;
+}
+
+.theme-toggle svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.zen-user-popover-root {
+  z-index: 70;
+}
+
+.zen-user-popover-card {
+  min-width: min(23rem, calc(100vw - 1.25rem));
+  border-radius: 16px;
+  border: 1px solid rgb(var(--paper-200));
+  background: rgb(var(--paper-50));
+  box-shadow:
+    0 1px 2px rgb(var(--shadow-ink) / 0.2),
+    0 20px 42px -26px rgb(var(--shadow-ink) / 0.55);
+}
+
+.zen-user-preview {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.85rem;
+  align-items: center;
+}
+
+.zen-user-preview-avatar-wrap {
+  margin: 0;
+}
+
+.zen-user-preview-avatar-box {
+  border: none;
+  box-shadow: none;
+}
+
+.zen-user-preview-text {
+  row-gap: 0.2rem;
+}
+
+.zen-user-preview-name {
+  color: rgb(var(--ink-900));
+  font-size: 1.02rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.zen-user-preview-email {
+  color: rgb(var(--ink-700));
+  font-size: 0.9rem;
+  line-height: 1.35;
+}
+
+.zen-user-popover-actions {
+  border-top: 1px solid rgb(var(--paper-200));
+}
+
+.zen-user-popover-action {
+  min-height: 3.15rem;
+  padding-inline: 1rem;
+  color: rgb(var(--ink-900));
+  font-weight: 600;
+  opacity: 1;
+  transition: background-color 0.16s ease, color 0.16s ease;
+}
+
+.zen-user-popover-action * {
+  opacity: 1;
+}
+
+.zen-user-popover-action:hover,
+.zen-user-popover-action:focus-visible {
+  background: rgb(var(--paper-100));
+  color: rgb(var(--ink-900));
+}
+
+.zen-user-popover-action-iconbox,
+.zen-user-popover-action-icon {
+  color: rgb(var(--ink-700));
+  opacity: 1;
+}
+
+.zen-user-popover-footer {
+  border-top: 1px solid rgb(var(--paper-200));
+  color: rgb(var(--ink-700));
+}
+
+.zen-user-popover-footer-link {
+  color: rgb(var(--ink-700));
+}
+
+.zen-user-popover-footer-link:hover,
+.zen-user-popover-footer-link:focus-visible {
+  color: rgb(var(--ink-900));
+}
+
+.donate-fab {
+  position: fixed;
+  right: 1.2rem;
+  bottom: 1.2rem;
+  z-index: 60;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 5.25rem;
+  height: 5.25rem;
+  border-radius: 1.15rem;
+  border: 1px solid rgb(var(--forest-700) / 0.85);
+  background: rgb(var(--forest-600));
+  color: rgb(255 255 255);
+  box-shadow:
+    0 18px 30px -18px rgb(var(--shadow-ink) / 0.75),
+    inset 0 1px 0 rgb(255 255 255 / 0.24);
+  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease,
+    border-color 0.16s ease;
+}
+
+.donate-fab.donate-fab--with-image {
+  background: transparent;
+  border-color: transparent;
+  box-shadow:
+    0 10px 22px -14px rgb(var(--shadow-ink) / 0.55),
+    0 4px 12px -10px rgb(var(--shadow-ink) / 0.35);
+}
+
+.donate-fab.donate-fab--with-image:hover {
+  background: transparent;
+  box-shadow:
+    0 16px 30px -14px rgb(var(--shadow-ink) / 0.68),
+    0 8px 18px -12px rgb(var(--shadow-ink) / 0.45);
+}
+
+.donate-fab-hint {
+  position: absolute;
+  right: 1rem;
+  bottom: calc(100% + 0.7rem);
+  transform: translateY(4px);
+  opacity: 0;
+  pointer-events: none;
+  white-space: nowrap;
+  border-radius: 12px;
+  border: 1px solid rgb(var(--paper-300));
+  background: rgb(var(--paper-50));
+  color: rgb(var(--ink-900));
+  padding: 0.58rem 0.95rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1;
+  box-shadow:
+    0 12px 24px -16px rgb(var(--shadow-ink) / 0.85),
+    0 1px 0 rgb(255 255 255 / 0.16);
+  transition: opacity 0.16s ease, transform 0.16s ease;
+}
+
+.donate-fab-hint::after {
+  content: "";
+  position: absolute;
+  right: 3.9rem;
+  top: 100%;
+  width: 11px;
+  height: 11px;
+  background: rgb(var(--paper-50));
+  border-right: 1px solid rgb(var(--paper-300));
+  border-bottom: 1px solid rgb(var(--paper-300));
+  transform: translateY(-5px) rotate(45deg);
+}
+
+.donate-fab:hover .donate-fab-hint,
+.donate-fab:focus-visible .donate-fab-hint {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.donate-fab:hover {
+  transform: translateY(-1px) scale(1.01);
+  background: rgb(var(--forest-700));
+  box-shadow:
+    0 20px 32px -16px rgb(var(--shadow-ink) / 0.85),
+    inset 0 1px 0 rgb(255 255 255 / 0.28);
+}
+
+.donate-fab:active {
+  transform: translateY(0) scale(0.995);
+}
+
+.donate-fab svg {
+  width: 1.7rem;
+  height: 1.7rem;
+}
+
+.donate-fab-icon-image {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 0.95rem;
+  filter: drop-shadow(0 8px 14px rgb(var(--shadow-ink) / 0.28));
+  transition: filter 0.18s ease;
+}
+
+.donate-fab.donate-fab--with-image:hover .donate-fab-icon-image {
+  filter: drop-shadow(0 12px 20px rgb(var(--shadow-ink) / 0.42));
+}
+
+.donate-close-button {
+  width: auto;
+}
+
+.donate-card-frame {
+  display: block;
+  width: 100%;
+  min-height: 25rem;
+  border: 0;
+  border-radius: 10px;
+  background: rgb(var(--paper-50));
+}
+
+:root[data-theme="dark"] body {
   background:
-    linear-gradient(
-      160deg,
-      rgb(var(--paper-50)),
-      rgb(var(--paper-100))
-    ),
-    var(--leaf-pattern);
-  border: 2px solid rgb(var(--wood-400) / 0.65);
+    radial-gradient(circle at top center, rgb(255 255 255 / 0.04), transparent 42%),
+    linear-gradient(180deg, rgb(var(--page-bg-top)), rgb(var(--page-bg-bottom)));
+}
+
+:root[data-theme="dark"] .paper-card {
+  background: rgb(var(--paper-50) / 0.96);
+  border-color: rgb(var(--paper-200) / 0.95);
+  box-shadow:
+    0 1px 0 rgb(255 255 255 / 0.04),
+    0 16px 30px -24px rgb(0 0 0 / 0.85);
+}
+
+:root[data-theme="dark"] .paper-stack {
+  background: rgb(var(--paper-100) / 0.95);
+  border-color: rgb(var(--paper-200));
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.05),
+    0 18px 34px -24px rgb(0 0 0 / 0.85);
+}
+
+:root[data-theme="dark"] .wood-nav {
+  border-color: rgb(var(--paper-200));
+  background: rgb(var(--paper-50) / 0.9);
+  box-shadow:
+    0 1px 0 rgb(255 255 255 / 0.05),
+    0 16px 34px -24px rgb(0 0 0 / 0.86);
+}
+
+:root[data-theme="dark"] .surface-muted,
+:root[data-theme="dark"] .task-step,
+:root[data-theme="dark"] .field-input,
+:root[data-theme="dark"] .tool-card,
+:root[data-theme="dark"] .paper-button--ghost {
+  background: rgb(var(--paper-100));
+  border-color: rgb(var(--paper-200));
+}
+
+:root[data-theme="dark"] .nav-link:hover {
+  border-color: rgb(var(--paper-200));
+  background: rgb(var(--paper-100));
+}
+
+:root[data-theme="dark"] .paper-button {
+  border-color: rgb(var(--forest-500) / 0.55);
+  background: rgb(var(--paper-100));
+  color: rgb(var(--forest-500));
+  box-shadow: none;
+}
+
+:root[data-theme="dark"] .paper-button:hover,
+:root[data-theme="dark"] .paper-button:focus-visible {
+  border-color: rgb(var(--forest-500) / 0.75);
+  background: rgb(var(--paper-50));
+  color: rgb(var(--forest-500));
+}
+
+:root[data-theme="dark"] .wood-nav .paper-button,
+:root[data-theme="dark"] .wood-nav .paper-button:hover,
+:root[data-theme="dark"] .wood-nav .paper-button:focus-visible {
+  color: rgb(var(--forest-500));
+}
+
+:root[data-theme="dark"] .nav-link--active {
+  border-color: rgb(var(--forest-500) / 0.55);
+  background: rgb(var(--paper-100));
+  color: rgb(var(--forest-500));
+}
+
+:root[data-theme="dark"] .status-pill--success {
+  border-color: rgb(var(--forest-500) / 0.45);
+  background: rgb(var(--paper-100));
+  color: rgb(var(--forest-500));
+}
+
+:root[data-theme="dark"] .alert--success {
+  border-color: rgb(var(--forest-500) / 0.45);
+  background: rgb(var(--paper-100));
+  color: rgb(var(--forest-500));
+}
+
+:root[data-theme="dark"] .paper-button--ghost:hover {
+  background: rgb(var(--paper-50));
+  border-color: rgb(var(--forest-500) / 0.5);
+  color: rgb(var(--forest-500));
+}
+
+:root[data-theme="dark"] .paper-button--ghost[aria-pressed="true"] {
+  border-color: rgb(var(--forest-500) / 0.58);
+  background: rgb(var(--paper-50));
+  color: rgb(var(--forest-500));
+}
+
+:root[data-theme="dark"] .zen-user-popover-card {
+  border-color: rgb(var(--paper-200));
+  background: rgb(var(--paper-50));
+  box-shadow:
+    0 1px 0 rgb(255 255 255 / 0.05),
+    0 22px 42px -24px rgb(0 0 0 / 0.85);
+}
+
+:root[data-theme="dark"] .zen-user-preview-name {
+  color: rgb(var(--ink-900));
+}
+
+:root[data-theme="dark"] .zen-user-preview-email {
+  color: rgb(var(--ink-700));
+}
+
+:root[data-theme="dark"] .zen-user-popover-actions,
+:root[data-theme="dark"] .zen-user-popover-footer {
+  border-top-color: rgb(var(--paper-200));
+}
+
+:root[data-theme="dark"] .zen-user-popover-action {
+  color: rgb(var(--ink-900));
+}
+
+:root[data-theme="dark"] .zen-user-popover-action:hover,
+:root[data-theme="dark"] .zen-user-popover-action:focus-visible {
+  background: rgb(var(--paper-100));
+  color: rgb(var(--ink-900));
+}
+
+:root[data-theme="dark"] .zen-user-popover-action-iconbox,
+:root[data-theme="dark"] .zen-user-popover-action-icon {
+  color: rgb(var(--ink-700));
+}
+
+:root[data-theme="dark"] .donate-fab {
+  border-color: rgb(var(--forest-500) / 0.8);
+  background: rgb(var(--forest-600));
+  box-shadow:
+    0 22px 34px -16px rgb(0 0 0 / 0.9),
+    inset 0 1px 0 rgb(255 255 255 / 0.2);
+}
+
+:root[data-theme="dark"] .donate-fab:hover {
+  border-color: rgb(var(--leaf-300) / 0.65);
+  background: rgb(var(--forest-600));
+  box-shadow:
+    0 26px 38px -16px rgb(0 0 0 / 0.9),
+    0 0 0 1px rgb(var(--leaf-300) / 0.3),
+    inset 0 1px 0 rgb(255 255 255 / 0.24);
+}
+
+:root[data-theme="dark"] .donate-fab.donate-fab--with-image,
+:root[data-theme="dark"] .donate-fab.donate-fab--with-image:hover {
+  background: transparent;
+  border-color: transparent;
+}
+
+:root[data-theme="dark"] .donate-fab.donate-fab--with-image {
+  box-shadow:
+    0 0 0 1px rgb(255 255 255 / 0.06),
+    0 10px 20px -14px rgb(0 0 0 / 0.86),
+    0 6px 22px -16px rgb(214 224 234 / 0.35);
+}
+
+:root[data-theme="dark"] .donate-fab.donate-fab--with-image:hover {
   box-shadow:
-    0 16px 28px -22px rgba(60, 40, 22, 0.6),
-    inset 0 1px 0 rgba(255, 255, 255, 0.7);
+    0 0 0 1px rgb(255 255 255 / 0.1),
+    0 14px 26px -12px rgb(0 0 0 / 0.9),
+    0 10px 28px -14px rgb(214 224 234 / 0.5);
+}
+
+:root[data-theme="dark"] .donate-fab-icon-image {
+  filter:
+    drop-shadow(0 0 1px rgb(240 247 255 / 0.28))
+    drop-shadow(0 10px 16px rgb(0 0 0 / 0.56))
+    drop-shadow(0 0 16px rgb(214 224 234 / 0.28));
+}
+
+:root[data-theme="dark"] .donate-fab.donate-fab--with-image:hover .donate-fab-icon-image {
+  filter:
+    drop-shadow(0 0 1px rgb(245 251 255 / 0.42))
+    drop-shadow(0 14px 24px rgb(0 0 0 / 0.7))
+    drop-shadow(0 0 26px rgb(214 224 234 / 0.46));
+}
+
+:root[data-theme="dark"] .donate-fab-hint {
+  border-color: rgb(var(--paper-200));
+  background: rgb(var(--paper-50));
+  color: rgb(var(--ink-900));
+}
+
+:root[data-theme="dark"] .donate-fab-hint::after {
+  background: rgb(var(--paper-50));
+  border-right-color: rgb(var(--paper-200));
+  border-bottom-color: rgb(var(--paper-200));
+}
+
+:root[data-theme="dark"] .donate-card-frame {
+  background: rgb(var(--paper-100));
+}
+
+:root[data-theme="dark"] .status-pill--warning {
+  border-color: rgb(251 191 36 / 0.45);
+  color: rgb(253 230 138);
+}
+
+:root[data-theme="dark"] .status-pill--error {
+  border-color: rgb(248 113 113 / 0.45);
+  color: rgb(254 202 202);
+}
+
+:root[data-theme="dark"] .alert--error {
+  border-color: rgb(248 113 113 / 0.45);
+  color: rgb(254 202 202);
+}
+
+:root[data-theme="dark"] .paper-button--danger {
+  border-color: rgb(var(--rose-200) / 0.8);
+  background: rgb(var(--rose-100));
+  color: rgb(254 202 202);
+}
+
+:root[data-theme="dark"] .paper-button--danger:hover {
+  background: rgb(var(--rose-200));
 }
 
 .fade-up {
-  animation: fade-up 0.75s ease both;
+  animation: fade-up 0.55s ease both;
 }
 
 @keyframes fade-up {
   from {
     opacity: 0;
-    transform: translateY(16px);
+    transform: translateY(10px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
+
+@media (max-width: 640px) {
+  .paper-card,
+  .paper-stack {
+    border-radius: 14px;
+  }
+
+  .paper-button,
+  .paper-button--ghost,
+  .paper-button--danger {
+    width: 100%;
+  }
+
+  .theme-toggle,
+  .theme-toggle.paper-button--ghost {
+    width: 2rem;
+    min-width: 2rem;
+  }
+
+  .donate-fab {
+    right: 0.9rem;
+    bottom: 0.9rem;
+    width: 4.4rem;
+    height: 4.4rem;
+    border-radius: 1rem;
+  }
+
+  .donate-close-button {
+    width: auto;
+  }
+
+  .donate-fab-hint {
+    display: none;
+  }
+}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index abb8417..4044f22 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,16 +1,18 @@
 import type { Metadata } from "next";
-import { Playfair_Display, Source_Serif_4 } from "next/font/google";
+import { Manrope, Public_Sans } from "next/font/google";
+
+import DonateBookmark from "@/components/DonateBookmark";
 
 import Providers from "./providers";
 import "./globals.css";
 
-const displayFont = Playfair_Display({
+const displayFont = Manrope({
   variable: "--font-display",
   subsets: ["latin"],
-  weight: ["600", "700"],
+  weight: ["600", "700", "800"],
 });
 
-const bodyFont = Source_Serif_4({
+const bodyFont = Public_Sans({
   variable: "--font-body",
   subsets: ["latin"],
   weight: ["400", "500", "600"],
@@ -19,18 +21,44 @@ const bodyFont = Source_Serif_4({
 export const metadata: Metadata = {
   title: "ZenPDF",
   description:
-    "ZenPDF is an open-source PDF workbench with clear usage limits and a tactile dossier-style interface.",
+    "ZenPDF is an open-source PDF workbench with clear usage limits and a clean, readable interface.",
 };
 
+const themeInitScript = `
+(() => {
+  try {
+    const key = "zenpdf-theme";
+    const saved = window.localStorage.getItem(key);
+    const theme = saved === "light" || saved === "dark"
+      ? saved
+      : "light";
+    document.documentElement.dataset.theme = theme;
+  } catch (_) {
+    document.documentElement.dataset.theme = "light";
+  }
+})();
+`;
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className={`${displayFont.variable} ${bodyFont.variable}`}>
-      <body className="min-h-screen bg-paper-50 text-ink-900 antialiased">
-        <Providers>{children}</Providers>
+    <html
+      lang="en"
+      className={`${displayFont.variable} ${bodyFont.variable}`}
+      suppressHydrationWarning
+    >
+      <head>
+        <meta name="color-scheme" content="light dark" />
+        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
+      </head>
+      <body className="min-h-screen text-ink-900 antialiased">
+        <Providers>
+          {children}
+          <DonateBookmark />
+        </Providers>
       </body>
     </html>
   );
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 3bc7c39..3d1dab5 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -31,8 +31,9 @@ const toolShelves = [
     items: ["Scan to PDF", "OCR PDF", "PDF to PDF/A", "Crop PDF"],
   },
 ];
+const totalToolCount = toolShelves.reduce((count, shelf) => count + shelf.items.length, 0);
 
-const { ANON, FREE_ACCOUNT, PREMIUM } = DEFAULT_LIMITS;
+const { ANON, FREE_ACCOUNT } = DEFAULT_LIMITS;
 
 const planSnapshots = [
   {
@@ -53,15 +54,6 @@ const planSnapshots = [
       `${FREE_ACCOUNT.maxJobsPerDay} jobs per day`,
     ],
   },
-  {
-    tier: "PREMIUM",
-    description: "Supporter mode increases daily and batch limits.",
-    details: [
-      `${PREMIUM.maxFilesPerJob} files per job`,
-      `${formatBytes(PREMIUM.maxMbPerFile * 1024 * 1024)} per file`,
-      `${PREMIUM.maxJobsPerDay} jobs per day`,
-    ],
-  },
 ];
 
 const steps = [
@@ -79,6 +71,27 @@ const steps = [
   },
 ];
 
+const practicalRoutes = [
+  {
+    title: "Run a PDF task",
+    description: "Choose a tool, upload files, and queue processing jobs.",
+    href: "/tools",
+    cta: "Open tools",
+  },
+  {
+    title: "Check limits first",
+    description: "Review your daily caps and shared capacity before heavy work.",
+    href: "/usage-capacity",
+    cta: "Open usage",
+  },
+  {
+    title: "Need unlimited usage",
+    description: "Run ZenPDF locally when you need full control and no cloud caps.",
+    href: "/self-host",
+    cta: "See self-host path",
+  },
+];
+
 const ToolCard = ({
   title,
   description,
@@ -89,28 +102,9 @@ const ToolCard = ({
   items: string[];
 }) => (
   <div className="paper-card flex h-full flex-col gap-4 p-6">
-    <div className="flex items-center gap-3">
-      <span className="flex h-11 w-11 items-center justify-center rounded-[16px] border border-ink-900/10 bg-paper-100 text-ink-900">
-        <svg
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.6"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <path d="M6 3h8l4 4v14H6z" />
-          <path d="M14 3v5h5" />
-          <path d="M9 13h6" />
-          <path d="M9 17h6" />
-        </svg>
-      </span>
-      <div>
-        <h3 className="text-xl font-display">{title}</h3>
-        <p className="text-xs text-ink-500">{description}</p>
-      </div>
+    <div>
+      <h3 className="text-lg font-semibold">{title}</h3>
+      <p className="mt-1 text-sm text-ink-500">{description}</p>
     </div>
     <ul className="mt-auto space-y-2 text-sm text-ink-700">
       {items.map((item) => (
@@ -123,161 +117,156 @@ const ToolCard = ({
   </div>
 );
 
-/**
- * Render the application's landing page with hero, status panel, tool shelf, plans, and footer.
- *
- * @returns A React element representing the home page layout and its static content.
- */
 export default function Home() {
   return (
     <div className="relative">
       <SiteHeader />
-      <main className="relative z-10">
-        <section className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-6 pb-16 pt-6 lg:flex-row lg:items-center">
-          <div className="flex-1 space-y-6 fade-up">
+      <main className="mx-auto w-full max-w-6xl px-4 pb-14 pt-5 sm:px-6">
+        <section className="grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
+          <div className="paper-card p-8 fade-up">
             <span className="ink-label">Open-source PDF workbench</span>
-            <h1 className="text-4xl leading-tight md:text-5xl">
-              Calm, precise PDF control with clear limits and a paper-first feel.
+            <h1 className="mt-3 text-3xl leading-tight sm:text-4xl">
+              Clean, reliable PDF workflows with transparent limits.
             </h1>
-            <p className="max-w-xl text-lg text-ink-700">
-              ZenPDF keeps your PDF operations grounded with strict capacity
-              controls, friendly error messages, and a serene dossier-inspired
-              interface. Heavy lifting happens in a separate worker so the web
-              app stays light.
+            <p className="mt-4 max-w-2xl text-base text-ink-700">
+              ZenPDF keeps document processing predictable with clear capacity rules,
+              friendly error feedback, and server-side enforcement. Upload, configure,
+              and run tools in a guided flow.
             </p>
-            <div className="flex flex-wrap gap-3">
+            <div className="mt-6 flex flex-wrap gap-3">
               <Link className="paper-button" href="/tools">
                 Start with a file
               </Link>
               <Link className="paper-button--ghost" href="/usage-capacity">
-                See usage & capacity
+                View usage limits
               </Link>
             </div>
           </div>
-          <div
-            className="relative flex-1 fade-up"
-            style={{ animationDelay: "0.12s" }}
-          >
-            <div className="absolute -left-6 top-6 hidden h-full w-full rounded-[34px] bg-paper-200/70 shadow-paper-lift lg:block" />
-            <div className="relative paper-stack p-6">
-              <div className="space-y-5">
-                <div className="paper-card p-5">
-                  <div className="flex items-center justify-between text-sm text-ink-700">
-                    <span className="ink-label">Status</span>
-                    <span className="rounded-full border border-forest-600/30 bg-sage-200 px-3 py-1 text-xs uppercase tracking-[0.2em] text-forest-700">
-                      Available
-                    </span>
-                  </div>
-                  <p className="mt-3 text-sm text-ink-700">
-                    Capacity is monitored hourly to protect free-tier budgets.
-                  </p>
+
+          <div className="paper-stack p-6 fade-up" style={{ animationDelay: "0.08s" }}>
+            <div className="space-y-4">
+              <div className="paper-card p-4">
+                <div className="flex items-center justify-between gap-3">
+                  <span className="ink-label">Status</span>
+                  <span className="status-pill status-pill--success">Available</span>
                 </div>
-                <div className="paper-card p-5">
-                  <div className="flex items-center justify-between text-sm text-ink-700">
-                    <span className="ink-label">Active tools</span>
-                    <span className="text-xs uppercase tracking-[0.2em] text-ink-500">
-                      27 available
-                    </span>
-                  </div>
-                  <p className="mt-3 text-sm text-ink-700">
-                    Heavy tools can pause if monthly budget limits are reached.
-                  </p>
+                <p className="mt-2 text-sm text-ink-700">
+                  Capacity is monitored hourly to protect free-tier budgets.
+                </p>
+              </div>
+
+              <div className="paper-card p-4">
+                <div className="flex items-center justify-between gap-3">
+                  <span className="ink-label">Active tools</span>
+                  <span className="status-pill">{totalToolCount} available</span>
                 </div>
-                <div className="paper-card p-5">
-                  <div className="flex items-center justify-between text-sm text-ink-700">
-                    <span className="ink-label">Storage</span>
-                    <span className="text-xs uppercase tracking-[0.2em] text-ink-500">
-                      Convex Files
-                    </span>
-                  </div>
-                  <p className="mt-3 text-sm text-ink-700">
-                    Files expire automatically to keep storage lean.
-                  </p>
+                <p className="mt-2 text-sm text-ink-700">
+                  Heavy tools can pause when monthly budget limits are reached.
+                </p>
+              </div>
+
+              <div className="paper-card p-4">
+                <div className="flex items-center justify-between gap-3">
+                  <span className="ink-label">Storage</span>
+                  <span className="status-pill">Convex Files</span>
                 </div>
+                <p className="mt-2 text-sm text-ink-700">
+                  Files expire automatically to keep storage lean and controlled.
+                </p>
               </div>
             </div>
           </div>
         </section>
 
-        <section className="mx-auto w-full max-w-6xl px-6 pb-16">
-          <div className="flex flex-col gap-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <span className="ink-label">Tool shelf</span>
-                <h2 className="text-3xl">Everyday PDF work, layered and calm.</h2>
+        <section className="mt-10">
+          <span className="ink-label">Choose your route</span>
+          <h2 className="mt-2 text-2xl">Go to the right place for your task.</h2>
+          <div className="mt-4 grid gap-3 md:grid-cols-3">
+            {practicalRoutes.map((route) => (
+              <div key={route.title} className="paper-card flex flex-col gap-3 p-5">
+                <h3 className="text-base font-semibold text-ink-900">{route.title}</h3>
+                <p className="text-sm text-ink-700">{route.description}</p>
+                <Link className="paper-button--ghost mt-auto w-fit" href={route.href}>
+                  {route.cta}
+                </Link>
               </div>
-              <Link className="paper-button--ghost" href="/tools">
-                Open tool desk
-              </Link>
+            ))}
+          </div>
+        </section>
+
+        <section className="mt-10">
+          <div className="flex flex-wrap items-end justify-between gap-3">
+            <div>
+              <span className="ink-label">Tool shelf</span>
+              <h2 className="mt-2 text-2xl">Everyday PDF operations in one desk.</h2>
             </div>
-            <div className="ink-divider" />
+            <Link className="paper-button--ghost" href="/tools">
+              Open tools
+            </Link>
           </div>
-          <div className="mt-8 grid gap-6 md:grid-cols-2">
+          <div className="ink-divider mt-4" />
+          <div className="mt-6 grid gap-4 md:grid-cols-2">
             {toolShelves.map((tool) => (
               <ToolCard key={tool.title} {...tool} />
             ))}
           </div>
         </section>
 
-        <section className="mx-auto w-full max-w-6xl px-6 pb-16">
-          <div className="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
-            <div className="paper-card p-8">
-              <span className="ink-label">Plans</span>
-              <h2 className="mt-3 text-3xl">Limits you can understand.</h2>
-              <p className="mt-3 text-base text-ink-700">
-                ZenPDF shows every cap up front and enforces it server-side.
-                When capacity tightens, heavy tools pause first.
-              </p>
-              <div className="mt-6 grid gap-4 md:grid-cols-3">
-                {planSnapshots.map((plan) => (
-                  <div key={plan.tier} className="rounded-[22px] border border-ink-900/10 bg-paper-100 p-4">
-                    <h3 className="text-lg font-display text-ink-900">{plan.tier}</h3>
-                    <p className="mt-2 text-sm text-ink-700">{plan.description}</p>
-                    <ul className="mt-3 space-y-2 text-xs text-ink-500">
-                      {plan.details.map((detail) => (
-                        <li key={detail} className="flex items-center gap-2">
-                          <span className="h-1.5 w-1.5 rounded-full bg-forest-600" />
-                          {detail}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                ))}
-              </div>
+        <section className="mt-10 grid gap-4 lg:grid-cols-[1.2fr_0.8fr]">
+          <div className="paper-card p-6 sm:p-8">
+            <span className="ink-label">Plans</span>
+            <h2 className="mt-2 text-2xl">Limits shown up front.</h2>
+            <p className="mt-3 text-sm text-ink-700">
+              Every cap is visible and enforced server-side. If capacity tightens,
+              heavy tools pause first.
+            </p>
+            <div className="mt-5 grid gap-3 md:grid-cols-2">
+              {planSnapshots.map((plan) => (
+                <div key={plan.tier} className="surface-muted p-4">
+                  <h3 className="text-base font-semibold text-ink-900">{plan.tier}</h3>
+                  <p className="mt-1 text-xs text-ink-500">{plan.description}</p>
+                  <ul className="mt-3 space-y-2 text-sm text-ink-700">
+                    {plan.details.map((detail) => (
+                      <li key={detail} className="flex items-center gap-2">
+                        <span className="h-1.5 w-1.5 rounded-full bg-forest-600" />
+                        {detail}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
             </div>
-            <div className="paper-card flex flex-col gap-4 p-8">
-              <span className="ink-label">Workflow</span>
-              <h2 className="text-2xl">From upload to delivery.</h2>
-              <div className="space-y-4">
-                {steps.map((step, index) => (
-                  <div key={step.title} className="flex items-start gap-4">
-                    <div className="flex h-10 w-10 items-center justify-center rounded-[16px] border border-ink-900/10 bg-paper-100 text-sm font-display text-ink-900">
-                      0{index + 1}
-                    </div>
-                    <div>
-                      <h3 className="text-lg font-display text-ink-900">
-                        {step.title}
-                      </h3>
-                      <p className="text-sm text-ink-700">{step.copy}</p>
-                    </div>
+          </div>
+
+          <div className="paper-card p-6 sm:p-8">
+            <span className="ink-label">Workflow</span>
+            <h2 className="mt-2 text-2xl">From upload to result.</h2>
+            <div className="mt-4 space-y-4">
+              {steps.map((step, index) => (
+                <div key={step.title} className="flex items-start gap-3">
+                  <div className="flex h-8 w-8 items-center justify-center rounded-lg border border-paper-300 bg-paper-100 text-xs font-semibold text-forest-700">
+                    0{index + 1}
                   </div>
-                ))}
-              </div>
-              <div className="mt-auto rounded-[20px] border border-forest-600/30 bg-sage-200/70 p-4 text-sm text-forest-700">
-                Supporter mode hides the banner and expands batch limits.
-              </div>
+                  <div>
+                    <h3 className="text-base font-semibold text-ink-900">{step.title}</h3>
+                    <p className="text-sm text-ink-700">{step.copy}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="alert alert--success mt-6">
+              All tools are free to use. Limits are for shared pool fairness.
             </div>
           </div>
         </section>
       </main>
 
-      <footer className="relative z-10 mx-auto w-full max-w-6xl px-6 pb-12">
-        <div className="paper-card flex flex-col gap-4 p-6 md:flex-row md:items-center md:justify-between">
+      <footer className="mx-auto w-full max-w-6xl px-4 pb-12 sm:px-6">
+        <div className="paper-card flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between">
           <div>
             <span className="ink-label">Open source</span>
-            <p className="mt-2 text-sm text-ink-700">
-              ZenPDF is built to be run locally when you need unlimited
-              capacity.
+            <p className="mt-1 text-sm text-ink-700">
+              ZenPDF can be run locally when you need unlimited capacity and full control.
             </p>
           </div>
           <Link className="paper-button" href="/usage-capacity">
diff --git a/apps/web/src/app/providers.tsx b/apps/web/src/app/providers.tsx
index a1d3b81..ed6e766 100644
--- a/apps/web/src/app/providers.tsx
+++ b/apps/web/src/app/providers.tsx
@@ -4,6 +4,8 @@ import { ClerkProvider, useAuth } from "@clerk/nextjs";
 import { ConvexProviderWithClerk } from "convex/react-clerk";
 import { ConvexReactClient } from "convex/react";
 
+import { ThemeModeProvider } from "@/components/ThemeModeProvider";
+
 const convexUrl = process.env.NEXT_PUBLIC_CONVEX_URL;
 
 if (!convexUrl && process.env.NODE_ENV === "production") {
@@ -14,20 +16,55 @@ const convex = new ConvexReactClient(convexUrl ?? "http://localhost:3210");
 
 export default function Providers({ children }: { children: React.ReactNode }) {
   return (
-    <ClerkProvider
-      signInUrl="/sign-in"
-      signUpUrl="/sign-up"
-      appearance={{
-        variables: {
-          colorPrimary: "#1f4338",
-          colorText: "#2b2723",
-          colorBackground: "#f7f0e5",
-        },
-      }}
-    >
-      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
-        {children}
-      </ConvexProviderWithClerk>
-    </ClerkProvider>
+    <ThemeModeProvider>
+      <ClerkProvider
+        signInUrl="/sign-in"
+        signUpUrl="/sign-up"
+        appearance={{
+          variables: {
+            colorPrimary: "rgb(var(--forest-600))",
+            colorText: "rgb(var(--ink-900))",
+            colorTextOnPrimaryBackground: "#ffffff",
+            colorBackground: "rgb(var(--paper-50))",
+            colorInputBackground: "rgb(var(--paper-50))",
+            colorInputText: "rgb(var(--ink-900))",
+            colorNeutral: "rgb(var(--ink-500))",
+          },
+          elements: {
+            userButtonTrigger:
+              "h-9 w-9 rounded-full ring-1 ring-paper-300/80 transition hover:ring-forest-500/55",
+            userButtonAvatarBox: "h-9 w-9 rounded-full",
+            userButtonPopoverRootBox: "zen-user-popover-root mt-2",
+            userButtonPopoverCard:
+              "zen-user-popover-card rounded-[16px] overflow-hidden border border-paper-200 bg-paper-50 text-ink-900 shadow-paper-lift",
+            userButtonPopoverMain: "zen-user-popover-main bg-paper-50",
+            userButtonPopoverActions:
+              "zen-user-popover-actions border-t border-paper-200 bg-paper-50",
+            userButtonPopoverActionButton:
+              "zen-user-popover-action min-h-14 px-4 !text-ink-900 !opacity-100 hover:bg-paper-100 hover:!text-ink-900 focus:bg-paper-100 focus:!text-ink-900",
+            userButtonPopoverActionButtonIconBox:
+              "zen-user-popover-action-iconbox !text-ink-700 !opacity-100",
+            userButtonPopoverActionButtonIcon:
+              "zen-user-popover-action-icon !text-ink-700 !opacity-100",
+            userButtonPopoverFooter:
+              "zen-user-popover-footer border-t border-paper-200 bg-paper-100 !text-ink-700",
+            userButtonPopoverFooterPagesLink:
+              "zen-user-popover-footer-link !text-ink-700 hover:!text-ink-900",
+            userPreview: "zen-user-preview px-4 py-4",
+            userPreviewAvatarContainer: "zen-user-preview-avatar-wrap",
+            userPreviewAvatarBox: "zen-user-preview-avatar-box",
+            userPreviewTextContainer: "zen-user-preview-text gap-1",
+            userPreviewMainIdentifierText:
+              "zen-user-preview-name !text-ink-900 !opacity-100",
+            userPreviewSecondaryIdentifier:
+              "zen-user-preview-email !text-ink-700 !opacity-100",
+          },
+        }}
+      >
+        <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+          {children}
+        </ConvexProviderWithClerk>
+      </ClerkProvider>
+    </ThemeModeProvider>
   );
 }
diff --git a/apps/web/src/app/self-host/page.tsx b/apps/web/src/app/self-host/page.tsx
new file mode 100644
index 0000000..dc11b85
--- /dev/null
+++ b/apps/web/src/app/self-host/page.tsx
@@ -0,0 +1,100 @@
+import Link from "next/link";
+
+import SiteHeader from "@/components/SiteHeader";
+
+type SetupStep = {
+  title: string;
+  body: string;
+  commands?: string[];
+};
+
+const setupSteps: SetupStep[] = [
+  {
+    title: "1. Install prerequisites",
+    body: "Install Node.js 20+, Python 3.11+, and Docker Desktop. You also need a Clerk app and a Convex project.",
+  },
+  {
+    title: "2. Configure environment files",
+    body: "Copy env templates and set values. Keep worker token identical in web and worker env files.",
+    commands: [
+      "cp apps/web/.env.example apps/web/.env.local",
+      "cp apps/worker/.env.example apps/worker/.env",
+    ],
+  },
+  {
+    title: "3. Install dependencies",
+    body: "Install web and worker dependencies once before first run.",
+    commands: [
+      "cd apps/web && npm install",
+      "cd ../worker && python3 -m pip install -r requirements.txt",
+    ],
+  },
+  {
+    title: "4. Start the full local stack (recommended)",
+    body: "Run the helper script from repo root. It starts Convex, web, and worker together.",
+    commands: ["./scripts/dev.sh"],
+  },
+  {
+    title: "5. Manual start option (three terminals)",
+    body: "Use this if you prefer explicit control over each service.",
+    commands: [
+      "cd apps/web && npx convex dev",
+      "cd apps/web && npm run dev -- --webpack",
+      "cd apps/worker && set -a && . .env && set +a && python3 main.py",
+    ],
+  },
+  {
+    title: "6. Verify the stack",
+    body: "Open the app and run a simple tool to confirm queue and worker flow are healthy.",
+    commands: [
+      "Web app: http://localhost:3000",
+      "Convex dashboard: https://dashboard.convex.dev",
+    ],
+  },
+  {
+    title: "7. Optional Docker run",
+    body: "You can run web + worker in Docker with local env files.",
+    commands: ["docker compose up --build"],
+  },
+];
+
+export default function SelfHostPage() {
+  return (
+    <div className="relative">
+      <SiteHeader />
+      <main className="mx-auto w-full max-w-6xl px-4 pb-14 pt-5 sm:px-6">
+        <section className="paper-card p-8">
+          <span className="ink-label">Self-hosting Guide</span>
+          <h1 className="mt-2 text-3xl">Run ZenPDF locally, step by step.</h1>
+          <p className="mt-3 max-w-3xl text-sm text-ink-700">
+            This setup runs Convex, the Next.js web app, and the Python worker on your own machine.
+            Follow steps in order for the fastest path to a working local stack.
+          </p>
+
+          <div className="mt-6 space-y-4">
+            {setupSteps.map((step) => (
+              <section key={step.title} className="surface-muted p-4">
+                <h2 className="text-base font-semibold text-ink-900">{step.title}</h2>
+                <p className="mt-2 text-sm text-ink-700">{step.body}</p>
+                {step.commands ? (
+                  <pre className="mt-3 overflow-x-auto rounded-lg border border-paper-300 bg-paper-50 p-3 text-xs text-ink-900">
+                    <code>{step.commands.join("\n")}</code>
+                  </pre>
+                ) : null}
+              </section>
+            ))}
+          </div>
+
+          <div className="mt-6 flex flex-wrap gap-3">
+            <Link className="paper-button" href="/tools">
+              Open tools
+            </Link>
+            <Link className="paper-button--ghost" href="/usage-capacity">
+              Back to usage & capacity
+            </Link>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/sign-in/[[...sign-in]]/page.tsx b/apps/web/src/app/sign-in/[[...sign-in]]/page.tsx
index 65391b2..5e1d9f0 100644
--- a/apps/web/src/app/sign-in/[[...sign-in]]/page.tsx
+++ b/apps/web/src/app/sign-in/[[...sign-in]]/page.tsx
@@ -5,11 +5,13 @@ import { SignIn } from "@clerk/nextjs";
 export default function SignInPage() {
   return (
     <div className="relative z-10 flex min-h-screen items-center justify-center px-6 py-12">
-      <div className="paper-card w-full max-w-md p-6">
+      <div className="paper-card w-full max-w-md p-8">
         <SignIn
           appearance={{
             variables: {
-              colorPrimary: "#1f4338",
+              colorPrimary: "rgb(var(--forest-600))",
+              colorBackground: "rgb(var(--paper-50))",
+              colorText: "rgb(var(--ink-900))",
             },
           }}
         />
diff --git a/apps/web/src/app/sign-up/[[...sign-up]]/page.tsx b/apps/web/src/app/sign-up/[[...sign-up]]/page.tsx
index ded5951..d925e69 100644
--- a/apps/web/src/app/sign-up/[[...sign-up]]/page.tsx
+++ b/apps/web/src/app/sign-up/[[...sign-up]]/page.tsx
@@ -5,11 +5,13 @@ import { SignUp } from "@clerk/nextjs";
 export default function SignUpPage() {
   return (
     <div className="relative z-10 flex min-h-screen items-center justify-center px-6 py-12">
-      <div className="paper-card w-full max-w-md p-6">
+      <div className="paper-card w-full max-w-md p-8">
         <SignUp
           appearance={{
             variables: {
-              colorPrimary: "#1f4338",
+              colorPrimary: "rgb(var(--forest-600))",
+              colorBackground: "rgb(var(--paper-50))",
+              colorText: "rgb(var(--ink-900))",
             },
           }}
         />
diff --git a/apps/web/src/app/tools/page.tsx b/apps/web/src/app/tools/page.tsx
index 1688c14..48e5929 100644
--- a/apps/web/src/app/tools/page.tsx
+++ b/apps/web/src/app/tools/page.tsx
@@ -46,6 +46,9 @@ type ToolField = {
   helper?: string;
   type?: "text" | "number" | "password" | "textarea";
   required?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
 };
 
 type ToolDefinition = {
@@ -242,6 +245,9 @@ const TOOLS: ToolDefinition[] = [
         placeholder: "90",
         helper: "Use 90, 180, or 270.",
         type: "number",
+        min: 90,
+        max: 270,
+        step: 90,
       },
     ],
   },
@@ -421,6 +427,54 @@ const TOOLS: ToolDefinition[] = [
   },
 ];
 
+const TOOL_GROUPS: Array<{
+  id: string;
+  title: string;
+  description: string;
+  toolIds: ToolId[];
+}> = [
+  {
+    id: "organize",
+    title: "Organize & Prepare",
+    description: "Restructure pages before sharing or conversion.",
+    toolIds: ["merge", "split", "organize-pdf", "rotate", "crop", "page-numbers", "compress"],
+  },
+  {
+    id: "convert",
+    title: "Convert",
+    description: "Move between PDF, Office, image, and web formats.",
+    toolIds: [
+      "pdf-to-word",
+      "pdf-to-powerpoint",
+      "pdf-to-excel",
+      "word-to-pdf",
+      "powerpoint-to-pdf",
+      "excel-to-pdf",
+      "pdf-to-jpg",
+      "jpg-to-pdf",
+      "html-to-pdf",
+    ],
+  },
+  {
+    id: "edit",
+    title: "Edit & Annotate",
+    description: "Apply visual edits, signatures, and redactions.",
+    toolIds: ["edit-pdf", "sign-pdf", "watermark", "redact"],
+  },
+  {
+    id: "protect",
+    title: "Protect & Validate",
+    description: "Secure or fix files before final delivery.",
+    toolIds: ["unlock", "protect", "repair", "compare"],
+  },
+  {
+    id: "capture",
+    title: "Capture & Archive",
+    description: "Create searchable or archival-ready output.",
+    toolIds: ["scan-to-pdf", "ocr-pdf", "pdfa"],
+  },
+];
+
 type JobRecord = {
   _id: string;
   tool: string;
@@ -526,26 +580,31 @@ const JobCard = ({
       ? Math.floor((now - job.startedAt) / 1000)
       : 0;
   const remainingSeconds = Math.max(timeoutSeconds - elapsedSeconds, 0);
+  const statusTone =
+    job.status === "failed"
+      ? "status-pill status-pill--error"
+      : job.status === "done"
+        ? "status-pill status-pill--success"
+        : "status-pill";
 
   return (
     <div className="paper-card p-5">
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <div className="text-lg font-display text-ink-900">{job.tool}</div>
-          <div className="text-xs text-ink-500">
-            Status: {job.status}
-            {job.progress !== undefined && ` (${job.progress}%)`}
-            <span className="ml-2 text-[0.65rem]" title={new Date(job.createdAt).toISOString()}>
-              {formatJobTimestamp(job.createdAt)}
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <div className="text-base font-semibold text-ink-900">{job.tool}</div>
+            <span className={statusTone}>
+              {job.status}
+              {job.progress !== undefined && ` (${job.progress}%)`}
             </span>
-            {noChange && (
-              <span className="ml-2 rounded-full bg-ink-900/10 px-2 py-0.5 text-[0.6rem] uppercase tracking-[0.2em] text-ink-600">
-                No change
-              </span>
-            )}
+            {noChange && <span className="status-pill">No change</span>}
+          </div>
+          <div className="mt-1 text-xs text-ink-500" title={new Date(job.createdAt).toISOString()}>
+            {formatJobTimestamp(job.createdAt)}
           </div>
+
           {showCompressTimer && (
-            <div className="text-xs text-ink-500">
+            <div className="mt-1 text-xs text-ink-500">
               {job.status === "running" && job.startedAt
                 ? `Timeout in ${formatMinutesSeconds(remainingSeconds)}`
                 : `Timeout budget ${formatMinutesSeconds(timeoutSeconds)}`}
@@ -553,25 +612,19 @@ const JobCard = ({
             </div>
           )}
           {noChange && (
-            <div className="text-xs text-ink-500">
+            <div className="mt-1 text-xs text-ink-500">
               No meaningful size reduction possible (already optimized or image-heavy).
             </div>
           )}
           {job.errorCode && (
-            <div className="text-xs text-ink-500">
-              {job.errorCode} {job.errorMessage ? `— ${job.errorMessage}` : ""}
-            </div>
-          )}
-          {(job.status === "queued" || job.status === "running") && (
-            <div className="mt-2 flex items-center gap-2 text-xs text-ink-500">
-              <span className="h-2 w-2 animate-pulse rounded-full bg-forest-500" />
-              <span>{job.status === "queued" ? "Queued" : "Processing"}</span>
+            <div className="mt-1 text-xs text-red-700">
+              {job.errorCode} {job.errorMessage ? `- ${job.errorMessage}` : ""}
             </div>
           )}
           {(job.status === "queued" || job.status === "running") && (
-            <div className="mt-2 h-1 w-full rounded-full bg-ink-900/10">
+            <div className="mt-3 h-1.5 w-full rounded-full bg-paper-200">
               <div
-                className="h-full rounded-full bg-forest-500"
+                className="h-full rounded-full bg-forest-600"
                 style={{
                   width: `${Math.min(
                     Math.max(
@@ -585,14 +638,14 @@ const JobCard = ({
             </div>
           )}
         </div>
-        <div className="flex flex-col gap-2">
+        <div className="flex w-full flex-col gap-2 lg:w-auto lg:min-w-[250px]">
           {(job.outputs ?? []).map((output) => (
             <div
               key={output.storageId}
-              className="flex items-center justify-between gap-3"
+              className="surface-muted flex items-center justify-between gap-3 p-3"
             >
               <div className="min-w-0">
-                <div className="truncate text-xs text-ink-700">
+                <div className="truncate text-xs font-medium text-ink-700">
                   {output.filename}
                 </div>
                 {output.sizeBytes !== undefined && (
@@ -610,7 +663,7 @@ const JobCard = ({
               </div>
               <button
                 type="button"
-                className="paper-button--ghost text-[0.6rem] uppercase tracking-[0.2em]"
+                className="paper-button--ghost"
                 onClick={() =>
                   onDownload(job._id, output.storageId, output.filename)
                 }
@@ -707,7 +760,26 @@ export default function ToolsPage() {
       ] as ToolField[],
     };
   }, [activeTool, unlockNeedsPassword]);
+
+  const toolGroups = useMemo(
+    () =>
+      TOOL_GROUPS.map((group) => ({
+        ...group,
+        tools: group.toolIds
+          .map((toolId) => TOOLS.find((item) => item.id === toolId))
+          .filter((item): item is ToolDefinition => Boolean(item)),
+      })),
+    [],
+  );
+
+  const activeGroup = useMemo(
+    () => TOOL_GROUPS.find((group) => group.toolIds.includes(activeTool)),
+    [activeTool],
+  );
+
   const fileLabel = tool?.multiple ? "Choose files" : "Choose file";
+  const requiredFields = tool?.fields?.filter((field) => field.required) ?? [];
+  const optionalFields = tool?.fields?.filter((field) => !field.required) ?? [];
 
   const totalSize = useMemo(
     () => files.reduce((sum, file) => sum + file.size, 0),
@@ -874,75 +946,172 @@ export default function ToolsPage() {
     window.open(`/api/download?${params.toString()}`, "_blank", "noopener");
   }
 
+  const statusClassName =
+    status === null
+      ? ""
+      : status.startsWith("Unable") ||
+          status.startsWith("Enter") ||
+          status.startsWith("Upload exactly") ||
+          status.startsWith("Add at least")
+        ? "alert alert--error"
+        : status.startsWith("Job queued")
+          ? "alert alert--success"
+          : "alert";
+
+  const renderField = (field: ToolField) => (
+    <div key={field.key}>
+      <label className="field-label" htmlFor={field.key}>
+        {field.label}
+      </label>
+      {field.type === "textarea" ? (
+        <textarea
+          id={field.key}
+          value={configValues[field.key] ?? ""}
+          onChange={(event) => updateConfig(field.key, event.target.value)}
+          placeholder={field.placeholder}
+          rows={4}
+          className="field-input"
+        />
+      ) : (
+        <input
+          id={field.key}
+          type={field.type ?? "text"}
+          inputMode={field.type === "number" ? "numeric" : undefined}
+          min={field.min}
+          max={field.max}
+          step={field.step}
+          value={configValues[field.key] ?? ""}
+          onChange={(event) => updateConfig(field.key, event.target.value)}
+          placeholder={field.placeholder}
+          className="field-input"
+        />
+      )}
+      {field.helper && <p className="field-helper">{field.helper}</p>}
+    </div>
+  );
+
   return (
     <div className="relative">
       <SiteHeader />
-      <main className="relative z-10 mx-auto w-full max-w-6xl px-6 pb-16">
-        <section className="paper-card mt-4 p-8">
+      <main className="mx-auto w-full max-w-6xl px-4 pb-14 pt-5 sm:px-6">
+        <section className="paper-card p-8">
           <span className="ink-label">Tool desk</span>
-          <h1 className="mt-3 text-4xl">Run a tool in a calm, guided flow.</h1>
-          <p className="mt-3 max-w-2xl text-base text-ink-700">
+          <h1 className="mt-2 text-3xl">Run a tool in a clear, guided flow.</h1>
+          <p className="mt-3 max-w-2xl text-sm text-ink-700">
             Each tool runs in the background worker, with limits enforced before
-            processing begins. Upload, configure, and queue a job in seconds.
+            processing begins. Choose a tool, upload files, then queue a job.
           </p>
+          <div className="mt-5 grid gap-3 sm:grid-cols-3">
+            <div className="task-step">
+              <span className="task-step-index">1</span>
+              <p className="mt-2 text-sm font-semibold text-ink-900">Select a tool</p>
+              <p className="mt-1 text-xs text-ink-500">Grouped by intent so placement matches task flow.</p>
+            </div>
+            <div className="task-step">
+              <span className="task-step-index">2</span>
+              <p className="mt-2 text-sm font-semibold text-ink-900">Configure required fields</p>
+              <p className="mt-1 text-xs text-ink-500">Required inputs come first. Optional settings are collapsed.</p>
+            </div>
+            <div className="task-step">
+              <span className="task-step-index">3</span>
+              <p className="mt-2 text-sm font-semibold text-ink-900">Queue and monitor</p>
+              <p className="mt-1 text-xs text-ink-500">Progress, output files, and errors stay near the action area.</p>
+            </div>
+          </div>
         </section>
 
         <section className="mt-8 grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
-          <div className="space-y-4">
-            {TOOLS.map((item) => {
-              return (
-                <button
-                  key={item.id}
-                  type="button"
-                  onClick={() => selectTool(item.id)}
-                  aria-pressed={item.id === activeTool}
-                  className={`paper-card tool-card w-full p-4 text-left transition duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-forest-500/40 hover:shadow-paper-lift active:translate-y-0.5 active:shadow-paper ${
-                    item.id === activeTool
-                      ? "border-forest-600/60 ring-2 ring-forest-600/20"
-                      : "hover:border-forest-600/30 hover:ring-1 hover:ring-forest-600/10"
-                  }`}
-                >
-                  <div>
-                    <h2 className="text-lg font-display">{item.label}</h2>
-                    <p className="text-xs text-ink-500">{item.description}</p>
+          <aside className="paper-card p-4 sm:p-5">
+            <div className="mb-3 flex items-center justify-between">
+              <h2 className="text-lg font-semibold">Tools</h2>
+              <span className="status-pill">{TOOLS.length} available</span>
+            </div>
+            <p className="text-xs text-ink-500">
+              Grouped by workflow to make feature placement practical and predictable.
+            </p>
+            <div className="mt-3">
+              {toolGroups.map((group) => (
+                <section key={group.id} aria-label={group.title}>
+                  <div className="tool-group-label">{group.title}</div>
+                  <p className="mb-2 text-xs text-ink-500">{group.description}</p>
+                  <div className="space-y-2">
+                    {group.tools.map((item) => (
+                      <button
+                        key={item.id}
+                        type="button"
+                        onClick={() => selectTool(item.id)}
+                        aria-pressed={item.id === activeTool}
+                        className={`tool-card w-full rounded-xl border p-3 text-left transition focus-visible:outline-none ${
+                          item.id === activeTool
+                            ? "border-forest-600 bg-sage-200/45"
+                            : "border-paper-200 bg-paper-50 hover:border-forest-500/50"
+                        }`}
+                      >
+                        <h3 className="text-sm font-semibold text-ink-900">{item.label}</h3>
+                        <p className="mt-1 text-xs text-ink-500">{item.description}</p>
+                      </button>
+                    ))}
                   </div>
-                </button>
-              );
-            })}
-          </div>
+                </section>
+              ))}
+            </div>
+          </aside>
 
           <div className="paper-card p-6">
-            <div className="flex items-center justify-between">
+            <div className="flex flex-wrap items-start justify-between gap-3">
               <div>
                 <span className="ink-label">Active tool</span>
-                <h2 className="text-2xl">{tool?.label}</h2>
+                <h2 className="mt-1 text-2xl">{tool?.label}</h2>
+                {activeGroup && (
+                  <p className="mt-1 text-xs text-ink-500">
+                    Group: <span className="font-semibold text-ink-700">{activeGroup.title}</span>
+                  </p>
+                )}
               </div>
               <Link className="paper-button--ghost" href="/usage-capacity">
                 View limits
               </Link>
             </div>
-            <div className="mt-4 text-sm text-ink-700">{tool?.description}</div>
+            <p className="mt-3 text-sm text-ink-700">{tool?.description}</p>
+            <div className="mt-4 grid gap-2 sm:grid-cols-3">
+              <div className="surface-muted p-3">
+                <p className="ink-label">Input mode</p>
+                <p className="mt-1 text-sm font-semibold text-ink-900">
+                  {(tool?.requiresFiles ?? true) ? "File upload" : "URL input"}
+                </p>
+              </div>
+              <div className="surface-muted p-3">
+                <p className="ink-label">Files required</p>
+                <p className="mt-1 text-sm font-semibold text-ink-900">
+                  {(tool?.requiresFiles ?? true)
+                    ? tool?.multiple
+                      ? "One or more"
+                      : "Single file"
+                    : "No files"}
+                </p>
+              </div>
+              <div className="surface-muted p-3">
+                <p className="ink-label">Field scope</p>
+                <p className="mt-1 text-sm font-semibold text-ink-900">
+                  {requiredFields.length} required / {optionalFields.length} optional
+                </p>
+              </div>
+            </div>
 
             {devModeAvailable && (
-              <div className="mt-4 rounded-[18px] border border-ink-900/10 bg-paper-100 px-4 py-3 text-xs text-ink-600">
-                <div>
-                  <div className="font-semibold text-ink-700">Dev mode</div>
-                  <div className="text-ink-500">
-                    Local development bypass is always enabled (set
-                    `ZENPDF_DEV_MODE=0` to enforce limits locally).
-                  </div>
-                </div>
+              <div className="alert mt-4">
+                <strong className="font-semibold text-ink-700">Dev mode:</strong>{" "}
+                Local development bypass is enabled (set `ZENPDF_DEV_MODE=0` to enforce
+                limits locally).
               </div>
             )}
 
             <div className="mt-6 space-y-4">
               {(tool?.requiresFiles ?? true) && (
                 <div>
-                  <label className="text-xs uppercase tracking-[0.2em] text-ink-500">
-                    Files
-                  </label>
+                  <label className="field-label">Files</label>
                   <div className="mt-2 space-y-2">
-                    <label className="paper-button--ghost inline-flex cursor-pointer items-center gap-2 text-xs uppercase tracking-[0.2em]">
+                    <label className="paper-button--ghost inline-flex cursor-pointer items-center gap-2">
                       <input
                         key={fileInputKey}
                         type="file"
@@ -953,22 +1122,20 @@ export default function ToolsPage() {
                       />
                       {fileLabel}
                     </label>
-                    <div className="text-xs text-ink-500">
+                    <p className="field-helper">
                       {files.length > 0
-                        ? `${files.length} file(s) ready • ${formatBytes(totalSize)}`
+                        ? `${files.length} file(s) ready - ${formatBytes(totalSize)}`
                         : "No files selected yet."}
-                    </div>
+                    </p>
                     {files.length > 0 && (
-                      <div className="space-y-1 text-xs text-ink-600">
+                      <div className="surface-muted space-y-1 p-3 text-xs text-ink-700">
                         {files.map((file) => (
                           <div
                             key={`${file.name}-${file.size}-${file.lastModified}`}
                             className="flex items-center justify-between gap-3"
                           >
                             <span className="truncate">{file.name}</span>
-                            <span className="text-ink-500">
-                              {formatBytes(file.size)}
-                            </span>
+                            <span className="text-ink-500">{formatBytes(file.size)}</span>
                           </div>
                         ))}
                       </div>
@@ -977,7 +1144,7 @@ export default function ToolsPage() {
                       <button
                         type="button"
                         onClick={clearFiles}
-                        className="paper-button--ghost w-fit text-[0.65rem] uppercase tracking-[0.2em]"
+                        className="paper-button--ghost w-fit"
                       >
                         Clear files
                       </button>
@@ -986,41 +1153,26 @@ export default function ToolsPage() {
                 </div>
               )}
 
-              {tool?.fields?.map((field) => (
-                <div key={field.key}>
-                  <label className="text-xs uppercase tracking-[0.2em] text-ink-500">
-                    {field.label}
-                  </label>
-                  {field.type === "textarea" ? (
-                    <textarea
-                      value={configValues[field.key] ?? ""}
-                      onChange={(event) =>
-                        updateConfig(field.key, event.target.value)
-                      }
-                      placeholder={field.placeholder}
-                      rows={4}
-                      className="mt-2 w-full rounded-[18px] border border-ink-900/10 bg-paper-100 px-4 py-3 text-sm"
-                    />
-                  ) : (
-                    <input
-                      type={field.type ?? "text"}
-                      inputMode={field.type === "number" ? "numeric" : undefined}
-                      min={field.key === "angle" ? 90 : undefined}
-                      max={field.key === "angle" ? 270 : undefined}
-                      step={field.key === "angle" ? 90 : undefined}
-                      value={configValues[field.key] ?? ""}
-                      onChange={(event) =>
-                        updateConfig(field.key, event.target.value)
-                      }
-                      placeholder={field.placeholder}
-                      className="mt-2 w-full rounded-[18px] border border-ink-900/10 bg-paper-100 px-4 py-3 text-sm"
-                    />
-                  )}
-                  {field.helper && (
-                    <p className="mt-2 text-xs text-ink-500">{field.helper}</p>
-                  )}
+              {requiredFields.length > 0 && (
+                <div>
+                  <p className="field-label">Required settings</p>
+                  <div className="mt-3 space-y-4">{requiredFields.map(renderField)}</div>
                 </div>
-              ))}
+              )}
+              {requiredFields.length === 0 && (
+                <div className="surface-muted p-3 text-sm text-ink-600">
+                  No required settings for this tool.
+                </div>
+              )}
+
+              {optionalFields.length > 0 && (
+                <details className="surface-muted p-4">
+                  <summary className="cursor-pointer text-sm font-semibold text-ink-700">
+                    Advanced options
+                  </summary>
+                  <div className="mt-3 space-y-4">{optionalFields.map(renderField)}</div>
+                </details>
+              )}
             </div>
 
             <div className="mt-6 flex flex-wrap items-center gap-3">
@@ -1031,21 +1183,27 @@ export default function ToolsPage() {
                 disabled={isSubmitting}
               >
                 {isSubmitting && (
-                  <span className="h-4 w-4 animate-spin rounded-full border-2 border-paper-50/60 border-t-paper-50" />
+                  <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/60 border-t-white" />
                 )}
                 {isSubmitting ? "Working..." : "Queue job"}
               </button>
-              {status && <p className="text-sm text-ink-700">{status}</p>}
             </div>
+
+            {status && (
+              <p role="status" aria-live="polite" className={`${statusClassName} mt-3`}>
+                {status}
+              </p>
+            )}
+
             {activeJob && (activeJob.status === "queued" || activeJob.status === "running") && (
-              <div className="mt-4 rounded-[18px] border border-ink-900/10 bg-paper-100 px-4 py-3">
+              <div className="surface-muted mt-4 p-4">
                 <div className="flex items-center gap-2 text-xs text-ink-500">
                   <span className="h-2 w-2 animate-pulse rounded-full bg-forest-500" />
-                  <span className="uppercase tracking-[0.2em]">Processing</span>
+                  <span className="uppercase tracking-[0.14em]">Processing</span>
                 </div>
                 <div className="mt-2 text-sm text-ink-700">
                   {activeJob.status === "queued" ? "Queued" : "Running"}
-                  {activeJob.progress !== undefined && ` • ${activeJob.progress}%`}
+                  {activeJob.progress !== undefined && ` - ${activeJob.progress}%`}
                 </div>
                 {activeJob.tool === "compress" && (
                   <div className="mt-2 text-xs text-ink-500">
@@ -1064,12 +1222,12 @@ export default function ToolsPage() {
                             activeJob.inputs?.[0]?.sizeBytes,
                           ),
                         )}`}
-                    {" · Based on file size"}
+                    {" - Based on file size"}
                   </div>
                 )}
-                <div className="mt-2 h-2 w-full rounded-full bg-ink-900/10">
+                <div className="mt-2 h-2 w-full rounded-full bg-paper-200">
                   <div
-                    className="h-full rounded-full bg-forest-500"
+                    className="h-full rounded-full bg-forest-600"
                     style={{
                       width: `${Math.min(
                         Math.max(
@@ -1083,20 +1241,15 @@ export default function ToolsPage() {
                 </div>
               </div>
             )}
-            {lastJobId && (
-              <p className="mt-3 text-xs text-ink-500">
-                Latest job: {lastJobId}
-              </p>
-            )}
+
+            {lastJobId && <p className="mt-3 text-xs text-ink-500">Latest job: {lastJobId}</p>}
           </div>
         </section>
 
         <section className="mt-10">
-          <div className="flex items-center justify-between">
+          <div className="flex items-center justify-between gap-3">
             <h2 className="text-2xl">Recent jobs</h2>
-            <span className="text-xs uppercase tracking-[0.2em] text-ink-500">
-              Auto-refresh
-            </span>
+            <span className="status-pill">Auto-refresh</span>
           </div>
           <div className="mt-4 grid gap-4">
             {(jobs ?? []).length === 0 && (
diff --git a/apps/web/src/app/usage-capacity/page.tsx b/apps/web/src/app/usage-capacity/page.tsx
index 65b0aee..11f052a 100644
--- a/apps/web/src/app/usage-capacity/page.tsx
+++ b/apps/web/src/app/usage-capacity/page.tsx
@@ -15,28 +15,19 @@ import { DEFAULT_LIMITS, PlanLimits, PlanTier } from "@/lib/limits";
 
 const TIER_LABELS: Record<PlanTier, string> = {
   ANON: "ANON",
-  FREE_ACCOUNT: "FREE ACCOUNT",
-  PREMIUM: "PREMIUM",
+  FREE_ACCOUNT: "SIGNED IN",
 };
 
-const TIER_DETAILS: Record<
-  PlanTier,
-  { name: string; description: string; note: string }
-> = {
+const TIER_DETAILS: Record<PlanTier, { name: string; description: string; note: string }> = {
   ANON: {
     name: "Anon access",
     description: "No sign-in required. Jobs stay tied to this browser only.",
-    note: "Sign in to unlock FREE limits and saved history.",
+    note: "Sign in to unlock higher daily caps and saved job history.",
   },
   FREE_ACCOUNT: {
-    name: "Free account",
-    description: "Google sign-in with higher limits and saved job history.",
-    note: "Supporter mode increases daily limits and batch sizes.",
-  },
-  PREMIUM: {
-    name: "Premium supporter",
-    description: "Higher throughput profile for larger workloads.",
-    note: "Premium access still respects monthly budget health.",
+    name: "Signed-in access",
+    description: "Google sign-in with higher daily limits and saved job history.",
+    note: "All tools are free. Limits are only for shared fair-use.",
   },
 };
 
@@ -44,14 +35,17 @@ const capacityCopy = {
   available: {
     label: "Available",
     detail: "All tools are active and operating within the monthly budget.",
+    tone: "status-pill--success",
   },
   limited: {
     label: "Limited",
     detail: "Heavy tools are paused to keep ZenPDF within budget.",
+    tone: "status-pill--warning",
   },
   at_capacity: {
     label: "At Capacity",
     detail: "Monthly budget reached. New jobs will resume next cycle.",
+    tone: "status-pill--error",
   },
 };
 
@@ -82,10 +76,8 @@ const buildPlanBullets = (tier: PlanTier, limits: PlanLimits) => {
   ];
   if (tier === "ANON") {
     bullets.push("Local-only job history");
-  } else if (tier === "FREE_ACCOUNT") {
-    bullets.push("Saved job history");
   } else {
-    bullets.push("Highest daily throughput");
+    bullets.push("Saved job history");
   }
   return bullets;
 };
@@ -114,12 +106,10 @@ const UsageBar = ({
     <div className="paper-card p-5">
       <div className="flex items-start justify-between gap-4">
         <div>
-          <p className="text-sm font-display text-ink-900">{label}</p>
-          <p className="text-xs text-ink-500">{helper}</p>
+          <p className="text-sm font-semibold text-ink-900">{label}</p>
+          <p className="mt-1 text-xs text-ink-500">{helper}</p>
         </div>
-        <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink-500">
-          {statusLabel}
-        </span>
+        <span className="status-pill">{statusLabel}</span>
       </div>
       <div className="mt-3 h-2 rounded-full bg-paper-200">
         <div
@@ -136,13 +126,13 @@ const PlanCard = ({ tier, limits }: { tier: PlanTier; limits: PlanLimits }) => {
   const bullets = buildPlanBullets(tier, limits);
 
   return (
-    <div className="paper-card flex h-full flex-col gap-4 p-6">
-      <div>
+    <div className="paper-card flex h-full flex-col p-6">
+      <div className="min-h-[7.25rem]">
         <span className="ink-label">{TIER_LABELS[tier]}</span>
-        <h3 className="mt-2 text-xl font-display text-ink-900">{details.name}</h3>
-        <p className="mt-2 text-xs text-ink-500">{details.description}</p>
+        <h3 className="mt-2 text-lg font-semibold text-ink-900">{details.name}</h3>
+        <p className="mt-2 text-sm text-ink-500">{details.description}</p>
       </div>
-      <ul className="space-y-2 text-sm text-ink-700">
+      <ul className="mt-4 flex-1 space-y-2 text-sm text-ink-700">
         {bullets.map((bullet) => (
           <li key={bullet} className="flex items-center gap-2">
             <span className="h-1.5 w-1.5 rounded-full bg-forest-600" />
@@ -150,9 +140,7 @@ const PlanCard = ({ tier, limits }: { tier: PlanTier; limits: PlanLimits }) => {
           </li>
         ))}
       </ul>
-      <div className="mt-auto rounded-[18px] border border-ink-900/10 bg-paper-100 px-3 py-2 text-xs text-ink-600">
-        {details.note}
-      </div>
+      <div className="surface-muted mt-4 px-3 py-2 text-xs text-ink-600">{details.note}</div>
     </div>
   );
 };
@@ -167,7 +155,7 @@ export default function UsageCapacityPage() {
   const tier = snapshot?.tier ?? "ANON";
   const planLimits = snapshot?.planLimits ?? DEFAULT_LIMITS[tier];
   const plans = snapshot?.plans ?? DEFAULT_LIMITS;
-  const premiumLimits = plans.PREMIUM ?? DEFAULT_LIMITS.PREMIUM;
+  const signedInLimits = plans.FREE_ACCOUNT ?? DEFAULT_LIMITS.FREE_ACCOUNT;
   const budget = snapshot?.budget ?? {
     monthlyBudgetUsage: 0,
     heavyToolsEnabled: true,
@@ -179,9 +167,27 @@ export default function UsageCapacityPage() {
     minutesUsed: 0,
     bytesProcessed: 0,
   };
+  const globalLimits = snapshot?.globalLimits ?? {
+    maxConcurrentJobs: 0,
+    maxJobsPerDay: 0,
+    maxDailyMinutes: 0,
+    jobMaxAttempts: 0,
+    leaseDurationMs: 0,
+    artifactTtlHours: 24,
+  };
+  const globalUsage = snapshot?.globalUsage ?? {
+    periodStart: 0,
+    jobsUsed: 0,
+    minutesUsed: 0,
+    bytesProcessed: 0,
+  };
 
   const jobsUsed = Math.max(usage.jobsUsed, 0);
   const minutesUsed = Math.max(Math.round(usage.minutesUsed), 0);
+  const poolJobsUsed = Math.max(globalUsage.jobsUsed, 0);
+  const poolMinutesUsed = Math.max(Math.round(globalUsage.minutesUsed), 0);
+  const poolJobsRemaining = Math.max(globalLimits.maxJobsPerDay - poolJobsUsed, 0);
+  const poolMinutesRemaining = Math.max(globalLimits.maxDailyMinutes - poolMinutesUsed, 0);
   const budgetPercent = formatPercent(budget.monthlyBudgetUsage, 1);
   const capacityState = resolveCapacityState({
     monthlyBudgetUsage: budget.monthlyBudgetUsage,
@@ -193,33 +199,50 @@ export default function UsageCapacityPage() {
   return (
     <div className="relative">
       <SiteHeader />
-      <main className="relative z-10 mx-auto w-full max-w-6xl px-6 pb-16">
-        <section className="paper-card mt-4 p-8">
+      <main className="mx-auto w-full max-w-6xl px-4 pb-14 pt-5 sm:px-6">
+        <section className="paper-card p-8">
           <span className="ink-label">Usage & Capacity</span>
-          <h1 className="mt-3 text-4xl">Know every limit before you upload.</h1>
-          <p className="mt-3 max-w-2xl text-base text-ink-700">
-            ZenPDF keeps usage predictable by enforcing caps per plan and
-            monitoring global capacity. When the system nears its monthly
-            budget, heavy tools pause first.
+          <h1 className="mt-2 text-3xl">Know every limit before you upload.</h1>
+          <p className="mt-3 max-w-2xl text-sm text-ink-700">
+            ZenPDF is fully free for all tools. Limits exist only to keep shared
+            infrastructure stable and available for everyone.
           </p>
-          <div className="mt-6 flex flex-wrap gap-3">
-            <span className="rounded-full border border-forest-600/30 bg-sage-200 px-4 py-2 text-sm uppercase tracking-[0.2em] text-forest-700">
+          <div className="mt-4 grid gap-2 sm:grid-cols-3">
+            <div className="surface-muted p-3">
+              <p className="ink-label">Use this page when</p>
+              <p className="mt-1 text-sm text-ink-700">A job failed due to limits.</p>
+            </div>
+            <div className="surface-muted p-3">
+              <p className="ink-label">Use this page when</p>
+              <p className="mt-1 text-sm text-ink-700">You are planning larger file batches.</p>
+            </div>
+            <div className="surface-muted p-3">
+              <p className="ink-label">Use this page when</p>
+              <p className="mt-1 text-sm text-ink-700">You need current pool status before OCR/PDF-A.</p>
+            </div>
+          </div>
+
+          <div className="mt-5 flex flex-wrap items-center gap-2">
+            <span className={`status-pill ${capacityStatus.tone}`}>
               Status: {capacityStatus.label}
             </span>
-            <span className="rounded-full border border-ink-900/10 bg-paper-100 px-4 py-2 text-sm text-ink-700">
-              {capacityStatus.detail}
-            </span>
+            <span className="status-pill">{capacityStatus.detail}</span>
+            {!snapshot && <span className="status-pill">Loading latest snapshot...</span>}
           </div>
         </section>
 
         <section className="mt-8 grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
-          <div className="space-y-5">
-            <div className="flex flex-wrap items-center justify-between gap-3">
-              <h2 className="text-2xl">Your plan snapshot</h2>
-              <span className="rounded-full border border-ink-900/10 bg-paper-100 px-4 py-1 text-xs uppercase tracking-[0.2em] text-ink-600">
-                {TIER_LABELS[tier]}
-              </span>
+          <div className="space-y-6">
+            <div>
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <h2 className="text-2xl">Your daily usage</h2>
+                <span className="status-pill">{TIER_LABELS[tier]}</span>
+              </div>
+              <p className="mt-2 text-sm text-ink-700">
+                Metrics reset daily and are enforced before processing begins.
+              </p>
             </div>
+
             <div className="grid gap-4 md:grid-cols-2">
               <UsageBar
                 label="Jobs today"
@@ -233,28 +256,22 @@ export default function UsageCapacityPage() {
                 limit={planLimits.maxDailyMinutes}
                 helper={`${minutesUsed} of ${planLimits.maxDailyMinutes} minutes used`}
               />
-              <UsageBar
-                label="Monthly budget usage"
-                value={budget.monthlyBudgetUsage}
-                limit={1}
-                helper={`${budgetPercent} of the monthly budget used`}
-              />
               <UsageBar
                 label="Max file size"
                 value={planLimits.maxMbPerFile}
-                limit={premiumLimits.maxMbPerFile}
+                limit={signedInLimits.maxMbPerFile}
                 helper={`${formatBytes(planLimits.maxMbPerFile * 1024 * 1024)} per file`}
               />
               <UsageBar
                 label="Max files per job"
                 value={planLimits.maxFilesPerJob}
-                limit={premiumLimits.maxFilesPerJob}
+                limit={signedInLimits.maxFilesPerJob}
                 helper={`${planLimits.maxFilesPerJob} files per job`}
               />
               <UsageBar
                 label="Concurrent jobs"
                 value={planLimits.maxConcurrentJobs}
-                limit={premiumLimits.maxConcurrentJobs}
+                limit={signedInLimits.maxConcurrentJobs}
                 helper={`${planLimits.maxConcurrentJobs} jobs at once`}
               />
               <UsageBar
@@ -269,52 +286,80 @@ export default function UsageCapacityPage() {
                 }
               />
             </div>
-          </div>
-          <div className="paper-card flex flex-col gap-4 p-6">
-            <span className="ink-label">Your access</span>
+
             <div>
-              <h3 className="text-2xl font-display text-ink-900">
-                {tierDetails.name}
-              </h3>
+              <h2 className="text-2xl">Shared daily pool</h2>
               <p className="mt-2 text-sm text-ink-700">
-                {tierDetails.description}
+                This pool is shared across all users and is enforced server-side.
               </p>
+              <div className="mt-4 grid gap-4 md:grid-cols-2">
+                <UsageBar
+                  label="Pool jobs used"
+                  value={poolJobsUsed}
+                  limit={globalLimits.maxJobsPerDay}
+                  helper={`${poolJobsUsed} of ${globalLimits.maxJobsPerDay} used · ${poolJobsRemaining} remaining`}
+                />
+                <UsageBar
+                  label="Pool minutes used"
+                  value={poolMinutesUsed}
+                  limit={globalLimits.maxDailyMinutes}
+                  helper={`${poolMinutesUsed} of ${globalLimits.maxDailyMinutes} used · ${poolMinutesRemaining} remaining`}
+                />
+                <UsageBar
+                  label="Pool concurrency cap"
+                  value={globalLimits.maxConcurrentJobs}
+                  limit={globalLimits.maxConcurrentJobs}
+                  helper={`${globalLimits.maxConcurrentJobs} jobs can run concurrently`}
+                />
+                <UsageBar
+                  label="Monthly budget usage"
+                  value={budget.monthlyBudgetUsage}
+                  limit={1}
+                  helper={`${budgetPercent} of the monthly budget used`}
+                />
+              </div>
             </div>
-            <div className="rounded-[20px] border border-ink-900/10 bg-paper-100 p-4 text-sm text-ink-700">
-              {tierDetails.note}
+          </div>
+
+          <aside className="paper-card flex flex-col gap-4 p-6">
+            <span className="ink-label">Your access</span>
+            <div>
+              <h3 className="text-xl font-semibold text-ink-900">{tierDetails.name}</h3>
+              <p className="mt-2 text-sm text-ink-700">{tierDetails.description}</p>
             </div>
+            <div className="surface-muted p-4 text-sm text-ink-700">{tierDetails.note}</div>
+
             <SignedOut>
               <SignInButton mode="modal">
                 <button className="paper-button" type="button">
-                  Sign in to unlock free limits
+                  Sign in to unlock higher limits
                 </button>
               </SignInButton>
             </SignedOut>
+
             <SignedIn>
-              <div className="rounded-[20px] border border-forest-600/30 bg-sage-200/70 p-4 text-sm text-forest-700">
-                {tier === "PREMIUM"
-                  ? "Supporter mode is enabled per account and may pause when capacity is limited."
-                  : "Supporter mode is available for Premium accounts and may pause when capacity is limited."}
+              <div className="alert alert--success">
+                Signed-in limits are active. You still share the same global pool with all users.
               </div>
             </SignedIn>
-            <div className="mt-auto rounded-[20px] border border-ink-900/10 bg-paper-100 p-4 text-sm text-ink-700">
-              Run ZenPDF locally for unlimited usage and full control.
-            </div>
+
+            <Link className="paper-button--ghost" href="/self-host">
+              Run ZenPDF locally
+            </Link>
             <Link className="paper-button" href="/tools">
               Return to tools
             </Link>
-          </div>
+          </aside>
         </section>
 
         <section className="mt-10">
-          <span className="ink-label">Plan tiers</span>
-          <h2 className="mt-2 text-2xl">Choose the right tier for the workload.</h2>
+          <span className="ink-label">Access tiers</span>
+          <h2 className="mt-2 text-2xl">Transparent limits for fair use.</h2>
           <p className="mt-2 max-w-2xl text-sm text-ink-700">
-            Limits reset daily and are enforced server-side. Upgrade tiers when you
-            need larger batches, saved history, or OCR-heavy jobs.
+            Limits reset daily and are enforced server-side for every tool.
           </p>
-          <div className="mt-6 grid gap-4 md:grid-cols-3">
-            {(["ANON", "FREE_ACCOUNT", "PREMIUM"] as PlanTier[]).map((plan) => (
+          <div className="mt-6 grid gap-4 md:grid-cols-2">
+            {(["ANON", "FREE_ACCOUNT"] as PlanTier[]).map((plan) => (
               <PlanCard key={plan} tier={plan} limits={plans[plan]} />
             ))}
           </div>
@@ -323,18 +368,20 @@ export default function UsageCapacityPage() {
         <section className="mt-10">
           <h2 className="text-2xl">Friendly error catalog</h2>
           <p className="mt-2 text-sm text-ink-700">
-            When a limit is hit, ZenPDF responds with a stable code and a
-            plain-language message.
+            When a limit is hit, ZenPDF responds with a stable code and a plain-language message.
           </p>
-          <div className="mt-6 grid gap-4 md:grid-cols-2">
+          <div className="mt-6 grid gap-3 md:grid-cols-2">
             {errorCatalog.map((error) => (
-              <div key={error.code} className="paper-card p-5">
-                <div className="text-xs uppercase tracking-[0.2em] text-ink-500">
-                  {error.code}
-                </div>
-                <p className="mt-2 text-sm text-ink-900">{error.message}</p>
-                <p className="mt-2 text-xs text-ink-500">{error.next}</p>
-              </div>
+              <details key={error.code} className="paper-card group p-4">
+                <summary className="cursor-pointer list-none">
+                  <div className="text-[0.7rem] font-semibold uppercase tracking-[0.14em] text-ink-500">
+                    {error.code}
+                  </div>
+                  <p className="mt-2 text-sm text-ink-900">{error.message}</p>
+                  <p className="mt-2 text-xs text-ink-500 group-open:hidden">Click to view guidance</p>
+                </summary>
+                <p className="mt-2 text-xs text-ink-600">{error.next}</p>
+              </details>
             ))}
           </div>
         </section>
diff --git a/apps/web/src/components/DonateBookmark.tsx b/apps/web/src/components/DonateBookmark.tsx
new file mode 100644
index 0000000..69e1416
--- /dev/null
+++ b/apps/web/src/components/DonateBookmark.tsx
@@ -0,0 +1,399 @@
+"use client";
+
+/* eslint-disable @next/next/no-img-element */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { useThemeMode } from "@/components/ThemeModeProvider";
+
+export default function DonateBookmark() {
+  const [open, setOpen] = useState(false);
+  const [showQr, setShowQr] = useState(true);
+  const [showCardCheckout, setShowCardCheckout] = useState(false);
+  const [activePaymentAction, setActivePaymentAction] = useState<"qr" | "upi" | "card">("qr");
+  const [generatedQrUrl, setGeneratedQrUrl] = useState("");
+  const [isGeneratingQr, setIsGeneratingQr] = useState(false);
+  const [qrGenerationError, setQrGenerationError] = useState("");
+  const { theme } = useThemeMode();
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const modalRef = useRef<HTMLDivElement | null>(null);
+  const lastFocusedElementRef = useRef<HTMLElement | null>(null);
+
+  const defaultUpiName = "ZenPDF Creator";
+  const defaultUpiId = "";
+  // const defaultLightIcon = "/icons/chai-fab-light.png";
+  // const defaultDarkIcon = "/icons/chai-fab-dark.png";
+  const defaultLightIcon = "/icons/chai.png";
+  const defaultDarkIcon = "/icons/chai.png";
+
+  const upiId = (process.env.NEXT_PUBLIC_DONATE_UPI_ID ?? defaultUpiId).trim();
+  const upiName = (
+    process.env.NEXT_PUBLIC_DONATE_PAYEE_NAME ??
+    process.env.NEXT_PUBLIC_DONATE_UPI_NAME ??
+    defaultUpiName
+  ).trim();
+  const upiNote = (process.env.NEXT_PUBLIC_DONATE_UPI_NOTE ?? "Support ZenPDF").trim();
+  const qrUrl = (process.env.NEXT_PUBLIC_DONATE_UPI_QR_URL ?? "").trim();
+  const cardEmbedUrl = (process.env.NEXT_PUBLIC_DONATE_CARD_EMBED_URL ?? "").trim();
+  const lightIcon = (process.env.NEXT_PUBLIC_DONATE_ICON_LIGHT ?? defaultLightIcon).trim();
+  const darkIcon = (process.env.NEXT_PUBLIC_DONATE_ICON_DARK ?? defaultDarkIcon).trim();
+
+  const upiUri = useMemo(() => {
+    if (!upiId) {
+      return "";
+    }
+    const params = new URLSearchParams({
+      pa: upiId,
+      pn: upiName,
+      tn: upiNote,
+      cu: "INR",
+    });
+    return `upi://pay?${params.toString()}`;
+  }, [upiId, upiName, upiNote]);
+
+  const iconUrl = useMemo(() => {
+    if (theme === "dark") {
+      return darkIcon || lightIcon;
+    }
+    return lightIcon || darkIcon;
+  }, [darkIcon, lightIcon, theme]);
+
+  const resolvedQrUrl = qrUrl || generatedQrUrl;
+
+  const resolvedCardEmbedUrl = useMemo(() => {
+    if (!cardEmbedUrl) {
+      return "";
+    }
+
+    if (cardEmbedUrl.startsWith("/")) {
+      return cardEmbedUrl;
+    }
+
+    try {
+      const parsed = new URL(cardEmbedUrl);
+      const isLocalHttp = parsed.protocol === "http:" && parsed.hostname === "localhost";
+      if (parsed.protocol !== "https:" && !isLocalHttp) {
+        return "";
+      }
+      return parsed.toString();
+    } catch {
+      return "";
+    }
+  }, [cardEmbedUrl]);
+
+  const hasExternalQrUrl = Boolean(qrUrl);
+  const canShowQr = Boolean(qrUrl || upiUri);
+
+  useEffect(() => {
+    setGeneratedQrUrl("");
+    setQrGenerationError("");
+    setIsGeneratingQr(false);
+  }, [qrUrl, upiUri]);
+
+  useEffect(() => {
+    if (!open || !showQr || hasExternalQrUrl || !upiUri || generatedQrUrl || isGeneratingQr) {
+      return;
+    }
+
+    let cancelled = false;
+    setIsGeneratingQr(true);
+    setQrGenerationError("");
+
+    void import("qrcode")
+      .then((qrModule) =>
+        qrModule.toDataURL(upiUri, {
+          width: 360,
+          margin: 1,
+          errorCorrectionLevel: "M",
+        }),
+      )
+      .then((dataUrl) => {
+        if (!cancelled) {
+          setGeneratedQrUrl(dataUrl);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setQrGenerationError("Could not generate a QR code right now.");
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setIsGeneratingQr(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [generatedQrUrl, hasExternalQrUrl, isGeneratingQr, open, showQr, upiUri]);
+
+  const handleOpen = useCallback(() => {
+    if (typeof document !== "undefined" && document.activeElement instanceof HTMLElement) {
+      lastFocusedElementRef.current = document.activeElement;
+    }
+    setShowQr(true);
+    setShowCardCheckout(false);
+    setActivePaymentAction("qr");
+    setOpen(true);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setShowQr(true);
+    setShowCardCheckout(false);
+    setActivePaymentAction("qr");
+    setOpen(false);
+  }, []);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const modalElement = modalRef.current;
+    const triggerElement = triggerRef.current;
+    if (!modalElement) {
+      return;
+    }
+
+    const focusableSelector = [
+      "a[href]",
+      "button:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])',
+    ].join(",");
+
+    const frameId = window.requestAnimationFrame(() => {
+      const focusableElements = modalElement.querySelectorAll<HTMLElement>(focusableSelector);
+      focusableElements[0]?.focus();
+    });
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        handleClose();
+        return;
+      }
+
+      if (event.key !== "Tab") {
+        return;
+      }
+
+      const focusableElements = Array.from(
+        modalElement.querySelectorAll<HTMLElement>(focusableSelector),
+      ).filter((element) => !element.hasAttribute("disabled"));
+
+      if (focusableElements.length === 0) {
+        event.preventDefault();
+        modalElement.focus();
+        return;
+      }
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      const activeElement = document.activeElement as HTMLElement | null;
+
+      if (event.shiftKey && (activeElement === firstElement || !modalElement.contains(activeElement))) {
+        event.preventDefault();
+        lastElement.focus();
+        return;
+      }
+
+      if (!event.shiftKey && activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+      document.removeEventListener("keydown", handleKeyDown);
+
+      const restoreTarget = lastFocusedElementRef.current ?? triggerElement;
+      restoreTarget?.focus();
+      lastFocusedElementRef.current = null;
+    };
+  }, [handleClose, open]);
+
+  const handleToggle = () => {
+    if (open) {
+      handleClose();
+      return;
+    }
+    handleOpen();
+  };
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={`donate-fab ${iconUrl ? "donate-fab--with-image" : ""}`}
+        onClick={handleToggle}
+        aria-label="Support ZenPDF"
+        aria-expanded={open}
+      >
+        <span className="donate-fab-hint" aria-hidden="true">
+          Wanna support me?
+        </span>
+        {iconUrl ? (
+          <img
+            src={iconUrl}
+            alt=""
+            className="donate-fab-icon-image"
+            aria-hidden="true"
+          />
+        ) : (
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M5.5 11.5h9.5v3.6a3.2 3.2 0 0 1-3.2 3.2H8.8a3.3 3.3 0 0 1-3.3-3.3v-3.5Z" />
+            <path d="M15 12.5h1.7a1.8 1.8 0 0 1 0 3.6H15" />
+            <path d="M4.6 19h11.8" />
+          </svg>
+        )}
+      </button>
+
+      {open && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-ink-900/45 backdrop-blur-sm px-4 py-6 sm:py-8"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="support-title"
+          onClick={(event) => {
+            if (event.target === event.currentTarget) {
+              handleClose();
+            }
+          }}
+        >
+          <div
+            ref={modalRef}
+            tabIndex={-1}
+            className="paper-card relative w-full max-w-md p-6 text-center"
+          >
+            <button
+              type="button"
+              className="paper-button--ghost donate-close-button absolute right-6 top-6 w-auto px-4 py-2"
+              onClick={handleClose}
+            >
+              Close
+            </button>
+
+            <div className="mx-auto max-w-[30rem]">
+              <span className="ink-label block">Support ZenPDF</span>
+              <h2 id="support-title" className="mt-2 text-2xl">
+                Buy me a chai
+              </h2>
+              <p className="mt-2 text-sm text-ink-700">
+                <span className="block">ZenPDF is free and open source.</span>
+                <span className="mt-0.5 block">
+                  Support goes directly to the creator with no fees to OnlyChai.
+                </span>
+              </p>
+            </div>
+
+            <div className="surface-muted mt-4 p-4 text-center">
+              <div className="ink-label">UPI ID</div>
+              <div className="mt-1 break-all text-sm text-ink-900">
+                {upiId || "Set NEXT_PUBLIC_DONATE_UPI_ID"}
+              </div>
+            </div>
+
+            {showQr && (resolvedQrUrl || isGeneratingQr || qrGenerationError) && (
+              <div className="surface-muted mt-4 p-3 text-center">
+                {resolvedQrUrl ? (
+                  <img
+                    src={resolvedQrUrl}
+                    alt="UPI QR code"
+                    width={260}
+                    height={260}
+                    className="mx-auto h-56 w-56 rounded-md object-contain"
+                  />
+                ) : null}
+                {isGeneratingQr ? (
+                  <p className="mx-auto my-4 w-fit rounded-md bg-paper-50 px-3 py-2 text-sm text-ink-700">
+                    Generating QR code...
+                  </p>
+                ) : null}
+                {qrGenerationError ? <p className="text-sm text-ink-700">{qrGenerationError}</p> : null}
+              </div>
+            )}
+
+            <div className="mt-4 flex flex-wrap justify-center gap-2">
+              <button
+                type="button"
+                className={activePaymentAction === "qr" ? "paper-button" : "paper-button--ghost"}
+                aria-pressed={activePaymentAction === "qr"}
+                onClick={() => {
+                  setActivePaymentAction("qr");
+                  setShowCardCheckout(false);
+                  setShowQr(true);
+                }}
+                disabled={!canShowQr}
+              >
+                Show UPI QR
+              </button>
+              <button
+                type="button"
+                className={activePaymentAction === "upi" ? "paper-button" : "paper-button--ghost"}
+                onClick={() => {
+                  setActivePaymentAction("upi");
+                  setShowCardCheckout(false);
+                  if (upiUri && typeof window !== "undefined") {
+                    window.location.href = upiUri;
+                  }
+                }}
+                aria-pressed={activePaymentAction === "upi"}
+                disabled={!upiUri}
+              >
+                Open UPI App
+              </button>
+              <button
+                type="button"
+                className={activePaymentAction === "card" ? "paper-button" : "paper-button--ghost"}
+                aria-pressed={activePaymentAction === "card"}
+                onClick={() => {
+                  setActivePaymentAction("card");
+                  setShowQr(false);
+                  setShowCardCheckout(true);
+                }}
+              >
+                Pay by card
+              </button>
+            </div>
+            <p className="mt-2 text-xs text-ink-500">
+              {hasExternalQrUrl
+                ? "QR is loaded from your configured image URL."
+                : "QR is generated locally on your device."}
+            </p>
+
+            {showCardCheckout && (
+              <div className="surface-muted mt-4 p-3 text-center">
+                {resolvedCardEmbedUrl ? (
+                  <iframe
+                    src={resolvedCardEmbedUrl}
+                    title="Donate with card"
+                    className="donate-card-frame"
+                    loading="lazy"
+                    allow="clipboard-write"
+                  />
+                ) : (
+                  <p className="text-sm text-ink-700">Card checkout is unavailable right now.</p>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/apps/web/src/components/SiteHeader.tsx b/apps/web/src/components/SiteHeader.tsx
index 74979c4..5c621a8 100644
--- a/apps/web/src/components/SiteHeader.tsx
+++ b/apps/web/src/components/SiteHeader.tsx
@@ -1,36 +1,42 @@
 "use client";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { SignInButton, SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
-import { useQuery } from "convex/react";
 
-import { api } from "@/lib/convex";
+import ThemeToggle from "@/components/ThemeToggle";
 
 export default function SiteHeader() {
-  const viewer = useQuery(api.users.getViewer, {});
-  const showSupporter = viewer ? !viewer.adsFree : false;
+  const pathname = usePathname();
+  const isTools = pathname?.startsWith("/tools") ?? false;
+  const isUsage = pathname?.startsWith("/usage-capacity") ?? false;
 
   return (
-    <header className="relative z-20">
-      <div className="wood-nav mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-4">
+    <header className="sticky top-0 z-30 px-4 pt-4 sm:px-6">
+      <div className="wood-nav mx-auto flex w-full max-w-6xl flex-wrap items-center justify-between gap-3 px-4 py-3 sm:px-6">
         <Link href="/" className="flex items-center gap-3">
-          <div className="flex h-11 w-11 items-center justify-center rounded-[18px] border border-ink-900/15 bg-paper-100 text-lg font-display text-ink-900 shadow-paper">
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-paper-300 bg-paper-100 text-sm font-display font-bold text-forest-700">
             Z
           </div>
           <div>
-            <div className="text-lg font-display text-ink-900">ZenPDF</div>
-            <div className="text-[0.6rem] uppercase tracking-[0.32em] text-ink-500">
-              Dossier Toolkit
+            <div className="text-base font-display font-semibold text-ink-900">ZenPDF</div>
+            <div className="text-[0.65rem] uppercase tracking-[0.16em] text-ink-500">
+              Open PDF Workbench
             </div>
           </div>
         </Link>
-        <div className="flex items-center gap-3 text-sm">
-          <Link className="paper-button--ghost" href="/tools">
+
+        <nav className="flex flex-wrap items-center gap-2 text-sm" aria-label="Primary">
+          <Link className={`nav-link ${isTools ? "nav-link--active" : ""}`} href="/tools">
             Tools
           </Link>
-          <Link className="paper-button--ghost" href="/usage-capacity">
+          <Link
+            className={`nav-link ${isUsage ? "nav-link--active" : ""}`}
+            href="/usage-capacity"
+          >
             Usage & Capacity
           </Link>
+          <ThemeToggle />
           <SignedOut>
             <SignInButton mode="modal">
               <button className="paper-button" type="button">
@@ -41,24 +47,8 @@ export default function SiteHeader() {
           <SignedIn>
             <UserButton afterSignOutUrl="/" />
           </SignedIn>
-        </div>
+        </nav>
       </div>
-      {showSupporter && (
-        <div className="mx-auto w-full max-w-6xl px-6 pb-4">
-          <div className="flex flex-wrap items-center justify-between gap-4 rounded-[20px] border border-forest-600/30 bg-sage-200/70 px-5 py-4 text-forest-700">
-            <div>
-              <span className="ink-label">Supporter mode</span>
-              <p className="mt-1 max-w-2xl text-sm">
-                Unlock larger batches and remove this banner when supporter
-                mode is enabled.
-              </p>
-            </div>
-            <Link className="paper-button--ghost text-xs" href="/usage-capacity">
-              Review premium limits
-            </Link>
-          </div>
-        </div>
-      )}
     </header>
   );
 }
diff --git a/apps/web/src/components/ThemeModeProvider.tsx b/apps/web/src/components/ThemeModeProvider.tsx
new file mode 100644
index 0000000..4585162
--- /dev/null
+++ b/apps/web/src/components/ThemeModeProvider.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+
+type ThemeMode = "light" | "dark";
+
+type ThemeModeContextValue = {
+  theme: ThemeMode;
+  setTheme: (theme: ThemeMode) => void;
+  toggleTheme: () => void;
+};
+
+const STORAGE_KEY = "zenpdf-theme";
+
+const ThemeModeContext = createContext<ThemeModeContextValue | null>(null);
+
+const getInitialTheme = (): ThemeMode => {
+  if (typeof window === "undefined") {
+    return "light";
+  }
+
+  const storedTheme = window.localStorage.getItem(STORAGE_KEY);
+  if (storedTheme === "dark" || storedTheme === "light") {
+    return storedTheme;
+  }
+
+  return document.documentElement.dataset.theme === "dark" ? "dark" : "light";
+};
+
+const applyTheme = (theme: ThemeMode) => {
+  if (typeof document !== "undefined") {
+    document.documentElement.dataset.theme = theme;
+  }
+  if (typeof window !== "undefined") {
+    window.localStorage.setItem(STORAGE_KEY, theme);
+  }
+};
+
+export function ThemeModeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setThemeState] = useState<ThemeMode>(getInitialTheme);
+
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+
+  const value = useMemo<ThemeModeContextValue>(
+    () => ({
+      theme,
+      setTheme: (nextTheme) => setThemeState(nextTheme),
+      toggleTheme: () =>
+        setThemeState((current) => (current === "light" ? "dark" : "light")),
+    }),
+    [theme],
+  );
+
+  return (
+    <ThemeModeContext.Provider value={value}>
+      {children}
+    </ThemeModeContext.Provider>
+  );
+}
+
+export function useThemeMode() {
+  const context = useContext(ThemeModeContext);
+  if (!context) {
+    throw new Error("useThemeMode must be used within ThemeModeProvider");
+  }
+  return context;
+}
diff --git a/apps/web/src/components/ThemeToggle.tsx b/apps/web/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..ab00ccf
--- /dev/null
+++ b/apps/web/src/components/ThemeToggle.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { useThemeMode } from "@/components/ThemeModeProvider";
+
+export default function ThemeToggle() {
+  const { theme, toggleTheme } = useThemeMode();
+  const nextLabel = theme === "dark" ? "Switch to light mode" : "Switch to dark mode";
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      className="paper-button--ghost theme-toggle"
+      aria-label={nextLabel}
+      title={nextLabel}
+      aria-pressed={theme === "dark"}
+    >
+      <span className="sr-only">{nextLabel}</span>
+      {theme === "dark" ? (
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="12" cy="12" r="4.5" />
+          <path d="M12 2.5v2.2" />
+          <path d="M12 19.3v2.2" />
+          <path d="m4.9 4.9 1.6 1.6" />
+          <path d="m17.5 17.5 1.6 1.6" />
+          <path d="M2.5 12h2.2" />
+          <path d="M19.3 12h2.2" />
+          <path d="m4.9 19.1 1.6-1.6" />
+          <path d="m17.5 6.5 1.6-1.6" />
+        </svg>
+      ) : (
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M21 14.5A8.5 8.5 0 1 1 9.5 3 6.6 6.6 0 0 0 21 14.5Z" />
+        </svg>
+      )}
+    </button>
+  );
+}
diff --git a/apps/web/src/lib/convex.ts b/apps/web/src/lib/convex.ts
index eb2b7a1..5fbef2e 100644
--- a/apps/web/src/lib/convex.ts
+++ b/apps/web/src/lib/convex.ts
@@ -1,7 +1,7 @@
 import { makeFunctionReference } from "convex/server";
 
 import type { BudgetSnapshot } from "../../convex/lib/budget";
-import type { PlanLimits, PlanTier } from "./limits";
+import type { GlobalLimits, PlanLimits, PlanTier } from "./limits";
 
 type JobInput = { storageId: string; filename: string; sizeBytes?: number };
 
@@ -16,13 +16,14 @@ type UsageSnapshot = {
   tier: PlanTier;
   planLimits: PlanLimits;
   plans: Record<PlanTier, PlanLimits>;
+  globalLimits: GlobalLimits;
   usage: UsageCounter;
+  globalUsage: UsageCounter;
   budget: BudgetSnapshot;
 };
 
 type ViewerSnapshot = {
   tier: PlanTier;
-  adsFree: boolean;
   signedIn: boolean;
 };
 
diff --git a/apps/web/src/lib/limits.ts b/apps/web/src/lib/limits.ts
index ab938a0..59e4361 100644
--- a/apps/web/src/lib/limits.ts
+++ b/apps/web/src/lib/limits.ts
@@ -1,4 +1,4 @@
-export type PlanTier = "ANON" | "FREE_ACCOUNT" | "PREMIUM";
+export type PlanTier = "ANON" | "FREE_ACCOUNT";
 
 export type PlanLimits = {
   maxFilesPerJob: number;
@@ -8,26 +8,28 @@ export type PlanLimits = {
   maxDailyMinutes: number;
 };
 
+export type GlobalLimits = {
+  maxConcurrentJobs: number;
+  maxJobsPerDay: number;
+  maxDailyMinutes: number;
+  jobMaxAttempts: number;
+  leaseDurationMs: number;
+  artifactTtlHours: number;
+};
+
 export const DEFAULT_LIMITS: Record<PlanTier, PlanLimits> = {
   ANON: {
     maxFilesPerJob: 1,
-    maxMbPerFile: 10,
+    maxMbPerFile: 25,
     maxConcurrentJobs: 1,
-    maxJobsPerDay: 3,
+    maxJobsPerDay: 5,
     maxDailyMinutes: 10,
   },
   FREE_ACCOUNT: {
     maxFilesPerJob: 3,
-    maxMbPerFile: 50,
+    maxMbPerFile: 75,
     maxConcurrentJobs: 2,
-    maxJobsPerDay: 25,
+    maxJobsPerDay: 30,
     maxDailyMinutes: 60,
   },
-  PREMIUM: {
-    maxFilesPerJob: 10,
-    maxMbPerFile: 250,
-    maxConcurrentJobs: 4,
-    maxJobsPerDay: 200,
-    maxDailyMinutes: 240,
-  },
 };
diff --git a/apps/web/src/middleware.ts b/apps/web/src/proxy.ts
similarity index 57%
rename from apps/web/src/middleware.ts
rename to apps/web/src/proxy.ts
index 1c52196..b94de7a 100644
--- a/apps/web/src/middleware.ts
+++ b/apps/web/src/proxy.ts
@@ -19,16 +19,30 @@ const clerkHandler = clerkMiddleware(async (auth, req) => {
   }
 });
 
-export function middleware(request: Request, event: NextFetchEvent) {
-  if (shouldBypassAuth()) {
-    return NextResponse.next();
-  }
+export function proxy(request: Request, event: NextFetchEvent) {
   const nextRequest =
     request instanceof NextRequest ? request : new NextRequest(request);
-  return clerkHandler(nextRequest, event);
+
+  if (shouldBypassAuth()) {
+    const requestHeaders = new Headers(nextRequest.headers);
+    requestHeaders.set("x-zenpdf-auth-bypassed", "1");
+    return NextResponse.next({
+      request: {
+        headers: requestHeaders,
+      },
+    });
+  }
+
+  const sanitizedHeaders = new Headers(nextRequest.headers);
+  sanitizedHeaders.delete("x-zenpdf-auth-bypassed");
+  const sanitizedRequest = new NextRequest(nextRequest, {
+    headers: sanitizedHeaders,
+  });
+
+  return clerkHandler(sanitizedRequest, event);
 }
 
-export default middleware;
+export default proxy;
 
 export const config = {
   matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index 47b77e9..f3ea8be 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -32,18 +32,18 @@ const config: Config = {
         },
       },
       fontFamily: {
-        display: ["var(--font-display)", "serif"],
-        body: ["var(--font-body)", "serif"],
+        display: ["var(--font-display)", "sans-serif"],
+        body: ["var(--font-body)", "sans-serif"],
       },
       borderRadius: {
-        paper: "28px",
-        "paper-lg": "34px",
+        paper: "16px",
+        "paper-lg": "20px",
       },
       boxShadow: {
         paper:
-          "0 22px 45px -34px rgba(34, 26, 18, 0.65), 0 6px 14px -12px rgba(34, 26, 18, 0.35)",
+          "0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 24px -20px rgba(15, 23, 42, 0.25)",
         "paper-lift":
-          "0 28px 60px -40px rgba(34, 26, 18, 0.6), 0 10px 20px -14px rgba(34, 26, 18, 0.35)",
+          "0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 32px -22px rgba(15, 23, 42, 0.3)",
       },
     },
   },
diff --git a/apps/web/tests/integration/import-meta-glob.d.ts b/apps/web/tests/integration/import-meta-glob.d.ts
new file mode 100644
index 0000000..d5d40f0
--- /dev/null
+++ b/apps/web/tests/integration/import-meta-glob.d.ts
@@ -0,0 +1,3 @@
+interface ImportMeta {
+  glob: (pattern: string) => Record<string, () => Promise<unknown>>;
+}
diff --git a/apps/worker/requirements.txt b/apps/worker/requirements.txt
index 633fc88..d974295 100644
--- a/apps/worker/requirements.txt
+++ b/apps/worker/requirements.txt
@@ -1,6 +1,6 @@
 img2pdf==0.5.1
 Pillow==10.4.0
-fpdf2==2.8.5
+fpdf2==2.8.4
 openpyxl==3.1.5
 pymupdf==1.26.0
 pypdf==6.6.0
diff --git a/apps/worker/zenpdf_worker/tools.py b/apps/worker/zenpdf_worker/tools.py
index 1f256a6..de5b882 100644
--- a/apps/worker/zenpdf_worker/tools.py
+++ b/apps/worker/zenpdf_worker/tools.py
@@ -206,7 +206,7 @@ def _build_overlay_page(
     pdf.set_auto_page_break(auto=False)
     pdf.add_page()
     draw_fn(pdf, width_mm, height_mm)
-    pdf_output = pdf.output(dest="S")
+    pdf_output = pdf.output()
     if isinstance(pdf_output, str):
         pdf_bytes = pdf_output.encode("latin-1")
     else:
@@ -1657,7 +1657,7 @@ def _set_overlay_font(pdf: FPDF, text: str, size: int) -> None:
     """
     font_path = _resolve_unicode_font_path()
     if font_path:
-        pdf.add_font("DejaVuSans", fname=str(font_path), uni=True)
+        pdf.add_font("DejaVuSans", fname=str(font_path))
         pdf.set_font("DejaVuSans", size=size)
         return
     try:
@@ -1700,7 +1700,7 @@ def html_to_pdf(html: str, output_path: Path) -> Path:
     pdf.add_page()
     font_path = _resolve_unicode_font_path()
     if font_path:
-        pdf.add_font("DejaVuSans", fname=str(font_path), uni=True)
+        pdf.add_font("DejaVuSans", fname=str(font_path))
         pdf.set_font("DejaVuSans", size=12)
     else:
         try:
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index a04d95e..6ef2e18 100644
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -17,7 +17,7 @@
 - Desktop installers are out of scope.
 
 ## Data Model (Convex)
-- Users: tier, ads-free flag, auth metadata, org membership.
+- Users: tier and auth metadata.
 - Jobs: tool type, status, progress, inputs, outputs, error codes.
 - Artifacts: file metadata, storageId, TTL.
 - Usage counters: per-user, per-anon, and global limits.
@@ -43,7 +43,7 @@
 - Enforce per-user and global caps server-side.
 - Heavy tools disabled first during budget pressure.
 - Friendly errors returned for capacity or budget limits.
-- Premium tier access is allowlisted via ZENPDF_PREMIUM_EMAILS / ZENPDF_PREMIUM_CLERK_IDS.
+- No premium tier or premium-only tools.
 
 ## Error Mapping
 Stable error codes are mapped to friendly UI messages:
@@ -51,7 +51,6 @@ Stable error codes are mapped to friendly UI messages:
 - USER_LIMIT_DAILY_JOBS
 - USER_LIMIT_DAILY_MINUTES
 - USER_INPUT_INVALID
-- USER_LIMIT_PREMIUM_REQUIRED
 - SERVICE_CAPACITY_TEMPORARY
 - SERVICE_CAPACITY_MONTHLY_BUDGET
 
@@ -64,5 +63,5 @@ Stable error codes are mapped to friendly UI messages:
 ## Testing & CI
 - Unit: limits, job state machine, error mapping.
 - Integration: Convex functions and worker with fixtures.
-- E2E: core tools, premium gating, Usage & Capacity page.
+- E2E: core tools and Usage & Capacity page.
 - CI: lint + unit + integration on PR; E2E on main/nightly.
diff --git a/docs/OWNER_ACTION_ITEMS.md b/docs/OWNER_ACTION_ITEMS.md
new file mode 100644
index 0000000..cd14152
--- /dev/null
+++ b/docs/OWNER_ACTION_ITEMS.md
@@ -0,0 +1,68 @@
+# Owner Action Items (Living Checklist)
+
+Last updated: 2026-02-06
+Owner: Rohan Patnaik
+
+Use this file as the single source of truth for remaining manual/non-code tasks.
+Add new items here whenever something is deferred.
+
+## Payments and Donations
+
+- [ ] Choose and set up a card payment provider for in-modal checkout.
+  - Why: `Pay by card` needs a real hosted checkout/embed URL.
+  - Note: Card processing without a gateway is not practical (PCI + banking rails). Card fees are unavoidable.
+
+- [ ] Add card embed URL in web env.
+  - File: `apps/web/.env.local`
+  - Key: `NEXT_PUBLIC_DONATE_CARD_EMBED_URL`
+  - Requirement: must be an iframe-embeddable checkout URL from your provider.
+
+- [ ] Configure provider dashboard for embed usage.
+  - Allowlist local/dev and production origins if provider requires domain allowlisting.
+  - Verify checkout works on both desktop and mobile.
+
+- [ ] Finalize OnlyChai page/account details.
+  - Set these web env vars instead of committing personal payment IDs in git:
+    - `NEXT_PUBLIC_DONATE_PAYEE_NAME`
+    - `NEXT_PUBLIC_DONATE_UPI_ID`
+  - Validate that users can complete payment successfully.
+
+- [ ] Keep payment identifiers out of version control.
+  - Deployment/CI should provide `NEXT_PUBLIC_DONATE_PAYEE_NAME` and `NEXT_PUBLIC_DONATE_UPI_ID`.
+  - Do not commit real personal UPI/name values in tracked docs or source files.
+
+## Donation UX Assets and Content
+
+- [ ] Finalize production icon assets for donate FAB.
+  - Expected paths:
+    - `apps/web/public/icons/chai-fab-light.png`
+    - `apps/web/public/icons/chai-fab-dark.png`
+  - Keep square canvas, rounded-corner composition, and good contrast for both themes.
+
+- [ ] (Optional) Use a custom hosted QR image instead of generated QR.
+  - File: `apps/web/.env.local`
+  - Key: `NEXT_PUBLIC_DONATE_UPI_QR_URL`
+  - If not set, app generates QR locally from UPI URI.
+
+## Runtime and Environment
+
+- [ ] Add local dev fallback env for HTML-to-PDF if TLS handshake issues appear.
+  - File: `apps/worker/.env`
+  - Key: `ZENPDF_WEB_ALLOW_HOSTNAME_FALLBACK=1`
+  - Scope: local/dev usage only with `ZENPDF_DEV_MODE=1`.
+
+- [ ] Reinstall worker dependencies after requirement updates.
+  - Command: `cd apps/worker && python3.11 -m pip install -r requirements.txt`
+  - Note: `fpdf2` pin is now `2.8.4` to avoid install failure.
+
+## Release and Process
+
+- [ ] Before final production PR merge, run full smoke tests on all tools in local/dev.
+  - Include upload -> process -> download for representative file types.
+
+- [ ] Keep CodeRabbit pre-push review step in workflow.
+  - Rule agreed: run CodeRabbit and address findings before push/PR updates.
+
+- [ ] Confirm production env values in deployment targets.
+  - Web: donation-related `NEXT_PUBLIC_*` keys.
+  - Worker: runtime keys needed for web-to-pdf and OCR behavior.
diff --git a/docs/PRD.md b/docs/PRD.md
index bf8c6b2..50feea1 100644
--- a/docs/PRD.md
+++ b/docs/PRD.md
@@ -28,12 +28,20 @@ ZenPDF exposes a strict 27-tool parity set:
 All tools are available across plans. There are no premium-only tools.
 
 ## Plans & Limits
-- Tiers: ANON, FREE_ACCOUNT, PREMIUM.
+- Tiers: ANON and FREE_ACCOUNT.
 - Limits are config-driven via Convex tables and env overrides.
 - Enforced server-side for every job and tool.
-- PREMIUM currently represents a higher-capacity profile only (limits/concurrency), not extra tools.
+- Per-user/per-anon plan limits cap daily jobs/minutes for the current actor.
+- Global pooled limits cap aggregate daily jobs/minutes and concurrent jobs across all actors.
+- Monthly budget caps track aggregate platform cost over the current month.
+- Enforcement order: validate user-level constraints first, then global pooled daily capacity/concurrency, then monthly budget checks before enqueueing.
 - Budget controls disable heavy tools first, then respond with friendly errors.
 
+## Heavy Tool Definition
+- Heavy tools are OCR PDF (`ocr-pdf`) and PDF/A conversion (`pdfa`).
+- A tool is classified as heavy when it has materially higher compute time/cost than baseline utilities (for example, OCR inference passes or archival conversion pipelines).
+- When monthly budget pressure increases, heavy tools are paused first while core tools remain available.
+
 ## Usage & Capacity Page
 - Non-technical descriptions of limits and capacity state.
 - Progress bars: jobs/day, max file size, max files/job, heavy tools availability.
@@ -49,12 +57,12 @@ All tools are available across plans. There are no premium-only tools.
 ## Friendly Error Catalog
 - USER_LIMIT_FILE_TOO_LARGE
 - USER_LIMIT_SIZE_REQUIRED
-- USER_LIMIT_DAILY_JOBS
-- USER_LIMIT_DAILY_MINUTES
+- USER_LIMIT_DAILY_JOBS (per-user/per-anon daily jobs cap reached)
+- USER_LIMIT_DAILY_MINUTES (per-user/per-anon daily processing-minutes cap reached)
 - USER_INPUT_INVALID
 - USER_SESSION_REQUIRED
-- SERVICE_CAPACITY_TEMPORARY
-- SERVICE_CAPACITY_MONTHLY_BUDGET
+- SERVICE_CAPACITY_TEMPORARY (global pooled daily jobs/minutes/concurrency reached, or heavy tools paused)
+- SERVICE_CAPACITY_MONTHLY_BUDGET (global monthly budget/cost cap reached)
 
 Each error must include a plain-language explanation and what to do next.
 
@@ -69,4 +77,4 @@ Each error must include a plain-language explanation and what to do next.
 ## Non-Goals
 - Mobile app.
 - On-device heavy PDF processing.
-- Payment integration (supporter mode may be added later).
+- Subscription billing or premium-only feature gating.
diff --git a/docs/RELEASE_CHECKLIST.md b/docs/RELEASE_CHECKLIST.md
index 3fdd36b..d13d7a9 100644
--- a/docs/RELEASE_CHECKLIST.md
+++ b/docs/RELEASE_CHECKLIST.md
@@ -5,7 +5,7 @@
 - Run web tests: `npm run lint` and `npm test` in `apps/web`.
 - Run worker tests: `pytest` in `apps/worker`.
 - Ensure Convex schema changes are deployed.
-- Verify premium allowlists are correct.
+- Verify donation link/QR env variables are set (if enabled).
 
 ## Deploy
 - Deploy the web app to Vercel.
diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md
index 40d3798..b364e3a 100644
--- a/docs/ROADMAP.md
+++ b/docs/ROADMAP.md
@@ -33,14 +33,14 @@ Each epic is broken into PR-sized subtasks. Update this file as work ships.
 - [x] 4.4 Repair PDFs (rebuild structure)
 - [x] 4.5 Annotations + copy utility hardening
 
-## Epic 5 — Tiers Polish
-- [x] 5.1 ANON/FREE/PREMIUM UX clarity
+## Epic 5 — Limits UX Polish
+- [x] 5.1 ANON/FREE UX clarity
 - [x] 5.2 Usage & Capacity page fully implemented
 
-## Epic 6 — Premium
+## Epic 6 — Heavy Tools
 - [x] 6.1 OCR conversions to Word/Excel
 - [x] 6.2 PDF/A conversion
-- [x] 6.3 Premium limits + ads-free flag
+- [x] 6.3 Limits + capacity controls for heavy tools
 
 ## Epic 7 — Workflows + Teams
 - [x] 7.1 Workflow compiler + presets
diff --git a/docs/SELF_HOST.md b/docs/SELF_HOST.md
index a4c2aad..bc51b40 100644
--- a/docs/SELF_HOST.md
+++ b/docs/SELF_HOST.md
@@ -35,5 +35,5 @@ docker compose up --build
 
 ## Notes
 - Local development bypass is enabled when `ZENPDF_DEV_MODE=1` and the web app runs in development mode, which disables plan/capacity checks for local runs.
-- Premium access is allowlisted with `ZENPDF_PREMIUM_EMAILS` or `ZENPDF_PREMIUM_CLERK_IDS`.
+- ZenPDF has no premium-only tools or premium account allowlists.
 - For production self-hosting, run `npm run build` and `npm run start` in `apps/web`.
diff --git a/docs/UI_PRACTICAL_REDESIGN_CHECKLIST.md b/docs/UI_PRACTICAL_REDESIGN_CHECKLIST.md
new file mode 100644
index 0000000..899626b
--- /dev/null
+++ b/docs/UI_PRACTICAL_REDESIGN_CHECKLIST.md
@@ -0,0 +1,50 @@
+# ZenPDF Practical UI Redesign Checklist
+
+Goal: Keep the current white/green minimal style while making feature placement intentional, practical, and task-oriented.
+
+## 1. Global Design System
+- [x] Keep a restrained white/green visual language with subtle borders and shadows.
+- [x] Standardize reusable primitives (`paper-card`, button variants, badges, alerts, form fields).
+- [x] Ensure focus-visible states are clearly visible and consistent.
+- [x] Keep typography hierarchy compact and readable (no decorative oversizing).
+
+## 2. Navigation and Orientation
+- [x] Keep primary navigation minimal: `Tools`, `Usage & Capacity`, auth.
+- [x] Highlight active navigation item to reduce orientation ambiguity.
+- [x] Keep utility actions (sign-in/user menu) visually secondary to task navigation.
+
+## 3. Home Page IA
+- [x] First viewport answers: what ZenPDF does + what to do next.
+- [x] Keep primary CTA (`Start with a file`) and secondary CTA (`View usage limits`) adjacent.
+- [x] Present tools in intent-based groups instead of flat lists.
+- [x] Keep limits/workflow panels as support context, not primary action space.
+
+## 4. Tools Page IA (Core Workflow)
+- [x] Explicit top flow framing: Select tool -> Configure -> Queue/Monitor.
+- [x] Place tool selection in left rail and group by user intent.
+- [x] Keep active tool details and configuration in the central action panel.
+- [x] Show required settings before optional settings.
+- [x] Keep advanced options collapsed by default (progressive disclosure).
+- [x] Keep submit CTA close to required inputs.
+- [x] Keep active job progress and status near submit area.
+- [x] Keep recent jobs below as historical context, not competing with primary task.
+
+## 5. Usage & Capacity Page IA
+- [x] Separate personal usage from shared pool usage.
+- [x] Keep capacity state visible at top with clear status tone.
+- [x] Keep access tier details in a dedicated side panel.
+- [x] Present error catalog with disclosure to reduce cognitive load.
+
+## 6. Feedback and State Design
+- [x] Standardize success/warning/error states for consistency.
+- [x] Ensure empty states include next-step guidance.
+- [x] Keep loading states explicit and scoped to the section being loaded.
+
+## 7. Accessibility and Responsiveness
+- [x] Maintain keyboard-focus visibility across interactive controls.
+- [x] Keep semantic structures (`nav`, headings, sections, details/summary).
+- [x] Preserve readable spacing and action order on mobile layouts.
+
+## 8. Safety Constraints
+- [x] UI-only changes; no backend/API/auth/data-model behavior changes.
+- [x] Preserve all existing features and functional outcomes.