fix: move .page-container into @layer utilities — resolves padding cascade conflict

Root cause: .page-container was declared outside any CSS layer, giving it higher
specificity than Tailwind's @layer utilities classes. This caused all py-, px-,
gap- utilities on elements that also had .page-container to be overridden.

Fix: wrap .page-container and its responsive breakpoints inside @layer utilities
so the cascade order is: base < components < utilities (correct Tailwind v4 order).

src/style.css

@@ -54,46 +54,44 @@
   --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
 }
 
-/* ─── Base Reset ────────────────────────────────────────── */
+/* ─── Base overrides ─────────────────────────────────────── */
-*, *::before, *::after {
+@layer base {
-  box-sizing: border-box;
+  html {
-  margin: 0;
-  padding: 0;
-}
-
-html {
     scroll-behavior: smooth;
-}
+  }
 
-body {
+  body {
     font-family: var(--font-sans);
     color: #475569;
     background-color: #ffffff;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+  }
 }
 
-/* ─── Page Container ────────────────────────────────────── */
+/* ─── Custom component utilities ─────────────────────────── */
-.page-container {
+@layer utilities {
+  .page-container {
     max-width: 1440px;
     margin-inline: auto;
     padding-inline: 100px;
-}
+  }
 
-@media (max-width: 1280px) {
+  @media (max-width: 1280px) {
     .page-container {
       padding-inline: 64px;
     }
-}
+  }
 
-@media (max-width: 1024px) {
+  @media (max-width: 1024px) {
     .page-container {
       padding-inline: 40px;
     }
-}
+  }
 
-@media (max-width: 640px) {
+  @media (max-width: 640px) {
     .page-container {
       padding-inline: 24px;
     }
+  }
 }