Text can be resized to 200% without loss of content or functionality; relative units used

Users with low vision rely on browser zoom and operating system text scaling to increase font size to a readable level. When layout uses absolute pixel units, fixed container widths, or overflow hidden on text containers, zooming to 200% causes content to overflow off-screen, overlap other elements, or disappear entirely. WCAG 2.2 SC 1.4.4 (Level AA) requires text to be resizable to 200% without loss of content or functionality, and SC 1.4.10 (Level AA) requires content to reflow without horizontal scrolling at 320 CSS pixel width. Section 508 2018 Refresh 502.3.3 incorporates SC 1.4.4. Failing this check excludes the millions of users with low vision who use browser zoom rather than a screen reader.

Switch font sizes and spacing from px to rem (root-relative) units in src/app/globals.css. Use responsive layouts that reflow rather than overflow:

/* Base */
html { font-size: 16px; } /* 1rem = 16px */
body { font-size: 1rem; line-height: 1.5; }

/* Headings scale with root */
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }

/* Avoid fixed widths on text containers */
.card { width: 100%; max-width: 640px; } /* Not: width: 640px; */

/* Allow inputs to grow */
input, textarea { width: 100%; max-width: 480px; }

Test by opening the app in a browser and pressing Ctrl/Cmd + + five times to reach 200% zoom. Verify no content is clipped, no text overlaps, and the page remains scrollable without horizontal scroll.