.section {
    scroll-snap-align: start;
    padding: 4rem .2rem;
}

.section-content {
    width: 100%;
    max-width: 900px;
    /* 896 px – same as original design */
    margin: 0 auto 8rem;
    /* left / right auto = centering */
}

@media(min-width:1024px) {
    .section {
        padding: 12rem 1.5rem;
    }
}

.section-title {
    font-size: 2.3rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 1rem 0;
    line-height: 1.1;
    color: #000;
}

@media(min-width:768px) {
    .section {
        padding: 8rem 1.5rem;
    }

    .section-title {
        font-size: 3rem;
    }
}

.dot {
    color: var(--webpage-main-color);
}

/* keep scroll-margin tweak points */
#what,
#demo,
#steps,
#pricing-section,
#contact,
#faq {
    scroll-margin-top: 100px;
}