/* ============================================================
   EZPal product showcase — scoped styles for products.html only.
   Not imported by style.css / index.html. Uses EZPal's own brand
   tokens (Teal / Ivory / Ink), intentionally distinct from
   Avenor's dark/orange system in style.css.
   ============================================================ */

/* Page-specific top spacing fix: this page's first section sits
   directly under the fixed nav with no hero to push it down. */
#products-intro {
  padding-top: 168px;
}

/* ======================================================
   EZPAL SECTION — scoped brand tokens
   ====================================================== */
.ezpal {
  --ezpal-teal:      #14A38C;
  --ezpal-teal-dark: #0F7F6D;
  --ezpal-ivory:     #FFF8F0;
  --ezpal-ink:       #12131B;
  --ezpal-tint:      #E4F5F1;

  background: var(--ezpal-ivory);
  color: var(--ezpal-ink);
  border-top: 6px solid var(--ezpal-teal);
  padding: 88px 0 96px;
}

.ezpal__inner {
  max-width: 880px;
}

.ezpal__top {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.ezpal__chip {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ezpal-teal-dark);
  background: var(--ezpal-tint);
  border: 1px solid rgba(20,163,140,.35);
  border-radius: 999px;
  padding: 5px 14px;
}

/* ── Hero block: icon + name + tagline ── */
.ezpal__hero {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.ezpal__icon-frame {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(18,19,27,.18);
}
.ezpal__icon-frame svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ezpal__hero-text h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 6px;
  color: var(--ezpal-ink);
}
.ezpal__tagline {
  font-size: 1.0625rem;
  font-weight: 500;
  font-style: italic;
  color: var(--ezpal-teal-dark);
}

.ezpal__lede {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(18,19,27,.82);
  margin-bottom: 48px;
  max-width: 760px;
}

/* ── Feature grid ── */
.ezpal__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-bottom: 56px;
}
.ezpal__feature {
  background: #fff;
  border: 1px solid rgba(20,163,140,.18);
  border-radius: 16px;
  padding: 24px;
  position: relative;
}
.ezpal__feature--flagship {
  background: var(--ezpal-teal);
  border-color: var(--ezpal-teal);
  color: var(--ezpal-ivory);
  grid-column: 1 / -1;
  padding: 28px 28px 26px;
}
.ezpal__feature-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ezpal-ivory);
  background: rgba(255,248,240,.16);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 12px;
}
.ezpal__feature h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}
.ezpal__feature--flagship h3 { font-size: 1.25rem; }
.ezpal__feature p {
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(18,19,27,.72);
}
.ezpal__feature--flagship p {
  color: rgba(255,248,240,.92);
  font-size: .95rem;
}

/* ── Who it's for ── */
.ezpal__for {
  background: var(--ezpal-tint);
  border-radius: 20px;
  padding: 36px;
  margin-bottom: 48px;
}
.ezpal__for h3 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--ezpal-ink);
}
.ezpal__for p {
  font-size: .9375rem;
  line-height: 1.75;
  color: rgba(18,19,27,.8);
}
.ezpal__for p + p { margin-top: 14px; }

/* ── Status / CTA ── */
.ezpal__status {
  border-top: 1px solid rgba(20,163,140,.25);
  padding-top: 40px;
}
.ezpal__status h3 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--ezpal-ink);
}
.ezpal__status p {
  font-size: .9375rem;
  line-height: 1.7;
  color: rgba(18,19,27,.78);
  max-width: 560px;
  margin-bottom: 22px;
}

/* Reuse global .btn/.btn--primary structure, recolor for the
   teal brand scope (higher specificity than .btn--primary alone). */
.ezpal .btn--primary {
  background: var(--ezpal-teal);
  border-color: var(--ezpal-teal);
  color: var(--ezpal-ivory);
}
.ezpal .btn--primary:hover {
  background: var(--ezpal-teal-dark);
  border-color: var(--ezpal-teal-dark);
  box-shadow: 0 0 32px rgba(20,163,140,.28);
}

@media (max-width: 600px) {
  #products-intro { padding-top: 140px; }
  .ezpal { padding: 64px 0 72px; }
  .ezpal__hero { gap: 16px; }
  .ezpal__icon-frame { width: 64px; height: 64px; border-radius: 16px; }
  .ezpal__for, .ezpal__feature--flagship { padding: 24px; }
}