{"id":342,"date":"2026-07-07T19:23:54","date_gmt":"2026-07-07T19:23:54","guid":{"rendered":"https:\/\/donothing.co.in\/app\/?page_id=342"},"modified":"2026-07-10T10:45:14","modified_gmt":"2026-07-10T10:45:14","slug":"referral","status":"publish","type":"page","link":"https:\/\/donothing.co.in\/app\/referral\/","title":{"rendered":"referral"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"342\" class=\"elementor elementor-342\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a06a2c3 e-con-full e-flex e-con e-parent\" data-id=\"a06a2c3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e332ff8 elementor-widget elementor-widget-html\" data-id=\"e332ff8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap');\r\n\r\n:root {\r\n  --theme-color: #ffcf21;\r\n  --title-color: #232323;\r\n  --ink: #171717;\r\n  --line: #ECECE8;\r\n  --muted: #303030;\r\n  --paper: #FAFAF7;\r\n  --green: #1f9d55;\r\n  --shadow-s: 0 4px 14px rgba(23,23,23,.03);\r\n  --shadow-m: 0 12px 34px rgba(23,23,23,.08);\r\n  --radius-xl: 24px;\r\n  --radius: 12px;\r\n  --ease: cubic-bezier(.22,.61,.36,1);\r\n}\r\n\r\n.dnm-ref-section {\r\n  font-family: 'Manrope', system-ui, sans-serif;\r\n  background-color: #ffffff;\r\n  padding: 96px 24px;\r\n  border-top: 1px solid var(--line);\r\n  line-height: 1.6;\r\n  -webkit-font-smoothing: antialiased;\r\n  color: var(--ink);\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.dnm-ref-section * {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.dnm-ref-section button { cursor: pointer; background: none; border: none; font-family: inherit; }\r\n\r\n.dnm-ref-section .wrap {\r\n  max-width: 1180px;\r\n  margin: 0 auto;\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n\/* Background Glow *\/\r\n.dnm-ref-section .glow {\r\n  position: absolute;\r\n  left: 50%;\r\n  top: 0;\r\n  transform: translate(-50%, -50%);\r\n  width: 800px;\r\n  height: 400px;\r\n  background: radial-gradient(ellipse, rgba(255,207,33,.15), transparent 60%);\r\n  filter: blur(24px);\r\n  z-index: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n\/* --- HEADER AREA --- *\/\r\n.dnm-ref-section .header-center {\r\n  text-align: center;\r\n  max-width: 720px;\r\n  margin: 0 auto 56px;\r\n}\r\n\r\n.dnm-ref-section .sub-title {\r\n  display: inline-block;\r\n  padding: 12px 20px;\r\n  border-radius: 12px;\r\n  background: linear-gradient(180deg, rgba(35,35,35,.06) 0%, rgba(35,35,35,.01) 100%);\r\n  box-shadow: -1px -1px 0 rgba(35,35,35,.2), 1px 1px 0 rgba(255,255,255,.8);\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  line-height: 24px;\r\n  letter-spacing: 1px;\r\n  text-transform: uppercase;\r\n  color: var(--title-color);\r\n  margin-bottom: 24px;\r\n}\r\n\r\n.dnm-ref-section .sub-title span { position: relative; padding-left: 20px; }\r\n.dnm-ref-section .sub-title span::before {\r\n  content: \"\"; position: absolute; left: 0; top: 50%;\r\n  width: 10px; height: 10px; background: var(--theme-color);\r\n  border-radius: 50%; transform: translateY(-50%);\r\n}\r\n\r\n.dnm-ref-section .h2 {\r\n  font-size: clamp(24px, 4vw, 42px); \r\n  font-weight: 600; \r\n  letter-spacing: -0.022em; \r\n  margin-bottom: 16px; \r\n  line-height: 1.14; \r\n  background: linear-gradient(98.77deg, #232323 41.04%, #575855 73.86%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  color: transparent;\r\n}\r\n\r\n.dnm-ref-section .lead {\r\n  color: #303030;\r\n  font-size: 15px;\r\n  font-weight: 500;\r\n  line-height: 1.5;\r\n}\r\n\r\n\/* --- STATS GRID --- *\/\r\n.dnm-ref-section .dnm-stats-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 24px;\r\n  margin-bottom: 48px;\r\n}\r\n\r\n.dnm-ref-section .dnm-stat-card {\r\n  background: var(--paper);\r\n  border: 1px solid var(--line);\r\n  border-radius: 20px;\r\n  padding: 32px 20px;\r\n  text-align: center;\r\n  box-shadow: var(--shadow-s);\r\n  transition: transform 0.3s var(--ease), box-shadow 0.3s ease;\r\n}\r\n\r\n.dnm-ref-section .dnm-stat-card:hover {\r\n  transform: translateY(-4px);\r\n  box-shadow: var(--shadow-m);\r\n}\r\n\r\n.dnm-ref-section .dnm-stat-num {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: baseline;\r\n  justify-content: center;\r\n  font-size: clamp(24px, 3vw, 42px);\r\n  font-weight: 600;\r\n  letter-spacing: -0.03em;\r\n  background: linear-gradient(98.77deg, #232323 41.04%, #575855 73.86%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  color: transparent;\r\n  padding-bottom: 14px;\r\n  margin-bottom: 14px;\r\n  line-height: 1.1;\r\n}\r\n\r\n.dnm-ref-section .dnm-stat-num::after {\r\n  content: \"\"; position: absolute; bottom: 0; left: 50%;\r\n  transform: translateX(-50%); width: 32px; height: 4px;\r\n  background-color: var(--theme-color); border-radius: 4px;\r\n}\r\n\r\n.dnm-ref-section .dnm-stat-num .prefix, \r\n.dnm-ref-section .dnm-stat-num .suffix { font-size: 0.6em; font-weight: 600; }\r\n.dnm-ref-section .dnm-stat-num .prefix { margin-right: 2px; }\r\n.dnm-ref-section .dnm-stat-num .suffix { margin-left: 2px; }\r\n.dnm-ref-section .dnm-stat-text { font-size: 15px; font-weight: 600; color: #575855; line-height: 1.4; }\r\n\r\n\/* --- STEPS ROW --- *\/\r\n.dnm-ref-section .dnm-steps-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 24px;\r\n  margin-bottom: 56px;\r\n}\r\n\r\n.dnm-ref-section .dnm-step-card {\r\n  background: #fff;\r\n  border: 1px solid var(--line);\r\n  border-radius: var(--radius-xl);\r\n  padding: 32px 24px;\r\n  box-shadow: var(--shadow-s);\r\n  transition: transform 0.3s var(--ease), box-shadow 0.3s ease;\r\n  position: relative;\r\n}\r\n\r\n.dnm-ref-section .dnm-step-card:hover {\r\n  transform: translateY(-4px);\r\n  box-shadow: var(--shadow-m);\r\n}\r\n\r\n.dnm-ref-section .step-head {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  margin-bottom: 16px;\r\n}\r\n\r\n.dnm-ref-section .step-icon {\r\n  width: 48px; height: 48px; border-radius: 14px;\r\n  background: var(--theme-color); display: grid; place-items: center;\r\n  color: var(--ink);\r\n}\r\n\r\n.dnm-ref-section .step-num {\r\n  font-size: 32px; font-weight: 700; color: #EDEDE6; line-height: 1;\r\n}\r\n\r\n.dnm-ref-section .dnm-step-card b {\r\n  font-size: 18px; font-weight: 600; color: var(--title-color);\r\n  display: block; margin-bottom: 8px; line-height: 1.2;\r\n}\r\n\r\n.dnm-ref-section .dnm-step-card p {\r\n  font-size: 15px; font-weight: 500; color: var(--muted); line-height: 1.5;\r\n}\r\n\r\n.dnm-ref-section .tc-link {\r\n  display: inline-block; margin-top: 14px; font-size: 13.5px;\r\n  font-weight: 700; color: var(--ink); text-decoration: underline;\r\n  text-underline-offset: 4px; decoration-color: var(--line);\r\n}\r\n.dnm-ref-section .tc-link:hover { color: var(--theme-color); text-decoration-color: var(--theme-color); }\r\n\r\n\r\n\/* --- SPLIT PANELS --- *\/\r\n.dnm-ref-section .split {\r\n  display: grid;\r\n  grid-template-columns: 1.1fr 0.9fr;\r\n  gap: 40px;\r\n  align-items: stretch;\r\n}\r\n\r\n.dnm-ref-section .panel {\r\n  background: #fff;\r\n  border: 1px solid var(--line);\r\n  border-radius: var(--radius-xl);\r\n  box-shadow: var(--shadow-m);\r\n  padding: clamp(28px, 4vw, 40px);\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.dnm-ref-section .p-head {\r\n  display: flex; align-items: center; gap: 14px; margin-bottom: 24px;\r\n}\r\n.dnm-ref-section .p-head .ic {\r\n  width: 44px; height: 44px; border-radius: 12px;\r\n  background: var(--theme-color); display: grid; place-items: center; color: var(--ink); flex: none;\r\n}\r\n.dnm-ref-section .p-head b { font-size: 17px; font-weight: 600; display: block; line-height: 1.2; margin-bottom: 2px;}\r\n.dnm-ref-section .p-head span { font-size: 14px; color: var(--muted); font-weight: 500;}\r\n\r\n\/* Generator Form (Left Panel) *\/\r\n.dnm-ref-section .rf-inputs {\r\n  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;\r\n}\r\n.dnm-ref-section .field label {\r\n  display: block; font-size: 13px; font-weight: 700;\r\n  margin-bottom: 8px; color: var(--ink); letter-spacing: .02em;\r\n}\r\n.dnm-ref-section .field input {\r\n  width: 100%; padding: 13px 16px; border: 1px solid var(--line);\r\n  border-radius: var(--radius); background: var(--paper); font-family: inherit;\r\n  font-size: 14.5px; color: var(--ink); transition: .25s var(--ease); font-weight: 500;\r\n}\r\n.dnm-ref-section .field input:focus {\r\n  outline: none; border-color: var(--title-color); background: #fff;\r\n  box-shadow: 0 0 0 4px rgba(255, 207, 33, 0.2);\r\n}\r\n.dnm-ref-section .field input.error { border-color: #e23b3b; }\r\n\r\n.dnm-ref-section .btn-gen {\r\n  width: 100%; display: inline-flex; align-items: center; justify-content: center;\r\n  gap: 8px; padding: 15px 24px; border-radius: 999px; font-weight: 700; font-size: 16px;\r\n  background: var(--theme-color); color: var(--title-color); border: none;\r\n  transition: all .2s var(--ease);\r\n}\r\n.dnm-ref-section .btn-gen:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,207,33,.4); }\r\n\r\n.dnm-ref-section .rf-result {\r\n  margin-top: 24px; border-top: 1px dashed var(--line); padding-top: 24px;\r\n  animation: rfin .4s ease; display: none;\r\n}\r\n.dnm-ref-section .rf-result.show { display: block; }\r\n@keyframes rfin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }\r\n\r\n.dnm-ref-section .res-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }\r\n.dnm-ref-section .code-box {\r\n  display: flex; justify-content: space-between; align-items: center;\r\n  background: var(--paper); border: 2px dashed #d4d4cd; border-radius: var(--radius);\r\n  padding: 12px 16px; margin-bottom: 20px;\r\n}\r\n.dnm-ref-section .code-box strong { font-size: 20px; color: var(--ink); letter-spacing: 1px; font-family: monospace; }\r\n.dnm-ref-section .btn-copy {\r\n  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700;\r\n  background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; transition: background .2s ease;\r\n}\r\n.dnm-ref-section .btn-copy:hover { background: #303030; }\r\n.dnm-ref-section .btn-copy.copied { background: var(--title-color); color: var(--theme-color); }\r\n\r\n.dnm-ref-section .tmpl-box {\r\n  width: 100%; min-height: 140px; resize: vertical; padding: 14px;\r\n  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;\r\n  font-family: inherit; font-size: 14px; line-height: 1.5; color: #303030; font-weight: 500; margin-bottom: 12px;\r\n}\r\n.dnm-ref-section .tmpl-box:focus { outline: none; border-color: var(--ink); }\r\n\r\n.dnm-ref-section .share-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\r\n.dnm-ref-section .btn-share {\r\n  display: inline-flex; align-items: center; justify-content: center; gap: 8px;\r\n  padding: 12px; border-radius: 10px; font-weight: 700; font-size: 14px; text-decoration: none;\r\n  transition: background .2s ease;\r\n}\r\n.dnm-ref-section .btn-wa { background: var(--ink); color: #fff; }\r\n.dnm-ref-section .btn-wa:hover { background: #303030; }\r\n.dnm-ref-section .btn-copymsg { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }\r\n.dnm-ref-section .btn-copymsg:hover { background: #f0f0ea; }\r\n.dnm-ref-section .btn-copymsg.copied { background: var(--ink); color: var(--theme-color); border-color: var(--ink);}\r\n\r\n\/* --- SMOOTH GLOWING TIMELINE (Right Panel) --- *\/\r\n.dnm-timeline {\r\n  position: relative;\r\n  padding-left: 32px;\r\n  margin-top: 16px;\r\n}\r\n\r\n\/* The vertical track. top + height are set precisely by JS so the line\r\n   runs exactly from the centre of dot #1 to the centre of dot #5,\r\n   independent of viewport size \/ content wrapping. *\/\r\n.tl-track {\r\n  position: absolute;\r\n  left: 9px;\r\n  top: 0;\r\n  height: 0;\r\n  width: 3px;\r\n  border-radius: 3px;\r\n}\r\n.tl-bg { \r\n  position: absolute; inset: 0; background: var(--line); border-radius: 3px;\r\n}\r\n.tl-progress {\r\n  position: absolute; top: 0; left: 0; width: 100%; height: 0;\r\n  background: var(--theme-color);\r\n  border-radius: 3px;\r\n  box-shadow: 0 0 10px 1px rgba(255,207,33,0.6);\r\n  will-change: height;\r\n}\r\n\r\n.tl-step {\r\n  position: relative;\r\n  margin-bottom: 24px;\r\n  opacity: 0;\r\n  transform: translateY(8px);\r\n  transition: opacity .5s var(--ease), transform .5s var(--ease);\r\n}\r\n.tl-step:last-child { margin-bottom: 0; }\r\n.tl-step.active { opacity: 1; transform: translateY(0); }\r\n\r\n.tl-dot {\r\n  position: absolute;\r\n  left: -33px;\r\n  top: 14px;\r\n  width: 18px;\r\n  height: 18px;\r\n  border-radius: 50%;\r\n  background: var(--paper);\r\n  border: 3px solid var(--line);\r\n  z-index: 3;\r\n  transform: translateY(-50%);\r\n  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease, width .3s ease, height .3s ease;\r\n}\r\n.tl-step.active .tl-dot {\r\n  background: var(--theme-color);\r\n  border-color: #fff;\r\n  box-shadow: 0 0 14px 2px rgba(255,207,33,0.8);\r\n}\r\n\r\n.tl-content {\r\n  background: #ffffff;\r\n  border: 1px solid var(--line);\r\n  padding: 14px 18px;\r\n  border-radius: 14px;\r\n  transition: all 0.5s ease;\r\n}\r\n.tl-content b {\r\n  display: block; font-size: 15px; color: var(--ink);\r\n  font-weight: 700; margin-bottom: 2px;\r\n}\r\n.tl-content span {\r\n  font-size: 13.5px; color: var(--muted); font-weight: 500;\r\n  line-height: 1.4; display: block;\r\n}\r\n\r\n\/* Highlight Step 5 (Final Payout) - Light Grey & Yellow theme *\/\r\n.tl-step.highlight .tl-dot {\r\n  width: 24px; height: 24px; left: -36px;\r\n}\r\n.tl-step.highlight.active .tl-dot {\r\n  background: var(--theme-color);\r\n  border-color: #fff;\r\n  box-shadow: 0 0 18px 4px rgba(255,207,33,0.9);\r\n}\r\n.tl-step.highlight.active .tl-content {\r\n  background: #fbfbf7;\r\n  border-color: var(--theme-color);\r\n  box-shadow: 0 8px 30px rgba(255,207,33,0.25);\r\n}\r\n\r\n.tl-amt {\r\n  display: inline-block; margin-top: 10px; background: var(--theme-color);\r\n  color: var(--ink); padding: 6px 14px; border-radius: 8px;\r\n  font-weight: 800; font-size: 14px; opacity: 0; transform: translateY(5px);\r\n  transition: opacity .5s ease .15s, transform .5s ease .15s;\r\n}\r\n.tl-step.highlight.active .tl-amt { opacity: 1; transform: translateY(0); }\r\n\r\n\/* --- RESPONSIVE --- *\/\r\n@media(max-width: 1024px) {\r\n  .dnm-ref-section .dnm-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }\r\n  .dnm-ref-section .dnm-steps-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }\r\n  .dnm-ref-section .split { grid-template-columns: 1fr; gap: 32px; }\r\n}\r\n\r\n@media(max-width: 900px) {\r\n  .dnm-ref-section .dnm-steps-grid { grid-template-columns: 1fr; gap: 16px; }\r\n}\r\n\r\n@media(max-width: 640px) {\r\n  .dnm-ref-section { padding: 64px 0; }\r\n  .dnm-ref-section .wrap { padding: 0 16px; }\r\n  .dnm-ref-section .header-center { margin-bottom: 40px; }\r\n  .dnm-ref-section .sub-title { padding: 10px 16px; font-size: 13px; margin-bottom: 20px; }\r\n  .dnm-ref-section .h2 { font-size: 26px; }\r\n  .dnm-ref-section .lead { font-size: 15px; }\r\n  \r\n  .dnm-ref-section .dnm-stats-grid { gap: 14px; margin-bottom: 32px; }\r\n  .dnm-ref-section .dnm-stat-card { padding: 24px 14px; border-radius: 16px; }\r\n  .dnm-ref-section .dnm-stat-num { font-size: 28px; padding-bottom: 10px; margin-bottom: 12px; }\r\n  .dnm-ref-section .dnm-stat-text { font-size: 13.5px; }\r\n  \r\n  .dnm-ref-section .dnm-steps-grid { margin-bottom: 40px; }\r\n  .dnm-ref-section .dnm-step-card { padding: 24px 20px; border-radius: 20px; }\r\n  \r\n  .dnm-ref-section .panel { padding: 24px 16px; }\r\n  .dnm-ref-section .rf-inputs { grid-template-columns: 1fr; gap: 14px; }\r\n  .dnm-ref-section .share-row { grid-template-columns: 1fr; }\r\n  \r\n  \/* Timeline Mobile Opt *\/\r\n  .dnm-timeline { padding-left: 28px; margin-top: 20px;}\r\n  .tl-track { left: 7px; }\r\n  .tl-dot { left: -28px; width: 14px; height: 14px; top: 16px; border-width: 2px;}\r\n  .tl-step.highlight .tl-dot { left: -31px; width: 20px; height: 20px; }\r\n  .tl-content { padding: 12px 14px; }\r\n  .tl-content b { font-size: 14.5px; }\r\n  .tl-content span { font-size: 12.5px; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .dnm-timeline .tl-step, .dnm-timeline .tl-dot,\r\n  .dnm-timeline .tl-content, .dnm-timeline .tl-amt {\r\n    transition: none !important; opacity: 1 !important; transform: none !important;\r\n  }\r\n  .dnm-timeline .tl-dot { transform: translateY(-50%) !important; }\r\n  .dnm-timeline .tl-progress { height: 100% !important; }\r\n  .tl-step.highlight .tl-dot { background: var(--theme-color) !important; border-color: #fff !important; box-shadow: none !important;}\r\n  .tl-step.highlight .tl-content { background: #fbfbf7 !important; border-color: var(--theme-color) !important; }\r\n}\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.9.3\/dist\/confetti.browser.min.js\"><\/script>\r\n\r\n<section class=\"dnm-ref-section\" aria-label=\"Refer and Earn\">\r\n  <div class=\"glow\"><\/div>\r\n  <div class=\"wrap\">\r\n    \r\n    <div class=\"header-center\">\r\n      <div class=\"sub-title\"><span>Refer & Earn<\/span><\/div>\r\n      <h2 class=\"h2\">Refer a coaching institute.<br>Earn up to \u20b95,000.<\/h2>\r\n      <p class=\"lead\">Generate your unique code, share it with institute owners, and earn milestone rewards straight to your bank account when they join the platform.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"dnm-stats-grid\" id=\"rfCounterArea\">\r\n      <div class=\"dnm-stat-card\">\r\n        <div class=\"dnm-stat-num\">\r\n          <span class=\"prefix\">\u20b9<\/span>\r\n          <span class=\"dnm-counter\" data-target=\"5000\">0<\/span>\r\n        <\/div>\r\n        <div class=\"dnm-stat-text\">Per referral<\/div>\r\n      <\/div>\r\n      <div class=\"dnm-stat-card\">\r\n        <div class=\"dnm-stat-num\">\r\n          <span class=\"prefix\">\u20b9<\/span>\r\n          <span class=\"dnm-counter\" data-target=\"4.2\" data-decimals=\"1\">0<\/span>\r\n          <span class=\"suffix\">L+<\/span>\r\n        <\/div>\r\n        <div class=\"dnm-stat-text\">Paid out<\/div>\r\n      <\/div>\r\n      <div class=\"dnm-stat-card\">\r\n        <div class=\"dnm-stat-num\">\r\n          <span class=\"dnm-counter\" data-target=\"820\">0<\/span>\r\n          <span class=\"suffix\">+<\/span>\r\n        <\/div>\r\n        <div class=\"dnm-stat-text\">Active referrers<\/div>\r\n      <\/div>\r\n      <div class=\"dnm-stat-card\">\r\n        <div class=\"dnm-stat-num\">\r\n          <span class=\"dnm-counter\" data-target=\"7\">0<\/span>\r\n        <\/div>\r\n        <div class=\"dnm-stat-text\">Days to get paid<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"dnm-steps-grid\">\r\n      <div class=\"dnm-step-card\">\r\n        <div class=\"step-head\">\r\n          <div class=\"step-icon\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72\"\/><path d=\"m14 7 3 3\"\/><path d=\"M5 6v4\"\/><path d=\"M19 14v4\"\/><path d=\"M10 2v2\"\/><path d=\"M7 8H3\"\/><path d=\"M21 16h-4\"\/><path d=\"M11 3H9\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"step-num\">01<\/div>\r\n        <\/div>\r\n        <b>Create your code<\/b>\r\n        <p>Enter your name and phone number below. We instantly generate a unique referral code just for you.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"dnm-step-card\">\r\n        <div class=\"step-head\">\r\n          <div class=\"step-icon\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"18\" cy=\"5\" r=\"3\"\/><circle cx=\"6\" cy=\"12\" r=\"3\"\/><circle cx=\"18\" cy=\"19\" r=\"3\"\/><line x1=\"8.59\" x2=\"15.42\" y1=\"13.51\" y2=\"17.49\"\/><line x1=\"15.41\" x2=\"8.59\" y1=\"6.51\" y2=\"10.49\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"step-num\">02<\/div>\r\n        <\/div>\r\n        <b>Share the message<\/b>\r\n        <p>Send our ready-made template to coaching institute owners. They enter your code when booking a demo.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"dnm-step-card\">\r\n        <div class=\"step-head\">\r\n          <div class=\"step-icon\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"20\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><path d=\"M6 12h.01M18 12h.01\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"step-num\">03<\/div>\r\n        <\/div>\r\n        <b>Get paid via UPI\/Bank<\/b>\r\n        <p>Once the client agrees to build the app, your rewards are unlocked and sent directly to your UPI or Bank Account.<\/p>\r\n        <a href=\"https:\/\/donothing.co.in\/app\/term-condition\/\" target=\"_blank\" class=\"tc-link\">Read T&C to redeem<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"split\">\r\n      \r\n      <div class=\"panel\">\r\n        <div class=\"p-head\">\r\n          <div class=\"ic\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72\"\/><path d=\"m14 7 3 3\"\/><path d=\"M5 6v4\"\/><path d=\"M19 14v4\"\/><path d=\"M10 2v2\"\/><path d=\"M7 8H3\"\/><path d=\"M21 16h-4\"\/><path d=\"M11 3H9\"\/><\/svg>\r\n          <\/div>\r\n          <div>\r\n            <b>Create your referral code<\/b>\r\n            <span>Enter your details to generate your link instantly.<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"rf-inputs\">\r\n          <div class=\"field\">\r\n            <label>Your Name<\/label>\r\n            <input type=\"text\" id=\"rfInputName\" placeholder=\"e.g. Rahul Sharma\" autocomplete=\"off\">\r\n          <\/div>\r\n          <div class=\"field\">\r\n            <label>Phone Number<\/label>\r\n            <input type=\"tel\" id=\"rfInputPhone\" placeholder=\"10-digit number\" maxlength=\"15\" autocomplete=\"off\">\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"field\" style=\"margin-bottom: 16px;\">\r\n          <label>Email Address<\/label>\r\n          <input type=\"email\" id=\"rfInputEmail\" placeholder=\"you@example.com\" autocomplete=\"off\">\r\n        <\/div>\r\n        <button class=\"btn-gen\" id=\"rfGenerateBtn\">Generate My Code<\/button>\r\n\r\n        <div class=\"rf-result\" id=\"rfResultBox\">\r\n          <div class=\"res-label\">Your Unique Code<\/div>\r\n          <div class=\"code-box\">\r\n            <strong id=\"rfCodeDisplay\">CODE<\/strong>\r\n            <button class=\"btn-copy\" id=\"rfCopyCodeBtn\">\r\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/><\/svg> Copy\r\n            <\/button>\r\n          <\/div>\r\n\r\n          <div class=\"res-label\">Ready-to-share message<\/div>\r\n          <textarea class=\"tmpl-box\" id=\"rfMessageArea\" readonly><\/textarea>\r\n          \r\n          <div class=\"share-row\">\r\n            <a class=\"btn-share btn-wa\" id=\"rfShareWa\" target=\"_blank\" rel=\"noopener\">\r\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0 0 20.885 3.488\"\/><\/svg> Share\r\n            <\/a>\r\n            <button class=\"btn-share btn-copymsg\" id=\"rfCopyMsgBtn\">\r\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/><\/svg> Copy Text\r\n            <\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"panel\">\r\n        <div class=\"p-head\">\r\n          <div class=\"ic\" style=\"background:#FFF6D6;\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978\"\/><path d=\"M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978\"\/><path d=\"M18 9h1.5a1 1 0 0 0 0-5H18\"\/><path d=\"M4 22h16\"\/><path d=\"M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z\"\/><path d=\"M6 9H4.5a1 1 0 0 1 0-5H6\"\/><\/svg>\r\n          <\/div>\r\n          <div>\r\n            <b>How the process works<\/b>\r\n            <span>Your journey to earning \u20b95,000<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"dnm-timeline\" id=\"rfTimeline\">\r\n          <div class=\"tl-track\">\r\n            <div class=\"tl-bg\"><\/div>\r\n            <div class=\"tl-progress\"><\/div>\r\n          <\/div>\r\n          \r\n          <div class=\"tl-step\">\r\n            <div class=\"tl-dot\"><\/div>\r\n            <div class=\"tl-content\">\r\n              <b>1. Share Code<\/b>\r\n              <span>You give the referral code to your institute.<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          \r\n          <div class=\"tl-step\">\r\n            <div class=\"tl-dot\"><\/div>\r\n            <div class=\"tl-content\">\r\n              <b>2. Institute Signs Up<\/b>\r\n              <span>The institute registers on the platform.<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          \r\n          <div class=\"tl-step\">\r\n            <div class=\"tl-dot\"><\/div>\r\n            <div class=\"tl-content\">\r\n              <b>3. Demo Booked<\/b>\r\n              <span>They schedule a personalized walkthrough.<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          \r\n          <div class=\"tl-step\">\r\n            <div class=\"tl-dot\"><\/div>\r\n            <div class=\"tl-content\">\r\n              <b>4. Institute Pays Us<\/b>\r\n              <span>They agree to build the app and upgrade to paid.<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          \r\n          <div class=\"tl-step highlight\">\r\n            <div class=\"tl-dot\"><\/div>\r\n            <div class=\"tl-content\">\r\n              <b>5. You Get Your Money<\/b>\r\n              <span>Your reward is unlocked and sent to your bank.<\/span>\r\n              <div class=\"tl-amt\">\u20b95,000 Earned<\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n  \r\n  \/\/ --- COUNTER ANIMATION ---\r\n  const section = document.getElementById('rfCounterArea');\r\n  if (section) {\r\n    const counters = section.querySelectorAll('.dnm-counter');\r\n    const easeOutQuart = (t) => 1 - (--t) * t * t * t;\r\n    \r\n    const animateCounter = (counter) => {\r\n      const target = parseFloat(counter.getAttribute('data-target'));\r\n      const isFloat = counter.getAttribute('data-decimals') === '1';\r\n      let startTime = null;\r\n\r\n      const step = (currentTime) => {\r\n        if (!startTime) startTime = currentTime;\r\n        const progress = Math.min((currentTime - startTime) \/ 1500, 1);\r\n        const currentVal = easeOutQuart(progress) * target;\r\n        counter.textContent = isFloat ? currentVal.toFixed(1) : Math.floor(currentVal);\r\n        if (progress < 1) window.requestAnimationFrame(step);\r\n        else counter.textContent = isFloat ? target.toFixed(1) : target;\r\n      };\r\n      window.requestAnimationFrame(step);\r\n    };\r\n\r\n    const observer = new IntersectionObserver((entries, obs) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          counters.forEach(c => animateCounter(c));\r\n          obs.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, { threshold: 0.2 });\r\n    observer.observe(section);\r\n  }\r\n\r\n  \/\/ --- TIMELINE ANIMATION (the glowing line drives the dots, steps 1 -> 5) ---\r\n  const timeline = document.getElementById('rfTimeline');\r\n  if (timeline) {\r\n    const track    = timeline.querySelector('.tl-track');\r\n    const progress = timeline.querySelector('.tl-progress');\r\n    const steps    = Array.from(timeline.querySelectorAll('.tl-step'));\r\n    const dots     = steps.map(s => s.querySelector('.tl-dot'));\r\n    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    const centerY = (step, dot) => step.offsetTop + dot.offsetTop;\r\n\r\n    function layoutTrack() {\r\n      if (!dots.length) return { start: 0, span: 1 };\r\n      const start = centerY(steps[0], dots[0]);\r\n      const end   = centerY(steps[steps.length - 1], dots[dots.length - 1]);\r\n      const span  = Math.max(end - start, 1);\r\n      track.style.top    = start + 'px';\r\n      track.style.bottom = 'auto';\r\n      track.style.height = span + 'px';\r\n      return { start, span };\r\n    }\r\n\r\n    let started = false;\r\n    function play() {\r\n      if (started) return;\r\n      started = true;\r\n\r\n      const { start, span } = layoutTrack();\r\n\r\n      if (prefersReduced) {\r\n        progress.style.height = '100%';\r\n        steps.forEach(s => s.classList.add('active'));\r\n        return;\r\n      }\r\n\r\n      const fracs = dots.map((d, i) => {\r\n        const f = (centerY(steps[i], d) - start) \/ span;\r\n        return Math.min(Math.max(f, 0), 1);\r\n      });\r\n\r\n      const duration = 2800; \/\/ total time for the line to travel 1 -> 5\r\n      let t0 = null;\r\n      function frame(now) {\r\n        if (t0 === null) t0 = now;\r\n        const p = Math.min((now - t0) \/ duration, 1); \/\/ linear travel\r\n        progress.style.height = (p * 100) + '%';\r\n        for (let i = 0; i < fracs.length; i++) {\r\n          if (p + 0.0001 >= fracs[i]) steps[i].classList.add('active');\r\n        }\r\n        if (p < 1) window.requestAnimationFrame(frame);\r\n      }\r\n      window.requestAnimationFrame(frame);\r\n    }\r\n\r\n    let rz;\r\n    window.addEventListener('resize', () => {\r\n      clearTimeout(rz);\r\n      rz = setTimeout(() => { if (started) layoutTrack(); }, 150);\r\n    });\r\n\r\n    const tlObserver = new IntersectionObserver((entries, obs) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) { play(); obs.unobserve(entry.target); }\r\n      });\r\n    }, { threshold: 0.35 });\r\n    tlObserver.observe(timeline);\r\n  }\r\n\r\n  \/\/ --- CLIENT-SIDE CODE GENERATOR & CONFETTI ---\r\n  const nameInput = document.getElementById('rfInputName');\r\n  const phoneInput = document.getElementById('rfInputPhone');\r\n  const emailInput = document.getElementById('rfInputEmail');\r\n  const generateBtn = document.getElementById('rfGenerateBtn');\r\n  const resultBox = document.getElementById('rfResultBox');\r\n  const codeDisplay = document.getElementById('rfCodeDisplay');\r\n  const msgArea = document.getElementById('rfMessageArea');\r\n  const shareWa = document.getElementById('rfShareWa');\r\n\r\n  \/\/ Referral link base (must match REFERRAL_BASE_URL in the Apps Script).\r\n  const REFERRAL_BASE_URL = 'https:\/\/donothing.co.in\/app\/';\r\n  function buildReferralLink(code) {\r\n    var sep = REFERRAL_BASE_URL.indexOf('?') === -1 ? '?' : '&';\r\n    return REFERRAL_BASE_URL + sep + 'ref=' + encodeURIComponent(code);\r\n  }\r\n\r\n  \/\/ Webhook Script Initialization (in case it's not loaded by the Demo form)\r\nif (typeof window.vedaSubmit !== 'function') {\r\n    window.VEDA_CONFIG = window.VEDA_CONFIG || {\r\n      ENDPOINT: 'https:\/\/script.google.com\/macros\/s\/AKfycbwFv340AXYIs_UrG0Jk6Xvugod--96AZ20_YYFqcK2OyzZ2pFzJ9sBTTEGa1L3WwQXzmw\/exec', \r\n      TOKEN: 'donothing_secret_v1_9a8b7c6d5e' \r\n    };\r\n    window.vedaSubmit = function(payload) {\r\n      payload.token = window.VEDA_CONFIG.TOKEN;\r\n      payload.pageUrl = window.location.href;\r\n      payload.origin = window.location.origin;\r\n      var formBody = new URLSearchParams();\r\n      Object.keys(payload).forEach(function(key) {\r\n        formBody.append(key, payload[key] == null ? '' : String(payload[key]));\r\n      });\r\n      return fetch(window.VEDA_CONFIG.ENDPOINT, {\r\n        method: 'POST',\r\n        mode: 'no-cors',\r\n        keepalive: true,\r\n        body: formBody\r\n      });\r\n    };\r\n  }\r\n\r\n  function generateCode() {\r\n    let rawName = nameInput.value.trim().replace(\/[^a-zA-Z]\/g, '');\r\n    let rawPhone = phoneInput.value.replace(\/\\D\/g, '');\r\n    let rawEmail = emailInput.value.trim();\r\n\r\n    \/\/ Basic Validation\r\n    nameInput.classList.remove('error');\r\n    phoneInput.classList.remove('error');\r\n    emailInput.classList.remove('error');\r\n    \r\n    let hasError = false;\r\n    if(rawName.length === 0) { nameInput.classList.add('error'); hasError = true; }\r\n    if(rawPhone.length < 4) { phoneInput.classList.add('error'); hasError = true; }\r\n    if(rawEmail.length === 0 || !rawEmail.includes('@')) { emailInput.classList.add('error'); hasError = true; }\r\n    if(hasError) return;\r\n\r\n    \/\/ Logic: First 4 chars of name + Last 4 digits of phone\r\n    let namePrefix = rawName.substring(0, 4).toUpperCase();\r\n    if(namePrefix.length < 4) namePrefix = namePrefix.padEnd(4, 'X');\r\n    let phoneSuffix = rawPhone.slice(-4);\r\n    \r\n    let generatedCode = namePrefix + phoneSuffix;\r\n    let refLink = buildReferralLink(generatedCode);\r\n\r\n    \/\/ Populate Template (includes the shareable referral link)\r\n    let template = `Hey! Check out the Do Nothing LMS for your coaching institute. It automates live classes, attendance, and fee collection in one branded app.\\n\\nBook a demo here: ${refLink}\\n\\nImportant: Copy and paste this code while submitting the form to claim the referral offer:\\nCode: ${generatedCode}`;\r\n\r\n    codeDisplay.textContent = generatedCode;\r\n    msgArea.value = template;\r\n    shareWa.href = 'https:\/\/wa.me\/?text=' + encodeURIComponent(template);\r\n\r\n    \/\/ Show Result\r\n    resultBox.classList.add('show');\r\n    generateBtn.innerHTML = 'Regenerate Code';\r\n\r\n    \/\/ ---- SEND TO GOOGLE SHEETS (fire-and-forget, never blocks the UI) ----\r\n    if (typeof window.vedaSubmit === 'function') {\r\n      window.vedaSubmit({\r\n        formName: \"Referral Code Generated\",\r\n        name: nameInput.value.trim(),\r\n        phone: rawPhone,\r\n        email: rawEmail,\r\n        generatedCode: generatedCode\r\n      }).catch(e => console.log('Silently ignored network error', e));\r\n    }\r\n\r\n    \/\/ Trigger Confetti Burst\r\n    if (typeof confetti === 'function') {\r\n      const rect = generateBtn.getBoundingClientRect();\r\n      const xRatio = (rect.left + (rect.width \/ 2)) \/ window.innerWidth;\r\n      const yRatio = (rect.top + (rect.height \/ 2)) \/ window.innerHeight;\r\n      \r\n      confetti({\r\n        particleCount: 80,\r\n        spread: 70,\r\n        origin: { x: xRatio, y: yRatio },\r\n        colors: ['#ffcf21', '#171717', '#1f9d55', '#e5e5e5'],\r\n        disableForReducedMotion: true,\r\n        zIndex: 9999\r\n      });\r\n    }\r\n  }\r\n\r\n  generateBtn.addEventListener('click', generateCode);\r\n  phoneInput.addEventListener('keydown', (e) => { if(e.key === 'Enter') generateCode(); });\r\n  emailInput.addEventListener('keydown', (e) => { if(e.key === 'Enter') generateCode(); });\r\n\r\n  \/\/ --- COPY LOGIC ---\r\n  function copyToClipboard(text, btnElement, defaultText) {\r\n    if (navigator.clipboard && navigator.clipboard.writeText) {\r\n      navigator.clipboard.writeText(text).then(() => showCopied(btnElement, defaultText));\r\n    } else {\r\n      \/\/ Fallback\r\n      let t = document.createElement('textarea');\r\n      t.value = text; document.body.appendChild(t); t.select();\r\n      try { document.execCommand('copy'); showCopied(btnElement, defaultText); } catch(e) {}\r\n      document.body.removeChild(t);\r\n    }\r\n  }\r\n\r\n  function showCopied(btn, defaultText) {\r\n    btn.classList.add('copied');\r\n    btn.innerHTML = `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> Copied!`;\r\n    setTimeout(() => {\r\n      btn.classList.remove('copied');\r\n      btn.innerHTML = defaultText;\r\n    }, 2000);\r\n  }\r\n\r\n  const copyCodeBtn = document.getElementById('rfCopyCodeBtn');\r\n  const copyMsgBtn = document.getElementById('rfCopyMsgBtn');\r\n\r\n  copyCodeBtn.addEventListener('click', () => {\r\n    copyToClipboard(codeDisplay.textContent, copyCodeBtn, `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/><\/svg> Copy`);\r\n  });\r\n\r\n  copyMsgBtn.addEventListener('click', () => {\r\n    copyToClipboard(msgArea.value, copyMsgBtn, `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/><\/svg> Copy Text`);\r\n  });\r\n\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Refer &#038; Earn Refer a coaching institute.Earn up to \u20b95,000. Generate your unique code, share it with institute owners, and earn milestone rewards straight to your bank account when they join the platform. \u20b9 0 Per referral \u20b9 0 L+ Paid out 0 + Active referrers 0 Days to get paid 01 Create your code [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-342","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/donothing.co.in\/app\/wp-json\/wp\/v2\/pages\/342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/donothing.co.in\/app\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/donothing.co.in\/app\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/donothing.co.in\/app\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/donothing.co.in\/app\/wp-json\/wp\/v2\/comments?post=342"}],"version-history":[{"count":29,"href":"https:\/\/donothing.co.in\/app\/wp-json\/wp\/v2\/pages\/342\/revisions"}],"predecessor-version":[{"id":557,"href":"https:\/\/donothing.co.in\/app\/wp-json\/wp\/v2\/pages\/342\/revisions\/557"}],"wp:attachment":[{"href":"https:\/\/donothing.co.in\/app\/wp-json\/wp\/v2\/media?parent=342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}