From b11b9ad35da73205477993d62e22586f80cab90d Mon Sep 17 00:00:00 2001
From: fynks <75840152+fynks@users.noreply.github.com>
Date: Sat, 6 Sep 2025 19:59:20 +0500
Subject: [PATCH] hopefully fixed all bugs

---
 dist/css/styles.css | 1400 ++++++++++++++++++-------------------------
 1 file changed, 594 insertions(+), 806 deletions(-)

diff --git a/dist/css/styles.css b/dist/css/styles.css
index 45c6d5b..c29a39f 100644
--- a/dist/css/styles.css
+++ b/dist/css/styles.css
@@ -1,6 +1,6 @@
-/* ===== 1. CSS VARIABLES & THEMING ===== */
+/* Design tokens */
 :root {
-  /* Core Colors */
+  /* Brand & semantic */
   --primary: #6366f1;
   --primary-hover: #4f46e5;
   --primary-light: #a5b4fc;
@@ -10,7 +10,8 @@
   --warning: #66512e;
   --error: #ef4444;
   --info: #2c6ace;
-  /* Grayscale */
+
+  /* Gray scale */
   --gray-50: #f8fafc;
   --gray-100: #f1f5f9;
   --gray-200: #e2e8f0;
@@ -21,33 +22,34 @@
   --gray-700: #334155;
   --gray-800: #1e293b;
   --gray-900: #0f172a;
-  /* Text Colors */
+
+  /* Text & surfaces */
   --text-primary: var(--gray-900);
   --text-secondary: var(--gray-600);
   --text-tertiary: var(--gray-500);
   --text-muted: var(--gray-400);
-  /* Background Colors */
   --bg-primary: #fff;
   --bg-secondary: var(--gray-50);
   --bg-tertiary: var(--gray-100);
   --bg-elevated: #fff;
-  /* Borders */
+
+  /* Borders & focus */
   --border-primary: var(--gray-200);
   --border-secondary: var(--gray-300);
   --border-focus: var(--primary);
-  /* Layout */
+
+  /* Layout scales */
   --container-max: 1400px;
-  --header-height: 5rem;
   --content-max: 1200px;
-  /* Fluid layout spacing additions - Adjusted clamp min value for small screens */
+  --header-height: 5rem;
   --section-pad-y: clamp(2rem, 6vw, 4.5rem);
   --section-pad-y-tight: clamp(1.5rem, 4vw, 3rem);
-  --container-x: clamp(0.75rem, 3.2vw, 2.5rem);
-  /* Reduced min padding */
-  /* Spacing (using CSS custom properties for consistency) */
-  --space-xs: 0.25rem;
-  --space-sm: 0.5rem;
-  --space-md: 0.75rem;
+  --container-x: clamp(.75rem, 3.2vw, 2.5rem);
+
+  /* Spacing */
+  --space-xs: .25rem;
+  --space-sm: .5rem;
+  --space-md: .75rem;
   --space-lg: 1rem;
   --space-xl: 1.25rem;
   --space-2xl: 1.5rem;
@@ -57,9 +59,10 @@
   --space-6xl: 4rem;
   --space-7xl: 5rem;
   --space-8xl: 6rem;
-  /* Typography */
-  --text-xs: 0.75rem;
-  --text-sm: 0.875rem;
+
+  /* Type scale */
+  --text-xs: .75rem;
+  --text-sm: .875rem;
   --text-base: 1rem;
   --text-lg: 1.125rem;
   --text-xl: 1.25rem;
@@ -68,41 +71,48 @@
   --text-4xl: 2.25rem;
   --text-5xl: 3rem;
   --text-6xl: 3.75rem;
-  /* Font Weights */
+
+  /* Weights */
   --font-light: 300;
   --font-normal: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;
   --font-extrabold: 800;
+
   /* Radius */
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
+  --radius-sm: .25rem;
+  --radius-md: .5rem;
+  --radius-lg: .75rem;
   --radius-xl: 1rem;
   --radius-2xl: 1.5rem;
   --radius-full: 9999px;
-  /* Shadows */
-  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --shadow-focus: 0 0 0 3px rgb(99 102 241 / 0.15);
-  /* Transitions */
-  --transition-fast: 0.15s ease;
-  --transition-normal: 0.3s ease;
-  --transition-slow: 0.5s ease;
-  /* Accents */
-  --glow: 0 0 0 8px rgb(99 102 241 / 0.08);
-  --footer-gradient: radial-gradient(1200px 500px at 80% 10%, rgb(99 102 241 / 0.08), transparent 60%),
-    radial-gradient(800px 400px at 10% 20%, rgb(139 92 246 / 0.07), transparent 60%);
+
+  /* Elevation */
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
+  --shadow-focus: 0 0 0 3px rgb(99 102 241 / .15);
+
+  /* Motion */
+  --transition-fast: .15s ease;
+  --transition-normal: .3s ease;
+  --transition-slow: .5s ease;
+
+  /* Effects */
+  --glow: 0 0 0 8px rgb(99 102 241 / .08);
+  --footer-gradient:
+    radial-gradient(1200px 500px at 80% 10%, rgb(99 102 241 / .08), transparent 60%),
+    radial-gradient(800px 400px at 10% 20%, rgb(139 92 246 / .07), transparent 60%);
+
+  color-scheme: light;
+  /* improves native form controls */
 }
 
-/* Dark Theme Variables */
 [data-theme="dark"] {
   --text-primary: var(--gray-100);
-  /* Slightly lighter than gray-50 for better contrast on dark bg */
   --text-secondary: var(--gray-300);
   --text-tertiary: var(--gray-400);
   --text-muted: var(--gray-500);
@@ -115,15 +125,40 @@
   --primary: #818cf8;
   --primary-hover: #a5b4fc;
   --primary-light: #c7d2fe;
-  /* Slightly adjusted shadows for better visibility in dark mode */
-  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.5);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);
-  --shadow-focus: 0 0 0 3px rgb(129 140 248 / 0.25);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .5), 0 1px 2px -1px rgb(0 0 0 / .5);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .5), 0 2px 4px -2px rgb(0 0 0 / .5);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .5), 0 8px 10px -6px rgb(0 0 0 / .5);
+  --shadow-focus: 0 0 0 3px rgb(129 140 248 / .25);
+  color-scheme: dark;
 }
 
