/* =====================================================================
   GardenStack — "Organic & Lush" visual refresh (override layer)
   Loaded LAST in <head> so it overrides the inline <style> blocks by
   source order. Pure skin: colour / depth / type / motion / wave
   dividers + Features-section rebuild. No markup changes required.
   Remove the <link> to fully revert.
   ===================================================================== */

:root{
  /* warm the base + richer brand greens, promote terracotta to accent */
  --gs-cream:#f7f4ec;            /* warm paper base for light sections   */
  --gs-cream-2:#f1ece0;
  --gs-green-top:#c4ddac;        /* lush band gradient (verdant, fresh)  */
  --gs-green-bot:#a8cd84;
  --gs-leaf:#3f6b34;             /* deeper foliage green for accents     */
  --gs-terra:#d4704a;
  --gs-terra-1:#e2895a;
  --gs-terra-2:#c45f38;
  --gs-honey:#e0a04f;
  --gs-ink:#284326;             /* deep heading green                    */
  --gs-shadow-soft:0 22px 45px -26px rgba(40,67,38,.55),0 6px 16px -10px rgba(40,67,38,.28);
  --gs-shadow-lift:0 34px 60px -28px rgba(40,67,38,.55),0 10px 22px -12px rgba(40,67,38,.30);
  --gs-radius:22px;
  /* single large foliage sprig — used as ONE non-repeating accent, not a tile */
  --gs-foliage:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 320'%3E%3Cdefs%3E%3Cpath id='l' d='M0 0 C28 -20 33 -68 0 -104 C-33 -68 -28 -20 0 0 Z'/%3E%3C/defs%3E%3Cg opacity='0.13'%3E%3Cpath d='M134 316 C121 248 120 188 129 116' fill='none' stroke='%23244a20' stroke-width='7' stroke-linecap='round'/%3E%3Cg fill='%23244a20'%3E%3Cuse href='%23l' transform='translate(130 206) rotate(42) scale(.86)'/%3E%3Cuse href='%23l' transform='translate(128 206) rotate(-44) scale(.82)'/%3E%3Cuse href='%23l' transform='translate(129 158) rotate(26) scale(.98)'/%3E%3Cuse href='%23l' transform='translate(128 158) rotate(-28) scale(.94)'/%3E%3Cuse href='%23l' transform='translate(129 120) rotate(6) scale(1.06)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* warm the global background a touch */
body{background:var(--gs-cream);}

/* ---------------------------------------------------------------------
   1. LIGHT SECTIONS → clean warm cream (NO texture: keeps text crisp,
      kills the "tiled wallpaper" template tell)
   ------------------------------------------------------------------- */
.product-showcase,
.features,
.about-section{
  background:var(--gs-cream) !important;
}
.product-showcase{position:relative;z-index:0;}

/* ---------------------------------------------------------------------
   2. GREEN BANDS → lush verdant gradient + texture + WAVE DIVIDERS
   ------------------------------------------------------------------- */
.why-it-works,
.how-it-works{
  position:relative;
  z-index:0;
  /* lush verdant base + soft, NON-repeating "canopy light" pools for
     organic depth. No tiled motif -> zero wallpaper/grid tell. */
  background:
    var(--gs-foliage) right -64px top -84px / 360px auto no-repeat,
    radial-gradient(140% 100% at 6% -15%, rgba(255,252,238,.55) 0%, rgba(255,252,238,0) 50%),
    radial-gradient(115% 95% at 100% -8%, rgba(206,228,184,.60) 0%, rgba(206,228,184,0) 46%),
    radial-gradient(135% 125% at 90% 120%, rgba(44,82,38,.28) 0%, rgba(44,82,38,0) 58%),
    linear-gradient(166deg,var(--gs-green-top) 0%,#b8d69c 50%,var(--gs-green-bot) 100%) !important;
}
/* keep cards/content above the wave pseudo-elements */
.why-it-works-container,
.how-it-works-container{position:relative;z-index:2;}

/* wave at the BOTTOM of a green band — cream rises up into the green */
.why-it-works::after,
.how-it-works::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:86px;z-index:1;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C300,98 600,98 840,56 C1080,16 1260,18 1440,44 L1440,90 L0,90 Z' fill='%23f7f4ec'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}
/* wave at the TOP of the set-it-up band — cream dips down into the green */
.how-it-works::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:86px;z-index:1;
  pointer-events:none;transform:rotate(180deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C300,98 600,98 840,56 C1080,16 1260,18 1440,44 L1440,90 L0,90 Z' fill='%23f7f4ec'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}

/* ---------------------------------------------------------------------
   3. SECTION HEADINGS → organic terracotta→honey flourish
   ------------------------------------------------------------------- */
.section-title,
.about-text h2,
.prestige-section h2{color:var(--gs-ink) !important;}
/* more typographic presence */
.section-title{
  font-size:clamp(2.4rem,5vw,3.6rem) !important;
  letter-spacing:.015em !important;line-height:1.04 !important;
}
.section-title::after,
.prestige-section h2::after{
  content:"";display:block;width:92px;height:6px;margin:18px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--gs-honey),var(--gs-terra) 55%,var(--gs-terra-2));
  box-shadow:0 4px 10px -4px rgba(196,95,58,.5);
}
.about-text h2::after{
  content:"";display:block;width:92px;height:6px;margin:16px 0 0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--gs-honey),var(--gs-terra) 55%,var(--gs-terra-2));
  box-shadow:0 4px 10px -4px rgba(196,95,58,.5);
}

