chore: Tailwind v4 canonical classes + tsconfig cleanup

apps/web/app/(marketing)/auth/verify/AuthVerifyContent.tsx

@@ -60,7 +60,7 @@ export default function AuthVerifyContent() {
       <div className="max-w-[480px] text-center">
         {!showFallback ? (
           <>
-            <div className="inline-block w-10 h-10 mb-6 border-[3px] border-white/[0.06] border-t-accent rounded-full animate-spin" />
+            <div className="inline-block w-10 h-10 mb-6 border-[3px] border-white/6 border-t-accent rounded-full animate-spin" />
             <h1 className="text-2xl font-semibold text-zinc-50 mb-3">Opening Readied...</h1>
             <p className="text-zinc-400">The app should open automatically. Hang tight.</p>
           </>
@@ -91,7 +91,7 @@ export default function AuthVerifyContent() {
               Open in Readied
             </a>
 
-            <div className="p-6 rounded-xl bg-surface border border-white/[0.06]">
+            <div className="p-6 rounded-xl bg-surface border border-white/6">
               <h2 className="text-base font-medium text-zinc-50 mb-2">
                 Opened this on the wrong device?
               </h2>

apps/web/app/(marketing)/auth/verify/page.tsx

@@ -7,7 +7,7 @@ export default function AuthVerifyPage() {
       fallback={
         <div className="min-h-screen flex items-center justify-center p-4 sm:p-6">
           <div className="text-center">
-            <div className="inline-block w-10 h-10 mb-4 border-[3px] border-white/[0.06] border-t-accent rounded-full animate-spin" />
+            <div className="inline-block w-10 h-10 mb-4 border-[3px] border-white/6 border-t-accent rounded-full animate-spin" />
             <h1 className="text-2xl font-semibold text-[#f4f4f5]">Verifying...</h1>
           </div>
         </div>

apps/web/app/(marketing)/changelog/page.tsx

@@ -86,7 +86,7 @@ export default async function ChangelogPage() {
         {/* Timeline */}
         <div className="relative">
           <div
-            className="absolute left-5 top-0 bottom-0 w-0.5 bg-white/[0.06] rounded-full hidden md:block"
+            className="absolute left-5 top-0 bottom-0 w-0.5 bg-white/6 rounded-full hidden md:block"
             aria-hidden="true"
           ></div>
 
@@ -129,7 +129,7 @@ export default async function ChangelogPage() {
                     {release.changes.map((change, ci) => (
                       <li
                         key={ci}
-                        className={`flex items-baseline gap-4 px-5 sm:px-6 py-3 sm:py-4 transition-colors hover:bg-white/[0.02] ${ci < release.changes.length - 1 ? 'border-b border-border' : ''}`}
+                        className={`flex items-baseline gap-4 px-5 sm:px-6 py-3 sm:py-4 transition-colors hover:bg-white/2 ${ci < release.changes.length - 1 ? 'border-b border-border' : ''}`}
                       >
                         <span
                           className={`font-mono text-xs font-bold uppercase tracking-wider min-w-[76px] shrink-0 ${typeColor(change.type)}`}

apps/web/app/(marketing)/download/page.tsx

@@ -69,7 +69,7 @@ export default async function DownloadPage() {
               <p className="text-lg text-text-secondary mb-5">
                 We&apos;re building something good. Leave your email to get notified.
               </p>
-              <span className="inline-flex items-center px-5 py-2 font-mono text-sm font-semibold rounded-full bg-white/[0.05] border border-border text-text-secondary">
+              <span className="inline-flex items-center px-5 py-2 font-mono text-sm font-semibold rounded-full bg-white/5 border border-border text-text-secondary">
                 Coming Soon
               </span>
               <div className="mt-10">

apps/web/app/(marketing)/pricing/page.tsx

@@ -75,7 +75,7 @@ export default function PricingPage() {
             <ul className="list-none mb-6 space-y-0">
               {plans.free.features.map((f, i) => (
                 <li key={i} className="flex items-center gap-3 py-2 text-sm text-text-secondary">
-                  <span className="flex items-center justify-center shrink-0 w-[22px] h-[22px] rounded-full bg-white/[0.05] text-text-muted">
+                  <span className="flex items-center justify-center shrink-0 w-[22px] h-[22px] rounded-full bg-white/5 text-text-muted">
                     <Check size={14} />
                   </span>
                   <span>{f}</span>
@@ -133,7 +133,7 @@ export default function PricingPage() {
               ))}
             </ul>
 
-            <div className="flex items-center gap-3 px-4 py-3 mb-6 rounded-lg bg-accent/[0.06] border border-accent/10 text-sm text-text-secondary">
+            <div className="flex items-center gap-3 px-4 py-3 mb-6 rounded-lg bg-accent/6 border border-accent/10 text-sm text-text-secondary">
               <Sparkles size={16} className="text-accent" />
               <span>{trialDescription}</span>
             </div>

apps/web/app/(marketing)/shared/SharedNoteContent.tsx

@@ -68,7 +68,7 @@ export default function SharedNoteContent() {
   if (state === 'loading') {
     return (
       <div className="min-h-[60vh] flex flex-col items-center justify-center gap-4 text-center">
-        <div className="w-8 h-8 border-[3px] border-white/[0.06] border-t-accent rounded-full animate-spin" />
+        <div className="w-8 h-8 border-[3px] border-white/6 border-t-accent rounded-full animate-spin" />
         <p className="text-[#a1a1aa]">Loading note...</p>
       </div>
     );
@@ -90,14 +90,14 @@ export default function SharedNoteContent() {
       <h1 className="text-3xl font-bold text-[#f4f4f5] leading-tight tracking-tight mb-2">
         {note?.title || 'Untitled'}
       </h1>
-      <div className="text-sm text-[#71717a] mb-8 pb-6 border-b border-white/[0.06]">
+      <div className="text-sm text-[#71717a] mb-8 pb-6 border-b border-white/6">
         Shared on {note?.createdAt ? formatDate(note.createdAt) : ''}
       </div>
       <div
         className="prose prose-invert max-w-none"
         dangerouslySetInnerHTML={{ __html: note?.content || '' }}
       />
-      <footer className="mt-12 pt-6 border-t border-white/[0.06] text-center text-sm text-[#71717a]">
+      <footer className="mt-12 pt-6 border-t border-white/6 text-center text-sm text-[#71717a]">
         Shared with{' '}
         <a href="https://readied.app" className="text-accent hover:underline">
           Readied

apps/web/app/(marketing)/shared/page.tsx

@@ -12,7 +12,7 @@ export default function SharedNotePage() {
     <Suspense
       fallback={
         <div className="min-h-[60vh] flex flex-col items-center justify-center gap-4 text-center">
-          <div className="w-8 h-8 border-[3px] border-white/[0.06] border-t-accent rounded-full animate-spin" />
+          <div className="w-8 h-8 border-[3px] border-white/6 border-t-accent rounded-full animate-spin" />
           <p className="text-[#a1a1aa]">Loading note...</p>
         </div>
       }

apps/web/app/(marketing)/subscription/cancel/page.tsx

@@ -34,7 +34,7 @@ export default function SubscriptionCancelPage() {
             </p>
             <Link
               href="/download"
-              className="inline-flex items-center gap-2 px-6 py-3 rounded-lg border border-white/[0.08] text-[#a1a1aa] font-medium text-sm transition-colors hover:bg-white/5 hover:text-white"
+              className="inline-flex items-center gap-2 px-6 py-3 rounded-lg border border-white/8 text-[#a1a1aa] font-medium text-sm transition-colors hover:bg-white/5 hover:text-white"
             >
               <Download size={18} />
               Download Free

apps/web/app/(marketing)/subscription/success/page.tsx

@@ -71,7 +71,7 @@ export default function SubscriptionSuccessPage() {
         </div>
 
         {/* Pro features info */}
-        <div className="my-12 rounded-xl bg-accent/[0.06] border border-accent/20 p-6 sm:p-8 text-left">
+        <div className="my-12 rounded-xl bg-accent/6 border border-accent/20 p-6 sm:p-8 text-left">
           <h3 className="text-lg sm:text-xl font-bold text-[#f4f4f5] text-center mb-6">
             What&apos;s included in Pro
           </h3>

apps/web/app/globals.css

@@ -148,7 +148,7 @@ nav[aria-label='Breadcrumb'] a:hover {
 /* Marketing page utilities */
 @layer components {
   .glass {
-    @apply bg-zinc-950/80 backdrop-blur-xl border border-white/[0.06];
+    @apply bg-zinc-950/80 backdrop-blur-xl border border-white/6;
   }
 
   .glass-card {
@@ -161,7 +161,7 @@ nav[aria-label='Breadcrumb'] a:hover {
   }
 
   .gradient-text {
-    @apply bg-clip-text text-transparent bg-gradient-to-r from-violet-400 to-indigo-400;
+    @apply bg-clip-text text-transparent bg-linear-to-r from-violet-400 to-indigo-400;
   }
 
   .section-label {

apps/web/app/not-found.tsx

@@ -36,40 +36,40 @@ export default function NotFound() {
                 </Link>
                 <Link
                   href="/faq"
-                  className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg border border-white/[0.08] text-[#a1a1aa] font-medium text-sm transition-colors hover:bg-white/5 hover:text-white"
+                  className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg border border-white/8 text-[#a1a1aa] font-medium text-sm transition-colors hover:bg-white/5 hover:text-white"
                 >
                   View FAQ
                 </Link>
               </div>
 
-              <div className="pt-6 border-t border-white/[0.06]">
+              <div className="pt-6 border-t border-white/6">
                 <span className="block font-mono text-xs font-semibold uppercase tracking-[0.1em] text-[#71717a] mb-3">
                   Or try these:
                 </span>
                 <div className="flex flex-wrap justify-center gap-2">
                   <Link
                     href="/download"
-                    className="px-3 py-2 text-sm text-[#a1a1aa] border border-white/[0.08] rounded-lg transition-colors hover:text-accent hover:bg-white/5"
+                    className="px-3 py-2 text-sm text-[#a1a1aa] border border-white/8 rounded-lg transition-colors hover:text-accent hover:bg-white/5"
                   >
                     Download
                   </Link>
                   <Link
                     href="/pricing"
-                    className="px-3 py-2 text-sm text-[#a1a1aa] border border-white/[0.08] rounded-lg transition-colors hover:text-accent hover:bg-white/5"
+                    className="px-3 py-2 text-sm text-[#a1a1aa] border border-white/8 rounded-lg transition-colors hover:text-accent hover:bg-white/5"
                   >
                     Pricing
                   </Link>
                   <Link
                     href="/changelog"
-                    className="px-3 py-2 text-sm text-[#a1a1aa] border border-white/[0.08] rounded-lg transition-colors hover:text-accent hover:bg-white/5"
+                    className="px-3 py-2 text-sm text-[#a1a1aa] border border-white/8 rounded-lg transition-colors hover:text-accent hover:bg-white/5"
                   >
                     Changelog
                   </Link>
                   <a
                     href="https://medium.com/@tomymaritano"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="px-3 py-2 text-sm text-[#a1a1aa] border border-white/[0.08] rounded-lg transition-colors hover:text-accent hover:bg-white/5"
+                    className="px-3 py-2 text-sm text-[#a1a1aa] border border-white/8 rounded-lg transition-colors hover:text-accent hover:bg-white/5"
                   >
                     Blog
                   </a>

apps/web/components/Footer.tsx

@@ -68,7 +68,7 @@ export default function Footer() {
     <footer className="relative mt-auto">
       {/* Gradient separator */}
       <div className="mx-auto max-w-4xl px-4">
-        <div className="h-px bg-gradient-to-r from-transparent via-white/[0.08] to-transparent" />
+        <div className="h-px bg-linear-to-r from-transparent via-white/8 to-transparent" />
       </div>
 
       <div className="mx-auto max-w-4xl px-4 pb-8 pt-12">
@@ -130,7 +130,7 @@ export default function Footer() {
 
         {/* Bottom bar */}
         <div className="mt-10 flex items-center justify-center sm:justify-start">
-          <div className="h-px w-full bg-gradient-to-r from-transparent via-white/[0.06] to-transparent sm:hidden" />
+          <div className="h-px w-full bg-linear-to-r from-transparent via-white/6 to-transparent sm:hidden" />
           <span className="text-[11px] text-text-muted">
             &copy; {year} Readied. Built with &hearts; in Argentina.
           </span>

apps/web/components/NavDropdown.tsx

@@ -49,7 +49,7 @@ export default function NavDropdown({ label, items }: NavDropdownProps) {
             leaveTo="opacity-0 translate-y-1"
           >
             <PopoverPanel className="absolute left-1/2 z-50 mt-3 w-56 -translate-x-1/2 transform">
-              <div className="overflow-hidden rounded-xl border border-white/[0.08] bg-zinc-900/95 backdrop-blur-xl shadow-2xl">
+              <div className="overflow-hidden rounded-xl border border-white/8 bg-zinc-900/95 backdrop-blur-xl shadow-2xl">
                 <div className="py-1">
                   {items.map(item => {
                     const className =

apps/web/components/Navbar.tsx

@@ -94,7 +94,7 @@ export default function Navbar() {
     <header className="fixed top-0 inset-x-0 z-50 flex justify-center pt-4 px-4">
       {/* Floating pill navbar */}
       <nav
-        className="flex w-full max-w-4xl items-center justify-between gap-6 rounded-2xl border border-white/[0.08] bg-zinc-950/70 px-5 py-2.5 backdrop-blur-xl shadow-[0_0_30px_-10px_rgba(0,0,0,0.5)]"
+        className="flex w-full max-w-4xl items-center justify-between gap-6 rounded-2xl border border-white/8 bg-zinc-950/70 px-5 py-2.5 backdrop-blur-xl shadow-[0_0_30px_-10px_rgba(0,0,0,0.5)]"
         aria-label="Main navigation"
       >
         {/* Logo */}
@@ -137,7 +137,7 @@ export default function Navbar() {
             </button>
 
             <div className="invisible absolute left-1/2 z-50 w-52 -translate-x-1/2 opacity-0 transition-all duration-200 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100">
-              <div className="overflow-hidden rounded-xl border border-white/[0.08] bg-zinc-900/95 backdrop-blur-xl shadow-2xl">
+              <div className="overflow-hidden rounded-xl border border-white/8 bg-zinc-900/95 backdrop-blur-xl shadow-2xl">
                 <div className="py-1">
                   {docsItems.map(item => {
                     const cls =
@@ -176,7 +176,7 @@ export default function Navbar() {
         {/* Desktop: Download button with Apple icon */}
         <Link
           href="/download"
-          className="hidden items-center gap-2 rounded-lg border border-white/[0.12] bg-white/[0.06] px-4 py-1.5 text-[13px] font-medium text-white transition-all hover:bg-white/[0.1] hover:border-white/[0.18] md:inline-flex"
+          className="hidden items-center gap-2 rounded-lg border border-white/12 bg-white/6 px-4 py-1.5 text-[13px] font-medium text-white transition-all hover:bg-white/10 hover:border-white/18 md:inline-flex"
         >
           <Apple className="h-3.5 w-3.5" />
           Download
@@ -220,7 +220,7 @@ export default function Navbar() {
                 <Link
                   href="/download"
                   onClick={closeSheet}
-                  className="flex items-center justify-center gap-2 rounded-lg border border-white/[0.12] bg-white/[0.06] px-4 py-3 text-base font-medium text-white transition-colors hover:bg-white/[0.1]"
+                  className="flex items-center justify-center gap-2 rounded-lg border border-white/12 bg-white/6 px-4 py-3 text-base font-medium text-white transition-colors hover:bg-white/10"
                 >
                   <Apple className="h-4 w-4" />
                   Download for Mac

apps/web/components/NewsletterForm.tsx

@@ -87,7 +87,7 @@ export default function NewsletterForm({ compact = false }: NewsletterFormProps)
             placeholder="your@email.com"
             required
             disabled={status === 'loading'}
-            className="min-w-0 flex-1 rounded-lg border border-white/[0.08] bg-base px-4 py-2.5 text-sm text-white placeholder-[#71717a] transition-colors focus:border-accent/50 focus:outline-none focus:ring-1 focus:ring-accent/50 disabled:opacity-50"
+            className="min-w-0 flex-1 rounded-lg border border-white/8 bg-base px-4 py-2.5 text-sm text-white placeholder-[#71717a] transition-colors focus:border-accent/50 focus:outline-none focus:ring-1 focus:ring-accent/50 disabled:opacity-50"
           />
           <button
             type="submit"

apps/web/components/PluginFilter.tsx

@@ -80,13 +80,13 @@ export default function PluginFilter({ plugins }: PluginFilterProps) {
             placeholder="Search plugins..."
             value={search}
             onChange={e => setSearch(e.target.value)}
-            className="w-full rounded-lg border border-white/[0.08] bg-surface px-3 py-2.5 pl-10 text-sm text-[#f4f4f5] placeholder-[#71717a] outline-none transition-colors focus:border-accent"
+            className="w-full rounded-lg border border-white/8 bg-surface px-3 py-2.5 pl-10 text-sm text-[#f4f4f5] placeholder-[#71717a] outline-none transition-colors focus:border-accent"
           />
         </div>
         <select
           value={sort}
           onChange={e => setSort(e.target.value as SortOption)}
-          className="rounded-lg border border-white/[0.08] bg-surface px-3 py-2.5 text-sm text-[#a1a1aa] outline-none transition-colors focus:border-accent cursor-pointer"
+          className="rounded-lg border border-white/8 bg-surface px-3 py-2.5 text-sm text-[#a1a1aa] outline-none transition-colors focus:border-accent cursor-pointer"
         >
           <option value="name">Sort: A-Z</option>
           <option value="popular">Sort: Popular</option>
@@ -117,7 +117,7 @@ export default function PluginFilter({ plugins }: PluginFilterProps) {
               className={`inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${
                 isActive
                   ? 'bg-accent text-white'
-                  : 'border border-white/[0.08] bg-surface text-[#a1a1aa] hover:bg-white/5 hover:text-white'
+                  : 'border border-white/8 bg-surface text-[#a1a1aa] hover:bg-white/5 hover:text-white'
               }`}
             >
               {category.charAt(0).toUpperCase() + category.slice(1)}
@@ -176,7 +176,7 @@ export default function PluginFilter({ plugins }: PluginFilterProps) {
               </p>
 
               <div className="mb-3 group relative">
-                <pre className="rounded-lg bg-zinc-950 border border-white/[0.06] px-3 py-2 text-xs font-mono text-[#a1a1aa] overflow-x-auto">
+                <pre className="rounded-lg bg-zinc-950 border border-white/6 px-3 py-2 text-xs font-mono text-[#a1a1aa] overflow-x-auto">
                   <code>{installCmd}</code>
                 </pre>
                 <button