Point color, radius, stroke, focus, and type tokens at the Figma scale so later sections use the same values.

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

app/(marketing)/how-it-works/page.tsx

@@ -20,7 +20,7 @@ const RelatedArticles = dynamic(
   () => import("../../components/sections/RelatedArticles"),
   {
     loading: () => (
-      <section className="py-[var(--spacing-scale-032)] min-h-[400px]" />
+      <section className="py-[var(--space-800)] min-h-[400px]" />
     ),
     ssr: true,
   },
@@ -110,7 +110,7 @@ export default function HowItWorksPage() {
         <div className="relative w-full overflow-x-clip">
           <ContentTemplateDecorativeShapes variant="guide" />
 
-          <article className="relative z-10 p-[var(--spacing-scale-024)] sm:py-[var(--spacing-scale-032)] xl:px-[calc(268/1440*100%)]">
+          <article className="relative z-10 p-[var(--space-600)] sm:py-[var(--space-800)] xl:px-[calc(268/1440*100%)]">
             <div
               className="post-body text-[var(--color-content-default-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:mx-auto sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-none"
               dangerouslySetInnerHTML={{ __html: syntheticPost.htmlContent }}