/* ---------------------------------------------------------------------
   4. BUTTONS / CTAs → confident terracotta, full opacity, pill, lift
   ------------------------------------------------------------------- */
.cta-button,
.add-to-cart,
.ready-to-grow-btn,
.hero-content .cta-button{
  background:linear-gradient(135deg,var(--gs-terra-1) 0%,var(--gs-terra) 52%,var(--gs-terra-2) 100%) !important;
  color:#fff !important;
  opacity:1 !important;
  border-radius:999px !important;
  box-shadow:0 14px 26px -12px rgba(196,95,58,.7),0 3px 8px -4px rgba(196,95,58,.45) !important;
  letter-spacing:.6px;
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,filter .28s !important;
}
.cta-button:hover,
.add-to-cart:hover,
.ready-to-grow-btn:hover,
.hero-content .cta-button:hover{
  background:linear-gradient(135deg,var(--gs-terra-1) 0%,var(--gs-terra) 52%,var(--gs-terra-2) 100%) !important;
  transform:translateY(-3px) scale(1.02) !important;
  box-shadow:0 22px 38px -14px rgba(196,95,58,.78),0 6px 14px -6px rgba(196,95,58,.5) !important;
  filter:brightness(1.04) !important;
}
/* hero CTA: a little bigger so it commands the fold */
.hero-content .cta-button{padding:18px 40px !important;font-size:17px !important;}
/* primary buy actions should clearly outweigh adjacent controls */
.add-to-cart{padding:19px 34px !important;font-size:17px !important;}
.ready-to-grow-btn{padding:19px 44px !important;font-size:17px !important;}

/* newsletter "Get My Discount" button → terracotta pops on the green band */
.signup-button{
  background:linear-gradient(135deg,var(--gs-terra-1),var(--gs-terra-2)) !important;
  color:#fff !important;border-radius:999px !important;
  box-shadow:0 12px 22px -12px rgba(0,0,0,.45) !important;
  transition:transform .28s cubic-bezier(.22,1,.36,1),filter .28s !important;
}
.signup-button:hover:not(:disabled){
  transform:translateY(-2px) scale(1.02) !important;filter:brightness(1.05) !important;background:linear-gradient(135deg,var(--gs-terra-1),var(--gs-terra-2)) !important;
}

/* hero title/subtitle: crisper over the video */
.hero-title{text-shadow:0 1px 16px rgba(255,255,255,.55),0 1px 2px rgba(255,255,255,.6);}
.hero-subtitle{text-shadow:0 1px 10px rgba(255,255,255,.6);}

/* ---------------------------------------------------------------------
   5. CARDS → rounder, warm depth, lift on hover
   ------------------------------------------------------------------- */
.why-step-card,
.step-card,
.feature-card,
.partner-card{
  border-radius:var(--gs-radius) !important;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s,border-color .32s !important;
}
.why-step-card,
.step-card{
  background:#fff !important;
  border:1px solid rgba(40,67,38,.06) !important;
  box-shadow:var(--gs-shadow-soft) !important;
}
.why-step-card:hover,
.step-card:hover{
  transform:translateY(-8px) !important;
  box-shadow:var(--gs-shadow-lift) !important;
  border-color:rgba(212,112,74,.35) !important;
}

