{"id":2086897,"name":"Variant 1: Progress bar with labeled steps","modifications":[{"id":6476308,"selector":"","type":"addCSS","value":"\n        .summit-ProductQuiz-content-inner {\n          height: 100dvh !important;\n          max-height: 100dvh !important;\n        }\n\n        .summit-ProductQuiz-content-header {\n          border-bottom: 1px solid #FFFFFF26;\n        }\n\n        .summit-ProductQuiz-back-button {\n          display: flex;\n          gap: 8px;\n        }\n\n        .summit-ProductQuiz-back-button svg {\n          width: 16px;\n        }\n\n        .summit-ProductQuiz-step-tracker {\n          display: none;\n        }\n\n        .pmo54__stepper {\n          display: grid;\n          grid-template-columns: repeat(4, 1fr);\n          width: 100%;\n          position: relative;\n          gap: 8px;\n          margin-bottom: 32px;\n        }\n\n        .pmo54__stepper-progress {\n          position: absolute;\n          background: white;\n          height: 2px;\n          top: 15px;\n          left: 0px;\n          right: 0px;\n        }\n\n        .pmo54__stepper-progress-indicator {\n          background: #14A7E0;\n          height: 100%;\n          width: 0%;\n          transition: width 0.3s ease;\n          position: absolute;\n        }\n\n        .pmo54__stepper-step {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 8px;\n          z-index: 1;\n        }\n\n        .pmo54__stepper-step-number {\n          width: 30px;\n          height: 30px;\n          border-radius: 50%;\n          background-color: white;\n          color: #14A7E0;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          transition: background-color 0.3s ease, color 0.3s ease;\n        }\n        \n        .pmo54__stepper-step--current .pmo54__stepper-step-number,\n        .pmo54__stepper-step--passed .pmo54__stepper-step-number {\n          background-color: #14A7E0;\n          color: white;\n        }\n\n        .pmo54__stepper-step-label {\n          text-align: center;\n          color: white;\n          font-size: 14px;\n          line-height: 1.2;\n        }\n\n        @media (min-width: 46.5rem) {\n          .pmo54__stepper {\n            margin-bottom: 80px;\n          }\n          .pmo54__stepper-step {\n            gap: 12px;\n          }\n          .pmo54__stepper-step-label {\n            font-size: 16px;\n          }\n        }\n"},{"id":6476309,"selector":"","type":"customScriptNew"}],"_tagInfo":"2026/10/12 21:32:56 UTC"}