refactor(homepage): eliminate styles.css for full Tailwind migration

[orveth]

Experimental follow-up to #1050: deletes app/features/homepage/styles.css entirely and moves all rules into Tailwind utilities, JSX attrs, or arbitrary values. Diff is 4 phases (one commit each) for bisectability.

Phases

1. Easy moves — @import → links(), CSS vars → inline style on .marketing div, filter chains/gradients to arbitrary, scroll-margin onto Section component, stagger base into JSX classes.
2. font-mono swap (49→59 usages of [font-family:var(--mk-font-mono)] across 10 files) + transit-card/transit-track ::before pseudo-elements swapped for sibling
   children.
3. Eight ancestor-state animation triggers (.pay-stage.playing × 5, .transit-rail.played × 1, .buy-stage.paid × 2) replaced with data-state attributes + named group-data variants (group/playing, group/played, group/paid). Seven new --animate-* @theme entries added to tailwind.css.
4. styles.css DELETED. Import line removed from marketing-page.tsx.

Verification

Pixel-perfect Chromium-verified at 1280×800, 768×1024, 390×844 against the homepage/v2-redesign baseline. All static regions: 0px diff. Residual diff confined to non-deterministic content (hero card carousel index + buy state-machine cycle phase). All 8 animations runtime-verified to fire with matching durations/easings.

font-mono scoping confirmed safe: outside .marketing tree, font-mono still resolves to default ui-monospace (verified on /signup).

Trade-offs surfaced

• Some className strings get verbose (filter chain on .footer-social-img: [filter:invert(56%)_sepia(8%)_saturate(750%)_hue-rotate(190deg)_brightness(95%)_contrast(85%)]; gradient backgrounds on the spec-leader / specimen-ruler lines).
• CSS variables on .marketing must be cast as React.CSSProperties due to TypeScript not natively typing custom properties.
• ::before decorations become sibling
  children, adding 2 DOM nodes.

Pre-existing bugs surfaced (NOT introduced here, present on both branches)

• @Keyframes confirm-pop is referenced by .buy-stage.paid .cashapp-check / .cashapp-headline but never defined in tailwind.css. Animation property applies but produces no visible motion. To actually animate, add a @Keyframes confirm-pop block to tailwind.css.
• .buy-stage.paid .cashapp-done selector has no matching JSX element (dead CSS, preserved as no-op to match baseline exactly).

iOS caveat

Verification is Chromium-on-Linux only. Arbitrary [filter:...] chains and font-feature settings all use standard CSS WebKit supports, but pixel-identical Safari rendering not confirmed without iOS hardware.

Co-Authored-By: orveth orveth@users.noreply.github.com

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
agicash	Ready	Preview, Comment	Jun 5, 2026 10:17pm

[supabase]

This pull request has been ignored for the connected project hrebgkfhjpkbxpztqqke because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.