-/* ===== 2. RESET & BASE STYLES ===== */
+/* Auto-dark defaults if no data-theme attribute is set */
+@media (prefers-color-scheme:dark) {
+  :root:not([data-theme]) {
+    --text-primary: var(--gray-100);
+    --text-secondary: var(--gray-300);
+    --text-tertiary: var(--gray-400);
+    --text-muted: var(--gray-500);
+    --bg-primary: var(--gray-900);
+    --bg-secondary: var(--gray-800);
+    --bg-tertiary: var(--gray-700);
+    --bg-elevated: var(--gray-800);
+    --border-primary: var(--gray-700);
+    --border-secondary: var(--gray-600);
+    --primary: #818cf8;
+    --primary-hover: #a5b4fc;
+    --primary-light: #c7d2fe;
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .5), 0 1px 2px -1px rgb(0 0 0 / .5);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .5), 0 2px 4px -2px rgb(0 0 0 / .5);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .5), 0 8px 10px -6px rgb(0 0 0 / .5);
+    --shadow-focus: 0 0 0 3px rgb(129 140 248 / .25);
+    color-scheme: dark;
+  }
+}
+
+/* Base */
 *,
 *::before,
 *::after {
@@ -135,7 +170,6 @@ html {
   font-size: 16px;
   line-height: 1.6;
   -webkit-text-size-adjust: 100%;
-  /* Fix 1: Prevent horizontal overflow on html */
   overflow-x: hidden;
 }
 
@@ -149,18 +183,12 @@ body {
   text-rendering: optimizeLegibility;
   min-height: 100vh;
   margin: 0;
-  /* Fix 1: Prevent horizontal overflow on body */
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
-}
-
-svg {
-  max-width: 100%;
-  height: auto;
 }
 
+svg,
 img,
 video,
 canvas {
@@ -177,13 +205,17 @@ a:hover {
   color: var(--primary-hover);
 }
 
-/* Generic focus outline for robustness */
+/* Headings improve wrapping */
+:where(h1, h2, h3, h4, h5, h6) {
+  text-wrap: balance;
+}
+
+/* Focus visibility */
 :focus {
   outline: 2px solid var(--border-focus);
   outline-offset: 2px;
 }
 
-/* Enhanced focus styles for keyboard users - Improved logic */
 :focus:not(:focus-visible) {
   outline: none;
 }
@@ -191,10 +223,10 @@ a:hover {
 :focus-visible {
   outline: 2px solid var(--primary);
   outline-offset: 2px;
-  box-shadow: 0 0 0 4px rgba(99 102 241 / 0.25);
+  box-shadow: var(--shadow-focus);
 }
 
-/* Accessibility */
+/* Skip link */
 .skip-link {
   position: absolute;
   left: -9999px;
@@ -216,16 +248,14 @@ a:hover {
   border: 2px solid var(--border-focus);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
-  z-index: 1000;
-  /* Increased z-index for skip link */
+  z-index: 1000
 }
 
-/* Layout */
+/* Layout containers */
 .page-wrapper {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  /* Fix 1: Prevent horizontal overflow on wrapper */
   overflow-x: hidden;
 }
 
@@ -233,30 +263,28 @@ a:hover {
   max-width: var(--container-max);
   margin-inline: auto;
   padding-inline: var(--container-x);
-  width: 100%;
-  /* Crucial for preventing overflow */
+  width: 100%
 }
 
 .content-container {
   max-width: var(--content-max);
-  margin: 0 auto;
-  width: 100%;
-  /* Ensure it also respects width */
+  margin-inline: auto;
+  width: 100%
 }
 
-/* ===== 3. HEADER & NAVIGATION ===== */
+/* Header */
 .site-header {
   position: sticky;
   top: 0;
   z-index: 100;
-  background: rgba(255, 255, 255, 0.85);
+  background: rgba(255, 255, 255, .85);
   backdrop-filter: blur(16px) saturate(180%);
   border-bottom: 1px solid var(--border-primary);
   height: var(--header-height);
 }
 
 [data-theme="dark"] .site-header {
-  background: rgba(15, 23, 42, 0.85);
+  background: rgba(15, 23, 42, .85);
 }
 
 .header-content {
@@ -264,26 +292,22 @@ a:hover {
   align-items: center;
   justify-content: space-between;
   position: relative;
-  /* Important for containing absolutely positioned children */
   height: var(--header-height);
   gap: var(--space-4xl);
 }
 
-/* Keep header content compact on narrow laptops */
-@media (max-width: 1200px) {
+@media (max-width:1200px) {
   .header-content {
-    gap: var(--space-2xl);
+    gap: var(--space-2xl)
   }
 }
 
-/* Tighten header layout on small screens to avoid control clipping */
-@media (max-width: 600px) {
+@media (max-width:600px) {
   .header-content {
-    gap: var(--space-md);
+    gap: var(--space-md)
   }
 }
 
-/* Header right aligned actions */
 .header-actions {
   display: flex;
   align-items: center;
@@ -291,16 +315,21 @@ a:hover {
   margin-left: auto;
 }
 
-@media (max-width: 900px) {
+@media (max-width:900px) {
   .header-actions {
-    gap: var(--space-md);
+    gap: var(--space-md)
+  }
+}
+
+@media (max-width:600px) {
+  .header-actions {
+    gap: var(--space-sm)
   }
 }
 
 .site-title {
   display: flex;
   flex-shrink: 0;
-  /* Prevent shrinking by default */
   align-items: center;
   gap: var(--space-md);
   font-size: var(--text-xl);
@@ -311,35 +340,34 @@ a:hover {
   border-radius: var(--radius-lg);
   transition: all var(--transition-fast);
   min-width: 0;
-  white-space: nowrap;
-  /* Keep title on one line when possible */
+  white-space: nowrap
 }
 
-@media (max-width: 900px) {
+@media (max-width:900px) {
   .site-title {
-        flex: 1 1 auto;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
+  }
 }
 
-@media (max-width: 600px) {
+@media (max-width:600px) {
   .site-title {
     font-size: var(--text-base);
     padding: var(--space-xs) var(--space-sm);
-    gap: var(--space-sm);
+    gap: var(--space-sm)
   }
 
   .logo-icon {
     width: 24px;
-    height: 24px;
+    height: 24px
   }
 }
 
-@media (max-width: 380px) {
+@media (max-width:380px) {
   .site-title {
-    font-size: 0.95rem;
+    font-size: .95rem
   }
 }
 
@@ -360,54 +388,38 @@ a:hover {
   transform: rotate(-5deg) scale(1.1);
 }
 
-/* Main Navigation (Desktop) */
 .header-nav {
   display: flex;
   align-items: center;
   gap: var(--space-xs);
-  /* Fix for potential flexbox glitches with absolutely positioned children */
   position: relative;
   z-index: 1;
-  /* Ensure it's above other header content but below mobile nav */
-}
-
-.header-nav {
   flex: 1 1 auto;
   min-width: 0;
 }
 
-@media (max-width: 1100px) {
+@media (max-width:1100px) {
   .nav-link {
     padding: var(--space-sm) var(--space-lg);
-    font-size: 0.9rem;
+    font-size: .9rem
   }
 }
 
 .header-nav .nav-link:focus-visible {
-  @media (max-width: 600px) {
-    .header-actions {
-      gap: var(--space-sm);
-    }
-  }
-
   box-shadow: var(--glow);
 }
 
-.header-nav .nav-link.active::before {
-  width: 90%;
-}
-
 .nav-link {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    padding: var(--space-md) var(--space-xl);
-    font-size: var(--text-sm);
-    font-weight: var(--font-medium);
-    color: var(--text-secondary);
-    border-radius: var(--radius-lg);
-    white-space: nowrap; /* Keep nav items on single line */
-    transition: all var(--transition-fast);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-md) var(--space-xl);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+  border-radius: var(--radius-lg);
+  white-space: nowrap;
+  transition: all var(--transition-fast);
 }
 
 .nav-link::before {
@@ -443,7 +455,10 @@ a:hover {
   color: var(--text-primary);
 }
 
-/* Dark Mode Toggle */
+.header-nav .nav-link.active::before {
+  width: 90%;
+}
+
 .dark-mode-toggle {
   display: flex;
   align-items: center;
@@ -455,22 +470,21 @@ a:hover {
   background: var(--bg-primary);
   color: var(--text-primary);
   flex-shrink: 0;
-  /* Prevent shrinking */
   cursor: pointer;
   transition: all var(--transition-fast);
 }
 
-@media (max-width: 600px) {
+@media (max-width:600px) {
   .dark-mode-toggle {
     width: 40px;
-    height: 40px;
+    height: 40px
   }
 }
 
-@media (max-width: 380px) {
+@media (max-width:380px) {
   .dark-mode-toggle {
     width: 36px;
-    height: 36px;
+    height: 36px
   }
 }
 
@@ -487,7 +501,6 @@ a:hover {
   transition: opacity var(--transition-fast);
 }
 
-/* Light mode: show sun, hide moon */
 .sun-icon {
   display: block !important;
 }
@@ -496,7 +509,6 @@ a:hover {
   display: none !important;
 }
 
-/* Dark mode: hide sun, show moon */
 [data-theme="dark"] .sun-icon {
   display: none !important;
 }
@@ -505,7 +517,6 @@ a:hover {
   display: block !important;
 }
 
-/* Mobile Navigation Toggle */
 .nav-toggle {
   display: none;
   flex-direction: column;
@@ -520,22 +531,20 @@ a:hover {
   position: relative;
   transition: all var(--transition-fast);
   flex-shrink: 0;
-  /* Prevent shrinking */
-  z-index: 110;
-  /* Ensure it's clickable above other elements */
+  z-index: 110
 }
 
-@media (max-width: 600px) {
+@media (max-width:600px) {
   .nav-toggle {
     width: 40px;
-    height: 40px;
+    height: 40px
   }
 }
 
-@media (max-width: 380px) {
+@media (max-width:380px) {
   .nav-toggle {
     width: 36px;
-    height: 36px;
+    height: 36px
   }
 }
 
@@ -561,44 +570,36 @@ a:hover {
   transform: translateY(-7px) rotate(-45deg);
 }
 
-/* Mobile Navigation Overlay */
 .nav-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, .4);
   backdrop-filter: blur(2px);
   z-index: 90;
-  /* Below the nav menu */
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.3s ease;
-  pointer-events: none;
-  /* Prevent interaction when hidden */
+  transition: opacity .3s ease;
+  pointer-events: none
 }
 
 .nav-open #navOverlay {
   opacity: 1;
   visibility: visible;
-  pointer-events: auto;
-  /* Allow interaction when visible */
+  pointer-events: auto
 }
 
-/* Mobile Styles (Critical Fix Area) */
-@media (max-width: 900px) {
+/* Mobile nav */
+@media (max-width:900px) {
   .nav-toggle {
-    display: inline-flex;
-    /* Show the toggle button */
+    display: inline-flex
   }
 
-  /* Hide desktop navigation links by default on mobile */
   .header-nav {
-    display: none;
+    display: none
   }
 
-  /* Active state for mobile navigation - Show the menu */
   .nav-open .header-nav {
     display: flex;
-    /* Make it visible */
     position: fixed;
     top: var(--header-height);
     right: 0;
@@ -613,65 +614,49 @@ a:hover {
     max-height: calc(100vh - var(--header-height));
     overflow-y: auto;
     overscroll-behavior: contain;
-    /* Prevent scrolling the body when menu reaches top/bottom */
-    /* Critical Fix: Use translate3d for hardware acceleration */
     transform: translate3d(100%, 0, 0);
-    transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
+    transition: transform .4s cubic-bezier(.65, .05, .36, 1);
     z-index: 120;
-    /* Above overlay */
-    /* Isolate the animation context */
-    /* Removed will-change for potential performance issues on the nav itself */
-    backdrop-filter: saturate(180%) blur(8px);
+    backdrop-filter: saturate(180%) blur(8px)
   }
 
-  /* Active state for the menu being open - Simplified selector */
   .nav-open .header-nav {
-    transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0)
   }
 
-  /* Prevent body scroll when menu is open */
   body.nav-open {
-    overflow: hidden;
+    overflow: hidden
   }
 
-  /* Style links for mobile */
   .nav-open .nav-link {
     font-size: var(--text-base);
     padding: var(--space-md) var(--space-lg);
     width: 100%;
-    text-align: left;
+    text-align: left
   }
 
-  /* Hide the underline pseudo-element on mobile */
   .nav-open .nav-link::before {
-    display: none;
+    display: none
   }
 
-  /* Ensure the dark mode toggle is correctly placed in the header flex container */
   .dark-mode-toggle {
     display: flex;
     flex: 0 0 auto;
-    /* Don't grow or shrink, keep original size */
     width: 44px;
     height: 44px;
     order: 3;
-    /* Move it to the end if needed by layout */
     align-self: center;
-    /* Align within the flex line */
-    z-index: 110;
-    /* Ensure it's clickable */
+    z-index: 110
   }
 
-  /* Disable transitions initially to prevent glitches on page load */
   body:not(.js-ready) .header-nav,
   body:not(.js-ready) .nav-toggle-bar,
   body:not(.js-ready) .nav-overlay {
-    transition: none !important;
+    transition: none !important
   }
 }
 
-/* ===== 4. MAIN CONTENT SECTIONS ===== */
-/* Hero Section */
+/* Hero */
 .hero-section {
   position: relative;
   padding: var(--space-8xl) 0 var(--space-7xl);
@@ -684,14 +669,14 @@ a:hover {
   position: absolute;
   inset: 0;
   background:
-    radial-gradient(circle at 30% 20%, rgb(99 102 241 / 0.08) 0%, transparent 50%),
-    radial-gradient(circle at 70% 80%, rgb(139 92 246 / 0.05) 0%, transparent 50%);
+    radial-gradient(circle at 30% 20%, rgb(99 102 241 / .08) 0%, transparent 50%),
+    radial-gradient(circle at 70% 80%, rgb(139 92 246 / .05) 0%, transparent 50%);
 }
 
 [data-theme="dark"] .hero-section::before {
   background:
-    radial-gradient(circle at 30% 20%, rgb(129 140 248 / 0.12) 0%, transparent 50%),
-    radial-gradient(circle at 70% 80%, rgb(196 181 253 / 0.08) 0%, transparent 50%);
+    radial-gradient(circle at 30% 20%, rgb(129 140 248 / .12) 0%, transparent 50%),
+    radial-gradient(circle at 70% 80%, rgb(196 181 253 / .08) 0%, transparent 50%);
 }
 
 .hero-content {
@@ -699,18 +684,18 @@ a:hover {
   max-width: 900px;
   margin: 0 auto;
   position: relative;
-  animation: fadeInUp 0.8s ease-out;
+  animation: fadeInUp .8s ease-out;
 }
 
 @keyframes fadeInUp {
   from {
     opacity: 0;
-    transform: translateY(30px);
+    transform: translateY(30px)
   }
 
   to {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateY(0)
   }
 }
 
@@ -720,7 +705,7 @@ a:hover {
   line-height: 1.1;
   margin: 0 0 var(--space-2xl);
   color: var(--text-primary);
-  letter-spacing: -0.02em;
+  letter-spacing: -.02em;
 }
 
 .gradient-text {
@@ -742,8 +727,7 @@ a:hover {
   color: var(--text-secondary);
   margin: 0 0 var(--space-5xl);
   max-width: 700px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   line-height: 1.6;
 }
 
@@ -753,13 +737,11 @@ a:hover {
   justify-content: center;
   margin-bottom: var(--space-6xl);
   flex-wrap: wrap;
-  align-items: stretch;
-  /* Changed from default */
+  align-items: stretch
 }
 
 .hero-actions .btn {
-  flex: 0 0 auto;
-  /* Prevent flex growing/shrinking */
+  flex: 0 0 auto
 }
 
 .hero-stats {
@@ -800,24 +782,25 @@ a:hover {
   font-size: var(--text-sm);
   color: var(--text-secondary);
   text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: .1em;
   font-weight: var(--font-medium);
 }
 
-/* Section General Styles */
+/* Sections */
 .section {
   padding: var(--section-pad-y) 0;
   position: relative;
   scroll-margin-top: calc(var(--header-height) + 1rem);
+  content-visibility: auto;
+  /* performance win for large pages */
+  contain-intrinsic-size: 1px 600px;
 }
 
-/* Tighten stacked sections slightly */
 .section+.section {
-  margin-top: -0.25rem;
+  margin-top: -.25rem;
 }
 
-/* Ensure last child inside section doesn't add extra space */
-.section> :last-child {
+.section>:last-child {
   margin-bottom: 0;
 }
 
@@ -835,7 +818,7 @@ a:hover {
   font-weight: var(--font-extrabold);
   margin: 0 0 var(--space-2xl);
   color: var(--text-primary);
-  letter-spacing: -0.02em;
+  letter-spacing: -.02em;
 }
 
 .section-description {
@@ -847,6 +830,7 @@ a:hover {
   line-height: 1.7;
 }
 
+/* Chips */
 .meta-chips {
   display: flex;
   gap: var(--space-sm);
@@ -867,10 +851,9 @@ a:hover {
   font-size: var(--text-xs);
   font-weight: var(--font-medium);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: .05em;
 }
 
-/* ===== 5. COMPONENTS ===== */
 /* Buttons */
 .btn {
   display: inline-flex;
@@ -888,9 +871,7 @@ a:hover {
   justify-content: center;
   transition: all var(--transition-fast);
   flex-shrink: 0;
-  /* Add this to prevent shrinking */
-  white-space: nowrap;
-  /* Prevent text wrapping */
+  white-space: nowrap
 }
 
 .btn::before {
@@ -900,8 +881,8 @@ a:hover {
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-  transition: left 0.5s;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
+  transition: left .5s;
 }
 
 .btn:hover::before {
@@ -910,7 +891,7 @@ a:hover {
 
 .btn-primary {
   background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
-  color: white;
+  color: #fff;
   box-shadow: var(--shadow-md);
   border: none;
 }
@@ -919,7 +900,7 @@ a:hover {
   background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
   transform: translateY(-2px);
   box-shadow: var(--shadow-lg);
-  color: white;
+  color: #fff;
 }
 
 .btn-secondary {
@@ -936,7 +917,7 @@ a:hover {
   box-shadow: var(--shadow-md);
 }
 
-/* Benefit Cards */
+/* Features */
 .features-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
@@ -954,8 +935,7 @@ a:hover {
   border-radius: var(--radius-lg);
   transition: all var(--transition-normal);
   min-height: 160px;
-  justify-content: center;
-  /* Removed will-change for potential performance issues */
+  justify-content: center
 }
 
 .benefit-card:hover {
@@ -1002,14 +982,14 @@ a:hover {
 }
 
 .alert-info {
-  background: rgba(59, 130, 246, 0.08);
-  border-color: rgba(59, 130, 246, 0.2);
+  background: rgba(59, 130, 246, .08);
+  border-color: rgba(59, 130, 246, .2);
   color: var(--info);
 }
 
 .alert-warning {
-  background: rgba(245, 158, 11, 0.08);
-  border-color: rgba(44, 35, 19, 0.2);
+  background: rgba(245, 158, 11, .08);
+  border-color: rgba(44, 35, 19, .2);
   color: var(--warning);
 }
 
@@ -1020,7 +1000,6 @@ a:hover {
   margin-top: 2px;
 }
 
-/* Improve inline SVG rendering (prevents visual clipping on some mobile browsers) */
 .alert-icon,
 .note-icon,
 .icon-badge,
@@ -1034,16 +1013,14 @@ a:hover {
   stroke-linejoin: round;
   vector-effect: non-scaling-stroke;
   overflow: visible;
-  /* Avoid stroke being cut at bounds */
   display: inline-block;
 }
 
-/* Ensure consistent vertical alignment */
 .alert-icon {
   vertical-align: middle;
 }
 
-/* Speed Section */
+/* Speed */
 .speed-section {
   background: var(--bg-secondary);
   border-radius: var(--radius-2xl);
@@ -1089,8 +1066,7 @@ a:hover {
   border-radius: var(--radius-lg);
   text-decoration: none;
   transition: all var(--transition-normal);
-  min-height: 120px;
-  /* Removed will-change for potential performance issues */
+  min-height: 120px
 }
 
 .speed-card:hover {
@@ -1110,7 +1086,7 @@ a:hover {
   color: var(--text-secondary);
 }
 
-/* Important Notes */
+/* Notes */
 .important-notes-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
@@ -1276,7 +1252,7 @@ a:hover {
   opacity: .35;
 }
 
-/* Data Tables */
+/* Data tables */
 .data-table-container {
   background: var(--bg-elevated);
   border-radius: var(--radius-2xl);
@@ -1284,36 +1260,28 @@ a:hover {
   border: 1px solid var(--border-primary);
   margin: var(--space-3xl) 0;
   overflow: hidden;
-  width: 100%;
-  /* Ensure it doesn't stretch the container */
+  width: 100%
 }
 
 .table-wrapper {
   overflow-x: auto;
-  /* Allow horizontal scroll for wide tables */
   border-radius: var(--radius-2xl);
-  /* Inherit rounding */
-  width: 100%;
-  /* Add this */
+  width: 100%
 }
 
 table {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--text-sm);
-  min-width: 600px;
-  /* This is necessary for wide tables but relies on wrapper overflow */
+  min-width: 600px
 }
 
 td,
 th {
   word-break: normal;
-  /* Remove overflow-wrap: anywhere; */
-  white-space: normal;
-  /* Allow natural wrapping */
+  white-space: normal
 }
 
-/* Table toolbar */
 .table-toolbar {
   display: flex;
   justify-content: space-between;
@@ -1323,7 +1291,6 @@ th {
   align-items: center;
 }
 
-/* Resources enhancements */
 .enhanced-resources .resource-category.elevated {
   position: relative;
   border: 1px solid var(--border-primary);
@@ -1358,7 +1325,7 @@ th {
   background: var(--bg-secondary);
 }
 
-/* Footer improvements */
+/* Footer add-ons */
 .footer-content.improved {
   position: relative;
 }
@@ -1427,7 +1394,6 @@ th {
   border: 0;
 }
 
-/* Footer chips for quick links */
 .footer-chips {
   display: flex;
   flex-wrap: wrap;
@@ -1444,14 +1410,7 @@ th {
   font-size: 12px;
 }
 
-/* Compact on small screens adjust toolbar */
-@media (max-width:600px) {
-  .table-toolbar {
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
-
+/* Table row cells */
 th,
 td {
   padding: var(--space-lg) var(--space-xl);
@@ -1461,15 +1420,14 @@ td {
 
 th {
   background: var(--primary);
-  color: white;
+  color: #fff;
   font-weight: var(--font-semibold);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: .05em;
   font-size: var(--text-xs);
   position: sticky;
   top: 0;
-  z-index: 100;
-  /* Increased z-index for table headers */
+  z-index: 100
 }
 
 tr:hover {
@@ -1491,8 +1449,7 @@ tr:hover {
   position: sticky;
   left: 0;
   z-index: 101;
-  /* Increased z-index for sticky first column */
-  box-shadow: 2px 0 6px -4px rgba(0, 0, 0, 0.06);
+  box-shadow: 2px 0 6px -4px rgba(0, 0, 0, .06);
 }
 
 #file-hosts-table td:first-child {
@@ -1501,7 +1458,7 @@ tr:hover {
 
 .filter-results {
   text-align: center;
-  padding: 0.1em;
+  padding: .1em;
   font-size: var(--text-sm);
   color: var(--text-secondary);
   font-family: 'Courier New', Courier, monospace;
@@ -1509,12 +1466,12 @@ tr:hover {
 
 .table-check,
 .table-cross {
-  padding: 0.2em;
+  padding: .2em;
   border-radius: 50px;
 }
 
 .table-check {
-  background-color: rgba(90, 221, 90, 0.568);
+  background-color: rgba(90, 221, 90, .568);
 }
 
 .table-cross {
@@ -1544,7 +1501,8 @@ tr:hover {
 
 .search-input {
   width: 100%;
-  padding: var(--space-lg) var(--space-5xl) var(--space-lg) var(--space-5xl);
+  padding: var(--space-lg) var(--space-5xl);
+  /* symmetric padding */
   border: 2px solid var(--border-primary);
   border-radius: var(--radius-full);
   font-size: var(--text-base);
@@ -1552,11 +1510,13 @@ tr:hover {
   color: var(--text-primary);
   outline: none;
   transition: all var(--transition-fast);
+  padding-inline: var(--space-5xl);
+  padding-block: var(--space-lg);
 }
 
 .search-input:focus {
   border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, .1);
 }
 
 .clear-icon {
@@ -1587,7 +1547,7 @@ tr:hover {
   color: var(--text-primary);
 }
 
-/* Status Grid */
+/* Status */
 .status-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -1603,8 +1563,7 @@ tr:hover {
   border-radius: var(--radius-xl);
   text-decoration: none;
   transition: all var(--transition-normal);
-  min-height: 120px;
-  /* Removed will-change for potential performance issues */
+  min-height: 120px
 }
 
 .status-card:hover {
@@ -1630,7 +1589,7 @@ tr:hover {
   height: 12px;
   border-radius: var(--radius-full);
   background: var(--success);
-  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+  box-shadow: 0 0 0 2px rgba(16, 185, 129, .2);
 }
 
 .status-card p {
@@ -1640,7 +1599,7 @@ tr:hover {
   line-height: 1.5;
 }
 
-/* Referral Section */
+/* Referral */
 .referral-section {
   margin: var(--space-6xl) 0;
   padding: var(--space-4xl);
@@ -1684,8 +1643,7 @@ tr:hover {
   width: 100%;
   max-width: 200px;
   transition: all var(--transition-normal);
-  min-height: 100px;
-  /* Removed will-change for potential performance issues */
+  min-height: 100px
 }
 
 .referral-card:hover {
@@ -1704,15 +1662,15 @@ tr:hover {
 .speed-test-label {
   font-size: var(--text-xs);
   color: var(--primary);
-  background: rgba(99, 102, 241, 0.1);
+  background: rgba(99, 102, 241, .1);
   padding: var(--space-xs) var(--space-sm);
   border-radius: var(--radius-md);
   font-weight: var(--font-medium);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: .05em;
 }
 
-/* Compare Section */
+/* Compare controls */
 .compare-controls {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
@@ -1720,14 +1678,13 @@ tr:hover {
   margin-bottom: var(--space-4xl);
   align-items: end;
   max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 }
 
 .compare-select-group {
   display: flex;
   flex-direction: column;
-  min-width: 0; /* Allow shrinking */
+  min-width: 0
 }
 
 .compare-select-group label {
@@ -1755,13 +1712,13 @@ select {
   cursor: pointer;
   appearance: none;
   transition: all var(--transition-fast);
-  min-height: 48px; /* Ensure consistent height */
+  min-height: 48px
 }
 
 select:focus {
   outline: none;
   border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, .1);
 }
 
 select:hover {
@@ -1787,6 +1744,11 @@ select:hover {
   border-top-color: var(--primary);
 }
 
+/* fix: focus arrow using :focus-within for broad support */
+.select-wrapper:focus-within::after {
+  border-top-color: var(--primary);
+}
+
 .compare-vs {
   display: flex;
   align-items: center;
@@ -1802,71 +1764,33 @@ select:hover {
   min-width: 60px;
   min-height: 48px;
   text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: .1em;
   box-shadow: var(--shadow-sm);
   transition: all var(--transition-fast);
+  position: relative;
+  overflow: hidden;
+}
+
+.compare-vs::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(99, 102, 241, .1), rgba(139, 92, 246, .1));
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+
+.compare-vs:hover::before {
+  opacity: 1;
+}
+
+.compare-select-group:focus-within label {
+  color: var(--primary);
+  transform: translateY(-2px);
+  transition: all var(--transition-fast);
 }
 
-
-/* Responsive Design for Compare Section */
-@media (max-width: 768px) {
-  .compare-controls {
-    grid-template-columns: 1fr;
-    gap: var(--space-lg);
-    text-align: center;
-    align-items: center;
-    justify-items: center;
-  }
-  
-  .compare-vs {
-    order: 2;
-    margin: var(--space-lg) auto;
-    width: fit-content;
-    justify-self: center;
-    align-self: center;
-  }
-  
-  .compare-select-group:first-child {
-    order: 1;
-    width: 100%;
-    max-width: 300px;
-  }
-  
-  .compare-select-group:last-child {
-    order: 3;
-    width: 100%;
-    max-width: 300px;
-  }
-  
-  .compare-select-group label {
-    font-size: var(--text-base);
-    font-weight: var(--font-semibold);
-  }
-}
-
-@media (max-width: 480px) {
-  .compare-controls {
-    gap: var(--space-md);
-    padding: 0 var(--space-md);
-  }
-  
-  .compare-vs {
-    padding: var(--space-md) var(--space-lg);
-    font-size: var(--text-base);
-    margin: var(--space-md) auto;
-  }
-  
-  .compare-select-group:first-child,
-  .compare-select-group:last-child {
-    max-width: 280px;
-  }
-  
-  select {
-    padding: var(--space-md) var(--space-3xl) var(--space-md) var(--space-md);
-    font-size: var(--text-sm);
-  }
-}
-
+/* Empty/loading/error states */
 .empty-state {
   text-align: center;
   padding: var(--space-6xl);
@@ -1882,10 +1806,7 @@ select:hover {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg, 
-    rgba(99, 102, 241, 0.02), 
-    rgba(139, 92, 246, 0.02)
-  );
+  background: linear-gradient(135deg, rgba(99, 102, 241, .02), rgba(139, 92, 246, .02));
   pointer-events: none;
 }
 
@@ -1894,7 +1815,7 @@ select:hover {
   height: 64px;
   color: var(--text-tertiary);
   margin: 0 auto var(--space-xl);
-  opacity: 0.7;
+  opacity: .7;
   position: relative;
   z-index: 1;
 }
@@ -1913,40 +1834,21 @@ select:hover {
   color: var(--text-secondary);
   font-size: var(--text-base);
   max-width: 400px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   line-height: 1.5;
   position: relative;
   z-index: 1;
 }
-.warning-state{
+
+.warning-state {
   margin-top: 1rem;
-  padding: 0.5rem 0.5rem;
+  padding: .5rem .5rem;
   border-radius: var(--radius-md);
   text-align: center;
 }
-/* Responsive empty state */
-@media (max-width: 768px) {
-  .empty-state {
-    padding: var(--space-4xl) var(--space-xl);
-  }
-  
-  .empty-state-icon {
-    width: 48px;
-    height: 48px;
-  }
-  
-  .empty-state h3 {
-    font-size: var(--text-lg);
-  }
-  
-  .empty-state p {
-    font-size: var(--text-sm);
-  }
-}
 
 .error-state {
-  padding: 0.5em;
+  padding: .5em;
   background-color: inherit;
   color: #842029;
   border-radius: var(--radius-md);
@@ -1979,15 +1881,15 @@ select:hover {
 
 @keyframes spin {
   0% {
-    transform: rotate(0deg);
+    transform: rotate(0deg)
   }
 
   100% {
-    transform: rotate(360deg);
+    transform: rotate(360deg)
   }
 }
 
-/* Comparison Specific Styles */
+/* Comparison */
 .comparison-header {
   display: flex;
   flex-direction: column;
@@ -2006,10 +1908,7 @@ select:hover {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg, 
-    rgba(99, 102, 241, 0.03), 
-    rgba(139, 92, 246, 0.03)
-  );
+  background: linear-gradient(135deg, rgba(99, 102, 241, .03), rgba(139, 92, 246, .03));
   pointer-events: none;
 }
 
@@ -2045,7 +1944,7 @@ select:hover {
   color: var(--text-secondary);
   margin-bottom: var(--space-xs);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: .05em;
   font-weight: var(--font-medium);
 }
 
@@ -2088,10 +1987,7 @@ select:hover {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg, 
-    rgba(99, 102, 241, 0.02), 
-    rgba(139, 92, 246, 0.02)
-  );
+  background: linear-gradient(135deg, rgba(99, 102, 241, .02), rgba(139, 92, 246, .02));
   pointer-events: none;
 }
 
@@ -2123,7 +2019,7 @@ select:hover {
   accent-color: var(--primary);
 }
 
-.comparison-filters input[type="radio"]:checked + span {
+.comparison-filters input[type="radio"]:checked+span {
   color: var(--primary);
   font-weight: var(--font-semibold);
 }
@@ -2153,13 +2049,17 @@ select:hover {
   color: var(--text-primary);
   font-size: var(--text-sm);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: .05em;
 }
 
 .comparison-table th:first-child {
   text-align: left;
   background: var(--primary);
-  color: white;
+  color: #fff;
+  position: sticky;
+  left: 0;
+  z-index: 101;
+  box-shadow: 2px 0 6px -4px rgba(0, 0, 0, .06);
 }
 
 .comparison-table .provider-header {
@@ -2172,7 +2072,20 @@ select:hover {
 .comparison-table td:first-child {
   text-align: left;
   font-weight: var(--font-medium);
-  background: var(--bg-tertiary);
+  background: var(--bg-primary);
+  position: sticky;
+  left: 0;
+  z-index: 101;
+  box-shadow: 2px 0 6px -4px rgba(0, 0, 0, .06);
+}
+
+/* Alternate row styling for comparison table */
+.comparison-table tr:nth-child(even) {
+  background-color: var(--bg-tertiary);
+}
+
+.comparison-table tr:nth-child(even) td:first-child {
+  background-color: var(--bg-tertiary);
 }
 
 .comparison-row:hover {
@@ -2185,23 +2098,20 @@ select:hover {
 
 .comparison-hiding {
   opacity: 0;
-  transform: scale(0.95);
+  transform: scale(.95);
   transition: all var(--transition-normal);
 }
 
-/* Enhanced table cells for better visual hierarchy */
 .comparison-table .table-check,
 .comparison-table .table-cross {
   font-weight: var(--font-semibold);
 }
 
-/* Compare section container improvements */
 .compare-section-wrapper {
   position: relative;
   overflow: hidden;
 }
 
-/* Data table container specific to comparison */
 #compare-table-container {
   min-height: 200px;
   transition: all var(--transition-normal);
@@ -2215,25 +2125,21 @@ select:hover {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg, 
-    rgba(99, 102, 241, 0.01), 
-    rgba(139, 92, 246, 0.01)
-  );
+  background: linear-gradient(135deg, rgba(99, 102, 241, .01), rgba(139, 92, 246, .01));
   pointer-events: none;
   z-index: 0;
 }
 
-#compare-table-container > * {
+#compare-table-container>* {
   position: relative;
   z-index: 1;
 }
 
 #compare-table-container.loading {
-  opacity: 0.7;
+  opacity: .7;
   pointer-events: none;
 }
 
-/* Same provider warning styles */
 .same-provider-warning {
   background: var(--warning-bg, #fef3cd);
   border: 1px solid var(--warning-border, #facc15);
@@ -2252,7 +2158,6 @@ select:hover {
   vertical-align: middle;
 }
 
-/* Loading states specific to comparison */
 .comparison-loading {
   display: flex;
   flex-direction: column;
@@ -2271,10 +2176,7 @@ select:hover {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg, 
-    rgba(99, 102, 241, 0.02), 
-    rgba(139, 92, 246, 0.02)
-  );
+  background: linear-gradient(135deg, rgba(99, 102, 241, .02), rgba(139, 92, 246, .02));
   pointer-events: none;
 }
 
@@ -2298,37 +2200,6 @@ select:hover {
   z-index: 1;
 }
 
-/* Improved select focus states */
-.compare-select-group:focus-within label {
-  color: var(--primary);
-  transform: translateY(-2px);
-  transition: all var(--transition-fast);
-}
-
-.compare-select-group select:focus + .select-wrapper::after {
-  border-top-color: var(--primary);
-}
-
-/* Better visual feedback for interactive elements */
-.compare-vs {
-  position: relative;
-  overflow: hidden;
-}
-
-.compare-vs::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
-  opacity: 0;
-  transition: opacity var(--transition-fast);
-}
-
-.compare-vs:hover::before {
-  opacity: 1;
-}
-
-/* Ensure proper spacing in the comparison section */
 #compare .section-header {
   margin-bottom: var(--space-3xl);
   text-align: center;
@@ -2338,11 +2209,9 @@ select:hover {
   font-size: var(--text-lg);
   color: var(--text-secondary);
   max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 }
 
-/* Compare section wrapper improvements */
 #compare {
   position: relative;
   background: var(--bg-primary);
@@ -2352,146 +2221,12 @@ select:hover {
   position: relative;
 }
 
-/* Improved centering for all comparison elements */
 .compare-controls {
   position: relative;
   z-index: 1;
 }
 
-/* Additional mobile improvements */
-@media (max-width: 768px) {
-  #compare .section-description {
-    font-size: var(--text-base);
-    padding: 0 var(--space-md);
-  }
-}
-
-@media (max-width: 480px) {
-  #compare .section-header {
-    margin-bottom: var(--space-2xl);
-  }
-  
-  #compare .section-description {
-    font-size: var(--text-sm);
-  }
-}
-
-/* Accessibility improvements */
-.compare-controls:focus-within {
-  outline: none;
-  outline-offset: 4px;
-  border-radius: var(--radius-lg);
-}
-
-/* Print styles for comparison section */
-@media print {
-  .compare-controls {
-    display: none;
-  }
-  
-  .comparison-table {
-    box-shadow: none;
-    border: 1px solid #000;
-  }
-  
-  .comparison-table th,
-  .comparison-table td {
-    border: 1px solid #000;
-    padding: var(--space-sm);
-  }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .compare-vs {
-    border-width: 3px;
-    font-weight: var(--font-bold);
-  }
-  
-  .comparison-table {
-    border-width: 2px;
-  }
-  
-  .comparison-table th,
-  .comparison-table td {
-    border-width: 1px;
-  }
-}
-
-/* Reduced motion preferences */
-@media (prefers-reduced-motion: reduce) {
-  .compare-vs,
-  .comparison-hiding,
-  .comparison-loading .loading-spinner {
-    transition: none;
-    animation: none;
-  }
-  
-  .compare-vs:hover {
-    transform: none;
-  }
-}
-
-/* Responsive Design for Comparison Table */
-@media (max-width: 768px) {
-  .comparison-header {
-    padding: var(--space-lg);
-  }
-  
-  .comparison-stats {
-    gap: var(--space-lg);
-  }
-  
-  .comparison-stats .stat {
-    min-width: 60px;
-  }
-  
-  .comparison-filters {
-    gap: var(--space-md);
-    padding: var(--space-md);
-  }
-  
-  .comparison-table th,
-  .comparison-table td {
-    padding: var(--space-md);
-    font-size: var(--text-sm);
-  }
-  
-  .comparison-table .provider-header {
-    font-size: var(--text-base);
-  }
-}
-
-@media (max-width: 480px) {
-  .comparison-header {
-    padding: var(--space-md);
-  }
-  
-  .comparison-header h3 {
-    font-size: var(--text-lg);
-  }
-  
-  .comparison-stats {
-    gap: var(--space-sm);
-  }
-  
-  .comparison-filters {
-    flex-direction: column;
-    align-items: center;
-    gap: var(--space-sm);
-  }
-  
-  .comparison-table {
-    font-size: var(--text-xs);
-  }
-  
-  .comparison-table th,
-  .comparison-table td {
-    padding: var(--space-sm);
-  }
-}
-
-/* ===== 6. FOOTER ===== */
+/* Footer */
 .site-footer {
   background: var(--bg-secondary);
   border-top: 1px solid var(--border-primary);
@@ -2516,17 +2251,16 @@ select:hover {
   margin-bottom: var(--space-5xl);
 }
 
-/* Make footer grid more adaptive */
-@media (max-width: 1200px) {
+@media (max-width:1200px) {
   .footer-content {
-    grid-template-columns: 1.5fr 1fr 1fr;
+    grid-template-columns: 1.5fr 1fr 1fr
   }
 }
 
-@media (max-width: 900px) {
+@media (max-width:900px) {
   .footer-content {
     grid-template-columns: repeat(2, 1fr);
-    gap: var(--space-2xl);
+    gap: var(--space-2xl)
   }
 }
 
@@ -2586,7 +2320,7 @@ select:hover {
   font-weight: var(--font-medium);
   color: var(--text-secondary);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: .05em;
 }
 
 .footer-links {
@@ -2616,9 +2350,9 @@ select:hover {
   column-gap: var(--space-xl);
 }
 
-@media (max-width: 600px) {
+@media (max-width:600px) {
   .footer-links.compact {
-    columns: 1;
+    columns: 1
   }
 }
 
@@ -2691,14 +2425,12 @@ select:hover {
 
 .github-link:hover {
   background: var(--primary);
-  color: white;
+  color: #fff;
   border-color: var(--primary);
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
 }
 
-/* ===== 7. UTILITY & GLOBAL COMPONENTS ===== */
-/* Back to Top Button */
 .back-to-top {
   position: fixed;
   bottom: var(--space-2xl);
@@ -2706,7 +2438,7 @@ select:hover {
   width: 48px;
   height: 48px;
   background: var(--primary);
-  color: white;
+  color: #fff;
   border: none;
   border-radius: var(--radius-full);
   display: flex;
@@ -2718,8 +2450,7 @@ select:hover {
   transform: translateY(20px);
   z-index: 50;
   transition: all var(--transition-normal);
-  will-change: transform;
-  /* Kept for back-to-top as it's a critical animation */
+  will-change: transform
 }
 
 .back-to-top.visible {
@@ -2734,485 +2465,508 @@ select:hover {
   box-shadow: var(--shadow-xl);
 }
 
-/* ===== 8. MEDIA QUERIES ===== */
-/* Large Desktop */
-@media (max-width: 1024px) {
+/* ======= Responsiveness ======= */
+@media (max-width:1024px) {
   .container {
-    padding: 0 var(--space-xl);
+    padding-inline: var(--space-xl)
   }
 
   .resources-categories {
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
   }
 }
 
-/* Tablet */
-@media (max-width: 768px) {
-  .header-nav {
-    display: none;
+@media (max-width:900px) {
+  .hero-section {
+    padding: clamp(3.5rem, 10vw, 5rem) 0 clamp(3rem, 8vw, 4rem)
   }
 
-  .hero-actions {
-    flex-direction: column;
-    align-items: center;
+  .footer-content {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-xl)
   }
 
-  .hero-stats {
-    gap: var(--space-2xl);
+  .footer-brand h3 {
+    font-size: var(--text-lg)
   }
 
-  .features-grid {
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: var(--space-md);
-  }
-
-  .benefit-card {
-    padding: var(--space-lg);
-    min-height: 140px;
-  }
-
-  .benefit-card .icon-badge {
-    width: 32px;
-    height: 32px;
-    margin-bottom: var(--space-md);
-  }
-
-  .benefit-card h3 {
-    font-size: var(--text-sm);
+  .important-notes-grid {
+    grid-template-columns: 1fr
   }
 
+  /* compare layout */
   .comparison-header {
     padding: var(--space-lg);
-    gap: var(--space-md);
+    gap: var(--space-md)
   }
 
   .comparison-stats {
-    gap: var(--space-lg);
+    gap: var(--space-lg)
   }
 
   .comparison-filters {
     flex-direction: column;
     gap: var(--space-md);
-    align-items: center;
+    align-items: center
   }
 
   .compare-controls {
     flex-direction: column;
     align-items: center;
-    /* Center all items */
-    gap: var(--space-xl);
+    gap: var(--space-xl)
   }
 
   .compare-vs {
     order: 2;
-    /* Place VS in the middle */
-    margin: var(--space-lg) 0;
+    margin: var(--space-lg) 0
   }
 
   .compare-select-group:first-child {
-    order: 1;
+    order: 1
   }
 
   .compare-select-group:last-child {
-    order: 3;
-  }
-
-  .important-notes-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .footer-content {
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--space-xl);
-  }
-
-  .footer-brand h3 {
-    font-size: var(--text-lg);
+    order: 3
   }
 }
 
-/* Mobile */
-@media (max-width: 480px) {
+@media (max-width:768px) {
+  .header-nav {
+    display: none
+  }
+
+  .hero-actions {
+    flex-direction: column;
+    align-items: center
+  }
+
+  .hero-stats {
+    gap: var(--space-2xl)
+  }
+
+  .features-grid {
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: var(--space-md)
+  }
+
+  .benefit-card {
+    padding: var(--space-lg);
+    min-height: 140px
+  }
+
+  .benefit-card .icon-badge {
+    width: 32px;
+    height: 32px;
+    margin-bottom: var(--space-md)
+  }
+
+  .benefit-card h3 {
+    font-size: var(--text-sm)
+  }
+
+  .comparison-stats {
+    gap: var(--space-lg)
+  }
+
+  .comparison-filters {
+    gap: var(--space-md);
+    padding: var(--space-md)
+  }
+
+  .comparison-table th,
+  .comparison-table td {
+    padding: var(--space-md);
+    font-size: var(--text-sm)
+  }
+
+  .comparison-table th:first-child,
+  .comparison-table td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 101;
+    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, .08);
+  }
+
+  .comparison-table .provider-header {
+    font-size: var(--text-base)
+  }
+
+  .compare-controls {
+    grid-template-columns: 1fr;
+    gap: var(--space-lg);
+    text-align: center;
+    align-items: center;
+    justify-items: center
+  }
+
+  .compare-vs {
+    order: 2;
+    margin: var(--space-lg) auto;
+    width: fit-content;
+    justify-self: center;
+    align-self: center
+  }
+
+  .compare-select-group:first-child,
+  .compare-select-group:last-child {
+    width: 100%;
+    max-width: 300px
+  }
+
+  .compare-select-group label {
+    font-size: var(--text-base);
+    font-weight: var(--font-semibold)
+  }
+}
+
+@media (max-width:700px) {
+  .hero-section {
+    padding: clamp(3rem, 9vw, 4rem) 0 clamp(2.5rem, 7vw, 3.5rem)
+  }
+}
+
+@media (max-width:600px) {
+  .footer-links.compact {
+    columns: 1
+  }
+}
+
+@media (max-width:520px) {
+  .hero-section {
+    padding: clamp(2.5rem, 8vw, 3.5rem) 0 clamp(2rem, 6vw, 3rem)
+  }
+}
+
+@media (max-width:480px) {
   .container {
-    padding: 0 var(--space-lg);
+    padding-inline: var(--space-lg)
   }
 
   .section {
-    padding: var(--space-3xl) 0;
-    /* Tighten vertical rhythm on very small screens */
+    padding: var(--space-3xl) 0
   }
 
   .stat-item:not(:last-child)::after {
-    display: none;
+    display: none
   }
 
   .features-grid {
     grid-template-columns: 1fr;
-    gap: var(--space-lg);
+    gap: var(--space-lg)
   }
 
   .benefit-card {
     padding: var(--space-xl);
-    min-height: auto;
+    min-height: auto
+  }
+
+  .comparison-header {
+    padding: var(--space-md)
   }
 
   .comparison-header h3 {
-    font-size: var(--text-lg);
+    font-size: var(--text-lg)
   }
 
   .comparison-stats {
     flex-direction: column;
-    gap: var(--space-md);
+    gap: var(--space-md)
   }
 
   .comparison-filters {
-    gap: var(--space-sm);
+    gap: var(--space-sm)
+  }
+
+  .comparison-table {
+    font-size: var(--text-xs)
+  }
+
+  .comparison-table th,
+  .comparison-table td {
+    padding: var(--space-sm)
+  }
+
+  .comparison-table th:first-child,
+  .comparison-table td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 101;
+    box-shadow: 1px 0 3px -1px rgba(0, 0, 0, .1);
   }
 
   .footer-content {
     grid-template-columns: 1fr;
-    gap: var(--space-lg);
+    gap: var(--space-lg)
   }
 
   .footer-brand {
     text-align: center;
     padding-bottom: var(--space-lg);
     border-bottom: 1px solid var(--border-primary);
-    /* Use theme variable */
-    margin-bottom: var(--space-lg);
+    margin-bottom: var(--space-lg)
   }
 
   .footer-links {
-    justify-content: center;
+    justify-content: center
   }
 
   .footer-links h4 {
     text-align: center;
-    margin-bottom: var(--space-md);
+    margin-bottom: var(--space-md)
   }
 
   .footer-bottom {
-    text-align: center;
+    text-align: center
   }
 
   .footer-bottom-content {
     flex-direction: column;
     align-items: center;
-    text-align: center;
+    text-align: center
   }
 
   .footer-right {
-    text-align: center;
-    /* Ensure right content centers */
+    text-align: center
   }
 
   .hero-meta {
-    margin-bottom: var(--space-2xl);
+    margin-bottom: var(--space-2xl)
   }
 
   .hero-badge {
-    font-size: 10px;
+    font-size: 10px
   }
 }
 
-/* Fix 6: Specific adjustments for screens smaller than 420px */
-/* Using em units like the original for consistency, 420px / 16px = 26.25em */
-@media (max-width: 26.25em) {
+@media (max-width:400px) {
+  .hero-section {
+    padding: clamp(2rem, 7vw, 3rem) 0 clamp(1.5rem, 6vw, 2.5rem)
+  }
+}
 
-  /* Further reduce horizontal padding on very small screens */
+@media (max-width:26.25em) {
+
+  /* 420px */
   .container {
-    padding-inline: var(--space-sm);
-    /* Even smaller padding */
+    padding-inline: var(--space-sm)
   }
 
-  /* Adjust hero section for very small screens */
   .hero-section {
-    padding: var(--space-4xl) var(--space-sm);
-    /* Reduce horizontal padding */
+    padding: var(--space-4xl) var(--space-sm)
   }
 
   .hero-title {
     font-size: clamp(1.5rem, 8vw, 2.5rem);
-    /* Potentially smaller base */
-    margin-bottom: var(--space-lg);
+    margin-bottom: var(--space-lg)
   }
 
   .hero-description {
     font-size: var(--text-base);
-    /* Use fixed size or smaller clamp base */
-    margin-bottom: var(--space-3xl);
+    margin-bottom: var(--space-3xl)
   }
 
   .hero-actions {
     margin-bottom: var(--space-4xl);
-    gap: var(--space-md);
-    /* Reduce gap between buttons */
+    gap: var(--space-md)
   }
 
   .btn {
     padding: var(--space-md) var(--space-xl);
-    /* Reduce button padding */
     min-width: 120px;
-    /* Reduce minimum width if needed */
-    font-size: var(--text-sm);
-    /* Smaller font */
+    font-size: var(--text-sm)
   }
 
-  /* Adjust section titles and descriptions */
   .section-header {
-    margin-bottom: var(--space-lg);
+    margin-bottom: var(--space-lg)
   }
 
   .section-title {
     font-size: clamp(1.5rem, 6vw, 2rem);
-    /* Smaller base size */
-    margin-bottom: var(--space-lg);
+    margin-bottom: var(--space-lg)
   }
 
   .section-description {
-    font-size: var(--text-sm);
-    /* Smaller base size */
+    font-size: var(--text-sm)
   }
 
-  /* Adjust benefit cards */
   .benefit-card {
     padding: var(--space-lg) var(--space-md);
-    /* Reduce horizontal padding */
-    min-height: auto;
+    min-height: auto
   }
 
   .benefit-card h3 {
-    font-size: var(--text-base);
-    /* Adjust heading size */
+    font-size: var(--text-base)
   }
 
-  /* Adjust notes */
   .note-card {
-    padding: var(--space-lg);
+    padding: var(--space-lg)
   }
 
-  /* Adjust stats */
   .hero-stats {
-    gap: var(--space-lg);
-    /* Reduce gap */
+    gap: var(--space-lg)
   }
 
   .stat-number {
-    font-size: clamp(1.5rem, 10vw, 2rem);
-    /* Smaller base */
+    font-size: clamp(1.5rem, 10vw, 2rem)
   }
 
-  /* Ensure alerts don't overflow */
   .alert {
     padding: var(--space-lg);
     margin: var(--space-lg) 0;
-    gap: var(--space-sm);
-    /* Reduce gap */
+    gap: var(--space-sm)
   }
 
-  /* Refine comparison controls */
   .compare-controls {
-    gap: var(--space-lg);
-    /* Reduce gap */
+    gap: var(--space-lg)
   }
 
-  /* Refine table display if necessary */
   .data-table-container {
-    font-size: 0.8rem;
-    /* Slightly smaller font */
+    font-size: .8rem
   }
 
   th,
   td {
-    padding: var(--space-sm) var(--space-md);
-    /* Reduce padding */
+    padding: var(--space-sm) var(--space-md)
   }
 
-  /* Refine footer */
   .site-footer {
-    padding: var(--space-5xl) 0 var(--space-3xl);
-    /* Reduce top padding */
+    padding: var(--space-5xl) 0 var(--space-3xl)
   }
 
   .footer-content {
     gap: var(--space-md);
-    /* Reduce gap */
-    margin-bottom: var(--space-3xl);
+    margin-bottom: var(--space-3xl)
   }
 
   .footer-section h4,
   .footer-section h5 {
-    margin-bottom: var(--space-lg);
+    margin-bottom: var(--space-lg)
   }
 
   .footer-bottom {
-    padding-top: var(--space-3xl);
+    padding-top: var(--space-3xl)
   }
 
   .footer-bottom-content {
-    gap: var(--space-lg);
-    /* Reduce gap */
+    gap: var(--space-lg)
   }
 
   .footer-meta {
-    gap: var(--space-md);
-    /* Reduce gap */
+    gap: var(--space-md)
   }
 
-  /* Refine other components as needed */
   .speed-section {
-    padding: var(--space-2xl) var(--space-sm);
-    /* Reduce horizontal padding */
+    padding: var(--space-2xl) var(--space-sm)
   }
 
   .resource-category {
-    padding: var(--space-2xl) var(--space-sm);
-    /* Reduce horizontal padding */
+    padding: var(--space-2xl) var(--space-sm)
   }
 
   .resource-item {
-    padding: var(--space-md);
-    /* Reduce padding */
+    padding: var(--space-md)
   }
 
   .referral-section {
     padding: var(--space-2xl) var(--space-sm);
-    /* Reduce horizontal padding */
-    margin: var(--space-4xl) 0;
-    /* Reduce margin */
+    margin: var(--space-4xl) 0
   }
 
   .referral-grid {
-    gap: var(--space-md);
-    /* Reduce gap */
+    gap: var(--space-md)
   }
 
   .referral-card {
     padding: var(--space-md);
-    /* Reduce padding */
-    max-width: none;
-    /* Remove max-width restriction */
+    max-width: none
   }
 }
 
+@media (max-width:20em) {
 
-/* Additional responsive tuning (existing) */
-@media (max-width: 900px) {
-  .hero-section {
-    padding: clamp(3.5rem, 10vw, 5rem) 0 clamp(3rem, 8vw, 4rem);
-  }
-}
-
-@media (max-width: 700px) {
-  .hero-section {
-    padding: clamp(3rem, 9vw, 4rem) 0 clamp(2.5rem, 7vw, 3.5rem);
-  }
-}
-
-@media (max-width: 520px) {
-  .hero-section {
-    padding: clamp(2.5rem, 8vw, 3.5rem) 0 clamp(2rem, 6vw, 3rem);
-  }
-}
-
-@media (max-width: 400px) {
-  .hero-section {
-    padding: clamp(2rem, 7vw, 3rem) 0 clamp(1.5rem, 6vw, 2.5rem);
-  }
-}
-
-/* Ultra-small devices (<=20em ~ 320px) - Review/Adjust */
-@media (max-width: 20em) {
+  /* 320px */
   html {
-    font-size: 14px;
+    font-size: 14px
   }
 
   body {
-    line-height: 1.5;
+    line-height: 1.5
   }
 
   .site-header {
-    height: 3.75rem;
+    height: 3.75rem
   }
 
   :root {
-    --header-height: 3.75rem;
+    --header-height: 3.75rem
   }
 
   .header-content {
-    gap: var(--space-lg);
+    gap: var(--space-lg)
   }
 
   .site-title {
     font-size: var(--text-lg);
-    padding: var(--space-xs) var(--space-md);
+    padding: var(--space-xs) var(--space-md)
   }
 
   .nav-link {
     padding: var(--space-sm) var(--space-md);
-    font-size: 0.75rem;
+    font-size: .75rem
   }
 
   .dark-mode-toggle {
     width: 38px;
-    height: 38px;
+    height: 38px
   }
 
-  /* .hero-title { margin-bottom: var(--space-xl); } */
-  /* Handled by 26.25em */
-  /* .hero-section { padding: 2.25rem 0 1.75rem; } */
-  /* Handled by 26.25em */
   .hero-description {
-    font-size: 0.95rem;
+    font-size: .95rem
   }
 
   .hero-stats {
-    gap: var(--space-lg);
+    gap: var(--space-lg)
   }
 
-  /* .stat-number { font-size: clamp(1.75rem, 10vw, 2.25rem); } */
-  /* Handled by 26.25em */
   .section {
-    padding: 2rem 0;
+    padding: 2rem 0
   }
 
   .section-header {
-    margin-bottom: var(--space-xl);
+    margin-bottom: var(--space-xl)
   }
 
-  /* .section-title { font-size: clamp(1.75rem, 9vw, 2.25rem); margin-bottom: var(--space-xl); } */
-  /* Handled by 26.25em */
   .section-description {
-    font-size: clamp(0.95rem, 3.2vw, 1.05rem);
+    font-size: clamp(.95rem, 3.2vw, 1.05rem)
   }
 
   .benefit-card {
-    padding: var(--space-lg);
+    padding: var(--space-lg)
   }
 
   .benefit-card h3 {
-    font-size: 0.9rem;
+    font-size: .9rem
   }
 
   .alert {
     padding: var(--space-lg);
-    margin: var(--space-lg) 0;
+    margin: var(--space-lg) 0
   }
 
   .note-card {
-    padding: var(--space-lg);
+    padding: var(--space-lg)
   }
 
   .compare-controls {
-    gap: var(--space-lg);
+    gap: var(--space-lg)
   }
 
   .data-table-container {
-    font-size: 0.85rem;
+    font-size: .85rem
   }
 }
 
-/* Print Styles */
+/* ===== Print ===== */
 @media print {
 
   .site-header,
@@ -3221,27 +2975,62 @@ select:hover {
   .site-footer,
   .back-to-top,
   .dark-mode-toggle {
-    display: none !important;
+    display: none !important
   }
 
   .section {
-    page-break-inside: avoid;
+    page-break-inside: avoid
+  }
+
+  .compare-controls {
+    display: none
+  }
+
+  .comparison-table {
+    box-shadow: none;
+    border: 1px solid #000
+  }
+
+  .comparison-table th,
+  .comparison-table td {
+    border: 1px solid #000;
+    padding: var(--space-sm)
   }
 }
 
-/* Reduced Motion */
-@media (prefers-reduced-motion: reduce) {
+/* ===== Accessibility prefs ===== */
+@media (prefers-contrast:high) {
+  :root {
+    --border-primary: #000;
+    --text-secondary: #000
+  }
+
+  .compare-vs {
+    border-width: 3px;
+    font-weight: var(--font-bold)
+  }
+
+  .comparison-table {
+    border-width: 2px
+  }
+
+  .comparison-table th,
+  .comparison-table td {
+    border-width: 1px
+  }
+}
+
+@media (prefers-reduced-motion:reduce) {
+  html {
+    scroll-behavior: auto
+  }
 
   *,
   *::before,
   *::after {
-    animation-duration: 0.01ms !important;
+    animation-duration: .01ms !important;
     animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-
-  html {
-    scroll-behavior: auto;
+    transition-duration: .01ms !important
   }
 
   .header-nav,
@@ -3251,22 +3040,21 @@ select:hover {
   .status-card,
   .referral-card,
   .speed-card,
-  .back-to-top {
+  .back-to-top,
+  .compare-vs,
+  .comparison-hiding,
+  .comparison-loading .loading-spinner {
     transition: none !important;
-    animation: none !important;
+    animation: none !important
+  }
+
+  .compare-vs:hover {
+    transform: none
   }
 }
 
-/* High Contrast */
-@media (prefers-contrast: high) {
-  :root {
-    --border-primary: #000;
-    --text-secondary: #000;
-  }
-}
-
-/* Coarse Pointer (Touch Devices) */
-@media (pointer: coarse) {
+/* ===== Touch/pointer ===== */
+@media (pointer:coarse) {
 
   .nav-link:hover,
   .btn:hover,
@@ -3276,6 +3064,6 @@ select:hover {
   .referral-card:hover,
   .note-card:hover,
   .resource-item:hover {
-    transform: none;
+    transform: none
   }
 }
\ No newline at end of file