Multi-page form displayed on one webpage

What are you most proud of, and what would you do differently next time?

I had a lot of fun figuring out hyper-specific selectors, for example this one only displays an element on page 4 if there's at least one visible sibling following it (not just the next sibling) (note: these are written with SASS not vanilla CSS)

.colored-box:has(hr ~ .price-row:not(.hide)){
    hr {
        border-top: 1px solid $light-gray;
    } 
}

And this selects the button text on page 2 and shifts it upwards to make room for a third line but only if a button in a different container on the page is toggled

.form-container:has(.payment-toggle-switch input:checked){
        .container {
            .discount {
                opacity: 100;
            }
            h2, .payment-rate {
                transform: translateY(0);
            }
        }

What challenges did you encounter, and how did you overcome them?

I struggled a little figuring out how to manage the totals page since they all changed when the monthly/yearly button was toggled, and realised the best solution was just to keep track of all the numerical values with variables under the hood instead of pulling the values directly from the DOM. This seems like a good practice going forward, only add data to the DOM, don't grab data from it (excluding inputs)

I also ran into issues with the mobile version being impacted by the viewport height (eg if you open a link with twitter it creates a container that takes up a lot of space at top and bottom and doesn't reflect the actual device's height which I didn't think of when using Devtools, so my buttons at the bottom were obscured) but that was solved by creating a media query for max-height that shrank a few elements' heights on shorter screens