Multi Step Form (HTML, CSS, JS)

Any feedback welcome. The code itself is quite messy, tried to organize it by declaring the variables per step at the top, then declaring the functions below those. Quickly found that scrolling up and down was more of a drag, and especially as the file got bigger I noticed that having (almost) all variables at the top did not really offer any benefit anymore. At that point I gave up trying to organize it, but it is noted for the next project. We live and we learn.

I was often wondering if my way of doing things was the most efficient (unlikely) or even considered bad practice. For example, the way I hide and show elements in this code seems a bit 'basic'. I knew creating elements and appending them was an option, but with the way I started the project (a bit naively just went straight in) I felt it would be too much of an effort to make that a thing.

So if there is any feedback on that, it would be very welcome. Things that are bad practice, things that can be more efficient. But also maybe things that are actually good practice and efficiently done.

Most differences between my project and the design images (I did not have the design files - used the free version) are intentional as I prefer it (e.g. displaying the yearly offer and resetting the add ons after going back to step 2) or small details which would be easily correct with the design files (font sizes, colors, etc.).

Also definitely did not forget ( ;) ) to make it resizeable to mobile. Will do that in the near future, as well as adding some transition effects to make it all look and feel nicer.