/*
 * points.css — public points explainer page (/points). Mobile-first.
 */
.wg-points-page { max-width: 880px; margin: 0 auto; }

/* Hero */
.wg-pp-hero { text-align: center; padding: 8px 0 22px; }
.wg-pp-hero-art { display: flex; justify-content: center; margin-bottom: 10px; }
.wg-pp-title { font-size: 1.7rem; margin: 0 0 6px; }
.wg-pp-tagline { font-size: 1.05rem; color: var(--wg-color-dark, #0a7d37); font-weight: 700; margin: 0 0 12px; }
.wg-pp-intro { color: var(--wg-muted, #555); max-width: 560px; margin: 0 auto 18px; }
.wg-pp-cta { margin-top: 14px; }
.wg-pp-cta .wg-btn { width: auto; min-width: 200px; }

/* Sections */
.wg-pp-section { margin: 26px 0; }
.wg-pp-h2 { font-size: 1.2rem; text-align: center; margin: 0 0 18px; }
.wg-pp-h3 { font-size: 1.05rem; margin: 0 0 6px; }

/* How-it-works flow */
.wg-pp-flow {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 6px;
}
.wg-pp-step {
  flex: 1 1 150px; max-width: 190px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 12px; background: #f6f8f7; border-radius: 14px;
}
.wg-pp-step-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 999px;
  background: #e8f7ee; color: var(--wg-color, #0eaf4c); margin-bottom: 8px;
}
.wg-pp-step-ico .wg-ico { width: 24px; height: 24px; }
.wg-pp-step-t { font-weight: 800; margin-bottom: 4px; }
.wg-pp-step-d { font-size: 0.82rem; color: var(--wg-muted, #555); }
.wg-pp-arrow { display: flex; align-items: center; color: #b8c2bd; flex: 0 0 auto; }
@media (max-width: 560px) {
  .wg-pp-flow { flex-direction: column; align-items: stretch; }
  .wg-pp-step { max-width: none; flex-direction: row; text-align: left; gap: 12px; }
  .wg-pp-step-ico { margin-bottom: 0; flex: none; }
  .wg-pp-step-body { display: block; }
  .wg-pp-arrow { transform: rotate(90deg); justify-content: center; }
}

/* Referral highlight */
.wg-pp-ref {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(100deg, #e8f7ee, #f3fbf6);
  border: 1px solid #cfead9; border-radius: 16px; padding: 16px 18px; margin: 26px 0;
}
.wg-pp-ref-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 999px; background: #fff; color: var(--wg-color, #0eaf4c);
}
.wg-pp-ref-ico .wg-ico { width: 28px; height: 28px; }
.wg-pp-ref p { margin: 0; color: #355e46; }

/* Ways-to-earn grid */
.wg-pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.wg-pp-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 14px; border: 1px solid var(--wg-border, #e4e4e4); border-radius: 14px; background: #fff;
}
.wg-pp-card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; background: #f3fbf6; color: var(--wg-color, #0eaf4c); margin-bottom: 8px;
}
.wg-pp-card-ico .wg-ico { width: 22px; height: 22px; }
.wg-pp-card-pts { font-weight: 800; color: var(--wg-color-dark, #0a7d37); font-size: 1.05rem; }
.wg-pp-card-t { font-weight: 700; margin: 2px 0 4px; }
.wg-pp-card-b { font-size: 0.82rem; color: var(--wg-muted, #555); }
.wg-pp-note { text-align: center; font-size: 0.84rem; color: var(--wg-muted, #555); margin: 16px 0 0; }

/* Fair play / safety */
.wg-pp-safety {
  margin: 26px 0; padding: 18px; border-radius: 16px;
  background: #fafbfc; border: 1px solid var(--wg-border, #e4e4e4); text-align: center;
}
.wg-pp-safety p { color: var(--wg-muted, #555); max-width: 620px; margin: 0 auto 14px; font-size: 0.9rem; }