<style>

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300;1,9..144,400&family=DM+Sans:wght@300;400;500;600;700&display=swap');

.gnc2 *, .gnc2 *::before, .gnc2 *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── SECTION ── */
.gnc2 {
  width: 100% !important;
  display: block !important;
  background: #F8F8F5 !important;
  font-family: 'DM Sans', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  padding: 64px 24px 72px !important;
  border-top: 1px solid #EEEEE9 !important;
}

/* ── INNER ── */
.gnc2-inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* ── HEADER — quiet, subordinate, doesn't compete with hero ── */
.gnc2-header {
  margin: 0 0 36px 0 !important;
  padding: 0 !important;
}

/* Combined headline: non-italic + italic on same line, subordinate to hero */
.gnc2-title {
  font-family: 'Fraunces', serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -.5px !important;
  line-height: 1.15 !important;
  color: #1A1A18 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
}
/* Italic part of the headline — same register as hero em treatment */
.gnc2-title em {
  font-style: italic !important;
  font-weight: 300 !important;
  color: #1A1A18 !important;
  font-family: 'Fraunces', serif !important;
}

/* ── CARD GRID ── */
.gnc2-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

/* ── INDIVIDUAL CARD ── */
.gnc2-card {
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid #EAEAE5 !important;
  padding: 22px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  transition: border-color .18s !important;
}
.gnc2-card:hover {
  border-color: #CDFF50 !important;
}

/* Card number — subtle anchor, not a distraction */
.gnc2-card-num {
  font-family: 'Fraunces', serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #D0D0CA !important;
  letter-spacing: .08em !important;
  display: block !important;
  line-height: 1 !important;
  background: transparent !important;
  border: none !important;
}

/* Card declaration text */
.gnc2-card-text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #1A1A18 !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
}

/* ── CLOSING LINE ── */
.gnc2-closing {
  font-family: 'Fraunces', serif !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  color: #6E6E68 !important;
  display: block !important;
  margin: 28px 0 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* ── RESPONSIVE ── */

/* Tablet 560px — 2×2 grid */
@media (min-width: 560px) {
  .gnc2-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .gnc2-card {
    padding: 24px 22px !important;
  }
}

/* Desktop 900px — 4 columns in one row */
@media (min-width: 900px) {
  .gnc2 {
    padding: 80px 48px 88px !important;
  }
  .gnc2-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
  .gnc2-card {
    padding: 28px 24px !important;
  }
  .gnc2-title { font-size: 32px !important; }
  .gnc2-card-text {
    font-size: 15px !important;
  }

}

/* Large 1100px */
@media (min-width: 1100px) {
  .gnc2 {
    padding: 88px 60px 96px !important;
  }
  .gnc2-card {
    padding: 32px 28px !important;
  }
}
</style>

<section class="gnc2">
  <div class="gnc2-inner">

    <!-- HEADER — combined non-italic + italic, same line, subordinate to hero -->
    <div class="gnc2-header">
      <div class="gnc2-title" role="heading" aria-level="2">
        Earn & spend credits <em>on every product.</em>
      </div>
    </div>

    <!-- 4 CARDS — the visual centrepiece of this section -->
    <div class="gnc2-grid" role="list">

      <!-- Card 1 -->
      <div class="gnc2-card" role="listitem">
        <span class="gnc2-card-num">01</span>
        <span class="gnc2-card-text">
          Earn and spend your credits on any brand,
          any product, any order.
          No exceptions.
        </span>
      </div>

      <!-- Card 2 -->
      <div class="gnc2-card" role="listitem">
        <span class="gnc2-card-num">02</span>
        <span class="gnc2-card-text">
          No minimum spend to earn or redeem.
        </span>
      </div>

      <!-- Card 3 -->
      <div class="gnc2-card" role="listitem">
        <span class="gnc2-card-num">03</span>
        <span class="gnc2-card-text">
          It never expires.
        </span>
      </div>

      <!-- Card 4 -->
      <div class="gnc2-card" role="listitem">
        <span class="gnc2-card-num">04</span>
        <span class="gnc2-card-text">
          No subscription.
          No commitment.
          No fine print.
        </span>
      </div>

    </div>

    <!-- CLOSING — quiet, framing the cards -->
    <p class="gnc2-closing">
      The more you explore, the more you earn.
      That’s the whole thing.
    </p>

  </div>
</section>