Fix interface fidelity: invalid Tailwind classes + restore lost HomeScreen

Side-by-side comparison surfaced that several restyle classes silently
generated NO CSS (confirmed against the compiled .next CSS) — invisible
to tests because unit tests assert class strings, not computed styles,
and visual baselines were captured from the broken build.

Root causes fixed:
- rounded-radius-button (51) / rounded-radius-squircle (3) generated
  nothing → every pill/button/chip was border-radius:0. Tailwind v4 maps
  --radius-button to 'rounded-button', not 'rounded-radius-button'.
  Replaced with rounded-full / rounded-[17px].
- duration-normal/fast/slow (58) generated nothing → transitions had
  easing but 0 duration (snapped). Replaced with the token-arbitrary
  form duration-(--duration-normal). (Also fixed an over-replace that
  double-wrapped var(--duration-normal) inside animate-[…] values.)
- HomeScreen.tsx was the OLD emoji version — the R3 rewrite was never
  committed. Restored: brand Chrome/Slack squircle tiles, coral
  GradientGlyph icons, 56px tiles with press-scale, and the frosted
  glass dock (bg-white/[0.07] backdrop-blur-[40px] saturate-150).

Targeted gaps from the feedback:
- raised surface --color-surface-warm-muted #1f1f1f → #1a1a1a (composer,
  chips, tabs)
- welcome chips: max-w-[422px] gap-3 → centered 2×2 grid
- composer input + rail nav labels → 14px
- DeviceSizeToggle: Full/Tablet/Phone text → lucide monitor/tablet/
  smartphone icons (aria-label keeps the radio names)
- SW cache bumped v1→v2 so redeployed clients purge the stale bundle
- LeftRail drawer: ref-during-render → prev-state pattern (lint)

Compiled CSS now emits .rounded-full, transition-duration:var(--duration-
normal), border-radius:17px, and shadow-dock-capsule. Button/Avatar unit
tests updated to the real class names. 83 unit tests green.

Co-Authored-By: Claude Fable 5 <[email protected]>

frontend/src/components/marketing/Sections.tsx

@@ -28,13 +28,13 @@ export function Hero() {
       <div className="flex flex-wrap justify-center gap-3 pt-8">
         <Link
           href="/login"
-          className="flex h-14 items-center rounded-radius-button bg-marketing-coral px-10 text-xl font-bold text-white transition-colors hover:bg-[#d84a4a]"
+          className="flex h-14 items-center rounded-full bg-marketing-coral px-10 text-xl font-bold text-white transition-colors hover:bg-[#d84a4a]"
         >
           Get started for free
         </Link>
         <a
           href="mailto:[email protected]"
-          className="flex h-14 items-center rounded-radius-button border border-marketing-border bg-white px-10 text-base font-semibold text-[#0f172a] transition-colors hover:bg-[#f1f3f7]"
+          className="flex h-14 items-center rounded-full border border-marketing-border bg-white px-10 text-base font-semibold text-[#0f172a] transition-colors hover:bg-[#f1f3f7]"
         >
           Book a demo
         </a>
@@ -151,7 +151,7 @@ export function CtaBand() {
         </h2>
         <Link
           href="/login"
-          className="flex h-14 items-center rounded-radius-button bg-marketing-coral px-10 text-xl font-bold text-white transition-colors hover:bg-[#d84a4a]"
+          className="flex h-14 items-center rounded-full bg-marketing-coral px-10 text-xl font-bold text-white transition-colors hover:bg-[#d84a4a]"
         >
           Get started for free
         </Link>