/*
 * Full-bleed marketing page. The nav is transparent and sits on the hero,
 * the way the home page does. The placeholder that other pages use to push
 * content below the beige bar has to go, or the still life never reaches it.
 */
body.beautysociety-transformation-is-active #custom-header-placeholder {
    display: none !important;
    height: 0 !important;
}
body.beautysociety-transformation-is-active #page-container .et_pb_section,
body.beautysociety-transformation-is-active #page-container .et_pb_row,
body.beautysociety-transformation-is-active #page-container .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.beautysociety-transformation-is-active #page-container .et_pb_section {
    background: transparent !important;
}

body.beautysociety-transformation-is-active .et_pb_text,
body.beautysociety-transformation-is-active .et_pb_text_inner {
    padding: 0 !important;
}

body.beautysociety-transformation-is-active #page-container,
body.beautysociety-transformation-is-active #et-main-area {
    background-color: #f6f1ea !important;
}

/*
 * Clip the viewport, not the Divi wrappers. overflow-x: hidden on a wrapper
 * turns it into a scroll container and the step stage can no longer stick.
 */
html:has(body.beautysociety-transformation-is-active) {
    overflow-x: clip !important;
    max-width: 100%;
}

body.beautysociety-transformation-is-active .beautysociety-transformation {
    overflow-x: clip;
    max-width: 100%;
}

body.beautysociety-transformation-is-active {
    overflow-x: visible !important;
    max-width: 100%;
}

body.beautysociety-transformation-is-active #page-container,
body.beautysociety-transformation-is-active #et-main-area,
body.beautysociety-transformation-is-active .et_pb_section,
body.beautysociety-transformation-is-active .et_pb_row,
body.beautysociety-transformation-is-active .et_pb_column {
    overflow: visible !important;
    max-width: 100% !important;
}