fix(bento): add global !important override for tile width

Scoped CSS in BentoTile.astro was supposed to enforce
min-width: 0 + width: 100%, but the tiles were still
rendering at different widths in the same row.

Adding a global !important override in global.css that
applies to ALL .bento-tile instances regardless of
scoping, plus a flex column layout so tile-body fills
available space and pushes the CTA to the bottom.

This guarantees equal width + equal height in the row.

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/BentoTile.astro

@@ -69,7 +69,7 @@ const revealClass = reveal ? 'reveal' : '';
     transform-style: preserve-3d;
     min-height: 380px;
     min-width: 0;
-    width: 100%;
+    width: 100% !important;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;

src/styles/global.css

@@ -830,3 +830,29 @@ p {
     padding: 16px 28px;
   }
 }
+
+
+/* ============================================
+   BENTO TILE — global override (unscoped)
+   Forces equal-width tiles regardless of content
+   ============================================ */
+.bento-tile {
+  min-width: 0 !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
+  min-height: 380px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Make tile-body grow to push CTA to bottom */
+.bento-tile .tile-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.bento-tile .tile-body > .mega-cta,
+.bento-tile .tile-body > .btn,
+.bento-tile .tile-body > a:last-child {
+  margin-top: auto;
+}