/* SAFE APPEARANCE EDITS: campaign colours are owned here. */
:root {
  --green: #07864b;
  --green-dark: #056938;
  --green-soft: #edf8f0;
  --ink: #102c1e;
  --muted: #5e7566;
  --line: #d4e0d7;
  --surface: #fff;
  --page: #f5f7f5;
  --gold: #ffcb59;
  --danger: #b92f3a;
  --shadow: 0 14px 34px rgba(14, 64, 38, .08)
}
* {
  box-sizing: border-box
}
html,body {
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: hidden
}
body {
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%
}
button,input,select {
  font: inherit
}
button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}
button:focus-visible,input:focus-visible,select:focus-visible {
  outline: 3px solid rgba(7,134,75,.35);
  outline-offset: 2px
}
.demo-banner {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  background: var(--green-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-align: center
}
.demo-banner span {
  padding: 0 7px;
  opacity: .75
}
.page-shell {
  width: 100%;
  max-width: 430px;
  min-height: calc(100vh - 38px);
  margin: 0 auto;
  overflow: hidden;
  background: var(--surface)
}
.screen {
  display: none;
  padding: 20px 16px 32px;
  animation: screen-in .2s ease both
}
.screen.is-active {
  display: block
}
@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(4px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
.eyebrow,.step-mark,.form-screen label,.reward-card p,.reward-card>span,.engagement-strip span,.pulse,.progress-title span,.question-count,.share-check-card p {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em
}
.eyebrow {
  margin: 0 0 9px;
  color: var(--green)
}
/* Artwork zone: set CONFIG.campaign.artworkPath to use a real campaign image. */
.artwork {
  position: relative;
  height: 196px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg,#05703c 0%,#0b9b55 54%,#1eb467 100%)
}
.campaign-artwork-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit
}
.campaign-artwork-image[hidden] {
  display: none!important
}
.artwork.has-artwork {
  height: auto;
  background: #080807;
  box-shadow: var(--shadow)
}
.artwork.has-artwork::before,
.artwork.has-artwork .artwork-shine,
.artwork.has-artwork .artwork-topline,
.artwork.has-artwork .artwork-copy,
.artwork.has-artwork .artwork-note,
.artwork.has-artwork .artwork-coins {
  display: none
}
.artwork::before {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  top: -90px;
  right: -75px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(255,255,255,.04),0 0 0 70px rgba(255,255,255,.03)
}
.artwork-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,rgba(255,255,255,.16),transparent 45%)
}
.artwork-topline {
  position: absolute;
  top: 18px;
  left: 18px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em
}
.artwork-copy {
  position: absolute;
  top: 57px;
  left: 18px;
  right: 18px;
  line-height: .88
}
.artwork-copy em {
  display: block;
  color: var(--gold);
  font: 700 32px/1 Georgia,"Times New Roman",serif
}
.artwork-copy strong {
  display: block;
  max-width: 100%;
  color: #fff;
  font-size: clamp(31px,9.5vw,39px);
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: .95;
  overflow-wrap: anywhere
}
.artwork-note {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 5px;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em
}
.artwork-coins {
  display: none
}
.landing-copy {
  padding: 20px 0 15px
}
.landing-copy h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(27px,7.7vw,33px);
  font-weight: 750;
  letter-spacing: -.052em;
  line-height: 1.08
}
.landing-copy h1 [data-landing-headline] {
  white-space: normal
}
.landing-copy h1 [data-reward-amount] {
  display: block;
  margin-top: 3px;
  color: var(--green);
  white-space: nowrap
}
.supporting-copy {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45
}
.highlight-row {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin-bottom: 14px
}
.highlight-row div {
  min-width: 0;
  padding: 13px 4px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfdfb;
  text-align: center
}
.highlight-row strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap
}
.highlight-row span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em
}
.primary-button,.action-button,.whatsapp-button,.answer-button,.secondary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  transition: transform .15s ease,opacity .15s ease
}
.primary-button {
  gap: 12px;
  background: var(--green);
  color: #fff
}
.primary-button span,.action-button span {
  font-size: 22px;
  line-height: 0
}
.primary-button:active,.action-button:active,.whatsapp-button:active,.answer-button:active,.secondary-button:active {
  transform: scale(.985)
}
.primary-button.locked {
  background: #dbe6de;
  color: #87988d;
  cursor: not-allowed
}
.form-screen,.share-screen,.question-screen {
  padding-top: 25px
}
.back-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #557060;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em
}
.step-mark {
  margin-top: 26px;
  color: var(--green)
}
.form-screen h2,.share-screen h2,.question-screen h2,.social-heading h2 {
  margin: 6px 0 21px;
  color: var(--ink);
  font-size: clamp(28px,8.5vw,34px);
  font-weight: 750;
  letter-spacing: -.045em;
  line-height: 1.05
}
.form-screen form {
  display: grid;
  gap: 8px
}
.form-screen label {
  margin-top: 8px;
  color: #37624a;
  font-size: 10px
}
.form-screen input,.form-screen select,.comment-form input {
  width: 100%;
  min-width: 0;
  min-height: 51px;
  padding: 0 14px;
  border: 1px solid #bcd1c1;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 16px
}
.form-screen input::placeholder,.comment-form input::placeholder {
  color: #839187
}
.form-screen .primary-button {
  margin-top: 16px
}
.field-error {
  min-height: 18px;
  margin: 0;
  color: var(--danger);
  font-size: 13px
}
.question-screen {
  min-height: calc(100vh - 38px);
  text-align: center
}
.question-screen .back-button {
  float: left
}
.question-screen .step-mark {
  clear: both;
  padding-top: 28px
}
.question-count {
  margin: 26px 0 10px;
  color: var(--green)
}
.question-screen h2 {
  max-width: 350px;
  margin: 0 auto 26px;
  font-size: clamp(27px, 8vw, 34px)
}
.answer-stack {
  display: grid;
  gap: 10px;
  max-width: 355px;
  margin: 0 auto
}
.answer-button {
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 20px rgba(5, 105, 56, .13)
}
.answer-button + .answer-button {
  border: 1px solid #a9c9b4;
  background: #fff;
  color: var(--ink);
  box-shadow: none
}
.question-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 26px 0 0
}
.question-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c7d7cc
}
.question-dots span.is-active {
  background: var(--green)
}
.share-screen {
  text-align: center
}
.share-screen .back-button {
  float: left
}
.share-screen .step-mark {
  clear: both;
  padding-top: 28px
}
.share-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  margin: 20px auto 14px;
  border: 1px solid #b6dbc0;
  border-radius: 10px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 27px
}
.share-screen h2 {
  margin-bottom: 8px
}
.share-screen>p {
  max-width: 325px;
  margin: 0 auto 20px;
  color: #3f5f4d;
  font-size: 15px;
  line-height: 1.5
}
.share-progress-card {
  margin: 0 0 10px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdfb;
  text-align: left
}
.progress-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px
}
.progress-title strong {
  color: var(--ink);
  font-size: 18px
}
.progress-title span {
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap
}
.progress-track {
  height: 8px;
  margin: 14px 0 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce8df
}
.progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transition: width .3s ease
}
.progress-ticks {
  display: flex;
  justify-content: space-between;
  color: #789081;
  font-size: 10px
}
.whatsapp-button {
  gap: 8px;
  margin-bottom: 10px;
  background: #20c766;
  color: #062414;
  box-shadow: 0 8px 20px rgba(32, 199, 102, .16)
}
.whatsapp-mark {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 14px
}
.reward-screen {
  padding-top: 20px
}
.reward-card {
  position: relative;
  overflow: hidden;
  padding: 27px 16px 20px;
  border: 1px solid #b8dbc1;
  border-radius: 14px;
  background: #f1faf3;
  text-align: center
}
.reward-card::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  top: -195px;
  left: 50%;
  border: 1px solid rgba(7,134,75,.15);
  border-radius: 50%;
  transform: translateX(-50%)
}
.reward-card>* {
  position: relative
}
.reward-card p {
  margin: 0;
  color: var(--green)
}
.reward-card h2 {
  margin: 7px 0 9px;
  color: var(--green-dark);
  font-size: clamp(53px,16vw,70px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .9
}
.reward-rule {
  width: 48px;
  height: 2px;
  margin: 0 auto 10px;
  background: #1caf63
}
.reward-card>span {
  color: #537562;
  font-size: 10px
}
.reward-sparkle {
  position: absolute!important;
  top: 14px;
  right: 16px;
  color: var(--green)
}
.action-stack {
  display: grid;
  gap: 9px;
  margin: 15px 0 10px
}
.action-button {
  justify-content: space-between;
  padding: 0 16px;
  border: 1px solid #b6d5be;
  background: #fff;
  color: var(--ink)
}
.action-button:first-child {
  border-color: var(--green);
  background: var(--green);
  color: #fff
}
.action-note {
  min-height: 18px;
  margin: 0 0 26px;
  padding: 8px 10px;
  border: 1px solid #b6d5be;
  border-radius: 8px;
  background: var(--green-soft);
  color: #37624a;
  font-size: 12px;
  font-weight: 700;
  text-align: center
}
.social-section {
  padding-top: 24px;
  border-top: 1px solid var(--line)
}
.landing-social-section {
  margin-top: 30px
}
.social-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px
}
.social-heading h2 {
  margin: 4px 0 0;
  font-size: 27px
}
.pulse {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  color: #557060;
  font-size: 9px;
  white-space: nowrap
}
.pulse span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #18a65a
}
.engagement-strip {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin: 16px 0 12px;
  padding: 13px 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfdfb
}
.engagement-strip div {
  min-width: 0;
  text-align: center
}
.engagement-strip strong {
  display: block;
  color: var(--green);
  font-size: 17px
}
.engagement-strip span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .07em
}
.typing-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--green-soft);
  color: #557060;
  font-size: 13px
}
.mini-avatar,.avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 800
}
.mini-avatar {
  width: 25px;
  height: 25px;
  background: #d97d4c;
  font-size: 11px
}
.typing-row i {
  display: flex;
  gap: 3px
}
.typing-row b {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
  animation: blink 1s infinite
}
.typing-row b:nth-child(2) {
  animation-delay: .15s
}
.typing-row b:nth-child(3) {
  animation-delay: .3s
}
@keyframes blink {
  0%,100% {
    opacity: .25;
    transform: translateY(0)
  }
  50% {
    opacity: 1;
    transform: translateY(-2px)
  }
}
.comment-feed {
  display: grid;
  gap: 8px
}
.comment {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  animation: comment-in .25s ease both
}
.comment.reply {
  margin-left: 20px;
  grid-template-columns: 30px minmax(0,1fr);
  padding: 10px;
  background: #f7fbf8
}
.avatar {
  width: 34px;
  height: 34px;
  font-size: 13px
}
.comment.reply .avatar {
  width: 30px;
  height: 30px;
  font-size: 11px
}
.comment-main {
  min-width: 0
}
.comment-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0
}
.comment-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap
}
.comment-time {
  color: #7a8d7f;
  font-size: 11px;
  white-space: nowrap
}
.comment-text {
  margin: 5px 0 8px;
  color: #385645;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere
}
.comment-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #6b8273;
  font-size: 12px;
  font-weight: 700
}
.comment-actions button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit
}
.comment-actions button.liked {
  color: var(--green)
}
.comment-likes {
  margin-left: auto;
  white-space: nowrap
}
.comment-likes::before {
  content: "♥ ";
  color: #df5460
}
.comment-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line)
}
.comment-form input {
  min-height: 46px
}
.comment-form button {
  width: 46px;
  flex: 0 0 46px;
  border: 0;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-size: 22px;
  font-weight: 800
}
@keyframes comment-in {
  from {
    opacity: 0;
    transform: translateY(5px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
.share-check-overlay {
  position: fixed;
  z-index: 55;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 41, 25, .5);
  backdrop-filter: blur(4px)
}
.share-check-overlay[hidden] {
  display: none
}
.share-check-card {
  width: min(100%, 356px);
  padding: 28px 20px 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(5, 37, 21, .24);
  text-align: center
}
.share-check-card p {
  margin: 0;
  color: var(--green)
}
.share-check-card h2 {
  margin: 8px 0 8px;
  color: var(--ink);
  font-size: 29px;
  letter-spacing: -.04em;
  line-height: 1.05
}
.share-check-card > span {
  display: block;
  margin-bottom: 21px;
  color: var(--muted);
  font-size: 15px
}
.share-check-card .primary-button {
  margin-bottom: 9px
}
.secondary-button {
  border: 1px solid #b6d5be;
  background: #fff;
  color: var(--ink)
}
.welcome-overlay {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8,58,31,.44);
  backdrop-filter: blur(5px);
  transition: opacity .2s ease,visibility .2s ease
}
.welcome-overlay.is-hidden {
  visibility: hidden;
  opacity: 0
}
.welcome-card {
  position: relative;
  width: min(100%,360px);
  padding: 28px 20px 19px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(9,65,35,.23);
  text-align: center
}
.welcome-card p {
  margin: 0;
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em
}
.welcome-card h2 {
  margin: 8px 0 11px;
  color: var(--ink);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.06
}
.welcome-card i {
  color: var(--green);
  font-style: normal
}
.welcome-card strong {
  display: block;
  margin-bottom: 19px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em
}
.welcome-accent {
  position: absolute;
  top: 13px;
  right: 15px;
  color: var(--green)
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0
}
@media(max-width:359px) {
  .screen {
    padding-right: 12px;
    padding-left: 12px
  }
  .artwork {
    height: 180px
  }
  .artwork-copy strong {
    font-size: 30px
  }
  .landing-copy h1 {
    font-size: 24px
  }
  .highlight-row {
    gap: 5px
  }
  .highlight-row strong {
    font-size: 11px
  }
  .highlight-row span {
    font-size: 8px
  }
  .engagement-strip strong {
    font-size: 15px
  }
}
@media(min-width:431px) {
  .page-shell {
    box-shadow: 0 0 0 1px rgba(19,44,29,.04),0 12px 50px rgba(19,44,29,.06)
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior: auto!important;
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important
  }
}


/* Share flow and payment-status additions. */
.landing-screen.is-active > * { animation: landing-rise .34s ease both }
.landing-screen.is-active > *:nth-child(2) { animation-delay: .04s }
.landing-screen.is-active > *:nth-child(3) { animation-delay: .08s }
.landing-screen.is-active > *:nth-child(4) { animation-delay: .12s }
.landing-screen.is-active > *:nth-child(5) { animation-delay: .16s }
@keyframes landing-rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }
.share-intro { max-width: 315px; margin-bottom: 14px!important }
.share-steps { display: grid; gap: 7px; margin: 0 0 14px; text-align: left }
.share-step { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfb }
.share-screen.is-active .share-step { animation: step-in .28s ease both }
.share-screen.is-active .share-step:nth-child(2) { animation-delay: .06s }
.share-screen.is-active .share-step:nth-child(3) { animation-delay: .12s }
@keyframes step-in { from { opacity: 0; transform: translateY(5px) } to { opacity: 1; transform: translateY(0) } }
.share-step span { flex: 0 0 auto; color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .09em }
.share-step strong { color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .045em; line-height: 1.25 }
.primary-button.locked { cursor: pointer }
.share-lock-note { min-height: 18px; margin: 9px 0 0; color: #557060; font-size: 12px; font-weight: 700; text-align: center }
.status-screen { padding-top: 36px; text-align: center }
.status-screen h2 { margin: 4px 0 19px; color: var(--ink); font-size: clamp(29px, 8.6vw, 36px); font-weight: 750; letter-spacing: -.05em; line-height: 1.04 }
.qualification-card { padding: 19px 15px; border: 1px solid #b8dbc1; border-radius: 14px; background: var(--green-soft) }
.qualification-card strong { display: block; color: var(--green-dark); font-size: 31px; font-weight: 900; letter-spacing: -.05em }
.qualification-card span { display: block; margin-top: 2px; color: #557060; font-size: 10px; font-weight: 800; letter-spacing: .12em }
.qualification-track { height: 8px; margin-top: 15px; overflow: hidden; border-radius: 999px; background: #cfe2d4 }
.qualification-track div { width: 0; height: 100%; border-radius: inherit; background: var(--green) }
.status-copy { max-width: 330px; margin: 16px auto; color: #3f5f4d; font-size: 15px; line-height: 1.48 }
.status-screen .whatsapp-button { margin-bottom: 10px }
.status-screen .action-note { margin-top: 10px }


/* Immediate local reaction feedback for newly posted activity. */
.comment.received-like .comment-likes { animation: live-like .55s ease; color: #d85564; }
@keyframes live-like { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.16); } }