Session 8: Frontend Stripe cutover, soccer pages, sport selector, grade result cards, beta badge

web/src/components/Nav.tsx

@@ -47,10 +47,33 @@ export default function Nav() {
       >
         <a
           href="/"
-          style={{ color: 'var(--text-0)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center' }}
+          style={{ color: 'var(--text-0)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10 }}
           aria-label="VYNDR — home"
         >
           <Wordmark size={22} />
+          {/* Session 8 — beta tag. Tiny, glitch-styled, sits next to
+              the wordmark so it reads as part of the brand rather than
+              a banner. Renders on every page that mounts Nav. */}
+          <span
+            className="mono"
+            aria-label="Beta"
+            style={{
+              fontSize: 9,
+              fontWeight: 800,
+              letterSpacing: '0.14em',
+              padding: '2px 5px',
+              color: 'var(--grade-a)',
+              border: '1px solid var(--grade-a)',
+              borderRadius: 3,
+              textTransform: 'uppercase',
+              opacity: 0.85,
+              lineHeight: 1,
+              position: 'relative',
+              top: -2,
+            }}
+          >
+            BETA
+          </span>
         </a>
 
         <div className="nav-desktop" style={{ display: 'none', gap: 28, alignItems: 'center' }}>