Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <div class="membership-widget__container">
    <div class="membership-widget__section membership-widget__section--start">
        <div class="membership-widget__content-container">
            <div class="membership-widget__svg-container">
               <svg opacity="0" class="step-1__svg-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1536.2 553.5">
                <path d="M5070.6,2026.2h-14.5" transform="translate(-4075.4 -1583.6)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="9"/>
                <g class="step-1__card-left">
                    <ellipse cx="99.5" cy="156.6" rx="45.7" ry="34" fill="#fff" opacity="0.3" style="isolation: isolate"/>
                    <ellipse cx="92.3" cy="146.3" rx="45.7" ry="34" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="9"/>
                    <path d="M4398,1899.2H4128.2a6.2,6.2,0,1,1,0-12.4H4398a6.23,6.23,0,0,1,6.2,6.2A6.11,6.11,0,0,1,4398,1899.2Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                    <path d="M4197.2,1944.4h-69a6.2,6.2,0,1,1,0-12.4h69a6.2,6.2,0,1,1,0,12.4Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                    <text transform="translate(188.91 157.32)" font-size="39.61" fill="#fff" font-family="Avenir-Black, Avenir" style="isolation: isolate">Basic</text>
                    <path d="M4240.2,1756.4a3.59,3.59,0,0,1-3.6-3.6v-45.9a3.6,3.6,0,0,1,7.2,0v45.9A3.72,3.72,0,0,1,4240.2,1756.4Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                    <path d="M4460.1,1645.1h-347a31.84,31.84,0,0,0-31.7,31.7v282.5a31.84,31.84,0,0,0,31.7,31.7H4513V1645.1h-27.3" transform="translate(-4075.4 -1583.6)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                    <path d="M4126.6,2003.7H4514V1746.1C4316.1,1750.6,4154,1861,4126.6,2003.7Z" transform="translate(-4075.4 -1583.6)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                    <path d="M4290.2,1944.4h-69a6.2,6.2,0,1,1,0-12.4h69a6.2,6.2,0,1,1,0,12.4Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                    <path d="M4383.2,1944.4h-69a6.2,6.2,0,1,1,0-12.4h69a6.2,6.2,0,1,1,0,12.4Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                    <path d="M4479.5,1944.4h-69a6.2,6.2,0,1,1,0-12.4h69a6.2,6.2,0,1,1,0,12.4Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                </g>
                <g class="step-1__card-left-shadow" opacity="0.3">
                    <path d="M4432.2,2072.7H4181.3a7.1,7.1,0,1,1,0-14.2h250.9a7.1,7.1,0,1,1,0,14.2Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                    <path d="M4500.3,2072.7h-34.9a7.1,7.1,0,0,1,0-14.2h34.9a7.1,7.1,0,0,1,0,14.2Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                </g>
                <g class="step-1__card-right">
                    <text transform="translate(1187.62 157.32)" font-size="39.61" fill="#fff" font-family="Avenir-Black, Avenir" style="isolation: isolate">P<tspan x="24.95" y="0" letter-spacing="-0.02em">r</tspan><tspan x="40.36" y="0" letter-spacing="0em">emier</tspan></text>
                    <path d="M5238.9,1756.4a3.59,3.59,0,0,1-3.6-3.6v-45.9a3.6,3.6,0,0,1,7.2,0v45.9A3.72,3.72,0,0,1,5238.9,1756.4Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                    <path d="M5598.9,1762.1v-24.2" transform="translate(-4075.4 -1583.6)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="9"/>
                    <path d="M5173.6,1706.2c-1.5,0-3.1.1-4.6.2v67.7c1.5.1,3,.2,4.6.2,25.3,0,45.7-15.2,45.7-34s-20.5-34.1-45.7-34.1Z" transform="translate(-4075.4 -1583.6)" fill="#fff" opacity="0.3" style="isolation: isolate"/>
                    <path d="M5212.2,1729.9c0-18.2-19.1-33-43.2-34v68C5193.1,1762.9,5212.2,1748,5212.2,1729.9Z" transform="translate(-4075.4 -1583.6)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="9"/>
                    <path d="M5598.9,1724.1v-47.3a31.84,31.84,0,0,0-31.7-31.7H5169V1991h398.2a31.84,31.84,0,0,0,31.7-31.7V1776.1" transform="translate(-4075.4 -1583.6)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                    <path d="M5525.4,1745.9c-154.2,0-288.3,64.3-356.4,158.8v99h410.9a31.84,31.84,0,0,0,31.7-31.7V1752.8a539.24,539.24,0,0,0-86.2-6.9Z" transform="translate(-4075.4 -1583.6)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                    <path d="M5396.8,1886.8H5169.6v12.4h227.2a6.2,6.2,0,1,0,0-12.4Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                    <path d="M5195.9,1944.4a6.2,6.2,0,1,0,0-12.4h-26.4v12.4Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                    <path d="M5288.9,1944.4h-69a6.2,6.2,0,1,1,0-12.4h69a6.23,6.23,0,0,1,6.2,6.2A6.11,6.11,0,0,1,5288.9,1944.4Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                    <path d="M5381.9,1944.4h-69a6.2,6.2,0,1,1,0-12.4h69a6.23,6.23,0,0,1,6.2,6.2A6.11,6.11,0,0,1,5381.9,1944.4Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                    <path d="M5478.2,1944.4h-69a6.2,6.2,0,1,1,0-12.4h69a6.2,6.2,0,1,1,0,12.4Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                </g>
                <g class="step-1__card-right-shadow" opacity="0.3">
                    <path d="M5430.9,2072.7H5180a7.1,7.1,0,1,1,0-14.2h250.9a7.1,7.1,0,1,1,0,14.2Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                    <path d="M5499,2072.7h-34.9a7.1,7.1,0,1,1,0-14.2H5499a7.1,7.1,0,1,1,0,14.2Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                </g>
                <g class="step-1__card-main">
                    <ellipse class="step-1__fill" cx="556.7" cy="126" rx="57.7" ry="43" fill="#fff" opacity="0.3" style="isolation: isolate"/>
                    <ellipse class="step-1__card-stroke" cx="547.7" cy="113" rx="57.7" ry="43" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="9"/>
                    <text class="step-1__label" transform="translate(669.58 126.89)" font-size="50" fill="#fff" font-family="Avenir-Black, Avenir" style="isolation: isolate">Plus</text>
                    <path class="step-1__label-divider" d="M4714.5,1730.1a4.48,4.48,0,0,1-4.5-4.5v-58a4.5,4.5,0,1,1,9,0v58A4.55,4.55,0,0,1,4714.5,1730.1Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                    <path class="step-1__fill" d="M5185,2002.2V1725.5a679,679,0,0,0-108.8-8.7c-257,0-469.7,141.4-505,325.4H5145A40.12,40.12,0,0,0,5185,2002.2Z" transform="translate(-4075.4 -1583.6)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                    <g class="step-1__fill" opacity="0.3">
                        <path d="M4956.9,2137.1H4640.2a9,9,0,0,1,0-18h316.7a9,9,0,0,1,0,18Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                        <path d="M5042.9,2137.1h-44a9,9,0,0,1,0-18h44a9,9,0,0,1,0,18Z" transform="translate(-4075.4 -1583.6)" fill="#fff"/>
                    </g>
                    <path class="step-1__card-stroke" d="M5034.1,2026.2h-480a40.12,40.12,0,0,1-40-40V1629.6a40.12,40.12,0,0,1,40-40H5129a40.12,40.12,0,0,1,40,40v356.6a40.12,40.12,0,0,1-40,40h-34.9" transform="translate(-4075.4 -1583.6)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                    <path class="step-1__card-details" d="M4584,1888.6h328.5M4584,1944.1h83.5m31.5,0h83.5m31.5,0h83.5m31.4,0h83.5" transform="translate(-4075.4 -1583.6)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="13"/>
                </g>
            </svg>
            </div>
            
            <p class="membership-widget__section-copy">Find a Membership Plan tailored specifically to you with our helpful customized membership tool.  </p>
            <a href="#" class="membership-widget__section-button membership-widget__section-button--start button button--header">Get Started</a>
        </div>
    </div>
    <div class="membership-widget__section membership-widget__section--q0">
        <div class="membership-widget__content-container">
            <div class="membership-widget__svg-container">
                <svg opacity="0" class="step-2__container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 651.31 625.59">
                    <g>
                        <path opacity="0" class="step-2__background-fill" d="M317.94,21.15C142.35,21.15,0,163.49,0,339.08A317,317,0,0,0,98.14,568.79c0-.15,0-.29,0-.44v-60.1a18.05,18.05,0,0,1,18-18h400a18.05,18.05,0,0,1,18,18v60.1a17.83,17.83,0,0,1-.56,4.35A317.07,317.07,0,0,0,635.87,339.08C635.87,163.49,493.53,21.15,317.94,21.15Zm0,425.28a29,29,0,1,1,29-29A29,29,0,0,1,317.94,446.42Z" fill="#fff" opacity="0.2"/>
                        <path class="step-2__outline step-2__outline--3" d="M58.81,153.63a319,319,0,0,1,43.74-54.51C226.72-25,428-25,552.19,99.12,663.91,210.84,675.1,385,585.78,509.25" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                        <path class="step-2__outline step-2__outline--2" d="M32.43,205a315.57,315.57,0,0,1,14.71-31.42" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                        <path class="step-2__outline step-2__outline--1" d="M69.46,509.94A317.9,317.9,0,0,1,13.7,271.88" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                        <g class="step-2__dial" opacity="0">
                            <circle class="step-2__dial-knob" cx="327.94" cy="402.41" r="29" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                            <path class="step-2__dial-pointer" d="M337.11,372.63l-21-97.62-20.33-96.69,6.62,100.42L309,379.15S323.08,371.69,337.11,372.63Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                        </g>
                        <line opacity="0" class="step-2__dial-indicators" x1="327.94" y1="33.81" x2="327.94" y2="100.51" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                        <g class="step-2__meter-dashes--top">
                        <line x1="178.87" y1="476.76" x2="178.87" y2="492.6" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        <line x1="252.31" y1="476.76" x2="252.31" y2="492.6" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        <line x1="325.94" y1="476.76" x2="325.94" y2="492.6" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        <line x1="397.19" y1="476.76" x2="397.19" y2="492.6" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        <line x1="469.5" y1="476.76" x2="469.5" y2="492.6" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        </g>
                        <g class="step-2__meter-dashes--bottom">
                        <line x1="178.87" y1="553.95" x2="178.87" y2="569.78" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        <line x1="252.31" y1="553.95" x2="252.31" y2="569.78" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        <line x1="325.94" y1="553.95" x2="325.94" y2="569.78" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        <line x1="397.19" y1="553.95" x2="397.19" y2="569.78" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        <line x1="469.5" y1="553.95" x2="469.5" y2="569.78" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        </g>
                        <g opacity="0" class="step-2__dial-indicators">
                        <line x1="122.7" y1="118.83" x2="169.86" y2="165.99" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                        <line x1="533.19" y1="118.83" x2="486.03" y2="165.99" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                        <line x1="618.2" y1="324.07" x2="551.51" y2="324.07" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                        <line x1="37.69" y1="324.07" x2="104.38" y2="324.07" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                        </g>
                        <text class="step-2__numbers" transform="translate(129.1 544.55)" font-size="60" fill="#fff" font-family="MuseoSansRounded-700, MuseoSansRounded 700" letter-spacing="0.63em">098787</text>
                        <g opacity="0" class="step-2__dial-indicators">
                            <line x1="423.35" y1="90.4" x2="411.32" y2="120.18" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                            <line x1="232.54" y1="90.4" x2="244.57" y2="120.18" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                            <line x1="93.51" y1="227.02" x2="123.07" y2="239.57" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                            <line x1="562.38" y1="227.02" x2="532.81" y2="239.57" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                        </g>
                        <path d="M214.51,475.24H527.94a18.05,18.05,0,0,1,18,18v60.1a18.05,18.05,0,0,1-18,18h-14" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10"/>
                        <path d="M487.44,571.34H127.94a18.05,18.05,0,0,1-18-18v-60.1a18.05,18.05,0,0,1,18-18H193.2" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10"/>
                    </g>
                </svg>
            </div>
            <h3 class="membership-widget__section-title">Do you drive more than 10km daily?</h3>
            <a href="#" class="membership-widget__section-button membership-widget__section-button--no button button--header">No</a>
            <a href="#" class="membership-widget__section-button membership-widget__section-button--yes button button--header">Yes</a>
        </div>
    </div>
    <div class="membership-widget__section membership-widget__section--q1">
        <div class="membership-widget__content-container">
            <div class="membership-widget__svg-container">
                 <svg class="step-3__container" opacity="0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1442.56 1041.1">
                    <g class="step-3__motorcycle">
                        <path class="step-3__background-fill" d="M2065.6,6520.4a189.9,189.9,0,1,0,189.9,189.9A189.87,189.87,0,0,0,2065.6,6520.4Zm0,302.8a112.9,112.9,0,1,1,112.9-112.9A112.9,112.9,0,0,1,2065.6,6823.2Z" transform="translate(-1858.64 -5859.1)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                        <polygon class="step-3__background-fill" points="969.36 568.8 734.06 568.8 862.36 704 907.96 704 969.36 568.8" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                        <path class="step-3__background-fill" d="M2232.8,6411.6h475.5C2708.4,6411.6,2257.7,6198.5,2232.8,6411.6Z" transform="translate(-1858.64 -5859.1)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                        <polygon points="1381.96 836.6 812.36 836.6 825.36 815.2 1394.16 815.2 1381.96 836.6" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                        <path d="M3106.7,6710.3a112.9,112.9,0,0,1-225.8,0c0-3.4.2-6.7.4-10h-77.1c-.2,3.3-.3,6.7-.3,10a189.9,189.9,0,0,0,379.8,0c0-3.4-.1-6.7-.3-10h-77.1C3106.6,6703.6,3106.7,6706.9,3106.7,6710.3Z" transform="translate(-1858.64 -5859.1)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                        <path d="M2993.8,6597.4a112.8,112.8,0,0,1,87.5,41.5h88.5a190,190,0,0,0-352,0h88.5A112.8,112.8,0,0,1,2993.8,6597.4Z" transform="translate(-1858.64 -5859.1)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                        <g class="step-3__front-wheel">
                        <path d="M1914.5,6806.7a6,6,0,0,1-5.1-2.8,175,175,0,0,1-11.5-21.3,6,6,0,0,1,10.9-5.1,192.8,192.8,0,0,0,10.8,20,6,6,0,0,1-1.9,8.3A6.21,6.21,0,0,1,1914.5,6806.7Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2075.6,6896.2a195.51,195.51,0,0,1-152.1-72.4,6,6,0,0,1,9.3-7.5,183.15,183.15,0,0,0,142.7,68c101.4,0,183.9-82.5,183.9-183.9s-82.5-183.9-183.9-183.9-183.9,82.5-183.9,183.9a184.08,184.08,0,0,0,8.1,54.3,6,6,0,1,1-11.5,3.5,194.64,194.64,0,0,1-8.7-57.8c0-108,87.9-195.9,195.9-195.9s195.9,87.9,195.9,195.9S2183.7,6896.2,2075.6,6896.2Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        </g>
                        <path d="M2075.6,6819.2a118.9,118.9,0,1,1,118.9-118.9A119,119,0,0,1,2075.6,6819.2Zm0-225.8a106.9,106.9,0,1,0,106.9,106.9C2182.6,6641.3,2134.6,6593.4,2075.6,6593.4Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2075.6,6751.8a51.5,51.5,0,1,1,51.5-51.5A51.55,51.55,0,0,1,2075.6,6751.8Zm0-91a39.5,39.5,0,1,0,39.5,39.5A39.52,39.52,0,0,0,2075.6,6660.8Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M3209.8,6586.3a6,6,0,0,1-5.3-3.1,228.91,228.91,0,0,0-53.9-66,6,6,0,0,1,7.8-9.2,239.29,239.29,0,0,1,56.7,69.5,5.94,5.94,0,0,1-5.3,8.8Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M3135.6,6504.2a6.11,6.11,0,0,1-3.4-1,201.62,201.62,0,0,0-17.8-10.9,6,6,0,1,1,5.9-10.5c6.4,3.5,12.7,7.4,18.7,11.5a6,6,0,0,1-3.4,10.9Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2776.6,6640.5a7.71,7.71,0,0,1-1.5-.2,5.93,5.93,0,0,1-4.3-7.3,241.49,241.49,0,0,1,84.2-129.7,240.73,240.73,0,0,1,245-31.6,6,6,0,1,1-4.8,11,228.65,228.65,0,0,0-232.7,30,229.44,229.44,0,0,0-80,123.3A6.09,6.09,0,0,1,2776.6,6640.5Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2075.6,6706.3a5.23,5.23,0,0,1-2.1-.4,6,6,0,0,1-3.5-7.7l189.9-512.1a5.92,5.92,0,0,1,5.6-3.9H2351a6,6,0,0,1,0,12h-81.3l-188.4,508.2A6.05,6.05,0,0,1,2075.6,6706.3Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2185.1,6322.9h-22.6a6,6,0,0,1-6-6v-88.7a6,6,0,0,1,6-6h22.6a50.35,50.35,0,0,1,0,100.7Zm-16.6-12h16.6a38.35,38.35,0,0,0,0-76.7h-16.6Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2870.3,6706.3H2614a6,6,0,1,1,0-12h256.3a6,6,0,1,1,0,12Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2584.5,6706.3H2403.7a6,6,0,0,1-5.1-2.9L2225.8,6420a6,6,0,1,1,10.2-6.2l171,280.6h177.4a6,6,0,0,1,6,6A5.85,5.85,0,0,1,2584.5,6706.3Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2628.9,6586.2a28.1,28.1,0,1,1,28.1-28.1A28.12,28.12,0,0,1,2628.9,6586.2Zm0-44.2a16.1,16.1,0,1,0,16.1,16.1A16.09,16.09,0,0,0,2628.9,6542Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2548.3,6658.1a19.9,19.9,0,1,1,19.9-19.9A19.89,19.89,0,0,1,2548.3,6658.1Zm0-27.8a7.9,7.9,0,1,0,7.9,7.9A7.92,7.92,0,0,0,2548.3,6630.3Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2971.4,6643.3a5.88,5.88,0,0,1-5.4-3.5l-102.9-220.2a6,6,0,1,1,10.9-5.1l102.9,220.2a6,6,0,0,1-2.9,8A6.15,6.15,0,0,1,2971.4,6643.3Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2472.9,6208.3H2365.3a20.1,20.1,0,1,1,0-40.2h107.6a20.1,20.1,0,1,1,0,40.2Zm-107.6-28.1a8.1,8.1,0,1,0,0,16.2h107.6a8.1,8.1,0,0,0,0-16.2Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M3145,6422.9H2661.5a6,6,0,0,1,0-12H2705c15.4,0,17-12,17.1-13,1-15.8-19.4-25.1-19.6-25.2s-.2-.1-.3-.2c-9.4-4.9-18.9-9.7-28.3-14.4a6.05,6.05,0,0,1-3.2-6.8,6,6,0,0,1,5.8-4.6h6.3c80.5,0,192.1-3.9,279.6-22.1,53.7-11.2,73-22.6,73.2-22.7a.76.76,0,0,1,.4-.2c27.7-13.9,51.3-15,70.1-3.4s32,35.2,39.3,70.3a265,265,0,0,1,5.4,48.3A5.73,5.73,0,0,1,3145,6422.9Zm-415.4-12h409.1c-.9-19.7-6.4-82.4-38.8-102.4-15-9.3-34.6-8-58.2,3.8-2.6,1.5-22.9,12.7-75.2,23.7-82,17.3-185.2,22-264.9,22.6,2,1,4,2,6,3.1a58.37,58.37,0,0,1,13.4,8.9c9.2,8.2,13.8,17.9,13,28.2v.1A24.63,24.63,0,0,1,2729.6,6410.9Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2299,6270.8a6,6,0,0,1-1.5-11.8,230.73,230.73,0,0,1,24.5-5.1,6.07,6.07,0,0,1,6.9,5,6,6,0,0,1-5,6.9c-8,1.3-15.9,2.9-23.4,4.8A3.64,3.64,0,0,1,2299,6270.8Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2705,6422.9H2231a5.84,5.84,0,0,1-5.1-2.9,152.27,152.27,0,0,1-17.3-48.8c-5.9-36.7,6-67.1,34.2-87.8,1.4-1.2,11.6-9,31.4-16.8a6,6,0,1,1,4.4,11.2c-19,7.4-28.2,14.9-28.3,15s-.2.1-.3.2c-24.7,18.1-34.7,43.6-29.7,76,3,19.3,10.8,35.6,14.2,42H2705c15.4,0,17-12,17.1-13,1-15.8-19.4-25.1-19.6-25.2s-.2-.1-.3-.2c-9.4-4.9-18.9-9.7-28.3-14.4-111.1-55.5-181.9-78.2-203.8-82.5a.37.37,0,0,1-.3-.1c-46.1-11.3-89-15.3-127.5-12a6,6,0,1,1-1-12c39.7-3.5,83.9.6,131.3,12.2,4.3.9,68.1,14.3,206.7,83.5,9.3,4.7,18.9,9.5,28.3,14.4a58.37,58.37,0,0,1,13.4,8.9c9.2,8.2,13.8,17.9,13,28.2v.1C2733.3,6407.2,2726.2,6422.9,2705,6422.9Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2536.9,6516H2348a20.06,20.06,0,0,1-20-20v-34.3a20.06,20.06,0,0,1,20-20h188.9a20.06,20.06,0,0,1,20,20V6496A20.06,20.06,0,0,1,2536.9,6516ZM2348,6453.6a8,8,0,0,0-8,8v34.3a8,8,0,0,0,8,8h188.9a8,8,0,0,0,8-8v-34.3a8,8,0,0,0-8-8Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2530.3,6543.8H2354.6a6,6,0,0,1,0-12h175.7a6,6,0,1,1,0,12Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2487.7,6559.8" transform="translate(-1858.64 -5859.1)" fill="none" stroke="#1d60c9" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                        <path d="M2327.1,6559.8" transform="translate(-1858.64 -5859.1)" fill="none" stroke="#1d60c9" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                        <path d="M2507.4,6571.8H2377.6a6,6,0,1,1,0-12h129.8a6,6,0,0,1,0,12Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2483.2,6598.8h-81.4a6,6,0,0,1,0-12h81.4a6,6,0,0,1,0,12Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2670.3,6706.2a6.2,6.2,0,0,1-3.2-.9,6,6,0,0,1-1.9-8.3l177.7-283.1a6,6,0,0,1,10.2,6.4l-177.7,283.1A6.25,6.25,0,0,1,2670.3,6706.2Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2544.4,6681.2c-10.2,0-20.5-3.4-28.4-11.3l-.2-.2-.1-.1c-15.5-16.4-15.6-38.6-.4-58.1l.2-.2,60.3-70.3.3-.3c1.5-1.5,3.3-3.5,5.2-5.6,7.7-8.5,18.2-20.1,31.9-25.8,16.9-7,34.1-3.3,51.2,11,.1.1.3.2.4.4l.1.1c11.5,10.3,17.4,21.4,17.5,33.2.1,21.6-18.9,38.9-31.5,50.3-2.3,2.1-4.3,3.9-5.8,5.4l-.3.3-70.2,60.2A46.65,46.65,0,0,1,2544.4,6681.2Zm-20-20,.2.2c11.6,11.6,31.5,9.2,42.1-.2a.1.1,0,0,0,.1-.1l70.1-60.1c1.7-1.7,3.7-3.5,6.1-5.7,11-10,27.7-25.1,27.6-41.4,0-8.4-4.5-16.3-13.6-24.4-.1-.1-.2-.2-.3-.2h0c-28.4-23.5-47.6-6.9-66.4,13.8-1.9,2.1-3.8,4.2-5.5,5.9l-60,70C2513.1,6633.7,2513,6649.2,2524.4,6661.2Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2761.6,6559.4H2731a6.29,6.29,0,0,1-4.6-2l-128.3-135.2a6.29,6.29,0,0,1,4.6-10.6H2848a6.33,6.33,0,0,1,5.3,9.7l-86.4,135.2A6.17,6.17,0,0,1,2761.6,6559.4Zm-27.9-12.6h24.5l78.3-122.6h-219Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2453.2,6647.8h-21.6a18.6,18.6,0,0,1,0-37.2h21.6a18.6,18.6,0,1,1,0,37.2Zm-21.5-25.2a6.6,6.6,0,0,0,0,13.2h21.6a6.6,6.6,0,0,0,0-13.2Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M3007.8,6587.4a112.85,112.85,0,0,0-94.8,51.5h189.6A112.72,112.72,0,0,0,3007.8,6587.4Z" transform="translate(-1858.64 -5859.1)" fill="none"/>
                        <path d="M3007.8,6813.2a112.9,112.9,0,0,0,112.9-112.9H2894.9A112.9,112.9,0,0,0,3007.8,6813.2Z" transform="translate(-1858.64 -5859.1)" fill="none"/>
                        <path d="M3240.6,6706.6H2671a6.33,6.33,0,0,1-5.3-9.7l39-61.4a6.43,6.43,0,0,1,5.3-2.9h552.8a6.37,6.37,0,0,1,6,8.5l-22.2,61.4A6.44,6.44,0,0,1,3240.6,6706.6ZM2682.5,6694h553.8l17.6-48.7H2713.5Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2326.4,6890.2" transform="translate(-1858.64 -5859.1)" fill="none" stroke="#1d60c9" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                        <path d="M3228.8,6890.2" transform="translate(-1858.64 -5859.1)" fill="none" stroke="#1d60c9" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                        <path d="M3190.9,6644.9h-96.6l-1.8-2.7a107,107,0,0,0-179.6,0l-1.8,2.7h-96.6l2.7-7.9a195.91,195.91,0,0,1,370.8,0Zm-90.1-12h73.1a183.89,183.89,0,0,0-342.2,0h73.1a119,119,0,0,1,196,0Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M3002.8,6896.2c-108,0-195.9-87.9-195.9-195.9v-6h89v6a106.9,106.9,0,0,0,213.8,0v-6h89v6C3198.7,6808.3,3110.8,6896.2,3002.8,6896.2Zm-183.7-189.9c3.2,98.6,84.4,177.9,183.8,177.9s180.6-79.2,183.8-177.9h-65a119,119,0,0,1-237.6,0Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M3002.8,6751.8a51.55,51.55,0,0,1-51.5-51.5v-6h103.1v6A51.64,51.64,0,0,1,3002.8,6751.8Zm-39.1-45.5a39.57,39.57,0,0,0,78.2,0Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                        <path d="M2880.9,6710.3a112.9,112.9,0,0,0,225.8,0c0-3.4-.2-6.7-.4-10H2881.4C2881.1,6703.6,2880.9,6706.9,2880.9,6710.3Z" transform="translate(-1858.64 -5859.1)" fill="none"/>
                        <circle cx="760.26" cy="709" r="22.1" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                        <circle cx="679.66" cy="789.1" r="13.9" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                        <path d="M1864.7,6596.7a6.16,6.16,0,0,1-2.6-.6,6,6,0,0,1-2.9-8,239.26,239.26,0,0,1,432.8,0,6,6,0,1,1-10.9,5.1,227.08,227.08,0,0,0-410.9.1A6,6,0,0,1,1864.7,6596.7Z" transform="translate(-1858.64 -5859.1)" fill="#fff"/>
                    </g>
                    <g>
                        <line class="step-3__road-line--front" x1="216.94" y1="1031.02" x2="409.19" y2="1031.02" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                        <line class="step-3__road-line--front" x1="435.62" y1="1031.02" x2="465.99" y2="1031.02" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                        <line class="step-3__road-line--front" x1="493.5" y1="1031.02" x2="543.89" y2="1031.02" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                    </g>
                    <path d="M1370.13,1031" fill="none" stroke="#1d60c9" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                    <g>
                        <line class="step-3__road-line--back" x1="1135.43" y1="1031.02" x2="1307.67" y2="1031.02" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                        <line class="step-3__road-line--back" x1="1336.1" y1="1031.02" x2="1436.53" y2="1031.02" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                    </g>
                    <path class="step-3__cloud step-3__cloud--1" d="M2170.8,6005H1872.7a6,6,0,0,1-5.8-4.4,48.74,48.74,0,0,1,41-61.5,84,84,0,0,1,162.4-26.1c1.6-.1,3.1-.2,4.7-.2a66.87,66.87,0,0,1,40.5,13.5,68.82,68.82,0,0,1,22.4,29.6,38,38,0,0,1,39.2,38,39.14,39.14,0,0,1-.5,5.9A5.83,5.83,0,0,1,2170.8,6005Zm-293.3-12h287.7a26,26,0,0,0-26-25,22.52,22.52,0,0,0-4.4.4,5.91,5.91,0,0,1-6.7-4.2,55.14,55.14,0,0,0-53.1-39.3,52.54,52.54,0,0,0-7.9.6,6,6,0,0,1-6.6-4.1,72,72,0,0,0-140.7,21.8v1.5a6.13,6.13,0,0,1-1.7,4.3,6.2,6.2,0,0,1-4.4,1.8,36.79,36.79,0,0,0-36.7,36.7A33.05,33.05,0,0,0,1877.5,5993Z" transform="translate(-1858.64 -5820.55)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                    <path class="step-3__cloud step-3__cloud--2" d="M2083.8,6128.2H1870.3a4.88,4.88,0,0,1-4.9-4.2,31.08,31.08,0,0,1-.3-4.3,27.91,27.91,0,0,1,27.9-27.9h.4a48.83,48.83,0,0,1,45.6-30.9,28.08,28.08,0,0,1,2.9.1,60.92,60.92,0,0,1,117.5,18.8,35.69,35.69,0,0,1,30.7,35.3,34.72,34.72,0,0,1-1.3,9.6A5.44,5.44,0,0,1,2083.8,6128.2Zm-208.7-10h204.7c.1-1.1.2-2.2.2-3.2a25.65,25.65,0,0,0-25.6-25.6h0a5.18,5.18,0,0,1-3.5-1.4,5.23,5.23,0,0,1-1.6-3.7v-1.1a50.89,50.89,0,0,0-99.4-15.4,5,5,0,0,1-5.5,3.4,35.19,35.19,0,0,0-5.6-.4,39.25,39.25,0,0,0-37.3,27.7,5,5,0,0,1-5.6,3.5A17.86,17.86,0,0,0,1875.1,6118.2Z" transform="translate(-1858.64 -5820.55)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                    <path class="step-3__initial-cloud" d="M2083.8,6128.2H1870.3a4.88,4.88,0,0,1-4.9-4.2,31.08,31.08,0,0,1-.3-4.3,27.91,27.91,0,0,1,27.9-27.9h.4a48.83,48.83,0,0,1,45.6-30.9,28.08,28.08,0,0,1,2.9.1,60.92,60.92,0,0,1,117.5,18.8,35.69,35.69,0,0,1,30.7,35.3,34.72,34.72,0,0,1-1.3,9.6A5.44,5.44,0,0,1,2083.8,6128.2Zm-208.7-10h204.7c.1-1.1.2-2.2.2-3.2a25.65,25.65,0,0,0-25.6-25.6h0a5.18,5.18,0,0,1-3.5-1.4,5.23,5.23,0,0,1-1.6-3.7v-1.1a50.89,50.89,0,0,0-99.4-15.4,5,5,0,0,1-5.5,3.4,35.19,35.19,0,0,0-5.6-.4,39.25,39.25,0,0,0-37.3,27.7,5,5,0,0,1-5.6,3.5A17.86,17.86,0,0,0,1875.1,6118.2Z" transform="translate(-1858.64 -5859.1)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                    <path class="step-3__initial-cloud" d="M2739.35,6065.15H2607a2.64,2.64,0,0,1-2.58-1.79,18.3,18.3,0,0,1-.8-5.33c0-10.14,8.3-18.53,19-19.71.93-18.12,17.32-32.58,37.26-32.58,15.59,0,29.35,8.76,34.86,22,.71,0,1.38-.08,2.09-.08a31.5,31.5,0,0,1,18,5.5,28.42,28.42,0,0,1,9.95,12.05c9.55-.29,17.41,6.76,17.41,15.48a14.65,14.65,0,0,1-.22,2.4A2.52,2.52,0,0,1,2739.35,6065.15Zm-130.25-4.89h127.76c-.22-5.66-5.33-10.18-11.55-10.18a10.88,10.88,0,0,0-2,.16,2.64,2.64,0,0,1-3-1.71c-3.15-9.57-12.66-16-23.58-16a25.4,25.4,0,0,0-3.51.24,2.71,2.71,0,0,1-2.93-1.67c-4.22-12.22-16.48-20.44-30.51-20.44-17.63,0-32,13.15-32,29.32v.61a2.39,2.39,0,0,1-.75,1.75,2.89,2.89,0,0,1-2,.73c-9,0-16.3,6.72-16.3,14.95A12.38,12.38,0,0,0,2609.11,6060.26Z" transform="translate(-1858.64 -5859.1)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                </svg>
            </div>
            <h3 class="membership-widget__section-title">Do you own a motercycle?</h3>
            <a href="#" class="membership-widget__section-button membership-widget__section-button--no button button--header">No</a>
            <a href="#" class="membership-widget__section-button membership-widget__section-button--yes button button--header">Yes</a>
        </div>
    </div>
    <div class="membership-widget__section membership-widget__section--q2">
        <div class="membership-widget__content-container">
            <div class="membership-widget__svg-container">
                <svg opacity="0" class="step-4__container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1106.12 984.31">
                    <path class="step-4__marker--1" d="M4349,3993.7a49.31,49.31,0,0,0-34.7,60.5c7.1,26.3,74.3,85.5,74.3,85.5s28.1-85,20.9-111.3a49.31,49.31,0,0,0-60.5-34.7Zm18.1,66.7a19.73,19.73,0,1,1,13.9-24.2A19.7,19.7,0,0,1,4367.1,4060.4Z" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                    <path class="step-4__marker--2" d="M4886.4,3552.4a49.18,49.18,0,0,0-32.1,61.9c8.2,26,77.8,82.3,77.8,82.3s24.5-86.1,16.3-112.1a49.54,49.54,0,0,0-62-32.1Zm20.8,65.9a19.77,19.77,0,1,1,12.9-24.8A19.77,19.77,0,0,1,4907.2,3618.3Z" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                    <g>
                        <path class="step-4__dotted-path" d="M4336.3,3963.6v-.5, M4341.1,3937.9c12.8-40.7,60.4-110.2,236.1-58.8,119.7,35,395.9-7.6,357.6-173.8" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="13.04" stroke-dasharray="1.07 25.69"/>
                        <path class="step-4__path-mask" data-name="blue path" d="M4341.1,3937.9c12.8-40.7,60.4-110.2,236.1-58.8,119.7,35,395.9-7.6,357.6-173.8" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#1d60c9" stroke-linecap="square" stroke-linejoin="round" stroke-width="15"/>
                    </g>
                    <path class="step-4__outline-stroke--dash" d="M4209.3,4036.1l-8.6-29.3" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                    <path class="step-4__outline-stroke" d="M4193.9,3983.6l-91-309.4c-5.8-19.8-1.5-32.8,25.4-46.5l239.3-139.2,310.6,18.7,304.7-130.8a37.54,37.54,0,0,1,46.5,25.4l159.1,540.9c5.8,19.8,1.5,35.7-25.4,46.5L4858.4,4120l-308.8-9.3-241.1,129.8c-25.3,10.9-40.7-5.6-46.5-25.3l-42.3-143.8" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                    <path class="step-4__outline-stroke--divider" d="M4367.5,3488.5l182,622.3" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                    <path class="step-4__outline-stroke--divider" d="M4678.2,3507.3,4858.4,4120" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                    <path class="step-4__legend-bg step-4__bg" d="M5140.3,3955a9.87,9.87,0,0,1-5.2,13.1l-81,35a9.87,9.87,0,0,1-13.1-5.2L4995.3,3846a9.87,9.87,0,0,1,5.2-13.1l81-35a9.87,9.87,0,0,1,13.1,5.2Z" transform="translate(-4090.64 -3368.89)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                    <path class="step-4__map-bg step-4__bg" d="M5003.9,3412a37.69,37.69,0,0,0-31-4.6l-287.7,123.8-309.6-19.7-257.3,147.3c-26.9,13.7-31.2,26.7-25.4,46.5l49.6,168.5c207.1,126.7,293-75.6,293-75.6,51.1-109.4,228.8-146.1,228.8-146.1C4870.5,3608.2,4963.5,3491.2,5003.9,3412Z" transform="translate(-4090.64 -3368.89)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                    <g class="step-4__map-shadow">
                        <path d="M4333.5,4353.2H4153.7c-2.8,0-5.1-4.1-5.1-9s2.3-9,5.1-9h179.8c2.8,0,5.1,4.1,5.1,9S4336.3,4353.2,4333.5,4353.2Z" transform="translate(-4090.64 -3368.89)" fill="#fff" opacity="0.3" style="isolation: isolate"/>
                        <path d="M4415.6,4353.2h-44a9,9,0,0,1,0-18h44a9,9,0,0,1,0,18Z" transform="translate(-4090.64 -3368.89)" fill="#fff" opacity="0.3" style="isolation: isolate"/>
                    </g>
                    <g class="step-4__plants">
                        <path d="M4703.3,3991.7l12,12.1,8.3-15.4m-7.9,15.4-3.5-21.5" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.56"/>
                        <path d="M4685.4,4043l12,12.1,8.3-15.4m-8,15.4-3.4-21.5" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.56"/>
                        <path d="M4743.3,4033.7l12,12.1,8.3-15.4m-8,15.3-3.4-21.4" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.56"/>
                    </g>
                    <g class="step-4__waves">
                        <g>
                        <path d="M4256.6,3665.1a15.46,15.46,0,0,1-28.1,12.9" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.09"/>
                        <path d="M4228.5,3678.1a15.46,15.46,0,0,1-28.1,12.9m112.4-51.7a15.46,15.46,0,0,1-28.1,12.9" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.09"/>
                        <path d="M4284.7,3652.2a15.46,15.46,0,1,1-28.1,12.9" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.09"/>
                        </g>
                        <g>
                        <path d="M4247.2,3714.1a15.46,15.46,0,1,1-28.1,12.9" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.09"/>
                        <path d="M4219.1,3727.1A15.46,15.46,0,0,1,4191,3740m136.9-63a15.46,15.46,0,1,1-28.1,12.9m56.3-25.9a15.46,15.46,0,0,1-28.1,12.9m-52.7,24.3a15.46,15.46,0,0,1-28.1,12.9" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.09"/>
                        </g>
                    </g>
                    <path class="step-4__legend-stroke" d="M5150.3,3935a9.87,9.87,0,0,1-5.2,13.1l-81,35a9.87,9.87,0,0,1-13.1-5.2L5005.3,3826a9.87,9.87,0,0,1,5.2-13.1l81-35a9.87,9.87,0,0,1,13.1,5.2Z" transform="translate(-4090.64 -3368.89)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
                </svg>
            </div>
            <h3 class="membership-widget__section-title">Do you take road trip over 100 km or travel to the U.S.?</h3>
            <a href="#" class="membership-widget__section-button membership-widget__section-button--no button button--header">No</a>
            <a href="#" class="membership-widget__section-button membership-widget__section-button--yes button button--header">Yes</a>
        </div>
    </div>
    <div class="membership-widget__section membership-widget__section--q3">
        <div class="membership-widget__content-container">
            <div class="membership-widget__svg-container">
                <svg class="step-5__container" opacity="0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 965.2 603.8">
                    <g class="step-5__passenger-right">
                        <path d="M4819,3844.5a14.56,14.56,0,0,1-13.9,10.2h-16.3a14.65,14.65,0,0,1-13.9-10.2c-56.9,10-100.5,59.9-100.5,119.6h245c.1-59.7-43.5-109.7-100.4-119.6Z" transform="translate(-3967.3 -3550.1)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                        <path d="M4755.8,3643.3s24.7,49.6,123.8,40.6a83.37,83.37,0,0,0-81.7-67.8c-40.1,0-73.8,28.8-81.5,66.8,8.7-2.4,32.3-11.2,39.4-39.6Z" transform="translate(-3967.3 -3550.1)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                        <path d="M4805.1,3819.8a83.35,83.35,0,0,1-83.1-83.1v-45.9a83.1,83.1,0,1,1,166.2,0v45.9A83.35,83.35,0,0,1,4805.1,3819.8Z" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="9.39"/>
                        <path d="M4704.8,3735.6a16.2,16.2,0,0,0,16.2,16.2v-32.4A16.2,16.2,0,0,0,4704.8,3735.6Z" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="9.39"/>
                        <path d="M4888.6,3719.4v32.4a16.2,16.2,0,1,0,0-32.4Z" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="9.39"/>
                        <path d="M4765.7,3743.4H4752a8.8,8.8,0,0,1,0-17.6h13.7a8.88,8.88,0,0,1,8.8,8.8A8.75,8.75,0,0,1,4765.7,3743.4Z" transform="translate(-3967.3 -3550.1)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                        <path d="M4857.7,3743.4H4844a8.8,8.8,0,0,1,0-17.6h13.7a8.88,8.88,0,0,1,8.8,8.8A8.75,8.75,0,0,1,4857.7,3743.4Z" transform="translate(-3967.3 -3550.1)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                        <path d="M4787.8,3773.9s15.4,7,34.5,0" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="9.39"/>
                        <path d="M4850.1,3711.1a3.9,3.9,0,0,1-3.9-3.9v-12.4a3.9,3.9,0,0,1,7.8,0v12.4A4,4,0,0,1,4850.1,3711.1Z" transform="translate(-3967.3 -3550.1)" fill="#fff"/>
                        <path d="M4758.9,3711.1a3.9,3.9,0,0,1-3.9-3.9v-12.4a3.9,3.9,0,0,1,7.8,0v12.4A4,4,0,0,1,4758.9,3711.1Z" transform="translate(-3967.3 -3550.1)" fill="#fff"/>
                        <path d="M4749.6,3661.5a49.31,49.31,0,0,0,16.2-26.6s24,48.3,121.1,38.3" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.26"/>
                        <path d="M4725.4,3673.2a52.42,52.42,0,0,0,12.5-4.2" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.26"/>
                        <path d="M4827.7,3819.8v9.5a14.51,14.51,0,0,1-14.5,14.5h-16.3a14.51,14.51,0,0,1-14.5-14.5v-9.1" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="9.68"/>
                        <path d="M4913.5,3953.2h14c0-59.2-43-108.9-99.3-119.4" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        <path d="M4873.5,3953.2h22.1" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10"/>
                        <path d="M4782,3833.8c-56.4,10.4-99.4,60.1-99.4,119.4h165.7" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        <path d="M4714.6,3640.4a102,102,0,0,0-12.7,49.4v137.4h78.6" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        <path d="M4723.6,3626.6a95.15,95.15,0,0,0-9,13.7" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        <path d="M4829.3,3827h78.9V3689.6c0-56.7-46.4-103.1-103.1-103.1a103.06,103.06,0,0,0-81.4,40" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                    </g>
                    <g class="step-5__passenger-left">
                        <g opacity="0.2">
                        <path d="M4095.3,3625.2v12c4.9,0,10.8-11.5,15.5-10.6s6.4,13.7,10.9,15.3,14-7.1,18.2-4.7,1.3,15,5,18.1,15.6-1.9,18.7,1.8-3.9,14.5-1.5,18.7,15.3,3.5,17,8-8.6,12.3-7.8,17.1,13.2,8.5,13.2,13.4c0,1.6-12,1.6-12,3.2s12,1.6,12,3.2-12,1.6-12,3.2,12,1.6,12,3.2-12,1.6-12,3.2,12,1.6,12,3.2-12,1.6-12,3.2,12,1.6,12,3.2-10.8,7.1-9.5,8.1c1.6-2,1.6-12.4,3.1-14.5s13,2,14.3-.3-8.1-10.1-7-12.5,13.2,0,14.1-2.4-9.6-8.8-8.8-11.3,13-1.9,13.6-4.5-10.7-7.3-10.4-9.9,12.6-3.8,12.8-6.4-11.7-5.6-11.7-8.2c0-6.3,11.4-13.4,10.3-19.4s-14.2-9-16.3-14.7,6.1-16.4,3-21.7-16.4-3.5-20.4-8.2.1-17.5-4.6-21.5-16.6,2.3-21.9-.8-5.8-16.5-11.6-18.6-14.7,7.9-20.9,6.8c-6-1-11-13.5-17.3-13.5s-11.3,12.5-17.3,13.5-15.2-8.9-20.9-6.8-6.3,15.6-11.6,18.6-17.2-3.2-21.9.8-.6,16.8-4.6,21.5-17.3,2.9-20.4,8.2,5.2,15.9,3,21.7-15.2,8.6-16.3,14.7,10.3,13.1,10.3,19.4c0,2.6-11.9,5.7-11.7,8.2s12.4,3.9,12.8,6.4-10.9,7.3-10.4,9.9,12.8,2,13.6,4.5-9.7,8.9-8.8,11.3,13,.1,14.1,2.4-8.3,10.2-7,12.5,12.9-1.8,14.3.3,1.5,12.5,3.1,14.5c1.3-.9-9.5-6.5-9.5-8.1s12-1.6,12-3.2-12-1.6-12-3.2,12-1.6,12-3.2-12-1.6-12-3.2,12-1.6,12-3.2-12-1.6-12-3.2,12-1.6,12-3.2-12-1.6-12-3.2c0-4.9,12.3-8.7,13.2-13.4s-9.4-12.6-7.8-17.1,14.6-3.9,17-8-4.6-15-1.4-18.7,15,1.3,18.7-1.8.8-15.7,5-18.1,13.6,6.3,18.2,4.7,6.1-14.5,10.9-15.3a86.49,86.49,0,0,1,15.4-1.4Z" transform="translate(-3967.3 -3550.1)" fill="#fff"/>
                        </g>
                        <path d="M4122.6,3820.3v9.5a14.51,14.51,0,0,1-14.5,14.5h-16.3a14.51,14.51,0,0,1-14.5-14.5v-9.1" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="9.68"/>
                        <path d="M4183,3698.9v40.2a83.1,83.1,0,0,1-166.2,0V3704" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="9.39"/>
                        <path d="M4009.8,3713.9c0-.7,14-.7,14-1.3s-14-.7-14-1.3,14-.7,14-1.3-14-.7-14-1.3,14-.7,14-1.3-14-.7-14-1.3,14-.7,14-1.3-14-.7-14-1.3c0-5.5,14.4-9.6,15.5-14.8,1.1-5.4-10.6-14.7-8.6-19.6s17-3.2,20-7.7-4.3-17.6-.4-21.4,16.9,3.5,21.4.4,2.7-17.9,7.7-20,14.2,9.6,19.6,8.6c5.2-1,9.3-15.5,14.8-15.5v0c5.5,0,9.6,14.4,14.8,15.5,5.4,1.1,14.7-10.6,19.6-8.6s3.2,17,7.7,20,17.6-4.3,21.4-.4-3.5,16.9-.4,21.4,17.9,2.7,20,7.7-9.6,14.2-8.6,19.6c1,5.2,15.5,9.3,15.5,14.8,0,.4-14,.4-14,.7s14,.4,14,.7-14,.4-14,.7,14,.4,14,.7-14,.4-14,.7,14,.4,14,.7-14,.4-14,.7,14,.4,14,.7" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="9.39"/>
                        <path d="M3999.6,3738a16.2,16.2,0,0,0,16.2,16.2v-32.4A16.26,16.26,0,0,0,3999.6,3738Z" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="9.39"/>
                        <path d="M4183.5,3721.8v32.4a16.2,16.2,0,1,0,0-32.4Z" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="9.39"/>
                        <path d="M4082.7,3776.3s15.4,7,34.5,0" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="9.39"/>
                        <path d="M4145,3713.5a3.9,3.9,0,0,1-3.9-3.9v-12.4a3.9,3.9,0,0,1,7.8,0v12.4A4,4,0,0,1,4145,3713.5Z" transform="translate(-3967.3 -3550.1)" fill="#fff"/>
                        <path d="M4053.8,3713.5a3.9,3.9,0,0,1-3.9-3.9v-12.4a3.9,3.9,0,0,1,7.8,0v12.4A4,4,0,0,1,4053.8,3713.5Z" transform="translate(-3967.3 -3550.1)" fill="#fff"/>
                        <path d="M4008.9,3731.3c-1.4-2,7.3-10.6,6-12.7s-12.9,1.8-14-.4,8.7-9.5,7.7-11.7-13,0-13.8-2.3,9.9-8.2,9.2-10.5-12.9-1.8-13.4-4.2,10.9-6.8,10.6-9.2-12.5-3.6-12.7-6,11.7-5.2,11.7-7.6c0-6.3-11.4-13.4-10.3-19.4s14.2-9,16.3-14.7-6.1-16.4-3-21.7,16.4-3.5,20.4-8.2-.1-17.5,4.6-21.5,16.6,2.3,21.9-.8,5.8-16.5,11.6-18.6,14.7,7.9,20.9,6.8c6-1,11-13.5,17.3-13.5s11.3,12.5,17.3,13.5,15.2-8.9,20.9-6.8,6.3,15.6,11.6,18.6,17.2-3.2,21.9.8.6,16.8,4.6,21.5,17.3,2.9,20.4,8.2-5.2,15.9-3,21.7,15.2,8.6,16.3,14.7-10.3,13.1-10.3,19.4c0,2.3,11.9,5,11.8,7.3s-12.3,3.5-12.6,5.7,11.2,6.5,10.7,8.8-12.7,1.8-13.3,4,10.2,8,9.4,10.1-12.8.1-13.7,2.2,9.1,9.2,8,11.3-12.7-1.6-13.9.4,7.8,10.3,6.5,12.3" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        <path d="M4111.9,3844.5a14.56,14.56,0,0,1-13.9,10.2h-16.3a14.65,14.65,0,0,1-13.9-10.2c-56.9,10-100.5,59.9-100.5,119.6h245C4212.4,3904.4,4168.8,3854.4,4111.9,3844.5Z" transform="translate(-3967.3 -3550.1)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                        <path d="M4056.5,3953.7h165.9c0-59.5-43.3-109.3-100-119.5" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        <path d="M4030,3953.7h11.5" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                        <path d="M4076.8,3834.3c-56.4,10.4-99.4,60.1-99.4,119.4h32.3" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
                    </g>
                    <g class="step-5__driver">
                        <path d="M4445.5,3949.9c-58.4,0-106.2-47.8-106.2-106.2v-58.6c0-58.4,47.8-106.2,106.2-106.2s106.2,47.8,106.2,106.2v58.6C4551.6,3902.1,4503.9,3949.9,4445.5,3949.9Z" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                        <path d="M4445.5,3875.2c-58.4,0-106.2-27.8-106.2-86.2v54.7c0,58.4,47.8,106.2,106.2,106.2s106.2-47.8,106.2-106.2V3789C4551.6,3847.5,4503.9,3875.2,4445.5,3875.2Z" transform="translate(-3967.3 -3550.1)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                        <path d="M4317.4,3842.4a20.74,20.74,0,0,0,20.7,20.7v-41.3A20.53,20.53,0,0,0,4317.4,3842.4Z" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                        <path d="M4552.2,3821.7V3863a20.65,20.65,0,1,0,0-41.3Z" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                        <path d="M4423.5,3891.3s19.6,8.9,44,0" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8"/>
                        <path d="M4503,3811.1a5,5,0,0,1-5-5v-15.9a5,5,0,1,1,10,0v15.9A5,5,0,0,1,4503,3811.1Z" transform="translate(-3967.3 -3550.1)" fill="#fff"/>
                        <path d="M4386.5,3811.1a5,5,0,0,1-5-5v-15.9a5,5,0,1,1,10,0v15.9A5.15,5.15,0,0,1,4386.5,3811.1Z" transform="translate(-3967.3 -3550.1)" fill="#fff"/>
                        <path d="M4473.6,3945.8v11.8a18.05,18.05,0,0,1-18,18h-20.2a18.05,18.05,0,0,1-18-18v-11.2" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="8"/>
                        <path d="M4416.9,3965.5c-78.6,13-139,81.7-139,163.9H4315" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                        <path d="M4542.6,3993.7a165.15,165.15,0,0,0-68.4-28.2" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                        <path d="M4566.3,4014.1c-2-2.1-4.1-4.2-6.3-6.2" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                        <path d="M4577.2,4129.4h35.9a164.7,164.7,0,0,0-35.1-101.8" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                        <path d="M4440.4,4051.2a82.74,82.74,0,0,1,67,34.1c.1-.5.2-1,.3-1.4a18.19,18.19,0,0,1,10.9-12.5l5.4-10.7c1.6-.6,4.3,3,5.9,2.9-20.8-28.6-51.6-44.1-89.6-44.1s-65.7,11.5-86.6,40c2.1,0,1.2.4,3.2,1.2l6.4,1.7c5.7,2.2,17.6,12,18.9,17.5,15.4-19.8,31.3-28.7,58.2-28.7Z" transform="translate(-3967.3 -3550.1)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                        <path d="M4428.5,4137.1a13.2,13.2,0,0,0,26.4,0,11.62,11.62,0,0,0-1-4.9h-24.5a13.32,13.32,0,0,0-.9,4.9Z" transform="translate(-3967.3 -3550.1)" fill="none"/>
                        <path d="M4441.7,4123.9a13,13,0,0,0-12.2,8.3H4454A13.47,13.47,0,0,0,4441.7,4123.9Z" transform="translate(-3967.3 -3550.1)" fill="none"/>
                        <g>
                        <path d="M4362,4126.7h.7a9.69,9.69,0,0,0-.1-1.7Z" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8"/>
                        <path d="M4379.5,4072.7a18.19,18.19,0,0,0-10.9-12.5l-9.4-3.7a16.67,16.67,0,0,0-6.2-1.2,18.18,18.18,0,0,0-17.1,11.4l-17.8,45.7a18.05,18.05,0,0,0,10.2,23.3l9.4,3.7a18.05,18.05,0,0,0,23.3-10.2l.9-2.4.7-1.7,16.2-41.6a17.53,17.53,0,0,0,.7-10.8Z" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8"/>
                        <path d="M4366.8,4039.5a116.43,116.43,0,0,0-13.9,15.8,16.67,16.67,0,0,1,6.2,1.2l9.4,3.7a17.74,17.74,0,0,1,10.9,12.5,82.91,82.91,0,0,1,133,1.4c.1-.5.2-1,.3-1.4a18.19,18.19,0,0,1,10.9-12.5l9.4-3.7a17.32,17.32,0,0,1,4.9-1.1,114.55,114.55,0,0,0-150.3-31.5" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8"/>
                        <path d="M4528.4,4121.6v1.2c0,1.3,0,2.6-.1,3.9h2.1l-.7-1.7Z" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8"/>
                        <path d="M4574.3,4112.4l-17.8-45.7a18,18,0,0,0-17.1-11.4,5.69,5.69,0,0,0-1.3.1,16.59,16.59,0,0,0-4.9,1.1l-9.4,3.7a17.74,17.74,0,0,0-10.9,12.5c-.1.5-.2.9-.3,1.4a17.93,17.93,0,0,0,1,9.4l14.9,38.1,1.3,3.4.7,1.7.9,2.4a18.05,18.05,0,0,0,23.3,10.2l9.4-3.7a17.91,17.91,0,0,0,10.2-23.2Z" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8"/>
                        <path d="M4432.3,4126.7a13.2,13.2,0,1,1,24.5,6.8h70.5c1.1-1.4-3.9-2.7-2.9-4.2a96.7,96.7,0,0,1-68.7-81,84.5,84.5,0,0,0-10.2-.7,70,70,0,0,0-10.2.7,96.81,96.81,0,0,1-68.8,81c1,1.4-4,2.8-2.9,4.1h70.5a13.39,13.39,0,0,1-1.8-6.7Z" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                        <path d="M4445.5,4113.5a13.18,13.18,0,0,0-11.3,20h22.6a13.18,13.18,0,0,0-11.3-20Z" transform="translate(-3967.3 -3550.1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                        </g>
                        <path d="M4427.3,4140.7a13.2,13.2,0,1,0,26.4,0,14.3,14.3,0,0,0-.3-2.9h-25.8a13.56,13.56,0,0,0-.3,2.9Z" transform="translate(-3967.3 -3550.1)" fill="none"/>
                        <path d="M4440.5,4127.4a13.2,13.2,0,0,0-12.9,10.3h25.8A13.3,13.3,0,0,0,4440.5,4127.4Z" transform="translate(-3967.3 -3550.1)" fill="none"/>
                        <path d="M4440.5,4127.4a13.2,13.2,0,0,1,12.9,10.3H4505a96.87,96.87,0,0,1-54.3-75.5,84.5,84.5,0,0,0-10.2-.7,69,69,0,0,0-10.2.7,96.87,96.87,0,0,1-54.3,75.5h51.5A13.5,13.5,0,0,1,4440.5,4127.4Z" transform="translate(-3967.3 -3550.1)" fill="#fff" opacity="0.2" style="isolation: isolate"/>
                    </g>
                    </svg>


            </div>
            <h3 class="membership-widget__section-title">Do you have more than one driver in your household?</h3>
            <a href="#" class="membership-widget__section-button membership-widget__section-button--no button button--header">No</a>
            <a href="#" class="membership-widget__section-button membership-widget__section-button--yes button button--header">Yes</a>
        </div>
    </div>
    <div class="membership-widget__section membership-widget__section--result">
        <div class="membership-widget__content-container">
            <div class="membership-widget__svg-container membership-widget__svg-container--result membership-widget__svg-container--result-basic">
                <svg opacity="0" class="svg-result__container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1020.9 892">
                    <g>
                        <ellipse class="svg-result__fill svg-result__circle-fill" cx="309.5" cy="477.3" rx="56" ry="41.7" fill="#fff" opacity="0" style="isolation: isolate"/>
                        <g opacity="0" class="svg-result__card-label">
                            <path d="M422.5,443.8h12.8a34,34,0,0,1,4.5.3,13.14,13.14,0,0,1,4.1,1.3,10.4,10.4,0,0,1,2.9,2.6,7.71,7.71,0,0,1,1.1,4.5,8,8,0,0,1-1.6,4.9,8.38,8.38,0,0,1-4.3,2.7v.1a10.25,10.25,0,0,1,3.1,1,8.36,8.36,0,0,1,2.3,1.8,9.63,9.63,0,0,1,1.6,2.5,8.08,8.08,0,0,1,.5,3.1,8.52,8.52,0,0,1-1.2,4.6,8.34,8.34,0,0,1-3,2.9,11.83,11.83,0,0,1-4.2,1.6,24.87,24.87,0,0,1-4.6.5H422.4l.1-34.4Zm7.6,13.8h5.4a8.8,8.8,0,0,0,1.7-.2,4.42,4.42,0,0,0,1.6-.6,3.18,3.18,0,0,0,1.1-1.2,3.29,3.29,0,0,0,.4-1.7,2.86,2.86,0,0,0-.5-1.7,2.54,2.54,0,0,0-1.2-1.1,10.41,10.41,0,0,0-1.6-.6,11.14,11.14,0,0,0-1.7-.2h-5.1v7.3Zm0,14.1h6.8a8.8,8.8,0,0,0,1.7-.2,3.9,3.9,0,0,0,1.6-.7,3.74,3.74,0,0,0,1.2-1.3,3.83,3.83,0,0,0,.5-1.9,2.71,2.71,0,0,0-.6-1.9,4,4,0,0,0-1.6-1.2,4.49,4.49,0,0,0-1.9-.5,15,15,0,0,0-2-.2h-5.7v7.9Zm37.7,3.5a7.22,7.22,0,0,1-3.3,2.7,10.29,10.29,0,0,1-4.3.8,11.85,11.85,0,0,1-3.2-.5,7.69,7.69,0,0,1-2.7-1.4,5.78,5.78,0,0,1-1.8-2.3,6.17,6.17,0,0,1-.7-3.1,6.83,6.83,0,0,1,.8-3.4,6.42,6.42,0,0,1,2-2.3,11.31,11.31,0,0,1,2.9-1.5,33.84,33.84,0,0,1,3.4-.8,20.68,20.68,0,0,1,3.5-.3h3.3a4,4,0,0,0-1.4-3.1,5,5,0,0,0-3.3-1.2,7.31,7.31,0,0,0-3.3.8,10,10,0,0,0-2.6,2l-3.9-4a12.18,12.18,0,0,1,4.8-2.8,15.4,15.4,0,0,1,5.6-1,14.94,14.94,0,0,1,5.2.8,8.89,8.89,0,0,1,3.3,2.3,8.25,8.25,0,0,1,1.7,3.8,26.2,26.2,0,0,1,.5,5.2v11.9h-6.7l.2-2.6Zm-1.7-7.3a14.09,14.09,0,0,0-2,.1,8.52,8.52,0,0,0-2.3.4,3.56,3.56,0,0,0-1.9,1.1,2.17,2.17,0,0,0-.8,1.8,1.94,1.94,0,0,0,1.1,1.9,5.49,5.49,0,0,0,2.3.7,6.45,6.45,0,0,0,2-.3,3.93,3.93,0,0,0,1.7-.9,4.36,4.36,0,0,0,1.3-1.4,4.14,4.14,0,0,0,.5-1.9v-1.6h-1.9Zm26.4-6.3a4.89,4.89,0,0,0-4.3-1.9,3.37,3.37,0,0,0-1.7.5,1.55,1.55,0,0,0-.9,1.5,1.38,1.38,0,0,0,.9,1.3,19.92,19.92,0,0,0,2.3.8c.9.2,1.9.5,2.9.7a7.44,7.44,0,0,1,2.9,1.2,7.71,7.71,0,0,1,2.3,2.1,6.18,6.18,0,0,1,.9,3.6,6.32,6.32,0,0,1-1,3.8,11.34,11.34,0,0,1-2.5,2.4,13.31,13.31,0,0,1-3.5,1.3,25.79,25.79,0,0,1-3.9.4,16.59,16.59,0,0,1-4.9-.7,10.38,10.38,0,0,1-4.3-2.5l4.4-4.9a7.46,7.46,0,0,0,2.2,1.9,5.2,5.2,0,0,0,2.9.7,5.56,5.56,0,0,0,2.3-.4,1.39,1.39,0,0,0,1.1-1.4,1.51,1.51,0,0,0-.9-1.4,10.22,10.22,0,0,0-2.3-.8c-.9-.2-1.9-.5-2.9-.7a9.19,9.19,0,0,1-2.9-1.1,7.4,7.4,0,0,1-2.3-2,6.18,6.18,0,0,1-.9-3.6,6.87,6.87,0,0,1,.9-3.6,8.53,8.53,0,0,1,2.2-2.4,7.91,7.91,0,0,1,3.2-1.5,15,15,0,0,1,3.7-.5,16.41,16.41,0,0,1,4.8.7,9.54,9.54,0,0,1,4,2.4l-4.7,4.1Zm8.6-14.4a4,4,0,0,1,1.3-3,4.34,4.34,0,0,1,3-1.3,4,4,0,0,1,3,1.3,4.34,4.34,0,0,1,1.3,3,4,4,0,0,1-1.3,3,4.34,4.34,0,0,1-3,1.3,4.45,4.45,0,0,1-4.3-4.3Zm.6,7.4H509v23.6h-7.3Zm28.4,7.6a4.17,4.17,0,0,0-1.6-1.3,5.34,5.34,0,0,0-2-.5,6,6,0,0,0-4.3,1.6,5.73,5.73,0,0,0-1.6,4.3,6.13,6.13,0,0,0,1.6,4.4,5.44,5.44,0,0,0,4.3,1.6,3.68,3.68,0,0,0,2-.5,10.1,10.1,0,0,0,1.6-1.3l4.8,5a9.15,9.15,0,0,1-4,2.4,14.56,14.56,0,0,1-9.5-.2,14.62,14.62,0,0,1-4.2-2.5,12.3,12.3,0,0,1-3.9-8.9,11.48,11.48,0,0,1,1.1-5,11.14,11.14,0,0,1,2.8-3.9,11.74,11.74,0,0,1,4.2-2.5,14.56,14.56,0,0,1,9.5-.2,9.54,9.54,0,0,1,4,2.4l-4.8,5.1Z" fill="#fff"/>
                        </g>
                        <path class="svg-result__label-divider svg-result__card-stroke--quick" d="M389.5,497.2a4.37,4.37,0,0,1-4.4-4.4V436.5a4.4,4.4,0,0,1,8.8,0v56.3A4.51,4.51,0,0,1,389.5,497.2Z" fill="#fff" opacity="0"/>
                        <path class="svg-result__fill svg-result__background-fill" d="M846,761.1V492.7a663.12,663.12,0,0,0-105.6-8.4c-249.3,0-455.7,137.2-489.9,315.7H807.2A39.05,39.05,0,0,0,846,761.1Z" fill="#fff" opacity="0" style="isolation: isolate"/>
                        <g opacity="0" class="svg-result__shadows svg-result__fill">
                            <path class="svg-result__shadow-1 svg-result__shadow" d="M624.6,892H317.3a8.7,8.7,0,1,1,0-17.4H624.5a8.71,8.71,0,0,1,8.7,8.7A8.56,8.56,0,0,1,624.6,892Z" fill="#fff"/>
                            <path class="svg-result__shadow-2 svg-result__shadow" d="M708.1,892H665.4a8.7,8.7,0,0,1,0-17.4h42.7a8.7,8.7,0,0,1,0,17.4Z" fill="#fff"/>
                        </g>
                        <path opacity="0.3" class="svg-result__radiate" d="M71.5,444.8l-65-28.4M332.7,189.1l-27.6-65.3M172.5,292.4l-103-102M949.4,444.8l65-28.4M688.2,189.1l27.6-65.3M848.4,292.4l103-102m-441.3-39,.3-144.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="13"/>
                        <ellipse class="svg-result__circle-stroke svg-result__card-stroke--quick" cx="302.6" cy="464.7" rx="57.7" ry="43" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="12"/>
                        <g>
                        <path class="svg-result__card-stroke svg-result__card-outline" d="M699.7,783.9H234.3a38.88,38.88,0,0,1-38.8-38.7V400.1a38.88,38.88,0,0,1,38.8-38.7H791.7a38.88,38.88,0,0,1,38.8,38.7V745.2a38.88,38.88,0,0,1-38.8,38.7H757.8" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                        <path class="svg-result__card-stroke svg-result__card-outline" d="M736.1,783.9H721.6" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                        </g>
                        <path class="svg-result__card-details" d="M253.5,664.3H582M253.5,719.8H337m31.5,0H452m31.5,0H567m31.4,0h83.5" opacity="0" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="16"/>
                    </g>
                </svg>
            </div>
            <div class="membership-widget__svg-container membership-widget__svg-container--result membership-widget__svg-container--result-premier">
                <svg opacity="0" class="svg-result__container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1020.9 892">
                    <g>
                        <ellipse class="svg-result__fill svg-result__circle-fill" cx="309.5" cy="477.3" rx="56" ry="41.7" fill="#fff" opacity="0" style="isolation: isolate"/>
                        <g opacity="0" class="svg-result__card-label">
                           <path d="M950.1,924.6h13.1a28.67,28.67,0,0,1,5.2.5,11.74,11.74,0,0,1,4.3,1.7,8.47,8.47,0,0,1,2.9,3.3,13.4,13.4,0,0,1,.1,10.4,9.32,9.32,0,0,1-2.8,3.4,12.4,12.4,0,0,1-4.2,1.8,21.36,21.36,0,0,1-5.2.5h-5.7V960H950V924.6Zm7.8,15h5.2a12.31,12.31,0,0,0,2-.2,5.62,5.62,0,0,0,1.8-.7,3.75,3.75,0,0,0,1.2-1.3,4.07,4.07,0,0,0,.5-2.1,3.8,3.8,0,0,0-.6-2.2,5.09,5.09,0,0,0-1.6-1.3,7.09,7.09,0,0,0-2.2-.6,18.48,18.48,0,0,0-2.3-.1h-4Z" transform="translate(-539.5 -477.6)" fill="#fff"/> <path id="_Path_8" data-name="&lt;Path&gt;" d="M980.6,935.7h7.5v3.9h.1a10.85,10.85,0,0,1,2.8-3.4,6.93,6.93,0,0,1,4.2-1.1,5.7,5.7,0,0,1,1.3.1,5,5,0,0,1,1.2.2v6.9a9.36,9.36,0,0,0-1.6-.4,8.6,8.6,0,0,0-1.6-.1,8,8,0,0,0-3.4.6,4.51,4.51,0,0,0-1.9,1.7,6.66,6.66,0,0,0-.9,2.6,32.48,32.48,0,0,0-.2,3.3v10.2h-7.5Z" transform="translate(-539.5 -477.6)" fill="#fff"/> <path d="M1023.1,955.8a11.94,11.94,0,0,1-4.5,3.5,13.88,13.88,0,0,1-5.7,1.2,15.53,15.53,0,0,1-5.3-.9,12.37,12.37,0,0,1-4.3-2.6,12.33,12.33,0,0,1-4-9.2,12.39,12.39,0,0,1,1.1-5.2,11.79,11.79,0,0,1,2.9-4,12.38,12.38,0,0,1,4.3-2.6,15.12,15.12,0,0,1,5.3-.9,11.94,11.94,0,0,1,4.7.9,10.4,10.4,0,0,1,3.6,2.6,13.08,13.08,0,0,1,2.3,4,17.18,17.18,0,0,1,.8,5.2v2.4h-17.4a5.88,5.88,0,0,0,2,3.4,5.73,5.73,0,0,0,3.7,1.3,5.94,5.94,0,0,0,3.1-.8,8.74,8.74,0,0,0,2.2-2.1Zm-6.4-10.7a4.54,4.54,0,0,0-1.2-3.2,4.45,4.45,0,0,0-3.3-1.3,5.09,5.09,0,0,0-2.2.4,6.24,6.24,0,0,0-1.6,1,3.07,3.07,0,0,0-1,1.5,5.25,5.25,0,0,0-.4,1.7h9.7Z" transform="translate(-539.5 -477.6)" fill="#fff"/> <path id="_Path_9" data-name="&lt;Path&gt;" d="M1028.8,935.7h7.2V939h.1a6.09,6.09,0,0,1,1-1.4,5.66,5.66,0,0,1,1.5-1.2,7.22,7.22,0,0,1,2-.9,9.07,9.07,0,0,1,7,.7,6.93,6.93,0,0,1,3,3.3,8.14,8.14,0,0,1,3.2-3.4,9.07,9.07,0,0,1,4.5-1,10,10,0,0,1,4.1.8,7.29,7.29,0,0,1,2.7,2.2,11.56,11.56,0,0,1,1.4,3.4,18.41,18.41,0,0,1,.4,4.1v14.3h-7.5V945.7a5.43,5.43,0,0,0-.7-2.9,2.75,2.75,0,0,0-2.6-1.2,4.81,4.81,0,0,0-2.2.4,4.07,4.07,0,0,0-1.4,1.2,4.94,4.94,0,0,0-.8,1.8,7.48,7.48,0,0,0-.2,2.1v12.8H1044V945.5a11.31,11.31,0,0,0-.3-1.8,3.61,3.61,0,0,0-1-1.5,3,3,0,0,0-2-.6,5.36,5.36,0,0,0-2.4.5,3.76,3.76,0,0,0-1.4,1.4,5.88,5.88,0,0,0-.6,2,16.93,16.93,0,0,0-.1,2.3v12.1h-7.5V935.7Z" transform="translate(-539.5 -477.6)" fill="#fff"/> <path d="M1071.8,928.1a4.16,4.16,0,0,1,1.3-3.1,4.39,4.39,0,0,1,3.1-1.3,4.16,4.16,0,0,1,3.1,1.3,4.57,4.57,0,0,1,1.3,3.1,4.16,4.16,0,0,1-1.3,3.1,4.57,4.57,0,0,1-3.1,1.3,4.44,4.44,0,0,1-4.4-4.4Zm.6,7.6h7.5V960h-7.5Z" transform="translate(-539.5 -477.6)" fill="#fff"/> <path d="M1108.3,955.8a11.94,11.94,0,0,1-4.5,3.5,13.88,13.88,0,0,1-5.7,1.2,15.53,15.53,0,0,1-5.3-.9,12.37,12.37,0,0,1-4.3-2.6,12.33,12.33,0,0,1-4-9.2,12.39,12.39,0,0,1,1.1-5.2,11.79,11.79,0,0,1,2.9-4,12.38,12.38,0,0,1,4.3-2.6,15.12,15.12,0,0,1,5.3-.9,11.94,11.94,0,0,1,4.7.9,10.4,10.4,0,0,1,3.6,2.6,13.08,13.08,0,0,1,2.3,4,17.18,17.18,0,0,1,.8,5.2v2.4H1092a5.88,5.88,0,0,0,2,3.4,5.73,5.73,0,0,0,3.7,1.3,5.94,5.94,0,0,0,3.1-.8,8.74,8.74,0,0,0,2.2-2.1Zm-6.4-10.7a4.54,4.54,0,0,0-1.2-3.2,4.45,4.45,0,0,0-3.3-1.3,5.09,5.09,0,0,0-2.2.4,6.24,6.24,0,0,0-1.6,1,3.07,3.07,0,0,0-1,1.5,5.25,5.25,0,0,0-.4,1.7h9.7Z" transform="translate(-539.5 -477.6)" fill="#fff"/> <path id="_Path_10" data-name="&lt;Path&gt;" d="M1114,935.7h7.5v3.9h.1a10.85,10.85,0,0,1,2.8-3.4,6.93,6.93,0,0,1,4.2-1.1,5.7,5.7,0,0,1,1.3.1,5,5,0,0,1,1.2.2v6.9a9.36,9.36,0,0,0-1.6-.4,8.6,8.6,0,0,0-1.6-.1,8,8,0,0,0-3.4.6,4.51,4.51,0,0,0-1.9,1.7,6.66,6.66,0,0,0-.9,2.6,32.48,32.48,0,0,0-.2,3.3v10.2H1114Z" transform="translate(-539.5 -477.6)" fill="#fff"/>
                        </g>
                        <path class="svg-result__label-divider svg-result__card-stroke--quick" d="M389.5,497.2a4.37,4.37,0,0,1-4.4-4.4V436.5a4.4,4.4,0,0,1,8.8,0v56.3A4.51,4.51,0,0,1,389.5,497.2Z" fill="#fff" opacity="0"/>
                        <path class="svg-result__fill svg-result__background-fill" d="M846,761.1V492.7a663.12,663.12,0,0,0-105.6-8.4c-249.3,0-455.7,137.2-489.9,315.7H807.2A39.05,39.05,0,0,0,846,761.1Z" fill="#fff" opacity="0" style="isolation: isolate"/>
                        <g opacity="0" class="svg-result__shadows svg-result__fill">
                            <path class="svg-result__shadow-1 svg-result__shadow" d="M624.6,892H317.3a8.7,8.7,0,1,1,0-17.4H624.5a8.71,8.71,0,0,1,8.7,8.7A8.56,8.56,0,0,1,624.6,892Z" fill="#fff"/>
                            <path class="svg-result__shadow-2 svg-result__shadow" d="M708.1,892H665.4a8.7,8.7,0,0,1,0-17.4h42.7a8.7,8.7,0,0,1,0,17.4Z" fill="#fff"/>
                        </g>
                        <path opacity="0.3" class="svg-result__radiate" d="M71.5,444.8l-65-28.4M332.7,189.1l-27.6-65.3M172.5,292.4l-103-102M949.4,444.8l65-28.4M688.2,189.1l27.6-65.3M848.4,292.4l103-102m-441.3-39,.3-144.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="13"/>
                        <ellipse class="svg-result__circle-stroke svg-result__card-stroke--quick" cx="302.6" cy="464.7" rx="57.7" ry="43" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="12"/>
                        <g>
                        <path class="svg-result__card-stroke svg-result__card-outline" d="M699.7,783.9H234.3a38.88,38.88,0,0,1-38.8-38.7V400.1a38.88,38.88,0,0,1,38.8-38.7H791.7a38.88,38.88,0,0,1,38.8,38.7V745.2a38.88,38.88,0,0,1-38.8,38.7H757.8" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                        <path class="svg-result__card-stroke svg-result__card-outline" d="M736.1,783.9H721.6" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                        </g>
                        <path class="svg-result__card-details" d="M253.5,664.3H582M253.5,719.8H337m31.5,0H452m31.5,0H567m31.4,0h83.5" opacity="0" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="16"/>
                    </g>
                </svg>
            </div>
             <div class="membership-widget__svg-container membership-widget__svg-container--result membership-widget__svg-container--result-plus">
                <svg opacity="0" class="svg-result__container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1020.9 892">
                    <g>
                        <ellipse class="svg-result__fill svg-result__circle-fill" cx="309.5" cy="477.3" rx="56" ry="41.7" fill="#fff" opacity="0" style="isolation: isolate"/>
                        <g opacity="0" class="svg-result__card-label">
                            <path d="M955.5,924.7h13.1a28.67,28.67,0,0,1,5.2.5,11.74,11.74,0,0,1,4.3,1.7,8.47,8.47,0,0,1,2.9,3.3,13.4,13.4,0,0,1,.1,10.4,9.32,9.32,0,0,1-2.8,3.4,12.4,12.4,0,0,1-4.2,1.8,21.36,21.36,0,0,1-5.2.5h-5.7v13.8h-7.8V924.7Zm7.8,15h5.2a12.31,12.31,0,0,0,2-.2,5.62,5.62,0,0,0,1.8-.7,3.75,3.75,0,0,0,1.2-1.3,4.07,4.07,0,0,0,.5-2.1,3.8,3.8,0,0,0-.6-2.2,5.09,5.09,0,0,0-1.6-1.3,7.09,7.09,0,0,0-2.2-.6,18.48,18.48,0,0,0-2.3-.1h-4Z" transform="translate(-539.5 -477.6)" fill="#fff"/>
                            <path d="M986.1,922.3h7.5v37.8h-7.5Z" transform="translate(-539.5 -477.6)" fill="#fff"/>
                            <path data-name="&lt;Path&gt;" d="M1022.4,960.1h-7.2v-3.3h-.1a12.12,12.12,0,0,1-1,1.4,4.43,4.43,0,0,1-1.5,1.2,7.22,7.22,0,0,1-2,.9,10.07,10.07,0,0,1-2.5.3,10.18,10.18,0,0,1-4.6-.9,7.32,7.32,0,0,1-2.8-2.4,8.15,8.15,0,0,1-1.3-3.6,32.27,32.27,0,0,1-.3-4.6V935.7h7.5v11.9a16.93,16.93,0,0,0,.1,2.2,7.13,7.13,0,0,0,.4,2.1,3.11,3.11,0,0,0,1.2,1.6,3.59,3.59,0,0,0,2.2.6,5.68,5.68,0,0,0,2.4-.5,3.16,3.16,0,0,0,1.4-1.4,5.88,5.88,0,0,0,.6-2,16.93,16.93,0,0,0,.1-2.3V935.8h7.5v24.3Z" transform="translate(-539.5 -477.6)" fill="#fff"/>
                            <path d="M1041.5,942.9a5.08,5.08,0,0,0-4.3-2,4.07,4.07,0,0,0-1.8.5,1.55,1.55,0,0,0-.9,1.5,1.38,1.38,0,0,0,.9,1.3,16.68,16.68,0,0,0,2.4.8c.9.2,2,.5,3,.7a7.89,7.89,0,0,1,3,1.2,8,8,0,0,1,2.3,2.2,6.53,6.53,0,0,1,.9,3.7,6.65,6.65,0,0,1-1,3.9,10.31,10.31,0,0,1-2.6,2.5,14,14,0,0,1-3.6,1.3,27.11,27.11,0,0,1-4,.4,19.11,19.11,0,0,1-5.2-.7,8.94,8.94,0,0,1-4.4-2.6l4.5-5a8.48,8.48,0,0,0,2.3,2,5.56,5.56,0,0,0,3,.7,5.27,5.27,0,0,0,2.3-.4,1.39,1.39,0,0,0,1.1-1.4,1.51,1.51,0,0,0-.9-1.4,10.22,10.22,0,0,0-2.3-.8c-1-.2-2-.5-3-.7a9.77,9.77,0,0,1-3-1.1,6.89,6.89,0,0,1-2.4-2.1,6.53,6.53,0,0,1-.9-3.7,7.24,7.24,0,0,1,.9-3.7,6.91,6.91,0,0,1,2.3-2.5,9.06,9.06,0,0,1,3.3-1.5,15.8,15.8,0,0,1,8.6.2,10,10,0,0,1,4.2,2.5Z" transform="translate(-539.5 -477.6)" fill="#fff"/>
                        </g>
                        <path class="svg-result__label-divider svg-result__card-stroke--quick" d="M389.5,497.2a4.37,4.37,0,0,1-4.4-4.4V436.5a4.4,4.4,0,0,1,8.8,0v56.3A4.51,4.51,0,0,1,389.5,497.2Z" fill="#fff" opacity="0"/>
                        <path class="svg-result__fill svg-result__background-fill" d="M846,761.1V492.7a663.12,663.12,0,0,0-105.6-8.4c-249.3,0-455.7,137.2-489.9,315.7H807.2A39.05,39.05,0,0,0,846,761.1Z" fill="#fff" opacity="0" style="isolation: isolate"/>
                        <g opacity="0" class="svg-result__shadows svg-result__fill">
                            <path class="svg-result__shadow-1 svg-result__shadow" d="M624.6,892H317.3a8.7,8.7,0,1,1,0-17.4H624.5a8.71,8.71,0,0,1,8.7,8.7A8.56,8.56,0,0,1,624.6,892Z" fill="#fff"/>
                            <path class="svg-result__shadow-2 svg-result__shadow" d="M708.1,892H665.4a8.7,8.7,0,0,1,0-17.4h42.7a8.7,8.7,0,0,1,0,17.4Z" fill="#fff"/>
                        </g>
                        <path opacity="0.3" class="svg-result__radiate" d="M71.5,444.8l-65-28.4M332.7,189.1l-27.6-65.3M172.5,292.4l-103-102M949.4,444.8l65-28.4M688.2,189.1l27.6-65.3M848.4,292.4l103-102m-441.3-39,.3-144.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="13"/>
                        <ellipse class="svg-result__circle-stroke svg-result__card-stroke--quick" cx="302.6" cy="464.7" rx="57.7" ry="43" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="12"/>
                        <g>
                        <path class="svg-result__card-stroke svg-result__card-outline" d="M699.7,783.9H234.3a38.88,38.88,0,0,1-38.8-38.7V400.1a38.88,38.88,0,0,1,38.8-38.7H791.7a38.88,38.88,0,0,1,38.8,38.7V745.2a38.88,38.88,0,0,1-38.8,38.7H757.8" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                        <path class="svg-result__card-stroke svg-result__card-outline" d="M736.1,783.9H721.6" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12"/>
                        </g>
                        <path class="svg-result__card-details" d="M253.5,664.3H582M253.5,719.8H337m31.5,0H452m31.5,0H567m31.4,0h83.5" opacity="0" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="16"/>
                    </g>
                </svg>
            </div>
            <h3 class="membership-widget__section-title membership-widget__section-title--result">Basic</h3>
            
            <a href="#" class="membership-widget__section-button membership-widget__section-button--join button button--header">Join Now</a>
            <a href="/membership" class="membership-widget__section-button membership-widget__section-button--learn-more button button--header">Learn More</a>
            <a href="/membership" class="membership-widget__section-link link link--white membership-widget__section-link--reset">Start Over</a>
        </div>
    </div>
