From 3f3ff41d01f5948694e27600ae824c31d1b75246 Mon Sep 17 00:00:00 2001
From: orveth <orveth@proton.me>
Date: Fri, 5 Jun 2026 15:13:56 -0700
Subject: [PATCH] refactor(homepage): eliminate styles.css for full Tailwind
 migration

Rebased onto post-monorepo master; paths relocated app/ -> apps/web-wallet/app/. Original commits:
 - refactor(homepage): move easy CSS rules to Tailwind utilities (phase 1)
 - refactor(homepage): inline font-mono + swap ::before pseudos for sibling divs (phase 2)
 - refactor(homepage): replace ancestor-state animation triggers with data-state + group-data variants (phase 3)
 - refactor(homepage): delete styles.css after full Tailwind migration (phase 4)
---
 .../homepage/components/join-beta-button.tsx  |   2 +-
 .../homepage/components/section-label.tsx     |   2 +-
 .../features/homepage/components/section.tsx  |   1 +
 .../app/features/homepage/marketing-page.tsx  |  21 +-
 .../homepage/sections/buy-section.tsx         |  13 +-
 .../homepage/sections/cta-section.tsx         |   2 +-
 .../homepage/sections/footer-section.tsx      |   4 +-
 .../homepage/sections/hero-section.tsx        |  17 +-
 .../homepage/sections/merchants-section.tsx   |   4 +-
 .../homepage/sections/send-section.tsx        |  30 ++-
 .../homepage/sections/spend-section.tsx       |  17 +-
 .../homepage/sections/wallet-section.tsx      |   6 +-
 .../app/features/homepage/styles.css          | 184 ------------------
 apps/web-wallet/app/routes/_public.home.tsx   |   4 +
 apps/web-wallet/app/tailwind.css              |  13 +-
 15 files changed, 90 insertions(+), 230 deletions(-)
 delete mode 100644 apps/web-wallet/app/features/homepage/styles.css

