(function () {
  "use strict";

  const shared = {
    ID: "FE-BT-21",
    VARIATION: "1",
    CLIENT: "bonterra",
  };

  const { ID, VARIATION } = shared;

  const setup = () => {
    document.documentElement.classList.add(ID);
    document.documentElement.classList.add(`${ID}-${VARIATION}`);
  };

  const icons = {
    singleDonor: `
        <svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M53.5961 51.4496C48.8226 43.6994 40.5103 38.5689 31.0549 38.5689C21.5994 38.5689 13.2872 43.6994 8.51367 51.4496C11.8009 54.6697 20.9113 61.1101 31.0549 61.1101C41.1984 61.1101 50.3088 54.6697 53.5961 51.4496Z" fill="#8A61B6"/>
          <circle cx="31.0549" cy="31.0549" r="30.0549" stroke="#381360" stroke-miterlimit="10"/>
          <circle cx="31.0548" cy="21.0365" r="10.0183" stroke="#381360" stroke-miterlimit="10"/>
        </svg>
    
        `,
    doubleDonors: `
      <svg width="81" height="66" viewBox="0 0 81 66" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="65.6913" cy="37.8497" r="7.51095" stroke="#381360" stroke-miterlimit="10"/>
        <circle cx="14.4197" cy="37.8497" r="7.51095" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M65.6913 49.0674C57.7275 49.0674 51.2716 56.2406 51.2716 65.0893H80.111C80.111 56.2406 73.6551 49.0674 65.6913 49.0674Z" fill="#8A61B6"/>
        <path d="M14.4197 49.0674C6.45592 49.0674 0 56.2406 0 65.0893H28.8394C28.8394 56.2406 22.3835 49.0674 14.4197 49.0674Z" fill="#8A61B6"/>
        <path d="M67.2919 26.6352C67.2919 12.4774 55.0974 1.0002 40.0547 1.0002C25.012 1.0002 12.8175 12.4774 12.8175 26.6352" stroke="#381360" stroke-miterlimit="10"/>
      </svg>
      `,
    tripleDonors: `
      <svg width="81" height="82" viewBox="0 0 81 82" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="40.0532" cy="53.8738" r="7.51095" stroke="#381360" stroke-miterlimit="10"/>
        <circle cx="65.6916" cy="37.8496" r="7.51095" stroke="#381360" stroke-miterlimit="10"/>
        <circle cx="14.4197" cy="37.8496" r="7.51095" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M53.9658 80.6102H26.1405C26.3777 72.2217 32.562 65.5883 40.0532 65.5883C47.5443 65.5883 53.7286 72.2217 53.9658 80.6102Z" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M65.6912 49.0672C57.7274 49.0672 51.2715 56.2404 51.2715 65.0891H80.1109C80.1109 56.2404 73.655 49.0672 65.6912 49.0672Z" fill="#8A61B6"/>
        <path d="M14.4197 49.0672C6.45592 49.0672 0 56.2405 0 65.0891H28.8394C28.8394 56.2405 22.3835 49.0672 14.4197 49.0672Z" fill="#8A61B6"/>
        <path d="M67.2919 26.635C67.2919 12.4772 55.0974 1 40.0547 1C25.012 1 12.8175 12.4772 12.8175 26.635" stroke="#381360" stroke-miterlimit="10"/>
      </svg>
      `,
    fourDonors: `
      <svg width="84" height="80" viewBox="0 0 84 80" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="23.9156" cy="7.41358" r="6.91358" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M23.9147 17.7947C16.5448 17.7947 10.5703 24.433 10.5703 32.6218H37.2592C37.2592 24.433 31.2847 17.7947 23.9147 17.7947Z" fill="#8A61B6"/>
        <circle cx="59.0826" cy="7.41358" r="6.91358" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M59.0817 17.7947C51.7118 17.7947 45.7373 24.433 45.7373 32.6218H72.4262C72.4262 24.433 66.4517 17.7947 59.0817 17.7947Z" fill="#8A61B6"/>
        <circle cx="23.9156" cy="46.2817" r="6.91358" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M23.9147 56.6628C16.5448 56.6628 10.5703 63.3012 10.5703 71.49H37.2592C37.2592 63.3012 31.2847 56.6628 23.9147 56.6628Z" fill="#8A61B6"/>
        <circle cx="59.0826" cy="46.2817" r="6.91358" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M59.0817 56.6628C51.7118 56.6628 45.7373 63.3012 45.7373 71.49H72.4262C72.4262 63.3012 66.4517 56.6628 59.0817 56.6628Z" fill="#8A61B6"/>
        <path d="M0 79.0002H83.4507" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M0.556335 62.3101L0.556335 79.0002" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M82.8944 62.3101L82.8944 79.0002" stroke="#381360" stroke-miterlimit="10"/>
      </svg>
      `,
    fiveDonors: `
      <svg width="89" height="80" viewBox="0 0 89 80" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="19.3453" cy="7.41358" r="6.91358" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M19.3444 17.7947C11.9745 17.7947 6 24.433 6 32.6218H32.6889C32.6889 24.433 26.7144 17.7947 19.3444 17.7947Z" fill="#8A61B6"/>
        <circle cx="44.3453" cy="7.41358" r="6.91358" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M44.3444 17.7947C36.9745 17.7947 31 24.433 31 32.6218H57.6889C57.6889 24.433 51.7144 17.7947 44.3444 17.7947Z" fill="#8A61B6"/>
        <circle cx="69.3453" cy="7.41358" r="6.91358" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M69.3444 17.7947C61.9745 17.7947 56 24.433 56 32.6218H82.6889C82.6889 24.433 76.7144 17.7947 69.3444 17.7947Z" fill="#8A61B6"/>
        <circle cx="69.3453" cy="46.4136" r="6.91358" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M69.3444 56.7947C61.9745 56.7947 56 63.433 56 71.6218H82.6889C82.6889 63.433 76.7144 56.7947 69.3444 56.7947Z" fill="#8A61B6"/>
        <circle cx="19.3453" cy="46.2817" r="6.91358" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M19.3444 56.6628C11.9745 56.6628 6 63.3012 6 71.49H32.6889C32.6889 63.3012 26.7144 56.6628 19.3444 56.6628Z" fill="#8A61B6"/>
        <circle cx="44.3453" cy="46.2817" r="6.91358" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M44.3444 56.6628C36.9745 56.6628 31 63.3012 31 71.49H57.6889C57.6889 63.3012 51.7144 56.6628 44.3444 56.6628Z" fill="#8A61B6"/>
        <path d="M0 79.0002H88.5" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M0.556335 62.3101L0.556335 79.0002" stroke="#381360" stroke-miterlimit="10"/>
        <path d="M88 62.3101L88 79.0002" stroke="#381360" stroke-miterlimit="10"/>
      </svg>
      `,
    singleDollarSign: `
      <svg width="93" height="93" viewBox="0 0 93 93" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M66.975 32.85C68.1836 32.85 69.25 33.9164 69.25 35.125V57.875C69.25 59.1547 68.1836 60.15 66.975 60.15H26.025C24.7453 60.15 23.75 59.1547 23.75 57.875V35.125C23.75 33.9164 24.7453 32.85 26.025 32.85H66.975ZM27.1625 56.7375H31.7125C31.7125 54.2492 29.6508 52.1875 27.1625 52.1875V56.7375ZM27.1625 40.8125C29.6508 40.8125 31.7125 38.8219 31.7125 36.2625H27.1625V40.8125ZM46.5 53.325C49.6281 53.325 52.1875 50.3391 52.1875 46.5C52.1875 42.732 49.6281 39.675 46.5 39.675C43.3008 39.675 40.8125 42.732 40.8125 46.5C40.8125 50.3391 43.3008 53.325 46.5 53.325ZM65.8375 56.7375V52.1875C63.2781 52.1875 61.2875 54.2492 61.2875 56.7375H65.8375ZM65.8375 40.8125V36.2625H61.2875C61.2875 38.8219 63.2781 40.8125 65.8375 40.8125Z" fill="#8A61B6"/>
        <path d="M46.8535 73.4464C46.6583 73.2512 46.3417 73.2512 46.1464 73.4464L42.9644 76.6284C42.7692 76.8237 42.7692 77.1403 42.9644 77.3355C43.1597 77.5308 43.4763 77.5308 43.6716 77.3355L46.5 74.5071L49.3284 77.3355C49.5237 77.5308 49.8403 77.5308 50.0355 77.3355C50.2308 77.1403 50.2308 76.8237 50.0355 76.6284L46.8535 73.4464ZM92.5 48.775C92.5 48.4989 92.2761 48.275 92 48.275C91.7238 48.275 91.5 48.4989 91.5 48.775L92.5 48.775ZM88.4 91.5L50.1 91.5L50.1 92.5L88.4 92.5L88.4 91.5ZM47 88.4L47 73.8L46 73.8L46 88.4L47 88.4ZM92.5 88.4L92.5 48.775L91.5 48.775L91.5 88.4L92.5 88.4ZM50.1 91.5C48.3879 91.5 47 90.1121 47 88.4L46 88.4C46 90.6644 47.8356 92.5 50.1 92.5L50.1 91.5ZM88.4 92.5C90.6643 92.5 92.5 90.6644 92.5 88.4L91.5 88.4C91.5 90.1121 90.1121 91.5 88.4 91.5L88.4 92.5Z" fill="#381360"/>
        <path d="M46.1464 19.5536C46.3417 19.7488 46.6583 19.7488 46.8536 19.5536L50.0355 16.3716C50.2308 16.1763 50.2308 15.8597 50.0355 15.6645C49.8403 15.4692 49.5237 15.4692 49.3284 15.6645L46.5 18.4929L43.6716 15.6645C43.4763 15.4692 43.1597 15.4692 42.9645 15.6645C42.7692 15.8597 42.7692 16.1763 42.9645 16.3716L46.1464 19.5536ZM0.500004 44.225C0.500004 44.5011 0.723861 44.725 1 44.725C1.27615 44.725 1.5 44.5011 1.5 44.225L0.500004 44.225ZM4.6 1.5L42.9 1.5V0.5L4.6 0.5V1.5ZM46 4.6V19.2H47V4.6H46ZM0.5 4.6L0.500004 44.225L1.5 44.225L1.5 4.6L0.5 4.6ZM42.9 1.5C44.6121 1.5 46 2.88792 46 4.6H47C47 2.33563 45.1644 0.5 42.9 0.5V1.5ZM4.6 0.5C2.33563 0.5 0.5 2.33563 0.5 4.6L1.5 4.6C1.5 2.88792 2.88792 1.5 4.6 1.5V0.5Z" fill="#381360"/>
        <path d="M1 64.7V88.4C1 90.3882 2.61178 92 4.6 92H28.3" stroke="#7583FF" stroke-linecap="round" stroke-dasharray="0.6 2.4"/>
        <path d="M92 28.3L92 4.60001C92 2.61178 90.3882 1 88.4 1.00001L64.7 1.00001" stroke="#7583FF" stroke-linecap="round" stroke-dasharray="0.6 2.4"/>
      </svg>
      `,
    doubleDollarSign: `
      <svg width="93" height="93" viewBox="0 0 93 93" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M46.8536 73.4464C46.6583 73.2512 46.3417 73.2512 46.1465 73.4464L42.9645 76.6284C42.7692 76.8237 42.7692 77.1403 42.9645 77.3355C43.1597 77.5308 43.4763 77.5308 43.6716 77.3355L46.5 74.5071L49.3284 77.3355C49.5237 77.5308 49.8403 77.5308 50.0355 77.3355C50.2308 77.1403 50.2308 76.8237 50.0355 76.6284L46.8536 73.4464ZM92.5 48.775C92.5 48.4989 92.2761 48.275 92 48.275C91.7239 48.275 91.5 48.4989 91.5 48.775L92.5 48.775ZM88.4 91.5L50.1 91.5L50.1 92.5L88.4 92.5L88.4 91.5ZM47 88.4L47 73.8L46 73.8L46 88.4L47 88.4ZM92.5 88.4L92.5 48.775L91.5 48.775L91.5 88.4L92.5 88.4ZM50.1 91.5C48.3879 91.5 47 90.1121 47 88.4L46 88.4C46 90.6644 47.8356 92.5 50.1 92.5L50.1 91.5ZM88.4 92.5C90.6644 92.5 92.5 90.6644 92.5 88.4L91.5 88.4C91.5 90.1121 90.1121 91.5 88.4 91.5L88.4 92.5Z" fill="#381360"/>
        <path d="M46.1464 19.5536C46.3417 19.7488 46.6583 19.7488 46.8536 19.5536L50.0355 16.3716C50.2308 16.1763 50.2308 15.8597 50.0355 15.6645C49.8403 15.4692 49.5237 15.4692 49.3284 15.6645L46.5 18.4929L43.6716 15.6645C43.4763 15.4692 43.1597 15.4692 42.9645 15.6645C42.7692 15.8597 42.7692 16.1763 42.9645 16.3716L46.1464 19.5536ZM0.500004 44.225C0.500004 44.5011 0.723861 44.725 1 44.725C1.27615 44.725 1.5 44.5011 1.5 44.225L0.500004 44.225ZM4.6 1.5L42.9 1.5V0.5L4.6 0.5V1.5ZM46 4.6V19.2H47V4.6H46ZM0.5 4.6L0.500004 44.225L1.5 44.225L1.5 4.6L0.5 4.6ZM42.9 1.5C44.6121 1.5 46 2.88792 46 4.6H47C47 2.33563 45.1644 0.5 42.9 0.5V1.5ZM4.6 0.5C2.33563 0.5 0.5 2.33563 0.5 4.6L1.5 4.6C1.5 2.88792 2.88792 1.5 4.6 1.5V0.5Z" fill="#381360"/>
        <path d="M1 64.7V88.4C1 90.3882 2.61178 92 4.6 92H28.3" stroke="#7583FF" stroke-linecap="round" stroke-dasharray="0.6 2.4"/>
        <path d="M92 28.3L92 4.60001C92 2.61178 90.3882 1 88.4 1.00001L64.7 1.00001" stroke="#7583FF" stroke-linecap="round" stroke-dasharray="0.6 2.4"/>
        <path d="M44.3 26C45.2031 26 46 26.7813 46 27.6667V44.3333C46 45.2708 45.2031 46 44.3 46H13.7C12.7438 46 12 45.2708 12 44.3333V27.6667C12 26.7813 12.7438 26 13.7 26H44.3ZM14.55 43.5H17.95C17.95 41.6771 16.4094 40.1667 14.55 40.1667V43.5ZM14.55 31.8333C16.4094 31.8333 17.95 30.375 17.95 28.5H14.55V31.8333ZM29 41C31.3375 41 33.25 38.8125 33.25 36C33.25 33.2396 31.3375 31 29 31C26.6094 31 24.75 33.2396 24.75 36C24.75 38.8125 26.6094 41 29 41ZM43.45 43.5V40.1667C41.5375 40.1667 40.05 41.6771 40.05 43.5H43.45ZM43.45 31.8333V28.5H40.05C40.05 30.375 41.5375 31.8333 43.45 31.8333Z" fill="#8A61B6"/>
        <path d="M80.3 48C81.2031 48 82 48.7813 82 49.6667V66.3333C82 67.2708 81.2031 68 80.3 68H49.7C48.7438 68 48 67.2708 48 66.3333V49.6667C48 48.7813 48.7438 48 49.7 48H80.3ZM50.55 65.5H53.95C53.95 63.6771 52.4094 62.1667 50.55 62.1667V65.5ZM50.55 53.8333C52.4094 53.8333 53.95 52.375 53.95 50.5H50.55V53.8333ZM65 63C67.3375 63 69.25 60.8125 69.25 58C69.25 55.2396 67.3375 53 65 53C62.6094 53 60.75 55.2396 60.75 58C60.75 60.8125 62.6094 63 65 63ZM79.45 65.5V62.1667C77.5375 62.1667 76.05 63.6771 76.05 65.5H79.45ZM79.45 53.8333V50.5H76.05C76.05 52.375 77.5375 53.8333 79.45 53.8333Z" fill="#8A61B6"/>
      </svg>
      `,
    tripleDollarSign: `
      <svg width="93" height="93" viewBox="0 0 93 93" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M46.8536 73.4464C46.6583 73.2512 46.3417 73.2512 46.1465 73.4464L42.9645 76.6284C42.7692 76.8237 42.7692 77.1403 42.9645 77.3355C43.1597 77.5308 43.4763 77.5308 43.6716 77.3355L46.5 74.5071L49.3284 77.3355C49.5237 77.5308 49.8403 77.5308 50.0355 77.3355C50.2308 77.1403 50.2308 76.8237 50.0355 76.6284L46.8536 73.4464ZM92.5 48.775C92.5 48.4989 92.2761 48.275 92 48.275C91.7239 48.275 91.5 48.4989 91.5 48.775L92.5 48.775ZM88.4 91.5L50.1 91.5L50.1 92.5L88.4 92.5L88.4 91.5ZM47 88.4L47 73.8L46 73.8L46 88.4L47 88.4ZM92.5 88.4L92.5 48.775L91.5 48.775L91.5 88.4L92.5 88.4ZM50.1 91.5C48.3879 91.5 47 90.1121 47 88.4L46 88.4C46 90.6644 47.8356 92.5 50.1 92.5L50.1 91.5ZM88.4 92.5C90.6644 92.5 92.5 90.6644 92.5 88.4L91.5 88.4C91.5 90.1121 90.1121 91.5 88.4 91.5L88.4 92.5Z" fill="#381360"/>
        <path d="M46.1464 19.5536C46.3417 19.7488 46.6583 19.7488 46.8536 19.5536L50.0355 16.3716C50.2308 16.1763 50.2308 15.8597 50.0355 15.6645C49.8403 15.4692 49.5237 15.4692 49.3284 15.6645L46.5 18.4929L43.6716 15.6645C43.4763 15.4692 43.1597 15.4692 42.9645 15.6645C42.7692 15.8597 42.7692 16.1763 42.9645 16.3716L46.1464 19.5536ZM0.500004 44.225C0.500004 44.5011 0.723861 44.725 1 44.725C1.27615 44.725 1.5 44.5011 1.5 44.225L0.500004 44.225ZM4.6 1.5L42.9 1.5V0.5L4.6 0.5V1.5ZM46 4.6V19.2H47V4.6H46ZM0.5 4.6L0.500004 44.225L1.5 44.225L1.5 4.6L0.5 4.6ZM42.9 1.5C44.6121 1.5 46 2.88792 46 4.6H47C47 2.33563 45.1644 0.5 42.9 0.5V1.5ZM4.6 0.5C2.33563 0.5 0.5 2.33563 0.5 4.6L1.5 4.6C1.5 2.88792 2.88792 1.5 4.6 1.5V0.5Z" fill="#381360"/>
        <path d="M1 64.7V88.4C1 90.3882 2.61178 92 4.6 92H28.3" stroke="#7583FF" stroke-linecap="round" stroke-dasharray="0.6 2.4"/>
        <path d="M92 28.3L92 4.60001C92 2.61178 90.3882 1 88.4 1.00001L64.7 1.00001" stroke="#7583FF" stroke-linecap="round" stroke-dasharray="0.6 2.4"/>
        <path d="M42.4 49C43.25 49 44 49.7813 44 50.6667V67.3333C44 68.2708 43.25 69 42.4 69H13.6C12.7 69 12 68.2708 12 67.3333V50.6667C12 49.7813 12.7 49 13.6 49H42.4ZM14.4 66.5H17.6C17.6 64.6771 16.15 63.1667 14.4 63.1667V66.5ZM14.4 54.8333C16.15 54.8333 17.6 53.375 17.6 51.5H14.4V54.8333ZM28 64C30.2 64 32 61.8125 32 59C32 56.2396 30.2 54 28 54C25.75 54 24 56.2396 24 59C24 61.8125 25.75 64 28 64ZM41.6 66.5V63.1667C39.8 63.1667 38.4 64.6771 38.4 66.5H41.6ZM41.6 54.8333V51.5H38.4C38.4 53.375 39.8 54.8333 41.6 54.8333Z" fill="#8A61B6"/>
        <path d="M42.4 24C43.25 24 44 24.7422 44 25.5833V41.4167C44 42.3073 43.25 43 42.4 43H13.6C12.7 43 12 42.3073 12 41.4167V25.5833C12 24.7422 12.7 24 13.6 24H42.4ZM14.4 40.625H17.6C17.6 38.8932 16.15 37.4583 14.4 37.4583V40.625ZM14.4 29.5417C16.15 29.5417 17.6 28.1562 17.6 26.375H14.4V29.5417ZM28 38.25C30.2 38.25 32 36.1719 32 33.5C32 30.8776 30.2 28.75 28 28.75C25.75 28.75 24 30.8776 24 33.5C24 36.1719 25.75 38.25 28 38.25ZM41.6 40.625V37.4583C39.8 37.4583 38.4 38.8932 38.4 40.625H41.6ZM41.6 29.5417V26.375H38.4C38.4 28.1562 39.8 29.5417 41.6 29.5417Z" fill="#8A61B6"/>
        <path d="M80.4 49C81.25 49 82 49.7813 82 50.6667V67.3333C82 68.2708 81.25 69 80.4 69H51.6C50.7 69 50 68.2708 50 67.3333V50.6667C50 49.7813 50.7 49 51.6 49H80.4ZM52.4 66.5H55.6C55.6 64.6771 54.15 63.1667 52.4 63.1667V66.5ZM52.4 54.8333C54.15 54.8333 55.6 53.375 55.6 51.5H52.4V54.8333ZM66 64C68.2 64 70 61.8125 70 59C70 56.2396 68.2 54 66 54C63.75 54 62 56.2396 62 59C62 61.8125 63.75 64 66 64ZM79.6 66.5V63.1667C77.8 63.1667 76.4 64.6771 76.4 66.5H79.6ZM79.6 54.8333V51.5H76.4C76.4 53.375 77.8 54.8333 79.6 54.8333Z" fill="#8A61B6"/>
        <path d="M80.4 24C81.25 24 82 24.7422 82 25.5833V41.4167C82 42.3073 81.25 43 80.4 43H51.6C50.7 43 50 42.3073 50 41.4167V25.5833C50 24.7422 50.7 24 51.6 24H80.4ZM52.4 40.625H55.6C55.6 38.8932 54.15 37.4583 52.4 37.4583V40.625ZM52.4 29.5417C54.15 29.5417 55.6 28.1562 55.6 26.375H52.4V29.5417ZM66 38.25C68.2 38.25 70 36.1719 70 33.5C70 30.8776 68.2 28.75 66 28.75C63.75 28.75 62 30.8776 62 33.5C62 36.1719 63.75 38.25 66 38.25ZM79.6 40.625V37.4583C77.8 37.4583 76.4 38.8932 76.4 40.625H79.6ZM79.6 29.5417V26.375H76.4C76.4 28.1562 77.8 29.5417 79.6 29.5417Z" fill="#8A61B6"/>
      </svg>
      `,
    emailIcon: `
      <svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="icon-email" transform="translate(0.5 0.5)">
          <path id="Path" d="M6.625 0L0 6.6L0 44L53 44L53 6.6L46.375 0" fill="none" stroke-width="1" stroke="#381360" transform="translate(0 9)" />
          <path id="Path" d="M0 0L12.974 9L26.5 18L53 1.05882" fill="none" stroke-width="1" stroke="#381360" transform="translate(0 16)" />
          <path id="Shape" d="M0 0L39 0L39 21.4516L19.5 35L0 20.3226L0 0ZM19.7026 4.51613C25.1864 4.51613 28.4375 8.47851 28.4375 12.4939L28.4375 12.4968C28.4167 14.6291 27.8781 16.1685 27.0402 17.1793C26.2004 18.1927 25.0805 18.649 23.9549 18.649C23.1697 18.649 22.5099 18.4691 22.0287 18.1038C21.7011 17.8552 21.4678 17.5289 21.3354 17.1409C20.6 18.0692 19.549 18.649 18.2446 18.649C17.2642 18.649 16.4279 18.2763 15.8396 17.5815C15.2544 16.8902 14.9366 15.9067 14.9366 14.7215C14.9366 11.7096 16.788 8.97143 19.6215 8.97143C20.6732 8.97143 21.6097 9.39967 22.1591 10.1169L22.3097 9.21444L24.2379 9.21444L23.2076 15.2247C23.1324 15.6013 23.1322 15.8229 23.1322 15.9341L23.1322 15.9366C23.1322 16.3664 23.2262 16.5951 23.3632 16.7258C23.506 16.8619 23.756 16.9505 24.198 16.9505C25.1396 16.9505 26.5191 15.8446 26.5594 12.4922C26.5586 9.41803 24.2192 6.33746 19.705 6.37673L19.7026 6.37673C17.6397 6.37673 15.8162 7.12277 14.5152 8.43861C13.2156 9.7529 12.4212 11.6514 12.4409 13.99C12.4606 16.2382 13.1593 18.0758 14.3955 19.3509C15.6316 20.6258 17.4315 21.3651 19.7026 21.3651C22.0107 21.3651 23.6912 20.6475 24.5091 19.532L24.5904 19.4211L27.032 19.4211L26.7772 19.8515C25.5359 21.9493 22.9567 23.1445 19.7037 23.1449C16.9509 23.1653 14.6618 22.2431 13.0596 20.6195C11.4571 18.9959 10.563 16.6924 10.5628 13.9936C10.5216 8.31591 14.586 4.55772 19.7026 4.51613ZM17.6009 11.9137C17.0727 12.6498 16.7741 13.6421 16.7741 14.6405C16.7741 15.4193 16.9825 15.9959 17.2995 16.3736C17.6139 16.7484 18.054 16.9505 18.5688 16.9505C19.5228 16.9505 20.2869 16.468 20.8212 15.7134C21.3592 14.9535 21.6591 13.9208 21.6591 12.8584C21.6591 12.1169 21.4695 11.587 21.1605 11.2442C20.8537 10.9038 20.3959 10.7105 19.7836 10.7105C18.8712 10.7105 18.1263 11.1818 17.6009 11.9137Z" fill="#8A61B6" fill-rule="evenodd" transform="translate(7 0)" />
          <path id="Path" d="M39 0L0 0L0 20.3226L19.5 35L39 21.4516L39 0Z" fill="none" stroke-width="1" stroke="#381360" transform="translate(7 0)" />
        </g>
      </svg>
      `,
    likeIcon: `
      <svg width="64" height="64.5" viewBox="0 0 64 64.5" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="icon-volunteer" transform="translate(0.5 0)">
          <path id="Shape" d="M42.9497 23.8379L19.4296 0L0 3.89181L2.04522 15.5675L9.20348 13.6215L31.7008 36L60.1574 25.0715C61.3504 24.585 63.8421 22.8134 62.7139 20.2065C61.5258 17.4614 58.6233 17.774 57.0895 18.2605L42.9497 23.8379ZM42.9497 23.8379L35.7913 26.7568L25.5651 17.0271" fill="none" stroke-width="1" stroke="#381360" transform="translate(0 28)" />
          <path id="Path" d="M26.1846 1.84407C29.7492 5.09582 29.919 10.8767 26.7504 14.3693L15.7731 26.4128C15.0942 27.1957 13.9058 27.1957 13.2269 26.4128L2.24963 14.3693C-0.919014 10.8767 -0.749233 5.09582 2.81539 1.84407C5.92761 -0.986152 10.5673 -0.444208 13.3967 2.68712L14.5282 3.89148L15.6033 2.68712C18.4891 -0.444208 23.0724 -0.986152 26.1846 1.84407Z" fill="#8A61B6" transform="translate(31 11)" />
          <path id="Path" d="M14.4467 0.956186C16.4134 2.64228 16.507 5.63979 14.759 7.45078L8.70245 13.6956C8.3278 14.1015 7.67223 14.1015 7.29759 13.6956L1.2412 7.45078C-0.507048 5.63979 -0.413394 2.64228 1.55338 0.956186C3.2704 -0.511342 5.83033 -0.230326 7.39124 1.39332L8.01562 2.0178L8.60879 1.39332C10.2009 -0.230326 12.7296 -0.511342 14.4467 0.956186Z" fill="#8A61B6" transform="translate(10 0)" />
        </g>
      </svg>
      `,
    calenderIcon: `
      <svg width="66" height="65" viewBox="0 0 66 65" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="icon-calendar" transform="translate(0 0.5)">
          <path id="Path" d="M0 5.6C0 2.5072 2.46244 0 5.5 0L60.5 0C63.5377 0 66 2.5072 66 5.6L66 14L0 14L0 5.6Z" fill="#8A61B6" transform="translate(0 2)" />
          <path id="Shape" d="M30 0L30 8M0 0L0 8" fill="none" stroke-width="1" stroke="#381360" transform="translate(16.636 0)" />
          <rect id="Rectangle" width="62" height="44" fill="none" stroke-width="1" stroke="#381360" transform="translate(2 20)" />
          <rect id="Rectangle" width="8" height="8" fill="#8A61B6" transform="translate(9 27)" />
          <rect id="Rectangle" width="8" height="8" fill="#8A61B6" transform="translate(9 41)" />
          <rect id="Rectangle" width="8" height="8" fill="#8A61B6" transform="translate(22 27)" />
          <rect id="Rectangle" width="8" height="8" fill="#8A61B6" transform="translate(22 41)" />
          <rect id="Rectangle" width="8" height="8" fill="#8A61B6" transform="translate(36 27)" />
          <rect id="Rectangle" width="8" height="8" fill="#8A61B6" transform="translate(36 41)" />
          <rect id="Rectangle" width="8" height="8" fill="#8A61B6" transform="translate(49 27)" />
        </g>
      </svg>
      `,
    campaignIcon: `
      <svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="icon-community" transform="translate(0 0.5)">
          <path id="Oval" d="M4.5 9C6.98528 9 9 6.98528 9 4.5C9 2.01472 6.98528 0 4.5 0C2.01472 0 0 2.01472 0 4.5C0 6.98528 2.01472 9 4.5 9Z" fill="none" stroke-width="1" stroke="#381360" transform="translate(22 31)" />
          <path id="Oval" d="M4.5 9C6.98528 9 9 6.98528 9 4.5C9 2.01472 6.98528 0 4.5 0C2.01472 0 0 2.01472 0 4.5C0 6.98528 2.01472 9 4.5 9Z" fill="none" stroke-width="1" stroke="#381360" transform="translate(40 21)" />
          <path id="Oval" d="M4.5 9C6.98528 9 9 6.98528 9 4.5C9 2.01472 6.98528 0 4.5 0C2.01472 0 0 2.01472 0 4.5C0 6.98528 2.01472 9 4.5 9Z" fill="none" stroke-width="1" stroke="#381360" transform="translate(5 21)" />
          <path id="Path" d="M17 9L0 9C0.497248 3.84039 4.20517 0 8.50006 0C12.7949 0 16.5027 3.84039 17 9Z" fill="none" stroke-width="1" stroke="#381360" transform="translate(18 44)" />
          <path id="Path" d="M9.5 0C4.25323 0 0 4.47708 0 10L19 10C19 4.47708 14.7468 0 9.5 0Z" fill="#8A61B6" transform="translate(35 33)" />
          <path id="Path" d="M9.5 0C4.25329 0 0 4.47708 0 10L19 10C19 4.47708 14.7467 0 9.5 0Z" fill="#8A61B6" transform="translate(0 33)" />
          <path id="Path" d="M37 17C37 7.61115 28.7172 0 18.5 0C8.28271 0 0 7.61115 0 17" fill="none" stroke-width="1" stroke="#381360" transform="translate(9 0)" />
        </g>
      </svg>
      `,
    volunteerIcon: `
      <svg width="57" height="57" viewBox="0 0 57 57" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="icon-profile" transform="translate(0.5 0.5)">
          <path id="Path" d="M42 12.0001C37.5529 4.77983 29.809 0 21 0C12.191 0 4.44712 4.77983 0 12.0001C3.0625 15.0001 11.55 21 21 21C30.45 21 38.9375 15.0001 42 12.0001Z" fill="#8A61B6" transform="translate(7 35)" />
          <path id="Oval" d="M28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28C0 43.464 12.536 56 28 56Z" fill="none" stroke-width="1" stroke="#381360" />
          <path id="Oval" d="M9.5 19C14.7467 19 19 14.7467 19 9.5C19 4.25329 14.7467 0 9.5 0C4.2533 0 0 4.25329 0 9.5C0 14.7467 4.2533 19 9.5 19Z" fill="none" stroke-width="1" stroke="#381360" transform="translate(19 9)" />
        </g>
      </svg>
      `,
  };

  const multiStepForm = (id) => {
    const { singleDonor, doubleDonors, tripleDonors, fourDonors, fiveDonors, singleDollarSign, doubleDollarSign, tripleDollarSign, emailIcon, likeIcon, calenderIcon, campaignIcon, volunteerIcon } =
      icons;
    const htmlStr = `
        <div class="${id}__take-the-quiz-btn">Take the quiz</div>
      <div class="${id}__multistep-form ${id}-hide-multistep-form" id="multiStepForm">
          <!-- Step 1 -->
          <div class="step active" id="step1">
              <p class="form-subtitle">How many donors does your organization&nbsp;manage?</p>
              <div class="${id}__options-container">
              <div class="${id}__option">
                  <input type="radio" id="fewer" name="donors" value="essentials" data-donorsize="fewer">
                  <label for="fewer">
                      <div class="icon">${singleDonor}</div>
                      <p>0-1,000</p>
                  </label>
              </div>
              <div class="${id}__option">
                  <input type="radio" id="small" name="donors" value="essentials" data-donorsize="small">
                  <label for="small">
                      <div class="icon">${doubleDonors}</div>
                      <p>1,001-5,000</p>
                  </label>
              </div>
              <div class="${id}__option">
                  <input type="radio" id="medium" name="donors" value="pro" data-donorsize="medium">
                  <label for="medium">
                      <div class="icon">${tripleDonors}</div>
                      <p>5,001-50,000</p>
                  </label>
              </div>
              <div class="${id}__option">
                  <input type="radio" id="enterprise" name="donors" value="enterprise" data-donorsize="enterprise">
                  <label for="enterprise">
                      <div class="icon">${fourDonors}</div>
                      <p>50,001-250,000</p>
                  </label>
              </div>
               <div class="${id}__option">
                  <input type="radio" id="strategic" name="donors" value="enterprise" data-donorsize="strategic">
                  <label for="strategic">
                      <div class="icon">${fiveDonors}</div>
                      <p>250,000 or more</p>
                  </label>
              </div>
              </div>
              <button type="button" class="btn bt-solid-indigo hero--button ${id}__next-step" disabled>Next step</button>
          </div>
  
          <!-- Step 2 -->
          <div class="step ${id}__hide" id="step2">
              <p class="form-subtitle">What is your organization's annual fundraising&nbsp;revenue?</p>
              <div class="${id}__options-container">
              <div class="${id}__option">
                  <input type="radio" id="less" name="revenue" value="essentials" data-priority="high">
                  <label for="less">
                      <div class="icon">${singleDollarSign}</div>
                      <p>Less than $100,000</p>
                  </label>
              </div>
              <div class="${id}__option">
                  <input type="radio" id="between-revenue" name="revenue" value="pro" data-priority="mid">
                  <label for="between-revenue">
                      <div class="icon">${doubleDollarSign}</div>
                      <p>$100,000 to $5 million</p>
                  </label>
              </div>
              <div class="${id}__option">
                  <input type="radio" id="more-revenue" name="revenue" value="enterprise" data-priority="low">
                  <label for="more-revenue">
                      <div class="icon">${tripleDollarSign}</div>
                      <p>More than $5 million</p>
                  </label>
              </div>
              </div>
              <button type="button" class="btn bt-outline ${id}__prev-step">Back</button>
              <button type="button" class="btn bt-solid-indigo hero--button ${id}__next-step">Next step</button>
          </div>
  
          <!-- Step 3 -->
          <div class="step ${id}__hide" id="step3">
              <p class="form-subtitle">What are your primary fundraising&nbsp;channels? (Select all that apply)</p>
              <div class="${id}__options-container">
              <div class="${id}__option">
                  <input type="checkbox" id="email" name="channels" value="email">
                  <label for="email">
                      <div class="icon">${emailIcon}</div>
                      <p>Email</p>
                  </label>
              </div>
              <div class="${id}__option">
                  <input type="checkbox" id="social-media" name="channels" value="social-media">
                  <label for="social-media">
                      <div class="icon">${likeIcon}</div>
                      <p>Social Media</p>
                  </label>
              </div>
              <div class="${id}__option">
                  <input type="checkbox" id="events" name="channels" value="events">
                  <label for="events">
                      <div class="icon">${calenderIcon}</div>
                      <p>Events</p>
                  </label>
              </div>
              <div class="${id}__option">
                  <input type="checkbox" id="peer-campaigns" name="channels" value="peer-campaigns">
                  <label for="peer-campaigns">
                      <div class="icon">${campaignIcon}</div>
                      <p>Peer-to-peer campaigns</p>
                  </label>
              </div>
              <div class="${id}__option">
                  <input type="checkbox" id="advocacy" name="channels" value="advocacy">
                  <label for="advocacy">
                      <div class="icon">${volunteerIcon}</div>
                      <p>Advocacy/Volunteer Engagement</p>
                  </label>
              </div>
              </div>
              <button type="button" class="btn bt-outline ${id}__prev-step">Back</button>
              <button type="button" class="btn bt-solid-indigo hero--button ${id}__submit-form" disabled>Get recommendation</button>
          </div>
  
          <!-- Result Section -->
          <div id="result" class='${id}__result ${id}__hide'>
              
          </div>
      </div>
  `;
    return htmlStr;
  };

  const finalResult = (id, finalResultData) => {
    const htmlStr = `<div class="${id}__result-content ${finalResultData.className}">
        <div class="${id}__result-header">
        <img decoding="async" width="78" height="81" data-src="${finalResultData.headerImg}" class="stacked-cards--card-icon lazyloaded" alt="" src="${
      finalResultData.headerImg
    }" style="--smush-placeholder-width: 78px; --smush-placeholder-aspect-ratio: 78/81;">
        <div class="${id}__result-header-title">
           <p>OUR RECOMMENDATION</p>
           <h3 class="${id}__result-title">Fundraising & Engagement <span>${finalResultData.title}</span>&nbsp;Plan</h3>
        </div>
     </div>
          
          <div class="${id}__result-subTitle">${finalResultData.subTitle}</div>
  
          <ul class='${id}__result-description'>${finalResultData.description}</ul>
  
          <div class="${id}__result-footerText ${finalResultData.footerText === "" ? `${id}__empty` : ""}">${finalResultData.footerText}</div>
  
          <div class="${id}__result-buttons">
           <button class="${id}__getPricingBtn btn bt-solid-indigo hero--button">Get pricing</button>
          </div>
        </div>`;

    return htmlStr;
  };

  const scrollToForm = () => {
    const formElement = document.getElementById("multiStepForm");
    // Calculate the position of the section relative to the viewport
    const sectionTop = formElement.getBoundingClientRect().top + window.scrollY;

    // Scroll to 100px above the section
    window.scrollTo({
      top: sectionTop - 200, // Adjust this value to control the offset (100px above)
      behavior: "smooth", // Smooth scrolling animation
    });
  };

  const renderResult = (id, finalResultData) => {
    if (!finalResultData) {
      return;
    }

    const resultContainer = document.querySelector(`.${id}__result`);
    resultContainer.classList.remove(`${id}__hide`);

    resultContainer.innerHTML = finalResult(id, finalResultData);
  };

  const getFinalResult = (id, planData) => {
    const result = window[`${id}__result`];

    if (!result || !result.step1) {
      return null;
    }

    const step1Value = result.step1;

    if (planData[step1Value]) {
      return {
        title: planData[step1Value].title,
        description: planData[step1Value].description,
        className: planData[step1Value].className,
        modalID: planData[step1Value].modalID,
        headerImg: planData[step1Value].headerImg,
        subTitle: planData[step1Value].subTitle,
        footerText: planData[step1Value].footerText,
        userSelections: result,
      };
    }

    return null;
  };

  const setSelectedResult = (id, target) => {
    const currentStepElement = target.closest(`.${id} .step`);
    const stepIndex = Array.from(document.querySelectorAll(`.${id} .step`)).indexOf(currentStepElement) + 1;

    if (!window[`${id}__result`]) {
      window[`${id}__result`] = {};
    }

    if (target.type === "radio") {
      window[`${id}__result`][`step${stepIndex}`] = target.value;
    } else if (target.type === "checkbox") {
      const selectedCheckboxes = currentStepElement.querySelectorAll('input[type="checkbox"]:checked');
      window[`${id}__result`][`step${stepIndex}`] = Array.from(selectedCheckboxes).map((checkbox) => checkbox.value);
    }

    if (target.dataset.donorsize) {
      window[`${id}__result`].donorsize = target.dataset.donorsize;
    }
  };

  const modal = (id) => {
    const htmlStr = `<div class="${id}__priceModal modal" id="popupModal" role="dialog" aria-labelledby="modal-title" aria-modal="true" aria-hidden="false"
      style="display: block; opacity: 1;">
          <div class="modal-bg close"></div>
      </div>`;

    return htmlStr;
  };

  const modalCloseButton = `<button type="button" class="close modal-close-btn" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg"
  width="41" height="41" viewBox="0 0 41 41" fill="none">
  <path
      d="M34.4263 6.14204C42.2368 13.9525 42.2368 26.6158 34.4263 34.4263C26.6158 42.2368 13.9525 42.2368 6.14204 34.4263C-1.66844 26.6158 -1.66844 13.9525 6.14204 6.14204C13.9525 -1.66844 26.6158 -1.66844 34.4263 6.14204Z"
      fill="#381360"></path>
  <path d="M13.2129 13.2129L28.0621 28.0621" stroke="#fff" stroke-width="2"></path>
  <path d="M28.0621 13.2129L13.2129 28.0621" stroke="#fff" stroke-width="2"></path>
</svg></button>`;

  const pollerLite = (conditions, callback, maxTime = 10000) => {
    const POLLING_INTERVAL = 25;
    const startTime = Date.now();
    const interval = setInterval(() => {
      const allConditionsMet = conditions.every((condition) => {
        if (typeof condition === "function") {
          return condition();
        }
        return !!document.querySelector(condition);
      });
      if (allConditionsMet) {
        clearInterval(interval);
        callback();
      } else if (Date.now() - startTime >= maxTime) {
        clearInterval(interval);
      }
    }, POLLING_INTERVAL);
  };

  const mapDonorToDropdown = (radioValue) => {
    const dropdown = document.querySelector(`#List_Size__c`);
    const options = Array.from(dropdown.options);

    const thresholds = {
      fewer: "0 - 1,000",
      small: "1,001 - 2,500",
      medium: "5,001 - 10,000",
      enterprise: "50,000-74,999",
      strategic: "250,000 or more",
    };

    const selectedValue = thresholds[radioValue];

    const matchingOption = options.find((option) => option.value === selectedValue);

    if (matchingOption) {
      dropdown.value = matchingOption.value;
      dropdown.dispatchEvent(new Event("focus"));
      dropdown.dispatchEvent(new Event("change"));
    } else {
      console.log("No matching dropdown value found.");
    }
  };

  const sendDataToMarketo = (result) => {
    const inputFieldHTML = `<input type="hidden" id="fundraising_revenue" name="Organizations_annual_fundraising_revenue__c" value="">`;
    const inputResultFieldHTML = `<input type="hidden" id="step1_result" name="step1_result" value="">
        <input type="hidden" id="step2_result" name="step2_result" value="">
        <input type="hidden" id="step3_result" name="step3_result" value="">
        `;

    const marketoForm = document.querySelector("#mktoForm_1052");
    const step2ResultElem = document.querySelector(`#step2 .${ID}__option input:checked+label`);

    // set fundraising revenue value to marketo form
    if (marketoForm && result && step2ResultElem && !document.getElementById("fundraising_revenue")) {
      marketoForm.insertAdjacentHTML("beforeend", inputFieldHTML);
      const resultLabel = step2ResultElem.textContent.trim();
      document.getElementById("fundraising_revenue").value = resultLabel;
    }

    //set all result fields to marketo form as hidden fields
    if (!document.getElementById("step1_result") && marketoForm) {
      marketoForm.insertAdjacentHTML("beforeend", inputResultFieldHTML);
    }

    if (result) {
      if (result.step1 && result.step2 && document.getElementById("step1_result") && document.getElementById("step2_result")) {
        document.getElementById("step1_result").value = result.step1;
        document.getElementById("step2_result").value = result.step2;
      }

      if (document.getElementById("step3_result")) {
        if (Array.isArray(result.step3)) {
          document.getElementById("step3_result").value = result.step3.join(", ");
        } else if (result.step3) {
          document.getElementById("step3_result").value = result.step3;
        }
      }
    }
  };

  const stepOneEventMapping = {
    fewer: "Fewer than 1K donors",
    small: "1K-5K donors",
    medium: "5K-50K donors",
    enterprise: "50K-250K donors",
    strategic: "More than 250K donors",
  };

  const stepTwoEventMapping = {
    essentials: "Less than $100K",
    pro: "$100K-$5M",
    enterprise: "More than $5M",
  };

  const stepThreeEventMapping = {
    email: "Email",
    "social-media": "Social Media",
    events: "Events",
    "peer-campaigns": "Peer-to-peer campaigns",
    advocacy: "Advocacy/Volunteer Engagement",
  };

  const triggerStepGoals = (id, currentStep) => {
    if (currentStep === 1) {
      const userSelection = window[`${id}__result`].donorsize;
      const selectionMapped = stepOneEventMapping[userSelection];
      const eventLabel = `${selectionMapped}`;

      if (eventLabel === "Fewer than 1K donors") {
        _conv_q.push(["triggerConversion", "100478911"]);
      } else if (eventLabel === "1K-5K donors") {
        _conv_q.push(["triggerConversion", "100478915"]);
      } else if (eventLabel === "5K-50K donors") {
        _conv_q.push(["triggerConversion", "100479883"]);
      } else if (eventLabel === "50K-250K donors") {
        _conv_q.push(["triggerConversion", "100479884"]);
      } else if (eventLabel === "More than 250K donors") {
        _conv_q.push(["triggerConversion", "100478916"]);
      }

      if (sessionStorage.getItem("step1-completed") !== "true") {
        _conv_q.push(["triggerConversion", "100478901"]);
        sessionStorage.setItem("step1-completed", "true");
      }
    } else if (currentStep === 2) {
      const userSelection = window[`${id}__result`].step2;
      const selectionMapped = stepTwoEventMapping[userSelection];
      const eventLabel = `${selectionMapped}`;

      if (sessionStorage.getItem("step2-completed") !== "true") {
        _conv_q.push(["triggerConversion", "100478903"]);
        sessionStorage.setItem("step2-completed", "true");
      }

      if (eventLabel === "Less than $100K") {
        _conv_q.push(["triggerConversion", "100478919"]);
      } else if (eventLabel === "$100K-$5M") {
        _conv_q.push(["triggerConversion", "100478920"]);
      } else if (eventLabel === "More than $5M") {
        _conv_q.push(["triggerConversion", "100478921"]);
      }
    } else if (currentStep === 3) {
      const userSelection = window[`${id}__result`].step3;
      const selectionMapped = stepThreeEventMapping[userSelection];
      const eventLabel = `${selectionMapped}`;

      if (eventLabel === "Email") {
        _conv_q.push(["triggerConversion", "100478922"]);
      } else if (eventLabel === "Social Media") {
        _conv_q.push(["triggerConversion", "100478923"]);
      } else if (eventLabel === "Events") {
        _conv_q.push(["triggerConversion", "100478924"]);
      } else if (eventLabel === "Peer-to-peer campaigns") {
        _conv_q.push(["triggerConversion", "100478925"]);
      } else if (eventLabel === "Advocacy/Volunteer Engagement") {
        _conv_q.push(["triggerConversion", "100478926"]);
      }
    }
  };

  let currentStep = 1;

  const planData = {
    essentials: {
      title: "Essentials",
      subTitle: "Your mission is important, and this plan makes it easy to:",
      modalID: 1052,
      description: `<li>Streamline your efforts, engaging up to <b>5,000 donors</b>&nbsp;efficiently.</li>
      <li>Focus on building relationships with tools for <b>donor communication</b> and&nbsp;tracking.</li>
      <li>Save time and resources by <b>managing everything</b> in one intuitive&nbsp;platform.</li>`,
      footerText: "With the right tools, small steps can lead to big changes.",
      className: `${ID}__essentials`,
      headerImg: "https://www.bonterratech.com/wp-content/uploads/2024/09/icon-free-1.svg",
    },
    pro: {
      title: "Pro",
      subTitle: "Your mission deserves a platform that grows with you. This plan is tailored to:",
      modalID: 1053,
      description: `<li>Expand your reach, engaging <b>5,001–50,000 donors</b> with precision and&nbsp;care.</li>
      <li>Inspire greater generosity with <b>personalized appeals</b> and targeted&nbsp;campaigns.</li>
      <li>Save time and amplify results with <b>powerful automation</b> and actionable&nbsp;insights.</li>`,
      footerText: "With every interaction, create deeper connections and drive transformational change.",
      className: `${ID}__pro`,
      headerImg: "https://www.bonterratech.com/wp-content/uploads/2024/09/icon-gold-1.svg",
    },
    enterprise: {
      title: "Enterprise",
      subTitle: "For organizations driving change at scale, this plan empowers you to:",
      modalID: 1054,
      description: `<li>Engage <b>50,000+ donors</b> with seamless, multi-program&nbsp;coordination.</li>
      <li>Maximize your impact with <b>AI-driven insights</b> and advanced&nbsp;analytics.</li>
      <li>Deliver consistent, <b>personalized experiences</b> across every&nbsp;touchpoint.</li>`,
      footerText: "",
      className: `${ID}__enterprise`,
      headerImg: "https://www.bonterratech.com/wp-content/uploads/2024/09/icon.svg",
    },
  };

  const validateCurrentStep = (id) => {
    const currentStepElement = document.querySelector(`.${id}__multistep-form .step:nth-child(${currentStep})`);
    const radioButtons = currentStepElement.querySelectorAll('input[type="radio"]');

    if (radioButtons.length > 0) {
      return Array.from(radioButtons).some((radio) => radio.checked);
    }
    return true;
  };

  const init = () => {
    const attachPoint = document.querySelector(".container #pricing-table-content h4");

    if (!document.querySelector(`.${ID}__multistep-form`)) {
      attachPoint.insertAdjacentHTML("afterend", multiStepForm(ID));
    }

    setTimeout(()=>{
      const multiStepFormInput = document.querySelectorAll(`.${ID}__multistep-form input`);
      if(multiStepFormInput.length > 0) {
        multiStepFormInput.forEach((input) => {
          input.checked = false;
        });
      }
    }, 2000)
  };

  const updateNextButtonState = (id) => {
    const currentStepElement = document.querySelector(`.${id}__multistep-form .step:nth-child(${currentStep})`);
    const nextButton = currentStepElement.querySelector(`.${id}__next-step`);
    const radioButtons = currentStepElement.querySelectorAll('input[type="radio"]');

    if (!nextButton) return;

    if (radioButtons.length > 0) {
      const isAnyChecked = Array.from(radioButtons).some((radio) => radio.checked);
      nextButton.disabled = !isAnyChecked;
    } else {
      nextButton.disabled = false;
    }
  };

  const updateStepVisibility = (id) => {
    const steps = document.querySelectorAll(`.${id}__multistep-form .step`);
    steps.forEach((step, index) => {
      if (index === currentStep - 1) {
        step.classList.remove(`${id}__hide`);
      } else {
        step.classList.add(`${id}__hide`);
      }
    });
    updateNextButtonState(id);
  };

  const nextButtonHandler = (id) => {
    const totalSteps = document.querySelectorAll(`.${id}__multistep-form .step`).length;
    if (validateCurrentStep(id)) {
      triggerStepGoals(id, currentStep);

      if (currentStep < totalSteps) {
        currentStep += 1;
        updateStepVisibility(id);
      }

      //Scroll to the #multiStepForm portion
      scrollToForm();
    }
  };

  const prevButtonHandler = (id) => {
    if (currentStep > 1) {
      currentStep -= 1;
      updateStepVisibility(id);

      //Scroll to the #multiStepForm portion
      scrollToForm();
    }
  };

  const updateSubmitButtonState = (id) => {
    const currentStepElement = document.querySelector(`.${id} .step:nth-child(${currentStep})`);
    const submitButton = currentStepElement.querySelector(`.${id}__submit-form`);
    const checkboxes = currentStepElement.querySelectorAll('input[type="checkbox"]');

    if (!submitButton) return;

    const isAnyChecked = Array.from(checkboxes).some((checkbox) => checkbox.checked);
    submitButton.disabled = !isAnyChecked;
  };

  const monitorOptionSelection = (id) => {
    document.body.addEventListener("change", (e) => {
      const { target } = e;

      if (target.type === "radio" || target.type === "checkbox") {
        setSelectedResult(id, target);

        updateNextButtonState(id);

        updateSubmitButtonState(id);

        if (currentStep === 1) {
          if (sessionStorage.getItem("flow-engagement") !== "true") {
            _conv_q.push(["triggerConversion", "100478900"]);
            sessionStorage.setItem("flow-engagement", "true");
          }
        }
      }
    });
  };

  const activate = () => {

    if (window[`${ID}__result`]) {
      window[`${ID}__result`] = {};
    }

    setTimeout(()=>{
        MktoForms2.whenReady(function(form) {
          form.getFormElem()[0].reset(); // Clears all fields
        });
      }, 2000)
    setup();

    init();

    document.body.addEventListener("click", (e) => {
      const { target } = e;

      if (target.closest(`.${ID}__next-step`)) {
        nextButtonHandler(ID);
      } else if (target.closest(`.${ID}__prev-step`)) {
        prevButtonHandler(ID);
      } else if (target.closest(`.${ID}__submit-form`)) {
        const step3Elem = document.querySelector(`.${ID}__multistep-form #step3`);
        const finalResultData = getFinalResult(ID, planData);

        if (currentStep === 3) {
          if (sessionStorage.getItem("step3-completed") !== "true") {
            _conv_q.push(["triggerConversion", "100478904"]);
            sessionStorage.setItem("step3-completed", "true");            
            window.dataLayer.push({
              event: "last_step_quiz",
            });
          }

          triggerStepGoals(ID, currentStep);
        }

        scrollToForm();
        step3Elem.classList.add(`${ID}__hide`);
        renderResult(ID, finalResultData);
      } else if (target.closest(`.${ID}__getPricingBtn`)) {
        if (sessionStorage.getItem("step4-completed") !== "true") {
          _conv_q.push(["triggerConversion", "100478905"]);
          sessionStorage.setItem("step4-completed", "true");
        }

        if (!document.querySelector(`.${ID}__priceModal`)) {
          document.querySelector('#HERO').insertAdjacentHTML("afterbegin", modal(ID));
          if (document.querySelector(`.${ID}__priceModal`)) {
            // window.MktoForms2.loadForm("//learn.bonterratech.com", "488-ILM-190", 1052);
            document.querySelector('body').classList.add(`${ID}__popup-modal`);
            document.querySelector('#HERO #mktoForm_1052').insertAdjacentHTML('beforebegin', modalCloseButton);
          }

          pollerLite([`#Product_Interest__c`, `#List_Size__c`], () => {
            const productInterest = document.querySelector(`#Product_Interest__c`);
            productInterest.value = "Digital";
            productInterest.dispatchEvent(new Event("focus"));
            productInterest.dispatchEvent(new Event("change"));

            mapDonorToDropdown(window[`${ID}__result`]?.donorsize);
            sendDataToMarketo(window[`${ID}__result`]);
          });
        }
      } else if (target.closest(".modal-bg.close") || target.closest(".close.modal-close-btn")) {
        const modalElem = document.querySelector(`.${ID}__priceModal`);
        modalElem.remove();
        document.querySelector('.modal-close-btn').remove();
        document.querySelector('body').classList.remove(`${ID}__popup-modal`);
      } else if (target.closest(`.${ID}__getPricingBtn`)) {
        if (sessionStorage.getItem("step4-completed") !== "true") {
          _conv_q.push(["triggerConversion", "100478905"]);
          sessionStorage.setItem("step4-completed", "true");
        }
      }

      if (target.closest(`.${ID}__take-the-quiz-btn`) && document.querySelector(`.${ID}-hide-multistep-form`)) {
        document.querySelector(`.${ID}__multistep-form`).classList.remove(`${ID}-hide-multistep-form`);
        document.querySelector(`.${ID}__take-the-quiz-btn`).classList.add(`${ID}-hide-multistep-form`);
      }
    });

    monitorOptionSelection(ID);
  };

  window._conv_q = window._conv_q || [];
  pollerLite([".container #pricing-table-content h4", () => typeof window._conv_q === "object"], activate);
})();
i want add a line so where i add 
document.querySelector('#pricing-table-content').style.maxWidth = '80%';