From e41de09a55705df11643b251f7b8366e8035db4a Mon Sep 17 00:00:00 2001
From: Ada <ada@radicle.dev.ryph.ai>
Date: Mon, 5 Oct 2026 15:13:55 +0000
Subject: [PATCH] Fade garden promo flower behind overlapping text

Ryph-Run: r-02c72dd80d
---
 src/marketing/Landing.svelte | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/marketing/Landing.svelte b/src/marketing/Landing.svelte
index bcc3178c2..afc9dccf7 100644
--- a/src/marketing/Landing.svelte
+++ b/src/marketing/Landing.svelte
@@ -408,13 +408,30 @@
     gap: 2rem;
     padding: 2rem;
     margin-bottom: 6rem;
-    background:
-      url("/marketing/images/garden.png") no-repeat right center,
-      var(--color-accent-citrus-500);
-    background-size: cover;
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    container-type: inline-size;
+    background-color: var(--color-accent-citrus-500);
     border-radius: var(--border-radius-tiny);
   }
 
+  .garden-promo::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: url("/marketing/images/garden.png") no-repeat right center;
+    background-size: cover;
+    transition: opacity 0.2s ease;
+  }
+
+  @container (max-width: 48rem) {
+    .garden-promo::before {
+      opacity: 0.4;
+    }
+  }
+
   .garden-promo-text h3,
   .garden-promo-text p {
     margin: 0;
@@ -456,6 +473,10 @@
       aspect-ratio: 3 / 2;
     }
 
+    .garden-promo::before {
+      opacity: 0.4;
+    }
+
     .garden-promo {
       flex-direction: column;
       align-items: flex-start;