From a1bb9e97e18f96dbdf2352f0fa2a47404f712f90 Mon Sep 17 00:00:00 2001
From: Sean <sean@goforward.group>
Date: Mon, 30 Mar 2026 06:51:31 -0400
Subject: [PATCH] fix: replace opacity-85 no-op and inline gap styles with
 Tailwind classes

---
 app/page.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 6b5538f..01790ad 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -122,7 +122,7 @@ export default function HomePage() {
 
         {/* ── 3. How It Works ── */}
         <section className="mx-auto max-w-5xl px-4 py-[72px]">
-          <p className="mb-3 text-center text-[10px] font-bold uppercase tracking-[0.25em] text-amber-400 opacity-85">
+          <p className="mb-3 text-center text-[10px] font-bold uppercase tracking-[0.25em] text-amber-400 opacity-[85%]">
             THE PROCESS
           </p>
           <h2 className="mb-1.5 text-center text-[30px] font-bold tracking-[-0.025em] text-white">
@@ -133,8 +133,7 @@ export default function HomePage() {
           </p>
 
           <div
-            className="mx-auto grid max-w-[840px] grid-cols-1 overflow-hidden rounded-xl border border-zinc-900 bg-zinc-900 sm:grid-cols-3"
-            style={{ gap: "2px" }}
+            className="mx-auto grid max-w-[840px] grid-cols-1 gap-[2px] overflow-hidden rounded-xl border border-zinc-900 bg-zinc-900 sm:grid-cols-3"
           >
             {[
               {
@@ -192,7 +191,7 @@ export default function HomePage() {
 
         {/* ── 5. Feature Cards ── */}
         <section className="mx-auto max-w-5xl px-4 py-[72px]">
-          <p className="mb-3 text-center text-[10px] font-bold uppercase tracking-[0.25em] text-amber-400 opacity-85">
+          <p className="mb-3 text-center text-[10px] font-bold uppercase tracking-[0.25em] text-amber-400 opacity-[85%]">
             WHAT YOU GET
           </p>
           <h2 className="mb-2 text-center text-[30px] font-bold tracking-[-0.025em] text-white">
@@ -203,8 +202,7 @@ export default function HomePage() {
           </p>
 
           <div
-            className="mx-auto grid max-w-[900px] grid-cols-1 overflow-hidden rounded-xl border border-zinc-900 bg-zinc-900 sm:grid-cols-2 lg:grid-cols-3"
-            style={{ gap: "1px" }}
+            className="mx-auto grid max-w-[900px] grid-cols-1 gap-[1px] overflow-hidden rounded-xl border border-zinc-900 bg-zinc-900 sm:grid-cols-2 lg:grid-cols-3"
           >
             {(
               [