Add pricing page and update meal card interactions

- Introduced a new pricing page with mode-specific pricing options.
- Updated meal card data attributes and descriptions for clarity.
- Enhanced meal card interactions to navigate to the pricing page.
- Removed toast notifications for a cleaner user experience.
- Added pricing styles for better layout and responsiveness.

script.js

@@ -1,17 +1,18 @@
-const toast = document.querySelector(".toast");
-const showToast = (goal) => {
-  toast.textContent = `${goal} mode selected — your box is almost ready.`;
-  toast.classList.add("show");
-  window.setTimeout(() => toast.classList.remove("show"), 3200);
-};
-
 document.querySelectorAll(".meal-card").forEach((card) => {
-  const action = card.querySelector(".card-action");
-  action.addEventListener("click", () => showToast(card.dataset.goal));
+  const openPricing = () => {
+    window.location.href = `pricing.html?mode=${encodeURIComponent(card.dataset.mode)}`;
+  };
+
+  card.querySelector(".card-action").addEventListener("click", openPricing);
+  card.addEventListener("click", (event) => {
+    if (event.target.closest(".card-action")) return;
+    openPricing();
+  });
+
   card.addEventListener("keydown", (event) => {
     if ((event.key === "Enter" || event.key === " ") && event.target === card) {
       event.preventDefault();
-      showToast(card.dataset.goal);
+      openPricing();
     }
   });
 });