diff --git a/apps/web-wallet/app/features/homepage/components/join-beta-button.tsx b/apps/web-wallet/app/features/homepage/components/join-beta-button.tsx
index bd5da348d..901906162 100644
--- a/apps/web-wallet/app/features/homepage/components/join-beta-button.tsx
+++ b/apps/web-wallet/app/features/homepage/components/join-beta-button.tsx
@@ -23,7 +23,7 @@ export function JoinBetaButton({
     <Link
       to={isLoggedIn ? '/' : { ...location, pathname: '/signup' }}
       className={cn(
-        'inline-flex items-center justify-center rounded-md border border-[color:var(--mk-brand)] bg-[color:var(--mk-brand)] font-medium font-mono text-[#04080f] tracking-wide transition-[background-color,color] duration-200 hover:bg-transparent hover:text-[color:var(--mk-brand)] focus-visible:outline-2 focus-visible:outline-[color:var(--mk-brand)] focus-visible:outline-offset-2',
+        'inline-flex items-center justify-center rounded-md border border-[color:var(--mk-brand)] bg-[color:var(--mk-brand)] font-medium text-[#04080f] tracking-wide transition-[background-color,color] duration-200 [font-family:var(--mk-font-mono)] hover:bg-transparent hover:text-[color:var(--mk-brand)] focus-visible:outline-2 focus-visible:outline-[color:var(--mk-brand)] focus-visible:outline-offset-2',
         sizeClasses,
         className,
       )}
diff --git a/apps/web-wallet/app/features/homepage/components/section-label.tsx b/apps/web-wallet/app/features/homepage/components/section-label.tsx
index 70ec1d7ee..ed605358a 100644
--- a/apps/web-wallet/app/features/homepage/components/section-label.tsx
+++ b/apps/web-wallet/app/features/homepage/components/section-label.tsx
@@ -8,7 +8,7 @@ type SectionLabelProps = {
 
 export function SectionLabel({ children, className, href }: SectionLabelProps) {
   const labelClasses = cn(
-    'translate-y-2 text-left font-mono text-[color:var(--mk-text-muted)] text-xs uppercase tracking-[0.12em]',
+    'translate-y-2 text-left [font-family:var(--mk-font-mono)] text-[color:var(--mk-text-muted)] text-xs uppercase tracking-[0.12em]',
     className,
   );
   const content = (
diff --git a/apps/web-wallet/app/features/homepage/components/section.tsx b/apps/web-wallet/app/features/homepage/components/section.tsx
index a842ce747..ca07ecc7b 100644
--- a/apps/web-wallet/app/features/homepage/components/section.tsx
+++ b/apps/web-wallet/app/features/homepage/components/section.tsx
@@ -19,6 +19,7 @@ export function Section({
       id={id}
       className={cn(
         'relative w-full px-5 py-20 md:px-8 md:py-32',
+        id && 'scroll-mt-[64px] md:scroll-mt-[70px]',
         hairline && 'border-[color:var(--mk-border)] border-t',
         className,
       )}
diff --git a/apps/web-wallet/app/features/homepage/marketing-page.tsx b/apps/web-wallet/app/features/homepage/marketing-page.tsx
index 95fabdbdb..1cfafa9e0 100644
--- a/apps/web-wallet/app/features/homepage/marketing-page.tsx
+++ b/apps/web-wallet/app/features/homepage/marketing-page.tsx
@@ -7,11 +7,28 @@ import { MerchantsSection } from './sections/merchants-section';
 import { SendSection } from './sections/send-section';
 import { SpendSection } from './sections/spend-section';
 import { WalletSection } from './sections/wallet-section';
-import './styles.css';
+
+const marketingVars: React.CSSProperties = {
+  '--mk-bg': '#04080f',
+  '--mk-bg-card': 'rgba(12, 20, 36, 0.5)',
+  '--mk-text': '#e8edf8',
+  '--mk-text-dim': '#8094b8',
+  '--mk-text-muted': '#455575',
+  '--mk-brand': '#00d4ff',
+  '--mk-border': 'rgba(255, 255, 255, 0.06)',
+  '--mk-border-bright': 'rgba(255, 255, 255, 0.12)',
+  '--mk-font-display':
+    '"Cabinet Grotesk", -apple-system, BlinkMacSystemFont, sans-serif',
+  '--mk-font-mono': '"Kode Mono", ui-monospace, monospace',
+  '--mk-font-numeric': '"Teko", sans-serif',
+} as React.CSSProperties;
 
 export function MarketingPage() {
   return (
-    <div className="marketing scrollbar-none h-dvh overflow-y-auto overflow-x-hidden bg-[color:var(--mk-bg)] text-[color:var(--mk-text)] [font-family:var(--mk-font-display)]">
+    <div
+      className="marketing scrollbar-none h-dvh overflow-y-auto overflow-x-hidden bg-[color:var(--mk-bg)] text-[color:var(--mk-text)] antialiased [font-family:var(--mk-font-display)] [font-feature-settings:'ss01','ss02']"
+      style={marketingVars}
+    >
       <MarketingNav />
       <main>
         <HeroSection />
diff --git a/apps/web-wallet/app/features/homepage/sections/buy-section.tsx b/apps/web-wallet/app/features/homepage/sections/buy-section.tsx
index 2760bd8dd..1ee03328e 100644
--- a/apps/web-wallet/app/features/homepage/sections/buy-section.tsx
+++ b/apps/web-wallet/app/features/homepage/sections/buy-section.tsx
@@ -77,20 +77,23 @@ export function BuySection() {
       <div className="grid grid-cols-1 items-center gap-12 md:grid-cols-2 md:gap-20">
         <div className="text-center md:text-left">
           <SectionLabel href="#buy">01_buy</SectionLabel>
-          <h2 className="mt-8 font-medium font-mono text-3xl leading-[1.15] tracking-[-0.02em] md:mt-10 md:text-5xl">
+          <h2 className="mt-8 font-medium text-3xl leading-[1.15] tracking-[-0.02em] [font-family:var(--mk-font-mono)] md:mt-10 md:text-5xl">
             <a href="#buy">Buy a card in seconds.</a>
           </h2>
           <p className="mt-6 text-[color:var(--mk-text-dim)] text-base leading-relaxed md:text-lg">
             Buy a gift card with bitcoin, or use the Cash App to buy directly
             from your bank account.
           </p>
-          <div className="mt-6 font-mono text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em]">
+          <div className="mt-6 text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em] [font-family:var(--mk-font-mono)]">
             lightning · cash app · settled instantly
           </div>
         </div>
 
         <div className="flex justify-center">
-          <div className={`${buyStageBase} ${state}`}>
+          <div
+            className={`group/paid ${buyStageBase} ${state}`}
+            data-paid={state === 'paid'}
+          >
             <div className={buyHead}>
               <span>{header.brand}</span>
               <span className="text-[color:var(--mk-text)]">
@@ -231,7 +234,7 @@ function PaidBody() {
     <div className="flex flex-1 flex-col items-center justify-center">
       <div
         aria-hidden="true"
-        className="cashapp-check mb-4 grid h-12 w-12 place-items-center rounded-full bg-[#00d54f] text-black"
+        className="cashapp-check mb-4 grid h-12 w-12 place-items-center rounded-full bg-[#00d54f] text-black group-data-[paid=true]/paid:animate-confirm-pop"
       >
         <svg
           viewBox="0 0 24 24"
@@ -250,7 +253,7 @@ function PaidBody() {
           />
         </svg>
       </div>
-      <div className="cashapp-headline mb-[14px] font-bold text-[22px] text-[color:var(--mk-text)] leading-[1.1] tracking-[-0.02em] [font-family:var(--mk-font-display)]">
+      <div className="cashapp-headline mb-[14px] font-bold text-[22px] text-[color:var(--mk-text)] leading-[1.1] tracking-[-0.02em] [font-family:var(--mk-font-display)] group-data-[paid=true]/paid:animate-confirm-pop group-data-[paid=true]/paid:[animation-delay:80ms]">
         You paid $7.98
       </div>
     </div>
diff --git a/apps/web-wallet/app/features/homepage/sections/cta-section.tsx b/apps/web-wallet/app/features/homepage/sections/cta-section.tsx
index ea01955b9..8fa627ea7 100644
--- a/apps/web-wallet/app/features/homepage/sections/cta-section.tsx
+++ b/apps/web-wallet/app/features/homepage/sections/cta-section.tsx
@@ -13,7 +13,7 @@ export function CtaSection() {
           <div className="flex justify-center">
             <SectionLabel href="#join">for_users</SectionLabel>
           </div>
-          <h2 className="mt-7 font-medium font-mono text-2xl leading-[1.2] tracking-[-0.02em] md:text-3xl">
+          <h2 className="mt-7 font-medium text-2xl leading-[1.2] tracking-[-0.02em] [font-family:var(--mk-font-mono)] md:text-3xl">
             <a href="#join">Be early.</a>
           </h2>
           <p className="mt-4 text-[color:var(--mk-text-dim)] text-base leading-relaxed">
diff --git a/apps/web-wallet/app/features/homepage/sections/footer-section.tsx b/apps/web-wallet/app/features/homepage/sections/footer-section.tsx
index c263e2ddd..191085663 100644
--- a/apps/web-wallet/app/features/homepage/sections/footer-section.tsx
+++ b/apps/web-wallet/app/features/homepage/sections/footer-section.tsx
@@ -38,12 +38,12 @@ export function FooterSection() {
               aria-label={s.label}
               target="_blank"
               rel="noopener noreferrer"
-              className="footer-social-link inline-flex h-10 w-10 items-center justify-center rounded-full border border-[color:var(--mk-border)] text-[color:var(--mk-text-muted)] transition-[color,border-color,background-color] duration-200 hover:border-[color:var(--mk-border-bright)] hover:bg-[rgba(255,255,255,0.03)] hover:text-[color:var(--mk-text)]"
+              className="group inline-flex h-10 w-10 items-center justify-center rounded-full border border-[color:var(--mk-border)] text-[color:var(--mk-text-muted)] transition-[color,border-color,background-color] duration-200 hover:border-[color:var(--mk-border-bright)] hover:bg-[rgba(255,255,255,0.03)] hover:text-[color:var(--mk-text)]"
             >
               <img
                 src={s.src}
                 alt=""
-                className="footer-social-img block h-4 w-4"
+                className="block h-4 w-4 opacity-90 transition-[filter,opacity] duration-200 [filter:invert(56%)_sepia(8%)_saturate(750%)_hue-rotate(190deg)_brightness(95%)_contrast(85%)] group-hover:opacity-100 group-hover:[filter:invert(94%)_sepia(5%)_saturate(380%)_hue-rotate(190deg)_brightness(102%)_contrast(94%)]"
               />
             </a>
           ))}
diff --git a/apps/web-wallet/app/features/homepage/sections/hero-section.tsx b/apps/web-wallet/app/features/homepage/sections/hero-section.tsx
index a30a434af..635c0c9d2 100644
--- a/apps/web-wallet/app/features/homepage/sections/hero-section.tsx
+++ b/apps/web-wallet/app/features/homepage/sections/hero-section.tsx
@@ -219,16 +219,16 @@ export function HeroSection() {
   return (
     <section className="relative w-full px-5 pt-12 pb-24 md:px-8 md:pt-20 md:pb-32">
       <div className="mx-auto grid max-w-6xl grid-cols-1 items-center gap-16 md:grid-cols-[1fr_minmax(360px,40%)] md:gap-20">
-        <div className="stagger flex flex-col text-center md:items-start md:text-left">
+        <div className="flex flex-col text-center md:items-start md:text-left">
           <div
-            className="translate-y-2 text-left font-mono text-[11px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em]"
+            className="translate-y-2 animate-[mk-fade-up_0.6s_cubic-bezier(0.16,1,0.3,1)_forwards] text-left text-[11px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em] opacity-0 [font-family:var(--mk-font-mono)]"
             style={{ animationDelay: '0ms' }}
           >
             <span aria-hidden="true">{'> '}</span>agi.cash · public beta
           </div>
 
           <h1
-            className="mt-8 text-balance font-bold font-mono text-4xl text-[color:var(--mk-text)] leading-[1.05] tracking-[-0.025em] md:mt-10 md:text-7xl"
+            className="mt-8 translate-y-2 animate-[mk-fade-up_0.6s_cubic-bezier(0.16,1,0.3,1)_forwards] text-balance font-bold text-4xl text-[color:var(--mk-text)] leading-[1.05] tracking-[-0.025em] opacity-0 [font-family:var(--mk-font-mono)] md:mt-10 md:text-7xl"
             style={{ animationDelay: '80ms' }}
           >
             <span className="text-[color:var(--mk-brand)]">Bitcoin</span>
@@ -237,19 +237,22 @@ export function HeroSection() {
           </h1>
 
           <p
-            className="mt-7 max-w-md text-balance text-[color:var(--mk-text-dim)] text-base leading-relaxed md:text-lg"
+            className="mt-7 max-w-md translate-y-2 animate-[mk-fade-up_0.6s_cubic-bezier(0.16,1,0.3,1)_forwards] text-balance text-[color:var(--mk-text-dim)] text-base leading-relaxed opacity-0 md:text-lg"
             style={{ animationDelay: '160ms' }}
           >
             Buy, send and spend bitcoin gift cards from your favorite merchants.
             All on the most advanced Bitcoin wallet.
           </p>
 
-          <div className="mt-9" style={{ animationDelay: '240ms' }}>
+          <div
+            className="mt-9 translate-y-2 animate-[mk-fade-up_0.6s_cubic-bezier(0.16,1,0.3,1)_forwards] opacity-0"
+            style={{ animationDelay: '240ms' }}
+          >
             <JoinBetaButton size="lg" />
           </div>
 
           <div
-            className="mt-8 font-mono text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.2em]"
+            className="mt-8 translate-y-2 animate-[mk-fade-up_0.6s_cubic-bezier(0.16,1,0.3,1)_forwards] text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.2em] opacity-0 [font-family:var(--mk-font-mono)]"
             style={{ animationDelay: '320ms' }}
           >
             buy · send · spend
@@ -295,7 +298,7 @@ export function HeroSection() {
 
             <span
               aria-hidden="true"
-              className="specimen-ruler-line absolute top-[12%] right-[-20px] bottom-[12%] w-2 border-[color:var(--mk-border)] border-r"
+              className="absolute top-[12%] right-[-20px] bottom-[12%] hidden w-2 border-[color:var(--mk-border)] border-r bg-[length:6px_24px] bg-[repeating-linear-gradient(to_bottom,var(--mk-border)_0,var(--mk-border)_1px,transparent_1px,transparent_24px)] bg-repeat-y [background-position:right] md:block"
             />
 
             <div className="absolute inset-[14%] grid place-items-center [perspective:1200px] md:inset-[12%]">
diff --git a/apps/web-wallet/app/features/homepage/sections/merchants-section.tsx b/apps/web-wallet/app/features/homepage/sections/merchants-section.tsx
index bdcfbe583..f987fc0f9 100644
--- a/apps/web-wallet/app/features/homepage/sections/merchants-section.tsx
+++ b/apps/web-wallet/app/features/homepage/sections/merchants-section.tsx
@@ -21,7 +21,7 @@ export function MerchantsSection() {
           <div className="flex justify-center">
             <SectionLabel href="#merchants">for_merchants</SectionLabel>
           </div>
-          <h2 className="mt-7 font-medium font-mono text-2xl leading-[1.2] tracking-[-0.02em] md:text-3xl">
+          <h2 className="mt-7 font-medium text-2xl leading-[1.2] tracking-[-0.02em] [font-family:var(--mk-font-mono)] md:text-3xl">
             <a href="#merchants">
               Run a store? Issue bitcoin gift cards today.
             </a>
@@ -35,7 +35,7 @@ export function MerchantsSection() {
               href="https://waitlist.agi.cash/merchants"
               target="_blank"
               rel="noreferrer"
-              className="inline-flex items-center font-mono text-[color:var(--mk-text)] text-sm tracking-wide transition-colors duration-200 hover:text-[color:var(--mk-brand)]"
+              className="inline-flex items-center text-[color:var(--mk-text)] text-sm tracking-wide transition-colors duration-200 [font-family:var(--mk-font-mono)] hover:text-[color:var(--mk-brand)]"
             >
               <span
                 aria-hidden="true"
diff --git a/apps/web-wallet/app/features/homepage/sections/send-section.tsx b/apps/web-wallet/app/features/homepage/sections/send-section.tsx
index eb81f8c88..c7d215cb0 100644
--- a/apps/web-wallet/app/features/homepage/sections/send-section.tsx
+++ b/apps/web-wallet/app/features/homepage/sections/send-section.tsx
@@ -65,7 +65,7 @@ export function SendSection() {
       <div className="grid grid-cols-1 items-center gap-12 md:grid-cols-2 md:gap-20">
         <div className="text-center md:text-left">
           <SectionLabel href="#send">02_send</SectionLabel>
-          <h2 className="mt-8 font-medium font-mono text-3xl leading-[1.15] tracking-[-0.02em] md:mt-10 md:text-5xl">
+          <h2 className="mt-8 font-medium text-3xl leading-[1.15] tracking-[-0.02em] [font-family:var(--mk-font-mono)] md:mt-10 md:text-5xl">
             <a href="#send">Send over text or email.</a>
           </h2>
           <p className="mt-6 text-[color:var(--mk-text-dim)] text-base leading-relaxed md:text-lg">
@@ -73,7 +73,7 @@ export function SendSection() {
             Gift cards settle instantly and can immediately be spent at the
             merchant&apos;s point of sale.
           </p>
-          <div className="mt-6 font-mono text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em]">
+          <div className="mt-6 text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em] [font-family:var(--mk-font-mono)]">
             text · email · qr
           </div>
         </div>
@@ -81,19 +81,24 @@ export function SendSection() {
         <div className="flex flex-col items-center">
           <div
             ref={railRef}
-            className={`transit-rail relative mx-auto w-full max-w-[560px] px-3 ${played ? 'played' : ''}`}
+            data-played={played}
+            className="group/played transit-rail relative mx-auto w-full max-w-[560px] px-3"
           >
             <div className="grid grid-cols-[auto_1fr_auto] items-center gap-3">
               <div className="rounded-md border border-[color:var(--mk-border)] bg-[color:var(--mk-bg-card)] px-3 py-2 text-left">
-                <div className="font-mono text-[9px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.2em]">
+                <div className="text-[9px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.2em] [font-family:var(--mk-font-mono)]">
                   origin
                 </div>
-                <div className="mt-1 font-mono text-[color:var(--mk-text)] text-xs">
+                <div className="mt-1 text-[color:var(--mk-text)] text-xs [font-family:var(--mk-font-mono)]">
                   @you
                 </div>
               </div>
 
               <div className="transit-track relative mx-3 h-20">
+                <div
+                  aria-hidden="true"
+                  className="-translate-y-1/2 absolute top-1/2 right-0 left-0 h-px bg-[length:8px_1px] bg-[linear-gradient(to_right,var(--mk-border)_50%,transparent_50%)]"
+                />
                 <span
                   aria-hidden="true"
                   className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-0 h-2 w-px bg-[color:var(--mk-text-muted)]"
@@ -104,21 +109,26 @@ export function SendSection() {
                 />
                 <div
                   aria-hidden="true"
-                  className="transit-card -translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-0 h-7 w-11 rounded border border-[color:var(--mk-border)] bg-[color:var(--mk-bg-card)] opacity-0 shadow-[0_4px_14px_rgba(0,0,0,0.6)]"
-                />
+                  className="transit-card -translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-0 h-7 w-11 rounded border border-[color:var(--mk-border)] bg-[color:var(--mk-bg-card)] opacity-0 shadow-[0_4px_14px_rgba(0,0,0,0.6)] group-data-[played=true]/played:animate-transit-fly"
+                >
+                  <div
+                    aria-hidden="true"
+                    className="absolute inset-1 rounded-[2px] bg-[linear-gradient(135deg,rgba(0,212,255,0.18),rgba(0,212,255,0.05))]"
+                  />
+                </div>
               </div>
 
               <div className="rounded-md border border-[color:var(--mk-border)] bg-[color:var(--mk-bg-card)] px-3 py-2 text-left">
-                <div className="font-mono text-[9px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.2em]">
+                <div className="text-[9px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.2em] [font-family:var(--mk-font-mono)]">
                   destination
                 </div>
-                <div className="mt-1 font-mono text-[color:var(--mk-text)] text-xs">
+                <div className="mt-1 text-[color:var(--mk-text)] text-xs [font-family:var(--mk-font-mono)]">
                   @satoshi
                 </div>
               </div>
             </div>
 
-            <div className="mt-6 flex items-center justify-between font-mono text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em]">
+            <div className="mt-6 flex items-center justify-between text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em] [font-family:var(--mk-font-mono)]">
               <span>transit · {formattedTime}s</span>
               <button
                 type="button"
diff --git a/apps/web-wallet/app/features/homepage/sections/spend-section.tsx b/apps/web-wallet/app/features/homepage/sections/spend-section.tsx
index 09935df63..09d86d26a 100644
--- a/apps/web-wallet/app/features/homepage/sections/spend-section.tsx
+++ b/apps/web-wallet/app/features/homepage/sections/spend-section.tsx
@@ -44,7 +44,7 @@ export function SpendSection() {
       <div className="grid grid-cols-1 items-center gap-12 md:grid-cols-2 md:gap-20">
         <div className="text-center md:text-left">
           <SectionLabel href="#spend">03_spend</SectionLabel>
-          <h2 className="mt-8 font-medium font-mono text-3xl leading-[1.15] tracking-[-0.02em] md:mt-10 md:text-5xl">
+          <h2 className="mt-8 font-medium text-3xl leading-[1.15] tracking-[-0.02em] [font-family:var(--mk-font-mono)] md:mt-10 md:text-5xl">
             <a href="#spend">Spend. Scan. Done.</a>
           </h2>
           <p className="mt-6 text-[color:var(--mk-text-dim)] text-base leading-relaxed md:text-lg">
@@ -52,7 +52,7 @@ export function SpendSection() {
             wallet. Bitcoin lands instantly at the merchant. No card networks or
             bank intermediaries.
           </p>
-          <div className="mt-6 font-mono text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em]">
+          <div className="mt-6 text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em] [font-family:var(--mk-font-mono)]">
             settled instantly · 0% fee
           </div>
         </div>
@@ -60,22 +60,23 @@ export function SpendSection() {
         <div className="flex justify-center">
           <div
             ref={stageRef}
-            className={`pay-stage relative mx-auto w-full max-w-[320px] rounded-[18px] border border-[color:var(--mk-border)] bg-[linear-gradient(180deg,#070d18_0%,#050a13_100%)] px-[22px] pt-6 pb-[22px] shadow-[0_30px_80px_-30px_rgba(0,0,0,0.8),inset_0_1px_0_rgba(255,255,255,0.04)] [font-family:var(--mk-font-display)] ${playing ? 'playing' : ''}`}
+            data-playing={playing}
+            className="group/playing pay-stage relative mx-auto w-full max-w-[320px] rounded-[18px] border border-[color:var(--mk-border)] bg-[linear-gradient(180deg,#070d18_0%,#050a13_100%)] px-[22px] pt-6 pb-[22px] shadow-[0_30px_80px_-30px_rgba(0,0,0,0.8),inset_0_1px_0_rgba(255,255,255,0.04)] [font-family:var(--mk-font-display)]"
           >
             <div className="mb-[18px] flex items-center justify-between border-[color:var(--mk-border)] border-b pb-[14px] text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em] [font-family:var(--mk-font-mono)]">
               <span>pay with bitcoin</span>
               <span className="text-[color:var(--mk-text)]">pubkey dc</span>
             </div>
 
-            <div className="pay-qr-wrap relative mx-auto aspect-square w-[55%] max-w-[200px] transform-gpu overflow-hidden rounded-lg bg-[#f4f7ff] transition-opacity duration-[360ms]">
+            <div className="pay-qr-wrap relative mx-auto aspect-square w-[55%] max-w-[200px] transform-gpu overflow-hidden rounded-lg bg-[#f4f7ff] transition-opacity duration-[360ms] group-data-[playing=true]/playing:animate-pay-qr-cycle">
               <div className="absolute inset-2.5 overflow-hidden">
                 <QrPattern />
               </div>
               <span
                 aria-hidden="true"
-                className="pay-scanline pointer-events-none absolute right-[6%] left-[6%] h-0.5 bg-[color:var(--mk-brand)] opacity-0 shadow-[0_0_12px_rgba(0,212,255,0.6)]"
+                className="pay-scanline pointer-events-none absolute right-[6%] left-[6%] h-0.5 bg-[color:var(--mk-brand)] opacity-0 shadow-[0_0_12px_rgba(0,212,255,0.6)] group-data-[playing=true]/playing:animate-pay-scan-cycle"
               />
-              <div className="pay-paid pointer-events-none absolute inset-2.5 grid place-items-center bg-[#04080f] opacity-0">
+              <div className="pay-paid pointer-events-none absolute inset-2.5 grid place-items-center bg-[#04080f] opacity-0 group-data-[playing=true]/playing:animate-pay-paid-cycle">
                 <div
                   aria-hidden="true"
                   className="grid h-16 w-16 place-items-center rounded-full border-2 border-[color:var(--mk-brand)] text-[32px] text-[color:var(--mk-brand)]"
@@ -98,10 +99,10 @@ export function SpendSection() {
             </div>
 
             <div className="relative mt-4 h-7 border-[color:var(--mk-border)] border-t pt-[14px] text-[11px] uppercase tracking-[0.12em] [font-family:var(--mk-font-mono)]">
-              <span className="pay-status-scan absolute inset-x-0 top-[14px] bottom-0 grid place-items-center text-[color:var(--mk-text-muted)] opacity-100">
+              <span className="pay-status-scan absolute inset-x-0 top-[14px] bottom-0 grid place-items-center text-[color:var(--mk-text-muted)] opacity-100 group-data-[playing=true]/playing:animate-pay-status-scan">
                 scan to pay
               </span>
-              <span className="pay-status-paid absolute inset-x-0 top-[14px] bottom-0 grid place-items-center text-[color:var(--mk-brand)] opacity-0">
+              <span className="pay-status-paid absolute inset-x-0 top-[14px] bottom-0 grid place-items-center text-[color:var(--mk-brand)] opacity-0 group-data-[playing=true]/playing:animate-pay-status-paid">
                 paid
               </span>
             </div>
diff --git a/apps/web-wallet/app/features/homepage/sections/wallet-section.tsx b/apps/web-wallet/app/features/homepage/sections/wallet-section.tsx
index 3f3c11f36..9c293b880 100644
--- a/apps/web-wallet/app/features/homepage/sections/wallet-section.tsx
+++ b/apps/web-wallet/app/features/homepage/sections/wallet-section.tsx
@@ -20,7 +20,7 @@ export function WalletSection() {
       <div className="grid grid-cols-1 items-start gap-12 md:grid-cols-[42%_1fr] md:items-center md:gap-20">
         <div className="text-center md:text-left">
           <SectionLabel href="#wallet">04_wallet</SectionLabel>
-          <h2 className="mt-8 font-medium font-mono text-3xl leading-[1.15] tracking-[-0.02em] md:hidden">
+          <h2 className="mt-8 font-medium text-3xl leading-[1.15] tracking-[-0.02em] [font-family:var(--mk-font-mono)] md:hidden">
             <a href="#wallet">The most advanced bitcoin wallet.</a>
           </h2>
           <p className="mt-6 text-[color:var(--mk-text-dim)] text-base leading-relaxed md:hidden">
@@ -73,7 +73,7 @@ export function WalletSection() {
         </div>
 
         <div>
-          <h2 className="hidden font-medium font-mono text-3xl leading-[1.15] tracking-[-0.02em] md:block md:text-5xl">
+          <h2 className="hidden font-medium text-3xl leading-[1.15] tracking-[-0.02em] [font-family:var(--mk-font-mono)] md:block md:text-5xl">
             <a href="#wallet">The most advanced bitcoin wallet.</a>
           </h2>
           <p className="mt-6 hidden text-[color:var(--mk-text-dim)] leading-relaxed md:block md:text-lg">
@@ -95,7 +95,7 @@ export function WalletSection() {
                   {s.label}
                 </span>
                 <span
-                  className="spec-leader-line hidden md:block"
+                  className="hidden h-px self-center bg-[length:6px_1px] bg-[radial-gradient(circle,var(--mk-text-muted)_0.6px,transparent_0.6px)] bg-repeat-x opacity-60 [background-position:0_50%] md:block"
                   aria-hidden="true"
                 />
                 <span className="text-right text-[11px] text-[color:var(--mk-text)] uppercase tabular-nums tracking-[0.12em] [font-family:var(--mk-font-mono)]">
diff --git a/apps/web-wallet/app/features/homepage/styles.css b/apps/web-wallet/app/features/homepage/styles.css
deleted file mode 100644
index c386ca753..000000000
--- a/apps/web-wallet/app/features/homepage/styles.css
+++ /dev/null
@@ -1,184 +0,0 @@
-@import url("https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800&display=swap");
-
-/* CSS variables for the marketing palette / fonts.
-   Kept here (rather than in tailwind.css) because they're only used by the
-   homepage and several Tailwind arbitrary-value classes reference them via
-   text-[color:var(--mk-text)] etc. */
-.marketing {
-  --mk-bg: #04080f;
-  --mk-bg-card: rgba(12, 20, 36, 0.5);
-  --mk-text: #e8edf8;
-  --mk-text-dim: #8094b8;
-  --mk-text-muted: #455575;
-  --mk-brand: #00d4ff;
-  --mk-border: rgba(255, 255, 255, 0.06);
-  --mk-border-bright: rgba(255, 255, 255, 0.12);
-  --mk-font-display: "Cabinet Grotesk", -apple-system, BlinkMacSystemFont,
-    sans-serif;
-  --mk-font-mono: "Kode Mono", ui-monospace, monospace;
-  --mk-font-numeric: "Teko", sans-serif;
-
-  font-feature-settings: "ss01", "ss02";
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Map Tailwind's font-mono utility to Kode Mono inside the marketing tree.
-   Without this, font-mono falls back to the default ui-monospace stack and
-   loses the brand monospace face. */
-.marketing .font-mono {
-  font-family: var(--mk-font-mono);
-}
-
-/* Section scroll target — the outer <section> carries the id (e.g. #buy,
-   #send), so a hash navigation lands at the top of the section itself
-   rather than mid-content where the section's label sits. Offset matches
-   the sticky nav's height per breakpoint (-1px so the section's border-t
-   overlays the nav's border-b as a single 1px line). */
-.marketing section[id] {
-  scroll-margin-top: 64px;
-}
-@media (min-width: 768px) {
-  .marketing section[id] {
-    scroll-margin-top: 70px;
-  }
-}
-
-/* Stagger children base animation. Per-child delays are set inline via
-   style={{ animationDelay }} on each child. */
-.marketing .stagger > * {
-  opacity: 0;
-  transform: translateY(8px);
-  animation: mk-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-/* Pay stage cyclical animations — when `.playing`, several descendants
-   animate independently on a single 6s cycle. Easier to leave as CSS
-   because Tailwind has no concept of "ancestor state triggers descendant
-   animation". */
-.marketing .pay-stage.playing .pay-qr-wrap {
-  animation: pay-qr-cycle 6s linear infinite;
-}
-.marketing .pay-stage.playing .pay-scanline {
-  animation: pay-scan-cycle 6s ease-in-out infinite;
-}
-.marketing .pay-stage.playing .pay-paid {
-  animation: pay-paid-cycle 6s ease-in-out infinite;
-}
-.marketing .pay-stage.playing .pay-status-scan {
-  animation: pay-status-scan 6s linear infinite;
-}
-.marketing .pay-stage.playing .pay-status-paid {
-  animation: pay-status-paid 6s linear infinite;
-}
-
-/* Transit card — when the parent .transit-rail.played fires, the card flies.
-   Could push to inline with React state but cleaner to keep the trigger as
-   an ancestor class toggle. */
-.marketing .transit-rail.played .transit-card {
-  animation: transit-fly 1500ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
-}
-
-/* Transit-card decorative inner gradient via ::before — Tailwind can do
-   `before:` with `content-['']` but stacking inset + radial gradient with
-   border-radius is more readable as plain CSS. */
-.marketing .transit-card::before {
-  content: "";
-  position: absolute;
-  inset: 4px;
-  border-radius: 2px;
-  background: linear-gradient(
-    135deg,
-    rgba(0, 212, 255, 0.18),
-    rgba(0, 212, 255, 0.05)
-  );
-}
-
-/* Transit-track dashed midline via ::before — kept as CSS for the same
-   stacking + repeating gradient reason. */
-.marketing .transit-track::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background-image: linear-gradient(
-    to right,
-    var(--mk-border) 50%,
-    transparent 50%
-  );
-  background-size: 8px 1px;
-  transform: translateY(-50%);
-}
-
-/* Buy-stage paid-state animation triggers — ancestor class drives nested
-   element animations + staggered delays. */
-.marketing .buy-stage.paid .cashapp-check,
-.marketing .buy-stage.paid .cashapp-headline,
-.marketing .buy-stage.paid .cashapp-done {
-  animation: confirm-pop 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-.marketing .buy-stage.paid .cashapp-headline {
-  animation-delay: 80ms;
-}
-.marketing .buy-stage.paid .cashapp-done {
-  animation-delay: 160ms;
-}
-
-/* Footer image filter — turn the imported SVG socials into off-white
-   silhouettes. Filter chains are not in Tailwind out of the box. */
-.marketing .footer-social-img {
-  filter: invert(56%) sepia(8%) saturate(750%) hue-rotate(190deg)
-    brightness(95%) contrast(85%);
-  opacity: 0.9;
-  transition: filter 200ms ease, opacity 200ms ease;
-}
-.marketing .footer-social-link:hover .footer-social-img {
-  filter: invert(94%) sepia(5%) saturate(380%) hue-rotate(190deg)
-    brightness(102%) contrast(94%);
-  opacity: 1;
-}
-
-/* Spec-leader dotted line — repeating radial gradient. Tailwind can't
-   express this directly. */
-.marketing .spec-leader-line {
-  height: 1px;
-  background-image: radial-gradient(
-    circle,
-    var(--mk-text-muted) 0.6px,
-    transparent 0.6px
-  );
-  background-size: 6px 1px;
-  background-repeat: repeat-x;
-  background-position: 0 50%;
-  align-self: center;
-  opacity: 0.6;
-}
-
-@media (max-width: 767px) {
-  .marketing .spec-leader-line {
-    display: none;
-  }
-}
-
-/* Specimen-ruler — vertical ruler with repeating ticks. Tailwind doesn't
-   express repeating-linear-gradient cleanly. */
-.marketing .specimen-ruler-line {
-  background-image: repeating-linear-gradient(
-    to bottom,
-    var(--mk-border) 0,
-    var(--mk-border) 1px,
-    transparent 1px,
-    transparent 24px
-  );
-  background-position: right;
-  background-size: 6px 24px;
-  background-repeat: repeat-y;
-}
-
-@media (max-width: 767px) {
-  .marketing .specimen-ruler-line {
-    display: none;
-  }
-}
diff --git a/apps/web-wallet/app/routes/_public.home.tsx b/apps/web-wallet/app/routes/_public.home.tsx
index b64d8425a..0221db766 100644
--- a/apps/web-wallet/app/routes/_public.home.tsx
+++ b/apps/web-wallet/app/routes/_public.home.tsx
@@ -23,6 +23,10 @@ export const links: LinksFunction = () => [
   // bundled JS finishing before the image request even starts. The other
   // 5 cards are pre-decoded post-mount by HeroSection's decodedImagesRef.
   { rel: 'preload', href: pubkeyCard, as: 'image', type: 'image/webp' },
+  {
+    rel: 'stylesheet',
+    href: 'https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800&display=swap',
+  },
 ];
 
 export default function HomePage() {
diff --git a/apps/web-wallet/app/tailwind.css b/apps/web-wallet/app/tailwind.css
index 53f35d542..f78372641 100644
--- a/apps/web-wallet/app/tailwind.css
+++ b/apps/web-wallet/app/tailwind.css
@@ -126,14 +126,19 @@
   --animate-slam: slam 0.4s ease-out both;
   --animate-slide-out-up: slide-out-up 300ms ease-out forwards;
 
-  /* Marketing homepage animation utilities (consumed as Tailwind classes).
-     Other marketing keyframes (mk-fade-up, transit-fly, pay-*, confirm-pop)
-     are referenced directly via `animation:` in features/homepage/styles.css
-     and don't need utility bindings here. */
+  /* Marketing homepage animation utilities (consumed as Tailwind classes). */
   --animate-hero-pixel-cell-out: hero-pixel-cell-out 1ms steps(1, end) forwards;
   --animate-state-slide: state-slide 2000ms cubic-bezier(0.22, 1, 0.36, 1);
   --animate-state-fade: state-fade 1700ms ease-out;
   --animate-cashapp-spin: cashapp-spin 1s linear infinite;
+  --animate-pay-qr-cycle: pay-qr-cycle 6s linear infinite;
+  --animate-pay-scan-cycle: pay-scan-cycle 6s ease-in-out infinite;
+  --animate-pay-paid-cycle: pay-paid-cycle 6s ease-in-out infinite;
+  --animate-pay-status-scan: pay-status-scan 6s linear infinite;
+  --animate-pay-status-paid: pay-status-paid 6s linear infinite;
+  --animate-transit-fly: transit-fly 1500ms cubic-bezier(0.65, 0, 0.35, 1)
+    forwards;
+  --animate-confirm-pop: confirm-pop 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
 /* Custom keyframes */