{"id":10,"date":"2026-08-11T17:16:02","date_gmt":"2026-08-11T17:16:02","guid":{"rendered":"http:\/\/16.61.213.111\/?page_id=10"},"modified":"2026-08-12T01:42:46","modified_gmt":"2026-08-12T01:42:46","slug":"stopreform","status":"publish","type":"page","link":"https:\/\/stopreform.org.uk\/","title":{"rendered":"StopReform"},"content":{"rendered":"\n<!--\nSTOP REFORM LIVE QUESTIONNAIRE\nWordPress Custom HTML block\nRequires: Stop Reform Core plugin v0.1.1+\n\nThis form:\n- shows ONE questionnaire screen at a time\n- changes ?step= in the browser URL\n- uses browser Back\/Forward correctly\n- creates a Stop Reform Core session\n- sends questionnaire responses, actions, consent and suggestions to the plugin database\n- contains NO Stripe\/card entry fields\n- contains NO and operators\n-->\n\n<div id=\"sr-live-app\">\n<style>\n#sr-live-app{\n  --teal:#00a8c8;\n  --teal-dark:#007f99;\n  --navy:#10212b;\n  --ink:#101820;\n  --muted:#61717a;\n  --bg:#edf7f9;\n  --white:#ffffff;\n  --line:#d3e3e8;\n  --green:#17804f;\n  --amber:#d78a00;\n  --red:#b42318;\n  --grey:#e8ecef;\n  --shadow:0 22px 70px rgba(16,33,43,.13);\n  --radius:24px;\n\n  width:100vw;\n  max-width:none;\n  margin:0!important;\n  margin-left:calc(50% - 50vw)!important;\n  padding:0;\n  background:var(--bg);\n  color:var(--ink);\n  font-family:Arial,Helvetica,sans-serif;\n  overflow-x:hidden;\n}\n#sr-live-app,\n#sr-live-app *{box-sizing:border-box}\n\n#sr-live-app button,\n#sr-live-app input,\n#sr-live-app textarea,\n#sr-live-app select{\n  font:inherit;\n}\n#sr-live-app button{cursor:pointer}\n#sr-live-app button:disabled{cursor:not-allowed}\n#sr-live-app .sr-hidden{display:none!important}\n\n#sr-live-app .sr-save-banner{\n  position:fixed;\n  left:50%;\n  bottom:18px;\n  transform:translateX(-50%);\n  z-index:9999;\n  width:min(620px,calc(100% - 28px));\n  padding:12px 16px;\n  border-radius:12px;\n  background:var(--navy);\n  color:#fff;\n  box-shadow:var(--shadow);\n  text-align:center;\n  font-size:14px;\n  font-weight:700;\n}\n#sr-live-app .sr-save-banner.sr-error{background:var(--red)}\n\n#sr-live-app .sr-step{\n  display:none;\n  min-height:100svh;\n  width:100%;\n  padding:32px 20px 52px;\n  align-items:center;\n  justify-content:center;\n  background:\n    radial-gradient(circle at 12% 10%,rgba(0,168,200,.10),transparent 28rem),\n    linear-gradient(180deg,#f9fcfd 0%,var(--bg) 100%);\n}\n#sr-live-app .sr-step.is-active{display:flex}\n#sr-live-app .sr-step.sr-start{\n  background:\n    radial-gradient(circle at 18% 12%,rgba(255,255,255,.30),transparent 28rem),\n    linear-gradient(155deg,var(--teal) 0%,#00b6d8 54%,#effbfd 54%,#f8fcfd 100%);\n}\n\n#sr-live-app .sr-shell{\n  width:min(900px,100%);\n  margin:0 auto;\n}\n#sr-live-app .sr-card{\n  width:100%;\n  padding:34px;\n  border:1px solid var(--line);\n  border-radius:var(--radius);\n  background:#fff;\n  box-shadow:var(--shadow);\n}\n#sr-live-app .sr-card.sr-narrow{\n  width:min(760px,100%);\n  margin:0 auto;\n}\n#sr-live-app .sr-card h1,\n#sr-live-app .sr-card h2{\n  margin:0;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n  letter-spacing:-1.5px;\n  line-height:1.04;\n}\n#sr-live-app .sr-card h1{font-size:clamp(34px,6vw,58px)}\n#sr-live-app .sr-card h2{font-size:clamp(30px,5vw,46px)}\n#sr-live-app .sr-card h3{\n  margin:26px 0 10px;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n}\n#sr-live-app .sr-card p{\n  color:#34444e!important;\n  -webkit-text-fill-color:#34444e!important;\n  line-height:1.58;\n}\n#sr-live-app .sr-lead{\n  margin:14px 0 0!important;\n  font-size:18px;\n  color:var(--muted)!important;\n  -webkit-text-fill-color:var(--muted)!important;\n}\n#sr-live-app .sr-small{\n  font-size:13px;\n  line-height:1.5;\n  color:var(--muted)!important;\n  -webkit-text-fill-color:var(--muted)!important;\n}\n#sr-live-app .sr-kicker{\n  display:inline-block;\n  margin-bottom:12px;\n  color:var(--teal-dark)!important;\n  -webkit-text-fill-color:var(--teal-dark)!important;\n  text-transform:uppercase;\n  font-size:13px;\n  font-weight:900;\n  letter-spacing:.12em;\n}\n\n#sr-live-app .sr-brand{\n  display:flex;\n  justify-content:center;\n  align-items:center;\n  gap:18px;\n  margin:0 auto 34px;\n}\n#sr-live-app .sr-brand-arrow{\n  position:relative;\n  width:92px;\n  height:110px;\n  flex:0 0 auto;\n  filter:drop-shadow(0 10px 16px rgba(0,0,0,.13));\n}\n#sr-live-app .sr-brand-arrow .shaft{\n  position:absolute;\n  top:0;\n  left:19px;\n  width:54px;\n  height:64px;\n  background:#fff;\n}\n#sr-live-app .sr-brand-arrow .point{\n  position:absolute;\n  left:0;\n  top:59px;\n  width:0;\n  height:0;\n  border-left:46px solid transparent;\n  border-right:46px solid transparent;\n  border-top:51px solid #fff;\n}\n#sr-live-app .sr-brand-text{\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n  font-weight:900;\n  text-transform:uppercase;\n  font-size:clamp(42px,8vw,76px);\n  line-height:.84;\n  letter-spacing:-3px;\n}\n#sr-live-app .sr-brand-text span{display:block}\n\n#sr-live-app .sr-instruction{\n  margin:24px 0 16px;\n  padding:14px 16px;\n  border-radius:14px;\n  background:#e9f8fb;\n  color:var(--navy)!important;\n  -webkit-text-fill-color:var(--navy)!important;\n  font-weight:900;\n  text-align:center;\n}\n#sr-live-app .sr-slider-number{\n  width:94px;\n  height:94px;\n  margin:0 auto 20px;\n  display:grid;\n  place-items:center;\n  border-radius:50%;\n  background:var(--teal);\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n  font-weight:900;\n  font-size:42px;\n}\n#sr-live-app .sr-slider-number.is-empty{\n  font-size:18px;\n}\n#sr-live-app input[type=\"range\"]{\n  width:100%;\n  height:34px;\n  accent-color:var(--teal);\n  cursor:pointer;\n}\n#sr-live-app .sr-slider-scale{\n  display:grid;\n  grid-template-columns:1fr 1fr 1fr;\n  gap:10px;\n  margin-top:10px;\n  font-size:13px;\n  font-weight:800;\n  color:var(--muted)!important;\n  -webkit-text-fill-color:var(--muted)!important;\n}\n#sr-live-app .sr-slider-scale span:nth-child(2){text-align:center}\n#sr-live-app .sr-slider-scale span:nth-child(3){text-align:right}\n#sr-live-app .sr-slider-message{\n  min-height:82px;\n  margin:24px 0 0;\n  padding:17px 18px;\n  border-left:5px solid var(--teal);\n  border-radius:12px;\n  background:#f0fafc;\n  color:var(--navy)!important;\n  -webkit-text-fill-color:var(--navy)!important;\n  font-size:17px;\n  font-weight:800;\n  line-height:1.5;\n}\n\n#sr-live-app .sr-btn-row{\n  display:flex;\n  flex-wrap:wrap;\n  gap:12px;\n  margin-top:24px;\n}\n#sr-live-app .sr-btn{\n  min-height:50px;\n  padding:14px 22px;\n  border:0;\n  border-radius:12px;\n  font-weight:900;\n  text-decoration:none!important;\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n}\n#sr-live-app .sr-btn-primary{\n  background:var(--teal)!important;\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n}\n#sr-live-app .sr-btn-primary:hover{background:var(--teal-dark)!important}\n#sr-live-app .sr-btn-primary:disabled{\n  background:#9fcbd4!important;\n  opacity:.7;\n}\n#sr-live-app .sr-btn-dark{\n  background:var(--navy)!important;\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n}\n#sr-live-app .sr-btn-light{\n  background:#edf3f5!important;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n}\n#sr-live-app .sr-btn-text{\n  background:transparent!important;\n  color:var(--muted)!important;\n  -webkit-text-fill-color:var(--muted)!important;\n  padding-left:0;\n  padding-right:0;\n}\n\n#sr-live-app .sr-choice-grid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:14px;\n  margin-top:26px;\n}\n#sr-live-app .sr-choice-card{\n  min-height:145px;\n  padding:22px;\n  border:2px solid var(--line)!important;\n  border-radius:18px;\n  background:#fff!important;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n  text-align:left;\n  transition:.15s ease;\n}\n#sr-live-app .sr-choice-card:hover,\n#sr-live-app .sr-choice-card:focus{\n  border-color:var(--teal)!important;\n  transform:translateY(-2px);\n  outline:none;\n}\n#sr-live-app .sr-choice-card b{\n  display:block;\n  margin-bottom:7px;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n  font-size:21px;\n}\n#sr-live-app .sr-choice-card span{\n  display:block;\n  color:var(--muted)!important;\n  -webkit-text-fill-color:var(--muted)!important;\n  font-size:14px;\n  line-height:1.45;\n}\n\n#sr-live-app .sr-toggle-grid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:12px;\n  margin-top:14px;\n}\n#sr-live-app .sr-toggle{\n  min-height:62px;\n  padding:15px 17px;\n  border:2px solid var(--line)!important;\n  border-radius:14px;\n  background:#fff!important;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n  text-align:left;\n  font-weight:800;\n  transition:.14s ease;\n}\n#sr-live-app .sr-toggle:hover,\n#sr-live-app .sr-toggle:focus{\n  border-color:var(--teal)!important;\n  outline:none;\n}\n#sr-live-app .sr-toggle[aria-pressed=\"true\"]{\n  border-color:var(--teal)!important;\n  background:#eaf9fc!important;\n  box-shadow:inset 0 0 0 1px var(--teal);\n}\n#sr-live-app .sr-toggle[aria-pressed=\"true\"]::before{\n  content:\"\u2713 \";\n  color:var(--teal-dark);\n  font-weight:900;\n}\n#sr-live-app .sr-current-answer{\n  margin:18px 0;\n  padding:15px 17px;\n  border-radius:13px;\n  background:#eefafd;\n  border-left:4px solid var(--teal);\n  color:var(--navy)!important;\n  -webkit-text-fill-color:var(--navy)!important;\n}\n#sr-live-app .sr-current-answer strong{\n  color:var(--navy)!important;\n  -webkit-text-fill-color:var(--navy)!important;\n}\n#sr-live-app .sr-recall-choice-row{\n  display:flex;\n  flex-wrap:wrap;\n  gap:12px;\n  margin-top:12px;\n}\n#sr-live-app .sr-recall-choice-row .sr-btn{\n  background:#edf3f5!important;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n  border:2px solid transparent!important;\n}\n#sr-live-app .sr-recall-choice-row .sr-btn.is-selected{\n  background:var(--teal)!important;\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n  border-color:var(--teal)!important;\n  box-shadow:0 0 0 3px rgba(0,168,200,.18);\n}\n@media(max-width:720px){\n  #sr-live-app .sr-toggle-grid{\n    grid-template-columns:1fr;\n  }\n}\n\n#sr-live-app .sr-action-intro{\n  margin:18px 0 0;\n  padding:18px;\n  border-radius:16px;\n  background:#eaf9fc;\n  border-left:5px solid var(--teal);\n  color:var(--navy)!important;\n  -webkit-text-fill-color:var(--navy)!important;\n  font-size:18px;\n  font-weight:800;\n  line-height:1.5;\n}\n#sr-live-app .sr-actions-taken{\n  margin-top:18px;\n  color:var(--muted)!important;\n  -webkit-text-fill-color:var(--muted)!important;\n  font-size:14px;\n  font-weight:800;\n}\n#sr-live-app .sr-action-grid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:14px;\n  margin-top:22px;\n}\n#sr-live-app .sr-action{\n  position:relative;\n  min-height:170px;\n  padding:22px;\n  border:2px solid var(--line)!important;\n  border-radius:18px;\n  background:#fff!important;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n  text-align:left;\n  transition:.15s ease;\n}\n#sr-live-app .sr-action:hover,\n#sr-live-app .sr-action:focus{\n  border-color:var(--teal)!important;\n  transform:translateY(-2px);\n  outline:none;\n}\n#sr-live-app .sr-action b{\n  display:block;\n  margin-bottom:7px;\n  padding-right:75px;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n  font-size:21px;\n}\n#sr-live-app .sr-action .sr-action-copy{\n  display:block;\n  color:var(--muted)!important;\n  -webkit-text-fill-color:var(--muted)!important;\n  font-size:14px;\n  line-height:1.45;\n}\n#sr-live-app .sr-action .sr-badge{\n  position:absolute;\n  right:12px;\n  top:12px;\n  display:none;\n  padding:6px 9px;\n  border-radius:999px;\n  background:var(--green);\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n  font-size:11px;\n  font-weight:900;\n}\n#sr-live-app .sr-action.is-done{\n  border-color:#76cba3!important;\n  background:#f0fbf5!important;\n}\n#sr-live-app .sr-action.is-done .sr-badge{display:block}\n#sr-live-app .sr-action.is-urgent{\n  border-color:#e2ad44!important;\n  background:#fff9ec!important;\n}\n#sr-live-app .sr-action.is-disabled{\n  background:#f2f4f5!important;\n  border-color:#d6dadd!important;\n  opacity:.72;\n}\n#sr-live-app .sr-action.is-disabled:hover{\n  transform:none;\n  border-color:#d6dadd!important;\n}\n#sr-live-app .sr-coming-soon{\n  display:inline-block;\n  margin-bottom:9px;\n  padding:5px 9px;\n  border-radius:999px;\n  background:#7a858b;\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n  font-size:11px;\n  font-weight:900;\n  text-transform:uppercase;\n  letter-spacing:.06em;\n}\n#sr-live-app .sr-urgent{\n  display:inline-block;\n  margin-bottom:9px;\n  padding:5px 9px;\n  border-radius:999px;\n  background:var(--red);\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n  font-size:11px;\n  font-weight:900;\n  text-transform:uppercase;\n  letter-spacing:.06em;\n}\n\n#sr-live-app .sr-field{\n  margin-top:18px;\n}\n#sr-live-app .sr-field label{\n  display:block;\n  margin-bottom:7px;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n  font-weight:900;\n}\n#sr-live-app .sr-field input,\n#sr-live-app .sr-field textarea,\n#sr-live-app .sr-field select{\n  width:100%;\n  min-height:50px;\n  padding:13px 14px;\n  border:1px solid #b9cbd2;\n  border-radius:11px;\n  background:#fff!important;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n}\n#sr-live-app .sr-field textarea{\n  min-height:130px;\n  resize:vertical;\n}\n#sr-live-app .sr-field input:focus,\n#sr-live-app .sr-field textarea:focus,\n#sr-live-app .sr-field select:focus{\n  border-color:var(--teal);\n  outline:3px solid rgba(0,168,200,.14);\n}\n#sr-live-app .sr-form-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:0 16px;\n}\n#sr-live-app .sr-field-error{\n  display:none;\n  margin-top:6px;\n  color:var(--red)!important;\n  -webkit-text-fill-color:var(--red)!important;\n  font-size:13px;\n  font-weight:800;\n}\n#sr-live-app .sr-field-error.is-visible{display:block}\n#sr-live-app .sr-field.has-error input,\n#sr-live-app .sr-field.has-error textarea,\n#sr-live-app .sr-field.has-error select{\n  border-color:var(--red);\n}\n\n#sr-live-app .sr-check{\n  display:flex;\n  align-items:flex-start;\n  gap:10px;\n  padding:12px;\n  margin-top:10px;\n  border:1px solid var(--line);\n  border-radius:11px;\n  background:#fff;\n}\n#sr-live-app .sr-check input{\n  flex:0 0 auto;\n  margin-top:4px;\n}\n#sr-live-app .sr-check label{\n  margin:0;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n  line-height:1.45;\n}\n#sr-live-app .sr-check-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:10px 12px;\n  margin-top:14px;\n}\n\n#sr-live-app .sr-note{\n  margin-top:18px;\n  padding:15px 17px;\n  border-left:4px solid var(--teal);\n  border-radius:10px;\n  background:#eefafd;\n  color:#2e4751!important;\n  -webkit-text-fill-color:#2e4751!important;\n  line-height:1.5;\n}\n#sr-live-app .sr-note.sr-warning{\n  border-left-color:var(--amber);\n  background:#fff8e8;\n}\n#sr-live-app .sr-note.sr-success{\n  border-left-color:var(--green);\n  background:#eefaf4;\n}\n\n#sr-live-app .sr-next-grid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:12px;\n  margin-top:18px;\n}\n#sr-live-app .sr-next-card{\n  min-height:120px;\n  padding:18px;\n  border:2px solid var(--line)!important;\n  border-radius:15px;\n  background:#fff!important;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n  text-align:left;\n}\n#sr-live-app .sr-next-card:hover{\n  border-color:var(--teal)!important;\n}\n#sr-live-app .sr-next-card b{\n  display:block;\n  margin-bottom:5px;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n}\n#sr-live-app .sr-next-card span{\n  color:var(--muted)!important;\n  -webkit-text-fill-color:var(--muted)!important;\n  font-size:13px;\n  line-height:1.4;\n}\n\n#sr-live-app .sr-political-consent{\n  padding:18px;\n  margin-top:20px;\n  border:1px solid #efd6a3;\n  border-radius:14px;\n  background:#fff9ed;\n}\n#sr-live-app .sr-reason-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:10px 12px;\n  margin-top:12px;\n}\n\n#sr-live-app .sr-start .sr-btn-row{\n  justify-content:center;\n}\n#sr-live-app .sr-start .sr-btn-row .sr-btn{\n  min-width:190px;\n}\n\n#sr-live-app .sr-completed-summary{\n  margin:20px 0 4px;\n  padding:18px;\n  border:1px solid #bfe4d1;\n  border-radius:16px;\n  background:#f1fbf6;\n}\n#sr-live-app .sr-completed-summary h3{\n  margin:0 0 12px;\n  color:var(--green)!important;\n  -webkit-text-fill-color:var(--green)!important;\n}\n#sr-live-app .sr-completed-list{\n  display:grid;\n  gap:9px;\n}\n#sr-live-app .sr-completed-item{\n  display:flex;\n  align-items:flex-start;\n  gap:9px;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n  line-height:1.45;\n}\n#sr-live-app .sr-completed-tick{\n  width:23px;\n  height:23px;\n  flex:0 0 23px;\n  display:grid;\n  place-items:center;\n  border-radius:50%;\n  background:var(--green);\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n  font-size:13px;\n  font-weight:900;\n}\n#sr-live-app .sr-completed-item strong{\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n}\n#sr-live-app .sr-edit-note{\n  margin-top:10px;\n  color:var(--muted)!important;\n  -webkit-text-fill-color:var(--muted)!important;\n  font-size:13px;\n}\n\n#sr-live-app .sr-next-card.is-done{\n  border-color:#76cba3!important;\n  background:#f0fbf5!important;\n}\n#sr-live-app .sr-next-status{\n  display:inline-block;\n  margin-bottom:8px;\n  padding:5px 8px;\n  border-radius:999px;\n  background:var(--green);\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n  font-size:11px;\n  font-weight:900;\n}\n#sr-live-app .sr-next-card.is-disabled{\n  background:#f2f4f5!important;\n  border-color:#d6dadd!important;\n  opacity:.72;\n  cursor:not-allowed;\n}\n#sr-live-app .sr-next-card.is-disabled:hover{\n  border-color:#d6dadd!important;\n}\n\n#sr-live-app .sr-final-graphic{\n  width:150px;\n  height:150px;\n  margin:0 auto 26px;\n  position:relative;\n  border-radius:50%;\n  background:var(--teal);\n  box-shadow:0 18px 42px rgba(0,168,200,.24);\n}\n#sr-live-app .sr-final-arrow-shaft{\n  position:absolute;\n  width:34px;\n  height:58px;\n  left:58px;\n  top:27px;\n  background:#fff;\n  border-radius:4px 4px 0 0;\n}\n#sr-live-app .sr-final-arrow-point{\n  position:absolute;\n  left:35px;\n  top:75px;\n  width:0;\n  height:0;\n  border-left:40px solid transparent;\n  border-right:40px solid transparent;\n  border-top:42px solid #fff;\n}\n#sr-live-app .sr-final-check{\n  position:absolute;\n  right:-4px;\n  bottom:5px;\n  width:50px;\n  height:50px;\n  display:grid;\n  place-items:center;\n  border:5px solid #fff;\n  border-radius:50%;\n  background:var(--green);\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n  font-size:27px;\n  font-weight:900;\n}\n#sr-live-app .sr-final-message{\n  max-width:650px;\n  margin:18px auto 0;\n  padding:18px;\n  border-radius:15px;\n  background:#eefafd;\n  color:var(--navy)!important;\n  -webkit-text-fill-color:var(--navy)!important;\n  line-height:1.55;\n}\n#sr-live-app .sr-share{\n  text-align:center;\n}\n#sr-live-app .sr-share h2{font-size:clamp(34px,6vw,52px)}\n#sr-live-app .sr-share .sr-btn-row{justify-content:center}\n\n@media(max-width:720px){\n  #sr-live-app .sr-step{padding:20px 14px 36px;align-items:flex-start}\n  #sr-live-app .sr-step.sr-start{align-items:center}\n  #sr-live-app .sr-card{padding:24px 18px;border-radius:18px}\n  #sr-live-app .sr-brand{flex-direction:column;gap:4px;margin-bottom:22px}\n  #sr-live-app .sr-brand-arrow{transform:scale(.72);margin-top:-12px;margin-bottom:-20px}\n  #sr-live-app .sr-brand-text{font-size:54px;text-align:center;letter-spacing:-2px}\n  #sr-live-app .sr-choice-grid,\n  #sr-live-app .sr-action-grid,\n  #sr-live-app .sr-next-grid,\n  #sr-live-app .sr-form-grid,\n  #sr-live-app .sr-check-grid,\n  #sr-live-app .sr-reason-grid{\n    grid-template-columns:1fr;\n  }\n  #sr-live-app .sr-btn-row{flex-direction:column}\n  #sr-live-app .sr-btn{width:100%}\n  #sr-live-app .sr-slider-scale{font-size:11px}\n}\n\n\/* WORDPRESS \/ GUTENBERG EDITOR PREVIEW ONLY *\/\n.editor-styles-wrapper #sr-live-app .sr-step{\n  min-height:auto!important;\n  align-items:flex-start!important;\n}\n.editor-styles-wrapper #sr-live-app .sr-step.sr-start{\n  min-height:auto!important;\n  padding-top:20px!important;\n}\n.editor-styles-wrapper #sr-live-app .sr-shell{\n  margin-top:0!important;\n}\n\n\/* Make completed\/editable labels readable even when Kadence overrides spans *\/\n#sr-live-app .sr-next-card .sr-next-status,\n#sr-live-app .sr-next-card.is-done .sr-next-status,\n#sr-live-app .sr-action .sr-badge,\n#sr-live-app .sr-action.is-done .sr-badge{\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n  background:var(--green)!important;\n}\n#sr-live-app .sr-next-card.is-done b,\n#sr-live-app .sr-next-card.is-done > span:not(.sr-next-status){\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n}\n\n\/* Consistent visible Back control on questionnaire sub-pages *\/\n#sr-live-app .sr-page-back{\n  display:flex;\n  justify-content:flex-end;\n  margin:0 0 16px;\n}\n#sr-live-app .sr-page-back button{\n  min-height:44px;\n  padding:10px 16px;\n  border:1px solid var(--line)!important;\n  border-radius:11px;\n  background:#fff!important;\n  color:var(--navy)!important;\n  -webkit-text-fill-color:var(--navy)!important;\n  font-weight:900;\n}\n#sr-live-app .sr-page-back button:hover{\n  border-color:var(--teal)!important;\n}\n\n\/* Recall explainer \/ target *\/\n#sr-live-app .sr-recall-explainer{\n  margin:20px 0;\n  padding:22px;\n  border:2px solid #e1aa3e;\n  border-radius:18px;\n  background:#fff8e9;\n}\n#sr-live-app .sr-recall-explainer h3{\n  margin:0 0 10px;\n  font-size:clamp(24px,4vw,34px);\n}\n#sr-live-app .sr-recall-threshold{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:14px;\n  margin-top:18px;\n}\n#sr-live-app .sr-recall-stat{\n  padding:18px;\n  border-radius:15px;\n  background:#fff;\n  border:1px solid #efd79c;\n}\n#sr-live-app .sr-recall-stat strong{\n  display:block;\n  margin-bottom:5px;\n  color:var(--teal-dark)!important;\n  -webkit-text-fill-color:var(--teal-dark)!important;\n  font-size:clamp(30px,5vw,44px);\n  line-height:1;\n}\n#sr-live-app .sr-recall-counter{\n  margin:20px 0;\n  padding:20px;\n  border-radius:18px;\n  background:var(--navy);\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n}\n#sr-live-app .sr-recall-counter-top{\n  display:flex;\n  justify-content:space-between;\n  align-items:flex-end;\n  gap:14px;\n  flex-wrap:wrap;\n}\n#sr-live-app .sr-recall-counter strong{\n  display:block;\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n  font-size:clamp(28px,5vw,42px);\n}\n#sr-live-app .sr-recall-counter span{\n  color:#dce9ee!important;\n  -webkit-text-fill-color:#dce9ee!important;\n}\n#sr-live-app .sr-recall-counter-bar{\n  height:12px;\n  margin-top:15px;\n  border-radius:999px;\n  background:#29424d;\n  overflow:hidden;\n}\n#sr-live-app .sr-recall-counter-bar > span{\n  display:block;\n  width:0;\n  height:100%;\n  background:var(--teal);\n}\n#sr-live-app .sr-recall-counter-note{\n  margin-top:10px;\n  color:#c7d9df!important;\n  -webkit-text-fill-color:#c7d9df!important;\n  font-size:12px;\n  line-height:1.45;\n}\n@media(max-width:720px){\n  #sr-live-app .sr-recall-threshold{\n    grid-template-columns:1fr;\n  }\n}\n\n\n\/* RECALL V2 *\/\n#sr-live-app .sr-recall-callout{\n  margin:18px 0;\n  padding:22px;\n  border-radius:18px;\n  background:linear-gradient(135deg,#eaf9fc 0%,#f7fcfd 100%);\n  border:2px solid #91d9e7;\n}\n#sr-live-app .sr-recall-callout h3{\n  margin:0 0 10px;\n  font-size:clamp(27px,4.5vw,38px);\n}\n#sr-live-app .sr-recall-callout p{\n  margin:8px 0 0;\n}\n#sr-live-app .sr-recall-targets{\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:12px;\n  margin:18px 0;\n}\n#sr-live-app .sr-recall-target-card{\n  padding:18px;\n  border:1px solid var(--line);\n  border-radius:15px;\n  background:#fff;\n}\n#sr-live-app .sr-recall-target-card strong{\n  display:block;\n  margin-bottom:6px;\n  color:var(--teal-dark)!important;\n  -webkit-text-fill-color:var(--teal-dark)!important;\n  font-size:clamp(28px,4.8vw,42px);\n  line-height:1;\n}\n#sr-live-app .sr-recall-target-card span{\n  display:block;\n  color:var(--muted)!important;\n  -webkit-text-fill-color:var(--muted)!important;\n  line-height:1.4;\n}\n#sr-live-app .sr-recall-progress-copy{\n  margin-top:10px;\n  font-weight:800;\n}\n#sr-live-app .sr-recall-timeline{\n  position:relative;\n  margin:24px 0 4px;\n  padding-left:30px;\n}\n#sr-live-app .sr-recall-timeline::before{\n  content:\"\";\n  position:absolute;\n  left:10px;\n  top:8px;\n  bottom:8px;\n  width:3px;\n  border-radius:999px;\n  background:#b9dce4;\n}\n#sr-live-app .sr-recall-step{\n  position:relative;\n  margin:0 0 18px;\n  padding:17px 18px;\n  border:1px solid var(--line);\n  border-radius:14px;\n  background:#fff;\n}\n#sr-live-app .sr-recall-step::before{\n  content:\"\";\n  position:absolute;\n  left:-27px;\n  top:20px;\n  width:15px;\n  height:15px;\n  border:3px solid #fff;\n  border-radius:50%;\n  background:var(--teal);\n  box-shadow:0 0 0 2px #8bd3e1;\n}\n#sr-live-app .sr-recall-step b{\n  display:block;\n  margin-bottom:5px;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n  font-size:17px;\n}\n#sr-live-app .sr-recall-step span{\n  color:var(--muted)!important;\n  -webkit-text-fill-color:var(--muted)!important;\n  line-height:1.5;\n}\n#sr-live-app .sr-recall-fact-note{\n  margin-top:18px;\n  padding:15px;\n  border-left:4px solid var(--amber);\n  border-radius:10px;\n  background:#fff8e8;\n  color:#394851!important;\n  -webkit-text-fill-color:#394851!important;\n}\n@media(max-width:720px){\n  #sr-live-app .sr-recall-targets{\n    grid-template-columns:1fr;\n  }\n}\n\n\n\/* RECALL V3 - ACTION-FIRST FRONT END *\/\n#sr-live-app .sr-recall-voter-first{\n  margin:0 0 22px;\n  padding:22px;\n  border-radius:18px;\n  background:#eefafd;\n  border:2px solid #8dd8e6;\n}\n#sr-live-app .sr-recall-voter-first h2{\n  margin-bottom:8px;\n}\n#sr-live-app .sr-recall-voter-first p{\n  margin:0 0 15px;\n}\n#sr-live-app .sr-recall-hero{\n  margin:20px 0;\n  padding:26px;\n  border-radius:20px;\n  background:linear-gradient(145deg,var(--navy),#17343f);\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n}\n#sr-live-app .sr-recall-hero .sr-kicker-light{\n  display:block;\n  margin-bottom:10px;\n  color:#8fe5f3!important;\n  -webkit-text-fill-color:#8fe5f3!important;\n  text-transform:uppercase;\n  letter-spacing:.12em;\n  font-size:12px;\n  font-weight:900;\n}\n#sr-live-app .sr-recall-hero h3{\n  margin:0 0 12px;\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n  font-size:clamp(30px,5.5vw,48px);\n  line-height:1.02;\n}\n#sr-live-app .sr-recall-hero p{\n  margin:8px 0 0;\n  color:#e2edf1!important;\n  -webkit-text-fill-color:#e2edf1!important;\n  font-size:17px;\n  line-height:1.55;\n}\n#sr-live-app .sr-recall-hero strong{\n  color:#fff!important;\n  -webkit-text-fill-color:#fff!important;\n}\n#sr-live-app .sr-recall-targets-v3{\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:12px;\n  margin:18px 0;\n}\n#sr-live-app .sr-recall-target-v3{\n  padding:20px;\n  border-radius:17px;\n  background:#fff;\n  border:2px solid var(--line);\n}\n#sr-live-app .sr-recall-target-v3.is-legal{\n  border-color:#e1aa3e;\n  background:#fff9ed;\n}\n#sr-live-app .sr-recall-target-v3.is-campaign{\n  border-color:var(--teal);\n  background:#eefafd;\n}\n#sr-live-app .sr-recall-target-v3.is-live{\n  border-color:#6bc699;\n  background:#f0fbf5;\n}\n#sr-live-app .sr-recall-target-v3 .number{\n  display:block;\n  margin-bottom:7px;\n  color:var(--navy)!important;\n  -webkit-text-fill-color:var(--navy)!important;\n  font-size:clamp(32px,5vw,48px);\n  font-weight:900;\n  line-height:1;\n}\n#sr-live-app .sr-recall-target-v3 .label{\n  display:block;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n  font-weight:900;\n  margin-bottom:5px;\n}\n#sr-live-app .sr-recall-target-v3 .copy{\n  color:var(--muted)!important;\n  -webkit-text-fill-color:var(--muted)!important;\n  font-size:13px;\n  line-height:1.45;\n}\n#sr-live-app .sr-recall-progress-panel{\n  margin:18px 0 24px;\n  padding:20px;\n  border-radius:18px;\n  background:#fff;\n  border:1px solid var(--line);\n}\n#sr-live-app .sr-recall-progress-panel h3{\n  margin:0 0 8px;\n}\n#sr-live-app .sr-recall-progress-track{\n  height:16px;\n  margin:14px 0 10px;\n  border-radius:999px;\n  overflow:hidden;\n  background:#dcebef;\n}\n#sr-live-app .sr-recall-progress-track span{\n  display:block;\n  height:100%;\n  width:0;\n  border-radius:999px;\n  background:var(--teal);\n}\n#sr-live-app .sr-recall-progress-panel .sr-progress-copy{\n  color:var(--navy)!important;\n  -webkit-text-fill-color:var(--navy)!important;\n  font-weight:900;\n}\n#sr-live-app .sr-recall-process{\n  margin-top:28px;\n}\n#sr-live-app .sr-recall-process > h3{\n  font-size:clamp(25px,4vw,34px);\n  margin-bottom:8px;\n}\n#sr-live-app .sr-recall-process-intro{\n  margin-bottom:20px;\n  color:var(--muted)!important;\n  -webkit-text-fill-color:var(--muted)!important;\n}\n#sr-live-app .sr-process-line{\n  position:relative;\n  margin-left:14px;\n  padding-left:32px;\n}\n#sr-live-app .sr-process-line::before{\n  content:\"\";\n  position:absolute;\n  left:5px;\n  top:10px;\n  bottom:10px;\n  width:4px;\n  border-radius:999px;\n  background:#b8dfe7;\n}\n#sr-live-app .sr-process-step{\n  position:relative;\n  margin-bottom:16px;\n  padding:18px 18px 18px 20px;\n  border:1px solid var(--line);\n  border-radius:15px;\n  background:#fff;\n}\n#sr-live-app .sr-process-step::before{\n  content:\"\";\n  position:absolute;\n  left:-36px;\n  top:21px;\n  width:18px;\n  height:18px;\n  border:4px solid #fff;\n  border-radius:50%;\n  background:var(--teal);\n  box-shadow:0 0 0 2px #8dd8e6;\n}\n#sr-live-app .sr-process-step .step-label{\n  display:block;\n  margin-bottom:6px;\n  color:var(--teal-dark)!important;\n  -webkit-text-fill-color:var(--teal-dark)!important;\n  font-size:12px;\n  font-weight:900;\n  text-transform:uppercase;\n  letter-spacing:.08em;\n}\n#sr-live-app .sr-process-step b{\n  display:block;\n  margin-bottom:6px;\n  color:var(--ink)!important;\n  -webkit-text-fill-color:var(--ink)!important;\n  font-size:18px;\n}\n#sr-live-app .sr-process-step span{\n  color:var(--muted)!important;\n  -webkit-text-fill-color:var(--muted)!important;\n  line-height:1.5;\n}\n#sr-live-app .sr-process-step.is-result{\n  border-color:#6bc699;\n  background:#f0fbf5;\n}\n#sr-live-app .sr-recall-join-callout{\n  margin-top:24px;\n  padding:20px;\n  border-radius:17px;\n  background:#eaf9fc;\n  border:2px solid var(--teal);\n}\n#sr-live-app .sr-recall-join-callout h3{\n  margin:0 0 7px;\n}\n@media(max-width:720px){\n  #sr-live-app .sr-recall-targets-v3{\n    grid-template-columns:1fr;\n  }\n}\n\n<\/style>\n\n<div class=\"sr-save-banner sr-hidden\" id=\"srSaveBanner\"><\/div>\n\n<!-- STEP: START -->\n<section class=\"sr-step sr-start is-active\" data-step=\"start\">\n  <div class=\"sr-shell\">\n    <div class=\"sr-brand\">\n      <div class=\"sr-brand-arrow\" aria-hidden=\"true\">\n        <div class=\"shaft\"><\/div>\n        <div class=\"point\"><\/div>\n      <\/div>\n      <div class=\"sr-brand-text\"><span>STOP<\/span><span>REFORM<\/span><\/div>\n    <\/div>\n\n    <div class=\"sr-card sr-narrow\">\n      <h1>How strongly do you want to stop Reform?<\/h1>\n      <p class=\"sr-lead\">Choose a number from 1 to 10. We will use your answer to suggest the most useful ways you can help.<\/p>\n\n      <div class=\"sr-instruction\">1. Drag the slider &nbsp; 2. Choose your number &nbsp; 3. Press Continue<\/div>\n\n      <div class=\"sr-slider-number is-empty\" id=\"srSliderNumber\">Choose<\/div>\n\n      <input id=\"srStrength\" type=\"range\" min=\"1\" max=\"10\" value=\"5\" step=\"1\" aria-label=\"Strength from 1 to 10\">\n\n      <div class=\"sr-slider-scale\">\n        <span>1<br>I&#8217;m concerned<\/span>\n        <span>5<br>I want change<\/span>\n        <span>10<br>I really want to help<\/span>\n      <\/div>\n\n      <div class=\"sr-slider-message\" id=\"srSliderMessage\">\n        Move the slider and we will respond to the level you choose.\n      <\/div>\n\n      <div class=\"sr-btn-row\">\n        <button class=\"sr-btn sr-btn-primary\" id=\"srSliderContinue\" type=\"button\" disabled>Continue<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- STEP: DETAILS -->\n<section class=\"sr-step\" data-step=\"details\">\n  <div class=\"sr-shell\">\n    <div class=\"sr-card sr-narrow\">\n      <span class=\"sr-kicker\">Your details<\/span>\n      <h2 id=\"srDetailsTitle\">A few details so we can continue<\/h2>\n      <p class=\"sr-lead\" id=\"srDetailsLead\">We only ask once. Your details will carry through the rest of the questionnaire.<\/p>\n\n      <div class=\"sr-form-grid\">\n        <div class=\"sr-field\" id=\"srFieldFirstName\">\n          <label for=\"srFirstName\">First name<\/label>\n          <input id=\"srFirstName\" type=\"text\" autocomplete=\"given-name\">\n          <div class=\"sr-field-error\" id=\"srErrorFirstName\">Please enter at least 3 characters for your first name.<\/div>\n        <\/div>\n\n        <div class=\"sr-field\" id=\"srFieldPostcode\">\n          <label for=\"srPostcode\">Postcode<\/label>\n          <input id=\"srPostcode\" type=\"text\" autocomplete=\"postal-code\">\n          <div class=\"sr-field-error\" id=\"srErrorPostcode\">Please enter a valid UK postcode, for example CO15 1SE.<\/div>\n        <\/div>\n\n        <div class=\"sr-field\" id=\"srFieldEmail\">\n          <label for=\"srEmail\">Email<\/label>\n          <input id=\"srEmail\" type=\"email\" autocomplete=\"email\">\n          <div class=\"sr-field-error\" id=\"srErrorEmail\">Please enter a full email address, for example name@example.com.<\/div>\n        <\/div>\n\n        <div class=\"sr-field\" id=\"srFieldMobile\">\n          <label for=\"srMobile\">Mobile<\/label>\n          <input id=\"srMobile\" type=\"tel\" autocomplete=\"tel\" inputmode=\"tel\" placeholder=\"07XXXXXXXXX\">\n          <div class=\"sr-field-error\" id=\"srErrorMobile\">Please enter 11 digits starting 07, for example 07123456789.<\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"sr-note\">Please give us your first name and at least one way to contact you. If you enter both email and mobile, both must be valid.<\/div>\n\n      <div id=\"srDetailsConsentArea\"><\/div>\n\n      <div class=\"sr-field-error\" id=\"srDetailsGeneralError\"><\/div>\n\n      <div class=\"sr-btn-row\">\n        <button class=\"sr-btn sr-btn-primary\" id=\"srDetailsContinue\" type=\"button\">Continue<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- STEP: ACTIONS -->\n<section class=\"sr-step\" data-step=\"actions\">\n  <div class=\"sr-shell\">\n    <div class=\"sr-card\">\n      <span class=\"sr-kicker\">Turn your answer into action<\/span>\n      <h2 id=\"srActionsHeading\">You can help us stop Reform.<\/h2>\n\n      <div class=\"sr-action-intro\" id=\"srActionsMessage\"><\/div>\n\n      <div class=\"sr-actions-taken\" id=\"srActionsTaken\">No actions completed yet.<\/div>\n\n      <div class=\"sr-action-grid\" id=\"srActionGrid\">\n        <button class=\"sr-action is-urgent\" type=\"button\" data-action=\"recall\">\n          <span class=\"sr-badge\">Completed &#8211; edit<\/span>\n          <span class=\"sr-urgent\">Urgent<\/span>\n          <b>Recall team<\/b>\n          <span class=\"sr-action-copy\">If you are registered to vote in Clacton, help us be ready if an official recall process opens.<\/span>\n        <\/button>\n\n        <button class=\"sr-action\" type=\"button\" data-action=\"volunteer\">\n          <span class=\"sr-badge\">Completed &#8211; edit<\/span>\n          <b>Get involved<\/b>\n          <span class=\"sr-action-copy\">Help online, locally, from home or with practical and professional skills.<\/span>\n        <\/button>\n\n        <button class=\"sr-action\" type=\"button\" data-action=\"member\">\n          <span class=\"sr-badge\">Completed &#8211; edit<\/span>\n          <b>Become a member<\/b>\n          <span class=\"sr-action-copy\">Support the campaign and be part of what we&#8217;re building.<\/span>\n        <\/button>\n\n        <button class=\"sr-action\" type=\"button\" data-action=\"newsletter\">\n          <span class=\"sr-badge\">Completed &#8211; edit<\/span>\n          <b>Get the newsletter<\/b>\n          <span class=\"sr-action-copy\">Stay informed about the campaign and important developments.<\/span>\n        <\/button>\n\n        <button class=\"sr-action\" type=\"button\" data-action=\"suggestion\">\n          <span class=\"sr-badge\">Completed &#8211; edit<\/span>\n          <b>Make a suggestion<\/b>\n          <span class=\"sr-action-copy\">Have an idea, a skill or another way you could help? Tell us.<\/span>\n        <\/button>\n\n        <button class=\"sr-action is-disabled\" type=\"button\" disabled aria-disabled=\"true\">\n          <span class=\"sr-coming-soon\">Coming soon<\/span>\n          <b>Make a donation<\/b>\n          <span class=\"sr-action-copy\">One-off and monthly donations will be available once secure Stripe payments are switched on.<\/span>\n        <\/button>\n      <\/div>\n\n      <div class=\"sr-btn-row\">\n        <button class=\"sr-btn sr-btn-light sr-hidden\" id=\"srNoMoreActions\" type=\"button\">I&#8217;m done for now<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- STEP: RECALL -->\n<section class=\"sr-step\" data-step=\"recall\">\n  <div class=\"sr-shell\">\n    <div class=\"sr-card sr-narrow\">\n\n      <span class=\"sr-kicker\">Recall readiness team<\/span>\n\n      <div class=\"sr-recall-voter-first\">\n        <h2>Are you registered to vote in the Clacton constituency?<\/h2>\n        <p>If yes, you are exactly the kind of person we need in the Recall Team if a lawful petition ever opens.<\/p>\n\n        <div class=\"sr-recall-choice-row\">\n          <button class=\"sr-btn sr-btn-light\" type=\"button\" data-recall-voter=\"yes\">Yes, I vote in Clacton<\/button>\n          <button class=\"sr-btn sr-btn-light\" type=\"button\" data-recall-voter=\"no\">No<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"sr-hidden\" id=\"srRecallLocal\">\n        <div class=\"sr-recall-join-callout\">\n          <h3>Will you join the Recall Team?<\/h3>\n          <p>Joining means we record your interest and can keep you informed if a lawful recall process ever opens.<\/p>\n\n          <div class=\"sr-btn-row\">\n            <button class=\"sr-btn sr-btn-primary\" id=\"srRecallJoin\" type=\"button\">Yes, join the Recall Team<\/button>\n            <button class=\"sr-btn sr-btn-light\" id=\"srRecallDecline\" type=\"button\">Not right now<\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"sr-hidden\" id=\"srRecallNotLocal\">\n        <div class=\"sr-note\">You cannot sign a Clacton recall petition unless you are an eligible registered elector in the constituency, but you can still help the wider campaign.<\/div>\n        <div class=\"sr-btn-row\">\n          <button class=\"sr-btn sr-btn-primary\" id=\"srRecallNotLocalDone\" type=\"button\">Show me the other ways to help<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"sr-current-answer sr-hidden\" id=\"srRecallCurrent\">\n        <strong>Your current Recall Team details<\/strong><br>\n        <span id=\"srRecallCurrentText\"><\/span><br>\n        <span class=\"sr-small\">You can change either answer below. We will record the updated choice.<\/span>\n      <\/div>\n\n      <div class=\"sr-recall-hero\">\n        <span class=\"sr-kicker-light\">Why this matters<\/span>\n        <h3>A recall petition could give Clacton another vote.<\/h3>\n        <p>If a sitting Clacton MP becomes subject to the legal recall process and enough eligible local voters sign the official petition, <strong>the seat becomes vacant and a by-election follows.<\/strong><\/p>\n        <p>That means Clacton gets another opportunity to choose who represents the constituency.<\/p>\n      <\/div>\n\n      <div class=\"sr-recall-targets-v3\">\n        <div class=\"sr-recall-target-v3 is-legal\">\n          <span class=\"number\">10%<\/span>\n          <span class=\"label\">Legal minimum<\/span>\n          <span class=\"copy\">At least 10% of eligible registered electors must sign an official petition for it to succeed.<\/span>\n        <\/div>\n\n        <div class=\"sr-recall-target-v3 is-campaign\">\n          <span class=\"number\">15%<\/span>\n          <span class=\"label\">Our readiness target<\/span>\n          <span class=\"copy\">We want a bigger team than the legal minimum so we are not relying on the bare threshold.<\/span>\n        <\/div>\n\n        <div class=\"sr-recall-target-v3 is-live\">\n          <span class=\"number\" id=\"srRecallTeamCount\">Loading&#8230;<\/span>\n          <span class=\"label\">We have<\/span>\n          <span class=\"copy\">people currently recorded as members of the Stop Reform Recall Team.<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"sr-recall-progress-panel\">\n        <h3>Our target: 11,737 Recall Team members<\/h3>\n        <p class=\"sr-small\">That is approximately 15% of the 2024 Clacton electorate of 78,245. The official electorate would be recalculated if a real petition opened.<\/p>\n\n        <div class=\"sr-recall-progress-track\">\n          <span id=\"srRecallCounterBar\"><\/span>\n        <\/div>\n\n        <div class=\"sr-progress-copy\" id=\"srRecallProgressCopy\">Loading our current Recall Team total&#8230;<\/div>\n      <\/div>\n\n      <div class=\"sr-recall-process\">\n        <h3>What has to happen before a recall?<\/h3>\n        <p class=\"sr-recall-process-intro\">Nobody can simply launch a recall petition. There is a legal process first.<\/p>\n\n        <div class=\"sr-process-line\">\n          <div class=\"sr-process-step\">\n            <span class=\"step-label\">Step 1<\/span>\n            <b>An investigation, standards process or court case comes first<\/b>\n            <span>A concern about an MP has to go through the relevant official process. Depending on the circumstances, that may involve the Parliamentary Commissioner for Standards, the Committee on Standards, the House of Commons or the courts.<\/span>\n          <\/div>\n\n          <div class=\"sr-process-step\">\n            <span class=\"step-label\">Step 2<\/span>\n            <b>One of the legal recall conditions must actually be met<\/b>\n            <span>The Recall of MPs Act only allows recall in defined circumstances, including certain criminal convictions, a qualifying Commons suspension following a Standards report, or a conviction relating to parliamentary expenses.<\/span>\n          <\/div>\n\n          <div class=\"sr-process-step\">\n            <span class=\"step-label\">Step 3<\/span>\n            <b>The Speaker formally starts the local recall process<\/b>\n            <span>Once the legal condition is satisfied, the Speaker notifies the local Petition Officer. The campaign itself cannot do this.<\/span>\n          <\/div>\n\n          <div class=\"sr-process-step\">\n            <span class=\"step-label\">Step 4<\/span>\n            <b>Clacton gets a six-week signing period<\/b>\n            <span>Eligible registered electors can sign the official recall petition in person, by post or by proxy during the six-week period.<\/span>\n          <\/div>\n\n          <div class=\"sr-process-step\">\n            <span class=\"step-label\">Step 5<\/span>\n            <b>10% is the line that matters<\/b>\n            <span>If fewer than 10% sign, the petition fails and the MP remains in the seat. If at least 10% sign, the petition succeeds.<\/span>\n          <\/div>\n\n          <div class=\"sr-process-step is-result\">\n            <span class=\"step-label\">The result<\/span>\n            <b>A successful petition creates a by-election<\/b>\n            <span>The seat becomes vacant and voters choose again. The recalled MP is legally allowed to stand in that by-election, so the final decision still belongs to voters.<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- STEP: VOLUNTEER -->\n<section class=\"sr-step\" data-step=\"volunteer\">\n  <div class=\"sr-shell\">\n    <div class=\"sr-card\">\n      <span class=\"sr-kicker\">Get involved<\/span>\n      <h2>What could you help with?<\/h2>\n      <p class=\"sr-lead\">Select as many as apply. You are not committing to all of them. This simply helps us understand where you might be useful.<\/p>\n\n      <div class=\"sr-toggle-grid\">\n        <button class=\"sr-toggle\" type=\"button\" id=\"srVolCanvas\" data-toggle-field=\"volunteer\" aria-pressed=\"false\">Canvassing and talking to voters<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srVolLeaflet\" data-toggle-field=\"volunteer\" aria-pressed=\"false\">Leaflet delivery<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srVolOnline\" data-toggle-field=\"volunteer\" aria-pressed=\"false\">Online campaigning and social media<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srVolEvents\" data-toggle-field=\"volunteer\" aria-pressed=\"false\">Events and local organising<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srVolPress\" data-toggle-field=\"volunteer\" aria-pressed=\"false\">Press, media or communications<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srVolSkills\" data-toggle-field=\"volunteer\" aria-pressed=\"false\">Professional or specialist skills<\/button>\n      <\/div>\n\n      <div class=\"sr-field\">\n        <label for=\"srVolunteerNotes\">Anything else you could offer?<\/label>\n        <textarea id=\"srVolunteerNotes\" placeholder=\"Skills, contacts, equipment, experience or practical help.\"><\/textarea>\n      <\/div>\n\n      <h3>Where could you help?<\/h3>\n      <div class=\"sr-toggle-grid\">\n        <button class=\"sr-toggle\" type=\"button\" id=\"srHelpOnline\" data-toggle-field=\"volunteer\" aria-pressed=\"false\">Online<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srHelpHome\" data-toggle-field=\"volunteer\" aria-pressed=\"false\">From home<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srHelpLocal\" data-toggle-field=\"volunteer\" aria-pressed=\"false\">My local area<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srHelpRegion\" data-toggle-field=\"volunteer\" aria-pressed=\"false\">Across my region<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srHelpNationwide\" data-toggle-field=\"volunteer\" aria-pressed=\"false\">Nationwide if needed<\/button>\n      <\/div>\n\n      <button class=\"sr-choice-card sr-hidden\" id=\"srVolunteerNewsButton\" type=\"button\" aria-pressed=\"false\">\n        <b>Also send me news and updates<\/b>\n        <span id=\"srVolunteerNewsButtonText\">Tap here if you would also like to receive Stop Reform news and updates.<\/span>\n      <\/button>\n\n      <div class=\"sr-field-error\" id=\"srVolunteerError\">Please select at least one way you can help, choose where you can help, or tell us more in the box above.<\/div>\n\n      <div class=\"sr-btn-row\">\n        <button class=\"sr-btn sr-btn-primary\" id=\"srVolunteerSubmit\" type=\"button\">Save how I can help<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- STEP: MEMBER -->\n<section class=\"sr-step\" data-step=\"member\">\n  <div class=\"sr-shell\">\n    <div class=\"sr-card sr-narrow\">\n      <span class=\"sr-kicker\">Membership<\/span>\n      <h2>Become a member of Stop Reform<\/h2>\n      <p class=\"sr-lead\">Membership supports this campaign. It does not tell you which political party or candidate to vote for.<\/p>\n\n      <div class=\"sr-note\">\n        Pressing the button below confirms: <strong>Yes, I would like to become a member of Stop Reform.<\/strong>\n      <\/div>\n\n      <div class=\"sr-btn-row\">\n        <button class=\"sr-btn sr-btn-primary\" id=\"srMemberSubmit\" type=\"button\">Yes, become a member<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- STEP: NEWSLETTER -->\n<section class=\"sr-step\" data-step=\"newsletter\">\n  <div class=\"sr-shell\">\n    <div class=\"sr-card sr-narrow\">\n      <span class=\"sr-kicker\">News and updates<\/span>\n      <h2>Keep me informed<\/h2>\n      <p class=\"sr-lead\">Choose the updates you want. You can unsubscribe later.<\/p>\n\n      <div class=\"sr-choice-grid\">\n        <button class=\"sr-choice-card sr-news-scope\" type=\"button\" data-news-scope=\"local\">\n          <b>Local news<\/b><span>Updates relevant to your area.<\/span>\n        <\/button>\n        <button class=\"sr-choice-card sr-news-scope\" type=\"button\" data-news-scope=\"national\">\n          <b>National news<\/b><span>National Stop Reform campaign updates.<\/span>\n        <\/button>\n        <button class=\"sr-choice-card sr-news-scope\" type=\"button\" data-news-scope=\"both\">\n          <b>Both<\/b><span>Local and national updates.<\/span>\n        <\/button>\n      <\/div>\n\n      <div class=\"sr-note\">\n        Pressing the button below confirms: <strong>Yes, I would like to receive Stop Reform news and updates.<\/strong>\n      <\/div>\n\n      <div class=\"sr-btn-row\">\n        <button class=\"sr-btn sr-btn-primary\" id=\"srNewsletterSubmit\" type=\"button\">Yes, subscribe me to updates<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- STEP: SUGGESTION -->\n<section class=\"sr-step\" data-step=\"suggestion\">\n  <div class=\"sr-shell\">\n    <div class=\"sr-card sr-narrow\">\n      <span class=\"sr-kicker\">Make a suggestion<\/span>\n      <h2>How could you help?<\/h2>\n      <p class=\"sr-lead\">We know we have not thought of everything. If you have an idea, a skill, a contact, an opportunity or simply a better way of doing something, tell us.<\/p>\n\n      <div class=\"sr-field\" id=\"srFieldSuggestion\">\n        <label for=\"srSuggestion\">Your suggestion or how you could help<\/label>\n        <textarea id=\"srSuggestion\" placeholder=\"Tell us your idea.\"><\/textarea>\n        <div class=\"sr-field-error\" id=\"srSuggestionError\">Please tell us a little more. Enter at least 3 characters.<\/div>\n      <\/div>\n\n      <div class=\"sr-field\">\n        <label for=\"srSuggestionExtra\">Anything else we should know? <span class=\"sr-small\">(optional)<\/span><\/label>\n        <textarea id=\"srSuggestionExtra\"><\/textarea>\n      <\/div>\n\n      <div class=\"sr-btn-row\">\n        <button class=\"sr-btn sr-btn-primary\" id=\"srSuggestionSubmit\" type=\"button\">Send my suggestion<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- STEP: AFTER ACTION -->\n<section class=\"sr-step\" data-step=\"next\">\n  <div class=\"sr-shell\">\n    <div class=\"sr-card\">\n      <span class=\"sr-kicker\">Thank you<\/span>\n      <h2 id=\"srAfterActionTitle\">Thank you. That&#8217;s been recorded.<\/h2>\n\n      <div class=\"sr-completed-summary sr-hidden\" id=\"srCompletedSummary\">\n        <h3>What you&#8217;ve completed so far<\/h3>\n        <div class=\"sr-completed-list\" id=\"srCompletedList\"><\/div>\n        <div class=\"sr-edit-note\">Need to change something? Completed sections remain clickable below.<\/div>\n      <\/div>\n\n      <p class=\"sr-lead\">Can you also help with any of these?<\/p>\n\n      <div class=\"sr-next-grid\" id=\"srNextActionGrid\"><\/div>\n\n      <div class=\"sr-note sr-success sr-hidden\" id=\"srAllActionsDone\">You&#8217;ve completed all of the currently available actions. You can still reopen any completed section if you need to change something.<\/div>\n\n      <div class=\"sr-btn-row\">\n        <button class=\"sr-btn sr-btn-light\" id=\"srMaybeLater\" type=\"button\">Maybe later<\/button>\n        <button class=\"sr-btn sr-btn-primary\" id=\"srContinueOptional\" type=\"button\">Continue<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- STEP: OPTIONAL CONSENT -->\n<section class=\"sr-step\" data-step=\"optional-consent\">\n  <div class=\"sr-shell\">\n    <div class=\"sr-card sr-narrow\">\n      <span class=\"sr-kicker\">Optional questions<\/span>\n      <h2>One last thing, if you have two minutes<\/h2>\n      <p class=\"sr-lead\">These questions are optional, but they will help us understand the people supporting Stop Reform and what matters to them.<\/p>\n\n      <div class=\"sr-political-consent\">\n        <p><strong>Some of the next questions ask about voting and political opinions.<\/strong><\/p>\n        <p class=\"sr-small\">We will only store those answers if you explicitly agree. You can skip the whole section.<\/p>\n\n        <p><strong>I agree to Stop Reform storing the optional answers I give about my voting and political opinions.<\/strong><\/p>\n      <\/div>\n\n      <div class=\"sr-btn-row\">\n        <button class=\"sr-btn sr-btn-primary\" id=\"srPoliticalContinue\" type=\"button\">Yes, I agree and want to continue<\/button>\n        <button class=\"sr-btn sr-btn-text\" id=\"srSkipPolitical\" type=\"button\">Skip these questions<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- STEP: OPTIONAL QUESTIONS -->\n<section class=\"sr-step\" data-step=\"optional\">\n  <div class=\"sr-shell\">\n    <div class=\"sr-card\">\n      <span class=\"sr-kicker\">Optional questions<\/span>\n      <h2>Help us understand what matters to you<\/h2>\n      <p class=\"sr-lead\">You can leave any individual answer blank.<\/p>\n\n      <div class=\"sr-field\">\n        <label for=\"srLastVote\">Who did you vote for at the last general election?<\/label>\n        <select id=\"srLastVote\">\n          <option value=\"\">Choose an answer<\/option>\n          <option value=\"conservative\">Conservative<\/option>\n          <option value=\"labour\">Labour<\/option>\n          <option value=\"liberal-democrat\">Liberal Democrat<\/option>\n          <option value=\"reform-uk\">Reform UK<\/option>\n          <option value=\"green\">Green<\/option>\n          <option value=\"other\">Other<\/option>\n          <option value=\"did-not-vote\">I did not vote<\/option>\n          <option value=\"prefer-not-to-say\">Prefer not to say<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sr-field sr-hidden\" id=\"srWhyVoteWrap\">\n        <label for=\"srWhyVote\" id=\"srWhyVoteLabel\">Why did you vote for them?<\/label>\n        <textarea id=\"srWhyVote\"><\/textarea>\n      <\/div>\n\n      <div class=\"sr-field sr-hidden\" id=\"srSameVoteWrap\">\n        <label id=\"srSameVoteLabel\">Do you think you&#8217;ll vote the same way next time?<\/label>\n        <select id=\"srSameVote\">\n          <option value=\"\">Choose an answer<\/option>\n          <option value=\"yes\">Yes<\/option>\n          <option value=\"no\">No<\/option>\n          <option value=\"not-sure\">Not sure<\/option>\n          <option value=\"prefer-not-to-say\">Prefer not to say<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sr-field sr-hidden\" id=\"srWhySameWrap\">\n        <label for=\"srWhySame\" id=\"srWhySameLabel\">Why?<\/label>\n        <textarea id=\"srWhySame\"><\/textarea>\n      <\/div>\n\n      <h3>What are the main reasons you want to stop Reform?<\/h3>\n      <p class=\"sr-small\">Select as many as apply.<\/p>\n\n      <div class=\"sr-toggle-grid\" id=\"srReasonGrid\">\n        <button class=\"sr-toggle\" type=\"button\" id=\"srReasonLeadership\" data-reason-value=\"leadership\" aria-pressed=\"false\">Leadership<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srReasonPolicies\" data-reason-value=\"policies\" aria-pressed=\"false\">Policies<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srReasonServices\" data-reason-value=\"public-services\" aria-pressed=\"false\">NHS and public services<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srReasonEconomy\" data-reason-value=\"economy\" aria-pressed=\"false\">Economy and cost of living<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srReasonImmigration\" data-reason-value=\"immigration-approach\" aria-pressed=\"false\">Approach to immigration<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srReasonTone\" data-reason-value=\"tone-division\" aria-pressed=\"false\">Tone and division in politics<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srReasonLocal\" data-reason-value=\"local-representation\" aria-pressed=\"false\">Local representation<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srReasonTrust\" data-reason-value=\"trust-competence\" aria-pressed=\"false\">Trust and competence<\/button>\n        <button class=\"sr-toggle\" type=\"button\" id=\"srReasonOtherCheck\" data-reason-value=\"other\" aria-pressed=\"false\">Other<\/button>\n      <\/div>\n\n      <div class=\"sr-field sr-hidden\" id=\"srReasonOtherWrap\">\n        <label for=\"srReasonOther\">Tell us the other reason<\/label>\n        <textarea id=\"srReasonOther\"><\/textarea>\n      <\/div>\n\n      <div class=\"sr-field\">\n        <label for=\"srReasonMore\">Tell us more about why you want to stop Reform <span class=\"sr-small\">(optional)<\/span><\/label>\n        <textarea id=\"srReasonMore\"><\/textarea>\n      <\/div>\n\n      <div class=\"sr-field\">\n        <label for=\"srPositiveStep\">What made you decide to take a positive step today? <span class=\"sr-small\">(optional)<\/span><\/label>\n        <textarea id=\"srPositiveStep\"><\/textarea>\n      <\/div>\n\n      <div class=\"sr-field\">\n        <label for=\"srBestIdea\">What else could we do to stop Reform?<\/label>\n        <p class=\"sr-small\">This is a genuine question. There&#8217;s a good chance you&#8217;ve thought of something we haven&#8217;t.<\/p>\n        <textarea id=\"srBestIdea\"><\/textarea>\n      <\/div>\n\n      <div class=\"sr-btn-row\">\n        <button class=\"sr-btn sr-btn-primary\" id=\"srOptionalSubmit\" type=\"button\">Finish questionnaire<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- STEP: DUPLICATE -->\n<section class=\"sr-step\" data-step=\"already-registered\">\n  <div class=\"sr-shell\">\n    <div class=\"sr-card sr-narrow\">\n      <span class=\"sr-kicker\">Already registered<\/span>\n      <h2>It looks like we may already have your details.<\/h2>\n      <p class=\"sr-lead\">We do not want to create duplicate supporter records. Secure verification for updating an existing record is the next part we will add.<\/p>\n      <div class=\"sr-note\">For this test, please use a different email or mobile number if you want to create a new test supporter.<\/div>\n      <div class=\"sr-btn-row\">\n        <button class=\"sr-btn sr-btn-primary\" id=\"srDuplicateRestart\" type=\"button\">Start again<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- STEP: COMPLETE -->\n<section class=\"sr-step\" data-step=\"complete\">\n  <div class=\"sr-shell\">\n    <div class=\"sr-card sr-narrow sr-share\">\n\n      <div class=\"sr-final-graphic\" aria-hidden=\"true\">\n        <div class=\"sr-final-arrow-shaft\"><\/div>\n        <div class=\"sr-final-arrow-point\"><\/div>\n        <div class=\"sr-final-check\">\u2713<\/div>\n      <\/div>\n\n      <span class=\"sr-kicker\">Thank you<\/span>\n      <h2>You&#8217;re part of this now.<\/h2>\n      <p class=\"sr-lead\">Thank you for taking the time to tell us how you want to help.<\/p>\n\n      <div class=\"sr-final-message\">\n        <strong>We&#8217;ll update you soon.<\/strong><br>\n        We have saved your details and the actions you chose. Welcome email and SMS messaging are the next automation being connected, so we will only show a message saying they have been sent once the system has actually sent them.\n      <\/div>\n\n      <div class=\"sr-note\" style=\"text-align:left;margin-top:22px;\">\n        <strong>Know someone else who would like to stop Reform?<\/strong><br>\n        Use the Share Stop Reform button below and send them the questionnaire directly so they can choose for themselves whether to register.\n      <\/div>\n\n      <div class=\"sr-btn-row\">\n        <button class=\"sr-btn sr-btn-primary\" id=\"srShareButton\" type=\"button\">Share Stop Reform<\/button>\n        <button class=\"sr-btn sr-btn-light\" id=\"srRestartButton\" type=\"button\">Start a new questionnaire<\/button>\n      <\/div>\n\n      <p class=\"sr-small sr-hidden\" id=\"srShareFallback\">The questionnaire address has been copied where your browser allows it.<\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  'use strict';\n\n  const app = document.getElementById('sr-live-app');\n  if(!app){\n    return;\n  }\n\n  const API_BASE = window.location.origin + '\/index.php?rest_route=\/stop-reform\/v1';\n  const FORM_STATE_KEY = 'sr_live_questionnaire_state_v1';\n  const SESSION_TOKEN_KEY = 'sr_live_session_token_v1';\n  const SESSION_ID_KEY = 'sr_live_session_id_v1';\n\n  const POLITICAL_CONSENT_VERSION = 'political-optional-v1';\n  const POLITICAL_CONSENT_TEXT = 'I agree to Stop Reform storing the optional answers I give about my voting and political opinions.';\n  const NEWSLETTER_CONSENT_VERSION = 'newsletter-v1';\n  const NEWSLETTER_CONSENT_TEXT = 'Yes, I would like to receive Stop Reform news and updates.';\n  const MEMBER_CONSENT_VERSION = 'membership-v1';\n  const MEMBER_CONSENT_TEXT = 'Yes, I would like to become a member of Stop Reform.';\n\n  let state = {\n    score:null,\n    sliderTouched:false,\n    supporterCreated:false,\n    supporterId:'',\n    details:{\n      first_name:'',\n      email:'',\n      mobile:'',\n      postcode:''\n    },\n    detailsContext:'',\n    pendingAction:'',\n    completed:{\n      recall:false,\n      volunteer:false,\n      member:false,\n      newsletter:false,\n      suggestion:false\n    },\n    completedDetails:{\n      recall:'',\n      volunteer:'',\n      member:'',\n      newsletter:'',\n      suggestion:''\n    },\n    recall:{\n      registered_voter:null,\n      joined:false\n    },\n    volunteerData:null,\n    suggestionData:{\n      suggestion_text:'',\n      extra_text:''\n    },\n    newsletterScope:'both',\n    politicalConsentId:'',\n    lastCompletedAction:''\n  };\n\n  function ensureEditableState(){\n    if(!state.completedDetails){\n      state.completedDetails = {\n        recall:'',\n        volunteer:'',\n        member:'',\n        newsletter:'',\n        suggestion:''\n      };\n    }\n\n    if(!state.recall){\n      state.recall = {\n        registered_voter:null,\n        joined:false\n      };\n    }\n\n    if(!state.suggestionData){\n      state.suggestionData = {\n        suggestion_text:'',\n        extra_text:''\n      };\n    }\n  }\n\n  function saveLocalState(){\n    try{\n      sessionStorage.setItem(FORM_STATE_KEY,JSON.stringify(state));\n    }catch(error){}\n  }\n\n  function loadLocalState(){\n    try{\n      const saved = sessionStorage.getItem(FORM_STATE_KEY);\n      if(saved){\n        const parsed = JSON.parse(saved);\n        if(parsed){\n          state = Object.assign(state,parsed);\n          state.details = Object.assign({\n            first_name:'',\n            email:'',\n            mobile:'',\n            postcode:''\n          },state.details);\n          state.completed = Object.assign({\n            recall:false,\n            volunteer:false,\n            member:false,\n            newsletter:false,\n            suggestion:false\n          },state.completed);\n          state.completedDetails = Object.assign({\n            recall:'',\n            volunteer:'',\n            member:'',\n            newsletter:'',\n            suggestion:''\n          },state.completedDetails);\n          state.recall = Object.assign({\n            registered_voter:null,\n            joined:false\n          },state.recall);\n          state.suggestionData = Object.assign({\n            suggestion_text:'',\n            extra_text:''\n          },state.suggestionData);\n        }\n      }\n    }catch(error){}\n  }\n\n  function getSessionToken(){\n    try{\n      return sessionStorage.getItem(SESSION_TOKEN_KEY) || '';\n    }catch(error){\n      return '';\n    }\n  }\n\n  function setSession(token,id){\n    try{\n      sessionStorage.setItem(SESSION_TOKEN_KEY,token);\n      sessionStorage.setItem(SESSION_ID_KEY,id);\n    }catch(error){}\n  }\n\n  function clearSession(){\n    try{\n      sessionStorage.removeItem(SESSION_TOKEN_KEY);\n      sessionStorage.removeItem(SESSION_ID_KEY);\n      sessionStorage.removeItem(FORM_STATE_KEY);\n    }catch(error){}\n  }\n\n  function banner(message,isError){\n    const el = app.querySelector('#srSaveBanner');\n    el.textContent = message;\n    el.classList.remove('sr-hidden');\n    el.classList.toggle('sr-error',isError === true);\n\n    window.setTimeout(function(){\n      el.classList.add('sr-hidden');\n    },3200);\n  }\n\n  function queryParams(){\n    return new URLSearchParams(window.location.search);\n  }\n\n  function sessionPayload(){\n    const params = queryParams();\n\n    return {\n      language:navigator.language || '',\n      timezone:(Intl.DateTimeFormat().resolvedOptions().timeZone || ''),\n      screen_width:window.screen ? window.screen.width : 0,\n      screen_height:window.screen ? window.screen.height : 0,\n      viewport_width:window.innerWidth || 0,\n      viewport_height:window.innerHeight || 0,\n      referrer:document.referrer || '',\n      landing_url:window.location.href,\n      utm_source:params.get('utm_source') || '',\n      utm_medium:params.get('utm_medium') || '',\n      utm_campaign:params.get('utm_campaign') || '',\n      utm_term:params.get('utm_term') || '',\n      utm_content:params.get('utm_content') || ''\n    };\n  }\n\n  async function apiPost(path,payload,needsToken){\n    let token = getSessionToken();\n\n    if(needsToken !== false){\n      if(!token){\n        await ensureSession();\n        token = getSessionToken();\n      }\n    }\n\n    const headers = {\n      'Content-Type':'application\/json'\n    };\n\n    let requestPayload = Object.assign({},payload);\n\n    if(needsToken !== false){\n      headers['X-Stop-Reform-Session'] = token;\n      requestPayload.session_token = token;\n    }\n\n    const response = await fetch(\n      API_BASE + path,\n      {\n        method:'POST',\n        credentials:'same-origin',\n        headers:headers,\n        body:JSON.stringify(requestPayload)\n      }\n    );\n\n    let data = {};\n    try{\n      data = await response.json();\n    }catch(error){}\n\n    if(response.ok === false){\n      const message = data.message || 'We could not save that information.';\n      throw new Error(message);\n    }\n\n    return data;\n  }\n\n  async function ensureSession(){\n    const existing = getSessionToken();\n    if(existing){\n      return existing;\n    }\n\n    const data = await apiPost('\/session',sessionPayload(),false);\n\n    if(!data.session_token){\n      throw new Error('The questionnaire could not start a data session.');\n    }\n\n    setSession(data.session_token,data.session_id || '');\n    return data.session_token;\n  }\n\n  async function recordEvent(eventType,eventData,pageKey){\n    try{\n      await apiPost('\/event',{\n        event_type:eventType,\n        data:eventData || {},\n        page_key:pageKey || currentStep()\n      });\n    }catch(error){\n      console.error('Stop Reform event save failed',error);\n    }\n  }\n\n  async function recordResponse(questionKey,answer,pageKey,isSpecial,consentId){\n    const payload = {\n      question_key:questionKey,\n      question_version:'v1',\n      answer:answer,\n      is_special_category:isSpecial === true,\n      page_key:pageKey || currentStep(),\n      source:'questionnaire'\n    };\n\n    if(consentId){\n      payload.consent_uuid = consentId;\n    }\n\n    return apiPost('\/response',payload);\n  }\n\n  async function recordAction(actionType,status,data,pageKey){\n    return apiPost('\/action',{\n      action_type:actionType,\n      status:status,\n      data:data || {},\n      page_key:pageKey || currentStep(),\n      source:'questionnaire'\n    });\n  }\n\n  async function recordConsent(type,status,textVersion,textSnapshot,lawfulBasis,specialCondition,pageKey){\n    return apiPost('\/consent',{\n      consent_type:type,\n      status:status,\n      channel:'web',\n      text_version:textVersion,\n      text_snapshot:textSnapshot,\n      lawful_basis:lawfulBasis || '',\n      special_category_condition:specialCondition || '',\n      source:'questionnaire',\n      page_key:pageKey || currentStep()\n    });\n  }\n\n\n  function setRecallTeamCount(count){\n    const value = parseInt(count,10);\n\n    if(Number.isNaN(value)){\n      return;\n    }\n\n    const target = 11737;\n    const countEl = app.querySelector('#srRecallTeamCount');\n    const barEl = app.querySelector('#srRecallCounterBar');\n    const copyEl = app.querySelector('#srRecallProgressCopy');\n\n    if(countEl){\n      countEl.textContent = value.toLocaleString('en-GB');\n    }\n\n    if(barEl){\n      let percentage = (value \/ target) * 100;\n\n      if(percentage > 100){\n        percentage = 100;\n      }\n\n      if(percentage < 0){\n        percentage = 0;\n      }\n\n      barEl.style.width = percentage + '%';\n    }\n\n    if(copyEl){\n      let remaining = target - value;\n\n      if(remaining < 0){\n        remaining = 0;\n      }\n\n      if(value >= target){\n        copyEl.textContent = 'Our 15% readiness target has been reached.';\n      }else{\n        copyEl.textContent = 'We have ' + value.toLocaleString('en-GB') + ' Recall Team members. We need ' + remaining.toLocaleString('en-GB') + ' more to reach our 15% readiness target.';\n      }\n    }\n  }\n\n  async function loadRecallTeamCount(){\n    try{\n      const response = await fetch(\n        window.location.origin + '\/index.php?rest_route=\/stop-reform\/v1\/stats\/recall',\n        {\n          method:'GET',\n          credentials:'same-origin'\n        }\n      );\n\n      if(response.ok === false){\n        return;\n      }\n\n      const data = await response.json();\n\n      if(data){\n        if(data.recall_team_count !== undefined){\n          setRecallTeamCount(data.recall_team_count);\n        }\n      }\n    }catch(error){\n      console.error('Recall Team count could not be loaded',error);\n    }\n  }\n\n  function currentStep(){\n    const active = app.querySelector('.sr-step.is-active');\n    if(!active){\n      return 'start';\n    }\n    return active.getAttribute('data-step') || 'start';\n  }\n\n  function stepFromUrl(){\n    const params = queryParams();\n    return params.get('step') || 'start';\n  }\n\n  function stepAllowed(step){\n    const allowed = [\n      'start',\n      'details',\n      'actions',\n      'recall',\n      'volunteer',\n      'member',\n      'newsletter',\n      'suggestion',\n      'next',\n      'optional-consent',\n      'optional',\n      'already-registered',\n      'complete'\n    ];\n    return allowed.indexOf(step) !== -1;\n  }\n\n  function stepUrl(step){\n    const url = new URL(window.location.href);\n\n    if(step === 'start'){\n      url.searchParams.delete('step');\n    }else{\n      url.searchParams.set('step',step);\n    }\n\n    return url.pathname + url.search + url.hash;\n  }\n\n  function showStep(step,options){\n    const settings = options || {};\n    let target = step;\n\n    if(!stepAllowed(target)){\n      target = 'start';\n    }\n\n    app.querySelectorAll('.sr-step').forEach(function(section){\n      section.classList.remove('is-active');\n    });\n\n    const section = app.querySelector('.sr-step[data-step=\"' + target + '\"]');\n\n    if(!section){\n      return;\n    }\n\n    section.classList.add('is-active');\n\n    if(settings.updateUrl !== false){\n      const url = stepUrl(target);\n\n      if(settings.replace === true){\n        history.replaceState({srStep:target},'',url);\n      }else{\n        history.pushState({srStep:target},'',url);\n      }\n    }\n\n    window.scrollTo({top:0,behavior:settings.instant === true ? 'auto' : 'smooth'});\n\n    if(target === 'actions'){\n      renderActions();\n    }\n\n    if(target === 'next'){\n      renderNextActions();\n    }\n\n    recordEvent('step_viewed',{step:target},target);\n  }\n\n  window.addEventListener('popstate',function(){\n    const target = stepFromUrl();\n    showStep(target,{updateUrl:false,instant:true});\n  });\n\n  function installBackButtons(){\n    const noBackSteps = ['start','actions','complete'];\n\n    app.querySelectorAll('.sr-step').forEach(function(section){\n      const step = section.getAttribute('data-step') || '';\n\n      if(noBackSteps.indexOf(step) !== -1){\n        return;\n      }\n\n      const card = section.querySelector('.sr-card');\n\n      if(!card){\n        return;\n      }\n\n      if(card.querySelector('.sr-page-back')){\n        return;\n      }\n\n      const row = document.createElement('div');\n      row.className = 'sr-page-back';\n\n      const button = document.createElement('button');\n      button.type = 'button';\n      button.textContent = 'Back';\n      button.setAttribute('aria-label','Go back to the previous questionnaire step');\n\n      button.addEventListener('click',function(){\n        history.back();\n      });\n\n      row.appendChild(button);\n      card.insertBefore(row,card.firstChild);\n    });\n  }\n\n\n  function scoreMessage(score){\n    if(score <= 3){\n      return \"You've taken the first step. You do not have to become a campaigner to help. Even staying informed, sharing the questionnaire or making a suggestion can make a difference.\";\n    }\n\n    if(score <= 6){\n      return \"You want to see Reform stopped. There are several practical ways you can help, and you can choose whatever suits you.\";\n    }\n\n    if(score <= 8){\n      return \"You clearly want to help stop Reform. We need people who feel like you do to turn that concern into practical action.\";\n    }\n\n    return \"You've told us very clearly that you want to stop Reform. We need people this determined. Please help us turn that determination into action.\";\n  }\n\n  function actionPageMessage(score){\n    if(score <= 3){\n      return \"You can help us stop Reform in a way that suits you. You do not have to take on a big commitment. Choose anything below that feels right.\";\n    }\n\n    if(score <= 6){\n      return \"You want change. One practical action can make a difference. Choose one or more of the ways below that suit you.\";\n    }\n\n    if(score <= 8){\n      return \"You clearly want to help stop Reform. Turning that concern into action is what will make the difference. Choose one or more ways you can help.\";\n    }\n\n    return \"You told us you really want to stop Reform. We need people this determined to act. Please choose one or more ways you can help us.\";\n  }\n\n  function buttonPressed(id){\n    const button = app.querySelector('#' + id);\n\n    if(!button){\n      return false;\n    }\n\n    return button.getAttribute('aria-pressed') === 'true';\n  }\n\n  function setButtonPressed(id,value){\n    const button = app.querySelector('#' + id);\n\n    if(!button){\n      return;\n    }\n\n    button.setAttribute('aria-pressed',value === true ? 'true' : 'false');\n  }\n\n  function togglePressed(button){\n    const current = button.getAttribute('aria-pressed') === 'true';\n    button.setAttribute('aria-pressed',current ? 'false' : 'true');\n  }\n\n  function hydrateVolunteer(){\n    const data = state.volunteerData;\n\n    const ids = [\n      'srVolCanvas',\n      'srVolLeaflet',\n      'srVolOnline',\n      'srVolEvents',\n      'srVolPress',\n      'srVolSkills',\n      'srHelpOnline',\n      'srHelpHome',\n      'srHelpLocal',\n      'srHelpRegion',\n      'srHelpNationwide'\n    ];\n\n    ids.forEach(function(id){\n      setButtonPressed(id,false);\n    });\n\n    app.querySelector('#srVolunteerNotes').value = '';\n\n    if(!data){\n      return;\n    }\n\n    setButtonPressed('srVolCanvas',data.canvassing === true);\n    setButtonPressed('srVolLeaflet',data.leaflets === true);\n    setButtonPressed('srVolOnline',data.online_campaign === true);\n    setButtonPressed('srVolEvents',data.events === true);\n    setButtonPressed('srVolPress',data.press_media === true);\n    setButtonPressed('srVolSkills',data.specialist_skills === true);\n    setButtonPressed('srHelpOnline',data.help_online === true);\n    setButtonPressed('srHelpHome',data.help_from_home === true);\n    setButtonPressed('srHelpLocal',data.help_local === true);\n    setButtonPressed('srHelpRegion',data.help_region === true);\n    setButtonPressed('srHelpNationwide',data.help_nationwide === true);\n    app.querySelector('#srVolunteerNotes').value = data.notes || '';\n  }\n\n  function hydrateSuggestion(){\n    ensureEditableState();\n    app.querySelector('#srSuggestion').value = state.suggestionData.suggestion_text || '';\n    app.querySelector('#srSuggestionExtra').value = state.suggestionData.extra_text || '';\n  }\n\n  function hydrateNewsletter(){\n    app.querySelectorAll('[data-news-scope]').forEach(function(button){\n      const selected = button.getAttribute('data-news-scope') === state.newsletterScope;\n      button.style.borderColor = selected ? 'var(--teal)' : '';\n    });\n  }\n\n  function hydrateRecall(){\n    ensureEditableState();\n\n    const currentBox = app.querySelector('#srRecallCurrent');\n    const currentText = app.querySelector('#srRecallCurrentText');\n\n    app.querySelectorAll('[data-recall-voter]').forEach(function(button){\n      button.classList.remove('is-selected');\n    });\n\n    app.querySelector('#srRecallLocal').classList.add('sr-hidden');\n    app.querySelector('#srRecallNotLocal').classList.add('sr-hidden');\n\n    if(state.recall.registered_voter === null){\n      currentBox.classList.add('sr-hidden');\n      return;\n    }\n\n    currentBox.classList.remove('sr-hidden');\n\n    if(state.recall.registered_voter === true){\n      const yesButton = app.querySelector('[data-recall-voter=\"yes\"]');\n      yesButton.classList.add('is-selected');\n      app.querySelector('#srRecallLocal').classList.remove('sr-hidden');\n\n      if(state.recall.joined === true){\n        currentText.textContent = 'Registered Clacton voter: Yes. Recall team: Joined.';\n      }else{\n        currentText.textContent = 'Registered Clacton voter: Yes. Recall team: Not joined.';\n      }\n    }else{\n      const noButton = app.querySelector('[data-recall-voter=\"no\"]');\n      noButton.classList.add('is-selected');\n      app.querySelector('#srRecallNotLocal').classList.remove('sr-hidden');\n      currentText.textContent = 'Registered Clacton voter: No.';\n    }\n  }\n\n  function actionsTakenCount(){\n    let count = 0;\n    Object.keys(state.completed).forEach(function(key){\n      if(state.completed[key] === true){\n        count = count + 1;\n      }\n    });\n    return count;\n  }\n\n  function renderActions(){\n    app.querySelector('#srActionsMessage').textContent = actionPageMessage(state.score || 5);\n\n    const count = actionsTakenCount();\n    const taken = app.querySelector('#srActionsTaken');\n\n    if(count === 0){\n      taken.textContent = 'No actions completed yet.';\n    }else if(count === 1){\n      taken.textContent = '1 action taken. Thank you.';\n    }else{\n      taken.textContent = count + ' actions taken. Thank you.';\n    }\n\n    app.querySelectorAll('[data-action]').forEach(function(button){\n      const action = button.getAttribute('data-action');\n      button.classList.toggle('is-done',state.completed[action] === true);\n    });\n\n    const doneButton = app.querySelector('#srNoMoreActions');\n    doneButton.classList.toggle('sr-hidden',count === 0);\n  }\n\n  const actionDescriptions = {\n    recall:{\n      title:'Recall team',\n      copy:'If you are registered to vote in Clacton, help us be ready if an official recall process opens.'\n    },\n    volunteer:{\n      title:'Get involved',\n      copy:'Help online, locally, from home or with practical and professional skills.'\n    },\n    member:{\n      title:'Become a member',\n      copy:'Support the campaign and be part of what we are building.'\n    },\n    newsletter:{\n      title:'Get the newsletter',\n      copy:'Stay informed about the campaign and important developments.'\n    },\n    suggestion:{\n      title:'Make a suggestion',\n      copy:'Tell us an idea, a skill or another way you could help.'\n    }\n  };\n\n  function completedDetailText(action){\n    const detail = state.completedDetails[action] || '';\n\n    if(detail){\n      return detail;\n    }\n\n    if(action === 'recall'){\n      return 'Recall team completed';\n    }\n    if(action === 'volunteer'){\n      return 'Get involved completed';\n    }\n    if(action === 'member'){\n      return 'Membership completed';\n    }\n    if(action === 'newsletter'){\n      return 'Newsletter completed';\n    }\n    if(action === 'suggestion'){\n      return 'Suggestion submitted';\n    }\n\n    return 'Completed';\n  }\n\n  function renderCompletedSummary(){\n    const summary = app.querySelector('#srCompletedSummary');\n    const list = app.querySelector('#srCompletedList');\n\n    if(!summary){\n      return;\n    }\n\n    list.innerHTML = '';\n    let completedCount = 0;\n\n    ['recall','volunteer','member','newsletter','suggestion'].forEach(function(action){\n      if(state.completed[action] === false){\n        return;\n      }\n\n      completedCount = completedCount + 1;\n\n      const item = document.createElement('div');\n      item.className = 'sr-completed-item';\n\n      const tick = document.createElement('span');\n      tick.className = 'sr-completed-tick';\n      tick.textContent = '\u2713';\n\n      const text = document.createElement('div');\n      const title = document.createElement('strong');\n      title.textContent = actionDescriptions[action].title + ': ';\n      text.appendChild(title);\n      text.appendChild(document.createTextNode(completedDetailText(action)));\n\n      item.appendChild(tick);\n      item.appendChild(text);\n      list.appendChild(item);\n    });\n\n    summary.classList.toggle('sr-hidden',completedCount === 0);\n  }\n\n  function renderNextActions(){\n    const grid = app.querySelector('#srNextActionGrid');\n    const doneBox = app.querySelector('#srAllActionsDone');\n\n    grid.innerHTML = '';\n    renderCompletedSummary();\n\n    let remaining = 0;\n\n    ['recall','volunteer','member','newsletter','suggestion'].forEach(function(action){\n      const info = actionDescriptions[action];\n      const button = document.createElement('button');\n      button.type = 'button';\n      button.className = 'sr-next-card';\n      button.setAttribute('data-next-action',action);\n\n      if(state.completed[action] === true){\n        button.classList.add('is-done');\n\n        const status = document.createElement('span');\n        status.className = 'sr-next-status';\n        status.textContent = 'Completed - click to edit';\n        button.appendChild(status);\n      }else{\n        remaining = remaining + 1;\n      }\n\n      const title = document.createElement('b');\n      title.textContent = info.title;\n\n      const copy = document.createElement('span');\n\n      if(state.completed[action] === true){\n        copy.textContent = completedDetailText(action);\n      }else{\n        copy.textContent = info.copy;\n      }\n\n      button.appendChild(title);\n      button.appendChild(copy);\n      grid.appendChild(button);\n    });\n\n    const donation = document.createElement('button');\n    donation.type = 'button';\n    donation.disabled = true;\n    donation.className = 'sr-next-card is-disabled';\n\n    const donationStatus = document.createElement('span');\n    donationStatus.className = 'sr-coming-soon';\n    donationStatus.textContent = 'Coming soon';\n\n    const donationTitle = document.createElement('b');\n    donationTitle.textContent = 'Make a donation';\n\n    const donationCopy = document.createElement('span');\n    donationCopy.textContent = 'Secure one-off and monthly donations will be available once Stripe payments are switched on.';\n\n    donation.appendChild(donationStatus);\n    donation.appendChild(donationTitle);\n    donation.appendChild(donationCopy);\n    grid.appendChild(donation);\n\n    doneBox.classList.toggle('sr-hidden',remaining !== 0);\n  }\n\n  function markActionComplete(action,title){\n    state.completed[action] = true;\n    state.lastCompletedAction = action;\n    saveLocalState();\n\n    const heading = app.querySelector('#srAfterActionTitle');\n\n    if(heading){\n      heading.textContent = title || 'Thank you. That has been recorded.';\n    }\n\n    showStep('next');\n  }\n\n  function cleanMobile(value){\n    let digits = String(value || '').replace(\/[^0-9]\/g,'');\n\n    if(digits.slice(0,2) === '44'){\n      digits = '0' + digits.slice(2);\n    }\n\n    return digits;\n  }\n\n  function normalizePostcode(value){\n    let postcode = String(value || '').toUpperCase().replace(\/\\s+\/g,'');\n\n    if(postcode.length > 3){\n      postcode = postcode.slice(0,-3) + ' ' + postcode.slice(-3);\n    }\n\n    return postcode.trim();\n  }\n\n  function validName(value){\n    return String(value || '').trim().length >= 3;\n  }\n\n  function validEmail(value){\n    const email = String(value || '').trim();\n    if(email === ''){\n      return false;\n    }\n    return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\/.test(email);\n  }\n\n  function validMobile(value){\n    const mobile = cleanMobile(value);\n    if(mobile.length !== 11){\n      return false;\n    }\n    return mobile.slice(0,2) === '07';\n  }\n\n  function validPostcode(value){\n    const postcode = normalizePostcode(value);\n    if(postcode === ''){\n      return true;\n    }\n    return \/^[A-Z]{1,2}[0-9][A-Z0-9]?\\s[0-9][A-Z]{2}$\/.test(postcode);\n  }\n\n  function setFieldError(fieldId,errorId,hasError){\n    const field = app.querySelector('#' + fieldId);\n    const error = app.querySelector('#' + errorId);\n\n    if(field){\n      field.classList.toggle('has-error',hasError);\n    }\n\n    if(error){\n      error.classList.toggle('is-visible',hasError);\n    }\n  }\n\n  function fillDetailsFromState(){\n    app.querySelector('#srFirstName').value = state.details.first_name || '';\n    app.querySelector('#srEmail').value = state.details.email || '';\n    app.querySelector('#srMobile').value = state.details.mobile || '';\n    app.querySelector('#srPostcode').value = state.details.postcode || '';\n  }\n\n  function detailsConsentHtml(context){\n    if(context === 'member'){\n      return '<div class=\"sr-note\">By pressing <strong>Become a member<\/strong> below, you are confirming that you want to become a member of Stop Reform.<\/div>';\n    }\n\n    if(context === 'newsletter'){\n      return '<div class=\"sr-note\">After these details, you can choose the updates you want and confirm your subscription with one clear button.<\/div>';\n    }\n\n    return '';\n  }\n\n  function prepareDetails(context){\n    state.detailsContext = context;\n    saveLocalState();\n    fillDetailsFromState();\n\n    const title = app.querySelector('#srDetailsTitle');\n    const lead = app.querySelector('#srDetailsLead');\n\n    title.textContent = 'A few details so we can continue';\n    lead.textContent = 'We only ask once. Your details will carry through the rest of the questionnaire.';\n\n    if(context === 'recall'){\n      title.textContent = 'Join the recall team';\n    }\n\n    if(context === 'volunteer'){\n      title.textContent = 'Save how you can help';\n    }\n\n    if(context === 'suggestion'){\n      title.textContent = 'Save your suggestion';\n    }\n\n    if(context === 'member'){\n      title.textContent = 'Become a member';\n    }\n\n    if(context === 'newsletter'){\n      title.textContent = 'Get the newsletter';\n    }\n\n    if(context === 'optional'){\n      title.textContent = 'Before the optional questions';\n      lead.textContent = 'We need a supporter record before we can securely link and store your optional answers.';\n    }\n\n    app.querySelector('#srDetailsConsentArea').innerHTML = detailsConsentHtml(context);\n    app.querySelector('#srDetailsGeneralError').classList.remove('is-visible');\n\n    const detailsButton = app.querySelector('#srDetailsContinue');\n    detailsButton.textContent = 'Continue';\n\n    if(context === 'member'){\n      detailsButton.textContent = 'Become a member';\n    }\n\n    if(context === 'newsletter'){\n      detailsButton.textContent = 'Continue to newsletter choices';\n    }\n\n    if(context === 'recall'){\n      detailsButton.textContent = 'Join the recall team';\n    }\n\n    if(context === 'volunteer'){\n      detailsButton.textContent = 'Save how I can help';\n    }\n\n    if(context === 'suggestion'){\n      detailsButton.textContent = 'Send my suggestion';\n    }\n\n    if(context === 'optional'){\n      detailsButton.textContent = 'Continue to optional questions';\n    }\n\n    showStep('details');\n  }\n\n  function detailsNeedEmail(context){\n    if(context === 'join-newsletter'){\n      return true;\n    }\n\n    if(context === 'join-both'){\n      return true;\n    }\n\n    if(context === 'newsletter'){\n      return true;\n    }\n\n    return false;\n  }\n\n  function validateDetails(){\n    const context = state.detailsContext;\n    const firstName = app.querySelector('#srFirstName').value.trim();\n    const email = app.querySelector('#srEmail').value.trim();\n    const mobileRaw = app.querySelector('#srMobile').value.trim();\n    const postcodeRaw = app.querySelector('#srPostcode').value.trim();\n\n    const emailRequired = detailsNeedEmail(context);\n    const nameBad = !validName(firstName);\n    let emailBad = false;\n    let mobileBad = false;\n    const postcodeBad = !validPostcode(postcodeRaw);\n\n    if(email !== ''){\n      emailBad = !validEmail(email);\n    }\n\n    if(mobileRaw !== ''){\n      mobileBad = !validMobile(mobileRaw);\n    }\n\n    if(emailRequired){\n      emailBad = !validEmail(email);\n    }\n\n    let contactMissing = false;\n    if(email === ''){\n      if(mobileRaw === ''){\n        contactMissing = true;\n      }\n    }\n\n    setFieldError('srFieldFirstName','srErrorFirstName',nameBad);\n    setFieldError('srFieldEmail','srErrorEmail',emailBad);\n    setFieldError('srFieldMobile','srErrorMobile',mobileBad);\n    setFieldError('srFieldPostcode','srErrorPostcode',postcodeBad);\n\n    const general = app.querySelector('#srDetailsGeneralError');\n    general.classList.remove('is-visible');\n\n    if(contactMissing){\n      general.textContent = 'Please give us at least one contact method: a valid email address or an 11-digit UK mobile starting 07.';\n      general.classList.add('is-visible');\n    }\n\n    if(nameBad){\n      return false;\n    }\n\n    if(emailBad){\n      return false;\n    }\n\n    if(mobileBad){\n      return false;\n    }\n\n    if(postcodeBad){\n      return false;\n    }\n\n    if(contactMissing){\n      return false;\n    }\n\n    state.details = {\n      first_name:firstName,\n      email:email,\n      mobile:cleanMobile(mobileRaw),\n      postcode:normalizePostcode(postcodeRaw)\n    };\n\n    saveLocalState();\n    return true;\n  }\n\n  async function createSupporterIfNeeded(){\n    if(state.supporterCreated === true){\n      return true;\n    }\n\n    const result = await apiPost('\/supporter',{\n      first_name:state.details.first_name,\n      email:state.details.email,\n      mobile:state.details.mobile,\n      postcode:state.details.postcode,\n      strength_score:state.score,\n      source:'questionnaire'\n    });\n\n    if(result.status === 'already_registered'){\n      showStep('already-registered');\n      return false;\n    }\n\n    if(result.status !== 'created'){\n      throw new Error(result.message || 'We could not create your supporter record.');\n    }\n\n    state.supporterCreated = true;\n    state.supporterId = result.supporter_id || '';\n    saveLocalState();\n    return true;\n  }\n\n  async function saveMemberConsent(){\n    const response = await recordConsent(\n      'membership',\n      'granted',\n      MEMBER_CONSENT_VERSION,\n      MEMBER_CONSENT_TEXT,\n      'consent',\n      '',\n      'membership'\n    );\n\n    state.completed.member = true;\n    state.completedDetails.member = 'Member';\n    saveLocalState();\n\n    await recordAction('membership','completed',{\n      consent_id:response.consent_id || ''\n    },'membership');\n  }\n\n  async function saveNewsletterConsent(scope){\n    const response = await recordConsent(\n      'newsletter',\n      'granted',\n      NEWSLETTER_CONSENT_VERSION,\n      NEWSLETTER_CONSENT_TEXT,\n      'consent',\n      '',\n      'newsletter'\n    );\n\n    state.newsletterScope = scope || state.newsletterScope || 'both';\n    state.completed.newsletter = true;\n\n    if(state.newsletterScope === 'local'){\n      state.completedDetails.newsletter = 'Local news and updates';\n    }else if(state.newsletterScope === 'national'){\n      state.completedDetails.newsletter = 'National news and updates';\n    }else{\n      state.completedDetails.newsletter = 'Local and national news and updates';\n    }\n\n    saveLocalState();\n\n    await recordResponse('newsletter_scope',state.newsletterScope,'newsletter',false,'');\n    await recordAction('newsletter','completed',{\n      scope:state.newsletterScope,\n      consent_id:response.consent_id || ''\n    },'newsletter');\n  }\n\n  async function continueAfterDetails(){\n    const context = state.detailsContext;\n\n    if(context === 'recall'){\n      await completeRecall();\n      return;\n    }\n\n    if(context === 'volunteer'){\n      await completeVolunteer();\n      return;\n    }\n\n    if(context === 'suggestion'){\n      await completeSuggestion();\n      return;\n    }\n\n    if(context === 'member'){\n      await saveMemberConsent();\n      markActionComplete('member','Thank you. You are now a member.');\n      return;\n    }\n\n    if(context === 'newsletter'){\n      showStep('newsletter');\n      return;\n    }\n\n    if(context === 'optional'){\n      showStep('optional-consent');\n      return;\n    }\n\n    showStep('actions');\n  }\n\n  async function completeRecall(){\n    ensureEditableState();\n\n    await recordAction('recall','completed',{\n      registered_clacton_voter:true,\n      joined_recall_team:true\n    },'recall');\n\n    state.recall.registered_voter = true;\n    state.recall.joined = true;\n    state.completed.recall = true;\n    state.completedDetails.recall = 'Registered Clacton voter: Yes. Recall team: Joined.';\n    saveLocalState();\n    markActionComplete('recall','Thank you. Your Recall Team details have been saved.');\n  }\n\n  function volunteerData(){\n    return {\n      canvassing:buttonPressed('srVolCanvas'),\n      leaflets:buttonPressed('srVolLeaflet'),\n      online_campaign:buttonPressed('srVolOnline'),\n      events:buttonPressed('srVolEvents'),\n      press_media:buttonPressed('srVolPress'),\n      specialist_skills:buttonPressed('srVolSkills'),\n      notes:app.querySelector('#srVolunteerNotes').value.trim(),\n      help_online:buttonPressed('srHelpOnline'),\n      help_from_home:buttonPressed('srHelpHome'),\n      help_local:buttonPressed('srHelpLocal'),\n      help_region:buttonPressed('srHelpRegion'),\n      help_nationwide:buttonPressed('srHelpNationwide')\n    };\n  }\n\n  function volunteerSummary(data){\n    const parts = [];\n\n    if(data.canvassing){ parts.push('canvassing'); }\n    if(data.leaflets){ parts.push('leaflets'); }\n    if(data.online_campaign){ parts.push('online campaigning'); }\n    if(data.events){ parts.push('events'); }\n    if(data.press_media){ parts.push('press\/media'); }\n    if(data.specialist_skills){ parts.push('specialist skills'); }\n\n    const places = [];\n    if(data.help_online){ places.push('online'); }\n    if(data.help_from_home){ places.push('from home'); }\n    if(data.help_local){ places.push('local area'); }\n    if(data.help_region){ places.push('region'); }\n    if(data.help_nationwide){ places.push('nationwide'); }\n\n    let summary = '';\n\n    if(parts.length){\n      summary = parts.join(', ');\n    }\n\n    if(places.length){\n      if(summary){\n        summary = summary + ' | ';\n      }\n      summary = summary + places.join(', ');\n    }\n\n    if(data.notes){\n      if(summary){\n        summary = summary + ' | ';\n      }\n      summary = summary + 'extra details supplied';\n    }\n\n    if(!summary){\n      summary = 'Volunteer details submitted';\n    }\n\n    return summary;\n  }\n\n  async function completeVolunteer(){\n    await recordAction('volunteer','completed',state.pendingVolunteer || volunteerData(),'volunteer');\n\n    const newsButton = app.querySelector('#srVolunteerNewsButton');\n    if(newsButton){\n      if(newsButton.getAttribute('aria-pressed') === 'true'){\n        if(state.completed.newsletter === false){\n          await saveNewsletterConsent('both');\n        }\n      }\n    }\n\n    state.completed.volunteer = true;\n    state.volunteerData = state.pendingVolunteer || volunteerData();\n    state.completedDetails.volunteer = volunteerSummary(state.volunteerData);\n    state.pendingVolunteer = null;\n    saveLocalState();\n    markActionComplete('volunteer','Thank you. We have saved how you could help.');\n  }\n\n  async function completeSuggestion(){\n    const data = state.pendingSuggestion || {\n      suggestion_text:app.querySelector('#srSuggestion').value.trim(),\n      extra_text:app.querySelector('#srSuggestionExtra').value.trim()\n    };\n\n    await apiPost('\/suggestion',{\n      suggestion_text:data.suggestion_text,\n      extra_text:data.extra_text,\n      page_key:'suggestion'\n    });\n\n    await recordAction('suggestion','completed',{},'suggestion');\n\n    state.completed.suggestion = true;\n    state.suggestionData = {\n      suggestion_text:data.suggestion_text || '',\n      extra_text:data.extra_text || ''\n    };\n\n    const suggestionPreview = data.suggestion_text || '';\n    if(suggestionPreview.length > 80){\n      state.completedDetails.suggestion = suggestionPreview.slice(0,80) + '...';\n    }else{\n      state.completedDetails.suggestion = suggestionPreview;\n    }\n\n    state.pendingSuggestion = null;\n    saveLocalState();\n    markActionComplete('suggestion','Thank you. We have got your suggestion.');\n  }\n\n  function routeAction(action){\n    state.pendingAction = action;\n    saveLocalState();\n\n    if(action === 'recall'){\n      hydrateRecall();\n      loadRecallTeamCount();\n      showStep('recall');\n      return;\n    }\n\n    if(action === 'volunteer'){\n      hydrateVolunteer();\n\n      if(state.completed.newsletter === false){\n        app.querySelector('#srVolunteerNewsButton').classList.remove('sr-hidden');\n      }else{\n        app.querySelector('#srVolunteerNewsButton').classList.add('sr-hidden');\n      }\n\n      showStep('volunteer');\n      return;\n    }\n\n    if(action === 'member'){\n      if(state.supporterCreated === false){\n        prepareDetails('member');\n      }else{\n        showStep('member');\n      }\n      return;\n    }\n\n    if(action === 'newsletter'){\n      if(state.supporterCreated === false){\n        prepareDetails('newsletter');\n      }else{\n        hydrateNewsletter();\n        showStep('newsletter');\n      }\n      return;\n    }\n\n    if(action === 'suggestion'){\n      hydrateSuggestion();\n      showStep('suggestion');\n    }\n  }\n\n  async function goToOptionalConsent(){\n    if(state.supporterCreated === false){\n      prepareDetails('optional');\n      return;\n    }\n\n    showStep('optional-consent');\n  }\n\n  function selectedReasons(){\n    const values = [];\n\n    app.querySelectorAll('[data-reason-value]').forEach(function(button){\n      if(button.getAttribute('aria-pressed') === 'true'){\n        values.push(button.getAttribute('data-reason-value'));\n      }\n    });\n\n    return values;\n  }\n\n  async function saveOptionalAnswers(){\n    const consentId = state.politicalConsentId;\n\n    const lastVote = app.querySelector('#srLastVote').value;\n    const whyVote = app.querySelector('#srWhyVote').value.trim();\n    const sameVote = app.querySelector('#srSameVote').value;\n    const whySame = app.querySelector('#srWhySame').value.trim();\n    const reasons = selectedReasons();\n    const reasonOther = app.querySelector('#srReasonOther').value.trim();\n    const reasonMore = app.querySelector('#srReasonMore').value.trim();\n    const positiveStep = app.querySelector('#srPositiveStep').value.trim();\n    const bestIdea = app.querySelector('#srBestIdea').value.trim();\n\n    const answers = [\n      ['last_general_election_vote',lastVote],\n      ['why_last_vote',whyVote],\n      ['vote_same_next_time',sameVote],\n      ['why_same_or_different_next_time',whySame],\n      ['reasons_to_stop_reform',reasons],\n      ['reasons_to_stop_reform_other',reasonOther],\n      ['reasons_to_stop_reform_more',reasonMore],\n      ['positive_step_motivation',positiveStep],\n      ['what_else_should_stop_reform_do',bestIdea]\n    ];\n\n    for(const item of answers){\n      await recordResponse(\n        item[0],\n        item[1],\n        'optional',\n        true,\n        consentId\n      );\n    }\n\n    await recordAction('optional_questions','completed',{\n      answered:true\n    },'optional');\n  }\n\n  app.querySelector('#srStrength').addEventListener('input',function(){\n    const slider = app.querySelector('#srStrength');\n    const value = parseInt(slider.value,10);\n\n    state.score = value;\n    state.sliderTouched = true;\n    saveLocalState();\n\n    const number = app.querySelector('#srSliderNumber');\n    number.textContent = value;\n    number.classList.remove('is-empty');\n\n    app.querySelector('#srSliderMessage').textContent = scoreMessage(value);\n    app.querySelector('#srSliderContinue').disabled = false;\n  });\n\n  app.querySelector('#srSliderContinue').addEventListener('click',async function(){\n    if(state.sliderTouched === false){\n      return;\n    }\n\n    try{\n      await ensureSession();\n      await recordResponse('strength_score',state.score,'start',false,'');\n      await recordEvent('slider_completed',{score:state.score},'start');\n      showStep('actions');\n    }catch(error){\n      console.error(error);\n      banner(error.message,true);\n    }\n  });\n\n  app.querySelector('#srDetailsContinue').addEventListener('click',async function(){\n    if(validateDetails() === false){\n      return;\n    }\n\n    try{\n      const created = await createSupporterIfNeeded();\n\n      if(created === false){\n        return;\n      }\n\n      await continueAfterDetails();\n    }catch(error){\n      console.error(error);\n      banner(error.message,true);\n    }\n  });\n\n  app.querySelectorAll('[data-action]').forEach(function(button){\n    button.addEventListener('click',function(){\n      routeAction(button.getAttribute('data-action'));\n    });\n  });\n\n  app.addEventListener('click',function(event){\n    const next = event.target.closest('[data-next-action]');\n\n    if(next){\n      if(app.contains(next)){\n        routeAction(next.getAttribute('data-next-action'));\n      }\n    }\n  });\n\n  app.querySelectorAll('[data-recall-voter]').forEach(function(button){\n    button.addEventListener('click',async function(){\n      const answer = button.getAttribute('data-recall-voter');\n\n      try{\n        await recordResponse('registered_clacton_voter',answer,'recall',false,'');\n\n        ensureEditableState();\n\n        app.querySelectorAll('[data-recall-voter]').forEach(function(other){\n          other.classList.remove('is-selected');\n        });\n\n        button.classList.add('is-selected');\n\n        if(answer === 'yes'){\n          state.recall.registered_voter = true;\n          app.querySelector('#srRecallLocal').classList.remove('sr-hidden');\n          app.querySelector('#srRecallNotLocal').classList.add('sr-hidden');\n        }else{\n          state.recall.registered_voter = false;\n          state.recall.joined = false;\n          app.querySelector('#srRecallLocal').classList.add('sr-hidden');\n          app.querySelector('#srRecallNotLocal').classList.remove('sr-hidden');\n        }\n\n        saveLocalState();\n        hydrateRecall();\n      }catch(error){\n        console.error(error);\n        banner(error.message,true);\n      }\n    });\n  });\n\n  app.querySelector('#srRecallJoin').addEventListener('click',async function(){\n    try{\n      if(state.supporterCreated === false){\n        prepareDetails('recall');\n        return;\n      }\n\n      await completeRecall();\n    }catch(error){\n      console.error(error);\n      banner(error.message,true);\n    }\n  });\n\n  app.querySelector('#srRecallDecline').addEventListener('click',async function(){\n    try{\n      await recordAction('recall','declined',{\n        registered_clacton_voter:true\n      },'recall');\n\n      ensureEditableState();\n      state.recall.registered_voter = true;\n      state.recall.joined = false;\n      state.completed.recall = false;\n      state.completedDetails.recall = 'Registered Clacton voter: Yes. Recall team: Not joined.';\n      saveLocalState();\n      showStep('actions');\n    }catch(error){\n      console.error(error);\n      banner(error.message,true);\n    }\n  });\n\n  app.querySelector('#srRecallNotLocalDone').addEventListener('click',async function(){\n    try{\n      await recordAction('recall','not-applicable',{\n        registered_clacton_voter:false\n      },'recall');\n\n      ensureEditableState();\n      state.recall.registered_voter = false;\n      state.recall.joined = false;\n      state.completed.recall = false;\n      state.completedDetails.recall = 'Registered Clacton voter: No.';\n      saveLocalState();\n      showStep('actions');\n    }catch(error){\n      console.error(error);\n      banner(error.message,true);\n    }\n  });\n\n  app.querySelectorAll('[data-toggle-field=\"volunteer\"]').forEach(function(button){\n    button.addEventListener('click',function(){\n      togglePressed(button);\n    });\n  });\n\n  app.querySelectorAll('[data-reason-value]').forEach(function(button){\n    button.addEventListener('click',function(){\n      togglePressed(button);\n\n      if(button.id === 'srReasonOtherCheck'){\n        app.querySelector('#srReasonOtherWrap').classList.toggle(\n          'sr-hidden',\n          button.getAttribute('aria-pressed') !== 'true'\n        );\n      }\n    });\n  });\n\n  app.querySelector('#srVolunteerNewsButton').addEventListener('click',function(){\n    const button = app.querySelector('#srVolunteerNewsButton');\n    const selected = button.getAttribute('aria-pressed') === 'true';\n\n    if(selected){\n      button.setAttribute('aria-pressed','false');\n      button.style.borderColor = '';\n      app.querySelector('#srVolunteerNewsButtonText').textContent = 'Tap here if you would also like to receive Stop Reform news and updates.';\n    }else{\n      button.setAttribute('aria-pressed','true');\n      button.style.borderColor = 'var(--teal)';\n      app.querySelector('#srVolunteerNewsButtonText').textContent = 'Selected. You will also receive Stop Reform news and updates.';\n    }\n  });\n\n  app.querySelector('#srVolunteerSubmit').addEventListener('click',async function(){\n    const volunteer = volunteerData();\n    const volunteerError = app.querySelector('#srVolunteerError');\n\n    let hasVolunteerDetail = false;\n\n    Object.keys(volunteer).forEach(function(key){\n      if(key === 'notes'){\n        return;\n      }\n\n      if(volunteer[key] === true){\n        hasVolunteerDetail = true;\n      }\n    });\n\n    if(volunteer.notes){\n      hasVolunteerDetail = true;\n    }\n\n    if(hasVolunteerDetail === false){\n      volunteerError.classList.add('is-visible');\n      volunteerError.scrollIntoView({behavior:'smooth',block:'center'});\n      return;\n    }\n\n    volunteerError.classList.remove('is-visible');\n    state.pendingVolunteer = volunteer;\n    saveLocalState();\n\n    try{\n      if(state.supporterCreated === false){\n        prepareDetails('volunteer');\n        return;\n      }\n\n      await completeVolunteer();\n    }catch(error){\n      console.error(error);\n      banner(error.message,true);\n    }\n  });\n\n  app.querySelector('#srMemberSubmit').addEventListener('click',async function(){\n    try{\n      await saveMemberConsent();\n      markActionComplete('member','Thank you. You are now a member.');\n    }catch(apiError){\n      console.error(apiError);\n      banner(apiError.message,true);\n    }\n  });\n\n  app.querySelectorAll('[data-news-scope]').forEach(function(button){\n    button.addEventListener('click',function(){\n      state.newsletterScope = button.getAttribute('data-news-scope');\n      saveLocalState();\n\n      app.querySelectorAll('[data-news-scope]').forEach(function(other){\n        other.style.borderColor = '';\n      });\n\n      button.style.borderColor = 'var(--teal)';\n    });\n  });\n\n  app.querySelector('#srNewsletterSubmit').addEventListener('click',async function(){\n    try{\n      await saveNewsletterConsent(state.newsletterScope || 'both');\n      markActionComplete('newsletter','Thank you. You are on the list.');\n    }catch(apiError){\n      console.error(apiError);\n      banner(apiError.message,true);\n    }\n  });\n\n  app.querySelector('#srSuggestionSubmit').addEventListener('click',async function(){\n    const text = app.querySelector('#srSuggestion').value.trim();\n    const field = app.querySelector('#srFieldSuggestion');\n    const error = app.querySelector('#srSuggestionError');\n\n    if(text.length < 3){\n      field.classList.add('has-error');\n      error.classList.add('is-visible');\n      return;\n    }\n\n    field.classList.remove('has-error');\n    error.classList.remove('is-visible');\n\n    state.pendingSuggestion = {\n      suggestion_text:text,\n      extra_text:app.querySelector('#srSuggestionExtra').value.trim()\n    };\n    saveLocalState();\n\n    try{\n      if(state.supporterCreated === false){\n        prepareDetails('suggestion');\n        return;\n      }\n\n      await completeSuggestion();\n    }catch(apiError){\n      console.error(apiError);\n      banner(apiError.message,true);\n    }\n  });\n\n  app.querySelector('#srNoMoreActions').addEventListener('click',goToOptionalConsent);\n  app.querySelector('#srMaybeLater').addEventListener('click',goToOptionalConsent);\n  app.querySelector('#srContinueOptional').addEventListener('click',goToOptionalConsent);\n\n  app.querySelector('#srPoliticalContinue').addEventListener('click',async function(){\n    try{\n      const response = await recordConsent(\n        'political_opinions_optional',\n        'granted',\n        POLITICAL_CONSENT_VERSION,\n        POLITICAL_CONSENT_TEXT,\n        'consent',\n        'explicit consent',\n        'optional-consent'\n      );\n\n      state.politicalConsentId = response.consent_id || '';\n      saveLocalState();\n      showStep('optional');\n    }catch(apiError){\n      console.error(apiError);\n      banner(apiError.message,true);\n    }\n  });\n\n  app.querySelector('#srSkipPolitical').addEventListener('click',async function(){\n    try{\n      await recordEvent('optional_political_questions_skipped',{},'optional-consent');\n    }catch(error){}\n\n    showStep('complete');\n  });\n\n  app.querySelector('#srLastVote').addEventListener('change',function(){\n    const value = app.querySelector('#srLastVote').value;\n    const whyWrap = app.querySelector('#srWhyVoteWrap');\n    const sameWrap = app.querySelector('#srSameVoteWrap');\n    const whySameWrap = app.querySelector('#srWhySameWrap');\n    const whyLabel = app.querySelector('#srWhyVoteLabel');\n    const sameLabel = app.querySelector('#srSameVoteLabel');\n\n    whyWrap.classList.add('sr-hidden');\n    sameWrap.classList.add('sr-hidden');\n    whySameWrap.classList.add('sr-hidden');\n\n    if(value === ''){\n      return;\n    }\n\n    if(value === 'prefer-not-to-say'){\n      return;\n    }\n\n    whyWrap.classList.remove('sr-hidden');\n    sameWrap.classList.remove('sr-hidden');\n\n    if(value === 'did-not-vote'){\n      whyLabel.textContent = \"Why didn't you vote?\";\n      sameLabel.textContent = \"Do you think you'll vote at the next general election?\";\n    }else{\n      whyLabel.textContent = 'Why did you vote for them?';\n      sameLabel.textContent = \"Do you think you'll vote the same way next time?\";\n    }\n  });\n\n  app.querySelector('#srSameVote').addEventListener('change',function(){\n    const value = app.querySelector('#srSameVote').value;\n    const wrap = app.querySelector('#srWhySameWrap');\n\n    if(value === ''){\n      wrap.classList.add('sr-hidden');\n      return;\n    }\n\n    if(value === 'prefer-not-to-say'){\n      wrap.classList.add('sr-hidden');\n      return;\n    }\n\n    wrap.classList.remove('sr-hidden');\n  });\n\n  app.querySelector('#srOptionalSubmit').addEventListener('click',async function(){\n    try{\n      await saveOptionalAnswers();\n      showStep('complete');\n    }catch(apiError){\n      console.error(apiError);\n      banner(apiError.message,true);\n    }\n  });\n\n  app.querySelector('#srShareButton').addEventListener('click',async function(){\n    const shareUrl = window.location.origin + window.location.pathname;\n    const shareData = {\n      title:'Stop Reform',\n      text:'How strongly do you want to stop Reform?',\n      url:shareUrl\n    };\n\n    if(navigator.share){\n      try{\n        await navigator.share(shareData);\n        await recordEvent('questionnaire_shared',{method:'native-share'},'complete');\n        return;\n      }catch(error){}\n    }\n\n    try{\n      if(navigator.clipboard){\n        await navigator.clipboard.writeText(shareUrl);\n      }\n    }catch(error){}\n\n    app.querySelector('#srShareFallback').classList.remove('sr-hidden');\n    recordEvent('questionnaire_share_fallback',{url:shareUrl},'complete');\n  });\n\n  function restartQuestionnaire(){\n    clearSession();\n    state = {\n      score:null,\n      sliderTouched:false,\n      supporterCreated:false,\n      supporterId:'',\n      details:{\n        first_name:'',\n        email:'',\n        mobile:'',\n        postcode:''\n      },\n      detailsContext:'',\n      pendingAction:'',\n      completed:{\n        recall:false,\n        volunteer:false,\n        member:false,\n        newsletter:false,\n        suggestion:false\n      },\n      completedDetails:{\n        recall:'',\n        volunteer:'',\n        member:'',\n        newsletter:'',\n        suggestion:''\n      },\n      recall:{\n        registered_voter:null,\n        joined:false\n      },\n      volunteerData:null,\n      suggestionData:{\n        suggestion_text:'',\n        extra_text:''\n      },\n      newsletterScope:'both',\n      politicalConsentId:'',\n      lastCompletedAction:''\n    };\n\n    app.querySelector('#srStrength').value = 5;\n    app.querySelector('#srSliderNumber').textContent = 'Choose';\n    app.querySelector('#srSliderNumber').classList.add('is-empty');\n    app.querySelector('#srSliderMessage').textContent = 'Move the slider and we will respond to the level you choose.';\n    app.querySelector('#srSliderContinue').disabled = true;\n\n    app.querySelectorAll('.sr-toggle').forEach(function(button){\n      button.setAttribute('aria-pressed','false');\n    });\n\n    app.querySelector('#srVolunteerNotes').value = '';\n    app.querySelector('#srSuggestion').value = '';\n    app.querySelector('#srSuggestionExtra').value = '';\n    app.querySelector('#srRecallCurrent').classList.add('sr-hidden');\n    app.querySelector('#srRecallLocal').classList.add('sr-hidden');\n    app.querySelector('#srRecallNotLocal').classList.add('sr-hidden');\n\n    history.replaceState({srStep:'start'},'',stepUrl('start'));\n    showStep('start',{updateUrl:false,instant:true});\n    ensureSession().catch(function(error){\n      console.error(error);\n      banner(error.message,true);\n    });\n  }\n\n  app.querySelector('#srRestartButton').addEventListener('click',restartQuestionnaire);\n  app.querySelector('#srDuplicateRestart').addEventListener('click',restartQuestionnaire);\n\n  async function boot(){\n    loadLocalState();\n    ensureEditableState();\n    installBackButtons();\n\n    if(state.sliderTouched === true){\n      app.querySelector('#srStrength').value = state.score || 5;\n      app.querySelector('#srSliderNumber').textContent = state.score || 5;\n      app.querySelector('#srSliderNumber').classList.remove('is-empty');\n      app.querySelector('#srSliderMessage').textContent = scoreMessage(state.score || 5);\n      app.querySelector('#srSliderContinue').disabled = false;\n    }\n\n    fillDetailsFromState();\n    renderActions();\n\n    try{\n      await ensureSession();\n    }catch(error){\n      console.error(error);\n      banner('The form could not connect to the Stop Reform database. Please check the plugin REST API.',true);\n    }\n\n    let requested = stepFromUrl();\n\n    if(!stepAllowed(requested)){\n      requested = 'start';\n    }\n\n    if(requested !== 'start'){\n      if(state.sliderTouched === false){\n        requested = 'start';\n      }\n    }\n\n    history.replaceState({srStep:requested},'',stepUrl(requested));\n    showStep(requested,{updateUrl:false,instant:true});\n\n    recordEvent('questionnaire_loaded',{\n      restored_step:requested\n    },requested);\n  }\n\n  window.StopReformQuestionnaire = window.StopReformQuestionnaire || {};\n  window.StopReformQuestionnaire.setRecallTeamCount = setRecallTeamCount;\n\n  boot();\n})();\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>STOPREFORM How strongly do you want to stop Reform? Choose a number from 1 to 10. We will use your answer to suggest the most useful ways you can help. 1. Drag the slider &nbsp; 2. Choose your number &nbsp; 3. Press Continue Choose 1I&#8217;m concerned 5I want change 10I really want to help Move&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"default","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":true,"_kad_post_footer":true,"_kad_post_classname":"","footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/stopreform.org.uk\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stopreform.org.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stopreform.org.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stopreform.org.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stopreform.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":23,"href":"https:\/\/stopreform.org.uk\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":42,"href":"https:\/\/stopreform.org.uk\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/42"}],"wp:attachment":[{"href":"https:\/\/stopreform.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}