/* =====================================================
   how-it-works.css — How It Works page specific styles
===================================================== */

/* =====================================================
   SECTION CURVE-TOP COLORS (how-it-works sections)
===================================================== */
.s-garden  .curve-top::after { background: var(--green-light); }
.s-tools   .curve-top::after { background: var(--cream); }
.s-hiw-cta .curve-top::after { background: var(--dark-green); }
footer     .curve-top::after { background: var(--darkest); }

/* =====================================================
   PAGE HERO
===================================================== */
.s-hiw-hero {
  background: var(--cream);
  padding: 6rem 0 4rem;
  text-align: center;
}
.s-hiw-hero h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: var(--tracking);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.s-hiw-hero p {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: rgba(45,45,45,.65);
  max-width: 48ch;
  margin: 0 auto;
  line-height: 1.65;
}

/* =====================================================
   CTA STRIP (dark green, centered)
===================================================== */
.s-hiw-cta {
  background: var(--dark-green);
  padding: 6rem 0;
  color: #fff;
  text-align: center;
}
.s-hiw-cta h2 { color: #fff; margin-bottom: 1rem; }
.s-hiw-cta p {
  color: rgba(255,255,255,.7);
  max-width: 48ch;
  margin: 0 auto 2.5rem;
  line-height: var(--lh-body);
}