</div>
!

CSS 

              
                

.membership-widget__container {
    background-color: blue;
    color: white;
    position: relative;
    min-height: 365px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.membership-widget__content-container {
    width: 100%;
}

.membership-widget__section {
    display: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
}

.membership-widget__section--start {
    display: flex;
}

.membership-widget__section-title {
    // max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

.membership-widget__section-copy {
    margin-bottom: 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.membership-widget__svg-container {
    width: 50%;
    max-width: 100%;
    margin: 0 auto;
    max-height: 130px;

    svg {
        max-width: inherit;
        max-height: inherit;
    }
}

.membership-widget__section-link--reset {
    position: absolute;
    right: 20px;
    top: 20px;
    opacity: 0.4;
    transition: all 0.15s ease-in-out;

    &:after {
        display: none;
    }

    &:hover {
        opacity: 1;
    }
}

.membership-widget__section-button {
    margin-left: 10px;
    margin-right: 10px;
    min-width: 100px;

}

.button {
  color: white;
  background-color: rgba(white, 0.3);
}
!

JS 

              
                
var membershipWidget = {
    init: function () {
      membershipWidget.widget();
    },
  
    widget: function () {
      // answer array []
      var answerCodeArray = [];
      var numQues = 4;
      var answerCode;

      var tl1 = new TimelineMax();
      var tl2 = new TimelineMax({paused: true});
      // var tl3 = new TimelineMax({paused: true});
      var tl3 = new TimelineMax({paused: true});
      var tl4 = new TimelineMax({paused: true});
      var tl5 = new TimelineMax({paused: true});
      var resultTimeLine = new TimelineMax({paused: true});

      tl1
        .set('.step-1__card-left', {opacity: 0, y: -40})
        .set('.step-1__card-left-shadow', {opacity: 0, y: 40})
        .set('.step-1__card-right', {opacity: 0, y: -40})
        .set('.step-1__card-right-shadow', {opacity: 0, y: 40})
        .set('.step-1__fill', {opacity: 0})
        .set('.step-1__label-divider', {opacity: 0})
        .set('.step-1__label', {opacity: 0})
        .to($('.step-1__svg-container'), 0.15, {opacity: 1})
        .from($('.step-1__card-stroke'), 0.75, {drawSVG: '0', ease: Power1.easeIn})
        .from($('.step-1__card-stroke--quick'), 0.5, {drawSVG: '0'})
        .to($('.step-1__label-divider'), 0.25, {opacity: 1}, "-=0.25")
        .to($('.step-1__label'), 0.25, {opacity: 1}, "-=0.5")
        .to($('.step-1__card-details'), 0, {opacity: 1})
        .from($('.step-1__card-details'), 1, {drawSVG: '0'})
        .to($('.step-1__fill'), 0.7, {opacity: 0.25}, "-=0.4")
        .to($('.step-1__card-left'), 0.5, {opacity: 1, y: 0})
        .to($('.step-1__card-left-shadow'), 0.5, {opacity: 0.3, y: 0}, "-=0.5")
        .to($('.step-1__card-right'), 0.5, {opacity: 1, y: 0})
        .to($('.step-1__card-right-shadow'), 0.5, {opacity: 0.3, y: 0}, "-=0.5")
        ;

      tl1.timeScale(1.5);

      tl2
        .set($('.step-2__dial'), {rotation: -60, transformOrigin: "50% 90%", ease: Bounce.easeOut})
        .set($('.step-2__numbers'), {opacity: 0})
        .to($('.step-2__container'), 0.25, {opacity: 1})
        .to($('.step-2__numbers'), 0.5, {opacity: 1})
        .fromTo($('.step-2__outline--1'), 0.2, {drawSVG: '0'}, {drawSVG: '100%'}, '-=0.2')
        .fromTo($('.step-2__outline--2'), 0.05, {drawSVG: '0'}, {drawSVG: '100%'})
        .fromTo($('.step-2__outline--3'), 0.3, {drawSVG: '0'}, {drawSVG: '100%', ease: Power1.easeIn})
        .to($('.step-2__dial-indicators'), 0.5, {opacity: '1'})
        .to($('.step-2__dial'), 1.5, {opacity: 1, rotation: 50, ease: Elastic.easeOut.config(0.8, -0.3)}, "-=0.2")
        .to($('.step-2__numbers'), 2.2, {
          scrambleText: {
            text: '098787',
            chars: '0123456789',
            ease: Linear.easeNone,
            speed: 0.8
          }
        }, "-=2.7")
        .to($('.step-2__background-fill'), 0.4, {opacity: 0.13}, "-=1.5");

      tl3
        .to($('.step-3__container'), 1.4, {opacity: 1});

      nestTimelines();

      function nestTimelines() {
        $initalClouds = $('.step-3__initial-cloud');
        $clouds = $('.step-3__cloud');
        $roadLinesFront = $('.step-3__road-line--front');
        $roadLinesBack = $('.step-3__road-line--back');
        $frontWheel = $('.step-3__front-wheel');

        var frontWheelTl = new TimelineMax({repeat: -1});
        var frontLinesTl = new TimelineMax({repeat: -1});
        var backLinesTl = new TimelineMax({repeat: -1});
        var stagger = 0.3;

        $roadLinesFront.each(function(i, line) {
         
          var lineTl = new TimelineMax();

          lineTl
          .fromTo($(line), stagger, {drawSVG: '0% 0%', ease: Power1.easeOut}, {drawSVG: '0% 100%', ease: Power1.easeOut} )
          .fromTo($(line), stagger, {drawSVG: '0% 100%', ease: Power1.easeOut}, {drawSVG: '100% 100%', ease: Power1.easeOut}, "+=" + stagger*2.1)
          ;  

          frontLinesTl.add(lineTl, stagger * i);
        });

        $roadLinesBack.each(function(i, line) {
          
           var lineTl = new TimelineMax();

           var shortStagger = (stagger*3)/2;
 
           lineTl
           .fromTo($(line), shortStagger, {drawSVG: '0% 0%', ease: Power1.easeOut}, {drawSVG: '0% 100%', ease: Power1.easeOut} )
           .fromTo($(line), shortStagger, {drawSVG: '0% 100%', ease: Power1.easeOut}, {drawSVG: '100% 100%', ease: Power1.easeOut}, "+=" + shortStagger*1.6)
           ;  
 
           backLinesTl.add(lineTl, stagger * i);
         });
        
        $initalClouds.each(function(index, cloud) {
          
          var cloudTl = new TimelineMax();
          
          cloudTl
            .to($(cloud), 4 + (Math.random()*4), {x:-100, ease: Linear.easeNone});
  
          tl3.add(cloudTl, 0.5);
        });

        $clouds.each(function(index, cloud) {
          TweenLite.set(cloud, {x:'-=1200'});

          var cloudTl = new TimelineMax({repeat: -1});
  
          cloudTl
            .to($(cloud), 5 + (Math.random()*6-1), {x:0, ease: Linear.easeNone});
  
          tl3.add(cloudTl, Math.random()*2);
        });

        frontWheelTl
          .to($frontWheel, 1.7, {transformOrigin: "50% 50%", rotation: '-360', ease: Linear.easeNone})
        ;

        frontLinesTl.timeScale(1.5);
        backLinesTl.timeScale(1.5);

        tl3.add(frontWheelTl, 0);
        tl3.add(frontLinesTl, 0);
        tl3.add(backLinesTl, 0);
      }

      tl3.timeScale(1.5);
      
      tl4 = new TimelineMax({paused: true});

      tl4
        .set($('.step-4__bg'), {opacity: 0})
        .set($('.step-4__marker--1'), {opacity: 0})
        .set($('.step-4__marker--2'), {opacity: 0})
        .set($('.step-4__dotted-path'), {opacity: 0})
        .set($('.step-4__plants'), {opacity: 0})
        .set($('.step-4__waves'), {opacity: 0})
        .set($('.step-4__map-shadow'), {opacity: 0, y: 20})
        .to($('.step-4__container'), 0.25, {opacity: 1})
        .from($('.step-4__outline-stroke'), 0.5, {drawSVG: 0})
        .from($('.step-4__outline-stroke--dash'), 0.1, {drawSVG: 0})
        .from($('.step-4__outline-stroke--dash'), 0.1, {drawSVG: 0})
        .from($('.step-4__outline-stroke--divider'), 0.4, {drawSVG: 0}, '-=0.2')
        .from($('.step-4__legend-stroke'), 0.5, {drawSVG: 0}, '-=1')
        .to($('.step-4__waves'), 0.25, {opacity: 1})
        .to($('.step-4__plants'), 0.25, {opacity: 1}, "-=0.25")
        .to($('.step-4__map-shadow'), 0.5, {opacity: 1, y: 0}, "-=0.4")
        .to($('.step-4__bg'), 0.5, {opacity: 0.3}, "-=0.4")
        .to($('.step-4__marker--1'), 0.5, {opacity: 1}, "-=0.5")
        .to($('.step-4__marker--2'), 0.5, {opacity: 1}, "-=0.1")
        .to($('.step-4__dotted-path'), 0.5, {opacity: 1})
        .to($('.step-4__path-mask'), 0.6, {drawSVG: '100% 100%', ease: Power1.easeIn}, "-=0.6")
        ;

      tl4.timeScale(1.3);
      
      tl5
        .set($('.step-5__passenger-right'), {opacity: 0, y: -10})
        .set($('.step-5__passenger-left'), {opacity: 0, y: -10})
        .set($('.step-5__driver'), {opacity: 0})
        .to($('.step-5__container'), 0.25, {opacity: 1})
        .to($('.step-5__driver'), 0.6, {opacity: 1, y: -10, ease: Power1.easeIn}, "-=0.15")
        .to($('.step-5__passenger-left'), 0.7, {opacity: 0.75, x: 15, y: 0, ease: Power1.easeIn})
        .to($('.step-5__passenger-right'), 0.7, {opacity: 0.75, x: -15, y: 0, ease: Power1.easeIn}, "-=0.6")
      ;

      // tl4.play();
      var timeLines = [tl1, tl2, tl3, tl4, tl5];

      resultTimeLine
        .to($('.svg-result__container'), 0.25, {opacity: 1})
        .from($('.svg-result__card-stroke'), 1, {drawSVG: '0', ease: Power1.easeIn})
        .from($('.svg-result__card-stroke--quick'), 0.5, {drawSVG: '0'})
        .to($('.svg-result__label-divider'), 0.25, {opacity: 1}, "-=0.25")
        .to($('.svg-result__card-label'), 0.25, {opacity: 1}, "-=0.5")
        .to($('.svg-result__card-details'), 0, {opacity: 1})
        .from($('.svg-result__card-details'), 1, {drawSVG: '0'})
        .to($('.svg-result__fill'), 0.7, {opacity: 0.25}, "-=0.4")
        .from($('.svg-result__radiate'), 0.7, {drawSVG: '0', ease: Power1.easeIn}, "-=0.2");

      resultTimeLine.timeScale(1.5);
  
      // click start button
      $(".membership-widget__section-button--start").click(function (e) {
        e.preventDefault();

        $(".membership-widget__section--start").css("display", "none");
        $(".membership-widget__section--q0").css("display", "flex");
        
        tl2.seek(0).play();

        console.log('go!');

      });
  
      // click reset button
      $(".membership-widget__section-link--reset").click(function (event) {
        event.preventDefault();

        $(".membership-widget__section").css("display", "none");
        $(".membership-widget__section--start").css("display", "flex");
        
        tl1.seek(0).play();
  
      });
  
      displayNext = function (i) {
        var oldID = i;
        var newID = ++i;
          
        if (newID < numQues) {
  
          $(".membership-widget__section--q" + oldID + "").css("display", "none");
          $(".membership-widget__section--q" + newID + "").css("display", "flex");
  
          timeLines[i + 1].seek(0).play();
        }
  
        if (i == 4) {
          
        $(".membership-widget__section--result").css("display", "flex");
  
        //merge array to form code
        answerCode = answerCodeArray.join("");
        var resultSVG, resultTitle, resultCopy, resultLink, resultSection, resultSVGLabel;
          switch (answerCode) {
            case "1000":
            resultSVG = '.membership-widget__svg-container--result-plus';
              resultTitle = 'Basic or Plus';
              
              resultLink = '/membership/plus';
              break;
            case "0001":
            resultSVG = '.membership-widget__svg-container--result-basic';
              resultTitle = 'Basic + Associate';
              
              resultLink = '/membership/basic';
              break;
            case "1001":
            resultSVG = '.membership-widget__svg-container--result-plus';
              resultTitle = 'Basic or Plus + Associate';
              
              resultLink = '/membership/plus';
              break;
            case "0100":
            case "0110":
            case "1100":
            resultSVG = '.membership-widget__svg-container--result-plus';
              resultTitle = 'Plus';
              
              resultLink = '/membership/plus';
              break;
            case "0101":
            case "0011":
            case "1101":
            resultSVG = '.membership-widget__svg-container--result-plus';
              resultTitle = 'Plus + Associate';
              
              resultLink = '/membership/plus';
              break;
            case "0010":
            case "1010":
            case "1110":
            resultSVG = '.membership-widget__svg-container--result-premier';
              resultTitle = 'Premier';
              
              resultLink = '/membership/premier';
              break;
            case "0111":
            case "1011":
            case "1111":
            resultSVG = '.membership-widget__svg-container--result-premier';
              resultTitle = 'Premier + Associate';
              
              resultLink = '/membership/premier';
              break;
            default:
              resultSVG = '.membership-widget__svg-container--result-basic';
              resultTitle =  'Basic';
              
              resultLink = '/membership/basic';
          }

          var $section = $(resultSection);
          
          $('.membership-widget__svg-container--result').css({display: "none"});
          $(resultSVG).css({display: 'block'});
          $('.membership-widget__section-title--result').text(resultTitle);
          
          $('.membership-widget__section-button--join').attr('href', resultLink);
          $('.membership-widget__section-button--learn-more').attr('href', resultLink);

          $(".membership-widget__section--q" + oldID + "").css("display", "none");
          $('.membership-widget__section--result').css("display", "flex");

          resultTimeLine.seek(0).play();
  
          //reset array
          answerCodeArray = [];
        }
  
      };
  
      clickYes = function (i) {
        $(".membership-widget__section--q"+i+" .membership-widget__section-button--yes").click(function (e) {
          e.preventDefault();
          // go to next question
  
          answerCodeArray.push(1);
          displayNext(i);
          // console.log(answerCodeArray);
        });
      };
  
      clickNo = function (i) {
        // click yes or no button
        $(".membership-widget__section--q"+i+" .membership-widget__section-button--no").click(function (e) {
          e.preventDefault();
          // go to next question
  
          answerCodeArray.push(0);
         displayNext(i);
          // console.log(answerCodeArray);
        });
      };
  
      for (var i = 0; i < numQues; i++) {
        // click yes or no button
        clickYes(parseInt([i]));
        clickNo(parseInt([i]));

      }
    }
  };
  
membershipWidget.init();
!
999px

Console