/* number badges → warm terracotta, a touch bigger & bolder */
.why-step-number,
.step-number{
  background:linear-gradient(135deg,var(--gs-terra-1),var(--gs-terra-2)) !important;
  width:46px !important;height:46px !important;font-size:19px !important;
  box-shadow:0 10px 18px -8px rgba(196,95,58,.7) !important;
  border:3px solid var(--gs-cream) !important;
}

/* ---------------------------------------------------------------------
   6. FEATURES → rebuild from floating icons into real lush cards
   ------------------------------------------------------------------- */
.features-grid{
  grid-template-columns:repeat(2,1fr) !important;
  gap:28px !important;max-width:920px !important;margin:36px auto 0 !important;
}
.feature-card{
  background:#fff !important;
  border:1px solid rgba(40,67,38,.06) !important;
  box-shadow:var(--gs-shadow-soft) !important;
  padding:34px 26px !important;
  min-height:0 !important;
  display:flex !important;flex-direction:column;align-items:center;
}
.feature-card:hover{
  transform:translateY(-8px) !important;
  box-shadow:var(--gs-shadow-lift) !important;
  border-color:rgba(212,112,74,.35) !important;
}
/* icon sits inside a soft leaf-green disc so every card reads as finished */
.feature-icon{
  width:132px !important;height:132px !important;min-height:0 !important;min-width:0 !important;
  margin:0 auto 22px !important;padding:20px !important;border-radius:24px !important;
  background:radial-gradient(circle at 50% 34%,#eaf3dd 0%,#d8e9c2 100%) !important;
  box-shadow:inset 0 2px 6px rgba(40,67,38,.08) !important;
}
.feature-icon img{filter:drop-shadow(0 6px 10px rgba(40,67,38,.18));}
/* card #1 "Sustainable" has no image → drop in a crisp sprout glyph */
.features .feature-card:first-child .feature-icon{
  background:radial-gradient(circle at 50% 38%,#eaf3dd 0%,#d8e9c2 100%)
    ,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%233f6b34' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 58V28'/%3E%3Cpath d='M32 34c-2-9-9-14-20-14-1 11 6 19 20 18z' fill='%237fae54' fill-opacity='.55'/%3E%3Cpath d='M32 28c1-8 7-13 18-13 1 10-6 17-18 16z' fill='%23a8cd84' fill-opacity='.6'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat:no-repeat,no-repeat !important;
  background-position:center,center !important;
  background-size:cover,62% 62% !important;
}

/* ---------------------------------------------------------------------
   7. PRODUCT IMAGE + PARTNER CARDS → soft organic polish
   ------------------------------------------------------------------- */
.main-image{
  border-radius:26px !important;
  box-shadow:var(--gs-shadow-soft) !important;
}
.partner-card{box-shadow:var(--gs-shadow-soft) !important;}

/* prestige band: warmer lush gradient (clean, no texture behind logos) */
.prestige-section{
  background:linear-gradient(160deg,#fbfaf4 0%,#edf3e4 100%) !important;
}

/* ---------------------------------------------------------------------
   8. MOTION → group fade-up on scroll (CSS-only, progressive, safe)
   Applied to GRID/GROUP wrappers (not individual cards) so it never
   fights the card hover transforms. No-ops on browsers without
   animation-timeline, and honours reduced-motion.
   ------------------------------------------------------------------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .why-steps-grid,
    .steps-grid,
    .features-grid,
    .partners-row,
    .section-title,
    .about-image,
    .about-text{
      animation:gsReveal linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 26%;
    }
    @keyframes gsReveal{
      from{opacity:0;transform:translateY(38px);}
      to{opacity:1;transform:translateY(0);}
    }
  }
}

/* ---------------------------------------------------------------------
   9. MOBILE — shrink wave height so it sits inside the band padding
   ------------------------------------------------------------------- */
@media (max-width:768px){
  .why-it-works::after,
  .how-it-works::after,
  .how-it-works::before{height:54px;}
  .why-it-works,
  .how-it-works{
    background-position:right -22px top 14px,0 0,0 0,0 0,0 0 !important;
    background-size:148px auto,auto,auto,auto,auto !important;
  }
}
