Adopt remaining typography token classes (CR-24)

Map exact size/weight/line-height combos onto existing text-* utilities across cards, sections, navigation, modals, controls, and create-flow. Leave unmappable combos hardcoded for design review.

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

app/components/sections/RelatedArticles/RelatedArticles.view.tsx

@@ -37,7 +37,7 @@ export function RelatedArticlesView({
         }
       >
         {isUseCases && useCasesHeadingLines?.length ? (
-          <h2 className="mx-auto w-full min-w-0 max-w-[693px] text-center font-bricolage-grotesque text-[28px] font-bold leading-9 text-[var(--color-content-default-primary)] md:text-[32px] md:leading-[40px] lg:text-[40px] lg:leading-[52px]">
+          <h2 className="mx-auto w-full min-w-0 max-w-[693px] text-center font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:text-large-heading lg:text-xx-large-heading">
             {/* Baseline 22112-872308: stacked lines; md+ single line; lg 20711-14231: 40/52, max 693px */}
             <span className="flex flex-col md:hidden">
               {useCasesHeadingLines.map((line, index) => (
@@ -52,7 +52,7 @@ export function RelatedArticlesView({
           </h2>
         ) : (
           <h2
-            className={`text-center text-[32px] font-medium leading-[110%] lg:text-[44px] ${
+            className={`text-center font-medium text-[32px] leading-[110%] lg:text-medium-display ${
               headingSurface === "onLight"
                 ? "text-[var(--color-content-default-primary)]"
                 : "text-[var(--color-content-inverse-primary)]"