{"id":85,"date":"2026-01-22T11:24:02","date_gmt":"2026-01-22T11:24:02","guid":{"rendered":"https:\/\/thefiniteearth.org\/?page_id=85"},"modified":"2026-10-21T10:43:09","modified_gmt":"2026-10-21T10:43:09","slug":"pledge","status":"publish","type":"page","link":"https:\/\/thefiniteearth.org\/hindi\/pledge\/","title":{"rendered":"Take Pledge"},"content":{"rendered":"\r\n    <!-- \u2500\u2500 Fonts: the SAME stylesheet URL as the homepage ([landing_page]),\r\n         so a visitor arriving from the homepage already has it cached.\r\n         Loaded without blocking the page. \u2500\u2500 -->\r\n        <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n    <link rel=\"preload\" as=\"style\" href=\"https:\/\/fonts.googleapis.com\/css2?family=EB+Garamond:wght@400;500;600;700&#038;family=Noto+Serif:wght@400;500;600;700&#038;family=Noto+Sans+Devanagari:wght@500;600&#038;display=swap\" onload=\"this.onload=null;this.rel='stylesheet'\" \/>\r\n    <noscript><link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=EB+Garamond:wght@400;500;600;700&#038;family=Noto+Serif:wght@400;500;600;700&#038;family=Noto+Sans+Devanagari:wght@500;600&#038;display=swap\" \/><\/noscript>\r\n\r\n    <style>\r\n\/* ============================================================\r\n   v13 \u2014 PLEDGE PAGE STYLES. Everything is scoped to #fem-wrapper,\r\n   and this <style> is only printed where [femus_pledge] is used,\r\n   so the homepage and the rest of the site are untouched.\r\n   Fonts, colours and sizes follow the homepage ([landing_page]).\r\n   v15: tighter spacing; smaller, gold code + gold referral link.\r\n   ============================================================ *\/\r\nbody { overflow-x: hidden; }   \/* same guard the homepage uses for its full-bleed layout *\/\r\n\r\n#fem-wrapper *,\r\n#fem-wrapper *::before,\r\n#fem-wrapper *::after { box-sizing: border-box; }\r\n\r\n#fem-wrapper h1, #fem-wrapper h2, #fem-wrapper h3,\r\n#fem-wrapper p, #fem-wrapper form {\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n  text-transform: none;\r\n  text-shadow: none;\r\n  overflow-wrap: break-word;\r\n}\r\n#fem-wrapper a { text-decoration: none; box-shadow: none; border-bottom: none; }\r\n\r\n\/* ============================================================\r\n   DESIGN TOKENS \u2014 same values as the homepage\r\n   ============================================================ *\/\r\n#fem-wrapper {\r\n  --fem-green:       #8cc05c;\r\n  --fem-green-deep:  #477a3c;\r\n  --fem-green-dark:  #2f5d2a;\r\n  --fem-green-soft:  #eef4e6;\r\n  --fem-navy:        #1c3d59;\r\n  --fem-orange:      #e8763c;\r\n  --fem-gold:        #e2c05a;                    \/* v15: generated code + referral link colour (same gold as the homepage --cs-gold; change here) *\/\r\n  --fem-btn:         #477a3c;                    \/* ALL button colour (change here) *\/\r\n  --fem-btn-hover:   #2f5d2a;                    \/* button colour on hover (change here) *\/\r\n  --fem-btn-glow:    rgba(71, 122, 60, 0.38);    \/* button shadow (change here) *\/\r\n  \/* v14 black theme \u2014 same colours as the homepage hero (change here) *\/\r\n  --fem-space:       #05080d;                    \/* page background *\/\r\n  --fem-ink:         #ffffff;                    \/* main text *\/\r\n  --fem-ink-soft:    rgba(255,255,255,0.88);     \/* body text *\/\r\n  --fem-ink-muted:   rgba(255,255,255,0.66);     \/* notes \/ small print *\/\r\n  --fem-hairline:    rgba(255,255,255,0.12);     \/* divider lines *\/\r\n  --fem-glass:       linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 100%);\r\n  --fem-glass-line:  rgba(140,192,92,0.35);      \/* card outline (same as homepage pledge box) *\/\r\n  --fem-input-bg:    rgba(255,255,255,0.06);\r\n  --fem-input-line:  rgba(255,255,255,0.24);\r\n  \/* Site-wide font \u2014 identical stack to the homepage (--cs-font). *\/\r\n  --fem-font:        'Ayuthaya', 'Noto Serif', 'Noto Sans Devanagari', Georgia, 'Times New Roman', serif;\r\n  \/* Room for the transparent site header above the hero (change here). *\/\r\n  --fem-header-clear: 96px;\r\n\r\n  \/* full-bleed inside a constrained theme container (same as homepage) *\/\r\n  width: 100vw;\r\n  max-width: 100vw;\r\n  position: relative;\r\n  left: 50%;\r\n  right: 50%;\r\n  margin-left: -50vw;\r\n  margin-right: -50vw;\r\n  overflow-x: hidden;\r\n\r\n  background: var(--fem-space);\r\n  color: var(--fem-ink);\r\n  font-size: 15px;\r\n  line-height: 1.6;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n#fem-wrapper, #fem-wrapper * { font-family: var(--fem-font) !important; }\r\n\r\n\/* ---- entrance (opacity\/transform only: no layout shift) ---- *\/\r\n@keyframes femRise {\r\n  from { opacity: 0; transform: translateY(14px); }\r\n  to   { opacity: 1; transform: translateY(0); }\r\n}\r\n#fem-wrapper .fem-in { opacity: 0; animation: femRise 0.6s cubic-bezier(0.22,1,0.36,1) forwards; }\r\n#fem-wrapper .fem-in--1 { animation-delay: 0.05s; }\r\n#fem-wrapper .fem-in--2 { animation-delay: 0.16s; }\r\n#fem-wrapper .fem-in--3 { animation-delay: 0.27s; }\r\n\r\n#fem-wrapper a:focus-visible,\r\n#fem-wrapper button:focus-visible,\r\n#fem-wrapper input[type=\"checkbox\"]:focus-visible {\r\n  outline: 3px solid var(--fem-orange);\r\n  outline-offset: 3px;\r\n}\r\n\r\n\/* ============================================================\r\n   ALERT BANNER (server-side error message, if any)\r\n   ============================================================ *\/\r\n@keyframes femAlertFade { to { opacity: 0; } }\r\n.fem-alert {\r\n  position: fixed;\r\n  top: 60px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  z-index: 9999;\r\n  padding: 16px 22px;\r\n  border-radius: 14px;\r\n  box-shadow: 0 8px 40px rgba(0,0,0,0.22);\r\n  font-size: 16px;\r\n  text-align: center;\r\n  max-width: 420px;\r\n  width: calc(100% - 32px);\r\n}\r\n.fem-alert-error { background: #c0392b; color: #fff; }\r\n.fem-alert--fade { animation: femAlertFade 0.4s ease forwards; }\r\n\r\n\/* ============================================================\r\n   HERO \u2014 dark band with the Earth image, like the homepage hero\r\n   ============================================================ *\/\r\n#fem-wrapper .fem-hero {\r\n  position: relative;\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n  background: var(--fem-space);\r\n  padding: calc(var(--fem-header-clear) + 18px) 20px 22px;   \/* v15: bottom was 30px *\/\r\n  text-align: center;\r\n}\r\n#fem-wrapper .fem-hero-img {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  z-index: 0;\r\n  margin: 0 !important;\r\n  max-width: none !important;\r\n}\r\n#fem-wrapper .fem-hero-veil {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n  pointer-events: none;\r\n  background:\r\n    radial-gradient(ellipse 84% 76% at 50% 50%, rgba(5,8,13,0.86) 0%, rgba(5,8,13,0.70) 50%, rgba(5,8,13,0.40) 100%),\r\n    linear-gradient(to bottom, rgba(5,8,13,0.80) 0%, rgba(5,8,13,0.40) 40%, rgba(5,8,13,0.88) 100%);\r\n}\r\n#fem-wrapper .fem-hero-inner {\r\n  position: relative;\r\n  z-index: 2;\r\n  max-width: 1040px;\r\n  margin: 0 auto;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 4px;   \/* v15: was 6px *\/\r\n}\r\n#fem-wrapper .fem-title {\r\n  \/* Hero title \/ \"Thank you \u2026\" line: font-size 31px (change here; phones: @media 640px); color #fff (change here) *\/\r\n  font-size: 31px !important;\r\n  font-weight: 700 !important;\r\n  line-height: 1.25 !important;\r\n  color: #ffffff !important;\r\n  text-shadow: 0 2px 24px rgba(0,0,0,0.45) !important;\r\n  max-width: 900px;\r\n}\r\n\/* Name in the \"Thank you NAME \u2026\" line: color var(--fem-green) (change here) *\/\r\n#fem-wrapper .fem-title-name { color: var(--fem-green) !important; }\r\n#fem-wrapper .fem-lead {\r\n  \/* Hero sub-line \"A simple journey towards finite living.\": font-size 17\u201319px (change here); color (change here) *\/\r\n  font-size: clamp(16px, 1.8vw, 19px) !important;\r\n  font-style: italic;\r\n  font-weight: 500;\r\n  color: rgba(255,255,255,0.92) !important;\r\n}\r\n\r\n\/* ---- progress flow \u2014 same look as the homepage flow ---- *\/\r\n#fem-wrapper .fem-flow {\r\n  width: 100%;\r\n  max-width: 960px;\r\n  margin-top: 12px;    \/* v15: was 16px *\/\r\n  padding-top: 12px;   \/* v15: was 16px *\/\r\n  border-top: 1px solid rgba(255,255,255,0.12);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 10px;\r\n}\r\n#fem-wrapper .fem-flow-step {\r\n  flex: 1 1 0;\r\n  min-width: 0;\r\n  min-height: 52px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 10px;\r\n  padding: 10px 14px;\r\n  border-radius: 50px;\r\n  background: rgba(255,255,255,0.08);\r\n  border: 1px solid rgba(140,192,92,0.45);\r\n  box-shadow: 0 4px 16px rgba(0,0,0,0.25);\r\n  transition: background 0.25s ease, border-color 0.25s ease;\r\n}\r\n#fem-wrapper .fem-flow-num {\r\n  flex: 0 0 28px;\r\n  width: 28px;\r\n  height: 28px;\r\n  border-radius: 50%;\r\n  background: rgba(255,255,255,0.18);\r\n  color: #ffffff;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  \/* Flow step number: font-size 13px (change here) *\/\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  line-height: 1;\r\n}\r\n#fem-wrapper .fem-flow-label {\r\n  \/* Flow step label: font-size 15px (change here); color (change here) *\/\r\n  font-size: 15px;\r\n  font-weight: 600;\r\n  line-height: 1.25;\r\n  color: rgba(255,255,255,0.88);\r\n  text-align: left;\r\n  white-space: nowrap;   \/* \"Register My Pledge\" etc. stay on one line (wraps only on very small phones) *\/\r\n}\r\n#fem-wrapper .fem-flow-arrow { flex: 0 0 auto; display: inline-flex; color: var(--fem-green); }\r\n#fem-wrapper .fem-flow-arrow svg { width: 22px; height: 14px; display: block; }\r\n\/* done step *\/\r\n#fem-wrapper .fem-flow-step.is-done .fem-flow-num { background: var(--fem-btn); }\r\n#fem-wrapper .fem-flow-step.is-done .fem-flow-label { color: #ffffff; }\r\n\/* current step \u2014 light green on black, the strongest contrast on the page\r\n   (Get Your Code on the form, Invite Others on the thank-you page) *\/\r\n#fem-wrapper .fem-flow-step.is-active {\r\n  background: #d9efc2;\r\n  border-color: var(--fem-green);\r\n  box-shadow: 0 0 0 3px rgba(140,192,92,0.28), 0 6px 22px rgba(140,192,92,0.30);\r\n}\r\n#fem-wrapper .fem-flow-step.is-active .fem-flow-num { background: var(--fem-btn); }\r\n#fem-wrapper .fem-flow-step.is-active .fem-flow-label { color: var(--fem-green-dark); font-weight: 700; }\r\n\r\n\/* ============================================================\r\n   MAIN CARD\r\n   ============================================================ *\/\r\n#fem-wrapper .fem-main { padding: 20px 20px 0; }   \/* v15: was 30px 20px 0 *\/\r\n#fem-wrapper .fem-card {\r\n  \/* Card width: 1040px (change here) *\/\r\n  max-width: 1040px;\r\n  margin: 0 auto;\r\n  background: var(--fem-glass);\r\n  border: 1px solid var(--fem-glass-line);\r\n  border-radius: 18px;\r\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 40px rgba(0,0,0,0.40);\r\n  padding: 26px 36px 26px;   \/* v15: was 36px 48px 34px *\/\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 16px;                 \/* v15: was 22px *\/\r\n}\r\n#fem-wrapper .fem-h2 {\r\n  position: relative;\r\n  text-align: center;\r\n  \/* Card heading: font-size 23\u201327px (change here); color var(--fem-green) \u2014 same as the homepage pledge heading (change here) *\/\r\n  font-size: clamp(23px, 2.6vw, 27px) !important;\r\n  font-weight: 700 !important;\r\n  line-height: 1.3 !important;\r\n  letter-spacing: 0.6px;\r\n  color: var(--fem-green) !important;\r\n  padding-bottom: 12px !important;\r\n}\r\n#fem-wrapper .fem-h2::after {\r\n  content: '';\r\n  position: absolute;\r\n  left: 50%;\r\n  bottom: 0;\r\n  transform: translateX(-50%);\r\n  width: 46px;\r\n  height: 3px;\r\n  border-radius: 3px;\r\n  background: var(--fem-orange);\r\n}\r\n#fem-wrapper .fem-h3 {\r\n  \/* Sub-headings (Your Details \/ Invite Others \/ See Your Growing Impact): font-size 18px (change here); color #fff (change here) *\/\r\n  font-size: 18px !important;\r\n  font-weight: 700 !important;\r\n  line-height: 1.35 !important;\r\n  letter-spacing: 0.4px;\r\n  color: var(--fem-ink) !important;\r\n}\r\n#fem-wrapper .fem-intro {\r\n  \/* Card intro text: font-size 15.5px (change here); color var(--fem-ink-soft) (change here).\r\n     Wide enough to sit on one line on desktop. *\/\r\n  font-size: 15.5px !important;\r\n  line-height: 1.6 !important;\r\n  color: var(--fem-ink-soft) !important;\r\n  text-align: center;\r\n  max-width: 940px;\r\n  margin: 0 auto !important;\r\n}\r\n#fem-wrapper .fem-text {\r\n  \/* Body text in the thank-you blocks: font-size 15.5px (change here); color var(--fem-ink-soft) (change here) *\/\r\n  font-size: 15.5px !important;\r\n  line-height: 1.6 !important;\r\n  color: var(--fem-ink-soft) !important;\r\n  max-width: 760px;\r\n}\r\n#fem-wrapper .fem-head-group { display: flex; flex-direction: column; gap: 8px; }   \/* v15: was 12px *\/\r\n\r\n\/* ---- \"You were invited by \u2026\" ---- *\/\r\n#fem-wrapper .fem-referral-box {\r\n  background: rgba(140,192,92,0.10);\r\n  border: 1px solid var(--fem-glass-line);\r\n  border-radius: 14px;\r\n  padding: 12px 16px;   \/* v15: was 14px 18px *\/\r\n  text-align: center;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 4px;\r\n}\r\n#fem-wrapper .fem-referral-box p { font-size: 15px; color: var(--fem-ink-muted); }\r\n#fem-wrapper .fem-referral-box .fem-referral-strong { font-size: 16.5px; font-weight: 600; font-style: italic; color: var(--fem-ink); }\r\n#fem-wrapper .fem-referral-box .fem-referral-muted { color: var(--fem-green); font-weight: 600; }\r\n\r\n\/* ============================================================\r\n   FORM\r\n   ============================================================ *\/\r\n#fem-wrapper .fem-section-head {\r\n  padding-bottom: 10px;\r\n  border-bottom: 1px solid var(--fem-hairline);\r\n}\r\n#fem-wrapper .fem-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, minmax(0, 1fr));\r\n  gap: 16px 24px;   \/* v15: was 20px 28px *\/\r\n}\r\n#fem-wrapper .fem-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\r\n#fem-wrapper .fem-label {\r\n  \/* Field labels: font-size 15px (change here); color var(--fem-ink) (change here) *\/\r\n  font-size: 15px;\r\n  font-weight: 700;\r\n  color: var(--fem-ink);\r\n  line-height: 1.35;\r\n}\r\n#fem-wrapper .fem-label .fem-req { color: var(--fem-orange); margin-left: 2px; }\r\n#fem-wrapper .fem-label .fem-opt { font-weight: 500; color: var(--fem-ink-muted); }\r\n#fem-wrapper .fem-input {\r\n  width: 100%;\r\n  min-height: 50px;\r\n  padding: 12px 16px;\r\n  margin: 0 !important;\r\n  border-radius: 10px;\r\n  border: 1.5px solid var(--fem-input-line);\r\n  background: var(--fem-input-bg);\r\n  color: var(--fem-ink);\r\n  \/* Inputs: font-size 16px (change here; keep \u226516px so phones do not zoom); text #fff *\/\r\n  font-size: 16px;\r\n  line-height: 1.4;\r\n  box-shadow: none;\r\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n#fem-wrapper .fem-input:hover { border-color: var(--fem-green); }\r\n#fem-wrapper .fem-input:focus {\r\n  outline: none;\r\n  border-color: var(--fem-green);\r\n  box-shadow: 0 0 0 3px rgba(140,192,92,0.25);\r\n}\r\n#fem-wrapper .fem-input::placeholder { color: rgba(255,255,255,0.45); opacity: 1; }\r\n\/* browser autofill keeps the dark field instead of turning it white\/yellow *\/\r\n#fem-wrapper .fem-input:-webkit-autofill {\r\n  -webkit-box-shadow: 0 0 0 1000px #141b20 inset;\r\n  -webkit-text-fill-color: #ffffff;\r\n  caret-color: #ffffff;\r\n}\r\n#fem-wrapper select.fem-input {\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23ffffff' fill='none' stroke-width='2'\/%3E%3C\/svg%3E\");\r\n  background-repeat: no-repeat;\r\n  background-position: right 16px center;\r\n  background-size: 12px;\r\n  padding-right: 42px;\r\n  cursor: pointer;\r\n}\r\n\/* the open country list: dark rows, readable on every browser *\/\r\n#fem-wrapper select.fem-input option { background: #141b20; color: #ffffff; }\r\n#fem-wrapper .fem-field-note {\r\n  \/* Field notes: font-size 13.5px (change here); color var(--fem-ink-muted) (change here) *\/\r\n  font-size: 13.5px;\r\n  line-height: 1.45;\r\n  color: var(--fem-ink-muted);\r\n}\r\n\r\n\/* ---- optional choices (volunteer \/ organization) \u2014 at the top of the form, as before ---- *\/\r\n#fem-wrapper .fem-optional {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 12px;\r\n}\r\n#fem-wrapper .fem-checkbox { display: flex; gap: 12px; align-items: flex-start; }\r\n#fem-wrapper .fem-checkbox input[type=\"checkbox\"] {\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  flex: 0 0 20px;\r\n  width: 20px;\r\n  height: 20px;\r\n  margin: 3px 0 0 !important;\r\n  border: 2px solid rgba(255,255,255,0.40);\r\n  border-radius: 5px;\r\n  background: transparent;\r\n  cursor: pointer;\r\n  position: relative;\r\n  transition: border-color 0.2s ease, background 0.2s ease;\r\n}\r\n#fem-wrapper .fem-checkbox input[type=\"checkbox\"]:hover { border-color: var(--fem-green); }\r\n#fem-wrapper .fem-checkbox input[type=\"checkbox\"]:checked { background: var(--fem-btn); border-color: var(--fem-green); }\r\n#fem-wrapper .fem-checkbox input[type=\"checkbox\"]:checked::after {\r\n  content: '';\r\n  position: absolute;\r\n  left: 5px;\r\n  top: 1px;\r\n  width: 6px;\r\n  height: 11px;\r\n  border: solid #fff;\r\n  border-width: 0 2px 2px 0;\r\n  transform: rotate(45deg);\r\n}\r\n#fem-wrapper .fem-checkbox label {\r\n  \/* Checkbox text: font-size 15px (change here); color var(--fem-ink-soft) (change here) *\/\r\n  font-size: 15px;\r\n  line-height: 1.55;\r\n  color: var(--fem-ink-soft);\r\n  cursor: pointer;\r\n}\r\n#fem-wrapper .fem-checkbox label strong { color: var(--fem-ink); }\r\n#fem-wrapper .fem-checkbox-muted { color: var(--fem-ink-muted); font-size: 14px; }\r\n#fem-wrapper .fem-info-btn {\r\n  margin-left: 6px;\r\n  border: none;\r\n  background: rgba(140,192,92,0.18);\r\n  color: var(--fem-green);\r\n  border-radius: 50%;\r\n  width: 22px;\r\n  height: 22px;\r\n  padding: 0;\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  line-height: 22px;\r\n  cursor: pointer;\r\n  vertical-align: middle;\r\n}\r\n#fem-wrapper .fem-info-box {\r\n  display: none;\r\n  font-size: 14.5px;\r\n  line-height: 1.6;\r\n  color: var(--fem-ink-soft);\r\n  background: rgba(255,255,255,0.04);\r\n  border: 1px dashed var(--fem-input-line);\r\n  border-radius: 10px;\r\n  padding: 12px 14px;\r\n}\r\n#fem-wrapper .fem-info-box a { color: var(--fem-green); text-decoration: underline; }\r\n\r\n\/* ============================================================\r\n   BUTTONS \u2014 identical to the homepage .cs-cta\r\n   ============================================================ *\/\r\n#fem-wrapper .fem-cta {\r\n  display: inline-flex !important;\r\n  align-items: center !important;\r\n  justify-content: center;\r\n  gap: 14px;\r\n  background: var(--fem-btn) !important;\r\n  color: #ffffff !important;\r\n  \/* Green buttons: font-size 15px (change here; phones: @media 430px); text #fff; colour in --fem-btn *\/\r\n  font-size: 15px !important;\r\n  font-weight: 700 !important;\r\n  line-height: 1.2 !important;\r\n  letter-spacing: 1.2px !important;\r\n  text-transform: none !important;\r\n  white-space: nowrap;   \/* button text stays on one line *\/\r\n  padding: 11px 11px 11px 30px !important;\r\n  margin: 0 !important;\r\n  border-radius: 50px !important;\r\n  min-height: 54px;\r\n  border: none !important;\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  box-shadow: 0 6px 22px var(--fem-btn-glow);\r\n  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease, background 0.25s ease;\r\n}\r\n#fem-wrapper .fem-cta::after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; left: -100%;\r\n  width: 55%; height: 100%;\r\n  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.24) 50%, transparent 80%);\r\n  transition: left 0.55s ease;\r\n  pointer-events: none;\r\n}\r\n#fem-wrapper .fem-cta:hover::after { left: 150%; }\r\n#fem-wrapper .fem-cta:hover:not(:disabled),\r\n#fem-wrapper .fem-cta:focus-visible {\r\n  transform: translateY(-3px);\r\n  background: var(--fem-btn-hover) !important;\r\n  box-shadow: 0 10px 32px var(--fem-btn-glow);\r\n  color: #ffffff !important;\r\n}\r\n#fem-wrapper .fem-cta:disabled {\r\n  background: #3d4a3d !important;\r\n  color: rgba(255,255,255,0.75) !important;\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n}\r\n\/* \"REGISTER & GET MY CODE\" \u2014 the one call to action on the form, so it gets\r\n   the bright homepage green with dark text: the strongest contrast on black.\r\n   Colours: background var(--fem-green), text #05080d (change here). *\/\r\n#fem-wrapper #femFinalPledgeBtn {\r\n  background: var(--fem-green) !important;\r\n  color: var(--fem-space) !important;\r\n  box-shadow: 0 0 0 3px rgba(140,192,92,0.22), 0 8px 28px rgba(140,192,92,0.35);\r\n}\r\n#fem-wrapper #femFinalPledgeBtn .fem-cta-arrow { border-color: rgba(5,8,13,0.75); }\r\n#fem-wrapper #femFinalPledgeBtn:hover:not(:disabled),\r\n#fem-wrapper #femFinalPledgeBtn:focus-visible {\r\n  background: #a3d175 !important;\r\n  color: var(--fem-space) !important;\r\n  box-shadow: 0 0 0 4px rgba(140,192,92,0.30), 0 12px 34px rgba(140,192,92,0.45);\r\n}\r\n#fem-wrapper #femFinalPledgeBtn:disabled {\r\n  background: #3d4a3d !important;\r\n  color: rgba(255,255,255,0.75) !important;\r\n  box-shadow: none;\r\n}\r\n#fem-wrapper .fem-cta-arrow {\r\n  flex: 0 0 32px;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  border: 1.6px solid rgba(255,255,255,0.85);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n#fem-wrapper .fem-cta-arrow svg { width: 15px; height: 15px; display: block; }\r\n#fem-wrapper .fem-cta--plain { padding: 11px 30px !important; }   \/* no arrow circle *\/\r\n\r\n\/* outline pill (certificate \/ copy link \/ register again) *\/\r\n#fem-wrapper .fem-btn-outline {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 48px;\r\n  padding: 10px 26px !important;\r\n  margin: 0 !important;\r\n  border-radius: 50px;\r\n  background: transparent !important;\r\n  color: var(--fem-green) !important;\r\n  border: 1.5px solid var(--fem-green) !important;\r\n  white-space: nowrap;\r\n  \/* Outline buttons: font-size 15px (change here); color var(--fem-green) (change here) *\/\r\n  font-size: 15px !important;\r\n  font-weight: 700 !important;\r\n  letter-spacing: 0.8px;\r\n  line-height: 1.2 !important;\r\n  text-transform: none !important;\r\n  cursor: pointer;\r\n  box-shadow: none;\r\n  transition: background 0.2s ease, transform 0.2s ease;\r\n}\r\n#fem-wrapper .fem-btn-outline:hover { background: rgba(140,192,92,0.14) !important; transform: translateY(-2px); }\r\n\r\n#fem-wrapper .fem-actions {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 10px;   \/* v15: was 12px *\/\r\n  padding-top: 4px;\r\n}\r\n#fem-wrapper .fem-actions .fem-cta { min-width: 320px; justify-content: space-between !important; }\r\n#fem-wrapper .fem-footer-note {\r\n  \/* Note under the submit button: font-size 13.5px (change here); color var(--fem-ink-muted) (change here) *\/\r\n  font-size: 13.5px !important;\r\n  line-height: 1.55 !important;\r\n  color: var(--fem-ink-muted) !important;\r\n  text-align: center;\r\n  max-width: 640px;\r\n}\r\n\r\n\/* ============================================================\r\n   THANK-YOU PAGE\r\n   ============================================================ *\/\r\n#fem-wrapper .fem-code-card {\r\n  align-self: center;\r\n  width: 100%;\r\n  max-width: 420px;   \/* v15: was 460px *\/\r\n  border: 1.5px solid var(--fem-green);\r\n  border-radius: 18px;\r\n  background: rgba(140,192,92,0.08);\r\n  padding: 12px 18px 14px;   \/* v15: was 18px 22px 20px *\/\r\n  text-align: center;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 4px;   \/* v15: was 6px *\/\r\n}\r\n#fem-wrapper .fem-code-label {\r\n  \/* \"Your Climate Satyagrahi Code\": font-size 13px (change here); color var(--fem-ink-muted) (change here) *\/\r\n  font-size: 13px !important;\r\n  font-weight: 700;\r\n  letter-spacing: 1.6px;\r\n  text-transform: uppercase !important;\r\n  color: var(--fem-ink-muted) !important;\r\n}\r\n#fem-wrapper .fem-code-value {\r\n  \/* The code (e.g. POOJA175): font-size 26px (change here; phones: @media 430px); color var(--fem-gold) (change here) \u2014 v15: was 38px green *\/\r\n  font-family: 'EB Garamond', Garamond, Georgia, serif !important;\r\n  font-size: 26px !important;\r\n  font-weight: 700 !important;\r\n  letter-spacing: 2px;\r\n  line-height: 1.15 !important;\r\n  color: var(--fem-gold) !important;\r\n  word-break: break-all;\r\n}\r\n#fem-wrapper .fem-chosen-limit { font-size: 14px !important; color: var(--fem-ink-muted) !important; }\r\n#fem-wrapper .fem-chosen-limit strong { color: var(--fem-ink); }\r\n#fem-wrapper .fem-code-card .fem-btn-outline { margin-top: 6px !important; }   \/* v15: was 8px *\/\r\n\r\n#fem-wrapper .fem-block {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 10px;          \/* v15: was 12px *\/\r\n  text-align: center;\r\n  padding-top: 16px;  \/* v15: was 24px *\/\r\n  border-top: 1px solid var(--fem-hairline);\r\n}\r\n#fem-wrapper .fem-msg-label {\r\n  \/* \"Your Ready-to-Share Message\": font-size 16px (change here); color var(--fem-green) (change here) *\/\r\n  font-size: 16px !important;\r\n  font-weight: 700 !important;\r\n  color: var(--fem-green) !important;\r\n  margin-top: 0 !important;   \/* v15: was 4px *\/\r\n}\r\n#fem-wrapper .fem-invite-box {\r\n  width: 100%;\r\n  max-width: 820px;\r\n  border: 1.5px solid var(--fem-glass-line);\r\n  border-radius: 18px;    \/* v15: was 26px *\/\r\n  background: rgba(255,255,255,0.04);\r\n  padding: 16px 20px;     \/* v15: was 24px 30px *\/\r\n  text-align: left;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 10px;              \/* v15: was 14px *\/\r\n}\r\n#fem-wrapper .fem-invite-box p {\r\n  \/* Share message text: font-size 15.5px (change here); color var(--fem-ink-soft) (change here) *\/\r\n  font-size: 15.5px !important;\r\n  line-height: 1.6 !important;\r\n  color: var(--fem-ink-soft) !important;\r\n}\r\n#fem-wrapper .fem-invite-box strong { color: var(--fem-ink); }\r\n\/* v15: the generated referral link \u2014 gold on a soft gold pill so it stands out from the message text.\r\n   Colour var(--fem-gold) (change here) *\/\r\n#fem-wrapper .fem-invite-box a {\r\n  display: inline-block;\r\n  margin-top: 4px;\r\n  padding: 4px 10px;\r\n  border-radius: 8px;\r\n  background: rgba(226,192,90,0.12);\r\n  border: 1px solid rgba(226,192,90,0.35);\r\n  color: var(--fem-gold) !important;\r\n  font-weight: 700;\r\n  text-decoration: none;\r\n  word-break: break-all;\r\n  transition: background 0.2s ease;\r\n}\r\n#fem-wrapper .fem-invite-box a:hover { background: rgba(226,192,90,0.22); }\r\n#fem-wrapper .fem-copy-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }\r\n#fem-wrapper .fem-share {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 18px;\r\n  font-size: 14px;\r\n  color: var(--fem-ink-muted);\r\n}\r\n#fem-wrapper .fem-share-icon {\r\n  display: inline-flex;\r\n  padding: 4px;\r\n  border: none;\r\n  background: none;\r\n  cursor: pointer;\r\n  color: var(--fem-ink);\r\n  opacity: 0.7;\r\n  transition: opacity 0.2s ease, transform 0.2s ease;\r\n}\r\n#fem-wrapper .fem-share-icon:hover { opacity: 1; transform: scale(1.12); }\r\n#fem-wrapper .fem-step-note {\r\n  \/* Small notes (CS Circle guide \/ video): font-size 14px (change here); color var(--fem-ink-muted) (change here) *\/\r\n  font-size: 14px !important;\r\n  line-height: 1.55 !important;\r\n  color: var(--fem-ink-muted) !important;\r\n}\r\n#fem-wrapper .fem-step-note a { color: var(--fem-green); text-decoration: underline; }\r\n\r\n.fem-invite-hidden {\r\n  position: absolute;\r\n  left: -9999px;\r\n  opacity: 0;\r\n  width: 1px;\r\n  height: 1px;\r\n}\r\n\r\n\/* ---- optional donate line + register again (below the card) ---- *\/\r\n#fem-wrapper .fem-donate-optional {\r\n  max-width: 1040px;\r\n  margin: 12px auto 0;            \/* v15: was 18px *\/\r\n  padding: 12px 14px 12px 22px;   \/* v15: was 14px 16px 14px 26px *\/\r\n  border-radius: 18px;\r\n  background: var(--fem-glass);\r\n  border: 1px solid var(--fem-glass-line);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 16px;\r\n}\r\n#fem-wrapper .fem-donate-optional p { font-size: 15px !important; color: var(--fem-ink-muted) !important; }\r\n#fem-wrapper .fem-donate-optional p strong { color: var(--fem-ink); }\r\n#fem-wrapper .fem-after { text-align: center; padding: 14px 16px 30px; }   \/* v15: was 22px 16px 44px *\/\r\n#fem-wrapper #femResetBtn { display: none; }\r\n\r\n\/* ============================================================\r\n   RESPONSIVE\r\n   ============================================================ *\/\r\n@media (max-width: 900px) {\r\n  #fem-wrapper .fem-card { padding: 24px 24px 24px; }   \/* v15: was 30px 28px 28px *\/\r\n}\r\n@media (max-width: 820px) {\r\n  #fem-wrapper { --fem-header-clear: 80px; }\r\n  \/* flow stays on ONE line \u2014 number above label (same as homepage) *\/\r\n  #fem-wrapper .fem-flow { gap: 4px; margin-top: 12px; padding-top: 14px; }\r\n  #fem-wrapper .fem-flow-arrow svg { width: 12px; height: 10px; }\r\n  #fem-wrapper .fem-flow-step { flex-direction: column; gap: 6px; min-height: 0; padding: 10px 4px; border-radius: 16px; }\r\n  #fem-wrapper .fem-flow-label { font-size: 12px; line-height: 1.2; text-align: center; }\r\n  #fem-wrapper .fem-flow-num { flex: 0 0 24px; width: 24px; height: 24px; font-size: 12px; }\r\n}\r\n@media (max-width: 540px) {\r\n  \/* too narrow for four one-line labels: let them wrap inside their pill *\/\r\n  #fem-wrapper .fem-flow-label { white-space: normal; overflow-wrap: anywhere; }\r\n}\r\n@media (max-width: 680px) {\r\n  #fem-wrapper .fem-main { padding: 14px 16px 0; }   \/* v15: was 18px 16px 0 *\/\r\n  #fem-wrapper .fem-card { padding: 20px 16px 20px; gap: 16px; border-radius: 16px; }   \/* v15: was 24px 18px 24px; gap 20px *\/\r\n  #fem-wrapper .fem-grid { grid-template-columns: 1fr; gap: 14px; }   \/* v15: was 16px *\/\r\n  #fem-wrapper .fem-actions .fem-cta { width: 100%; min-width: 0; }\r\n  #fem-wrapper .fem-invite-box { padding: 14px 14px; border-radius: 16px; }   \/* v15: was 18px 18px *\/\r\n  #fem-wrapper .fem-copy-row > * { flex: 1 1 100%; }\r\n  #fem-wrapper .fem-donate-optional { margin: 12px 16px 0; padding: 14px; flex-direction: column; text-align: center; }   \/* v15: was 16px \/ 16px *\/\r\n  #fem-wrapper .fem-donate-optional .fem-cta { width: 100%; }\r\n}\r\n@media (max-width: 640px) {\r\n  \/* Hero title on phones: font-size 25px (change here) *\/\r\n  #fem-wrapper .fem-title { font-size: 25px !important; }\r\n  #fem-wrapper .fem-hero { padding-left: 14px; padding-right: 14px; padding-bottom: 18px; }   \/* v15: bottom was 22px *\/\r\n}\r\n@media (max-width: 430px) {\r\n  #fem-wrapper .fem-cta { font-size: 14px !important; letter-spacing: 0.7px !important; padding-left: 20px !important; }\r\n  #fem-wrapper .fem-code-value { font-size: 22px !important; }   \/* v15: was 32px *\/\r\n}\r\n@media (max-width: 380px) {\r\n  #fem-wrapper .fem-flow { gap: 2px; }\r\n  #fem-wrapper .fem-flow-arrow svg { width: 9px; height: 8px; }\r\n  #fem-wrapper .fem-flow-step { padding: 8px 2px; }\r\n  #fem-wrapper .fem-flow-label { font-size: 10.5px; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  #fem-wrapper .fem-in { opacity: 1 !important; animation: none !important; }\r\n}\r\n    <\/style>\r\n\r\n<!-- \u2500\u2500\u2500 MARKUP \u2500\u2500\u2500 -->\r\n<div id=\"fem-wrapper\">\r\n\r\n\r\n  <!-- \u2500\u2500 Hero: title + the 4-step flow (same flow as the homepage) \u2500\u2500 -->\r\n  <section class=\"fem-hero\">\r\n    <img\r\n      class=\"fem-hero-img\"\r\n      src=\"https:\/\/thefiniteearth.org\/wp-content\/uploads\/2026\/01\/Earth-scaled.png\"\r\n      alt=\"\"\r\n      decoding=\"async\"\r\n      fetchpriority=\"high\"\r\n    \/>\r\n    <div class=\"fem-hero-veil\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"fem-hero-inner\">\r\n      <h1 class=\"fem-title fem-in fem-in--1\">Become a Climate Satyagrahi<\/h1>\r\n      <p class=\"fem-lead fem-in fem-in--1\">A simple journey towards finite living.<\/p>\r\n\r\n      <!-- Form page: Register My Pledge is done (read on the homepage) and\r\n           \"Get Your Code\" is highlighted; the thank-you script moves it to step 3. -->\r\n      <div class=\"fem-flow fem-in fem-in--2\" id=\"femFlow\" role=\"list\" aria-label=\"Your Climate Satyagraha journey\">\r\n        <div class=\"fem-flow-step is-done\" data-flow-step=\"1\" role=\"listitem\"><span class=\"fem-flow-num\">1<\/span><span class=\"fem-flow-label\">Register My Pledge<\/span><\/div>\r\n        <span class=\"fem-flow-arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 22 14\" fill=\"none\"><path d=\"M1 7h18M14 2l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\r\n        <div class=\"fem-flow-step is-active\" data-flow-step=\"2\" role=\"listitem\" aria-current=\"step\"><span class=\"fem-flow-num\">2<\/span><span class=\"fem-flow-label\">Get Your Code<\/span><\/div>\r\n        <span class=\"fem-flow-arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 22 14\" fill=\"none\"><path d=\"M1 7h18M14 2l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\r\n        <div class=\"fem-flow-step\" data-flow-step=\"3\" role=\"listitem\"><span class=\"fem-flow-num\">3<\/span><span class=\"fem-flow-label\">Invite Others<\/span><\/div>\r\n        <span class=\"fem-flow-arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 22 14\" fill=\"none\"><path d=\"M1 7h18M14 2l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\r\n        <div class=\"fem-flow-step\" data-flow-step=\"4\" role=\"listitem\"><span class=\"fem-flow-num\">4<\/span><span class=\"fem-flow-label\">See Your Impact<\/span><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<!-- ================= FORM : GET YOUR CLIMATE SATYAGRAHI CODE =================\r\n     Everything inside this form posts to fem_create_razorpay_order, which\r\n     saves the pledge directly. v13 changed layout and wording only: field\r\n     names, ids, nonce and the hidden seal status are exactly as before.\r\n============================================================================ -->\r\n<div id=\"femFormFields\">\r\n  <form method=\"POST\" action=\"#fem-pledge\" id=\"femPledgeForm\">\r\n    <input type=\"hidden\" id=\"fem_nonce\" name=\"fem_nonce\" value=\"fe340a3aaa\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/hindi\/wp-json\/wp\/v2\/pages\/85\" \/>\r\n    <section class=\"fem-main fem-in fem-in--3\" id=\"fem-pledge\">\r\n      <div class=\"fem-card\">\r\n\r\n        \r\n        <div class=\"fem-head-group\">\r\n          <h2 class=\"fem-h2\">Get Your Climate Satyagrahi Code<\/h2>\r\n          <p class=\"fem-intro\">\r\n            You have read the Climate Satyagraha Pledge. Now register your pledge by entering a few basic details below.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <!-- Optional choices \u2014 at the top, as before; saved as volunteer_spread \/ isOrganization -->\r\n        <div class=\"fem-optional\">\r\n          <div class=\"fem-checkbox\">\r\n            <input type=\"checkbox\" id=\"femCommitCheck2\" name=\"fem_volunteer_spread\" value=\"1\" \/>\r\n            <label for=\"femCommitCheck2\">\r\n              I would like to <strong>Volunteer<\/strong> and <strong>Spread<\/strong>\r\n              <span class=\"fem-checkbox-muted\">(Optional, but this requires your commitment to volunteer and actively spread FEM.)<\/span>\r\n            <\/label>\r\n          <\/div>\r\n          <div class=\"fem-checkbox\">\r\n            <input type=\"checkbox\" id=\"femCommitOrg\" name=\"fem_is_organization\" value=\"1\" \/>\r\n            <label for=\"femCommitOrg\">\r\n              We are an organization <span class=\"fem-checkbox-muted\">(optional)<\/span>\r\n            <\/label>\r\n            <button type=\"button\" class=\"fem-info-btn\" data-info=\"femOrgInfoBox\" aria-controls=\"femOrgInfoBox\" aria-expanded=\"false\" aria-label=\"About organization pledges\">i<\/button>\r\n          <\/div>\r\n          <div class=\"fem-info-box\" id=\"femOrgInfoBox\">\r\n            Enter your organization's name in the <strong>Name<\/strong> field. After successfully\r\n            submitting your pledge, you'll receive a unique <strong>Climate Satyagrahi Code<\/strong>\r\n            (for example NITES777). Please share this code with your\r\n            organization or community to inspire finite living. Use the code to\r\n            <a href=\"https:\/\/thefiniteearth.org\/see-your-impact\/\" target=\"_blank\" rel=\"noopener\">track your organization's impact<\/a>.\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"fem-section-head\"><h3 class=\"fem-h3\">Your Details<\/h3><\/div>\r\n\r\n        <div class=\"fem-grid\">\r\n          <div class=\"fem-field\">\r\n            <label class=\"fem-label\" for=\"fem-name\">Name<span class=\"fem-req\">*<\/span><\/label>\r\n            <input type=\"text\" name=\"fem_name\" id=\"fem-name\" class=\"fem-input\" required autocomplete=\"name\" placeholder=\"Enter your full name\" \/>\r\n            <small class=\"fem-field-note\">Please enter your name in English (A\u2013Z).<\/small>\r\n          <\/div>\r\n          <div class=\"fem-field\">\r\n            <label class=\"fem-label\" for=\"fem-phone\">Mobile Number<span class=\"fem-req\">*<\/span><\/label>\r\n            <input type=\"tel\" name=\"fem_phone\" id=\"fem-phone\" class=\"fem-input\" required inputmode=\"tel\" autocomplete=\"tel\" placeholder=\"Enter your mobile number\" \/>\r\n          <\/div>\r\n          <div class=\"fem-field\">\r\n            <label class=\"fem-label\" for=\"fem-email\">Email <span class=\"fem-opt\">(Optional)<\/span><\/label>\r\n            <input type=\"email\" name=\"fem_email\" id=\"fem-email\" class=\"fem-input\" autocomplete=\"email\" placeholder=\"Enter your email address\" \/>\r\n          <\/div>\r\n          <div class=\"fem-field\">\r\n            <label class=\"fem-label\" for=\"fem-city\">City<span class=\"fem-req\">*<\/span><\/label>\r\n            <input type=\"text\" name=\"fem_city\" id=\"fem-city\" class=\"fem-input\" required autocomplete=\"address-level2\" placeholder=\"Enter your city\" \/>\r\n          <\/div>\r\n          <div class=\"fem-field\">\r\n            <label class=\"fem-label\" for=\"fem-country\">Country<span class=\"fem-req\">*<\/span><\/label>\r\n            <select name=\"fem_country\" class=\"fem-input\" id=\"fem-country\" required>\r\n              <option value=\"\">Loading countries\u2026<\/option>\r\n            <\/select>\r\n          <\/div>\r\n          <div class=\"fem-field\">\r\n            <label class=\"fem-label\" for=\"fem-referrer\">Invitation Code <span class=\"fem-opt\">(Optional)<\/span><\/label>\r\n            <input\r\n              type=\"text\"\r\n              name=\"fem_referrer\"\r\n              id=\"fem-referrer\"\r\n              class=\"fem-input\"\r\n              autocomplete=\"off\"\r\n              placeholder=\"e.g. NITES777\"\r\n              value=\"\"\r\n            \/>\r\n            <small class=\"fem-field-note\">If someone invited you, enter their Climate Satyagrahi Code.<\/small>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"fem-actions\">\r\n          <button type=\"submit\" name=\"fem_submit_action\" value=\"1\" class=\"fem-cta\" id=\"femFinalPledgeBtn\">\r\n            <span data-btn-label>REGISTER &amp; GET MY CODE<\/span>\r\n            <span class=\"fem-cta-arrow\" aria-hidden=\"true\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12h13M12 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n            <\/span>\r\n          <\/button>\r\n          <p class=\"fem-footer-note\">\r\n            By clicking, I pledge to live within Earth's limits.\r\nI also acknowledge that my example may be used by the Foundation for inspiration and educational purposes.\r\n          <\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- Hidden seal status \u2014 always skipped -->\r\n    <input type=\"hidden\" name=\"fem_seal_status\" id=\"fem_seal_status\" value=\"skipped\" \/>\r\n  <\/form>\r\n<\/div><!-- #femFormFields -->\r\n\r\n  <!-- ================= THANK-YOU : INVITE OTHERS =================\r\n       Revealed only after a verified pledge exists (see the post-pledge\r\n       state script, which fills every [data-\u2026] slot with the code).\r\n  ============================================================== -->\r\n  <section class=\"fem-main\" id=\"femAssetsSection\" style=\"display:none;\">\r\n    <div class=\"fem-card\">\r\n\r\n      <h2 class=\"fem-h2\">Invite Others to Join Climate Satyagraha<\/h2>\r\n\r\n      <div class=\"fem-code-card\">\r\n        <p class=\"fem-code-label\">Your Climate Satyagrahi Code<\/p>\r\n        <p class=\"fem-code-value\" id=\"femCodeValue\" data-code-slot><\/p>\r\n        <p class=\"fem-chosen-limit\" data-limit-wrap style=\"display:none;\">\r\n          My first limit: <strong data-limit-slot><\/strong>\r\n        <\/p>\r\n        <a href=\"?fem_action=download_cert&amp;code=\"\r\n           class=\"fem-btn-outline\" data-cert-btn target=\"_blank\">\r\n          DOWNLOAD MY CERTIFICATE\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <!-- \u2500\u2500 Invite others \u2500\u2500 -->\r\n      <div class=\"fem-block\" id=\"fem-spread\">\r\n\r\n        <p class=\"fem-text\">Help spread the movement by inviting your family, friends, and colleagues. Copy this message and start inviting them.<\/p>\r\n\r\n        <p class=\"fem-msg-label\">Your Ready-to-Share Message<\/p>\r\n        <!-- The link below is filled in by femApplyCodeToSpread(); the same\r\n             wording is built as plain text in femBuildInviteMessage(). -->\r\n        <div class=\"fem-invite-box\" data-invite-box>\r\n          <p>Accepting a simple truth\u2014\u2018Earth is finite; therefore, our consumption must also have limits\u2019\u2014is the first and most powerful step towards climate correction. This is Climate Satyagraha.<\/p>\r\n          <p>I have joined <strong>Climate Satyagraha<\/strong>, a global people's movement for finite living on a finite Earth.<\/p>\r\n          <p>I invite you to join this movement by taking a simple pledge of living within Earth's limits.<\/p>\r\n          <p><strong>Join using my link:<\/strong><br \/>\r\n             <a href=\"#\" data-ref-anchor target=\"_blank\" rel=\"noopener\"><\/a><\/p>\r\n          <p><em>Finite Earth. Finite Consumption.<\/em><\/p>\r\n        <\/div>\r\n\r\n        <div class=\"fem-copy-row\">\r\n          <button type=\"button\" class=\"fem-cta fem-cta--plain\" onclick=\"copyInvite()\">COPY MESSAGE<\/button>\r\n          <button type=\"button\" class=\"fem-btn-outline\" onclick=\"copyReferralLink()\">COPY MY LINK<\/button>\r\n        <\/div>\r\n\r\n        <div class=\"fem-share\">\r\n          <span>Share:<\/span>\r\n          <button type=\"button\" class=\"fem-share-icon\" onclick=\"shareWhatsApp()\" title=\"Share on WhatsApp\" aria-label=\"Share on WhatsApp\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"22\" height=\"22\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n              <path d=\"M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232\"\/>\r\n            <\/svg>\r\n          <\/button>\r\n          <button type=\"button\" class=\"fem-share-icon\" onclick=\"shareLinkedIn()\" title=\"Share on LinkedIn\" aria-label=\"Share on LinkedIn\">\r\n            <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M4.98 3.5A2.5 2.5 0 105 8.5a2.5 2.5 0 00-.02-5zM3 21h4V9H3v12zm7-12h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.6c0-1.34-.03-3.06-1.87-3.06-1.87 0-2.16 1.46-2.16 2.96V21H10V9z\"\/>\r\n            <\/svg>\r\n          <\/button>\r\n          <button type=\"button\" class=\"fem-share-icon\" onclick=\"shareInstagram()\" title=\"Share on Instagram\" aria-label=\"Share on Instagram\">\r\n            <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n              <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"5\" ry=\"5\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n              <circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n              <circle cx=\"17\" cy=\"7\" r=\"1.2\" fill=\"currentColor\"\/>\r\n            <\/svg>\r\n          <\/button>\r\n        <\/div>\r\n\r\n        <p class=\"fem-step-note\">\r\n  Create Your Own Climate Satyagraha Circle and Grow.\r\n  <a href=\"http:\/\/thefiniteearth.org\/wp-content\/uploads\/2026\/11\/Structure-Climate-Satyagraha-Circle-2.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Read This Guide<\/a>.\r\n  <!-- You can also share this\r\n<a href=\"\/climate-satyagraha-intro-video\/\" target=\"_blank\" rel=\"noopener noreferrer\">introductory video<\/a>.\r\n-->\r\n<\/p>\r\n\r\n        <!-- HIDDEN textareas read by the copy buttons (filled by femApplyCodeToSpread) -->\r\n        <textarea id=\"femReferralLinkText\" class=\"fem-invite-hidden\" readonly data-ref-link tabindex=\"-1\" aria-hidden=\"true\"><\/textarea>\r\n        <textarea id=\"femInviteText\" class=\"fem-invite-hidden\" readonly data-invite-text tabindex=\"-1\" aria-hidden=\"true\"><\/textarea>\r\n      <\/div>\r\n\r\n      <!-- \u2500\u2500 See your impact \u2500\u2500 -->\r\n      <div class=\"fem-block\">\r\n        <h3 class=\"fem-h3\">Now, See Your Growing Impact<\/h3>\r\n        <p class=\"fem-text\">Whenever someone registers using your code or invitation link, they will be added to your Climate Satyagrahi network.<\/p>\r\n        <p class=\"fem-text\">You can see how many people have joined through your efforts.<\/p>\r\n        <a href=\"https:\/\/thefiniteearth.org\/see-your-impact\/\" class=\"fem-cta\">\r\n          <span>SEE YOUR IMPACT<\/span>\r\n          <span class=\"fem-cta-arrow\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12h13M12 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n          <\/span>\r\n        <\/a>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- \u2500\u2500 OPTIONAL DONATE \u2500\u2500\r\n         The pledge, code and certificate above are already complete.\r\n         This is a plain link to the existing Razorpay payment page,\r\n         opened in a new tab \u2014 it does not touch the pledge record. -->\r\n    <div class=\"fem-donate-optional\" id=\"femDonateOptional\">\r\n      <p>Every movement needs funds. Support it with your voluntary contribution \u2013 <strong>Donate<\/strong>.<\/p>\r\n      <a href=\"https:\/\/pages.razorpay.com\/pledgeFEM\" class=\"fem-cta fem-cta--plain\" id=\"femDonateNowBtn\"\r\n         target=\"_blank\" rel=\"noopener\">DONATE<\/a>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- Register again (shown on the thank-you page only) -->\r\n  <div class=\"fem-after\">\r\n    <button type=\"button\" id=\"femResetBtn\" class=\"fem-btn-outline\">Register Again<\/button>\r\n  <\/div>\r\n\r\n<\/div><!-- #fem-wrapper -->\r\n\r\n<script>\r\n\/* ============================================================\r\n   UI HELPERS (no API \/ payment logic here)\r\n   ============================================================ *\/\r\n\/* Marks the flow in the hero: steps before n are done, n is current. *\/\r\nfunction femSetFlowStep(n) {\r\n  document.querySelectorAll('#femFlow [data-flow-step]').forEach(function (item) {\r\n    var s = parseInt(item.getAttribute('data-flow-step'), 10);\r\n    item.classList.toggle('is-done', s < n);\r\n    item.classList.toggle('is-active', s === n);\r\n    if (s === n) item.setAttribute('aria-current', 'step');\r\n    else item.removeAttribute('aria-current');\r\n  });\r\n}\r\n\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  \/* info toggles *\/\r\n  document.querySelectorAll('#fem-wrapper [data-info]').forEach(function (btn) {\r\n    btn.addEventListener('click', function () {\r\n      var box = document.getElementById(btn.getAttribute('data-info'));\r\n      if (!box) return;\r\n      var open = box.style.display !== 'block';\r\n      box.style.display = open ? 'block' : 'none';\r\n      btn.setAttribute('aria-expanded', open ? 'true' : 'false');\r\n    });\r\n  });\r\n});\r\n\r\n\/* v15: REFERRAL CODE CARRIED FROM THE HOMEPAGE (fallback only).\r\n   A referral link lands on the homepage, which keeps the code in sessionStorage\r\n   ('femus_ref') and appends ?ref=CODE to its REGISTER PLEDGE buttons. When the URL\r\n   here carries ?ref=, PHP has already handled it above (referral box + pre-filled\r\n   field) and this does NOTHING. It only fills an EMPTY Invitation Code field when\r\n   the visitor arrived without ?ref= (e.g. via the site menu). Never overwrites a\r\n   value the server or the visitor put there. Fails silently. *\/\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  try {\r\n    if (\/[?&]ref=\/.test(window.location.search)) return;   \/* server-side handling already ran *\/\r\n    var input = document.getElementById('fem-referrer');\r\n    if (!input || input.value.trim() !== '') return;\r\n    var ref = (window.sessionStorage && sessionStorage.getItem('femus_ref')) || '';\r\n    if (\/^[A-Za-z0-9_-]{1,40}$\/.test(ref)) input.value = ref;\r\n  } catch (e) {}\r\n});\r\n<\/script>\r\n\r\n<script>\r\n\/* ============================================================\r\n   COUNTRY LIST  (API, with an offline fallback)\r\n   ============================================================ *\/\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n  const select = document.getElementById(\"fem-country\");\r\n  if (!select) return;\r\n\r\n  const fallbackCountries = [\r\n    \"India\",\"United States\",\"United Kingdom\",\"Canada\",\"Australia\",\"United Arab Emirates\",\r\n    \"Singapore\",\"Nepal\",\"Bangladesh\",\"Pakistan\",\"Sri Lanka\",\"Germany\",\"France\",\"Italy\",\r\n    \"Spain\",\"Netherlands\",\"Japan\",\"China\",\"South Africa\",\"Brazil\"\r\n  ];\r\n\r\n  function fillCountries(countries) {\r\n    select.innerHTML = '<option value=\"\">Select your country<\/option>';\r\n\r\n    countries\r\n      .filter(Boolean)\r\n      .sort((a, b) => a.localeCompare(b))\r\n      .forEach(function (country) {\r\n        const opt = document.createElement(\"option\");\r\n        opt.value = country;\r\n        opt.textContent = country;\r\n        if (country === \"India\") opt.selected = true;\r\n        select.appendChild(opt);\r\n      });\r\n\r\n    if (typeof femUpdateCountryRules === \"function\") femUpdateCountryRules();\r\n  }\r\n\r\n  fillCountries(fallbackCountries);\r\n\r\n  fetch(\"https:\/\/restcountries.com\/v3.1\/all?fields=name\")\r\n    .then(function (res) {\r\n      if (!res.ok) throw new Error(\"Country API failed: \" + res.status);\r\n      return res.json();\r\n    })\r\n    .then(function (data) {\r\n      const countries = data\r\n        .map(function (c) { return c && c.name && c.name.common ? c.name.common : null; })\r\n        .filter(Boolean);\r\n      if (countries.length > 0) fillCountries(countries);\r\n    })\r\n    .catch(function (err) {\r\n      console.error(\"Country loading failed, using fallback list:\", err);\r\n    });\r\n});\r\n<\/script>\r\n\r\n<script>\r\n\/* Copy helpers *\/\r\nfunction copyInvite() {\r\n  const copyText = document.getElementById(\"femInviteText\");\r\n  if (!copyText) return;\r\n  copyText.select();\r\n  copyText.setSelectionRange(0, 99999);\r\n  navigator.clipboard.writeText(copyText.value)\r\n    .then(() => alert(\"Invite message with your link copied to clipboard!\"))\r\n    .catch(() => { document.execCommand(\"copy\"); alert(\"Message copied!\"); });\r\n}\r\n\r\nfunction copyReferralLink() {\r\n  const linkText = document.getElementById(\"femReferralLinkText\");\r\n  if (!linkText) return;\r\n  linkText.select();\r\n  linkText.setSelectionRange(0, 99999);\r\n  navigator.clipboard.writeText(linkText.value)\r\n    .then(() => alert(\"Your referral link has been copied!\"))\r\n    .catch(() => { document.execCommand(\"copy\"); alert(\"Referral link copied!\"); });\r\n}\r\n<\/script>\r\n\r\n<script>\r\n\/* ============================================================\r\n   POST-PLEDGE STATE\r\n   ============================================================ *\/\r\nfunction femGetStoredSubmission() {\r\n  const stored = localStorage.getItem('femus_submission');\r\n  if (!stored) return null;\r\n  try {\r\n    const data = JSON.parse(stored);\r\n    return (data && data.ucode) ? data : null;\r\n  } catch (e) { return null; }\r\n}\r\n\r\nfunction femGetStoredLimitLabel() {\r\n  try {\r\n    const raw = localStorage.getItem('femus_first_limit');\r\n    if (!raw) return '';\r\n    const parsed = JSON.parse(raw);\r\n    return (parsed && parsed.label) ? parsed.label : '';\r\n  } catch (e) { return ''; }\r\n}\r\n\r\n\/* v15: WHERE A REFERRAL LINK POINTS \u2014 the homepage (where the pledge is read).\r\n   The homepage carries ?ref=CODE on to the form. Was 'https:\/\/thefiniteearth.org\/pledge\/'.\r\n   Change here only; must end with a slash. *\/\r\nvar FEM_REF_BASE = 'https:\/\/thefiniteearth.org\/';\r\n\r\n\/* Ready-to-share message \u2014 the same wording as the box in the markup. *\/\r\nfunction femBuildInviteMessage(ucode) {\r\n  const refUrl = FEM_REF_BASE + '?ref=' + encodeURIComponent(ucode);\r\n\r\n  return {\r\n    refUrl: refUrl,\r\n    message:\r\n\"Accepting a simple truth\u2014\u2018Earth is finite; therefore, our consumption must also have limits\u2019\u2014is the first and most powerful step towards climate correction. This is Climate Satyagraha.\\n\\n\" +\r\n\"I have joined Climate Satyagraha, a global people's movement for finite living on a finite Earth.\\n\\n\" +\r\n\"I invite you to join this movement by taking a simple pledge of living within Earth's limits.\\n\\n\" +\r\n\"Join using my link:\\n\" + refUrl + \"\\n\\n\" +\r\n\"Finite Earth. Finite Consumption.\"\r\n  };\r\n}\r\n\r\n\/* The code currently shown on the page (set below). *\/\r\nvar femCurrentCode = '';\r\n\r\nfunction femApplyCodeToSpread(ucode) {\r\n  if (!ucode) return;\r\n  femCurrentCode = ucode;\r\n  const built = femBuildInviteMessage(ucode);\r\n\r\n  \/* text only \u2014 a code can never inject markup *\/\r\n  document.querySelectorAll('[data-code-slot]').forEach(function (el) {\r\n    el.textContent = ucode;\r\n  });\r\n\r\n  document.querySelectorAll('[data-ref-anchor]').forEach(function (a) {\r\n    a.href = built.refUrl;\r\n    a.textContent = built.refUrl;\r\n  });\r\n\r\n  const inviteText = document.querySelector('[data-invite-text]');\r\n  if (inviteText) inviteText.value = built.message;\r\n\r\n  const refLink = document.querySelector('[data-ref-link]');\r\n  if (refLink) refLink.value = built.refUrl;\r\n\r\n  \/* echo back a first limit stored by an older version of this page *\/\r\n  const limitLabel = femGetStoredLimitLabel();\r\n  const limitWrap  = document.querySelector('[data-limit-wrap]');\r\n  const limitSlot  = document.querySelector('[data-limit-slot]');\r\n  if (limitLabel && limitWrap && limitSlot) {\r\n    limitSlot.textContent = limitLabel;\r\n    limitWrap.style.display = '';\r\n  }\r\n\r\n  \/* certificate download \u2014 same link format as before; the pledge is read\r\n     server-side from the code. *\/\r\n  document.querySelectorAll('[data-cert-btn]').forEach(function (btn) {\r\n    btn.href = '?fem_action=download_cert&code=' + encodeURIComponent(ucode);\r\n  });\r\n}\r\n\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  const params = new URLSearchParams(window.location.search);\r\n  const urlCode = params.get('ucode') || '';\r\n  const stored = femGetStoredSubmission();\r\n\r\n  \/* v11: a code in the URL is used only if the server found that pledge\r\n     (rendered below by PHP). Otherwise fall back to this browser's own\r\n     saved pledge; with neither, the form stays on screen. *\/\r\n  const serverCode = \"\";\r\n  const serverName = \"\";\r\n  const urlVerified = !!urlCode && !!serverCode && urlCode.toLowerCase() === String(serverCode).toLowerCase();\r\n\r\n  const ucode = urlVerified ? serverCode : (stored ? stored.ucode : '');\r\n  if (!ucode) return;\r\n\r\n  const name = urlVerified ? serverName\r\n             : ((stored && stored.name) ? stored.name : '');\r\n\r\n  \/* hide the form, reveal the thank-you card *\/\r\n  const formFields = document.getElementById('femFormFields');\r\n  const assets     = document.getElementById('femAssetsSection');\r\n  const resetBtn   = document.getElementById('femResetBtn');\r\n  const femTitle   = document.querySelector('#fem-wrapper .fem-title');\r\n  const femLead    = document.querySelector('#fem-wrapper .fem-lead');\r\n\r\n  if (formFields) formFields.style.display = 'none';\r\n  if (assets)     assets.style.display     = 'block';\r\n  if (resetBtn)   resetBtn.style.display   = 'inline-flex';\r\n  if (femLead)    femLead.style.display    = 'none';\r\n\r\n  const wrapper = document.getElementById('fem-wrapper');\r\n  if (wrapper) wrapper.classList.add('fem-is-thankyou');\r\n\r\n  \/* Step 3 \u2014 Invite Others *\/\r\n  femSetFlowStep(3);\r\n\r\n  if (femTitle) {\r\n    \/* built with text nodes, so a name can never inject markup *\/\r\n    femTitle.textContent = 'Thank you';\r\n    if (name) {\r\n      const nameSpan = document.createElement('span');\r\n      nameSpan.className = 'fem-title-name';\r\n      nameSpan.textContent = name;\r\n      femTitle.appendChild(document.createTextNode(' '));\r\n      femTitle.appendChild(nameSpan);\r\n    }\r\n    femTitle.appendChild(document.createTextNode(', you are now a Climate Satyagrahi.'));\r\n  }\r\n\r\n  femApplyCodeToSpread(ucode);\r\n});\r\n<\/script>\r\n\r\n<script>\r\n\/* Social share *\/\r\nfunction getInviteData() {\r\n  if (femCurrentCode) return femBuildInviteMessage(femCurrentCode);\r\n  const stored = femGetStoredSubmission();\r\n  if (!stored) return null;\r\n  return femBuildInviteMessage(stored.ucode);\r\n}\r\n\r\nfunction shareWhatsApp() {\r\n  const data = getInviteData();\r\n  if (!data) return alert('Unable to load invite message.');\r\n  window.open('https:\/\/wa.me\/?text=' + encodeURIComponent(data.message), '_blank');\r\n}\r\n\r\nfunction shareLinkedIn() {\r\n  const data = getInviteData();\r\n  if (!data) return alert('Unable to load invite message.');\r\n  window.open('https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=' + encodeURIComponent(data.refUrl), '_blank');\r\n}\r\n\r\nfunction shareInstagram() {\r\n  const data = getInviteData();\r\n  if (!data) return alert('Unable to load invite message.');\r\n  navigator.clipboard.writeText(data.message).then(() => {\r\n    alert('Invite message copied. Paste it on Instagram.');\r\n    window.open('https:\/\/www.instagram.com\/', '_blank');\r\n  }).catch(() => alert('Copy failed. Please copy manually.'));\r\n}\r\n<\/script>\r\n\r\n<script>\r\n\/* Auto-dismiss alerts after 5s \u2014 skip ones that require manual dismiss *\/\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  document.querySelectorAll('.fem-alert:not([data-manual-dismiss])').forEach(alertEl => {\r\n    setTimeout(() => {\r\n      alertEl.classList.add('fem-alert--fade');\r\n      setTimeout(() => alertEl.remove(), 400);\r\n    }, 5000);\r\n  });\r\n});\r\n<\/script>\r\n\r\n<script>\r\n\/* Register again *\/\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  const resetBtn = document.getElementById('femResetBtn');\r\n  if (!resetBtn) return;\r\n\r\n  resetBtn.addEventListener('click', function () {\r\n    const proceed = confirm(\r\n      \"Clicking OK will restart registration.\\n\\n\" +\r\n      \"Download your certificate and save your referral code before continuing.\\n\\n\" +\r\n      \"Proceed? Press Cancel if unsure.\"\r\n    );\r\n\r\n    if (!proceed) return;\r\n\r\n    localStorage.removeItem('femus_support_choice');\r\n    localStorage.removeItem('femus_submission');\r\n    localStorage.removeItem('femus_form_data');\r\n    localStorage.removeItem('redirect_to_payment');\r\n    localStorage.removeItem('femus_pending_payment');\r\n    localStorage.removeItem('femus_first_limit');\r\n    \/* v15: Register Again goes straight to the homepage (where the pledge is read),\r\n       not back to this form. Same base as the referral link (FEM_REF_BASE). *\/\r\n    window.location.href = (typeof FEM_REF_BASE === 'string' && FEM_REF_BASE) ? FEM_REF_BASE : 'https:\/\/thefiniteearth.org\/';\r\n  });\r\n});\r\n<\/script>\r\n\r\n<script>\r\n\/* ============================================================\r\n   PLEDGE SUBMIT  (v09: no payment \u2014 the pledge is saved directly)\r\n   Razorpay checkout.js is no longer loaded. The pending-payment\r\n   recovery below is kept so a payment started before this update\r\n   still turns into a saved pledge.\r\n   v13: only the button label changed (it now lives in [data-btn-label]\r\n   so the arrow icon survives the loading state).\r\n   ============================================================ *\/\r\nconst femRazorpayConfig = {\r\n  ajaxUrl: \"https:\/\/thefiniteearth.org\/wp-admin\/admin-ajax.php\",\r\n  nonce: \"0bf88487ef\"\r\n};\r\n\r\nconst FEM_SUBMIT_LABEL = 'REGISTER & GET MY CODE';\r\n\r\n\/* Sets the visible button text without removing the arrow icon. *\/\r\nfunction femSetButtonText(btn, text) {\r\n  const label = btn.querySelector('[data-btn-label]') || btn;\r\n  label.textContent = text;\r\n}\r\n\r\nfunction femIsIndiaCountry(country) {\r\n  const normalized = String(country || '').trim().toLowerCase().replace(\/\\s+\/g, ' ');\r\n  return ['india', 'in', 'ind', 'bharat'].includes(normalized);\r\n}\r\n\r\n\/* Called by the country list. The donation rules that lived here are\r\n   gone (v09); only the button label reset remains. The India phone rule\r\n   is applied at submit time. *\/\r\nfunction femUpdateCountryRules() {\r\n  const submitBtn = document.getElementById('femFinalPledgeBtn');\r\n\r\n  if (submitBtn && submitBtn.dataset.submitting !== '1') {\r\n    femSetButtonText(submitBtn, FEM_SUBMIT_LABEL);\r\n  }\r\n}\r\n\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  const countrySelect = document.querySelector(\"select[name='fem_country']\");\r\n  if (countrySelect) {\r\n    countrySelect.addEventListener('change', femUpdateCountryRules);\r\n    femUpdateCountryRules();\r\n  }\r\n});\r\n\r\nfunction femShowPaymentError(message, extra) {\r\n  console.error('[FEM Razorpay Error]', message, extra || '');\r\n\r\n  let finalMessage = message || 'Something went wrong. Please try again.';\r\n\r\n  if (extra && extra.debug) {\r\n    finalMessage += '\\n\\nDebug:\\n' + JSON.stringify(extra.debug, null, 2);\r\n  }\r\n\r\n  alert(finalMessage);\r\n}\r\n\r\nfunction femSetButtonLoading(isLoading, text) {\r\n  const btn = document.getElementById('femFinalPledgeBtn');\r\n  if (!btn) return;\r\n\r\n  if (isLoading) {\r\n    btn.dataset.submitting = '1';\r\n    btn.disabled = true;\r\n    btn.style.opacity = '0.6';\r\n    btn.style.cursor = 'not-allowed';\r\n    femSetButtonText(btn, text || 'Please wait\u2026');\r\n  } else {\r\n    btn.dataset.submitting = '0';\r\n    btn.disabled = false;\r\n    btn.style.opacity = '1';\r\n    btn.style.cursor = 'pointer';\r\n    femSetButtonText(btn, FEM_SUBMIT_LABEL);\r\n  }\r\n}\r\n\r\nfunction femAjaxPost(params) {\r\n  const body = params instanceof FormData ? params : new URLSearchParams(params);\r\n\r\n  return fetch(femRazorpayConfig.ajaxUrl, {\r\n    method: 'POST',\r\n    credentials: 'same-origin',\r\n    body: body\r\n  })\r\n  .then(function (response) {\r\n    return response.text().then(function (text) {\r\n      console.log('[FEM AJAX Raw Response]', {\r\n        status: response.status,\r\n        statusText: response.statusText,\r\n        body: text\r\n      });\r\n\r\n      if (text.trim() === '0') {\r\n        throw new Error('WordPress AJAX action not found. Set the WPCode\/Code Snippets setting to \"Run everywhere\", then save and refresh the pledge page.');\r\n      }\r\n\r\n      if (text.trim() === '-1') {\r\n        throw new Error('WordPress AJAX nonce failed. Refresh the page and try again.');\r\n      }\r\n\r\n      let json = null;\r\n\r\n      try {\r\n        json = JSON.parse(text);\r\n      } catch (e) {\r\n        console.error('[FEM AJAX Non-JSON Response]', {\r\n          status: response.status,\r\n          statusText: response.statusText,\r\n          body: text\r\n        });\r\n\r\n        throw new Error(\r\n          'Server returned non-JSON response. HTTP ' +\r\n          response.status +\r\n          ': ' + text.slice(0, 300)\r\n        );\r\n      }\r\n\r\n      if (!response.ok) {\r\n        console.error('[FEM AJAX HTTP Error]', { status: response.status, response: json });\r\n      }\r\n\r\n      console.log('[FEM AJAX Response]', json);\r\n      return json;\r\n    });\r\n  });\r\n}\r\n\r\nfunction femClearPendingPayment() {\r\n  localStorage.removeItem('femus_pending_payment');\r\n}\r\n\r\nfunction femGetPendingPayment() {\r\n  const raw = localStorage.getItem('femus_pending_payment');\r\n  if (!raw) return null;\r\n\r\n  try {\r\n    const data = JSON.parse(raw);\r\n\r\n    if (!data || !data.attempt_id || !data.order_id) {\r\n      femClearPendingPayment();\r\n      return null;\r\n    }\r\n\r\n    \/*\r\n     * Clear very old pending payment after 24 hours.\r\n     *\/\r\n    const maxAge = 24 * 60 * 60 * 1000;\r\n    if (data.created_at && Date.now() - data.created_at > maxAge) {\r\n      femClearPendingPayment();\r\n      return null;\r\n    }\r\n\r\n    return data;\r\n  } catch (e) {\r\n    femClearPendingPayment();\r\n    return null;\r\n  }\r\n}\r\n\r\nlet femPendingPaymentChecking = false;\r\n\r\nfunction femResetPendingCheckButtonOnly() {\r\n  const btn = document.getElementById('femFinalPledgeBtn');\r\n  if (!btn) return;\r\n\r\n  const text = (btn.textContent || '').trim();\r\n\r\n  if (text === 'Checking payment status\u2026' || text === 'Checking payment status...') {\r\n    femSetButtonLoading(false);\r\n  }\r\n}\r\n\r\nfunction femCheckPendingPaymentOnReturn(retryCount = 0) {\r\n  const pending = femGetPendingPayment();\r\n\r\n  if (!pending) {\r\n    femResetPendingCheckButtonOnly();\r\n    return;\r\n  }\r\n\r\n  \/*\r\n   * If user already has completed submission, no need to check.\r\n   *\/\r\n  const submitted = localStorage.getItem('femus_submission');\r\n  if (submitted) {\r\n    femClearPendingPayment();\r\n    femResetPendingCheckButtonOnly();\r\n    return;\r\n  }\r\n\r\n  \/*\r\n   * Avoid multiple checks running at same time.\r\n   *\/\r\n  if (femPendingPaymentChecking) {\r\n    femResetPendingCheckButtonOnly();\r\n    return;\r\n  }\r\n\r\n  femPendingPaymentChecking = true;\r\n\r\n  console.log('[FEM Pending Payment Check]', { pending, retryCount });\r\n\r\n  femResetPendingCheckButtonOnly();\r\n\r\n  femAjaxPost({\r\n    action: 'fem_check_pending_payment',\r\n    nonce: femRazorpayConfig.nonce,\r\n    attempt_id: pending.attempt_id,\r\n    order_id: pending.order_id\r\n  })\r\n  .then(function (res) {\r\n    console.log('[FEM Pending Payment Result]', res);\r\n\r\n    if (!res || !res.success) {\r\n      femResetPendingCheckButtonOnly();\r\n      return;\r\n    }\r\n\r\n    const data = res.data || {};\r\n\r\n    if (data.status === 'success') {\r\n      femClearPendingPayment();\r\n\r\n      localStorage.setItem('femus_submission', JSON.stringify({\r\n        submitted: true,\r\n        name: data.name,\r\n        ucode: data.ucode,\r\n        submitted_at: Date.now()\r\n      }));\r\n\r\n      window.location.href =\r\n        window.location.pathname +\r\n        '?pledge_success=1&ucode=' +\r\n        encodeURIComponent(data.ucode);\r\n\r\n      return;\r\n    }\r\n\r\n    femResetPendingCheckButtonOnly();\r\n\r\n    if (retryCount < 5) {\r\n      const delays = [2000, 3000, 5000, 10000, 15000];\r\n      setTimeout(function () {\r\n        femCheckPendingPaymentOnReturn(retryCount + 1);\r\n      }, delays[retryCount] || 5000);\r\n    }\r\n  })\r\n  .catch(function (err) {\r\n    console.warn('[FEM Pending Payment Check Failed]', err);\r\n\r\n    femResetPendingCheckButtonOnly();\r\n\r\n    if (retryCount < 5) {\r\n      const delays = [3000, 5000, 10000, 15000, 20000];\r\n      setTimeout(function () {\r\n        femCheckPendingPaymentOnReturn(retryCount + 1);\r\n      }, delays[retryCount] || 5000);\r\n    }\r\n  })\r\n  .finally(function () {\r\n    femPendingPaymentChecking = false;\r\n    femResetPendingCheckButtonOnly();\r\n  });\r\n}\r\n\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  femCheckPendingPaymentOnReturn();\r\n});\r\n\r\nwindow.addEventListener('focus', function () {\r\n  femCheckPendingPaymentOnReturn();\r\n});\r\n\r\nwindow.addEventListener('pageshow', function () {\r\n  femCheckPendingPaymentOnReturn();\r\n});\r\n\r\ndocument.getElementById('femPledgeForm').addEventListener('submit', function(e) {\r\n  e.preventDefault();\r\n\r\n  const form = this;\r\n  const btn = document.getElementById('femFinalPledgeBtn');\r\n\r\n  if (btn && btn.dataset.submitting === '1') return false;\r\n\r\n  femUpdateCountryRules();\r\n\r\n  const country = document.querySelector(\"select[name='fem_country']\")?.value.trim() || '';\r\n  const isIndia = femIsIndiaCountry(country);\r\n  const phoneInput = document.querySelector(\"input[name='fem_phone']\");\r\n  const phone = phoneInput ? phoneInput.value.trim() : '';\r\n  const cleanPhone = phone.replace(\/\\D\/g, '');\r\n  const phoneRegex = \/^[1-9]\\d{9}$\/;\r\n\r\n  if (!cleanPhone) {\r\n    alert('Please enter a valid phone number.');\r\n    if (phoneInput) phoneInput.focus();\r\n    return false;\r\n  }\r\n\r\n  if (isIndia && !phoneRegex.test(cleanPhone)) {\r\n    alert('Please enter a valid 10 digit mobile number for India.');\r\n    if (phoneInput) phoneInput.focus();\r\n    return false;\r\n  }\r\n\r\n  if (!form.checkValidity()) {\r\n    form.reportValidity();\r\n    return false;\r\n  }\r\n\r\n  \/* Locks the button (dataset.submitting = '1') until the redirect, which\r\n     blocks a second submit from a double click. *\/\r\n  femSetButtonLoading(true, 'Saving pledge\u2026');\r\n\r\n  const formData = new FormData(form);\r\n  formData.append('action', 'fem_create_razorpay_order');\r\n  formData.append('nonce', femRazorpayConfig.nonce);\r\n\r\n  femAjaxPost(formData)\r\n    .then(function (res) {\r\n      if (!res || !res.success) {\r\n        const error = new Error((res && res.data && res.data.message) ? res.data.message : 'Could not save your pledge.');\r\n        error.debug = res && res.data ? res.data : null;\r\n        throw error;\r\n      }\r\n\r\n      const data = res.data;\r\n\r\n      \/* no first limit is chosen any more \u2014 drop any left from an old visit\r\n         so the thank-you page does not echo it *\/\r\n      localStorage.removeItem('femus_first_limit');\r\n\r\n      \/* v15: the referral the homepage kept for this visit has been used \u2014 clear it *\/\r\n      try { sessionStorage.removeItem('femus_ref'); } catch (e2) {}\r\n\r\n      localStorage.setItem('femus_submission', JSON.stringify({\r\n        submitted: true,\r\n        name: data.name,\r\n        ucode: data.ucode,\r\n        submitted_at: Date.now()\r\n      }));\r\n\r\n      window.location.href = data.success_url || (window.location.pathname + '?pledge_success=1&ucode=' + encodeURIComponent(data.ucode));\r\n    })\r\n    .catch(function (err) {\r\n      femSetButtonLoading(false);\r\n      femShowPaymentError(err.message, err);\r\n    });\r\n\r\n  return false;\r\n});\r\n<\/script>\r\n\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","tve_updated_post":"","tve_custom_css":"","tve_user_custom_css":"","tve_globals":{},"tcb2_ready":1,"tcb_editor_enabled":1,"tve_landing_page":"bd86f3fc67210fed5b2794ad4a56d3a9","_tve_header":"216","_tve_footer":"0"},"class_list":["post-85","page","type-page","status-publish","hentry","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/thefiniteearth.org\/hindi\/wp-json\/wp\/v2\/pages\/85","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thefiniteearth.org\/hindi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thefiniteearth.org\/hindi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thefiniteearth.org\/hindi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thefiniteearth.org\/hindi\/wp-json\/wp\/v2\/comments?post=85"}],"version-history":[{"count":12,"href":"https:\/\/thefiniteearth.org\/hindi\/wp-json\/wp\/v2\/pages\/85\/revisions"}],"predecessor-version":[{"id":2112,"href":"https:\/\/thefiniteearth.org\/hindi\/wp-json\/wp\/v2\/pages\/85\/revisions\/2112"}],"wp:attachment":[{"href":"https:\/\/thefiniteearth.org\/hindi\/wp-json\/wp\/v2\/media?parent=85"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}