Sessions 5-7a: 955 tests, deployment ready

web/src/components/HowItWorks.tsx

@@ -1,36 +1,81 @@
-const steps = [
+const STEPS = [
   {
-    number: '01',
-    title: 'Build your parlay',
-    description: 'Add your legs — player, stat, line, book. 2 to 12 props.',
+    n: '01',
+    title: 'Read a prop',
+    body: 'Pick a sport. Find the player. Set the line. We grade it in seconds across forty-plus factors.',
   },
   {
-    number: '02',
-    title: 'Get your grade',
-    description: 'Each leg graded A through D. Overall parlay grade with correlation checks.',
+    n: '02',
+    title: 'Read the grade',
+    body: 'Letter grade. Projection. Confidence. Factor breakdown. Kill conditions. Alt line ladder. The whole picture.',
   },
   {
-    number: '03',
-    title: 'See the edge',
-    description: 'Season averages, recent form, situational splits, cross-book line comparison. Every factor explained.',
+    n: '03',
+    title: 'Make the call',
+    body: 'Take the prop, walk away, or shop the alt line. Either way, you decided with intelligence — not vibes.',
   },
 ];
 
 export default function HowItWorks() {
   return (
-    <section className="py-24 px-4">
-      <div className="max-w-5xl mx-auto">
-        <h2 className="text-3xl font-bold text-center mb-16">How It Works</h2>
-        <div className="grid md:grid-cols-3 gap-8">
-          {steps.map((step) => (
-            <div key={step.number} className="p-6 rounded-2xl bg-[var(--card)] border border-[var(--border)]">
-              <div className="font-mono text-[var(--accent)] text-sm font-bold mb-3">{step.number}</div>
-              <h3 className="text-xl font-semibold mb-2">{step.title}</h3>
-              <p className="text-[var(--text-muted)] text-sm leading-relaxed">{step.description}</p>
+    <section
+      style={{
+        padding: '96px 24px',
+        borderTop: '1px solid var(--border)',
+      }}
+    >
+      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
+        <header style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 64px' }}>
+          <h2
+            className="text-balance"
+            style={{ fontSize: 'clamp(28px, 4vw, 44px)', fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 16 }}
+          >
+            How it works.
+          </h2>
+          <p style={{ fontSize: 17, color: 'var(--text-secondary)' }}>
+            Three steps. No tout picks. No black box.
+          </p>
+        </header>
+
+        <div className="hiw-grid" style={{ display: 'grid', gap: 24, position: 'relative' }}>
+          {STEPS.map((s, i) => (
+            <div
+              key={s.n}
+              className={`surface diagonal-cut animate-fade-up stagger-${i + 1}`}
+              style={{
+                padding: 32,
+                position: 'relative',
+              }}
+            >
+              <div
+                className="mono"
+                style={{
+                  fontSize: 12,
+                  fontWeight: 700,
+                  color: 'var(--grade-a)',
+                  letterSpacing: '0.10em',
+                  marginBottom: 24,
+                }}
+              >
+                STEP {s.n}
+              </div>
+              <h3 style={{ fontSize: 22, fontWeight: 700, marginBottom: 12, letterSpacing: '-0.01em' }}>{s.title}</h3>
+              <p style={{ fontSize: 15, color: 'var(--text-secondary)', lineHeight: 1.6 }}>{s.body}</p>
             </div>
           ))}
         </div>
       </div>
+
+      <style jsx>{`
+        :global(.hiw-grid) {
+          grid-template-columns: 1fr;
+        }
+        @media (min-width: 768px) {
+          :global(.hiw-grid) {
+            grid-template-columns: repeat(3, 1fr);
+          }
+        }
+      `}</style>
     </section>
   );
 }